Head First Javascript　概要と使用した関数　７章から１２章

７章
フォーム　エラーチェックなど
フォームデータにアクセスする
< input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)" />
formオブジェクトはフォームにある全てのフィールドを配列として保持している。配列要素はname属性に設定された識別式を使って格納されている。
function showIt(theForm) {
alter( theForm.[“zipcode”].value );
}

フォームフィールドで発生するイベント
onfocus　あるフィールドが選択された
onblur　フィールドから入力カーソルがなくなった　＝＝＞　データ検証に最適
onchenge　フィールドから入力カーソルがなくなった＋データが変更された　(空フィールドを移動していってもイベントは発生しない）

８章
HTMLの内容を操作する
docuemnt.getElementById(“orange”)
document.getElementsByTagName(“img”)[3]
document.getElementById(“scenetext”).innerHTML = message; または “メッセージテキスト”
innerHTMLはdiv、span、pなどコンテンツのコンテナとして機能する要素のコンテンツを設定する

ノードプロパティによりDOMツリーのノードをたどる事が出来る
nodeValue、nodeType、childNodes、firstChild、lastChild
あるノードのテキストコンテンツはそのノードの子ノードに保持されている。
document.getElementByID(“story”).firstChild.nodeValue = “メッセージ”
しかし、子ノードは一つとは限らないので、ノードのコンテンツを変更する場合には
var node = document.getElementById(“story”);
While (node.firstChild)
node.removeChild(node.firstChild);
node.appendChild(document.createTextNode(“メッセージ”));

改行しないButtunを作るのに＜div＞ではなく、改行しないinline要素の＜span＞が適切
マウスのフォバー表示も出来る
ゲームスタート
Javascriptでは全ての要素はオブジェクトです。ある要素のHTMLコードの中ではthisというキーワードを使ってそのオブジェクトにアクセスできる。
空のButtonは消す

ノードのclassNameプロパティ　　大きなスタイルの変更。CSSのチャンク
ノードのstyleプロパティ　　　　ちょっとしたスタイル変更。CSS要素単位

決定履歴

function changeScene(decision) {
･･･
// Update the decision history
var history = document.getElementById("history");
if (curScene != 0) {
  // Add the latest decision to the history
  var decisionElem = document.createElement("p");
  decisionElem.appendChild(document.createTextNode("Decision " + decision + " -> Scene " + curScene + " : " + message));
  history.appendChild(decisionElem);
  }
  else {
  // Clear the decision history
  while (history.firstChild)
  history.removeChild(history.firstChild);
 }
}

９章