第5回 スクリプト

JavaScriptとは

ウェブページは、基本的な文章の構造をHTMLで書き、これに加えて画像ファイルやCSSを使うことを勉強しました。

しかし、それだけでは文章や絵が表示されるだけで、動きがありません。動画ファイルを貼り付ければ確かに動きはありますが、利用者の操作に反応して表示を変えるようなことはできません。

インタラクティブなページを作るためにはプログラムを書く必要があります。プログラムを書くための言語(プログラミング言語)の一つがJavaScriptです。

JavaScriptはその名前からJavaと混同されがちですが、この二つは全く別の言語です。もし参考書などを購入する場合は必ずJavaScriptの本を選択してください。

「プログラム」と「スクリプト」はだいたい同じ意味です。それほど大きくないプログラムのことをスクリプトと呼ぶことが多いです。

JavaScriptで書いたプログラムもCSSと同じく、別のファイルに保存します。HTMLと混ぜて書くこともできますが、これもCSSと同じく分けて書いた方が混乱しません。

練習問題 05-1(☆)
  1. ex05-1.js というファイルを作り、次のように書きなさい。
  2. 同じディレクトリに ex05-1.html というファイルを作り、次のように書きなさい。
  3. ex05-1.html をブラウザで表示し、どのようになるか確認しなさい。
  4. ex05-1.js を編集し、world を自分の名前に変更してからブラウザで再表示しなさい。
  5. ex05-1.js を編集し、今書いてあるのと同じ行を追加して2行にしなさい。それから2行目の HelloGoodby に変更して、再表示しなさい。

Hello world とは、伝統的にプログラミングを勉強する人が最初に書くプログラムです。


プログラムの実行

実行の順序

JavaScriptファイルに書くプログラムは、ブラウザに対する命令が並んだものです。例えば alert は、小さなウインドウ(ダイアログボックス)を出して、そこに何かメッセージを表示せよという命令です。

ブラウザはHTMLファイルの内容を上から順に表示していきますが、script要素があると指定されたプログラムを実行します。プログラムの中に複数の命令がある場合は(原則として)上から順に実行します。

練習問題 05-2(☆☆)
  • ex05-1.html を次のように書き換えてブラウザで表示しなさい。何が違うでしょうか?

スクラッチパッドの使い方

プログラムを書いていると、「こう書いたらどうなる?」とちょっと試してみたいことがよくありますが、その度にファイルを作って保存してブラウザで開いて…というのは面倒なので、Firefoxでは直接JavaScriptのプログラムを書いて、その場で実行してみることができます。

練習問題 05-3(☆)
  1. メニューの【ツール】→【Web開発】→【スクラッチパッド】を選択しなさい。
  2. スクラッチパッドに alert('Hello, world!'); と書き込みなさい。
  3. メニューの【実行メニュー】→【実行】を選び、どうなるか確認しなさい。

コンソールの使い方

プログラムに間違いがあると、当然のことながら実行できません。しかし、何か手がかりが無いと、どこに間違いがあるか分からないので、ブラウザはプログラムが実行できない時はエラーメッセージを表示してくれます。

練習問題 05-4(☆)
  1. メニューの【ツール】→【Web開発】→【Webコンソール】を選択しなさい。
  2. ex05-1.js を編集し、alertalart とわざと間違えて書きなさい。
  3. ブラウザで再読み込みし、コンソールに何が表示されるか確認しなさい。
  4. ex05-1.js を正しく修正し、再読み込みしてコンソールを確認しなさい。


基本的な文法

これからJavaScriptの文法を勉強していきますが、まず最初に基本的な約束として次のことを覚えてください。

  • 開きカッコと閉じカッコは必ず対応している。
  • 文字列リテラル(データとして扱う部分、さっきのプログラム例では Hello, world! の部分)はシングルクォートまたはダブルクォートで囲む。
  • 空白と改行は好きなところに入れてよい(ただし単語の途中を除く)。
  • コメントは /**/ に挟まれた部分。もっと簡単には、 // を書くとそこから行の最後までがコメントになる。
  • 文字列リテラルとコメントの中では日本語も使えるが、それ以外はASCII文字(いわゆる半角英数字、詳しくは第8回で勉強します)しか使えない。
  • 文(命令として実行できる一番小さな単位)の最後にはセミコロンを付ける。省略しても大丈夫な場合もあるが、必ず書く習慣をつけた方がトラブルが少ない。
練習問題 05-5(☆☆☆)
  1. 次のJavaScriptファイルをブラウザで開き、メニューの【ファイル】→【別名でページを保存…】で適当な場所に保存しなさい。
  2. このJavaScriptファイルを読み込むHTMLファイルを作りなさい。
  3. HTMLファイルをブラウザで開き、コンソールでエラーメッセージを確認しなさい。
  4. JavaScriptファイルを正しく修正しなさい。

今回は練習のためにJavaScriptファイルを保存し、対応するHTMLファイルを作り、ブラウザで開いて…とやりましたが、JavaScriptの間違いを調べるだけならスクラッチパッドの方が手軽です。

式の計算

簡単な式

alert の後には、文字列だけでなく計算式を書いてもよく、その計算をした結果がメッセージとして表示されます。

四則演算は数学と同じように書きます。

練習問題 05-6(☆)
  • ex05-1.js を編集し、次のように書き換えてブラウザで表示しなさい。

関数を使った計算

もっと複雑な計算をするためには関数を使います。例えば平方根を計算するには Math.sqrt という関数が用意されています。

練習問題 05-7(☆)
  • ex05-1.js を編集し、次のように書き換えてブラウザで表示しなさい。

alert(Math.sqrt(1+1))alert(Math.sqrt(2))alert(1.4142135623730951) は同じ意味です。

プログラムが順に実行されていき、実際にある関数の計算が行われることを「関数を呼び出す」と言います。関数の計算の結果を使って続きの計算をすることを「関数が値を返す」と言います。例えば、Math.sqrt(2) を呼び出すと 1.4142135623730951 という値を返します。

コンソールを使った計算

ちょっと計算してみたい時に、いちいちJavaScriptファイルを書き換えるのは面倒です。コンソールの一番下の行をクリックして計算式を入力すると(式の最後にはリターンキーを押します)、計算結果を表示してくれます。

練習問題 05-8(☆)

コンソールで次の式を計算してみなさい。

  • 1+1
  • Math.sqrt(1+1)
  • alert(Math.sqrt(1+1))

alert も実は関数の一種です。何かを計算するのではなく、画面にメッセージを出すという働きをします。計算結果としては undefined という特別な値を返します。

練習問題 05-9(☆☆)
  1. 2の平方根と3の平方根の和を計算しなさい。
  2. 1を0で割るとどうなるか、試してみなさい。
  3. 0を0で割るとどうなるか、試してみなさい。
  • Infinity は、計算結果がJavaScriptが扱える限界を越えたことを意味しています。
  • NaN は Not A Number の略です。計算結果が数値として表せないことを意味しています。

データの型

JavaScriptが扱うデータにはいくつかの種類があり、それをと呼びます。例えば数値とか文字列は型です。型が違うデータは計算の方法が違います。違う型のデータを無理やり計算しようとすると、場合によって自動的に型を変換してくれたり、エラーになったりします。

  • 例えば、12 と書くと数値ですが、'12' と書くと1という文字と2という文字を並べた文字列になります。
  • + という記号は、数値に対しては足し算ですが、文字列に対しては文字列をつなげるという意味になります。
  • Number という関数を使うと、文字列を数値に変換できます。
練習問題 05-10(☆)

コンソールで次の式を計算してみなさい。

  • 2+3
  • '2'+'3'
  • Number('2')+Number('3')
  • '2'+3
  • Number('2')+3

イベントによる実行

Hello world のプログラムは、ブラウザがページを読み込んで表示する時に実行されますから、最初にダイアログボックスが出た後は動きがありません(再読み込みすればまた実行されますが)。これでは面白くないので、ページを見ている人がマウスクリックなどの動作をした時にプログラムを実行する仕組みがあります。

プログラムを実行するきっかけをイベントと呼びます。イベントにはいろいろな種類があり、あるイベントが起きた時に何かプログラムを実行して欲しい場合は、HTMLの要素に対応するイベントハンドラを書いておく必要があります。

練習問題 05-11(☆☆)
  1. 新しいファイル ex05-11.html を次のように書き、ブラウザで表示してボタンをクリックしてみなさい。
  2. input要素をコピーして同じ行を作り、onclickondblclick に、Hello, world! を好きな言葉に変更してから保存しなさい。それからブラウザで再読み込みし、ボタンをクリックしたり、ダブルクリックしたりしてみなさい。

解説動画

この例では、onclickondblclick がイベントの種類を表し、その後のダブルクォートの中がイベントハンドラです。イベントハンドラにはJavaScriptのプログラムを書きます。

onclick イベントはボタンで使うことが多いですが、他の要素でもイベントハンドラを設定すれば同じように使えます。

練習問題 05-12(☆☆☆)

見出しの「イベントハンドラの練習」というところでマウスをクリックすると Hello, world! と表示されるようにしなさい。

見出しや段落に onclick のイベントハンドラを設定しても、見た目ではわかりませんから、下線を付けたり色を変えたりして「ここをクリックして欲しい」と見る人に伝えることが必要です。

練習問題 05-13(☆☆☆☆☆)

下の参考資料を見て、マウスを移動した時にメッセージが表示されたり、テキスト入力欄に書き込んだ文字が変更された時にメッセージが表示されたりするようにしなさい。

チェックポイント
  • プログラムは何のために使うのでしょうか?
  • プログラムの中に並んでいる命令は、どんな順序で実行されるでしょうか?
  • イベントとは何でしょうか?
  • イベントハンドラとは何でしょうか?