Está en la página 1de 25

Introducción a PrototypeJS

Introducción a PrototypeJS

Jorge Iván Meza Martínez


<jimezam@gmail.com>

http://www.jorgeivanmeza.com/
http://educacion.misservicios.net./

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 1


Introducción a PrototypeJS

Contenido
● Introducción.
● Inclusión de la librería.
● Función $().
● Función $w().
● Función $A().
● Función $F().
● Función $H().
● Función $R().
● Función $$().
● Enlaces de interés.
Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 2
Introducción a PrototypeJS

Introducción
● Prototype es creado en marzo de 2005 por Sam Stephenson.
● Parte de Ruby on Rails, sin embargo puede ser utilizado con
cualquier lenguaje/ambiente de desarrollo.
● Su misión es la de mejorar, reemplazar y ampliar las
capacidades de Javascript.
● Es interpretado del lado del cliente por el navegador web, es
parte de la vista.
● Incluye facilidades para el manejo del DOM, eventos,
elementos, arreglos, formularios, AJAX, JSON, etc.
● Permite desarrollar con independencia de navegador web (!).
● Se acopla muy bien a Scriptaculous, librería de efectos creada
por Thomas Fuchs en junio de 2005.
Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 3
Introducción a PrototypeJS

Inclusión de la librería

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”


”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”es-ES”


xml:lang=”es-ES”>

<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8” />
<title>Demostración de Prototype</title>

<script type=”text/javascript”src=”lib/prototype.js”>
</script>
</head>

<body>
<!-- Contenido de la página -->
</body>
Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 4
Introducción a PrototypeJS

Función $()

● Localiza elementos del DOM por su ID reemplazando al


document.getElementById.

● Extiende la funcionalidad de los objetos convencionales.

● Recibe una cadena con el ID o la referencia al objeto DOM


directamente.

● Puede procesar varios elementos de una sola vez.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 5


Introducción a PrototypeJS

Función $() - sintáxis

● $(id) Elemento Extendido

● $(elemento) Elemento Extendido

● $(id|elemento, ...) [Elemento Extendido, ...]

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 6


Introducción a PrototypeJS

Función $() - ejemplos

Obtiene directamente la referencia ampliada al objeto


tabla_principal.

var tabla = $('tabla_principal');

Obtiene la referencia al objeto DOM cuyo ID es sección1 y


posteriormente obtiene la referencia ampliada de dicho objeto.

var divDOM = document.getElementById('seccion1');


var divPT = $(divDOM);

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 7


Introducción a PrototypeJS

Función $() - ejemplos

Obtiene la referencia ampliada a varios objetos en una sola


sentencia.

var elementos = $('cabeza', 'hombros',


'rodillas', 'pies');

Esta invocación equivale a las siguientes instrucciones.

var elementos = [];


elementos[0] = 'cabeza';
elementos[1] = 'hombros';
elementos[2] = 'rodillas';
elementos[3] = 'pies';

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 8


Introducción a PrototypeJS

Función $w()

● Convierte de cadenas a arreglos separando sus elementos por


los espacios encontrados.

var colores = $w('amarillo azul rojo');

Equivale a las siguientes instrucciones.

var colores = [];


colores[0] = 'amarillo';
colores[1] = 'azul';
colores[2] = 'rojo';

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 9


Introducción a PrototypeJS

Función $A()

● Convierte a varios elementos estilo colección (NodeList,


HTMLCollection, arguments, etc.) a un arreglo ampliado.

● null, undefined y false retornan un arreglo vacío.

● Si el objeto tiene al método toArray(), este es utilizado.

● De lo contrario el objeto es iterado normalmente.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 10


Introducción a PrototypeJS

Función $A() - ejemplos

Elementos del DOM.

var divs = document.getElementByTagName('div');


var divsPt = $A(divs);

Un rango de números.

var indices = $A($R(1, 10));


// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 11


Introducción a PrototypeJS

Función $F()

● Recibe la referencia del DOM de un campo del formulario o su


ID y retorna el valor del campo.

● Maneja internamente las diferencias entre navegadores web.

● Para listas de selección múltiple retorna un arreglo con un


elemento por cada opción seleccionada. Para los demás
casos retorna un único valor.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 12


Introducción a PrototypeJS

Función $F()

● Para los elementos (radiobutton o checkbox) no


seleccionados retorna null.

● Si la opción de una lista no especifica el atributo value,


retorna el texto de la opción.

● Los valores son retornados como cadenas.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 13


Introducción a PrototypeJS

Función $H()

● Crea objetos Hash (de Prototype) a partir de variables tipo


hash.

Ejemplo:

var ficha = $H({codigo: '1234',


nombre: 'Atlas'});

Equivale a las siguientes instrucciones.

var ficha = new Hash();


ficha.set('codigo', '1234');
ficha.set('nombre', 'Atlas');

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 14


Introducción a PrototypeJS

Función $R()

● Creador de rangos de valores enteros.

● Es un alias para el constructor de ObjectRange.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 15


Introducción a PrototypeJS

Función $R() - ejemplos

Ejecutar n veces una función.

$R(1, 10).each(function(n) {
alert(“iteración “ + n);
});

Generar un arreglo de valores.

Var arreglo = $A($R(1, 10));


// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 16


Introducción a PrototypeJS

Función $$()

● Obtiene elementos basado en los selectores de CSS.

● Retorna un arreglo con los resultados.

●Utiliza su propio parser lo que lo hace independiente del


navegador web.

●Es posible componer el selector CSS combinando varios según


se requiera.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 17


Introducción a PrototypeJS

Función $$() - ejemplos

Obtener todos los elementos de un tipo específico.

var divs = $$('div');

Obtener un elemento con ID específico (usuario). Igual a


$(id).

var ee = $$('#usuario');

Obtener los elementos de un tipo específico (div) que tengan


cierta clase CSS (seccion).

var divx = $$('div.seccion');

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 18


Introducción a PrototypeJS

Función $$() - ejemplos

Obtener todos los enlaces dentro de seccion cuyo título sea


Hazme click.

var enlaces = $$('#seccion a[title=”Hazme


click”]');

Obtener todos los elementos de las listas 1 y 2.

var elementos = $$('#lista1 li', '#lista2 li');

Obtener todos los div cuyo contenido sea vacío.

var vacios = $$('div:empty');

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 19


Introducción a PrototypeJS

Función $$() - selectores disponibles

Tipo de etiqueta, como div, a, p, span, etc.

Desendencia: un espacio como separador.

$$('#lista usuario')

Clases CSS: empiezan por un punto.

$$('div.elegido')

Hijos: señalados por el símbolo >.

$$('#contendor > p')

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 20


Introducción a PrototypeJS

Función $$() - selectores disponibles

Hermanos (sibling): señalados por el símbolo +.

$$('#contendor + p')

Adyacentes: señalados por el símbolo ~.

$$('#contendor ~ p')

Negaciones.

$$('p:not(.mensaje_error)')

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 21


Introducción a PrototypeJS

Función $$() - selectores disponibles

Vacío.

$$('div:empty')

Activo, inactivo, seleccionado: :enabled, :disabled y


:checked.

$$('input:enabled')

Además de la mayoría de los Selectores de CSS3.

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 22


Introducción a PrototypeJS

Enlaces de interés

Prototype Javascript Framework


http://www.prototypejs.org/

Prototype - API
http://www.prototypejs.org/api

Prototype – Descargar
http://www.prototypejs.org/download

Sam Stephenson
http://www.conio.net/

Prototype and script.aculo.us: You never knew JavaScript could


do this!
http://pragprog.com/titles/cppsu/prototype-and-script-aculo-us
Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 23
Introducción a PrototypeJS

Enlaces de interés

Practical Prototype and script.aculo.us


http://www.apress.com/book/view/1590599195

Thomas Fuchs
http://mir.aculo.us/

Scriptaculous
http://script.aculo.us/

Sitio Personal
http://www.jorgeivanmeza.com/

Educación – Mis Servicios


http://educacion.misservicios.net/
Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 24
Introducción a PrototypeJS

Fin de la presentación.

Creative Commons (CC)

Jorge Iván Meza Martínez - http://educacion.misservicios.net/ | 25