基金訓練に行ってきました。(56日目)


基金訓練(Webデザイン・プログラミング科)の56日目に行ってまいりました。
56日目は、JavaScriptプログラミングの実習です。

56日目の内容は下記のとおりです。

1.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のサイズ(要素数)

結果

2.関数

プログラム例

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を返します。

結果

3.その他の制御文

else if 文

swith case 文

while 文

4.マウスに関連するイベント

onMouseOverイベント
 オブジェクト上にマウスカーソルが乗った時。

onMouseMoveイベント
 オブジェクト上をマウスカーソルが移動している間。

onMouseOutイベント
 オブジェクト上からマウスカーソルが離れた時。

onMouseDownイベント
 オブジェクト上でマウスボタンを押した時。

onMouseUpイベント
 オブジェクト上でマウスボタンを離したとき。

5.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の値に変更。

結果

イメージが、マウスオーバーで変化します。

6.タイムアウト処理

プログラム例

<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)

結果





  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
.

コメントを残す