タグ: javascript

Google Mapsやカーナビゲーションで有名なゼンリン地図が採用している日本測地系基準の緯度経度と
国土地理院地図が採用している最新の測地系である世界測地系を相互変換するスクリプトです。

See the Pen convert latlng by webdev (@webdev-jp-net) on CodePen.0

HEX（#ff000などの１６進数カラーコード）をrgbに変換するJavaScriptです。
HEX指定の色を、半透明にしたくてrgbaコードがほしい時に使いました。

See the Pen HEX <--> RGB by webdev (@webdev-jp-net) on CodePen.0

HEX→RGB

HEXは、R2桁+G2桁+B２桁が集合した6桁なので
この手順でRGBに変換できます。

1. substringで2桁ずつ３つに分解
2. parseIntで16進数から10進数に変換

RGB→HEX

HEXからRGBの逆パターンです。

1. R,G,Bそれぞれの値をparseIntで10進数から16進数に変換
2. ６桁に結合

たとえば、ｊQueryでイベントを設定するとき、こんな書き方をしたことはありませんか？

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(obj) {
	var v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', function(){
	deleteLinefeed($(this));
});

この無名関数が冗長で気になる！
なにより、無名関数で紐付けたら、イベントリスナーを削除しにくいです。

そこで、イベントオブジェクトのcurrentTargetを活用すると
このようにスッキリさせられます。

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(e) {
	var obj = $(e.currentTarget),
	v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', deleteLinefeed);

currentTargetで取得するのは、イベントを紐付けてあるオブジェクトです。
これと似たtargetでは、イベントを発動させたオブジェクトを取得できます。

参考：
三章第五回　イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

jQueryなしの環境で、DOM要素読み込み後javascriptを実行させる書き方です。
ちなみに、jQueryありの場合はこうなります。

$(function(){
	// ここへ処理を書く
});

“jQueryなしのDOM読み込み後実行処理” の続きを読む