水圧ピストン(パスカルの原理) 第一回

~jQueryを使った入出力処理~

※ブラウザはChromeを使用します。他のブラウザでの動作は確認していません。

1.jQueryとは

  • JavaScriptのライブラリである
  • とても便利
  • みんな使ってる

基本的にこれだけ知ってれば十分です。
この章のプログラムでもこのライブラリをフルに活用し 入出力処理は全部jQuery経由で行います

▲TOP

2.jQueryの読み込み

従来、JavaScriptのライブラリは、配布元からファイルをダウンロードしてサーバに設置、それにリンクを貼るのが一般的でしたが
最近は、外部のサイトにリンクして使う方法が主流になっています

src

この章でも GoogleAPI 提供のライブラリを利用することにします

▲TOP

3.jQueryによる出力処理

では、肝心のjsファイルの中身を見て行きましょう

src

わずか3行のプログラムですが、最初なので細かく解説していきます

(1)$

jQueryライブラリにアクセスするためには$ という文字を使います
とにかくアクセスする回数が多いので、最小限の労力でアクセスできるようになっているわけですが 逆に言うとうかつに$文字を使えない ということでもあります
これはデフォルトで$という名前の変数にライブラリが代入されている というだけの話なので
別の変数名を使うように設定することもできます

(2)$(document).rady( ... )

これは定型文で「HTML全文を読み込み、表示準備ができたら 以下の関数を実行せよ」の意味です
実は省略して $( ... ) と書けるのですが jQuery慣れしていないと解読困難なので 今回は省略せずに記述しました

(3)function(){ ... }

JavaScript特有の記述法 無名関数です

    $(document).rady( function(){
	...
    } );
		    

これは

    $(document).rady( main );

    function main(){
	...
    }
		    

と ほぼ同義です
一回しか使わない関数はいきなり内容を記述してわざわざ名前を付けない のがJavaScriptの流儀です

(4)$("#message")

jQueryのセレクタ機能で「HTML文章のうち id="message"を指定された部分」を部分選択しています

(5)text( ... )

先述のセレクタで選択された部分に、処理を施しています
text( ... ) は タグ内の文章を指定値に置き換えるという処理です
もとのHTMLでは小文字表記だったhello world!が JavaScript処理後は大文字になっているはずです

▲TOP

4.jQueryによる入力処理

先のプログラムを改変して、こちらのマウス入力に反応して文字が変わるようにしましょう

src

(1)イベントの関連付け

    セレクタ.click( 関数 );
		    

この命令で、「セレクタ」の「click」イベントに 「関数」が関連付けられます
この処理により これ以降は「セレクタ」に「click」イベントが発生すると「関数」が呼び出されるようになります
今回のプログラムでは「id="message" を持つタグの中身」 がクリックされた時に 「OnClick」関数が呼び出されるようになります

▲TOP