JavaScriptマンツーマンレッスン後記 - Webサイト専門プログラマの言いたい放題

昨日のレッスンでは、お問い合せフォームを題材にJavascriptで
フォームの表示項目を切り替える方法を扱いました。

お問い合せフォームで問い合わせの種類を選択すると、
選択に応じて入力項目が自動的に増えたり、
それに応じて入力エラーチェックの方法を変えるには
Javascriptを使う必要があります。

HTMLはDOM（ドキュメント・オブジェクト・モデル）という
オブジェクト階層を持っています。

一番トップの階層にはHTMLの記述内容そのものを統括する
documentオブジェクトがあり、documentオブジェクトの中に
ページ内に含まれる全てのHTMLタグが、HTMLを書いた階層構造に
従って格納されています。

Javascriptを使えば、HTMLのDOMツリーを辿ることによって、
任意のHTML要素（タグ）をJavascriptで操作できるオブジェクト
として取り出す（アクセスする）ことができます。

HTMLに、contact というIDを付けたテキストボックスがある場合。

<input type="text" id="contact">

documentオブジェクトを起点に、DOM経由で指定したIDの要素を
取得し、style属性のdisplayプロパティにアクセスして値を設定
する例です。

var element = document.getElementByID('contact');
element.style.display = 'none';

HTMLタグに直接書いた場合はこのようになります。

<input type="text" id="contact" style="display:none;">

この記法において、style は type とか id と同類の「属性」
の１つです。スタイル属性と言います。

そして、スタイル属性には display:none; のように、
スタイルシートの文法で装飾を定義することができます。

スタイルシートでは、display とか font-size などのことを
プロパティと呼びます。

なので、

・contactというHTML要素（タグ）の、
・style属性の、
・displayプロパティに、
・none という値を、

設定しているということになります。

HTMLだけだと、

<input type="text" id="contact">

を

<input type="text" id="contact" style="display:none;">

に変更したければ、ファイルを書き換えてウェブサーバーに
アップし直す必要がありますが、

Javascriptを使えば、HTMLやCSSファイルを直接書き換えなくても、
ブラウザ上で動的に変更することができます。

典型的なのは、お問い合せフォームの送信ボタンをクリックしたら
未入力項目がないかどうかをチェックしてエラーメッセージを表示
するといった処理ですね。

※平日の夜は予約が埋まりやすいのでお早めにご相談ください。
※Facebookでもプログラミング＆コーディングの本質を投稿しています。
Facebook（友達限定のプライベート投稿で本質的な情報発信中）