Latest web development tutorials
×

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JavaScript Testing Prototype

Testing JavaScript framework library - Prototype


References Prototype

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

To refer to a library, use the <script> tag, whose src attribute set to the URL library:

References Prototype

<!DOCTYPE html>
<html>
<head>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js">
</script>
</head>
<body>
</body>
</html>


Prototype Description

Prototype provides functions enable HTML DOM programming easier.

Similar to jQuery, Prototype also has its own $ () function.

$ () Function accepts id value HTML DOM element (or a DOM element), and will add new features to the DOM object.

Different with jQuery, Prototype not to replace window.onload () is ready () method. Instead, Prototype will add an extension to the browser and HTML DOM.

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

JavaScript method:

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

Equivalent Prototype is different:

Prototype mode:

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

Event.observe () accepts three parameters:

  • You want to deal with the HTML DOM or BOM (Browser Object Model) objects
  • Event you want to handle
  • The function you want to call

Testing Prototype

Please try the following example:

Example

<!DOCTYPE html>
<html>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.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 again at this example:

Example

<!DOCTYPE html>
<html>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.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 >>

As you can see in the example above, the same as jQuery, Prototype allows the chain syntax.

Link (Chaining) is a method of performing multiple tasks on the same subject convenient method.