コース: JavaScript 基本講座
今すぐコースを受講しましょう
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
フォームのデータを入れ子のオブジェクトで設定する
このレッスンでは、フォーム要素のデータを 入れ子のオブジェクトを関数に渡して、 とりあえず設定してみたいと思います。 フォーム要素のデータの設定は、実は ほぼ出来上がっていて、 この setFormValues というのを呼び出して 設定を行っているんですが、 オブジェクトで渡しています。 そして、オブジェクトのプロパティ名は、 要素に設定した name になってるんですね text、radio、select、textArea と ということで、ところがこの チェックだけ抜けてるんですね。 チェックはちょっと厄介なので 飛ばしてありますが、 check 以外は設定ができます。 どのように設定してるかというと、 「for in」という構文で、 オブジェクトのプロパティ名を取り出して、 そしてここで、 コンソール、確認していますが、 プロパティ名とそのプロパティ名の 値を確認したうえで、 form の name 属性で フォームが取得できますので、 value を設定すると。 checkbox の場合には、 value じゃまずいんですよね。 だから飛ばしてあるんですが、 checkbox 以外は出来ていますので 確認しましょう。 もう設定は済んでいるんですけれども、 「Console」に オブジェクトの値が出ていますので、 確認しますと、 「text」、「new text is set」、 なってますね。 「radio」は2番が選択されて、 「select」は3番になっています。 「checkbox」飛ばしてますね。 3番になっていて「textArea」は、 「new text is written.」ということで、 「checkbox」以外、 設定はできていますので、 残る「checkbox」を設定しましょう。 引数に渡しているこのオブジェクトですね。 これに checkbox を 加えようというんですが、 1行にしておくとちょっと見苦しいので、 改行して見やすくしましょう。 radio、それから select、 textArea ですね。 あと、「括弧閉じ」は改行しましょう。 で、順番で言うとこの radio の後に checkbox が入るんですが、 ここでちょっと、やはり例外的な扱いです。 他は、name属性を このプロパティにしているんですが、 ここでは…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
目次
-
-
-
-
-
(ロック済み)
フォームの要素を取得する5分14秒
-
(ロック済み)
フォームのデータを取得する6分4秒
-
(ロック済み)
フォームのデータを設定する5分11秒
-
(ロック済み)
フォームのデータをすべて取り出す6分9秒
-
(ロック済み)
フォームのデータを適切に取り出す6分39秒
-
(ロック済み)
オブジェクト (Object) を使う5分40秒
-
(ロック済み)
オブジェクトの入れ子と参照6分17秒
-
(ロック済み)
フォームのデータをオブジェクトで設定する5分31秒
-
(ロック済み)
フォームのデータを入れ子のオブジェクトで設定する5分9秒
-
(ロック済み)
フォームのデータをswitch-case文で取得する6分10秒
-
(ロック済み)
変更したフォーム要素のデータを調べる7分17秒
-
(ロック済み)
ダイアログで選んだファイルを確かめる5分23秒
-
(ロック済み)
ダイアログで選んだテキストファイルを読み込む4分35秒
-
(ロック済み)
ダイアログからテキストファイルだけを読み込む5分11秒
-
(ロック済み)
-
-
-