Pebble's Diary

プログラマーの作業メモ

JavaScript

jQuery $(function() {...});とは何なのか

例えば、jQueryでこんなサンプルを見かけます。 この$(function() {... });のイディオムはなんために存在するのか? <body> <script> $(function() { $( "#selectable" ).selectable(); }); </script> <ol id="selectable"> </ol> </body> $()関数はドキュメントツリーが完成したタイミングで実行されるようです。 $()…

rails で各コントローラー毎のcss,jsを読み込むようにする。

ほぼ参照サイトままです。 やったことは、3つ app/views/layouts/application.html.erb に以下の2行を追加。 <%= stylesheet_link_tag controller.controller_name, media: "all" %> <%= javascript_include_tag controller.controller_name %> app/assets…

JavaScript return文がsyntaxエラー

以下のJavaScriptにはバグがある。 print(1);if( true !== true ){ return; }; print(2); SpiderMonkeyで実行すると、return文がSyntax errorだと言われる。 js> if( true !== true ){ return; }; print( 1 ); typein:11: SyntaxError: return not in functi…

JavaScript Array.some

Array.some

JavaScriptのバージョン年表

厳密にはJavaScriptのバージョンはFireFoxブラウザで実装されたものを指し、ECMAScriptはすべてのブラウザで対応すべき仕様という意味合いのようだ。 JavaScript ( ECMAScript ) のバージョンがどのくらい古いものなのかよく分からないのでまとめる。 JavaSc…

jqXHR.success(),jqXHR.error(),jqXHR.complete()はjQuery1.8以降非推奨

メモ 非推奨勧告 jQuery1.5から実装されたjqXHR.success(), jqXHR.error(), jqXHR.complete()コールバックメソッドはjQuery1.8以降非推奨となります。 これらが削除される前にあなたのコードでは、jqXHR.done(), jqXHR.fail(), jqXHR.always()を代わりに使用…

jQuery ドキュメントの見方

jQuery公式サイトのjQuery()を見ましょう。 jQuery() | jQuery API Documentation バージョンが少し古いですが、日本語訳がありました。 jQuery() / $() - jQuery API Documentation 日本語訳 jQueryは$と同じですが、引数に何を与えるかによって、動作が決…

DOM、jQueryの動作確認環境(Safari)

DOMとjQueryの動作確認はspidermonkeyではできないので、ここではSafari8(MacOSX 10.10最新)を使います。以下環境構築手順です。 1) jQueryのサイトからをjquery-1.11.2.jsというファイルをダウンロードします。 具体的には「Download the uncompressed, dev…

JavaScript オブジェクトのメソッド名を連想配列を使い文字列を使って呼び出す

var sports = { swim : function( arg1, arg2 ){ print( "swim " + arg1 + " km " + arg2 ); }, walk : function( arg1, arg2 ){ print( "walk " + arg1 + " km " + arg2 ); } }; sports['swim']( 1, "feel good!" ); // swim 1 km feel good! sports['walk'…

JavaScript 繰り返し処理

keys Array.forEach このサイトすごく分かりやすくていい。 オブジェクトをfor in で回した時、要素にはプロパティ名が入る var coffee = { coffee_type: 'cafe late', coffee_price: 350, coffee_sugar: 1, coffee_pour : function() { print("pour"); } };…

Safari拡張 ツールバー項目の意味

Safari拡張を作る上で、ツールバー項目の意味がよく分かっていなかったが、理解できたのでメモしておく。 「ツールバー項目」には複数の項目が設定できるが、例えば3つのツールバー項目を作り、3つとも「デフォルトで取り込む」のチェックをつけた場合、ブ…

JavaScript 関数を引数に取る関数

関数を引数に取る関数の複雑なケースです。 function process(f) { f( function(name, g) { print( name ); g( 100 ); }); } process( function(h) { h( "hoge", function(value){ print( 2 * value ); }); h( "fuga", function(value){ print( 3 * value );…

JavaScript addEventListener(),removeEventListener()

addEventListener(),removeEventListener()というのはWindowオブジェクト、Documentオブジェクト、Elementオブジェクトに存在するメソッド。(他にもある) 引数の数と型は以下の通り。 addEventListener( 'hoge', f, false ); removeEventListener( 'hoge', f…

JavaScript 関数リテラルをその場で呼び出す

無名関数リテラルをその場で呼び出すというJavaScriptイディオムがあります。 性質を見てみます。 (function () { function hoge() { print( "fuga" ); } hoge(); // fuga })(); hoge(); // typein:25: ReferenceError: hoge is not defined 関数内で宣言さ…

JavaScript関数もオブジェクトなのでプロパティを追加できる

JavaScriptの関数はオブジェクトなのでプロパティを追加できます。 名有り関数を定義して呼び出しています。 関数名が自分自身の関数オブジェクトを表します。 1) 関数内部で識別子プロパティを追加するケース function obj() { obj.fuga = 4; print( obj.fu…

JavaScriptでthisに渡されるもの

JavaScriptでのthisはどのようにして呼ばれるかによって、それが指すものが決まる。 1. トップレベルコードで呼び出した場合はthisにはグローバルオブジェクトが渡される。 printf( this ); // [object global]; グローバルオブジェクトはただ一つ存在するも…

JavaScript get演算子/set演算子

get演算子/set演算子 オブジェクトにプロパティを追加する時に使用できる。 見た目がメソッドのように見えるがメソッドではないので注意。 var coffee = { get price() { return 3; }, set milk( val ) { // do something } } print( coffee.price ); // 3 c…

JavaScript動作仕様確認のためのspidermonkeyをMacOSXにインストールする

JavaScriptの動作仕様確認のため、いちいちブラウザを使わなければいけないのは面倒です。 なのでいわゆるJavaScriptREPL環境としてのspidermonkeyをMacOSXにbrewを使っていれました。 $ brew install spidermonkey $ js js> var hoge = "fuga"; js> print( …

JavaScript関数イディオム

JavaScript関数イディオムを分かりやすく解説している教科書が見当たらないので、自分用にメモしておく。 なおputs関数は以下のJavaSciprt REPL環境で動作させた場合を想定した環境独自の関数である。 JavaScript REPL 1.グローバル関数を定義し呼び出す // …

JavaScript文法メモ

rubyのハッシュ、Objective-CのNSDictionaryに相当するものはObject型であり var obj = {}; obj['foo'] = 'bar'; var obj = { foo : 'bar', baz: 'piyo', }; のように作る。 ruby,Objcと異なり、Object型はクラスのようなものなので、関数も追加できる。 配…