|
目次：
【第12回】JavaScript ２ (基本構文、制御構造(if, for, etc.)) 第1章
--タスク12
--第12回タスクチェッカー
※公開科目にはありません 第3章
第4章
第5章
|
現在の場所： ホームページ > [3]JavaScriptによる動的Webページ > 【第12回】JavaScript ２ (基本構文、制御構造(if, for, etc.))
> 第2章 > JavaScript プログラミング を自分で書き込む
JavaScript プログラミング を自分で書き込む
【本節の目的】
JavaScriptプログラミングを、HTMLの中に直接書き込んで利用する方法を学びます。 第11回では「HTMLの中にJavaScriptファイルを読込んで利用する方法」を学びました。 今回は、HTMLの該当部分に直接JavaScriptプログラムを書き込んで利用する方法を学びます。 最初に、JavaScriptプログラムを書き込む際の注意事項等を挙げておきます。 「プログラムが動かないなぁ」と困ったときには、こちらをご覧ください。 プログラムが動かないで困っている人へのヒント→【よくある間違いの例や、注意事項】 ここからは、いくつかの例を挙げて説明していきます。練習問題にもトライしながら、進めてください。 ブラウザに文字を表示させましょうまずは "Hello! World." を作ってみましょう。 "Hello! World." というのは，非常に簡単なプログラムのことです。 これは、実行させると，画面やウィンドウに "Hello! World."と表示するだけの機能を持ったプログラムで、 プログラミング言語の使い方の基礎を説明する例題として良く使われます。 次のような内容のファイルを作成し，デスクトップにhello.html という名前で保存します。
<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 type="text/javascript">
document.write("Hello! World.");
</script>
</body>
</html>
ファイルが作成できたら，ダブルクリックして開いてみましょう。
のように，Webブラウザに文字が表示されたらＯＫです。 【練習１】 Hello! World ではなくて， 「こんにちは，みなさん！」と表示させてください。 →練習１： 【ブラウザで結果を見る】 【HTMLタグを見る】 変数のあるJavaScript
次に，hello.html の<body>～</body>中身を次のように変更してください。 <script type="text/javascript">
a = 7;
b = a + 5;
document.write(b);
</script>
変更した結果をブラウザで見ると、「12」という答えが表示されます。 a = 7; という文は， 「a という変数の値を 7 にする」という意味です。 b = a + 5;
という文は「a の今の値に 5 を足した結果を，b の値とする」
という意味です。 【注】以下のような文は，あり得ません。なぜでしょう。 a + 5 = b; → 「=」は，代入を表す記号（演算子）です。左辺が「a + 5」だと、なんの値にbを代入すればよいのか分からなくなってしまいます。
【練習２】 以下のプログラムの実行結果はどうなるか予想してください。
予想は当たっていましたか？
<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 type="text/javascript">
k = 7;
k = k + 1;
k = k + k;
document.write(k);
</script>
</body>
</html>
ちょっとだけ複雑な変数のJavaScriptでは，新たに forloop.html という名前で次のようなファイルを作りましょう。
<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 type="text/javascript">
for(k = 1; k < 26; k = k + 1){
document.write(k);
}
</script>
</body>
</html>
ちょっと難しそうな感じですが，意味は後で説明します。とりあえず上のような forloop.html を作成し， ダブルクリックしてみてください。
のように数字がつながって表示されましたか？
<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 type="text/javascript">
for(k = 1; k < 26; k = k + 1){
document.write(k);
document.write("<br>");
}
</script>
</body>
</html>
のように青字で示した1行を追加すればいいです。 以下のように表示されるはずです。
なぜこの様な表示結果になるかを簡単に説明します。ここで用いているのは， for(最初に実行する事; 継続の条件; 毎回実行する事){ 実行する事１; 実行する事２; .... } のような繰り返し構造です。 こう書くと，「継続の条件」 が満たされている間は，
実行する事１;
実行する事２;
....
毎回実行する事
が繰り返し行われます。 for(k = 1; k < 26; k = k + 1){ document.write(k); document.write("<br>"); } ということですから， 最初に一度だけ k = 1 が実行されて、k が 26よりも小さい間は、
document.write(k);
document.write("<br>");
を実行しながらk を 1 ずつ増やしていきます。
（繰り返し構造を使わずに書くとこのようになります。） 【練習３】 2 から 40 までの偶数を表示するプログラムを作ってください。
ここまでの知識だけでは、
初級課題（1から1000までの整数で3で割り切れない数を表示するプログラムを作る）
は解けません。 |
