2015年03月09日

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

JSON.parse(JSON.stringify( (連想)配列 ))
posted by 忘却の達人 at 07:51| Comment(1) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

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 で取得すれば良い。
posted by 忘却の達人 at 21:38| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

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)));
}
posted by 忘却の達人 at 14:24| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

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);}
});
posted by 忘却の達人 at 09:09| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2010年11月03日

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

jQuery UI Dialog を使ったら、Dialog内の項目の配置がめちゃくちゃだった。原因はDialogとなるdivのstyleに「position: absolute;」を指定していためだったが、なぜこれがDialog内の配置に影響を与えるのかは分からない。ただこれを削除したら正常に表示された。
posted by 忘却の達人 at 00:32| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2010年08月27日

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

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

アドレス :
htmlソース
posted by 忘却の達人 at 06:45| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

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

posted by 忘却の達人 at 12:38| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2010年08月02日

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

iframeをdesignmode=onしてリッチテキストエディタを作る場合、改行で<p>タグが挿入されるので行間が広く空いてしまう。行間を開けないようにするには、最初にiframeのbodyエレメントに<div><br></div>(IEは<div>&shy;</div>)を設定しておく。そうすると改行時に<div>タグが挿入されるようになり、行間が詰まるようになる。
但しIEは全選択→削除とすると<p>タグに戻るのが難点。回避方法がありそうな気はするが今のところ不明。
 
作成したリッチテキストエディタはこちら。文字をに装飾できるようにした。スゴい苦労したけど。(苦笑)
posted by 忘却の達人 at 07:15| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

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 />
posted by 忘却の達人 at 06:31| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2010年04月25日

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

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

FireFoxie
event.targetevent.srcElement
element.parentNodeelement.parentElement
element.textContentelement.innerText
element.style.cssFloatelement.style.styleFloat
element.addEventListenerelement.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)
posted by 忘却の達人 at 20:23| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

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;
サンプルはこちらのページ
posted by 忘却の達人 at 22:11| Comment(0) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。