Archive for the ‘JavaScript’ Category
6月 16th, 2010 | 
Author:
(function(arg){
//処理内容を記述する
var foo = 2;
alert(foo+arg); //5
})(3);
jQuery UIの定義とかでこのような表記を見かけ、何だろうこれはと思っていた。要はJavaScriptで無名関数を宣言し、すぐ実行する方法らしい。こいつを使うと何がいいかというと、グローバルスコープを汚染しないで済むというところがいい。もしこれを使わないで書いた場合、var fooの時点でグローバルスコープにfooが定義されてしまい、ちょっと気持ち悪い感じになるところを回避することが出来る。
Posted in 
ざっくりと言ってしまえば、Javaのコードが書ければAjaxできちゃうぜ、いえい！ということです。
例えば、
public class FooClass {
public void call(String str) {
return str+"!!!";
}
}
と書いて、JavaScriptから
var str = FooClass.call("いえい");
alert(str); //いえい!!!
こんな感じでサーバサイドの処理が呼び出せちゃったりします。これはかなり楽、素晴らしい。
http://getahead.org/dwr
こっからDownloadをクリックして、jarファイルを落とします。jarファイル１個でできる、すごーい！
こいつをWEB-INF/libに置いて、web.xmlに
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
マッピングを書いてやる。そしてWEB-INF直下にdwr.xmlを配置して
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr//dwr30.dtd"> <dwr> <allow> <create javascript="FooClass" creator="new"> <param name="class" value="jp.commutalk.dwr.FooClass"> </param> </create> </allow> </dwr>
呼び出したいhtmlに、こんな感じでJavaScriptへのリンクを埋め込む。
<script src='dwr/interface/FooClass.js'></script>
DWRが自動で生成してくれるので、特に使う側はJavaScriptを書く必要がないところがすごいところ。
で、冒頭に書いたようにあたかもJavaのクラスを呼び出すようにして呼び出せる。素晴らしいね。
ここがかなり詳しく書いてあるので、この辺を見て試してみると幸せになれるかも。
今回は前回のjQuery UIの形式でフォームへの入力内容を監視するプラグインを作ってみた。まだ作りかけだが、正規表現で内容をチェックして正しい内容かチェックしてくれる優れモノだ。ありふれたネタではあるがサンプルとして貼ってみる。
(function($){
$.widget("sample.inputchecker",{
options: {
exp:/.{4,50}/,
reject:"４文字以上５０文字以下の文字列を入力してください。",
accept:"正しい入力です。",
acceptCSS:{
"font-size":"0.7em",
"font-weight":"bold",
"color":"#5c5"
},
rejectCSS:{
"font-size":"0.7em",
"font-weight":"bold",
"color":"#c55"
},
acceptIcon:undefined,
rejectIcon:undefined
},
_init: function() {
var obj = this;
var options = obj.options;
var icon = $("<img></img>");
var mesbox = $("<div></div>");
icon.css({
"width":"16px",
"height":"16px"
});
function checkValue(){
if(obj.element.val().match(obj.options.exp)) {
mesbox.text(obj.options.accept);
mesbox.css(obj.options.acceptCSS);
if(obj.options.acceptIcon!=undefined) {
icon.attr("src",obj.options.acceptIcon);
}
} else {
mesbox.text(obj.options.reject);
mesbox.css(obj.options.rejectCSS);
if(obj.options.rejectIcon!=undefined) {
icon.attr("src",obj.options.rejectIcon);
}
}
};
obj.element.after(mesbox);
obj.element.after(icon);
obj.element.keyup(checkValue);
checkValue();
}
});
})(jQuery);
$(“input”).inputchecker();とでも書いてやれば、内容が４文字以上５０文字以下か自動でチェックしてくれる入力ボックスの完成だ。
$("input").inputchecker({
exp:/.{4,100}/,
acceptIcon:"accept.png",
rejectIcon:"reject.png"
});
とすると４文字以上１００文字以下かチェックする入力ボックスとなる。アイコン画像を指定してやればボックスの右に状態も表示してくれる優れモノ。
今回からタイトルを変更したいと思う。なぜならば、jQuery UIのプラグイン形式というものもあり、そちらに準拠した方があとあといいのではないか、という判断だ。どんな形式かというとこちら。
(function($){
$.widget("foobar.plugin",{
options: {
css:{
"font-size":"24px"
}
},
_init: function() {
this.element.css(this.options.css);
};
});
})(jQuery);
jQueryセレクタで選んだ要素のスタイルを変更するプラグイン。これを実際に使うには、
$("div").plugin();
のように使ってやるといい。
$("div").plugin({
css:{
font-size:4px,
font-weight:bold
}
});
のようにオプションを指定してやることもできる。かなり便利ですね。
onclick要素を用いてJavaScriptを呼び出す際の注意点。
シングルクオーテーションをHTMLエンコードすると＆#39;(＆は本来半角文字)という表記になるが、これがJavaScriptへ引数として渡す文字列の中に含まれていると、なんとシングルクオーテーションとして認識されてしまう。XSSの原因となるので注意しよう。
onclickでJavaScriptに渡す際にデコードしているということだろうか。なんとも分かりにくい仕様だなあ・・・。
でいいじゃない。という話です。
モデルだけをサーバサイド（Perl、PHP、Java、などなどなんでもよし）において、JavaScriptにコントローラー的な動作をすべて行わせる。サーバーサイドとはAJAX通信でJSONをやり取りすれば、規格も合わせ易いし、通信量も抑えられるはず。分散処理もうまいことやればやりやすくなるのではないだろうか、といいことづくめじゃない？という提案ですね。
なにより構造が分かりやすい。完全分業で行えるし。というわけでこういう感じでやろう。やろうよ！（誰に言ってるんだ）
言いたいことは、まさにタイトルの通り。jQueryのプラグイン形式を利用して、再利用可能なウェブページの部品を作りましょう、という話だ。サーバとの通信側はAJAX通信で書けば、どこに置いても正しく機能する便利な部品の完成だ。
jQuery.fn.foobar = function(options) {
//プラグインの処理内容
return this.each(function(){
//セレクタで指定したオブジェクトへの処理
});
}
書き方はこんな感じ。これで$(“#test”).foobar()とかで任意の場所に部品を埋め込むことが出来る。
例えば、
jQuery.fn.foobar = function(options) {
return this.each(function() {
$(this).html("プラグインのテスト");
});
}
とやれば、このプラグインを適用したDOMの中身が「プラグインのテスト」に置き換わる。色々実装例をこれから書いていきたいと思う。
最近すっかりJSONにはまっている。["value1","value2"]で配列、{“key1″:”value1″,”key2″:”value2″}でハッシュ。構造を記述するならXMLよりJSONがやっぱり便利。でも当のJavaScriptに標準でObjectからJSON形式の文字列を吐き出す関数が無いのはいかがなものだろうか。(foreachまわして文字列に変換しちゃえばいいけど)unevalが標準機能として欲しいです。データベースでリストを管理する時もJSONで書いて格納しちゃえば楽ですね。
以下、JavaScriptでObjectをJSON形式でシリアライズする方法。
http://www.json.org/json2.jsをダウンロード。
json2.jsをインクルードして、var serializedString = JSON.stringify(object)
そのままだと警告のダイアログボックスが出てきてうっとうしいので、json2.jsの一行目は削除しておくこと。
おしまい。