Web Din

1
Web Dinámica

• José Manuel Gutiérrez
• Universidad de Cantabria
• gutierjm_at_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 HTTP
  http//personales.unican.es/gutierjm
• La estructura de un documento HTML es sencilla

ltHTMLgt lt!-- Documento HTML de prueba --gt
ltHEADgt ltTITLEgt Prueba lt/TITLEgt lt/HEADgt
ltBODYgt El navegador interpreta y
visualiza el contenido lt/BODYgt lt/HTMLgt
4
Comandos HTML

• El lenguaje HTML posee una serie de
  marcas/comandos encerradas entre los signos lt y gt
  (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 ltBgttexto en
  negritalt/Bgt
• Comandos sin finalizador. Por ejemploltIMG
  SRC"Imagen.gif"gt
• Algunos comandos admiten parámetros ltIMG
  SRC"Imagen.gif" ALIGN"RIGHT"gt

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 ltFORMgt lt/FORMgt. El
  comando ltFORMgt admite un parámetro ACTION, cuyo
  valor es el URL del CGI.
• Cada campo se define utilizando el comando
  ltINPUTgt 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
lthtmlgtltheadgtlttitlegtFormulariolt/titlegtlt/headgtltbody
gtltH1gtDatos personaleslt/H1gtltFORM
ACTION"http//servidor/Directorio/Nombre.cgi"gtNo
mbre ltINPUT TYPE"text" NAME"Campo1" SIZE25gt
Teleacutefono ltINPUT TYPE"text" NAME"Campo2"
SIZE10gt ltBRgtDomicilio ltINPUT TYPE"text"
NAME"Campo3" SIZE43gt ltBRgtEstado civil ltINPUT
TYPE"radio" NAME"ec" VALUE"S"gtSolteroltINPUT
TYPE"radio" NAME"ec" VALUE"C"gtCasadoltINPUT
TYPE"radio" NAME"ec" VALUE"D"gtDivorciadoltINPUT
TYPE"radio" NAME"ec" VALUE"V"gtViudo
ltBRgtltBRgtEstudios realizadosltSELECT
NAME"Estudios"gt ltOPTIONgtSin estudios ltOPTION
SELECTEDgtPrimarios ltOPTIONgtBachillerato
ltOPTIONgtUniversitarioslt/SELECTgtltINPUT
TYPE"checkbox" NAME"Cliente"gtCliente
actualltBRgtltBRgtObservacionesltTEXTAREA
NAME"Observ" ROWS3 COLS35gtlt/TEXTAREAgtltBRgtltBR
gtltINPUT TYPE"submit" VALUE"Enviar"gtltINPUT
TYPE"reset" VALUE"Borrar"gtlt/FORMgtlt/bodygtlt/html
gt
ACTION"mailtogutierjm_at_unican.es"
METHOD"POST ENCTYPE"text/plain"
7
(No Transcript)
8
XML Esquema para datos Meteorológicos
XML Schema
lt?xml version"1.0" encoding"UTF-8"?gt ltClass
xmlnsxsi"http//www.w3.org/2001/XMLSchema-instan
ce" xsinoNamespaceSchemaLocation"meteo.xsd"
gt ltStream model"Wave model"gt ltVersion
value"4096"gt ltType type"Forecast"gt
ltDategt1967-08-13lt/Dategt
ltTimegt1200lt/Timegt ltStepgt24lt/Stepgt
ltNumbergt0lt/Numbergt ltLevel type"Pressure
level"gt1000lt/Levelgt ltParameter
table"ECMWF"gtZlt/Parametergt lt/Typegt
lt/Versiongt lt/Streamgt lt/Classgt
XML Instance
9
(No Transcript)
10
(No Transcript)
11
XML Fuentes de información
http//wwws.sun.com/software/xml/
http//www.oasis-open.org/cover/sgml-xml.html
12
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.
lt?xml version"1.0" encoding"iso-8859-1"?gt lt!DOCT
YPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http//www.w3.org/TR/2001/REC-SVG-20010904/DTD/sv
g10.dtd"gt ltsvg width "500" height"500"
viewBox"-100 -100 200 200" xmlns"http//www.w3.o
rg/2000/svg"gt lt!--Imprimimos los patrones
5537"--gt ltg style"stroke-width0.5 fillblue
shape-renderingdefault"gt ltcircle cx"-26.4095"
cy"6.19866" r"0.5"/gt ltcircle cx"-24.9492"
cy"13.0801" r"0.5"/gt ltcircle cx"-47.9709"
cy"63.9941" r"0.5"/gt
13
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
14
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.

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

16
Aplicación
2. Para definir una hoja de estilos de forma
global empleamos la etiqueta ltSTYLEgt ...
lt/STYLEgt que debe estar colocada en la cabecera
del documento.
17
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
ltLINK REL"stylesheet" TYPE"text/css"
HREF"estilo1.css"gt
18
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.
19
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 propiedad1valorpropiedad2v
alor...
Para aplicar el estilo de una clase a una
etiqueta concreta, utilizaremos el parámetro CLASS
ltetiqueta CLASS"Nombre_de_la_Clase"gt....lt/etiquet
agt
20
Propiedades
Propiedades de las fuentes Propiedades de las fuentes Propiedades de las fuentes 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 Propiedades del texto Propiedades del texto Propiedades del texto
text-transform text-align text-decoration text-indent
uppercase lowercase none capitalize left right center justify underline overline line-throug blink none XX unidades 0
Propiedades de los colores y los fondos Propiedades de los colores y los fondos Propiedades de los colores y los fondos
color background-color background-image
red, blue... RGB transparent red, blue... RGB none url("direccion")
Propiedades de márgenes y padding Propiedades de márgenes y padding
margin-top, margin-botton, margin-left, margin-right, margin padding-top, padding-botton, padding-left, padding-right, padding
XX unidades auto 0 XX unidades
21
Ejemplo de hojas de estilo I
22
Ejemplo de hojas de estilo II
23
Ejemplos de hojas de estilos III
24
Ejemplo de estilos IV
25
HTML Dinámico (introducción)
Elementos estándar (multiplataforma),
independientes del navegador
HTML DOM JavaScript lthtmlgt ... lt/htmlgt
window.document, ... ltscriptgt ...
lt/scriptgt
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.
26
HTML Dinámico (Cliente)
Elementos estándar (multiplataforma),
independientes del navegador
HTML DOM JavaScript lthtmlgt ... lt/htmlgt
window.document, ... ltscriptgt ...
lt/scriptgt
Capas Estilos JavaScript ltdivgt ... lt/divgt
css ltscriptgt ...
lt/scriptgt
Elementos incorporados en los propios
navegadores, y por tanto no es necesario
descargarse ningún software.
Flash ltobjectgt ... lt/objectgt
Java ltobjectgt ... lt/objectgt
VRML ltobjectgt ... lt/objectgt
Elementos externos a los navegadores, que son
incrustados en las páginas web (ltobjectgt). Para
su funcionanmiento en una página web necesitan de
un software especial o plugin.
27
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.web3d.org
http//www.cai.com/cosmo/
28
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
29
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.

30
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
31
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/
32
Tecnologías Actuales Java
33
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,
  UnixPalm 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 gt Buena implantación de JIT

34
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
lthtmlgtltheadgtlt/headgtltbodygt ltapplet
code"MiApplet.class" width"100"
height"100"gt lt/bodygtlt/htmlgt
Ver Ejemplo
35
Otras Tecnologías Web .Net (Microsoft)
36
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.

ltDIV ID"mylayer" STYLE"postitionabsolute..."gt
ltA HREF"pagina.html"gtEnlacelt/Agt ponemos
algo de textoltBRgt ahora una imagen ltIMG
SRC"image.gif"gt y mas texto lt/DIVgt
width300px height300px left300px top300px
z-index1 Visibilityhidden (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")
37
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) ? 10 ie (document.all) ?
10 n6 (document.getElementById) ?
10 function show() if (n)
document.uno.visibility "show" if (n6)
document.getElementById('uno').style.visibility
"visible" if (ie) uno.style.visibility
"visible"
38
Ejemplo de Capas
lthtmlgtltheadgtlttitlegtEjemplo Capas - Curso
JavaScriptlt/titlegtlt/headgt ltbodygtPagina
ejemplo de capasltdiv id"c1" style"positionabso
lute left245px top168px width157px
height151px z-index1 visibility visible"gt
ltimg src"imagenes/perrito-marron.jpg"gt Esta
es la primera capa, la del perro marron
lt/divgtlt/bodygtlt/htmlgt
39
Ejemplo de capas (con estilos)
lthtmlgtltheadgtlttitlegtEjemplo Capas - Curso
JavaScriptlt/titlegtltSTYLE TYPE"text/css"gtc1
background-color66CCFFwidth150px
height150pxborder-width5px
border-styleridge padding5lt/STYLEgtlt/head
gtltbodygtPagina ejemplo de capasltdiv id"c1"
style"positionabsolute left250px
top150px z-index1 visibility
visible"gt ltimg src"imagenes/perrito-marron.jp
g" width"157" height"136"gt Esta es la
primera capa, la del perro marron
lt/divgtlt/bodygtlt/htmlgt
40
Ejemplo Simple Mostrando y Ocultando Capas
Ejemplo Simple de Capas
41
Mostrando y Ocultando Capas (Código, IE)
lthtmlgt ltheadgtlttitlegtEjemplo Capas - Curso
JavaScriptlt/titlegtlt/headgtltbody
bgcolor"FFFFFF"gtltdiv id"capamarron"
style"positionabsolute width157px
height151px z-index1 left 165px top
138px visibility hidden"gt ltimg
src"imagenes/perrito-marron.jpg" width"223"
height"275"gt Esta es la primera capa, la del
perro marron lt/divgtltdiv id"capanegro"
style"positionabsolute width305px
height217px z-index2 left 214px top
161px visibility hidden"gt ltimg
src"imagenes/perrito-negro.jpg" width"306"
height"231"gt Esta es la segunda capa, la del
perro negro lt/divgtltinput type"button"
value"capa1" onMouseOver"document.all'capanegro
'.style.visibility'visible'
document.all'capamarron'.style.visibility'hidde
n'" onMouseDown"document.all'capanegro'.sty
le.visibility'visible'
document.all'capamarron'.style.visibility'visib
le'"gtltinput type"button" value"capa2"
onMouseOver"document.all'capanegro'.style.visib
ility'hidden' document.all'capamarron'.st
yle.visibility'visible'"
onMouseDown"document.all'capanegro'.style.visib
ility'visible' document.all'capamarron'.st
yle.visibility'visible'"gt lt/bodygtlt/htmlgt
42
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
• ltscriptgt ... lt/scriptgt

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
43
Capas en Movimiento
lthtmlgtltheadgtltSCRIPTgtvar izquierda0function
corre() object document.getElementById("
c1").style if (izquierda lt 650)
izquierda 10 object.left
izquierda setTimeout("corre()",10)
lt/SCRIPTgtltSTYLE TYPE"text/css"gt c1
positionrelative top50px left15px
background-color990000width200px z-index0
lt/STYLEgtlt/headgtltbodygtPara mover una
CAPAltbrgtltinput type"button" value"Pulsa"
onclick"corre()"gtltDIV ID"c1" gtltimg
src"corredor.gif" width"114" height"134"
alt"" border"0"gtlt/DIVgtlt/bodygtlt/htmlgt
44
Objetos y Eventoscon JavaScript

• José M. Gutiérrez
• Universidad de Cantabria
• gutierjm_at_unican.es

JavaScript
Java
Internet HTML
45
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.
46
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
47
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.

48
Dos Formas de Incrustar JavaScript en HTML

• Incluyendo Scripts

ltHTMLgt ltHEADgt ltSCRIPT LANGUAGE"JavaScript"gt lt!--
oculta a navegadores antiguos document.write("Hola
!") // --gt lt/SCRIPTgt lt/HEADgt ltBODYgt ltPgtHola
otra vez ! lt/Pgt lt/BODYgt lt/HTMLgt

• Acciones en las Marcas ltgt

ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt ltFORMgt ltINPUT
TYPE"BUTTON" ONCLICK"alert('Hola
!')"gt lt/FORMgt lt/BODYgt lt/HTMLgt
49
Más ejemplos simples

• Otro ejemplo, ahora en una propiedad del body

ltBODY ONLOAD"alert('estaacutes entrando en la
pagina')"gt

• Generamos un sencillo script para añadir
  información al final de una página Web, en
  concreto la fecha de modificación.

ltSCRIPT LANGUAGE"JAVASCRIPT"gt document.write("Ult
ima modificacion") document.write(document.lastM
odified) lt/SCRIPTgt

• JavaScript diferencia mayúsculas y minúsculas

• Se suele tomar como convenio denotar
  lasvariables y funciones de la
  formalastModifiedalert

50
Valores, variables y literales
Numeros, como 42 o 3.14159 . Logicasl
(Booleanas) lttruegt or ltfalsegt. 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
51
Manejo de Literales.-1
lthtmlgtltheadgt lttitlegtstrings_1lt/titlegtlt!--
INICIO SCRIPT --gtltSCRIPT LANGUAGE"JAVASCRIPT"gtc
afes "French Roast", "Monka",
"Dromedario"document.write("ltstronggt MARCAS de
CAFE lt/stronggt ltbrgt lthrgt") document.write(marc
a \t cafes0"ltbrgt") document.write(cafes1
"ltbrgt") document.write(cafes2"ltbrgt")
lt/SCRIPTgtlt!-- FIN SCRIPT --gtlt/headgtltbodygt
lt/bodygtlt/htmlgt
Caracteres Especiales \b Backspace \f
Form feed \n New line
\r Carriage return \t Tab
\' Apostrophe or single quote \"
Double quote
52
Manejo de Literales.-2
Ejemplo 1 de tabla de Sumar
lthtmlgtltheadgt lttitlegtstrings_2lt/titlegtlt!--
INICIO SCRIPT --gtltSCRIPT LANGUAGE"JAVASCRIPT"gtn
um 1, 2,3,4,5,6,7,8,9 document.write("ltstron
ggt ltH1gtTABLA de SUMARlt/H1gtlt/stronggt ltbrgt lthrgt")
document.write("1"num0"\t
\t"eval(1num0)"ltbrgt") document.write("1"n
um1""eval(1num1)"ltbrgt")
document.write("1"num2""eval(1num2)"ltb
rgt") document.write("1"num3""eval(1num3
)"ltbrgt") document.write("1"num4""eval(1
num4)"ltbrgt") lt/SCRIPTgtlt!-- FIN SCRIPT
--gtlt/headgtltbodygtlt/bodygtlt/htmlgt
Propuesta cómo hacer la tabla de cualquier otro
número?
53
Introducción a las Variables
Ejemplo 2 de tabla de Sumar Interactuar con el
usuario
lthtmlgtltheadgt lttitlegtstrings_2lt/titlegtlt!--
INICIO SCRIPT --gtlt!-- INICIO SCRIPT --gtltSCRIPT
LANGUAGE"JAVASCRIPT"gtnum 1,2,3,4,5,6,7,8,9
var NumerodeTablaNumerodeTablaprompt("Quiere
s la tabla de SUMAR del número?","0")
document.write("ltstronggt ltH1gtTABLA de SUMAR
del\t"NumerodeTabla"lt/H1gtlt/stronggt lthrgt")
document.write(NumerodeTabla"\t"num0"\t
t"eval(eval(NumerodeTabla)num0)"ltbrgt")
document.write(NumerodeTabla"\t"num1"\t
t"eval(eval(NumerodeTabla)num1)"ltbrgt")
document.write(NumerodeTabla"\t"num2"\t
t"eval(eval(NumerodeTabla)num2)"ltbrgt")
document.write(NumerodeTabla"\t"num3"\t
t"eval(eval(NumerodeTabla)num3)"ltbrgt")
lt/SCRIPTgtlt/headgtltbodygtlt/bodygtlt/htmlgt
Prompt(String,Valor por defecto)
Propuesta cómo hacer la tabla de cualquier otro
número?
54
Funciones.......1
Sin declarar variables
lthtmlgtltheadgt lttitlegtVar1lt/titlegtlt!-- INICIO
SCRIPT --gtltSCRIPT LANGUAGE"JAVASCRIPT"gtfunction
square(number) return number
numberlt/SCRIPTgtlt!-- FIN SCRIPT
--gtlt/headgtltbodygt ltinput name"entra"
type"text" value0"gtltinput name"sale"
type"text" value""gtltinput type"button"
value"x2" onclick"sale.valuesquare(entra.value
)"gtlt/bodygtlt/htmlgt
Para definir una función function nombre
(parametros) Sentencias....

Propuesta Realizar la tabla de sumar de
cualquier número usando una función
55
Funciones.......2
Declarando variables
lthtmlgtltheadgt lttitlegtVar2lt/titlegtlt!-- INICIO
SCRIPT --gtltSCRIPT LANGUAGE"JAVASCRIPT"gtvar
resul0function square(number) resul number
numberlt/SCRIPTgtlt!-- FIN SCRIPT
--gtlt/headgtltbodygt ltinput name"entra"
type"float" value"2"gtltinput type"button"
value"x2" onclick"eval(square(entra.value))ale
rt(resul)"gtlt/bodygtlt/htmlgt
56
Funciones.......3
Variables Globales y Locales
lthtmlgtltheadgt lttitlegtVar3lt/titlegtltSCRIPT
LANGUAGE"JAVASCRIPT"gtvar variable"SOY
GLOBAL"function VarGlobal()
alert(variable)function VarLocal()
variable"SOY LOCAL" alert(variable)lt/SCRIP
Tgtlt!-- FIN SCRIPT --gtlt/headgtltbodygt ltinput
type"button" value"Muestra Global"
onclick"VarGlobal()"gtltinput type"button"
value"Muestra Local" onclick"VarLocal()"gtlt/body
gtlt/htmlgt
57
Operadores Aritméticos 1
x y x x y x - y
x x - y x y x x y x / y
x x / y x y x x y
lthtmlgtltheadgt lttitlegtVar4lt/titlegtlt/headgtltbody
gt Numero ltinput type"text" name"entra"
value1gtltbrgtltinput type"button" value"x2"
onclick"entra.value2"gtltinput type"button"
value"x - 1" onclick"entra.value-1"gtltinput
type"button" value"x 2" onclick"entra.value
2"gtltinput type"button" value"x / 3"
onclick"entra.value/3"gtltinput type"button"
value"x 5" onclick"entra.value 5"gtltinput
type"button" value"Inicio" onclick"entra.value
1"gtlt/bodygtlt/htmlgt
58
Sentencias.....If ....Else
if (condition) statements1 else
statements2
function Nota(a,b) var media(parseInt(a)parse
Int(b))/2var final"" if (medialt5)
final"Suspenso" else
final"Aprobado" document.Notas.Calificar.valu
efinal //return finalltform
name"Notas"gt"HTML "ltinput type"text"
name"Html" value""gtltbrgt"JavaScript "ltinput
type"text" name"JS" value""gtltbrgtltinput
type"button" name"Java" value"Calificación"
onclick"Nota(Html.value,JS.value)"gt ltinput
type"text" name"Calificar"gt lt/formgt
Propuesta Ampliar calificación a Notable y
Sobresaliente
59
Bucles.....For (1)
for (initialExpression condition
crementExpression) statements
function Nota(a,b) var media(parseInt(a)parse
Int(b))/2var final"" if (medialt5)
final"Suspenso" else
final"Aprobado" document.Notas.Calificar.valu
efinal //return finalltform
name"Notas"gt"HTML "ltinput type"text"
name"Html" value""gtltbrgt"JavaScript "ltinput
type"text" name"JS" value""gtltbrgtltinput
type"button" name"Java" value"Calificación"
onclick"Nota(Html.value,JS.value)"gt ltinput
type"text" name"Calificar"gt lt/formgt
Propuesta Utilizar un ciclo for para realizar el
ejemplo de la tabla de sumar de un número que
elija el usuario
60
Bucles.....For. (2)
lthtmlgtltheadgt lttitlegtFor_2lt/titlegtltSCRIPTgtfunct
ion TablaSumar(num) for (var i1 i lt 11
i) document.writeln(i"\t"num"\t \t
"eval(ieval(num))"ltbrgt")
numprompt("Quieres la tabla de SUMAR del
número?","0") TablaSumar(num)lt/SCRIPTgtlt/headgt
ltbodygtlt/bodygtlt/htmlgt
Propuesto Se genere de forma aleatoria una
quiniela de 15 resultados con 1, X y 2
61
Bucles.....For. (3)
ltSCRIPTgtfunction Quiniela() for (var i0 i
lt 16 i) var casilla(Math.floor(3Math.ran
dom())) if (casilla0) rellenar"1"
else if (casilla1)rellenar"X" else
rellenar"2" document.write("Casi
lla \t\t\t"i"\t\t\t"rellenar "ltbrgt")
lt/SCRIPTgtlt/headgtltbody onload"Quiniela()"gt
lt/bodygt
62
Bucles.....While. (1)
En este ejemplo La máquina piensa un número y el
usuario tiene que acertarlo en 10 intentos
ltSCRIPTgtpregunta"Que número he pensado del 0
al 10?"var aciertoMath.round(10Math.random())
var bien'ltimg src"bien.gif" width"87"
height"128" border"0"gt'function Acertijo()
var i0 var respuestaprompt(pregunta,"0")
while ((ilt10)(respuesta ! acierto)) var
respuestaprompt(pregunta,"0") if(respuesta
acierto) document.write("Correcto
"bienacierto "ltbrgt")
lt/SCRIPTgtlt/headgtltbody onload"Acertijo()"gtlt
/bodygtlt/htmlgt
63
Recursividad..... 1
ltSCRIPT LANGUAGE"JAVASCRIPT"gtfunction
Factorial(num) if (numgt1) return
numFactorial(num-1) else return
num lt/SCRIPTgtlt/headgtltbodygtltSCRI
PT LANGUAGE"JAVASCRIPT"gtvar numeroprompt("Dame
un número entero","0")var calculaFactorial(nume
ro)document.write("Factorial de "numero"
ltbgt"calcula"lt/bgt")lt/SCRIPTgtlt/bodygtlt/htmlgt
64
Recursividad..... 2
CUIDADO con la Recursividad
ltSCRIPT LANGUAGE"JAVASCRIPT"gtfunction
Test(item)//var pregunta "Cuánto vale
22?"var acierto eval(item)var pregunta
"Cuánto vale " item"?"var bien'ltimg
src"bien.gif" width"87" height"128"
border"0"gt'var mal'ltimg src"mal.gif"
width"87" height"133" border"0"gt'var
respuestaprompt(pregunta,"0")return (respuesta
acierto) ? bien Test(item)
lt/SCRIPTgtlt/headgtltbodygtltSCRIPT
LANGUAGE"JAVASCRIPT"gtvar resultadoTest("22")
document.write(resultado)lt/SCRIPTgtlt/bodygtlt/htm
lgt
65
Recursividad..... 3
CONTROLAR la Recursividad
ltSCRIPT LANGUAGE"JAVASCRIPT"gtfunction
Test(item,intentos)//var pregunta "Cuánto
vale 22?"var acierto eval(item)var
pregunta "Cuánto vale " item"?"var
bien'ltimg src"bien.gif" width"87" height"128"
border"0"gt'var mal'ltimg src"mal.gif"
width"87" height"133" border"0"gt'var
respuestaprompt(pregunta,"0")if (intentos
gt1) return (respuesta acierto) ? bien
Test(item,intentos-1)else return
(respuesta acierto) ? bien mal
lt/SCRIPTgtltbodygtltSCRIPT LANGUAGE"JAVASCRIPT"gt
var resultadoTest("22",3)document.write(result
ado)lt/SCRIPTgtlt/bodygt
Propuesta Utilizar la recursividad para el
ejemplo de acertar un número del 1 al N con
máximo de intentos
66
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), ltlt
y gtgt y las comparaciones son lt, gt, lt, gt, y
!.

• Si la declaración de una variable se hace dentro
  de una función, dicha variable es local, sino es
  global. var SoyUnaVariableSoyUnaVariable2.1
  var UnArray new Array()UnArray11UnArray
  2"soy el segundo"

Todas las variables numéricas son floating-point
2.1, 21e-1
Creamos objetos de clases predefinidas.
67
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 . . .
68
Ejemplo de tratamiento de variables
lthtmlgt ltheadgt ltscript language"JavaScript"gt lt!--
hide function calculation() var x 12 var
y 5 var result x y alert(result) //
--gt lt/scriptgt lt/headgt ltbodygt ltformgt ltinput
type"button" value"Calculate"
onClick"calculation()"gt lt/formgt lt/bodygt lt/htmlgt
69
La función factorial (recursiva e iterativa)
La función factorial
ltscript language"javascript"gt function
factorial(n) var result if ((n 0)
(n 1)) return 1 else result (n
factorial(n-1) ) return result
lt/scriptgt ltbody onload"alert(factorial(6))"
gt ltinput type"text" name"entrada"gt ltinput
type"button" value"calcula" onclick"alert(fact
orial(entrada.value))"gt
function factorial(n) var fact for
(i1,fact1 iltn i) facti return
fact
70
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(UnArraycontador)
ltscript language"javascript"gt var texto new
Array("hola") var numero new
Array(1,2,3,4) var winwindow.open('','ventana')
for (i in texto) win.document.write(textoi)
for (i in numero) win.document.write(numero
i) lt/scriptgt