WEBはじめました

お花屋さん→WEB広告代理店→色々

0717 JavaScript: 初めてのfor文

 

新しい配列を作る(newArray)

その1

var 配列名 = new Array (‘要素1’, ‘要素2’, ‘要素3’, …);

自動的にインデックスは0から順につけられる

 

その2

var 配列名 = new Array (配列の中身の数);

配列名[0] =値1 ;

配列名[1] =値2 ;

配列名[2] =値3 ;

 

 

 

セレクトボックスを作る(<form>内)

<select>

<option value=”送信される文字列”>

</option>

</select>

 

 

 

for文

指定した回数だけ処理を繰り返す

 

for( 変数の初期値 ; 繰り返し条件 ; 変数の変更 ){

実行される処理

}

 

練習1

<!doctype html>

<html lang="ja">

<head>

<meta charset="utf-8">

<title>for文の練習</title>

</head>

<body>

<script>

var i;

for(i=0; i<10; i++){

              document.write('<p>JavaScript</p>');

}

</script>

</body>

</html>

 

ブラウザでの表示はこれ。

 

f:id:nkjm24:20140718131936p:plain

変数iに対して0から10回より少ない数(この場合9)までi自身に1を足し続ける指示。

一度document.writeが実行されたらまたfor文の初めに戻ってdocument.writeが実行される、ループのイメージ。(そのため上限を設定)

 

 

練習2

<!doctype html>

<html lang="ja">

<head>

<meta charset="utf-8">

<title>for文の練習</title>

</head>

<body>

<p>年齢を選択してください</p>

<form>

<select>

<script>

var i;

for(i=20; i<=70; i++){

              document.write('<option value="i">' + i + '歳</option>');

}

</script>

</select>

</form>

</body>

</html>

 

f:id:nkjm24:20140718132000p:plain

こんな風に表示されます。70歳まであります。

selectタグにfor文を混ぜ合わせ。

 

 

練習3

<!doctype html>

<html lang="ja">

<head>

<meta charset="utf-8">

<title>for文</title>

<style>

.mulOfThree{

font-size: 250%;

color: red;

}

</style>

</head>

<body>

<h1>3の倍数を強調表示</h1>

<p>

<script>

var Max=15;

for(var i=1; i<=Max; i++){

              if(i%3===0){

                            document.write('<span class="mulOfThree">'+ i +'</span>&nbsp;');

              } else {

                            document.write(i + '&nbsp;');

              }

}

</script>

</p>

</body>

</html>

f:id:nkjm24:20140718132024p:plain

3の倍数にだけspanタグでclass指定をし、スタイルシートを適用させる。

&nsbp; は、半角スペース。

 

 

 

今日の路線図

前橋へたどり着きました。もうひとがんばり!

http://instagram.com/p/qjVjk-vjBy/