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
- childNode: es una lista de nodos descendientes del nodo actual
- firstChild: devuelve directamente el primer nodo hijo
- lastChild: devuelve el último nodo de la colección
- nextSibling: referencia el nodo siguiente en el mismo nivel de jerarquía
- previousSibling: referencia el nodo anterior en el mismo nivel de jerarquía
document.getElementById('myElement').parentNode
document.getElementById('myElement').childNodes
, o bién
document.getElementById('myElement').childNodes(x)
, dónde x es un índice.
document.getElementById('myElement').firstChild
document.getElementById('myElement').lastChild
document.getElementById('myElement').nectSibling
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
- get ElementsByName: igual que el anterior, pero obtiene todos los nodos cuyo atributo 'name' sea el que se consigne:
- getElementById: devuelve solo un elemento, el que coincide con el id:
document.getElementsByTagName('tipo de tag')
, donde 'tipo de tag' puede ser cualquier tag, por ejemplo 'p', 'a', 'div', 'li', etc...
document.getElementByName('nombre')
, dónde 'nombre' es el valor del atributo 'name' del tag
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
- nodeName: devuelve el atributo nombre:
- tagName: devuelve el atributo nombre:
- nodeType: devuelve el atributo nombre:
- nodeValue: devuelve el valor del nodo:
document.getElementsById('id').[atributo].hasChildNodes()
document.getElementsById('id').[atributo].nodeName
document.getElementsById('id').tagName
document.getElementsById('id').[atributo].nodeType
. Puede devolver 1 (elemento), 2 (atributo) o 3 (texto)
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
- Atributos css: igual que el anterior, pero enfocado al atributo 'style':
document.getElementsById('id').atributo
, donde atributo puede ser cualquier atributo, por ejemplo 'href', 'name', 'src', className, ...
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
- setAttribte: modifica el valor de la propiedad:
- removeAttribute: elimina el atributo:
document.getElementsById('id').getAttribute('atributo')
document.getElementsById('id').setAttribute('atributo')
document.getElementsById('id').removeAttribute('atributo')
Manipulación de Nodos
- Crear Nodo: Se pueden crear nodos utilizando
- Crear Nodo de texto: Si es un texto dentro de un nodo, se puede usar
- Clonar Nodo: clona el nodo, lo puede hacer con profundidad (true) o sólo las etiquetas (false):
- Eliminar Nodo: elimina el nodo
- Reemplaza Nodo: cambia el nodo:
document.getElementsById('id').createElement('tag name')
document.getElementsById('id').createTextNode('texto a insertar')
document.getElementsById('id').cloneNode('true')
document.getElementsById('id').removeChild(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:
- declaración del evento
window.onload = function {
objeto.event = funcionDesencadenada;
}
- tratamiento del evento
function funcionDesencadenada(ev) {
var evento = ev || window.event;
switch (evento.type) {
case 'mouseclick': funcionfinal(arg1, arg2, ...); break;
case 'mousedown':...
case 'keypress':...
...
}
}
- 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:
- Por Nombre:
document.getElementById('formulario').elemento
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;
- options: devuelve un array con todas las opciones
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.
- Bloque try: dentro de este bloque se introduce el código que se desea controlar
- Bloque catch: en este bloque habrá las instrucciones a realizar si se detecta una excepción
- 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í
}
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:
instancia del objeto XMLHttpRequest
peticion_http = new XMLHttpRequest();
para todos los navegadores excepto IEpeticion_http = new ActiveXObject(“Microsoft.XMLHTTP”);
sólo IEpreparación de la función de respuesta
peticion_http.onreadystatechange = muestraContenido;
petición al servidor
peticion_http.open(‘GET’, ‘http://localhost:56124/HolaMundo.txt’, true);
peticion_http.send(null);
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
- 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'>
- Declaración en la página html del archivo de funciones propio:
<script src='Scripts/mis-funciones.js' type='text/javascript>
- 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étodo | descripció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ónnodo.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.
evento | descripció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.
navegador | MP3 | WAV | OGG |
Firefox | - | X | X |
Chrome | X | X | X |
IE | X | X | - |
Opera | - | X | X |
Safari | X | X | - |
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.
navegador | MP4 | WebM | OGG |
Firefox | - | X | X |
Chrome | X | X | X |
IE | X | X | - |
Opera | - | X | X |
Safari | X | - | - |
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 |