Ruby on Rails @wiki
アプリ開発3
最終更新:
rubyonrails
-
view
アプリ開発3~JavaScriptライブラリ~
prototype.js
jQuery
参考になるページ
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
JavaScript Library Archive
Ajax (JavaScript) Library List (Ajaxライブラリ一覧)
JavaScript Library Archive
Ajax (JavaScript) Library List (Ajaxライブラリ一覧)
Ajax
Ajaxはじめの一歩 XMLHttpRequest - [JavaScript]All About
var httpObj = XMLHttpRequest();
httpObj.open("GET","data.txt",true);
var httpObj = XMLHttpRequest();
httpObj.open("GET","data.txt",true);
JSON
JSON/簡単なテスト:基本
JSON (JavaScript Object Notation) とは、テキスト形式の構造化データフォーマットです。
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
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起業日記
関数を定義する方法その1 (普通のやり方)
関数を定義する方法その1 (普通のやり方)
<script> function speak(){ alert("hello"); } speak(); // "hello"と出力 </script>
関数を定義する方法その2 (無名関数を使う)
<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>