Presentation is loading. Please wait.

Presentation is loading. Please wait.

CURSO DE JAVASCRIPT Y DHTML

Similar presentations


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

1 CURSO DE JAVASCRIPT Y DHTML
Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M

2 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

3 CURSO DE JAVASCRIPT Y DHTML Estructura del Curso
Introducción JavaScript el DOM y las Hojas de Estilo (CSS) DHTML Proyectos DHTML

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

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

6 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

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

8 JavaScript Herramientas de Trabajo
Editores de Texto Plano NotePad EditPlus Editores de JS Profesionales DreamWeaver Antechinus

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

10 JavaScript JavaScrit en una página WEB(2)
<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>

11 JavaScript JavaScrit en una página WEB(3)
<HTML> <HEAD> <TITLE>Mi primer Script</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("¡Hola JavaScript!"); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene mi primer script </P> </BODY> </HTML>

12 JavaScript Detección de errores
Cambiar alert por Alert

13 JavaScript Variables Declaración Asignación

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

15 JavaScript – Variables Declaración y Asignación (2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var v1=10; // declaración y asignación alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

16 JavaScript – Variables Declaración y Asignación (3)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var v1, v2; // declarar más de una variable v1=10; v2=20; alert(v1); alert(v2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

17 JavaScript – Variables Declaración y Asignación(4)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- v1=10; // declaración implícita alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

18 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

19 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

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

21 JavaScript – Variables –Tipos de Variables - Cadenas Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var producto, marca, micadena; producto="Brick Leche 1L"; // asignación marca='Pascual'; micadena=producto+", "+marca; // concatenación alert(micadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

22 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

23 JavaScript – Variables –Tipos de Variables - Cadenas Secuencias de Escape
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var producto, marca, micadena; producto="Brick Leche 1L"; marca='\"Pascual\"'; //Escape de las comillas micadena=producto+"\n "+marca; //Escape del retorno de carro alert(micadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

25 JavaScript – Variables –Tipos de Variables - Números Asignación
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var numero1, numero2, numero3, numero4, numero5; numero1=10; // entero numero2=10.0; // real numero3=1E1; // notación científica numero4=0xA; // hexadecimal numero5=012; // octal alert(numero1+"\n"+numero2+"\n"+numero3+"\n"+numero4+"\n"+numero5); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

27 JavaScript – Variables –Tipos de Variables- Números Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var precio_leche, precio_croisant, precio_desayuno1, precio_desayuno2; precio_leche = 0.65; precio_croisant =0.85; precio_desayuno1=precio_leche +precio_croisant; precio_desayuno2=0; // estas 3 líneas son equivalentes a la anterior precio_desayuno2+= precio_leche; precio_desayuno2+= precio_croisant; alert("El precio del desayuno es: "+precio_desayuno1+"\n"+"El precio del desayuno es: "+precio_desayuno2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

28 JavaScript – Variables –Tipos de Variables- Números NaN e Infinity
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var numero1, numero2; numero1="hola" numero1=numero1*3; // not a number alert("valor de numero1 "+numero1); numero2=100/0; // Infinity alert("valor de numero2 "+numero2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

30 JavaScript – Variables –Tipos de Variables – Booleanos Ejemplo Comparaciones
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var condicion1, condicion2, condicion3; condicion1= true; condicion2= (3>5); condicion3= (3==3); alert("condicion1 vale: "+condicion1+"\ncondicion2 vale: "+condicion2+"\ncondicion3 vale: "+condicion3); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

31 JavaScript – Variables –Tipos de Variables – Booleanos Ejemplo Operadores Lógicos
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var verdadero,falso; verdadero=true; falso=false; alert("verdadero AND falso: "+ (verdadero&&falso)); // falso alert("verdadero OR falso: "+ (verdadero||falso)); // verdadero alert("NOT verdadero: "+ (!verdadero)); // falso //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

32 JavaScript – Variables –Tipos de Variables Variables Nulas
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var nueva_variable; nueva_variable=null; alert(nueva_variable); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

33 JavaScript – Variables – Tipos de Variables Variables Indefinidas
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var nueva_variable; alert(nueva_variable); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

35 JavaScript – Variables – Tipos de Variables Obtener el tipo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var variable1,variable2,variable3,variable4,variable5; variable1="diez"; // cadena variable2=10; // numero variable3=true; // booleano variable4=null; // nula alert("la variable1 es de tipo: "+typeof(variable1)+"\n"+"la variable2 es de tipo: "+typeof(variable2)+"\n"+"la variable3 es de tipo: "+typeof(variable3)+"\n"+"la variable4 es de tipo: "+typeof(variable4)+"\n"+"la variable5 es de tipo: "+typeof(variable5)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

37 JavaScript – Variables –Tipos de Variables Conversión implicita(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="cadena"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=1234; // conversión implícita //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

38 JavaScript – Variables –Tipos de Variables Conversión implicita(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="1234"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=mivariable*1; //Conversión Implícita //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

39 JavaScript – Variables –Tipos de Variables Conversión implicita(3)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable=1234; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=mivariable+""; //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

40 JavaScript – Variables –Tipos de Variables Conversión explícita(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="1234"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=parseInt(mivariable); //Conversión Explícita //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

41 JavaScript – Variables –Tipos de Variables Conversión explícita(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable="1234.5"; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=parseFloat(mivariable); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

42 JavaScript – Variables –Tipos de Variables Conversión explícita(3)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var mivariable; mivariable=1234.5; alert("mi variable es de tipo: "+typeof(mivariable)); mivariable=mivariable.toString(); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

43 JavaScript – Control de Flujo Condicionales
IF Switch

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

45 JavaScript – Control de Flujo- Condicionales- IF Ejemplo (1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var clave = "cursoUC3M"; var respuesta; respuesta=prompt("Introduzca la clave", ""); if (respuesta == clave) { alert("¡Hola usuario autorizado!"); }else{ alert("¡usuario no autorizado!"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

46 JavaScript – Control de Flujo- Condicionales- IF Ejemplo (2)
<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;

47 JavaScript – Control de Flujo- Condicionales- IF Ejemplo (2)
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>

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

49 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");

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

51 JavaScript – Control de Flujo Bucles
For While Do-while Break

52 JavaScript – Control de Flujo –Bucles For
for(expresión inicial; condición; expresión iteración) { expresión1; expresión2; expresiónn; }

53 JavaScript – Control de Flujo –Bucles – For Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena = ""; for(i=0; i<=9; i++) { cadena = cadena + i + " "; } cadena += "\n"; alert(cadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

55 JavaScript – Control de Flujo –Bucles-While Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena = ""; var i=0; while(i<10){ cadena = cadena + i + " "; i++; } cadena += "\n"; alert(cadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

57 JavaScript – Control de Flujo – Bucles - Do While Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena = ""; var i=0; do{ cadena = cadena + i + " "; i++; }while (i<10) cadena += "\n"; alert(cadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

58 JavaScript – Control de Flujo – Bucles Break
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena = ""; var i=0; while(true){ if(i==10) break; cadena = cadena + i + " "; i++; } cadena += "\n"; alert(cadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

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

61 JavaScript – Matrices Ejemplo(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var producto = new Array(); producto[0]= "Tetrabrick Leche 1L Pascual"; producto[1]= "Lata Tomate 1Kg Orlando"; producto[2]= "Pack 4 Yogures Danone"; alert(producto); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

62 JavaScript – Matrices Ejemplo(2)
<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>

63 JavaScript – Matrices Ejemplo(3)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var producto = new Array("Tetrabrick Leche 1L Pascual","Lata Tomate 1Kg Orlando","Pack 4 Yogures Danone"); alert(producto); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

65 JavaScript – Matrices - Tablas Declaración
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(5); var i,j; for(i=0;i<5;i++) { matriz[i]=new Array(5); for(j=0;j<5;j++) matriz[i][j]="["+i+","+j+"]"; } alert(matriz); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

66 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()

67 JavaScript – Matrices – El objeto Array El atributo length
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); alert(matriz); alert("tiene longitud: "+matriz.length); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

68 JavaScript – Matrices – El objeto Array El método join()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); alert(matriz.join("*")); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

69 JavaScript – Matrices – El objeto Array El método reverse()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); alert(matriz.reverse()); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

70 JavaScript – Matrices – El objeto Array El método sort()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(5,1,3,6,8,2,9,0,4,7); alert(matriz.sort()); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

71 JavaScript – Matrices – El objeto Array El método push()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); matriz.push(10); alert(matriz); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

72 JavaScript – Matrices – El objeto Array El método pop()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); matriz.pop(); alert(matriz); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

73 JavaScript – Matrices – El objeto Array El método unshift()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); matriz.unshift(10); alert(matriz); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

74 JavaScript – Matrices – El objeto Array El método shift()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz= new Array(0,1,2,3,4,5,6,7,8,9); matriz.shift(); alert(matriz); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

75 JavaScript – Matrices – El objeto Array El método slice()
<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=matriz1.slice(2,6); alert(matriz2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

76 JavaScript – Matrices – El objeto Array El método concat()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var matriz1= new Array(0,1,2,3,4); var matriz2= new Array(5,6,7,8,9); var matriz3=matriz1.concat(matriz2); alert(matriz3); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

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

79 JavaScript – Funciones Funciones de Usuario(1)
//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>

80 JavaScript – Funciones Funciones de Usuario(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function media(matriz) { var i,suma=0; for(i=0;i<matriz.length;i++) suma=suma+matriz[i]; return(suma/matriz.length); } 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); //media de la primera matriz alert(media(matriz1)); alert(media(matriz2)); alert(media(matriz3)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

81 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; }

82 JavaScript – Funciones - Funciones de Usuario Argumentos variables(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function suma(v1,v2) { return(v1+v2); } alert(suma(5,6)); alert(suma(5)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

83 JavaScript – Funciones - Funciones de Usuario Argumentos variables(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function suma(v1,v2) { if (v1==null) v1 =0; if (v2==null) v2 =0; return(v1+v2); } alert(suma(5,6)); alert(suma(5)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

85 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);

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

87 JavaScript – Cookies Manejo avanzado(2)
<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)+";;

88 JavaScript – Cookies Manejo avanzado(3)
// // 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 "";

89 JavaScript – Cookies Manejo avanzado(4)
// // 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>

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

91 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

92 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");

93 JavaScript – POO en JS - Creación de objetos Ejemplo(1)
//--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

94 JavaScript – POO en JS - Creación de objetos Ejemplo(2)
<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;

95 JavaScript – POO en JS - Creación de objetos Ejemplo(2)
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>

96 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(),…

97 JavaScript – POO en JS - Ejemplos de objetos String. El atributo length
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena; cadena = new String("hola mundo"); alert("la longitud de: " +cadena+" es: "+cadena.length); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

98 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"> <!-- var cadena; cadena ="hola mundo"; alert("la primera m en : " +cadena+" aparece en la posición: "+cadena.indexOf("m")); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

99 JavaScript – POO en JS - Ejemplos de objetos String. El método sustr()
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena; cadena ="hola mundo"; alert(cadena.substr(0,5)); alert(cadena.substr(5,5)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

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

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

103 JavaScript – POO en JS - Ejemplos de objetos Math
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- alert(Math.PI); // alert(Math.E); // alert(Math.abs(-10)); // valor absoluto alert(Math.pow(2,3)); // 2 al cubo alert(Math.random()); // número aleatorio entre [0 y 1) alert(Math.sqrt(4)); // raíz cuadrada alert(Math.round(4.7)); // redondeo de un número real alert(Math.log(Math.E)); // logaritmo natural //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

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

105 JavaScript – POO en JS - Ejemplos de objetos Date(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var d1 = new Date(2001,12,25,5,15,0,0); var d2 = new Date(2001,12,25); alert(d1); alert(d2); alert("Son las "+d1.getHours()+":"+d1.getMinutes()); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY> </HTML>

106 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; }

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

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

109 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

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

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

112 ¿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.

113 DOM El modelo de objetos DOM1
window frames location navigator history document screen applets body form images links

114 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

115 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

116 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

117 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

118 DOM – El objeto nodo Propiedades y Métodos(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function cambiarValorCelda() { if(!document.getElementById) return; var nodoTabla=document.getElementById("tabla1"); var texto= document.form1.textoNuevo.value; nodoTabla.childNodes[0].childNodes[0].childNodes[0].innerHTML=texto; } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD>

119 DOM – El objeto nodo Propiedades y Métodos(1)
<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>

120 DOM – El objeto nodo Propiedades y Métodos(2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function AnadirNodo(etiqueta) { if(!document.getElementById) return; var elemento = document.createElement(etiqueta); var texto= document.form1.textoNuevo.value; elemento.innerHTML=texto; var donde=document.getElementById("aqui"); donde.appendChild(elemento); } function eliminarNodo() donde.removeChild(donde.lastChild); //-->

121 DOM – El objeto nodo Propiedades y Métodos(2)
</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>

122 DOM Nodos Especiales screen navigator window document history location
layer link button image form

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

124 DOM - Nodos Especiales screen
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena; cadena="Datos del monitor:"+"\nAnchura "+screen.width+"\nAltura "+screen.Height; cadena+="\nAnchura disponible "+screen.availWidth+"\nAltura disponible "+screen.availHeight; cadena+="\nProfundidad de color "+screen.colorDepth+"\nFrecuencia Refresco "+screen.updateInterval; alert(cadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> Esta página contiene un Script </BODY> </HTML>

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

126 DOM - Nodos Especiales navigator
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var cadena; cadena="Nombre del navegador:"+navigator.appName; cadena="Version del navegador:"+navigator.appVersion; alert(cadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> Esta página contiene un Script </BODY> </HTML>

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

128 DOM - Nodos Especiales window
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- window.moveTo(20,20); window.resizeTo(200,500); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> Esta página contiene un Script </BODY> </HTML>

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

130 DOM - Nodos Especiales document
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function ponerTitulo() { document.writeln("<H1>Título</H1>"); } function ponerTexto() document.writeln("Texto"); //--> </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>

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

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

133 DOM - Nodos Especiales location
Atributos href Métodos Eventos

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

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

136 DOM - Nodos Especiales layer
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function EnCapa1() { alert("Estas sobre la capa1"); } function EnCapa2() alert("Estas sobre la capa2"); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD>

137 DOM - Nodos Especiales layer
<BODY> <div onMouseOver="EnCapa1();"> Capa 1<br> </div> <div onMouseOver="EnCapa2();"> Capa 2<br> </BODY> </HTML>

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

139 DOM - Nodos Especiales link
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function dentro() { alert("Este link te lleva a Google"); return true; } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a href=" onMouseOver="dentro();">Google</a> </BODY> </HTML>

140 DOM - Nodos Especiales link
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function advertir() { var Mensaje = "Este Link le lleva a Google"; Mensaje += "¿Quiere entrar?"; return confirm(Mensaje); } //--> </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>

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

142 DOM - Nodos Especiales button
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function cambiarColor(color){ document.getElementById('miboton').style.background=color } //--> </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>

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

144 DOM - Nodos Especiales image
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function cambiar_imagen0(){ document.images["numeros"].src = "imagenes/cero.gif"; document.images["numeros"].width = 50; document.images["numeros"].height = 50; } function cambiar_imagen1(){ document.images["numeros"].src = "imagenes/uno.gif"; //--> </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>

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

146 DOM - Nodos Especiales form
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function copiaInfo() { document.myForm2.option.value=document.myForm1.option.value } //--> </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>

147 DOM - Nodos Especiales form
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function ElegirRefresco() { var preferido=document.forms[0].refescos.value; alert("Tu refresco preferido es " + preferido); } //--> </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>

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

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

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

151 CSS Formato Regla selector[:operador] { atributo1:valor1; atributo2:valor2; atributon-1:valorn-1; atributon:valorn }

152 CSS CSS en una página WEB
La etiqueta <style> El atributo “style”

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

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

155 CSS Formato de las Reglas
Tipos de selectores Selectores simples Selectores contextuales Operadores

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

171 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

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

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

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

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

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

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

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

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

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

181 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,…

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

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

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

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

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

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

188 DHTML Menús dinámicos(1)
<BODY> <table width="80"> <tr> <td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a href=" </tr> <td class="boton"onmouseover="dentro(this)" onmouseout="fuera(this)"><a href=" <td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a href=" <td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a href=" </BODY> </HTML>

189 DHTML Menús dinámicos(2)
<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"

190 DHTML Menús dinámicos(2)
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>

191 DHTML Menús dinámicos(3)
<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"> <!--

192 DHTML Menús dinámicos(3)
function mostrarmenu(menu) { menu.style.left="-10" } function ocultarmenu(menu) menu.style.left="-60px" //--> </SCRIPT> </HEAD>

193 DHTML Menús dinámicos(3)
<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>

194 DHTML Posición del cursor(1)
<HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> #PosicionX{ background:lightblue} #PosicionY{ background:red} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function PosicionCursor() { document.getElementById("PosicionX").innerHTML=event.clientX document.getElementById("PosicionY").innerHTML=event.clientY } //--> </SCRIPT> </HEAD> <BODY onmousemove="PosicionCursor()"> cursor X: <span id="PosicionX"></span><br /> cursor Y: <span id="PosicionY"></span> </BODY> </HTML>

195 DHTML Tooltips <HTML> <HEAD>
<TITLE> Curso JS y DTHML</TITLE> <STYLE> .titulo{background:lightblue} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function moverTooltip() { document.getElementById('tooltip').style.visibility="visible" document.getElementById('tooltip').style.position="absolute" document.getElementById('tooltip').style.left=event.clientX+10 document.getElementById('tooltip').style.top=event.clientY } //--> </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>

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

197 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);

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

199 DHTML Pop Up <HTML> <HEAD>
<TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var ventana_publicidad; function open_window(){ ventana_publicidad=window.open("publicidad.html"); } function close_window(){ if (!ventana_publicidad.closed){ if (confirm("¿Realmente desea cerrar la ventana?")){ ventana_publicidad.close(); else alert('La publicidad ya se ha ido.'); //--> </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>

200 DHTML Imágenes en movimiento
<HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var i=1; var timer; function ponerTimer(){ document.getElementById('imagen').style.position="relative"; document.getElementById('imagen').style.left=+i; i++; timer=setTimeout("ponerTimer()",10); } function quitarTimer(){ clearTimeout(timer) //--> </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>

201 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

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

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

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

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

206 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

207 Webs de referencia Manual de Referencia JavaScript
Manual de Referencia DOM Manual de Referencia CSS

208 Webs con Ejemplos de código


Download ppt "CURSO DE JAVASCRIPT Y DHTML"

Similar presentations


Ads by Google