JavaScript The Good Partsに記述されている内容のおさらい。
javascriptをやり始めた時、戸惑ったスコープに注目しつつ関数の呼び出しパターンについて学んでいく。
関数の呼び出し – jsdo.it – share JavaScript, HTML5 and CSS
注目すべき点は、関数呼び出しパターンにおけるthisの取扱いだろう。
今回の例では、そんな関数の設定の仕方なんてするわけないじゃん。みたいな定義の仕方をしているけれど、特にクラスベースの言語をがりがりやって、JavaScriptをやっている人はそのうち引っかかると思う。
特にクラスっぽくオブジェクトを生成するような場合は、注意が必要だ。
関数をオブジェクトのメソッドとして定義していない場合には、関数がオブジェクト内部から呼び出されたとしても、thisにはグローバルオブジェクトが格納されてしまう。スコープチェーンを辿る際に、どこで呼び出されたかということは関係ないのだろう。
constructorプロパティはnewでインスタンスを生成した場合に、初期化時に使用した
関数を参照する。また、thisには自分自身がobjectとして格納される。
単純に関数として呼び出した場合には、thisに何も設定されないので
スコープチェーンをたどって、最終的にはwindowオブジェクトまでさかのぼってしまう。
以前wordpressのインストールフォルダを別のフォルダに移動する。というタイトルの日本語的にもちょっとおかしいエントリを書いたのだけれど、自分のやりたいことがもっとスマートにできるということが仕事の経験を積んでわかってきたので、再度整理する。
基本的にここに書いてある内容はWordPress を専用ディレクトリに配置するに書いてある内容と同じだ。ただ、初心者である私が必要と思ったところだけを取り出して記述する。
Windows (IIS) サーバー上で動かしている場合などについては、無視する。
ルートに展開してしまったwordpressの設定ファイル等を、wordpressというディレクトリに配置することを想定している。
手続きの概略は以下のとおり。
javascriptはオブジェクトの生成に関して、様々な方法が提供されている。
actionscript3.0からプログラミングを始めた自分としては、クラスベースのほうが馴染みがある。
しかし、new を使ったオブジェクトの生成には注意が必要。
なぜなら、newを使って生成することを前提に作っても、単純なメソッドとして呼び出すことができるからだ。
以下にその例を示す。
newによるオブジェクト生成の特長 – jsdo.it – share JavaScript, HTML5 and CSS
コンストラクタに引数を渡して、オブジェクトを生成することを期待して、newをつけ忘れたときは悲惨だ。
引数に渡されたものは、windowに格納されてしまう。
newを使って生成するものに関しては、変数名を大文字からはじめるという最低限のルールを適用したとしても、結局は制作者の裁量に左右されてしまう。システム的に制限を加えることは出来ない。
ポイントはthisを使うかどうかである。
newを使っても使わなくても同じオブジェクトが得られるように設計することはjavascriptではとても重要だ。
javascriptでprivateなメンバをもつオブジェクトの作成ではそういった作りをしているので参照してほしい。
クラスベースの言語であれば、privateなメンバを持つオブジェクトをつくるのは至って容易である。
「private」の一言をつければいい。
けれど、javascriptではそうはいかない。工夫が必要だ。
最初は、javascriptやりにくいなー。と思っていたけれど、そんなことは言っていられないし、javascriptにはjavascriptの事情があるのだからしょうがない。
以下が、privateなメンバを持つオブジェクトの作り方だ。
privateなメンバをもつオブジェクト – jsdo.it – share JavaScript, HTML5 and CSS
これは、オブジェクトを生成するときに、newをつかっても同じ結果になる。obj関数内において、thisを使っていないからである。newを使った場合とそうでない場合の違いは、javascriptのオブジェクト生成を参照してほしい。
Facebookアプリで投稿権限をもっていないユーザーが、投稿するとエラーが返ってくる。投稿を押したときにももう一度チェックしたかったので作った。
loginするときにscopeというオブジェクトで渡したアレ。
loginについて知りたい方はFacebookのjavascript SDKを使いログインさせるを参照して欲しい。
今回のものはpublish_streamとread_streamの認証がなされているかどうかのチェック
これを様々なブラウザで試してみたところIEでエラーが返ってきてしまった。
別の方法を考えなければならないかもしれない。
//ウォールに投稿する権限を持っているか
function checkPermissions(token,callback){
var graphUrl = "https://graph.facebook.com/ "+ uid + "/permissions";
var sendParam = "access_token=" + token;
$.ajax({
type:"GET",
url:graphUrl,
data:sendParam,
dataType:"json",
success:function(response){
if(response.data[0].publish_stream==1&&response.data[0].read_stream==1){
//すべて許可されている
}else{
//すべては許可されていない
}
},
error :function(response){
}
});
}
スライドインアウトロールオーバーサンプル
ロールオーバーするとoverflow:hiddenで隠れていた要素が2つスライドインしてきて、最後に重なります。
透明度の調整や、スタート位置の設定、easingの種類によって、様々な効果を得られると思います。
スライドインアウトロールオーバーサンプル – jsdo.it – share JavaScript, HTML5 and CSS
色を変えるアニメーションロールオーバーサンプル
色を変えるアニメーションロールオーバーサンプル – jsdo.it – share JavaScript, HTML5 and CSS