Clase 660 - Libro Introducción A JavaScript

JavaScript
__________________________________________________________________________________
HTML BSICO
Objetivos de la unidad
Al finalizar la unidad el participante desarrollar sus propias
pginas programadas en HTML.
http://www.pacoarce.com
JavaScript
__________________________________________________________________________________
CURSO BSICO DE HTML
El lenguaje de HTML se basa en el uso de etiquetas tambin llamadas marcas, directivas o
comandos (tags).
Estas etiquetas son fragmentos de texto delimitados por los signos menor que < y mayor que >.
Estas etiquetas indican al navegador, la forma de representar los elementos (texto, grficos, etc.) que
contiene el documento; en este manual, nos referiremos a estas ordenes con la palabra etiqueta.
Existe normalmente una etiqueta de inicio <ETIQUETA> y otra de final </ETIQUETA>,
algunos comandos solo disponen de la de inicio, como es el caso del salto de lnea <BR>.
Todos los elementos que sean situados entre etiquetas o a partir de la de inicio, sern afectados
ya sea por texto, o ms etiquetas.
Las etiquetas que estn mal escritas o que sean desconocidas para el navegador, son ignoradas.
Estructuracin de un documento.
Un documento HTML esta definido por una etiqueta de inicio <HTML> y una terminacin
</HTML>. Otras dos partes fundamentales de un documento HTML son la cabecera o
encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> y el cuerpo, entre <BODY>
y </BODY>.
<HTML>
<HEAD>
Definiciones de la cabecera del documento
</HEAD>
<BODY>
Cuerpo del documento HTML que se va a visualizar
</BODY>
</HTML>
La cabecera
La cabecera de un documento viene delimitada por las etiquetas <HEAD> y </HEAD> y
contiene informacin sobre el documento. Todas ellas son opcionales, pero es recomendable el uso de
la etiqueta <TITLE>.
Francisco J. Arce AnguianoX
JavaScript
__________________________________________________________________________________
La etiqueta <TITLE> especifica el ttulo del documento. Este generalmente se muestra en la
parte superior del navegador. Tambin es utilizado como identificador en las listas de favoritos o
bookmarks. (Figura 1.1).
<TITLE>Ttulo de mi primera pgina WEB</TITLE>
Figura 1.1. Observe en la parte superior el ttulo de la pgina web

Otra etiqueta relacionada con la cabecera de un documento es <META>, usada principalmente
para sustituir el documento actual por otro en un determinado nmero de segundos o para incluir
elementos informativos como el nombre del autor, fecha de expiracin del documento o el programa
con el que hemos diseado la pgina (en el supuesto que se haya utilizado un software especfico). En
todos los casos, la informacin se escribe usando pares nombre/valor.
Para el primer supuesto se emplean atributos del tipo HTTP-EQUIV, y para el segundo, del tipo
NAME. En ambos, el valor a especificar se estipula en el campo CONTENT.
<META HTTP-EQUIV=Refresh CONTENT=15; URL=http://www.fut.es/~xxxx/sigui.htm>
<META HTTP-EQUIV=Expires CONTENT=Caduca en junio de 201000:00 GMT>
<META NAME=Autor CONTENT=Miguel de Cervantes>
<META HTTP-EQUIV=authoring_tool CONTENT=Home Site 2.5>
Siguiendo la estructura bsica de un documento HTML encontramos la etiqueta <BASE>, que
proporciona la direccin base para interpretar los enlaces relativos cuando el documento se lee fuera
de su contexto de trabajo.
Tambin tenemos la etiqueta <LINK> que nos sirve para crear barras de herramientas o mens
interactivos en la ventana del navegador.
JavaScript
__________________________________________________________________________________
Para finalizar, tenemos la etiqueta que permite incluir comentarios dentro de nuestro cdigo
fuente, . Es recomendable usarlo en documentos extensos o complejos, ya que
permite introducir anotaciones para revisiones posteriores del cdigo.

Para identificar el formato en que ha sido desarrollado un cdigo fuente, se utiliza la etiqueta
<!DOCTYPE>, su contenido de esta permite saber que versin de HTML ha sido utilizada en el
documento.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN>
El cuerpo
El cuerpo de un documento HTML contiene el texto de la pgina. Las etiquetas de inicio y fin
son <BODY> y </BODY>, y entre ellas se debe situar todo el cdigo restante del documento.
Ejemplo de cdigo fuente que utiliza las etiquetas explicadas anteriormente:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN>
<HTML>
<HEAD>
<!Los siguientes datos son meramente informativos, a excepcin del ttulo del documento. -->
<META NAME=Autor CONTENT=Juan Juan Ors>
<TITLE>Cdigo de ejemplo estructura bsica HTML</TITLE>
</HEAD>
<BODY>
<!A partir de aqu se irn introduciendo los distintos elementos del documento HTML -->
</BODY>
</HTML>
COLORES Y FONDO DEL DOCUMENTO
La etiqueta <BODY> tiene una serie de atributos que permiten establecer una serie de
caractersticas generales para todo el documento, como puede ser el color del texto, de los enlaces o
del fondo del documento.
Hay dos maneras de indicar los colores: en formato hexadecimal o referenciados por su nombre
preestablecido.
JavaScript
__________________________________________________________________________________
Para indicar los colores en formato hexadecimal, se deber indicar la proporcin de rojo, verde
y azul correspondiente para formar el color deseado. El valor RGB del color estar determinado por
RR, GG y BB para los niveles de Rojo, Verde y Azul, con los valores entre 0 y FF (de 0 a 255). El
nmero es #000000 corresponde al color negro, #FF0000 al rojo, #00FF00 al verde, #0000FF
al azul, #FFFFFF al blanco, y as muchos ms.
Es ms fcil indicar el nombre del color en ingles como: black, teal, blue, navy, lime, white,
purple, yellow, olive, red, marron, gray, fucsia, green, silver y aqua.
Los atributos que podrn aadirse a la etiqueta <BODY> son los siguientes:
BGCOLOR=#rrggbb o nombre del color, para indicar el color del fondo del documento.
TEXT=#rrggbb o nombre del color, para especificar el color general del texto.
LINK=#rrggbb o nombre del color, para especificar el color del texto de los enlaces.
VLINK=#rrggbb o nombre del color, para indicar el color del texto de los enlaces ya
visitados.
ALINK=#rrggbb o nombre del color, para indicar el color en que se pondr el texto del
enlace en el momento de su activacin.
Tambin existe la opcin de usar imgenes para el fondo de los documentos HTML. La
imagen se mostrar debajo del texto y de las imgenes, y si no es lo suficientemente grande para
rellenar el fondo del documento. Ser reproducida tantas veces como sea necesario hasta completarlo.
El atributo que se utiliza para determinar la imagen de fondo es:
BACKGROUND=nombre del archivo grfico.
Ejemplos de cdigos HTML que utilizan los atributos anteriores.
<HTML>
<HEAD>
<TITLE>Ejemplo 1 de aplicacin de la etiqueta BODY</TITLE>
</HEAD>

<BODY BGCOLOR="Gray" TEXT="Black" LINK="Blue" VLINK="Fuchsia" ALINK="Red">
</BODY>
</HTML>
<HTML>
<HEAD>
JavaScript
__________________________________________________________________________________
<TITLE>Ejemplo 2 de aplicacin de la etiqueta BODY</TITLE>
</HEAD>

<BODY BACKGROUND="fondo1.gif" TEXT="#000000" LINK="#0000FF"
VLINK="#FF3366" ALINK="#FF0000">
</BODY>
</HTML>
ESTRUCTURACIN DEL TEXTO
HTML no reconoce ms de un espacio en blanco separando cualquier elemento o texto, es
decir, los saltos de lnea, tabulaciones y dems separadores. Todos son ignorados por el navegador, y
son convertidos a un nico espacio en blanco.
Prrafos y saltos de lnea.
La etiqueta <P> que se utiliza para separar prrafos. Para HTML el texto es continuo, por lo
que necesitamos indicar el principio y fin de un prrafo. Las marcas son <P> y </P>, aunque la
utilizacin de la ltima es opcional.
Otra etiqueta es <BR>. Esta etiqueta slo tiene marca inicial y se usa para cambiar de lnea.
Ejemplo entre la utilizacin de ambas etiquetas.
<P>El agua de la fuente,<BR>sobre la piel tosca<BR>y de verdn cubierta<BR>resbala silenciosa.
<P>Antonio Machado.
El resultado puede apreciarse en la figura 1.2.
El agua de la fuente,
sobre la piel tosca
y de verdn cubierta
resbala silenciosa.
Antonio Machado.
Figura 1.2. Diferencia entre la etiqueta <BR> y <P>.
JavaScript
__________________________________________________________________________________
Cabeceras y separadores.
Las cabeceras se emplean para dividir los documentos en secciones, es decir, para marcar los
ttulos de estas secciones. La etiqueta para las cabeceras es <HN> y </HN> donde n vara de 1 a 6.
El valor de 1 correspondera con una letra muy grande y el de 6 con una muy pequea. Al utilizar esta
etiqueta, se genera automticamente un salto de lnea similar al utilizado con la etiqueta <P>.
Ejemplo de su utilizacin.
<H1>Pginas interactivas con JavaScript 1.2</H1>
<H2>Captulo 1</H2>
<P>Este libro esta dirigido a aquellos que quieren aprender...
El efecto puede observarse en la figura 1.3
Pginas interactivas con JavaScript

Captulo 1
Este libro esta dirigido a aquellos que quieren aprender...
Figura 1.3 Ejemplo de distintos tipos de cabeceras.
Para poder separar partes del documento, la etiqueta <HR> dibuja una barra horizontal que divide la
pantalla con un grosor y una longitud determinada a travs de sus atributos. El atributo SIZE permite
especificar el grosor de dicha barra, mientras que WIDTH indica la longitud o el porcentaje relativo
con respecto al ancho de la pgina. Para la alineacin de la barra se utilizara ALIGN con los valores
left, right, center, justify o el porcentaje adecuado. NOSHADE elimina la sombra de la barra.
Ejemplo de cdigo que utiliza de manera variada, las etiquetas anteriores.
<HTML>
<HEAD>
<TITLE>Listado de ejemplo de cabeceras y separadores</TITLE>
</HEAD>
<BODY>
JavaScript
__________________________________________________________________________________

<H1>Texto con Nivel 1</H1>

<HR>
<HR SIZE=10>
<HR WIDTH=70>
<HR WIDTH=75%>
<HR WIDTH=50% ALIGN=LEFT>
<HR NOSHADE>
</BODY>
</HTML>
El resultado puede observarse en la figura 1.4.
Figura 1.4. Distintos ejemplos de cabeceras y separadores.

Texto con formato preestablecido
JavaScript
__________________________________________________________________________________
Existe una etiqueta que permite introducir en HTML texto con formato, es decir, el texto
introducido entre las etiquetas <PRE> y </PRE> ser visualizado por el navegador respetando los
espacios, saltos de lnea, etc. El atributo WIDTH permite especificar el mximo nmero de caracteres
por lnea.
Ejemplo de un listado
<HTML>
<HEAD>
<TITLE>Listado HTML ejemplo de texto preformateado</TITLE>
</HEAD>
<BODY>
<PRE width=60>
VISITAS DE INTERNET
Mes
Visitas Acumulado Total
Enero 1.250
0
1.250
Febrero 1.750
1.250 3.000
Marzo 850
3.000 3.850
</PRE>
</BODY>
</HTML>
ESTADILLO VISITAS DE INTERNET

Mes
Enero
Febrero
Marzo
Visitas
1.250
1.750
850
Acumulado
0
1.250
3.000
Total
1.250
3.000
3.850
Figura 1.5. Resultado de la utilizacin de la etiqueta <PRE>

Estilos de texto
A continuacin veremos los estilos de texto fsico y lgicos:
<B> Se utiliza para mostrar un bloque de texto en negrita.
<I> Para poner texto en cursiva
<U> Para subrayar el bloque de texto delimitado.
<TT> El texto tendr un tamao menor y los caracteres sern similares a los de una mquina
de escribir (typewriter).
<BLINK> Texto intermitente.
<BIG> Texto grande, el mayor tamao de fuente.
JavaScript
__________________________________________________________________________________
<SMALL> Texto pequeo, el menor tamao de fuente.
<SUP> Superndice.
<SUB> Subndice.
<ADDRESS> Emplearemos esta etiqueta para mostrar un bloque de texto en cursiva.
Generalmente se utiliza para marcar una direccin o firma.
<BLOCKQUOTE> Etiqueta que define un bloque de texto como una cita de otra fuente.
Se suele representar con una tabulacin y en cursiva.
<CITE> Muestra el texto como si fuese una cita.
<CODE> Se utiliza para representar una etiqueta HTML o cdigo de programa.
<EM> Presenta el contenido de un bloque de texto enfatizado.
<STRONG> Texto ms enfatizado que el caso anterior. Negrita.
<STRIKE> Texto tachado.
<BIG> Texto grande respecto al tamao normal.
<SMALL> Texto pequeo respecto al tamao normal.
<CENTER> Centra el texto en la pantalla.
<DIV></DIV> Cambio de lnea similar en tamao al generado con <BR>
<SPAN></SPAN> Se marca un conjunto de palabras a las que se les puede aplicar un
Determinado estilo con el atributo style. (Esta etiqueta no genera cambio de lnea)
Ejemplo de cdigo para texto con formato.
<HTML>
<HEAD><TITLE> Ejemplo de diversos textos con formatos</TITLE></HEAD>
<BODY>
<H1 align="center> TITULO CON H1 CENTRADO </H1>
<HR width="50%" align="center" noshade>
<H2> Subtitulo con H2 </H2>
<P align="center"> Prrafo de texto <BR>
marcado con P, centrado<BR>
y con cambios de lnea generados con BR. <BR></P>
<BIG> Texto aumentado con BIG </BIG>
<SMALL> Texto reducido con SMALL </SMALL>
<P> Texto con palabras en <B> negrita </B>, <I> Itlica </I>,
<U> Subrayada </U> y <B><I><U> con los tres estilos </U></I></B>.
<P> Un poco de texto marcado con TT:<BR>
<TT> Programa P1 <BR>
var i=0;
</TT>
<P> Para terminar, unas formulas:
<BR> E=mc <SUP> 2 </SUP>
<BR> a <SUB> k+1 </SUB> = a <SUB> k </SUB> +1
</BODY>
</HTML>
10
JavaScript
__________________________________________________________________________________
El resultado puede observarse en la figura 1.6
Figura 1.6. Apariencia de algunos formatos aplicables al texto de una pgina HTML.
Fuentes
La etiqueta <FONT> permite controlar casi totalmente el estilo de un bloque de texto.
Podremos establecer el tamao de la fuente mediante el atributo SIZE, la fuente de texto mediante
FACE y el color de la misma con el atributo COLOR. Debe cerrarse mediante </FONT>.
Los tamaos del texto van del 1 al 7. El tamao normal es el 3.
<FONT SIZE=5> Texto en tamao 5 </FONT>
<FONT SIZE=1> Texto en tamao 1 </FONT>
Tambin podemos cambiar el tamao de la fuente tomando como referencia el tamao normal
de la fuente.
<FONT SIZE= -1> Texto ms pequeo </FONT>
<FONT SIZE =+1> Texto ms grande </FONT>
<FONT SIZE =+2> Texto mucho ms grande </FONT>
Para cambiar el color de un fragmento de texto:
<FONT COLOR=blue> Este texto est en azul
11
JavaScript
__________________________________________________________________________________
<FONT COLOR=red> Ahora en rojo </FONT>
Tambin podemos cambiar el tipo de fuente, pero para poder visualizarlas, deberemos disponer
de ella en el computador.
<FONT FACE=Cosmic> Este texto se ver con la fuente Cosmic</FONT>
<!La computadora que no tenga instalada la fuente ver la predefinida en su navegador. -->
Si es necesario poner todo el texto con un mismo tamao deberemos utilizar la etiqueta
<BASEFONT>.
<BASEFONT SIZE=5>
Ejemplo de cdigo.
<HTML>
<HEAD> <TITLE> Listado de ejemplo de utilizacin de FONT </TITLE>
</HEAD>
<BODY>
<FONT SIZE=6 FACE=Cosmic COLOR=Blue> Este texto est en azul con una fuente
Cosmic </FONT>
<BR>
<FONT SIZE=2 FACE=Arial COLOR=black> Este otro en negro con la fuente
Arial </FONT>
<BR>
<FONT SIZE=4 FACE=Verdana COLOR=Red> Otro ejemplo de utilizacin</FONT>
<BR>
<FONT SIZE=5 FACE=Dauphin COLOR=Red> Para terminar <FONT COLOR=blue>
un <FONT COLOR=navy> ms <FONT COLOR=black>. Os gusta. </FONT>
</BODY>
</HTML>
ENLACES
Otra funcin de HTML es el hipertexto, este consiste en poder moverse a travs de un
documento o varios, seleccionando zonas de texto o imgenes programadas para tal fin.
Cualquier elemento de un documento HTML puede ser definido como enlace, y una imagen,
prrafo de texto o un bloque de texto pueden ser enlaces a otros puntos del documento o de la red.
Estructuras de los enlaces
La estructura general de in enlace esta formada por la etiqueta <A> seguida de determinados
atributos. Como norma general un enlace se distingue del texto normal porque ste aparece resaltado
12
JavaScript
__________________________________________________________________________________
en otro color (generalmente azul) y subrayado. Si se trata de una imagen con borde, ste aparecer de
color azul. Un enlace ser toda zona de la pgina Web sobre la que al pasar ste cambia de aspecto, y
aparecer en la parte inferior del navegador el lugar al que se acceder.
La estructura bsica de un enlace:
<A HREF=destino del enlace> Texto indicativo del enlace </A>
Tipos de enlaces
Ejemplo A. Enlace a un punto de la misma pgina
En documentos extensos o ndices suelen ponerse enlaces desde el principio del documento, al
final del mismo y viceversa. El primer paso consiste en marcar las distintas zonas del documento a las
que se desea poder acceder de manera inmediata; en este caso el inicio y final del documento.
Para el principio del documento aadiremos la lnea del cdigo siguiente:
<A NAME=iniciodocumento>
Hemos marcado como inicio un punto en el comienzo del documento. Ahora para el final del
documento, pondremos esta lnea:
<A NAME=final del documento>
Una vez marcadas las distintas zonas del documento, vamos a situar en el mismo los enlaces
que nos permitirn ir de arriba abajo la pgina.
En el inicio y final del documento aadiremos las siguientes lneas:

<A HREF=#finaldocumento> Pulsa aqu para ir al final de esta pagina </A>
<!Esta lnea debe situarse al final del cuerpo del documento -->
<A HREF=#iniciodocumento> Pulsa aqu para ir al principio de esta</A>
Ejemplo B. Enlaces a otras paginas
Cuando se dispone de varias pginas, es normal que desde una de ellas se pueda acceder a otra
y, desde esta otra a una tercera, etc. El procedimiento es similar al anterior, pero en esta es necesario
especificar el nombre del archivo que contiene la pgina a la que se quiere acceder.
Vamos a suponer que tenemos dos pginas llamadas principal.html y secundaria.html
13
JavaScript
__________________________________________________________________________________
Para crear un enlace de la primera a la segunda, deberemos escribir:
<A HREF=secundaria.html> Pulsa aqu para acceder a mi otra pgina </A>
Si el enlace se quisiese conectar con un punto concreto de la pgina de marcado como
opciones, la estructura del cdigo sera la siguiente:
<A HREF=secundaria.html#opciones> Pulsa aqu para ver las opciones de mi otra pagina </A>
Ejemplo C. Enlaces a otros sitios
Los siguientes ejemplos ilustran distintos modelos de enlaces:
<!Enlace a un URL -->
<A HREF=http://www.google.com/ pgina principal de un servidor llamado google </A>
<!Enlace a una direccin de correo -->
<A
HREF=malito:micorreo@miservidor.com>
micorreo@miservidror.com </A>
direccin
correo
del
autor
<!Enlace activo la figura imagen1.jpg. Al pulsar sobre ella se accede a la direccin especificada
en ref. -->
<A HREF=http://www.google.com/><img src= imagen1.jpg></A>
<!Enlace que presenta en pantalla una imagen al seleccionarlo -->
<A HREF= foto1.jpg> Pulsa aqu para ver una foto </A>
Ejemplo de cdigo HTML que trabaja con distintas opciones de enlaces:
<HTML>
<HEAD>
<TITLE>Listado de ejemplo de enlaces</TITLE>
</HEAD>
<BODY>
<H3><U>Opciones disponibles en esta pgina</U></H3>
<P>Relacin de enlaces disponibles<BR>
<A HREF=http://www.google.com/fotos.html>Coleccin de fotografas</A><BR>
<P>El Tercer Mundo. [No disponible]<BR>
<A HREF=http://www.google.com/musica.html>Todo en msica</A><BR>
<A HREF=http://www.google.com/libros.html> Biblioteca de los seres vivos</A><BR>
<P>Fotografa ertica. [No disponible]<BR>
<A HREF=malito:micorreo@miservidor.com>micorreo@miservidor.com<A/><BR>
</BODY>
</HTML>
14
JavaScript
__________________________________________________________________________________
El resultado se puede mostrar en la figura 1.7
Figura 1.7. Distintos enlaces.

LISTAS
Las listas se emplean para presentar de forma ordenada una serie de lneas. Estas pueden ser
ordenadas, desordenadas, de definicin, de men y de directorio. Las ltimas no generan resultados
relevantes, por lo que no las trataremos.
Lista desordenada, <UL>
Lista ordenada, <OL>
Lista de definicin, <DL>
Destacar que los distintos tipos de listas pueden combinarse entre si.
Listas desordenadas
Las etiquetas que definen este tipo de lista son <UL> y </UL> respectivamente.
Las listas desordenadas se utilizan para relacionar elementos sin orden especfico. HTML
coloca un smbolo delante de cada elemento dependiendo del valor especificado en el atributo TYPE.
Este atributo puede tomar el valor de circle (crculo sin relleno), disc (crculo con relleno) y square
(cuadrado). Se este atributo se aplica a la etiqueta <UL>, toda la lista utilizar el smbolo indicado, en
cambio, si se le aplica a la etiqueta <LI>, encargada de sealar los distintos elementos de una lista, el
cambio de smbolo slo afectara al elemento actual y a los siguientes hasta nueva indicacin.
15
JavaScript
__________________________________________________________________________________
Ejemplo de listado.
<UL TYPE=square>
<LI> Capitulo 1
<LI> Capitulo 2
<LI> Capitulo 3
<UL TYPE=disc>
<LI> Apartado 3.1
<LI> Apartado 3.2
</UL>
<LI> Capitulo 4
</UL>
Captulo 1
Captulo 2
Captulo 3
Apartado 3.1
Apartado 3.2
Captulo 4
Figura 1.8. Ejemplo de utilizacin de listas desordenadas

Listas ordenadas
Este tipo de lista se utiliza para relacionar elementos con un orden determinado y precedido de
un nmero que se incrementa automticamente. Las etiquetas son <OL> y </OL>.
Recordemos que la etiqueta <LI>, es la encargada de sealar los distintos elementos de una
lista. Las listas ordenadas siempre comienzan por 1 y van aumentando progresivamente, pero estas
caractersticas se pueden controlar mediante los atributos TYPE y START.
El atributo TYPE determina el formato de la marca encargada de numerar segn la siguiente
relacin:
Letras maysculas (TYPE=A)
Letras minsculas (TYPE=a)
Nmeros romanos mayscula (TYPE=I)
Nmeros romanos mayscula (TYPE=i)
Nmeros (TYPE=1)
START especifica el nmero del primer elemento de la lista, para valores distintos a 1
(tomado por efecto). El orden se da siempre en nmeros independientemente del tipo de marca
seleccionada.
Ejemplo de cdigo
16
JavaScript
__________________________________________________________________________________
<UL TYPE=1><OL>
<LI> Introduccin a Dynamic HTML
<LI> Brece recorrido por HTML
<LI> Breve recorrido por JavaScript
<OL TYPE=A>
<LI>Dynamic HTML
<LI> Hojas de estilo en cascada
<OL TYPE=a>
<LI> parmetro CLASS
<OL TYPE=i>
<LI> Apndice A. Referencia HTML 4.0
<LI> Apndice B. Referencia JavaScript </OL>
Listas de definicin
1. Introduccin a Dynamic HTML

2. Breve recorrido por HTML
3. Breve recorrido por JavaScript
A. Dynamic HTML
B. Hojas de estilo en cascada
a. parmetro CLASS
i.
Apndice A. Referencia
HTML 4.0
ii.
Apndice B. Referencia
Figura 1.9. Ejemplo de listas ordenadas
JavaScript
Las listas de definicin, son apropiadas para glosarios, catlogos, etc.. Los elementos deben ir
englobados entre las etiquetas <DL> y </DL> y estn formadas por un primer elemento, al que
podramos denominar termino o ttulo concretado con la etiqueta <DT>, y un segundo llamad
definicin sealado con la etiqueta <DD>.
Ejemplo de cdigo.
<DL>
<DT> HTML
<DD> Hyper Text MarkUp Language
<DT> JavaScript
<DD> Lenguaje orientado a objetos desarrollado para aplicaciones de Internet
</DL>
IMGENES
Para incluir imgenes en documentos HTML se emplea la etiqueta <IMG> junto con un
atributo imprescindible: SRC.
17
JavaScript
__________________________________________________________________________________
Un atributo til es ALT. Este introduce una descripcin de la imagen con la finalidad de que
los usuarios que acceden a la pgina con un navegador en modo texto puedan hacerse una idea de las
imgenes que contiene.
<IMG SRC=nombre del archivo de la imagen ALT=descripcin de la imagen>
Las imgenes deben estar en formato GIF, JPEG, XBM o PNG (Portable Network Graphics).
Las imgenes GIF ocupan poco espacio, se cargan rpidamente y slo pueden trabajar con 256
colores. Pueden hacerse fondos transparentes.
El formato JPEG tiene un tamao aun menor que el GIF y trabaja con color de 24 bits, 16.7
millones de colores.
El formato PNG est poco introducido y slo los navegadores de ltima generacin lo
soportan. Su tamao es menor que el GIF y la calidad superior al JPEG.
Alineacin de imgenes con texto
El atributo ALIGN permite alinear la imagen respecto al texto en funcin de los siguientes
valores: left, right, top, texttop, middle, absmiddle, baseline, bottom y absbottom.
Descripcin de los valores:
ALIGN=left La imagen se colocar en el primer hueco disponible a partir del margen
izquierdo, hacia abajo, y el texto subsiguiente se colocar a la derecha de la imagen.
ALIGN=right La imagen se colocar a la derecha y el texto a la izquierda.
ALIGN=top Alinea la parte superior de la imagen con el borde superior de la lnea.
ALIGN=texttop Alinea la parte superior de la imagen con el texto que mas altura alcanza la
lnea.
ALIGN=middle Alinea la lnea base del texto con la mitad de la imagen.
ALIGN=absmiddle Alinea el punto medio vertical de la lnea de texto con la mitad de la
imagen.
ALIGN=bottom Alinea el borde inferior del texto con el borde inferior de la imagen.
ALIGN= baseline Desempea la misma funcin que el anterior.
ALIGN= absbottom Alinea el inferior de la imagen con el inferior de la lnea.
Ejemplo de cdigo HTML.
<HTML>
<HEAD><TITLE>Cdigo ejemplo de alineacin de imgenes</TITLE>
</HEAD>
<BODY>
<IMG SRC="counter.gif" ALIGN="top" ALT="imagen de contador"> Alineacin TOP
<BR><BR>
18
JavaScript
__________________________________________________________________________________
<IMG SRC="counter.gif" ALIGN="middle" ALT="imagen de contador"> Alineacin MIDDLE
<BR><BR>
<IMG SRC="counter.gif" ALIGN="bottom" ALT="imagen de contador"> Alineacin BOTTOM
<BR><BR>
<IMG SRC="counter.gif" ALIGN="left" ALT="imagen de contador"> Alineacin LEFT
<BR><BR><BR>
<IMG SRC="counter.gif" ALIGN="right" ALT="imagen de contador"> Alineacin RIGHT
<BR><BR>
</BODY>
</HTML>
Figura 1.10. Ejemplo de alineacin de imgenes.

Tamao y borde de una imagen
Para poner un marco o borde a una imagen se deber utilizar el atributo BORDER.
<HTML>
<HEAD><TITLE> Ejemplo de bordes en imgenes</TITLE>
</HEAD>
<BODY>
<IMG SRC="back.gif" BORDER=0><BR>
19
JavaScript
__________________________________________________________________________________
</BODY>
</HTML>
Figura 1.11. Utilizacin del atributo BORDER trabajando con imgenes

Tambin podemos redefinir el tamao de una imagen mediante los atributos WIDTH y
HEIGHT (anchura y altura) con los que podemos redimensionar una imagen para adaptarla a nuestras
necesidades.
<HTML>
<HEAD><TITLE> Ejemplo de redimensionado de imagen</TITLE>
</HEAD>
<BODY>
<IMG SRC="tierra.gif" WIDTH=192 HEIGTH=270> Imagen a tamao real
<IMG SRC="tierra.gif" WIDTH=100 HEIGHT=190> Imagen redimensionada
</BODY>
</HTML>
20
JavaScript
__________________________________________________________________________________
Imagen a tamao real
Imagen redimensionada
Figura 1.12. Utilizacin de los atributos WIDTH y HEIGHT

El atributo VSPACE indica el espacio a reservar por encima y por debajo de la imagen.
El atributo HSPACE se refiere al espacio a reservar a derecha e izquierda de la misma. El
valor se especifica en puntos.
Carga rpida de una imagen
El atributo LOWSRC permite cargar rpidamente una imagen de menor resolucin
(evidentemente deber tener menor tamao) para ir sustituyndola por la de calidad.
<HTML>
<HEAD><TITLE> Ejemplo de carga de imagen en baja resolucin</TITLE>
</HEAD>
<BODY>
<IMG SRC="altacalidad.jpg" BORDER=2 LOWSRC="bajacalidad.jpg" ALT="cara de chica">
</BODY>
</HTML>
IMGENES MAPEADAS
Las imgenes mapeadas son aquellas en las que se definen diversas zonas que activan distintos
enlaces cuando son seleccionadas.
Desarrollo de la imagen
Primero se realiza el diseo de la imagen mediante un programa grfico. Despus para definir
las distintas zonas de la imagen necesitamos conocer las coordenadas que delimitan las reas de la
imagen que deseamos sensibilizar, para ello tomaremos las coordenadas que delimitan. Finalmente,
asignaremos a cada zona su correspondiente enlace.
21
JavaScript
__________________________________________________________________________________
Programacin del cdigo
Primero deberemos definir la imagen a utilizar mediante la etiqueta <IMG> y asignarle un
nombre al mapa resultante mediante el atributo USEMAP. Al nombre de dicho mapa habr que
anteponerle el smbolo #.
A continuacin, abrimos el mapa mediante la etiqueta <MAPNAME>.
El fragmento de cdigo HTML:
<IMG SRC=men.jpg ALT=Men de opciones BORDER=0 USEMAP=#Juanysmap>
<MAP NAME=Juanysmap>
Ahora tenemos que asignar a cada parte de la imagen el correspondiente URL de destino. La
etiqueta <AREA> se encarga de gestionar las distintas reas del mapa ayudada por los atributos
SHAPE, COORDS y HREF.
El atributo SHAPE se encarga de delimitar las distintas zonas del mapa segn los siguientes
valores:
Rect. Usado para delimitar una superficie rectangular por medio de las coordenadas del
vrtice superior izquierdo e inferior derecho.
Circle. Delimita una circunferencia mediante la coordenada del centro de la misma y el valor
del radio.
Poly. Polgono definido mediante un conjunto de lneas. Se deben definir las coordenadas de
los distintos vrtices de las polilneas.
Las distintas reas del mapa deban ser definidas mediante coordenadas, por lo que usaremos el
atributo COORDS, para introducir estas junto con el URL al que se acceder.
El cdigo necesario para nuestro mapa sera similar al siguiente:
<HTML>
<HEAD><TITLE>Cdigo ejemplo de una imagen mapeada</TITLE></HEAD>
<BODY>
<IMG SRC="men.jpg" ALT="Men de opciones" BORDER=0 USEMAP="#Juanysmap">
<MAP NAME="Juanysmap">
<AREA SHAPE="rect" COORDS="30,95,111,112"HREF="busca.htm">
<AREA SHAPE="rect" COORDS="114,96,166,111"HREF="pages.htm">
<AREA SHAPE="rect" COORDS="169,96,261,111"HREF="guestbook.htm">
<AREA SHAPE="rect" COORDS="264,96,377,111"HREF="verbook.htm">
<AREA SHAPE="rect" COORDS="30,40,104,58"HREF="down.htm">
<AREA SHAPE="rect" COORDS="106,40,210,58"HREF="chord.htm">
<AREA SHAPE="rect" COORDS="279,40,378,58"HREF="biblio.htm">
<AREA SHAPE="rect" COORDS="213,40,276,58"HREF="kit.htm">
22
JavaScript
__________________________________________________________________________________
<AREA SHAPE="rect" COORDS="153,60,225,76"HREF="/yo/yo.htm">
<AREA SHAPE="rect" COORDS="30,79,109,96"HREF="mailto:micorreo@miservidor.com">
<AREA SHAPE="rect" COORDS="30,60,149,76"HREF="info.htm">
<AREA SHAPE="rect" COORDS="229,61,337,75"HREF="baby.htm">
<AREA SHAPE="rect" COORDS="113,79,208,93"HREF="curso.zip">
<AREA SHAPE="rect" COORDS="210,79,337,93"HREF="multime.htm">
<AREA SHAPE="default"NOHREF>
</MAP>
</BODY>
</HTML>
Se ha aadido la lnea <AREA SHAPE="default"NOHREF> con la finalidad de no establecer
ningn enlace si se selecciona una zona del mapa no definida. Tambin podemos establecer enlace
por defecto para zonas del mapa no definidas mediante <AREA SHAPE="default"HREFenlace por
defecto>
TABLAS
Las tablas estn divididas en celdas, que pueden contener texto, listas, imgenes, enlaces,
formularios, etc.
Estructuracin de una tabla
Las etiquetas <TABLE> y </TABLE> son las encargadas de definir el principio y el final de
una tabla respectivamente.
Tambin utilizaremos las etiquetas <TD> y </TD> para inicio y final de cada una de las celdas
y <TR> y </TR> para el inicio y final de cada fila. Tambin podemos utilizar <TH> y </TH> para
definir el inicio y final de una celda de cabecera. El contenido de esta aparecer en negrita y centrado.
Para disear una tabla de 10 celdas y dos filas para clasificar los nmeros del 0 al 9, el cdigo
sera similar a este:
<HTML>
<HEAD><TITLE>Tabla con los nmeros del 0 al 9</TITLE></HEAD>
<BODY>
<TABLE>
<TR>
<TD>0</TD> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD></TR>
<TR>
<TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> <TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
23
JavaScript
__________________________________________________________________________________
Observe la figura 1.13
Figura 1.13 Tabulacin del contenido de las celdas de una tabla.

La etiqueta <CAPTION> se utiliza para poner un ttulo a la tabla. El ttulo se puede situar
arriba o abajo, con el atributo ALIGN.
Veamos el siguiente listado:
<HTML>
<HEAD><TITLE>Tabla con bordes</TITLE></HEAD>
<BODY>
<TABLE BORDER=5>
<CAPTION ALIGN=bottom>Horas trabajadas de la semana<CAPTION><TR>
<TH>Lunes</TH><TH><CENTER>Martes</CENTER></TH>
<TH>Mircoles</TH><TH>Jueves</TH><TH>Viernes</TH>
<TH>Sbado</TH><TH>Domingo</TH>
</TR>
<TR>
<TD>10</TD><TD>8</TD><TD>8</TD><TD>11</TD><TD>8</TD><TD>3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figura 1.14. Ejemplo de utilizacin de la etiqueta <CAPTION>

Alineacin y dimensin de celdas
Disponemos de los siguientes valores de alineacin:
24
JavaScript
__________________________________________________________________________________
<TD ALIGN=Center>Alineado en el centro </TD>
<TD ALIGN=Left> Alineado a la izquierda </TD>
<TD ALIGN=Right> Alineado a la derecha</TD>
<TD VALIGN=Top > En la parte superior de la celda</TD>
<TD VALIGN=Middle> En la parte central de la celda</TD>
<TD VALIGN=Bottom> En la parte inferior de la celda</TD>
Los atributos COLSPAN y ROWSPAN permiten que una celda ocupe el espacio de varias,
expandindose hacia la celda de la derecha o hacia la siguiente fila. COLSPAN indica el nmero de
celdas contiguas que debe ocupar hacia la derecha, mientras que ROWSPAN indica cuntas filas
hacia abajo se expande la celda.
Ejemplo:
<HTML>
<HEAD><TITLE>Ejemplo de dimensionado de celdas></TITLE></HEAD>
<BODY>
<TABLE border=5>
<CAPTION>Ejemplo de alineaciones y dimensionados</CAPTION>
<TR>
<TD COLSPAN=2 ALIGN="right">Esto ocupa dos celdas</TD>
<TD>Celda</TD>
<TD>Celda</TD>
</TR>
<TR>
<TD ROWSPAN=2 VALIGN="bottom"> Esto ocupa dos filas</TD>
<TD>Celda</TD>
<TD>Celda</TD>
<TD>Celda</TD>
</TR>
<TR>
<TD>Celda</TD>
<TD>Celda</TD>
<TD>Celda</TD>
</TR>
</TABLE>
</BODY>
</HTML>
25
JavaScript
__________________________________________________________________________________
Figura 1.15. Alineacin y dimensionado de celdas en una tabla.

Los atributos WIDTH y HEIGHT podemos especificar la anchura y altura respectivamente un
porcentaje de la dimensin de la pantalla o un determinado nmero de pxeles.
<TABLE WIDTH=50><TABLE>
<TABLE WIDTH=50%><TABLE>
<TABLE HEIGHT=150><TABLE>
Se puede asignar un color de fondo a toda la tabla, a una celda o la combinacin de varias. El
atributo a utilizar es BGCOLOR. Para hacer que toda la tabla tenga como color de fondo el verde
(green), el cdigo deber ser:
<TABLE BORDER BGCOLOR=green>
Para que una determinada celda tenga como color de fondo el verde, el atributo deber estar en
la etiqueta que define dicha celda:
<TD BGCOLOR=green>Esta celda tiene el fondo verde</TD>
Para combinar distintos colores, utilizaremos el atributo tantas veces como sea necesario; el
color que predomine se puede establecer en la etiqueta <TABLE>.
<HTML>
<HEAD><TITLE>Colores de fondo y dimensiones generales de la tabla</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 BORDER=5 ALIGN="CENTER"
VALIGN="CENTER"BGCOLOR=yellow>
<CAPTION>OTRO EJEMPLO MAS DE TABLAS</CAPTION>
<TR>
<TD>JUAN</TD>
<TD>NIEVES</TD>
<TD BGCOLOR=gray>LYDIA</TD>
26
JavaScript
__________________________________________________________________________________
</TR>
<TR>
<TD>JOSE</TD>
<TD>Ma. JOSE</TD>
<TD BGCOLOR=gray>DANIEL</TD>
<TD BGCOLOR=gray>DAVID</TD>
</TR>
<TR>
<TD>JAVI</TD>
<TD>ITO</TD>
<TD BGCOLOR=gray>MIRIAM</TD>
<TD BGCOLOR=gray>CARLITOS</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figura 1.16. Ejemplo de coloreado de celdas

Separacin entre celdas
Mediante el atributo CELLSPACING podemos variar la separacin entre celdas, y con el
atributo CELLPADING la separacin entre el borde de la celda y el contenido de la misma. Ambos
debern ponerse en la etiqueta <TABLE>.
El siguiente cdigo muestra la configuracin de una tabla con un grosor de borde de 2
unidades, separacin entre celdas de 10 y separacin del contenido de las mismas con respecto a los
bordes de 20.
<TABLE BORDER=2 CELLSPACING=10 CELLPADING=20>
REPRODUCCIN DE AUDIO
La capacidad de reproducir sonido en una pgina Web esta determinada por el navegador que
se utilice.
27
JavaScript
__________________________________________________________________________________
Microsoft y Netscape utilizan etiquetas y atributos no estndares de HTML, consiguiendo que
determinadas funciones multimedia no sean reconocidas por el navegador.
La solucin para eliminar la incompatibilidad entre navegadores es aadir la lnea de ambos.
Msica de fondo con el Microsoft Internet Explorer.
La etiqueta encargada de reproducir un archivo de audio es <BGSOUNG> asociada al atributo
SRC. Los archivos podrn ser del formato *.wav, *.au o *.mid
Un atributo fundamental en esta etiqueta es LOOP, sta ser usada para especificar el nmero
de veces que se debe ejecutar el archivo de sonido. Puede tener un valor numrico o valor infinite, que
reproducir el archivo en un bucle cerrado.
El siguiente cdigo de ejemplo reproduce infinitamente el archivo midi llamado msica.mid:
<BGSOUND SRC=musica.mid LOOP=infinite>
Msica de fondo con Netscape
La etiqueta que gestiona el sonido en Netscape es <EMBED> asociada al atributo SRC.
Netscape presenta en pantalla una ventana de control de audio con las clsicas funciones de avance,
retroceso, ejecucin y Stop. Las dimensiones de la ventana se pueden modificar con los atributos
WIDTH y HEIGHT. Si no queremos que aparezca la ventana de control, deberemos asignar el
atributo HIDDEN asignando el valor true.
El siguiente cdigo de ejemplo, reproduce automticamente una sola vez el archivo MIDI
musica.mid sin mostrar ninguna ventana de control:
<EMBED SRC=musica.mid WIDTH=100 HEIGHT=55 HIDDEN=true
AUTOSTART=true>
LOS FRAMES
Un brame es un marco que divide la pantalla en filas y columnas segn nuestras necesidades.
Con los brames podemos dividir la pantalla en ventanas y visualizar, por ejemplo, un men en la parte
izquierda y los resultados de los enlaces en la derecha.
Los enlaces y el atributo TARGET
El atributo TARGET, determinar la zona de la pantalla en donde se mostrarn los elementos
del enlace seleccionado.
28
JavaScript
__________________________________________________________________________________
Imaginemos que hemos dividido la pantalla en dos partes, una superior e inferior, el cdigo
sera:
<--Cdigo para la parte superior -->
<A HREF=paginaa.htm TARGET=arriba> Pulse aqu para ir a la ventana superior</A>
<--Cdigo para la parte inferior -->
<A HREF=paginaa.htm TARGET=abajo> Pulse aqu para ir a la ventana inferior</A>
El atributo TARGET determina el lugar de destino del contenido del enlace especificado. Una
vez dividida la pantalla, deberemos indicar en los enlaces de nuestro cdigo HTML el lugar de la
pantalla en donde sern visualizados.
Sin embargo, este atributo tiene valores especiales:
TARGET=_blank. El enlace siempre se carga en una nueva ventana.
TARGET=_self. El enlace se carga en la misma ventana en que se encuentra.
TARGET=_parent. El enlace se carga en el FRAMESET inmediatamente superior al
documento.
TARGET=_top. El enlace se carga en la totalidad de la ventana.
Estructura bsica
El cdigo principal de una pgina con frames no presenta las etiquetas <BODY> y </BODY>.
El cdigo deber estar incluido entre las etiquetas <HEAD> y </HEAD>.
La primera etiqueta a utilizar es <FRAMESET>, que es la que permite dividir la pantalla en
ventanas, ya sean verticales u horizontales. Los atributos encargados de determinar el aspecto de esas
ventanas son ROWS y COLS, filas y columnas respectivamente.
El atributo ROWS se encarga de definir el nmero de divisiones verticales a efectuar, mientras
que COLS hace lo propio pero con las divisiones horizontales.
La forma de introducir los valores de divisin de la pantalla se basan en los siguientes
formatos:
n. Si se introduce un valor n determinado, se estar indicando la altura o anchura de la ventana
en pxeles.
%. Este valor indica que la altura o anchura de la ventana es un porcentaje relativo al tamao
de la ventana que la contiene.
*. Un asterisco indica que debe asignarse a la ventana todo el espacio disponible. Si hay
varias ventanas, el espacio libre se divide entre ellas y, si hay un valor delante del asterisco, la
ventana que lo tenga asignado tomar ms espacio relativo, por ejemplo 2*,* dara 2/3 del
espacio a la primera ventana y un tercio de la segunda.
Formas de dividir una pantalla:
29
JavaScript
__________________________________________________________________________________
<-- Ejemplo 1-->
<FRAMESET COLS=100% ROWS=25%, 25%, 25%,>
<-- Ejemplo 2-->
<FRAMESET COLS=100% ROWS=25%, 25%, 25%, 25%>
La etiqueta <FRAME> y <NOFRAME>
La etiqueta <FRAME> es la encargada de llamar al documento HTML que se debe cargar en
una ventana. Esta etiqueta puede tener hasta seis atributos distintos:
SRC=url. El atributo SRC toma como valor el URL del documento que se debe mostrar en
esa ventana en particular. Si no se incluye, la ventana quedar vaca.
NAME=nombre ventana. Como se puede deducir, se emplea para dar un nombre a una
ventana, de maneta que pueda ser el destino de cualquier enlace.
MARGINWIDTH=valor. Lo emplearemos cuando queramos precisar un nmero de
pxeles entre los bordes izquierdo y derecho de la ventana.
MARGINHEIGHT=valor. Lo emplearemos cuando queramos precisar un nmero de
pxeles entre los bordes izquierdo y derecho de la ventana.
SCROLLING=yes|no|auto.
Este atributo se utilizar para mostrar barras de
desplazamiento o no. Yes mostrar siempre las barras, no nunca pondr barras en la ventana y
auto har que el navegador decida si son necesarios o no en funcin del contenido de la misma.
NORESIZE. Atributo que indica al navegador que la ventana no pueda ser redimensionada
por el usuario.
Listado principal de definicin del frame:
<HTML>
<HEAD><TITLE>Ejemplo de varios frames combinados</TITLE>
<FRAMESET COLS="100%" ROWS="33%,33%,*">
<FRAMESET COLS="20%,20%,20%,20%,*">
<FRAME NAME="Frame 1"SRC="ejemplo.html">
</FRAMESET>
<FRAMESET COLS="50%,*">
</FRAMESET>
<FRAMESET COLS="33%,33%,*">
30
JavaScript
__________________________________________________________________________________
</FRAMESET>
</FRAMSET>
</HEAD>
</HTML>
En ejemplo ms:
<HTML>
<HEAD><TITLE>Un ejemplo complejo de Frames</TITLE>
<FRAMESET ROWS="100%" COLS="16%,16%,16%,16%,16%,*">
<FRAMESET ROWS="50%,*">
<FRAME NAME="Frame 1"SRC="/ejemplo.htm"SCROLLING="AUTO">
<FRAME NAME="Frame 2"SRC="/ejemplo.htm"SCROLLING="YES">
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME NAME="Frame 3"SRC="/ejemplo.htm"SCROLLING="AUTO"
NORESIZE>
</FRAMESET>
<FRAME NAME="Frame 7"SRC="/ejemplo.htm"SCROLLING="AUTO"
NORESIZE>
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
LOS FORMULARIOS
Los formularios pueden introducirse en cualquier parte del documento, es decir, en tablas,
dentro de un texto preformateado, etc. Tambin pueden contener en su interior listas, imgenes, etc.
Las etiquetas que definen el inicio y final de un formulario es: <FORM> y </FORM>
respectivamente. Las etiquetas que definen los campos de entrada <INPUT>, las que definen los
campos de seleccin <SELECT> y las reas de texto <TEXTAREA>.
31
JavaScript
__________________________________________________________________________________
<FORM ACTION=fichero de tratamiento METHOD=POST/GET>
Elementos del formulario
</FORM>
Declaracin del formulario <FORM>.
Los elementos que componen un formulario deben encontrarse entre las etiquetas <FORM> y
</FORM>.
Atributos de la etiqueta <FORM>:
ACTION. Atributo que determina la accin que debe realizarse al pulsar el botn de
ejecucin.
METHOD. Indica el mtodo de transferencia de la informacin introducida en el formulario.
Pueden emplearse los mtodos GET y POST. El mtodo GET enva la informacin a travs
de una variable llamada QUERY_STRING. El mtodo POST utiliza dos variables:
CONTENT_LENGTH, que contiene la longitud de datos enviados, y CONTENT_TYPE, que
son los datos propiamente.
ENCTYPE. Atributo que determina la forma de codificacin empleada para el transporte del
contenido del formulario.
Definicin de campos de entrada <INPUT>
La etiqueta <INPUT> se emplea para definir todos los elementos del formulario, como
botones, cajas de texto, casillas de verificacin, etc. El atributo que determina el tipo de elemento es
TYPE.
Los tipos de entrada son:
Checkbox. Cuadro vaco de seleccin. Permite selecciones mltiples.
Hidden. Se utiliza para pasar los datos adquiridos en un formulario a otro sin que se visualice
nada en la pantalla.
Text. Como su nombre indica se utiliza para la entrada de textos.
Password. Permite la introduccin de texto visualizndose para cada carcter un asterisco.
Radio. Crculo vaco de seleccin. Solo permite una opcin entre varias.
Reset. Borra todos los datos introducidos en el formulario.
Submit. Enva la informacin del formulario.
Checkbox
Se utiliza para elegir una serie de opciones disponibles, pudindose realizar selecciones
mltiples. Los elementos de este tipo requieren como mnimos los atributos NAME y VALUE, que
indican respectivamente el nombre del tipo o grupo de tipos y el valor del campo.
32
JavaScript
__________________________________________________________________________________
Tambin se puede incluir el atributo CHECKED cuando queramos que esa opcin aparezca
por defecto.
Ejemplo de cdigo.
<INPUT TYPE="checkbox" NAME="sistema" VALUE="win95"CHECKED>Windows 95<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="DOS">Ms-Dos<BR>
<INPUT TYPE='checkbox" NAME="sistema" VALUE="win3.x">Windows 3.x<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="Linux">Linux<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="Otros">Otros Sistemas<BR>
Figura 1.17. Ejemplo del campo de entrada checkbox.

Hidden
Este tipo no muestra ningn campo en pantalla. Asigna una especie de marca al formulario
para que el navegador pueda reconocer al formulario en posteriores tareas. Tambin se necesitan
especificar los atributos NAME y VALUE.
Text
Valor por defecto del atributo TYPE. Define una zona de entrada de texto simple que puede
tomar como atributos opcionales los siguientes:
MAXLENGTH. Atributo que delimita el nmero mximo de caracteres que pueden ser
introducidos. El nmero de caracteres por defecto es limitado.
SIZE. Especifica la cantidad de espacio reservada para introducir el texto.
VALUE. Permite poner un valor inicial para la casilla.
Ejemplo:
Nombre<INPUT TYPE="text" NAME="nombre" ><BR>
Apellidos<INPUT TYPE="text" NAME="apellidos" ><BR>
Direccin<INPUT TYPE="text" NAME="direccin" SIZE="50"><BR>
Poblacion<INPUT TYPE="text" NAME="poblacin" ><BR>
Provincia<INPUT TYPE="text" NAME="provincia" ><BR>
33
JavaScript
__________________________________________________________________________________
El cdigo TYPE=text se puede omitir.
Figura 1.18. Ejemplo del campo de entrada text. Observe el redimensionado de la casilla Direccin.
Password
Este tipo se utiliza generalmente para la introduccin de claves de acceso. El texto que se va
escribiendo en la ventana no es legible por curiosos.
Cdigo:
<HTML>
<BODY>
Introduzca nombre de usuario:<INPUT NAME="usuario"><BR>
Contrasea: <INPUT TYPE="password" NAME="pass">
</BODY>
</HTML>
Figura 1.19. Casilla caracterstica de password

Radio
Es similar al checkbox, pero sta solo permite elegir una opcin entre todas. Los elementos de
este tipo requieren como mnimo los atributos NAME y VALUE.
Cdigo de ejemplo:
<HTML>
<BODY>
<INPUT TYPE="radio" NAME="edad" VALUE="-18"> Menos de 18 aos<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="18-25" CHECKED> Entre 18 y 25 aos<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="25-35"> Entre 25 y 35 aos<BR>
34
JavaScript
__________________________________________________________________________________
<INPUT TYPE="radio" NAME="edad" VALUE="35-50"> Entre 35 y 50 aos<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="+50"> Ms de 50 aos<BR>
</BODY>
</HTML>
Figura 1.20. Ejemplo de radio

Reset
Se usa para eliminar del formulario todos los valores introducidos. Su aspecto es el de un
botn y su nombre se especifica con en atributo VALUE.
Submit
Es el botn que se encarga de enviar el formulario. La etiqueta del botn se determina
mediante el atributo VALUE.
Ejemplo de reset y submit.
<INPUT TYPE="submit"VALUE="Pulsa aqu para enviar el formulario">
<INPUT TYPE="reset" VALUE="Pulsa aqu para borrar todos los datos">
Definicin de campos de seleccin
La etiqueta <SELECT>..</SELECT> permite al usuario seleccionar una opcin de un
conjunto de elementos mostrados como una lista desplegable, donde cada una de las opciones se
introduce mediante el elemento OPTION. Con el atributo SELECT podemos visualizar una
determinada opcin de la lista.
Los atributos que reconoce son:
MULTIPLE. Por defecto solo puede ser seleccionada una sola opcin. Este atributo permite
selecciona ms, pulsando la tecla CTRL junto con la opcin.
NAME. Atributo que especifica el nombre de la lista de seleccin.
SIZE. Atributo que determina el nmero de tems visibles superior a
1. en este caso muestra una barra de desplazamiento lateral.
Ejemplo de cdigo:
35
JavaScript
__________________________________________________________________________________
<SELECT NAME="Hardware" SIZE="3">
<OPTION SELECT> Impresora
<OPTION> Monitor
<OPTION> Scanner
<OPTION> Raton
<OPTION> Plotter
</SELECT>
Figura 1.21 Ejemplo de lista desplegable

rea de Texto <TEXTAREA>
La etiqueta de inicio <TEXTAREA> y de final <TEXTAREA> permite presentar un campo
de texto de mltiples lneas. Presenta los siguientes atributos:
COLS. Determina el nmero de caracteres de ancho de la ventana de texto.
NAME. Nombre del campo
ROWS. Establece el nmero de lneas visibles del rea de texto en caracteres.
WRAP. Establece los saltos de lnea segn los siguientes valores:
o off. No se producen saltos de lnea automticos y el texto es enviado exactamente como
fue escrito.
o virtual. Se usa el salto de lnea automtico para mostrar el texto en pantalla.
o physical. Utiliza saltos de lnea automticos y enva el texto de idntica manera.
Ejemplo:
<TEXTAREA NAME="editorial" ROWS=6 COLS=64>
EDITORIAL Ra-Ma
Ctra. de Canillas, 144
28043 MADRID
</TEXTAREA>
<TEXTAREA NAME="ventanavacia" ROWS=6 COLS=64>
</TEXTAREA>
36
JavaScript
__________________________________________________________________________________
Figura. 1.22. Ejemplo de utilizacin del campo Textarea
37
JavaScript
__________________________________________________________________________________
Introduccin a
JavaScript
Al finalizar la unidad el participante conocer los principios del
lenguaje JavaScript.
Tiempo estimado: 2:30 horas
38
JavaScript
__________________________________________________________________________________
CAPTULO 2
INTRODUCCIN A JAVA SCRIPT
JavaScript es un lenguaje de programacin creado por Netscape con el objetivo de integrarse
en HTML y facilitar la creacin de pginas interactivas sin necesidad de utilizar scripts de CGI o Java.
No hay que confundir Java con JavaScript. Java es un lenguaje completo que permite crear
aplicaciones independientes, mientras que JavaScript es un lenguaje que funciona como extensin del
HTML, que est orientado a objetos, diseado para el desarrollo de aplicaciones cliente-servidor a
travs de Internet.
El cdigo de programa de JavaScript, llamado script, se introduce directamente en el
documento HTML y no necesita se compilado. El navegador se encarga de traducir dicho cdigo.
JavaScript 1.0
JavaScript 1.1
JavaScript 1.2
JavaScript 1.3
Netscape Navigator 2.0 o superior

Microsoft Internet Explorer 3.0
Netscape Navigator 3 o superior
Microsoft Internet Explorer 4
Netscape Communicator 4
Netscape Communicator 4.06 y 4.6
JAVASCRIPT Y HTML
El primer paso es diferenciar dentro de un documento lo que es JavaScript del resto. Para ello
HTML dispone de una etiqueta que define el incio y el final de un cdigo JavaScript. Para definir el
inicio de un programa se debe utilizar la etiqueta <SCRIPT LANGUAGE=JavaScript> y
determinar el final con </SCRIPT>.
El atributo LANGUAGE indica el navegador el lenguaje script utilizado. En el caso que nos
ocupa el nombre a poner debe ser JavaScript. Si se omite la especificacin del lenguaje, el navegador
asume que el script est programado en JavaScript.
Si se desarrolla un programa con las ultimas novedades de JavaScript 1.3 y se ejecuta en el
navegador Netscape 2.0 que solo soporta la primera versin, se produciran errores. As pues,
especificando el npumero de versin utilizada en el script, por ejemplo <SCRIPT
LANGUAGE=JavaScript1.3>, los navegadores anteriores a Netscape 4.06 ignorarn el cdigo y
no se producirn errores.
Ejemplo de cdigo
39
JavaScript
__________________________________________________________________________________
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("primeros pasos con JavaScript");
</SCRIPT>
</BODY>
</HTML>
El texto anterior muestra en pantalla una lnea con el texto Primeros pasos con JavaScript
JavaScript es un lenguaje de programacin Case Sensitive, es decir, que distingue las
maysculas de las minsculas, por lo que tendremos que prestar atencin a la utilizacin de variables y
comandos.
MI NAVEGADOR NO SOPORTA JAVASCRIPT
No todos los navegadores pueden soportar JavaScript. Cuando el usuario utiliza un navegador
que no soporta JavaScript las etiquetas <SCRIPT> y </SCRIPT> son ignoradas y se presenta el
cdigo script en pantalla al entender que se trata de texto. La solucin pasa por englobarel cdigo
JavaScript con la etiqueta HTML encargada de introducir comentarios, de esta manera los navegadores
que no soportan JavaScript interpretarn el cdigo script como un comentario.
El lenguaje HTML dispone tambin de las etiquetas <NOSCRIPT> y </NOSCRIPT>. Entre
ellas se especificar una opcin alternativa para los navegadores que no soportan scripts. Por ejemplo
un texto diciendo Su navegador no soporta JavaScript.
Ejemplo:
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<NOSCRIPT>
Su navegador no soporta JavaScript.
</NOSCRIPT>
</BODY>
</HTML>
PRIMEROS PASOS
Introducir comentarios
40
JavaScript
__________________________________________________________________________________
Para introducir comentarios en JavaScript podemos utilizar dos tcnicas diferentes:
Los comentarios en una sola lnea irn precedidos de //;

Los comentarios de varias lneas irn encerrados en /* y */.
Ejemplo de un fragmento de cdigo en el que se utilizan los sistemas vistos anteriormente:

<SCRIPT>
//Comentario de una sola linea, la siguiente se ejecuta
document.write("Bienvenidos a JavaScript")
//Nuevamente un comentario de una sola linea
//*****************************
//Comentarios, Comentarios
//*****************************
/*Esta es otra forma de introducir comentarios
pero utilizando muchas lineas, incluso cosas como document.write("hola"),
son vistas como comentarios
*/
</SCRIPT>
Corchetes
Los corchetes se utilizan para definir fragmentos de cdigo de manera que stos no se junten
con el resto del programa.
Todo el cdigo que ejecuta una funcin debe ir bien diferenciado del resto mediante corchetes.
Figura 2.1. Ventana creada con la funcin alert

El punto y coma
El punto y coma sirven para separar sentencias que se encuentran en una misma lnea.
Tambin puede indicar el final de una sentencia que ocupa varias lneas.
Ejemplo:
41
JavaScript
__________________________________________________________________________________
<SCRIPT>
var texto="FAQ(Frequently Asked Questions, Documentos de Preguntas Frecuentes)
Documentos recopilatorios para usuarios principiantes, que contienen las preguntas mas
Frecuentes sobre un tema determinado. Son las mejor forma de comenzar a aprender
cosas sobre Internet.";
</SCRIPT>
42
JavaScript
__________________________________________________________________________________
Tratamiento de
variables
Al finalizar la unidad el participante conocer el manejo de
variables en JavaScript.
Tiempo estimado: 1:30 horas
43
JavaScript
__________________________________________________________________________________
CAPITULO 3
TRATAMIENTO DE VARIABLES
Todos los lenguajes de programacin necesitan en algn momento cargar en memoria los datos
que se van a procesar. Las variables son fundamentales.
LAS VARIABLES
JavaScript admite prcticamente cualquier tipo de nombre para definir una variable, no
obstante, hay una serie de consideraciones que se deben tener presentes:
El primer carcter debe ser siempr una letra o el guin de subrayado ( _ ). Los restantes
caracteres pueden ser letras, nmeros o el guin de subrayado, teniendo como precaucin no
dejar espacios entre ellos.
El nombre de la variable no debe coincidir las palabras reservadas de JavaScript.
JavaScript diferencia entre maysculas y minsculas.
Para declarar variables se utiliza la palabra clave var seguida del nombre de la variable. Las
siguientes variables sern reconocidas como tales por JavaScript.
var nombre;
var direccin;
var entrada_valor_concreto;
var variable_numero_12;
Ahora se muestran otra variables que no sern reconocidas por JavaScript al no cumplir
algunas de las reglas de definicin vistas anteriormente.
var 1dato;
var entrada datos;
var while;
var new;
Se recomienda utilizar siempre la misma pauta para definir los nombres de las variables. Se
puede escribir en minsculas, o bien la primera mayscula y las dems minsculas.
Aunque las siguientes variables parezcan iguales, JavaScript las interpretar como diferentes.
44
JavaScript
__________________________________________________________________________________
var resultadosuma
var Resultadosuma
var resultadoSuma
var RESULTADOSUMA
var resultado suma
var resultadosumA
TIPOS DE VARIABLES
JavaScript puede manejar tres tipos de datos distintos decidiendo por nosotros el tipo de
variable que deber emplear durante la ejecucin del script.
Los tres tipos de variables son:
Variables de cadena
Variables numricas
Variables booleanas
Un cuarto tipo podran se los datos Nulos (null). Estos se utilizan para comprobar si a una variable
se le ha asignado un valor o no. Null representa un valor nulo para cualquier tipo de variable; por el
contrario, una variable que no ha sido inicializada tiene un valor undefined.
VARIABLES DE CADENA
Una variable de cadena es aquella que contiene texto. Las cadenas de texto en JavaScript se
delimitan mediante comillas dobles o simples y pueden contener cualquier tipo de carcter. Tambin
pueden tener un valor nulo.
Ejemplo:
var pais=Espaa;
var entrada_codigo;
entrada_codigo=79201957;
var valor= ;
Las comillas simples sern utilizadas dentro de fragmentos de cdigo delimitados por comillas
dobles o viceversa.
Ejemplo:
document.write(Que quiere decir la palabra nuncupatorio )
alert(Pulsa la tecla amigo )
45
JavaScript
__________________________________________________________________________________
Hay una serie de caracteres que permiten representar funciones especiales, como podra ser un
salto de lnea en un texto o, por ejemplo, las comillas. A continuacin se presenta una lista:
\b
\f
\n
\r
\t
\\
\
\
carcter anterior
salto de pgina
salto de lnea
retorno de carro
tabulador
carcter
comilla simple
comilla doble
<HTML>
<HEAD>
<TITLE>Ejemplo de Cadena de texto</TITLE>
<SCRIPT LANGUAJE="JavaScript">
var cadena1="Esto es una cadena de texto que no utiliza ningun caracter especial";
var cadena2="Esto es una cadena \nde texto que si utiliza \ncaracateres especiales";
alert (cadena1);
alert (cadena2);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
VARIABLES NUMRICAS
Las variables numricas son aquellas que contienen nmeros enteros o de coma flotante.
Enteros
46
JavaScript
__________________________________________________________________________________
JavaScript puede utilizar tres bases distintas para nmeros enteros: la decimal (base 10), la
hexadecimal (base 16) y la octal (base 8). Por defecto el sistema es el decimal.
var numero;
numero = 100;
numero = -1000;
Si queremos especificar un nmero en base octal deberemos anteponer un cero 0 al nmero.
Recordemos que los nmeros en base octal solo pueden contener los dgitos del 0 al 7.
var numero_octal;
numero_octal = 03254;
numero_octal = 02;
Para un valor hexadecimal deberemos anteponer al nmero el prefijo 0x. Los nmeros en
hexadecimal incluyen los dgitos del 0 al 9 y las letras comprendidas entre la A y la F ambas inclusive.
var numero_hex;
numero_hex = 0xff;
numero_hex = 0x12f;
Coma flotante
Un valor de coma flotante se compone de un valor entero seguido de un punto y de una
fraccin decimal. El exponente se indica mediante una e o E seguida por un entero positivo o
negativo.
var numero_coma_flotante;
numero_coma_flotante=10.236;
numero_coma_flotante=43.433e+2;
numero_coma_flotante= -56.25;
VARIABLES BOOLEANAS
Las variables booleanas o lgicas se especifican mediante los valores verdadero (true) o falso
(false).
var estoy_contento;
estoy_contento=false;
estoy_contento=true;
La utilizacin de tipos booleanos es de suma importancia cuando se quieren comparar datos o
tomar decisiones.
47
JavaScript
__________________________________________________________________________________
LOCALIZACIN DE LAS VARIABLES

Las variables pueden ser globales y locales segn el lugar en que se hayan definido. Las
primeras pueden usarse en cualquier parte del cdigo, mientras que las segundas slo pueden hacerlo
dentro de la funcin que las define.
Ejemplo:
//Definicion de variable global
var variable1="Esta cadena de texto se ha definido FUERA de una funcion. Es global";
//Definicion de una variable local
function ejemplo()
{
var variable2="Esta cadena de texto se ha definido DENTRO de una funcion. Es local";
document.write(variable2);
}
//Impresion en pantalla de la variable global
document.write(variable1+"<BR>");
//Impresion en pantalla de la variable local
ejemplo()
</SCRIPT>
Si se intenta utilizar una variable local en un mbito global, JavaScript dar un mensaje de error
diciendo que la variable no est definida.
PALABRAS RESERVADAS
abstract
case
const
doubl
final
function
input
long
package
return
switch
throws
var
48
boolean
match
continue
else
finally
goto
in
native
private
short
synchronized
transient
val
break
char
default
extend
float
int
instanceof
new
protected
static
this
true
while
byte
class
do
false
for
implements
interface
null
public
super
throw
try
with
JavaScript
__________________________________________________________________________________
Los operadores
Al finalizar la unidad el participante comprender el uso de los
operadores en JavaScript
49
JavaScript
__________________________________________________________________________________
CAPTULO 4
LOS OPERADORES
Los operadores permiten combinar diferentes valores en una expresin.
TIPOS DE OPERADORES
Los operadores de JavaScript pueden dividirse en varios grupos. Su clasificacin es
meramente funcional y se basa en la operacin que realiza cada operacin. Los grupos son:
Operadores aritmticos
Operadores lgicos
Operadores de comparacin
Operadores condicionales
Operadores bit a bit
Operadores de asignacin
OPERADORES ARITMTICOS
Los operadores aritmticos son los encargados de realizar las operaciones bsicas como sumar,
restar, multiplicar y dividir.
Suma (+)
Resta (-)
Multiplicacin (*)
Divisin (/)
Mdulo (%). Resto de la divisin.
Incremento, Preincremento, Posincremento (++)
Decremento, Predecremento, Posdecremento (--)
Negacin (!)
Ejemplo:
<HTML>
<BODY>
var valor1, valor2, valor3;
var suma, resta, multiplicacion, division, resto_division, varios;
50
JavaScript
__________________________________________________________________________________
valor1=50;
valor2=10;
valor3=20;
suma=valor1+valor2;
resta=valor1-valor2;
multiplicacion=valor1*valor2;
division=valor1/valor2;
resto_division=valor1%valor2
varios=(valor1+valor3)*valor2;
document.write("El resultado de la suma es"+suma+"<BR>");
document.write("El resultado de la resta es"+resta+"<BR>");
document.write("El resultado de la multiplicacion es"+multiplicacion+"<BR>");
document.write("El resultado de la division es"+division+"<BR>");
document.write("El resto de la division es"+resto_division+"<BR>");
document.write("El resultado de la variable varios es"+varios+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Las variables valor1, valor2, valor3 son las encargadas de contener los nmeros con los que se
van a realizar las operaciones aritmticas bsicas. Los resultados de dichas operaciones aritmticas
bsicas. Los resultados de dichas operaciones se guardan en una variable a la que se le ha dado el
mismo nombre que el operador utilizado. As pues, la variable que contiene el resultado de sumar dos
nmeros se llama suma, y el resultado de la sustraccin se almacena en resta y as sucesivamente.
Otro tipo de operadores aritmticos son los incrementales o decrementales, que se aplican antes
o despus del operando.
variable++ //Devuelve el valor de variable y despus incrementa su valor en uno.
++variable //Aumenta el valor de variable en uno y despus devuelve su valor.
variable -- //Devuelve en valor de variable y despus disminuye su valor en uno.
-- variable //Disminuye el valor de variable en uno y despus devuelve su valor.
Veamos la eficacia de este tipo de operadores:
pesos=pesos+1; //Aumenta el valor de pesos en 1
pesos++ //Aumenta el valor de pesos en 1
//El ltimo operador aritmtico es la negacin.
numero+=100
numero= -numero
OPERADORES LGICOS
51
JavaScript
__________________________________________________________________________________
Los operadores lgicos o booleanos se emplean para que un programa tome una decisin en
funcin de un clculo lgico. Los valores que se obtienen son true o false.
Los operadores son los siguientes:
&& Suma lgica (Y o And). Este operador devuelve un valor true cuando las dos condiciones
comparadas se cumplen. En el supuesto de que una de ellas sea false, el resultado ser siempre
false.
|| Producto lgico (O u Or). Este operador devuelve true siempre que una de las dos
condiciones sea verdadera. En caso contrario devuelve false.
! Negacin (No o Not). Este operador devuelve siempre el valor contrario, es decir, si la
condicin o variable es true devuelve false y viceversa.
La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

continuacin ver un resumen con todos los operadores lgicos.
true && true devuelve true

true && false devuelve false
false && false devuelve false
true || true
true || false
false || false
devuelve true
devuelve true
devuelve false
OPERADORES DE COMPARACIN
Los operadores de comparacin son similares a los lgicos, solo que estos no tiene porque ser
booleanos. Son los clsicos mayor que, menor que.
Operadores disponibles:
52
== Devuelve true si los dos operandos son iguales.

!= Devuelve true si los dos operandos son diferentes.
> Devuelve true si el operando de la izquierda es mayor que el de la derecha
< Devuelve true si el operando de la izquierda es menor que el de la derecha.
>= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.
<= Devuelve true si el operando de la izquierda es menor o igual que el de la derecha.
===
!==
JavaScript
__________________________________________________________________________________
OPERADORES CONDICIONALES
Un operador condicional devuelve un valor determinado en funcin del resultado obtenido al
evaluar una condicin.
(condicin)? valor1 : valor2
Si la condicin es verdadera se devuelve valor1 (verdadero). En caso contrario valor2 (falso).
Ejemplo:
(nombre==Juan) ? Me llamo Juan:Tu no eres Juan;
Si la variable nombre es Juan, el resultado Me llamo Juan. En caso contrario el resultado es
Tu no eres Juan.
OPERADORES DE ASIGNACIN
Un operador de asignacin se utiliza para asignar un valor a una variable. Veamos cules son,
y su sintaxis.
+=
-=
*=
/=
%=
valor1 += valor2
valor1 -= valor2
valor1 *= valor2
valor1 /= valor2
valor1 %= valor2
valor1 = valor1 + valor2

valor1 = valor1 valor2
valor1 = valor1 * valor2
valor1 = valor1 / valor2
valor1 = valor1 % valor2
TABLA DE OPERADORES
Se relacionan a continuacin los operadores soportados por JavaScript, as como un pequeo
ejemplo de utilizacin.
Tipo
Aritmticos
Operador
Cdigo ejemplo
Descripcin
+
*
/
%
++
++
valor1 + valor2
valor1 valor2
valor1 * valor2
valor1 / valor2
Valor1 % valor2
++ valor1
valor1 ++
Suma
Resta
Multiplicacin
Divisin
Resto divisin
Preincremento
Posincremento
53
JavaScript
__________________________________________________________________________________
---
-- valor1
valor1 -- valor1
Predecremento
Posdecremento
Negacin
&&
||
!
valor1 && valor2

valor1 || valor2
! valor1
AND lgico
OR lgico
NOT lgico
==
!=
<
<=
>
>=
valor1 == valor2
valor1 != valor2
valor1 < valor2
valor1 <= valor2
valor1 >= valor2
valor1 >= valor2
Igualdad
Distinto de
Menor que
Menor o igual que
Mayor que
Mayor o igual que
&
|
^
>>
<<
>>>
valor1 & valor2

valor1 | valor2
valor1 ^ valor2
valor1 >> valor2
valor1 << valor2
valor1 >>> valor2
AND de bits
OR de bits
XOR de bits
Shift a la derecha
Shift a la izquierda
Shift sin signo
?:
(condicin)?
valor1 : valor2
Condicional
+=
-=
*=
/=
%=
valor1 += valor2
valor1 -= valor2
valor1 *= valor2
valor1 /= valor2
valor1 %= valor2
valor1=valor1+valor2
valor1=valor1-valor2
valor1=valor1*valor2
valor1=valor1/valor2
valor1=valor1%valor2
Lgicos
Comparacin
Bit a bit
Condicionales
Asignacin
EL OPERADOR typeof
El operador typeof devuelve una cadena que describe el tipo de operando. As pues, podremos
saber si el operando es una cadena, una variable, mtodo, etc. Su funcionamiento es sencillo, basta
con escribir a continuacin de typeof la variable o elemento.
var variable=Pepe;
var numero=1;
var fecha=new Date();
document.write(typeof variable + <BR>);
document.write(typeof numero + <BR>);
document.write(typeof fecha + <BR>);
54
JavaScript
__________________________________________________________________________________
</SCRIPT>
El resultado es:
variable = string
numero = number
fecha = object
55
JavaScript
__________________________________________________________________________________
Los operadores
operadores en JavaScript
56
JavaScript
__________________________________________________________________________________
CAPTULO 4
LOS OPERADORES
Los operadores permiten combinar diferentes valores en una expresin.
TIPOS DE OPERADORES
Los operadores de JavaScript pueden dividirse en varios grupos. Su clasificacin es
meramente funcional y se basa en la operacin que realiza cada operacin. Los grupos son:
Operadores aritmticos
Operadores lgicos
Operadores de comparacin
Operadores condicionales
Operadores bit a bit
Operadores de asignacin
OPERADORES ARITMTICOS
Los operadores aritmticos son los encargados de realizar las operaciones bsicas como sumar,
restar, multiplicar y dividir.
Suma (+)
Resta (-)
Multiplicacin (*)
Divisin (/)
Mdulo (%). Resto de la divisin.
Incremento, Preincremento, Posincremento (++)
Decremento, Predecremento, Posdecremento (--)
Negacin (!)
Ejemplo:
<HTML>
<BODY>
var valor1, valor2, valor3;
var suma, resta, multiplicacion, division, resto_division, varios;
57
JavaScript
__________________________________________________________________________________
valor1=50;
valor2=10;
valor3=20;
suma=valor1+valor2;
resta=valor1-valor2;
multiplicacion=valor1*valor2;
division=valor1/valor2;
resto_division=valor1%valor2
varios=(valor1+valor3)*valor2;
document.write("El resultado de la suma es"+suma+"<BR>");
document.write("El resultado de la resta es"+resta+"<BR>");
document.write("El resultado de la multiplicacion es"+multiplicacion+"<BR>");
document.write("El resultado de la division es"+division+"<BR>");
document.write("El resto de la division es"+resto_division+"<BR>");
document.write("El resultado de la variable varios es"+varios+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Las variables valor1, valor2, valor3 son las encargadas de contener los nmeros con los que se
van a realizar las operaciones aritmticas bsicas. Los resultados de dichas operaciones aritmticas
bsicas. Los resultados de dichas operaciones se guardan en una variable a la que se le ha dado el
mismo nombre que el operador utilizado. As pues, la variable que contiene el resultado de sumar dos
nmeros se llama suma, y el resultado de la sustraccin se almacena en resta y as sucesivamente.
Otro tipo de operadores aritmticos son los incrementales o decrementales, que se aplican antes
o despus del operando.
variable++ //Devuelve el valor de variable y despus incrementa su valor en uno.
++variable //Aumenta el valor de variable en uno y despus devuelve su valor.
variable -- //Devuelve en valor de variable y despus disminuye su valor en uno.
-- variable //Disminuye el valor de variable en uno y despus devuelve su valor.
Veamos la eficacia de este tipo de operadores:
pesos=pesos+1; //Aumenta el valor de pesos en 1
pesos++ //Aumenta el valor de pesos en 1
//El ltimo operador aritmtico es la negacin.
numero+=100
numero= -numero
OPERADORES LGICOS
58
JavaScript
__________________________________________________________________________________
Los operadores lgicos o booleanos se emplean para que un programa tome una decisin en
funcin de un clculo lgico. Los valores que se obtienen son true o false.
Los operadores son los siguientes:
&& Suma lgica (Y o And). Este operador devuelve un valor true cuando las dos condiciones
comparadas se cumplen. En el supuesto de que una de ellas sea false, el resultado ser siempre
false.
|| Producto lgico (O u Or). Este operador devuelve true siempre que una de las dos
condiciones sea verdadera. En caso contrario devuelve false.
! Negacin (No o Not). Este operador devuelve siempre el valor contrario, es decir, si la
condicin o variable es true devuelve false y viceversa.
La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

continuacin ver un resumen con todos los operadores lgicos.
true && true devuelve true

true && false devuelve false
false && false devuelve false
true || true
true || false
false || false
devuelve true
devuelve true
devuelve false
OPERADORES DE COMPARACIN
Los operadores de comparacin son similares a los lgicos, solo que estos no tiene porque ser
booleanos. Son los clsicos mayor que, menor que.
Operadores disponibles:
== Devuelve true si los dos operandos son iguales.

!= Devuelve true si los dos operandos son diferentes.
> Devuelve true si el operando de la izquierda es mayor que el de la derecha
< Devuelve true si el operando de la izquierda es menor que el de la derecha.
>= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.
<= Devuelve true si el operando de la izquierda es menor o igual que el de la derecha.
===
!==
59
JavaScript
__________________________________________________________________________________
OPERADORES CONDICIONALES
Un operador condicional devuelve un valor determinado en funcin del resultado obtenido al
evaluar una condicin.
(condicin)? valor1 : valor2
Si la condicin es verdadera se devuelve valor1 (verdadero). En caso contrario valor2 (falso).
Ejemplo:
(nombre==Juan) ? Me llamo Juan:Tu no eres Juan;
Si la variable nombre es Juan, el resultado Me llamo Juan. En caso contrario el resultado es
Tu no eres Juan.
OPERADORES DE ASIGNACIN
Un operador de asignacin se utiliza para asignar un valor a una variable. Veamos cules son,
y su sintaxis.
+=
-=
*=
/=
%=
valor1 += valor2
valor1 -= valor2
valor1 *= valor2
valor1 /= valor2
valor1 %= valor2
valor1 = valor1 + valor2

valor1 = valor1 valor2
valor1 = valor1 * valor2
valor1 = valor1 / valor2
valor1 = valor1 % valor2
TABLA DE OPERADORES
Se relacionan a continuacin los operadores soportados por JavaScript, as como un pequeo
ejemplo de utilizacin.
Tipo
Aritmticos
60
Operador
Cdigo ejemplo
Descripcin
+
*
/
%
++
++
--
valor1 + valor2
valor1 valor2
valor1 * valor2
valor1 / valor2
Valor1 % valor2
++ valor1
valor1 ++
-- valor1
Suma
Resta
Multiplicacin
Divisin
Resto divisin
Preincremento
Posincremento
Predecremento
JavaScript
__________________________________________________________________________________
--
valor1 -- valor1
Posdecremento
Negacin
&&
||
!
valor1 && valor2

valor1 || valor2
! valor1
AND lgico
OR lgico
NOT lgico
==
!=
<
<=
>
>=
valor1 == valor2
valor1 != valor2
valor1 < valor2
valor1 <= valor2
valor1 >= valor2
valor1 >= valor2
Igualdad
Distinto de
Menor que
Menor o igual que
Mayor que
Mayor o igual que
&
|
^
>>
<<
>>>
valor1 & valor2

valor1 | valor2
valor1 ^ valor2
valor1 >> valor2
valor1 << valor2
valor1 >>> valor2
AND de bits
OR de bits
XOR de bits
Shift a la derecha
Shift a la izquierda
Shift sin signo
?:
(condicin)?
valor1 : valor2
Condicional
+=
-=
*=
/=
%=
valor1 += valor2
valor1 -= valor2
valor1 *= valor2
valor1 /= valor2
valor1 %= valor2
valor1=valor1+valor2
valor1=valor1-valor2
valor1=valor1*valor2
valor1=valor1/valor2
valor1=valor1%valor2
Lgicos
Comparacin
Bit a bit
Condicionales
Asignacin
EL OPERADOR typeof
El operador typeof devuelve una cadena que describe el tipo de operando. As pues, podremos
saber si el operando es una cadena, una variable, mtodo, etc. Su funcionamiento es sencillo, basta
con escribir a continuacin de typeof la variable o elemento.
var variable=Pepe;
var numero=1;
var fecha=new Date();
document.write(typeof variable + <BR>);
document.write(typeof numero + <BR>);
document.write(typeof fecha + <BR>);
61
JavaScript
__________________________________________________________________________________
</SCRIPT>
El resultado es:
variable = string
numero = number
fecha = object
62
JavaScript
__________________________________________________________________________________
Objetos,
funciones y
mtodos
objetos, las funciones y los mtodos para realizar pginas
interactivas.
63
JavaScript
__________________________________________________________________________________
CAPTULO 6
OBJETOS, FUNCIONES Y MTODOS
Los objetos, las funciones y los mtodos van a permitir realizar tareas mucho ms impactantes
de las que realmente se han visto hasta ahora.
LOS OBJETOS
Un objeto es una agrupacin de variables denominadas propiedades que realizan operaciones
con las variables propias del mismo, es decir, un conjunto de datos definidos por el usuario junto con
las operaciones que actan sobre ellos. Por ejemplo, las propiedades de un computador, seran su
procesador, el disco duro, memoria, etc., y adems con l podemos jugar, estudiar, dibujar, por
ejemplo.
Propiedades de un objeto
Un objeto en JavaScript tiene una serie de propiedades asociadas a l.
propiedades utilizaremos la notacin punto.
Para acceder a dichas
Objeto.propiedad
Ejemplo: Imaginemos un objeto llamado computadora, con las propiedades marca, cpu y
memoria.
computadora.marca=HP;
computadora.cpu=pentium150;
computadora.memoria=64mb;
LAS FUNCIONES
Las funciones son uno de los pilares en los que se basa JavaScript. Una funcin es un conjunto
de sentencias JavaScript que realizan alguna tarea especfica. Las partes que definen una funcin son:
64
El nombre de la funcin.
La lista de argumentos de la funcin, encerrados entre parntesis y separados por comas(,)
Las sentencias en JavaScript que definen la funcin, encerradas entre llaves({,});
JavaScript
__________________________________________________________________________________
Una funcin puede incluir llamadas a otras funciones definidas en la aplicacin, pero nicamente
de la pgina actual. Una opcin interesante es definir las funciones en el encabezado del
documento de manera que, cuando se inicialice la pgina, las funciones se definan antes de
cualquier accin del usuario.
La sintaxis de definicin de una funcin sera:
function nombreFuncion(parametro1, parametro2){
Instrucciones
}
La definicin de una funcin no implica su ejecucin; sta slo se ejecutar cuando se le
realice la llamada pertinente.
Ejemplo: Se define una funcin llamada saludo que ser posteriormente llamada para mostrar la
cadena de texto especificada.
<HTML>
<HEAD>
<TITLE>Ejemplo de funciones</TITLE>
function saludo()
{
document.write("Hola amigos, esto es un saludo");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAJE=JavaScript>
saludo();
</SCRIPT>
</BODY>
</HTML>
Para que una funcin devuelva el resultado de una serie de operaciones procedentes de la
misma funcin, utilizaremos la instruccin return.
<HTML>
<HEAD>
function mitad(valor)
{
return valor/2;
65
JavaScript
__________________________________________________________________________________
}
</SCRIPT>
</HEAD>
<BODY>
document.write("La mitad de 100 es"+mitad(100));
</SCRIPT>
</BODY>
</HTML>
Argumentos de la funcin
Los argumentos de una funcin permiten que el resultado vare segn el valor indicado de la
misma. Estos pueden ser variables, nmeros u objetos.
En el siguiente script, podr ver el mtodo de definicin de los argumentos de la funcin y
posteriormente, el modo de llamar a cada argumento.
<HTML>
<HEAD>
function Mensaje(Respuesta)
{
if(Respuesta==0) alert("La respuesta es correcta");
if(Respuesta==2) alert("La respuesta es incorrecta. Repasa la leccion 10");
if(Respuesta==1) alert("Vaya disparate. Debes repetir curso");
if(Respuesta>=3) alert("Respuesta fuera de rango");
}
</SCRIPT>
</HEAD>
<BODY>
Mensaje(0);
Mensaje(1);
Mensaje(2);
Mensaje(5);
</SCRIPT>
</BODY>
</HTML>
66
JavaScript
__________________________________________________________________________________
LOS MTODOS
Un mtodo es una funcin asociada a un objeto y particular a los objetos del tipo que las
define. As pues, un mtodo es una accin que ejecutamos sobre los datos de un objeto.
Los mtodos se definen en el mismo sitio que las funciones y de la misma manera,
asocindolas posteriormente a un objeto ya existente.
Sintaxis para definir un mtodo:
Objeto.nombreMetodo=nombreFuncion
Y para hacer llamada a mtodo:
Objeto.nombreMetodo(parametro1,parametro2..)
Creacin de Objetos
JavaScript dispone de una serie de objetos predefinidos, pero tambin podemos crear nuestro
propios objetos segn sea necesario.
Los pasos a seguir para definir un objeto nuevo son dos:
Definir un tipo de objeto a travs de una funcin

Crear una instancia del objeto usando la palabra new.
Para definir un tipo de objeto, deberemos especificar el nombre de la funcin, sus propiedades y
mtodos.
function nombreTipoObjeto(propiedad1,propiedad2,)
{
this.propiedad1=propiedad1
this.propiedad2=propiedad2
}
La palabra reservada this se utiliza para hacer referencia al objeto actual. La usaremos
generalmente cuando pasamos objetos como parmetros a funciones y dentro de stas para acceder a
las propiedades de los objetos.
Ejemplo: Definamos una funcin llamada Computador con tres propiedades: marca, cpu y memoria.
67
JavaScript
__________________________________________________________________________________
function Computadora(marca,cpu,memoria)
{
this.marca=marca;
this.cpu=cpu;
this.memoria=memoria;
}
Crearemos un objeto para ese tipo, al que llamaremos miComputadora, y le asignaremos
valores especficos a sus propiedades.
miComputadora = new Computadora(HP,Pentium150,64MB)
Recuerde que pueden crearse tantas instancias de un tipo como sean necesarias.
miComputadora=new Computadora(HP,Pentium150,64Mb)
miComputadora_Dos=new Computadora(Philips,Pentium200,64Mb)
miComputadora_Tres=new Computadora(Acer,Pentium133,164Mb)
Ahora podemos mostrar en pantalla las propiedades de los objetos definidos.
<HEAD>
<TITLE>Ejemplo de creacion de Objetos</TITLE>
</HEAD>
<BODY>
function Computador(marca,cpu,memoria)
{
this.marca=marca;
this.cpu=cpu;
this.memoria=memoria;
}
miComputador=new Computador("HP","Pentium150","64Mb")
miComputador_Dos=new Computador("Philips","Pentium200","64Mb")
miComputador_Tres=new Computador("Acer","Pentium133","16Mb")
var mensaje;
mensaje="miComputador\nmarca:"+miComputador.marca+"\n"
+"cpu:"+miComputador.cpu+"\n"
+"memoria:"+miComputador.memoria+"\n";
alert(mensaje);
mensaje="miComputador_Dos\nmarca:"+miComputador_Dos.marca+"\n"
+"cpu:"+miComputador_Dos.cpu+"\n"
68
JavaScript
__________________________________________________________________________________
+"memoria:"+miComputador_Dos.memoria+"\n";
alert(mensaje);
mensaje="miComputador_Tres\nmarca:"+miComputador_Tres.marca+"\n"
+"cpu:"+miComputador_Tres.cpu+"\n"
+"memoria:"+miComputador_Tres.memoria+"\n";
alert(mensaje);
</SCRIPT>
</BODY>
</HTML>
69
JavaScript
__________________________________________________________________________________
Objetos y
funciones
predefinidas
objetos y funciones predefinidas es JavaScript para realizar
pginas interactivas.
70
JavaScript
__________________________________________________________________________________
CAPTULO 7
OBJETOS Y FUNCIONES PREDEFINIDAS
EL OBJETO String ( )
El objeto String ofrece distintas formas de manejar cadenas de texto. Siempre que se asigne un
String una variable o propiedad, se crea un objeto de tipo String.
En este caso, al definir una variable con una cadena de texto ya estamos utilizando un objeto
String, es decir, no ser necesaria si declaracin.
var cadenaTexto;
cadenaTexto=Aqu esta la cadena de texto;
Los objetos de tipo String disponen de una serie de mtodos que permiten modificar y devolver
el valor de la cadena de texto.
Los mtodos disponibles para este objeto son:
anchor(nombre) Crea un enlace

big() Mestra la cadena de caracteres con una fuente grande.
blink() La cadena se representa intermitentemente.
bold() Muestra la cadena en negrita.
charAt() Muestra el carcter situado en la posicin n de la cadena.
fixed() Muestra la cadena con una fuente no proporcional.
fontcolor(color) Determina el color de la cadena.
fontsize(n) Muestra la cadena con una tamao n. ste puede oscilar entre 1 y 7.
indexOf(smallSting,start) Facilita la posicin de un fragmento de la cadena a partir de una
posicin determinada.
italics() Muestra la cadena en cursiva.
lastIndexOf() Da como resultado la ltima posicin de un carcter.
link(URL) Convierte la cadena en un vnculo.
small() Muestra la cadena con una fuente pequea.
strike() Muestra la cadena subrayada.
sub() Muestra la cadena en formato subndice.
substring(x,y) Muestra un fragmento de cadena que empieza en posicin x y termina en la
posicin y.
sup() Muestra la cadena en formato superndice.
toLowerCase() Muestra toda la cadena en minsculas.
toUpperCase() Muestra toda la cadena en maysculas.
71
JavaScript
__________________________________________________________________________________
Ejemplo en que se utilizan algunos de estos mtodos:
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto String</TITLE>
</HEAD>
<BODY>
var cadena;
cadena="Bienvenidos al apasionante mundo de JavaScript";
document.write(cadena+"<BR>");
document.write(cadena.bold()+"<BR>");
document.write(cadena.big()+"<BR>");
document.write(cadena.toUpperCase()+"<BR>");
document.write(cadena.small()+"<BR>");
document.write(cadena.italics()+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Figura 7.1. Formatos de texto conseguidas utilizando el objeto String()

Los objetos String() disponen de las propiedades length, que determina el nmero de
caracteres de la cadena, y prototype, que permite aadir nuevas propiedades y mtodos (ms adelante
sern tratadas).
72
JavaScript
__________________________________________________________________________________
EL OBJETO Math ( )
El objeto Math tiene propiedades y mtodos que representan constantes y funciones
matemticas.
Las propiedades de este objeto son las siguientes:
E Constante de Euler o nmero e.

LN2 Logaritmo de 2.
LN10 Logaritmo de 10.
LOG2E Logaritmo de e en base 2.
LOG10E Logaritmo de e en base 10.
PI Nmero PI.
SQRT1_2 Raz cuadrada de 0.5.
SQRT2 Raz cuadrada de 2.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Math( )</TITLE>
</HEAD>
<BODY>
var valorPi;
valorPI=Math.PI;
document.write("La variable Pi tiene como valor:"+valorPI);
</SCRIPT>
</BODY>
</HTML>
A continuacin, relacionaremos los mtodos, que son los elementos que nos permiten realizar
operaciones.
abs(n) Calcula el valor absoluto de n.

acos(n) Calcula el arcocoseno de n.
asin(n) Calcula el arcoseno de n.
atan(n) Calcula el arcotangente de n.
ceil(n) Redondea un nmero hacia el superior.
cos(n) Calcula el coseno de un nmero n.
exp(n) Calcula un exponencial del nmero e.
floor(n) Redondea un nmero hacia el inferior.
log(n) Calcula el logaritmo de un nmero n.
max(x,y) Devuelve x o y, en funcin de cul de los dos es mayor.
73
JavaScript
__________________________________________________________________________________
min(x,y) Devuelve x o y, en funcin de cul de los dos es menor.

pow(x,y) Calcula la potencia de dos nmeros.
random() Genera un nmero entero ms cercano.
round(n) Redondea al nmero entero ms cercano.
sin(n) Calcula el seno de un nmero n.
sqrt(n) Calcula la raz cuadrada de un nmero n.
tan(n) Calcula la tangente de un nmero n.
Es recomendable utilizar la sentencia with cuando se desean realizar varios clculos matemticos
seguidos para no tener que poner Math en cada referencia.
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Math</TITLE>
</HEAD>
<BODY>
var valorPi;
valorPI=Math.PI;
document.write("La varibale Pi tiene como valor."+valorPI+"<BR>");
valorPI=Math.ceil(valorPI);
document.write("La variable Pi redondeada mediante ceil tiene como valor:"+valorPI);
</SCRIPT>
</BODY>
</HTML>
EL OBJETO Date( )
El objeto Date permite trabajar con horas y fechas. JavaScript maneja las fechas en
milisegundos desde 1/1/1970 a las 00:00:00 horas. Por lo que no se puede trabajar con fechas
anteriores.
En la representacin de los meses para valores enteros JavaScript comienza a contar desde 0,
por lo tanto, enero ser el mes 0 y diciembre el mes11. Los das de la semana se cuentan empezando
por 0 para el domingo, 1 el lunes y as sucesivamente.
Para crear una variable de fecha se debe establecer un nombre para la instancia del objeto y su
respectivos parmetros.
Los formatos pueden ser los siguientes:
Crea un objeto con la fecha y hora actual
Fecha=new Date()
Crea un objeto con la fecha y la hora en una variable de cadena
74
JavaScript
__________________________________________________________________________________
Fecha=new Date(month day, year[hours:minutes:seconds])
Crea un objeto con la fecha en valores enteros
Fecha=new Date(year, month, day[,hours,minutes,seconds])
El objeto Date posee muchos mtodos para manejar fechas y horas, as pues, veamos dichos
mtodos:
getDate() Devuelve el da del mes actual.

getDay() Devuelve el da de la semana actual.
getHours() Devuelve la hora actual.
getMinutes() Devuelve los minutos actuales.
getMonth() Devuelve el mes actual.
getSecond() Devuelve los segundos actuales.
getTime() Devuelve la hora actual.
getTimeZoneoffset() Devuelve la diferencia en minutos entre la hora actual y la GTM.
getYear() Devuelve el ao actual.
parse(datestring) Devuelve el tiempo pasado entre las 00:00:00 horas del 1 de enero de 1970
con respecto a la fecha especificada en datestring.
setDate(valor) Establece el da del mes.
setHours(valor) Establece la hora actual.
setMinutes(valor) Establece los minutos actuales.
setMonth(valor) Establece el mes actual.
setSeconds(valor) Establece los segundos actuales.
setTime(valor) Establece el valor del tiempo actual.
setYear(valor) Establece el ao actual.
toGMTString() Devuelve el valor del objeto actual en GMT como una cadena.
toLocateString() Devuelve el valor del objeto actual como una cadena.
UTC() Devuelve el nmero de milisegundos transcurridos desde las 00:00:00 del da 1 de
enero de 1970.
Los mtodos set los utilizaremos para fijar la fecha y la hora, los mtodos get para obtener fechas
y horas, to para obtener dichos valores como cadenas y parse para convertir cadenas que tengan
fechas y horas.
Ejemplo que imprime el da actual de la semana.
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Date</TITLE>
</HEAD>
<BODY>
fecha=new Date;
dia=fecha.getDay();
if(dia==0){
75
JavaScript
__________________________________________________________________________________
document.write("Hoy es Domingo");
}
if(dia==1){
document.write("Hoy es Lunes");
}
if(dia==2){
document.write("Hoy es Martes");
}
if(dia==3){
document.write("Hoy es Miercoles");
}
if(dia==4){
document.write("Hoy es Jueves");
}
if(dia==5){
document.write("Hoy es Viernes");
}
if(dia==6){
document.write("Hoy es Sabado");
}
</SCRIPT>
</BODY>
</HTML>
EL OBJETO Array()
Una tcnica importante de programacin es el uso de los arrays, arreglos o vectores. Una
matriz es un conjunto de datos de un mismo tipo identificados por un ndice.
Desarrollaremos un vector de ejemplo. Primero deberemos definir la matriz, para ello
utilizaremos el objeto Array(). Despus se debern ir incluyendo los elementos de esa matriz, los
cuales estarn identificados mediante un nmero al que llamaremos ndice.
OpenAustralia=new Array();
OpenAustralia[0]=Sergi Bruguera;
OpenAustralia[1]=Alex Corretja;
OpenAustralia[2]=Felix Mantilla;
OpenAustralia[3]=Peter Sampras;
OpenAustralia[4]=Gustavo Kuerten;
Para arreglos mayores hay una propiedad del objeto Array() llamada length, que facilita el
nmero de elementos disponibles en la matriz.
document.write(Tengo+OpenAustralia.length+elementos en mi matriz.);
76
JavaScript
__________________________________________________________________________________
El objeto Array() tambin tiene tres mtodos:
join() Mtodo encargado de agrupar todos los elementos en una cadena de caracteres,
separados por comas.
reverse() Este mtodo invierte el orden de colocacin de los elementos. El primero pasa a ser
el ltimo y viceversa.
sort() Este mtodo devuelve de manera ordenada los elementos de la matriz.
JavaScript no permite eliminar de manera directa elementos de una matriz, sin embargo, se le
puede dar un valor nulo al elemento. Mostraremos distintas sintaxis para eliminar los elementos 3 y 4
de la matriz.
OpenAustralia[3]=;
OpenAustralia[4]=null;
Con esto los elementos tres y cuatro no tendrn contenido.
Ejemplo completo de la matriz OpenAustralia en el que se aplican los mtodos vistos.
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Array</TITLE>
</HEAD>
<BODY>
OpenAustralia=new Array();
OpenAustralia[0]="Sergi Bruguera";
OpenAustralia[1]="Alex Corretja";
OpenAustralia[2]="Feliz Mantilla";
OpenAustralia[3]="Peter Sampras";
OpenAustralia[4]="Gustavo Kuerten";
document.write("Tengo "+OpenAustralia.length+" elementos en mi matriz."+"<BR>");
document.write("Aqui estan relacionados"+"<BR>"+OpenAustralia.join()+"<BR>");
document.write("Ahora al reves"+"<BR>"+OpenAustralia.reverse().join()+"<BR>");
document.write("Ahora ordenados alfabeticamente"+"<BR>"+OpenAustralia.sort().join()+"<BR>");
document.write("Ahora ordenados alfabeticamente y al
reves"+"<BR>"+OpenAustralia.sort().reverse().join()+"<BR>");
</SCRIPT>
</BODY>
</HTML>
77
JavaScript
__________________________________________________________________________________
EL OBJETO Boolean()
El objeto Boolean() se utilize para convertir datos no booleanos en booleanos.
Su sintaxis es la siguiente:
nuevoObjeto=new Boolean(valor)
Las reglas elementales para utilizar este tipo de objeto son las siguientes:
Cuando se crea un objeto sin proporcionar datos, el nuevo objeto toma el valor de false.
Cuando se facilita el valor true o cualquier otro texto entre comillado, el resultado del nuevo
objeto es siempre true.
El nuevo objeto contendr false si se proporciona un valor 0, false sin comillas o una cadena de
texto vaca.
Ejemplo de aplicacin:
<HTML>
<HEAD>
<TITLE>Ejemplo de objeto Boolean()</TITLE>
var objeto1,objeto2,objeto3,objeto4;
objeto1=new Boolean();
objeto2=new Boolean(false);
objeto3=new Boolean(true);
objeto4=new Boolean("texto");
document.write("El valor booleano de objeto 1 es "+ objeto1 +"<BR>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Figura 7.2. Valor de los objetos creados mediante Boolean
78
JavaScript
__________________________________________________________________________________
LA FUNCIN eval()
La funcin eval() toma una cadena que puede contener cualquier expresin de JavaScript. As
pues, su valor podra ser una cadena representando una expresin JavaScript, una sentencia o una
secuencia de sentencias. Esta funcin puede contener variables y propiedades de objetos ya existentes.
Esta funcin es til cuando se trabaja con formularios, ya que los valores introducidos en un
formulario son siempre cadenas o valores numricos.
var numero_x=10
var numero_y=20
document.write(eval(numero_x+numero_y))
LAS FUNCIONES parseInt() Y parseFloat()
Estas dos funciones devuelven un valor numrico a partir de una cadena.
La funcin parseFloat(cadena) convierte una cadena en un nmero real en coma flotante. Si
la funcin encuentra un smbolo diferente a los signos + y -, los dgitos del 0 al 9 o el punto o
exponente (E o e), se devuelve el valor obtenido hasta ah ignorando el resto de los caracteres. Si el
primer carcter no puede ser convertido se devuelve el valor NaN.
La funcin parseInt(cadena,base) convierte una cadena a una base numrica especificada. Si
se encuentra un carcter que no es vlido en la base especificada, se devuelve el valor obtenido hasta
el momento. Si el primer carcter encontrado no es vlido, se devuelve el valor NaN.
El siguiente script muestra la utilizacin de parseInt y parseFloat.
<HTML>
<BODY>
var resultadoParseint, resultadoParsefloat;
var numero_int="1500.230";
var numero_float="+126.256";
resultadoParseint=parseInt(numero_int,10);
resultadoParsefloat=parseFloat(numero_float);
document.write(resultadoParseint+"<BR>");
document.write(resultadoParsefloat);
</SCRIPT>
</BODY>
</HTML>
79
JavaScript
__________________________________________________________________________________
LA FUNCIN escape
La function escape se utilize para obtener el cdigo ASCII de un carcter en el juego de
caracteres ISO Latn 1. Los caracteres alfanumricos como letras y nmeros sern devueltos tal cual,
slo los smbolos obtendrn su correspondiente cdigo ASCII precedido del smbolo %.
Ejemplo:
<HTML>
<BODY>
document.write(escape("abcdefghi")+"<BR>");
document.write(escape("!.$%&/()=?")+"<BR>");
document.write(escape("123456789")+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Figura 7.3. Detalle de los cdigos ASCII obtenidos mediante la utilizacin de la funcin escape. Los
cdigos ASCII de cada carcter van precedidos del smbolo %.
LA FUNCIN unescape
La funcin unescape es opuesta a la anterior. Su misin consiste en representar un carcter a
partir de su cdigo ASCII.
<HTML>
<BODY>
document.write(unescape("abcdefghi")+"<BR>");
document.write(unescape("%21%B7%24%25%26%28%29%3D%3F%BF")+"<BR>");
document.write(unescape("123456789")+"<BR>");
</SCRIPT>
</BODY>
</HTML>
80
JavaScript
__________________________________________________________________________________
Figura 7.4. Resultados obtenidos utilizando la funcin unescape.
Objetos del
navegador
objetos del navegador en JavaScript
81
JavaScript
__________________________________________________________________________________
82
JavaScript
__________________________________________________________________________________
CAPTULO 8
LOS OBJETOS DEL NAVEGADOR
En este captulo, veremos de manera superficial las caractersticas ms relevantes de los
objetos del navegador JavaScript.
Cuando se carga una pgina en un navegador, se crea un nmero de objetos caractersticos del
navegador segn el contenido de dicha pgina. A continuacin veremos los objetos y propiedades que
tiene un documento:
window. Es el objeto de ms alto nivel, contiene las propiedades de la ventana y en el

supuesto de trabajar con frames, un objeto window es generado para cada frame.
location. Contiene las propiedades de la URL activa.
history. Objeto que contiene las propiedades que representan a las URL que el usuario ha
visitado anteriormente. Es una especia de cach.
document. Este objeto contiene todas las propiedades del documento actual, como pueden ser
su color de fondo, enlaces, imgenes, etc.
Los objetos en el navegador se rigen por una jerarqua que refleja la estructura de los
docmentos HTML. Segn esto, el objeto window que es el de ms alto nivel, tendra a un objeto
location como descendiente.
Imaginemos un documento HTML(object document) que contiene un formulario llamado
miformulario. Para hacer referencia al formulario se deber escribir:
document.miformulario
Como norma general para referenciar una propiedad especfica de un objeto para referenciar
una propiedad especfica de un objeto se deber incluir el objeto y todos sus antecesores teniendo en
cuenta que el objeto window no es necesario incluirlo a no se que se est trabajado con frames.
Veamos a continuacin la jerarqua de los objetos de un navegador.
window
o parent, frames, self, top
o history
o location
o document
links
anchor
form
Todos sus elementos
83
JavaScript
__________________________________________________________________________________
EL OBJETO window
El objeto window posee una serie de propiedades que determinan caractersticas bsicas de la
ventana y sus componentes. A continuacin las propiedades mas elementales:
closed. Propiedad que determina si una ventana se ha cerrado.

defaultStatus. Propiedad que contiene el mensaje estndar que aparece en la barra de estado
de windows.
frames. Es una matriz que representa todos los frames de la ventana.
lenght. Esta propiedad contiene el nmero de frames de la ventana.
name. Contiene el nombre de la ventana.
outerHeight. Altura de la totalidad de la ventana.
outerWidth. La anchura de la totalidad de la ventana.
parent. Hace referencia a la ventana con un cdigo <FRAMESET>/
self. Propiedad que hace referencia a la ventana activa.
top. Hace referencia a la ventana superior del navegador.
status. Determina el mensaje que aparece en la barra de estado del navegador.
window. Al igual que self, hace referencia a la ventana activa.
Ejemplo: Disearemos un programa que muestre siempre un texto en la barra de estado y que oculte la
direccin real de un enlace al pasar el cursor del ratn sobre el.
<HTML>
<HEAD>
<TITLE>Ejemplo de objeto window</TITLE>
</HEAD>
<BODY onload="window.defaultStatus='Curso basico de JavaScript';">
<A HREF="http://www.enlace.com/"
onMouseOver="window.status='Estas encima del enlace';return true">
pasa por encima mio.</A>
</BODY>
</HTML>
El objeto window tambin posee una serie de mtodos que permiten ejecutar funciones
especficas con las ventanas, como por ejemplo crear ventanas y cuadros de dilogo.
84
open() y close(). Mtodos que abren y cierran una ventana.

back(). Retrocede a la pgina anterior.
blur(). Quita el foco de la ventana especificada.
captureEvents(). Captura todos los eventos de un determinado tipo.
clearInterval(). Cancela el tiempo de espera establecido mediante setInterval().
close(). Cierra la ventana.
JavaScript
__________________________________________________________________________________
alert(). Mtodo que muestra una ventana de dilogo con un mensaje y el botn Aceptar.
confirm(). Mtodo similar al anterior, pero mostrando dos botones, Aceptar y Cancelar.
find(). Abre una ventana de dilogo que permite efectuar bsquedas.
prompt(). Mtodo que representa una ventana de dilogo con mensaje y un campo de entrada.
setTimeout. Este mtodo retrasa la ejecucin de una instruccin.
clearTimeout. Mtodo que permite anular el timeout fijado con el mtodo anterior.
Tambin podemos determinar el aspecto que tendra la nueva ventana del navegador mediante una
serie de componentes que permiten configurar el men, la barra de herramientas, la barra de estado,
etc. Las opciones son:
toolbar. Muestra la barra de herramientas.

location. Muestra la barra de direccin.
directories. Muestra los botones de directorio.
status. Muestra la barra de estado.
menubar. Muestra la barra de mens.
scrollbars. Muestra las barras de desplazamiento.
resizable. Permite ajustar el tamao de la ventana.
width. Ancho de la ventana en pixeles.
height. Altura de la ventana en pixeles.
Para abrir una ventana utilizando los mtodos y opciones anteriores, deberemos aplicar la siguiente
sintaxis:
variableVentana=
nombreventana.open(URL,NombreVentana,OpcionesVentana)
Script que abre una ventana nueva cuando se pulsa un botn.
<HTML>
<HEAD>
<TITLE>Ejemplo de ABRIR y CERRAR una ventana</TITLE>
function AbrirVentana()
{
Ventana=open("","nueva","toolbar=no,directories=no,menubar=no,width=180,height=160");
Ventana.document.wrtie("<HEAD><TITLE>Ventana Nueva</TITLE></HEAD><BODY>");
Ventana.document.write("<FONT SIZE=4 COLOR=blue>VENTANA NUEVA</FONT><BR>");
Ventana.document.write("<FORM><INPUT TYPE='button' VALUE = 'Cerrar'onClick='self.close()'> </FORM>");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
85
JavaScript
__________________________________________________________________________________
<INPUT TYPE="button" VALUE="Abrir una ventana"
onClick="AbrirVentana();"><BR>
</FORM>
</BODY>
</HTML>
Figura 8.1. Ventana nueva abierta dentro de la principal

Ejemplo de aplicacin de los mtodos alert(), confirm() y prompt():
<HTML>
<HEAD>
<TITLE>Ejemplo de ABRIR y CERRAR una ventana</TITLE>
function Pregunta(){
var EntradaDatosPregunta=prompt("Intoduce tu nombre, por favor","en minusculas,gracias");
if(confirm("Estas conforme con el nombre introducido"+EntradaDatosPregunta+"?"))
{
alert("De acuerdo, escribiste"+EntradaDatosPregunta);
} else {
alert("Bueno, pero yo creo que escribiste"+EntradaDatosPregunta);
}
}
</SCRIPT>
86
JavaScript
__________________________________________________________________________________
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Pulsa Aqui" onClick="Pregunta()">
</FORM>
</BODY>
</HTML>
Figura 8.2. Ejemplo de mtodos alert(), confirm() y prompt ().
EL OBJETO location
La propiedad location del objeto window contiene informacin sobre el URL completo de un
documento actual a diferencia de la propiedad location del objeto document que se encarga de cargar
un nuevo documento.
Sintaxis:
Window.location.propiedad
87
JavaScript
__________________________________________________________________________________
Propiedades del objeto location.
protocol. Especifica el inicio de la direccin.

hash. Especifica el nombre del enlace en la URL.
host. Determina el nombre del servidor y el puerto.
href. Especifica la direccin completa.
port. Especifica el puerto de comunicaciones.
EL OBJETO document
El objeto document hace referencia a todo el contenido de un documento HTML.
Todas las propiedades de este objeto hacen referencia a determinadas caractersticas de la
pgina, como su color de fondo, su ttulo, etc. A continuacin se relacionan algunas de las ms
utilizadas:
bgColor. Color del fondo.

fgColor. Color del texto.
vlinkColor. Color de los enlaces visitados.
alinkColor. Color del enlace en el momento de la seleccin.
Tambin podemos trabajar con algunos de sus mtodos para controlar el proceso de abrir y cerrar un
documento.
clear(). Borra la pgina del navegador.

close(). Cierra el documento.
write(). Permite escribir en un documento.
EL OBJETO history
Este objeto contiene informacin sobre los enlaces que el usuario ha visitado. Su utilidad ms
aparente es la de generar botones de avance y retroceso.
88
back(). Carga el URL anterior al actual.

forward(). Carga el URL siguiente de la lista.
go(). Muestra un URL de la lista history segn un valor ndice introducido.
JavaScript
__________________________________________________________________________________
Los eventos
eventos en JavaScript
89
JavaScript
__________________________________________________________________________________
CAPTULO 9
LOS EVENTOS DE JAVASCRIPT
Se llama evento a un suceso que ocurre en el sistema cuando un usuario ejecuta algn tipo de
accin. Un evento debe asociarse a un elemento HTML, no a un cdigo JavaScript.
Script que utiliza el evento onClick:
<HTML>
<HEAD><TITLE>Ejemplo de evento</TITLE>
</HEAD>
<BODY>
<FORM><INPUT
TYPE="button"
VALUE="Pulsa"
boton');"></FORM>
</BODY>
</HTML>
onClick="alert('Has
Figura 9.1. Utilizacin de un evento onClick

EL EVENTO onClick
90
pulsado
el
JavaScript
__________________________________________________________________________________
Este evento se produce cuando el usuario efecta un clic con el botn izquierdo del ratn sobre
algn elemento de un formulario o un enlace.
La sintaxis bsica de este evento es la siguiente:
<INPUT TYPE="tipo de elemento" onClick=function>
El tipo de elemento puede ser un botn, una caja de comprobacin o un botn de reset por
ejemplo, mientras que la funcin es la instruccin o instrucciones a procesar cuando se produzca el
evento.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onClick</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Pulsa este boton" onClick="alert('Ok boton pulsado');">
</FORM>
</BODY>
</HTML>
LOS EVENTOS onMouseOver Y onMouseOut
El evento onMouseOver sucede cada vez que el cursor del ratn para por encima de un
elemento de la pgina, mientras que el evento onMouseOut sucede cuando se deja de seleccionar este
elemento.
La sintaxis para los respectivos eventos es la siguiente:
<A HREF="URL" onMouseOver="funcion">Enlace</A>
<A HREF="URL" onMouseOut="funcion">Enlace</A>
En el siguiente ejemplo vemos cmo actan estos dos eventos:

91
JavaScript
__________________________________________________________________________________
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onMouseOver y onMouseOut</TITLE>
</HEAD>
<BODY>
<A HREF="enlace" onMouseOver="alert('Has pasado por encima del
enlace');">Pasa por encima mio.</A>
<BR><BR><BR><BR><BR><BR>
<A HREF="enlace"onMouseOut="alert('Estas alejandote del enlace');">Acercate y luego
vete poco a poco.</A>
</BODY>
</HTML>
LOS EVENTOS onLoad Y onUnLoad

El evento onLoad es aquel que se produce cuando un navegador carga un documento HTML o
una imagen. Este evento se utilizar dentro de la etiqueta <BODY> del documento HTML o dentro
de la etiqueta <FRAMESET> en el supuesto de estar trabajando con frames.
Su sintaxis para cada una de las opciones ser la siguiente:
<BODY onLoad=script a ejecutar>
<FRAMESET onLoad=script a ejecutar>
OnUnLoad es el evento opuesto a onLoad. Su misin consiste en ejecutar un script cuando la
pgina web actual se descarga, ya sea porque se accede a otro web o bien porque se utilizan los
botones de avanzar y retroceder.
La sintaxis es:
<BODY onUnLoad=script a ejecutar>
<FRAMESET onUnLoad=script a ejecutar>
A continuacin un script que muestra un mensaje al cargar un documento HTML y otro al
abandoner dicho documento:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onLoad</TITLE>
</HEAD>
<BODY onLoad="alert('Acabas de entrar en el web mas interesante de la RED');
92
JavaScript
__________________________________________________________________________________
onUnLoad="alert('Gracias por tu visita. Saludos');">
<CENTER><H1>BIENVENIDOS A MI WEB</H1></CENTER>
</BODY>
</HTML>
EL EVENTO onChange
El evento onChange se produce cuando se modifica el valor de un elemento select, text o
textarea en un formulario HTML.
Para que el evento funcione, el usuario tiene que cambiar de elemento en el formulario, es
decir, si estamos introduciendo datos en una casilla de texto, el evento onChange no se activar hasta
que no pasemos a otra casilla.
La sintaxis es la siguiente:
<INPUT TYPE=tipo de elementoonChange=function>
Sin duda es una interesante opcin para validar la entrada de datos en los formularios.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onChange</TITLE>
</HEAD>
<BODY>
<FORM>
<CENTER><P>Mi nombre es:
<INPUT TYPE="text"NAME="apellido"onChange="alert('Esta casilla
a cambiado su contenido')"><BR>
<P>Mis apellidos son:
<INPUT TYPE="text"NAME="apellido"onChange="alert('Y ahora esta otra')"><BR>
</FORM>
</BODY>
</HTML>
EL EVENTO onSubmit
93
JavaScript
__________________________________________________________________________________
Este evento se encarga de ejecutar un determinado cdigo de JavaScript al realizarse el envo
de un formulario.
El ejemplo ms claro de utilizacin de este evento es evitar que un formulario sea enviado si
determinadas condiciones no son cumplidas.
Ejemplo: Vamos a disear un formulario que verifique que se ha introducido un nmero entre uno y
cien antes de proceder a enviar los datos del formulario. Si la condicin no se cumple, aparecer un
mensaje de aviso y se cancelar el envo.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onSubmit</TITLE>
function verificarDato()
{
var valor=document.miformulario,numero.value;
if(valor>0 && valor<100)
{
return(true);
} else {
alert("ATENCION. El valor introducido no es correcto");
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miformulario"METHOD="post"
ACTION="mailto:correo@server.com" onSubmit="verificarDato()">
<P>Introduzca un numero comprendido entre 1 y 100
<INPUT TYPE="text"NAME="numero"><BR>
<INPUT TYPE="submit" VALUE="Pulsa aqui">
</FORM>
</BODY>
</HTML>
LOS EVENTOS onFocus Y onBlur
El evento onFocus detecta la entrada (focus) en un elemento de un formulario, por ejemplo un
text, textarea o window; mientras que onBlur acta de manera contrara, es decir, detecta la prdida
del focus.
La sintaxis es la siguiente:
94
JavaScript
__________________________________________________________________________________
<INPUT TYPE=tipo de entradaonFocus=funcion>
<INPUT TYPE=tipo de entradaonBlur=funcion>
Por ejemplo, podemos mostrar un mensaje cuando el usuario salga de algn elemento de un
formulario.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onFocus</TITLE>
</HEAD>
<BODY>
<FORM>
<P>Nombre:<INPUT TYPE="text"NAME="nombre"><BR>
<P>Apellidos:<INPUT TYPE="text"NAME="apellido"><BR>
<P>Queja:<TEXTAREA
NAME="queja"
onBlur="alert('Gracias
opinion.\nSaludos');"></TEXTAREA>
</FORM>
</BODY>
</HTML>
por
expresar
su
La utilizacin del evento onFocus puede provocar un bucle infinito que bloquee La
computadora. Veamos el siguiente fragmento de script:
<P>Queja:<TEXTAREA
NAME="queja"
opinion.\nSaludos');><TEXTAREA>
onFocus="alert('Gracias
por
expresar
su
EL EVENTO onSelect
Este evento hace que se ejecute un script cuando se selecciona texto dentro de un elemento de
un formulario, ya sea una casilla de texto o de rea de texto.
Sintaxis:
<INPUT TYPE="tipo de elemento" onSelect="funcion">
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onSelect</TITLE>
</HEAD>
95
JavaScript
__________________________________________________________________________________
<BODY>
<FORM>
<TEXTAREA ROWS=3 COLS=40 onSelect="alert('Se ha seleccionado texto\nen el formulario');">
Aqui hay un poco de texto para efectuar la prueba. Seleccione con el cursor un
fragmento.</TEXTAREA>
</FORM>
</BODY>
</HTML>
EL EVENTO onAbort
El evento onAbort se produce cuando se bloquea la carda de una imagen, pulsando por
ejemplo el botn STOP.
Sintaxis:
<IMG SRC="imagen" onAbort="funcion">
En el siguiente script de ejemplo, si el usuario pulsa el botn de STOP, o accede a cualquier
otro enlace, un mensaje de aviso aparecer en la pantalla:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onAbort</TITLE>
</HEAD>
<BODY>
<IMG SRC="F1 3.jpg" onAbort=alert('ATENCION. Falta parte de la fotografia')">
</BODY>
</HTML>
EL EVENTO onReset
El evento onReset se produce cuando se pulsa un botn de Reset en un formulario.
Sintaxis:
<INPUT TYPE="reset"onReset="funcion">
Este evento puede server, para advertir al usuarion antes de efectuar el reset del formulario.
Script:
96
JavaScript
__________________________________________________________________________________
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onReset</TITLE>
function avisoreset(){
if(confirm("!ATENCION!. Los datos del formulario se van a borrar.")){
document.datos.reset()
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER><FORM NAME="datos">
<P>Introduzca sus datos. Gracias.<BR>
Nombre:<INPUT TYPE="text"VALUE="Nombre"><BR>
Apellidos:<INPUT TYPE="text"VALUE="Apellidos"><BR>
Direccion:<INPUT TYPE="text"VALUE="Direccion"><BR>
Provincia:<INPUT TYPE="text"VALUE="Provincia"><BR>
<INPUT TYPE="button" VALUE="Resetar" onClick="avisoreset()">
</FORM>
</CENTER>
</BODY>
</HTML>
97
JavaScript
__________________________________________________________________________________
Figura 9.2. Mensaje de aviso antes de resetear los valores de un formulario.

LOS EVENTOS onkeydown, onkeyup Y onkeypress
Estos eventos se generan cuando el usuario efecta alguita accin con las teclas.
onkeydown. Se ejecuta cuando se pulsa una tecla.

onkeyup. Se ejecuta cuando se deja de pulsar una tecla.
onkeypress. Se ejecuta cuando se mantiene pulsada una tecla.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onkeydown</TITLE>
function avisoPulsacion(){
alert("Has pulsado una tecla");
}
</SCRIPT>
</HEAD>
98
JavaScript
__________________________________________________________________________________
<BODY>
<CENTER><FORM NAME="datos">
<P>Escribe un caracter dentro de la casilla de texto<BR>
<INPUT TYPE="text" VALUE="Escribe aqui dentro" SIZE="40" onkeydown="avisoPulsacion()">
</FORM>
</CENTER></BODY>
</HTML>
LOS EVENTOS onmousedown, onmousemove Y onmouseup
Estos eventos permiten declarar el uso del ratn:
onmousedown. Evento que se genera cuando el usuario pulsa un botn del ratn.
onmousemove. Evento que se genera cuando el usuario mueve el cursor del ratn.
onmouseup. Evento que se genera cuando se deja de pulsar un botn del ratn.
Estos eventos pertenecen a los objetos Button, document y Link.

LOS EVENTOS onmove Y onresize.
El evento onmove se genera cuando el usuario mueve una ventana o frame de la pantalla
principal del navegador.
Cuando un usuario modifica el tamao de la ventana o del frame actual, se genera un evento
onresize.
Estos eventos estn incorporados en los objetos window y frame.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onmove y onresize</TITLE>
</HEAD>
<BODY onresize="alert('La ventana esta siendo redimensionada');"
onmove="alert('La ventana se esta moviendo');">
</BODY>
</HTML>
El evento onmove solo es compatible con Netscape 4 o superior.
99
JavaScript
__________________________________________________________________________________
Hojas de estilo
10
Al finalizar la unidad el participante comprender el uso de las
hojas de estilo en JavaScript
100
JavaScript
__________________________________________________________________________________
CAPTULO 10
INTRODUCCION A LAS HOJAS DE ESTILO
Las llamadas hojas de estilo en cascada, CSS o Cascading Style Sheets abren un nuevo abanico
de posibilidades para los creadores de pginas web.
Las hojas de estilo permiten generar interesantes efectos de texto, con el consiguiente ahorro de
tiempo a la hora de cargar la pgina.
PRIMEROS PASOS
Una hoja de estilos se define de manera similar a los scripts de JavaScript. La definicin de un
estilo est delimitada por las etiquetas <STYLE> y </STYLE> respectivamente. As pues, la
estructura bsica sera la siguiente:
<HEAD>
<STYLE TYPE="text\css">
<!-Definicion de los estilos
//-->
</STYLE>
</HEAD>
La etiqueta <DIV> y </DIV> se utiliza para definir el estilo de una seccin del documento,
mientras que <SPAN> y </SPAN> se emplear para definir el estilo de un prrafo.
DEFINICIN DE ESTILOS
Estilos de etiqueta
Este mtodo consiste en especificar un estilo para una sola etiqueta HTML. Para emplear este
mtodo, hay que aadir el atributo STYLE a dicha etiqueta.
<B STYLE="color:#0000FF">Este texto esta en color azul.</B>
Este mtodo puede ser aplicado a cualquier etiqueta HTML y nicamente modifica las
propiedades de la etiqueta a la que se aplica.
101
JavaScript
__________________________________________________________________________________
Estilos genricos
Esta otra forma de introducir estilos se caracteriza por definir un conjunto de propiedades de
estilo en la cabecera del documento.
Sintaxis:
etiqueta{propiedad:valor;propiedad:valor;...}
Ejemplo:
<HTML>
<HEAD>
<TITLE>Hojas de estilo en cascada</TITLE>
<STYLE TYPE="text/css">
H1{color:#205596}
A{color:#303030;font-style:italic}
</STYLE>
<HEAD>
<BODY>
<H1>PRIMER EJEMPLO</H1>
<A HREF="enlace">Enlace de texto</A>
</BODY>
</HTML>
Enlaces a una hoja de estilo
Consiste en guardar la hoja de estilos en un archivo diferente al de la pgina, enlazando
posteriormente con l.
El tipo de archivo en que tenemos que guardar nuestra declaracin de hoja de estilo ha de ser
ASCII, con la precaucin de no aadir las etiquetas HTML, HEAD y BODY.
As pues, podramos definir un estilo llamado EstiloPersonal, similar al que se describe a
continuacin:
P.texto{color:#CC0033;text-align:justify;font-weight:bold;
font-size:12pt;font-family:Comic Sans Ms}
P.izquierda{text-align :left}
P.derecha{text-align :right}
Utilizacin de la etiqueta CLASS
102
JavaScript
__________________________________________________________________________________
La etiqueta CLASS, que ms bien se podra considerar como un atributo, se utiliza cuando se
desea que ms de una etiqueta disponga de un mismo estilo o viceversa.
La sintaxis de este mtodo es muy sencilla, ya que slo hay que tener en cuenta que a la hora
de definir el estilo hay que anteponer un punto al nombre que se le vaya a dar a dicho estilo.
Veamos otra forma de definir un estilo. Imaginemos que queremos uno con las siguientes
caractersticas:
texto centrado
color rojo
texto en negrita
tamao de la fuente 12
tipo de fuente Comic Sans Ms
Para crear este estilo, podemos definir todas las propiedades en una etiqueta de texto tal y
como vimos anteriormente, o bien crear un estilo de prrafo personal utilizando la etiqueta <p>.
Para crear un estilo personal, habr que anteponer un punto al nombre del estilo. Despus, para
llamar al estilo se utilizar la etiqueta <P CLASS>.
La etiqueta ID
Esta etiqueta se emplea para definir el estilo de un elemento en particular.
La sintaxis es idntica a la vista anteriormente, con la particularidad de que en vez de poner un
punto antes del nombre del estilo, aqu se pondr el prefijo #.
PROPIEDADES DE LAS HOJAS DE ESTILO
Propiedades de las fuentes
Font-family
Determina la fuente que se va a utilizar o la familia genrica.
{font-family:courier}
Font-style
Convierte el texto en cursiva. Las opciones son Italia, oblique y normal.
{font-style: italic}
Font-variant
Convierte las minsculas en pequeas maysculas. Las opciones son small caps y normal.
103
JavaScript
__________________________________________________________________________________
{font-variant: small-caps}
Font-weight
Indica el grosor de una fuente. Los valores son normal, bold, o un valor numrico.
{font-weight: 700}
{font-weight: bold}
Font-size
Determina el tamao de la fuente. Los valores pueden ser absolutos, relativos o porcentaje.
{font-size: 100%}
{font-size: 20pt}
Font
Determina todas las propiedades anteriores en una sola. Es importante no variar el orden de
declaracin. Font{dont-style font-variant font-weight font-size/line-height font-family}
{font: bold 10pt/20pt Courier}
Propiedades del texto
Word-spacing
Determina el espaciado entre palabras.
{Word-spacing: 4pt}
letter-spacing
Determina el espaciado entre caracteres
{letter-spacing: 1px}
Text-decoration
Muestra el texto con distintos efectos. Pueden ser none, underline, overline, line-through y blink.
{text-decoration: underline}
Vertical-align
Determina la alineacin vertical. Las opciones son sub y super.
{vertical-align: super}
Text-transform
Especifica ms efectos de texto. Las opciones son capitaliza, uppercase, lowercase, none.
{text-transform: uppercase}
Text-align
Establece la alineacin del texto. Las opciones son left, right, center y justify.
104
JavaScript
__________________________________________________________________________________
{text-align: justify}
Text-indent
Permite establecer tabulaciones.
{text-indent: 10px}
Line-height
Determina la longitud de lnea. Las opciones son normal, distancia, porcentaje o un valor numrico.
{line-height: 12pt}
{line-height: 100%}
Propiedades del fondo y del color
Color
Determina el color de un elemento.
{color: red}
{color: #ff00ff}
Background-color
Determina el color del fondo de un elemento.
{background-color: white}
Background-image
Determina la imagen que va a servir de fondo.
{background-image: textura.gif}
Background-attachment
Determina si una imagen de fondo debe moverse a la par que el scroll de la pgina. Los valores
disponibles son scroll y fixed.
{background-attachment: scroll}
Background-position
Determina la posicin de inicio del background, ya sea color o imagen. Los valores disponibles son
[posicin | longitud] {1,2}, [top,center, bottom].[left, center, right].
{background-position: center center}
Background
Permite especificar las propiedades del fondo. Los valores disponibles son transparent, color, URL,
repeat, scroll y position.
{background: transparent fixed center}
Propiedades de las ventanas
105
JavaScript
__________________________________________________________________________________
Margin-top
Margin-right
Margin-bottom
Margin-left
Margin
Determina todos los mrgenes del documento. Los valores pueden ser Distancia, porcentaje y auto.
{margin-top: 25px;}
Padding-top
Permita especificar el espacio superior entre el borde y el contenido de un elemento. Los valores
pueden ser distancia y porcentaje.
{padding-top: 15px}
Padding-right
Permite especificar el espacio superior entre el borde y el contenido de un elemento. Los valores
{padding-right: 30px;}
Padding-bottom
Permite especificar el espacio inferior entre el borde y el contenido de un elemento. Los valores
{padding-bottom: 2in}
Padding-left
Permite especificar el espacio izquierdo entre el borde y el contenido de un elemento. Los valores
{padding-left: 25px}
Padding
Permite especificar el espacio entre el borde y el contenido de un elemento. Los valores pueden ser
distancia y porcentaje.
{padding: 80px}
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Determinan el ancho del borde de un elemento.
Los valores para el ancho son thin, mdium y thick.
{border-bottom-width: mdium}
106
JavaScript
__________________________________________________________________________________
Border-color
Determina el color del borde de un elemento. Se combina con la propiedad siguiente.
{border-color: red; border-style:double}
Border-style
Determina el estilo de un borde. Se combina con la propiedad anterior. Los valores del estilo son
none, dotted, dashed, solid, double, gropve, ridge, inset y outset.
{border-style: dotted; border-color:blue}
Border-top
Border-right
Border-bottom
Border-left
Border
Determina el ancho, el estilo y el color de los bordes de un elemento.
Los valores para el ancho son thin, mdium y thick.
Los valores del estilo son none, dotted, dashed, solid, double, groove, ridge, inset y outset.
{border-top: 10px solid black}
Width
Determina el ancho de un documento
{width: 50%}
Height
Determina la altura del elemento.
{height: 100px}
Float
Permite indicar si una imagen ser flotante o no. Las opciones son none, left, right y both.
{float:left}
Clear
Determina los lados en los que no se podrn situar elementos flotantes. Los valores son none, left,
right y both.
{clear.right}
Propiedades de clasificacin
Display
Modo de mostrar la informacin en un bloque. Los valores son block, inline, list-item y none.
107
JavaScript
__________________________________________________________________________________
{display: none}
White-space
Especificar cmo tratar los espacios en blanco en un elemento.
{white-space: nowrap}
{white-space: pre}
List-style-type
Se utilize para declarer el tipo de bullet de la lista. Los valores posibles son disk, circle, square,
decimal, coger-roman, upper-roman, coger.alpha, upper-alpha, none.
{list-style-type: square}
List-style-image
Se utilize para declarer una imagen como bullet de la lista.
{list-style-image: imagen.jpg}
List-style-position
Permite declarer la posicin de los bullet en la pantalla. Los valores son inside y outside.
{list-style-position: outside}
List-style
Permite configurar todas las propiedades de una lista.
{list-style: circle textura.gif outer}
Propiedades de posicionamiento
Position
Determina la posicin del objeto en la pantalla. Los valores pueden ser absolutos o relativos.
{position: absolute}
Height
Determina la altura de un elemento. Los valores pueden ser distancia y auto.
{height: 50px}
Width
Determina la anchura de un elemento. Los calores pueden ser distancia y auto.
{width: 80px}
Visibility
Determina si un objeto es visible o no. Los valores son visible, hidden y auto.
108
JavaScript
__________________________________________________________________________________
{visibility: hidden}
109

Clase 660 - Libro Introducción A JavaScript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Clase 660 - Libro Introducción A JavaScript

Uploaded by

Copyright:

Available Formats

JavaScript

Francisco J. Arce AnguianoX

Figura 1.1. Observe en la parte superior el ttulo de la pgina web

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

Pginas interactivas con JavaScript

Figura 1.4. Distintos ejemplos de cabeceras y separadores.

Francisco J. Arce AnguianoX

ESTADILLO VISITAS DE INTERNET

Figura 1.5. Resultado de la utilizacin de la etiqueta <PRE>

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

El resultado se puede mostrar en la figura 1.7

Figura 1.7. Distintos enlaces.

Figura 1.8. Ejemplo de utilizacin de listas desordenadas

Francisco J. Arce AnguianoX

1. Introduccin a Dynamic HTML

Francisco J. Arce AnguianoX

Figura 1.10. Ejemplo de alineacin de imgenes.

Figura 1.11. Utilizacin del atributo BORDER trabajando con imgenes

Francisco J. Arce AnguianoX

Imagen a tamao real

Figura 1.12. Utilizacin de los atributos WIDTH y HEIGHT

Francisco J. Arce AnguianoX

Figura 1.13 Tabulacin del contenido de las celdas de una tabla.

Figura 1.14. Ejemplo de utilizacin de la etiqueta <CAPTION>

Francisco J. Arce AnguianoX

Figura 1.15. Alineacin y dimensionado de celdas en una tabla.

Francisco J. Arce AnguianoX

Figura 1.16. Ejemplo de coloreado de celdas

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

Figura 1.17. Ejemplo del campo de entrada checkbox.

Figura 1.19. Casilla caracterstica de password

Francisco J. Arce AnguianoX

Figura 1.20. Ejemplo de radio

Figura 1.21 Ejemplo de lista desplegable

Francisco J. Arce AnguianoX

Figura. 1.22. Ejemplo de utilizacin del campo Textarea

Tiempo estimado: 2:30 horas

Francisco J. Arce AnguianoX

Netscape Navigator 2.0 o superior

Francisco J. Arce AnguianoX

Los comentarios en una sola lnea irn precedidos de //;

Ejemplo de un fragmento de cdigo en el que se utilizan los sistemas vistos anteriormente:

Figura 2.1. Ventana creada con la funcin alert

Francisco J. Arce AnguianoX

Tiempo estimado: 1:30 horas

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

LOCALIZACIN DE LAS VARIABLES

Francisco J. Arce AnguianoX

Francisco J. Arce AnguianoX

La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

true && true devuelve true

== Devuelve true si los dos operandos son iguales.

Francisco J. Arce AnguianoX

valor1 = valor1 + valor2

valor1 && valor2

valor1 & valor2

Francisco J. Arce AnguianoX