パターンマッチングした部分の抽出

rubyの例から。

str = "hello, world" 
if str =~ /hello, (.+)/ 
    puts $1 
end

これで、「world」が出力されます。
これと同じことをjavascriptでどうやるか、ずっと分からなかったんだけど、ひょんな事から知ることが出来ました。

var str = "hello, world"; 
if (str.match(/hello, (.+)/)) { 
    alert(RegExp.$1); 
}

RegExp.$1だったとは!


今読んでいるこの本に載っていました。
もちろん、Web脆弱性に関する解説本なんだけど、javascriptのこういうテクとかがさらっと載っていたりして1粒で2度美味しい仕掛けになっています。この先もこういうのが散らばっているかと思うと楽しみです♪

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

jQueryの歴史

jQueryは1.2から使い始めて、その後新しいリリースに追いつけていない。
ちゃんと勉強しようと思い、まずはリリース状況を把握することにしました。

2011.5.3 jQuery1.6

2011.3.31 jQuery1.5.2
2011.2.24 jQuery1.5.1
2011.1.31 jQuery1.5

2010.11.11 jQuery1.4.4
2010.10.16 jQuery1.4.3
2010.2.19 jQuery1.4.2
2010.1.25 jQuery1.4.1
2010.1.14 jQuery1.4

2009.2.20 jQuery1.3.2
2009.1.21 jQuery1.3.1
2009.1.14 jQuery1.3

2008.6.4 jQuery1.2.6(1.2.4, 1.2.5はスキップ)
2008.2.8 jQuery1.2.3
2008.1.15 jQuery1.2.2
2007.9.16 jQuery1.2.1
2007.9.10 jQuery1.2

2007.8.24 jQuery1.1.4
2007.6.5 jQuery1.1.3.1
2007.6.1 jQuery1.1.3
2007.2.27 jQuery1.1.2
2007.1.22 jQuery1.1.1
2007.1.14 jQuery1.1

2006.12.12 jQuery1.0.4
2006.10.27 jQuery1.0.3
2006.10.9 jQuery1.0.2
2006.8.31 jQuery1.0.1
2006.8.26 jQuery1.0

ちなみにjQuery1.0のソースはここにあります。
かわいいもんですね。これくらいなら自分でも読んでみようかな、という気になりますね。

jQuery mobileの$.mobile関数がもっているプロパティや関数一覧

なんかの役に立つかもしれないので、メモ。

activeBtnClass:string
activePage:object
activePageClass:string
addResolutionBreakpoints:function
ajaxFormsEnabled:boolean
ajaxLinksEnabled:boolean
button:function
changePage:function
checkboxradio:function
collapsible:function
defaultTransition:string
dialog:function
gradeA:function
idStringEscape:function
listview:function
loadingMessage:string
metaViewportContent:string
navbar:function
nonHistorySelectors:string
page:function
pageLoading:function
selectmenu:function
silentScroll:function
slider:function
subPageUrlKey:string
textinput:function
transitions:object
updateHash:function
urlStack:object
widget:function


一覧表示のプログラムはこんな感じです。

var ary = [];
for(var x in $.mobile) {
	ary.push(x + ":" + typeof($.mobile[x]));
}
console.info(ary.sort().join("\r\n"));

idのescape

jQuery mobileを使っていると、ページ遷移後のdivにはidが自動的に振られる。

<a href="/sample/next.do?init=true&param=x">次へ</a>

こんなURLだと、idはそのまんまで

<div data-role="page" id="/sample/next.do?init=true&param=x">

になります。
とある事情から、このdivを取得して操作する必要が出たので、このように書きました。

var page = $('#/sample/next.do?init=true&param=x');

すると、正しく動きませんでした。
どうやらjQueryのidセレクトするには記号が含まれるとダメのようです。
で、「/」や「.」「?」「=」「&」なんかをエスケープしてやるとうまくいきました。

function escape(str) {
  return str.replace(/\/|\?|\=|\&|\./g, function(val){
    return '\\' + val;
  });
}

$('#' + escape('/sample/next.do?init=true&param=x'));

でも、もっと楽チンな方法があると思うんだなー。
教えて欲しいです!

WEBアプリケーション開発で使ったモノ

いい感じのサイトを見つけて使うんだけど、使い捨てになってメモしておくのを忘れてしまう。。
ちゃんとメモしよう!

ぐるぐるのジェネレートサイト

ぐるぐるの正式名称はスピナーアニメーション(spinner animation)というらしい。
http://www.ajaxload.info/

つやつやボタンジェネレートサイト

http://ferv.jp/app/icone/

アイコンを拡大するツール

はてブされてたヤツだけど、そんなにはすごくなかった。一応メモ。
http://toshiiy.blog22.fc2.com/blog-entry-127.html

配列かどうかを見分ける方法

メモメモ。

var ary = [];
alert(ary instanceof Array);

typeofだとaryはobjectってなのるのに、instanceofを使うとこの場合trueになるんだね。ま、全然違うものなんだろう。

IE7におけるgetElementByIdの不思議な挙動

ここを読んで。
http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/

フォームのinput要素のname属性とid属性は同じ値にしましょう

<input type="text" name="a" value="hello, world">

というHTMLがあって、次のようなjavascriptを書いたとする。

var elem = document.getElementById('a');
alert(elem ? elem.value : "aというidを持つ要素はありません");

当然aというidを持つ要素は無いわけだから画面には「aというidを持つ要素はありません」と出るはずなんだけど、これは「hello, world」と表示される。実際になった。何じゃこりゃ。
で、次にHTMLをこんな風にしてみた。

<input type="text" name="a" value="hello, world">
<input type="text" name="b" id="a" value="morning, world">

これで先ほどのjavascriptを実行してみると、、、なんと!また「hello, world」ってなった。ちょっとひどすぎでは。実はこれ、次のようにすると、初めてうまくいくのだ。

<input type="text" name="b" id="a" value="morning, world">
<input type="text" name="a" value="hello, world">

つまり、順序によって取れたり取れなかったりするってこと。はまりそうだ・・・

form要素にはname属性を定義するべきではない。

これは上の問題と大変似ているので、詳細は割愛する。
・・・ってあるんだけど、これはちょっとよく分からなかった。なんでだろう?

idに「description」という値は使うな

これも似たようなヤツです。

<head>
  <meta name="description" content="website description" />
 ・・・
</head>
<body>
・・・
  <input type="text" name="a" id="description" value="hello, world">
・・・

こんなhtmlがあったときに次のjavascriptを実行したとする。結果はどうなるか?

var elem = document.getElementById('description');
alert(elem ? elem.value : "aというidを持つ要素はありません");

「undefined」と表示されます。メタ要素が取得されてしまっているので、その要素にはvalueがないってのがその原因。メタ要素より先に書かれることも無いだろうからこれは常に「undefined」でしょうね。ちなみにこれはIE6でも起こるとありました。


・・・とまぁ、そういうことらしいです(閉口気味)。
もちろんfirefoxなどのブラウザなどでは期待したとおりの動きになります。IEなんて×××!!