MW211 EXIT

devlog
JavaScript/setTimeout()とclearTimeout()
2018年05月01日
┌──────────────────────────────────────┐
│var gタイマID = false;                                                      │
│var g周期ミリ秒 = 1000;                                                     │
│$(function() {                                                              │
│    $('#停止ボタン').on('click', function() {                               │
│        if (gタイマID !== false) {                                          │
│            clearTimeout(gタイマID);                                        │
│            gタイマID = false;                                              │
│        }                                                                   │
│    });                                                                     │
│    $('#再開ボタン').on('click', function() {                               │
│        gタイマID = setTimeout(タイマイベント関数, g周期ミリ秒);            │
│    });                                                                     │
│    // タイマ起動                                                           │
│    gタイマID = setTimeout(タイマイベント関数, g周期ミリ秒);                │
│});                                                                         │
├──────────────────────────────────────┤
│function タイマイベント関数() {                                             │
│    // (処理)                                                               │
│    // 次の周期                                                             │
│    gタイマID = setTimeout(タイマイベント関数, g周期ミリ秒);                │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/正規表現の変数化
2017年02月16日
┌──────────────────────────────────────┐
│文字.match(/\d/)                                                            │
└──────────────────────────────────────┘
上記のような正規表現(一致判定)があった場合に、「\d」の部分を変数化する方法。

単純に以下みたいなのはダメ。(「/」で囲っているのは単なる文字列ではない)
┌──────────────────────────────────────┐
│var str = '\d';                                                             │
│文字.match(/ + str + /)                                                     │
└──────────────────────────────────────┘

下記のように正規表現オブジェクトにしてあげるのが正解。
┌──────────────────────────────────────┐
│var str = '\\d';                                                            │
│var reg = new RegExp(str);                                                  │
│文字.match(reg)                                                             │
└──────────────────────────────────────┘
ただし、注意すべきなのは「\」が(「/」で囲う場合はそのままでいいが)
文字列となると「\\」で表記しなければならない点。

代入後、(「str」を)を「\」→「\\」に置換すれば、意識しなくても済むかと思ったが
代入の時点で「\」が落ちてしまうので置換が効かない。
分類:JavaScript
JavaScript/プロトタイプなど
2017年01月10日
┌──────────────────────────────────────┐
│var グローバル変数;                                                         │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│function グローバル関数(引数) {                                             │
│     var ローカル変数;                                                      │
│     return 戻り値;                                                         │
│}                                                                           │
├──────────────────────────────────────┤
│var グローバル関数 = function(引数) {                                       │
│     var ローカル変数;                                                      │
│     return 戻り値;                                                         │
│}                                                                           │
├──────────────────────────────────────┤
│グローバル関数(引数);                                                       │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│function コンストラクタ関数(引数) {                                         │
│     this.公開メンバ変数 = 引数,                                            │
│     this.メソッド = function(引数) {                                       │
│         var ローカル変数;                                                  │
│         return 戻り値;                                                     │
│     };                                                                     │
│}                                                                           │
├──────────────────────────────────────┤
│var オブジェクト = new コンストラクタ関数(引数);                            │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│名前空間 = {                                                                │
│     公開メンバ変数:値,                                                     │
│     メソッド:function(引数) {                                              │
│         var ローカル変数;                                                  │
│         return 戻り値;                                                     │
│     }                                                                      │
│};                                                                          │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/配列操作(PHPとの比較)
2015年07月01日
┌──────────────────┬──────────────────┐
│                PHP                 │             JavaScript             │
├──────────────────┼──────────────────┤
│文字列 = implode(区切文字, 配列);   │文字列 = 配列.join(区切文字);       │
├──────────────────┼──────────────────┤
│配列 = explode(区切文字, 文字列);   │配列 = 文字列.split(区切文字);      │
└──────────────────┴──────────────────┘
分類:JavaScript
JavaScript/配列定義
2014年05月29日
┌──────────────────────────────────────┐
│var 配列 = ['A','B','C'];                                                   │
└──────────────────────────────────────┘
上記は、下記のようにも書ける。
┌──────────────────────────────────────┐
│var 配列 = 'A B C'.split(' ');                                              │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/配列定義を文字列定義と誤認すると
2014年05月16日
配列は「'」で囲う必要はない。

以下、通常の配列定義をした場合の挙動。
┌──────────────────────────────────────┐
│var 配列 = [1,2,3];                                                         │
├──────────────────────────────────────┤
│alert(配列.length);                                                    //→3│
├──────────────────────────────────────┤
│for (var i = 0; i < 配列.length; i++) {                                     │
│    alert(配列[i]);                                      //→「1」「2」「3」│
│}                                                                           │
├──────────────────────────────────────┤
│for (var key in 配列) {                                                     │
│    alert(配列[key]);                                    //→「1」「2」「3」│
│}                                                                           │
└──────────────────────────────────────┘

これを誤って「'」で囲って文字列定義にしてしまった場合の挙動。
┌──────────────────────────────────────┐
│var 配列 = '[1,2,3]';                                                       │
├──────────────────────────────────────┤
│alert(配列.length);                                                    //→7│
├──────────────────────────────────────┤
│for (var i = 0; i < 配列.length; i++) {                                     │
│    alert(配列[i]);                  //→「[」「1」「,」「2」「,」「3」「]」│
│}                                                                           │
├──────────────────────────────────────┤
│for (var key in 配列) {                                                     │
│    alert(配列[key]);                //→「[」「1」「,」「2」「,」「3」「]」│
│}                                                                           │
└──────────────────────────────────────┘
文字列も配列の一種なので、普通の動作してしまう(よって、気づきづらく厄介)。

そんな馬鹿なことはしないよと思うかもしれないが、
JSON文字列の配列とかを操作していると、うっかりやらかしてしまうものだ。
分類:JavaScript
JavaScript/疑似例外
2014年05月14日
疑似的例外を発生させるには「throw」してあげればよい。
┌──────────────────────────────────────┐
│try {                                                                       │
│    throw '例外だよ';  // 疑似例外                                          │
│} catch (e) {                                                               │
│    alert(e);  //  →「例外だよ」                                           │
│    // 例外処理                                                             │
│}                                                                           │
└──────────────────────────────────────┘

値がなくても大丈夫のようだ。
┌──────────────────────────────────────┐
│try {                                                                       │
│    throw '';  // 疑似例外                                                  │
│} catch (e) {                                                               │
│    alert(e);  //  →「」                                                   │
│    // 例外処理                                                             │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/特定の文字以降を抜き出す
2014年04月30日
┌──────────────────────────────────────┐
│GETパラメータ部分のみ = (URLアドレス.match(/\?.*$/) || [''])[0];            │
└──────────────────────────────────────┘
URLアドレスからGETパラメータ部分のみをJavaScriptで抜き出す方法。
つまり「?」を境にその後ろを抜き出すってこと。
ついでに、「?」がなければ空文字という仕様も追加。

結構厄介だ(っていうかもっと簡単な方法がありそうだが)

match()メソッドで正規表現を使って抜き出す訳だが…。

問題1:結果が配列で返ってくる
  ということで、「[0]」を後ろにつけて配列の一番目の値だけ取得するようにする。

問題2:該当がない場合にはnullになる
  「null」は「''」とは違うという根本的な問題もあるが、
  「null」を配列とみなして「[0]」なんかをつけると例外が起きてしまうのが致命的。
  ってことで、「null」の場合は「''」に変換してあげなければならないが
  その後に配列として扱うことが見えているので「['']」と
  (一番目が空文字の)配列に変換してあげる深謀遠慮が必要。
  「null」判定は「||」によるOR条件付加で一発でできる。
分類:JavaScript
JavaScript/配列操作いろいろ
2014年04月24日
配列中から特定の値を除外する。
┌──────────────────────────────────────┐
│配列 = 配列.filter(function(v) {                                            │
│    return v != 値;                                                         │
│});                                                                         │
└──────────────────────────────────────┘

配列中の重複した値を除外する。
┌──────────────────────────────────────┐
│配列 = 配列.filter(function (x, i, self) {                                  │
│    return self.indexOf(x) === i;                                           │
│});                                                                         │
└──────────────────────────────────────┘
分類:JavaScript
HTML/明細の送信
2014年04月17日
┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-a"/></td>             │
│        <td><input type="text" name="col2[]" value="2-a"/></td>             │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" name="col1[]" value="1-b"/></td>             │
│        <td><input type="text" name="col2[]" value="2-b"/></td>             │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="submit" value="送信"/>                                       │
│</form>                                                                     │
└──────────────────────────────────────┘
明細をPOSTする場合、name属性を個別に配列にすると、項目ごとの配列となってしまう。
┌──────────────────────────────────────┐
│$_POST['col1'] = array(                                                     │
│    0 => '1-a',                                                             │
│    1 => '1-b',                                                             │
│);                                                                          │
│$_POST['col2'] = array(                                                     │
│    0 => '2-a',                                                             │
│    1 => '2-b',                                                             │
│);                                                                          │
└──────────────────────────────────────┘

データベースからデータを取得したような多次元連想配列にしたい場合には?
┌──────────────────────────────────────┐
│$_POST['data'] = array(                                                     │
│    0 => array(                                                             │
│        'col1' => '1-a',                                                    │
│        'col2' => '2-a',                                                    │
│    ),                                                                      │
│    1 => array(                                                             │
│        'col1' => '1-b',                                                    │
│        'col2' => '2-b',                                                    │
│    ),                                                                      │
│);                                                                          │
└──────────────────────────────────────┘

まず、name属性をつけて直接POSTするのではなく、class属性で束ねて
それらを編集してPOSTする方式に切り替える。
よって、submitボタンではなく、buttonボタンを使用する。
┌──────────────────────────────────────┐
│<form method="post" action="">                                              │
│  <table>                                                                   │
│    <thead>                                                                 │
│      <tr>                                                                  │
│        <th>項目1</th>                                                      │
│        <th>項目2</th>                                                      │
│      </tr>                                                                 │
│    </thead>                                                                │
│    <tbody>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│      <tr>                                                                  │
│        <td><input type="text" class="name-col1" value=""/></td>            │
│        <td><input type="text" class="name-col2" value=""/></td>            │
│      </tr>                                                                 │
│    </tbody>                                                                │
│  </table>                                                                  │
│  <input type="button" id="submit" value="送信"/>                           │
│</form>                                                                     │
└──────────────────────────────────────┘
さて、送信方法だが、二つの案がある。(以下jQueryを使用、PHPで受信を例とする)

【案1】hidden項目で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var index = 0;                                                          │
│    $('tbody tr').each(function() {                                         │
│        $(this).closest('form')                                             │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col1]')  │
│                                .val($(this).find('.name-col1').val())      │
│            )                                                               │
│            .append($('<input>').prop('type', 'hidden')                     │
│                                .prop('name', 'data[' + index + '][col2]')  │
│                                .val($(this).find('.name-col2').val())      │
│            );                                                              │
│        index++;                                                            │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = $_POST['data'];                                             │
└───┴──────────────────────────────────┘
  hidden項目を生成して、そこに設定して送信する。
  よって、そのまま使える。

【案2】JSON文字列で送信する方法
┌──────────────────────────────────────┐
│$('#submit').click(function() {                                             │
│    var jsonArray = new Array();                                            │
│    $('tbody tr').each(function() {                                         │
│        jsonArray.push({                                                    │
│            "col1" :$(this).find('.name-col1').val(),                       │
│            "col2" :$(this).find('.name-col2').val()                        │
│        });                                                                 │
│    });                                                                     │
│    $('tbody').closest('form')                                              │
│        .append($('<input>').prop('type', 'hidden')                         │
│                            .prop('name', 'data')                           │
│                            .val(JSON.stringify(jsonArray))                 │
│        )                                                                   │
│        .submit();                                                          │
│});                                                                         │
├───┬──────────────────────────────────┤
│PHP側 │$配列 = json_decode($_POST['data'], TRUE);                          │
└───┴──────────────────────────────────┘
  一旦、連想配列(ハッシュオブジェクト)にしたものを
  「JSON.stringify()」でJSON文字列に変換して、送信する。
  PHP側では「json_decode()」でデコードする必要がある。
  一つの項目として送信するので(変換処理は必要だが)管理がしやすいという利点あり。
分類:JavaScript、HTML
前へ 1 2 3 4 5 6 7 8 9 次へ