基金訓練(Webデザイン・プログラミング科)の56日目に行ってまいりました。
56日目は、JavaScriptプログラミングの実習です。
56日目の内容は下記のとおりです。
１．2次元配列
プログラム例
var players = new Array (4);
players[0] = new Array ("真弓",7,34);
players[1] = new Array ("バース",44,54);
players[2] = new Array ("掛布",31,40);
players[3] = new Array ("岡田",16,35);
document. write ("1985年ホームラン40本以上の選手<br />");
for (var i = 0; i < players. length; i++) {
var player=players[i];
if (player[2] >= 40) {
document. write (player[0] + " " + player[2] + "本<br />");
}
}
説明
players[0] = new Array ("真弓",7,34)
players[0][0]に"真弓"、players[0][1]に7、players[0][2]に34を入れます。
players[1] = new Array ("バース",44,54)
players[1][0]に"バース"、players[1][1]に44、players[1][2]に54を入れます。
players[2] = new Array ("掛布",31,40)
players[2][0]に"掛布"、players[2][1]に31、players[2][2]に40を入れます。
players[3] = new Array ("岡田",16,35)
players[3][0]に"岡田"、players[3][1]に16、players[3][2]に35を入れます。
players. length
配列playersのサイズ（要素数）
結果
２．関数
プログラム例
function sum(x)
{
var s = 0;
for (var i = 0; i<x. length; i++)
{
s += x[i];
}
return s;
}
var a = new Array (1,2,3);
var b = new Array (10,20,30);
document. write ("aの合計は" + sum(a) + "です。<br />");
document. write ("bの合計は" + sum(b) + "です。<br />");
説明
function sum(x) { }
{ }の内容の、関数sumを定義する。（xは、仮引数。）
sum(a)
関数sumに、配列aを引数xに入れて実行します。
この場合、関数の中のfor文は次のようになります。
for (var i=0; i < 3; i++) {S += a[i]; }
return (s)
変数sを返します。
結果
３．その他の制御文
else if 文
swith case 文
while 文
４．マウスに関連するイベント
onMouseOverイベント
オブジェクト上にマウスカーソルが乗った時。
onMouseMoveイベント
オブジェクト上をマウスカーソルが移動している間。
onMouseOutイベント
オブジェクト上からマウスカーソルが離れた時。
onMouseDownイベント
オブジェクト上でマウスボタンを押した時。
onMouseUpイベント
オブジェクト上でマウスボタンを離したとき。
５．getElementByIdメソッド
JavaScript側からHTML要素を参照します。
プログラム例
<script type="text/javascript">
function change(id,img)
{
var obj = document. getElementById (id);
obj. src = img;
}
</script>
<img id="migi" src="square_1.gif"
onMouseOver = "change(‘migi’,’square_2.gif’)"
onMouseOut = "change(‘migi’,’square_1.gif’)" />
<img id="hidari" src="square_1.gif"
onMouseOver="change(‘hidari’,’square_3.gif’)"
onMouseOut="change(‘hidari’,’square_1.gif’)" />
説明
onMouseOver = "change(‘migi’,’square_2.gif’)"
カーソルが乗った時、関数change(‘migi’,’square_2.gif’)を実行し、値を受け取ります。
onMouseOut="change(‘hidari’,’square_1.gif’)"
カーソルが離れた時、関数change(‘migi’,’square_1.gif’)を実行し、値を受け取ります。
var obj = document. getElementById (id)
IDが引数の要素を、変数objに入れます。
obj. src = img
変数objの値の中のsrcの値を、変数imgの値に変更。
結果
イメージが、マウスオーバーで変化します。
６．タイムアウト処理
プログラム例
<script type="text/javascript">
var flag = false;
function disp()
{
setTimeout ("disp()",500);
var obj = document. getElementById ("migimigi");
if (flag)
{
obj. src = "square_2.gif";
}
else
{
obj. src = "square_1.gif";
}
flag = !flag;
}
</script>
<body onLoad="disp()">
<img id="migimigi" src="square_1.gif" />
</body>
説明
setTimeout ("disp()",500);
関数disp()を、500ミリ秒後に実行。
var flag = false
関数flagに、false(偽)を入れます。
flag = !flag
関数flagに、元の値の反対を入れます。（falseならtrue、turueならfalse)
結果
実習で使用している教本
