JavaScript †
prototype.js †JavaScript ライブラリです。標準化していくには大変よいです。Ruby on Railsでもつかわれているそうです。http://prototype.conio.netよりダウンロードしました。 $(),$F() †$()はdocument.getElementById?()をこれで代用できます。$F()はフォームフィールドの値を返してくれます。かなりすっきりしますね。 <HTML> <HEAD> <TITLE>test</TITLE> <script src="prototype.js"></script> <script> function test1() { $('idtest2').innerHTML = $('idtest1').innerHTML; } function test2() { $('idtest3').innerHTML = $F('testText'); } </script> </HEAD> <BODY> <div id="idtest1"> <p>テスト1</p> </div> <div id="idtest2"> <p>テスト2</p> </div> <div id="idtest3"> <p>テスト3</p> </div> <input type="button" value=Test1 onclick="test1();"><br> <input type="text" id="testText" value="ほおほほ"><br> <input type="button" id="testButton" value=Test2 onclick="test2();"><br> </BODY> </HTML> JSON †JavaScript Object Notationで軽量なデータ交換フォーマットとのこですが、実際にAJAXでデータをJSON形式で受信した場合、 複数データを取得したとしてのサンプルです。サンプル またhttp://braincast.nl/samples/jsoneditor/よりjsonをツリー化して見ることができます。 <script type="text/javascript"><!-- function getData() { var dataObject = {"data": [ {"test1":"テスト1", "test2":"テスト2"}, {"test1":"テストa", "test2":"テストb"} ] }; //一つめ $('target').innerHTML = dataObject.data[0].test1; //2つめ var target2data = ""; for(var intfor=0; intfor < dataObject.data.length; intfor++) { target2data += dataObject.data[intfor].test1 + dataObject.data[intfor].test2 + "<br>"; } $('target2').innerHTML = target2data; //テーブルに追加 var tbody = $('resulttb'); //まず消す for(var intfor=tbody.rows.length-1; intfor >=0 ; intfor--) { var tr=tbody.deleteRow(intfor); } //追加 for(var intfor=0; intfor < dataObject.data.length; intfor++) { //row追加 var tr=tbody.insertRow(intfor); //col追加 tr.insertCell(0).innerHTML = dataObject.data[intfor].test1; tr.insertCell(1).innerHTML = dataObject.data[intfor].test2; } } //--> </script> <input type="button" value="クリック" onclick="getData()" /> <div id='target'>JSONテスト1 1レコード目の1項目を表示</div> <div id='target2'>JSONテスト2 全レコードの全項目表示</div> <table> <thead> <tr> <th> test1 </th> <th> test2 </th> </tr> </thead> <tbody id="result"> </tbody> </table> リンク †prototype.js の開発者向けメモ script.aculo.us †リンク †script.aculo.us リファレンス DOMStorage †Safari4 と IE8 で実装された DOMStorage とは何か TIPS †配列をコピーする †function copyArray(fromArray){ var newArray = new Array; var prop; for(prop in fromArray) { newArray[prop]=fromArray[prop]; } return newArray; } 入力内容が変更されたダイアログを出す †ぱる日記(■入力内容が変更されたらダイアログを出す) 二度押し防止 †二度押し防止の onsubmit で disable にするやつ 画像を保存されたくない。 †http://davidwalsh.name/のhttp://davidwalsh.name/dw-content/dwProtect.jsを使えば、確かに右クリックで保存しても、保存されないです。ただその気になれば保存できるので、ちょっとした対処にはいいかも。 Javascriptでグラフ †要チェック!テーブルからグラフを生成するJavaScriptライブラリ「Bluff」 alertを置き換える †alertでもいいんですが、デバッグをもっとスマートにしたい場合に。log4jみたいに使える。 コード品質 †リンク †ホームページの素|Javascript カレンダーによる日付入力補助 †prototype.jsを10KBにする方法 †JavaScriptにおけるdeep clone †The Yahoo! User Interface Library (YUI) †プロトタイプ(prototype)によるJavaScriptのオブジェクト指向 †デザイン性に優れたCSSメニュー集 †メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル †JSでクールなWYSIWYGエディタを実装「FreeRichTextEditor」 †より良いフォーム作りの参考になるフォームのサンプル&ライブラリ集 †Taffy DB : A JavaScript database †JavaScriptで実現するデータベースだそうです。 Firefoxでtextareaのカーソル位置に文字列を挿入した後にスクロールが先頭に戻ってしまう問題 †simpleCart †JavaScriptのショッピングカートです。 複数階層のドロップダウンメニューを作成するサンプル †はてなブックマークのコンテンツの JavaScript を高速化する †内容もおもしろいけど、CocProxy?も面白い。ローカルのJSに差し替えることができるんですね。 参考書籍 †コメント †
|