JavaScript

第2回「制御構文」 - 360°スゴイ JAVA SCRIPT 講座

第1回の復習

-document.write() は、HTMLを画面に出す命令
-箱(変数)に入っているのは何かを絶えず意識する
- → 文字列(文章)なのか数字なのか
- → 文字列なら、テキストなのかHTMLなのか
- → 数字は計算に使えるけど、文字列は計算に使えない

プログラムの制御構造

通常、プログラムは記述したとおりに、上から順に実行されます。ですが、条件判断構造やループ構造を利用することによって、プログラムの流れを制御することができます。

条件分岐(if)

「もし~ならば、・・・を実行する」という条件つき命令

if( チェック ){
   // チェックOK処理
}
var a;
a = 1;
if( a==1 ){
  alert("チェックOK");
}

ちなみに変数初期化(箱の作成)と値の設定は同時にできるよ。

var a = 1;
if( a==1 ){
  alert("チェックOK");
}

数値比較演算子(チェック用)

比較 数値 戻り値
等しい == 左引数と右引数が等しければ真(OK)を返す。
等しくない != 左引数と右引数が等しくなければ真(OK)を返す。
小さい < 左引数が右引数より小さければ真(OK)を返す。
大きい > 左引数が右引数より大きければ真(OK)を返す。
以下 <= 左引数が右引数と同じか小さければ真(OK)を返す。
以上 >= 左引数が右引数と同じか大きければ真(OK)を返す。

-OK 真(true)
-NG 偽(false)

文字比較演算子(チェック用)

比較 数値 戻り値
等しい == 左引数と右引数が等しければ真(OK)を返す。
等しくない != 左引数と右引数が等しくなければ真(OK)を返す。
if( s=="ABC" ){
  alert("チェックOK");
}

論理演算子

名前 結果
論理積(AND) A && B チェックA と チェックB が真(OK)なら真(OK)を返す
論理和(OR) A || B チェックA もしくは チェックB が真(OK)なら真(OK)を返す
否定(NOT) ! A チェックA が真(OK)でなければ真(OK)を返す
if( a==34 && s=="ABC" ){
  alert("チェックOK");
}
if( a==1 || s=="ABC" ){
  alert("チェックOK");
}
if( (a==1 || a==2 ) && s=="ABC" ){
  alert("チェックOK");
}

条件分岐(ifの続き)

-else 文で例外処理をする

if( a==1 ){
  alert("チェックOK");
} else {
  alert("チェックNG");
}

 

複数の条件分岐

if( a==1 ){
    alert("aは1だよ");
} else {
   if( a==2 ) {
       alert("aは2だよ");
   }
}

if文の else で if文を記載する場合、else if でつなげられます。

if( a==1 ){
    alert("aは1だよ");
} else if( a==2 ) {
    alert("aは2だよ");
}
if( a==1 ){
    alert("aは1だよ");
} else if( a!=5 ) {
    alert("aは5じゃないよ");
}

さらに else 処理も追加できます。

if( a==1 ){
    alert("aは1だよ");
} else if( a==2 ) {
    alert("aは2だよ");
} else {
    alert("aは1でも2でないよ");
}

-もしifで実行する処理が1つしかないなら、中カッコ {   } は省略できます。

if( a==1 )
    alert("aは1だよ");

  ↓

if( a==1 ) alert("aは1だよ");

-中カッコは改行して書いても大丈夫です。

if( a==34 && s=="ABC" )
{
    alert("チェックOK");
}

ループ命令(for)

for ( 最初に実行; チェック; 処理後に毎回実行) {
   // チェックOK繰り返し処理
}

-「最初に実行」、「チェック」、「処理後に毎回実行」は省略できます。

  •  → 全部省略すると無限にループして大変なことになります(やらないでねw)
  •  → ブラウザを強制停止するしかない……(TT)
for(;;) {
   alert( "悪" );
}

-じゃ、書いてみましょう!

var i;
for( i=1; i<5; i=i+1 ) {
  alert( "for実験:"+i );
}

-処理の順番は?(①~⑧まで記載)

var i;
for( ①i=1; ②⑤⑧i<5; ④⑦i=i+1 ) {
  ③⑥alert( "for実験:"+i );
}
① 変数初期化
②⑤⑧ チェック!
③⑥ ループ処理内容(alert表示)
④⑦ 変数の数字を1増やす

-こういう風に書いても同じことです。

for( var i=1; i<5; i++ ) {
  alert( "for実験:"+i );
}

-ループ命令には while 、do~while もあります。

break 構文

breakはforループ内から脱出するために使用します。JavaScriptはループ内でbreakを見つけると、ループ内の実行文を中止し、ただちにループ外の最初の実行文へ移行します。breakはwhileまたはforループ中以外では使えません

alert( "さぁ、始まるザンスよ" );

for( var i=0; i<5; i++ ) {
  if( i==3 ) {
      break;
  }
  alert( "ループ:"+i );
}

alert( "おわり" );

-ちなみにif構文の命令文が1つしかないので中カッコが省略できます

alert( "さぁ、始まるザンスよ" );
for( var i=0; i<5; i++ ) {
  if( i==3 ) break;
  alert( "ループ:"+i );
}
alert( "おわり" );

continue 構文

continueは、forループ内で使用されます。continueはそれ以降に続くブロック内の命令をスキップし、先頭ループへ戻ります。breakと同じようにwhileまたはforループ中以外では使えません。

alert( "さぁ、始まるザンスよ" );

for( var i=0; i<5; i++ ) {
  if( i==2 ) {
      continue;
  }
  alert( "ループ:"+i );
}

alert( "おわり" );

-コンピュータの気持ちクイズ

var a = 0;
var i;

for( i=0; i<5; i=i+2 ) {
  if( i==2 ) {
     continue;
  }
  a = a + i;
  if( i==3 ) {
     break;
  }
}
alert( "aの値は " + a );

世界のナベアツ(古いねw)

-for構文で1~10までループさせてalertで数字を表示してください
-3の倍数の場合は数字を表示せずに下記の馬鹿AAを表示してください

 ヾ(´゚д゚`)ノ゛ ←馬鹿AA

宿題

-今月のカレンダー

-document.write で
-数字の間は半角スペース
-forで1~30までループ
-7個表示したら改行しよう

-こんな感じなるはず

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

余裕があったら

  • 土曜日は文字を青色にしよう
  • 日曜日は文字を赤色にしよう
  • 25日は太字(BOLD)にしよう

さらに余裕があったら
tableテーブルで表示するとかっこいいよね