JavaScript:配列／連想配列のコピー

JSON.parse(JSON.stringify( (連想)配列 ))

JavaScript:配列／連想配列の要素数の取得

連想配列の要素数を取得するのにいつもfor文回してたけど、Object.keysなるもので要素の配列がとれるらしい。
だからObject.keys( (連想)配列 ).lengthで要素数が取得できる。
配列も通常はlengthで取得するけど、lengthは実際は「添字の最大値 + 1」なので
var arr=[];
arr[0]="A";
arr[1]="B";
arr[9]="C";
なんてイヤらしい配列だと、arr.lengthは 10 を返すので、その場合は Object.keys(arr).length で取得すれば良い。

javascript:２つの地点の距離を求める

javascriptで２つの地点の緯度・経度から距離を求める。

function getDistance(lat1, lng1, lat2, lng2) {
    function radians(deg) {return deg * Math.PI / 180;}
    return 6378.14 * Math.acos(Math.cos(radians(lat1))
         * Math.cos(radians(lat2))
         * Math.cos(radians(lng2) - radians(lng1))
         + Math.sin(radians(lat1)) * Math.sin(radians(lat2)));
}

jQuery:UI datepickerの週末に色をつける

jQuery UI datepickerの日付に任意の色をつけるには、beforeShowイベントとonChangeMonthYearイベントで、日付の文字色を変更する。※イベントが発生した時点で色付けしようとしてもダメなので、setTimeoutで処理を遅延して実行させる。

    function setWeekendColor() {
        var tr = $("table.ui-datepicker-calendar > tbody > tr");
        for (var i = 0; i < tr.length; i++) {
            if (tr[i].firstChild.firstChild.style)
                tr[i].firstChild.firstChild.style.color = "red";    //sunday
            if (tr[i].lastChild.firstChild.style)
                tr[i].lastChild.firstChild.style.color = "blue";    //saturday
        }
    }
    $.datepicker.setDefaults({
        beforeShow: function () {setTimeout(setWeekendColor, 100);},
        onChangeMonthYear: function () {setTimeout(setWeekendColor, 100);}
    });

jQuery UI Dialog:Dialog内の配置がめちゃくちゃになる

jQuery UI Dialog を使ったら、Dialog内の項目の配置がめちゃくちゃだった。原因はDialogとなるdivのstyleに「position: absolute;」を指定していためだったが、なぜこれがDialog内の配置に影響を与えるのかは分からない。ただこれを削除したら正常に表示された。

JavaScript:サイトのhtmlソースを取得する

仕掛けはここの記事と同じ。受け取るデータがDBデータでなくurlエンコードされたhtmlソースというだけ。やってることはこのスクリプト参照。

アドレス : ソースを取得
htmlソース

JavaScript:日付オブジェクトにformatメソッドを追加

JavaScriptのDateオブジェクトにVBのFormat関数もどきのメソッドを追加。
非常に手抜きな処理の実装だけど自分的には事足りてるので良しとする。
 
 書式文字

ggg	元号（明治、大正、昭和、平成）
gg	元号（明、大、昭、平）
g	元号（M、T、S、H）
ee	和暦年2桁（1桁の場合は前ゼロ付加）
e	和暦年
yyyy	西暦年4桁
yy	西暦年下2桁
mm	月2桁（1桁の場合は前ゼロ付加）
m	月
aaaa	曜日（日曜日…土曜日）
aaa	曜日（日…土）
dd	日2桁（1桁の場合は前ゼロ付加）
d	日
hh	時2桁（1桁の場合は前ゼロ付加）
h	時
nn	分2桁（1桁の場合は前ゼロ付加）
n	分
ss	秒2桁（1桁の場合は前ゼロ付加）
s	秒
zzz	ミリ秒3桁（3桁未満の場合は前ゼロ付加）
z	ミリ秒

Date.prototype.format = function (formatStr) {
    if (formatStr) {
        var s = formatStr;
    } else {
        var s = "yyyy/mm/dd hh:nn:ss";
    }
    function getWareki(d, p) {
        var wareki = new Array(
            {"year":    0, "g": "",  "gg": "",   "ggg": "西暦"},
            {"year": 1867, "g": "M", "gg": "明", "ggg": "明治"},
            {"year": 1911, "g": "T", "gg": "大", "ggg": "大正"},
            {"year": 1925, "g": "S", "gg": "昭", "ggg": "昭和"},
            {"year": 1988, "g": "H", "gg": "平", "ggg": "平成"}
        );
        if (d < new Date(1868, 8, 8)) {
            return wareki[0][p];
        } else if (d < new Date(1912, 6, 30)) {
            return wareki[1][p];
        } else if (d < new Date(1926, 11, 25)) {
            return wareki[2][p];
        } else if (d < new Date(1989, 0, 8)) {
            return wareki[3][p];
        } else 
            return wareki[4][p];

    }
    function getWeek(d, p) {
        return "日月火水木金土".charAt(d.getDay()) + (p === "aaa" ? "" : p === "aaaa" ? "曜日" : p);
    }
    function fillZero(value, zero) {
        return (zero + value).slice(- zero.length);
    }
    s = s.replace(/ggg/g , getWareki(this, "ggg"));
    s = s.replace(/gg/g  , getWareki(this, "gg"));
    s = s.replace(/g/g   , getWareki(this, "g"));
    s = s.replace(/ee/g  , fillZero(this.getFullYear() - getWareki(this, "year"), "00")); 
    s = s.replace(/e/g   , (this.getFullYear() - getWareki(this, "year")).toString()); 
    s = s.replace(/yyyy/g, this.getFullYear().toString());
    s = s.replace(/yy/g  , fillZero(this.getYear() % 100, "00")); 
    s = s.replace(/mm/g  , fillZero(this.getMonth() + 1, "00"));
    s = s.replace(/m/g   , (this.getMonth() + 1).toString());
    s = s.replace(/aaaa/g, getWeek(this, "aaaa"));
    s = s.replace(/aaa/g , getWeek(this, "aaa"));
    s = s.replace(/dd/g  , fillZero(this.getDate(), "00"));
    s = s.replace(/d/g   , this.getDate().toString());
    s = s.replace(/hh/g  , fillZero(this.getHours(), "00")); 
    s = s.replace(/h/g   , this.getHours().toString());
    s = s.replace(/nn/g  , fillZero(this.getMinutes(), "00")); 
    s = s.replace(/n/g   , this.getMinutes().toString());
    s = s.replace(/ss/g  , fillZero(this.getSeconds(), "00")); 
    s = s.replace(/s/g   , this.getSeconds().toString());
    s = s.replace(/zzz/g , fillZero(this.getMilliseconds(), "000")); 
    s = s.replace(/z/g   , this.getMilliseconds().toString());
    return s;
}

ex.)
new Date("2010/1/2 3:45:6").format("yyyy/mm/dd hh:nn:ss");
　　　　　↓
2010/01/02 03:45:06

JavaScript:リッチテキストエディタで行間を詰める

iframeをdesignmode=onしてリッチテキストエディタを作る場合、改行で<p>タグが挿入されるので行間が広く空いてしまう。行間を開けないようにするには、最初にiframeのbodyエレメントに<div><br></div>(IEは<div>&shy;</div>)を設定しておく。そうすると改行時に<div>タグが挿入されるようになり、行間が詰まるようになる。
但しIEは全選択→削除とすると<p>タグに戻るのが難点。回避方法がありそうな気はするが今のところ不明。
 
作成したリッチテキストエディタはこちら。文字をグラデーションやマルチカラーに装飾できるようにした。スゴい苦労したけど。（苦笑）

JavaScript:クロスドメインで動的にデータを取得

JavaScriptでクロスドメインで動的にデータを取得する方法。
scriptタグを動的に作って、そのsrc属性でcgiを指定する。
例えば郵便番号をパラメータで受け取って検索した住所をJavaScriptのコードで返すcgi作る。

http://どこかのサイト/郵便番号検索.php?郵便番号=1000001&コールバック関数=getAddr

<cgiの処理>
パラメータの郵便番号からデータベースを検索し住所を取得する。
取得した住所を受け取るコールバック関数を実行するJavaScriptを出力する。
//言葉にするとややこしいが出力するコードは単純
getAddr(["検索した住所"]); //コールバック関数に結果を渡す（複数返ることがあるので配列にする）

このcgiをsrc属性とするscriptタグを動的に作り、コールバック関数でcgiが生成した住所のパラメータを受け取る。

<サンプル>
（緑里庵のサイトに郵便番号データベースから住所を取得するphpを設置し、それをJavaScriptで取得する。）

郵便番号を入力して検索ボタンを押してください。
郵便番号
住所

↑のソース（仕組みはsaadd.js参照）
<script type="text/javascript" src="http://www.ryokurian.jp/atelier/saadd/saadd.js" charset="utf-8"></script>
郵便番号を入力して検索ボタンを押してください。
郵便番号 <input type="text" size=8 length=8 id="postCD" />
<input type="button" onclick="_ryokurian_searchAddr(document.getElementById('postCD').value, 'addr');"
value="検索" class="input-submit" />
住所 <input type="text" id="addr" size=50 />

JavaScript:ブラウザによる記述の違い

JavaScriptでブラウザによる記述の違い。いっぱいありそうなんで随時気がついたものを追加。

FireFox	ie
event.target	event.srcElement
element.parentNode	element.parentElement
element.textContent	element.innerText
element.style.cssFloat	element.style.styleFloat
element.addEventListener	element.attachEvent
element.__defineSetter__	無し
element.__defineGetter__	無し
getAttribute("class")	getAttribute("className")
window.getSelection()	document.selection
selection.getRangeAt(0)	selection.createRange()
var e=document.createEvent(event type); e.initEvent(event name, true, true); element.dispatchEvent(e);	element.fireEvent("on"+event name)

JavaScript:マウスのクリック位置を取得

JavaScriptでマウスのクリック位置をクリックした要素のClient座標で取得する。

FireFox
x座標 = event.layerX - document.getElementById("img").offsetLeft;
y座標 = event.layerY - document.getElementById("img").offsetTop;

Opera, Chrome, IE
x座標 = event.offsetX;
y座標 = event.offsetY;

サンプルはこちらのページ。