Curso Básico Javascript

Curso Javascript Básico
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.
Lo que javascript no puede hacer

Javascript no posee ninguna capacidad gráfica más allá de la capacidad de crear y mostrar HTML.
Por razones de seguridad JavaScript no permite la lectura ni escritura de ficheros. Si esto no fuera así un programa de
cualquier página web podría acceder a los ficheros de la máquina cliente.
No soporta trabajo de red de ninguna clase excepto que pueden provocar la carga en el navegador del contenido de un
URL arbitraria.
Javascript no posee habilidades de multitarea, excepto aquellas que son implícitas del uso interno de tareas del
navegador.
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 OCTALES Y HEXADECIMALES

Los literales enteros en base 8 comienzan con un signo menos opcional seguido del dígito cero, seguido por una
secuencia de dígitos entre 0 y 7.
Sintaxis: [-]0(0-7)* ej: -0123, 0337
Los literales enteros en base 16 comienzan por un signo menos opcional seguido de "0x" o "0X" seguido por una cadena
de dígitos hexadecimales.
Sintaxis: [-]0(x|X)(0-9|a-f|A-F)* ej: 0xaf, 0X91CC
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
LITERALES DE CADENA DE CARACTERES

Se representan mediante una secuencia de cero o más caracteres encerrados entre comillas simples o dobles (' o "). Las
comillas simples deben ir encerradas entre comillas dobles y viceversa.
ej: 'hola ', "3.14", 'variable="valor"', "Peter's car"
La barra inversa "\" tiene un propósito especial en las cadenas de caracteres de JavaScript. Combinada con el siguiente
carácter representa un carácter que de otra forma no podría ser representado en una cadena de caracteres, al igual que
en C o C++.
Secuencia Carácter Representado
\b Retroceso
\f Salto de página
\n Nueva línea
\r Retorno de carro
\t Tabulador
\' Apóstrofe o comilla simple
\" Comilla doble
\\ Barra invertida
\XXX El carácter representado por su código octal.
\xXX El carácter representado por su código hexadecimal.
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.
abstract else instanceof

switch
boolean enum int
synchronized
break export interface
this
byte extends long
throw
case false native
throws
catch final new
transient
char finally null
true
class float package
try
const for private
typeof
continue function protected
var
debugger goto public
void
default if return
volatile
delete implements short
while
do import static
with
double in super
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.
alert Escape JavaPackage onunload setTimeout

Anchor Eval Length open status
Area FileUpload Link opener String
Array Focus Location Option Submit
Assign Form Location Packages sun
Blur Frame Math parent taint
Boolean Frames MimeType parseFloat Text
Button Function Name parseInt Textarea
Checkbox GetClass navigate Password top
ClearTimeout Hidden Navigator Plugin toString
Close History navigator prompt unescape
Closed History netscape prototype untaint
Confirm Image Number Radio valueOf
Date IsNaN Object ref Window
DefaultStatus Java onblur Reset window
Document JavaArray onerror scroll
Document JavaClass onfocus Select
Element JavaObject onload self
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:
+ 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.
OPERADORES A NIVEL DE BIT

Tratan a sus operando como un conjunto de 32 bits que representan su valor, y devuelven un valor numérico.
& 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.
&& 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();
typeof cad; devuelve "string"

typeof numero devuelve "number"
typeof fecha devuelve "object"
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.
OPERADORES DE ACCESO ARRAYS Y OBJETOS

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.
El operador "[ ]" permite acceder a elementos de arrays y también a propiedades de objetos, sin las restricciones del
operador punto respecto al operando derecho. Si el primer operando se refiere a un array, el segundo operando debe ser
una expresión que devuelva un valor entero. Si el primer operando es una referencia a un objeto el segundo operando
debe ser una expresión que devuelva un string con el nombre de una propiedad del objeto.
El operador "[ ]" se suele usar solamente para acceder a elementos de un array, mientras que el operador punto se suele
usar para acceder a propiedades de objetos. Sin embargo, si los nombres de propiedades se generan dinámicamente,
para acceder a ellas deberemos usar el operador "[ ]".
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 como tipos de datos

En JavaScript las funciones son datos, y por lo tanto pueden ser tratadas como tales (pueden ser asignadas a variables,
almacenadas como propiedades de objetos o elementos de vectores, pasadas como argumentos de funciones...).
Dado que JavaScript es un lenguaje interpretado también permite que las funciones sean definidas dinámicamente, en
tiempo de ejecución.
Asignación de funciones a variables:
var1 = cuadrado(4); var1 contiene el número 16.
var2 = cuadrado;
var3 =var2(4); var3 contiene el número 16.
Almacenamiento de funciones a propiedades de objetos:
obj=new Object;
obj.cuad= cuadrado;
var = obj.cuad(4); var contiene el número 16;
Almacenamiento de funciones como elementos de vectores.
vect= new Array(10);
vect[0]=cuadrado;
vect[1]=4;
vect[2]= vect[0](vect[1]); vect[2] contiene el número 16;
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".
Acceso a objetos mediante arrays

El operador [ ] permite acceder a elementos de arrays y también a propiedades de objetos, sin las restricciones del
operador punto respecto al operando derecho. Si el primer operando se refiere a un array, el segundo operando debe ser
una expresión que devuelva un valor entero. Si el primer operando es una referencia a un objeto, el segundo operando
debe ser una expresión que devuelva un string con el nombre de una propiedad del objeto.
El operador [ ] se suele usar solamente para acceder a elementos de un array, mientras que el operador punto se suele
usar para acceder a propiedades de objetos. Sin embargo, si los nombres de propiedades se generan dinámicamente,
para acceder a ellas deberemos usar el operador [ ].
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;
}
Métodos especiales de objetos

Son métodos que son invocados directamente por JavaScript en diferentes situaciones. Se puede dar una definición de
dichos métodos, y así poder controlar el modo en que los objetos son manipulados.
ToString()
No toma ningún argumento y devuelve un string, el cual representa de alguna forma el tipo y/o el valor del objeto
referenciado por "this". JavaScript invoca este método cuando necesita convertir un objeto a un string. Esto ocurre, por
ejemplo cuando se utiliza el operador "+" para concatenar un cadena de caracteres con un objeto o cuando se pasa un
objeto a un método como "document.write()".
function Circulo_toString()
{
return ("[Circulo de radio " + this.r + ", centrado en ("
+ this.x + ", " + this.y + ").]");
}
function Circulo(radio, equis, igriega) {

this.r = radio;
this.x = equis;
this.y = igriega;
this.toString = Circulo_toString;
}
c = new Circulo(1, 0, 0);
document.write(c);
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();
Clases y metodos. Java vs JavaScript

Una "variable de instancia" es aquella que está contenida en un objeto y cada objeto tiene su propia copia de esa
variable. En JavaScript cada propiedad de un objeto es una "variable de instancia", pero para simular programación
orientación a objetos diremos que son las creadas o inicializadas por la función constructor.
Los métodos de instancia son como las variables de instancia, sólo que son funciones en lugar de valores. En Java las
funciones y métodos no son tipos de datos, por lo que esta diferencia es más clara que en JavaScript.
Un método de clase o "static" es un método asociado con una clase en lugar de con una instancia de la clase. Para
definir un método de clase en JavaScript simplemente establecemos la función apropiada como propiedad del objeto
"prototype".
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"
METODOS DEL OBJETO ARRAY

concat=Une dos arrays y devuelve uno nuevo.
join=Une todos los elementos de un array en un string.
pop=elimina el último elemento de un array y lo devuelve.
push=Añade uno o más elementos al final de un array y devuelve el último elemento añadido.
reverse = transpone los elementos de un array.
shift =elimina el primer elemento de un array y lo devuelve.
slice =extrae un sección de un array y devuelve un nuevo array.
splice=añade o elimina elementos de un array.
sort=ordena los elementos de un array.
unshift= Añade uno o más elementos al principio de un array y devuelve la nueva longitud del array.
ARRAYS DE DOS DIMENSIONES

 Creación
a = new Array(4)
for (i=0; i < 4; i++) {
a[i] = new Array(4)
for (j=0; j < 4; j++) {
a[i][j] = "["+i+","+j+"]"
}
}
 Listado
for (i=0; i < 4; i++) {
str = "Fila "+i+":"
for (j=0; j < 4; j++) {
str += a[i][j]
}
document.write(str,"<p>")
}
 Resultado del listado
Fila 0:[0,0][0,1][0,2][0,3]
Fila 1:[1,0][1,1][1,2][1,3]
Fila 2:[2,0][2,1][2,2][2,3]
Fila 3:[3,0][3,1][3,2][3,3]
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");
METODOS DEL OBJETO DATE

Estos métodos se emplean para manipular fechas y horas:
métodos "set", para establecer valores de fecha y hora en objetos "Date".
métodos "get", para coger valores de fecha y hora en objetos "Date".
métodos "to", para devolver cadenas de caracteres de objetos "Date".
Estos métodos utilizan números enteros para representar cada valor, de la siguiente forma:
"Seconds" y "Minutes": de 0 a 59
"hours": de 0 to 23
"day": de 0 (lunes) a 6 (sábado)
"Date": de 1 a 31 (día del mes)
"Months": de 0 (enero) a 11 (diciembre)
"Year": años desde 1900
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>
Ocultar el código del SCRIPT

Para los navegadores que no reconocen el elemento <script> se puede, bien tener el código del script en un fichero
externo, o bien introducirlo como un comentario HTML, si éste va insertado en el documento, con el fin de que el
navegador no muestre el código del script.
Si el lenguaje es JavaScript podemos introducir el inicio de comentario "<--" en la primera línea, ignorando el resto de
caracteres de esa línea. Para que JavaScript ignore el final del comentario "-->", introduciremos al principio de su línea
"//", que es el símbolo de inicio de un comentario de una línea para JavaScript. De este modo:
<SCRIPT languaje=JavaScript >

</SCRIPT>
26
TEMA 5
Introducción a los eventos

Eventos
Hoy en día, con los dispositivos gráficos y otros dispositivos como los ratones, los programas suelen ser orientados a
eventos, es decir que responden a los eventos producidos por el usuario, tales como pulsaciones del ratón. Un "browser"
es un entorno gráfico y por lo tanto JavaScript usa un modelo de programación orientado a eventos.
Para implementar un programa orientado a eventos se deben escribir funciones que traten eventos, llevando a cabo las
acciones apropiadas en respuesta a las entradas del usuario. Además hay que hacer que esas acciones sean
reconocidas por el sistema como un manipulador de cierto evento para que las pueda invocar en el momento apropiado.
La siguiente tabla muestra los distintos eventos que se pueden producir y los respectivos manipuladores de eventos o
"event handlers" correspondientes:
Evento Elementos sobre el que Descripción Event handler

se aplica
Abort Imágenes El usuario aborta la carga de un onAbort
imagen (por ejemplo pulsando sobre
un enlace o dando al botón stop)
Blur Ventanas y todos los El usuario quita el foco de la ventana onBlur
elementos de un formulario o del elemento.
Change Elementos text, textarea, El usuario cambia el valor de un onChange
select elemento
Click Botones, radio buttons, El usuario pulsa un elemento o onClick
checkboxes, submit, reset, enlace
enlaces
DragDrop Ventanas El usuario deja caer un objeto en la onDragDrop
ventana del browser
Error Imágenes, ventanas La carga de una imagen o documento onError
provoca un error
Focus Ventanas y todos los El usuario da el foco a la ventana o onFocus
elementos de un formulario del elemento.
KeyDown Documentos, imágenes, El usuario presiona una tecla onKeyDown
enlaces, text áreas
KeyPress Documentos, imágenes, El usuario presiona o mantiene onKeyPress
enlaces, text áreas presionada una tecla
KeyUp Documentos, imágenes, El usuario deja de presionar una tecla onKeyUp
enlaces, text áreas
Load Cuerpo del documento EL usuario carga la página en el onLoad
Navegador
MouseDown Documentos, botones, enlaces El usuario presiona un botón del ratón onMouseDown
MouseMove Nada por defecto El usuario mueve el cursor onMouseMove
MouseOut Áreas, enlaces El usuario saca el cursor de una onMouseOut
imagen o un enlace
MouseOver Enlaces El usuario mueve el cursor por un onMouseOver
enlace
MouseUp Documentos, botones, enlaces El usuario deja de presionar un botón onMouseUp
del ratón
Move Ventanas Se mueve una ventana onMove
Reset Formularios El usuario resetea un formulario onReset
Resize Ventanas Se cambia el tamaño de una ventana onResize
Select Text, textarea El usuario selecciona campos de onSelect
entrada de un formulario
Submit Formularios El usuario remite un formulario onSubmit
Unload Cuerpo del documento El usuario sale de la página onUnload
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.
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.
Ejemplos de uso de URLs de "javascript:"

Por ejemplo, se puede definir el siguiente enlace para recargar la página actual cuando el usuario lo pulsa:
<A HREF="javascript:history.go(0)">Recargar
Cuando el navegador carga una de esas URLs , ejecuta el código JavaScript contenido en la URL y muestra el
documento especificado por la última sentencia incluida en ella, si la sentencia especifica un salto, como en el caso
anterior. Por lo tanto las URLs se pueden utilizar en muchas ocasiones para añadir funcionalidad en las aplicaciones,
añadiendo al cambio de documento la realización de una serie de acciones que no sería posible de otra forma.
Por ejemplo, se puede incrementar un contador "cont" en un "frame" cada vez que un usuario pulse un determinado
enlace, usando la siguiente función:
function cuentaSaltos() {
cont++
parent.frames[1].location="pruebas1.html";
}
Para invocar a la función se puede pasar una URL de "javascript:" como la siguiente:
<a href="javascript:cuentaSaltos();">Pagina1
Valores devueltos por las URLs de "javascript:"

Una URL de "javascript:" puede contener una expresión JavaScript que desarrolle acciones pero no que devuelva ningún
valor. Por ejemplo:
Javascript:alert("hola");
Si la expresión evalúa a un tipo definido, el valor se convierte a un string que será escrito en el documento como si se
tratase del parámetro del método "document.write()".
Si el valor de la expresión que sigue al prefijo "javascript:" de la URL evalúa a "undefined", no se llevaría a cabo ninguna
acción adicional a las especificadas en el código contenido en la URL.
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:
A continuación veremos los principales de estos objetos.
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":
Propiedades del objeto "window"

Todos los objetos del navegador son propiedades del objeto "window" en tanto en cuanto dependen de él en la jerarquía.
A parte de esas propiedades, el objeto "window" presenta otras propiedades de interés:
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
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>
Métodos del objeto "window"

Estos son los métodos principales del objeto "window":
OPEN( ):
Abre una nueva ventana del navegador. Con la siguiente sintaxis:
open(URL, Nombre_de_ventana [, características_de_ventana]);
Donde el primer argumento representa la URL que se cargará en la ventana, el segundo el nombre de la
ventana para que lo use el atributo "target" y el tercero representa una lista con las características de la nueva
ventana. Algunas de estas características son las siguientes:
height, width: especifican la altura y la anchura de la nueva ventana.
resizable: si su valor es "yes" el usuario podrá modificar el tamaño de la nueva ventana.
location, menubar, personalbar, scrollbars, status, toolbar: si su valor es "yes" mostrará el
elemento del "browser" al que se refiere.
Este método devuelve una referencia al objeto "window" abierto, de tal forma que puede ser asignado a una
variable.
v2=window.open("prueba.html","v2", "height=200, width=100, location=yes, menubar=yes,
personalbar=yes, resizable=no, scrollbars=yes, status=no, toolbar=yes");
CLOSE( ):
Cierra la ventana especificada. Por ejemplo, para cerrar la ventana abierta en el ejemplo anterior utilizaríamos la
siguiente sentencia:
v2.close();
Para cerrar la ventana en curso se podría emplear cualquiera de estas sentencias:
Self.close();
window.close();
ALERT( ):
Muestra una caja de diálogo con un mensaje y un botón de confirmación.
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
El siguiente ejemplo muestra un forma de saludar al visitante de nuestra página:

Ej:<script>
document.write("Bienvenido a mi página, "+ prompt("Introduzca su nombre"));
</script>
BLUR( ), FOCUS( ) :
Para quitar o poner el foco en una ventana.
Por ejemplo, si quisiésemos que la ventana "v2" dejase de ser mostrada por pantalla en caso de que estuviera
siendo mostrada, podríamos emplear la siguiente sentencia:
v2.blur( );
SETTIMEOUT( ):
Evalúa una expresión cuando hayan transcurrido los milisegundos indicados. Su sintaxis es la siguiente:
setTimeout (función, mseg, [,args])
Donde [, args] es una lista de argumentos pasados a la función si fuera necesario. Para cancelar un
temporizador determinado se utilizará la función clearTimeout.
EJ:
temp=setTimeout( funcion( ), 1500);
.......
clearTimeout(temp);
SETINTERVAL( ):
Es una función idéntica a la anterior en cuanto a su sintaxis. Se diferencia de ella en que "setInterval" hará que la
expresión se evalúe o la función se ejecute cada vez que transcurran el número de milisegundos especificados,
a menos que sea cancelada con una llamada a "clearInterval".
MOVEBY( ):
Desplaza la ventana una cantidad de pixels respecto a su posición actual.
MOVETO( ):
Desplaza la ventana a la posición indicada.
RESIZEBY( ):
Modifica el tamaño de la ventana una cantidad de pixels respecto a su tamaño actual.
RESIZETO( ):
Modifica el tamaño de la ventana al tamaño indicado.
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.
NOMBRES DE VENTANAS Y FRAMES

Cuando queremos abrir una determinada ventana podemos hacerlo mediante el método "open( )", pasándole como
segundo argumento el nombre de la ventana. También nos podemos referir a una ventana por su nombre de otra forma
distinta: especificando el nombre de la ventana como valor del atributo "TARGET" de las etiquetas <A>, <MAP> y
<FORM>.
EJ: Si se tienen dos ventanas, una llamada "indice" y otra llamada "principal", entonces se puede tener un código HTML
como el siguiente en la ventana "indice":
<A href= "capitulo1.html" TARGET="principal">Capítulo1, Introducción</A>
Si en este caso no existe ninguna ventana llamada "principal", al pulsar el enlace se creará una nueva ventana con ese
nombre y se cargará en ella la URL especificada.
Los frames también pueden tener nombres para ser empleados con el atributo "TARGET". El nombre de un frame se
especifica mediante el atributo "NAME" de la etiqueta. Por tanto si el nombre de un frame es "f1" podemos referirnos a
ese frame desde otro con la siguiente expresión:
parent.f1;
La cual hace que el código sea más fácil de leer y comprender que haciéndolo mediante el array de frames, como vimos
anteriormente.
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).
Propiedades del objeto "document"

El objeto "document" cuenta con una serie de propiedades que se corresponden con los atributos de la etiqueta <BODY>:
"bgColor", "fgColor", "linkColor", "vlinkColor", "alinkColor"
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.
Métodos del objeto "document"

De entre los métodos con los que cuenta el objeto "document" señalamos los siguientes:
WRITE( ), WRITELN( ):
Permiten generar dinámicamente contenido HTML desde un programa JavaScript, lo cual supone una la
característica más importante del objeto "document". Este método se puede usar de distintas formas. La más
obvia es incluirlo en un "script" para escribir HTML en el documento mientras está siendo analizado.
EJ:
<P>Última modificación:
<I><SCRIPT>document.write(document.lastModified);</SCRIPT></I>
</p>
Sólo podemos escribir salida HTML mientras el documento esta siendo analizado. Es decir que no podemos
invocar al método "write()" dentro de un "event-handler", ya que en ese caso se sobreescribiría el documento en
lugar de añadir el nuevo contenido.
34
También podemos utilizarlo para escribir un documento en otro "frame" o en otra ventana, obteniendo de este
modo contenido dinámico.
EJ:
<SCRIPT>
parent.frames[0].document.open();
parent.frames[0].document.write("<B>contenido del frame</B>");
parent.frames[0].document.close();
</SCRIPT>
El método "writeln()" es idéntico a "write()" salvo que incluye el carácter de salto de línea al final. Dado que
HTML ignora los saltos de línea, este método no representa ninguna diferencia en cuanto al resultado obtenido
en cuanto a la visualización del documento.
OPEN( ), CLOSE( )
El método "open()" abre un canal para recoger la salida de los métodos "write()" y "writeln()", y el método
"close()" cierra dicho canal y fuerza que la información sea mostrada por pantalla.
ventana.document.open( );
ventana.document.write("<p>Hola</p>");
ventana.document.close( );
El método "open()" es opcional, ya que javaScript lo lanza automáticamente cuando se invoca el método
"write()". Sin embargo es importante untilizar "close()", para indicar que la escritura ha sido completada. Si se
olvida cerrar el documento el "browser" no detendrá la animación que muestra por pantalla cuando el documento
está siendo cargado.
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.
Propiedades del objeto "location"

Las principales propiedades del objeto "location" son las siguientes:
HASH: Cadena que comienza con una marca "#" y especifica el nombre de un ancla en la URL.
HOST: Cadena de caracteres que especifica el nombre del servidor, el dominio y el subdominio.
HOSTNAME: Cadena de caracteres que especifica el nombre completo del servidor, incluyendo el nombre del servidor el
dominio, el subdominio y el número de puerto.
HREF: Cadena que especifica la URL completa. Si se desea cambiar la URL asociada a una ventana, debe hacerse
modificando la propiedad "href". Así se actualizan además el resto de propiedades.
PATHNAME: Cadena que especifica el path correspondiente a la URL.
PORT: Cadena que especifica el puerto de comunicaciones que utiliza el servidor.
PROTOCOL: Cadena que especifica el protocolo de la URL. Valores válidos de esta propiedad son, por ejemplo, "httP",
"file:"...
SEARCH: Contiene cualquier parte de la URL que sigue a un símbolo de interrogación. En general el símbolo de
interrogación es una técnica para incluir argumentos en una URL, lo cual es muy utilizado en CGIs, pero no
significa que no pueda usarse con JavaScirpts.
Métodos del objeto "location"

Los principales métodos del objeto "location" son los siguientes:
RELOAD( )
Fuerza la carga del documento en curso de la ventana (el documento especificado por la propiedad "href").
REPLACE( )
35
Fuerza la carga de la URL especificada sin generar una entrada en el objeto "history", por lo que el usuario no
podrá cargar la URL anterior usando el botón "atrás" del browser.
He aquí algunos posibles ejemplos de las propiedades y métodos vistos :
document.write(location);
document.write(location.hash);
document.write(location.host);
location.href= file:///c:/ruta/fich.html;
location.reload();
location.replace("file:///C:/ruta/fich.html;");
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.
Ejemplo de validación de un formulario

El siguiente ejemplo muestra como se puede comprobar la validez de los datos, así como realizar cálculos previos a la
transmisión de la información.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function esPos(s) {
return (parseInt(s) > 0)
}
function comprobar(item, min, max) {

var returnVal = false
if (!esPos(item.value))
alert("Por favor introduzca un número positivo.")
else if (parseInt(item.value) < min)
alert("Por favor introduzca un " + item.name + " mayor que " + min)
else if (parseInt(item.value) > max)
alert("Por favor introduzca un " + item.name + " menor que " + max)
else
returnVal = true
return returnVal
}
function validarCalcular (formu) {

if (comprobar(formu.cantidad, 0, 999)) {
alert("El formulario ha sido validado")
importe=formu.cantidad.value*1.99;
alert("El importe de su pedido es de "+ importe + " €");
formu.importe.value=importe;
formu.submit();
return true
}
else {
alert("Su orden no puede ser enviada.")
return false
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=formu1 action="mailto:direccion@inexistente" method=post>
<P>Introduzca la cantidad de productos:<input type=text name=cantidad></P>
<INPUT type=hidden name=importe>
37
<INPUT type=button name=boton value=Enviar onCLick="validarCalcular(formu1);">
</FORM>
</BODY>
</HTML>
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 setCookie(nombre, value, expira) {

document.cookie = nombre + "=" + value + "; expires=" + expira.toGMTString();
}
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.
Efectos con imágenes

Como ejemplo de cómo se puede alcanzar el dinamismo en una página web, vamos a ver como podemos modificar
imágenes. La forma de sustituir una imagen por otra parece evidente que es modificando el valor del atributo src del
elemento IMG correspondiente.
Ya hemos dicho que se pueden tratar los elementos de una página web como objetos programables, de tal forma que se
pueden modificar sus atributos.
<IMG src="imagen1.gif" NAME=imagen>
Para poder modificar un atributo de un elemento, debemos en primer lugar darle un nombre al elemento, mediante su
atributo "id" o "name". De esta forma podemos acceder a sus atributos mediante un objeto que tendrá el mismo nombre
que el elemento en cuestión.
<INPUT TYPE=button VALUE="animar" onClick=animar();>
Debemos en segundo lugar, determinar cuando se van a llevar a cabo dichos cambios, para lo cual únicamente debemos
elegir un evento determinado. Una vez elegido el evento que hará que se produzca el cambio en la imagen, debemos
construir un event-handler que trate dicho evento y, en el que se especifique la rutina a seguir para llevar a cabo el
cambio.
imagen.src="imagen2.gif";
Este sería el procedimiento básico a la hora de desarrollar un cambio dinámico en nuestro documento. De la forma que
hemos llevado a cabo el cambio en la imagen lo que se produce es que al pulsar el botón el fichero "imagen2.gif" se
cargaría y sustituiría al fichero "imagen1.gif" en el elemento "imagen".
Si la imagen a cargar fuese demasiado pesada, el tiempo de transición entre las imágenes podría ser significativo, cosa
que sería mucho más grave en el caso de que estuviéramos realizando una animación. Para evitar este retardo en la
transición de imágenes deberíamos cargar todas las imágenes que fuésemos a utilizar al cargar el resto de documento.
Para cargar las imágenes con el resto del documento podemos definir un array de objetos de tipo image, e introducir en el
todas las imágenes, o utilizar de forma análoga el vector images[ ], el cual es una propiedad del obeto "document".
document.images[0]=new Image;
document.imges[0].src="imagen1.gif";
document.images[1]=new Image;
document.images[1].src="imagen2.gif";
Por último, indicar que un objeto de tipo "image" dispara el "event handler" "onLoad" cuando concluye la carga de su
imagen. Utilizándolo podemos hacer que se compruebe que se han cargado todas las imágenes antes de permitir su
tratamiento.
Si queremos hacer un animación debemos tener en cuenta el número de imagen que tenemos cargadas.
Para cada imagen el "event-handler" de "onLoad" debe incluir la siguiente línea:
function onLoadEH()
{
num_imag++;
}
Para el botón el "event-handler" de "onClick" preguntaremos si todas las imágenes han sido cargadas, para poder llevar a
cabo la animación:
<INPUT TYPE=button onCLick=if (num_imag==2) imagen.src=images[1].src;>
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>
<IMG src="imagen0.jpg" height=150 NAME=animacion>
<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

Curso Básico Javascript

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curso Básico Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

Curso Javascript Básico

Lo que javascript no puede hacer

LITERALES OCTALES Y HEXADECIMALES

LITERALES DE CADENA DE CARACTERES

abstract else instanceof

alert Escape JavaPackage onunload setTimeout

OPERADORES A NIVEL DE BIT

typeof cad; devuelve "string"

OPERADORES DE ACCESO ARRAYS Y OBJETOS

Funciones como tipos de datos

Acceso a objetos mediante arrays

Métodos especiales de objetos

function Circulo(radio, equis, igriega) {

Clases y metodos. Java vs JavaScript

METODOS DEL OBJETO ARRAY

ARRAYS DE DOS DIMENSIONES

METODOS DEL OBJETO DATE

Ocultar el código del SCRIPT

Introducción a los eventos

Evento Elementos sobre el que Descripción Event handler

Ejemplos de uso de URLs de "javascript:"

Valores devueltos por las URLs de "javascript:"

A continuación veremos los principales de estos objetos.

Propiedades del objeto "window"

Métodos del objeto "window"

El siguiente ejemplo muestra un forma de saludar al visitante de nuestra página:

NOMBRES DE VENTANAS Y FRAMES

Propiedades del objeto "document"

"bgColor", "fgColor", "linkColor", "vlinkColor", "alinkColor"

Métodos del objeto "document"

Propiedades del objeto "location"

Métodos del objeto "location"

Ejemplo de validación de un formulario

function comprobar(item, min, max) {

function validarCalcular (formu) {

function setCookie(nombre, value, expira) {

Efectos con imágenes

<IMG src="imagen0.jpg" height=150 NAME=animacion>

S-ar putea să vă placă și