MW211 EXIT

devlog
JavaScript/in_array()
2024年02月22日
配列中に特定の値があるか判定するPHP関数「in_array()」。
┌──────────────────────────────────────┐
│if (in_array(値, 配列)) {                                                   │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

これをJavaScriptで実現できるjQueryの機能が「$.inArray()」。
┌──────────────────────────────────────┐
│if ($.inArray(値, 配列) >= 0) {                                             │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

最近のJavaScriptでは、配列の「indexOf()」メソッドで実現できるようになった。
┌──────────────────────────────────────┐
│if (配列.indexOf(値) !== -1) {                                              │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘

なお、ビット反転により-1を0に変換できるチルダ演算子「~」を用いると
以下のようにスマートに記述できる。
┌──────────────────────────────────────┐
│if (~配列.indexOf(値)) {                                                    │
│    // 該当あり                                                             │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/日付の判定
2023年01月06日
┌──────────────────────────────────────┐
│if (文字列 && !isNaN(new Date(文字列).getDate())) {                         │
│    ' 日付である                                                            │
│} else {                                                                    │
│    ' 日付でない                                                            │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
GETパラメータ(3)いろいろ
2022年12月17日
いろいろあるようだ。

GETパラメータを書き換える方法。
┌──────────────────────────────────────┐
│history.pushState(null, null, '?key1=val1&key2=val2');                      │
├──────────────────────────────────────┤
│history.pushState(null, null, location.pathname + '?key1=val1&key2=val2');  │
├──────────────────────────────────────┤
│history.pushState(null, null, '?' + new URLSearchParams({                   │
│    'key1'  :'val1',                                                        │
│    'key2'  :'val2',                                                        │
│}).toString());                                                             │
├──────────────────────────────────────┤
│history.pushState(null, null, location.pathname + '?' + new URLSearchParams({
│    'key1'  :'val1',                                                        │
│    'key2'  :'val2',                                                        │
│}).toString());                                                             │
├──────────────────────────────────────┤
│const url = new URL(location.href.replace(/\?.*$/, ''));                    │
│url.searchParams.set('key1', 'val1');  // .append()でもOK                   │
│url.searchParams.set('key2', 'val2');  // .append()でもOK                   │
│history.pushState(null, null, url);                                         │
└──────────────────────────────────────┘

GETパラメータをクリアする方法。
┌──────────────────────────────────────┐
│history.pushState(null, null, location.pathname);                           │
├──────────────────────────────────────┤
│history.pushState(null, null, location.href.replace(/\?.*$/, ''));          │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/GETパラメータ(2)生成
2022年12月16日
(jQueryを用いているが)「id="id"」の値が変わった場合に
表示中のURLに埋め込む方法。
┌──────────────────────────────────────┐
│$('#id').on('change', function() {                                          │
│    //----------------------------------------------------------------------│
│    //  (案1)リロードする場合                                               │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        location.href = location.href.replace(/\?.*$/, '');                 │
│    } else {                                                                │
│        location.href = location.href.replace(/\?.*$/, '')                  │
│                      + '?id=' + encodeURI($('#id').val());                 │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│    //  (案2)URLだけ書き換える場合                                          │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        history.pushState(null, null, location.pathname);                   │
│    } else {                                                                │
│        history.pushState(null, null, `?id=${encodeURI($('#id').val())}`);  │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│});                                                                         │
└──────────────────────────────────────┘
これで、値を変更した場合に、URLも変化するので
そのURLを用いることができる。
分類:JavaScript
JavaScript/GETパラメータ(1)読込
2022年12月15日
URLの「~?id=値」もしくは「~&id=値」を読み込む関数。
┌──────────────────────────────────────┐
│function GetGetParam() {                                                    │
│    const params = location.search.substring(1).split('&');                 │
│    for (let i = 0; params[i]; i++) {                                       │
│        let kv = params[i].split('=');                                      │
│        if (kv[0] == 'id') {                                                │
│            return decodeURI(kv[1]);                                        │
│        }                                                                   │
│    }                                                                       │
│    return null;                                                            │
│}                                                                           │
└──────────────────────────────────────┘
これを表示時(初期処理)にて読み込んで処理を行えばよい。(以下はjQueryの場合)
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    const param = GetGetParam();                                            │
│    if (param) {                                                            │
│        // 処理(param);                                                     │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/console.log()系
2022年11月26日
console.log()系のメモ。

【出力方法の種類】
console.log(文字列);
console.info(文字列);
console.warn(文字列);   //→△
console.error(文字列);  //→×
console.table(配列);

【プレースメントの種類】
console.log('%s', 文字列);
console.log('%d', 数値);
console.log('%i', 数値);
console.log('%f', 小数);
console.log('%c', CSS);
console.log('%o', オブジェクト)
console.log('%O', オブジェクト)
console.log('%o', URL)
console.log('%O', URL)
分類:JavaScript
JavaScript/数値を文字列に変換する無名関数
2022年04月06日
┌──────────────────────────────────────┐
│(                                                                           │
│    (arg) => {                                                              │
│        switch (arg) {                                                      │
│            case  1: return 'a';                                            │
│            case  2: return 'b';                                            │
│            case  3: return 'c';                                            │
│            default: return 'z';                                            │
│        }                                                                   │
│    }                                                                       │
│)(1)                                                                        │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/オブジェクト指向
2019年08月22日
連想配列でクラスを代用するには以下の方法がある。
┌──────────────────────────────────────┐
│const オブジェクト = {                                                      │
│    メンバ変数  :値,                                                        │
│    メソッド    :function(引数) {                                           │
│                     return 引数 * this.メンバ変数;                         │
│                 },                                                         │
│    メソッド    :引数 => {                                                  │
│                     return 引数 * this.メンバ変数;                         │
│                 },                                                         │
│    メソッド(引数) {                                                        │
│        return 引数 * this.メンバ変数;                                      │
│    }                                                                       │
│};                                                                          │
└──────────────────────────────────────┘
ES2015からはクラスが導入された。
┌──────────────────────────────────────┐
│class クラス {                                                              │
│////メンバ変数 = 値;  ←これはNG                                            │
│    constructor(引数) {                                                     │
│        this.メンバ変数 = 引数;                                             │
│    }                                                                       │
│    メソッド() {                                                            │
│        return this.メンバ変数;                                             │
│    }                                                                       │
│}                                                                           │
├──────────────────────────────────────┤
│const インスタンス = new クラス(引数);                                      │
│インスタンス.メソッド();                                                    │
├──────────────────────────────────────┤
│class 継承クラス extends クラス {                                           │
│    constructor(引数) {                                                     │
│        super();                                                            │
│    }                                                                       │
│}                                                                           │
└──────────────────────────────────────┘
分類:JavaScript
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
前へ 1 2 3 4 5 6 7 8 次へ