Curso: Desarrollo en HTML5, CSS y Javascript de WebApps, incl. móviles FirefoxOS* (4.ª ed.)

En esta web se van a incluir algunas de las prácticas y apuntes del curso online del portal de Miríada X
Desarrollo en HTML5, CSS y Javascript de WebApps, incl. móviles FirefoxOS* (4.ª ed.).

Módulo 0. Introducción al curso y al programa “Diseño de servicios en la nube para acceso móvil con HTML5”

Tema 0: Transparencias del módulo (.pdf)

Tema 1: Introducción al Curso MOOC sobre HTML5, JavaScript y Firefox OS (vídeo)

Tema 2: Introducción a Internet y a la Web (vídeo)

Tema 3: Firefox y sus herramientas de desarrollo web (vídeo)

Modulo 1: Introducción a los elementos básicos de HTML, CSS, codificación e hiperenlaces, así como a las herramientas del curso (Vish editor, sublime text, dreamweaver y firefox)

Tema 0: Transparencias del módulo(.pdf) y ejemplos del módulo en Google Drive

Tema 1: HTML/CSS - Mi primera página Web (vídeo)

Sobre las etiquetas HTML, editores WYSIWYG y de texto plano para HTML.

Ejercicio Módulo 1 Tema 1: Mi primera página web

Tema 2: Uso del editor Web VISH (vídeo)

Es un editor de código online que perite ver de forma interactiva el resultado del código que vamos tecleando. Enlace al editor vishub.org

Tema 3: Cómo utilizar el editor Sublime Text (vídeo)

Tema 4: primera página Web utilizando Adobe DreamWeaver (vídeo)

Sugieren descargar DreamWeaver y algunas de sus características al crear un nuevo documento, codificación utf-8, versión html, modo código, modo diseño, o los dos a la vez; divide la pantalla. Administra sitios web, se crea nuevo sitio y se selecciona una carpeta para el, vemos todos los archivos en la parte de la derecha.

Tema 5: Inspector HTML de Firefox (vídeo)

Tema 6: HTML/CSS: Marcas básicas (vídeo)

La importancia de aplicar todas las reglas en un único fichero .css en lugar de copiarlo en cada uno de los ficheros .html que componen el sitio web... interesante ver el proyecto css Zen Garden. Por citar algunas marcas:

Módulo 1 Ejercicio Tema 6: CSS Básico

Tema 7: Codificación de caracteres, UNICODE y "character entity" (vídeo)

Alfabeto, código y codificación. Sobre codigo ASCII, ISO Latin-1, UNICODE; este último suporta muchas lenguas:

UNICODE es un cosorcio internacional de normalización, asigna un código a cada caracter, cada plano se codifica en 2 bytes. Entre los planos:

Interesante tener disponible esta tabla de Códigos HTML - Tabla de cacteres y símbolos para hacer que el contenido se muestre correctamente en los navegadores, sobretodo a la hora de querer mostrar carateres y símbolos especiales

Tema 8: URLs, recursos y enlaces (vídeo)

Comenta sobre URLs relativas y/o absolutas, hipervínculos, enlaces ancla... (ver el vídeo del enunciadode este tema).

Ejercicio obligatorio Módulo 1 Tema 8: Marcas Basicas HTML

Como incluir carateres especiales en un documento html: <section><h1> Forest elephants</h1> <section> <h1>Introduction</h1> <p>In this section, we discuss the lesser known forest elephants. </section> <section> <h1>Habitat</h1> <p>Forest elephants do not live in trees but among them. </section> <aside> <p>advertising block </aside> </section> <footer> <p>(c) 2010 The Example company </footer>

Modulo 2: Estructura de la navegación y el texto en páginas Web HTML5, prioridad en CSS3 y publicación de los ejercicios del curso

Tema 0: Transparencias(.pdf) y ejemplos del módulo en ViSH o también ejemplos del módulo en Google Drive

Tema 1: HTML - Estructura (vídeo)

La estrucura web en bloques:

Ver ejemplo 1 y ejemplo 2 (Google Drive). Y además tenemos la etiqueta div, la cual no tiene significado semántico y es empleada para confeccionar cajas que confeccionan la estructura de los contenidos. Suele tener identificadores 'id' y clases 'class'.

Ejercicio Módulo 2 Tema 1: Esquema sencillo en estructura de árbol de este documento html (el esquema está incluido en el documento)

Tema 2: CSS - Prioridad (vídeo)

Tema 3: HTML/CSS - Navegación (vídeo) (Página 32 del pdf)

Ejercicio Módulo 2 Tema 3: realizar por CSS una barra de navegación vertical, y una barra de navegación horizontal. También tenemos una barra de navegación vertical y otra horizontal un mismo archivo html

Tema 4: HTML/CSS - Texto (vídeo) (pág 41 del pdf)

Firefox OS utiliza la fuente "Fira Sans"

Ejercicio Módulo 2 Tema 4: Realiza una página que contenga un párrafo con fuentes vinculadas, con la fuente del SO de firefox FiraOpenType, y otro párrafo con fuentes vinculadas de google fonts

Aquí puedes descargar la fuente FiraOpenType

Tema 5: Publicación de páginas y apps Web en Internet (vídeo)

Como publicar ejercicios en Neocities.org. Indica como registrarse y como manejar el sitio.

Ejercicio obligatorio Módulo 2 Tema 5: Construir dos página de noticias en HTML

Modulo 3. Estructuración, visualización y depuración con Firefox de HTML5 y CSS3 adaptados a un entorno responsivo y multi-pantalla, para adaptación a móviles y tabletas

Tema 0: Transparencias del módulo (.pdf) y ejemplos del módulo en Google Drive

Tema 1: CSS - DIV (vídeo)

La etiqueta div se emplea para estructurar contenidos en la página, por defecto ocupará todo el ancho de la página. Sus atributos:

En CS3 se pueden usar varias imagenes de fondo o en mosaico, degrados con varios colores o con transparencias, etc. (ver http://css3files.com/background/). Y en este enlace se puede ver el ejemplo del siguiente código (en un fondo azul, las imágenes del suelo y las nubes están repetidas, y las otras están colocadas en determinadas posiciones):

div {
background: url(images/f01.png) left bottom repeat-x,
url(images/f02.png) left bottom no-repeat,
url(images/f03.png) left top repeat-x;
background-color: #a4d3ff;
}

Otras etiquetas:

Ejercicio Módulo 3 Tema 1: Realiza una página que contenga un div con al menos 3 imágenes de fondo, bordes redondeados y sombra.

Tema 2: CSS - Estructura (vídeo)

Sobre cajas o capas div, float, clear: both; - posiciones absolutas o relativas (con px o porcentajes %) de la estructura de un web. Como se muestra en la transparencia de este enlace.

Otros enlacer relacionados:

Ejercicio Módulo 3 Tema 2: Ejercicio P2P opcional. Realiza la estructura de una página que contenga todos los elementos que se indican en el siguiente esquema: realizado con float y realizado con display y flex

Tema 3: Diseño adaptativo para PC, Móvil y Tableta (vídeo) (transparencia 21)

El Diseño Web adaptable (responsibe) permite en escoger entre varios ficheros CSS, dependiendo de los píxeles de la pantalla del dispositivo con el que accedemos al sitio web, en el fichero html se especifica que fichero CSS aplicar, dependiendo del tamaño de la pantalla de dicho dispositivo.

<link rel='stylesheet' media='screen and (min-width: 981px)' href='css/pantalla.css' />
<link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 980px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (min-width: 241px) and (max-width: 480px)' href='css/smartphone.css' />

Enlaces relacionados:

Tema 4: Integración de objetos y multimedia en HTML5 (transparencia 28)

Integrar objetos y recursos externos:

  • img: imágenes de puntos (GIF, JPG, PNG...) o vectoriales (svg)
  • video, audio: no existe un acuerdo sobre el formato a emplea...
  • iframe: creo un marco de navegación web anidado y seguro para páginas web u otros objetos
  • object: objetos como plugins o imágenes más genéricos
  • embed: aplicación exterior, nomalmente no HTML como flash

Las marcas audio y video de HTML5 permiten incluir audio y video en páginas Web:

Formatos de vídeo

  • Contenedor OGG: Video: Theora (VP7), Audio: Vorbis Calidad menor
  • Contenedor MP4: Video: H264, Audio: ACC Existen Patentes
  • Contenedor WebM: Video: VP8, Audio: Vorbis

    ¡¡¡ Mejor ver el vídeo y las transparencias !!!

Tema 5: Aplicar estilos con Dreamweaver (vídeo)

Muy extenso e interesante, lo mejor es ver el vídeo

Tema 6: Editor de Estilos de Firefox (vídeo)

Permite editar los estilos, ver como afectan a la web, y guardar el fichero css localmente en nuestra máquina. Tambén ver como se ve sin aplicar la hoja de estilos activando desde el "ojo". Con el botón "nuevo" podemos crear otra hoja de estilos cuyos estilos se aplicará a la página... Para acceder a el desde firefox:

- Herramientas -> Desarrollador web -> Mostrar Herramientas
- Herramientas -> Desarrollador web -> Editor de Estilos
 (También se puede acceder a "Editor de estilos" desde el "Inspector")

Ejercicio Módulo 3 Tema 6 Realizar una página personal propia, o de un usuario ficticio

Debe incluir:

La galería puede incluir fotos, videos, audios, animaciones, páginas Web, ….

Módulo 4: Introducción a JavaScript, sus sentencias, variables, expresiones, scripts de cliente, así como a la utilización de la consola JavaScript del navegador Firefox

Tema 0: Transparencias y ejemplos del módulo (en ViSH) (y también en Gogle Drive)

Tema 1: Introducción a JavaScript. Tipos y valores (vídeo)

Tipos, objetos valores

Operadores y expresiones

Desde la Consola de las Herramientas de desarrollador de Firefox podemos ver como se ejecutan los programas JavaScript e incluso modificar las sentecias del mismo modo que podemos hacer con las reglas CSS.

Módulo Math

Contiene constantes (como el número PI, E...) y funciones (seno, coseno, logaritmos, potencias...) matemáticas.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math

Tema 2: Programa, sentencia, variable y comentario (vídeo) (trasparencia 12 del múdulo)

Un programa en un conjunto de sentencias que se ejecutan, las sentencias deben acabar todas en ";". Tambén tenemos los comentarios...

Los nombres de variables deben comenzar siempre por una letra, el caracter "_", o "$", y pueden contener números dentro o al final del mismo nombre, hay diferencia entre MAYÚSCULAS y minúsculas, tampoco se pueden uras palabras reservadas que forman parte del lenguaje de programación, y tampoco se permite el uso de caracteres especiales en medio de los nombre de variable.

Tema 3: Expresiones con variables (vídeo) Tranparencia número 20

Una variable puede utilizarse en la expresión que se asigna a ella misma, la parte derecha usa el valor anterior a la ejecución de la sentencia; si y = 8, en la sentencia "y = y - 2", a la variable y se le asigna el valor "6" (8-2). Usar una variable no definida en una expresión provoca un error y la ejecución del programa se interrumpe.

var x = 3; // x = 3
var y = 5 + x; // y = 8
y = y - 2; // y = 6
x = y + z; // variable z no ha sido definida ERROR

Asignación con operación

Es muy común modificar el valor de una variable sumando, restando... algún valor x = x +7; y = y - 3; z = z * 8; ..... JavaScript tiene operadores especiales para estas operaciones +=, -=, *=, /=, %=, ...( aplica a operadores lógicos, desplazamiento, ..):

var x = 3; // define x inicializada a 3
x += 2; // suma 2 a x -> x = 5
x *= 3; // multiplica x por 3 -> x = 15
x %= 4; // % operación módulo: divide x por 4 y devuelve el resto -> x = 3

Pre y post incremento o decremento

Los operadores de auto-incremento ++ y auto-decremento-- suma o resta 1 a la variable a la que se aplica. Se aplican a la izquierda o derecha de una variable en una expresión modificando el valor antes o después de evaluar la expresión:

var x = 3; // x = 3
var y = ++x + 2; // x = 4, y = 6
var z = y-- + 2; // y = 5, z = 8

Tema 4: Scripts de entrada/salida (vídeo) Tranparencia número 24

La sentencia de ejecución de expresiones puede evaluar expresiones (3+2; o alert(“Texto”);). Estas sentencias se utilizan habitualmente para comunicar con el exterior (alert(“Texto”); muestra una ventana desplegable al usuario). Una expresión sin efecto lateral, solo genera un valor, si ese valor no se guarda en una variable la instrucción no tiene ningún efecto en el programa, solo consume recursos de computación:

alert("Texto"); // envían ventana emergente con mensaje al exterior
document.write("Texto"); // Esctibe en el navegador
var x = 3; // definición e inicialización de variable
x*5 - 2; // es una expresión correcta, pero inútil al no guardar el resultado
x = x*5 + 2; // asignación, es una expresión útil porque guarda el resultado

Ejemplo I: Script con fecha

Ejemplo II: Script con expresión

Funciones alert(), confirm() y prompt(). (ver transparencia 28)

Ejemplo III: Script conversor (ver transparencia 29)

  1. El script pide el número de Euros a convertir a Dólares con el desplegable de la función prompt()
  2. Cuando el usuario lo introduce calcula el equivalente en dólares ( * 1,34) y lo presenta con document.write(….). Recargando la página se vuelve a ejecutar el programa

Tema 5: La consola JavaScript de Firefox (vídeo)

Desde Firefox -> Herramientas -> Desarrollador web -> Consola web. Interesante vídeo, suponemos que más adelante, en el curso, se verá con más detalle.

Ejercicio Módulo 4 Tema 5 Realizar un script que pida la altura y y anchura de una pared y, tras multiplicar esos datos, muestre en la página los metros cuadrados de esta

Se debe añadir al final de la página de personal desarrollada en el ejercicio P2P final del módulo 3, un script que calcule la superficie en metros cuadrados de una pared.

Módulo 5: Primeros programas JavaScript con booleanos, igualdad y comparaciones, sentencia condicional, números, funciones, strings e internacionalización

Tema 0: Transparencias y ejemplos del módulo*** y ejemplos del módulo (en ViSH) (y también en Gogle Drive)

Tema 1: Tema 1: Booleano, igualdad y otros operadores lógicos (vídeo)

Tipo Booleano

ExpresiónConversiónValor
!false=>true
!true=>false

Operador unitario negación " ! ": !(valor booleano) Convierte un valor lógico en el opuesto

Por ejemplo:

if (expresión booleana) {Acciones_A} else {Acciones_B}

Conversión a booleano " ! "

ExpresiónConversiónValor
!4=>false
!"4"=>false
!null=>true
!0=>true
!!""=>false
!!4=>true

La regla de conversión de otros tipos a booleano es:

  • false: 0, -0, NaN, null, undefined, "", ''
  • true: resto de valores

Operadores de identidad e igualdad " === "

// Identidad de tipos básicos
ExpresiónConversiónValor
0 === 0=>true
0 === 0.0=>true
0 === 0.00=>true
0 === 1=>false
0 === false=>false
'2' === "2"=>true
'2' === "02"=>false
" === ""=>true
" === " "=>false

Más info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Sameness

Operadores de comparación

// Identidad de tipos básicos
ExpresiónConversiónValor
1.2 < 1.3=>true
1 < 1=>false
1 <= 1=>true
1 > 1=>false
1 >= 1=>true
false < true=>true
"a" < "b"=>true
"a" < "aa"=>true

JavaScript tiene 4 operadores de comparación

  • Menor: <
  • Menor o igual: <=
  • Mayor: >
  • Mayor o igual: >=

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

Operador "y" de JavaScript: " && "

// Identidad de tipos básicos
ExpresiónConversiónValor
true && true=>true
false && true=>false
true && false=>false
false && false=>false
0 && true=>0
1 && "5"=>"5"

El operador lógico y: operador binario: valor1 y valor2 es "true" solo si ambos valores son verdaderos.

Se ha extendido y es más que un operador lógico:

  • No convierte el resultado a booleano, solo interpreta valor1 como booleano y según sea false o true devuelve como resultado valor1 o valor2, sin modificar.
  • Si valor1 se evalúa a false devuelve valor1, sino devuelve valor2

Operador "o" de JavaScript: " || "

// Identidad de tipos básicos
ExpresiónConversiónValor
true || true=>true
false || true=>true
true || false=>true
false || false=>false
undefined || 0=>0
13 || 0=>13
// Asignar valor por defecto si
// "x" es "undefined" o "null"
x = x || 0;

Operador lógico " o ", es un operador binario: valor1 o valor2 es "true" si uno de los valores es verdadero

" || " se ha extendido y es más que un operador lógico:

  • No convierte el resultado a booleano
  • Si valor1 se evalúa a true devuelve valor1, sino devuelve valor2

Operador de asignación condicional: " ? : "

ExpresiónConversiónValor
(true) ? 0 : 7=>0
(false)? 0 : 7=>7
(7) ? 0 : 7=>0
("") ? 0 : 7=>7

El operador de asignación condicional devuelve un valor en función de una condición lógica, La condición lógica va siempre entre paréntesis " ( ) "

Semántica de la asignación condicional: (condición) ? valor1 : valor2

  • Si condición se evalúa a true devuelve valor1, sino devuelve valor2

Tema 2: Sentencia if / else (vídeo) Trasparencia número 9

if (x) {
y = 0;
z = "hola";
}
else if (y) {
y = 1;
z = "adios";
}
else {
y = 2;
z = "hasta luego";
}

Mejor ver las transparencias... la número 9

funciones de JavaScript

  • Math.random(); genera un número aleatorio entre 0 y 1
    var x = Math.random();
  • document.write(); borra el contenido de la página y escribe el contenido que hay entre los parentesis en el navegdor
    document.write("Texto a mostrar: " + variable1 + "Más texto: " + variable2);
  • document.writeln(); escribe una línea de texto con el contenido que hay entre los parentesis en el navegdor sin eliminar el contenido de la página
    document.writeln("Texto a mostrar: " + variable1 + "Más texto: " + variable2);
  • prompt("introduzca un valor");Hace que aparezca una ventana emergente en la que el usuario podrá escribir un valor para asignar a una variable
    var x = prompt("introduzca un numero");
  • isNaN(variable)devuelve true o false si la variable es un número o no. se suele incluir en condicionales como if o else if
    if (isNaN(x)){...}
    else if ("otra condición") {...}

Ejercicio Modulo 5 Tema 2 Construir un script insertado en una página HTML que realice la pregunta: "¿Capital de España?"

Se debe utilizar la función prompt() para enviar la pregunta, pidiendo la respuesta a través de su cajetín de entrada.

Usar if / else para comprobar si la respuesta es "Madrid" o no.

Tema 3: Strings e internacionalización (I18N) (vídeo) Tranparencia número 15

El timpo string

Se refiere a las cadenas de textos y caracteres, que pueden representar muchas leguas direntes, internacionalizado codificado con el código UNICODE

Internacionalización (I18N)

UNICODE es un consorcio internacional (http://www.unicode.org/), define normas de internacionalización (I18N), como el código UNICODE, que puede representar muchas lenguas: http://www.unicode.org/charts/

JavaScript utiliza solo el Basic Multilingual Plane de UNICODE, son caracteres codificados en 2 octetos (16 bits), similar a BMP, pero UNICODE tiene otros planos que incluyen lenguas poco frecuentes, algunos caracteres de lenguas no incluidas se pueden representar con caracteres escapados del tipo "\u55e8"

Caracteres escapados (pag 18)

CARACTERES ESCAPADOS
NUL (nulo):\0,\x00,\u0000
Backspace:\b,\x08,\u0008
Horizontal tab:\t,\x09,\u0009
Newline:\n,\x0A,\u000A
Vertical tab:\t,\x0B,\u000B
Form feed:\f,\x0C,\u000C
Carriage return:\r,\x0D,\u000D
Comillas (dobles):\",\x22,\u0022
Apóstrofe:\',\x27,\u0027
Backslash:\\,\x5C,\u005C

Los caracteres escapados son caracteres no representables dentro de un string comienzan por la barra inclinada (\) y la tabla incluye algunos de los más habituales.

Ademas podemos representar cualquier carácter UNICODE o ISO-LATIN-1:

Algunos ejemplos

  • "Comillas dentro de \"comillas\"" // " debe ir escapado dentro del string
  • "Dos \n lineas" // retorno de línea delimita sentencias
  • "Dos \u000A lineas"

Clase String (o array de caracteres)

Incluye métodos y propiedades para procesar strings: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Un string es un array de caracteres, los caracteres se cuentan de forma que el primer carácter es el 0 y el último es el total_de_caracteres - 1.

Algunas funciones:

  • Propiedad con tamaño: 'ciudad'.length => 6
  • Acceso como array: 'ciudad'[2] => ‘u’
  • Método: 'ciudad'.charCodeAt(2) => 117 // devuelve código UNICODE de tercer carácter
  • Método: 'ciudad'.indexOf('da') => 3 // devuelve posición de substring
  • Método: 'ciudad'.substring(2,5) => 'uda' // devuelve substring entre ambos índices

Ver ejemplos en la Transparencia 20 de este tema 3

Tema 4: Números (vídeo) Tranparencia número 21

Números: tipo number

Operaciones con números
10 + 4=>14// sumar
10 - 4=>6// restar
10 * 4=>40// multiplicar
10 / 4=>2.5// dividir
10 % 4=>2// operación resto
//decimales dan error de redondeo
0.1 + 0.2=>0,3000000000004
-
3e2=>300
3e-2=>0,03
-
+10/0=>Infinity//desborda
-10/0=>-Infinity//desborda
5e500=>Infinity//desborda

Conversión a enteros

Conversión a enteros
'67' + 13=>6713
+'67' + 13=>80
+'6.7e1' + 13=>80
'xx' + 13=>'xx13'
+'xx' + 13=>NaN
13 + true=>14
13 + false=>13

JavaScript calcula expresiones convirtiendo tipos según necesita, utiliza las prioridades de operadores

  • Conversión a entero (o real)
    • booleano: true a 1, false a 0
    • String: Convierte número a valor o NaN
    • null: a 0, undefined: a NaN

Convertir un string a número se denomina también parsear o analizar sintácticamente, es similar al análisis sintáctico realizado a los literales de números

Modulo Math (transparencia 24)

Funciones Math
Math.PI=>3.141592653589793
Math.E=>2.718281828459045
// numero aleatorio entre 0 y 1
Math.random()=>0.7890234
-
Math.pow(3,2)=>9// 3 al cuadrado
Math.sqrt(9)=>3// raíz cuadrada de 3
-
Math.min(2,1,9,3)=>1// número mínimo
Math.max(2,1,9,3)=>9// número máximo
-
Math.floor(3.2)=>3//entero por abajo?
Math.ceil(3.2)=>4//entero por arriba?
Math.round(3.2)=>3//redondeo
-
Math.sin(1)=>0.8414709848078965
Math.asin(0.8414709848078965)=>1

El Modulo Math contiene constantes y funciones matemáticas

  • Constantes
    • Números: E, PI, SQRT2, ...
    • ...
  • Funciones
    • sin(x), cos(x), tan(x), asin(x), ....
    • log(x), exp(x), pow(x, y), sqrt(x), ....
    • abs(x), ceil(x), floor(x), round(x), ....
    • min(x,y,z,..), max (x,y,z,..), ...
    • random()

Mas info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

Clase Number

Clase Number
var x = 1.1;
x.toFixed(0)=>"1"
x.toFixed(2)=>"1.10"
-
(1).toFixed(2)=>"1.00"
-
1.toFixed(2)=>Error sintáctico
-
Math.PI.toFixed=>(4)td>=>"3.1416"
-
(0.1).toExponential(2)=>"1.00e-1"
x.toExponential(2)=>"1.10e+0"
-
(0.1).toPrecision(2)=>"0.10"
x.toPrecision(2)=>"1.1"

La clase Number encapsula números como objetos equivalentes

  • Number define algunos métodos útiles
    • toFixed(n) devuelve string redondeando a n decimales
    • toExponential(n) devuelve string redondeando mantisa a n decima.
    • toPrecision(n) devuelve string redondeando a n dígitos

JS convierte una expresión a objeto al aplicar el método a una expresión
Ojo! literales dan error sintáctico

Mas info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

Tema 5: Funciones (vídeo) Tranparencia número 26

Función function

function comer(persona, comida) {
return (persona + " come " + comida);
};
Invocación y retorno de función
InvocaciónRetorno
comer('José', 'paella');'José come paella'

bloque de código con parámetros, invocable (ejecutable) a través del nombre. La ejecución finaliza con la sentencia return expr o al final del bloque. Al acabar la ejecución, devuelve un resultado: valor de retorno

Valor de retorno:

  • resultado de evalúar expresión, si se ejecuta la sentencia return expr
  • undefined, si se alcanza final del bloque sin haber ejecutado ningún return

Parámetros de una función

function comer(persona, comida) {
return (persona + " come " + comida);
};
Invocación y retorno de función
InvocaciónRetorno
comer('José', 'paella');'José come paella'
comer('José', 'paella', 'carne');'José come paella'
comer('José');'José come undefined'

Los parámetros de la función son variables utilizables en el cuerpo de la función, al invocarlas se asignan los valores de la invocación

  • La función se puede invocar con un número variable de parámetros
  • Un parámetro inexistente está undefined

El array de argumentos

function comer(persona, comida) {
return (arguments[0] + " come " + arguments[1]);
};
Invocación y retorno de función
InvocaciónRetorno
comer('José', 'paella');'José come paella'
comer('José', 'paella', 'carne');'José come paella'
comer('José');'José come undefined'

Los parámetros de la función están accesibles también a través del array de argumentos: arguments[....]... Cada parámetro es un elemento del array

  • En: comer('José', 'paella')
    • arguments[0] => 'José'
    • arguments[1] => 'paella'

Parámetros por defecto

function comer(persona, comida) {
persona = (persona || 'Alguién');
comida = (comida || 'algo');
 return (arguments[0] + " come " + arguments[1]);
};
Invocación y retorno de función
InvocaciónRetorno
comer('José');'José come algo'
comer();'Alguien come algo'

Funciones invocadas con un número variable de parámetros suelen definir parámetros por defecto con el operador ||. Los parámetros son variables y se les puede asignar un valor

  • x || parámetro_por_defecto

Si x es undefined, es false y devolverá parámetro por defecto

Funciones como objetos

var comer = function(persona, comida) {
return (persona + " come " + comida);
};
Invocación y retorno de función
InvocaciónRetorno
comer('José', 'paella');'José come paella'

Las funciones son objetos de pleno derecho y por lo tanto pueden asignarse a variables, propiedades, parámetros, ....

"function literal": es una función que se define sin nombre y se suele asignar a una variable, que le da su nombre. Se puede invocar a través del nombre de la variable

Operador de invocación de una función

var comer = function(persona, comida) {
return (persona + " come " + comida);
};
Invocación y retorno de función
var x = comer; // asigna a x el código de la función
InvocaciónRetorno
x('José','paella');'José come paella'
x()'undefined come undefined’
-
var y = comer();// asigna a y el resultado de invocar la función
y'undefined come undefined'

El objeto función puede asignarse o utilizarse como un valor ó el objeto función contiene el código de la función

El operador (...) invoca una función ejecutando su código, Solo es aplicable a funciones (objetos de la clase Function), Puede incluir una lista de parámetros separados por coma

Ejercicio Módulo 5 Tema 5 Realizar un script que sea un juego para acertar un número aleatorio

Construir un script insertado en una página HTML con un juego para acertar un número aleatorio. El script generará aleatoriamente 1, 2 o 3 y pedirá al usuario que lo acierte, ofreciéndole que introduzca el número a través de una ventana generada con prompt().

El script se deberá estructurar de la siguiente forma:

Módulo 6: Objetos, propiedades, métodos, eventos, formularios, sentencia for/in y características avanzadas de objetos, incluyendo acceso a la página Web cargada en el navegador a través del árbol DOM (Document Object Model)

Tema 0: Transparencias y ejemplos del módulo*** y ejemplos del módulo (en ViSH) (y también en Gogle Drive)

Tema 1: Objetos, propiedades y métodos (vídeo)

Objetos

Los objetos son colecciones de variables agrupadas como un elemento estructurado que llamamos objecto. Las variables de un objeto se denominan propiedades

Una propiedad es un par nombre:valor donde los nombres deben ser todos diferentes en un mismo objeto

Se definen con el literal: { nombre:valor, ... }

Por ejemplo: {titulo: 'Avatar', director: 'James Cameron'} crea un objeto con 2 propiedades:

  • titulo:'Avatar'
  • director:'James Cameron'

Propiedades

El acceso a propiedades utiliza el operador punto obj.propiedad

Por ej. en: var pelicula = {titulo: 'Avatar', director: 'James Cameron'}

  • pelicula.titulo => "Avatar"
  • pelicula.director => "James Cameron"
  • pelicula.fecha => undefined // la propiedad fecha no existe y aborta la ejecución del programa

La notación punto solo acepta nombres de propiedades con la sintaxis de variables: a, _method, $1, .... No son utilizables: “#43", "?a=1", ......

Notación array

La notación array es equivalente a la notación punto. pelicula["titulo"] es equivalente a pelicula.titulo. Al acceder a:
var pelicula = {titulo: 'Avatar', director: 'James Cameron'}

La notación array permite utilizar strings arbitrarios como nombres, por ejemplo, objeto["El director"], pelicula[""] o a["%43"]
OJO! es conveniente utilizar siempre nombres compatibles con notación punto

Nombres (strings) arbitrarios son posibles también en un literal de objeto. Por ejemplo:

{"titulo": 'Avatar', "El director": 'James Cameron'}

No se debe hacer, pero se puede si es extrictamente necesario

Nombres de propiedades como variables

La notación array permite acceder también a propiedades cuyo nombre esta en una variable en forma de string. Esto no es posible con la notación punto

var x = {titulo: 'Avatar', director: 'James Cameron'}

x.titulo; => 'Avatar'
x['titulo'] ; => 'Avatar'

var p = 'titulo'; // inicializada con string 'titulo'

x[p] ; => 'Avatar' // x tiene una propiedad de nombre 'titulo', que es el string que contiene p
x.p; => undefined // El objeto x no tiene ninguna propiedad de nombre p y devuelve undefined

Clases y herencia

Métodos de la clase

Definición de un nuevo método de un objeto

Los métodos se pueden definir también directamente en un objeto. El nuevo método solo se define para ese objeto (no es de la clase)

Invocar un método cambia el entorno de ejecución de JavaScript pasando a ser el objeto invocado, que se referencia con this

referencia la propiedad titulo del objeto pelicula

var pelicula = {
titulo:'Avatar',
director:'James Cameron',

resumen:function (){
return "El director de " + this.titulo + " es " + this.director;
}
}

pelicula.resumen() => "El director de Avatar es James Cameron"

Algunas Clases predefinidas

  • Object {a:3, b:"que tal"} Clase raíz, suele usarse el literal
  • Array [1, 2, 3] Colección indexable, suele usarse el literal
  • Date new Date() Hora y fecha extraida del reloj del sistema
  • Function function (x) {....} Encapsula código, suele usarse literal o def.
  • RegExp /(hola)+$/ Expresiones regulares, suele usarse el literal
  • Math Módulo con constantes y funciones matemáticas
  • Number, String y Boolean Clases que encapsulan valores de los tipos number, string y boolean como objetos. Sus métodos se aplican a los tipos directamente, la conversión a objetos es automática

Tema 2: Objetos: Características avanzadas (vídeo) Transparencia 11

Propiedades dinámicas

Ejemplo propiedades dinámicas
var x = { peras:3, fresas:20};
Sentencia - Valor variables
x.peras = 7; => {peras:7, fresas:20}
x.kiwis = 5; => {peras:7, fresas:20, kiwis:5}
delete x.fresas; => {peras:7, kiwis:5}

Las propiedades de objetos pueden crearse y pueden destruirse

Operaciones sobre propiedades

x.c = 4; // OJO: sentencia compleja!!

  • si propiedad x.c existe, le asigna 4;
  • si x.c no existe, crea x.c y le asigna 4

delete x.c;

  • si existe x.c, la elimina; si no existe, no hace nada

"c" in x; // para comprobar si c existe en x

  • si x.c existe, devuelve true, sino devuelve, false

Objetos anidados: árboles

var pelicula = {
titulo: 'Avatar', director:{
nombre:'James',
apellido: 'Cameron'
}
};
Evaluación de expresiones
Expresión - Valor
pelicula.director.nombre=>'James'
pelicula['director']['nombre']=>'James'
pelicula['director'].apellido=>'Cameron'
pelicula.estreno=>undefined
pelicula.estreno.año=>Error_de_ejecución

Los objetos pueden anidarse entre si. Los objetos anidados representan árboles

La notación punto o array puede encadenarse representando un camino en el árbol

Las siguientes expresiones se evaluan así:

Usar propiedades dinámicas

// Dado un objeto pel definido con
var pel = {
titulo: 'Avatar',
director:’James Cameron'
};
// se puede añadir pel.estreno con
pel.estreno = {
año: '2009',
cine: 'Tivoli'
}
// La expresión
pel.estreno && pel.estreno.año
// devuelve pel.estreno o undefined,
// evitando ErrorDeEjecución, si
// pel.estreno no se hubiese creado

Las propiedades dinámicas de JavaScript son muy útiles si se utilizan bien

Un objeto solo debe definir las propiedades que contengan información conocida añadirá mas solo si son necesarias

La información se puede consultar con prop1 && prop1.prop2 para evitar errores de ejecución si las propiedades no existen

Referencias a objetos

var x = {}; // x e y tienen la
var y = x; // misma referencia
var z = {}; // la referencia a z 
          // es diferente de
          // la de x e y
x.t = 1;

x.t => 1 // x accede al mismo
y.t => 1 // objeto que y
z.t => undefined

Las variables que contienen objetos solo contienen la referencia al objeto

El objeto esta en otro lugar en memoria indicado por la referencia

Esto produce efectos laterales como ilustra el ejemplo

Identidad de objetos

var x = {}; // x e y tienen la
var y = x; // misma referencia
var z = {}; // la referencia a z 
          // es diferente de
          // la de x e y
x === y => true
x === {} => false
x === z => false

Las referencias a objetos afectan a la identidad porque identidad de objetos es identidad de referencias

Los objetos no se comparan, se comparan solo las referencias; es poco util si no se redefine

Igualdad (debil) de objetos == y != no tiene utilidad tampoco con objetos, no se debe utilizar

Objeto window o this

El entorno de ejecución de JavaScript es el objeto global window

window se referencia también como this en el entorno global

Documentación: https://developer.mozilla.org/en-US/docs/Web/API/Window

Variables globales y el entorno de ejecución

Un programa JavaScript se ejecuta con el objeto window como entorno una asignación a una variable no definida como x = 1;.

Crea una nueva propiedad de window de nombre x, porque

  • x = 1; es equivalente a this.x = 1; y a window.x = 1;

Olvidar definir una variable, es un error muy habitual, y al asignar un valor a la variable no definida, JavaScript no da error, sino que crea una nueva propiedad de window. Es un error de diseño de JavaScript y hay que tratar de evitarlo

Tema 3: DOM Document Object Model (vídeo) Transparencia 19

DOM: Document Object Model

Objeto DOM: objeto JS asociado al documento HTML visualizado en el navegador. El navegador lo almacena en la propiedad document de window que contiene el árbol de objetos DOM de la página HTML

Doc: https://developer.mozilla.org/en/docs/Web/API/Document

Los objetos DOM pueden buscarse por atributos ("id", "class", ..) de HTML. Por ej., el método document.getElementById("idx") devuelve el objeto DOM asociado al elemento de la página HTML con identificador "idx"

window tiene además propiedades con el nombre de los identificadores

¡OJO! peligro: nombre puede coincidir con el de otra propiedad de window

Acceso a DOM

SCRIPT del ejemplo:
var $fecha = document.getElementById("fecha");
$fecha.innerHTML = new Date();

Ejemplo transparencia 21

Fecha actual: Fecha actual: <= span con id="fecha"

Varios scripts

Una página con varios scripts es un único programa, los scripts se juntan siguiendo el orden de aparición en la página

Lo ideal es crear un script en el head con todas las funciones, las cuales se podrán invocar en sripts diferentes a lo largo del body del documento html

Dentro del body, se invoca a las funciones con otros scripts

mostrar_fecha(); //invoca a la función

Dentro del head, un script con las funciones

....
function mostrar_fecha(){
var $fecha = document.getElementById("fecha");
$fecha.innerHTML = 'desde función => ' + new Date();
}
....

Resultado de invocar a la función mostrar_fecha():

Location, history, screen, ...

  • location: propiedad que contiene el URL a la página en curso
    • location = "http://www.upm.es" // Carga la página en el navegador
    • location.reload() // re-carga la página en curso
    • propiedades: href (url), protocol, hostname, port, pathname, search (query), ...
  • history: propiedad con la historia de navegación. Métodos para navegar por la historia: history.back(), history.forward(), ...
  • screen: dimensiones de la pantalla: width, height, availWidth, availHeight: para adaptar apps a pantallas móviles
  • Documentacion: https://developer.mozilla.org/en-US/docs/Web/API/Window

script

document.getElementById("loc").innerHTML = location.href;
var $pantalla = document.getElementById("pan");
$pantalla.innerHTML = screen.width + " X " + screen.height;
window.screen (ejemplo)
  • span con id="loc":
  • span con id="pan":

Funciones de selección de elementos

Documentación: https://developer.mozilla.org/en/docs/Web/API/Document

*** Recordar la excelente herramienta que supone la consola web de Firefox para trabajar con estas herramientas ***

Tema 4: Sentencia for/in de JavaScript (vídeo) Transparencia 28

Sentencia for/in

for (i in x) {..bloque de instrucciones..} itera en todas las propiedades del objeto x. Dentro de la sentencia for debe utilizarse la notación array

El nombre de propiedad y su contenido se referencian con "i" y "x[i]"

Lo que muestra el script en pantalla:

Ejemplo:

var x = {a:7, b:'hi', c:'adios'};
var i;
for (i in x){
document.writeln("Propiedad " + i + " = " + x[i] + "\n");
}

Sintaxis de la sentencia for / in

Ejemplo con window.screen

Este script agrega filas a una tabla, ver con la Consola de Firefox

Resultado del script
PropiedadValor

En el ejemplo, tWin es el identificador id de la tabla de la derecha.

Importante el operador " += " (SIN ESPACIOS) de la sentencia dentro del for/in, es un operador que va agragando contenido al innerHTML.

var i, tabla = document.getElementById("tWin");
for (i in screen)
tabla.innerHTML += "<tr><td>" + i + "</td><td> = " + screen[i] + "</td></tr>";

En cada iteración, el script va agregando una fila a la tabla con todas las propiedades de screen, la cantidad y el orden de filas que se mostrarán en la tabla depende del navegador en el que se ejecuta el script; en Google Chrome muestra muestra menos filas que en Mozilla Firefox.

Ejercicio opcional Módulo 6 Tema 4 Construir una página HTML con un script...

Construir una página HTML con un script que primero defina el siguiente objeto.

var y = {x:'hola', y:'que', z:'tal', t: 'estás'}

A continuación debe concatenar los strings que contienen sus propiedades en un único string, con los valores separados por un espacio en blanco, utilizando el bucle for/in.

Por último, debe mostrar el string concatenado en la página HTML con la función document.write(....)

Tema 5: Eventos Javascript (vídeo) Transparencia 33

Eventos y Manejadores

JavaScript utiliza eventos para interaccionar con el entorno, hay eventos de muchos tipos: temporizadores, clicks en boton, tocar en pantalla, pulsar tecla, ...

Manejador (callback) de evento función que se ejecuta al ocurrir el evento. El script inicial debe configurar los manejadores (callbacks) a ejecutar cuando ocurra cada evento que deba ser atendido

Eventos periódicos con setInterval(....)

JavaScript tiene una función setInterval (..) para programar eventos periódicos

function mostrar_fecha(){
var cl = document.getElementById("reloj");
cl.innerHTML = new Date();
}
......
mostrar_fecha();
setInterval(mostrar_fecha, 1000);
  • setInterval (manejador, periodo_en_milisegundos) tiene dos parámetros:
    • manejador: función que se ejecuta al ocurrir el evento
    • periodo_en_milisegundos: tiempo entre eventos periódicos

El reloj del código de la derecha se muestra dentro de un span con id="reloj" como se ve a continuación:

Eventos DOM

Los eventos DOM se asocian a elementos HTML como atributos 'onclick', 'ondblclick', 'onload', .... donde el manejador es el valor asignado al atributo

Ejemplo: haz clic en la imagen de la derecha =>

<img src="img1.png" onclick="this.src='img2.png'" >

Código del manejador: "this.src='img2.png'" (valor del atributo), this referencia el objeto DOM asociado al manejador

Tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes

Eventos en HTML

Definimos 2 manejadores de evento en elem. img: =>

this.src referencia atributo src de img, this referencia objeto DOM asociado: img

<img src="img1.png"
ondblclick="this.src='img2.png'"
onclick="this.src='img3.png'" >

Eventos definidos directamente en Javascript

Los manejadores de eventos se pueden definir con

También se pueden definir como propiedades

Ejemplos

  • img.addEventListener("onclick", function() {... código ...})
  • img.onclick=function() {... código...}

Evento como propiedad (transparencia 40)

Los manejadores de evento se definen ahora en un script separado, El objeto img se identifica desde JavaScript con getElementById(..), y el manejador se añade con método: object.addEventListener(event, manejador)

Actualmente se recomienda usar siempre addEventListener(….)

script: para un objeto img con id="img1"

var i = document.getElementById("img1");
i.addEventListener('dblclick', function(){i.src="img1.png"});
i.addEventListener('click', function(){i.src="img2.png"});

Los manejadores de evento se definen también así en un script separado

El objeto img se identifica desde JavaScript con getElementById(..)

Sintaxis de los manejadores: object.event= manejador

script: para un objeto img con id="img2"

var j = document.getElementById("img2");
j.ondblclick = function(){j.src="img1.png"};
j.onclick = function(){j.src="img2.png"};

Evento onload

El script pasa a la cabecera dentro de una función, se separa del documento HTML. El código se mete en la función inicializar(), que se ejecutra al ocurrir onload (como atributo dentro de la etiqueta body). onload ocurre con la página HTML ya cargada y el objeto DOM construido.

<!DOCTYPE html>
<html>
<head>
<title>Evento onload</title><meta charset="UTF-8">
<script type="text/javascript">
function inicializar(){
var z = document.getElementById("img9");
z.ondblclick = function(){z.src='img2.png'};
z.onclick = function(){z.src='img3.png'};
}
</script>
</head>
<body onload="inicializar()">
<h4>Evento onload</h4>
<img src="img1.png" id="img9">
</body>
</html>

Ver ejemplo de código: (transparencia 42)

Ejercicio opcional Módulo 6 Tema 5. Modificar el reloj del ejemplo anterior para que presente:

Se recomienda variar el intervalo del evento a 1 ms.

Tema 6: Botones y formularios en JavaScript (vídeo) Transparencia 43

Entradas y botones

Ejemplo Pregunta

html:

<h5>Pregunta:</h5>
<p>¿Quíen descubrió América?</p>
<input tipe="text" id="respuesta" value="Responda aquí" />
<button type="button" onclick="res()">Consultar</button>
<p id="resultado"></p>

script:

<script type="text/javascript">
function res(){
var respuesta = document.getElementById('respuesta');
var resultado = document.getElementById('resultado');

if (respuesta.value === "Cristóbal Colón") resultado.innerHTML = "Correcto";
else resultado.innerHTML = "No es correcto";
}
</script>
Pregunta: ("Cristobal Colón")

¿Quíen descubrió América?

Ejercicio opcional Módulo 6 Tema 6 Modificar el ejemplo anterior de forma que si la respuesta es incorrecta:

Además de indicar "No es correcto", inicialice el cajetin con el texto "pruebe otra vez".

Ejercicio Obligatorio Módulo 6 Tema 6 Ejercicio opcional Módulo 6 Tema 6 (Tabla propiedades)

Construir una página HTML que liste el contenido de todas las propiedades de un objeto en forma de tabla.

El nombre o referencia al objeto se pedirá al usuario utilizando la función prompt, para que lo introduzca a través del cajetín del desplegable generado. Debera aceptar nombres de propiedades de window tales como screen, this.location, document, .. o incluso window. Si el nombre que se introduce por el cajetín referencia algo que no es un objeto, solo se dará un mensaje indicándolo y no habra que listar ninguna tabla.

La tabla HTML tendrá 2 columnas:

  1. La 1a columna contendrá los nombres de las propiedades de objeto
  2. La 2a columna contendrá el valor de la propiedad, siempre que no sea un objeto o función (comprobarlo con el operador "typeof"). Si es un objeto o función se pondrá como valor el string: "no es imprimible".

Incluir un formato CSS bien diseñado para la visualización de la tabla. Pueden inspirarse en el mostrado en el tema HTML/CSS Marcas básicas del Módulo 1.

Se recomienda utilizar un script que utilice la sentencia "for/in" para extraer las propiedades e insertarlas en la página HTML con formato de tabla. Utilizar dentro del bucle una sentencia "if/else" que comprube con el operador "typeof" si el valor de la propiedad es un string es imprimible o no, para imprimir dicho valor o "no es imprimible".

Alojar el script como un recurso público en un servidor en la nube para que pueda accederse por cualquier usuario desde cualquier navegador.

Modulo 7. Interacción con el usuario, eventos y sus manejadores, formularios, JQuery, Zepto, Arrays y bucles

Tema 0: Transparencias y ejemplos del módulo y ejemplos del módulo (en ViSH) (y también en Gogle Drive)

Tema 1: Librerías JavaScript jQuery y Zepto (vídeo)

Librerias Javascript

Las librerias JavaScript actuales son multi-navegador. Funcionan en IE, Firefox, Safari, Chrome, Opera, ... Ahorran mucho tiempo, por lo que es reconmendable 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 solo 9,7Kbytes (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)

Fecha y hora con jQuery/Zepto

Libreria: script externo identificado por un URL que hay que cargar, normalmente en la cabecera head con:

  • $("#fecha") devuelve el objeto jQuery/Zepto del elemento con id="clock"
  • $("#fecha").html(new Date()) inserta new Date() en objeto jQuery devuelto por $("#fecha")

Fecha y hora con Zepto:

<script type="text/javascript" src="./Mod07/zepto.min.js" > </script>
 <p><b>Fecha y hora con Zepto:</b><br>
 <span id="fecha71"></span></p>
<script type="text/javascript">
 $('#fecha71').html(new Date());
</script>

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 .. });

Es algo parecedio a cuando haciamos <body onload="funcion()"> y definir así las funciones en el head, estas se ejecutarán cuando termine de cargar la página:

<head>
 <script type="text/javascript" src="./Mod07/zepto.min.js" > </script>
 <script type="text/javascript">
  $(function(){ $('#fecha71').html(new Date()); });
 </script>
</head>
</body>
 <p><b>Fecha y hora (ready):</b><br>
 <span id="fecha71"></span></p>
<body>

Cache y CDN (Content Distribution Network)

Cache (de nuestro navegador o dispositivo): contiene recursos accedidos anteriormente para acceso rápido, las caches identifican recursos por igualdad de URLs

CDN: utilizar URL común a Google, Microsoft, jQuery, Zepto, ... y maximizar así la probabilidad de que esos recursos estén ya en la cache (lo podían haber dicho antes)

Viene a decir que en lugar de cargar las librerías desde el servidor de nuestro sitio web, mejor cargarlas desde el servidor de la propia librería, y que incluso se puede ganar velocidad...

La librería zepto.min.js se puede cargar desde http://zeptojs.com/zepto.min.js

<head>
 <script type="text/javascript" src="http://zeptojs.com/zepto.min.js" > </script>
 <script type="text/javascript">
  $(function(){ $('#fecha71').html(new Date()); });
 </script>
</head>
</body>
 <p><b>Fecha y hora (ready):</b><br>
 <span id="fecha71"></span></p>
<body>

Fecha y hora (ready):

Selectores tipo CSS de jQuery/Zepto (transparencia 7 del módulo 7)

Observar esta tabla...

SELECTORES DE MARCAS CON ATRIBUTO ID
$("h1#d83")/* devuelve objecto con marca h1 e id="d83" */
$("#d83")/* devuelve objecto con con id="d83" */
SELECTORES DE MARCAS CON ATRIBUTO CLASS
$("h1.princ")/* devuelve array de objectos con marcas h1 y class="princ" */
$(".princ")/* devuelve array de objectos 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: Metodos 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

Cuatro Modos de invocar Zepto (o jQuery)

  1. String con selector CSS: $("<selector CSS>") Devuelve un array de objetos jQuery que casan con "<selector CSS>"
  2. "String HTML": $("<ul><li>Uno</li><li>Dos</li></ul>") Devuelve objeto jQuery equivalente a string interpretado como html
  3. "Objeto DOM": $(document) Transforma objeto DOM en objeto jQuery equivalente
  4. "Función ready": $(function(){..})) Ejecuta la función cuando el árbol DOM está construido

Tema 2: Eventos con jQuery y Zepto (transparencia 10)

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

script: con un clic se muestra el sol, y con dos click la luna

$(function(){
 var i = $('#img72');

 i.on('dblclick', function(){i.attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Luneta05.svg/120px-Luneta05.svg.png')});
 i.on('click', function(){i.attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Sol11.svg/120px-Sol11.svg.png')});
});

Pregunta Zepto

Pregunta jQuery:

¿Quién descubrió América? (Cristobal Colón)

script JQuery del ejemplo "Cristobal Colón"
<script type="text/javascript">
 $(function(){
  $("#boton72").on('click', function(){
   if ($('#respuesta72').val() === "Cristobal Colón")
    $('#resultado72').html("Correcto");
   else
    $('#resultado72').html("No es correcto");
  });
 });
</script>

Tema 3: La Clase Array de JavaScript (transparencia 13)

Arrays

  • Array: lista ordenada de elementos heterogéneos accesibles a través de un índice de 0 a length-1
  • Tamaño máximo: 232-2 elementos
  • Elementos
    • a[0] es el primer elemento
    • .....
    • a[a.length-1] último elemento
Arrays
var a = [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
por ejemplo con índices mayores que length

elementos de un Array
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 (de 0 a 3).
Tamaño del array
var a = [1, 3, 1];
a;=>[1, 3, 1]
a[4] = 2;
a;=>[1, 3, 1, , 2]
el array se reduce
a.length = 2=>2
a;=>[1, 3]

Métodos de Array

Array hereda 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
Métodos de 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>): devuelve string uniendo elementos, introduce <separador> entre elementos
  • slice(i,j): devuelve una rodaja. Indice negativo (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 array por e1, e2, ..,en
    y devuelve los elementos eliminados.
    splice(i, 1) elimina el elemento i del array
Más métodos
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]

Tema 4: Bucles: sentencias while, for y do/while (vídeo) (trasparencia 19)

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 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

veces(..): bucle while
<script type="text/javascript">
 function veces(letra, frase){
  var i = 0, n = 0;
  while (i < frase.length){
   if (letra === frase[i])
    ++n;
   ++i;
  }
  return n;
 };

 var l = 'a', f = 'la casa roja';
 $('#while73').html('La frase "' + f + '" tiene '
+ veces(l,f) + ' veces la letra "' + l + '"');
</script>
Función "veces" con "while"

veces(..): bucle for

La sentencia comienza conr for y 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 bloque: ++i, ...
<script type="text/javascript">
 function veces(letra, frase){
  var i, n;
  for (i=0, n=0; i < frase.length; ++i){
   if (letra === frase[i])
    ++n;
  }
  return n;
 };

 var l = 'a', f = 'la casa amarilla';
 $('#for73').html('La frase "' + f + '" tiene '
+ veces(l,f) + ' veces la letra "' + l + '"');
</script>
Función "veces" con "for"

veces(..): bucle do/while
<script type="text/javascript">
 function veces(letra, frase){
  var i = 0, n = 0;
  do {
   if (letra === frase[i])
    ++n;
   ++i;
  } while(i < frase.length)
  return n;
 };

 var l = 'e', f = 'el pato verde';
 $('#do73').html('La frase "' + f + '" tiene '
+ veces(l,f) + ' veces la letra "' + l + '"'); </script>
Función "veces" con "do/while"

Ejercicio opcional Módulo 7, Tema 4 Script que utilice bucle while for y la función prompt()...

Publicar un script en una página HTML, que utilice un bucle y la función prompt() para solicitar de forma cíclica en el cajetín del desplegable un número para sumarlo a los anteriores o el string "acabar" para finalizar el bucle.

Cada vez que introduzcamos un número debe sumarlo a los anteriores y presentar el resultado de la suma en el desplegable siguiente, además de pedirnos un nuevo número o que finalicemos el proceso con "acabar".

Utilizar nueva linea (\n) en el mensaje que se presenta con prompt() para presentar varias líneas encima del cajetín.

Cuando se introduzca un string que no sea, ni un número, ni "acabar", debe presentar además el mensaje: entrada errónea, vuelva a intentarlo.

Realizar 2 scripts, uno con un bucle while y otro con un bucle for. Controlar la condición del bucle con el valor que devuelve la función prompt().

Tema 5: Ejemplos con iFrames, Array y For (vídeo) (transparencia 25)

iFrame

Un iFrame es un marco de navegación independiente, un iFrame crea una caja de arena segura donde poder importar objetos externos

Ejemplo: al enlazar un juego en otro servidor, el iFrame evita que se introduzca malvare, pues el acceso JavaScript está limitado a caja de arena.

Ejemplo iFrame
<p>iFrame con acceso a
<a target="_blank"
href="http://fontaneriajuanjo.com/">
JontaneriaJuanjo.com</a></p>
<iFrame src="http://fontaneriajuanjo.com/"
width="600" height="400">
</iFrame>

iFrame con acceso a JontaneriaJuanjo.com

Seguridad Web: "Same Origin Policy"

La seguridad se controla en las aplicaciones JavaScript permitiendo que un programa JavaScript en un iframe solo acceda al arbol DOM de la página principal si proviene del mismo origen. Esto evita en el ejemplo anterior que la web 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" seguros de contenidos que no esten en nuestra cadena de confianza

Ejemplo con iFrames

Flexbox (transparencia 29-30)

Flexbox permite un diseño responsivo fácil y flexible. Coloca cada iframe a la derecha del anterior. Al llegar al limite pasa a la línea siguiente.

Código

// Estilo CSS trasnparencia 29-30

iframe {
 padding: 10px;
 border: 5px solid pink;
 background-color: white;
 width: 200px;
 height: 350px;
}
#iframes {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
}
#marco {
 background-color: pink;
 padding: 10px;
 margin: 10px;
 border: 3px solid black;
}

<script type="text/javascript" src="zepto.min.js">
</script>
<script type="text/javascript">
$(function(){
 var urls = ["http://getbootstrap.com",
             "http://vishup.org"];

  function mostrar(urls){
  var i, iframes="";
  for(i=0; i<urls.length; ++i){
   iframes += "<iframe src='" + urls[i] + "'></iframe>";
  }
  $('#iframes').html(iframes);
 };

 $("#boton75").on('click', function(){
  urls.push($('#nuevo').val());
  mostrar(urls);
 });
 mostrar(urls);
});
</script>

<body>
 <h5>Ejemplos de un diseño responsivo</h5>

 <input type="text" id="nuevo" placeholder="Nuevo URL" />
 <button type="button" id="boton75"> Añadir URL </button>

 <div id="marco"><div id="iframes"></div></div>
</body>

Módulo 7 Tema 5, ejercicio opcional final Modificar el ejemplo de este tema...

Modificar el ejemplo de este tema para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.

Modulo 8. Ejemplo de un cronómetro. Eventos táctiles, localstorage y JSON, así como su utilización en aplicaciones Web.

Tema 0: Transparencias y ejemplos del módulo y ejemplos del módulo (en ViSH) (y también en Gogle Drive)

Tema 1: Ejemplo de un cronómetro (vídeo)

Cronómetro

Hay que hacer un WebApp similar a un cronómetro digital:

<script type="text/javascript">
 $(function(){
  var t, cl = $("#crono");

  function mostrar() { cl.html((+cl.html() + 0.1).toFixed(1)); };
  function arrancar() { t=setInterval(mostrar, 100);};
  function parar() { clearInterval(t); t=undefined; };
  function cambiar() { if (!t) arrancar(); else parar(); };

  $("#cambiar").on('click', cambiar);
  $("#inicializar").on('click', function(){ cl.html("0.0"); });
 });
</script>
 <h2>Cronómetro</h2>
 <h2><span id="crono"> 0.0 </span> segundos </h2>
 <button type="button" id="cambiar"> arrancar/parar </button>
 <button type="button" id="inicializar"> inicializar </button>

Cronómetro

0.0 segundos

DOM como almacén de datos

El navegador guarda en document la página HTML que está mostrando, document es un objeto JavaScript con propiedades que contienen todos los elementos de la página

Las propiedades DOM son variables: src, value, innerHTML, .... donde la información se puede guardar y recuperar. DOM solo contiene strings y todo debe convertirse a/de string

Los elementos de DOM se pueden utilizar como variables, hemos utilizado el elemento <span id="crono"> para almacenar el contador de decimas de segundo

Tema 2: Eventos táctiles en JavaScript (vídeo) transparencia 5

Eventos táctiles

iPhone (2007): dispara el uso de pantallas tactiles. Empiezan a incluirse eventos “touch” en navegadores (JavaScript)

W3C está normalizando eventos tactiles básicos o toques touchstart, touchmove, touchend
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events

Los tipos de toque en pantalla se denoniman gestos o gestures, se estan generando librerias de eventos, que incluyen, por ejemplo: toque (tap), desplazamiento (swipe), pellizco (pinch), ..

Gestos (gestures) transparencia 7

Eventos básicos para pantalla táctil (W3C)

Eventos tactiles básicos devuelven un array de toques (TouchList), cada elemento de TouchList lleva las coordenadas y otros datos del toque. Un elemento por cada dedo que toque, generando 3 eventos:

El ejemplo siguiente modifica los controladores de eventos, clic sencillo y doble de raton por los eventos swipe-right y swipe-left. Los gestos swipe-right y swipe-left se detectan midiendo la diferencia de la coordenada X entre touchstart y touchmove

Evento Touch
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="zepto.min.js" >
</script>
<script type="text/javascript">
 $(function(){
  var i =$('#i1');
  var xIni, yIni;

  i.on('touchstart', function(e){
   xIni = e.targetTouches[0].pageX;
   yIni = e.targetTouches[0].pageY;
  });


  i.on('touchmove', function(e){
   if (e.targetTouches[0].pageX > xIni+10) i.attr('src', 'scare.png');
   if (e.targetTouches[0].pageX < xIni-10) i.attr('src', 'wait.png');
  });
 });
</script>
</head>
<body>
 <h4>Evento Touch</h4>
 <img src="wait.png" width="300" heigth="300" id="i1"/>
</body>

Eventos tactiles y Zepto (transparencia 10)

El único evento reutilizable en pantallas tactiles es: click. Suele estar enlazado al evento tap y funciona con pantallas tactiles

Zepto incluye 2 librerias de gestos tactiles

Los S.O. de los dispositivos tactiles como iOS o Android llevan eventos predefinidos asociados a gestos, por ejemplo, iOS (Apple) predefine double_tab (ampliar) y pinch (ampliar). La configuración por defecto se quita incluyendo en el manejador evento.preventDefault()

La libreria touch.js de Zepto detecta y dispara eventos tactiles automaticamente. Si cargamos la librería podemos definir directamente manejadores de swipeRight y swipeLeft sobre el icono

Eventos touch.js
Evento Touch

Realmente no entiendo que tiene que hacer esto...

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="zepto.min.js" ></script>
<script type="text/javascript" src="touch.js" ></script>
<script type="text/javascript">
 $(function(){
  var ii = $('#i2');

  ii.on('swipeRight', function(){ ii.attr('src', 'scare.png'); });

  ii.on('swipeLeft', function() { ii.attr('src', 'wait.png'); });

 });
</script>
</head>
<body>
 <h4>Evento Touch</h4>

  <img src="wait.png" width="300" heigth="300" id="i2"/>
 </body>
 </html>

Ejercicio Módulo 8 Tema 2: Ejercicio P2P opcional Modificar el ejemplo del cronómetro, quitando los 2 botones: arrancar/parar e inicializar. Añadir en su lugar los siguiente eventos tactiles sobre el body del cronómetro

Tema 3: Memoria local en HTML5 (vídeo) transparencia 12

Almacenamiento de datos en cliente

HTML5 implementa nuevos tipos de almacenamiento de variables sencillas y eficientes de utilizar desde Javascript.
Definición: http://dev.w3.org/html5/webstorage/

Variables locales y de sesión

Son propiedades de los objetos localStorage y sessionStorage solo pueden contener strings, como por ejemplo

Las variables locales están asociadas a protocolo, dominio y puerto, un programa solo puede acceder a propiedades de local/sessionStorage creadas por otros programas cargados del mismo servidor

Same origin policy

Ejemplo de localStorage

Cada usuario que acceda a esta página tendrá una cuenta diferente, la variable está en su navegador

Ejemplo de localStorage

Ha visitado esta página veces!

<!DOCTYPE html> <html><head><meta charset="UTF-8">
 <script type="text/javascript" src="zepto.min.js"></script>
 <script type="text/javascript">
  $(function() {
   // si variable no existe se crea (primera visita)
   localStorage.cuenta = (localStorage.cuenta || 0);
   localStorage.cuenta++; // incrementamos cuenta de visitas
   $('#cuenta').html(localStorage.cuenta);
  });
 </script>
</head><body>
 <h3>Ejemplo de localStorage</h3>
 <p>Ha visitado esta página <span id='cuenta'></span> veces!</p>
</body>
</html>

Cronómetro con memoria

Nueva versión del cronómetro con localStorage, así mantiene la cuenta de décimas de segundos entre usos sucesivos de la aplicación

El cronómetro utiliza ahora la variable localStorage.c para guardar la cuenta de segundos

Debemos inicializar localStorage.c con parámetro por defecto para cuando se ejecute por primera vez. Como la información se guarda ahora en localStorage y no en DOM, hay que actualizar primero localStorage y luego mostrar en DOM

Cronómetro: localStorage
Cronómetro

0.0 segundos

<script type="text/javascript">
 $(function(){
  localStorage.c = (localStorage.c || "0.0");

  var t2, c2 = $("#crono2");

  function incr() { localStorage.c = +localStorage.c + 0.1; }
  function mostrar() { c2.html((+localStorage.c).toFixed(1)); };
  function arrancar() { t2=setInterval(function(){incr(); mostrar()}, 100);};
  function parar() { clearInterval(t2); t2=undefined; };
  function cambiar2() { if (!t2) arrancar(); else parar(); };

  $("#cambiar2").on('click', cambiar2);
  $("#inicializar2").on('click', function(){ localStorage.c="0.0"; mostrar();});
  mostrar();
 });
</script>
<h2>Cronómetro</h2>

<h3><span id="crono2"> 0.0 </span> segundos </h3>

<button type="button" id="cambiar2"> arrancar/parar </button>
<button type="button" id="inicializar2"> inicializar </button>

Tema 3: Memoria local en HTML5 (vídeo) transparencia 18

JSON

JSON: formato textual de representación de tipos y objetos JavaScript http://json.org/json-es.html

Un objeto JavaScript se transforma a un string JSON con JSON.stringify(object)

Un string JSON se transforma en el objeto original con JSON.parse(string_JSON)

var x = {a:1, b:{y:[false, null, ""]}}, y, z;

y = JSON.stringify(x); => '{"a":1, "b":{"y":[false, null, ""]}}'

z = JSON.parse(y); => {a:1, b:{y:[false, null, ""]}}

Serialización de datos

Serialización: transformación reversible de un tipo u objeto (en memoria) en un string equivalente

La serialización es un formato de intercambio de datos

En JavaScript se realiza desde ECMAScript 5 con JSON.stringify(...) y JSON.parse(...)

Otros formatos de serialización: XML, HTML, XDR(C), ... Estos formatos están siendo desplazados por JSON, incluso XML. Hay bibliotecas de JSON para los lenguajes más importantes

Características de JSON

JSON puede serializar

Admite filtros para los elementos no soportados, ver doc de APIs JavaScript

JSON.stringify(new Date()) => '"2013-08-08T17:13:10.751Z"'

JSON.stringify(NaN) => 'null'

JSON.stringify(Infinity) => 'null'

JSON en ejemplo con iframes, array y for

Si queremos almacenar en el navegador el array de urls para que no se pierdan los urls introducidos, hay que guardarlo serializado con JSON en localStorage

Ver el ejemplo en Google drive y el código en la transparencia 22 del módulo 8

Tema 5 Herramientas autónomas de Firefox (vídeo) --

Ejercicio P2P obligatorio: Módulo 8 Tema 5 cronómetro con memoria en lista debajo de los botones

Explicación de la tarea

Añadir al cronómetro con memoria una lista debajo de los botones, que muestre los instantes en que el cronómetro ha parado de contar. La lista deberá vaciarse con el botón de inicializar del cronómetro. La lista deberá guardarse además en una variable de localStorage, para que los valores se guarden entre invocaciones sucesivas.

Sugerencia: añadir un bloque <div> vacio debajo de los botones donde se guarden los instantes de parada como líneas HTML separadas por <br>. En cada parada se añadirá una nueva línea.

Modificar además lo siguiente: