js スニペット と メモ

aがundefinedかどうか

if (typeof a === "undefined") {
  //
}

以下の全てがfalseと判断される

if (undefined) {
  // 実行されない
}
if (null) {
  // 実行されない
}
if (0) {
  // 実行されない
}
if ('') {
  // 実行されない
}
if (false) {
  // 実行されない
}

画像のプリロード

var _s = $('img').attr('src');
var _o = _s.replace(/\.\w+$/, '_o' + '$&');
$('').attr('src', _o);

指定の画像が読み込み終わったら

var $img = new Image();
$img.onload = function() {
  //読み込み終わったら
}
$img.src = 'img_path';

‘use strict’

‘use strict’は、関数単位に適用する

外部のコードが適用していない可能性があるため。

function neko() {
  'use strict'
  // 
}
function inu() {
  'use strict'
  // 
}

jQuery 要素の存在を確認してから実行

$('.neko').on('click',function(){
  if ($('.inu')[0]) {
    alert();
  }
});

参考サイト

即時関数

var inu = (function() {
  return 1 + 2;
})();

論理演算子

var a = true;
if (a || b) {// この場合左辺のみ、評価される
  //
}
if (b || a) {// この場合左辺から評価されるが、bは存在しないため、エラーになるので注意
  //
}

for文

var arry = ['inu', 'neko', 'usagi'];
for (var i = 0; i < arry.length; i++) {
  console.log(arry[i]);
}
//inu
// neko
// usagi

for (var i  in arry) {
  console.log(arry[i]);
}
//inu
// neko
// usagi

var arry = {
  width : 100,
  height: 200
};
for (var m in arry) {
  console.log(m + ' '+ arry[m]);
}
// width 100
// height 200

配列の指定要素を削除する delete演算子

var fruits_array = ['apple','orenge','cherry','banana'];
delete fruits_array[2];
// ["apple", "orenge", undefined × 1, "banana"]

配列の指定要素を削除する spliceメソッド

var fruits_array = ['apple','orenge','cherry','banana'];
fruits_array.splice(2, 1);
// ["apple", "orenge", "banana"]

配列の指定要素を削除する 「指定の値」をもつ要素を削除する

var fruits_array = ['apple','orenge','cherry','banana', 'apple','cherry'];
for(i=0; i<fruits_array.length; i++){
  if(fruits_array[i] == "cherry"){
    fruits_array.splice(i, 1);
  }
}

form on submit の無効化

$('form').on('submit',function() {
  if (true) {
    return false;
  }
});

高さや幅を取得（横縦デバッグ）

$(function() {
  if ($('#windowSizes').length < 1) {
    $('body').append('<div id="windowSizes"></div>');
    $('#windowSizes').css({
        'background' :'rgba(0, 0, 0, 0.6)',
        'color' : '#fff',
        'position' :'fixed',
        'top': 0,
        'left' : 0,
        'width': '200px',
        'height' :screen.availHeight + 'px',
        'padding' : '10px',
        'z-index' : '999999'
    });
  }
  function debug(text){
    $('#windowSizes').html(text);
    $('#windowSizes').css({
        'height' :window.innerHeight
    });
  }
  $(window).on('scroll touchmove resize',function() {
    debug(''
        + '画面幅 => ' + screen.width
        + '<br>有効画面幅 => ' + screen.availWidth
        + '<br>表示領域幅1 => ' + window.innerWidth
        + '<br>表示領域幅2 =>  ' + $(window).width()
        + '<br>表示領域幅3 => ' + document.documentElement.clientWidth
        + '<br>ウィンドウ幅 => ' + window.outerWidth
        + '<br><br>==========<br>'
        + '<br>画面高 => ' + screen.height
        + '<br>有効画面高 => ' + screen.availHeight
        + '<br>表示領域高1 => ' + window.innerHeight
        + '<br>表示領域高2 => ' + $(window).height()
        + '<br>表示領域高3 => ' + document.documentElement.clientHeight
        + '<br>ウィンドウ高 => ' + window.outerHeight
        + '<br><br>==========<br>'
        + '<br>ドキュメント幅 => ' + $(document).width()
        + '<br>ドキュメント高 => ' + $(document).height()
    );
  });
});

簡易 上固定

if ($('#windowSizes').length < 1) {
  $('body').append('<div id="windowSizes"></div>');
  $('#windowSizes').css({
    'background' :'rgba(0, 0, 0, 0.6)',
    'color' : '#fff',
    'position' :'fixed',
    'top': 0,
    'left' : 0,
    'width': '100%',
    'padding' : '10px',
    'font-size': '10px',
    'z-index' : '999999',
    'overflow': 'scroll',
    'max-height': '90%'
  });
}
function debug(text){
  $('#windowSizes').text(text);
}
window.onerror = function(msg, url, line, col, error) {
  debug(msg);
};

高さや幅を取得（横縦デバッグ） 簡易 下固定

if ($('#windowSizes').length < 1) {
  $('body').append('<div id="windowSizes"></div>');
  $('#windowSizes').css({
    'background' :'rgba(0, 0, 0, 0.6)',
    'color' : '#fff',
    'position' :'fixed',
    'bottom': 0,
    'left' : 0,
    'width': '100%',
    'padding' : '10px',
    'z-index' : '999999',
    'overflow': 'scroll',
    'max-height': '100%'
  });
}
function debug(text){
  $('#windowSizes').text(text);
}
window.onerror = function(msg, url, line, col, error) {
  debug(msg);
};

スクロールし終えたら発動

$(function(){
  var setTimeoutId = null;
  $(window).on('scroll',function(){
    if( setTimeoutId ) {
      clearTimeout( setTimeoutId ) ;
    }
    setTimeoutId = setTimeout( function() {
      console.log('scroll');
      setTimeoutId = null ;// setTimeoutIdを空にする
    }, 500 ) ;
  });
});

リサイズし終えたら発動

$(function(){
  var setTimeoutId = null;
  $(window).on('resize',function(){
    if( setTimeoutId ) {
      clearTimeout( setTimeoutId ) ;
    }
    setTimeoutId = setTimeout( function() {
      console.log('resize');
      setTimeoutId = null ;// setTimeoutIdを空にする
    }, 500 ) ;
  });
});

カウントダウン

締め切り間近なキャンペーンページなどで使えそうな機能として使えるかも

$(function() {
  function getText(time) {
    var calc = new Date( (new Date(time)) - ( new Date() ));
    var y = calc.getUTCFullYear() - 1970 + "年";
    var m = calc.getUTCMonth() + "カ月";
    var d = calc.getUTCDate() - 1 + "日";
    var h = calc.getUTCHours() + "時間";
    var min = calc.getUTCMinutes() + "分";
    var sec = calc.getUTCSeconds() + "秒";
    var mil = calc.getUTCMilliseconds() + "ミリ秒";
    return "" + y + m +d + h + min + sec + mil;
  }
  setInterval(function () {
    $('#demo').html(getText('2020/7/24 20:00:00'));
  },30);
});