JavaScript
- Test Prototype
Test the JavaScript Framework Library - Prototype
Refers to Prototype
To test the JavaScript library, you need to reference it in a Web page.
In order to reference a library, use
the hashtag,
whose src property is set to the URL of the library:
Refers to Prototype
<!DOCTYPE html>
<html>
<head>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</script>
</head>
<body>
</body>
</html>
Prototype description
Prototype provides functions that make HTML DOM programming easier.
Similar to jQuery, Prototype has its own $() function.
The $() function accepts the id value (or DOM element) of the HTML 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 HTML DOM.
In JavaScript, you can assign a function to handle window load events:
JavaScript way:
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello Prototype";
}
onload=myFunction;
The equivalent Prototype is different:
Prototype way:
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
Event.observe() accepts three parameters:
-
Html DOM or BOM (Browser Object Model) objects that you want to work with
-
The event that you want to handle
-
The function you want to call
Test Prototype
Try this example:
Example
<!DOCTYPE html>
<html>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</script>
<script>
function myFunction()
{
$("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
Try it out . . .
Try this example again:
Example
<!DOCTYPE html>
<html>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</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>
Test it out . . .
As you can see in the example above, prototype allows chain syntax, as jQuery does.
Chaining is a convenient way to perform multiple tasks on the same object.
Related articles
JavaScript prototype object