CURSO DE JAVASCRIPT Y 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?
Dotar a las páginas web de “Inteligencia” Almacenar y recuperar información del usuario Comprobar formularios Aumentar interacción del usuario con la WEB Captar Eventos del ratón y del teclado Realizar Pequeñas animaciones 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
Introducción JavaScript el DOM y las Hojas de Estilo (CSS) DHTML Proyectos DHTML

Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M
Introducción Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

Introducción ¿Qué es JavaScript?
No es Java Es un lenguaje de programación de Scripts en el ‘Client-Side’ Otros VBScript

Introducción ¿Qué es DHTML?
No es un lenguaje de programación No es una aplicación Es una metodología de trabajo: DHTML = JS + DOM + CSS JS (JavaScript) lenguaje de programación de Scripts DOM (Documet Object Model) estructura de los objetos de los objetos de un documento WEB CSS (Hojas de Estilo) lenguaje de definición del aspecto de los objetos de un documento WEB

JAVASCRIPT Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

JavaScript Herramientas de Trabajo
Editores de Texto Plano NotePad EditPlus 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>

<HTML> <HEAD> <TITLE> Mi primer Script </TITLE> <SCRIPT LANGUAGE="JavaScript"> alert("¡Hola JavaScript!"); </SCRIPT> </HEAD> <BODY> <P> Esta página contiene mi primer script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE>Mi primer Script</TITLE> <SCRIPT LANGUAGE="JavaScript">  </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
Cambiar alert por Alert

JavaScript Variables Declaración Asignación

JavaScript – Variables Declaración e Asignación(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables Declaración y Asignación (2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables Declaración y Asignación (3)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables Declaración y Asignación(4)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript- Variables Nombres de las variables
Nombres Incorrectos No pueden empezar por números Pueden contener: Numeros, ej var total2004; Letras, ej var total; El caracter ‘_’ (underscore ) ej var total_2004; No pueden contener: Símbolos: ‘;’ ‘,’ ‘.’ Letras acentuadas ni caracteres locales tipo ñ,ç Espacios en blanco Palabras reservadas

JavaScript – Variables Tipos de Variables
Cadenas: var producto= “Tetrabrick Leche 1L”; Números Var precio=1; Var precio= 0.65; Booleanos var enstock=true; Nulas var producto=null; Indefinidas

JavaScript – Variables –Tipos de Variables Cadenas
Asignación Se guarda entre Comillas simples o dobles Operaciones Concatenación ‘+’

JavaScript – Variables –Tipos de Variables - Cadenas Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables - Cadenas Secuencias de Escape
Efecto “\\texto de prueba” “texto \”de\” pueba” “texto \’de\’ prueba” texto de prueba texto “de” prueba texto ‘de’ prueba Secuencia Efecto \n \f \r \t \b Salto de línea Salto de página Retorno de carro Tabulación Retroceder un carácter

JavaScript – Variables –Tipos de Variables - Cadenas Secuencias de Escape
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables Números
Asignación Operaciones Infinito y Nan

JavaScript – Variables –Tipos de Variables - Números Asignación
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables- Números Operaciones
Suma +, += Resta –, -= Multiplicación *, *= División /, /= Incremento ++ Decremento –

JavaScript – Variables –Tipos de Variables- Números Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables- Números NaN e Infinity
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables Booleanos
Asignación Operadores Comparadores < >= <= == !== Operadores lógicos AND: && OR: || NOT: !

JavaScript – Variables –Tipos de Variables – Booleanos Ejemplo Comparaciones
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables – Booleanos Ejemplo Operadores Lógicos
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables Variables Nulas
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables – Tipos de Variables Variables Indefinidas
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables Tipos de Variables
Obtener el tipo de una variable typeof(variable) Cambio de tipo : conversión implícita conversión explícita (Recomendable)

JavaScript – Variables – Tipos de Variables Obtener el tipo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables Cambios de tipos
Obtener el tipo de una variable Cambio de tipo : conversión implícita conversión explícita (Recomendable)

JavaScript – Variables –Tipos de Variables Conversión implicita(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Variables –Tipos de Variables Conversión explícita(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Control de Flujo Condicionales
IF Switch

JavaScript – Control de Flujo- Condicionales IF
If (condición) then { expresión1; expresión2; … expresión n; } else{ expresión m;

JavaScript – Control de Flujo- Condicionales- IF Ejemplo (1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var ideal; var estatura; var peso; var sexo; estatura=prompt("Introduzca su estatura en cm (P.EJ: 175)", ""); peso=prompt("Introduzca su peso en Kg (P.EJ: 83)", ""); sexo=prompt("Introduzca su sexo (Hombre o Mujer)", ""); if (sexo == "Hombre") //si es hombre ideal = estatura - 100; else //si es Mujer ideal = estatura - 110;

if (peso < ideal) //si el peso real es más bajo que el ideal alert("Está usted bastante delgado"); else //sino aún hay otras dos posibilidades { if (peso == ideal) //en su peso alert("Su peso actual es el idóneo"); else alert("Sufre usted cierto sobrepeso"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Control de Flujo –Condicionales Switch
switch (variable) { case valor1: expresion1; expresion2; … break; case valor2: case valor3: case default: }

JavaScript – Control de Flujo –Condicionales-Switch Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var respuesta; respuesta=prompt("Introduzca su idioma (Español, Inglés, Francés, Italiano)", ""); switch (respuesta) { case "Español": alert("Buenos días"); break; case "Francés": alert("Bon jour"); case "Inglés": alert("Good morning");

JavaScript – Control de Flujo –Condicionales-Switch Ejemplo
case "Italiano": alert("Bon jorno"); break; default: alert("Ha introducido mal el idioma"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Control de Flujo Bucles
For While Do-while 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> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Control de Flujo –Bucles While
while(condicion) { expresión1; expresión2; … expresiónn; }

JavaScript – Control de Flujo –Bucles-While Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Control de Flujo –Bucles Do-while
expresión1; expresión2; … expresiónn; }while (condicion);

JavaScript – Control de Flujo – Bucles - Do While Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Control de Flujo – Bucles Break
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript Matrices … [0] [1] [2] [3] [9] [10] Tetrabrik leche 1L
Producto [ ]

JavaScript – Matrices Declaración
var producto = new Array(); var producto = new Array(5); var producto = new Array(”producto1”,”producto2”, …);

JavaScript – Matrices Ejemplo(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(10); for(i=0; i<=9; i++) matriz[i] = i ; alert(matriz); </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices Tablas
Producto [ ][ ] [0][1] [0][2] … Tetrabrik leche 1L Lata Tomate Champú 1L Harina 1K Aceite 1L [0][0] 185 unidades 432 unidades 127 unidades 472 unidades 687 unidades [1][0] … 1 €/unidad 2 €/unidad 1,5 €/unidad 0,5 €/unidad 3 €/unidad [2][0] … [2][1] [2][2]

JavaScript – Matrices - Tablas Declaración
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices El objeto Array
Los array son objetos Tiene atributos o propiedades length Tiene métodos join() reverse() sort() push() pop() shift() unshift() slice() concat()

JavaScript – Matrices – El objeto Array El atributo length
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método join()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método reverse()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método sort()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método push()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método pop()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método unshift()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método shift()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método slice()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Matrices – El objeto Array El método concat()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

Funciones de JavaScript:
JavaScript Funciones Funciones de JavaScript: alert() prompt() setTimeout confirm() … Funciones de Usuario

JavaScript – Funciones Funciones de Usuario(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz1=new Array(0,1,2,3,4,5,6,7,8,9); var matriz2=new Array(2,4,6,8,10); var matriz3=new Array(1,3,6,9,12,15); var media; var i; //media de la primera matriz media=0; for(i=0;i<matriz1.length;i++) media=media+matriz1[i]; media=media/matriz1.length; alert(media); //media de la segunda matriz for(i=0;i<matriz2.length;i++) media=media+matriz2[i]; media=media/matriz2.length;

//media de la tercera matriz media=0; for(i=0;i<matriz3.length;i++) media=media+matriz3[i]; media=media/matriz3.length; alert(media); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Funciones 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> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – Funciones - Funciones de Usuario Argumentos variables(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

Almacenar Información del usuario Activarlas en el navegador
JavaScript Cookies Almacenar Información del usuario Activarlas en el navegador Recomendaciones de Uso

JavaScript – Cookies Manejo básico
Guardar cookie document.cookie = “nombre=valor”; Ej: document.cookie = “usuario=sergio jimenez celorrio”; Recuperar cookie var variable= document.cookie; Var posIgual=variableCookie.indexOf(“=”); Var valorcoockie.substring(posIgual+1);

JavaScript – Cookies Manejo avanzado(1)
GuardarCookieVar() ValorCookieVar() EliminarCookieVar()

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- // // guardarCookie // function guardarCookie(nombre,valor,caducidad) { if(caducidad) var c=new Date(); c.setTime(c.getTime()+caducidad); document.cookie=nombre+"="+ escape(valor)+";expires="+c.toGTMString()+";"; } else document.cookie=nombre+"="+ escape(valor)+";;

// // ObtenerCookie // function obtenerCookie(nombre) { var micookie=document.cookie; var pos_ini=micookie.indexOf(nombre); if(cookie&&(pos_ini!=-1)) var pos_aux1, pos_aux2; document.cookie=nombre+"="+ escape(valor)+";expires="+c.toGTMString()+";"; pos_aux1=micookie.indexOf("=",pos_ini); if(pos_aux2!=pos_ini+nombre.length) return""; pos_aux2=micookie.indexOf(";",pos_ini)-1; if(pos_aux2==-2) pos_aux2=micookie.length; return unescape(micookie.substr(pos_aux1+1,pos_aux2)); } return "";

// // eliminarCookie // function eliminarCookie(nombre) { if(caducidad) var c=new Date(); c.setTime(c.getTime()-1); document.cookie=nombre+"=null;expires="+c.toGTMString()+";"; } else document.cookie=nombre+"="+ escape(valor)+";; //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript POO en JS ¿Qué es una clase? ¿Qué es un objeto?

JavaScript – POO en JS Creación de objetos
Definición de la clase Constructor Atributos y métodos Instanciación (Creación) de un objeto New

JavaScript – POO en JS - Creación de objetos Ejemplo(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function vehiculo(numruedas, numplazas, esmotorizado, sucometido) { this.ruedas=numruedas; this.plazas=numplazas; this.motorizado=esmotorizado; this.cometido=sucometido; } var coche = new vehiculo(4,5,true,"Transporte de personas"); var camion = new vehiculo(4,3,true,"Transporte de mercancías"); var moto = new vehiculo(2,2,true,"Transporte de personas"); var bicicleta = new vehiculo(2,1,false,"Pasear"); alert("el coche tiene "+coche.ruedas+" ruedas y "+coche.plazas+ " plazas");

//--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function vehiculo(numruedas, numplazas, esmotorizado, sucometido) { this.ruedas=numruedas; this.plazas=numplazas; this.motorizado=esmotorizado; this.cometido=sucometido; this.resumen=vehiculo_resumen; } function vehiculo_resumen() var cadena; if (this.motorizado) cadena="Tiene "+ this.ruedas+" ruedas y "+ this.plazas+" plazas, tiene motor y se usa para "+this.cometido; else cadena="Tiene "+ this.ruedas+" ruedas y "+ this.plazas+" plazas, no tiene motor y se usa para "+this.cometido; return cadena;

var coche= new vehiculo(4,5,true,"Transporte de personas"); var camion= new vehiculo(4,3,true,"Transporte de mercancías"); var moto= new vehiculo(2,2,true,"Transporte de personas"); var bicicleta= new vehiculo(2,1,false,"Pasear"); alert(coche.resumen()); alert(camion.resumen()); alert(moto.resumen()); alert(bicicleta.resumen()); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS Ejemplos de objetos
Array Atributos: length, Métodos: join(), reverse(), sort(), push(), pop(), concat(), … String Atributos: length Métodos: indexOf(), substr(), replace(),… Date Atributos: Métodos: getHours(), getMinutes() 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> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos String
JavaScript – POO en JS - Ejemplos de objetos String. El método indexOf() <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos String. El método sustr()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos String. El método replace() <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos String. Métodos toUpperCase() y toLowerCase() <HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos Math
Es una clase no instanciable

JavaScript – POO en JS - Ejemplos de objetos Math
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos Date(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS - Ejemplos de objetos Date(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS Prototype
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function mi_Date_toString(fecha) { var fecha = new Date(); var cadena = ""; //Obtengo el día de la semana var DiasSemana = new Array("Domingo", "Lunes", "Martes", "Miércoles","Jueves", "Viernes", "Sábado"); cadena += DiasSemana[fecha.getDay()]; cadena += ", " + fecha.getDate() + " de "; //Obtengo el mes del año var Meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"); cadena += Meses[fecha.getMonth()]; //añado el año cadena += " de " + fecha.getFullYear(); return cadena; }

JavaScript – POO en JS Prototype
Date.prototype.toString = mi_Date_toString; var hoy = new Date(); alert(hoy); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

JavaScript – POO en JS Ventajas de la POO
Reutilización de código Encapsulación Programas orientados a Eventos

JavaScript – POO en JS Eventos más utilizados
Descripción Objetos onLoad() Es llamado al cargar una página window onUnload() Es llamado al descargar (cerrar) una página onClick() Es llamado al pulsar con el botón izquierdo del ratón link, button, radio, checkbox, onDblClick() Es llamado al hacer doble click el botón izquierdo del ratón onMouseOver() Es llamado al pasar el ratón por encima link, area, layer onMouseOut() Es llamado al cuando el ratón ya no pasa por encima onFocus() Es llamado cuando se le da el foco al objeto Window, text, textArea, Password, link, button, radio, checkbox, form onChange() Es llamado cuando se cambia el contenido del objeto Window, text, textArea, Password, link, radio, checkbox onSelect() Es llamado cuando se selcciona el contenido del objeto text, textArea, Password onBlur() Es llamado cuando se le quita el foco al objeto

JavaScript Varios Imprimir println() Reproducir música play() stop()

DOM Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

¿Qué es DOM? ¿Para qué sirve? DOM Introducción
Estándar para la estructuración de documentos HTML ¿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

Todos los elementos de una página son objetos de la clase nodo
DOM El objeto nodo Todos los elementos de una página son objetos de la clase nodo 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

DOM – El objeto nodo 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

DOM – El objeto nodo Propiedades y Métodos(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD>

<BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </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> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </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 screen navigator window document history location
layer link button image form

DOM - Nodos Especiales screen
Atributos: width, height, availWidt, availHeight, colorDepth, updateInterval, etc Métodos Eventos

DOM - Nodos Especiales screen
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> Esta página contiene un Script </BODY> </HTML>

DOM - Nodos Especiales navigator
Atributos: appName, appVersion, etc Métodos Eventos

DOM - Nodos Especiales navigator
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> Esta página contiene un Script </BODY> </HTML>

DOM - Nodos Especiales window
Atributos Métodos moveTo(x,y), resizeTo(width,heigth), open(“URLpopup.html”,”nombrePopUp”), close(), alert(), acept(), confirm(), etc Eventos

DOM - Nodos Especiales window
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> Esta página contiene un Script </BODY> </HTML>

DOM - Nodos Especiales document
Atributos bgColor, fgColor, linkColor, vlinkColor, alinkColor, Tittle, etc Métodos write(), writeLn(), etc Eventos

DOM - Nodos Especiales document
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a onClick="ponerTitulo();">Poner título</a><br> <a onClick="ponerTexto();">Poner texto</a> </BODY> </HTML>

DOM - Nodos Especiales history
Atributos Métodos back(), forward(), etc Eventos

DOM - Nodos Especiales history
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> </HEAD> <BODY> <a href="#" onClick="window.history.back();"> Atrás </a> <br> <a href="#" onClick="window.history.forward();"> Adelante </a> </BODY> </HTML>

DOM - Nodos Especiales location
Atributos href Métodos Eventos

DOM - Nodos Especiales location
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a onClick="IraGoogle();">Google</a> </BODY> </HTML>

DOM - Nodos Especiales layer
Atributos Métodos Eventos onMouseOver(), onMouseOut()

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD>

DOM - Nodos Especiales link
Atributos Métodos Eventos onMouseClick(), onMouseOver(), onMouseOut()

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a href=" onMouseOver="dentro();">Google</a> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a href=" onMouseOver="status='Este link te lleva a google';" onClick="return advertir();"> Google </a> </BODY> </HTML>

DOM - Nodos Especiales button
Atributos Métodos Eventos onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut()

DOM - Nodos Especiales button
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </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>

DOM - Nodos Especiales image
Atributos Métodos Eventos onMouseClick(), onMouseOver(), onMouseOut()

DOM - Nodos Especiales image
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </head> <body> <img name="numeros" src="imagenes/cero.gif" onMouseOver="cambiar_imagen0();" onMouseOut="cambiar_imagen1();"> </body> </html>

DOM - Nodos Especiales form
Atributos value, etc Métodos Eventos onChange(), onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut(), etc

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </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 /> </BODY> </HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </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>

DOM - Nodos Especiales Frames
¿Debo utilizar Frames (marcos)?

Sergio Jiménez Celorrio Departamento Ingeniería Informática UC3M
CSS (Hojas de Estilo) Sergio Jiménez Celorrio Departamento Ingeniería Informática UC3M

¿Qué es CSS? ¿Para qué sirve CSS?
CSS Introducción ¿Qué es CSS? Lenguaje de definición de reglas de apariencia ¿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
La etiqueta <style> El atributo “style”

CSS - CSS en una página WEB Ejemplo (1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <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> <TITLE> Curso JS y DTHML</TITLE> </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
Tipos de selectores Selectores simples Selectores contextuales Operadores

CSS - Formato de las Reglas – Selectores simples Selector de Tipo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> TD { font-size:8px } </STYLE> </HEAD> <BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS - Formato de las Reglas - Selectores simples Selector de Clase
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorrojo { color:red } </STYLE> </HEAD> <BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH class="colorrojo"> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD class="colorrojo"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD class="colorrojo"> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS - Formato de las Reglas - Selectores simples Selector de Id
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> #celda1 { color:blue } </STYLE> </HEAD> <BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD id="celda1"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS - Formato de las Reglas - Selectores simples Selector de Universales
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> * { color:green } </STYLE> </HEAD> <BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS - Formato de las Reglas - Selectores complejos Selector de Descendientes
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <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>

CSS - Formato de las Reglas - Selectores complejos Selector de Parentesco
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <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>

CSS - Formato de las Reglas - Selectores complejos Selector de Hermanos
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <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>

CSS - Formato de las Reglas – Operadores FirstLetter
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> h1:first-letter{ color:red } </STYLE> </HEAD> <BODY> <H1>Este es el Título</H1> </p> </BODY> </HTML>

CSS - Formato de las Reglas – Operadores FirstLine
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <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>

CSS - Formato de las Reglas – Operadores Links
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> a:link{color:blue;} a:visited{color:red;} a:hover{text-decoration:none;} </STYLE> </HEAD> <BODY> <a href=" a google</a> </BODY> </HTML>

CSS Herencia de Estilos
Herencia en Cascada: Los nodos hijos heredan reglas de estilo de los nodos padres.

CSS – Herencia de Estilos Cascada(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorrojo {color:red} </STYLE> </HEAD> <BODY> <Table class="colorrojo" name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS – Herencia de Estilos Cascada(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorrojo {color:red} .colorpadre {color:inherit} </STYLE> </HEAD> <BODY class="colorrojo"> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD class="colorpadre"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS – Herencia de Estilos Anular la Cascada
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorrojo {color:red} .colorazul {color:blue} </STYLE> </HEAD> <BODY> <Table class="colorrojo" name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD class="colorazul"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS Definiendo Estilos
Tipo y color de letra Fondo Bordes y margenes Puntero del ratón Barras de scroll Posición

CSS – Definiendo Estilos Cambiando el texto
Font-family:Verdana, Arial, Courier,.. Font-size:8px,9px,10px,.. Font-Style: Normal, Italic, Oblique Font-weight: Bold, Bolder, Ligther, Normal

CSS – Definiendo Estilos Cambiando el texto
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <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>

CSS – Definiendo Estilos Cambiando el color
Color: red, blue, green, … Color: rgb(100%,0%,0%)

CSS – Definiendo Estilos Cambiando el color
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colormodificado { color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="colormodificado"> Este es un título con el texto modificado</h1> </BODY> </HTML>

CSS – Definiendo Estilos Cambiando el fondo
Background-color Background-image: fichero Background-position: top, left, center, bottom, right

CSS – Definiendo Estilos Cambiando el fondo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorfondomodificado { background-color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="colorfondomodificado"> Este es un título con el texto modificado</h1> </BODY> </HTML>

CSS – Definiendo Estilos Cambiando el borde
Border-width:1px,2px,… Border-color: red, blue,.. Border-style: solid, dashed, dotted,…

CSS – Definiendo Estilos Cambiando el borde
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .bordemodificado { border-width:2; border-color:red; border-style:dotted } </STYLE> </HEAD> <BODY> <Table class="bordemodificado" name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS – Definiendo Estilos Cambiando el puntero
Cursor: auto, crosHair, wait, hand, move, Text,…

CSS – Definiendo Estilos Cambiando el puntero
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .cursormodificado {cursor:wait} </STYLE> </HEAD> <BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr class="cursormodificado"> <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> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS – Definiendo Estilos Cambiando las barras de desplazamiento
Scrollbar-base-color: red, blue, green, cyan,… Scrollbar-face-color: red, blue, green, cyan,… Scrollbar-track-color: red, blue, green, cyan,… Scrollbar-arrow-color: red, blue, green, cyan,… Scrollbar-highlight-color: red, blue, green, cyan,… Scrollbar-3dlight-color: red, blue, green, cyan,… Scrollbar-shadow-color: red, blue, green, cyan,… Scrollbar-darkshadow-color: red, blue, green, cyan,…

CSS – Definiendo Estilos Cambiando las barras de desplazamiento
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .scrollmodificado { scrollbar-base-color:cyan; scrollbar-face-color:blue; scrollbar-track-color:yellow } </STYLE> </HEAD> <BODY class="scrollmodificado"> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Table> </BODY> </HTML>

CSS – Definiendo Estilos Cambiando la posición
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> h1.tipo1{ position:relative; left:20px; } h1.tipo2 { left:-20px; </STYLE> </HEAD> <body> <h1>Normal</h1> <h1 class="tipo1">tipo1</h1> <h1 class="tipo2">tipo2</h1> </body> </html>

CSS – Definiendo Estilos Cambiando la posición
Top Left Width Height Z-index

DHTML Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

¿Qué es DHTML? DHTML Introducción No es un lenguaje de programación
No es una aplicación Es una metodología de trabajo: DHTML = JS + DOM + CSS

DHTML Menús dinámicos(1)
<HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .boton{ background:C0C0C0; border:2px outset; } </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD>

<HEAD> <TITLE> Curso JS y DTHML</TITLE> <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 LANGUAGE="JavaScript"> <!-- function mostrarmenu(menu) { menu.style.top="-15px"

function ocultarmenu(menu) { menu.style.top="-80px" } //--> </SCRIPT> </HEAD> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)"> <a href=" /> <a href=" /><br /><hr />Buscadores<br /> </span> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="mostrarmenu(this)"> <p></p> <p> <a href=" mundo</a><br /> <a href=" Pais</a><br /><br /> </p> <hr />Periódicos<br /> </BODY> </HTML>

<HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> table{ font-size:12; background-color:#c0c0c0; } .menu { border:groove 2px; padding:3; font-family:arial; width:90; height:40; position:relative; top:-15; left:-60; </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!--

function mostrarmenu(menu) { menu.style.left="-10" } function ocultarmenu(menu) menu.style.left="-60px" //--> </SCRIPT> </HEAD>

<BODY> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)"> <table border="0" width="100%"> <tr> <td width="90%"><a href=" rowspan="2">Buscadores</td> </tr> <td><a href=" </table> </span> <br /> <table width="100%"> <td width="90%"><a href=" mundo</a></td><td rowspan="2">Periódicos</td> <td><a href=" Pais</a></td> <br/> </BODY> </HTML>

DHTML Posición del cursor(1)
<HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> #PosicionX{ background:lightblue} #PosicionY{ background:red} </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY onmousemove="PosicionCursor()"> cursor X: <span id="PosicionX"></span><br /> cursor Y: <span id="PosicionY"></span> </BODY> </HTML>

DHTML Tooltips <HTML> <HEAD>
<TITLE> Curso JS y DTHML</TITLE> <STYLE> .titulo{background:lightblue} </STYLE> <SCRIPT LANGUAGE="JavaScript">  </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( ); } </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var interval; startPosition=0; topPosition=100; endPosition=100; speed=50;

DHTML Scroll de Texto function scroll(){ if (startPosition!=200) {
startPosition=startPosition+1 topPosition=topPosition-1 document.getElementById('display').style.clip="rect(" + (startPosition + 1) + " 100 " + (startPosition + endPosition) + " 0)" document.getElementById('display').style.top=topPosition interval=setTimeout("scroll()",speed) } else startPosition=0; topPosition=100; endPosition=100; interval=setTimeout("scroll()",speed);

DHTML Scroll de Texto function pararTimeout(){ clearTimeout(interval)
} //--> </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>
<TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </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
<HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <body onload="ponerTimer();" onunload="quitarTimer();"> <img id='imagen' src="imagenes/cero.gif" width="50" height="50" /> </body> </html>

DHTML Drag & drop <HTML> <HEAD>
<TITLE> Curso JS y DTHML</TITLE> <style> img{position:relative;} </style> <SCRIPT LANGUAGE="JavaScript"> <!-- mouseover=true function coordinates(){ if (!moveMe) return if (event.srcElement.id=="moveMe") { pleft=document.getElementById('moveMe').style.pixelLeft ptop=document.getElementById('moveMe').style.pixelTop xcoor=event.clientX ycoor=event.clientY document.onmousemove=moveImage } function mouseup(){ mouseover=false

DHTML Drag & drop function moveImage(){
if (mouseover&&event.button==1) { document.getElementById('moveMe').style.pixelLeft=pleft+event.clientX-xcoor document.getElementById('moveMe').style.pixelTop=ptop+event.clientY-ycoor return false } document.onmousedown=coordinates document.onmouseup=mouseup //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <body> <img id="moveMe" src="imagenes/cero.gif" width="50" height="50"> </body> </html>

DHTML Transiciones <meta http-equiv="Page-Enter" content="blendtrans(duration=3.0)">

PROYECTOS DHTML Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

Proyectos DHTML Conveniencia del DHTML
Tecnologías complementarias y compatibles Flash Applets Java PHP, ASP, JSP Uso de CSS y DOM con estas tecnologías o con otros lenguajes de “script”

DHTML Proyectos - Consejos
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 Realizar las pruebas en distintas plataformas Distintos modelos de navegadores Distintos sistemas operativos Distintos ordenadores Cuanto más básico sea el código más compatibilidad Coockies sólo cuando sean realmente necesarias 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 Manual de Referencia JavaScript
Manual de Referencia DOM Manual de Referencia CSS

Webs con Ejemplos de código

CURSO DE JAVASCRIPT Y DHTML

Similar presentations

Presentation on theme: "CURSO DE JAVASCRIPT Y DHTML"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

CURSO DE JAVASCRIPT Y DHTML

Similar presentations

Presentation on theme: "CURSO DE JAVASCRIPT Y DHTML"— Presentation transcript:

Similar presentations

About project

Feedback