第6回 関数と変数

関数

関数の定義

HTMLファイルの中のイベントハンドラの部分には、JavaScriptのプログラムを書きます。前回の練習問題05-10ではHTMLファイルの中に JavaScriptのプログラムである alert("Hello, world!"); を書き込み、JavaScriptファイルを使いませんでした。

しかし、イベントハンドラに書くプログラムが長くなってくると、だんだん書くのが大変になってきます。それで、普通はプログラム本体はJavaScriptファイルに書き、イベントハンドラにはそれを呼び出す部分だけを書きます。

ひとつのページに複数のプログラムが使われることがありますから、どのプログラムを呼び出すのか区別するために、プログラムに名前を付けておく必要があります。プログラムのひと固まりに名前を付けて、いつでも呼び出して実行できるようにしたものを関数と呼びます。

練習問題 06-1(☆)
  1. ファイル ex06-1.js を次のように書きなさい。
  2. 同じディレクトリにファイル ex06-1.html を次のように書き、ブラウザで表示してどうなるか確認しなさい。

解説動画

ページを表示してもHello, world!は出てきません。function { ... } と書くと、{ ... } の部分はすぐに実行するのではなく、名前を付けて後で実行できるように関数として登録されます。この関数の場合は sayhello が名前になります。関数名の後ろには () を書きますが、これについては後で説明します。

このように function を使って新しい関数を登録することを、関数を定義すると言います

関数の呼び出し

関数を定義しておけば、後でその中身を実行することができます。

練習問題 06-2(☆)
  1. さっきの練習問題のページを表示した状態でコンソールを開いて、次の行を入力し、実行してみなさい。
  2. ex06-1.html のbody要素の中に次の行を追加し、再読み込みしてからボタンをクリックしてみなさい。
  3. 上の行を次のように変更するとどうなるでしょうか?

解説動画

関数名の後に括弧をつけたものを実行すると、その関数の定義の中身が実行されます。これを関数を呼び出すと言います。

前回は平方根の計算をするのに Math.sqrt という関数を呼び出しましたMath.sqrtsayhello も関数ですが、Math.sqrt はあらかじめシステムの中で定義されているのに対し、sayhello は自分で定義した関数です。

練習問題 06-3(☆☆☆)

“Goodbye.”というメッセージを表示する関数saygoodbyeを定義し、ボタンを押すと呼び出すようにしなさい。

変数

変数宣言

変数とは、データを入れる箱に名前を付けたものです。例えば、Webコンソールで innerHeight と入力すると、何か数字が表示されます。これはブラウザが使っている変数で、innerHeight という名前の箱の中にはウインドウの高さ(正確にはコンテンツ表示部分の高さ)が記憶されています。

自分で好きな名前の変数を作って使うこともできます。そのためには「var 名前;」という文を実行します。これは「今後この名前は変数として使うぞ」という意味で、変数宣言と呼びます。

練習問題 06-4(☆)

Webコンソールで次の式を順に入力して、どのような結果が表示されるか確認しなさい。

  • x
  • var x;
  • x

  • 変数宣言も関数定義もされていない名前を使おうとすると、ReferenceErrorになります。
  • 変数宣言はした(箱は用意した)けれど、値が決まっていない(まだ箱に何も入れていない)状態だと、undefinedという結果(エラーではない)になります。

変数への代入

変数の中にデータを記憶させるには、代入をします。これは「変数名 = 式;」という形をしていて、式を計算した結果を変数に記憶させます。変数宣言と代入を同時にすることもできて、その場合は「var 変数名 = 式;」という形になります。

練習問題 06-5(☆☆)
  1. ex06-5.js を次のように書きなさい。
  2. ex06-5.html を次のように書きなさい。
  3. まず「あいさつ」をクリックしなさい。次に「太郎」、「あいさつ」、「花子」、「あいさつ」の順にクリックしてみなさい。この時の変数 who の値の変化を説明しなさい。
  4. ex06-5.js を次のように修正し、上と同じようにクリックしてみなさい。何が違うでしょうか?

解説動画

変数宣言を書く場所については、次の規則があります。

  • 複数の関数にまたがって使う変数の宣言は、関数定義の外側(普通はJavaScriptファイルの先頭)に書く。
  • 一つの関数だけで使う変数の宣言は、関数定義の内側(普通はその変数を最初に使う時)に書く。
練習問題 06-6(☆☆☆☆)

上の練習問題では、「太郎」と「花子」のボタンをクリックしても何も反応が無いので、押せたのか不安になります。「太郎」と「花子」のボタンをクリックしたら、「太郎が来た」と「花子が来た」というメッセージを表示するようにしなさい。ただし、「…が来た」と表示する新しい関数を定義し、taro()hanako() の中でその関数を呼び出す形にしなさい。

関数の引数

上の練習問題では、「太郎」と「花子」に別々の関数 tarohanako を作りました。二人ならいいですが、何十人も来る場合はいちいち関数を作るのは大変です。

一つの関数にいろいろなデータを処理させるには、引数を使います。これは関数名の後のカッコの中に書きます。

  • 関数呼び出しのカッコの中には、実際に使うデータを書きます。
  • 関数定義のカッコの中には変数を書きます(宣言は不要)。この変数に、呼び出しの時に書いたデータが自動的に代入されます。
練習問題 06-7(☆☆)
  1. ex06-7.js を次のように書きなさい。
  2. ex06-7.html を次のように書きなさい。
  3. 「太郎」というボタンをクリックした時に変数 xwho の値がどう変わるか説明しなさい。
  4. 関数 someone を使って、「レイ」、「シンジ」、「アスカ」にあいさつするためのボタンを作りなさい。

解説動画

引数が二つ以上ある時は、カッコの中にコンマで区切って書きます。

JavaScriptによるページの変更

表示しているページの内容をJavaScriptで読み取ったり、変更したりできます。そのためには次の二つのことが必要です。

  • HTMLの中に、どこをJavaScriptでいじりたいのか目印をつけます。いくつか方法がありますが、ここでは要素のid属性を使います。
  • JavaScriptのプログラムで document.getElementById().innerHTML という式を使います。

とりあえず、例題を見てみましょう。

練習問題 06-8(☆)
  1. ex06-8.js を次のように書きなさい。
  2. ex06-8.html を次のように書きなさい。
  3. 前と同じようにボタンをクリックし、ページの表示がどう変わるか確認しなさい。

解説動画

  • id属性class属性と似ていますが、一つのHTMLファイルの中で同じ値を持つ要素が複数あってはいけません。上の練習問題では、p要素id="who" と書いてあるので、このファイルの中で他に id="who" と書いた要素があってはいけません。
  • id属性が付いた要素は、document.getElementById().innerHTML で読み書きできます。ただし、カッコの中にはid属性の値を書きます。これは変数と同じように使うことができ、新しい値を代入すると画面の表示も書き換わります。

documentgetElementById()innerHTML は、ざっくり言うと次のような意味です。

  • document : 今表示しているページのソース
  • getElementById() : 指定したID属性を持つ要素を探し出す
  • innerHTML : 要素からタグを除いた中身の部分

これをピリオドでつなぐと「今表示しているページの中で指定したID属性を持つ要素の中身の部分」という意味になります。ピリオドの正確な意味を理解するには「オブジェクト」を勉強しないといけませんが、この授業ではそこまではやりません。

練習問題 06-9(☆☆☆)
  1. 自己紹介の写真とちょっと違った表情(口を閉じた顔と開いた顔とか、真面目な顔と変な顔とか)の写真をPhotoBoothで撮影し、自己紹介のHTMLファイルや前に撮った写真と同じディレクトリに保存しなさい。
  2. 自己紹介のHTMLファイルの中のimg要素id属性付きのdiv要素で囲んで <div id="..."><img ...></div> という形にしなさい。
    • div要素は、それ自体では何の意味もなく、ページの一部分にid属性class属性を付けるために使われます。
  3. 新しくJavaScriptファイルを作り、さっきのdiv要素の中身(最初の写真のimg要素)を2枚目の写真のimg要素に書き換える関数を作りなさい。
  4. 自己紹介のHTMLファイルのhead要素の中に、今作ったJavaScriptファイルを読み込むscript要素を追加しなさい。
  5. 写真の上か下に、写真を書き換える関数を呼び出すボタンを作りなさい
  6. ブラウザで表示し、ボタンをクリックして写真が切り替わるか確認しなさい。
  7. 元の写真に戻すボタンも作りなさい。

タイマーイベントによる実行

タイマーを使うと、一定時間経過するとイベントが起き、何かを実行させることもできます。

練習問題 06-10(☆)
  • コンソールで次の式を実行してみなさい。

setTimeout 関数には次の二つの引数があります。

  • 実行するべきプログラムを書いた文字列
  • 何ミリ秒後に実行するか

上の練習問題で 3 seconds have passed をダブルクォートで囲んでいるのは、シングルクォートだと alert() を囲むシングルクォートと区別がつかなくなるからです。

練習問題 06-11(☆☆☆☆☆)

練習問題06-9の続きで、写真を切り替えて3秒たつと自動的に元の写真に戻るボタンを作りなさい。

チェックポイント
  • 関数とは何でしょうか?
  • 関数の定義はどのように書くでしょうか?
  • 「関数を呼び出す」とはどういう意味でしょうか?
  • 変数とは何でしょうか?
  • 変数宣言はどのように書くでしょうか?
  • 変数への代入とは何をすることでしょうか?
  • HTMLの id 属性は何のために使うのでしょうか?