You are on page 1of 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