はじめに
昨日,相方 (お仕事的な意味で) に聞かれながらもすぐに答えられなかったので,復習の意味もこめてメモ.
問題
1 2 3 4 5 | <div id="target"> <div>A</div> <div>B</div> <div>C</div> </div> |
id="target" な div 要素内のそれぞれの div 要素に対してクリックイベントを登録したい...そんなとき,ついつい次のように書いてしまいます.(自分と相方(お仕事的な意味で)が.)
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> var divs = document.getElementById( 'target' ) .getElementsByTagName( 'div' ) ; for( var i = 0; i < divs.length; i++ ) { divs[i].addEventListener( 'click', function() { alert( i ); } ); } </script> |
このコードを実行すると,イベント登録したどの要素 (A,B,C とそれぞれ表示されるはず) をクリックしても,
3
なアラートしか表示されません.
一解決策
こんな風にしてみました.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> var divs = document.getElementById( 'target' ) .getElementsByTagName( 'div' ) ; for( var i = 0; i < divs.length; i++ ) { ( function() { var j = i; divs[i].addEventListener( 'click', function() { alert( j ); } ); } )(); } </script> |
それぞれの要素をクリックすると,
1
2
のようにアラートが表示されるかと.
解説
サイ本 は 4.3.1 項,最初の 2文がすべてを物語っていましたね.
C や C++、Java と異なり、JavaScript にはブロックレベルのスコープがありません。ある関数で宣言された変数は、どのブロックで宣言されたのかにかかわらず「関数全体」で有効です。
おわりに
ここしばらく jQuery (そういえば,1.2.6 が出てますね) を使ってばかりで意識すらしていない状況だったので,改めて勉強し直せました.
クロスブラウザ問題とか 1つのイベントリスナーを使い回すとかは,この際おいときましょう.
はじめに
投げっぱなしてみるテスト.
投げっぱなしの内容
初めてのJavaScript を本屋で見つけたのでとりあえず買ってみました.
サイ本 敷居高くね? と感じられている方 (といっても,私にとっても難しすぎる本です ><) 向けに,そんな読書会があってもいいのかな,とふと思いました.
各章末には練習問題もあるので,このあたりを課題とかディスカッションとかしてみてもおもしろいかもですね.
おわりに
DeLLa.JS で二部構成にしてみるのもいいかも.
おまけ
やっぱり 「子サイ本」とでも呼ぶのでしょうかね?
ちなみに,各本の後ろの方の解説によると,サイ本のサイは 「ジャワサイ」,子サイ本(仮)のサイは 「クロサイ」 だそうです.
はじめに
東京小出張記最終回は,今回の小出張の 2大目的のひとつである The JUI 2008 Tokyo,このカンファレンスについてのお話,というか写真とメモ書きです.
そのときにメモったのをそのまま書きます.解釈が間違ってる部分もあると思いますが...
では以下.
はじめに
「ビジネス旅館 松島」をチェックアウト,The JUI 2008 Tokyo 会場へ向かうまでのお話です.
ちなみに,品川駅までは歩いてみました.
鮫洲 ~ 品川
とにかく国道15号線を北上...
意外と簡単にたどり着けました.
新橋駅を降りて銀座
新橋駅から The JUI 2008 Tokyo 会場まではすぐ近くでした.
時間にかなり余裕があったので,ぶらりとしていたところ 「R25カフェ」 を発見.ここで時間をつぶしてました.
ThinkPad を取り出して,電源を確保して...長居させていただきました.
おわりに
その 5 は The JUI 2008 Tokyo のお話です.
はじめに
YAPC::Asia 2008 参加後から The JUI 2008 当日までの空白(?)の数日間のお話を,以下.
基本生活
大岡山から鮫洲(さめず)へ移動,「ビジネス旅館 松島」の 4畳半な部屋に引きこもって リャマ本 → アルパカ本 を読んでました.
ちょこっと外出
その帰りに少し散歩したり...
風呂上がりの夕食に出かけたり...
振り返ってみると,「食べる」 以外外出してませんでしたね,ホント.
おわりに
Perl について知らないことだらけだったことを実感すると同時に,その辺を改めて学んだ感じです.といっても,ちょいと高度めのアルパカ本の方は,今後も何度か読み直すことになりそうですけどね.
ではでは,その 4 へ.
最近の閲覧数
- [emacs] インデントをハイライトしてくれる「Highlighting indentation」で脱・インデント迷子
- IRC初心者がIRCを通知ツールとして使ってみる,または個人的IRC環境のメモ
- UbuntuとCentOSとにおけるlogrotateの挙動の違いでハマった
- aquaさんで開通間近の新東名高速道路を走ってきた
- Textile記法で手軽にWikiっぽく記録を残しておくツール「SiTeWiki」を作ってみた
- 「GTDme」というオレオレGTDツールを作って使い始めようとしています
- [git][perl] rebase祭りを支援するツール「git-rebase-matsuri」というのを書いてみた
- [perl] Cache::FileCacheが保存するファイルの中身を覗いてみるメモ
- Kansai.pm #14 へおジャマさせていただいてきた
- HTTPSとバックエンドなPlackアプリケーションとPlack::Middleware::ReverseProxyとHTTPヘッダ「X-Forwarded-HTTPS」と
最近のエントリ
- [perl] Image::Sizeで画像サイズを取得できないことがある件とその(アドホックな)対処方法
- 5月連休とaquaさん
- [perl][php] Textile記法+GeSHiでシンタックスハイライトするためのText::Textile::Pluggableプラグインを書いてみた
- [perl] Markdown記法をプラグインっぽく拡張できる「Text::Markdown::Pluggable」というモジュールを書いてみた
- [perl] Textile記法をプラグインっぽく拡張できる「Text::Textile::Pluggable」というモジュールを書いてみた
- aquaさんで入鹿池を2周してきた(約2年ぶり2回目)
- aquaさんで山崎川とか天白川とかの桜を眺めてきた(おまけで豊橋少々)
- サイクルショップカワタさんなツーリング@奈良
- 「魔法少女まどか☆マギカ展 名古屋会場」の写真いくつか
- Kyoto.pm #1に参加 & LTに飛び入らせていただいてきた
カテゴリー
タグ
-
actionscript
amon2
announce
bicycle
bookmarklet
cafe
cooking
cpan
della.js
dqwindowmanager
eating
elisp
emacs
event
gps
gtd
html
http
image
iphone
javascript
lifelog
linux
mac
mono
music
mylifehacks
mysql
mywebservice
neko
nicograph
onomichi
pc
perl
photo
plack
study
svn
tool
travel
twitomonitor
twitter
wcan
windows
wordpress
最近のコメント
-
No Responses.
最近のトラックバック
-
No Responses.













