Javascript de Wikilibros

javascript
wikilibros
ndice general
1
Programacin en JavaScript
1.1
ndice de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2
Autores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduccin
2.1
Qu podemos hacer con JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2
Caractersticas de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Variables
3.1
Tipos de datos en JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2
Declaracin de variables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3
Operar con variables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.4
Arrays (Matrices) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Control
Condicionales
5.1
If . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.2
Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3
Operadores lgicos y relacionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
Bucles
6.1
For
6.1.1
11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modicacin de la variable de control dentro del bucle
11
. . . . . . . . . . . . . . . . . . .
12
6.2
Bucles anidados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
6.3
Bucles innitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12
6.4
For sobre listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
6.5
While . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
Funciones
15
7.1
Qu son las funciones? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
15
7.2
Funciones con parmetros
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
7.3
Devolucin de datos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
7.4
Funciones recursivas
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
ii
8
NDICE GENERAL
FuncionesJS
18
8.1
Mostrar ventana de conrmacin (aceptar o cancelar) . . . . . . . . . . . . . . . . . . . . . . . .
18
8.2
Abrir una ventana nueva
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
8.3
Cambiar la URL actual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
8.4
Imprimir una pgina
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
8.5
Cambiar el tamao de la ventana actual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
8.6
Avanzar a una posicin especca de la ventana
. . . . . . . . . . . . . . . . . . . . . . . . . . .
19
8.7
Retrasar la ejecucin del programa durante un tiempo determinado . . . . . . . . . . . . . . . . .
19
8.8
Cambiar una imagen por otra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
OOP
9.1
20
Creacin de funciones miembro
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10 ClasesJS
21
23
10.1 Clase Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
10.2 Clase Date
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
10.3 Clase Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
10.4 Clase String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
11 Formularios
27
11.1 Gestin del formulario de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12 Cmo escribir cdigo en JavaScript
12.1 Los comentarios
27
30
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
12.2 Los nombres de las variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
13 Operadores en JavaScript
32
14 Ejemplos de cdigo
33
14.1 Caso 1: Cmo conseguir que un enlace gane o pierda el foco de entrada. . . . . . . . . . . . . . . .
33
14.2 Caso 2: seleccionar el texto de un cuadro de texto y darle el foco. . . . . . . . . . . . . . . . . . .
33
14.3 Caso 3: obtener y cambiar la URL de un formulario. . . . . . . . . . . . . . . . . . . . . . . . . .
33
14.4 Caso 4: como actualizar dos iframes al mismo tiempo. . . . . . . . . . . . . . . . . . . . . . . . .
34
14.5 Caso 5: conocer los datos del navegador. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
14.6 Caso 6: conocer los datos relacionados con la pantalla. . . . . . . . . . . . . . . . . . . . . . . . .
34
14.7 Caso 7: refrescar el contenido de una pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
14.8 Caso 8: Generar un reloj a intervalos de un segundo. . . . . . . . . . . . . . . . . . . . . . . . . .
34
14.9 Caso 9: Generar otro reloj, fecha y hora a intervalos de un segundo. . . . . . . . . . . . . . . . . .
35
14.10Caso 10: Manejando el canvas para grcos web. . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
14.11Caso 11: Utilizando la consola de depuracin . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
14.12Texto e imgenes de origen, colaboradores y licencias . . . . . . . . . . . . . . . . . . . . . . . .
36
14.12.1 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
14.12.2 Imgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
14.12.3 Licencia de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
Captulo 1
1.1 ndice de contenido

1. Introduccin
2. Las variables en JavaScript
3. Sentencias de control
(a) Condicionales
(b) Bucles
4. Funciones
5. Funciones en JavaScript
6. Clases y objetos
7. Clases predeterminadas en JavaScript
8. Gestin de formularios
9. APNDICE A. Cmo escribir cdigo en JavaScript
10. APNDICE B. Operadores en JavaScript
11. APNDICE C. Ejemplos de cdigo
12. APNDICE D. Palabras reservadas
Puedes encontrar todo el texto del libro en una sola pgina, ideal para imprimir o guardar en el disco duro.
1.2 Autores
Si introduces algn cambio en este libro, aade tu nombre aqu:
JULIAN DAVID DELGADO. Actualizacin de artculos. 15 de Febrero de 2015.
Mario Vera Aguirre
juan madariaga
1
CAPTULO 1. PROGRAMACIN EN JAVASCRIPT

Marcos Legido Hernndez
2006-05-25, Kausario -> ejemplo 7, correccin window.location.reload();"
2006-12-06, Control -> Bucles, correccin En otros bucles existen bucles -> En otros lenguajes de programacin existen bucles
2007-03-01, Rjarl -> Apendice C, ejemplos 8 y 9, Arregle el 8 y aad un 9 ejemplo. A disfrutar!.
2008-04-04, DMike -> Bucles, correccin Iteraccin -> Iteracin ; Dinen si el bucle est en condiciones
de ejecutarse o no -> Deciden si el bucle se ejecuta o no.
2008 - 05 - 21, Icondor -> En Devolucin de datos": If. En el ejemplo del uso del If hay una sentencia que dice
if(1) que, como se puede probar, arroja el mensaje puesto con alert. Sin embargo en el comentario respecto al
ejemplo, se dice lo contrario. Si se cambia por if(0) o if(3) el ejemplo estara bien. Ms completo podra ser
aadirle un else para que diga que en esta instruccin no es true.
2010 - 01 - 11, EArizon -> Ejemplos de uso del canvas en Javascript
2011-05-18, rbarahona -> Correccin de enlaces en los mens de navegacin. Correccin del texto en varios
apartados.
11/01/2015, Pablo Ivn G. Soto -> Correccin Ortogrca.
Captulo 2
Introduccin
El JavaScript es un lenguaje de programacin ampliamente utilizado en el mundo del desarrollo web por ser muy verstil y potente, tanto para la realizacin de pequeas tareas como para la gestin de complejas aplicaciones. Adems,
ha saltado el mbito de la web, y tambin podemos encontrarlo en otros entornos, como es el lenguaje ActionScript
de Macromedia, que acompaa al sistema Flash.
JavaScript es un lenguaje interpretado que, al contrario de las aplicaciones normales, que son ejecutadas por el sistema operativo, es ejecutado por el navegador que utilizamos para ver las pginas. Eso hace que podamos desarrollar
aplicaciones de muy diverso tipo, desde generadores de HTML, comprobadores de formularios, etc..., hasta programas que gestionen las capas de una pgina. Pueden desarrollarse incluso aplicaciones que permitan poder tener capas
en una pgina como si fueran ventanas, y dar la sensacin de estar trabajando con una aplicacin con interfaz de
ventanas.
JavaScript no es el nico lenguaje que podemos encontrar en la web. Tambin tenemos a su gran contrincante: Visual Basic Script. Este lenguaje, desarrollado por Microsoft, est basado en el lenguaje Basic de esta empresa, pero
desgraciadamente slo puede utilizarse en el navegador Internet Explorer. Si queremos que nuestras pginas dinmicas puedan ser vistas desde cualquier navegador y sistema operativo, la eleccin ms adecuada es sin lugar a dudas
JavaScript.
2.1 Qu podemos hacer con JavaScript?

Pginas dinmicas (DHTML)
Comprobacin de datos (Formularios)
Uso de los elementos de la pgina web
Intercambiar informacin entre pginas web en distintas ventanas
Manipulacin de grcos, texto, etc...
Comunicacin con plug-ins: Flash, Java, Shockwave, etc...
2.2 Caractersticas de JavaScript

JavaScript comparte muchos elementos con otros lenguajes de alto nivel. Hay que tener en cuenta que este lenguaje
es muy semejante a otros como C, Java o PHP, tanto en su formato como en su sintaxis, aunque por supuesto tiene
sus propias caractersticas denitorias.
JavaScript es un lenguaje que diferencia entre maysculas y minsculas, por lo que si escribimos alguna expresin
en minsculas, deberemos mantener esa expresin en minsculas a lo largo de todo el programa. Si escribimos esa
misma expresin en maysculas, ser una expresin diferente a la primera. Esto es as en la mayora de los lenguajes
de este tipo, como PHP.
3
CAPTULO 2. INTRODUCCIN
Otra caracterstica es que podemos encerrar las expresiones que escribamos con una serie de caracteres especiales.
Estos caracteres se denominan operadores y sirven tanto para encerrar expresiones como para realizar trabajos con
ellas, como operaciones matemticas o de texto. Los operadores que permiten encerrar expresiones deben abrirse
siempre. '(', '{' y '[' y deben cerrarse con sus correspondientes ')', '}' y ']', respectivamente.
Como JavaScript es un lenguaje de formato libre, podemos escribir las lneas de cdigo de la forma que consideremos
mejor, aunque por supuesto debemos escribir siempre de la forma correcta. Por ejemplo, podemos escribir las lneas
con un nmero variable de espacios:
variable = hola"; variable="hola"; variable ="hola"; variable= hola ;
Esto signica que podemos aadir tabuladores al inicio de la lnea para justicar los prrafos de cdigo. Tambin
podemos romper las lneas de texto si son demasiado largas:
document.write(Muy \ buenas);
Pero no podemos hacer esto:
document.write \ (Muy buenas);
Slo podemos romper cadenas de texto, no instrucciones.
En ocasiones tenemos que escribir algunos caracteres especiales llamados de escape, porque en ocasiones hay que
utilizar algunos caracteres no imprimibles, como por ejemplo:
document.write (T y yo somos \"programadores\".);
Podemos ver que al introducir comillas dobles dentro de la cadena de caracteres, debemos aadir la barra invertida
'\' para escapar las propias comillas, aunque esta misma expresin se poda haber escrito as:
document.write (T y yo somos 'programadores.);
Otro aspecto importante de JavaScript es la necesidad o no de utilizar el punto y coma ';' al nal de las instrucciones.
Este operador slo sirve para delimitar las instrucciones, pero aunque su uso es obligatorio en la mayora de los
lenguajes, es opcional en JavaScript. Si usamos este operador, podemos incluir varias sentencias en la misma lnea de
cdigo, y si no lo usamos, slo podemos escribir una sentencia cada vez. De todas formas, aconsejamos usar el punto
y coma porque en otros lenguajes como PHP o Java, este operador es obligatorio.
Captulo 3
Variables
En un programa JavaScript nos podemos encontrar con dos elementos bsicos: cdigo y datos. La parte del cdigo
es la que nos permite hacer cosas dentro de la pgina web, y la parte de datos es la que dene el estado de la pgina
web en un momento determinado. Los datos de un programa se guardan dentro de variables.
Qu es una variable? Una variable es como una caja: dentro de una caja nosotros podemos guardar cosas. Slo que
en las variables de JavaScript la caja slo puede guardar una sola cosa a la vez. Y por qu se las llama variables?
Se las denomina as porque su contenido puede cambiar en cualquier momento durante el desarrollo del programa.
De esta forma, una variable en JavaScript puede contener distintas cosas segn donde se encuentre en el programa:
nmeros, letras, etc...
3.1 Tipos de datos en JavaScript

Existen cuatro tipos bsicos:
Nmeros (enteros, decimales, etc.).
Cadenas de caracteres.
Valores lgicos (True y False).
Objetos (una ventana, un texto, un formulario, etc.).
3.2 Declaracin de variables

A continuacin aparece un ejemplo de declaracin de una variable en JavaScript:
var miVar = 1234;
Aqu hemos denido una variable numrica con un valor entero. Pero tambin podramos denir un nmero con
decimales:
var miVar = 12.34;
Como podemos ver, la nueva variable usa el operador . (punto) para distinguir entre la parte entera y la parte decimal.
Esto es importante, porque no podemos usar la coma como hacemos en Espaa.
Si queremos denir una cadena de caracteres, lo podemos hacer de la siguiente manera:
var miCadena = 'Hola, mundo';
// o bien:
var miCadena = Hola, mundo";
Aqu vemos que podemos usar los dos tipos de comillas para crear cadenas de caracteres, y ser muy til cuando
trabajemos con ello (podemos incluso combinarlas dentro de la misma cadena).
5
CAPTULO 3. VARIABLES
Tambin podemos crear variables con valores lgicos. Eso signica que la variable podr tener slo dos valores:
verdad o mentira.
var miVar = true;
Los valores admitidos para este tipo de variables son true y false. Este tipo de variables nos vendrn muy bien para
crear condiciones y como valor para devolver en funciones, que veremos ms adelante.
Y por ltimo tenemos un tipo de dato especial: los objetos. Y qu son los objetos? Son cosas que podemos usar
en nuestro programa para representar entidades. Esto lo entenderemos muy fcilmente con unos ejemplos.
Estamos rodeados de objetos: mesas, libros, monitores, ratones, cuadros, etc... Algunos son ms simples y otros son
ms complicados. Podemos manipular todos ellos segn sus caractersticas y su forma de interactuar con el entorno
donde estn. Por ejemplo, una mesa sabemos que tiene cuatro patas, una tabla lisa, y que es de un color o varios colores.
Es decir, que podemos determinar una mesa por sus propiedades o atributos. Pero adems, con la mesa podemos hacer
cosas: podemos poner cosas encima, podemos usarla para comer o leer y a veces podemos colgar cosas de ellas, por
ejemplo en un revistero. Todo eso son mtodos o comportamientos que la mesa tiene para interactuar con el resto de
su entorno.
Pues bien, podemos decir que los objetos en JavaScript son muy parecidos: tienen propiedades (datos) y mtodos
(cdigo). Podemos crear y usar objetos para manejar elementos del navegador web: una ventana del navegador es un
objeto window, una pgina HTML es un objeto document, y una imagen es un objeto de tipo Image. Es fcil darse
cuenta de que los objetos son de un determinado tipo: un objeto mesa, un objeto ventana, un objeto ratn, etc... Todos
los objetos de un mismo tipo tienen caractersticas semejantes, aunque luego cada objeto tiene propiedades con valores
distintos dependiendo de cada caso. As, dos mesas puede tener color marrn o azul, pero las dos seguirn teniendo
patas, que pueden ser 4 5, depende... En JavaScript, los objetos son muy importantes, como vamos a comprobar en
el siguiente captulo, que trata de los arrays (matrices) y las sentencias de control.
3.3 Operar con variables

Como ya estudiamos en el captulo anterior, en JavaScript podemos denir unos elementos llamados variables que nos
permiten almacenar datos de distintos tipos. Naturalmente, nosotros podemos usar esos datos en nuestros programas
y, como ya se indic entonces, podemos incluso variar esos datos manteniendo la variable donde los depositamos. A
esta operacin se le llama modicar la variable, y es una de las bases de la programacin moderna.
Las variables podemos usarlas en multitud de situaciones, al mostrar datos, al enviarlos y recibirlos, en expresiones
y llamadas a funciones... Podemos tratar con variables para almacenar los datos que vamos a usar a lo largo del
programa, tanto globalmente en toda la aplicacion como de forma exclusiva con las funciones que creemos, como
veremos en el captulo correspondiente.
var numero = 1; numero = numero + 2; numero += 3;
El resultado nal de esta operacin sera que la variable numero ser igual a 6. En la primera lnea lo que hemos
hecho es declarar la variable numero con el valor inicial 1. Despues, hemos incrementado el valor de la variable con
la misma variable, sumndole 2, y posteriormente hemos vuelto a incrementar la variable sumndole 3 por medio del
operador tipogrco +=. Los operadores se encuentran en el primer apndice del curso.
Sin embargo, surge un pequeo problema cuando tenemos que tratar con cantidades mayores de datos. Las variables
como tales slo nos permiten gestionar un dato cada una de ellas, con lo que cuando tenemos que gestionar grupos
mayores de datos, se hace realmente complicado. Miremos el siguiente ejemplo, en el que denimos unos nombres:
var nombre1 = 'pepe'; var nombre2 = 'too'; var nombre3 = 'mari'; var nombre4 = 'lucas; var nombre5 = 'sonia';
var nombre6 = 'ruth'; var nombre7 = 'tete';
Si ahora quisiramos listar estos datos (ms adelante veremos cmo), tendramos que referirnos a cada variable en
concreto, con lo que tenemos pululando por nuestro programa siete variables a las que ser difcil referirnos de una
forma genrica (por ejemplo, como estudiaremos ms adelante, para listarlos dinmicamente en un formulario). Para
resolver este problema tenemos una solucin: los arrays (matrices).
3.4 Arrays (Matrices)

Las matrices son variables que contienen un objeto de tipo Array. Podemos denir una matriz de la siguiente manera:
3.4. ARRAYS (MATRICES)
var matriz = new Array();

De esta forma, hemos creado una matriz vaca que puede contener un numero ilimitado de elementos, tantos como
nos permita el sistema donde se ejecuta. Las matrices vienen a ser como cajas que en vez de contener una sola cosa,
contienen muchas, como si pudiramos dividir la caja en compartimentos en los cuales pudiramos ir depositando
cosas.
Adems, podemos crear matrices con una dimensin, es decir, que podemos hacer que la matriz se inicie con un
nmero de elementos determinado:
var matriz = new Array(15);
Con esta instruccin, lo que hemos hecho es crear una matriz de quince elementos. Pero ahora lo interesante es saber
cmo llamar a esos elementos, ya que si creamos la matriz, pero no sabemos operar con ella, no sirve para mucho,
no? La forma de acceder a un elemento de la matriz es la siguiente:
elemento = matriz[1];
En este ejemplo, la variable elemento contendr el valor del elemento 1 de la matriz. Es lo que se llama ndice de la
matriz, e identica a cualquiera de los elementos de la matriz. Hay que jarse en que utilizamos los corchetes "[]"
para sealar un elemento de la matriz. El primer elemento de la matriz es el de ndice 0, no el de ndice 1. As, para
el anterior ejemplo de una matriz de 15 elementos, el ltimo elemento posible es el 14.
De la misma forma, podemos dar un valor a cualquiera de los elementos de la matriz:
matriz[5] = hola;
Hemos asignado el valor hola al elemento 5 de la matriz. Los elementos de una matriz pueden contener cualquier tipo
de dato, y se pueden cambiar en cualquier parte del programa, al igual que ocurre con las variables.
Y si queremos saber cuntos datos tenemos en la matriz? Como dijimos antes, las matrices son objetos de tipo
Array, y los objetos pueden tener atributos (datos) y funciones (cdigo). El atributo que debemos usar con matrices
es length:
longitud = matriz.length;
De esta forma, podemos saber cuantos elementos tiene la matriz. Recordad que como el primer ndice es 0, el ltimo
elemento ser siempre matriz.length - 1.
Si necesitamos que la matriz contenga ms elementos, podemos redimensionar la matriz aplicndole un nuevo objeto
de matriz:
matriz = new Array(longitud que queramos);
Sin embargo, perderemos todos los elementos que tuviramos anteriormente.
Captulo 4
Control
Una vez que nos sabemos manejar con variables y matrices, que son los datos de nuestros programas, debemos
aprender a crear cdigo, que es lo que hace que nuestro programa funcione.
Hasta ahora hemos visto cmo manejar los datos del programa, pero slo con variables no podemos manejar un
programa. Necesitamos escribir cdigo fuente que nos permita conseguir que el programa haga cosas. Normalmente
los programas tienen un ujo de ejecucin: se ejecuta lnea a lnea, interpretndolas y comprobando el resultado de la
ejecucin. Pero a veces eso no es suciente. A veces tenemos que controlar lo que hace el programa, permitindonos
ejecutar un cdigo u otro dependiendo de las circunstancias, o bien repetir el mismo cdigo varias veces segn unas
condiciones concretas.
Cuando nos levantamos por la maana, miramos por la ventana para decidir qu ropa nos ponemos. Decidimos entre
una camisa blanca o un jersey azul dependiendo de si hace fro o no:
Si hace fro -> me pongo el jersey. Si hace calor -> me pongo la camisa.
Captulo 5
Condicionales
5.1 If
En un programa podemos realizar el mismo tipo de decisiones gracias a la instruccin if:
if (condicin) { cdigo_A } else { cdigo_B }
Veamos lo que tenemos aqu. Primero, comprobamos la condicin en la que vamos a basar nuestra decisin (veremos
ms adelante cmo crear condiciones). Si la condicin es vlida (si es verdadera), se ejecutar el primer bloque de
cdigo que est entre llaves ({}); si no, se ejecutar el siguiente bloque de cdigo, el que se encuentra debajo de la
palabra else. Es decir, si la condicin es verdadera, ejecutamos cdigo_A, y si no, cdigo_B.
De esta forma, podemos tomar decisiones simples que nos permiten cambiar el cdigo que ejecuta el navegador, de
forma que podemos controlar su ejecucin fcilmente. Un ejemplo es este:
var edad = 18; if (edad >= 18) { alert(Eres mayor de edad); } else { alert(Eres menor de edad); }
Primero denimos la variable edad con el valor numrico 18. Despus comprobamos si el sujeto es o no mayor de
edad leyendo el valor de la variable: si edad es mayor o igual que 18, entonces le decimos que es mayor de edad; si
no, le decimos que es menor de edad.
alert es una funcin de Javascript que nos permite mostrar un mensaje en pantalla.
Pero, qu ocurre cuando queremos hacer varias comprobaciones al mismo tiempo? Entonces podemos usar la instruccin else if.
if (edad > 18) { alert(Tienes ms de 18 aos); } else if (edad == 18) { alert(Tienes 18 aos); } else { alert(Tienes
menos de 18 aos); }
De esta forma, podemos extender las condiciones todo lo que queramos para cubrir todos los casos necesarios. Hay
que destacar que todas las condiciones son sucesivas y que slo se ejecuta una de ellas. Adems, el ltimo else es el
que se ejecuta en el caso de que ninguno de los if anteriores sea vlido.
5.2 Switch
Hemos visto cmo gracias a if-else podemos decidir qu hacer en determinadas situaciones. Pero a veces slo querremos decidir entre unos valores, y ejecutar cdigo dependiendo de los posibles valores de una variable o devueltos por
una funcin. Para no ensuciar tanto el codigo usando muchas sentencias if podemos usar la sentencia switch-case:
switch (variable) { case valor1: // codigo para valor 1 break; case valor2: // codigo para valor 2 break; case valor3:
case valor4: case valor5: // codigo para valor 3, valor 4 y valor 5 break; default: // cdigo si no es ninguno de los
anteriores }
En este ejemplo, comprobamos varios valores de la variable variable, de forma que cada uno de ellos permite ejecutar
un cdigo diferente dependiendo de la situacin. Ahora bien, si nos jamos en valor3, valor4 y valor5, comprobamos
que slo se ejecutar el cdigo que aparece bajo valor5, porque los otros valores estn vacos, pero tambin porque no
tienen una clusula break. Esta palabra reservada corta la ejecucin del cdigo Javascript en el punto en que aparece,
9
10
CAPTULO 5. CONDICIONALES
saliendo del bloque de cdigo en el que se encuentra. Esto tambin nos servir, por ejemplo, cuando veamos bucles.
Con esto, comprobamos que switch nos puede ayudar a ejecutar cdigo de forma condicional, pero sin las complicadas
operaciones que debemos realizar en if. Sin embargo, switch no puede nunca sustituir a if, situacin que a la inversa
s ocurre.
5.3 Operadores lgicos y relacionales

Para crear condiciones, debemos usar dos elementos nuevos: los operadores lgicos y los operadores relacionales.
Los operadores lgicos son 3:
Y los relacionales son:
Podemos crear condiciones simples usando los operadores relacionales, y despus formar condiciones ms complejas
juntando otras ms simples usando los operadores lgicos. Por ejemplo:
if (edad > 6 && edad < 12) alert(Eres un nio); else if (edad >= 12 && edad < 18) alert(Eres un adolescente);
else if (edad >= 18 && edad < 31) alert(Eres un joven); else if (edad >= 31 && edad < 60) alert(Eres un adulto);
else if (edad >= 60 alert (Eres un adulto mayor); else alert (Tu debes de ser un beb no mayor de 6 aos);
Aqu hemos anidado varias condiciones para poder mostrar mensajes dependiendo de la situacin en que nos encontremos. Podemos ver cmo es posible tomar decisiones ms complejas que las que veamos al principio del tema
juntando varias condiciones por medio de los operadores lgicos. Debemos usar && (AND lgico) cuando queramos
que la resolucin de la condicin se encuentre incluida en las dos condiciones que indicamos. Debemos usar || (OR
lgico) cuando queramos que la resolucin de la condicin no se incluya en las condiciones que usamos. As, cuando
decimos que (edad >= 31 || edad <= 6), estamos indicando que el resultado ha de ser o bien mayor de 31 o menor
de 6, pero nunca se encontrara en las dos condiciones a la vez, al contrario que con && (que indica que se tienen
que cumplir las dos condiciones a la vez para que sea verdad). De esta forma, podemos tomar decisiones que nos
permitirn controlar el ujo del programa.
Captulo 6
Bucles
En programacin, la funcin principal de un programa es aquella que es ejecutada para que sus instrucciones sean
realizadas, bien por el procesador central (en el caso de un lenguaje compilado como C o Pascal), o por un intrprete,
que es un intermediario entre el programa y el procesador central. De esta forma, la ejecucin lineal de las instrucciones genera acciones, cosas que nuestro programa hace porque se lo hemos indicado. Ahora bien, Qu ocurre
cuando queremos hacer varias veces una misma cosa? Tendramos que escribir el mismo cdigo varias veces, aunque
el problema sera ms peliagudo si encima el nmero de veces a ejecutar el cdigo fuera variable, cambiase segn el
estado del programa (denido por las variables). Para ello tenemos dos tipos de elementos fundamentales: bucles y
funciones.
Un bucle permite repetir varias veces el mismo cdigo en la misma situacin, incluso aunque la repeticin de ese
cdigo sea variable y no la misma cantidad de veces cada vez. Como estudiaremos luego, tenemos a nuestra disposicin
dos bucles, for y while. En el caso de JavaScript, los bucles son condicionales, es decir que, como en el caso de if,
necesitamos de condiciones como las que hemos estudiado para realizar las repeticiones de cdigo. En otros lenguajes
de programacin existen bucles incondicionales, lo que signica que slo pueden ir de cierto punto a cierto punto (por
ejemplo, para contar de 1 a 10, aunque esto, como veremos, tambin lo podemos hacer con los condicionales).
Por ltimo, las funciones son elementos esenciales en programacin por dos motivos: permite reutilizar el cdigo
de nuestro programa no slo en el mismo programa, si no en otros posteriores, y adems, permite estructurar las
aplicaciones de forma que podamos dividir el problema en otros ms pequeos. De ah que a la programacin con
procedimientos y funciones se la llame estructurada (y no funcional como suelen indicar algunos netos: la programacin funcional, que existe, es totalmente diferente de la programacin con funciones). Veremos cmo reunir
cdigo en porciones llamadas funciones y usarlo varias veces en otras partes del cdigo de nuestros programas.
6.1 For
Un bucle for nos permite repetir un bloque de cdigo segn unas condiciones concretas, siempre que estas sean
verdaderas. Un bucle for tiene tres partes:
inicializacin: en esta parte, debemos indicar las variables que vamos a usar en la condicin. Lo ms habitual
es declarar variables numricas, pero pueden ser perfectamente cadenas de caracteres, booleanos u objetos.
condicin: una o varias condiciones (unidas por operadores lgicos), que deciden el nmero de iteraciones del
bucle.
operacin: una expresin que normalmente (aunque no es imprescindible) modicar las variables denidas
en la primera parte.
Un ejemplo simple de bucle for sera:
for (x = 1; x < 10; x++) { document.write(El nmero es " + x + "<br>"); }
Vamos a analizar este ejemplo. Fijmonos en la primera linea, donde podemos encontrar las tres partes que indicbamos antes:
11
12
CAPTULO 6. BUCLES
x = 1 (inicializacin): aqu usamos una variable x y le asignamos el valor 1, que ser el valor de inicializacin
del bucle.
x < 10 (condicin): nos encontramos con una condicin muy simple, y que se leera como: si x tiene un valor
menor que 10, la condicin es vlida. Si la condicin es vlida, el bucle seguir ejecutandose invariablemente.
Veremos que eso puede generar un pequeo problema, que a veces podemos incluso aprovechar para nuestros
propsitos, el denominado "bucle innito".
x++ (operacin): aqu nos encontramos con una operacin matemtica usando un operador tipogrco "++",
que viene a ser la misma operacin que "x = x + 1". De hecho, tambin podemos usarla en vez de la que
aparece, pero lo normal es que usemos un operador como ste (de hecho, si estudiamos cdigo realizado por
otros, veremos que es la forma ms comn).
Por tanto, el bucle for puede leerse como: "iniciamos 'x' con valor 1; el bucle se ejecutar mientras el valor de 'x' sea
menor que 10, y cada vez que se ejecute el bucle el valor de 'x' se incrementar en 1"
6.1.1
Modicacin de la variable de control dentro del bucle
A continuacin podemos ver un ejemplo de cmo podemos usar la variable de control del bucle dentro de ste:
for (x = 1; x < 16; x++) { if (x % 2) { x++; } document.write('Mi nmero es ' + x + '<br>'); }
Podemos apreciar en este ejemplo que el resultado no es el aparentemente esperado para este bucle, dado que aunque
en la parte de operacin incrementamos la variable slo en 1, el resultado nal es que slo vemos nmeros pares en
la ventana. Por qu? Fijmonos en el cdigo del bucle:
el condicional if slo ser cierto en el caso de que el mdulo de 'x' (la operacin matemtica de 'resto', representada por el operador '%') devuelva como resultado un valor impar.
si la condicin de if se cumple, se ejecutar un trozo de cdigo que incrementar el valor de 'x' en uno, inuyendo
de esta forma en el desarrollo del bucle.
De esta forma, en vez de mostrar los valores numricos del 1 al 15, como sera en el caso normal, resulta que aparecen
slo valores pares. El truco en este cdigo es sibilino pero potente: la operacin 'x % 2' devolver un 0 si 'x' es par, pero
devolver un valor distinto si es un nmero impar. Esto que signica? Si el valor de la operacin es cero, la condicin
es falsa (es un comportamiento muy habitual en muchos lenguajes de programacin), con lo que la condicin slo
ser verdadera cuando 'x' sea impar. Un nmero impar devolver un mdulo mayor que cero al dividirlo entre 2. Al
incrementar un valor impar en 1, se convierte en un valor par, que es lo que nalmente vemos en pantalla.
Parece enrevesado, pero un estudio a fondo de este cdigo nos permite apreciar algunas de las propiedades ocultas
de la programacin en JavaScript. Muchas de estas propiedades y caractersticas se aprenden con la experiencia, pero
en este curso veremos algunas de ellas que nos sern tiles en nuestro trabajo futuro.
6.2 Bucles anidados

Podemos anidar varios bucles uno dentro de otro, como en este caso:
for (x = 1; x < 10; x++) for (y = 1; y < 10; y++) document.write(x + ":" + y);
En este ejemplo, vemos que un bucle se ejecutar dentro del otro mostrndonos los valores de forma ordenada. No
es preciso escribir llaves si el cdigo a escribir es de una sola linea.
6.3 Bucles innitos

Vamos a ver rpidamente cmo realizar un bucle innito con for:
for (;;) { document.write(Esto no se acaba nunca...); }
6.4. FOR SOBRE LISTAS
13
Esto genera un pequeo problema... Si este bucle se ejecuta constantemente... Qu hacemos para detenerlo o controlarlo? Se pueden utilizar dos palabras para controlar un bucle (sea cual sea), ya sea nito o innito: break y
continue.
Sin embargo, LAS BUENAS PRCTICAS DE PROGRAMACIN DESACONSEJAN TOTALMENTE EL
USO EN CUALQUIER LENGUAJE DE PROGRAMACIN DE LAS SENTENCIAS break Y continue COMO MECANISMO DE CONTROL DEL FLUJO DEL PROGRAMA.
break es la palabra reservada para cortar un bucle en un momento determinado. Es muy usada en condicionales if, ya
que al darse una cierta condicin, podemos controlar un bucle cortndolo cuando se d un cierto momento concreto.
continue, sin embargo, tambin corta la ejecucin del bucle, pero no igual que break. Mientras que break naliza
denitivamente el bucle, continue salta lo que queda de bucle y sigue la siguiente iteracin (repeticin) sin ms.
var x = 1; for (;;) { x++; if (x > 5) break; document.write(x + '<br>'); }
En este ejemplo vemos que, cuando el valor de x sea mayor de 5, el bucle se romper. En este otro nos permite
apreciar el resultado de usar continue:
for (x = 1; x < 10; x++) { if (x % 2) continue; document.write(x + '<br>'); }
Ya nos podemos imaginar el resultado.
6.4 For sobre listas

Un caso particularmente til es la utilizacin de bucles for para recorrer los elementos de una lista (o array). Podemos
utilizar la sintaxis anterior recorriendo el array como en el siguiente ejemplo:
var lista = ["elemento1,"elemento2,"elemento3"]; for (idx=0; idx<lista.length; idx++) { elemento_n = lista[idx];
alert(elemento_n); }
Sin embargo dado que su uso es tan habitual existe una sintaxis abreviada que veremos frecuentemente al consultar
cdigo javascript en Internet:
var lista = ["elemento1,"elemento2,"elemento3"]; for (elemento_n in lista) { alert(elemento_n); }
elemento_n tomar sucesivamente todos los valores de la lista (array) sin necesidad de utilizar un ndice (idx), haciendo
el cdigo ms compacto.
6.5 While
El bucle while, al igual que el bucle for, tambin es condicional, aunque mucho ms simple que ste, como vemos en
el siguiente ejemplo:
var x = 1; while (x < 10) { document.write(Mi nmero es: " + x + "<br>"); x++; }
Como vemos, este bucle es idntico al bucle for que estudiamos en el apartado anterior pero mucho ms simple.
Para qu hay dos bucles que al n y al cabo hacen los mismo? En el pasado, for era un bucle incondicional, es
decir, que slo poda ir de cierto punto a cierto punto, sin comprobaciones intermedias. Por eso se desarroll el
bucle while. Sin embargo, lenguajes ms avanzados como C crearon un for condicional ms potente. Aunque realiza
funciones semejantes, while tiene como ventaja que, al ser ms simple, tambin es ms rpido y ecaz en trminos
de rendimiento que for. Adems, algunas operaciones resultan simplicadas:
while (verdad) { if (verdad) document.write(Es verdad); verdad = !verdad; }
Este extrao ejemplo es signicativo por el uso de variables lgicas o booleanas. verdad es una variable lgica que slo
puede tener los valores true y false. Si verdad es true, el bucle se ejecutar. Al ejecutarse, tambin se comprobar
la condicion interna y se imprimir el mensaje Es verdad. Lo interesante viene despus. La expresin verdad =
!verdad signica hacer que verdad sea contrario a verdad". Si verdad era igual a true, ahora ser igual a false (el
operador !, como sabemos, es la negacin, y por lo tanto, cambiar el valor de la variable a su contrario).
while tiene una versin inversa: do-while. Este bucle tiene como diferencia respecto de while que, mientras que en
while la condicin se comprueba incluso antes de comenzar a ejecutar el bucle (lo que implica que si la condicin ya
fuese falsa antes de entrar en el bucle, ste no llegara a ejecutarse nunca), en do-while la condicin se comprueba a
14
CAPTULO 6. BUCLES
posteriori, con lo que tenemos la oportunidad de ejecutar el bucle al menos una vez. Esto tambin es una ventaja con
respecto a for, que en ese sentido se comporta igual que while. Veamos un ejemplo:
var x = 0; do { document.write(Mi nmero es el " + x + "<br>"); x++; } while (x < 10);
Captulo 7
Funciones
7.1 Qu son las funciones?
Las funciones son uno de los elementos ms importantes de cualquier lenguaje de programacin actual. De hecho,
Niklaus Wirth, uno de los ms importantes tericos de la programacin y creador del lenguaje Pascal entre otros,
lleg a indicar que todo programa no era ms que la suma de cdigo (rutinas, procedimientos o funciones, como se les
quiera llamar) y datos (variables, matrices, etc...). Sea como sea, las funciones tienen un papel estelar en el desarrollo
de aplicaciones en la actualidad.
Hasta ahora, hemos visto como realizar cdigo de una forma estructurada, con sentencias de control que nos permiten
dominar la ejecucin del mismo fcilmente. Pero si slo tenemos esto, solamente podremos manejar el cdigo de
forma lineal: ejecutaremos las lneas una a una, una detrs de la otra, hasta el nal del programa. Es ms, si quisiramos
usar un determinado cdigo varias veces en el mismo programa tendramos que repetir ese cdigo varias veces,
tenindolo que adaptar a cada situacin. Y qu ocurre si queremos reutilizar un cdigo en varios programas? Es un
problema que se resuelven gracias a las funciones.
Las funciones son trozos de cdigo que tienen un nombre y que podemos utilizar en cualquier parte de nuestro cdigo
con una llamada directa. Este es un buen ejemplo:
function datos_personales(nombre, apellidos, edad) { return Hola, " + nombre + " " + apellidos + ", tienes " + edad
+ " aos."; }
En este caso hemos denido una funcin que, usando los parmetros que le hemos pasado, los combina para formar
una cadena formateada, que devuelve gracias a la palabra reservada return. Y cmo podemos usar este cdigo?
alert(datos_personales('Pepito', 'Prez', 25));
De tal forma que primero ejecutaremos la funcin datos_personales con los parmetros pasados, y despus la funcin
alert, que nos permite mostrar una ventana con un mensaje en la pantalla, con el resultado devuelto por la funcin
que hemos creado. Este sera el cdigo completo del programa:
<html> <head> <title>cdigo de funcin</title> <script> function datos_personales(nombre, apellidos, edad) {
return 'Hola, ' + nombre + ' ' + apellidos + ', tienes ' + edad + ' aos.'; } </script> </head> <body> <script>
alert(datos_personales(Pepito, Perez, 25)); </script> </body> </html>
Los parmetros son un elemento importante en las funciones. Se trata de datos que podemos pasar a nuestras funciones
para que estas los procesen de alguna forma, lo cual dar como resultado o una salida en el navegador (texto o
ventanas), o bien un resultado que se puede usar cuando llamemos a la funcin. Cuando indiquemos parmetros,
deberemos indicar la lista completa de parmetros que vamos a usar en esa funcin. Al llamar a la funcin, deberemos
hacerlo con todos los parmetros indicados. De otra forma, se producira un error de ejecucin. Los parmetros se
convierten en variables de datos dentro de la funcin, de ah que podamos utilizarlas e incluso modicarlas.
Generalmente, las funciones se utilizan para realizar alguna operacin no visible (matemtica, de cadena de caracteres,
de objetos, etc...) que devuelve por medio de return, pero tambin se pueden visualizar elementos en el navegador
usando las funciones y objetos que ya incorpora JavaScript.
function suma(dato1, dato2) { return dato1 + dato2; }
Al utilizar esta funcin, podemos hacerlo de varias formas:
15
16
CAPTULO 7. FUNCIONES
var total = suma(1,2); // 3 alert(suma(7,43)); // 50 document.write(total + suma(54,7)); // 50

A lo largo de los siguientes captulos veremos como crear y utilizar funciones, tanto propias como ajenas. Recordemos
que podemos incluir cdigo desde otro archivo y por supuesto, ese cdigo puede contener funciones. En el siguiente
captulo veremos ms ejemplos de funciones y avanzaremos en funciones internas de JavaScript.
7.2 Funciones con parmetros

Como ya indicamos en el captulo anterior, los parmetros nos sirven para llamar a nuestras funciones con unos datos
especcos para que los procese. Y en cada llamada, podemos darle unos parmetros diferentes, que harn que pueda
comportarse de forma diferente, si ese es el comportamiento que le hemos programado.
var numero = 1; var cadena = Hi!"; var logico = true; function valores(num, cad, log) { document.write(num);
document.write(cad); document.write(log); } valores(numero, cadena, logico);
Esta funcin la estamos llamando con variables como parmetros, pero tambin podemos llamar a la funcin con
valores literales, es decir, valores simples directos:
valores(2, adis, false);
Como ya vimos en el captulo anterior, tambin podemos hacer que otra funcin sea un parmetro:
valores(3, que tal.length, true);
que tal.length es una funcin que forma parte de los objetos de cadena de texto (todo, desde las variables hasta los
literales, son objetos en JavaScript), y nos devuelve la longitud de una cadena de texto. En concreto, al hacer esta
llamada nos devolver un nmero '7'. Como las variables en JavaScript no tienen tipo (todas son objetos), podemos
pasar cualquier valor como parmetro.
7.3 Devolucin de datos

Como ya sabemos, una funcin puede devolver datos hacia afuera por medio de la expresin return. Naturalmente,
podemos devolver cualquier tipo de datos. Sin embargo hay que tener en cuenta una serie de cuestiones:
Siempre se devuelven objetos, como ya hemos visto, y por lo tanto podemos devolver un objeto creado en la
misma funcin. Normalmente, cuando creamos una variable dentro de una funcin, esta variable existe slo
para esa funcin, y desaparece en el momento en que la funcin termina (la variable se encuentra en la pila
de memoria, y cuando la funcin desaparece, tambin lo hace la pila); pero en el caso de que devolvamos el
objeto, no se devuelve exactamente la misma variable, si no que se devuelve su contenido.
Cuando devolvemos true un valor distinto que cero, para JavaScript es lo mismo, y si devolvemos false o 0,
tambin viene a ser lo mismo. Esta es una regla estndar para muchos lenguajes como JavaScript, Java, PHP,
Perl, etc...
No es preciso que una funcin devuelva nada. No es necesario usar return. Adems, tambin es posible que en
vez de devolver resultados, se modiquen variables globales, es decir, variables creadas fuera de la funcin y
que se usan dentro.
Si queremos salir de una funcin antes de tiempo, porque algo ha fallado o no hay nada que hacer en un caso
especco, podemos simplemente escribir return;", lo que nos permitir salir sin ms y no devolver ningn
valor.
Estas consideraciones son importantes a nivel general y es importante tenerlas en cuenta. Vamos a ver como funcionan
con algunos ejemplos:
function dev_variable() { variable = true; return variable; } var var1 = dev_variable();
Como vemos, hemos declarado una variable local a la funcin y la hemos devuelto, pero solo se devuelve realmente
el valor. Esto pasa en todos los casos (Nota tcnica: cuando se devuelve un objeto, se devuelven sus datos en forma
de objeto de esa clase; esto lo entenderemos mejor en el captulo siguiente). Veamos este otro ejemplo:
7.4. FUNCIONES RECURSIVAS
17
function dev_true() { return true; } if (dev_true()) { alert(es true); } if (true) { alert(tambin es true); } if (1)
{ alert(este tambin es true); }
Por ltimo, veamos cmo salir de una funcin sin necesidad de devolver nada en cualquier momento:
function salir() { document.write(hola); document.write(que pasa); return; alert(adis); } salir();
En este ejemplo, la ltima linea dentro de la funcin (alert) no se ejecutar nunca porque hemos salido sin ms en la
linea anterior al ejecutarse la instruccin return.
7.4 Funciones recursivas

Las funciones recursivas son aquellas que se llaman a s mismas. Existen multitud de tcnicas para desarrollar este
tipo de funciones, ya que sus usos son muy diversos, pero fundamentalmente hay que tener en consideracin que
son funciones peligrosas, porque si no controlamos su ejecucin, se estarn ejecutando indenidamente, como en
el caso de los bucles innitos. La diferencia con los bucles innitos es que dependiendo de la implementacin del
intrprete de JavaScript, es posible que rompamos la pila de memoria, que ya vimos antes, con lo que adems de
colgar el navegador, podemos generar una excepcin de memoria y un error grave del sistema. Para evitarlo, claro
est, debemos estudiar bien la lgica de la funcin para construirla adecuadamente. Por ejemplo, si queremos calcular
el factorial de un nmero, podemos hacerlo con una funcin recursiva:
function factorial(numero) { if (numero == 1 || numero == 0) return 1; else return numero*factorial(numero - 1);
} document.write(factorial(4));
Supngase la llamada a esta funcin para N=4, es decir factorial(4). Cuando se llame por primera vez a la funcin, la
variable numero valdr 4, y por tanto devolver el valor de 4*factorial(3); pero factorial(3) devolver 3*factorial(2);
factorial(2) a su vez es 2*factorial(1) y dado que factorial(1) es igual a 1 (es importante considerar que sin ste u otro
caso particular, llamado caso base, la funcin recursiva no terminara nunca de llamarse a s misma), el resultado nal
ser 4*(3*(2*1)).
Captulo 8
FuncionesJS
JavaScript contiene sus propias funciones que podemos utilizar en nuestros programas. Aunque algunas de estas
funciones podemos usarlas independientemente de sus correspondientes objetos, lo cierto es que todas las funciones
provienen de algn objeto especco. El objeto window representa a la ventana del navegador y es el objeto por
defecto. Esto quiere decir que podemos usar sus elementos (funciones, propiedades, objetos, etc...) sin necesidad de
llamar explcitamente al objeto window.
Ya conocemos alguna que otra funcin como length (de los objetos de matriz) o alert, que proviene del objeto window
y que muestra un mensaje en una ventana.
Otro objeto dependiente de window es document que contiene, entre otras cosas, funciones como write que nos
permite escribir texto en la pgina web.
A continuacin vamos a estudiar algunas posibilidades que nos aportan las funciones en JavaScript, ya que hay una
gran cantidad de ellas. Sin embargo, vamos a repasar las ms usadas para el desarrollo web en general.
8.1 Mostrar ventana de conrmacin (aceptar o cancelar)

<html> <head> <script type="text/javascript"> function ver_conrm() { var name=conrm(Pulsa un botn) if
(name==true) { document.write(Has pulsado el botn Aceptar); } else { document.write(Has pulsado el botn
Cancelar); } } </script> </head> <body> <form> <input type="button onclick="ver_conrm()" value="Mostrar
ventana conrmacin"> </form> </body> </html>
8.2 Abrir una ventana nueva

<html> <head> <script language="javascript"> function open_win() { window.open("http://www.google.es","nueva,"toolbar=yes,
location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400,
height=400); } </script> </head> <body> <form> <input type="button value="Abrir ventana onclick="open_win()">
</form> </body> </html>
El primer parmetro de open es la direccin que queremos mostrar en la ventana. El segundo es el nombre que
queremos darle a la ventana (y que podemos usar, por ejemplo, en el atributo target de los enlaces). El tercer y ltimo
parmetro nos permite denir el aspecto de la ventana segn los datos que le indicamos.
8.3 Cambiar la URL actual

El siguiente ejemplo nos muestra el uso de location para conseguir la direccin de la pgina actual en la que nos
encontramos o bien ir a una pgina diferente:
<html> <head> <script type="text/javascript"> function actual_location() { alert(location); } function cambiar_location()
{ window.location="http://www.google.es/"; } </script> </head> <body> <form> <input type="button onclick="actual_location()"
18
8.4. IMPRIMIR UNA PGINA
19
value="Mostrar la URL actual"> <input type="button onclick="cambiar_location()" value="Cambiar URL"> </form>

</body> </html>
8.4 Imprimir una pgina

<html> <head> <script type="text/javascript"> function printpage() { window.print(); } </script> </head> <body>
<form> <input type="button value="Imprime esta pgina onclick="printpage()"> </form> </body> </html>
8.5 Cambiar el tamao de la ventana actual

<html> <head> <script type="text/javascript"> function resizeWindow() { window.resizeBy(100,100) } </script>
</head> <body> <form> <input type="button onclick="resizeWindow()" value="Redimensionar ventana"> </form>
</body> </html>
Si se usan frames, debe utilizarse el elemento top en vez del elemento window, para representar el frame superior.
8.6 Avanzar a una posicin especca de la ventana

<html> <head> <script type="text/javascript"> function scrollWindow() { window.scrollTo(100,500) } </script>
</head> <body> <form> <input type="button onclick="scrollWindow()" value="Scroll"> </form> <p>SCROLL
SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p> <br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p> <br><br><br><br><br><br><br><br>
</body> </html>
8.7 Retrasar la ejecucin del programa durante un tiempo determinado

<html> <head> <script language="javascript"> function timeout() { setTimeout(alert('Esta ventana aparece un
segundo despus de que hayas pulsado el botn')", 1000) } </script> </head> <body> <form> <input type="button
onclick="timeout()" value="Cuenta atrs"> </form> </body> </html>
Un par de detalles sobre este ltimo ejemplo: La funcin setTimeout tiene dos parmetros: una cadena de texto que
representa un cdigo JavaScript a ejecutar cuando hayan pasado el nmero de milisegundos del segundo parmetro.
8.8 Cambiar una imagen por otra

<html> <head> <script type="text/javascript"> function setSrc() { var x=document.images x[0].src="foto1.gif
} </script> </head> <body> <img src="foto2.gif width="107 height="98"> <form> <input type="button onclick="setSrc()" value="Cambiar imagen"> </form> </body> </html>
Como podemos apreciar, lo primero que hacemos es recoger todas las imagenes de la pgina en una matriz mediante
el objeto document.images y despus acceder a la imagen especca como se muestra en la funcion setSrc(). Para
hacer el cambio usamos la propiedad src que tienen todos los objetos de imagen.
A medida que vayamos pasando por los captulos de este curso, iremos viendo nuevos ejemplos con nuevas posibilidades de manejo de las funciones y sus respectivos objetos. En el siguiente captulo veremos cmo crear nuestros
propios objetos y aplicarlos en nuestros programas.
Captulo 9
OOP
Dentro de los lenguajes actuales, que provienen en su mayora de los primeros lenguajes estructurados como ALGOL
o BCPL, la capacidad de crear funciones para reutilizarlas de diversas formas, ya sea dentro del mismo mdulo
del programa o en distintos mdulos, ha sido uno de los fundamentos de la programacin de sistemas informticos.
Sin embargo, este paradigma se quedaba corto para nuevas situaciones que iban surgiendo con el tiempo, como
la programacin de videojuegos o el 3D y la inteligencia articial. A nales de los aos 70 se comenz a teorizar
sobre lenguajes de programacin que utilizasen entidades independientes que fueran autocontenidas para realizar las
aplicaciones. Como ya dijimos anteriormente, un programa se compone de cdigo y datos. los objetos son unidades
que contienen su propio cdigo y datos para su propio auto-funcionamiento. Podemos decir que son programas dentro
de programas.
Dicho as, podemos darnos cuenta de que los objetos pueden ser utilizados como variables, para nuestro propio
uso. Pero no podemos denir variables de objeto sin poder darles una forma. La forma de los objetos son los datos
(propiedades) y cdigo (funciones) que contiene el objeto. A esto se le denomina clase de objeto. Para denir clases
en JavaScript, lo hacemos por medio de funciones, como esta:
function Persona(nombre) { this.nombre = nombre; this.color_pelo = 'negro'; this.peso = 75; this.altura = 165;
this.sexo = 'varn'; this.edad= 26; }
Vamos a jarnos bien como se estructura esta funcin. Se le llama constructor de la clase, y en ella denimos los
datos de la clase, los que vamos a poder utilizar al crear objetos con ella. Ntese el uso de la palabra reservada this.
Esta palabra sirve para identicar al objeto en si mismo dentro de la denicin de la clase. Cuando escribimos
this.peso = 75;
estamos creando la propiedad peso de la clase Persona. Cuando creamos una propiedad en el constructor y le
damos un valor, como en este caso, estamos asignndole un valor por defecto. Todos los objetos creados con este
constructor contendrn una propiedad peso con ese valor inicial, aunque luego podremos cambiarlo al usar el objeto.
Para denir un objeto de esta clase, slo tendramos que hacer esto:
var hombre = new Persona('Pepe');
Aqu hemos denido el objeto hombre, que contendr todas las propiedades denidas en la funcin-clase Persona.
Si queremos cambiar su valor, slo tenemos que hacer algo como esto:
hombre.peso = 80;
De esta forma, el dato denido para este objeto cambia. Pero si hemos denido ms objetos de tipo Persona, cada
uno de ellos contendr las mismas propiedades pero con valores distintos. Ningn objeto tiene el mismo valor que
otro objeto de la misma clase a no ser que nosotros se lo asignemos explcitamente.
var mujer = new Persona('Ana'); mujer.peso = 67; mujer.sexo = 'mujer';
En este caso hemos hecho lo mismo, pero le indicamos su propio peso, independiente del de la variable hombre. As,
podemos tener tantos objetos de la misma clase como queramos para realizar las operaciones que sean pertinentes.
Una ltima cosa sobre los constructores: como podemos ver, podemos pasarle parmetros, que podemos convertir en
los valores de las propiedades de los objetos de esa clase.
20
9.1. CREACIN DE FUNCIONES MIEMBRO
21
9.1 Creacin de funciones miembro

Hasta ahora hemos visto como crear propiedades de las clases, pero necesitamos crear cdigo en ese objeto que utilice
las propiedades que hemos creado en el constructor. Para crear una funcin miembro, debemos indicarlo en la propia
funcin de construccin:
function Persona(nombre) { this.nombre = nombre; this.color_pelo = 'negro'; this.peso = 75; this.altura = 165;
this.sexo = 'varn'; this.dormir = dormir; // Nueva funcin miembro }
Y ahora denimos la funcin dormir:
function dormir() { alert(this.nombre + ' est durmiendo'); }
Fijmonos en la funcin. Tiene una forma bastante normal. Lo nico especial que hemos hecho es aadir la lnea
this.dormir = dormir;
al constructor, con lo que hemos asignado la funcin dormir como si fuera una propiedad. Recordemos que TODO
es un objeto en JavaScript, y esto incluye a las funciones. Ahora, para ejecutar este cdigo, utilizamos el objeto
anteriormente creado para ponerlo en marcha:
hombre.dormir();
Veamos en un ejemplo todo el cdigo que hemos generado hasta ahora:
<html> <head> <script language="javascript"> function Persona(nombre) { this.nombre = nombre; this.color_pelo =
'negro'; this.peso = 75; this.altura = 165; this.sexo = 'varn'; this.dormir = dormir; } function dormir() { alert(this.nombre
+ ' est durmiendo'); } </script> </head> <body> <form> </form> <script> var hombre = new Persona('Pepe'); hombre.dormir(); </script> </body> </html>
Como resultado, nos mostrar el mensaje Pepe est durmiendo. Como vemos, podemos usar las propiedades de los
objetos dentro de las funciones miembro, aunque tambin podramos construir la misma funcin de otra manera:
function dormir() { with (this) alert(nombre + ' est durmiendo'); }
with es una palabra reservada de JavaScript que permite coger una variable de objeto como this y permite utilizar
sus miembros como si fueran variables independientes. Pero tiene sus restricciones: estos nombres abreviados slo se
pueden utilizar dentro del mbito de with (que si tiene varias lneas, estas deben estar contenidas entre llaves, como
for, if, etc...), y adems, se pueden confundir fcilmente con variables locales a la funcin o globales del programa,
con lo cual particularmente no recomendamos el uso de with, ya que puede dar lugar a fallos de ejecucin difciles
de tratar si no se tienen en cuenta estas restricciones. Se aconseja usar la forma this.nombre. Tambin se recomienda
crear cada clase en un archivo diferente para que no haya confusiones de nombres, sobre todo de funciones miembro.
Otra manera de declarar la clase en JavaScript:
<html> <head> <script language="javascript"> function Persona(nombre) { this.nombre = nombre; this.color_pelo
= 'negro'; this.peso = 75; this.altura = 165; this.sexo = 'varn'; this.dormir = function dormir(){ alert(this.nombre
+ ' est durmiendo'); } } </script> </head> <body> <form> </form> <script> var hombre = new Persona('Pepe');
hombre.dormir(); </script> </body> </html>
Con este ejemplo se obtiene el mismo resultado que el anterior pero el cdigo queda un poco mas complejo. A pesar
de esto ya podemos ver que a diferencia del cdigo anterior este se encuentra encapsulado en la misma funcin [
function Persona(){} ]
Otro ejemplo de creacin de una clase ms complicado utilizando DOM estndar y JavaScript; debemos recordar
que innerHTML es un mtodo propietario de Microsoft y que desaparecer de la especicacin en un futuro muy
prximo. Ntese que la propiedad texto debe ser un nodo de texto (DOMTextNode) en lugar de HTML (Cualquier
interface DOM: DOMNode, DOMElement...) al vuelo como ocurrira usando innerHTML.
<html> <head> <script type="text/javascript charset="utf-8">
// <![CDATA[ function CrearCapas(idcapa, info) { this.id = idcapa; this.texto = info; this.CrearCapa = function
22
CAPTULO 9. OOP
CrearCapa() { try { // Esta es la manera correcta y estndar -aunque ms lenta y costosa- // de generar contenido mediante el DOM: // Objetos DOMElement necesarios: var body = document.getElementsByTagName('body').item(0);
// Tag <body> tambin se puede en forma de vector: //...agName('body')[0]; pero no es compatible con Opera. var
capa = document.createElement('div'); // Divisin al vuelo var texto = document.createTextNode(this.texto); // Texto contenido en div al vuelo // Establecer atributos de divisin: capa.setAttribute('id', this.id); capa.setAttribute('style',
'background-color:#f7f7f7; width:100px; border:#000000 2px solid;'); // Reconstruir el rbol DOM: capa.appendChild(texto);
body.appendChild(capa); } catch(e) { alert(e.name + " - " + e.message); } } } // ]]>
</script> </head> <body> <script type="text/javascript charset="utf-8">
// <![CDATA[ var capa = new CrearCapas('idCapanueva', 'Hola Mundo'); capa.CrearCapa(); // ]]>
</script> </body> </html>
El resultado del cdigo anterior es una pgina que por medio de JavaScript crea una divisin (div) y le asigna atributos
como ancho, alto, color, etc, y lo inserta dentro de la pgina al cargarse.
Captulo 10
ClasesJS
A continuacin vamos a estudiar algunos de los objetos y clases ms utilizados en JavaScript.
10.1 Clase Array

La clase Array permite crear una matriz de datos. Vamos a estudiar algunos de sus mtodos con el siguiente ejemplo:
<html> <body> <script type="text/javascript"> var famname = new Array(3); famname[0] = Jani"; famname[1]
= Tove"; famname[2] = Hege"; document.write(famname.length + "<br/>"); document.write(famname.join(".) +
"<br/>"); document.write(famname.reverse() + "<br/>"); document.write(famname.push(Ola,"Jon) + "<br/>");
document.write(famname.pop() + "<br/>"); document.write(famname.shift() + "<br/>"); </script> </body> </html>
Estudiemos el cdigo. Despus de crear la matriz, utilizamos algunas funciones y propiedades.
length sirve para conocer la cantidad de elementos que contiene la matriz propiamente dicha.
join permite unir todos los elementos separados por una cdena de caracteres que pasamos como parmetro,
en este caso, "..
reverse posiciona los elementos actuales de forma inversa.
push nos permite aadir un nuevo elemento dentro de la matriz (en realidad, podemos aadir cualquier cantidad
de ellos).
pop extrae el ltimo elemento de la matriz y lo devuelve.
shift extrae y devuelve el primer elemento de la lista.
Si queremos ordenar los elementos de una matriz, podemos usar la funcin miembro sort para realizar esta operacin.
Pero la ordenacin realizada es lexicogrca, es decir, que se ordenarn alfabticamente. Si queremos realizar una
ordenacin nmerica, podemos crear una funcin de comparacin como veremos en el siguiente ejemplo:
<html> <body> <p> Nota: Si no usamos funcin de comparacin para denir el orden, la matriz se ordenar siempre
alfabticamente. 500 vendr antes que 7, pero en una ordenacin numrica, 7 viene antes que 500. Este ejemplo
muestra como usar la funcion de comparacin - que ordenar correctamente los elementos tanto en una matriz numrica como de cadenas. </p> <script type="text/javascript"> array1 = new Array(Rojo,"Verde,"Azul); array2
= new Array(70,"9,"800); array3 = new Array(50,10,2,300); array4 = new Array(70,"8,"850,30,10,5,400);
function compareNum (a, b) { return a-b; } document.write(Ordenado: " + array1.sort()); document.write("<br><br>");
document.write(Ordenado sin compareNum: " + array2.sort()); document.write("<br>"); document.write(Ordenado
con compareNum: " + array2.sort(compareNum)); document.write("<br><br>"); document.write(Ordenado sin
compareNum: " + array3.sort()); document.write("<br>"); document.write(Ordenado con compareNum: " + array3.sort(compareNum)
document.write("<br><br>"); document.write(Ordenado sin compareNum: " + array4.sort()); document.write("<br>");
document.write(Ordenado con compareNum: " + array4.sort(compareNum)); </script> </body> </html>
Como podemos apreciar en el cdigo, slo las llamadas a sort que tienen como parmetro la funcin de comparacin
compareNum han sido ordenadas numricamente.
23
24
CAPTULO 10. CLASESJS
10.2 Clase Date

Esta clase permite denir una fecha y hora. Tiene una buena cantidad de funciones y aqu vamos a estudiar algunas
de las ms interesantes.
<html> <body> <script type="text/javascript"> var d = new Date(); document.write(d.getDate()); document.write(".);
document.write(d.getMonth() + 1); document.write(".); document.write(d.getFullYear()); </script> </body> </html>
Este ejemplo construye la fecha actual mediante los mtodos getDate, getMonth y getFullYear. El valor base de
getMonth es 0 (Enero). En los siguientes ejemplos veremos como adaptar el objeto a la fecha que nosotros queremos.
En el siguiente ejemplo extraeremos la hora actual:
<html> <body> <script type="text/javascript"> var d = new Date(); document.write(d.getHours()); document.write(".);
document.write(d.getMinutes()); document.write(".); document.write(d.getSeconds()); </script> </body> </html>
La dinmica de este ejemplo es muy parecida al anterior, pero en este caso usamos getHours, getMinutes y getSeconds.
<html> <body> <script type="text/javascript"> var d = new Date(); d.setFullYear(1990); document.write(d);
Este ejemplo muestra cmo modicar el ao, con setFullYear, aunque tambin podemos cambiar otras partes de la
fecha y la hora, con setMonth, setDate (para el da), setHours, setMinutes y setSeconds. En vez de setFullYear,
que tiene como parmetro un ao con todas sus cifras, podemos usar tambin setYear, que slo necesita las dos
ltimas cifras del ao (de 00 a 99). Algo a tener en cuenta es que con esto no cambiamos ningn parmetro de la
fecha y hora del sistema, si no del objeto Date exclusivamente.
En el siguiente ejemplo veremos como mostrar los das de la semana:
<html> <body> <script language="javascript"> var d = new Date(); var weekday = new Array(Domingo, Lunes,
Martes, Miercoles, Jueves, Viernes, Sbado); document.write(Hoy es " + weekday[d.getDay()]); </script>
</body> </html>
Como vemos, podemos crear una matriz con los das de la semana (comenzando por el domingo, dado que se toma la
referencia anglosajona), y referenciar a sus elementos con la funcin getDay. Tambin podemos usar otras funciones
como getMonth, getYear, getHours, getMinutes y getSeconds.
10.3 Clase Math

Esta clase contiene funciones y propiedades relacionadas con las matemticas.
<html> <body> <script language="javascript"> document.write(Math.round(7.25) + "<br>"); document.write(Math.random()
+ "<br>"); no = Math.random()*10; document.write(Math.round(no) + "<br>"); document.write(Math.max(2,4) +
"<br>"); document.write(Math.min(2,4) + "<br>"); </script> </body> </html>
La funcin round permite redondear una cifra de coma otante a un entero. random genera un nmero aleatorio, o
si queremos que este nmero se encuentre entre 1 y 10, lo podemos hacer como en la siguiente linea, generando un
nmero aleatorio y multiplicndolo por el mximo que queremos. max y min devuelven el nmero mximo y mnimo
entre dos dados, respectivamente. A su vez, esta clase contiene tambin funciones trigonomtricas como cos, sin, tan,
acos, asin, atan. Podemos contar con otras funciones de coma otante como ceil, log, y sqrt (raiz cuadrada). Como
puede comprobarse tambin, no hace falta crear un objeto para usar esta clase (se las denomina clases estticas).
10.4 Clase String

Esta clase permite la manipulacin de cadenas de texto. Toda cadena de texto que creamos es un objeto de esta clase,
as que podemos hacer manipulaciones de muy diverso tipo.
<html> <body> <script type="text/javascript"> var str = "JavaScript es malo!"; document.write("<p>" + str +
"</p>"); document.write(str.length + "<br>"); document.write("<p>" + str.fontcolor() + "</p>"); document.write("<p>"
+ str.fontcolor('red') + "</p>"); document.write("<p>" + str.fontcolor('blue') + "</p>"); document.write("<p>" +
str.fontcolor('green') + "</p>"); var pos = str.indexOf(Script); if (pos >= 0) { document.write(Script encontra-
10.4. CLASE STRING
25
do en la posicin: "); document.write(pos + "<br>"); } else { document.write("Script no encontrado!" + "<br>");

} document.write(str.substr(2,6)); document.write("<br><br>"); document.write(str.substring(2,6) + "<br>"); document.write(str.toLowerCase()); document.write("<br>"); document.write(str.toUpperCase() + "<br>"); </script>
</body> </html>
En este ejemplo podemos ver varios ejemplos del funcionamiento de las funciones de cadena que podemos encontrar
en la clase String. La propiedad length, como en Array, nos devuelve, en este caso, el nmero de caracteres de
la cadena de texto. fontcolor es una funcin que permite generar cadenas de distintos colores (nombres o valores
hexadecimales). indexOf es una funcin que devuelve la posicin de una cadena dentro de otra (partiendo de cero).
Si es igual a 1, es que no se ha localizado. substr y substring funcionan extrayendo subcadenas de otras, pero con
funcionamientos diferentes. substr nos devuelve una subcadena que comienza en el primer parmetro, devolviendo
el nmero de caracteres especicado en el segundo parmetro. substring devuelve una subcadena que se comprende
entre el primer y segundo parmetro (esto es, contando siempre con un ndice base de 0). Por ltimo, toLowerCase
y toUpperCase devuelven la misma cadena pero convertida a minsculas y maysculas, respectivamente.
A continuacin se muestra una lista muy til con los mtodos y propiedades propios de la clase String, pero cuidado!
estos metodos dependen de que el navegador los implemente, o sea que no tienen porque funcionar en todos los
navegadores y/o versiones.
Propiedades
length
prototype
constructor
Mtodos
anchor()
big()
blink()
bold()
charAt()
charCodeAt()
concat()
xed()
fontcolor()
fontsize()
fromCharCode()
indexOf()
italics()
lastIndexOf()
link()
localeCompare()
match()
replace()
search()
26
slice()
small()
split()
strike()
sub()
substr()
substring()
sup()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
valueOf()
CAPTULO 10. CLASESJS
Captulo 11
Formularios
Una de las utilidades ms interesantes de JavaScript es la posibilidad de comprobar y gestionar formularios de forma
que podamos incluso evitar que se enve un formulario si los datos no son correctos. Primero estudiaremos como
controlar la gestin y el envo de datos, y despus nos sumergiremos en la comprobacin propiamente dicha de los
datos.
11.1 Gestin del formulario de datos

Cuando tenemos un formulario de datos que queremos enviar a un servidor para su correspondiente gestin por parte
de una aplicacin CGI, resulta muy interesante en ocasiones tener la posibilidad de comprobar la integridad de los
datos antes de ser enviados al servidor. Adems, tener la posibilidad de evitar el envo del formulario nos permite un
mayor control sobre su gestin. Veamos el siguiente ejemplo:
<form action="prog.php method="post name="formu id="formu onsubmit="return comprobar()"> Tu nombre:
<input type="text name="nombre value=""><br> Tu edad: <input type="text name="edad value="" size="2
maxlength="2"><br> <input type="submit value=" Enviar "> </form>
Podemos apreciar en el formulario que hemos aadido un atributo nuevo, el evento onsubmit, que permite llamar a
una funcin creada por nosotros para comprobar los datos que vamos a enviar. La expresin
return comprobar()
har que el contenido de onsubmit sea true o false, dependiendo de lo que devuelva la funcion comprobar(). Si el
valor es true, los datos se enviarn al servidor, y si es false, se retendr la ejecucin del formulario. A continuacin
estudiaremos una posible funcin que podemos usar en este caso:
<script language="javascript"> function comprobar() { var nombre = document.formu.nombre.value; var edad =
document.formu.edad.value; if (nombre.length > 30) { alert(Tu nombre es demasiado grande. Redcelo.); return
false; } if (edad >= 20 && edad <= 40) { alert(Si tienes entre 20 y 40 aos, no puedes usar este programa.); return
false; } return true; } </script>
Este script lo podemos colocar tanto en <head> como en <body>. Como estudiaremos ahora, realiza una serie de
comprobaciones automticas que impedirn o no la ejecucin y envo del formulario.
Lo primero que hacemos es denir dos variables que contendrn el valor de los dos controles del formulario que
queremos controlar. Para comprender esto, estudiemos las expresiones:
var nombre = document.formu.nombre.value;
Denimos la variable nombre, que ser igual a la expresin valor del control nombre del formulario formu del objeto
de JavaScript document. Es decir, podemos acceder a cualquier parte del documento por medio de sus nombres
(o identicadores, segn el navegador), y concretamente a los componentes de un formulario de la forma en que
aparece en el ejemplo. As, una vez que hemos obtenido los valores, podemos procesar esos valores, como aparece
en el ejemplo.
Un detalle a tener en cuenta es que en el caso de que efectivamente la situacin d lugar a un error (en este ejercicio,
hemos realizado las condiciones para que sean ciertas si efectivamente se produce un error en los datos), la funcin
27
28
CAPTULO 11. FORMULARIOS
devolver false, lo que bloquear el envo del formulario al servidor. Slo si se superan las dos pruebas que ponemos
a los datos, se devolver true y el formulario se enviar. El cdigo completo para este programa sera:
<html> <head> <script language="javascript"> function comprobar() { var nombre = document.formu.nombre.value;
var edad = document.formu.edad.value; if (nombre.length > 30) { alert(Tu nombre es demasiado grande. Redcelo.); return false; } if (edad >= 20 && edad <= 40) { alert(Si tienes entre 20 y 40 aos, no puedes usar este
programa.); return false; } return true; } </script> </head> <body> <form action="prog.php method="post
name="formu id="formu onsubmit="return comprobar()"> Tu nombre: <input type="text name="nombre value=""><br> Tu edad: <input type="text name="edad value="" size="2 maxlength="2"><br> <input type="submit
value=" Enviar "> </form> </body> </html>
Vamos a estudiar una serie de casos particulares que se alejan de alguna forma de la forma de obtener valores que
hemos visto en el ejemplo anterior, o alternativas sobre como comprobar los datos. En el siguiente ejemplo vemos
como capturar el contenido de una serie de radios, ya que podemos usar una funcin especca para comprobar
que efectivamente hemos pulsado uno de los radios":
<html> <head> <script language="javascript"> function check(browser) { document.formu.respuesta.value = browser; } </script> </head> <body> <form name="formu id="formu"> Selecciona tu navegador favorito:<br><br> <input type="radio name="browser onclick="check(this.value)" value="Internet Explorer"> Internet Explorer<br>
<input type="radio name="browser onclick="check(this.value)" value="Netscape"> Netscape<br> <input type="radio
name="browser onclick="check(this.value)" value="Opera"> Opera<br> <br> <input type="text name="respuesta
size="20"> </form> </body> </html>
Fijmonos en las etiquetas <input>: el evento onclick contiene una llamada a la funcin check, cuyo parmetro es
una cadena de texto. En este caso la cadena de texto es conseguida por medio de la expresion this.value. Por
qu this.value? Ya conocemos lo que signica this, es la llamada al propio objeto, en este caso el radio, y con esta
expresin leemos el valor de la etiqueta <input>. Con el objeto por defecto this, podemos acceder a cualquer propiedad
y funcin de la etiqueta en la que nos encontramos en sus cdigos de eventos.
En el prximo ejemplo veremos como procesar los checkboxes de un formulario. Debemos tener en cuenta que
cada grupo de checkboxes pueden tener el mismo nombre, por lo que el acceso a un grupo de estas etiquetas debe
ser realizado por medio de una matriz, como veremos ahora. Adems, no accederemos a la propiedad value para
determinar cual est pulsada, si no a la propiedad checked, que es un valor booleano que nos indicar si efectivamente
un checkbox concreto est pulsado o no.
<html> <head> <script type="text/javascript"> function check() { cafe=document.formu.cafe; respuesta=document.formu.respuesta;
txt=""; for (i=0;i<cafe.length;++i) { if (cafe[i].checked) { txt=txt + cafe[i].value + " "; } } respuesta.value="Tu
quieres caf con " + txt; } </script> </head> <body> <form name="formu id="formu"> Cmo quieres tu caf?<br><br> <input type="checkbox name="cafe value="crema">Con crema<br> <input type="checkbox
name="cafe value="azcar">Con azcar<br> <br> <input type="button name="test onclick="check()"
value="Enviar pedido"> <br><br> <input type="text name="respuesta size="50"> </form> </body>
</html>
Como podemos ver, hay varias cosas a tener consideracin: los checkboxes, al tener el mismo nombre (podran tenerlo
distinto, pero este ejemplo nos permite ver esta posibilidad), se agrupan en forma de matriz, y por lo tanto, debemos
recorrer la lista de controles para acceder a sus contenidos. En nuestro caso, accedemos a la propiedad checked, que
nos permite saber si el checkbox est pulsado (true) o no (false). En la variable txt acumulamos los valores de los
checkboxes (a los que accedemos por medio del correspondiente ndice, como ya sabemos), y despus mostramos el
resultado en la linea de texto que hay ms abajo. Al introducir el texto en la propiedad value, cambiamos tambin el
contenido del campo de texto.
En el siguiente ejemplo veremos como averiguar el dato pulsado en una lista de datos:
<html> <head> <script type="text/javascript"> function cual() { txt=document.formu.lista.options[document.formu.lista.selectedIndex]

document.formu.favorito.value=txt; } </script> </head> <body> <form id="formu name="formu"> Elige tu navegador favorito: <select name="lista onchange="cual()"> <option>Internet Explorer</option> <option>Netscape</option>
<option>Opera</option> </select> <br><br> Tu navegador favorito es: <input type="text name="favorito
size="20"> </form> </body> </html>
La expresin
document.formu.lista.options[document.formu.lista.selectedIndex]
11.1. GESTIN DEL FORMULARIO DE DATOS
29
nos permite acceder a una de las opciones (es una matriz) de la lista de datos. En este caso, como las opciones no
tienen valor, podemos acceder a la cadena de caracteres de la opcin por medio de la propiedad text. En concreto,
podemos conocer qu elemento se ha seleccionado por medio de la propiedad selectedIndex del control de lista.
Slo un detalle ms a tener en cuenta: por un defecto de los navegadores, no es posible elegir sin ms el elemento
actualmente seleccionado en la lista, ya que no producir ningn evento. Hay que tener esto en consideracin para
evitar posibles problemas a la hora de trabajar con las listas. Un truco para subsanar este inconveniente es poner un
primer option en blanco (<option> </option>) que ser el que aparezca al cargarse el select.
Captulo 12
Cmo escribir cdigo en JavaScript

En este apndice aprenderemos a insertar cdigo JavaScript en nuestras pginas. Como sabemos, las pginas web se
componen de cdigo HTML (HyperText Markup Language), y para incluir el cdigo Javascript utilizamos una marca
HTML, <script>. Esta marca puede encontrarse en cualquier parte de la pgina web, tanto en el <head> como en el
<body>. Aunque <script> es la forma ms corta existen otras formas de denir cdigo script. Por ejemplo <script
language="JavaScript">. W3C recomienda utilizar el tag <script type="text/javascript">.
<html> <head> <title>Esta es una pagina web</title> <script type="text/javascript"> var mi_numero = 1; function
calcula(numero) { return numero + mi_numero; } </script> </head> <body> <script> document.write(calcula(1));
Este ejemplo mostrar un numero '2' en el navegador.
Adems, podemos especicarle el lenguaje en el que queremos programar. Existen otros lenguajes para navegador
como Visual Basic Script y PerlScript, pero nosotros usamos Javascript porque es universal: todos los navegadores lo
soportan, mientras que los otros dependen de la plataforma donde nos encontremos. Para indicar el lenguaje, podemos
escribir lo siguiente:
<script language="Javascript"> </script>
De esta forma indicamos el lenguaje a usar. Esto es necesario en el caso de que tengamos que usar lenguajes combinados en la misma pgina, como en el caso de que queramos enlazar una pelcula ash con nuestra pagina web.
Otra forma de escribir Javascript en una pgina web es utilizando los eventos de las etiquetas HTML. Las etiquetas
HTML tienen varios eventos que responden a determinados sucesos, como por ejemplo el click del ratn, el envo
de un formulario, o la carga de una pgina. Por ejemplo, si queremos que aparezca un mensaje al cargar la pgina
que estamos viendo, haramos algo como esto:
<html> <head> </head> <body onload="alert('Hola, esto es una pgina web')"> texto </body> </html>
Esto har que aparezca un mensaje nada ms cargar la pgina web. Tambin podemos aplicar estos eventos como
enlaces, botones, imgenes, etc... Prcticamente cualquier etiqueta HTML soporta eventos como onclick, que permite
responder a una pulsacin del botn izquierdo del ratn.
<html> <head> </head> <body> <a href="http://www.google.com/" onclick="alert('Vas a ir a Google')">Google</a>
</body> </html>
En este ejemplo vemos cmo al mismo tiempo que vamos a Google, el navegador nos avisa de lo que vamos a hacer
antes de que ocurra. Este tipo de acciones se pueden usar para comprobar formularios antes de enviar los datos
(e incluso, evitar su envo si no son correctos), comprobar dnde pinchamos en una imagen, etc..., observando los
cambios en los objetos Javascript.
Y una ltima manera de ejecutar cdigo Javascript es adjuntando un archivo al cdigo principal, de tal forma que
podemos agrupar las funciones, clases y dems en un archivo, y reutilizar ese archivo tantas veces como queramos
posteriormente. Un ejemplo puede ser ste:
funciones.js:
function saludo(nombre) { alert('Hola, ' + nombre); }
saludo.html:
30
12.1. LOS COMENTARIOS
31
<html> <head> <title>Esta es una pagina web</title> <script language="Javascript src="funciones.js"></script>

</head> <body> <script> saludo('Ana'); </script> </body> </html>
En este ejemplo vemos cmo podemos incluir un cdigo Javascript desde otro archivo y utilizar las funciones incluidas
dentro de nuestro cdigo, en tantos archivos como queramos. De esta forma podemos reutilizar el cdigo todo lo
necesario.
12.1 Los comentarios

Los comentarios son uno de los elementos ms despreciados en todos los lenguajes de programacin, pero son de
suma utilidad: permiten aclarar y sintetizar el cdigo, adems de servir de eventuales ocultadores de cdigo, ya que
todo lo que se encuentra en un comentario no es interpretado por el navegador. Podemos escribir comentarios de dos
formas diferentes:
// Este es un comentario de una lnea
Ponemos dos barras normales para crear un comentario de una lnea. Este comentario tambin lo podemos usar en el
caso de que queramos ocultar una lnea concreta de la ejecucin del programa. Si queremos realizar un comentario
de mltiples lneas, haremos:
/* Este es un comentario de mltiples lneas */
De esta forma, podemos comentar varias lneas de texto o cdigo en un bloque. Esto es bastante interesante cuando
tenemos que ocultar una gran cantidad de cdigo continuo, que de otra forma tendramos que comentar lnea a lnea
con las dos barras.
Los comentarios en el cdigo son muy tiles para ayudar a comprender el sentido del programa, tanto para el creador
del cdigo como para otros que puedan leerlo.
12.2 Los nombres de las variables

Javascript es un lenguaje no tipado, es decir una variable puede servir para almacenar un nmero, una cadena de texto,
un elemento DOM de HTML (sera ms exacto hablar de una referencia a un elemento DOM de HTML). Este
caracterstica puede ser una ventaja cuando se tiene cierta soltura con el lenguaje, sin embargo puede ser una trampa
mortal para aquellos que empiezan, ya que es fcil que intenten obtener el valor del texto almacenado en la variable
campo1 cuando en realidad campo1 no contiene un nmero sino que referencia a un elemento de formulario input
con identicador campo1, de forma que para obtener el texto del campo en realidad deberan consultar el valor de
campo1.value. Estos errores son frecuentes y es fcil evitarlos si a la hora de elegir el nombre de nuestras variables
prejamos las mismas indicando el tipo de elemento al que referencian. P.ej, una variable que almacene texto puede
ir prejada con s (de string), una referencia a un objeto div puede ir prejado con el propio div y una referencia
a un input de formulario puede prejarse con input. As por ejemplo escribiramos:
var input1 = document.getElementById(form1_input1); var input2 = document.getElementById(form1_input2);
var sInput = input1.value + ", + input2.value; var divSalida = document.getElementById(div1); divSalida.innerHTML
= sInput;
Tambin es conveniente adjuntar un prejo a las variables globales que van a ser compartidas por todas las funciones
del script de forma que no se confundan con variables locales de igual nombre y sea fcil entender que se trata de
variables globales compartidas sin necesidad de buscar su denicin original cuando estamos inspeccionando el cdigo
de una funcin donde se utiliza. Por ejemplo:
function muestraMensaje(sMensaje){ globDivSalida.innerHTML = this.sMensaje; }
En el anterior ejemplo se entiende que globDivSalida es una variable global (que probablemente habr sido inicializada
inmediatamente al arrancar el script) gracias a su prejo glob y que adems referencia a un div, gracias a su prejo
Div.
Captulo 13
Operadores en JavaScript
Los operadores son uno de los elementos fundamentales en cualquier lenguaje de programacin, ya que son los que
nos permiten trabajar con variables y datos. A continuacin vamos a estudiar los distintos operadores divididos en
categoras:
Operadores aritmticos:
Operadores de asignacin:
Operadores condicionales (comparativos):
Operadores lgicos:
Suma y Resta Tipogrca
La diferencia en el uso de la suma y resta tipogrca radica en el momento en que se realiza la operacin. Cuando los
smbolos preceden a la variable (ej: ++a; --a;) la operacin se realiza antes de ejecutar el resto de las operaciones en
la linea. Cuando la variable precede a los smbolos (ej: a++; a--;) la operacin se realiza despues de ejecutar el resto
de las operaciones en la linea. En caso de que la linea de cdigo no contenga ninguna operacin extra el resultado
ser el mismo. Aqu algunos ejemplos para mostrar las diferencias:
var a=3; var b=7; a++; --b; //a=4, b=6 var c = b - a++; //Resultados: c = 1 (resta), luego a = 5 (++) //a=5, b=6, c=1 c
= --b / a++; //Resultados: b = 5 (--), luego c = 1 (divisin), luego a = 6
32
Captulo 14
Ejemplos de cdigo
En este apndice vamos a estudiar algunos ejemplos de cdigo JavaScript que podemos adaptar a nuestras pginas.
En estos ejemplos aparecern tambin objetos y clases nuevas que no hemos visto a lo largo del curso, para extender
el conocimiento que ya tenemos del cdigo de scripts.
14.1 Caso 1: Cmo conseguir que un enlace gane o pierda el foco de entrada.
<html> <head> <style type="text/css"> a:active {color:blue} </style> <script type="text/javascript"> function getfocus() { document.getElementById('w3s).focus(); } function losefocus() { document.getElementById('w3s).blur(); }
</script> </head> <body> <a id="w3s href="http://www.google.com">Visita Google.com</a><br><br>//solo por
presentacion <form> <input type="button onclick="getfocus()" value="Coge el foco"> <input type="button onclick="losefocus()" value="Pierde el foco"> </form> </body> </html>
getElementById es una funcin de document que permite llamar a un objeto concreto de la pgina. Esta es la forma
normal de acceder a los elementos de la pgina, aunque como en el caso de los formularios, tambin es posible acceder
a algunos elementos directamente usando sus nombres como propiedades de objetos. <html>
<head> <script type="text/javascript"> function setfocus() { document.forms[0].txt.select(); document.forms[0].txt.focus();
} </script> </head> <body> <form> <input type="text name="txt size="30 value="Hola mundo!"> <input type="button value="Selecciona texto onclick="setfocus()"> </form> </body> </html>
14.2 Caso 2: seleccionar el texto de un cuadro de texto y darle el foco.

<html> <head> <script type="text/javascript"> function setfocus() { document.forms[0].txt.select(); document.forms[0].txt.focus();
} </script> </head> <body> <form> <input type="text name="txt size="30 value="Hola mundo!"> <input type="button value="Selecciona texto onclick="setfocus()"> </form> </body> </html>
Como podemos ver, es posible conseguir el contenido de los formularios de la pgina por medio de la matriz forms[]
de document.
14.3 Caso 3: obtener y cambiar la URL de un formulario.

<html> <head> <script type="text/javascript"> function getAction() { var x=document.forms.myForm; alert(x.action);
} function changeAction(action) { var x=document.forms.myForm; x.action=action; alert(x.action); } </script> </head>
<body> <form name="myForm action="ejemplos.php"> <input type="button onclick="getAction()" value="Ver
el valor del atributo action"> <br><br> <input type="button onclick="changeAction('hola.php')" value="Cambiar el valor del atributo action"> </form> </body> </html>
33
34
CAPTULO 14. EJEMPLOS DE CDIGO
En este ejemplo podemos ver otra forma de utilizar los formularios en el cdigo JavaScript.
14.4 Caso 4: como actualizar dos iframes al mismo tiempo.

<html> <head> <script language="javascript"> function twoframes() { document.all(frame1).src="frame_c.htm";
document.all(frame2).src="frame_d.htm"; } </script> </head> <body> <iframe src="frame_a.htm name="frame1"></iframe>
<iframe src="frame_b.htm name="frame2"></iframe> <br> <form> <input type="button onclick="twoframes()"
value="Cambiar la URL de los dos iframes"> </form> </body> </html>
Escrbanse las cuatro pginas de los frames que se especican y probar. Es muy sencillo darse cuenta de que la funcin
all nos permite acceder a los distintos elementos de la pgina, al igual que lo hemos hecho antes de otras formas.
14.5 Caso 5: conocer los datos del navegador.
<html> <body> <script type="text/javascript"> document.write("<p>Navegador: "); document.write(navigator.appName

+ "</p>"); document.write("<p>Versin: "); document.write(navigator.on + "</p>"); document.write("<p>C:
"); document.write(navigator. + "</p>"); document.write("<p>Plataf: "); document.write(navigator. +
"</p>"); document.write("<p>Cookies : "); document.write(navigator. + "</p>"); document.write("<p>Cabecera
de agentnavegador: "); document.write(navigator. + "</p>"); </script> </body> </html>
14.6 Caso 6: conocer los datos relacionados con la pantalla.
<html> <body> <script language="javascript"> document.write(Resolucin de pantalla: "); document.write(screen.width

+ "*" + screen.height); document.write("<br>"); document.write(Area visible disponible: "); document.write(screen.availWidth
+ "*" + screen.availHeight); document.write("<br>"); document.write(Resolucin de color: "); document.write(screen.colorDepth
document.write(" bits<br>"); </script> </body> </html>
14.7 Caso 7: refrescar el contenido de una pgina.

<html> <head> <script type="text/javascript"> function refresh() { window.location.reload(); } </script> </head>
<body> <form> <input type="button value="Refrescar pgina onclick="refresh()"> </form> </body> </html>
14.8 Caso 8: Generar un reloj a intervalos de un segundo.
<html> <head> <script language="javascript"> var intval="" function start_Int() { if(intval=="") { intval=window.setInterval(start_cloc
} else { stop_Int(); } } function stop_Int() { if(intval!="") { window.clearInterval(intval); intval=""; document.formu.tiempo.value="Tiem
detenido"; } } function start_clock() { var d=new Date(); // Creamos una variable d de tipo Date. var sw="am"; var
h=d.getHours(); // Asignamos a h la horas obtenidas de d. var m=d.getMinutes() + ""; var s=d.getSeconds() + "";
if(h>12) { h-=12; sw="pm"; } if(m.length==1) { m="0 + m; } if(s.length==1) { s="0 + s; } document.formu.tiempo.value=h
+ ":" + m + ":" + s + " " + sw; } </script> </head> <body> <form id="formu name="formu"> <input type="text
name="tiempo value="Tiempo parado"> </form> <input type="button value="Empezar onclick="start_Int()">
<input type="button value="Parar onclick="stop_Int()"> <p>Este ejemplo actualiza el contenido del cuadro
de texto cada segundo. Pulsa Empezar para iniciar la funcin setInterval. Pulsa Parar para detener el tiempo con
la funcin clearInterval.</p> </body> </html>
14.9. CASO 9: GENERAR OTRO RELOJ, FECHA Y HORA A INTERVALOS DE UN SEGUNDO.
35
Estdiese bien este ejemplo. La variable intval contiene un valor que setInterval genera, y con el que podremos detener
el intervalo usndolo en la llamada a clearInterval. Especialmente interesante es la funcin start_clock, que formatea
la hora para su visualizacin.
14.9 Caso 9: Generar otro reloj, fecha y hora a intervalos de un segundo.
<html> <head> <title>Proforma de Computadora</title> <script> function relojFecha(){ var mydate=new Date();var
year=mydate.getYear(); if (year < 1000)year+=1900; var day=mydate.getDay(); var month=mydate.getMonth(); var
daym=mydate.getDate(); if (daym<10)daym="0"+daym; var dayarray=new Array(Domingo,"Lunes,"Martes,"Miercoles,"Jueves,"
var montharray=new Array(Enero,"Febrero,"Marzo,"Abril,"Mayo,"Junio,"Julio,"Agosto, Septiembre,"Octubre,"Noviembre
var horas = mydate.getHours(); horas = (horas<10)?"0"+horas:horas; var minutos = mydate.getMinutes(); minutos =
(minutos<10)?"0"+minutos:minutos; var segundos = mydate.getSeconds(); segundos = (segundos<10)?"0"+segundos:
segundos; document.getElementById(idReloj).innerHTML = "<"+"small><"+"font color='000000' face='Verdana'>"+
dayarray[day]+" "+daym+" de "+montharray[month]+" de "+ year+" "+horas+":"+minutos+":"+segundos+"<"+"/font><"+"/small>";
setTimeout('relojFecha()',1000); } </script> </head> <body onload="relojFecha()"> <p id="idReloj"></p>
</body> </html>
Tngase en cuenta que, a diferencia del anterior ejemplo, el reloj est orientado a usar setTimeout, que permite lanzar
la funcin relojFecha cada segundo. Por ello, no se puede parar y se lanza usando el evento onload de body.
14.10 Caso 10: Manejando el canvas para grcos web.

El siguiente ejemplo muestra un conjunto de partculas distribuidas en un plano (Global Array of Particles) con un
movimiento vertical browniano que son representadas en un canvas en perspectiva caballera (falso 3D). Este ejemplo
ha sido probado en Firefox 3.5 aunque debera funcionar en cualquier navegador con soporte para canvas.
<html> <head> <script> var gcc ; // gcc == Global Canvas Context var gap = []; // gap == Global Array of Particles var SINPI_4 = Math.sin(Math.PI/4); var COSPI_4 = Math.cos(Math.PI/4); function ObjectParticle(posX,
posY, posZ){ this.posX = posX; this.posY = posY; this.posZ = posZ; this.kgr = 0.01; } function drawParticle(context,
part) { posX = part.posX - (0.5 * COSPI_4 * part.posY) ; posY = (0.5 * part.posY*SINPI_4) ; context.moveTo(posX,posY);
posY-= + part.posZ; posX = part.posX - (0.5 * COSPI_4 * part.posY) ; context.lineTo(posX,posY); } function redrawCanvas() { gcc.clearRect(0,0,1000,1000); gcc.strokeStyle = rgb(0,0,0)"; gcc.beginPath(); for (idx=0; idx<gap.length;
idx++) { drawParticle(gcc,gap[idx]); } gcc.stroke(); // <--- Or ll() } function simulatePhysics() { // La fsica simulada es muy simple. Movimiento browniano. for (idx=0; idx<gap.length; idx++) { par = gap[idx]; par.posZ +=
(Math.random()0.5); } redrawCanvas(); } function initParticles() { for (var posX=0; posX<=200; posX+=20){
for (var posY=0; posY<=200; posY+=20){ gap.push(new ObjectParticle(posX, posY, 0)); } } return; } function
initApp(){ canvas1 = document.getElementById('idCanvas1'); gcc = canvas1.getContext('2d'); gcc.scale(1.5,1.5);
gcc.translate(100,50); initParticles(); setInterval(simulatePhysics,100); } </script> <style type="text/css"> canvas {
border: 1px solid black; } </style> </head> <body onload="initApp();" > <canvas id="idCanvas1 width="500
height="500"></canvas> </body> </html>
14.11 Caso 11: Utilizando la consola de depuracin

Muchos navegadores soportan de forma estndar o como extensin una consola javascript que permite depurar y logear las aplicaciones de forma cmoda sin recurrir a trucos como mostrar un alertBox (p.ej Firefox utiliza la extensin
Firebug para ello). Para enviar un texto a la consola basta con hacer:
console.log(el valor de la variable laActiva es "+laActiva);
Para recorrer un objeto y mostrarlo en la consola como un rbol de objetos anidados:
console.dir(objDIVMarco1);
36
CAPTULO 14. EJEMPLOS DE CDIGO
14.12 Texto e imgenes de origen, colaboradores y licencias

14.12.1
Texto
Programacin en JavaScript Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript?oldid=281326 Colaboradores: ManuelGR, Caiser~eswikibooks, Lain~eswikibooks, Jorolo, Ciencia Al Poder, Juanromerocruz, Kausario, Swazmo, Juan.corrales,
lvaro M, Magister Mathematicae, Rjarl, Oleinad, Ramac, MABot, Drinibot, Ortisa, CarsracBot, Earizon, Mjbmrbot, Raulbcneo, Tegel,
Polyglottos, Matiia, Syum90, Pablo Ivn G. Soto, Julian99david, Viartola y Annimos: 19
Programacin en JavaScript/Introduccin Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Introducci%
C3%B3n?oldid=175589 Colaboradores: Jag2kn, Ciencia Al Poder, Magister Mathematicae, Joanumbert~eswikibooks, Drinibot, JackPotte, Ruy Pugliesi, Raulbcneo y Annimos: 4
Programacin en JavaScript/Variables Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Variables?oldid=
256981 Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, NeoDalembert, Magister Mathematicae, Joanumbert~eswikibooks, Kved, Josemiguel93, JackPotte, Raulbcneo, Syum90 y Annimos: 2
Programacin en JavaScript/Control Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Control?oldid=175592
Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, Magister Mathematicae, JackPotte, Raulbcneo y Annimos: 1
Programacin en JavaScript/Control/Condicionales Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Control/
Condicionales?oldid=174806 Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, Magister Mathematicae, Joanumbert~eswikibooks, Josemiguel93, Raulbcneo y Annimos: 3
Programacin en JavaScript/Control/Bucles Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Control/Bucles?
oldid=259149 Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, NeoDalembert, Juan.corrales, Magister Mathematicae, Joanumbert~eswikibooks, JackPotte, Earizon, Raulbcneo, Syum90 y Annimos: 5
Programacin en JavaScript/Funciones Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Funciones?oldid=
276308 Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, Ing.jorge.lam, Magister Mathematicae, JackPotte,
Raulbcneo, Syum90 y Annimos: 5
Programacin en JavaScript/FuncionesJS Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/FuncionesJS?
oldid=222952 Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, Magister Mathematicae, Jarisleif, Morza, Raulbcneo y Annimos: 4
Programacin en JavaScript/OOP Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/OOP?oldid=171365
Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, Valenluis, Magister Mathematicae, Covi, Suzuma, Drinibot y
Annimos: 3
Programacin en JavaScript/ClasesJS Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/ClasesJS?oldid=
197622 Colaboradores: Caiser~eswikibooks, Lain~eswikibooks, Ciencia Al Poder, Magister Mathematicae, Antbiel, JackPotte, Raulbcneo, Ralgisbot y Annimos: 1
Programacin en JavaScript/Formularios Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Formularios?
oldid=286206 Colaboradores: Lain~eswikibooks, Ciencia Al Poder, Magister Mathematicae, Oleinad, Defender, Raulbcneo, LlamaAl y
Annimos: 5
Programacin en JavaScript/Cmo escribir cdigo en JavaScript Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_
JavaScript/C%C3%B3mo_escribir_c%C3%B3digo_en_JavaScript?oldid=171382 Colaboradores: Ciencia Al Poder, Magister Mathematicae, MarcoAurelio, Earizon y Annimos: 5
Programacin en JavaScript/Operadores en JavaScript Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/
Operadores_en_JavaScript?oldid=171375 Colaboradores: Ciencia Al Poder, Magister Mathematicae, DarkInVader~eswikibooks y Annimos: 1
Programacin en JavaScript/Ejemplos de cdigo Fuente: https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Ejemplos_
de_c%C3%B3digo?oldid=219214 Colaboradores: Ciencia Al Poder, Magister Mathematicae, Rjarl, Kved, Wutsje, Earizon, Mecamtico
y Annimos: 17
14.12.2
Imgenes
14.12.3
Licencia de contenido
Creative Commons Attribution-Share Alike 3.0

Javascript de Wikilibros

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript de Wikilibros

Uploaded by

Copyright:

Available Formats

javascript

Qu podemos hacer con JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tipos de datos en JavaScript

Operar con variables

Operadores lgicos y relacionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

For sobre listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Qu son las funciones? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Funciones con parmetros

Mostrar ventana de conrmacin (aceptar o cancelar) . . . . . . . . . . . . . . . . . . . . . . . .

Abrir una ventana nueva

Cambiar la URL actual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Imprimir una pgina

Cambiar el tamao de la ventana actual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Avanzar a una posicin especca de la ventana

Retrasar la ejecucin del programa durante un tiempo determinado . . . . . . . . . . . . . . . . .

Cambiar una imagen por otra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10.1 Clase Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10.2 Clase Date

10.3 Clase Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10.4 Clase String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11.1 Gestin del formulario de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12.2 Los nombres de las variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14.2 Caso 2: seleccionar el texto de un cuadro de texto y darle el foco. . . . . . . . . . . . . . . . . . .

14.3 Caso 3: obtener y cambiar la URL de un formulario. . . . . . . . . . . . . . . . . . . . . . . . . .

14.4 Caso 4: como actualizar dos iframes al mismo tiempo. . . . . . . . . . . . . . . . . . . . . . . . .

14.5 Caso 5: conocer los datos del navegador. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14.6 Caso 6: conocer los datos relacionados con la pantalla. . . . . . . . . . . . . . . . . . . . . . . . .

14.7 Caso 7: refrescar el contenido de una pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14.8 Caso 8: Generar un reloj a intervalos de un segundo. . . . . . . . . . . . . . . . . . . . . . . . . .

14.9 Caso 9: Generar otro reloj, fecha y hora a intervalos de un segundo. . . . . . . . . . . . . . . . . .

14.10Caso 10: Manejando el canvas para grcos web. . . . . . . . . . . . . . . . . . . . . . . . . . . .

14.11Caso 11: Utilizando la consola de depuracin . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14.12Texto e imgenes de origen, colaboradores y licencias . . . . . . . . . . . . . . . . . . . . . . . .

14.12.3 Licencia de contenido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1.1 ndice de contenido

CAPTULO 1. PROGRAMACIN EN JAVASCRIPT

2.1 Qu podemos hacer con JavaScript?

2.2 Caractersticas de JavaScript

3.1 Tipos de datos en JavaScript

3.2 Declaracin de variables

3.3 Operar con variables

3.4 Arrays (Matrices)

3.4. ARRAYS (MATRICES)

var matriz = new Array();

5.3 Operadores lgicos y relacionales

Modicacin de la variable de control dentro del bucle

6.2 Bucles anidados

6.3 Bucles innitos

6.4. FOR SOBRE LISTAS

6.4 For sobre listas

var total = suma(1,2); // 3 alert(suma(7,43)); // 50 document.write(total + suma(54,7)); // 50

7.2 Funciones con parmetros

7.3 Devolucin de datos

7.4. FUNCIONES RECURSIVAS

7.4 Funciones recursivas

8.1 Mostrar ventana de conrmacin (aceptar o cancelar)

8.2 Abrir una ventana nueva

8.3 Cambiar la URL actual

8.4. IMPRIMIR UNA PGINA

value="Mostrar la URL actual"> <input type="button onclick="cambiar_location()" value="Cambiar URL"> </form>

8.4 Imprimir una pgina

8.5 Cambiar el tamao de la ventana actual

8.6 Avanzar a una posicin especca de la ventana

8.7 Retrasar la ejecucin del programa durante un tiempo determinado

<html> <body> <script type="text/javascript"> document.write("<p>Navegador: "); document.write(navigator.appName