本節の目的
JavaScript言語で書かれた処理をHTMLファイル中で利用する方法を学習します。
JavaScriptで記述した処理を利用するには
前置きが長くなってしまいましたが、今回のテキストの最初の方で説明しましたように、 JavaScript言語処理を利用するWebページを作成するには、次の1. と 2.の2つのステップが必要です。
ただし、実際にはJavaSriptの処理を利用するHTMLファイルでは、お決まりの前準備が必要となりますので、正確には次の 0. を含めた3ステップということになります。
- [HTMLファイルでの準備] HTMLファイルのhead 要素に「JavaScriptを使うよ」という意味の記述を記述する
- [処理の定義] いくつかの基本的な処理をまとめて一つの処理として名前をつける
- [処理の適用] HTMLファイルの実行したい場所に、定義した(定義されていた)処理の名前を記述する
実際に利用する際の3つのステップについて、具体的なの利用例を以下に示します。テキストに従い、実際に行って下さい。
0. HTMLファイルでの準備
CSSを利用したときと同様に、HTMLファイルのhead要素で、 JavaScript言語を利用することを宣言しておく必要があります。 次が、その例です。
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./myscript.js"></script>
1行目は、HTMLファイル中で利用するプログラムがJavaScript言語であることを宣言しています。
2行目は、JavaScript言語で記述された処理の定義集である ./myscript.js というファイルを、このHTMLファイル中で利用することを宣言しています。つまり、これにより、 JavaScriptの処理の定義は、すべて ./myscript.js というファイルに記述することになります。
ということで、CSSとJavaScriptを利用する皆さんのHTMLファイルのhead要素は、以下のようになるはずです。
............
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./myscript.js"></script>
<title>
............
演習：JavaScriptを利用するHTMLファイルの準備
JavaScriptを利用するために、HTMLファイルの初期設定を行なってください。
- 「exjs」フォルダを作り、前回作成した「kankou.html」をコピーして
「exjs\学生番号exjs1.html」として貼り付けてください。
いま保存したhtmlファイルはJavaScriptの練習用htmlとして利用するだけですので、保存する元ファイルは、kankou.htmlでなくて他のhtmlファイルでも構いません - JavaScriptを利用するためにhead要素中に必要な上記の2行 (<meta ... type=text/javascipt>
及び <script ...></script>)を、上図のようにhead要素中に書いて下さい。
（上図の必要部分(青字の部分)をコピー＆ペーストしてください。） - title要素の内容は、今回の演習ファイルであることが分かるように、 「Javascriptの演習」等に、適宜、変更してください。
また、body要素の内容 (<body> と </body> の間) は、不要ですので全部消してください。
ただし、<body> 及び </body> は、消さないでください！
1. 処理の定義 (JavaScriptの記述)
ただし、JavaScript中で指定してあるファイル名等を自分の環境に合わせるなど、最低限の修正は必要となります。
そこで、まずはサンプルのJavaScript処理の定義ファイルをダウンロードしましょう。
演習：JavaScript処理のサンプル定義ファイルのダウンロードと確認
処理の定義は、一つのファイルにおいて幾つでも行なうことができます。そのため、色々な処理の定義を、一つのファイルにまとめておけば便利でしょう。もちろん、HTMLでそれらを利用するときに、すべてを使う必要はありません。 (ちなみに、ダウンロードしてもらったファイルには、4つの処理が定義されています。)
myscript.js をエディタで開いてみると、その中には下記のように記述があるはずです。
//---------------------------------------------------
// 新しいウィンドウでメッセージを表示する。
//------------------------
function oshita() {
window.alert('どうもありがとう。 今日が素晴しい日でありますように！');
}
//---------------------------------------------------
JavaScriptでは、「//」(2個のスラッシュ)があると、 その後は行末までコメントとなります。つまり、上のJavaScriptで、 先頭から3行と最後の1行はコメント行です。定義する処理の説明と、 どこからどこまでがこの定義の範囲なのかを示しているだけです。
JavaScriptでの処理は、一般的に以下のように定義します。
function 処理の名前(入力1, 入力2, ...) {
処理1;
処理2;
.......
.......
}
処理を定義するには、まず、「function」と書き、続けて自分で決めた任意の処理の名前を書きます。先の例では、 「oshita」が処理の名前です。
次に、処理に必要な入力 (一般には、 「引数(ひきすう)」と呼ばれます) を、括弧 「( )」で囲んで記述します。入力(引数)が複数ある場合は、カンマ「,」で区切ります。また、 引数が不要な場合も、括弧「( )」は省略できません。先の「oshita( )」という処理は、 引数の不要な(無い)処理です。
処理のことを、一般に「メソッド(method)」や「関数(function)」と呼びます。
最後に、定義する処理の内容を、全体を「{ }」で囲んで記述していきます。また、それぞれの処理の最後には、セミコロン「;」を書きます。上の「oshita( )」という処理では、 window.alert( )という処理が、１つだけ行なわれるということになります。
上の「oshita( )」のように、１つの処理しか行なわない処理は、改めて定義する必要はありません。この例では、単に、処理の定義の説明をするために作っただけです。
条件により処理を変えたり(条件分岐)、繰り返し処理を行なう場合、条件分岐命令や繰り返し命令などには、セミコロンはつきませんので、サンプルを変更するときは注意して下さい。このことについては、次回もう少し具体的に説明します。
2. 処理の適用
実際に処理の適用(ここで処理をしてもらうという依頼)を行う前に、適用時の注意点をまとめておきます。
- 処理の適用形式は、 「処理の名前(入力1, 入力2, 入力3... );」 という形
f(x, y) のような数学で使う関数とほぼ同じ形式で行います。ただし、最後に必ずセミコロン(;)をつける必要があります。 - 処理に必要な「入力」を指定する
多くの処理では、処理に必要な「入力」を指定する必要があります。例えば、メッセージをウィンドウに表示する「alert」という処理を、HTML中に記述するときには、alert('注意して下さいね。');というように、メッセージの内容を「入力」として、処理に渡してやる必要があります。処理によっては、複数の入力が必要なものもありますが、その場合、以下の例のように、括弧「()」の中に、カンマ「,」で区切って指定します。multi_alert('注意して下さいね。', '絶対ですよ！'); - 「入力」の必要が無い処理でも、処理名の後に括弧「()」を書く
その名前を指定するだけで(「入力」は不要)、現在の時刻を表示する「now_time」 という処理のときも、now_time();のように、処理の名前であることを明示するため括弧「()」を必ず書く必要があります。 - 「入力」には、処理によって文字列と数値が要求されるので区別する
処理によって、処理に渡す「入力」が、文字列(文字の並び)の場合と数値の場合があります。
本当は、それ以外に「変数」も渡しますが、「変数」についての説明は、省略します。必要があれば、次の回で説明します。
文字列を入力するときは、その文字列をシングルクォート「'」で囲みます。alert('注意して下さいね。');一方、数値を入力するときは、下の例のように何もつけません。uranai(46);ただし、文字としての数字を入力するときには、シングルクォート「'」で囲む必要があります。
alert('987654321');
お待たせしました。それでは、実際にJavascriptを適用して動きのあるページを作ってみましょう。
前章で説明しましたように、JavaScriptで記述した処理を起動するタイミングには、以下の2つがあり、それぞれHTMLファイルへの記述方法が異ります。それぞれについての適用方法を、演習を通して学習してみましょう。
- Webページが表示されると同時に起動する処理
- 閲覧者の特定の操作により起動する処理
1.「Webページが表示されると同時に起動する処理」の記述法
前に説明しましたように、 script要素の内容としてJavaScriptの処理名を書けば良かったですね。また、要素は、JavaScriptに対応していないWebブラウザにも対応できるように、 コメントとしておきます。
演習：Webページが表示されると同時に起動する処理
myscript.jpに記述してある、"function now_time( )"を、Webページで表示（実行）してみましょう。
- 下記のHTML文章を先ほど作成した「exjs\学生番号exjs1.html」の body要素に、コピー＆ペーストして上書き保存して、 Webブラウザで表示して下さい （現在の時刻が表示されましたか？）
<script type="text/javascript"> <!-- now_time(); //--> </script>
表示される時刻は、皆さんの使っているPC内部の時計の現在時刻です。ですから、PCの時計が狂っている場合は、その時刻が表示されます。 - 一息ついたら、 「exjs\学生番号exjs1.html」を表示しているWebブラウザを再読み込みしてください。 そして、表示される時刻が変わっていることを確認して下さい。
学生番号exjs1.htmlをWebブラウザで読み込むたびに（再読み込みをするたびに）、そこに書いた now_time(); という処理が実行されているのです。 now_time() の処理の内容 （どういった処理をするのか）は、 myscrpit.js ファイルの中に記述されています。
2. 「閲覧者の特定の操作により起動する処理」の記述法
これがイベントハンドラの仕事であることは前章で説明しましたが、 HTMLファイル上での記述の仕方については以下で説明します。
イベントハンドラを用いて処理を起動させるには、 HTMLの開始タグ中に、イベントハンドラ名を属性名とし、 起動する処理名をそのイベントハンドラの属性値として書く ことで実現できます。
例えば、「ボタンをクリックして、oshita()というJavaScript処理が起動する」 ようにするには、以下のように書けば良いことになります。
<input type="button" value="クリックして！" onClick="oshita()">
前章の最後に示した input要素の例に、赤字の部分が追加されています。 onClickがイベントハンドラ名で、 「指定された領域でマウスがクリックされた時に、指示された処理を行なう」 という働きをします。その「指示された処理」 というのが、イベントハンドラの値である「oshita()」 で指定されています。
上記をHTMLファイル中に書くと、以下のように表示されます。
ボタンをクリックすると、ウィンドウが開き、 「どうもありがとう。 今日が素晴しい日でありますように！」と表示されます。
このメッセージは、myscript.js 中の oshita() の定義で決まっています。 oshita()の入力 (引数) のメッセージを変えると、ここで現われるメッセージもそれに従って変わります。 例えば、下のように変更すると、「こんにちは。」と表示されます。
function oshita() {
window.alert('こんにちは。');
}
また、上記のボタン中の文字は、inputタグ中の value属性値ですので、
<input type="button" value="push me!" onClick="oshita()">
とすれば、ボタンは以下のように変わります。 (ついでに、oshita()も、上記のように変更してみました。)
演習：閲覧者の特定の操作により起動する処理
以下のようにして、上記のサンプルを実際に試し、閲覧者の特定の操作により起動する処理の記述法を練習して下さい。
- 「exjs\学生番号exjs1.html」に、以下のHTML文をコピー＆ペーストして上書き保存して下さい。
<input type="button" value="クリックして！" onClick="oshita()" >
- その後、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行ない、以下の4つのことを確認して下さい。
- ボタンが表示されている
- そのボタン内の文字が input要素の value属性の値である
- そのボタンをクリックすると、別ウィンドウ（ダイアログ）が開き、文章が表示される。
- その別ウィンドウ（ダイアログ）で表示される文章は、 myscript.jsファイル中にある oshita() の定義内の
（ function oshita() { の次の行にある ） window.alert()の引数として書かれた文章である。
初期状態の文章は、「どうもありがとう。今日が素晴しい日でありますように！」となっている。
- ボタンが表示されている
- 「exjs\学生番号exjs1.html」 にある input要素の value属性の値を適当に変えて （例えば、"クリックして！" を "ここを押して" など）、上書き保存し、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行なって、 ボタン内の文字が変わっていることを確認して下さい。
- myscript.js中にある oshita()関数の定義内の （ function oshita() { の次の行にある ） window.alert()の引数に書かれた文章を適当に変更して （例えば、'どうもありがとう。 今日が素晴しい日でありますように！' を 'こんにちは。' など）、上書き保存し、「exjs\学生番号exjs1.html」 を表示しているWebブラウザで再読み込みを行なって、ボタンをクリックしたときに表れる文章が変わったことを確認して下さい。
- 「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です。よろしくお願いします。'); }
Copyright (C) Kenichi Sugitani 2008, All Rights Reserved