[2020/05/20] JavaScript jQueryでモーダルウインドウ風の表示をする方法(css:display, css:z-index, fadeIn, fadeOut) (No.176)
[2020/05/19] JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録2(changesデータにレコードを反映し save) (No.175)
[2020/05/13] JavaScript Stringオブジェクトの使い方(ハマりそうな点) (No.171)
[2020/05/12] JavaScript Dateオブジェクト(Date)を操作する関数を作成 (No.170)
-
前回の w2ui.grid のセルの編集設定の方法では、動作的に行選択の状態でした。 今回はセルの選択をエクセルの様にできるのですが、その説明をします。
セルの選択方法を設定するプロパティである selectType を cell に指定します。
selectType のデフォルトは row なので、指定しなければ行選択になります。
前回の以下のページの HTML にこの selectType プロパティを追加します。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・セルの編集設定(editable)<!DOCTYPE html> <html> <head> <title>w2ui Grid - editable</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 600px; height: 240px;"></div> <br> <button class="w2ui-btn" onclick="showChanged()">変更データ表示</button> <script> // 性別データ var arrSex = [ {id:1, text:"男性"}, {id:2, text:"女性"} ]; $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', selectType: "cell", columns: [ { field: 'recid' , caption: 'ID' , size: '50px' , attr: "align=center", frozen: true }, { field: 'check' , caption: '対象' , size: '60px' , editable: { type:"checkbox" } }, { field: 'name' , caption: '名前' , size: '100px' , editable: { type:"text" } }, { field: 'age' , caption: '年齢' , size: '60px' , editable: { type:"int", min: 10, max: 99 } }, { field: 'sex' , caption: '性別' , size: '100px' , editable: { type:"select", items: arrSex } , render: function (record, index, col_index) { var html = ''; for (var idx in arrSex) { if (arrSex[idx].id == this.getCellValue(index, col_index)) { html = arrSex[idx].text; } } return html; } }, { field: 'birth' , caption: '生年月日', size: '100px' , render: 'date:yyyy/mm/dd', editable: { type:"date", format: "yyyy/mm/dd" } }, { field: "height", caption: "身長" , size: "50px" , render : "float:1", editable: { type:"float", min: 1, max: 999.9 } }, { field: "weight", caption: "体重" , size: "50px" , render : "float:1", editable: { type:"float", min: 1, max: 999.9 } } ], records: [ { recid:1, check:true , name:"田中太郎", age:"35", sex:"1", birth:"1985/03/01", height:"170.1", weight:"48.5" }, { recid:2, check:true , name:"田中花子", age:"30", sex:"2", birth:"1990/03/12", height:"160.0", weight:"45.0" }, { recid:3, check:true , name:"山田一郎", age:"20", sex:"1", birth:"2000/03/13", height:"165.1", weight:"58.5" }, { recid:4, check:false, name:"山田二郎", age:"18", sex:"1", birth:"2002/03/24", height:"172.5", weight:"68.2" }, { recid:5, check:true , name:"山田良子", age:"25", sex:"2", birth:"1995/03/25", height:"158.0", weight:"47.0" }, { recid:6, check:false, name:"山本桃子", age:"40", sex:"2", birth:"1980/03/26", height:"162.2", weight:"49.5" }, { recid:7, check:true , name:"山本次郎", age:"44", sex:"1", birth:"1976/03/27", height:"168.5", weight:"62.1" }, { recid:8, check:true , name:"阿部博" , age:"48", sex:"1", birth:"1972/03/28", height:"180.4", weight:"75.2" } ] }); }); function showChanged() { console.log(w2ui['grid'].getChanges()); w2alert('コンソールに変更データを表示しました'); } </script> </body> </html>
これを実行させると以下の様な表示になります。 (セル上でクリックすると、エクセルと似た感じでセルが選択されるはずです)
この HTML ではエクセルの様にコピー&ペーストができるのですが、カラムをずらしたペーストでは問題が生じます。 「身長」と「体重」のカラムを2行分コピーし、「生年月日」の上にアクティブセルを移動してペーストした場合はおかしなことになります。
これを防ぐ方法としては、ペーストイベント時にコピー開始カラムが同じ位置かどうかをチェックします。 同じカラムで無ければ、イベント処理をキャンセルしてやります。
尚、コピーイベント時にはコピー開始カラム位置を退避しておきます。 ペーストイベント時に、このカラム位置が設定してなければコピーイベントを中断します。
■コピー&ペーストイベント処理
onCopy: function(event) { } <引数> ・event:イベント情報が含まれたオブジェクト ・event.text:コピーされたデータがテキストで格納(セル毎は"\t"で、1行が"\n"の区切り記号) onPaste: function(event) { } <引数> ・event:イベント情報が含まれたオブジェクト ・event.column:ペーストするカラム位置 ・event.index :ペーストする行位置 ・event.text :コピーされたデータがテキストで格納(セル毎は"\t"で、1行が"\n"の区切り記号) ※<イベントハンドラの指定> function (event) { // 処理の記述 } <デフォルトの動作をキャンセルする場合> function (event) { event.preventDefault(); // イベント・キャンセル }
■コピー&ペーストイベントを加味した処理
<!DOCTYPE html> <html> <head> <title>w2ui Grid - editable</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 600px; height: 240px;"></div> <br> <button class="w2ui-btn" onclick="showChanged()">変更データ表示</button> <script> // コピーカラム位置 var nCopyColumn = -1; // 性別データ var arrSex = [ {id:1, text:"男性"}, {id:2, text:"女性"} ]; $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', selectType: "cell", columns: [ { field: 'recid' , caption: 'ID' , size: '50px' , attr: "align=center", frozen: true }, { field: 'check' , caption: '対象' , size: '60px' , editable: { type:"checkbox" } }, { field: 'name' , caption: '名前' , size: '100px' , editable: { type:"text" } }, { field: 'age' , caption: '年齢' , size: '60px' , editable: { type:"int", min: 10, max: 99 } }, { field: 'sex' , caption: '性別' , size: '100px' , editable: { type:"select", items: arrSex } , render: function (record, index, col_index) { var html = ''; for (var idx in arrSex) { if (arrSex[idx].id == this.getCellValue(index, col_index)) { html = arrSex[idx].text; } } return html; } }, { field: 'birth' , caption: '生年月日', size: '100px' , render: 'date:yyyy/mm/dd', editable: { type:"date", format: "yyyy/mm/dd" } }, { field: "height", caption: "身長" , size: "50px" , render : "float:1", editable: { type:"float", min: 1, max: 999.9 } }, { field: "weight", caption: "体重" , size: "50px" , render : "float:1", editable: { type:"float", min: 1, max: 999.9 } } ], onCopy: function(event) { // コピーイベント var rng = this.ranges[0]; if (nCopyColumn == -1) { nCopyColumn = rng.range[0].column; //Copy Paste のカラム位置退避 } // 性別カラムの補正 var strRow = "" + event.text; strRow = strRow.replace(/男性/g, "1"); strRow = strRow.replace(/女性/g, "2"); event.text = strRow; }, onPaste: function(event) { // ペーストイベント if (nCopyColumn == -1) { alert("コピーが行われていません。"); // ペースト処理をキャンセル event.preventDefault(); return; } if (nCopyColumn != event.column) { alert("コピー&ペーストは同じカラム位置で行って下さい。"); // ペースト処理をキャンセル event.preventDefault(); return; } //Copy Paste のカラム位置クリア nCopyColumn = -1; }, records: [ { recid:1, check:true , name:"田中太郎", age:"35", sex:"1", birth:"1985/03/01", height:"170.1", weight:"48.5" }, { recid:2, check:true , name:"田中花子", age:"30", sex:"2", birth:"1990/03/12", height:"160.0", weight:"45.0" }, { recid:3, check:true , name:"山田一郎", age:"20", sex:"1", birth:"2000/03/13", height:"165.1", weight:"58.5" }, { recid:4, check:false, name:"山田二郎", age:"18", sex:"1", birth:"2002/03/24", height:"172.5", weight:"68.2" }, { recid:5, check:true , name:"山田良子", age:"25", sex:"2", birth:"1995/03/25", height:"158.0", weight:"47.0" }, { recid:6, check:false, name:"山本桃子", age:"40", sex:"2", birth:"1980/03/26", height:"162.2", weight:"49.5" }, { recid:7, check:true , name:"山本次郎", age:"44", sex:"1", birth:"1976/03/27", height:"168.5", weight:"62.1" }, { recid:8, check:true , name:"阿部博" , age:"48", sex:"1", birth:"1972/03/28", height:"180.4", weight:"75.2" } ] }); }); function showChanged() { console.log(w2ui['grid'].getChanges()); w2alert('コンソールに変更データを表示しました'); } </script> </body> </html>
これを実行させると以下の様な表示になります。 (このままのプログラムではいろいろ不完全ですので、皆さんで手を入れてみて下さい。)
ranges プロパティについて補足説明
上のプログラムの onCopy イベントの中で this.ranges として w2grid['grid'] の ranges プロパティを参照していますが、 この ranges プロパティには選択範囲の情報が入っています。中身は以下の range(範囲) オブジェクトの配列データです。<range(範囲)オブジェクトの定義> range = { name : '', // rangeの名前 range : [], // ※rangeを定義する2次元配列 style : '' // rangeのスタイルプロパティ } <※rangeを定義する2次元配列のオブジェクト定義> { column:n // カラム位置(n:0 ~ ) index :m // 行位置(m:0 ~ ) recid :r // recid値 }
この range(範囲) オブジェクトの配列データの「0」番目のデータに選択領域の情報が格納されています。
以下の画像は選択されて [Ctrl] + [C] キーを押下した時の ranges プロパティの内容を表示しています。
PR -
画面全体が暗くなり、画面の中央にウインドウが表示されるサイトをよく見かけますが、これを実現してみます。
方法自体は難しくなく、ウインドウとなる領域を div タグで表示し、その div 領域を表示・非表示の処理を行います。 (「display」属性を「block」(表示)、または「none」(非表示)に設定します。)
ウインドウの周りに全体的に暗い領域を作るために、上記の div タグをさらにラップする div タグを設けます。
全体の div タグの大きさを画面全体とし、背景色を薄い黒色にします。 ウインドウの div タグは大きさを適当に決め背景色を白色にします。
更に HTML 要素の表示重なりを決める z-index をウインドウの div タグの方を、全体の div タグの z-index より大きい値にします。 こうするとウインドウの div タグが上に表示されます。
今回のデモ HTML ファイル側のソースを以下に示します。■ブロック領域を表示・非表示にすることでモーダルウインドウ風
<html> <head> <meta charset="utf-8"> <title>test modal</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // モーダルウインドウ表示 function displayModal() { $('.modal').css('display', 'block'); } // モーダルウインドウ非表示 function closeModal() { $('.modal').css('display', 'none'); } </script> <style> .modal { display: none; z-index: 1; position: fixed; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); } .modal-window{ z-index: 2; width: 500px; margin: 20% auto; padding: 20px; background-color: white; } </style> </head> <body> <h2>test modal</h2> <button onclick="displayModal();">Display Modal</button> <div class="modal"> <div class="modal-window"> <div class="modal-contents"> <p>これはモーダルウインドウです。</p> <button onclick="closeModal();">Close Modal</button> </div> </div> </div> </body> </html>
上のプログラムで display 属性を設定しているところを fadeIn 、 fadeOut メソッドを使用すれば フェードイン、フェードアウト表示ができます。メソッドの説明は以下の通りです。// フェードイン表示 $('要素').fadeIn([speed], [callback]); // フェードアウト表示 $('要素').fadeOut([speed], [callback]); このメソッドは非表示の要素をフェードイン表示または、表示の要素をフェードアウト表示します。 speed : "slow", "normal", "fast" または時間をミリ秒で指定(デフォルト:"normal") callback: 処理が完了した時の呼び出し関数を指定
関数を以下の様に変更すればできます。// モーダルウインドウ表示 function displayModal() { $('.modal').fadeIn(); } // モーダルウインドウ非表示 function closeModal() { $('.modal').fadeOut(); }
-
以下のページでは save プロパティにPHPプログラムを指定することでデータ登録ができる説明をしました。
⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録(save)
この場合は PHP プログラムにデータの変更された部分のみが $_GET['request']['changes'] に配列データとして格納されます。 渡された $_GET['request']['changes'] に従ってレコード毎に個別に変更カラムデータを再設定しています。
今回は $_GET['request']['changes'] の内容を1レコード全てのカラムデータとして渡すことで PHP では1レコードを一括で処理する様に変更します。
尚、最初の読込ファイルは以下の様に以前のものと同様です。■JSON 形式のテストデータ(data-get.json)
{ records: [ { recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "2020/03/01" }, { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" }, { recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" }, { recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "2020/03/24" }, { recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" }, { recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "2020/03/26" }, { recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" }, { recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2020/03/28" } ] }
それでは records 部分を url にて JSON ファイルを指定し、登録処理を追加したソースを示します。
■url プロパティによる JSON ファイルを指定と登録処理を追加について
<!DOCTYPE html> <html> <head> <title>w2ui Grid-2 url2</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" /> <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="./dist/w2ui-1.5.rc1.js"></script> </head> <body> <div id="grid" style="width: 500px; height: 200px;"></div> <button onclick="save();">save</button> <script> $(function () { // id="grid" へのグリッド設定 $('#grid').w2grid({ name: 'grid', method: 'GET', columns: [ { field: 'recid', caption: 'ID', size: '50px' }, { field: 'fname', caption: 'First Name', size: '30%' , editable: { type: 'text' } }, { field: 'lname', caption: 'Last Name' , size: '30%' , editable: { type: 'text' } }, { field: 'email', caption: 'Email' , size: '40%' , editable: { type: 'text' } }, { field: 'sdate', caption: 'Start Date', size: '100px' } ], url: { get: 'data-get.json', save: 'saverow.php' } }); }); // 登録関数 function save() { //レコード配列初期化 var rows = new Array(); //レコード分の処理 for(i = 0; i < w2ui["grid"].records.length; i++) { //'recid' で1レコード取得 var rec = w2ui["grid"].get(w2ui["grid"].records[i]['recid']); if (rec) { //レコードが存在する場合 if (rec.w2ui) { //「w2ui」が存在する場合 if (rec.w2ui.changes) { //変更箇所が存在する場合、レコードデータに設定 $.extend(rec, rec.w2ui.changes); //オブジェクト[rec.w2ui]の削除 delete rec.w2ui; //配列に追加 rows.push(rec); } } } } //[save]の機能を使って得点計算を起動(CallBack:onSave) w2ui["grid"].request("save", { changerows : rows }); } </script> </body> </html>
今回の HTML ファイルには登録用のボタンを設け、そのクリックイベント処理用の登録関数を作成しました。
この登録関数の処理は grid の get は1レコード分のデータを取得できますが w2ui プロパティ内の changes プロパティに変更カラム情報が入っています。 このプロパティが存在していれば、そのレコードは変更された証拠となります。 よってこの情報を取得したレコード情報のプロパティに上書きし、登録用レコード配列に追加します。
w2ui.changes プロパティですが今回の w2ui のバージョンが w2ui-1.5.rc1.js なのでこの様になりました。 (w2ui-1.4.js では w2ui.changes ではなく changes 直で良かったようですが)
最後に request メソッドで grid の[save]機能を呼出します。request メソッドの定義は以下の通りです。request( cmd, [params, [url, [callBack]]]) <パラメータ> ・cmd :string コマンド名("POST"または"GET")を指定します。 ・params :object 送信する追加パラメータのオブジェクトを指定します。 ・url :string リクエストURLを指定します。 ・callBack:function コールバック関数を指定します。
■saverow.php プログラム
<?php // PHP 5.5.0 未満のため if (!function_exists('array_column')) { // 「array_column」宣言 function array_column($arr, $strKey) { $arrOut = array(); for ($i = 0; $i <= count($arr); $i++) { if (isset($arr[$i][$strKey])) { $arrOut[] = $arr[$i][$strKey]; } } return $arrOut; } } // リクエスト取得 $arrReq = json_decode($_GET['request'], true); $strJsonFile = 'data-get.json'; // 元のデータJSONファイル $strJson = file_get_contents($strJsonFile); $arrData = json_decode($strJson, true); // 動作による処理 switch ($arrReq['cmd']) { case 'save': // 変更データ存在チェック if (!isset($arrReq['changerows']) || count($arrReq['changerows']) == 0) { break; } // recid列の配列(KEY:0からの連番) $arrRecid = array_column($arrReq['changerows'], 'recid'); // 新規配列に元データと変更データから追加処理 $arrNew = array(); foreach ($arrData['records'] as $value) { $i = array_search($value["recid"], $arrRecid); if ($i === false) { // 変更が無い場合 $arrNew['records'][] = $value; } else { // 変更が有った場合 $arrNew['records'][] = $arrReq['changerows'][$i]; } } $arrNew['records'] = array_values($arrNew['records']); $arrNew['total'] = count($arrNew['records']); // JSON文字列生成 $strJson = json_encode($arrNew, JSON_UNESCAPED_UNICODE); // テキストファイル書込(data-get.json) file_put_contents($strJsonFile , $strJson); break; } ?>
この PHP プログラムでは $_GET['request']['changerows'] で渡される変更レコードデータを、元のレコードデータとマージする様な処理を行います。
最初の HTML ファイルを実行し、以下の図の Save ボタンをクリックすると data-get.json が変更され、 ページの再読込を行うと変更した値になるはずです。
-
JavaScript には文字列を取り扱う Stringオブジェクト が存在します。
この Stringオブジェクト は文字列リテラル(直値)を生成する場合は、単一引用符または二重引用符で囲みます。 Stringオブジェクト を直接利用することでも生成できます。 (普通使う場合には最初の方法が多いと思います。)
文字列を扱う場合にとくに多いのは文字列の連結ではないかと思います。 文字列の連結を行う演算子は「+」を使い、これを文字列連結演算子と言うそうです。
数値の計算で使う加算用の演算子と同じものなので、変数の中身が文字列なのかそうで無いのかを注意が必要です。
■Stringオブジェクトの文字列連結について
数値データと文字列を「+」で連結すると数値データは文字列に変換されて、連結文字列と連結されます。
以下の例では数値データの後ろから文字列を連結する場合と、前から文字列を連結する場合を示します。
結果を見れば当然、全く異なる文字列として表示されます。
さらに数値データに対して代入演算子で連結をしていますが、この場合も文字列との加算なので、 最初に数値データが文字列に変換されてから連結処理が行われます。
Stringオブジェクトの文字列連結の例
// 数値データ var num1 = 100; // 数値データと文字列の連結 var str1 = num1 + "123"; // 文字列と数値データの連結 var str2 = "123" + num1; console.log("str1 = " + str1); console.log("str2 = " + str2); // 数値データに文字列を代入加算(連結) num1 += str2; console.log("num1 = " + num1);
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
str1 = 100123 str2 = 123100 num1 = 100123100
このことは、他の言語とは処理が異なるのでハマりやすい点です。 以下によく似たことを PHP で行ってみました。
PHPの文字列連結の例
<?php // 数値データ $num1 = 100; // 数値データと文字列の連結 $str1 = $num1 + "123"; // 文字列と数値データの連結 $str2 = "123" + $num1; echo("\$str1 = " . $str1 . "<br />\n"); echo("\$str2 = " . $str2 . "<br />\n"); // 数値データに文字列を代入加算(連結) $num1 += $str2; echo("\$num1 = " . $num1 . "<br />\n"); // 数値として変換できないものを加算 $str1 = 1000 + "a123a"; echo("\$str1 = " . $str1 . "<br />\n"); $str1 = (int)"a123a"; echo("\$str1 = " . $str1 . "<br />\n"); ?>
結果をブラウザで見ると以下の様になります。 PHP では算術演算を行う時は文字列を数値に変換して処理します。数値に変換ができなかった場合は「0」が対象の値となります。
$str1 = 223 $str2 = 223 $num1 = 323 $str1 = 1000 $str1 = 0
更に VB.NET で行ってみました。
VB.NETの文字列連結の例
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click '// 数値データ Dim num1 = 100 '// 数値データと文字列の連結 Dim str1 = num1 + "123" '// 文字列と数値データの連結 Dim str2 = "123" + num1 Console.WriteLine("str1 = " & str1) Console.WriteLine("str2 = " & str2) '// 数値データに文字列を代入加算(連結) num1 += str2 Console.WriteLine("num1 = " & num1) '// 数値として変換できないものを加算 str1 = 1000 + "a123a" 'ここでエラー発生!! Console.WriteLine("$str1 = " & str1) str1 = CInt("a123a") Console.WriteLine("$str1 = " & str1) End Sub
VisualStudio の「出力」ウインドウに以下の様な表示がされ、16行目でエラーで中断します。
str1 = 223 str2 = 223 num1 = 323 型 'System.InvalidCastException' の初回例外が Microsoft.VisualBasic.dll で発生しました
※いろんな言語によって仕様が異なるのでそれぞれに合わせなければなりませんが、 JavaScript は言語としてはシバリが緩いので注意が必要です。
また、最初の変数の型宣言とは異なるものを上書きしてもOKなため、 同じ変数を別のデータ型で使うことは控えた方がいいと思います。
■Stringオブジェクトの文字列比較について
文字列同士の比較はそれぞれの文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。
注意するのは文字列と数値を比較する場合で、特に以下の様に「等しい(==)」「等しくない(!=)」かの比較の場合です。 (「==」「!=」の書き方はC言語の場合と似た感じです。)
厳密では無い(ゆるい感じ)比較
// 等価比較 if (123 == '123') { console.log("等しい"); } else { console.log("等しくない"); } // 等価比較 if ('123' == 123) { console.log("等しい"); } else { console.log("等しくない"); } // 不等価比較 if (123 != '123') { console.log("等しい"); } else { console.log("等しくない"); } // 等価比較 if ('123' != 123) { console.log("等しい"); } else { console.log("等しくない"); }
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
この比較演算子は厳密な比較では無く、数値と文字列を比較する場合は文字列を数値に変換してから比較する様です。等しい 等しい 等しくない 等しくない
比較式の前後のデータ型を厳密に比較する演算子を用いてみます。これはPHPと同じように「===」「!==」を使います。
厳密な比較
// 等価比較 if (123 === '123') { console.log("等しい"); } else { console.log("等しくない"); } // 等価比較 if ('123' === 123) { console.log("等しい"); } else { console.log("等しくない"); } // 不等価比較 if (123 !== '123') { console.log("等しい"); } else { console.log("等しくない"); } // 等価比較 if ('123' !== 123) { console.log("等しい"); } else { console.log("等しくない"); }
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです) 比較演算子の左右のデータのデータ型を含めて比較する為、全ての比較は一致しない結果になります。
等しくない 等しくない 等しい 等しい
-
Dateオブジェクト のメソッドの文字列化関数では使い勝手が悪いので、書式を使って文字列を返す関数を作成してみました。 この関数ですが VB.NET の Date型 の ToString("yyyy/MM/dd") の様な感じを再現しました。
また VB.NET と同様に日付の年数、月数、日数を加算する関数 addYears() , addMonths() , addDays() を作成しました。- Dateオブジェクトから書式を使って文字列を返す関数
- Dateオブジェクトの年数を加算する関数 addYears()
- Dateオブジェクトの月数を加算する関数 addMonths()
- Dateオブジェクトの日数を加算する関数 addDays()
■Dateオブジェクトから書式を使って文字列を返す関数
/* Dateオブジェクトの書式指定による文字列変換 関数名:cnvDateToString(dateObj, strFormat) 引き数:dateObj Dateオブジェクト :strFormat 書式指定(年:YYYY,月:MM,日:DD,時:HH,分:MI,秒:SS) ex:"YYYY/MM/DD HH:MI:SS" 戻り値:変換された文字列 */ function cnvDateToString(objDate, strFormat) { // 年月日時分秒を文字列化 var strYear = "" + objDate.getFullYear(); // 年 var strMonth = ('0' + (objDate.getMonth() + 1)).substr(-2); // 月 var strDate = ('0' + objDate.getDate()).substr(-2); // 日 var strHour = ('0' + objDate.getHours()).substr(-2); // 時 var strMinute = ('0' + objDate.getMinutes()).substr(-2); // 分 var strSecond = ('0' + objDate.getSeconds()).substr(-2); // 秒 var strRet = "" + strFormat; // 各書式文字列の置換 strRet = strRet.replace("YYYY", strYear); strRet = strRet.replace("MM", strMonth); strRet = strRet.replace("DD", strDate); strRet = strRet.replace("HH", strHour); strRet = strRet.replace("MI", strMinute); strRet = strRet.replace("SS", strSecond); // 変換文字列 return strRet; }
この関数の実行例を以下に示します。
var objDate = new Date("2020/05/08 13:59:58"); console.log("YYYY/MM/DD HH:MI:SS ==> " + cnvDateToString(objDate, "YYYY/MM/DD HH:MI:SS")); console.log("YYYY/MM/DD ==> " + cnvDateToString(objDate, "YYYY/MM/DD")); console.log("HH:MI:SS ==> " + cnvDateToString(objDate, "HH:MI:SS")); console.log("MM/DD ==> " + cnvDateToString(objDate, "MM/DD"));
ブラウザの開発環境のコンソールを見ると以下の様になります。
この関数は各データの先頭「0」を強制的に付加していますので、 「0」無しの書式を追加するには別の書式文字列と、それに設定するデータ変数を作成する必要があります。YYYY/MM/DD HH:MI:SS ==> 2020/05/08 13:59:58 YYYY/MM/DD ==> 2020/05/08 HH:MI:SS ==> 13:59:58 MM/DD ==> 05/08
■Dateオブジェクトの年数を加算する関数 addYears()
/* Dateオブジェクトの年数加算 関数名:addYears(dateSrc, nYears) 引き数:dateSrc Dateオブジェクト :nYears 年数加算値 戻り値:年数を加算されたDateオブジェクト */ function addYears(dateSrc, nYears) { // 新規Dateオブジェクトの生成 var dateDes = new Date(dateSrc.getTime()); // 元の年に加算 var nYear = dateSrc.getFullYear() + nYears; // 年再設定 dateDes.setFullYear(nYear); // 新規Dateオブジェクトを戻す return dateDes; }
この関数の実行例を以下に示します。
var dateOrg; var dateDes; // 翌年 dateOrg = new Date("2020/05/01"); dateDes = addYears(dateOrg, 1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD")); // 前年(うるう年では無い) dateOrg = new Date("2020/02/29"); dateDes = addYears(dateOrg, -1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
2020/05/01 ==> 2021/05/01 2020/02/29 ==> 2019/03/01
■Dateオブジェクトの月数を加算する関数 addMonths()
/* Dateオブジェクトの月数加算 関数名:addMonths(dateSrc, nMonths) 引き数:dateSrc Dateオブジェクト :nMonths 月数加算値 戻り値:月数を加算されたDateオブジェクト */ function addMonths(dateSrc, nMonths) { // 新規Dateオブジェクトの生成 var dateDes = new Date(dateSrc.getTime()); // 元の月に加算 var nMonth = dateSrc.getMonth() + nMonths; // 月再設定 dateDes.setMonth(nMonth); // 新規Dateオブジェクトを戻す return dateDes; }
この関数の実行例を以下に示します。
var dateOrg; var dateDes; // 翌月 dateOrg = new Date("2020/05/01"); dateDes = addMonths(dateOrg, 1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD")); // 前月(4/30) dateOrg = new Date("2020/05/01"); dateDes = addMonths(dateOrg, -1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD")); // 前月(前年) dateOrg = new Date("2020/01/01"); dateDes = addMonths(dateOrg, -1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
2020/05/01 ==> 2020/06/01 2020/05/01 ==> 2020/04/01 2020/01/01 ==> 2019/12/01
■Dateオブジェクトの日数を加算する関数 addDays()
/* Dateオブジェクトの日付加算 関数名:addDays(dateSrc, nDays) 引き数:dateSrc Dateオブジェクト :nDays 日付加算値 戻り値:日付を加算されたDateオブジェクト */ function addDays(dateSrc, nDays) { // 新規Dateオブジェクトの生成 var dateDes = new Date(dateSrc.getTime()); // 元の日付に加算 var nDate = dateSrc.getDate() + nDays; // 日付再設定 dateDes.setDate(nDate); // 新規Dateオブジェクトを戻す return dateDes; }
この関数の実行例を以下に示します。
var dateOrg; var dateDes; // 翌日 dateOrg = new Date("2020/05/01"); dateDes = addDays(dateOrg, 1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD")); // 前日(4/30) dateOrg = new Date("2020/05/01"); dateDes = addDays(dateOrg, -1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD")); // 前日(前年12/31) dateOrg = new Date("2020/01/01"); dateDes = addDays(dateOrg, -1); console.log(cnvDateToString(dateOrg, "YYYY/MM/DD") + " ==> " + cnvDateToString(dateDes, "YYYY/MM/DD"));
ブラウザの開発環境のコンソールを見ると以下の様になります。(この表示はFirefoxです)
2020/05/01 ==> 2020/05/02 2020/05/01 ==> 2020/04/30 2020/01/01 ==> 2019/12/31