Webアプリケーションの申し込み画面等で住所を入力させる場合に、郵便番号から住所を参照させたい時がよくあります。
こんな感じですね
これをJavaScript（クライアントサイド）とPHP（サーバーサイド）の組合せで作ってみます。
郵便番号のデータは、日本郵便のサイトから取得することができます。
ここでは、「読み仮名データの促音・拗音を小書きで表記するもの」の全国版を取得しました。
ブラウザ上でマウスをドラッグすると内容が選択されてコピーしたりできますが、
ドラッグだけでなくダブルクリックでも選択されてしまうので、Webアプリ等の場合はこの挙動が邪魔になる場合があります。
選択をできないようにするには以下の方法があります。
onselectstartイベントでfalseを返せば選択できなくなります。
document.onselectstart = function() {
return false;
}
JQueryを使う場合はこんな感じで
今回は久しぶりにWebネタです。
HTTPのページからHTTPSを使ってJavaScriptでサーバと通信するのは特に問題無さそうにも思えますが、普通にAjaxを使おうとしても拒否されてしまいます。
正規表現はプログラミングで文字列が、あるパターンに従っているかどうか確認したい時等によく使いますが、?とか+とか*とかの記号を使った記述が多いため、一見するとどういうパターンにマッチさせようとしているのか理解しにくい場合があります。こいういう場合、パターンの頭から注意深く見て行く必要があります。
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
これは、JavaScriptでURL文字列にマッチさせる正規表現です。一見すると頭がクラクラしてきそうな記号の羅列です。
この正規表現を読み解いて行こうと思います。
最初の/と最後の/で、これが正規表現リテラルであることを示しています。意味的には次のように書いた場合と同じです。
JavaScriptはクロージャが使える言語です。クロージャと聞くとなかなかピンときにくい概念なんですが、ものすごく端折って言ってしまうと、関数(メソッド)の中から、その外側で定義された変数にアクセスできるというものです。
var adder = function() {
var value = 0;
return {
add: function(inc) {
value += inc;
},
getValue: function() {
return value;
}
}
}
var a = adder();
a.add(2);
a.add(5);
console.log(a.getValue()); // 7と出力される。
外側の関数で宣言したvalueという変数に、内部で生成して返すオブジェクトのメソッドからアクセスしています。
valueは普通はadder()の呼び出しが完了した時点で消えてしまうはずですが、内部で生成したオブジェクトから参照されているため、消えずに残っているのです。
これで何が便利になったかと言うと、valueという、実装内部でしか使わない変数のカプセル化が実現できるということです。