読者です 読者をやめる 読者になる 読者になる

どらちゃんのポッケ

R・統計・技術メモなど勉強ログ置き場

イベントドリブンモデル その1

いよいよ、インターネットブラウザで操作した動作に対して、
特定の機能が動くというJavaScriptのおもしろいところに入ります!!

今回の流れは・・・

  1. イベントドリブンモデルの中心概念
  2. 実装方法の種類
  3. イベントドリブンをキャンセルする方法(戻り値)
  4. ブラウザオブジェクトについて
  5. ウインドウオブジェクトの機能【ダイアログ編】


まず、イベントドリブンモデルの中心的概念として、下記の3つを押さえます。
1)どの要素で発生した
2)どのイベントを
3)どのイベントハンドラに関連づけるのか

そして、実装ですが、いくつかやり方があります。
【1】タグ内の属性として宣言する等の方法↓

<script type="text/javascript">
    function btn_onclick() {
        window.alert('ボタンが押されたぜ’');
    }
</script>
    <form id="form1" runat="server">
    <div>
    < input type="button" value="ダイアログ表示" onclick="btn_onclick()" />
    </div>
    < /form>
</body>
</html>

【2】JavaScript内に記述する方法 -プロパティ設定↓


    
    < form id="form1" runat="server">
    
< input id="btn" type="button" value="ダイアログ表示" />
< /form>
【記述方式のまとめ】
●タグに対する設定
window. = function () { ...処理...}

●その他の要素に対する設定
documnet.getElementsById('ID名'). = function() {...処理...}

そして、イベントのキャンセルをするためには、イベントハンドラの戻り値にfalseを設定します。

EX)右クリックを無効にするためのコードは・・・


※右クリックを押すとコンテキストメニューが表示される。




●ブラウザオブジェクト
ブラウザオブジェクトとは、ブラウザ操作のための機能を集めたオブジェクト群。

その最上位に位置するのが、ウインドウオブジェクト。
ウインドウオブジェクトは、クライアントサイドのJavaScriptが起動するタイミングで生成される。
グローバル変数やグローバル関数にアクセスするための手段を提供。





●ウインドウオブジェクトの機能【ダイアログ表示】

alertメソッド(警告ダイアログ)


confirmメソッド(確認ダイアログ)

< form onsubmit = "return window.confirm('本当にいいの?');">
< input type = "submit" value = "送信">
< /form>

※confirmメソッドのダイアログで押すボタンで戻り値が違う。
OK:ture
キャンセル:false⇒falseが返されるとイベントがキャンセルになる。


promptメソッド(入力ダイアログ)


    < form id="form1" runat="server">
     
< input id="into" type="button" value="入力欄表示" />
< /form>

※IE8のデフォルト設定では、入力ダイアログの表示が許可されていない。
ツール⇒インターネットオプションで設定の変更が必要。

ま、おれはfirefoxだけどね!!
つうか、はてな記法にHTMLが変換されてしまう・・・。
全角スペース入れて対応しているけど、面倒くさい。
きれいにソースUPできないか?


つうか、Rとか、統計の方も進めたいけど、JavaScriptがおもしろくなってきた!
開発環境が楽ってのもあるし、目に見えるし、楽しいわ。
クライアントサイドはいーなー。