HTML DOM Javascript

5/12/2018 HTML DOM Javascript - slidepdf.com

http://slidepdf.com/reader/full/html-dom-javascript 1/35

Julio 2003, 1

HTML Dinámico (introducción)

HTML + DOM + JavaScript<html> ... </html> window.document, ... <script> ... </script>

Elementos estándar (multiplataforma), independientes del navegador:

DHTML: Es un término de marketing, empleado por

Netscape y Microsoft, para describir las tecnologíassoportadas en la version 4 de sus respectivosnavegadores. Y por ello tiene una gran dependencia

con el navegador que emplemos.



Julio 2003, 2

HTML Dinámico (Cliente)

Capas + Estilos<div> ... </div> css

Flash<object> ... </object>

Java<object> ... </object>

Elementos incorporados en los propios navegadores, y portanto no es necesario descargarse ningún software.

VRML<object> ... </object>

Elementos externos a los navegadores, que son incrustadosen las páginas web (<object>). Para su funcionanmiento enuna página web necesitan de un software especial o plugin.



Julio 2003, 3

HTML Dinámico (Ejemplo: VRML)

http://www.canoma.com/vrml

http://www.web3d.orghttp://www.cai.com/cosmo/

http://web3d.about.com/

•Lenguaje de Modelado para Realidad Virtual. Creación de

mundos virtuales, objetos 3D y escenarios 3D, posibilitando la interaccióncon los objetos, y movimiento del espectador

EJEMPLO



Julio 2003, 4

Nuevas Tecnologías: Flash, etc.

Programas de edición de animaciones, que permiten desarrollar fácilmenteficheros que se pueden incrustar en una página Web. Ejemplo

Mostrar fichero flash

Toda la programaciónse realiza de formavisual (arrastrandoobjetos, etc.).

El código resultante esespecífico de cadaproducto y se requiereun plugg-in en elnavegador para poder

interpretarlo.



Julio 2003, 5

HTML Dinámico (Ejemplo: FLASH)

http://www.flash-es.net/topten/topten.html

http://www.plusmedia.es/

http://www.macromedia.com

Flash: Creación y diseño de animaciones en una página

web.

http://www.programatium.com/flash/



Julio 2003, 6

JAVA. Ejemplo de Aplicación Cliente Servidor

http://grupos.unican.es/ai/meteo



Julio 2003, 7

HTML Dinámico (Servidor)

? El acceso a información que cambia en el tiempo,

requiere un esquema de programación cliente/servidor.

Página web de AIMet

http://www.alsa.es



Julio 2003, 8

Aplicaciones cliente / servidor

•Cuando un servidor web recibe una petición de una página HTML

simple, solamente se trata de encontrar el archivo adecuado y devolverlo.Se trata de contenido estático .

•Actualmente la gran parte de de las páginas web son de contenidodinámico , debido a que presentan información que cambia con el tiempo.

•Podemos querer que en función de la fecha, hora, país o identificacióndel ususario la respuesta a esta petición sea diferente.

•También es muy frecuente encontrar páginas web que muestraninformación originada en una base de datos .



Julio 2003, 9

?

Javaes un potente lenguaje de

programación orientado a objetos.

? Todo el entorno de desarrollo (SDK)para crear ficheros .class con códigopseudocompilado para intérpretesJava.

? Los programas son compilados en

ficheros “pseudo-ejecutables” que sepueden ser interpretados:

– (aplicaciones) máquina virtual, o

– (applets) plug-in de un navegador Web.

? Tiene reglas estrictas sobre cómodeclarar y utilizar variables.

(control estricto de tipos)

• Independencia de plataforma

(UNIX, Windows, Mac,...).• Orientado a objetos

(Obligado a implementar).

• Seguridad y confianza:lenguaje, compilador, interprete

• Simplicidad:gestión automática de “basura”.

• Estándar.• Computación distribuida.

• “Clases" potentes para desarrollo.(GUI,NET,BD)

• Generación rápida de código.

• Documentación y Mantenimiento.

• Rendimiento????.

JAVA no es sólo un Lenguaje de Programación, JAVA es además un conjunto

de herramientas avanzadas: JAVA es una Tecnología

Tecnología Java



Julio 2003, 10

HTML Dinámico (Ejemplo: JAVA)

Java: Lenguaje de programación desarrollado para la Web.

Su principal fundamento es, que todo programa, puedeejecutarse, sin ser modificado, en cualquier plataforma.

http://java.sun.com/



Julio 2003, 11

Tecnologías Actuales Java

JavaTM

technologies:

•J2SETM ,•J2EETM ,•J2METM,•JAX XML.

SDK(Standard Development Kit)

JRE(Java RunTime Enviroment)



Julio 2003, 12

Elementos de Desarrollo para Java

•Java 1.0 –212 Clases, 8 paquetes


–Mejopras en el rendimiento de la VM


–Plataforma Java 2.0

•Java 1.4.1 (Beta), Julio 2002

• Para trabajar con Java 1.0 o Java 1.1

–Java Development Kit para la versión (JDK)

• Para trabajar con Java 1.2 (Renombrado como Java 2)

–Software Development Kit(SDK) o más concreto:

–Java 2 SDK, Standard Edition Ver. 1.2, ...

El lenguaje de programación Java: Lenguaje de programación.

Un lenguaje con una sintaxis similar a C, orientado a Objetos

Evitando las características complejas que han caracterizado a otros lenguajes como C++

La máquina virtual Java (JVM): Hardware/Software (habitual).Es la parte imprescindible para poder ejecutar programas Java

•Sun: Solaris, Linux y Windows, También para Mac, Unix…Palm OS…

A pesar de ser un intérprete, la VM tiene un buen rendimiento.JIT Compiler ( Just-In-Time compilers).

–Propio de la Máquina Virtual

–Bytecodes convertidos instantáneamente en código nativo de la plataforma correspondiente

–Mejora en la velocidad de ejecución

–Hotspot => Buena implantación de JIT

• Java Runtime Environment (JRE)Contiene todo lo necesario para ejecutar programas Java

pero no para desarrollarlos



Julio 2003, 13

Ejemplo de un Applet JAVA

import java.applet.*;import java.awt.*;

public class MiApplet extends Applet {

public void paint (Graphics g){

g.drawLine(1,1,50,50);

g.fillOval(40,40,20,20);

}}

<html><head></head><body>

<applet code="MiApplet.class" width="100" height="100">

</body></html>

EjemploApplet.html

MiApplet.java

Ver Ejemplo



Julio 2003, 14

Programación: JavaScript vs Java

? JavaScript es un lenguaje simple

para usos sencillos.

? Es relativamente fácil de utilizar.

? No es necesario ningún Kit dedesarrollo, ya que sólo se precisaescribir scripts.

? Los scripts se insertan directamenteen el código HTML, por lo que no haynecesidad de compilarlo.

? Está basado en objetos, que puedenutilzarse en un script.

? Es muy poco restrictivo en cuanto a ladeclaración y uso de variables.

? Java es un potente lenguje de

programación orientado a objetos.

? Es complicado de utilizar.

? Necesita JDK para crear ficheros.class con códigopseudocompiladopara intérpretes Java.

? Los programas son compilados enficheros “ejecutables” o en “applets”que se pueden incrustar en páginasWeb.

? Es un completo lenguaje deprogramación orientada a objetos.

? Tiene reglas estrictas sobre cómo

declarar y utilizar variables.

Ambos lenguajes son independientes de plataforma y sus programaspueden ejecutarse sobre Internet, en una página Web.



Julio 2003, 15

Otras Tecnologías Web .Net (Microsoft)



Julio 2003, 16

Hojas de estilo CSS

Con el HTML se intentó desde un principio la definición de estilos lógicos quese centrasen más en el contenido de la información que en su presentación.

El gran éxito de Internet motivó una evolución del HTML centrada en mejorarsu presentación.

Hemos llegado a un HTML demasiado complejo para sus objetivos iniciales yen muchos casos incompatible entre los principales navegadores.

Las hojas de estilo vienen a intentar volver a separar en un documento elcontenido del estilo físico.

CSS son las siglas de "Cascade StyleSheet" y se trata de una especificaciónsobre los estilos físicos aplicables a un documento HTML, trata de dar laseparación definitiva de la estructura y la presentación del documento.

La finalidad de las hojas de estilo es crear unos estilos físicos, separados delas etiquetas HTML, y aplicarlos en los bloques de texto en los que se quieranaplicar, en lugar de cómo parámetros de las etiquetas.



Julio 2003, 17

Aplicación

Tenemos varias posibilidades para definir un estilo:

1. Directamente en la etiqueta en la que queremos usarlo.

2. Definirlo globalmente para toda la página html.

<HTML><HEAD>

<TITLE>ejemplo1</TITLE></HEAD><BODY><P STYLE=color:blue;font-size:18pt; >

Este p&aacute ;rrafo tiene aplicado un estilo<P>y este otro no.</BODY></HTML>

1. Directamente en la etiqueta en la que queremos usarlo:

<ETIQUETA STYLE=propiedad1:valor;....;propiedad2:valor;>....</ETIQUETA>



Julio 2003, 18

Aplicación

2. Para definir una hoja de estilos de forma global empleamos la etiqueta

<STYLE> ... </STYLE> que debe estar colocada en la cabecera del documento.

<STYLE TYPE="text/css"><!—Etiqueta1:{propiedad1:valor;...propiedadn:valor}/* podemos introducir comentarios */...Etiquetam:{propiedad1:valor;...}

//--></STYLE>

<HTML><HEAD><TITLE>ejemplo3</TITLE><STYLE></STYLE>

</HEAD><BODY>

<P>Fuente de estilo Verdana y colorverde, la<B> negrita </B> en azul</BODY></HTML>



Julio 2003, 19

Aplicación

Podemos definir el estilo en un fichero externo de texto con la extensión .css

y luego referenciarlo desde el propio documento HTML, lo haremos dentro dela cabecera del documento con la etiqueta:

<LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">

/* Fichero estilo1.css */

<HTML><HEAD>

<TITLE>ejemplo3</TITLE><LINK REL="stylesheet"

TYPE="text/css"HREF="estilo1.css">

</HEAD><BODY><P>Fuente de estilo Verdana y colorazul, la<B> negrita </B> en verde</BODY></HTML>



Julio 2003, 20

Herencia de estilos

Las etiquetas de un documento HTML estan organizadas de manera que unas

engloban a otras. Esta organización permite una relación padre-hijo de maneraque los estilos definidos para etiquetas padres serán heredados por los hijos.Sin embargo si tenemos definido un estilo para una etiqueta "padre", podremosdefinir un estilo distinto para una etiqueta "hija", el cual prevalece sobre elheredado.<HTML><HEAD><TITLE>Ejemplo4</TITLE>

<STYLE></STYLE></HEAD>

<BODY>

<P><I>La letra cursiva hereda el estilodel p&aacute ;rrafo</I> mientras que<B>la negrita tiene su estilo propio</B></BODY></HTML>



Julio 2003, 21

Clases

Una clase es una definición de estilo que en principio no está asociado a algunaetiqueta HTML, pero que podemos asociar, en el documento, a etiquetas

concretas. Definimos la clase como un estilo más, de la forma:

.Nombre_de_la_Clase {propiedad1:valor;propiedad2:valor;...}

Para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos elparámetro CLASS

<etiqueta CLASS="Nombre_de_la_Clase">....</etiqueta>

<HTML><HEAD> <TITLE>ejemplo7</TITLE><STYLE TYPE="text/css"></STYLE>

</HEAD><BODY>El texto est&aacute ; escrito en azul <P>losp&aacute ;rrafos en rojo</P>as&iacute ; como <B>la negrita </B>, <B CLASS="Baqua">pero en esta

otra negrita estoy aplicando una clase.</B></BODY></HTML>



Julio 2003, 22

Propiedades

XX unidades | %100 | 200... 400 |... 900normal |italic |boldArial, Courier... | sans-serif

font-sizefont-weightfont-stylefont-family

Propiedades de las fuentes

XX unidades | % |

0

underline | overline |

line-throug | blink | none

left | right |center |

justify

uppercase | lowercase|

none | capitalize

text-indenttext-decorationtext-aligntext-transform

Propiedades del texto

none |

url("direccion")

transparent | red, blue... |

RGB

red, blue... |

RGB

background-imagebackground-colorcolor

Propiedades de los colores y los fondosaqua, black, blue,fucshia, gray, green,lime, marron, navy,olive, purple, red, silver,teal, white y yellow

XX unidades | %XX unidades | % | auto | 0

padding-top, padding-botton, padding-left,

padding-right, padding

margin-top, margin-botton, margin-left,

margin-right, margin

Propiedades de márgenes y padding



Julio 2003, 23

Ejemplo de hojas de estilo I

<HTML><HEAD><TITLE>ejemplo5</title><LINK REL="stylesheet" TYPE="text/css"HREF="estilo2.css"><STYLE>

</STYLE></HEAD><BODY>

Texto normal <B>y texto en negrita</B>, según el estiloque hemos importado.<UL><LI>Elemento 1<LI>Elemento 2<LI><B>Elemento 3 en negrita</B></UL><TABLE BORDER="1">

<TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR><TR><TD><B>Celda (2,1) en negrita</B></TD><TD>Celda (1,2)</TD></TR></TABLE></BODY></HTML>

/*fichero estilo2.css */



Julio 2003, 24

Ejemplo de hojas de estilo II

La etiqueta A,

A:link {propiedad1:valor;propiedad2:valor;...}

A:visited {propiedad1:valor;propiedad2:valor;...}

A:active {propiedad1:valor;propiedad2:valor;...}

A:hover {propiedad1:valor;propiedad2:valor;...}

<HTML><HEAD>

<TITLE>ejemplo6</TITLE><STYLE TYPE="TEXT/CSS"></STYLE><BODY><P>Un <a href="http://www.unican.es"> enlace </A> de prueba</BODY></HTML>



Julio 2003, 25

Ejemplos de hojas de estilos III

/* fichero de estilo */

P { font-size : 12pt;font-family : arial,helvetica;font-weight : normal;

}H1 { font-size : 36pt;

font-family : verdana,arial;text-decoration : underline;text-align : center;

background-color : Teal;}TD { font-size : 10pt;

font-family : verdana,arial;text-align : center;background-color : #666666;

}

BODY { background-color : #006600;font-family : arial;

color : White;}



Julio 2003, 26

Ejemplo de estilos IV



Julio 2003, 27

HTML Dinámico (Ejemplo: CAPAS)

? Inclusión de capas (documentos independientes incluidos en el propio documento)

de posicionamiento absoluto, permite dar dinamismo a las páginas Web.

<DIV ID="mylayer" STYLE="postition:absolute;...">

<A HREF="pagina.html">Enlace</A>

ponemos algo de texto<BR>

ahora una imagen <IMG SRC="image.gif">

y mas texto

</DIV>

width:300px

height:300px

left:300px

top:300px

z-index:1

Visibility:hidden (visible)

Netscape: document.layers["ID"].visibility

IE : document.all["ID"].style.visibility

var layerRef="", styleSwitch="";

function init(){

if (navigator.appName == "Netscape") {

var layerRef="document.layers";

var styleSwitch="";

}else{

var layerRef="document.all";

var styleSwitch=".style";

}}

document.getElementById("ID")



Julio 2003, 28

Teniendo en cuenta el tipo de navegador

var layerRef="", styleSwitch="";

function init(){

if (navigator.appName == "Netscape") {

var layerRef="document.layers";

var styleSwitch="";

}else{

var layerRef="document.all";

var styleSwitch=".style";

}}

n = (document.layers) ? 1:0

ie = (document.all) ? 1:0

n6 = (document.getElementById) ? 1:0

function show() {

if (n) document.uno.visibility = "show"if (n6) document.getElementById('uno').style.visibility = "visible"

if (ie) uno.style.visibility = "visible"

}



Julio 2003, 29

HTML Dinámico (Ejemplo: CAPAS) II

Ejemplo Moscasub

Ejemplo Perros



Julio 2003, 30

<html>

<head><title>Ejemplo Capas - Curso JavaScript</title>

</head>

<body>

Pagina ejemplo de capas

<div id="c1" style="position:absolute;

left:245 px; top:168 px; width:157 px; height:151 px;

z-index:1; visibility: visible">

<img src="imagenes/perrito-marron.jpg">

Esta es la primera capa, la del perro marron </div>

</body>

</html>

Ejemplo de Capas



Julio 2003, 31

Ejemplo de capas (con estilos)

<html>

<head>

<title>Ejemplo Capas - Curso JavaScript</title><STYLE TYPE="text/css">

#c1 { background-color:#66CCFF;

width:150 px; height:150 px;

border-width:5 px;

border-style:ridge;

padding:5%

}

</STYLE></head>

<body>

Pagina ejemplo de capas

<div id="c1" style="position:absolute;

left:250px; top:150px;

z-index:1; visibility: visible;"><img src="imagenes/perrito-marron.jpg" width="157" height="136">

Esta es la primera capa, la del perro marron </div>

</body>

</html>



Julio 2003, 32

Ejemplo Simple: Mostrando y Ocultando Capas

Ejemplo Simple de Capas



Julio 2003, 33

Mostrando y Ocultando Capas (Código, IE)

<html> <head>

<title>Ejemplo Capas - Curso JavaScript</title>

</head>

<body bgcolor="#FFFFFF">

<div id="capamarron" style="position:absolute; width:157px; height:151px; z-index:1;

left: 165px; top: 138px; visibility: hidden">

<img src="imagenes/perrito-marron.jpg" width="223" height="275">

Esta es la primera capa, la del perro marron

</div>

<div id="capanegro" style="position:absolute; width:305px; height:217px; z-index:2;

left: 214px; top: 161px; visibility: hidden">

<img src="imagenes/perrito-negro.jpg" width="306" height="231">

Esta es la segunda capa, la del perro negro

</div>

<input type="button" value="capa1" onMouseOver="document.all['capanegro'].style.visibility='visible';

document.all['capamarron'].style.visibility='hidden';"

onMouseDown="document.all['capanegro'].style.visibility='visible';

document.all['capamarron'].style.visibility='visible';">

<input type="button" value="capa2" onMouseOver="document.all['capanegro'].style.visibility='hidden';

document.all['capamarron'].style.visibility='visible';"

onMouseDown="document.all['capanegro'].style.visibility='visible';

document.all['capamarron'].style.visibility='visible';">

</body>

</html>



Julio 2003, 34

HTML Dinámico (JavaScript + capas)

Controlando capas desde un formulario

Controlando capas con eventos del ratón

Ejemplo. La inclusión de capas en HTML, quepermite superponer, ocultar y mover elementosde forma interactiva.

? JavaScript es un lenguaje de programación que permite añadir dinamismo a las

páginas Web. Para ello se utiliza una marca especial<script> ... </script>

Página con diversos scripts de JavaScript

? El acceso a bases de datos permite tener la información actualizada, y requiere

un esquema de programación cliente/servidor.

Página web de AIMet



Julio 2003, 35

Capas en Movimiento<html><head>

<SCRIPT>

var izquierda=0;

function corre() {object = document.getElementById("c1").style;

if (izquierda < 650) {

izquierda += 10;

object.left = izquierda;

setTimeout("corre()",10)

}

}

</SCRIPT>

<STYLE TYPE="text/css">#c1 { position:relative; top:50 px; left:15 px;

background-color:#990000;width:200 px; z-index=0;

}</STYLE>

</head>

<body>

Para mover una CAPA<br>

<input type="button" value="Pulsa" onclick="corre()">

<DIV ID="c1" ><img src="corredor.gif" width="114" height="134"

alt="" border="0">

</DIV>

</body></html>

Documents

HTML DOM Javascript