[2020/03/05] JavaScript PHPからのスクリプトの生成と制御 (No.151)
[2020/02/10] JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認 (No.150)
[2020/02/10] JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認 (No.149)
[2020/02/06] JavaScript jQueryを使った checkbox の操作方法・その２（チェック件数） (No.148)
[2020/01/06] JavaScript IE では関数のデフォルト引数が動作しない (No.147)
-
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
-
JavaScript の記事の中ではいままで全て静的なソースで説明を行ってきましたが、 今回は JavaScript のスクリプトを PHP から生成する例を示します。
Web のシステムを組む場合 PHP をよく使っていますが PHP では動的に HTML のスクリプトを生成します。
HTML のスクリプトと言っても結局は文字列の集合体であって JavaScript のスクリプトも同様に動的に出力できます。
以下の例は PHP のソースですがページが表示された最初にメッセージを表示する部分を JavaScript として動作する様に PHP で出力させています。
■PHP から JavaScript を生成させる簡単な例（test-java.php 等のファイル名として実行）
<?php // javascript の文字列の生成 $strJavaScript = '<script> $(function() { alert("test"); }); </script> '; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <?php // 生成された javascript の出力 echo $strJavaScript; ?> </head> <body> <p>テストメッセージ</p> </body> </html>
上記のソースは PHP のソースとしてファイル拡張子として .php としています。 当然のことながら Web 上では PHP が実行できる環境は必須です。
尚、 HTML の BODY 部の中身は特に意味があるものではありません。
これを実行させた場合に、アラートで「test」と表示されるはずです。 ブラウザで生成された HTML スクリプトは以下の様になるはずです。■生成された HTML スクリプト
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function() { alert("test"); }); </script> </head> <body> <p>テストメッセージ</p> </body> </html>
今回の例は HEAD 部 BODY 部ともにほとんど固定されたものですが PHP ではそれらの中身全て動的に生成が可能ですし、 そういったことが一般的です。 今回は javascript の生成のみを可変的にしましたが PHP と組み合わせることで複雑なことができると思います。
例えば、$_GET や $_POST などで動作指示を行い、今回のアラート表示の実行を制御することができます。■$_GET で動作指示を行う例
<?php // javascript の文字列クリア $strJavaScript = ''; if (isset($_GET["alert"]) == true) { // [test-java.php?alert] javascript の文字列の生成 $strJavaScript = '<script> $(function() { alert("test"); }); </script> '; } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <?php // 生成された javascript の出力 echo $strJavaScript; ?> </head> <body> <p>テストメッセージ</p> </body> </html>この例ですと「test-java.php?alert」とすればページが最初に表示された時にアラートが表示されます。
「test-java.php」のままではアラートは表示されません。
PR -
前回は単独での jQuery のセレクタの存在確認を書きましたが、 今回は、複数のセレクタを書いた時にどうなるかを示します。
以下のソースにその例を示します。11行目でカンマ区切りで3個のIDセレクタを見ていますが、 その length プロパティが３の場合に各セレクタのクリック時の関数を定義する様にしています。
$() で返されるセレクタのオブジェクトには length プロパティを持っていて、セレクタとして認識された個数を返します。
クリック時の関数の中では自分自身の ID名 を取得し番号の部分を抽出しています。 さらにその番号を使ってメッセージ領域の ID名 を作成し内部のHTMLを書き変えています。■複数セレクタの存在確認の例
<html> <head> <meta charset="utf-8"> <title>test sel</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // [TestN]ボタンで「メッセージN」の変更 if($("#Test1,#Test2,#Test3").length == 3) { //セレクタの個数確認OK $("#Test1,#Test2,#Test3").click(function () { //ID名取得 var id = $(this).attr("id"); //番号の抽出 var no = id.replace("Test", ""); //pタグIDを指定して内部 HTML 書換 $("#msgchg" + no).text("aaaaaaa"); }); } else { alert('セレクタ「Test1」「Test2」「Test3」の何れかが存在しません'); } }); </script> </head> <body> <h2>test sel</h2> <p id="msgchg1">メッセージ１</p> <p id="msgchg2">メッセージ２</p> <p id="msgchg3">メッセージ３</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> <button id="Test3">Test3</button><br /> </body> </html>
上の例でボタンのIDで Test3 の部分を仮に TestA にすると、 フォームのロードの直後に「セレクタ「Test1」「Test2」「Test3」の何れかが存在しません」のメッセージが表示されます。
-
先ずは jQuery のセレクタの使い方の例として以下のソースを見て下さい。 特に難しいところは無く、各ボタンのクリックに対応して p タグ の内容を書き変えています。
■最初の簡単な例
<html> <head> <meta charset="utf-8"> <title>test sel3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // [Test1]ボタンで「メッセージ１」の変更 $('#Test1').click(function () { $("#msgchg1").text("aaaaaaa"); }); // [Test2]ボタンで「メッセージ２」の変更 $('#Test2').click(function () { $("#msgchg2").text("bbbbbbbbbbb"); }); }); </script> </head> <body> <h2>test sel3</h2> <p id="msgchg1">メッセージ１</p> <p id="msgchg2">メッセージ２</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> </body> </html>
上の例でソースを入力する時に間違えたとして、以下の様に #Test2 の部分を #TestA にしたとします。
■ソースを間違えた簡単な例
<html> <head> <meta charset="utf-8"> <title>test sel3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // [Test1]ボタンで「メッセージ１」の変更 $('#Test1').click(function () { $("#msgchg1").text("aaaaaaa"); }); // [Test2]ボタンで「メッセージ２」の変更 $('#TestA').click(function () { $("#msgchg2").text("bbbbbbbbbbb"); }); }); </script> </head> <body> <h2>test sel3</h2> <p id="msgchg1">メッセージ１</p> <p id="msgchg2">メッセージ２</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> </body> </html>
上の例では、ボタンの ID と、クリック関数の宣言の ID が異なりますので、当然「メッセージ２」は変更されません。
そこでこれを回避するためには、クリック関数でセレクタが存在する時に関数の宣言を有効にすれば良く、無い場合にはその由をメッセージを表示してみます。
セレクタが存在するかどうかは、セレクタの length プロパティが０では無い場合に関数宣言を行います。 上記のソースを修正したものを以下に示します。 （.length != 0 の部分を [0] にしても同様な処理ができます）
■ソース修正した簡単な例
<html> <head> <meta charset="utf-8"> <title>test sel3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // [Test1]ボタンで「メッセージ１」の変更 if($('#Test1').length != 0) { $('#Test1').click(function () { $("#msgchg1").text("aaaaaaa"); }); } else { alert('セレクタ「#Test1」が存在しません'); } // [Test2]ボタンで「メッセージ２」の変更 if($('#TestA').length != 0) { $('#TestA').click(function () { $("#msgchg2").text("bbbbbbbbbbb"); }); } else { alert('セレクタ「#TestA」が存在しません'); } }); </script> </head> <body> <h2>test sel3</h2> <p id="msgchg1">メッセージ１</p> <p id="msgchg2">メッセージ２</p> <br /> <button id="Test1">Test1</button><br /> <button id="Test2">Test2</button><br /> </body> </html>
上の例を実行すると、ソースをロードした直後に、「セレクタ「#TestA」が存在しません」と表示されます。
この方法を使えば HTML 上の ID Class 名の間違いを探しやすと思いますが、如何でしょうか。
-
今回は checkbox がチェックされている状態のものを全てカウントする方法について説明します。
以下のソースは以下の記事を少し変更したものです。
⇒JavaScript jQueryを使った checkbox の操作方法■チェック件数取得
<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); // チェック件数取得関数 function getCountChk() { var intCnt = 0; // 選択済チェックボックス $('input[type="checkbox"]:checked').each(function() { intCnt += 1; }); alert("チェック件数:" + intCnt); return false; } </script> </head> <body> <h2>test checkbox</h2> <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br /> <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br /> <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br /> <br /> <button onclick="getCountChk();">チェック件数取得</button> </body> </html>16行目の $('input[type="checkbox"]:checked').each の部分でチェックされている全てのチェックボックスを列挙して カウントしています。 これは非常にベタな方法で、個別に処理する必要が無ければ、以下の様にした方がより簡単にできます。
■チェック件数取得その２
<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); // チェック件数取得関数 function getCountChk() { // 選択済チェックボックス var intCnt = $('input[type="checkbox"]:checked').length; alert("チェック件数:" + intCnt); return false; } </script> </head> <body> <h2>test checkbox</h2> <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br /> <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br /> <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br /> <br /> <button onclick="getCountChk();">チェック件数取得</button> </body> </html>入力画面でグループが異なるチェックボックスを設置することがありますので、その方法について例を示します。 以下の例では、上のソース15行目の $('input[type="checkbox"]:checked').length の部分で name 属性でアクセスする様に変更しています。
■チェック件数取得その３
<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); // チェック件数取得関数 function getCountChk(strName) { // 選択済チェックボックス var intCnt = $('input[name="' + strName + '[]"]:checked').length; alert("チェック件数:" + intCnt); return false; } </script> </head> <body> <h2>test checkbox 1</h2> <label><input name="chk1[]" type="checkbox" value="1" />チェック1-1</label><br /> <label><input name="chk1[]" type="checkbox" value="2" />チェック1-2</label><br /> <label><input name="chk1[]" type="checkbox" value="3" />チェック1-3</label><br /> <br /> <button onclick="getCountChk('chk1');">チェック件数取得</button> <br /> <br /> <h2>test checkbox 2</h2> <label><input name="chk2[]" type="checkbox" value="10" />チェック2-1</label><br /> <label><input name="chk2[]" type="checkbox" value="20" />チェック2-2</label><br /> <label><input name="chk2[]" type="checkbox" value="30" />チェック2-3</label><br /> <br /> <button onclick="getCountChk('chk2');">チェック件数取得</button> </body> </html>
-
最近はまったことですが IE(Internet Explorer) では関数のデフォルト引数が動作しないことです。
比較的規模の大きい PHP がらみのプログラムで IE では全く JavaScript の部分が動かなくなったのです。 非常にあせってしまって、何が原因かがよくわからなったのですが、どうもデフォルト引数の宣言の関数があると全ての JavaScript の関数が 動かなくなる様です。
IE 以外のブラウザでは JavaScript の関数の引数で =(イコール) を後ろに付けてデフォルト値を設定できます。 この関数を呼出す時に指定なしを記述できます。
例として以下のソースを見て下さい。 IE 以外のブラウザでは、それぞれのボタンをクリックした時にメッセージが表示されます。 しかし IE では、うんともすんとも何も実行されません。
■関数にデフォルト引数がある例
<html> <head> <meta charset="utf-8"> <title>test func</title> <script type="text/javascript"> function doTest(msg = 'test message') { alert('Test:' + msg); } </script> </head> <body> <h2>test func</h2> <br /> <button onclick="doTest();">Test</button><br /> <button onclick="doTest('aaaa');">Test</button> </body> </html>
そこで、以下の様にデフォルト引数を止めてみました。
当然のことながら、IE でも関数が動作することが分かります。
■関数にデフォルト引数を止める
<html> <head> <meta charset="utf-8"> <title>test func</title> <script type="text/javascript"> function doTest(msg) { alert('Test:' + msg); } </script> </head> <body> <h2>test func</h2> <br /> <button onclick="doTest('test message');">Test</button><br /> <button onclick="doTest('aaaa');">Test</button> </body> </html>MDN docs ではちゃんと IE はデフォルト引数は実装されていないと載っていました。
⇒https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters
どうしてもデフォルト引数が必要な場合は以下の様にすれば動きます。
■無理やり関数にデフォルト引数
<html> <head> <meta charset="utf-8"> <title>test func</title> <script type="text/javascript"> function doTest(msg) { if(typeof msg === 'undefined') { msg = 'test message'; } alert('Test:' + msg); } </script> </head> <body> <h2>test func</h2> <br /> <button onclick="doTest();">Test</button><br /> <button onclick="doTest('aaaa');">Test</button> </body> </html>