今回は『10日で覚えるjavascript』のCHAPTER4のLESSON14をやりました。getElementByIdメソッドを使うと、HTMLの任意の要素を選択することができます。ここではHTMLの要素を選択し、CSSを切り替えてデザインを変更し、要素の中にテキストを追加します。今回操作するのは、「basket」というIDが設定されているdiv要素です。HTML上ではclass属性に「empty_basket」が設定されており、空きを表す黒地に青い線枠のスタイルで表示されます。また、商品が追加された状態を表す黄色地に緑点線の枠のスタイル「filled_basket」も用意してあります。
ここでは、主にフォームの部品(ボタンやテキストボックス)を使ってコントロールできるプログラムの作り方を説明していますが、そのためには、まず特定のHTMLの要素を選択する方法を知らなければなりません。やり方はいくつかあるのですが、今回使用するのはDocumentオブジェクトのgetElementsByIdメソッドです。このメソッドは要素に設定したIDを引数にして、「Elementオブジェクト(のインスタンス)」を返します。このElementオブジェクトがHTML要素を表しています。Elementオブジェクトは数多くのメソッドとプロパティを持っており、今回ではclassNameとinnerHTMLという2つのプロパティを使用しています。classNameは要素のクラス名を取得・設定するプロパティです。ここに使用したいスタイルのクラスを指定すると、そのクラス名がセレクタとなっているスタイルシートが設定されます。また、innerHTMLは要素の子を取得・設定します。ここでは「'商品が入る'」を代入しているので、div要素の子としてp要素とテキストが追加されます
正直、難しいです。この次にやった「イベント」と「イベントハンドラ」で足をとられ、本日は２LESSONしか進まず。プログラムの流れを理解するのはこんなにも難しいとは。
11月2日 宮本 勇