CURSO DE JAVASCRIPT Y DHTML Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M.
-
Upload
amaranta-islas -
Category
Documents
-
view
219 -
download
2
Transcript of CURSO DE JAVASCRIPT Y DHTML Sergio Jiménez Celorrio Departamento Ingeniería Informática - UC3M.
CURSO DE JAVASCRIPT Y DHTML
¿Para qué nos sirve este curso?
Dotar a las páginas web de “Inteligencia” – Almacenar y recuperar información del usuario– Comprobar formularios
Aumentar interacción del usuario con la WEB– Captar Eventos del ratón y del teclado– Realizar Pequeñas animaciones
Definir reglas de estilo– Crear sitios WEB donde todas las páginas mantengan una
apariencia común
CURSO DE JAVASCRIPT Y DHTML
Estructura del Curso
Introducción JavaScript el DOM y las Hojas de Estilo (CSS) DHTML Proyectos DHTML
Introducción ¿Qué es JavaScript?
No es Java Es un lenguaje de programación de Scripts
en el ‘Client-Side’ Otros VBScript
Introducción ¿Qué es DHTML?
No es un lenguaje de programación No es una aplicación Es una metodología de trabajo:
– DHTML = JS + DOM + CSS
JS (JavaScript) lenguaje de programación de Scripts
DOM (Documet Object Model) estructura de los objetos de los objetos de un documento WEB
CSS (Hojas de Estilo) lenguaje de definición del aspecto de los objetos de un documento WEB
JavaScript
Herramientas de Trabajo
Editores de Texto Plano– NotePad– EditPlus
Editores de JS Profesionales – DreamWeaver– Antechinus
JavaScriptJavaScrit en una página WEB(1)
<HTML> <HEAD> <TITLE> Mi primer Script </TITLE> <SCRIPT LANGUAGE="JavaScript">
</SCRIPT> </HEAD>
<BODY> <P> Este página contiene un script vacío </P> </BODY></HTML>
JavaScript 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>
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>
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>
JavaScript – VariablesDeclaració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>
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>
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>
JavaScript- VariablesNombres de las variables
Nombres Incorrectos– No pueden empezar por números– Pueden contener:
Numeros, ej var total2004; Letras, ej var total; El caracter ‘_’ (underscore ) ej var total_2004;
– No pueden contener: Símbolos: ‘;’ ‘,’ ‘.’ Letras acentuadas ni caracteres locales tipo ñ,ç Espacios en blanco Palabras reservadas
JavaScript – VariablesTipos de Variables
Cadenas: – var producto= “Tetrabrick Leche 1L”;
Números– Var precio=1;– Var precio= 0.65;
Booleanos– var enstock=true;
Nulas– var producto=null;
Indefinidas
JavaScript – Variables –Tipos de Variables Cadenas
Asignación– Se guarda entre Comillas simples o dobles
Operaciones– Concatenación ‘+’
JavaScript – Variables –Tipos de Variables - CadenasEjemplo
<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>
JavaScript – Variables –Tipos de Variables - Cadenas Secuencias de Escape
Escape Efecto
“\\texto de prueba”
“texto \”de\” pueba”
“texto \’de\’ prueba”
texto de prueba
texto “de” prueba
texto ‘de’ prueba
Secuencia Efecto\n
\f
\r
\t
\b
Salto de línea
Salto de página
Retorno de carro
Tabulación
Retroceder un carácter
JavaScript – Variables –Tipos de Variables - Cadenas Secuencias de Escape
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
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>
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>
JavaScript – Variables –Tipos de Variables- NúmerosOperaciones
Suma +, += Resta –, -= Multiplicación *, *= División /, /= Incremento ++ Decremento –
JavaScript – Variables –Tipos de Variables- NúmerosEjemplo
<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>
JavaScript – Variables –Tipos de Variables- NúmerosNaN 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>
JavaScript – Variables –Tipos de Variables Booleanos
Asignación Operadores
– Comparadores < >= < <= == !==
– Operadores lógicos AND: && OR: || NOT: !
JavaScript – Variables –Tipos de Variables – BooleanosEjemplo 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>
JavaScript – Variables –Tipos de Variables – BooleanosEjemplo 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>
JavaScript – Variables –Tipos de VariablesVariables 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>
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>
JavaScript – VariablesTipos de Variables
Obtener el tipo de una variable– typeof(variable)
Cambio de tipo : – conversión implícita– conversión explícita (Recomendable)
JavaScript – Variables – Tipos de Variables
Obtener el tipo
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
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>
JavaScript – Variables –Tipos de VariablesCambios de tipos
Obtener el tipo de una variable Cambio de tipo :
– conversión implícita– conversión explícita (Recomendable)
JavaScript – Variables –Tipos de Variables Conversión implicita(1)
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var mivariable;
mivariable="cadena";
alert("mi variable es de tipo: "+typeof(mivariable));
mivariable=1234; // conversión implícita
alert("mi variable es de tipo: "+typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de VariablesConversió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
alert("mi variable es de tipo: "+typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de VariablesConversió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+"";
alert("mi variable es de tipo: "+typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de VariablesConversió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
alert("mi variable es de tipo: "+typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de VariablesConversió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);
alert("mi variable es de tipo: "+typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Variables –Tipos de Variables Conversión explícita(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();
alert("mi variable es de tipo: "+typeof(mivariable));
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo- CondicionalesIF
If (condición) then { expresión1; expresión2;
… expresión n; }else{ expresión1; expresión2;
… expresión m; }
JavaScript – Control de Flujo- Condicionales- IF Ejemplo (1)
<HTML> <HEAD> <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>
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;
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>
JavaScript – Control de Flujo –CondicionalesSwitch
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-SwitchEjemplo
<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");
break;
case "Inglés":
alert("Good morning");
break;
JavaScript – Control de Flujo –Condicionales-SwitchEjemplo
case "Italiano":
alert("Bon jorno");
break;
default:
alert("Ha introducido mal el idioma");
}
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – Control de Flujo –Bucles For
for(expresión inicial; condición; expresión iteración){ expresión1; expresión2; … expresiónn; }
JavaScript – Control de Flujo –Bucles – ForEjemplo
<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>
JavaScript – Control de Flujo –Bucles While
while(condicion){ expresión1; expresión2; … expresiónn; }
JavaScript – Control de Flujo –Bucles-WhileEjemplo
<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>
JavaScript – Control de Flujo –Bucles Do-while
do { expresión1; expresión2; … expresiónn; }while (condicion);
JavaScript – Control de Flujo – Bucles - Do WhileEjemplo
<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>
JavaScript – Control de Flujo – BuclesBreak
<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>
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 – MatricesDeclaración
var producto = new Array(); var producto = new Array(5); var producto = new Array(”producto1”,”producto2”, …);
JavaScript – Matrices Ejemplo(1)
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
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>
JavaScript – MatricesEjemplo(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>
JavaScript – MatricesEjemplo(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>
JavaScript – MatricesTablas
Tetrabrik leche 1L
Champú 1L
Harina 1K
Aceite 1L
185 unidades
432 unidades
472 unidades
687 unidades…
1 €/unidad
2 €/unidad
1,5 €/unidad
0,5 €/unidad
3 €/unidad
Lata Tomate
127 unidades
Producto [ ][ ]
[0][0]
[1][0]
[2][0]
[0][1] [0][2] …
[2][1] [2][2] …
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>
JavaScript – MatricesEl objeto Array
Los array son objetos Tiene atributos o propiedades
– length Tiene métodos
– join()– reverse()– sort()– push()– pop()– shift()– unshift()– slice()– concat()
JavaScript – Matrices – El objeto ArrayEl 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>
JavaScript – Matrices – El objeto ArrayEl 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>
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>
JavaScript – Matrices – El objeto ArrayEl 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>
JavaScript – Matrices – El objeto ArrayEl 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>
JavaScript – Matrices – El objeto ArrayEl 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>
JavaScript – Matrices – El objeto ArrayEl 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>
JavaScript – Matrices – El objeto ArrayEl 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>
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>
JavaScript – Matrices – El objeto ArrayEl 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>
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);
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>
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>
JavaScript – Funciones Funciones de Usuario
function nombre_función(arg1, arg2, arg3,…){ var valor; expresión 1; expresión 2; … expresión n; return valor;}
JavaScript – Funciones - Funciones de UsuarioArgumentos 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>
JavaScript – Funciones - Funciones de UsuarioArgumentos 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>
JavaScriptCookies
Almacenar Información del usuario Activarlas en el navegador Recomendaciones de Uso
JavaScript – CookiesManejo básico
Guardar cookie– document.cookie = “nombre=valor”;– Ej: document.cookie = “usuario=sergio jimenez
celorrio”;
Recuperar cookie– var variable= document.cookie;– Var posIgual=variableCookie.indexOf(“=”);– Var valorcoockie.substring(posIgual+1);
JavaScript – CookiesManejo 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 – CookiesManejo 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 – CookiesManejo 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>
JavaScript – POO en JSCreación de objetos
Definición de la clase– Constructor
Atributos y métodos
Instanciación (Creación) de un objeto – New
JavaScript – POO en JS - Creación de objetosEjemplo(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");
JavaScript – POO en JS - Creación de objetosEjemplo(1)
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – POO en JS - Creación de objetosEjemplo(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;
}
JavaScript – POO en JS - Creación de objetosEjemplo(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>
JavaScript – POO en JSEjemplos de objetos
Array– Atributos: length,– Métodos: join(), reverse(), sort(), push(), pop(), concat(), …
String– Atributos: length– Métodos: indexOf(), substr(), replace(),…
Date– Atributos:– Métodos: getHours(), getMinutes()
Math– Atributos: Math.PI, Math.E, …– Métodos: abs(), pow(), random(), sqrt(), round() log(),…
JavaScript – POO en JS - Ejemplos de objetosString. 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>
JavaScript – POO en JS - Ejemplos de objetosString. 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>
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>
JavaScript – POO en JS - Ejemplos de objetosString. 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>
JavaScript – POO en JS - Ejemplos de objetosString. 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>
JavaScript – POO en JS - Ejemplos de objetosMath
<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()); // 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>
JavaScript – POO en JS - Ejemplos de objetosDate(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>
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>
JavaScript – POO en JSPrototype
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function mi_Date_toString(fecha)
{
var fecha = new Date();
var cadena = "";
//Obtengo el día de la semana
var DiasSemana = new Array("Domingo", "Lunes", "Martes", "Miércoles","Jueves", "Viernes", "Sábado");
cadena += DiasSemana[fecha.getDay()];
cadena += ", " + fecha.getDate() + " de ";
//Obtengo el mes del año
var Meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
cadena += Meses[fecha.getMonth()];
//añado el año
cadena += " de " + fecha.getFullYear();
return cadena;
}
JavaScript – POO en JSPrototype
Date.prototype.toString = mi_Date_toString;
var hoy = new Date();
alert(hoy);
//-->
</SCRIPT>
<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>
</HEAD>
<BODY>
<P>
Esta página contiene un script
</P>
</BODY>
</HTML>
JavaScript – POO en JSVentajas de la POO
Reutilización de código Encapsulación Programas orientados a Eventos
JavaScript – POO en JS Eventos más utilizados
Evento Descripción ObjetosonLoad() Es llamado al cargar una página window
onUnload() Es llamado al descargar (cerrar) una página window
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 link, button, radio, checkbox,
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 link, area, layer
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 Window, text, textArea, Password, link, button, radio, checkbox, form
DOMIntroducción
¿Qué es DOM?– 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.
DOMEl modelo de objetos DOM1
window
frames location navigator history screendocument
applets body form images links…
…
DOM El modelo de objetos W3C
document
html
head body
tittle
Texto con el Título de la página
table
tr tr tr
td td td tdtd td
dato1 dato2 dato3 dato4 dato5 dato1
DOMEl objeto nodo
Todos los elementos de una página son objetos de la clase nodo
Tipos de nodo– Nodo de Elemento– Nodo de Texto
DOM – El objeto nodoPropiedades
ownerDocument Documento actual de trabajo
className Origen de clase
tagName Nombre de la etiqueta
nodeName Identificador del nodo
nodeType Tipo de nodo (etiqueta, atributo,texto)
nodeValue Valor del nodo (texto en un nodo de texto)
InnerHTML Valor del Texto entre dos nodos de elemento
Parentnode Nodo padre
firstChild Primer nodo hijo
lastChild Último nodo hijo
nextSibling Nodo hermano siguiente
previousSibling Nodo hermano previo
DOM – El objeto nodoMétodos
cloneNode() Copia un nodo
Boolean hasChildNodes() Informa si un nodo tiene hijos o no
appendChild() Añade un nodo hijo
insertBefore() Inserta un nodo hijo
replaceChild() Reemplaza el nodo hijo indicado por otro
createElement() Crea un nodo de elemento para añadirlo como hijo
createTextNode() Crea un nodo de texto para añadirlo como hijo
Node getElementById(identificador) Obtiene un nodo mediante su identificador
getElementsByTagName(tagname) Obtiene un nodo o conjunto de nodos por su Etiqueta
getAtribute() Obtiene el valor de un atributo
removeAtribute() Elimina un atributo de un nodo de elemento
setAtribute() Da valor a un atributo de un nodo elemento
DOM – El objeto nodoPropiedades 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>
DOM – El objeto nodoPropiedades 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>
<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 párrafo" onclick="cambiarValorCelda()">
</form>
</BODY>
</HTML>
DOM – El objeto nodoPropiedades 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() { if(!document.getElementById) return; var donde=document.getElementById("aqui"); donde.removeChild(donde.lastChild); } //-->
DOM – El objeto nodoPropiedades 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>
DOMNodos Especiales
screen navigator window document history location document layer link button image form
DOM - Nodos Especialesscreen
Atributos:– width, height, availWidt, availHeight, colorDepth,
updateInterval, etc
Métodos Eventos
DOM - Nodos Especiales screen
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
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>
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>
DOM - Nodos Especialeswindow
Atributos Métodos
– moveTo(x,y), resizeTo(width,heigth), open(“URLpopup.html”,”nombrePopUp”), close(), alert(), acept(), confirm(), etc
Eventos
DOM - Nodos Especialeswindow
<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>
DOM - Nodos Especialesdocument
Atributos– bgColor, fgColor, linkColor, vlinkColor, alinkColor,
Tittle, etc
Métodos– write(), writeLn(), etc
Eventos
DOM - Nodos Especiales
document
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
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>
DOM - Nodos Especiales
history
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
</HEAD>
<BODY>
<a href="#" onClick="window.history.back();"> Atrás </a> <br>
<a href="#" onClick="window.history.forward();"> Adelante </a>
</BODY>
</HTML>
DOM - Nodos Especiales
location
<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>
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>
DOM - Nodos Especiales
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>
DOM - Nodos Especialeslink
<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>
DOM - Nodos Especialeslink
<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();">
</a>
</BODY>
</HTML>
DOM - Nodos Especialesbutton
Atributos Métodos Eventos
– onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut()
DOM - Nodos Especialesbutton
<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>
DOM - Nodos Especiales
image
Atributos Métodos Eventos
– onMouseClick(), onMouseOver(), onMouseOut()
DOM - Nodos Especiales
image
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- 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>
DOM - Nodos Especiales
form
Atributos– value, etc
Métodos Eventos
– onChange(), onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut(), etc
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 />
</form>
</BODY>
</HTML>
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>
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
CSSFormato Regla
selector[:operador]
{
atributo1:valor1;
atributo2:valor2;
…
atributon-1:valorn-1;
atributon:valorn
}
CSS - CSS en una página WEBEjemplo (1)
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<STYLE>
H1{
font-size: 8px;
color: RED;
font-weight:bold
}
</STYLE>
</HEAD>
<BODY>
<H1>Título modificado con una hoja de estilo</H1>
Resto del documento
</BODY>
</HTML>
CSS - CSS en una página WEBEjemplo (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>
CSSFormato 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>
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>
<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>
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>
<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 Título normal normal</H1>
<DIV>
<H1>Este es un Título descendiente hijo de un DIV</H1>
<P>
<H1>Este es un Título descendiente de un DIV</H1>
</P>
</DIV>
</BODY>
</HTML>
CSS - Formato de las Reglas - Selectores complejos Selector de Parentesco
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<STYLE>
DIV >H1{
color:red
}
</STYLE>
</HEAD>
<BODY>
<H1>Este es un Título normal normal</H1>
<DIV>
<H1>Este es un Título descendiente hijo de un DIV</H1>
<P>
<H1>Este es un Título descendiente de un DIV</H1>
</P>
</DIV>
</BODY>
</HTML>
CSS - Formato de las Reglas - Selectores complejos Selector de Hermanos
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<STYLE>
DIV + H1{
color:red
}
</STYLE>
</HEAD>
<BODY>
<H1>Este es un Título normal normal</H1>
<DIV>
<H1>Este es un Título descendiente hijo de un DIV</H1>
<P>
<H1>Este es un Título descendiente de un DIV</H1>
</P>
</DIV>
<H1>Este es un Título normal normal</H1>
</BODY>
</HTML>
CSS - Formato de las Reglas – OperadoresFirstLetter
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<STYLE>
h1:first-letter{
color:red
}
</STYLE>
</HEAD>
<BODY>
<H1>Este es el Título</H1>
</p>
</BODY>
</HTML>
CSS - Formato de las Reglas – OperadoresFirstLine
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> td:first-line{ color:red; font-weight:bold } </STYLE> </HEAD> <BODY> <table> <tr> <td>uno<br>uno<br></td> <td>dos<br>dos<br></td> <td>tres<br>tres<br></td> </tr> </table> </BODY></HTML>
CSS - Formato de las Reglas – OperadoresLinks
<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>
CSS – Herencia de EstilosCascada(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>
</HTML>
CSS – Herencia de EstilosAnular 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>
</HTML>
CSS Definiendo Estilos
Tipo y color de letra Fondo Bordes y margenes Puntero del ratón Barras de scroll Posición
CSS – Definiendo Estilos Cambiando el texto
Font-family:Verdana, Arial, Courier,.. Font-size:8px,9px,10px,.. Font-Style: Normal, Italic, Oblique Font-weight: Bold, Bolder, Ligther, Normal
CSS – Definiendo Estilos Cambiando el texto
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .textomodificado {
font-family:verdana;font-size:small;font-style:italic;font-weight:Ligther
} </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="textomodificado"> Este es un título con el texto modificado</h1> </BODY></HTML>
CSS – Definiendo Estilos Cambiando el color
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colormodificado {
color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="colormodificado"> Este es un título con el texto modificado</h1>
</BODY></HTML>
CSS – Definiendo Estilos Cambiando el fondo
Background-color Background-image: fichero Background-position: top, left, center,
bottom, right
CSS – Definiendo Estilos Cambiando el fondo
<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorfondomodificado {
background-color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="colorfondomodificado"> Este es un título con el texto modificado</h1> </BODY></HTML>
CSS – Definiendo Estilos Cambiando el borde
Border-width:1px,2px,… Border-color: red, blue,.. Border-style: solid, dashed, dotted,…
CSS – Definiendo EstilosCambiando 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>
<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 – 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>
</Tr>
<Tr>
<TD> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>
</Tr>
</Table>
</BODY>
</HTML>
CSS – Definiendo Estilos Cambiando las barras de desplazamiento
Scrollbar-base-color: red, blue, green, cyan,… Scrollbar-face-color: red, blue, green, cyan,… Scrollbar-track-color: red, blue, green, cyan,… Scrollbar-arrow-color: red, blue, green, cyan,… Scrollbar-highlight-color: red, blue, green, cyan,… Scrollbar-3dlight-color: red, blue, green, cyan,… Scrollbar-shadow-color: red, blue, green, cyan,… Scrollbar-darkshadow-color: red, blue, green, cyan,
…
CSS – Definiendo Estilos Cambiando las barras de desplazamiento
<HTML>
<HEAD>
<TITLE> Curso JS y DTHML</TITLE>
<STYLE>
.scrollmodificado {
scrollbar-base-color:cyan;
scrollbar-face-color:blue;
scrollbar-track-color:yellow
}
</STYLE>
</HEAD>
<BODY class="scrollmodificado">
<Table name="tabla1" id="tabla1" border="1">
<Tr>
<TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH>
</Tr>
<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 – Definiendo Estilos Cambiando la posición
<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>
DHTML 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
DHTML Menús dinámicos(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 Menús dinámicos(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>
DHTMLMenús dinámicos(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"
}
DHTMLMenús dinámicos(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 />Periódicos<br />
</span>
</BODY>
</HTML>
DHTMLMenús dinámicos(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">
<!--
DHTMLMenús dinámicos(3)
function mostrarmenu(menu)
{
menu.style.left="-10"
}
function ocultarmenu(menu)
{
menu.style.left="-60px"
}
//-->
</SCRIPT>
</HEAD>
DHTMLMenú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="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">Periódicos</td>
</tr>
<tr>
<td><a href="http://my.elpais.es">El Pais</a></td>
</tr>
</table>
</span>
<br/>
</BODY>
</HTML>
DHTMLPosición 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>
DHTMLTooltips
<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>
DHTMLScroll 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;
DHTMLScroll 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);
}
}
DHTMLScroll 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>
DHTMLPop 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>
DHTMLImágenes 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>
DHTMLDrag & 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 }
DHTMLDrag & 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>
Proyectos DHTMLConveniencia 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”
DHTMLProyectos - Consejos
La página debe ser lo más ligera posible– Es mejor utilizar JS y CSS que repetir HTML– Si varias páginas de un sitio WEB utilizan las mismas funciones JS o los
mismos estilos CSS deben estar en ficheros externos– No hay que reducir las imágenes con su atributo width
Realizar las pruebas en distintas plataformas– Distintos modelos de navegadores– Distintos sistemas operativos– Distintos ordenadores
Cuanto más básico sea el código más compatibilidad Coockies sólo cuando sean realmente necesarias Seguridad
– Nunca mantener coockies con datos personales importantes– No comprobar contraseñas con una función JS en una página WEB
Webs de referencia
Manual de Referencia JavaScript– http://wp.nestcape.com/eng/mozilla/3.0/handbook/javascript/
Manual de Referencia DOM– www.w3.org/DOM/
Manual de Referencia CSS– www.w3.org/Style/CSS/