MW211 EXIT

devlog
JavaScript/コンソールログ
2018年05月31日
変数の値を確認したい場合には、以下のようなデバッグ文を仕込むことがある。
┌──────────────────────────────────────┐
│alert(変数);                                                                │
└──────────────────────────────────────┘
各ブラウザのF12押下でデバッグツールを起動し、
コンソール(console)タブを表示できる場合には、以下に変更すれば
こちらの画面に出力できるようになる。
┌──────────────────────────────────────┐
│console.log(変数);                                                          │
└──────────────────────────────────────┘
分類:JavaScript
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
前へ 1 2 3 4 5 6 7 8 9 次へ