プロフィール

ドミノ

Author:ドミノ
FC2ブログへようこそ!

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

ブロとも申請フォーム

この人とブロともになる

くーすーって美味しいよね
雑感をつらつらと書いています。 主にはIT技術のことをメインに書いていけたらとおもっとります。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ただいまJavaScript勉強中
johnvey.com
にて実装されている、文字のスクランブル表示が面白かったので勉強をかねてコーディングしてみた。少ないコード量で実現できているところがすばらしくアイデアもいい。僕もこんな着想を得られるように、がんばろう。
prototype.jsを活用すると少しコードが少しすっきりした。

Sample of Phrase


文字がスクランブルするよ、マウスを乗せてね

理由がよくわからないのだが、Firefoxの場合、<div>をスクランブル文字のコンテナにすると文字のチラつきが発生してしまう(>□<)
原因だれか教えてくださいー。

ちらつく


ちらつくよ、マウスを乗せてね
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

クロージャとthisスコープ
AJAXって面白いよなーと思い、最近になってJavaScriptの勉強を始めたがとっても奥が深い。いろんなとこでつまづいてしまう。
そんな中で、
ひげぽん OSとか作っちゃうかMona-: 実践 prototype.js [2]
ひげぽん氏の「イベントハンドラ内で this を参照する」という記事を読んでいたのだが、すぐには理解できなかった。

自分の理解の過程を備忘録として残しておく。
なお、
指向性メモ::2005-07-24::クロージャとOOPとJavaScriptの謎仕様
も大変参考にさせていただきました。

(1)初心者が犯しやすいミスコード。


hoge : function {
// do something
},
some : function() {
var element = $('elementname');
element.onclick = function() {
this.hoge();
}
}


普通に考えると上記のコードになりがちだと思う。
このコードがなぜいけないかというと、イベントに渡された関数オブジェクトに含まれるthisが参照するのは、インスタンスのメソッドではないからだ。何をさしているかというとこの場合、thisはelementノードをさしている。

(2)次にひげぽん氏が書かれている、self作戦コード


hoge : function {
// do something
},
some : function() {
var element = $('elementname');
var self = this;
element.onclick = function() {
self.hoge(); // thisを参照
}
}


このコードでイベントハンドラ内でthisを参照することができるようになるのだが始め、self.hoge()のselfはなぜ参照可能なのか?不思議に思った。selfのスコープが外れているはずだからである。
まあここにはクロージャの特性が大きく関わっていることが解った。
*この辺りがJavaScriptの面白いところであり、難しいところなんだろうなと思う。
Dynamic Scripting
クロージャについて丁寧に書かれており大変参考になりました。


クロージャを使ったthisスコープの制御ができるようになれば、イベントに渡す関数オブジェクトや、setTimeout関数に渡す関数オブジェクトの実装がすんなりいくだろう。






テーマ:プログラミング - ジャンル:コンピュータ


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。