ITツールの使い方

７章
フォーム　エラーチェックなど
フォームデータにアクセスする
< 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);
 }
}

９章

１章
var userName = prompt(“あなたのお名前は？”);
alert(“はじめまして、” + userName + “さん、”);
document.getElementById(“rock.Img”).src = “../rock_happy.png”
onload
onclic

２章
キャメルケース
perseInt(“3ダース”)　　　実数を与えると整数部のみ返す
perseFloat(“$14.5”)
parseInt(document.getElementById(“cakedonuts”).value);
toFixed(2)　　　　　　　　total.toFix(2)　少数点以下2桁を四捨五入
isNaN()

３章 ブラウザを調べる
Javascriptで扱えるブラウザ機能　ブラウザウインドウの幅と高さ、アクセス履歴、タイマークッキー
扱えない機能　　　　　 　　　　　　　ブラウザウインドウの開閉
タイマー
setTimeout(“alert(‘起きて！’);”, 600 * 1000);
Var timerID = setInterval(“alert(”);”, 600 * 1000);
clearInterval(timerID);　　　　　　　　　　　　　　　タイマーを停止する
setInterval(“location.reload();”, 15 * 1000);　　定期的にページを更新
documentオブジェクト
document.body.clientHeight　　　　　　　　　　　　body.clientHeightはプロパティ
document.body.clientWidth　　　　　　　　　　　　body.clientWidthはプロパティ
document.getElementById(“XXXX”).style.height　　要素のプロパティー
document.getElementById(“XXXX”).style.width
ブラウザは表示する内容を縦方向に詰める傾向があるので、クライアントウインドウの高さを元に画像表示のサイズは決定したほうが良い。
クッキー
userName = readCookie(“irock_username”);
writeCookie(“irock_username”, userName, 5 * 365);
eraseCookie(“irock_username”);
navigator.cookieEnabled

４章
if文

if (chosenCase == "A")
openCase("A");

if (chosenCase == "A")
openCase("A");
else {
openCase("defoult");
doSomething();
}

if (chosenCase == "A")
openCase("A");
else if (chosenCase == "B")　{
openCase("B");
doSomething();
else
openCase("defoult");
doSomethingelse();
}

コメント
//
/*
･･･
*/

変数の場所
関数の引数は既に初期化されたローカル変数と同じ様な動作になる

switch文

switch (curScene)　{　　//評価できるのは式ではない
case 0:
curScene = 1;
dosomething0();
break;
case 1;
if (decision == 1)　{
curScene = 2;
dosomething1();
}
else　{
curScene = 3;
dosomething2();
}
break;
default:
curScene = 0;
dosomethingelse();
break;
}

５章

ループ
for (var x=0; x<37; X++)
doSomething();
break;
continue;
var x = 10;
while( x>0 ) {
alert("Starting in.." + x );
x--;
}
var str = prompt("お名前を教えて下さい。","");
var accept = confirm("Is this Okey?");
配列
var showTime = new Array();
showTime[0] = "12:30";
Var showTime = [ "12:30", "2:45", "5:00", "7:15" ];
document.getElementById("seat" + i).src = "seat_avail.png";
var seats = new Arrey(new Arrey(9), new Arrey(9), new Arrey(9), new Arrey(9));
var seats = [[ false, true, ･･･, false ], [ ･･･ ], [ ･･･ ], [ false, true, ･･･, false ]];
alert(seats[1][3]);


６章
関数の引数は関数の外にある変数には影響しません。引数の値を変更しても関数呼び出し側ではその値を参照できません。
関数の値を返したい場合は戻り値として返します。
function tempIndicator() {
var rawTemp = readSensor();
var actualTemp = convertTemp(rawTemp);
return actualTemp;
return文は戻り値を返すか、特定の場所で関数を終わらせる為に使われる。
関数呼出と関数参照

function showSeatStatus(seatNum) {
alert();
}
var showSeatStatus = function(seatNum) {
alert();
}

コンテンツ(html)から機能(Js)の分離 – 関数参照を使ってイベントとつなぐ

<body onload="xxxxx();">を変更
window.onload = function() {
document.getElementById("findseats").onclick = findSeats;
//
document.getElementById("seat0").onclick = function(evt) {showSeatStatus(0);};
document.getElementById("seat1").onclick = function(evt) {showSeatStatus(1);};
･･･
//
initSeats();
}


７章

８章

９章

１０章

１１章

１２章

HTML 構造
CSS スタイル
JavaScript アクション

JavaScriptを使うと、ボタンのクリックやブラウザウインドウの大きさ変更、テキストフィールドへのデータ入力などウェッブページで起きることを検知する事が出来る。