Ruby on Rails @wiki

アプリ開発３

最終更新：2010年06月04日 19:12

rubyonrails

- view

管理者のみ編集可

アプリ開発３～JavaScriptライブラリ～

Ajax

Ajaxはじめの一歩　XMLHttpRequest - ［JavaScript］All About
var httpObj = XMLHttpRequest();
httpObj.open("GET","data.txt",true);

JSON

JSON/簡単なテスト:基本
JSON (JavaScript Object Notation) とは、テキスト形式の構造化データフォーマットです。

<script language = "JavaScript">
<!--
	var myJSONObject3 = 
	{
		"test1": "hello1",
		"test2": "hello2",
		"test3": "hello3"
	}
//-->
</script>
<form>
myJSONObject3オブジェクトのtest2プロパティを取り出します
<input type    = "button" onclick = "alert( myJSONObject3.test2 )" value   = "click">
</form>

項目数のカウント・中身の表示

var count = 0;
for (var k in myJSONObject3) {
	count++;
	alert(count + ":" + k + ":" + eval("myJSONObject3." + k));
}

jQuery / Ajax

jQueryのAjax 1 - ［JavaScript］All About

Ajax Requests の種類	機能
ajax( options )	HTTP通信でページを読み込みます。jQuery Ajax機能の基本メソッド。
load( url, data, callback )	HTMLを読み込みDOMへ挿入します。
get( url, data, callback, type )	HTTP通信のGETでページを読み込みます。
getJSON( url, data, callback )	JSON データをHTTP通信のGETで読み込みます。
getScript( url, callback )	HTTP通信のGETで、ローカルのJavaScriptファイルを読み込み実行する。
post( url, data, callback, type )	JSON データをHTTP通信のPOSTで読み込みます。

Ajax Events(グローバル)のタイプ	機能
ajaxComplete	Ajaxリクエストが完了(completes)で実行される。
ajaxError	Ajaxリクエストが失敗(error)で実行される。
ajaxSend	Ajaxリクエストが送信(send)される前に実行される。
ajaxStart	Ajaxリクエストがはじまり、アクティブになる前に実行される。
ajaxStop	すべてのAjaxリクエストが終わると実行される。
ajaxSuccess	Ajaxリクエストが成功(success)で実行される。
Ajax Events(ローカル)のタイプ	機能
beforeSend	Ajaxリクエストが送信される前に実行される。
success	Ajaxリクエストが受信が成功した時に実行される。
error	Ajaxリクエストが受信が失敗した時に実行される。
complete	Ajaxリクエストが通信完了時に、リクエストの成功/失敗にかかわらず実行される。

IE8 情報バーを消す方法

javascriptのテスト中は邪魔くさいので消してしまいましょう
「ツール」→「インターネットオプション」→「詳細設定」→「セキュリティ」
　→「マイコンピュータのファイルでのアクティブコンテンツの実行を許可する」をチェック

クロージャ

猿でもわかるクロージャ超入門　まとめ - DQNEO起業日記
関数を定義する方法その１　(普通のやり方)

<script>
function speak(){ alert("hello"); }

speak(); // "hello"と出力
</script>

関数を定義する方法その２　(無名関数を使う)

<script>
var speak = function (){ alert("hello"); }

speak(); // "hello"と出力
</script>

無名関数を定義してすぐさま実行する

<script>
(  function(){ alert("hello"); }  )(); // "hello"と出力
</script>

関数を返す関数

<script>
function outer(){
    var inner = function (){  // 無名関数を定義してinnerに代入
        alert("hello");
    }
　　return inner;             // inner関数を返す
}

var f =  outer();             // outre関数は戻り値としてinner関数を返す。それがfに代入される。
f();                          // "hello"と表示。inner() が実行されたのと同じ効果がある。
</script>

無名関数を定義してそのままreturnする

function outer(){
    return　function (){  // 無名関数を定義してすぐreturn
        alert("hello");
    };
}

var f =  outer();         // onter内で定義した無名関数がfに代入される。
f();                      // "hello"と表示。
</script>

↓

function outer(){
    var x = "hello";
    return　function (){
        alert(x);
    };
}

var f =  outer(); 
f();  // "hello"と表示。
</script>

状態を保持する関数「クロージャはオブジェクトに似ている」

<script>
function outer(){
    var x = 1;
    return　function (){
        alert(x);
	x = x + 1;
    };
}

var f =  outer(); 
f();  // 1
f();  // 2
f();  // 3
</script>

「アプリ開発３」をウィキ内検索