how_to_javascript_2

第２回 †

第１回の復習 †

• 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 真（true）
• NG 偽（false）

文字比較演算子（チェック用） †

if( s=="ABC" ){
  alert("チェック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繰り返し処理
}

• 「最初に実行」、「チェック」、「処理後に毎回実行」は省略できます。
• 　→　全部省略すると無限にループして大変なことになります（やらないでねｗ）
• 　→　ブラウザを強制停止するしかない……(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表示）
④⑦　変数の数字を１増やす

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

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

世界のナベアツ（古いねｗ） †

• 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>テーブルで表示するとかっこいいよね