JavaScript - Test Prototype

Test the JavaScript Framework Library - Prototype

Reference Prototype

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

To reference a library, use <script > tag whose src property is set to the URL of the library:

Reference Prototype

<!DOCTYPE html>
<html>
<head>
<script
src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</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 an 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 the HTML DOM.

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

In JavaScript:

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

The equivalent Prototype is different:

In Prototype:

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

Event.observe() accepts three parameters:

  • The HTML DOM or BOM (Browser Object Model) Object that you want to process

  • The event that you want to handle

  • The function that you want to call

Test prototype

try the following example:

Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</script>
<script>
function myFunction()
{
     $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

 Try It! 

please try this example again:

Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.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>

 Try It! 

As you can see in the example above, as with jQuery, Prototype allows chained syntax.

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