Cur So Javascript D HTML

CURSO DE JAVASCRIPT Y DHTML
Sergio Jimnez Celorrio Departamento Ingeniera Informtica - UC3M
Para qu nos sirve este curso?

Dotar a las pginas web de Inteligencia

Almacenar y recuperar informacin del usuario Comprobar formularios Captar Eventos del ratn y del teclado Realizar Pequeas animaciones Crear sitios WEB donde todas las pginas mantengan una apariencia comn
Aumentar interaccin del usuario con la WEB

Definir reglas de estilo
Estructura del Curso

Introduccin JavaScript el DOM y las Hojas de Estilo (CSS) DHTML Proyectos DHTML
Introduccin
Introduccin
Qu es JavaScript?
No es Java Es un lenguaje de programacin de Scripts en el Client-Side Otros VBScript
Introduccin
Qu es DHTML?
No es un lenguaje de programacin No es una aplicacin Es una metodologa de trabajo:
DHTML = JS + DOM + CSS

JS (JavaScript) lenguaje de programacin de Scripts DOM (Documet Object Model) estructura de los objetos de los objetos de un documento WEB CSS (Hojas de Estilo) lenguaje de definicin del aspecto de los objetos de un documento WEB
JAVASCRIPT
JavaScript
Herramientas de Trabajo
Editores de Texto Plano

NotePad EditPlus DreamWeaver Antechinus
Editores de JS Profesionales

JavaScript
JavaScrit en una pgina WEB(1)

<HTML> <HEAD> <TITLE> Mi primer Script </TITLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </HEAD> <BODY> <P> Este pgina contiene un script vaco </P> </BODY> </HTML>
JavaScript

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

<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 pgina contiene mi primer script </P> </BODY> </HTML>
JavaScript
Deteccin de errores
Cambiar alert por Alert
JavaScript
Variables
Declaracin Asignacin
JavaScript Variables
Declaracin e Asignacin(1)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var v1; // declaracin v1=10; // asignacin alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
Declaracin y Asignacin (2)

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var v1=10; // declaracin y asignacin alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
Declaracin y Asignacin (3)

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var v1, v2; // declarar ms de una variable v1=10; v2=20; alert(v1); alert(v2); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
Declaracin y Asignacin(4)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-v1=10; // declaracin implcita alert(v1); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
JavaScript- Variables
Nombres de las variables

Nombres Incorrectos

No pueden empezar por nmeros Pueden contener:

Numeros, ej var total2004; Letras, ej var total; El caracter _ (underscore ) ej var total_2004;
No pueden contener:
Smbolos: ; , . Letras acentuadas ni caracteres locales tipo , Espacios en blanco Palabras reservadas
Tipos de Variables
Cadenas:
var producto= Tetrabrick Leche 1L; Var precio=1; Var precio= 0.65; var enstock=true; var producto=null;
Nmeros

Booleanos
Nulas
Indefinidas
JavaScript Variables Tipos de Variables
Cadenas
Asignacin
Se guarda entre Comillas simples o dobles Concatenacin +
Operaciones
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"; // asignacin marca='Pascual'; micadena=producto+", "+marca; // concatenacin alert(micadena); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
Secuencias de Escape
Escape \\texto de prueba texto \de\ pueba texto \de\ prueba Secuencia
\n \f \r \t \b
Efecto texto de prueba texto de prueba texto de prueba Efecto

Salto de lnea Salto de pgina Retorno de carro Tabulacin Retroceder un carcter
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 pgina contiene un script </P> </BODY> </HTML>
Nmeros
Asignacin Operaciones Infinito y Nan
JavaScript Variables Tipos de Variables - Nmeros
Asignacin
<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; // notacin cientfica 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 pgina contiene un script </P> </BODY> </HTML>
JavaScript Variables Tipos de Variables- Nmeros
Operaciones
Suma +, += Resta , -= Multiplicacin *, *= Divisin /, /= Incremento ++ Decremento
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 lneas 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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
Booleanos
Asignacin Operadores
Comparadores
< >= < <= == !==
Operadores lgicos
AND: && OR: || NOT: !
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 pgina contiene un script </P> </BODY> </HTML>
JavaScript Variables Tipos de Variables Booleanos
Ejemplo Operadores Lgicos

<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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
Tipos de Variables
Obtener el tipo de una variable
typeof(variable) conversin implcita conversin explcita (Recomendable)
Cambio de tipo :

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 pgina contiene un script </P> </BODY> </HTML>
Cambios de tipos
Obtener el tipo de una variable Cambio de tipo :

conversin implcita conversin explcita (Recomendable)
Conversin 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; // conversin implcita alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
<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; //Conversin Implcita alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
<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+""; alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
Conversin explcita(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); //Conversin Explcita alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
<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); alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
<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(); alert("mi variable es de tipo: "+typeof(mivariable)); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
JavaScript Control de Flujo
Condicionales
IF Switch
JavaScript Control de Flujo- Condicionales
IF
If (condicin) then { expresin1; expresin2; expresin n; } else{ expresin1; expresin2; expresin m; }
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 pgina contiene un script </P> </BODY> </HTML>
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;
Ejemplo (2)
if (peso < ideal) //si el peso real es ms bajo que el ideal alert("Est usted bastante delgado"); else //sino an hay otras dos posibilidades { if (peso == ideal) //en su peso alert("Su peso actual es el idneo"); else alert("Sufre usted cierto sobrepeso"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
JavaScript Control de Flujo Condicionales
Switch
switch (variable) { case valor1: expresion1; expresion2; break; case valor2: expresion1; expresion2; break; case valor3: expresion1; expresion2; break; case default: expresion1; expresion2; }
JavaScript Control de Flujo Condicionales-Switch
Ejemplo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-var respuesta; respuesta=prompt("Introduzca su idioma (Espaol, Ingls, Francs, Italiano)", ""); switch (respuesta) { case "Espaol": alert("Buenos das"); break; case "Francs": alert("Bon jour"); break; case "Ingls": alert("Good morning"); break;
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 pgina contiene un script </P> </BODY> </HTML>
JavaScript Control de Flujo
Bucles
For While Do-while Break
JavaScript Control de Flujo Bucles
For
for(expresin inicial; condicin; expresin iteracin) { expresin1; expresin2; expresinn; }
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 pgina contiene un script </P> </BODY> </HTML>
While
while(condicion) { expresin1; expresin2; expresinn; }
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 pgina contiene un script </P> </BODY> </HTML>
Do-while
do { expresin1; expresin2; expresinn; }while (condicion);
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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
JavaScript
Matrices
Tetrabrik leche 1L
Tetrabrik leche 1L
Tetrabrik leche 1L
Tetrabrik leche 1L
Tetrabrik leche 1L
Tetrabrik leche 1L
[0]
[1]
[2]
[3]
[9]
[10]
Producto [ ]
JavaScript Matrices
Declaracin
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"> <!-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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
JavaScript Matrices
Tablas
Producto [ ][ ]
[0][1] [0][0]
Tetrabrik leche 1L Lata Tomate
[0][2]
Champ 1L
Harina 1K Aceite 1L
[1][0]
185 432 127 unidades unidades unidades
472 687 unidades unidades
[2][0]
1 /unidad
2 /unidad
1,5 /unidad
0,5 /unidad
3 /unidad
[2][1]
[2][2]
JavaScript Matrices - Tablas
Declaracin
<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 pgina contiene un script </P> </BODY> </HTML>
JavaScript Matrices
El objeto Array
Los array son objetos Tiene atributos o propiedades
length
join() reverse() sort() push() pop() shift() unshift() slice() concat()
Tiene mtodos
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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
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 media=0; for(i=0;i<matriz2.length;i++) media=media+matriz2[i]; media=media/matriz2.length; alert(media);
//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 pgina contiene un script </P> </BODY> </HTML>
<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 pgina contiene un script </P> </BODY> </HTML>
Funciones de Usuario
function nombre_funcin(arg1, arg2, arg3,) { var valor; expresin 1; expresin 2; expresin n; return valor; }
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 pgina 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"> <!-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 pgina contiene un script </P> </BODY> </HTML>
JavaScript
Cookies
Almacenar Informacin del usuario Activarlas en el navegador Recomendaciones de Uso
JavaScript Cookies
Manejo bsico
Guardar cookie

document.cookie = nombre=valor; Ej: document.cookie = usuario=sergio jimenez celorrio; var variable= document.cookie; Var posIgual=variableCookie.indexOf(=); Var valorcoockie.substring(posIgual+1);
Recuperar cookie

JavaScript Cookies
Manejo avanzado(1)
GuardarCookieVar() ValorCookieVar() EliminarCookieVar()
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)+";; }
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 ""; }
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 pgina contiene un script </P> </BODY> </HTML>
JavaScript
POO en JS
Qu es una clase? Qu es un objeto?
JavaScript POO en JS
Creacin de objetos
Definicin de la clase
Constructor
Atributos y mtodos
Instanciacin (Creacin) de un objeto
New
JavaScript POO en JS - Creacin 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 mercancas"); 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");
Ejemplo(1)
//--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
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; }
Ejemplo(2)
var coche= new vehiculo(4,5,true,"Transporte de personas"); var camion= new vehiculo(4,3,true,"Transporte de mercancas"); 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 pgina contiene un script </P> </BODY> </HTML>
Ejemplos de objetos
Array

Atributos: length, Mtodos: join(), reverse(), sort(), push(), pop(), concat(), Atributos: length Mtodos: indexOf(), substr(), replace(), Atributos: Mtodos: getHours(), getMinutes() Atributos: Math.PI, Math.E, Mtodos: abs(), pow(), random(), sqrt(), round() log(),
String Date Math
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 pgina contiene un script </P> </BODY> </HTML>
String. El mtodo 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 posicin: "+cadena.indexOf("m")); //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
String. El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
String. El mtodo 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 pgina contiene un script </P> </BODY> </HTML>
String. Mtodos 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 pgina contiene un script </P> </BODY> </HTML>
Math
Es una clase no instanciable
Math
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-alert(Math.PI); // 3.141592653589793 alert(Math.E); // 2.718281828459045 alert(Math.abs(-10)); // valor absoluto alert(Math.pow(2,3)); // 2 al cubo alert(Math.random()); // nmero aleatorio entre [0 y 1) alert(Math.sqrt(4)); // raz cuadrada alert(Math.round(4.7)); // redondeo de un nmero real alert(Math.log(Math.E)); // logaritmo natural //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
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 pgina contiene un script </P> </BODY> </HTML>
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 da de la semana var DiasSemana = new Array("Domingo", "Lunes", "Martes", "Mircoles","Jueves", "Viernes", "Sbado"); cadena += DiasSemana[fecha.getDay()]; cadena += ", " + fecha.getDate() + " de "; //Obtengo el mes del ao var Meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"); cadena += Meses[fecha.getMonth()]; //aado el ao cadena += " de " + fecha.getFullYear(); return cadena; }
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 pgina contiene un script </P> </BODY> </HTML>
Ventajas de la POO
Reutilizacin de cdigo Encapsulacin Programas orientados a Eventos
Eventos ms utilizados
Evento
onLoad() onUnload() onClick() onDblClick() onMouseOver() onMouseOut() onFocus() onChange() onSelect() onBlur()
Descripcin
Es llamado al cargar una pgina Es llamado al descargar (cerrar) una pgina Es llamado al pulsar con el botn izquierdo del ratn Es llamado al hacer doble click el botn izquierdo del ratn Es llamado al pasar el ratn por encima Es llamado al cuando el ratn ya no pasa por encima Es llamado cuando se le da el foco al objeto Es llamado cuando se cambia el contenido del objeto Es llamado cuando se selcciona el contenido del objeto Es llamado cuando se le quita el foco al objeto
Objetos
window window link, button, radio, checkbox, link, button, radio, checkbox, link, area, layer
link, area, layer Window, text, textArea, Password, link, button, radio, checkbox, form Window, text, textArea, Password, link, radio, checkbox text, textArea, Password Window, text, textArea, Password, link, button, radio, checkbox, form
JavaScript
Varios
Imprimir
println() play() stop()
Reproducir msica

DOM
DOM
Introduccin
Qu es DOM?
Estndar para la estructuracin de documentos HTML Permite acceder y modificar los diferentes objetos de una pgina WEB ya descargada.
Para qu sirve?
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 tittle Texto con el Ttulo de la pgina td dato1 td dato2 tr td dato3 body table tr td dato4 tr td dato5 td dato1
DOM
El objeto nodo
Todos los elementos de una pgina son objetos de la clase nodo Tipos de nodo

Nodo de Elemento Nodo de Texto
DOM El objeto nodo
Propiedades
ownerDocument className tagName nodeName nodeType nodeValue InnerHTML Parentnode firstChild lastChild nextSibling previousSibling
Documento actual de trabajo Origen de clase Nombre de la etiqueta Identificador del nodo Tipo de nodo (etiqueta, atributo,texto) Valor del nodo (texto en un nodo de texto) Valor del Texto entre dos nodos de elemento Nodo padre Primer nodo hijo ltimo nodo hijo Nodo hermano siguiente Nodo hermano previo
DOM El objeto nodo
Mtodos
cloneNode() Boolean hasChildNodes() appendChild() insertBefore() replaceChild() createElement() createTextNode() Node getElementById(identificador) getElementsByTagName(tagname) getAtribute() removeAtribute() setAtribute()
Copia un nodo Informa si un nodo tiene hijos o no Aade un nodo hijo Inserta un nodo hijo Reemplaza el nodo hijo indicado por otro Crea un nodo de elemento para aadirlo como hijo Crea un nodo de texto para aadirlo como hijo Obtiene un nodo mediante su identificador Obtiene un nodo o conjunto de nodos por su Etiqueta Obtiene el valor de un atributo Elimina un atributo de un nodo de elemento Da valor a un atributo de un nodo elemento
DOM El objeto nodo
Propiedades y Mtodos(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>
DOM El objeto nodo
<BODY> <Table name="tabla1" id="tabla1" border="1"> <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH> </Tr> <Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> <form name="form1" id="form1"> <input type="Text" name="textoNuevo"> <br> <input type="Button" value="Crea prrafo" onclick="cambiarValorCelda()"> </form> </BODY> </HTML>
DOM El objeto nodo
<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() { if(!document.getElementById) return; var donde=document.getElementById("aqui"); donde.removeChild(donde.lastChild); } //-->
DOM El objeto nodo
</SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <H1>Ejemplo para aadir 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 ttulo1" onclick="AnadirNodo('H1')"> <input type="Button" value="Crea ttulo2" onclick="AnadirNodo('H2')"> <input type="Button" value="Elimina Nodo" onclick="eliminarNodo()"> </form> </BODY> </HTML>
DOM
Nodos Especiales
screen navigator window document history location document layer link button image form
DOM - Nodos Especiales
screen
Atributos:
width, height, availWidt, availHeight, colorDepth, updateInterval, etc
Mtodos Eventos
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 pgina contiene un Script </BODY> </HTML>
navigator
Atributos:
appName, appVersion, etc
Mtodos Eventos
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 pgina contiene un Script </BODY> </HTML>
window
Atributos Mtodos
moveTo(x,y), resizeTo(width,heigth), open(URLpopup.html,nombrePopUp), close(), alert(), acept(), confirm(), etc
Eventos
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 pgina contiene un Script </BODY> </HTML>
document
Atributos
bgColor, fgColor, linkColor, vlinkColor, alinkColor, Tittle, etc write(), writeLn(), etc
Mtodos
Eventos
document
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function ponerTitulo() { document.writeln("<H1>Ttulo</H1>"); } function ponerTexto() { document.writeln("Texto"); } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a onClick="ponerTitulo();">Poner ttulo</a><br> <a onClick="ponerTexto();">Poner texto</a> </BODY> </HTML>
history
Atributos Mtodos
back(), forward(), etc
Eventos
history
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> </HEAD> <BODY> <a href="#" onClick="window.history.back();"> Atrs </a> <br> <a href="#" onClick="window.history.forward();"> Adelante </a> </BODY> </HTML>
location
Atributos
href
Mtodos Eventos
location
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function IraGoogle() { alert(window.location.href); window.location.href="http://www.google.com"; } //--> </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <a onClick="IraGoogle();">Google</a> </BODY> </HTML>
layer
Atributos Mtodos Eventos
onMouseOver(), onMouseOut()
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>
layer
<BODY> <div onMouseOver="EnCapa1();"> Capa 1<br> Capa 1<br> Capa 1<br> Capa 1<br> </div> <div onMouseOver="EnCapa2();"> Capa 2<br> Capa 2<br> Capa 2<br> Capa 2<br> </div> </BODY> </HTML>
link
onMouseClick(), onMouseOver(), onMouseOut()
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="http://www.google.com" onMouseOver="dentro();">Google</a> </BODY> </HTML>
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="http://www.google.com" onMouseOver="status='Este link te lleva a google';" onClick="return advertir();"> Google </a> </BODY> </HTML>
button
onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut()
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>
image
onMouseClick(), onMouseOver(), onMouseOut()
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>
form
Atributos
value, etc
Mtodos Eventos
onChange(), onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut(), etc
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 /> </form> </BODY> </HTML>
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> Cul es t refresco preferido? <select id="refescos" onchange="ElegirRefresco()"> <option value="Fanta">Fanta <option value="Coca Cola">Coca cola <option value="Tnica">Tnica </select> </form> </BODY>
Frames
Debo utilizar Frames (marcos)?
CSS (Hojas de Estilo)
Sergio Jimnez Celorrio Departamento Ingeniera Informtica UC3M
CSS
Introduccin
Qu es CSS?
Lenguaje de definicin de reglas de apariencia Para evitar repetir bloques de cdigo al intentar mantener una apariencia comn en un sitio WEB
Para qu sirve CSS?
CSS
Formato Regla
selector[:operador] { atributo1:valor1; atributo2:valor2; atributon-1:valorn-1; atributon:valorn }
CSS
CSS en una pgina WEB

La etiqueta <style> El atributo style
CSS - CSS en una pgina 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>Ttulo modificado con una hoja de estilo</H1> Resto del documento </BODY> </HTML>
CSS - CSS en una pgina WEB
Ejemplo (2)
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> </HEAD> <BODY> <H1 STYLE="font-size: 48px; color: blue; font-weight:bold"> Ttulo 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> <Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY> </HTML>
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> <Tr> <TD class="colorrojo"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD class="colorrojo"> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY> </HTML>
Selector de Id
<HTML> <HEAD> <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> <Tr> <TD id="celda1"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY> </HTML>
Selector de Universales
<HTML> <HEAD> <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> <Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY> </HTML>
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 Ttulo normal normal</H1> <DIV> <H1>Este es un Ttulo descendiente hijo de un DIV</H1> <P> <H1>Este es un Ttulo descendiente de un DIV</H1> </P> </DIV> </BODY> </HTML>
Selector de Parentesco
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> DIV >H1{ color:red } </STYLE> </HEAD> <BODY> <H1>Este es un Ttulo normal normal</H1> <DIV> <H1>Este es un Ttulo descendiente hijo de un DIV</H1> <P> <H1>Este es un Ttulo descendiente de un DIV</H1> </P> </DIV> </BODY> </HTML>
Selector de Hermanos
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> DIV + H1{ color:red } </STYLE> </HEAD> <BODY> <H1>Este es un Ttulo normal normal</H1> <DIV> <H1>Este es un Ttulo descendiente hijo de un DIV</H1> <P> <H1>Este es un Ttulo descendiente de un DIV</H1> </P> </DIV> <H1>Este es un Ttulo normal normal</H1> </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 Ttulo</H1> </p> </BODY> </HTML>
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>
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="http://wwww.google.com">Ir 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> <Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY> </HTML>
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> <Tr> <TD class="colorpadre"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY>
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> <Tr> <TD class="colorazul"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY>
CSS
Definiendo Estilos
Tipo y color de letra Fondo Bordes y margenes Puntero del ratn Barras de scroll Posicin
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
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 ttulo normal</h1> <h1 class="textomodificado"> Este es un ttulo con el texto modificado</h1> </BODY> </HTML>
Cambiando el color
Color: red, blue, green, Color: rgb(100%,0%,0%)
Cambiando el color
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colormodificado { color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un ttulo normal</h1> <h1 class="colormodificado"> Este es un ttulo con el texto modificado</h1> </BODY> </HTML>
Cambiando el fondo
Background-color Background-image: fichero Background-position: top, left, center, bottom, right
Cambiando el fondo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorfondomodificado { background-color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un ttulo normal</h1> <h1 class="colorfondomodificado"> Este es un ttulo con el texto modificado</h1> </BODY> </HTML>
Cambiando el borde
Border-width:1px,2px, Border-color: red, blue,.. Border-style: solid, dashed, dotted,
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" <Tr> <TH> Columna1 </TH><TH> Columna2 </TH><TH> </Tr> <Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> </Tr> </Table> </BODY>
id="tabla1" border="1"> Columna3 </TH><TH> Columna4 </TH>
Celda1,3 </TD><TD> Celda1,4 </TD>
Celda2,3 </TD><TD> Celda2,4 </TD>
Cambiando el puntero
Cursor: auto, crosHair, wait, hand, move, Text,
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> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY> </HTML>
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,
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> <Tr> <TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD> </Tr> <Tr> <TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD> </Tr> </Table> </BODY>
Cambiando la posicin
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> h1.tipo1{ position:relative; left:20px; } h1.tipo2 { position:relative; left:-20px; } </STYLE> </HEAD> <body> <h1>Normal</h1> <h1 class="tipo1">tipo1</h1> <h1 class="tipo2">tipo2</h1> </body> </html>
Cambiando la posicin
Top Left Width Height Z-index
DHTML
DHTML
Introduccin
Qu es DHTML?

No es un lenguaje de programacin No es una aplicacin Es una metodologa de trabajo:

DHTML = JS + DOM + CSS
DHTML
Mens dinmicos(1)
<HTML> <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>
DHTML
Mens dinmicos(1)
<BODY> <table width="80"> <tr> <td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a href="http://www.google.com">Google</a></td> </tr> <tr> <td class="boton"onmouseover="dentro(this)" onmouseout="fuera(this)"><a href="http://www.yahoo.com">Yahoo</a></td> </tr> <tr> <td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a href="http://www.altavista.com">Altavista</a></td> </tr> <tr> <td class="boton" onmouseover="dentro(this)" onmouseout="fuera(this)"><a href="http://www.terra.es">Terra</a></td> </tr> </BODY> </HTML>
DHTML
Mens dinmicos(2)
<HTML> <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" }
DHTML
Mens dinmicos(2)
function ocultarmenu(menu) { menu.style.top="-80px" } //--> </SCRIPT> </HEAD> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)"> <a href="http://www.google.com">Google</a><br /> <a href="http://www.yahoo.com">Yahoo</a><br /><br /><hr />Buscadores<br /> </span> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="mostrarmenu(this)"> <p></p> <p></p> <p> <a href="http://www.elmundo.es">El mundo</a><br /> <a href="http://my.elpais.es">El Pais</a><br /><br /> </p> <hr />Peridicos<br /> </span> </BODY> </HTML>
DHTML
Mens dinmicos(3)
<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; font-size:12; width:90; height:40; background-color:#c0c0c0; position:relative; top:-15; left:-60; } </STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD>
DHTML
Mens dinmicos(3)
<BODY> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)"> <table border="0" width="100%"> <tr> <td width="90%"><a href="http://www.google.com">Google</a></td><td rowspan="2">Buscadores</td> </tr> <tr> <td><a href="http://www.yahoo.com">Yahoo</a></td> </tr> </table> </span> <br /> <span class="menu" onmouseover="mostrarmenu(this)" onmouseout="ocultarmenu(this)"> <table width="100%"> <tr> <td width="90%"><a href="http://www.elmundo.es">El mundo</a></td><td rowspan="2">Peridicos</td> </tr> <tr> <td><a href="http://my.elpais.es">El Pais</a></td> </tr> </table> </span> <br/> </BODY>
DHTML
Posicin del cursor(1)

<HTML> <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>
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()" >Ttulo</h1> <span id="tooltip" style="visibility:hidden">Explicacin del ttulo1</span> </BODY> </HTML>
DHTML
Scroll de Texto
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> span{ position:absolute; background:#CCCCCC; width:100; height:500; clip:rect(0 100 100 0); } </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-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 repblica, 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"> <!-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 pgina principal <a href="javascript:close_window()">Cerrar publicidad</a> </body> </html>
DHTML
Imgenes en movimiento
<HTML> <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>
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") { mouseover=true 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
Proyectos DHTML
Conveniencia del DHTML

Tecnologas complementarias y compatibles

Flash Applets Java PHP, ASP, JSP
Uso de CSS y DOM con estas tecnologas o con otros lenguajes de script
DHTML
Proyectos - Consejos
La pgina debe ser lo ms ligera posible

Es mejor utilizar JS y CSS que repetir HTML Si varias pginas de un sitio WEB utilizan las mismas funciones JS o los mismos estilos CSS deben estar en ficheros externos No hay que reducir las imgenes con su atributo width Distintos modelos de navegadores Distintos sistemas operativos Distintos ordenadores
Realizar las pruebas en distintas plataformas
Cuanto ms bsico sea el cdigo ms compatibilidad Coockies slo cuando sean realmente necesarias Seguridad

Nunca mantener coockies con datos personales importantes No comprobar contraseas con una funcin JS en una pgina WEB
Webs de referencia
Manual de Referencia JavaScript
http://wp.nestcape.com/eng/mozilla/3.0/handbook/javascript/
Manual de Referencia DOM
www.w3.org/DOM/ www.w3.org/Style/CSS/
Manual de Referencia CSS
Webs con Ejemplos de cdigo

http://www.dynamicdrive.com/ http://www.webreference.com/dhtml/ http://www.dhtmlcentral.com/ http://www.dhtmlshock.com/ http://www.w3schools.com/dhtml/dhtml_examples.asp

Cur So Javascript D HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cur So Javascript D HTML

Cargado por

Copyright:

Formatos disponibles

CURSO DE JAVASCRIPT Y DHTML

Sergio Jimnez Celorrio Departamento Ingeniera Informtica - UC3M

CURSO DE JAVASCRIPT Y DHTML

Para qu nos sirve este curso?

Aumentar interaccin del usuario con la WEB

Definir reglas de estilo

CURSO DE JAVASCRIPT Y DHTML

Estructura del Curso

Sergio Jimnez Celorrio Departamento Ingeniera Informtica - UC3M

DHTML = JS + DOM + CSS

Sergio Jimnez Celorrio Departamento Ingeniera Informtica - UC3M

NotePad EditPlus DreamWeaver Antechinus

JavaScrit en una pgina WEB(1)

JavaScrit en una pgina WEB(2)

JavaScrit en una pgina WEB(3)

Declaracin y Asignacin (2)

Declaracin y Asignacin (3)

Nombres de las variables

No pueden empezar por nmeros Pueden contener:

JavaScript Variables Tipos de Variables

Se guarda entre Comillas simples o dobles Concatenacin +

JavaScript Variables Tipos de Variables - Cadenas

JavaScript Variables Tipos de Variables - Cadenas

Efecto texto de prueba texto de prueba texto de prueba Efecto

JavaScript Variables Tipos de Variables - Cadenas

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables - Nmeros

JavaScript Variables Tipos de Variables- Nmeros

JavaScript Variables Tipos de Variables- Nmeros

JavaScript Variables Tipos de Variables- Nmeros

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables Booleanos

JavaScript Variables Tipos de Variables Booleanos

Ejemplo Operadores Lgicos

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

typeof(variable) conversin implcita conversin explcita (Recomendable)

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

conversin implcita conversin explcita (Recomendable)

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

JavaScript Variables Tipos de Variables

JavaScript Control de Flujo

JavaScript Control de Flujo- Condicionales

JavaScript Control de Flujo- Condicionales- IF

JavaScript Control de Flujo- Condicionales- IF

JavaScript Control de Flujo- Condicionales- IF

JavaScript Control de Flujo Condicionales

JavaScript Control de Flujo Condicionales-Switch

JavaScript Control de Flujo Condicionales-Switch

JavaScript Control de Flujo

JavaScript Control de Flujo Bucles

JavaScript Control de Flujo Bucles For

JavaScript Control de Flujo Bucles

JavaScript Control de Flujo Bucles-While

JavaScript Control de Flujo Bucles

JavaScript Control de Flujo Bucles - Do While

JavaScript Control de Flujo Bucles

185 432 127 unidades unidades unidades