Curso de HTML y Java Scripts

INTRODUCCIN El lenguaje HTML (HyperText Markup Language), es el formato estndar que se utiliza para crear e interpretar documentos de texto
e imgenes, conocidos popularmente como pginas web. Estos documentos, que en realidad son archivos de texto plano, estn compuestos bsicamente por: - la informacin que el usuario ve en la pantalla cuando accede a una pgina, y - cdigos (tags o etiquetas), transparentes para el usuario, que son interpretados por el programa del navegador y que controlan la manera como la informacin es mostrada en la pantalla. El objeto del presente mdulo es aprender a utilizar de manera correcta, algunas de esas etiquetas, con el fin de crear y modificar pginas mediante el uso de cualquier editor de texto. El siguiente ejemplo sencillo, contiene lo necesario para crear una pgina que desplegar en el explorador (browser o navegador), la frase Bienvenido al curso de HTML: <HTML> <HEAD> <TITLE>Primer Pgina</TITLE> </HEAD> <BODY> Bienvenido al curso de HTML </BODY> </HTML> Las palabras encerradas entre los smbolos menor y mayor que (< >), son las etiquetas de HTML y las frases dentro de stas, constituyen la informacin que realmente ver el usuario. Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con la etiqueta </HTML>. La estructura de una pgina est compuesta bsicamente por dos secciones: el encabezado (HEAD), y el cuerpo (BODY), delimitados por las etiquetas <HEAD>, </HEAD>, <BODY> y </BODY> respectivamente. El cuerpo contiene toda la informacin de la pgina que ser desplegada por el browser al accederla, mientras que el encabezado cuyo contenido generalmente no es visible, se utiliza principalmente para colocar en l, adems del ttulo de la pgina, scripts y otras etiquetas especiales en las que se consignan datos relacionados con el autor, palabras claves sobre el contenido, descripcin, etc. En un documento HTML se pueden incluir un sinnmero de etiquetas, que controlan la manera como la informacin ser presentada por el explorador. Existen etiquetas para formatear la presentacin del texto y las imgenes, otras indican al sistema cmo responder a eventos generados por el usuario, tales como, hacer clic con el ratn o desplazarlo sobre una imagen, texto o ciertas reas sensibles. Tambin hay etiquetas para organizar la informacin dentro tablas, dividir la pantalla en secciones o ventanas independientes, etc. Una de las ms
importantes es la etiqueta que le permite al usuario navegar entre documentos, simplemente dando clic sobre los denominados vnculos (links), sin importar dnde residen las pginas a las cuales apuntan. El explorador, tambin conocido como navegador o browser, es el software que permite acceder, interpretar y visualizar documentos HTML ubicados en cualquier sitio cuya direccin es conocida. El navegador interpreta las etiquetas y muestra el documento en pantalla. La principal ventaja del formato HTML es su portabilidad. Es decir, los exploradores son capaces de interpretar y mostrar la informacin contenida en una pgina web, independientemente de la plataforma en que se usen (IBM, MAC, UNIX, LINUX, etc.). El presente mdulo no pretende hacer una explicacin exhaustiva del lenguaje HTML ni de ninguna herramienta de edicin grfica. Aqu se tratarn nicamente, aquellos aspectos bsicos que le permitan al lector desarrollar pginas sencillas que funcionen de acuerdo a lo esperado, sin importar la versin y la casa productora del software del navegador ni la plataforma de trabajo. QU SE NECESITA PARA CREAR PGINAS WEB? Dado que las pginas Web son simples documentos de texto plano, lo nico que se requiere para su creacin es un editor de texto. Aunque existen muchas y potentes herramientas para la creacin y edicin grfica de documentos HTML, el Block de Notas (NotePad), el editor (EDIT) de DOS, o cualquier otro editor de texto sirven bien para estos propsitos. Mientras que para visualizar documentos HTML, debemos disponer de un explorador como Netscape Navigator , Mozilla Firefox o Microsoft Internet Explorer , que son los ms populares en el mercado. LA PRIMER PGINA Para crear sta y todas las pginas propuestas, se utilizar el Block de Notas de Microsoft (notepad). bralo y escriba en l el siguiente texto: <HTML> <HEAD> <TITLE>Mi primera pgina</TITLE> </HEAD> <BODY> HOLA A TODOS! STA ES MI PRIMERA PGINA WEB </BODY> </HTML> HTML no es un lenguaje sensible a las maysculas, lo que significa que cualquier etiqueta puede ser escrita en maysculas, minsculas o una combinacin de ellas. Por ejemplo, escribir <HTML> tendr el mismo efecto que escribir <html> o <Html>. De igual forma, no es necesario utilizar una lnea para cada etiqueta, ni conservar la sangra y formato propuestos en los ejemplos de ste mdulo. Lo anterior se hace para facilitar la lectura, comprensin y edicin de
los archivos, adems de ser una prctica casi obligada entre los buenos desarrolladores. El cdigo anterior pudo haberse escrito de la siguiente manera, y el resultado obtenido seguir siendo el mismo: <html><HEAD><TITLE>Mi primera pgina</title></HEAD><BODY> HOLA A TODOS! STA ES MI PRIMERA PGINA WEB</BODY> </HTML> Guarde el archivo con el nombre PrimeraPagina.html en un directorio cualquiera, por ejemplo, C:/CursoHTML/, asegurndose de colocarle la extensin .html. Abra en el explorador el archivo que acaba de crear y si todo va bien, obtendr una pgina similar a la siguiente:
ETIQUETAS PARA TEXTO Las etiquetas de texto como su nombre lo indica, permiten cambiar los atributos y la manera como el texto se ver dentro de la pgina. Se puede afectar todo un prrafo, una lnea, una palabra o caracteres individuales simplemente encerrndolos dentro de las etiquetas apropiadas. Algunos atributos del texto pueden ser controlados por diferentes etiquetas, obteniendo resultados similares. ETIQUETA <HX> </HX> Esta etiqueta, conocida como etiqueta de encabezado (heading), es utilizada con frecuencia para escribir ttulos y subttulos, dado que permite mostrar texto en negrillas con seis tamaos diferentes, dependiendo del valor asignado al atributo X. Para ver su funcionalidad, escriba las siguientes lneas en un nuevo archivo: <HTML> <HEAD> <TITLE> Encabezados</TITLE> </HEAD> <BODY> <H1>Este texto tiene el tamao que le da la etiqueta H1</H1> <H2>Este texto tiene el tamao que le da la etiqueta H2</H2> <H3>Este texto tiene el tamao que le da la etiqueta H3</H3>
<H4>Este texto tiene el tamao que le da la etiqueta H4</H4> <H5>Este texto tiene el tamao que le da la etiqueta H5</H5> <H6>Este texto tiene el tamao que le da la etiqueta H6</H6> </BODY> </HTML> Una vez guardado el archivo, bralo en el explorador y observe los resultados. La etiqueta <HX> tiene otro atributo que permite controlar la alineacin del texto. ste se puede alinear al centro (align="center"), a la derecha (align="right"), a la izquierda, que es la alineacin que toma por defecto cuando el atributo align es omitido, o justificado (align="justify"). Por ejemplo, <H1 align=center>Texto </H1> mostrar la palabra Texto alineada al centro de la pgina, mientras que <H1 align=right>Texto </H1> alinear Texto a la derecha y <H1>Texto </H1> presentar Texto alineada a la izquierda. Lo mismo ocurrir si se comete un error al escribir el valor del atributo align. Veamos un par de ejemplos: <H1 align=centre>Este texto no se alinear al centro </H1> <H1 aling=right>Este tampoco se alinear a la derecha</H1> En general, se puede afirmar que cuando la sintaxis de una etiqueta no es la correcta, el navegador no generar error o advertencia alguna al respecto, ni dejar de mostrar la pgina, simplemente los resultados no sern los esperados. ETIQUETA <FONT> </FONT> Esta etiqueta permite controlar tres atributos del texto que se encuentra encerrado entre ellas: su tamao (SIZE), su color (COLOR) y el tipo de fuente (FACE). Por ejemplo, las siguientes lneas escritas dentro del cuerpo de un nuevo archivo, mostrarn texto con cuatro tamaos de fuente diferentes: Texto con fuente tamao normal <FONT SIZE="+1">Texto con fuente tamao + 1</FONT> <FONT SIZE="+2">Texto con fuente tamao + 2</FONT> <FONT SIZE="-1">Texto con fuente tamao - 1</FONT> <FONT SIZE="-2">Texto con fuente tamao - 2</FONT> La sintaxis completa de la etiqueta <FONT> es la siguiente: <FONT SIZE="X" fuente">Texto</FONT> COLOR="color" FACE="Nombre de la
Donde X corresponde como ya se vi, al tamao de la fuente que admite valores positivos y negativos. El atributo color puede ser un valor hexadecimal o el nombre en ingls de un color especfico. Aunque en teora se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada Paleta Segura. El uso de cualquiera de esos colores, garantiza que las pginas podrn ser vistas tal
como fueron diseadas, aun cuando se utilice para su visualizacin un monitor con la configuracin ms pobre. La tabla siguiente muestra los valores hexadecimales (cdigos) y nombres de los 16 colores mencionados. PALETA SEGURA Cdigo Nombre Color #ffffff White #000000 Black #ff0000 Red #00ff00 Lime #0000ff Blue #ffff80 Yellow #c0c0c0 Silver #808080 Gray #800000 Maroon #800080 Purple #ff00ff Fuchsia #008000 Green #808000 Olive #000080 Navy #008080 Teal #00ffff Aqua Finalmente, Nombre de la fuente es el atributo correspondiente a los nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvetica, Times New Roman, Arial Black, Chalesworth, etc. Como ejemplo, se propone escribir las siguientes lneas dentro del cuerpo de una nueva pgina: <FONT SIZE="+1" COLOR="maroon" FACE="Comic Sans MS">TEXTO</FONT> <FONT SIZE="+2" COLOR="#0000ff" FACE="Tahoma">TEXTO</FONT> <FONT SIZE="+2" COLOR="Purple" FACE="Stencil">TEXTO</FONT> <FONT SIZE="+2" COLOR="#ff00ff" FACE="Arial">TEXTO</FONT> cuyo resultado ser similar al de la siguiente grfica:
ETIQUETA <PRE> </PRE> HTML slo reconoce y muestra un espacio en blanco entre palabras, aunque se hayan escrito dos o ms. Tampoco reconocer tabuladores o retornos de carro. Es decir, s dentro del cuerpo de un archivo HTML se escribe el siguiente texto: <BODY> Este texto tiene varios espacios y retornos de carro </BODY> al abrir la pgina en el explorador se obtendr:
S se quiere que el texto se vea en la pgina tal como fue escrito, ste debe encerrarse dentro de las etiquetas <PRE> y </PRE> (preformated), que forzarn al explorador a mostrar todos los espacios, tabuladores y retornos de carro que encuentre. ETIQUETA <BR> y <P> La etiqueta <BR> permite forzar un salto de lnea dentro de un texto. Observe que esta etiqueta no se cierra con </BR>, razn por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciar un nuevo prrafo dejando una lnea en blanco, si por el contrario se cierra con </P> permite alinear el nuevo prrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parmetro ALIGN. A continuacin se muestran algunos ejemplos: Ejemplo Resultado Texto con<BR> salto de lnea Texto con salto de lnea En este ejemplo iniciaremos aqu <P> un nuevo prrafo En este ejemplo iniciaremos aqu un nuevo prrafo <P ALIGN=right> alineado a la derecha</P> alineado a la derecha <P ALIGN=left>alineado a la izquierda</P> alineado a la izquierda <P ALIGN=center>alineado al centro</P> Alineado al centro
ETIQUETA <HR > Esta etiqueta abierta, dibuja una lnea horizontal (Horizontal Rule), con alineacin, tamao y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes lneas: Lnea centrada, de tamao 10 puntos y ocupando el 30% de la pgina <HR ALIGN=CENTER SIZE= 10 WIDTH= 30%> Lnea alineada a la izquierda, de tamao 5 puntos y ocupando la mitad de la pgina <HR ALIGN=left SIZE= 5 WIDTH= 50%> Lnea alineada a la derecha, de tamao 20 puntos y ocupando la mitad de la pgina <HR ALIGN=right SIZE= 20 WIDTH= 50%> Lnea sencilla que ocupar el 90% de la pgina <HR> OTRAS ETIQUETAS PARA TEXTO La siguiente tabla muestra otras etiquetas muy tiles a la hora de trabajar con texto y los efectos que se conseguirn: Ejemplo Efecto Resultado <CENTER>Texto</CENTER> Texto centrado Texto <B>Texto</B> Texto en negrilla Texto <I> Texto </I> Texto en itlica Texto <U> Texto </U> Texto subrayado Texto Texto <SUP>Texto</SUP> Texto en superndices TextoTexto Texto <SUB>Texto</SUB> Texto en subndices TextoTexto <S> Texto </S> Texto tachado Texto COMENTARIOS En HTML, como en cualquier otro lenguaje existe una forma de escribir comentarios dentro del cdigo. Todo lo escrito dentro de los signos  ser ignorado por el navegador sin que se muestre cuando la pgina sea visualizada. CARACTERES ESPECIALES Existen una serie de signos que aunque estn disponibles en el teclado, pertenecen a un conjunto especfico de caracteres propios del idioma para el cual fue configurado el computador. Es as como, una pgina escrita por un hispano parlante, que probablemente utiliza el conjunto de caracteres de Europa Occidental, denominado Latin-1 (ISO 8859-1), sea visualizada de manera diferente por un usuario ubicado en un pas de Asia o Europa Oriental. Las vocales acentuadas, la letra ee, el signo del Euro y otros caracteres especiales deben sustituirse por ciertos cdigos, para que su visualizacin sea la correcta, sin importar el conjunto de caracteres predefinido en el navegador.
Por ejemplo, la letra ee debe ser reemplazada por ñ, de tal forma que la palabra ao se escribe dentro de una pgina Web de la siguiente manera: año La tabla siguiente muestra algunos de los caracteres especiales ms utilizados, y su correspondiente cdigo:
Antes de realizar el primer ejercicio, es importante anotar que el lenguaje HTML soporta el anidamiento de etiquetas. Si fuera necesario por ejemplo, exhibir en una pgina la frase "MDULO DE HTML" subrayada, en negrilla, con fuente "VERDANA" y de color azul, bastar con escribir la siguiente lnea dentro del cuerpo del archivo: <FONT SIZE="6" COLOR="#0000ff" FACE="Verdana"> <U><B>MDULO DE HTML</B></U></FONT> Lo anterior significa que un trozo de texto puede estar afectado simultneamente por varias etiquetas. Lo nico que se debe tener en cuenta a la hora de anidarlas es que la primera etiqueta en ser abierta debe ser la ltima en cerrarse.
LA ETIQUETA <BODY> Hasta ahora se ha trabajado con pginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores que HTML toma por defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendr la pgina. La siguiente es la sintaxis completa de esta etiqueta: <BODY BACKGROUND = "nombre_imagen" BGCOLOR = "color_fondo" TEXT = "color_texto" LINK = "color_enlace" VLINK = "color_enlace_V" ALINK = " color_enlace_A"> </BODY> nombre_imagen se refiere al nombre, o mejor la ubicacin del archivo de una imagen que se quiere aparezca como fondo de la pgina, color_fondo, color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a los cdigos o los nombres de los colores para el fondo de la pgina, el texto de la informacin, el texto de los enlaces no visitados, el texto de los enlaces visitados y el texto de los enlaces activos respectivamente. El manejo de estos tres ltimos se ver ms adelante en el captulo correspondiente a enlaces. El siguiente ejemplo desplegar una pgina con fondo negro (black) y texto de color lima (#00ff00): <HTML> <HEAD> <TITLE>Cuerpo</TITLE> </HEAD> <BODY BGCOLOR=black TEXT=#00ff00> <H3>ESTA PGINA TENDR FONDO NEGRO Y TEXTO LIMA</H3> </BODY> </HTML>
UBICACIN DE ARCHIVOS Antes de comenzar a trabajar con imgenes, es indispensable entender el concepto de la ubicacin relativa de archivos. Existen en HTML algunos atributos que indican la ruta o el camino donde se encuentran ubicados ciertos elementos y no un valor simple como un nmero o el cdigo de un color. Tal es
el caso del atributo background cuyo valor hace referencia a la ubicacin y el nombre de una imagen que se quiere aparezca como fondo en la pgina (BACKGROUND=ruta). Cualquiera que sea el sistema operativo que se utilice, los programas, aplicaciones, archivos y documentos se guardan fsicamente en una unidad de almacenamiento, dentro de una jerarqua de directorios y subdirectorios conocida como Sistema de Archivos. Un directorio puede contener archivos y otros directorios denominados subdirectorios. Dependiendo de la ubicacin de las pginas y las imgenes u otros objetos dentro del sistema de archivos, el valor o ruta de los atributos, cambia. Existen tres posibilidades (ver grfica de Ejemplo de sistema de Archivos): 1. la pgina y la imagen se encuentra dentro del mismo subdirectorio (ejemplos: Pgina1 e Imagen1, Pgina 2 e Imagen 2 y Pgina 3 e Imagen 3). 2. la imagen se encuentra en un subdirectorio ubicado en el mismo nivel o por debajo del subdirectorio que contiene la pgina (ejemplos: Pgina 3 e Imagen 1, Pgina 3 e Imagen 2 y Pgina 1 e Imagen 2). 3. la imagen se encuentra en un subdirectorio arriba del que contiene la pgina (ejemplos: Pgina 2 e Imagen 1, Pgina 2 e Imagen3 y Pgina 1 e Imagen 3).
El ejemplo ms sencillo se tiene cuando, tanto la imagen de fondo como la pgina residen en el mismo directorio o subdirectorio. En este caso la ruta se reduce al nombre de la imagen: <BODY BACKGROUND=nombre_imagen> Si la imagen de fondo reside en un subdirectorio al mismo nivel o por debajo del directorio que contiene la pgina, la ruta adems del nombre de la imagen debe estar compuesta por el o los nombres de los subdirectorios que la contienen, separados por un slash (/). Si por ejemplo, se desea que Imagen 2 aparezca como fondo de la Pgina 3, la ruta ser: D2/D3/Imagen 2, con lo que la etiqueta BODY ser similar a: <BODY BACKGROUND=D2/D3/Imagen 2>
La ltima posibilidad que existe es que la imagen se encuentre ubicada uno o ms niveles por encima del directorio que contiene la pgina. En este caso la ruta estar compuesta por el nombre de la imagen, precedida por un conjunto de dos puntos y un slash (../) por cada nivel que sea necesario subir para alcanzar el directorio donde est ubicada la imagen. Con los siguientes ejemplos se ilustra esta situacin: La Imagen 1, ubicada un nivel por encima debe aparecer como fondo de la Pagina 2 . La ruta ser: ../Imagen 1 y la etiqueta BODY debe ser: <BODY BACKGROUND=../Imagen 1> Ahora se quiere que Imagen 3 sea el fondo de la Pagina 2: <BODY BACKGROUND=../../Imagen 3> Una prctica comn y muy til, consiste en crear un subdirectorio ubicado al mismo nivel de las pginas, que contendr todas las imgenes. De esta manera, la siguiente pgina tendr como fondo una imagen llamada logoPostgres.gif, que se encuentra ubicada en el subdirectorio Imgenes: <HTML> <HEAD> <TITLE>Cuerpo1</TITLE> </HEAD> <BODY BACKGROUND=Imagenes/logoPostgres.gif> </BODY> </HTML>
Es importante mencionar que HTML soporta slo ciertos formatos de imagen. Bsicamente se pueden mostrar imgenes creadas en formato GIF y JPG. Las ltimas versiones de navegadores soportan el formato PNG de MACROMEDIA. LISTAS En ocasiones es necesario presentar informacin de manera ordenada mediante listas con vietas o listas numeradas. Con HTML se pueden crear tres de estos tipos de listados: listas ordenadas o numeradas, listas con vietas o listas de definicin, cada una de ellas con sus variaciones. LISTA ORDENADA <OL> Considere el caso en el que debe presentar la lista numerada de algunas de las dependencias de la empresa donde trabaja, comenzando con un nmero en particular: 4. Direccin de Informtica 5. Planeacin 6. Vicepresidencia Financiera 7. Comunicaciones El listado anterior se consigue en HTML mediante el uso de las etiquetas <OL> (Ordered List) y <LI> (List Item): <OL TYPE ="1" START ="4"> <LI>Direccin de Informtica <LI>Planeacin <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL> En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista ser numrica (el nmero entre comillas puede ser cualquier entero y el resultado ser el mismo), mientras que el atributo START ="4" hace que el primer elemento del listado est precedido por el nmero 4, el segundo por el nmero 5 y as sucesivamente. S no se incluye ninguno de los dos atributos anteriores, el explorador desplegar la misma lista pero comenzando el listado en 1. S se quiere presentar el mismo listado pero de la siguiente manera: A. Direccin de Informtica B. Planeacin C. Vicepresidencia Financiera D. Comunicaciones Bastar con cambiar el 1 del atributo TYPE por una A y el 4 del atributo START por un 1, o simplemente omitir ste ltimo:
<OL TYPE = "A" START ="1"> <LI>Direccin de Informtica <LI>Planeacin <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL> EJERCICIO PROPUESTO Cambie la A mayscula del tributo TYPE por una i, luego por una I y finalmente por una a y observe los resultados. LISTA CON VIETAS <UL> S en lugar de una letra o un nmero precediendo los tems del listado, lo que se quiere es que aparezca una vieta, se debe entonces utilizar la etiqueta <UL> (Unorderd List) de la siguiente manera: <UL TYPE = "circle"> <LI> tem 1 <LI> tem 2 <LI> tem 3 <LI> tem 4 </UL> Lo que producir una lista similar a: o tem 1 o tem 2 o tem 3 o tem 4 La etiqueta <UL> nicamente tiene el atributo TYPE, que se refiere al tipo de vieta que presentar. Pruebe omitiendo este atributo o cambiando circle por disc o por square. LISTA DE DEFINICIN <DL> Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras con su correspondiente definicin. Se utiliza tpicamente en la construccin de glosarios. Considere por ejemplo, la siguiente lista de trminos que definen las funciones de algunas dependencias de la empresa: PLANEACIN: Encargada de ejecutar y revisar los planes de inversin. INFORMTICA: Encargada de disear, implementar y ejecutar los planes de desarrollo informtico en la empresa. RECURSOS HUMANOS: Encargada de los asuntos relacionados con el recurso humano.
El listado anterior se comienza y termina con las etiquetas <DL> y </DL>. Cada uno de los trminos a definir se precede con la etiqueta <DT>, mientras que a la definicin en s, se le antepone la etiqueta <DD>: <DL> <DT>PLANEACIN: <DD>Encargada de ejecutar y revisar los planes de inversin. <DT>INFORMTICA: <DD>Encargada de disear, implementar y ejecutar los planes de desarrollo informtico en la empresa. <DT>RECURSOS HUMANOS. <DD>Encargada de los asuntos relacionados con el recurso humano. Ejercicios:
TABLAS
Una tabla est compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar informacin de manera organizada. En una celda se puede incluir indistintamente texto, imgenes o cualquier otro elemento soportado por HTML. Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos principales son: WIDTH ="95%" Ancho de la tabla con respecto al tamao de la pgina. En este caso la tabla ocupar el 95%; o WIDTH ="600", con lo que la tabla tendr un ancho de 600 pxeles. BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla. CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido. BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.
En la etiqueta <TABLE> se definen las caractersticas principales de la tabla, pero no se dice de cuntas filas y columnas estar compuesta ni cul ser su contenido. En realidad existen tres etiquetas adicionales, que colocadas adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el nmero de filas y columnas, adems de otras caractersticas: <TR> Se utiliza para definir una nueva fila. <TD> Permite agregar una celda o columna dentro de una fila <TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella ser escrito en negrilla. Lo anterior significa que una tabla en HTML tendr tantas filas como etiquetas <TR> contenga y una fila estar compuesta por un nmero de celdas igual al de etiquetas <TD> o <TH> que la misma tenga. Las siguientes lneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas: <TABLE BORDER=1> <TR> <TH>Primera Celda</TH> <TH>Segunda Celda</TH> </TR> <TR> <TD>Tercera Celda</TD> <TD>Cuarta Celda</TD> </TR> </TABLE> El resultado obtenido ser similar a: Primera Celda Segunda Celda Tercera Celda Cuarta Celda Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=color), la alineacin del texto o de la imagen dentro de la celda (ALIGN=alineacin), y que funcionan de manera idntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el nmero de columnas o de filas que ocupar una celda en particular. Suponga que se debe crear una tabla similar a la siguiente: TTULO DE LA TABLA Celda 1 Celda 2 Observe que la tabla est compuesta por dos filas y dos columnas, y que la celda del ttulo ocupa dos columnas. Cuando este es el caso, es decir que una celda est distribuida en dos o ms columnas o filas, se utiliza para su definicin el atributo COLSPAN=X o ROWSPAN=X respectivamente. X obviamente corresponde al nmero de columnas o filas sobre las que se distribuir la celda.
Para crear la tabla que se muestra arriba, se debe escribir: <TABLE BORDER=1> <TR> <TH COLSPAN=2>TTULO DE LA TABLA</TH> </TR> <TR> <TD>Celda 1</TD> <TD>Celda 2</TD> </TR> </TABLE> Y si lo que se desea es crear una tabla como la siguiente: Celda 1 TTULO DE LA TABLA Celda 2 Se debe escribir: <TABLE BORDER=1> <TR> <TH ROWSPAN=2>TTULO DE LA TABLA</TH> <TD>Celda 1</TD> </TR> <TR> <TD>Celda 2</TD> </TR> </TABLE> EJERCICIO PROPUESTO Cree una pgina que contenga una tabla con un pequeo inventario de productos, similar a la que se muestra a continuacin.
IMGENES Las pginas Web adems de mostrar texto, son capaces de desplegar imgenes que han de ser creadas en cualquiera de los formatos aceptados: GIF, JPG o PNG. Una imagen con extensin BMP, CDR, PCX o cualquier otro
formato diferente no ser exhibida en el explorador y en su lugar se mostrar uno de los siguientes iconos, dependiendo del navegador que se tenga: Una imagen puede ubicarse en cualquier parte de la pgina, incluso puede ocupar el lugar de un carcter. Para insertar imgenes lo nico que se necesita conocer es la ruta y el nombre del archivo que la contiene. La etiqueta <IMG> junto con su atributo SRC ="ruta" permiten mostrar una imagen: <IMG SRC ="logo.gif"> El ejemplo anterior mostrar la imagen logo.gif ubicada en el mismo directorio donde reside la pgina web. Si por el contrario la imagen se encuentra en otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La ruta tiene las mismas caractersticas ya definidas en el aparte dedicado a Ubicacin de Archivos de ste mdulo. Por ejemplo, SRC=Imagenes/logo.gif mostrar la imagen logo.gif, ubicada bajo el subdirectorio Imagenes. La etiqueta <IMG> cuenta adems de SRC con otros atributos que controlan la manera como se desplegarn las imgenes: ALT ="Texto alternativo" Permite definir un texto que aparecer en caso de que la imagen por alguna razn no pueda ser mostrada, o cuando se desplaza el puntero del ratn sobre la imagen ya desplegada. HEIGHT = XX y WIDTH = XX Medida en pxeles del alto y ancho de la imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que de esta manera el navegador conozca el tamao de la imagen antes de descargarla. Con ellos podemos controlar adems el tamao original de una imagen. Si por ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 pxeles, sea mostrada a la mitad de su tamao en el navegador, basta con escribir una de las tres lneas siguientes, siendo ms recomendable la tercera: <IMG SRC ="Imagenes/logo.gif" HEIGHT = 60 > <IMG SRC ="Imagenes/logo.gif" WIDTH = 60 > <IMG SRC ="Imagenes/logo.gif" WIDTH = 60 HEIGHT = 60 > S se desea cambiar el tamao de la imagen de manera proporcional, solo es necesario incluir uno de los dos atributos. ALIGN = Alineacin de texto Permite especificar la alineacin respecto de la imagen de un texto que se escriba inmediatamente despus de la etiqueta <IMG>. El texto en mencin, puede alinearse arriba, utilizando TOP como valor; en el centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma, si el valor para ALIGN es BOTTOM. Adems, el atributo ALIGN puede recibir el valor LEFT, con lo que la imagen se colocar a la izquierda del texto, o RIGHT, caso en el que la imagen aparecer a la derecha. BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la imagen. Si se omite este atributo, simplemente no se dibujar ningn borde.
Para comprender mejor el comportamiento de las imgenes, copie en un directorio denominado Imgenes el siguiente logotipo y luego escriba en un archivo las lneas que a continuacin se muestran:
logo.gif <IMG SRC ="Imagenes/logo.gif" ALT ="Logo tamao 180 x 180 pxeles" WIDTH = 180 ALIGN = top BORDER=5>Texto alineado arriba de la imagen <P> <IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamao original" ALIGN = middle BORDER=3>Texto alineado en la mitad de la imagen <P> <IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamao 60 x 60 pxeles" HEIGHT = 80 ALIGN= Bottom >Texto alineado abajo de la imagen <P> <IMG SRC ="Noexiste.gif" ALT ="No existe la imagen" > Texto VNCULOS Como ya se mencion, una de las etiquetas ms importantes de HTML es la que permite, a travs de vnculos o enlaces, navegar por las diferentes pginas y sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar especfico en la misma pgina, que abran otra pgina o un sitio nuevo e inclusive utilizar un vnculo para enviar un correo electrnico a una direccin dada o permitir que el usuario descargue y ejecute, o guarde archivos ubicados en una localizacin remota. Un vnculo puede ser colocado sobre una zona de texto o sobre una imagen, lo que lo convierte en un elemento sensible. Es decir, el elemento responder a acciones tales como hacer clic, doble clic o desplazar el puntero del ratn sobre l. Si el enlace se coloca sobre una franja de texto, sta aparecer subrayada y con diferente color; si es una imagen la que lo soporta, HTML entonces le colocar un borde del color definido para el atributo LINK de la etiqueta BODY. VNCULOS DENTRO DE LA PGINA Para facilitar la navegacin dentro de una pgina cuando su contenido es demasiado largo y al desplegarla ocupa ms de una pantalla, se pueden colocar enlaces que lleven al usuario a sitios especficos o predeterminados de la misma. Para esto, se deben utilizar dos atributos de la etiqueta <A>: <A NAME = "nombre">Texto de marca</A> sirve para marcar la zona de nuestra pgina a la cual saltar el explorador cuando demos clic sobre el
enlace definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es la que en realidad contiene el enlace.
EJERCICIO 3
Abra en el editor de texto el archivo Automvil.txt. Con los conocimientos hasta ahora adquiridos realice los cambios necesarios para crear una pgina similar a la siguiente, la cual guardar con el nombre de Automovil.html.
Una vez obtenido el resultado deseado, abra la pgina en el browser y observe que su contenido ocupa ms de una pantalla. Nos interesa colocar enlaces sobre los literales a. El motor y b. La transmisin, de tal forma que al dar clic sobre cualquiera de ellos, el explorador nos lleve a la seccin deseada. Para lograrlo, agregue las siguientes etiquetas en los lugares apropiados:
ENLACES A OTRA PGINA

Para ilustrar el uso de enlaces a otras pginas, se utilizarn Menu.html (creada en el ejercicio 2), Automvil.html y dos pginas nuevas: Computador.html y Telefono.html, que se crearn con los siguientes textos: Computador.txt y Telefono.txt. Las pginas as creadas deben guardarse dentro del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda desde all acceder a cualquiera de las otras tres pginas (Automvil, Computador y Telfono). Para esto se debe editar la pgina Menu.html y agregar los links faltantes: <LI><A HREF="Automovil.html">Automvil</A> <LI><A HREF="Computador.html">Computador</A>
<LI><A HREF="Telefono.html">Telfono</A> En el ejercicio 3, cuando se definieron enlaces a otras secciones dentro de la misma pgina, el atributo HREF contena el nombre de una seccin predefinida, precedida por el signo #. Cuando se quiere crear un enlace a otra pgina que reside dentro del mismo nivel, vale decir dentro del mismo directorio, el atributo HREF debe contener la ruta y el nombre completo de la pgina y su extensin. La ruta cumple con las mismas caractersticas ya explicadas en la seccin dedicada a la ubicacin de archivos. Es importante anotar, que en lo que se refiere a nombres de archivos y pginas, HTML es sensible a las maysculas. Es decir, Telefono.html es diferente a telefono.html. Lo anterior no se aplica a las etiquetas como ya se explic. ENLACES A PGINAS REMOTAS La verdadera potencia del lenguaje HTML consiste en que permite enlazar y acceder pginas Web localizadas en cualquier servidor y punto geogrfico del mundo, para lo cual lo nico que se necesita conocer es su direccin, que constituye el valor (nombre) del atributo HREF. Por ejemplo, la etiqueta para colocar un enlace a mi servidor, cuya direccin es www.masterlinux.org, es: <A HREF ="http://www.masterlinux.org"> IR A MASTERLINUX </A> Los caracteres http se refieren al tipo de servicio o protocolo que presta el servidor, en este caso protocolo de transferencia de hipertexto, en ingls HyperText Transfer Protocol. Aunque existen otros servicios como ftp, telnet, y news, no es del alcance de ste modulo profundizar en ellos. El procedimiento para utilizar una imagen como elemento de enlace es similar al anteriormente explicado. En el siguiente ejemplo, se utilizar la imagen Hormiga.gif como elemento de enlace. <A HREF ="http://www.masterlinux.org"> <IMG SRC ="Hormiga.gif" HEIGHT=100 ALIGN ="left"> </A> ENLACE AL SERVICIO MAIL El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la herramienta de correo electrnico para enviar un mensaje a la direccin definida en el atributo HREF. Este enlace, al igual que los anteriores, puede ser colocado indistintamente sobre imgenes o texto. <A HREF=" mailto:egaitan@masterlinux.org"> Escribanos </A> si desea recibir ms informacin. Al abrir esta pgina en el explorador, la palabra Escribanos aparecer subrayada, y al dar clic sobre ella se desplegar la herramienta de Mail, lista para enviar un mensaje a mi cuenta de correo.
MARCOS O FRAMES Los marcos o FRAMES, son etiquetas o procedimientos especiales de HTML que permiten dividir, lo que aparentemente es una sola pgina, en diferentes zonas o ventanas, independientes unas de las otras. En cada ventana se puede mostrar una pgina diferente. La divisin puede hacerse verticalmente por columnas, de manera horizontal por filas, o una combinacin de ambas. La pgina contenida en cada marco tendr definidas sus propiedades de manera independiente y desde un marco se puede, a travs de enlaces, hacer que se despliegue una pgina cualquiera en otro marco, lo que los hace muy tiles para varios propsitos. Por ejemplo, en una misma ventana se puede definir un marco que contenga el logotipo o banner de la compaa, un segundo marco para desplegar el men de navegacin, y por ltimo un marco que muestre la pgina o documento actual.
La construccin de pginas que contienen marcos se hace de manera similar a la de cualquier documento HTML. La nica diferencia radica en el hecho de que la etiqueta <BODY> es reemplazada por <FRAMESET>, que es la etiqueta que define la estructura de los frames o marcos en los que se dividir la ventana del navegador. Para explicar el uso de <FRAMESET>, y el de otras etiquetas necesarias para la implementacin de frames, se utilizarn cuatro pginas ya creadas: Computador.html, Automovil.html, Telefono.html y Menu.html, y una nueva que servir como pgina de definicin de los marcos, la cual debe guardarse con el nombre de Marcos.html, dentro del mismo directorio de las otras pginas mencionadas. Se crear como ejercicio una pgina dividida verticalmente en dos marcos: en el de la izquierda, ocupando el 20% de la pantalla, aparecer el contenido de lapgina MenuFrames.html; mientras que en el marco de la derecha que ocupar el 80% restante, se desplegar inicialmente la pgina Computador.html o cualquiera de las otras dos, dependiendo de el enlace que se active en el frame de la izquierda. Para este propsito se deben escribir las siguientes lneas:
<HTML> <FRAMESET COLS="20%, 80%"> <FRAME SRC = "MenuFrames.html" NAME ="izquierda"> <FRAME SRC="Computador.html" NAME ="derecha"> </FRAMESET> <NOFRAMES> Lo sentimos, su navegador no soporta FRAMES </NOFRAMES> </HTML> La etiqueta FRAMESET sirve para dos propsitos principales: definir la orientacin de los marcos que puede ser horizontal (ROWS) o vertical (COLS); y el nmero y tamao de cada marco. En el ejemplo, el atributo COLS ="20%, 80%", divide la pantalla en dos marcos verticales, ocupando el primero de ellos a la izquierda, el 20%, y el segundo el 80% del espacio. Para conformar n marcos dentro de una pantalla, el atributo COLS o ROWS debe contener n valores separados por comas. Estos valores pueden ser porcentajes o valores absolutos; en cuyo caso el marco as definido, tendr un espacio igual al del nmero de pxeles indicado. Si se quiere por ejemplo, dividir la pantalla de manera horizontal en cuatro frames, y se necesita que el primero de ellos tenga una altura fija de 40 pxeles, el segundo ocupe el 50% del espacio restante, y los otros dos se dividan el espacio de manera proporcional: <FRAMESET ROWS="40, 50%, 25%, 25%"> Otra forma de definir el tamao de los frames consiste en utilizar el carcter *. En el siguiente ejemplo, una pantalla de 800 pxeles ser dividida en tres marcos verticales: el primero de 400 pxeles (50% de 800), el segundo de 260 (valor absoluto) y el tercero 140 pxeles, correspondiente al espacio restante. <FRAMESET COLS="50%, 260, *"> Las etiquetas <FRAME> definen entre otras cosas el origen de la pgina que contendr y el nombre del marco. En el ejercicio propuesto, se observan dos de nestas etiquetas, en la primera se define el marco denominado izquierda donde sevdesplegar la pgina MenuFrames.html y en el segundo marco de nombre derecha se mostrar la pgina Computador.html. Para que el ejercicio sea completamente funcional, es necesario editar el archivo Menu.html como se indica a continuacin, guardndolo luego como MenuFrames.html: <A HREF = "Computador.html" TARGET = "derecha"> Computador</A> <A REF ="Automovil.html" TARGET ="derecha"> Automovil</A> <A REF ="Telefono.html" TARGET ="derecha"> Telfono</A> El atributo TARGET de la etiqueta <A>, cuyo valor en el ejemplo es derecha, indica en cual de los marcos definidos se debe desplegar la pgina correspondiente a cada uno de los enlaces. Si se omite este atributo, el documento ser mostrado dentro del mismo marco. Otro valor posible para TARGET es blank, con lo que se abrir una nueva ventana en la cual se mostrar la pgina correspondiente al enlace invocado.
La etiqueta <FRAME> tiene otros atributos que permiten controlar el comportamiento de cada marco: <FRAME SRC="xx" NAME="xx" MARGINWIDTH="x" MARGINHEIGHT="y" SCROLLING="z" FRAMEBORDER="w" NORESIZE> Donde: MARGINWIDTH="x" define el valor en pxeles del margen izquierdo y derecho entre el contenido y los bordes del frame. El valor de x debe ser mayor que 1. Si este atributo es omitido, el browser se auto ajustar para hacer el mejor despliegue posible del contenido del marco. MARGINHEIGHT="y" trabaja de manera similar a MARGINWIDTH, pero controla los mrgenes superior e inferior del frame. El atributo SCROLLING="z" soporta tres valores posibles yes, no y auto. Se utiliza para controlar la aparicin o no de las barras de desplazamiento (scrollbars), cuando el contenido del frame excede el rea del mismo. FRAMEBORDER="w" se utiliza para controlar que el browser muestre o no los bordes del marco. En Internet Explorer w debe ser un valor numrico (cero significa sin bordes), mientras que en Netscape Navigator w toma cualquiera de los valores yes o no. Por defecto, el tamao de todos los frames especificados en una pgina puede ser cambiado por el usuario arrastrando los bordes del marco. Si se desea mantener fijo el tamao predefinido de un marco, basta con agregar el atributo NORESIZE dentro de la etiqueta de definicin. Aunque no es muy comn en la actualidad, si el navegador desde donde se accede la pgina no soporta el procedimiento FRAMES, se desplegar en lugar de los marcos definidos, la informacin contenida dentro de las etiquetas <NOFRAMES> y </NOFRAMES>. Dentro de un documento que contiene frames pueden existir varias etiquetas <FRAMESET>, lo que se conoce como anidamiento. Con este procedimiento, un marco puede ser subdividido en otros marcos, para lo cual la etiqueta <FRAME> que define las caractersticas del marco a subdividir se reemplaza por una nueva etiqueta de definicin de frames. En el ejemplo siguiente, la pantalla es dividida inicialmente en dos zonas horizontales, mediante la etiqueta <FRAMESET rows="30%, *">; la etiqueta <FRAMESET cols="25%, *">, divide al segundo marco horizontal en dos nuevos marcos verticales. <HTML> <HEAD> <TITLE>Ejemplo de Frames</TITLE> </HEAD> <FRAMESET ROWS="30%, *"> <FRAME SRC = "banner.htm"> <FRAMESET COLS="25%, *"> <FRAME SRC="menu.html" NAME ="menu"> <FRAME SRC="princ.html" NAME ="princ">
</FRAMESET> </FRAMESET> </HTML> FORMULARIOS Los formularios son por excelencia los elementos utilizados para recolectar informacin de los usuarios que luego es enviada al servidor para ser procesada. Estn constituidos por un conjunto de elementos denominados controles, cuyo contenido puede ser editado o activado por el cliente. Un control es bsicamente un elemento de HTML que pertenece a un tipo y que tiene asociado un nombre y un valor. El envo se hace mediante un controlador de formulario (generalmente un botn). Cuando el usuario, despus de completar un formulario lo enva, en realidad est transmitiendo un conjunto de parejas: nombre del control y valor. Un formulario puede contener adems de controles, imgenes, texto en todos los estilos, tablas, etc., pero nunca puede contener a otro formulario. Para declarar un formulario se utiliza la etiqueta FORM que consta bsicamente de dos atributos: <FORM ACTION ="programa" METHOD ="mtodo"> </FORM> En programa se especifica un servicio o un programa escrito en cualquiera de los lenguajes compatibles (CGI, PERL, PHP, VBSCRIPT, etc.), que se encargar de procesar las variables contenidas en cada uno de los controles incluidos dentro del formulario. Por no ser la programacin del alcance de este mdulo, nicamente se utilizar aqu la accin ACTION ="mailto: direccin de correo", cuya accin ser enviar a la direccin de correo especificada los datos contenidos en los controles. El atributo METHOD soporta dos valores: el mtodo POST y el mtodo GET. El primero de ellos se utiliza cuando se requiere procesamiento externo de los datos del formulario o la introduccin de modificaciones al destino, por ejemplo, escribir en una base de datos. El mtodo GET es ideal para el envo de formularios que no producen ninguna modificacin en el destino, ejemplo una consulta sobre una base de datos. Los controles disponibles en HTML, se pueden clasificar segn su utilidad en cuatro tipos: controles para texto, opciones, mens y botones. CONTROLES PARA TEXTO Texto de una sola lnea Para especificar dentro de un formulario un control de texto de una sola lnea que contendr cadenas de texto, se utiliza la etiqueta: <INPUT TYPE ="text" NAME ="Nombre" SIZE ="60" MAXLENGTH ="80" VALUE = "Texto que aparecer cuando se abra la pgina">
Con el atributo NAME ="Nombre" se bautiza el campo para distinguirlo de otros campos del mismo tipo. El texto que introduzca el usuario, quedar asociado a la variable Nombre. El atributo SIZE ="60" especifica la longitud del campo en caracteres que se visualizar en la pantalla (para el ejemplo 60), mientras que MAXLENGTH ="80" indica el nmero mximo de caracteres (en este caso 80), que el usuario podr introducir. VALUE = "Texto que aparecer cuando se abra la pgina" define el valor inicial del control, que aparecer cuando la pgina que contiene el formulario sea abierta. Este atributo puede dejarse en blanco, especificando como valor " ", o simplemente omitiendo el atributo. Otro control para texto de una sola lnea es el conocido como control de tipo password. Funciona y se define de manera similar al anterior, con la diferencia de que los caracteres introducidos dentro del control no sern visibles para el usuario, en su lugar se mostrar un conjunto de asteriscos. rea de texto Este control se utiliza cuando se sabe de antemano que los datos ingresados por el usuario ocuparn ms de una lnea. Para construir uno de estos campos se debe especificar adems del nombre de la variable a la cual se asociar el texto, el nmero de filas y columnas que se visualizarn en la pantalla. La sintaxis de esta etiqueta es como sigue: <TEXTAREA NAME ="nombre" ROWS = "2" COLS ="60"> Texto </TEXTAREA>
La etiqueta anterior mostrar sobre la pgina un campo de dos lneas de 60 caracteres de ancho. Lo anterior no significa que el usuario no pueda introducir texto que sobrepase una de estas dos dimensiones. Cuando esto ocurre, simplemente se activar el scrollbar vertical u horizontal segn sea el caso. La variable nombre contendr el texto que el usuario introduzca. Observe que esta etiqueta debe cerrarse con </TEXTAREA>, y que los caracteres contenidos dentro de las dos etiquetas, en el ejemplo Texto, constituyen el valor inicial. CONTROLES DE OPCIN Radio Botones Este tipo de control se utiliza cuando se quiere que el usuario escoja una y solo una de entre varias opciones disponibles. Por ejemplo, si se est realizando una encuesta y es necesario conocer el estado civil del encuestado, se puede colocar dentro del formulario algo similar a:
para lograrlo debemos escribir las siguientes lneas: <PRE> <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Soltero"> Soltero(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Casado"> Casado(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="U.Libre" CHECKED> U. Libre <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Viudo"> Viudo(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Divorciado"> Divorciado(a) </PRE> En el ejemplo, la variable EstadoCivil tendr como valor U.Libre que es la que se encuentra seleccionada. Si se quiere que una de las opciones aparezca seleccionada por defecto, se debe agregar a la etiqueta que define tal opcin el atributo CHECKED. Casilla de verificacin Al contrario de los radio botones, la casilla de verificacin permite seleccionar ms de una opcin. La sintaxis de su etiqueta es como sigue: <INPUT TYPE ="checkbox" NAME ="nombre" VALUE ="valor" CHECKED> Si el usuario selecciona esta casilla, la variable nombre contendr el texto especificado en el atributo valor. MEN DESPLEGABLE Esta es otra forma de permitir al usuario escoger varias disponibles, ocupando dentro de la pgina necesitara si se utilizaran radio botones. La desplegada lucira como se muestra ms adelante siguientes lneas: <SELECT NAME="EstadoCivil"> <OPTION>Soltero(a) <OPTION>Casado(a) <OPTION SELECTED>U. Libre <OPTION>Viudo(a) <OPTION>Divorciado(a) </SELECT> Una variante a este tipo de control se consigue agregando el atributo MULTIPLE a la etiqueta SELECT, lo que permite seleccionar ms de un valor entre las opciones posibles: una nica opcin dentro de un rea menor a la que se encuesta del estado civil y se construye mediante las
<SELECT NAME="EstadoCivil" MULTIPLE> BOTNES Aunque se pueden implementar otros usos, los botones son controladores que se utilizan bsicamente para: enviar (SUBMIT) el formulario o para reinicializar o borrar (RESET) los campos del mismo. El botn de tipo SUBMIT, ejecutar el programa especificado en el atributo ACTION ="programa" de la etiqueta FORM, cuando el usuario de clic sobre l. La forma de construir botones SUBMIT y RESET es como sigue: Etiqueta <INPUT TYPE ="submit" VALUE ="Enviar"> <INPUT TYPE ="reset" VALUE ="Borrar"> En ambos casos, el valor contenido en el atributo VALUE, corresponde al texto que aparecer sobre el botn. INTRODUCCIN JavaScript es un lenguaje de guiones (scripts), orientado a objetos implementado por Netscape para la creacin de aplicaciones que corren sobre Internet. Constituye una de las mltiples formas que existen para extender las capacidades del lenguaje HTML. Con JavaScript se pueden crear pginas web dinmicas que procesan las entradas del usuario antes de ser enviadas al servidor e insertar objetos en el lado cliente que responden a ciertos eventos del usuario. Aunque existen algunas similitudes de sintaxis con otros lenguajes de programacin, es importante hacer algunas distinciones. JavaScript es un lenguaje interpretado que corre en el lado cliente lo que lo hace una herramienta especial para mejorar el desempeo de las pginas web mediante la implementacin de funciones para la verificacin de datos de formularios, creacin de animaciones sencillas, interaccin con el usuario a travs de ventanas, efectos sobre la barra de estado del browser, etc. OBJETIVO El objeto del presente mdulo no es otro que aprender a utilizar algunas de las prestaciones de JavaScript que permitan interactuar con el usuario, que est por ejemplo, diligenciando un formulario que posteriormente enviar al servidor de aplicaciones. La idea consiste en chequear a travs de funciones, las entradas de cada uno de los campos del formulario para detectar errores antes de que los datos viajen al sitio donde sern procesados, lo que redunda en ahorro de tiempo de procesamiento en el servidor y disminuye en cierta medida el trfico en la red. Imagine por ejemplo, que el usuario de su aplicacin est diligenciando un pedido por Internet a travs de un formulario que requiere indicar la cantidad de
Botn
elementos solicitados, y en lugar de un nmero, el usuario introduce un carcter, una cadena de texto, un nmero negativo o una cantidad que excede el mximo permitido. Cmo controlar este tipo de situaciones e indicarle a nuestro cliente que ha cometido un error que debe corregir antes de que enve su solicitud?. PRERREQUISITOS Se supone que el lector est en capacidad de elaborar pginas web, utilizando cualquiera de las herramientas que existen para tal efecto. Se consiguen muchas en el mercado. Tambin son deseables aunque no indispensables algunos conocimientos sobre programacin. EL PRIMER SCRIPT Los scripts de JavaScript no son ms que lneas de cdigo incrustadas dentro de etiquetas HTML especiales. Los scripts se pueden escribir prcticamente en cualquier lugar de la pgina web que se est desarrollando o en un archivo de texto plano independiente que los contenga, y, se pueden escribir tantos scripts como sea necesario. A lo largo del mdulo, utilizar el color rojo para resaltar el cdigo de JavaScript y el azul para las etiquetas normales de HTML. <HTML> <HEAD> <script language="JavaScript1.2"> document.write("HOLA MUNDO"); </script> </HEAD> <BODY> <BR> <script language="JavaScript1.2"> document.write("HOLA DE NUEVO"); </script> </BODY> </HTML> El anterior ejemplo que contiene dos scripts, no pretende sino ilustrar la sintaxis de JavaScript y la manera de ubicar el cdigo dentro de la pgina web. Se sugiere al lector crear pginas con el cdigo de todos los ejemplos desarrollados aqu para comprender mejor el funcionamiento de JavaScript. Un script se encierra entre las etiquetas <script> y </script>, dentro de las cuales se escribe el cdigo; en este caso una sola instruccin document.write ("HOLA MUNDO"); en el primer script y document.write ("HOLA DE NUEVO"); en el segundo, terminadas con ;. Con el atributo language=JavaScript1.2 se establece la versin del lenguaje de JavaScript que soporta el navegador. Dependiendo del browser que se tenga, se puede utilizar una u otra versin del lenguaje:
Versin del lenguaje JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3
Netscape Navigator Navigator 2.0 Navigator 3.0 Navigator 4.0 4.05 Navigator 4.06 o superior
La instruccin document.write es la funcin o mtodo del objeto document, que permite escribir cadenas de caracteres o resultados de otras funciones sobre el cuerpo de la pgina. Se puede decir que document.write es la funcin imprimir de JavaScript y que el cuerpo de la pgina es la salida estndar. Ms adelante en el captulo dedicado a objetos se explicar con detalles su funcionalidad. Como ya se mencion, otra forma de ubicar scripts, consiste en escribirlos dentro de un archivo independiente de la pgina WEB. El archivo que contiene el cdigo del script puede tener cualquier nombre y puede ser escrito con cualquier editor de texto; la nica restriccin que debe tenerse en cuenta es guardar el archivo con la extensin .js. Las siguientes lneas muestran el cdigo HTML de la pgina anterior, escribiendo el primer script en un archivo denominado miscript.js. Cdigo HTML de la Pgina web <HTML> <HEAD> <script language="JavaScript1.2" SRC="miscript.js"> </script> </HEAD> <BODY> <BR> <script language="JavaScript1.2"> document.write("HOLA DE NUEVO"); </script> </BODY> </HTML> Archivo miscript.js document.write(HOLA MUNDO); En el listado anterior, el atributo SRC de la etiqueta script, le indica al browser el camino (path) del archivo que contiene el cdigo del script. Son aplicables aqu las normas sobre ubicacin de archivos vistas en el mdulo de HTML. Esta forma de escribir los scripts o funciones es particularmente til cuando un mismo script es utilizado en diferentes pginas del sitio o cuando el cdigo del script es demasiado largo o complejo, lo que dificultara su depuracin. Dado que las pginas web son ledas e interpretadas por el browser de arriba hacia abajo, es decir, primero lee e interpreta el encabezado y luego el cuerpo de la pgina, es aconsejable colocar los scripts dentro de la seccin HEAD, con el fin de que cuando la seccin BODY de la pgina se est cargando, todas las funciones ya se encuentren implementadas y de esta manera evitar errores que se producen al tratar de invocar, por parte del usuario, funciones definidas al
final de la pgina que an no han sido interpretadas completamente por el browser. VARIABLES Y TIPOS DE DATOS Valores JavaScript no tiene un conjunto extenso de tipos de datos, ni hace chequeo de los mismos. Lo anterior significa que para JavaScript no existen diferencias entre un entero y un real. El tipo de dato se define de manera dinmica y su tratamiento depende del contexto en el que se est trabajando. Para el desarrollo de aplicaciones en JavaScript se dispone de los siguientes tipos de datos o valores: Nmeros Valores lgicos Cadenas de caracteres Valores primitivos (null y undefined) El tratamiento de los datos en JavaScript es dinmico, no requiere de la declaracin de variables y la evaluacin de las mismas depende del contexto, lo que permite hacer casting libremente. Por ejemplo, se puede definir una variable que contenga una cadena de texto, y, posteriormente asignar a la misma un valor numrico sin que la ejecucin del script genere errores. Para comprender lo anterior, escriba lo siguiente: <HTML> <HEAD> <TITLE>Casting</TITLE> <SCRIPT LANGUAGE="JavaScript1.2"> var x="Mi nombre es Juan y tengo "; document.write(x); x=21; document.write(x+x); x=" aos"; document.write(x); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> El resultado que se obtendr al abrir la pgina ser: Mi nombre es Juan y tengo 42 aos En la primera lnea del script se ha definido a x como una variable que contiene una cadena de caracteres. La segunda lnea del script imprime el valor de x (Mi nombre es Juan y tengo ). La misma variable recibe un valor numrico en la tercera lnea y posteriormente el script imprimir el resultado de sumar x+x, en este caso 42. Finalmente, x vuelve a tomar como valor una cadena de caracteres que se imprime en la sexta lnea del script.
Lo anterior puede que simplifique y agilice la escritura de cdigo, pero vuelve a JavaScript un lenguaje desordenado, poco elegante y a veces confuso. Considere el siguiente ejemplo: <HTML> <HEAD> <TITLE>Confuso</title> <SCRIPT LANGUAGE="JavaScript1.2"> var x="525"; document.write(x+5); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Podra esperarse que el resultado obtenido fuera 530 (x+5), pero en realidad el anterior script mostrar 5255. Por qu? El aparente resultado errneo que se obtiene se debe a dos razones: la primera, cuando el valor asignado a una variable se encierra entre comillas (), JavaScript trata a esa variable como una cadena, aunque se trate de un valor numrico y la segunda razn, el operador + en contextos numricos significa suma, mientras que en operaciones con caracteres es el operador de concatenacin. Si en lugar del signo +, en la segunda lnea del script, se utiliza cualquier otro operador aritmtico, los resultados que se obtienen sern los esperados desde el punto de vista matemtico. Se sugiere al lector utilizar otros operadores aritmticos como resta (-), multiplicacin (*), y divisin (/), en la segunda lnea del anterior script, as como, invertir el orden de las variables. A diferencia de C y C++, JavaScript soporta valores booleanos. Su uso se explicar ms adelante en el captulo de operadores. Por ahora interesa saber que una variable booleana puede tomar cualquiera de los valores true (verdadero) o false (falso). Variables Las variables en JavaScript como en otros lenguajes, son contenedores de valores a los cuales se puede acceder a travs de sus nombres. Los nombres o identificadores de las variables pueden estar compuestos por una combinacin de letras (a-z, A-Z), dgitos (0-9) y el carcter de subrayado (_). El nombre de una variable debe ser diferente a cualquiera de las palabras reservadas del lenguaje (ver Apndice A) y finalmente, el nombre de las variables no puede comenzar con un dgito (0-9). JavaScript es sensible a las maysculas (case sensitive), por lo que la variable Mi_variable es diferente a mi_variable. La declaracin de variables en JavaScript se puede hacer de dos maneras: utilizando la palabra reservada var seguida del nombre de la variable (como en los scripts del ejemplo anterior), o mediante la simple asignacin de un valor
a la variable (y=21;). Cuando se declara una variable sin la asignacin de un valor inicial esta toma como valor undefined (indefinida). Si se trata de utilizar en contextos numricos una variable no definida el resultado puede ser: 1. Un error en tiempo de ejecucin, cuando la variable no ha sido declarada utilizando la palabra reservadavar 2. NaN, cuando la variable fue declarada mediante el uso de var. Se dice que una variable es global, cuando puede ser utilizada o referenciada en cualquier parte del script y una variable es local cuando solo puede ser utilizada en el mbito de una funcin. Las variables para que sean globales, deben ser declaradas por fuera de cualquier funcin. Una variable es local cuando se declara dentro una funcin, y es obligatorio el uso de var en el proceso de declaracin. El alcance de las variables ser explicado ms profundamente en el captulo de funciones. Arreglos Un arreglo es un conjunto de valores del mismo tipo identificados por elmismo nombre. Para distinguirlos, cada uno de los elementos de un arreglo tiene asociado un ndice numrico dependiendo de la posicin que ocupan, razn por la que a este tipo de datos se les conoce como variables indexadas. Arreglo das ndice 0 1 2 3 4 5 6 Valor Lunes Martes Mircoles Jueves Viernes Sbado Domingo Posicin 1 2 3 4 5 6 7 JavaScript como otros lenguajes, soporta la declaracin y el trabajo con variables indexadas que contienen dos o ms elementos que constituyen un arreglo. Por ejemplo, el arreglo dias contiene los nombres de los siete das de la semana y se declara en JavaScript de la siguiente manera: dias=[Lunes, Martes, Mircoles, Jueves, Viernes, Sbado, Domingo]; Aunque la anterior, no es la forma ms rigurosa de declarar un arreglo, se utiliza solamente para ilustrar el trabajo con ellos. Para referirse en cualquier arreglo a un elemento ubicado en la posicin x, se debe utilizar el nombre de la variable y el ndice del elemento encerrado entre parntesis cuadrados ([]). El ndice corresponde a la posicin del elemento disminuida en 1. Esto significa, que para un vector compuesto por n elementos, el primero de ellos siempre tendr como ndice 0, mientras que el ndice del ltimo elemento ser n-1. Por ejemplo, la siguiente pgina: <HTML> <HEAD><TITLE>Indices</TITLE></HEAD> <BODY> Hoy es <script language="JavaScript1.2">
dias=[Lunes, Martes, Mircoles, Jueves, Viernes, Sbado, Domingo]; document.write(dias[2]); </script> , el tercer da de la semana. </BODY> </HTML> Mostrar como resultado: Hoy es Mircoles, el tercer da de la semana. Se pueden declarar arreglos dejando uno o ms de sus elementos sin definir: Vocales = [a, , i, o, u]; y ms adelante darle valor al elemento indefinido: vocales[1] = e; O se puede eliminar un elemento cualquiera de un arreglo ya declarado, mediante el uso del operador delete: delete vocales[3]; Los arreglos son en realidad objetos definidos en JavaScript, por lo que se tratarn con profundidad en el captulo correspondiente. Comentarios Los comentarios corresponden a texto delimitado por caracteres especiales, que el intrprete del lenguaje ignora y que el programador utiliza para documentar sus aplicaciones hacindolas ms fciles de entender. JavaScript soporta dos tipos de comentarios: los precedidos por dos barras inclinadas //, y los encerrados dentro de los caracteres /* y */. El primero tiene como efecto que el intrprete ignore todo lo escrito despus de los dos slashs y hasta el final de la lnea. En el segundo caso, el intrprete no tendr en cuenta lo que se encuentre ubicado dentro de esos caracteres especiales, sin importar si su contenido ocupa ms de una lnea dentro del cdigo. document.write(dias[2]); //Esta parte ser ignorada por el intrprete /* Todo lo que escribamos aqu tampoco ser tenido en cuenta. Aunque el comentario ocupe ms de una lnea */ APNDICE A Palabras reservadas de JavaScript La siguiente tabla contiene las palabras reservadas de JavaScript, que no pueden ser usadas como nombres de variables, objetos, funciones o mtodos dentro de un script.
EXPRESIONES Y OPERADORES Una expresin es un conjunto de operandos y operadores cuyo resultado puede ser evaluado. Las expresiones constituyen la base de cualquier aplicacin y se construyen agrupando variables, expresiones o datos que son afectados por cualquiera de los operadores vlidos en un lenguaje. Las expresiones en JavaScript, como en la mayora de lenguajes se finalizan con punto y coma (;). JavaScript cuenta con un amplio conjunto de operadores: aritmticos, de asignacin, de comparacin, lgicos, literales, bitwise y operadores especiales. Dependiendo del nmero de operandos requeridos, las operaciones (y los operadores) se pueden clasificar en binarias y unarias. Las primeras requieren de la intervencin de dos operandos; la suma, la resta, la multiplicacin y la divisin son ejemplos de operaciones binarias. La expresin !X es un ejemplo de operacin lgica unaria que necesita de un solo operando para ser ejecutada. Operadores aritmticos Adems de los operadores aritmticos bsicos: suma (+), resta (-), divisin (/) y multiplicacin (*), existe el operador mdulo (%) que devuelve el residuo de una divisin no entera. Por ejemplo, el resultado de evaluar 5%3; ser 2. Que corresponde al residuo; 5 divido 3 es igual a 1 con un residuo de 2. Es importante recordar que el operador + utilizado con variables literales acta como operador de concatenacin. Si por ejemplo, dentro de un script existen las siguientes expresiones: var nombre = Andrs; var apellido1 = Gaitn; var apellido2 = Guzmn; todo = nombre + apellido1; todo += apellido2;
En la cuarta lnea del anterior ejemplo la variable todo tendr como valor Andrs Gaitn, y en la quinta Andrs Gaitn Guzmn. Operadores de asignacin La operacin de asignacin consiste en dar a la variable situada a la izquierda del operador el valor de la variable o de la expresin ubicada a la derecha del mismo. El operador de asignacin por excelencia es el signo igual =: X = 5; Y = X + 3; En la primera expresin X toma el valor de 5. En el segundo ejemplo a Y se le asigna el resultado de evaluar la expresin X+3, en este caso 8. En ocasiones es necesario afectar a una variable incrementado su valor en una cantidad determinada, o dividiendo el mismo por una cantidad dada. Considere el caso de las siguientes expresiones: X = X + 3; Y = Y A; Z = Z * 5; W = W / 4; T = T % 8; Existen en JavaScript al igual que en C y otros lenguajes, operadores de asignacin especiales que permiten escribir este tipo de expresiones de la siguiente manera: X += 3; // X es igual a X + 3 Y -= A; // Y toma el valor de Y - A Z *= 5; // Similar a Z = Z * 5 W /= 4; //W es igual al valor de W dividido en 4 T %= 8; // T toma el valor de T % 8 todo += apellido2 // la cadena todo es igual a todo concatenada con apellido2 Operadores de incremento decremento Es muy comn cuando se hacen programas, encontrarse con la necesidad de escribir lneas de cdigo como: a = a + 1; b = b - 1; En la primera lnea el valor de a es incrementado en 1, mientras que en la segunda lnea la variable b es decrementada en 1. Existen dos operadores unarios, conocidos como operador incremento (++) y decremento (--), que permiten realizar las mismas operaciones: var a = 6; var b = 0; a++; b--;
Los valores de a y b finalmente sern 7 y 1 respectivamente. En el ejemplo anterior los operadores (++ y --), se colocaron a la derecha del operando, lo que se conoce como operador posfijo. Podran haberse colocado a la izquierda de las variables, lo que se conoce como operador prefijo (++a, -b) y el resultado obtenido para ese ejemplo sera el mismo. Dado que los operadores de decremento e incremento tienen una prelacin ms alta que los operadores aritmticos y de asignacin, existen diferencias cuando los primeros intervienen en expresiones como las del siguiente ejemplo: var a = 6; var b = 6; var c = 0; var d = 0; c = ++a; d = b++; Si se visualizan los valores finales de cada variable, estos sern: a = 7, b = 7, c = 7 d = 6 En la quinta lnea de cdigo, primero se incrementa en 1 el valor de a quedando este en 7 y luego se asigna este valor a la variable c que queda tambin en 7. En la sexta lnea, el script asigna a d el valor de b (6) antes de incrementar a b en 1. Operadores de comparacin Los operadores de comparacin, llamados por algunos autores operadores de relacin, son del tipo binario y se utilizan para comparar valores o expresiones dadas, el resultado de la comparacin puede ser verdadero o falso. En JavaScript existen seis operadores de relacin:
La evaluacin de expresiones que contengan operadores de relacin devuelven siempre un valor booleano que puede ser true, si el resultado de la evaluacin es cierto (ejemplo 3>2), false, si el resultado de la evaluacin es falso (ejemplo 3<=2). A diferencia de C y otros lenguajes de programacin que requieren de funciones especiales, los operadores de relacin de JavaScript permiten comparar cadenas de caracteres con base en el orden lexicogrfico estndar. Por ejemplo: var cadena1 = c; var cadena2 = f;
x = (cadena1 < cadena2); En este caso X valdr true, dado que c ocupa un lugar inferior en el orden alfabtico respecto de f. Aunque pueden utilizarse en expresiones como las del ejemplo anterior, los operadores de relacin se usan ms a menudo como argumentos dentro de sentencias de seleccin if, o expresiones que controlan las estructuras for, las cuales se vern ms adelante. Es posible tambin, mezclar en una expresin operadores aritmticos y de relacin. Por ejemplo, Resultado = 3 + 5 < 8/11; //Resultado toma false como valor Operadores lgicos Los operadores lgicos se utilizan para agrupar o combinar los resultados de la evaluacin de operadores de relacin. Al igual que estos ltimos, los operadores lgicos son del tipo binario (excepto el operador !, que es unario) y devuelven true false, dependiendo del valor de cada uno de los operandos, veamos: El operador && (AND), devuelve true (verdadero) si la evaluacin de ambos operandos es verdadera false (falso) cuando la evaluacin de ambos o alguno de los operandos es false. En la siguiente lnea de cdigo, la variable Resultado recibir como valor true: Resultado = (3+5<9 && 7==14/2); El operador || (OR), devuelve true cuando la evaluacin de ambos o uno de los operandos es true, y, false cuando la evaluacin de los dos operandos es false. En la siguiente lnea, la variable Resultado valdr false: Resultado = (3+5>9 || 7!=14/2); El operador ! (NOT), devuelve true, si el valor del operando es false y false si el valor del operando es true. La variable Resultado en el siguiente ejemplo vale true: Resultado = !(3+5>9); Operadores especiales Dentro de los operadores especiales de JavaScript vale la pena destacar el operador condicional (?), que corresponde a un if - else simplificado, que tambin existe en C, JAVA y otros lenguajes. Su funcin consiste en devolver o ejecutar uno de dos valores o expresiones posibles, dependiendo de si una condicin que lo controla es evaluada como true o false: (condicin) ? valor1[expresin1] : valor2[expresin2]; Si condicin (que puede ser cualquier expresin vlida), es evaluada como true, entonces el operador devuelve valor1 o ejecuta expresin1, si por el contrario condicin es evaluada como false, entonces el operador devolver valor2. En el siguiente ejemplo, la variable tipo tendr como valor festivo: dias=[Lunes, Martes, Mircoles, Jueves, Viernes,Sbado,
Domingo]; tipo = (dias[6] == Domingo) ? festivo : laboral; Precedencia de los operadores Las operaciones en una expresin que contiene ms de un operador, se realizan en orden jerrquico dependiendo de la precedencia de los operadores. Por ejemplo, en una expresin que involucre una suma y una divisin (3 + 4/5), primero se efectuar la divisin, por tener esta una precedencia ms alta y luego la suma. La siguiente tabla, muestra el orden de precedencia de los operadores de JavaScript de mayor a menor. No se incluyen algunos operadores que existen en JavaScript por considerar que no son del alcance de este mdulo. Cuando varios operadores se encuentran en la misma lnea, tendrn una precedencia ms alta aquellos ubicados a la izquierda en la celda.
FUNCIONES Las funciones en JavaScript, as como en otros lenguajes de programacin no son ms que porciones de cdigo independientes que realizan una tarea especfica. La divisin en la etapa de diseo de un programa en subrutinas o subprogramas y su posterior implementacin utilizando funciones bien determinadas, facilitan la labor del programador a la hora de corregir errores tanto de sintaxis como lgicos. El desarrollo, la escalabilidad y el mantenimiento de un programa "modular" como suele llamrsele a un programa implementado con funciones, tambin se facilita. Una vez definida y comprobado el correcto desempeo de una funcin, sta puede ser utilizada tantas veces como sea necesario y desde cualquier parte del programa. Una funcin en JavaScript, debe ser definida para luego ser llamada desde cualquier parte del programa. De nuevo, se recomienda hacer la definicin de todas las funciones en la seccin HEAD del documento HTML, para evitar errores generados por el llamado a funciones que an no han sido interpretadas.
Las funciones en JavaScript pueden o no devolver valores, as como, pueden o no recibir argumentos para realizar sus tareas. La siguiente es la forma general de declarar o definir una funcin en JavaScript: function nombreFuncion (argumento1, argumento2, ... argumentoN) { sentencia1; sentencia2; ... sentenciaN; return expresin; //Si la funcin devuelve un valor } Los nombres de las funciones en JavaScript se asignan teniendo en cuenta las mismas reglas descritas para nombrar variables. Con el siguiente script, se implementa una funcin llamada escribeDatos, que no recibe argumentos ni devuelve ningn valor, y cuya tarea consiste en imprimir en el cuerpo de la pgina el nombre del usuario y la edad del mismo, basada en la fecha de nacimiento y el ao actual: <script language=JavaScript1.2> function escribeDatos() { var nombre="Andrs Gaitn"; var nacimiento=1986; var actual=2004; document.write("Hola, soy " + nombre + " y tengo " + (actual-nacimiento) + " aos"); } </script> Una vez definida, una funcin se puede utilizar tantas veces como sea necesario. Para que una funcin ejecute la tarea para la cual fue definida, es indispensable hacer un llamado a la misma. Los llamados a funciones como en todos los lenguajes, se realizan utilizando el nombre de la funcin y la lista de argumentos entre parntesis: nombre_funcion(argumento1, argumento2, ... argumentoN); En el ejemplo, la funcin no recibe ningn argumento, por lo que el llamado a escribeDatos se hace de la siguiente manera: escribeDatos(); El listado siguiente contiene el cdigo necesario para elaborar una pgina que calcula y muestra la edad de Andrs: <HTML> <HEAD> <TITLE>Datos</TITLE> <SCRIPT language="JavaScript1.2"> //Definicin de la funcin escribeDatos function escribeDatos() { var nombre="Andrs Gaitn";
var nacimiento=1986; var actual=2004; document.write("Hola, soy " + nombre + " y tengo " + (actual-nacimiento) + " aos"); } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript1.2"> //Llamado a la funcin escribeDatos escribeDatos(); </SCRIPT> </BODY> </HTML> Para ilustrar la manera de definir y llamar funciones que reciben argumentos, en el siguiente listado se han hecho las modificaciones necesarias para que la funcin escribeDatos del ejemplo anterior, reciba en el llamado los valores correspondientes a los argumentos nombre, actual y nacimiento: <HTML> <HEAD> <TITLE>Datos</TITLE> <SCRIPT language="JavaScript1.2"> //Definicin de la funcin escribeDatos. Recibe tres argumentos function escribeDatos(nombre, actual, nacimiento) { document.write("Hola, soy " + nombre + " y tengo " + (actual-nacimiento) + " aos"); } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript1.2"> //Llamado a la funcin escribeDatos con los 3 argumentos escribeDatos("Andrs Gaitn", 2004, 1986); </SCRIPT> </BODY> </HTML> Dentro del bloque de sentencias de una funcin puede existir cualquier expresin vlida, incluso el llamado a otra funcin previamente definida. En el siguiente ejemplo se definen dos funciones: la funcin calcula, que recibe como argumentos el ao actual y el ao de nacimiento y devuelve la diferencia entre ambos valores. La funcin escribeDatos que recibe como argumento el nombre del usuario y lo imprime junto con la edad calculada por la funcin calcula: <HTML> <HEAD> <TITLE>Datos</TITLE> <SCRIPT language="JavaScript1.2">
//Definicin de la funcin calcula function calcula(actual, nacimiento) { //La funcin devuelve la diferencia entre actual y nacimiento return (actual-nacimiento); } //Definicin de la funcin escribeDatos function escribeDatos(nombre) { /*La variable edad recibe el resultado devuelto por calcula, que es llamada con los argumentos actual y nacimiento */ edad = calcula(2004, 1986); document.write("Hola, soy " + nombre + " y tengo " + edad + " aos"); } </SCRIPT> </HEAD> <BODY> <SCRIPT language="JavaScript1.2"> //Llamado a la funcin escribeDatos con el argumento nombre escribeDatos("Andrs Gaitn"); </SCRIPT> </BODY> </HTML> Variables globales y variables locales Existen diferencias en el comportamiento de una variable dependiendo del sitio donde ha sido declarada. Cuando la declaracin se hace fuera de cualquier funcin, se dice que la variable es global y puede ser utilizada desde cualquier funcin definida dentro del mismo script. Mientras que si la variable se declara dentro de una funcin especfica, la variable es local y el uso de la misma est limitado a operaciones dentro del mbito de la funcin donde fue declarada. Si se intenta utilizar una variable local por fuera de la funcin donde fue declarada, el resultado ser un error en tiempo de ejecucin. <HTML> <HEAD> <TITLE>Variables</TITLE> <SCRIPT language="JavaScript1.2"> //Declaracin de la variable global x var x=5; //Definicin de la funcin suma function suma() { //Declaracin de la variable local y var y=5; r=x+y; document.write("X+Y="+r); } function resta()
{ //La siguiente lnea generar error, la variable y es indefinida r=x-y; //Lo siguiente no se imprimir document.write("X-Y="+(x-y)); } suma(); resta(); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Funciones predefinidas en JavaScript Existen algunas funciones predefinidas en JavaScript, la mayora de las cuales permiten chequear el tipo de dato de una expresin o variable que se pasa como argumento a la funcin, evaluar expresiones o hacer casting de tipos de datos: La funcin eval permite la evaluacin de cadenas de caracteres. Si la cadena de caracteres representa una expresin, la funcin eval devuelve el resultado de evaluar la expresin. Por ejemplo: //Y es una cadena de caracteres Y=35+56/28+1.5; //Si imprime el valor de Y document.write(Y); //El resultado ser 35+56/28+1.5 //Ahora X recibe como valor el resultado de evaluar Y X=eval(Y); //Si imprime X document.write(X); //El resultado ser 38.5 Si la cadena de caracteres contiene sentencias vlidas de JavaScript , el resultado de la evaluacin ser la ejecucin de las sentencias contenidas en la cadena. Veamos: //La variable Y vale 5; Y=5; //Z es una cadena de caracteres que contiene 2 sentencias Z=Y+=10; document.write(Y); //La funcin eval ejecuta las dos sentencias contenidas en Z eval(Z); //El resultado es la impresin del nmero 15 La funcin isFinite() evala la expresin que se le pasa como argumento y devuelve un valor booleano dependiendo del resultado de la evalucin.
Devuelve false cuando la expresin no es un valor numrico o cuando el resultado es un valor infinito, por ejemplo, una divisin por cero. Devuelve true en cualquier otro caso: x=5; y="Hola"; z=0; //La siguiente lnea imprimir false document.write(isFinite(y+x)); //La siguiente lnea imprimir false document.write(isFinite(x/z)); //La siguiente lnea imprimir true document.write(isFinite(x*z)); La funcin isNaN() devuelve true cuando la expresin que se le pasa como argumento no es un valor numrico, y false en cualquier otro caso: x=5; y="Hola"; z=0; //La siguiente lnea imprimir true document.write(isNaN(y+x)); //La siguiente lnea imprimir false document.write(isNaN(x/z)); //La siguiente lnea imprimir false document.write(isNaN(x*z)); Las funcin parseInt() devuelve un entero correspondiente al valor de la cadena de caracteres que se le pasa como argumento, si esta puede ser evaluada, de lo contrario devuelve NaN. Adems, esta funcin permite convertir nmeros entre diferentes bases: X=50.5 //Z toma como valor 50 Z=parseInt(X) ; /*Z ahora vale 40 en base 10que es el resultado de convertir 50 que est expresado en base 8 */ Z=parseInt(X, 8); /*Z ahora vale 80 en base 10 que es el resultado de convertir 50 que est expresado en base 16 */ Z=parseInt(X, 16); La funcin parseFloat() trabaja de manera similar a parseInt(). Devuelve un valor real, producto de la evaluacin de la cadena que se le pasa como argumento. Ambas funciones devuelven NaN, si el primer carcter de la cadena es diferente a un dgito, un punto (.), el signo mas (+) o el signo menos (-). Si los primeros caracteres corresponden a una expresin numrica vlida y los siguientes son otros caracteres cualesquiera, estos sern ignorados. Por ejemplo, en la expresin z=parseFloat(-3.58e-3 Hola); z tomar como valor 0.0038, que corresponde a 3.58x10-3, los caracteres Hola son ignorados por la funcin.
Existen otras cuatro funciones predefinidas en JavaScript, que sern explicadas o utilizadas ms adelante, lo mismo que las funciones aritmticas que fueron implementadas en JavaScript como objetos. <HTML> <HEAD> <TITLE>FUNCIONES</TITLE> <SCRIPT language="javascript1.2"> // Aqu defines o creas la funcin en esta caso vamos a calcular el rea del rombo // EL Area es Diagonal Mayor * diagonal menor sobre 2 function arearombo(dmayor,dmenor){ // Aqu haces la formula para calcular la funcin return (dmayor*dmenor)/2 } </SCRIPT> </HEAD> <BODY> <SCRIPT language="javascript1.2"> // Aqu envias los datos para realizar el calculo de la funcin document.write("el rea es "+ arearombo(3,7)) </SCRIPT> </BODY> </HTML>

Curso de HTML y Java Scripts

Cargado por

Información del documento

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

Curso de HTML y Java Scripts

Cargado por

Copyright:

Formatos disponibles

INTRODUCCIN El lenguaje HTML (HyperText Markup Language), es el formato estndar que se utiliza para crear e interpretar documentos de texto

ENLACES A OTRA PGINA

También podría gustarte