JavaScript
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
* [[JavaScript]] [#a4aa168b]
#contents
** prototype.js [#g4c59788]
JavaScript ライブラリです。標準化していくには大変よいです...
[[Prototype UI>http://www.prototype-ui.com/]]もあるんだ。...
***$(),$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...
</BODY>
</HTML>
*** JSON [#t170a2cb]
JavaScript Object Notationで軽量なデータ交換フォーマット...
複数データを取得したとしてのサンプルです。[[サンプル>http...
また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; intf...
target2data += dataObject.data[intfor].test1 + dataOb...
}
$('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; intf...
//row追加
var tr=tbody.insertRow(intfor);
//col追加
tr.insertCell(0).innerHTML = dataObject.data[intfor]....
tr.insertCell(1).innerHTML = dataObject.data[intfor]....
}
}
//-->
</script>
<input type="button" value="クリック" onclick="getData()...
<div id='target'>JSONテスト１ 1レコード目の1項目を表示<...
<div id='target2'>JSONテスト２ 全レコードの全項目表示</...
<table>
<thead>
<tr>
<th>
test1
</th>
<th>
test2
</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
*** リンク [#pc8784dd]
[[prototype.js の開発者向けメモ>http://www.imgsrc.co.jp/~...
[[連想配列>http://www.axis.t.u-tokyo.ac.jp/~shunak/ecmasc...
[[prototype.jsを利用したドラッグできるWebカスタムコントロ...
[[IT戦記 - 複雑で重くなった JavaScript を超高速化する方法...
[[あなたのページを最速にする14の掟>http://blog.livedoor.j...
[[Welcome to Y System Creat Web Site ! >http://www.yscjp....
[[dhtmlgoodies>http://www.dhtmlgoodies.com/]] DHTMLのサン...
[[つゆだくのホームページ>http://www.tuyudaku.net/]] YUI等...
[[prototype.js逆引きサンプル集>http://javascriptist.net/d...
[[Ajaxライブラリまとめ>http://fnya.cocolog-nifty.com/blog...
[[Ext(GUIのライブラリ)>http://extjs.com/deploy/ext/docs/]]~
[[ESLint(JavaScript のための静的検証ツール)>https://qiita...
**script.aculo.us [#s427bf3a]
http://script.aculo.us/
*** リンク [#f7c00f27]
[[script.aculo.us リファレンス>http://www.openspc2.org/Ja...
[[script.aculo.usの一歩進んだテクニック>http://www.atmark...
**DOMStorage [#iba95c3a]
[[Safari4 と IE8 で実装された DOMStorage とは何か>http://...
[[localStorageとsessionStorage>http://d.hatena.ne.jp/shog...
**TIPS [#f23e113a]
***配列をコピーする [#j7dbaa0e]
function copyArray(fromArray){
var newArray = new Array;
var prop;
for(prop in fromArray) {
newArray[prop]=fromArray[prop];
}
return newArray;
}
***入力内容が変更されたダイアログを出す [#xd854764]
[[ぱる日記(■入力内容が変更されたらダイアログを出す)>http:...
いつも楽しく読ませていただいております。
***二度押し防止 [#d6996b85]
[[二度押し防止の onsubmit で disable にするやつ>http://ww...
***画像を保存されたくない。 [#l29f56c4]
http://davidwalsh.name/のhttp://davidwalsh.name/dw-conten...
[[自サイトの画像の保存をプロテクションする仕組み>http://p...
***Javascriptでグラフ [#xbc545b8]
[[要チェック！テーブルからグラフを生成するJavaScriptライ...
***alertを置き換える [#fb9e381c]
alertでもいいんですが、デバッグをもっとスマートにしたい場...
[[Blackbird>http://www.gscottolson.com/blackbirdjs/]]~
[[必見！JavaScriptのalert処理にさよならを「Blackbird」>ht...
***コード品質 [#h2eb3eff]
[[jslint>http://www.jslint.com/]]
** リンク [#lfb10d5e]
***[[ホームページの素｜Javascript カレンダーによる日付入...
***[[prototype.jsを10KBにする方法>http://asiamoth.com/mt/...
***[[JavaScriptにおけるdeep clone>http://la.ma.la/blog/di...
***[[The Yahoo! User Interface Library (YUI)>http://devel...
***[[プロトタイプ（prototype）によるJavaScriptのオブジェ...
***[[デザイン性に優れたCSSメニュー集>http://phpspot.org/b...
***[[メニュークリックでコンテンツをダイナミックにスライド...
***[[JSでクールなWYSIWYGエディタを実装「FreeRichTextEdito...
***[[より良いフォーム作りの参考になるフォームのサンプル＆...
***[[Taffy DB : A JavaScript database>http://blog.sohaya....
JavaScriptで実現するデータベースだそうです。~
***[[Firefoxでtextareaのカーソル位置に文字列を挿入した後...
***[[simpleCart>http://www.thewojogroup.com/simpleCart/]]...
JavaScriptのショッピングカートです。
***[[複数階層のドロップダウンメニューを作成するサンプル>h...
***[[はてなブックマークのコンテンツの JavaScript を高速化...
内容もおもしろいけど、CocProxyも面白い。ローカルのJSに差...
** 参考書籍 [#u47dde8f]
** コメント [#f47a1dc5]
-#comment
http://developer.yahoo.com/yui/
v
終了行:
* [[JavaScript]] [#a4aa168b]
#contents
** prototype.js [#g4c59788]
JavaScript ライブラリです。標準化していくには大変よいです...
[[Prototype UI>http://www.prototype-ui.com/]]もあるんだ。...
***$(),$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...
</BODY>
</HTML>
*** JSON [#t170a2cb]
JavaScript Object Notationで軽量なデータ交換フォーマット...
複数データを取得したとしてのサンプルです。[[サンプル>http...
また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; intf...
target2data += dataObject.data[intfor].test1 + dataOb...
}
$('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; intf...
//row追加
var tr=tbody.insertRow(intfor);
//col追加
tr.insertCell(0).innerHTML = dataObject.data[intfor]....
tr.insertCell(1).innerHTML = dataObject.data[intfor]....
}
}
//-->
</script>
<input type="button" value="クリック" onclick="getData()...
<div id='target'>JSONテスト１ 1レコード目の1項目を表示<...
<div id='target2'>JSONテスト２ 全レコードの全項目表示</...
<table>
<thead>
<tr>
<th>
test1
</th>
<th>
test2
</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
*** リンク [#pc8784dd]
[[prototype.js の開発者向けメモ>http://www.imgsrc.co.jp/~...
[[連想配列>http://www.axis.t.u-tokyo.ac.jp/~shunak/ecmasc...
[[prototype.jsを利用したドラッグできるWebカスタムコントロ...
[[IT戦記 - 複雑で重くなった JavaScript を超高速化する方法...
[[あなたのページを最速にする14の掟>http://blog.livedoor.j...
[[Welcome to Y System Creat Web Site ! >http://www.yscjp....
[[dhtmlgoodies>http://www.dhtmlgoodies.com/]] DHTMLのサン...
[[つゆだくのホームページ>http://www.tuyudaku.net/]] YUI等...
[[prototype.js逆引きサンプル集>http://javascriptist.net/d...
[[Ajaxライブラリまとめ>http://fnya.cocolog-nifty.com/blog...
[[Ext(GUIのライブラリ)>http://extjs.com/deploy/ext/docs/]]~
[[ESLint(JavaScript のための静的検証ツール)>https://qiita...
**script.aculo.us [#s427bf3a]
http://script.aculo.us/
*** リンク [#f7c00f27]
[[script.aculo.us リファレンス>http://www.openspc2.org/Ja...
[[script.aculo.usの一歩進んだテクニック>http://www.atmark...
**DOMStorage [#iba95c3a]
[[Safari4 と IE8 で実装された DOMStorage とは何か>http://...
[[localStorageとsessionStorage>http://d.hatena.ne.jp/shog...
**TIPS [#f23e113a]
***配列をコピーする [#j7dbaa0e]
function copyArray(fromArray){
var newArray = new Array;
var prop;
for(prop in fromArray) {
newArray[prop]=fromArray[prop];
}
return newArray;
}
***入力内容が変更されたダイアログを出す [#xd854764]
[[ぱる日記(■入力内容が変更されたらダイアログを出す)>http:...
いつも楽しく読ませていただいております。
***二度押し防止 [#d6996b85]
[[二度押し防止の onsubmit で disable にするやつ>http://ww...
***画像を保存されたくない。 [#l29f56c4]
http://davidwalsh.name/のhttp://davidwalsh.name/dw-conten...
[[自サイトの画像の保存をプロテクションする仕組み>http://p...
***Javascriptでグラフ [#xbc545b8]
[[要チェック！テーブルからグラフを生成するJavaScriptライ...
***alertを置き換える [#fb9e381c]
alertでもいいんですが、デバッグをもっとスマートにしたい場...
[[Blackbird>http://www.gscottolson.com/blackbirdjs/]]~
[[必見！JavaScriptのalert処理にさよならを「Blackbird」>ht...
***コード品質 [#h2eb3eff]
[[jslint>http://www.jslint.com/]]
** リンク [#lfb10d5e]
***[[ホームページの素｜Javascript カレンダーによる日付入...
***[[prototype.jsを10KBにする方法>http://asiamoth.com/mt/...
***[[JavaScriptにおけるdeep clone>http://la.ma.la/blog/di...
***[[The Yahoo! User Interface Library (YUI)>http://devel...
***[[プロトタイプ（prototype）によるJavaScriptのオブジェ...
***[[デザイン性に優れたCSSメニュー集>http://phpspot.org/b...
***[[メニュークリックでコンテンツをダイナミックにスライド...
***[[JSでクールなWYSIWYGエディタを実装「FreeRichTextEdito...
***[[より良いフォーム作りの参考になるフォームのサンプル＆...
***[[Taffy DB : A JavaScript database>http://blog.sohaya....
JavaScriptで実現するデータベースだそうです。~
***[[Firefoxでtextareaのカーソル位置に文字列を挿入した後...
***[[simpleCart>http://www.thewojogroup.com/simpleCart/]]...
JavaScriptのショッピングカートです。
***[[複数階層のドロップダウンメニューを作成するサンプル>h...
***[[はてなブックマークのコンテンツの JavaScript を高速化...
内容もおもしろいけど、CocProxyも面白い。ローカルのJSに差...
** 参考書籍 [#u47dde8f]
** コメント [#f47a1dc5]
-#comment
http://developer.yahoo.com/yui/
v
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
