2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでよく使う関数集

Last updated at Posted at 2018-09-24

#概要

  • よくつかう関数の自分用メモです。随時追記します。
  • jQueryに依存している個所があります。
  • 基本、オレオレスクリプトが多数ですので生温かくご覧ください。

##関数の一覧(随時更新)

  • デバッグ用コンソール表示
  • URL引数を取得
  • 時刻表示
  • ゼロサプライ2桁固定
  • ディープコピー
  • ランダム配列を作成
  • ボタン処理
  • リサイズ時処理

#コード

//デバッグ用コンソール表示
var debug = true;
function _c_(str){
  if(debug && console){
    console.log(str);
  }
}

//URL引数を取得
//メモ:クロスサイトスクリプティング対策なし
var arg;
function getParams(){
  arg = new Object;
  pair = location.search.substring(1).split('&');
  for(var i=0;pair[i];i++) {
    var kv = pair[i].split('=');
    arg[kv[0]]=kv[1];
  }
}

//時刻表示 ※zeroSupが必要です。
//73.234 → 01:13
function timeView(_num){
	var num = Math.floor(_num);
	var out = '';
	var min = Math.floor(num/60);
	var sec = Math.floor(num%60);
	return zeroSup(min)+':'+zeroSup(sec);
}

//ゼロサプライ(ゼロパディング)2桁固定
// 3 → 03 12 → 12
function zeroSup(_num){
	var out = '';
	if(_num < 10){
		out = '0' + String(_num);
	}else{
		out = String(_num);
	}
	return out;
}

//ディープコピー
//メモ:Date型は非対応。その他も問題あるらしいが想定外のデータが入らなければこれで十分
function clone(obj){
  return JSON.parse(JSON.stringify(obj));
}

//ランダム配列を作成
//0~(total-1)までの配列からnum個の数値をピックアップした配列を作成する
function randArr(num,total){
	var cnt,randnum;
	var base = [];
	var out = [];
	//base配列作成
	for(cnt=0;cnt<total;cnt++){
		base.push(cnt);
	}
	while(out.length!=num){
		//ランダムに1つピックアップしoutに追加、baseから削除
		randnum = Math.floor(Math.random()*base.length);
		out.push(base[randnum]);
		base.splice(randnum,1);
	}
	return out;
}

//ボタン処理
//DOM読み込み完了時に初期化する
function btn_click(){
  var btnid = $(this).attr('id');
  //ボタンのidで処理を分ける
  switch(btnid){
    case 'btn-A':
      //btn-Aの処理
    break;
    case 'btn-B':
      //btn-Bの処理
    break;
  }
}

//DOM読み込み完了時処理
$(document).ready(function(){
  //ボタンの設定初期化(.containerの中にある.btnすべてに適用する)
  //clickイベントでスマホのタッチイベントも動作する。
  //以前はclickイベントは遅延があるといわれていたが、最近ない気がする(未検証)
  $('.container').on('click','.btn', btn_click);
  
});

//リサイズ時処理
function resized(){
	// do something
}

//リサイズ時処理のセット
//モバイル端末で端末の回転時も処理をする場合は、orientationchange を追加する
$(window).on('resize', resized);

##参考
JavaScriptでURLパラメーターを取得し配列に格納しておく
https://qiita.com/tonkatu_tanaka/items/99d167ded9330dbc4019
[JavaScript]色々なディープコピー
https://qiita.com/knhr__/items/d7de463bf9013d5d3dc0
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f

##追加

  • 2018.10.11 ランダム配列生成
  • 2018.10.24 時刻表示、ゼロサプライ、リサイズ時処理

##今後追加予定

  • ゼロサプライ
  • 数値の三桁カンマ
  • csv読み込み(Papaparse)
  • 時間差計算
  • 文字数カウンタ
  • リサイズ時処理
2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?