Web Dinmica Jos Manuel Gutirrez Universidad de Cantabria

Web Dinámica José Manuel Gutiérrez Universidad de Cantabria gutierjm@unican. es Internet HTML Java. Script http: //personales. unican. es/gutierjm Java

Www. w 3 c. org (WWW Consortium) local Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 2

Estructura de un documento HTML Cada documento HTML tiene asociada una dirección URL (Localizador uniforme de recursos) al que se accede mediante el protocolo HTTP http: //personales. unican. es/gutierjm La estructura de un documento HTML es sencilla: <HTML>  <HEAD> <TITLE> Prueba </TITLE> </HEAD> <BODY> El navegador interpreta y visualiza el contenido </BODY> </HTML> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 3

Comandos HTML El lenguaje HTML posee una serie de marcas/comandos encerradas entre los signos < y > (signo de marca). Los navegadores ignoran cualquier marca que carezca de sentido y la tratan como texto. En el nombre del comando no se distingue el uso de mayúsculas y minúsculas y los cambios de línea y espacios son ignorados al visualizar el contenido. Existen dos tipos de comandos HTML: Ø Comandos con finalizador. Prueba de <B>texto en negrita</B> Ø Comandos sin finalizador. Por ejemplo: <IMG SRC="Imagen. gif"> Algunos comandos admiten parámetros: <IMG SRC="Imagen. gif" ALIGN="RIGHT"> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 4

Formularios. Interacción con el servidor ü La información es enviada a un CGI (Common Gateway Interface) para su procesamiento. ü delimitado por los comandos <FORM> </FORM>. El comando <FORM> admite un parámetro ACTION, cuyo valor es el URL del CGI. Cada campo se define utilizando el comando <INPUT> y puede ser de diferentes tipos, dependiendo del valor de TYPE: text: campo de texto. button: botón. radio: botón de radio. checkbox: caja de selección. submit: botón para el envío. NAME nombre que utilizará el CGI para referirse al campo. reset: borrado. VALUE utilizado para dar al campo valores por defecto. ü SIZE establece el tamaño del campo (número de caracteres) MAXSIZE indica el número máximo de caracteres que puede recibir el campo. Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 5

Ej. de Formulario <html><head> ACTION="mailto: gutierjm@unican. es" <title>Formulario</title></head><body> METHOD="POST“ <H 1>Datos personales</H 1> <FORM ACTION="http: //servidor/Directorio/Nombre. cgi"> ENCTYPE="text/plain" Nombre <INPUT TYPE="text" NAME="Campo 1" SIZE=25> Telé fono <INPUT TYPE="text" NAME="Campo 2" SIZE=10> <BR> Domicilio <INPUT TYPE="text" NAME="Campo 3" SIZE=43> <BR> Estado civil: <INPUT TYPE="radio" NAME="ec" VALUE="S">Soltero <INPUT TYPE="radio" NAME="ec" VALUE="C">Casado <INPUT TYPE="radio" NAME="ec" VALUE="D">Divorciado <INPUT TYPE="radio" NAME="ec" VALUE="V">Viudo <BR> Estudios realizados: <SELECT NAME="Estudios"> <OPTION>Sin estudios <OPTION SELECTED>Primarios <OPTION>Bachillerato <OPTION>Universitarios </SELECT> <INPUT TYPE="checkbox" NAME="Cliente"> Cliente actual <BR> Observaciones: <TEXTAREA NAME="Observ" ROWS=3 COLS=35> </TEXTAREA> <BR> <INPUT TYPE="submit" VALUE="Enviar"> <INPUT TYPE="reset" VALUE="Borrar"> </FORM> </body></html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 6

Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 7

XML: Esquema para datos Meteorológicos XML Schema <? xml version="1. 0" encoding="UTF-8"? > <Class xmlns: xsi="http: //www. w 3. org/2001/XMLSchema-instance" xsi: no. Namespace. Schema. Location="meteo. xsd"> <Stream model="Wave model"> <Version value="4096"> <Type type="Forecast"> <Date>1967 -08 -13</Date> <Time>12: 00</Time> XML <Step>24</Step> <Number>0</Number> Instance <Level type="Pressure level">1000</Level> <Parameter table="ECMWF">Z</Parameter> </Type> </Version> </Stream> </Class> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 8

Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 9

Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 10

XML: Fuentes de información http: //wwws. sun. com/software/xml/ Web Dinámica (José M. Gutiérrez, Santander) http: //www. oasis-open. org/cover/sgml-xml. html 2005, slide 11

SVG. Scalable Vector Graphics En ocasiones, los formatos gráficos de mapas de bits, o comprimidos, no resultan apropiados para mostar información en la Web. Ejemplo svg. <? xml version="1. 0" encoding="iso-8859 -1"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 1. 0//EN" "http: //www. w 3. org/TR/2001/REC-SVG 20010904/DTD/svg 10. dtd"> <svg width= "500" height="500" view. Box="-100 200 200" xmlns="http: //www. w 3. org/2000/svg">  <g style="stroke-width: 0. 5; fill: blue; shaperendering: default"> <circle cx="-26. 4095" cy="6. 19866" r="0. 5"/> <circle cx="-24. 9492" cy="13. 0801" r="0. 5"/> <circle cx="-47. 9709" cy="63. 9941" r="0. 5"/> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 12

Math. ML. Mathematica Markup Languaje La notación matemática es de un extremado rigor y está libre de ambigüedad. Math. ML permite codificar objetos matemáticos definiendo tanto la notación que representa al objeto matemático, como la estructura del mismo objeto: • Marca de presentación / estructura. • Marca de contenido. • Math. ML Interface. HTML 4. 0, etc. Contenido Web Dinámica (José M. Gutiérrez, Santander) Estructura 2005, slide 13

Hojas de estilo CSS Con el HTML se intentó desde un principio la definición de estilos lógicos que se 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 mejorar su presentación. Hemos llegado a un HTML demasiado complejo para sus objetivos iniciales y en muchos casos incompatible entre los principales navegadores. Las hojas de estilo vienen a intentar volver a separar en un documento el contenido del estilo físico. CSS son las siglas de "Cascade Style. Sheet" y se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, trata de dar la separació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 de las etiquetas HTML, y aplicarlos en los bloques de texto en los que se quieran aplicar, en lugar de cómo parámetros de las etiquetas. Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 14

Aplicación Tenemos varias posibilidades para definir un estilo: 1. Directamente en la etiqueta en la queremos usarlo. 2. Definirlo globalmente para toda la página html. 1. Directamente en la etiqueta en la queremos usarlo: <ETIQUETA STYLE=propiedad 1: valor; . . ; propiedad 2: valor; >. . </ETIQUETA> <HTML> <HEAD> <TITLE>ejemplo 1</TITLE> </HEAD> <BODY> <P STYLE=color: blue; font-size: 18 pt; > Este pá rrafo tiene aplicado un estilo <P> y este otro no. </BODY> </HTML> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 15

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"> <!— Etiqueta 1: {propiedad 1: valor; . . . propiedadn: valor} /* podemos introducir comentarios */. . . Etiquetam: {propiedad 1: valor; . . . } //--> </STYLE> Web Dinámica (José M. Gutiérrez, Santander) <HTML> <HEAD> <TITLE>ejemplo 3</TITLE> <STYLE> <!-P {font-family: Verdana; color=green} B {color=blue} --> </STYLE> </HEAD> <BODY> <P>Fuente de estilo Verdana y color verde, la <B> negrita </B> en azul </BODY> </HTML> 2005, slide 16

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 de la cabecera del documento con la etiqueta: <LINK REL="stylesheet" TYPE="text/css" HREF="estilo 1. css"> /* Fichero estilo 1. css */ <!-P {font-family: Verdana; color=green} B {color=blue} --> Web Dinámica (José M. Gutiérrez, Santander) <HTML> <HEAD> <TITLE>ejemplo 3</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo 1. css"> </HEAD> <BODY> <P>Fuente de estilo Verdana y color azul, la <B> negrita </B> en verde </BODY> </HTML> 2005, slide 17

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 manera que los estilos definidos para etiquetas padres serán heredados por los hijos. Sin embargo si tenemos definido un estilo para una etiqueta "padre", podremos definir un estilo distinto para una etiqueta "hija", el cual prevalece sobre el heredado. <HTML> <HEAD><TITLE>Ejemplo 4</TITLE> <STYLE> <!-P {font-family: Verdana; color=green} B {color=blue} --> </STYLE> </HEAD> <BODY> <P><I>La letra cursiva hereda el estilo del pá rrafo</I> mientras que <B>la negrita tiene su estilo propio</B> </BODY> </HTML> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 18

Clases Una clase es una definición de estilo que en principio no está asociado a alguna etiqueta 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 {propiedad 1: valor; propiedad 2: valor; . . . } Para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parámetro CLASS <etiqueta CLASS="Nombre_de_la_Clase">. . </etiqueta> Web Dinámica (José M. Gutiérrez, Santander) <HTML><HEAD> <TITLE>ejemplo 7</TITLE> <STYLE TYPE="text/css"> <!-BODY {font-family: Verdana; color=blue; } B, P {color=red; }. Baqua {color=aqua; } --> </STYLE> </HEAD><BODY> El texto está escrito en azul <P>los pá rrafos en rojo</P>así como <B> la negrita </B>, <B CLASS="Baqua">pero en esta otra negrita estoy aplicando una clase. </B> </BODY></HTML> 2005, slide 19

Ejemplo de hojas de estilo I /*fichero estilo 2. css */ <!-/* estilo para el documento */ BODY {font-family: Verdana, Arial; color=blue} /* estilos para otras etiquetas */ B, TD {color=red} --> Web Dinámica (José M. Gutiérrez, Santander) <HTML> <HEAD><TITLE>ejemplo 5</title> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo 2. css"> <STYLE> <!-TD B {color=olive} UL B {color=purple} --> </STYLE></HEAD><BODY> Texto normal <B>y texto en negrita</B>, según el estilo que 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> 2005, slide 21

Ejemplo de hojas de estilo II La etiqueta A, A: link {propiedad 1: valor; propiedad 2: valor; . . . } A: visited {propiedad 1: valor; propiedad 2: valor; . . . } A: active {propiedad 1: valor; propiedad 2: valor; . . . } A: hover {propiedad 1: valor; propiedad 2: valor; . . . } <HTML> <HEAD> <TITLE>ejemplo 6</TITLE> <STYLE TYPE="TEXT/CSS"> <!-A: link {color: #0000 ff; } A: visited {color: #00 ff 00; } A: active {color: #cccccc; } A: hover {color: #f 3 fe 1 e; } --> </STYLE> <BODY> <P>Un <a href="http: //www. unican. es"> enlace </A> de prueba </BODY></HTML> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 22

Ejemplos de hojas de estilos III /* fichero de estilo */ P { font-size : 12 pt; font-family : arial, helvetica; font-weight : normal; } H 1 { font-size : 36 pt; font-family : verdana, arial; text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10 pt; font-family : verdana, arial; text-align : center; background-color : #666666; } BODY { background-color : #006600; font-family : arial; color : White; } Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 23

Ejemplo de estilos IV Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 24

HTML Dinámico (introducción) Elementos estándar (multiplataforma), independientes del navegador: HTML + DOM + Java. Script <html>. . . </html> window. document, . . . <script>. . . </script> DHTML: Es un término de marketing, empleado por Netscape y Microsoft, para describir las tecnologías soportadas en la version 4 de sus respectivos navegadores. Y por ello tiene una gran dependencia con el navegador que emplemos. Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 25

Elementos estándar (multiplataforma), independientes del navegador: HTML Dinámico (Cliente) HTML + DOM + Java. Script <html>. . . </html> window. document, . . . <script>. . . </script> Capas + Estilos + Java. Script <div>. . . </div> css <script>. . . </script> Elementos incorporados en los propios navegadores, y por tanto no es necesario descargarse ningún software. Flash <object>. . . </object> Java <object>. . . </object> VRML <object>. . . </object> Elementos externos a los navegadores, que son incrustados en las páginas web (<object>). Para su funcionanmiento en una página web necesitan de un software especial o plugin. Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 26

HTML Dinámico (Ejemplo: VRML) • Lenguaje de Modelado para Realidad Virtual. Creación de mundos virtuales, objetos 3 D y escenarios 3 D, posibilitando la interacción con los objetos, y movimiento del espectador EJEMPLO http: //www. canoma. com/vrml http: //web 3 d. about. com/ http: //www. cai. com/cosmo/ Web Dinámica (José M. Gutiérrez, Santander) http: //www. web 3 d. org 2005, slide 27

HTML Dinámico (Ejemplo: FLASH) Programas de edición de animaciones, que permiten desarrollar fácilmente ficheros que se pueden incrustar en una página Web. Ejemplo Toda la programación se realiza de forma visual (arrastrando objetos, etc. ). El código resultante es específico de cada producto y se requiere un plugg-in en el navegador para poder interpretarlo. http: //www. plusmedia. es/ http: //www. flash-es. net/topten. html http: //www. programatium. com/flash/ http: //www. macromedia. com Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 28

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 contenido diná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ón del ususario la respuesta a esta petición sea diferente. • También es muy frecuente encontrar páginas web que muestran información originada en una base de datos. Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 29

Tecnología Java es un potente lenguaje de • Independencia de plataforma programación orientado a objetos. Todo el entorno de desarrollo (SDK) para crear ficheros. class con código pseudocompilado para intérpretes Java. Los programas son compilados en ficheros “pseudo-ejecutables” que se pueden ser interpretados: • Orientado a objetos – (aplicaciones) máquina virtual, o – (applets) plug-in de un navegador Web. Tiene reglas estrictas sobre cómo declarar y utilizar variables. (control estricto de tipos) (UNIX, Windows, Mac, . . . ). (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 Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 30

HTML Dinámico (Ejemplo: JAVA) Java: Lenguaje de programación desarrollado para la Web. Su principal fundamento es, que todo programa, puede ejecutarse, sin ser modificado, en cualquier plataforma. http: //java. sun. com/ Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 31

Tecnologías Actuales Java. TM technologies: • J 2 SETM , • J 2 EETM , • J 2 METM, • JAX XML. SDK (Standard Development Kit) JRE (Java Run. Time Enviroment) Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 32

Elementos de Desarrollo para Java • Para trabajar con Java 1. 0 o Java 1. 1 • Java 1. 0 – 212 Clases, 8 paquetes • Java 1. 1 – 504 Clases, 23 paquetes –Mejopras en el rendimiento de la VM • Java 1. 2 – 1520 Clases, 59 paquetes –Plataforma Java 2. 0 • Java 1. 4. 1 (Beta), Julio 2002 –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, . . . • Java Runtime Environment (JRE) Contiene todo lo necesario para ejecutar programas Java pero no para desarrollarlos 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 Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 33

Ejemplo de un Applet JAVA Mi. Applet. java import java. applet. *; import java. awt. *; public class Mi. Applet extends Applet { public void paint (Graphics g){ g. draw. Line(1, 1, 50); g. fill. Oval(40, 20, 20); }} Ejemplo. Applet. html <html><head></head><body> <applet code="Mi. Applet. class" width="100" height="100"> </body></html> Ver Ejemplo Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 34

Otras Tecnologías Web. Net (Microsoft) Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 35

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: 300 px height: 300 px left: 300 px top: 300 px z-index: 1 Visibility: hidden (visible) Netscape: IE: var layer. Ref="", style. Switch=""; function init(){ if (navigator. app. Name == "Netscape") { var layer. Ref="document. layers"; var style. Switch=""; }else{ var layer. Ref="document. all"; var style. Switch=". style"; }} document. layers["ID"]. visibility document. all["ID"]. style. visibility document. get. Element. By. Id("ID") Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 36

Teniendo en cuenta el tipo de navegador var layer. Ref="", style. Switch=""; function init(){ if (navigator. app. Name == "Netscape") { var layer. Ref="document. layers"; var style. Switch=""; }else{ var layer. Ref="document. all"; var style. Switch=". style"; }} n = (document. layers) ? 1: 0 ie = (document. all) ? 1: 0 n 6 = (document. get. Element. By. Id) ? 1: 0 function show() { if (n) document. uno. visibility = "show" if (n 6) document. get. Element. By. Id('uno'). style. visibility = "visible" if (ie) uno. style. visibility = "visible" } Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 37

Ejemplo de Capas <html> <head> <title>Ejemplo Capas - Curso Java. Script</title> </head> <body> Pagina ejemplo de capas <div id="c 1" 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> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 38

Ejemplo de capas (con estilos) <html> <head> <title>Ejemplo Capas - Curso Java. Script</title> <STYLE TYPE="text/css"> #c 1 {background-color: #66 CCFF; width: 150 px; height: 150 px; border-width: 5 px; border-style: ridge; padding: 5% } </STYLE> </head> <body> Pagina ejemplo de capas <div id="c 1" style="position: absolute; left: 250 px; top: 150 px; 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> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 39

Ejemplo Simple: Mostrando y Ocultando Capas Ejemplo Simple de Capas Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 40

Mostrando y Ocultando Capas (Código, IE) <html> <head> <title>Ejemplo Capas - Curso Java. Script</title> </head> <body bgcolor="#FFFFFF"> <div id="capamarron" style="position: absolute; width: 157 px; height: 151 px; z-index: 1; left: 165 px; top: 138 px; 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: 305 px; height: 217 px; z-index: 2; left: 214 px; top: 161 px; 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="capa 1" on. Mouse. Over="document. all['capanegro']. style. visibility='visible'; document. all['capamarron']. style. visibility='hidden'; " on. Mouse. Down="document. all['capanegro']. style. visibility='visible'; document. all['capamarron']. style. visibility='visible'; "> <input type="button" value="capa 2" on. Mouse. Over="document. all['capanegro']. style. visibility='hidden'; document. all['capamarron']. style. visibility='visible'; " on. Mouse. Down="document. all['capanegro']. style. visibility='visible'; document. all['capamarron']. style. visibility='visible'; "> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 41

HTML Dinámico (Java. Script + capas) Java. Script 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 Java. Script Ejemplo. La inclusión de capas en HTML, que permite superponer, ocultar y mover elementos de forma interactiva. Controlando capas desde un formulario Controlando capas con eventos del ratón 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 Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 42

Capas en Movimiento <html><head> <SCRIPT> var izquierda=0; function corre() { object = document. get. Element. By. Id("c 1"). style; if (izquierda < 650) { izquierda += 10; object. left = izquierda; set. Timeout("corre()", 10) } } </SCRIPT> <STYLE TYPE="text/css"> #c 1 {position: relative; top: 50 px; left: 15 px; background-color: #990000; width: 200 px; z-index=0; }</STYLE> </head> <body> Para mover una CAPA <input type="button" value="Pulsa" onclick="corre()"> <DIV ID="c 1" > <img src="corredor. gif" width="114" height="134" alt="" border="0"> </DIV> </body></html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 43

Objetos y Eventos con Java. Script José M. Gutiérrez Universidad de Cantabria gutierjm@unican. es Internet HTML Java. Script Java

Programación: Java. Script vs Java ü Java. Script es un lenguaje simple ü para usos sencillos. Es relativamente fácil de utilizar. ü ü No es necesario ningún Kit de desarrollo, ya que sólo se precisa escribir scripts. Los scripts se insertan directamente en el código HTML, por lo que no hay necesidad de compilarlo. Está basado en objetos, que pueden utilzarse en un script. Es muy poco restrictivo en cuanto a la declaración y uso de variables. 1. Java es un potente lenguje de 2. programación orientado a objetos. Es complicado de utilizar. 3. 4. 5. 6. Necesita JDK para crear ficheros. class con códigopseudocompilado para intérpretes Java. Los programas son compilados en ficheros “ejecutables” o en “applets” que se pueden incrustar en páginas Web. Es un completo lenguaje de programación orientada a objetos. Tiene reglas estrictas sobre cómo declarar y utilizar variables. Ambos lenguajes son independientes de plataforma y sus programas pueden ejecutarse sobre Internet, en una página Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 45

Estructura del documento (DOM) Un documento tiene asociada una jerarquía de componentes que los relaciona entre sí. En este ejemplo: dos imágenes, un enlace y un formulario. window +--frames +--location +--history +--document +--forms | | | elements (text, button) | +--layers +--links +--Plugin +--anchors Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 46

Programación Orientada a Objetos En la programación orientada a objetos, el desarrollo de una aplicación se organiza en torno a los datos, en torno a los cuales se organizan los procesos. Para ello, estos lenguajes tienen la posibilidad de: – Definir objetos compuestos de un conjunto de variables (o propiedades) y funciones (o métodos) asociadas. – Definir una estructura jerárquica, donde se heredan variables y métodos de padres a hijos. – Control de sucesos a través de la estructura gerjárquica definida. Facilidad de desarrollo. Reusabilidad del código. Fácil modificación – de clases Web Dinámica (José M. Gutiérrez, Santander) – estructural Fácil comprensión. 2005, slide 47

Dos Formas de Incrustar Java. Script en HTML <HTML> <HEAD> <SCRIPT LANGUAGE="Java. Script">  </SCRIPT> </HEAD> Ø Incluyendo Scripts Ø Acciones en las Marcas <> <BODY> <P>Hola otra vez ! </P> </BODY> </HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUT TYPE="BUTTON" ONCLICK="alert('Hola !')"> </FORM> </BODY> </HTML> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 48

Más ejemplos simples Otro ejemplo, ahora en una propiedad del body: <BODY ONLOAD="alert('está s entrando en la pagina')"> Generamos un sencillo script para añadir información al final de una página Web, en concreto la fecha de modificación. <SCRIPT LANGUAGE="JAVASCRIPT"> document. write("Ultima modificacion: "); document. write(document. last. Modified) </SCRIPT> Java. Script diferencia mayúsculas y minúsculas Se suele tomar como convenio denotar las variables y funciones de la forma: last. Modified alert Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 49

Valores, variables y literales Numeros, como 42 o 3. 14159. Logicasl (Booleanas) <true> or <false>. Cadenas, utilizadas del mismo modo que en Java!. Valores null, denota una variable nula; undefined, propiedad o variable indefinida Variables son nombres simbólicos de los valores. Comienzan con una letra o con ("_") seguidos de caracteres o dígitos (0 -9). Variables Un string literal es cero o más caracteres encerrados entre (") o (') comillas. Ejemplos de string literales: “hola" ‘Java' Literales “una linea n otra linea" Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 50

Manejo de Literales. -1 <html> <head> <title>strings_1</title>  <SCRIPT LANGUAGE="JAVASCRIPT"> cafes = ["French Roast", "Monka", "Dromedario"]; document. write("<strong> MARCAS de CAFE </strong> document. write(“marca t =+cafes[0]+" "); document. write(cafes[1]+" "); document. write(cafes[2]+" "); </SCRIPT>  </head> <body> </html> Web Dinámica (José M. Gutiérrez, Santander) <hr>"); Caracteres Especiales b Backspace f Form feed n New line r Carriage return t Tab ' Apostrophe or single quote " Double quote 2005, slide 51

Manejo de Literales. -2 <html> <head> Ejemplo 1 de tabla de Sumar <title>strings_2</title>  <SCRIPT LANGUAGE="JAVASCRIPT"> num = [1, 2, 3, 4, 5, 6, 7, 8, 9 ]; document. write("<strong> <H 1>TABLA de SUMAR</H 1></strong> document. write("1+"+num[0]+"t = t"+eval(1+num[0])+" "); document. write("1+"+num[1]+"="+eval(1+num[1])+" "); document. write("1+"+num[2]+"="+eval(1+num[2])+" "); document. write("1+"+num[3]+"="+eval(1+num[3])+" "); document. write("1+"+num[4]+"="+eval(1+num[4])+" "); </SCRIPT>  </head> <hr>"); <body> </html> Propuesta: ¿cómo hacer la tabla de cualquier otro número? Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 52

Introducción a las Variables <html> <head> Ejemplo 2 de tabla de Sumar Interactuar con <title>strings_2</title>  <SCRIPT LANGUAGE="JAVASCRIPT"> num = [1, 2, 3, 4, 5, 6, 7, 8, 9 ]; var Numerode. Tabla; Numerode. Tabla=prompt("Quieres la tabla de SUMAR del número? ", "0"); el usuario document. write("<strong> <H 1>TABLA de SUMAR delt" +Numerode. Tabla+"</H 1></strong> <hr>"); document. write(Numerode. Tabla+"+t"+num[0]+"t = t"+eval(Numerode. Tabla)+num[0])+" "); document. write(Numerode. Tabla+"+t"+num[1]+"t = t"+eval(Numerode. Tabla)+num[1])+" "); document. write(Numerode. Tabla+"+t"+num[2]+"t = t"+eval(Numerode. Tabla)+num[2])+" "); document. write(Numerode. Tabla+"+t"+num[3]+"t = t"+eval(Numerode. Tabla)+num[3])+" "); </SCRIPT> </head> <body> Prompt(String, Valor por defecto) </body> </html> Propuesta: ¿cómo hacer la tabla de cualquier otro número? Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 53

Funciones. . . . 1 <html> <head> <title>Var 1</title>  <SCRIPT LANGUAGE="JAVASCRIPT"> function square(number) { return number * number; } </SCRIPT>  </head> Sin declarar variables Para definir una función function nombre (parametros) { Sentencias. . } <body> <input name="entra" type="text" value=“ 0"> <input name="sale" type="text" value=""> <input type="button" value="x^2" onclick="sale. value=square(entra. value)"> </body> </html> Propuesta: Realizar la tabla de sumar de cualquier número usando una función Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 54

Funciones. . . . 2 Declarando variables <html> <head> <title>Var 2</title>  <SCRIPT LANGUAGE="JAVASCRIPT"> var resul=0; function square(number) { resul= number * number; } </SCRIPT>  </head> <body> <input name="entra" type="float" value="2"> <input type="button" value="x^2" onclick="eval(square(entra. value)); alert(resul)"> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 55

Funciones. . . . 3 <html> <head> <title>Var 3</title> <SCRIPT LANGUAGE="JAVASCRIPT"> variable="SOY GLOBAL"; function Var. Global() { alert(variable); } function Var. Local() { variable="SOY LOCAL"; alert(variable); } </SCRIPT>  </head> <body> <input type="button" value="Muestra Global" onclick="Var. Global()"> <input type="button" value="Muestra Local" onclick="Var. Local()"> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) Variables Globales y Locales 2005, slide 56

Operadores Aritméticos 1 <html> <head> <title>Var 4</title> </head> x += y x -= y x *= y x /= y x %= y x=x+y x=x-y x=x*y x=x/y x=x%y <body> Numero <input <input type="text" name="entra" value=1> type="button" value="x+=2" onclick="entra. value+=2"> type="button" value="x -= 1" onclick="entra. value-=1"> type="button" value="x *= 2" onclick="entra. value*=2"> type="button" value="x /= 3" onclick="entra. value/=3"> type="button" value="x %= 5" onclick="entra. value%= 5"> type="button" value="Inicio" onclick="entra. value=1"> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 57

Sentencias. . . If. . Else if (condition) { statements 1 } [else { statements 2 }] function Nota(a, b) { var media=(parse. Int(a)+parse. Int(b))/2; var final=""; if (media<5) { final="Suspenso"; } else { final="Aprobado"; } document. Notas. Calificar. value=final; //return final; } <form name="Notas"> "HTML "<input type="text" name="Html" value=""> "Java. Script "<input type="text" name="JS" value=""> <input type="button" name="Java" value="Calificación" onclick="Nota(Html. value, JS. value)"> <input type="text" name="Calificar"> </form> Propuesta: Ampliar calificación a Notable y Sobresaliente Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 58

Bucles. . . For (1) for (initial. Expression; condition; crement. Expression) { statements } function Nota(a, b) { var media=(parse. Int(a)+parse. Int(b))/2; var final=""; if (media<5) { final="Suspenso"; } else { final="Aprobado"; } document. Notas. Calificar. value=final; //return final; } <form name="Notas"> "HTML "<input type="text" name="Html" value=""> "Java. Script "<input type="text" name="JS" value=""> <input type="button" name="Java" value="Calificación" onclick="Nota(Html. value, JS. value)"> <input type="text" name="Calificar"> </form> Propuesta: Utilizar un ciclo for para realizar el ejemplo de la tabla de sumar de un que elija el usuario Web Dinámica (José número M. Gutiérrez, Santander) 2005, slide 59

$Bucles. . . For. (2) <html> <head> <title>For_2</title> <SCRIPT> function Tabla. Sumar(num) { for$

Bucles. . . For. (2) <html> <head> <title>For_2</title> <SCRIPT> function Tabla. Sumar(num) { for (var i=1; i < 11; i++) { document. writeln(i+"+t"+num+"t =t "+eval(i+eval(num))+" "); } } num=prompt("Quieres la tabla de SUMAR del número? ", "0"); Tabla. Sumar(num); </SCRIPT> </head> <body> </html> Propuesto: Se genere de forma aleatoria una quiniela de 15 resultados con “ 1”, “X” y “ 2” Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 60

Bucles. . . For. (3) <SCRIPT> function Quiniela() { for (var i=0; i < 16; i++) { var casilla=(Math. floor(3*Math. random())); if (casilla==0){ rellenar="1"} else{ if (casilla==1){rellenar="X"} else {rellenar="2"} } document. write("Casilla ttt"+i+"tt=t"+rellenar +" "); } } </SCRIPT> </head> <body onload="Quiniela()"> </body> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 61

Bucles. . . While. (1) En este ejemplo: La máquina piensa un número y el usuario tiene que acertarlo en 10 intentos <SCRIPT> pregunta="¡Que número he pensado del 0 al 10? "; var acierto=Math. round(10*Math. random()); var bien='<img src="bien. gif" width="87" height="128" border="0">'; function Acertijo() { var i=0; var respuesta=prompt(pregunta, "0"); while ((i<10)&(respuesta != acierto)) { var respuesta=prompt(pregunta, "0"); if(respuesta == acierto) { document. write("Correcto = "+bien+acierto +" "); } } } </SCRIPT> </head> <body onload="Acertijo()"> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 62

Recursividad. . . 1 <SCRIPT LANGUAGE="JAVASCRIPT"> function Factorial(num){ if (num>1){ return num*Factorial(num-1); } else { return num; } } </SCRIPT> </head> <body> <SCRIPT LANGUAGE="JAVASCRIPT"> var numero=prompt("Dame un número entero", "0"); var calcula=Factorial(numero); document. write("Factorial de "+numero+" = <b>"+calcula+"</b>"); </SCRIPT> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 63

Recursividad. . . 2 CUIDADO con la Recursividad <SCRIPT LANGUAGE="JAVASCRIPT"> function Test(item){ //var pregunta = "¿Cuánto vale 2+2? "; var acierto =eval(item); var pregunta= "¿Cuánto vale " + item+"? "; var bien='<img src="bien. gif" width="87" height="128" border="0">'; var mal='<img src="mal. gif" width="87" height="133" border="0">'; var respuesta=prompt(pregunta, "0"); return (respuesta == acierto) ? bien : Test(item); } </SCRIPT> </head> <body> <SCRIPT LANGUAGE="JAVASCRIPT"> var resultado=Test("2+2"); document. write(resultado); </SCRIPT> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 64

Recursividad. . . 3 CONTROLAR la Recursividad <SCRIPT LANGUAGE="JAVASCRIPT"> function Test(item, intentos){ //var pregunta = "¿Cuánto vale 2+2? "; var acierto =eval(item); var pregunta= "¿Cuánto vale " + item+"? "; var bien='<img src="bien. gif" width="87" height="128" border="0">'; var mal='<img src="mal. gif" width="87" height="133" border="0">'; var respuesta=prompt(pregunta, "0"); if (intentos >1){ return (respuesta == acierto) ? bien : Test(item, intentos-1); } else { return (respuesta == acierto) ? bien : mal; } } </SCRIPT> <body> <SCRIPT LANGUAGE="JAVASCRIPT"> var resultado=Test("2+2", 3); document. write(resultado); </SCRIPT> </body> Propuesta: Utilizar la recursividad para el ejemplo de acertar un número N con máximo de intentos Web Dinámicadel (José 1 M. al Gutiérrez, Santander) 2005, slide 65

El lenguaje: Sintáxis y variables La sintaxis de Java. Script es muy parecida a la de C++. Las instrucciones terminan con un punto y coma y se agrupan mediante llaves; una doble barra (//) indica que el resto de la línea es un comentario. Los operadores matemáticos también son los mismos: + (que también sirve para cadenas), -, *, /, % (módulo), ++ y --. Las asignaciones (=) son también como en C y C++, incluyendo +=, -=, etc. En cuanto a los operadores lógicos tenemos ||, &&, !, ^ (xor), << y >> y las comparaciones son <, >, <=, >=, == y !=. Si la declaración de una variable se hace dentro de una función, dicha variable es local, sino es global. var Soy. Una. Variable; Soy. Una. Variable=2. 1; var Un. Array = new Array(); Un. Array[1]=1; Un. Array[2]="soy el segundo"; Web Dinámica (José M. Gutiérrez, Santander) Todas las variables numéricas son floating-point: 2. 1, 21 e-1 Creamos objetos de clases predefinidas. 2005, slide 66

Palabras reservadas break case continue default delete do else export false for function if import in new null return switch this true typeof var void while with Palabras reservadas por ECMA para futuras extensiones (no incluidas en v 1. 2). catch class const debugger enum extends finally super throw try parse. Float frames Function find open menubar Na. N resizeto. . . Otros símbolos pueden redefinirse: Alert is. Finite Length Math close Object Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 67

Ejemplo de tratamiento de variables <html> <head> <script language="Java. Script">  </script> </head> <body> <form> <input type="button" value="Calculate" on. Click="calculation()"> </form> </body> </html> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 68

La función factorial (recursiva e iterativa) <script language="javascript"> function factorial(n) { var result; if ((n == 0) || (n == 1)){ return 1 }else { result = (n * factorial(n-1) ); return result } function factorial(n) { var fact; for (i=1, fact=1; i<=n; i++){ fact*=i; } return fact; } } </script> <body onload="alert(factorial(6))"> <input type="text" name="entrada"> <input type="button" value="calcula" onclick="alert(factorial(entrada. value))"> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 69

Estructuras de Control Las estructuras if. . . else, for, while funcionan igual que sus equivalentes en C. La única diferencia con dicho lenguaje: la estructura for. . . in. for (contador in Un. Array) { document. write(Un. Array[contador]) }; <script language="javascript"> var texto = new Array("hola"); var numero = new Array(1, 2, 3, 4); var win=window. open('', 'ventana'); for (i in texto) { win. document. write(texto[i]); } for (i in numero) { win. document. write(numero[i]); } </script> Web Dinámica (José M. Gutiérrez, Santander) 2005, slide 70