2015年03月09日
JavaScript:配列/連想配列のコピー
JSON.parse(JSON.stringify( (連想)配列 ))
2015年03月08日
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 で取得すれば良い。
だからObject.keys( (連想)配列 ).lengthで要素数が取得できる。
配列も通常はlengthで取得するけど、lengthは実際は「添字の最大値 + 1」なので
var arr=[];
arr[0]="A";
arr[1]="B";
arr[9]="C";
なんてイヤらしい配列だと、arr.lengthは 10 を返すので、その場合は Object.keys(arr).length で取得すれば良い。
2011年04月09日
javascript:2つの地点の距離を求める
javascriptで2つの地点の緯度・経度から距離を求める。
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))); }
2010年11月20日
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);}
});
2010年11月03日
jQuery UI Dialog:Dialog内の配置がめちゃくちゃになる
jQuery UI Dialog を使ったら、Dialog内の項目の配置がめちゃくちゃだった。原因はDialogとなるdivのstyleに「position: absolute;」を指定していためだったが、なぜこれがDialog内の配置に影響を与えるのかは分からない。ただこれを削除したら正常に表示された。
2010年08月27日
2010年08月21日
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
2010年08月02日
JavaScript:リッチテキストエディタで行間を詰める
iframeをdesignmode=onしてリッチテキストエディタを作る場合、改行で<p>タグが挿入されるので行間が広く空いてしまう。行間を開けないようにするには、最初にiframeのbodyエレメントに<div><br></div>(IEは<div>­</div>)を設定しておく。そうすると改行時に<div>タグが挿入されるようになり、行間が詰まるようになる。
但しIEは全選択→削除とすると<p>タグに戻るのが難点。回避方法がありそうな気はするが今のところ不明。
作成したリッチテキストエディタはこちら。文字をグラデーションやマルチカラーに装飾できるようにした。スゴい苦労したけど。(苦笑)
但しIEは全選択→削除とすると<p>タグに戻るのが難点。回避方法がありそうな気はするが今のところ不明。
作成したリッチテキストエディタはこちら。文字をグラデーションやマルチカラーに装飾できるようにした。スゴい苦労したけど。(苦笑)
2010年06月07日
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 />
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 />
2010年04月25日
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) |
2010年04月07日
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;サンプルはこちらのページ。