módulo_10_fundamentos de html y javascript

7/31/2019 Módulo_10_Fundamentos de HTML y JavaScript

http://slidepdf.com/reader/full/modulo10fundamentos-de-html-y-javascript 1/87

EL LENGUAJE HTML

© élogos Conocimiento, S.L. Madrid 2009. Todos los derechos de Propiedad Intelectual e Industrial de esta obra pertenecen a élogos Conocimiento, S.L.



ÍNDICEEL LENGUAJE HTML

1. Introducción al lenguaje HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2. Las etiquetas de formato . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

3. Componentes gráficos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

4. Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25



1. Introducción al lenguaje HTML

Objetivos

1. Conocer la sintaxis básica del lenguaje HTML.

2. Conocer las características más importantes de las etiquetas de formato.

El concepto HTML

Podríamos afirmar, sin lugar a dudas, que gran parte de la popularidad que

ha adquirido Internet desde su nacimiento ha sido gracias a HTML.

HTML surgió ante la necesidad de transmitir datos a través de la red, con un formato adecuado que permitiera

mostrar dichos datos en un dispositivo de visualización. Más concretamente, HTML consiste en un juego de

etiquetas o marcas que permiten aplicar propiedades de formato a los datos.

Cada etiqueta contiene un elemento de apertura (<elemento>) y otro de cierre (</elemento>) entre los que

se incluye el dato a formatear:

<center>

Texto centrado

</center>

Página Web y documento HTML

Cuando un documento HTML es recibido por el dispositivo de visualización, conocido como navegador, éste

interpreta todas las etiquetas de marcado del documento y muestra en la pantalla del ordenador la

información con el formato apropiado.

EL LENGUAJE HTML

3



Lo que ve el usuario en su pantalla como resultado de interpretar el documento HTML se conoce como página

Web. La siguiente imagen nos ayudará a distinguir ambos conceptos.

Página Web Documento HTML

Problemas de compatibilidad de documentos HTML

Como consecuencia del rápido crecimiento que ha experimentado la Web en los últimos 10 años, el lenguaje

HTML ha sufrido una especie de sobreutilización. Esto ha provocado que:

- Los distintos fabricantes de navegadores incorporen etiquetas propias al lenguaje a fin de adaptarlo

a los nuevos requerimientos de las aplicaciones.

- Lo que implica problemas de compatibilidad de documentos HTML entre plataformas, comportándose

un mismo documento de forma diferente según el tipo de navegador.

Para solucionar estos problemas el W3C desarrolló a mediados del año 2000 un nuevo estándar de

presentación conocido como XHTML. XHTML está basado en HTML pero utilizando las reglas de formación de

XML, lo que permite a los navegadores compatibles con este estándar poder validar los documentos antes de

ser procesados, rechazándose todos aquellos que no cumplan exactamente con las reglas definidas por el

mismo.

EL LENGUAJE HTML

4



Diferencia entre documento HTML y su equivalente XHTML

En la siguiente imagen puedes ver la diferencia entre un documento HTML y su equivalente XHTML. Entre

otras cosas, se aprecia que en HTML no se hace distinción entre mayúsculas y minúsculas, mientras que en

XHTML sí.

Sintaxis básica

Distinción entre mayúsculas y minúsculas

Antes de entrar a analizar las distintas etiquetas o marcas que

forma el estándar XHTML vamos a revisar algunos puntos básicos

sobre la sintaxis.

Como se ha indicado anteriormente, el estándar XHTML, al estar

basado en XML, distingue entre mayúsculas y minúsculas.

Teniendo en cuenta que todas las etiquetas están definidas en

minúsculas, el siguiente bloque XHTML dentro de un documento

impediría que éste fuera interpretado por el navegador:

EL LENGUAJE HTML

5



Cuando un documento XHTML no cumple con las reglas del estándar se dice que está mal formado. Un

documento XHTML mal formado no podrá ser leído por ningún navegador.

<p>

texto incorrecto

<P>

Tipos de etiquetas

Las etiquetas utilizadas por el estándar XHTML pueden ser de dos tipos:

Abiertas

Solamente necesitan aparecer una vez para realizar la acción asociada y tienen el formato <etiqueta/>. Un

ejemplo es la etiqueta de salto de línea <br/>. Aquí tenemos una diferencia entre XHTML y HTML, pues en

éste último las etiquetas abiertas no incluyen la barra inclinada.

Cerradas

Su acción se aplica sobre un bloque de texto que se incluye entre la etiqueta de apertura (<center>) y la de

cierre (</center>). La gran mayoría de las etiquetas XHTML pertenecen a este grupo. En XHTML es obligatorio

que todas las etiquetas estén correctamente anidadas, de lo contrario el documento se considerará mal

formado.

Algunas etiquetas incluyen atributos, cuya misión es la de proporcionar información adicional sobre la

etiqueta. Los atributos se incluyen dentro de la marca de apertura antes del carácter “>” y su valor debe

obligatoriamente estar indicado entre comillas:

<p align = “center”>

texto

</p>

EL LENGUAJE HTML

6

Comentarios

Los comentarios incluyen información de texto que no debe ser interpretada por el navegador.

El contenido del comentario estará delimitado por los símbolos “”, pudiendo ocupar una o varias

líneas:



Estructura de un documento XHTML. En la imagen podemos ver la estructura de un documento XHTML.

EL LENGUAJE HTML

7



Componentes básicos

En la sintaxis destacamos cuatro componentes básicos que, obligatoriamente, debe incluir todo documento

XHTML:

declaración de tipo

Declara la versión del estándar XHTML utilizada por el documento. En este caso vemos que se trata de laversión estricta, existiendo otras como la transicional. El organismo internacional W3C es el encargado de

definir el ámbito de aplicación de cada versión.

Cabecera

Indicado mediante la etiqueta <html>, es el elemento en el que están contenidos el resto de los elementos

que componen el documento.

Elemento raíz

Contiene información de control sobre el documento, información para uso interno del navegador y que enningún caso será mostrada en la página.

Cuerpo

Todos los datos que se quieren mostrar en la página con sus respectivas etiquetas de formato deben ser

incluidos dentro del cuerpo. La etiqueta <body>, que es la que delimita el cuerpo de la página dispone de

una serie de atributos opcionales que permiten establecer ciertas características generales de la página,

como el color o imagen de fondo.

Declara la versión del estándar XHTML utilizada por el documento. En este caso vemos que se trata de la

versión estricta, existiendo otras como la transicional. El organismo internacional W3C es el encargado de

definir el ámbito de aplicación de cada versión.

EL LENGUAJE HTML

8



2. Las etiquetas de formato

Introducción

Aunque, no es la intención de este capitulo realizar un exhaustivo estudio de

todas las etiquetas que forman parte del estándar XHTML, consideramos que

todo programador de aplicaciones Web debe tener unos conocimientos

básicos sobre este estándar. Es por ello que dedicaremos este capítulo arevisar las características más importantes de las principales etiquetas de

formato XHTML.

Sí analizaremos con más profundidad en el siguiente capítulo las etiquetas

para la construcción de interfaces gráficas de usuario, puesto que el

conocimiento de las mismas resulta de gran importancia para un

programador.

Pasemos pues a revisar los distintos tipos de etiquetas de formato que se incluyen en XHTML, todas ellas

podrán se incluidas en cualquier parte del cuerpo (<body> </body>).

Estilo de texto

Como su propio nombre indica, estas etiquetas se emplean para aplicar un estilo a determinadas partes del

texto. Entre las más importantes están:

<b>Pone en negrita el texto delimitado por la etiqueta.

<u>Subraya el texto delimitado por la etiqueta.

<i>Aplica el estilo cursiva al texto delimitado por la etiqueta.

<h1>..<h6>Se trata de un conjunto de seis etiquetas que van de la <h1> a la <h6> y que aplican un formato especial al

texto que delimitan. Se les conoce como etiquetas de encabezado, puesto que el formato que aplican es

adecuado para definir distintos niveles de título o encabezado dentro de un documento.

EL LENGUAJE HTML

9



Organización del texto

Mediante estas etiquetas podemos distribuir y organizar el contenido de la página. Entre las más importantes

destacamos:

<br/>Los saltos de línea “naturales” que introducimos en el texto que forma parte de un documento XHTML no son

reconocidos por el navegador. Por tanto, para forzar al navegador a que introduzca un salto de línea en una

parte de la página debemos indicárselo mediante la etiqueta abierta <br/>.

<p>Delimita un párrafo dentro del documento, insertando un salto de línea al final del mismo. Dispone de un

atributo, llamado align, que define la alineación horizontal del párrafo respecto a la página. Los posiblesvalores de este atributo son: “left”, “right”, “center” o “justified”.

<center>Mediante esta etiqueta centramos horizontalmente el contenido delimitado por la misma. Estos contenidos

puede ser cualquier elemento HTML válido (texto, imágenes, párrafos, etc.) dentro del <body>.

<div>Se trata de una etiqueta con la que delimitamos cualquier bloque de código XHTML válido. El principal

objetivo de esta etiqueta es definir distintos bloques en la página a los que se aplicarán estilos diferentes

mediante hojas de estilos.

<hr/>Se conoce como etiqueta separador y su misión es incluir líneas de separación dentro de una página.

Utilizando los atributos adecuados, puede modificarse el ancho, grosor y aspecto de la línea. Dichos atributos

son los siguientes:

- size.- Define el grosor de la línea en número de píxeles.

- width.- Define el ancho de la línea en número de píxeles.

- align.- Establece la alineación horizontal de la línea respecto a la página.

Sus valores posibles son “left”, “right” y “center”.

- color.- Define el color de la línea.

Al cerrar este último cuadro de texto, aparecen las imágenes de abajo.

EL LENGUAJE HTML

10



La siguiente imagen nos muestra un ejemplo de utilización de las etiquetas anteriores.

Texto XHTML Resultado en navegador

<body>

<hl>Titulo del párrafo</hl>

<p>Texto del párrafo principal<br/>

Esto es <b>negrita</b>y esto es <i>cursiva</i>

</p>

<hr size=“4”/>

<h2>Subtítulo del apartado</h2> <

p align=“center”>párrafo centrado</p>

</body>

Imágenes

Además de texto, gran parte de las páginas Web existentes incluyen imágenes para hacer más atractiva la

presentación de los contenidos.

La etiqueta abierta <img/> permite insertar una imagen en un documento y configurar los distintos aspectos

de la misma a través de sus atributos.

Entre los principales atributos de esta etiqueta tenemos:

src

Dirección del archivo que contiene la imagen. Puede ser una dirección relativa o absoluta.

altTexto alternativo que aparecerá en lugar de la imagen si ésta no se localiza.

heightAlto de la imagen en píxeles.

widhtAncho de la imagen en píxeles.

EL LENGUAJE HTML

11

Hipervínculos

Los hipervínculos ofrecen la posibilidad a los usuarios de la página de “navegar” a otras partes de la misma,

o incluso a otras páginas ubicadas en cualquier servidor.

La mayor parte de las páginas Web existentes cuentan con este tipo de elementos. Los podemos identificar

fácilmente porque, al situar el ratón sobre el texto o imagen que hace de enlace el puntero cambia de forma,

transformándose en una mano. En el caso de los textos de enlace, además se muestran con un color diferenteal resto del documento.

Cómo conseguir que un texto o imagen se convierta en hipervínculo

Para conseguir que un texto o imagen se convierta en un hipervínculo, debemos delimitar el elemento

correspondiente mediante la etiqueta <a>.

href

Contiene la referencia al punto de enlace o destino. Puede ser la URL relativa o absoluta de la página destino

o, en el caso de un enlace local, el nombre de la marca asociada al destino.



<a href="destino.html" >Ir destino</a>



<a href="#fin" >Ir a fin</a>

EL LENGUAJE HTML

12



name

Se utiliza para definir una marca dentro del documento a fin de que pueda quedar enlazado con otra parte

del mismo. Así pues, el elemento <a> debería utilizarse también en la zona del documento donde se vaya a

establecer una marca, en este caso empleando el atributo name.

<a name="fin">Zona final</a>

En el caso de que queramos definir una imagen como hipervínculo, el elemento <img> correspondiente tendrá

que quedar delimitado por la etiqueta <a>.

Tablas

Las tablas son quizá los elementos más utilizados en una página Web,

pues además de su propia función de presentación de información en

forma tabular, se emplean frecuentemente en la organización de los

contenidos de las páginas.

Las etiquetas utilizadas para la generación de tablas son las siguientes:

<table>

Se trata de la etiqueta principal, pues en su interior se define el contenido de la tabla. La organización dela misma vendrá determinada por otras etiquetas que deben estar incluidas dentro de <table>. Antes de

analizar estas otras etiquetas, veamos algunos de los atributos más importantes que podemos utilizar con la

etiqueta <table> y que permiten “jugar” con el formato de la misma:

- width. Determina el ancho de la tabla. Su valor puede ser absoluto en píxeles o relativo en

porcentaje.

- bgcolor. Color de fondo de la tabla.

- background. Imagen de fondo de la tabla.

- border. Ancho de los bordes y líneas de separación de la tabla. Si no se especifica su valor

es 0; la tabla se mostrará sin bordes y sin líneas de separación entre celdas.

- bordercolor. Color de las líneas de separación de la tabla.

EL LENGUAJE HTML

13



<tr>Se utiliza para delimitar una fila dentro de una tabla, así pues, se deberá incluir una etiqueta <tr> por cada

fila a generar.

<td>Cada celda dentro de una fila debe estar delimitada por la etiqueta <td>, dentro de la cual se incluirá el

bloque de texto o imagen que estará contenida en ella. Una etiqueta <td> puede utilizar además los

siguientes atributos:

- colspan. Indica el número de columnas de la tabla que debe ocupar la celda.

- rowspan. Indica el número de filas que debe ocupar la celda.

- align. Alineación horizontal del contenido de la celda. Sus posibles valores son los mismos que se

indicaron para el atributo align de <p>.

<th>Tiene la misma finalidad que <td>, aplicando además un formato especial (negrita y centrado) al contenido

de la celda. Se emplea para aquellas celdas que van a servir de título de una fila o columna de la tabla.

Listas

Las listas facilitan la organización de la información, permitiendo su presentación como una serie de

elementos que pueden venir precedidos por un número o una viñeta.

Las etiquetas utilizadas para la generación de listas son:

<ol>Define una lista numerada en donde cada elemento de la misma aparecerá precedido por un número. Dichos

números se generan de forma automática y correlativa. Mediante el atributo type podemos definir el tipo

de numeración utilizada. Entre sus posibles valores tenemos:

1. Numeración estándar.

I. Numeración romana.

A. Numeración con letras mayúsculas.

a. Numeración con letras minúsculas.

<ul>Define una lista no numerada, donde cada elemento de la misma viene precedido por un símbolo o viñeta.

Dicho símbolo puede definirse mediante el atributo type, cuyos posibles valores son: “disc”, “circle” y

“square”.

<li>Delimita los elementos de una lista, tanto para listas numeradas como no numeradas.

EL LENGUAJE HTML

14



Ahora veamos un ejemplo de una página HTML donde se hace uso conjuntamente de tablas y listas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Titulo del documento</title></head>

<body>

<center>

<h1>Listado de cursos</h1>

<table border="1">

<tr>

<th colspan="2">Otoño-Invierno</th>

</tr>

<tr>

<th>Mañanas</th>

<th>Tardes</th>

</tr>

<tr>

<td>

<ul>

<li>Visual Basic .NET</li>

<li>Java</li>

<ul>

</td>

<td>

<ul><li>C#</li>

<li>Java</li>

<li>PHP</li>

<ul>

</td>

</tr>

</table>

</center>

</body>

</html>

EL LENGUAJE HTML

15



La página resultante al cargar el documento anterior en el navegador se muestra a continuación:

Marcos

Los marcos permiten dividir la ventana del navegador en zonas. Cada zona o frame puede contener una

página diferente.

La utilización de marcos resulta muy útil cuando se quiere tener en un sitio Web una parte del mismo siempre

visible, como puede ser el caso de una barra de navegación. Sin embargo, debido a los problemas que

presentan en ciertos tipos de navegadores, los marcos están ya en desuso, consiguiéndose un efecto similarpero más estándar y fiable mediante la utilización de hojas de estilo.

Para organizar la ventana del navegador en marcos, debemos crear una página inicial donde se establezca

dicha división a través de dos etiquetas especiales.

framsetDefine una división en filas y columnas. Mediante la utilización de <frameset> anidados se crea la división

en áreas de la ventana. Esta etiqueta admite los siguientes atributos:

- cols. Dimensiones de cada una de las columnas, separadas por una coma (“,”). Los valores pueden

ser absolutos o porcentuales.

- rows. Dimensiones de cada una de las filas, separadas por una coma (“,”). Al igual que cols, se

pueden especificar valores relativos o absolutos.

frameEl contenido de cada área definida mediante <frameset> se especifica a través de la etiqueta <frame>. Esta

etiqueta cuenta con los siguientes atributos:

- src. Dirección de la página que será cargada en el área del frame.

- name. Nombre asignado al frame de cara a cargar el contenido de una página especificada

por un enlace.

EL LENGUAJE HTML

16



Ejemplo

La siguiente página de ejemplo crearía una estructura de tres marcos. El primero ocuparía el ancho completo

de la página y tendría un alto equivalente al 20% de la misma, mientras que los otros dos tendrían el mismo

alto, siendo el ancho de 200 píxeles para el primero de ellos:

<html><head>

<frameset rows="20%,*">

<frame src="pagina1.htm"/>

<frameset cols="200,*">



<frameset>

<frameset>

</head>

</html>

Aquí se aprecia el aspecto que tendría la ventana del navegador al cargar la página anterior:

Observa dos detalles significativos del código HTML correspondiente a esta página. Por un lado,

vemos que la división en zonas de la ventana se define en el <head> de la página de inicio y, por otro,

podemos comprobar cómo esta página de inicio no tiene cuerpo.

EL LENGUAJE HTML

17



3. Componentes gráficos HTML

División de etiquetas

El estándar XHTML proporciona también un conjunto de etiquetas para la

generación de elementos gráficos que permiten capturar datos de usuario en

una página Web y enviarlos a la capa intermedia para su procesamiento.

Estas etiquetas son de gran importancia para el programador Web, puesto que para el correcto procesamiento

y tratamiento de los datos es necesario conocer los detalles sobre la forma en que son capturados desde la

capa cliente.

Este conjunto de etiquetas podemos dividirlas en dos grandes grupos:

- Formularios

- Controles

Formularios HTML

Para que la información proporcionada por el usuario a través de los controles gráficos pueda ser enviada a

la aplicación que los va a procesar, es necesario que estos controles estén definidos dentro de lo que se

conoce como un formulario HTML.

El formulario HTML no ofrece ningún aspecto físico determinado en la página donde se encuentra, tan sólo

tiene como misión la de englobar los controles encargados de recoger la información.

Se define mediante la etiqueta <form></form>. Pero lo más importante son sus atributos, en especial los

siguientes:

action

Indica la URL de la aplicación o proceso que recogerá y procesará los datos. Puede ser una página

ASP/ASP.NET, un servlet, un script de PHP, etc.

method

Indica el método de envío de los datos. Su valor puede ser “GET” o “POST”. Si el valor es “GET”, los datos

serán enviados en la cabecera de la petición como parte de la URL, mientras que si es “POST” la

información viajará en el cuerpo de la petición. La forma de envío de los datos puede influir en

cómo serán recogidos por el proceso del servidor.

EL LENGUAJE HTML

18



Para que un formulario HTML pueda hacer el envío de los datos, es necesario que cuente con un botón de

tipo submit. Al ser pulsado, este botón provoca lo que se conoce como una petición HTTP, incluyendo en ella

los datos que se van a enviar a la aplicación del servidor, siguiendo los criterios definidos anteriormente para

el método de envío especificado en method.

Controles HTML

Como hemos indicado, el estándar XHTML incluye etiquetas para la generación de distintos tipos de controlesHTML.

Independientemente del tipo de control de que se trate, la etiqueta que lo genere deberá incluir un atributo

llamado name que representará el nombre del parámetro enviado en la petición para ese control. En cuanto

al valor del parámetro, éste dependerá del tipo de control utilizado.

Ejemplo

<html x mlns=http://www.w3.org/1999/xhtml>

<head><title>Ejemplo formulario</title>

</head>

<body>

<center>

<form action=“pagina.asp” method=“post”>

<input type=“text” name=“datoejemplo”/><br>

<input type=“submit” value=“Enviar”/>

</form>

</center>

</body>

</html>

EL LENGUAJE HTML

19



Controles de texto

En HTML existen tres controles de texto:

1. Control de texto estándar

Se trata de un control con aspecto de caja de texto que permite al usuario introducir una línea de texto en

su interior. Se genera con la etiqueta <input>, indicando en su atributo type el valor “text”.

2. Control de contraseña

Su aspecto es igual al anterior, si bien por cada carácter introducido por el usuario se muestra un símbolo

(habitualmente “*”) que impide ver el texto escrito en el control. Se genera también con la etiqueta <input>,

indicando en el atributo type el valor “password”.

3. Caja de texto multilínea

Es similar a un control de texto estándar, con la particularidad de que permite la introducción de un texto

de varias líneas. Se genera con la etiqueta <textarea></textarea>.

Por ejemplo, el siguiente campo enviará el parámetro código=300 utilizando un control hidden:

<input type = “hidden” name = “codigo” value = “300”/>

Con cualquiera de los tres controles descritos anteriormente, el valor que se enviará como parámetro será

el texto introducido por el usuario en el control. Si el control se deja en blanco, se incluirá una cadena vacía

como valor del parámetro.

Otro tipo de control, es el de campo oculto que representa un texto que se va a enviar en la petición y que

no se quiere hacer visible al usuario. Se genera con la etiqueta <input>, indicando en su atributo type el valor

“hidden”. El texto que corresponde con el valor del parámetro se incluirá en el atributo value del control.

Botones de radio

Este tipo de control permite al usuario elegir una opción entre un grupo de ellas excluyentes entre sí. Al pulsar

sobre uno de los botones del grupo éste pasa a activarse, desactivándose el que estuviera marcado en ese

momento.

EL LENGUAJE HTML

20



Los botones de radio se generan con la etiqueta <input>, indicando en su atributo type el valor “radio”. Para

conseguir que todos los botones del grupo sean excluyentes entre sí, es necesario que todos ellos cuenten

con el mismo valor del atributo name. La siguiente figura muestra un grupo de botones de radio para la

selección de una ciudad.

<input name=“ciudad” type”radio” value=“50”/>Valencia <br/>

<input name=“ciudad” type”radio” value=“30”/>Logroño <br/><input name=“ciudad” type”radio” value=“11”/>Cádiz <br/>

Obsérvese como todos los botones de radio cuentan con un atributo value. El valor del atributo value del

botón seleccionado será enviado como parámetro al servidor cuando se produzca el submit del formulario.

Si se seleccionase el botón (Logroño), al realizar el submit del formulario, al servidor se enviaría para este

control el parámetro: ciudad=30.

Si queremos que un botón aparezca seleccionado de forma predeterminada al cargarse la página en el

navegador, deberíamos indicar el atributo checked (sin asignarle ningún valor) en el control correspondiente.

Por ejemplo, para preseleccionar Valencia:

<input name = “ciudad” type = “radio”

value = “50” checked/>

EL LENGUAJE HTML

21



Casillas de verificación

Las casillas de verificación o checkbox son controles que, al igual que los de tipo radio, permiten al usuario

elegir opciones dentro de una página aunque, a diferencia de éstos, las opciones presentadas por un grupo

de checkbox no son excluyentes entre sí, pudiendo seleccionar más de una.

Para crear un control de tipo checkbox se utiliza la etiqueta abierta <input>, indicando en su atributo type

el valor “checkbox”. Dado que las opciones no son excluyentes entre sí, no es necesario que el atributoname de cada control del grupo tenga el mismo valor, sin embargo, muchas veces se le asigna a todos los

controles del grupo el mismo nombre para facilitar la captura de datos en el servidor.

<input type=“checkbox” name=“tema”

value=“historia”/>Historia<br/>


value=“ciencias”/>Ciencias<br/>


value=“literatura”/>Literatura<br/>

En este listado de ejemplo se utilizan tres controles ckeckbox que tienen como objetivo permitir al usuario

seleccionar sus temas de preferencia.

El atributo checked

Al igual que sucede con los botones de radio, si queremos que un checkbox aparezca seleccionado de forma

predeterminada se deberá incluir en el mismo el atributo checked. Si un checkbox no se encuentra

seleccionado al producirse el submit del formulario, no será enviado ningún parámetro al servidor para ese

control.

En el ejemplo anterior, en el que hay varios checkbox con el mismo nombre,

si se selecciona más de uno se enviará un parámetro con tantos valores como

checkbox estén seleccionados, separándose cada valor del siguiente por una

coma (“,”). Si seleccionásemos los tres temas se enviaría el siguiente

parámetro:

tema = historia, ciencias, literatura

EL LENGUAJE HTML

22



Listas de selección

El control, listas de selección, presenta una lista de opciones al usuario, entre

las que podrá elegir una o varias de ellas.

Para generar este control se utiliza la etiqueta <select></select>, donde su

atributo size (alto del control en número de filas) determinará si se trata de

una lista abierta (size mayor de 1) o desplegable (size=1).

En el interior de <select> se incluirá una etiqueta <option></option> por cada opción que se quiera mostrar

en la lista. Cada elemento <option> incluirá en el atributo value un valor de texto asociado a la opción y que

será enviado al proceso del servidor cuando se produzca el submit del formulario.

Ejemplo

El siguiente ejemplo crea una lista desplegable con posibles configuraciones de memoria RAM a elegir. Cada

configuración de memoria tiene asociado un precio que corresponderá al valor del parámetro enviado al

servidor para ese control.

<select name = “memoria”>

<option value = “40”>1 GB</option>




</select>

En la siguiente imagen se muestra el aspecto que tendría dicha lista al ser cargada en el navegador.

EL LENGUAJE HTML

23



Botones de pulsación

Existen tres tipos de botones de pulsación que se pueden utilizar en un formulario HTML. Los tres se generan

mediante la etiqueta <input>, aunque cada tipo requiere un valor diferente del atributo type.

Submit

Este tipo de botón tiene asociado una funcionalidad definida, de modo que al ser pulsado se lanzará unapetición del programa del servidor indicado en el atributo actino del formulario, al que se le enviarán una

serie de parámetros con los valores de cada control o grupo de controles del formulario.

Reset

También tiene una funcionalidad predefinida, consistente en limpiar todos los campos de texto del

formulario.

Button

Este botón no tiene ninguna funcionalidad predefinida. Normalmente, se le suele asociar un script de clientepara realizar algún tipo de comprobación de datos cuando se produce la pulsación del control.

EL LENGUAJE HTML

24



4. Resumen

Has llegado al final de esta lección de formación que denominamos “El lenguaje HTML”.

En esta lección hemos estudiado los siguientes contenidos:

EL LENGUAJE HTML

25



HOJAS DE ESTILO

CSS




ÍNDICEHOJAS DE ESTILO CSS

1. INTRODUCCIÓN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2. CREACIÓN DE UNA HOJA DE ESTILO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

3. TIPOS DE HOJAS DE ESTILO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53.1. HOJAS DE ESTILO EXTERNAS

3.2. HOJAS DE ESTILO INTERNAS

3.3. HOJAS DE ESTILO EN LÍNEA

4. PRINCIPALES PROPIEDADES DE ESTILO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

4.1. FUENTES Y COLORES

4.2. TEXTO

4.3. BORDES Y CONTORNO

4.4. POSICIÓN

4.5. VISIBILIDAD

5. ESTILOS GENÉRICOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

6. SELECTORES ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

7. HERENCIA DE ESTILOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15



1. Introducción

Aunque el estándar XHTML proporciona un gran número de etiquetas para dar formato a la información de

una página, su uso presenta algunos inconvenientes. Entre ellos podríamos destacar los siguientes:

- Opciones de estilo limitadas. El juego de etiquetas HTML de formato con sus respectivos atributos resulta

bastante limitados para los requerimientos de las aplicaciones actuales.

- Dificultad en el mantenimiento de las páginas. La anidación de diferentes etiquetas hasta conseguir aplicarel formato adecuado hace que cualquier modificación posterior resulte compleja y susceptible de errores.

- Repetición constante de grupos etiquetas. Si queremos aplicar un determinado en distintas partes de la

página a través de la anidación de una serie de etiquetas, no tendremos más remedio que incluir el bloque

de etiquetas en todas las partes del documento donde se requiera.

Como solución al problema del estilo, el W3C desarrolló un estándar bajo el nombre de Cascading Style Sheet

(CSS), que tiene como objetivo poder definir hojas de estilo para ser aplicadas sobre un documento HTML,

permitiendo separar los datos de la información de formato y estilo de los mismos.

Las hojas de estilo CSS se basan en la definición de una serie de propiedades de estilo asociadas adeterminados tipos de etiquetas e independientes de su contenido, de forma que al ser utilizadas estas

etiqueta en el documento se apliquen automáticamente las diferentes propiedades y opciones de estilo

definidas para las mismas.

El juego de propiedades de estilo proporcionado por el estándar CSS es bastante numeroso, ofreciendo a los

diseñadores grandes posibilidades para el formato de páginas.

HOJAS DE ESTILO CSS

3



2. Creación de una hoja de estilo

En la figura 1 se puede ver el aspecto de una hoja de estilo básica.

Como vemos, en una hoja de estilo se distinguen dos partes bien diferenciadas:

- Etiqueta. Indica el nombre de la etiqueta sobre la que se aplicará las propiedades de estilo definidas entre

los símbolos “{” y “}”.

- Propiedades de estilo. Las propiedades de estilo están formadas por parejas nombre:valor, separadas por un

“;”, donde nombre representa el nombre de la propiedad de estilo que se quiere aplicar y valor el valor

asignado a la propiedad. Los valores asignados a las propiedades de estilo pueden ser valores numéricos consus unidades de medida correspondientes (centímetros –cm-, puntos –pt-, pixels –px- o pulgadas –in-), o

también pueden ser valores de texto predefinidos.

Una vez definida la hoja de estilo, cada vez que se haga uso de una de estas etiquetas en el documento se

aplicarán las propiedades definidas, si bien el ámbito de aplicación de estas hojas de estilo dependerán de

donde se hayan definido.

HOJAS DE ESTILO CSS

4



3. Tipos de hojas de estilo

Según el lugar en que se defina una hoja de estilo y, por tanto, el ámbito de utilización de la misma,

distinguimos tres tipos de hojas de estilo:

- Externas

- Internas

- En línea

3.1 Hojas de estilo externas

Una hoja de estilo externa se define en un archivo de texto con extensión .css, tal cual se indica en la figura

1. Esto permite que la hoja de estilo pueda ser utilizada por múltiples páginas XHTML o HTML.

Para vincular un documento HTML con una hoja de estilo externa será necesario incluir en la cabecera del

documento (interior del elemento <head>), una etiqueta de tipo <link> mediante la que se indicará la

dirección de la hoja de estilo que se quiere utilizar (figura 2).

HOJAS DE ESTILO CSS

5



El formato de la etiqueta <link> es el que se indica a continuación:

Los atributos utilizados por esta etiqueta son:

- rel. Tipo de enlace. En el caso de hojas de estilo el valor de este atributo será siempre “stylesheet”.

- href . Dirección de la hoja de estilo. Se indicará la dirección relativa del archivo .css respecto al

documento

- type. Tipo de hoja de estilo. Al tratarse de hojas de estilo CSS su valor será text/css.

En la figura 3 se muestra el conjunto completo de hoja de estilo, documento XHTML de utilización y

página resultante.

HOJAS DE ESTILO CSS

6



3.2 Hojas de estilo internas

Las hojas de estilo internas se definen en el interior del documento donde van a ser utilizadas,

concretamente, en la cabecera del mismo en el interior de la etiqueta <style>:

<head>

<style>

//definición de propiedades de

//estilo

</style>

</head>

El formato utilizado en la definición de las propiedades de estilo para cada etiqueta es exactamente igual

que en el caso de las hojas de estilo externas.

En el documento de ejemplo anterior podemos conseguir el mismo efecto de estilos definiéndolo como se

indica en el siguiente listado:

<html>

<head>

<style>

p { font-size : 12pt; font-family : arial;

font-weight : bold}

h1 { font-size : 25pt; font-family : verdana;

text-decoration : underline;

text-align : center; color : green}

div { font-size : 10pt; font-family : verdana;

text-align : left}

body { background : URL(fondo.jpg);

font-family : arial}

</style>

</head>

<body>

Texto incluido dentro del cuerpo

HOJAS DE ESTILO CSS

7



<h1>Titulo de ejemplo</h1>

<p>Este párrafo aparecerá con el estilo definido<br/>

en la hoja</p>

<div>

capa con estilo diferente

</div>

</body></html>

3.3 Hojas de estilo en línea

Hay circunstancias en las que puede interesar aplicar sobre una determinada etiqueta de la página una serie

de propiedades de estilo, sin que esto afecte al resto de etiquetas de su mismo tipo que estén definidas en

el documento.

Para ello, debemos definir los valores de estas propiedades de estilo dentro del atributo style de la etiqueta

en la que se quieren aplicar; es lo que se conoce como una hoja de estilo en línea. La sintaxis para la

definición de las propiedades será la misma que utilizamos en los casos anteriores.Otra situación en la que puede resultar útil la definición de una hoja de estilo en línea sobre una etiqueta

se da cuando queremos aplicar sobre ésta un estilo diferente al definido en un estilo superior. Los estilos en

línea tienen pues prioridad sobre los estilos internos y externos.

Por ejemplo, si quisiéramos añadir al documento de ejemplo anterior un segundo párrafo con un estilo

distinto al definido para la etiqueta <p>, sería:

<body>

Texto incluido dentro del cuerpo

<h1>Titulo de ejemplo</h1>

<p>Este párrafo aparecerá con el estilo definido<br/>

en la hoja</p>

<div>

capa con estilo diferente

</div>

<p style=”color:blue;font-weight:normal”>

segundo párrafo con estilo diferente al

global</p>

</body>

HOJAS DE ESTILO CSS

8



4. Principales propiedades de estilo

Seguidamente, comentaremos algunas de las propiedades de estilo más comúnmente utilizadas del estándar

CSS2, para lo cual realizaremos una subdivisión en grupos según el tipo de formato llevado a cabo por la

propiedad.

4.1 Fuentes y colores

Definen estilos relativos al tipo de letra. Entre las más utilizadas están:

- Color. Define el color del texto. Se puede asignar el nombre del color en inglés o la combinación RGB

correspondiente en hexadecimal (por ejemplo, color:#FF12AB. Esta propiedad la admiten casi todas

las etiquetas de HTML.

- font-size. Indica el tamaño de la fuente. Se pueden utilizar valores absolutos, indicando el tipo de

medida utilizada, o valores relativos como: xx-small, x-small, small, médium, large, x-large o xx-

large.

- font-family. Define el nombre del tipo de letra que se quiere aplicar.

- font-weight. Establece el grosor de los caracteres. Sus posibles valores pueden ser números del 100

al 900 en pasos de 100 o valores predefinidos como bold, normal, bolder o lighter.

- font-style. Estilo que queremos aplicar al texto (italic, normal u oblique).

4.2 Texto

Definen diferentes características del texto. Entre las más utilizadas están:

- text-align. Indica la alineación del texto (left, right, center o justified).

- text-dacoration. Decoración del texto, es decir, subrayado (underline) o normal (none).

- text-transform. Tranasforma el texto en mayúsculas (upercase) o en minúsculas (lowercase).

HOJAS DE ESTILO CSS

9



4.3 Bordes y contorno

Definen distintos aspectos sobre el contorno de la etiqueta. Destacamos:

- border-style. Estilo del borde de la etiqueta. Por defecto, una etiqueta no muestra su contorno

(none), aunque se puede hacer que aparezca un rectángulo que define los bordes de la etiqueta

indicando los valores solid , double (borde doble) o dotted (borde punteado) en esta propiedad.

- border-width. Ancho del borde de la etiqueta. Se definen valores numéricos seguidos de la unidad

de medida (por ejemplo, border-width:20px).

- border-color. Color del borde de la etiqueta. Admite los mismos valores que el atributo color.

- margin. Margen entre los bordes de la etiqueta y sus alrededores. Se definen valores numéricos

seguidos de la unidad de medida.

- padding. Indica la distancia entre los bordes de la etiqueta y el contenido de la misma. Se definen

valores numéricos seguidos de la unidad de medida.

4.4 Posición

Estas propiedades de estilo permiten colocar las etiquetas en una posición diferente a la que le corresponde

originariamente. Entre las más importantes están:

- position. Indica el modo de colocación de la etiqueta. Sus posibles valores son:

- static. La etiqueta es fija y no puede ser desplazada

- absolute. Se puede desplazar a cualquier punto de la página

- relative. El desplazamiento es relativo respecto a la posición original

- left. Indica la posición horizontal de la esquina superior izquierda de la etiqueta. Se define

mediante un valor numérico seguido de una unidad de medida.

- top. Indica la posición vertical de la esquina superior izquierda de la etiqueta. Se define

mediante un valor numérico seguido de una unidad de medida.

- width. Ancho de la etiqueta

- height. Alto de la etiqueta

HOJAS DE ESTILO CSS

10



4.5 Visibilidad

Mediante la propiedad de estilo visibility se puede indicar si una etiqueta será o no visible. Sus posibles

valores son visible y hidden. Esta propiedad de estilo puede ser alterada mediante código de JavaScript para

ocultar/mostrar dinámicamente ciertas partes de la página.

HOJAS DE ESTILO CSS

11



5. Estilos genéricos

En los ejemplos que hemos visto para los tres tipos de hojas de estilo existentes, las propiedades de estilo

se aplicaban sobre un determinado tipo de etiqueta, de modo que estas propiedades se aplicarán de manera

automática cada vez que la etiqueta es utilizada.

También es posible definir un conjunto de propiedades de estilo con sus correspondientes valores, sin

necesidad de asociarlas a una etiqueta concreta. A este conjunto de propiedades se le conoce como estilo

genérico por no estar aplicadas sobre una etiqueta particular.

Los estilos genéricos se definen:

.nombre_estilo {propiedad:valor;propiedad:valor;...}

Donde “nombre_estilo” representa un nombre cualquiera que se asigna al estilo genérico.

Los estilos genéricos pueden estar definidos en una hoja de estilo externa o interna y podrán ser aplicados

a cualquier etiqueta del documento en el que se utilice la hoja de estilos.

Para aplicar un estilo genérico sobre una determinada etiqueta se utilizará el atributo class de dicha etiqueta,

asignando como valor de este atributo el nombre del estilo que queremos aplicar.

Por ejemplo, supongamos que tenemos los siguientes estilos genéricos definidos sobre una hoja de estilos:

- maximo{font-size:40pt;font-weight:900}

- medio{font-size:20pt;font-weight:500}

- maximo{font-size:10pt;font-weight:normal}

En un documento HTML aplicamos los estilos genéricos anteriores en tres párrafos del mismo, tal y como se

indica en el siguiente listado:

<html>

<head>

<style>

.maximo{font-size:40pt;font-weight:900}

.medio{font-size:20pt;font-weight:500}

.minimo{font-size:10pt;font-weight:normal}

</style>

</head>

HOJAS DE ESTILO CSS

12



<body>

<p class=”maximo”>

parrafo estilo máximo

</p>

<p class=”medio”>

parrafo estilo medio

</p>

<p class=”minimo”>

parrafo estilo minimo

</p>

</body>

</html>

Al cargar la página anterior en el navegador se mostrará una página con el aspecto de la figura 4

FIGURA 4

Aunque en el ejemplo anterior hemos aplicado los estilos genéricos a un mismo tipo de etiqueta, un estilo

genérico puede ser aplicado a cualquier tipo de etiqueta, incluso un mismo estilo puede ser aplicado en

distintas partes del documento a diferentes etiquetas.

Los estilos genéricos pues proporcionan una gran potencia y flexibilidad a la hora de crear hojas de estilos

CSS para un sitio Web.

Se puede restringir el alcance de los estilos genéricos a determinados tipos de etiqueta. Para ello, a la hora

de definir el estilo genérico se indicará delante del nombre del estilo el nombre de la etiqueta sobre la que

se aplicará.

El siguiente ejemplo aplica la regla CSS solamente a los elementos de tipo <div> cuyo atributo class tenga

el valor “box”:

p.box {

padding: 2px;

border-style: solid;

border-width: 1px;

}

HOJAS DE ESTILO CSS

13



6. Selectores id

Con CSS también permite es posible aplicar determinados estilos a las etiquetas en función de su atributo

id. La sintaxis es similar a la utilizada con los estilos genéricos, salvo que en este caso se utiliza el símbolo

de la almohadilla (#) en vez del símbolo del punto (.).

En el siguiente ejemplo se define un estilo de tipo selector id llamado “principal”, que aplicara las

propiedades de estilo definidas en el mismo a la etiqueta H1 cuyo atributo id es “principal”:

<style>

#pincipal { font-size: 35pt; color: red; }

</style>

<body>

<h1 id=”principal”>Titulo principal</h1>

<p>Texto del párrafo</p>

<h1>Titulo normal</h1>

</body>

HOJAS DE ESTILO CSS

14



7. Herencia de estilos

Una de las propiedades menos conocidas de las hojas de estilos en cascada es la capacidad de heredar estilos

de clases de jerarquía superior.

La herencia de estilos proporciona numerosas ventajas en el diseño de una Web; entre ellas cabe destacar:

- Simplifica la edición de las hojas de estilos, ya que la modificación de los padres es trasladada

automáticamente (en cascada) a los hijos.

- Evita la redundancia y la cantidad de código necesaria, puesto que una regla sólo necesita ser

declarada una vez para múltiples nodos del documento. Sólo las excepciones necesitan ser

redeclaradas.

- Cuando la estructura de un documento puede ser ambigua o incluso desconocida (como al formatear

un documento xml), la herencia facilita controlar su posible apariencia.

Esta jerarquía viene definida por el anidamiento de elementos dentro del documento, es decir por la posición

de unos elementos dentro de otros y todos ellos contenidos por el elemento <body>.

No todas las propiedades son heredables, de hecho, solamente aquellas que no modifican el fondo del

documento (tipo, tamaño y color de fuente, por ejemplo) son heredables; en cambio, otras como el color

del fondo no lo son.

Por ejemplo, supongamos que tenemos definida la siguiente hoja de estilos:

<style>

.padre {

border-style:solid;

border-width:2px

font-family: Arial;

font-size: 20px;

font-weight: bold;

}

.hijo {

color: green;

}

</style>

HOJAS DE ESTILO CSS

15



Por otro lado, supongamos que tenemos los siguientes elementos anidados:

<body class = “padre”>

texto del padre

<div class = “hijo”>

texto del hijo

</div>

</body>

Como el elemento <div> se encuentra anidado en <body>, adquirirá automáticamente todas las propiedades

de estilo definidas en el elemento superior, añadiendo las suyas propias a través del estilo definido en “hijo”.

Mediante la herencia también pueden sobrescribirse alguna de las propiedades de estilo heredadas. Por

ejemplo, si en el estilo “hijo” incluimos la propiedad font-size:10px, el texto contenido en el <div> tendrá

un tamaño de letra de 10px, manteniendo los valores de las restantes propiedades heredadas.

HOJAS DE ESTILO CSS

16



LENGUAJE

JAVASCRIPT




ÍNDICELENGUAJE JAVASCRIPT

1. Los lenguajes de Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

2. Sintaxis de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

3. Funciones del lenguaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

4. Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18

5. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

6. Resumen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44



1. Los lenguajes de Script

Objetivos

1. Conocer la sintaxis de JavaScript2. Identificar funciones y eventos de JavaScript3. Desarrollar sentencias de control y objetos del lenguaje JavaScript

Los lenguajes Script

La combinación del lenguaje XHTML y el estándar de estilo CSS constituye una potente herramienta a la horade presentar datos en la Web, ofreciendo numerosas posibilidades en el formato de los mismos.

Sin embargo, las páginas creadas con estos estándares, debido a sunaturaleza estática, ofrecen poco nivel de interacción con el usuario,resultando a veces poco amigable su utilización.

En este contexto, surgieron los lenguajes de script como medio para añadir

dinamismo a una página Web.

La utilización de script en páginas Web es la base de una técnica de programación muy popular en laactualidad llamada AJAX, mediante la que se consigue mejorar de forma espectacular la experiencia deusuario con las páginas Web.

Los lenguajes de script permiten incluir cierta lógica de programación dentro de la página Web, capaz de serejecutada por el navegador durante la carga de la misma o como respuesta a alguna acción del usuario.Estas instrucciones, que son capaces incluso de modificar dinámicamente el aspecto de las páginas,proporcionan así cierto grado de interacción con el usuario.

FUNDAMENTOS DE HTML Y JAVASCRIPT

3



Características del lenguaje Script

Hay dos características de los lenguajes de script que los diferencian de los lenguajes de programaciónestándar:

- Poseen un reducido conjunto de instrucciones. Esto permite que los intérpretes de estos lenguajesincorporados en los navegadores Web puedan ser muy ligeros.

- Son lenguajes interpretados. El código de script no tiene que ser traducido para su posteriorejecución, el navegador (el intérprete que lleva incorporado) traduce las instrucciones en el momentode su ejecución.

Aunque existen distintos lenguajes de Script, el más popular es sin duda JavaScript, siendo soportado porprácticamente todo los navegadores.

Analizaremos las características sintácticas de este lenguaje y los principales objetos que puede manejar.

Inclusión de un Script en un documento

Como se ha indicado, las instrucciones de script son incluidas directamente dentro de la página Web, aunquese separan del resto del contenido del documento (código XHTML/CSS) utilizando la etiqueta <script> deHTML.

Todo bloque de script debe estar delimitado por la etiqueta <script> y </script>

Como se puede ver en la imagen de la figura, los bloques de script pueden ser incluidos tanto dentrode la cabecera del documento como en el cuerpo. Habitualmente, la cabecera suele reservarse para

la definición de scripts con funciones de respuesta a eventos.4




Fundamentos de JavaScript

Según hemos indicado, JavaScript es el lenguaje de script universalmenteutilizado. Su reducido juego de instrucciones y modelo de objetos soportadonos ofrecen infinitas posibilidades a la hora de crear páginas Web dinámicas.

Fundamentalmente, se incluirá código JavaScript en una página Web para:

validación de datos

Antes de enviar al servidor los datos recogidos por un formulario, es necesario realizar una serie decomprobaciones básicas, como verificar que se han completado ciertos campos, que los valores introducidosson de un determinado tipo, etc. Todas estas operaciones deben ser realizadas desde la capa cliente(navegador)

Aplicaciones AJAX

AJAX es una técnica de programación que se basa en el intercambio de datos entre la página Web y el servidor

de forma asíncrona. La implementación de estas operaciones es realizada mediante JavaScript.

Modificación dinámica de páginas

De cara a hacer más atractivo su uso por parte del usuario, ciertas páginas reaccionan con un cambio deaspecto o modificación de su contenido ante ciertas acciones del usuario, como pasar el ratón por encimade algún componente.

5

JavaScript




2. Sintaxis de JavaScript

Sintaxis básica

Antes de analizar los elementos sintácticos de JavaScript, tengamos en cuenta una serie de consideracionesbásicas sobre el lenguaje.

Tipos de datos y variables

Una de las características de todos los lenguajes de script es que son débilmente tipados, lo que significa queel juego de datos que manejan es bastante reducido.

En el caso concreto de JavaScript, se distinguen cuatro tipos de datos:

6




TextoEl tipo texto representa una cadena de caracteres delimitada por comillas dobles (“ y ”).

NuméricoIncluye todo tipo de número, tanto enteros como decimales.

Boolean

Representa valores lógicos (true y false).

ObjetoEn JavaScript se manejan diferentes tipos de objetos que son tratados como un dato más.

Los datos en un programa JavaScript son manejados a través de variables. Dichas variables, aunque no esobligatorio hacerlo, deben ser declaradas antes de ser utilizadas.

La declaración de una variable JavaScript se realiza a través de la palabra reservada var.

var nombre_variable;

Como vemos, en la declaración de una variable JavaScript no se puede indicar el tipo de datos que va aalmacenar, lo que significa que una variable puede contener cualquier tipo de dato.

De cara a asignar una valor a una variable se utilizará el signo “=”

var mivariable;mivariable = 100; //asignación de un valor numérico

Si una variable debe contener un valor inicial, puede establecerse éste en la misma línea de declaración:var p = “hola”; //variable inicializada con un texto

Si se utiliza una variable en alguna operación del programa sin haber establecido un valor inicial, lo normales que se produzca un error de ejecución, puesto que toda variable no inicializada tiene asignado por defectoel valor undefined. Por ejemplo, la siguiente instrucción provocaría un error, puesto que no se puede realizaruna operación aritmética sin haber asignado explícitamente un valor a la variable:

var k;k++; //error

7




En cuanto al ámbito de una variable, es decir, desde dónde puede accederse a ella, puede ser de dos tipos:

GlobalLa variable se declara fuera de cualquier función, siendo accesible desde cualquier línea de código que existaen la página.

Local

La variable se declara dentro de un bloque (función o instrucción de control), sólo es accesible en el interiorde ese bloque.

Hot pot botón ejemplo, aparece lo que se muestra en la siguiente pantalla.

Ejemplo

Este ejemplo nos muestra una variable global y dos locales, una con ámbito de función y otra accesibleúnicamente dentro de la instrucción for.

Operadores

Los operadores permiten realizar operaciones con los datos dentro de un programa. JavaScript cuenta conlos cinco tipos de operadores indicados en la siguiente tabla.

8




Ejemplo

Por ejemplo, el siguiente bloque de instrucciones incrementa en una unidad el contenido de una variable y,al cargar la página el navegador muestra su valor en un cuadro de diálogo (utilizamos la función alert() queestudiaremos más adelante):

<html><head><title>Primera página</title></head><body><script language = “javascript”>

var num = 5;num++;alert(num); //muestra el valor 6

</script></body>

</html>

Además de los anteriores, JavaScript dispone de los siguientes operadores especiales:

newSe utiliza para crear objetos a partir de su clase.

typeof Permite conocer si el contenido de una variable es de un determinado tipo.

Sentencias de control

Un programa está formado por un conjunto de instrucciones que se ejecutan una tras otra con un ordenpreestablecido, pero raras veces se sigue una secuencia lineal de ejecución.

Existen unas instrucciones que nos permiten alterar el flujo de ejecución de un programa dependiendo deque se cumplan o no ciertas condiciones.

9




A este tipo de instrucciones se les denomina sentencias de control de flujo y pueden ser de dos tipos:

AlternativasEn función de una determinada condición o expresión encamina el flujo de ejecución del programa por unou otro camino.

Repetitivas o bucles.

Como su nombre indica, permiten repetir la ejecución de un conjunto de instrucciones un númerodeterminado de veces.

Sentencias de control: if y switch

A continuación, revisaremos el juego de instrucciones de control proporcionado por JavaScript. En estapantalla veremos la instrucción if y la sentencia switch, y en las próximas estudiaremos la sentencia for ywhile.

If La instrucción if comprueba una condición, si ésta es cierta (true), se ejecutan las sentencias que aparecen

entre llaves (las llaves no son obligatorias si sólo hay una sentencia), si la condición no se cumple se ejecutanlas sentencias indicadas en else, cuya utilización es opcional.

10




switchEl valor de la expresión se compara con cada una de las constantes de la sentencia case, si coincide alguno,se ejecuta el código indicado a continuación, finalizando la ejecución al encontrar la sentencia break.

En caso de que el resultado de la expresión no coincida con ningún case se ejecutará el bloque default(opcional).

Sentencias de control: for

La sentencia for se trata de una sentencia de tipo repetitivo que permite ejecutar instrucciones un número

definido de veces. Este número está determinado por la propia instrucción.

11




Los pasos que sigue la ejecución de un bucle for son los siguientes:

1. Se ejecuta la instrucción de inicialización, que como su nombre indica, inicia todos los valoresnecesarios para el control del bucle.

2. Se realiza la comparación, si la condición es cierta se ejecutan las sentencias del bucle, en casocontrario se sale del bucle y se realiza la primera instrucción que aparezca detrás del bucle.

3. Se ejecuta incremento y se vuelve al paso 2, a realizar otra vez la comparación.

Sentencia while

Al igual que for, while es una sentencia de tipo repetitivo, sólo que el bloque de instrucciones se ejecutamientras la condición definida sea verdadera.

Al ejecutarse por vez primera la condición, si es cierta se ejecuta el bloque de instrucciones, volviéndosedespués a comprobar la condición. Cuando la condición es falsa, deja de ejecutarse el bloque deinstrucciones.

Existe una variante de esta instrucción que es do…while, donde primero se ejecutan las instrucciones ydespués se comprueba la condición. En este caso, está garantizada la ejecución del bloque de instruccionespor lo menos una vez.

12




Sentencias de interrupción de un bucle

Existen dos instrucciones que permiten abandonar la ejecución de un bucle for y while. Éstas son:

Veamos un ejemplo de utilización de la sentencia continue. En él, se emplea dicha sentencia para permitirla ejecución de la instrucción de escritura, únicamente cuando la variable de control es par.

13




3. Funciones del lenguaje

Funciones del lenguaje

JavaScript incluye un juego de funciones predefinidas que pueden utilizarse en cualquier parte del códigopara realizar tareas habituales en un programa.

Para utilizar estas funciones, únicamente hay que invocarlas pasándole los parámetros adecuados. En lasiguiente tabla aparece algunas de las funciones más utilizadas de JavaScript.

Existen otro tipo de funciones especiales de JavaScript cuya misión es la de generar cuadros de diálogo parainteraccionar con el usuario de la página.

Alert (mensaje)Genera un cuadro de diálogo que muestra un mensaje de aviso suministrado como parámetro.

Confirm (pregunta)Genera un cuadro de diálogo con un texto que consiste en una pregunta al usuario y dos botones que cierranla ventana, “Aceptar”, cuya pulsación devuelve el valor true y “Cancelar”, cuya pulsación devuelve false.

Prompt (mensaje)Genera un cuadro de diálogo con un mensaje que solicita un dato al usuario. La pulsación de “Aceptar”cierra la ventana y devuelve el dato introducido.

14




15

Opera con el contenido de unacaja de texto si es numérico

Obtiene un carácter a partir de sucódigo

ejecuta el código de Java Scriptque recibe como parámetro enforma de cadena




Definición de funciones de JavaScript

JavaScript permite al programador estructurar el código en funciones, de esta forma se consigue un dobleobjetivo:

- Organizar de forma adecuada el código y- Reutilizar ciertas instrucciones que deben ser ejecutadas en diferentes partes del programa.

JavaScript es un lenguaje orientado a eventos, definiéndose las instrucciones manejadoras de dichos eventosen funciones. En esta imagen se ilustra la forma en la que se debe definir una instrucción en JavaScript y

cómo ésta debe ser invocada desde otra parte del código. Como vemos, la función se define mediante lapalabra reservada function, indicándose a continuación del nombre de la función los parámetros que seránrecibidos en la llamada.

En caso de que la función devuelva un resultado, se deberá indicar este en una sentencia return. Por suparte, la llamada a una función puede realizarse directamente desde una instrucción de JavaScript o desdealgún atributo de una etiqueta HTML, tal y como se indica en el ejemplo. Esta última opción es la utilizadapara hacer una llamada a una función que debe ser ejecutada como respuesta a un evento.

16




Ejemplo

El siguiente ejemplo incluye una función que devuelve el resultado de dividir el mayor entre el menor de dosnúmeros:

<html><head>

<script language="javascript">function division(x,y){

if(x>y)return x/y;

elsereturn y/x;

}</script></head><body>

<script language="javascript">var n1=25,n2=10,resultado;//obtiene el resultado de la división llamando//a la función definidaresultado=division(n1,n2);alert("La división vale:\n" + resultado);</script></body></html>

Suele ser habitual, especialmente cuando se trata de funciones manejadoras de eventos, que las funcionesse encuentren agrupadas en la cabecera del documento.

17




4. Eventos

Definición de eventos

Por evento entendemos una acción que el usuario puede realizar sobre lapágina, tales como hacer un click en un botón, arrastrar el ratón por encimade una imagen, seleccionar un elemento en una lista, etc.

Aunque la mayoría de los eventos se producen por acciones del usuario,también existen otros eventos que son generados por el propio navegador,como por ejemplo, el evento onload que es lanzado por el navegador alrealizar la carga en memoria de la página.

En la siguiente se indican los principales eventos que pueden producirse en una página XHTML y sonsusceptibles de ser manejados mediante código JavaScript.

18




Definición de funciones de JavaScript

Cuando el usuario realiza alguna acción sobre la página, el evento se produceen el objeto de la página donde el usuario ha ejecutado la acción,capturándose el mismo desde la etiqueta correspondiente a dicho objeto.

Por ejemplo un click en el documento provoca el evento onclick sobre la etiqueta <body>, mientras que el

movimiento del ratón sobre una imagen provoca el evento onmouseover sobre la etiqueta <img>correspondiente.

Cada evento tiene un manejador de evento que se encarga de responder automáticamente cuando ocurreun evento. Estos manejadores están representados por atributos de la etiqueta y su nombre coincide con eldel evento.

En estos atributos manejadores se debe especificar las acciones a ejecutar como respuesta al evento, aunque,habitualmente, dichas acciones se agrupan en una función que es llamada desde el manejador.

Ejemplo

Por ejemplo, la siguiente página incluye una función, llamada mensaje(), que se ejecutará como respuestaal evento onclick sobre el documento. La función simplemente nos muestrará un mensaje de aviso en uncuadro de diálogo.

<html><head><title>Prueba de eventos</title><script language = “javascript”>function mensaje(){

window.alert("Ha hecho click en el documento");}</script>

</head><body onclick="mensaje();">

</body></html>

19




5. Objetos

Como la mayoría de los lenguajes modernos, JavaScript es un lenguajebasado en objetos. Esto significa que dentro de un script podemos hacer usode objetos para aumentar la potencia y flexibilidad de nuestras aplicaciones.

Los objetos representan un tipo de estructura de programación que expone a quien lo va a utilizar a una serie

de operaciones (métodos) que permiten resolver distintos problemas que se plantean en los programas.

Algunos de esos objetos, como los botones, formularios o ventanas son elementos que ofrecen un aspectovisual en la página, pero otros, como los arrays o las cadenas de caracteres, no tienen aspecto físico peroproporcionan una gran funcionalidad a las aplicaciones.

En cualquier caso, desde el punto de vista de la programación, un objeto es una “caja negra” que encapsulauna serie de operaciones y de datos. Estas operaciones y datos son expuestas al exterior a través depropiedades y métodos

PropiedadesRepresentan características del objeto (por ejemplo, el título de una ventana). Se les puede asignar un valory leer su contenido. Las propiedades pueden modificar a los objetos y la misma propiedad se puede aplicara objetos completamente diferentes. El acceso a las propiedades desde el exterior del objeto se realizautilizando la notación nombre_objeto.propiedad.

MétodosSon acciones asociadas al objeto, es decir son las cosas que pueden hacer los objetos (por ejemplo, elmétodo open() para abrir una ventana). Estas acciones están implementadas como funciones dentro delobjeto. El acceso a los métodos desde el exterior del objeto se realiza utilizando la notaciónnombre_objeto.metodo(parámetros).

20




Referencia a un objeto

Para hacer referencia a un objeto desde código unas veces se utilizará el nombre del objeto y otras unavariable que lo referencie, todo dependerá del tipo del objeto de que se trate.

En ocasiones, a partir del nombre del tipo de objeto (clase), habrá que crear el objeto y guardar unareferencia al mismo en una variable con la que poder después acceder a sus propiedades y métodos.

La creación de objetos a partir de una clase se realiza a través del operador new, utilizando la siguientesintaxis: var variable = new Clase_objeto();

La instrucción anterior crea el objeto y almacena la referencia en la variable.

´Tipos de objeto

De cara a facilitar su estudio, el conjunto de objetos que podemos utilizar desde un programa javascriptpodemos dividirlo en cuatro tipos:

21




Objetos del lenguaje

Los objetos del lenguaje son objetos que forman parte del juego de instrucciones del lenguaje.

Con ellos podemos resolver problemas habituales que se pueden presentar en cualquier tipo de programa.

Estos objetos son:

Objetos del lenguaje: String

Un objeto String es una cadena de texto. Cada vez que se asigna una cadena de caracteres a una variable,JavaScript crea un objeto de tipo String que pone a disposición del programador.

var cad = “esto es un objeto de texto”; //objetocad.length; //llamada a propiedad

Este tipo de objeto proporciona una serie de propiedades y métodos para manipular cadenas de caracteresdesde código.

Entre las propiedades de este objeto, destacamos length. Se trata de una propiedad de solo lectura quecontiene el número de caracteres de una cadena de texto. El ejemplo que se muestra en la figura18 consiste en una página HTML que al cargarse ejecuta un script que muestra en el interior de la

misma el número de caracteres de un determinado texto.22




En cuanto a los métodos de este tipo de objeto, la siguiente tabla nos muestra los más importantes.

Objetos del lenguaje: Array

Un array representa un conjunto de elementos que pueden ser recorridos mediante un índice.

En JavaScript los array se manejan como objetos de tipo Array, cuyos elementos pueden contener

cualquier tipo básico, incluso pueden mezclarse tipos diferentes en un mismo array.23




Los arrays en JavaScript no tienen prefijado el número de elementos en la declaración, siendo 0 el índicedel primer elemento.

Para acceder a cada elemento individual usaremos un índice, entre corchetes, a continuación del nombre dela variable que apunta al array, teniendo en cuenta, como hemos indicado antes, que el primer elementotiene índice 0.

var datos = new Array();

Para poder utilizar Array es necesario crear explícitamente el objeto utilizando el operador new, tal y comoexplicamos anteriormente

“índice 0”

datos[0] = 25;datos[1] = 15;datos[2] = 100;datos[3] = 50;

Objetos del lenguaje: Array bucle for

La ventaja de los arrays frente a las variables normales es que se pueden recorrer con un bucle forfácilmente.

Dado que su tamaño no es fijo, los arrays disponen de una propiedad llamada length que nos indica en cadamomento el número de elementos que hay en el array.

También se puede inicializar el array a la vez que se crea. Por ejemplo, la siguiente instrucción crearía unarray con tres nombres.

var nombres = new Array(“Juan”, “Ana”, “Beatriz”);24




La siguiente tabla nos muestra los métodos más importantes de este tipo de objeto.

Ejemplo

Hemos definido un array llamado “DiasSemana” al que le hemos asignado los 7 días de la semana.Posteriormente, utilizando los métodos join(), reverse() y sort() hemos podido listar su contenido tal y comoestá inicializado, en orden inverso y alfabéticamente.

25




Objetos del lenguaje: Math

El objeto Math nos proporciona un conjunto de funciones matemáticas de uso general en cualquier programa.

Para hacer uso de estos métodos no necesitamos crear ningún objeto especial, pudiéndose utilizar el nombregenérico del objeto.

Math.metodo();Math.propiedad;

Como propiedad más importante de este tipo de objeto está lapropiedad PI que contiene al número pi (3.1416).

En cuanto a los métodos, la siguiente tabla nos muestra los más importantes.

En la siguiente imagen se muestra un ejemplo de uso de los métodos de este objeto.

26




Objetos del lenguaje: Date

El objeto Date permite manejar fechas y horas. Como en el caso de Array, es necesario crear explícitamenteuna instancia del objeto utilizando el operador new.

var fecha_actual = new Date();

En el caso anterior, el objeto Date creado representa la fecha y hora actuales del sistema. Si quisiéramoscrear un objeto Date con una fecha y hora concretas, podríamos utilizar cualquiera de las siguientes formas.

var fecha_otra=new Date(var_año, var_mes, var_dia);var fecha_otra=new Date(v_anno, v_mes, v_dia, v_hora, v_minuto, v_segundo);Hay que tener en cuenta que JavaScript maneja las fechas en milisegundos. Los meses empiezana contar en 0 y acaban en 11, y los días van desde el 0 (Domingo) al 6 (Sábado).

Los métodos indicados en la siguiente tabla nos permiten obtener información sobre los distintos parámetrosde la fecha.

27




Por su parte, los métodos indicados en esta tabla, nos permiten manipular los diferentes datos de la fecha.

Objetos del navegador

Los objetos del lenguaje nos ofrecen muchas posibilidades a la hora de crear aplicaciones del lado cliente,sin embargo, estas posibilidades se ven multiplicadas con el uso de los objetos del navegador.

Estos objetos disponen de una serie de propiedades y métodos que puedenser utilizados en cualquier script del cliente sin tener que instanciar elobjeto, simplemente se utilizará el nombre del objeto y el operador “.” paraacceder a la propiedad o método:

window.status

28




Cuando se carga una página en un navegador se crean una serie de objetos característicos de éste, llamadosobjetos del navegador.

Como puedes ver en la siguiente imagen, los objetos del navegador están organizados jerárquicamente, loque significa que para acceder a uno de ellos hay que indicar su referencia completa.

window.document.anchor

Objetos del navegador: Window

Se trata del objeto principal de la jerarquía, representa la ventana delnavegador y cada una de las áreas o marcos definidos. Es el objeto que máspropiedades y métodos tiene, con ellos se pueden enviar mensajes alusuario, solicitar datos, definir temporizadores, etc.

De hecho, los métodos para la generación de cuadros de diálogo como alert(), prompt() o confirm(), no sonrealmente funciones del lenguaje, sino métodos del objeto window.

Mediante el objeto window se accede además al resto de objetos de la jerarquía.

window.document.formso simplemente

document.forms

window.alert(“texto”) equivale a alert(“texto”)

29




Dado que es el objeto predeterminado del navegador, se puede acceder a sus propiedades y métodosescribiendo únicamente el nombre de éstos, sin tener que indicar la palabra window delante

La siguiente tabla contiene algunas de las propiedades más importantes de este objeto. Como hemosmencionado anteriormente, este objeto es el que más propiedades y métodos tiene de todos los objetos delnavegador. Veamos también, sus métodos más importantes.

30




Objetos del navegador: Temporizadores

Un temporizador es un objeto que realiza la ejecución de una tarea transcurrido un determinado periodo detiempo. El objeto window dispone de dos métodos para generar temporizadores:

setTimeout(funcion, tiempo): genera un temporizador que realiza una llamada a la función cada vez que transcurre el

intervalo de tiempo definido en el parámetro tiempo

setInterval(funcion, tiempo): genera un temporizador que, transcurrido un determinado periodo de tiempo, hace unallamada a la función. En este caso, a diferencia de setInterval, el temporizador no se reactiva de nuevo,funcionando por tanto como un retardador. Si quisiéramos que la función se ejecutase repetidamente, seríanecesario incluir una nueva llamada a setTimeout dentro de la función:

function ejemplo(){

//código función:setTimeout(“funcion();”,1000);

}

Si queremos desactivar un temporizador creado con setInterval, debemos recurrir al método clearInterval,al que hay que pasarle como parámetro el identificador (objeto devuelto en la llamada al método) deltemporizador creado.

//activa el temporizadorvar tempo = window.setInterval(“repite();”, 500);://desactiva el temporizadorwindow.clearInterval(tempo);

31




Objetos del navegador: Apertura de una ventana

Otra de las funcionalidades que nos ofrece el objeto window es la apertura de nuevas ventanas del navegadordesde código. Para realizar esta operación recurriremos al método open().

url

Url del documento que se va a mostrar en la ventana. Cuando se quiere generar dinámicamente la páginadesde código este parámetro será cadena vacía.

nombre

Nombre asociado a la ventana. Puede utilizarse como valor del atributo target de un enlace, cuando sequiera cargar en la ventana el documento asociado al enlace.

propiedades

Permite definir distintas características de la ventana, como tamaño, posición, etc.

La llamada al método open() devuelve un objeto window que representa la nueva ventana creada.

Además de open(), window dispone de otro método llamado close() que permite cerrar el objeto windowsobre el que se aplica.

32




Ejemplo

<html><head><script language="javascript">var vent;function nuevaVentana(){

vent=window.open("","Ventana","height=100,width=300,top=200,left=400");

}function cerrarVentana(){

vent.close();}

</script></head><body><center><input type="button" value="Abrir ventana"

onclick="nuevaVentana();"/><br/><br/>

<input type="button" value="Cerrar ventana"onclick="cerrarVentana();"/>

</center></body></html>

33




Objetos del navegador: Document

El objeto document representa el documento que se está visualizando en elobjeto window, equivale a la etiqueta <body> de HTML, por lo que puedeacceder a las propiedades y métodos de este objeto utilizando document oel valor del atributo id de la etiqueta. La tabla siguiente tabla contiene laspropiedades más importantes de este objeto.

Los métodos más importantes del objeto document son:

34




write

write(texto_HTML)Mediante este método podemos escribir cualquier texto con formato HTML en el interior del documento. Estemétodo resulta útil, por ejemplo, para generar dinámicamente el contenido de una ventana abierta desdecódigo. El siguiente código corresponde a la página de ejemplo anterior encargada de abrir una ventana. Eneste caso, se incluyen instrucciones que generan un texto en el interior de la misma, así como un botón para

proceder a su cierre:

<html><head><script language="javascript">function nuevaVentana(){

var vent=window.open("","Ventana","height=100,width=300,top=200,left=400");

generarContenido(vent);}

function generarContenido(ventana){ventana.document.write("<html><body>");ventana.document.write("<h1>Texto generado desde otra

ventana</h1>");ventana.document.write("<br/><br/>");ventana.document.write("<input type='button'

value='cerrar' onclick='self.close();'/>");ventana.document.write("</body></html>");}

</script></head>

<body><center><input type="button" value="Abrir ventana"

onclick="nuevaVentana();"/><br/><br/></center></body></html>

35




getElementById ()

Otro método importante del objeto document es getElementById () el cual nos permite obtener unareferencia a un determinado objeto etiqueta existente en la página a partir de su identificador. El uso de estemétodo lo veremos más adelante cuando analicemos los objetos HTML. Como ejemplo, si tenemos unaetiqueta con el identificador asociado “objeto” <p id = “objeto”>

Para obtener una referencia al mismo sería:

var obj = document.getElementById(“objeto”);

Objetos del navegador: Location

El objeto location proporciona información sobre la ubicación deldocumento, como su dirección, nombre del servidor, etc.

Puede utilizarse en aquellas aplicaciones en las que se quieradeterminar el origen del documento. La siguiente tabla nos muestra las

propiedades más importantes de este objeto.

Veamos un ejemplo de utilización de este objeto consistente en unapágina con un botón de pulsación que al ser activado nos muestra unaserie de datos sobre el servidor y la página mostrada. Pulsa sobre laimagen.

36




Objetos del navegador: History

El objeto history representa el historial de documentos visitados. A través desus métodos y propiedades podemos desplazarnos por el historial delnavegador.

Las siguientes tablas nos muestran las propiedades y métodos más importantes de este objeto.

Objetos del navegador: Navigator

El objeto Navigator representa al propio navegador por lo que proporciona información del mismo, comonombre de la aplicación y versión.

La principal utilidad de este objeto es la identificación del tipo de navegador que se ha descargado la páginay las características admitidas por éste.

Esto suele ser de gran utilidad cuando se tiene previsto ejecutar diferentes instrucciones dependiendo deltipo y versión de navegador.

La tabla nos muestra las propiedades más importantes de este objeto.

37




Objetos etiquetas HTML

Toda etiqueta HTML representa un objeto. Como cualquier otro objeto, expone una serie de propiedades ymétodos que pueden ser utilizados desde código JavaScript.

A través de las propiedades y métodos de las etiquetas podemos modificar dinámicamente el aspecto de lapágina, alterando la posición y formato de los elementos o incluso el contenido de los mismos.

Para poder acceder a las propiedades y métodos de las etiquetas es necesario que éstas expongan el atributoid, cuyo valor representa el identificador del objeto para ser manipulado desde código.

A partir de este identificador, puede utilizarse el método getElementById() del objeto document queestudiamos anteriormente para obtener una referencia al objeto etiqueta. Esta referencia se utilizarádirectamente con el operador “.” para acceder a las propiedades del objeto.

Una de las propiedades más importantes que se indican en la tabla anterior es style. A través de ella podemosacceder individualmente a todas las propiedades de estilo CSS aplicables sobre la etiqueta.

Por ejemplo, el siguiente script modificaría tanto el grosor del texto contenido en una etiqueta como elestilo de dicho texto:

<html><head><script language=”javascript”>

var par = document.getElementById(“parrafo”);par.style.fontWeight=”bold”;par.style.fontStyle=”italic”;

</script></head><body>

<p id=”parrafo”>Texto de prueba

</p></body></html>par.innerHTML = “<center>Nuevo texto</center>”;

38




La alteración de estas propiedades de estilo en funciones manejadoras de evento permiten alterar el aspectoy formato de la página de forma dinámica ante acciones del usuario.

39




Objetos controles HTML

Los controles HTML se utilizan para solicitar datos de usuario a través de una página HTML. Estos objetosproporcionan propiedades y métodos que pueden utilizarse dentro de un script de cliente para realizar tareasdiversas como la validación de datos antes de ser enviados al servidor para su procesamiento.

A través del atributo id podemos acceder desde código a los valores de los distintos atributos de la etiqueta.

Por ejemplo, dada la definición del siguiente control caja de texto: <input type = “text” id = “dato” />

El siguiente bloque de instrucciones JavaScript nos mostraría en un cuadro de diálogo el valor introducidopor el usuario en el campo de texto:

var caja = document.getElementById(“dato”);alert (caja.value); //acceso al atributo value

En el caso de un control lista de selección, la propiedad options del mismo nos da acceso al array de objetos

<option> definidos en su interior. Por su parte, selectedIndex indica el índice del elemento seleccionado. Cadauno de los objetos <option> dispone a su vez de la propiedad value para conocer el valor del mismo, text quenos informa sobre el texto delimitado por la etiqueta o selected, que nos informa sobre si la opción seencuentra o no seleccionada.

40




Ejemplo

La siguiente página nos muestra en un cuadro de diálogo el texto de la opción seleccionada por el usuariocuando este activa el botón de pulsación:

<html>

<head><script language="javascript">function pulsar(){var obj=document.getElementById("lista");

alert(obj.options[obj.selectedIndex].text);}

</script></head><body id="cuerpo"><center><select id="lista">

<option>Opción primera</option><option>Opción segunda</option><option>Opción tercera</option><option>Opción cuarta</option>

</select><br/><br/><input type="button" value="ver opción"

onclick="pulsar();"/></center></body>

</html>

41




Comprobación de datos

Como hemos comentado anteriormente, mediante la gestión de eventos en la interfaz y utilizando laspropiedades de los controles HTML, se pueden comprobar los datos introducidos por los usuarios en unformulario antes de ser enviados al servidor.

Veamos un ejemplo, correspondiente al formulario de la imagen, se comprobará que los datos introducidosen código sean siempre numéricos y que siempre se seleccione al menos un lenguaje. El control se lleva acabo en los eventos onChange() de la caja de texto y onClick() del botón de pulsación.

42




Ejemplo

<html><head><script language="javascript">function comprobar(){var java = document.getElementById("c1");var visual = document.getElementById("c2");if(!java.checked && !visual.checked){

window.alert("Debe seleccionar algún lenguaje");}else{

//realize el envío del formulariodocument.getElementById(“formulario”).submit();

}}function numero(){

var edad = document.getElementById("edad");

if(isNaN(edad.value)){window.alert("Debe escribir un valor numérico");edad.value="";edad.focus();

}}</script></head><body id="cuerpo"><center><form name="formulario" action="registro.asp"

method="post">

Nombre:<input id="nombre"/><br/>Edad:<input id="edad" onchange="numero()"/><br/><p>Lenguajes:</p><p><input id="c1" type="checkbox">Java</p><p><input id="c2" type="checkbox">VB.Net</p><p align="center">

<input type="button" onclick="comprobar()"value="Registrar datos">

</p></form></center></body>

</html>43




6. Resumen

Has llegado al final de esta lección de formación que denominamos “El lenguaje JavaScript”En esta lección hemos estudiado los siguientes contenidos:

44




Crear una página HTML que tenga el aspecto que se indica en la siguiente imagen:

Como ves, se trata de una lista de cursos en donde dos de ellos (Java y Linux) representan enlaces que

apuntan a dos páginas de cursos ficticias.

1




En este ejercicio, deberás crear una página HTML con un formulario para la solicitud de datos de

usuario como el que se muestra a continuación:

En dicha página tendrás que incluir un script que realice la validación del formulario según los siguientes

criterios:

- Será obligatorio incluir valores en los tres campos de texto, así como elegir al menos un tipo de

trabajo.

- El campo DNI tendrá que ser numérico

- El campo email tendrá que tener un formato válido (el texto deberá incluir una “@” y al menos

un “.”.

Si se incumple alguno de estos criterios al pulsar el botón enviar, se mostrará un cuadro de diálogo con un

j i di t i t i Si l t d l it i li á l í d l d t


módulo_10_fundamentos de html y javascript

Documents