JavaScript - テストプロトタイプ



JavaScript フレームワーク ライブラリのテスト - プロトタイプ


プロトタイプの参照

JavaScript ライブラリをテストするには、Web ページでそれを参照する必要があります。

ライブラリを参照するには、src 属性をライブラリの URL に設定して <script> タグを使用します。

<html>

< ; script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js">
</script>
</head>
<body>
< body>
</html>


プロトタイプの説明

プロトタイプは、HTML DOM プログラミングを容易にする関数を提供します。

jQuery と同様に、Prototype にも独自の $() 関数があります。

$() 関数は、HTML DOM 要素 (または DOM 要素) の ID 値を受け入れ、DOM オブジェクトに新しい機能を追加します。

jQueryとは異なり、Prototypeにはwindow.onload()を置き換えるready()メソッドがありません。代わりに、Prototype はブラウザーと HTML DOM に拡張機能を追加します。

JavaScript では、ウィンドウのロード イベントを処理する関数を割り当てることができます:

JavaScript の方法:

function myFunction()

{
var obj=document.getElementById("h01");
obj.innerHTML=" Hello Prototype";
}
onload=myFunction;

同等の Prototype は異なります:

Prototype メソッド:

function myFunction()

{
$("h01").insert("Hello Prototype! ") ;
}
Event.observe(window,"load",myFunction);

Event.observe() は 3 つのパラメータを受け入れます:

    オブジェクトを処理する HTML DOM または BOM (ブラウザ オブジェクト モデル)
  • 処理したいイベント
  • 呼び出したい関数
テストプロトタイプ

この例を試してください:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
<script>
function myFunction(){
	$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
	
<h1 id="h01"></h1>
</body>
	
</html>

実行例 »
「」をクリックしてくださいオンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

この例をもう一度お試しください:

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
<script>
function myFunction(){
	$("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

例に見られるように、jQuery と同様に、プロトタイプではチェーン構文が可能です。

チェーンは、同じオブジェクトに対して複数のタスクを実行する便利な方法です。