Javascript PDF

JAVASCRIPT
Bibliografía:
JavaScript. The Definitive Guide 2 O’Reilly.
Diseño de páginas web interactivas con
JavaScript 2ª Ed. 2 Ra-Ma
Professional JavaScript 2 Wrox
Luis Marco – Noviembre 2000

Rev. Abril 2006
Bibliografía recomendada
JavaScript – The Definitive Guide

David Flanagan
Editorial O’reilly
JavaScript Bible – 3rd. Edition
Dany Goodman
Editorial IDG Books
Professional JavaScript
Varios autores
Editorial Wrox
Pure JavaScript
Editorial SAMS
Herramientas necesarias
Editor de texto ASCII

– Notepad de Windows
– UltraEdit 32
– vi/vim
– ...
Navegador web con soporte JavaScript

– Microsoft Internet Explorer 4.0+
– Netscape Navigator 4.0x+
– Opera
– Mozilla / Mozilla Firefox
– ...
Conocimientos previos de HTML
Introducción (I)
JavaScript es un lenguaje de programación creado

por Netscape.
Objetivo: Integrarse en HTML y facilitar la creación
de páginas interactivas.
El código JavaScript no necesita ser compilado, es
el propio navegador el que se encarga de
interpretarlo.
Introducción (II)
Con JavaScript se pueden desarrollar programas

que se ejecuten en el navegador (cliente) con el
objetivo de efectuar determinadas operaciones sin
acceder al servidor web.
MSIE Soporta una variante de JavaScript, JScript,

similar pero no compatible al 100%.
Características
No tipado.
Basado en objetos.
JavaScript NO ES Java.
En la actualidad, pocos navegadores no disponen
de soporte de JavaScript.
Un lenguaje de programación es fuertemente tipado si el compilador comprueba que

no se violan los tipos de datos.
Un lenguaje que no es fuertemente tipado se dice que no está tipado.

Versiones de JavaScript / JScript
Navegador Año Versión

Netscape Navigator 2.0 1995 JavaScript 1.0
Microsoft Internet Explorer 3.0 1996 JavaScript 1.0 - JScript 1.0
Microsoft Internet Explorer 5.5 2001 JavaScript 1.3 – JScript 5.5
Microsoft Internet Explorer 6.0 2002 JavaScript 1.3 – JScript 5.6

Capacidades de JavaScript
Control de la visualización y contenido de los

documentos html.
Control de objetos del browser.
Interactividad mediante formularios html.
Interactividad con el usuario.
Lectura y Escritura de cookies.
Temporizar acciones
Etc...
Qué no puede hacer JavaScript
JS no tiene capacidades gráficas, excepto la

habilidad de generar dinámicamente documentos
html con imágenes, tablas, formularios, ...
Por razones de seguridad, el JS cliente no tiene
acceso al sistema de ficheros local.
Tampoco tiene soporte de comunicaciones, excepto
las que proporciona el navegador.
Usando JavaScript en HTML
JavaScript puede ser embebido en un documento

HTML de dos maneras:
1. Como funciones y sentencias usando las elemento

<script> ... </script>.
2. Como manejadores de eventos usando eventos
HTML.
Etiqueta <SCRIPT>
Para definir el inicio de código se escribirá una de

las sentencias:
<script language="JavaScript"> ... </script>
<script language="JavaScript1.3"> ... </script>
<script> ... </script>
Ejemplo:
<html><body>
<script> document.write("HOLA MUNDO”); </script>
</body></html>
Determinar versión JavaScript
<script language=“JavaScript1.0”>
var version=1.0;
</script>
var version=1.1;
</script>
var version=1.2;
</script>
var version=1.3;
</script>
Determinar versión JScript
<script>
document.write( “Versión de JScript en Internet Explorer: “+
ScriptEngineMajorVersion() +
"." +
ScriptEngineMinorVersion() );
</script>
Ubicación del código
El código JS se puede colocar en cualquier lugar del

documento HTML, aunque lo más usual es
encontrarlo en la sección <HEAD> y, en ocasiones,
en la sección <BODY>.
JS ignora los espacios, tabuladores y líneas en
blanco que aparezcan entre sentencias.
Nota: Hay que tener presente que JS es un lenguaje

Case Sensitive.
Esconder código JS
Cuando el cliente utiliza un browser que no entiende

scripts, éste mostrará todo el código que se
encuentre entre las etiquetas <script> ... </script>
como texto plano.
Este efecto se puede evitar encerrando el código JS

entre etiquetas de comentarios HTML: <!-- -- >.
Etiqueta <NOSCRIPT>
HTML dispone también de las etiquetas

<noscript> ... </noscript>.
Entre ellas se incluirá únicamente código HTML.

Comentarios en JS
Para introducir comentarios en JS, podemos utilizar

dos técnicas diferentes:
1. Comentarios de una sola línea: //...

2. Comentarios de bloque: /* ... */
Bloques de instrucciones
Los bloques de instrucciones en JS se agrupan bajo

llaves:
function miFuncion () {
var elAlumno=“Amadeo";
var laAsignatura=“Física";
alert (elAlumno + “ ha aprobado “ + laAsignatura);
}
Terminación de instrucciones
El final de una sentencia en JS se indica con punto y

coma.
Su uso no es obligatorio cuando cada línea contiene
una única sentencia JS.
Necesario cuando en una misma línea existen varias
sentencias o cuando una sentencia ocupa varias
líneas (al final).
No existe límite en cuanto a longitud.
Nombres de identificadores (I)
El primer carácter debe ser siempre una letra, guión

de subrayado _ o símbolo del dólar $.
Los demás caracteres pueden ser letras, números,

el guión de subrayado o símbolo de dólar, sin
espacios entre ellos.
JS es Case Sensitive !!!!!

Nombres de identificadores(II)
El nombre no puede coincidir con una palabra

reservada del lenguaje.
Tampoco se deben definir identificadores que

empiecen por dos subrayados ya que la
implementación interna de JS a menudo usa esta
notación.
Palabras reservadas de JS
abstract
abstract boolean
boolean break
break byte
byte case
case catch
catch char
char class
class
const
const continue
continue default
default do
do double
double else
else extends
extends false
false
final
final finally
finally float
float for
for function
function goto
goto int
int implements
implements
input
input inin instance
instanceofof interface
interface long
long native
native new
new null
null
package
package private
private protected
protected public
public return
return short
short static
static super
super
switch
switch synchronized
synchronized this
this throw
throw throws
throws transient
transient true
true try
try
var
var val
val while
while with
with
Tipos de datos
JS puede manejar cuatro tipos de datos distintos:
1. Datos numéricos.
2. Cadenas de texto.
3. Valores booleanos.
4. Valores nulos.
Valores numéricos
A diferencia de otros lenguajes, en JS no se hace

distinción entre valores enteros y de coma flotante.
En JS se representan (internamente) todos como
valores de coma flotante.
El rango aceptado está entre:
±1.7976931348623157 x 10308
±5 x 10-324
Tipos de literales numéricos
Enteros
Octales: Empiezan con el dígito 0.
Hexadecimales: Empiezan con 0x ó 0X.
Coma flotante: La sintaxis es
[dígitos][.dígitos][(E|e)[(+|-)]dígitos]
Ej.: 3.14, .333333333,
6.02e+23, 1.478223E-32
Valores numéricos Especiales
Infinity , –Infinity para valores numéricos que

sobrepasan los límites de JS (x / 0).
NaN para operaciones que esperan devolver un

valor numérico y esto no ocurre (0 / 0).
Constantes numéricas especiales
JS 1.1 define las constantes numéricas:
Constante Significado
Number.MAX_VALUE El mayor número representable.
Number.MIN_VALUE El menor número.
Number.POSITIVE_INFINITY (*) Valor especial infinito positivo.
Number.NEGATIVE_INFINITY (*) Valor especial infinito negativo.
(*) Sólo MSIE 4.0+ y nuevos navegadores.

Cadenas de texto
En JS el texto se delimita mediante comillas dobles

o simples y pueden contener cualquier caracter.
Ejemplo: var nombre = “Danny Goodman";
Como norma, las comillas simples se utilizarán

dentro de textos encerrados entre comillas dobles, y
viceversa.
Trabajando con cadenas (I)
Las cadenas de texto pueden concatenarse entre sí,

con valores numéricos y/o booleanos:
– Operador suma +.
Determinar la longitud de cadena:
– Propiedad length.
Obtener subcadenas:
– Método substring (inicio, fin).
– Método substring (inicio).
– Método substr (inicio, long).
– Método substr (inicio).
Trabajando con cadenas (I)
Obtener el carácter que ocupa la posición n:

– Método charAt (n).
Encontrar posición de la primera ocurrencia de una
subcadena de una cadena:
– Método indexOf (subcadena [, desde]). Si no la encuentra
devuelve el valor -1;
La última ocurrencia:
– Método lastIndexOf (subcadena [, desde]).
Valores booleanos
Por booleanos se entienden los valores:

– true
– false
Utilizados, generalmente, para resultados en

comparaciones.
Valores nulos
Valor nulo, en JS null, indica la inexistencia de

valor.
En JS null no es lo mismo que cero (0).
En ocasiones es conveniente inicializar las variables

como null para indicar explícitamente que no tienen
valor alguno.
Valor Undefined
Una variable que no existe, no está definida o no

tiene valor, o bien una propiedad o método de un
objeto inexistente tienen valor undefined.
Este valor puede utilizarse en comparaciones.

Declaración de variables (I)
La palabra clave que declara una variable en JS es

var nombre-variable.
Al ser JS un lenguaje no tipado, no se declaran tipos

de datos junto con la palabra clave var.
Antes de usar una variable es aconsejable

declararla.
Declaración de variables (II)
Se permite la declaración de múltiples variables para

una misma sentencia var:
var impTotal, impParcial;
Se puede dar valor inicial a las variables a la vez

que se declaran:
var razonSocial="AEAT";
var impTotal=0, impParcial=500;
var a=b=c=0
Declaración de variables (III)
Ejemplos de declaraciones válidas:

var nombre;
var Dirección;
var localidad_de_nacimiento;
Ejemplos de declaraciones inválidas:

var 1apellido;
var localidad de nacimiento;
var new;
null vs undefined
EN JS 1.1 y posteriores, se puede distinguir entre

valores null y valores undefined a través del
operador typeof.
typeof devuelve "object" o "undefined".
Ejemplo:
var variableSinDefinir;
var tipo = typeof variableSinDefinir;
document.write() del browser
El browser, o navegador, dispone de un objeto

document, el cual, además de otros métodos y
propiedades, proporciona el método write() para
escribir cadenas en la ventana del navegador.
Sintaxis:
document.write (cadena);
Depurar errores JavaScript
En muchos navegadores la existencia de errores se

notifican en la línea de estado.
En Netscape Navigator/ Mozilla / Mozilla Firefox se
puede comprobar el error producido tecleando
javascript: en la url del navegador.
En MSIE los errores se notifican mediante un icono
de alerta en la línea de estado, y haciendo doble
clic en él se puede ver el tipo de error.
Práctica
Caracteres escapados
Dentro de una cadena podemos introducir

caracteres que representan funciones especiales:
salto de línea, comilla doble, salto de línea,…
Estos caracteres se introducen en la cadena

mediante el carácter de escape \, seguido del
carácter a escribir.
Lista de caracteres escapados
Código
Código Carácter
Caráctervisible
visible
escapado
escapado
\b
\b Caracter
Caracteranterior
anterior
\f\f Salto de página
Salto de página
\n
\n Salto
Saltodedelínea
línea
\r\r Retorno
Retornode decarro
carro
\t\t Tabulador
Tabulador
\\\\ Caracter
Caracter\\
\'\' Comilla
Comillasimple
simple
\"\" Comilla
Comilladoble
doble
\NNN
\NNN Código
Código decaracter
de caracterdel
deljuego
juegoLatin-
Latin-
1,1,en octal
en octal
\xNN
\xNN Código
Códigode decaracter
caracterdel
deljuego
juegoLatin-
Latin-
1,1,en hexadecimal.
en hexadecimal.
\uNNNN
\uNNNN Código
Códigode decaracter
caracterdel
deljuego
juego
Unicode, en hexadecimal.
Unicode, en hexadecimal.
Ejemplo de códigos escapados
var navIE="Está usando como navegador Internet

Explorer. \nSi desea continuar pulse Aceptar".
var navNs="Navegador actual: \"Netscape

Navigator\". \nSi desea continuar pulse Aceptar".
Ámbito de las variables
El ámbito de las variables puede ser global o local.
Globales son aquellas definidas fuera del ámbito de

una función, a las que se puede acceder desde
cualquier parte del código.
Locales las definidas dentro del ámbito de una
función y sólo accesibles desde su ámbito local.
Ejemplo de ámbito
var cod-art = "110-Estantería";

function mostrar() {
var importe = 1500;
cod-art = "Sin existencias";
alert("El importe es: “ + importe);
alert("El cód-art.:" + cod-art);
}
alert("Ahora cód-art vale: “ + cod-art);
Operadores
Los operadores en JS pueden dividirse en varios

grupos funcionales:
1. Operadores aritméticos.
2. Operadores lógicos.
3. Operadores de comparación.
4. Operador condicional.
5. Operadores de bit.
6. Operadores de asignación.
7. Otros operadores.
Operadores aritméticos
Suma + -
Resta -
Multiplicación *
División /
Módulo %
Incremento: Preincremento ++
y Posincremento
Decremento: --
Predecremento y
Posdecremento
Negación unaria - +
Operadores lógicos
Producto lógico OR ||
-
Suma lógica AND &&
Negación lógica NOT !

+
NOTA: Si la parte izquierda de una condición AND es falsa no

se sigue evaluando la condición. Se devuelve false.
Si la parte izquierda de una condición OR es cierta, no se sigue
evaluando la condición. Se devuelve true.
Operadores de comparación
-
Igualdad ==
Desigualdad !=
Identidad ===
No identidad !==
Mayor que >
Menor que <
Mayor o igual que >=
Menor o igual que <=

+
Reglas de igualdad
Con el operador de igualdad == considerar las

reglas de comparación siguientes:
1. Si uno de los valores es null y el otro es undefined se
devuelve true.
2. Si los tipos de los dos valores a comparar difieren, se
intenta convertir uno de ellos al tipo del otro:
2.1. Si uno es numérico y el otro cadena, se convierte la
cadena a numérico.
2.2. Si uno es numérico y el otro booleano, true se convierte
a 1 y false a 0.
2.3. Si uno es un objeto y el otro es un número o cadena, se
convierte el objeto a su equivalente primitivo (Métodos
toString() o valueOf()).
Operador condicional
Operador condicional ?:.

Es el único operador ternario en JS.
Sintaxis:
var r = (condición) ? Si_true : Si_false;
Su expresión es equivalente a la de una sentencia

condicional if sencilla, pero más breve.
Ejemplo ?:
var saludo = "Hola " + (nombre!=null) ? nombre : "ser

anónimo";
Equivalente a:
var saludo="Hola ";
if (nombre != null)
saludo += nombre;
else
saludo += "ser anónimo";
Operadores de bit
Operador OR | -
Operador XOR ^
Operador AND &
Desplazamiento izq. <<
Desplazamiento der. >>
Derecha con ceros >>>
Negación NOT ~
+
NOTA: Los operadores <<, >> y >>> mueven, bit a bit, el primer
operando la cantidad especificada en el segundo operando (0..31).
Desplazar a la izquierda equivale a multiplicar por 2. Desplazar a la
derecha a dividir por dos.
Operadores de asignación
El operador básico de asignación es =.

La sintaxis de los operadores de asignación: a op= b;
Operador
Operador Ejem
Ejemplo plo Equivalente
Equivalente
+=
+= aa +=
+= bb aa == aa ++ bb
-=
-= aa -=
-= bb aa == aa --bb
*=
*= aa *=
*= bb aa == aa ** bb
/=
/= aa /=
/= bb aa == aa //bb
%%== aa %%== bb aa == aa %% bb
<<=
<<= aa <<=
<<= bb aa == aa <<
<< bb
>>=
>>= aa >>=
>>= bb aa == aa >>
>> bb
>>>=
>>>= aa >>>=
>>>= bb aa == aa >>>
>>> bb
&=
&= aa &=
&= bb aa == aa && bb
|=
|= aa |=
|= bb aa == aa ||bb
^=
^= aa ^=
^= bb aa == aa ^^ bb
Otros operadores: typeof
Operador typeof. Es un operador unario que

devuelve, en forma de cadena de texto, el tipo del
objeto nombrado.
Posibles valores devueltos son: "number", "string",
"boolean", "object", "function" o "undefined".
Ejemplo:
var mensaje = (typeof nombre == "string") ? "El nombre es: “ +
nombre : "No hay nombre asignado";
alert (mensaje);
Otros operadores: new
Objetos y Arrays no se pueden crear directamente

dando valor a la variable.
El operador new permite crear estos objetos.
Sintaxis: new constructor()
Ejemplos:
var fecha = new Date();
var meses = new Array();
Funciones
Conjunto de sentencias JS que realizan alguna tarea

específica y, opcionalmente, devuelven un valor.
Elementos de una función:

1. El identificador de función: function.
2. El nombre de la función.
3. La lista de argumentos.
4. Conjunto de sentencias que la definen.
Definición de funciones
Las funciones pueden definirse en cualquier parte

de la página html.
Habitualmente se definen en la sección <head>, por
claridad.
Sintaxis:
function nombre (par1, par2, ...) {
...
[ return expresión; ]
}
Ejemplo de función
function elevar (num, exp) {

var resul = 1;
for (var i = 0; i < exp; i++)
resul *= num;
return resul;
}
Evento onclick()
A los elementos de un formulario, p.ej. botones, se

les puede asociar eventos para interaccionar con el
usuario.
Uno de ellos, muy habitual, es el evento onclick, el
cual se “dispara” al hacer clic con el ratón sobre él.
Sintaxis:
<input type=button name=miBoton
onclick ="miFuncion()">
Función eval()
Cualquier sentencia JS puede ejecutarse o

evaluarse a través de la función eval().
Sintaxis: eval (“sentencia-javaScript”);
Ejemplo:
eval(“document.write(a+b)”);
Acceso a elementos de <form>
document
document
<form name=“calc” method=… action=…>
</form>
<input type=text name=“visor” value=..>
Forma general de acceder a un elemento:

document.nombreForm.nombreElemento.propiedad
Ejemplo:
document.calc.visor.value=‘5’;
Práctica
Sentencia básica if
Sintaxis:
if (expresión)
sentencia;
if (expresión) {
conjunto de sentencias;
}
Ejemplos sentencia básica if
if ( nombre == null )
alert ("Nombre vacío");
if ( email == null || email == "" ) {

email = "sin definir";
alert (“Por favor, especifique un e-mail");
}
Sentencia if - else
Sintaxis:
if (expresión)
sentencia1;
else
sentencia2;
NOTA: Cuando se anidan varias sentencias if con

cláusulas else, hay que poner especial cuidado con
los bloques de sentencias entre llaves.
Selección por casos: switch
JS 1.2 proporciona la sentencia switch para selección entre
casos.
Sintaxis:
switch (expresión) {
case valor1:
sentencias-valor1;
break;
case valor2:
sentencias-valor2;
break;
default:
sentencias-defecto;
break;
}
Ejemplo de switch
function convierte (x) {

switch (typeof x) {
case 'number':
return x.toString(16);
case 'string':
return “ ‘ “ + x + “ ’ ”;
case 'boolean':
return x.toString().toUpperCase();
default:
return x.toString();
}
} ¿Por
¿Por qué
qué en
en el
el ejemplo
ejemplo no
no existen
existen sentencias
sentencias break;
break; ??
Bucle while
Sintaxis:
while (expresión)
sentencia;
El bucle while se ejecutará siempre que la expresión
se evalúe a true.
Una iteración infinita: while (true);
Ejemplos while
var contador = 0; Postincremento
while (contador < 10)

document.write ((contador++) + "<br>");
0,
0,1,
1,2,
2,3,
3,4,
4,5,
5,6,
6,7,
7,8,
8,9,
9,
var contador = 0; Preincremento

while (contador < 10)
document.write ((++contador) + "<br>");
1,
1,2,
2,3,
3,4,
4,5,
5,6,
6,7,
7,8,
8,9,
9,10,
10,
Bucle do / while
La expresión es verificada al final del bucle, con lo

que al menos una vez se ejecutará su cuerpo.
Sintaxis:
do
sentencia;
while (expresión);
Bucle for (I)
Representa la iteración más completa.

En él se puede realizar tanto la inicialización, la
verificación y la actualización del/los contador/es.
Sintaxis:
for (inicializaciones; condición; actualizaciones)
sentencia;
Bucle for (II)
Esta sentencia es equivalente a:

inicialización;
while (condición) {
sentencia;
incremento;
}
Ejemplo:
for (var cont = 0; cont < 10; cont++)
document.write (cont + “<br>”);
Bucle for / in
Recorre todas las propiedades de un objeto.

Sintaxis:
for (variable in objeto)
sentencia;
Ejemplo:
for (elem in window)
document.write (" propiedad: " + elem + " valor: " +
window[elem] + "<br>");
Etiquetas
JS 1.2 proporciona el etiquetado de sentencias.

Sintaxis: etiqueta: conjunto_de_sentencias;
Ejemplo:
inicio:
while (token != null) {
...
}
Uso con sentencias break y continue.

Sentencia break
Causa la salida inmediata del bucle o del switch que

la contiene.
Sintaxis:
break;
break etiqueta;
Ejemplo de sentencia break
bucleExt:
for (var i = 0; i < 10; i++) {
bucleInt:
for (var j = 0; j < 10; j++) {
if (j > 3) break;
if (i == 2) break bucleInt;
if (i == 4) break bucleExt;
document.write ("<br>Valores: “ + i + " – " + j);
}
}
document.write ("<br>FINAL: " + i + " – " + j);
Salida del ejemplo anterior
Valores:
Valores:00––00 bucleExt:
Valores:
Valores:00––11 bucleExt:
for
for(var
(vari i==0;0;i i<<10;10;i++)
i++){{
Valores:
Valores:00––22 bucleInt:
bucleInt:
for
for(var
(varj j==0;0;j j<<10;
10;j++)
j++){{
Valores:
Valores:00––33 ifif(j(j>>3)3)break;
break;
Valores:
Valores:11––00 ifif(i(i==
== 2)break
2) breakbucleInt;
bucleInt;
ifif(i(i==4
==4) )break
breakbucleExt;
Valores:
Valores:11––11 document.write
bucleExt;
document.write ("<br>Valores:“ “++i i++" "––" "++j);j);
("<br>Valores:
Valores:
Valores:11––22 }}
}}
Valores:
Valores:11––33
Valores:
Valores:33––00 document.write
document.write("<br>FINAL:
("<br>FINAL:" "++i i++" "––" "++j);j);
Valores:
Valores:33––11
Valores:
Valores:33––22
Valores:
Valores:33––33
FINAL:
FINAL: 44––00
Sentencia continue
Sintaxis:
continue;
continue etiqueta;
Usada sólo en bucles while, for y for/in.
La sentencia continue provoca que la iteración en
curso termine en el acto y comience el bucle con la
siguiente.
La sentencia vacía
En JS, una sentencia vacía se especifica con ;
Ejemplo:
//Inicializar un array
for (i = 0; i < a.length; a[i++] = 0) ;
Precaución:
if ( a == 0 || b == 0 ) ;
alert ("la variable a o b tienen valor cero");
Práctica
Diálogos de ventana
Existen, en JS, tres tipos de ventanas:

Alertas
Confirmaciones
Entradas de usuario
Las dos últimas son funciones que devuelven un

valor.
Los tres tipos son métodos del objeto window.
Son ventanas modales (excepto en Netscape bajo
plataformas UNIX !!).
Alertas: alert()
Visualiza un mensaje al usuario.

El único botón disponible es el de aceptar.
Sintaxis: alert (cadena-mensaje);
El mensaje en texto plano. Se admiten espacios,

saltos de línea (\n, \r), algunos caracteres
escapados y caracteres de puntuación.
Ejemplo alert()
Confirmaciones: confirm()
Similar a las ventanas alert(), excepto que

proporcionan dos botones: Aceptar y Cancelar.
El diálogo devolverá true si se pulsa en Aceptar y
false en caso contrario.
Sintaxis:
valor = confirm (cadena-mensaje);
Ejemplo confirm() (I)
Devuelve
Devuelve true false
Ejemplo de confirm (II)
var
varr=(confirm("Pulsa
r=(confirm("Pulsaloloque
quequieras!!!"))
quieras!!!"))??"Bien,
"Bien,has
haspulsado
pulsadoAceptar“
Aceptar“::
"Oooops,
"Oooops,has
haspulsado
pulsadoCancelar“;
Cancelar“;
alert(r);
alert(r);
Entradas: prompt()
Permiten la entrada, por teclado, de datos de

usuario.
Sintaxis:
valor = prompt(mensaje, valorInicial);
Proporciona dos botones: Aceptar y Cancelar.

Pulsando Aceptar se devolverá el valor introducido.
Pulsando Cancelar se devolverá null, con
independencia del valor introducido.
Ejemplo prompt()
Entrada de datos
usuario Devolverá null
Devolverá la entrada de
Valor inicial datos
Anidamiento de funciones
En JS 1.2 las funciones pueden anidarse.

El ámbito de las funciones anidadas es el de su
definición.
Ejemplo:
function hipotenusa (a, b) {
function cuadrado (x) { return x*x; }
return Math.sqrt(cuadrado(a) + cuadrado(b));
}
Argumentos de una función
Una función define, internamente un objeto especial

llamado arguments.
Este objeto se define como un array que contiene

los argumentos pasados en la invocación a la
función.
Como array que es, se puede verificar su longitud

con la propiedad length.
Ejemplo de arguments
function max() {
var m=Number.NEGATIVE_INFINITY;
for (var i=0; i<arguments.length; i++)

if (arguments[i]>m) m=arguments[i];
return m; //El mayor.
}
Arrays
Array (o vector): Tipo de datos que almacena piezas

de información.
Cada elemento del array es nombrado por su índice
o apuntador.
Como JS es un lenguaje no tipado, los elementos de
un array puede ser de cualquier tipo.
Incluso un mismo array puede contener distintos
tipos de datos, incluso arrays !!!!
Creación de Arrays
En JS un array es un objeto.
Como tal se declaran con el operador new seguido
del constructor Array().
Sintaxis:
var a = new Array( [tamaño | elementos] );
Constructor Array()
Existen tres formas de invocar al constructor Array():

1. Sin parámetro alguno: Define un array vacío.
2. Con un único parámetro entero: Define su tamaño.
3. Con una lista de parámetros: Lo inicializa.
La longitud de un array puede obtenerse con la

propiedad length, teniendo en cuenta que sus
elementos empiezan en el índice 0.
Inicializaciones de un Array
var miArray = new Array();

Define un array vacío.
var miArray = new Array(5);

Define un array con 5 elementos, desde 0 hasta 4.
var miArray = new Array(5, 4, 3);

Define un array de 3 elementos. Contenido:
miArray[0]=5;
miArray[1]=4;
miArray[2]=3;
Acceso a elementos
El acceso a los elementos individuales de un array

se efectúa con el operador [ ].
Sintaxis: variable-array[índice];
Ejemplos:
valor = a[0];
a[1] *= 3.14;
a[++i]="Hola";
a[a[i]] = a[0];
a[‘MODELO’]="130";
Agregar elementos a un array
Los arrays en JS son dinámicos.
En tiempo de ejecución se puede aumentar el

número de elementos, simplemente definiendo para
el array el nuevo elemento.
JS asigna la memoria dinámicamente sólo para los

elementos definidos.
Arrays multidimensionales
JS no soporta verdaderos arrays

multidimensionales.
La aproximación que se permite en JS es definir

arrays cuyos elementos sean a su vez arrays.
El acceso a los elementos particulares se realizaría

como matriz[x][y].
Creación multidimensional
Ejemplo:
var matriz = new Array([1, 2], [4, 5], [6, 7]);
Longitud total del array:

matriz.length; Devuelve 3.
Acceso a los elementos:

matriz[0]; Devuelve 1,2.
matriz[0][1] Devuelve 2.
Métodos del objeto Array
join() split() sort()

concat() slice() splice()
push() pop() unshift()
shift() toString() toSource()
Aplicados
Aplicadosalalobjeto
objetoarray:
array:
variable-array.metodo();
variable-array.metodo();
Método join()
Convierte y devuelve los elementos de un array a un

string concatenados mediante el separador coma.
Se puede especificar un parámetro opcional, de tipo
string, que servirá de separador de elementos del
nuevo string.
Ejemplo:
var a = new Array(1, 2, 3);
var s = a.join(); s==“1, 2, 3”
var s = a.join(“..., ”); s==“1..., 2..., 3”
Método split()
Devuelve un array a partir de una cadena de

literales separados por comas, o por el delimitador
que se indique como parámetro.
Ejemplo:
var a=“Lunes|Martes|Miércoles”;
var s=a.split(“|”);
s[0]==“Lunes”
s[1]==“Martes”
s[2]==“Miércoles”
Método sort()
Ordena un Array en forma ascendente.
Ejemplo:
var a = new Array(“A”, “F”, “B”);
a.sort() { “A”, “B”, “F” }
Método reverse()
Funciona de forma análoga a sort() pero ordena el

array en forma descendente.
Ejemplo:
var a = new Array(“A”, “F”, “B”);
a.reverse() { “F”, “B”, “A” }
Método concat()
Crea y devuelve un array conteniendo el array

original más el que se desea concatenar.
Ejemplo:
var a = new Array (1, 2, 3);
var b=a.concat(new Array(4, 5))
b== { 1, 2, 3, 4, 5}
Método slice()
Devuelve un subarray.
Ejemplo:
var a = new Array(1, 2, 3, 4, 5);
a.slice(0, 3) Devuelve { 1, 2, 3 }
a.slice(3) Devuelve { 4, 5 }
Método splice()
Elimina elementos de un array.

Modifica el array y devuelve los elementos
eliminados.
Ejemplo:
var a = new Array(1, 2, 3, 4, 5, 6, 7, 8)
a.splice(4)
Devuelve { 5, 6, 7, 8 }
a=={ 1, 2, 3, 4}
Métodos push() / pop()
Son dos métodos que implementan el

comportamiento típico de una pila.
push(valor) introduce, dentro de un array, un

elemento en la cima de la pila (último elemento del
array).
pop() extrae un elemento desde la cima de la pila
(último elemento del array).
Métodos unshift() / shift()
Funcionan de forma similar a push() / pop().

unshift(valor) añade elementos al principio del
array, desplazando los existentes.
shift() elimina y devuelve el primer elemento del
array.
Ejemplo:
var a = new Array();
a.unshift(1); a=={1}
a.unshift(22); a=={22, 1}
a.shift(); Devuelve 22.
Métodos toString()/toSource()
toString() aplicado a un array, convierte cada uno

de sus elementos a un string, separado por comas.
Es idéntico a join().
Excepción en Nav. 4/ Mozilla / Mozilla Firefox:
Cuando <script language=“JavaScript1.2”> la cadena
aparece encerrada entre corchetes “[1, 2, 3]”.
Solución en JavaScript1.3 para dichos

navegadores toSource().
Práctica
Modos de incluir JS en html
<script> ... </script>

<script src=".../../comun.js"></script>
<script archive="util.jar"
src="comun.js"></script>
En URLs: <a href="javascript:código-JS;"> ... </a>
Como manejadores de eventos.

Consideraciones .js
1. Un fichero .js es código puro JavaScript, sin las

etiquetas <script> </script> o cualquier otra etiqueta
html.
2. Entre las etiquetas <script src=..> y </script> no

debe de ir código alguno. Si existiera, se ignora.
El atributo ARCHIVE Netscape
Este atributo especifica archivos .jar (Java Archives).

Los ficheros .jar son ficheros comprimidos. En
ocasiones, contienen otros ficheros auxiliares como
firmas digitales.
Utilidad: Si se desarrollan varios ficheros .js, puede

resultar útil almacenarlos juntos en un archivo
comprimido, y usar sólo el que interese en cada
momento (nombrado por el src=...).
JavaScript en URLs
Ejemplos URL:
<a href="javascript: alert('Hola Mundo');"> Saludo </a>
<a href="javascript: calculaTotal();"> Calcular el Total</a>
Ejemplos en manejadores de eventos:

<input type=button name=miBoton value=“Calcular”
onclick=“calculaTotal();”>
Ejecución de programas JS
Si ubicamos código JS en la sección <head>, p.ej.,

éste no podrá acceder a elementos de la sección
<body> hasta que no hayan sido definidos, ya que el
flujo de ejecución es secuencial.
Si el código intenta acceder a elementos todavía no

definidos se producirá un error (undefined).
Eventos onLoad() y onUnload()
Ambos eventos se definen en la etiqueta HTML

<body>, <frame>, <frameset> o <iframe>.
El evento onLoad() se disparará cuando la página

se descargue y se escriba completamente.
El evento onUnload() cuando el navegador

abandone la página.
El entorno del lado cliente JS
El desarrollo de JS del lado cliente (client-side

JavaScript) realiza un uso intensivo de tres
características del entorno del navegador:
1. El objeto global Window.

2. La jerarquía de objetos del lado cliente.
2. El modelo de programación guiado por eventos.
El objeto Window
El objeto Window representa la ventana (o frame)

que visualiza el documento.
Define propiedades y métodos que permiten

manipular las ventanas del navegador.
Referencias al objeto Window: window o self.

Jerarquía de objetos
self,
self, window,
window,
parent,
parent, top
top plugins
plugins [[ ]]
Familia de
Netscape
navigator mimeTypes
mimeTypes [[ ]] Navigator
navigator
frames forms
forms [[ ]] elements
elements[ [] ]
frames [[ ]] array
arrayde
deobjetos
objetosde de
Formulario
Formulario(Form):
(Form):
Window
Window anchors
anchors [[ ]]
Button
Button
location
location Checkbox
Checkbox
links
links [[ ]] FileUpload
FileUpload 1.1
Hidden
Hidden
Password
Password
history
history Radio
Radio
images
images [[ ]] Select
Select options
options [[ ]]
Submit
Submit array
array de
de objetos
objetos
Text
Text options
TextArea
options
document
document applets
applets [[ ]] TextArea
embeds
embeds [[ ]]
Objetos plugins y mimeTypes
document.write("<b>plugins
document.write("<b>pluginsinstalados:
instalados:"+navigator.plugins.length+"</b><br>");
"+navigator.plugins.length+"</b><br>");
for
for(var
(vari=0;
i=0;i<navigator.plugins.length;
i<navigator.plugins.length;i++)
i++)
document.write(navigator.plugins[i].name+"<br>");
document.write(navigator.plugins[i].name+"<br>");
document.write("<hr>");
document.write("<hr>");
document.write("<b>mimeTypes
document.write("<b>mimeTypessoportados:
soportados:"+navigator.mimeTypes.length+"</b><br>");
"+navigator.mimeTypes.length+"</b><br>");
for
for(var
(vari=0;
i=0;i<navigator.mimeTypes.length;
i<navigator.mimeTypes.length;i++)
i++)
document.write(navigator.mimeTypes[i].type+"<br>");
document.write(navigator.mimeTypes[i].type+"<br>");
Ejemplo plugins[] en Netscape
plugins
pluginsinstalados:
instalados:16
16
Microsoft®
Microsoft® WindowsMedia
Windows MediaServices
Services
Shockwave Flash
Shockwave Flash
Adobe
AdobeSVG
SVGViewer
ViewerPlugin
Plugin
NPSnpy
NPSnpy Dynamic LinkLibrary
Dynamic Link Library
RealPlayer(tm)
RealPlayer(tm) G2 LiveConnect-EnabledPlug-In
G2 LiveConnect-Enabled Plug-In(32-bit)
(32-bit)
Adobe Acrobat
Adobe Acrobat
Netscape
NetscapeDefault
DefaultPlug-in
Plug-in
Java Plug-in
Java Plug-in
Java
JavaPlug-in
Plug-in
Java Plug-in
Java Plug-in
Java
JavaPlug-in
Plug-in
Microsoft®
Microsoft®Reader
Reader
Windows
Windows MediaPlayer
Media PlayerPlug-in
Plug-inDynamic
DynamicLink
LinkLibrary
Library
Beatnik Player V2.0.5.2
Beatnik Player V2.0.5.2
NPAVI32
NPAVI32Dynamic
DynamicLink
LinkLibrary
Library
LiveAudio
LiveAudio
Ejemplo mimeTypes en Netscape
mimeTypes
mimeTypessoportados:
soportados:523
523 application/x-java-applet;version=1.2
application/x-java-applet;version=1.2
application/x-drm
application/x-drm application/x-java-bean
application/x-java-bean
image/svg-xml
image/svg-xml application/x-java-applet
application/x-java-applet
image/svg
image/svg application/x-java-bean;version=1.1
application/x-java-bean;version=1.1
application/x-npsnpy-plugin
application/x-npsnpy-plugin application/x-java-applet;version=1.1
** application/x-java-bean;version=1.1.1
application/x-java-bean;version=1.1.1
application/x-java-bean;version=1.2.1 application/x-java-applet;version=1.1.1
application/x-java-applet;version=1.1.1
application/x-java-applet;version=1.2.1 application/x-npebshp
application/x-npebshp
application/x-java-bean;version=1.2.2 application/asx
application/asx
application/x-java-applet;version=1.2.2 audio/x-rmf
audio/x-rmf
application/x-java-bean;version=1.3 audio/rmf
audio/rmf
application/x-java-applet;version=1.3 audio/nspaudio
audio/nspaudio
application/x-java-bean;jpi-version=1.3.1
application/x-java-bean;jpi-version=1.3.1 audio/x-nspaudio
audio/x-nspaudio
application/x-java-applet;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
application/x-java-bean;version=1.1.2 ......
application/x-java-applet;version=1.1.2 ......
application/x-java-bean;version=1.1.3 ......
application/x-java-applet;version=1.1.3 ......
application/x-java-bean;version=1.2 ......
Nombrar objetos
El objeto window se asume por defecto, por lo que

no es necesario nombrarlo.
Ejemplo:
self.document.forms[0] document.forms[0]
Programación por eventos
En programación web, las páginas, una vez escritas

e interpretadas por el navegador, quedan estáticas
esperando que se produzcan eventos asíncronos.
Estos eventos responden a la interacción por parte
del cliente, tales como pulsación de un botón, de
una tecla, etc...
Ejemplo:
<input type=button name=miBoton value="Calcular"
onclick="calcula();">
Propiedades del objeto Window
Propiedad Significado
closed true si la ventana ha sido cerrada. false en caso contrario.
defaultStatus, Texto que aparecerá en la línea de estado del navegador. Por defecto y
status explícitamente.
document Referencia al documento (objeto document) HTML mostrado en la ventana.
frames [ ] Array de ventanas marcos (objetos window).
history Referencia al historial del navegador (objeto history).
location Referencia a la entrada de direcciones del navegador (objeto location).
name Nombre de la ventana. Usado, habitualmente, como TARGET de <a> o <form>.
opener Referencia al objeto ventana que ha abierto la actual. null si fue abierta por el
usuario.
parent Si la ventana es un frame, referencia a la ventana que lo contiene.
self Referencia al actual objeto ventana. Sinónimo de window.
top Si la ventana es un frame, referencia a la ventana del nivel más alto que la contiene.
window Referencia al actual objeto ventana. Sinónimo de self.
Métodos del objeto Window
Método Significado
alert(), Caja de diálogo informativa.
confirm(), Diálogo con aceptación (devuelve true) o cancelación (devuelve false).
prompt() Diálogo con entrada de usuario. (Aceptar: devuelve el valor introducido – Cancelar: null).
moveBy, Mueve la ventana valores relativos.
moveTo() Mueve la ventana a posiciones absolutas.
resizeBy(), Redimensiona la ventana valores relativos.
resizeTo() Redimensiona la ventana valores absolutos.
scrollBy(), Realiza un scroll relativo (desplazamiento) en el documento de la ventana.
scrollTo() Scroll absoluto.
setInterval(), Planifica la ejecución repetida de la función indicada.
clearInterval() Cancela la planificación.
setTimeout(), Invoca a la función especificada transcurrido cierto intervalo de tiempo. No periódica.
clearTimeout() Cancela el intervalo de tiempo especificado, antes de la ejecución.
open(), Abre una nueva instancia del navegador (nueva ventana).
close() Cierra una ventana.
Método open() (I)
Sintaxis:
var w = window.open ("pagina.html", "nombre", "propiedades-
ventana", valor-booleano);
Todos los argumentos son opcionales.

Método open() (II)
Propiedades de ventana:
"width=nnn,heigth=mmm,status=yes,resizable=yes, …".
Propiedad Acción
height Especifica el alto de la ventana en píxeles.
width Especifica el ancho de la ventana en píxeles.
location Si =yes, se habilita la barra de direcciones (url).
menubar Si =yes, se habilita la barra de menú.
resizable Si =yes, se permite el redimensionado de la vetnana.
status Si =yes, se habilita la línea de estado
toolbar Si =yes, se habilita la barra de herramientas
Ejemplo: var w = window.open (“pag1.html", "miVentana", "width=300,heigth=200,

menubar=yes,toolbar=yes,status=no,resizable=yes", true);
Método open() (III)
El último argumento, true indica que la URL de la

nueva ventana reemplazará a la entrada actual del
historial del navegador, o de lo contrario, false (por
defecto), se creará una nueva entrada en el historial.
Método close()
Sintaxis: window.close(); objeto-window.close();
Se podrán cerrar ventanas cuyo código JS haya creado

(por seguridad).
Si se desean cerrar otras ventanas, el navegador

informará al usuario con una ventana de confirmación
(por motivos de seguridad).
El objeto window continúa, aún habiendo sido cerradas

todas las ventanas. En esta situación no se podrá
acceder a ninguna de sus propiedades. La única
propiedad disponible en esta situación es closed: true o
false.
Relación entre ventanas (I)
Podemos establecer referencias entre ventanas:
1. Una ventana crea a otra: El método open() devuelve

una referencia al nuevo objeto ventana.
2. La nueva ventana puede referirse a la ventana padre

a través de la propiedad opener del objeto window.
Relación entre ventanas (II)
La
La ventana
ventana AA crea
crea aa
con var
BB con var B=open();
B=open();
A Referencia
Referencia aa través
de
de la
la variable
través
variable B.
B.
B
La
La ventana
ventana BB puede
puede
referirse
referirse aa la
la AA aa través
través
de
de la propiedad opener.
la propiedad opener.
La línea de estado del browser
Situada en la parte inferior del navegador.
Lugar de información del navegador al usuario.
Con la propiedad status podemos establecer

información deseada.
Con defaultStatus establecemos la información a

mostrar por defecto (no en Mozilla Firefox).
Intervalos: setTimeout()
Establece una llamada temporizada que se ejecutará

transcurrido el intervalo de tiempo especificado en
milisegundos.
Sintaxis:
var identificador = setTimeout ("nom-función", tiempo-ms);
Para cancelar una temporización, antes de su

ejecución:
clearTimeout (identificador); No devuelve nada !!.
Intervalos: setInterval()
Establece una llamada periódica, cada intervalo

especificado como parámetro en milisegundos.
Sintaxis:
var identificador = setInterval ("nom-función", tiempo-ms);
Para cancelar la ejecución periódica:

clearInterval(identificador) No devuelve nada !!.
Práctica
El objeto navigator
La propiedad window.navigator se refiere al objeto

navigator.
Propiedades que contienen información acerca del
browser: (entre otras),
Propiedad Significado
appName Nombre del navegador web.
appVersion Número de la versión y otra información asociada.
userAgent Cadena que el navegador envía en su cabecera USER-AGENT HTTP.
appCodeName Nombre interno del código del navegador. Ej.: "Mozilla”.
platform Plataforma software en el que se ejecuta el navegador. Ej.: "Win32".

Ejemplo propiedades navigator
MSIE
MSIEversión
versión6.0
6.0
navigator.appName:Microsoft
navigator.appName: MicrosoftInternet
InternetExplorer
Explorer
navigator.appVersion: 4.0 (compatible; MSIE6.0;
navigator.appVersion: 4.0 (compatible; MSIE 6.0;Windows
WindowsNTNT5.0;
5.0;yif1000)
yif1000)
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT5.0;
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0;yif1000)
yif1000)
navigator.appCodeName: Mozilla
navigator.platform:Win32
navigator.platform: Win32
NETSCAPE
NETSCAPENavigator
Navigator4.76
4.76
navigator.appName:Netscape
navigator.appName: Netscape
navigator.appVersion:4.76
navigator.appVersion: 4.76[en]
[en](Windows
(WindowsNTNT5.0;
5.0;U)
U)
navigator.userAgent: Mozilla/4.76 [en] (Windows NT5.0;
navigator.userAgent: Mozilla/4.76 [en] (Windows NT 5.0;U)
U)
navigator.platform:Win32
navigator.platform: Win32
Examinar propiedades navigator
var browser="INFORMACIÓN DEL BROWSER:\n";
for (var propiedad in navigator) {

browser += propiedad + ": " +
navigator[propiedad] + “<br>";
}
document.write ("Resultado:<br>" + browser);

Arrays
Arraysasociativos
asociativos
Métodos de navigator
Método javaEnabled(): Proporciona información

acerca del soporte de Java. Devuelve true si es
soportado, false en caso contrario.
Método preference(): Permite a los scripts firmados

digitalmente consultar y establecer preferencias de
usuario. Sólo en Navigator 4+ / Mozilla / Mozilla
Firefox.
El objeto screen
La propiedad screen del objeto window, se refiere al

objeto Screen.
Este objeto proporciona propiedades tales como el

tamaño de la ventana de visualización del browser:
propiedades width, height, availWidth y
availHeight (en píxeles).
Otras propiedades: colorDepth, proporciona el

número de colores en logaritmo de base 2 (n bits).
Relación entre frames (I)
Un frame puede referirse a otros frames a través de

las propiedades frames [ ], parent y top.
Cada ventana tiene la propiedad frames [ ]. Si no
tiene frames que dependan de ella, este array estará
vacío: la propiedad frames.length será cero.
Una ventana que contenga frames, se referirá al

primero como frame[0], y así sucesivamente.
Pueden anidarse referencias a frames a varios

niveles: frames[1].frames[2]...
Relación entre frames (II)
Ver imagen de Frames

Relación entre frames (III)
Un frame puede referirse a otros frames para

acceder a variables JS, elementos de HTML o para
llamar a funciones definidas en ese otro frame.
Ejemplo:
var precio= parent.frames[0].pvpCamisa;
var precioEuro=parent.frames[2].convierteEuro(precio);
Si los frames tienen nombre asignado, pueden

referirse también a través de él (conveniente).
Paso de información entre páginas
HTML
Petición (1) http://...
A Documento html
Petición (2) http://...
B Documento html
A B
... t1 t2
Soluciones
Básicamente, existen 4 métodos para el intercambio

de información entre páginas HTML:
1. A través de cookies.
2. A través de applets Java / controles ActiveX.
3. A través de variables de frames / frameset.
4. A través de la URL.
Cambio de páginas html
Podemos cambiar de documento html mediante la

propiedad URL del objeto document.
También podemos avanzar o retroceder a páginas

ya visitadas (del historial) mediante
window.history.back() o window.history.forward();
Ejemplo:
if (condicion) document.URL=“pagina2.html”;
else document.URL=“pagina3.html”;
Práctica
El Document Object Model (DOM)
Basado en el objeto Document.

Probablemente es el objeto más usado en la parte
cliente de JS.
Contiene información acerca del documento
visualizado en el browser: su URL, su última
modificación, la URL del documento que lo enlazó,
...
De la misma forma, proporciona un conjunto de
métodos a los que JS puede invocar.
Array de objetos en document
Los objetos contenidos en un objeto document, se

definen como arrays de objetos del mismo tipo.
P.ej., cada elemento <form> crea un array forms[ ]

en el objeto document, cada etiqueta <applet> crea
un array applets[ ], etc...
Llamando a objetos de Document
La forma habitual de llamar a estos objetos creados

en HTML, es a través del nombre definido en sus
etiquetas.
Ej. <form name=miForm ...> se le llama como:

document.miForm
Si no existe nombre definido para ese objeto, se les

puede llamar a través del índice del array que lo
contiene: document.forms[0]
Propiedades de Document (I)
alinkColor Color de los enlaces cuando son activados.

Corresponde al atributo ALINK de la etiqueta <BODY>.
anchors[ ] Array de objetos anclas, que representan las
anclas <A NAME=...> del documento.
applets [ ] Array de applets del documento. Etiqueta
<APPLET>
bgcolor Color de fondo del documento. Corresponde a la
propiedad BGCOLOR de la etiqueta <BODY>.
cookie Propiedad especial que permite a los programas JS
leer y escribir cookies HTTP.
embeds [ ] Array de objetos embebidos (clips de vídeo,
sonido y controles ActiveX) en el documento.
Propiedades de Document (II)
fgColor Color por defecto para el texto. Corresponde a la

propiedad TEXT de la etiqueta <BODY>.
forms [ ] Array de objetos <FORM>.
images [ ] Array de objetos <IMG>.
URL Cadena que representa la URL del documento.
location Sinónimo de URL.
lastModified Cadena que contiene la fecha de la última
modificación sufrida por el documento.
linkColor Color de los enlaces no visitados. Corresponde al
atributo LINK de <BODY>.
Propiedades de Document (III)
links [ ] Array de objetos link <A HREF=...>.

referrer URL del documento que contiene el link que enlazó
con el documento actual, si existe.
title Título del documento: Texto que se encuentra entre las
etiquetas <TITLE> ... </TITLE>.
vlinkColor Color de los enlaces visitados. Corresponde a la
propiedad VLINK de <BODY>.
Propiedad search
La propiedad search del objeto location contiene la

cadena que sigue a la URL (si existe) después de un
interrogante (incluido).
Uso: Paso de información entre páginas.
Ejemplo:
Para una URL:
http://www.aeat.es?var1=330&var2=1P
document.location.search contendrá la cadena:
?var1=330&var2=1P&
Propiedad referrer
La propiedad referrer nos proporciona el origen de la página que

enlazó con la página actual.
Usos:
– 1. Obtención de estadísticas.
– 2. Evitar enlaces directos a una determinada página
Ejemplo:
if (document.referrer=="" || document.referrer.indexOf(“aeat.es") == -1)
{
document.location=http://www.aeat.es;
}
Generación dinámica de docs.
El objeto document define tres métodos que

permite a los programas JS escribir dinámicamente
texto HTML en el documento:
1. open().
2. write().
3. close().
Métodos: open(), write(), close()
<script>
var p="<html><body bgcolor=aliceblue>"+
"<HR>Hola Mundo</body></html>";
parent.frames[0].document.open();
parent.frames[0].document.write(p);
parent.frames[0].document.close();
</script> Opcional
Aconsejable: Si se omite, la animación "document loading" no se detiene

en Netscape Navigator.
Además, al escribir close(), el documento puede ser guardado en la caché del
navegador a partir de ese momento.
Por último, close() cierra el flujo de escritura: Los siguientes write()
abrirán un documento nuevo.
Propiedad images [ ]
Array de imágenes creadas en línea con el tab

<IMG>.
La principal característica del objeto imagen es la

propiedad src, de lectura / escritura.
Se puede cambiar, dinámicamente, esta propiedad

de forma que el efecto final es el de reemplazar la
imagen. Es aconsejable que la nueva imagen tenga
el mismo ancho y alto que la original (width, heigth).
Propiedades de imágenes
Además de la propiedad src:

1. Propiedad complete false si la imagen todavía no
se ha completado su carga, true en caso contrario.
2. width, height y border Propiedades de solo

lectura.
3. lowsrc Propiedad LOWSRC del atributo <IMG>:

Especifica la URL de una imagen opcional que se
cargará y visualizará cuando la página se esté
visualizando un dispositivo de baja resolución.
Propiedad de lectura/escritura.
Imágenes Off-Screen
Imágenes forzadas a que el navegador las guarde

en su memoria caché (pre-carga) para visualizarlas
posteriormente con mayor rapidez.
Ejemplo de uso:
var imagenes=new Array(10);
for (var i=0; i<imágenes.length; i++) {
imagenes[i]=new Image();
imagenes[i].src=“/imagenes/imagen"+ i + ".gif“;
}
...
document.images[0].src=imagenes[3].src;
Efecto Rollover
<script>
var normal=new Image();
var vuelto=new Image();
normal.src=“/imagenes/normal.gif";
vuelto.src=“/imagenes/vuelto.gif";
function animar(numeroDeImagen) {
document.images[numeroDeImagen].src=vuelto.src;
}
function volver(numeroDeImagen) {
document.images[numeroDeImagen].src=normal.src;
}
</script>
<A HREF="javascript:void();" onmouseover="animar(0);“
onmoseout="volver(0);">
<IMG src="images/normal.gif" name=‘0’ border=0>
</A>
Eventos y manejadores (I)
Evento Ocurre cuando... Soportado por el/los elemento/s

onAbort Carga interrumpida Image.
onBlur El elemento pierde el foco Elementos de formulario y Window.
onChange El elemento ha cambiado Input text y Select.
onClick El elemento ha sido pulsado Link y Button
onDblClick Doble click (No en sist. UNIX/Linux) Document. Link, Image y Button.
onError Error en la carga de una imagen Image.
onFocus El elemento toma el foco Input text y Window.
onKeyDown Tecla presionada Document, Image, Link e Input text.
onKeyPress Combinación de onKeyDown+onKeyUp Document, Image, Link e Input text.
onKeyUp Se libera la tecla Document, Image, Link e Input text.
onLoad Documento o Imagen cargado Document e Image.
Eventos y manejadores (II)
Evento Ocurre cuando... Soportado por el/los elemento/s
onMouseDown Presionado el botón del ratón Document, Link, Image y Button.
onMouseOut El ratón se aleja del elemento Link, Image y Layer.
onMouseOver El ratón se posa sobre el elemento Link, Image y Layer
onMouseUp Se libera el botón del ratón Document, Link, Image y Button.

onReset Petición de borrado de formulario. Se Form.
devuelve false si no se desea borrar
onResize La ventana se redimensiona Window.
onSubmit Petición de envío de formulario. Se Form.

devuelve false si no se desea enviar
onUnload El documento se descarga Document.

Manejadores de eventos en JS
La mayoría de los eventos se definen como atributos

de etiquetas HTML:
<input type=button name=b1 value="Ok" onClick="validar();">
Estos mismos eventos se pueden definir con sintaxis

JavaScript:
document.f1.b1.onclick=function validar() { ... };
Ventajas de esta última notación:

1. Reduce la terminología HTML y proporciona modularidad a
través de JS.
2. Las funciones no tienen que ser fijadas en el código HTML,
sino que pueden ser modificadas en tiempo de ejecución.
Retorno de valores en eventos
En muchos casos, un manejador de evento retorna

un valor para indicar el resultado del evento.
Ejemplos habituales de de ellos:

1. onSubmit puede devolver true si se desea enviar el
formulario; false en caso contrario.
2. onReset puede devolver true si se desea “limpiar” un
formulario; false en caso contario.
Formularios: El objeto Form
El objeto form es una propiedad del objeto

document.
Se representa como un array de elementos forms[ ]

Los formularios escritos en el documento se
encuentran ubicados en el mismo orden en que
aparecen en el documento.
Podemos referirnos al último formulario de un

documento como:
document.forms [document.forms.length-1]
Propiedades de Form
La propiedad más interesante es: elements[ ], la

cual contiene todos los elementos de un formulario
particular: document.forms[2].elements[4]
Otras propiedades son:

– 1. action, corresponde a la propiedad ACTION de
<FORM> en HTML.
– 2. encoding, a la propiedad ENCODING en HTML.
– 3. method, a METHOD.
– 4. target, a TARGET.
Métodos de Form
Dos métodos a destacar:

1. Método submit() Submite o envía el formulario.
2. Método reset() Borra el contenido de los
elementos del formulario.
Ejemplos de uso:
document.f1.submit(); Provoca el envío del formulario.
document.f2.reset(); Provoca el borrado del formulario.
Eventos de Form
Acompañan a estos dos últimos métodos dos

eventos que detectan el envío del formulario o su
borrado:
1. Evento onSubmit.
2. Eventos onReset.
Elementos de Form
Objeto Etiqueta HTML Descripción y Evento

Button <INPUT TYPE=button> Se pulsa el botón. onClick.
Checkbox <INPUT TYPE=checkbox> Se selecciona el cuadro. onClick.
FileUpload <INPUT TYPE=file> Campo de entrada para introducir el nombre de un
fichero a descargar. onChange.
Hidden <INPUT TYPE=hidden> Elemento de formulario no visible. Sin Eventos.
Option <OPTION> Item individual de una lista de selección (<SELECT>).
EVENTOS EN <SELECT>.
Password <INPUT TYPE=password> Campo de entradas ocultas. onChange.
Radio <INPUT TYPE=radio> Se selecciona uno de los botones. onClick.
Reset <INPUT TYPE=reset> Botón que limpia el formulario. onClick.
Select <SELECT> Lista desplegable de opciones. onChange.
Submit <INPUT TYPE=submit> Botón de envío de formulario. onClick.
Text <INPUT TYPE=text> Línea sencilla de texto. onChange, onBlur.
Textarea <TEXTAREA> Múltiples líneas de texto. onChange, onBlur.
Propiedad form
Cada elemento de formulario tiene, a su vez, una

propiedad form.
Esta propiedad es una referencia al formulario que

lo contiene.
Utilidad: Para referirse a otros elementos del mismo

formulario.
Referencia this
Una referencia a this apunta al mismo objeto que la

nombra.
Ejemplos:
this.form.elements[4];
<input type=button onClick="validaFormulario(this.form);">
Capas (DHTML)
Las capas, en cada navegador, se indican de forma

distinta:
– MSIE / Mozilla / Mozilla Firefox: <SPAN>
– Netscape: <LAYER>
<DIV> establece divisiones html, y sirve, a su vez,

como elemento de definición de capas html en
ambos navegadores.
Elemento <DIV>
La sintaxis básica:
<DIV> ... </DIV>
Aunque <DIV> es soportado por ambos

navegadores, el modelo de estilos en cada uno de
ellos es diferente.
Para navegadores más modernos el HTML 4.0

permite utilizar otra etiqueta similar: <SPAN>.
<DIV> en Internet Explorer
Sintaxis:
<DIV id=“nombre” ... style=“...”> </DIV>
El modelo CSS soportado por MSIE es más amplio

que el soportado por Netscape (ver MSDN).
Estilo display:
<div id=“capa” align=center style=“display:inline”>
...
</div>
“display:none”
Práctica
Objetos Date y Math
Objeto Date Tratamiento de fechas y valores

horarios.
Objeto Math Propiedades y métodos para las

operaciones y constantes matemáticas.
Objeto Date (I)
Sintaxis:
fechaSistema = new Date();
fechaSistema = new Date(año, mes-1, día);
fechaSistema = new Date(año, mes-1, día, hh, mm, ss);
Método Acción
getDate() Devuelve el día del mes actual.
getDay() Devuelve el día de la semana actual [0..6].
getHours() Devuelve la hora actual (hh).
getMinutes() Devuelve los minutos actuales (mm).
getMonth() Devuelve el mes actual (nn) [0..11].
getSeconds() Devuelve los segundos actuales (ss).
getTime() Devuelve la FECHA actual en milisegundos (nnnnn..nn) desde
el 1/1/1970.
Objeto Date (II)
Método Acción
getTimezoneOffset() Diferencia en minutos entre la hora actual y la GMT.
getYear() - Desaprobado Devuelve el año actual (aa o aaaa, según navegador).
setDate(dd) Establece el día del mes.
setHours(hh) Establece la hora.
setMinutes(mm) Establece los minutos.
setMonth(mm) Establece el mes. [0..11]
setSeconds(ss) Establece los segundos.
setTime(nnnnnnnn) Establece en milisegundos la FECHA transcurrida entre el
1/1/1970 y la fecha en cuestión.
setYear(aa o aaaa) - Desaprobado Establece el año.

toGMTString() Devuelve el valor del objeto fecha en GMT como una cadena.
toLocaleString() Devuelve el valor del objeto fecha como una cadena en formato
local.
Nuevos métodos de Date (JS 1.3)
Método Acción
getFullYear() Devuelve el año en formato aaaa.
setFullYear(aaaa, [mm], [dd]) Establece el año. Opcionalmente, mes-1 y día.

Ejemplos sobre Date()
El objeto Math()
Acceso a propiedades: Propiedades

y Métodos
Math.propiedad Estáticos
Acceso a métodos:
Math.método(param1, param2, ..., paramN);
Propiedad Valor
E Constante de Euler o número e.
LN2 Logaritmo neperiano (base e) de 2.
LN10 Logaritmo neperiano de 10.
LOG2E Logaritmo en base 2 de e.
LOG10E Logaritmo en base 10 de e.
PI Número π.
SQRT1_2 Raíz cuadrada de ½.
SQRT2 Raíz cuadrada de 2.
Métodos de Math (I)
Método Acción
abs(n) Calcula el valor absoluto de n.
acos(n) Calcula el arcocoseno de n.
asin(n) Calcula el arcoseno de n.
atan(n) Calcula la arcotangente de n.
ceil(n) Redondea un número al próximo entero.
cos(n) Calcula el coseno de n.
exp(n) Calcula un exponencial del número e.
floor(n) Redondea un número eliminando su parte decimal (trunca).
log(n) Calcula el logaritmo natural de n.

max(x,y) Devuelve el mayor de {x,y}.
min(x,y) Devuelve el menor de {x,y}.
Métodos de Math (II)
Método Acción
pow(x,y) Calcula la potencia xy.
random() Genera un número aleatorio entre [0,1].
round(n) Redondea al número entero más cercano [,0 .. ,49] por defecto
[,50 .. ,99] por exceso.
sin(n) Calcula el seno de n.
sqrt(n) Calcula la raíz cuadrada de n.
tan(n) Calcula la tangente de n.
Cookies – Qué son (I)
Las cookies constituyen una potente herramienta

empleada por los servidores Web para almacenar y
recuperar información acerca de sus visitantes.
Dado que el Protocolo de Transferencia de

HiperTexto (HTTP) es un protocolo sin estados (no
almacena el estado de la sesión entre peticiones
sucesivas), las cookies proporcionan una manera de
conservar información entre peticiones del cliente,
extendiendo significativamente las capacidades de
las aplicaciones cliente/servidor basadas en la Web.
Cookies – Qué son (II)
Una cookie no es más que un fichero de texto que

algunos servidores piden a nuestro navegador que
escriba en nuestro disco duro, con información
acerca de lo que hemos estado haciendo por sus
páginas.
Entre las ventajas de las cookies se cuenta el hecho

de ser almacenadas en el disco duro del usuario,
liberando así al servidor de una importante
sobrecarga. Es el propio cliente el que almacena la
información y quien se la devolverá posteriormente
al servidor cuando éste la solicite (si es el caso).
Cookies – Qué son (III)
Además, las cookies poseen una fecha de

caducidad, que puede oscilar desde el tiempo que
dure la sesión hasta una fecha dada, a partir de la
cual dejan de ser operativas.
El usuario puede rechazar, a voluntad, las cookies

desde su navegador. De esta manera es libre de
elegir si prefiere la navegación con cookies o sin
ellas, de decidir si desea arriesgar su intimidad a
cambio de ciertas comodidades y de una
navegación más individualizada.
Cookies – Dónde se guardan
Internet Explorer (Windows 95, 98 y ME):

c:\windows\cookies\*.txt
Internet Explorer (Windows NT, 2000 y XP):

c:\windows\Documents and Settings\usuario\
Cookies\*.txt
Netscape Navigator:
..\Netscape\Users\usuario\cookies.txt
Cookies: Nombres y valores
Cada cookie representa una pequeña porción de

información con una fecha de caducidad opcional,
que se añade al fichero o directorio de cookies con
el siguiente formato:
nombre = valor;
El nombre es una cadena de caracteres. Su sintaxis

es diferente al de las variables JS: caracteres
alfanuméricos y líneas de subrayado.
Los nombres SON Case-Sensitive.

Cookies: Caducidad
La fecha de caducidad es un parámetro opcional

que indica el tiempo que se conservará la cookie.
Este parámetro se especificará en formato
Date.toGMTString():
nombre = valor; expires = fechaCaducidad;
Si no se especifica el valor de expires la cookie

existirá únicamente mientras el navegador esté en
ejecución. Posteriormente se eliminará.
Si se establece un valor ya transcurrido o bien cero,

la cookie se elimina inmediatamente.
Cookies: Dominio (I)
Si editamos el fichero de cookies, veremos que

aparecen muchos más datos, algunos bastante
crípticos:
Dominio (domain): Nombre de dominio, parcial o
completo, para el cual será válida la cookie. El
navegador devolverá la cookie a todo host que
encaje con el nombre de dominio parcial.
Ejemplo: domain=".aeat.es“ El navegador
devolverá la cookie a servidores web alojados en
cualquiera de las máquinas "www.aduanas.aeat.es",
“desarrollo.pyc.aeat.es", etc.
Cookies: Dominio (II)
Los nombres de dominio deben incluir al menos dos

puntos para evitar intentos fraudulentos de encajar
dominos de alto nivel como “.es”.
Si no se especifica ningún dominio, entonces el

navegador sólo devolverá la cookie a la máquina
que la originó (locales).
Cookies: Camino
El camino de una cookie (path) se utiliza para que el

navegador lo contraste con la URL del script que
desea tratarla antes de devolver la cookie.
Si especificamos: path="/cgi-bin", entonces la
cookie será devuelta a páginas de la forma "/cgi-
bin/pedido.php", "/cgi-bin/datos.html", etc.
Por defecto, el camino se establece al camino del
documento HTML que emitió la cookie, lo que hace
que la cookie se envíe a cualquier página que
cuelgue de ese directorio.
Cookies: Entorno
El atributo secure indica que la cookie sólo será

transmitida a través de un canal seguro con SSL.
Cookies: Acceso (I)
Las cookies son accesibles a través de la propiedad

cookie del objeto document, tanto en lectura como
en escritura.
document.cookie devuelve una cadena

conteniendo las cookies existentes en la página.
Manipulando esta cadena (string) es posible

localizar la información a extraer, en caso de lectura,
o a escribir, en caso de enviar una cookie.
Cookies: Acceso (II)
El método más simple de enviar una cookie:

document.cookie = ‘ejemplo=cookie‘
La forma de leer la cookie desde el navegador:

var miCuqui = document.cookie;
la cual visualizará la información en forma de pares
(variable=valor;).
Cookies: Guardar cookies
function setCookie (name, value, expires, path, domain, secure) {

document.cookie = name + "=" + escapeescape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString())+
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure"); }
ElElvalor
valorde
delas
lascookies
cookiesno
nopuede
puedecontener
contenercomas,
comas,puntos
puntosyycomas
comasooespacios
espacios
en blanco. Por este motivo es conveniente aplicarle al valor la función
en blanco. Por este motivo es conveniente aplicarle al valor la función
escape(),
escape(),paraparaque
quecodifique
codifiqueestos
estossímbolos
símbolosyysesepueda
puedaalmacenar
almacenar
correctamente.
correctamente. La lectura de la cookie se hará posteriormentecon
La lectura de la cookie se hará posteriormente conlalafunción
función
unescape().
unescape().
Cookies: Recuperar cookies
function getCookie(name) {
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape
unescape(dc.substring(begin, end));
}
}
return null;
}
Cookies: Modificar cookies
Para modificar el valor de una cookie, simplemente

se establece el nuevo valor con el mismo nombre y
se almacena de nuevo con document.cookie.
Cookies: Eliminar cookies
Para eliminar una cookie ya existente, se escribirá

una cookie con el mismo nombre, con un valor
arbitrario y una fecha de caducidad ya pasada. Esto
último provocará que la cookie se elimine.
Práctica
Objetos - Definición
Un objeto es un conjunto de atributos o propiedades

y métodos.
La forma habitual de crear un objeto es mediante el

operador new:
var o = new Objeto();
Creación de objetos
En JS 1.2, otra forma de crear e instanciar, a su

vez, objetos es a través de los objetos literales:
var circulo = {x:0, y:10, radio:25};
var homer = {
nombre: "Homer Simpson",
edad: 34,
casado: true,
profesion: "operador de planta",
email: " homer@simpsons.com"
};
Acceso a propiedades y métodos
El operador de acceso a las propiedades y métodos

de un objeto es el operador punto .:
document.miForm.nif
document.miForm.submit();
El valor de la izquierda del punto se refiere al objeto

y el de la derecha a la propiedad o método.
Valores undefined en objetos
Si intentamos acceder a una propiedad o método

que no existe para un objeto, JS devolverá el valor
undefined.
A través del operador delete (JS 1.2) podemos

eliminar una propiedad o método de un objeto. Si
intentamos acceder a una propiedad o método
borrado con delete, obtendremos el valor
undefined.
Enumeración de propiedades
Las propiedades de un objeto se pueden recorrer

mediante el uso de un bucle for..in.
Ejemplo:
function listarPropiedades (objeto) {
var nombres="";
for (var i in objeto) nombres+=i+"\n";
alert(nombres);
}
Crear nuevos objetos
Se realiza en dos pasos:

1. Definir el tipo de objeto (function).
2. Crear instancias del objeto (operador new).
Para crear un tipo de objeto, se creará una función

que especifique su nombre (constructor),
propiedades y métodos:
function auto (marca, modelo, anio) {
this.marca=marca;
this.modelo=modelo; Propiedades
this.anio=anio;
}
Instanciar objetos
A partir de la definición del objeto, las nuevas

instancias de ese objeto se crearán con el operador
new:
var miAuto = new auto ("Ford", "Sierra", 1988);
Se podrán acceder a las propiedades:

miAuto.marca Devolverá "Ford".
miAuto.modelo Devolverá "Sierra".
miAuto.anio Devolverá 1988.
Propiedades objetos (I)
Un objeto puede tener propiedades que a su vez

sean objetos.
Ejemplo:
function persona (nombre, edad, sexo, auto) {
this.nombre=nombre;
this.edad=edad;
this.sexo=sexo;
this.auto=auto;
}
Propiedades objetos (II)
La instanciación del objeto persona se haría como:

var Juan=new persona("Juan", 28, "H", miAuto);
De esta forma podemos tener referencias a las

propiedades del auto de una persona a través de
una persona concreta (de un objeto):
Juan.auto.marca
Juan.auto.modelo
Juan.auto.anio
Propiedades objetos (III)
Una característica importante de las propiedades de

los objetos en JS, es que se pueden añadir, en
tiempo de ejecución, nuevas propiedades a objetos
ya instanciados:
Juan.auto.color="Negro";
Definir Métodos (I)
Un método es una función asociada a un objeto.
Se definen de la misma manera que se define una

función normal.
La función se asocia al objeto indicando únicamente

el nombre de la función (método, sin paréntesis).
Posteriormente se invocarán con la notación punto:

objeto.método();
Definir Métodos (II)
Ejemplo:
function persona (nombre, edad, sexo, auto) {
this.nombre=nombre;
this.edad=edad;
this.sexo=sexo;
this.auto=auto;
this.informacion=inforPersona;
}
function inforPersona(separador) {
return "Nombre: "+ this.nombre + separador +
"Edad: " + this.edad + separador +
"Sexo: " + this.sexo;
}
Práctica

Javascript PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript PDF

Cargado por

Copyright:

Formatos disponibles

JAVASCRIPT

Luis Marco – Noviembre 2000

JavaScript – The Definitive Guide

Editor de texto ASCII

Navegador web con soporte JavaScript

JavaScript es un lenguaje de programación creado

Con JavaScript se pueden desarrollar programas

MSIE Soporta una variante de JavaScript, JScript,

Un lenguaje de programación es fuertemente tipado si el compilador comprueba que

Un lenguaje que no es fuertemente tipado se dice que no está tipado.

Navegador Año Versión

Microsoft Internet Explorer 3.0 1996 JavaScript 1.0 - JScript 1.0

Netscape Navigator 3.0 1996 JavaScript 1.1

Netscape Navigator 4.0 1997 JavaScript 1.2

Microsoft Internet Explorer 4.0 1997 JavaScript 1.2 - JScript 3.0

Netscape Navigator 4.5 1998 JavaScript 1.3

Microsoft Internet Explorer 5.0 1999 JavaScript 1.3 - JScript 5.0

Netscape Navigator 4.7 2000 JavaScript 1.3

Microsoft Internet Explorer 5.5 2001 JavaScript 1.3 – JScript 5.5

Netscape Navigator 6.0 2001 JavaScript 1.5

Microsoft Internet Explorer 6.0 2002 JavaScript 1.3 – JScript 5.6

Control de la visualización y contenido de los

JS no tiene capacidades gráficas, excepto la

JavaScript puede ser embebido en un documento

1. Como funciones y sentencias usando las elemento

Para definir el inicio de código se escribirá una de

El código JS se puede colocar en cualquier lugar del

Nota: Hay que tener presente que JS es un lenguaje

Cuando el cliente utiliza un browser que no entiende

Este efecto se puede evitar encerrando el código JS

HTML dispone también de las etiquetas

Entre ellas se incluirá únicamente código HTML.

Para introducir comentarios en JS, podemos utilizar

1. Comentarios de una sola línea: //...

Los bloques de instrucciones en JS se agrupan bajo

El final de una sentencia en JS se indica con punto y

El primer carácter debe ser siempre una letra, guión

Los demás caracteres pueden ser letras, números,

JS es Case Sensitive !!!!!

El nombre no puede coincidir con una palabra

Tampoco se deben definir identificadores que

JS puede manejar cuatro tipos de datos distintos:

A diferencia de otros lenguajes, en JS no se hace

Infinity , –Infinity para valores numéricos que

NaN para operaciones que esperan devolver un

JS 1.1 define las constantes numéricas:

(*) Sólo MSIE 4.0+ y nuevos navegadores.

En JS el texto se delimita mediante comillas dobles

Como norma, las comillas simples se utilizarán

Las cadenas de texto pueden concatenarse entre sí,

Obtener el carácter que ocupa la posición n:

Por booleanos se entienden los valores:

Utilizados, generalmente, para resultados en

Valor nulo, en JS null, indica la inexistencia de

En ocasiones es conveniente inicializar las variables

Una variable que no existe, no está definida o no

Este valor puede utilizarse en comparaciones.

La palabra clave que declara una variable en JS es

Al ser JS un lenguaje no tipado, no se declaran tipos

Antes de usar una variable es aconsejable

Se permite la declaración de múltiples variables para

Se puede dar valor inicial a las variables a la vez

Ejemplos de declaraciones válidas: