Computer Programing

2004-02


とりあえず HTML コードを書いてみよう

 JavaScript は WEB ページをかざりつけるためのスクリプト言語であることは説明しました. WEB ページは HTML と呼ばれる言語で記述します.ここで,HTML 言語が書かれたものを HTML コード(または HTML ソースコード)と呼びます. JavaScript はこの HTML コードの中に記述することになります.

 HTML コードの例を次に示します.これは,名前とリンク付の所属名を表示する WEB ページを表現しているものです.

<HTML>
<HEAD>
<TITLE>自己紹介</TITLE>
</HEAD>
<BODY>
<B>名前</B>:加藤直樹
<B>所属</B>:<A HREF=http://www.tuat.ac.jp/>東京農工大学</A>
</BODY>
</HTML>

 それでは,名前と所属を書き換えた HTML コードを記述したファイルを作り,それで表現される WEB ページを表示してみましょう.

 HTML コードはテキスト形式ですので,テキストエディタを使います. Windows 環境であればメモ帳(Notepad)が必ず利用できるはずです.テキストエディタを起動し,HTML コードを打ち込み,適当な場所へ保存してください.保存するときのファイル名は拡張子を txt ではなく html としてください.

 次に作った HTML ファイル(HTMLコードが記述されたテキストファイル)を WEB ブラウザで開いてみてください.書いたコードに従って表示がされたはずです. Windows 環境の場合 html 拡張子が WEB ブラウザに関連付けされていれば,ファイルのアイコンをダブルクリック(またはシングルクリック)すると, WEB ブラウザが起動し開かれます.もし,この方法でうまく表示できない場合は,まず,WEB ブラウザを起動して,そのウィンドウの中へ,アイコンをドラッグアンドドロップしてください.

 なお,WEB ブラウザは,JavaScript に対応しているものならばなんでも構わないのですが, WEB ブラウザの種類によって,振る舞いや文法が異なることがありますので,ここでは,米国マイクロソフト社の Internet Explore を利用することにします.


JavaScript コードの入れ方

 HTML ソースの中に JavaScript 言語のプログラムを組み入れる場合は,下の HTML コードの == の部分に JavaScript のコードを記述することで,このコードが書き込まれた HTML ファイルを WEB ブラウザで開いたときに,中に書かれている JavaScript コードが実行されます.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function main()
{
  ======
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="main()">
</BODY>
</HTML>

Hello JavaScript World!!

 では,さっそくJavaScript でプログラムを作って見ましょう.まずは,画面に Hello JavaScript World!! と表示するプログラムを書いてみましょう.次の JavaScript コードを含んだ HTML コードを記述したファイルを作って, WEB ブラウザで開いてみてください.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function main()
{
  document.write( 'Hello JavaScript World!!' );
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="main()">
</BODY>
</HTML>

どうでしょうか. WEB ブラウザには

Hello JavaScript World!!

と表示されたと思います.表示されない場合は,どこか入力し間違いをしているところがあるはずです.もう一度見直してみてください.

 画面に文字列を表示したい場合は,

document.write( 文字列リテラル );

と書くことで実現できます. 文字列リテラルはダブルクォーテーション(")かシングルクォーテーション(')で 0文字以上の文字を囲んだものです.ダブルクォーテーションを文字列に入れたい場合はシングルクォーテーションで,シングルクォーテーションを入れたい場合はダブルクォーテーションで囲むとよいでしょう.ただし,両方を入れたい場合は,ダブルクォーテーションで囲んだ場合ダブルクォーテーションは \" を,シングルクォーテーションで囲んだ場合シングルクォーテーションは \' を,表示したい場所にを書くことで実現できます.通常はシングルクォーテーションで囲む形式がよいかと思います.

 document.write で出力された文字列リテラルは HTML コードとして解釈されて表示されます.したがって,World を強調体で表示したい場合は,次のようにすれば可能です.

document.write( 'Hello JavaScript <B>World</B>!!' );

繰り返して表示してみよう

 さて,ただ単に Hello JavaScript World!! と表示するだけでしたら, JavaScript など使う必要なく,HTML だけで十分表現可能です.次の HTML コードが書いたファイルを WEB ブラウザで開いてみてください.同様の表示が得られるはずです.

<HTML>
<BODY>
Hello JavaScript World!!
</BODY>
</HTML>

 では,JavaScript などのプログラミング言語はどんなときに便利なのでしょうか.その一つが繰り返し作業です.たとえば,Hello JavaScript World!! を 10 回繰り返して表示するとき,単なる HTML では,

<HTML>
<BODY>
Hello JavaScript World!!<BR>
Hello JavaScript World!!<BR>
Hello JavaScript World!!<BR>
     :

と表示する文字列を 10 回書かなくてはなりません. 100 回表示したければ 100 回,1000 回表示したければ 1000 回書かなければならないのです.なお,<BR> は改行を指示する HTML のタグです.これを書かないと,すべての文字列がくっついて 1 行に表示されることになります.

 しかし,ここで JavaScript を用いると次のコードだけで,10 回繰り返して表示することが実現できます.

for( i = 0 ; i < 10 ; i++ )
{
    document.write( "Hello JavaScript World!!<BR>" );
}

注意:このコードを実行するときは,先の HTML コードの ==== の
部分に入れます.以後,HTML の部分は省略するので注意してください.

1 行目の 10 のところを 100 に書き換えれば 100 回, 1000 に書き換えれば 1000 回繰り返して表示されます.人は同じことを繰り返しするのは面倒と感じますが,コンピュータは何の文句も言わずに繰り返し作業をしてくれます.さらに,繰り返しをうまく使うことでプログラムコードは短くなり,それを作る作業も楽なものとなります.

document.write で改行を指示したいときも HTML のときと同じように <BR> を書くことで行えます.これは document.write で表示しようとしたものは,すべて HTML コードとして解釈され表示されるからです.これとは別に JavaScript では \n を書くことで改行を実現できるのですが,現在 IE では解釈をしてくれないようです.


オウム返し

 プログラムを作るもう一つの利点は,インタラクティブ(対話)インタフェースを作れることです.つまり,何かを入力させて,その入力に対応したなにかを表示したりできることです.例として,なにかをキーボードから入力するとそれをそのまま表示するプログラムコードを示します.

var a;
a = prompt( 'なにか入力してください', '' );
document.write( a );

このプログラムコードを実行すると,画面にはダイアログと呼ばれるウィンドウが表示されます.その中の白い枠をクリックし,キーボードから何か入力した後,リターンキーを押してみてください.入力したものが web ブラウザに表示されるはずです.

 上記コードの詳しい説明は省きますが,...a = prompt... というところで,ダイアログを表示し,入力されたものを a の中にしまい,document.write で,a にしまったものを表示しています.

 ここでプログラムを作る上で基本的でかつ重要なことを説明しておきます.それは,プログラムは基本的に上から下へ解釈されながら実行されるということです.先のプログラムで言えば,まず a = prompt が実行されるため,キーボードからの入力を催促するダイアログが現れます.その後に document.write が実行され,キーボードから入力された文字が画面に表示されます.決して,文字が表示された後に,ダイアログが現れることはありません.


演習

キーボードから入力したものを10回繰り返し表示する JavaScript プログラムを作ってみよう.