JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/01/30] [PR] (No.)
[2020/05/19] JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録２（changesデータにレコードを反映し save） (No.175)
[2020/05/13] JavaScript Stringオブジェクトの使い方（ハマりそうな点） (No.171)
[2020/05/12] JavaScript Dateオブジェクト（Date）を操作する関数を作成 (No.170)
[2020/05/11] JavaScript Dateオブジェクトの使い方（Date） (No.169)
[2020/05/02] JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化（タイトルの2行表示） (No.168)

≪ [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] ≫

- 2025/01/30
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2020/05/19

JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録２（changesデータにレコードを反映し save）

以下のページでは 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
0CM

- 2020/05/13
JavaScript Stringオブジェクトの使い方（ハマりそうな点）
JavaScript には文字列を取り扱う Stringオブジェクト が存在します。
この Stringオブジェクト は文字列リテラル（直値）を生成する場合は、単一引用符または二重引用符で囲みます。 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 . " \n"); echo("\$str2 = " . $str2 . " \n"); // 数値データに文字列を代入加算（連結） $num1 += $str2; echo("\$num1 = " . $num1 . " \n"); // 数値として変換できないものを加算 $str1 = 1000 + "a123a"; echo("\$str1 = " . $str1 . " \n"); $str1 = (int)"a123a"; echo("\$str1 = " . $str1 . " \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です）比較演算子の左右のデータのデータ型を含めて比較する為、全ての比較は一致しない結果になります。

等しくない等しくない等しい等しい
- JavaScript
- 0CM

2020/05/12

JavaScript Dateオブジェクト（Date）を操作する関数を作成

Dateオブジェクト のメソッドの文字列化関数では使い勝手が悪いので、書式を使って文字列を返す関数を作成してみました。この関数ですが VB.NET の Date型 の ToString("yyyy/MM/dd") の様な感じを再現しました。
また VB.NET と同様に日付の年数、月数、日数を加算する関数 addYears() , addMonths() , 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

JavaScript
0CM

2020/05/11

JavaScript Dateオブジェクトの使い方（Date）

JavaScript には日付用のデータ型がありませんが、その代わりとして Dateオブジェクト が存在します。
この Dateオブジェクト は日付の設定、取得、操作を行うためのメソッドを持っていますのでそれをプログラムから利用できます。尚 Dateオブジェクト にはプロパティがありません。

Dateオブジェクト はUnixタイムスタンプが 1970年1月1日 00:00:00 からの秒の数値であるのと同様に、ミリ秒の数値で日付を格納しています。

■Dateオブジェクトのコンストラクタについて

// 年,月,日,時,分,秒,ミリ秒 を個別に指定
objDate = new Date(yead, month [, day [, hour [, min [, sec [, milisec] ] ] ] ]);
// Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定
objDate = new Date(unixtime);
// 文字列で時刻を指定
objDate = new Date(string);
// 引数無しは現在時刻
objDate = new Date();

上記の4種類の Dateオブジェクト の生成方法があります。それぞれの例を順次以下に示します。

■年,月,日,時,分,秒,ミリ秒を個別に指定

    objDate = new Date(2020, 4);
    console.log(objDate);
    objDate = new Date(2020, 4, 10);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13, 59);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13, 59, 59);
    console.log(objDate);
    objDate = new Date(2020, 4, 10, 13, 59, 59, 150);
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
尚、月の指定は 1月～12月が 0 ～ 11 で設定しますので注意が必要です。

Date Fri May 01 2020 00:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 00:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:00:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:00 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)
Date Sun May 10 2020 13:59:59 GMT+0900 (日本標準時)

■Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定

    // 1日のミリ秒
    var dateMilisec = 24 * 60 * 60 * 1000;
    // 2020年1月1日までのミリ秒
    var allMilisec = 50 * 365 * dateMilisec + 12 * dateMilisec;
    // Dateオブジェクト
    var objDate = new Date(allMilisec);
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

Date Wed Jan 01 2020 09:00:00 GMT+0900 (日本標準時)

■文字列で時刻を指定

    var objDate;

    objDate = new Date("2020-05-08T13:59:59");
    console.log(objDate);
    objDate = new Date("2020/05/08 13:59:59");
    console.log(objDate);
    objDate = new Date("05/08/2020 23:59:59");
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）

Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Date Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Date Fri May 08 2020 23:59:59 GMT+0900 (日本標準時)

■引数無しは現在時刻

    // 引数無し
    var objDate = new Date();
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
尚、この実行は 2020年5月11日に行いました。

Date Mon May 11 2020 16:41:40 GMT+0900 (日本標準時)

■Dateオブジェクトのメソッドについて

Dateオブジェクト のメソッドは下記の接頭語の付いたものが在りそれぞれに分類されます。

■「get」メソッド:Dateオブジェクトの日時等の取得メソッド

    // Dateオブジェクト
    var objDate = new Date(2020, 5, 10, 13, 59, 50, 150);
    var str = "";
    str += objDate.getFullYear();           // 年(1900 年以降の年)
    str += "/" + (objDate.getMonth() + 1);  // 月(0 〜 11 )
    str += "/" + objDate.getDate();         // 日(1 〜 31 )
    str += " " + objDate.getHours();        // 時(0 〜 23)
    str += ":" + objDate.getMinutes();      // 分(0 〜 59)
    str += ":" + objDate.getSeconds();      // 秒(0 〜 59)
    str += "." + objDate.getMilliseconds(); // ミリ秒(0 〜 999)
    console.log(str);

ブラウザの開発環境のコンソールを見ると以下の様になります。

2020/5/10 13:59:50.150

尚、月日時分秒に先頭ゼロを付加する場合は以下の様にします。

    // 2020/05/08 09:05:06.050 の設定
    objDate = new Date(2020, 4, 8, 9, 5, 6, 50);
    str = "";
    str += objDate.getFullYear();                               // 年(1900 年以降の年)
    str += "/" ('0' + (objDate.getMonth() + 1)).substr(-2);     // 月(0 〜 11 )
    str += "/" ('0' + objDate.getDate()).substr(-2);            // 日(1 〜 31 )
    str += " " ('0' + objDate.getHours()).substr(-2);           // 時(0 〜 23)
    str += ":" ('0' + objDate.getMinutes()).substr(-2);         // 分(0 〜 59)
    str += ":" ('0' + objDate.getSeconds()).substr(-2);         // 秒(0 〜 59)
    str += "." ('00' + objDate.getMilliseconds()).substr(-3);   // ミリ秒(0 〜 999)
    console.log(str);

ブラウザの開発環境のコンソールを見ると以下の様になります。

2020/05/08 09:05:06.050

■「set」メソッド:Dateオブジェクトへ日時等の設定メソッド

    var objDate = new Date();       // オブジェクト生成(現在時)
    objDate.setFullYear(2020);      // 年
    objDate.setMonth(3);            // 月
    objDate.setDate(30);            // 日
    objDate.setHours(13);           // 時
    objDate.setMinutes(59);         // 分
    objDate.setSeconds(49);         // 秒
    objDate.setMilliseconds(123);   // ミリ秒
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。

Date Thu Apr 30 2020 13:59:49 GMT+0900 (日本標準時)

この例では 4月30日の設定ですが setDate で 31日を設定すると結果は 5月1日になります。該当する月の日付の範囲を超えた場合は翌月、前月への調整が行われます。

    var objDate = new Date();       // オブジェクト生成(現在時)
    objDate.setFullYear(2020);      // 年
    objDate.setMonth(3);            // 月
    objDate.setDate(31);            // 日(あり得ない 4月31日 設定)
    console.log(objDate);           // オブジェクト内の月は、5月に調整される

    objDate.setDate(0);             // 日(あり得ない 5月0日 設定)
    console.log(objDate);           // オブジェクト内の月は、4月に調整される

    objDate.setFullYear(2020);      // 年
    objDate.setDate(-1);            // 日(あり得ない 4月-1日 設定)
    console.log(objDate);

ブラウザの開発環境のコンソールを見ると以下の様になります。

Date Fri May 01 2020 18:08:01 GMT+0900 (日本標準時)
Date Thu Apr 30 2020 18:08:01 GMT+0900 (日本標準時)
Date Mon Mar 30 2020 18:08:01 GMT+0900 (日本標準時)

setDate() の値が「0」の場合はオブジェクト内の月の1日から見て「-1」した日付になります。（これを使うと月の最終日を求めることが出来ます。）
また、setDate() の値が「-1」の場合はオブジェクト内の月の1日から見て「-2」した日付になります。
尚、このことはsetHours() , setMinutes() , setSeconds() においても指定値の範囲を超えた場合は日付のオブジェクト内を調整されます。

■「to」メソッド:Dateオブジェクトから文字列変換メソッド

    var objDate = new Date("2020/05/08 13:59:59");
    console.log( objDate.toString() );
    console.log( objDate.toDateString() );
    console.log( objDate.toTimeString() );

ブラウザの開発環境のコンソールを見ると以下の様になります。

Fri May 08 2020 13:59:59 GMT+0900 (日本標準時)
Fri May 08 2020
13:59:59 GMT+0900 (日本標準時)

■Dateオブジェクトの使用上の注意点

Dateオブジェクト を使用する時に注意する点があります。それはオブジェクトのコピーを作る時です。以下の例を見て下さい。

    // Dateオブジェクトの生成
    var date1 = new Date("2020/05/08");
    // Dateオブジェクトのコピー
    var date2 = date1;
    // コピー先での月を「2月」に設定
    date2.setMonth(1);
    console.log("date1 : " + date1);
    console.log("date2 : " + date2);

ブラウザの開発環境のコンソールを見ると以下の様になります。
1行目は「date1」の表示なので「5月(May)」と表示されそうなものですが「date2」と同じものが表示されます。

date1 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)
date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)

この原因はソースの4行目にあります。
「date1」を「date2」にコピーしている様に見えますが、実際 Dateオブジェクト はクラスのため参照がコピーされているからです。このコピーで「date1」「date2」ともに Dateオブジェクト の実体(インスタンス)は同じところを指しています。
それで「date2」で「setMonth」を行って「date1」からデータを見ても同じものになります。

結果、クラスデータを別の変数にコピーしたい場合は（コピーの様なもの）、既に存在しているオブジェクトの値で、別の変数に対して生成します。上記のソースを変更します。

    // Dateオブジェクトの生成
    var date1 = new Date("2020/05/08");
    // 最初のオブジェクト値で、別のDateオブジェクトの生成
    var date2 = new Date(date1.getTime());
    // コピー先での月を「2月」に設定
    date2.setMonth(1);
    console.log("date1 : " + date1);
    console.log("date2 : " + date2);

結果は正しく異なる日付になっています。

date1 : Fri May 08 2020 00:00:00 GMT+0900 (日本標準時)
date2 : Sat Feb 08 2020 00:00:00 GMT+0900 (日本標準時)

※クラスのオブジェクトを扱う場合はコピーをする場合は注意が必要です。

JavaScript
0CM

2020/05/02

JavaScript jQuery w2ui.grid を使ったグリッド処理・カラム名のグループ化（タイトルの2行表示）

今回は w2ui.grid のカラム名のグループ化を指示するプロパティである columnGroups ついて説明をします。
この columnGroups を宣言することでカラム名タイトルの上に1行追加してグループ化したタイトルが表示出来たり、タイトル2行を1行にして表示できます。
columnGroups プロパティのオブジェクトの構造は以下の通りです。

columnGroups = {
    span    : 1,     // カラム結合数
    caption : '',    // グループの caption
    master  : false  // true :カラムで宣言された caption を優先 
                     // false:columnGroups の caption を優先(デフォルト)
}

以下に紹介したページのHTMLに columnGroups プロパティを追加します。

⇒JavaScript jQuery w2ui.grid を使ったグリッド処理方法の紹介

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-6 columnGroups</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui-1.5.rc1.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>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    columnGroups: [
      { span: 1, caption: ''     , master: true },
      { span: 2, caption: 'Name'  },
      { span: 1, caption: 'Email' },
      { span: 1, caption: ''     , master: true }
    ],
    columns: [
      { field: 'recid', caption: 'ID'        , size: '40px' },
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name' , size: '30%' },
      { field: 'email', caption: 'Email'     , size: '30%' },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ], 
    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' }
    ]
  });
});
</script>
</body>
</html>

これを実行させると以下の様な表示になります。

master:true のカラムは columns の caption がヘッダに表示され span: 2 の部分は2カラムが結合されます。
尚、今回読込んでいる w2ui の JavaScript ソースですが最新バージョンの w2ui-1.5.rc1.js に変更しました。

この w2ui-1.5.rc1 バージョンでないとブラウザのコンソールに以下の警告メッセージが表示される様です。（皆さんもご注意ください。）

NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "recid", caption: "ID", size: "40px", sizeCalculated: "40px", sizeType: "px", min: 20, text: "ID" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "fname", caption: "First Name", size: "30%", sizeType: "%", sizeCalculated: "114px", min: 20, text: "First Name", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "lname", caption: "Last Name", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Last Name", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "email", caption: "Email", size: "30%", sizeType: "%", sizeCalculated: "113px", min: 20, text: "Email", sizeCorrected: "33.33%" }
w2grid.js:6751:32
NOTICE: grid column.caption property is deprecated, please use column.text. Column ->  
Object { field: "sdate", caption: "Start Date", size: "100px", sizeCalculated: "100px", sizeType: "px", min: 20, text: "Start Date" }
w2grid.js:6751:32
NOTICE: grid columnGroup.caption property is deprecated, please use columnGroup.text. Group ->  
Object { span: 1, caption: "", master: true, text: "" }
w2grid.js:6624:28

JavaScript
0CM

VB.NET-TIPS などプログラミングについて

■JSON 形式のテストデータ(data-get.json)

■url プロパティによる JSON ファイルを指定と登録処理を追加について

■saverow.php プログラム

■Stringオブジェクトの文字列連結について

Stringオブジェクトの文字列連結の例

PHPの文字列連結の例

VB.NETの文字列連結の例

■Stringオブジェクトの文字列比較について

厳密では無い（ゆるい感じ）比較

厳密な比較

■Dateオブジェクトから書式を使って文字列を返す関数

■Dateオブジェクトの年数を加算する関数 addYears()

■Dateオブジェクトの月数を加算する関数 addMonths()

■Dateオブジェクトの日数を加算する関数 addDays()

■Dateオブジェクトのコンストラクタについて

■年,月,日,時,分,秒,ミリ秒を個別に指定

■Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定

■文字列で時刻を指定

■引数無しは現在時刻

■Dateオブジェクトのメソッドについて

■「get」メソッド:Dateオブジェクトの日時等の取得メソッド

■「set」メソッド:Dateオブジェクトへ日時等の設定メソッド

■「to」メソッド:Dateオブジェクトから文字列変換メソッド

■Dateオブジェクトの使用上の注意点

■JSON 形式のテストデータ(data-get.json)

■url プロパティによる JSON ファイルを指定と登録処理を追加について

■saverow.php プログラム

■Stringオブジェクトの文字列連結について

Stringオブジェクトの文字列連結の例

PHPの文字列連結の例

VB.NETの文字列連結の例

■Stringオブジェクトの文字列比較について

厳密では無い（ゆるい感じ）比較

厳密な比較

■Dateオブジェクトから書式を使って文字列を返す関数

■Dateオブジェクトの年数を加算する関数 addYears()

■Dateオブジェクトの月数を加算する関数 addMonths()

■Dateオブジェクトの日数を加算する関数 addDays()

■Dateオブジェクトのコンストラクタについて

■年,月,日,時,分,秒,ミリ秒 を個別に指定

■Unix Time を指定(1970/01/01 00:00:00)からの時間をミリ秒単位で指定

■文字列で時刻を指定

■引数無しは現在時刻

■Dateオブジェクトのメソッドについて

■「get」メソッド:Dateオブジェクトの日時等の取得メソッド

■「set」メソッド:Dateオブジェクトへ日時等の設定メソッド

■「to」メソッド:Dateオブジェクトから文字列変換メソッド

■Dateオブジェクトの使用上の注意点

■年,月,日,時,分,秒,ミリ秒を個別に指定