JavaScript 1. Introducción

JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
1
JavaScript
1. Introducción
JavaScript es un lenguaje de Script que se incluye directamente en las páginas Web y
que el navegador interpreta junto con los demás códigos HTML. Los navegadores que
son compatibles con JavaScript tienen el intérprete incorporado. Al escribir las páginas
HTML se puede incluir una serie de instrucciones JavaScript. El navegador lee estas
instrucciones y las “interpreta”, es decir, las ejecuta.
El código que se escriba en JavaScript debe ir comprendido entre las etiquetas:
<SCRIPT LANGUAGE=”JAVASCRIPT”>
y
</SCRIPT>
Hay versiones antiguas de los navegadores que no tienen incorporado el intérprete. Para
evitar que estos navegadores muestren el código como si fuera texto, se puede ocultar
este código. Para ello se colocarán las sentencias JavaScript entre las marcas de
comentario HTML:
<SCRIPT LANGUAGE=”JAVASCRIPT”>
<!-Sentencias
//-->
</SCRIPT>
JavaScript trabaja con objetos. Estos objetos tienen propiedades y métodos asociados.
Las propiedades son características de los objetos y los métodos son acciones asociadas
a esos objetos. La forma de utilizarlos y de referirse a ellos es la siguiente:
Para referirnos a un objeto, escribimos su nombre:
objeto
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
2
Para referirnos a una propiedad escribimos el nombre del objeto seguido de un punto y
el nombre de la propiedad:
objeto.propiedad
Para referirnos a un método escribimos el nombre del objeto seguido de un punto y el
nombre del método seguido de paréntesis, entre los que debemos colocar los parámetros
de entrada de ese método en caso de que los tenga:
objeto.método()
objeto.método(parámetro1, parámetro2…)
Prestemos especial atención al hecho de que para ejecutar un método asociado a un
objeto, hay que escribir objeto.método() -atención a los paréntesis, son necesarios
aunque el método no lleve parámetros-. Para referirse a una propiedad, se escribirá
objeto.propiedad -sin paréntesis-.
Veamos un pequeño ejemplo:
document.write(document.referrer)
document.write(document.lastModified)
En este ejemplo, document es un objeto, que se refiere al documento con el que
estamos trabajando; write( ) es un método que escribe en el documento, y referrer y
lastModified son propiedades del documento, que identifican, respectivamente, la
página de la que se procede y la fecha de modificación del fichero.
Los objetos, además de métodos y propiedades también pueden tener asociados gestores
de eventos. Evento se refiere a algo que ocurre cuando el usuario realiza alguna acción:
abre o cierra el documento, pasa el ratón sobre algo, hace un click... Se puede hacer que
JavaScript responda a un evento determinado utilizando los gestores de eventos. La
sintaxis básica para ello es:
<ETIQUETA atributos GestorDeEventos=”CódigoJavaScript”>
ETIQUETA sería el nombre de la etiqueta (TAG) que se esté utlizando, atributos los
atributos de esa etiqueta, GestorDeEventos es el gestor que se quiera utilizar y
CódigoJavaScript es la instrucción a procesar cuando se produzca ese evento.
Los gestores de evento básicos son los siguientes:
onAbort: Ejecuta el código asociado cuando se aborta la carga de una imagen.
Esto se puede producir al seleccionar otro URL , al presionar el botón de "stop"
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
3
o el de "back", al presionar la tecla de "escape", o cualquier otra acción que
interrumpa la carga. Se utiliza con el objeto image.
onBlur: cuando el foco se aleja de un elemento de formulario. Puede utilizarse
con los siguientes objetos: select, text, textarea.
onChange: cuando el foco se aleja de un elemento de formulario, una vez que el
contenido ha cambiado. Puede utilizarse con los siguientes objetos: select, text,
textarea.
onClick: cuando el usuario hace click en un elemento de formulario o en un
vínculo. Puede utilizarse con los siguientes objetos: button, checkbox, radio,
link, reset, submit.
onError: Ejecuta el código asociado cuando se produce un error en la carga de
una imagen, esto es, el browser no localiza la imagen en el servidor. Se utiliza
con el objeto image.
onFocus: cuando el foco se traslada a un elemento de formulario. Puede
utilizarse con los siguientes objetos: select, text, textarea.
onLoad: cuando la página se carga. Puede utilizarse con los objetos window e
image.
onMouseOut: cuando el usuario aleja el ratón de un vínculo. Puede utilizarse
con el objeto link.
onMouseOver: cuando el usuario señala con el ratón un vínculo. Puede
utilizarse con el objeto link.
onSelect: cuado el usuario selecciona algo en un elemento de formulario. Puede
utilizarse con los siguientes objetos: text, textarea.
onSubmit: cuando el usuario envía un formulario. Puede utilizarse con el objeto
form.
onUnload: cuando se pasa a otra página. Puede utilizarse co el objeto window.
Hay una serie de objetos predefinidos que se refieren a cosas como la ventana actual, el
documento sobre el que trabajamos, o el navegador que estamos utilizando. Ahora
veamos estos objetos junto con sus métodos, propiedades y gestores de eventos
asociados.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
4
2. El objeto window
Es el objeto de más alto nivel para cada objeto document, location, y history.
2.1.
Propiedades
defaultStatus es el mensaje mostrado por defecto en la barra de estado.
frames es un array con todas las frames de la ventana.
length es el número de frammes de la ventana.
name es el argumento windowName.
parent es un sinónimo de windowName y se refiere a una ventana que tiene
frames.
self es un sinónimo de windowName y se refiere a la ventana actual.
status es un mensaje para la barra de estado.
top es un sinónimo de windowName y se refiere a la ventana de más alto nivel
del navegador.
window es un sinónimo de windowName y se refiere a la ventana actual.
Para trabajar con este objeto, veamos en primer lugar el ejemplo 1, que
nos enseña cómo colocar mensajes en la barra de estado de la ventana.
2.2.
Métodos
alert("message"): Muestra una caja de diálogo de alerta con el mensaje elegido
y un botón de aceptar.
message es un string o la propiedad de algún objeto.
Tenemos un ejemplo de este método en el ejemplo 2, que nos dice cómo
mostrar estas ventanas de alert.
close(): cierra la ventana.
confirm("message") : Muestra una caja de diálogo de confirmación con el
mensaje elegido y los botones de aceptar y cancelar.
message es un string o la propiedad de algún objeto.
open("URL", "windowName", ["windowFeatures"]): Abre una nueva ventana
del navegador. También se puede utilizar de la siguiente manera:
[windowVar = ][window].open("URL", "windowName", ["Features"])
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
5
windowVar es el nombre de la nueva ventana. Tendremos que utilizar
este nombre cada vez que nos queramos referir a propiedades y métodos
de esa ventana.
URL es la dirección que queremos abrir en la ventana.
windowName es el nombre que tendremos que utilizar en el atributo
TARGET de los tags <FORM> o <A>, para referirnos a ella. Este
nombre sólo puede tener caracteres alfanuméricos y underscores ( _ ).
windowFeatures es una lista de opciones y valores separados por
comas. Las opciones son (se puede utilizar cualquier combinación):
toolbar[=yes|no]|[=1|0]
location[=yes|no]|[=1|0]
directories[=yes|no]|[=1|0]
status[=yes|no]|[=1|0]
menubar[=yes|no]|[=1|0]
scrollbars[=yes|no]|[=1|0]
resizable[=yes|no]|[=1|0]
width=pixels
height=pixels
pixels es un número natural que especifica la dimensión
en pixels.
En el ejemplo 3 vemos cómo abrir nuevas ventanas.
prompt(message, [inputDefault]): muestra una caja de diálogo con un mensaje
y un campo de entrada.
message es un string o la propiedad de un objeto.
inputDefault es un string, un entero o la propiedad de un objeto que
representa el valor por defecto del campo de entrada.
timeoutID = setTimeout(expression, msec): Evalúa una expresión al cabo de
los milisengundos especificados.
timeoutID es un identificador que devuelve el método setTimeout para
poder cancelar el contador.
expression es una expresión o la propiedad de un objeto.
msec expresa los milisengundos a esperar antes de evaluar la expresión.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
6
clearTimeout(timeoutID) Cancela un contador lanzado con el método
setTimeout.
2.3.
Gestores de Eventos
onLoad: El código asociado al gestor de eventos onLoad se ejecuta cuando se
termina de cargar una ventana.
Veamos el ejemplo 4, que muestra un mensaje antes de cargar una nueva
página.
onUnload: El código asociado al gestor de eventos onUnload se ejecuta cuando
se sale de una ventana.
En el ejemplo 5 se nos muestra un mensaje antes de abandonar la página.
3. El objeto document
Entendemos un objeto document como cualquier documento HTML especificado por
los tags <HEAD> y <BODY>.
Veamos más métodos y propiedades del objeto document:
3.1.
Propiedades:
alinkColor es el atributo ALINK
anchors es un array con los enlaces a otras partes del documento (ANCHORS)
bgColor es el atributo BGCOLOR
fgColor es el atributo TEXT
forms es un array con los formularios del documento
images es un array con las imágenes del documento
lastModified es la fecha de la última modificación
linkColor es el atributo LINK
links es un array con todos los enlaces del documento (LINKS)
location es la URL completa del documento
referrer es la URL del documento del que procede
title es el contenido del tag <TITLE>
vlinkColor es el atributo VLINK
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
3.2.
7
Métodos
clear(): El método clear vacía el contenido de una ventana.
open(["mimeType"]): Abre el documento para poder escribir en él con los
métodos write() y writeln().
mimeType es un argumento opcional que especifica el tipo del
documento, si no se especifica, se asume que es de tipo text/html. Hay
las siguientes posibilidades:
text/html: documento de texto con sintaxis HTML
text/plain: documento de texto.
image/gif: imagen gif.
image/jpeg: imagen jpg.
image/x-bitmap: imagen bmp.
plugIn: carga el plug-in especificado y lo utiliza como destino de los
métodos write and writeln.
close(): Cierra el documento y lo muestra en la ventana.
write(): Escribe una o varias expresiones HTML en el documento.
Los ejemplos 6 y 7 escriben en el documento utilizando el método
write().
writeln(): Escribe una o varias expresiones HTML en el documento, seguidas de
salto de línea.
4. El objeto form
form es también un objeto JavaScript. Permite introducir textos e interaccionar con
otros objetos como checkboxes, radio buttons y listas de selección. También se puede
utilizar para enviar información al servidor.
4.1.
Propie dades:
action es el atributo ACTION
elements es un array con todos los elementos del formulario
encoding es el atributo ENCTYPE
length es el número de elementos del formulario
method es el atributo METHOD
target es el atributo TARGET
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
4.2.
8
Métodos
submit(): envía el formulario al servidor http.
4.3.
Gestores de eventos
onsubmit: El código asociado al gestor de eventos onsubmit se ejecuta cuando
se produce un evento de tipo submit.
5. El objeto link
Un link es un texto o una imagen que tiene un enlace a otra página. Se define de la
forma siguiente:
<A
HREF="location or URL"
[NAME="anchorName"]
[TARGET=”windowName”]
[onClick="handlerText"]
[onMouseOvert="handlerText"]>
linkText
</A>
5.1.
Propiedades
hash especifica el nombre de un ancla (link dentro del mismo documento)
host especifica la parte hostname:port de la URL
hostname especifica host y dominio o dirección IP de un servidor
href especifica toda la URL
pathname especifica el path de la URL
port especifica el puerto utilizado por el servidor
protocol especifica el protocolo (incluye los dos puntos)
target es el atributo TARGET
5.2.
Event handlers
onClick: Ejecuta el código asociado cuando se pincha con el ratón en el link.
onMouseOver: Ejecuta el código asociado al pasar el ratón sobre el link.
onMouseOut: Ejecuta el código asociado al alejar el ratón del link.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
9
6. El objeto image
Un objeto image es una imagen que colocamos en una página HTML. Se define de la
forma siguiente:
<IMAGE
NAME="imageName"
SRC="imageSource"
HEIGHT=imageHeight
WIDTH=imageWidth
[onLoad="handlerText"]
[onAbort="handlerText"]
[onError="handlerText"]>
6.1.
Propiedades
name es el atributo NAME.
src es el atributo SRC.
6.2.
Event handlers
onAbort: Ejecuta el código asociado cuando se aborta la carga de la imagen.
Esto se puede producir al seleccionar otro URL , al presionar el botón de "stop"
o el de "back", al presionar la tecla de "escape", o cualquier otra acción que
interrumpa la carga.
OnLoad: Ejecuta el código asociado al comenzar la carga de la imagen.
OnError: Ejecuta el código asociado cuando se produce un error en la carga de
la imagen, esto es, el browser no localiza la imagen en el servidor.
7. El objeto button
Un objeto button es un elemento de un formulario, por lo que debe ser definido dentro
de un <FORM>. El objeto button es un botón que puede ejecutar un código cuando se
pulse. Este código se especifica en el gestor de eventos onClick. El botón se define de la
forma siguiente:
<INPUT
TYPE="button"
NAME="buttonName"
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
10
VALUE="buttonText"
[onClick="handlerText"]>
7.1.
Propiedades
name es el atributo NAME.
value es el atributo VALUE.
7.2.
Métodos
click(): Hace el efecto de un click con el ratón.
7.3.
Event handlers
onClick: Ejecuta el código asociado cuando se produce un evento click.
En el ejemplo 8 nos movemos por varias páginas a través de botones, y en el
ejemplo 3 utilizamos un botón para abrir una nueva ventana.
8. El objeto history
En este ejemplo se ha utilizado el objeto history. Este objeto tiene información de las
URLs que se han visitado en la sesión. Esta información se guarda en una lista y se
puede acceder a ella desde el menu “Ir” del navegador.
8.1.
Propiedades:
length: número de direcciones que contiene el objeto.
8.2.
Métodos:
back(): carga la URL que ocupa la posición anterior en la lista.
forward(): carga la URL que ocupa la posición siguiente en la lista.
go(delta | "direccion"): carga el documento elegido de la lista.
delta es un entero que indica la posición relativa del documento que se
quiere cargar.
direccion es un string que representa una URL (o una parte de una URL)
de la lista.
Veamos de nuevo el ejemplo 8.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
11
9. El objeto Checkbox
Es un objeto checkbox de un formulario.
Se define de la siguiente manera:
<INPUT
TYPE="checkbox"
NAME="checkboxName"
VALUE="checkboxValue"
[CHECKED]
[onClick="handlerText"]>
textToDisplay
9.1.
Propiedades
checked: permite seleccionar o deseleccionar el checkbox (“1” o “0”).
defaultChecked: es el atributo CHECKED.
name: es el atributo NAME.
value: es el atributo VALUE.
9.2.
Métodos
click(): simula el click del ratón.
9.3.
Gestores de Even tos
onClick: Ejecuta el código asociado cuando se produce un evento click.
En el ejemplo 9 se utiliza el onClick de un checkbox.
10.
El objeto radio
Es un objeto radio de un formulario. Consta de varios botones radio, donde sólo uno de
ellos puede estar seleccionado. Para hacer que varios botones radio pertenezcan al
mismo objeto radio, hay que poner el mismo valor en el atributo NAME.
Se define de la siguiente manera:
<INPUT
TYPE="radio"
NAME="radioName"
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
12
VALUE="buttonValue"
[CHECKED]
[onClick="handlerText"]>
textToDisplay
10.1.
Propiedades
checked: permite seleccionar o deseleccionar un botón radio (“1” o “0”)
defaultChecked: es el atributo CHECKED
length: es el número de botones de tipo radio en un objeto radio
name: es el atributo NAME
value: es el atributo VALUE
10.2.
Métodos
click(): simula el click del ratón.
10.3.
Gestores de Eventos
onClick: Ejecuta el código asociado cuando se produce un evento click.
11.
El objeto select
Es una lista de selección de un form. Puede ser una lista desplegable, en la que sólo se
puede elegir una opción, o una lista con scroll, en la que se pueden seleccionar varios
elementos.
Se define de la siguiente manera:
<SELECT
NAME="selectName"
[SIZE="integer"]
[MULTIPLE]
[onBlur="handlerText"]
[onChange="handlerText"]
[onFocus="handlerText"]>
<OPTION VALUE="optionValue" [SELECTED]>
textToDisplay [ ... <OPTION> textToDisplay]
</SELECT>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
11.1.
13
Propiedades
length es el número de opciones
name es el atributo NAME
selectedIndex es el índice de la primera opción seleccionada.
options es un array con los tags <OPTION>
El array options tiene las siguientes propiedades:
defaultSelected es el atributo SELECTED
index es el índice de una opción
length es el número de opciones en un objeto SELECT
name es el atributo NAME
selected permite seleccionar una opción
selectedIndex es el índice de la opción seleccionada
text es el texto que se muestra
value es el atributo VALUE
11.2.
Métodos
blur(): el objeto deja de tener el foco
focus(): el objeto pasa a tener el foco
11.3.
Gestores de Eve ntos
onBlur: Ejecuta el código asociado cuando el objeto deja de tener el foco.
onChange: Ejecuta el código asociado cuando el objeto pierde el foco y su
contenido ha cambiado.
onFocus: Ejecuta el código asociado cuando el objeto recibe el foco.
12.
El objeto location
El objeto location tiene información sobre la URL actual.
12.1.
Propiedades
hash: especifica un ancla en la URL.
host: es la parte NombreDelHost:puerto de la URL.
hostname: nombre y dominio del servidor o dirección IP.
href: es la URL entera.
pathname: indica la dirección del documento dentro del servidor.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
14
port: especifica el puerto del servidor.
protocol: protocolo de comunicaciones utilizado (incluye los dos puntos)
target: atributo TARGET de un link.
13.
El objeto Navigator
El objeto Navigator tiene información acerca del navegador que se está utilizando.
13.1.
Propiedades
appName: Especifica el nombre del Navegador
appVersion: Versión del Navegador
userAgent: Información completa que almacena el servidor
appCodeName: Nombre en código del Navegador
14.
Multimedia
Para cualquiera de los componentes multimedia que se han visto (audio, video,
quicktime y vrml) existen operadores JavaScript que permiten su manejo.
14.1.
Vídeo
play() – Comienza la reproducción del fichero .
stop() – Detiene la reproducción del fichero.
rewind() – Rebobina el fichero hasta el principio.
seek(frame-number) – Establece como principio un determinado frame del
fichero.
15.
Ejemplo 1. Mensajes en la barra de estado
Para mostrar mensajes en la barra de estado se utiliza la propiedad defaulStatus. Se
puede fijar en cualquier momento, por ejemplo, al cargar una página o al pulsar un
botón:
<head>
<script language=”JavaScript”>
<!—
defaultStatus=“Cargando la página”
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
15
//-->
</script>
</head>
<body onload=”defaultStatus=’Ya está’”>
16.
Ejemplo 2. Mensajes de bienvenida o de alerta
Se puede hacer que al cargar una página, el navegador muestre una ventana con un
mensaje. Para ello es necesario colocar un texto como el siguiente antes de la etiqueta
head:
<script language=”JavaScript”>
<!—
alert(“Bienvenido a mi Web!!!!!”)
//-->
</script>
Esto lo que hace es mostrar la ventana de aviso antes de cargar la página, y una vez que
el usuario pulsa el botón de aceptar se continúa con la carga de la página. También es
posible mostrar el mensaje después de haber cargado el documento. Para ello se le
añade a la etiqueta body:
<body onload=”alert(‘Bienvenido a mi Web!!!’)”>
(Hay que tener cuidado cuando se aniden comillas. Las interiores deben ser simples)
17.
Ejemplo 3. Abrir ventanas secundarias
Se puede utizar JavaScript para abrir otras ventanas del navegador. Veamos el ejemplo:
Tendríamos que escribir el siguiente código en la cabecera del documento:
<head>
<script language="JavaScript">
function AbreVentana(){
open("ejemplo1.html","Ventana1"); }
</script>
</head>
Aquí utilizamos la cabecera del documento para escribir funciones JavaScript que
podrán ser llamadas desde otras partes del documento, a través de objetos JavaScript.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
16
En este ejemplo se crea una nueva ventana del navegador en la que se carga la página
ejemplo1.html. Se utiliza el método open asociado al objeto window.
Y desde otra parte del documento, utilizando un form, podríamos hacer la siguiente
llamada:
<form>
<input type="button" name="Boton" value="Abrir ventana secundaria"
onclick="AbreVentana()">
</form>
18.
Ejemplo 4. Dirijir a los lectores automáticamente
Es muy útil, por ejemplo, si hemos cambiado nuestras páginas de dirección. Así
podemos dar el aviso del cambio y, seguidamente, cargar la página nueva.
<script language=”JavaScript”>
<!—
alert(“Nos hemos mudado. Cambia la página en tu bookmark.”)
//-->
</script>
</head>
<body onload=”location=’PaginaNueva.html’”>
El mensaje alert muestra el mensaje de aviso. Una vez que se ha pulsado el botón de
aceptar se continúa la carga de la página hasta la etiqueta body. Una vez que se ha
cargado la página, ejecuta la instrucción onload, que, en este caso, le dice la página que
tiene que cargar automáticamente.
19.
Ejemplo 5. Mensajes de despedida
Para hacer lo que se ha visto en el punto anterior pero a la hora de pasar a otra página
diferente:
<body onunload=”alert(‘No te vayas!!!’)”>
20.
Ejemplo 6. Colocar la fecha de modificación de la página
Web
Añadir a la página el siguiente código:
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
17
<SCRIPT LANGUAGE=”JAVASCRIPT”>
document.write(“Fecha de actualización:”)
document.write(document.lastModified)
</SCRIPT>
21.
Ejemplo 7. Localizar la página desde la que se llega
Hay que tener en cuenta que, para que este objeto contenga una URL, tenemos que
haber llegado a esta página a través de un link en otra página (que sería la que se vería
reflejada en la propiedad referrer). Esta propiedad contiene sólo la dirección de esa
página, no nos lleva a ella.
Página de la que procede: <BR>
<SCRIPT LANGUAGE=”JAVASCRIPT”>
document.write(document.referrer)
</SCRIPT>
22.
Ejemplo 8. Botones de navegación
JavaScript proporciona una gran variedad de botones de navegación. Por ejemplo, se
pueden añadir a la página botones que nos muevan por la páginas ya visitadas en la
sesión:
<form>
<input type=”button” value=”2 páginas Atrás” onclick=”history.go(-2)”>
<input type=”button” value=”Página Anterior” onclick=”history.back()”>
<input type=”button” value=”Avanza 2 páginas” onclick=”history.go(2)”>
<input type=”button” value=”Pag Siguiente” onclick=”history.forward()”>
</form>
23.
Ejemplo 9. Añadir mensajes en los formularios
Es posible mostrar mensajes que faciliten la comprensión de los formularios. Hacerlos
aparecer al hacer click en un elemento o al moverse de un elemento a otro:
<script language=”JavaScript”>
<!—
function Caja1(){
alert(“Si cubres este campo, tu e-mail será enviado....”)
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
18
}
//-->
</script>
<form>
<input type=”checkbox” name=”check1” onclick=Caja1()> enviar e-mail
</form>
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
24.
19
Sentencias
Como ya hemos visto, con JavaScript podemos escribir funciones compuestas por
métodos y propiedades de los objetos existentes. Además, podemos utilizar otro tipo de
sentencias similares a las de otros lenguajes de programación. Veamos las palabras
clave existentes y su sintaxis:
break
Se utiliza para terminar un bucle while o for. La ejecución continúa en la sentencia
siguiente al fin del bucle.
Ejemplos:
La siguiente función tiene un break quer termina el bucle while cuando i vale 3 y
devuelve el valor 3*x.
function func(x) {
var i = 0
while (i < 6) {
if (i == 3)
break
i++
}
return i*x
}
comentarios
// comentario hasta fin de línea
/* comentario hasta */
continue
Termina una iteración de un bucle y continua en la siguiente iteración.
Ejemplo
Este ejemplo muestra un while que tiene un continue que se ejecuta cuando el valor de i
es 3. Por lo tanto, n toma los valores 1, 3, 7 y 12.
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
20
i=0
n=0
while (i < 5) {
i++
if (i == 3)
continue
n += i
}
for
Sintaxis:
for ([expresión inicial]; [condición]; [actualización]) {
sentencias
}
Es un bucle que se ejecuta mientras se cumple la condición, empezando en la expresión
inicial y actualizándose en cada iteración según la expresión de actualización.
Ejemplo:
Este for empieza por inicializar la variable i a cero. Comprueba si es menor que 9 y, en
ese caso ejecuta las sentencias de dentro del bucle:
for (var i = 0; i < 9; i++) {
n += i
myfunc(n)
}
for...in
Sintaxis
for (var in obj) {
sentencias }
Ejecuta las sentencias para todas las propiedades del objeto obj.
Ejemplo:
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
21
Esta función devuelve un string que lista todas las propiedades de un objeto con sus
valores.
function dump_props(obj, obj_name) {
var result = ""
for (var i in obj) {
result += obj_name + "." + i + " = " + obj[i] + "<BR>"
}
result += "<HR>"
return result
}
function
Sintaxis:
function name([param] [, param] [..., param]) {
statements }
Declara el nombre de una función y sus parámetros.(Estos parámetros pueden ser
strings, números y objetos)
Para devolver un valor, debe tener una sentencia return que especifique el valor
devuelto.
Los parámetros se pasan por valor, es decir, que cualquier modificación al valor de un
parámetro no se verá reflejado.
Ejemplo:
Esta función devuelve la cantidad total de ventas, y tiene como entrada el número de
productos vendidos de cada tipo:
function calc_sales(units_a, units_b, units_c) {
return units_a*79 + units_b*129 + units_c*699
}
if...else
Sintaxis:
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
22
if (condition) {
statements
} [else {
else statements
}]
Una sentencia condicional que ejecuta las primeras sentencias si se cumple la condición.
Si no se cumple, se ejecutan las sentencias de la rama else..
Ejemplo:
if ( cipher_char == from_char ) {
result = result + to_char
x++
} else
result = result + clear_char
new
Sintaxis:
objectName = new objectType ( param1 [,param2] ...[,paramN] )
Operador que crea una instancia de un objeto definido por el usuario.
Para definir un nuevo tipo de objeto hacen falta dos pasos:
1.Definir el tipo como una función.
2.Crear una instancia del objeto con new.
Ejemplo:
1. Definir el tipo:
function car(make, model, year) {
this.make = make
this.model = model
this.year = year
}
2. Se crea una instancia del tipo car:
mycar = new car("Eagle", "Talon TSi", 1993)
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
23
return
Sintaxis:
return expresión
Especifica el valor devuelto por una función.
Ejemplo:
function square( x ) {
return x * x
}
this
Sintaxis:
this[.propertyName]
Sirve para referirse al objeto actual y a sus propiedades.
Ejemplo:
Supongamos que tenemos la siguiente función:
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
Podríamos llamarla de la siguiente forma, para referirnos a un elemento de un form:
<INPUT TYPE = "text" NAME = "age" SIZE = 3
onChange="validate(this, 18, 99)">
var
Syntax
var varname [= value] [..., varname [= value] ]
Declara una variable varname, opcionalmente inicializada al valor value. El nombre
puede ser cualquier identificador, y el valor, cualquier expresión. El dominio de la
JavaScript. Master en Creación y Comunicación Digital. Curso 97/98. Nieves Pedreira.
24
variable es la función en la que está definida o, si está definida fuera de una función, la
aplicación actual.
Ejemplo:
var num_hits = 0, cust_no = 0
while
Sintaxis:
while (condition) {
statements
}
Crea un bucle que se repite mientras se cumpla la condición.
Ejemplo:
n=0
x=0
while( n < 3 ) {
n ++; x += n
}
with
Sintaxis:
with (object){
statements
}
Cualquier referencia a una propiedad sin especificar el objeto al que está asociada, se
supone del objeto entre paréntesis.
Ejemplo:
with (Math) {
a = PI * r*r
x = r * cos(theta)
y = r * sin(theta)}
Parte 1.- JavaScript
1.
INTRODUCCIÓN ............................................................................................................................ 1
2.
EL OBJETO WINDOW ................................................................................................................... 4
2.1. PROPIEDADES.................................................................................................................................. 4
2.2. MÉTODOS ....................................................................................................................................... 4
2.3. GESTORES DE EVENTOS .................................................................................................................. 6
3.
EL OBJETO DOCUMENT ............................................................................................................. 6
3.1. PROPIEDADES: ................................................................................................................................ 6
3.2. MÉTODOS ....................................................................................................................................... 7
4.
EL OBJETO FORM ......................................................................................................................... 7
4.1. PROPIEDADES: ................................................................................................................................ 7
4.2. MÉTODOS ....................................................................................................................................... 8
4.3. GESTORES DE EVENTOS................................................................................................................... 8
5.
EL OBJETO LINK ........................................................................................................................... 8
5.1. PROPIEDADES.................................................................................................................................. 8
5.2. EVENT HANDLERS ........................................................................................................................... 8
6.
EL OBJETO IMAGE ....................................................................................................................... 9
6.1. PROPIEDADES.................................................................................................................................. 9
6.2. EVENT HANDLERS ........................................................................................................................... 9
7.
EL OBJETO BUTTON .................................................................................................................... 9
7.1. PROPIEDADES................................................................................................................................ 10
7.2. MÉTODOS ..................................................................................................................................... 10
7.3. EVENT HANDLERS ......................................................................................................................... 10
8.
EL OBJETO HISTORY ................................................................................................................. 10
8.1. PROPIEDADES: .............................................................................................................................. 10
8.2. MÉTODOS: .................................................................................................................................... 10
9.
EL OBJETO CHECKBOX ............................................................................................................ 11
9.1. PROPIEDADES................................................................................................................................ 11
9.2. MÉTODOS ..................................................................................................................................... 11
9.3. GESTORES DE EVENTOS ................................................................................................................ 11
10.
EL OBJETO RADIO ...................................................................................................................... 11
10.1.
PROPIEDADES ........................................................................................................................... 12
10.2.
MÉTODOS ................................................................................................................................. 12
10.3.
GESTORES DE EVENTOS ........................................................................................................... 12
11.
EL OBJETO SELECT ................................................................................................................... 12
11.1.
PROPIEDADES ........................................................................................................................... 13
11.2.
MÉTODOS ................................................................................................................................. 13
11.3.
GESTORES DE EVENTOS ........................................................................................................... 13
12.
EL OBJETO LOCATION ............................................................................................................. 13
12.1.
13.
EL OBJETO NAVIGATOR .......................................................................................................... 14
13.1.
14.
PROPIEDADES ........................................................................................................................... 13
PROPIEDADES ........................................................................................................................... 14
MULTIMEDIA ............................................................................................................................... 14
14.1.
VÍDEO ...................................................................................................................................... 14
15.
EJEMPLO 1. MENSAJES EN LA BARRA DE ESTADO ......................................................... 14
16.
EJEMPLO 2. MENSAJES DE BIENVENIDA O DE ALERTA ................................................ 15
17.
EJEMPLO 3. ABRIR VENTANAS SECUNDARIAS ................................................................. 15
18.
EJEMPLO 4. DIRIJIR A LOS LECTORES AUTOMÁTICAMENTE .................................... 16
19.
EJEMPLO 5. MENSAJES DE DESPEDIDA............................................................................... 16
20.
EJEMPLO 6. COLOCAR LA FECHA DE MODIFICACIÓN DE LA PÁGINA WEB .......... 16
21.
EJEMPLO 7. LOCALIZAR LA PÁGINA DESDE LA QUE SE LLEGA ................................ 17
22.
EJEMPLO 8. BOTONES DE NAVEGACIÓN ............................................................................ 17
23.
EJEMPLO 9. AÑADIR MENSAJES EN LOS FORMULARIOS ............................................. 17
24.
SENTENCIAS ................................................................................................................................. 19