Trabajo Obligatorio

Programación Web - Apuntes y ejercicios

Variables

Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor.

  • Variables numericas: estas variables las usaremos para almacenar valores numéricos enteros (integer) o decimales (float).
  • Variables de texto: estas variables las usaremos para almacenar caracteres y palarbas.
  • Variables booleanas:Las variables booleanas se denominan también variables de tipo lógico. Almacenan un valor que únicamente varía entre true y false.
  • Variables arrays:Es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente, ordenados y a los cuales accedemos a través de su identificador y un índice de posición.
  • Variables nula:JavaScript dispone de un valor especial, null, que nos indica que la variable no tiene valor. Así, si una variable es null es que está vacía.

Conversión de datos

Los distintos tipos de variables tienen posibilidad de conversión a otro tipo.

  • parseInt(string, base): convierte el texto y devuelve un entero en base al parámetro
  • parseFloat(string): convierte el texto en un número decimal
  • toString(): convierte un número a una cadena de texto

Operadores

Los operadores nos permiten manipular el valor de las variables

Operadores de asignación: el operador le da un valor a la variable

  • = da valor a una variable
  • ++ incrementa el valor de la variable (antes o después de la operación según si está delante o detrás respectivamente)
  • -- decrementa el valor de la variable (antes o después de la operación según si está delante o detrás respectivamente)

Operadores matemáticos: permite realizar operaciones de

  • + suma
  • - resta
  • * multiplicación
  • / división
  • % módulo

Operadores lógicos: permite realizar operaciones lógicas

  • && AND lógico
  • || OR lógico
  • !valor NOT lógico

Operadores relacionales: devuelve la relación entre variables

  • <, > menor, mayor que
  • ==, != igual, diferente que
  • >=,<= mayor o igual, menor o igual que

Control de flujo

Permite tomar decisiones del flujo de programa dependiendo del valor de las variables.

Estructuras de control:

  • If...else: se decide el paso del programa en función del valor de una o varias variables
  • Switch: se escoje un camino entre varios dependiendo del valor de una variable
  • Do...While: realiza un procedimiento repetidamente mientras se cumpla una condición
  • For realiza repetidamente un procedimiento un número determinado de veces
  • For...in: realiza unas acciones para cada elemento de un conjunto
  • Arrays: ejemplos de aplicaciones de los controles de flujo sobre los arrays

Cuadros de Diálogo

Muestra en una pantalla emergente información

  • alert(mensaje): se decide el paso del programa en función del valor de una o varias variables
  • prompt(mensaje, respuesta): se escoje un camino entre varios dependiendo del valor de una variable
  • confirm (mensaje): realiza un procedimiento repetidamente mientras se cumpla una condición

Funciones

Las funciones son procedimientos a los que se les puede pasar unos parámetros y devuelven un resultado

Declaración:


function nombre (argumento1, argumento2,...) {
  instrucciones
  ...
  [return valor];
}

Predefinidas en javascript:typeOf(), parseInt(objeto), parseFloat(objeto), toString(numero), escape(string), unescape(string), isNaN(arg.), eval(expr. matemática)

Funciones de texto:charAt(index), length, indexOf(string), substr(inicio,long), slice(inicio,fin), toLowerCase(), toUpperCase()

Objetos

En javascript disponemos de los objetos de navegador, predefinidos y de usuario

Objetos del navegador:

  • window representa la ventana del navegador
  • document es el que tiene el contenido de toda la página que se está visualizando
  • form formularios agrupados en un array dentro de document
  • frame igual que un window
  • location contiene información sobre la URL actual
  • history contiene la información de las URL que el usuario ha visitado desde esa ventana
  • navigator nos da información relativa al navegador que se esté utilizando para visualizar los documentos

Objetos predefinidos:

  • Array
  • Boolean
  • Date
  • Function
  • Math
  • Number
  • Object
  • String

Objetos predefinidos: se construyen como si fueran funciones

Intervalos

Funciones de control de tiempo

  • setInterval(expresión, tiempo): se ejecuta el procedimiento indefinidamente cada intervalo de tiempo marcado
  • setTimeout(expresión, tiempo): se ejecuta el procedimiento una sola vez cuando el tiempo transcurrido ha llegado al limite

Estructura de Nodos

Todos los elementos de una página html se consideran nodos, y entre ellos se pueden establecer distintas relaciones.

El primer nodo hace referencia al documento, y de ahí cuelgan los demás. Este nodo es document

  • parentNode: hace referencia al nodo inmediatamente superior en jerarquía
  • document.getElementById('myElement').parentNode

  • childNode: es una lista de nodos descendientes del nodo actual
  • document.getElementById('myElement').childNodes , o bién

    document.getElementById('myElement').childNodes(x), dónde x es un índice.

  • firstChild: devuelve directamente el primer nodo hijo
  • document.getElementById('myElement').firstChild

  • lastChild: devuelve el último nodo de la colección
  • document.getElementById('myElement').lastChild

  • nextSibling: referencia el nodo siguiente en el mismo nivel de jerarquía
  • document.getElementById('myElement').nectSibling

  • previousSibling: referencia el nodo anterior en el mismo nivel de jerarquía
  • document.getElementById('myElement').previousSibling

Formas de acceso a los nodos

Existen distintas formas de acceso a los nodos de la página html

  • getElementsByTagName: se obtiene la colección de nodos de un tipo de tag
  • document.getElementsByTagName('tipo de tag'), donde 'tipo de tag' puede ser cualquier tag, por ejemplo 'p', 'a', 'div', 'li', etc...

  • get ElementsByName: igual que el anterior, pero obtiene todos los nodos cuyo atributo 'name' sea el que se consigne:
  • document.getElementByName('nombre'), dónde 'nombre' es el valor del atributo 'name' del tag

  • getElementById: devuelve solo un elemento, el que coincide con el id:
  • document.getElementById('myElement')

Propiedades de los nodos

Se puede obtener información sobre algunas propiedades de los nodos

  • hasChildNodes: muestra si el nodo tiene hijos
  • document.getElementsById('id').[atributo].hasChildNodes()

  • nodeName: devuelve el atributo nombre:
  • document.getElementsById('id').[atributo].nodeName

  • tagName: devuelve el atributo nombre:
  • document.getElementsById('id').tagName

  • nodeType: devuelve el atributo nombre:
  • document.getElementsById('id').[atributo].nodeType. Puede devolver 1 (elemento), 2 (atributo) o 3 (texto)

  • nodeValue: devuelve el valor del nodo:
  • document.getElementsById('id').[atributo].nodeValue

Acceso a los atributos

Se accede a los atributos partiendo del acceso al nodo con la forma objeto.atributo

  • Atributos normales: accedemos primero al nodo y luego al atributo
  • document.getElementsById('id').atributo, donde atributo puede ser cualquier atributo, por ejemplo 'href', 'name', 'src', className, ...

  • Atributos css: igual que el anterior, pero enfocado al atributo 'style':
  • document.getElementsById('id').style.propiedad, dónde 'propiedad' es el valor de la propiedad css (sin guiones): ejemplo: fontWeight, leftMargin, background, textColor,...

Gestión de los atributos

  • getAttribute: obtiene la propiedad
  • document.getElementsById('id').getAttribute('atributo')

  • setAttribte: modifica el valor de la propiedad:
  • document.getElementsById('id').setAttribute('atributo')

  • removeAttribute: elimina el atributo:
  • document.getElementsById('id').removeAttribute('atributo')

Manipulación de Nodos

  • Crear Nodo: Se pueden crear nodos utilizando
  • document.getElementsById('id').createElement('tag name')

  • Crear Nodo de texto: Si es un texto dentro de un nodo, se puede usar
  • document.getElementsById('id').createTextNode('texto a insertar')

  • Clonar Nodo: clona el nodo, lo puede hacer con profundidad (true) o sólo las etiquetas (false):
  • document.getElementsById('id').cloneNode('true')

  • Eliminar Nodo: elimina el nodo
  • document.getElementsById('id').removeChild(nodo)

  • Reemplaza Nodo: cambia el nodo:
  • document.getElementsById('id').replaceChild(newNode, oldNode)

Eventos

Un evento es una función que se ejecuta al desencadenarse una acción.

  • Model básico , el único modelo compatible con todos los navegadores
  • Modelo standard , modelo más evolucionado, pero incompatible con el IE
  • Modelo IE , sólo compatible con IE

Manejador de eventos del modelo básico:

  • como atributo de un tag HTML , se usa un atributo como la palabra clave del evento, por ejemplo, onmouseout='this.style.bordercolor.black'
  • como función externa , el atributo llama a la función externa sin utilizar la palabra reservada 'this'
  • como manejador semántico , hay que definir una función, definir el evento y asignar la función

Eventos de documento: para IE es el window.event, para los otros es el primer parámetro de la función

var eve = evento || window.event

Eventos de teclado:

  • onKeyUp
  • onKeyDown
  • onKeyPress

Eventos de mouse: proporciona las coordenadas de la ventana, del navegador y de l apágina

  • evento.clientX / evento.clientY coordenadas del navegador
  • evento.screenX / evento.screenY coordenadas de la pantalla
  • evento.pageX / evento.pageY corrdenadas de la página incluyendo el scroll

Esquema de uso de los eventos:

  1. declaración del evento
    window.onload = function {
    objeto.event = funcionDesencadenada;
    }
  2. tratamiento del evento
    function funcionDesencadenada(ev) {
    var evento = ev || window.event;
    switch (evento.type) {
    case 'mouseclick': funcionfinal(arg1, arg2, ...); break;
    case 'mousedown':...
    case 'keypress':...
    ...
    }
    }
  3. función
    function funcionPrincipal(arg1, arg2, ...) {
    código de la función;
    }

Formularios: acceso

Acceso a los formularios mediante DOM o nombre del mismo

  • Por DOM:
  • document.getElementById('formulario').elemento

  • Por Nombre:
  • document.formulario.elemento

Formularios: propiedades

Los elementos de los formularios tienen sus propiedades:

  • type: tipo del elemento al que hacemos referencia. Puede devolver text, button, checkbox, select, textarea
  • name: nombre que tiene el formulario y por el cuál podemos hacer referencia
  • value: valor del campo o texto del botón

Formularios: eventos

  • onclick: click aplicable a button, submit e image
  • onchange: ocurre cuando se cambia un valor de un text, textarea, submit
  • onfocus: se dispara cuando el cursor toma el foco del elemento
  • onblur: ocurre cuando el cursor abandona el elemento

Formularios: valores de los elementos

Según sea el tipo del elemento, la obtención del valor se consigue de una forma

  • text y textarea: el valor se obtiene mediante la palabra value

    document.formulario.texto1.value

  • radiobutton y checkbox: se obtiene el valor con checked, dónde devolverá true o false

    document.formulario.checkbox1.checked

  • select: para la lista de selección tenemos
    • options: devuelve un array con todas las opciones

      var miLista = document.getElementById('elementolista');

    • selectedIndex: devuelve un número que es el índice del elemento seleccionado

      var valorSeleccionado = miLista.options[miLista.selectedIndex].value;

Formularios: Validación

Se utiliza el evento onsubmit para enviar el formulario al servidor, pero antes hay que validarlo. Para ello existen unas normas o técnicas que se pueden aplicar cuando convengan:

  • texto obligatorio: existen las siguientes técnicas que se pueden combinar para evitar enviar un texto sin información:
    • valor != null: se evita enviar un texto vacío
    • valor.lenght != 0: se evita enviar un texto con longitud 0
    • /^\s+$/.test(valor) esta expresión regular comprueba que el valor no sean espacios
  • valores numéricos: la función isNaN(valor) devuelve true cuando es un texto, false si no lo es
  • selección de lista: hay que obtener el índice y luego comprobar que no es nulo ni es cero (se reserva el cero para la instrucción de selección en la lista).
  • otras funciones para la comprobacion de emails correctos, entradas de dni, teléfonos, etc... se construyen a medida.

Relojes

Objeto Date: Existe el objeto Date para poder extraer la fecha actual

var fechahora = new Date();
fechahora.getHours();
fechahora.getMinutes();
fechahora.getSeconds();

Control del tiempo: Se puede controlar el tiempo mediante las funciones existentes :

  • setTimeout(miFuncion, miTiempo): ejecuta la función miFuncion una sola vez después de transcurridos los milisegundos marcados en miTiempo
  • setInterval(miFuncion, miTiempo): ejecuta la función miFuncion indefinidamente cada x milisegundos marcados en miTiempo

Otras funciones

Existen en internet numerosas librerías javascript que nos ahorran tiempo y ayudan a resolver problemas cuotidianos en programación. Acontinuación se muestran algunso ejemplos:

  • Calendarios
  • Tool-tips
  • Menús
  • Galería de imágenes

Clase Constructor

Un constructor es un método de las clases, el cual es llamado automáticamente cuando se crea un objeto de esa clase. Este concepto no existe en JavaScript, pero podremos emular su funcionamiento usando funciones.

En el siguiente ejemplo vamos a crear una función que llamaremos Factura, que usaremos para crear los objetos Factura:

function Factura(idFactura, idCliente) {
this.idFactura = idFactura;
this.idCliente = idCliente;
}

Uso de la función constructora para crear nuevo objeto:

var laFactura = new Factura (10,17);

Uso de la función para recuperar los datos:

var cliente = laFactura.idCliente; en este caso cliente será '10'.
var factura = laFactura.isFactura; en este caso factura será '17'.

Prototipo

Se definen las clases prototipo para un determinado objeto, que las incorpora para todo el programa. Por ejemplo, si a un objeto String le añadimos una función de concatenación de la palabra 'hola'.

String.prototype.hola = function() {
return 'hola ' + this.value;
}

Uso de la función prototipo:

var miCadena = 'Juan';
var miCadena2 = miCadena.hola;

El resultado será 'hola Juan'

Herencia y ámbito

En Javascript no existen las herencias ni los ámbitos, pero se pueden simular mediante funciones y prototypes

Se puede conseguir el concepto de herencia de propiedades mediante la copia de una clase origen a una destino

Object.extend = function (ClaseDestino, ClaseOrigen) {
for (var nombrePropiedad in ClaseOrigen) {
ClaseDestino[nombrePropiedad] = ClaseOrigen[nombrePropiedad];
}
return ClaseDestino;
}

Tratamiento de excepciones con Try-Catch

Para realizar el tratamiento de excepciones en JavaScript se usa un mecanismo compuesto por 3 bloques de palabras reservadas try, catch y finally.

  1. Bloque try: dentro de este bloque se introduce el código que se desea controlar
  2. Bloque catch: en este bloque habrá las instrucciones a realizar si se detecta una excepción
  3. Bloque finally: las instrucciones contenidas en él, se ejecutarán siempre, haya o no error previo. Es opcional.

try {
... // pieza de código a controlar
} catch (exception) {
... // instrucciones a ejecutar si hay error
} finally {
... // instrucciones a ejecutar sí o sí
}

Con JavaScript también podemos lanzar excepciones manualmente usando la palabra reservada throw:

throw new Error(‘La variable “a” no es un número’);

JSON

JSON (JavaScript Object Notation) es el formato sencillo para el intercambio de información. Este formato nos permitirá representar estructuras de datos (arrays) y objetos (arrays asociativos) en forma de texto.

Array: un array se representa como un conjunto de valores

var array = [valor1, valor2, valor3,..., valorN];

Objeto: el objeto es una representación mendiante claves y valores separados por comas y entre corchetes

var objeto = {clave1:valor1, clave2:valor2, ... , claveN:valorN};

En general, una notación objeto puede contener valores o arrays entre los valores que se le consignan, por ejemplo como la estructura siguiente:

var objeto = {
propiedad1: valor1,
propiedad2: valor2,
propiedad3: [array_valor1,array_valor2],
propiedad4: {propiedad_anidada: valor_anidado1},
metodo1: nombre_funcion_externa,
...
}

Ajax, conexión a servidor

El término AJAX es un acrónimo de Asynchronous JavaScript + XML, traducido como “JavaScript asíncrono + XML”. Las diferentes tecnologías que componen AJAX son:

  • XHTML y CSS, con la que crearemos una presentación basada en estándares.
  • DOM, para interactuar y manipular dinámicamente la presentación.
  • XML, XSLT y JSON, para intercambiar y manipular la información.
  • XMLHttpRequest, que sirve para el intercambio asíncrono de información.
  • JavaScript, que es la que une todas las demás tecnologías.

La programación de llamadas a servidor se organiza en los siguientes bloques:

  1. instancia del objeto XMLHttpRequest
    peticion_http = new XMLHttpRequest(); para todos los navegadores excepto IE
    peticion_http = new ActiveXObject(“Microsoft.XMLHTTP”); sólo IE

  2. preparación de la función de respuesta
    peticion_http.onreadystatechange = muestraContenido;

  3. petición al servidor
    peticion_http.open(‘GET’, ‘http://localhost:56124/HolaMundo.txt’, true);
    peticion_http.send(null);

  4. ejecución de la respuesta
    function muestraContenido() {
    if (peticion_http.readyState == 4) {
    if (peticion_http.status == 200) {
    alert(peticion_http.responseText);
    }
    }
    }

Introducción

jQuery es una forma de acceder a los objetos del DOM de una manera simplificada. Es una librería de JavaScript que se debe incluir en el proyecto. Bajada desde http://jquery.com/

El uso consta de

  1. Declaración en la página html de la librería jQuery actualizada:

    <script src='Scripts/jquery-1.8.2.min.js' type='text/javascript'>

  2. Declaración en la página html del archivo de funciones propio:

    <script src='Scripts/mis-funciones.js' type='text/javascript>

  3. Escritura de las funciones y accesos a jQuery en nuestro archivo de funciones:


    var x; x = $(document);
    x.ready(inicializarEventos);

    function inicializarEventos() {
      var x;
      x = $(“#boton1”);
      x.click(presionBoton)
    }

    function presionBoton() {
      alert(“Se presionó el botón”);
    }

Selección de nodos

Se pueden seleccionar los nodos de una forma similar a lo que hacemos con los objetos DOM:

  • El documento: es el elemento principal y se utiliza para determinar cuando la página se ha cargado completamente

    x = $(document);
    x.ready(funcion_a_ejecutar);

  • Selección por ID: la selección se realiza mediante el id que se le ha dado en el código html:

    x = $('#object_id');
    x.click(funcion_a_ejecutar);

  • Selección por tipo: la selección se realiza mediante el tipo del objeto:

    x = $('nombre_elemento');
    x.click(funcion_a_ejecutar);

  • Selección por clase: la selección se realiza mediante la clase del objeto:

    x = $('.mi_clase');
    x.click(funcion_a_ejecutar);

  • Selección por combinación: pueden usarse varias técnicas de selección de objetos, por ejemplo, los elementos de una lista:

    x = $('#mi_lista li');
    x.click(funcion_a_ejecutar);

Acceso a los estilos de los nodos

Se accede a los estilos CSS mediante la palabra clave 'css' y pasando como parámetros el nombre de la propiedad y el valor.

var t;
t = $(this);
t.css("color", "#ff0000");
t.css("background-color", "#FFFF00");

Se recupera el valor pasando solamente el nombre de la propiedad

var miColor = t.css("color");

Métodos habituales en jQuery

Se aplican los métodos o funciones con la fórmula siguiente: $(elemento).método(argumentos)

métododescripción
Texto: .text(); obtiene el valor actual del elemento
.text('valor'); establece un nuevo valor
Attributos: .attr('propiedad'); obtiene el valor actual de la propiedad del elemento
.attr('propiedad', 'valor'); establece un nuevo valor
.removeAttr('propiedad'); elimina la propiedad del objeto DOM
Clases: .addClass('nombre de la clase'); añade una clase al elemento
.removeClass('nombre de la clase'); elimina la clase del elemento
Html: .html(); recupera el contenido html del elemento
.html('texto html'); agrega un código html al elemento
Fade: .fadeIn(velocidad); incrementa la visibilidad del elemento a una velocidad 'fast' o 'slow'
.fadeOut(velocidad); atenúa la visibilidad
.fadeTo(velocidad, opacidad); inclluye nivel de opacidad que oscila entre 0 y 1
Visibilidad: .hide(velocidad); esconde el elemento a una velocidad 'fast' o 'slow'
.show(velocidad); muestra el elemento a una velocidad
.toggle(velocidad); cambia la visualización hide/show alternativamente

Manipulación de nodos

  • Añadir un nodo al final de la colección:

    var x = $('#miLista');
    x.append('<li> nuevo_item_de_lista<li>');

  • Añadir un nodo al inicio de la colección:

    var x = $('#miLista');
    x.prepend('<li> nuevo_item_de_lista<li>');

  • Eliminar toda la colección de nodos:

    var x = $('#miLista');
    x.empty();

  • Eliminar un nodo:

    var x = $('#miLista');
    var nodo = x.eq(n); n es el índice de nodo dentro de la colección
    nodo.remove();

  • each paseo por todos los nodos:

    var x = $('p');
    x.each(función);

Administración de los eventos

La ventaja de utilizar el jQuery en la administración de los eventos será su facilidad de uso y su integración con todos los navegadores, sin importarnos cuál es el que usemos.

La forma de uso es simple: $('objeto').evento(función a ejecutar); sin la palabra 'on' del evento visto en DOM.

eventodescripción
.click evento del click del control, una vez pulsado, realiza la función declarada:
x.click(funcion);
.mouseover el ratón pasa encima del objeto
.mouseout el ratón sale del objeto
.hover contempla la entrada y la salida del ratón de la zona del objeto. Hay que consignar las 2 funciones: x.hover(f_entrada,f_salida);
.focus el objeto toma el foco, por ejemplo en una casilla de entrada de datos
.blur el objeto pierde el foco
.mousemove el ratón se mueve en la zona del objeto
.mousedown el ratón detecta el click sobre el control
.mouseup se detecta la liberación
.dblclick doble click en el objeto

Inclusión de audio

La etiqueta <audio> permite incluir y ejecutar archivos de audio. Según el navegador se precisa un formato u otro. Los formatos pueden ser .wav, .ogg y .mp3.

navegadorMP3WAVOGG
Firefox-XX
ChromeXXX
IEXX-
Opera-XX
SafariXX-

Se pueden incluir los siguientes atributos:

  • type para determinar el tipo de archivo
  • src para determinar el archivo fuenteo
  • autoplay ejecución automática después de cargarse la páginao
  • loop el archivo de audio se ejecuta indefinidamenteo
  • controls si está presente muestra los controles visuales del reproductoro
  • autobuffer indica que debe cargarse el archivo antes de ejecutarloo
  • title texto del tooltip del controlo

Inclusión de video

La etiqueta <video> permite incluir y ejecutar archivos de video. Según el navegador se precisa un formato u otro. Los formatos pueden ser .mp4, .ogg y .webm.

navegadorMP4WebMOGG
Firefox-XX
ChromeXXX
IEXX-
Opera-XX
SafariX--

Se pueden incluir los siguientes atributos:

  • src para determinar el archivo fuenteo
  • autoplay ejecución automática después de cargarse la página
  • controls si está presente muestra los controles visuales del reproductoro
  • width ancho en pixeles
  • height alto en pixeles
  • poster contiene la imaagen que se muestra en el recuadro del video como portada

Dibujando con canvas

El elemento canvas permite dibujar y renderizar imágenes con el uso de instrucciones javascript

Se construye un método que nos devolverá el lienzo para poder dibujar,


function devolverLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas && canvas.getContext) {
    var lienzo = canvas.getContext("2d");
    return lienzo;
  } else {
    return false;
  }
}

Una vez tengamos el lienzo listo, ya podemos utilizarlo para dibujar llamando a la función. Por ejemplo, para dibujar una línea:


var lienzo = devolverLienzo('id del canvas');
lienzo.beginPath()
lienzo.moveTo(0, 0)
lienzo.lineTo(x1, y1)
lienzo.lineTo(x2, y2)
lienzo.lineTo(xn, yn)
lienzo.stroke()

Algunos de los métodos usados en canvas:

método uso
líneas .stroke()
estilo de línea .strokeStyle(argumentos)
rectángulos .strokeRect(x, y, ancho, alto)
estilo de rectángulo.fillRect(x, y, ancho, alto)
rectángulo eliminar .clearRect(x, y, ancho, alto)
figura rellena .fill()
arcos .arc(x, y, radius, ángulo1, ángulo2, sentido)
curvas de Bézier .bezierCurveTo(p1x, p1y, p2x, p2y, x, y)
curvas cuadráticas .quadraticCurveTo(px, py, x, y)
textos .font(Font)
.fillText(texto, x, y)
.strokeText(texto, x, y)
.textAlign(start|end|left|right|center)
.measureText()
pintar imágenes .drawImage(objeto, x, y)
.drawImage(objeto, x, y, ancho, alto)
.drawImage(objeto, x1, y1, ancho1, alto1, x2, y2, ancho2, alto2)
transparencias .fillStyle = 'rgb(r,g,b,alpha)'
sombras .shadowOffsetX = valor
.shadowOffsetY = valor
.shadowColor = 'rgb(r,g,b,alpha)'
.shadowBlur = valor
gradiente lineal .createLinearGradient(x1, y1, x2, y2)
.addColorStop(punto, color)
gradiente radial .createRadialGradient(x1, y1, radioInicio, x2, y2, radioFinal)
.addColorStop(punto, color)
patrón imagen .createPattern(imagen, repetición)
repeticion = repeat|repeat-x|repeat-y|no-repeat
patrón canvas .createPattern(canvas, repetición)
repeticion = repeat|repeat-x|repeat-y|no-repeat
guardar y restaurar .save()
.restore()
trasladar .translate(x, y)
rotar .rotate(grados)
redimensionar .scale(x, y)

Estilos CSS3

Con la incorporación de un archivo de estilos CSS podremos dar forma y aspecto a nuestra página modificando el comportamiento visual de los objetos de la página.

En el encabezado del código html se define la ubicación del archivo de estilos:

<link rel="stylesheet" type="text/css" href="styles/style-to5.css" />

Los aspectos más usados en los estilos se muestran en la tabla a continuación.
(Los ejemplos no tienen la hoja de estilos del libro para no interferir con las demostraciones de estilo aplicadas en los mismos)

etiqueta uso
bordes
sombras
transformaciones 2D
opacidad
columnas
fuentes
transiciones hover
transiciones javascript
animaciones 2D
animaciones 3D