Javascript de Wikilibros
39
javascript wikilibros
-
Upload
no-tampoco -
Category
Documents
-
view
231 -
download
0
description
Una compilación en pdf del wikilibro sobre javascript
Transcript of Javascript de Wikilibros
javascriptwikilibrosndice general1 Programacin en JavaScript
11.1 ndice de contenido . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 11.2 Autores . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 12 Introduccin 32.1 Qu podemos hacer con JavaScript?.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
32.2 Caractersticas de JavaScript . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 33 Variables 53.1 Tipos de
datos en JavaScript . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . 53.2 Declaracin de variables . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
53.3 Operar con variables . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . 63.4 Arrays (Matrices) . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 64 Control 85 Condicionales 95.1 If . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . 95.2 Switch. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95.3
Operadores lgicos y relacionales . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . 106 Bucles 116.1 For . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 116.1.1 Modicacin de la variable de control
dentro del bucle . . . . . . . . . . . . . . . . . . . 126.2 Bucles
anidados . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 126.3 Bucles innitos . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 126.4 For sobre listas . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 136.5 While . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 137 Funciones 157.1 Qu son las funciones?. .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . 157.2 Funciones con parmetros . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . 167.3 Devolucin de
datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 167.4 Funciones recursivas . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17iii
NDICE GENERAL8 FuncionesJS 188.1 Mostrar ventana de conrmacin
(aceptar o cancelar) . . . . . . . . . . . . . . . . . . . . . . .
. 188.2 Abrir una ventana nueva . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 188.3 Cambiar la URL
actual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . 188.4 Imprimir una pgina . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198.5
Cambiar el tamao de la ventana actual . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . 198.6 Avanzar a una posicin
especca de la ventana . . . . . . . . . . . . . . . . . . . . . . .
. . . . 198.7 Retrasar la ejecucin del programa durante un tiempo
determinado . . . . . . . . . . . . . . . . . 198.8 Cambiar una
imagen por otra . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . 199 OOP 209.1 Creacin de funciones miembro .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2110ClasesJS 2310.1Clase Array . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2310.2Clase
Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 2410.3Clase Math . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 2410.4Clase String . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . 2411Formularios
2711.1Gestin del formulario de datos . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . 2712Cmo escribir cdigo en
JavaScript 3012.1Los comentarios . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 3112.2Los
nombres de las variables . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . 3113Operadores en JavaScript
3214Ejemplos de cdigo 3314.1Caso 1: Cmo conseguir que un enlace
gane o pierda el foco de entrada. . . . . . . . . . . . . . . .
3314.2Caso 2: seleccionar el texto de un cuadro de texto y darle el
foco. . . . . . . . . . . . . . . . . . . 3314.3Caso 3: obtener y
cambiar la URL de un formulario. . . . . . . . . . . . . . . . . .
. . . . . . . . 3314.4Caso 4: como actualizar dos iframes al mismo
tiempo. . . . . . . . . . . . . . . . . . . . . . . . . 3414.5Caso
5: conocer los datos del navegador. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . 3414.6Caso 6: conocer los datos
relacionados con la pantalla. . . . . . . . . . . . . . . . . . . .
. . . . . 3414.7Caso 7: refrescar el contenido de una pgina. . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . 3414.8Caso 8:
Generar un reloj a intervalos de un segundo. . . . . . . . . . . .
. . . . . . . . . . . . . . 3414.9Caso 9: Generar otro reloj, fecha
y hora a intervalos de un segundo. . . . . . . . . . . . . . . . .
. 3514.10Caso 10: Manejando el canvas para grcos web. . . . . . . .
. . . . . . . . . . . . . . . . . . . . 3514.11Caso 11: Utilizando
la consola de depuracin. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 3514.12Texto e imgenes de origen, colaboradores y
licencias . . . . . . . . . . . . . . . . . . . . . . . . 3614.12.1
Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . 3614.12.2 Imgenes . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3614.12.3 Licencia de contenido . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . 36Captulo 1Programacin en
JavaScriptProgramacin en JavaScript1.1 ndice de contenido1.
Introduccin2. Las variables en JavaScript3. Sentencias de
control(a) Condicionales(b) Bucles4. Funciones5. Funciones en
JavaScript6. Clases y objetos7. Clases predeterminadas en
JavaScript8. Gestin de formularios9. APNDICE A. Cmo escribir cdigo
en JavaScript10. APNDICE B. Operadores en JavaScript11. APNDICE C.
Ejemplos de cdigo12. APNDICE D. Palabras reservadasPuedes encontrar
todo el texto del libro en una sola pgina, ideal para imprimir o
guardar en el disco duro.1.2 AutoresSi introduces algn cambio en
este libro, aade tu nombre aqu:JULIAN DAVID DELGADO. Actualizacin
de artculos. 15 de Febrero de 2015.Mario Vera Aguirrejuan
madariaga12 CAPTULO 1. PROGRAMACIN EN JAVASCRIPTMarcos Legido
Hernndez2006-05-25, Kausario -> ejemplo 7, correccin
window.location.reload();"2006-12-06, Control -> Bucles,
correccin En otros bucles existen bucles -> En otros lenguajes
de progra-macin existen bucles2007-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 condicionesde 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 diceif(1) que, como se puede probar,
arroja el mensaje puesto con alert. Sin embargo en el comentario
respecto alejemplo, se dice lo contrario. Si se cambia por if(0) o
if(3) el ejemplo estara bien. Ms completo podra seraadirle un else
para que diga que en esta instruccin no es true.2010 - 01 - 11,
EArizon -> Ejemplos de uso del canvas en Javascript2011-05-18,
rbarahona -> Correccin de enlaces en los mens de navegacin.
Correccin del texto en variosapartados.11/01/2015, Pablo Ivn G.
Soto -> Correccin Ortogrca.Captulo 2IntroduccinEl JavaScript es
un lenguaje de programacin ampliamente utilizado en el mundo del
desarrollo web por ser muy ver-stil 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 ActionScriptde
Macromedia, que acompaa al sistema Flash.JavaScript es un lenguaje
interpretado que, al contrario de las aplicaciones normales, que
son ejecutadas por el siste-ma operativo, es ejecutado por el
navegador que utilizamos para ver las pginas. Eso hace que podamos
desarrollaraplicaciones de muy diverso tipo, desde generadores de
HTML, comprobadores de formularios, etc..., hasta progra-mas que
gestionen las capas de una pgina. Pueden desarrollarse incluso
aplicaciones que permitan poder tener capasen una pgina como si
fueran ventanas, y dar la sensacin de estar trabajando con una
aplicacin con interfaz deventanas.JavaScript no es el nico lenguaje
que podemos encontrar en la web. Tambin tenemos a su gran
contrincante: Vi-sual Basic Script. Este lenguaje, desarrollado por
Microsoft, est basado en el lenguaje Basic de esta empresa,
perodesgraciadamente slo puede utilizarse en el navegador Internet
Explorer. Si queremos que nuestras pginas dinmi-cas puedan ser
vistas desde cualquier navegador y sistema operativo, la eleccin ms
adecuada es sin lugar a dudasJavaScript.2.1 Qu podemos hacer con
JavaScript?Pginas dinmicas (DHTML)Comprobacin de datos
(Formularios)Uso de los elementos de la pgina webIntercambiar
informacin entre pginas web en distintas ventanasManipulacin de
grcos, texto, etc...Comunicacin con plug-ins: Flash, Java,
Shockwave, etc...2.2 Caractersticas de JavaScriptJavaScript
comparte muchos elementos con otros lenguajes de alto nivel. Hay
que tener en cuenta que este lenguajees muy semejante a otros como
C, Java o PHP, tanto en su formato como en su sintaxis, aunque por
supuesto tienesus propias caractersticas denitorias.JavaScript es
un lenguaje que diferencia entre maysculas y minsculas, por lo que
si escribimos alguna expresinen minsculas, deberemos mantener esa
expresin en minsculas a lo largo de todo el programa. Si escribimos
esamisma expresin en maysculas, ser una expresin diferente a la
primera. Esto es as en la mayora de los lenguajesde este tipo, como
PHP.34 CAPTULO 2. INTRODUCCINOtra 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 conellas,
como operaciones matemticas o de texto. Los operadores que permiten
encerrar expresiones deben abrirsesiempre. '(', '{' 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
consideremosmejor, aunque por supuesto debemos escribir siempre de
la forma correcta. Por ejemplo, podemos escribir las lneascon 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. Tambinpodemos 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
queutilizar 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 loslenguajes, es opcional en JavaScript. Si usamos
este operador, podemos incluir varias sentencias en la misma lnea
decdigo, y si no lo usamos, slo podemos escribir una sentencia cada
vez. De todas formas, aconsejamos usar el puntoy coma porque en
otros lenguajes como PHP o Java, este operador es
obligatorio.Captulo 3VariablesEn un programa JavaScript nos podemos
encontrar con dos elementos bsicos: cdigo y datos. La parte del
cdigoes la que nos permite hacer cosas dentro de la pgina web, y la
parte de datos es la que dene el estado de la pginaweb 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 queen 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
JavaScriptExisten 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
variablesA 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 condecimales: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 cuandotrabajemos con ello (podemos
incluso combinarlas dentro de la misma cadena).56 CAPTULO 3.
VARIABLESTambin 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 paracrear 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
usaren 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 sonms complicados. Podemos manipular todos
ellos segn sus caractersticas y su forma de interactuar con el
entornodonde 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 hacercosas: podemos
poner cosas encima, podemos usarla para comer o leer y a veces
podemos colgar cosas de ellas, porejemplo en un revistero. Todo eso
son mtodos o comportamientos que la mesa tiene para interactuar con
el resto desu 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 unobjeto window,
una pgina HTML es un objeto document, y una imagen es un objeto de
tipo Image. Es fcil darsecuenta de que los objetos son de un
determinado tipo: un objeto mesa, un objeto ventana, un objeto
ratn, etc... Todoslos objetos de un mismo tipo tienen
caractersticas semejantes, aunque luego cada objeto tiene
propiedades con valoresdistintos dependiendo de cada caso. As, dos
mesas puede tener color marrn o azul, pero las dos seguirn
teniendopatas, que pueden ser 4 5, depende... En JavaScript, los
objetos son muy importantes, como vamos a comprobar enel siguiente
captulo, que trata de los arrays (matrices) y las sentencias de
control.3.3 Operar con variablesComo ya estudiamos en el captulo
anterior, en JavaScript podemos denir unos elementos llamados
variables que nospermiten almacenar datos de distintos tipos.
Naturalmente, nosotros podemos usar esos datos en nuestros
programasy, como ya se indic entonces, podemos incluso variar esos
datos manteniendo la variable donde los depositamos. Aesta 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
expresionesy llamadas a funciones... Podemos tratar con variables
para almacenar los datos que vamos a usar a lo largo delprograma,
tanto globalmente en toda la aplicacion como de forma exclusiva con
las funciones que creemos, comoveremos 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 hemoshecho es declarar la
variable numero con el valor inicial 1. Despues, hemos incrementado
el valor de la variable conla misma variable, sumndole 2, y
posteriormente hemos vuelto a incrementar la variable sumndole 3
por medio deloperador 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
variablescomo tales slo nos permiten gestionar un dato cada una de
ellas, con lo que cuando tenemos que gestionar gruposmayores 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 enconcreto, con lo que tenemos
pululando por nuestro programa siete variables a las que ser difcil
referirnos de unaforma genrica (por ejemplo, como estudiaremos ms
adelante, para listarlos dinmicamente en un formulario).
Pararesolver 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) 7var matriz = new
Array();De esta forma, hemos creado una matriz vaca que puede
contener un numero ilimitado de elementos, tantos comonos 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 depositandocosas.Adems, podemos crear matrices con una dimensin,
es decir, que podemos hacer que la matriz se inicie con unnmero 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 sabercmo 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 lamatriz, 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,
parael 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 tipode 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 tipoArray,
y los objetos pueden tener atributos (datos) y funciones (cdigo).
El atributo que debemos usar con matriceses length:longitud =
matriz.length;De esta forma, podemos saber cuantos elementos tiene
la matriz. Recordad que como el primer ndice es 0, el ltimoelemento
ser siempre matriz.length - 1.Si necesitamos que la matriz contenga
ms elementos, podemos redimensionar la matriz aplicndole un nuevo
objetode matriz:matriz = new Array(longitud que queramos);Sin
embargo, perderemos todos los elementos que tuviramos
anteriormente.Captulo 4ControlUna vez que nos sabemos manejar con
variables y matrices, que son los datos de nuestros programas,
debemosaprender 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 unprograma.
Necesitamos escribir cdigo fuente que nos permita conseguir que el
programa haga cosas. Normalmentelos programas tienen un ujo de
ejecucin: se ejecuta lnea a lnea, interpretndolas y comprobando el
resultado de laejecucin. Pero a veces eso no es suciente. A veces
tenemos que controlar lo que hace el programa,
permitindonosejecutar un cdigo u otro dependiendo de las
circunstancias, o bien repetir el mismo cdigo varias veces segn
unascondiciones concretas.Cuando nos levantamos por la maana,
miramos por la ventana para decidir qu ropa nos ponemos. Decidimos
entreuna 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.8Captulo 5Condicionales5.1 IfEn 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 (veremosms adelante cmo crear condiciones). Si la condicin
es vlida (si es verdadera), se ejecutar el primer bloque decdigo
que est entre llaves ({}); si no, se ejecutar el siguiente bloque
de cdigo, el que se encuentra debajo de lapalabra 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, deforma 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
deedad leyendo el valor de la variable: si edad es mayor o igual
que 18, entonces le decimos que es mayor de edad; sino, 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 ins-truccin else if.if (edad > 18) {
alert(Tienes ms de 18 aos); } else if (edad == 18) { alert(Tienes
18 aos); } else { alert(Tienesmenos de 18 aos); }De esta forma,
podemos extender las condiciones todo lo que queramos para cubrir
todos los casos necesarios. Hayque destacar que todas las
condiciones son sucesivas y que slo se ejecuta una de ellas. Adems,
el ltimo else es elque se ejecuta en el caso de que ninguno de los
if anteriores sea vlido.5.2 SwitchHemos visto cmo gracias a if-else
podemos decidir qu hacer en determinadas situaciones. Pero a veces
slo querre-mos decidir entre unos valores, y ejecutar cdigo
dependiendo de los posibles valores de una variable o devueltos
poruna 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 losanteriores }En este ejemplo,
comprobamos varios valores de la variable variable, de forma que
cada uno de ellos permite ejecutarun cdigo diferente dependiendo de
la situacin. Ahora bien, si nos jamos en valor3, valor4 y valor5,
comprobamosque slo se ejecutar el cdigo que aparece bajo valor5,
porque los otros valores estn vacos, pero tambin porque notienen
una clusula break. Esta palabra reservada corta la ejecucin del
cdigo Javascript en el punto en que aparece,910 CAPTULO 5.
CONDICIONALESsaliendo 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 complicadasoperaciones que debemos
realizar en if. Sin embargo, switch no puede nunca sustituir a if,
situacin que a la inversas ocurre.5.3 Operadores lgicos y
relacionalesPara 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 complejasjuntando 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
en-contremos. Podemos ver cmo es posible tomar decisiones ms
complejas que las que veamos al principio del temajuntando varias
condiciones por medio de los operadores lgicos. Debemos usar
&& (AND lgico) cuando queramosque la resolucin de la
condicin se encuentre incluida en las dos condiciones que
indicamos. Debemos usar || (ORlgico) cuando queramos que la
resolucin de la condicin no se incluya en las condiciones que
usamos. As, cuandodecimos que (edad >= 31 || edad 8.2 Abrir una
ventana nuevafunctionopen_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); } El primer
parmetro deopen es la direccin que queremos mostrar en la ventana.
El segundo es el nombre quequeremos darle a la ventana (y que
podemos usar, por ejemplo, en el atributo target de los enlaces).
El tercer y ltimoparmetro nos permite denir el aspecto de la
ventana segn los datos que le indicamos.8.3 Cambiar la URL actualEl
siguiente ejemplo nos muestra el uso de location para conseguir la
direccin de la pgina actual en la que nosencontramos o bien ir a
una pgina diferente:functionactual_location() { alert(location); }
function cambiar_location(){
window.location="http://www.google.es/"; } 8.4 Imprimir una pgina
function printpage() { window.print(); } 8.5 Cambiar el tamao de la
ventana actualfunctionresizeWindow() { window.resizeBy(100,100) }
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
SCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLLSCROLL
8.7 Retrasar la ejecucin del programa durante un tiempo determinado
function timeout() { setTimeout(alert('Esta ventana aparece
unsegundo despus de que hayas pulsado el botn')", 1000) } // tambin
se puede en forma de vector: //...agName('body')[0]; pero no es
compatible con Opera. varcapa = document.createElement('div'); //
Divisin al vuelo var texto = document.createTextNode(this.texto);
// Tex-to 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); } } } // ]]> ");
document.write(famname.reverse() + "
"); document.write(famname.push(Ola,"Jon) + "
");document.write(famname.pop() + "
"); document.write(famname.shift() + "
"); 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 cantidadde 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 unaordenacin
nmerica, podemos crear una funcin de comparacin como veremos en el
siguiente ejemplo: Nota: Si no usamos funcin de comparacin para
denir el orden, la matriz se ordenar siemprealfabticamente. 500
vendr antes que 7, pero en una ordenacin numrica, 7 viene antes que
500. Este ejemplomuestra como usar la funcion de comparacin - que
ordenar correctamente los elementos tanto en una matriz nu-mrica
como de cadenas. 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);functioncompareNum(a, b) { return
a-b; } document.write(Ordenado: " +array1.sort());
document.write("
");document.write(Ordenado sin compareNum: " +array2.sort());
document.write("
"); document.write(Ordenadocon compareNum: " +
array2.sort(compareNum)); document.write("
"); document.write(Ordenado sincompareNum: " +array3.sort());
document.write("
"); document.write(Ordenado con compareNum: "
+array3.sort(compareNum));document.write("
"); document.write(Ordenado sin compareNum: " +array4.sort());
document.write("
");document.write(Ordenado con compareNum: " +
array4.sort(compareNum)); Como podemos apreciar en el cdigo, slo
las llamadas a sort que tienen como parmetro la funcin de
comparacincompareNum han sido ordenadas numricamente.2324 CAPTULO
10. CLASESJS10.2 Clase DateEsta clase permite denir una fecha y
hora. Tiene una buena cantidad de funciones y aqu vamos a estudiar
algunasde las ms interesantes.var d =newDate();
document.write(d.getDate());
document.write(".);document.write(d.getMonth() +1);
document.write(".); document.write(d.getFullYear()); Este ejemplo
construye la fecha actual mediante los mtodos getDate, getMonth y
getFullYear. El valor base degetMonth 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:var d =newDate(); document.write(d.getHours());
document.write(".);document.write(d.getMinutes());
document.write(".); document.write(d.getSeconds()); La dinmica de
este ejemplo es muy parecida al anterior, pero en este caso usamos
getHours, getMinutes y getSe-conds. 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 lafecha 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 dosltimas cifras del ao (de 00 a 99).
Algo a tener en cuenta es que con esto no cambiamos ningn parmetro
de lafecha y hora del sistema, si no del objeto Date
exclusivamente.En el siguiente ejemplo veremos como mostrar los das
de la semana: var d = newDate(); var weekday = newArray(Domingo,
Lunes,Martes, Miercoles, Jueves, Viernes, Sbado);
document.write(Hoy es " + weekday[d.getDay()]); Como vemos, podemos
crear una matriz con los das de la semana (comenzando por el
domingo, dado que se toma lareferencia anglosajona), y referenciar
a sus elementos con la funcin getDay. Tambin podemos usar otras
funcionescomo getMonth, getYear, getHours, getMinutes y
getSeconds.10.3 Clase MathEsta clase contiene funciones y
propiedades relacionadas con las
matemticas.document.write(Math.round(7.25) +"
"); document.write(Math.random()+ "
"); no = Math.random()*10; document.write(Math.round(no) + "
"); document.write(Math.max(2,4) +"
"); document.write(Math.min(2,4) + "
"); La funcin round permite redondear una cifra de coma otante a un
entero. random genera un nmero aleatorio, osi queremos que este
nmero se encuentre entre 1 y 10, lo podemos hacer como en la
siguiente linea, generando unnmero aleatorio y multiplicndolo por
el mximo que queremos. max y min devuelven el nmero mximo y
mnimoentre dos dados, respectivamente. Asu 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). Comopuede comprobarse tambin, no hace
falta crear un objeto para usar esta clase (se las denomina clases
estticas).10.4 Clase StringEsta 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.
var str = "JavaScript es malo!"; document.write("" + str +"");
document.write(str.length +"
"); document.write("" +str.fontcolor() +""); document.write(""+
str.fontcolor('red') + ""); document.write("" +
str.fontcolor('blue') + ""); document.write(""
+str.fontcolor('green') + ""); var pos = str.indexOf(Script); if
(pos >= 0) { document.write(Script encontra-10.4. CLASE STRING
25do en la posicin: "); document.write(pos + "
"); } else { document.write("Script no encontrado!" + "
");} document.write(str.substr(2,6)); document.write("
"); document.write(str.substring(2,6) + "
"); do-cument.write(str.toLowerCase()); document.write("
"); document.write(str.toUpperCase() + "
"); En este ejemplo podemos ver varios ejemplos del funcionamiento
de las funciones de cadena que podemos encontraren la clase String.
La propiedadlength, como en Array, nos devuelve, en este caso, el
nmero de caracteres dela cadena de texto. fontcolor es una funcin
que permite generar cadenas de distintos colores (nombres o
valoreshexadecimales). 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 confuncionamientos diferentes.
substr nos devuelve una subcadena que comienza en el primer
parmetro, devolviendoel nmero de caracteres especicado en el
segundo parmetro. substring devuelve una subcadena que se
comprendeentre el primer y segundo parmetro (esto es, contando
siempre con un ndice base de 0). Por ltimo, toLowerCasey
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 losnavegadores y/o
versiones.PropiedadeslengthprototypeconstructorMtodosanchor()big()blink()bold()charAt()charCodeAt()concat()xed()fontcolor()fontsize()fromCharCode()indexOf()italics()lastIndexOf()link()localeCompare()match()replace()search()26
CAPTULO 10.
CLASESJSslice()small()split()strike()sub()substr()substring()sup()toLocaleLowerCase()toLocaleUpperCase()toLowerCase()toString()toUpperCase()valueOf()Captulo
11FormulariosUna de las utilidades ms interesantes de JavaScript es
la posibilidad de comprobar y gestionar formularios de formaque
podamos incluso evitar que se enve un formulario si los datos no
son correctos. Primero estudiaremos comocontrolar la gestin y el
envo de datos, y despus nos sumergiremos en la comprobacin
propiamente dicha de losdatos.11.1 Gestin del formulario de
datosCuando tenemos un formulario de datos que queremos enviar a un
servidor para su correspondiente gestin por partede una aplicacin
CGI, resulta muy interesante en ocasiones tener la posibilidad de
comprobar la integridad de losdatos antes de ser enviados al
servidor. Adems, tener la posibilidad de evitar el envo del
formulario nos permite unmayor control sobre su gestin. Veamos el
siguiente ejemplo: Tu nombre:
Tu edad: Podemos apreciar en el formulario que hemos aadido un
atributo nuevo, el evento onsubmit, que permite llamar auna funcin
creada por nosotros para comprobar los datos que vamos a enviar. La
expresinreturn comprobar()har que el contenido de onsubmit sea true
o false, dependiendo de lo que devuelva la funcion comprobar(). Si
elvalor es true, los datos se enviarn al servidor, y si es false,
se retendr la ejecucin del formulario. A continuacinestudiaremos
una posible funcin que podemos usar en este caso: 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.); returnfalse; } if (edad
>= 20 && edad 30) { alert(Tu nombre es demasiado grande.
Red-celo.); return false; } if (edad >= 20 && edad Vamos
a estudiar una serie de casos particulares que se alejan de alguna
forma de la forma de obtener valores quehemos visto en el ejemplo
anterior, o alternativas sobre como comprobar los datos. En el
siguiente ejemplo vemoscomo capturar el contenido de una serie de
radios, ya que podemos usar una funcin especca para comprobarque
efectivamente hemos pulsado uno de los radios": function
check(browser) { document.formu.respuesta.value = brow-ser; } Cmo
quieres tu ca-f?
Con crema
Con azcar
Como podemos ver, hay varias cosas a tener consideracin: los
checkboxes, al tener el mismo nombre (podran tenerlodistinto, pero
este ejemplo nos permite ver esta posibilidad), se agrupan en forma
de matriz, y por lo tanto, debemosrecorrer la lista de controles
para acceder a sus contenidos. En nuestro caso, accedemos a la
propiedad checked, quenos permite saber si el checkbox est pulsado
(true) o no (false). En la variable txt acumulamos los valores de
loscheckboxes (a los que accedemos por medio del correspondiente
ndice, como ya sabemos), y despus mostramos elresultado en la linea
de texto que hay ms abajo. Al introducir el texto en la propiedad
value, cambiamos tambin elcontenido del campo de texto.En el
siguiente ejemplo veremos como averiguar el dato pulsado en una
lista de datos:function cual() {
txt=document.formu.lista.options[document.formu.lista.selectedIndex].text;document.formu.favorito.value=txt;
} Internet ExplorerNetscapeOpera
Tu navegador favorito es: La
expresindocument.formu.lista.options[document.formu.lista.selectedIndex]11.1.
GESTIN DEL FORMULARIO DE DATOS 29nos permite acceder a una de las
opciones (es una matriz) de la lista de datos. En este caso, como
las opciones notienen 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 elementoactualmente seleccionado en la
lista, ya que no producir ningn evento. Hay que tener esto en
consideracin paraevitar posibles problemas a la hora de trabajar
con las listas. Un truco para subsanar este inconveniente es poner
unprimer option en blanco ( ) que ser el que aparezca al cargarse
el select.Captulo 12Cmo escribir cdigo en JavaScriptEn este apndice
aprenderemos a insertar cdigo JavaScript en nuestras pginas. Como
sabemos, las pginas web secomponen de cdigo HTML (HyperText Markup
Language), y para incluir el cdigo Javascript utilizamos una
marcaHTML, . Esta marca puede encontrarse en cualquier parte de la
pgina web, tanto en el como en el. Aunque es la forma ms corta
existen otras formas de denir cdigo script. Por ejemplo . W3C
recomienda utilizar el tag . Esta es una pagina web var mi_numero =
1; functioncalcula(numero) { return numero + mi_numero; }
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 navegadorcomo
Visual Basic Script y PerlScript, pero nosotros usamos Javascript
porque es universal: todos los navegadores losoportan, mientras que
los otros dependen de la plataforma donde nos encontremos. Para
indicar el lenguaje, podemosescribir lo siguiente: De esta forma
indicamos el lenguaje a usar. Esto es necesario en el caso de que
tengamos que usar lenguajes combi-nados 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 etiquetasHTML
tienen varios eventos que responden a determinados sucesos, como
por ejemplo el click del ratn, el envode un formulario, o la carga
de una pgina. Por ejemplo, si queremos que aparezca un mensaje al
cargar la pginaque estamos viendo, haramos algo como esto: texto
Esto har que aparezca un mensaje nada ms cargar la pgina web.
Tambin podemos aplicar estos eventos comoenlaces, botones, imgenes,
etc... Prcticamente cualquier etiqueta HTML soporta eventos como
onclick, que permiteresponder a una pulsacin del botn izquierdo del
ratn.Google En este ejemplo vemos cmo al mismo tiempo que vamos a
Google, el navegador nos avisa de lo que vamos a hacerantes 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 loscambios en los objetos Javascript.Y una ltima manera
de ejecutar cdigo Javascript es adjuntando un archivo al cdigo
principal, de tal forma quepodemos agrupar las funciones, clases y
dems en un archivo, y reutilizar ese archivo tantas veces como
queramosposteriormente. Un ejemplo puede ser
ste:funciones.js:function saludo(nombre) { alert('Hola, ' +
nombre); }saludo.html:3012.1. LOS COMENTARIOS 31 Esta es una pagina
web 14.2 Caso 2: seleccionar el texto de un cuadro de texto y darle
el foco.function setfocus() { document.forms[0].txt.select();
document.forms[0].txt.focus();} 3334 CAPTULO 14. EJEMPLOS DE
CDIGOEn 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. function twoframes() {
document.all(frame1).src="frame_c.htm";document.all(frame2).src="frame_d.htm";
}
Este ejemplo actualiza el contenido del cuadrode texto cada segundo. Pulsa Empezar para iniciar la funcin setInterval. Pulsa Parar para detener el tiempo conla funcin clearInterval.
14.9. CASO 9: GENERAR OTRO RELOJ, FECHA Y HORA A INTERVALOS DE UN SEGUNDO. 35Estdiese bien este ejemplo. La variable intval contiene un valor que setInterval genera, y con el que podremos detenerel intervalo usndolo en la llamada a clearInterval. Especialmente interesante es la funcin start_clock, que formateala hora para su visualizacin.14.9 Caso 9: Generar otro reloj, fecha y hora a intervalos de un segundo. Proforma de Computadora function relojFecha(){ var mydate=newDate();varyear=mydate.getYear(); if (year < 1000)year+=1900; var day=mydate.getDay(); var month=mydate.getMonth(); vardaym=mydate.getDate(); if (daym
