curso de javascript y dhtml sergio jiménez celorrio departamento ingeniería informática - uc3m

CURSO DE JAVASCRIPT Y DHTML

Sergio Jiménez Celorrio

Departamento Ingeniería Informática - UC3M


¿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


Estructura del Curso

Introducción JavaScript el DOM y las Hojas de Estilo (CSS) DHTML Proyectos DHTML

Introducción



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



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">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene mi primer script </P> </BODY></HTML>

JavaScript Detección de errores

Cambiar alert por Alert

JavaScriptVariables

Declaración Asignación

JavaScript – Variables

Declaración e Asignación(1)

<HTML>

<HEAD>

<TITLE> Curso JS y DTHML</TITLE>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

<NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT>

</HEAD>

<BODY>

<P>

Esta página contiene un script

</P>

</BODY>

</HTML>

JavaScript – VariablesDeclaración y Asignación (2)

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

Declaración y Asignación (3)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

Declaración y Asignación(4)

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

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





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de Variables Números

Asignación Operaciones Infinito y Nan

JavaScript – Variables –Tipos de Variables - Números

Asignación

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de Variables- NúmerosNaN e Infinity

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de Variables – BooleanosEjemplo Operadores Lógicos

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de VariablesVariables Nulas

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

JavaScript – Variables – Tipos de Variables Variables Indefinidas

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

JavaScript – 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>





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de VariablesConversión implicita(2)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de VariablesConversión implicita(3)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de VariablesConversión explícita(1)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de VariablesConversión explícita(2)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Variables –Tipos de Variables Conversión explícita(3)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Control de FlujoCondicionales

IF Switch

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">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <BODY> <P> Esta página contiene un script </P> </BODY></HTML>

<HTML>

<HEAD>



<!--

var ideal;

var estatura;

var peso;

var sexo;

estatura=prompt("Introduzca su estatura en cm (P.EJ: 175)", "");

peso=prompt("Introduzca su peso en Kg (P.EJ: 83)", "");

sexo=prompt("Introduzca su sexo (Hombre o Mujer)", "");

if (sexo == "Hombre") //si es hombre

ideal = estatura - 100;

else //si es Mujer

ideal = estatura - 110;


if (peso < ideal) //si el peso real es más bajo que el ideal

alert("Está usted bastante delgado");

else //sino aún hay otras dos posibilidades

{

if (peso == ideal) //en su peso

alert("Su peso actual es el idóneo");

else

alert("Sufre usted cierto sobrepeso");

}

//-->

</SCRIPT>


</HEAD>

<BODY>

<P>


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



<!--

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>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Control de FlujoBucles

For While Do-while Break

JavaScript – Control de Flujo –Bucles For

for(expresión inicial; condición; expresión iteración){ expresión1; expresión2; … expresiónn; }

JavaScript – Control de Flujo –Bucles – ForEjemplo

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Control de Flujo – BuclesBreak

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – MatricesEjemplo(2)

<HTML>

<HEAD>



<!--

var matriz= new Array(10);

for(i=0; i<=9; i++) matriz[i] = i ;

alert(matriz);

</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – MatricesEjemplo(3)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</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">  </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>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto Array El método reverse()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto ArrayEl método sort()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto ArrayEl método push()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto ArrayEl método pop()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto ArrayEl método unshift()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto ArrayEl método shift()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto Array El método slice()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Matrices – El objeto ArrayEl método concat()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript Funciones

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

Funciones de Usuario

JavaScript – Funciones Funciones de Usuario(1)

<HTML>

<HEAD>



<!--

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;



alert(media);


//media de la tercera matriz

media=0;



alert(media);

//-->

</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

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

JavaScript – Funciones Funciones de Usuario

function nombre_función(arg1, arg2, arg3,…){ var valor; expresión 1; expresión 2; … expresión n; return valor;}

JavaScript – Funciones - Funciones de UsuarioArgumentos variables(1)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – Funciones - Funciones de UsuarioArgumentos variables(2)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</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(1)

GuardarCookieVar() ValorCookieVar() EliminarCookieVar()

<HTML>

<HEAD>



<!--

//

// guardarCookie

//--------------------------------------

function guardarCookie(nombre,valor,caducidad)

{

if(caducidad)

{

var c=new Date();

c.setTime(c.getTime()+caducidad);

document.cookie=nombre+"="+ escape(valor)+";expires="+c.toGTMString()+";";

}

else

document.cookie=nombre+"="+ escape(valor)+";;

}


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

if(pos_aux2==-2) pos_aux2=micookie.length; return unescape(micookie.substr(pos_aux1+1,pos_aux2)); } return ""; }


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

JavaScriptPOO en JS

¿Qué es una clase? ¿Qué es un objeto?

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>



<!--

function vehiculo(numruedas, numplazas, esmotorizado, sucometido)

{

this.ruedas=numruedas;

this.plazas=numplazas;

this.motorizado=esmotorizado;

this.cometido=sucometido;

}

var coche = new vehiculo(4,5,true,"Transporte de personas");

var camion = new vehiculo(4,3,true,"Transporte de mercancías");

var moto = new vehiculo(2,2,true,"Transporte de personas");

var bicicleta = new vehiculo(2,1,false,"Pasear");

alert("el coche tiene "+coche.ruedas+" ruedas y "+coche.plazas+ " plazas");


//-->

</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

<HTML>

<HEAD>



<!--

function vehiculo(numruedas, numplazas, esmotorizado, sucometido)

{

this.ruedas=numruedas;

this.plazas=numplazas;

this.motorizado=esmotorizado;

this.cometido=sucometido;

this.resumen=vehiculo_resumen;

}

function vehiculo_resumen()

{

var cadena;

if (this.motorizado) cadena="Tiene "+ this.ruedas+" ruedas y "+ this.plazas+" plazas, tiene motor y se usa para "+this.cometido;

else cadena="Tiene "+ this.ruedas+" ruedas y "+ this.plazas+" plazas, no tiene motor y se usa para "+this.cometido;

return cadena;

}


var coche= new vehiculo(4,5,true,"Transporte de personas");

var camion= new vehiculo(4,3,true,"Transporte de mercancías");

var moto= new vehiculo(2,2,true,"Transporte de personas");

var bicicleta= new vehiculo(2,1,false,"Pasear");

alert(coche.resumen());

alert(camion.resumen());

alert(moto.resumen());

alert(bicicleta.resumen());

//-->

</SCRIPT>


</HEAD>

<BODY>

<P>


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





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetosString. El método indexOf()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetos String. El método sustr()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetosString. El método replace()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetosString. Métodos toUpperCase() y toLowerCase()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetos Math

Es una clase no instanciable

JavaScript – POO en JS - Ejemplos de objetosMath

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetosDate(1)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JS - Ejemplos de objetos Date(2)

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<P>


</P>

</BODY>

</HTML>

JavaScript – POO en JSPrototype

<HTML>

<HEAD>



<!--

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>


</HEAD>

<BODY>

<P>


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

JavaScript Varios

Imprimir– println()

Reproducir música– play()– stop()

DOM



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">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD>


<BODY> <Table name="tabla1" id="tabla1" border="1">

<Tr>

<TH> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH>

</Tr>

<Tr>

<TD> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>

</Tr>

<Tr>


</Tr>

</Table>

<form name="form1" id="form1">

<input type="Text" name="textoNuevo"> <br>

<input type="Button" value="Crea párrafo" onclick="cambiarValorCelda()">

</form>

</BODY>

</HTML>

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">


</SCRIPT>


</HEAD>

<BODY>

<H1>Ejemplo para añadir y eliminar nodos de un documento</H1>

<p id="aqui"> </p>

<form name="form1" id="form1">

<input type="Text" name="textoNuevo"> <br>

<input type="Button" value="Crea título1" onclick="AnadirNodo('H1')">

<input type="Button" value="Crea título2" onclick="AnadirNodo('H2')">

<input type="Button" value="Elimina Nodo" onclick="eliminarNodo()">

</form>

</BODY>

</HTML>

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>





</SCRIPT>


</HEAD>

<BODY>

Esta página contiene un Script

</BODY>

</HTML>

DOM - Nodos Especialesnavigator

Atributos: – appName, appVersion, etc

Métodos Eventos

DOM - Nodos Especiales navigator

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

DOM - Nodos 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">  </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>





</SCRIPT>


</HEAD>

<BODY>

<a onClick="ponerTitulo();">Poner título</a><br>

<a onClick="ponerTexto();">Poner texto</a>

</BODY>

</HTML>


history

Atributos Métodos

– back(), forward(), etc

Eventos


history

<HTML>

<HEAD>


</HEAD>

<BODY>

<a href="#" onClick="window.history.back();"> Atrás </a> <br>

<a href="#" onClick="window.history.forward();"> Adelante </a>

</BODY>

</HTML>


location

Atributos– href

Métodos Eventos

location

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


layer

Atributos Métodos Eventos

– onMouseOver(), onMouseOut()

layer

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </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>

DOM - Nodos Especialeslink


– onMouseClick(), onMouseOver(), onMouseOut()

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<a href="http://www.google.com" onMouseOver="dentro();">Google</a>

</BODY>

</HTML>

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<a href="http://www.google.com" onMouseOver="status='Este link te lleva a google';" onClick="return advertir();">

Google

</a>

</BODY>

</HTML>

DOM - Nodos Especialesbutton


– onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut()

DOM - Nodos Especialesbutton

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOSCRIPT> Su navegador no soporta JavaScript.</NOSCRIPT> </HEAD> <body> <table width="100%"> <tr> <td height=50 bgcolor="red" onmouseover="cambiarColor('red')"> </td> <td height=50 bgcolor="blue" onmouseover="cambiarColor('blue')"> </td> <td height=50 bgcolor="green" onmouseover="cambiarColor('green')"> </td> </tr> </table> <form> <input id="miboton" type="button" value="Boton"> </form> </body></html>


image


– onMouseClick(), onMouseOver(), onMouseOut()

image

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

onMouseOut="cambiar_imagen1();"> </body></html>


form

Atributos– value, etc

Métodos Eventos

– onChange(), onFocus(), onBlur(), onMouseClick(), onMouseOver(), onMouseOut(), etc

form

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<form name="myForm1">

Formulario1 <input onkeyup="copiaInfo()" type="text" name="option"><br />

</form>

<form name="myForm2">

Formulario2 <input onkeyup="copiaInfo()" type="text" name="option"><br />

</form>

</BODY>

</HTML>

form

<HTML>

<HEAD>





</SCRIPT>


</HEAD>

<BODY>

<form>

¿Cuál es tú refresco preferido?

<select id="refescos" onchange="ElegirRefresco()">

<option value="Fanta">Fanta

<option value="Coca Cola">Coca cola

<option value="Tónica">Tónica

</select>

</form>

</BODY>

</HTML>

DOM - Nodos EspecialesFrames

¿Debo utilizar Frames (marcos)?

CSS (Hojas de Estilo)

Sergio Jiménez CelorrioDepartamento Ingeniería Informática UC3M

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 WEB

La etiqueta <style> El atributo “style”

CSS - CSS en una página WEBEjemplo (1)

<HTML>

<HEAD>


<STYLE>

H1{

font-size: 8px;

color: RED;

font-weight:bold

}

</STYLE>

</HEAD>

<BODY>

<H1>Título modificado con una hoja de estilo</H1>

Resto del documento

</BODY>

</HTML>

CSS - CSS en una página WEBEjemplo (2)

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1 STYLE="font-size: 48px; color: blue; font-weight:bold">

Título modificado con una hoja de estilo

</H1>

Resto del documento

</BODY>

</HTML>

CSSFormato de las Reglas

Tipos de selectores– Selectores simples– Selectores contextuales

Operadores

CSS - Formato de las Reglas – Selectores simples Selector de Tipo

<HTML>

<HEAD>


<STYLE>

TD {

font-size:8px

}

</STYLE>

</HEAD>

<BODY>

<Table name="tabla1" id="tabla1" border="1">

<Tr>


</Tr>

<Tr>


</Tr>

<Tr>


</Tr>

</Table>

</BODY>

</HTML>

CSS - Formato de las Reglas - Selectores simples Selector de Clase

<HTML>

<HEAD>


<STYLE>

.colorrojo {

color:red

}

</STYLE>

</HEAD>

<BODY>


<Tr>

<TH class="colorrojo"> Columna1 </TH><TH> Columna2 </TH><TH> Columna3 </TH><TH> Columna4 </TH>

</Tr>

<Tr>

<TD class="colorrojo"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>

</Tr>

<Tr>

<TD class="colorrojo"> Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>

</Tr>

</Table>

</BODY>

</HTML>

CSS - Formato de las Reglas - Selectores simples Selector de Id

<HTML>

<HEAD>


<STYLE>

#celda1 {

color:blue

}

</STYLE>

</HEAD>

<BODY>


<Tr>


</Tr>

<Tr>

<TD id="celda1"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>

</Tr>

<Tr>

<TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>

</Tr>

</Table>

</BODY>

</HTML>

CSS - Formato de las Reglas - Selectores simples Selector de Universales

<HTML>

<HEAD>


<STYLE>

* {

color:green

}

</STYLE>

</HEAD>

<BODY>


<Tr>


</Tr>

<Tr>


</Tr>

<Tr>

<TD > Celda2,1 </TD><TD> Celda2,2 </TD><TD> Celda2,3 </TD><TD> Celda2,4 </TD>

</Tr>

</Table>

</BODY>

</HTML>

CSS - Formato de las Reglas - Selectores complejos Selector de Descendientes

<HTML>

<HEAD>


<STYLE>

DIV H1{

color:red

}

</STYLE>

</HEAD>

<BODY>

<H1>Este es un Título normal normal</H1>

<DIV>

<H1>Este es un Título descendiente hijo de un DIV</H1>

<P>

<H1>Este es un Título descendiente de un DIV</H1>

</P>

</DIV>

</BODY>

</HTML>

CSS - Formato de las Reglas - Selectores complejos Selector de Parentesco

<HTML>

<HEAD>


<STYLE>

DIV >H1{

color:red

}

</STYLE>

</HEAD>

<BODY>


<DIV>


<P>


</P>

</DIV>

</BODY>

</HTML>

CSS - Formato de las Reglas - Selectores complejos Selector de Hermanos

<HTML>

<HEAD>


<STYLE>

DIV + H1{

color:red

}

</STYLE>

</HEAD>

<BODY>


<DIV>


<P>


</P>

</DIV>


</BODY>

</HTML>

CSS - Formato de las Reglas – OperadoresFirstLetter

<HTML>

<HEAD>


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


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


<STYLE>

.colorrojo {color:red}

</STYLE>

</HEAD>

<BODY>

<Table class="colorrojo" name="tabla1" id="tabla1" border="1">

<Tr>


</Tr>

<Tr>


</Tr>

<Tr>


</Tr>

</Table>

</BODY>

</HTML>

CSS – Herencia de EstilosCascada(2)

<HTML>

<HEAD>


<STYLE>


.colorpadre {color:inherit}

</STYLE>

</HEAD>

<BODY class="colorrojo">


<Tr>


</Tr>

<Tr>

<TD class="colorpadre"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>

</Tr>

<Tr>


</Tr>

</Table>

</BODY>

</HTML>

CSS – Herencia de EstilosAnular la Cascada

<HTML>

<HEAD>


<STYLE>


.colorazul {color:blue}

</STYLE>

</HEAD>

<BODY>

<Table class="colorrojo" name="tabla1" id="tabla1" border="1">

<Tr>


</Tr>

<Tr>

<TD class="colorazul"> Celda1,1 </TD><TD> Celda1,2 </TD><TD> Celda1,3 </TD><TD> Celda1,4 </TD>

</Tr>

<Tr>


</Tr>

</Table>

</BODY>

</HTML>

CSS Definiendo Estilos

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

CSS – Definiendo Estilos Cambiando el texto

Font-family:Verdana, Arial, Courier,.. Font-size:8px,9px,10px,.. Font-Style: Normal, Italic, Oblique Font-weight: Bold, Bolder, Ligther, Normal

CSS – Definiendo Estilos Cambiando el texto

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .textomodificado {

font-family:verdana;font-size:small;font-style:italic;font-weight:Ligther

} </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="textomodificado"> Este es un título con el texto modificado</h1> </BODY></HTML>

CSS – Definiendo Estilos Cambiando el color

Color: red, blue, green, … Color: rgb(100%,0%,0%)

CSS – Definiendo Estilos Cambiando el color

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colormodificado {

color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="colormodificado"> Este es un título con el texto modificado</h1>

</BODY></HTML>

CSS – Definiendo Estilos Cambiando el fondo

Background-color Background-image: fichero Background-position: top, left, center,

bottom, right

CSS – Definiendo Estilos Cambiando el fondo

<HTML> <HEAD> <TITLE> Curso JS y DTHML</TITLE> <STYLE> .colorfondomodificado {

background-color:red; } </STYLE> </HEAD> <BODY> <h1> Este es un título normal</h1> <h1 class="colorfondomodificado"> Este es un título con el texto modificado</h1> </BODY></HTML>

CSS – Definiendo Estilos Cambiando el borde

Border-width:1px,2px,… Border-color: red, blue,.. Border-style: solid, dashed, dotted,…

CSS – Definiendo EstilosCambiando el borde

<HTML>

<HEAD>


<STYLE>

.bordemodificado {

border-width:2;

border-color:red;

border-style:dotted

}

</STYLE>

</HEAD>

<BODY>

<Table class="bordemodificado" name="tabla1" id="tabla1" border="1">

<Tr>


</Tr>

<Tr>


</Tr>

<Tr>


</Tr>

</Table>

</BODY>

</HTML>

CSS – Definiendo Estilos Cambiando el puntero

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

CSS – Definiendo Estilos Cambiando el puntero

<HTML>

<HEAD>


<STYLE>

.cursormodificado {cursor:wait}

</STYLE>

</HEAD>

<BODY>


<Tr class="cursormodificado">


</Tr>

<Tr>


</Tr>

<Tr>


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


<STYLE>

.scrollmodificado {

scrollbar-base-color:cyan;

scrollbar-face-color:blue;

scrollbar-track-color:yellow

}

</STYLE>

</HEAD>

<BODY class="scrollmodificado">


<Tr>


</Tr>

<Tr>


</Tr>

<Tr>


</Tr>

</Table>

</BODY>

</HTML>

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>

CSS – Definiendo Estilos Cambiando la posición

Top Left Width Height Z-index

DHTML



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>


<STYLE>

.boton{

background:C0C0C0;

border:2px outset;

}

</STYLE>




</SCRIPT>


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


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


<!--

function mostrarmenu(menu)

{

menu.style.top="-15px"

}


function ocultarmenu(menu)

{

menu.style.top="-80px"

}

//-->

</SCRIPT>

</HEAD>

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

<a href="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>

<HTML>

<HEAD>


<STYLE>

table{

font-size:12;


}

.menu

{

border:groove 2px;

padding:3;

font-family:arial;

font-size:12;

width:90;

height:40;


position:relative;

top:-15;

left:-60;

}

</STYLE>


<!--


function mostrarmenu(menu)

{

menu.style.left="-10"

}

function ocultarmenu(menu)

{

menu.style.left="-60px"

}

//-->

</SCRIPT>

</HEAD>


<BODY>


<table border="0" width="100%">

<tr>

<td width="90%"><a href="http://www.google.com">Google</a></td><td rowspan="2">Buscadores</td>

</tr>

<tr>

<td><a href="http://www.yahoo.com">Yahoo</a></td>

</tr>

</table>

</span>

<br />


<table width="100%">

<tr>

<td width="90%"><a href="http://www.elmundo.es">El mundo</a></td><td rowspan="2">Periódicos</td>

</tr>

<tr>

<td><a href="http://my.elpais.es">El Pais</a></td>

</tr>

</table>

</span>

<br/>

</BODY>

</HTML>

DHTMLPosición del cursor(1)

<HTML>

<HEAD>


<STYLE>

#PosicionX{ background:lightblue}

#PosicionY{ background:red}

</STYLE>




</SCRIPT>

</HEAD>

<BODY onmousemove="PosicionCursor()">

cursor X: <span id="PosicionX"></span><br />

cursor Y: <span id="PosicionY"></span>

</BODY>

</HTML>

DHTMLTooltips

<HTML>

<HEAD>


<STYLE>

.titulo{background:lightblue}

</STYLE>




</SCRIPT>

</HEAD>

<BODY>

<h1 class="titulo" onmousemove="moverTooltip()" >Título</h1>

<span id="tooltip" style="visibility:hidden">Explicación del título1</span>

</BODY>

</HTML>

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;


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">  </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">  </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>


</HEAD>

<body>

<img id="moveMe" src="imagenes/cero.gif" width="50" height="50">

</body>

</html>

DHTMLTransiciones

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

PROYECTOS DHTML



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/

Webs con Ejemplos de código

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

curso de javascript y dhtml sergio jiménez celorrio departamento ingeniería informática - uc3m

Documents