Javascript

【Javascript】変数がNaN以外の数値であることを保証するイディオム。

イディオムシリーズ。

var a = function(val) {
	var num = +val || 0;
	console.log(num);
}

a('12345');
a('123abc');
a('string');

↓

// 12345
// 0
// 0

数値化に失敗した場合は変数に0がセットされる。

 

【Javascript】変数の未定義エラーを回避するイディオム。

イディオムシリーズ。

var a = function(b) {
	b = b || {};
	console.log(b);
}

a();

// Object {}

||演算子を用いることで、変数の評価結果がfalseの場合、初期値として演算子右側の値が代入される。

 

【Javascript】if文を省略する。

メモ。

Javascriptの&&演算子はどの型にも用いることができるため、if文がネストする場面において非常にスマートな記述を行うことが出来る。

下記はコンソール出力まで辿り着かない例。
※cがfalseのため。

var a = true;
var b = true;
var c = false;

a && b && c && console.log('ok');

すべてがtrueと評価されると、&&演算子の一番最後の式が評価される。

var a = true;
var b = true;
var c = true;

a && b && c && console.log('ok');

上記は下記のif文と同等の意味を表す。

if(a) {
	if(b) {
		if(c) {
			console.log('ok');
		}
	}
}

 

【jQuery】ニュースティッカーを実装する。

よさ気なプラグインを見つけたのでメモ。

http://black-flag.net/jquery/20121114-4332.html

上記サイトのコードに加え、ニュースが1件しかなかった時の対応として
setInterval()が走る直前全てに下記コードを挿入すれば完璧。

if($targetLi.length<=1) return false;

 

【Javascript】フラットデザインなNotifyプラグイン。

bootstrapも3になって、フラットに馴染む通知プラグインがないかと探していたらいいものを見つけたのでメモ。

今後はPines Notifyじゃなくてこっちメインかも。

https://dl.dropboxusercontent.com/u/19156616/ficheros/notifIt!-1.1/index.html

上記リンクよりダウンロードしてきたファイルを下記のように読み込む。

<script type="text/javascript" src="notifIt.js"></script>
<link rel="stylesheet" type="text/css" href="notifIt.css">

あとは使うだけ。

下記例。

notif({
  type: 'info',
  msg: 'メーッセージ',
  width: 'all',
  height: 100,
  position: 'center'
});

他にも色々な見せ方があるので、詳細は公式を参照されたし。

 

【Javascript】URL形式の正規表現チェックを行う。

メモ。

var str = 'http://example.com';
var pattern = new RegExp('^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$','i');

pattern.test(str);

 

【Javascript】JavascriptでPHPのpreg_quote()メソッドを実装する。

メモ。

preg_quote()は正規表現構文の特殊文字の前にバックスラッシュを挿入してくれる関数。ようは必要に応じてエスケープを行ってくれる。

stackoverflowでよさ気なコードを見つけたのでペタリ。↓
http://stackoverflow.com/questions/6828637/escape-regexp-strings

function preg_quote (str, delimiter) {
    return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
}

利用方法はPHPの同名関数と同じ。詳細は下記ページを参照されたし。

http://www.php.net/manual/ja/function.preg-quote.php

 

【Javascript】Javascriptでクリップボードへのコピーを行う。

IE以外のモダンブラウザでクリップボードへ特定のテキストを流し込む方法。

ZeroClipboardを用いる。↓
https://github.com/zeroclipboard/zeroclipboard

まずは準備。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/ZeroClipboard.min.js"></script>
<script>
var clip = new ZeroClipboard($(".zero-clip"), {
	moviePath: 'ZeroClipboard.swf'
});
clip.on('complete', function (client, args) {
	// コピーが成功した際のコールバック処理を記述する
});
</script>

ZeroClipboard()の第一引数にはコピーを実行する際のトリガーとなる要素(ボタン要素など)を指定する。
※この際渡す要素はjQueryオブジェクトであることに注意。
また第二引数のmoviePathプロパティに指定するswfファイルはスクリプトから参照できる場所に配置すること。

次にトリガーを引いた際のコピー対象となるテキスト要素にIDを割り当て、トリガー要素の「data-clipboard-target」属性にそのIDを持たせる。

下記例。

<button class="zero-clip" data-clipboard-target="target" type="button">Copy</button>

これですべての準備が完了。設定したボタンを押せば、指定した要素内のテキストがクリップボードにコピーされる。
フラッシュの機能を用いて実現しているため、iPhoneなどのフラッシュ非対応デバイスでは動作しない点に注意。