Curso Java Script DHTML

CURSO DE JAVASCRIPT Y
DHTML
Sergio Jiménez Celorrio

Departamento Ingeniería Informática - UC3M
CURSO DE JAVASCRIPT Y DHTML
¿Para qué nos sirve este curso?
z Dotar a las páginas web de “Inteligencia”

– Almacenar y recuperar información del usuario
– Comprobar formularios
z Aumentar interacción del usuario con la WEB
– Captar Eventos del ratón y del teclado
– Realizar Pequeñas animaciones
z Definir reglas de estilo
– Crear sitios WEB donde todas las páginas mantengan una
apariencia común
CURSO DE JAVASCRIPT Y DHTML
Estructura del Curso
z Introducción
z JavaScript
z el DOM y las Hojas de Estilo (CSS)
z DHTML
z Proyectos DHTML
Introducción

Introducción
¿Qué es JavaScript?
z No es Java
z Es un lenguaje de programación de Scripts
en el ‘Client-Side’
z Otros VBScript
Introducción
¿Qué es DHTML?
z No es un lenguaje de programación
z No es una aplicación
z Es una metodología de trabajo:
– DHTML = JS + DOM + CSS
z JS (JavaScript) lenguaje de programación de Scripts
z DOM (Documet Object Model) estructura de los objetos de los

objetos de un documento WEB
z CSS (Hojas de Estilo) lenguaje de definición del aspecto de

los objetos de un documento WEB
JAVASCRIPT

JavaScript
Herramientas de Trabajo
z Editores de Texto Plano

– NotePad
– EditPlus
z Editores de JS Profesionales
– DreamWeaver
– Antechinus
JavaScript
JavaScrit en una página WEB(1)
<HTML>
<HEAD>
<TITLE>
Mi primer Script
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
<BODY>
<P>
Este página contiene un script vacío
</P>
</BODY>
</HTML>
JavaScript
<HTML>
<HEAD>
<TITLE>
Mi primer Script
</TITLE>
alert("¡Hola JavaScript!");
</SCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene mi primer script
</P>
</BODY>
</HTML>
JavaScript
<HTML>
<HEAD>
<TITLE>Mi primer Script</TITLE>

</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene mi primer script
</P>
</BODY>
</HTML>
JavaScript
Detección de errores
z Cambiar alert por Alert

JavaScript
Variables
z Declaración
z Asignación
JavaScript – Variables
Declaración e Asignación(1)
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>

</SCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
Declaración y Asignación (2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Declaración y Asignación (3)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Declaración y Asignación(4)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript- Variables
Nombres de las variables
z Nombres Incorrectos
– No pueden empezar por números
– Pueden contener:
z Numeros, ej var total2004;
z Letras, ej var total;
z El caracter ‘_’ (underscore ) ej var total_2004;
– No pueden contener:
z Símbolos: ‘;’ ‘,’ ‘.’
z Letras acentuadas ni caracteres locales tipo ñ,ç
z Espacios en blanco
z Palabras reservadas
Tipos de Variables
z Cadenas:
– var producto= “Tetrabrick Leche 1L”;
z Números
– Var precio=1;
– Var precio= 0.65;
z Booleanos
– var enstock=true;
z Nulas
– var producto=null;
z Indefinidas
JavaScript – Variables –Tipos de Variables
Cadenas
z Asignación
– Se guarda entre Comillas simples o dobles
z Operaciones
– Concatenación ‘+’
JavaScript – Variables –Tipos de Variables - Cadenas
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Secuencias de Escape
Escape Efecto
“\\texto de prueba” texto de prueba
“texto \”de\” pueba” texto “de” prueba
“texto \’de\’ prueba” texto ‘de’ prueba
Secuencia Efecto
\n Salto de línea
\f Salto de página
\r Retorno de carro
\t Tabulación
\b Retroceder un carácter
Secuencias de Escape
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Números
z Asignación
z Operaciones
z Infinito y Nan
JavaScript – Variables –Tipos de Variables - Números
Asignación
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de Variables- Números
Operaciones
z Suma +, +=
z Resta –, -=
z Multiplicación *, *=
z División /, /=
z Incremento ++
z Decremento –
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
NaN e Infinity
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Booleanos
z Asignación
z Operadores
– Comparadores
z <
z >=
z <
z <=
z ==
z !==
– Operadores lógicos
z AND: &&
z OR: ||
z NOT: !
JavaScript – Variables –Tipos de Variables – Booleanos
Ejemplo Comparaciones
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de Variables – Booleanos
Ejemplo Operadores Lógicos
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Variables Nulas
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Variables – Tipos de Variables
Variables Indefinidas
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Tipos de Variables
z Obtener el tipo de una variable

– typeof(variable)
z Cambio de tipo :
– conversión implícita
– conversión explícita (Recomendable)
JavaScript – Variables – Tipos de Variables
Obtener el tipo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Cambios de tipos
z Obtener el tipo de una variable

z Cambio de tipo :
– conversión implícita
– conversión explícita (Recomendable)
Conversión implicita(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Conversión explícita(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo
Condicionales
z IF
z Switch
JavaScript – Control de Flujo- Condicionales
IF
If (condición)
then {
expresión1;
expresión2;
…
expresión n;
}
else{
expresión1;
expresión2;
…
expresión m;
}
JavaScript – Control de Flujo- Condicionales- IF
Ejemplo (1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo (2)
<HTML>
<HEAD>

</SCRIPT>
<NOSCRIPT> Su navegador no soporta
JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo –Condicionales
Switch
switch (variable)
{
case valor1:
expresion1;
expresion2;
…
break;
case valor2:
expresion1;
expresion2;
…
break;
case valor3:
expresion1;
expresion2;
…
break;
case default:
expresion1;
expresion2;
…
}
JavaScript – Control de Flujo –Condicionales-Switch
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
<NOSCRIPT> Su navegador no
soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo
Bucles
z For
z While
z Do-while
z Break
JavaScript – Control de Flujo –Bucles
For
for(expresión inicial; condición; expresión iteración)

{
expresión1;
expresión2;
…
expresiónn;
}
JavaScript – Control de Flujo –Bucles – For
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
While
while(condicion)
{
expresión1;
expresión2;
…
expresiónn;
}
JavaScript – Control de Flujo –Bucles-While
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Do-while
do {
expresión1;
expresión2;
…
expresiónn;
}while (condicion);
JavaScript – Control de Flujo – Bucles - Do While
Ejemplo
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo – Bucles
Break
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
Matrices
Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik

leche 1L leche 1L leche 1L leche 1L … leche 1L leche 1L
[0] [1] [2] [3] [9] [10]
Producto [ ]
JavaScript – Matrices
Declaración
z var producto = new Array();

z var producto = new Array(5);
z var producto = new Array(”producto1”,”producto2”, …);
Ejemplo(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Tablas
Producto [ ][ ]
[0][1] [0][2] …
Tetrabrik Lata Champú Harina Aceite
[0][0] leche 1L Tomate 1L 1K 1L
185 432 127 472 687

[1][0] unidades unidades unidades … unidades unidades
1 2 1,5 0,5 3
[2][0] €/unidad €/unidad €/unidad €/unidad €/unidad
[2][1] [2][2] …
JavaScript – Matrices - Tablas
Declaración
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El objeto Array
z Los array son objetos

z Tiene atributos o propiedades
– length
z Tiene métodos
– join()
– reverse()
– sort()
– push()
– pop()
– shift()
– unshift()
– slice()
– concat()
JavaScript – Matrices – El objeto Array
El atributo length
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método join()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método reverse()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método sort()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método push()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método pop()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método unshift()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método shift()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método slice()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
El método concat()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
Funciones
z Funciones de JavaScript:
– alert()
– prompt()
– setTimeout
– confirm()
– …
z Funciones de Usuario
JavaScript – Funciones
Funciones de Usuario(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Funciones de Usuario
function nombre_función(arg1, arg2, arg3,…)

{
var valor;
expresión 1;
expresión 2;
…
expresión n;
return valor;
}
JavaScript – Funciones - Funciones de Usuario
Argumentos variables(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript – Funciones - Funciones de Usuario
Argumentos variables(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
Cookies
z Almacenar Información del usuario

z Activarlas en el navegador
z Recomendaciones de Uso
JavaScript – Cookies
Manejo básico
z Guardar cookie
– document.cookie = “nombre=valor”;
– Ej: document.cookie = “usuario=sergio jimenez
celorrio”;
z Recuperar cookie
– var variable= document.cookie;
– Var posIgual=variableCookie.indexOf(“=”);
– Var valorcoockie.substring(posIgual+1);
Manejo avanzado(1)
z GuardarCookieVar()
z ValorCookieVar()
z EliminarCookieVar()
Manejo avanzado(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
JavaScript
POO en JS
z ¿Qué es una clase?

z ¿Qué es un objeto?
JavaScript – POO en JS
Creación de objetos
z Definición de la clase
– Constructor
z Atributos y métodos
z Instanciación (Creación) de un objeto
– New
JavaScript – POO en JS - Creación de objetos
Ejemplo(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplo(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ejemplos de objetos
z Array
– Atributos: length,
– Métodos: join(), reverse(), sort(), push(), pop(), concat(), …
z String
– Atributos: length
– Métodos: indexOf(), substr(), replace(),…
z Date
– Atributos:
– Métodos: getHours(), getMinutes()
z Math
– Atributos: Math.PI, Math.E, …
– Métodos: abs(), pow(), random(), sqrt(), round() log(),…
JavaScript – POO en JS - Ejemplos de objetos
String. El atributo length
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El método indexOf()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El método sustr()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. El método replace()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
String. Métodos toUpperCase() y toLowerCase()
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Math
z Es una clase no instanciable

Math
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Date(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Date(2)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Prototype
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
Ventajas de la POO
z Reutilización de código
z Encapsulación
z Programas orientados a Eventos
Eventos más utilizados
Evento Descripción Objetos

Es llamado al cargar una página window
onLoad()
Es llamado al descargar (cerrar) una página window
onUnload()
Es llamado al pulsar con el botón izquierdo del ratón link, button, radio, checkbox,
onClick()
Es llamado al hacer doble click el botón izquierdo del ratón link, button, radio, checkbox,
onDblClick()
Es llamado al pasar el ratón por encima link, area, layer
onMouseOver()
Es llamado al cuando el ratón ya no pasa por encima link, area, layer

onMouseOut()
Es llamado cuando se le da el foco al objeto Window, text, textArea, Password,
onFocus() link, button, radio, checkbox, form
Es llamado cuando se cambia el contenido del objeto Window, text, textArea, Password,
onChange() link, radio, checkbox
Es llamado cuando se selcciona el contenido del objeto text, textArea, Password

onSelect()
Es llamado cuando se le quita el foco al objeto Window, text, textArea, Password,
onBlur() link, button, radio, checkbox, form
JavaScript
Varios
z Imprimir
– println()
z Reproducir música
– play()
– stop()
DOM

DOM
Introducción
z ¿Qué es DOM?
– Estándar para la estructuración de documentos
HTML
z ¿Para qué sirve?
– Permite acceder y modificar los diferentes objetos
de una página WEB ya descargada.
DOM
El modelo de objetos DOM1
window
frames location navigator history document screen …
… applets body form images links

DOM
El modelo de objetos W3C
document
html
head body
tittle table
Texto con el Título de la página tr tr tr
td td td td td td
dato1 dato2 dato3 dato4 dato5 dato1

DOM
El objeto nodo
z Todos los elementos de una página son

objetos de la clase nodo
z Tipos de nodo
– Nodo de Elemento
– Nodo de Texto
DOM – El objeto nodo
Propiedades
ownerDocument Documento actual de trabajo

className Origen de clase
tagName Nombre de la etiqueta
nodeName Identificador del nodo
nodeType Tipo de nodo (etiqueta, atributo,texto)
nodeValue Valor del nodo (texto en un nodo de texto)
InnerHTML Valor del Texto entre dos nodos de elemento
Parentnode Nodo padre
firstChild Primer nodo hijo
lastChild Último nodo hijo
nextSibling Nodo hermano siguiente
previousSibling Nodo hermano previo
Métodos
cloneNode() Copia un nodo
Boolean hasChildNodes() Informa si un nodo tiene hijos o no
appendChild() Añade un nodo hijo
insertBefore() Inserta un nodo hijo
replaceChild() Reemplaza el nodo hijo indicado por otro
createElement() Crea un nodo de elemento para añadirlo como hijo
createTextNode() Crea un nodo de texto para añadirlo como hijo
Node getElementById(identificador) Obtiene un nodo mediante su identificador
getElementsByTagName(tagname) Obtiene un nodo o conjunto de nodos por su Etiqueta
getAtribute() Obtiene el valor de un atributo
removeAtribute() Elimina un atributo de un nodo de elemento
setAtribute() Da valor a un atributo de un nodo elemento

Propiedades y Métodos(1)
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<Table name="tabla1" id="tabla1" border="1">
<Tr>
<TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH>
</Tr>
<Tr>
<TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>
</Tr>
<Tr>
</Tr>
</Table>
<form name="form1" id="form1">
<input type="Text" name="textoNuevo"> <br>
<input type="Button" value="Crea párrafo" onclick="cambiarValorCelda()">
</form>
</BODY>
</HTML>
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<H1>Ejemplo para añadir y eliminar nodos de un documento</H1>
<p id="aqui"> </p>
<form name="form1" id="form1">
<input type="Text" name="textoNuevo"> <br>
<input type="Button" value="Crea título1" onclick="AnadirNodo('H1')">
<input type="Button" value="Crea título2" onclick="AnadirNodo('H2')">
<input type="Button" value="Elimina Nodo" onclick="eliminarNodo()">
</form>
</BODY>
</HTML>
DOM
Nodos Especiales
z screen
z navigator
z window
z document
z history
z location
z document
z layer
z link
z button
z image
z form
DOM - Nodos Especiales
screen
z Atributos:
– width, height, availWidt, availHeight, colorDepth,
updateInterval, etc
z Métodos
z Eventos
screen
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
Esta página contiene un Script
</BODY>
</HTML>
navigator
z Atributos:
– appName, appVersion, etc
z Métodos
z Eventos
navigator
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
window
z Atributos
z Métodos
– moveTo(x,y), resizeTo(width,heigth),
open(“URLpopup.html”,”nombrePopUp”), close(),
alert(), acept(), confirm(), etc
z Eventos
window
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
document
z Atributos
– bgColor, fgColor, linkColor, vlinkColor, alinkColor,
Tittle, etc
z Métodos
– write(), writeLn(), etc
z Eventos
document
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<a onClick="ponerTitulo();">Poner título</a><br>
<a onClick="ponerTexto();">Poner texto</a>
</BODY>
</HTML>
history
z Atributos
z Métodos
– back(), forward(), etc
z Eventos
history
<HTML>
<HEAD>
</HEAD>
<BODY>
<a href="#" onClick="window.history.back();"> Atrás </a> <br>
<a href="#" onClick="window.history.forward();"> Adelante </a>
</BODY>
</HTML>
location
z Atributos
– href
z Métodos
z Eventos
location
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<a onClick="IraGoogle();">Google</a>
</BODY>
</HTML>
layer
z Atributos
z Métodos
z Eventos
– onMouseOver(), onMouseOut()
layer
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
layer
<BODY>
<div onMouseOver="EnCapa1();">
Capa 1<br>
Capa 1<br>
Capa 1<br>
Capa 1<br>
</div>
<div onMouseOver="EnCapa2();">
Capa 2<br>
Capa 2<br>
Capa 2<br>
Capa 2<br>
</div>
</BODY>
</HTML>
link
z Atributos
z Métodos
z Eventos
– onMouseClick(), onMouseOver(), onMouseOut()
link
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<a href="http://www.google.com" onMouseOver="dentro();">Google</a>
</BODY>
</HTML>
link
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<a href="http://www.google.com" onMouseOver="status='Este link te lleva a google';"
onClick="return advertir();">
Google
</a>
</BODY>
</HTML>
button
z Atributos
z Métodos
z Eventos
– onFocus(), onBlur(), onMouseClick(),
onMouseOver(), onMouseOut()
button
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<body>
<table width="100%">
<tr>
<td height=50 bgcolor="red" onmouseover="cambiarColor('red')"> </td>
<td height=50 bgcolor="blue" onmouseover="cambiarColor('blue')"> </td>
<td height=50 bgcolor="green" onmouseover="cambiarColor('green')"> </td>
</tr>
</table>
<form>
<input id="miboton" type="button" value="Boton">
</form>
</body>
</html>
image
z Atributos
z Métodos
z Eventos
– onMouseClick(), onMouseOver(), onMouseOut()
image
<HTML>
<HEAD>

</SCRIPT>
</head>
<body>
<img name="numeros" src="imagenes/cero.gif" onMouseOver="cambiar_imagen0();"
onMouseOut="cambiar_imagen1();">
</body>
</html>
form
z Atributos
– value, etc
z Métodos
z Eventos
– onChange(), onFocus(), onBlur(),
onMouseClick(), onMouseOver(), onMouseOut(),
etc
form
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<form name="myForm1">
Formulario1 <input onkeyup="copiaInfo()" type="text" name="option"><br />
</form>
<form name="myForm2">
Formulario2 <input onkeyup="copiaInfo()" type="text" name="option"><br />
</form>
</BODY>
</HTML>
form
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
<form>
¿Cuál es tú refresco preferido?
<select id="refescos" onchange="ElegirRefresco()">
<option value="Fanta">Fanta
<option value="Coca Cola">Coca cola
<option value="Tónica">Tónica
</select>
</form>
</BODY>
</HTML>
Frames
z ¿Debo utilizar Frames (marcos)?

CSS (Hojas de Estilo)

Departamento Ingeniería Informática UC3M
CSS
Introducción
z ¿Qué es CSS?
– Lenguaje de definición de reglas de apariencia
z ¿Para qué sirve CSS?
– Para evitar repetir bloques de código al intentar
mantener una apariencia común en un sitio WEB
CSS
Formato Regla
selector[:operador]
{
atributo1:valor1;
atributo2:valor2;
…
atributon-1:valorn-1;
atributon:valorn
}
CSS
CSS en una página WEB
z La etiqueta <style>
z El atributo “style”
CSS - CSS en una página WEB
Ejemplo (1)
<HTML>
<HEAD>
<STYLE>
H1{
font-size: 8px;
color: RED;
font-weight:bold
}
</STYLE>
</HEAD>
<BODY>
<H1>Título modificado con una hoja de estilo</H1>
Resto del documento
</BODY>
</HTML>
CSS - CSS en una página WEB
Ejemplo (2)
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 STYLE="font-size: 48px; color: blue; font-weight:bold">
Título modificado con una hoja de estilo
</H1>
Resto del documento
</BODY>
</HTML>
CSS
Formato de las Reglas
z Tipos de selectores
– Selectores simples
– Selectores contextuales
z Operadores
CSS - Formato de las Reglas – Selectores simples
Selector de Tipo
<HTML>
<HEAD>
<STYLE>
TD {
font-size:8px
}
</STYLE>
</HEAD>
<BODY>
<Tr>
</Tr>
<Tr>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
</HTML>
CSS - Formato de las Reglas - Selectores simples
Selector de Clase
<HTML>
<HEAD>
<STYLE>
.colorrojo {
color:red
}
</STYLE>
</HEAD>
<BODY>
<Tr>
<TH class="colorrojo"> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH>
</Tr>
<Tr>
<TD class="colorrojo"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>
</Tr>
<Tr>
<TD class="colorrojo"> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>
</Tr>
</Table>
</BODY>
</HTML>
Selector de Id
<HTML>
<HEAD>
<STYLE>
#celda1 {
color:blue
}
</STYLE>
</HEAD>
<BODY>
<Tr>
</Tr>
<Tr>
<TD id="celda1"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>
</Tr>
<Tr>
<TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>
</Tr>
</Table>
</BODY>
</HTML>
Selector de Universales
<HTML>
<HEAD>
<STYLE>
* {
color:green
}
</STYLE>
</HEAD>
<BODY>
<Tr>
</Tr>
<Tr>
</Tr>
<Tr>
<TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>
</Tr>
</Table>
</BODY>
</HTML>
CSS - Formato de las Reglas - Selectores complejos
Selector de Descendientes
<HTML>
<HEAD>
<STYLE>
DIV H1{
color:red
}
</STYLE>
</HEAD>
<BODY>
<H1>Este es un Título normal normal</H1>
<DIV>
<H1>Este es un Título descendiente hijo de un DIV</H1>
<P>
<H1>Este es un Título descendiente de un DIV</H1>
</P>
</DIV>
</BODY>
</HTML>
Selector de Parentesco
<HTML>
<HEAD>
<STYLE>
DIV >H1{
color:red
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P>
</P>
</DIV>
</BODY>
</HTML>
Selector de Hermanos
<HTML>
<HEAD>
<STYLE>
DIV + H1{
color:red
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P>
</P>
</DIV>
</BODY>
</HTML>
CSS - Formato de las Reglas – Operadores
FirstLetter
<HTML>
<HEAD>
<STYLE>
h1:first-letter{
color:red
}
</STYLE>
</HEAD>
<BODY>
<H1>Este es el Título</H1>
</p>
</BODY>
</HTML>
FirstLine
<HTML>
<HEAD>
<STYLE>
td:first-line{
color:red;
font-weight:bold
}
</STYLE>
</HEAD>
<BODY>
<table>
<tr>
<td>uno<br>uno<br></td> <td>dos<br>dos<br></td> <td>tres<br>tres<br></td>
</tr>
</table>
</BODY>
</HTML>
Links
<HTML>
<HEAD>
<STYLE>
a:link{color:blue;}
a:visited{color:red;}
a:hover{text-decoration:none;}
</STYLE>
</HEAD>
<BODY>
<a href="http://wwww.google.com">Ir a google</a>
</BODY>
</HTML>
CSS
Herencia de Estilos
z Herencia en Cascada: Los nodos hijos

heredan reglas de estilo de los nodos
padres.
CSS – Herencia de Estilos
Cascada(1)
<HTML>
<HEAD>
<STYLE>
.colorrojo {color:red}
</STYLE>
</HEAD>
<BODY>
<Table class="colorrojo" name="tabla1" id="tabla1" border="1">
<Tr>
</Tr>
<Tr>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
</HTML>
Cascada(2)
<HTML>
<HEAD>
<STYLE>
.colorpadre {color:inherit}
</STYLE>
</HEAD>
<BODY class="colorrojo">
<Tr>
</Tr>
<Tr>
<TD class="colorpadre"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD>
Celda1,4 </TD>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
/HTML
Anular la Cascada
<HTML>
<HEAD>
<STYLE>
.colorazul {color:blue}
</STYLE>
</HEAD>
<BODY>
<Table class="colorrojo" name="tabla1" id="tabla1" border="1">
<Tr>
</Tr>
<Tr>
<TD class="colorazul"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD>
Celda1,4 </TD>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
/HTML
CSS
Definiendo Estilos
z Tipo y color de letra

z Fondo
z Bordes y margenes
z Puntero del ratón
z Barras de scroll
z Posición
CSS – Definiendo Estilos
Cambiando el texto
z Font-family:Verdana, Arial, Courier,..

z Font-size:8px,9px,10px,..
z Font-Style: Normal, Italic, Oblique
z Font-weight: Bold, Bolder, Ligther, Normal
Cambiando el texto
<HTML>
<HEAD>
<STYLE>
.textomodificado {
font-family:verdana;
font-size:small;
font-style:italic;
font-weight:Ligther
}
</STYLE>
</HEAD>
<BODY>
<h1> Este es un título normal</h1>
<h1 class="textomodificado"> Este es un título con el texto modificado</h1>
</BODY>
</HTML>
Cambiando el color
z Color: red, blue, green, …

z Color: rgb(100%,0%,0%)
Cambiando el color
<HTML>
<HEAD>
<STYLE>
.colormodificado {
color:red;
}
</STYLE>
</HEAD>
<BODY>
<h1 class="colormodificado"> Este es un título con el texto modificado</h1>
</BODY>
</HTML>
Cambiando el fondo
z Background-color
z Background-image: fichero
z Background-position: top, left, center,
bottom, right
Cambiando el fondo
<HTML>
<HEAD>
<STYLE>
.colorfondomodificado {
background-color:red;
}
</STYLE>
</HEAD>
<BODY>
<h1 class="colorfondomodificado"> Este es un título con el texto
modificado</h1>
</BODY>
</HTML>
Cambiando el borde
z Border-width:1px,2px,…
z Border-color: red, blue,..
z Border-style: solid, dashed, dotted,…
Cambiando el borde
<HTML>
<HEAD>
<STYLE>
.bordemodificado {
border-width:2;
border-color:red;
border-style:dotted
}
</STYLE>
</HEAD>
<BODY>
<Table class="bordemodificado" name="tabla1" id="tabla1" border="1">
<Tr>
</Tr>
<Tr>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
</HTML>
Cambiando el puntero
z Cursor: auto, crosHair, wait, hand, move, Text,…

Cambiando el puntero
<HTML>
<HEAD>
<STYLE>
.cursormodificado {cursor:wait}
</STYLE>
</HEAD>
<BODY>
<Tr class="cursormodificado">
</Tr>
<Tr>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
</HTML>
Cambiando las barras de desplazamiento
z Scrollbar-base-color: red, blue, green, cyan,…

z Scrollbar-face-color: red, blue, green, cyan,…
z Scrollbar-track-color: red, blue, green, cyan,…
z Scrollbar-arrow-color: red, blue, green, cyan,…
z Scrollbar-highlight-color: red, blue, green, cyan,…
z Scrollbar-3dlight-color: red, blue, green, cyan,…
z Scrollbar-shadow-color: red, blue, green, cyan,…
z Scrollbar-darkshadow-color: red, blue, green,
cyan,…
Cambiando las barras de desplazamiento
<HTML>
<HEAD>
<STYLE>
.scrollmodificado {
scrollbar-base-color:cyan;
scrollbar-face-color:blue;
scrollbar-track-color:yellow
}
</STYLE>
</HEAD>
<BODY class="scrollmodificado">
<Tr>
</Tr>
<Tr>
</Tr>
<Tr>
</Tr>
</Table>
</BODY>
</HTML>
Cambiando la posición
<HTML>
<HEAD>
<STYLE>
h1.tipo1{
position:relative;
left:20px;
}
h1.tipo2
{
position:relative;
left:-20px;
}
</STYLE>
</HEAD>
<body>
<h1>Normal</h1>
<h1 class="tipo1">tipo1</h1>
<h1 class="tipo2">tipo2</h1>
</body>
</html>
Cambiando la posición
z Top
z Left
z Width
z Height
z Z-index
DHTML

DHTML
Introducción
z ¿Qué es DHTML?
– No es un lenguaje de programación
– No es una aplicación
– Es una metodología de trabajo:
z DHTML = JS + DOM + CSS
DHTML
Menús dinámicos(1)
<HTML>
<HEAD>
<STYLE>
.boton{
background:C0C0C0;
border:2px outset;
}
</STYLE>

</SCRIPT>
</HEAD>
DHTML
<BODY>
<table width="80">
<tr>
<td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a
href="http://www.google.com">Google</a></td>
</tr>
<tr>
<td class="boton"onmouseover="dentro(this)" onmouseout="fuera(this)"><a
href="http://www.yahoo.com">Yahoo</a></td>
</tr>
<tr>
href="http://www.altavista.com">Altavista</a></td>
</tr>
<tr>
href="http://www.terra.es">Terra</a></td>
</tr>
</BODY>
</HTML>
DHTML
<HTML>
<HEAD>
<STYLE>
.menu{ border:groove 2px;
padding:3px;
font-family:arial;
font-size:12px;
width:100px;
height:70px;
background-color:#c0c0c0;
position:relative;
top:-80px;
left:-10px;
}
</STYLE>

</SCRIPT>
</HEAD>
<span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)">
<a href="http://www.google.com">Google</a><br />
<a href="http://www.yahoo.com">Yahoo</a><br /><br /><hr />Buscadores<br />
</span>
<span class="menu" onmouseover="mostrarmenu(this)" onmouseout="mostrarmenu(this)">
<p></p>
<p></p>
<p>
<a href="http://www.elmundo.es">El mundo</a><br />
<a href="http://my.elpais.es">El Pais</a><br /><br />
</p>
<hr />Periódicos<br />
</span>
</BODY>
</HTML>
DHTML
<HTML>
<HEAD>
<STYLE>
table{
font-size:12;
}
.menu
{
border:groove 2px;
padding:3;
font-family:arial;
font-size:12;
width:90;
height:40;
position:relative;
top:-15;
left:-60;
}
</STYLE>

</SCRIPT>
</HEAD>
DHTML
<BODY>

<table border="0" width="100%">
<tr>
<td width="90%"><a href="http://www.google.com">Google</a></td><td rowspan="2">Buscadores</td>
</tr>
<tr>
<td><a href="http://www.yahoo.com">Yahoo</a></td>
</tr>
</table>
</span>
<br />
<table width="100%">
<tr>
<td width="90%"><a href="http://www.elmundo.es">El mundo</a></td><td rowspan="2">Periódicos</td>
</tr>
<tr>
<td><a href="http://my.elpais.es">El Pais</a></td>
</tr>
</table>
</span>
<br/>
</BODY>
</HTML>
DHTML
Posición del cursor(1)
<HTML>
<HEAD>
<STYLE>
#PosicionX{ background:lightblue}
#PosicionY{ background:red}
</STYLE>

</SCRIPT>
</HEAD>
<BODY onmousemove="PosicionCursor()">
cursor X: <span id="PosicionX"></span><br />
cursor Y: <span id="PosicionY"></span>
</BODY>
</HTML>
DHTML
Tooltips
<HTML>
<HEAD>
<STYLE>
.titulo{background:lightblue}
</STYLE>

</SCRIPT>
</HEAD>
<BODY>
<h1 class="titulo" onmousemove="moverTooltip()" >Título</h1>
<span id="tooltip" style="visibility:hidden">Explicación del título1</span>
</BODY>
</HTML>
DHTML
Scroll de Texto
<HTML>
<HEAD>
<TITLE> Curso JS y
DTHML</TITLE>
<STYLE>
span{
position:absolute;
background:#CCCCCC;
width:100;
height:500;
clip:rect(0 100 100 0);
}
</STYLE>
<SCRIPT
LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY onload="scroll()" onunload="pararTimeout()">
<span id="display"><br /><br /><br /><br /><br /><br /><br />
Hace mucho, mucho tiempo, en una galaxia muy, muy lejana,
un grupo de rebeldes dispuestos a reinstaurar la república,
luchan contra el malingno imperio que la sustituyó.
</span>
</BODY>
</HTML>
DHTML
Pop Up
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<body onLoad="open_window()">
Esta es la página principal
<a href="javascript:close_window()">Cerrar publicidad</a>
</body>
</html>
DHTML
Imágenes en movimiento
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<body onload="ponerTimer();" onunload="quitarTimer();">
<img id='imagen' src="imagenes/cero.gif" width="50" height="50" />
</body>
</html>
DHTML
Drag & drop
<HTML>
<HEAD>
<style>
img{position:relative;}
</style>

</SCRIPT>
</HEAD>
<body>
<img id="moveMe" src="imagenes/cero.gif" width="50" height="50">
</body>
</html>
DHTML
Transiciones
z <meta http-equiv="Page-Enter"
content="blendtrans(duration=3.0)">
PROYECTOS DHTML

Proyectos DHTML
Conveniencia del DHTML
z Tecnologías complementarias y compatibles

– Flash
– Applets Java
– PHP, ASP, JSP
z Uso de CSS y DOM con estas tecnologías o
con otros lenguajes de “script”
DHTML
Proyectos - Consejos
z La página debe ser lo más ligera posible

– Es mejor utilizar JS y CSS que repetir HTML
– Si varias páginas de un sitio WEB utilizan las mismas funciones JS o los
mismos estilos CSS deben estar en ficheros externos
– No hay que reducir las imágenes con su atributo width
z Realizar las pruebas en distintas plataformas
– Distintos modelos de navegadores
– Distintos sistemas operativos
– Distintos ordenadores
z Cuanto más básico sea el código más compatibilidad
z Coockies sólo cuando sean realmente necesarias
z Seguridad
– Nunca mantener coockies con datos personales importantes
– No comprobar contraseñas con una función JS en una página WEB
Webs de referencia
z Manual de Referencia JavaScript

– http://wp.nestcape.com/eng/mozilla/3.0/handbook/javascript/
z Manual de Referencia DOM
– www.w3.org/DOM/
z Manual de Referencia CSS
– www.w3.org/Style/CSS/
Webs con Ejemplos de código
z http://www.dynamicdrive.com/
z http://www.webreference.com/dhtml/
z http://www.dhtmlcentral.com/
z http://www.dhtmlshock.com/
z http://www.w3schools.com/dhtml/dhtml_examples.asp

Curso Java Script DHTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Java Script DHTML

Cargado por

Copyright:

Formatos disponibles

CURSO DE JAVASCRIPT Y

Sergio Jiménez Celorrio

z Dotar a las páginas web de “Inteligencia”

Sergio Jiménez Celorrio

z JS (JavaScript) lenguaje de programación de Scripts

z DOM (Documet Object Model) estructura de los objetos de los

z CSS (Hojas de Estilo) lenguaje de definición del aspecto de

Sergio Jiménez Celorrio

z Editores de Texto Plano

z Cambiar alert por Alert

z Obtener el tipo de una variable

z Obtener el tipo de una variable

for(expresión inicial; condición; expresión iteración)

Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik Tetrabrik

[0] [1] [2] [3] [9] [10]

z var producto = new Array();

185 432 127 472 687

z Los array son objetos

function nombre_función(arg1, arg2, arg3,…)

z Almacenar Información del usuario

z ¿Qué es una clase?

z Es una clase no instanciable

Evento Descripción Objetos

Es llamado al cuando el ratón ya no pasa por encima link, area, layer

Es llamado cuando se selcciona el contenido del objeto text, textArea, Password

Sergio Jiménez Celorrio

frames location navigator history document screen …

… applets body form images links

Texto con el Título de la página tr tr tr

dato1 dato2 dato3 dato4 dato5 dato1

z Todos los elementos de una página son

ownerDocument Documento actual de trabajo

cloneNode() Copia un nodo

Boolean hasChildNodes() Informa si un nodo tiene hijos o no

appendChild() Añade un nodo hijo

insertBefore() Inserta un nodo hijo

replaceChild() Reemplaza el nodo hijo indicado por otro

createElement() Crea un nodo de elemento para añadirlo como hijo

createTextNode() Crea un nodo de texto para añadirlo como hijo

Node getElementById(identificador) Obtiene un nodo mediante su identificador

getElementsByTagName(tagname) Obtiene un nodo o conjunto de nodos por su Etiqueta

getAtribute() Obtiene el valor de un atributo

removeAtribute() Elimina un atributo de un nodo de elemento

setAtribute() Da valor a un atributo de un nodo elemento

z ¿Debo utilizar Frames (marcos)?

Sergio Jiménez Celorrio

z Herencia en Cascada: Los nodos hijos

z Tipo y color de letra

z Font-family:Verdana, Arial, Courier,..

z Color: red, blue, green, …

z Cursor: auto, crosHair, wait, hand, move, Text,…

z Scrollbar-base-color: red, blue, green, cyan,…

Sergio Jiménez Celorrio

<span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)">

Sergio Jiménez Celorrio

z Tecnologías complementarias y compatibles

z La página debe ser lo más ligera posible

z Manual de Referencia JavaScript

También podría gustarte