Apuntes de Javascript2014

Aplicaciones Web
Lenguajes de script: JAVASCRIPT
APLICACIONES WEB
LENGUAJES DE SCRIPT: JAVASCRIPT
1. INTRODUCCIN.........................................................................................................................2
2. CMO INSERTAR CDIGO JAVASCRIPT EN HTML......................................................2
3. COMENTARIOS..........................................................................................................................5
4. JAVASCRIPT EN NAVEGADORES ANTIGUOS.................................................................5
5. CONSIDERACIONES SOBRE JAVASCRIPT ......................................................................5
6. MTODO WRITE........................................................................................................................6
7. ALMACENAMIENTO DE DATOS...........................................................................................6
8. OPERADORES..............................................................................................................................9
9. INTERACCIN CON EL USUARIO .....................................................................................11
10. ESTRUCTURAS DE CONTROL ............................................................................................12
11. ARRAYS......................................................................................................................................19
12. FUNCIONES ............................................................................................................................20
13. OBJETOS EN JAVASCRIPT................................................................................................24
14. LA CLASE STRING.................................................................................................................25
15. LA CLASE MATH.....................................................................................................................28
16. ERRORES COMUNES Y CONSEJOS DE PROGRAMACIN ........................................28
17. D.O.M. (Modelo de Objetos del Documento) ....................................................................29
18. PROPIEDADES Y MTODOS DEL OBJETO WINDOW ...............................................32
19. PROPIEDADES Y MTODOS DEL OBJETO DOCUMENT............................................34
20. MANEJO DE ELEMENTOS DE UN FORMULARIO CON JAVASCRIPT ..................37
21. EVENTOS..................................................................................................................................43
22. EJECUCIONES PERIDICAS: setInterval.....................................................................51
23. BIBLIOGRAFA ......................................................................................................................53
IES Luis Braille Coslada (Madrid)
Pgina 1/53
Aplicaciones Web
1. INTRODUCCIN
JavaScript es un lenguaje interpretado por el navegador, basado en objetos y dirigido a proporcionar una
mayor flexibilidad a los documentos web que, diseados solamente con HTML, resultan estticos. El cdigo
acompaa al HTML y permite una programacin destinada a manipular los elementos de dichos
documentos. Su primer nombre fue "LiveScript" y fu diseado por Netscape. Microsoft contraatac con
su propia versin que denomin "JScript".
JavaScript fue diseado para dar cierto dinamismo al comportamiento de los documentos web, ya que
stos resultan absolutamente estticos si son desarrollados exclusivamente con HTML. JavaScript
permite variar la apariencia o el comportamiento de los diferentes elementos que lo componen en funcin
de la deteccin de lo que ocurre en ella, ya bien sea por haberlo provocado el usuario, o bien, el propio
cdigo del programa. As, algunos de los usos ms tpicos que a JavaScript se le dan, son:
Control del comportamiento del navegador
Control de elementos obligatorios en un formulario
Control de formatos de entrada en formularios
Cambio de imgenes en un documento
La posibilidad de que se puedan escribir cdigos maliciosos con intencin de daar o "invadir" los
ordenadores que se conecten, es muy alta. Por esto, hay una serie de limitaciones en cuanto a la
funcionalidad del lenguaje que intentan poner a salvo de estas malas prcticas al ordenador del usuario que
se conecta:
JavaScript no tiene capacidades grficas
El lenguaje no puede escribir ni leer de ficheros del disco del ordenador cliente
No soporta ninguna gestin de transmisin, excepto la posibilidad de conectarse a una URL
Para programar en JavaScript necesitamos, bsicamente, lo mismo que para desarrollar pginas web en
HTML: un editor de texto y un navegador compatible con JavaScript, aunque hay editores especficos
que nos pueden ayudar en la programacin con cdigos de colores, ayudas, (notepad ++, html kit, ).
Veamos la pinta que tiene un cdigo escrito en JavaScript:
var numero1=23, numero2=63;
if (numero1==numero2) {
document.write (Los dos nmeros son iguales);
}
else {
if (numero1 > numero2) {
document.write (El primer nmero es mayor);
}
else {
document.write (El segundo nmero es mayor);
}
}
2. CMO INSERTAR CDIGO JAVASCRIPT EN HTML

Las instrucciones de JavaScript se pueden incorporar a nuestros documentos de 4 formas diferentes:
Usando la etiqueta <script>

Asociadas a la deteccin de un evento
Asociadas a un enlace
Pgina 2/53
Aplicaciones Web
En ficheros externos
2.1. Usando la etiqueta <script>

<script type="text/JavaScript" language=JavaScript>
Aqui vendra el cdigo JavaScript

</script>
Las instrucciones que se escriban entre estas dos etiquetas se ejecutan de forma secuencial y, si estas
instrucciones aparecen antes que algn cdigo HTML, se interpretarn antes que ste.
Se pueden escribir en un documento HTML tantas etiquetas <script></script> como se desee, aunque lo
normal es que exista solamente una que contenga todo el cdigo necesario; sin embargo es posible
encontrar casos en los que es necesario escribir el cdigo de forma separada. Como norma general, se
coloca dentro de la etiqueta <head>
EJEMPLO 1
<html>
<head>
<title>primer ejemplo JS</title>
alert ('Bienvenido al primer ejemplo');
</script>
</head>
<body>
Texto inicial<br />
<script
type="text/JavaScript" language=JavaScript>
document.write('JavaScript dentro de la parte body');
</script>
<br />Texto final
</body>
</html>
2.2. JavaScript en los eventos
Los eventos son acciones que realiza el usuario. JavaScript atrapa determinadas acciones realizadas en
una pgina web y realiza acciones como respuesta, de esta manera se pueden realizar programas
interactivos, ya que controlamos los movimientos del usuario y respondemos a ellos. Existen muchos
eventos distintos, por ejemplo, pulsar un botn del ratn, moverlo o seleccionar texto en una pgina. El
cdigo JavaScript asociado a un evento se indica dentro la etiqueta HTML del elemento sobre el que se
desea detectar el evento; concretamente dentro de un atributo llamando manejador de eventos. En este
ejemplo, onClick se dispara cada vez que el usuario pulsa el botn. Una vez que se dispara, se ejecuta el
cdigo que aparece a su derecha entre comillas, despus del smbolo "=".
EJEMPLO 2
<html>
<head>
<title>Eventos</title>
</head>
<body>
<hr /><center>
Esto sera una pgina con informacin y un formulario
Cada vez que se pulse el botn, se ejecuta la instruccin de JavaScript
<hr />
Pgina 3/53
Aplicaciones Web
<form name='datos' action=''>

<input type='button' value='Pulsa'
onClick="alert('Bienvenido al primer ejemplo')">
</form>
<hr /></center>
</body>
</html>
OJO CON LAS COMILLAS: las comillas que se utilizan en JavaScript son, indistintamente la y la . Si
hay que anidarlas en una misma instruccin, se alternan como se ha visto en el ejemplo.
2.3. JavaScript en los enlaces

Al igual que se puede asociar cdigo a un evento, tambin se puede asociar cdigo JavaScript a un
hipervnculo, de tal manera que se ejecute al pulsar sobre el texto del enlace en vez de llevarnos a un URL.
EJEMPLO 3
<html>
<head>
<title>Enlaces</title>
</head>
<body>
<hr /><center>
Esto sera una pgina con informacin y un enlace
Cada vez que se pulse el enlace, se ejecuta la instruccin de
JavaScript<hr />
<a href="JavaScript:alert('Ha pulsado el enlace')">Pulse aqu</a>
<hr /></center>
</body>
</html>
2.4. JavaScript en ficheros externos
La idea principal reside en la creacin de ficheros que contienen a modo de "librera", el cdigo que se
debe ejecutar en ms de un documento web. De esta manera, la modificacin de parte de este cdigo
solamente requiere la edicin de un documento (aquel en el que reside la "librera"). La incorporacin se
realiza usando la etiqueta <script>, aprovechando la existencia del atributo src, que le indica al intrprete
de JavaScript cul es la URL del fichero que se desea incorporar al documento actual. Es habitual que los
ficheros que contienen cdigo JavaScript tengan la extensin .js. El fichero debe contener,
exclusivamente, cdigo JavaScript. No debe contener ninguna etiqueta HTML; ni siquiera <SCRIPT>.
EJEMPLO 4
<html>
<head>
<title>Librerias</title>
</head>
<body>
<script type="text/JavaScript" language='JavaScript' src='funciones_externas.js'>
</script>
Aqu vendra informacin HTML

</body>
</html>
Pgina 4/53
Aplicaciones Web
3. COMENTARIOS
Un comentario es una parte del cdigo que no es interpretada por el navegador y que ayuda al programador
o a otro personal a entender lo que se est haciendo en el programa.
Comentarios de una lnea: // Aqu va el texto del comentario
Comentarios de varias lneas: /* Esto es un comentario que puede
ocupar varias lneas */
4. JAVASCRIPT EN NAVEGADORES ANTIGUOS

Los navegadores antiguos no incluyen el intrprete de JavaScript; para evitar que se muestre el cdigo
JavaScript en la pgina web, se pone el cdigo entre comentarios html:
<script language=JavaScript>

</script>
Esto adems es conveniente hacerlo siempre porque en los navegadores actuales puede estar deshabilitada
la opcin de interpretar JavaScript (ejemplo: Internet Explorer: Herramientas-Opciones de Internet
Seguridad Nivel personalizado automatizacin de: subprogramas de Java, operaciones de pegado,
secuencias de comandos ActiveX).
El cierre del comentario HTML va precedido del smbolo de comentarios de JavaScript, para evitar que el
navegador lo interprete como cdigo JavaScript y de un error, ya que no se deben usar etiquetas HTML
dentro del cdigo JavaScript.
5. CONSIDERACIONES SOBRE JAVASCRIPT
Se diferencia entre maysculas y minsculas (hola es distinto a Hola).

Los espacios no cuentan.
Cada instruccin debe terminar con el carcter ; o con un salto de lnea. Es recomendable utilizar
siempre el ; .
Se pueden escribir varias instrucciones por lnea. Esto no es recomendable porque dificulta la
lectura del cdigo.
Las cadenas de caracteres van entre comillas simples o dobles.
JavaScript se ejecuta de forma secuencial, de forma que, hasta que no se termina de interpretar
el cdigo, no se contina con el cdigo HTML.
Para mostrar por pantalla caracteres especiales, como las comillas, se utiliza el carcter de escape
\. En relacin a esto, las siguientes lneas seran equivalentes:
Esta informacin se escribe con el mtodo \write\
Esta informacin se escribe con el mtodo write
Esta informacin se escribe con el mtodo write
Pgina 5/53
Aplicaciones Web
6. MTODO WRITE
document.write( ) es un mtodo del objeto document que permite escribir cdigo html dentro del
documento actual.
EJEMPLO 5
<html>
<head>
<title>Primer ejemplo JS</title>
</head>
<body>
Texto inicial
<script language="JavaScript">
document.write('<hr /><b>JavaScript</b> dentro de la parte body');
</script>
<br />Texto final
</body>
</html>
La salida en el navegador es:
Texto inicial
JavaScript dentro de la parte body
Texto final
7. ALMACENAMIENTO DE DATOS
Una variable es un espacio en memoria donde se almacena un dato; un espacio donde podemos guardar
cualquier tipo de informacin que necesitemos para realizar las acciones de nuestros programas. Cada vez
que se utiliza el nombre de una variable, el navegador lo sustituye por su valor en ese momento.
JavaScript es un lenguaje no tipado, es decir, no es necesario declarar las variables indicando el tipo de
valores que van a contener, aunque s es conveniente declararlas para dar ms claridad al cdigo.
Simplemente, cuando se almacena en una variable un valor, el propio intrprete del navegador, la
crea y le asigna dicho valor.
La declaracin de las variables, aunque no es obligatoria, se hace al principio del script y se utiliza la
palabra reservada var. La declaracin de variables consiste en definir e informar al sistema de que se va a
utilizar una variable. Los nombres de las variables no pueden tener espacios blancos y deben comenzar por
una letra o un guin bajo, y los valores se asignan con el smbolo = . Tambin podemos declarar varias
variables en una sola lnea, separando las variables por comas. Cuando se le asigna un valor por primera vez
a una variable se denomina inicializar una variable.
variable="hola"; //inicializacin de variable
var cinco=5;
cuatro=4;
var nombre="Agustn", cadena=""; //declaracin mltiple
sumando1=23;
sumando2=33;
suma = sumando1 + sumando2;
El nombre de las variables debe ser significativo y hacer referencia a su uso o contenido.
Pgina 6/53
Aplicaciones Web
El mbito de una variable es el lugar donde est disponible. Por lo general, las variables que declaremos
en una pgina, estarn accesibles dentro de ella. En JavaScript no podremos acceder a variables que hayan
sido definidas en otra pgina. Segn su mbito, tenemos dos tipos de variables: locales y globales. Las
variables globales son visibles desde cualquier sitio del programa; las locales slo son visibles en el bloque
donde han sido declaradas.
Variables globales: son accesibles desde cualquier lugar de la pgina, es decir, desde el script
donde se han declarado y todos los dems scripts de la pgina.
<script>
variableGlobal;
</script>
Variables locales: son accesibles slo en una parte acotada del cdigo, y, fuera de este cdigo,
dejan de existir. Son mbitos locales cualquier lugar acotado por llaves. No hay problema en
declarar variables locales con el mismo nombre que otras globales, porque la que tiene validez es la
ltima que se declara (en este caso, la local); aunque es ms aconsejable no repetir nombres de
variables dentro de una misma pgina. Es necesario que se utilice la declaracin explcita con var
para las variables locales, ya que, si no se utiliza, la variable ser global.
<script>
{
var variableLocal;
variableGlobal; // NO se ha declarado con var
}
</script>
Si no se declaran las variables explcitamente, se interpretarn como globales.
Los tipos bsicos de datos que una variable puede contener son:
Numricos: enteros o reales

o Enteros: decimal (2, -34), octal (02, -034), hexadecimal (0x2, -0x34)
o Reales: notacin decimal (3.11, -0.0011), notacin cientfica (311E-2, 11E-4)
Cadenas de caracteres: van entre comillas dobles o simples.

Hay una serie de caracteres especiales que sirven para expresar en una cadena de texto
determinados controles (salto de lnea, tabulador, ); estos caracteres se llaman caracteres de
escape, y se escriben siempre con la barra invertida:
o
o
o
o
o
o
o
o
\b espacio hacia atrs

\n nueva lnea
\t - tabulacin
\ comilla simple
\r retorno de carro
\f - avance de pgina
\\ - barra de escape
\ comilla doble
Pgina 7/53
Aplicaciones Web
Booleanos: Hay dos valores booleanos: true y false (verdadero y falso). Los booleanos se utilizan
para tomar decisiones, en sentencias de control como la siguiente:
if ( numero > 18 ) {
// hacer algo
}
Objetos: referencias a un objeto.
UNDEFINED vs NULL
Existe cierta confusin entre estos valores. La clave para entender la diferencia radica en la
nocin de existencia. Si una variable es:
undefined: para JavaScript, no existe. O bien no ha sido declarada o jams se le asign
un valor.
null: para JavaScript, la variable existe. En algn momento, explcitamente, la variable se
estableci a null. null significa nulo. null es un valor, es decir, no es lo mismo que vaco.
Se trata de un valor que se puede asignar a una variable cuando queremos indicar que una
variable no tiene un valor en concreto.
As que, a la hora de usar uno u otro debemos ver si estamos preguntando por la existencia de una
variable. Si es el caso, usaremos undefined. En caso de que preguntemos por si la variable contiene
un valor seguro o no, como ocurrira en Java, C++ o C# usaremos null.
undefined == null // es true debido a la conversin de tipos
undefined === null // false
EJEMPLO 6
<html>
<head>
<title>Variables sin valor</title>
</head>
<body>
<script type="text/JavaScript" language='JavaScript'>
var Edad;
switch (Edad) {
case undefined:
document.write ("Undefined. La edad no tiene valor inicial.
Edad=" + Edad + "<br/>");
break;
case null:
document.write ("La edad contiene el valor null.
Edad=" + Edad + "<br/>");
break;
default:
document.write ("El valor de Edad es: " + Edad + "<br/>");
}
</script>
</body>
</html>
Debido a que, como ya hemos dicho, JavaScript
contener valores de distinto tipo:
A=2;
//variable
//variable
A="dos";
A=true;
//variable
no es un lenguaje tipado, una misma variable puede

numrica
cadena
booleana
Pgina 8/53
Aplicaciones Web
LA FUNCIN typeof
Devuelve una cadena que describe el tipo de operando: boolean, number, string o object.
Sintaxis: typeof (valor)
EJEMPLO 7
<html>
<head>
<title>Uso del typeof</title>
</head>
<body>
var MiNombre;
var UnNumero=5, OtroNumero=10;
var continuar = true;
MiNombre="Ana";
document.write('El contenido de MiNombre es ' + MiNombre + ' y es de
tipo ' + typeof(MiNombre) + '<br />');
document.write('El contenido de UnNumero es ' + UnNumero + ' y es de
tipo ' + typeof(UnNumero) + '<br />');
document.write('El contenido de OtroNumero es ' + OtroNumero + ' y es
de tipo ' + typeof(OtroNumero) + '<br />');
document.write('El contenido de continuar es ' + continuar + ' y es de
tipo ' + typeof(continuar) + '<br />');
</script>
</body>
</html>
La salida que produce este cdigo es:
8. OPERADORES
Los operadores sirven para hacer los clculos y operaciones necesarios para llevar a cabo los
objetivos del programa.
OPERADOR
Operador
Aritmtico
+ - * /
%
++ -Operadores
de Relacin
==
===
DESCRIPCIN
Realizan operaciones matemticas simples.
Suma Resta Multiplicacin Divisin de nmeros
Resto de la divisin entera. Es tpico calcular si un n es par haciendo: num%2 == 0
Incremento (suma 1) / Decremento (resta 1) de una variable
Comparan dos valores devolviendo true o false en funcin de que se cumpla la
relacin indicada.
Igual que
Igual que en sentido estricto .
Los comparadores estrictos exigen no solo que los valores comparados sean iguales en
valor, sino tambin en tipo. Ejemplo:
cadena31 = "31";
numero31 = 31;
Pgina 9/53
Aplicaciones Web

test1 = (cadena31 == numero31); // true
test2 = (cadena31 === numero31); // false
alert("(" + cadena31 + " == " + numero31 + ") = " + test1);
alert("(" + cadena31 + " === " + numero31 + ") = " + test2);
!=
!==
> >=
< <=
Operadores
Lgicos
!
&&
||
Operadores
de Asignacin
=
+=
-=
*=
/=
%=
Operadores
de Cadenas
Distinto
Distinto en sentido estricto
Mayor - Mayor o igual
Menor - Menor o igual
Se aplican sobre operadores booleanos y sirven para tomar decisiones:
joven = (edad >= 18) && (edad <= 30); //se deben cumplir las dos condiciones
correcto = !(a < b) || (c == d);//se debe cumplir al menos una de las dos condiciones
Not : transforma true en false y viceversa
And : obliga a que se cumplan todas las condiciones para devolver true. Si hay alguna que
sea falsa, devuelve false.
Or : devuelve true si una de las condiciones es true. Si todas son falsas, devuelve false.
Sirven para asignar valores a las variables.
Asigna un valor a una variable
Asignacin con suma
x += y
Asignacin con resta
x -= y
Asignacin con producto
x *= y
Asignacin con divisin
x /= y
Asignacin con resto
x %= y
equivale
equivale
equivale
equivale
equivale
a
a
a
a
a
x
x
x
x
x
=x
=x
=x
=x
=x
+y
-y
*y
/y
%y
Operadores que se aplican sobre cadenas de caracteres.

Concatena cadenas de caracteres.
A=1+2
// Operador aritmtico suma. A contiene el valor 3
A=1+2 //A contiene el valor 12
FUNCIONES DE CONVERSIN DE TIPOS:

Al existir un operador que tiene dos funciones en funcin del tipo de los operandos (+ suma nmeros o
concatena cadenas), puede haber cierta confusin si utilizamos este operador con un dato numrico y otro
cadena. JavaScript, en este caso, entender que queremos concatenar y actuar como si los dos datos
fueran de tipo cadena. Existen funciones de conversin de tipos que nos pueden ayudar en estos casos:
parseInt (cadena, base) examina la cadena recibida y trata de convertirla en un nmero entero
en la base especificada como parmetro (decimal si no se indica). Devuelve el valor especial NaN
(Not a Number) si no puede obtener un nmero.
parseFloat (cadena) convierte la cadena que se le pasa en un real. Si no lo consigue, asigna el valor
especial NaN.
En JavaScript tambin existe la funcin isNaN(valor) que comprueba si el valor es NaN. Devuelve true si
el valor no es un nmero (Not a Number) y false cuando lo es. Esta funcin se suele utilizar en combinacin
con las anteriores para comprobar si la conversin ha funcionado correctamente:
x = parseInt(A3);
if ( isNaN(x) ) alert(la conversin ha fallado);
else alert(El nmero convertido es + x);
Pgina 10/53
Aplicaciones Web
LA FUNCIN EVAL
eval(cadena); devuelve el resultado de ejecutar el cdigo JavaScript contenido en la cadena.
x=5;
eval(document.write( + x + )); /* la funcin eval reconstruye
instruccin document.write y la ejecuta: document.write(x); */
la
eval("x=10;y=20;document.write(x*y)"); // escribe 200

document.write("<br />" + eval("2+2")); // escribe 4
EL ORDEN DE PRECEDENCIA DE LOS OPERADORES:
En principio, todos los operadores se evalan de izquierda a derecha, pero hay una serie de reglas llamadas
orden de precedencia que indican el orden en que se deben ejecutar determinados operadores. De menor
a mayor son las siguientes:
Asignacin = += -= *= /= %=
Condicional ?:
"o" lgica ||
"y" lgica &&
Igualdad == !=
Comparacin < <= > >=
Suma y Resta + Multiplicacin, Divisin y Mdulo * / %
Negacin, Incremento ! ~ ++ -Parntesis ( ) []
El orden de precedencia se puede alterar usando los parntesis.
9. INTERACCIN CON EL USUARIO

Existen tres funciones que permiten interaccionar con el usuario:
alert (texto); Aparece una ventana con un botn Aceptar.
EJEMPLO 8
<html>
<head><title>alert y prompt</title></head>
<body>
<script type='text/JavaScript' language='JavaScript'>
var Edad;
Edad = prompt ('Dame tu edad');
alert ('Tu edad es ' + Edad);
</script>
</body>
</html>
variable = confirm(texto); Aparece una ventana con dos botones (Aceptar y Cancelar). El botn
que se pulsa es el que se almacena en la variable (true o false respectivamente).
EJEMPLO 9
<html>
<head><title>confirm</title></head>
<body>
Pgina 11/53
Aplicaciones Web

var confirmacin;
confirmacion = confirm ("Mensaje de confirmacin");
alert (Has pulsado + confirmacion);
</script>
</body>
</html>
variable = prompt(texto,cadena que aparece por defecto); Aparece una ventana en la que se
pide un dato al usuario con dos botones (OK y Cancel). Si se pulsa OK el valor tecleado se almacena
en la variable.
EJEMPLO 10
<html>
<head><title>prompt</title></head>
<body>
var Edad;
Edad = prompt ('Dame tu edad');
alert ('Tu edad es ' + Edad);
</script>
</body>
</html>
Hay que observar que en la ventana que abre esta funcin como valor por defecto aparece
undefined. Si no queremos que le aparezca este valor al usuario, podemos evitarlo: prompt acepta
un segundo parmetro que ser la cadena que debe aparecer por defecto. Si el valor que le
pasamos a este segundo parmetro es una cadena vaca, conseguimos que no aparezca el indeseado
valor: prompt ('Dame tu edad', )
Pero qu ocurre si introducimos en la caja de texto un valor que no sea numrico?: esto no
provoca un error del programa pero s que es un error de funcionamiento. Para evitarlo podemos
ejecutar la funcin parseInt para convertir una cadena de caracteres en nmero.
10. ESTRUCTURAS DE CONTROL

Dentro de la programacin estructurada, tenemos 2 tipos distintos de instrucciones:
alternativas: if, switch. Sirven para tomar decisiones sobre las acciones a realizar en funcin del
estado de las variables.
repetitivas: for, while, do-while. Se utilizan para realizar ciertas acciones repetidamente.
Todas las palabras clave de las estructuras de control se escriben siempre en minsculas.
Pgina 12/53
Aplicaciones Web
10.1 LA INSTRUCCIN IF
if (condicin) {
Bloque 1;
}
else {
Bloque 2;
}
Esta instruccin evala una condicin: si es verdadera,

ejecuta las instrucciones del primer bloque, y si es falsa,
se ejecutan las instrucciones del bloque else (si se ha
incluido puesto que es opcional).
Si el bloque de instrucciones que se deben ejecutar est
compuesto por una nica instruccin, entonces las llaves
son optativas.
El contenido de cada uno de los bloques debe escribirse con un sangrado a la derecha, ya
que esto da ms claridad al cdigo, sobre todo, cuando varios programadores se
encarguen de trabajar con el mismo cdigo.
EJEMPLO 11
<html>
<head> <title>if</title> </head>
<body>
var Edad;
Edad = prompt ('Dame tu edad',"");
if ( Edad < 18 )
alert ('Eres muy joven');
else
alert ('Eres mayor de edad');
</script>
</body>
</html>
Hay una versin corta para la instruccin if que se usa mucho para comprobar pequeas condiciones:
variable = (condicion)? valor1 : valor2;
es equivalente a:
if (condicion)
variable = valor1;
else
variable = valor2;
Las instrucciones IF se pueden anidar, es decir, podemos colocar sentencias IF dentro de otras sentencias
IF, dentro de la parte IF o dentro de la parte ELSE.
EJEMPLO 12
<html>
<head> <title>if anidado</title> </head>
<body>
var numero1=23, numero2=63;
if (numero1==numero2)
document.write (Los dos nmeros son iguales);
else {
if (numero1 > numero2)
document.write (El primer nmero es mayor);
else
document.write (El segundo nmero es mayor);
}
</script>
Pgina 13/53
Aplicaciones Web
</body>
</html>
10.2 LA INSTRUCCIN SWITCH

La sentencia switch permite la ejecucin de un bloque de instrucciones en funcin del valor que tome una
variable. La sintaxis es:
switch (expresin)
{
case valor1:
Bloque de instrucciones resultado1;
break;
case valor2:
Bloque de instrucciones resultado 2;
break;
......
default:
Bloque de instrucciones por defecto;
}
La expresin se evala; si vale valor1 se ejecutan las sentencias del bloque1, si vale valor2 se ejecutan las
sentencias del bloque2, y as sucesivamente. En caso de que no coincida ninguno de los valores escritos se
ejecuta el bloque de instrucciones especificados en la clusula default si existe (es optativa). La sentencia
break sirve para que se ejecuten solo las instrucciones correspondientes a un nico valor del switch. Si no
se pone break, se ejecutaran todas las sentencias que existan hasta el final del switch.
Esta instruccin se utiliza normalmente para sustituir sentencias if anidadas, de tal manera que se mejora
la legibilidad del programa.
switch (dia_de_la_semana) {
case 1:
document.write("Es Lunes");
break;
case 2:
document.write("Es Martes");
break;
case 3:
document.write("Es Mircoles");
break;
case 4:
document.write("Es Jueves");
break;
case 5:
document.write("Es viernes");
break;
case 6:
case 7:
document.write("Es fin de semana");
break;
default:
document.write("Ese da no existe");
}
Notar que los valores 6 y 7 tienen el mismo bloque de instrucciones asociado; por eso y el valor es 6, al no
haber break; se contina la ejecucin y se ejecutan las instrucciones del valor 7.
Pgina 14/53
Aplicaciones Web
10.3 LA INSTRUCCIN FOR

Se utiliza para repetir una serie de instrucciones un nmero determinado de veces. Su sintaxis es:
for (inicializacin; condicin; actualizacin) {
Bloque de instrucciones;
}
El parntesis tiene 3 partes:
inicializacin: se ejecuta solamente la primera vez que se ejecuta el bucle, y se
utiliza para asignar el primer valor que va a tomar la variable que controla el bucle.
Condicin: se evaluar cada vez que se repite el bucle. Cuando la condicin no se
cumpla, dejar de dar vueltas el bucle.
Actualizacin: indica los cambios que queremos que se produzcan en la variable que
controla el bucle cada vez que se da una vuelta.
El funcionamiento de la instruccin es:
1.
Se evala la expresin inicializacin.
2.
Se evala la expresin condicin. Si el resultado de dicha evaluacin es falso, se

abandona el bucle sin ejecutar ninguna de las instrucciones del bloque.
3.
Si el resultado de la evaluacin anterior es verdadero, se ejecutan las

instrucciones del bloque.
4.
Se ejecuta la expresin actualizacin.
5.
Se vuelve al paso 2.
EJEMPLO 13
<html>
<head> <title>for</title> </head>
<body>
var x, indice;
x = prompt ('Introduce el nmero de vueltas: ', "0");
for ( indice=0; indice<x; indice++ )
document.write('Vuelta nmero ' + indice + '<br/>');
document.write('<hr />');
for ( indice=x; indice>0; indice-- )
document.write('Vuelta nmero ' + indice + '<br/>');
</script>
</body>
</html>
Un ejemplo de uso de un bucle for en una pgina web es el siguiente:
EJEMPLO 14
<html>
<head> <title>Ejemplo bucle FOR</title>
<body>
</head>
Pgina 15/53
Aplicaciones Web
<script>
var i;
for (i=1; i<=6; i++) {
document.write("<H" + i + ">Encabezado de nivel " + i + "</H" + i + ">");
}
</script>
</body>
</html>
El script escrito en negrita sera equivalente a escribir el siguiente cdigo HTML:
<h1>Encabezado de nivel 1</h1>
Y la salida que se produce sera:
10.4 LA INSTRUCCIN WHILE

Este bucle se utiliza cuando queremos repetir la ejecucin de unas sentencias un nmero indefinido de
veces, siempre que se cumpla una condicin.
while (condicin){
Bloque de instrucciones
}
El bucle se repite mientas la

condicin sea verdadera.
EJEMPLO 15
<html>
<head> <title>Ejemplo de while</title> </head>
<body>
var x, ndice, Edad;
x = prompt ('Introduce el nmero de vueltas: ', "0");
indice=0;
while ( indice < x ) {
document.write('Vuelta nmero ' + indice + '<br />');
indice++;
}
/* el siguiente bucle se repite hasta que se introduzca un
valor de edad */
Pgina 16/53
Aplicaciones Web
Edad = parseInt(prompt ('<br />Dame tu edad: ', '0'));

while ( (Edad == 0) || isNaN(Edad) )
alert('La edad introducida es: ' + Edad);
</script>
</body>
</html>
10.5 LA INSTRUCCIN DO-WHILE

Este bucle es una variacin del buce while. Se utiliza cuando no sabemos cuantas veces se tendr que
ejecutar el bucle, con la diferencia de que sabemos seguro que el contenido se va a ejecutar una vez. Este
bucle se introdujo en JavaScript 1.2, por lo que no todos los navegadores lo soportan. En cualquier caso,
todo lo que queramos hacer con do-while se puede hacer con while.
do {
Bloque de instrucciones
} while (condicin);
El bucle se repite mientas la

condicin sea verdadera. Este
tipo de bucles se ejecutan, al
menos, una vez.
EJEMPLO 16
<html>
<head> <title>Bucles while</title> </head>
<body>
var Edad;
/*el bucle se repite hasta que se introduzca un valor edad*/
do
while ( (Edad == 0) || isNaN(Edad) );
alert ('La edad que me has dado es: ' + Edad);
</script>
</body>
</html>
10.6 LA INSTRUCCIN BREAK

La instruccin BREAK se utiliza dentro de los bucles para forzar el fin de las
iteraciones, independientemente de que la condicin que controla el bucle siga
siendo verdadera. Significa detener la ejecucin del bucle y salir de l.
EJEMPLO 17
<html>
<head> <title>break</title> </head>
<body>
<center>
<script type="text/JavaScript" >
<!-var i;
for (i=0; i< 10; i++) {
Pgina 17/53
Aplicaciones Web
document.write ('iteracin: ' + i + '<br />');

if ( i == 3) break;
}
document.write ('Fin del bucle en la tercera iteracin');
//-->
</script>
</center>
</body>
</html>
10.7 LA INSTRUCCIN CONTINUE

La instruccin CONTINUE se utiliza dentro de los bucles para forzar la
vuelta al principio del bucle para ejecutar la siguiente iteracin sin que se
terminen de ejecutar las dems instrucciones del bucle. Significa detener la
ejecucin y volver al principio del cdigo del bucle.
EJEMPLO 18
<html>
<head> <title>continue</title> </head>
<body>
<center>
<script type="text/JavaScript">
<!-var i;
for (i=0; i< 5; i++) {
if (i == 2) continue;
/*el mensaje de la iteracin 2 no se mostrar*/
document.write ('iteracin: ' + i + '<br />');
}
document.write ('Se ha terminado el bucle');
//-->
</script>
</center>
</body>
</html>
10.8 BUCLES ANIDADOS

Anidar un bucle consiste en meter ese bucle dentro de otro. Un bucle anidado tiene una estructura
similar a la siguiente:
for (i=0; i<10; i++) {
for (j=0; j<10; j++) {
document.write (i + - + j);
}
}
En este ejemplo las llaves de apertura y cierre no haran falta, se han puesto por claridad. Su
funcionamiento es el siguiente: para cada valor de i, se ejecuta todo el bucle j. Su salida sera:
0-0
0-1
0-2
0-3
0-8
Pgina 18/53
Aplicaciones Web
0-9
1-0
1-1
1-8
1-9
9-9
10.9 LA INSTRUCCIN WITH

La sentencia with establece un objeto por defecto sobre el que van a actuar todas las sentencias que
aparezcan en su cuerpo. Se suele utilizar para abreviar las instrucciones que actan sobre determinados
objetos, ganando en claridad. La sintaxis es:
with (objeto){
Bloque de sentencias;
}
Como siempre, si el bloque est compuesto por una sola sentencia, las llaves son optativas.
Por ejemplo, para evitar indicar constantemente el objeto (document) en cada una de las sentencias write
podramos escribir:
with (document) {
write ('Esto es una primera lnea <br />');
write ('Esto es una segunda lnea <br />');
write ('Esto es una tercera lnea <br />');
}
11. ARRAYS
Podemos comparar un array con una cajonera. En cada cajn de la cajonera podemos meter algo. Despus
podemos recuperarlo accediendo al cajn preciso. Observa el siguiente cdigo:
var producto = new Array( );
producto[0] = "Camisetas";
producto[1] = "Pantalones";
producto[2] = "Camisas";
producto[3] = "Zapatos";
El cdigo anterior podra pertenecer a una pgina de venta de ropa. El mismo cdigo se puede escribir del
siguiente modo:
var producto = ["Camisetas","Pantalones","Camisas","Zapatos"];
El array anterior (producto), tiene una sola dimensin. De modo que para acceder a una posicin, podemos
escribir algo como
producto[i], donde "i" es un nmero menor que 4. Por ejemplo:
var producto = ["Camisetas","Pantalones","Camisas","Zapatos"];

for (var i=0;i<4;i++) alert(producto[i]);
Pgina 19/53
Aplicaciones Web
Tambin es posible crear arrays de varias dimensiones (matrices). Por ejemplo, observa el siguiente
cdigo, que utiliza un array de dos dimensiones:
var pdi = [[33,57],[92,88],[266,420],[2216,970]];
for (var i=0;i<4;i++) {
alert("Coordenadas del punto " + i + " son: (" + pdi[i][0] + "," + pdi[i][1] + ")");
}
OPERADOR in
Podemos usar este operador especial para recorrer el contenido de un ndice. Por ejemplo:
var arr = [1,2,3,4,5,6];
for(var i in arr)
document.write(El valor de arr['+i+'] = + arr[i]);
El operador in hace que la variable i tome el valor de los ndices del array.
12. FUNCIONES
Una funcin es un trozo de cdigo que permite desarrollar una tarea concreta y bien definida, que se
encuentra separado del resto de instrucciones del programa y al que se le ha dado un nombre para que,
posteriormente, pueda ser referenciado. A travs del nombre se pueden ejecutar las instrucciones
contenidas en l tantas veces como sea necesario.
El uso de funciones evita la repeticin de cdigo innecesario y da mayor legibilidad al cdigo.
La sintaxis general para la declaracin de una funcin es:
function nombre_funcin (parmetros){
Instrucciones de la funcin;
}
Para ejecutar una funcin utilizamos su nombre con los parntesis.
El uso de funciones es generalizado, se utilizan constantemente. De hecho, muchas estn ya definidas en el
sistema (por ejemplo, eval, parseInt, isNaN, ).
EJEMPLO 19
<html>
<head> <title>funciones</title> </head>
<body>
<!-function Tabladel3( ){
//declaracin de la funcin
with (document)
{
write ('<table border=1>');
write ('<tr>');
for (i=0; i < 10; i ++)
write ('<td> 3*'+i+'='+3*i+'<\/td>');
write ('<\/tr>');
write ('<\/table>');
/* podemos encontrar el carcter \ para evitar que los
navegadores antiguos se confundan con /t */
Pgina 20/53
Aplicaciones Web
}
}
Tabladel3( );
//-->
</script>
</body>
</html>
// llamada y ejecucin de la funcin
En principio, podemos colocar las funciones en cualquier parte de la pgina, siempre entre las etiquetas
SCRIPT. No obstante existe una limitacin a la hora de colocarlas con relacin a los lugares desde donde
se llame. Tenemos dos opciones:
Colocar la funcin en el mismo bloque de script desde el que se la va a llamar. En este caso no
importa colocar la declaracin despus de la llamada, aunque no es recomendable.
Colocar la funcin en otro bloque de script. En este caso es obligatorio que el SCRIPT en el que
se declara la funcin est antes que el SCRIPT en el que se llama a la funcin. En otro caso, dara
error.
Lo ms recomendable es declarar todas las funciones de la pgina en la parte HEAD, para, despus, hacer
las llamadas correspondientes desde la parte BODY.
Las funciones, al ejecutarse, pueden devolver valores con la sentencia return que, a su vez, pueden ser
asignados a variables. De hecho sta es la gran utilidad de las funciones.
EJEMPLO 20
<html>
<head> <title>funciones</title> </head>
<body>
<script type="text/JavaScript" language="JavaScript">
<!-function Mifuncion( ) {
var devolver = prompt("Escribe algo","");
return devolver;
}
var escrito = Mifuncion( );
document.write(escrito);
//-->
</script>
</body>
</html>
Las funciones slo pueden devolver un valor, aunque en su cuerpo puede haber colocados varios return. Una
vez que se ejecuta un return, la funcin termina su ejecucin, aunque tenga ms cdigo debajo.
function multipleReturn( ) {
numero=8;
if ((numero % 2) == 0) return 0;
else return 1;
document.write (este mensaje no se vera nunca);
}
La funcin anterior sera equivalente a la siguiente. Sabras explicar porqu?
function multipleReturn( ) {
numero=8;
Pgina 21/53
Aplicaciones Web
if ((numero % 2) == 0) return 0;
return 1;
document.write (este mensaje no se vera nunca);
}
Las funciones, adems de salida, tambin pueden tener entrada de datos mediante el paso de
parmetros. Los parmetros se utilizan para enviar datos a las funciones. Por ejemplo, una funcin que
suma dos nmeros tendra estos dos nmeros como parmetros de entrada y la suma sera el valor de
salida de la funcin. Los parmetros hay que declararlos en la cabecera de la funcin y, por supuesto, sta
debe ser invocada con el nmero correcto de parmetros que se han declarado. Los parmetros pueden ser
de cualquier tipo de datos.
Los parmetros pueden ser comparados con variables a los que se les asigna un determinado valor en el
momento de la llamada a la funcin.
EJEMPLO 21
<html>
<head>
<title>funciones</title>
<!-function escribirBienvenida(nombre){
document.write ("<h1>Hola " + nombre + "<\/h1>");
}
//-->
</script>
</head>
<body>
<!-escribirBienvenida("Juan Garca");
//-->
</script>
</body>
</html>
Una funcin puede recibir todos los parmetros que consideremos necesario, y debemos tener cuidado en
poner los valores de estos parmetros en el orden correcto a la hora de llamar a la funcin para que los
trate correctamente.
EJEMPLO 22
<html>
<head> <title>funciones</title>
<!-function escribirBienvenida(nombre, color){
document.write ('<font color="' + color + '">');
document.write ("<h1>Hola " + nombre + "</h1>");
document.write ("</font>");
}
//-->
</script>
</head>
<body>

</script>
</body>
</html>
Garca
Garca
Garca
Garca
en
en
en
en
rojo", "#FF0000");
verde", "#00FF00");
azul", "#0000FF");
amarillo", "yellow");
En JavaScript los parmetros se pasan por valor; es decir, a la funcin se pasan slo los valores, no las
variables. Esto significa que cualquier modificacin que haga la funcin sobre los parmetros de entrada no
tendr efecto fuera de la funcin.
Las variables declaradas con var dentro de las funciones son siempre locales a stas, lo que quiere
decir que no se tendr acceso a sus valores desde fuera de dichas funciones. Si dentro de una funcin se
declaran variables sin var o se usan sin declararlas explicitamente, sern variables globales y vivirn
fuera de la funcin.
EJEMPLO 23
<html>
<head>
<title>funciones</title>
<!-function pasoPorValor(parametro){
parametro=35;
document.write ('Dentro de la funcin, el valor del
parmetro es '+ parametro + '<br />');
}
//-->
</script>
</head>
<body>
<!-var variable=5;
document.write ('El valor de la variable antes de la
funcin es '+ variable + '<br />');
pasoPorValor(variable);
document.write ('El valor de la variable despus de la
funcin es '+ variable + '<br />');
//-->
</script>
</body>
</html>
La salida es:
Pgina 23/53
Aplicaciones Web
EJEMPLO 24
<html>
<head> <title>funciones</title>
<body>
<!-varglobal1 = 5;
varglobal2 = 8;
</head>
function MuestraContenido(parametro){
var varlocal1 = 3;
document.write('Dentro de funcin, parametro es '+ parametro + '<br />');
document.write('Dentro de funcin, varglobal2 es '+ varglobal2 + '<br />');
document.write('Dentro de funcin, varlocal1 es '+ varlocal1 + '<br />');
}
function Suma(parametro){
var varlocal1 = 2;
document.write('Dentro de funcin,
parametro = parametro + varlocal1;
}
document.write('Fuera de la
document.write('Fuera de la
// La siguiente instruccin
// document.write('Fuera de
parametro es '+ parametro + '<br />');

parametro ahora es '+parametro+'<br />');
varglobal2 es '+ varglobal2 + '<br />');
varlocal1 es '+ varlocal1 + '<br />');
funcin, varglobal1 es '+ varglobal1 + '<br />');

funcin, varglobal2 es '+ varglobal2 + '<br />');
est comentada porque aqu no existe varlocal1
la funcin, varlocal1 es '+ varlocal1 + '<br />');
MuestraContenido(varglobal1);
Suma(varglobal1);
document.write('Fuera de la funcin, varglobal1 es '+ varglobal1 + '<br />');
//-->
</script>
</body>
</html>
La salida es:
Pgina 24/53
Aplicaciones Web
13. OBJETOS EN JAVASCRIPT

JavaScript no es un lenguaje orientado a objetos, aunque los utiliza en muchas ocasiones: podemos crear
nuevos objetos y utilizar muchos que estn creados desde un principio sin cambiar la manera de programar
que hemos aprendido hasta ahora.
Los objetos no tienen tipo asociado, sino que pertenecen a una clase ya existente en el lenguaje. En
JavaScript tenemos las siguientes clases:
String. Para trabajar con cadenas de caracteres.

Date. Para el trabajo con fechas.
Math. Para realizar funciones matemticas
Number. Para realizar algunas operaciones avanzadas con nmeros.
Boolean. Trabajo con booleanos.
Las clases se escriben siempre con la primera letra en maysculas y las dems en minscula.
Para crear un objeto de una clase, utilizamos la instruccin new. Por ejemplo, para crear un objeto String,
utilizaremos la siguiente instruccin:
var miObjeto = new String( );
Los objetos tienen asociadas propiedades y mtodos. Las propiedades son caractersticas del objeto, y
los mtodos son funciones asociadas a una clase determinada que reciben valores y devuelven un valor.
Para acceder a ellos, utilizamos el nombre del objeto creado seguido de un punto y el nombre de la
propiedad o mtodo.
miObjeto.length; longitud de la cadena de caracteres miObjeto
miObjeto.charAt(0); mtodo que devuelve el carcter que est en la primera posicin de miObjeto
14. LA CLASE STRING

La existencia de objetos de tipo String se debe a la necesidad de proporcionar herramientas con las que
tratar las cadenas de caracteres. Las sentencias de abajo son completamente equivalentes:
var a = 'hola';
var a = new String('hola');
La nica propiedad que encontramos en esta clase es length, la cual almacena el total de caracteres que
contiene la cadena. Podemos averiguar el total de caracteres que hay en una variable u objeto String con la
instruccin:
a.length
EJEMPLO 25
<html>
<head> <title>Objeto String </title>
function dime_tamano_cadena(cadena) {
alert('el total de caracteres de: "' + cadena + '" es: ' + cadena.length);
}
</script>
</head>
<body>
Pgina 25/53
Aplicaciones Web
var a = new String( );

a = prompt("introduce una cadena de caracteres");
dime_tamano_cadena(a);
</script>
</body>
</html>
Los mtodos del objeto String NUNCA modifican el contenido del objeto, esto es, la cadena de
caracteres. Su cometido es devolver la cadena resultante de la transformacin u operacin realizada.
Los mtodos del objeto String para el tratamiento de cadenas son:
charAt(indice) Devuelve el carcter que hay en la posicin indicada por 'indice'. Las posiciones de
un string empiezan en 0
charCodeAt(indice) Devuelve la posicin que ocupa el carcter indicado en 'indice' en la tabla de

codificacin ISO-Latin-1
concat(cadena) Devuelve la concatenacin de la cadena almacenada en la variable ms las que estn

como parmetro en el mtodo.
indexOf(patron,desde) Devuelve la posicin en la que aparece por primera vez el parmetro

'patron'. Si no se encuentra devuelve -1. El segundo parmetro es opcional, si se usa sirve para
indicar a partir de qu posicin empieza la bsqueda.
lastIndexOf(caracter,desde) Igual al mtodo indexOf( ) pero en este caso la bsqueda empieza

desde el final.
replace(patron, nuevoStr) Devuelve la cadena resultante de sustituir la cadena 'patron' por

'nuevoStr'. Acepta expresiones Regulares. El patrn suele ir entre los caracteres '/' y se pueden
poner comandos como 'i': ignora maysculas y minsculas, 'g': sustituye todas las ocurrencias de
patrn, etc.
slice(ini, fin) Devuelve la subcadena que hay entre las posiciones ini y fin-1
split(separador) Devuelve un array de subcadenas. El parmetro 'separador' se utiliza como

carcter delimitador de subcadenas.
substr(ini, cuantos) Devuelve una subcadena de 'cuantos' caracteres (a partir del carcter que
est en la posicin 'ini')
substring(ini,fin) Devuelve la subcadena que est entre las posiciones ini y fin-1
toLowerCase( ) Devuelve los caracteres de la cadena en minsculas.
toString( ) Este mtodo lo tienen todos los objetos y se usa para convertirlos en cadenas.
toUpperCase( ) Devuelve los caracteres de la cadena en maysculas.
Los mtodos menos tiles del objeto String relacionados con las etiquetas HTML son:
anchor(el_ancla) Convierte la cadena en un ancla. Equivale a <a name='el_ancla'> cadena
big( ) aumenta el tamao de la letra del string. Equivale a usar <big> cadena </big>.
bold( ) Devuelve la cadena en negrita. Equivale a <b> cadena </b>.
fixed( ) Devuelve la cadena en fuente monoespaciada. Equivale a <tt> cadena </tt>.
fontcolor(color) Devuelve la cadena en el color 'color'. Equivale a <font color=color> cadena
Pgina 26/53
Aplicaciones Web
fontSize(tamao) Pone la fuente al tamao indicado. Como si utilizsemos la etiqueta <font> con el
atributo size.
italics( ) Devuelve la cadena en cursiva. Equivale a la etiqueta <i> cadena </i>.
link(el_url) Transforma la cadena en un enlace. Equivale a <a href='el_url'>cadena
small( ) Disminuye el tamao de la letra de la cadena. Equivale a usar <small> cadena </small>.
strike( ) Tacha la cadena. Equivale a usar <strike> cadena </strike>.
sub( ) Equivale a utilizar <sub> cadena </sub>.
sup( ) Equivale a utilizar <sup> cadena </sup>.
EJEMPLO 26: (ejemplos de uso de los mtodos de String)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <title>Ejemplo 20</title> </head>
<body>
var txt="Hola Mundo!";
document.write("<p>Big: " + txt.big( ) + "<\/p>")
document.write("<p>Small: " + txt.small( ) + "<\/p>")
document.write("<p>Bold: " + txt.bold( ) + "<\/p>")
document.write("<p>Italic: " + txt.italics( ) + "<\/p>")
document.write("<p>Blink: " + txt.blink( ) + " (No funciona en IE)<\/p>")
document.write("<p>Fixed: " + txt.fixed( ) + "<\/p>")
document.write("<p>Strike: " + txt.strike( ) + "<\/p>")
document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "<\/p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "<\/p>")
document.write("<p>Lowercase: " + txt.toLowerCase( ) + "<\/p>")
document.write("<p>Uppercase: " + txt.toUpperCase( ) + "<\/p>")
document.write("<p>Subscript: " + txt.sub( ) + "<\/p>")
document.write("<p>Superscript: " + txt.sup( ) + "<\/p>")
document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "<\/p>")
</script>
</body>
</html>
EJEMPLO 27: partir una cadena por la mitad y mostrar el resultado

<html>
<head> <title>Ejemplo de cadenas</title> </head>
<body>
var miString = "0123456789";
var mitad1, mitad2, posicion_mitad;
document.write ('La longitud es: ' + miString.length + '<br/>');
posicion_mitad = miString.length / 2;
mitad1 = miString.substring( 0, posicion_mitad );
mitad2 = miString.substring( posicion_mitad, miString.length );
document.write(mitad1 + "<br />" + mitad2)
</script>
</body>
</html>
Pgina 27/53
Aplicaciones Web
15. LA CLASE MATH

La clase Math es la que proporciona la utilidad de hacer operaciones matemticas (operadores aritmticos
bsicos). Aunque la clase Math tiene algunos operadores ms potentes. Para trabajar con la clase Math no
hay que crear objetos con new, sino que se trabaja directamente con la clase.
Dentro de las propiedades de la clase Math se encuentra la propiedad Math.PI, que contiene el nmero pi.
El resto de propiedades se refiere a logaritmos y races cuadradas.
Dentro de los mtodos de la clase Math vamos a destacar:
abs(x) Devuelve el valor absoluto de un nmero. El valor despus de quitarle el signo.
ceil(x) Devuelve el entero igual o inmediatamente siguiente de un nmero. Por ejemplo, ceil(3)
vale 3, ceil(3.4) es 4.
floor(x) Lo contrario de ceil( ), pues devuelve un nmero igual o inmediatamente inferior.
max(x,y) Retorna el mayor de 2 nmeros.
min(x,y) Retorna el menor de 2 nmeros.
pow(b,e) Recibe dos nmeros como parmetros y devuelve el primer nmero elevado al segundo
nmero.
random( ) Devuelve un nmero aleatorio entre 0 y 1. Mtodo creado a partir de JavaScript 1.1.
round(x) Redondea al entero ms prximo.
sqrt(x) Retorna la raz cuadrada de un nmero.
El uso de estas funciones es muy sencillo. Por ejemplo, para generar un nmero aleatorio, utilizamos
var aleatorio = Math.random( );
16. ERRORES COMUNES Y CONSEJOS DE PROGRAMACIN

Los tpicos errores comunes que se comenten al programar en JavaScript son:
Utilizar = en expresiones condicionales en lugar de ==
No conocer la precedencia de operadores y no utilizar parntesis para agrupar operaciones a
realizar.
Usar las comillas simples y dobles errneamente: dentro de las comillas dobles se deben utilizar
comillas simples y viceversa.
Olvidarse de cerrar una llave o cerrar una llave de ms.
Colocar varias sentencias en una misma lnea sin separarlas por punto y coma.
Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas. Si
no se declaran las variables, se interpretarn como globales.
Contar las posiciones de un vector o cadena desde el 1 en lugar de comenzar en 0.
La depuracin de errores en JavaScript no es una tarea fcil. JavaScript nos informar de errores de
sintaxis o de aquellos que tienen lugar en el momento de la ejecucin al escribir mal los nombres de
variables o funciones. Para otro tipo de errores no disponemos de herramientas potentes de depuracin,
sino que tendremos que aplicar una tcnica rudimentaria que consiste en utilizar alert( ) en puntos
estratgicos del programa para controlar los valores que van tomando las variables.
Pgina 28/53
Aplicaciones Web
Algunos consejos que se deberan seguir a la hora de crear cdigo JavaScript son:
Las funciones deben ser razonablemente pequeas, para, as, poder reutilizarlas con facilidad.
Utilizar nombres de variables y funciones que representen su contenido.
Comentar el cdigo.
Utilizar sangrados para colocar los distintos bloques de cdigo dentro del programa.
17. D.O.M. (Modelo de Objetos del Documento)

En palabras del propio W3C: "El DOM es una interfaz neutral desde el punto de vista de la plataforma y el
lenguaje de programacin que permitir a los programas y los scripts acceder y actualizar
dinmicamente el contenido, la estructura y el estilo de los documentos. El documento adems puede
ser procesado y el resultado del mismo puede ser incorporado en la misma pgina."
Ms concretamente, el DOM consiste en un conjunto de objetos predefinidos que estn estructurados de
manera jerrquica. Contiene el nombre genrico de cada uno de sus objetos, sus propiedades iniciales y los
mtodos con los que podremos manipularlos. En la siguiente imagen podemos ver una representacin del
DOM:
Cuando se carga una pgina, el navegador crea una jerarqua de objetos en memoria que sirven para
controlar los distintos elementos de dicha pgina. Cualquier elemento de una pgina se puede controlar de
una manera u otra accediendo a esa jerarqua. Por eso es muy importante conocer bien esta jerarqua para
controlar perfectamente las pginas web.
Por el hecho de cargar una pgina en el navegador (contenga lo que contenga), JavaScript ya tiene
predefinidos la siguiente lista de objetos:
window: es el objeto ms alto en la jerarqua de objetos. Contiene las propiedades y mtodos que
se aplican a la ventana entera. A travs de este objeto podemos controlar el aspecto de la ventana,
la barra de estado, abrir ventanas secundarias, Adems, este objeto da acceso a otros objetos
como el documento (la pgina web que estamos visualizando), el historial de pginas web visitadas o
Pgina 29/53
Aplicaciones Web
los distintos frames de la ventana. De modo que para acceder a cualquier otro objeto de la
jerarqua, deberamos empezar por el objeto window. Por este motivo, JavaScript entiende que
todos los objetos comienzan en este objeto aunque no lo indiquemos. Por ejemplo, las siguientes
instrucciones son equivalentes: document.write( ); window.document.write( );.
o
location: contiene las propiedades del URL actual (protocolo, servidor, puerto, etc).
history: en este objeto se almacenan los distintos enlaces que se han visitado (solamente
para la sesin actual, no es un histrico del tipo 'desde que instal el navegador').
document: contiene todas las propiedades del contenido de la pgina que se est
visualizando (color de fondo, imgenes, ttulo, formularios, etc).
navigator: aqu estn las propiedades del navegador.
screen: en este objeto se almacenan las propiedades del monitor del usuario (resolucin, colores).
Es decir, los elementos HTML definidos en el documento HTML sern accesibles desde JavaScript en
forma de objetos. As, todos los elementos tales como imgenes, elementos de formulario, tablas,
prrafos, etc, son objetos DOM. Slo hay que identificar a cada elemento, esto es, darle un nombre, para
poder acceder directamente a ellos y manipularlos desde JavaScript.
<html> ... </html>

<a name="..."> ... </a>
<form> ... </form>
<input type="checkbox">
<input type="text">
<input type="submit">
<img src="...">
<frame>
* window
+ history
+ location
+ document
- anchor
-->
- form
. checkbox
. text
. submit
- image
+ frame
* navigator
* screen
EJEMPLO 28 (probar el siguiente ejemplo en Firefox y en IExplorer)

Con este ejemplo accedemos al objeto navigator que es un vector en el que se almacenan todas las
caractersticas del navegador actual. El bucle for recorre este vector y muestra todas estas
caractersticas, cada una en una lnea de la pgina. Posteriormente se hace igual con el objeto document.
<html>
<head> <title>dom</title>
if (typeof(navigator) == 'object') {
document.write('<h3>Propiedades del objeto navigator:<\/h3>');
for (i in navigator)
document.write(i + '=' + navigator[i] + '<br />');
}
document.write('<hr />');
if (typeof(window.document) == 'object') {
document.write('<h3>Propiedades del objeto document:<\/h3>');
for (i in window.document)
document.write(i + '=' + window.document[i] + '<br />');
}
</script>
</head>
<body></body>
</html>
Pgina 30/53
Aplicaciones Web
As, por ejemplo, si tenemos una imagen en un documento tal que:

<img src='imagen.gif' name='una_imagen'>
Atravesando el rbol de objetos podremos llegar hasta el objeto imagen identificado va una_imagen:
window.document.una_imagen;
y, dado que cualquier objeto imagen tiene la propiedad src, podemos cambiar el fichero grfico que se est
visualizando en ella con la instruccin:
window.document.una_imagen.src='otra_imagen.gif';
Ya hemos visto que en el DOM, todos los objetos dependen jerrquicamente del objeto Windows y se toma
por defecto. Por lo tanto, en JavaScript puede omitirse. De esta manera, de manera habitual usaremos:
document.bgColor
document.lastModifed
document.write( )
En la siguiente tabla, a modo de resumen, se pueden ver algunos ejemplos de etiquetas HTML, de qu
objeto dependen en JavaScript y algunas de las propiedades y mtodos de estos objetos:
Elemento HTML
<html>
Objeto JavaScript
document
Propiedades
document.bgColor
document.lastModifed
Mtodos
document.open(
document.write(
document.close( )
--
<img src='fich.gif'
name='una_img'
border='1'
width='50'>
<form name='mi_f'
method='get'
action='cgi.php'>
</form>
<form name='f2'>
<input type='text'
name='caja'> </form>
document.una_img
document.una_img.src
document.una_img.border
document.una_img.width
document.mi_f
document.mi_f.method
document.mi_f.action
document.mi_f.submit(
document.mi_f.reset( )
document.f2.caja
document.f2.caja.value
document.f2.caja.size
document.f2.caja.focus(
)
document.f2.caja.select(
)
)
)
El DOM permite acceder y manipular elementos de un documento pero, por s mismo no es interactivo. Para
ello, debemos conocer los eventos que pudieran influenciar a un objeto, asignarles el manejador del evento
y definir las acciones a ejecutar ante la ocurrencia de esos eventos.
EJEMPLO 29 (ejemplo de eventos)
<html>
<head> <title>setinterval</title>
function incrementa( ) {
document.toro.width=100;
}
function retorna( ) {
document.toro.width=70;
}
</script>
</head>
<body>
<img src='imagenes/toro.gif' name='toro' width='70'
onmouseover='incrementa( )' onmouseout='retorna( )'>
</body>
</html>
18. PROPIEDADES Y MTODOS DEL OBJETO WINDOW
Pgina 31/53
Aplicaciones Web
A continuacin podemos ver las propiedades del objeto window. Hay algunas muy tiles y otras que lo son
menos:
defaultStatus Texto que se escribe por defecto en la barra de estado del navegador.
document Objeto que contiene la pgina web que se est mostrando.
history Objeto historial de pginas visitadas.
innerHeight Tamao en pxeles del espacio donde se visualiza la pgina, en vertical. (JavaScript
1.2)
innerWidth Tamao en pxeles del espacio donde se visualiza la pgina, en horizontal. (JavaScript
1.2)
length Nmero de frames de la ventana.
location La URL del documento que se est visualizando. Podemos cambiar el valor de esta
propiedad para movernos a otra pgina.
locationbar Objeto barra de direcciones de la ventana. (JavaScript 1.2)
menubar Objeto barra de mens de la ventana. (JavaScript 1.2)
name Nombre de la ventana. Lo asignamos cuando abrimos una nueva ventana.
outherHeight Tamao en pxeles del espacio de toda la ventana, en vertical. Esto incluye las barras
de desplazamiento, botones, etc.
outherWidth Tamao en pxeles del espacio de toda la ventana, en horizontal. Esto incluye las
barras de desplazamiento.
personalbar Objeto barra personal del navegador.
self Ventana o frame actual.
scrollbars Objeto de las barras de desplazamiento de la ventana.
status Texto de la barra de estado.
statusbar Objeto barra de estado del navegador.
toolbar Objeto barra de herramientas.
top Hace referencia a la ventana donde est situada el frame donde estamos trabajando.
window Hace referencia a la ventana actual, igual que la propiedad self.
EJEMPLO 30 (probar en firefox y en explorer)

<html>
<head>
<title>Propiedades de window</title>
</head>
<body>
<br/><h1>Propiedades de window</h1><br/>
<form action="#">
<input type="Button" value="Pulsame!"
onclick="window.status='Hola a todo el mundo!'">
</form>
<br/>
Fjate en la barra de estado del navegador, la que est debajo del todo.
</body>
Pgina 32/53
Aplicaciones Web
</html>
En Firefox 9, por defecto, no se instala la barra de estado. Para instalarla, hay que activar un
complemento similar a status-4-evar. Una vez instalada, por defecto, no se puede escribir en la barra de
estado. INVESTIGA SI ESTO SE PUEDE CONSEGUIR DE ALGUNA MANERA.
Vamos a ver ahora los distintos mtodos que tiene el objeto window:
alert ( texto ) Presenta una ventana de alerta donde se puede leer el texto que recibe por
parmetro.
back( ) Ir una pgina atrs en el historial de pginas visitadas. Funciona como el botn de volver de
la barra de herramientas.
blur( ) Quitar el foco de la ventana actual.
captureEvents ( eventos ) Captura los eventos que se indiquen por parmetro
clearInterval( ) Elimina la ejecucin de sentencias asociadas a un intervalo indicadas con el

mtodo setInterval( ).
clearTimeout( ) Elimina la ejecucin de sentencias asociadas a un tiempo de espera indicadas con

el mtodo setTimeout( ).
close( ) Cierra la ventana.
confirm ( texto ) Muestra una ventana de confirmacin y permite aceptar o rechazar.
find( ) Muestra una ventana de bsqueda de texto en la pgina cargada.
focus( ) Coloca el foco de la aplicacin en la ventana.
forward( ) Ir una pgina adelante en el historial de pginas visitadas. Como si pulssemos el botn
de adelante del navegador.
home( ) Ir a la pgina de inicio que haya configurada en el explorador.
moveBy ( pixelsX, pixelsY ) Mueve la ventana del navegador los pxeles que se indican por
parmetro hacia la derecha y abajo.
moveTo ( pixelsX, pixelsY ) Mueve la ventana del navegador a la posicin indicada en las
coordenadas que recibe por parmetro.
open( ) Abre una ventana secundaria del navegador.
print( ) Como si pulssemos el botn de imprimir del navegador.
prompt ( pregunta, inicializacion_de_la_respuesta ) Muestra una caja de dilogo para pedir un

dato. Devuelve el dato que se ha escrito.
releaseEvents ( eventos ) Deja de capturar eventos del tipo que se indique por parmetro.
resizeBy ( pixelsAncho, pixelsAlto ) Redimensiona el tamao de la ventana, aadiendo a su tamao

actual los valores indicados en los parmetros. El primero para la altura y el segundo para la
anchura. Admite valores negativos si se desea reducir la ventana.
resizeTo ( pixelsAncho, pixelsAlto ) Redimensiona la ventana del navegador para que ocupe el
espacio en pxeles que se indica por parmetro.
scrollBy ( pixelsX, pixelsY ) Hace un scroll del contenido de la ventana relativo a la posicin
actual.
Pgina 33/53
Aplicaciones Web
scrollTo ( pixelsX, pixelsY ) Hace un scroll de la ventana a la posicin indicada por el parmetro.
Este mtodo se tiene que utilizar en lugar de scroll.
setInterval( ) Define un script para que sea ejecutado indefinidamente en cada intervalo de
tiempo.
setTimeout ( sentencia, milisegundos ) Define un script para que sea ejecutado una vez despus
de un tiempo de espera determinado.
stop( ) Como pulsar el botn de stop de la ventana del navegador
EJEMPLO 31 (Probar en firefox y en explorer, y determina las diferencias de funcionamiento)

<html>
<head> <title>Mtodos de window</title> </head>
<body>
<br /> <h1>Mtodos de window</h1> <br />
Veamos ejemplos del uso de los mtodos del objeto window de JavaScript
<form action="#">
<input type="button" value="Ventana de bsqueda (Solo Netscape)"
onClick="window.find( )">
<br /><br />
<input type="button" value="Mover la ventana 10 derecha,10 abajo"
onClick="moveBy(10, 10)">
<br /><br />
<input type="button" value="Mover la ventana al punto (100,10)"
onClick="moveTo(100, 10)">
<br /><br />
<input type="button" value="Imprimir esta pgina"
onClick="print( )">
<br /><br />
<input type="button" value="Aumenta la ventana 10 ancho,10 largo"
onClick="resizeBy(10, 10)">
<br /><br />
<input type="button"
value="Fija el tamao de la ventana en 400 x 200"
onClick="resizeTo(400, 200)">
<br /><br />
<input type="button" value="Scroll arriba del todo"
onClick="scroll(0,0)">
<br /><br />
<input type="button" value="Scroll arriba 10 pixels"
onClick="scrollBy(0,-10)">
</form>
</body>
</html>
19. PROPIEDADES Y MTODOS DEL OBJETO DOCUMENT

Veamos una lista de las propiedades del objeto document :
alinkColor Color de los enlaces activos
Anchor Un ancla de la pgina. Se consigue con la etiqueta <a name="nombre_del_ancla">. Se accede

por su nombre.
Area Una etiqueta <AREA>, de las que estn vinculadas a los mapas de imgenes. Se accede por su
nombre.
Pgina 34/53
Aplicaciones Web
bgColor El color de fondo del documento.
cookie Una cookie.
domain Nombre del dominio del servidor de la pgina.
fgColor El color del texto. Para ver los cambios hay que reescribir la pgina.
Form Un formulario de la pgina. Se accede por su nombre.
Image Una imagen de la pgina web. Se accede por su nombre.
lastModified La fecha de ltima modificacin del documento.
linkColor El color de los enlaces.
Link Un enlace de los de la pgina. Se accede por su nombre.
location La URL del documento que se est visualizando. Es de solo lectura.
referrer La pgina de la que viene el usuario.
title El titulo de la pgina.
vlinkColor El color de los enlaces visitados.
EJEMPLO 32
<html>
<head>
<title>Cambio de color</title>
function cambiaTitulo(texto){
document.title = texto;
}
function cambiaColor(colorin){
document.bgColor = colorin;
}
</script>
</head>
<body>
<form action="#">
<input type="Button" value="Rojo"
onclick="cambiaColor('ff0000')">
<input type="Button" value="Verde"
onclick="cambiaColor('00ff00')">
<input type="Button" value="Azul"
onclick="cambiaColor('0000ff')"> <br /> <br /> <br />
<input type="Button" value="Titulo = Hola a todos"
onclick="cambiaTitulo('Hola a todos')">
<input type="Button" value="Titulo = Bienvenidos a mi pgina web"
onclick="cambiaTitulo('Bienvenidos a mi pgina web')">
<input type="Button" value="Titulo = Ms dias que longanizas"
onclick="cambiaTitulo('Ms dias que longanizas')">
</form>
</body>
</html>
El objeto document, localizado debajo del objeto window en la jerarqua de objetos de JavaScript,
tambin tiene una lista de mtodos interesantes. La vemos a continuacin:
captureEvents( ) Para capturar los eventos que ocurran en la pgina web. Recibe como parmetro
el evento que se desea capturar.
Pgina 35/53
Aplicaciones Web
close( ) Cierra el flujo del documento.
contextual( ) Ofrece una lnea de control de los estilos de la pgina. En el caso que deseemos
especificarlos con JavaScript.
getSelection( ) Devuelve un string que contiene el texto que se ha seleccionado. Slo funciona en
Netscape.
handleEvent( ) Invocas el manejador de eventos del elemento especificado.
open( ) Abre el flujo del documento.
releaseEvents( ) Liberar los eventos capturados del tipo que se especifique, envindolos a los
objetos siguientes en la jerarqua.
routeEvent( ) Pasa un evento capturado a travs de la jerarqua de eventos habitual.
write( ) Escribe dentro de la pgina web. Podemos escribir etiquetas HTML y texto normal.
writeln( ) Escribe igual que el mtodo write( ), aunque coloca un salto de lnea al final.
EJEMPLO 33
<html>
<head>
<title>Rescatar lo seleccionado</title>
function mostrarSeleccionado( ){
alert("Has seleccionado:\n" + document.getSelection( ))
}
</script>
</head>
<body>
<h1>Rescatar lo seleccionado</h1><br />
<form action="#">
<input type="button" value="pulsame!"
onClick="mostrarSeleccionado( )">
</form>
Selecciona cualquier texto de la pgina y pulsa sobre el botn.
</body>
</html>
Una de las cosas a tener en cuenta con JavaScript es que cuando el navegador lee una pgina web, la va
interpretando y escribiendo en su ventana. El proceso en el que el navegador est escribiendo la pgina se
llama flujo de escritura del documento. El flujo comienza cuando se empieza a escribir la pgina y dura
hasta que sta ha terminado de escribirse. Una vez terminada la escritura de la pgina, el flujo de
escritura del documento se cierra automticamente y la carga de la pgina termina. Esto significa que,
cuando se cierra el flujo, no se puede escribir en la pgina. Sin embargo, hay dos formas de ejecutar
cdigo JavaScript:
ejecucin mientras se carga la pgina. Aqu los document.write se pueden ejecutar sin problema.
Ejecucin cuando la pgina se ha cargado como respuesta a un evento. En este caso, si ejecutamos
un document.write lo que ocurre es que se vuelve a cargar la pgina completa, con lo que se vuelve a
abrir el flujo de escritura del documento.
Los mtodos open( ) y close( ) DEL OBJETO DOCUMENT SIRVEN PARA CONTROLAR EL FLUJO DEL
DOCUMENTO DESDE JavaScript. Nos permiten abrir y cerrar el documento explcitamente, por lo que,
Pgina 36/53
Aplicaciones Web
cuando se va a escribir en la pgina como respuesta a un evento, el cdigo correcto sera el siguiente
(aunque no se suele hacer as):
document.open( );
window.document.write(Hola);
document.close( );
20. MANEJO DE ELEMENTOS DE UN FORMULARIO CON JAVASCRIPT

Muy frecuentemente ser necesario hacer referencia a elementos de nuestra pgina escrita en HTML
desde el cdigo JavaScript, para modificarlos, leer su contenido, agregar o eliminar informacin, Un
ejemplo son los formularios. Dentro de un formulario podemos definir varios tipos de elementos a los que,
hasta ahora, hemos asignado un nombre con el atributo name; nombre que, de momento, no hemos utilizado.
Este name ser el que usemos desde JavaScript para referenciar dicho elemento. Para manejar todos los
elementos del formulario existen muchas funciones predefinidas en JavaScript; slo veremos las bsicas.
En cualquier caso, siempre vamos a tener en cuenta que para referenciar un elemento de un formulario
tenemos que indicar toda la ruta de elementos que existen hasta llegar a ese elemento, comenzando por la
pgina en s (document), seguida del nombre del formulario y, a continuacin, el nombre del elemento en
cuestin. A continuacin del elemento, indicaremos la propiedad o la funcin que queramos aplicar sobre
dicho elemento. Todas estas secciones se separan con un punto. Ejemplo, si tenemos un formulario llamado
miForm y queremos acceder a un elemento cuyo nombre es miCampo la forma de refenciarlo sera:
document.miForm.miCampo
Por ejemplo, si queremos cambiar la url de la propiedad action del formulario, escribiramos:
document.miForm.action = nueva_pagina.com
En todos los casos que vamos a ver vamos a seguir este formato, aunque existen otras formas de
referenciar tanto los formularios como los elementos que los forman. La forma ms recomendada
ltimamente es el uso del atributo id; este atributo es similar a name, pero nos permite utilizar otro
mtodo de acceso a los elementos de los formularios: getElementById( ). En el estndar XHTML ser
obligatorio el uso de id en los elementos de los formularios.
<form name=edad_form id=edad_form>

Nombre: <input id=txt_nombre name=nombre type=text />
</form>
var nombre_element = document.getElementById(txt_nombre);
// Con la siguiente instruccin cogera el valor tecleado por el usr

var nombre = nombre_element.value;
getElementById(edad_form).action = nueva_pagina.com
Los navegadores antiguos no soportan el mtodo getElementById. El uso de este mtodo requiere que los
id de los elementos sean nicos (los valores de name se pueden repetir, los de id no).
Otros mtodos de acceso a los elementos de un formulario son: getElementByTagName o
getElementsByName. Este ltimo mtodo requiere que los valores de name sean nicos.
Pgina 37/53
Aplicaciones Web
Todos los ejemplos que aparecen en este apartado estn hechos sin el uso de id. Es recomendable que se
rehagan los ejemplos con el uso de id de los mtodos asociados.
El formulario tambin tiene asociados dos mtodos: submit( ) y reset( ), para enviar el formulario y para
borrar el contenido de todos los campos respectivamente. Para utilizarlos escribiramos:
document.miForm.submit( );
document.miForm.reset( );
Un ejemplo de uso de estos mtodos sera el siguiente:
function validaSubmite( ){
if (document.miFormulario.campo1.value == "")
alert("Debe rellenar el formulario")
else
document.miFormulario.submit( );
}
<form name="miFormulario"
action="mailto:correo@correo.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="12">
<input type="button" value="Enviar" onclick="validaSubmite( )">
</form>
OBJETOS TEXT Y TEXTAREA.

Las propiedades ms utilizadas de estos objetos son:
o defaultValue Es el valor por defecto del campo.
o name Contiene el nombre de este campo
o value El texto que hay escrito en el campo (document.miForm.miCampo.value)
Los mtodos del objeto Text son:
o blur( ) Retira el foco de la aplicacin del campo de texto.
o focus( ) Pone el foco de la aplicacin en el campo de texto.
o select( ) Selecciona el texto del campo.
EJEMPLO 34 Qu hace este ejemplo?

<html>
<head>
<title>Cambiar el valor por defecto</title>
function cambiaDefecto( ){
document.miFormulario.campo1.defaultValue =
"Nuevo valor por defecto";
}
function seleccionaFoco( ){
document.miFormulario.campo2.focus( );
document.miFormulario.campo2.select( );
}
function quitaFoco( ){
document.miFormulario.campo2.blur( );
document.miFormulario.campo1.focus( );
}
</script>
</head>
<body>
Pgina 38/53
Aplicaciones Web
<form name="miFormulario"
action="mailto:promocion@guiarte.com" enctype="text/plain">
<input type="Text" name="campo1" value="" size="25">
<input type="Reset" value="Reset"> <br /><br />
value="Cambia el valor por defecto del campo"
onclick="cambiaDefecto( )"> <br /><br />
<input type="Text" name="campo2"
value="Campo para enfocar" size="32">
value="Cambia el foco al otro cuadro"
onclick="seleccionaFoco( )"> <br /><br />
value="Quita el foco del segundo cuadro y lo lleva al
primer cuadro" onclick="quitaFoco( )">
</form>
</body>
</html>
OBJETOS PASSWORD Y HIDDEN. Su manejo con JavaScript es igual al manejo explicado para los
objetos Text, salvo que las propiedades que tienen son value y name.
OBJETO RADIO. Un radio se referencia como si fuera un casillero (vector o array) formado por una
fila dividida en casillas numeradas a partir de 0. Para hacer referencia a cada uno de los valores
(casillas) se utilizan los corchetes que tendrn el valor de posicin en su interior. Las propiedades del
objeto Radio son las siguientes:
o checked Indica si est seleccionado o no un botn de radio. Para preguntar si una opcin est
marcada o no utilizamos la expresin (document.miForm.miCampo[i].checked == true)
o defaultChecked Opcin marcada por defecto.
o value El valor del campo de radio, asignado por la propiedad value del radio. El acceso a cada
uno de los valores del radio se hace teniendo en cuenta que el radio, realmente, es un casillero
(vector o array): document.miForm.miCampo[i].value
o length Nmero de opciones del radio (tamao del radio). document.miForm.miCampo.length
Para recorrer un radio completo, utilizamos la siguiente estructura:

for (i=0; i<document.miForm.miCampo.length; i++)
if (document.miForm.miCampo[i].checked == true)
alert (Has seleccionado + document.miForm.miCampo[i].value);
Los mtodos de este objeto son:

o click( ) Es como si hicisemos un click sobre una opcin del radio.
o blur( ) Retira el foco del radio.
o focus( ) Coloca el foco en el radio.
EJEMPLO 35
<html>
<head> <title>Ejemplo Radio Button</title>
function opcionPulsada( ){
var i;
for (i=0;i<document.fopciones.opciones.length;i++)
if (document.fopciones.opciones[i].checked) break;
Pgina 39/53
Aplicaciones Web
alert(document.fopciones.opciones[i].value);
}
</script>
</head>
<body>
<form name=fopciones action=#>
<input type="Radio" name="opciones" value="valor 1" checked> Opcin 1<br />
<input type="Radio" name="opciones" value="valor 2"> Opcin 2<br />
<input type="Radio" name="opciones" value="valor 5"> Opcin 5<br /> <br />
<input type="Button" name="boton" value="Opcin pulsada"
onclick="opcionPulsada( )">
</form>
</body>
</html>
OBJETO CHECKBOX. Una casilla de verificacin est formada por varias opciones que se pueden
marcar indistintamente. Es conveniente que cada opcin del checkbox tenga un nombre (name)
diferente, para as poder comprobar qu opciones estn marcadas.
Las propiedades de este objeto son:
o checked Informa sobre el estado del checkbox. Puede ser true o false. Para preguntar si la
casilla est marcada: (document.miForm.miCampo.checked == true)
o defaultChecked Si est chequeada por defecto o no.
o value El valor actual del checkbox. document.miForm.miCampo.value
o click( ) Es como si hicisemos un click sobre el checkbox, es decir, cambia el estado del
checkbox.
o blur( ) Retira el foco del checkbox.
o focus( ) Coloca el foco en el checkbox.
EJEMPLO 36
<html>
<head>
<title>Ejemplo Checkbox</title>
function alertaChecked( ){
alert(document.miFormulario.miCheck.checked)
}
function alertaValue( ){
alert(document.miFormulario.miCheck.value)
}
function metodoClick( ){
document.miFormulario.miCheck.click( )
}
</script>
</head>
<body>
<form name="miFormulario" action="mailto:promocion@guiarte.com"
enctype="text/plain">
<input type="checkbox" name="miCheck"> <br /> <br />
<input type="button" value="informa de su propiedad checked"
onclick="alertaChecked( )">
<input type="button" value="informa de su propiedad value"
onclick="alertaValue( )"> <br /> <br />
<input type="button" value="Simula un click" onclick="metodoClick( )">
Pgina 40/53
Aplicaciones Web
</form>
</body>
</html>
OBJETO SELECT. Se trata igual que el RADIO, como un array (casillero). Sus propiedades son:
o length Guarda la cantidad de opciones del campo select. Cantidad de etiquetas <OPTION>
o selectedIndex Es el ndice de la opcin que se encuentra seleccionada:
i = document.miForm.miCampo.selectedIndex
o
options Es un vector que se utiliza para acceder a cada una de las opciones del select. Las
opciones de select estn dentro del vector document.miForm.miCampo.options[i]. Cada una de
las casillas de este vector tienen, a su vez, propiedades:
defaultSelected Indica con un true o un false si esa opcin es la opcin por defecto. La
opcin por defecto se consigue con HTML colocando el atributo selected a un option.
index La posicin de esa opcin dentro del select.
selected Indica si esa opcin se encuentra seleccionada o no.
text Es el texto de la opcin. Lo que puede ver el usuario en el select, que se escribe
despus de la etiqueta <OPTION> en HTML.
value Indica el valor de la opcin, que se introduce con el atributo VALUE de la
etiqueta <OPTION> en HTML.

o blur( ) Retira el foco del select.
o focus( ) Coloca el foco en el select.
Para agregar valores a la lista (la propiedad length se incrementa en 1 y la nueva opcin se sita al final de
la lista) utilizamos el siguiente cdigo:
var n=new Option (etiquetaNueva,valorQueSeAade,defaultSelected,selected);
Ejemplo: var n=new Option (etiqueta,valor,false,false);
//creamos una casilla
var i= document.miForm.miCampo.length;
//posicin de la ltima casilla del array
document.miForm.miCampo.options[i]=n;
Para eliminar valores de la lista (la propiedad length se decrementa en 1 y las opciones se recolocan para
eliminar el hueco) utilizamos el cdigo:
document.miForm.miCampo.options[i]=null;
La propiedad length tiene un papel muy importante en las listas, ya que si modificamos su valor y le damos
un valor menor que el nmero de opciones de la lista, aquellas que queden por debajo de este valor se
perdern; y si, por el contrario, le damos un valor superior al nmero de opciones de la lista, al intentar
acceder a un valor que no existe sera como acceder a un valor vaco.
EJEMPLO 37
<html>
<head>
<title>Ejemplo select</title>
function dimePropiedades( ){
var texto;
texto = "El numero de opciones del select: " +
document.formul.miSelect.length;
var indice = document.formul.miSelect.selectedIndex;
Pgina 41/53
Aplicaciones Web
texto += "\nIndice de la opcion escogida: " + indice;

var valor = document.formul.miSelect.options[indice].value;
texto += "\nValor de la opcion escogida: " + valor;
var textoEscogido= document.formul.miSelect.options[indice].text;
texto += "\nTexto de la opcion escogida: " + textoEscogido;
alert(texto);
}
</script>
</head>
<body>
<form action=# name="formul">
Valoración sobre este web:
<select name="miSelect">
<option value="10">Muy bien
<option value="5" selected>Regular
<option value="0">Muy mal
</select>
<br /><br />
<input type=button value="Dime propiedades" onclick="dimePropiedades(
)">
</form>
</body>
</html>
Pgina 42/53
Aplicaciones Web
20. EVENTOS
Los eventos son sucesos que tienen lugar a lo largo de la interpretacin del cdigo que compone el
documento, ya est formado solamente por HTML o por HTML y JavaScript. Evidentemente, no se puede
detectar "todo" lo que ocurre con la pgina que se ha diseado/programado, pero s que existen una serie
de acciones ante cuya existencia, el navegador reacciona y pone a nuestro alcance una serie de palabras
reservadas para poder ejecutar cdigo. A estas palabras reservadas se las denomina manejadores de
eventos. Cada manejador est destinado a la deteccin y tratamiento de un determinado evento.
Para utilizar un manejador de eventos que detecte el evento que se desea, basta con escribir dicho
manejador en la etiqueta HTML correspondiente al objeto sobre el que se desea detectar el evento y
despus del smbolo = y el cdigo JavaScript que se desea ejecutar en las ocasiones en que se produzca el
evento (este cdigo debe aparecer entre comillas). Evidentemente, si este cdigo est compuesto por
muchas instrucciones, conviene siempre que se defina una funcin que se componga de esas instrucciones y
que el cdigo que aparece en la etiqueta HTML sea solamente la referencia a la funcin. Es importantsimo
recordar que el manejador del evento se escribe en la etiqueta HTML del elemento sobre el que se desea
detectar el evento. As si se desea detectar una pulsacin sobre un botn, el manejador onClick aparecer
en la etiqueta HTML del botn o si se desea detectar que se descarga un documento, el manejador ir en
la etiqueta del cuerpo del documento (body):
<input type=button value=plsame onclick=sentencias en JavaScript;>
Se puede poner ms de un manejador en un mismo elemento.
En el cdigo asociado a los manejadores de eventos es aconsejable especificar toda la jerarqua de los
objetos del navegador, empezando desde el objeto window, ya que hay algn navegador antiguo que no
sobreentiende este objeto. As por ejemplo, en vez de utilizar alert( ); tendremos que escribir
window.alert( ); o en vez de escribir document.write( ); escribiremos window.document.write( );
Los manejadores de eventos ms comunes son:
onclick
Es el manejador del evento que se produce cuando el usuario pulsa sobre un

elemento de la pgina (normalmente un botn o un enlace).
EJEMPLO 38
<html>
<head><title>Eventos</title></head>
<body>
<center>
Cada vez que se pulse el botn, se ejecuta la instruccin
<form name='datos' action=''>
<input type='button' value='Pulsa' onclick="alert('Has pulsado')">
</form>
</center>
</body>
</html>
Pgina 43/53
Aplicaciones Web
ondblclick
Es el mismo que el anterior pero se dispara cuando el usuario pulsa dos

veces el botn izquierdo del ratn con la suficiente rapidez como para ser
entendidas como una sola operacin
EJEMPLO 39
<html><head><title>Eventos</title></head>
<body>
<center>
<div ondblclick = "alert('Has pulsado dos veces')">
<br /> Cada vez pulse dos veces el ratn, sobre esta
seccin se ejecuta la instruccin de JavaScript
</div>
</center>
</body>
</html>
onmousedown
Se dispara cuando el usuario pulsa sobre un elemento de la pgina. Se

produce cuando se pulsa el botn, se suelte o no.
EJEMPLO 40
<body>
<center>
<div onmousedown = "alert('Has pulsado el ratn')">
<br />
Cada vez que se pulse el botn del ratn,
se ejecuta la instruccin de JavaScript
</div>
</center>
</body>
</html>
onmouseup
A diferencia del anterior, se dispara cuando el usuario suelta el botn del

ratn.
EJEMPLO 41
<body>
<br /><br /><hr /><center>
<div onmouseup = "alert('Has soltado el ratn')">
<br /> Cada vez que se pulse y suelte el botn del
ratn,
</div></center><hr />
</body>
</html>
Pgina 44/53
Aplicaciones Web
onmouseover
Se dispara cuando el puntero del ratn pasa por encima del objeto sobre
el que se define el evento.
EJEMPLO 42
<html>
<body>
<script type=text/JavaScript >
<!-function Cambia( ){
document.miimagen.src = "imagenes/obras2.gif";
return true; //No es necesario el return
}
//-->
</script>
<center><font size=+2> Pantalla de cambio de
imagen</font>
<br /> <br />
<Img name="miimagen" src="imagenes/obras.gif"
width=75 height=100 onmouseover='Cambia( )'>
<br /> <br /></center>
</body>
</html>
La imagen cambia de aspecto cuando se dispara el evento, que es cuando el usuario pasa el ratn por
encima (onmouseover) de dicha imagen. Si desea que se vuelva a cambiar deber recargar el ejemplo (F5 o
Ctrl-R).
onmouseout
Se dispara cuando el puntero del ratn abandona el mbito del elemento

sobre el que se desea detectar
Ejercicio
Modifique el ejemplo anterior para que al salir el ratn de encima de la
imagen, se ejecute una funcin que vuelva a situar la imagen original a la
vista.
Importante: Se pueden poner ms de un manejador en un elemento, de tal
manera que se puede indicar en la etiqueta img tanto el manejador
onmouseover como el onmouseout, y cada uno de ellos puede llamar a una
funcin diferente.
Pgina 45/53
Aplicaciones Web
onselect
Se dispara cuando el usuario selecciona un elemento de un formulario.

EJEMPLO 43
<html>
<body>
<center>
<br /><hr /><br />
<form name='miform' action=''>
<textarea name='area1' rows='3' cols='25'
onselect="alert('Area 1: seleccionado')">
Texto escrito en el textarea
</textarea>
<textarea name='area2' rows='3' cols='25'
onselect="alert('Area 2: seleccionado')">
Texto escrito en el textarea
</textarea>
</form>
<br /><hr /><br />
</center>
</body>
</html>
onkeydown
Se dispara cuando se pulsa una tecla del teclado, se suelte o no.

EJEMPLO 44
<html>
<body>
<form name="formokd" action=''>
<br /> Cada vez que se pulse una tecla del teclado,
<br /><br /><input type="text" onkeydown = "alert('Has
pulsado')">
</form><hr /></center>
</body>
</html>
onkeypress
Se dispara cuando se mantiene presionada una tecla del teclado. Antes de

este evento, se dispara onkeydown.
EJEMPLO 45
<html>
<body>
<form name="formokp" action=''>
<br /><br /><input type="text" onkeypress = "alert('Has
pulsado')">
</body>
</html>
Pgina 46/53
Aplicaciones Web
onkeyup
Se dispara cuando se suelta una tecla pulsada del teclado.

EJEMPLO 46
<html>
<body>
<form name="formoku" action=''>
<br /><input type="text" onkeyup = "alert('Has
pulsado')">
</body>
</html>
onblur
Se dispara cuando un elemento pierde el foco de atencin (en los elementos de

entrada de datos de un formulario, decimos "perder el foco" a que el cursor "salga"
de ellos), es decir, si el cursor sale del mbito del elemento.
EJEMPLO 47
<html>
<body>
<script type=text/JavaScript type="text/JavaScript">
function Comprueba( ){
if (parseInt(document.miformob.numero.value) < 8)
alert ('El nmero es menor de 8');
else document.miformob.numero.focus( );
}
</script>
<br /><hr /><br />
<form name='miformob' action=''>
Introduzca un nmero:
<input type='text' name='numero' size=4 onblur='Comprueba(
)'>
</form>
</body>
</html>
Introduzca el cursor en el campo de texto que aparece en el ejemplo, introduzca un nmero y pulse con el
puntero del ratn fuera del campo (o sea, saque el cursor del campo). En ese momento se ejecutar el
cdigo asociado al manejador. Este manejador de evento est especialmente indicado para comprobaciones
posteriores a la entrada de datos en un campo. Observe que en este ejemplo, adems, se utiliza un mtodo
denominado focus( ) que tienen todos los elementos de un formulario y que permite atraer hacia el objeto
en cuestin el foco (o sea, el cursor). En el ejemplo, esto ocurre cuando el nmero es mayor de un
determinado valor. Por problemas con los nuevos navegadores, los eventos onblur( ) y onfocus( ) no
funcionan bien cuando se combinan.
Pgina 47/53
Aplicaciones Web
onfocus
Este evento se dispara cuando el cursor entra en el mbito de un

elemento. En los elementos de entrada de datos de un formulario, se
dispara cuando el cursor "entra" en ellos.
EJEMPLO 48
<html>
<body>
<br /><hr /><br />
Introduzca un nmero:
<input type='text' name='num' size=4 onfocus="alert('He
recibido el foco')">
</form>
<br /><hr /><br />
</body>
</html>
Introduzca el cursor en el campo de texto que aparece en el ejemplo y comprobar que nada ms entrar, el
cdigo del manejador de eventos se ejecuta. No se debe confundir este manejador de evento con el
mtodo focus( ) presentado en el ejemplo anterior.
onreset
Este evento est asociado a los formularios, y se dispara en el momento

en que el usuario pulsa un botn tipo reset.
EJEMPLO 49
<html>
<body>
function Avisa( ){
var acepta = confirm ('Atencin: se van a limpiar
los datos del formulario');
if (acepta) return true;
else return false;
}
</script>
<center><br /><hr /><br />
El evento se dispara al pulsar el botn de 'Limpiar'
<form name='miform' onreset="return Avisa( )"action=''>
Nombre: <input type='text' size='10'><br /><br />
<input type='reset' value='Limpiar'>
<input type='submit' value='Enviar'>
</form>
<br /><hr /><br /></center>
</body>
</html>
Aqu resulta de vital importancia observar el funcionamiento de este evento:
Se escribe en la etiqueta perteneciente al objeto form ya que es ste el que se va a "limpiar" (y no

el botn).
Dado que normalmente se desea que se pueda anular la operacin despus de avisar, la funcin a la
que se llama, debe devolver el valor false si se desea abortar la operacin y true si se desea
continuar.
Pgina 48/53
Aplicaciones Web
Adems, debe aparecer un doble return: uno en la funcin y otro en el cdigo asociado al evento, ya
que el del evento es realmente el que aborta el proceso.
Pruebe el ejemplo introduciendo algn valor en el campo de texto y solicitando que se borre. Experimente
con las dos opciones disponibles.
onsubmit
Este evento se dispara en el momento en que el usuario pulsa un botn tipo submit
dentro de un formulario.
La necesidad de un "doble return" aparece de igual manera que en el caso de onreset.
Sin este "doble return" (por supuesto, si no se llama a una funcin, no es doble), los
datos del formulario se enviaran siempre. Observe que en este ejemplo se han usado
dos manejadores de eventos para un mismo elemento form. En caso del envo, este no
se producir si no se ha metido ningn dato en el campo nombre. Esto se debe a que el
evento salta al pulsar el botn y antes de que se produzca el envo, lo que nos permite
hacer comprobaciones en ese intervalo.
EJEMPLO 50
<html>
<body>
function Avisa( ){
var acepta = confirm ('Atencin: se van a limpiar los datos del
formulario');
if (acepta)
return true;
else
return false;
}
function Comprueba( ){
if (document.miform.nombre.value == ""){
alert ('No ha metido ningn dato');
document.miform.nombre.focus( );
return false;
}
else
return true;
}
</script>
El evento se dispara cuando se pulse el botn de 'Enviar'
<form name='miform' onreset="return Avisa( )" onsubmit="return
Comprueba( )"action=''>
Nombre: <input type='text' name='nombre' size='10'><br /><br />
</form>
</body>
</html>
Pgina 49/53
Aplicaciones Web
onload
Este evento se dispara cuando se terminan de cargar todos los elementos de una
pgina. Es muy interesante para asegurarse de que el cdigo no emita ningn error
por haber intentado acceder a un elemento que todava no existe (puede ocurrir si
se ejecuta JavaScript antes de la definicin de parte del HTML).
El siguiente cdigo no rellena el campo que se le solicita ya que se pretende ejecutar
una lnea de cdigo JavaScript cuando todava no ha sido definido el elemento al que
intenta acceder: el elemento document.miform.nombre.value no existe cuando se
intenta acceder a l y por tanto, no se rellena con el valor 'Santiago'.
EJEMPLO 51
<html>
<body>
<script type=text/JavaScript>
document.miform.nombre.value='Santiago';
</script>
Nombre:<input type='text' name='nombre' size='10'><br /><br />
</form>
</body>
</html>
Usando el evento onload, nos garantizamos la existencia de todos los elementos de la pgina ya que se
dispara cuando todos ellos han sido cargados:
Nota:
al pulsar en
un botn tipo
"submit",
despus del
"envo", se
produce una
recarga de la
pgina, por
lo que vuelve
a aparecer el
valor que se
introduce en
el campo.
onunload
<html>
<body onload = "document.miform.nombre.value='Santiago'">
Nombre: <input type='text' name='nombre' size='10'><br /><br
/>
</form>
</body>
</html>
Es complementario del anterior y se ejecuta el cdigo asociado al

manejador cuando abandona una pgina, ya sea porque se pulse un enlace
que nos lleve a otra pgina o porque se cierre la ventana del navegador.
EJEMPLO 52
<html>
<body onunload = "alert('Has cerrado el documento')">
Cuando se cierre el documento se disparar el cdigo
</body>
</html>
Pgina 50/53
Aplicaciones Web
onchange
Se produce cuando cambia el estado de un elemento de un formulario. En ocasiones

no se produce hasta que el usuario retira el foco del elemento en cuestin.
EJEMPLO 53
<html>
<head><title>onchange</title></head>
<body>
<form action=# name=miForm>
<SELECT onchange="window.alert('Cambiaste la seleccin')">
<OPTION value="opcion1">Opcion 1
<OPTION value="opcion2">Opcion 2
</SELECT>
</form>
</body>
</html>
ondragdrop Se produce cuando un usuario suelta algo que ha estado arrastrando por la pgina.
onerror
Se produce cuando no se puede cargar una pgina o una imagen.
onmousemove Se produce cuando el ratn se mueve por la pgina.
onmove
Se produce cuando se mueve la ventana del navegador o un frame.
onresize
Se produce cuando se cambia el tamao de la ventana del navegador o del frame.
21. EJECUCIONES PERIDICAS: setInterval

En JavaScript se dispone de una serie de funciones (realmente, mtodos del objeto ventana) cuyas
caractersticas las hacen muy indicadas para conseguir determinados efectos que, combinados con los
eventos, hacen ms atractiva la pgina que estamos creando. Los mtodos a los que nos referimos son:
Mtodo
Descripcin
setInterval(Nombrefuncin,
miliseg)
Este mtodo solicita que se ejecute la funcin que se le pasa como primer
parmetro cada tantos milisegundos como se le pasa en el segundo
parmetro. Por tanto, establece un intervalo de n milisegundos y en cada
ciclo ejecuta. Este mtodo devuelve un identificador de proceso que se
puede usar para detener la funcin pasada. clearInterval (pid) Este mtodo
detiene la ejecucin del intervalo establecido con el mtodo anterior.
Necesita como parmetro el identificador de proceso devuelto por
setInterval
Pgina 51/53
Aplicaciones Web
setTimeout(Nombrefuncin,
miliseg)
Ejecuta la funcin que aparece como primer parmetro al cabo de los

milisegundos pasados como segundo parmetro.Este mtodo devuelve un
identificador de proceso que se puede usar para detener la ejecucin
establecida.
clearTimeout (pid)
Este mtodo aborta la ejecucin planificada de la funcin establecida con el

mtodo anterior. Necesita como parmetro el identificador de proceso
devuelto por setTimeout
Veamos un ejemplo de utilizacin de setInterval. La idea bsica es la existencia de una imagen cuyas
propiedades vamos a cambiar poco a poco. El efecto que se desea conseguir es el de una imagen cuyo
tamao crece continuadamente mientras situemos el cursor encima de ella y vuelve a tener su tamao
original cuando situamos el cursor del ratn en cualquier otro punto de la pantalla. Para ello usamos los
eventos onmouseover y onmouseout, de tal manera que cuando se dispare el primero, debemos hacer que el
tamao crezca, mientras que cuando se dispare el segundo, debemos restaurar la imagen al tamao original.
EJEMPLO 54
<html>
<head>
<title>setinterval</title>
var ancho=0;
var alto =0;
var intervalo;
function guarda_dimensiones( ) {
ancho=document.imagen.width;
alto=document.imagen.height;
}
function crece( ) {
intervalo=setInterval('incrementa( )', 300);
}
function incrementa( ) {
document.imagen.width += 5;
document.imagen.height += 5;
}
function restablece( ) {
clearInterval(intervalo);
document.imagen.width=ancho;
document.imagen.height=alto;
}
</script>
</head>
<body onload='guarda_dimensiones( )'>
<img src='imagenes/toro.gif' name='imagen' onmouseover='crece( )'
onmouseout='restablece( )'>
</body>
</html>
toro.gif
Pgina 52/53
Aplicaciones Web
22. BIBLIOGRAFA
Apuntes de Ana Mara Barbero Alcalde y M de los ngeles Bravo Cabaas.

Apuntes extrados del material elaborado por los profesores de la Escuela Universitaria de
Informtica de la Universidad Politcnica de Madrid (Santiago Alonso Villaverde y otros)
Programacin en JavaScript I y II, Miguel ngel lvarez y Manu Gutirrez. Desarrolloweb.com
Pgina 53/53

Apuntes de Javascript2014

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apuntes de Javascript2014

Caricato da

Copyright:

Formati disponibili

Aplicaciones Web

Lenguajes de script: JAVASCRIPT

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

2. CMO INSERTAR CDIGO JAVASCRIPT EN HTML

Usando la etiqueta <script>

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

2.1. Usando la etiqueta <script>

Aqui vendra el cdigo JavaScript

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

<form name='datos' action=''>

2.3. JavaScript en los enlaces

Aqu vendra informacin HTML

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

4. JAVASCRIPT EN NAVEGADORES ANTIGUOS

5. CONSIDERACIONES SOBRE JAVASCRIPT

Se diferencia entre maysculas y minsculas (hola es distinto a Hola).

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

Numricos: enteros o reales

Cadenas de caracteres: van entre comillas dobles o simples.

\b espacio hacia atrs

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

Objetos: referencias a un objeto.

IES Luis Braille Coslada (Madrid)

no es un lenguaje tipado, una misma variable puede

Lenguajes de script: JAVASCRIPT

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

Operadores que se aplican sobre cadenas de caracteres.

FUNCIONES DE CONVERSIN DE TIPOS:

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

eval("x=10;y=20;document.write(x*y)"); // escribe 200

9. INTERACCIN CON EL USUARIO

alert (texto); Aparece una ventana con un botn Aceptar.

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

<script type='text/JavaScript' language='JavaScript'>

10. ESTRUCTURAS DE CONTROL

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

Esta instruccin evala una condicin: si es verdadera,

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

10.2 LA INSTRUCCIN SWITCH

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

10.3 LA INSTRUCCIN FOR

Se evala la expresin inicializacin.

Se evala la expresin condicin. Si el resultado de dicha evaluacin es falso, se

Si el resultado de la evaluacin anterior es verdadero, se ejecutan las

Se ejecuta la expresin actualizacin.

IES Luis Braille Coslada (Madrid)

Lenguajes de script: JAVASCRIPT

10.4 LA INSTRUCCIN WHILE

El bucle se repite mientas la

IES Luis Braille Coslada (Madrid)