ちょこちょこ使うけど忘れがちなjavascript、jQueryの機能まとめ

ちょっと作りたい物があってここ最近ずーっとパチパチしてるんですけどいい加減疲れてきたので一休み的に、今までに覚えたjavascriptの「こういう時はどうすればいいんだ？」って思って調べた事とかをまとめておこうと思います。

僕に記憶力が足りないせいかちゃんと覚えようという気がないのか「忘れたら検索すれば良いんでしょ？」的な甘えがあるのかそもそも人生を舐めてんのか、同じ機能を何度も検索してることが多くてその度に自分の低脳加減に枕を濡らす日々なので「とりあえずこの記事見れば良い」を作っておこうと思います。

まぁ根本的な解決には全くなってないんだけど暫定案というかとりあえず最低限の対策は立てました的な、いかにもそこそこ以上の規模の会社に入社して数年経った若手社員がだらけきった中堅社員の良くないところを「これが楽な仕事の仕方か！」とおかしな方向でパラダイムシフトしてしまって残念な感じになってしまった感は否めないですけど、「それでも何もしないよりはマシ」というどう考えても良い訳なんだけど何だかそれっぽく聞こえる耳辺りの良い言葉をスローガンにして頑張って書いてみようと決めました。

あ、あと、まとめというか羅列ね、羅列。思いついたり調べたら都度書く。

数値を四捨五入・切り捨て・切り上げ

var num1, num2, num3;
num1 = Math.round( num1 );
// ↑ 四捨五入

num2 = Math.ceil( num2 );
// ↑ 切り上げ

num3 = Math.floor( num3 );
// ↑ 切り捨て

複数のイベントハンドラを割り当てる

$( ele ).bind({
  mousedown: function () {
    // マウスクリック時の動作を記述
  },
  mousemove: function () {
    // マウスが移動してる時の動作を記述
  },
  mouseup: function () {
    // マウスが移動してる時の動作を記述
  }
});

ちなみに動作が同じであればこういう書き方も可。

$( ele ).bind( "mousedown mouseup", function () {
  // マウスがをクリックした時とクリックを離したときの動作を記述
});

引数として与える値を複数渡したい場合はオブジェクトリテラル的に書けば何とかなることって多いですよね。

文字列を数値に変換

数値しか入力していないのに文字列と認識されて「1 + 1」となってる箇所が「11」となるのはよくあることですよね。よくありました。そんな時はこれ。

var num4 = "1", num5 = "3", add;
add = num4 + num5;
// これだと 13 になる

add = parseInt(num4, 10) + parseInt(num5, 10);
// これで4になる

parseInt(txt, num) で 文字列txtをnum進数の整数に変換してくれます。

〜から〜までの整数値でランダムに取得した値を得る

ランダムな数値を作りたいことはよくあると思います。こんな関数を使いましょう。

function rand (range) {
  return Math.floor(Math.random() * range);
}
var randNum = rand(9);
// これで0から8までのランダムな整数がrandNumに入る

指定した文字を置換、削除

var txt = "#ffee92";
var replaceTxt = txt.replace( "#", "" );
// replaceTxt は "ffee92"

ele.replace( txt, rpl ) で、 eleの文字列の中からtxtを探してrplに置換します。

上の例は “#” を “”(空文字) に置換しているので、「#を削除」と同じ事になりますね。

オブジェクトの個数を調べる

オブジェクトをループで回したい場合はオブジェクトの個数を知りたいですよね。配列だと arr.length で個数を調べられますがオブジェクトの個数はそれでは調べられないみたいです。オブジェクトの場合はこれを使いましょう。

var num;
var obj = {
  name: "muyuu",
  sex: "male",
  job: "IT僧侶"
};
num = Object.keys( obj ).length;
// num は 3

デフォルトイベントの抑止

スマートフォンで「この領域をタッチしてる時はスクロールとかさせたくない」って事がよくあると思います。そんな時に使いましょう。

$( ele ).bind ( "touchmove", function(e){
  e.preventDefault();
});

引数のデフォルト設定

関数を作る時に、引数のデフォルト値を設定したいなぁと思うときに使います。

function test( opt ) {
  opt = opt || 1;
  // opt に値がない場合は1とする
}

ウィンドウの変更を監視する感じのやつ

ウィンドウサイズが変更したら発動する系の動作です。jQuery版とJS版がありますね。どちらかお好きな方をお使い頂ければ良いかと。

// jQuery
$( window ).resize( function(){
  // ココに処理を書く
});

// JS
window.onResize = function () {
  // ココに処理を書く
};

どんどん増え続ける予定です。未定だけど。