第2回 イベントで「右クリック禁止」を禁止してみよう
小島 尚基
有限会社インテレクトキューブ
2010/1/7
JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）
ボタンを押すと何かが起きる？
- - PR -
第1回「ようこそJavaScriptの世界へ」では、document.writeを使って文字や計算結果を表示するJavaScriptを書きました。今回はJavaScriptを使って動的なWebページを作ってみましょう。
皆さんはイベントと聞くと何を思い浮かべますか。運動会や遠足、学園祭、パーティー、それとも音楽ライブなどの行事や催し事でしょうか。JavaScriptの世界でのイベントはちょっと違う意味で使われます。
さっそくですが、サンプルを動かしてみましょう。この講座では、とにかく実際に動かしてみるというのがテーマです。本文は読み飛ばしても（？）、サンプルは自分で実行してみてください。
テキストエディタを起動し、次のサンプルをコピー＆ペーストして、javascript2.htmlという名前で保存してください。
<html>
<body>
<input type="button" value="クリック！" onclick="alert('ボタンがクリックされました。')">
</body>
</html>
保存したファイルをWebブラウザで開いてみましょう。画面にボタンが表示されましたか。
「クリック！」と書かれたボタンをクリックしてみましょう。
このように、JavaScriptを使うと「ボタンがクリックされた」という出来事をきっかけに、プログラムを動かすことができます。この「きっかけ」のことをJavaScriptではイベント（event）と呼びます。
サンプルを理解してみよう
サンプルコードをもう少し詳しく見てみましょう。前回のdocument.writeで作ったサンプルと見比べてみてください。どんな違いがあるでしょうか。
まず、「<script type="text/javascript">」と「</script>」がないのに気が付きましたか。イベントとしてHTMLタグの中にJavaScriptを書くときには<script>タグは不要です。
3行目の
<input type="button" value="クリック！" onclick="alert('ボタンがクリックされました。')">
は、フォームのボタンを作って、ボタンの表示を「クリック！」にしています。
ここまでは普通のHTMLですが、最後にonclick（オンクリック）という属性が書かれています。この「onclick="alert('ボタンがクリックされました。')"」の部分がJavaScriptです。
onclick="★"
と書くことで、ボタンがクリックされるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。
サンプルでは、この部分に、
alert('ボタンがクリックされました。')
というJavaScriptがあります。alertを使うと、警告（アラート）ダイアログという小さいウィンドウを表示できます。
alert(★)
と書くことで、「★」の部分に書かれた内容を警告ダイアログに表示します。
警告ダイアログを表示すると、JavaScriptの実行を一時停止します。また、警告ダイアログが表示されている間はWebブラウザの操作ができなくなります。「OK」ボタンか「×」をクリックして警告ダイヤログを閉じると、JavaScriptの一時停止が解除され、Webブラウザの操作もできるようになります。
警告ダイアログの「表示中はJavaScriptの実行を一時停止する」という特性を活かして、JavaScriptの途中でどんなことが起きているのかを確認するのにも使えますので、ついでに覚えておくと何かと便利です。
もう1つの違いは、文字部分を括っている記号です。前回のdocument.writeでは、文字部分を" "（ダブルクオーテーション）で括っていましたが、今回のalertの中身の「ボタンがクリックされました。」という文字は' '（シングルクオーテーション）で括っています。
これは、onclick="★"の部分で、" "がすでに使われてしまっているため、" "の代わりに' 'を使っているのです。囲む順番は" "と' 'をどちらを先に使ってもいいので、onclick='★'のように' 'で括って、
onclick='alert("ボタンがクリックされました。")'と書くこともできます。
しかし、同じクオーテーション記号を連続して使って、
onclick="alert("ボタンがクリックされました。")"や、
onclick='alert('ボタンがクリックされました。')'と書くことはできないので、気を付けてください。
1/4 |
| Index | |
| イベントで「右クリック禁止」を禁止してみよう | |
| Page1 ボタンを押すと何かが起きる？ サンプルを理解してみよう |
|
| Page2 いろいろなイベントを使ってみる |
|
| Page3 イベントをいろいろな場所に書いてみる 右クリック禁止を禁止してみる |
|
| Page4 ブックマークレットを理解しよう コピー＆ペーストを禁止してみる |
|
| 初心者のためのJavaScript入門 |
| Coding Edgeお勧め記事 |
| いまさらアルゴリズムを学ぶ意味 コーディングに役立つ！ アルゴリズムの基本（1） コンピュータに「3の倍数と3の付く数字」を判断させるにはどうしたらいいか。発想力を鍛えよう |
|
| Zope 3の魅力に迫る Zope 3とは何ぞや？（1） Pythonで書かれたWebアプリケーションフレームワーク「Zope 3」。ほかのソフトウェアとは一体何が違っているのか？ |
|
| 貧弱環境プログラミングのススメ 柴田 淳のコーディング天国 高性能なIT機器に囲まれた環境でコンピュータの動作原理に触れることは可能だろうか。貧弱なPC上にビットマップの直線をどうやって引く？ |
|
| Haskellプログラミングの楽しみ方 のんびりHaskell（1） 関数型言語に分類されるHaskell。C言語などの手続き型言語とまったく異なるプログラミングの世界に踏み出してみよう |
|
| ちょっと変わったLisp入門 Gaucheでメタプログラミング（1） Lispの一種であるScheme。いくつかある処理系の中でも気軽にスクリプトを書けるGaucheでLispの世界を体験してみよう |
|
TechTargetジャパン
- 実例で学ぶRailsアプリのテスト方法 （2011/12/22）
具体的なWebアプリを例に簡単なテストを使ったリファクタリングについ
て解説する - Railsの人気テストフレームワーク6選！ （2011/8/18）
今回からテストを使ったリファクタリングを解説する。まずはRailsで人
気のあるテストフレームワークをいくつか紹介する - ActiveRecordの更新系操作 （2011/6/27）
Railsのモデル層を担当するActiveRecordを使った登録、更新、削除
など、更新系の機能を中心に見ていきます - 実例アプリで学ぶ“Railsらしさ”の基礎 （2011/5/26）
Ruby on Railsで書かれた実例アプリを取り上げて、初心者が陥りがちなコードの書き方を指摘します。より「Railsらしい」コードとは？
|
|
キャリアアップ
スポンサーからのお知らせ
イベントカレンダー
お勧め求人情報
転職／派遣情報を探す
*＊先週の人気講座ランキング＊*
〜 Android編 〜
ホワイトペーパー（TechTargetジャパン）
著作権はアイティメディア株式会社またはその記事の筆者に属します。（著作権について）
当サイトに掲載されている記事や画像などの無断転載を禁止します。
「＠IT」「＠IT自分戦略研究所」「＠IT情報マネジメント」「JOB＠IT」「＠ITハイブックス」「＠IT MONOist」「ITmedia」「誠」「BARKS」は、アイティメディア株式会社の登録商標です。
当サイトに関するお問い合わせは「＠ITへのお問い合わせ」をご覧ください。