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>
ブラウザでの表示はこれ。
変数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>
こんな風に表示されます。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> ');
} else {
document.write(i + ' ');
}
}
</script>
</p>
</body>
</html>
3の倍数にだけspanタグでclass指定をし、スタイルシートを適用させる。
&nsbp; は、半角スペース。
今日の路線図
前橋へたどり着きました。もうひとがんばり!