Tutorial Javascript

Implantacin de Aplicaciones
Tutorial de JavaScript
NDICE
Introduccin.............................................................................................................1
La etiqueta <SCRIPT> ............................................................................................2
Gramtica.................................................................................................................3
Sentencias, bloques y comentarios..........................................................................4
Variables..................................................................................................................5
Tipos de datos..........................................................................................................6
Procedimientos y funciones.....................................................................................7
Operadores.............................................................................................................10
Estructuras de control de flujo...............................................................................12
Objetos...................................................................................................................15
Objetos del lenguaje...............................................................................................16
Eventos...................................................................................................................22
Objetos del navegador............................................................................................24
Formularios............................................................................................................35
Introduccin
Ya que has seguido un curso de HTML, puedes observar una cosa: crear un
documento HTML es crear algo de carcter esttico, inmutable con el paso del
tiempo. La pgina se carga, y ah termina la historia. Tenemos ante nosotros la
informacin que buscbamos, pero no podemos interactuar con ella. As pues, como
solucin a este problema, nace JavaScript. Y qu es JavaScript?
Se trata de un lenguaje de tipo script (guin), basado en objetos y guiado
por eventos diseado especficamente para el desarrollo de aplicaciones
cliente-servidor dentro del mbito de Internet.
Los programas JavaScript van incrustados en los documentos HMTL (entre
las etiquetas <SCRIPT> y </SCRIPT>), y se encargan de realizar acciones en el
cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear
animaciones, mostrar "popups" o texto que sigue al ratn, comprobar campos...
Los programas en JavaScript no generan ningn tipo de cdigo compilado, sino que
ste se interpreta en el navegador de Internet una vez se descarga la pgina que lo
contiene. JavaScript, por tanto, es un lenguaje interpretado.
Este curso pretende iniciarte en el uso de este lenguaje. Observa en esta pgina
algunas de las aplicaciones de JavaScript y comienza a estudiar siguiendo el orden
establecido en el ndice.
La etiqueta <SCRIPT>
JavaScript (desde ahora JS) es un lenguaje de script, de guiones, creado
originalmente por la empresa Nestcape, que se inserta en las pginas web
mediante la etiqueta <SCRIPT> de HTML.
Una vez que el navegador descarga una pgina que contiene un script se encarga
de interpretarlo y de ejecutarlo. As se consigue la independencia del script frente a
la plataforma. Lo nico que necesitamos, pues, es un navegador que interprete
scripts!
Existen varias versiones del lenguaje JS y adems diferentes nmeros de versin
para cada navegador, por ejemplo, JavaScript 1.3 para Nestcape Navigator 4.06 y
4.6 o JScript 5 para Microsoft Internet Explorer 5.0, entre otros.
La etiqueta <Script> puede insertarse en cualquier parte de la pgina, aunque
frecuentemente se sita en la seccin de cabecera. Mediante el atributo language
se debe indicar si se trata de un script de JS o de cualquier otro lenguaje (si no se
indica se sobreentiende que es un script de JavaScript):
<Script language="JavaScript">
<!-cdigo
//-->
</Script>
Los smbolos  evitan que los navegadores que no puedan interpretar
scripts interpreten el cdigo de stos como parte del contenido de la pgina. Para
facilitar la lectura del cdigo a veces no se incluyen tales smbolos en los ejemplos
de este curso.
Y si el navegador no soporta scripts? Pues se puede agregar la etiqueta especial
<NOSCRIPT></NOSCRIPT> que mostrar su contenido si el navegador no
soporta lenguajes de guiones.
Una pgina web puede contener ms de un script. Su orden de ejecucin
corresponde a su orden de aparicin en la pgina. Si bien hay scripts que no son
ejecutados hasta que el usuario lleve a cabo alguna accin (como los manejadores
de eventos) o el estado de la pgina cambie por algn motivo (por ejemplo, porque
se acaba de procesar todo el documento).
Gramtica
Ya que conoces otro lenguaje de programacin ests familiarizado con el uso de
variables, operadores, declaraciones... Lo que se resume en la tabla siguiente son
los elementos principales de la gramtica de JS.
Variables
Etiquetas que se refieren a un valor cambiante.
Operadores
Pueden usarse para calcular o comparar valores. Ejemplo: pueden

sumarse dos valores, pueden compararse dos valores...
Expresiones
Cualquier combinacin de variables, operadores, y declaraciones

que evalan un resultado.
Sentencias
Una sentencia puede incluir cualquier elemento de la gramtica

de JavaScript. Las sentencias de JavaScript pueden tomar la forma
de condicional, bucle, o manipulaciones del objeto. La forma
correcta para separarlas es por punto y coma, obligatorio slo si
las declaraciones mltiples residen en la misma lnea. De todas
formas es recomedable acostumbrarse a terminar cada
instruccin con un punto y coma.
Objetos
Estructura "contenedora" de valores, procedimientos y funciones.

Cada valor refleja una propiedad individual de ese objeto y cada
funcin o procedimiento, llamado mtodo, acta sobre el objeto.
Funciones y
Mtodos
Una funcin de JavaScript es bastante similar a un"

procedimiento" o "subprograma" en otro lenguaje de
programacin. Una funcin es un conjunto de sentencias que
realizan alguna accin. Puede aceptar valores entrantes (los
parmetros), y puede devolver un valor saliente. Un mtodo
simplemente es una funcin contenida en un objeto.
Nota importante:
JavaScript es sensible a maysculas y minsculas, todos los elementos de JS deben
referenciarse como se definieron, no es lo mismo Variable1 que variable1.
Sentencias, bloques y comentarios

En un script nos podemos encontrar con tres tipos de instrucciones: sentencias,
bloques y comentarios.
Las sentencias son instrucciones que llevan a cabo alguna tarea. Por ejemplo la
siguiente sentencia, al ser ejecutada por el navegador, muestra una ventana con el
mensaje Bienvenido al curso de Java Script:
alert("Bienvenido al curso de Java Script")
Observa que este cdigo se ejecuta cuando pulsamos sobre el botn. No se ejecuta
al cargarse la pgina. Si nuestra intencin fuera sta tendramos que incluirlo (por
ejemplo en la seccin de cabecera) de la manera siguiente:
<Script>
alert("Bienvenido al curso de Java Script")
</Script>
Se pueden escribir en una misma lnea ms de una sentencia de cdigo. Para
indicar entonces al intrprete donde acaba cada sentencia se utiliza el smbolo ;
(aunque siempre es aconsejable su uso tras cualquier sentencia).
alert("Esto es un mensaje");alert("Y este, otro")
</Script>
Los bloques no son ms que conjuntos de sentencias agrupadas que llevan a cabo
una accin especfica dentro del cdigo. En JS las sentencias se agrupan mediante
los smbolos { y }. El siguiente cdigo te preguntar por tu nombre. Si escribes
Alicia obtendr dos mensajes. No te preocupes por entender todo el cdigo!
Simplemente fjate en las dos sentencias incluidas entre llaves:
nombre = prompt("Introduzca su nombre por favor", "")
if(nombre == "Alicia")
{
alert("Hola " + nombre);
alert("Hoy vamos a estudiar JavaScript");
}
</Script>
Por ltimo mediante los comentarios podemos hacer explcito a otros (o a
nosotros mismos en un futuro) las tareas llevadas a cabo por nuestro cdigo. JS
utiliza el smbolo // para especificar un comentario de una lnea y /* y */ para
encerrar los comentarios de ms de una lnea. Los comentarios no son
interpretados por el navegador:
//La siguiente sentencia te desea unos "buenos das"
alert("Buenos das")
Tambin se suelen situar a la derecha del cdigo:
alert("Buenas noches") //Te desea "buenas noches"
Variables
Las variables son una de las piezas clave de todo lenguaje de programacin. Las
variables nos permiten almacenar y manipular datos.
Generalmente antes de usar una variable hay que declararla. Declarar una
variable no es ms que reservar una regin de la memoria de trabajo del ordenador
para su uso posterior. La siguiente sentencia declara una variable denominada
cadena mediante la palabra reservada var:
var cadena
Nota 1: Los nombres de las variables pueden contener letras, nmeros y el smbolo _.
No se puede utilizar un nmero como primer carcter del nombre de una variable.
Por ahora slo hemos reservado espacio en memoria. An no hemos asignado
ningn valor. Si quisieras asignar tal valor a las variables anteriormente declaradas
tendras que escribir los siguientes cdigos:
var cadena
cadena = "Alicia"
//declara la variable
//asigna el valor "Alicia"
Hemos declarado primeramente las variables y posteriormente les hemos asignado

mediante el operador de asignacin = el valor alfanumrico Alicia (fjate que va
entrecomillado).
Nota 2: Las declaraciones anteriormente expuestas reciben el nombre de
declaraciones explcitas. Pero JS acepta tambin la declaracin implcita de sus
variables:
cadena = "Alicia"
La diferencia estriba en que se asigna directamente el valor a la variable sin incluir
la palabra var. Generalmente la ejecucin de un programa es ms rpida cuando se
reserva espacio con antelacin para sus variables. Pero nos encontraremos con
ejemplos de cdigo que utilicen este modo de declaracin.
Nota 3: JS es sensible a las maysculas. Fjate en el siguiente cdigo:
var cadena
cadena = "Lewis"
Cadena = "Alicia"
alert(cadena)
Tipos de datos
JS es un lenguaje "poco tipado" ya que posee muy pocos tipos distintos de datos.
Cuando declaramos una variable sta no pertenece a ningn tipo en concreto
(undefined) hasta que se le asigna un valor. Son correctas las siguientes
asignaciones:
var mivariable;
mivariable=123.72;
mivariable=true;
mivariable="Hola a todos";
Los tipos de valores que pueden ser asignados a una variable son bsicamente los
siguientes:
Numricos
(Number)
Comprenden los nmeros enteros (como 3, 456, -8767, etc.) y

en coma flotante (como 3.5, 0.5689, etc.)
Alfanumricos
(String)
Tambin denominados cadenas que comprenden cualquier

secuencia de signos entre comillas. Por ejemplo: "Alicia", "091",
"Los caballeros de la mesa redonda" o incluso "" (denominada
cadena vaca)
Booleanos
(Boolean)
Comprenden los valores true y false (verdadero y falso) que

nos van a permitir sobre todo evaluar expresiones
condicionales. Se les denomina indicadores
Referencias a
objetos (Object)
Los objetos son colecciones de propiedades y mtodos que

estudiaremos ms adelante
En funcin del tipo de valor asignado a una variable diremos que la variable es de
tipo number, string, boolean, object, etc. Veamos un ejemplo:
numeroEntero = 4
numeroCFlotante = 0.5
cadena = "Alicia"
booleano = true
referenciaObjeto = window
En el ejemplo anterior aparece el valor contenido en la variable y el tipo de dato
que es. Esto ltimo se consigue gracias a la funcin typeof(), que devuelve una
cadena indicando el tipo de dato de la variable que se le enva como parmetro.
Quizs te ests preguntando qu valores contienen las variables que an no han
sido inicializadas (es decir, que slo han sido declaradas) y a que tipos pertenecen.
En el caso de JS una variable que no ha sido inicializada es de tipo undefined y
contiene el valor especial null.
var nombre
alert(nombre)
Procedimientos y funciones
Los procedimientos y las funciones nos van a permitir llevar a cabo diferentes
tareas. Por ahora slo hemos visto como declarar y asignar valores (si bien la
sentencia alert es en realidad un mtodo del objeto window, como veremos ms
adelante). La diferencia entre los procedimientos y las funciones es que estas
ltimas adems de llevar a cabo una tarea devuelven un valor. Veamos
primeramente un ejemplo de un procedimiento:
function buenosDias()
{
alert("Buenos das")
}
buenosDias()
</Script>
JS utiliza la palabra reservada function. Los argumentos deben ir entre parntesis.
Si no hay argumentos simplemente aparecern los parntesis. El cuerpo de la
funcin se sita entre llaves. La nica sentencia del cuerpo en el ejemplo es
alert("Buenos das"). La ltima sentencia se limita a llamar al procedimiento por su
nombre. Obsrvese que JS incluye parntesis despus del nombre del
procedimiento.
Si incluimos este script en una pgina web obtendremos el mensaje de buenos das
correspondiente. Si bien, para esto, sera ms fcil incluir simplemente la sentencia
alert apropiada. Ahora bien, imagina que el cdigo correspondiente a los
procedimientos slo se ejecute cuando el usuario pulse sobre un determinado botn
de la pgina (como en los ejemplos de este curso):
function buenosDias1()
{
alert("Buenos das")
}
</Script>
El cdigo HTML para el botn sera:

<Input type="button" value="Plsame"
language="javascript" onclick="buenosDias1()">
El atributo language indica al navegador el lenguaje de script a utilizar. Y el atributo
onclick ejecuta el cdigo que tenga asignado cuando el usuario pulse sobre el
botn.
Cuando hablamos sobre la etiqueta <Script> mencionamos que algunos scripts no
son ejecutados hasta que el usuario lleve a cabo alguna accin. Los casos
anteriores son una muestra de ello.
Veamos ahora un ejemplo de funcin:
function suma1(a, b)
{
}
c = a + b
return c
total = suma1(3, 2)
alert(total)
</Script>
Como antes utiliza las mismas normas para nombrar funciones y parntesis para
sus argumentos. A diferencia del ejemplo anterior, en ste la funcin tiene dos
argumentos, a y b, que recibirn los valores 3 y 2 cuando sea llamadas mediante la
expresin suma1(3, 2). Posteriormente en el cuerpo de la funcin se asigna a c el
resultado de sumar los valores a y b, tras lo cual se devuelve el resultado de c
mediante la sentencia return a la variable total. Por ltimo las sentencias siguientes
son las encargadas de pasar los valores a la funcin, recibir el resultado de la
operacin de sta y finalmente mostrar el resultado mediante una sentencia alert.
Al igual que antes, podemos llamar a esta funcin mediante un botn. Pero esta vez
vamos a complicar un poco ms las cosas. Vamos a pedir al usuario que introduzca
los dos nmeros a ser sumados:
function suma3()
{
uno = prompt("introduzca un nmero", "")
dos = prompt("introduzca otro nmero", "")
c = uno + dos
return c
}
</Script>
La funcin prompt(), al igual que la sentencia alert, es un mtodo del objeto window
que nos permite mostrar una peticin al usuario. Debe incluirse la cadena vaca
como segundo argumento para evitar que aparezca la cadena undefined en el
cuadro de texto donde el usuario debe introducir los datos, por defecto.
Seguramente te habrs percatado de que las funciones anteriores no realizan la
adicin de los valores introducidos, como era de esperar, sino que se limitan a
concatenar tales valores. Esto se debe a que prompt() devuelve una cadena no un
valor numrico y a que el operador + concatena cadenas cuando alguno de sus
operandos es una cadena. Para evitar esto se deben convertir los valores devueltos
por prompt() a valores numricos mediante la funcin parseInt() de la manera
siguiente:
function suma5()
{
uno = prompt("introduzca un nmero", "")
dos = prompt("introduzca otro nmero", "")
c = parseInt(uno) + parseInt(dos)
return c
}
</Script>
Las funciones como parseInt(), del objeto Global, nos ahorran trabajo en la
elaboracin de nuestro cdigo. JS cuenta con un gran nmero de funciones de este
tipo para llevar a cabo operaciones relacionadas con el tipo de las variables, las
cadenas, las fechas y ciertos clculos matemticos. En JS las operaciones
concernientes a cadenas, fechas y operaciones matemticas son tratadas como
mtodos de objetos. Los estudiaremos ms adelante.
Nota 1: Las funcin parseFloat() acomete la misma tarea para valores en coma
flotante.
Nota 2: Las variables declaradas en el mbito de una funcin o procedimiento
reciben el nombre de variables locales. Cada vez que se llama a una funcin o
procedimiento que contenga una declaracin de una variable local sta es cargada
en la memoria del ordenador hasta que se sale de la funcin o procedimiento.
Deben ser declaradas explcitamente:
function local()
{
var nombre
nombre = "Alicia"
alert(nombre)
}
local()
alert(nombre)
Una vez que se llame a los correspondientes procedimientos se mostrar el
contenido de la variable nombre. Ahora bien, una vez se sale del procedimiento ste
se descarga de memoria produciendo un error en tiempo de ejecucin en JS.
Las variables declaradas fuera del mbito de una funcin reciben el nombre de
globales. A diferencia de las anteriores se encuentran disponibles en memoria
durante toda la ejecucin del programa:
var numero
numero = 5
function global()
{
numero = 3
}
global1()
alert(numero)
Nota 3: En JS las variables se pasan a las funciones por valor, igual que en C:
var numero
numero = 5
function valor(n)
{
n = n - 3
}
valor(numero)
alert(numero)
En JS la sentencia valor(numero) pasa el valor de numero, es decir un 5, al argumento n
del procedimiento. Por lo tanto la variable numero no se ve afectada por las
operaciones llevadas a cabo por el procedimiento.
Nota 4: En cualquier momento podemos salir de un procedimiento o funcin

mediante la sentencia return.
Operadores
Los smbolos encargados de llevar a cabo unas determinadas operaciones con unos
determinados valores reciben el nombre de operadores y los fragmentos de
cdigo en los cuales aparecen se denominan expresiones. La expresin n = a + 3
es numrica porque el valor resultante de llevar a cabo la operacin que la integra
es de tipo numrico. Pero tambin hay expresiones de tipo cadena, booleanas, etc.
Veremos a continuacin los diferentes tipos de operadores ms usados en JS:
Aritmticos
*
Efecta una multiplicacin entre sus operandos. Ej. 3*4 es igual a 12.
Efecta una divisin entre sus operandos. Ej. 3/4 es igual a 0.75.
Efecta una adicin entre sus operandos. Ej. 3 + 2 es igual a 5. En JS, si alguno de los operandos
es una cadena se obtiene una concatenacin de los operandos. Ej. "Alicia tiene " + 5 + " aos" es
igual a 'Alicia tiene 5 aos'.
Efecta una substraccin de sus operandos. Ej. 3 - 2 es igual a 1. Tambin funciona como signo
negativo de un nmero.
Obtiene el resto de sus dos operandos. Ej. 10 % 3 es igual a 1.
JS posee dos operadores adicionales ++ y -- que permiten incrementar o

decrementar a la variable a la que acompaa:
a
b
a
b
=
=
=
=
5
++a
10
a++
//Asigna 5 a 'a'
//a y b valen 6.
//asigno 10 a 'a'
//b vale 10 no 11! a vale 11
Observa que el comportamiento del operador es diferente segn su posicin con

respecto a la variable. Si antecede a la variable primero aade una unidad a sta y
luego se asigna el valor resultante a b. Si por el contrario precede a la variable,
primero se efecta la asignacin del valor de a a b (por eso b vale 10) y despus se
suma un 1 a a. El operador -- funciona de la misma manera.
De comparacin
==
Devuelve true si ambos operandos contienen el mismo valor numrico, alfanumrico, booleano o la
misma referencia a objeto.
!=
Devuelve true si ambos operandos no contienen el mismo valor numrico, alfanumrico, booleano
o la misma referencia a objeto.
<
Efecta una comparacin entre sus operandos devolviendo true si el primer operando es menor o
anterior que el segundo. Ej. 3 < 4 es igual a true.
>
Efecta una comparacin entre sus operandos devolviendo true si el primer operando es mayor o
posterior que el segundo. Ej. 3 > 4 es igual a false.
<=
Efecta una comparacin entre sus operandos devolviendo true si el primer operando es menor o
igual que el segundo. Ej. 3 <= 4 es igual a true.
>=
Efecta una comparacin entre sus operandos devolviendo true si el primer operando es mayor o
igual que el segundo. Ej. 3 <= 4 es igual a false.
10
===
Devuelve true si existe igualdad estricta entre los operandos; es decir, coinciden en contenido y en
tipo. Ej. var a="3"; varb=3; se cumple que a==b, pero no se cumple que a===b.
JS incluye un operador especial de asignacin op= que permite a cualquier

operador aritmtico binario (de dos operandos) escribir el cdigo de la siguiente
manera:
a
b
b
b
b
b
= 5
= 4
+= a
-= a
*= a
/= a
//Es
//Es
//Es
//Es
equivalente
equivalente
equivalente
equivalente
a
a
a
a
b
b
b
b
=
=
=
=
b
b
b
b
+
*
/
a
a
a
a
Lgicos
!
Cambia el valor booleano de su operando. Devuelve true si su operando es false, y false si su

operando es true.
&&
Devuelve true si sus operandos son true.
||
Devuelve true si al menos uno de sus operandos es true.
Otros operadores
Asigna un valor especificado a una variable si la condicin
(condicin) ? trueVal :
es true, por otra parte asigna un valor alternativo si la
falseVal
condicin es false.
new
El operador 'new' crea una instancia de un objeto.
this
La palabra clave 'this' se refiere al objeto actual.
El operador ',' evala los dos operandos.
delete
El operador 'delete' borra un objeto, una propiedad de un

objeto, o un elemento especificado de un vector.
void
El operador 'void' especifica una expresin que ser

evaluada sin devolver ningn valor.
typeof
El operador 'typeof' devuelve el tipo de dato de un

operando.
11
Estructuras de control de flujo

Las estructuras de control de flujo se dividen en:
1. Estructuras de decisin condicional

2. Bucles
Las estructuras de decisin condicional nos permiten decidir mediante expresiones
condicionales qu sentencias de nuestro cdigo han de ser ejecutadas. Los bucles
nos permiten repetir un nmero determinado o indeterminado de veces una serie
de sentencias de nuestro cdigo.
Estructuras de decisin condicional

La estructura de decisin condicional principal es if:
if(expresin condicional)
{
cdigo1
}
[else
{
cdigo2
}]
En este caso se evala la expresin condicional. Si es true se ejecuta el cdigo1. Si es
falsa se ejecuta el cdigo2. El cdigo situado entre corchetes es opcional.
nombre = prompt("Introduzca su nombre, por favor", "");
if(nombre == "Alicia")
{
alert("Hola " + nombre);
alert("Hoy hace un da soleado")
}
else
alert("Has visto a Alicia?");
}
</Script>
Cuando el cdigo llega a la sentencia if comprueba si el valor introducido es
realmente 'Alicia' o no. Si es 'Alicia' recibiremos los mensajes pertinentes. En otro
caso se nos preguntar por Alicia.
Cuando se trata de anidar varias sentencias if, JS cuenta con una estructura ms
especializada:
switch(expresin)
{
case valor1:
cdigo1
break
case valor2:
cdigo2
break
.
12
.
default:
cdigo
}
En esta estructura se ejecuta el cdigo correspondiente al caso cuya comparacin
de identidad entre su valor y la expresin arroje como resultado true. Veamos un
ejemplo:
nombre = prompt("Introduzca su nombre por favor", "")
switch(nombre)
{
case "Alicia":
alert("Hola Alicia")
break
case "Lewis":
alert("Hola Lewis")
break
default:
alert("Hola " + nombre)
}
Bucles
Como ya hemos dicho los bucles nos permiten repetir un nmero determinado o
indeterminado de veces ciertas sentencias de nuestro cdigo. En JS, for es el bucle
determinado por excelencia:
for(i = inicio; expresin condicional; i++)
{
cdigo
}
En un bucle for primeramente se inicializa una variable que recibe el nombre de
contador representada comnmente con la letra i. A continuacin en JS se comprueba
la expresin condicional. Si es true se ejecuta el cdigo correspondiente, se aade una
unidad a la variable contador y se vuelve a evaluar la expresin condicional y a ejecutar
el cdigo, hasta que la expresin condicional devuelva false. Veamos un ejemplo:
var m
m = ""
for(i = 0; i < 5; i++)
{
m += "vuelta " + i + "\n"
}
alert(m)
alert(i)
Si ejecutas el cdigo observa que el bucle ejecuta el cuerpo del bucle un total de 5
veces. Fjate en el valor final de la variable contador. La secuencia de escape '\n'
permite introducir un salto de carro en el cuadro de dilogo alert.
Por ltimo un bucle indeterminado de JS es:
while(expresin condicional)
13
{
cdigo
}
En JS se ejecuta el cuerpo del bucle mientras que la expresin condicional sea true.
Ejemplo:
i = 0
while(i < 5)
{
alert(i)
i++
}
Tambin se acepta la siguiente variante del bucle indeterminado:
do
{
cdigo
}
while(expresin condicional)
La diferencia estriba en que mientras que el primero puede no llegar a ejecutarse,
el segundo siempre ejecutar el cuerpo del bucle al menos una vez.
En cualquier momento se puede salir de un bucle de JS mediante la palabra clave
break. Adems podemos pasar a la siguiente vuelta de un bucle mediante la
palabra clave continue.
14
Objetos
Un objeto es una estructura que contiene tanto variables (llamadas propiedades)
como funciones que manipulan dichas variables (llamadas mtodos). A partir de
esta estructura se ha creado un nuevo modelo de programacin, la programacin
orientada a objetos, que atribuye a los mismos propiedades como herencia o
polimorfismo. Como veremos, JavaScript simplifica en algo este modelo.
El modelo de la programacin orientada a objetos normal y corriente separa los
mismos en dos: clases e instancias. Las primeras son entes ms abstractos que
definen un conjunto determinado de objetos. Las segundas son miembros de una
clase, poseyendo las mismas propiedades que la clase a la que pertenecen. En
Javascript esta distincin se difumina. Slo tenemos objetos.
Propiedades y mtodos
Veamos ahora cmo se accede a los mtodos y propiedades de un objeto:
objeto.propiedad
objeto.metodo(parmetros)
Un constructor es una funcin que inicializa un objeto. Cuando creamos un objeto
nuevo del tipo que sea, lo que hacemos en realidad es llamar al constructor
pasndole argumentos. Por ejemplo, si creamos un objeto Array de esta manera:
vector = new Array(9);
En realidad, estamos llamando a un constructor llamado Array que admite un
parmetro. Sera algo as:
function Array(longitud)
{
...
}
Clasificacin de los objetos
Una primera clasificacin del modelo de objetos lo dividira en dos grandes grupos.
Por una parte, tendramos los objetos directamente relacionados con el navegador y
las posibilidades de programacin HTML (denominados, genricamente, objetos
del navegador), que estudiaremos ms adelante, y por otra parte un conjunto de
objetos relacionados con la estructura del lenguaje, llamados genricamente
objetos del lenguaje u objetos intrnsecos.
En el apartado siguiente vamos a estudiar estos ltimos, posteriormente se
estudiarn los objetos del navegador.
15
Objetos del Lenguaje

Los objetos intrnsecos del lenguaje JS que vamos a estudiar en este curso son:
Object, Math, String, Date, Array y Global, aunque tambin existen otros
objetos como Boolean, Function y Number, que no estudiaremos en este curso.
El objeto Object
El objeto Object es aquel del que derivan todos los objetos de JS. Proporciona, por
tanto, una funcionalidad comn a todos los objetos existentes. Cuenta con dos
mtodos que podremos aplicar, por tanto, a cualquier objeto de los que
estudiaremos ms adelante. Estos mtodos son:
objeto.toString() Devuelve una cadena de texto que representa al objeto de forma

que pueda ser mostrado de manera legible en un cuadro de
dilogo o en la interfaz de una pgina web.
objeto.valueOf() Devuelve el valor primitivo de un objeto o tipo de dato. Este
valor primitivo est definido de manera diferente para cada tipo
de objeto intrnseco y tipo de dato. Veamos qu valor devuelve
aplicado a cada uno de los objetos del lenguaje.
Array: Convierte en una cadena de texto cada uno de los

elementos de una matriz y los concatena separados por
comas.
Boolean: Devuelve una cadena de texto con el valor
"true" o "false".
Date: Devuelve el tiempo en milisegundos transcurridos
desde el 1 de Enero de 1970 hasta la fecha representada.
Function: Devuelve el cdigo de la funcin en s misma.
Number: Devuelve el valor numrico en s mismo.
Object: Devuelve el objeto en s mismo.
String: Devuelve la propia cadena de texto tal y como
est.
El objeto Math
El objeto Math es un objeto global que ofrece constantes y mtodos para
desarrollar funciones bsicas para matemticas. Veamos ahora algunos mtodos de
este objeto:
Math.sqrt(n)
Devuelve la raz cuadrada de n. Ej. Math.sqrt(4) es

igual a 2.
Math.abs(n)
Devuelve el valor absoluto de n. Ej. Math.abs(-4) es

igual a 4.
Math.ceil(n) y Math.floor(n) Devuelven respectivamente el valor entero menor y

mayor de n. Ej1. Math.ceil(-4.6) es igual a -4. Ej2.
16
Math.floor(-4.6) es igual a -5.

Math.round(n)
Redondea el valor n. Ej. Math.round(4.56) es igual a

5.
Math.random()
Devuelve un nmero aleatorio comprendido entre 0 y

1.
Math.pow(base,exponente) Devuelve el resultado de una potencia: la base

elevada al exponente. E. Math.pow(10,4) es igual a
10000.
Si quisieras capturar el valor devuelto por algunos de estos mtodos no tendras
ms que asignrselo a una variable:
resultado = Math.sqrt(4)
Aparte de los mtodos mencionados (y algunos otros ms relacionados sobre todo
con operaciones trigonomtricas: acos, asin, atan, cos, sin y tan), el objeto Math
dispone de una serie de propiedades como E y PI que corresponden a constantes
matemticas (tambin LN10, LN2, SQRT2, ...). Una constante no es ms que una
variable que no cambia de valor.
alert(Math.PI)
</Script>
El objeto Math es un objeto intrnseco al lenguaje y no puede ser creado.
El objeto String
El objeto String facilita mtodos para la manipulacin de cadenas de texto. Su
nica propiedad es length, que devuelve la longitud de la cadena. Por ejemplo,
"Alicia".length es igual a 6.
A continuacin veremos algunos de los mtodos con los que cuenta:
String.fromCharCode(n) Devuelve el carcter ASCII correspondiente a n. Ej.
String.fromCharCode(65,66) es igual a "AB".
cadena.charCodeAt(i)
Devuelve el nmero del carcter ASCII que ocupa la

posicin i en la cadena. Ej. "Alicia".charCodeAt(0) es igual
a 65.
cadena.charAt(i)
Devuelve el carcter que est situado en la posicin i de

la cadena. Ej. "Alicia".charAt(0) es igual a 'A'.
cadena.substr(i, n)
Devuelve una subcadena de longitud n de cadena, a

partir de la posicin i. Ej. "Alicia".substr(1, 4) es igual a
"lici".
cadena.substring(i, n)
Igual que el mtodo anterior, pero ahora n indica el

ndice del ltimo carcter a devolver, no la longitud de la
cadena. Ej. "Alicia".substring(1, 4) es igual a "lic".
cadena1.indexOf(
Devuelve la posicin de la primera ocurrencia de cadena2
17
cadena2, i)
dentro de cadena1, comenzando la bsqueda a partir de la

posicin i hacia la derecha. Ej. "Alicia".indexOf("c", 0) es
igual a 3.
cadena1.lastIndexOf(
cadena2, i)
Devuelve la posicin de la primera ocurrencia de cadena2

dentro de cadena1 a partir de la posicin i hacia la
izquierda. Ej. "Alicia".lastIndexOf("i", 5) es igual a 4.
cadena.toUpperCase()
cadena.toLowerCase()
Devuelven respectivamente la cadena en minsculas o

maysculas. Ej1. "Alicia".toUpperCase() es igual a
"ALICIA". Ej2. "Alicia".toLowerCase() es igual a "alicia".
Hay que hacer ciertas matizaciones con respecto a las cadenas. Habrs observado
que aparte del primer mtodo en el cual se usa el objeto String, el resto de mtodos
se han utilizado sobre cadenas normales. Esto se debe a que en JS las cadenas
pueden ser tratadas de la manera habitual o como objetos:
s = new String("Alicia")
alert(s.toUpperCase())
Adems de estos mtodos el objeto String cuenta con varios mtodos que encierran
a la cadena tratada entre etiquetas HTML. Estos mtodos son:
cadena.anchor(nombre) Aade a la cadena las etiquetas <A> y </A> fijando el

atributo name. Ej. alert("Alicia".anchor("#Ali")) mostrara
un mensaje con el texto: <A NAME="#Ali">Alicia</A>
cadena.big()
Aade la pareja de etiquetas <BIG></BIG> a la cadena

de texto.
cadena.bold()
Aade la pareja de etiquetas <B></B> a la cadena de

texto.
cadena.font(color)
Aade a la cadena de texto la pareja de etiquetas

<FONT></FONT> con el atributo color que se le asigne,
bien el nombre del color, p.ej. "red", o el cdigo RGB del
color, p.ej. "#FF0000".
cadena.italics()
Aade la pareja de etiquetas <I></I> a la cadena de

texto.
cadena.link(referencia)
Aade a la cadena las etiquetas <A> y </A> fijando el

atributo href. Ej. alert("I.E.S. Romero
Vargas".link("http://www.iesromerovargas.com"))
mostrara un mensaje con el texto: <A
href="http://www.iesromerovargas.com">I.E.S.
Romero Vargas</A>
cadena.small()
Aade la pareja de etiquetas <SMALL></SMALL> a la

cadena de texto.
cadena.sub() y
cadena.sup()
Aaden las parejas de etiquetas <SUB></SUB> y

<SUP></SUP> a la cadena de texto, respectivamente.
El objeto Date
En JS debemos crear un objeto Date para poder utilizar alguno de los mtodos
correspondientes al tratamiento de fechas:
fecha = new Date()
18
alert(fecha)
Mediante el mtodo toLocaleString() obtendremos un formato de fecha ms
acorde con nuestro sistema:
fecha = new Date()
alert(fecha.toLocaleString())
Veamos algunos de los mtodos asociados al objeto denominado fecha:
fecha.getDate()
Devuelve el da correspondiente a fecha.
fecha.getMonth()
Devuelve el mes correspondiente a fecha.
fecha.getFullYear() Devuelve el ao correspondiente a fecha.

fecha.getDay()
Devuelve el da de la semana correspondiente a fecha. JS

considera el domingo como el da 0, por lo cual el da 3
corresponde al mircoles.
fecha.getHours()
Devuelve las horas correspondientes a fecha.
fecha.getMinutes() Devuelve los minutos correspondientes a fecha.

fecha.getSeconds() Devuelve los segundos correspondientes a fecha.
var f = new Date();
var hora = f.getHours();
if (hora>=4 && hora<12)
alert("Buenos das")
else
if (hora>=12 && hora<20)
alert("Buenas tardes")
else
alert("Buenas noches")
El objeto Array
Este objeto nos va a dar la facilidad de construir arrays cuyos elementos pueden
contener cualquier tipo bsico, y cuya longitud se modificar de forma dinmica
siempre que aadamos un nuevo elemento (y, por tanto, no tendremos que
preocuparnos de esa tarea). Para poder tener un objeto array, tendremos que
crearlo con su constructor, por ejemplo, si escribimos:
a=new Array(15);
tendremos creada una variable a que contendr 15 elementos, enumerados del 0 al
14. Para acceder a cada elemento individual usaremos la notacin a[i], donde i
variar entre 0 y N-1, siendo N el nmero de elementos que le pasamos al
constructor.
Tambin podemos inicializar el array a la vez que lo declaramos, pasando los
valores que queramos directamente al constructor, por ejemplo:
a=new Array(21,"cadena",true);
que nos muestra, adems, que los elementos del array no tienen por qu ser del
mismo tipo.
19
Por tanto: si ponemos un argumento al llamar al constructor, este ser el nmero

de elementos del array (y habr que asignarles valores posteriormente), y si
ponemos ms de uno, ser la forma de inicializar el array con tantos elementos
como argumentos reciba el constructor.
Podramos poner como mencin especial de esto lo siguiente. Las inicializaciones
que vemos a continuacin:
a=new Array("cadena");
a=new Array(false);
Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la
cadena cadena, y en el segundo caso con un elemento cuyo contenido es false.
Lo comentado anteriormente sobre inicializacin de arrays con varios valores,
significa que si escribimos
a=new Array(2,3);
NO vamos a tener un array con 2 filas y 3 columnas, sino un array cuyo primer
elemento ser el 2 y cuyo segundo elemento ser el 3. Entonces, cmo creamos
un array bidimensional? (un array bidimensional es una construccin bastante
frecuente). Creando un array con las filas deseadas y, despus, cada elemento del
array se inicializar con un array con las columnas deseadas. Por ejemplo, si
queremos crear un array con 4 filas y 7 columnas, bastar escribir:
a=new Array(4);
for(i=0;i<4;i++)
a[i]=new Array(7);
y para referenciar al elemento que ocupa la posicin (i,j), escribiremos a[i][j].
Las propiedades bsica del objeto Array es length. Esta propiedad nos dice en cada
momento la longitud del array, es decir, cuntos elementos tiene.
Veamos, ahora, los mtodos del objeto Array:
array.join(separador)
Une los elementos de las cadenas de caracteres de cada

elemento de un array en un string, separando cada cadena
por el separador especificado.
array.reverse()
Invierte el orden de los elementos del array.
array.sort()
Ordena los elementos del array siguiendo el orden

lexicogrfico.
array.pop()
Elimina el ltimo elemento de la matriz.
array.push(elemento) Agrega un elemento al final de la matriz.

array.shift()
Elimina el primer elemento de la matriz.
El siguiente cdigo introduce en una matriz las 26 letras del abecedario anglosajn
y las presenta separadas por el signo '-'.
var alfabeto = new Array(26);
for (i=0;i<alfabeto.length-1;i++)
alfabeto[i]=String.fromCharCode(65+i);
alert(alfabeto.join('-'));
20
El objeto Global
El objeto Global ofrece al programador una serie de mtodos y propiedades que
estn a su alcance en cualquier mbito de una aplicacin escrita con JS.
Las propiedades de este objeto son:
Infinity
Valor infinito, por ejemplo, el resultado de la divisin por 0.
NaN
Valor que indica que una expresin que debera ser un nmero no lo
es realmente.
undefined
Variable que se ha declarado pero que no se le ha asignado ningn

valor.
Y sus mtodos ms usados:

eval(cadena)
Evala la cadena de texto que se le pasa como argumento

interpretndola como si se tratase de cdigo JS.
isFinite(n)
Comprueba si el argumento que recibe es finito.
isNaN(n)
Comprueba si el argumento que recibe no es un nmero.
parseInt(cadena)
Intenta obtener, a partir de la cadena, un nmero entero.

Devuelve NaN si no puede obtener un valor adecuado.
parseFloat(cadena) Intenta obtener, a partir de la cadena, un nmero en coma

flotante. Devuelve NaN si no puede obtener un valor
adecuado.
var x = 1;
eval("x=x*2+5");
alert(x);
21
Eventos
Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina
nuestra se ejecute slo cuando suceda algn suceso deberemos llamarla desde un
controlador de eventos. Estos controladores se asocian a un elemento HTML que los
admita y se incluyen as:
<ELEMENTO manejadorDeEvento="Cdigo_JavaScript">
Siendo ELEMENTO una etiqueta HTML y manejadorDeEvento un evento provedo
por el navegador.
Lista de eventos
Aqu tienes una pequea gua de eventos definidos en JavaScript.
Evento
Descripcin
Elementos de HTML que lo

admiten
onLoad
Terminar de cargarse una

pgina
<BODY...>
<FRAMESET...>
onUnLoad
Salir de una pgina

(descargarla)
<BODY...>
<FRAMESET...>
onMouseOver Pasar el ratn por encima
<A HREF..>
<AREA...>
onMouseOut
Que el ratn deje de estar

encima
<A HREF..>
<AREA...>
onSubmit
Enviar un formulario
<FORM...>
onClick
Pulsar un elemento
<INPUT TYPE="button, checkbox,

link, radio"...>
onBlur
Perder el cursor
<INPUT TYPE="text"...>
<TEXTAREA...>
onChange
Cambiar de contenido o
perder el cursor
<TEXTAREA...>
onFocus
Conseguir el cursor
<TEXTAREA...>
onSelect
Seleccionar texto
<TEXTAREA...>
Ejemplo:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Calc(f)
{
if( confirm("Seguro?") )
f.result.value = eval(f.expr.value);
else
alert("Vuelve otra vez.");
22
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Introduzca una expresin:
<INPUT TYPE="text" NAME="expr" SIZE=15>
<INPUT TYPE="button" VALUE="Calcular" ONCLICK="Calc(this.form)">
<BR>
Resultado:
<INPUT TYPE="text" NAME="result" SIZE=15 >
<INPUT TYPE="reset" NAME="Submit" VALUE="Borrar todo">
</FORM>
</BODY>
</HTML>
Que se despliega como:
Introduzca una expresin:
Resultado:
Borrar todo
23
Objetos del Navegador

Hasta ahora hemos estudiado los objetos predefinidos del lenguaje, sin embargo, no
se ha hablado, apenas, acerca del control del navegador en s mismo y casi no se
han mencionado los documentos web desde el punto de vista de los objetos.
Los navegadores ofrecen al programador multitud de caractersticas en forma de un
modelo jerrquico. Esta jerarqua es lo que se llama modelo de objetos del
navegador y mediante ella se pueden controlar caractersticas propias del
navegador desde qu mensaje mostrar en la barra de estado hasta la creacin de
nuevas pginas con el aspecto deseado.
La jerarqua de dichos objetos toma la siguiente forma:
Para los ms iniciados en la programacin orientada a objetos, conviene aclarar que

en esta jerarqua, contra lo que pueda parecer, no existe herencia alguna. Los
objetos se relacionan por composicin, 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 jerarqua 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 sesin.
An cuando el objeto se llame Window, disponemos siempre de una referencia a l
llamada window (recordad que Javascript distingue entre maysculas y minsculas).
Ser con esa referencia con la que trabajemos. Este hecho ser comn a todos los
objetos del modelo de objetos.
Por ltimo, indicar que en Javascript, se supone que todas las propiedades y
mtodos que llamamos sin utilizar ninguna referencia, en realidad se hacen
utilizando esa referencia window. As, por ejemplo, cuando ejecutamos el mtodo
24
alert() en realidad
window.alert().
lo
que
estamos
haciendo
es
ejecutar
el
mtodo
Veamos los mtodos ms usados del objeto Window.
[Variable=][window.]open(URL,
nombre, propiedades)
Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la
ventana donde la creamos deberemos asignarle una variable, si no simplemente
invocamos el mtodo: el navegador automticamente sabr que pertenece al
objeto window. El parmetro URL es una cadena que contendr la direccin de la
ventana que estamos abriendo: si est en blanco, la ventana se abrir con una
pgina en blanco. El nombre ser el que queramos que se utilize como parmetro
de un TARGET y las propiedades son una lista separada por comas de algunos de
los siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[=yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels
Debemos tener cuidado con las propiedades que modifiquemos, es posible que
algunas combinaciones de los mismos no funcionen en todos los navegadores. El
Explorer 4, por ejemplo, da error ante la combinacin toolbar=no, directories=no,
menubar=no. Veamos un ejemplo:
function AbrirVentana()
{
MiVentana=open("","Ventana","toolbar=no,menubar=no,status=yes");
MiVentana.document.write("<HEAD><TITLE>Ttulo</TITLE></HEAD>");
MiVentana.document.write("<CENTER><H1><B>"+
"Esto puede ser lo que tu quieras"+
"</B></H1></CENTER>");
}
</SCRIPT>
<BODY>
...
<INPUT TYPE="button"
NAME="Boton1"
VALUE="Plsame" onClick="AbrirVentana();">
...
</BODY>
Este ejemplo muestra la posibilidad de abrir nuevas ventanas de nuestro navegador

con JavaScript. Se llama a la funcin AbrirVentana desde el evento onClick, como ya
sabemos hacer desde el primer ejemplo. Esta funcin crea la nueva ventana
25
MiVentana y escribe en ella por medio del objeto Document (que se estudiar ms
adelante) todo el cdigo HTML de la pgina.
close()
Cierra la ventana actual. A no ser que hayamos acabado de abrirla nosotros
mostrar al usuario una ventana de confirmacin para que decida l si quiere o no
cerrarla. Esto se hace por motivos de seguridad, ya que sera demasiado fcil hacer
un script de esos mal intencionados que nos cerrase la ventana del navegador.
alert(mensaje)
Muestra una ventana de dilogo con el mensaje especificado.
confirm(mensaje)
Muestra una ventana de dilogo con el mensaje especificado y dos botones. Si el
usuario pulsa OK, el mtodo devuelve true. Si, en cambio, pulsa Cancelar, devolver
false.
prompt(mensaje,valor_por_defecto)
Muestra una ventana de dilogo con el mensaje especificado y un campo de texto
en el que el usuario pueda teclear, cuyo valor inicial ser igual a valor_por_defecto.
Si el usuario pulsa OK, el mtodo devuelve la cadena introducida en el campo de
texto. Si, por el contrario, pulsa Cancelar, devolver el valor null. Dado que este
valor se considera igual a false, podemos comprabarlo directamente en una
condicin para ver qu ha hecho el usuario.
Por ejemplo, el siguiente cdigo muestra un saludo slo si el usuario ha pulsado el
botn de Aceptar:
var
contestacion = prompt("Cmo te llamas, criatura?","");
if (contestacion)
alert("Hola, " + contestacion);
[identificador=]setTimeout("funcion",tiempo)
Llama a funcin cuando hayan pasado tiempo milisegundos. Imprescindible a la
hora de realizar cualquier rutina que deba ejecutarse a cierta velocidad.
clearTimeout(identificador)
Detiene el proceso anterior.
scroll(x,y)
Desliza el documento contenido en la ventana hasta la posicin especificada por las
coordenadas x e y que indican el grado de desplazamiento horizontal y vertical en
pxels, respectivamente. Ambos argumentos estn referidos a la esquina superior
izquierda de la ventana actual.
26
Ahora veamos las propiedades del objeto Window:
name
Sirve para averiguar o asignar el nombre de una ventana determinada.
closed
Propiedad booleana que indica si la ventana est o no cerrada.
length
Informa sobre la cantidad de ventanas hijas que contiene la ventana actual
(frames).
self
Devuelve una referencia a la propia ventana. Suele usarse para diferenciar una
ventana de un formulario si tienen el mismo nombre.
parent
Devuelve una referencia a la ventana que contiene a la ventana actual.
top
Devuelve una referencia a la ventana de orden superior del navegador, es decir, a
la que contiene todas las dems ventanas.
status
Define la cadena de caracteres que saldr en la barra de estado en un momento
dado.
dafaultStatus
Define la cadena de caracteres que saldr por defecto en la barra de estado.
Cuando no la especificamos, defaultStatus ser igual al ltimo valor que tom
status.
frames[]
Uno de los problemas ms frecuentes a los que se enfrenta un programador de
Javascript es el manejo de marcos. Es decir, cmo accedo yo al cdigo o a objetos
como Window o Document de otros marcos? JS propone una manera bastante
sencilla de hacerlo.
JS considera el documento de declaracin de marcos (es decir, aquel en el que
escribimos las etiquetas FRAME y FRAMESET) como un objeto Window normal y
27
corriente. Permite acceder a los marcos que hemos declarado en l por medio del
vector frames. Es decir, si en nuestro documento estuviera la siguiente lnea:
<FRAME NAME="principal"
SRC="MiPagina.html">
Podramos acceder a su objeto
window.frames["principal"].
Window
por
medio
de
la
referencia
A su vez, desde el documento "hijo", es decir, desde el documento que est

encerrado en un marco, podemos acceder al padre por medio de la referencia
parent. Tambin podemos acceder al documento que est arriba del todo en esta
jerarqua por medio de top. Por ejemplo:
window
== window.top
Esta igualdad comprobar si nuestro documento est en la ventana principal o en
un marco. Comprueba si la ventana en la que est (window) es igual a la ventana
principal (window.top). Mediante esta sencilla comprobacin podemos crear
fcilmente (toda vez que conozcamos el manejo del objeto Location), rutinas que
aseguren que nuestra ventana es la principal, o que recarguen nuestra estructura
de marcos si algn usuario pretende acceder a un marco especfico, etc..
Ejemplos:
Ahora veremos cmo se puede definir el valor de la barra de estado cuando el ratn
pasa por encima de un elemento <A>:
<A HREF="MiPagina.html"
onMouseOver="window.status='Vente a mi pgina';return true">
Fcil, no? Bueno, ahora vamos a ver cmo se hacen scrolls.
var texto="
Aqu est el mensaje que espero "
+ "observes y leas
con suma atencin ";
var longitud=texto.length;
function scroll()
{
texto=texto.substring(1,longitud-1)+texto.charAt(0);
window.status
= texto;
setTimeout("scroll()",150);
}
</SCRIPT>
Como podis ver, la cosa no es ni ms larga ni ms compleja que los ejemplos
anteriores. Simplemente escribe el texto en la barra de estado y luego coge el
caracter ms a la izquierda del mismo y lo pone a la derecha, para despus volver a
escribirlo. La nica pega que tiene es cmo hacemos para que la funcin se llame
cada cierto tiempo predeterminado para ir desplazando el texto a una velocidad
constante. Y la respuesta est en el mtodo setTimeout.
El objeto Navigator
Este objeto permite obtener diversas informaciones sobre el navegador donde se
est ejecutando el cdigo JS. Se suele usar para averiguar el nombre y la versin
28
del navegador que ejecuta nuestro cdigo, de forma que se puedan tomar
decisiones sobre qu tipo de cdigo ejecutar o qu tipo de pginas mostrar.
Algunas de sus propiedades, de slo lectura, son:
appName
Cadena que contiene el nombre del cliente.
appVersion
Cadena que contiene informacin sobre la versin del cliente.
cpuClass
Informa sobre el tipo de procesador sobre el que se est ejecutando el sistema
operativo.
Y el mtodo 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:
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>
El objeto Screen
Como caba esperarse, se puede acceder a este objeto por medio de la referencia
screen. Nos permitir conocer la configuracin de la pantalla del usuario. Al igual
que en el anterior objeto, todos sus atributos son de slo lectura. Conviene indicar
que este objeto slo est disponible desde las versiones 4.0 de los navegadores.
29
Propiedades.
height
Averigua la altura en pxels de la pantalla.
width
Averigua la anchura en pxels de la pantalla.
colorDepth
Indica el nmero de bits utilizados para proporcionar el color en la pantalla del
sistema donde se ejecuta el navegador. Por ejemplo, si vale 4 es que se permite la
visualizacin de 16 colores al mismo tiempo (24).
As, por ejemplo, puedes comprobar la configuracin de tu pantalla con el siguiente
cdigo:
Ejemplo:
function
Pantalla()
{
var texto=screen.width + "x"
+ screen.height
+ "x"
+ Math.pow(2,screen.colorDepth) + " colores.";
alert(texto);
}
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 tambin sera vlido window.document). Su mayor importancia viene por
el nmero de vectores que posee, que referencian a objetos Image, Form o Link,
los cuales permiten acceder a las imgenes, 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 conjuncin con write para aadir al final del documento estas
caractersticas.
bgColor
30
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 ttulo del documento.
Ejemplo:
<script language="Javascript">
function
PruebasDocumento()
{
alert(document.title);
alert(document.lastModified);
}
Matrices del objeto Document.
forms[]
Vector que contiene los formularios del documento. El primero ser el nmero 0, el
segundo el 1, etc.. Se estudiar ms detenidamente en el siguiente captulo.
images[]
Vector que contiene las imgenes del documento. Se ordenan igual que en el
anterior caso, aunque tambin permiten ser accedidas con el nombre como ndice.
Es decir, a una imagen definida como <IMG SRC=".." NAME="miImagen"> se puede
acceder con document.images["miImagen"].
links[]
Vector que contiene los enlaces del documento. Se ordenan igual que en los dos
anteriores, aunque no se suele utilizar en el cdigo Javascript. Su razn de ser es
que, al ser los enlaces objetos, permiten incluir cdigo Javascript en ellos por medio
de la pseudo-URL "javascript:codigo".
Mtodos del objeto Document.
open()
31
Abre un nuevo documento para escribir. Un documento debe estar abierto para
poder escribir en l.
close()
Cierra el documento, impidiendo escribir de nuevo en l.
write(cadena)
Escribe el cdigo HTML indicado en cadena en nuestro documento HTML.
A la hora de escribir en un documento por medio de write hay que tener en cuenta
un hecho fundamental. Para poder escribir en un documento, ste debe estar
abierto y, al abrirlo, se destruye todo el cdigo que haya en l.
Un documento se abre automticamente cuando empieza a cargarse y se cierra
cuando termina de hacerlo. As pues, si deseamos escribir en un documento sin
sobreescribir su contenido, deberemos hacerlo antes de que ste termine de
cargar. Si lo hacemos despus, sobreescribiremos su contenido. Por lo tanto:
//escribir.html
<HTML>
<HEAD>
<TITLE>Escribe
y no sobreescribe</TITLE>
</HEAD>
<BODY>
Este es un
documento que fue modificado por ltima vez el da
<SCRIPT
LANGUAGE="JavaScript">document.write(document.lastModified);
</SCRIPT>
</BODY>
</HTML>
Este ejemplo os mostrar la cadena completa, ya que se llama a write antes de

cerrarse el documento. Es decir, antes de que termine de cargar. Sin embargo, el
siguiente ejemplo:
//sobreescribir.html
<HTML>
<HEAD>
<TITLE>Sobreescribe</TITLE>
<SCRIPT
LANGUAGE="JavaScript">
function escribir()
{
document.write("Este
es un documento "+
"que fue modificado por ltima vez el
da");
document.write(document.lastModified);
}
</SCRIPT>
</HEAD>
<BODY
32
onLoad="escribir()">
Hola.
</BODY>
</HTML>
Sobreescribir el documento y no podremos ver ese "Hola", al ser llamado despus

de cargar el documento, es decir, despus de cerrarlo.
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 sesin actual. Aunque no permite
acceder a ellas, dispone de varios mtodos para sustituir el documento actual por
alguno que el usuario ya haya visitado:
back()
Volver a la pgina anterior. Es muy sencillo de utilizar, slo tienes que pulsar
cuya etiqueta se ha declarado como:
aqu,
<A HREF="javascript:window.history.back()">
forward()
Ir a la pgina siguiente.
go(donde)
Ir a donde se indique, siendo donde un nmero tal que go(1) significa lo mismo que
forward() y go(-1) es equivalente a back().
El objeto Location
Se accede a este objeto por medio de la referencia window.location y contiene
informacin sobre la direccin de la pgina actual en varias propiedades.
href
Permite el acceso a la direccin de la pgina actual. Si lo cambiamos cambiaremos
de pgina.
protocol
Protocolo de la pgina actual. Habitualmente http.
host
33
Mquina donde se alberga la pgina actual.

pathname
Camino de la pgina actual.
hash
Si hemos accedido a una pgina por medio de un ancla, contiene una almohadilla
seguida de ese ancla.
Ejemplo:
<script language="Javascript">
function
Localizacion()
{
alert("URL: "+window.location.href);
}
</script>
34
Formularios
En el captulo anterior veamos que uno de los objetos descendientes del objeto
document era el objeto Form. En este captulo, 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 parmetro ACTION del formulario,
es decir, la direccin en la que los datos del formulario sern procesados.
action
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 seleccin, la caja de texto ser elements[0], el checkbox
ser elements[1] y la lista de seleccin ser elements[2].
method
Es una cadena que tiene el nombre del mtodo con el que se va a

recibir/procesar la informacin del formulario (GET/POST).
Y los mtodos del objeto Form son:
reset()
Resetea el formulario: tiene el mismo efecto que si pulsramos un botn

de tipo RESET dispuesto en el formulario.
submit()
Enva el formulario: tiene el mismo efecto que si pulsramos un botn de

tipo SUBMIT dispuesto en el formulario.
Vistas ahora las propiedades y mtodos del objeto Form, pasamos a estudiar, uno
por uno, todos los objetos contenidos en el formulario.
El objeto checkbox
Las "checkboxes" nos permiten seleccionar varias opciones marcando el cuadrito
que aparece a su izquierda. El cuadrito pulsado equivale a un "s" y sin pulsar a un
"no" o, lo que es lo mismo, a "true" o "false".
35
Propiedades
checked
Valor booleano que nos dice si el checkbox est pulsado o no.
defaultChecked
Valor booleano que nos dice si el checkbox debe estar

seleccionado por defecto o no
name
Es una cadena que contiene el valor del parmetro NAME.
value
Es una cadena que contiene el valor del parmetro VALUE.
Mtodos
click()
Realiza la accin de pulsado del botn
<HTML>
<HEAD>
<title>Ejemplo de CheckBox</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!-function Mostrar()
{
msg="Opcion 1:"+formulario.check1.checked+"\n";
msg+="Opcion 2:"+formulario.check2.checked+"\n";
msg+="Opcion 3:"+formulario.check3.checked+"\n";
alert(msg);
}
//-->
</script>
<BODY>
<form name="formulario" id="formulario">
<input type="checkbox" name="check1" checked>Opcion 1<br>
<input type="checkbox" name="check2">Opcion 2<br>
<input type="checkbox" name="check3" checked>Opcion 3<br>
</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>
El objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede
tratarse de una lista desplegable de la que podremos escoger alguna (o algunas) de
sus opciones.
Propiedades
length
Valor numrico que nos indica cuntas opciones tiene la lista.
name
36
Se trata de un array que contiene cada una de las opciones de la lista. Este
array tiene, a su vez, las siguientes propiedades:
options
defaultSelected. Valor booleano que nos indica si la opcin est

seleccionada por defecto.
index. Valor numrico que nos da la posicin de la opcin dentro de
la lista.
length. Valor numrico que nos dice cuntas opciones tiene la lista.
selected. Valor booleano que nos dice si la opcin est actualmente
seleccionada o no.
text. Cadena con el texto mostrado en la lista de una opcin
concreta.
value. Es una cadena que contiene el valor del parmetro VALUE de
la opcin concreta de la lista.
selectedIndex. Valor numrico que nos dice cul de todas las
opciones disponibles est actualmente seleccionada.
<HTML>
<HEAD>
<title>Ejemplo de Select y Options</title>
</HEAD>
{
msg="Elementos:"+formulario.edad.length+"\n";
msg+="Edad: "+
formulario.edad.options[formulario.edad.selectedIndex].value+
"\n";
alert(msg);
}
//-->
</script>
<BODY>
Edad:<br><select name="edad">
<option value="<18" SELECTED>Menor de 18 aos</option>
<option value=">18 y <60">Entre 18 y 60 aos</option>
<option value=">60">Mayor de 60 aos</option>
</select> </form>
</BODY>
</HTML>
El objeto radio
Al contrario que con los checkbox, que nos permiten elegir varias posibilidades
entre las dadas, los objetos radio slo nos permiten elegir una de entre todas las
que hay. Estn pensados para posibilidades mtuamente excluyentes (no se puede
ser a la vez mayor de 18 aos y menor de 18 aos, no se puede estar a la vez
soltero y casado, etc.).
Propiedades
checked
Valor booleano que nos dice si el radio est seleccionado o no.
37
defaultChecked
Valor booleano que nos dice si el radio debe estar seleccionado

por defecto o no.
length
Valor numrico que nos dice el nmero de opciones dentro de un

grupo de elementos radio.
name
value
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben
tener el mismo valor en NAME.
Mtodos
click()
Realiza la accin de pulsado del botn.
<HTML>
<HEAD>
<title>Ejemplo de Radio</title>
</HEAD>
{
msg="Elementos:"+formulario.edad.length+"\n";
msg+="Menor de 18 aos:"+formulario.edad[0].checked+"\n";
msg+="Entre 18 y 60 aos:"+formulario.edad[1].checked+"\n";
msg+="Mayor de 60 aos:"+formulario.edad[2].checked+"\n";
alert(msg);
}
//-->
</script>
<BODY>
Edad:<br>
<input type="radio" name="edad" value="<18">
Menor de 18 aos.<br>
<input type="radio" name="edad" value=">18 y <60" checked>
Entre 18 y 60 aos.<br>
<input type="radio" name="edad" value=">60">
Mayor de 60 aos.<br>
</form>
</BODY>
</HTML>
El objeto button
Tenemos tres tipos de botones: un botn genrico, 'button', que no tiene accin
asignada, y dos botones especficos, 'submit' y 'reset'. Estos dos ltimos s que
tienen una accin asignada al ser pulsados: el primero enva el formulario y el
segundo limpia los valores del formulario.
name
Propiedades
38
value

Mtodos
click() Realiza la accin de pulsado del botn

<HTML><HEAD>
<title>Ejemplo de Button</title>
</HEAD>
<!-function Mostrar(boton)
{
alert('Ha hecho click sobre el boton: ' +
boton.name+
', de valor:'+
boton.value);
return true;
}
//-->
</script>
<BODY>
Un boton:
<input type="button" name="Boton1" value="El boton 1"
OnClick="Mostrar(this);"><br><br>
Un boton:
OnClick="Mostrar(this);"><br><br>
Un boton:
OnClick="Mostrar(this);"><br>
</form>
</BODY>
</HTML>
Los objetos text, textarea y password

Estos objetos representan los campos de texto dentro de un formulario. Adems, el
objeto password es exactamente igual que el text salvo en que no muestra los
caracteres introducidos por el usuario, poniendo asteriscos (*) en su lugar.
Propiedades
dafaultValue
Es una cadena que contiene el valor por defecto que se le ha dado a

uno de estos objetos por defecto.
name
value
maxlength
Nmero mximo de caracteres que puede contener el campo de

texto.
Mtodos
blur()
Pierde el foco del ratn sobre el objeto especificado.
focus()
Obtiene el foco del ratn sobre el objeto especificado.
39
select() Selecciona el texto dentro del objeto dado.

<HTML>
<HEAD>
<title>Ejemplo de Text, Textarea y Password</title>
</HEAD>
{
alert('Su nombre: ' + formulario.nombre.value);
alert('El password: ' + formulario.pass.value);
alert('Su comentario: '+formulario.coment.value);
}
//-->
</script>
<BODY>
Nombre:
<input type="text" name="nombre" value="Tu nombre" maxlength="15"><br>
Password:
<input type="password" name="pass" maxlength="10"><br>
Comentario:
<textarea name="coment" cols=30 rows=3></textarea>
</form>
<a href="javascript:Mostrar();">Mostrar datos</a><br></BODY>
</HTML>
40

Tutorial Javascript

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tutorial Javascript

Загружено:

Авторское право:

Доступные форматы

Implantacin de Aplicaciones

Etiquetas que se refieren a un valor cambiante.

Pueden usarse para calcular o comparar valores. Ejemplo: pueden

Cualquier combinacin de variables, operadores, y declaraciones

Una sentencia puede incluir cualquier elemento de la gramtica

Estructura "contenedora" de valores, procedimientos y funciones.

Una funcin de JavaScript es bastante similar a un"

Sentencias, bloques y comentarios

Hemos declarado primeramente las variables y posteriormente les hemos asignado

Comprenden los nmeros enteros (como 3, 456, -8767, etc.) y

Tambin denominados cadenas que comprenden cualquier

Comprenden los valores true y false (verdadero y falso) que

Los objetos son colecciones de propiedades y mtodos que

El cdigo HTML para el botn sera:

Nota 4: En cualquier momento podemos salir de un procedimiento o funcin

Obtiene el resto de sus dos operandos. Ej. 10 % 3 es igual a 1.

JS posee dos operadores adicionales ++ y -- que permiten incrementar o

Observa que el comportamiento del operador es diferente segn su posicin con

JS incluye un operador especial de asignacin op= que permite a cualquier

Cambia el valor booleano de su operando. Devuelve true si su operando es false, y false si su

Devuelve true si sus operandos son true.

Devuelve true si al menos uno de sus operandos es true.

El operador 'new' crea una instancia de un objeto.

La palabra clave 'this' se refiere al objeto actual.

El operador ',' evala los dos operandos.

El operador 'delete' borra un objeto, una propiedad de un

El operador 'void' especifica una expresin que ser

El operador 'typeof' devuelve el tipo de dato de un

Estructuras de control de flujo

1. Estructuras de decisin condicional

Estructuras de decisin condicional

Objetos del Lenguaje

objeto.toString() Devuelve una cadena de texto que representa al objeto de forma

Array: Convierte en una cadena de texto cada uno de los

Devuelve la raz cuadrada de n. Ej. Math.sqrt(4) es

Devuelve el valor absoluto de n. Ej. Math.abs(-4) es

Math.ceil(n) y Math.floor(n) Devuelven respectivamente el valor entero menor y

Math.floor(-4.6) es igual a -5.

Redondea el valor n. Ej. Math.round(4.56) es igual a

Devuelve un nmero aleatorio comprendido entre 0 y

Math.pow(base,exponente) Devuelve el resultado de una potencia: la base

El objeto Math es un objeto intrnseco al lenguaje y no puede ser creado.

Devuelve el nmero del carcter ASCII que ocupa la

Devuelve el carcter que est situado en la posicin i de

Devuelve una subcadena de longitud n de cadena, a

Igual que el mtodo anterior, pero ahora n indica el

Devuelve la posicin de la primera ocurrencia de cadena2

dentro de cadena1, comenzando la bsqueda a partir de la

Devuelve la posicin de la primera ocurrencia de cadena2

Devuelven respectivamente la cadena en minsculas o

cadena.anchor(nombre) Aade a la cadena las etiquetas <A> y </A> fijando el

Aade la pareja de etiquetas <BIG></BIG> a la cadena

Aade la pareja de etiquetas <B></B> a la cadena de

Aade a la cadena de texto la pareja de etiquetas

Aade la pareja de etiquetas <I></I> a la cadena de

Aade a la cadena las etiquetas <A> y </A> fijando el

Aade la pareja de etiquetas <SMALL></SMALL> a la

Aaden las parejas de etiquetas <SUB></SUB> y

Devuelve el da correspondiente a fecha.

Devuelve el mes correspondiente a fecha.

fecha.getFullYear() Devuelve el ao correspondiente a fecha.

Devuelve el da de la semana correspondiente a fecha. JS

Devuelve las horas correspondientes a fecha.

fecha.getMinutes() Devuelve los minutos correspondientes a fecha.