基盤的情報処理論

前置きが長くなってしまいましたが、今回のテキストの最初の方で説明しましたように、 JavaScript言語処理を利用するWebページを作成するには、次の1. と 2.の2つのステップが必要です。

ただし、実際にはJavaSriptの処理を利用するHTMLファイルでは、お決まりの前準備が必要となりますので、正確には次の 0. を含めた3ステップということになります。

0. [HTMLファイルでの準備] HTMLファイルのhead 要素に「JavaScriptを使うよ」という意味の記述を記述する
1. [処理の定義] いくつかの基本的な処理をまとめて一つの処理として名前をつける
2. [処理の適用] HTMLファイルの実行したい場所に、定義した(定義されていた)処理の名前を記述する

実際に利用する際の3つのステップについて、具体的なの利用例を以下に示します。テキストに従い、実際に行って下さい。

CSSを利用したときと同様に、HTMLファイルのhead要素で、 JavaScript言語を利用することを宣言しておく必要があります。 次が、その例です。

そこで、まずはサンプルのJavaScript処理の定義ファイルをダウンロードしましょう。

myscript.js をエディタで開いてみると、その中には下記のように記述があるはずです。

JavaScriptでは、「//」(2個のスラッシュ)があると、 その後は行末までコメントとなります。つまり、上のJavaScriptで、 先頭から3行と最後の1行はコメント行です。定義する処理の説明と、 どこからどこまでがこの定義の範囲なのかを示しているだけです。

JavaScriptでの処理は、一般的に以下のように定義します。

処理を定義するには、まず、「function」と書き、続けて自分で決めた任意の処理の名前を書きます。先の例では、 「oshita」が処理の名前です。

次に、処理に必要な入力 (一般には、 「引数(ひきすう)」と呼ばれます) を、括弧 「( )」で囲んで記述します。入力(引数)が複数ある場合は、カンマ「,」で区切ります。また、 引数が不要な場合も、括弧「( )」は省略できません。先の「oshita( )」という処理は、 引数の不要な(無い)処理です。

最後に、定義する処理の内容を、全体を「{ }」で囲んで記述していきます。また、それぞれの処理の最後には、セミコロン「;」を書きます。上の「oshita( )」という処理では、 window.alert( )という処理が、１つだけ行なわれるということになります。

実際に処理の適用(ここで処理をしてもらうという依頼)を行う前に、適用時の注意点をまとめておきます。

1. 処理の適用形式は、 「処理の名前(入力1, 入力2, 入力3... );」 という形
   f(x, y) のような数学で使う関数とほぼ同じ形式で行います。ただし、最後に必ずセミコロン(;)をつける必要があります。
   
   
2. 処理に必要な「入力」を指定する
   多くの処理では、処理に必要な「入力」を指定する必要があります。例えば、メッセージをウィンドウに表示する「alert」という処理を、HTML中に記述するときには、
   alert('注意して下さいね。');
   というように、メッセージの内容を「入力」として、処理に渡してやる必要があります。処理によっては、複数の入力が必要なものもありますが、その場合、以下の例のように、括弧「()」の中に、カンマ「,」で区切って指定します。
   multi_alert('注意して下さいね。', '絶対ですよ！');
3. 「入力」の必要が無い処理でも、処理名の後に括弧「()」を書く
   その名前を指定するだけで(「入力」は不要)、現在の時刻を表示する「now_time」 という処理のときも、
   now_time();
   のように、処理の名前であることを明示するため括弧「()」を必ず書く必要があります。
   
   
4. 「入力」には、処理によって文字列と数値が要求されるので区別する
   処理によって、処理に渡す「入力」が、文字列(文字の並び)の場合と数値の場合があります。
   
   

   本当は、それ以外に「変数」も渡しますが、「変数」についての説明は、省略します。必要があれば、次の回で説明します。

   
   文字列を入力するときは、その文字列をシングルクォート「'」で囲みます。
   alert('注意して下さいね。');
   
   
   一方、数値を入力するときは、下の例のように何もつけません。
   uranai(46);
   ただし、文字としての数字を入力するときには、シングルクォート「'」で囲む必要があります。
   
   alert('987654321');

お待たせしました。それでは、実際にJavascriptを適用して動きのあるページを作ってみましょう。

前章で説明しましたように、JavaScriptで記述した処理を起動するタイミングには、以下の2つがあり、それぞれHTMLファイルへの記述方法が異ります。それぞれについての適用方法を、演習を通して学習してみましょう。

1. Webページが表示されると同時に起動する処理
   
   
2. 閲覧者の特定の操作により起動する処理

前に説明しましたように、 script要素の内容としてJavaScriptの処理名を書けば良かったですね。また、要素は、JavaScriptに対応していないWebブラウザにも対応できるように、 コメントとしておきます。

1. 下記のHTML文章を先ほど作成した「exjs\学生番号exjs1.html」の body要素に、コピー＆ペーストして上書き保存して、 Webブラウザで表示して下さい （現在の時刻が表示されましたか？）
   
   

   <script type="text/javascript">
   <!--
      now_time();
   //-->
   </script>
   

   
   

   表示される時刻は、皆さんの使っているPC内部の時計の現在時刻です。ですから、PCの時計が狂っている場合は、その時刻が表示されます。
   
   

2. 一息ついたら、 「exjs\学生番号exjs1.html」を表示しているWebブラウザを再読み込みしてください。 そして、表示される時刻が変わっていることを確認して下さい。
   
   

   学生番号exjs1.htmlをWebブラウザで読み込むたびに（再読み込みをするたびに）、そこに書いた now_time(); という処理が実行されているのです。 now_time() の処理の内容 （どういった処理をするのか）は、 myscrpit.js ファイルの中に記述されています。

これがイベントハンドラの仕事であることは前章で説明しましたが、 HTMLファイル上での記述の仕方については以下で説明します。

イベントハンドラを用いて処理を起動させるには、 HTMLの開始タグ中に、イベントハンドラ名を属性名とし、 起動する処理名をそのイベントハンドラの属性値として書く ことで実現できます。

例えば、「ボタンをクリックして、oshita()というJavaScript処理が起動する」 ようにするには、以下のように書けば良いことになります。

前章の最後に示した input要素の例に、赤字の部分が追加されています。 onClickがイベントハンドラ名で、 「指定された領域でマウスがクリックされた時に、指示された処理を行なう」 という働きをします。その「指示された処理」 というのが、イベントハンドラの値である「oshita()」 で指定されています。

上記をHTMLファイル中に書くと、以下のように表示されます。

ボタンをクリックすると、ウィンドウが開き、 「どうもありがとう。 今日が素晴しい日でありますように！」と表示されます。

このメッセージは、myscript.js 中の oshita() の定義で決まっています。 oshita()の入力 (引数) のメッセージを変えると、ここで現われるメッセージもそれに従って変わります。 例えば、下のように変更すると、「こんにちは。」と表示されます。

また、上記のボタン中の文字は、inputタグ中の value属性値ですので、

とすれば、ボタンは以下のように変わります。 (ついでに、oshita()も、上記のように変更してみました。)

1. 「exjs\学生番号exjs1.html」に、以下のHTML文をコピー＆ペーストして上書き保存して下さい。

   <input type="button" value="クリックして！" onClick="oshita()" >
   

2. その後、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行ない、以下の4つのことを確認して下さい。
   
   
   1. ボタンが表示されている
      
      
   2. そのボタン内の文字が input要素の value属性の値である
      
      
   3. そのボタンをクリックすると、別ウィンドウ（ダイアログ）が開き、文章が表示される。
      
      
   4. その別ウィンドウ（ダイアログ）で表示される文章は、 myscript.jsファイル中にある oshita() の定義内の
      （ function oshita() { の次の行にある ） window.alert()の引数として書かれた文章である。
      初期状態の文章は、「どうもありがとう。今日が素晴しい日でありますように！」となっている。
3. 「exjs\学生番号exjs1.html」 にある input要素の value属性の値を適当に変えて （例えば、"クリックして！" を "ここを押して" など）、上書き保存し、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行なって、 ボタン内の文字が変わっていることを確認して下さい。
   
   
4. myscript.js中にある oshita()関数の定義内の （ function oshita() { の次の行にある ） window.alert()の引数に書かれた文章を適当に変更して （例えば、'どうもありがとう。 今日が素晴しい日でありますように！' を 'こんにちは。' など）、上書き保存し、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行なって、ボタンをクリックしたときに表れる文章が変わったことを確認して下さい。
   
   
5. 「exjs\学生番号exjs1.html」 にある input要素の "oshita()" を "oshita4()" に変えて、 上書き保存し、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行なって、 ボタンをクリックして下さい。 すると、 ウィンドウ(ダイアログ)が表示されなくなりませんでしたか？ （その理由がわかりますか？）
   これは、myscript.js ファイル中に、 oshita4() が定義されていないためです。
   

   この問題を解決するには、myscript.js ファイル中で、 oshita4() を定義すれば良いのです。 次の定義を、myscript.js の最初に追加し(挿入し)、上書き保存して、 「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行なって下さい。そして、ボタンをクリックしたとき、ちゃんとウィンドウが表れること、 並びに、表れたウィンドウ内の文章が追加した oshita4() の定義に従っていることを確認して下さい。

   function oshita4() {
     window.alert('新しい関数 oshita4です。よろしくお願いします。');
   }