JavaScript - Probar Prototype

Probar la biblioteca de frameworks de JavaScript - Prototype

Referenciar Prototype

Para probar una biblioteca de JavaScript, debe referenciarla en su página web.

Para referenciar una biblioteca, use la etiqueta <script> con su atributo src establecido en la URL de la biblioteca:

Referenciar Prototype

<!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js"> </script> </head> <body> </body> </html>

Descripción de Prototype

Las funciones proporcionadas por Prototype hacen que la programación del DOM de HTML sea más fácil.

Al igual que jQuery, Prototype también tiene su propia función $().

La función $() acepta el valor id de un elemento del DOM de HTML (o un elemento DOM) y agrega nuevas funcionalidades al objeto DOM.

A diferencia de jQuery, Prototype no tiene un método ready() para reemplazar window.onload(). En cambio, Prototype agrega extensiones al navegador y al DOM de HTML.

En JavaScript, puede asignar una función para manejar el evento de carga de la ventana:

Método de JavaScript:

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

El equivalente en Prototype es diferente:

Método de Prototype:

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

Event.observe() acepta tres parámetros:

  • El objeto HTML DOM o BOM (Modelo de Objetos del Navegador) que desea manejar
  • El evento que desea manejar
  • La función que desea llamar

Probar Prototype

Pruebe el siguiente ejemplo:

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>

Inténtelo »

Pruebe también este ejemplo:

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>

Pruébelo »

Como ha visto en los ejemplos anteriores, al igual que jQuery, Prototype permite la sintaxis de encadenamiento.

El encadenamiento (Chaining) es un método conveniente para ejecutar múltiples tareas en el mismo objeto.

Otras extensiones