Tutorial Básico Javascript

TUTORIAL BSICO DE
JAVASCRIPT
Construccin de Elementos de
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Carlos A. Giraldo H.
TUTORIAL BSICO DE JAVASCRIPT.
DESARROLLADO POR:
Carlos Andrs Giraldo Hernndez
MDULO:
CONSTRUCCIN DE ELEMENTOS DE SOFTWARE WEB.
TCNICA PROFESIONAL EN PROGRAMACIN DE

SISTEMAS DE INFORMACIN EN CICLO
PROPEDUTICO CON TECNOLOGA EN
SISTEMATIZACIN DE DATOS
POLITCNICO JAIME ISAZA CADAVID

MEDELLN
2015
Pgina 1 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Contenido Sesin de Clase 1 y 2.

INTRODUCCIN ........................................................................................................................ 5
1.
Etiqueta noscript ................................................................................................................. 7
2.
Glosario bsico ................................................................................................................... 8
3.
Sintaxis ................................................................................................................................. 9
4.
Posibilidades y limitaciones ............................................................................................ 11
5.
JavaScript y navegadores ............................................................................................... 12
6.
JavaScript en otros entornos .......................................................................................... 12
7.
Variables ............................................................................................................................ 12
7.1.
Tipos de variables .................................................................................................. 15
7.1.1. Numricas ................................................................................................ 15

7.1.2. Cadenas de texto ..................................................................................... 16
7.1.3. Arrays ....................................................................................................... 17
7.1.4. Booleanos ................................................................................................ 19
7.2. Operadores................................................................................................................... 19
7.2.1. Asignacin ............................................................................................... 20
7.2.2. Incremento y decremento ....................................................................... 20
7.2.3. Lgicos ..................................................................................................... 22
Negacin ............................................................................................................ 22
AND..................................................................................................................... 24
OR ....................................................................................................................... 24
7.2.4. Matemticos ............................................................................................. 25
7.2.5. Relacionales ............................................................................................. 27
Estructuras de control de flujo ........................................................................................ 28
8.
8.1.1. Estructura if .............................................................................................. 29

8.1.2. Estructura if...else .................................................................................... 31
8.1.3. Estructura for ........................................................................................... 33
8.1.4. Estructura for...in ..................................................................................... 36
rbol de nodos .................................................................................................................. 37
9.
9.1.
Tipos de nodos ......................................................................................................... 41
9.2.
Acceso directo a los nodos (Selectores). ................................................................. 41
10.
Incorporando JavaScript .......................................................................................... 42
Pgina 2 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
En lnea: ................................................................................................................................ 42
Embebido: ............................................................................................................................ 44
Archivos externos:............................................................................................................. 47
Selectores (Acceso directo a los nodos). ............................................................ 48
11.
11.1.
getElementsByTagName() ................................................................................... 48
11.2. getElementsByName() .............................................................................. 49

11.3. getElementById() ...................................................................................... 50
12.
Nuevos Selectores ..................................................................................................... 50
querySelector(): .................................................................................................................. 51
querySelectorAll(): ............................................................................................................. 52
13.
Manejadores de eventos .......................................................................................... 55

Manejadores de eventos como atributos XHTML (En Lnea) .......................... 58
Manejadores de eventos y variable this ........................................................... 59
Manejadores de eventos como funciones externas ........................................ 61
Manejadores de eventos semnticos ............................................................... 63
El mtodo addEventListener(): ....................................................................................... 66

Propiedades bsicas de formularios y elementos usando JavaScript. .................. 68
Utilidades bsicas para formularios....................................................................................... 71
Obtener el valor de los campos de formulario ................................................ 71
Cuadro de texto y textarea ................................................................................ 71
Radiobutton ....................................................................................................... 72
Checkbox ........................................................................................................... 72
Select .................................................................................................................. 73
Establecer el foco en un elemento ................................................................... 75
Evitar el envo duplicado de un formulario ...................................................... 77
Limitar el tamao de caracteres de un textarea .............................................. 78
Restringir los caracteres permitidos en un cuadro de texto .......................... 79
Validacin .................................................................................................................................. 82
Validar un campo de texto obligatorio ......................................................................... 85
Validar un campo de texto con valores numricos................................................... 86
Validar que se ha seleccionado una opcin de una lista ........................................ 87
Validar una direccin de email ....................................................................................... 87
Validar una fecha ................................................................................................................ 88
Pgina 3 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Validar un nmero de DNI ................................................................................................ 89

Validar un nmero de telfono ....................................................................................... 89
Validar que un checkbox ha sido seleccionado ........................................................ 91
Validar que un radiobutton ha sido seleccionado..................................................... 91
Otras utilidades ......................................................................................................................... 92
Relojes, contadores e intervalos de tiempo................................................................ 93
Pgina 4 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
INTRODUCCIN
Imagnate a HTML5 como un edificio soportado por tres grandes columnas:

HTML, CSS y JavaScript. Ya hemos estudiado los elementos incorporados en
HTML y las nuevas propiedades que hacen CSS la herramienta ideal para
diseadores. Ahora es momento de revelar lo que puede ser considerado como
uno de los pilares ms fuertes de esta especificacin: JavaScript.
JavaScript es un lenguaje interpretado usado para mltiples propsitos pero

solo considerado como un complemento hasta ahora. Una de las innovaciones
que ayud a cambiar el modo en que vemos JavaScript fue el desarrollo de
nuevos motores de interpretacin, creados para acelerar el procesamiento de
cdigo. La clave de los motores ms exitosos fue transformar el cdigo
JavaScript en cdigo mquina para lograr velocidades de ejecucin similares a
aquellas encontradas en aplicaciones de escritorio.
Esta mejorada capacidad permiti superar viejas limitaciones de rendimiento y

confirmar el lenguaje JavaScript como la mejor opcin para la web.
Para aprovechar esta prometedora plataforma de trabajo ofrecida por los nuevos
navegadores, JavaScript fue expandido en relacin con portabilidad e
integracin. A la vez, interfaces de programacin de aplicaciones (APIs) fueron
incorporadas por defecto en cada navegador para asistir al lenguaje en funciones
elementales. Estas nuevas APIs (como Web Storage, Canvas, y otras) son
interfaces para libreras incluidas en navegadores. La idea es hacer disponible
poderosas funciones a travs de tcnicas de programacin sencillas y
estndares, expandiendo el alcance del lenguaje y facilitando la creacin de
programas tiles para la web.
Pgina 5 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
En este tutorial bsico, vamos a estudiar cmo incorporar JavaScript dentro de

nuestros documentos HTML y veremos las incorporaciones recientes a este
lenguaje con la intencin de prepararnos para la programacin ms adelante.
IMPORTANTE: Nuestro acercamiento a JavaScript en este tutorial es

introductorio.
Al igual que con CSS, solo vamos a repasar las tcnicas que necesitamos
entender para implementar los ejemplos de prximos temas. Trabajaremos
sobre temas complejos, pero solo usando un mnimo de cdigo necesario para
aprovechar estas nuevas caractersticas. Si necesita expandir sus conocimientos
sobre este lenguaje, lo invito a investigar este tema con ms profundidad.
Pgina 6 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
1. Etiqueta noscript
Algunos navegadores no disponen de soporte completo de JavaScript, otros
navegadores permiten bloquearlo parcialmente e incluso algunos usuarios
bloquean completamente el uso de JavaScript porque creen que as navegan de
forma ms segura.
En estos casos, es habitual que si la pgina web requiere JavaScript para su
correcto funcionamiento, se incluya un mensaje de aviso al usuario indicndole
que debera activar JavaScript para disfrutar completamente de la pgina. El
siguiente ejemplo muestra una pgina web basada en JavaScript cuando se
accede con JavaScript activado y cuando se accede con JavaScript
completamente desactivado.
Figura 1.1 Imagen de www.netvibes.com con JavaScript activado
Pgina 7 de 98
Fecha elaboracin:
28 de Marzo de
2015
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Elaborado por:
Figura 1.2 Imagen de www.netvibes.com con JavaScript desactivado
El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al

usuario cuando su navegador no puede ejecutar JavaScript. El siguiente cdigo
muestra un ejemplo del uso de la etiqueta <noscript>:
<head> ... </head>
<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La pgina que ests viendo requiere para su funcionamiento el uso
de JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a
activarlo.</p>
</noscript>
</body>
La
etiqueta
<noscript>
se
debe
incluir
en
el
interior
de
la
etiqueta <body> (normalmente se incluye al principio de <body>). El mensaje

que muestra <noscript> puede incluir cualquier elemento o etiqueta XHTML.
2. Glosario bsico
Script: cada uno de los programas, aplicaciones o trozos de cdigo creados con
el lenguaje de programacin JavaScript. Unas pocas lneas de cdigo forman un
script y un archivo de miles de lneas de JavaScript tambin se considera un
script. A veces se traduce al espaol directamente como "guion", aunque script
es una palabra ms adecuada y comnmente aceptada.
Pgina 8 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Sentencia: cada una de las instrucciones que forman un script.

Palabras reservadas: son las palabras (en ingls) que se utilizan para construir
las sentencias de JavaScript y que por tanto no pueden ser utilizadas libremente.
Las
palabras
actualmente
reservadas
por
JavaScript
son: break, case, catch, continue, default, delete, do, else, finally, for, functi
on, if,in, instanceof, new, return, switch, this, throw, try, typeof, var, void, whi
le, with.
3. Sintaxis
La sintaxis de un lenguaje de programacin se define como el conjunto de reglas
que deben seguirse al escribir el cdigo fuente de los programas para
considerarse como correctos para ese lenguaje de programacin.
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programacin
como Java y C. Las normas bsicas que definen la sintaxis de JavaScript son
las siguientes:
No se tienen en cuenta los espacios en blanco y las nuevas lneas: como

sucede con XHTML, el intrprete de JavaScript ignora cualquier espacio en blanco
sobrante, por lo que el cdigo se puede ordenar de forma adecuada para
entenderlo mejor (tabulando las lneas, aadiendo espacios, creando nuevas
lneas, etc.).
Se distinguen las maysculas y minsculas: al igual que sucede con la sintaxis

de las etiquetas y elementos XHTML. Sin embargo, si en una pgina XHTML se
utilizan indistintamente maysculas y minsculas, la pgina se visualiza
correctamente, siendo el nico problema la no validacin de la pgina. En cambio,
si en JavaScript se intercambian maysculas y minsculas el script no funciona.
No se define el tipo de las variables: al crear una variable, no es necesario indicar

el tipo de dato que almacenar. De esta forma, una misma variable puede
almacenar diferentes tipos de datos durante la ejecucin del script.
Pgina 9 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
No es necesario terminar cada sentencia con el carcter de punto y coma (;):

en la mayora de lenguajes de programacin, es obligatorio terminar cada
sentencia con el carcter ;. Aunque JavaScript no obliga a hacerlo, es conveniente
seguir la tradicin de terminar cada sentencia con el carcter del punto y coma (;).
Se pueden incluir comentarios: los comentarios se utilizan para aadir

informacin en el cdigo fuente del programa. Aunque el contenido de los
comentarios no se visualiza por pantalla, si que se enva al navegador del usuario
junto con el resto del script, por lo que es necesario extremar las precauciones
sobre la informacin incluida en los comentarios.
JavaScript define dos tipos de comentarios: los de una sola lnea y los que
ocupan varias lneas.
Ejemplo de comentario de una sola lnea:
// a continuacin se muestra un mensaje
alert("mensaje de prueba");
Los comentarios de una sola lnea se definen aadiendo dos barras oblicuas (//)
al principio de la lnea.
Ejemplo de comentario de varias lneas:
/* Los comentarios de varias lneas son muy tiles
cuando se necesita incluir bastante informacin
en los comentarios */
alert("mensaje de prueba");
Los comentarios multilnea se definen encerrando el texto del comentario entre

los smbolos /* y */.
Pgina 10 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
4. Posibilidades y limitaciones
Desde su aparicin, JavaScript siempre fue utilizado de forma masiva por la
mayora de sitios de Internet. La aparicin de Flash disminuy su popularidad,
ya que Flash permita realizar algunas acciones imposibles de llevar a cabo
mediante JavaScript.
Sin embargo, la aparicin de las aplicaciones AJAX programadas con JavaScript
le ha devuelto una popularidad sin igual dentro de los lenguajes de programacin
web.
En cuanto a las limitaciones, JavaScript fue diseado de forma que se ejecutara
en un entorno muy limitado que permitiera a los usuarios confiar en la ejecucin
de los scripts.
De esta forma, los scripts de JavaScript no pueden comunicarse con recursos
que no pertenezcan al mismo dominio desde el que se descarg el script. Los
scripts tampoco pueden cerrar ventanas que no hayan abierto esos mismos
scripts. Las ventanas que se crean no pueden ser demasiado pequeas ni
demasiado grandes ni colocarse fuera de la vista del usuario (aunque los detalles
concretos dependen de cada navegador).
Adems, los scripts no pueden acceder a los archivos del ordenador del usuario
(ni en modo lectura ni en modo escritura) y tampoco pueden leer o modificar las
preferencias del navegador.
Por ltimo, si la ejecucin de un script dura demasiado tiempo (por ejemplo por
un error de programacin) el navegador informa al usuario de que un script est
consumiendo demasiados recursos y le da la posibilidad de detener su ejecucin.
A pesar de todo, existen alternativas para poder saltarse algunas de las
limitaciones anteriores. La alternativa ms utilizada y conocida consiste en firmar
digitalmente el script y solicitar al usuario el permiso para realizar esas acciones.
Pgina 11 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
5. JavaScript y navegadores
Los navegadores ms modernos disponibles actualmente incluyen soporte de
JavaScript hasta la versin correspondiente a la tercera edicin del estndar
ECMA-262.
La mayor diferencia reside en el dialecto utilizado, ya que mientras Internet
Explorer utiliza JScript, el resto de navegadores (Firefox, Opera, Safari,
Konqueror) utilizan JavaScript.
6. JavaScript en otros entornos
La inigualable popularidad de JavaScript como lenguaje de programacin de
aplicaciones web se ha extendido a otras aplicaciones y otros entornos no
relacionados con la web.
Herramientas como Adobe Acrobat permiten incluir cdigo JavaScript en
archivos PDF. Otras herramientas de Adobe como Flash y Flex utilizan
ActionScript, un dialecto del mismo estndar de JavaScript.
Photoshop permite realizar pequeos scripts mediante JavaScript y la versin 6
de Java incluye un nuevo paquete (denominado javax.script) que permite
integrar ambos lenguajes.
Por ltimo, aplicaciones como Yahoo Widgets y el Dashboard de Apple utilizan
JavaScript para programar sus widgets.
7. Variables
Las variables en los lenguajes de programacin siguen una lgica similar a las
variables utilizadas en otros mbitos como las matemticas. Una variable es un
elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias
a las variables es posible crear "programas genricos", es decir, programas que
funcionan siempre igual independientemente de los valores concretos utilizados.
Pgina 12 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
De la misma forma que si en Matemticas no existieran las variables no se

podran definir las ecuaciones y frmulas, en programacin no se podran hacer
programas realmente tiles sin las variables.
Si no existieran variables, un programa que suma dos nmeros podra escribirse
como:
resultado = 3 + 1
El programa anterior es tan poco til que slo sirve para el caso en el que el
primer nmero de la suma sea el 3 y el segundo nmero sea el 1. En cualquier
otro caso, el programa obtiene un resultado incorrecto.
Sin embargo, el programa se puede rehacer de la siguiente manera utilizando
variables para almacenar y referirse a cada nmero:
numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2
Los elementos numero_1 y numero_2 son variables que almacenan los valores
que utiliza el programa. El resultado se calcula siempre en funcin del valor
almacenado por las variables, por lo que este programa funciona correctamente
para cualquier par de nmeros indicado. Si se modifica el valor de las
variables numero_1 y numero_2, el programa sigue funcionando correctamente.
Las variables en JavaScript se crean mediante la palabra reservada var. De esta
forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente
manera:
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
La palabra reservada var solamente se debe indicar al definir por primera vez la
variable, lo que se denomina declarar una variable. Cuando se utilizan las
variables en el resto de instrucciones del script, solamente es necesario indicar
Pgina 13 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
su nombre. En otras palabras, en el ejemplo anterior sera un error indicar lo

siguiente:
var numero_1 = 3;
var numero_2 = 1;
var resultado = var numero_1 + var numero_2;
Si cuando se declara una variable se le asigna tambin un valor, se dice que la

variable ha sido inicializada. En JavaScript no es obligatorio inicializar las
variables, ya que se pueden declarar por una parte y asignarles un valor
posteriormente. Por tanto, el ejemplo anterior se puede rehacer de la siguiente
manera:
var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
var resultado = numero_1 + numero_2;
Una de las caractersticas ms sorprendentes de JavaScript para los

programadores habituados a otros lenguajes de programacin es que tampoco
es necesario declarar las variables. En otras palabras, se pueden utilizar
variables que no se han definido anteriormente mediante la palabra
reservada var. El ejemplo anterior tambin es correcto en JavaScript de la
siguiente forma:
var numero_1 = 3;
var numero_2 = 1;
resultado = numero_1 + numero_2;
La variable resultado no est declarada, por lo que JavaScript crea una variable
global (ms adelante se vern las diferencias entre variables locales y globales)
y le asigna el valor correspondiente. De la misma forma, tambin sera correcto
el siguiente cdigo:
Pgina 14 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
numero_1 = 3;
numero_2 = 1;
resultado = numero_1 + numero_2;
En cualquier caso, se recomienda declarar todas las variables que se vayan a

utilizar.
El nombre de una variable tambin se conoce como identificador y debe cumplir
las siguientes normas:
Slo puede estar formado por letras, nmeros y los smbolos $ (dlar)
y _ (guin bajo).
El primer carcter no puede ser un nmero.
Por tanto, las siguientes variables tienen nombres correctos:
var $numero1;
var _$letra;
var $$$otroNumero;
var $_a__$4;
Sin embargo, las siguientes variables tienen identificadores incorrectos:
var 1numero;
// Empieza por un nmero
var numero;1_123;
// Contiene un carcter ";"
7.1. Tipos de variables

Aunque todas las variables de JavaScript se crean de la misma forma (mediante
la palabra reservada var), la forma en la que se les asigna un valor depende del
tipo de valor que se quiere almacenar (nmeros, textos, etc.)
7.1.1. Numricas
Se utilizan para almacenar valores numricos enteros (llamados integer en
ingls) o decimales (llamados float en ingls). En este caso, el valor se asigna
indicando directamente el nmero entero o decimal. Los nmeros decimales
Pgina 15 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
utilizan el carcter
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
. (punto) en vez de , (coma) para separar la parte entera y
la parte decimal:
var iva = 16;
// variable tipo entero
var total = 234.65;
// variable tipo decimal
7.1.2. Cadenas de texto

Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar
el valor a la variable, se encierra el valor entre comillas dobles o simples, para
delimitar su comienzo y su final:
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si

por ejemplo el propio texto contiene comillas simples o dobles, la estrategia que
se sigue es la de encerrar el texto con las comillas (simples o dobles) que no
utilice el texto:
/* El contenido de texto1 tiene comillas simples, por lo que
se encierra con comillas dobles */
var texto1 = "Una frase con 'comillas simples' dentro";
/* El contenido de texto2 tiene comillas dobles, por lo que

se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';
No obstante, a veces las cadenas de texto contienen tanto comillas simples como
dobles. Adems, existen otros caracteres que son difciles de incluir en una
variable de texto (tabulador, ENTER, etc.) Para resolver estos problemas,
JavaScript define un mecanismo para incluir de forma sencilla caracteres
especiales y problemticos dentro de una cadena de texto.
Pgina 16 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
El mecanismo consiste en sustituir el carcter problemtico por una combinacin

simple de caracteres. A continuacin se muestra la tabla de conversin que se
debe utilizar:
Si se quiere incluir...
Se debe incluir...
Una nueva lnea
\n
Un tabulador
\t
Una comilla simple
\'
Una comilla doble
\"
Una barra inclinada
\\
De esta forma, el ejemplo anterior que contena comillas simples y dobles dentro
del texto se puede rehacer de la siguiente forma:
var texto1 = 'Una frase con \'comillas simples\' dentro';
var texto2 = "Una frase con \"comillas dobles\" dentro";
Este mecanismo de JavaScript se denomina "mecanismo de escape" de los

caracteres problemticos, y es habitual referirse a que los caracteres han
sido "escapados".
7.1.3. Arrays
En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No
obstante, el trmino array es el ms utilizado y es una palabra comnmente
aceptada en el entorno de la programacin.
Pgina 17 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Un array es una coleccin de variables, que pueden ser todas del mismo tipo o
cada una de un tipo diferente. Su utilidad se comprende mejor con un ejemplo
sencillo: si una aplicacin necesita manejar los das de la semana, se podran
crear siete variables de tipo texto:
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";
Aunque el cdigo anterior no es incorrecto, s que es poco eficiente y complica

en exceso la programacin. Si en vez de los das de la semana se tuviera que
guardar el nombre de los meses del ao, el nombre de todos los pases del
mundo o las mediciones diarias de temperatura de los ltimos 100 aos, se
tendran que crear decenas o cientos de variables.
En este tipo de casos, se pueden agrupar todas las variables relacionadas en
una coleccin de variables o array. El ejemplo anterior se puede rehacer de la
siguiente forma:
var dias = ["Lunes", "Martes", "Mircoles", "Jueves", "Viernes", "Sbado"
, "Domingo"];
Ahora, una nica variable llamada dias almacena todos los valores relacionados
entre s, en este caso los das de la semana. Para definir un array, se utilizan los
caracteres [ ] (corchetes) para delimitar su comienzo y su final y se utiliza el
carcter , (coma) para separar sus elementos:
var nombre_array = [valor1, valor2, ..., valorN];
Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos.
Cada elemento se accede indicando su posicin dentro del array. La nica
complicacin, que es responsable de muchos errores cuando se empieza a
programar, es que las posiciones de los elementos empiezan a contarse en el 0 y
no en el 1:
var diaSeleccionado = dias[0];
// diaSeleccionado = "Lunes"
Pgina 18 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
var otroDia = dias[5]; // otroDia = "Sbado"
En el ejemplo anterior, la primera instruccin quiere obtener el primer elemento

del array. Para ello, se indica el nombre del array y entre corchetes la posicin
del elemento dentro del array. Como se ha comentado, las posiciones se
empiezan a contar en el 0, por lo que el primer elemento ocupa la posicin 0 y se
accede a l mediante dias[0].
El valor dias[5] hace referencia al elemento que ocupa la sexta posicin dentro
del array dias. Como las posiciones empiezan a contarse en 0, la posicin 5 hace
referencia al sexto elemento, en este caso, el valor Sbado.
7.1.4. Booleanos
Las variables de tipo boolean o booleano tambin se conocen con el nombre de
variables de tipo lgico. Aunque para entender realmente su utilidad se debe
estudiar la programacin avanzada con JavaScript del siguiente captulo, su
funcionamiento bsico es muy sencillo.
Una variable de tipo boolean almacena un tipo especial de valor que solamente
puede tomar dos valores: true (verdadero) o false (falso). No se puede utilizar
para almacenar nmeros y tampoco permite guardar cadenas de texto.
Los nicos valores que pueden almacenar estas variables son true y false, por
lo que no pueden utilizarse los valores verdadero y falso. A continuacin se
muestra un par de variables de tipo booleano:
var clienteRegistrado = false;
var ivaIncluido = true;
7.2. Operadores
Las variables por s solas son de poca utilidad. Hasta ahora, slo se ha visto
cmo crear variables de diferentes tipos y cmo mostrar su valor mediante la
funcin alert(). Para hacer programas realmente tiles, son necesarias otro tipo
de herramientas.
Los operadores permiten manipular el valor de las variables, realizar operaciones
matemticas con sus valores y comparar diferentes variables. De esta forma, los
Pgina 19 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
operadores permiten a los programas realizar clculos complejos y tomar

decisiones lgicas en funcin de comparaciones y otros tipos de condiciones.
7.2.1. Asignacin
El operador de asignacin es el ms utilizado y el ms sencillo. Este operador
se utiliza para guardar un valor especfico en una variable. El smbolo utilizado
es = (no confundir con el operador == que se ver ms adelante):
var numero1
3;
A la izquierda del operador, siempre debe indicarse el nombre de una variable.

A la derecha del operador, se pueden indicar variables, valores, condiciones
lgicas, etc:
var numero1 = 3;
var numero2 = 4;
/* Error, la asignacin siempre se realiza a una variable,
por lo que en la izquierda no se puede indicar un nmero */
5 = numero1; // este es un error
// Ahora, la variable numero1 vale 5
numero1 = 5;
// Ahora, la variable numero1 vale 4
numero1 = numero2;
7.2.2. Incremento y decremento

Estos dos operadores solamente son vlidos para las variables numricas y se
utilizan para incrementar o decrementar en una unidad el valor de una variable.
Ejemplo:
var numero = 5;
++numero;
alert(numero);
// numero = 6
Pgina 20 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
El operador de incremento se indica mediante el prefijo ++ en el nombre de la

variable. El resultado es que el valor de esa variable se incrementa en una
unidad. Por tanto, el anterior ejemplo es equivalente a:
var numero = 5;
numero = numero + 1;
alert(numero);
// numero = 6
De forma equivalente, el operador decremento (indicado como un prefijo -- en el

nombre de la variable) se utiliza para decrementar el valor de la variable:
var numero = 5;
--numero;
alert(numero);
// numero = 4
El anterior ejemplo es equivalente a:

var numero = 5;
numero = numero - 1;
alert(numero);
// numero = 4
Los operadores de incremento y decremento no solamente se pueden indicar

como prefijo del nombre de la variable, sino que tambin es posible utilizarlos
como sufijo. En este caso, su comportamiento es similar pero muy diferente. En
el siguiente ejemplo:
var numero = 5;
numero++;
alert(numero);
// numero = 6
El resultado de ejecutar el script anterior es el mismo que cuando se utiliza el

operador ++numero, por lo que puede parecer que es equivalente indicar el
operador ++ delante o detrs del identificador de la variable. Sin embargo, el
siguiente ejemplo muestra sus diferencias:
var numero1 = 5;
Pgina 21 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6
Si el operador ++ se indica como prefijo del identificador de la variable, su valor

se incrementa antes de realizar cualquier otra operacin. Si el operador ++ se
indica como sufijo del identificador de la variable, su valor se
incrementa despus de ejecutar la sentencia en la que aparece.
Por tanto, en la instruccin numero3 = numero1++ + numero2;, el valor
de numero1 se incrementa despus de realizar la operacin (primero se suma
y numero3 vale 7, despus se incrementa el valor de numero1 y vale 6). Sin
embargo, en la instruccin numero3 = ++numero1 + numero2;, en primer lugar se
incrementa el valor de numero1 y despus se realiza la suma (primero se
incrementa numero1 y vale 6, despus se realiza la suma y numero3 vale 8).
7.2.3. Lgicos
Los operadores lgicos son imprescindibles para realizar aplicaciones
complejas, ya que se utilizan para tomar decisiones sobre las instrucciones que
debera ejecutar el programa en funcin de ciertas condiciones.
El resultado de cualquier operacin que utilice operadores lgicos siempre es un
valor lgico o booleano.
Negacin
Uno de los operadores lgicos ms utilizados es el de la negacin. Se utiliza
para obtener el valor contrario al valor de la variable:
var visible = true;
alert(!visible);
// Muestra "false" y no "true"
Pgina 22 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
La negacin lgica se obtiene prefijando el smbolo ! al identificador de la

variable. El funcionamiento de este operador se resume en la siguiente tabla:
variable
!variable
true
false
false
true
Si la variable original es de tipo booleano, es muy sencillo obtener su negacin.

Sin embargo, qu sucede cuando la variable es un nmero o una cadena de
texto? Para obtener la negacin en este tipo de variables, se realiza en primer
lugar su conversin a un valor booleano:
Si la variable contiene un nmero, se transforma en false si vale 0 y en true para

cualquier otro nmero (positivo o negativo, decimal o entero).
Si la variable contiene una cadena de texto, se transforma en false si la cadena

es vaca ("") y en true en cualquier otro caso.
var cantidad = 0;
vacio = !cantidad;
// vacio = true
cantidad = 2;
vacio = !cantidad;
// vacio = false
var mensaje = "";

mensajeVacio = !mensaje;
// mensajeVacio = true
mensaje = "Bienvenido";
mensajeVacio = !mensaje;
// mensajeVacio = false
Pgina 23 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
AND
La operacin lgica AND obtiene su resultado combinando dos valores booleanos.
El operador se indica mediante el smbolo && y su resultado solamente es true si
los dos operandos son true:
variable1
variable2
variable1 && variable2
true
true
True
true
false
False
false
True
False
false
false
False
var valor1 = true;

var valor2 = false;
resultado = valor1 && valor2; // resultado = false
valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultado = true
OR
La operacin lgica OR tambin combina dos valores booleanos. El operador se
indica mediante el smbolo || y su resultado es true si alguno de los dos
operandos es true:
Pgina 24 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
variable1
variable2
variable1 || variable2
True
True
true
True
false
true
False
True
true
False
false
false
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
var valor1 = true;

var valor2 = false;
resultado = valor1 || valor2; // resultado = true
valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultado = false
7.2.4. Matemticos
JavaScript permite realizar manipulaciones matemticas sobre el valor de las
variables numricas. Los operadores definidos son: suma (+), resta (-),
multiplicacin (*) y divisin (/). Ejemplo:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 / numero2;
// resultado = 2
resultado = 3 + numero1;
// resultado = 13
resultado = numero2 4;
// resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Pgina 25 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Adems de los cuatro operadores bsicos, JavaScript define otro operador

matemtico que no es sencillo de entender cuando se estudia por primera vez,
pero que es muy til en algunas ocasiones.
Se trata del operador "mdulo", que calcula el resto de la divisin entera de dos
nmeros. Si se divide por ejemplo 10 y 5, la divisin es exacta y da un resultado
de 2. El resto de esa divisin es 0, por lo que mdulo de 10 y 5 es igual a 0.
Sin embargo, si se divide 9 y 5, la divisin no es exacta, el resultado es 1 y el
resto 4, por lo que mdulo de 9 y 5 es igual a 4.
El operador mdulo en JavaScript se indica mediante el smbolo %, que no debe
confundirse con el clculo del porcentaje:
var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
Los operadores matemticos tambin se pueden combinar con el operador de

asignacin para abreviar su notacin:
var numero1 = 5;
numero1 += 3;
// numero1 = numero1 + 3 = 8
numero1 -= 1;
// numero1 = numero1 - 1 = 4
numero1 *= 2;
// numero1 = numero1 * 2 = 10
numero1 /= 5;
// numero1 = numero1 / 5 = 1
numero1 %= 4;
// numero1 = numero1 % 4 = 1
Pgina 26 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
7.2.5. Relacionales
Los operadores relacionales definidos por JavaScript son idnticos a los que
definen las matemticas: mayor que (>), menor que (<), mayor o igual (>=), menor
o igual (<=), igual que (==) y distinto de (!=).
Los operadores que relacionan variables son imprescindibles para realizar
cualquier aplicacin compleja, como se ver en el siguiente captulo de
programacin avanzada. El resultado de todos estos operadores siempre es un
valor booleano:
var numero1 = 3;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = false
resultado = numero1 < numero2; // resultado = true
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false
Se debe tener especial cuidado con el operador de igualdad ( ==), ya que es el

origen de la mayora de errores de programacin, incluso para los usuarios que
ya tienen cierta experiencia desarrollando scripts. El operador == se utiliza para
comparar el valor de dos variables, por lo que es muy diferente del operador =,
que se utiliza para asignar un valor a una variable:
// El operador "=" asigna valores
var numero1 = 5;
resultado = numero1 = 3;
// numero1 = 3 y resultado = 3
// El operador "==" compara variables

var numero1 = 5;
Pgina 27 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
resultado = numero1 == 3; // numero1 = 5 y resultado = false
Los operadores relacionales tambin se pueden utilizar con variables de tipo

cadena de texto:
var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adios";
resultado = texto1 == texto3; // resultado = false
resultado = texto1 != texto2; // resultado = false
resultado = texto3 >= texto2; // resultado = false
Cuando se utilizan cadenas de texto, los operadores "mayor que" ( >) y "menor
que" (<) siguen un razonamiento no intuitivo: se compara letra a letra
comenzando desde la izquierda hasta que se encuentre una diferencia entre las
dos cadenas de texto. Para determinar si una letra es mayor o menor que otra,
las maysculas se consideran menores que las minsculas y las primeras letras
del alfabeto son menores que las ltimas (a es menor que b, b es menor
que c, A es menor que a, etc.).
8. Estructuras de control de flujo

Los programas que se pueden realizar utilizando solamente variables y
operadores son una simple sucesin lineal de instrucciones bsicas.
Sin embargo, no se pueden realizar programas que muestren un mensaje si el
valor de una variable es igual a un valor determinado y no muestren el mensaje
en el resto de casos. Tampoco se puede repetir de forma eficiente una misma
instruccin, como por ejemplo sumar un determinado valor a todos los elementos
de un array.
Para realizar este tipo de programas son necesarias las estructuras de control
de flujo, que son instrucciones del tipo "si se cumple esta condicin, hazlo; si no
se cumple, haz esto otro". Tambin existen instrucciones del tipo "repite esto
mientras se cumpla esta condicin".
Pgina 28 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Si se utilizan estructuras de control de flujo, los programas dejan de ser una

sucesin lineal de instrucciones para convertirse en programas inteligentes que
pueden tomar decisiones en funcin del valor de las variables.
8.1.1. Estructura if
La estructura ms utilizada en JavaScript y en la mayora de lenguajes de
programacin es la estructura if. Se emplea para tomar decisiones en funcin de
una condicin. Su definicin formal es:
if(condicion) {
...
}
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las

instrucciones que se encuentran dentro de {...}. Si la condicin no se cumple
(es decir, si su valor es false) no se ejecuta ninguna instruccin contenida
en {...} y el programa contina ejecutando el resto de instrucciones del script.
Ejemplo:
var mostrarMensaje = true;
if(mostrarMensaje) {
alert("Hola Mundo");
}
En el ejemplo anterior, el mensaje s que se muestra al usuario ya que la

variable mostrarMensaje tiene un valor de true y por tanto, el programa entra
dentro del bloque de instrucciones del if.
El ejemplo se podra reescribir tambin como:
if(mostrarMensaje == true) {
Pgina 29 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
alert("Hola Mundo");
}
En este caso, la condicin es una comparacin entre el valor de la

variable mostrarMensaje y el valor true. Como los dos valores coinciden, la
igualdad se cumple y por tanto la condicin es cierta, su valor es true y se
ejecutan las instrucciones contenidas en ese bloque del if.
La comparacin del ejemplo anterior suele ser el origen de muchos errores de
programacin, al confundir los operadores == y =. Las comparaciones siempre
se realizan con el operador ==, ya que el operador = solamente asigna valores:
// Se comparan los dos valores

if(mostrarMensaje == false) {
...
}
// Error - Se asigna el valor "false" a la variable
if(mostrarMensaje = false) {
...
}
La condicin que controla el if() puede combinar los diferentes operadores

lgicos y relacionales mostrados anteriormente:
var mostrado = false;
if(!mostrado) {
alert("Es la primera vez que se muestra el mensaje");
}
Pgina 30 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Los operadores AND y OR permiten encadenar varias condiciones simples para

construir condiciones complejas:
var mostrado = false;
var usuarioPermiteMensajes = true;
if(!mostrado && usuarioPermiteMensajes) {

alert("Es la primera vez que se muestra el mensaje");
}
La condicin anterior est formada por una operacin AND sobre dos variables.
A su vez, a la primera variable se le aplica el operador de negacin antes de
realizar la operacin AND. De esta forma, como el valor de mostrado es false, el
valor !mostrado sera true. Como la variable usuarioPermiteMensajes vale true, el
resultado de !mostrado && usuarioPermiteMensajes sera igual a true && true, por
lo que el resultado final de la condicin del if() sera true y por tanto, se ejecutan
las instrucciones que se encuentran dentro del bloque del if().
8.1.2. Estructura if...else
En ocasiones, las decisiones que se deben realizar no son del tipo "si se cumple
la condicin, hazlo; si no se cumple, no hagas nada". Normalmente las
condiciones suelen ser del tipo "si se cumple esta condicin, hazlo; si no se
cumple, haz esto otro".
Para este segundo tipo de decisiones, existe una variante
estructura if llamada if...else. Su definicin formal es la siguiente:
de
la
if(condicion) {
...
}
else {
...
}
Pgina 31 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Si la condicin se cumple (es decir, si su valor es true) se ejecutan todas las

instrucciones que se encuentran dentro del if(). Si la condicin no se cumple
(es decir, si su valor es false) se ejecutan todas las instrucciones contenidas
en else { }. Ejemplo:
var edad = 18;
if(edad >= 18) {
alert("Eres mayor de edad");
}
else {
alert("Todava eres menor de edad");
}
Si el valor de la variable edad es mayor o igual que el valor numrico 18, la

condicin del if() se cumple y por tanto, se ejecutan sus instrucciones y se
muestra el mensaje "Eres mayor de edad". Sin embargo, cuando el valor de la
variable edad no es igual o mayor que 18, la condicin del if() no se cumple, por
lo que automticamente se ejecutan todas las instrucciones del bloque else { }.
En este caso, se mostrara el mensaje "Todava eres menor de edad".
El siguiente ejemplo compara variables de tipo cadena de texto:
var nombre = "";
if(nombre == "") {
alert("An no nos has dicho tu nombre");
}
else {
alert("Hemos guardado tu nombre");
}
La condicin del if() anterior se construye mediante el operador ==, que es el que
se emplea para comparar dos valores (no confundir con el operador = que se
utiliza para asignar valores). En el ejemplo anterior, si la cadena de texto
Pgina 32 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
almacenada en la variable nombre es vaca (es decir, es igual a "") se muestra

el mensaje definido en el if(). En otro caso, se muestra el mensaje definido en el
bloque else { }.
La estructura if...else se puede encadenar para realizar varias comprobaciones
seguidas:
if(edad < 12) {
alert("Todava eres muy pequeo");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert("Aun sigues siendo joven");
}
else {
alert("Piensa en cuidarte un poco ms");
}
No es obligatorio que la combinacin de estructuras if...else acabe con la

instruccin else, ya que puede terminar con una instruccin de tipo else if().
8.1.3. Estructura for
Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de
forma repetitiva una instruccin. Por ejemplo, si se quiere mostrar un mensaje
cinco veces, se podra pensar en utilizar el siguiente if:
var veces = 0;
if(veces < 4) {
alert("Mensaje");
Pgina 33 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
veces++;
}
Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro

del if(), se muestra el mensaje y se incrementa el valor de la variable veces. As
se debera seguir ejecutando hasta mostrar el mensaje las cinco veces
deseadas.
Sin embargo, el funcionamiento real del script anterior es muy diferente al
deseado, ya que solamente se muestra una vez el mensaje por pantalla. La
razn es que la ejecucin de la estructura if() no se repite y la comprobacin de
la condicin slo se realiza una vez, independientemente de que dentro del if() se
modifique el valor de la variable utilizada en la condicin.
La estructura for permite realizar este tipo de repeticiones (tambin llamadas
bucles) de una forma muy sencilla. No obstante, su definicin formal no es tan
sencilla como la de if():
for(inicializacion; condicion; actualizacion) {
...
}
La idea del funcionamiento de un bucle for es la siguiente: "mientras la condicin

indicada se siga cumpliendo, repite la ejecucin de las instrucciones definidas
dentro del for. Adems, despus de cada repeticin, actualiza el valor de las
variables que se utilizan en la condicin".
La "inicializacin" es la zona en la que se establece los valores iniciales de las

variables que controlan la repeticin.
La "condicin" es el nico elemento que decide si continua o se detiene la

repeticin.
La "actualizacin" es el nuevo valor que se asigna despus de cada repeticin a

las variables que controlan la repeticin.
var mensaje = "Hola, estoy dentro de un bucle";
Pgina 34 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
for(var i = 0; i < 5; i++) {

alert(mensaje);
}
La parte de la inicializacin del bucle consiste en:

var i = 0;
Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta

zona de inicializacin solamente se tiene en consideracin justo antes de
comenzar a ejecutar el bucle. Las siguientes repeticiones no tienen en cuenta
esta parte de inicializacin.
La zona de condicin del bucle es:
i<5
Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan

de ejecutar justo despus de comprobar que la condicin no se cumple. En este
caso, mientras la variable i valga menos de 5 el bucle se ejecuta indefinidamente.
Como la variable i se ha inicializado a un valor de 0 y la condicin para salir del
bucle es que i sea menor que 5, si no se modifica el valor de i de alguna forma,
el bucle se repetira indefinidamente.
Por ese motivo, es imprescindible indicar la zona de actualizacin, en la que se
modifica el valor de las variables que controlan el bucle:
i++
En este caso, el valor de la variable i se incrementa en una unidad despus de

cada repeticin. La zona de actualizacin se ejecuta despus de la ejecucin de
las instrucciones que incluye el for.
As, durante la ejecucin de la quinta repeticin el valor de i ser 4. Despus de
la quinta ejecucin, se actualiza el valor de i, que ahora valdr 5. Como la
Pgina 35 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
condicin es que i sea menor que 5, la condicin ya no se cumple y las

instrucciones del for no se ejecutan una sexta vez.
Normalmente, la variable que controla los bucles for se llama i, ya que recuerda
a la palabra ndice y su nombre tan corto ahorra mucho tiempo y espacio.
El ejemplo anterior que mostraba los das de la semana contenidos en un array
se puede rehacer de forma ms sencilla utilizando la estructura for:
, "Domingo"];
for(var i=0; i<7; i++) {
alert(dias[i]);
8.1.4. Estructura for...in

Una estructura de control derivada de for es la estructura for...in. Su definicin
exacta implica el uso de objetos, que es un elemento de programacin avanzada
que no se va a estudiar. Por tanto, solamente se va a presentar la
estructura for...in adaptada a su uso en arrays. Su definicin formal adaptada
a los arrays es:
for(indice in array) {
...
}
Si se quieren recorrer todos los elementos que forman un array, la

estructura for...in es la forma ms eficiente de hacerlo, como se muestra en el
siguiente ejemplo:
, "Domingo"];
for(i in dias) {
alert(dias[i]);
}
Pgina 36 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
La variable que se indica como indice es la que se puede utilizar dentro del
bucle for...in para acceder a los elementos del array. De esta forma, en la primera
repeticin del bucle la variable i vale 0 y en la ltima vale 6.
Esta estructura de control es la ms adecuada para recorrer arrays (y objetos),
ya que evita tener que indicar la inicializacin y las condiciones del
bucle for simple y funciona correctamente cualquiera que sea la longitud del
array. De hecho, sigue funcionando igual aunque vare el nmero de elementos
del array.
9. rbol de nodos
Una de las tareas habituales en la programacin de aplicaciones web con
JavaScript consiste en la manipulacin de las pginas web. De esta forma, es
habitual obtener el valor almacenado por algunos elementos (por ejemplo los
elementos de un formulario), crear un elemento (prrafos, <div>, etc.) de forma
dinmica y aadirlo a la pgina, aplicar una animacin a un elemento (que
aparezca/desaparezca, que se desplace, etc.).
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin
embargo, para poder utilizar las utilidades de DOM, es necesario "transformar" la
pgina original. Una pgina HTML normal no es ms que una sucesin de
caracteres, por lo que es un formato muy difcil de manipular. Por ello, los
navegadores web transforman automticamente todas las pginas web en una
estructura ms eficiente de manipular.
Esta transformacin la realizan todos los navegadores de forma automtica y
nos permite utilizar las herramientas de DOM de forma muy sencilla. El motivo
por el que se muestra el funcionamiento de esta transformacin interna es que
condiciona el comportamiento de DOM y por tanto, la forma en la que se
manipulan las pginas.
DOM transforma todos los documentos XHTML en un conjunto de elementos
llamados nodos, que estn interconectados y que representan los contenidos de
las pginas web y las relaciones entre ellos. Por su aspecto, la unin de todos
los nodos se llama "rbol de nodos".
Pgina 37 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
La siguiente pgina XHTML sencilla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
w.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /
>
<title>Pgina sencilla</title>
</head>
<body>
<p>Esta pgina es <strong>muy sencilla</strong></p>
</body>
</html>
Se transforma en el siguiente rbol de nodos:
Figura 9.1 rbol de nodos generado automticamente por DOM a partir del
cdigo XHTML de la pgina
En el esquema anterior, cada rectngulo representa un nodo DOM y las flechas
indican las relaciones entre nodos. Dentro de cada nodo, se ha incluido su tipo
(que se ver ms adelante) y su contenido.
Pgina 38 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
La raz del rbol de nodos de cualquier pgina XHTML siempre es la misma: un

nodo de tipo especial denominado "Documento".
A partir de ese nodo raz, cada etiqueta XHTML se transforma en un nodo de
tipo "Elemento". La conversin de etiquetas en nodos se realiza de forma
jerrquica. De esta forma, del nodo raz solamente pueden derivar los
nodos HEAD y BODY. A partir de esta derivacin inicial, cada etiqueta XHTML se
transforma en un nodo que deriva del nodo correspondiente a su "etiqueta
padre".
La transformacin de las etiquetas XHTML habituales genera dos nodos: el
primero es el nodo de tipo "Elemento" (correspondiente a la propia etiqueta
XHTML) y el segundo es un nodo de tipo "Texto" que contiene el texto encerrado
por esa etiqueta XHTML.
As, la siguiente etiqueta XHTML:
<title>Pgina sencilla</title>
Genera los siguientes dos nodos:
Figura 9.2 Nodos generados automticamente por DOM para una etiqueta
XHTML sencilla
De la misma forma, la siguiente etiqueta XHTML:
<p>Esta pgina es <strong>muy sencilla</strong></p>
Genera los siguientes nodos:
Nodo de tipo "Elemento" correspondiente a la etiqueta <p>.
Nodo de tipo "Texto" con el contenido textual de la etiqueta <p>.

Pgina 39 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Como el contenido de <p> incluye en su interior otra etiqueta XHTML, la

etiqueta interior se transforma en un nodo de tipo "Elemento" que representa
la etiqueta <strong> y que deriva del nodo anterior.
El contenido de la etiqueta <strong> genera a su vez otro nodo de

tipo "Texto" que deriva del nodo generado por <strong>.
Figura 9.3 Nodos generados automticamente por DOM para una etiqueta
XHTML con otras etiquetas XHTML en su interior
La transformacin automtica de la pgina en un rbol de nodos siempre sigue
las mismas reglas:
Las etiquetas XHTML se transforman en dos nodos: el primero es la propia

etiqueta y el segundo nodo es hijo del primero y consiste en el contenido
textual de la etiqueta.
Si una etiqueta XHTML se encuentra dentro de otra, se sigue el mismo

procedimiento anterior, pero los nodos generados sern nodos hijo de su
etiqueta padre.
Como se puede suponer, las pginas XHTML habituales producen rboles con
miles de nodos. Aun as, el proceso de transformacin es rpido y automtico,
siendo las funciones proporcionadas por DOM (que se vern ms adelante) las
nicas que permiten acceder a cualquier nodo de la pgina de forma sencilla e
inmediata.
Pgina 40 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
9.1. Tipos de nodos

La especificacin completa de DOM define 12 tipos de nodos, aunque las
pginas XHTML habituales se pueden manipular manejando solamente cuatro o
cinco tipos de nodos:
Document, nodo raz del que derivan todos los dems nodos del rbol.
Element, representa cada una de las etiquetas XHTML. Se trata del nico
nodo que puede contener atributos y el nico del que pueden derivar otros
nodos.
Attr, se define un nodo de este tipo para representar cada uno de los
atributos de las etiquetas XHTML, es decir, uno por cada par atributo=valor.
Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
Comment, representa los comentarios incluidos en la pgina XHTML.
Los otros tipos de nodos existentes que no se van a considerar son

DocumentType, CDataSection, DocumentFragment, Entity, EntityReference,
ProcessingInstruction y Notation.
9.2. Acceso directo a los nodos (Selectores).

Una vez construido automticamente el rbol completo de nodos DOM, ya es
posible utilizar las funciones DOM para acceder de forma directa a cualquier
nodo del rbol. Como acceder a un nodo del rbol es equivalente a acceder a "un
trozo" de la pgina, una vez construido el rbol, ya es posible manipular de forma
sencilla la pgina: acceder al valor de un elemento, establecer el valor de un
elemento, mover un elemento de la pgina, crear y aadir nuevos elementos,
etc.
getElementsByTagName referencia un elemento por su nombre o

palabra clave.
getElementById: referencia un elemento por el valor de su atributo id.
getElementsByClassName: es una nueva incorporacin que nos

permite referenciar un elemento por el valor de su atributo class.
Pgina 41 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Nota: recordar que el atributo class se utiliza para hacer referencia a un

conjunto de elementos.
10. Incorporando JavaScript
Siguiendo los mismos lineamientos que en CSS, existen tres tcnicas para
incorporar cdigo JavaScript dentro de HTML. Sin embargo, al igual que en CSS,
solo la inclusin de archivos externos es la recomendada a usar en HTML5.
IMPORTANTE: En este captulo introducimos nuevas caractersticas as como

tcnicas bsicas necesarias para entender los ejemplos del tutorial. Si usted se
encuentra familiarizado con esta informacin sintase libre de obviar las partes
que ya conoce.
En lnea:
Esta es una tcnica simple para insertar JavaScript en nuestro documento que
se aprovecha de atributos disponibles en elementos HTML. Estos atributos son
manejadores de eventos que ejecutan cdigo de acuerdo a la accin del usuario.
Los manejadores de eventos ms usados son, en general, los relacionados con

el ratn, como por ejemplo onclick, onMouseOver, u onMouseOut. Sin
embargo, encontraremos sitios web que implementan eventos de teclado y de la
ventana, ejecutando acciones luego de que una tecla es presionada o alguna
condicin en la ventana del navegador cambia (por ejemplo, onload u onfocus).
Por ejemplo:
<!DOCTYPE html>
<html lang=es>
<head>
<title>Este texto es el ttulo del documento</title>
</head>
<body>
<div id=principal>
<p onclick=alert(hizo clic!)>Hacer Clic</p>
Pgina 42 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
<p>No puede hacer clic</p>

</div>
</body>
</html>
Listado 1-1. JavaScript en Lnea
Usando el manejador de eventos onclick en el ejemplo anterior (Listado 1-1), un

cdigo es ejecutado cada vez que el usuario hace clic con el ratn sobre el texto
que dice Hacer Clic. Lo que el manejador onclick est diciendo es algo como:
cuando alguien haga clic sobre este elemento ejecute este cdigo y el cdigo
en este caso es una funcin predefinida en JavaScript que muestra una pequea
ventana con el mensaje hizo clic!.
Nota: Intente cambiar el manejador onclick por onMouseOver, por

ejemplo, y ver cmo el cdigo es ejecutado solo pasando el puntero del
ratn sobre el elemento.
El uso de JavaScript dentro de etiquetas HTML est permitido en HTML5,
pero por las mismas razones que en CSS, esta clase de prctica no es
recomendable.
El cdigo HTML se extiende innecesariamente y se hace difcil de mantener y

actualizar. As mismo, el cdigo distribuido sobre todo el documento complica la
construccin de aplicaciones tiles.
Nuevos mtodos y tcnicas fueron desarrollados para referenciar elementos

HTML y registrar manejadores de eventos sin tener que usar cdigo en lnea
(inline). Volveremos a tocar este tema y aprenderemos ms sobre eventos y
manejadores de eventos ms adelante en este tutorial.
Pgina 43 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Hgalo usted mismo: Copie el cdigo del ejemplo anterior y los

siguientes cdigos estudiados en este apartado dentro de un nuevo
archivo HTML. Abra el archivo en su navegador para probar cada ejemplo.
Embebido:
Para trabajar con cdigos extensos y funciones personalizadas debemos
agrupar los cdigos en un mismo lugar entre etiquetas <script>. El elemento
<script> acta exactamente igual al elemento <style> usado para incorporar
estilos CSS. Nos ayuda a organizar el cdigo en un solo lugar, afectando a los
elementos HTML por medio de referencias.
Del mismo modo que con el elemento <style>, en HTML5 no debemos usar
ningn atributo para especificar lenguaje. Ya no es necesario incluir el atributo
type en la etiqueta <script>. HTML5 asigna JavaScript por defecto.
Por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<script>
function mostraralerta(){
alert('hizo clic!');
}
function hacerclic(){
document.getElementsByTagName('p')[0].onclick=mostraralerta;
}
window.onload=hacerclic;
</script>
</head>
<body>
<div id=principal>
<p>Hacer Clic</p>
<p>No puede hacer Clic</p>
Pgina 44 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
</div>
</body>
</html>
Listado 1-2. JavaScript embebido
El elemento <script> y su contenido pueden ser posicionados en cualquier lugar

del documento, dentro de otros elementos o entre ellos. Para mayor claridad,
recomendamos siempre colocar sus cdigos JavaScript en la cabecera del
documento (como en el ejemplo anterior Listado 1-2) y luego referenciar los
elementos a ser afectados usando los mtodos JavaScript apropiados para ese
propsito.
Actualmente existen tres mtodos disponibles para referenciar elementos HTML

desde JavaScript:
Incluso si seguimos la prctica recomendada (posicionar el cdigo dentro de la

cabecera del documento); una situacin debe ser considerada: el cdigo del
documento es ledo de forma secuencial por el navegador y no podemos
referenciar un elemento que an no ha sido creado.
En el ejemplo anterior, el cdigo es posicionado en la cabecera del documento y

es ledo por el navegador previo a la creacin del elemento <p> que estamos
referenciando. Si hubisemos intentado afectar el elemento <p> directamente
con una referencia, hubiramos recibido un mensaje de error anunciando que el
elemento no existe. Para evitar este problema, el cdigo fue convertido a una
funcin llamada mostraralerta(), y la referencia al elemento <p> junto con el
manejador del evento fueron colocados en una segunda funcin llamada
hacerclic().
Las funciones son llamadas desde la ltima lnea del cdigo usando otro
manejador de eventos (en este caso asociado con la ventana) llamado onload.
Pgina 45 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Este manejador ejecutar la funcin hacerclic() cuando el documento sea

completamente cargado y todos los elementos creados.
Es tiempo de analizar cmo el cdigo del ejemplo anterior es ejecutado. Primero

las funciones JavaScript son cargadas (declaradas) pero no ejecutadas. Luego
los elementos HTML, incluidos los elementos <p>, son creados. Y finalmente,
cuando el documento completo es cargado en la ventana del navegador, el
evento load es disparado y la funcin hacerclic() es llamada.
En esta funcin, el mtodo getElementsByTagName referencia todos los

elementos <p>. Este mtodo retorna un arreglo (array) conteniendo una lista de
los elementos de la clase especificada encontrados en el documento. Sin
embargo, usando el ndice [0] al final del mtodo indicamos que solo queremos
que el primer elemento de la lista sea retornado. Una vez que este elemento es
identificado, el cdigo registra el manejador de eventos onclick para el mismo.
La funcin mostraralerta() ser ejecutada cuando el evento click es disparado
sobre este elemento mostrando el mensaje hizo clic!.
Puede parecer mucho cdigo y trabajo para reproducir el mismo efecto logrado
por una simple lnea en el ejemplo anterior. Sin embargo, considerando el
potencial de HTML5 y la complejidad alcanzada por JavaScript, la concentracin
del cdigo en un nico lugar y la apropiada organizacin representa una gran
ventaja para nuestras futuras implementaciones y para hacer nuestros sitios web
y aplicaciones fciles de desarrollar y mantener.
Conceptos bsicos: Una funcin es un cdigo agrupado que es

ejecutado solo cuando la funcin es invocada (activada o llamada) por su
nombre. Normalmente, una funcin es llamada usando su nombre y
algunos
valores
encerrados
entre
parntesis
(por
ejemplo,
hacerclic(1,2)). Una excepcin a esta sintaxis es usada en el ejemplo

Pgina 46 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Listado 1-2. En este cdigo no usamos parntesis porque estamos

pasando al evento solo la referencia a la funcin, no el resultado de su
ejecucin.
Archivos externos:
Los cdigos JavaScript crecen exponencialmente cuando agregamos nuevas
funciones y aplicamos algunas de las APIs mencionadas previamente. Cdigos
embebidos incrementan el tamao de nuestros documentos y los hacen
repetitivos (cada documento debe volver a incluir los mismos cdigos). Para
reducir los tiempos de descarga, incrementar nuestra productividad y poder
distribuir y reusar nuestros cdigos en cada documento sin comprometer
eficiencia, recomendamos grabar todos los cdigos JavaScript en uno o ms
archivos externos y llamarlos usando el atributo src:
Por Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<script src=micodigo.js></script>
</head>
<body>
<div id=principal>
<p>Hacer Clic</p>
<p>No puede hacer Clic</p>
</div>
</body>
</html>
Listado 1-3. Cargando el cdigo desde archivos externos
El elemento <script> en el ejemplo anterior carga los cdigos JavaScript desde

un archivo externo llamado micodigo.js. De ahora en ms, podremos insertar
nuestros cdigos en este archivo y luego incluir el mismo en cualquier documento
Pgina 47 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
de nuestro sitio web que lo necesite. Desde la perspectiva del usuario, esta
prctica reduce tiempos de descarga y acceso a nuestro sitio web, mientras que
para nosotros simplifica la organizacin y facilita el mantenimiento.
Hgalo usted mismo: Copie el cdigo del Listado 1-3 dentro del archivo
HTML previamente creado. Cree un nuevo archivo de texto vaco llamado
micodigo.js y copie en su interior el cdigo JavaScript del Listado 1-2. Tenga
en cuenta que solo el cdigo entre las etiquetas <script> debe ser copiado,
sin incluir las etiquetas mismas.
11. Selectores (Acceso directo a los nodos).
11.1.
getElementsByTagName()
Como sucede con todas las funciones que proporciona DOM, la

funcin getElementsByTagName() tiene un nombre muy largo, pero que lo hace
auto explicativo.
La funcin getElementsByTagName(nombreEtiqueta) obtiene todos los elementos
de la pgina XHTML cuya etiqueta sea igual que el parmetro que se le pasa a
la funcin.
El siguiente ejemplo muestra cmo obtener todos los prrafos de una pgina
XHTML:
var parrafos = document.getElementsByTagName("p");
El valor que se indica delante del nombre de la funcin (en este caso, document)
es el nodo a partir del cual se realiza la bsqueda de los elementos. En este
caso, como se quieren obtener todos los prrafos de la pgina, se utiliza el
valor document como punto de partida de la bsqueda.
El valor que devuelve la funcin es un array con todos los nodos que cumplen la
condicin de que su etiqueta coincide con el parmetro proporcionado. El valor
devuelto es un array de nodos DOM, no un array de cadenas de texto o un array
de objetos normales. Por lo tanto, se debe procesar cada valor del array de la
forma que se muestra en las siguientes secciones.
Pgina 48 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
De este modo, se puede obtener el primer prrafo de la pgina de la siguiente

manera:
var primerParrafo = parrafos[0];
De la misma forma, se podran recorrer todos los prrafos de la pgina con el

siguiente cdigo:
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}
La funcin getElementsByTagName() se puede aplicar de forma recursiva sobre

cada uno de los nodos devueltos por la funcin. En el siguiente ejemplo, se
obtienen todos los enlaces del primer prrafo de la pgina:
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");
11.2. getElementsByName()
La funcin getElementsByName() es similar a la anterior, pero en este caso se
buscan los elementos cuyo atributo name sea igual al parmetro proporcionado.
En el siguiente ejemplo, se obtiene directamente el nico prrafo con el nombre
indicado:
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
Normalmente el atributo name es nico para los elementos HTML que lo definen,
por lo que es un mtodo muy prctico para acceder directamente al nodo
deseado. En el caso de los elementos HTML radiobutton, el atributo name es
comn a todos los radiobutton que estn relacionados, por lo que la funcin
devuelve una coleccin de elementos.
Pgina 49 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Internet Explorer 6.0 no implementa de forma correcta esta funcin, ya que slo
la tiene en cuenta para los elementos de tipo <input> y <img>. Adems, tambin
tiene en consideracin los elementos cuyo atributo id sea igual al parmetro de
la funcin.
11.3. getElementById()
La funcin getElementById() es la ms utilizada cuando se desarrollan
aplicaciones web dinmicas. Se trata de la funcin preferida para acceder
directamente a un nodo y poder leer o modificar sus propiedades.
La funcin getElementById() devuelve el elemento XHTML cuyo
atributo id coincide con el parmetro indicado en la funcin. Como el
atributo id debe ser nico para cada elemento de una misma pgina, la funcin
devuelve nicamente el nodo deseado.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
La funcin getElementById() es tan importante y tan utilizada en todas las

aplicaciones web, que casi todos los ejemplos y ejercicios que siguen la utilizan
constantemente.
Internet Explorer 6.0 tambin interpreta incorrectamente esta funcin, ya que
devuelve tambin aquellos elementos cuyo atributo name coincida con el
parmetro proporcionado a la funcin.
12. Nuevos Selectores
Como vimos anteriormente, los elementos HTML tienen que ser referenciados
desde JavaScript para ser afectados por el cdigo. Si recuerda de previos
captulos, CSS, y especialmente CSS3, ofrece un poderoso sistema de
Pgina 50 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
referencia y seleccin que no tiene comparacin con los pocos mtodos

provistos por JavaScript para este propsito. Los mtodos getElementById,
getElementsByTagName y getElementsByClassName no son suficientes
para contribuir a la integracin que este lenguaje necesita y sostener la
relevancia que posee dentro de la especificacin de HTML5. Para elevar
JavaScript al nivel que las circunstancias requieren, nuevas alternativas debieron
ser incorporadas. Desde ahora podemos seleccionar elementos HTML aplicando
toda clase de selectores CSS por medio de los nuevos mtodos querySelector()
y querySelectorAll().
querySelector():
Este mtodo devuelve el primer elemento que coincide con un selector
CSS especificado (s) en el documento. Los selectores son declarados usando
comillas y la misma sintaxis CSS, como en el siguiente ejemplo:
Nota: El mtodo querySelector () slo devuelve el primer elemento que coincida
con los selectores especificados. Para devolver todos los nodos que concuerdan
con la bsqueda, utilice el querySelectorAll () mtodo en su lugar.
document.querySelector(#principal p:first-child).
onclick=mostraralerta;
}
}
Listado 2-1. Usando querySelector().
En el Listado 2-1 el mtodo getElementsByTagName usado anteriormente ha

sido reemplazado por querySelector(). Los selectores para esta consulta en
particular estn referenciando al primer elemento <p> que es hijo del elemento
identificado con el atributo id y el valor principal.
Pgina 51 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Debido a que ya explicamos que este mtodo solo retorna el primer elemento
encontrado, probablemente notar que la pseudo clase first-child es
redundante.
Obtener el primer elemento <p> en el documento:
document.querySelector("p");
El mtodo querySelector() en nuestro ejemplo retornar el primer elemento <p>

dentro de <div> que es, por supuesto, su primer hijo. El propsito de este
ejemplo es mostrarle que querySelector() acepta toda clase de selectores
vlidos CSS y ahora, del mismo modo que en CSS, JavaScript tambin provee
herramientas importantes para referenciar cada elemento en el documento.
Varios grupos de selectores pueden ser declarados separados por coma. El

mtodo querySelector() retornar el primer elemento que concuerde con
cualquiera de ellos.
Hgalo usted mismo: Reemplace el cdigo en el archivo micodigo.js por

el provisto en el Listado 2-1 y abra el archivo HTML con el cdigo del
Listado 1-3 en su navegador para ver el mtodo querySelector() en
accin.
Si el selector coincide con un ID en el documento que se utiliza en varias
ocasiones (Tenga en cuenta que un "id" debe ser nico dentro de una pgina y
no se debe utilizar ms de una vez), devuelve el primer elemento coincidente.
querySelectorAll():
En lugar de uno, el mtodo querySelectorAll() retorna todos los elementos que
concuerdan con el grupo de selectores declarados entre parntesis. El valor
retornado es un arreglo (array) conteniendo cada elemento encontrado en el
orden en el que aparecen en el documento.
Pgina 52 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
var lista=document.querySelectorAll(#principal p);

lista[0].onclick=mostraralerta;
}
}
Listado 2-2. Usando querySelectorAll().
El grupo de selectores especificados en el mtodo querySelectorAll() del

Listado 2-2 encontrar cada elemento <p> en el documento HTML del listado
1-3 que es hijo del elemento <div>. Luego de la ejecucin de esta primera lnea,
el array lista tendr dos valores: una referencia al primer elemento <p> y una
referencia al segundo elemento <p>. Debido a que el ndice de cada array
comienza por 0, en la prxima lnea el primer elemento encontrado es
referenciado usando corchetes y el valor 0 (lista[0]).
Note que este ejemplo no muestra el potencial de querySelectorAll().

Normalmente ser utilizado para afectar a varios elementos y no solo uno, como
en este caso. Para interactuar con una lista de elementos retornados por este
mtodo, podemos utilizar un bucle for:
var lista=document.querySelectorAll(#principal p);
for(var f=0; f<lista.length; f++){
lista[f].onclick=mostraralerta;
}
}
}
Listado 2-3. Afectando todos los elementos encontrados por querySelectorAll().
Pgina 53 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
En el Listado 2-3, en lugar de seleccionar solo el primer elemento encontrado,

registramos el manejador de eventos onclick para cada uno de ellos usando un
bucle for. Ahora, todos los elementos <p> dentro de <div> mostrarn una
pequea ventana cuando el usuario haga clic sobre ellos.
El mtodo querySelectorAll(), al igual que querySelector(), puede contener

uno o ms grupos de selectores separados por coma. stos y los dems
mtodos estudiados pueden ser combinados para referenciar elementos a los
que resulta difcil llegar. Por ejemplo, en el prximo listado, el mismo resultado
del cdigo del Listado 2-3 es logrado utilizando querySelectorAll() y
getElementById() juntos:
var lista=document.getElementById(principal).
querySelectorAll(p);
lista[0].onclick=mostraralerta;
}
}
Listado 2-4. Combinando mtodos.
Usando esta tcnica podemos ver qu precisos pueden ser estos mtodos.
Podemos combinarlos en una misma lnea y luego realizar una segunda
seleccin con otro mtodo para alcanzar elementos dentro de los primeros. En
prximos captulos estudiaremos algunos ejemplos ms.
Obtn todos los elementos <p> en el documento, y establecer el color de fondo

del primer elemento <p> (ndice 0):
var x = document.querySelectorAll("p");
x[0].style.backgroundColor = "red";
Pgina 54 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
13. Manejadores de eventos
Como comentamos anteriormente, el cdigo JavaScript es normalmente

ejecutado luego de que el usuario realiza alguna accin. Estas acciones y otros
eventos son procesados por manejadores de eventos y funciones JavaScript
asociadas con ellos.
El nombre de cada evento se construye mediante el prefijo on, seguido del
nombre en ingls de la accin asociada al evento. As, el evento de pinchar un
elemento con el ratn se denomina onclick y el evento asociado a la accin de
mover el ratn se denomina onMouseMove.
La siguiente tabla resume los eventos ms importantes definidos por JavaScript:
Descripcin
Elementos para los que est

definido
onblur
Deseleccionar el elemento
<button>, <input>, <label

>, <select>,<textarea>, <b
ody>
onchange
Deseleccionar un elemento que se ha

modificado
<input>, <select>, <texta

rea>
onclick
Pinchar y soltar el ratn
Todos los elementos
ondblclick
Pinchar dos veces seguidas con el ratn
Todos los elementos
Evento
Pgina 55 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Descripcin

definido
onfocus
Seleccionar un elemento
<button>, <input>, <label

>, <select>,<textarea>, <b
ody>
onkeydown
Pulsar una tecla (sin soltar)
Elementos de formulario
y <body>
onkeypress
Pulsar una tecla
y <body>
onkeyup
Soltar una tecla pulsada
y <body>
onload
La pgina se ha cargado completamente
<body>
onmousedown
Pulsar (sin soltar) un botn del ratn
Todos los elementos
onmousemove
Mover el ratn
Todos los elementos
onmouseout
El ratn "sale" del elemento (pasa por

encima de otro elemento)
Todos los elementos
onmouseover
El ratn "entra" en el elemento (pasa por

encima del elemento)
Todos los elementos
Evento
Pgina 56 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Evento
Descripcin

definido
onmouseup
Soltar el botn que estaba pulsado en el

ratn
Todos los elementos
onreset
Inicializar el formulario (borrar todos sus

datos)
<form>
onresize
Se ha modificado el tamao de la
ventana del navegador
<body>
onselect
Seleccionar un texto
<input>, <textarea>
onsubmit
Enviar el formulario
<form>
onunload
Se abandona la pgina (por ejemplo al

cerrar el navegador)
<body>
Los eventos ms utilizados en las aplicaciones web tradicionales

son onload para esperar a que se cargue la pgina por completo, los
eventos onclick, onmouseover, onmouseout para controlar el ratn y
onsubmit para controlar el envo de los formularios.
Algunos eventos de la tabla anterior (onclick, onkeydown, onkeypress, onreset,
onsubmit) permiten evitar la "accin por defecto" de ese evento. Ms adelante
se muestra en detalle este comportamiento, que puede resultar muy til en
algunas tcnicas de programacin.
Pgina 57 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Las acciones tpicas que realiza un usuario en una pgina web pueden dar lugar
a una sucesin de eventos. Al pulsar por ejemplo sobre un botn de tipo <input
type="submit"> se desencadenan los eventos onmousedown, onclick,
onmouseup y onsubmit de forma consecutiva.
Un evento de JavaScript por s mismo carece de utilidad. Para que los eventos
resulten tiles, se deben asociar funciones o cdigo JavaScript a cada evento.
De esta forma, cuando se produce un evento se ejecuta el cdigo indicado, por
lo que la aplicacin puede responder ante cualquier evento que se produzca
durante su ejecucin.
Las funciones o cdigo JavaScript que se definen para cada evento se
denominan "manejador de eventos" y como JavaScript es un lenguaje muy
flexible, existen varias formas diferentes de indicar los manejadores:
Manejadores como atributos de los elementos XHTML.
Manejadores como funciones JavaScript externas.
Manejadores "semnticos".
O usar el nuevo mtodo estndar addEventListener().
Manejadores de eventos como atributos XHTML (En Lnea)

Se trata del mtodo ms sencillo y a la vez menos profesional de indicar el cdigo
JavaScript que se debe ejecutar cuando se produzca un evento. En este caso,
el cdigo se incluye en un atributo del propio elemento XHTML. En el siguiente
ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el ratn
sobre un botn:
<input type="button" value="Pinchame y vers" onclick="alert('Gracias por
pinchar');" />
En este mtodo, se definen atributos XHTML con el mismo nombre que los
eventos que se quieren manejar. El ejemplo anterior slo quiere controlar el
Pgina 58 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
evento de pinchar con el ratn, cuyo nombre es onclick. As, el elemento XHTML
para el que se quiere definir este evento, debe incluir un atributo llamado onclick.
El contenido del atributo es una cadena de texto que contiene todas las
instrucciones JavaScript que se ejecutan cuando se produce el evento. En este
caso, el cdigo JavaScript es muy sencillo (alert('Gracias por pinchar');), ya
que solamente se trata de mostrar un mensaje.
En este otro ejemplo, cuando el usuario pincha sobre el elemento <div> se
muestra un mensaje y cuando el usuario pasa el ratn por encima del elemento,
se muestra otro mensaje:
<div onclick="alert ('Has pinchado con el ratn');" onmouseover="alert('A
cabas de pasar el ratn por encima');">
Puedes pinchar sobre este elemento o simplemente pasar el ratn por encim
a</div>
Este otro ejemplo incluye una de las instrucciones ms utilizadas en las

aplicaciones JavaScript ms antiguas:
<body onload="alert ('La pgina se ha cargado completamente');">
...
</body>
El mensaje anterior se muestra despus de que la pgina se haya cargado

completamente, es decir, despus de que se haya descargado su cdigo HTML,
sus imgenes y cualquier otro objeto incluido en la pgina.
El evento onload es uno de los ms utilizados ya que las funcin permite acceder
y manipular los nodos del rbol DOM solamente cuando la pgina se ha cargado
completamente.
Manejadores de eventos y variable this
JavaScript define una variable especial llamada this que se crea
automticamente y que se emplea en algunas tcnicas avanzadas de
programacin. En los eventos, se puede utilizar la variable this para referirse al
elemento XHTML que ha provocado el evento. Esta variable es muy til para
ejemplos como el siguiente:
Pgina 59 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Cuando el usuario pasa el ratn por encima del <div>, el color del borde se
muestra de color negro. Cuando el ratn sale del <div>, se vuelve a mostrar el
borde con el color gris claro original.
Elemento <div> original:
<div id="contenidos" style="width:150px; height:60px; border:thin solid s
ilver">
Seccin de contenidos...
</div>
Si no se utiliza la variable this, el cdigo necesario para modificar el color de los

bordes, sera el siguiente:
ilver" onmouseover="document.getElementById('contenidos').style.borderCol
or='black';" onmouseout="document.getElementById('contenidos').style.bord
erColor='silver';">
</div>
El cdigo anterior es demasiado largo y demasiado propenso a cometer errores.

Dentro del cdigo de un evento, JavaScript crea automticamente la
variable this, que hace referencia al elemento XHTML que ha provocado el
evento. As, el ejemplo anterior se puede reescribir de la siguiente manera:
ilver" onmouseover="this.style.borderColor='black';" onmouseout="this.sty
le.borderColor='silver';">
</div>
El cdigo anterior es mucho ms compacto, ms fcil de leer y de escribir y sigue

funcionando correctamente aunque se modifique el valor del atributo id del <div>.
Pgina 60 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Manejadores de eventos como funciones externas

La definicin de los manejadores de eventos en los atributos XHTML es el
mtodo ms sencillo pero menos aconsejable de tratar con los eventos en
JavaScript. El principal inconveniente es que se complica en exceso en cuanto
se aaden algunas pocas instrucciones, por lo que solamente es recomendable
para los casos ms sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validacin de un
formulario, es aconsejable agrupar todo el cdigo JavaScript en una funcin
externa y llamar a esta funcin desde el elemento XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un
botn:
<input type="button" value="Pinchame y vers" onclick="alert('Gracias por
pinchar');" />
Utilizando funciones externas se puede transformar en:

function muestraMensaje() {
alert('Gracias por pinchar');
}
<input type="button" value="Pinchame y vers" onclick="muestraMensaje()"
/>
Esta tcnica consiste en extraer todas las instrucciones de JavaScript y

agruparlas en una funcin externa. Una vez definida la funcin, en el atributo del
elemento XHTML se incluye el nombre de la funcin, para indicar que es la
funcin que se ejecuta cuando se produce el evento.
La llamada a la funcin se realiza de la forma habitual, indicando su nombre
seguido de los parntesis y de forma opcional, incluyendo todos los argumentos
y parmetros que se necesiten.
El principal inconveniente de este mtodo es que en las funciones externas no
se puede seguir utilizando la variable this y por tanto, es necesario pasar esta
variable como parmetro a la funcin:
Pgina 61 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
function resalta(elemento) {
switch(elemento.style.borderColor) {
case 'silver':
case 'silver silver silver silver':
case '#c0c0c0':
elemento.style.borderColor = 'black';
break;
case 'black':
case 'black black black black':
case '#000000':
elemento.style.borderColor = 'silver';
break;
}
}
<div style="width:150px; height:60px; border:thin solid silver" onmouseov
er="resalta(this)" onmouseout="resalta(this)">
</div>
En el ejemplo anterior, la funcin externa es llamada con el parmetro this, que

dentro de la funcin se denomina elemento. La complejidad del ejemplo se
produce sobre todo por la forma en la que los distintos navegadores almacenan
el valor de la propiedad borderColor.
Mientras que Firefox almacena (en caso de que los cuatro bordes coincidan en
color) el valor black, Internet Explorer lo almacena como black black black black y
Opera almacena su representacin hexadecimal #000000.
Pgina 62 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Manejadores de eventos semnticos

Los mtodos que se han visto para aadir manejadores de eventos (como
atributos XHTML y como funciones externas) tienen un grave
inconveniente: "ensucian" el cdigo XHTML de la pgina.
Como es conocido, una de las buenas prcticas bsicas en el diseo de pginas
y aplicaciones web es la separacin de los contenidos (XHTML) y su aspecto o
presentacin (CSS). Siempre que sea posible, tambin se recomienda separar
los contenidos (XHTML) y su comportamiento o programacin (JavaScript).
Mezclar el cdigo JavaScript con los elementos XHTML solamente contribuye a
complicar el cdigo fuente de la pgina, a dificultar la modificacin y
mantenimiento de la pgina y a reducir la semntica del documento final
producido.
Afortunadamente, existe un mtodo alternativo para definir los manejadores de
eventos de JavaScript. Esta tcnica es una evolucin del mtodo de las
funciones externas, ya que se basa en utilizar las propiedades DOM de los
elementos XHTML para asignar todas las funciones externas que actan de
manejadores de eventos. As, el siguiente ejemplo:
<input id="pinchable" type="button" value="Pinchame y vers" onclick="ale
rt('Gracias por pinchar');" />
Se puede transformar en:

// Funcin externa
function muestraMensaje() {
alert('Gracias por pinchar');
}
// Asignar la funcin externa al elemento
document.getElementById("pinchable").onclick = muestraMensaje;
// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y vers" />
La tcnica de los manejadores semnticos consiste en:

Pgina 63 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
1. Asignar un identificador nico al elemento XHTML mediante el atributo id.

2. Crear una funcin de JavaScript encargada de manejar el evento.
3. Asignar la funcin externa al evento correspondiente en el elemento deseado.
El ltimo paso es la clave de esta tcnica. En primer lugar, se obtiene el elemento

al que se desea asociar la funcin externa:
document.getElementById("pinchable");
A continuacin, se utiliza una propiedad del elemento con el mismo nombre que
el evento que se quiere manejar. En este caso, la propiedad es onclick:
document.getElementById("pinchable").onclick = ...
Por ltimo, se asigna la funcin externa mediante su nombre sin parntesis. Lo

ms importante (y la causa ms comn de errores) es indicar solamente el
nombre de la funcin, es decir, prescindir de los parntesis al asignar la funcin:
Si se aaden los parntesis despus del nombre de la funcin, en realidad se

est ejecutando la funcin y guardando el valor devuelto por la funcin en la
propiedad onclick de elemento.
// Asignar una funcin externa a un evento de un elemento
// Ejecutar una funcin y guardar su resultado en una propiedad de un ele
mento
document.getElementById("pinchable").onclick = muestraMensaje();
La gran ventaja de este mtodo es que el cdigo XHTML resultante es

muy "limpio", ya que no se mezcla con el cdigo JavaScript. Adems, dentro de
las funciones externas asignadas s que se puede utilizar la variable this para
referirse al elemento que provoca el evento.
El nico inconveniente de este mtodo es que la pgina se debe cargar
completamente antes de que se puedan utilizar las funciones DOM que asignan
Pgina 64 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
los manejadores a los elementos XHTML. Una de las formas ms sencillas de

asegurar que cierto cdigo se va a ejecutar despus de que la pgina se cargue
por completo es utilizar el evento onload:
window.onload = function() {
}
La tcnica anterior utiliza el concepto de funciones annimas, que no se va a

estudiar, pero que permite crear un cdigo compacto y muy sencillo. Para
asegurarse que un cdigo JavaScript va a ejecutarse despus de que la pgina
se haya cargado completamente, slo es necesario incluir esas instrucciones
entre los smbolos { y }:
...
}
En el siguiente ejemplo, se aaden eventos a los elementos de tipo input=text de

un formulario complejo:
function resalta() {
// Cdigo JavaScript
}
var formulario = document.getElementById("formulario");
var camposInput = formulario.getElementsByTagName("input");
for(var i=0; i<camposInput.length; i++) {
if(camposInput[i].type == "text") {
camposInput[i].onclick = resalta;
}
}
Pgina 65 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
El mtodo addEventListener():
El mtodo addEventListener() es la tcnica ideal y la que es considerada como
estndar por la especificacin de HTML5. Este mtodo tiene tres argumentos: el
nombre del evento, la funcin a ser ejecutada y un valor booleano (falso o
verdadero) que indica cmo un evento ser disparado en elementos
superpuestos.
Por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<script>
}
var elemento=document.getElementsByTagName('p')[0];
elemento.addEventListener(click, mostraralerta, false);
}
window.addEventListener(load, hacerclic, false);
</script>
</head>
<body>
<div id=principal>
<p>Hacer Clic</p>
<p>No puede hacer Clic</p></div>
</body>
</html>
Listado 3-1. Agregando escuchas para eventos con addEventListener().
El Listado 3-1 presenta el mismo cdigo que el Listado 1-2 pero ahora una
escucha fue agregada para cada evento usando el mtodo addEventListener().
Para organizar el cdigo en la funcin hacerclic(), asignamos la referencia del
Pgina 66 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
elemento a una variable llamada elemento y luego agregamos la escucha para

el evento click usando esa variable.
La sintaxis del mtodo addEventListener() es la mostrada en el Listado 3-1. El
primer atributo es el nombre del evento. El segundo es la funcin a ser ejecutada,
la cual puede ser una referencia a una funcin (como en este caso) o una funcin
annima. El tercer atributo especificar, usando true (verdadero) o false (falso),
cmo mltiples eventos sern disparados. Por ejemplo, si estamos escuchando al
evento click en dos elementos que se encuentran anidados (uno dentro de otro),
cuando el usuario hace clic sobre estos elementos dos eventos click son
disparados en un orden que depende de este valor. Si el atributo es declarado
como true para uno de los elementos, entonces ese evento ser considerado
primero y el otro luego. Normalmente el valor false es el ms adecuado para la
mayora de las situaciones.
Conceptos bsicos: Funciones annimas, son funciones dinmicamente

declaradas y que no tienen nombre (por esto son llamadas annimas).
Esta clase de funciones son extremadamente tiles en JavaScript, nos
ayudan a organizar el cdigo y no sobre poblar el objeto global con
funciones independientes. Usaremos funciones annimas con frecuencia
en los siguientes captulos.
Incluso cuando los resultados de aplicar esta tcnica y la anterior son similares,
addEventListener() nos permite agregar tantas escuchas como necesitemos
para el mismo elemento. Esta distincin le otorga a addEventListener() una
ventaja sobre el resto, convirtindola en la tcnica ideal para aplicaciones
HTML5.
Debido a que los eventos son la clave para sitios webs y aplicaciones
interactivas, varios fueron agregados en la especificacin de HTML5. En
Pgina 67 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
prximos captulos estudiaremos cada uno de estos nuevos eventos y el entorno

en el cual trabajan.
Propiedades bsicas de formularios y elementos

usando JavaScript.
JavaScript dispone de numerosas propiedades y funciones que facilitan la
programacin de aplicaciones que manejan formularios. En primer lugar, cuando
se carga una pgina web, el navegador crea automticamente un array
llamado forms y que contiene la referencia a todos los formularios de la pgina.
Para acceder al array forms, se utiliza el objeto document, por lo
que document.forms es el array que contiene todos los formularios de la pgina.
Como se trata de un array, el acceso a cada formulario se realiza con la misma
sintaxis de los arrays. La siguiente instruccin accede al primer formulario de la
pgina: document.forms[0];
Adems del array de formularios, el navegador crea automticamente un array
llamado elements por cada uno de los formularios de la pgina. Cada
array elements contiene la referencia a todos los elementos (cuadros de texto,
botones, listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los
arrays, la siguiente instruccin obtiene el primer elemento del primer formulario
de la pgina: document.forms[0].elements[0];
La sintaxis de los arrays no siempre es tan concisa. El siguiente ejemplo muestra
cmo obtener directamente el ltimo elemento del primer formulario de la pgina:
document.forms[0].elements[document.forms[0].elements.length-1];
Aunque esta forma de acceder a los formularios es rpida y sencilla, tiene un
inconveniente muy grave. Qu sucede si cambia el diseo de la pgina y en el
cdigo HTML se cambia el orden de los formularios originales o se aaden
nuevos formularios? El problema es que "el primer formulario de la pgina" ahora
podra ser otro formulario diferente al que espera la aplicacin.
Pgina 68 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
En un entorno tan cambiante como el diseo web, es muy difcil confiar en que
el orden de los formularios se mantenga estable en una pgina web. Por este
motivo, siempre debera evitarse el acceso a los formularios de una pgina
mediante el array document.forms.
Una forma de evitar los problemas del mtodo anterior consiste en acceder a los
formularios de una pgina a travs de su nombre (atributo name) o a travs de
su atributo id. El objeto document permite acceder directamente a cualquier
formulario mediante su atributo name:
var formularioPrincipal = document.formulario;
var formularioSecundario = document.otro_formulario;
<form name="formulario" >
...
</form>
<form name="otro_formulario" >
...
</form>
Accediendo de esta forma a los formularios de la pgina, el script funciona

correctamente aunque se reordenen los formularios o se aadan nuevos
formularios a la pgina. Los elementos de los formularios tambin se pueden
acceder directamente mediante su atributo name:
var formularioPrincipal = document.formulario;
var primerElemento = document.formulario.elemento;
<form name="formulario">
<input type="text" name="elemento" />
</form>
Pgina 69 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Obviamente, tambin se puede acceder a los formularios y a sus elementos

utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo
utiliza la habitual funcin document.getElementById() para acceder de forma
directa a un formulario y a uno de sus elementos:
var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");
<form name="formulario" id="formulario" >
<input type="text" name="elemento" id="elemento" />
</form>
Independientemente del mtodo utilizado para obtener la referencia a un

elemento de formulario, cada elemento dispone de las siguientes propiedades
tiles para el desarrollo de las aplicaciones:
type: indica el tipo de elemento que se trata. Para los elementos de
tipo <input> (text, button,checkbox, etc.) coincide con el valor de su

atributo type. Para las listas desplegables normales (elemento <select>) su
valor es select-one, lo que permite diferenciarlas de las listas que permiten
seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por
ltimo, en los elementos de tipo <textarea>, el valor de type es textarea.
form: es una referencia directa al formulario al que pertenece el elemento.
As, para acceder al formulario de un elemento, se puede
utilizar document.getElementById("id_del_elemento").form
name: obtiene el valor del atributo name de XHTML. Solamente se puede
leer su valor, por lo que no se puede modificar.
value: permite leer y modificar el valor del atributo value de XHTML. Para
los campos de texto (<input type="text"> y <textarea>) obtiene el texto

que ha escrito el usuario. Para los botones obtiene el texto que se muestra
en el botn. Para los elementos checkbox y radiobutton no es muy til,
como se ver ms adelante.
Pgina 70 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Por ltimo, los eventos ms utilizados en el manejo de los formularios son los
siguientes:
onclick: evento que se produce cuando se pincha con el ratn sobre un
elemento. Normalmente se utiliza con cualquiera de los tipos de botones

que
permite
definir
XHTML
(<input
type="button">,
<input
type="submit">, <input type="image">).
onchange: evento que se produce cuando el usuario cambia el valor de un
elemento de texto (<input type="text"> o <textarea>). Tambin se produce
cuando el usuario selecciona una opcin en una lista desplegable
(<select>). Sin embargo, el evento slo se produce si despus de realizar el
cambio, el usuario pasa al siguiente campo del formulario, lo que
tcnicamente se conoce como que "el otro campo de formulario ha perdido
el foco".
onfocus: evento que se produce cuando el usuario selecciona un elemento

del formulario.
onblur: evento complementario de onfocus, ya que se produce cuando el
usuario ha deseleccionado un elemento por haber seleccionado otro
elemento del formulario. Tcnicamente, se dice que el elemento anterior "ha
perdido el foco".
Utilidades bsicas para formularios

Obtener el valor de los campos de formulario
La mayora de tcnicas JavaScript relacionadas con los formularios requieren
leer y/o modificar el valor de los campos del formulario. Por tanto, a continuacin
se muestra cmo obtener el valor de los campos de formulario ms utilizados.
Cuadro de texto y textarea
El valor del texto mostrado por estos elementos se obtiene y se establece
directamente mediante la propiedad value.
<input type="text" id="texto" />
var valor = document.getElementById("texto").value;
Pgina 71 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;
Radiobutton
Cuando se dispone de un grupo de radiobuttons, generalmente no se quiere
obtener el valor del atributo value de alguno de ellos, sino que lo importante es
conocer cul de todos los radiobuttons se ha seleccionado. La
propiedad checked devuelve true para el radiobutton seleccionado y false en
cualquier otro caso. Si por ejemplo se dispone del siguiente grupo
de radiobuttons:
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/
NC
El siguiente cdigo permite determinar si cada radiobutton ha sido seleccionado

o no:
var elementos = document.getElementsByName("pregunta");
for(var i=0; i<elementos.length; i++) {

alert(" Elemento: " + elementos[i].value + "\n Seleccionado: " + elemen
tos[i].checked);
}
Checkbox
Los elementos de tipo checkbox son muy similares a los radiobutton, salvo que
en este caso se debe comprobar cada checkbox de forma independiente del
resto. El motivo es que los grupos de radiobutton son mutuamente excluyentes
y slo se puede seleccionar uno de ellos cada vez. Por su parte, los checkbox se
pueden seleccionar de forma independiente respecto de los dems.
Si se dispone de los siguientes checkbox:
<input type="checkbox" value="condiciones" name="condiciones" id="condici
ones"/> He ledo y acepto las condiciones
Pgina 72 de 98
Fecha elaboracin:
28 de Marzo de
2015
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Elaborado por:
<input type="checkbox" value="privacidad" name="privacidad" id="privacida

d"/> He ledo la poltica de privacidad
Utilizando la propiedad checked, es posible comprobar si cada checkbox ha

sido seleccionado:
var elemento = document.getElementById("condiciones");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.che
cked);
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.che
cked);
Select
Las listas desplegables (<select>) son los elementos en los que es ms difcil
obtener su valor. Si se dispone de una lista desplegable como la siguiente:
<select id="opciones" name="opciones">
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
<option value="4">Cuarto valor</option>
</select>
En general, lo que se requiere es obtener el valor del atributo value de la opcin

(<option>) seleccionada por el usuario. Obtener este valor no es sencillo, ya que
se deben realizar una serie de pasos. Adems, para obtener el valor
seleccionado, deben utilizarse las siguientes propiedades:
options, es un array creado automticamente por el navegador para cada lista
desplegable y que contiene la referencia a todas las opciones de esa lista. De esta
forma,
la
primera
opcin
de
una
lista
se
puede
obtener
mediante document.getElementById("id_de_la_lista").options[0].
selectedIndex, cuando el usuario selecciona una opcin, el navegador actualiza
automticamente el valor de esta propiedad, que guarda el ndice de la opcin

Pgina 73 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
seleccionada. El ndice hace referencia al array options creado automticamente

por el navegador para cada lista.
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
// Obtener el ndice de la opcin que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el ndice y el array "options", obtener la opcin seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado];
// Obtener el valor y el texto de la opcin seleccionada

var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
alert("Opcin seleccionada: " + textoSeleccionado + "\n Valor de la opci
n: " + valorSeleccionado);
Como se ha visto, para obtener el valor del atributo value correspondiente a la

opcin seleccionada por el usuario, es necesario realizar varios pasos. No
obstante, normalmente se abrevian todos los pasos necesarios en una nica
instruccin:
var lista = document.getElementById("opciones");
// Obtener el valor de la opcin seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
// Obtener el texto que muestra la opcin seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].text;
Lo ms importante es no confundir el valor de la propiedad selectedIndex con el

valor correspondiente a la propiedad value de la opcin seleccionada. En el
ejemplo anterior, la primera opcin tiene un value igual a 1. Sin embargo, si se
selecciona esta opcin, el valor de selectedIndex ser 0, ya que es la primera
Pgina 74 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
opcin del array options (y los arrays empiezan a contar los elementos en el
nmero 0).
Establecer el foco en un elemento
En programacin, cuando un elemento est seleccionado y se puede escribir
directamente en el o se puede modificar alguna de sus propiedades, se dice que
tiene el foco del programa.
Si un cuadro de texto de un formulario tiene el foco, el usuario puede escribir
directamente en el sin necesidad de pinchar previamente con el ratn en el
interior del cuadro. Igualmente, si una lista desplegable tiene el foco, el usuario
puede seleccionar una opcin directamente subiendo y bajando con las flechas
del teclado.
Al pulsar repetidamente la tecla TABULADOR sobre una pgina web, los
diferentes elementos (enlaces, imgenes, campos de formulario, etc.) van
obteniendo el foco del navegador (el elemento seleccionado cada vez suele
mostrar un pequeo borde punteado).
Si en una pgina web el formulario es el elemento ms importante, como por
ejemplo en una pgina de bsqueda o en una pgina con un formulario para
registrarse, se considera una buena prctica de usabilidad el asignar
automticamente el foco al primer elemento del formulario cuando se carga la
pgina.
Para asignar el foco a un elemento de XHTML, se utiliza la funcin focus(). El
siguiente ejemplo asigna el foco a un elemento de formulario cuyo atributo id es
igual a primero:
document.getElementById("primero").focus();
<form id="formulario" action="#">
<input type="text" id="primero" />
</form>
Pgina 75 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Ampliando el ejemplo anterior, se puede asignar automticamente el foco del

programa al primer elemento del primer formulario de la pgina,
independientemente del id del formulario y de los elementos:
if(document.forms.length > 0) {
if(document.forms[0].elements.length > 0) {
document.forms[0].elements[0].focus();
}
}
El cdigo anterior comprueba que existe al menos un formulario en la pgina

mediante el tamao del array forms. Si su tamao es mayor que 0, se utiliza este
primer formulario. Empleando la misma tcnica, se comprueba que el formulario
tenga al menos un elemento (if(document.forms[0].elements.length > 0)). En caso
afirmativo, se establece el foco del navegador en el primer elemento del primer
formulario (document.forms[0].elements[0].focus();).
Para que el ejemplo anterior sea completamente correcto, se debe aadir una
comprobacin adicional. El campo de formulario que se selecciona no debera
ser de tipo hidden:
if(document.forms.length > 0) {
for(var i=0; i < document.forms[0].elements.length; i++) {
var campo = document.forms[0].elements[i];
if(campo.type != "hidden") {
campo.focus();
break;
}
}
}
Pgina 76 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Evitar el envo duplicado de un formulario

Uno de los problemas habituales con el uso de formularios web es la posibilidad
de que el usuario pulse dos veces seguidas sobre el botn "Enviar". Si la
conexin del usuario es demasiado lenta o la respuesta del servidor se hace
esperar, el formulario original sigue mostrndose en el navegador y por ese
motivo, el usuario tiene la tentacin de volver a pinchar sobre el botn de
"Enviar".
En la mayora de los casos, el problema no es grave e incluso es posible
controlarlo en el servidor, pero puede complicarse en formularios de aplicaciones
importantes como las que implican transacciones econmicas.
Por este motivo, una buena prctica en el diseo de aplicaciones web suele ser
la de deshabilitar el botn de envo despus de la primera pulsacin. El siguiente
ejemplo muestra el cdigo necesario:
<form id="formulario" action="#">
...
<input type="button" value="Enviar" onclick="this.disabled=true; this.v
alue=Enviando...; this.form.submit()" />
</form>
Cuando se pulsa sobre el botn de envo del formulario, se produce el

evento onclick sobre el botn y por tanto, se ejecutan las instrucciones JavaScript
contenidas en el atributo onclick:
1. En primer lugar, se deshabilita el botn mediante la instruccin this.disabled =
true;. Esta es la nica instruccin necesaria si slo se quiere deshabilitar un botn.
2. A continuacin, se cambia el mensaje que muestra el botn. Del original "Enviar"

se pasa al ms adecuado "Enviando..."
3. Por ltimo, se enva el formulario mediante la funcin submit() en la siguiente
instruccin: this.form.submit()
El botn del ejemplo anterior est definido mediante un botn de tipo <input
type="button" />, ya que el cdigo JavaScript mostrado no funciona
Pgina 77 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
correctamente con un botn de tipo <input type="submit" />. Si se utiliza un botn

de tipo submit, el botn se deshabilita antes de enviar el formulario y por tanto el
formulario acaba sin enviarse.
Limitar el tamao de caracteres de un textarea
La carencia ms importante de los campos de formulario de tipo textarea es la
imposibilidad de limitar el mximo nmero de caracteres que se pueden
introducir, de forma similar al atributo maxlength de los cuadros de texto
normales.
JavaScript permite aadir esta caracterstica de forma muy sencilla. En primer
lugar, hay que recordar que con algunos eventos (como onkeypress, onclick y
onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false.
Evitar el comportamiento normal equivale a modificar completamente el

comportamiento habitual del evento. Si por ejemplo se devuelve el valor false en
el evento onkeypress, la tecla pulsada por el usuario no se tiene en cuenta. Si se
devuelve false en el evento onclick de un elemento como un enlace, el navegador
no carga la pgina indicada por el enlace.
Si un evento devuelve el valor true, su comportamiento es el habitual:
<textarea onkeypress="return true;"></textarea>
En el textarea del ejemplo anterior, el usuario puede escribir cualquier carcter,

ya que el evento onkeypress devuelve true y por tanto, su comportamiento es el
normal y la tecla pulsada se transforma en un carcter dentro del textarea.
Sin embargo, en el siguiente ejemplo:
<textarea onkeypress="return false;"></textarea>
Como el valor devuelto por el evento onkeypress es igual a false, el navegador

no ejecuta el comportamiento por defecto del evento, es decir, la tecla
presionada no se transforma en ningn carcter dentro del textarea. No importa
Pgina 78 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
las veces que se pulsen las teclas y no importa la tecla pulsada, ese textarea no
permitir escribir ningn carcter.
Aprovechando esta caracterstica, es sencillo limitar el nmero de caracteres que
se pueden escribir en un elemento de tipo textarea: se comprueba si se ha
llegado al mximo nmero de caracteres permitido y en caso afirmativo se evita
el comportamiento habitual del evento y por tanto, los caracteres adicionales no
se aaden al textarea:
function limita(maximoCaracteres) {
var elemento = document.getElementById("texto");
if(elemento.value.length >= maximoCaracteres ) {
return false;
}
else {
return true;
}
}
<textarea id="texto" onkeypress="return limita(100);"></textarea>
En el ejemplo anterior, con cada tecla pulsada se compara el nmero total de

caracteres del textarea con el mximo nmero de caracteres permitido. Si el
nmero de caracteres es igual o mayor que el lmite, se devuelve el valor false y
por tanto, se evita el comportamiento por defecto de onkeypress y la tecla no se
aade.
Restringir los caracteres permitidos en un cuadro de texto
En ocasiones, puede ser til bloquear algunos caracteres determinados en un
cuadro de texto. Si por ejemplo un cuadro de texto espera que se introduzca un
nmero, puede ser interesante no permitir al usuario introducir ningn carcter
que no sea numrico.
Pgina 79 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Igualmente, en algunos casos puede ser til impedir que el usuario introduzca
nmeros en un cuadro de texto. Utilizando el evento onkeypress y unas cuantas
sentencias JavaScript, el problema se resuelve fcilmente:
function permite(elEvento, permitidos) {
// Variables que definen los caracteres permitidos
var numeros = "0123456789";
var caracteres = " abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWX
YZ";
var numeros_caracteres = numeros + caracteres;
var teclas_especiales = [8, 37, 39, 46];
// 8 = BackSpace, 46 = Supr, 37 = flecha izquierda, 39 = flecha derecha
// Seleccionar los caracteres a partir del parmetro de la funcin

switch(permitidos) {
case 'num':
permitidos = numeros;
break;
case 'car':
permitidos = caracteres;
break;
case 'num_car':
permitidos = numeros_caracteres;
break;
}
// Obtener la tecla pulsada
Pgina 80 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
var evento = elEvento || window.event;

var codigoCaracter = evento.charCode || evento.keyCode;
var caracter = String.fromCharCode(codigoCaracter);
// Comprobar si la tecla pulsada es alguna de las teclas especiales

// (teclas de borrado y flechas horizontales)
var tecla_especial = false;
for(var i in teclas_especiales) {
if(codigoCaracter == teclas_especiales[i]) {
tecla_especial = true;
break;
}
}
// Comprobar si la tecla pulsada se encuentra en los caracteres permiti

dos
// o si es una tecla especial
return permitidos.indexOf(caracter) != -1 || tecla_especial;
}
// Slo nmeros
<input type="text" id="texto" onkeypress="return permite(event, 'num')" /
>
// Slo letras
<input type="text" id="texto" onkeypress="return permite(event, 'car')" /
>
Pgina 81 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
// Slo letras o nmeros

<input type="text" id="texto" onkeypress="return permite(event, 'num_car'
)" />
El funcionamiento del script anterior se basa en permitir o impedir el

comportamiento habitual del evento onkeypress. Cuando se pulsa una tecla, se
comprueba si el carcter de esa tecla se encuentra dentro de los caracteres
permitidos para ese elemento <input>.
Si el carcter se encuentra dentro de los caracteres permitidos, se
devuelve true y por tanto el comportamiento de onkeypress es el habitual y la
tecla se escribe. Si el carcter no se encuentra dentro de los caracteres
permitidos, se devuelve false y por tanto se impide el comportamiento normal
de onkeypress y la tecla no llega a escribirse en el input.
Adems, el script anterior siempre permite la pulsacin de algunas teclas
especiales. En concreto, las teclas BackSpace y Supr para borrar caracteres y las
teclas Flecha Izquierda y Flecha Derecha para moverse en el cuadro de texto
siempre se pueden pulsar independientemente del tipo de caracteres permitidos.
Validacin
La principal utilidad de JavaScript en el manejo de los formularios es la validacin
de los datos introducidos por los usuarios. Antes de enviar un formulario al
servidor, se recomienda validar mediante JavaScript los datos insertados por el
usuario. De esta forma, si el usuario ha cometido algn error al rellenar el
formulario, se le puede notificar de forma instantnea, sin necesidad de esperar
la respuesta del servidor.
Notificar los errores de forma inmediata mediante JavaScript mejora la
satisfaccin del usuario con la aplicacin (lo que tcnicamente se conoce
como "mejorar la experiencia de usuario") y ayuda a reducir la carga de
procesamiento en el servidor.
Pgina 82 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Normalmente, la validacin de un formulario consiste en llamar a una funcin de

validacin cuando el usuario pulsa sobre el botn de envo del formulario. En
esta funcin, se comprueban si los valores que ha introducido el usuario cumplen
las restricciones impuestas por la aplicacin.
Aunque existen tantas posibles comprobaciones como elementos de formulario
diferentes, algunas comprobaciones son muy habituales: que se rellene un
campo obligatorio, que se seleccione el valor de una lista desplegable, que la
direccin de email indicada sea correcta, que la fecha introducida sea lgica, que
se haya introducido un nmero donde as se requiere, etc.
A continuacin se muestra el cdigo JavaScript bsico necesario para incorporar
la validacin a un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>
Y el esquema de la funcin validacion() es el siguiente:

function validacion() {
if (condicion que debe cumplir el primer campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
return false;
}
Pgina 83 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
...
else if (condicion que debe cumplir el ltimo campo del formulario) {
return false;
}
// Si el script ha llegado a este punto, todas las condiciones
// se han cumplido, por lo que se devuelve el valor true
return true;
}
El funcionamiento de esta tcnica de validacin se basa en el comportamiento

del evento onsubmit de JavaScript. Al igual que otros eventos como onclick y
onkeypress, el evento onsubmit vara su comportamiento en funcin del valor que
se devuelve.
As, si el evento onsubmit devuelve el valor true, el formulario se enva como lo
hara normalmente. Sin embargo, si el evento onsubmit devuelve el valor false,
el formulario no se enva. La clave de esta tcnica consiste en comprobar todos
y cada uno de los elementos del formulario. En cuanto se encuentra un elemento
incorrecto, se devuelve el valor false. Si no se encuentra ningn error, se
devuelve el valor true.
Por lo tanto, en primer lugar se define el evento onsubmit del formulario como:
onsubmit="return validacion()"
Como el cdigo JavaScript devuelve el valor resultante de la funcin validacion(),

el formulario solamente se enviar al servidor si esa funcin devuelve true. En el
caso de que la funcin validacion() devuelva false, el formulario permanecer sin
enviarse.
Pgina 84 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Dentro de la funcin validacion() se comprueban todas las condiciones impuestas

por la aplicacin. Cuando no se cumple una condicin, se devuelve false y por
tanto el formulario no se enva. Si se llega al final de la funcin, todas las
condiciones se han cumplido correctamente, por lo que se devuelve true y el
formulario se enva.
La notificacin de los errores cometidos depende del diseo de cada aplicacin.
En el cdigo del ejemplo anterior simplemente se muestran mensajes mediante
la funcin alert() indicando el error producido. Las aplicaciones web mejor
diseadas muestran cada mensaje de error al lado del elemento de formulario
correspondiente y tambin suelen mostrar un mensaje principal indicando que el
formulario contiene errores.
Una vez definido el esquema de la funcin validacion(), se debe aadir a esta
funcin el cdigo correspondiente a todas las comprobaciones que se realizan
sobre los elementos del formulario. A continuacin, se muestran algunas de las
validaciones ms habituales de los campos de formulario.
Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea
en los que sea obligatorio. La condicin en JavaScript se puede indicar como:
valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
return false;
}
Para que se d por completado un campo de texto obligatorio, se comprueba

que el valor introducido sea vlido, que el nmero de caracteres introducido sea
mayor que cero y que no se hayan introducido slo espacios en blanco.
La palabra reservada null es un valor especial que se utiliza para indicar "ningn
valor". Si el valor de una variable es null, la variable no contiene ningn valor de
tipo objeto, array, numrico, cadena de texto o booleano.
Pgina 85 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
La segunda parte de la condicin obliga a que el texto introducido tenga una

longitud superior a cero caracteres, esto es, que no sea un texto vaco.
Por ltimo, la tercera parte de la condicin (/^\s+$/.test(valor)) obliga a que el valor
introducido por el usuario no slo est formado por espacios en blanco. Esta
comprobacin se basa en el uso de "expresiones regulares", un recurso habitual
en cualquier lenguaje de programacin pero que por su gran complejidad no se
van a estudiar. Por lo tanto, slo es necesario copiar literalmente esta condicin,
poniendo especial cuidado en no modificar ningn carcter de la expresin.
Validar un campo de texto con valores numricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de
texto. La condicin JavaScript consiste en:
if( isNaN(valor) ) {
return false;
}
Si el contenido de la variable valor no es un nmero vlido, no se cumple la

condicin. La ventaja de utilizar la funcin interna isNaN() es que simplifica las
comprobaciones, ya que JavaScript se encarga de tener en cuenta los
decimales, signos, etc.
A continuacin se muestran algunos resultados de la funcin isNaN():
isNaN(3);
// false
isNaN("3");
// false
isNaN(3.3545);
// false
isNaN(32323.345);
// false
isNaN(+23.2);
// false
isNaN("-23.2");
// false
Pgina 86 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
isNaN("23a");
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
// true
isNaN("23.43.54"); // true
Validar que se ha seleccionado una opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable.
El siguiente cdigo JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;
if( indice == null || indice == 0 ) {
return false;
}
<select id="opciones" name="opciones">
<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>
A partir de la propiedad selectedIndex, se comprueba si el ndice de la opcin

seleccionada es vlido y adems es distinto de cero. La primera opcin de la lista
(- Selecciona un valor ) no es vlida, por lo que no se permite el valor 0 para esta
propiedad selectedIndex.
Validar una direccin de email

Se trata de obligar al usuario a introducir una direccin de email con un formato
vlido. Por tanto, lo que se comprueba es que la direccin parezca vlida, ya que
no se comprueba si se trata de una cuenta de correo electrnico real y operativa.
La condicin JavaScript consiste en:
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
return false;
}
Pgina 87 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
La comprobacin se realiza nuevamente mediante las expresiones regulares, ya

que las direcciones de correo electrnico vlidas pueden ser muy diferentes. Por
otra parte, como el estndar que define el formato de las direcciones de correo
electrnico es muy complejo, la expresin regular anterior es una simplificacin.
Aunque esta regla valida la mayora de direcciones de correo electrnico
utilizadas por los usuarios, no soporta todos los diferentes formatos vlidos de
email.
Validar una fecha

Las fechas suelen ser los campos de formulario ms complicados de validar por
la multitud de formas diferentes en las que se pueden introducir. El siguiente
cdigo asume que de alguna forma se ha obtenido el ao, el mes y el da
introducidos por el usuario:
var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;
valor = new Date(ano, mes, dia);
if( !isNaN(valor) ) {
return false;
}
La funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite
construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante
tener en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de
Enero y 11 el mes de Diciembre. Los das del mes siguen una numeracin
diferente, ya que el mnimo permitido es 1 y el mximo 31.
La validacin consiste en intentar construir una fecha con los datos
proporcionados por el usuario. Si los datos del usuario no son correctos, la fecha
no se puede construir correctamente y por tanto la validacin del formulario no
ser correcta.
Pgina 88 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Validar un nmero de DNI

Se trata de comprobar que el nmero proporcionado por el usuario si
corresponde con un nmero vlido de Documento Nacional de Identidad o DNI.
Aunque para cada pas o regin los requisitos del documento de identidad de las
personas pueden variar, a continuacin se muestra un ejemplo genrico
fcilmente adaptable. La validacin no slo debe comprobar que el nmero est
formado por ocho cifras y una letra, sino que tambin es necesario comprobar
que la letra indicada es correcta para el nmero introducido:
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B',
'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
if( !(/^\d{8}[A-Z]$/.test(valor)) ) {
return false;
}
if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) {
return false;
}
La primera comprobacin asegura que el formato del nmero introducido es el

correcto, es decir, que est formado por 8 nmeros seguidos y una letra. Si la
letra est al principio de los nmeros, la comprobacin sera /^[A-Z]\d{8}$/. Si en
vez de ocho nmeros y una letra, se requieren diez nmeros y dos letras, la
comprobacin sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.
La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la
compara con la letra proporcionada por el usuario. El algoritmo de cada
documento de identificacin es diferente, por lo que esta parte de la validacin
se debe adaptar convenientemente.
Validar un nmero de telfono

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con
prefijo nacional, con prefijo internacional, agrupado por pares, separando los
nmeros con guiones, etc.
Pgina 89 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
El siguiente script considera que un nmero de telfono est formado por nueve
dgitos consecutivos y sin espacios ni guiones entre las cifras:
if( !(/^\d{9}$/.test(valor)) ) {
return false;
}
Una vez ms, la condicin de JavaScript se basa en el uso de expresiones

regulares, que comprueban si el valor indicado es una sucesin de nueve
nmeros consecutivos. A continuacin se muestran otras expresiones regulares
que se pueden utilizar para otros formatos de nmero de telfono:
Nmero
Expresin regular
Formato
900900900
/^\d{9}$/
9 cifras seguidas
900-900900
/^\d{3}-\d{3}-\d{3}$/
9 cifras agrupadas de 3 en 3 y
separadas por guiones
900 900900
/^\d{3}\s\d{6}$/
9 cifras, las 3 primeras separadas

por un espacio
/^\d{3}\s\d{2}\s\d{2}\s\d{2}$/
9 cifras, las 3 primeras separadas

por un espacio, las siguientes
agrupadas de 2 en 2
/^$\d{3}$\s\d{6}$/
9 cifras, las 3 primeras encerradas

por parntesis y un espacio de
separacin respecto del resto
900 90 09
00
(900)
900900
Pgina 90 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Nmero
+34
900900900
Expresin regular
/^\+\d{2,3}\s\d{9}$/
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Formato
Prefijo internacional (+ seguido de

2 o 3 cifras), espacio en blanco y 9
cifras consecutivas
Validar que un checkbox ha sido seleccionado

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria,
JavaScript permite comprobarlo de forma muy sencilla:
elemento = document.getElementById("campo");
if( !elemento.checked ) {
return false;
}
Si se trata de comprobar que todos los checkbox del formulario han sido
seleccionados, es ms fcil utilizar un bucle:
formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") {
if(!elemento.checked) {
return false;
}
}
}
Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validacin de
los radiobutton presenta una diferencia importante: en general, la comprobacin
Pgina 91 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
que se realiza es que el usuario haya seleccionado algn radiobutton de los

que forman un determinado grupo. Mediante JavaScript, es sencillo determinar
si se ha seleccionado algn radiobutton de un grupo:
opciones = document.getElementsByName("opciones");
var seleccionado = false;
for(var i=0; i<opciones.length; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}
if(!seleccionado) {
return false;
}
El anterior ejemplo recorre todos los radiobutton que forman un grupo y

comprueba elemento por elemento si se ha sido seleccionado. Cuando se
encuentra el primer radiobutton seleccionado, se sale del bucle y se indica que
al menos uno ha sido seleccionado.
Otras utilidades
Adems de los formularios y de todas las funciones y utilidades de JavaScript
que se han visto, existen muchas otras utilidades que es necesario conocer para
desarrollar aplicaciones completas. Como no es posible estudiar todas las
herramientas que se pueden crear con JavaScript, a continuacin se muestran
algunas de las utilidades bsicas ms comunes.
Pgina 92 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Relojes, contadores e intervalos de tiempo

En ocasiones, algunas pginas web muestran un reloj con la hora actual. Si el
reloj debe actualizarse cada segundo, no se puede mostrar la hora directamente
en la pgina HTML generada por el servidor. En este caso, aunque existen
alternativas realizadas con Java y con Flash, la forma ms sencilla de hacerlo es
mostrar la hora del ordenador del usuario mediante JavaScript.
Para crear y mostrar un reloj con JavaScript, se debe utilizar el objeto
interno Date() para crear fechas/horas y las utilidades que permiten definir
contadores, para actualizar el reloj cada segundo.
El objeto Date() es una utilidad que proporciona JavaScript para crear fechas y
horas. Una vez creado un objeto de tipo fecha, es posible manipularlo para
obtener informacin o realizar clculos con las fechas. Para obtener la fecha y
hora actuales, solamente es necesario crear un objeto Date() sin pasar ningn
parmetro:
var fechaHora = new Date();
Utilizando el cdigo anterior, se puede construir un reloj muy bsico que no

actualiza su contenido:
document.getElementById("reloj").innerHTML = fechaHora;
En HTML. ..
<div id="reloj" />
Cuando se carga la pgina, el ejemplo anterior mostrara un texto parecido al

siguiente en el <div> reservado para el reloj:
Mon May 04 2009 13:36:10 GMT+0200 (Hora de verano romance)
Este primer reloj construido presenta muchas diferencias respecto al reloj que se
quiere construir. En primer lugar, muestra ms informacin de la necesaria.
Adems, su valor no se actualiza cada segundo, por lo que no es un reloj muy
prctico.
Pgina 93 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
El objeto Date() proporciona unas funciones muy tiles para obtener informacin
sobre la fecha y la hora. Concretamente, existen funciones que devuelven la
hora, los minutos y los segundos:
var horas = fechaHora.getHours();
var minutos = fechaHora.getMinutes();
var segundos = fechaHora.getSeconds();
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segund
os;
En HTML
<div id="reloj" />
Utilizando las funciones getHours(), getMinutes() y getSeconds() del objeto Date, el

reloj solamente muestra la informacin de la hora. El resultado del ejemplo
anterior sera un reloj como el siguiente:
20:9:21
Si la hora, minuto o segundo son menores que 10, JavaScript no aade el 0 por
delante, por lo que el resultado no es del todo satisfactorio. El siguiente cdigo
soluciona este problema aadiendo un 0 cuando sea necesario:
if(horas < 10) { horas = '0' + horas; }
if(minutos < 10) { minutos = '0' + minutos; }
if(segundos < 10) { segundos = '0' + segundos; }
os;
Pgina 94 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
<div id="reloj" />
Ahora el reloj muestra correctamente la hora:

20:14:03
Si se quiere mostrar el reloj con un formato de 12 horas en vez de 24, se puede

utilizar el siguiente cdigo:
var sufijo = ' am';
if(horas > 12) {
horas = horas - 12;
sufijo = ' pm';
}
os+sufijo;
En HTML
<div id="reloj" />
Utilizando el cdigo anterior, el reloj ya no muestra la hora como 20:14:03, sino

que la muestra en formato de 12 horas y con el sufijo adecuado:
08:14:03 pm
Para completar el reloj, slo falta que se actualice su valor cada segundo. Para
conseguirlo, se deben utilizar unas funciones especiales de JavaScript que
Pgina 95 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
permiten ejecutar determinadas instrucciones cuando ha transcurrido un

determinado espacio de tiempo.
La funcin setTimeout() permite ejecutar una funcin una vez que haya
transcurrido un periodo de tiempo indicado. La definicin de la funcin es:
setTimeout(nombreFuncion, milisegundos);
La funcin que se va a ejecutar se debe indicar mediante su nombre sin

parntesis y el tiempo que debe transcurrir hasta que se ejecute se indica en
milisegundos. De esta forma, si se crea una funcin encargada de mostrar la
hora del reloj y se denomina muestraReloj(), se puede indicar que se ejecute
dentro de 1 segundo mediante el siguiente cdigo:
function muestraReloj() {
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segu
ndos;
}
setTimeout(muestraReloj, 1000);
En HTML
<div id="reloj" />
No obstante, el cdigo anterior simplemente muestra el contenido del reloj 1

segundo despus de que se cargue la pgina, por lo que no es muy til. Para
ejecutar una funcin de forma peridica, se utiliza una funcin de JavaScript muy
similar a setTimeout() que se denomina setInterval(). Su definicin es:
Pgina 96 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
setInterval(nombreFuncion, milisegundos);
La definicin de esta funcin es idntica a la funcin setTimeout(), salvo que en

este caso, la funcin programada se ejecuta infinitas veces de forma peridica
con un lapso de tiempo entre ejecuciones de tantos milisegundos como se hayan
establecido.
As, para construir el reloj completo, se establece una ejecucin peridica de la
funcin muestraReloj() cada segundo:
function muestraReloj() {
document.getElementById("reloj").innerHTML = horas+':'+minutos+':'+segu
ndos;
}
setInterval(muestraReloj, 1000);
}
En HTML
<div id="reloj" />
Empleando el objeto Date y sus funciones, es posible construir "cuentas atrs",

es decir, relojes que muestran el tiempo que falta hasta que se produzca un
evento. Adems, las funciones setTimeout() y setInterval() pueden resultar muy
tiles en otras tcnicas de programacin.
Pgina 97 de 98
TUTORIAL BSICO DE
JAVASCRIPT
Software Web
Fecha elaboracin:
28 de Marzo de
2015
Elaborado por:
Pgina 98 de 98

Tutorial Básico Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tutorial Básico Javascript

Caricato da

Copyright:

Formati disponibili

TUTORIAL BSICO DE

TUTORIAL BSICO DE JAVASCRIPT.

TCNICA PROFESIONAL EN PROGRAMACIN DE

POLITCNICO JAIME ISAZA CADAVID

Contenido Sesin de Clase 1 y 2.

Etiqueta noscript ................................................................................................................. 7

Glosario bsico ................................................................................................................... 8

Posibilidades y limitaciones ............................................................................................ 11

JavaScript y navegadores ............................................................................................... 12

JavaScript en otros entornos .......................................................................................... 12

Tipos de variables .................................................................................................. 15

7.1.1. Numricas ................................................................................................ 15

8.1.1. Estructura if .............................................................................................. 29

Tipos de nodos ......................................................................................................... 41

Acceso directo a los nodos (Selectores). ................................................................. 41

Incorporando JavaScript .......................................................................................... 42

11.2. getElementsByName() .............................................................................. 49

Nuevos Selectores ..................................................................................................... 50

Manejadores de eventos .......................................................................................... 55

El mtodo addEventListener(): ....................................................................................... 66

Validar un nmero de DNI ................................................................................................ 89

Imagnate a HTML5 como un edificio soportado por tres grandes columnas:

JavaScript es un lenguaje interpretado usado para mltiples propsitos pero

Esta mejorada capacidad permiti superar viejas limitaciones de rendimiento y

En este tutorial bsico, vamos a estudiar cmo incorporar JavaScript dentro de

IMPORTANTE: Nuestro acercamiento a JavaScript en este tutorial es

Figura 1.1 Imagen de www.netvibes.com con JavaScript activado

Figura 1.2 Imagen de www.netvibes.com con JavaScript desactivado

El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al

etiqueta <body> (normalmente se incluye al principio de <body>). El mensaje

Sentencia: cada una de las instrucciones que forman un script.

No se tienen en cuenta los espacios en blanco y las nuevas lneas: como

Se distinguen las maysculas y minsculas: al igual que sucede con la sintaxis

No se define el tipo de las variables: al crear una variable, no es necesario indicar

No es necesario terminar cada sentencia con el carcter de punto y coma (;):

Se pueden incluir comentarios: los comentarios se utilizan para aadir

Los comentarios multilnea se definen encerrando el texto del comentario entre

De la misma forma que si en Matemticas no existieran las variables no se

su nombre. En otras palabras, en el ejemplo anterior sera un error indicar lo

Si cuando se declara una variable se le asigna tambin un valor, se dice que la

Una de las caractersticas ms sorprendentes de JavaScript para los

En cualquier caso, se recomienda declarar todas las variables que se vayan a

El primer carcter no puede ser un nmero.

Por tanto, las siguientes variables tienen nombres correctos:

Sin embargo, las siguientes variables tienen identificadores incorrectos:

// Empieza por un nmero

// Contiene un carcter ";"

7.1. Tipos de variables

. (punto) en vez de , (coma) para separar la parte entera y

// variable tipo entero

var total = 234.65;

// variable tipo decimal

7.1.2. Cadenas de texto

En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si

/* El contenido de texto2 tiene comillas dobles, por lo que

El mecanismo consiste en sustituir el carcter problemtico por una combinacin

Una nueva lnea

Una comilla simple

Una comilla doble

Una barra inclinada

var texto2 = "Una frase con \"comillas dobles\" dentro";

Este mecanismo de JavaScript se denomina "mecanismo de escape" de los

Aunque el cdigo anterior no es incorrecto, s que es poco eficiente y complica

var otroDia = dias[5]; // otroDia = "Sbado"