イベント
値としての関数
JavaScript では、 関数も 値の一種です。したがって、他の 値と同じように、 変数に 代入したり、 関数の 引数 や戻り値 として使用したりすることができます。
function greet() {
document.write("Hello World");
}
const func = greet;
func();
上の例では、 const func = greet; の行で変数 func に関数 greet を代入しています。関数を値として扱うときは、関数呼び出し式の括弧は使用しません。これにより、関数が代入された変数を経由してその関数を実行できます。
イベントハンドラ
オブジェクトの
プロパティとして
関数を利用することもできます。document.getElementById
が返す
オブジェクトの onclick
プロパティ
には、
要素がクリックされたときに実行される
関数を指定できます。
ボタンのクリック、フォームへの入力、ページの読み込みなど、Web ページ上で発生するあらゆるアクションを総称してイベントと呼びます。
このようなイベントの処理を行うのがイベントハンドラで、onclick 関数はその一例です。
<button id="greet-button" type="button">クリック</button>
function clicked() {
document.write("Hello World");
}
const greetButton = document.getElementById("greet-button");
greetButton.onclick = clicked;
この例では、HTML 要素の id 属性に greet-button が指定されている HTML 要素を表すオブジェクトの onclick プロパティに対し、関数 clicked を代入しています。これにより、ボタンがクリックされたとき、clicked 関数が実行されるようになります。
下のコードは意図したとおりに動作しません。何が間違っているのでしょうか。
function clicked() {
document.write("Hello World");
}
const greetButton = document.getElementById("greet-button");
greetButton.onclick = clicked();
答えは、最後の行が clicked から clicked() に変わってしまっていることです。関数は、カッコをつけた式が評価されるタイミングで実行されます。このため、
greetButton.onclick = clicked();
では代入より前、式 clicked() が評価されたタイミングで clicked 関数が実行されてしまいます。
上の例では、画面上にはじめから表示されていたボタンが、ボタンをクリックしたときに削除されています。これは、 document.write をすべての要素の表示が終わった後に実行すると、画面上のすべての要素を一度削除するという挙動をとるためです。このため、現代の JavaScript において、 document.write 関数が使用されることはほとんどありません。
課題
押すと大きく赤文字が表示される「びっくり箱」のようなボタンを作ってみましょう。
ヒント1：文字列の表示
さっきは文字列の表示にdocument.write() を使いましたが、これでは文字色やサイズが変えられません。
こんな書き方ならそれもできますが、あまりに乱暴ですよ。
document.write("<div style='color:red; font-size:40px'>Hello world!</div>");
HTML 要素をJavaScriptで操作する方法は前回の「DOM」の章で扱っています。
ヒント2：HTMLファイルに…
<button> タグのHTML属性を書き換えるとボタンの中にHello world! を表示してしまいます。
HTMLファイルに一工夫が必要です。空の<div> タグを用意してあげましょう。
<div id="greeting"></div>