熊本大学大学院教授システム学専攻
目次:
【第12回】JavaScript 2 (基本構文、制御構造(if, for, etc.))
第1章
--第12回タスクチェッカー
※公開科目にはありません
第3章
第4章
第5章
現在の場所: ホームページ > [3]JavaScriptによる動的Webページ > 【第12回】JavaScript 2 (基本構文、制御構造(if, for, etc.)) > 第2章 > JavaScript プログラミング を自分で書き込む (その2)

JavaScript プログラミング を自分で書き込む (その2)

【本節の目的】
JavaScriptをより深く理解するために、実際にプログラムを見ながら検証していきます。

ここでは、プログラムの例を見て、動作の違いを確認していきます。特に、特定の条件を満たす数だけを表示するプログラムについて詳しく説明します。

プログラム(1) ~kが5のときだけ表示する

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<script language=JavaScript>
  for(k = 1;  k < 26;  k = k + 1){
    if (k == 5){
      document.write(k);
      document.write("<br>");
    }
  }
</script>

</body>
</html>
if (条件){ ... }

は、条件を満たす時だけ、... を実行します。 この場合は、条件は k == 5 です。
「==」は等しいかどうかの比較を意味します。 (なお、「==」は「=」を2回書きます。つながって見えるかもしれませんが。)

【注】以下のような条件の書き方は,あり得ますか?

 5 == k

→ あり得ます。

プログラム(2)~kが5でないときだけ表示する

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<script language=JavaScript>
  for(k = 1;  k < 26;  k = k + 1){
    if (k != 5){
      document.write(k);
      document.write("<br>");
    }
  }
</script>

</body>
</html>

「!=」の意味は、「==」の意味の反対です。(否定とも言います。)

プログラム(3)~kを4で割った数を表示する

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<script language=JavaScript>
  for(k = 1;  k < 26;  k = k + 1){
    m = k/4;
    document.write(m);
    document.write("<br>");
  }
</script>

</body>
</html>

「/」という記号(演算子といいます)は割算を表します。
ここでは、k の値をそのまま表示するのではなく、k を 4 で割った結果を m に入れ、m を表示しています。

【練習4】 掛け算を表す演算子は 「*」です。 1 から 25 までの自乗 (1, 4, 9, 16, 25, 36, 49, ..., 625) を表示するプログラムを作ってください。

→練習4: 【ブラウザで結果を見る】 【HTMLタグを見る】

プログラム(4)~kを4で割ったときの余りを表示する

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<script language=JavaScript>
  for(k = 1;  k < 26;  k = k + 1){
    m = k%4;
    document.write(m);
    document.write("<br>");
  }
</script>

</body>
</html>

「%」という記号(演算子)はちょっと特殊な意味を持っていて、 割算の余りを求めるのに使います。

実行結果をみると分かりますが、計算結果は 1, 2, 3, 0, 1, ... と変化してゆき、4 で割り切れる時に 0 になっている(余りが 0 である)ことが わかりますよね。

プログラム(5)~これまでの復習

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>

<script language=JavaScript>
  for(k = 1;  k < 26;  k = k + 1){
    m = k%4;
    if (m == 0){
      document.write(k);
      document.write("<br>");
    }
  }
</script>

</body>
</html>

このプログラムはどんな動きをするか、考えてみましょう。

→ 最終的に表示されるのはkの値ですが、 26までの数字の中で4で割切れる(4で割ったときの余りが0の)数字のみを 表示するように条件付けられています。

ここまでが分かれば、(今までの知識と合わせて)タスク12のプログラムが作れるはずです。

【他のプログラミング言語に興味がある人への参考】
C言語, Perl, Java, FORTRAN の形式で、 最後の prog5 と同じ動作をするプログラムを書くには、
第4章 4.1 JavaScript以外の言語でのプログラミングの例
をご覧ください。

Copyright (c) Toshihiro Kita, Hideki Matsuda, Chisato Noguchi and Yuriko Shimizu 2002-2006, All Rights Reserved