INSTITUTO UNIVERSITARIO POLITÉCNICO

“SANTIAGO MARIÑO”
EXTENSIÓN BARCELONA
ESCUELA DE INGENIERÍA EN SISTEMA

CATEDRA: ELECTIVA IV

JAVASCRIPTS

Profesor:
Ramon Aray

Integrante:

Omar Velásquez C.I: 14.763.304

Sección SN

Barcelona, Marzo de 2011

 Índice
CATEDRA: ELECTIVA IV......................................................................................1
Barcelona, Marzo de 2011.........................................................................................1
Índice..........................................................................................................................2
Introducción................................................................................................................3
¿Qué es JavaScript?.................................................................................................4
Tipos de datos ...........................................................................................................4
Tipos de datos numérico........................................................................................4
Tipo boleano...........................................................................................................5
Caracteres de escape en cadenas de texto..........................................................6
Expresiones...............................................................................................................7
Operadores................................................................................................................7
Estructuras de control de flujo.................................................................................10
Construcciones de Decisión....................................................................................10
Construcciones de Bucle.........................................................................................13
Etiqueta ‘noscript’.....................................................................................................16
Sintaxis.....................................................................................................................16
Ambitos de las variables..........................................................................................17
Variables globales................................................................................................17
Variables locales..................................................................................................17
Diferencias entre declarar variables con var, o no declararlas............................18
Sentencias break y continue....................................................................................19
Objetos del Navegador ...........................................................................................21
Jerarquía..............................................................................................................21
El objeto Window..................................................................................................22
El objeto frame.........................................................................................................22
El objeto Location.................................................................................................24
El objeto Document..............................................................................................25
El objeto Navigator...............................................................................................27
Estructura de una Funcion...................................................................................28
Llamar a una función............................................................................................29
Modelo de Objetos en JavaScript (DOM)................................................................29
Acceso a los elementos del modelo.....................................................................30
Modelos de eventos.................................................................................................30
Tooltips con Javascript.........................................................................................32
Cómo incluir JavaScript en documentos XHTML....................................................32
Formularios..............................................................................................................33
Menú desplegable....................................................................................................34
Galerías de imágenes (Lightbox).............................................................................35
Conclusión...............................................................................................................35
Bibliografia...............................................................................................................36
Introducción
JavaScript es un lenguaje de programación que se utiliza principalmente para
crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que

no es necesario compilar los programas para ejecutarlos. En otras palabras, los
programas escritos con JavaScript se pueden probar directamente en cualquier
navegador sin necesidad de procesos intermedios.

A pesar de su nombre, JavaScript no guarda ninguna relación directa con el

lenguaje de programación Java.

En este trabajo se estará abordando extensamente todo lo relacionado acerca de

este lenguaje de programación web, además se presentaran algunos ejemplos de
códigos para realizar determinadas tareas.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se utiliza para crear páginas web
dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que
aparece y desaparece, animaciones, acciones que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que

no es necesario compilar los programas para ejecutarlos. En otras palabras, los
programas escritos con JavaScript se pueden probar directamente en cualquier
navegador sin necesidad de procesos intermedios.

A pesar de su nombre, JavaScript no guarda ninguna relación directa con el

lenguaje de programación Java. Legalmente, JavaScript es una marca registrada
de la empresa Sun Microsystems

Características de JavaScript.
• Sencillo de manejar, no hace falta tener conocimientos de programación
para poder hacer un programa en JavaScript.

• Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos
definir diferentes eventos. Dichos objetos facilitan la programación de
paginas interactivas, a la vez que se evita la posibilidad de ejecutar
comandos que puedan ser peligrosos para la maquina del usuario, tales
como formateo de unidades, modificar archivos etc.

• Es dinámico, responde a eventos en tiempo real. Eventos como presionar

un botón, pasar el puntero del mouse sobre un determinado texto o el
simple hecho de cargar la página o caducar un tiempo. Con esto podemos
cambiar totalmente el aspecto de nuestra página al gusto del usuario,
evitándonos tener en el servidor un página para cada gusto, hacer cálculos
en base a variables cuyo valor es determinado por el usuario, etc.

Tipos de datos
Tipos de datos numérico

En este lenguaje sólo existe un tipo de datos numérico, al contrario que ocurre en
la mayoría de los lenguajes más conocidos. Todos los números son por tanto del
tipo numérico, independientemente de la precisión que tengan o si son números
reales o enteros. Los números enteros son números que no tienen coma, como 3
o 339. Los números reales son números fraccionarios, como 2.69 o 0.25, que
también se pueden escribir en notación científica, por ejemplo 2.482e12.

Con Javascript también podemos escribir números en otras bases, como la

hexadecimal. Las bases son sistemas de numeración que utilizan más o menos
dígitos para escribir los números. Existen tres bases con las que podemos trabajar

• Base 10, es el sistema que utilizamos habitualmente, el sistema decimal.

Cualquier número, por defecto, se entiende que está escrito en base 10.

• Base 8, también llamado sistema octal, que utiliza dígitos del 0 al 7. Para
escribir un número en octal basta con escribir ese número precedido de un
0, por ejemplo 045.

• Base 16 o sistema hexadecimal, es el sistema de numeración que utiliza 16

dígitos, los comprendidos entre el 0 y el 9 y las letras de la A a la F, para los
dígitos que faltan. Para escribir un número en hexadecimal debemos
escribirlo precedido de un cero y una equis, por ejemplo 0x3EF.

Tipo boleano

El tipo bolean, boolean en inglés, sirve para guardar un si o un no o dicho de otro

modo, un verdadero o un falso. Se utiliza para realizar operaciones lógicas,
generalmente para realizar acciones si el contenido de una variable es verdadero
o falso.

Si una variable es verdadero entonces Ejecuto unas instrucciones Si no

Ejecuto otras

Los dos valores que pueden tener las variables boleanas son true o false.

miTexto = "Pepe se va a pescar"

miTexto = '23%%$ Letras & *--*'

Todo lo que se coloca entre comillas, como en los ejemplos anteriores es tratado
como una cadena de caracteres independientemente de lo que coloquemos en el
interior de las comillas. Por ejemplo, en una variable de texto podemos guardar
números y en ese caso tenemos que tener en cuenta que las variables de tipo
texto y las numéricas no son la misma cosa y mientras que las de numéricas nos
sirven para hacer cálculos matemáticos las de texto no.
Caracteres de escape en cadenas de texto

Hay una serie de caracteres especiales que sirven para expresar en una cadena
de texto determinados controles como puede ser un salto de línea o un tabulador.
Estos son los caracteres de escape y se escriben con una notación especial que
comienza por una contra barra (una barra inclinada al revés de la normal '') y luego
se coloca el código del carácter a mostrar.

Un carácter muy común es el salto de línea, que se consigue escribiendo n. Otro

carácter muy habitual es colocar unas comillas, pues si colocamos unas comillas
sin su carácter especial nos cerrarían las comillas que colocamos para iniciar la
cadena de caracteres. Las comillas las tenemos que introducir entonces con " o '
(comillas dobles o simples). Existen otros caracteres de escape, que veremos en
la tabla de abajo más resumidos, aunque también hay que destacar como carácter
habitual el que se utiliza para escribir una contrabarra, para no confundirla con el
inicio de un carácter de escape, que es la doble contrabarra .

Tabla con todos los caracteres de escape

Salto de línea: \n

Comilla simple: \'

Comilla doble: \"

Tabulador: \t

Retorno de carro: \r

Avance de página: \f

Retroceder espacio: \b

Contrabarra: \\
Expresiones
Una expresión es un conjunto de literales (valores literales), variables, operadores
y expresiones para un sólo valor. JavaScript soporta los siguientes tipos de
expresiones:

• Aritméticas, evaluadas a un número.

• Lógicas, evaluadas como ciertas o falsas.
• Cadenas, evaluadas a una cadena de caracteres.
• Expresiones condicionales, que pueden tener uno de dos valores basados
en una condición.

Operadores
JavaScript soporta varios operadores, los cuales actúan sobre un valor o conjunto
de valores. JavaScript soporta operadores aritméticos, de cadena, lógicos y de
comparación&endash;incluyendo operadores unarios y binarios.

Tipos de operadores

Operadores Aritméticos
Operador Función
+ Suma
- Resta y negación
* Multiplicación
/ División
% Módulo: resto de la división entera
Incremento (puede ser preincremento o
++
postincremento)
Decremento (puede ser predecremento o
--
postdecremento)

Los operadores de incremento y decremento son un poco diferentes de los otros.

Cuando sumas, restas, multiplicas, divides u obtienes el resto, el valor original de
la variable permanece inalterable. En cambio, los operadores ++ y -- modifican el
valor original de la variable. Por ejemplo:

nContador++ es equivalente a nContador = nContador + 1

Operadores de Cadena
Operador Función
+ Concatena texto, como "abc"+ "def" es "abcdef"

En el caso de los operadores de cadena, + es un operador de concatenación.

Operadores Lógicos

Los operadores lógicos o boleanos se emplean para que los programas tomen
desiciones sobre lo siguiente que hay que hacer. JavaScript, como la mayoría de
los demás lenguajes, tiene dos literales boleanos: true (verdadero) y false (falso).
Los operadores lógicos se emplean para crear expresiones que requieren estos
valores verdadero o falso.

Operador Función
NO (NOT. Indica el valor contrario (negado) que
!
contiene una variable.
Y (AND). Regresa true cuando ambos operadores
&&
son verdaderos.
O (OR). Regresa true si alguno de los operadores
|| es verdadero. Sólo regresa false cuando ambos
operadores son falsos.

Al analizar operadores y expresiones lógicas, es necesario explicar la evaluación

rápida. Con ésta, JavaScript terminará de evaluar una expresión después de
evaluar el primer operando (izquierdo), si el primer operando provee la suficiente
información para evaluar la expresión. Por ejemplo:

false && otro será siempre false

true || otro será siempre true

Operadores de asignación

El símbolo = no es el único operador que asigna valores a las variables. La lista

completa es:
 Operador Ejemplo Resultado
= x=y x igual a y
+= x += y x igual a x más y
-= x -= y x igual a x menos y
*= x *= y x igual a x multiplicada por y
/= x /= y x igual a x dividida por y
%/ x %= y x igual a x módulo de y

A excepción del síbolo =, el resto de los operadores junto con ++ y --, se los
conoce como operadores abreviados, porque proporciona una forma abreviada de
escribir expresiones.

Operadores a nivel de bit

Estos operadores realizan operaciones en números como cadenas de bits. Los

operadores a nivel de bit permiten que el programador manipule estos bits para
diversos propósitos. Son operadores avanzados que estás má alla de los
propósitos de este tutorial. Sin embargo pondremos la lista para que puedas
reconocerlos en scripts de terceros.

Operador Función
& AND devuelve 1 si ambos operandos son 1
| OR devuelve 1 si al menos un operando vale 1
^ XOR devuelve 1 si los operandos son distintos

Operadores de comparación

Los operadores de comparación son similares a los operadores lógicos en que

regresan valores boleanos; pero a diferencia de los operadores lógicos, no
requieren que sus operandos sean valores boleanos.

Operador Función
== Es igual a
!= Diferente
 > Mayor que
>= Mayor o igual que
< Menor que
<= Menor o igual que

Tengase especial cuidado, al construir cortes de control,con el operador == ya que

por costumbre con otros lenguajes se suele comparar con el operador = que,
como ya vieramos, es de asignación y no de comparación.

Estructuras de control de flujo

Los programas que se pueden realizar utilizando solamente variables y
operadores son una simple sucesión lineal de instrucciones básicas.

Sin embargo, no se pueden realizar programas que muestren un mensaje si el

valor de una variable es igual a un valor determinado y no muestren el mensaje en
el resto de casos. Tampoco se puede repetir de forma eficiente una misma
instrucción, como por ejemplo sumar un determinado valor a todos los elementos
de un array.

Para realizar este tipo de programas son necesarias las estructuras de control
de flujo, que son instrucciones del tipo "si se cumple esta condición, hazlo; si no
se cumple, haz esto otro". También existen instrucciones del tipo "repite esto
mientras se cumpla esta condición".

Si se utilizan estructuras de control de flujo, los programas dejan de ser una

sucesión lineal de instrucciones para convertirse en programas inteligentes que
pueden tomar decisiones en función del valor de las variables.

Construcciones de Decisión
Estructura if

La estructura más utilizada en JavaScript y en la mayoría de lenguajes de

programación es la estructura if. Se emplea para tomar decisiones en función de
una condición. Su definición formal es:

if(condicion) {
...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las

instrucciones que se encuentran dentro de {...}. Si la condición no se cumple (es
decir, si su valor es false) no se ejecuta ninguna instrucción contenida en {...} y el
programa continúa ejecutando el resto de instrucciones del script.

Ejemplo:

var mostrarMensaje = true;

if(mostrarMensaje) {
alert("Hola Mundo");
}

En el ejemplo anterior, el mensaje sí que se muestra al usuario ya que la variable

mostrarMensaje tiene un valor de true y por tanto, el programa entra dentro del bloque
de instrucciones del if.

El ejemplo se podría reescribir también como:

var mostrarMensaje = true;

if(mostrarMensaje == true) {
alert("Hola Mundo");
}

En este caso, la condición es una comparación entre el valor de la variable

mostrarMensaje y el valor true. Como los dos valores coinciden, la igualdad se
cumple y por tanto la condición es cierta, su valor es true y se ejecutan las
instrucciones contenidas en ese bloque del if.

La condición que controla el if() puede combinar los diferentes operadores lógicos
y relacionales mostrados anteriormente:

var mostrado = false;

if(!mostrado) {
alert("Es la primera vez que se muestra el mensaje");
}

Estructura if...else

En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple
la condición, hazlo; si no se cumple, no hagas nada". Normalmente las
condiciones suelen ser del tipo "si se cumple esta condición, hazlo; si no se
cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante de la estructura if
llamada if...else. Su definición formal es la siguiente:

if(condicion) {
...
}
else {
...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las

instrucciones que se encuentran dentro del if(). Si la condición no se cumple (es
decir, si su valor es false) se ejecutan todas las instrucciones contenidas en else { }.
Ejemplo:

var edad = 18;

if(edad >= 18) {

alert("Eres mayor de edad");
}
else {
alert("Todavía eres menor de edad");
}

Si el valor de la variable edad es mayor o igual que el valor numérico 18, la

condición del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra
el mensaje "Eres mayor de edad". Sin embargo, cuando el valor de la variable edad no
es igual o mayor que 18, la condición del if() no se cumple, por lo que
automáticamente se ejecutan todas las instrucciones del bloque else { }. En este
caso, se mostraría el mensaje "Todavía eres menor de edad".

El siguiente ejemplo compara variables de tipo cadena de texto:

var nombre = "";

if(nombre == "") {
alert("Aún no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}

La condición del if() anterior se construye mediante el operador ==, que es el que
se emplea para comparar dos valores (no confundir con el operador = que se
utiliza para asignar valores). En el ejemplo anterior, si la cadena de texto
almacenada en la variable nombre es vacía (es decir, es igual a "") se muestra el
mensaje definido en el if(). En otro caso, se muestra el mensaje definido en el
bloque else { }.
La estructura if...else se puede encadenar para realizar varias comprobaciones
seguidas:

if(edad < 12) {

alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco más");
}

No es obligatorio que la combinación de estructuras if...else acabe con la

instrucción else, ya que puede terminar con una instrucción de tipo else if().

Construcciones de Bucle.
Estructura for

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de

forma repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje
cinco veces, se podría pensar en utilizar el siguiente if:

var veces = 0;

if(veces < 4) {
alert("Mensaje");
veces++;
}

Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro

del if(), se muestra el mensaje y se incrementa el valor de la variable veces. Así se
debería seguir ejecutando hasta mostrar el mensaje las cinco veces deseadas.

Sin embargo, el funcionamiento real del script anterior es muy diferente al

deseado, ya que solamente se muestra una vez el mensaje por pantalla. La razón
es que la ejecución de la estructura if() no se repite y la comprobación de la
condición sólo se realiza una vez, independientemente de que dentro del if() se
modifique el valor de la variable utilizada en la condición.
La estructura for permite realizar este tipo de repeticiones (también llamadas
bucles) de una forma muy sencilla. No obstante, su definición formal no es tan
sencilla como la de if():

for(inicializacion; condicion; actualizacion) {

...
}

La idea del funcionamiento de un bucle for es la siguiente: "mientras la condición

indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas
dentro del for. Además, después de cada repetición, actualiza el valor de las
variables que se utilizan en la condición".

• La "inicialización" es la zona en la que se establece los valores iniciales de

las variables que controlan la repetición.
• La "condición" es el único elemento que decide si continua o se detiene la
repetición.
• La "actualización" es el nuevo valor que se asigna después de cada
repetición a las variables que controlan la repetición.

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {

alert(mensaje);
}

La parte de la inicialización del bucle consiste en:

var i = 0;

Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta

zona de inicialización solamente se tiene en consideración justo antes de
comenzar a ejecutar el bucle. Las siguientes repeticiones no tienen en cuenta esta
parte de inicialización.

La zona de condición del bucle es:

i<5

Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan

de ejecutar justo después de comprobar que la condición no se cumple. En este
caso, mientras la variable i valga menos de 5 el bucle se ejecuta indefinidamente.

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del

bucle es que i sea menor que 5, si no se modifica el valor de i de alguna forma, el
bucle se repetiría indefinidamente.
Por ese motivo, es imprescindible indicar la zona de actualización, en la que se
modifica el valor de las variables que controlan el bucle:

i++

En este caso, el valor de la variable i se incrementa en una unidad después de

cada repetición. La zona de actualización se ejecuta después de la ejecución de
las instrucciones que incluye el for.

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la

quinta ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición
es que i sea menor que 5, la condición ya no se cumple y las instrucciones del for
no se ejecutan una sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a
la palabra índice y su nombre tan corto ahorra mucho tiempo y espacio.

El ejemplo anterior que mostraba los días de la semana contenidos en un array se

puede rehacer de forma más sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(var i=0; i<7; i++) {

alert(dias[i]);
}

Estructura for...in

Una estructura de control derivada de for es la estructura for...in. Su definición

exacta implica el uso de objetos, que es un elemento de programación avanzada
que no se va a estudiar. Por tanto, solamente se va a presentar la estructura for...in
adaptada a su uso en arrays. Su definición formal adaptada a los arrays es:

for(indice in array) {
...
}

Si se quieren recorrer todos los elementos que forman un array, la estructura for...in
es la forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {
alert(dias[i]);
}
La variable que se indica como índice es la que se puede utilizar dentro del bucle
for...in para acceder a los elementos del array. De esta forma, en la primera
repetición del bucle la variable i vale 0 y en la última vale 6.

Esta estructura de control es la más adecuada para recorrer arrays (y objetos), ya

que evita tener que indicar la inicialización y las condiciones del bucle for simple y
funciona correctamente cualquiera que sea la longitud del array. De hecho, sigue
funcionando igual aunque varíe el número de elementos del array.

Etiqueta ‘noscript’.
El elemento NOSCRIPT permite a los autores proporcionar contenido alternativo
cuando un script no es ejecutado. El contenido de un elemento NOSCRIPT sólo
debería ser representado por un agente de usuario capaz de reconocer scripts en
los casos siguientes:

 El agente de usuario está configurado para no evaluar scripts.

 El agente de usuario no soporta un lenguaje de scripts invocado por un
elemento SCRIPT anterior en el documento

Algunos navegadores no disponen de soporte completo de JavaScript, otros

navegadores permiten bloquearlo parcialmente e incluso algunos usuarios
bloquean completamente el uso de JavaScript porque creen que así navegan de
forma más segura.

En estos casos, es habitual que si la página web requiere JavaScript para su

correcto funcionamiento, se incluya un mensaje de aviso al usuario indicándole
que debería activar JavaScript para disfrutar completamente de la página.

Sintaxis
El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al usuario
cuando su navegador no puede ejecutar JavaScript. El siguiente código muestra
un ejemplo del uso de la etiqueta <noscript>:

<head> ... </head>

<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su funcionamiento el uso de
JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
</body>
La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body>
(normalmente se incluye al principio de <body>). El mensaje que muestra
<noscript> puede incluir cualquier elemento o etiqueta XHTML.

Ambitos de las variables

El ámbito de las variables es uno de los conceptos más importantes que
deberemos conocer cuando trabajamos con variables, no sólo en Javascript, sino
en la mayoría de los lenguajes de programación.

Se le llama ámbito de las variables al lugar donde estas están disponibles. Por lo
general, cuando declaramos una variable hacemos que esté disponible en el lugar
donde se ha declarado, esto ocurre en todos los lenguajes de programación y
como Javascript se define dentro de una página web, las variables que
declaremos en la página estarán accesibles dentro de ella.

En Javascript no podremos acceder a variables que hayan sido definidas en otra

página. Por tanto, la propia página donde se define es el ámbito más habitual de
una variable y le llamaremos a este tipo de variables globales a la página.
Veremos también se pueden hacer variables con ámbitos distintos del global, es
decir, variables que declararemos y tendrán validez en lugares más acotados.

Variables globales
Como hemos dicho, las variables globales son las que están declaradas en el
ámbito más amplio posible, que en Javascript es una página web. Para declarar
una variable global a la página simplemente lo haremos en un script, con la
palabra var.

<SCRIPT>
var variableGlobal
</SCRIPT>

Las variables globales son accesibles desde cualquier lugar de la página, es decir,
desde el script donde se han declarado y todos los demás scripts de la página,
incluidos los manejadores de eventos, como el onclick, que ya vimos que se podía
incluir dentro de determinadas etiquetas HTML.

Variables locales
También podremos declarar variables en lugares más acotados, como por ejemplo
una función. A estas variables les llamaremos locales. Cuando se declaren
variables locales sólo podremos acceder a ellas dentro del lugar donde se ha
declarado, es decir, si la habíamos declarado en una función solo podremos
acceder a ella cuando estemos en esa función.

Las variables pueden ser locales a una función, pero también pueden ser locales a
otros ámbitos, como por ejemplo un bucle. En general, son ámbitos locales
cualquier lugar acotado por llaves.

<SCRIPT>
function miFuncion (){
var variableLocal
}

</SCRIPT>

En el script anterior hemos declarado una variable dentro de una función, por lo
que esa variable sólo tendrá validez dentro de la función. Se pueden ver cómo se
utilizan las llaves para acotar el lugar donde está definida esa función o su ámbito.

No hay problema en declarar una variable local con el mismo nombre que una
global, en este caso la variable global será visible desde toda la página, excepto
en el ámbito donde está declarada la variable local ya que en este sitio ese
nombre de variable está ocupado por la local y es ella quien tiene validez. En
resumen, la variable que tendrá validez en cualquier sitio de la página es la global.
Menos en el ámbito donde está declarada la variable local, que será ella quien
tenga validez.

<SCRIPT>
var numero = 2
function miFuncion (){
var numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
</SCRIPT>

Un consejo para los principiantes podría ser no declarar variables con los mismos
nombres, para que nunca haya lugar a confusión sobre qué variable es la que
tiene validez en cada momento.

Diferencias entre declarar variables con var, o no declararlas

Como hemos dicho, en Javascript tenemos libertad para declarar o no las
variables con la palabra var, pero los efectos que conseguiremos en cada caso
serán distintos. En concreto, cuando utilizamos var estamos haciendo que la
varible que estamos declarando sea local al ámbito donde se declara. Por otro
lado, si no utilizamos la palabra var para declarar una variable, ésta será global a
toda la página, sea cual sea el ámbito en el que haya sido declarada.

En el caso de una variable declarada en la página web, fuera de una función o

cualquier otro ámbito más reducido, nos es indiferente si se declara o no con var,
desde un punto de vista funcional. Esto es debido a que cualquier variable
declarada fuera de un ámbito es global a toda la página. La diferencia se puede
apreciar en una función por ejemplo, ya que si utilizamos var la variable será local
a la función y si no lo utilizamos, la variable será global a la página. Esta diferencia
es fundamental a la hora de controlar correctamente el uso de las variables en la
página, ya que si no lo hacemos en una función podríamos sobreescribir el valor
de una variable, perdiendo el dato que pudiera contener previamente.

<SCRIPT>
var numero = 2
function miFuncion (){
numero = 19
document.write(numero) //imprime 19
}
document.write(numero) //imprime 2
//llamamos a la función
miFuncion()
document.write(numero) //imprime 19
</SCRIPT>

En este ejemplo, tenemos una variable global a la página llamada numero, que
contiene un 2. También tenemos una función que utiliza la variable numero sin
haberla declarado con var, por lo que la variable numero de la funcion será la
misma variable global numero declarada fuera de la función. En una situación
como esta, al ejecutar la función se sobreescribirá la variable numero y el dato que
había antes de ejecutar la función se perderá.
.

Sentencias break y continue

Las sentencias break y continue permiten manipular el comportamiento normal de
los bucles for para detener el bucle o para saltarse algunas repeticiones.
Concretamente, la sentencia break permite terminar de forma abrupta un bucle y
la sentencia continue permite saltarse algunas repeticiones del bucle.

El siguiente ejemplo muestra el uso de la sentencia break:

var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";
var letras = cadena.split("");
var resultado = "";

for(i in letras) {
if(letras[i] == 'a') {
break;
}
else {
resultado += letras[i];
}
}
alert(resultado);
// muestra "En un lug"

Si el programa llega a una instrucción de tipo break;, sale inmediatamente del

bucle y continúa ejecutando el resto de instrucciones que se encuentran fuera del
bucle for. En el ejemplo anterior, se recorren todas las letras de una cadena de
texto y cuando se encuentra con la primera letra "a", se detiene la ejecución del
bucle for.
La utilidad de break es terminar la ejecución del bucle cuando una variable toma
un determinado valor o cuando se cumple alguna condición.
En ocasiones, lo que se desea es saltarse alguna repetición del bucle cuando se
dan algunas condiciones. Siguiendo con el ejemplo anterior, ahora se desea que
el texto de salida elimine todas las letras "a" de la cadena de texto original:

var cadena = "En un lugar de la Mancha de cuyo nombre no quiero acordarme...";

var letras = cadena.split("");
var resultado = "";

for(i in letras) {
if(letras[i] == 'a') {
continue;
}
else {
 resultado += letras[i];
}
}
alert(resultado);
// muestra "En un lugr de l Mnch de cuyo nombre no quiero cordrme..."

En este caso, cuando se encuentra una letra "a" no se termina el bucle, sino que
no se ejecutan las instrucciones de esa repetición y se pasa directamente a la
siguiente repetición del bucle for.

La utilidad de continue es que permite utilizar el bucle for para filtrar los resultados
en función de algunas condiciones o cuando el valor de alguna variable coincide
con un valor determinado.

Objetos del Navegador

Jerarquía

Los navegadores ofrecen al programador multitud de características en forma de

un modelo jerárquico. Esta jerarquía es lo que se llama modelo de objetos del
navegador y mediante ella se pueden controlar características propias del
navegador desde qué mensaje mostrar en la barra de estado hasta la creación de
nuevas páginas con el aspecto deseado.

La jerarquía de dichos objetos toma la siguiente forma:

Para los más iniciados en la programación orientada a objetos, conviene aclarar
que en esta jerarquía, contra lo que pueda parecer, no existe herencia alguna. Los
objetos se relacionan por composición, es decir, un objeto Window se compone
(entre otras cosas) de un objeto Document, y éste a su vez se compone de
diversos objetos Form, Image, etc..

El padre de esta jerarquía es el objeto Window, que representa una ventana de

nuestro navegador. Dado que cada marco se considera una ventana distinta, cada
uno de ellos dispone de su propio objeto Window. El objeto Document representa
el documento HTML y cada uno de los objetos que lo componen se corresponden
con diversas etiquetas HTML.

El objeto Window

Es el objeto principal. Define la ventana sobre la que estamos trabajando e incluye

los objetos referentes a la barra de tareas, el documento o la secuencia de
direcciones de la última sesión.

Aún cuando el objeto se llame Window, disponemos siempre de una referencia a

él llamada window (Javascript distingue entre mayúsculas y minúsculas). Será con
esa referencia con la que trabajemos. Este hecho será común a todos los objetos
del modelo de objetos.

Por último, indicar que en Javascript, se supone que todas las propiedades y
métodos que llamamos sin utilizar ninguna referencia, en realidad se hacen
utilizando esa referencia window. Así, por ejemplo, cuando ejecutamos el método
alert() en realidad lo que estamos haciendo es ejecutar el método window.alert().

El objeto frame
Todos sabemos que la ventana del navegador puede ser dividida en varios frames
que contengan cada uno de ellos un documento en el que mostrar contenidos
diferentes. Al igual que con las ventanas, cada uno de estos frames puede ser
nombrado y referenciado, lo que nos permite cargar documentos en un marco sin
que esto afecte al resto.

Realmente cada frame se representa con un objeto window, esto quiere decir que
el objeto frame tiene todas las propiedades y métodos del objeto window.
Propiedades

• closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es

un booleano que nos dice si la ventana está cerrada ( closed = true ) o no
( closed = false ).
• defaultStatus. Cadena que contiene el texto por defecto que aparece en la
barra de estado (status bar) del navegador.
• frames. Es un array: cada elemento de este array (frames[0], frames[1], ...)
es uno de los frames que contiene la ventana. Su orden se asigna según se
definen en el documento HTML.
• history. Se trata de un array que representa las URLS visitadas por la
ventana (están almacenadas en su historial).
• length. Variable que nos indica cuántos frames tiene la ventana actual.
• location. Cadena con la URL de la barra de dirección.
• name. Contiene el nombre de la ventana, o del frame actual.
• opener. Es una referencia al objeto window que lo abrió, si la ventana fue
abierta usando el método open() que veremos cuando estudiemos los
métodos.
• parent. Referencia al objeto window que contiene el frameset.
• self. Es un nombre alternativo del window actual.
• status. String con el mensaje que tiene la barra de estado.
• top. Nombre alternativo de la ventana del nivel superior.
• window. Igual que self: nombre alternativo del objeto window actual.

Métodos

• alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo

• blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.
• clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método
setInterval(), también del objeto window). A partir de NS 4, IE 4.
• clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver
el método setTimeout(), también del objeto window).
• confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y
dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa
aceptar y devuelve false si se pulsa cancelar.
• focus(). Captura el foco del ratón sobre el objeto window actual. A partir de
NS 3, IE 4.
• open(URL, nombre, características). Abre la URL que le pasemos como
primer parámetro en una ventana de nombre 'nombre'. Si esta ventana no
existe, abrirá una ventana nueva en la que mostrará el contenido con las
características especificadas. Las características que podemos elegir para
la ventana que queramos abrir son las siguientes:
• prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que
contiene una caja de texto en la cual podremos escribir una respuesta a lo
 que nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es
opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro
de diálogo. El método retorna una cadena de caracteres con la respuesta
introducida.
• scroll(x,y). Desplaza el objeto window actual a las coordenadas
especificadas por (x,y). A partir de NS3, IE4.
• scrollBy(x,y). Desplaza el objeto window actual el número de pixels
especificado por (x,y). A partir de NS4.
• scrollTo(x,y). Desplaza el objeto window actual a las coordenadas
especificadas por (x,y). A partir de NS4.
• setInterval(expresion,tiempo). Evalua la expresión especificada después de
que hayan pasado el número de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificativo por
clearInterval(). A partir de NS4, IE4.
• setTimeout(expresion,tiempo). Evalua la expresión especificada después de
que hayan pasado el número de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificativo por
clearTimeout(). A partir de NS4, IE4.

En este ejemplo mostramos como acceder a los frames y cómo se pueden

cambiar propiedades de un frame en otro.

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<frameset cols="50%,*">
<frame name="izq" src="ejem09a.html" scrolling="auto">
<frameset rows="50%,*">
<frame name="der1" src="ejem09b.html" crolling="auto">
<frame name="der2" src="ejem09b.html" scrolling="auto">
</frameset>
</frameset>
</HTML>

El objeto Location

Se accede a este objeto por medio de la referencia window.location y contiene

información sobre la dirección de la página actual en varias propiedades.

Href
Permite el acceso a la dirección de la página actual. Si lo cambiamos
cambiaremos de página.

Protocol

Protocolo de la página actual. Habitualmente http.

Host

Máquina donde se alberga la página actual.

Patíname

Camino de la página actual.

Hash

Si hemos accedido a una página por medio de un ancla, contiene una almohadilla
seguida de ese ancla.

Ejemplo:
<script language="Javascript">
function
Localizacion()
{
alert("URL: "+window.location.href);
}
</script>

El objeto Document

Este objeto representa el propio documento HTML que se está mostrando en la

ventana del navegador. Se accede a él por medio de la referencia document
(aunque también sería válido window.document). Su mayor importancia viene por
el número de vectores que posee, que referencian a objetos Image, Form o Link,
los cuales permiten acceder a las imágenes, formularios y enlaces del documento,
respectivamente.
 • Algunas propiedades de este objeto son:

lastModified

Contiene la fecha y hora en que se modificó el documento por última vez y se

suele usar en conjunción con write para añadir al final del documento estas
características.

bgColor

Especifica el color de fondo del documento. El color deberá estar en el formato

usado en HTML. Es decir, puede ser "red" o "#FF0000", por ejemplo.

fgColor

Especifica el color de para el texto del documento.

linkColor, aLinkColor, vLinkColor

Especifican el color de los hiperenlaces del documento: iniciales, activos o ya

visitados.

title

Especifica el título del documento.

Ejemplo:

<script language="Javascript">
function
PruebasDocumento()
{
alert(document.title);
alert(document.lastModified);
}

El objeto History

Se accede a este objeto por medio de la referencia window.history y contiene

todas las direcciones que se han visitado en la sesión actual. Aunque no permite
acceder a ellas, dispone de varios métodos para sustituir el documento actual por
alguno que el usuario ya haya visitado:
back()

Volver a la página anterior., la etiqueta se ha declarado como:

<A HREF="javascript:window.history.back()">

forward()

Ir a la página siguiente.

go(donde)

Ir a donde se indique, siendo donde un número tal que go(1) significa lo mismo
que forward() y go(-1) es equivalente a back().

El objeto Navigator

Este objeto permite obtener diversas informaciones sobre el navegador donde se

está ejecutando el código JS. Se suele usar para averiguar el nombre y la versión
del navegador que ejecuta nuestro código, de forma que se puedan tomar
decisiones sobre qué tipo de código ejecutar o qué tipo de páginas mostrar.

• Algunas de sus propiedades, de sólo lectura, son:

appName

Cadena que contiene el nombre del cliente.

appVersion

Cadena que contiene información sobre la versión del cliente.

cpuClass

Informa sobre el tipo de procesador sobre el que se está ejecutando el sistema

operativo.

• Y el método con el que cuenta es:

javaEnabled()

Averigua si el navegador está configurado para soportar el uso de programas

escritos en Java, como los Applets.

Ejemplo:

<SCRIPT LANGUAGE="JavaScript">

function Navegador()
{
alert(navigator.appName);
alert(navigator.appVersion);
alert(navigator.cpuClass);
if
(navigator.javaEnabled())
alert("SÍ está preparado para
soportar Applets de Java");
else
alert("NO está preparado
para soportar Applets de Java");
}
</SCRIPT>

Funciones.
A la hora de hacer un programa ligeramente grande existen determinados
procesos que se pueden concebir de forma independiente, y que son más
sencillos de resolver que el problema entero. Además, estos suelen ser realizados
repetidas veces a lo largo de la ejecución del programa. Estos procesos se
pueden agrupar en una función, definida para que no tengamos que repetir una y
otra vez ese código en nuestros scripts, sino que simplemente llamamos a la
función y ella se encarga de hacer todo lo que debe.

Así que podemos ver una función como una serie de instrucciones que
englobamos dentro de un mismo proceso. Este proceso se podrá luego ejecutar
desde cualquier otro sitio con solo llamarlo. Por ejemplo, en una página web
puede haber una función para cambiar el color del fondo y desde cualquier punto
de la página podríamos llamarla para que nos cambie el color cuando lo
deseemos.

Estructura de una Funcion

Una función se debe definir con una sintaxis especial que vamos a conocer a
continuación.
function nombrefuncion ()
{
instrucciones de la función
}

Primero se escribe la palabra function, reservada para este uso. Seguidamente

se escribe el nombre de la función, que como los nombres de variables puede
tener números, letras y algún carácter adicional como en guión bajo. A
continuación se colocan entre llaves las distintas instrucciones de la función. Las
llaves en el caso de las funciones no son opcionales, además es útil colocarlas
siempre como se ve en el ejemplo, para que se reconozca fácilmente la estructura
de instrucciones que engloba la función.

Veamos un ejemplo de función para escribir en la página un mensaje de

bienvenida dentro de etiquetas <H1> para que quede más resaltado.

function escribirBienvenida()
{
document.write("<H1>Hola a todos</H1>")

Llamar a una función

Para ejecutar una función la tenemos que invocar en cualquier parte de la página.
Con eso conseguiremos que se ejecuten todas las instrucciones que tiene la
función entre las dos llaves.

Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por

ejemplo, así llamaríamos a la función escribirBienvenida() que acabamos de crear.

escribirBienvenida()

Modelo de Objetos en JavaScript (DOM).

La creación del Document Object Model o DOM es una de las innovaciones que
más ha influido en el desarrollo de las páginas web dinámicas y de las
aplicaciones web más complejas.
DOM permite a los programadores web acceder y manipular las páginas XHTML
como si fueran documentos XML. De hecho, DOM se diseñó originalmente para
manipular de forma sencilla los documentos XML.

A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para la

mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas
diferencias se encuentran en la forma de implementarlo.

Acceso a los elementos del modelo

Para acceder a una propiedad de un objeto del modelo se utiliza la siguiente

nomenclatura:

nombre_objeto.nombre_propiedad

Para acceder a un método, se utiliza una sintáxis similar:

nombre_objeto.nombre_metodo()

Entre paréntesis se le pasan al método los argumentos necesarios para su

ejecución. Un objeto de JavaScript es, básicamente un array. Esto quiere decir
que es posible acceder a las propieades del objeto utilizando también la sintáxis
siguiente:

nombre_objeto["nombre_propiedad"]

En el DOM, todos los objetos dependen jerárquicamente del objeto window. Para
acceder al objeto document, sería necesario usar siempre la sintaxis
window.document. Sin embargo, en JavaScript el objeto window es el objeto por
defecto, de modo que puede omitirse.

Modelos de eventos.
Tipos de eventos

En este modelo, cada elemento o etiqueta XHTML define su propia lista de

posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo,
pinchar el botón izquierdo del ratón) puede estar definido para varios elementos
XHTML diferentes y un mismo elemento XHTML puede tener asociados varios
eventos diferentes.
El nombre de cada evento se construye mediante el prefijo on, seguido del nombre
en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento
con el ratón se denomina onclick y el evento asociado a la acción de mover el
ratón se denomina onmousemove.

La siguiente tabla resume los eventos más importantes definidos por JavaScript:

Elementos para los que está

Evento Descripción
definido
<button>, <input>, <label>,
onblur Deseleccionar el elemento
<select>, <textarea>, <body>
Deseleccionar un elemento que se
onchange <input>, <select>, <textarea>
ha modificado
Onclick Pinchar y soltar el ratón Todos los elementos
Pinchar dos veces seguidas con el
ondblclick Todos los elementos
ratón
<button>, <input>, <label>,
onfocus Seleccionar un elemento
<select>, <textarea>, <body>
Elementos de formulario y
onkeydown Pulsar una tecla (sin soltar)
<body>
Elementos de formulario y
onkeypress Pulsar una tecla
<body>
Elementos de formulario y
onkeyup Soltar una tecla pulsada
<body>
La página se ha cargado
Onload <body>
completamente
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
El ratón "sale" del elemento (pasa
onmouseout Todos los elementos
por encima de otro elemento)
El ratón "entra" en el elemento
onmouseover Todos los elementos
(pasa por encima del elemento)
Soltar el botón que estaba pulsado
onmouseup Todos los elementos
en el ratón
Inicializar el formulario (borrar todos
onreset <form>
sus datos)
Se ha modificado el tamaño de la
onresize <body>
ventana del navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
Se abandona la página (por ejemplo
onunload <body>
al cerrar el navegador)
Los eventos más utilizados en las aplicaciones web tradicionales son onload para
esperar a que se cargue la página por completo, los eventos onclick,
onmouseover, onmouseout para controlar el ratón y onsubmit para controlar el
envío de los formularios.

Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset,

onsubmit) permiten evitar la "acción por defecto" de ese evento.

Las acciones típicas que realiza un usuario en una página web pueden dar lugar a
una sucesión de eventos. Al pulsar por ejemplo sobre un botón de tipo <input
type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup
y onsubmit de forma consecutiva

Tooltips con Javascript

Los tooltips son esos mensajes emergentes que surgen para añadir más
información, generalmente, a un enlace o una imagen. Los tooltips en html suelen
generarse por medio del atributo “title” y, en el caso de las imágenes,
erróneamente, con el atributo “alt” que, a pesar de presentarse como un tooltip en
muchos navegadores, es un reemplazo de texto para las mismas.

La falta de consistencia en la representación de estos mensajes por parte de los

navegadores provoca usos incorrectos que, si bien pueden servirnos en algunos
casos, producen un empeoramiento de la funcionalidad para usuarios no-visuales.
Además, en ocasiones puede resultarnos útil añadir este tipo de mensajes
emergentes a elementos que no sean enlaces o imágenes, incluso puede que
necesitemos que esta información aparezca en pantalla asociada a gestos
diferentes del de pasar el ratón por encima o, incluso, con un estilo definido por
nosotros mismos.

Cómo incluir JavaScript en documentos XHTML

La integración de JavaScript y XHTML es muy flexible, ya que existen al menos
tres formas para incluir código JavaScript en las páginas web.

Incluir JavaScript en el mismo documento XHTML

El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier

parte del documento. Aunque es correcto incluir cualquier bloque de código en
cualquier zona de la página, se recomienda definir el código JavaScript dentro de
la cabecera del documento (dentro de la etiqueta <head>):

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>

<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Para que la página XHTML resultante sea válida, es necesario añadir el atributo
type a la etiqueta <script>. Los valores que se incluyen en el atributo type están
estandarizados y para el caso de JavaScript, el valor correcto es text/javascript.

Este método se emplea cuando se define un bloque pequeño de código o cuando

se quieren incluir instrucciones específicas en un determinado documento HTML
que completen las instrucciones y funciones que se incluyen por defecto en todos
los documentos del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en el bloque

de código, es necesario modificar todas las páginas que incluyen ese mismo
bloque de código JavaScript.

Formularios
En el capítulo anterior veíamos que uno de los objetos descendientes del objeto
document era el objeto Form. En este capítulo, pues, vamos a estudiar con
detenimiento este objeto y todos sus componentes.

El objeto Form es el contenedor de todos los elementos del formulario. La

siguiente figura muestra los objetos que puede contener un objeto Form:
Como ya vimos al tratar el objeto document, los formularios se agrupan en un
array dentro de document. Cada elemento de este array es un objeto de tipo form.

• Las propiedades con las que cuenta son:

Es una cadena que contiene la URL del parámetro ACTION del

action formulario, es decir, la dirección en la que los datos del formulario serán
procesados.
Es un array que contiene todos los elementos del formulario, en el mismo
orden en el que se definen en el documento HTML. Por ejemplo, si en el
elements formulario hemos puesto, en este orden, una caja de texto, un checkbox
y una lista de selección, la caja de texto será elements[0], el checkbox
será elements[1] y la lista de selección será elements[2].
Es una cadena que tiene el nombre del método con el que se va a
method
recibir/procesar la información del formulario (GET/POST).
• Y los métodos del objeto Form son:

Resetea el formulario: tiene el mismo efecto que si pulsáramos un botón

reset()
de tipo RESET dispuesto en el formulario.
Envía el formulario: tiene el mismo efecto que si pulsáramos un botón de
submit()
tipo SUBMIT dispuesto en el formulario.

Menú desplegable.
La navegación de algunas páginas web se realiza mediante menús desplegables,
que disponen de varios niveles jerárquicos que se despliegan a medida que el
usuario pasa el puntero del ratón por encima de cada elemento. Aunque CSS
permite realizar menús desplegables horizontales y verticales de cualquier nivel de
profundidad, los navegadores de la familia Internet Explorer versión 6.0 y
anteriores no disponen del suficiente soporte de CSS como para crear este tipo de
menús.

De esta forma, la única forma de crear un menú desplegable que funcione

correctamente en cualquier navegador consiste en utilizar JavaScript. A pesar de
que realizar un menú desplegable sencillo con JavaScript no es una tarea muy
compleja, se va a utilizar un componente ya realizado que pertenece a la librería
de desarrollo web de Yahoo.

Galerías de imágenes (Lightbox)

Muchos sitios web utilizan galerías de imágenes para mostrar sus productos y
servicios. Este tipo de galerías muestran una serie de miniaturas de imágenes que
se amplían al pinchar sobre cada imagen. Hasta hace poco, la técnica más
utilizada para construir una galería consistía en incluir las miniaturas en la página y
abrir cada imagen grande en una ventana emergente (o pop-up) o en una nueva
página.

El uso de técnicas basadas en JavaScript ha supuesto una revolución en la

creación de las galerías de imágenes y ha permitido mejorar la experiencia de
navegación del usuario. La técnica se conoce como Lightbox y fue creada
originalmente por Lokesh Dhakar. Lightbox es una técnica muy sencilla de utilizar,
funciona correctamente en todos los navegadores y permite mantener la
semántica del documento (no ensucia la página con código JavaScript).

Conclusión
La importancia de javascript en el diseño de paginas web es que nos permite una
mayor interacción con el medio ya sea agregando comentarios editando fechas,
nos convierte en parte de la web, es un lenguaje fácil de dominar y que nos aporta
un valor agregado a las funciones que puedan desarrollar nuestro sitio web.

Es un lenguaje real, es decir, al usarse en el desarrollo web, e integrado dentro un

documento html, que incluye, lógicamente html (que no es un lenguaje), se tiende
a pensar que no es de verdad.
Bibliografia

www.sangoogle.com