JavaScript - Test Prototype

Test JavaScript Framework Library - Prototype

Referencing Prototype

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

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

Referencing 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

The functions provided by Prototype 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 a 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 approach is different:

Prototype Way:

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 you wish to handle
  • The event you wish to handle
  • The function you wish to call

Test Prototype

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

Test it »

As you can see in the above examples, like jQuery, Prototype allows chaining syntax.

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

Other Extensions