Embed Size (px)
Citation preview
Prototype es un Framework JavaScript que busca facilitar el desarrollo de aplicaciones Web dinámicas.
Ofrece un conjunto de herramientas orientado a objetos y una librería para Ajax.
Todos los nodos se puede acceder a través del árbol. Su contenido puede ser modificado o suprimido, y los nuevos elementos se pueden crear.
Los nodos del árbol tiene una relación jerárquica entre sí. Los terminos padre, hijo y hermano se utilzan para describir las relaciones entre los nodos del árbol.
Acceder a las propiedades DOM HTML (siendo x un nodo del árbol)− x.innerHTML - el valor de texto de x
− x.nodeName - el nombre de x
− x.nodeValue - el valor de x
− x.parentNode - el nodo principal de x
− x.childNodes - los nodos secundarios de x
− x.attributes - los atributos de los nodos de x Acceder a los métodos
− x.getElementById (id) - obtener el elemento con el id especificado
− x.getElementsByTagName (nombre) - obtener todos los elementos con el nombre nombre
− x.appendChild (nodo) - Insertar un nodo secundario de x
− x.removeChild (nodo) - eliminar un nodo secundario de x
Raiz<html>
Elemento<head>
Elemento<body>
Nodo Padre
Primer Hijo
UltimoHijo
Siguiente hermano
Anterior hermano
Prototype nos ofrece la posibilidad de acceder mas fácilmente a los diferentes elementos de una página Web.
Nos permite ahorrar código ofreciendo acceso rápido a diferentes funciones de javascript utilizadas frecuentemente.
Por ejemplo, para acceder a un elemento de la página con id “1”, con javascript tradicional:− document.getElementById(“1”);
Con Prototype:− $(“1”);
El método utilitario $ será uno de los más utilizados, pero Prototype ofrece una enorme cantidad de métodos re escritos para acceder a funcionalidades que deberíamos programar desde cero con javascript.
Se adjunta un “cheatsheet” u hoja de trampas, que contiene todos estos métodos.
Caso Js tradicional Prototype
Obtener el valor que contiene un campo de tipo input de un formulario.
document.getElementById(“campo”).value;
$(“campo”).value;
Esconder un elemento. document.getElementById(“elemento”).style.display = ‘none’;
$(“elemento”).hide();
Mostrar un elemento. document.getElementById(“elemento”).style.display = ‘block’;
$(“elemento”).show();
Serializar los campos de un formulario para realizar una peticion Ajax.
Demasiado largo para escribirlo acá
$(‘form’).serialize();
http://www.prototypejs.org/
http://www.prototypejs.org/api/
