Académique Documents
Professionnel Documents
Culture Documents
__________________________________________________________________________________
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>.
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>
http://www.pacoarce.com
JavaScript
__________________________________________________________________________________
Para finalizar, tenemos la etiqueta que permite incluir comentarios dentro de nuestro cdigo
fuente, <!-- comentarios -->. Es recomendable usarlo en documentos extensos o complejos, ya que
permite introducir anotaciones para revisiones posteriores del cdigo.
<!-- Esto es un comentario -->
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>
<!-- El color de fondo es gris, el texto negro, los enlaces aparecern en azul,
los visitados en violeta y rojos cuando se activen.-->
<BODY BGCOLOR="Gray" TEXT="Black" LINK="Blue" VLINK="Fuchsia" ALINK="Red">
</BODY>
</HTML>
<HTML>
<HEAD>
http://www.pacoarce.com
JavaScript
__________________________________________________________________________________
<TITLE>Ejemplo 2 de aplicacin de la etiqueta BODY</TITLE>
</HEAD>
<!-- El fondo del documento es la imagen fondo1.gif y los colores del texto idnticos a los
del ejemplo anterior, pero indicados en formato hexadecimal.-->
<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
JavaScript
__________________________________________________________________________________
<!-- Distintos tipos de cabeceras -->
<H1>Texto con Nivel 1</H1>
<H2>Texto con Nivel 2</H2>
<H3>Texto con Nivel 3</H3>
<H4>Texto con Nivel 4</H4>
<H5>Texto con Nivel 5</H5>
<H6>Texto con Nivel 6</H6>
<!-- Distintos tipos de separadores -->
<HR><!--Separador estndar -->
<HR SIZE=10><!-- Separador con un grosor de 5 pxeles -->
<HR WIDTH=70><!-- Separador de 70 pxeles de largo-->
<HR WIDTH=75%><!-- Separador que ocupa el 75% de la pantalla -->
<HR WIDTH=50% ALIGN=LEFT><!-- Separador alineado a la izquierda.-->
<HR NOSHADE><!-- Separador sin sombra-->
</BODY>
</HTML>
El resultado puede observarse en la figura 1.4.
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>
Visitas
1.250
1.750
850
Acumulado
0
1.250
3.000
Total
1.250
3.000
3.850
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
http://www.pacoarce.com
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:
<!-- Esta lnea debe situarse al comienzo del cuerpo del documento -->
<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
http://www.pacoarce.com
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
__________________________________________________________________________________
http://www.pacoarce.com
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
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
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.
http://www.pacoarce.com
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>
19
JavaScript
__________________________________________________________________________________
<IMG SRC="back.gif" BORDER=6><BR>
</BODY>
</HTML>
20
JavaScript
__________________________________________________________________________________
Imagen redimensionada
http://www.pacoarce.com
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>
http://www.pacoarce.com
23
JavaScript
__________________________________________________________________________________
Observe la figura 1.13
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>
http://www.pacoarce.com
25
JavaScript
__________________________________________________________________________________
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>
http://www.pacoarce.com
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:
http://www.pacoarce.com
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">
<FRAME NAME="Frame 2"SRC="ejemplo.html">
<FRAME NAME="Frame 3"SRC="ejemplo.html">
<FRAME NAME="Frame 4"SRC="ejemplo.html">
<FRAME NAME="Frame 5"SRC="ejemplo.html">
</FRAMESET>
<FRAMESET COLS="50%,*">
<FRAME NAME="Frame 6"SRC="ejemplo.html">
<FRAME NAME="Frame 7"SRC="ejemplo.html">
</FRAMESET>
<FRAMESET COLS="33%,33%,*">
<FRAME NAME="Frame 8"SRC="ejemplo.html">
<FRAME NAME="Frame 9"SRC="ejemplo.html">
<FRAME NAME="Frame 10"SRC="ejemplo.html">
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>
<FRAME NAME="Frame 4"SRC="/ejemplo.htm"SCROLLING="YES">
<FRAME NAME="Frame 5"SRC="/ejemplo.htm"SCROLLING="AUTO">
</FRAMESET>
<FRAMESET ROWS="50%,*">
<FRAME NAME="Frame 6"SRC="/ejemplo.htm"SCROLLING="YES">
<FRAME NAME="Frame 7"SRC="/ejemplo.htm"SCROLLING="AUTO"
NORESIZE>
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME NAME="Frame 8"SRC="/ejemplo.htm"SCROLLING="AUTO">
<FRAME NAME="Frame 9"SRC="/ejemplo.htm"SCROLLING="AUTO">
<FRAME NAME="Frame 10"SRC="/ejemplo.htm"SCROLLING="YES">
</FRAMESET>
<FRAMESET ROWS="50%,*">
<FRAME NAME="Frame 11"SRC="/ejemplo.htm"SCROLLING="YES">
<FRAME NAME="Frame 12"SRC="/ejemplo.htm"SCROLLING="AUTO">
</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>.
http://www.pacoarce.com
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>
http://www.pacoarce.com
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>
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>
35
JavaScript
__________________________________________________________________________________
<SELECT NAME="Hardware" SIZE="3">
<OPTION SELECT> Impresora
<OPTION> Monitor
<OPTION> Scanner
<OPTION> Raton
<OPTION> Plotter
</SELECT>
36
JavaScript
__________________________________________________________________________________
http://www.pacoarce.com
37
JavaScript
__________________________________________________________________________________
Introduccin a
JavaScript
Objetivos de la unidad
Al finalizar la unidad el participante conocer los principios del
lenguaje JavaScript.
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
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
http://www.pacoarce.com
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">
<!--Aqui camuflamos el Script para navegadores antiguos
document.write("Esta de suerte, su navegador soporta JavaScript")
fin del camuflaje-->
</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:
http://www.pacoarce.com
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
Objetivos de la unidad
Al finalizar la unidad el participante conocer el manejo de
variables en JavaScript.
http://www.pacoarce.com
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 )
http://www.pacoarce.com
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.
http://www.pacoarce.com
47
JavaScript
__________________________________________________________________________________
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
Objetivos de la unidad
Al finalizar la unidad el participante comprender el uso de los
operadores en JavaScript
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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
http://www.pacoarce.com
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.
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
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
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
http://www.pacoarce.com
53
JavaScript
__________________________________________________________________________________
---
-- valor1
valor1 -- valor1
Predecremento
Posdecremento
Negacin
&&
||
!
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
&
|
^
>>
<<
>>>
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.
<SCRIPT LANGUAJE="JavaScript">
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
http://www.pacoarce.com
55
JavaScript
__________________________________________________________________________________
Los operadores
Objetivos de la unidad
Al finalizar la unidad el participante comprender el uso de los
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>
<SCRIPT LANGUAJE="JavaScript">
var valor1, valor2, valor3;
var suma, resta, multiplicacion, division, resto_division, varios;
http://www.pacoarce.com
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.
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:
http://www.pacoarce.com
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
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
&&
||
!
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
&
|
^
>>
<<
>>>
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.
<SCRIPT LANGUAJE="JavaScript">
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>);
http://www.pacoarce.com
61
JavaScript
__________________________________________________________________________________
</SCRIPT>
El resultado es:
variable = string
numero = number
fecha = object
62
JavaScript
__________________________________________________________________________________
Objetos,
funciones y
mtodos
Objetivos de la unidad
Al finalizar la unidad el participante comprender el uso de los
objetos, las funciones y los mtodos para realizar pginas
interactivas.
http://www.pacoarce.com
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.
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>
<SCRIPT LANGUAJE="JavaScript">
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>
<TITLE>Ejemplo de funciones</TITLE>
<SCRIPT LANGUAJE="JavaScript">
function mitad(valor)
{
return valor/2;
http://www.pacoarce.com
65
JavaScript
__________________________________________________________________________________
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAJE=JavaScript>
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>
<TITLE>Ejemplo de funciones</TITLE>
<SCRIPT LANGUAJE="JavaScript">
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>
<SCRIPT LANGUAJE=JavaScript>
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:
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.
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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>
http://www.pacoarce.com
69
JavaScript
__________________________________________________________________________________
Objetos y
funciones
predefinidas
Objetivos de la unidad
Al finalizar la unidad el participante comprender el uso de los
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:
http://www.pacoarce.com
71
JavaScript
__________________________________________________________________________________
Ejemplo en que se utilizan algunos de estos mtodos:
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto String</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAJE="JavaScript">
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>
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:
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Math( )</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAJE="JavaScript">
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.
73
JavaScript
__________________________________________________________________________________
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>
<SCRIPT LANGUAJE="JavaScript">
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:
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>
<SCRIPT LANGUAJE="JavaScript">
fecha=new Date;
dia=fecha.getDay();
if(dia==0){
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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>
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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>");
document.write("El valor booleano de objeto 2 es "+ objeto2 +"<BR>");
document.write("El valor booleano de objeto 3 es "+ objeto3 +"<BR>");
document.write("El valor booleano de objeto 4 es "+ objeto4 +"<BR>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
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>
<SCRIPT LANGUAJE="JavaScript">
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>
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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>
<SCRIPT LANGUAJE="JavaScript">
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
__________________________________________________________________________________
Objetos del
navegador
Objetivos de la unidad
Al finalizar la unidad el participante comprender el uso de los
objetos del navegador en JavaScript
http://www.pacoarce.com
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:
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
http://www.pacoarce.com
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:
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
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:
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>
<SCRIPT LANGUAJE="JavaScript">
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>
http://www.pacoarce.com
85
JavaScript
__________________________________________________________________________________
<INPUT TYPE="button" VALUE="Abrir una ventana"
onClick="AbrirVentana();"><BR>
</FORM>
</BODY>
</HTML>
86
JavaScript
__________________________________________________________________________________
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Pulsa Aqui" onClick="Pregunta()">
</FORM>
</BODY>
</HTML>
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
http://www.pacoarce.com
87
JavaScript
__________________________________________________________________________________
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:
Tambin podemos trabajar con algunos de sus mtodos para controlar el proceso de abrir y cerrar 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
JavaScript
__________________________________________________________________________________
Los eventos
Objetivos de la unidad
Al finalizar la unidad el participante comprender el uso de los
eventos en JavaScript
http://www.pacoarce.com
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
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>
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>
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
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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>
http://www.pacoarce.com
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>
<SCRIPT LANGUAJE="JavaScript">
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>
http://www.pacoarce.com
97
JavaScript
__________________________________________________________________________________
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onkeydown</TITLE>
<SCRIPT LANGUAJE="JavaScript">
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.
http://www.pacoarce.com
99
JavaScript
__________________________________________________________________________________
Hojas de estilo
10
Objetivos de la unidad
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.
http://www.pacoarce.com
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.
http://www.pacoarce.com
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
http://www.pacoarce.com
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
pueden ser distancia y porcentaje.
{padding-right: 30px;}
Padding-bottom
Permite especificar el espacio inferior entre el borde y el contenido de un elemento. Los valores
pueden ser distancia y porcentaje.
{padding-bottom: 2in}
Padding-left
Permite especificar el espacio izquierdo entre el borde y el contenido de un elemento. Los valores
pueden ser distancia y porcentaje.
{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.
http://www.pacoarce.com
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}
http://www.pacoarce.com
109