(1/4)JavaScriptで本格的なプログラミングの世界に触れてみよう。});ボタンを押すと何かが起きる?第1回「ようこそJavaScriptの世界へ」では、document.writeを使って文字や計算結果を表示するJavaScriptを書きました。今回はJavaScriptを使って動的なWebページを作ってみましょう。皆さんはイベントと聞くと何を思い浮かべますか。運動会や遠足、学園祭、パーティー、それとも音楽ライブなどの行事や催し事でしょうか。JavaScriptの世界でのイベントはちょっと違う意味で使われます。サンプルを動かしてみましょう。この講座では、とにかく実際に動かしてみるというのがテーマです。本文は読み飛ばしても(?)、サンプルは自分で実行してみてください。テキストエディタを起動し、次のサンプルをコピー&ペーストして、javascript2.htmlという名前で保存してください。onclick="alert('ボタンがクリックされました。</body></html>保存したファイルをWebブラウザで開いてみましょう。画面にボタンが表示されましたか。「クリック!」と書かれたボタンをクリックしてみましょう。このように、JavaScriptを使うと「ボタンがクリックされた」という出来事をきっかけに、プログラムを動かすことができます。この「きっかけ」のことをJavaScriptではイベント(event)と呼びます。サンプルを理解してみようサンプルコードをもう少し詳しく見てみましょう。前回のdocument.writeで作ったサンプルと見比べてみてください。どんな違いがあるでしょうか。type="text/javascript">」と「</script>」がないのに気が付きましたか。イベントとしてHTMLタグの中にJavaScriptを書くときには<script>タグは不要です。onclick="alert('ボタンがクリックされました。')">は、フォームのボタンを作って、ボタンの表示を「クリック!」にしています。ここまでは普通のHTMLですが、最後にonclick(オンクリック)という属性が書かれています。この「onclick="alert('ボタンがクリックされました。')"」の部分がJavaScriptです。onclick="★"と書くことで、ボタンがクリックされるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。サンプルでは、この部分に、alert('ボタンがクリックされました。')というJavaScriptがあります。alertを使うと、警告(アラート)ダイアログという小さいウィンドウを表示できます。alert(★)と書くことで、「★」の部分に書かれた内容を警告ダイアログに表示します。警告ダイアログを表示すると、JavaScriptの実行を一時停止します。警告ダイアログが表示されている間はWebブラウザの操作ができなくなります。「OK」ボタンか「×」をクリックして警告ダイヤログを閉じると、JavaScriptの一時停止が解除され、Webブラウザの操作もできるようになります。警告ダイアログの「表示中はJavaScriptの実行を一時停止する」という特性を生かして、JavaScriptの途中でどんなことが起きているのかを確認するのにも使えますので、ついでに覚えておくと何かと便利です。1つの違いは、文字部分を括っている記号です。"(ダブルクオーテーション)で括っていましたが、今回のalertの中身の「ボタンがクリックされました。'(シングルクオーテーション)で括っています。'を使っているのです。'で括って、onclick='alert("ボタンがクリックされました。")'と書くこともできます。同じクオーテーション記号を連続して使って、onclick="alert("ボタンがクリックされました。")"や、onclick='alert('ボタンがクリックされました。')'と書くことはできないので、気を付けてください。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。