JavaScript のバックアップ(No.15)

prototype.js

JavaScript ライブラリです。標準化していくには大変よいです。Ruby on Railsでもつかわれているそうです。http://prototype.conio.netよりダウンロードしました。
Prototype UIもあるんだ。Extと比べてみよう。

↑

$(),$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項目を表示</div>
<div id='target2'>JSONテスト２　全レコードの全項目表示</div>
<table>
<thead>
 <tr>
  <th>
   test1
  </th>
  <th>
   test2
  </th>
 </tr>
</thead>
<tbody id="result">
</tbody>
</table>

↑

配列をコピーする

function copyArray(fromArray){
  var newArray = new Array;
  var prop;
  for(prop in fromArray) {
    newArray[prop]=fromArray[prop];
  }
  return newArray;
}

↑