96's blog

WEBサイト制作科 6ヶ月コース

JavaScript05(switch文、while文、for文、for-in文)

switch文

<script>
  var month;

  function season(){
  month = prompt('月を入力してください','1から12の値を半角数字を入力');

  month = Number(month);
  switch(month){
  case 12:
  case 1:
  case 2:
    document.write("<h1>冬です。</h1>");
  break;

  case 3:
  case 4:
  case 5:
    document.write("<h1>春です。</h1>");
  break;

  case 6:
  case 7:
  case 8:
    document.write("<h1>夏です</h1>");
  break;

  case 9:
  case 10:
  case 11:
    document.write("<h1>秋です。</h1>");
  break;

  default:
    document.write("<h1>1~12の値を入力してください。</h1>");
}

}
</script>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウィンドウが表示されます。</p>
<p><buttononclick='season()'>月別に季節を判別する</button></p>
  • caseで条件、defaultは条件以外、breakで止める。

while文

<body>
<tableborder="1">
<tr>
<th>和暦(平成)</th><th>西暦</th></tr>
<script>
var MAX =25;
var i =1;
while(i <=MAX){
document.write('<tr>');
document.write('<td>',i,'</td>');
document.write('<td>',i +1988, '</td>');
document.write('</tr>');
  i++;
}
</script>
</table>
</body>

f:id:webtm2013:20130731105942p:image

  • ()内の変数の条件を満たしている間はループし続ける。

for文(演習問題・九九の表)

<body>
<tableborder="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
<script>
for(i=1 ; i<=9 ; i++){
document.write('<tr>');
document.write('<th>', i , '</th>');
for(j = 1; j<=9 ; j++){
document.write('<td>', i * j , '</td>');
}
document.write('</tr>');
}
</script>
</table>
</body>

f:id:webtm2013:20130731221205p:image

  • &nbsp (and non break space)=半角スペース。
  • tr要素はCSSで指定できない。
  • tableのborderを細い線にするには、border-collapse:collapse;で枠を重ねて表示させる。tableはcollapseで表示するのが定番なので、リセットCSSに入れて指定する。
  • xhtml (style要素にtype="text/css"の属性がついている)では、htmlのheadでstyleを記述するときに、ブラウザで表示されることを回避するためにコメントアウトで囲むルールがあった。html5ではなし。

for-in文