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

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

今回の流れは・・・

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

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

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

<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がおもしろくなってきた！
開発環境が楽ってのもあるし、目に見えるし、楽しいわ。
クライアントサイドはいーなー。

どらちゃんのポッケ

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

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