上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 第二回目は、訪問者のアクションに反応して、スクリプトを実行させる方法です。
 イベントハンドラと呼ばれるモノの一つで、イベントとは、何かが起こること。ハンドラというのは、一つの纏まったプログラムのこと。日本語訳すると、「マウスアクションに応じて動く、指定のプログラムの塊」と言う意味だそう。

 マウスが動いたときに実行されるプログラムです。




プログラムの塊を作る



 まずは、その「マウスが特定の動きをしたときに動くプログラムの塊」を作ります。

function a(){ ~~~ }

 この形が、プログラムの一つの塊です。

a()…「a」は「関数」名。名前を自由に付けられます。これは、「プログラムの塊の名前」と言う意味です。他の場所でこの名前を呼び出すと、この中のプログラムが実行されます。

 そして、括弧内に「引数」と言うものが入れられます。呼び出す場所に数値を入れれば、このプログラム内でその数値を利用できます。簡単なプログラムなら、使わなくてもどうにかなるので、「使えば便利だけど、使わなくてもある程度イケる」と認識しておけば大丈夫です。
 ただし、引数が無くても「()」は書いておかなければなりません。

~~~…ここに、プログラムを書きます。「{ }」内に、Javaスクリプトの命令文の一つの完結した塊を書くわけです。
 例えば、前回使った「HTML操作」のプログラムを書いておけば、マウスで何かをクリックしたとき、この「関数名」を呼び出すように設定しておけば、そのマウス操作があったとき、「HTML操作」のプログラムが動くという仕組み。




呼び出す場所を決める



 次は、この「プログラムの塊」を呼び出す場所と、アクションを設定しておきます。
 例えば、「このdivボックスがクリックされたら、「a()」を実行する」というような設定です。
 「どこに置くか」「どの名前のプログラムの塊を呼び出すか」「どんなマウスアクションに対応させるか」の3点を考えておいて、それを設定するわけです。


 例えば、「<div>クリック</div>」ボックスがクリックされたら、「a()」を呼び出すという設定としてみると…

<div onclick="a()">クリック</div>


 このような感じで記述することが出来ます。

「onclick」と言うのが、「マウスがクリックされたら」という「イベントハンドラ」です。
 正確には「onclick="ここにJavaスクリプトを書く"」というHTMLの構文なのですが、今は以下のように覚えておけば大丈夫です。

onclick="関数名"



 そして、この「イベントハンドラ」はたくさん用意されているので、やりたいことに応じて使い分けてください。


イベントハンドラ一覧・マウス
onclickクリック
ondblclickダブルクリック
onmousedownマウスボタン押し込まれ時
onmouseupマウスボタン離し時
onmouseoverマウスカーソルが要素に乗った
onmouseoutマウスカーソルが要素から離れた
onmousemoveマウスカーソルが動いた
キーボード
onkeydownキーが押された
onkeypressキーが押され続けている
onkeyupキーが離された
フォーム(インプット、テキストエリアなど)
onfocusウィンドウ・フォームがフォーカス(選択)された
onblurウィンドウ・フォームからフォーカスが離れた
onchangeフォームからフォーカスが離れ、かつフォームの内容が変わった。
onresetフォームのリセットボタンが押された
onselectテキストボックス・エリアが選択された
onsubmitフォームのsubmitボタンが押された
その他
onloadページ読み込み完了した
onunloadページ遷移するとき
onabortイメージの読み込みがキャンセルされた
onerrorページの読み込みに失敗した
onresizeウィンドウがリサイズされた





例文



 では、実際にどんな風にスクリプトが書けるのか、以下にサンプルを示してみます。
 内容は、それぞれの用意したDIVブロックをクリックすると、「id="test"」のDIVブロックに、それぞれの「プログラムの塊」を呼び出し、それぞれに指定のHTML出力をさせます。

<div onclick="RED()" style="padding:5px;border:1px solid #000;">赤ボックス</div>
<div onclick="BLUE()" style="padding:5px;border:1px solid #000;">青ボックス</div>
<div onclick="GREEN()" style="padding:5px;border:1px solid #000;">緑ボックス</div>


<div id="test">ここにHTML出力されます</div>



<script type="text/javascript"><!--
function RED(){
document.getElementById("test").innerHTML='<div style="width:50px;height:50px;background:red;"></div>';
}
function BLUE(){
document.getElementById("test").innerHTML='<div style="width:50px;height:50px;background:blue;"></div>';
}
function GREEN(){
document.getElementById("test").innerHTML='<div style="width:50px;height:50px;background:green;"></div>';
}
//--></script>


■実行例(クリックしてみてください)
赤ボックス
青ボックス
緑ボックス
ここにHTML出力されます




■次回は、「変数」です。
変数の初歩
このエントリーをはてなブックマークに追加
Thu.03.24.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。