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を変更した結果になり、サーバ側とは無関係な操作になります。