1 / 70

Web Dinámica

Web Dinámica. José Manuel Gutiérrez Universidad de Cantabria gutierjm@unican.es. JavaScript. Java. Internet HTML. http://personales.unican.es/gutierjm. Www.w3c.org (WWW Consortium). local. Estructura de un documento HTML.

herve
Download Presentation

Web Dinámica

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Www.w3c.org (WWW Consortium) local

  3. 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 HTTPhttp://personales.unican.es/gutierjm • La estructura de un documento HTML es sencilla: <HTML> <!-- Documento HTML de prueba --> <HEAD> <TITLE> Prueba </TITLE> </HEAD> <BODY> El navegador interpreta y visualiza el contenido </BODY> </HTML>

  4. 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">

  5. 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.reset: borrado. NAME nombre que utilizará el CGI para referirse al campo. 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.

  6. Ej. de Formulario <html><head><title>Formulario</title></head><body><H1>Datos personales</H1><FORMACTION="http://servidor/Directorio/Nombre.cgi">Nombre <INPUT TYPE="text" NAME="Campo1" SIZE=25> Tel&eacute;fono <INPUT TYPE="text" NAME="Campo2" SIZE=10> <BR>Domicilio <INPUT TYPE="text" NAME="Campo3" 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><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><BR>Observaciones:<TEXTAREA NAME="Observ" ROWS=3 COLS=35></TEXTAREA><BR><BR><INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Borrar"></FORM></body></html> ACTION="mailto:gutierjm@unican.es" METHOD="POST“ ENCTYPE="text/plain"

  7. XML: Esquema para datos Meteorológicos XML Schema <?xml version="1.0" encoding="UTF-8"?> <Class xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="meteo.xsd"> <Stream model="Wave model"> <Version value="4096"> <Type type="Forecast"> <Date>1967-08-13</Date> <Time>12:00</Time> <Step>24</Step> <Number>0</Number> <Leveltype="Pressure level">1000</Level> <Parametertable="ECMWF">Z</Parameter> </Type> </Version> </Stream> </Class> XML Instance

  8. XML: Fuentes de información http://wwws.sun.com/software/xml/ http://www.oasis-open.org/cover/sgml-xml.html

  9. 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 "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width= "500" height="500" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg"> <!--Imprimimos los patrones [5537]"--> <g style="stroke-width:0.5; fill:blue; shape-rendering: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"/>

  10. MathML. Mathematica Markup Languaje • La notación matemática es de un • extremado rigor y está libre de ambigüedad. • MathML 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. • MathML Interface. HTML4.0, etc. Contenido Estructura

  11. 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 HTMLdemasiado 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 StyleSheet" 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.

  12. 1. Directamente en la etiqueta en la que queremos usarlo: <ETIQUETASTYLE=propiedad1:valor;....;propiedad2:valor;>....</ETIQUETA> <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> 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.

  13. <STYLETYPE="text/css"><!—Etiqueta1:{propiedad1:valor;...propiedadn:valor}/* podemos introducir comentarios */...Etiquetam:{propiedad1:valor;...}//--></STYLE> <HTML><HEAD> <TITLE>ejemplo3</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> 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.

  14. /* Fichero estilo1.css */ <!--P{font-family:Verdana;color=green}B {color=blue}--> <HTML><HEAD> <TITLE>ejemplo3</TITLE><LINKREL="stylesheet" TYPE="text/css" HREF="estilo1.css"></HEAD><BODY><P>Fuente de estilo Verdana y color azul, la <B> negrita </B> en verde</BODY></HTML> 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: <LINKREL="stylesheet" TYPE="text/css" HREF="estilo1.css">

  15. <HTML><HEAD><TITLE>Ejemplo4</TITLE><STYLE><!--P{font-family:Verdana;color=green}B{color=blue}--></STYLE></HEAD><BODY><P><I>La letra cursiva hereda el estilo del p&aacute;rrafo</I> mientras que <B>la negrita tiene su estilo propio</B></BODY></HTML> 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.

  16. <HTML><HEAD> <TITLE>ejemplo7</TITLE><STYLETYPE="text/css"> <!-- BODY{font-family:Verdana;color=blue;}B,P{color=red;}.Baqua{color=aqua;}--></STYLE></HEAD><BODY>El texto est&aacute; escrito en azul<P>los p&aacute;rrafos en rojo</P>as&iacute; como <B> la negrita </B>,<BCLASS="Baqua">pero en esta otra negrita estoy aplicando una clase.</B></BODY></HTML> 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 {propiedad1:valor;propiedad2:valor;...} Para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parámetro CLASS <etiquetaCLASS="Nombre_de_la_Clase">....</etiqueta>

  17. aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white y yellow Propiedades

  18. <HTML><HEAD><TITLE>ejemplo5</title><LINKREL="stylesheet" TYPE="text/css"HREF="estilo2.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><TABLEBORDER="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 */<!--/* estilo para el documento */BODY {font-family:Verdana,Arial; color=blue}/* estilos para otras etiquetas */B,TD {color=red}--> Ejemplo de hojas de estilo I

  19. 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><STYLETYPE="TEXT/CSS"> <!--A:link{color:#0000ff;}A:visited{color:#00ff00;}A:active{color:#cccccc;}A:hover{color:#f3fe1e;}--></STYLE><BODY><P>Un <ahref="http://www.unican.es"> enlace </A> de prueba</BODY></HTML> Ejemplo de hojas de estilo II

  20. /* 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;} Ejemplos de hojas de estilos III

  21. Ejemplo de estilos IV

  22. HTML Dinámico (introducción) Elementos estándar (multiplataforma), independientes del navegador: HTML + DOM + JavaScript <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.

  23. HTML Dinámico (Cliente) Elementos estándar (multiplataforma), independientes del navegador: HTML + DOM + JavaScript <html> ... </html> window.document, ... <script> ... </script> Capas + Estilos + JavaScript <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.

  24. HTML Dinámico (Ejemplo: VRML) • Lenguaje de Modelado para Realidad Virtual. Creación de mundos virtuales, objetos 3D y escenarios 3D, posibilitando la interacción con los objetos, y movimiento del espectador EJEMPLO http://www.canoma.com/vrml http://web3d.about.com/ http://www.cai.com/cosmo/ http://www.web3d.org

  25. 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 El código resultante es específico de cada producto y se requiere un plugg-in en el navegador para poder interpretarlo. Toda la programación se realiza de forma visual (arrastrando objetos, etc.). http://www.plusmedia.es/ http://www.flash-es.net/topten/topten.html http://www.programatium.com/flash/ http://www.macromedia.com

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

  27. Tecnología Java • Java es un potente lenguaje de 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: • (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) • 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

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

  29. JavaTMtechnologies: • J2SETM , • J2EETM , • J2METM, • JAX XML. SDK(Standard Development Kit) JRE(Java RunTime Enviroment) Tecnologías Actuales Java

  30. 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, ... • 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 Elementos de Desarrollo para Java • 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

  31. Ejemplo de un Applet JAVA MiApplet.java import java.applet.*; import java.awt.*; publicclass MiApplet extends Applet { public void paint (Graphics g){ g.drawLine(1,1,50,50); g.fillOval(40,40,20,20); }} EjemploApplet.html <html><head></head><body> <applet code="MiApplet.class" width="100" height="100"> </body></html> Ver Ejemplo

  32. Otras Tecnologías Web .Net (Microsoft)

  33. 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) var layerRef="", styleSwitch=""; function init(){ if (navigator.appName == "Netscape") { var layerRef="document.layers"; var styleSwitch=""; }else{ var layerRef="document.all"; var styleSwitch=".style"; }} Netscape: document.layers["ID"].visibility IE: document.all["ID"].style.visibility document.getElementById("ID")

  34. 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" }

  35. Ejemplo de Capas <html><head><title>Ejemplo Capas - Curso JavaScript</title></head> <body>Pagina ejemplo de capas<div id="c1" style="position:absolute; left:245px; top:168px; width:157px; height:151px; z-index:1; visibility: visible"> <img src="imagenes/perrito-marron.jpg"> Estaeslaprimeracapa, ladelperromarron </div></body></html>

  36. Ejemplo de capas (con estilos) <html><head><title>Ejemplo Capas - Curso JavaScript</title><STYLETYPE="text/css">#c1{background-color:#66CCFF;width:150px;height:150px;border-width:5px;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"> Estaeslaprimeracapa, ladelperromarron </div></body></html>

  37. Ejemplo Simple: Mostrando y Ocultando Capas Ejemplo Simple de Capas

  38. 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"> Estaeslaprimeracapa, ladelperromarron</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"> Estaeslasegundacapa, ladelperronegro</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>

  39. HTML Dinámico (JavaScript + capas) • 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 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

  40. 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><STYLETYPE="text/css"> #c1{position:relative;top:50px;left:15px;background-color:#990000;width:200px;z-index=0;}</STYLE></head><body>Para mover una CAPA<br><input type="button" value="Pulsa" onclick="corre()"><DIV ID="c1" ><imgsrc="corredor.gif"width="114"height="134"alt=""border="0"></DIV></body></html>

  41. Objetos y Eventoscon JavaScript José M. Gutiérrez Universidad de Cantabria gutierjm@unican.es JavaScript Java Internet HTML

  42. 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 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. • Java es un potente lenguje de programación orientado a objetos. • Es complicado de utilizar. • 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.

  43. 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 enlaceyun formulario. window +--frames +--location +--history +--document +--forms | | | elements (text, button) | +--layers +--links +--Plugin +--anchors

  44. Programación Orientada a Objetos 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 • estructural • Fácil comprensión.

  45. Dos Formas de Incrustar JavaScript en HTML • Incluyendo Scripts <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- oculta a navegadores antiguos document.write("Hola !"); // --> </SCRIPT> </HEAD> <BODY> <P>Hola otra vez ! </P> </BODY> </HTML> • Acciones en las Marcas <> <HTML> <HEAD> </HEAD> <BODY> <FORM> <INPUT TYPE="BUTTON" ONCLICK="alert('Hola !')"> </FORM> </BODY> </HTML>

  46. Más ejemplos simples • Otro ejemplo, ahora en una propiedad del body: <BODY ONLOAD="alert('est&aacute;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.lastModified) </SCRIPT> • JavaScript diferencia mayúsculas y minúsculas • Se suele tomar como convenio denotar lasvariables y funciones de la forma:lastModifiedalert

  47. Valores, variables y literales Numeros, como 42 o 3.14159 . Logicasl (Booleanas) <true> or <false>. Cadenas, utilizadas del mismo modo que en Java!. null, denota una variable nula; undefined, propiedad o variable indefinida Valores Variables son nombres simbólicos de los valores. Comienzan con una letra 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' “una linea \n otra linea" Literales

More Related