Ahora también distribuidor oficial BQ

Aplicaciones Web (VI)

HTML5 CSS3 JSLibrerías JavaScript jQuery y Zepto

Librerias Javascript

Las librerias JavaScript actuales son multi-navegador
Funcionan en IE, Firefox, Safari, Chrome, Opera, …
Ahorran mucho tiempo -> utilizarlas siempre que existan
Ejemplos: jQuery, Zepto, Prototype, Dojo, lungo.js, PhoneGap, …

jQuery es muy popular (http://jquery.com/)
Procesar DOM, gestionar eventos, animaciones y estilos CSS, Ajax, ..

Zepto: subconjunto compatible de jQuery para móviles (http://zeptojs.com)
zepto.min.js ocupa sólo 9,7kB (gzipped)
¡OJO! Soporta browsers móviles actuales, pero no Internet Explorer
Añade eventos táctiles para móviles y tabletas
Es equivalente a jQuery 2.0 aparecida recientemente

 

Objetos y función jQuery (o Zepto)

Objeto jQuery: representación más eficaz de un objeto DOM
se procesan en bloque (array) con métodos de jQuery como html(…)

Función jQuery: jQuery(“<selector CSS>”) o $(“<selector CSS>”)
devuelve el array de objetos jQuery que casan con <selector CSS>
Si no casa ninguno, devuelve null o undefined
<selector CSS> selecciona objetos DOM igual que en CSS


document.getElementById("fecha").innerHTML = "Hola";
 // es equivalente a:
$("#fecha").html("Hola");


La función jQuery convierte además objetos DOM y HTML a objetos jQuery


$(objetoDOM);                          // convierte objetoDOM a objeto jQuery
$("<ul><li>Uno</li><li>Dos</li></ul>") // convierte HTML a objeto jQuery


 

Fecha y hora con jQuery/Zepto

Librería: script externo identificado por un URL que hay que cargar con:
<script type=”text/javascript” src=”zepto.min.js” > </script>

$(“#fecha”) devuelve el objeto jQuery/Zepto del elemento con id=”fecha”

$(“#fecha”).html(new Date()) inserta
new Date() en objeto jQuery devuelto por $(“#fecha”)

Ver ejemplo: 15-date-jquery.htm

 

Función ready: esperar a página cargada

Función ready(): ejecuta un script con el objeto DOM está construido
Invocación: $(document).ready(function() { .. código js … });
Suele utilizarse la sintaxis abreviada: $(function() { .. código .. });

Ver ejemplo: 16-date_jquery_ready.htm

 

Cache y CDN (Content Distribution Network)

Cache: contiene recursos accedidos anteriormente para acceso rápido
Caches identifican recursos por igualdad de URLs

CDN: utilizar URL común a Google, Microsoft, jQuery, Zepto, …
Para maximizar probabilidad de que recursos estén ya en la cache

Ver ejemplo: 17-date_zepto_cdn.htm

 

Selectores tipo CSS de jQuery/Zepto

SELECTORES DE MARCAS CON ATRIBUTO ID
$(“h1#d83”) /* devuelve objeto con marca h1 e id=“d83” */
$(“#d83”)      /* devuelve objeto con con id=“d83” */

SELECTORES DE MARCAS CON ATRIBUTO CLASS
$(“h1.princ”) /* devuelve array de objetos con marcas h1 y class=“princ” */
$(“.princ”)      /* devuelve array de objetos con class=“princ” */

SELECTORES DE MARCAS CON ATRIBUTOS
$(“h1[border]”)         /* devuelve array de objectos con marcas h1 y atributo border */
$(“h1[border=yes]”) /* devuelve array de objectos con marcas h1 y atributo border=yes */

SELECTORES DE MARCAS
$(“h1, h2, p”) /* devuelve array de objectos con marcas h1, h2 y p */
$(“h1 h2”)       /* devuelve array de objectos con marca h2 después de h1 en el árbol */
$(“h1 > h2”)   /* devuelve array de objectos con marca h2 justo después de h1 en arbol */
$(“h1 + p”)     /* devuelve array de objetos con marca p adyacente a h1 del mismo nivel */

 

jQuery/Zepto: Métodos modificadores

$(‘#id3’).html(‘Hello World!’)
sustituye HTML por ‘Hello World!’ en el elemento con id=’id3’
$(‘#id3’).html() devuelve contenido HTML de $(‘#id3’)
$(‘#id3’).append(‘Hello World!’) añade HTML al final del existente

$(‘.expr’).val(‘3’)
inserta atributo value=’3’ a elementos de la clase ‘expr’
$(‘#id3’).val() devuelve atributo value de $(‘#id3’)

$(‘#id3’).attr(‘rel’, ‘license’)
inserta atributo rel=‘license’ a elemento con id=id3
$(‘#id3’).attr(‘rel’) devuelve atributo rel de $(‘#id3’)

$(‘ul’).addClass(‘visible’)
inserta atributo class=‘visible’ a elementos <ul> (lista)

$(‘h1’).hide() y $(‘h1’).show()
oculta o muestra elementos <h1>

 

Modos de invocar Zepto (o jQuery)

String con selector CSS: “$(“<selector CSS>”)”
Devuelve un array de objetos jQuery que casan con “<selector CSS>”

“String HTML”: “$(“<ul><li>Uno</li><li>Dos</li></ul>”)”
Devuelve objeto jQuery equivalente a string interpretado como HTML

“Objeto DOM”: “$(document)”
Transforma objeto DOM en objeto jQuery equivalente

“Función ready”: “$(function(){…}))”
Ejecuta la función cuando el árbol DOM está construido

 

Eventos con jQuery y Zepto

Manejadores de eventos: se definen sobre el objeto jQuery i de <img… id=i1>
con la función on -> i.on(‘evento’, manejador)

Ver ejemplo: 20_event_id_zepto.htm, 25_question_jquery.htm

 

HTML5 CSS3 JS

 

La Clase Array

Arrays

Array: lista ordenada de elementos heterogéneos accesibles a través de un índice de 0 a length-1

Tamaño máximo: 2^32-2 elementos

Elementos
a[0] es el primer elemento

a[a.length-1] último elemento


var x = [1, 2, 3];
a[0]     => 1
a[1]     => 2
a[2]     => 3
a.length => 3


 

Elementos de un Array

Elementos del array pueden contener cualquier valor u objeto
undefined
otro array
objetos

Indexar elementos que no existen devuelve undefined


var a = [1, undefined, 'a', , [1, 2]];
a[3];    => undefined
a[4];    => [1, 2]
a[9];    => undefined
a[4][1]; => 2


Tamaño del Array

Los arrays son dinámicos pueden crecer y encoger

Asignar un elemento fuera de rango incrementa el tamaño del array

El tamaño del array se puede modificar con la propiedad a.length
a.length = 3; modifica el tamaño del array. Que pasa a ser 4


var a = [1, 3, 1];
a;           => [1, 3, 1]
a[4] = 2;    => 2
a;           => [1, 3, 1, , 2]

// el array se reduce
a.length = 2 => 2
a;           => [1, 3]


 

Métodos de Array

Array hereda los métodos de su clase

sort(): devuelve array ordenado

reverse(): devuelve array invertido

push(e1, .., en): añade e1, … ,en al final del array

pop(): extrae último elemento del array


var a = [1, 5, 3];
a.sort();           => [1, 3, 5]
a.reverse();        => [5, 3, 1]

a.push(false);      => 4
a;                  => [5, 3, 1, false]

a.pop();            => false
a;                  => [5, 3, 1]


 

Más métodos

join(<separador>):
Ddevuelve string uniendo elementos
introduce <separador> entre elementos

slice(i,j): devuelve una rodaja
Indice negativo en (j) es relativo al final
índice “-1” es igual a a.length-2

splice(i, j, e1, e2, … , en)
Sustituye j elementos desde i en el array
por e1, e2, … ,en
Y devuelve los elementos eliminados

 


var a = [1, 5, 3, 7];

a.join(';');       => '1;5;3;7'
a.slice(1, -1);    => [5, 3]

a.splice(1,2,true) => [5, 3]
a;                 => [1, true, 7]


HTML5 CSS3 JS

 

Bucles: sentencias while, for y do/while

Bucle

Un bucle es una secuencia o bloque de instrucciones que se repite mientras se cumple una condición de permanencia

Un bucle se controla con 3 elementos, normalmente asociados a una variable(s) de control del bucle
Inicialización: fija los valores de arranque del bucle
Permanencia en bucle: indica si se debe volver a ejecutar el bloque
Acciones de final del bloque: actualiza en cada repetición las variables de control

Ilustraremos los bucles (while, for y do/while) con la función veces

veces(…) acepta letra y frase como primer y segundo parámetros
Y devuelve el número de veces que la frase contiene la letra

Bucle while

La inicialización se realiza al principio, fuera del bloque
var i=0, n=0;

La sentencia comienza con while con su condición de permanencia entre paréntesis (…)
while (i < frase.length)

El bloque se sitúa dentro de las llaves {…} con
las acciones del bucle: if (letra === frase[i]) { ++n;};
y la acción final: ++i;

Ver ejemplo: 50-veces_while.htm

Sintaxis de la sentencia for

La sentencia comienza con for

Sigue la condición (con 3 partes)
 (i=0; i < arguments[i]; i++)
Inicialización: i=0, …
Permanencia en bucle: i < arguments.length
Acción final del bloque: ++i, …

La sentencia termina con un bloque de acciones que debe delimitarse con llaves {…}

Bloques que contengan solo 1 sentencia pueden omitir las llaves {…} pero se mejora la legibilidad delimitándolos con llaves {…}

Ver ejemplo: 51-veces_for.htm

Bucle do/while

La inicialización se realiza al principio, fuera del bloque
var i=0, n=0;

La sentencia comienza con do seguida del bloque con llaves {…}

El bloque de do, contendrá tanto las acciones del bucle como la acción final.

Termina con while, que contendrá  entre paréntesis (…) la condición de permanencia
while (i < frase.length)

Parecido a while, pero do siempre ejecuta el bloque de acciones al menos una vez.

Ver ejemplo: 52-veces_do.htm

HTML5 CSS3 JS

Ejemplos con iframe, array y for

iFrame

iFrame es un marco de navegación independiente

Un iFrame crea una caja de arena segura donde poder importar objetos externos

Ejemplo: enlaza un juego en otro servidor
El iFrame evita que se introduzca malware
Acceso a JavaScript limitado a la caja de arena

Ver ejemplo: 54-iframe-pixie.html

Seguridad Web: Same “Origin Policy”

La seguridad se controla en las aplicaciones JavaScript permitiendo que un programa JavaScript en un iframe solo acceda
Al árbol DOM de la página principal si proviene del mismo origen

Esto evita en el ejemplo anterior que el juego robe o modifique información o datos del usuario en la página externa

Origen
protocolo, servidor y puerto del URL

La restricción de pertenecer al “mismo origen”
Solo afecta al recurso principal: página Web, recurso, …
Los scripts o los estilos no están afectados y pueden venir de otro servidor

Así es posible hacer “mash-ups” (http://es.mapase.com/ por ejemplo) seguros con contenidos que no estén en nuestra cadena de confianza

Ver ejemplo: 55-for_iframe.htm


display: flex;
flex-wrap: wrap;

/* coloca cada iframe a la derecha
del anterior. Al llegar al limite
pasa a la línea siguiente. */


 
                    

Comments are closed.