Clase 660 Libro Introduccion A JavaScript PDF

JavaScript
__________________________________________________________________________________
HTML BÁSICO
1
Objetivos de la unidad
Al finalizar la unidad el participante desarrollará sus propias

páginas programadas en HTML.
http://www.pacoarce.com 1
JavaScript
__________________________________________________________________________________
CURSO BÁSICO DE HTML
El lenguaje de HTML se basa en el uso de etiquetas también 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, gráficos, 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 línea <BR>.
Todos los elementos que sean situados entre etiquetas o a partir de la de inicio, serán afectados
ya sea por texto, o más etiquetas.
Las etiquetas que estén mal escritas o que sean desconocidas para el navegador, son ignoradas.
Estructuración de un documento.
Un documento HTML esta definido por una etiqueta de inicio <HTML> y una terminación
</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 información sobre el documento. Todas ellas son opcionales, pero es recomendable el uso de
la etiqueta <TITLE>.
2 Francisco J. Arce AnguianoX

JavaScript
__________________________________________________________________________________
La etiqueta <TITLE> especifica el título del documento. Este generalmente se muestra en la

parte superior del navegador. También es utilizado como identificador en las listas de favoritos o
bookmarks. (Figura 1.1).
<TITLE>Título de mi primera página WEB</TITLE>
Figura 1.1. Observe en la parte superior el título de la página web
Otra etiqueta relacionada con la cabecera de un documento es <META>, usada principalmente

para sustituir el documento actual por otro en un determinado número de segundos o para incluir
elementos informativos como el nombre del autor, fecha de expiración del documento o el programa
con el que hemos diseñado la página (en el supuesto que se haya utilizado un software específico). En
todos los casos, la información se escribe usando pares nombre/valor.
Para el primer supuesto se emplean atributos del tipo HTTP-EQUIV, y para el segundo, del tipo
NAME. En ambos, el valor a especificar se estipula en el campo CONTENT.
<META HTTP-EQUIV=”Refresh” CONTENT=”15; URL=http://www.fut.es/~xxxx/sigui.htm”>

<META HTTP-EQUIV=”Expires” CONTENT=”Caduca en junio de 2010”00:00 GMT>
<META NAME=”Autor” CONTENT=”Miguel de Cervantes”>
<META HTTP-EQUIV=”authoring_tool” CONTENT=”Home Site 2.5”>
Siguiendo la estructura básica de un documento HTML encontramos la etiqueta <BASE>, que

proporciona la dirección base para interpretar los enlaces relativos cuando el documento se lee fuera
de su contexto de trabajo.
También tenemos la etiqueta <LINK> que nos sirve para crear barras de herramientas o menús
interactivos en la ventana del navegador.
JavaScript
__________________________________________________________________________________
Para finalizar, tenemos la etiqueta que permite incluir comentarios dentro de nuestro código
fuente, . Es recomendable usarlo en documentos extensos o complejos, ya que
permite introducir anotaciones para revisiones posteriores del código.

Para identificar el formato en que ha sido desarrollado un código fuente, se utiliza la etiqueta
<!DOCTYPE>, su contenido de esta permite saber que versión 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 página. Las etiquetas de inicio y fin
son <BODY> y </BODY>, y entre ellas se debe situar todo el código restante del documento.
Ejemplo de código 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 excepción del título del documento. -->
<META NAME=”Autor” CONTENT=”Juan Juan Orós”>

<TITLE>Código de ejemplo estructura básica HTML</TITLE>
</HEAD>
<BODY>
<!—A partir de aquí se irán 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
características 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 proporción 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
número es “#000000” corresponde al color negro, “#FF0000” al rojo, “#00FF00” al verde, “#0000FF”
al azul, “#FFFFFF” al blanco, y así muchos más.
Es más fácil 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 podrán añadirse 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 activación.
También existe la opción de usar imágenes para el fondo de los documentos HTML. La
imagen se mostrará debajo del texto y de las imágenes, 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 gráfico”.
Ejemplos de códigos HTML que utilizan los atributos anteriores.
<HTML>
<HEAD>
<TITLE>Ejemplo 1 de aplicación de la etiqueta BODY</TITLE>
</HEAD>

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

<BODY BACKGROUND="fondo1.gif" TEXT="#000000" LINK="#0000FF"

VLINK="#FF3366" ALINK="#FF0000">
</BODY>
</HTML>
ESTRUCTURACIÓN DEL TEXTO
HTML no reconoce más de un espacio en blanco separando cualquier elemento o texto, es

decir, los saltos de línea, tabulaciones y demás separadores. Todos son ignorados por el navegador, y
son convertidos a un único espacio en blanco.
Párrafos y saltos de línea.
La etiqueta <P> que se utiliza para separar párrafos. Para HTML el texto es continuo, por lo
que necesitamos indicar el principio y fin de un párrafo. Las marcas son <P> y </P>, aunque la
utilización de la última es opcional.
Otra etiqueta es <BR>. Esta etiqueta sólo tiene marca inicial y se usa para cambiar de línea.
Ejemplo entre la utilización de ambas etiquetas.
<P>El agua de la fuente,<BR>sobre la piel tosca<BR>y de verdín 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 verdín 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
títulos de estas secciones. La etiqueta para las cabeceras es <HN> y </HN> donde n varía de 1 a 6.
El valor de 1 correspondería con una letra muy grande y el de 6 con una muy pequeña. Al utilizar esta
etiqueta, se genera automáticamente un salto de línea similar al utilizado con la etiqueta <P>.
Ejemplo de su utilización.
<H1>Páginas interactivas con JavaScript 1.2</H1>

<H2>Capítulo 1</H2>
<P>Este libro esta dirigido a aquellos que quieren aprender...
El efecto puede observarse en la figura 1.3
Páginas interactivas con JavaScript

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

<H1>Texto con Nivel 1</H1>


<HR>

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

JavaScript
__________________________________________________________________________________
Existe una etiqueta que permite introducir en HTML texto con formato, es decir, el texto
introducido entre las etiquetas <PRE> y </PRE> será visualizado por el navegador respetando los
espacios, saltos de línea, etc. El atributo WIDTH permite especificar el máximo número de caracteres
por línea.
Ejemplo de un listado
<HTML>
<HEAD>
<TITLE>Listado HTML ejemplo de texto preformateado</TITLE>
</HEAD>
<BODY>
<PRE width=60>
VISITAS DE INTERNET
Mes Visitas Acumulado Total

Enero 1.250 0 1.250
Febrero 1.750 1.250 3.000
Marzo 850 3.000 3.850
</PRE>
</BODY>
</HTML>
ESTADILLO VISITAS DE INTERNET
Mes Visitas Acumulado Total

Enero 1.250 0 1.250
Febrero 1.750 1.250 3.000
Marzo 850 3.000 3.850
Figura 1.5. Resultado de la utilización de la etiqueta <PRE>
Estilos de texto
A continuación veremos los estilos de texto físico y lógicos:
<B> Se utiliza para mostrar un bloque de texto en negrita.

<I> Para poner texto en cursiva
<U> Para subrayar el bloque de texto delimitado.
<TT> El texto tendrá un tamaño menor y los caracteres serán similares a los de una máquina
de escribir (typewriter).
<BLINK> Texto intermitente.
<BIG> Texto grande, el mayor tamaño de fuente.
JavaScript
__________________________________________________________________________________
<SMALL> Texto pequeño, el menor tamaño de fuente.
<SUP> Superíndice.
<SUB> Subíndice.
<ADDRESS> Emplearemos esta etiqueta para mostrar un bloque de texto en cursiva.
Generalmente se utiliza para marcar una dirección o firma.
<BLOCKQUOTE> Etiqueta que define un bloque de texto como una cita de otra fuente.
Se suele representar con una tabulación y en cursiva.
<CITE> Muestra el texto como si fuese una cita.
<CODE> Se utiliza para representar una etiqueta HTML o código de programa.
<EM> Presenta el contenido de un bloque de texto enfatizado.
<STRONG> Texto más enfatizado que el caso anterior. Negrita.
<STRIKE> Texto tachado.
<BIG> Texto grande respecto al tamaño normal.
<SMALL> Texto pequeño respecto al tamaño normal.
<CENTER> Centra el texto en la pantalla.
<DIV></DIV> Cambio de línea similar en tamaño 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 línea)
Ejemplo de código 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"> Párrafo de texto <BR>
marcado con P, centrado<BR>
y con cambios de línea 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> Itálica </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>

JavaScript
__________________________________________________________________________________
El resultado puede observarse en la figura 1.6
Figura 1.6. Apariencia de algunos formatos aplicables al texto de una página HTML.
Fuentes
La etiqueta <FONT> permite controlar casi totalmente el estilo de un bloque de texto.

Podremos establecer el tamaño 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 tamaños del texto van del 1 al 7. El tamaño normal es el 3.
<FONT SIZE=5> Texto en tamaño 5 </FONT>

<FONT SIZE=1> Texto en tamaño 1 </FONT>
También podemos cambiar el tamaño de la fuente tomando como referencia el tamaño normal
de la fuente.
<FONT SIZE= -1> Texto más pequeño </FONT>

<FONT SIZE =+1> Texto más grande </FONT>
<FONT SIZE =+2> Texto mucho más grande </FONT>
Para cambiar el color de un fragmento de texto:
<FONT COLOR=”blue”> Este texto está en azul
JavaScript
__________________________________________________________________________________
<FONT COLOR=”red”> Ahora en rojo </FONT>
También 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 tamaño deberemos utilizar la etiqueta
<BASEFONT>.
<BASEFONT SIZE=5>
Ejemplo de código.
<HTML>
<HEAD> <TITLE> Listado de ejemplo de utilización 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 utilización</FONT>
<BR>
<FONT SIZE=”5” FACE=”Dauphin” COLOR=”Red”> Para terminar <FONT COLOR=”blue”>
un <FONT COLOR=”navy”> más <FONT COLOR=”black”>. Os gusta. </FONT>
</BODY>
</HTML>
ENLACES
Otra función de HTML es el hipertexto, este consiste en poder moverse a través de un

documento o varios, seleccionando zonas de texto o imágenes programadas para tal fin.
Cualquier elemento de un documento HTML puede ser definido como enlace, y una imagen,
párrafo 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

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 página 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 básica 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 página
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 añadiremos la línea del código siguiente:
<A NAME=”iniciodocumento”>
Hemos marcado como inicio un punto en el comienzo del documento. Ahora para el final del
documento, pondremos esta línea:
<A NAME=”final del documento”>
Una vez marcadas las distintas zonas del documento, vamos a situar en el mismo los enlaces
que nos permitirán ir de arriba abajo la página.
En el inicio y final del documento añadiremos las siguientes líneas:

<A HREF=”#finaldocumento”> Pulsa aquí para ir al final de esta pagina </A>
<!—Esta línea 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 páginas, 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 página a la que se quiere acceder.
Vamos a suponer que tenemos dos páginas llamadas principal.html y secundaria.html
JavaScript
__________________________________________________________________________________
Para crear un enlace de la primera a la segunda, deberemos escribir:
<A HREF=”secundaria.html”> Pulsa aquí para acceder a mi otra página </A>
Si el enlace se quisiese conectar con un punto concreto de la página de marcado como

opciones, la estructura del código sería 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/ página principal de un servidor llamado google </A>
<!—Enlace a una dirección de correo -->

<A HREF=”malito:micorreo@miservidor.com”> dirección correo del autor
micorreo@miservidror.com </A>
<!—Enlace activo la figura imagen1.jpg. Al pulsar sobre ella se accede a la dirección 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 código 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 página</U></H3>
<P>Relación de enlaces disponibles<BR>
<A HREF=http://www.google.com/fotos.html>Colección de fotografías</A><BR>
<P>El Tercer Mundo. [No disponible]<BR>
<A HREF=http://www.google.com/musica.html>Todo en música</A><BR>
<A HREF=http://www.google.com/libros.html> Biblioteca de los seres vivos</A><BR>
<P>Fotografía erótica. [No disponible]<BR>
<A HREF=”malito:micorreo@miservidor.com”>micorreo@miservidor.com<A/><BR>
</BODY>
</HTML>

JavaScript
__________________________________________________________________________________
El resultado se puede mostrar en la figura 1.7
Figura 1.7. Distintos enlaces.

LISTAS
Las listas se emplean para presentar de forma ordenada una serie de líneas. Estas pueden ser
ordenadas, desordenadas, de definición, de menú y de directorio. Las últimas no generan resultados
relevantes, por lo que no las trataremos.
Lista desordenada, <UL>

Lista ordenada, <OL>
Lista de definición, <DL>
Destacar que los distintos tipos de listas pueden combinarse entre si.
Listas desordenadas
Las etiquetas que definen este tipo de lista son <UL> y </UL> respectivamente.
Las listas desordenadas se utilizan para relacionar elementos sin orden específico. HTML
coloca un símbolo delante de cada elemento dependiendo del valor especificado en el atributo TYPE.
Este atributo puede tomar el valor de circle (círculo sin relleno), disc (círculo con relleno) y square
(cuadrado). Se este atributo se aplica a la etiqueta <UL>, toda la lista utilizará el símbolo indicado, en
cambio, si se le aplica a la etiqueta <LI>, encargada de señalar los distintos elementos de una lista, el
cambio de símbolo sólo afectara al elemento actual y a los siguientes hasta nueva indicación.
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>
§ Capítulo 1
§ Capítulo 2
§ Capítulo 3
• Apartado 3.1
• Apartado 3.2
§ Capítulo 4
Figura 1.8. Ejemplo de utilización de listas desordenadas

Listas ordenadas
Este tipo de lista se utiliza para relacionar elementos con un orden determinado y precedido de
un número que se incrementa automáticamente. Las etiquetas son <OL> y </OL>.
Recordemos que la etiqueta <LI>, es la encargada de señalar los distintos elementos de una
lista. Las listas ordenadas siempre comienzan por 1 y van aumentando progresivamente, pero estas
características se pueden controlar mediante los atributos TYPE y START.
El atributo TYPE determina el formato de la marca encargada de numerar según la siguiente

relación:
Letras mayúsculas (TYPE=A)
Letras minúsculas (TYPE=a)
Números romanos mayúscula (TYPE=I)
Números romanos mayúscula (TYPE=i)
Números (TYPE=1)
START especifica el número del primer elemento de la lista, para valores distintos a 1
(tomado por efecto). El orden se da siempre en números independientemente del tipo de marca
seleccionada.
Ejemplo de código

JavaScript
__________________________________________________________________________________
<UL TYPE=1><OL>
<LI> Introducción 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> parámetro CLASS
<OL TYPE=i>
<LI> Apéndice A. Referencia HTML 4.0
<LI> Apéndice B. Referencia JavaScript </OL>
1. Introducción a Dynamic HTML

2. Breve recorrido por HTML
3. Breve recorrido por JavaScript
A. Dynamic HTML
B. Hojas de estilo en cascada
a. parámetro CLASS
i. Apéndice A. Referencia
HTML 4.0
ii. Apéndice B. Referencia
Figura 1.9. Ejemplo de listas ordenadas
JavaScript
Listas de definición
Las listas de definición, son apropiadas para glosarios, catálogos, etc.. Los elementos deben ir
englobados entre las etiquetas <DL> y </DL> y están formadas por un primer elemento, al que
podríamos denominar termino o título concretado con la etiqueta <DT>, y un segundo llamad
definición señalado con la etiqueta <DD>.
Ejemplo de código.
<DL>
<DT> HTML
<DD> Hyper Text MarkUp Language
<DT> JavaScript
<DD> Lenguaje orientado a objetos desarrollado para aplicaciones de Internet
</DL>
IMÁGENES
Para incluir imágenes en documentos HTML se emplea la etiqueta <IMG> junto con un
atributo imprescindible: SRC.
JavaScript
__________________________________________________________________________________
Un atributo útil es ALT. Este introduce una descripción de la imagen con la finalidad de que
los usuarios que acceden a la página con un navegador en modo texto puedan hacerse una idea de las
imágenes que contiene.
<IMG SRC=”nombre del archivo de la imagen” ALT=”descripción de la imagen”>
Las imágenes deben estar en formato GIF, JPEG, XBM o PNG (Portable Network Graphics).
Las imágenes GIF ocupan poco espacio, se cargan rápidamente y sólo pueden trabajar con 256
colores. Pueden hacerse fondos transparentes.
El formato JPEG tiene un tamaño aun menor que el GIF y trabaja con color de 24 bits, 16.7
millones de colores.
El formato PNG está poco introducido y sólo los navegadores de última generación lo
soportan. Su tamaño es menor que el GIF y la calidad superior al JPEG.
Alineación de imágenes con texto
El atributo ALIGN permite alinear la imagen respecto al texto en función de los siguientes
valores: left, right, top, texttop, middle, absmiddle, baseline, bottom y absbottom.
Descripción 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 línea.
ALIGN=texttop Alinea la parte superior de la imagen con el texto que mas altura alcanza la
línea.
ALIGN=middle Alinea la línea base del texto con la mitad de la imagen.
ALIGN=absmiddle Alinea el punto medio vertical de la línea 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 Desempeña la misma función que el anterior.
ALIGN= absbottom Alinea el inferior de la imagen con el inferior de la línea.
Ejemplo de código HTML.
<HTML>
<HEAD><TITLE>Código ejemplo de alineación de imágenes</TITLE>
</HEAD>
<BODY>
<IMG SRC="counter.gif" ALIGN="top" ALT="imagen de contador"> Alineación TOP
<BR><BR>

JavaScript
__________________________________________________________________________________
<IMG SRC="counter.gif" ALIGN="middle" ALT="imagen de contador"> Alineación MIDDLE
<BR><BR>
<IMG SRC="counter.gif" ALIGN="bottom" ALT="imagen de contador"> Alineación BOTTOM
<BR><BR>
<IMG SRC="counter.gif" ALIGN="left" ALT="imagen de contador"> Alineación LEFT
<BR><BR><BR>
<IMG SRC="counter.gif" ALIGN="right" ALT="imagen de contador"> Alineación RIGHT
<BR><BR>
</BODY>
</HTML>
Figura 1.10. Ejemplo de alineación de imágenes.
Tamaño y borde de una imagen
Para poner un marco o borde a una imagen se deberá utilizar el atributo BORDER.
<HTML>
<HEAD><TITLE> Ejemplo de bordes en imágenes</TITLE>
</HEAD>
<BODY>
<IMG SRC="back.gif" BORDER=0><BR>
JavaScript
__________________________________________________________________________________
</BODY>
</HTML>
Figura 1.11. Utilización del atributo BORDER trabajando con imágenes
También podemos redefinir el tamaño de una imagen mediante los atributos WIDTH y
HEIGHT (anchura y altura) con los que podemos redimensionar una imagen para adaptarla a nuestras
necesidades.
<HTML>
<HEAD><TITLE> Ejemplo de redimensionado de imagen</TITLE>
</HEAD>
<BODY>
<IMG SRC="tierra.gif" WIDTH=192 HEIGTH=270> Imagen a tamaño real
<IMG SRC="tierra.gif" WIDTH=100 HEIGHT=190> Imagen redimensionada
</BODY>
</HTML>

JavaScript
__________________________________________________________________________________
Imagen a tamaño real Imagen redimensionada
Figura 1.12. Utilización de los atributos WIDTH y HEIGHT
El atributo VSPACE indica el espacio a reservar por encima y por debajo de la imagen.
El atributo HSPACE se refiere al espacio a reservar a derecha e izquierda de la misma. El
valor se especifica en puntos.
Carga rápida de una imagen
El atributo LOWSRC permite cargar rápidamente una imagen de menor resolución

(evidentemente deberá tener menor tamaño) para ir sustituyéndola por la de calidad.
<HTML>
<HEAD><TITLE> Ejemplo de carga de imagen en baja resolución</TITLE>
</HEAD>
<BODY>
<IMG SRC="altacalidad.jpg" BORDER=2 LOWSRC="bajacalidad.jpg" ALT="cara de chica">
</BODY>
</HTML>
IMÁGENES MAPEADAS
Las imágenes mapeadas son aquellas en las que se definen diversas zonas que activan distintos
enlaces cuando son seleccionadas.
Desarrollo de la imagen
Primero se realiza el diseño de la imagen mediante un programa gráfico. Después para definir
las distintas zonas de la imagen necesitamos conocer las coordenadas que delimitan las áreas de la
imagen que deseamos sensibilizar, para ello tomaremos las coordenadas que delimitan. Finalmente,
asignaremos a cada zona su correspondiente enlace.
JavaScript
__________________________________________________________________________________
Programación del código
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 símbolo #.
A continuación, abrimos el mapa mediante la etiqueta <MAPNAME>.
El fragmento de código 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 según los siguientes
valores:
Rect. Usado para delimitar una superficie rectangular por medio de las coordenadas del
vértice superior izquierdo e inferior derecho.
Circle. Delimita una circunferencia mediante la coordenada del centro de la misma y el valor
del radio.
Poly. Polígono definido mediante un conjunto de líneas. Se deben definir las coordenadas de
los distintos vértices de las polilíneas.
Las distintas áreas del mapa debían ser definidas mediante coordenadas, por lo que usaremos el
atributo COORDS, para introducir estas junto con el URL al que se accederá.
El código necesario para nuestro mapa sería similar al siguiente:
<HTML>
<HEAD><TITLE>Código 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">

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 añadido la línea <AREA SHAPE="default"NOHREF> con la finalidad de no establecer

ningún enlace si se selecciona una zona del mapa no definida. También podemos establecer enlace
por defecto para zonas del mapa no definidas mediante <AREA SHAPE="default"HREF”enlace por
defecto”>
TABLAS
Las tablas están divididas en celdas, que pueden contener texto, listas, imágenes, enlaces,
formularios, etc.
Estructuración de una tabla
Las etiquetas <TABLE> y </TABLE> son las encargadas de definir el principio y el final de
una tabla respectivamente.
También 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. También 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 diseñar una tabla de 10 celdas y dos filas para clasificar los números del 0 al 9, el código
sería similar a este:
<HTML>
<HEAD><TITLE>Tabla con los números 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>
JavaScript
__________________________________________________________________________________
Observe la figura 1.13
0 1 2 3 4
5 6 7 8 9
Figura 1.13 Tabulación del contenido de las celdas de una tabla.
La etiqueta <CAPTION> se utiliza para poner un título a la tabla. El título se puede situar
arriba o abajo, con el atributo ALIGN.
Veamos el siguiente listado:
<HTML>
<HEAD><TITLE>Tabla con bordes</TITLE></HEAD>
<BODY>
<TABLE BORDER=5>
<CAPTION ALIGN=bottom>Horas trabajadas de la semana<CAPTION><TR>
<TH>Lunes</TH><TH><CENTER>Martes</CENTER></TH>
<TH>Miércoles</TH><TH>Jueves</TH><TH>Viernes</TH>
<TH>Sábado</TH><TH>Domingo</TH>
</TR>
<TR>
<TD>10</TD><TD>8</TD><TD>8</TD><TD>11</TD><TD>8</TD><TD>3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figura 1.14. Ejemplo de utilización de la etiqueta <CAPTION>
Alineación y dimensión de celdas
Disponemos de los siguientes valores de alineación:

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,
expandiéndose hacia la celda de la derecha o hacia la siguiente fila. COLSPAN indica el número de
celdas contiguas que debe ocupar hacia la derecha, mientras que ROWSPAN indica cuántas 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>
JavaScript
__________________________________________________________________________________
Figura 1.15. Alineación y dimensionado de celdas en una tabla.
Los atributos WIDTH y HEIGHT podemos especificar la anchura y altura respectivamente un

porcentaje de la dimensión de la pantalla o un determinado número de píxeles.
<TABLE WIDTH=50><TABLE>
<TABLE WIDTH=50%><TABLE>
<TABLE HEIGHT=150><TABLE>
Se puede asignar un color de fondo a toda la tabla, a una celda o la combinación de varias. El
atributo a utilizar es BGCOLOR. Para hacer que toda la tabla tenga como color de fondo el verde
(green), el código deberá ser:
<TABLE BORDER BGCOLOR=green>
Para que una determinada celda tenga como color de fondo el verde, el atributo deberá estar en
la etiqueta que define dicha celda:
<TD BGCOLOR=green>Esta celda tiene el fondo verde</TD>
Para combinar distintos colores, utilizaremos el atributo tantas veces como sea necesario; el
color que predomine se puede establecer en la etiqueta <TABLE>.
<HTML>
<HEAD><TITLE>Colores de fondo y dimensiones generales de la tabla</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 BORDER=5 ALIGN="CENTER"
VALIGN="CENTER"BGCOLOR=yellow>
<CAPTION>OTRO EJEMPLO MAS DE TABLAS</CAPTION>
<TR>
<TD>JUAN</TD>
<TD>NIEVES</TD>
<TD BGCOLOR=gray>LYDIA</TD>

JavaScript
__________________________________________________________________________________
</TR>
<TR>
<TD>JOSE</TD>
<TD>Ma. JOSE</TD>
<TD BGCOLOR=gray>DANIEL</TD>
<TD BGCOLOR=gray>DAVID</TD>
</TR>
<TR>
<TD>JAVI</TD>
<TD>ITO</TD>
<TD BGCOLOR=gray>MIRIAM</TD>
<TD BGCOLOR=gray>CARLITOS</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figura 1.16. Ejemplo de coloreado de celdas
Separación entre celdas
Mediante el atributo CELLSPACING podemos variar la separación entre celdas, y con el

atributo CELLPADING la separación entre el borde de la celda y el contenido de la misma. Ambos
deberán ponerse en la etiqueta <TABLE>.
El siguiente código muestra la configuración de una tabla con un grosor de borde de 2

unidades, separación entre celdas de 10 y separación del contenido de las mismas con respecto a los
bordes de 20.
<TABLE BORDER=2 CELLSPACING=10 CELLPADING=20>
REPRODUCCIÓN DE AUDIO
La capacidad de reproducir sonido en una página Web esta determinada por el navegador que
se utilice.
JavaScript
__________________________________________________________________________________
Microsoft y Netscape utilizan etiquetas y atributos no estándares de HTML, consiguiendo que
determinadas funciones multimedia no sean reconocidas por el navegador.
La solución para eliminar la incompatibilidad entre navegadores es añadir la línea de ambos.
Música de fondo con el Microsoft Internet Explorer.
La etiqueta encargada de reproducir un archivo de audio es <BGSOUNG> asociada al atributo

SRC. Los archivos podrán ser del formato *.wav, *.au o *.mid
Un atributo fundamental en esta etiqueta es LOOP, ésta será usada para especificar el número
de veces que se debe ejecutar el archivo de sonido. Puede tener un valor numérico o valor infinite, que
reproducirá el archivo en un bucle cerrado.
El siguiente código de ejemplo reproduce infinitamente el archivo midi llamado música.mid:
<BGSOUND SRC=”musica.mid” LOOP=infinite>
Música 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 clásicas funciones de avance,
retroceso, ejecución 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 código de ejemplo, reproduce automáticamente 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 según 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 mostrarán los elementos

del enlace seleccionado.

JavaScript
__________________________________________________________________________________
Imaginemos que hemos dividido la pantalla en dos partes, una superior e inferior, el código
sería:
<--Código para la parte superior -->

<A HREF=”paginaa.htm TARGET=”arriba”> Pulse aquí para ir a la ventana superior</A>
<--Código 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 código HTML el lugar de la
pantalla en donde serán 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 básica
El código principal de una página con frames no presenta las etiquetas <BODY> y </BODY>.
El código 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 número de divisiones verticales a efectuar, mientras

que COLS hace lo propio pero con las divisiones horizontales.
La forma de introducir los valores de división 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 píxeles.
%. Este valor indica que la altura o anchura de la ventana es un porcentaje relativo al tamaño
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á más espacio relativo, por ejemplo “2*,*” daría 2/3 del
espacio a la primera ventana y un tercio de la segunda.
Formas de dividir una pantalla:
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á vacía.
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 número de
píxeles entre los bordes izquierdo y derecho de la ventana.
MARGINHEIGHT=”valor”. Lo emplearemos cuando queramos precisar un número de
píxeles 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 función del contenido de la misma.
NORESIZE. Atributo que indica al navegador que la ventana no pueda ser redimensionada
por el usuario.
Listado principal de definición del frame:
<HTML>
<HEAD><TITLE>Ejemplo de varios frames combinados</TITLE>
<FRAMESET COLS="100%" ROWS="33%,33%,*">
<FRAMESET COLS="20%,20%,20%,20%,*">
<FRAME NAME="Frame 1"SRC="ejemplo.html">

</FRAMESET>
<FRAMESET COLS="50%,*">
</FRAMESET>
<FRAMESET COLS="33%,33%,*">

JavaScript
__________________________________________________________________________________
</FRAMESET>
</FRAMSET>
</HEAD>
</HTML>
En ejemplo más:
<HTML>
<HEAD><TITLE>Un ejemplo complejo de Frames</TITLE>
<FRAMESET ROWS="100%" COLS="16%,16%,16%,16%,16%,*">
<FRAMESET ROWS="50%,*">
<FRAME NAME="Frame 1"SRC="/ejemplo.htm"SCROLLING="AUTO">
<FRAME NAME="Frame 2"SRC="/ejemplo.htm"SCROLLING="YES">
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
<FRAME NAME="Frame 3"SRC="/ejemplo.htm"SCROLLING="AUTO"
NORESIZE>
</FRAMESET>
<FRAME NAME="Frame 7"SRC="/ejemplo.htm"SCROLLING="AUTO"
NORESIZE>
</FRAMESET>
<FRAMESET ROWS="33%,33%,*">
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
LOS FORMULARIOS
Los formularios pueden introducirse en cualquier parte del documento, es decir, en tablas,
dentro de un texto preformateado, etc. También pueden contener en su interior listas, imágenes, 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 selección <SELECT> y las áreas de texto <TEXTAREA>.
JavaScript
__________________________________________________________________________________
<FORM ACTION=fichero de tratamiento METHOD=POST/GET>

Elementos del formulario
</FORM>
Declaración 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 acción que debe realizarse al pulsar el botón de
ejecución.
METHOD. Indica el método de transferencia de la información introducida en el formulario.
Pueden emplearse los métodos GET y POST. El método GET envía la información a través
de una variable llamada QUERY_STRING. El método 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 codificación empleada para el transporte del
contenido del formulario.
Definición de campos de entrada <INPUT>
La etiqueta <INPUT> se emplea para definir todos los elementos del formulario, como
botones, cajas de texto, casillas de verificación, etc. El atributo que determina el tipo de elemento es
TYPE.
Los tipos de entrada son:
Checkbox. Cuadro vacío de selección. Permite selecciones múltiples.

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 introducción de texto visualizándose para cada carácter un asterisco.
Radio. Círculo vacío de selección. Solo permite una opción entre varias.
Reset. Borra todos los datos introducidos en el formulario.
Submit. Envía la información del formulario.
Checkbox
Se utiliza para elegir una serie de opciones disponibles, pudiéndose realizar selecciones
múltiples. Los elementos de este tipo requieren como mínimos los atributos NAME y VALUE, que
indican respectivamente el nombre del tipo o grupo de tipos y el valor del campo.

JavaScript
__________________________________________________________________________________
También se puede incluir el atributo CHECKED cuando queramos que esa opción aparezca
por defecto.
Ejemplo de código.
<INPUT TYPE="checkbox" NAME="sistema" VALUE="win95"CHECKED>Windows 95<BR>

<INPUT TYPE="checkbox" NAME="sistema" VALUE="DOS">Ms-Dos<BR>
<INPUT TYPE='checkbox" NAME="sistema" VALUE="win3.x">Windows 3.x<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="Linux">Linux<BR>
<INPUT TYPE="checkbox" NAME="sistema" VALUE="Otros">Otros Sistemas<BR>
Figura 1.17. Ejemplo del campo de entrada checkbox.
Hidden
Este tipo no muestra ningún campo en pantalla. Asigna una especie de marca al formulario
para que el navegador pueda reconocer al formulario en posteriores tareas. También se necesitan
especificar los atributos NAME y VALUE.
Text
Valor por defecto del atributo TYPE. Define una zona de entrada de texto simple que puede
tomar como atributos opcionales los siguientes:
MAXLENGTH. Atributo que delimita el número máximo de caracteres que pueden ser
introducidos. El número de caracteres por defecto es limitado.
SIZE. Especifica la cantidad de espacio reservada para introducir el texto.
VALUE. Permite poner un valor inicial para la casilla.
Ejemplo:
Nombre<INPUT TYPE="text" NAME="nombre" ><BR>

Apellidos<INPUT TYPE="text" NAME="apellidos" ><BR>
Dirección<INPUT TYPE="text" NAME="dirección" SIZE="50"><BR>
Poblacion<INPUT TYPE="text" NAME="población" ><BR>
Provincia<INPUT TYPE="text" NAME="provincia" ><BR>
JavaScript
__________________________________________________________________________________
El código TYPE=”text” se puede omitir.
Figura 1.18. Ejemplo del campo de entrada text. Observe el redimensionado de la casilla Dirección.
Password
Este tipo se utiliza generalmente para la introducción de claves de acceso. El texto que se va
escribiendo en la ventana no es legible por curiosos.
Código:
<HTML>
<BODY>
Introduzca nombre de usuario:<INPUT NAME="usuario"><BR>
Contraseña: <INPUT TYPE="password" NAME="pass">
</BODY>
</HTML>
Figura 1.19. Casilla característica de password
Radio
Es similar al checkbox, pero ésta solo permite elegir una opción entre todas. Los elementos de
este tipo requieren como mínimo los atributos NAME y VALUE.
Código de ejemplo:
<HTML>
<BODY>
<INPUT TYPE="radio" NAME="edad" VALUE="-18"> Menos de 18 años<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="18-25" CHECKED> Entre 18 y 25 años<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="25-35"> Entre 25 y 35 años<BR>

JavaScript
__________________________________________________________________________________
<INPUT TYPE="radio" NAME="edad" VALUE="35-50"> Entre 35 y 50 años<BR>
<INPUT TYPE="radio" NAME="edad" VALUE="+50"> Más de 50 años<BR>
</BODY>
</HTML>
Figura 1.20. Ejemplo de radio
Reset
Se usa para eliminar del formulario todos los valores introducidos. Su aspecto es el de un
botón y su nombre se especifica con en atributo VALUE.
Submit
Es el botón que se encarga de enviar el formulario. La etiqueta del botón se determina

mediante el atributo VALUE.
Ejemplo de reset y submit.
<INPUT TYPE="submit"VALUE="Pulsa aquí para enviar el formulario">

<INPUT TYPE="reset" VALUE="Pulsa aquí para borrar todos los datos">
Definición de campos de selección
La etiqueta <SELECT>..</SELECT> permite al usuario seleccionar una opción de un

conjunto de elementos mostrados como una lista desplegable, donde cada una de las opciones se
introduce mediante el elemento OPTION. Con el atributo SELECT podemos visualizar una
determinada opción de la lista.
Los atributos que reconoce son:
MULTIPLE. Por defecto solo puede ser seleccionada una sola opción. Este atributo permite
selecciona más, pulsando la tecla CTRL junto con la opción.
NAME. Atributo que especifica el nombre de la lista de selección.
SIZE. Atributo que determina el número de ítems visibles superior a
1. en este caso muestra una barra de desplazamiento lateral.
Ejemplo de código:
JavaScript
__________________________________________________________________________________
<SELECT NAME="Hardware" SIZE="3">

<OPTION SELECT> Impresora
<OPTION> Monitor
<OPTION> Scanner
<OPTION> Raton
<OPTION> Plotter
</SELECT>
Figura 1.21 Ejemplo de lista desplegable
Área de Texto <TEXTAREA>
La etiqueta de inicio <TEXTAREA> y de final <TEXTAREA> permite presentar un campo

de texto de múltiples líneas. Presenta los siguientes atributos:
COLS. Determina el número de caracteres de ancho de la ventana de texto.

NAME. Nombre del campo
ROWS. Establece el número de líneas visibles del área de texto en caracteres.
WRAP. Establece los saltos de línea según los siguientes valores:
o off. No se producen saltos de línea automáticos y el texto es enviado exactamente como
fue escrito.
o virtual. Se usa el salto de línea automático para mostrar el texto en pantalla.
o physical. Utiliza saltos de línea automáticos y envía el texto de idéntica manera.
Ejemplo:
<TEXTAREA NAME="editorial" ROWS=6 COLS=64>

EDITORIAL Ra-Ma
Ctra. de Canillas, 144
28043 MADRID
</TEXTAREA>
<TEXTAREA NAME="ventanavacia" ROWS=6 COLS=64>
</TEXTAREA>

JavaScript
__________________________________________________________________________________
Figura. 1.22. Ejemplo de utilización del campo Textarea
JavaScript
__________________________________________________________________________________
Introducción a
JavaScript 2
Al finalizar la unidad el participante conocerá los principios del

lenguaje JavaScript.
Tiempo estimado: 2:30 horas

JavaScript
__________________________________________________________________________________
CAPÍTULO 2
INTRODUCCIÓN A JAVA SCRIPT
JavaScript es un lenguaje de programación creado por Netscape con el objetivo de integrarse

en HTML y facilitar la creación de páginas 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 extensión del
HTML, que está orientado a objetos, diseñado para el desarrollo de aplicaciones cliente-servidor a
través de Internet.
El código 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 código.
• JavaScript 1.0 Netscape Navigator 2.0 o superior

Microsoft Internet Explorer 3.0
• JavaScript 1.1 Netscape Navigator 3 o superior
Microsoft Internet Explorer 4
• JavaScript 1.2 Netscape Communicator 4
• JavaScript 1.3 Netscape Communicator 4.06 y 4.6
JAVASCRIPT Y HTML
El primer paso es diferenciar dentro de un documento lo que es JavaScript del resto. Para ello
HTML dispone de una etiqueta que define el incio y el final de un código 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 especificación 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 versión, se produciran errores. Así pues,
especificando el npumero de versión utilizada en el script, por ejemplo <SCRIPT
LANGUAGE=”JavaScript1.3”>, los navegadores anteriores a Netscape 4.06 ignorarán el código y
no se producirán errores.
Ejemplo de código
JavaScript
__________________________________________________________________________________
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("primeros pasos con JavaScript");
</SCRIPT>
</BODY>
</HTML>
El texto anterior muestra en pantalla una línea con el texto Primeros pasos con JavaScript
JavaScript es un lenguaje de programación Case Sensitive, es decir, que distingue las

mayúsculas de las minúsculas, por lo que tendremos que prestar atención a la utilización 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
código script en pantalla al entender que se trata de texto. La solución pasa por englobarel código
JavaScript con la etiqueta HTML encargada de introducir comentarios, de esta manera los navegadores
que no soportan JavaScript interpretarán el código script como un comentario.
El lenguaje HTML dispone también de las etiquetas <NOSCRIPT> y </NOSCRIPT>. Entre

ellas se especificará una opción alternativa para los navegadores que no soportan scripts. Por ejemplo
un texto diciendo “Su navegador no soporta JavaScript”.
Ejemplo:
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<NOSCRIPT>
Su navegador no soporta JavaScript.
</NOSCRIPT>
</BODY>
</HTML>
PRIMEROS PASOS
Introducir comentarios

JavaScript
__________________________________________________________________________________
Para introducir comentarios en JavaScript podemos utilizar dos técnicas diferentes:
§ Los comentarios en una sola línea irán precedidos de //;

§ Los comentarios de varias líneas irán encerrados en /* y */.
Ejemplo de un fragmento de código en el que se utilizan los sistemas vistos anteriormente:
<SCRIPT>
//Comentario de una sola linea, la siguiente se ejecuta
document.write("Bienvenidos a JavaScript")
//Nuevamente un comentario de una sola linea
//*****************************
//Comentarios, Comentarios
//*****************************
/*Esta es otra forma de introducir comentarios
pero utilizando muchas lineas, incluso cosas como document.write("hola"),
son vistas como comentarios
*/
</SCRIPT>
Corchetes
Los corchetes se utilizan para definir fragmentos de código de manera que éstos no se junten
con el resto del programa.
Todo el código que ejecuta una función debe ir bien diferenciado del resto mediante corchetes.
Figura 2.1. Ventana creada con la función alert

El punto y coma
El punto y coma sirven para separar sentencias que se encuentran en una misma línea.
También puede indicar el final de una sentencia que ocupa varias líneas.
Ejemplo:
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>

JavaScript
__________________________________________________________________________________
Tratamiento de
variables
3
Al finalizar la unidad el participante conocerá el manejo de

variables en JavaScript.
Tiempo estimado: 1:30 horas
JavaScript
__________________________________________________________________________________
CAPITULO 3
TRATAMIENTO DE VARIABLES
Todos los lenguajes de programación necesitan en algún momento cargar en memoria los datos
que se van a procesar. Las variables son fundamentales.
LAS VARIABLES
JavaScript admite prácticamente cualquier tipo de nombre para definir una variable, no
obstante, hay una serie de consideraciones que se deben tener presentes:
§ El primer carácter debe ser siempr una letra o el guión de subrayado ( _ ). Los restantes
caracteres pueden ser letras, números o el guión de subrayado, teniendo como precaución no
dejar espacios entre ellos.
§ El nombre de la variable no debe coincidir las palabras reservadas de JavaScript.
§ JavaScript diferencia entre mayúsculas y minúsculas.
Para declarar variables se utiliza la palabra clave var seguida del nombre de la variable. Las
siguientes variables serán reconocidas como tales por JavaScript.
var nombre;
var dirección;
var entrada_valor_concreto;
var variable_numero_12;
Ahora se muestran otra variables que no serán reconocidas por JavaScript al no cumplir
algunas de las reglas de definición 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 minúsculas, o bien la primera mayúscula y las demás minúsculas.
Aunque las siguientes variables parezcan iguales, JavaScript las interpretará como diferentes.

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 ejecución del script.
Los tres tipos de variables son:
§ Variables de cadena
§ Variables numéricas
§ Variables booleanas
Un cuarto tipo podrían 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 carácter. También
pueden tener un valor nulo.
Ejemplo:
var pais=”España”;
var entrada_codigo;
entrada_codigo=”79201957”;
var valor=” ”;
Las comillas simples serán utilizadas dentro de fragmentos de código delimitados por comillas
dobles o viceversa.
Ejemplo:
document.write(“Que quiere decir la palabra ‘nuncupatorio’ “)

alert(‘Pulsa la tecla “amigo” ‘)
JavaScript
__________________________________________________________________________________
Hay una serie de caracteres que permiten representar funciones especiales, como podría ser un
salto de línea en un texto o, por ejemplo, las comillas. A continuación se presenta una lista:
§ \b carácter anterior
§ \f salto de página
§ \n salto de línea
§ \r retorno de carro
§ \t tabulador
§ \\ carácter
§ \‘ 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 NUMÉRICAS
Las variables numéricas son aquellas que contienen números enteros o de coma flotante.
Enteros

JavaScript
__________________________________________________________________________________
JavaScript puede utilizar tres bases distintas para números 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 número en base octal deberemos anteponer un cero 0 al número.

Recordemos que los números en base octal solo pueden contener los dígitos del 0 al 7.
var numero_octal;
numero_octal = 03254;
numero_octal = 02;
Para un valor hexadecimal deberemos anteponer al número el prefijo 0x. Los números en
hexadecimal incluyen los dígitos 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

fracción 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 lógicas se especifican mediante los valores verdadero (true) o falso
(false).
var estoy_contento;
estoy_contento=false;
estoy_contento=true;
La utilización de tipos booleanos es de suma importancia cuando se quieren comparar datos o

tomar decisiones.
JavaScript
__________________________________________________________________________________
LOCALIZACIÓN DE LAS VARIABLES
Las variables pueden ser globales y locales según el lugar en que se hayan definido. Las
primeras pueden usarse en cualquier parte del código, mientras que las segundas sólo pueden hacerlo
dentro de la función que las define.
Ejemplo:
//Definicion de variable global
var variable1="Esta cadena de texto se ha definido FUERA de una funcion. Es global";
//Definicion de una variable local
function ejemplo()
{
var variable2="Esta cadena de texto se ha definido DENTRO de una funcion. Es local";
document.write(variable2);
}
//Impresion en pantalla de la variable global

document.write(variable1+"<BR>");
//Impresion en pantalla de la variable local
ejemplo()
</SCRIPT>
Si se intenta utilizar una variable local en un ámbito global, JavaScript dará un mensaje de error
diciendo que la variable no está definida.
PALABRAS RESERVADAS
abstract boolean break byte

case match char class
const continue default do
doublé else extendí false
final finally float for
function goto int implements
input in instanceof interface
long native new null
package private protected public
return short static super
switch synchronized this throw
throws transient true try
var val while with

JavaScript
__________________________________________________________________________________
Los operadores
4
Al finalizar la unidad el participante comprenderá el uso de los

operadores en JavaScript
JavaScript
__________________________________________________________________________________
CAPÍTULO 4
LOS OPERADORES
Los operadores permiten combinar diferentes valores en una expresión.
TIPOS DE OPERADORES
Los operadores de JavaScript pueden dividirse en varios grupos. Su clasificación es

meramente funcional y se basa en la operación que realiza cada operación. Los grupos son:
§ Operadores aritméticos
§ Operadores lógicos
§ Operadores de comparación
§ Operadores condicionales
§ Operadores bit a bit
§ Operadores de asignación
OPERADORES ARITMÉTICOS
Los operadores aritméticos son los encargados de realizar las operaciones básicas como sumar,
restar, multiplicar y dividir.
§ Suma (+)
§ Resta (-)
§ Multiplicación (*)
§ División (/)
§ Módulo (%). Resto de la división.
§ Incremento, Preincremento, Posincremento (++)
§ Decremento, Predecremento, Posdecremento (--)
§ Negación (!)
Ejemplo:
<HTML>
<BODY>
var valor1, valor2, valor3;
var suma, resta, multiplicacion, division, resto_division, varios;

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 números con los que se
van a realizar las operaciones aritméticas básicas. Los resultados de dichas operaciones aritméticas
básicas. 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
números se llama suma, y el resultado de la sustracción se almacena en resta y así sucesivamente.
Otro tipo de operadores aritméticos son los incrementales o decrementales, que se aplican antes
o después del operando.
variable++ //Devuelve el valor de variable y después incrementa su valor en uno.

++variable //Aumenta el valor de variable en uno y después devuelve su valor.
variable -- //Devuelve en valor de variable y después disminuye su valor en uno.
-- variable //Disminuye el valor de variable en uno y después 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 aritmético es la negación.
numero+=100
numero= -numero
OPERADORES LÓGICOS
JavaScript
__________________________________________________________________________________
Los operadores lógicos o booleanos se emplean para que un programa tome una decisión en
función de un cálculo lógico. Los valores que se obtienen son true o false.
Los operadores son los siguientes:
§ && Suma lógica (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 lógico (O u Or). Este operador devuelve true siempre que una de las dos
condiciones sea verdadera. En caso contrario devuelve false.
§ ! Negación (No o Not). Este operador devuelve siempre el valor contrario, es decir, si la
condición o variable es true devuelve false y viceversa.
La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

continuación verá un resumen con todos los operadores lógicos.
§ true && true devuelve true

§ true && false devuelve false
§ false && false devuelve false
§ true || true devuelve true

§ true || false devuelve true
§ false || false devuelve false
OPERADORES DE COMPARACIÓN
Los operadores de comparación son similares a los lógicos, solo que estos no tiene porque ser
booleanos. Son los clásicos mayor que, menor que.
Operadores disponibles:
§ == Devuelve true si los dos operandos son iguales.

§ != Devuelve true si los dos operandos son diferentes.
§ > Devuelve true si el operando de la izquierda es mayor que el de la derecha
§ < Devuelve true si el operando de la izquierda es menor que el de la derecha.
§ >= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.
§ <= Devuelve true si el operando de la izquierda es menor o igual que el de la derecha.
§ ===
§ !==

JavaScript
__________________________________________________________________________________
OPERADORES CONDICIONALES
Un operador condicional devuelve un valor determinado en función del resultado obtenido al

evaluar una condición.
(condición)? valor1 : valor2
Si la condición 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 ASIGNACIÓN
Un operador de asignación se utiliza para asignar un valor a una variable. Veamos cuáles son,
y su sintaxis.
§ += valor1 += valor2 valor1 = valor1 + valor2

§ -= valor1 -= valor2 valor1 = valor1 – valor2
§ *= valor1 *= valor2 valor1 = valor1 * valor2
§ /= valor1 /= valor2 valor1 = valor1 / valor2
§ %= valor1 %= valor2 valor1 = valor1 % valor2
TABLA DE OPERADORES
Se relacionan a continuación los operadores soportados por JavaScript, así como un pequeño
ejemplo de utilización.
Tipo Operador Código ejemplo Descripción

Aritméticos
+ valor1 + valor2 Suma
- valor1 – valor2 Resta
* valor1 * valor2 Multiplicación
/ valor1 / valor2 División
% Valor1 % valor2 Resto división
++ ++ valor1 Preincremento
++ valor1 ++ Posincremento
JavaScript
__________________________________________________________________________________
-- -- valor1 Predecremento
-- valor1 -- Posdecremento
- - valor1 Negación
Lógicos
&& valor1 && valor2 AND lógico
|| valor1 || valor2 OR lógico
! ! valor1 NOT lógico
Comparación
== valor1 == valor2 Igualdad
!= valor1 != valor2 Distinto de
< valor1 < valor2 Menor que
<= valor1 <= valor2 Menor o igual que
> valor1 >= valor2 Mayor que
>= valor1 >= valor2 Mayor o igual que
Bit a bit
& valor1 & valor2 AND de bits
| valor1 | valor2 OR de bits
^ valor1 ^ valor2 XOR de bits
>> valor1 >> valor2 Shift a la derecha
<< valor1 << valor2 Shift a la izquierda
>>> valor1 >>> valor2 Shift sin signo
Condicionales
?: (condición)? Condicional
valor1 : valor2
Asignación
+= valor1 += valor2 valor1=valor1+valor2
-= valor1 -= valor2 valor1=valor1-valor2
*= valor1 *= valor2 valor1=valor1*valor2
/= valor1 /= valor2 valor1=valor1/valor2
%= valor1 %= valor2 valor1=valor1%valor2
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, método, etc. Su funcionamiento es sencillo, basta
con escribir a continuación de typeof la variable o elemento.
var variable=¨Pepe¨;
var numero=1;
var fecha=new Date();
document.write(typeof variable + ¨<BR>¨);
document.write(typeof numero + ¨<BR>¨);
document.write(typeof fecha + ¨<BR>¨);

JavaScript
__________________________________________________________________________________
</SCRIPT>
El resultado es:
variable = string
numero = number
fecha = object
JavaScript
__________________________________________________________________________________
Los operadores
4

operadores en JavaScript

JavaScript
__________________________________________________________________________________
CAPÍTULO 4
LOS OPERADORES
Los operadores permiten combinar diferentes valores en una expresión.
TIPOS DE OPERADORES
Los operadores de JavaScript pueden dividirse en varios grupos. Su clasificación es

meramente funcional y se basa en la operación que realiza cada operación. Los grupos son:
§ Operadores aritméticos
§ Operadores lógicos
§ Operadores de comparación
§ Operadores condicionales
§ Operadores bit a bit
§ Operadores de asignación
OPERADORES ARITMÉTICOS
Los operadores aritméticos son los encargados de realizar las operaciones básicas como sumar,
restar, multiplicar y dividir.
§ Suma (+)
§ Resta (-)
§ Multiplicación (*)
§ División (/)
§ Módulo (%). Resto de la división.
§ Incremento, Preincremento, Posincremento (++)
§ Decremento, Predecremento, Posdecremento (--)
§ Negación (!)
Ejemplo:
<HTML>
<BODY>
var valor1, valor2, valor3;
var suma, resta, multiplicacion, division, resto_division, varios;
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 números con los que se
van a realizar las operaciones aritméticas básicas. Los resultados de dichas operaciones aritméticas
básicas. 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
números se llama suma, y el resultado de la sustracción se almacena en resta y así sucesivamente.
Otro tipo de operadores aritméticos son los incrementales o decrementales, que se aplican antes
o después del operando.
variable++ //Devuelve el valor de variable y después incrementa su valor en uno.

++variable //Aumenta el valor de variable en uno y después devuelve su valor.
variable -- //Devuelve en valor de variable y después disminuye su valor en uno.
-- variable //Disminuye el valor de variable en uno y después 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 aritmético es la negación.
numero+=100
numero= -numero
OPERADORES LÓGICOS

JavaScript
__________________________________________________________________________________
Los operadores lógicos o booleanos se emplean para que un programa tome una decisión en
función de un cálculo lógico. Los valores que se obtienen son true o false.
Los operadores son los siguientes:
§ && Suma lógica (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 lógico (O u Or). Este operador devuelve true siempre que una de las dos
condiciones sea verdadera. En caso contrario devuelve false.
§ ! Negación (No o Not). Este operador devuelve siempre el valor contrario, es decir, si la
condición o variable es true devuelve false y viceversa.
La verdadera utilidad de estos operadores se ve al trabajar con estructuras condicionales. A

continuación verá un resumen con todos los operadores lógicos.
§ true && true devuelve true

§ true && false devuelve false
§ false && false devuelve false
§ true || true devuelve true

§ true || false devuelve true
§ false || false devuelve false
OPERADORES DE COMPARACIÓN
Los operadores de comparación son similares a los lógicos, solo que estos no tiene porque ser
booleanos. Son los clásicos mayor que, menor que.
Operadores disponibles:
§ == Devuelve true si los dos operandos son iguales.

§ != Devuelve true si los dos operandos son diferentes.
§ > Devuelve true si el operando de la izquierda es mayor que el de la derecha
§ < Devuelve true si el operando de la izquierda es menor que el de la derecha.
§ >= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.
§ <= Devuelve true si el operando de la izquierda es menor o igual que el de la derecha.
§ ===
§ !==
JavaScript
__________________________________________________________________________________
OPERADORES CONDICIONALES
Un operador condicional devuelve un valor determinado en función del resultado obtenido al

evaluar una condición.
(condición)? valor1 : valor2
Si la condición 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 ASIGNACIÓN
Un operador de asignación se utiliza para asignar un valor a una variable. Veamos cuáles son,
y su sintaxis.
§ += valor1 += valor2 valor1 = valor1 + valor2

§ -= valor1 -= valor2 valor1 = valor1 – valor2
§ *= valor1 *= valor2 valor1 = valor1 * valor2
§ /= valor1 /= valor2 valor1 = valor1 / valor2
§ %= valor1 %= valor2 valor1 = valor1 % valor2
TABLA DE OPERADORES
Se relacionan a continuación los operadores soportados por JavaScript, así como un pequeño
ejemplo de utilización.
Tipo Operador Código ejemplo Descripción

Aritméticos
+ valor1 + valor2 Suma
- valor1 – valor2 Resta
* valor1 * valor2 Multiplicación
/ valor1 / valor2 División
% Valor1 % valor2 Resto división
++ ++ valor1 Preincremento
++ valor1 ++ Posincremento
-- -- valor1 Predecremento

JavaScript
__________________________________________________________________________________
-- valor1 -- Posdecremento
- - valor1 Negación
Lógicos
&& valor1 && valor2 AND lógico
|| valor1 || valor2 OR lógico
! ! valor1 NOT lógico
Comparación
== valor1 == valor2 Igualdad
!= valor1 != valor2 Distinto de
< valor1 < valor2 Menor que
<= valor1 <= valor2 Menor o igual que
> valor1 >= valor2 Mayor que
>= valor1 >= valor2 Mayor o igual que
Bit a bit
& valor1 & valor2 AND de bits
| valor1 | valor2 OR de bits
^ valor1 ^ valor2 XOR de bits
>> valor1 >> valor2 Shift a la derecha
<< valor1 << valor2 Shift a la izquierda
>>> valor1 >>> valor2 Shift sin signo
Condicionales
?: (condición)? Condicional
valor1 : valor2
Asignación
+= valor1 += valor2 valor1=valor1+valor2
-= valor1 -= valor2 valor1=valor1-valor2
*= valor1 *= valor2 valor1=valor1*valor2
/= valor1 /= valor2 valor1=valor1/valor2
%= valor1 %= valor2 valor1=valor1%valor2
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, método, etc. Su funcionamiento es sencillo, basta
con escribir a continuación de typeof la variable o elemento.
var variable=¨Pepe¨;
var numero=1;
var fecha=new Date();
document.write(typeof variable + ¨<BR>¨);
document.write(typeof numero + ¨<BR>¨);
document.write(typeof fecha + ¨<BR>¨);
JavaScript
__________________________________________________________________________________
</SCRIPT>
El resultado es:
variable = string
numero = number
fecha = object

JavaScript
__________________________________________________________________________________
Objetos,
funciones y
métodos
6

objetos, las funciones y los métodos para realizar páginas
interactivas.
JavaScript
__________________________________________________________________________________
CAPÍTULO 6
OBJETOS, FUNCIONES Y MÉTODOS
Los objetos, las funciones y los métodos van a permitir realizar tareas mucho más impactantes
de las que realmente se han visto hasta ahora.
LOS OBJETOS
Un objeto es una agrupación 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 actúan sobre ellos. Por ejemplo, las propiedades de un computador, serían su
procesador, el disco duro, memoria, etc., y además con él podemos jugar, estudiar, dibujar, por
ejemplo.
Propiedades de un objeto
Un objeto en JavaScript tiene una serie de propiedades asociadas a él. Para acceder a dichas
propiedades utilizaremos la notación 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 función es un conjunto
de sentencias JavaScript que realizan alguna tarea específica. Las partes que definen una función son:
§ El nombre de la función.
§ La lista de argumentos de la función, encerrados entre paréntesis y separados por comas(“,”)
§ Las sentencias en JavaScript que definen la función, encerradas entre llaves({,});

JavaScript
__________________________________________________________________________________
Una función puede incluir llamadas a otras funciones definidas en la aplicación, pero únicamente
de la página actual. Una opción interesante es definir las funciones en el encabezado del
documento de manera que, cuando se inicialice la página, las funciones se definan antes de
cualquier acción del usuario.
La sintaxis de definición de una función sería:
function nombreFuncion(parametro1, parametro2…){

Instrucciones
}
La definición de una función no implica su ejecución; ésta sólo se ejecutará cuando se le

realice la llamada pertinente.
Ejemplo: Se define una función llamada saludo que será posteriormente llamada para mostrar la
cadena de texto especificada.
<HTML>
<HEAD>
<TITLE>Ejemplo de funciones</TITLE>
function saludo()
{
document.write("Hola amigos, esto es un saludo");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAJE=JavaScript>
saludo();
</SCRIPT>
</BODY>
</HTML>
Para que una función devuelva el resultado de una serie de operaciones procedentes de la
misma función, utilizaremos la instrucción return.
<HTML>
<HEAD>
function mitad(valor)
{
return valor/2;
JavaScript
__________________________________________________________________________________
}
</SCRIPT>
</HEAD>
<BODY>
document.write("La mitad de 100 es"+mitad(100));
</SCRIPT>
</BODY>
</HTML>
Argumentos de la función
Los argumentos de una función permiten que el resultado varíe según el valor indicado de la
misma. Estos pueden ser variables, números u objetos.
En el siguiente script, podrá ver el método de definición de los argumentos de la función y

posteriormente, el modo de llamar a cada argumento.
<HTML>
<HEAD>
function Mensaje(Respuesta)
{
if(Respuesta==0) alert("La respuesta es correcta");
if(Respuesta==2) alert("La respuesta es incorrecta. Repasa la leccion 10");
if(Respuesta==1) alert("Vaya disparate. Debes repetir curso");
if(Respuesta>=3) alert("Respuesta fuera de rango");
}
</SCRIPT>
</HEAD>
<BODY>
Mensaje(0);
Mensaje(1);
Mensaje(2);
Mensaje(5);
</SCRIPT>
</BODY>
</HTML>

JavaScript
__________________________________________________________________________________
LOS MÉTODOS
Un método es una función asociada a un objeto y particular a los objetos del tipo que las
define. Así pues, un método es una acción que ejecutamos sobre los datos de un objeto.
Los métodos se definen en el mismo sitio que las funciones y de la misma manera,
asociándolas posteriormente a un objeto ya existente.
Sintaxis para definir un método:
Objeto.nombreMetodo=nombreFuncion
Y para hacer llamada a método:
Objeto.nombreMetodo(parametro1,parametro2..)
Creación de Objetos
JavaScript dispone de una serie de objetos predefinidos, pero también podemos crear nuestro
propios objetos según sea necesario.
Los pasos a seguir para definir un objeto nuevo son dos:
§ Definir un tipo de objeto a través de una función

§ Crear una instancia del objeto usando la palabra new.
Para definir un tipo de objeto, deberemos especificar el nombre de la función, sus propiedades y
métodos.
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 parámetros a funciones y dentro de éstas para acceder a
las propiedades de los objetos.
Ejemplo: Definamos una función llamada Computador con tres propiedades: marca, cpu y memoria.
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 específicos a sus propiedades.
miComputadora = new Computadora(“HP”,”Pentium150”,”64MB”)
Recuerde que pueden crearse tantas instancias de un tipo como sean necesarias.
miComputadora=new Computadora(“HP”,”Pentium150”,”64Mb”)
miComputadora_Dos=new Computadora(“Philips”,”Pentium200”,”64Mb”)
miComputadora_Tres=new Computadora(“Acer”,”Pentium133”,”164Mb”)
Ahora podemos mostrar en pantalla las propiedades de los objetos definidos.
<HEAD>
<TITLE>Ejemplo de creacion de Objetos</TITLE>
</HEAD>
<BODY>
function Computador(marca,cpu,memoria)
{
this.marca=marca;
this.cpu=cpu;
this.memoria=memoria;
}
miComputador=new Computador("HP","Pentium150","64Mb")
miComputador_Dos=new Computador("Philips","Pentium200","64Mb")
miComputador_Tres=new Computador("Acer","Pentium133","16Mb")
var mensaje;
mensaje="miComputador\nmarca:"+miComputador.marca+"\n"
+"cpu:"+miComputador.cpu+"\n"
+"memoria:"+miComputador.memoria+"\n";
alert(mensaje);
mensaje="miComputador_Dos\nmarca:"+miComputador_Dos.marca+"\n"
+"cpu:"+miComputador_Dos.cpu+"\n"

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>
JavaScript
__________________________________________________________________________________
Objetos y
funciones
predefinidas
7

objetos y funciones predefinidas es JavaScript para realizar
páginas interactivas.

JavaScript
__________________________________________________________________________________
CAPÍTULO 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 declaración.
var cadenaTexto;
cadenaTexto=”Aquí esta la cadena de texto”;
Los objetos de tipo String disponen de una serie de métodos que permiten modificar y devolver
el valor de la cadena de texto.
Los métodos disponibles para este objeto son:
§ anchor(nombre) Crea un enlace

§ big() Mestra la cadena de caracteres con una fuente grande.
§ blink() La cadena se representa intermitentemente.
§ bold() Muestra la cadena en negrita.
§ charAt() Muestra el carácter situado en la posición n de la cadena.
§ fixed() Muestra la cadena con una fuente no proporcional.
§ fontcolor(color) Determina el color de la cadena.
§ fontsize(n) Muestra la cadena con una tamaño n. Éste puede oscilar entre 1 y 7.
§ indexOf(smallSting,start) Facilita la posición de un fragmento de la cadena a partir de una
posición determinada.
§ italics() Muestra la cadena en cursiva.
§ lastIndexOf() Da como resultado la última posición de un carácter.
§ link(URL) Convierte la cadena en un vínculo.
§ small() Muestra la cadena con una fuente pequeña.
§ strike() Muestra la cadena subrayada.
§ sub() Muestra la cadena en formato subíndice.
§ substring(x,y) Muestra un fragmento de cadena que empieza en posición x y termina en la
posición y.
§ sup() Muestra la cadena en formato superíndice.
§ toLowerCase() Muestra toda la cadena en minúsculas.
§ toUpperCase() Muestra toda la cadena en mayúsculas.
JavaScript
__________________________________________________________________________________
Ejemplo en que se utilizan algunos de estos métodos:
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto String</TITLE>
</HEAD>
<BODY>
var cadena;
cadena="Bienvenidos al apasionante mundo de JavaScript";

document.write(cadena+"<BR>");
document.write(cadena.bold()+"<BR>");
document.write(cadena.big()+"<BR>");
document.write(cadena.toUpperCase()+"<BR>");
document.write(cadena.small()+"<BR>");
document.write(cadena.italics()+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Figura 7.1. Formatos de texto conseguidas utilizando el objeto String()
Los objetos String() disponen de las propiedades length, que determina el número de
caracteres de la cadena, y prototype, que permite añadir nuevas propiedades y métodos (más adelante
serán tratadas).

JavaScript
__________________________________________________________________________________
EL OBJETO Math ( )
El objeto Math tiene propiedades y métodos que representan constantes y funciones

matemáticas.
Las propiedades de este objeto son las siguientes:
§ E Constante de Euler o número e.

§ LN2 Logaritmo de 2.
§ LN10 Logaritmo de 10.
§ LOG2E Logaritmo de e en base 2.
§ LOG10E Logaritmo de e en base 10.
§ PI Número PI.
§ SQRT1_2 Raíz cuadrada de 0.5.
§ SQRT2 Raíz cuadrada de 2.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Math( )</TITLE>
</HEAD>
<BODY>
var valorPi;
valorPI=Math.PI;
document.write("La variable Pi tiene como valor:"+valorPI);
</SCRIPT>
</BODY>
</HTML>
A continuación, relacionaremos los métodos, que son los elementos que nos permiten realizar
operaciones.
§ abs(n) Calcula el valor absoluto de n.

§ acos(n) Calcula el arcocoseno de n.
§ asin(n) Calcula el arcoseno de n.
§ atan(n) Calcula el arcotangente de n.
§ ceil(n) Redondea un número hacia el superior.
§ cos(n) Calcula el coseno de un número n.
§ exp(n) Calcula un exponencial del número e.
§ floor(n) Redondea un número hacia el inferior.
§ log(n) Calcula el logaritmo de un número n.
§ max(x,y) Devuelve x o y, en función de cuál de los dos es mayor.
JavaScript
__________________________________________________________________________________
§ min(x,y) Devuelve x o y, en función de cuál de los dos es menor.
§ pow(x,y) Calcula la potencia de dos números.
§ random() Genera un número entero más cercano.
§ round(n) Redondea al número entero más cercano.
§ sin(n) Calcula el seno de un número n.
§ sqrt(n) Calcula la raíz cuadrada de un número n.
§ tan(n) Calcula la tangente de un número n.
Es recomendable utilizar la sentencia with cuando se desean realizar varios cálculos matemáticos
seguidos para no tener que poner Math en cada referencia.
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Math</TITLE>
</HEAD>
<BODY>
var valorPi;
valorPI=Math.PI;
document.write("La varibale Pi tiene como valor."+valorPI+"<BR>");
valorPI=Math.ceil(valorPI);
document.write("La variable Pi redondeada mediante ceil tiene como valor:"+valorPI);
</SCRIPT>
</BODY>
</HTML>
EL OBJETO Date( )
El objeto Date permite trabajar con horas y fechas. JavaScript maneja las fechas en
milisegundos desde 1/1/1970 a las 00:00:00 horas. Por lo que no se puede trabajar con fechas
anteriores.
En la representación 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 días 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 parámetros.
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

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 métodos para manejar fechas y horas, así pues, veamos dichos
métodos:
§ getDate() Devuelve el día del mes actual.

§ getDay() Devuelve el día de la semana actual.
§ getHours() Devuelve la hora actual.
§ getMinutes() Devuelve los minutos actuales.
§ getMonth() Devuelve el mes actual.
§ getSecond() Devuelve los segundos actuales.
§ getTime() Devuelve la hora actual.
§ getTimeZoneoffset() Devuelve la diferencia en minutos entre la hora actual y la GTM.
§ getYear() Devuelve el año actual.
§ parse(datestring) Devuelve el tiempo pasado entre las 00:00:00 horas del 1 de enero de 1970
con respecto a la fecha especificada en datestring.
§ setDate(valor) Establece el día del mes.
§ setHours(valor) Establece la hora actual.
§ setMinutes(valor) Establece los minutos actuales.
§ setMonth(valor) Establece el mes actual.
§ setSeconds(valor) Establece los segundos actuales.
§ setTime(valor) Establece el valor del tiempo actual.
§ setYear(valor) Establece el año actual.
§ toGMTString() Devuelve el valor del objeto actual en GMT como una cadena.
§ toLocateString() Devuelve el valor del objeto actual como una cadena.
§ UTC() Devuelve el número de milisegundos transcurridos desde las 00:00:00 del día 1 de
enero de 1970.
Los métodos set los utilizaremos para fijar la fecha y la hora, los métodos 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 día actual de la semana.
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Date</TITLE>
</HEAD>
<BODY>
fecha=new Date;
dia=fecha.getDay();
if(dia==0){
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 técnica importante de programación 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(). Después se deberán ir incluyendo los elementos de esa matriz, los
cuales estarán identificados mediante un número 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
número de elementos disponibles en la matriz.
document.write(“Tengo”+OpenAustralia.length+”elementos en mi matriz.”);

JavaScript
__________________________________________________________________________________
El objeto Array() también tiene tres métodos:
§ join() Método encargado de agrupar todos los elementos en una cadena de caracteres,
separados por comas.
§ reverse() Este método invierte el orden de colocación de los elementos. El primero pasa a ser
el último y viceversa.
§ sort() Este método 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 tendrán contenido.
Ejemplo completo de la matriz OpenAustralia en el que se aplican los métodos vistos.
<HTML>
<HEAD>
<TITLE>Ejemplo del objeto Array</TITLE>
</HEAD>
<BODY>
OpenAustralia=new Array();
OpenAustralia[0]="Sergi Bruguera";
OpenAustralia[1]="Alex Corretja";
OpenAustralia[2]="Feliz Mantilla";
OpenAustralia[3]="Peter Sampras";
OpenAustralia[4]="Gustavo Kuerten";
document.write("Tengo "+OpenAustralia.length+" elementos en mi matriz."+"<BR>");
document.write("Aqui estan relacionados"+"<BR>"+OpenAustralia.join()+"<BR>");
document.write("Ahora al reves"+"<BR>"+OpenAustralia.reverse().join()+"<BR>");
document.write("Ahora ordenados alfabeticamente"+"<BR>"+OpenAustralia.sort().join()+"<BR>");
document.write("Ahora ordenados alfabeticamente y al
reves"+"<BR>"+OpenAustralia.sort().reverse().join()+"<BR>");
</SCRIPT>
</BODY>
</HTML>
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 vacía.
Ejemplo de aplicación:
<HTML>
<HEAD>
<TITLE>Ejemplo de objeto Boolean()</TITLE>
var objeto1,objeto2,objeto3,objeto4;
objeto1=new Boolean();
objeto2=new Boolean(false);
objeto3=new Boolean(true);
objeto4=new Boolean("texto");
document.write("El valor booleano de objeto 1 es "+ objeto1 +"<BR>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Figura 7.2. Valor de los objetos creados mediante Boolean

JavaScript
__________________________________________________________________________________
LA FUNCIÓN eval()
La función eval() toma una cadena que puede contener cualquier expresión de JavaScript. Así
pues, su valor podría ser una cadena representando una expresión JavaScript, una sentencia o una
secuencia de sentencias. Esta función puede contener variables y propiedades de objetos ya existentes.
Esta función es útil cuando se trabaja con formularios, ya que los valores introducidos en un
formulario son siempre cadenas o valores numéricos.
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 numérico a partir de una cadena.
La función parseFloat(cadena) convierte una cadena en un número real en coma flotante. Si

la función encuentra un símbolo diferente a los signos + y -, los dígitos 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 carácter no puede ser convertido se devuelve el valor NaN.
La función parseInt(cadena,base) convierte una cadena a una base numérica especificada. Si

se encuentra un carácter que no es válido en la base especificada, se devuelve el valor obtenido hasta
el momento. Si el primer carácter encontrado no es válido, se devuelve el valor NaN.
El siguiente script muestra la utilización de parseInt y parseFloat.
<HTML>
<BODY>
var resultadoParseint, resultadoParsefloat;
var numero_int="1500.230";
var numero_float="+126.256";
resultadoParseint=parseInt(numero_int,10);
resultadoParsefloat=parseFloat(numero_float);
document.write(resultadoParseint+"<BR>");
document.write(resultadoParsefloat);
</SCRIPT>
</BODY>
</HTML>
JavaScript
__________________________________________________________________________________
LA FUNCIÓN escape
La function escape se utilize para obtener el código ASCII de un carácter en el juego de

caracteres ISO Latín 1. Los caracteres alfanuméricos como letras y números serán devueltos tal cual,
sólo los símbolos obtendrán su correspondiente código ASCII precedido del símbolo %.
Ejemplo:
<HTML>
<BODY>
document.write(escape("abcdefghi")+"<BR>");
document.write(escape("!.$%&/()=?¿")+"<BR>");
document.write(escape("123456789")+"<BR>");
</SCRIPT>
</BODY>
</HTML>
Figura 7.3. Detalle de los códigos ASCII obtenidos mediante la utilización de la función escape. Los
códigos ASCII de cada carácter van precedidos del símbolo %.
LA FUNCIÓN unescape
La función unescape es opuesta a la anterior. Su misión consiste en representar un carácter a

partir de su código ASCII.
<HTML>
<BODY>
document.write(unescape("abcdefghi")+"<BR>");
document.write(unescape("%21%B7%24%25%26%28%29%3D%3F%BF")+"<BR>");
document.write(unescape("123456789")+"<BR>");
</SCRIPT>
</BODY>
</HTML>

JavaScript
__________________________________________________________________________________
Figura 7.4. Resultados obtenidos utilizando la función unescape.
Objetos del
navegador 8

objetos del navegador en JavaScript
JavaScript
__________________________________________________________________________________

JavaScript
__________________________________________________________________________________
CAPÍTULO 8
LOS OBJETOS DEL NAVEGADOR
En este capítulo, veremos de manera superficial las características más relevantes de los
objetos del navegador JavaScript.
Cuando se carga una página en un navegador, se crea un número de objetos característicos del
navegador según el contenido de dicha página. A continuación veremos los objetos y propiedades que
tiene un documento:
§ window. Es el objeto de más alto nivel, contiene las propiedades de la ventana y en el

supuesto de trabajar con frames, un objeto window es generado para cada frame.
§ location. Contiene las propiedades de la URL activa.
§ history. Objeto que contiene las propiedades que representan a las URL que el usuario ha
visitado anteriormente. Es una especia de caché.
§ document. Este objeto contiene todas las propiedades del documento actual, como pueden ser
su color de fondo, enlaces, imágenes, etc.
Los objetos en el navegador se rigen por una jerarquía que refleja la estructura de los
docmentos HTML. Según esto, el objeto window que es el de más alto nivel, tendría 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 específica de un objeto para referenciar
una propiedad específica 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 continuación la jerarquía de los objetos de un navegador.
§ window
o parent, frames, self, top
o history
o location
o document
§ links
§ anchor
§ form
• Todos sus elementos
JavaScript
__________________________________________________________________________________
EL OBJETO window
El objeto window posee una serie de propiedades que determinan características básicas de la
ventana y sus componentes. A continuación las propiedades mas elementales:
§ closed. Propiedad que determina si una ventana se ha cerrado.

§ defaultStatus. Propiedad que contiene el mensaje estándar que aparece en la barra de estado
de windows.
§ frames. Es una matriz que representa todos los frames de la ventana.
§ lenght. Esta propiedad contiene el número de frames de la ventana.
§ name. Contiene el nombre de la ventana.
§ outerHeight. Altura de la totalidad de la ventana.
§ outerWidth. La anchura de la totalidad de la ventana.
§ parent. Hace referencia a la ventana con un código <FRAMESET>/
§ self. Propiedad que hace referencia a la ventana activa.
§ top. Hace referencia a la ventana superior del navegador.
§ status. Determina el mensaje que aparece en la barra de estado del navegador.
§ window. Al igual que self, hace referencia a la ventana activa.
Ejemplo: Diseñaremos un programa que muestre siempre un texto en la barra de estado y que oculte la
dirección real de un enlace al pasar el cursor del ratón 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 también posee una serie de métodos que permiten ejecutar funciones
específicas con las ventanas, como por ejemplo crear ventanas y cuadros de diálogo.
§ open() y close(). Métodos que abren y cierran una ventana.

§ back(). Retrocede a la página anterior.
§ blur(). Quita el foco de la ventana especificada.
§ captureEvents(). Captura todos los eventos de un determinado tipo.
§ clearInterval(). Cancela el tiempo de espera establecido mediante setInterval().
§ close(). Cierra la ventana.

JavaScript
__________________________________________________________________________________
§ alert(). Método que muestra una ventana de diálogo con un mensaje y el botón Aceptar.
§ confirm(). Método similar al anterior, pero mostrando dos botones, Aceptar y Cancelar.
§ find(). Abre una ventana de diálogo que permite efectuar búsquedas.
§ prompt(). Método que representa una ventana de diálogo con mensaje y un campo de entrada.
§ setTimeout. Este método retrasa la ejecución de una instrucción.
§ clearTimeout. Método que permite anular el timeout fijado con el método anterior.
También podemos determinar el aspecto que tendría la nueva ventana del navegador mediante una
serie de componentes que permiten configurar el menú, la barra de herramientas, la barra de estado,
etc. Las opciones son:
§ toolbar. Muestra la barra de herramientas.

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

Ejemplo de aplicación de los métodos alert(), confirm() y prompt():
<HTML>
<HEAD>
<TITLE>Ejemplo de ABRIR y CERRAR una ventana</TITLE>
function Pregunta(){
var EntradaDatosPregunta=prompt("Intoduce tu nombre, por favor","en minusculas,gracias");
if(confirm("Estas conforme con el nombre introducido"+EntradaDatosPregunta+"?"))
{
alert("De acuerdo, escribiste"+EntradaDatosPregunta);
} else {
alert("Bueno, pero yo creo que escribiste"+EntradaDatosPregunta);
}
}
</SCRIPT>

JavaScript
__________________________________________________________________________________
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Pulsa Aqui" onClick="Pregunta()">
</FORM>
</BODY>
</HTML>
Figura 8.2. Ejemplo de métodos alert(), confirm() y prompt ().
EL OBJETO location
La propiedad location del objeto window contiene información 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
JavaScript
__________________________________________________________________________________
Propiedades del objeto location.
§ protocol. Especifica el inicio de la dirección.

§ hash. Especifica el nombre del enlace en la URL.
§ host. Determina el nombre del servidor y el puerto.
§ href. Especifica la dirección completa.
§ port. Especifica el puerto de comunicaciones.
EL OBJETO document
El objeto document hace referencia a todo el contenido de un documento HTML.
Todas las propiedades de este objeto hacen referencia a determinadas características de la

página, como su color de fondo, su título, etc. A continuación se relacionan algunas de las más
utilizadas:
§ bgColor. Color del fondo.

§ fgColor. Color del texto.
§ vlinkColor. Color de los enlaces visitados.
§ alinkColor. Color del enlace en el momento de la selección.
También podemos trabajar con algunos de sus métodos para controlar el proceso de abrir y cerrar un
documento.
§ clear(). Borra la página del navegador.

§ close(). Cierra el documento.
§ write(). Permite escribir en un documento.
EL OBJETO history
Este objeto contiene información sobre los enlaces que el usuario ha visitado. Su utilidad más
aparente es la de generar botones de avance y retroceso.
§ back(). Carga el URL anterior al actual.

§ forward(). Carga el URL siguiente de la lista.
§ go(). Muestra un URL de la lista history según un valor índice introducido.

JavaScript
__________________________________________________________________________________
Los eventos
9

eventos en JavaScript
JavaScript
__________________________________________________________________________________
CAPÍTULO 9
LOS EVENTOS DE JAVASCRIPT
Se llama evento a un suceso que ocurre en el sistema cuando un usuario ejecuta algún tipo de
acción. Un evento debe asociarse a un elemento HTML, no a un código JavaScript.
Script que utiliza el evento onClick:
<HTML>
<HEAD><TITLE>Ejemplo de evento</TITLE>
</HEAD>
<BODY>
<FORM><INPUT TYPE="button" VALUE="Pulsa" onClick="alert('Has pulsado el
boton');"></FORM>
</BODY>
</HTML>
Figura 9.1. Utilización de un evento onClick

EL EVENTO onClick

JavaScript
__________________________________________________________________________________
Este evento se produce cuando el usuario efectúa un clic con el botón izquierdo del ratón sobre
algún elemento de un formulario o un enlace.
La sintaxis básica de este evento es la siguiente:
<INPUT TYPE="tipo de elemento" onClick=”function”>
El tipo de elemento puede ser un botón, una caja de comprobación o un botón de reset por
ejemplo, mientras que la función es la instrucción 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 ratón para por encima de un
elemento de la página, mientras que el evento onMouseOut sucede cuando se deja de seleccionar este
elemento.
La sintaxis para los respectivos eventos es la siguiente:
<A HREF="URL" onMouseOver="funcion">Enlace</A>

<A HREF="URL" onMouseOut="funcion">Enlace</A>
En el siguiente ejemplo vemos cómo actúan estos dos eventos:
JavaScript
__________________________________________________________________________________
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onMouseOver y onMouseOut</TITLE>
</HEAD>
<BODY>
<A HREF="enlace" onMouseOver="alert('Has pasado por encima del
enlace');">Pasa por encima mio.</A>
<BR><BR><BR><BR><BR><BR>
<A HREF="enlace"onMouseOut="alert('Estas alejandote del enlace');">Acercate y luego
vete poco a poco.</A>
</BODY>
</HTML>
LOS EVENTOS onLoad Y onUnLoad
El evento onLoad es aquel que se produce cuando un navegador carga un documento HTML o
una imagen. Este evento se utilizará dentro de la etiqueta <BODY> del documento HTML o dentro
de la etiqueta <FRAMESET> en el supuesto de estar trabajando con frames.
Su sintaxis para cada una de las opciones será la siguiente:
<BODY onLoad=”script a ejecutar”>

<FRAMESET onLoad=”script a ejecutar”>
OnUnLoad es el evento opuesto a onLoad. Su misión consiste en ejecutar un script cuando la

página web actual se descarga, ya sea porque se accede a otro web o bien porque se utilizan los
botones de avanzar y retroceder.
La sintaxis es:
<BODY onUnLoad=”script a ejecutar”>

<FRAMESET onUnLoad=”script a ejecutar”>
A continuación un script que muestra un mensaje al cargar un documento HTML y otro al

abandoner dicho documento:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onLoad</TITLE>
</HEAD>
<BODY onLoad="alert('Acabas de entrar en el web mas interesante de la RED');”

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 elemento”onChange=”function”>
Sin duda es una interesante opción 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
JavaScript
__________________________________________________________________________________
Este evento se encarga de ejecutar un determinado código de JavaScript al realizarse el envío
de un formulario.
El ejemplo más claro de utilización de este evento es evitar que un formulario sea enviado si
determinadas condiciones no son cumplidas.
Ejemplo: Vamos a diseñar un formulario que verifique que se ha introducido un número entre uno y
cien antes de proceder a enviar los datos del formulario. Si la condición no se cumple, aparecerá un
mensaje de aviso y se cancelará el envío.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onSubmit</TITLE>
function verificarDato()
{
var valor=document.miformulario,numero.value;
if(valor>0 && valor<100)
{
return(true);
} else {
alert("ATENCION. El valor introducido no es correcto");
return(false);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miformulario"METHOD="post"
ACTION="mailto:correo@server.com" onSubmit="verificarDato()">
<P>Introduzca un numero comprendido entre 1 y 100
<INPUT TYPE="text"NAME="numero"><BR>
<INPUT TYPE="submit" VALUE="Pulsa aqui">
</FORM>
</BODY>
</HTML>
LOS EVENTOS onFocus Y onBlur
El evento onFocus detecta la entrada (focus) en un elemento de un formulario, por ejemplo un

text, textarea o window; mientras que onBlur actúa de manera contraría, es decir, detecta la pérdida
del focus.
La sintaxis es la siguiente:

JavaScript
__________________________________________________________________________________
<INPUT TYPE=”tipo de entrada”onFocus=”funcion”>

<INPUT TYPE=”tipo de entrada”onBlur=”funcion”>
Por ejemplo, podemos mostrar un mensaje cuando el usuario salga de algún 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 por expresar su
opinion.\nSaludos');"></TEXTAREA>
</FORM>
</BODY>
</HTML>
La utilización del evento onFocus puede provocar un bucle infinito que bloquee La
computadora. Veamos el siguiente fragmento de script:
<P>Queja:<TEXTAREA NAME="queja" onFocus="alert('Gracias por expresar su

opinion.\nSaludos');><TEXTAREA>
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>
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 botón STOP.
Sintaxis:
<IMG SRC="imagen" onAbort="funcion">
En el siguiente script de ejemplo, si el usuario pulsa el botón 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 botón 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:

JavaScript
__________________________________________________________________________________
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onReset</TITLE>
function avisoreset(){
if(confirm("!ATENCION!. Los datos del formulario se van a borrar.")){
document.datos.reset()
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER><FORM NAME="datos">
<P>Introduzca sus datos. Gracias.<BR>
Nombre:<INPUT TYPE="text"VALUE="Nombre"><BR>
Apellidos:<INPUT TYPE="text"VALUE="Apellidos"><BR>
Direccion:<INPUT TYPE="text"VALUE="Direccion"><BR>
Provincia:<INPUT TYPE="text"VALUE="Provincia"><BR>
<INPUT TYPE="button" VALUE="Resetar" onClick="avisoreset()">
</FORM>
</CENTER>
</BODY>
</HTML>
JavaScript
__________________________________________________________________________________
Figura 9.2. Mensaje de aviso antes de resetear los valores de un formulario.
LOS EVENTOS onkeydown, onkeyup Y onkeypress
Estos eventos se generan cuando el usuario efectúa alguita acción con las teclas.
§ onkeydown. Se ejecuta cuando se pulsa una tecla.

§ onkeyup. Se ejecuta cuando se deja de pulsar una tecla.
§ onkeypress. Se ejecuta cuando se mantiene pulsada una tecla.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onkeydown</TITLE>
function avisoPulsacion(){
alert("Has pulsado una tecla");
}
</SCRIPT>
</HEAD>

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 ratón:
§ onmousedown. Evento que se genera cuando el usuario pulsa un botón del ratón.
§ onmousemove. Evento que se genera cuando el usuario mueve el cursor del ratón.
§ onmouseup. Evento que se genera cuando se deja de pulsar un botón del ratón.
Estos eventos pertenecen a los objetos Button, document y Link.
LOS EVENTOS onmove Y onresize.
El evento onmove se genera cuando el usuario mueve una ventana o frame de la pantalla
principal del navegador.
Cuando un usuario modifica el tamaño de la ventana o del frame actual, se genera un evento
onresize.
Estos eventos están incorporados en los objetos window y frame.
<HTML>
<HEAD>
<TITLE>Ejemplo de evento onmove y onresize</TITLE>
</HEAD>
<BODY onresize="alert('La ventana esta siendo redimensionada');"
onmove="alert('La ventana se esta moviendo');">
</BODY>
</HTML>
El evento onmove solo es compatible con Netscape 4 o superior.
JavaScript
__________________________________________________________________________________
Hojas de estilo
10
Al finalizar la unidad el participante comprenderá el uso de las

hojas de estilo en JavaScript

JavaScript
__________________________________________________________________________________
CAPÍTULO 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 páginas web.
Las hojas de estilo permiten generar interesantes efectos de texto, con el consiguiente ahorro de
tiempo a la hora de cargar la página.
PRIMEROS PASOS
Una hoja de estilos se define de manera similar a los scripts de JavaScript. La definición de un
estilo está delimitada por las etiquetas <STYLE> y </STYLE> respectivamente. Así pues, la
estructura básica sería la siguiente:
<HEAD>
<STYLE TYPE="text\css">

</STYLE>
</HEAD>
La etiqueta <DIV> y </DIV> se utiliza para definir el estilo de una sección del documento,
mientras que <SPAN> y </SPAN> se empleará para definir el estilo de un párrafo.
DEFINICIÓN DE ESTILOS
Estilos de etiqueta
Este método consiste en especificar un estilo para una sola etiqueta HTML. Para emplear este
método, hay que añadir el atributo STYLE a dicha etiqueta.
<B STYLE="color:#0000FF">Este texto esta en color azul.</B>
Este método puede ser aplicado a cualquier etiqueta HTML y únicamente modifica las
propiedades de la etiqueta a la que se aplica.
JavaScript
__________________________________________________________________________________
Estilos genéricos
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 página, enlazando

posteriormente con él.
El tipo de archivo en que tenemos que guardar nuestra declaración de hoja de estilo ha de ser
ASCII, con la precaución de no añadir las etiquetas HTML, HEAD y BODY.
Así pues, podríamos definir un estilo llamado EstiloPersonal, similar al que se describe a
continuación:
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}
Utilización de la etiqueta CLASS

JavaScript
__________________________________________________________________________________
La etiqueta CLASS, que más bien se podría considerar como un atributo, se utiliza cuando se
desea que más de una etiqueta disponga de un mismo estilo o viceversa.
La sintaxis de este método es muy sencilla, ya que sólo 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
características:
§ texto centrado
§ color rojo
§ texto en negrita
§ tamaño 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 párrafo personal utilizando la etiqueta <p>.
Para crear un estilo personal, habrá que anteponer un punto al nombre del estilo. Después, 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 idéntica 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 genérica.
{font-family:courier}
Font-style
Convierte el texto en cursiva. Las opciones son Italia, oblique y normal.
{font-style: italic}
Font-variant
Convierte las minúsculas en pequeñas mayúsculas. Las opciones son small caps y normal.
JavaScript
__________________________________________________________________________________
{font-variant: small-caps}
Font-weight
Indica el grosor de una fuente. Los valores son normal, bold, o un valor numérico.
{font-weight: 700}
{font-weight: bold}
Font-size
Determina el tamaño 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
declaración. 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 alineación vertical. Las opciones son sub y super.
{vertical-align: super}
Text-transform
Especifica más efectos de texto. Las opciones son capitaliza, uppercase, lowercase, none.
{text-transform: uppercase}
Text-align
Establece la alineación del texto. Las opciones son left, right, center y justify.

JavaScript
__________________________________________________________________________________
{text-align: justify}
Text-indent
Permite establecer tabulaciones.
{text-indent: 10px}
Line-height
Determina la longitud de línea. Las opciones son normal, distancia, porcentaje o un valor numérico.
{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 página. Los valores
disponibles son scroll y fixed.
{background-attachment: scroll}
Background-position
Determina la posición de inicio del background, ya sea color o imagen. Los valores disponibles son
[posición | 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
JavaScript
__________________________________________________________________________________
Margin-top
Margin-right
Margin-bottom
Margin-left
Margin
Determina todos los márgenes del documento. Los valores pueden ser Distancia, porcentaje y auto.
{margin-top: 25px;}
Padding-top
Permita especificar el espacio superior entre el borde y el contenido de un elemento. Los valores
pueden ser distancia y porcentaje.
{padding-top: 15px}
Padding-right
Permite especificar el espacio superior entre el borde y el contenido de un elemento. Los valores
{padding-right: 30px;}
Padding-bottom
Permite especificar el espacio inferior entre el borde y el contenido de un elemento. Los valores
{padding-bottom: 2in}
Padding-left
Permite especificar el espacio izquierdo entre el borde y el contenido de un elemento. Los valores
{padding-left: 25px}
Padding
Permite especificar el espacio entre el borde y el contenido de un elemento. Los valores pueden ser
distancia y porcentaje.
{padding: 80px}
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Determinan el ancho del borde de un elemento.

Los valores para el ancho son thin, médium y thick.
{border-bottom-width: médium}

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, médium 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 podrán situar elementos flotantes. Los valores son none, left,
right y both.
{clear.right}
Propiedades de clasificación
Display
Modo de mostrar la información en un bloque. Los valores son block, inline, list-item y none.
JavaScript
__________________________________________________________________________________
{display: none}
White-space
Especificará cómo 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 posición 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 posición 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.

JavaScript
__________________________________________________________________________________
{visibility: hidden}

Clase 660 Libro Introduccion A JavaScript PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 660 Libro Introduccion A JavaScript PDF

Cargado por

Copyright:

Formatos disponibles

JavaScript

Al finalizar la unidad el participante desarrollará sus propias

El lenguaje de HTML se basa en el uso de etiquetas también llamadas marcas, directivas o

Existe normalmente una etiqueta de inicio <ETIQUETA> y otra de final </ETIQUETA>,

La cabecera de un documento viene delimitada por las etiquetas <HEAD> y </HEAD> y

2 Francisco J. Arce AnguianoX

La etiqueta <TITLE> especifica el título del documento. Este generalmente se muestra en la

<TITLE>Título de mi primera página WEB</TITLE>

Figura 1.1. Observe en la parte superior el título de la página web

Otra etiqueta relacionada con la cabecera de un documento es <META>, usada principalmente

<META HTTP-EQUIV=”Refresh” CONTENT=”15; URL=http://www.fut.es/~xxxx/sigui.htm”>

Siguiendo la estructura básica de un documento HTML encontramos la etiqueta <BASE>, que

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>

Ejemplo de código fuente que utiliza las etiquetas explicadas anteriormente:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2//EN”>

<META NAME=”Autor” CONTENT=”Juan Juan Orós”>

COLORES Y FONDO DEL DOCUMENTO

4 Francisco J. Arce AnguianoX

El atributo que se utiliza para determinar la imagen de fondo es:

Ejemplos de códigos HTML que utilizan los atributos anteriores.

<BODY BGCOLOR="Gray" TEXT="Black" LINK="Blue" VLINK="Fuchsia" ALINK="Red">

<BODY BACKGROUND="fondo1.gif" TEXT="#000000" LINK="#0000FF"

ESTRUCTURACIÓN DEL TEXTO

HTML no reconoce más de un espacio en blanco separando cualquier elemento o texto, es

Párrafos y saltos de línea.

Ejemplo entre la utilización de ambas etiquetas.

<P>El agua de la fuente,<BR>sobre la piel tosca<BR>y de verdín cubierta<BR>resbala silenciosa.

El resultado puede apreciarse en la figura 1.2.

Figura 1.2. Diferencia entre la etiqueta <BR> y <P>.

6 Francisco J. Arce AnguianoX

<H1>Páginas interactivas con JavaScript 1.2</H1>

El efecto puede observarse en la figura 1.3

Páginas interactivas con JavaScript

Figura 1.3 Ejemplo de distintos tipos de cabeceras.

Ejemplo de código que utiliza de manera variada, las etiquetas anteriores.

<H1>Texto con Nivel 1</H1>

<HR>

El resultado puede observarse en la figura 1.4.

Figura 1.4. Distintos ejemplos de cabeceras y separadores.

Texto con formato preestablecido

8 Francisco J. Arce AnguianoX

Mes Visitas Acumulado Total

ESTADILLO VISITAS DE INTERNET

Mes Visitas Acumulado Total

Figura 1.5. Resultado de la utilización de la etiqueta <PRE>

A continuación veremos los estilos de texto físico y lógicos:

<B> Se utiliza para mostrar un bloque de texto en negrita.

Ejemplo de código para texto con formato.

<BIG> Texto aumentado con BIG </BIG>

10 Francisco J. Arce AnguianoX

El resultado puede observarse en la figura 1.6

La etiqueta <FONT> permite controlar casi totalmente el estilo de un bloque de texto.

Los tamaños del texto van del 1 al 7. El tamaño normal es el 3.

<FONT SIZE=5> Texto en tamaño 5 </FONT>

<FONT SIZE= -1> Texto más pequeño </FONT>

Para cambiar el color de un fragmento de texto:

<FONT COLOR=”blue”> Este texto está en azul

<FONT FACE=”Cosmic”> Este texto se verá con la fuente Cosmic</FONT>

Otra función de HTML es el hipertexto, este consiste en poder moverse a través de un

Estructuras de los enlaces