JavaScript - Test Prototype

Test JavaScript Framework Library - Prototype

Reference Prototype

To test a JavaScript library, you need to reference it in your web page.

To reference a library, use the <script> tag with its src attribute set to the library's URL:

Reference Prototype

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

Prototype Description

Prototype provides functions that make HTML DOM programming easier.

Similar to jQuery, Prototype also has its own $() function. The

$() function accepts the id value of an HTML DOM element (or DOM element) and adds new functionality to the DOM object.

Unlike jQuery, Prototype does not have a ready() method to replace window.onload(). Instead, Prototype adds extensions to the browser and the HTML DOM.

In JavaScript, you can assign a function to handle the window load event:

JavaScript way:

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

The equivalent Prototype is different of:

Prototype method:

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

Event.observe() accepts three parameters:

You want The HTML DOM or BOM (Browser Object Model) object you want to handle
The event you want to handle
The function you want to call

Test Prototype

Please try the following example:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

Please try this example again:

Instance

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

As you can see in the example above , like jQuery, Prototype allows chain syntax.

Chaining is a convenient way to perform multiple tasks on the same object.