![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
* [[JavaScript]] #author("2018-03-08T14:43:53+09:00","default:zzr12000","zzr12000") * [[JavaScript]] [#a4aa168b] #contents ** prototype.js ** prototype.js [#g4c59788] JavaScript ライブラリです。標準化していくには大変よいです。Ruby on Railsでもつかわれているそうです。http://prototype.conio.netよりダウンロードしました。~ [[Prototype UI>http://www.prototype-ui.com/]]もあるんだ。Extと比べてみよう。 ***$(),$F() ***$(),$F() [#zf04d716] $()は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 *** JSON [#t170a2cb] JavaScript Object Notationで軽量なデータ交換フォーマットとのこですが、実際にAJAXでデータをJSON形式で受信した場合、 複数データを取得したとしてのサンプルです。[[サンプル>http://hidekazu.dhs1.sst.ne.jp/sample/json.htm]] また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項目を表示</div> <div id='target2'>JSONテスト２ 全レコードの全項目表示</div> <table> <thead> <tr> <th> test1 </th> <th> test2 </th> </tr> </thead> <tbody id="result"> </tbody> </table> *** リンク *** リンク [#pc8784dd] [[prototype.js の開発者向けメモ>http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html]]~ [[連想配列>http://www.axis.t.u-tokyo.ac.jp/~shunak/ecmascript/comparison.html]]~ [[prototype.jsを利用したドラッグできるWebカスタムコントロール>http://codezine.jp/a/article.aspx?aid=321]]~ [[IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。>http://d.hatena.ne.jp/amachang/20060104/1136344836]]~ [[あなたのページを最速にする14の掟>http://blog.livedoor.jp/dankogai/archives/50828720.html]]~ [[Welcome to Y System Creat Web Site ! >http://www.yscjp.com/index.html]] DOMでテーブルを操作するサンプルがあります。~ [[dhtmlgoodies>http://www.dhtmlgoodies.com/]] DHTMLのサンプルがあります。~ [[つゆだくのホームページ>http://www.tuyudaku.net/]] YUI等のサンプルがあります。~ [[prototype.js逆引きサンプル集>http://javascriptist.net/docs/samples_prototype.html]]~ [[Ajaxライブラリまとめ>http://fnya.cocolog-nifty.com/blog/2006/08/ajax_76d4.html]]~ [[Ext(GUIのライブラリ)>http://extjs.com/deploy/ext/docs/]]~ **script.aculo.us [[ESLint(JavaScript のための静的検証ツール)>https://qiita.com/mysticatea/items/f523dab04a25f617c87d]] **script.aculo.us [#s427bf3a] http://script.aculo.us/ *** リンク *** リンク [#f7c00f27] [[script.aculo.us リファレンス>http://www.openspc2.org/JavaScript/Ajax/ref/script.aculo.us/]]~ [[script.aculo.usの一歩進んだテクニック>http://www.atmarkit.co.jp/fwcr/rensai/ajaxrecipe04/ajaxrecipe04_1.html]]~ **DOMStorage **DOMStorage [#iba95c3a] [[Safari4 と IE8 で実装された DOMStorage とは何か>http://d.hatena.ne.jp/amachang/20080924/1222239494]]~ [[localStorageとsessionStorage>http://d.hatena.ne.jp/shogo4405/20080908/1220806684]]~ **TIPS ***配列をコピーする **TIPS [#f23e113a] ***配列をコピーする [#j7dbaa0e] function copyArray(fromArray){ var newArray = new Array; var prop; for(prop in fromArray) { newArray[prop]=fromArray[prop]; } return newArray; } ***入力内容が変更されたダイアログを出す ***入力内容が変更されたダイアログを出す [#xd854764] [[ぱる日記(■入力内容が変更されたらダイアログを出す)>http://d.hatena.ne.jp/tatsuparu/20080219]]~ いつも楽しく読ませていただいております。 ***二度押し防止 ***二度押し防止 [#d6996b85] [[二度押し防止の onsubmit で disable にするやつ>http://www.drk7.jp/MT/archives/001345.html]] ***画像を保存されたくない。 ***画像を保存されたくない。 [#l29f56c4] http://davidwalsh.name/のhttp://davidwalsh.name/dw-content/dwProtect.jsを使えば、確かに右クリックで保存しても、保存されないです。ただその気になれば保存できるので、ちょっとした対処にはいいかも。~ [[自サイトの画像の保存をプロテクションする仕組み>http://phpspot.org/blog/archives/2008/08/post_229.html]] ***Javascriptでグラフ ***Javascriptでグラフ [#xbc545b8] [[要チェック！テーブルからグラフを生成するJavaScriptライブラリ「Bluff」>http://www.moongift.jp/2008/09/bluff/]] ***alertを置き換える ***alertを置き換える [#fb9e381c] alertでもいいんですが、デバッグをもっとスマートにしたい場合に。log4jみたいに使える。~ [[Blackbird>http://www.gscottolson.com/blackbirdjs/]]~ [[必見！JavaScriptのalert処理にさよならを「Blackbird」>http://www.moongift.jp/2008/10/blackbird/]]~ ***コード品質 ***コード品質 [#h2eb3eff] [[jslint>http://www.jslint.com/]] ** リンク ***[[ホームページの素｜Javascript カレンダーによる日付入力補助>http://www.kanaya440.com/contents/js/calendar/index.html]] ***[[prototype.jsを10KBにする方法>http://asiamoth.com/mt/archives/2006-11/16_2331.php]] ***[[JavaScriptにおけるdeep clone>http://la.ma.la/blog/diary_200711270645.htm]] ***[[The Yahoo! User Interface Library (YUI)>http://developer.yahoo.com/yui/]] ***[[プロトタイプ（prototype）によるJavaScriptのオブジェクト指向>http://codezine.jp/a/article/aid/222.aspx]] ***[[デザイン性に優れたCSSメニュー集>http://phpspot.org/blog/archives/2008/07/css_64.html]] ***[[メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル>http://phpspot.org/blog/archives/2008/07/js_6.html]] ***[[JSでクールなWYSIWYGエディタを実装「FreeRichTextEditor」>http://phpspot.org/blog/archives/2008/10/jswysiwygfreeri.html]] ***[[より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集>http://phpspot.org/blog/archives/2008/10/post_261.html]] ***[[Taffy DB : A JavaScript database>http://blog.sohaya.com/?p=2856]] ** リンク [#lfb10d5e] ***[[ホームページの素｜Javascript カレンダーによる日付入力補助>http://www.kanaya440.com/contents/js/calendar/index.html]] [#o3266ef3] ***[[prototype.jsを10KBにする方法>http://asiamoth.com/mt/archives/2006-11/16_2331.php]] [#ye17f40c] ***[[JavaScriptにおけるdeep clone>http://la.ma.la/blog/diary_200711270645.htm]] [#w44cb556] ***[[The Yahoo! User Interface Library (YUI)>http://developer.yahoo.com/yui/]] [#hdac80b2] ***[[プロトタイプ（prototype）によるJavaScriptのオブジェクト指向>http://codezine.jp/a/article/aid/222.aspx]] [#i671b711] ***[[デザイン性に優れたCSSメニュー集>http://phpspot.org/blog/archives/2008/07/css_64.html]] [#t5e5399f] ***[[メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル>http://phpspot.org/blog/archives/2008/07/js_6.html]] [#u49a8018] ***[[JSでクールなWYSIWYGエディタを実装「FreeRichTextEditor」>http://phpspot.org/blog/archives/2008/10/jswysiwygfreeri.html]] [#x49aff84] ***[[より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集>http://phpspot.org/blog/archives/2008/10/post_261.html]] [#u1011cc9] ***[[Taffy DB : A JavaScript database>http://blog.sohaya.com/?p=2856]] [#x0e931d8] JavaScriptで実現するデータベースだそうです。~ ***[[Firefoxでtextareaのカーソル位置に文字列を挿入した後にスクロールが先頭に戻ってしまう問題>http://karetta.jp/article/blog/oneline/009098]] ***[[simpleCart>http://www.thewojogroup.com/simpleCart/]] ***[[Firefoxでtextareaのカーソル位置に文字列を挿入した後にスクロールが先頭に戻ってしまう問題>http://karetta.jp/article/blog/oneline/009098]] [#w0ee4e97] ***[[simpleCart>http://www.thewojogroup.com/simpleCart/]] [#cab29380] JavaScriptのショッピングカートです。 ***[[複数階層のドロップダウンメニューを作成するサンプル>http://phpspot.org/blog/archives/2008/11/post_283.html]] ***[[はてなブックマークのコンテンツの JavaScript を高速化する>http://d.hatena.ne.jp/amachang/20081126/1227700830]] ***[[複数階層のドロップダウンメニューを作成するサンプル>http://phpspot.org/blog/archives/2008/11/post_283.html]] [#i85e088a] ***[[はてなブックマークのコンテンツの JavaScript を高速化する>http://d.hatena.ne.jp/amachang/20081126/1227700830]] [#sc669e2a] 内容もおもしろいけど、CocProxyも面白い。ローカルのJSに差し替えることができるんですね。 ** 参考書籍 ** 参考書籍 [#u47dde8f] ** コメント ** コメント [#f47a1dc5] -#comment http://developer.yahoo.com/yui/ v
