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