Javascript PDF

JAVASCRIPT
Bibliografa:
JavaScript. The Definitive Guide 2 OReilly.
Diseo de pginas web interactivas con
JavaScript 2 Ed. 2 Ra-Ma
Professional JavaScript 2 Wrox
Luis Marco Noviembre 2000
Rev. Abril 2006
Bibliografa recomendada
JavaScript The Definitive Guide

JavaScript Bible 3rd. Edition

Dany Goodman
Editorial IDG Books
Professional JavaScript

David Flanagan
Editorial Oreilly
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
Introduccin (I)

JavaScript es un lenguaje de programacin creado

por Netscape.
Objetivo: Integrarse en HTML y facilitar la creacin
de pginas interactivas.
El cdigo JavaScript no necesita ser compilado, es
el propio navegador el que se encarga de
interpretarlo.
Introduccin (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%.
Caractersticas

No tipado.
Basado en objetos.
JavaScript NO ES Java.
En la actualidad, pocos navegadores no disponen
de soporte de JavaScript.
Un lenguaje de programacin 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
Ao
Versin
Netscape Navigator 2.0
1995
JavaScript 1.0
Microsoft Internet Explorer 3.0
1996
JavaScript 1.0 - JScript 1.0
1996
JavaScript 1.1
1997
JavaScript 1.2
1997
1998
JavaScript 1.3
1999
2000
JavaScript 1.3
2001
JavaScript 1.3 JScript 5.5
2001
JavaScript 1.5
2002
JavaScript 1.3 JScript 5.6
Capacidades de JavaScript

Control de la visualizacin 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 grficas, excepto la

habilidad de generar dinmicamente documentos
html con imgenes, 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 cdigo 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 versin 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 versin JScript

<script>
document.write( Versin de JScript en Internet Explorer: +
ScriptEngineMajorVersion() +
"." +
ScriptEngineMinorVersion() );
</script>
Ubicacin del cdigo

El cdigo JS se puede colocar en cualquier lugar del

documento HTML, aunque lo ms usual es
encontrarlo en la seccin <HEAD> y, en ocasiones,
en la seccin <BODY>.
JS ignora los espacios, tabuladores y lneas en
blanco que aparezcan entre sentencias.
Nota: Hay que tener presente que JS es un lenguaje
Case Sensitive.
Esconder cdigo JS
Cuando el cliente utiliza un browser que no entiende

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

entre etiquetas de comentarios HTML: <!-- -- >.
Etiqueta <NOSCRIPT>
HTML dispone tambin de las etiquetas

<noscript> ... </noscript>.
Entre ellas se incluir nicamente cdigo HTML.
Comentarios en JS
Para introducir comentarios en JS, podemos utilizar

dos tcnicas diferentes:

1. Comentarios de una sola lnea: //...

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

llaves:
function miFuncion () {
var elAlumno=Amadeo";
var laAsignatura=Fsica";
alert (elAlumno + ha aprobado + laAsignatura);
}
Terminacin de instrucciones

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

coma.
Su uso no es obligatorio cuando cada lnea contiene
una nica sentencia JS.
Necesario cuando en una misma lnea existen varias
sentencias o cuando una sentencia ocupa varias
lneas (al final).
No existe lmite en cuanto a longitud.
Nombres de identificadores (I)

El primer carcter debe ser siempre una letra, guin

de subrayado _ o smbolo del dlar $.
Los dems caracteres pueden ser letras, nmeros,

el guin de subrayado o smbolo de dlar, 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
implementacin interna de JS a menudo usa esta
notacin.
Palabras reservadas de JS
abstract
abstract boolean
boolean
break
break
byte
byte
case
case
catch
catch
char
char
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
input
input
inin
instance
instanceofof interface
interface long
long
protected
protected
package
package private
private
implements
implements
native
native
new
new
null
null
static
static
super
super
return
return
short
short
throws
throws
transient
transient true
true
synchronized
synchronized this
this
throw
throw
var
var
val
val
with
with
while
while
int
int
public
public
switch
switch
class
class
try
try
Tipos de datos
JS puede manejar cuatro tipos de datos distintos:

1. Datos numricos.
2. Cadenas de texto.
3. Valores booleanos.
4. Valores nulos.
Valores numricos

A diferencia de otros lenguajes, en JS no se hace

distincin 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 numricos

Enteros
Octales: Empiezan con el dgito 0.
Hexadecimales: Empiezan con 0x 0X.
Coma flotante: La sintaxis es
[dgitos][.dgitos][(E|e)[(+|-)]dgitos]
Ej.:
3.14,
.333333333,
6.02e+23, 1.478223E-32
Valores numricos Especiales

Infinity , Infinity para valores numricos que

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

valor numrico y esto no ocurre (0 / 0).
Constantes numricas especiales

JS 1.1 define las constantes numricas:

Constante
Significado
Number.MAX_VALUE
El mayor nmero representable.
Number.MIN_VALUE
El menor nmero.
Number.POSITIVE_INFINITY (*)
Valor especial infinito positivo.
Number.NEGATIVE_INFINITY (*)
Valor especial infinito negativo.
(*) Slo 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 utilizarn
dentro de textos encerrados entre comillas dobles, y
viceversa.
Trabajando con cadenas (I)

Las cadenas de texto pueden concatenarse entre s,

con valores numricos y/o booleanos:
Determinar la longitud de cadena:
Operador suma +.
Propiedad length.
Obtener subcadenas:
Mtodo substring (inicio, fin).

Mtodo substring (inicio).
Mtodo substr (inicio, long).
Mtodo substr (inicio).
Trabajando con cadenas (I)

Obtener el carcter que ocupa la posicin n:
Encontrar posicin de la primera ocurrencia de una

subcadena de una cadena:
Mtodo charAt (n).
Mtodo indexOf (subcadena [, desde]). Si no la encuentra

devuelve el valor -1;
La ltima ocurrencia:
Mtodo 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 explcitamente que no tienen
valor alguno.
Valor Undefined
Una variable que no existe, no est definida o no

tiene valor, o bien una propiedad o mtodo de un
objeto inexistente tienen valor undefined.
Este valor puede utilizarse en comparaciones.
Declaracin 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.
Declaracin de variables (II)

Se permite la declaracin de mltiples 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
Declaracin de variables (III)

Ejemplos de declaraciones vlidas:

var nombre;
var Direccin;
var localidad_de_nacimiento;
Ejemplos de declaraciones invlidas:

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 travs 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, adems de otros mtodos y
propiedades, proporciona el mtodo 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 lnea 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 lnea de estado,
y haciendo doble
clic en l se puede ver el tipo de error.
Prctica
Caracteres escapados
Dentro de una cadena podemos introducir

caracteres que representan funciones especiales:
salto de lnea, comilla doble, salto de lnea,
Estos caracteres se introducen en la cadena

mediante el carcter de escape \, seguido del
carcter a escribir.
Lista de caracteres escapados

Cdigo
Cdigo
escapado
escapado
\b
\b
\f\f
\n
\n
\r\r
\t\t
\\\\
\'\'
\"\"
\NNN
\NNN
\xNN
\xNN
\uNNNN
\uNNNN
Carcter
Carctervisible
visible
Caracter
Caracteranterior
anterior
Salto
de
pgina
Salto de pgina
Salto
Saltode
delnea
lnea
Retorno
Retornode
decarro
carro
Tabulador
Tabulador
Caracter
Caracter\\
Comilla
Comillasimple
simple
Comilla
Comilladoble
doble
Cdigo
de
Cdigo decaracter
caracterdel
deljuego
juegoLatinLatin1,1,en
octal
en octal
Cdigo
Cdigode
decaracter
caracterdel
deljuego
juegoLatinLatin1,1,en
hexadecimal.
en hexadecimal.
Cdigo
Cdigode
decaracter
caracterdel
deljuego
juego
Unicode,
en
hexadecimal.
Unicode, en hexadecimal.
Ejemplo de cdigos 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 funcin, a las que se puede acceder desde
cualquier parte del cdigo.
Locales las definidas dentro del mbito de una
funcin y slo accesibles desde su mbito local.
Ejemplo de mbito
var cod-art = "110-Estantera";
function mostrar() {
var importe = 1500;
cod-art = "Sin existencias";
alert("El importe es: + importe);
alert("El cd-art.:" + cod-art);
}
alert("Ahora cd-art vale: + cod-art);
Operadores
Los operadores en JS pueden dividirse en varios

grupos funcionales:

1. Operadores aritmticos.
2. Operadores lgicos.
3. Operadores de comparacin.
4. Operador condicional.
5. Operadores de bit.
6. Operadores de asignacin.
7. Otros operadores.
Operadores aritmticos
Suma
Resta
Multiplicacin
Divisin
Mdulo
Incremento: Preincremento
y Posincremento
++
Decremento:
Predecremento y
Posdecremento
--
Negacin unaria
Operadores lgicos
Producto lgico OR
Suma lgica AND
Negacin lgica NOT
||
&&
!
+
NOTA: Si la parte izquierda de una condicin AND es falsa no
se sigue evaluando la condicin. Se devuelve false.

Si la parte izquierda de una condicin OR es cierta, no se sigue
evaluando la condicin. Se devuelve true.
Operadores de comparacin
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 comparacin 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 numrico y el otro cadena, se convierte la

cadena a numrico.
2.2. Si uno es numrico 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 nmero o cadena, se
convierte el objeto a su equivalente primitivo (Mtodos
toString() o valueOf()).
Operador condicional

Operador condicional ?:.

Es el nico operador ternario en JS.
Sintaxis:
var r = (condicin) ? Si_true : Si_false;
Su expresin es equivalente a la de una sentencia
condicional if sencilla, pero ms breve.
Ejemplo ?:
var saludo = "Hola " + (nombre!=null) ? nombre : "ser

annimo";
Equivalente a:
var saludo="Hola ";
if (nombre != null)
saludo += nombre;
else
saludo += "ser annimo";
Operadores de bit
Operador OR
Operador XOR
Operador AND
&
Desplazamiento izq.
<<
Desplazamiento der.
>>
Derecha con ceros
>>>
Negacin 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 asignacin
El operador bsico de asignacin es =.
La sintaxis de los operadores de asignacin: a op= b;
Operador
Operador
+=
+=
-=
-=
*=
*=
/=
/=
%
%==
<<=
<<=
>>=
>>=
>>>=
>>>=
&=
&=
|=
|=
^=
^=
Ejem
Ejemplo
plo
aa +=
+= bb
aa -=
-= bb
aa *=
*= bb
aa /=
/= bb
aa %
%== bb
aa <<=
<<= bb
aa >>=
>>= bb
aa >>>=
>>>= bb
aa &=
&= bb
aa |=
|= bb
aa ^=
^= bb
Equivalente
Equivalente
aa == aa ++ bb
aa == aa --bb
aa == aa ** bb
aa == aa //bb
aa == aa %
% bb
aa == aa <<
<< bb
aa == aa >>
>> bb
aa == aa >>>
>>> bb
aa == aa && bb
aa == 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

especfica y, opcionalmente, devuelven un valor.
Elementos de una funcin:

1. El identificador de funcin: function.

2. El nombre de la funcin.
3. La lista de argumentos.
4. Conjunto de sentencias que la definen.
Definicin de funciones

Las funciones pueden definirse en cualquier parte

de la pgina html.
Habitualmente se definen en la seccin <head>, por
claridad.
Sintaxis:
function nombre (par1, par2, ...) {
...
[ return expresin; ]
}
Ejemplo de funcin
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 ratn sobre l.
Sintaxis:
<input type=button name=miBoton
onclick ="miFuncion()">
Funcin eval()
Cualquier sentencia JS puede ejecutarse o

evaluarse a travs de la funcin 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;
Prctica
Sentencia bsica if
Sintaxis:
if (expresin)
sentencia;
if (expresin) {
conjunto de sentencias;
}
Ejemplos sentencia bsica if

if ( nombre == null )
alert ("Nombre vaco");
if ( email == null || email == "" ) {

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

clusulas else, hay que poner especial cuidado con
los bloques de sentencias entre llaves.
Seleccin por casos: switch

JS 1.2 proporciona la sentencia switch para seleccin entre

casos.
Sintaxis:
switch (expresin) {
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 (expresin)
sentencia;
El bucle while se ejecutar siempre que la expresin
se evale a true.
Una iteracin infinita: while (true);
Ejemplos while
Postincremento
var contador = 0;
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 expresin es verificada al final del bucle, con lo

que al menos una vez se ejecutar su cuerpo.
Sintaxis:
do
sentencia;
while (expresin);
Bucle for (I)

Representa la iteracin ms completa.

En l se puede realizar tanto la inicializacin, la
verificacin y la actualizacin del/los contador/es.
Sintaxis:
for (inicializaciones; condicin; actualizaciones)
sentencia;
Bucle for (II)

Esta sentencia es equivalente a:

inicializacin;
while (condicin) {
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:0000
Valores:
Valores:0011
Valores:
Valores:0022
Valores:
Valores:0033
Valores:
Valores:1100
Valores:
Valores:1111
Valores:
Valores:1122
Valores:
Valores:1133
Valores:
Valores:3300
Valores:
Valores:3311
Valores:
Valores:3322
Valores:
Valores:3333
FINAL:
FINAL: 4400
bucleExt:
bucleExt:
for
for(var
(vari i==0;0;i i<<10;
10;i++)
i++){{
bucleInt:
bucleInt:
for
for(var
(varj j==0;0;j j<<10;
10;j++)
j++){{
ifif(j(j>>3)3)break;
break;
ifif(i(i==
2)
== 2)break
breakbucleInt;
bucleInt;
ifif(i(i==4
==4) )break
breakbucleExt;
bucleExt;
document.write
("<br>Valores:
document.write ("<br>Valores: ++i i++" "" "++j);j);
}}
}}
document.write
document.write("<br>FINAL:
("<br>FINAL:" "++i i++" "" "++j);j);
Sentencia continue

Sintaxis:
continue;
continue etiqueta;
Usada slo en bucles while, for y for/in.
La sentencia continue provoca que la iteracin en
curso termine en el acto y comience el bucle con la
siguiente.
La sentencia vaca
En JS, una sentencia vaca se especifica con ;
Ejemplo:
//Inicializar un array
for (i = 0; i < a.length; a[i++] = 0) ;
Precaucin:
if ( a == 0 || b == 0 ) ;
alert ("la variable a o b tienen valor cero");
Prctica
Dilogos 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 mtodos del objeto window.
Son ventanas modales (excepto en Netscape bajo
plataformas UNIX !!).
Alertas: alert()
Visualiza un mensaje al usuario.

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

saltos de lnea (\n, \r), algunos caracteres
escapados y caracteres de puntuacin.
Ejemplo alert()
Confirmaciones: confirm()

Similar a las ventanas alert(), excepto que

proporcionan dos botones: Aceptar y Cancelar.
El dilogo devolver true si se pulsa en Aceptar y
false en caso contrario.
Sintaxis:
valor = confirm (cadena-mensaje);
Ejemplo confirm()
Devuelve true
(I)
Devuelve
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
Valor inicial
Devolver null
Devolver la entrada de
datos
Anidamiento de funciones
En JS 1.2 las funciones pueden anidarse.

El mbito de las funciones anidadas es el de su
definicin.
Ejemplo:
function hipotenusa (a, b) {

function cuadrado (x) { return x*x; }
return Math.sqrt(cuadrado(a) + cuadrado(b));
}
Argumentos de una funcin

Una funcin define, internamente un objeto especial

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

los argumentos pasados en la invocacin a la
funcin.
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 informacin.
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 !!!!
Creacin 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( [tamao | elementos] );
Constructor Array()
Existen tres formas de invocar al constructor Array():

1. Sin parmetro alguno: Define un array vaco.

2. Con un nico parmetro entero: Define su tamao.
3. Con una lista de parmetros: 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 vaco.
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 efecta 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 dinmicos.
En tiempo de ejecucin se puede aumentar el

nmero de elementos, simplemente definiendo para
el array el nuevo elemento.
JS asigna la memoria dinmicamente slo para los

elementos definidos.
Arrays multidimensionales
JS no soporta verdaderos arrays

multidimensionales.
La aproximacin que se permite en JS es definir

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

como matriz[x][y].
Creacin 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.
Mtodos 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();
Mtodo join()

Convierte y devuelve los elementos de un array a un

string concatenados mediante el separador coma.
Se puede especificar un parmetro 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
Mtodo split()
Devuelve un array a partir de una cadena de

literales separados por comas, o por el delimitador
que se indique como parmetro.
Ejemplo:
var a=Lunes|Martes|Mircoles;
var s=a.split(|);
s[0]==Lunes
s[1]==Martes
s[2]==Mircoles
Mtodo sort()
Ordena un Array en forma ascendente.
Ejemplo:
var a = new Array(A, F, B);
a.sort() { A, B, F }
Mtodo reverse()
Funciona de forma anloga a sort() pero ordena el

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

original ms 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}
Mtodo 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 }
Mtodo 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}
Mtodos push() / pop()

Son dos mtodos que implementan el

comportamiento tpico 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).
Mtodos unshift() / shift()

Funcionan de forma similar a push() / pop().

unshift(valor) aade 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.
Mtodos toString()/toSource()
toString() aplicado a un array, convierte cada uno

de sus elementos a un string, separado por comas.
Es idntico a join().
Excepcin en Nav. 4/ Mozilla / Mozilla Firefox:
Cuando <script language=JavaScript1.2> la cadena
aparece encerrada entre corchetes [1, 2, 3].
Solucin en JavaScript1.3 para dichos

navegadores toSource().
Prctica
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:cdigo-JS;"> ... </a>
Como manejadores de eventos.
Consideraciones .js
1. Un fichero .js es cdigo puro JavaScript, sin las

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

debe de ir cdigo 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 slo 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();>
Ejecucin de programas JS
Si ubicamos cdigo JS en la seccin <head>, p.ej.,

ste no podr acceder a elementos de la seccin
<body> hasta que no hayan sido definidos, ya que el
flujo de ejecucin es secuencial.
Si el cdigo intenta acceder a elementos todava 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 pgina

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

abandone la pgina.
El entorno del lado cliente JS

El desarrollo de JS del lado cliente (client-side

JavaScript) realiza un uso intensivo de tres
caractersticas del entorno del navegador:

1. El objeto global Window.

2. La jerarqua de objetos del lado cliente.
2. El modelo de programacin guiado por eventos.
El objeto Window
El objeto Window representa la ventana (o frame)

que visualiza el documento.
Define propiedades y mtodos que permiten

manipular las ventanas del navegador.
Referencias al objeto Window: window o self.
Jerarqua de objetos
self,
self, window,
window,
parent,
parent, top
top
plugins
plugins [[ ]]
navigator
navigator
mimeTypes
mimeTypes [[ ]]
frames
frames [[ ]]
forms
forms [[ ]]
Window
Window
anchors
anchors [[ ]]
location
location
links
links [[ ]]
history
history
document
document
images
images [[ ]]
applets
applets [[ ]]
embeds
embeds [[ ]]
Familia de
Netscape
Navigator
elements
elements[ [] ]
array
arrayde
deobjetos
objetosde
de
Formulario
Formulario(Form):
(Form):
Button
Button
Checkbox
Checkbox
FileUpload
FileUpload
1.1
Hidden
Hidden
Password
Password
Radio
Radio
Select
Select
Submit
Submit
Text
Text
TextArea
TextArea
options
options [[ ]]
array
array de
de objetos
objetos
options
options
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
Windows
Microsoft WindowsMedia
MediaServices
Services
Shockwave
Flash
Shockwave Flash
Adobe
AdobeSVG
SVGViewer
ViewerPlugin
Plugin
NPSnpy
Dynamic
Link
NPSnpy Dynamic LinkLibrary
Library
RealPlayer(tm)
G2
LiveConnect-Enabled
RealPlayer(tm) G2 LiveConnect-EnabledPlug-In
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
MicrosoftReader
Reader
Windows
Media
Windows MediaPlayer
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-drm
application/x-drm
image/svg-xml
image/svg-xml
image/svg
image/svg
application/x-npsnpy-plugin
application/x-npsnpy-plugin
**
application/x-java-bean;version=1.2.1
application/x-java-applet;version=1.2.1
application/x-java-bean;version=1.3
application/x-java-applet;version=1.3
application/x-java-bean;jpi-version=1.3.1
application/x-java-bean;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
application/x-java-applet;jpi-version=1.3.1
application/x-java-bean
application/x-java-bean
application/x-java-applet
application/x-java-applet
application/x-npebshp
application/x-npebshp
application/asx
application/asx
audio/x-rmf
audio/x-rmf
audio/rmf
audio/rmf
audio/nspaudio
audio/nspaudio
audio/x-nspaudio
audio/x-nspaudio
......
......
......
......
......
Nombrar objetos
El objeto window se asume por defecto, por lo que

no es necesario nombrarlo.
Ejemplo:
self.document.forms[0] document.forms[0]
Programacin por eventos

En programacin web, las pginas, una vez escritas

e interpretadas por el navegador, quedan estticas
esperando que se produzcan eventos asncronos.
Estos eventos responden a la interaccin por parte
del cliente, tales como pulsacin de un botn, de
una tecla, etc...
Ejemplo:
<input type=button name=miBoton value="Calcular"
onclick="calcula();">
Propiedades del objeto Window

Propiedad
closed
defaultStatus,
status
Significado
true si la ventana ha sido cerrada. false en caso contrario.
Texto que aparecer en la lnea de estado del navegador. Por defecto y
explcitamente.
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. Sinnimo de window.
top
Si la ventana es un frame, referencia a la ventana del nivel ms alto que la contiene.
window
Referencia al actual objeto ventana. Sinnimo de self.
Mtodos del objeto Window

Mtodo
Significado
alert(),
confirm(),
prompt()
Caja de dilogo informativa.

Dilogo con aceptacin (devuelve true) o cancelacin (devuelve false).
Dilogo con entrada de usuario. (Aceptar: devuelve el valor introducido Cancelar: null).
moveBy,
moveTo()
Mueve la ventana valores relativos.

Mueve la ventana a posiciones absolutas.
resizeBy(),
resizeTo()
Redimensiona la ventana valores relativos.

Redimensiona la ventana valores absolutos.
scrollBy(),
scrollTo()
Realiza un scroll relativo (desplazamiento) en el documento de la ventana.

Scroll absoluto.
setInterval(),
clearInterval()
Planifica la ejecucin repetida de la funcin indicada.

Cancela la planificacin.
setTimeout(),
clearTimeout()
Invoca a la funcin especificada transcurrido cierto intervalo de tiempo. No peridica.

Cancela el intervalo de tiempo especificado, antes de la ejecucin.
open(),
close()
Abre una nueva instancia del navegador (nueva ventana).

Cierra una ventana.
Mtodo open()
(I)
Sintaxis:
var w = window.open ("pagina.html", "nombre", "propiedadesventana", valor-booleano);
Todos los argumentos son opcionales.
Mtodo open()
(II)
Propiedades de ventana:
"width=nnn,heigth=mmm,status=yes,resizable=yes, ".
Propiedad
Accin
height
Especifica el alto de la ventana en pxeles.
width
Especifica el ancho de la ventana en pxeles.
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 lnea 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);
Mtodo 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.
Mtodo close()
Sintaxis: window.close(); objeto-window.close();
Se podrn cerrar ventanas cuyo cdigo JS haya creado

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

informar al usuario con una ventana de confirmacin
(por motivos de seguridad).
El objeto window contina, an habiendo sido cerradas

todas las ventanas. En esta situacin no se podr
acceder a ninguna de sus propiedades. La nica
propiedad disponible en esta situacin es closed: true o
false.
Relacin entre ventanas (I)

Podemos establecer referencias entre ventanas:

1. Una ventana crea a otra: El mtodo open() devuelve

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

a travs de la propiedad opener del objeto window.
Relacin entre ventanas (II)

La
La ventana
ventana AA crea
crea aa
BB con
con var
var B=open();
B=open();
Referencia
Referencia aa travs
travs
de
de la
la variable
variable B.
B.
B
La
La ventana
ventana BB puede
puede
referirse
referirse aa la
la AA aa travs
travs
de
de la
la propiedad
propiedad opener.
opener.
La lnea de estado del browser

Situada en la parte inferior del navegador.
Lugar de informacin del navegador al usuario.
Con la propiedad status podemos establecer

informacin deseada.
Con defaultStatus establecemos la informacin 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-funcin", tiempo-ms);
Para cancelar una temporizacin, antes de su

ejecucin:
clearTimeout (identificador); No devuelve nada !!.
Intervalos: setInterval()

Establece una llamada peridica, cada intervalo

especificado como parmetro en milisegundos.
Sintaxis:
var identificador = setInterval ("nom-funcin", tiempo-ms);
Para cancelar la ejecucin peridica:

clearInterval(identificador) No devuelve nada !!.
Prctica
El objeto navigator

La propiedad window.navigator se refiere al objeto

navigator.
Propiedades que contienen informacin acerca del
browser: (entre otras),
Propiedad
Significado
appName
Nombre del navegador web.
appVersion
Nmero de la versin y otra informacin asociada.
userAgent
Cadena que el navegador enva en su cabecera USER-AGENT HTTP.
appCodeName
Nombre interno del cdigo del navegador. Ej.: "Mozilla.
platform
Plataforma software en el que se ejecuta el navegador. Ej.: "Win32".
Ejemplo propiedades navigator

MSIE
MSIEversin
versin6.0
6.0
navigator.appName:
navigator.appName:Microsoft
MicrosoftInternet
InternetExplorer
Explorer
navigator.appVersion:
4.0
(compatible;
MSIE
navigator.appVersion: 4.0 (compatible; MSIE6.0;
6.0;Windows
WindowsNT
NT5.0;
5.0;yif1000)
yif1000)
navigator.userAgent:
Mozilla/4.0
(compatible;
MSIE
6.0;
Windows
NT
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT5.0;
5.0;yif1000)
yif1000)
navigator.appCodeName:
Mozilla
navigator.appCodeName: Mozilla
navigator.platform:
navigator.platform:Win32
Win32
NETSCAPE
NETSCAPENavigator
Navigator4.76
4.76
navigator.appName:
navigator.appName:Netscape
Netscape
navigator.appVersion:
navigator.appVersion:4.76
4.76[en]
[en](Windows
(WindowsNT
NT5.0;
5.0;U)
U)
navigator.userAgent:
Mozilla/4.76
[en]
(Windows
NT
navigator.userAgent: Mozilla/4.76 [en] (Windows NT5.0;
5.0;U)
U)
navigator.appCodeName:
Mozilla
navigator.appCodeName: Mozilla
navigator.platform:
navigator.platform:Win32
Win32
Examinar propiedades navigator

var browser="INFORMACIN DEL BROWSER:\n";
for (var propiedad in navigator) {
browser += propiedad + ": " +
navigator[propiedad] + <br>";
}
document.write ("Resultado:<br>" + browser);
Arrays
Arraysasociativos
asociativos
Mtodos de navigator
Mtodo javaEnabled(): Proporciona informacin

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

digitalmente consultar y establecer preferencias de
usuario. Slo 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

tamao de la ventana de visualizacin del browser:
propiedades width, height, availWidth y
availHeight (en pxeles).
Otras propiedades: colorDepth, proporciona el

nmero de colores en logaritmo de base 2 (n bits).
Relacin entre frames (I)

Un frame puede referirse a otros frames a travs de

las propiedades frames [ ], parent y top.
Cada ventana tiene la propiedad frames [ ]. Si no

tiene frames que dependan de ella, este array estar
vaco: 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]...
Relacin entre frames (II)
Ver imagen de Frames
Relacin 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 tambin a travs de l (conveniente).
Paso de informacin entre pginas

HTML
Peticin (1) http://...
Documento html
Peticin (2) http://...
Documento html
...
B
t1
t2
Soluciones
Bsicamente, existen 4 mtodos para el intercambio

de informacin entre pginas HTML:

1. A travs de cookies.
2. A travs de applets Java / controles ActiveX.
3. A travs de variables de frames / frameset.
4. A travs de la URL.
Cambio de pginas html

Podemos cambiar de documento html mediante la

propiedad URL del objeto document.
Tambin podemos avanzar o retroceder a pginas

ya visitadas (del historial) mediante
window.history.back() o window.history.forward();
Ejemplo:
if (condicion) document.URL=pagina2.html;
else document.URL=pagina3.html;
Prctica
El Document Object Model (DOM)

Basado en el objeto Document.

Probablemente es el objeto ms usado en la parte
cliente de JS.
Contiene informacin acerca del documento
visualizado en el browser: su URL, su ltima
modificacin, la URL del documento que lo enlaz,
...
De la misma forma, proporciona un conjunto de
mtodos 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 travs 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 travs 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 vdeo,
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 Sinnimo de URL.
lastModified Cadena que contiene la fecha de la ltima
modificacin 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 Ttulo 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) despus de un
interrogante (incluido).
Uso: Paso de informacin entre pginas.
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 pgina que

enlaz con la pgina actual.
Usos:
1. Obtencin de estadsticas.
2. Evitar enlaces directos a una determinada pgina
Ejemplo:
if (document.referrer=="" || document.referrer.indexOf(aeat.es") == -1)

{
document.location=http://www.aeat.es;
}
Generacin dinmica de docs.

El objeto document define tres mtodos que

permite a los programas JS escribir dinmicamente
texto HTML en el documento:

1. open().
2. write().
3. close().
Mtodos: 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 animacin "document loading" no se detiene

en Netscape Navigator.
Adems, 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()
abrirn un documento nuevo.
Propiedad images [ ]
Array de imgenes creadas en lnea con el tab

<IMG>.
La principal caracterstica del objeto imagen es la

propiedad src, de lectura / escritura.
Se puede cambiar, dinmicamente, 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 imgenes
Adems de la propiedad src:

1. Propiedad complete false si la imagen todava 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 pgina se est
visualizando un dispositivo de baja resolucin.
Propiedad de lectura/escritura.
Imgenes Off-Screen
Imgenes 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<imgenes.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
onAbort
Ocurre cuando...
Soportado por el/los elemento/s
Carga interrumpida
Image.
onBlur
El elemento pierde el foco
Elementos de formulario y Window.
onChange
El elemento ha cambiado
Input text y Select.
El elemento ha sido pulsado
Link y Button
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
Combinacin de onKeyDown+onKeyUp
Se libera la tecla
Documento o Imagen cargado
Document e Image.
onClick
onDblClick
onKeyUp
onLoad
Eventos y manejadores (II)

Evento
Ocurre cuando...
Soportado por el/los elemento/s
onMouseDown
Presionado el botn del ratn
Document, Link, Image y Button.
onMouseOut
El ratn se aleja del elemento
Link, Image y Layer.
onMouseOver
El ratn se posa sobre el elemento
Link, Image y Layer
Se libera el botn del ratn
Document, Link, Image y Button.
onReset
Peticin de borrado de formulario. Se

devuelve false si no se desea borrar
Form.
onResize
La ventana se redimensiona
Window.
onSubmit
Peticin de envo de formulario. Se

devuelve false si no se desea enviar
Form.
onUnload
El documento se descarga
Document.
onMouseUp
Manejadores de eventos en JS
La mayora 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 notacin:

1. Reduce la terminologa HTML y proporciona modularidad a

travs de JS.
2. Las funciones no tienen que ser fijadas en el cdigo HTML,
sino que pueden ser modificadas en tiempo de ejecucin.
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 ms 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.
Mtodos de Form
Dos mtodos a destacar:

1. Mtodo submit() Submite o enva el formulario.

2. Mtodo reset() Borra el contenido de los
elementos del formulario.
Ejemplos de uso:
document.f1.submit(); Provoca el envo del formulario.
document.f2.reset(); Provoca el borrado del formulario.
Eventos de Form
Acompaan a estos dos ltimos mtodos dos

eventos que detectan el envo del formulario o su
borrado:

1. Evento onSubmit.
2. Eventos onReset.
Elementos de Form
Objeto
Button
Etiqueta HTML
Descripcin y Evento
<INPUT TYPE=button>
Se pulsa el botn. 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 seleccin (<SELECT>).

EVENTOS EN <SELECT>.
<INPUT TYPE=password>
Campo de entradas ocultas. onChange.
Radio
<INPUT TYPE=radio>
Se selecciona uno de los botones. onClick.
Reset
<INPUT TYPE=reset>
Botn que limpia el formulario. onClick.
Select
<SELECT>
Lista desplegable de opciones. onChange.
Submit
<INPUT TYPE=submit>
Botn de envo de formulario. onClick.
<INPUT TYPE=text>
Lnea sencilla de texto. onChange, onBlur.
<TEXTAREA>
Mltiples lneas de texto. onChange, onBlur.
Password
Text
Textarea
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 definicin de capas html en
ambos navegadores.
Elemento <DIV>
La sintaxis bsica:
<DIV> ... </DIV>
Aunque <DIV> es soportado por ambos

navegadores, el modelo de estilos en cada uno de
ellos es diferente.
Para navegadores ms 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 ms amplio

que el soportado por Netscape (ver MSDN).
Estilo display:
<div id=capa align=center style=display:inline>
...
</div>
display:none
Prctica
Objetos Date y Math

Objeto Date Tratamiento de fechas y valores

horarios.
Objeto Math Propiedades y mtodos para las

operaciones y constantes matemticas.
Objeto Date (I)

Sintaxis:
fechaSistema = new Date();
fechaSistema = new Date(ao, mes-1, da);
fechaSistema = new Date(ao, mes-1, da, hh, mm, ss);
Mtodo
Accin
getDate()
Devuelve el da del mes actual.
getDay()
Devuelve el da 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)

Mtodo
Accin
getTimezoneOffset()
Diferencia en minutos entre la hora actual y la GMT.
getYear() - Desaprobado
Devuelve el ao actual (aa o aaaa, segn navegador).
setDate(dd)
Establece el da 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 cuestin.
setYear(aa o aaaa) - Desaprobado
Establece el ao.
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 mtodos de Date (JS 1.3)
Mtodo
Accin
getFullYear()
Devuelve el ao en formato aaaa.
setFullYear(aaaa, [mm], [dd])
Establece el ao. Opcionalmente, mes-1 y da.
Ejemplos sobre Date()
El objeto Math()
Acceso a propiedades:
Propiedades
y Mtodos
Estticos
Math.propiedad
Acceso a mtodos:
Math.mtodo(param1, param2, ..., paramN);
Propiedad
Valor
Constante de Euler o nmero 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
Nmero .
SQRT1_2
Raz cuadrada de .
SQRT2
Raz cuadrada de 2.
Mtodos de Math (I)

Mtodo
Accin
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 nmero al prximo entero.
cos(n)
Calcula el coseno de n.
exp(n)
Calcula un exponencial del nmero e.
floor(n)
Redondea un nmero 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}.
Mtodos de Math (II)

Mtodo
Accin
pow(x,y)
Calcula la potencia xy.
random()
Genera un nmero aleatorio entre [0,1].
round(n)
Redondea al nmero entero ms cercano [,0 .. ,49] por defecto

[,50 .. ,99] por exceso.
sin(n)
Calcula el seno de n.
sqrt(n)
Calcula la raz 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 informacin acerca de sus visitantes.
Dado que el Protocolo de Transferencia de

HiperTexto (HTTP) es un protocolo sin estados (no
almacena el estado de la sesin entre peticiones
sucesivas), las cookies proporcionan una manera de
conservar informacin 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 ms que un fichero de texto que

algunos servidores piden a nuestro navegador que
escriba en nuestro disco duro, con informacin
acerca de lo que hemos estado haciendo por sus
pginas.
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
informacin y quien se la devolver posteriormente
al servidor cuando ste la solicite (si es el caso).
Cookies Qu son (III)

Adems, las cookies poseen una fecha de

caducidad, que puede oscilar desde el tiempo que
dure la sesin 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 navegacin con cookies o sin
ellas, de decidir si desea arriesgar su intimidad a
cambio de ciertas comodidades y de una
navegacin ms individualizada.
Cookies Dnde 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 pequea porcin de

informacin con una fecha de caducidad opcional,
que se aade 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
alfanumricos y lneas de subrayado.
Los nombres SON Case-Sensitive.
Cookies: Caducidad
La fecha de caducidad es un parmetro opcional

que indica el tiempo que se conservar la cookie.
Este parmetro 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
ejecucin. 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 ms datos, algunos bastante
crpticos:
Dominio (domain): Nombre de dominio, parcial o

completo, para el cual ser vlida 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 mquinas "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 ningn dominio, entonces el

navegador slo devolver la cookie a la mquina
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 pginas de la forma "/cgibin/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 enve a cualquier pgina que
cuelgue de ese directorio.
Cookies: Entorno
El atributo secure indica que la cookie slo ser

transmitida a travs de un canal seguro con SSL.
Cookies: Acceso (I)

Las cookies son accesibles a travs de la propiedad

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

conteniendo las cookies existentes en la pgina.
Manipulando esta cadena (string) es posible

localizar la informacin a extraer, en caso de lectura,
o a escribir, en caso de enviar una cookie.
Cookies: Acceso (II)

El mtodo ms 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 informacin en forma de pares

(variable=valor;).
Cookies: Guardar cookies

function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape
escape(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
funcin
en blanco. Por este motivo es conveniente aplicarle al valor la funcin
escape(),
escape(),para
paraque
quecodifique
codifiqueestos
estossmbolos
smbolosyyse
sepueda
puedaalmacenar
almacenar
correctamente.
La
lectura
de
la
cookie
se
har
posteriormente
correctamente. La lectura de la cookie se har posteriormentecon
conlalafuncin
funcin
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.
Prctica
Objetos - Definicin
Un objeto es un conjunto de atributos o propiedades

y mtodos.
La forma habitual de crear un objeto es mediante el

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

vez, objetos es a travs 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 mtodos

El operador de acceso a las propiedades y mtodos

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 mtodo.
Valores undefined en objetos

Si intentamos acceder a una propiedad o mtodo

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

eliminar una propiedad o mtodo de un objeto. Si
intentamos acceder a una propiedad o mtodo
borrado con delete, obtendremos el valor
undefined.
Enumeracin 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 funcin

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

instancias de ese objeto se crearn con el operador
new:
var miAuto = new auto ("Ford", "Sierra", 1988);
Se podrn 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 instanciacin del objeto persona se hara como:

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

propiedades del auto de una persona a travs de
una persona concreta (de un objeto):
Juan.auto.marca
Juan.auto.modelo
Juan.auto.anio
Propiedades objetos (III)

Una caracterstica importante de las propiedades de

los objetos en JS, es que se pueden aadir, en
tiempo de ejecucin, nuevas propiedades a objetos
ya instanciados:
Juan.auto.color="Negro";
Definir Mtodos (I)

Un mtodo es una funcin asociada a un objeto.
Se definen de la misma manera que se define una

funcin normal.
La funcin se asocia al objeto indicando nicamente

el nombre de la funcin (mtodo, sin parntesis).
Posteriormente se invocarn con la notacin punto:

objeto.mtodo();
Definir Mtodos (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;
}
Prctica

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

JavaScript The Definitive Guide

JavaScript Bible 3rd. Edition

Editor de texto ASCII

Navegador web con soporte JavaScript

Microsoft Internet Explorer 4.0+

Conocimientos previos de HTML

JavaScript es un lenguaje de programacin creado

Con JavaScript se pueden desarrollar programas

MSIE Soporta una variante de JavaScript, JScript,

Un lenguaje de programacin es fuertemente tipado si el compilador comprueba que

Versiones de JavaScript / JScript

Netscape Navigator 2.0

Microsoft Internet Explorer 3.0

JavaScript 1.0 - JScript 1.0

Netscape Navigator 3.0

Netscape Navigator 4.0

Microsoft Internet Explorer 4.0

JavaScript 1.2 - JScript 3.0

Netscape Navigator 4.5

Microsoft Internet Explorer 5.0

JavaScript 1.3 - JScript 5.0

Netscape Navigator 4.7

Microsoft Internet Explorer 5.5

JavaScript 1.3 JScript 5.5

Netscape Navigator 6.0

Microsoft Internet Explorer 6.0

JavaScript 1.3 JScript 5.6

Control de la visualizacin y contenido de los

Qu no puede hacer JavaScript

JS no tiene capacidades grficas, excepto la

Usando JavaScript en HTML

JavaScript puede ser embebido en un documento

1. Como funciones y sentencias usando las elemento

Para definir el inicio de cdigo se escribir una de

Determinar versin JavaScript

Determinar versin JScript

Ubicacin del cdigo

El cdigo JS se puede colocar en cualquier lugar del

Cuando el cliente utiliza un browser que no entiende

Este efecto se puede evitar encerrando el cdigo JS

HTML dispone tambin de las etiquetas

Entre ellas se incluir nicamente cdigo HTML.

Para introducir comentarios en JS, podemos utilizar

1. Comentarios de una sola lnea: //...

Los bloques de instrucciones en JS se agrupan bajo

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

Nombres de identificadores (I)

El primer carcter debe ser siempre una letra, guin

Los dems caracteres pueden ser letras, nmeros,

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

Tipos de literales numricos

Valores numricos Especiales

Infinity , Infinity para valores numricos que

NaN para operaciones que esperan devolver un

Constantes numricas especiales

JS 1.1 define las constantes numricas:

El mayor nmero representable.

Valor especial infinito positivo.