2024年03月29日
1.JavaScript/jQueryとは
PHP はサーバ側で動くスクリプト言語でしたが、JavaScriptはクライアント側で動くスクリプト言語になります。
利用者が画面を操作すると、JavaScriptがその操作を検知し画面のHTMLやCSSをダイナミックに変更します。
またjQueryは、JavaScriptをより簡単な文法で記述できるJavaScriptライブラリの基で動くスプリプト言語になります。
ここではこれらの関係を具体的な事例で解説します。
1.Webサーバからクライアントに送られるデータとは
例えば下記の様なデータがWebサーバからクライアントに送られるとします。
<div class='taget'>テスト</div> <style> .taget{color:red;cursor: pointer;} </style> <script> console.log('start'); $(function(){ $('.taget').click(function(){ $(this).css('color','black'); }); }); </script>
■1行目:HTMLデータ
■2~4行目:CSSデータ
■5~12行目:JavaScript/jQueryデータ
・6行目:JavaScript
・7~11行目:jQuery
下記が上記プログラムが実行された結果です。
テスト
|
■赤字のテストが表示され、カーソルをONさせると指マークに変わります。
これはブラウザがHTMLとCSSを解釈した結果です。
■6行目のconsole.log()は、コンソール画面に文字を出力するJavaScriptメソッドです。
ブラウザの コンソール を開くと「start」が表示されます。
以上までがブラウザのデフォルト機能です。
これに加えてブラウザ側にjQueryライブラリが送られていると、「テスト」をクリックすると黒字の「テスト」に変わります。
これが、ブラウザ側の操作に対応してjQueryがCSSを変更した結果になり、サーバ側とは無関係な操作になります。