Testing Prototype

Testing JavaScript Framework Library - Prototype

Including Prototype

To test the JavaScript library, you need to include it in your web page.

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

Including 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 takes the id value of an HTML DOM element (or the DOM element itself) 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 the window load event:

JavaScript Way:

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

The equivalent in Prototype is different:

Prototype Way:

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

Event.observe() takes 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

Testing 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 this example as well:

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 examples above, similar to jQuery, Prototype allows chaining syntax.

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

❮ Js Typeof Js Cookies ❯