JavaScript を Windows/VISTA で試す

プログラム言語を試すことにより計算機の仕組みが段々わかってきて, 計算機を使うスキルも上達するものである. プログラム言語を試してみて, メニューボタンを押すだけの毎日からバイバイしよう.
さてどんな言語を試してみるかであるが, お手軽に試せる言語として JavaScript を紹介しよう.

JavaScript って何?

HTML だけでは書きにくいホームページ (web ページ)を記述するのに利用される. たとえば, ページを見た人に何かを入力してもらい, その入力にしたがって表示を変化させたい場合に利用する. たとえば最後の prompt の例をみよ.
変化する web ページの記述用の (専門用語ではダイナミックコンテンツを書くための)言語だが, 数値計算をやらせたりすることも可能で, 標準的なプログラム言語の能力ももつ.
JavaScript は C 言語風の文法を持つ. Java言語に似てる部分が全然ない訳ではないが JavaScript は Java 言語ではない. JavaScript はホームページの記述に補助として利用されてる簡易言語.
特別なソフトを入手しなくても, 試すことができる. 実行結果をwebブラウザの画面で見ることができる.
JavaScript って何? か理解するには, とりあえず下の例を試てみよう. [説教] 計算機関連はよくわからない用語がでてきたりするが以下の (1)(2)(3)(4) を実践すればだんだん理解がすすんでいくものである. (1) 例を入力して試す. (2) 例をすこし変更して試す. 失敗してみて何がおこるか見る. (3) あれができないか? これができないか? を考えてみて実現方法を本や web で調べる. (4) 全ては数字で処理されている. 計算機内部でどのように処理されるのか常に考える (想像しようと努力する).

プログラム言語 JavaScript は Windows に標準で付いて来るメモ帳 (notepad) でプログラムを書き, ホームページ等をみるためのブラウザであるインターネットエクスプローラで実行させることができる.

Mac の場合は標準で付いて来るテキストエデイットでプログラムを書き, ホームページ等をみるためのブラウザである Safari で実行させることができる.

このページではその手順を次のプログラムを例として説明しよう. (Windows VISTA用)
Mac の方はこちらご覧になってから, 下をご覧下さい.

<script language="JavaScript">
  for (i=0; i<5; i++) {
    document.write("Hello<br>");
  }
</script>

この JavaScript プログラムを実行するにはこちらをクリックして下さい.

  <script ... >

の行と

  </script>

の行はきまり文句である. プログラムとして実行される文ではない. このscript開始タグと終了タグの間に JavaScript のプログラムを書くとブラウザがそのプログラムを実行する.
Q. script タグの意味を詳しく説明して下さい. A. 説明はこちら

document.write(...) は ... を画面に表示しなさいという意味. for の部分は {...} の部分を 5回繰り返せという意味. したがって document.write が 5 回繰り返されることとなる.

Q. for 文の働きをくわしく説明して下さい. A. 説明はこちら

0. まずJavaScript の prompt 命令が使えるように, かつ, エラーを表示するようにインタネットエクスプローラの設定を変更する

0.1 prompt 命令が使えるように設定を変更

ツールメニューからインターネットオプションを選択

セキュリティタブでレベルのカスタマイズを選択

スクリプト化されたウインドゥを使って情報の入力を求めることを Web サイトに許可する.

有効をクリックし, OK

0.2 エラーを表示するように設定を変更

この設定は必須ではないが, JavaScript のエラーを表示するようにインタネットエクスプローラの設定を変更しておいた方が便利である. 詳細はこのページを参照 (XP 準拠の説明だが, vista でもほぼ同様).

1. メモ帳 (notepad) の起動

図のように Windows メニューの検索フィールドに notepad と入力して enter キーをおしてメモ帳を起動.

2. メモ帳 (notepad) への JavaScript プログラムの入力

プログラムはかならず半角英数字で入力すること. 日本語モードになっていたりするとエラーの原因となる.
プログラムは一字一句間違えないように入力しよう. 一字間違えただけでもプログラムは動かない.

3. JavaScript プログラムの保存

ファイル名はかならず .html でおわらないといけない. ピリオド以下の名前を拡張子と呼ぶ. メモ帳(notepad)の標準状態では拡張子 .txt が自動的に付加されてしまう. これをさせないために図のように, "全てのファイル" を選択し, .html を付加する. 我々の例では, デスクトップにファイルを保存するものとする.

フォルダの参照をクリック.

デスクトップをクリック.

ファイルの種類をすべてのファイルにするのをお忘れなく. ファイル名を入力して保存.

4. 保存したプログラムの実行

3 で正しく拡張子が .html になっていればアイコンは図のように "e" マークが付く. これをダブルクリックまたは開けばプログラムが実行される.

なお,

のような警告がでて実行できない場合は, クリックして実行の許可を選択して下さい.

5. 保存したプログラムの実行と修正

実行結果は図のようになるはずである.

もしこのような実行結果にならない場合はメモ帳(notepad)に戻り間違いを修正して, メモ帳でファイル, 上書き保存してから, 図のようにインターネットエクスプローラの更新ボタンをおす.

もしメモ帳をすでに終了していたら, 下の図のように test.html のアイコンで右ボタンをクリックして, プログラムで開くを選択し, メモ帳(notepad)でこのプログラムを開く. 図のようにnotepadが出現しなかったら "プログラムの選択" を用いて, メモ帳(notepad) を選ぶ (なおワードを使って編集してはいけない).

6. JavaScript プログラムのエラーを表示させるには?

JavaScript プログラムにエラーがある場合その行やどういったエラーかを知ることができると便利である. インターネットエクスプローラの場合次のようにすればエラーを表示させることが可能.
ツール
インターネットオプション
詳細設定
で ``スクリプトエラーごとに通知'' にチェックを入れ, ``スクリプトのデバッガを使用しない'' のチェックをはずす.
詳しくはこのページを参照.
なお netscape では場所 (location) 欄に javascript: と入力すると (最後の : (コロン) を忘れない事), JavaScript のエラーを表示してくれる.

JavaScript の参考書

情報科学序論のテキストの "JavaScript を通してみる情報処理の仕組み", "ここまでの補足", "JavaScript言語でみるディジタル情報の概念" を読んでみよう. プログラム例もいくつか掲載されている.
JavaScript で学ぶセキュリティーの基礎
Google で JavaScript を検索してみて下さい. いろいろなページがあります.
Amazon (本屋さん) で JavaScript を検索してみて下さい. いろいろな本があります.

上のプログラムのバリエーション

指定回数だけ Hello を表示するプログラム

<html>
<meta http-equiv="Content-Type" content="text/html; charset=SJIS">
<body>
<script language="JavaScript">
  n = eval(prompt("何回表示?",0));
  for (i=0; i < n; i++) {
    document.write("こんにちわ<br>");
  }
</script>
</body>
</html>

このプログラムを実行してみるには, こちらをクリック. なお日本語を使うには meta を含む最初の3行を書いておかないと表示の時に文字化け等をおこす. 詳しくは漢字コードの知識が必要.

課題

JavaScript にはさまざまな数学関数が組み込まれている. Math.sqrt(x) は平方根, Math.sin(x) は sin 関数など. これらの関数または関数を組み合わせて作った式の数表を JavaScript で作製してみよう.

解答例

<script language="JavaScript">
  for (i=0; i <10; i = i+0.5) {
    document.write(i," : ", Math.sqrt(i),"<br>");
  }
</script>

課題のヒント

JavaScript でどのような数学関数が使えるかについては, JavaScript のマニュアル. 数学関数を参照. (英語)
上のプログラムで Math.sqrt(i) の部分を i*Math.sin(1/i) に置き換えれば, 関数 x sin(1/x) の数表を作れる. ここで 1/x は "x ぶんの 1" を意味する. また * は "かける" を意味する. なお i を上の例のように 0 と初期化すると 1/0 を計算してしまうので, i=0.01 等とすること. このように式の値を計算することも可能である.

Q and A

Q. JavaScript で図やグラフは書けませんか?

A. 現在のところちょっとつらいというのが正直なところです. しかし SVG (HTMLで図やグラフを書くための拡張)を用いると可能です. SVG 標準搭載のブラウザが増えてきてます. SVG については XML 入門のなかのこのページを読んでください.

Q.数式を書きたいのですが.

A. 現在のところちょっとつらいというのが正直なところです. <sup> や <sub> タグを用いて上添字や下添え字を書くことは可能ですが, 複雑な式は書けません. 本格的な式は TeX で作成して jpeg 画像にでもして表示するしかないです. しかし将来的には MathML (HTMLで数式を書くための拡張)を用いると可能です. MathML 対応のブラウザが増えてきています.

Q. script タグって何ですか?

<script> タグは HTML 文書にプログラム言語を埋め込むのに用いる. 開始scriptタグと終了scriptタグに囲まれた部分にプログラムを書く. プログラム言語とは計算機の動作手順を記述するための人造言語である. たとえば Basic, Fortran , C , C++, Java 等は有名なプログラム言語である.

language 属性で埋め込んだプログラム言語の種類を指示する. たとえば

 <script language="JavaScript">

の場合には JavaScript 言語のプログラムが埋め込まれていることを意味する. なお Java 言語と JavaScript 言語は異なるプログラム言語である. JavaScript 言語はお手軽で簡単である.

ブラウザにより処理可能な言語の種類はことなる. JavaScript 言語はよく利用されている全てのブラウザで利用可能である. たとえば

 <script language="VBScript">

を処理できるブラウザもある. VBScript はマイクロソフト社の Visual Basic Script 言語を意味する.

Q. for 文の意味について説明して下さい.

for 文の文型は以下のとおり.

for ( [1]初期化 ; [2]終了判定 ; [3]繰り返し毎にやること ) { 処理1; 処理2; ... }

for 文では [2]の終了判定が真である限り, 処理1; 処理2; ... を繰り返す. [3] は 処理1; 処理2; ... が一回終る毎に実行される.

i++ は i=i+1 を意味する. i-- は i=i-1 を意味する.

例 1

for ( i=0 ; i<10 ; i++  ) {
     処理
}

と書くと i = 0, 1, 2, ..., 8, 9 に対して順番に "処理" を実行する. "処理" は総計 10 回実行される.

例 2

for ( i=3 ; i<10 ; i=i+2  ) {
     処理
}

と書くと i = 3, 5, 7, 9 に対して順番に "処理" を実行する.

例 3

for ( i=10 ; i >= 0 ; i--  ) {
     処理
}

と書くと i = 10, 9, 8, ..., 2, 1, 0 に対して順番に "処理" を実行する.