JavaScriptのvalue・defaultValue・textとは?入力値と初期値、選択肢の文字列を扱う方法
value・defaultValue・text は、フォーム要素の文字列を参照/設定するためのプロパティです。
入力欄の値、テキストエリアの初期値、セレクトメニューの項目名などを扱う際に必須の知識です。
valueプロパティとは?
value は、入力欄(input・textarea・select など)に現在入力されている値を参照/設定するプロパティです。
使用例:入力チェック
if (document.enqForm1.mail.value === “”) {
alert(“メールアドレスを入力してください”);
}
→ 入力チェックで最もよく使われるプロパティ。
defaultValueプロパティとは?
defaultValue は、テキストエリア(<textarea>)に
ページ読み込み時に設定されていた初期文字列 を返します。
ユーザーが入力内容を変更しても、defaultValue は変わりません。
使用例:初期値の確認
alert(document.enqForm1.comment.defaultValue);
textプロパティとは?
text は、セレクトメニュー(<select>)内の
option の表示文字列 を参照/設定するプロパティです。
項目は options[番号] で参照します。番号は 0 から始まります。
使用例:選択肢の文字列を変更
document.enqForm1.enqMenu.options[0].text = “quality”;
→ 動的に選択肢の内容を変更したいときに便利。
実際のフォーム例
メール:<input type=”text” name=”mail”><br>
コメント:<textarea name=”comment”>初期コメントです</textarea><br>
選択メニュー:
<select name=”enqMenu”>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<input type=”button” value=”メール値確認” onclick=”alert(document.enqForm1.mail.value)”>
<input type=”button” value=”コメント初期値確認” onclick=”alert(document.enqForm1.comment.defaultValue)”>
<input type=”button” value=”選択肢変更” onclick=”document.enqForm1.enqMenu.options[0].text=’quality'”>
</form>
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本でじっくり読み込みたい
- 体系的にまとまった教材で学びたい
- ネット記事だけだと情報が断片的に感じる
JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。
いちばんやさしい JavaScript の教本
手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
この本で解決できること:
- JavaScriptの基本文法をやさしく理解できる
- 手を動かしながら学べるため、挫折しにくい
- 「まず動くものを作ってみたい」が実現できる
確かな力が身につくJavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
この本で解決できること:
- JavaScriptの基礎を体系的に学び直せる
- 初心者がつまずきやすい部分を重点的に理解できる
- 実務で使えるレベルの基礎力を身につけられる
体系的に学びたい方へ(スクールという選択肢)
独学の限界を感じやすいポイント
- エラーの原因が分からず、調べても解決できない
- 学習の順番に自信が持てない
- モチベーションが続かず、途中で止まってしまう
- 実務レベルのコードレビューを受ける機会がない
こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。
無料相談で得られるメリット
- あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
- 独学で詰まりやすいポイントを事前に教えてくれる
- 学習方法の改善点をプロがアドバイスしてくれる
- エンジニア転職を考えている場合、キャリア相談も可能
JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。
まとめ
value:入力欄の現在の値を参照/設定defaultValue:textarea の初期文字列を参照text:セレクトメニューの option の表示文字列を参照/設定- 入力チェック・初期値確認・動的な選択肢変更などに必須