プログラミング 中部大学2025年春期

Javascriptによるプログラミング2

JavascriptとHTML

JavascriptはHTML文書の中に記述することができ、HTMLの機能を手軽にパワーアップすることができるスクリプト言語である。 HTML文書とはウェブページの作成に使われているもので、一般には「インターネットを見る」といったときに表示されているものである。 もともとのHTML文書にはプログラムの要素はないが、ユーザーの操作に応答してより魅力的なウェブページにするためにJavascriptが使われている。

この講義ではHTML文書の中にJavascriptを埋め込んで、プログラミングの学習を行う。 今後のスクリプトの作成では以下のテンプレートを用いてよい。 

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--
// この行を削除して、ここにJavascriptを書いてください。
--></script>
</body>
</html>

コメントの書き方

プログラムは手続きを一定の規則に従って書いたものなので、基本的には何をするものかは読めばわかる。 しかし、作者の意図や工夫などは自然言語で記述しておいたほうがわかりやすいので、そうすることが推奨されている。 プログラム中に書いた自然言語の部分(すなわちプログラムとして実行されない部分)をコメントと呼ぶ。

Javascriptにコメント記す方法は二つある。 一つは /* から */ までの範囲に書く方法である。 この方法だと複数行にわたるコメントを書くことができる。

もう一つは // を使う方法である。 この方法は // から行末までがコメントになる。

プログラム中の空白とインデント

Javascriptではほとんどの空白(スペース、タブ)は意味を持たないので、スクリプトを読みやすくするために適当な空白を入れることができる。

プログラムは階層構造をとることが多い。 どこからどこまでが同じ階層にあるかを示すために字下げ(インデント)を行う。 atomは初期状態では2文字分の字下げを自動で行う。 字下げはTABキーで行うことが多い。削除するときはShift + Tabでもよい。

命令文

Javascripでは命令文を並べてプログラムを作成する。文は上から順に実行される。 Scratchのブロック(上下に連結することができるブロック)に相当する。 文は;(セミコロン)で終わる。

HTMLを出力する方法として document.write("文字列") がある。

練習

テンプレートを利用してJavascriptを動作させよ。

  1. コメントを入れよ。コメントの有無がJavascriptの動作に影響を与えないことを確認せよ。
  2. 適当な空白およびインデントをいれてスクリプトを見やすくせよ。そしてその空白が動作に影響を与えないことを確認せよ。
  3. Hello worldと表示させよ。
<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<!--
  ここはHTMLのコメントです。
  コメントとはHTMLとしての役割をもっていない部分のことです。
  Javascriptは次の<script type='text/javascript'><!-- から -- ></script>までの部分に書きます。
-->
<pre>
<script type='text/javascript'><!--
/*
  ここはJavascriptのコメントです。
 */

// ここもJavascriptのコメントです。//から行末までがコメントです。

/* 空白はほとんどの場合無視されます。以下の二つは同じ意味です。 */
  document.write("Hello world");
  document . write  ("Hello world")   ;
--></script>
</pre>
</body>
</html>

Scratchの場合

変数と演算

変数とはデータを格納しておく場所のことで、記憶しておきたい値をいれて、後で使うことができるようにするものである。 変数には名前をつける必要があり、1文字以上のアルファベットと数字と記号(_$)を使うことができる。

演算とは計算のことで、算術演算、文字列演算、論理演算などがある。 算術演算は数学の四則演算を含み、他にも余りをもとめるとか、値を1増やす(減らす)などがある。 文字列の演算は文字列の結合を行うものがある。 論理演算は「～かつ～」とか「～または～」など、条件を組み合わせるものである。 

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<pre>
<script type='text/javascript'><!--
/*
 * 変数の使い方
 * 変数の名前にはアルファベットと数字と_(アンダーバー)の記号を使うことができる。
 * 最初の1文字に数字を使うことはできない。
 */

  var a;  // 変数としてaを使いますよという宣言
  a = 1;  //  aに1を入れます。
  b = 2;  //  Javascriptでは変数は宣言なしに使うこともできます。
  var c = "Hello"; // 宣言と同時に変数に値(初期値)を入れる。

  var d = a + b;  //  ここの+は算術演算
  var e = c + d;  //  ここの+は文字列の結合
  document.write(e);  //  何が表示されるかを予想してから実行してみてください。

  //  以下を実行するとどのように表示されるか考えてください。
//  document.write(a + b + c);
//  document.write(c + b + a);
//  document.write(c + (b + a));
--></script>
</pre>
</body>
</html>

Scratchの場合

繰り返し

whileによる繰り返し

whileは()内がtrueの間{}で括われた命令を繰り返す。

while(条件){
	繰り返し実行される命令;
}

0から9までの数を表示する (while版)

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<pre>
<script type='text/javascript'><!--
  // whileによる繰り返し
  var n = 0;
  while(n < 10){
    document.write(n + "\n");  //  \nは改行記号を表す
    n = n + 1;	// nを増やす。n ++;としてもよい。
  }
--></script>
</pre>
</body>
</html>
実行結果

Scratchの場合

Scratchには「～の間」という制御がないので、「～でない間」と形にしていることに注意する。

forによる繰り返し

forは繰り返しの回数が決められている場合によく用いる。 forに続く()内には;(セミコロン)で区切られた3つの式が必要である。 最初は初期化、二番目は繰り返しの条件、最後はそれぞれの繰り返しの最後に実行される式である。 

for(初期化 ; 条件 ; 繰り返しの最後に実行する式){
	繰り返し実行される命令;
}

0から9までの数を表示する (for版)

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<pre>
<script type='text/javascript'><!--
  // forによる繰り返し
  for(var n = 0 ; n < 10 ; n ++){
    document.write(n + "\n");  //  \nは改行記号を表す
  }
--></script>
</pre>
</body>
</html>
実行結果

Scratchの場合

「～回繰り返す」を使っているが、forの繰り返し条件は必ずしも回数でなくてもよい。

条件分岐

ifを使って特定の条件のときだけ命令を実行する。

if(条件){
	条件が成立するときにのみ実行される命令;
}

3の倍数のときだけマークをつける

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--
  document.write("<h3>1から20までのうち3の倍数に印をつける</h3>");

  for(var n = 1 ; n <= 20 ; n ++){	//	<= は左辺が右辺以下のときtrueを返す演算子
    if(n % 3 == 0){	//	% は余りを求める演算子。== は左辺と右辺が等しいときtrueを返す演算子
      document.write("*");
    }
    document.write(n + "<br>"); //	ブラウザ上で改行するために<br>を出力する
  }
--></script>
</body>
</html>
実行結果

Scratchの場合

条件が成立しないときに別の命令を実行させる

elseは直前のifが成立しないときに実行される。

if(条件){
	条件が成立するときにのみ実行される命令;
}else{
	条件が成立しないときにのみ実行される命令;
}

3の倍数のときに強調表示にする

<!DOCTYPE HTML>
<html lang='ja_JP'>
<body>
<script type='text/javascript'><!--
  document.write("<h3>1から20までのうち3の倍数を強調表示する</h3>");

  for(var n = 1 ; n <= 20 ; n ++){  //  <= は左辺が右辺以下のときtrueを返す演算子
    if(n % 3 == 0){  //  % は余りを求める演算子。== は左辺と右辺が等しいときtrueを返す演算子
      document.write("<strong>" + n + "</strong><br>");
    }else{
	  document.write(n + "<br>"); //	ブラウザ上で改行するために<br>を出力する
    }
  }
--></script>
</body>
</html>
実行結果

Scratchの場合

練習

Scratchのスクリプトを参考にして以下をJavascriptで計算せよ。

  1. 1から1000までの自然数の和
  2. 2から2000までの偶数の和

課題

円周率を計算するJavascriptを含むHTMLファイルを作成せよ。円周率の計算方法は第5回のScratchのプログラムを参考にすること。 繰り返しの回数は1000回でよい。

前の講義
トップページへ
次の講義