javascriptからjQueryへ

Copyright(C) 18Jan2015 coskx TNCT

１．javascript＆jQueryの準備


javascriptは，PC上のブラウザ内で，html文書を操作するクライアントサイドスクリプト（クライアントサイドプログラム）である。これは PHPなどがWebサーバ内で動作するサーバサイドスクリプトとは異なる概念である。なおjavascriptとjavaは全く違う概念である。
javascriptはブラウザ内のみで動作するので.htmlファイル内に記述できる。javascriptのライブラリであるjQueryを使うと，短いスクリプトの記述で済むため，またブラウザの種類の差を吸収できるようになるため，多く使用されている。

デモページでjQueryを利用している場合はjquery-2.1.3.min.jsを必要とし，（バージョンによる動作の違いがあるかもしれないので バージョンまで指定，おそらく，他のバージョンでもOK）それがサーバのドキュメントルート内のディレクトリjquery中に置いてあるものとする。

例えばドキュメントルートがc:\apache2.2\htpdocなら次のところに置く。
c:\apache2.2\htpdoc\jquery/jquery-2.1.3.min.js
これはphpファイル中の
<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>
に書いてあることに対応している。

もし，phpファイルに
<script type="text/javascript" src="/js/jquery-2.1.10.min.js"></script>
と書いてあるなら，（jqueryのバージョンが2.1.10になったことを想定）
c:\apache2.2\htpdoc\js/jquery-2.1.10.min.js
のように置けば良い。
jqueryはネット検索で見つけてダウンロードすればよい。 https://code.jquery.com/jquery/

追記
インターネット回線が高速になっており，キャッシュメモリも大きくなっているため，ページ表示の時に，jqueryを元のサイトから読み出す方が手間がなくなっていて，主流になっている。
次のように記述するとよい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

デモファイル

jscriptに関する説明からスタートしたい場合はこちらへ

２．javascriptの入口


javascriptを含まない例をまず示し，簡単なjavascriptを含む例を比較して，javascriptがどのように動作しているのか見てみる。

pagedisplay 2.1 htmlの例　start.html
当たり前ですが　
　

list 2.1 htmlの例　  start.html
<html>
<head>
</head>
<body>
こんにちは
</body>
</html>

pagedisplay 2.2 javascriptのあるhtml step0.html
　
　

list 2.2 javascriptのあるhtml  step0.html
<html>
<head>
<script>
alert('Hello');
var a=5;
var b=8;
var c=a+b;//通常の加算
alert(a+"+"+b+"="+c);//文字列の場合，＋は連結
</script>
</head>
<body>
こんにちは
</body>
</html>

上記のlist2.1，list2.2について細部を見てみよう。

通常htmlの表示については意識していないが，htmlソースの上から下に向かって表示作業が行われる。
<script></script>で囲まれた部分がjavascriptだが，これもjavascriptも含めて上から順に評価され，表示作業が行われる。
list2.2は，javascript内でalert('Hello')は別ダイアログを開いて，Helloを表示するものである。
上から順の作業なので，まずHelloがalert表示され，次に足し算がalert表示され，最後に画面に「こんにちは」が表示される。
通常のhtml

javascriptの記述してあるhtml


３．　javascriptの関数


次のlist 3.1はjavascript中に２つの関数を記述したものである。この２つの関数はどこからも呼び出されていないので，このhtmlをブラウザで表示させても，関数は単に記述しているだけで表示には影響を与えない。。
list 3.1 関数デモ  step1.html
<html>
<head>
<script>
function myalert()
{
    alert('Hello');
}
function myalert2(text)
{
    alert(text);
}
</script>
</head>
<body>
こんにちは
</body>
</html>

function myalert()は引数を持たない関数であり，function myalert2(text)は引数を持つ関数である。
次のlist 3.2は関数定義の他に関数を呼び出している実行文が2行あるため，alertが２つ表示される。
javascriptの記述の上では，関数定義と実行文が並んでしまうので，読み取りにくい。

list 3.2 関数デモ  step2.html
<html>
<head>
<!--<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>-->
<script>
function myalert()
{
    alert('Hello');
}
function myalert2(text)
{
    alert(text);
}
myalert();                //これは実行文
myalert2('How are you?'); //これも実行文
</script>
</head>
<body>
こんにちは
</body>
</html>

関数の定義は次のlist 3.3のようにもできる。変数定義のようだが，関数の定義であり，list 3.2と意味は同じである。
もうすこし正確に言うと，function xxxx() のxxxxのところが無い関数　function()は，無名関数あるいは匿名関数と呼ばれる名無しの関数である。この名無しの関数を変数myalertに代入しているところである。

list 3.3 関数デモ  step3.html
<html>
<head>
<script>
var myalert = function ()
{
    alert('Hello');
}
myalert();  //これは実行文
</script>
</head>
<body>
こんにちは
</body>
</html>


関数名も引数として渡せるので，受け取った関数内では仮引数で作業する。

list 3.3 関数デモ  step3.html
<html>
<head>
<script>
var myalert = function ()
{
    alert('Hello');
}
/*次のように書いても同じ
function myalert()
{
    alert('Hello');
}
*/
function myalertfunc(param)
{
    param();
}
myalertfunc(myalert);
</script>
</head>
<body>
こんにちは
</body>
</html>



４．　javascriptのイベントドリブン関数




javascriptは，html内の指定したタグ（<div></div>，<p></p>など）に対して，値や状態，動作を取得したり，値（文字列も含む）を設定することができる。まずは最初のデモを見てみよう。

テキスト入力ボックスに何かの文字列を入力し，echoボタンを押すと，その下に入力した文字列が表示されるデモである。


pagedisplay 4.1 echoデモ
ここで動作します。
（リセットボタンでもとに戻ります）
なにか文字列を入力して，echoボタンを押してください。

list 4.1 echoデモ  echo_click_1JS.html
<html>
<head>
<script>
function myecho() {
    mytext=document.getElementById('texthello').value;
    document.getElementById('mytextarea').innerHTML='「'+mytext+'」と書きましたね。';
}
</script>
</head>
<body>
なにか文字列を入力して，echoボタンを押してください。<br>
<input type="text" id="texthello"><br>
<input type="button" id="btnecho" name="hoge" value="echo" onclick="myecho()">
<div id="mytextarea"></div>
</body>
</html>


getElementById('texthello')はid='texthello'のエレメントを探し当てる関数である。
この関数が実行されるときに探しに行くので，この関数より後ろに書いてあるエレメントを探すことができる。




５．　jQueryのイベントドリブン関数


jQueryは，html内の指定したタグ（<div></div>，<p></p>など）に対して，値や状態，動作を取得したり，値（文字列も含む）を設定することができる。まずは最初のデモを見てみよう。

テキスト入力ボックスに何かの文字列を入力し，echoボタンを押すと，その下に入力した文字列が表示されるデモである。

pagedisplay 5.1 echoデモ
ここで動作します。
（リセットボタンでもとに戻ります）
なにか文字列を入力して，echoボタンを押してください。

list 5.1 echoデモ  echo_click_1_NG.html (失敗作)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>
<script>
function echo()
{
    var text= "「" + $("#texthello").val() + "」と書きましたね。"
    $("#mytextarea").html(text);
}
$("#btnecho").click( echo );
</script>
</head>
<body>
なにか文字列を入力して，echoボタンを押してください。<br>
<input type="text" id="texthello"><br>
<input type="button" id="btnecho" name="hoge" value="echo">
<div id="mytextarea"></div>
</body>
</html>

pagedisplay 5.1になるように作成したつもりのhtml文書がlist 5.1である。

$("#btnecho").click(echo) ： id="btnecho"を持つエレメント（ここではボタン）がクリックされた時には関数echoを呼び出すという定義である。id="btnecho"を持つ ボタンが押されたイベントが生じた時に呼び出す関数名をセットしている実行文である。
$("#texthello").val() ：　id="texthello"を持つエレメント（ここではテキストボックス）の値（すなわち入力文字列）
$("#mytextarea").html(text) ：　id="mytextarea"を持つエレメント（ここでは領域）にtextを入れる。

例えば，テキストボックスに「hello」が書かれて，echoボタンが押されると，次のように動作する。
（１）「hello」は<input type="text" id="texthello">に取り込まれているので，
$("#texthello").val()で取り出すことが出来，var textには，
"「" + $("#texthello").val() + "」と書きましたね。"，すなわち，
"「" + "hello" + "」と書きましたね。",すなわち，
"「hello」と書きましたね。"が代入されることになる。
（２）そして，<div id="mytextarea"></div>に挿入されるので，これは
<div id="mytextarea">「hello」と書きましたね。</div>
と書かれている状態になる。

このようになることを望んでいたが，実はそうならない。
html文書は上から下へと評価されるため，例えば$("#texthello").val()を定義しようとしても，このidを持つテキストボックスはまだ読み込まれていないため，エラーを生じているためである。

次のlist 5.2はjavascriptを</body>の後ろに記述しているため，上記のエラーを防ぐことができている。（正常に動作する。）


list 5.2 echoデモ  echo_click_1.html
<html>
<head>
<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>
</head>
<body>
なにか文字列を入力して，echoボタンを押してください。<br>
<input type="text" id="texthello"><br>
<input type="button" id="btnecho" name="hoge" value="echo">
<div id="mytextarea"></div>
</body>
<script>
function echo()
{
    var text= "「" + $("#texthello").val() + "」と書きましたね。"
    $("#mytextarea").html(text);
}
$("#btnecho").click( echo );
</script>
</html>


jQueryではlist 5.2と同じ意味を匿名関数を使って，list 5.3のように書くことができる。
短く記述できるメリットはあるが見慣れない記述である。慣れで違和感がなくなる。


list 5.3 echoデモ  echo_click_2.html
<html>
<head>
<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>
</head>
<body>
なにか文字列を入力して，echoボタンを押してください。<br>
<input type="text" id="texthello"><br>
<input type="button" id="btnecho" name="hoge" value="echo">
<div id="mytextarea"></div>
</body>
<script>
$("#btnecho").click( function() {
    var text= "「" + $("#texthello").val() + "」と書きましたね。"
    $("#mytextarea").html(text);
});
</script>
</html>


jQueryでは　「 $(function () { 」と「 }); 」　の間に記述した内容は，html文書を
読み込んだ後に実行あるいは定義される。この記述方法を用いると，</body>の後ろに
javascriptを記述しなければならないことはなくなり，<head></head>の中に記述できる。
list 5.3と同じ意味を，list 5.4のように書くことができる。


list 5.4 echoデモ  echo_click.html
<html>
<head>
<script type="text/javascript" src="/jquery/jquery-2.1.3.min.js"></script>
<script>
$(function () {
    $("#btnecho").click( function() {
        var text= "「" + $("#texthello").val() + "」と書きましたね。"
        $("#mytextarea").html(text);
    });
});
</script>
</head>
<body>
なにか文字列を入力して，echoボタンを押してください。<br>
<input type="text" id="texthello"><br>
<input type="button" id="btnecho" name="hoge" value="echo">
<div id="mytextarea"></div>
</body>
</html>