Negocios

Web Dinámica
José Manuel Gutiérrez
Universidad de Cantabria
gutierjm@unican.es
Internet JavaScript Java

HTML
http://personales.unican.es/gutierjm
Www.w3c.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>

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

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.
NAME nombre que utilizará el CGI para referirse al campo.
submit: botón para el envío.
VALUE utilizado para dar al campo valores por defecto. reset: borrado.
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.

Ej. de Formulario
<html><head>
ACTION="mailto:gutierjm@unican.es"
<title>Formulario</title></head><body>
<H1>Datos personales</H1> METHOD="POST“
<FORM ACTION="http://servidor/Directorio/Nombre.cgi"> ENCTYPE="text/plain"
Nombre <INPUT TYPE="text" NAME="Campo1" SIZE=25>
Telé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>

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>
XML
<Number>0</Number> Instance
<Level type="Pressure level">1000</Level>
<Parameter table="ECMWF">Z</Parameter>
</Type>
</Version>
</Stream>
</Class>
XML: Fuentes de información
http://wwws.sun.com/software/xml/ http://www.oasis-open.org/cover/sgml-xml.html
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">

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

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

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.
1. Directamente en la etiqueta en la que queremos usarlo:

<ETIQUETA STYLE=propiedad1:valor;....;propiedad2:valor;>....</ETIQUETA>
<HTML>
<HEAD>
<TITLE>ejemplo1</TITLE>
</HEAD>
<BODY>
<P STYLE=color:blue;font-size:18pt;>
Este párrafo tiene aplicado un estilo
<P>
y este otro no.
</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.
<STYLE TYPE="text/css">
<!—
Etiqueta1:{propiedad1:valor;...propiedadn:valor}
<HTML>
/* podemos introducir comentarios */
<HEAD>
...
Etiquetam:{propiedad1:valor;...}
<STYLE>
//-->

</STYLE>
</HEAD>
<BODY>
<P>Fuente de estilo Verdana y color
verde, la
<B> negrita </B> en azul
</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:
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">
/* Fichero estilo1.css */
 <LINK REL="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>

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>Ejemplo4</TITLE>
<STYLE>

</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>
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
<etiqueta CLASS="Nombre_de_la_Clase">....</etiqueta>
<HTML><HEAD> <TITLE>ejemplo7</TITLE>

</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>
Propiedades
Propiedades de las fuentes

font-family font-style font-weight font-size
Arial, Courier... | sans-serif normal |italic |bold 100 | 200... 400 |... 900 XX unidades | %
Propiedades del texto

text-transform text-align text-decoration text-indent
uppercase | lowercase| left | right |center | underline | overline | XX unidades | % |
none | capitalize justify line-throug | blink | none 0
aqua, black, blue,

Propiedades de los colores y los fondos fucshia, gray, green,
color background-color background-image lime, marron, navy,
olive, purple, red, silver,
red, blue... | transparent | red, blue... | none | teal, white y yellow
RGB RGB url("direccion")
Propiedades de márgenes y padding
margin-top, margin-botton, margin-left, padding-top, padding-botton, padding-left,
margin-right, margin padding-right, padding
XX unidades | % | auto | 0 XX unidades | %
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 estilo
que hemos importado.
<UL>
<LI>Elemento 1
<LI>Elemento 2
/*fichero estilo2.css */ <LI><B>Elemento 3 en negrita</B>
 </BODY></HTML>
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>
<STYLE TYPE="TEXT/CSS">

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

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

Ejemplo de estilos IV

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.

Elementos estándar (multiplataforma), independientes del navegador:
HTML Dinámico (Cliente)

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

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

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 El código resultante es

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

Tecnología Java
• Independencia de plataforma
 Java es un potente lenguaje de (UNIX, Windows, Mac,...).
programación orientado a objetos. • Orientado a objetos
 Todo el entorno de desarrollo (SDK) (Obligado a implementar).
para crear ficheros .class con código • Seguridad y confianza:
lenguaje, compilador, interprete
pseudocompilado para intérpretes
Java. • Simplicidad:
gestión automática de “basura”.
 Los programas son compilados en
• Estándar.
ficheros “pseudo-ejecutables” que se
pueden ser interpretados: • Computación distribuida.
– (aplicaciones) máquina virtual, o • “Clases" potentes para desarrollo.
(GUI,NET,BD)
– (applets) plug-in de un navegador Web.
• Generación rápida de código.
 Tiene reglas estrictas sobre cómo
• Documentación y Mantenimiento.
declarar y utilizar variables.
(control estricto de tipos) • 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

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/
Tecnologías Actuales Java
JavaTM
technologies:
•J2SETM ,
•J2EETM ,
•J2METM,
•JAX XML.
SDK
(Standard Development Kit)
JRE
(Java RunTime Enviroment)

Elementos de Desarrollo para Java
•Java 1.0 • Para trabajar con Java 1.0 o Java 1.1
–212 Clases, 8 paquetes –Java Development Kit para la versión (JDK)
•Java 1.1
• Para trabajar con Java 1.2 (Renombrado como Java 2)
–504 Clases, 23 paquetes
–Mejopras en el rendimiento de la VM –Software Development Kit(SDK) o más concreto:
•Java 1.2 –Java 2 SDK, Standard Edition Ver. 1.2, ...
–1520 Clases, 59 paquetes
–Plataforma Java 2.0 • Java Runtime Environment (JRE)
•Java 1.4.1 (Beta), Julio 2002 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

Ejemplo de un Applet JAVA
MiApplet.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);
}}
EjemploApplet.html
<html><head></head><body>
<applet code="MiApplet.class" width="100" height="100">
</body></html>
Ver Ejemplo

Otras Tecnologías Web .Net (Microsoft)

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 var layerRef="", styleSwitch="";

function init(){
height:300px if (navigator.appName == "Netscape") {
left:300px var layerRef="document.layers";
var styleSwitch="";
top:300px }else{
z-index:1 var layerRef="document.all";
var styleSwitch=".style";
Visibility:hidden (visible) }}
Netscape: document.layers["ID"].visibility
IE: document.all["ID"].style.visibility
document.getElementById("ID")
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"
}

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">
Esta es la primera capa, la del perro marron </div>
</body>
</html>

Ejemplo de capas (con estilos)
<html>
<head>
#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">
Esta es la primera capa, la del perro marron </div>
</body>
</html>

Ejemplo Simple: Mostrando y Ocultando Capas
Ejemplo Simple de Capas

Mostrando y Ocultando Capas (Código, IE)
<html> <head>
</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>

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

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>
#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" >
<img src="corredor.gif" width="114" height="134"
alt="" border="0">
</DIV>
</body></html>
Objetos y Eventos
con JavaScript
José M. Gutiérrez
Universidad de Cantabria
gutierjm@unican.es
Internet JavaScript Java

HTML
Programación: JavaScript vs Java
 JavaScript es un lenguaje simple  Java es un potente lenguje de

para usos sencillos. programación orientado a objetos.
 Es relativamente fácil de utilizar.  Es complicado de utilizar.
 No es necesario ningún Kit de  Necesita JDK para crear ficheros
desarrollo, ya que sólo se precisa .class con códigopseudocompilado
escribir scripts. para intérpretes Java.
 Los scripts se insertan directamente  Los programas son compilados en
en el código HTML, por lo que no hay ficheros “ejecutables” o en “applets”
necesidad de compilarlo. que se pueden incrustar en páginas
 Está basado en objetos, que pueden Web.
utilzarse en un script.  Es un completo lenguaje de
 Es muy poco restrictivo en cuanto a la programación orientada a objetos.
declaración y uso de variables.  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.
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

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.

Dos Formas de Incrustar JavaScript en HTML
<HTML>
<HEAD>
 Incluyendo Scripts
<SCRIPT LANGUAGE="JavaScript">

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

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.lastModified)
</SCRIPT>
 JavaScript diferencia mayúsculas y minúsculas
 Se suele tomar como convenio denotar las

variables y funciones de la forma:
lastModified
alert

Valores, variables y literales
Numeros, como 42 o 3.14159 .
Logicasl (Booleanas) <true> or <false>.
Valores
Cadenas, utilizadas del mismo modo que en Java!.
null, denota una variable nula;
undefined, propiedad o variable indefinida
Variables son nombres simbólicos de los valores.

Comienzan con una letra letra o con ("_") Variables
seguidos de caracteres o dígitos (0-9).
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"

Manejo de Literales.-1
<html>
<head>
<title>strings_1</title>

cafes = ["French Roast", "Monka", "Dromedario"];
document.write("<strong> MARCAS de CAFE </strong> <br> <hr>");
document.write(“marca \t =+cafes[0]+"<br>");
document.write(cafes[1]+"<br>");
document.write(cafes[2]+"<br>");
</SCRIPT>
 Caracteres Especiales
</head>
\b Backspace
<body> \f Form feed
\n New line
\r Carriage return
</body> \t Tab
</html> \' Apostrophe or single quote
\" Double quote

Manejo de Literales.-2
<html> Ejemplo 1 de tabla de Sumar
<head>
<title>strings_2</title>
num = [1, 2,3,4,5,6,7,8,9 ];
document.write("<strong> <H1>TABLA de SUMAR</H1></strong> <br> <hr>");
document.write("1+"+num[0]+"\t = \t"+eval(1+num[0])+"<br>");
document.write("1+"+num[1]+"="+eval(1+num[1])+"<br>");
</SCRIPT>

</head>
<body>
</body>
</html>
Propuesta: ¿cómo hacer la tabla de cualquier otro número?

Introducción a las Variables
Ejemplo 2 de tabla de Sumar
<html>
<head>
<title>strings_2</title> Interactuar con el usuario
num = [1,2,3,4,5,6,7,8,9 ];
var NumerodeTabla;
NumerodeTabla=prompt("Quieres la tabla de SUMAR del número?","0");
document.write("<strong> <H1>TABLA de SUMAR del\t"+NumerodeTabla+"</H1></strong> <hr>");
document.write(NumerodeTabla+"+\t"+num[0]+"\t = t"+eval(eval(NumerodeTabla)+num[0])+"<br>");
</SCRIPT>
</head>
<body>
Prompt(String,Valor por defecto)
</body>
</html>
Propuesta: ¿cómo hacer la tabla de cualquier otro número?

Funciones.......1 Sin declarar variables
<html>
<head>
<title>Var1</title> Para definir una función
<SCRIPT LANGUAGE="JAVASCRIPT"> function nombre (parametros) {
function square(number) {
return number * number; Sentencias....
}
</SCRIPT> }

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

Funciones.......2 Declarando variables
<html>
<head>
<title>Var2</title>
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>

Funciones.......3
<html> Variables
<head>
<title>Var3</title> Globales y
var variable="SOY GLOBAL"; Locales
function VarGlobal() {
alert(variable);
}
function VarLocal() {
variable="SOY LOCAL";
alert(variable);
}
</SCRIPT>

</head>
<body>
<input type="button" value="Muestra Global"
onclick="VarGlobal()">
<input type="button" value="Muestra Local"
onclick="VarLocal()">
</body>
</html>

Operadores Aritméticos 1
x += y x=x+y
x -= y x=x-y
<html>
<head>
x *= y x=x*y
<title>Var4</title> x /= y x=x/y
</head> x %= y x=x%y
<body>
Numero <input type="text" name="entra" value=1><br>

<input type="button" value="x+=2" onclick="entra.value+=2">
<input type="button" value="x -= 1" onclick="entra.value-=1">
<input type="button" value="x *= 2" onclick="entra.value*=2">
<input type="button" value="x /= 3" onclick="entra.value/=3">
<input type="button" value="x %= 5" onclick="entra.value%= 5">
<input type="button" value="Inicio" onclick="entra.value=1">
</body>
</html>

Sentencias.....If ....Else
if (condition) {
function Nota(a,b) {
statements1
var media=(parseInt(a)+parseInt(b))/2;
var final="";
}
if (media<5) {
else {
final="Suspenso";}
final="Aprobado";}
[else {
document.Notas.Calificar.value=final;
//return final;
statements2
}
<form name="Notas">
}]
"HTML "<input type="text" name="Html" value=""><br>
"JavaScript "<input type="text" name="JS" value=""><br>
<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

Bucles.....For (1)
for (initialExpression; condition; crementExpression) {
statements }
function Nota(a,b) {
var media=(parseInt(a)+parseInt(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=""><br>
"JavaScript "<input type="text" name="JS" value=""><br>
<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
Web Dinámica (José número que elija el usuario
M. Gutiérrez, Santander) 2005, slide 59
Bucles.....For. (2)
<html>
<head>
<title>For_2</title>
<SCRIPT>
function TablaSumar(num) {
for (var i=1; i < 11; i++) {
document.writeln(i+"+\t"+num+"\t =\t "+eval(i+eval(num))+"<br>");
}
}
num=prompt("Quieres la tabla de SUMAR del número?","0");
TablaSumar(num);
</SCRIPT>
</head>
<body>
</body>
</html>
Propuesto: Se genere de forma aleatoria una quiniela de 15

resultados con “1”, “X” y “2”

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 \t\t\t"+i+"\t\t=\t"+rellenar +"<br>");
}
}
</SCRIPT>
</head>
<body onload="Quiniela()">
</body>

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)) {
if(respuesta == acierto) {
document.write("Correcto = "+bien+acierto +"<br>"); }
}
}
</SCRIPT>
</head>
<body onload="Acertijo()">
</body>
</html>

Recursividad.....1
function Factorial(num){
if (num>1){
return num*Factorial(num-1);
} else {
return num;
}
}
</SCRIPT>
</head>
<body>
var numero=prompt("Dame un número entero","0");
var calcula=Factorial(numero);
document.write("Factorial de "+numero+" = <b>"+calcula+"</b>");
</SCRIPT>
</body>
</html>

Recursividad.....2
CUIDADO
function Test(item){
con la
//var pregunta = "¿Cuánto vale 2+2?";
var acierto =eval(item);
Recursividad
var pregunta= "¿Cuánto vale " + item+"?";
var mal='<img src="mal.gif" width="87" height="133" border="0">';
return (respuesta == acierto) ? bien :Test(item);
}
</SCRIPT>
</head>
<body>
var resultado=Test("2+2");
document.write(resultado);
</SCRIPT>
</body>
</html>

Recursividad.....3
<SCRIPT LANGUAGE="JAVASCRIPT"> CONTROLAR la
function Test(item,intentos){
//var pregunta = "¿Cuánto vale 2+2?"; Recursividad
var acierto =eval(item);
var pregunta= "¿Cuánto vale " + item+"?";
var mal='<img src="mal.gif" width="87" height="133" border="0">';
if (intentos >1){
return (respuesta == acierto) ? bien :Test(item,intentos-1);}
else {
return (respuesta == acierto) ? bien :mal;
}
}
</SCRIPT>
<body>
var resultado=Test("2+2",3);
document.write(resultado);
</SCRIPT>
</body>
Propuesta: Utilizar la recursividad para el ejemplo de acertar un

número
Web Dinámicadel
(José1
M.al N con
Gutiérrez, máximo de intentos
Santander) 2005, slide 65
El lenguaje: Sintáxis y variables
La sintaxis de JavaScript 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 SoyUnaVariable;
SoyUnaVariable=2.1;
Todas las variables numéricas son
floating-point: 2.1, 21e-1
var UnArray = new Array();
UnArray[1]=1;
UnArray[2]="soy el segundo"; Creamos objetos de clases predefinidas.

Palabras reservadas
break do function null typeof

case else if return var
continue export import switch void
default false in this while
delete for new true with
Palabras reservadas por ECMA para futuras extensiones (no incluidas en v1.2).
catch const enum finally throw

class debugger extends super try
Otros símbolos pueden redefinirse:
Alert Math parseFloat find NaN

isFinite close frames open resizeto
Length Object Function menubar ...

Ejemplo de tratamiento de variables
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>

La función factorial (recursiva e iterativa)
<script language="javascript">
function factorial(n) { function factorial(n) {
var result; var fact;
if ((n == 0) || (n == 1)){ for (i=1,fact=1; i<=n; i++){
return 1 fact*=i;
}else { }
result = (n * factorial(n-1) ); return fact;
return result }
}
}
</script>
<body onload="alert(factorial(6))">
<input type="text" name="entrada">

<input type="button" value="calcula"
onclick="alert(factorial(entrada.value))">

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 UnArray)
{
document.write(UnArray[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>

Negocios

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Negocios

Încărcat de

Drepturi de autor:

Formate disponibile

Web Dinámica

José Manuel Gutiérrez

Internet JavaScript Java

 La estructura de un documento HTML es sencilla:

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

 El lenguaje HTML posee una serie de marcas/comandos encerradas

 Comandos sin finalizador. Por ejemplo:

 Algunos comandos admiten parámetros:

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

 La información es enviada a un CGI

 delimitado por los comandos <FORM>

 Cada campo se define utilizando el

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

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

<?xml version="1.0" encoding="UTF-8"?>

En ocasiones, los formatos gráficos de mapas de bits, o

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

MathML permite codificar objetos matemáticos definiendo

•Marca de presentación / estructura.

Con el HTML se intentó desde un principio la definición de estilos lógicos que

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

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

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

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

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

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

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

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

Propiedades de las fuentes

Propiedades del texto

aqua, black, blue,

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

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

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

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

HTML + DOM + JavaScript

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

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

HTML Dinámico (Cliente)

Capas + Estilos + JavaScript

Elementos incorporados en los propios navegadores, y por

Flash Java VRML

Elementos externos a los navegadores, que son incrustados

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

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

Toda la programación El código resultante es

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

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

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

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

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

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

La máquina virtual Java (JVM): Hardware/Software (habitual).

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

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

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

width:300px var layerRef="", styleSwitch="";

var layerRef="", styleSwitch="";

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

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

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

Ejemplo Simple de Capas

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

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