tande lab.

Archive
Tag "javascript"

うるう年の判定ってどうやるんだろーと調べてみたら、Microsoft のページに書いてあった。

1. 判定する年が 4 で割り切れる場合は手順 2. に。割り切れない場合は手順 5. に。
2. その年が 100 で割り切れる場合は手順 3. に。割り切れない場合は手順 4. に。
3. その年が 400 で割り切れる場合は手順 4. に。割り切れない場合は手順 5. に。
4. その年はうるう年です。
5. その年はうるう年ではありません。

なるほどー?
私の弱い頭で整理した結果、

4 でも 100 でも 400 でも割り切れる西暦
4 で割り切れるが 100 で割り切れない西暦

がうるう年ってことかな?と判断して、JavaScript で以下な感じで判定しました。

Read More

日付計算が簡単になる JavaScript ライブラリの紹介です。

XDate – A Modern JavaScript Date Library
こちらの xdate.js を使うと、JavaScript 標準の Date オブジェクトをもっと便利にした XDate オブジェクトを利用することができます。

setTime や getFullYear などの基本メソッドは Date オブジェクトそのままに、それに加えて日付の足し算・引き算、指定フォーマットに合わせた文字列出力など便利なメソッドが揃っています。

以下、サンプルコードです。

Read More

ボタンにデフォルトでフォーカスが当たってしまうので、フォーカスを消したいと思って

$("#btn").blur();

ってやるけど、フォーカスが消えない。

なんでだ〜と思って色々調べたら、Chrome では input 要素にデフォルトで outline 装飾が設定されてしまうので、フォーカスが当たっているように見えてしまうようです。

なので、

$("#btn").css("outline","none");

とすると期待通りの動きになりました。

フォーカスが当たっていることと、アウトライン装飾がつくということは、別なんですね。
Chrome 以外にも Safari でも同様の挙動になるみたいです。

Read More

背景色に応じて、見やすいように文字色を白または黒に振り分けるサンプルコード。
Chrome Extension “Color Thief – 色泥棒” で利用したコードのメモです。

やってることは単純で、RGB それぞれの値を以下の計算式に当てはめます。

Y = 0.3*R + 0.6*G + 0.1*B

で Y > 127 なら黒、それ以外なら白、と振り分けています。

<script>
	var checkTxtColor = function(cR,cG,cB){

		// 最高値は 255 なので、約半分の数値 127 を堺目にして白/黒の判別する
		var cY = 0.3*cR + 0.6*cG + 0.1*cB;
		
		if(cY > 127){
			return "#000000"; // 黒に設定
		}
		return "#FFFFFF"; // 白に設定
	}

	// 関数 checkTxtColor を実行
	console.log(checkTxtColor(200,200,100));

	// 実行結果
	// #000000
</script>
Read More

jQuery で指定できるメソッドには、コールバック関数を引数にとるものがあります。

良く使いそうな例だと

fadeTo(speed, opacity, [callback]) – jQuery 日本語リファレンス

とか

animate(params, [duration], [easing], [callback]) – jQuery 日本語リファレンス

あたり、です。

このコールバック関数、ひとつじゃ足りないよ!って思うことがしばしば。
そんなときは、以下のように

Read More

jQuery 少し使わないだけで、色々と忘れてしまうのでメモ。
せっかく使えるようになっても自分の言葉で記録に残さないとほんとすぐ忘れる。

以下、jQuery の基礎やらセレクタの指定方法の整理。

Read More

Chrome Extension の開発に便利なローカルストレージ機能。
JavaScript のデータをブラウザに保存でき、ブラウザを閉じても保持される、というもの。

なのでユーザが任意に設定した値を保存しておく、といったような用途に利用できます。

HTML5 の機能 Web Storage の一種で、クッキーの代替になるもののようです。

Web Storage とか 対応ブラウザなどの話は、
連載:人気順に説明する初めてのHTML5開発:ブラウザでストレージ? Web Storageを使いこなそう (1/3) – @IT
のサイトが詳しいです。

以下、使い方です。

Read More

Firefox OS を触ってみよう!に夫婦で参加してきました。

開発途中の Firefox OS を触れて、しかも中身をいじれる。
OS を自分でデザインできるっていう経験はあまりないですし、もしかしたら OS のデザインとして一部採用されるかも!楽しみ!ってことで、参加してきました。

004 さわってみよう Firefox OS | designers-hack(デザイナーズハック)

My image

@tommmmy さんが詳細なイベントレポートを起こしてくださっています。
そちらで楽しげな雰囲気が伝わるかと思います。

デザイナーズハック 004 「さわってみよう Firefox OS」 が終わりました | designers-hack(デザイナーズハック)

Read More

テキストをクリップボードにコピーするときのメモ。

Chrome Extension “Color Thief – 色泥棒” を作ってる時に悩んだのですが、
任意のテキストをクリップボードへコピーするなら、

document.execCommand("copy");

これ書けばできるだろーと思ってたら、なんでだかできない。

色々調べたら、任意のテキストなんでもできるわけではなくて、
テキストフォーム上にあるテキストにしか機能しないようです。

Read More

重複する値を排除しながら配列に値をどんどん追加するときのやり方メモ。

まず、既に配列に入っているか値をチェックする関数を作っておく。

// 配列array 内に 変数str と同じ値が存在するかを確認
// 同じ値が存在したら true, 存在しなかったら false を返す
var checkDuplicate = function(array, str){
	for(var i =0; i < array.length; i++){
		if(str == array[i]){
			return true;
		}
	}
	return false;
};

配列に値を追加するところで、下のような感じでチェックすればOK。

if( !checkDuplicate(colors, c) ){
	colors.push(c);
}

この例だと

checkDuplicate関数 に 配列colors と 変数c を引数で渡してチェックさせて、
false が帰ってきたら、配列colors に 変数c の値を追加する。
既に同じ値が入っていたら、無視して次の処理へ。

という if文 になってる。

これで、配列colors に入る値は全てユニークで重複がないものになる。

Read More