JavaScript – ページ 2 – 東京発、雲に乗って

2017年9月7日2017年9月7日

【JavaScript】テキストボックスに何か入力されたら即イベント実行させる

たとえば絞込検索などで、1文字入力されるごとに検索処理を実行させたいとき、
イベントのトリガーには

onInput

onInput

を使用します。

.addEventListener('input', 関数 );

1	.addEventListener('input', 関数 );

jQueryなら

.on('input', 関数 );

1	.on('input', 関数 );

2017年6月6日

【JavaScript】scriptタグで呼ばれたjsファイル内で自身のURLを取得

scriptタグで呼ばれたjsファイル内で、
そのjs自身のURL（＝scriptタグのsrcの内容）を取得したい場合、
普通にlocationオブジェクトを使って取得しようとしても
おおもとのページのURLしか取得できません。

document.currentScriptオブジェクトに対応していれば簡単ですが、
対応していない場合はその時点で呼ばれている最新のscriptタグを
解析すれば取得できます。

var get_self_url = function() {
  var _current = (function() {
    if (document.currentScript) {
      return document.currentScript.src;
    }
    else {
      var scripts = document.getElementsByTagName('script'),
      script = scripts[scripts.length-1];
      if (script.src) {
        return script.src;
      }
    }
  })();
  return _current;
};

var get_self_url = function() {

var _current = (function() {

if (document.currentScript) {

return document.currentScript.src;

}

else {

var scripts = document.getElementsByTagName('script'),

script = scripts[scripts.length-1];

if (script.src) {

return script.src;

}

})();

return _current;

};

2017年6月6日2017年6月6日

【JavaScript】外部のCSSファイルを動的にロード

外部のCSSファイルをJavaScriptから動的にロードする関数です。

var loaded_styles = {};
var load_css = function(src) {
  if(sdl.loaded_styles[src]) {
    return;
  }
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = src;
  head.insertBefore(link, head.firstChild);
  var loaded_styles[src] = 1;
};

var loaded_styles = {};

var load_css = function(src) {

if(sdl.loaded_styles[src]) {

return;

}

var head = document.getElementsByTagName('head')[0];

var link = document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = src;

head.insertBefore(link, head.firstChild);

var loaded_styles[src] = 1;

};

使い方

load_css('/libs/css/style.css');

1	load_css('/libs/css/style.css');

2017年5月8日

【JavaScript】クエリー文字列で同名のパラメータを自動的に配列にしてFormDataにセットする

長いタイトルですが、タイトル通りのことをやることになり、
スマートなやり方が思いつかず、結局ループを2回回す方法でやりました。

var _form_data = new FormData();
var _q = location.search.replace('?', '');
var _qs = _q.split('&');
var _param_tmp1 = {};
// 同名パラメータが2つ以上あるかどうかをカウントするループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = _qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]]) {
      _param_tmp1[_kv[0]]++;
    }
    else {
      _param_tmp1[_kv[0]] = 1;
    }
  }
}
// カウントが2つ以上なら後ろに[]をつけるループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]] == 1) {
      _form_data.append(_kv[0], _kv[1]);
    }
    else {
      _form_data.append(_kv[0] + '[]', _kv[1]);
    }
  }
}

var _form_data = new FormData();

var _q = location.search.replace('?', '');

var _qs = _q.split('&');

var _param_tmp1 = {};

// 同名パラメータが2つ以上あるかどうかをカウントするループ

for(var i = 0; i < _qs.length; i++) {

var _kv = _qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]]) {

_param_tmp1[_kv[0]]++;

}

else {

_param_tmp1[_kv[0]] = 1;

}

// カウントが2つ以上なら後ろに[]をつけるループ

for(var i = 0; i < _qs.length; i++) {

var _kv = qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]] == 1) {

_form_data.append(_kv[0], _kv[1]);

}

else {

_form_data.append(_kv[0] + '[]', _kv[1]);

}

2017年4月19日2017年4月19日

【JavaScript】連想配列でも配列でも要素数を取得

配列の要素数はlengthで取得できますが、
連想配列の場合はlengthは使えません。
スマートではないですがfor inでループを回してカウントするのが簡単です。

連想配列でも配列でも同じように要素数が取得できる関数です。

var len = function(val) {
  if(val == undefined || val == null) {
    return 0;
  }
  if(val instanceof Array) {
    return val.length;
  }
  else if(val instanceof Object) {
    var _cnt = 0;
    for(var x in val) {
      _cnt++;
    }
    return _cnt;
  }
  else {
    return val.length;
  }
};

var len = function(val) {

if(val == undefined || val == null) {

return 0;

}

if(val instanceof Array) {

return val.length;

}

else if(val instanceof Object) {

var _cnt = 0;

for(var x in val) {

_cnt++;

}

return _cnt;

}

else {

return val.length;

}

};

文字列だったら長さが返ってきます。