[2023/10/18] JavaScript jQueryのライブラリ「LightBox2」で「$.fn」のプロトタイプでの関数宣言ではまったこと (No.328)
[2022/12/28] JavaScript jQueryでの each を使った場合の再考 (No.296)
[2021/12/27] JavaScript JQuery crypto-jsを使って暗号化と復号を行う方法について (No.284)
[2021/10/14] JavaScript JQuery HTMLタグの入れ替えで表示を変える方法について (No.283)
-
画像ファイルをHTMLに記述して拡大表示を行う場合に良く使う「LightBox2」で、 Javascriptのプログラムから画像追加のテストを行ってみました。
「LightBox2」と1個の画像のみの表示の場合は、以下の様な感じでHTMLを作れば画像の拡大表示ができます。■LightBox2の例
<!DOCTYPE html> <head> <link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet"> <script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script> <script src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script> <script> // lightbox start $(function() { lightbox.option({ "positionFromTop": 150, }); }); </script> </head> <body> <h1>LightBox2-TEST</h1> <a href="./test-1.jpg" data-lightbox="album" > <img src="./test-1.jpg" id="" width="100" > </a> </body> </html>
上のHTMLでは特に難しくはありませんでした。 そこで、このHTMLにボタンと、10個の適当な画像ファイル(add-1.jpg ~add-10.jpg)を用意して、 そのボタンをクリックすることで、上記の「test-1.jpg」のファイルの後ろに表示する様にしてみます。
画像ファイルの指定を追加しやすくするために、<div id="imgdiv"></div> で囲っています。
この35行は、divタグ、aタグ、imgタグを1行で記述していますが、こうしないと余計なキャプションが付くための対策です。
■LightBox2の例・その2
<!DOCTYPE html> <head> <link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet"> <script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script> <script src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script> <script> // lightbox start $(function() { lightbox.option({ "positionFromTop": 150, }); }); $(function() { $("#btn").on('click', function() { for (i = 1; i <= 10; i++) { var add = ""; add += '<a href="./add-'+i+'.jpg" data-lightbox="album" >'; add += '<img src="./add-'+i+'.jpg" width="100" >'; add += '</a>'; $("#imgdiv").append(add); } }); }); </script> </head> <body> <h1>LightBox2-TEST</h1> <button id="btn">add image</button> <div id="imgdiv"><a href="./test-1.jpg" data-lightbox="album"><img src="./test-1.jpg" width="100"></a></div> </body> </html>
「add image」をクリックする前の表示は以下の通りです。
「add image」を2回クリックした後の表示は以下の様になります。
画像のどれかをクリックすると「lightbox2」が機能し、画像の拡大が行われます。
JQuery でのセレクタに対する append メソッドで上手くいくのか懸念していましたが、今回のテストでは特に問題なく「lightbox2」は動作しました。
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
⇒JavaScript jQueryを使った checkbox の操作方法
PR -
画像ファイルをHTMLに記述して拡大表示を行う場合に良く使う「LightBox2」で、 プロトタイプでの関数宣言で最近はまったので忘備録的に記載します。
「LightBox2」自体の使い方は難しくなく、以下の様な感じでHTMLを作れば画像の拡大表示ができます。■LightBox2の例
<!DOCTYPE html> <head> <link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet"> <script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script> <script> // lightbox start $(function() { lightbox.option({ "positionFromTop": 150, }); }); </script> </head> <body> <h4>LightBox2テスト</h4> <a href="./example1.jpg" data-lightbox="album" > <img src="./example1.jpg" id="" width="100" > </a> <a href="./example2.jpg" data-lightbox="album" > <img src="./example2.jpg" id="" width="100" > </a> <a href="./example3.png" data-lightbox="album" > <img src="./example3.png" id="" width="100" > </a> </body> </html>
上のHTMLでは何も問題は無いのですが、ここに以下の Javascript ファイルを読込んで、 そのファイル内の関数を呼出した時にエラーが発生しました。■Javascriptの例(test.js とする)
(function($) { $.fnc = {}; $.fnc.test = function () { // ただ単に"test"を表示させる alert("test"); }; })(jQuery);
それでは、先ほどのHTMLファイルに上記の「test.js」を追加してみます。■LightBox2の例・その2
<!DOCTYPE html> <head> <link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet"> <script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="./js/test.js"></script> <script type="text/javascript" src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script> <script> // lightbox start $(function() { lightbox.option({ "positionFromTop": 150, }); }); // test display $.fnc.test(); </script> </head> <body> <h4>LightBox2テスト</h4> <a href="./example1.jpg" data-lightbox="album" > <img src="./example1.jpg" id="" width="100" > </a> <a href="./example2.jpg" data-lightbox="album" > <img src="./example2.jpg" id="" width="100" > </a> <a href="./example3.png" data-lightbox="album" > <img src="./example3.png" id="" width="100" > </a> </body> </html>
このファイルをブラウザで開いても、「alert("test");」の実行が行われませんでした。
Chromeのデベロッパーツールでソースを開いて上記の16行目でブレイクさせると、「$.fnc」は「undefined」となっていました。 「undefined」なので当然「$.fnc.test();」は実行不可能でした。
「lightbox2」のJavascriptを読込むと、どうも「JQuery」のプロパティ(この表現が正しいかどうかも分かりませんが)がクリアされる様です。
それならばと「test.js」ファイルの読込を「lightbox2」の後に持ってきたら、「$.fnc.test();」が実行されアラートが表示されました。
少し、便宜的な方法かもしれませんが、何かの参考になればと思い記事を書きました。
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
⇒JavaScript jQueryを使った checkbox の操作方法
-
今回は、今更ながら each の使い方を再考してみます。
each には2種類の使い方があります。 ひとつは jQuery の セレクタ に対してのものと、もう一つは配列やコレクションやオブジェクトに対するものです。
共にそれぞれが内部に持っているものに対して、順次処理を行うことでは似た感じです。
先ずは jQuery の セレクタ に対しての each の書き方ですが、以下の様になります。$('セレクタ名').each(function([index[, element]]) { // index : 各要素のインデックス番号(値は 0 から始まる) // element : 繰り返し処理中の要素を参照 各要素に関する処理; });
これを使った例として以下に HTML ファイル側のソースを示します。■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"> //TEST関数 function testEach() { $('li').each(function(index, element) { console.log(index + ':' + $(element).text()); }); } </script> </head> <body> <h2>test each 1</h2> <li>ラベル1</li> <li>ラベル2</li> <li>ラベル3</li> <br /> <button onclick="javascript:testEach();">TEST</button> </body> </html>
9行目の .each(function(index, element) { ... }); で each 処理を行っています。
処理は要素の index と element で取得できるテキスト値をコンソールに出力しています。(以下の様になります。)0: ラベル1 1: ラベル2 2: ラベル3
each の処理で index と element を記述せずに以下の様にしても、同様な処理が行えます。
以下の例では element の代わりに this を使っています。 特に index を使う必要が無ければ、いつもは this で記述することが多いです。
この this ですが、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"> //TEST関数 function testEach() { $('li').each(function() { // index , elemnt を省略 console.log($(this).text()); }); } </script> </head> <body> <h2>test each 2</h2> <li>ラベル1</li> <li>ラベル2</li> <li>ラベル3</li> <br /> <button onclick="javascript:testEach();">TEST</button> </body> </html>
この例から少し発展させて <li> 要素がクリックされた時に、クリックされたラベル以外の文字列を表示する様に変更します。<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(){ // li 要素のクリック時の処理 $('li').on('click', function() { // クリック時の[this]退避 var this_click = this; // li 要素の全てを処理 $('li').each(function() { if (this_click != this) { // クリック以外のラベル console.log($(this).text()); } }); }); }); </script> </head> <body> <h2>test each 2</h2> <li>ラベル1</li> <li>ラベル2</li> <li>ラベル3</li> </body> </html>
それでは、配列やコレクションやオブジェクトに対する each について説明します。 構文的には以下の様になります。
$.each(collection, function(index, value) { // collection : each処理の対象となる配列またはオブジェクト // function : 各繰り返し処理で実行したい関数を指定 // index : 配列であればインデックス番号、オブジェクトであればkey // value : 繰り返し処理中の値 各要素に関する処理; });
$.each で宣言された関数の中で、引数である index, value を利用することが出来ます。
以下に、配列データとオブジェクトの中身を全てコンソールに出力する例を示します。
■配列やコレクションやオブジェクトに対する 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"> //TEST関数 function testEach() { // 配列 var arr = ['A001', 'B002', 'C003']; $.each(arr, function(index, value) { console.log('index(' + index + ') = ' + value); }); // オブジェクト var obj = { 'key1' : 'A001', 'key2' : 'B002', 'key3' : 'C003' }; $.each(obj, function(index, value) { console.log('index(' + index + ') = ' + value); }); } </script> </head> <body> <h2>test each 5</h2> <button onclick="javascript:testEach();">TEST</button> </body> </html>
コンソールの出力は以下の様になります。オブジェクトの場合 index にキーが渡されることがわかります。index(0) = A001 index(1) = B002 index(2) = C003 index(key1) = A001 index(key2) = B002 index(key3) = C003
今回の例でも、 index, value を記述せずに this を使うことが出来ます。
■配列やコレクションやオブジェクトに対する 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"> //TEST関数 function testEach() { // 配列 var arr = ['A001', 'B002', 'C003']; $.each(arr, function() { console.log(this.valueOf()); // [PrimitiveValue]の値 //console.log(this + ""); // この方法でもOK }); // オブジェクト var obj = { 'key1' : 'A001', 'key2' : 'B002', 'key3' : 'C003' }; $.each(obj, function() { console.log(this.valueOf()); // [PrimitiveValue]の値 //console.log(this + ""); }); } </script> </head> <body> <h2>test each 6</h2> <button onclick="javascript:testEach();">TEST</button> </body> </html>
$.each の中の this にはオブジェクト型で渡されるため、その中の値を取得するには this.valueOf とします。
この方法は面倒なので、一つ前の index, value を用いる方法が良いと思います。
最後に、繰返し処理のなかで for 文の break, continue の様な処理に付いて説明します。
以下の例では、6件の配列データを宣言し、2番目までは処理を continue し、5番目以降で break する処理を行います。
■配列に対する each 処理での break, continue 例
<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"> //TEST関数 function testEach() { // 6件の配列 var arr = ['A001', 'B002', 'C003', 'D004', 'E005', 'F006']; $.each(arr, function(index, value) { // indexは[0]から始まることに注意!! if (index <= 1) { // 2番目までは処理をcontinue return true; } if (index >= 4) { // 5番目以降でbreak return false; } console.log('index(' + index + ') = ' + value); }); } </script> </head> <body> <h2>test each 6</h2> <button onclick="javascript:testEach();">TEST</button> </body> </html>
コンソールの出力は以下の様になります。index(2) = C003 index(3) = D004
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript 関数の宣言について(function)
⇒JavaScript jQueryでJavascriptファイルの動的に変更する方法
-
crypto-js を使って文字列(データ)を暗号化、及び復号化を行う方法を記したいと思います。
このモジュールの中の AES(Advanced Encryption Standard) の機能を使って処理を行います。
AES とはなにかと言いますと Advanced Encryption Standard の略で、無線LANなどの通信データの暗号化に用いられるアルゴリズムの様です。
通信の送信側と受信側で、同じ暗号鍵を用いて暗号化と復号を行います。
crypto-js は以下のサイトにありますので、リンクをソースに貼れば参照できます。
⇒https://cdnjs.com/libraries/crypto-js
さて実際に crypto-js を使う例を示します。
暗号化するには CryptoJS.AES.encrypt 、復号化するには CryptoJS.AES.decrypt メソッドを使います。<html> <head> <meta charset="utf-8"> <title>test crypto-js 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> <script type="text/javascript"> //暗号・復号テスト function crypto() { var src = "12345ABCDE"; var des = ""; //暗号化キー:"testkey"を用いて暗号化 des = CryptoJS.AES.encrypt(src, "testkey"); console.log('Source :' + src); console.log('Crypto :' + des); //暗号化キー:"testkey"を用いて復号化 var decrypted = CryptoJS.AES.decrypt(des, "testkey"); console.log('Decrypt:' + decrypted); } </script> </head> <body> <h2>test crypto-js 1</h2> <button onclick="crypto();">crypto</button> </body> </html>
これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。
source:12345ABCDE Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0= decrypted:31323334354142434445
復号化した文字列をよく見ると HEX文字列となっています。
このままでは使えないので crypto-js がもつ uft8 用のエンコーダで文字列にしてやります。
上のソースに1行追加して以下の様になります。
<html> <head> <meta charset="utf-8"> <title>test crypto-js 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> <script type="text/javascript"> //暗号・復号テスト function crypto() { var src = "12345ABCDE"; var des = ""; //暗号化キー:"testkey"を用いて暗号化 des = CryptoJS.AES.encrypt(src, "testkey"); console.log('Source :' + src); console.log('Crypto :' + des); //暗号化キー:"testkey"を用いて復号化 var decrypted = CryptoJS.AES.decrypt(des, "testkey"); console.log('Decrypt:' + decrypted); var decrypt = decrypted.toString(CryptoJS.enc.Utf8); console.log('utf8 :' + decrypt); } </script> </head> <body> <h2>test crypto-js 1</h2> <button onclick="crypto();">crypto</button> </body> </html>
これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。source:12345ABCDE Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0= decrypted:31323334354142434445 utf8 :12345ABCDE
■オブジェクトを暗号化・復号化の処理
上記の例では文字列を暗号化・復号化することは出来ました。 そこでこの処理を拡張して、オブジェクトデータについても暗号化・復号化させてみます。
オブジェクトを先ず JSON 文字列として作成し、それを暗号化します。 復号の場合には逆の考えですので、復号化された JSON 文字列をオブジェクトとして戻します。
<html> <head> <meta charset="utf-8"> <title>test crypto-js 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> <script type="text/javascript"> //暗号・復号テスト function crypto() { //オブジェクト宣言 var obj = { data1: "12345ABCDE", data2: "あいうえお", data3: 12345 } //JSON文字列に変換 var src = JSON.stringify(obj); //暗号化 var des = CryptoJS.AES.encrypt(src, "testkey"); console.log('source:' + src); console.log('Crypto:' + des); //復号化 var decrypted = CryptoJS.AES.decrypt(des, "testkey"); //UTF-8文字列変換 var decrypt = decrypted.toString(CryptoJS.enc.Utf8); console.log('utf8 :' + decrypt); //オブジェクトに戻す var objDes = JSON.parse(decrypt); console.log('obj.data1:' + objDes.data1); console.log('obj.data2:' + objDes.data2); console.log('obj.data3:' + objDes.data3); } </script> </head> <body> <h2>test crypto-js 3</h2> <button onclick="crypto();">crypto</button> </body> </html>
これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。
確かにオブジェクトが暗号化されて、その後復号化しオブジェクトの各項目を参照できることが分かります。source:{"data1":"12345ABCDE","data2":"あいうえお","data3":12345} Crypto:U2FsdGVkX19pPVoeRzc/ZjN1jKNIzi13I543cTbiNhMQ4Q3Tnn6AD0GILW1a4LCoN3b8Zh5qhbCul1RTymiwPMZFkiIGlweGu0vukHq2YD8= utf8 :{"data1":"12345ABCDE","data2":"あいうえお","data3":12345} obj.data1:12345ABCDE obj.data2:あいうえお obj.data3:12345
関連する記事
⇒JavaScript Stringオブジェクトの使い方(ハマりそうな点)
⇒JavaScript Dateオブジェクトの使い方(Date)
⇒JavaScript Dateオブジェクト(Date)を操作する関数を作成
-
HTMLタグの入れ替ることにより、表示内容を変えることは特に難しくはありません。
以下の例では div タグの中の p タグを入れ替えています。 JQuery の remove メソッドで対象となるタグを全て削除し append メソッドでタグを挿入し、テキストを変更するものです。
remove メソッドは指定したセレクタ(タグ)そのものも削除するので注意が必要です。 なお、中身だけ削除する場合は empty メソッドを使います。
<html> <head> <meta charset="utf-8"> <title>test tag exchg 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //変更1 function exchg1() { $("#main p").remove(); var tag = ""; tag += "<p>"; tag += " 変更11111"; tag += "</p>"; $("#main").append(tag); } //変更2 function exchg2() { $("#main p").remove(); var tag = ""; tag += "<p>"; tag += " 変更2222"; tag += "</p>"; $("#main").append(tag); } </script> </head> <body> <h2>test tag exchg 1</h2> <div id="main"> <p> test initial document </p> </div> <br /> <button onclick="exchg1();">Exchange1</button> <button onclick="exchg2();">Exchange2</button> </body> </html>
remove メソッドを empty メソッドに変更した例を以下に記します。
■empty メソッドでの処理
以下の例では p タグの中身を削除して append メソッドで文字列を追加しています。<html> <head> <meta charset="utf-8"> <title>test tag exchg 1-1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //変更1 function exchg1() { $("#main p").empty(); var tag = ""; tag += " 変更11111"; $("#main p").append(tag); } //変更2 function exchg2() { $("#main p").empty(); var tag = ""; tag += " 変更2222"; $("#main p").append(tag); } </script> </head> <body> <h2>test tag exchg 1-1</h2> <div id="main"> <p> test initial document </p> </div> <br /> <button onclick="exchg1();">Exchange1</button> <button onclick="exchg2();">Exchange2</button> </body> </html>
■タグの書き換えで連続的な処理を行う様にする
タグの書き換えは静的なテキストだけでは無く、その他のタグを含む文字列を置き換えることができます。
以下の例では div タグの中の p タグにボタンタグを入れ替えています。 ボタンタグを動的に作成しても onclick イベントは利く様です。
最初の「Exchange0」ボタンクリックで「Exchange1」「Exchange2」のボタンが現れそれぞれのクリックで以下の様に処理が進みます。
「Exchange1」⇒「Exchange1_1」⇒「Exchange0」(画面が最初の表示)
「Exchange2」⇒「Exchange2_1」⇒「Exchange0」(画面が最初の表示)
<html> <head> <meta charset="utf-8"> <title>test tag exchg 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //変更0 function exchg0() { $("#main p").empty(); var tag = ""; tag += " <button onclick='exchg1();'>Exchange1</button>"; tag += " <button onclick='exchg2();'>Exchange2</button>"; $("#main p").append(tag); } //変更1 function exchg1() { $("#main p").empty(); var tag = ""; tag += " <button onclick='exchg1_1();'>Exchange1_1</button>"; $("#main p").append(tag); } //変更1_1 function exchg1_1() { $("#main p").empty(); var tag = ""; tag += " 変更11111<br />"; tag += " <button onclick='exchg0();'>Exchange0</button>"; $("#main p").append(tag); } //変更2 function exchg2() { $("#main p").empty(); var tag = ""; tag += " <button onclick='exchg2_1();'>Exchange2_1</button>"; $("#main p").append(tag); } //変更2_1 function exchg2_1() { $("#main p").empty(); var tag = ""; tag += " 変更22222<br />"; tag += " <button onclick='exchg0();'>Exchange0</button>"; $("#main p").append(tag); } </script> </head> <body> <h2>test tag exchg 2</h2> <div id="main"> <p> test initial document <br /> <button onclick="exchg0();">Exchange0</button> </p> </div> </body> </html>
以上のことから HTML の中に何も無くても、順次 Javascript プログラムから処理を行うタグを条件に合わせて 変化させることができます。
結果 Javascript プログラムを使ってWEBページを動的に変化させることが出来る様になります。関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript jQueryの使い方(セレクタ)その3・セレクタの存在確認
⇒JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法