2
Índice
TEMA 1 .................................................................................................................................................................6
Introducción a JavaScript ..................................................................................................................................6
Introducción ...................................................................................................................................................6
Posibilidades de JavaScript ..........................................................................................................................6
Lo que javascript no puede hacer .................................................................................................................7
JavaScript vs Java.........................................................................................................................................7
TEMA 2 .................................................................................................................................................................8
Identificadores y variables ................................................................................................................................8
Introducción ...................................................................................................................................................8
Literales .........................................................................................................................................................8
Identificadores ...............................................................................................................................................9
Palabras reservadas......................................................................................................................................9
Variables ..................................................................................................................................................... 10
Expresiones y operadores ............................................................................................................................. 10
Expresiones ................................................................................................................................................ 10
Operadores ................................................................................................................................................. 10
Operadores especiales .............................................................................................................................. 12
Sentencias ..................................................................................................................................................... 13
Sentencias simples y sentencias compuestas ........................................................................................... 13
Sentencias condicionales ........................................................................................................................... 13
Sentencias de bucle ................................................................................................................................... 14
Sentencias de manipulación de objetos ..................................................................................................... 15
Funciones ....................................................................................................................................................... 15
Introducción ................................................................................................................................................ 15
Definición de funciones .............................................................................................................................. 15
Invocación funciones .................................................................................................................................. 15
Sentencia "return"....................................................................................................................................... 16
Funciones como tipos de datos .................................................................................................................. 16
Funciones "Top-Level" ............................................................................................................................... 16
El objeto "Function" .................................................................................................................................... 16
TEMA 3 .............................................................................................................................................................. 18
Objetos y clases ............................................................................................................................................. 18
Introducción ................................................................................................................................................ 18
Objetos y propiedades ............................................................................................................................... 18
Acceso a objetos mediante arrays ............................................................................................................. 18
Objeto "this" ................................................................................................................................................ 18
Creación de objetos con constructores ...................................................................................................... 19
3
Métodos ...................................................................................................................................................... 19
Métodos especiales de objetos .................................................................................................................. 20
Prototipos de objetos .................................................................................................................................. 20
Clases y metodos. Java vs JavaScript ....................................................................................................... 21
Objetos predefinidos ...................................................................................................................................... 21
Objeto "Array" ............................................................................................................................................. 21
Objeto "Date" .............................................................................................................................................. 22
Objeto "Math" ............................................................................................................................................. 23
Objeto "Number"......................................................................................................................................... 24
Objeto "String" ............................................................................................................................................ 24
TEMA 4 .............................................................................................................................................................. 25
Introducción de JavaScript en un documento HTML ..................................................................................... 25
Etiqueta <script>......................................................................................................................................... 25
TEMA 5 .............................................................................................................................................................. 27
Introducción a los eventos ............................................................................................................................. 27
Eventos ....................................................................................................................................................... 27
Introducción de un "event handler" ............................................................................................................ 28
El objeto "event" ......................................................................................................................................... 28
URLs de "javascript:" ..................................................................................................................................... 28
Introducción ................................................................................................................................................ 28
Ejemplos de uso de URLs de "javascript:" ................................................................................................. 29
Valores devueltos por las URLs de "javascript:" ........................................................................................ 29
Consideraciones finales ............................................................................................................................. 29
TEMA 6 .............................................................................................................................................................. 30
El objeto "window" .......................................................................................................................................... 30
El objeto "window" ...................................................................................................................................... 30
Propiedades del objeto "window" ............................................................................................................... 30
Métodos del objeto "window" ..................................................................................................................... 31
Frames ....................................................................................................................................................... 33
Ventanas y frames...................................................................................................................................... 33
El objeto "document" ...................................................................................................................................... 34
Introducción ................................................................................................................................................ 34
Propiedades del objeto "document" ........................................................................................................... 34
Métodos del objeto "document" .................................................................................................................. 34
El objeto "location" ......................................................................................................................................... 35
Propiedades del objeto "location" ............................................................................................................... 35
Métodos del objeto "location" ..................................................................................................................... 35
El objeto "history" ........................................................................................................................................... 36
TEMA 7 .............................................................................................................................................................. 37
Validación de formularios ............................................................................................................................... 37
4
Introducción ................................................................................................................................................ 37
Ejemplo de validación de un formulario ..................................................................................................... 37
Cookies .......................................................................................................................................................... 38
Introducción ................................................................................................................................................ 38
Lectura de cookies ..................................................................................................................................... 38
Almacenamiento de cookies ...................................................................................................................... 38
Limitaciones de cookies ............................................................................................................................. 39
Ejemplo de cookies .................................................................................................................................... 39
Presentación dinámica ................................................................................................................................... 40
Introducción ................................................................................................................................................ 40
Efectos con imágenes ................................................................................................................................ 40
Ejemplo de animación ................................................................................................................................ 41
5
TEMA 1
Introducción a JavaScript
Introducción
JavaScript es un lenguaje de programación interpretado con una rudimentaria capacidad de orientación a objetos.
El núcleo del propósito general del lenguaje ha sido incluido en varios navegadores o "browsers", y mejorado para la
programación "web", con la inclusión de objetos que representan la ventana del navegador y sus contenidos. JavaScript
permite que se incluya código ejecutable en páginas "web", con lo que éstas ya no tienen por qué ser estáticas, pudiendo
interactuar con el usuario, controlar el navegador y crear contenido HTML dinámicamente.
Posibilidades de JavaScript
Con JavaScript se pueden escribir programas para desarrollar cálculos arbitrarios. Sin embargo el poder de javaScript
radica en los objetos basados en el navegador y en el documento que soporta. Estas son algunas de las posibilidades
que ofrece javaScript:
Control de la apariencia y contenido del documento
El objeto "document" de JavaScript, a través de su método "write()" permite escribir código HTML en un documento
que está siendo analizado por el navegador. También se pueden generar documentos completos desde cero.
Las propiedades del objeto "document" permiten especificar colores para el fondo del documento y para el texto, y
enlaces que se encuentran en él. Lo que conlleva la posibilidad de generar documentos HTML dinámicos.
Control del navegador
Varios objetos de JavaScript permiten controlar el comportamiento del navegador. El objeto "window" soporta
métodos para desplegar cajas de diálogo, o para crear y abrir nuevas ventanas del navegador.
JavaScript permite controlar qué páginas son desplegadas en el navegador. El objeto "location" permite descargar y
mostrar el contenido de cualquier URL en cualquier ventana o frame del navegador. El objeto "history" permite
avanzar y retroceder por las páginas ya cargadas simulando la acción de los botones "adelante" y "atrás".
El objeto "window" permite también mostrar cualquier mensaje al usuario a través de la barra de estado.
Interactuar con el contenido del documento
El objeto "document" permite a los programas leer y a veces interactuar con partes del documento.
De lejos, la más importante capacidad de interacción con los contenidos del documento es proporcionada por el
objeto "From" y por los objetos de elementos del formulario que éste contiene.
Por ejemplo a partir de datos introducidos por el usuario se pueden llevar a cabo diversos cálculos y rellenar con el
resultado el apropiado campo del formulario.
Otro uso común de leer las entradas del usuario en los distintos elementos del formulario es la de verificar el
contenido del formulario antes de ser remitido.
Interactuar con el usuario
JavaScript puede desencadenar cualquier clase de acción en respuesta a los eventos producidos por el usuario.
Ejemplos típicos de esto pueden ser, desplegar un mensaje en la barra de estado cuando el usuario pasa el puntero
sobre un enlace o desplegar un cuadro de confirmación cuando el usuario va a remitir un formulario.
Leer y escribir el estado del cliente mediante 'cookies'
"Cookies" es el termino de Netscape para definir pequeñas cantidades de información almacenadas temporal o
permanentemente en el cliente. Son transmitidas hacia y desde el servidor y permiten a una página web recordar
cosas acerca del cliente. Por ejemplo, que el usuario ha visitado ya la página o se ha registrado y ha obtenido una
"password", o que ha expresado preferencias a cerca del color y disposición de las páginas. Las cookies ayudan a
proporcionar la información de estado que es que no está disponible debido a la naturaleza del protocolo HTTP.
Los programas JavaScript pueden leer y escribir los valores de las cookies, y generar código HTML a partir de los
valores de las cookies.
Interactuar con applets
JavaScript puede interactuar con los applets de Java que están ejecutándose en el browser. El código JavaScript
puede leer y escribir propiedades de e invocar métodos de los Applets de Java y los plug-ins. Esta capacidad es
tremendamente poderosa, y realmente permite a Javascript hacer Java.
Otras capacidades
Posee el objeto "Date" que permite simplificar el trabajo con fechas y horas. El objeto "document" posee una
propiedad que especifica la fecha en que la página fue modificada por última vez.
6
El objeto "window" posee métodos que permiten que un bloque determinado de código JavaScript sea ejecutado un
determinado número de milisegundos en el futuro. Esto es útil para llevar a cabo acciones repetitivas con un retardo.
JavaScript vs Java
A pesar de la similitud en sus nombres, no hay que confundir Java con JavaScript. Si bien son similares en cuanto a
expresiones sintácticas, su filosofía es distinta.
En primer lugar JavaScript, a diferencia de Java, no es un lenguaje de programación propiamente dicho, sino que es un
lenguaje de scripts.
Java es un lenguaje orientado a objetos, mientras que JavaScript es un lenguaje basado en objetos, en el que se trata
con objetos predefinidos.
Por otra parte JavaScript es mucho menos rígido que Java en cuanto a la comprobación de tipos y declaraciones de
variables y métodos.
Otra diferencia está en que los applets de Java pueden ser accedidos desde las páginas HTML, pero no forman parte del
documento. En cambio el código de los scripts puede estar integrado dentro del documento HTML.
Javascript puede controlar el navegador pero no puede dibujar gráficos, desarrollar trabajos de red ni multitarea. Java,
por otra parte, soporta tareas de red, gráficos y multitarea, pero no tiene ningún control en absoluto sobre el browser.
JavaScript puede comunicarse con el interprete de Java construido en el navegador, y puede trabajar con cualquier
applet de Java de una página web.
7
TEMA 2
Identificadores y variables
Introducción
JavaScript es sensible a la diferencia entre minúsculas y mayúsculas, es decir, que las palabras reservadas, los nombres
de variables y funciones, y cualquier otro identificador debe escribirse con una capitalización de letras consistente.
Las sentencias en JavaScript van generalmente seguidas por un carácter de punto y coma. Se pueden omitir los puntos y
comas siempre que las sentencias vayan en distintas líneas.
Literales
Un literal en javaScript es un valor que aparece directamente en un programa. Pueden ser números, cadenas de
caracteres, los valores booleanos y el valor especial "null".
LITERALES ENTEROS
Los literales enteros en base 10 pueden representarse con un signo menos opcional seguido por una secuencia de
dígitos que no pueden empezar por el dígito cero.
Sintaxis: [-] (1-9) (0-9)* ej: 3, -12
LITERALES DECIMALES
Se pueden representar en notación normal o notación científica.
· En notación normal se representan mediante un signo menos opcional, seguido de la parte entera y decimal del
número separadas por un punto.
· En notación científica se representan mediante un número en notación normal con un cifra decimal seguido por
las letras "e" o "E" y un exponente formado por un signo menos opcional seguido de hasta 3 dígitos enteros.
Sintaxis: [(+|-)][digits][.digits][(E|e)[(+|-)]digits] ej: 3.14, -1.44, .33, 6.02e+23, 1.4325E-32
8
LITERALES BOOLEANOS
Existen dos valores booleanos: verdadero y falso. Los dos literales correspondientes a estos valores son respectivamente
"true" y "false".
EL LITERAL NULL
Todos los literales vistos hasta ahora representan un valor de un determinado tipo de datos. El literal "null", en cambio
representa la falta de valor.
Identificadores
Un identificador en JavaScript es un nombre utilizado para referirse a algo. Es decir es un nombre de variable o de
función.
El primer carácter de un identificador debe ser una letra (mayúscula o minúscula) o un guión bajo (_). Los siguientes
caracteres pueden ser cualquier letra, dígito o el guión bajo.
En el Navigator 3.0 el carácter dollar "$" también es válido en cualquier posición.
Palabras reservadas
Las palabras de la siguiente lista no pueden usarse como nombres de variables, funciones, métodos u objetos. Algunas
son palabras reservadas que emplea JavaScript y otras están reservadas para un posible uso futuro.
Las palabras de la siguiente lista no son estrictamente palabras reservadas, pero se debe evitar su uso, ya que son tipos
de datos, funciones y variables predefinidas.
9
Variables
Las variables son nombres simbólicos que se usan para contener valores, proporcionando así una forma de manipular
valores mediante un nombre.
Una diferencia importante entre JavaScript y otros lenguajes como C y Java es que JavaScript no es tipado. Esto quiere
decir que las variables pueden contener valores de cualquier tipo. La ventaja de los lenguajes tipados es que facilitan la
escritura, mantenimiento y reutilización de programas largos y complejos. Como la mayoría de los programas de
JavaScript son cortos "scripts" esto no es necesario y nos beneficiamos de una sintaxis más simple. Otra ventaja de que
JavaScript no sea un lenguaje tipado es que los valores son convertidos automáticamente de un tipo a otro cuando
resulta conveniente.
Al no ser un lenguaje tipado, en la mayoría de los casos no es necesaria la declaración de variables, pudiendo ser estas
automáticamente declaradas al ser usadas por primera vez en casi todos los casos.
i=10;
i= "ten";
De todos modos siempre es un buen estilo de programación declarar las variables antes de ser utilizadas.
Para ello se emplea la palabra reservada "var":
var i;
var i, j;
También se puede inicializar una variable en su declaración:
Var i=2;
Expresiones y operadores
Expresiones
Una expresión es un conjunto válido de literales, variables, operadores y expresiones que tienen un valor.
JavaScript tiene 3 tipos de expresiones:
· Aritméticas: Su valor es numérico.
· String: Su valor es una cadena de caracteres.
· Lógicas: Su valor es "true" o "false".
Además las expresiones se pueden dividir entre las que asignan un valor a un variable y las que simplemente tienen un
valor. Por ejemplo la expresión x=5 asigna a x el valor 5 y el valor de esta expresión es 5. Sin embargo la expresión 2+3
también tiene el valor 5, pero no asigna ningún valor a ninguna variable.
Operadores
OPERADORES DE ASIGNACIÓN
Los operadores de asignación asignan a su operando izquierdo el valor de su operando derecho. El operador de
asignación básico es el signo igual (=).
Los otros operadores de asignación son los siguientes:
Operador Significado
x += y x=x+y
x -= y x=x-y
x *= y x=x*y
x /= y x=x/y
x %= y x=x%y
x <<= y x = x << y
x >>= y x = x >> y
x >>>= y x = x >>> y
x &= y x=x&y
x ^= y x=x^y
x |= y x=x|y
OPERADORES DE COMPARACIÓN
Comparan sus operandos y devuelven un valor lógico dependiendo de si la comparación es verdadera o falsa. Los
operandos pueden ser numéricos o string.
La siguiente tabla describe los operadores de comparación:
10
Operador Descripción
== Devuelve true si los dos operandos son iguales. Si los dos operandos no son del mismo
tipo se intentará convertir los operandos al tipo apropiado para la comparación.
!= Devuelve true si los dos operandos no son iguales. Si los dos operandos no son del
mismo tipo se intentará convertir los operandos al tipo apropiado para la comparación.
=== Devuelve true si los dos operandos son iguales y del mismo tipo.
!== Devuelve true si los dos operandos no son iguales y o no son del mismo tipo.
> Devuelve true si el operando de la izquierda es mayor que el de la derecha.
>= Devuelve true si el operando de la izquierda es mayor o igual que el de la derecha.
< Devuelve true si el operando de la izquierda es menor que el de la derecha.
<= Devuelve true si el operando de la izquierda es menor o igual que el de la derecha.
OPERADORES ARITMÉTICOS
Tienen como operandos valores numéricos y devuelven un valor numérico.
La siguiente lista muestra los principales operadores numéricos:
Operador Descripción
+ Adición
- Sustracción
* Producto
/ División. Devuelve el resultado de la división, a diferencia de otros lenguajes en los
que devuelve el cociente de la división entera.
% Devuelve el resto de la división entera
++ Operador unario. Añade uno a su operando antes de devolver el valor si se usa como
prefijo (++x), añade uno a su operando después de devolver el valor si se usa como
sufijo (x++),
-- Operador unario. Resta uno a su operando antes de devolver el valor si se usa como
prefijo (--x), resta uno a su operando después de devolver el valor si se usa como
sufijo (x--),
- Operador unario. Devuelve la negación de su operador.
Operador Descripción
& Devuelve un uno en cada posición en la que el correspondiente bit de ambos
operandos es uno.
| Devuelve un uno en cada posición en la que el correspondiente bit de alguno de los
dos operandos es uno.
^ Devuelve un uno en cada posición en la que el correspondiente bit de solo uno de los
dos operandos es uno.
~ Invierte los bits de su operando.
A << b Desplaza b posiciones hacia la izquierda los bits de A , Rellenando con ceros.
A >> b Desplaza b posiciones hacia la derecha los bits de A , descartando los bits
sobreescritos.
a >>> b Desplaza b posiciones hacia la derecha los bits de A , descartando los bits
sobreescritos y rellenando con ceros por la izquierda.
OPERADORES LOGICOS
Se usan típicamente con valores booleanos. En ese caso devolverán valores booleanos. Si sus operandos no son de tipo
booleano devolverán uno de los dos operandos, por lo que no devolverán un valor booleano.
Operador Descripción
&& Y Lógico
|| O lógico
! No lógico
11
OPERADORES DE CADENAS DE CARACTERES
Además de los operadores de comparación, que pueden ser empleados con cadenas de caracteres, el operador de
concatenación (+) concatena 2 cadenas, devolviendo una cadena que es la unión de las dos.
Ej.: Cad= "mi" + "cadena";
Cad tiene el valor "micadena"
También se pude utilizar con cadenas el operador "+=".
Ej.: Cad="mi";
Cad+="cadena";
Cad tiene el valor "mi cadena"
Operadores especiales
OPERADOR CONDICIONAL
Es el único operador de JavaScript que utiliza 3 operandos. El operador devuelve un valor entre dos posibles,
dependiendo de la condición. La sintaxis es:
Condición ? valor1 : valor2
Si la condición es verdadera devuelve el primer valor y si es falsa devuelve el segundo valor.
Status= (age>=18) ? "adulto" : "menor"
OPERADOR COMA
Simplemente evalúa sus dos operandos y devuelve el valor del primero de ellos. Se usa principalmente en los bucles "for"
para actualizar más de una variable en cada paso del bucle.
for (var i=0, j=9; i <= 9; i++, j--)
document.writeln("a["+i+","+j+"]= " + a[i,j])
OPERADOR TYPEOF
Es un operador unario que devuelve una cadena indicando el tipo del operando. Se puede usar de una de las siguientes
formas:
typeof operando
typeof (operando)
var cad="hola";
var numero=1;
var fecha =new date();
OPERADOR VOID
El operador "void" especifica una expresión para ser evaluada sin devolver ningún valor. Se puede usar de una de las
siguientes formas:
void expresión
void (expresión)
OPERADOR NEW
El operador new se puede usar para crear una instancia de un objeto definido por el usuario o de un objeto de un tipo
predefinido. La sintaxis es la siguiente:
new constructor
Donde constructor es una llamada a una función. JavaScript simplifica la gramática, permitiendo omitir los paréntesis si la
función a la que se llama no tiene ningún argumento.
Con el operador new, primero se crea un nuevo objeto sin propiedades definidas. Posteriormente se invoca al constructor
especificado, pasando los parámetros especificados.
Objeto=new Object;
Fecha=new Date();
Rect=new rectángulo(3.0, 4.0, 1.5, 2.75);
12
OPERADOR DELETE
El operador delete borra un objeto, una propiedad de un objeto o un elemento de un array.
delete nombre_objeto
delete nombre_objeto.nombre_propiedad
delete nombre_objeto[índice]
El operador delete pone el elemento o la propiedad a "undefined", pero en realidad no libera la memoria asociada al
objeto como en C++. Esto es debido a que JavaScript proporciona un recogedor de basura o "garbage collector",
mediante el cual, cuando los objetos ya no se usan, la memoria asociada a ellos es automáticamente reclamada por el
sistema.
El operador delete devuelve true si la operación es posible y false en caso contrario.
Sentencias
Sentencias simples y sentencias compuestas
Una sentencia en JavaScript es una expresión que tiene efectos laterales, como por ejemplo las expresiones de
asignación vistas anteriormente, las cuales tienen el efecto de asignar un valor a una variable.
JavaScript tiene además una forma de combinar varias sentencias en una sola, denominada bloque de sentencias. Esto
se consigue encerrando dichas sentencias entre llaves.
{ x = Math.PI;
cx = Math.cos(x);
alert("cos(" + x + ") = " + cx);
}
Las líneas del ejemplo anterior actúan como una única sentencia.
Sentencias condicionales
SENTENCIA IF-ELSE
Se usa para llevar a cabo unas determinadas sentencias si una condición lógica es verdadera. La cláusula else es
opcional y se utiliza para llevar a cabo unas determinadas sentencias si la condición es falsa. La sintaxis de la sentencia
"if" es la siguiente:
if (condición) {
sentencias1
}
[else {
sentencia2
}]
Donde la condición puede ser cualquier expresión que devuelva true o false y las sentencias a ejecutar pueden ser de
cualquier tipo, incluida la sentencia "if" (if anidados).
SENTENCIA SWITCH
Permite a un programa evaluar una expresión y comparar su valor con ciertas etiquetas "case". Cuando una comparación
es verdadera se ejecutan las sentencias asociadas a la etiqueta "case" correspondiente. Su sintaxis es la siguiente:
switch (expression){
13
case label :
statement;
[break;]
case label :
statement;
[break;]
...
[default : statement;]
}
Si ninguna comparación es cierta el programa busca la sentencia opcional "default" y si la encuentra ejecuta las
sentencias asociadas a ella. Si no la encuentra, el programa continúa la ejecución en la siguiente sentencia al final del
switch.
La sentencia opcional "break" sirve para que al encontrarse una concordancia el programa salga de la sentencia switch y
ejecute la siguiente sentencia al fin de ésta.
Sentencias de bucle
SENTENCIA WHILE
Ejecuta sus sentencias mientras su condición es verdadera. La sintaxis es la siguiente:
while (condición) {
sentencias
}
La condición es evaluada antes de cada ejecución de sus sentencias, de forma que si la condición es falsa se devuelve el
control a la siguiente sentencia al fin del bucle.
SENTENCIA DO-WHILE
Es similar a la sentencia "while", con la diferencia de que la condición es evaluada después de ejecutar las sentencias del
bucle. Su sintaxis es la siguiente:
do {
statement
} while (condition)
Por lo tanto las sentencias del bucle serán ejecutadas al menos una vez.
SENTENCIA FOR
Ejecuta las sentencias asociadas mientras que su condición sea verdadera. Consta de las siguientes partes:
· Una expresión de inicialización en la que se inicializan una o más variables.
· La condición a evaluar.
· Las sentencias a ejecutar.
· Una expresión de incremento de variables.
La sintaxis es la siguiente:
for ([initialExpression]; [condition]; [incrementExpression]) {
statements }
Al ejecutarse una sentencia For, en primer lugar se ejecuta la sentencia de inicialización de variables, la cual se ejecuta
una única vez.
Posteriormente se evalúa la condición. Si ésta es verdadera se ejecutan las sentencias asociadas al bucle, y se
incrementan las variables. Estos 3 pasos se repetirán hasta que la condición sea verdadera, momento en el que se pasa
a ejecutar la siguiente sentencia al fin del bucle.
SENTENCIA BREAK
Se utiliza para terminar un bucle o una sentencia "switch". Al ejecutarse la sentencia break se transfiere el control a la
siguiente sentencia.
SENTENCIA CONTINUE
Provoca en un bucle "while" o "for" que se termine la presente iteración del bucle y se lleve a cabo la siguiente iteración.
En un bucle "while" se pasa a evaluar la condición y en un bucle "for" se pasa a ejecutar la sentencia de incremento de
contadores.
14
Sentencias de manipulación de objetos
SENTENCIA FOR-IN
Itera una variable específica sobre todas las propiedades del objeto. Para cada propiedad se ejecutan las sentencias
especificadas.
La sintaxis es la siguiente:
for (variable in object) {
statements }
En el siguiente ejemplo una función recibe como argumentos un objeto y el nombre de éste. En el cuerpo de la función se
itera sobre las propiedades del objeto, y devuelve una cadena que lista los nombres de las propiedades y 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
}
SENTENCIA WITH
Establece el objeto por defecto para un conjunto de sentencias. JavaScript busca cualquier identificador sin cualificar (sin
operador punto) dentro del set de sentencias para determinar si los identificadores son propiedades del objeto establecido
por defecto.
with (object){
statements
}
En el siguiente ejemplo la sentencia "with" especifica al objeto "Math" como objeto por defecto. Las sentencias interiores
hacen referencia a la propiedad "PI" y a los métodos cos y sin especificar el objeto.
var a, x, y
var r=10
with (Math) {
a = PI * r * r
x = r * cos(PI)
y = r * sin(PI/2)
}
Funciones
Introducción
Una función es un conjunto de sentencias que desarrollan un tarea específica. Para usar una función, primero hay que
definirla, posteriormente el script debe llamarla.
Definición de funciones
La definición de una función consiste en la palabra reservada "function" seguida por:
El nombre de la función.
Una lista de argumentos de la función, encerrados entre paréntesis y separados por comas.
Las sentencias que componen el cuerpo de la función encerradas entre llaves (las sentencias de una función
pueden incluir llamadas a otras funciones).
function imprimir(mensaje) {
document.writeln(mensaje);
}
Invocación funciones
Se puede usar o llamar una función definida en la página actual. También se pueden invocar funciones definidas en otras
ventanas o frames. Al hacer una llamada a una función, ésta lleva a cabo las acciones especificadas con los parámetros
indicados. Por ejemplo, podemos invocar a la función "imprimir" de la siguiente forma:
imprimir("hola")
15
La sentencia anterior invoca a la función "imprimir" con el parámetro "hola". La función ejecutará sus sentencias e
imprimirá el mensaje "hola". Los parámetros de una función pueden ser de cualquier tipo, incluso se puede pasar como
parámetro un objeto.
Sentencia "return"
Una función es una expresión. Todas las expresiones tienen un valor y la sentencia "return" se usa para especificar el
valor retornado por una función. Ese valor es el valor de la expresión de invocación de la función. La sintaxis es la
siguiente:
return [expresión]
Cuando la sentencia "return" se ejecuta, la expresión es evaluada y devuelta como valor de la función. La ejecución de la
función se detiene cuando se ejecuta la sentencia "return".
La sentencia "return" se puede utilizar también sin ninguna expresión, para provocar únicamente la terminación de la
función sin devolver ningún valor.
Si una función no tiene sentencia "return", o la sentencia "return" no devuelve ningún valor el valor de la llamada a la
función será "undefined". No se puede utilizar la sentencia "return" más que en el cuerpo de una función.
La siguiente función devuelve el cuadrado del número que se pasa como argumento:
function cuadrado(numero) {
return numero * numero;
}
num=cuadrado(num);
Funciones "Top-Level"
Son funciones que no están asociadas con ningún objeto. Estas funciones son accedidas como métodos del objeto
global.
La siguiente tabla resume las funciones "top-level".
Función Descripción
eval Evalúa una cadena de código JavaScript sin hacer referencia a un objeto en particular.
IsFinite Evalúa un argumento y determina si es un número finito.
IsNaN Evalúa un argumento y determina si es un número.
Number Convierte un objeto a un número.
ParseFloat Analiza un argumento string y devuelve un número en coma flotante.
ParseInt Analiza un argumento string y devuelve un número entero.
String Convierte un objeto a un string.
El objeto "Function"
JavaScript proporciona el objeto "Function" como envoltorio o "wrapper" de las funciones como datos.
16
El objeto "Function" tiene dos propiedades:
PROPIEDAD "ARGUMENTS"
La propiedad "arguments[ ]" de un objeto "Function" se refiere a un vector con todos los argumentos pasados a
la función en su invocación. JavaScript permite pasar a una función cualquier número de argumentos,
independientemente del número de nombres de argumentos que aparecen en su definición.
Como todos los vectores, el vector "arguments[ ]" posee la propiedad "length", que especifica el número de
elementos del vector.
Podemos controlar que en una función se pase el número de argumentos que queramos:
if (cuadrado.arguments.length != 1){
alert("ha llamado a la función con " + cuadrado.arguments.length + "argumentos, pero la función
esperaba 1");
return null;
}
PROPIEDAD "CALLER"
Otra propiedad del objeto "Function" es "caller". La propiedad "caller" de una función es una referencia a la
función que la ha invocado.
Se puede llevar a cabo con "caller" cualquier operación que podemos hacer con una función, como por ejemplo
invocarla, ya que "caller" es una referencia a una función.
Si queremos invocar a la función que ha llamado a "cuadrado":
cuadrado.caller( );
17
TEMA 3
Objetos y clases
Introducción
Al no ser JavaScript fuertemente tipado y carecer de un mecanismo formal de herencia, no es un verdadero lenguaje
orientado a objetos.
Los objetos en JavaScript pueden tener cualquier número de propiedades y le pueden ser añadidas propiedades
dinámicamente.
JavaScirpt no tiene una noción formal de clase, sin embargo se aproxima al concepto de clase con sus constructores.
En JavaScript, al igual que en los lenguajes verdaderamente orientados a objetos, puede haber múltiples objetos de una
misma clase.
Objetos y propiedades
Un objeto en JavaScript es un tipo de datos que contiene pedazos de información con un nombre específico. Cada uno
de estos datos se denomina propiedad. Para acceder al valor de las propiedades de un objeto normalmente se utiliza el
operador punto, como se vio anteriormente.
Algunos de los elementos de un documento HTML son propiedades del objeto "document", que se estudiará más
adelante. Para acceder a ellos lo haremos a través de su atributo name. .
Dada una imagen definida de la siguiente forma:
< img name="imagen" src="img1.gif">
Podemos acceder a ella y a sus propiedades con JavaScript de la siguiente forma:
document.image.src;
El operador punto (.) espera un objeto como operando izquierdo y el nombre de una propiedad o un método de un objeto
como operando derecho. El operando derecho debe ser el literal que representa al nombre de la propiedad, no puede ser
una cadena ni una variable que contiene una cadena.
Se puede añadir una propiedad a un objeto únicamente estableciendo su valor.
win.creator= self;
Si se intenta leer de un objeto el valor de una propiedad que no existe, o sea, que nunca le ha sido asignado un valor, se
obtendrá el valor especial de JavaScript "undefined".
Objeto "this"
La palabra reservada "this" se utiliza para referirse al objeto en curso, es decir el objeto llamante en un método. Se usa
de la siguiente forma:
this.[propiedad]
Por ejemplo, con la siguiente función se puede validar un elemento de un formulario, simplemente llamando a la función
"validar" (pasándola el objeto "this" como parámetro) cada vez que se produzca un cambio en el elemento.
function validar(obj, max, min)
{
if((obj.valor < min ||) (obj.valor > max))
alert("Valor no valido");
}
validar(this, 100, 1);
18
Creación de objetos con constructores
Como ya vimos, para crear nuevos objetos se utiliza el operador "new".
OPERADOR "NEW"
El operador "new" se puede usar para crear una instancia de un objeto definido por el usuario o de un objeto de un tipo
predefinido. La sintaxis es la siguiente:
new constructor
Donde "constructor" es una llamada a una función
JavaScript simplifica la gramática permitiendo omitir los paréntesis si la función a la que se llama no tiene ningún
argumento.
Con el operador new, primero se crea un nuevo objeto sin propiedades definidas. Posteriormente se invoca al constructor
especificado, pasando los parámetros especificados.
objeto=new Object;
fecha=new Date();
rect=new rectángulo(3.0, 4.0, 1.5, 2.75);
La sentencia "objeto=new Object" crea un objeto vacío, que no tiene propiedades definidas. Para crear objetos con
propiedades necesitamos escribir un constructor para crear e inicializar estas propiedades en un nuevo objeto.
El constructor es invocado por el operador "new". El constructor no debe retornar ningún valor.
function Rectangulo(anch, alt)
{
this.anchura=anch;
this.altura=alt;
}
.....
rect1=new Rectangulo(5, 2);
Un constructor generalmente lleva a cabo la inicialización a partir de los valores de los argumentos que se pasan.
De este modo podemos construir "clases" simplemente definiendo una función constructor apropiada. Es estéticamente
importante denominar a los constructores con nombres que indiquen la clase de objetos que inicializan.
Los objetos se pueden crear vacíos, y añadir posteriormente sus distintas propiedades.
rect=new Object;
rect.altura=100;
rect.anchura=200;
Métodos
En JavaScript un método no es más que una función que es invocada a través de un objeto.
Las funciones son objetos, por lo tanto una función puede ser asignada a cualquier variable, incluso a una propiedad de
un objeto.
Asignación o.m=f;
Invocación (parametros);
Es lo mismo invocar al método "o.m()" que llamar a l a función "f()", salvo en que cuando una función es invocada como
método, a través de un objeto, la palabra reservada "this" se referirá a dicho objeto.
A toda función que es usada como método se le pasa un argumento adicional, el objeto a través del cual es invocada.
Por lo tanto las dos sentencias siguientes:
o.m(x, y);
f(o, x, y);
son equivalentes. Sin embargo la primera de ellas indica mucho más claramente la idea de que el objeto o. es sobre el
que se lleva a cabo la función.
Definición de la función
function calcular_area()
{
return this.anchura * this.anchura;
}
Creación del objeto
var rect=new Rectangulo(10, 5);
19
Asignación del método
rect.area=calcular_area();
Invocación del método
a=rect.area; //a=5*10=50.
No podremos invocar el método área mediante ningún objeto si antes no asignamos el método al objeto.
También se puede llevar a cabo esta operación dentro del constructor:
function rectángulo(alt, anch)
{
this.altura=alt;
this.anchura=anch;
this.area=calcular_area;
}
ValueOf()
Es llamado cuando JavaScript necesita convertir un objeto de un tipo a otro, típicamente un número.
Para la mayoría de los objetos el método "ValueOf()" devuelve el mismo objeto, lo cual es una forma de indicar que el
objeto no puede ser convertido a otro tipo que no sea el tipo "Objet".
assign()
El método "assing()" de un objeto es invocado cuando ese objeto aparece en el lado izquierdo de un operador de
asignación. A este método se le pasa un argumento, que es el valor que se encuentra al lado derecho del operador de
asignación.
Alguno de los usos del método es hacer asignaciones con efectos laterales, o hacer objetos de sólo lectura, haciendo que
el método no haga nada.
Este método es exclusivo de Netscape Navigator.
Prototipos de objetos
Un objeto "prototype" es un objeto especial asociado con la función constructor de una "clase".
Las propiedades de un objeto "prototype" de una clase pueden ser leídas por todos los objetos de la clase y aunque lo
parezcan no son propiedades de esos objetos. Hay una única copia de cada propiedad y esa copia es compartida por
todos los objetos de la clase. Por lo tanto tiene sentido usarlas para definir propiedades que serán las mismas para todos
20
los objetos dentro de la clase. Esto lo hace ideal para definir métodos y ciertas propiedades como constantes
matemáticas.
En el Navigator el objeto "prototype" se crea la primera vez que se usa el constructor, por lo que se debe crear un objeto
de la clase antes de poder utilizar el objeto "prototype" para asignar métodos y constantes a objetos de la clase. Por lo
tanto, será necesario crear un objeto que solamente será utilizado para forzar la creación de un objeto "prototype".
new Rectangulo(5, 10);
Rectángulo.prototype.pi=3.14159;
Sin embargo en IE no es necesario, ya que proporciona un objeto "protoype" para todas las funciones, no sólo los
constructores.
En Navigator 3.0 se puede usar los prototipos con objetos predefinidos además de con aquellos construidos por el
programador, técnica que no funciona en IE 3.0.
function Circulo(x, y, r)
{
this.x = x;
this.y = y;
this.r = r;
}
new Circulo(0,0,0);
Circulo.prototype.pi = 3.14159;
function Circulo_circunferencia()
{
return 2 * this.pi * this.r;
}
function Circulo_area()
{
return this.pi * this.r * this.r;
}
Circulo.prototype.circunferencia = Circulo_circunferencia;
Circulo.prototype.area = Circulo_area;
c = new Circulo(0.0, 0.0, 1.0);
a = c.area()
p = c.circunferencia();
Objetos predefinidos
Objeto "Array"
JavaScript no tiene un tipo de datos array explícito. Sin embargo, se puede usar el objeto predefinido "Array" y sus
métodos para trabajar con arrays en las aplicaciones. Un array es un conjunto de valores a los que se accede mediante
su nombre y un índice. El objeto "Array" posee distintos métodos para manipular arrays, además de la propiedad "length",
que indica el número de elementos que posee.
Existen dos formas de crear un array en JavaScript:
1. NombreArray = new Array(elemento1, elemento2, ..., elementoN)
2. NombreArray = new Array(Longitud)
Donde "NombreArray" es el nombre de un nuevo objeto o de una propiedad de un objeto existente.
Si se incluye la lista de elementos, el array es inicializado con dichos elementos y el valor de su propiedad "length" pasa a
ser el número de argumentos.
Si se incluye la longitud, se creará un array con un número de elementos igual al argumento.
21
Para acceder a un elemento de un array utilizamos su ordinal dentro del array (teniendo en cuenta que el índice de
elementos empieza en 0 y no en 1).
ele=NombreArray[1]
el valor de "ele" será elemento2.
Como hemos visto, se pueden dar valores a las posiciones de un array en su creación. También se puede hacer dando
valores a sus elementos.
emp[1] = "Casey Jones"
emp[2] = "Phil Lesh"
emp[3] = "August West"
Objeto "Date"
JavaScript no tiene un tipo de datos para trabajar con fechas. Para ello cuenta con el objeto predefinido Date. El objeto
Date cuenta con numerosos métodos para acceder y manipular fechas, sin embargo no tiene ninguna propiedad.
Para crear un objeto Date:
NombreObjeto= new Date ([parámetros]);
22
Donde "NombreObjeto" es el nombre del objeto que está siendo creado. Los parámetros pueden ser de uno de los
siguientes tipos:
o Ninguno: Se crea un objeto con la fecha y la hora actuales.
o Una cadena con el siguiente formato: "Mes día, año horas:minutos:segundos"
dia= new Date("December 19, 1995 13:30:05");
Objeto "Math"
El objeto predefinido "Math" tiene propiedades y métodos para constantes matemáticas y funciones. Por ejemplo la
propiedad "PI" del objeto "Math" tiene el valor del número pi(3,14159..) y se puede usar de la siguiente forma:
Math.PI;
De forma análoga, las funciones matemáticas estándar son métodos del objeto Math, incluyendo las funciones
trigonométricas logarítmicas, exponenciales...
Por ejemplo, si se quiere usar la función seno, se escribirá:
Math.sin(5);
Téngase en cuenta que los métodos trigonométricos del objeto "Math" toman sus argumentos en radianes.
En esta tabla se muestran los métodos del objeto "Math":
Método Descripción
Abs Valor absoluto
sin, cos, tan Funciones trigonométricas ; argumento en radianes
acos, asin, atan Funciones trigonométricas inversas; devuelven valores en radianes
exp, log Funciones Exponencial y logaritmo neperiano (base e)
Ceil Devuelve el menor entero que es mayor o igual al argumento
Floor Devuelve el mayor entero que es menor o igual al argumento
min, max Devuelve el menor o el mayor (respectivamente) de dos argumentos
Pow Potencia; el primer argumento es la base, y el segundo es el exponente
Round Redondea el argumento al entero más próximo
Sqrt Raíz cuadrada
Nunca creamos objetos "Math", sino que se utiliza el objeto "Math" predefinido. Cuando en una porción de código se
emplean muchos métodos y constantes matemáticas es aconsejable hacerlo dentro de una sentencia "with". Por ejemplo:
with (Math) {
a = PI * r*r
y = r*sin(theta)
x = r*cos(theta)
}
23
Objeto "Number"
El objeto "Number" tiene una serie de propiedades que son constantes numéricas, como el máximo valor o el infinito.
Siempre hay que referirse a una propiedad del objeto predefinido "Number", y no a una propiedad de un objeto "Number"
creado por uno mismo.
La siguiente tabla muestra las propiedades del objeto Number:
Propiedad Descripción
MAX_VALUE El mayor número representable
MIN_VALUE El menor número representable
NaN Valor especial "not a number"
NEGATIVE_INFINITY Valor especial menos infinito;
POSITIVE_INFINITY Valor especial infinito;
Objeto "String"
El objeto "String" es una prolongación del tipo de datos "string". No es lo mismo un literal string que un objeto "String".
S1="hola" //crea un literal string
S2= new String ("hola") //crea un objeto string
Se puede llamar a cualquiera de los métodos del objeto "String" en un literal, ya que JavaScript convierte
automáticamente el literal string a un objeto "String" temporal, llama al método y entonces descarta el objeto temporal.
Se deben emplear literales string a menos que se necesite usar específicamente el objeto "String", ya que si no se podría
producir la siguiente situación:
s1 = "2 + 2" //crea un literal string
s2 = new String("2 + 2") //crea un objeto String
eval(s1) // devuelve el numero 4
eval(s2) //devuelve el string "2 + 2"
La función "eval( )" devuelve el string al que evalúa la expresión que tiene como parámetro
El objeto "String" tiene una propiedad, length, la cual indica el número de caracteres del "string".
Un objeto "String" tiene dos tipos de métodos: Aquellos que devuelven una variación de la cadena y aquellos que
devuelven una versión de la cadena en formato HTML.
La siguiente lista muestra los métodos del objeto "String":
Método Descripción
Anchor Crea un ancla HTML
Big, blink, bold, fixed, Crea una cadena con formato HTML
italics, small, strike,
sub, sup
CharAt, charCodeAt Devuelve el carácter o el código del carácter de la posición indicada
IndexOf, lastIndexOf Devuelve la posición de la subcadena especificada en la cadena o la última
posición del substring especificado respectivamente.
Link Crea un enlace HTML
Concat Combina el texto de dos strings y devuelve un nuevo string
Split Divide un objeto string y forma un array con sus substring
Slice Extrae una sección de un string y devuelve un nuevo string.
Substring, substr Devuelve el subconjunto especificado del string especificando el principio y el
final o el principio y la longitud respectivamente.
toLowerCase, Devuelve la cadena con todos los caracteres en minúscula o mayúsculas
toUpperCase respectivamente
24
TEMA 4
Introducción de JavaScript en un documento HTML
Los scripts no son HTML, sin embargo serán necesarias etiquetas HTML para poder introducirlos en los documentos.
Se pueden introducir en cualquier parte del documento, sin embargo es conveniente introducir el código JavaScript en la
cabecera, para que sea interpretado al cargar el documento.
De todas formas, si el código hace referencia a objetos que representan elementos HTML del documento, se debe incluir
al final de éste o bien estar contenido en funciones que sean llamadas tras la carga del documento, ya que de otra forma
éstos objetos no serían reconocidos y se produciría un error.
Si el browser utilizado es Internet Explorer, cuando se produce un error de JavaScript aparece en la barra de estado un
mensaje como el siguiente:
Si hacemos doble "clic" con el ratón en el mensaje aparecerá cierta información sobre el error, como el tipo de error y la
línea en la que se encuentra.
Etiqueta <script>
La etiqueta HTML utilizada para introducir un script en un documento HTML es <SCRIPT> </SCRIPT>, la cual determina
el script a ejecutar.
Algunos de sus parámetros son los siguientes:
language: Indica el lenguaje de programación utilizado para el script. En este caso su valor será "JavaScript".
src: Especifica la situación de un script externo, es decir, cuyo código no aparece en el documento HTML, sino que se
encuentra en un fichero exterior.
Un fichero JavaScript contiene únicamente código JavaScript, sin las etiquetas <script> o alguna otra etiqueta HTML. Un
fichero JavaScript suele tener la extensión "js" y debe ser exportado por un servidor web.
El código del siguiente ejemplo muestra cómo en una página HTML se puede referenciar a un script externo, y cómo en
ella se puede introducir código JavaScript:
<HTML>
<HEAD>
<TITLE>Un documento con SCRIPT
</TITLE>
<SCRIPT language="javascript" src="http://sitio/programa.js">
</SCRIPT>
<SCRIPT language="javascript"> ...código JavaScript...
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
25
Proporcionar contenido alternativo
La etiqueta <nonscript></nonscript> proporciona un contenido alternativo a los navegadores que reconocen la etiqueta
<script> pero que no soportan scripts.
Por ejemplo, si el navegador no soporta scripts, se puede indicar un programa que realice una función similar a la que
habría llevado a cabo el script si éste hubiera podido ejecutarse. El código HTML para tal efecto sería el siguiente:
<SCRIPT language="javascript" >
... código JavaScript...
</SCRIPT>
<NOSCRIPT>
<A href="http://sitio/programa">Programa.</A>
</NOSCRIPT>
26
TEMA 5
27
Introducción de un "event handler"
Si un evento se aplica a una etiqueta HTML (o sea, que el evento se aplica al objeto de JavaScript correspondiente a esa
etiqueta), entonces se puede definir un "event handler" para él. Como se puede ver en la tabla el nombre de un "event
handler" es igual que el del evento, precedido por "on".
La forma de definir un "event handler" para un determinado objeto, consiste en añadir el nombre del "event handler" como
atributo de la etiqueta HTML e introducir el código JavaScript correspondiente entrecomillado como valor del atributo. La
sintaxis es la siguiente:
<ETIQUTA onEvento="código JavaScript">
Ej: <INPUT TYPE="button" VALUE="validar" onClick="validar(this.form)">
En este ejemplo la etiqueta HTML es "INPUT", el evento a tratar es "Click", y el código JavaScript es una llamada a una
función. También puede ser cualquier conjunto de sentencias JavaScript separadas por comas o puntos y comas.
El código debe ir entre comillas (simples o dobles). Si el código va entre comillas dobles, se deben usar comillas simples
para delimitar argumentos de tipo string, si los hubiera y viceversa.
El objeto "event"
Cada evento tiene un objeto "event" asociado. El objeto "event" proporciona información acerca del evento, como el tipo
de evento y la localización del cursor en el momento de producirse el evento. Cuando se produce un evento, y si se ha
escrito un "event handler" para tratarlo, el objeto "event" es enviado como parámetro al "event handler".
En caso de un evento "MouseDown", por ejemplo, el objeto "event" contiene el tipo de evento (en este caso
"MouseDown"), las posiciones "x" e "y" del cursor del ratón en el momento de producirse el evento, un número
representando el botón del ratón pulsado, y un campo conteniendo las teclas de modificación (Control, Alt o Shift) que se
encontraban presionadas en el momento de producirse el evento.
Propiedad Descripción
data Devuelve un vector de cadenas de caracteres conteniendo las URLs de los objetos
arrastrados. Pasado al evento "DragDrop".
height Representa la altura de la ventana o frame.
modifiers Cadena de caracteres especificando las teclas modificadoras asociadas a un evento de
ratón o de teclas. Los valores pueden ser: ALT_MASK, CONTROL_MASK, SHIFT_MASK,
and META_MASK.
pageX Número que especifica la posición horizontal en pixeles relativa a la página.
pageY Número que especifica la posición vertical en pixeles relativa a la página.
screenX Número que especifica la posición horizontal en pixeles relativa a la pantalla.
screenY Número que especifica la posición vertical en pixeles relativa a la pantalla.
target Cadena de caracteres que representa al objeto al cual el evento ha sido enviado
originalmente.
type Cadena de caracteres que representa el tipo de evento.
which Número que representa o el botón del ratón que ha sido pulsado o el valor ASCII de la
tecla pulsada. Para un ratón, 1 es el botón izquierdo, 2 el botón del medio y 3 el botón
derecho.
width Representa la anchura de la ventana o frame.
x Si el evento es "resize" será un número especificando la anchura del objeto. También
puede representar a la posición horizontal en pixeles donde se ha producido el evento
relativa a la capa.
y Si el evento es "resize" será un número especificando la altura del objeto. También puede
representar a la posición vertical en pixeles donde se ha producido el evento relativa a la
capa.
URLs de "javascript:"
Introducción
Existen una forma adicional de añadir código JavaScript, mediante las URLs del pseudo-protocolo "javascript:".
Existen una serie de tipos estándar de URLs : "http:", "ftp:", "file:"... También se pueden usar URLs del tipo "javascript:"
para ejecutar sentencias JavaScript en lugar de cargar un nuevo documento.
28
Simplemente se usa un string que comience por "javascript:" como valor del atributo "HREF" de la etiqueta del ancla. En
general, se puede poner cualesquiera sentencias o llamadas a funciones tras el prefijo "javascript:" de la URL. Las URLs
de JavaScript se pueden usar en cualquier lugar en el que se utilizaría una URL normal.
Consideraciones finales
En algunos contextos las URLs de "javascript:" son esencialmente sustitutos de los manejadores de eventos. Ambos
pueden ser intercambiables, y elegir uno u otro es simplemente una cuestión de estilo.
Existen algunas circunstancias en las que las URLs de "javascript:" pueden usarse con objetos que no soportan
manejadores de eventos. Por ejemplo, dado un tipo de elemento que no soporta el "event-handler" "onClick", si se quiere
ejecutar código JavaScript cuando el usuario pulsa en un elemento de ese tipo, se debe usar una URL de "javascript:".
29
TEMA 6
El objeto "window"
JavaScript proporciona una serie de objetos para controlar el "browser" o navegador. Dichos objetos siguen la siguiente
jerarquía:
El objeto "window"
Dado que la principal función de un "browser" es su capacidad de mostrar contenido HTML en una ventana, el objeto
"window" es el objeto más importante en JavaScript. Es el objeto padre de todos los objetos del "browser", ya que es la
raíz de la jerarquía de éstos. Cada objeto "window" representa a una de las ventanas del navegador.
Todos los demás objetos en JavaScript son accedidos como propiedades del objeto "window" o como propiedades de
estas propiedades. A continuación se presentan algunas de las propiedades y métodos del objeto "window":
Propiedad Descripción
closed Especifica si la ventana ha sido cerrada.
DefaultStatus Refleja el mensaje por defecto en la barra de estado
frames Un array que refleja todos los frames de la ventana.
length El número de frames de la ventana.
name Nombre empleado para referirse a la ventana.
opener Especifica el nombre de la ventana del documento llamante cuando una ventana es
abierta con el el método "open( )"
30
Propiedad Descripción
parent Un sinónimo de la ventana o frame que contiene el documento actual.
self A synonym for the current window.
status Especifica un mensaje transitorio en la barra de estado.
top Un sinónimo de la ventana de mayor nivel.
window Un sinónimo de la ventana actual.
El siguiente ejemplo muestra la diferencia entre la propiedades status y defaultStatus:
<script>
function statusSetter() {
window.defaultStatus = "Pulsa el enlace para ir a mi página"
window.status = "Enlace de mí pagina"
}
</script>
<A href="http://mipagina.html" onMouseOver = "statusSetter(); return true">Mi página</A>
CONFIRM( ):
Muestra una caja de diálogo con un mensaje, un botón de aceptación y uno de rechazo. Devuelve el valor "true"
si el usuario presionó el botón el botón de aceptación y "false" si el usuario presionó el botón de rechazo.
if (confirm("¿Seguro que quiere salir de la aplicación?")){
Func1( );
}
31
PROMPT( ):
Muestra un cuadro de diálogo con un cuadro de texto para introducir un valor. Devuelve el mensaje introducido
por el usuario en el cuadro de texto
32
Frames
Además de poder mostrar varias páginas en distintas ventanas del navegador, es posible mostrar varias páginas dentro
de la misma ventana mediante el uso de frames, cada uno de los cuales puede mostrar un documento distinto. Para crear
un frame se emplea la etiqueta <FRAMESET> dentro de un documento HTML.
Los frames no son estrictamente ventanas, puesto que su representación en la pantalla es diferente. Sin embargo, en
muchos casos tienen el mismo comportamiento. En JavaScript un frame se representa mediante un objeto "window", y
ambos tienen las mismas propiedades y métodos.
Cada objeto "window" tiene la propiedad "frames[ ]", la cual contiene referencias a todos los frames que contiene la
ventana. La propiedad "frames.lenght" representa el número de frames que hay en el array.
También cada objeto "window" tiene la propiedad "parent", que representa a la ventana o frame que contiene al objeto.
Ej: si una ventana tiene dos frames y el código se está ejecutando en el primer frame, para referirnos al segundo frame
podemos emplear la siguiente expresión:
parent.frame[1];
La propiedad "top" siempre contiene una referencia a la ventana que contiene a todos los frames, lo cual en el caso de
frames recursivos no es equivalente a la propiedad "parent".
A continuación se presentan algunas de las diferencias entre la ventana principal y los frames:
Para la ventana principal las propiedades "top" y "parent" siempre se refieren a la ventana en sí.
Los métodos "alert()", "confirm()", y "prompt()" pueden ser invocados desde cualquier objeto "window", incluyendo
aquellos que representan frames, pero los cuadros de diálogo siempre aparecerá centrados en la pantalla principal,
aunque los métodos sean invocados desde algún frame.
Cuando las propiedades "status" o "defaultStatus" se establezcan para un frame, la línea de estado solamente
mostrará el texto especificado cuando el ratón se encuentra sobre el frame.
Ventanas y frames
REFERIRSE A VENTANAS Y FRAMES
En este apartado vamos a recapitular las distintas formas que tenemos de referirnos a las distintas ventanas del browser:
Para referirnos a la ventana en curso podemos utilizar "window" y "self", ya que ambas son sinónimos de la ventana
en curso. Debido a que se asume la existencia de la ventana actual, no es necesario referirnos a ella explícitamente,
de tal forma que para cerrar la ventana actual nos valdría simplemente con la siguiente expresión: close();
Nos podemos referir a la ventana que contiene a un determinado objeto "window" mediante las propiedades "top" y
"parent" según el caso.
También nos podemos referir a un determinado objeto "window" mediante la variable que lo contiene.
Por último nos podemos referir a un determinado objeto "window" mediante su nombre.
33
El objeto "document"
Introducción
Es el objeto al que se accede a través de la propiedad "document" del objeto "window". Como se vio en el módulo
anterior, el objeto "window" es el objeto más importante de JavaScript. Pues bien, el objeto "document" es el segundo
más importante, además de ser el segundo más utilizado.
Este objeto presenta propiedades que especifican información acerca del documento. También presenta algunos
métodos que permiten a los programas de JavaScript escribir texto HTML dinámicamente en un documento y crear
documentos sobre la marcha. Finalmente contiene un conjunto de vectores de propiedades que especifican información
acerca de los contenidos del documento. Cada uno de estos "arrays" representa los elementos existentes en el
documento de los tipos que aparecen como sucesores del objeto "document" en la jerarquía de objetos vista
anteriormente ( link, image, anchor, applet, Form).
Estos atributos se corresponden respectivamente con los atributos "BGCOLOR", "TEXT", "LINK", "VLINK" y "ALINK" de la
etiqueta <BODY>.
En "Internet Explorer" estas propiedades pueden establecerse en cualquier parte del documento, incluso después de que
la etiqueta <;BODY> haya sido analizada.
layers[ ], links[ ], images[ ], anchors[ ], applets[ ], forms[ ]
Arrays que representan los elementos existentes en el documento de los tipos especificados. Tener en cuenta
que el elemento <LAYER> solamente es reconocido por "netscape".
URL, location
Especifican la URL del documento.
lastModified
Es una cadena de caracteres que contiene la fecha y la hora en la que el documento fue por última vez
modificado.
referrer
Especifica la URL que del documento que contiene el enlace que el usuario ha pulsado para acceder al
documento actual. Esta propiedad es útil, por ejemplo, para contabilizar las páginas que incluyen enlaces a
nuestra página o para vetar el acceso a nuestra página de páginas que proceden de direcciones no deseadas.
Desgraciadamente, por causas de seguridad, esta propiedad no es accesible por defecto.
title
Contiene el texto que aparece entre las etiquetas <TITLE > y </TITLE> en la cabecera del documento.
cookie
Especifica una cookie.
El objeto "location"
Es el objeto al que se accede a través de la propiedad "location" del objeto "window". Es una cadena que representa la
URL completa asociada con un objeto "window" determinado. Cada una de las propiedades del objeto "location"
representa una parte diferente de la URL.
Se puede asignar un cadena con una nueva URL al objeto "location", lo cual tiene un importante efecto lateral: causa la
carga en el navegador y la muestra por pantalla el contenido de la URL asignada.
"Internet Explorer" soporta el método "navigate()" del objeto Window, para llevar a cabo esta operación, pero no es
compatible con "Netscape Navigator", por lo que no se debe utilizar.
El objeto "history"
Es el objeto al que se accede a través de la propiedad "history" del objeto "window". Es un array compuesto por las URLs
que el usuario ha visitado dentro de una ventana.
Presenta algunas propiedades como "length", la cual especifica el número de URLs visitadas por el usuario. Así mismo
posee las propiedades "previous" y "next", las cuales representan respectivamente las URLs anterior y posterior a la
actual en el array de URLs visitadas.
Así mismo tiene varios métodos importantes:
BACK( ): Carga la anterior URL de la lista de URLs visitadas en la ventana.
FORWARD( ): Carga la siguiente URL de la lista de URLs visitadas en la ventana.
GO( ): Carga una URL de la lista de URLs visitadas en la ventana. La URL actual tiene el valor 0, por lo que la sentencia
"history.go(-1)" tendrá el mismo efecto que "history.back()".
He aquí algunos posibles ejemplos de las propiedades y métodos vistos:
document.write(history.length);
history.back();
history.forward();
history.go(2);
Téngase en cuenta que la historia de una sesión es información privada, así que por razones de seguridad, existen
fuertes restricciones en cuanto a la forma de emplear el objeto "history". Por ejemplo, por defecto no se puede acceder a
las URLs almacenadas en el array que representa al objeto "history" ni a sus propiedades "next" y "previous".
36
TEMA 7
Validación de formularios
Introducción
Uno de los usos más importantes de JavaScript es validar la entrada de un formulario para programas basados en
servidores, como pueden ser las aplicaciones CGI. Su utilidad radica en los siguientes puntos:
Se reduce la carga del servidor, ya que todos los envíos en los que la información sea defectuosa nunca llegarán
al servidor. Además se pueden llevar a cabo los cálculos necesarios (como el importe total de un pedido) antes
de que el formulario sea enviado.
Se reducen los retrasos en caso de error de uso, ya que la información del usuario no tiene que viajar al servidor
para ser procesada.
Se simplifica el programa del servidor.
La información puede ser validada en dos momentos distintos:
Cuando el usuario la está introduciendo, utilizando el "event-handler" apropiado para cada elemento que se
quiera validar.
Cuando el usuario remite el formulario, por ejemplo, mediante el manejador de eventos "onClick" en el botón de
tipo "submit" del formulario.
Cookies
Introducción
Una cookie es una pequeña cantidad de información con un determinado nombre que es almacenada por el "web
browser" y está asociada con una página o sitio web concreto.
"document.cookie" es una propiedad de tipo cadena de caracteres que permite leer, crear, modificar y borrar la cookie o
cookies asociadas a la página actual.
Las cookies por defecto son transitorias, es decir que los valores que ellas almacenan permanecen únicamente a lo largo
de la sesión, pero se pierden cuando el usuario sale del navegador. Si se desea que las cookies permanezcan después
de la sesión entonces se debe especificar una fecha de expiración, lo cual provoca que el browser guarde sus cookies en
fichero local del cliente hasta que haya pasado dicha fecha, para así poderla leer en una futura sesión.
El lugar en el que se guardarán las cookies depende del sistema operativo. Un ejemplo podría ser en el directorio:
"C:\WINNT\Profiles\usuario\Cookies\"
Por defecto las cookies están asociadas y son accesibles para la página que las creó y cualquier otra página del mismo
directorio o de sus subdirectorios. Algunas veces puede interesar poder usar los valores de las cookies a través de un
espacio web multipágina, independientemente de la página que la creó.
Para permitir esto se debe especificar un "path" para la cookie. Entonces, cualquier servidor web que contiene el path en
sus URL compartirán las cookies.
Por defecto las cookies son accesibles solamente para las páginas que se encuentren en el mismo servidor web desde el
que fueron establecidas. En espacios web muy grandes puede interesar que las cookies sean compartidas por varios
servidores web. Para hay que establecer un dominio para la cookie. Si no se establece ningún dominio para la cookie el
dominio por defecto será el servidor web que sirve la página.
Las cookies pueden ser seguras o inseguras. Por defecto son inseguras, lo que significa que serán transmitidas en una
conexión HTTP insegura normal. Si una cookie es marcada como segura, entonces únicamente será transmitida cuando
el browser y el servidor se conectan vía HTTPS u otro protocolo seguro.
Lectura de cookies
Cuando se usa la propiedad cookie en una expresión javaScript , el valor que devuelve es una cadena de caracteres la
cual contiene todas las cookies que aplica el documento actual. La cadena es un lista de pares "nombre=valor" separados
por punto y coma, donde "nombre" es el nombre de una cookie y "valor" es una cadena de caracteres que representan su
valor.
Hay que tener en cuenta que la propiedad "document.cookie" no proporciona ninguna forma de obtener los valores de los
campos dominio, path, fecha de expiración o seguridad de una cookie.
Almacenamiento de cookies
Para asociar un valor provisional de una cookie con el documento actual simplemente hay que establecer la propiedad
cookie a una cadena de la forma vista anteriormente.
La siguiente vez que se lea el valor de la propiedad cookie, el par "nombre=valor" que se ha almacenado será incluido en
la lista de cookies del documento.
Para establecer un tiempo de expiración habrá que introducir los valores de la propiedad cookie de la siguiente forma:
Nombre=valor; expires=fecha
Donde fecha debe ser la especificación de una fecha en el formato descrito por Date.toGMTString() ,el cual depende de
la plataforma pero un ejemplo sería el siguiente: "Mon, 18 Dec 1995 17:28:35 GMT".
De forma similar se establecen el resto de campos significativos de una cookie.
Nombre=valor; expires=fecha; domain=dominio; secure=secure;path=camino;
Para cambiar el valor de una cookie, simplemente hay que volver a establecerla, dándola el mismo nombre y el mismo
valor a los campos "expiration", "path", "domain" y "secure", pero un valor distinto al campo "value".
38
Para borrar una cookie hay que volver a establecerla, con el mismo nombre, un valor arbitrario y una fecha de expiración
ya pasada.
Limitaciones de cookies
Las cookies están proyectadas para un infrecuente almacenamiento de pequeñas cantidades de información. No han sido
proyectadas como un mecanismo de comunicación de carácter general. Se deben usar con moderación. Tener en cuenta
que un browser no puede retener más de 300 cookies en total, no más de 20 cookies por servidor web, y no más de 4KB
de información por cookie. No es una buena idea emplear distintas cookies por cada variable que se quiera salvar, sino
que se debe intentar salvar múltiples variables de estado en una única cookie.
Ejemplo de cookies
El siguiente ejemplo muestra como mediante el uso de cookies el usuario puede definir el color de fondo que verá la
próxima vez que entre en una determinada página.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function getCookie(nombre) {
var search = nombre + "="
if (document.cookie.length > 0) { // sin hay cookies
offset = document.cookie.indexOf(search)
if (offset != -1) { // la cookie existe
offset += search.length
fin = document.cookie.indexOf("x", offset)
if (fin == -1)
fin = document.cookie.length
return unescape(document.cookie.substring(offset, fin))
}
}
}
function guardarCookies() {
var hoy = new Date()
var expiracion = new Date()
expiracion.setTime(hoy.getTime() + 1000*60*60*24*365)
setCookie("color", color.value, expiracion)
}
function cargar() {
cad=getCookie("color");
if (cad!="")
document.bgColor=cad;
}
</SCRIPT>
</HEAD>
<BODY onLoad="cargar();">
<P>Introduzca su color favorito para la próxima vez que visite la página:
<input type=text name=color ></P>
<INPUT type=button value="Guardar preferencias" onCLick="guardarCookies();">
</BODY>
</HTML>
39
Presentación dinámica
Introducción
Una de las más importantes características de JavaScript es que es una de las tecnologías que se utilizan a la hora de
desarrollar documentos dinámicos.
Aunque no es éste el objeto de este curso, vamos a ver una pequeña introducción a este tema, de forma práctica, para
ver como se puede utilizar JavaScript a la hora de desarrollar documentos dinámicos.
La forma de conseguir la construcción de documentos dinámicos es proporcionando una serie de objetos que
representan a los elementos de la página HTML, y cuyos atributos son las propiedades del objeto en cuestión, de forma
que se puede acceder a los atributos de los elementos de una página HTML a través de las propiedades de los objetos
que representan a dichos elementos. Y lo que es más importante, podemos darles valores, siendo posible modificar los
atributos de un elemento, con lo que ello conlleva.
40
Ejemplo de animación
El siguiente ejemplo muestra como a través de una animación con imágenes se consigue un efecto dinámico
<HTML>
<SCRIPT>
var num_imag = 0;
imagenes = new Array(10);
for(var i = 0; i < 8; i++) {
imagenes[i] = new Image();
imagenes[i].onload = cuenta_imagenes;
imagenes[i].src = "imagen" + i + ".jpg";
}
function cuenta_imagenes() {
num_imag++;
}
function animar()
{
document.animacion.src = imagenes[capa].src
capa = (capa + 1)%8;
timeout_id = setTimeout("animar()", 1000);
}
var capa = 1;
var timeout_id = null;
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE=button VALUE="Animar" onClick="if (timeout_id==null && num_imag==8) animar()">
<INPUT TYPE=button VALUE="Parar" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;">
</FORM>
</BODY>
</HTML>
41