TUTORIAL BSICO DEL PROGRAMADOR WEB:

JAVASCRIPT DESDE CERO.

Objetivos

JavaScript (JS) es un lenguaje de programacin cuyo uso principal ha venido siendo dotar
de dinamismo, rapidez y efectos atractivos a las pginas web, mediante su uso combinado
junto a HTML, CSS y otros lenguajes. Este curso permite aprender los fundamentos de
JavaScript, imprescindible para trabajar con pginas web hoy da.

Destinatarios

Personas que ya tengan unos conocimientos mnimos sobre creacin de pginas web (HTML y
CSS) y sobre programacin. Para realizar este curso de JavaScript, debes tener conocimientos
previos de HTML y CSS, as como de fundamentos de programacin (haber programado
antes). Se recomienda haber realizado los cursos Tutorial bsico del programador web sobre
HTML desde cero y CSS desde cero, de aprenderaprogramar.com, antes de seguir este curso.

Contenidos

INTRODUCCIN A JAVASCRIPT. QU ES Y PARA QU SIRVE JAVASCRIPT. VERSIONES. EL ECMA.

INSERTAR JAVASCRIPT EN WEBS. EN LNEA, INTERNO Y EXTERNO.
CREANDO SCRIPTS BSICOS. COMENTARIOS, VARIABLES, OPERADORES, CONTROL DEL FLUJO.
FUNCIONES JAVASCRIPT. CREACIN E INVOCACIN. PARMETROS Y RETORNO.
OBJETOS EN JAVASCRIPT. QU SON? TRABAJAR CON ARRAYS, DATE, IMAGE, STRING, MATH.
DOM. JERARQUA DE OBJETOS DEL NAVEGADOR. WINDOW, DOCUMENT.
GESTIN DE EVENTOS CON JAVASCRIPT. TIPOS DE EVENTOS. MANEJADORES DE EVENTOS.
APLICANDO JAVASCRIPT: CSS, FORMULARIOS, CALENDARIOS, RELOJES, MENS, GALERAS
JAVASCRIPT AVANZADO. APIS, LIBRERAS. JQUERY. FIREBUG Y DEPURACIN DE CDIGO.

Duracin

150 horas de dedicacin efectiva, incluyendo lecturas, estudio y ejercicios.

Direccin, modalidades y certificados

El curso est dirigido por Csar Krall, Responsable del Departamento de Produccin de
aprenderaprogramar.com del portal web aprenderaprogramar.com. Se oferta bajo la
modalidad web (gratuito).

Para ms informacin: [email protected]

Indice curso
o Tutorial bsiico programado
or web: JavaSccript desde cero
o.

IND
DIC
CE DEL
D L CU
URSSO

1. NTRODUCCI
IN N A JAVASC
CRIPT. QU ES
E Y PARA QU
Q SIRVE. VERSIONES
V JA
AVASCRIPT. EL ECMA.
1.1. QQu es JavaSScript? HTMLL, CSS y basees de program macin, cono ocimiento prrevio necesario.
1.2. EEs JavaScriptt un lenguajee de programmacin? Parra qu sirve? Diferencias de HTML, CSSS, PHP, ...
1.3. Diferencias enntre JavaScript, CSS, HTM ML. Frontera entre JavaSccript, CSS, HTTML y prograamacin.
1.4. JaavaScript del lado del clieente y JavaSccript del lado
o del servidor. Node.js.
1.5. JaavaScript en aplicacioness web Joomlaa, WordPresss, Drupal, ph hpBB... Efecto
os.
1.6. Emmpezar a usaar JavaScriptt a partir de un
u documento HTML con n estructura bsica.
1.7. Veersiones JavaaScript. Algoo de historia y perspectivva. Qu es ele ECMA? Guas oficiales.
1.8. Documentaci n especificaacin oficial JavaScript.
J Alternativas
A a JavaScript.
1.9. QQu necesito o para escribbir cdigo JavvaScript y cre
ear pginas web?
w

2. NSERTAR JAV
IN VASCRIPT. ESSTILOS EN LNEA, INTERNO Y EXTERNO. TIPOS D
DE ELEMENTO
OS.
2.1. De la estructu ura HTML y modelo
m de caajas CSS a JavvaScript.
2.2. Sccripts en lneea, interno y externo.
2.3. Archivos JS. Comentarios javaScript.
j

3. CR
REANDO SCR
RIPTS BSICOS.
3.1. Vaariables y tip
pos de variabbles. Nmeroos. Texto. Vaalores booleaanos. Null y uundefined.
3.2. Ambito de varriables. Convversin de tip pos.
3.3. Operadores l mticos y relacionales. Exp
gicos, aritm presiones dee asignacin y de evaluaccin.
3.4. Co
ondicionaless con JavaScrript. Bucles con
c JavaScrip pt. Control dee flujo con break y contin
nue.

4. UNCIONES JA
FU AVASCRIPT.
4.1. Definir funciones. Invocar funciones. Argumentos
A y parmetro
os para funciones.

5. O
OBJETOS EN JAVASCRIPT.
J .
5.1. Q
Qu es un ob bjeto? Crear objetos. Con nsultar y estaablecer prop
piedades de o
objetos.
5.2. Bo
orrar propiedades de objetos. Verificcar propiedades. Enumerrar propiedades.
5.3. Attributos y mtodos.
5.4. Arrays. Crear arrays. Leer y escribir eleementos de arrays. Propiedad length h.

Ms informacin: contacto
[email protected]
Indice curso Tutorial bsico programador web: JavaScript desde cero.

5.5. Aadir y borrar elementos de arrays.

5.6. Arrays unidimensionales y arrays multidimensionales. Recorrido de arrays.
5.7. Mtodos de arrays. Comprobar si un objeto es tipo array.
5.8. La clase Date. Trabajar con fechas en JavaScript.
5.9. Trabajar con imgenes en JavaScript.
5.10. La clase Math JavaScript. Trabajar con funciones matemticas.

6. DOM Y JERARQUA DE OBJETOS.

6.1. Qu es el DOM? Jerarqua de objetos en pginas web.
6.2. Del documento HTML a un rbol de nodos. Tipos de nodos.
6.3. Seleccin de elementos en un documento. Atributos y contenido de elementos.
6.4. Crear, insertar y borrar nodos con JavaScript.
6.5. El objeto Window. Manejo del tiempo (timers). Trabajo con mltiples ventanas y marcos.
6.6. Document. Elementos de document como propiedades de Window.

7. GESTIN DE EVENTOS CON JAVASCRIPT.

7.1. Tipos de eventos. Manejadores de eventos o event handlers.
7.2. Eventos en la carga del documento (Load).
7.3. Eventos generados por el ratn (mouse).
7.4. Eventos arrastrar y soltar (drag and drop).
7.5. Eventos generados por el teclado.
7.6. Informacin generada por los eventos y su manejo.

8. APLICANDO JAVASCRIPT EN DESARROLLOS WEB.

8.1. Manejo de CSS a travs de JavaScript.
8.2. JavaScript para la gestin de formularios web. Usos en validacin de formularios.
8.3. Calendarios con JavaScript.
8.4. Utilidades tipo reloj, cronmetro, cuenta atrs, etc. con JavaScript.
8.5. Efectos para mens basados en JavaScript: desplegado dropdown.
8.6. Rotacin de imgenes y galeras de imgenes basadas en JavaScript.

9. JAVASCRIPT AVANZADO.
9.1. APIS HTML. Api Canvas. Api Drag and Drop. Api Geolocation. Api Storage. Api File.
9.2. Libreras JavaScript. Una visin general. jQuery, Mootools, Prototype, Modernizr, Google API
9.3. Adentrndonos en jQuery. Conceptos bsicos y aplicaciones bsicas.
9.4. Depuracin de errores JavaScript. Herramientas. Firebug.

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Ms informacin: [email protected]
Orientacin Tutorial bsico programador web: JavaScript desde cero

ORIENTACIN SOBRE EL CURSO PASO A PASO TUTORIAL BSICO DEL PROGRAMADOR WEB:
JAVASCRIPT DESDE CERO

JavaScript es un lenguaje ideado para dotar de dinamismo, rapidez y agilidad a las pginas web.
JavaScript puede tener distintas aplicaciones, pero la ms comn es la de ser un lenguaje de
programacin que se ejecuta del lado del cliente. Por si alguien se est preguntando qu es un cliente

Para quienes estn menos habituados a la terminologa cliente servidor, podemos decir
simplificadamente que un servidor es un computador con capacidades especiales para atender las
peticiones de muchos otros computadores. Normalmente los servidores estn situados en centros de
datos gestionados por empresas. Por el contrario, un cliente sera un computador u ordenador personal
con el que trabajamos en nuestra casa u oficina. Esto no siempre es as, pero nos sirve para situarnos de
forma introductoria en el contexto de los desarrollos web y del lenguaje JavaScript.

A veces se dice que JavaScript no es un lenguaje de programacin propiamente dicho, sino un lenguaje
de script. Un script vendra siendo un programa normalmente simple, almacenado en un archivo de
texto, y que es ejecutado por un intrprete del lenguaje para conseguir unos resultados. Pero muchos
estudiosos no se ponen de acuerdo sobre qu es exactamente un lenguaje de script y cules son
lenguajes de script y cules no lo son, por lo que nosotros no vamos a interesarnos demasiado por esta
terminologa.

Para tener un enfoque global de lo que es JavaScript dividiremos los lenguajes que intervienen en los
desarrollos web en estas categoras:

a) Metalenguajes: incluiramos aqu HTML y CSS. No proveen la potencia que aporta la

programacin.

b) Lenguajes de programacin de propsito general: incluiramos aqu lenguajes como C, C++,

Visual Basic, PHP, etc., creados con el objetivo amplio de crear aplicaciones informticas de
todo tipo. Proporcionan toda la potencia de la programacin.

c) Lenguajes de programacin de propsito especfico: son lenguajes con toda la potencia de la

programacin pero orientados a una tarea concreta especfica. Aqu incluiramos JavaScript,
como lenguaje que ha sido creado para facilitar la operacin rpida en pginas web.

En los desarrollos web JavaScript se mezcla de alguna manera con HTML y CSS o con lenguajes de
programacin como PHP. Esta mezcolanza implica que a veces el cdigo JavaScript est junto al HTML o
PHP, o que a la hora de desarrollar una web o solucionar un problema en una web sean necesarios
conocimientos de HTML, CSS, JavaScript y de un lenguaje de programacin de propsito general.

aprenderaprogramar.com, 2006-2029
Orientacin Tutorial bsico programador web: JavaScript desde cero

JavaScript es un lenguaje de programacin completo, con una sintaxis, conjunto de sentencias e

instrucciones similares a las de otros lenguajes. Como peculiaridades tenemos que JavaScript es un
lenguaje normalmente interpretado por el navegador web y por tanto podremos obtener en ocasiones
resultados diferentes al pasar de un navegador a otro.

Este curso que estamos comenzando va dirigido a aquellas personas que quieran adquirir unos
fundamentos bsicos para utilizar JavaScript dentro de desarrollos web con vistas a poder desarrollar
en el futuro pginas web atractivas y de cierta complejidad. No vamos a desarrollar un manual de
referencia de JavaScript, sino un curso bsico paso a paso. No vamos a contemplar todos los aspectos
del lenguaje, sino aquellos que consideramos bsicos desde el punto de vista didctico, con vistas a que
posteriormente la persona que lo desee ample sus conocimientos. Nuestro objetivo es ser claros,
sencillos y breves, y para eso tenemos que centrarnos en determinadas cuestiones de JavaScript y dejar
de lado otras.

Como conocimientos previos para iniciar este curso recomendamos estos (seguir la recomendacin o
no queda a criterio del alumno y/o profesor que vayan a seguir el curso): Ofimtica bsica (saber copiar,
pegar, mover y abrir archivos. Uso de un editor de textos, etc.) y haber realizado los siguientes cursos (o
tener los conocimientos que se aportan en ellos):

a) El Curso bsico de HTML que se ofrece en aprenderaprogramar.com. Su URL es la siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

b) El curso bsico de CSS que se ofrece en aprenderaprogramar.com. Su URL es la siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Se recomienda tambin conocer algn lenguaje de programacin, de modo que a la persona que siga el
curso le resulten familiares los conceptos de variable, arrays o arreglos unidimensionales y
multidimensionales, condicionales, bucles, algoritmos, etc. Si no tienes ningn conocimiento de
programacin te recomendamos realizar el curso Programacin en Visual Basic nivel I de
aprenderaprogramar.com como forma de familiarizarte con estos conceptos que te van a resultar
necesarios para seguir este curso. La URL del curso de Visual Basic es la siguiente:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61

Los conocimientos previos son, como hemos dicho, deseables pero no imprescindibles.

Aprender JavaScript requiere tiempo y esfuerzo. Para hacer ese recorrido ms llevadero, te
recomendamos que utilices los foros de aprenderaprogramar.com, herramienta a disposicin de todos
los usuarios de la web (http://www.aprenderaprogramar.com/foros/), que te servirn para consultar
dudas y recabar orientacin sobre cmo enfrentarte a los contenidos. Entre los miembros del portal
web y otros usuarios, trataremos de ayudarte para que el estudio te sea ms llevadero y seas capaz de
adquirir los conocimientos necesarios y avanzar como programador o diseador web.

El tiempo necesario (orientativamente) para completar el curso incluyendo prcticas con ordenador,
suponiendo que se cuenta con los conocimientos previos necesarios, se estima en 150 horas de

aprenderaprogramar.com, 2006-2029
Orientacin Tutorial bsico programador web: JavaScript desde cero

dedicacin efectiva o aproximadamente tres meses con una dedicacin de 2,50 horas diarias de lunes a
viernes. Aprender a crear pginas web requiere dedicacin y esfuerzo.

El curso ha sido generado paso a paso usando Windows como sistema operativo y por ello contiene
algunas indicaciones especficas para usuarios de Windows, pero tambin puede ser utilizado en otros
entornos (Linux, Macintosh, etc.), ya que los desarrollos web no son dependientes del sistema
operativo con el que trabajemos en nuestro computador.

Estamos seguros de que con tu esfuerzo y la ayuda que te podamos brindar este curso te resultar de
gran utilidad.

Prxima entrega: CU01103D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Le
enguaje de pro
ogramacin ejecucin cliente.

QU ES JA
AVASCRIPT

JavaScriptt es un lengguaje utilizaado para do otar de efecctos y proceesos dinmiccos e inteliigentes a

documenttos HTML. Un U documentto HTML vien ne siendo coloquialmente una pgin na web. As,, podemos
decir que el lenguaje JavaScript siirve para ejeecutar accionnes rpidas y efectos aniimados en laas pginas
web. Las acciones co ontroladas po or JavaScriptt pueden se men, hacer aparecer,
er el desplieggue de un m
desapareccer o cambiaar texto e im mgenes, reaalizar clculoos y mostrarr resultados,, mostrar meensajes de
aviso (porr ejemplo si faltan
f datos en un formu ulario) y efe
ectos animaddos en general.

Este lengu
uaje es princcipalmente utilizado
u por parte de pro
ogramadores web para d dar respuesttas rpidas
a las acciiones del ussuario sin neecesidad de enviar la in
nformacin ded lo que ha hecho el usuario al
servidor y esperar resspuesta de ste (lo que hara
h ms len
nto los proceesos). El cdigo JavaScrip
pt se carga
al mismo tiempo que el cdigo HTTML en el naavegador, y reside
r en el cliente
c (commputador en el que nos
encontrammos), por loo que JavaSccript sigue funcionando
f incluso aunnque se pro oduzca un co orte en la
conexin a internet (een este casoo no podremmos seguir naavegando haacia otras dirrecciones we eb, pero s
podremoss ejecutar procesos
p lo
ocales en nuestro com mputador para
p la pgiina web en n que nos
encontrrramos).

En el sigu
uiente esqueema vemos un
u esquemaa bsico de lo que supon
ne navegar p
por internett desde un
computad dor personal.

El proceso
o bsico es el
e envo de una peticin (que
( puede llevar
l incorp
porada inform
macin como o los datos
de un forrmulario) a un servidor,, esperar reespuesta porr parte del servidor
s y reecibir la respuesta en
nuestro computador.
c . Cada proceeso de este tipo consume tiempo, el tiempo ttotal podramos verlo
desde el lado de nueestro computador como Tiempo Tottal Proceso = tiempo en nvo peticin n + tiempo
procesam n + tiempo recepcin reespuesta.
miento petici

aprenderraprogramar.co
om, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

An con velocidades rpidas de navegacin cuantos ms procesos de este tipo realicemos ms lenta
ser la navegacin web. JavaScript podemos decir que supone que las respuestas del servidor sean ms
completas y permite que se realicen ms procesos en nuestro computador (aquellos procesos que
realmente pueden ser resueltos en nuestro propio computador sin necesidad de estar enviando
peticiones al servidor), de modo que se reduce el nmero de peticiones y respuestas necesarias entre
cliente y servidor.

El cdigo JavaScript es interpretado directamente por el navegador web, sin necesidad de otros
programas o procesos intermedios. Un ejemplo puede ayudarnos a comprender la idea. Supongamos
que en una pgina web pedimos al usuario que rellene un formulario con sus datos personales, y que
entre los requisitos para enviar el formulario tenemos que es obligatorio que se incluya el nombre de
usuario y correo electrnico, siendo obligatorio que el nombre tenga ms de una letra y que el correo
electrnico contenga el carcter @ (arroba).

Supongamos que una peticin y respuesta de servidor requiere de un tiempo de 2 segundos y

comprobemos qu ocurrira con el control del proceso del lado del servidor o controlndolo del lado del
cliente con JavaScript. Como JavaScript est en el propio computador del usuario (cliente), suponemos
que los tiempos de respuesta implican 0 s de consumo de tiempo, es decir, la respuesta es inmediata.

CONTROL DE PROCESO DEL LADO DEL SERVIDOR

Tiempo
Paso Accin del usuario Respuesta
navegacin
Enva un formulario donde por error el
Servidor informa de que los datos en el
1 nombre est en blanco y el correo no 2s
formulario no son vlidos
contiene el carcter arroba

Corrige el nombre pero se olvida de corregir Servidor informa de que los datos en el
2 4s
el correo electrnico formulario no son vlidos

Servidor informa que el formulario ha

3 Corrige el correo y todo est ok 6s
sido enviado correctamente

CONTROL DE PROCESO DEL LADO DEL CLIENTE

Tiempo
Paso Accin del usuario Respuesta
navegacin
Enva un formulario donde por error el Cliente detecta error e informa de
1 nombre est en blanco y el correo no contiene que los datos en el formulario no son 0s
el carcter arroba vlidos

Cliente detecta error e informa de

Corrige el nombre pero se olvida de corregir el
2 que los datos en el formulario no son 0s
correo electrnico
vlidos

Servidor informa que el formulario ha

3 Corrige el correo y todo est ok 2s
sido enviado correctamente

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

Aqu comprobamos cmo una ventaja importante de JavaScript es hacer ms gil y dinmica la
navegacin por pginas web, evitando los tiempos de espera.

Significa esto que podemos hacer todo mediante JavaScript? Algunas pginas web pueden basarse en
combinaciones de HTML con CSS y JavaScript. Incluso una pgina web podra ser slo HTML sin CSS ni
JavaScript, pero en los desarrollos profesionales lo normal es que intervengan estos tres elementos
junto a un lenguaje del lado del servidor (cdigo que reside en el servidor y no en el cliente).

Hay varios motivos por lo que en los desarrollos web profesionales se combinan procesos del lado del
cliente con procesos del lado del servidor. Vamos a citar algunos y para ello nos valdremos del ejemplo
de una tienda de comercio electrnico.

a) Los datos en la web cambian con frecuencia. Para que los datos se mantengan actualizados es
necesario refrescar la informacin haciendo nuevas peticiones al servidor. Para que el usuario
vaya navegando por la tienda quizs podamos enviar los datos de 10 12 productos pero para
cargar nuevos productos ser lgico hacer una nueva peticin al servidor.

b) Los datos pueden sobrecargar el computador del usuario. Si tenemos una tienda con 7.000
productos y enviramos todos los datos al computador del usuario para que fueran gestionados
mediante JavaScript tendramos problemas. En primer lugar, el envo de volmenes muy
grandes de informacin consume mucho tiempo (y posiblemente el usuario se vaya a otra
tienda si lo hacemos esperar demasiado). En segundo lugar, el computador del usuario puede
tener problemas para gestionar volmenes demasiado grandes de informacin (sobrecarga).
Los volmenes grandes de informacin normalmente residen en bases de datos gestionadas
por el servidor y los datos son servidos en pequeos paquetes de datos a medida que resulta
necesario.

c) Hay procesos que tienen que ser realizados del lado del servidor porque necesitan de
verificaciones de seguridad que no pueden residir en el computador de un usuario. Por
ejemplo, para el pago con una tarjeta de crdito es necesario que el usuario enve el nmero de
su tarjeta de crdito al servidor y que ste mediante un proceso seguro verifique la tarjeta y el
pago. Sera disparatado pensar en enviar los nmeros de tarjetas de crdito vlidas al
computador del usuario y que el proceso tuviera lugar en el computador cliente para luego
informar al servidor de que el pago es correcto.

Conforme vayamos adquiriendo experiencia como programadores nos daremos cuenta de que hay
procesos que claramente es ms adecuado realizarlos del lado del servidor, otros que claramente es
ms adecuado realizarlos del lado del cliente, y otros que podran realizarse tanto del lado del servidor
como del lado del cliente. Tambin con la experiencia iremos aprendiendo a tomar decisiones
relacionadas con esto.

En este esquema vemos cmo se combina un lenguaje del lado del servidor con JavaScript y HTML (no
citamos CSS pero obviamente CSS debe incluirse tambin en la respuesta del servidor).

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

Aqu hemos indicado como lenguaje del lado del servidor PHP, pero podra ser cualquier otro como
ASP, JSP, etc.

Algunos usos tpicos de JavaScript son:

- Despliegue de mens
- Galeras de imgenes que van rotando automticamente
- Relojes
- Contadores de tiempo hacia delante o hacia detrs (cuenta atrs)
- Cronmetros
- Calculadoras
- Cambiar la apariencia de la pgina web cuando el usuario hace click en un botn o imagen. Por
ejemplo, los estilos CSS pueden variar al pulsar un botn y as permitir que el usuario
personalice la apariencia de una pgina web.
- Ofrecer distintos tipos de respuesta segn el navegador y sistema operativo que est utilizando
el usuario.
- Validacin de datos en formularios (impedir envo de formularios con datos errneos o
incompletos y mostrar mensajes de aviso).
- Ejecutar clculos o pequeos programas del lado del cliente.
- Modificar cdigo HTML en respuesta a la accin del usuario sin necesidad de establecer
conexin con el servidor.

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

Ejemplo: Calculadora en una pgina web para calcular el valor de una pieza de oro creada con JavaScript.

En este curso vamos a centrarnos en aprender las bases fundamentales para usar JavaScript del lado del
cliente. No vamos a entrar a detallar todas las instrucciones y detalles del lenguaje, ni las diferencias
entre versiones, porque lo que nos interesar ser comprender cul es la filosofa y cmo podemos
sacarle partido a una herramienta muy potente como JavaScript. Para hacer el curso didctico, tenemos
que centrarnos en lo fundamental y dejar los detalles de lado. Para aquellas personas que lo deseen,
daremos referencias de cmo encontrar la especificacin oficial del lenguaje donde se podrn consultar
detalles especficos.

Debido a lo indicado anteriormente, para seguir este curso son necesarios como conocimientos previos:

HTML
CSS
Fundamentos de la programacin (haber programado en algn lenguaje y conocer conceptos
como variable, array o arreglo, condicionales tipo if y bucles tipo for).

Para seguir el curso puedes utilizar como herramienta de apoyo los foros aprenderaprogramar.com,
disponibles en http://aprenderaprogramar.com/foros, donde puedes plantear consultas y dudas
relativas al contenido del curso.

Prxima entrega: CU01104E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Le
enguaje de pro
ogramacin ejecucin cliente.

JAVASCRIIPT EN EL MA
ARCO DE LA PROGRAMA
ACIN WEB

Ya hemoss comentado o que JavaScrript se integrra dentro dee los desarrollos web con
n otros lengu
uajes como
HTML, CSSS y generalm mente con un lenguaje deld lado del servidor com mo PHP, JSP ASP u otroos. Hemos
dicho tam
mbin que su u uso principal es ejecutaarse del ladoo del cliente (computadoor del usuario
o). En esta
entrega del
d curso vam mos a ver c
mo se integgra JavaScrip ollos web en general y
pt dentro dee los desarro
cmo exissten posibilid
dades para usar
u JavaScrip pt no slo de
el lado del cliente.

Si hiciram
mos un smill entre una orquesta
o y un desarrollo web, el direector de orquesta sera el
e lenguaje
del lado del
d cliente (p por ejemplo o PHP), que acta
a como cerebro controlador
c d
de la pginaa web. CSS
sera el en
ncargado de vestuario y maquillaje, ese decir, quie
en controla la
l aparienciaa de lo que see presenta
al pblicoo. HTML sera la estructtura: el encaargado de cmo se distribuyen las sillas en el escenario,
dnde se coloca cadaa msico y qu instrum mento lleva cada
c msico o. Supongam mos que paraa distintas
cancioness (urls) los msicos cam mbian de po osicin (cam
mbia la estru uctura HTML). JavaScrip pt sera el
encargado o de efectoss especiales, por ejemploo quien mue eve las luces y dispara unn can de confetis
c en
un momeento dado, una persona gil y rpida. Por ltimo tenemos a la l base de datos, un enccargado de
guardar todas
t las paartituras (infformacin) y de ir entreegndolas a medida qu ue se lo requieren los
msicos u otros encarrgados.
lo un smil, pero nos sirrve de introd
Esto es s duccin paraa contextualizar el papel habitual de JavaScript
dentro dee los desarrollos web.
Una orquuesta puede tocar sin diirector (sin lenguaje del lado del seervidor), sin encargado de d efectos
especialess (JavaScript), sin encargado de vestu
uario y prese
entacin (CSSS), pero no sin msicos (HTML). De
todas formas, una bu uena orquestta normalmeente tendr todo el perrsonal (recurrsos de proggramacin)
necesario
os para que su puesta en escena sea brillante.

Un lenguaaje de prograamacin es un u lenguaje que
q se usa para
p realizar procesos de inters a traavs de un
ordenado n clculo para un estudiante o ingeniero, a una co
or o dispositivvo electrnicco, desde un ompra por
internet, pasando po or cualquier cosa que se s te ocurraa. Un lenguaaje de programacin tie ene como
caracterssticas bsicass el tener laa capacidad para tomarr decisiones o ejecutar un proceso u otro en
funcin de las circunsstancias (por ejemplo dep d botn que pulse el ussuario), as co
pendiendo del omo el ser
capaz de repetir pro ocesos numeerosas vecess hasta que e se cumpla una condiccin. JavaScrript es un
lenguaje que permitee cumplir esttas funcionees, por tanto o es un lenguaje de proggramacin, aunque
a se
use junto a otros lengguajes de pro ogramacin y lenguajes de
d etiquetas como HTMLL y CSS.
JavaScriptt es un lengu
uaje que apaareci para hacer
h ms fciles de proggramar y ms fciles parra navegar
los desarrrollos web. Un
U desarrollo
o web comprrende mltip ples reas de conocimien nto:

aprenderraprogramar.co
om, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

Anlisis y
diseo
funcional

Anlisis y
Programacin diseo
arquitectural

Desarrollo
web

Diseo
Integracin,
grfico,
Testing
Maquetacin

Sistemas
(servidores,
bases de
datos)

En la clasificacin que hemos hecho, JavaScript estara englobado dentro del rea de programacin.

Los desarrollos web tienen dimensiones muy variables. Podemos hablar desde una pequea pgina
web para una empresa local hasta un gran portal para una empresa de mbito internacional. En ambos
casos podramos decir que interviene la programacin web y el diseo web. Sin embargo, un pequeo
desarrollo puede ser llevado a cabo por una sola persona que abarque tanto programacin como
diseo, mientras que un gran desarrollo requiere de un equipo de trabajo ms o menos amplio y con
distintos especialistas, ya que en torno a los desarrollos web hay diferentes reas de conocimiento
implicadas (anlisis, diseo, programacin, sistemas, integracin, testing, etc.).
En un gran desarrollo existen personas especializadas en las distintas reas, de modo que el
programador no suele trabajar en el diseo (excepto para hacer algn retoque o cambio, o para
solucionar problemas). No obstante, s resulta conveniente que un programador web tenga los
conocimientos suficientes de HTML y CSS ya que le resultarn tiles y necesarios, por un lado para la
solucin de problemas y por otro para integrar cuestiones donde el diseo y la programacin se
entremezclan. Por ejemplo, podremos hacer modificaciones rpidas del aspecto de una pgina web,
cambiar un color de fondo o imagen, etc. cuando el usuario pulse un botn, mezclando JavaScript con
CSS.
Si miramos a los lenguajes o tecnologas que hay en torno a los desarrollos web podramos hacer una
clasificacin que comprende: HTML, CSS, Bases de datos, Servidores, Lenguajes de programacin del
lado del cliente (p.ej. JavaScript) y Lenguajes de programacin del lado del servidor (p.ej. PHP). Aqu nos
estamos refiriendo a paradigmas o situaciones ms frecuentes. Como comentaremos ms adelante,
JavaScript tambin se est usando en algunos casos como lenguaje de programacin del lado del
servidor.

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

HTML

Lenguajes
del lado
CSS
del
servidor

Tecnologas
web

Lenguajes
Bases de
del lado
datos
del cliente

Servidores

JavaScript es una tecnologa (o lenguaje) aceptada por todos los navegadores y que interviene en
prcticamente todo desarrollo web, grande o pequeo. Se encarga de dotar de respuesta rpida y
efectos controlados directamente desde el computador del usuario a las pginas web.

Los lenguajes de programacin del lado del servidor realizan procesos en el servidor (computador
remoto que se encarga de enviar las pginas web a travs de internet): podemos citar entre estos
lenguajes Java (JSP), ASP.NET, o PHP entre los principales.

Los lenguajes de programacin del lado del cliente realizan procesos en el ordenador personal del
usuario (efectos visuales, clculos, etc.): podemos citar entre estos lenguajes JavaScript, Java (applets),
VBScript Dart (impulsado por Google), entre los principales. JavaScript es el lenguaje de programacin
del lado del cliente ms utilizado hoy da en los desarrollos web y es aceptado por todos los
navegadores.

En cuanto a bases de datos podemos nombrar MySQL, SQLServer y Oracle, entre las principales.

Las tecnologas se combinan entre ellas de muy diversas maneras. Podemos citar algunas
combinaciones bastante habituales entre lenguajes de programacin y bases de datos: Java + Oracle,
ASP.NET + SQLServer, PHP + MySQL. Sea cual sea la combinacin utilizada, en un desarrollo web
moderno siempre intervendr HTML, CSS y JavaScript.
En resumen, JavaScript es un lenguaje de programacin del lado del cliente cuyos aspectos bsicos
deben ser conocidos por los programadores web. En la prctica, muchas veces se entremezcla el cdigo
de programacin del lado del servidor o del lado del cliente con el cdigo HTML y cdigo CSS, de ah

aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.

que coloquialmente se hable de programacin web para referirse a todo este conjunto, aunque
formalmente ni HTML ni CSS son lenguajes de programacin.

Fjate que estamos tratando de dejar claro qu es y para qu sirve JavaScript antes de empezar a
estudiar este lenguaje porque si tenemos los conceptos claros nos ser mucho ms sencillo el
aprendizaje, ahorraremos tiempo y cometeremos menos errores.

JAVASCRIPT DEL LADO DEL SERVIDOR

Hemos comentado que JavaScript es un lenguaje que aparece en prcticamente todo desarrollo web
como lenguaje del lado del cliente. No obstante, hace ya varios aos que ha empezado a tener uso en
algunos desarrollos web como lenguaje del lado del servidor para permitir desarrollos web completos.

El desarrollo en JavaScript del lado del servidor se hace instalando en el servidor herramientas que
permiten el uso de JavaScript del lado del servidor como:

Node.js: es quizs la herramienta ms utilizada dentro de los desarrollos que usan JavaScript
del lado del servidor. Node.js es un entorno de programacin que incluye numerosas libreras
preparadas para ser usadas por parte de los programadores.
Jaxer
RingoJS
EJScript
AppengineJS

El desarrollo con JavaScript del lado del servidor permite crear desarrollos web completos, pero es una
prctica que todava no est generalizada y en cierta medida se sigue considerando no habitual, o al
menos no recomendable para quienes no conozcan JavaScript bsico.

Nosotros en este curso no estudiaremos ninguna aplicacin de JavaScript del lado del servidor: nos
limitaremos a estudiar los fundamentos del JavaScript tradicional, JavaScript del lado del cliente.
Entendemos que JavaScript del lado del servidor debe ser materia de estudio en cursos ms avanzados,
cuando ya se tengan unas bases slidas de JavaScript del lado del cliente y de otras tecnologas
relacionadas con los desarrollos web.

Prxima entrega: CU01105E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTMLL, CSS, PHP, etc.

DIFERENC
CIAS ENTRE JAVA
J Y JAVA
ASCRIPT

Como hem mos visto, JaavaScript es un lenguaje de program macin para desarrollos
d w
web que norrmalmente
usaremoss del lado del cliente (es decir, que see ejecuta en el computador personaal del usuario
o). Muchas
veces noss han planteeado la preggunta: es JaavaScript y Java lo mismmo? Por qu tienen nombres tan
similares??

Java y JavvaScript son dos lenguajees de prograamacin con un nombre parecido y algunas simiilitudes en
algunos aspectos,
a p
pero que enn el fondo son dos lenguajes
l coompletamen nte indepen ndientes y
completamente distin ntos. Una persona puedee saber much ner ni idea de Java, y
ho de JavaSccript y no ten
al revs.
Si son disttintos, por qu tienen un
u nombre tant parecido? La causa de esta similitud en los nombres se
debe a el origen de JavaScript. In f desarrollado por la empresa
nicialmente fue e Nettscape en 19 995 con el
nombre ded LiveScriptt. Posteriorm mente pas a llamarse JavaScript qu uizs tratand
do de aprovvechar que
Java era un
u lenguaje de d programaacin de gran n popularidaad y que un nombre
n simiilar poda haacer que el
nuevo lennguaje fuera atractivo. Pero
P salvandoo algunas sim
militudes, am
mbos lenguaajes son bien n distintos.
Su princippal parecido o podemos decir que es e el nombre e y algunoss aspectos d de sintaxis, yay que su
finalidad y filosofa so
on muy distin
ntos.
A continuacin indicamos algunass similitudes y diferenciass entre uno y otro lenguaaje:

Java JavaScrip
pt

Es un lengguaje de proggramacin de propsito gen neral,

Es un lenguajje de programmacin de proppsito
utilizaado tanto en aplicaciones
a trradicionales de
d
espeecfico (desarrrollos web)
commputadores como
c en desarrollos web.

Es un lenguaje quue requiere dee compilacin

Es un
u lenguaje quue no requiere de compilaccin al ser
(traducccin previa a cdigo mquina antes de ser
s
in
nterpretado directamente
d p
por los navegadores.
ejecutado).

Es un lenguaje
l que se
s puede conssiderar pesado, Es un
u lenguaje que se puede cconsiderar ligeero, gil y
potente y robusto en el
e sentido de que
q permite hacer
h pocco robusto en el sentido dee que no perm
mite hacer
de todo co
on un gran control. todo lo qu
ue permiten ootros lenguaje
es.

Es un lenguaje no clasificable bajo un paradigma

Es un lenguaje bajo
o la filosofa o paradigma de
conccreto y admitee algunas form
mas de programacin no
orientacin a objetos
o completamente.
admitidas porr Java.

Se puedee utilizar tanto

o del lado del servidor comoo del Se puede
p utilizar tanto del ladoo del servidorr como del
lado del cliente. Tiene su uso princcipal del lado del lad
do del cliente. Tiene su uso o principal del lado del
servidor. cliente.

aprenderraprogramar.co
om, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.

Java JavaScript

Su sintaxis est inspirada en la sintaxis del lenguaje de Su sintaxis tambin est inspirada en la sintaxis del
programacin C lenguaje de programacin C

No requiere nada especfico para poder programar en

Requiere de un kit de desarrollo y mquina virtual Java
l (nicamente un navegador web para ver los
para poder programar en l.
resultados y un editor de texto para escribir el cdigo).

Es un lenguaje fuertemente tipado: las variables tienen Es un lenguaje dbilmente tipado: las variables pueden
un tipo declarado y no pueden cambiar el tipo de no ser de un tipo especfico y cambiar el tipo de
contenido que almacenan. contenido que almacenan.

Es un lenguaje con ms capacidades y ms complejo Es un lenguaje con menos capacidades y menos

que JavaScript. complejo que Java.

Si ests dudando si te conviene estudiar Java o estudiar JavaScript te recomendamos lo siguiente:

- Si quieres orientarte especficamente a los desarrollos web estudia JavaScript.

- Si quieres formarte integralmente como programador y no conoces ningn lenguaje orientado
a objetos, estudia primero Java y luego JavaScript.

En este curso nos centramos en el estudio de JavaScript en el contexto de los desarrollos web. Si ests
interesado en un curso de Java puedes acceder a l en esta direccin web:

http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188

JAVASCRIPT Y HTML, CSS, PHP

A veces nos encontraremos que se puede lograr un mismo efecto usando HTML, usando CSS usando
un lenguaje de programacin. Por qu tantas formas para hacer una misma cosa? Dnde est la
frontera entre cada lenguaje?

Esta pregunta no es de fcil respuesta. Vamos a ver con un ejemplo lo que puede ocurrir para algo tan
sencillo como aplicar algunos efectos a un texto. No obstante, ten en cuenta que este ejemplo relativo
a texto podra aplicarse a otros conceptos como bordes, mrgenes, animaciones, etc.
El lenguaje HTML permite aplicar algunos efectos visuales al texto. Escribe o copia este cdigo y
gurdalo en un archivo de nombre ejemplo1.html.

aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo HTML aprenderaprogramar.com</title>
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
</head>
<body>
<p>Negrita: <strong>Quiero aprender a programar</strong></p>
<p>Itlica: <i>Quiero aprender a programar</i></p>
<p>Tachado: <strike>Quiero aprender a programar</strike></p>
<p>Color fuente: <font color ="green">Quiero aprender a programar</font></p>
</body>
</html>

Con Javascript podemos hacer algo parecido. Escribe o copia este cdigo y gurdalo en un archivo de
nombre ejemplo2.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo Javascript aprenderaprogramar.com</title>
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
</head>
<body>
<script>
var txt = "Quiero aprender a programar";
document.write("<p>Negrita: " + txt.bold() + "</p>");
document.write("<p>Itlica: " + txt.italics() + "</p>");
document.write("<p>Tachado: " + txt.strike() + "</p>");
document.write("<p>Color fuente: " + txt.fontcolor("green") + "</p>");
</script>
</body>
</html>

Y por ltimo en vez de aplicar Javascript o simple HTML, podemos usar CSS. Escribe o copia este cdigo
y gurdalo en un archivo de nombre ejemplo3.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo CSS aprenderaprogramar.com</title>
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
<style type="text/css">
#negrita{font-weight:bold;}
#italica{font-style:italic;}
#tachado{text-decoration: line-through;}
#verde{color:green;}
</style>
</head>
<body>
<p>Negrita: <span id="negrita">Quiero aprender a programar</span></p>
<p>Italica: <span id="italica">Quiero aprender a programar</span></p>
<p>Tachado: <span id="tachado">Quiero aprender a programar</span></p>
<p>Color fuente: <span id="verde">Quiero aprender a programar</span></p>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.

Haz doble click sobre cada uno de los archivos para visualizar el resultado en un navegador. El resultado
que obtenemos es algo similar a esto:

El nico cdigo que debemos entender por el momento es el correspondiente al ejemplo 1 y al ejemplo
3, ya que debemos conocer HTML y CSS para seguir este curso. El cdigo del ejemplo 2 no te preocupes
si no lo entiendes ya que el objetivo ahora no es comprender ese cdigo, sino simplemente ver cmo
podemos alcanzar un mismo objetivo usando distintos lenguajes como HTML, Javascript CSS.
Adems si nos fijamos, el cdigo Javascript y el cdigo CSS est dentro de un documento HTML (aunque
podran estar en archivos separados).
Todo esto nos puede llevar a preguntarnos: Por qu se entremezclan unos lenguajes con otros? La
respuesta sera histrica y tcnica: HTML se convirti en la forma de crear pginas web, pero tena
muchas limitaciones. En un momento dado, se consider que entremezclar (embeber) lenguajes entre
s poda ser una buena opcin tcnica para resolver problemas o hacer cosas que no era posible o
conveniente hacer con HTML. As, podemos embeber Javascript en HTML embeber CSS en HTML, o
embeber HTML en PHP, etc. Por ello a veces ocurre que no hay una frontera clara entre lenguajes de
programacin, HTML y CSS. Esto, que puede resultar un tanto confuso inicialmente, se va convirtiendo
en comprensible a medida que se trabaja y se aprende ms sobre estos lenguajes.
Por otro lado, por qu tantas vas distintas para hacer algo cuando quizs que solo hubiera una
manera de poner el texto en negrita, o una sola manera de poner un color de fuente, sera ms simple?
Para esto podemos citar varios motivos:
a) Motivos histricos: a veces las cosas se empezaron a hacer de una manera y luego se pens
que era mejor hacerlas de otra. Sin embargo, para evitar que las pginas web existentes
dejaran de funcionar, se siguieron permitiendo formas de hacer las cosas anticuadas. Por
ejemplo la etiqueta <strike> </strike> en HTML se considera deprecated (obsoleta, de uso no
recomendado) en HTML 4.01 y no est admitida en HTML 5. Sin embargo, se sigue usando.
Muchas formas de hacer las cosas se admiten aunque no estn recomendadas.

aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.

b) Motivos de independencia de tecnologas: HTML es una cosa y Javascript es otra, aunque en la

prctica nos encontremos con que Javascript se puede entremezclar (embeber) en HTML.
Podramos hacer cosas en Javascript y no querer usar otro lenguaje, es decir, podramos tratar
de hacer cosas independientes sin entremezclar tecnologas. Por ello lenguajes como
Javascript PHP incorporan posibilidades para hacer cosas que ya se pueden hacer de otra
manera. De esta forma tienen la potencialidad de ser ms independientes.

c) Motivos de polticas de desarrollo y estndares: quizs no te lo hayas preguntado nunca, pero

conviene tener al menos una orientacin al respecto: Quin define qu es un lenguaje como
HTML, CSS, PHP, cmo se debe escribir, qu resultado debe generar cada etiqueta o
instruccin, etc.? En general detrs de los lenguajes, aunque algunos fueron creados por
personas individuales, hay empresas, comunidades de desarrollo, asociaciones, consorcios
internacionales, comits, etc. En ocasiones un grupo de personas no est de acuerdo con la
forma en que se est creando una especificacin del lenguaje y forman grupos de trabajo
alternativos que definen estndares alternativos. A veces triunfa un estndar y el otro se
desecha, pero otras veces conviven distintos estndares que permiten hacer las cosas de
distintas maneras. Para los creadores de pginas web esto resulta negativo, pero as es la vida!

d) Otros motivos: podramos abundar en el por qu de que las cosas sean como son, pero con
tener una idea general nos basta.

Acostmbrate a pensar que los desarrollos web no son matemticas. Las cosas se pueden hacer de
muchas maneras, y de hecho muchas veces se hacen de mala manera por desconocimiento, por
prisas, o por ser ms fcil.
Acostmbrate a pensar que los desarrollos web usan distintos lenguajes que muchas veces se
entremezclan entre s hasta el punto de ser difcil distinguir qu corresponde a un lenguaje y qu
corresponde a otro. Hay lenguajes comunes en los desarrollos web como HTML, pero por ejemplo en
cuanto a lenguajes de programacin no todos los programadores usan el mismo.
Acostmbrate a encontrarte con que a veces las cosas no funcionan como una esperara que lo
hicieran, no debido a que se haya escrito mal el cdigo o usado mal una instruccin, sino debido a que
en el mundo de internet existen distintos estndares y distintas versiones. A veces aunque nos
esforcemos porque todo se vea como nosotros esperamos en todos los navegadores o dispositivos, es
difcil conseguirlo. Es un poco catico, pero es as.
En este curso ms que aprendernos todas las instrucciones, estndares, etc. vamos a tratar de ser
capaces de razonar el por qu de las cosas, y a tratar de esforzarnos por saber cmo generar cdigo
JavaScript limpio, bien estructurado y de calidad.

Prxima entrega: CU01106E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
JavaScript en
e CMS como Jo
oomla, WordPress, Drupal

JAVASCRIIPT EN APLIC
CACIONES WEB
W

Ya hemos dicho quee JavaScript es un lengguaje de prrogramacin que nos p permite creaar efectos
dinmicoss y giles del
d lado dell cliente. Un na de las aplicaciones
a ms ampliaamente exte endida de
JavaScriptt est en dottar de dinam mismo y efecctos a las aplicaciones weeb, dentro d
de las que de
estacan los
Gestores de Contenid dos o CMS (C Content Man nagement Syystems). Un CMSC ware que se instala en
es softw
el servido
or y sirve paraa publicar co
ontenidos en
n una pgina web fcilmeente.

El conceppto de aplicacin web (programa que q se alojaa en un servvidor remotto o hostingg y al que
accedemo os a travs de
d internet) es muy am mplio, de heccho con el paso
p de los aos se ha hecho tan
amplio co
omo los proggramas de orrdenador o lasl actividades que realizza el ser hum
mano. Las ap
plicaciones
web se han
h populariizado en loss ltimos a os gracias a que buen na parte de estas aplicaaciones se
comenzarron a distribuir y utilizar de forma gratuita, con una comunidad de usuaarios y desarrrolladores
de softwaare en torno a ellas.
Muchas de d estas apliicaciones sirrven para qu
ue personas que no tiennen conocimmientos de in nformtica
gestionenn pginas weeb como tiendas de comeercio electrnico, foros, portales de ccontenidos, peridicos
digitales, etc.
Las aplicaciones web se
s podran clasificar de varias
v manerras. De hechoo es difcil reealizar una clasificacin
debido a que los campos en que ses utilizan las distintas aplicaciones muchas
m vecees se solapan n. Vamos a
hacer unaa clasificaci
n comn, que
q es basndonos en el tipo de pgina p web para el que e son ms
habitualmmente usadoss:

CLASIFICA
ACIN EJEMPLOS DESC
CRIPCIN

Joommla, Druppal, Open nCMS, Plo

one,
WordPress, b2evolution, Geekklog,
Sereendipity, Textpattern,
T CMS Made Orienttados a creear portaless web de
Gestores de Simple, concrette5, Contao,, ImpressPages, muy diferentes temticas, desde un
os
Contenido liveSSite, Nucleus, Pyro oCMS, TYP PO3, periddico digital hasta una tienda
t on-
Chaamilo, Moo odle, phpM MyFAQ, e1 107, line o un blog, pggina personaal, etc.
Mah hara, Mambo, ocPortaal, PHP-Fussion,
PHPP-Nuke, Tiki Wiki,
W Xoops, Zikula.

aprenderraprogramar.co
om, 2006-2029
JavaScript en CMS como Joomla, WordPress, Drupal

CLASIFICACIN EJEMPLOS DESCRIPCIN

Pensados para la creacin de sistemas

Foros y libros phpBB, SMF, fluxBB, MyBB, Vanilla Forums, de foros donde los usuarios participan
de visitas XMB Forums, GBook, Lazarus GuestBook. intercambindose mensajes o para
libros de visitas

Pensados para mantener un sistema de

informacin entre una comunidad de
MediaWiki, DocuWiki, PmWiki, WikkaWiki, usuarios. Este sistema puede ser
Wikis
TikiWiki, PikiWiki. generalista como wikipedia o estar
especializado en un rea o campo de
conocimiento concreto.

Tiendas y Pensadas para crear tiendas

Magento, PrestaShop, CubeCart, OpenCart,
comercio electrnicas y galeras de productos
osCommerce, TomatoCart, Zen Cart,
electrnico destinadas al comercio electrnico.

ExtCalendar, phpScheduleit, WebCalendar, Permiten crear calendarios, galeras de

phpFreeChat, phpMyChat, DadaMail, imgenes, Chats, Sistemas de envo de
Utilidades
PHPList, SiteRecommender, OpenX, correo electrnico, sistemas de
varias
OSClass, QuickSell Classifieds, Help Center anuncios, sistemas de soporte a
Live, Hesk, osTicket usuarios

MILLONES DE WEBS DISTINTAS

Vamos a centrarnos ahora en lo que permite mostrar una aplicacin web a los usuarios. Por ejemplo,
para un diario digital diremos que existe una parte denominada BackEnd donde escriben los articulistas
y otra parte denominada FrontEnd que es la pgina web en s del diario. Aplicaciones web que pueden
servir para este propsito son Joomla, Drupal o WordPress.
Tanto en el backEnd de las aplicaciones como en el FrontEnd de estas, se utiliza JavaScript. En el
backEnd no se trata tanto de crear efectos visuales atractivos, sino de dotar a la pgina de
administracin de agilidad y rapidez. En el FrontEnd el principal objetivo ser crear efectos visuales
atractivos y hacer que la pgina funcione de forma correcta y rpida.
Para conseguir webs tiles y rpidas estas herramientas incorporan cdigo JavaScript avanzado
mediante el que se realizan distintos procesos o se crean distintos efectos. La aplicacin web suele
contar con una parte para la gestin de contenidos mientras que otra parte denominada plantilla,
template, theme, skin, etc. se encarga de controlar el aspecto.
El template o theme acta como una piel sobre los contenidos y su principal herramienta es CSS, pero
tambin suele estar controlado por un lenguaje de programacin del lado del servidor como PHP y en
algunos aspectos por un lenguaje del lado del cliente como JavaScript, adems de tener un esqueleto
de HTML.

aprenderaprogramar.com, 2006-2029
JavaScript en CMS como Joomla, WordPress, Drupal

Fjate en estas imgenes, que corresponden a themes o plantillas del gestor de contenidos Drupal.

Fjate en las imgenes, en los mens, en los iconos. Vamos a comentar distintos efectos que se pueden
conseguir con JavaScript:
a) Es frecuente que una imagen principal en la cabecera de una pgina web vaya rotando o
alternndose con otras imgenes (a veces con un texto superpuesto). Para hacer esto el usuario
no tiene que recargar la pgina, es un proceso que se puede ejecutar del lado del cliente
usando JavaScript.

b) Es frecuente que al pulsar en un men se vea un efecto de despliegue o desenrollado, a veces

con cambios de color, velocidad, despliegue de submens, etc. Para hacer esto el usuario no
tiene que recargar la pgina, es un proceso que se puede ejecutar del lado del cliente usando
JavaScript.
c) Muchas veces hay iconos que permiten activar o desactivar sonidos, cambiar los colores que
intervienen en la pgina web, ser arrastrados y colocados en distintos lugares, etc. Para hacer
esto el usuario no tiene que recargar la pgina, es un proceso que se puede ejecutar del lado
del cliente usando JavaScript.

aprenderaprogramar.com, 2006-2029
JavaScript en CMS como Joomla, WordPress, Drupal

Vemos cmo usando JavaScript se pueden conseguir muy distintos efectos y procesos. Esto ha
permitido el xito de gestores de contenidos como Joomla, Drupal o WordPress, con los que se puede
crear desde una pgina dedicada al comercio electrnico hasta una web de un restaurante o un
peridico digital. Gracias a JavaScript estas pginas pueden tener muchos contenidos y ser rpidas a la
hora de realizar procesos, desplegar mens, rotar imgenes, etc.
JavaScript interviene en la programacin de distintos complementos para las aplicaciones web.
Existen muchos estudios de diseo y programacin donde se trabaja en la creacin de templates o
themes prediseados. Hay muchos de distribucin gratuita, pero la mayora de los templates o themes
de calidad son de pago (cosa lgica, ya que tienen un gran trabajo detrs). Prcticamente todos estos
templates usan, entre otros lenguajes, JavaScript.
La mayora de las aplicaciones web tienen disponibles extensiones (que reciben distintos nombres
como mdulos, componentes, etc.) que permiten incorporar nuevas funcionalidades. Por ejemplo si
queremos incorporar una calculadora a nuestra aplicacin web Joomla, Drupal o WordPress
posiblemente ya exista un mdulo de descarga gratuita o de pago que permita incorporar la calculadora
sin tener que programarla partiendo de cero. Estas extensiones usan, entre otros lenguajes, JavaScript.
Hemos querido con esta aproximacin al uso de JavaScript en aplicaciones web remarcar la importancia
que ha adquirido esta tcnica en los desarrollos web. No vamos a entrar de momento en cuestiones
relacionadas con aplicaciones web o gestores de contenidos, sino a centrarnos en cuestiones bsicas de
JavaScript. La realidad en torno a las aplicaciones web es bastante compleja, ya que actualmente se
tiende a trabajar con muchos lenguajes, frameworks y herramientas de carcter avanzado. Esto ya
supone el uso de herramientas muy especficas, y tambin suele suponer la participacin de distintos
especialistas (diseadores, maquetadores, expertos en CSS, programadores expertos en bases de datos,
expertos en programacin del lado del servidor, expertos en programacin del lado del cliente, etc.)
para la creacin de las aplicaciones web.
Lo primero es lo primero, as que empecemos con los fundamentos de JavaScript.

Prxima entrega: CU01107E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTM
ML y CSS bsico.

HTML Y CSS
C DE PARTIIDA

Para ver cmo

c JavaSccript nos sirvve para dotar de proceso
os y efectos dinmicos a un docume ento HTML
vamos a partir
p de un cdigo HTM ML + CSS quee representaa la estructura y estilos bsicos de una
u pgina
web. En esta
e estructura la pgina web queda dividida en: cabecera co on el ttulo y mensaje bre
eve, men,
texto con
n algunas immgenes, forrmulario de contacto y un pie de pgina p con iinformacin sobre los
autores o el copyrightt.

Crea un archivo HTMLL con un edittor de texto como Notep

pad++ o similar con el siguiente conte
enido:

<!DOCTYPE HTML PUBLIC C "-//W3C//DTD D HTML 4.01 Trransitional//EN" "http://www.w3.org/TR/htm

ml4/loose.dtd">
>
<!Cdigo o base para el curso
c de javascript desde ceroo -->
<html>
<head>
<title>Porttal web - aprennderaprogramar.com</title>
<meta chaarset="utf-8">
<meta nam me="description" content="Po ortal web apren
nderaprogramaar.com">
<meta nam me="keywords"" content="apreender, program mar, cursos, librros">
<link rel="stylesheet" typpe="text/css" href="estilosA.csss">
</head>
<!-- Contenido de la pgina web -->
<body>
<!-- Cabeccera de la pgina web -->
<div id="caabecera">
<h1>Portaal web aprenderaprogramar.co om</h1>
<h2>Didcctica y divulgacin de la prograamacin</h2>
</div>
<!-- Fin de la cabecera dee la pgina web -->
<!-- Contenedor para la parte
p central -->>
<div id="ceentral">
<!-- menu -->
<div id="mmenu">
<div class=="txtPresentaMMenu">Men</div>
<hr/>
<ul class=""itemsMenu">
<li><a hreff="#">Inicio</aa></li>
<li> <a hreef="libros.html"">Libros de programacin</a>> </li>
<li> <a hreef="cursos.htmll">Cursos de prrogramacin</aa> </li>
<li> <a hreef="humor.html">Humor inforrmtico</a> </li>
</ul>
</div>
<!-- fin meenu -->

aprenderraprogramar.co
om, 2006-2029
JavaScript a partir de HTML y CSS bsico.

<!-- cuerpo -->

<div id="cuerpoCentral">
<!-- Texto con imgenes -->
<div class="txtConImg">
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p>Hay que tener claro que <a href="http://www.aprenderaprogramar.com">aprender programacin</a> no es tarea de un
da ni de una semana: aprender programacin
requiere al menos varios meses y, si hablamos de programacin a nivel profesional, varios aos. No queremos
con esto desanimar a nadie: en un plazo de unos pocos das podemos estar haciendo nuestros primeros programas.</p>
<p>Puedes seguir uno de <a
href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros
cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos
recomendamos el uso de uno potente y sencillo como Notepad++, aunque son vlidas otras alternativas como Crimson
Editor.</p>
<a
href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-
informaticas&Itemid=179">
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>
<!-- Fin del texto con imgenes -->

<!-- Formulario de contacto -->

<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html">
<div class="form-content">
<h2>Formulario de contacto</h2>
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" placeholder="Tu nombre..." /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Tus apellidos..."/></label>
<label for="direccion"><span>Direccin:</span> <input id="direccion" type="text" name="direccion" placeholder="Tu direccin..."/></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" placeholder="Tu email..."/></label>
<label for="mensaje"><span>Mensaje:</span> <textarea id="mensaje" name="mensaje" cols=30 rows=2 placeholder="Tu
mensaje..."></textarea></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</div>
</form>
<!-- Fin del formulario de contacto -->
</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor para la parte central -->

<!-- Pie de pgina o footer -->

<div id="pieDePagina">
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo
apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>
<!-- Fin del pie de pgina o footer -->
</body>
<!-- Fin del contenido de la pgina web -->
</html>

aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTML y CSS bsico.

Crea un archivo CSS (cuyo nombre debe ser estilosA.css) con un editor de texto como Notepad++ o
similar con el siguiente contenido:

/* CSS para curso JavaScript aprenderaprogramar.com*/

body {font-family: sans-serif; background-color: yellow; font-size: 14px;}

h1 {color: blue;}

a {text-decoration: none;}

label {color: maroon; display:block; padding:5px;}

.itemsMenu{ padding: 3px 0px;

border-bottom: 1px solid #778;
font: bold 16px Verdana, sans-serif; }

.itemsMenu li { list-style: none; display: inline; margin-left:10px;}

.itemsMenu li a { padding: 3px 1em;

border: 1px solid #778; border-bottom: none;
background: #DDE; text-decoration: none; }

.itemsMenu li a:link { color: #448; }

.itemsMenu li a:hover {color: #000; background: #AAE; border-color: #227; }

.itemsMenu li a#actual { background: #AAE; }

El cdigo anterior es HTML y CSS y lo usaremos a lo largo del curso para poner diferentes ejemplos, por
lo que lo denominaremos "cdigo base HTML del curso" o cdigo base CSS del curso. Para seguir este
curso debes ser capaz de comprender todo el cdigo HTML y CSS que hemos usado, su significado y
sintaxis. Si no comprendes el cdigo anterior no continues avanzando, dirgete a la web
aprenderaprogramar.com y en la seccin cursos busca los cursos Curso bsico del programador web:
HTML desde cero y Curso bsico del programador web: CSS desde cero y realzalos. Si no lo haces as
no entenders o no le sacars todo el partido posible a este curso.

Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla
alguna imagen puedes cambiar las rutas y poner otra imagen que t desees):

aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTML y CSS bsico.

En este documento tenemos varios elementos como etiquetas de ttulo h1 y h2, links, listas con
elementos dentro de las listas, imgenes, formularios, botones, texto, etc. Todo ello nos va a servir para
usar JavaScript y ver las posibilidades que nos ofrece JavaScript para crear efectos y procesos dinmicos
en nuestras pginas web. En este curso nos vamos a centrar en tratar de aprender los aspectos ms
importantes de JavaScript y la lgica de JavaScript. El objetivo ser saber hacer un buen diseo de
cdigo JavaScript, un buen uso de JavaScript y comprender lo que hacemos. Por el contrario, no vamos
a tratar de aprender o conocer todas las propiedades, posibilidades o instrucciones de JavaScript ya que
si logramos comprender cmo funciona y su lgica, nos bastar con realizar bsquedas en internet para
encontrar aquella propiedad o sintaxis que podamos necesitar en un momento dado. Aprende a
pescar, no te conformes con que te den peces.

Prxima entrega: CU01108E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Diferentes respuestas
r de navegadores
n a JavaScript.

INCLUIR JAVASCRIPT
J EN WEBS. RESPUESTA
R D LOS NAVEEGADORES.
DE

Una pginna web podeemos verla comoc estructura o armazn, ms esstilos o apariiencia, ms acciones
a o
respuestaas dinmicass. En esta visin HTML es e la estructtura, CSS loss estilos y JaavaScript la respuesta
dinmica.. El cdigo JavaScript see incluye en las pginas web de form ma similar a como se haace con el
cdigo CSSS: puede ir especificado
e o en un aparttado especffico dentro del
d cdigo HTTML, en lne ea, o en un
archivo exxterno.

JavaScriptt puede usarrse con muchos fines, peero el ms habitual es reesponder a u

una accin deel usuario.
Cuando ele usuario haace click sobbre un botn o sobre una
u imagen, por ejemplo o, decimos que se ha
producidoo un eventoo (Cul es el
e evento? Que
Q el usuario o ha hecho click
c sobre el botn o imaagen).
Nos intereesa ahora veer cmo podemos incluirr JavaScript dentro
d del c
digo de unaa pgina web
b para que
el navegador lo interp
prete y ejecu
ute.

PRIMERA
A FORMA DE INCLUIR JAV
VASCRIPT EN
N WEBS

Crea un archivo
a HTML con este contenido,
c gu
urdalo con un nombre como ejemplo1.html y visualzalo
des cambiar la ruta de la imagen si lo
en el naveegador (pued o deseas):

<hhtml>
<hhead>
<title>Portal webb - aprenderaprrogramar.com<</title> <meta charset="utf-8"
c >
<//head>
<bbody>
<ddiv>
<pp>Aqu un prraafo de texto situ
uado antes de la
l imagen, denttro de un div co
ontenedor</p>
<immg src="http:///i.imgur.com/affC0L.jpg" alt="N
Notepad++" titlle="Notepad+++, un til editor de texto">
<pp>Aqu otro prrafo de texto.. JavaScript es un lenguaje utilizado para dotar de efecto os dinmicos a las
pginas web.
<//p>
<//div>
<//body>
<//html>

Podemos hacer click sobre

s la imaggen y no obtendremos re
espuesta alguna.
Nuestro objetivo
o ora es que cuando se pu
aho ulse sobre laa imagen ap
parezca un m
mensaje, porr ejemplo:
Bienveniido al curso JavaScript
J dee aprenderap
programar.co om

aprenderraprogramar.co
om, 2006-2029
Diferentes respuestas de navegadores a JavaScript.

Ahora vamos a ver la primera forma de introducir JavaScript: hacerlo en lnea. Modifica el cdigo y
comprueba el resultado de hacer click sobre la imagen despus de introducir esta modificacin:
<img onclick="alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')"
src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">

Interpretamos lo que hace este cdigo: le indica al navegador que cuando sobre el elemento img se
produzca un click (evento denominado onclick), se muestre un mensaje de alerta al usuario cuyo
contenido ser Bienvenido al curso de JavaScript de aprenderaprogramar.com.
Una vez hacemos click sobre la imagen obtendremos un resultado. Qu resultado? Aqu mostramos
algunas posibilidades:

aprenderaprogramar.com, 2006-2029
Diferentes respuestas de navegadores a JavaScript.

El cdigo onclick="alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')" es cdigo JavaScript,

aunque est dentro de una lnea de HTML. El navegador reconoce que se trata de cdigo JavaScript, lo
interpreta y se encarga de tener en cuenta ese cdigo y generar las acciones que correspondan.

Si has visualizado la pgina web en tu navegador y haz hecho click sobre la imagen lo ms probable es
que te haya aparecido una ventana con un mensaje informativo, pero hemos indicado distintas
posibilidades que podran tener lugar en distintos navegadores o computadores:

Posibilidad 1 (navegador 1): se muestra una ventana informativa con el texto. En este caso no tiene
aspa de cierre, ni mrgenes ni ttulo.
Posibilidad 2 (navegador 2): se muestra una ventana informativa con el texto. En este caso s tiene aspa
de cierre, mrgenes y ttulo.
Posibilidad 3 (navegador 3): al hacer click sobre la imagen no ocurre nada, aunque un mensaje nos
avisa de que el navegador no permiti la ejecucion de scripts y nos da opcin a permitir el contenido
bloqueado.
Posibilidad 4 (navegador 4): al hacer click sobre la imagen no ocurre nada, y no aparece ningn
mensaje avisando de nada.

Por qu es posible obtener diferentes respuestas ante un cdigo tan simple? (Donde a priori parecera
que todos los navegadores deberan mostrar un mismo resultado).

Tenemos que indicar distintos motivos:

1) Cada navegador tiene su propia interfaz o apariencia para ciertos elementos. En este ejemplo,
el navegador 1 muestra la ventana de mensaje con una apariencia y el navegador 2 con otra.
Ambos resultados los podemos considerar correctos, la nica diferencia est en la apariencia.

2) La ejecucin de JavaScript en un navegador est ligada a la configuracin de seguridad del

navegador y al propio hecho de que JavaScript est activado o no en el navegador. Hoy en da la
mayor parte de los usuarios navegan con una configuracin de seguridad estndar y con
JavaScript activado, pero algunos usuarios pueden tener configuraciones de seguridad
especiales (o incluso JavaScript desactivado). En el navegador 3 el propio navegador alerta que
se est impidiendo la ejecucin de un script (por su configuracin de seguridad). En el
navegador 4 posiblemente JavaScript est desactivado (con lo cual JavaScript no se ejecuta y no
podemos observar resultado alguno).

Nos gustara que al incluir un cdigo obtuviramos siempre la misma respuesta, pero la realidad es que
no siempre se obtiene la misma respuesta. El navegador que utilicemos (Firefox, Internet Explorer,
Chrome, Safari, Opera, etc.) puede influir en los resultados que obtengamos. Y tambin puede influir la

aprenderaprogramar.com, 2006-2029
Diferentes respuestas de navegadores a JavaScript.

configuracin de seguridad del navegador (que impida la ejecucin de ciertas cosas para evitar que un
virus, un hacker, o un programa indeseado pueda generarnos algn perjuicio).
Tambin puede influir el sistema operativo (Windows, Macintosh, Linux) e incluso qu tipo de
dispositivo sea el que estemos usando: un computador tradicional (pc o porttil), un smartphone, una
tablet, una consola de videojuegos, una smartv, etc.
En este curso vamos a centrarnos en aprender JavaScript bsico, aplicable al 99 % de los usuarios, el 99
% de los navegadores y el 99 % de los dispositivos. No obstante, acostmbrate a que siempre pueden
existir pequeas diferencias entre navegadores o a que en algn dispositivo concreto no se obtengan
los resultados deseados. Para este curso consideramos que usaremos un computador tradicional (pc
o porttil), con un navegador como Firefox, Internet Explorer, Chrome, Opera o Safari, y con la
configuracin de seguridad habitual (99 % de los usuarios).
No podemos (y no tiene sentido) estar considerando todas las posibles configuraciones de seguridad,
todos los posibles dispositivos, todos los posibles navegadores, etc. para tratar de tener una pgina web
que funcione correctamente en el 100 % de los dispositivos. Nos resignamos a que nuestra web
funcione correctamente en el 99 %. Si tienes algn problema para visualizar los resultados y ejecutar el
cdigo con el que iremos trabajando a lo largo del curso te recomendamos que escribas una consulta
en los foros de aprenderaprogramar.com (http://aprenderaprogramar.com/foros) para obtener ayuda.
A medida que vayamos avanzando con el curso iremos comentando algunos aspectos concretos
relativos a diferencias entre navegadores, cuando consideremos que puede resultar relevante.

Prxima entrega: CU01109E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
JavaScript interno delimitaado por etique
etas.

INCLUIR JAVASCRIPT
J EN WEBS.

Hemos visto que podemos incluirr JavaScript embebido

dentro de una
u lnea de HTML. Pero o esto ser
o tengamos que escribir pequeos programas
poco prcctico cuando p (ssera muy coonfuso entre emezclarlo
todo con el HTML). Po
or eso vamos a ver dos formas adicio onales para escribir
e JavaSScript de forrma clara y
ordenada: JavaScript interno delim
mitado por etiquetas,
e o JavaScript
J en
n archivos exxternos.

JAVASCRIIPT INTERNO
O DELIMITAD
DO POR ETIQ
QUETAS (TAG
GS)

De la misma forma que el cdigo o CSS puede aparecer aggrupado entrre etiquetas <style> </style>,
< el
cdigo JavvaScript ir entre
e etiquettas <script> </script> tal
t y como mostramos
m a continuacin
n:

<head>

<script type="text/ja
t avascript">
function
n nombreDeFu uncion1() {
aqu el
e cdigo de laa funcin
}
function
n nombreDeFu uncion2() {
aqu el
e cdigo de laa funcin
}

</scriptt>
</head>>

Dentro dee las etiquetas <head> </head> incluiremos una etiquetta de apertu ura de declaaracin de
script <sccript type=ttext/javascript>, a continuacin co olocaremos la definicin
n de una, dos
d o ms
funcioness JavaScript y terminaremmos cerrando o con la etiqu
ueta </scriptt>.

En muchaas pginas webw y mucho os libros vers que se esscribe <scriptt> </scrip
pt> sin hacerr uso de la
definicin
n de type. El motivo para esto es qu ue JavaScriptt se ha convvertido en unn estndar reconocido
por todos los naveggadores y ya no se co onsidera neccesario espeecificar typee=text/javasscript. En
versiones antiguas dee HTML se co onsideraba necesario,
n peero en las acctuales no ess necesario especificar
e
type =teext/javascriptt. Todos lo
os navegado ores actualess reconocern JavaScrip pt sin necesiidad de la
especificaacin type.

En algunaas pginas web

w antiguaas te podrss encontrar incluso otro
os tipos de sintaxis com
mo <script
language==JavaScript>....</scriptt>.

aprenderraprogramar.co
om, 2006-2029
JavaScript interno delimitado por etiquetas.

Los motivos por los que se introdujo la especificacin type son varios:

a) Existan (y existen) distintos lenguajes de script, es decir, adems de javascript nos podemos
encontrar otros lenguajes. El uso de type se concibi para indicarle al navegador qu lenguaje
era el que usaba el script. Por ejemplo type="text/vbscript" indicara lenguaje VBscript,
type="text/tcl" indicara lenguaje TCL, etc.

b) Fue parte de la especificacin oficial de algunas versiones de HTML.

Desde el momento en que todos los navegadores reconocen JavaScript sin necesidad de la
especificacin type, usarla o no resulta indistinto y no vamos a preocuparnos ms por este asunto. Por
otro lado ten en cuenta que la etiqueta <script> y su contenido no es lenguaje JavaScript, sino lenguaje
HTML.

Una cuestin importante e interesante que ha surgido al ver cmo se define JavaScript es que el cdigo
JavaScript se escribe normalmente dentro de funciones. Hablaremos sobre las funciones con ms
detalle ms adelante. De momento, simplemente consideraremos que una funcin es un fragmento de
cdigo que tiene un nombre, y que puede ser invocado desde algn punto del cdigo HTML para ser
ejecutado. Para escribir una funcin especificaremos de momento: function nombreDeLaFuncionAqui {
cdigo } Las funciones introducen algo interesante: cuando tengamos que hacer algo repetidas veces,
no tendremos que escribir el cdigo varias veces, sino simplemente invocar a la funcin para que se
ejecute.

Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
function mostrarMensaje2() {
alert('Ha hecho click sobre el prrafo inferior');
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es un lenguaje utilizado para dotar
de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
JavaScript interno delimitado por etiquetas.

Visualiza la pgina. El resultado esperado ser que al hacer click sobre la imagen se muestre un mensaje
(el mensaje 1), mientras que al hacer click sobre el prrafo inferior se mostrar otro mensaje (el
mensaje 2). Aqu vemos cmo hemos definido un script. Nos podemos hacer algunas preguntas como:

Puede escribirse un script en otro lugar distinto del comprendido entre las etiquetas <head>
</head>?
La respuesta es que s. La mayora de los navegadores aceptarn que el script est en casi cualquier
parte. Prueba a cambiar el cdigo y ponerlo en distintos lugares y comprueba los resultados. Pero
poniendo el cdigo fuera de <head> </head> podemos tener problemas con algunos navegadores, o
podemos tener problemas en algunos casos en que el cdigo deba guardar cierto orden. Para no tener
problemas pondremos siempre los scripts dentro de las etiquetas <head> </head>.

Pueden escribirse varios scripts en una misma pgina web?

La respuesta es que s. Por ejemplo esto sera vlido:

<script type="text/javascript">
function mostrarMensaje1() {
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
</script>
<script type="text/javascript">
function mostrarMensaje2() {
alert('Ha hecho click sobre el prrafo inferior');
}
</script>

Aqu en vez de un script con dos funciones, tenemos dos scripts cada uno de ellos con una funcin.
Cul es mejor opcin, un script o dos scripts? Recordar que JavaScript es un cdigo que es
interpretado por el navegador (en concreto por una parte del navegador a la que se denomina
precisamente intrprete JavaScript). Al escribir dos scripts estamos obligando al intrprete a leer ms
lneas, y considerar dos unidades de scripts en lugar de una. Esto ralentiza la carga de la pgina web y
su ejecucin, por tanto normalmente incluiremos el cdigo dentro de un nico script, excepto cuando
justificadamente necesitemos o sea razonable hacerlo de otra manera. En pginas web avanzadas es
posible que encuentres muchos scripts que salen de muchos sitios diferentes.

Qu extensin puede tener un script?

La que nosotros queramos. Puede ser desde una lnea hasta miles de lneas.

Prxima entrega: CU01110E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
JavaScript externo
e en arch
hivos de extenssin js.

JAVASCRIIPT EN ARCH
HIVOS JS

Hemos visto que poddemos incluirr JavaScript embebido dentro de una

u lnea dee HTML o deentro de la
cabecera del documeento HTML. Pero esto seer poco prctico cuanddo tengamoss muchas pginas web
que neceesiten usar las mismas funciones JaavaScript. V
Vamos a estar repitiend
do el cdigo
o en cada
pgina?

JAVASCRIIPT EXTERNO
O EN ARCHIV
VOS JS

De la misma forma qu ue el cdigo CSS puede estar

e conten
nido en archiivos externos con extenssin css, el
cdigo JavvaScript pueede independizarse del documento
d HTML introdducindolo een un archivoo de texto
nsin .js y que se invocar desde el c
con exten digo HTML de la forma que mostram mos a contin
nuacin:

<head>


<script type="text/ja
t avascript" src=="rutaDelArch
hivo1.js"></script>
<script type="text/ja
t hivo2.js"></script>
avascript" src=="rutaDelArch
<script type="text/ja
t hivo3.js"></script>
avascript" src=="rutaDelArch


</head>>

Podemos invocar un solo

s archivo, o dos, tres, cuatro tantos como resulten necessarios.

En el atributo src ten nemos que especificar

e no indicamos nada, se
laa ruta del arrchivo refereenciado (si n
sobreentiende que esst en el missmo directorrio que el do ocumento HTTML). Supongamos que un u archivo
externo con cdigo JaavaScript se llamara
l funcctions.js y esttuviera dentro de una caarpeta denom
minada jsf.
En ese casso escribiram
mos: src="/jssf/functions..js"

En generaal tener el c
digo JavaScrript en archivvos independdientes ser lo ms prcctico desde el
e punto de
vista del mantenimiento de un sitio web. Tendremos lass funciones agrupadas
a y ordenadas, pudiendo
ser invoccadas desdee cualquier parte de nuestra pgina web. Esto nos ahorrar tiiempo de
mantenim miento: si tenemos 200 documentoss html, no te endremos que hacer 20 00 modificaciones sino
nicamen nte modificarr el archivo o los archivos con las fun
nciones JavaSScript que ussamos en tod
do nuestro
sitio web..

aprenderraprogramar.co
om, 2006-2029
JavaScript externo en archivos de extensin js.

Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript" src="functions.js"></script>
</head>
<body onload="alert('Completada la carga de la pgina')">
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es un lenguaje utilizado para dotar
de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Crea un archivo de nombre functions.js (cralo con un editor de textos como el bloc de notas,
Notepad++ o cualquier otro) y escribe el siguiente cdigo:

function mostrarMensaje1(){
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}

function mostrarMensaje2(){
alert('Ha hecho click sobre el prrafo inferior');
}

El resultado esperado al cargar la pgina html ser el siguiente:

1) Nada ms cargarse la pgina aparecer una ventana informativa con el texto Completada la carga
de la pgina. Esto se debe a que hemos incluido JavaScript en lnea asociado a la etiqueta body. El
evento onload se produce cuando el elemento body se ha cargado completamente en el navegador. En
ese momento se dispara el cdigo JavaScript asociado.

2) Al hacer click sobre la imagen se muestra un mensaje (el mensaje 1), debido a que hemos indicado
que cuando se produzca el evento onclick sobre la imagen, debe ejecutarse la funcin
mostrarMensaje1(). Esta funcin no se encuentra dentro del documento html, pero el navegador ha
incorporado el cdigo JavaScript externo porque as se lo hemos indicado al indicar src =
functions.php. Por tanto el cdigo externo funciona como si fuera cdigo incluido en el propio
documento html.

3) Al hacer click sobre el prrafo inferior se mostrar otro mensaje (el mensaje 2), debido a que hemos
indicado que cuando se produzca el evento onclick sobre el segundo prrafo debe ejecutarse la funcin
mostrarMensaje2().

aprenderaprogramar.com, 2006-2029
JavaScript externo en archivos de extensin js.

Nos podemos hacer algunas preguntas como:

Por qu tenemos una funcin definida en lnea y otras definidas en archivos externos?
En general ser ms interesante tener todo el cdigo organizado en un archivo externo en lugar de
tenerlo desperdigado en scripts dentro de html, cdigo en lnea, etc. No obstante, acostmbrate a
que por mltiples motivos te puedes encontrar con pginas web donde la organizacin del cdigo no
sea buena. El navegador aceptar el cdigo que se encuentre, tanto en lnea, como interno, como
externo. Como programadores deberemos intentar mantener el cdigo tan ordenado como sea posible.
Para ello es til usar archivos externos y agrupar las funciones de un mismo tipo dentro de carpetas y
archivos con nombres descriptivos. Por ejemplo si tenemos un reloj javascript, todas las funciones
asociadas al reloj pueden ir dentro de un archivo de nombre reloj.js. Si tenemos una calculadora con
diferentes funciones, podemos crear una carpeta calculadora y dentro de ella poner los archivos
calculosAritmeticos.js, calculosFinancieros.js y calculosCientificos.js por ejemplo.

No hay que incluir las etiquetas <script> </script> en el archivo js?

No, de hecho si lo hacemos el cdigo JavaScript es probable que no funcione al no ser capaz el
intrprete del navegador de entender su significado en ese contexto. En los archivos js se incluye cdigo
JavaScript nicamente. La etiqueta <script> </script> es cdigo html que se utiliza para delimitar el
cdigo JavaScript dentro de un documento html. Esas etiquetas no forman parte del lenguaje
JavaScript, por tanto no tiene sentido incluirlas en un documento JavaScript. Si el navegador encuentra
cosas extraas en un archivo js posiblemente ignore todo su contenido (con lo cual no ejecutar
ninguna funcin y no veremos resultado alguno).

Puedo ver el cdigo JavaScript si visualizo el cdigo fuente de la pgina web?

Depende. El cdigo JavaScript en lnea o interno forma parte del documento HTML, por tanto si
visualizas el cdigo fuente de la pgina s podrs verlo. En cambio el cdigo en archivos externos no
podrs verlo directamente dentro del cdigo HTML de la web, aunque s podrs ver el archivo al que se
referencia. Podrs acceder al cdigo JavaScript escribiendo la ruta correspondiente. Por ejemplo
file:///C:/EjemplosCursoJavaScript/functions.js podra ser una ruta en local (en nuestro ordenador) o
http://aprenderaprogramar.com/media/system/js/modal.js podra ser una ruta en una pgina web on-
line. De este modo podemos visualizar el cdigo JavaScript asociado a una pgina web.

Entonces me pueden copiar otras personas mi cdigo JavaScript (y yo copiarlo de otras webs)?
S. Ten en cuenta que JavaScript se ejecuta del lado del cliente, es decir, en el ordenador del usuario. Lo
mismo que el cdigo HTML y el cdigo CSS.

Puede robarse informacin del usario o introducir virus usando JavaScript?

En general no, ya que los navegadores y sistemas operativos incluyen medidas de seguridad que
impiden que a travs de cdigo JavaScript se pueda acceder al ordenador del usuario. No obstante,

aprenderaprogramar.com, 2006-2029
JavaScript externo en archivos de extensin js.

siempre hay mentes perversas que buscan fallos de seguridad en los sistemas e intentan hacer cosas
de este tipo. Es muy difcil, pero a veces lo consiguen (y seguidamente son perseguidos por la polica).

Deshabilitar JavaScript puede ser una buena medida de seguridad?

Podra serlo, pero no tiene demasiado sentido. Es como no salir de casa para evitar que te roben.
Puedes hacerlo, pero te perderas todo lo que hay fuera de tu casa y nadie quiere vivir sin disfrutar de
lo que nos puede ofrecer la vida.

Es posible ejecutar cdigo JavaScript sin estar asociado a una respuesta a un evento?
S, escribe este cdigo en un archivo html y visualiza el resultado en tu navegador.

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
</head>
<body>
<div>
<p>Hola</p>
<script type="text/javascript">
alert('Estamos cargando los contenidos de la web...');
</script>
<p>Aqu estamos</p>
</div>
</body>
</html>

El resultado esperado es que se cargue en pantalla el texto Hola. A continuacin se ejecuta el cdigo
JavaScript que al no estar incluido dentro de una funcin se ejecuta directamente. El resultado es que
se detiene la carga de la pgina web y aparece una ventana con el mensaje Estamos cargando los
contenidos de la web. Una vez pulsamos aceptar, se terminar la carga de la pgina y aparecer el
texto Aqu estamos. En este caso hemos hecho cosas extraas (slo para ver un ejemplo de cosas
que te puedes encontrar!): hemos incluido un script fuera de las etiquetas <head> </head> y hemos
dado lugar a la ejecucin de un cdigo JavaScript secuencialmente con el progreso de la carga del html,
en lugar de dar lugar a su ejecucin en respuesta a un evento (que sera lo ms normal).

Prxima entrega: CU01111E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Comentario
os JavaScript. In
nsercin autom
mtica de punto
o y coma final.

COMENTA
ARIOS JAVASSCRIPT

JavaScriptt permite in
nsertar comeentarios en el cdigo, al igual quee la mayoraa de los len
nguajes de
programaacin. En concreto hay dos tipos dee comentariios permitidos, los comentarios en lnea que
comienzan con una doble barra: //,
/ y los commentarios muultilnea, que comienzan con /* y term
minan con
*/.

COMENTA
ARIOS EN JA
AVASCRIPT

Veamos un
u ejemplo. Escribe
E este cdigo y gurdalo en un archivo de extensin
e htm
ml:

<hhtml> <head> <title>Portal weeb - aprenderap programar.com< </title> <meta charset="utf-8">

<sscript type="texxt/javascript">>
/* Funciones JavaaScript
V
Versin 0.1
A
Autor: Csar Krall
C
Curso: Tutorial bsico del proggramador web: JavaScript desd de cero
*//
//Funcin que muestra mensajee de bienvenidaa
function mostrarrMensaje1() {
aleert('Bienvenidoo al curso JavaScript de aprend deraprogramar..com');
}
function mostrarrMensaje2() {
//Mensaje si se hace
h click sobree prrafo
aleert('Ha hecho click
c sobre el prrafo inferior');;
}
<//script>
<//head>
<bbody>
<ddiv>
<pp>Aqu un prraafo de texto situ uado antes de lal imagen, denttro de un div co
ontenedor</p>
<immg onclick="m mostrarMensaje1()" src="http://i.imgur.com//afC0L.jpg" alt=="Notepad++" ttitle="Notepad++,
unn til editor de texto">
t
<pp style="backgro ound-color:yelllow;" onclick="mostrarMensaje2()">Aqu otrro prrafo de teexto. JavaScriptt es
unn lenguaje utilizzado para dotarr de efectos din nmicos a las pginas web.
<//p>
<//div>
<//body>
<//html>

Visualiza el resultado y comprueb

ba que la pgina web se
e muestra co
on normalidaad y que JavvaScript se
ejecuta co
on normalidaad.

aprenderraprogramar.co
om, 2006-2029
Comentarios JavaScript. Insercin automtica de punto y coma final.

Los comentarios son parte del cdigo JavaScript. El navegador los recibe y los detecta pero los ignora al
no constituir instrucciones que hayan de ejecutarse. Sin embargo, los comentarios pueden ser
visualizados si accedemos al cdigo fuente de la pgina web (cosa que puede hacer cualquier usuario).
Por lo tanto en los comentarios no debe figurar nada que pueda considerarse indebido (como este
cdigo lo he copiado a mi compaero de trabajo sin permiso, Para acceder a la base de datos usar
como datos usuario: cesar y contrasea: aprenderaprogramar.com).
Los comentarios deben usarse para describir aspectos importantes. Por ejemplo, contenido de un
archivo, cometido de una funcin, versin, licencia, autor, copyright, aspectos que permitan una mejor
comprensin del cdigo, avisos importantes, etc.
Obviamente los comentarios JavaScript tienen que encontrarse dentro de cdigo JavaScript, no pueden
insertarse en cualquier parte. Por tanto debern estar dentro de las etiquetas <script> </script> o
bien dentro de un archivo js, no pueden encontrarse en el cdigo HTML.
Los comentarios multilnea no se pueden anidar (es decir, no puede haber un comentario multilnea
dentro de otro comentario multilnea). Los comentarios multilnea pueden dar lugar a errores cuando
se mezclan con expresiones regulares (hablaremos de expresiones regulares ms adelante).

INSERCIN AUTOMTICA DE PUNTO Y COMA

En general las sentencias JavaScript deben terminar con un punto y coma que delimita el final de una
instruccin. No obstante, en caso de que se olvide insertar el punto y coma delimitador, el intrprete
JavaScript lo insertar automticamente siempre que le sea posible, facilitando que el cdigo se
ejecute.
En el cdigo anterior, elimina los punto y coma al final se las sentencias JavaScript:

function mostrarMensaje1() {
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')
}

function mostrarMensaje2() {
alert('Ha hecho click sobre el prrafo inferior')
}

Visualiza la pgina web en tu navegador y comprueba que JavaScript sigue funcionando. Por qu?
Porque el intrprete del navegador, al encontrar que faltan los ; de cierre, los ha introducido
automticamente para permitir que se ejecute el cdigo. Aunque esto puede parecer una facilidad,
recomendamos siempre el cierre de toda instruccin mediante punto y coma. Esto evitar errores o
que ocurran cosas indeseadas.

Prxima entrega: CU01112E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables
v en JavvaScript. Declaaracin.

TIPOS DE VARIABLES EN JAVASCR

RIPT

JavaScriptt permite traabajar con vaariables, com

mo es habitu ual en los len
nguajes de p
programacinn. Adems
permite trabajar con objetos, un tipo de informacin ms compleja que q una variable simple. De forma
general podramos reeferirnos a tiipos de dato os en JavaScrript, y dentroo de esos tip
pos de datoss tenemos
dos grupoos fundamen ntales: los tip
pos primitivoos y los tipos objeto.

TIPOS DE DATOS EN JAVASCRIPT

J

Los tipos de datos JavvaScript se dividen en doss grupos: tipos primitivos y tipos objeeto.
Los tipos primitivos in
ncluyen: cadeenas de texto (String), vaariables booleanas cuyo valor puede ser true o
false (Booolean) y n meros (Num mber). Adem ms hay doss tipos prim mitivos especciales que son
s Null y
Undefined. Es en los tipos
t primitivvos donde vaamos a centrrarnos por el momento.
Los tipos objeto son datos interrrelacionados, no ordenados, donde existe un no ombre de ob bjeto y un
conjunto de propiedaades que tieenen un vallor. Un obje eto puede seer creado especficamennte por el
programaador. No obsstante, se dicce que todo aquello que no es un tip
po primitivo es un objeto
o y en este
sentido taambin es un
n objeto, porr ejemplo, un
na funcin. Lo
L estudiarem
mos ms adeelante.
Existen algunos obje etos especiaales con un comportam miento que estudiaremo os por sepaarado ms
adelante: el objeto global,
g el o
objeto protootipo, los arrrays, las fun
nciones, las cclases definiidas por el
programaador, las classes predefin
nidas JavaScrript (como laa clase Datee para maneejo de fechaas, la clase
RegExp para manejo de expresiones regularees y bsqued da de patron nes en textoo, y la clase Error para
almacenar informacin relacionad da con los errores) y otro
os.
Los primeeros lenguajes de progrramacin no o usaban objjetos, solo variables.
v Un
na variable podramos
p
decir que es un espaccio de la me
emoria del ordenador a lal que asignaamos un con ntenido que puede ser
bsicamente un valorr numrico (sslo nmero o carcter o cadena de
os, con su vaalor de clculo) o de tipo
numrico que constar slo de texto o de texto mezclado
caracteres (valor alfan m con
n nmeros).
Como ejeemplo podem mos definir una variablee a que con
ntenga 32 y esto lo escribimos com mo a = 32.
Posteriormmente podemos cambiar el valor dee a y hacer a = 78. O hacer a equivalente al vallor de otra
variable b
as: a = b..
Dado quee antes hemo os dicho que un objeto taambin ocup
pa un espacio
o de memoria: en qu ses parecen
y en qu se diferenccia un objetoo de una vaariable? Connsideraremoss que las vaariables son entidades
elementales: un nm mero, un carcter, un valor
v verdad o mientras que los ob
dero o falso bjetos son
entidadess complejas que pueden estar formaadas por mucha informacin. Pero aambas cosas ocupan lo
mismo: unn espacio dee memoria (q
que puede seer ms o men nos grande).

aprenderraprogramar.co
om, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.

El siguiente esquema es un resumen sobre tipos de datos en JavaScript.

NOMBRE DESCRIPCIN aprenderaprogramar.com

String Cadenas de texto

Number Valores numricos

TIPOS
PRIMITIVOS
Boolean Verdadero o falso

Null Tipo especial, contiene null

Undefined Tipo especial, contiene undefined

Date (fechas)
TIPOS DE DATOS EN Tipos predefinidos de RegExp (expresiones regulares)
JAVASCRIPT JavaScript
Error (datos de error)

Tipos definidos por el Funciones simples

programador/usuario
Clases

TIPOS OBJETO Serie de elementos o

formacin tipo vector o
Arrays
matriz. Lo consideraremos un
objeto especial.

Objeto global
Objetos Objeto prototipo
especiales
Otros

No te preocupes ahora por conocer todos los posibles tipos de datos de JavaScript ni su significado. Los
iremos estudiando y trabajando con ellos poco a poco.

Frente a otros lenguajes fuertemente tipados (las variables tienen un tipo declarado y no pueden
cambiar el tipo de contenido que almacenan) como Java, JavaScript es un un lenguaje dbilmente
tipado: las variables pueden no ser de un tipo especfico y cambiar el tipo de contenido que almacenan.

aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.

CONCEPTOS BSICOS SOBRE VARIABLES

Una variable se declara con la palabra clave var. Por ejemplo var precio; constituye la declaracin de
una variable denominada precio. En la declaracin no figura qu tipo de variable es (por ejemplo si es
texto tipo String o si es numrica tipo Number). Entonces, cmo se sabe de qu tipo es una variable?
JavaScript decide el tipo de la variable por inferencia. Si detecta que contiene un valor numrico, la
considerar tipo Number. Si contiene un valor de tipo texto la considerar String. Si contiene true
false la considerar booleana.
El nombre de una variable deber estar formado por letras, nmeros, guiones bajos o smbolos dlar
($), no siendo admitidos otros smbolos. El nombre de la variable no puede empezar por un nmero:
obligatoriamente ha de empezar con una letra, un signo dlar o un guin bajo. Por tanto son nombres
de variables vlidos precio, $precio, _precio_ , _$dato1, precio_articulo, etc. y no son nombres vlidos
12precio ni precio# pre!dato1.
Una variable se inicializa cuando se establece su contenido o valor por primera vez. Por ejemplo precio
= 22.55; puede ser una forma de inicializar una variable.
Una variable se puede declarar e inicializar al mismo tiempo. Por ejemplo podramos escribir var precio
= 22.55; con lo que la variable ha sido declarada e inicializada en una misma lnea.
JavaScript no requiere declaracin del tipo de las variables, e incluso permite que una variable
almacene contenido de distintos tipos en distintos momentos. Por ejemplo podramos usar precio =
22.55; y en un lugar posterior escribir precio = 'muy caro';. Esto, que en otros lenguajes generara un
error, es aceptado por JavaScript.
JavaScript distingue entre maysculas y minsculas (no slo para las variables): por tanto no es lo
mismo precio = 22.55 que Precio = 22.55. Precio es una variable y precio otra.
JavaScript permite hacer uso de una variable sin que haya sido declarada. En muchos lenguajes de
programacin es necesario declarar una variable antes de poder hacer uso de ella, pero JavaScript no
obliga a ello. Cuando JavaScript se encuentra una variable no declarada, crea automticamente una
variable y permite su uso. Hablaremos de ello ms adelante, de momento usaremos variables
declaradas.
El uso inadecuado de la palabra clave var puede generar un error ante el que JavaScript deja de
funcionar, es decir, la pgina web se visualizar correctamente pero JavaScript no se ejecuta. Un
ejemplo de cdigo errneo podra ser este:

var precio1=44.20; alert ('La variable ahora es ' + var precio1);

var se usa nicamente para declarar una variable. No puede usarse para otra cosa. Una vez declarada la
variable, ya se har uso de ella sin precederla de la palabra clave var. Si se declara una variable estando
ya declarada, JavaScript intentar continuar (y posiblemente lo consiga), pero esto puede considerarse
una mala prctica excepto si se sabe muy bien lo que se est haciendo.

aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.

Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
alert('La variable precio vale: ' + precio);
dato1 = null;
alert('La variable dato1 vale: ' + dato1);
var precio = 22.55;
precio = precio + 10;
alert('La variable precio vale: ' + precio);
alert('El doble de precio es: ' + (precio*2));
cantidad = 10;
alert('El importe resultante de multiplicar precio por cantidad es: ' + (precio*cantidad));
precio = 'muy caro';
alert('La variable precio vale ahora: ' + precio);
alert('El doble de precio es ahora: ' + (precio*2));
var precio = 99.55
alert('La variable precio ha sido declarada por segunda vez y ahora vale: ' + precio);
var $descuento_aplicado = 0.55;
alert('La variable $descuento_aplicado vale : ' + $descuento_aplicado);
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es
un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente:
La variable precio vale: undefined (Aceptar)
La variable dato1 vale: null (Aceptar)
La variable precio vale: 32.55 (Aceptar)
El doble de precio es: 65.1 (Aceptar)
El importe resultante de multiplicar precio por cantidad es: 325.5 (Aceptar)
La variable precio vale ahora: muy caro (Aceptar)
El doble de precio es ahora: NaN (Aceptar)
La variable precio ha sido declarada por segunda vez y ahora vale: 99.55 (Aceptar)
La variable $descuento_aplicado vale: 0.55 (Aceptar)

aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.

SIGNIFICADO DE UNDEFINED, NULL Y NAN

De este ejemplo debemos destacar lo siguiente:

a) Se cumplen los conceptos bsicos explicados.
b) El contenido de una variable no inicializada es undefined. En este caso decimos que la variable
es de tipo Undefined.
c) El contenido de una variable puede ser null y en ese caso decimos que la variable es de tipo
Null.
d) Si intentamos realizar una operacin matemtica con una variable cuyo contenido no es
numrico sino texto, la variable toma el valor NaN. Para JavaScript NaN (abreviatura de Not-a-
Number) es un valor numrico especial, que representa nmero ilegal o no representable. La
asignacin de NaN que realiza JavaScript automticamente cuando se intentan realizar
operaciones numricas ilegales evita la aparicin de errores explcitos o que el cdigo JavaScript
deje de ejecutarse.

EJERCICIO

Crea un cdigo JavaScript donde se genere un error por un mal uso de la palabra clave var y comprueba
la respuesta del navegador.

Crea una variable y asignale los contenidos true y false, e intenta multiplicarlas por un nmero (por
ejemplo por 2). Qu resultados obtienes? A qu crees que se deben estos resultados?

Para comprobar si es correta tu solucin puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01113E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaaScript. Numriicas (Number).

VARIABLEES NUMRIC
CAS EN JAVA
ASCRIPT

A diferen ncia de mucchos otros lenguajes dee programaccin (como Java, C, C+++, Visual Baasic, etc.),
JavaScriptt no diferencia distintoss tipos de vaariables num
mricas. Todos los nmeeros en JavaaScript son
tratados como
c un tip
po numrico nico, el tippo Number, que agrupaa a los tipo
os int, intege
er, double,
float, singgle, etc. que se
s utilizan en
n otros lengu
uajes.

VARIABLEES NUMRIC
CAS JAVASCR
RIPT

JavaScriptt permite reepresentar cualquier

c nmero que sea necesario. Ten en cuenta que e esto no
significa que
q se puedaan usar nm meros descoomunales po orque un computador siempre ha de e tener un
lmite. Peero el lmitee de JavaScript es del orden de 1.79769313
48623157 10308 paraa nmeros
grandes(eesto son millones de trillones, un nmmero tan graande que nunca tendrem mos problem mas porque
324
nunca vam mos a tener que usar un nmero sup perior a esta cifra) y del orden
o de 5 10 paraa nmeros
pequeoss (esto supon ne que se puuede trabajaar con nmeeros con cien males, y en la prctica
ntos de decim
nunca vam mos a necessitar tanta precisin,
p con lo cual nuunca tendrem mos problem
mas por usarr nmeros
muy pequ ueos o con gran
g nmeroo de decimalles).
Para indiccar que un n
mero es neegativo se preecede del siggno menos.
Los nmeeros decimalles se escrib
ben utilizanddo el punto (.) como separador. Si la parte enttera de un
e el cero, se admite omittir el cero. Ess decir, 0.55 y .55 son am
nmero es mbos admitid
dos.
Tambin se admite laa notacin baasada en inddicar un nm
mero seguido
o de E y la po
otencia de 10
1 a la que
se debe elevar.
e Tambin se admitte usar la e minscula.
m Por ejemplo 1.2E2
1 1.2e2 equivale a 1.2*102 =
1.2*100 = 120. Esta notacin permite escrib bir nmeros muy grandees o muy peequeos sin tener que
escribir todas
t las cifras. Por ejemplo
e 3.2
2345234565EE20 equivalee a 323452 2345650000000000
3.2345234 4565e-10 eq
quivale a 0.00
0000000032 2345234565
El uso dee nmero deecimales pueede presentar en ocasio ones problem mas debido al redondeo o decimal,
como verremos. Este problema
p o es exclusivvo de JavaScript, sino que es algo qu
no ue afecta a numerosos
n
lenguajes de program
macin.

Veamos unu ejemplo. Escribe

E este cdigo y gurdalo en un archivo de extensin
e httml (puedes cambiar la
ruta de la imagen si quieres):

aprenderraprogramar.co
om, 2006-2029
Tipos de variables en JavaScript. Numricas (Number).

<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var bacterias = 3.55; var texto = 'bacterias en la probeta'; var numeroInfinito = Infinity;
alert('La variable bacterias vale: ' + bacterias);
bacterias = 3.55E5; alert('La variable bacterias vale (multiplicamos por 100000): ' + bacterias);
bacterias = 3.55E-5; alert('La variable bacterias ahora es un nmero muy pequeo: ' + bacterias);
alert('La variable bacterias ahora es (operacin sin sentido): ' + bacterias*texto);
bacterias = 3.55e100000000000000000; alert('La variable bacterias ahora es demasiado grande: ' +
bacterias);
bacterias = 3.55E-100000000000000000; alert('La variable bacterias ahora es demasiado pequea: ' +
bacterias);
alert('Un numero positivo dividido entre cero (indeterminacin matemtica) devuelve: ' + (4/0));
alert('Un numero negativo dividido entre cero (indeterminacin matemtica) devuelve: ' + (-4/0));
alert('Cero dividido entre cero devuelve: ' + (0/0));
alert('La variable numeroInfinito vale: ' + numeroInfinito);
var diezCentimos = .1; var veinteCentimos = .2; var treintaCentimos = .3;
alert('Esperamos 0.1 y lo obtenemos: ' + (veinteCentimos-diezCentimos));
alert('Esperamos 0.1 y no lo obtenemos: ' + (treintaCentimos-veinteCentimos));
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es
un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente:
La variable bacterias vale: 3.55 (Aceptar)
La variable bacterias vale (multiplicamos por 100000): 355000 (Aceptar)
La variable bacterias ahora es un nmero muy pequeo: 0.0000355 (Aceptar)
La variable bacterias ahora es (operacin sin sentido): NaN (Aceptar)
La variable bacterias ahora es demasiado grande: Infinity
La variable bacterias ahora es demasiado pequea: 0
Un numero positivo dividido entre cero (indeterminacin matemtica) devuelve: Infinity
Un numero negativo dividido entre cero (indeterminacin matemtica) devuelve: -Infinity
Cero dividido entre cero devuelve: NaN
La variable numeroInfinito vale: Infinity
Esperamos 0.1 y lo obtenemos: 0.1
Esperamos 0.1 y no lo obtenemos: 0.09999999999999998

aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. Numricas (Number).

SIGNIFICADO DE NAN, INFINITY, -INFINITY Y PROBLEMAS DE REDONDEO

De este ejemplo debemos destacar lo siguiente:

a) Se cumplen los conceptos bsicos explicados.
b) Una operacin sin sentido devuelve el valor NaN (Not-a-Number), valor equivalente a valor
numrico no vlido.
c) Un valor numrico positivo excesivamente grande (fuera de los lmites admisibles) es
representado como Infinity. Infinity puede considerarse como equivalente a valor numrico
positivo excesivamente grande o tendente a infinito. A una variable puede asignrsele valor
Infinity.
d) Un valor numrico excesivamente prximo a cero (fuera de los lmites admisibles) es
representado como cero.
e) Un valor numrico negativo excesivamente grande (fuera de los lmites admisibles) es
representado como -Infinity. -Infinity puede considerarse como equivalente a valor numrico
negativo excesivamente grande o tendente a menos infinito.
f) Algunas indeterminaciones matemticas se representan como Infinity Infinity y otras como
NaN (Not-a-Number).
g) Pueden surgir problemas de redondeo al operar con decimales. Por ejemplo 0.3 0.2 sera de
esperar que diera el mismo resultado que 0.2 0.1 y es posible que no d el mismo resultado.
Por qu? Este problema se debe a que JavaScript (al igual que muchos otros lenguajes) no
trabaja directamente con los decimales, sino que transforma esos decimales en una
representacin interna que al realizar operaciones puede dar lugar a resultados inesperados
debido al redondeo de esa representacin interna. Esta situacin puede cambiar segn el
navegador o la versin de JavaScript que se utilice, pero para evitar problemas, se recomienda
operar con nmeros enteros y usar los decimales a la hora de visualizar por pantalla. En el
ejemplo visto usaramos 10, 20 y 30 y operaramos con estos valores enteros. A la hora de
mostrar por pantalla, haramos la divisin entre 10.

EJERCICIO

Crea un cdigo JavaScript para evitar el problema del redondeo que hemos tenido en el cdigo anterior.
Para ello define los decimales como enteros y realiza la operacin para mostrar el decimal slo en el
momento de mostrar el resultado por pantalla.

Para comprobar si es correcta tu solucin puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01114E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaaScript. String (TTexto).

CARACTERES Y CADEN
NAS DE TEXTTO EN JAVASSCRIPT

A diferenccia de otros lenguajes qu ue diferenciaan un tipo de

e dato carccter (char) y otro caden
na de texto
(string), en
e JavaScriptt existe un nico
tipo paara englobarr tanto a carracteres commo a cadenas de texto
como a un na cadena vaaca: el tipo String.
S

VARIABLEES STRING EN
N JAVASCRIP
PT

JavaScriptt permite definir el texto

o tanto dentrro de comillaas dobles com
mo dentro dee comillas sim
mples. Por
ejemplo es
e vlido: varr cadenaTextto; cadenaTeexto = "aprenderaprograamar.com" ;
Y tambin
n es vlido:
cadenaTeexto = 'apren
nderaprogram
mar.com' ;
HTML tam mbin perm mite usar co
omillas simp
ples o doble
es indistintaamente. Esto puede daar lugar a
problemaas. Por ejemp
plo:
onclick =""alert("Alerta JavaScriptt")" sera un
na construccin incorreccta porque eel navegado
or no sabe
interpretaar qu comillas son de appertura y cules de cierre
e.
onclick =""alert('Alertaa JavaScript'))" sera una construccin
c n correcta po
orque el naveegador determina que
las comillaas dobles son las externaas y las comillas simples las internas.
Nosotros preferiremo
os usar comiillas dobles para
p HTML y comillas simples para JavaScript, aunque
a no
hay nada que obligue a que esto tenga
t que seer as.
En JavaScript siempree que se quieera indicar laa presencia de s puede opttar por comillas dobles
d un texto se
o simples, segn se prefiera. No obstante,
o haabr situaciones en las que queramoos que existaan comillas
dentro del propio texto, y en este caso tenemos laa opcin a usar un tip po de comillas como
delimitadoras externaas y otro tipo
o como comillas internas del texto. Poor ejemplo:
cadenaTeexto = '"apreenderaprograamar.com"' ; supone que e el texto est delimitado por comillas simples
y que la cadena de texxto contienee las comillass dobles.
cadenaTeexto = " 'apreenderaprogrramar.com' " ; supone qu ue el texto est delimitad
do por comillas dobles
y que la cadena de texxto contienee las comillass simples.
An as, existirn
e casos en que queramos qu ue un texto contenga
c sim
multneamente comillass simples y
dobles, co
on lo que la solucin an
nterior no noos resulta satisfactoria. Para
P resolver estas situaaciones, se
nominado caarcter backsslah o carcter de escape
usa el den e, que es el smbolo
s \.
El smbolo
o \ se usa paara resolver la representtacin de smmbolos que no pueden sser incluidoss de forma
normal deentro de un texto.
t Cabe destacar
d las siguientes se
ecuencias dee escape:

aprenderraprogramar.co
om, 2006-2029
Tipos de variables en JavaScript. String (Texto).

Secuencia de escape Resultado

\' Comilla simple

\" Comilla doble

\\ Smbolo \

\n Nueva lnea

\t Tabulador

Existen ms caracteres de escape pero estos son los ms usuales. Tambin es posible introducir
caracteres (de escape o no) usando la codificacin Latin-1 o Unicode en que se basa JavaScript, por
ejemplo \u0041 representa la letra A, \u00F3 representa la letra , \u005C representa el carcter \ y
\xA9 representa el smbolo de copyright , pero esta codificacin en general no la utilizaremos salvo en
casos muy excepcionales. Si necesitas comprobar el cdigo de los caracteres puedes hacerlo buscando
en internet List of Unicode characters.
El smbolo \ incluido dentro de un texto ser ignorado. Para introducir el smbolo \ siempre hemos de
hacerlo escapndolo usando \\.

LONGITUD DE UNA CADENA DE CARACTERES

La longitud de una cadena de caracteres expresada como un valor numrico puede obtenerse
escribiendo la cadena (o el nombre de la variable que la representa) seguido de .length.
Por ejemplo "extraordinario".length devuelve 14 por contener la palabra 14 letras y "pitn".length
devuelve 5 por contener la palabra 5 letras.
textoUsuario.length devolver el nmero de caracteres que contenga la variable textoUsuario.
"".length devuelve cero porque "" representa una cadena vaca o con cero caracteres.

En general cada carcter suma una unidad a la propiedad length del texto (aunque algunos caracteres
extraos suman 2 unidades por representarse concatenando dos cdigos Unicode, pero esto es algo a
lo que no le prestaremos atencin porque en la prctica casi nunca tendremos que trabajar con este
tipo de caracteres extraos).

aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. String (Texto).

Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):

<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var textoUsuario;
var cadenaTexto;
cadenaTexto = '\xA9 aprenderaprogramar.com' ; alert ('cadena texto vale ' + cadenaTexto);
cadenaTexto = '"aprenderaprogramar.com"' ; alert ('cadena texto es ' + cadenaTexto);
cadenaTexto = "Letra A: \u0041, o con tilde: \u00F3 sigue Caracter \\ igualmente \u005C seguido de tres
saltos de lnea \n\n\n Prosigue comilla simple \' y doble \"\n\n\n"
alert ('cadena texto ahora contiene ' + cadenaTexto);
textoUsuario = prompt("Introduzca un texto por favor:");
alert ("El texto introducido fue " + textoUsuario + " con longitud de " + textoUsuario.length + " caracteres");
alert ("La longitud de extraordinario es de " + ("extraordinario".length) + " caracteres");
alert ("La longitud de la cadena vaca es de " + ("".length) + " caracteres");
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
cadena texto vale aprenderaprogramar.com
cadena texto es "aprenderaprogramar.com"
cadena texto ahora contiene Letra A: A, o con tilde: sigue Caracter \ igualmente \ seguido de tres
saltos de lnea

Prosigue comilla simple ' y doble "

Introduzca un texto por favor: andamio
El texto introducido fueandamio con longitud de 7 caracteres
La longitud de extraordinario es de 14 caracteres
La longitud de la cadena vaca es de 0 caracteres

aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. String (Texto).

EJERCICIO

Consulta en internet cul es el cdigo unicode que corresponde al carcter (smbolo matemtico Pi) y
usando el cdigo muestra por pantalla el mensaje El nmero vale 3.1416.

Para comprobar si es correcta tu solucin puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01115E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Declaracin
n de variables JavaScript. Variiables booleanaas.

DECLARACIN DE VARIABLES JAV

VASCRIPT. VA
ARIABLES BO
OOLEANAS.

Aunque non es obligattorio, se reco

omienda decclarar siemprre las variables antes dee usarlas en JavaScript.
J
Como sab bemos esta declaracin n se hace escribiendo la palabra clave
c var segguida del nombre de
variable. Tambin see pueden declarar mltiples variab bles en unaa sola lnea escribiendo o var y a
continuaccin los nombres de las variables
v sep
parados por comas.
c

Por ejemp
plo podemoss declarar:
var cochees;
var motoss;
var treness;
O bien hacerlo en unaa sola lnea de
d esta maneera: var coches, motos, trrenes;
Tambin se
s permite laa inicializaci
n de variablles en lnea. Por ejemplo
o podramos escribir:
var cochees = 32, moto
os = 9, treness = 12;
De este modo
m quedan
n las variablees inicializadaas en el mism
mo momento
o de declaraccin.
Aunque laa declaracinn de variablees no es obliggatoria, se re
ecomienda siempre declaarar las variaables. Si se
trata de hacer
h uso dee un nombre de variable que no existte para asign nrselo a una variable s existente,
se producce un error y el cdigo JavaScript dejaa de funcionar. Ejemplo:
function mostrarMen
m saje1() {
var mayorrDe25 = falsee;
mayorDe2 25 = variableeInexistente;; //Genera un error y el cdigo
c no se ejecuta
alert ('Mo
ostrar un mensaje no se ejecuta');
e

Importantte: un peq queo error al escribir un nombrre de variab ble puede ggenerar un error (no
visualizad
do al no aparecer mensaje de error) y hacer que nuestro
n cdigo JavaScript deje de fun
ncionar.

VARIABLEES BOOLEAN
NAS
En JavaSccript una varriable es boo
oleana si se le asigna co
omo contenido true faalse. Estas vaariables se
usan paraa almacenar informacin n del tipo s / no, cumple / no cumple, verdadeero / falso, existe
e / no
existe, es decir, inform
macin que nicamente
puede tenerr dos estadoss.
Ejemplo: var
v casado = true;
true y falsse son palab
bras clave JavvaScript. Porr tanto no po
odemos usarrlas como no
ombres de vaariables. Si
escribiraamos true = 25; el intrprete del naavegador intterpretara que
q existe un error, porr lo que el

aprenderraprogramar.co
om, 2006-2029
Declaracin de variables JavaScript. Variables booleanas.

cdigo JavaScript no se ejecutar (sin embargo, no veremos ningn mensaje de error, simplemente
veremos que JavaScript no funciona).
Las variables booleanas normalmente se emplean para evaluar si se cumplen condiciones mediante
instrucciones if else, como veremos ms adelante.
Un razonamiento usando variables booleanas puede ser <<Si la variable casado contiene verdadero
entonces mostrar por pantalla el mensaje El usuario est casado>>.
Las variables booleanas toman valor true o false. Puede considerarse que existe un equivalente
numrico (1 para true y 0 para false), pero debemos decidir si queremos operar con nmeros, usar una
variable numrica, y si queremos operar con los valores true y false, operar con variables booleanas.
En general toda variable tiene un equivalente numrico y un equivalente en forma de texto. Por
ejemplo el equivalente en forma de texto del valor true sera true y se puede obtener escribiendo el
nombre de la variable seguido de toString(). Por ejemplo casado.toString() devuelve la cadena de texto
true, que es diferente del valor booleano true.
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):

<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var a=1, b=2, c=3;
var casado = true;
var mayorDe25 = false;
var texto1 = 'En un lugar de la Mancha...';
//mayorDe25 = variableInexistente; //Genera un error y el cdigo no se ejecuta
alert ('La variable casado vale: ' + casado);
alert ('La variable mayorDe25 vale: ' + mayorDe25);
alert ('La variable casado vale (forzamos mostrar equivalente numrico): ' + casado*1);
alert ('La variable mayorDe25 vale (forzamos mostrar equivalente numrico): ' + mayorDe25*1);
alert ('La variable casado vale ahora: ' + casado);
alert ('La suma de a, b y c vale: ' + (a+b+c));
alert ('Operacin sin sentido, obtenemos: ' + (texto1*1));
alert ('Mostramos equivalente de texto de la variable casado: ' + casado.toString());
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Declaracin de variables JavaScript. Variables booleanas.

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
La variable casado vale: true (Aceptar)
La variable mayorDe25 vale: false (Aceptar)
La variable casado vale (forzamos mostrar equivalente numrico): 1 (Aceptar)
La variable mayorDe25 vale (forzamos mostrar equivalente numrico): 0 (Aceptar)
La variable casado vale ahora: true (Aceptar)
La suma de a, b y c vale: 6 (Aceptar)
Operacin sin sentido, obtenemos: NaN (Aceptar)
Mostramos equivalente de texto de la variable casado: true (Aceptar)

EJERCICIO

Crea un cdigo JavaScript y declara dos variables booleanas. Asigna a una de ellas valor true y a otra
valor false. Intenta mostrar por pantalla el resultado de dos operaciones a priori carentes de lgica: el
resultado de la suma de las dos variables booleanas y el resultado de la suma de la conversin de las
variables booleanas en String mediante el uso de toString(). Visualiza los resultados e intenta razonar el
por qu de cada uno de ellos.

Para comprobar si es correcta tu solucin puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01116E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Operadoress aritmticos JaavaScript. Mdulo o resto de divisin.

OPERADO
ORES ARITMTICOS EN JA
AVASCRIPT. RESTO DE DIVISIN.
D

En JavaScript disponemos de los operadores

o a
aritmticos habituales
h en
n lenguajes d
de programacin como
son suma, resta, multtiplicacin, divisin y opeerador que devuelve
d el resto de una divisin entre enteros
(en otros lenguajes deenominado operador
o mood o mdulo de una divissin):

O
OPERADORE
ES BSICOS DESCR
RIPCIN

+ Su
uma

Resta

* Multip
plicacin

/ Divvisin

Resto
o de una divisiin entre enteeros (en
%
otrros lenguajes denominado mod)
Operadores aritmticos en JavaScript

Existen ottros operado

ores no bsiccos como ++ y -- que com
mentaremos ms adelantte.
Destacar que el operaador % es dee uso exclusivvo entre ente
eros. 7%3 deevuelve 1 ya que el resto
o de dividir
7 entre 3 es 1. 8%2 devuelve 0 ya que el resto de divvidir 8 entree 2 es cero.. Al valor ob btenido lo
denominaamos mdulo (en otros lenguajes en n vez del sm
mbolo % se usa
u la palabrra clave mod d) y a este
operador a veces se lee denomina operador mdulo.
m

Aunque ene otros lengguajes existe un operado otencias, en JavaScript

or de exponenciacin parra calcular po
no es as. Para calculaar una potenccia podemoss hacer varias cosas:

a) Recurrir a multiplicar
m n veces el trmino.
t Por ejemplo min m 3 lo pod demos calcu ular como
m
min*min*minn. Obviamentte esto no ess prctico paara potenciass de exponen
ntes grandess.

b) Usar un buclee que d luggar a la repeeticin de la operacin multiplicaci

m n n veces, o usar una
fu
uncin que ejecute
e la opeeracin. Estaas opciones las
l comentarremos ms aadelante.

uaje que perrmiten realizzar esta opeeracin. Esta opcin la

c) Usar herramientas propiaas del lengu
co
omentaremoos ms adelaante.

aprenderraprogramar.co
om, 2006-2029
Operadores aritmticos JavaScript. Mdulo o resto de divisin.

Las operaciones con operadores siguen un orden de prelacin o de precedencia que determinan el
orden con el que se ejecutan. Con los operadores matemticos la multiplicacin y divisin tienen
precedencia sobre la suma y la resta. Si existen expresiones con varios operadores del mismo nivel, la
operacin se ejecuta de izquierda a derecha. Para evitar resultados no deseados, en casos donde pueda
existir duda se recomienda el uso de parntesis para dejar claro con qu orden deben ejecutarse las
operaciones. Por ejemplo, si dudas si la expresin 3 * a / 7 + 2 se ejecutar en el orden que t deseas,
especifica el orden deseado utilizando parntesis: por ejemplo 3 * ( ( a / 7 ) + 2 ).

DOBLE SENTIDO DEL OPERADOR +

En JavaScript el operador + se usa para realizar sumas pero tambin para concatener cadenas, es decir,
realiza una operacin u otra segn el tipo de variables a las que se aplique. As si tenemos dos variables
denominadas adcon1 y adcon2 podramos ejecutar cdigo de este tipo:
var adcon1, adcon2, result;
adcon1=3;
adcon2 = 4;
result = adcon1 + adcon2; // result es de tipo numrico y contiene 7
adcon1= 'Amanecer'
adcon2 = ' clido';
result = adcon1 + adcon2; // result es ahora de tipo String y contiene Amanecer clido

Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):

<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<script type="text/javascript">
function mostrarMensaje1() {
var adcon1, adcon2, adcon3;
var cadenaTexto1; var cadenaTexto2; var cadenaTexto3; var espacioTxt = ' ';
adcon1=3; adcon2 = 4; result = adcon1 + adcon2; alert ('Ahora result vale ' + result);
adcon1= 'Amanecer'; adcon2 = ' clido'; result = adcon1 + adcon2; alert ('Ahora result vale ' + result);
cadenaTexto1 = 'Tomate'; cadenaTexto2 = 'frito'; cadenaTexto3 = cadenaTexto1+espacioTxt+cadenaTexto2;
alert ('La concatenacin del texto es: \"' + cadenaTexto3 +'\"');
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Operadores aritmticos JavaScript. Mdulo o resto de divisin.

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
Ahora result vale 7
Ahora result vale Amanecer clido
La concatenacin del texto es: "Tomate frito"

EJERCICIO

Crea un cdigo JavaScript para pedir al usuario que introduzca dos nmeros (mediante el uso de
prompt como hemos visto en anteriores epgrafes del curso) y devuelva mensajes informativos con:

a) El resto de dividir el primer nmero entre 5.

b) El resultado de dividir el primer nmero entre el segundo.

c) El resultado de sumar los dos nmeros.

Para comprobar si es correcta tu solucin puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01117E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Operadoress lgicos y relaccionales JavaSccript. Valores de verdad.

OPERADO
ORES LGICO
OS PRINCIPA
ALES EN JAVA
ASCRIPT

En JavaScript disponemos de los operadores

o lgicos habituales en lenguajes de prrogramacin como son
es igual, es distintto, menor, menor o igual, mayor, mayor o igual, and (y),, or (o) y noot (no). La
sintaxis se basa en smbolos
s co
omo veremo os a continu uacin y cab
be destacar que hay qu ue prestar
atencin a no confund dir == con = porque implican distintas cosas.

OPERA
ADORES L
GICOS Y
D
DESCRIPCI
N EJEMPLO
R
RELACIONAL
LES

== Es igual a == b

=== Es esstrictamente igual a === b

!= Es distinto
o a != b

!== Es estrrictamente distinto a !== b

Menor, menor
m o igu
ual, mayor, a <=b
<, <=, >, >==
m
mayor o igu
ual

&& Op
perador and
d (y) a && b

|| O
Operador or (o) a || b

! Op
perador not (no) !a
Operadores lgicos y relacionalees principales en JavaScriptt

La sintaxiss coincide co
on la empleada en otros lenguajes de
e programaciin.

Adems de los operadores hab bituales exissten los op peradores ==== que se interpreta como es
estrictamente igual y !== que se interpretta como no es estrictamente igual. Estos operadores
o
resultan un
u poco mss complejos de d comprend ue volveremos a hablar d
der por lo qu de ellos mss adelante.
De momeento tener en e cuenta que si una variable conttiene texto1= 1 y haccemos la com mparacin
texto1 ==== 1 , obtend
dremos falsee, es decir, que no es igual (porque un
u texto no ees igual a un
n nmero).
Sin embarrgo una commparacin como texto == 1 devolver true ya quee esta compaaracin no ess estricta y

aprenderraprogramar.co
om, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

trata de realizar automticamente conversiones para comprobar si se puede establecer una

equivalencia entre los dos valores. En este caso se busca el equivalente numrico del texto y luego se
hace la comparacin, motivo por el cual se obtiene true.

Las expresiones donde se utilizan operadores lgicos y relacionales devuelven un valor booleano, es
decir, verdadero (true) o falso (false). Por ejemplo si a = 7 y b = 5 la expresin a < b devuelve false (es
falsa). Si a = true y b = false la expresin a && b devuelve false (es falsa porque no se cumple que a y b
sean verdaderas). Si a = true y b = false la expresin a || b devuelve true porque uno de los dos
operandos es verdadero. Si a = true la expresin !a devuelve false (el opuesto o contrario).

El operador || se obtiene en la mayora de los teclados pulsando ALT GR + 1, es decir, la tecla ALT GR y
el nmero 1 simultneamente.

Los operadores && y || se llaman operadores en cortocircuito porque si no se cumple la condicin de

un trmino no se evala el resto de la operacin. Por ejemplo: (a == b && c != d && h >= k) tiene tres
evaluaciones: la primera comprueba si la variable a es igual a b. Si no se cumple esta condicin, el
resultado de la expresin es falso y no se evalan las otras dos condiciones posteriores.

En un caso como ( a < b || c != d || h <= k) se evala si a es menor que b. Si se cumple esta condicin el
resultado de la expresin es verdadero y no se evalan las otras dos condiciones posteriores.

El operador ! recomendamos no usarlo hasta que se tenga una cierta destreza en programacin. Una
expresin como (!esVisible) devuelve false si (esVisible == true), o true si (esVisible == false). En general
existen expresiones equivalentes que permiten evitar el uso de este operador cuando se desea.

OPERADOR DE NEGACIN APLICADO SOBRE NMEROS O TEXTO

Si a = true su negacin!a devuelve false. Pero qu ocurre si a es un nmero o un texto? Si a es un
nmero se considera que equivale a false si su valor numrico es 0, o que equivale a true si su valor
numrico es distinto de cero. Seguidamente se aplica la negacin. Por tanto si a = 7, a se considera
equivalente a true y !a es false. Si a = 0, a se considera equivalente a false y !a es true.
Para cadenas de texto, la cadena vaca se considera equivale a false y cualquier otra cadena se
considera que equivale a true. Si texto1 = (cadena vaca) entonces !texto1 vale true.

COMPARACIN DE CADENAS DE TEXTO CON OPERADORES RELACIONALES

Dos cadenas de texto se pueden comparar resultando que se comparan letra a letra por el valor del
equivalente numrico de cada letra. Cada letra tiene un nmero asociado: por ejemplo la a es el
nmero 97, la b el 98, etc.
Si comparamos avellana < sandia obtenemos true.

aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

Sin embargo, los cdigos numricos pueden generar resultados no previstos. Por ejemplo, qu cdigo
numrico es menor, el de la a el de la A? An ms, resulta que todos los cdigos numricos de
maysculas son menores que los de minsculas, con lo cual podemos obtener que Zul < avellano
devuelve true (cosa que a priori nos resultar ciertamente extraa).
Para comparar cadenas en base a un orden alfabtico necesitaremos usar entonces otras tcnicas que
comentaremos ms adelante.

ORDEN DE PRIORIDAD, PRELACIN O PRECEDENCIA

Los operadores lgicos y matemticos tienen un orden de prioridad o precedencia. Este es un esquema
general que indica el orden en que deben evaluarse en la mayora de los lenguajes de programacin:

()
Parntesis

^
Exponenciacin

*,/
Multiplicacin, divisin

+,
Suma, resta

Mod , \ (div)
Resto, Cociente

= , <> , > , < , >= , <=

Igual, distinto, mayor, menor, mayor o igual, menor o igual

No (Not)
No se cumple que

y (And)
Y se cumple que

o (Or)
O se cumple que

Una expresin como A+B == 8 && A-B == 1 siendo A = 3 y B = 5 supondr que se evala primero A+B
que vale 8, luego se evala A-B que vale -2. Luego se evala si se cumple que la primera operacin es
cierta y luego si la segunda tambin es cierta, resultando que no, por lo que la expresin es falsa.

aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

EJEMPLO
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):

<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var a, b, c, d, eTexto; a = 3; b = 5; c = true; d = false; eTexto = '1';
alert ('Valor de verdad para a+b == 8 && a-b ==1 es: ' + (a+b == 8 && a-b ==1));
alert ('Valor de verdad para a+b == 8 && a-b ==-2 es: ' + (a+b == 8 && a-b ==-2));
alert ('Valor de verdad para c == d es: ' + (c==d));
alert ('Valor de verdad para c&&d es: ' + (c&&d));
alert ('Valor de verdad para c||d es: ' + (c||d));
alert ('Valor de verdad para !a es: ' + (!a));
alert ('Valor de verdad para eTexto === 1: ' + (eTexto === 1));
alert ('Valor de verdad para eTexto == 1: ' + (eTexto == 1));
alert ('Valor de verdad para Zapato < avellano es: ' + ('Zapato'<'avellano'));
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.

El resultado esperado es que se muestre lo siguiente (comprubalo):

Valor de verdad para a+b == 8 && a-b ==1 es: false (Aceptar)
Valor de verdad para a+b == 8 && a-b ==-2 es: true (Aceptar)
Valor de verdad para c == d es: false (Aceptar)
Valor de verdad para c&&d es: false (Aceptar)
Valor de verdad para c||d es: true (Aceptar)
Valor de verdad para !a es: false (Aceptar)
Valor de verdad para eTexto === 1: false (Aceptar)
Valor de verdad para eTexto == 1: true (Aceptar)
Valor de verdad para Zapato < avellano es: true (Aceptar)

aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

Importante: recordar que cuando se quieran realizar comparaciones de igualdad hay que usar el
operador == y no el operador =.

EJERCICIO 1

Dadas las variables de tipo entero con valores A = 5, B = 3, C = -12 indicar si la evaluacin de estas
expresiones dara como resultado verdadero o falso:

a) A > 3 i) C / B < A

b) A > C j) C / B == -10

c) A < C k) C / B == -4

d) B < C l) A + B + C == 5

e) B != C m) (A+B == 8) && (A-B == 2)

f) A == 3 n) (A+B == 8) || (A-B == 6)

g) A * B == 15 o) A > 3 && B > 3 && C < 3

h) A * B == -30 p) A > 3 && B >= 3 && C < -3

Crea un script donde declares estas variables, les asignes valores y muestres por pantalla el valor de
verdad que tienen cada una de las expresiones antes indicadas. Coincide lo que se muestra con
pantalla con lo que t esperaras que se mostrara? Puedes comprobar si tus resultados son correctos
consultando en los foros aprenderaprogramar.com.

EJERCICIO 2
Crea un script donde declares dos variables a y b y fuerces a que ambas contengan valor NaN. Ahora
realiza las comparaciones a == b, a === b, a !== a Qu resultados obtienes? A qu crees que se debe
este resultado?

Prxima entrega: CU01118E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Operadoress lgicos y relaccionales JavaSccript. Valores de verdad.

OPERADO
ORES EXTRA EN JAVASCR
RIPT

En JavaSccript disponeemos ademss de la asignacin tracion

nal basada en e = de algun nos operadores menos
habituales como increemento unitaario (++), deccremento unnitario (--), assignacin compuesta de suma (+=)
, asignaci n compuestta de multiplicacin .
n compuetaa de resta (-==) y asignaci

OPEERADORES DESCRIPCIN EJEM

MPLO EQUIV
VALE A

= Asignaci
n a=5

+= S
Suma lo indicado a +=
+ b a=a+b

-= R
Resta lo indicado a -= b a=a-b

Multiplica por
M p lo a *= b a=a*b
*=
indicado

Calcula el mduulo por lo a %=

% b a=a%b
%=
indicado

Inccremento unitario
u ++aa * 2 a=a+1
++ (anterior)
antes de op
perar a*2

Inccremento unitario
u a+++ * 2 a*2
++ (posterior)
(
despus de operar
o a=a+1

Deecremento unitario
u --a * 2 a=a1
-- (anterior)
(
antes de op
perar a*2

Deecremento unitario
u a-- * 2 a*2
-- (p
posterior)
despus de operar
o a=a1
Operadores en JavvaScript

aprenderraprogramar.co
om, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

El operador = es el operador de asignacin y hay que tener bien claro que no sirve para realizar
comparaciones. Para realizar comparaciones ha de usarse == (es igual a) === (es estrictamente igual
a). La asignacin a = b se lee: asigna a a el contenido de b. Si b es una operacin o expresin lgica, a
almacenar el valor numrico resultado de la operacin o el valor booleano resultado de evaluar la
expresin lgica. Por ejemplo a = 3 > 5 implicar que a vale false porque 3 > 5 es falso.

++ y -- son slo vlidos para variables numricas y sirven para incrementar una unidad el valor de la
variable. Dependiendo de dnde se coloquen (antes o despus de la variable) el resultado del clculo
puede diferir debido al momento en que se ejecuta la adicin de la unidad.

Los operadores +=, -= y *= son formas abreviadas de escribir operaciones habituales.

Tener en cuenta que ++, --, +=, -= y *= son expresiones que siempre se aplican sobre variables. Por
ejemplo no es vlido escribir 2++ porque 2 no es una variable. Todas estas operaciones pueden
sustituirse por otra equivalente ms evidente. Muchos programadores prefieren no usar estos
operadores porque hacen menos legible el cdigo. A otros programadores les gusta usarlos porque les
ahorra escribir. Nosotros preferimos no usarlos, pero es cierto que los puedes encontrar cuando tengas
que revisar el cdigo escrito por otra persona.

EJEMPLO
Veamos un ejemplo. Vamos a usar dos pequeas novedades.
Una vez pedido un nmero al usuario usaremos nombreVariable = Number (nombreVariable); para
indicarle a JavaScript que considere la variable como de tipo numrico y no de tipo texto. De esta forma
al usar el operador + se ejecutar la operacin de suma en lugar de la operacin de concatenacin de
cadenas de texto.
Adems usaremos la sentencia document.write('cadena de texto a introducir como HTML en el
documento); para introducir HTML en el documento. Hablaremos de esta sentencia ms adelante, de
momento slo nos interesa saber que sirve para introducir cdigo HTML en el documento.
Fjate cmo en este ejemplo se usan tres scripts cuya ejecucin no est en funcin de la ocurrencia de
un evento como un click de un usuario, sino que se ejecutan automticamente cuando carga la pgina
web, en un determinado orden.

Escribe el siguiente cdigo y gurdalo en un archivo de extensin html:

aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset='utf-8'>

<style type='text/css'>
body {background-color: #FAEBD7; font-family: sans-serif; line-height: 1.3;}
div {border-style: solid; margin: 15px; padding: 10px; float: left;}
</style>
<script type='text/javascript'>
var a = prompt('Introduzca un nmero entero'); var b = prompt('Introduzca otro nmero entero');
a = Number(a) //Si no hacemos esto a es un texto y a+b concatena el texto
b = Number(b)
</script>
</head>
<body>
<div> <h2>Operadores de incremento</h2>
<script type='text/javascript'>
var valorInicial_a = a; document.write('Valores iniciales: a = ' + a + ', b = ' + b + '<br/> <br/>');
aumentar = ++a * b; document.write ('Operador ++ (anterior): ++a * b == ' + aumentar + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a; aumentar = a++ * b;
document.write ('Operador ++ (posterior): a++ * b == ' + aumentar + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a; //Restablecemos el valor que inicialmente tena a
disminuir = --a * b; document.write ('Operador -- (anterior): --a * b == ' + disminuir + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a;
disminuir = a-- * b;
document.write ('Operador -- (posterior): a-- * b == ' + disminuir + '<br/>');
document.write ('(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = valorInicial_a;
</script>
</div>
<div>
<h2>Operadores de asignacin compuestos</h2>
<script type='text/javascript'>
document.write('Valores iniciales: a = ' + a + ', b = ' + b + '<br/> <br/>');
inicio = a;
a += b;
document.write ( 'Asignacin compuesta de suma: a += b equivale a = a + b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a -= b; document.write ( 'Asignacin compuesta de resta: a -= b equivale a = a - b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a *= b;
document.write ( 'Asignacin compuesta de multiplicacin: a *= b equivale a = a * b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a /= b;
document.write ( 'Asignacin compuesta de divisin: a /= b equivale a = a / b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
a = inicio; a %= b;
document.write ( 'Asignacin compuesta de mdulo: a %= b equivale a = a % b<br/>');
document.write ( '(Ahora el valor de a es: ' + a + ')<br/><br/>');
</script> </div> </body> </html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad.

aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.

El resultado esperado es que se muestre lo siguiente (comprubalo introduciendo 4 y 2 como

nmeros):

Operadores de incremento

Valores iniciales: a = 4, b = 2
Operador ++ (anterior): ++a * b == 10
(Ahora el valor de a es: 5)
Operador ++ (posterior): a++ * b == 8
(Ahora el valor de a es: 5)
Operador -- (anterior): --a * b == 6
(Ahora el valor de a es: 3)
Operador -- (posterior): a-- * b == 8
(Ahora el valor de a es: 3)

Operadores de asignacin compuestos

Valores iniciales: a = 4, b = 2
Asignacin compuesta de suma: a += b equivale a = a + b
(Ahora el valor de a es: 6)
Asignacin compuesta de resta: a -= b equivale a = a - b
(Ahora el valor de a es: 2)
Asignacin compuesta de multiplicacin: a *= b equivale a = a * b
(Ahora el valor de a es: 8)
Asignacin compuesta de divisin: a /= b equivale a = a / b
(Ahora el valor de a es: 2)
Asignacin compuesta de mdulo: a %= b equivale a = a % b
(Ahora el valor de a es: 0)

EJERCICIO 1
a) Describe paso a paso lo que hace el cdigo anterior, indicando en qu orden se carga cada cosa
(instrucciones HTML, instrucciones CSS, instrucciones JavaScript). Por ejemplo, se carga el html
<h2>Operadores de incremento</h2> en el instante en que solicitamos al navegador que muestre la
pgina web? En qu orden se ejecutan los scripts?
b) Introduce errores en los scripts de modo que estos no se ejecuten Qu se visualiza en la pgina
web?
c) Introduce 0 y 0 como nmeros en el ejemplo anterior. Cuntas veces el resultado de las operaciones
es NaN? Por qu?
Para comprobar tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01119E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
If else, If elsse if JavaScript.. Condicionaless estructuras de
e decisin.

ESTRUCTU
URA O ESQU
UEMA DE DECISIN EN JA
AVASCRIPT. IF ELSE , IF ELSE
E IF.

La instrucccin if else funciona de

d forma anloga a como o lo hace en otros lenguajes de proggramacin.
Permite controlar
c qu procesos tienen lugar, tpicamente en funcin del
d valor de una o variass variables,
de un valoor de clculo o, o de las decisiones del usuario. La sintaxis
o o booleano s a em
mplear es:

if (condicin)) {
instrucciiones
} else {
instrucciiones
}

Esquemtticamente en
n forma de diagrama
d de flujo:

Condicin

S No (Sino)

Instrucci
n 1 Instrruccin A
Instrucci
n 2 Instrruccin B



Instrucci
n n Instrruccin Z

La clusula else (no obligatoria)

o s
sirve para in
ndicar instrucciones a reealizar en caso de no cu umplirse la
condicin
n. JavaScript admite escrribir un else } El else vacco se interpreta como
e y dejarlo vaaco: else { }.
que conteemplamos ele caso pero no hacemos nada en respuesta
r a l. Un else vvaco no tiene ningn
e principio carece de uttilidad, no ob
efecto y en bstante a veces es usado o para remarcar que no se ejecuta
ninguna accin
a cuand
do se alcanzaa esa situaci
n.

Cuando se quieren evvaluar distintas condicio ones una dettrs de otra,, se usa la expresin else if { }. En
este caso no se admitte elseif todo junto com mo en otros lenguajes. Dee este modo o, la evaluaciin que se
produce es: si se cumple la prim mera condiccin, se ejeccutan ciertas instruccionnes; si no se cumple,
comprobaamos la segu unda, terceraa, cuarta n condicin. Si mple ninguna de las condiciones, se
S no se cum
ejecuta ell else final en
n caso de exiistir.

aprenderraprogramar.co
om, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.

//if sencillo
if ( admitido == true) { alert ("Se ha admitido el valor"); }

//if else sencillo

if ( admitido == true) {
alert ("Se ha admitido el valor");
} else {
alert ("No se ha admitido el valor");
}
//if con else if y clusula final else
if (DesplazamientoX == 0 && DesplazamientoY == 1) {
alert ("Se procede a bajar el personaje 1 posicin");
}
else if (DesplazamientoX == 1 && DesplazamientoY == 0) {
alert ("Se procede a mover el personaje 1 posicin a la derecha"); }

else if (DesplazamientoX == -1 && DesplazamientoY == 0) {

alert ("Se procede a mover el personaje 1 posicin a la izquierda");
}
else {
alert ("Los valores no son vlidos");
}

La expresin dentro de parntesis es una expresin booleana. Llamamos expresin booleana a una
expresin que solo tiene dos valores posibles: verdadero (true) o falso (false).

Es importante distinguir la comparacin que realizamos con el operador == de la asignacin que

realizamos con el operador =. Confundirlos nos generar errores que harn que el cdigo JavaScript no se
ejecute o problemas de lgica en el cdigo. Recuerda que siempre que tengas que comparar con un
operador, has de usar == === en lugar de =.

La condicin a evaluar puede ser un simple nombre de variable. Por ejemplo:

if (antiop) {alert ('nombre se evalu a verdadero');}

En este caso se comprueba el valor booleano (o equivalente booleano) de antiop. Si nombre es de tipo
String y es la cadena vaca, su valor equivalente es falso y no se ejecutarn las instrucciones dentro del
if. Si antiop es un nmero se considera que equivale a false si su valor numrico es 0, o que equivale a
true si su valor numrico es distinto de cero (incluido NaN). Para cadenas de texto, la cadena vaca se
considera equivale a false y cualquier otra cadena se considera que equivale a true.
Se admite omitir las llaves despus de la condicin si solo se va a incluir una sentencia a ejecutar. Por
ejemplo: if (nombre) alert ('nombre se evalu a verdadero');
Sin embargo, recomendamos incluir las llaves siempre despus de un if porque hace el cdigo ms fcil
de seguir y ms claro.

aprenderaprogramar.com, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.

EJEMPLO
Escribe el siguiente cdigo y gurdalo en un archivo de extensin html (puedes cambiar la ruta de la
imagen si lo deseas):

<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var nombre, edad;
nombre = prompt ('Por favor introduce tu nombre:');
if (nombre =="") { alert ('No has introducido ningn nombre'); }
else { alert ('Hola '+nombre + '. Bienvenido a esta pgina web.'); }
edad = prompt ('Cul es tu edad?');
edad = Number(edad);
if (edad >3 && edad < 10) {alert ('Eres un nio.');}
else if (edad>=10 && edad <18) {alert ('Eres un jovencito.');}
else if (edad >=18 && edad < 90) {alert ('Eres mayor de edad.');}
else if (edad >=90) { alert ('Tienes muchos aos encima...');}
else {alert ('No has introducido un valor vlido de edad ( '+edad+')');}
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo introduciendo Juan y 96 como
entradas de usuario):

Por favor introduce tu nombre: Juan (Aceptar)

Hola Juan. Bienvenido a esta pgina web. (Aceptar)
Cul es tu edad? : 96 (Aceptar)
Tienes muchos aos encima... (Aceptar)

aprenderaprogramar.com, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.

EJERCICIO

Crea un script que pida al usuario el dimetro de una rueda y su grosor (en metros) y a travs de
condicionales if realice las siguientes operaciones:

a) Si el dimetro es superior a 1.4 debe mostrarse el mensaje La rueda es para un vehculo grande. Si
es menor o igual a 1.4 pero mayor que 0.8 debe mostrarse el mensaje La rueda es para un vehculo
mediano. Si no se cumplen ninguna de las condiciones anteriores debe mostrarse por pantalla el
mensaje La rueda es para un vehculo pequeo.

b) Si el dimetro es superior a 1.4 con un grosor inferior a 0.4, si el dimetro es menor o igual a 1.4
pero mayor que 0.8, con un grosor inferior a 0.25, deber mostrarse el mensaje El grosor para esta
rueda es inferior al recomendado

Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01120E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin
n entre distintaas alternativas..

CONDICIO
ONAL DE SELLECCIN SWITCH EN JAV
VASCRIPT. EJEMPLO DE APLICACIN
A .

La instrucccin switch es una form

ma de expresin de un an nidamiento mltiple
m de instruccioness if ... else.
Su uso no puede co onsiderarse, por tanto, estrictament
e te necesario o, puesto qu ue siempre podr ser
sustituidaa por el uso de
d if. No obsttante, a vecees resulta til al introduccir eficiencia y mayor clarridad en el
cdigo.

La sintaxiis ser (exprresin ser normalmentte una variaable cuyo co ontenido queremos evaluar, pero
puede serr una operaccin matemtica, una exp
presin booleana, etc.):

switch (expresin
n) {

case valor1:
es;
instruccione
break;

case valor2:
es;
instruccione
break;
.
.
.
default:
sentencias;
break;

switch (expresin
n) {

case valor1:
case valor2:
case valor3:
es;
instruccione
break;

case valor4:
es;
instruccione
break;
.
.
.
default:
sentencias;
break;

aprenderraprogramar.co
om, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

Esquemticamente a modo de diagrama de flujo:

Inicio

E
Caso, =1 Caso, =2 Caso, =3 Caso, =4 Caso, =5 Caso,
SiNo

Instruccin 1 Instruccin 5 Instruccin 7

Instruccin 11
Instruccin 2 Instruccin 6 Instruccin 8

Instruccin 3 Instruccin 9
Instruccin 4 Instruccin 10

default y Fin

break es opcional (pero en general recomendable) y provoca que una vez encontrada una coincidencia
termine la evaluacin de casos. Si no se incluye, se evaluaran el resto de casos (ejecutndose si fueran
ciertos). De no incluirse break, podra producirse que se ejecuten dos o ms casos.

La clusula default es opcional y representa las instrucciones que se ejecutarn en caso de que no se
verifique ninguno de los casos evaluados. El ltimo break dentro de un switch (en default si existe esta
clusula, o en el ltimo caso evaluado si no existe default) tambin es opcional, pero lo incluiremos
siempre para ser metdicos.

switch realiza las comparaciones usando el operador === (igual estricto). Se permite evaluar tanto
nmeros como cadenas de texto o valores booleanos. Switch solo permite evaluar valores concretos de
la expresin: no permite evaluar intervalos (pertenencia de la expresin a un intervalo o rango) ni
expresiones compuestas. Cdigo de ejemplo:

//Ejemplo de uso switch JavaScript aprenderaprogramar.com

Function mostrarMensaje1() {
switch (mes) {
case 1:
alert ("El mes es enero");
break;
case 2: alert ("El mes es febrero"); break;
case 10: alert ("El mes es octubre"); break;
default: alert ("El mes no es enero, febrero ni octubre"); break;
}
}

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

En algunos casos escribimos varias instrucciones en una lnea y en otros una sola instruccin por lnea.
Ambas posibilidades son vlidas.

El anterior cdigo usa valores numricos. Tambin se admiten situaciones como switch (edad+1>18)
donde la expresin devuelve un booleano, o case 'armario': alert ("Ha introducido armario"); break;
donde se evala la igualdad con un texto.

EJEMPLO
Escribe el siguiente cdigo y gurdalo en un archivo de extensin html (puedes cambiar la ruta de la
imagen si lo deseas):

<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var edad;
edad = prompt ('Por favor introduce edad:');
if (edad =="") { alert ('No has introducido edad'); }
edad = Number(edad);
switch (edad) {
case 0: alert ("Acaba de nacer hace poco. No ha cumplido el ao"); break;
case 18: alert ("Est justo en la mayora de edad"); break;
case 65: alert ("Est en la edad de jubilacin"); break;
default: alert ("La edad no es crtica"); break;
}
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="color: #D2691E;">Aqu otro prrafo de texto. JavaScript es un
lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo introduciendo 33 como entrada del
usuario):
Por favor introduce edad: 33 (Aceptar)
La edad no es crtica (Aceptar)

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

EJERCICIO

Considera ests desarrollando un script donde trabajas con tipos de motor (suponemos que se trata del
tipo de motor de una bomba para mover fluidos). Crea una funcin denominada dimeTipoMotor()
donde pidas el tipo de motor al usuario (indicando que los valores posibles son 1, 2, 3, 4) y a travs de
un condicional switch hagas lo siguiente:

a) Si el tipo de motor es 0, mostrar un mensaje indicando No hay establecido un valor definido

para el tipo de bomba.

b) Si el tipo de motor es 1, mostrar un mensaje indicando La bomba es una bomba de agua.

c) Si el tipo de motor es 2, mostrar un mensaje indicando La bomba es una bomba de gasolina.

d) Si el tipo de motor es 3, mostrar un mensaje indicando La bomba es una bomba de hormign.

e) Si el tipo de motor es 4,mostrar un mensaje indicando La bomba es una bomba de pasta

alimenticia.

f) Si no se cumple ninguno de los valores anteriores mostrar el mensaje No existe un valor vlido
para tipo de bomba.

Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01121E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin
n entre distintaas alternativas..

ARRAYS JAVASCRIPT (ARREGLOS)).

Al igual que en la maayor parte dee los lenguajjes de progrramacin, en

n JavaScript podemos traabajar con
arrays (taambin llamados arregloos, vectores o matrices)). Los arrays son de gran importanccia ya que
permiten organizar seeries de dato
os que compaarten el mism mo nombre pero
p se diferrencian por un
u ndice.

DECLARACIN E INICIIALIZACIN DE ARRAYS

La declarracin de un
u array see hace de misma form
ma que se declara cu
ualquier varriable: var
nombreDelArray;

El array adquiere conndicin de taal cuando la variable se inicializa

i con
n forma de aarray, bien co
omo array
con un coontenido inicial o bien como array vacco:

var pais;
pais = ['M
Mexico', 'Espaaa', 'Argentiina', 'Chile', 'Colombia',
' 'Venezuela', 'Per', 'Costaa Rica'];

O podemo
os hacerlo to
odo en una sola
s lnea:

var pais = ['Mexico', 'EEspaa', 'Arggentina', 'Chile', 'Colombiia', 'Venezueela', 'Per', 'C
Costa Rica'];

En este ejemplo
e decimos que hemos declarrado un arraay de 8 elementos. Cad da elementoo tiene un
ndice, coomenzando los ndices por p el nmeero 0. Por taanto los 8 elementos
e del array antterior son:
pais[0], paais[1], pais[2
2], pais[3], paais[4], pais[5], pais[6] y pais[7].
p

Tambin podemos
p inicializar un array vaco dee dos formass distintas:

var fruta = [];

var fruta = new Array(();

Ambas exxpresiones tienen

t el mismo efecto: crean un arraya vaco. En este caso se entiende que se
aadirn contenidos a posteriori. Por ejemplo
o fruta[3] = 'm
manzana';

ARRAYS CON
C ELEMEN
NTOS SIN DEEFINIR

Podemos dar valor a un elemento de un arraay sin que lo os anterioress elementos estn definidos como
hemos heecho en el ejjemplo, declarando el elemento de ndice
3 sin haber
h do los ndice
definid es 0, 1 y 2.
Los elemeentos no deffinidos tomaan valor unddefined. En este ejemplo fruta[0] no ha sido de efinido por
lo que si intentamos invocarlo su valor
v es undefined.

Para que JavaScript comprenda

c que una varriable es un array hay que
q indicrseelo explcitamente. Es
vlido: var pais = []; paais[0] = 'Mexxico';

aprenderraprogramar.co
om, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

Sin embargo no es vlido: var pais; pais[0] = 'Mexico'; Por qu? Porque en este cdigo no hemos
declarado explcitamente que pais sea un array. Si no lo hemos declarado, no podemos empezar a usar
ndices asociados a la variable como si se tratara de un array. Si lo hacemos se entiende como un error
en el cdigo, lo que dar lugar a que JavaScript no se ejecute.

Un array puede inicializarse dejando ciertos ndices sin un contenido definido. Para ello, se deja un
espacio separado por comas como en este ejemplo:

var ciudad = ["Buenos Aires", , "Madrid"];

Esta declaracin supone que el array tiene 3 elementos. Ciudad[0] que tiene valor Buenos Aires,
ciudad[1] que tiene valor undefined, y ciudad [2] que tiene valor Madrid.

var capital = [ , 'Mexico D.F.', , 'Santiago'];

Esta declaracin supone que el array capital tiene 4 elementos que son ciudad[0] con valor undefined,
ciudad[1] con valor Mxico D.F., ciudad[2] con valor undefined y ciuedad[3] con valor Santiago.

Una coma final no genera un nuevo elemento. Por ejemplo:

var capital = [ , 'Mexico D.F.', , 'Santiago', ];

En este caso la coma final es ignorada y el array sigue teniendo 4 elementos. Si queremos definir el
array con un quinto elemento vaco se recomienda hacerlo as:

var capital = [ , 'Mexico D.F.', , 'Santiago', undefined];

Tambin sera posible hacerlo dejando una coma final libre pero esto es menos recomendable y en
algunos navegadores puede dar lugar a errores:

var capital = [ , 'Mexico D.F.', , 'Santiago', ,];

ACCESO A NDICES NO EXISTENTES

En otros lenguajes de programacin, intentar acceder a un ndice de array inexistente devuelve un

error, pero en JavaScript no es as. Si escribimos pais[40] cuando slo hemos definido hasta el ndice 7,
el resultado es que pais[40] devuelve undefined. A diferencia de en otros lenguajes, los arrays en
JavaScript no tienen un nmero fijo de elementos, sino que el nmero de elementos del array se ajusta
dinmicamente segn las necesidades.

USO DE LOS ARRAYS

Los arrays son de gran utilidad para automatizar los clculos y procesos, por lo que siempre algo pueda
expresarse con un nombre seguido de un ndice, ser preferible usar un array a usar variables
independientes.

Los arrays por defecto siempre empiezan por el ndice 0, pero en determinadas ocasiones algunos
programadores prescinden de ese ndice. Por ejemplo var mes = []; mes[0] = undefined; mes[1] =
'enero'; mes[2]='febrero'; mes[3]='marzo'; mes[4] = 'abril'; mes[5]='mayo'; mes[6] = 'junio';

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

mes[7]='julio'; mes[8]='agosto'; mes[9]='septiembre'; mes[10]='octubre'; mes[11]='noviembre';

mes[12]='diciembre';

Hemos definido mes[0] como undefined. Por qu? Porque en general es preferible dejar constancia de
que si mes[0] tiene valor undefined es porque el programador ha decidido que sea as, de esta manera
no hay duda respecto a que pueda ser un error o un olvido.

Tambin sera posible definir doce variables como mes1, mes2, mes3, mes4, mes5, mes6, mes7, mes8,
mes9, mes10, mes11, mes12. Sin embargo esto es algo que desde el punto de vista de la programacin
es en general indeseable, ya que estas doce variables funcionan como variables que no tienen relacin
entre s. Por tanto cuando tengamos que recorrer los meses no podremos hacerlo de forma
automatizada usando ndices, ya que aqu no existen ndices (aunque el nombre de la variable lleve un
nmero eso no significa que ese nmero sea un ndice).

TIPADO DE LOS ARRAYS

En otros lenguajes de programacin un array contiene un tipo de datos y se dice que el array es de ese
tipo. Por ejemplo un array puede ser un array de enteros, o un array de cadenas de texto. Pero no
pueden existir arrays que contengan indistintamente elementos de distinto tipo. Esto s es posible en
JavaScript, y por ello se dice que los arrays en JavaScript no tienen tipo. Por ejemplo se admite algo
como esto: var datos = ['Fro', 33, false, 'nube', -11.22, true, 3.33, 'variado'];

En este array el elemento de ndice cero es de tipo texto, el de ndice 1 es un valor numrico, el
elemento de ndice tres es un valor booleano, etc.

Normalmente los arrays contendrn elementos de un tipo, por ejemplo valores numricos, pero en
ocasiones nos interesar que contengan elementos de distintos tipos.

JavaScript admite que los elementos de un array sean elementos de naturaleza compleja (objetos), o
incluso que un elemento de un array sea otro array.

PROPIEDAD LENGTH DE LOS ARRAYS

La propiedad length de un array indica el nmero mximo de elementos en el array de acuerdo con el
ndice mximo existente (independientemente de que los elementos del array tengan contenido o no).
Por ejemplo si definimos var oficina = []; oficina[25] = 'Oficial Jos Vargas Corononado; la propiedad
oficina.length devuelve 26, nmero de elementos para el array (de 1 a 25 ms el correspondiente al 0).

MS SOBRE LOS ARRAYS

Los arrays son elementos de gran importancia dentro de JavaScript y an queda mucho que estudiar
sobre ellos. De momento el conocimiento adquirido nos sirve para seguir avanzando, pero ms
adelante volveremos a explicar ms cosas relacionadas con los arrays.

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

EJEMPLO
Escribe el siguiente cdigo y gurdalo en un archivo de extensin html (puedes cambiar la ruta de la
imagen si lo deseas):

<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<script type="text/javascript">
function mostrarMensaje1() {
var mes; mes =[]; mes[0] = undefined; mes[1] = 'enero'; mes[2]='febrero'; mes[3]='marzo'; mes[4] = 'abril'; mes[5]='mayo';
mes[6] = 'junio'; mes[7]='julio'; mes[8]='agosto'; mes[9]='septiembre'; mes[10]='octubre'; mes[11]='noviembre';
mes[12]='diciembre';
var pais = ['Mexico', 'Espaa', 'Argentina', 'Chile', 'Colombia', 'Venezuela', 'Per', 'Costa Rica'];
var msg, msg2; msg = 'El pas de ndice 2 es: ' + pais[2] + '\n\n';
var datos = ['Fro', 33, false, 'nube', -11.22, true, 3.33, 'variado'];
msg = msg + 'En el indice 1 de datos tenemos: ' + datos[1] + ' (numrico), p.ej. multiplica por 2: ' + (datos[1]*2) + '\n\n';
msg = msg + 'En el indice 2 de datos tenemos: ' + datos[2] + ' y es booleano\n\n';
msg = msg + 'En el ndice 3 de datos tenemos: ' + datos[3] + ' y es un texto \n\n';
msg = msg + 'En el ndice 40 de datos tenemos: ' + datos[40] + '\n\n';
var fruta = [];
msg = msg + 'En el ndice 0 de fruta tenemos: ' + fruta[0] + ' y en el ndice 30 '+ fruta[30] + '\n\n';
fruta[1] = 'pera'; fruta[2] = undefined; fruta[30] = 'manzana';
msg = msg + 'En el ndice 0 de fruta tenemos: ' + fruta[0] + ' y en el ndice 30 '+ fruta[30] + '\n\n';
alert (msg);
msg2 = 'Mostramos el array pas: ' + pais + '\n\n';
msg2 = msg2 + 'Mostramos el array fruta: ' + fruta + '\n\n';
msg2 = msg2 + 'Mostramos el array datos: ' + datos + '\n\n';
msg2 = msg2 + 'Mostramos el array mes: ' + mes + '\n\n';
msg2 = msg2 + 'Intentamos sumar o concatenar arrays: ' + (pais + fruta) +'\n\n';
msg2 = msg2 + 'Valor length en el array pais es: ' + (pais.length) + ' y en el array fruta es ' + fruta.length +'\n\n';
alert (msg2);
var ejemplo = new Array(); alert('Contenido de ejemplo: '+ ejemplo); ejemplo [0]= 1; ejemplo [2]= 44;
alert('Contenido de ejemplo: '+ ejemplo);
}
</script>
</head>
<body> <div> <p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de
texto">
<p onclick ="alert('Alerta JavaScript')" style="color: #D2691E;">Aqu otro prrafo de texto. JavaScript es un lenguaje
utilizado para dotar de efectos dinmicos a las pginas web. </p> </div> </body> </html>

Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
El pas de ndice 2 es: Argentina
En el indice 1 de datos tenemos: 33 (numrico), p.ej. multiplica por 2: 66
En el indice 2 de datos tenemos: false y es booleano
En el ndice 3 de datos tenemos: nube y es un texto
En el ndice 40 de datos tenemos: undefined
En el ndice 0 de fruta tenemos: undefined y en el ndice 30 undefined
En el ndice 0 de fruta tenemos: undefined y en el ndice 30 manzana

aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.

Mostramos el array pas: Mexico,Espaa,Argentina,Chile,Colombia,Venezuela,Per,Costa Rica

Mostramos el array fruta: ,pera,,,,,,,,,,,,,,,,,,,,,,,,,,,,,manzana
Mostramos el array datos: Fro,33,false,nube,-11.22,true,3.33,variado
Mostramos el array mes:
,enero,febrero,marzo,abril,mayo,junio,julio,agosto,septiembre,octubre,noviembre,diciembre
Intentamos sumar o concatenar arrays: Mexico,Espaa,Argentina,Chile,Colombia,Venezuela,Per,Costa
Rica,pera,,,,,,,,,,,,,,,,,,,,,,,,,,,,,manzana
Valor length en el array pais es: 8 y en el array fruta es 31
Contenido de ejemplo:
Contenido de ejemplo: 1,,44

Fjate en las siguientes cuestiones: un array en JavaScript puede contener elementos de distintos tipos.
El contenido de un elemento no definido es undefined. Un array puede tener elementos intermedios no
definidos. Cuando tratamos de mostrar por pantalla un array, se produce una conversin automtica a
texto. Esto no significa que el array se un texto ni un tipo String, sino simplemente que el intrprete
hace una conversin automtica para tratar de ofrecer un resultado. En el caso de elementos no
definidos, al mostrarse el array se muestran espacios separados por comas.

EJERCICIO

Crea un script donde declares un array vaco denominado nombres. Pide al usuario tres nombres
usando la sentencia prompt de JavaScript y almacena esos nombres como elementos 0, 1 y 2 del array.
A continuacin muestra el contenido del array por pantalla.

Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01122E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invo
ocacin. Parm
metros.

FUNCIONES JAVASCR
RIPT

Una funcin JavaScript es un fraagmento dee cdigo que e puede serr invocado ppara realizar tareas o
devolver un resultado
o. Si has trabbajado con otros
o lenguaajes de programacin el concepto tee resultar
familiar. Las
L funcioness JavaScript son n otros lenguajes se deno
s similaress a lo que en omina proceddimientos,
funcioness o mtodos.

Programar, usando un n smil, podeemos verlo como realizarr un viaje poor carretera. Cuando reallizamos un
viaje, aparte de la neccesidad de definir
d el objetivo y estud d viaje (esttructura del programa)
diar la ruta del
podemos decir que: EEn general, pero
p sobre toodo para viaje
es complicaddos, convienee dividir el problema en
subapartaados.

La estrateegia del divide y venccers... Es una u de las estrategias ms usadas en program macin de
ordenado ores y, una vez ms, abordaremoss aqu el usso de esta filosofa com mpaera de e viaje del
programador. El conceepto de funccin aplicado o a la programacin JavaScript es mu uy similar al aplicable
a a
distintas facetas
f de laa vida: un esscritor dividee su curso en captulos y apndices. Un profeso or divide el
contenidoo de la asignaatura en temmas. Un ingeniero divide el proyecto en partes co omo Memorria, Anejos,
Pliego de Condicioness, Presupuessto y Planos.. En una fb brica, organizzan el trabajjo dividiendo
o las reas
funcionalees en recepcin de materrias primas, rea
de pre-p
proceso, reaa de procesoo, rea de post-proceso
y rea de carga y desp
pacho de prod ducto termin nado.

De cara a la programaacin JavaScrript, usaremo e funciones por ser una estrategia

os la divisin del cdigo en
efectiva para
p resolverr problemas complejos. Cada
C funcinn ser llamadda para realizzar su comettido en un
orden estaablecido.

Adems una
u funcin ses puede llammar tantas veeces como se e desee, lo cu
ual evita tener que repettir cdigo y
por otro laado permite que cuandoo haya que reealizar una co
orreccin niicamente ten ngamos que hacerla en
la funcin concreta qu
ue se ve afecttada.

ones pueden
Las funcio n recibir info
ormacin parra realizar suu cometido, por ejemplo o function su
uma (a, b)
recibe doss elementos de informaccin: a y b, o no recibirla por realizar un proceso q
que no necesita recibir
informaci mplo function dibujarCircu
n, por ejem ulo().

Otra caraccterstica interesante de las funcionees es que perrmite abstraeer los problemas. Suponggamos que
necesitammos una funccin que devvuelva para un importe de una com mpra sin imp puestos el im
mporte con
impuestoss, y que a su vez el porrcentaje de impuestos a aplicar dep pende del tip po de produ ucto. Si un
compaerro nos facilita la funci n function obtenerImp porteConImppuestos (imp porteSinImpu uestos) no
tenemos que preocup parnos del cdigo de la funcin.
f Unicamente sab bemos que invocando a la funcin
obtendrem mos el importe con impu uestos. De essta forma, po
odemos utilizzar funcioness que han cre
eado otros
programadores o funciones dispo onibles en lib
breras sin necesidad de conocer el cdigo de laas mismas.
Decimos queq las funcio q facilitan la abstracci
ones son cajas negras que n porque no o necesitamos ver en su
interior, slo nos interresan sus resultados.

aprenderraprogramar.co
om, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.

De hecho, es posible que un programador use un cdigo para una funcin function
obtenerImporteConImpuestos (importeSinImpuestos) y otro programador use otro cdigo para esa
misma funcin sin que esto suponga ningn problema. Lo importante es que la funcin realice su
cometido, no cmo lo realice ya que es frecuente que haya distintas maneras de hacer algo (aunque
ciertamente hacer las cosas de diferente manera no debe significar que unas veces se hagan bien y otras
mal: siempre deberan hacerse las cosas bien).

Una funcin en general debe tener un nombre descriptivo de cul es su cometido y tener un cometido
claro y nico. No deben mezclarse tareas que no tengan relacin entre s dentro de una funcin.

FUNCIONES CON PARMETROS Y SIN PARMETROS

Una funcin JavaScript puede requerir ser llamada pasndole cierta informacin o no requerir
informacin.

Definicin de una funcin sin parmetros (no requiere informacin):

//Comentario descriptivo de qu hace la funcin

function nombreDeLaFuncin () {
//Cdigo de la funcin
}

Definicin de una funcin con parmetros (requiere informacin):

//Comentario descriptivo de qu hace la funcin

function nombreDeLaFuncin (param1, param2, , paramN) {
//Cdigo de la funcin
}

Una funcin puede recibir tantos parmetros como se deseen, aunque no sera demasiado razonable que
una funcin reciba ms de cuatro o cinco parmetros.

Los parmetros que se le pasan a la funcin pueden ser:

a) Valores simples a los que se denomina literales: por ejemplo 554, true aldea.

b) Variables que contienen un nmero, un texto o un valor booleano.

c) Objetos de naturaleza compleja, como arrays y otros tipos de objetos que veremos ms adelante.

Cuando una funcin recibe un parmetro dicho parmetro funciona como si se tratara de una variable
disponible para la funcin inicializada con el valor que se le pasa a la funcin.

Veamos un ejemplo:

aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.

function mostrarImporteConImpuestos(importeSinImpuestos) {
var importeConImpuestos; importeConImpuestos = importeSinImpuestos * 1.21;
msg = 'Importe antes de impuestos: '+ importeSinImpuestos + '\n\n';
alert(msg + 'Importe con impuestos: '+ importeConImpuestos + '\n\n');
}

Aqu vemos dos cosas de inters: el parmetro que recibe la funcin no tiene un tipo de datos explcito. El
tipo de datos es inferido por el intrprete JavaScript.

Por otro lado, el parmetro est disponible dentro de la funcin con el valor con el que haya sido
invocado. Por ejemplo onclick="mostrarImporteConImpuestos(100)" har que importeSinImpuestos valga
100 porque ese es el valor con el que se invoca.

Cuando una funcin tiene varios parmetros, se debe invocar escribiendo su nombre seguido de los
parmetros en el orden adecuado.

FUNCIONES QUE DEVUELVEN UN RESULTADO. RETURN.

Una funcin JavaScript puede devolver un resultado si se introduce la sentencia return resultado; donde
resultado es aquello que queremos devolver (normalmente una variable que contiene un valor numrico,
de texto o booleano, pero tambin podran ser objetos con mayor complejidad como un array).

Una vez se llega a la sentencia return se produce la devolucin del resultado y se interrumpe la ejecucin
de la funcin. Por ello la sentencia return ser normalmente la ltima instruccin dentro de una funcin.

Definicin de una funcin sin parmetros que devuelve un resultado:

//Comentario descriptivo de qu hace la funcin

function nombreDeLaFuncin () {
//Cdigo de la funcin
return resultado;
}

Definicin de una funcin con parmetros que devuelve un resultado:

//Comentario descriptivo de qu hace la funcin

function nombreDeLaFuncin (param1, param2, , paramN) {
//Cdigo de la funcin
return resultado;
}

Una funcin slo devolver un resultado y normalmente slo tendr una sentencia return, aunque si hay
sentencias condicionales como if, puede haber varias sentencias return: una sentencia return para cada
sentencia condicional.

Si adems del resultado la funcin incluye cdigo que implique acciones como mostrar un mensaje por
pantalla, se ejecutar el cdigo a la vez que se devuelve el resultado.

aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.

Veamos un ejemplo:

function obtenerImporteConImpuestos(importeSinImpuestos) {
var importeConImpuestos; importeConImpuestos = importeSinImpuestos * 1.21;
return importeConImpuestos;
}

Un ejemplo de uso de esta funcin sera:

onclick="alert('Calculado lo siguiente para producto de precio 100: importe con impuestos vale ' +
obtenerImporteConImpuestos(100));"

Aqu vemos cmo al invocar la funcin sta devuelve un resultado que se coloca all donde se encuentra
la llamada a la funcin (en este ejemplo el resultado se coloca dentro de una sentencia para mostrar un
mensaje por pantalla. Aqu el resultado es numrico, pero el intrprete lo transformar
automticamente en texto para mostrarlo por pantalla).

Tambin ser frecuente almacenar el resultado en una variable, por ejemplo: var importeConImp =
obtenerImporteConImpuestos(100);

El resultado que devuelve una funcin puede ser:

a) Un valor simple (literal): por ejemplo 554, true aldea.

b) Una variable que contienen un nmero, un texto o un valor booleano.

c) Un objeto de naturaleza compleja, como arrays y otros tipos de objetos que veremos ms adelante.

El resultado que devuelve una funcin no tiene un tipo de datos explcito. El tipo de datos es inferido
por el intrprete JavaScript.

LLAMADAS A FUNCIONES DESDE OTRAS FUNCIONES

Una funcin puede llamar a otra funcin simplemente escribiendo su nombre y los parmetros que sean
necesarios. Ejemplo:

function mostrarImporteConImpuestos2(importeSinImpuestos) {
var msg; msg = 'Ejemplo. Importe antes de impuestos: '+ importeSinImpuestos + '\n\n';
alert(msg + 'Importe con impuestos: '+ obtenerImporteConImpuestos(importeSinImpuestos) + '\n\n');
}

En esta funcin en vez de realizarse el clculo del importe con impuestos, se invoca otra funcin que es la
que se encarga de realizar el clculo y devolver el valor correspondiente.

aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.

PASO DE PARMETROS A FUNCIONES

Hay dos formas comunes de pasar parmetros a funciones en programacin: por valor, que implica que si
se pasa una variable sus cambios slo son conocidos dentro de la funcin, o por variable, que implica que
si se pasa una variable sta puede ser modificada por la funcin y sus cambios ser conocidos fuera de la
funcin. JavaScript trabaja con paso de parmetros por valor, lo que implica que la variable pasada como
parmetro funciona como una variable local a la funcin: si el parmetro sufre cambios, estos cambios
slo son conocidos dentro de la funcin. La variable verdadera no puede ser modificada.

PASO DE UN NMERO DE PARMETROS INCORRECTO

Si se pasan ms parmetros de los necesarios, JavaScript ignorar los parmetros sobrantes. Si se pasan
menos parmetros de los necesarios, JavaScript asignar valor undefined a los parmetros de los que no
se recibe informacin y se ejecutar sin que surja ningn mensaje de error (aparte de los posibles
resultados extraos que esto pudiera ocasionar).

EJERCICIOS

1. Crea un script donde declares una funcin obtenerImporteConImpuestos que reciba dos parmetros:
el importe sin impuestos (numrico) y el tipo de producto (numrico entero). La funcin debe mostrar
por pantalla el importe sin impuestos ms el 21% si el tipo de producto es 1, el importe sin impuestos
ms el 10% si el tipo de producto es 2, el importe sin impuestos ms el 5% si el tipo de producto es 3.

Ejemplo: obtenerImporteConImpuestos(100, 1) debe mostrar: Para un importe sin impuestos de 100 y

tipo de producto 1 el resultado de importe con impuestos es 121. obtenerImporteConImpuestos(100,
2) debe mostrar: Para un importe sin impuestos de 100 y tipo de producto 2 el resultado de importe
con impuestos es 110.

2. Crea un script donde declares una funcin obtenerImporteConImpuestos2 que reciba un parmetro:
el importe sin impuestos (numrico). La funcin debe devolver un array con valor undefined para el
ndice 0, el importe sin impuestos ms el 21% para el ndice 1, el importe sin impuestos ms el 10% para
el ndice 2, el importe sin impuestos ms el 5% para el ndice 3. Invoca la funcin haciendo que se
muestre el contenido del array por pantalla.

obtenerImporteConImpuestos(100) debe devolver: resultado[0] = undefined, resultado[1] = 121,

resultado[2] = 110, resultado[3] = 105. Por pantalla se debe mostrar: Para precio sin impuestos 100 si el
producto es tipo 1 el importe es 121, si el producto es tipo 2 el importe es 110 y si el producto es tipo 3
el importe es 105.

Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01123E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
DOM. Docu
ument Object Model.
M Qu ess? Para qu sirrve?.

DOM. DO
OCUMENT OB
BJECT MODEEL.

Una de laas mayores potencialidad

p des de JavaSScript es quee puede man nipular cualqquier elemen nto de una
pgina weeb y modificcar su conteenido, su tam
mao, su co olor, su posicin... e incluso hacer aparecer
a y
desaparaccer elemento
os. Para haceer esto posib
ble necesitammos identificar con precissin cada ele
emento de
una pgin
na web para poder indicaarle a JavaScrript sobre qu
u elemento debe operar.

Para perm d programaacin pudieran extraer informacin o manipularr cualquier

mitir que loss lenguajes de
elemento de una pgiina web era necesario deefinir de alguuna manera quq tipos de elementos conforman
c
na web, cm
una pgin mo nombrarlo os y cmo see relacionan entre s. Iniicialmente esto resultabaa bastante
problemtico, ya que no exista un
n estndar o especificaci
e n oficial sobrre cmo deba realizarse esto.

Para evitaar los probleemas de faltaa de estandaarizacin, unn organismo internacional (el W3C) defini un
estndar denominado DOM Document Object Mo odel (Modelo de objettos para re epresentar
documenttos) que defiine qu elem mentos se con nsidera que conforman
c u pgina w
una web, cmo see nombran,
cmo se relacionan
r enntre s, cmo se puede accceder a elloss, etc.

D WIDE WEB
EL WORLD B CONSORTIUM O W3C
DOM es unu estndar cuya definiccin ha sido creada por el World Wide W Web Coonsortium, cu
uyas siglas
son W3C. Se trata de d un conso orcio internaacional que produce esspecificaciones, recomen ndaciones,
manualess y herramieentas en relaacin al desarrollo de in nternet. El W3C
W es un o organismo que cuenta
entre suss principaless promotorees al MIT (M Massachusse ets Institutee of Technology, USA), el ERCIM
(Europeann Research Consortium
C f Informattics and Matthematics, participado por numeroso
for os pases),
la Keio Un
niversity (Jap
pn) y la Beih
hang Universsity (China).
Uno de lo os objetivoss principales del W3C ess generar esstndares: documentos
d donde se definen
d las
sintaxis de lenguajes y protocoloss que intervieenen en el desarrollo
d dee internet. El objetivo es promover
que las empresas,
e instituciones y personas queq participan o trabajaan en desarrollos web utilicen
u un
mismo lenguaje y se pongan de acuerdo a laa hora de ge enerar softwware y produ uctos relacionados con
internet. Por qu decimos que q la razz de una pgina weeb es docu ument y webPage
internetDDocument? Porque
P esta forma
f de no
ombrar y orgganizar las pginas web h ha sido definnida por el
W3C de esta
e manera y todas (o caasi todas) lass empresas, institucioness y personas lo han acepttado.
No siemp pre lo que propone
p el W3C
W es aceeptado. El W3C W emite propuestas,
p no leyes dee obligado
cumplimieento porquee no tiene caapacidad leggal para ello
o. Hay otras instituciones o grandes empresas
que tamb bin hacen propuestas
p os, y en ocassiones esas propuestas o criterios
o tienen criterios propio
alternativvos hacen que
q haya distintos
d grupos de trrabajo y distintos estndares o forma de
funcionam miento del so
oftware.

aprenderraprogramar.co
om, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.

Por ltimo, hay que tener en cuenta que el W3C est formado por un equipo de personas que tambin
cometen errores y que lo que dice el W3C no siempre tiene por qu ser lo mejor ni lo ms usado. No
obstante, hoy da el W3C es la principal institucin de referencia a la hora de crear y difundir estndares
relacionados con los desarrollos web, entre ellos el estndar CSS y el estndar DOM.

LAS VERSIONES DE DOM

El W3C trabaja continuamente para mejorar el DOM, corrigiendo errores e incorporando nuevas
funcionalidades. Antes de llegar a una especificacin o recomendacin oficial se trabajan numerosos
borradores que son sometidos a revisin y correccin. Cuando se alcanza un relativo grado de acuerdo
entre los miembros del W3C se libera lo que se denomina una recomendacin oficial de DOM versin
a modo de propuesta para su uso y aplicacin por todas las empresas, instituciones y personas.
Las versiones de DOM a lo largo de la historia han sido*:

Dom Level 1: publicada en 1998.

Dom Level 2: publicada en 2000.

Dom Level 3: publicada en 2004.

Dom Level 4: se esperaba como recomendacin oficial en 2016.

*Las fechas indicadas son slo orientativas, la realidad es que una version no aparece un da, sino que
tiene un largo proceso de desarrollo que a veces dura aos.
Nosotros nos atendremos a la versin de DOM de ms amplia difusin en cada momento. No nos
interesa tanto conocer la especificacin oficial al completo, sino entender cmo est concebido y para
qu sirve el DOM.
Por otro lado, hay que tener en cuenta que seguir con exactitud una especificacin oficial no significa
que nuestra web vaya a funcionar perfectamente, debido a que no todos los navegadores reconocen
todas las propiedades o sintaxis que se definen como recomendacin oficial. Tambin puede suceder
que un navegador s reconozca la sintaxis pero no ofrezca el mismo resultado que otro, lo cual da lugar
a problemas en la visualizacin de pginas web.
Conseguir buenos resultados con JavaScript pasa por estar al da de la especificacin del W3C pero
tambin por seguir las novedades de la web, de los navegadores y siendo prcticos, por hacer muchas
pruebas y comprobaciones con distintos navegadores o herramientas especficas para este fin.

REPRESENTACIN DOM DE UNA PGINA WEB

Decimos que una pgina web es un documento HTML. Este documento puede ser representado de
diferentes maneras:

aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.

a) Representacin web: como una pgina web en un navegador donde vemos imgenes, texto, colores,
etc.

b) Representacin texto: como un texto plano (cdigo HTML) que podemos visualizar en cualquier
editor de textos como el bloc de notas de Windows Notepad++ cualquier otro.

c) Representacin DOM: como un rbol donde los elementos de la pgina web estn organizados
jerrquicamente, con nodos superiores (nodos padre o parent) y nodos que derivan de los nodos padre
(nodos hijo o child).

Veamos un ejemplo de representacin DOM. Escribe el siguiente cdigo y gurdalo en un archivo de

extensin html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
</head>

<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>

<!-- Formulario de contacto -->

<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>

</body>

</html>

La anterior representacin se corresponde con la representacin del documento como texto. Visualiza
el resultado. La imagen que vemos en el navegador se corresponde con la representacin del
documento como pgina web en un navegador.

aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.

La representacin del documento conforme al estndar del DOM sera (de forma aproximada) esta:

La representacin anterior es solo aproximada: no nos va a interesar representar una pgina web
conforme al DOM, simplemente queremos conocer cmo se estructura una pgina web conforme al
DOM para saber cmo podemos acceder a sus elementos y manipularlos usando JavaScript (u otro
lenguaje).

El DOM no es parte de JavaScript, de hecho puede ser utilizado por otros lenguajes de programacin.
No obstante, el DOM est ntimamente ligado a JavaScript ya que JavaScript lo utilizar con profusin
para acceder y modificar las pginas web dinmicamente.

aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.

Decimos que conforme al DOM la pgina web se representa como un rbol de nodos, interconectados y
relacionados de acuerdo con una jerarqua.

Como nodo principal, inicial o padre de todos los nodos en el rbol de nodos de una pgina web se
encuentra un nodo especial cuyo nombre es document.

El nodo raz tiene como nodo hijo al nodo html, que representa a todo lo contenido dentro de las
etiquetas <html> <html>.

El nodo html tiene dos hijos: head y body. Sucesivamente cada nodo tiene uno o varios hijos hasta que
se llega a un punto terminal donde no existen ms hijos.

La construccin del rbol de nodos es realizada automticamente por los navegadores de acuerdo con
las reglas internas que tienen definidas. Por ejemplo una regla interna dice que una etiqueta define un
nodo, por ejemplo una etiqueta <p> define un nodo, y a su vez el contenido de texto de esa etiqueta
define otro nodo.

Una pgina web avanzada supone la construccin de un rbol de nodos que puede constar de miles de
nodos y cambiar continuamente a medida que el usuario realiza la navegacin a travs de diferentes
pginas web. Todo este proceso es realizado en segundo plano por el navegador y dada la potencia
de los computadores actuales, es un proceso muy rpido.

No todos los navegadores construyen el rbol de nodos de igual manera, ni siquiera todos construyen el
mismo rbol de nodos (lo cual puede resultar problemtico al dar lugar a distintos resultados cuando
ejecutemos JavaScript). La mayor parte de los navegadores siguen el estndar W3C para construir el
rbol de nodos, pero algunos navegadores no lo siguen con exactitud o introducen algunas extensiones
adicionales especficas de ese navegador.

Un nodo constituye un elemento complejo que suele llevar informacin asociada como veremos ms
adelante.

A travs de JavaScript podremos acceder a nodos con instrucciones del tipo

document.getElementById("menu"); (acceder a un elemento por su id), pero tambin podremos crear
nodos (por ejemplo document.createElement("h1"); document.body.appendChild(heading);). Todo
esto es posible gracias a la existencia del DOM.

EJERCICIO

Crea una pgina web html que conste de las etiquetas html, head, body. Dentro de body incorpora dos
div: uno que contenga una etiqueta h1 con el texto Curso JavaScript aprenderaprogramar.com y otro
que contenga tres prrafos que contengan: Prrafo 1, Prrafo 2 y Prrafo 3. Crea la representacin del
rbol de nodos conforme al DOM para este documento. Para comprobar si tu respuesta es correcta
puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01124E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
DOM. Docu
ument Object Model.
M Qu ess? Para qu sirrve?.

TIPOS DE NODOS EN EL DOM

Un navegador web crrea una representacin interna del cdigo

c HTMLL como un rrbol de nodo os y a esto
lo denom
minamos DOM M (Documen nt Object Model). Los noodos se pueeden clasificaar en diferen
ntes tipos,
dentro dee los cuales lo
os principalees tipos son: document, element,
e texxt y otros.

pales tipos de nodos en el

Los princip e DOM son:

D
Document: el nodo docum odo raz, a partir del cual derivan
ment es el no d el ressto de nodoss.

Ellement: son los nodos definidos

d porr etiquetas html.
h Por ejeemplo una eetiqueta div genera un
noodo. Si dentro de ese divv tenemos tres etiquetas p, dichas etiquetas
e deffinen nodos hijos de la
ettiqueta div.

Teext: el texto dentro de unu nodo elem

ment se conssidera un nu
uevo nodo hiijo de tipo te
ext (texto).
Loos navegadores tambin crean nodoss tipo texto sin contenido
o para repressentar elementos como
saaltos de lneaa o espacios vacos.
v

Attribute: los atributos dee las etiquetaas definen nodos, aunqu

A ue trabajando o con JavaSccript no los
veeremos como o nodos, sinoo que lo conssideramos infformacin associada al no
odo de tipo element.

Coomentarios y otros: loss comentario omo las declaraciones doctype

os y otros elementos co d en
caabecera de lo
os documenttos HTML gen
neran nodos.

Existen ms tipos de nodos

n en el DOM,
D pero dee uso ms inffrecuente.

Veamos un
u ejemplo de
d un fragmeento de cdiggo:

<bodyy>
<div id
d="cabecera" class="brillante"
c ">
<h1>PPortal web <spaan class="destaacado">aprendeeraprogramar.ccom</span>, paara aprender<//h1>
<h2>DDidctica y divu
ulgacin de la programacin<//h2>
</div>>
</boddy>

Su representacin ind
dicando los tiipos de nodo
os sera:

aprenderraprogramar.co
om, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.

TIPOS DE NODOS EN EL DOM

Element body

id Attribute
Element div class Attribute

Element h1 h2 Element

Portal web span class , para aprender Didctica y

Attribute divulgacin
Text Element Text de la
programacin

Text
aprenderaprogramar.com Text

En la terminologa de rboles, diremos que en este ejemplo el nodo body es padre (parent) y tiene un
hijo (child) que es el nodo div. El nodo div tiene 2 hijos: h1 y h2. Por tanto h1 es el primer hijo
(firstChild) del nodo div. A su vez el nodo h2 es hermano (sibling) de h1. El nodo h1 tiene 4 nodos hijos.
El nodo de tipo texto aprenderaprogramar.com es un nodo hoja o nodo que no tiene hijos.

EJERCICIO

Crea el rbol de nodos DOM indicando los tipos de nodos y atributos para este cdigo:
<body>
<div id="menu" class="tenue">
<p> Bienvenidos </p>
<h1>Portal web aprenderaprogramar.com</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++ editor de texto">
</div>
</body>

Para comprobar si tu respuesta es correcta puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01125E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Acceso a no
odos del DOM. childNodes, firrstChild, lastCh
hild, etc.

ACCESO A NODOS DEEL DOM

Los naveggadores web representan n la pgina web

w en formaa de rbol dee nodos, porr tanto tendrremos que
saber cmmo acceder a dichos nodo os para crear efectos dinnmicos (cam
mbios en los nodos) con JavaScript.
J
Para ello JavaScript usa trminos como ch hildNodes, nodeType,
n n
nodeName, nodeValue, firstChild,
lastChild, parentNodee, nextSiblingg, previousSibling, etc. qu
ue vamos a estudiar.
e

d las palabrras clave de las que disp

Algunas de ponemos en JavaScript para
p accederr a los nodoss del DOM
son las qu
ue enumerammos a continuacin (vereemos un ejem
mplo de cdiigo despus)):

Paalabra clave Significcado Ejemp

plo aprenderraprogramarr.com

p
parentNode Nodo padre de un nodo ...childNodes[1].childN
Nodes[3].pare
entNode

Arrray contenien
ndo los hijos
c
childNodes docum
ment.childNodes[1].childNod
des[1]
de un nodo

Primer hijo dee un nodo

firstChild (empezando por la documentt.firstChild
izquierrda)

Ultimo hijo de un nodo (el

U
lastChild doccument.childNodes[1].lastCh
hild
ms a la deerecha)

Prximo nodo o hermano

n
nextSibling docu
ument.childNo
odes[1].nextSib
bling
(situado a la derecha)

Anterior nodo
A o hermano
pre
eviousSiblingg ...childNod
des[2].childNo
odes[0].previo
ousSibling
(situado a la izquierda)
i

P
Palabra clave
e Significcado Ejemp
plo aprenderraprogramarr.com

Permite conocer el nmero

P
nodoAcce
edido.childre
en.length docum
ment.childNodees[1].children.length
de nodos hijo de un nodo

Permite accedeer al atributo

P
nodoA
Accedido.atributo ...childNodes[1].ch
hildNodes[3].n
name
de un nodo
n

aprenderraprogramar.co
om, 2006-2029
Acceso a nodos del DOM. childNodes, firstChild, lastChild, etc.

Palabra clave Significado Ejemplo aprenderaprogramar.com

Etiqueta del nodo, como texto en

nodeName ...childNodes[2].childNodes[0].nodeName
maysculas (por ejemplo H1, DIV, SPAN)

Nmero que identifica el tipo de nodo (9

nodeType para document, 1 para element, 3 para text, document.nodeType
8 para comment)

Contenido en forma de texto de un nodo de

nodeValue ...childNodes[2].childNodes[0].nodeValue
tipo text o de un nodo de tipo comment

Para los nodos de tipo elemento hay invocaciones equivalentes (mismo efecto que la invocacin
general para un nodo cualquiera, pero slo aplicables a nodos tipo elemento):

Invocacin general Equivalente para nodos tipo element

firstChild firstElementChild

lastChild lastElementChild

nextSibling nextElementSibling

previousSibling previousElementSibling

children.length childElementCount

La mayor parte de los navegadores reconocen todas estas palabras claves, pero pueden existir
navegadores (en especial los ms antiguos) que no reconozcan algunas de ellas.

Como veremos ms adelante, podemos acceder a un nodo usando JavaScript para hacer cambios
dinmicos en el nodo. Tambin podemos acceder a un nodo simplemente para mostrar algo por pantalla
o recuperar alguna informacin. Por ejemplo:

Alert ('El nombre del nodo es: ' + document.childNodes[1].nodeName +' y el tipo del nodo es: '+
document.childNodes[1].nodeType + '\n\n');

Esta instruccin nos mostrara por pantalla el valor de nodeName y nodeType para el segundo nodo hijo
de document (dado que el primero es document.childNodes[0]). En caso de que tratemos de invocar un
nodo que no exista, se producir un error y JavaScript no se ejecutar. No aparecer ningn mensaje de
error por pantalla, simplemente no se ejecuta JavaScript.

Tambin podemos almacenar la referencia a un nodo en una variable. Por ejemplo:

var nodoBody = document.childNodes[1].childNodes[2];

Aqu estamos asignando el nombre de variable nodoBody a un nodo (suponemos que

document.childNodes[1].childNodes[2] es una referencia vlida a un nodo). Ahora podremos hacer uso de
este nombre de variable como equivalente al nodo, por ejemplo:

alert ('Segundo hijo de nodo body es: ' + nodoBody.childNodes[1].nodeName +'\n\n');

aprenderaprogramar.com, 2006-2029
Acceso a nodos del DOM. childNodes, firstChild, lastChild, etc.

Qu tipo de datos corresponde a la variable nodoBody? Cuando hablamos de tipos de datos en

JavaScript dijimos que existan datos primitivos y objetos. En este caso, la variable es de tipo objeto. Los
objetos podemos verlos como algo (estructura de datos) de naturaleza compleja. Ya hemos visto que
los arrays podan ser considerados objetos especiales y lo mismo podemos decir de los nodos del DOM.

En los prximos epgrafes del curso veremos ejemplos de cdigo para acceder a los nodos y modificarlos,
de momento nos es suficiente con irnos familiarizando con la sintaxis y los conceptos bsicos relacionadso
con el DOM.

EJERCICIO

Crea el rbol de nodos DOM para el siguiente cdigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
</head>
<body>Texto en body
<div id="cabecera" class="brillante">
<h1>Portal web <span class="destacado">aprenderaprogramar.com</span>, para aprender</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de
texto">
</div>
<!-- Final del cdigo--></body></html>

Para comprobar si tu respuesta es correcta puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01126E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Diferencias entre navegad
dores con JavaSScript (Firefox, Chrome, etc.)

DIFERENC
CIAS ENTRE NAVEGADOR
N RES

Con ciertaa frecuencia nos tendrem

mos que enffrentar a que una pginaa web se mu uestra de cie
erta forma
en un navvegador y de otra forma en otro naavegador. P Por qu estaas diferenciaas entre navegadores?
Pueden existir
e diferen
ntes motivos, pero vamos a ver cmmo la repressentacin intterna del DOOM puede
estar relacionado con esto.

EJEMPLO: ACCESO A NODOS DEL DOM

Vamos a trabajar con n un cdigo sencillo y trrataremos de

d acceder a los nodos d
del DOM a travs de
cdigo JavvaScript. El cdigo
c que emplearemoss es este:

<!DOOCTYPE H
HTML PU
UBLIC "-///W3C//DTD HTML 4.01 Transitionall//EN"
"http
p://www.w3.o
org/TR/html4//loose.dtd">

<htm
ml>
<head>

<titlee>Ejemplo DOM - aprenderraprogramar.ccom</title><m

meta charset="utf-8">
</heaad>

<body>Texto en bo
ody

<div id="cabecera"
i " class="brillante">
<h1>Portal web <sspan class="deestacado">ap
prenderaprogrramar.com</sspan>, para ap
prender</h1>
>

<img name ="lagaarto" src="htttp://i.imgur.co

om/afC0L.jpg" alt="Notepaad++" title="N
Notepad++, un
u til
edito
or de texto">
</divv>

<!-- Final
F del cdiggo-->

</bod
dy>
</htm
ml>

La primera cuestin que querem mos destacaar es que distintos

d navvegadores pueden crear distintas
representtaciones de rbol
de nod dos. En conccreto nosotroos hemos prrobado dos n
navegadoress a los que
denominaaremos naveegador 1 y navegador 2. Hemos numerado n lo
os nodos co
onforme apaarecen de
izquierda a derecha co
on 0, 1, 2, 3, etc. y nos heemos encontrado con essto:

aprenderraprogramar.co
om, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

ARBOL DE NODOS DOM NAVEGADOR 1

document

[0] DOCTYPE [1] html

[0] head [1] Texto vaco [2] body

id
Texto <<texto en body>> [1] div class
[0] name
[2] [3] src
[0] Texto vaco [1] h1 img
Texto vaco alt
title
[0]
Texto <<, para
Texto <<Portal [1] span class aprender>> [2]
web>>

[0]
aprenderaprogramar.com

ARBOL DE NODOS DOM NAVEGADOR 2

document

[0] DOCTYPE [1] html

[0] head Texto vaco [1] body

id
Texto <<texto en body>> [1] div class
[0] name
[2] [3] src
[0] Texto vaco [1] h1 img
Texto vaco alt
title
[0]
Texto <<, para
Texto <<Portal [1] span class aprender>> [2]
web>>

[0]
aprenderaprogramar.com

aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

Hay distintas cuestiones que merece la pena comentar:

a) Aparecen una serie de nodos que podemos denominar auxiliares. En los rboles grficamente los
hemos denominado Texto vaco, y se corresponden con la representacin interna que le da el
navegador a elementos como saltos de lnea. Por ejemplo:

<div id="cabecera" class="brillante">

<h1>

Puede ser interpretado como que div tiene un hijo que es texto vaco (el salto de lnea) y a su derecha
aparece el hijo h1. En cambio:

<div id="cabecera" class="brillante"><h1>

Sera interpretado como que div tiene un hijo que es h1 (no aparece el texto vaco asociado al salto de
lnea).
Esto no es demasiado importante para nosotros y en general ignoraremos a nodos como estos (texto
vaco). Adems distintos navegadores pueden usar nodos auxiliares de distinta manera. La idea con que
debemos de quedarnos es que la representacin de rbol de nodos que usa un navegador es compleja
y en general no nos interesar conocer los detalles de cmo trabaja el navegador, sino simplemente ser
prcticos y poder acceder de forma fcil a los nodos que nos interesen.

b) En el rbol de nodos del navegador 2 hemos sealado que hay un nodo que no es considerado por el
navegador 2, pero que en cambio s era considerado por el navegador 1. Por qu? Porque cada
navegador tiene su propia forma de construir el rbol de nodos. Ciertamente distintos navegadores
pueden construir rboles de nodos parecidos, pero quizs no sean exactamente iguales (y esto en
algunas ocasiones nos podr generar problemas). Si probramos otro navegador quizs nos
encontrramos algn cambio adicional.
c) Dado que estamos representando un cdigo muy muy sencillo, podemos extraer dos conclusiones
rpidas: la primera, que si para este cdigo encontramos algunas diferencias en el rbol de nodos, para
un cdigo extenso y complejo como suele tener cualquier pgina web existirn muchas diferencias
internas. La segunda, que el rbol de nodos de una pgina web real ser muy extenso y muy complejo,
tanto que no nos interesar visualizarlo ni conocerlo. Unicamente nos interesa tener los conceptos
claros para poder trabajar con el DOM y con JavaScript.

A continuacin mostramos el cdigo para acceder a los nodos del navegador 1 y mostrar algunos
mensajes por pantalla:

CDIGO PARA EL NAVEGADOR 1:

aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
</head>
<body>Texto en body
<div id="cabecera" class="brillante">
<h1>Portal web <span class="destacado">aprenderaprogramar.com</span>, para aprender</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</div>
<!-- Final del cdigo-->
<script type = "text/javascript">
var msg = '';
msg = 'Quin es el nodo padre de document? '+ document.parentNode + '\n\n';
msg = msg + 'Para el nodo document el nodeType vale: ' + document.nodeType +' , y el nodeName vale '+ document.nodeName + '\n\n';
msg = msg+ 'El valor de nodeValue para el nodo document es: ' + document.nodeValue +'\n\n';
msg = msg + 'Nodo hijo del nodo raz es la declaracin DOCTYPE con nodeName: ' + document.childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo del nodo raz es etiqueta html con nodeName: ' + document.childNodes[1].nodeName +' y nodeType: '+
document.childNodes[1].nodeType + '\n\n';
msg = msg + 'Nmero de hijos de nodo etiqueta html: ' + document.childNodes[1].childElementCount +' ( ' +
document.childNodes[1].children.length +')\n\n';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta head con nodeName: ' + document.childNodes[1].childNodes[0].nodeName +' y
nodeType: '+ document.childNodes[1].childNodes[0].nodeType +'\n\n';
msg = msg + 'Nodo hijo de etiqueta html es tipo texto vaco (salto de lnea entre terminacin de head y comienzo de body): ' +
document.childNodes[1].childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta body con nodeName: ' + document.childNodes[1].childNodes[2].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' +
document.childNodes[1].childNodes[2].childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' +
document.childNodes[1].childNodes[2].childNodes[0].nodeValue +'\n\n';
var nodoBody = document.childNodes[1].childNodes[2];
msg = msg + '(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' + nodoBody.childNodes[0].nodeValue
+'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es div con nodeName: ' + nodoBody.childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: ' +
nodoBody.childNodes[1].childNodes[0].nodeName +' y node value: '+ nodoBody.childNodes[1].childNodes[0].nodeValue + '\n\n';
msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.childNodes[1].childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.childNodes[1].childNodes[1].childNodes[0].nodeName
+'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' +
nodoBody.childNodes[1].childNodes[1].childNodes[1].nodeName +'\n\n';
var nodoSpan = nodoBody.childNodes[1].childNodes[1].childNodes[1];
msg = msg + 'Nodo hijo de etiqueta span es texto con nodeName: ' + nodoSpan.childNodes[0].nodeName +' y nodeValue: '+
nodoSpan.childNodes[0].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.childNodes[1].childNodes[1].childNodes[2].nodeName +' y
nodeValue: '+ nodoBody.childNodes[1].childNodes[1].childNodes[2].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: ' +
nodoBody.childNodes[1].childNodes[2].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es img con nodeName: ' + nodoBody.childNodes[1].childNodes[3].nodeName +'\n\n';
msg = msg + 'Valor del atributo name de la imagen: ' + nodoBody.childNodes[1].childNodes[3].name +'\n\n';
var nodoImg = nodoBody.childNodes[1].childNodes[3];
msg = msg + 'Valor del atributo src de la imagen: ' + nodoImg.src +', valor de alt: ' + nodoImg.alt + '\n\n';
msg = msg + 'Valor del atributo title de la imagen: '+ nodoImg.title+'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto vaco (salto de lnea) con nodeName: ' + nodoBody.childNodes[2].nodeName +' y
nodeType: '+nodoBody.childNodes[2].nodeType+' \n\n';
msg = msg + 'Nodo hijo de etiqueta body es comentario con nodeName: ' + nodoBody.childNodes[3].nodeName +' y nodeType:
'+nodoBody.childNodes[3].nodeType+' y nodeValue: '+nodoBody.childNodes[3].nodeValue+' \n\n';
alert (msg);
</script>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

El resultado esperado en este navegador al tratar de mostrar la pgina web es el siguiente:

Quin es el nodo padre de document? null
Para el nodo document el nodeType vale: 9 , y el nodeName vale #document
El valor de nodeValue para el nodo document es: null
Nodo hijo del nodo raz es la declaracin DOCTYPE con nodeName: html
Nodo hijo del nodo raz es etiqueta html con nodeName: HTML y nodeType: 1
Nmero de hijos de nodo etiqueta html: 2 ( 2)
Nodo hijo de etiqueta html es etiqueta head con nodeName: HEAD y nodeType: 1
Nodo hijo de etiqueta html es tipo texto vaco (salto de lnea entre terminacin de head y comienzo de
body): #text
Nodo hijo de etiqueta html es etiqueta body con nodeName: BODY
Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: #text
Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: Texto en body
(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: Texto en body
Nodo hijo de etiqueta body es div con nodeName: DIV
Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: #text y node value:
Nodo hijo de etiqueta div es etiqueta H1 con nodeName: H1
Nodo hijo de etiqueta h1 es texto con nodeName: #text
Nodo hijo de etiqueta h1 es etiqueta span con nodeName: SPAN
Nodo hijo de etiqueta span es texto con nodeName: #text y nodeValue: aprenderaprogramar.com
Nodo hijo de etiqueta h1 es texto con nodeName: #text y nodeValue: , para aprender
Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: #text
Nodo hijo de etiqueta div es img con nodeName: IMG
Valor del atributo name de la imagen: lagarto
Valor del atributo src de la imagen: http://i.imgur.com/afC0L.jpg, valor de alt: Notepad++
Valor del atributo title de la imagen: Notepad++, un til editor de texto
Nodo hijo de etiqueta body es texto vaco (salto de lnea) con nodeName: #text y nodeType: 3
Nodo hijo de etiqueta body es comentario con nodeName: #comment y nodeType: 8 y nodeValue:
Final del cdigo

A continuacin mostramos el cdigo para acceder a los nodos del navegador 2 y mostrar algunos
mensajes por pantalla:
CDIGO PARA EL NAVEGADOR 2:

aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
</head>
<body>Texto en body
<div id="cabecera" class="brillante">
<h1>Portal web <span class="destacado">aprenderaprogramar.com</span>, para aprender</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</div>
<!-- Final del cdigo-->
<script type = "text/javascript">
var msg = '';
msg = 'Quin es el nodo padre de document? '+ document.parentNode + '\n\n';
msg = msg + 'Para el nodo document el nodeType vale: ' + document.nodeType +' , y el nodeName vale '+ document.nodeName +
'\n\n';
msg = msg+ 'El valor de nodeValue para el nodo document es: ' + document.nodeValue +'\n\n';
msg = msg + 'Nodo hijo del nodo raz es la declaracin DOCTYPE con nodeName: ' + document.childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo del nodo raz es etiqueta html con nodeName: ' + document.childNodes[1].nodeName +' y nodeType: '+
document.childNodes[1].nodeType + '\n\n';
msg = msg + 'Nmero de hijos de nodo etiqueta html: ' + document.childNodes[1].childElementCount +' ( ' +
document.childNodes[1].children.length +')\n\n';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta head con nodeName: ' + document.childNodes[1].childNodes[0].nodeName +' y
nodeType: '+ document.childNodes[1].childNodes[0].nodeType +'\n\n';
msg = msg + 'Nodo hijo de etiqueta html es etiqueta body con nodeName: ' + document.childNodes[1].childNodes[1].nodeName
+'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: ' +
document.childNodes[1].childNodes[1].childNodes[0].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' +
document.childNodes[1].childNodes[1].childNodes[0].nodeValue +'\n\n';
var nodoBody = document.childNodes[1].childNodes[1];
msg = msg + '(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: ' +
nodoBody.childNodes[0].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es div con nodeName: ' + nodoBody.childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: ' +
nodoBody.childNodes[1].childNodes[0].nodeName +' y nodeValue ' + nodoBody.childNodes[1].childNodes[0].nodeValue + '\n\n';
msg = msg + 'Nodo hijo de etiqueta div es etiqueta H1 con nodeName: ' + nodoBody.childNodes[1].childNodes[1].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.childNodes[1].childNodes[1].childNodes[0].nodeName
+'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es etiqueta span con nodeName: ' +
nodoBody.childNodes[1].childNodes[1].childNodes[1].nodeName +'\n\n';
var nodoSpan = nodoBody.childNodes[1].childNodes[1].childNodes[1];
msg = msg + 'Nodo hijo de etiqueta span es texto con nodeName: ' + nodoSpan.childNodes[0].nodeName +' y nodeValue: '+
nodoSpan.childNodes[0].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta h1 es texto con nodeName: ' + nodoBody.childNodes[1].childNodes[1].childNodes[2].nodeName +'
y nodeValue: '+ nodoBody.childNodes[1].childNodes[1].childNodes[2].nodeValue +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: ' +
nodoBody.childNodes[1].childNodes[2].nodeName +'\n\n';
msg = msg + 'Nodo hijo de etiqueta div es img con nodeName: ' + nodoBody.childNodes[1].childNodes[3].nodeName +'\n\n';
msg = msg + 'Valor del atributo name de la imagen: ' + nodoBody.childNodes[1].childNodes[3].name +'\n\n';
var nodoImg = nodoBody.childNodes[1].childNodes[3];
msg = msg + 'Valor del atributo src de la imagen: ' + nodoImg.src +', valor de alt: ' + nodoImg.alt + '\n\n';
msg = msg + 'Valor del atributo title de la imagen: '+ nodoImg.title+'\n\n';
msg = msg + 'Nodo hijo de etiqueta body es texto vaco (salto de lnea) con nodeName: ' + nodoBody.childNodes[2].nodeName +' y
nodeType: '+nodoBody.childNodes[2].nodeType+' \n\n';
msg = msg + 'Nodo hijo de etiqueta body es comentario con nodeName: ' + nodoBody.childNodes[3].nodeName +' y nodeType:
'+nodoBody.childNodes[3].nodeType+' y nodeValue: '+nodoBody.childNodes[3].nodeValue+' \n\n';
alert (msg);
</script>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

El resultado esperado en este navegador al tratar de mostrar la pgina web es el siguiente:

Quin es el nodo padre de document? null
Para el nodo document el nodeType vale: 9 , y el nodeName vale #document
El valor de nodeValue para el nodo document es: null
Nodo hijo del nodo raz es la declaracin DOCTYPE con nodeName: HTML
Nodo hijo del nodo raz es etiqueta html con nodeName: HTML y nodeType: 1
Nmero de hijos de nodo etiqueta html: 2 ( 2)
Nodo hijo de etiqueta html es etiqueta head con nodeName: HEAD y nodeType: 1
Nodo hijo de etiqueta html es etiqueta body con nodeName: BODY
Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeName: #text
Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: Texto en body
(Repetimos) Nodo hijo de etiqueta body es texto <<Texto en body>> con nodeValue: Texto en body
Nodo hijo de etiqueta body es div con nodeName: DIV
Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: #text y node value:
Nodo hijo de etiqueta div es etiqueta H1 con nodeName: H1
Nodo hijo de etiqueta h1 es texto con nodeName: #text
Nodo hijo de etiqueta h1 es etiqueta span con nodeName: SPAN
Nodo hijo de etiqueta span es texto con nodeName: #text y nodeValue: aprenderaprogramar.com
Nodo hijo de etiqueta h1 es texto con nodeName: #text y nodeValue: , para aprender
Nodo hijo de etiqueta div es texto vaco (salto de lnea) con nodeName: #text
Nodo hijo de etiqueta div es img con nodeName: IMG
Valor del atributo name de la imagen: lagarto
Valor del atributo src de la imagen: http://i.imgur.com/afC0L.jpg, valor de alt: Notepad++
Valor del atributo title de la imagen: Notepad++, un til editor de texto
Nodo hijo de etiqueta body es texto vaco (salto de lnea) con nodeName: #text y nodeType: 3
Nodo hijo de etiqueta body es comentario con nodeName: #comment y nodeType: 8 y nodeValue:
Final del cdigo

Por qu usamos distinto cdigo para distintos navegadores si estamos trabajando con un mismo
cdigo HTML?
El motivo es que cada navegador trabaja, de forma interna, de distinta manera. En este caso, al
navegador 2 usar distinto nmero de nodos que el navegador 1, los ndices de acceso a nodos no son
los mismos para distintos navegadores. En consecuencia, si tratamos de ejecutar el cdigo para el
navegador 2 en el navegador 1 posiblemente lo que ocurra es que no se muestra nada, debido a que
al haber errores en los ndices de acceso JavaScript detecta el error y simplemente no se ejecuta (sin
mostrar ningn aviso).
Significa esto que tendremos que crear distinto cdigo JavaScript para los distintos navegadores?
No, existen mtodos ms estndares y sencillos para acceder a nodos que veremos ms adelante, con
los que no cabe esperar diferencias entre distintos navegadores. No obstante, es importante recordar
que cada navegador puede ofrecer distintos resultados ante un mismo cdigo (o incluso no ejecutar
algo que s ejecuta otro). Nos tendremos que enfrentar a esta situacin en diversas ocasiones y
conviene tener conocimiento de ello. Muchas veces te preguntarn (o te preguntars): Por qu esta
pgina web se muestra de esta manera en un navegador y de otra manera en otra navegador? Los
motivos pueden ser varios, pero esto que estamos comentando es uno de ellos.

aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)

EJERCICIO

Comprueba cul de los cdigos que hemos empleado se ejecuta en tu navegador. Si no se ejecuta
ninguno de ellos, corrgelo para que se ejecute (una estrategia puede ser ir aadiendo lnea a lnea para
saber dnde surgen problemas).

Ambos cdigos (el cdigo para el navegador 1 y el cdigo para el navegador 2) son muy similares.
Dnde podemos decir que se encuentra la principal diferencia entre uno y otro cdigo? Por qu?

Una vez tengas el cdigo ejecutndose, modifica la forma de acceso a los nodos de modo que en vez de
childNodes uses firstChild y nextSibling para acceder a todos los nodos.

Por ejemplo, en vez de: document.childNodes[0].nodeName

Usaramos: document.firstChild.nodeName

Otro ejemplo. En vez de: document.childNodes[1].childNodes[0].nodeName

Usaramos: document.firstChild.nextSibling.firstChild.nodeName

Vete probando el cdigo lnea a lnea. Ten en cuenta que tu navegador podra no reconocer alguna
palabra clave. Ten en cuenta que una referencia a un nodo no vlida har que no se ejecute tu cdigo.

Para comprobar si tu respuesta es correcta puedes consultar en los foros aprenderaprogramar.com.

Prxima entrega: CU01127E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Acceder a elementos
e JavaScript. getElem
mentById.

ACCEDER A ELEMENTTOS JAVASCR

RIPT

Podemos acceder a los nodos deel DOM (Doccument Obje ect Model) usando
u JavaSScript y los ndices de
array y reelaciones paddre hijo hermanos
h (p
parent, chidN
Nodes, siblin
ngs), pero en n general noss ser ms
til poderr acceder dirrectamente a aquel nodoo que nos reesulte de inteers. JavaScrript proporciona varias
funcioness para el acceeso directo a nodos.

ACCESO DIRECTO
D A NODOS
N

Las formaas de acceder directamen

nte a nodos con
c JavaScrip
pt podemos resumirlas aas:

Acceso directo a nodo

os Sintaxis Ejemplo

Elegido po
or su atributo id d
document.get
tElementById('valorId'); docu
ument.getElem
mentById
(menu1);;

Elegido por
p su atributo document.getElem
mentsByName
e('valorName'); docuument.getElementsBy
name Naame('peticionD
Datos');

Elegido por el tipo de

e docum
ment.getElem
mentsByTagName('valorTag'); docum
ment.getElem
mentsByTag
etiquetta HTML (tag) Name(span n);

Elegido por class CSSS documeent.getElementsByClassName('valorClasse'); docum

ment.getEleme
entsByClass
N
Name('destacado');

Elegido por selector CSSS doccument.queryySelectorAll('sselectorCSS'); docu

ument.querySelectorAll
('#menu1 p');
p

Elegido por selector CSSS do

ocument.querrySelector('selectorCSS'); doccument.queryySelector
('#menu1 p');
p

Hace unos aos se usaba documeent.all para realizar

r selecccin de nodos en un documento, poor ejemplo
documentt.all.tags(div) devolvaa todos los elementos div en un documento,
d pero esta sintaxis
s se
consideraa obsoleta po
or lo que no vamos
v a usarla.
Una vez que
q tenemoss acceso direecto a los noodos podemmos empezarr a hacer cossas interesan
ntes como
modificarr dinmicameente los nodos, como veremos en el ejemplo de cdigo que m
mostramos ms
m abajo.

aprenderraprogramar.co
om, 2006-2029
Acceder a elementos JavaScript. getElementById.

GET ELEMENT BY ID

Un atributo que pueden tener las etiquetas HTML es el valor de id, que permite entre otras cosas
establecer estilos CSS para dicho elemento y sus descendientes. Por ejemplo <div id="contenedor">
establece que el id para este elemento div es contenedor.

El atributo id nos va a permitir acceder a un nodo del DOM con dicho valor de atributo. Recordar que en
un documento HTML no debera existir ms de un elemento con un mismo id. Es decir, los ids deben ser
nicos (identificadores nicos de un elemento). En caso de tener dos elementos dentro de nuestro
documento HTML que tengan el mismo id, pueden surgir errores (seguramente JavaScript devuelva el
primer elemento con el id especificado que encuentre, pero no deberamos trabajar teniendo ids
repetidos porque esto es incorrecto).

El nombre de la funcin document.getElementById('valorId') nos informa sobre su cometido: nos

devuelve un solo nodo de tipo elemento del DOM cuyo id coincide con el pasado como argumento.

Una vez tenemos el nodo con el id deseado, podemos modificar dinmicamente sus propiedades. En el
siguiente cdigo vemos un ejemplo donde el objetivo es mostrar una imagen con dos botones en su
parte inferior: <<<Atrs para ir hacia atrs y mostrar una imagen anterior o Adelante>>> para ir
hacia delante y mostrar una imagen posterior. Si ya estamos en la primera imagen o en la ltima,
aparecer un mensaje indicando que no es posible realizar ese movimiento. Escribe el cdigo, ejectalo
y razona sobre l. Ten en cuenta que podra surgir algn problema de compatibilidad con tu navegador.
Si es as, localiza dnde se encuentra ese problema y corrgelo (si tienes problemas para hacerlo escribe
una consulta en los foros aprenderaprogramar.com).

aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementById.

<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual =9;
function moverImagen(movimiento) {
if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src =
'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt = 'Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title = 'Dilogo entre informticos';
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src =
'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt = 'Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title = 'Desbordado por los nmeros';
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src =
'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt = 'Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title = 'Estudiando programacion';
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrs</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel"
src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg"
alt="Camiseta 9 aprenderaprogramar.com" title="Dilogo entre informticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrs </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div></body></html>

aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementById.

EJERCICIO

1.Comprueba que el cdigo anterior te permite cambiar la imagen que se muestra haciendo uso de los
botones.

2. En el cdigo anterior hay una declaracin de variables (var numeroImagenActual =9;) que no est
dentro de una funcin. Por qu crees que se ha hecho esto as? Prueba a colocarla dentro de la
funcin, comprueba qu ocurre y razona el por qu.

3. Modifica el cdigo anterior para que en lugar de definirse src, alt y title para cada imagen dentro de
los if, se definan estos valores usando arrays declarados en cabecera de la funcin. Por ejemplo
tendremos que:

valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/
camiseta_6_humor_informatico_foto.jpg';

Las asignaciones dentro de los if debern hacer referencia a los elementos del array y el resultado de
ejecucin deber ser el mismo que se obtena con el cdigo original.

4. Duplica todo el cdigo HTML existente dentro de la etiqueta body, de modo que se muestren dos
veces el texto, dos veces la imagen y dos veces los botones. Cundo pulsas un botn situado debajo a
la imagen inferior qu ocurre? Por qu ocurre esto?

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01128E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Acceder a elementos
e JavaScript. getElem
mentsByTagNam
me.

GETELEMENTSBYTAG
GNAME

El acceso
o a un nodoo concreto del
d DOM usaando getElementById es muy frecu uente, pero hay otras
maneras de accceder a los noddos del DOM. U
Una de ellas es usando
getElementsByTagNam me('etiquetaaBuscada'). Esta
E funcin nos devuelvve un array cconteniendo
o todos los
nodos DOOM cuya etiqueta coincid
de con etiqueetaBuscada.

El orden en
e que apareecern los elementos en n el array (co
omenzando con
c ndice ceero) es el mismo en el
que apareezcan en el cdigo
c de la pgina
p web. Ejemplo:

v elemento
var osDiv = docu
ument.getEle
ementsByTaggName('div'));

Nos devo olver un arrray con todo os los nodoss de tipo ele ement cuya etiqueta seaa div, empezzando con
ndice cerro: elementoosDiv[0], elem
mentosDiv[1 1], elementossDiv[2], elem
mentos div[3] hasta el ndice que
sea necessario para abbarcar tantoss elementoss div como haya en el c mos obtener los nodos
digo. Podem
de cualquuier tipo de etiqueta:
e div,, span, p, lab
bel, input, h1, h2, etc.

Tener en cuenta que escribimos document.ge

d etElementsByyTagName('d div') porque queremos empezar
e la
bsquedaa desde el no o document (as exploram
odo raz del DOM, es deecir, el nodo mos todos lo
os nodos).
Podramoos empezar laa bsqueda por
p otro noddo si resultarra de inters..

CAMBIAR
R ESTILOS CSS CON JAVA
ASCRIPT

Una posib
bilidad intereesante de JavvaScript ser poder moddificar de forrma dinmicaa el aspecto de la web
modifican
ndo el CSS associado. La siintaxis para poder ejecuttar modificacciones de esttilo ser la siiguiente:

nodoDelDomAlQueeAccedemoss.style.nombrePropiedad
d = 'valorProp
piedad';

plo sera: elem

Un ejemp mentosObteenidos[1].style.backgroun
ndColor = '#FFF9933';

Donde eleementosObttenidos[1] co orresponde a un nodo del d DOM. Y background dColor es la propiedad

CSS que deseamos cambiar
c perro expresada con sintaxis JavaScrip pt. Si te fijaas, la sintaxxis CSS es
backgrounnd-color mieentras que la sintaxis JaavaScript es backgroundColor. En esste caso son similares,
pero no exactamente
e e iguales. En otros casoss s hay coincidencia. Ms adelante veremos una tabla de
equivalen
ncia entre pro
opiedades CSSS

aprenderraprogramar.co
om, 2006-2029
Acceder a elementos JavaScript. getElementsByTagName.

Para ver la aplicacin del acceso con getElementsByTagName y el cambio de propiedades CSS con
JavaScript escribe el siguiente cdigo y comprueba sus efectos al visualizar la pgina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>

<script type="text/javascript">
function cambiarAspecto(elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';
}
</script>

</head>

<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>
<!-- Formulario de contacto -->
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html"
onclick="cambiarAspecto('label')">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>
</body>
</html>

El resultado esperado es que al cargar la pgina los elementos label del form se muestren con un color
de fondo blanco. Al hacer click para escribir en el formulario, se mostrar cada uno de los elementos
con un color de fondo ligeramente distinto porque as lo hemos establecido a travs del cdigo.

aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementsByTagName.

EJERCICIO

Modifica el cdigo anterior para que en vez de pasarse como parmetro label pases como parmetro:
div, input, h1 y h2. Se usan los tres ndices del array en todos los casos? Qu ocurre si aparecen ms
ndices que elementos realmente existen en el documento html?

Modifica el cdigo anterior para introducir div que simule un botn con el texto Cambiar a Ingls y
otro div simulando un botn Cambiar a espaol. Al pulsar sobre el botn cambiar a ingls, debes
acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a
aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrnico: y cambiar su nodeValue
por Name:, Surname: y e-mail:.

Orientacin: tendrs que conocer la estructura del DOM para poder acceder a los nodos con el
contenido texto que nos interesa, ya que estos nodos son descendientes de los nodos label.

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01129E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Sintaxis JavvaScript para prropiedades CSSS. Equivalenciass.

SINTAXIS JAVASCRIPTT PARA PROP

PIEDADES CSSS

En la annterior entrega del curso hemos visto cmo utilizando o JavaScriptt podemos modificar
des CSS asoccidas al cdiggo HTML de nuestra pggina web. Diccha sintaxis sse basa en el uso de la
propiedad
palabra clave style y la sintaaxis JavaScrript-DOM parap propieddades CSS, cuyas equ uivalencias
mostrarem
mos.

mos la sintaxiis para poder ejecutar modificacione

Recordem es de estilo co
on JavaScript:

nodoDelDomAlQueeAccedemoss.style.nombrePropiedad
d = 'valorProp
piedad';

plo sera: elem

Un ejemp mentosObteenidos[1].style.backgroun
ndColor = '#FFF9933';

Donde eleementosObttenidos[1] co orresponde a un nodo deld DOM. Y background dColor es la propiedad

CSS que deseamos
d caambiar pero expresada con
c sintaxis JavaScript.
J Laa sintaxis CSS es backgro
ound-color
mientras que la sin ntaxis JavaSScript es baackgroundCo olor. En estte caso son n similares, pero no
exactameente iguales.. En otros casos
c s hayy coincidenccia. A continuacin mo ostramos una lista de
equivalen
ncias con la que
q nos ser til trabajar, ya que no ser
s posible memorizarlo o todo.

Propie
edad CSS Sintaxis JavaScript
J t
backkground backgground
backgroun
nd-attachme
ent background
dAttachment
backgro
ound-color backgro
oundColor
backgro
ound-image backgroundImage
backgrou
und-position
n backgrou
undPosition
backgro
ound-repeat backgrou
undRepeat
border bo
order
borde
er-bottom borderrBottom
border-b
bottom-colorr borderBo
ottomColor
border-b
bottom-style
e borderBo
ottomStyle
border-bottom-width
h borderBo
ottomWidth
bord
der-color bordeerColor
border-left bord
derLeft

aprenderraprogramar.co
om, 2006-2029
Sintaxis JavaScript para propiedades CSS. Equivalencias.

Propiedad CSS Sintaxis JavaScript

border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
float cssFloat
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom

aprenderaprogramar.com, 2006-2029
Sintaxis JavaScript para propiedades CSS. Equivalencias.

Propiedad CSS Sintaxis JavaScript

margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex

La regla general que se puede seguir es que para referirnos a una propiedad CSS en JavaScript debemos
usar CamelCase. CamelCase es un estilo para escribir nombres de elementos de un lenguaje que
estn formados por varias palabras segn el cual en este caso la primera letra la escribiremos en
minscula y luego el comienzo de cada palabra ir en mayscula (sin separacin). As si quisiramos
poner un nombre de variable para reflejar la distancia entre puntos usaramos distanciaEntrePuntos,
o para reflejar el nmero de personas que entran por hora al teatro podramos usar
numeroPersonasEntranPorHoraTeatro.

La mayor parte de las propiedades CSS siguen esta regla. En algunos casos una palabra es palabra clave
en JavaScript y para evitar confusiones se antecede de css, por ejemplo la propiedad CSS float tiene
como equivalente cssFloat y la propiedad CSS text tiene como equivalente cssText.

Prxima entrega: CU01130E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Acceder a nodos
n JavaScrip
pt. getElementssByName.

GETELEMENTSBYNAM
ME JAVASCRIPT

El acceso
o a un nodoo concreto del
d DOM usaando getElementById es muy frecu uente, pero hay otras
maneras de accceder a los nod
dos del DOM. U
Una de ellas es usando
getElementsByName('valorNameB Buscado'). Esta funcin nos devuelvve un array cconteniendoo todos los
nodos DOOM cuyo atrib
buto name coincide
c con valorNameBBuscado.

e que apareecern los elementos en

El orden en n el array (co
omenzando con
c ndice ceero) es el mismo en el
que apareezcan en el cdigo
c de la pgina
p web. Ejemplo:

var elementossAnimal = document.getEElementsByN

Name('animaal');

Nos devo olver un arrray con todo os los nodos de tipo ele ement que tengan
t como atributo html
h name
animal, empezando o con ndice cero: elemeentosAnimal[[0], elementosAnimal[1], elementosAnimal[2],
elemento osAnimal [3] hasta el n ndice que seea necesario para abarcaar tantos elementos com
mo haya en
el cdigo con el atribuuto name=aanimal. Podemos obtener los nodoss de cualquieer tipo de etiqueta que
lleve el attributo namee (input, texttarea, select, button, imgg, etc.).

No todoss los elementos HTML admiten qu ue se les in ncluya un atributo

a nam
me. Por ejem mplo <div
name=annimal> <//div> no es correcto porq
que el atributo name no es aplicable a los elemen
ntos div.

Los elemeentos HTML que admiten el atributo o name son: button, form, fieldset, iframe, inpu
ut, keygen,
object, ou
utput, select,, textarea, map,
m meta, paaram.

uto id que haa de ser nicco para un elemento den

A diferenccia del atribu ntro de una p
pgina web, el atributo
name pueede apareceer repetido en e diversos elementos del cdigo HTML H de la pgina webb. Un caso
tpico sera disponer varios
v radiob
buttons cuyo atributo nam me es el mismo.

Siempre que
q sea posible elegir en mentsByName recomendamos usar
ntre usar gettElementsById getElem
getElementsById puess aporta mayyor seguridadd.

Tener en cuenta que escribimos document.ge

d etElementsByyName('anim mal') porque queremos empezar
e la
bsquedaa desde el no o document (as exploram
odo raz del DOM, es deecir, el nodo mos todos lo
os nodos).
Podramoos empezar laa bsqueda por
p otro noddo si resultarra de inters..

EVENTO ONSUBMMIT
O T

Ya hemoss trabajado con

c algunos eventos com mo onclick, onload
o aaadimos ahoraa a nuestro repertorio
un eventoo denominaddo onsubmmmit, que es el evento que usuario pulsa el botn
e se producee cuando el u
d un formulario. Ejemplo:
de envo de

aprenderraprogramar.co
om, 2006-2029
Acceder a nodos JavaScript. getElementsByName.

<form name ="formularioContacto" method="get"

action="http://aprenderaprogramar.com" onsubmit="validar()">

Segn este ejemplo, cuando el usuario pulse el botn enviar del formulario, se ejecutar la funcin
JavaScript validar().

Para ver la aplicacin del acceso con getElementsByName y el evento onsubmit con JavaScript escribe
el siguiente cdigo y comprueba sus efectos al visualizar la pgina y pulsar el botn enviar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo JavaScript - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:inline-block; padding:5px;}
</style>
<script type="text/javascript">
function informarItemsElegidos(elemento) {
var elementosObtenidos = document.getElementsByName(elemento);
var msg = 'Animales que ha elegido que le gustan incluye: ';
var elegidos = 0;
if (elementosObtenidos[0].checked == true) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}
if (elementosObtenidos[1].checked == true) { if (elegidos>=1) {msg = msg + ', ';}
msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}
if (elementosObtenidos[2].checked) { if (elegidos>=1) {msg = msg + ', ';}
msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}
if (elementosObtenidos[3].checked) { if (elegidos>=1) {msg = msg + ', ';}
msg = msg + elementosObtenidos[3].value; elegidos=elegidos+1;}
if (elegidos == 0 ) {msg = 'No ha elegido ningn animal!';}
alert (msg);
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>
<!-- Formulario de contacto -->
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com"
onsubmit="informarItemsElegidos('animal')">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">Len &nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre &nbsp;&nbsp;&nbsp; </label>

aprenderaprogramar.com, 2006-2029
Acceder a nodos JavaScript. getElementsByName.

<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo

&nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar" />
<input type="reset" value="Cancelar" />
</label>
</form>
</div>
</body>
</html>

El resultado esperado es que al pulsar el botn enviar del formulario se nos muestre un mensaje en
funcin de los animales que hayamos elegido. Si no hemos elegido ningn animal se nos mostrar: No
ha elegido ningn animal!. Si hemos elegido por ejemplo el tigre y el jaguar se nos mostrar: Animales
que ha elegido que le gustan incluye: tigre, jaguar.

EJERCICIO

Responde a las siguientes preguntas:

a) Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if

(elementosObtenidos[1].checked)? Por qu?

b) Modifica el cdigo para obtener el mismo resultado pero sin utilizar if anidados.

c) Utilizando la propiedad length aplicada a la coleccin de nodos obtenida mediante

getElementsByName, modifica el cdigo para que el resultado sea que al enviar el formulario el
mensaje que aparezca sea El nmero total de animales disponibles era y usted ha elegido . Por
ejemplo, si tenemos 4 animales (Len, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe
aparecer el mensaje El nmero total de animales disponibles era 4 y usted ha elegido 1.

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01131E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Bucles for con
c JavaScript. Sentencia breaak.

CONCEPTTO GENERAL DE BUCLE

Nos referimos a estructuras de repeticin o bu ucles en alussin a instruccciones que permiten la repeticin
de processos un nmeero n de vecees. Los buclees se pueden n materializar con distinttas instruccio
ones como
for, whilee, etc. Un buucle se puedde anidar deentro de otrro dando luggar a que po or cada repe eticin del
proceso exterior
e se ejecute n vecees el proceso
o interior. Lo veremos con ejemplos.

ON INSTRUCC
BUCLE CO CIN FOR. OPERADOR
O + Y --. SENTEENCIA BREAK.
++

En JavaSccript existen distintas mo

odalidades de
d for. El caso ms habitual, que es eel que expon
ndremos a
continuaccin, lo deno ominaremoss for normal o simplem mente for. Coonceptualmeente el esqu uema ms
habitual es
e el siguientte:

(Enttrada al bucle)

VAR > Vf
D
Desde VAR = Vi
V a Vf

VARR <=
Repeticin f

Instruccin 1
Instruccin 2
.
. (Salida del bucle)
.
Instruccin n

La sintaxiss habitual ess: for (var i = unNumero; i < otroNum mero; i++) { instruccioness a ejecutarsse }, donde
one la declaracin de unaa variable esspecfica y temporal paraa el bucle. El nombre de la variable
var i supo
puede serr cualquiera,, pero suelen umero refleja el nmero
n usarse letras como i, j, k, etc. unNu o en el que
se empiezza a contar, con bastante frecuenciia es 0 1. i < otroNum mero i <= otroNumero o refleja la
condicinn que cuando o se verifique supondr la salida del bucle y el fin de las repeticiones. i++ utiliza el
operador ++ cuyo sign nificado es incrementarr la variable i en una unid dad. Este op
perador se puede
p usar
en otras partes del cdigo,
c no ese exclusivo para los buccles for. Igualmente se dispone del operador
gemelo , que reealiza la opeeracin en sentido s conttrario: reducce el valor dde la variabble en una
unidad. Esscribe el sigu
uiente cdigo o y comprueba los resulttados:

aprenderraprogramar.co
om, 2006-2029
Bucles for con JavaScript. Sentencia break.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
.boton{padding:15px; width: 200px; text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
</style>
<script type="text/javascript">
function ejemploFor() {
var palabra = 'Esternocleidomastoideo';
var subpalabra = new Array();
subpalabra[0]='';
var msg = 'Diez primeras letras: \n\n';
for (var i=1; i<=10; i++){subpalabra[i] = subpalabra[i-1] + palabra.charAt(i-1);}
for (var i=1; i<=10; i++){msg = msg + subpalabra[i] +'\n';}
msg = msg + '\nPalabra al revs: \n\n';
for (var i=palabra.length; i>0; i--){
msg = msg + palabra.charAt(i-1);
}
alert (msg);
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
<h3 class="boton" onclick="ejemploFor()">Pulsa aqu</h3>
</body>
</html>

El resultado esperado es que se muestre lo siguiente:

Diez primeras letras:

E
Es
Est
Este
Ester
Estern
Esterno
Esternoc
Esternocl
Esternocle

Palabra al revs:

oediotsamodielconretsE

aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.

Hemos usado el mtodo charAt(i) que aplicado a una cadena de texto nos devuelve el carcter situado
en la posicin i (considerando que el primer carcter est en posicin 0, el segundo en 1, etc.).
Un bucle for (o de cualquier otro tipo) puede ser interrumpido y finalizado en un momento intermedio
de su ejecucin mediante una instruccin break;. El uso de esta instruccin dentro de bucles solo tiene
sentido cuando va controlada por un condicional que determina que si se cumple una condicin, se
interrumpe la ejecucin del bucle. Por ejemplo: if (i==5) {break;}
Una posibilidad interesante es utilizar mtodos para acceder a nodos del DOM y despus recorrer
dichos nodos con un bucle. Aqu mostramos un ejemplo donde adems usamos arrays, el mtodo
length para conocer el nmero de elementos que forman un array y condicionales. Escribe el cdigo y
comprueba los resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}
.boton{padding:15px; width: 330px; text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
.boton:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var izqda_dcha = true;
function cambiarColores(elemento) {
var color = ['#FF6633', '#FF9933', '#FFCC33', 'yellow'];
var elementosObtenidos = document.getElementsByTagName(elemento);
if (izqda_dcha == true) {
for (var i=0; i<elementosObtenidos.length; i++) {
elementosObtenidos[i].style.backgroundColor = color[i%4];
}
} else {
for (var j=elementosObtenidos.length-1; j>=0; j--) {
elementosObtenidos[j].style.backgroundColor = color[(j+3)%4];
}
}
if (izqda_dcha == false) { izqda_dcha = true; } else { izqda_dcha = false; }
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
<div style="width:500px; float:left; margin-bottom:30px;">
<p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p>
<p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Meln</p>
<p>Sanda</p><p>Mango</p><p>Papaya</p><p>Cereza</p>
<p>Nectarina</p><p>Frambuesa</p></div>
<h3 class="boton" onclick="cambiarColores('p')">Pulse aqu para cambiar colores</h3>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.

El resultado esperado es que se muestren inicialmente las cajas con el texto de color blanco y que
cuando pulsemos el botn cambien de color. Pulsando nuevamente el botn, los colores volvern a
cambiar.

aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.

EJERCICIO

1) Crea una funcin que pida una palabra al usuario y usando un bucle for y el mtodo charAt, muestre
cada una de las letras que componen la entrada. Por ejemplo si se introduce ave debe mostrar:
Letra 1: a
Letra 2: v
Letra 3: e

2) Crea una funcin denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de
tipo prrafo, muestre el texto que contienen. Por ejemplo para el cdigo de ejemplo visto
anteriormente el resultado debera ser: Prrafo 1 contiene: manzana; Prrafo 2 contiene: pera. Prrafo
3 contiene: fresa. Prrafo 4 contiene (etc., hasta que no haya ms prrafos).

Puedes comprobar si tus respuestas son correctas consultando en los foros aprenderaprogramar.com.

Prxima entrega: CU01132E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiq
quetados.

BUCLE CO
ON INSTRUCC
CIN WHILEE EN JAVASCR
RIPT. EJEMP
PLO USO DE BREAK.
B

El bucle while
w presen
nta ciertas siimilitudes y ciertas diferrencias con el
e bucle for. La repetici
n en este
caso se produce
p no un nmero predeterminado de veces, sino miientras se cumpla una condicin.
Conceptualmente el esquema
e ms habitual ess el siguientee:

No
o
Mientras [Condicin]]

Ins
struccin 1

Ins
struccin 2

Ins
struccin n

La sintaxiis en generaal es: while (condicin)) { instruccioones a ejecu utarse } donnde condici n es una
n que da un resultado tru
expresin ue o false enn base al cuaal el bucle see ejecuta o n
no. Escribe y prueba el
siguiente cdigo, donde adems vemos
v un ejeemplo de uso o de la instru
uccin break;
k;.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Traansitional//EN" "http://www.w

w3.org/TR/htm
ml4/loose.dtd">
<html>
<head>
<title>Ejemmplo aprenderap programar.comm</title>
<meta charrset="utf-8">
<style type=="text/css">
body {backgground-color:w white; font-famiily: sans-serif;}
.boton{padding:15px; widtth: 200px; textt-align:center; clear:both;
c
color: whitee; border-radius: 40px; backgrround: rgb(202,, 60, 60);}
</style>
<script typee="text/javascript">
function ejeemploWhile() {
var i = 0; var msg = '';
while (true)) {
i++;
msg = msg + '\t'+ i + '\n';
if (i==9) {breeak;}
}

aprenderraprogramar.co
om, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.

alert ('Bucle con while: \n'+ msg);

}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
<h3 class="boton" onclick="ejemploWhile()">Pulsa aqu</h3>
</body>
</html>

El resultado esperado es que se muestre lo siguiente:

Bucle con while:

1
2
3
4
5
6
7
8
9

En este cdigo hemos hecho algo un poco extrao. Como condicin a evaluar hemos puesto true.
Esto significa que la condicin es siempre verdadera, lo que en teora dara lugar a un bucle infinito y a
un bloqueo del ordenador. Sin embargo, utilizamos un contador auxiliar que inicializamos en cero y en
cada repeticin del bucle aumentamos en una unidad. A su vez, introducimos una condicin dentro del
bucle segn la cual cuando el contador alcanza el valor 9 se ejecuta la instruccin break.

Este ejemplo debe valernos solo como tal: en general la condicin de entrada al bucle ser una
expresin a evaluar como (i < 10 a >= 20 reductor < compresor) y no un valor true. Y en general la
salida a un bucle se realizar de forma natural mediante la evaluacin de la condicin y no mediante
una instruccin break;.

BUCLE CON INSTRUCCIN DO WHILE. EJEMPLO DE USO.

El bucle do while es muy similar al bucle while. La diferencia radica en cundo se evala la condicin
de salida del ciclo. En el bucle while esta evaluacin se realiza antes de entrar al ciclo, lo que significa
que el bucle puede no llegar ejecutarse. En cambio, en un bucle do while, la evaluacin se hace
despus de la primera ejecucin del ciclo, lo que significa que el bucle obligatoriamente se ejecuta al
menos en una ocasin. Despus de la condicin del while debemos escribir punto y coma. Por ejemplo
while (contador < 10);

A modo de ejercicio, escribe este cdigo y comprueba los resultados que se obtienen con l:

aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">body {background-color:white; font-family: sans-serif;}
.boton{padding:15px; width: 200px; text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
</style>
<script type="text/javascript">
function ejemploDoWhile() {
var contador = 0;var msg = '';
do { msg = msg + '\t Contando... '+ (contador+1) + '\n';
contador +=1;
} while (contador < 10);
alert ('Bucle con do ... while: \n'+ msg);
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
<h3 class="boton" onclick="ejemploDoWhile()">Pulsa aqu</h3>
</body></html>

El resultado esperado es que se muestre lo siguiente:

Bucle con do ... while:

Contando... 1
Contando... 2
Contando... 3
Contando... 4
Contando... 5
Contando... 6
Contando... 7
Contando... 8
Contando... 9
Contando... 10

BUCLES ETIQUETADOS O CON NOMBRE. SENTENCIA CONTINUE

En JavaScript las sentencias pueden llevar un nombre o etiqueta que los identifique y que sirvan para
hacer referencia a ellos en algn momento. Por ejemplo los bucles podemos etiquetarlos como vemos
en el siguiente ejemplo:

msg = msg + 'Bucles etiquetados: \n'

bucleExterior: for(var i=0; i<2; i++) {
bucleInterior: for (var j=0; j<5; j++){
msg = msg + 'i vale ' + i + ', j vale ' + j + ', i*j = ' + (i*j) +'\n';
}
}

aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.

La sentencia continue da lugar a que se salte a la siguiente iteracin del bucle sin ejecutar las
instrucciones existentes despus de la sentencia continue. Si escribimos continue; la sentencia afecta al
bucle ms prximo a donde se encuentre la sentencia. Si escribimos continue
nombreDeLaEtiquetaDelBucle; la sentencia afecta a aquel bucle que hayamos referenciado.

El siguiente cdigo nos muestra ejemplos de uso de continue en bucles etiquetados y sin etiquetar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
.boton{padding:15px; width: 200px; text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
</style>
<script type="text/javascript">
function ejemploBuclesConContinue() {
var contador = 0;
var msg = 'Bucle do con ejemplo de continue: \n';
do {
if (contador>5 && contador < 12) {contador +=1; continue;}
msg = msg + '\t Contando... '+ (contador+1) + '\n';
//Otras instrucciones aqu...
contador +=1;
} while (contador < 20);
msg = msg + 'Bucles etiquetados y uso de continue referenciado: \n'
bucleExterior: for(var i=0; i<2; i++) {
bucleInterior: for (var j=0; j<5; j++){
comprobarSijvale2: if (j==2) {continue bucleExterior;}
msg = msg + 'i vale ' + i + ', j vale ' + j + ', i*j = ' + (i*j) +'\n';
}
}
msg = msg + 'Bucles sin etiquetar y continue sin referenciar: \n'
bucleExterior: for(var i=0; i<2; i++) {
bucleInterior: for (var j=0; j<5; j++){
if (j==2) {continue;}
msg = msg + 'i vale ' + i + ', j vale ' + j + ', i*j = ' + (i*j) +'\n';
}
}
alert (msg);
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
<h3 class="boton" onclick="ejemploBuclesConContinue()">Pulsa aqu</h3>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.

El resultado esperado de ejecucin es el siguiente. Comprubalo y razona el por qu de este resultado:

Bucle do con ejemplo de continue:

Contando... 1
Contando... 2
Contando... 3
Contando... 4
Contando... 5
Contando... 6
Contando... 13
Contando... 14
Contando... 15
Contando... 16
Contando... 17
Contando... 18
Contando... 19
Contando... 20
Bucles etiquetados y uso de continue referenciado:
i vale 0, j vale 0, i*j = 0
i vale 0, j vale 1, i*j = 0
i vale 1, j vale 0, i*j = 0
i vale 1, j vale 1, i*j = 1
Bucles sin etiquetar y continue sin referenciar:
i vale 0, j vale 0, i*j = 0
i vale 0, j vale 1, i*j = 0
i vale 0, j vale 3, i*j = 0
i vale 0, j vale 4, i*j = 0
i vale 1, j vale 0, i*j = 0
i vale 1, j vale 1, i*j = 1
i vale 1, j vale 3, i*j = 3
i vale 1, j vale 4, i*j = 4

EJERCICIO

1) Crea una funcin que pida una palabra al usuario y usando un bucle while y el mtodo charAt,
muestre cada una de las letras que componen la entrada. Por ejemplo si se introduce ave debe
mostrar:
Letra 1: a Letra 2: v Letra 3: e

Puedes comprobar si tus respuestas son correctas consultando en los foros aprenderaprogramar.com.

Prxima entrega: CU01133E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Funcin evaal. getElementssByClassName para seleccionar nodos.

FUNCIN EVAL. GETEELEMENTSBY

YCLASSNAME.

La funci
n eval tien ne diferentes aplicacion
nes en JavaScript. Vereemos la aplicacin mss bsica y
comentarremos algunos aspectos de esta fun ncin cuyo uso
u es poco recomendado. Veremo os tambin
una posib bilidad adicional para seleccionar nodos
n segnn el valor de su atributto class. La sintaxis a
emplear es getElemeentsByClassN Name. Se uttiliza ClassName en luggar de Class porque claass es una
palabra reeservada JavvaScript.

FUNCIN EVAL.

n eval tien
La funci ne diferentees aplicacion nes en JavaaScript. Algunos experttos en proggramacin
desaconseejan directamente su usso indicando o que debe evitarse su utilizacin (es famosa la frase de
Douglas Crockford
C eeval is evil, eval es el demonio). Ottros expertoss indican qu
ue es una he
erramienta
que bien usada puede ser muyy til. Nosottros no vam mos a decan ntarnos por una u otraa postura.
Simplemeente expondrremos algunas cuestionees bsicas sobre esta funcin.

La sintaxiss de la funci
n es la siguiiente:

evaal ('cadenaDeTextoPasad
daALaFuncio
on');

El valor dee cadenaDeTTextoPasadaALaFuncion puede ser:

a) Una expresin JavaaScript. Por ejemplo

e '3+2'. En este casso eval('3+2'') evala la eexpresin y devuelve
d el
valor 5, ess decir, el resultado de evaluar
e la expresin. Poddramos escribir valorOpeeracion = eval('3+2'); y
valorOperracion tomarra el valor 5.

b) Una sentencia o fraagmento de cdigo

c JavaSScript. Por ejemplo:

eval('movverImagen(\'adelante\')')); dar luggar a que e se ejecu ute la llam mada a laa funcin
moverImaagen('adelan nte') y que see devuelva, si
s existe, un valor de retoorno. Fjate que para po
oder incluir
la comillaa simple den
ntro de la cadena de texxto hemos usado
u el escaape del carcter con el simbolo \.
Tambin sera
s vlido usar
u esta sintaxis:

eval("movverImagen('aadelante')");

Como decimos eval ('cadenaDeTTextoPasadaA ALaFuncion'); tiene doss implicacionnes: una evaaluacin o
ejecucin, y la obtenccin de un vaalor de retorno (si existe
e). De este modo
m la funccin eval pue
ede usarse
como argumento paraa otras funciones, por ejeemplo:

alert(Hem
mos obtenido
o un resultad
do: ' + eval("m
moverImage
en('adelante')"));

aprenderraprogramar.co
om, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.

El resultado ser el contenido de la sentencia return de la funcin si exista. En caso de no existir un

valor de retorno este ser un valor no vlido como undefined.

Veamos un ejemplo un poco ms elaborado donde se utiliza eval para hacer una llamada a una funcin:

function componer(sentido) {
var accion = 'mover';
var sobreElemento = 'Imagen';
var haciaDonde = sentido;
var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
alert ('La unin del texto genera ' + llamada);
eval(llamada);
}

En este ejemplo hemos compuesto un texto a partir de las partes mover, Imagen, y un parmetro
sentido. Si sentido es igual a 'adelante' por ejemplo, el resultado es que se ejecutar
eval(moverImagen('adelante')); y por tanto se ejecuta la funcin moverImagen('adelante')

Esto nos permite invocar funciones compuestas a partir de fragmentos, donde cada fragmento puede
estar determinado por condicionales o por otras funciones.

Se sealan distintos inconvenientes para la funcin eval:

a) Genera cdigo difcil de leer, donde se mezcla texto con variables.

b) Resulta de ejecucin pesada y lenta para el intrprete, pudiendo dar lugar a que nuestra aplicacin
web responda mal o lentamente.

c) Puede poner en riesgo la seguridad de las aplicaciones, ya que si por ejemplo introducimos en eval
una cadena proporcionada por un usuario malicioso, ste puede intentar que se ejecute cdigo que
comprometa la seguridad.

Iremos conociendo alternativas al uso de eval, pero de momento sealaremos que el siguiente cdigo
genera el mismo resultado que el anterior evitando el uso de eval:

function componer(sentido) {
var accion = 'mover';
var sobreElemento = 'Imagen';
var haciaDonde = sentido;
var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
alert ('La unin del texto genera ' + llamada);
var tmpFunc = new Function(llamada);
tmpFunc();
}

aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.

GETELEMENTSBYCLASSNAME

El acceso a un nodo concreto del DOM usando getElementById es muy frecuente, pero hay otras
maneras de acceder a los nodos del DOM. Ya conocemos algunas alternativas. Otra de ellas es usar
getElementsByClassName('valorClassBuscado'). Esta funcin nos devuelve un array conteniendo todos
los nodos DOM cuyo atributo class coincide con valorClassBuscado.

El orden en que aparecern los elementos en el array (comenzando con ndice cero) es el mismo en el
que aparezcan en el cdigo de la pgina web. Ejemplo:

var elementosDestacado = document.getElementsByClassName('destacado');

Nos devolver un array con todos los nodos de tipo element que tengan como atributo html class
destacado, empezando con ndice cero: elementosDestacado[0], elementosDestacado[1],
elementosDestacado[2], elementosDestacado[3] hasta el ndice que sea necesario para abarcar
tantos elementos como haya en el cdigo con el atributo class=destacado. Podemos obtener los
nodos de cualquier tipo de etiqueta que lleve el atributo class (div, span, input, etc.).

A diferencia del atributo id que ha de ser nico para un elemento dentro de una pgina web, el atributo
class puede aparecer repetido en diversos elementos del cdigo HTML de la pgina web. Normalmente
se usa para identificar partes de la pgina web a la que deben aplicrsele las mismas reglas CSS.

Tener en cuenta que escribimos document.getElementsByClassName('destacado') porque queremos

empezar la bsqueda desde el nodo raz del DOM, es decir, el nodo document (as exploramos todos los
nodos). Podramos empezar la bsqueda por otro nodo si resultara de inters.

CREAR UNA CALCULADORA SIMPLE CON JAVASCRIPT

A continuacin vamos a estudiar un ejemplo de cdigo donde creamos una calculadora simple usando
JavaScript con la sintaxis getElementsByClassName y la funcin eval para realizar los clculos.

aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.

Hemos incluido cdigo CSS para crear una visualizacin agradable. As, CSS se encarga principalmente
del aspecto y JavaScript se encarga principalmente de la parte dinmica (respuesta ante las acciones del
usuario). Escribe este cdigo y comprueba sus resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center;}
#calculadora { font: bold 14px Arial,sans-serif; background-color: #9DD2EA; border-radius: 3px; height: auto; margin: 0 auto;
padding: 20px 20px 9px; width: 285px;}
.parteSuperior .pantalla { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px;
height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;}
.teclas, .parteSuperior {overflow: hidden; }
.teclas span, .parteSuperior span.limpiar { background-color: #FFFFFF; border-radius: 3px; color: #888888; cursor: pointer;
float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0; text-align: center; transition: all 0.4s ease 0s; width: 66px;}
.parteSuperior span.limpiar { background-color:#FF7C87;}
.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover {
background-color: #9C89F6; color: #FFFFFF;
}
</style>
<script type="text/javascript">
function pulsada (tecla) {
var listaNodosPantalla = document.getElementsByClassName('pantalla');
var nodoTextoPantalla = listaNodosPantalla[0].firstChild;
switch(tecla) {
case 'C':
nodoTextoPantalla.nodeValue = ' ';
break;
case '=':
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
break;
default:
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
break;
}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo calculadora JavaScript</h3></div>
<!-- Calculadora -->
<div id="calculadora">
<!-- pantalla y tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
</div>
<div class="teclas">
<!-- operadores y otras teclas -->
<span onclick="pulsada('7')">7</span>
<span onclick="pulsada('8')">8</span>

aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.

<span onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span onclick="pulsada('4')">4</span>
<span onclick="pulsada('5')">5</span>
<span onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span onclick="pulsada('1')">1</span>
<span onclick="pulsada('2')">2</span>
<span onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')"></span>
<span onclick="pulsada('0')">0</span>
<span onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
</body>
</html>

De este cdigo podemos comentar lo siguiente. Debes ser capaz de comprender cmo el cdigo CSS da
lugar a la visualizacin de la calculadora. Debes ser capaz de comprender por qu la invocacin
listaNodosPantalla[0].firstChild nos permite acceder al nodo de texto con el contenido de la pantalla de
la calculadora. Debes ser capaz de comprender cmo manipulamos el contenido de la pantalla
accediendo al nodo texto y cmo modificamos su contenido y mostramos resultados usando la funcin
eval. Si tienes dudas consulta en los foros aprenderaprogramar.com

EJERCICIOS

1) Modifica el cdigo del ejemplo de la calculadora javascript para que en lugar del condicional switch
uses el condicional if (con if else if else if cuando sea necesario).

2) Utilizando el ejemplo de cdigo que usa la funcin eval en la funcin <<function

componer(sentido)>> que hemos visto dentro del cdigo de los ejemplos, crea una pgina web donde
existan dos botones que pongan Adelante y Atrs, de modo que cuando se pulsen den lugar a que
se llame la funcin componer(sentido). En esta funcin, a travs de la funcin eval se ejecutar
moverImagen('adelante') moverImagen('atras') segn el parmetro recibido. La funcin
moverImagen(sentido) puede contener un simple mensaje indicando el valor del parmetro
<<sentido>> recibido.

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01134E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
querySelecttorAll y querySelector con JavvaScript.

QUERYSELECTORALL Y QUERYSELLECTOR JAVA

ASCRIPT

Hemos visto que JavaaScript provvee mtodoss para acced der y manipu
ular nodos ddel DOM, en n concreto
getElementById, getEElementsByTTagName y getElementsByName, que q nos permiten acce eder a un
elemento o por su valorr de atributo
o id, o a la co
oleccin de elementos
e cu
uya etiqueta es de un detterminado
tipo o tien
ne como atriibuto name un valor con ncreto. Verem
mos ahora mtodos
m que nos permiteen acceder
a cualquieer nodo iden
ntificado por un selector CSS especficco.

QUERYSELECTORALL Y QUERYSELLECTOR

Si recordaamos la sintaaxis CSS, a trravs de seleectores podaamos definirr de forma mmuy especficca cmo se
deban a aplicar
a estilo
os dentro de nuestra pgina web. Porr ejemplo a travs
t de la rregla:

#menu1 div.destacad
d o a {backgro
ound-color: yellow;}
y

Se consigue que los elementos

e a (links) dentro de eleme
entos div cuyyo atributo cclass es desstacado y
estn den
ntro de un elemento con id menu1 see muestren con
c color de fondo amariillo.

El selecto
or #menu1 div.destacad do a es un selector complejo que no resultarra alcanzable con las
tcnicas de acceso a nodos qu ue hemos visto
v hasta el momento. Por ello surgen loss mtodos
querySeleector y queryySelectorAll, que permiteen acceder a nodos a travvs de un selector CSS.

La sintaxiss a emplear es
e la siguientte:

document.querySelectorAll("aq
qu el selecto
or CSS");

plo documen
Por ejemp nt.querySelectorAll("#callculadora .te
eclas span.op
perador");

La sintaxiss a incluir deentro de las comillas parra especificar el selector es exactamente la mism ma sintaxis
que empleamos con CSS. C Dentro de la especifficacin se pueden
p indicar varios selectores sepaarados por
comas, al igual que haacemos con CSS C para aplicar una misma regla a distintos
d elemmentos.

Esta instrruccin nos devuelve un array de nodos del DOM D que cumplen con n la especificcacin del
selector CSS.
C Los ndicces del arrayy sern 0, 1, 2, hasta un
u nmero inndeterminad
do (que depe ender del
nmero de d nodos qu ue cumplan con el seleector). Los nodos
n estarn ordenado
os segn su orden de
aparicin en el rbol del
d DOM quee define el do ocumento HTML.

Frente al mtodo gen

neral querySelectorAll exxiste otro mtodo especfico, querySSelector, que
e devuelve
un nico nodo que cumple
c la esspecificacin
n del selecto
or. Este nicco nodo devvuelto ser el
e primero
encontraddo que cump
pla con la esp
pecificacin dentro del rbol del DOM M.

aprenderraprogramar.co
om, 2006-2029
querySelectorAll y querySelector con JavaScript.

La sintaxis es:

document.querySelector ("aqu el selector CSS ");

Tpicamente el array de nodos (o el nodo individual) obtenido con estos mtodos los almacenaremos
dentro de una variable JavaScript para despus realizar algn tipo de tratamiento. Por ejemplo:

var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");

var nodoIgual = document.querySelector (".igual");

Una vez tenemos una coleccin de nodos en una variable, podemos recorrerla usando un bucle for. Por
ejemplo:

for (var i=0; i<listaNodosOperadores.length; i++) {

// Ejecutar acciones sobre el nodo listaNodosOperadores[i].

Los mtodos querySelector se pueden aplicar sobre document como hemos visto (para seleccionar
todos los nodos hijos del nodo raz que cumplen un criterio), pero tambin sobre un nodo especificado
obtenido de otra manera. Por ejemplo:

var listaNodos = document.getElementById("calculadora").querySelectorAll(".teclas span.numero");

Aqu primero se obtiene el nodo cuyo id es calculadora y despus se obtienen todos los nodos hijos
de calculadora cuyo que son elementos span con class=numero que se encuentran dentro de un
elemento con un valor class=teclas

En este caso lo indicado anteriormente se puede escribir tambin como:

var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");

Esta ltima forma de escritura resulta quizs ms clara, y por eso la consideraremos preferible cuando
podamos elegir entre usar una forma u otra.

Escribe y prueba el siguiente cdigo, donde vemos un ejemplo de uso de querySelector y de

querySelectorAll. Ten en cuenta que en algunos navegadores, en especial los ms antiguos, quizs no se
obtengan los resultados deseados.

aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center;}
#calculadora { font: bold 14px Arial,sans-serif; background-color: #9DD2EA;
border-radius: 3px; height: auto; margin: 0 auto; padding: 20px 20px 9px; width: 295px;
}
.parteSuperior .pantalla {
background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px;
height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;
}
.teclas, .parteSuperior {overflow: hidden; }
.teclas span, .parteSuperior span.limpiar { background-color: #FFFFFF; border-radius: 3px; color: #888888;
cursor: pointer; float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0;
text-align: center; transition: all 0.4s ease 0s; width: 66px;
}
.parteSuperior span.limpiar { background-color:#FF7C87;}
.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover { background-color: #9C89F6;
color: #FFFFFF; }

#contenedor {width:285px;margin: 40px auto; overflow:hidden;}

#marcaNumeros, #marcaOperadores {padding:15px; width: 90px; display: inline-block;
margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#marcaNumeros:hover, #marcaOperadores:hover {background: rgb(66, 184, 221);}
</style>

<script type="text/javascript">

function marcarOperadores() {
var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
var nodoIgual = document.querySelector (".igual");
for (var i=0; i<listaNodosOperadores.length; i++) {
listaNodosOperadores[i].style.backgroundColor = "yellow";
listaNodosOperadores[i].style.color = "black";
listaNodosOperadores[i].style.border = "solid 1px";
}
nodoIgual.style.backgroundColor = "yellow";
nodoIgual.style.color = "black";
nodoIgual.style.border = "solid 1px";
}

function marcarNumeros() {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
for (var i=0; i<listaNodosNumeros.length; i++) {
listaNodosNumeros[i].style.backgroundColor = "black";
listaNodosNumeros[i].style.color = "white";
listaNodosNumeros[i].style.border = "solid 1px";
}
}
</script>
</head>

aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.

<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>
<!-- Calculadora -->
<div id="calculadora">
<!-- pantalla y tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
</div>

<div class="teclas">
<!-- operadores y otras teclas -->
<span class = "numero" onclick="pulsada('7')">7</span>
<span class = "numero" onclick="pulsada('8')">8</span>
<span class = "numero" onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class = "numero" onclick="pulsada('4')">4</span>
<span class = "numero" onclick="pulsada('5')">5</span>
<span class = "numero" onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class = "numero" onclick="pulsada('1')">1</span>
<span class = "numero" onclick="pulsada('2')">2</span>
<span class = "numero" onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')"></span>
<span class = "numero" onclick="pulsada('0')">0</span>
<span class ="punto" onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
<div id="contenedor">
<div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar nmeros </div>
<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
</div>
</body>
</html>

El resultado esperado es que se muestre una calculadora y en su parte inferior dos botones: Marcar
nmeros y Marcar operadores. Al pulsar sobre Marcar nmeros las teclas correspondientes a los
nmeros de la calculadora debern verse de color negro con los nmeros de color blanco. Al pulsar
sobre Marcar operadores las teclas correspondientes a los operadores (+, -, =, etc.) debern verse de
color amarillo con los operadores de color negro.

Fjate en el cdigo: la seleccin de las teclas afectadas y el cambio de estilos se hace gracias al uso de
los operadores querySelectorAll y querySelector de JavaScript.

aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.

EJERCICIO

1) Modifica el cdigo del ejemplo de la calculadora JavaScript para que adems de tener dos botones
que permitan marcar nmeros y operadores con distintos colores tenga:

a) Un botn que permita marcar la tecla C con color rojo fuerte y smbolo C en blanco.

b) Un botn que permita marcar la tecla con el punto con color violeta fuerte y smbolo . en blanco.

c) Un botn que permita marcar la pantalla visor de la calculadora en azul oscuro.

d) Un botn que permita limpiar todo lo que se haya marcado y volver a la situacin original (es decir,
que la calculadora se vea tal y como se vea inicialmente).

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01135E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Recorrer co
olecciones JavaSScript con for in.

RECORRER COLECCIO
ONES CON FO
OR IN

El recorrid
do de arrayss es posible usando
u un bucle
b for normal o un bucle while, doonde existe un control
explcito de los ndicces que se van
v recorrieendo (0, 1, 2, 3). JavaaScript perm mite recorrer arrays y
colecciones de objeto os usando un tipo especcial de bucle or in (que a su vez tie
e: el bucle fo ene ciertas
similitudees con el for each).
e

dades de un objeto es la siguiente:

La sintaxiss a emplear para recorreer las propied

for (nombreIndice in nombrreObjeto) {

... ejecucin
e de sentencias
}

En el caso
o concreto dee los arrays podemos
p esccribir tpicam
mente lo siguiente:

for (indice in no
ombreDelArrray) {
...
realizar operaciiones sobre nombreDelA
n Array[indice]....
...
}

En este c
digo vemoss cmo podemos usar reccorrer un arrray con un fo
or normal o, de forma eq
quivalente,
con un for in:

function ejemploForIn()
e {
var dato = [2, 6, 5, 1, 18,, 44];
var msgForNormal = '';
var msgForIn = '';
//For norrmal
for (var i==0; i<dato.lengtth; i++) { msgFo
orNormal = msggForNormal + dato[i] + ' - '; }
//For in
for (i in dato) { msgForInn = msgForIn + dato[i]
d + ' - '; }
alert ('mssgForNormal co ontiene ' + msgFForNormal + ' y msgForIn conttiene '+ msgForrIn);
}

Incorporaa el cdigo dentro

d de una
u pgina web w y comp prueba cmo o el resultad
do que obtie enes es el
siguiente:: msgForNormal contienee 2 - 6 - 5 - 1 - 18 - 44 - y msgForIn co
ontiene 2 - 6 - 5 - 1 - 18 - 44 -

aprenderraprogramar.co
om, 2006-2029
Recorrer colecciones JavaScript con for in.

Es decir, hemos recorrido el array con un for normal y con un for in. Es mejor usar un for tradicional o
un for in? Ambas formas resultan relativamente equivalentes y tiles, aunque en algunos casos
especficos puede interesar ms usar una forma u otra, y en algunos casos especficos no se obtienen
los mismos resultados usando ambas formas. Nosotros nos inclinamos preferentemente por el uso del
for tradicional, pero en determinadas circunstancias y para algunos usos especiales ms avanzados (de
los que hablaremos cuando estudiemos los objetos en JavaScript y el recorrido de las propiedades de
un objeto) puede ser interesante usar for - in.

Una cuestin a tener en cuenta cuando se hacen usos ms avanzados de for in es que el orden en que
se obtienen los elementos de la coleccin no tiene por qu coincidir con el orden de los ndices. En el
ejemplo anterior tenamos un array var dato = [2, 6, 5, 1, 18, 44]; y el orden esperado de recorrido es 2 -
6 - 5 - 1 - 18 44. Pero el for in no necesariamente respeta este orden, podra hacer un recorrido en un
orden aparentemente aleatorio como 18 - 6 - 44 - 1 5. Con los arrays probablemente no ocurra esto,
pero con otro tipo de colecciones s puede ocurrir. Por tanto al usar un for in podemos estar seguros
de que se van a recorrer todos los elementos en la coleccin, pero no podemos asegurar que ese
recorrido vaya a seguir un orden determinado. Si el orden es importante, ser mejor usar un for
tradicional u otro tipo de control.

Otra consideracin a tener en cuenta es el rendimiento o velocidad de ejecucin esperable cuando

utilizamos un for in respecto al que obtenemos cuando usamos un for tradicional. En general, si se
trata de un array pequeo las diferencias pueden resultar inapreciables. Sin embargo, con arrays de
muchos datos la ejecucin es mucho ms rpida utilizando un for tradicional.

EJERCICIO

1) Genera un script que pida cinco nmeros al usuario usando un bucle for normal (usa prompt para
pedir los datos y convirtelos a valor numrico posteriormente). Almacena los nmeros introducidos
por el usuario en un array. A continuacin usando un for in que recorra el array, muestra un mensaje
informando del resultado de multiplicar cada uno de los nmeros por 3. Ejemplo:

Se pedirn al usuario cinco nmeros, supongamos que introduce 1, 3, 9, 10 y 7

A continuacin se mostrar el mensaje:

Multiplicamos por 5 los nmeros introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01136E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Diferencia entre
e NodeList y array. textCo
ontent, innerTe
ext.

DIFERENC
CIA ENTRE NODELIST Y ARRAY
A

Sabemos que instruccciones comoo getElementtsByTagNam me nos devueelven una co oleccin de nodos
n que
os momento
en alguno os se denom
mina array de nodos. Sin embargo o, lo que deevuelven estte tipo de
mtodos no es exactaamente un arrray, sino una estructura de datos deenominada N NodeList.

El hecho ded que getElementsByTaagName, getElementsByN Name, queryySelectorAll no devuelvan un array

puede lleevarnos a co onfusin en algunos mo omentos. Po or ejemplo, podemos p pensar en re ecorrer un
NodeList usando un bucle for in, y no obtener o los resultados esperados p porque una coleccin
NodeList no admite el uso de for in (s admiite sin embargo el uso de un for trad dicional). Perro adems
s propias de los arrays que
del for in,, hay otras posibilidades
p q se pierden cuando sse usan NodeLists. Por
ello en alggunos casos puede resulttar de inters la conversin de un No
odeList en un
n array.

Una pecuuliaridad de los NodeLiist es que son s coleccio

ones dinmiicas cuyo co ontenido see actualiza
automticcamente cuaando la pgina web cam mbia dinmiccamente. Sup pongamos u una pgina web
w donde
tenemos cinco elementos div y ussamos var no odosDiv = ge
etElementsByTagName(div); para re escatarlos.
En ese momento
m la coleccin no odosDiv tien ne 5 elemen ntos. Suponggamos ahoraa (no vamoss a indicar
cmo haccerlo, con la idea nos bassta), que usaando JavaScript aadimos un nuevo eelemento divv de modo
que ahoraa en la pgina web teneemos 6 elem mentos div. Debido
D mico de los nodeLists,
al caarcter dinm
nodosDiv pasa autom mticamente a tener 6 eleementos. Sin n embargo, si mos con arrays, debido
s trabajram
a su carcter estticco, el array seguira teniendo 5 ellementos (a no ser quee a travs de cdigo
aadiram
mos instrucciones expressas para inco orporar el nuevo elementto).

Por tanto los NodeLists podemos decir que tieenen ciertas similitudes con los arrayys y ciertas diferencias
d
con estoss. Los NodeList no tienen algunas posibilidade es que tieneen los arrayss, pero a caambio son
dinmicoss, lo que pueede resultar de
d gran interrs en determinadas circcunstancias.

ACCEDER AL TEXTO DENTRO

D DE NODOS:
N TEXTTCONTENT (INNERTEXT)
( )

Hemos visto que es posible

p acceder al conteenido de un nodo del DO
OM tipo textto usando nodeValue.
n
Por ejempplo una expresin como document.childNodes[1].childNodess[2].nodeValue nos pued de permitir
extraer el texto de un nodo de tip
po texto.

Tambin podemos acceder a nodos deel DOM y extraer teexto usando o expresion nes como
documentt.firstChild.fiirstChild.nexxtSibling.nodeValue, o co
ombinando expresiones
e de este tipo con el uso
d
de childNodes.

Pero dadoo cmo se genera

g la esttructura de nodos del DOM,
D muchas veces el accceso a nodos de tipo
texto resu
ulta complicaado.

aprenderraprogramar.co
om, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.

TIPOS DE NODOS EN EL DOM

Element body

id Attribute
Element div class Attribute

Element h1 h2 Element

Portal web span class , para aprender Didctica y

Attribute divulgacin
Text Element Text de la
programacin

Text
aprenderaprogramar.com Text

El esquema anterior representa que dentro del elemento div se encuentra el texto Portal web
aprenderaprogramar.com, para aprender. Didctica y divulgacin de la programacin. Sin embargo ese
texto se encuentra repartido por diferentes nodos debido a la presencia de subdivisiones dentro del
elemento div creadas por h1, h2, span, etc.

Si queremos extraer (o definir) el texto contenido en todos los nodos derivados de un nodo padre
podemos usar la propiedad textContent de los nodos.

La sintaxis a emplear normalmente ser del tipo:

var textoEnElNodoYSusHijos = nombreDelNodo.textContent;

Tambin podemos escribir nombreDelNodo.textContent = El ganador es Barack Obama;

Es importante resaltar que con textContent se extrae no slo el texto directamente asociado al nodo,
sino tambin el texto contenido en otros nodos hijos.

En el ejemplo grfico anterior, si extraemos el textContent del nodo div obtendremos Portal web
aprenderaprogramar.com, para aprender. Didctica y divulgacin de la programacin, que incluye el
texto encontrado en todos sus nodos hijos.

Hay una alternativa de funcionamiento muy similar a textContent que ha sido utilizada por algunos
navegadores: innerText. Su comportamiento es muy similar al de textContent, aunque no exactamente
igual. innerText no es reconocido por todos los navegadores y no se considera un estndar vlido, por
ello no le prestaremos ms atencin y no lo usaremos. No obstante, hemos considerado conveniente
citarlo por si lo encuentras mientras revisas el cdigo en alguna pgina web.

A modo de resumen: usaremos textContent para extraer el contenido de texto dentro de un nodo y sus
nodos hijos.

aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.

RECORRER NODOS DEL DOM

Es frecuente que se escriba que var elementosDiv = document.getElementsByTagName('div') nos

devolver un array con todos los nodos de tipo element cuya etiqueta sea div, empezando con ndice
cero: elementosDiv[0], elementosDiv[1], elementosDiv[2], elementosDiv[3]

Si esto es as, debera ser posible recorrer la coleccin de nodos obtenidos usando un for in. Sin
embargo, es posible que nos encontremos que el for in no sirva para recorrer los nodos obtenidos por
un mtodo de seleccin de nodos del DOM. Por qu?

Vamos a ver primero un ejemplo de cdigo donde podemos comprobarlo y despus lo comentaremos.
Escribe este cdigo y gurdalo con un nombre como ejemplo.html. Aqu usamos textContent,
innerText, bucles for normales y bucles for in. Comprueba los resultados en tu navegador:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; margin:25px;}
#pulsador {padding:15px; width: auto; display: inline-block;
margin: 25px; cursor: pointer;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#pulsador:hover, #marcaOperadores:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function ejemploForIn() {
var nodoSpan = document.getElementsByTagName('span');
var msg = 'Primer for \n';
alert ('items en nodoSpan son ' + nodoSpan.length);
//Primer for
for (var i=0; i< nodoSpan.length; i++) { msg = msg + i + ': contiene ' +nodoSpan[i].textContent + ' , y nodeValue
'+nodoSpan[i].firstChild.nodeValue +' ** \n'; }
alert ('Contenido de los nodos span \n ' + msg);
msg = 'Segundo for \n';
//Segundo for
for (var i=0; i< nodoSpan.length; i++) { msg = msg + i + ': contiene ' +nodoSpan[i].innerText + '** \n'; }
alert ('Contenido de los nodos span \n ' + msg);
msg = 'Tercer for \n';
//Tercer for
for (i in nodoSpan) { msg = msg + i + ': contiene ' + nodoSpan[i].textContent + ' -- \n'; }
alert ('Contenido de los nodos span \n ' + msg);
}
</script>
</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo for in JavaScript</h3>
</div>
<div id="calculadora"><span>7</span><span>+</span><span>4</span><span>-</span>
<span>1</span><span></span><span>0</span><span>.</span>
<span>=</span><span>x <p>Genera un <b>nuevo</b> nodo</p></span>
</div>
<div id ="pulsador" onclick="ejemploForIn()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.

El resultado esperado depende del navegador que utilicemos. Aqu vamos a mostrar los resultados
obtenidos en dos navegadores diferentes:

Resultados navegador 1 Resultados navegador 2

items en nodoSpan son 10 items en nodoSpan son 10

Contenido de los nodos span Contenido de los nodos span
Primer for Primer for
0: contiene 7 , y nodeValue 7 ** 0: contiene 7 , y nodeValue 7 **
1: contiene + , y nodeValue + ** 1: contiene + , y nodeValue + **
2: contiene 4 , y nodeValue 4 ** 2: contiene 4 , y nodeValue 4 **
3: contiene - , y nodeValue - ** 3: contiene - , y nodeValue - **
4: contiene 1 , y nodeValue 1 ** 4: contiene 1 , y nodeValue 1 **
5: contiene , y nodeValue ** 5: contiene , y nodeValue **
6: contiene 0 , y nodeValue 0 ** 6: contiene 0 , y nodeValue 0 **
7: contiene . , y nodeValue . ** 7: contiene . , y nodeValue . **
8: contiene = , y nodeValue = ** 8: contiene = , y nodeValue = **
9: contiene x Genera un nuevo nodo , y nodeValue 9: contiene x Genera un nuevo nodo , y nodeValue
x ** x **
Contenido de los nodos span Contenido de los nodos span
Segundo for Segundo for
0: contiene undefined // 0: contiene 7 //
1: contiene undefined // 1: contiene + //
2: contiene undefined // 2: contiene 4 //
3: contiene undefined // 3: contiene - //
4: contiene undefined // 4: contiene 1 //
5: contiene undefined // 5: contiene //
6: contiene undefined // 6: contiene 0 //
7: contiene undefined // 7: contiene . //
8: contiene undefined // 8: contiene = //
9: contiene undefined // 9: contiene x
Contenido de los nodos span Genera un nuevo nodo //
Tercer for Tercer for
0: contiene 7 -- 0: contiene 7 --
1: contiene + -- 1: contiene + --
2: contiene 4 -- 2: contiene 4 --
3: contiene - -- 3: contiene - --
4: contiene 1 -- 4: contiene 1 --
5: contiene -- 5: contiene --
6: contiene 0 -- 6: contiene 0 --
7: contiene . -- 7: contiene . --
8: contiene = -- 8: contiene = --
9: contiene x Genera un nuevo nodo -- 9: contiene x Genera un nuevo nodo
item: contiene undefined -- length: contiene undefined --
namedItem: contiene undefined -- item: contiene undefined --
@@iterator: contiene undefined -- namedItem: contiene undefined --
length: contiene undefined --

Del resultado obtenido podemos sealar lo siguiente:

1) Se pueden obtener distintos resultados ejecutando un mismo cdigo en diferentes navegadores, lo

cual es un problema a la hora de crear desarrollos web. Debemos asumirlo y tenerlo en cuenta en la
medida de lo posible, ya que no hay forma de esquivarlo.

aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.

2) El resultado de recorrer una coleccin de nodos con document.getElementsByTagName('span'); no

es el mismo si usamos un for tradicional que si usamos un for in. Esto nos indica que las colecciones de
nodos que devuelven estos mtodos no son arrays propiamente dichos. Pero si no son arrays,
entonces qu son? Son objetos que tienen similitudes con los arrays, denominados NodeList o listas de
nodos. Los NodeLists son objetos a veces se dice que son objetos de tipo array (array-like objects). Sin
embargo, no disponen de todas las posibilidades de que dispone un array. Una de las posibilidades de
que no disponen, es el recorrido mediante bucles for in. Por eso cuando intentamos recorrer una
coleccin de nodos con un for in obtenemos resultados extraos, que incluso pueden ser diferentes de
un navegador a otro.

3) Un navegador reconoce innerText pero el otro no. Como hemos dicho, preferiremos usar
textContent como mtodo para extraer texto, pero nos podremos encontrar cdigo donde aparezca
innerText. Algunos navegadores tratan innerText como si fuera textContent, otros de forma
ligeramente diferente, y otros directamente no reconocen innerText.

EJERCICIO

Crea un documento html con un texto en una etiqueta h1 como Ejercicio curso
aprenderaprogramar.com y un div a continuacin. Genera un script que pida cinco nmeros al usuario
usando un bucle for normal (usa prompt para pedir los datos y convirtelos a valor numrico
posteriormente). Almacena los nmeros introducidos por el usuario en un array. A continuacin,
accede al nodo del div y establece que muestre un texto informando del resultado de multiplicar cada
uno de los nmeros por 3 (para ello usa textContent). Ejemplo:

Al cargar la pgina aparecer: Ejercicio curso aprenderaprogramar.com

(div vaco)

Se pedirn al usuario cinco nmeros, supongamos que introduce 1, 3, 9, 10 y 7

A continuacin en la pgina se visualizar: Ejercicio curso aprenderaprogramar.com

Multiplicamos por 5 los nmeros introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.

Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01137E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Versiones de
d JavaScript. Diferencia
D con ECMAScript-26
E 2.

VERSIONEES DE JAVASSCRIPT

Cuando coomenzamos el curso indicamos que bamos a centrarnos en aprender lass bases fundamentales
para usarr JavaScript del lado deel cliente, sin
n entrar a detallar
d todaas las instrucciones y de
etalles del
lenguaje, ni las difereencias entre versiones. No obstantee, en este momento
m vammos a hacerr un break
para cono
ocer algunos aspectos dee inters.

ALGO DE HISTORIA. DE
D NETSCAPEE A ECMA IN
NTERNATION
NAL.

En los aos 90 comeenz a usarsse a gran esscala interne et por partee de una gran masa de e usuarios,
despus ded una etapaa introductorria donde se produjo el desarrollo
d y nacimiento dde ese gran fenmeno
cultural. En las etapaas iniciales de internet no existan wifi, ADSL, fibra pticaa o cualquie era de los
adelantoss que hoy da d nos pareecen comunes. Lo ms comn era la conexin n a travs de
d la lnea
telefnicaa fija de los hogares
h (quee quedaba interrumpida mientras se haca uso o de internet) a travs
de un m dem, y las velocidades
v de transmisiin de datoss eran muy lentas. La naavegacin se haca con
frecuenciaa tediosa deebida a la leentitud de carga
c de lass pginas, y cmo mejo orar la experiencia de
navegacin, comodidaad y velocidaad eran un asunto cande ente.

Este asunnto ha tenid do respuestta en mltip ples vertientes: tendido o de nuevass redes de cableado,
aparicin de las redess inalmbricaas, mejora dee los servido
ores, mejora de los comp
putadores pe
ersonales y
mejora dee los navegaddores y lenguajes de proogramacin sons algunos ded los que poodemos citar.

La creacin de JavaSccript se le attribuye a Breendan Eich, matemtico

m y tecnlogo
o estadounid
dense. Eich
fue contrratado por Netscape Communicat
C ions Corporration, en aquel
a momeento la emp presa que
desarrollaaba el naveggador ms difundido de la l poca: Neetscape. Dentro de Netsccape y como o forma de
dar respuesta a la meejora de la exxperiencia dee navegacin n y velocidad
d de operacin de las pginas web
fue creado JavaScript en 1995.

La adopcin del nomb bre JavaScrript se atribbuye a motivvos de markeeting, tratando de aprovvechar que
Java era un lenguajee de program macin que estaba adquiriendo graan popularid dad y que un nombre
similar po
oda hacer que
q el nuevo o lenguaje fu uera atractivvo. Pero salvvando algun
nas similitudes, ambos
lenguajes son bien disstintos. Su principal
p pareecido podem
mos decir quee es el nomb bre y algunos aspectos
de sintaxis, ya que su finalidad y fiilosofa son muy
m distinto os.

Entre las diferentes empresas

e y lenguajes qu ue pugnaban por conveertirse en el lenguaje de el lado del
servidor ms
m usado fu ue emergien ndo JavaScrippt como ganador. A finalles de 1996 Netscape infform que
traspasab
ba la responssabilidad de definir y estandarizar JavvaScript a un
na organizaccin internaccional para
el desarro ndares en el sector de teecnologas de la informaacin y comu
ollo de estn unicacin deenominada
Ecma Intternational. Esta organizacin tuvo o su origen n en la Eurropean Com mputer Manufacturers
on (ECMA, o Asociacin Europea de fabricantes de computaadores). En rrealidad ya no
Associatio n se trata

aprenderraprogramar.co
om, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.

de una organizacin europea, sino plenamente internacional, que se define como un organismo que
asocia a productores de tecnologas de informacin y comunicacin.

Ecma International es el organismo actualmente responsable de la definicin de la especificacin oficial

JavaScript, a la que se denomina ECMAScript. En Ecma International participan grandes empresas
relacionadas con internet, computadores y telecomunicaciones, entre las que podemos citar Microsoft,
Apple, Google, Yahoo, Toshiba, IBM, Hitachi, Fujitsu, Intel, AMD, Adobe Systems, eBay, Hewlett
Packard, Konica Minolta, Sony, etc. y tambin universidades e instituciones sin nimo de lucro como
Stanford University, UEC Tokyo University, Mozilla Foundation y otras.

Ecma International trabaja en la estandarizacin en diversos frentes: lenguajes de programacin (C#,

Eiffel, C++, etc.), redes de telecomunicaciones, redes inalmbricas, seguridad de productos electrnicos,
aspectos ambientales relacionados con productos electrnicos y las telecomunicaciones, contaminacin
acstica, campos electromagnticos, etc. Cada estndar producido por Ecma International se plasma en
un documento y se le da una numeracin. Por ejemplo al estndar para JavaScript se le ha denominado
Standard ECMA-262.

Uno de los campos de trabajo de Ecma International es generar la especificacin oficial de JavaScript, a
la que se denomina ECMAScript Standard ECMA-262. Dicha especificacin es adoptada por las
diferentes empresas o entidades que desarrollan los navegadores web para que los navegadores
reconozcan JavaScript y ste pueda ser usado por todos los programadores web esperando (al menos
tericamente) poder usar todos el mismo lenguaje y obtener los mismos resultados. La realidad no
alcanza esta suposicin ideal, y lo cierto es que aunque todos los navegadores usan JavaScript a partir
de la especificacin ECMAScript, nos podemos encontrar con matices, diferentes especificidades y
diferentes resultados entre navegadores. Hay que reconocer sin embargo, que ha habido grandes
avances en lo que a estandarizacin se refiere.

VERSIONES DE JAVASCRIPT

JavaScript tiene hoy da como especificacin oficial la especificacin que desarrolla Ecma International,
denominada ECMASCript. Este estndar es desarrollado por un grupo de trabajo que define como
objetivos la estandarizacin del lenguaje de programacin ECMAScript, lenguaje de propsito general,
multiplataforma y neutral respecto de las empresas. La tarea de Ecma International comprende la
definicin de la sintaxis del lenguaje, su semntica, as como de las libreras y tecnologas
suplementarias que facilitan el desarrollo con este lenguaje (entre ellas API soporte para JavaScript).

Las evolucin de las versiones de JavaScript podemos resumirla as:

aprenderaprogramar.com, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.

1995. Primeras versiones de JavaScript, todava con nombres provisionales como Mocha,
LiveScript.

1997. Definicin del primer estndar JavaScript a cargo de Ecma International que fue
denominado ECMA-262 first edition tambin denominado JavaScript 1.2.

1998. Aparicin del segundo estndar JavaScript denominado ECMA-262 second edition
tambin denominado JavaScript 1.3.

2000. Aparicin de la especificacin del estndar JavaScript denominado ECMA-262 third

edition tambin denominado JavaScript 1.5.

2010. Aparicin de la especificacin del estndar JavaScript denominado ECMA-262 fifth edition
tambin denominado JavaScript 1.8.5.

2019. Fecha prevista para ECMA-262 sixth edition.

Hay algunas dudas que nos pueden surgir.

Por qu no existe ECMA-262 fourth edition? Esta especificacin no lleg nunca a publicarse, por lo
que se produjo directamente el salto desde ECMA-262 3rd edition hasta ECMA-262 5th edition.

Qu diferencia hay entre ECMAScript y JavaScript? Podemos decir que ambas cosas son la misma, si
bien podramos distinguir matices. ECMAScript es un estndar definido por ECMA International que es
luego implementado por distintas instituciones o empresas en sus navegadores. Para aludir al lenguaje
o implementacin que exactamente reconoce un navegador suele usarse el trmino JavaScript en lugar
de ECMAScript. La Mozilla Foundation, creadora del navegador Mozilla Firefox, mantiene una
numeracin de versiones (1.7, 1.8, 1.8.1, 1.8.5, 1.9, 1.15, 1.20 ) que indica la evolucin del intrprete
JavaScript dentro del navegador.

Por qu este lo de nombres en lugar de usar un nico nombre? Adems los citados tambin
podramos nombra a JavaScript de otras maneras: JScript, ISO/IEC 16262:2011, etc. Todo tiene su razn
de ser en motivos histricos, el hecho de que algunos nombres son marcas registradas y no pueden ser
usados sin el permiso del propietario de la marca, luchas entre organismos, empresas, la terminologa
propia de la estandarizacin, etc.

ESPECIFICACIN OFICIAL DE JAVASCRIPT

La especificacin oficial de JavaScript (ECMA-262) puede leerse o descargarse en formato pdf

accediendo a la direccin web http://www.ecma-international.org/

Ah tambin se pueden encontrar especificaciones oficiales de estndares relacionados con JavaScript

como el estndar ECMA-357 que define ECMAScript para XML, la integracin de JavaScript con XML.

aprenderaprogramar.com, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.

Qu inters tiene para nosotros la especificacin oficial? Tiene un inters relativo, ya que se trata de
un documento denso, extenso y que aborda todos los detalles de una especificacin oficial que puede
presentar algunas divergencias con lo que nos encontremos en la realidad trabajando con los
navegadores.

Nosotros lo consideraremos un documento de referencia donde podremos hacer consultas puntuales

(sobre todo a medida que usemos ms en profundidad el lenguaje).

En este curso nos centramos en aspectos bsicos del lenguaje y en comprender su lgica, las buenas
prcticas y fundamentos. No nos resulta de excesivo inters remitirnos a la especificacin oficial, ni
tener en cuenta las versiones de la especificacin oficial ni de las implementaciones que use cada
navegador.

Este pequeo recorrido por la historia y versiones de JavaScript lo hemos considerado adecuado para
poder entender mejor la terminologa que nos podemos encontrar cuando leamos informacin sobre
JavaScript en libros, revistas o pginas web. Las versiones de JavaScript suelen ser incrementales: es
decir, mantienen los fundamentos y amplan las posibilidades del lenguaje. Nosotros con este curso
tenemos el objetivo de aprender los fundamentos que nos permitan desarrollar JavaScript sin
importarnos ms que lo justo el navegador y las versiones. As que continuamos.

Prxima entrega: CU01138E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
InnerHTML JavaScript. Mo
odificar HTML en
e tiempo real.. This.

INNERHTM
ML JAVASCR
RIPT

La propieedad innerH HTML de los nodos dee tipo elemento nos permite p acceeder al cdigo HTML
comprend dido entre laas etiquetas de apertura y cierre que
e definen el nodo
n y modiificarlo si lo deseamos.
d
La aplicaccin ms sencilla puede ser
s modificarr un texto, pero el verdadero potenccial de innerH HTML es el
de modificar el cdigo o HTML en s, no solo el texto.
t

Mucha geente usa inneerHTML paraa modificar texto,

t pero realmente
r teenemos otraas opciones para
p hacer
modificacciones en texxto: textConttent o nodeV
Value nos pueden servir para
p ello.

La sintaxiss a emplear normalmentte ser del tipo:

oAlQueAcced
nodo demos.innerrHTML = 'Nue
evo cdigo HTML
H en el n
nodo';

Los nodoss que admiteen el uso de innerHTML son los tipo

o Element co on capacidad para contenner cdigo
HTML. Poor tanto, no obtendremo
o os resultado si tratamos de aplicarlo a otro tipo de nodos co
omo los de
tipo texto
o. Escribe este
e cdigo en tu naveegador, gurdalo con extensin
e httml y compprueba los
resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head> <title>Cuurso JavaScript aprenderaproggramar.com</title><meta charrset="utf-8">
<style typpe="text/css"> body {font-fam mily: sans-serif; text-align:centeer; }
div {width h: 600px; backgground-color:yeellow; overflow w:hidden;margin n: 5px auto;}
h2 {width h: 80%; backgroound-color:#DEB887; cursor:pointer; margin:: 10px auto; }<//style>
</head>
<body><d div><h2 onclickk="alert(this.no
odeName)">Hazz click aqu paraa ver el nodeNaame de this</h2 2>
<h2 onclick="alert(this.n nodeName)">H Haz click <span style="color:blu
s ue;">aqu para ver el nodeNam me de this</spaan></h2>
<h2>Haz click <span oncclick="alert(thiss.nodeName)" style="color:red
s d;">aqu para ver
v el nodeNam me de this</span n></h2>
<h2 onclick="alert(this.ffirstChild.nodeN Name)">Haz click aqu para ve er el nodeNamee del hijo de h2<</h2>
<h2 onclick="this.firstCh hild.nodeValue=='Aaaaaaah!'">>Haz click aqu para
p modificar el
e texto en el hijo del nodo h2
2 usando
NodeValu ue</h2>
<h2 onclick="this.textCo ontent='Eeeeeeeeh!'">Haz clickk aqu para mod dificar el texto en
e hijo derivadoo del nodo h2 usando
u
textConteent</h2>
<h2 onclick="this.innerH HTML='Siiiiiih!'"">Haz click aqu para modificar el texto con in nnerHTML del n nodo h2</h2>
<h2 onclick="alert('Conttenido innerHTML actual es: '++this.innerHTM ML);
this.inneerHTML='<div sttyle=\' width:50 0%; border-stylle:solid; background-color: #FFF7F50; \'>Aham mham!</div>'">
Haz click aqu para modificar el cdigo con innerHTML del nodo h2<//h2>
<h2 onclick="this.textCo ontent='Uuuuuuh!">Haz click <span< style="co
olor:blue;">perro no existe un textContent
modificab ble</span></h2 2>
<h2 onclick="alert('Obteenemos: '+this.ttextContent)">>Haz click <span n style="color:bblue;">para ver el textContent</span> y
vers</h2 2>
<h2 onclick="this.firstCh hild.innerHTML='No podemos'">Si intentamo os modificar un nodo texto con innerHTML...</h2>
</div></b body></html>

aprenderraprogramar.co
om, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. This.

REFERENCIAR UN NODO USANDO LA PALABRA CLAVE THIS

Para interpretar este cdigo hemos de tener en cuenta que la palabra clave this aplicada dentro de un
manejador de evento onclick nos devuelve el nodo de tipo Element definido por las etiquetas HTML
donde se define el onclick. Por ejemplo: <h2 onclick="alert(this.nodeName)">Hola</h2> nos devuelve
el nodeName del nodo definido por las etiquetas <h2> </h2> y este nodeName es H2. Recordar que
de acuerdo con la estructura de construccin del DOM, el nodo H2 tendr como hijo un nodo de tipo
texto cuyo nodeValue ser Hola.

Los resultados esperados cuando visualizamos y comprobamos el cdigo HTML que hemos puesto
como ejemplo anteriormente son (comprueba t si obtienes estos mismos resultados o no):

Cuando hacemos click sobre Se muestra Comentarios

Haz click aqu para ver el

H2 Es el nodo para el cual est definido el evento onclick
nodeName de this

Aunque el nodo H2 tenga un nodo hijo span, el nodo para

Haz click aqu para ver el
H2 el que est definido el evento onclick es H2 y por tanto
nodeName de this
this hace referencia a este nodo.

Haz click aqu para ver el Al haber modificado el onclick y asociarlo al span, el nodo
SPAN
nodeName de this referenciado por this pasa a ser el SPAN

Estamos aludiendo a firstChild de H2, que es el nodo de

Haz click aqu para ver el
#text tipo texto que contiene el texto que se muestra en
nodeName del hijo de h2
pantalla

Haz click aqu para modificar el

Modificamos el texto accediendo al nodo de tipo texto y
texto en el hijo del nodo h2 usando Aaaaaaah!
modificando su valor nodeValue
NodeValue

Haz click aqu para modificar el

Modificamos el texto usando textContent (texto
texto en hijo derivado del nodo h2 Eeeeeeeh!
contenido en los nodos derivados del referenciado)
usando textContent

Haz click aqu para modificar el Modificamos el texto modificando el cdigo HTML
Siiiiiih!
texto con innerHTML del nodo h2 interno al nodo

Haz click aqu para modificar el Se muestra el texto Ahamham! dentro de un rectngulo
Ahamham!*
cdigo con innerHTML del nodo h2 de color anaranjado

No hay resultado. Se puede modificar el textContent si

Haz click pero no existe un
-- slo existe texto asociado a un nodo hijo, pero en este
textContent modificable
caso el texto est repartido entre varios nodos hijos.

Se muestra el mensaje: Obtenemos: Haz click para ver el

Haz click para ver el textContent y Muestra un textContent y vers. Esto demuestra que el textContent
vers mensaje concatena los textos obtenidos del recorrido de los
diferentes nodos sucesores donde aparezca texto.

No hay resultado. No se puede modificar un nodo tipo

Si intentamos modificar un nodo
-- texto usando innerHTML porque innerHTML aplica solo a
texto con innerHTML...
los nodos de tipo Element.

aprenderaprogramar.com, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. This.

* En este caso tenemos el siguiente comportamiento:

Al hacer un primer click

Se nos muestra un mensaje: Contenido innerHTML actual es: Haz click aqu para modificar el cdigo
con innerHTML del nodo h2. Esto refleja que dentro de la etiqueta h2 nicamente tenemos un texto.

Al hacer un segundo click

Se nos muestra un mensaje: Contenido innerHTML actual es: <div style=" width:50%; border-
style:solid; background-color: #FF7F50; ">Ahamham!</div>

Esto refleja que el anterior contenido dentro de h2 ha desaparecido. Ahora dentro de la etiqueta h2
tenemos un div al que hemos aplicado estilos haciendo que muestre un color de fondo naranja, un
borde, y que contiene el texto Ahamham!

Sin embargo, el cdigo fuente o cdigo HTML asociado a la pgina que nos facilita el navegador (que
podemos visualizar accediendo a l a travs de opciones de men) no ha cambiado. Esto significa que
se trata de cambios dinmicos que son controlados por el navegador y no se reflejan en que el cdigo
fuente accesible sea distinto en cada momento. O dicho de otra manera: la visualizacin de una
pgina web puede no coincider con lo que veamos que indica el cdigo fuente si dicho cdigo fuente ha
sido manipulado dinmicamente con JavaScript.

LA POTENCIALIDAD DE INNERHTML

innerHTML tiene una gran potencialidad debido a que nos permite generar cdigo HTML
dinmicamente y esto facilita la manipulacin de pginas web y la creacin de efectos hasta los lmites
de nuestra imaginacin. Todo ello a pesar de que histricamente no formaba parte del lenguaje
JavaScript. Se convirti es un estndar de facto, es decir, no formando parte de la especificacin oficial
JavaScript sin embargo fue introducido y aceptado por todos los navegadores.

En la prxima entrega del curso veremos un ejemplo ms avanzado de utilizacin de innerHTML para el
control dinmico de procesos en el frontEnd. Si el trmino frontEnd te resulta extrao, ten en cuenta
que suele usarse en alusin a cdigo que se ejecuta del lado del cliente, mientras que backEnd suele
usarse en alusin a procesos del lado del servidor. El trabajo con JavaScript se califica normalmente de
trabajo en el frontEnd de las aplicaciones web.

EJERCICIO

Crea un documento html con div central (el cuadrado principal) que contenga a su vez cuatro divs (los
cuadrados secundarios). Debajo del cuadrado principal debe aparecer un botn con el texto Avanzar.
Inicialmente los cuatro cuadrados tendrn fondo blanco y un signo ? de gran tamao. Al pulsar en el
botn por primera vez, el cuadrado superior izquierdo debe aparecer con fondo negro, texto blanco, y
tener como texto El. Al pulsar de nuevo el botn, el cuadrado superior derecho debe aparecer con
fondo blanco y texto negro y tener como texto poder. Al pulsar de nuevo el botn el cuadrado

aprenderaprogramar.com, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. This.

inferior izquierdo debe aparecer con fondo blanco y texto negro y tener como texto de. Al pulsar de
nuevo el botn el cuadrado inferior derecho debe aparecer con fondo amarillo y texto negro y tener
como texto JavaScript. Si se pulsa nuevamente el botn avanzar debe mostrarse un mensaje que
indique No es posible avanzar ms.

Aqu resumimos cmo tiene que ser el cambio:

Inicialmente:

? ?

? ?

Avanzar

A medida que se pulse el botn ir apareciendo:

El ? El poder El poder El poder

? ? ? ? de ? de JavaScript

Avanzar Avanzar Avanzar Avanzar

Para comprobar si tu cdigo y tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01139E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Ejemplo inn
nerHTML JavaScript. Ejercicio resuelto.

EJERCICIO
O RESUELTO CON INNERHTML JAVASSCRIPT

En la antterior entregga del curso

o hemos vissto la sintaxxis y forma de uso bssica de innerHTML en
JavaScriptt. Ahora vam
mos a plantear y dar la solucin a un
n ejercicio enn el que tratamos de haccer un uso
ms avanzado de inneerHTML. En concreto,
c daada una tablaa con datos, veremos cm mo podemoss convertir
los datos en editabless.

ADO DEL EJER

ENUNCIA RCICIO

Con este ejercicio queeremos por un u lado utilizzar los conoccimientos ad

dquiridos a lo
o largo del cu
urso, y por
otra partee hacernos a la idea de que
q siempre necesitarem mos buscar innformacin aadicional parra resolver
algunas cuestiones
c que no cono ocemos a priori. Cuando o se trabaja en desarrollos web es imposible
conocer toda la sintaxxis y las posib
bles instrucciones, propieedades, etc. y por tanto es necesarioo recurrir a
la consulta de libro os, revistas o pginas web para obtener informacin adicional a nuestro
conocimieento.

El enunciaado del ejerccicio es el sigguiente:

Una pgin
na web cargaa una tabla con datos reelativos al co
ontenido nuttricional de llos alimento
os como se
muestra a continuaci
n:

o nutricionall por cada 10

Contenido 00 g de alimeento.

Alim
mento Caaloras (kCal)) Grasass (g) Pro
otena (g) Carbohidratos (g) Acciones
A

Arn
ndano 49 0.2
2 0.4 12.7 Editar

Plttano 90 0.3
3 1.0 23.5 Editar

Cerreza 46 0.4
4 0.9 10.9 Editar

Fre
esa 37 0.5
5 0.8 8.3 Editar

Se desea que al pulsar en el texto Editar de la columna Accciones, ocurra lo siguientte:

a) El texto de esa coolumna que pona <<Editar>> en color azul, serr reemplazaado por el texto
t <<En
edicin>>> en color gris o negro.

b) Los datos en la fila correspondiente se co onvertirn en

e casillas dee texto editaables de mo
odo que el
usuario pueda modificcar los datoss de esa fila.

aprenderraprogramar.co
om, 2006-2029
Ejemplo inn
nerHTML JavaScript. Ejercicio resuelto.

c) Debe aparecer
a en la parte infeerior de la taabla el texto: <<Pulse Acceptar para gguardar los cambios o
cancelar para
p anularlos>> y dos botones:
b Aceeptar y Canccelar, que poodrn ser puulsados por el usuario
para Acep
ptar los camb
bios o para cancelar.
c

Si el usuaario pulsa en n deben ser enviados a una url de

n el botn Acceptar los daatos de la filla en edicin
destino por el mtodo o get. Por ejeemplo si la url
u de destino o es aprendeeraprogramaar.com y edittramos la
fila corresspondiente a Fresa y pulssamos acepttar, el navegaador debe en na url como esta:
nviarnos a un

http://apreenderaprograamar.com/?aliimento=Fresaa&calorias=57&grasas=1.5&
&proteina=0.4
4&carbohidrattos=12.8

Atencin: los datos qu ue se deben enviar a la url

u de destin
no son los daatos editadoss por el usuaario, no los
datos origginales de la tabla.

Si el usuaario pulsa en
n Cancelar se recargar la tabla origginal (de forrma que no habr ningu
una fila en
edicin).

o seleccionaada una fila en edicin el

Si estando e usuario pulsa sobre Editar
E en otrra fila, se moostrar un
mensaje indicando
i lo siguiente: Solo
se puede editar un
na lnea. Reccargue la pggina para pooder editar
otra.

La siguien
nte imagen reefleja la ideaa de lo que see quiere conseguir:

En este ejjercicio supoonemos que la tabla va a cargar datoss desde una base de dato os, pero commo nuestro
n es el manejo de basess de datos ni de lenguaje
objetivo no es del lado deel servidor siino ver aplicaaciones de
JavaScriptt, nos limitarremos a creaar la tabla maanualmente con el cdigo HTML neceesario.

aprenderraprogramar.co
om, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.

ORIENTACIONES PARA LA SOLUCIN: PASO 1

Intenta resolver el ejercicio con los conocimientos adquiridos a lo largo del curso y realizando alguna
consulta adicional en internet. Es bueno intentar enfrentarse a los problemas por uno mismo y tratar de
resolverlos por uno mismo, ya que favorece el aprendizaje como programadores. Ten en cuenta que
este ejercicio posiblemente no tenga una solucin nica, sino que hay distintas formas de plantearlo y
distintas formas de resolverlo. Intenta crear tu propia solucin y despus comprala con la que
indicaremos nosotros tratando de ver las ventajas e inconvenientes de una y otra forma de resolver el
problema.

ORIENTACIONES PARA LA SOLUCIN: PASO 2

Si necesitas una orientacin aqu te indicamos a grandes rasgos la solucin (complementa estas
indicaciones buscando en internet aquello que puedas necesitar) que hemos creado nosotros para que
trates de implementarla por ti mismo. Los pasos a seguir seran los siguientes:

1) Crea un archivo html de nombre testEdicionTablas.html donde tengas el cdigo HTML de la tabla, de
modo que el texto editar est dentro de etiquetas span que respondan al evento
onclick="transformarEnEditable(this)". Debajo de la tabla aade un div vaco. El div vaco servir para
aadirle lo que se debe mostrar cuando el usuario pulsa sobre un botn editar.

2) Crea un archivo css de nombre estilos.css donde tengas los estilos para la tabla y para las etiquetas
span con el texto Editar, botones, etc.

3) Crea un archivo js de nombre functions.js donde tengas una variable global de nombre <<editando>>
y tipo booleano que te permita saber si se encuentra en edicin alguna fila o no.

4) Crea una funcin <<function transformarEnEditable(nodo)>> que debe encargarse de transformar en

editables los datos de una fila definindolos en etiquetas <input> </input> usando innerHTML.
Adems debe aadir el texto << Pulse Aceptar para guardar los cambios o cancelar para anularlos >> y
los dos botones: Aceptar y Cancelar. Si ya haba una fila en edicin, en lugar de estos se deber mostrar
el mensaje <<Solo se puede editar una lnea. Recargue la pgina para poder editar otra>>

5) Crea una funcin <<function capturarEnvio()>> que sirva para que cuando el usuario pulse el botn
Aceptar, se cree un formulario con datos ocultos (hidden) capturados de las casillas de la fila en edicin
y se enven a la url de destino por el mtodo get. El formulario lo aadirs con innerHTML y el envo lo
puedes realizar con la sentencia javascript document.nombreDelformulario.submit();

6) Crea la funcin anular que recargue la pgina original cuando el usuario pulse el botn cancelar. Esto
puedes hacerlo con la sentencia JavaScript window.location.reload();

SOLUCIN PROPUESTA

A continuacin indicamos el cdigo de la solucin propuesta. Ten en cuenta que esta no tiene por qu
considerarse ni la nica solucin ni la mejor solucin. Es posible que t hayas definido una solucin
mejor que esta. Compara tu solucin con la propuesta y trata de ver las ventajas e inconvenientes de
cada una de ellas.

aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.

Archivo testEdicionTablas.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos.css">
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<table>
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr> <th>Alimento</th> <th>Caloras (kCal)</th> <th>Grasas (g)</th>
<th>Protena (g)</th> <th>Carbohidratos (g)</th> <th>Opciones</th>
</tr>
<tr> <td>Arndano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td>
</tr>
<tr> <td>Pltano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td> <td><span class="editar" onclick="transformarEnEditable(this)">Editar</span></td>
</tr>
</table>
<div id="contenedorForm">
</div></body></html>

Archivo estilos.css:

/* Curso JavaScript estilos aprenderaprogramar.com*/

body {font-family: Arial, Helvetica, sans-serif; background-color: #FFF8DC;}

table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; margin: 45px; width: 550px;
text-align: center; border-collapse: collapse; }

th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe; border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff; color: #039; }

td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; }

tr:hover td { background: #d0dafd; color: #339; }

.editar {color: blue; cursor:pointer;}

#contenedorForm {margin-left: 45px; font-size:12px;}

.boton { color: black; padding: 5px; margin: 10px;

background-color: #b9c9fe;
font-weight: bold; }

aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.

Archivo functions.js:

/*Curso JavaScript aprenderaprogramar.com */

var editando=false;

function transformarEnEditable(nodo) {
//El nodo recibido es SPAN
if (editando == false) {
var nodoTd = nodo.parentNode; //Nodo TD
var nodoTr = nodoTd.parentNode; //Nodo TR
var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
var nodosEnTr = nodoTr.getElementsByTagName('td');
var alimento = nodosEnTr[0].textContent; var calorias = nodosEnTr[1].textContent;
var grasas = nodosEnTr[2].textContent; var proteina = nodosEnTr[3].textContent;
var carbohidratos = nodosEnTr[4].textContent; var opciones = nodosEnTr[5].textContent;
var nuevoCodigoHtml = '<td><input type="text" name="alimento" id="alimento" value="'+alimento+'" size="10"></td>'+
'<td><input type="text" name="calorias" id="calorias" value="'+calorias+'" size="5"</td>'+
'<td><input type="text" name="grasas" id="grasas" value="'+grasas+'" size="5"</td>'+
'<td><input type="text" name="proteina" id="proteina" value="'+proteina+'" size="5"</td>'+
'<td><input type="text" name="carbohidratos" id="carbohidratos" value="'+carbohidratos+'" size="5"</td> <td>En
edicin</td>';

nodoTr.innerHTML = nuevoCodigoHtml;

nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos'+
'<form name = "formulario" action="http://aprenderaprogramar.com" method="get" onsubmit="capturarEnvio()"
onreset="anular()">'+
'<input class="boton" type = "submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar">';
editando = "true";}
else {alert ('Solo se puede editar una lnea. Recargue la pgina para poder editar otra');
}
}

function capturarEnvio() {
var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos'+
'<form name = "formulario" action="http://aprenderaprogramar.com" method="get" onsubmit="capturarEnvio()"
onreset="anular()">'+
'<input type="hidden" name="alimento" value="'+document.querySelector('#alimento').value+'">'+
'<input type="hidden" name="calorias" value="'+document.querySelector('#calorias').value+'">'+
'<input type="hidden" name="grasas" value="'+document.querySelector('#grasas').value+'">'+
'<input type="hidden" name="proteina" value="'+document.querySelector('#proteina').value+'">'+
'<input type="hidden" name="carbohidratos" value="'+document.querySelector('#carbohidratos').value+'">'+
'<input class="boton" type = "submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar">';
document.formulario.submit();
}

function anular() {
window.location.reload();
}

aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.

Revisa el cdigo propuesto, ejectalo en tu navegador y comprueba su funcionamiento. Aunque

usamos algunos elementos novedosos como el evento onreset o la invocacin
window.location.reload(), debes ser capaz de comprender el cdigo HTML, CSS y JavaScript, as como
todos los procesos que tienen lugar y cmo se controla el flujo de la aplicacin y los cambios que tienen
lugar dinmicamente. Si tienes dudas, consulta en los foros aprenderaprogramar.com.

Prxima entrega: CU01140E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
createElement, createTexttNode, append
dChild JavaScrip
pt.

CREAR NO
ODOS DEL DOM

Hasta aho
ora hemos viisto cmo accceder a nodos del DOM y modificar sus propiedaades. Es posible crear
nodos y aadirlos
a en
n puntos esppecficos del rbol del DOM? S, essto es posib
ble gracias a mtodos
disponiblees para el ob
bjeto documeent de JavaScript.

N NODO
CREAR UN

Un nodo de tipo Eleement se crea c invocan

ndo el mto odo createElement del objeto document de
JavaScriptt. La sintaxis a emplear normalmente
n e es de este tipo:
t

var nuevoNodo = docu

ument.create
eElement('taagElegido');

presenta el tiipo de nodo que vamos a crear indiccando su correspondiente etiqueta

Donde taggElegido rep
HTML. Po
or ejemplo vaar nuevoNod do = document.createElement('div'); crea un nodo <div> <//div>.

Un nodo de d tipo Text se crea invo

ocando el mtodo create
eTextNode del
d objeto do
ocument de JavaScript.
J
La sintaxiss a emplear normalmentte es de este tipo:

doTexto = do
var nod ocument.creeateTextNode('texto conttenido en el nodo');

Donde 'teexto contenid

do en el nodo' indica el texto que queremos insertar.

Normalmente tendremos que creear la depen ndencia en el

e rbol del DOM por ell cual un nodo creado
deber deefinirse com
mo hijo de un nodo ya existente.
e odo creado se integre
Ess la forma de que un no
dentro dee nuestra pggina web. La sintaxis a em malmente es de este tipo:
mplear norm

nombreeNodoPadre..appendChild
d(nombreNo
odoHijo);

aprenderraprogramar.co
om, 2006-2029
createElement, createTextNode, appendChild JavaScript.

Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados en tu navegador:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head> <title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
div div {background-color: yellow;}
</style>
<script type="text/javascript">
var contador = 1
function crearNodoHijo(nodoPadre) {
var nodoHijo = document.createElement("div");
var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);
nodoHijo.appendChild(nodoTexto);
nodoPadre.appendChild(nodoHijo);
contador = contador +1;
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">
Contenido inicial es este texto
</div>
</body>
</html>

El resultado esperado es que cada vez que se hace click dentro del div principal, se aade un nuevo div
de forma que por cada pulsacin van apareciendo nuevos recuadros donde se indica Soy el nodo hijo
1, Soy el nodo hijo 2, Soy el nodo hijo 3, etc. En este ejemplo, la pulsacin en cualquier parte
interior al div inicial (estemos o no dentro de un div hijo) genera el evento por el cual se crea un hijo.

MODIFICAR LA PROPIEDAD ONCLICK CON JAVASCRIPT

En este otro ejemplo vemos cmo podemos crear un div interno a aquel div en que se hace click. Para
ello, hemos de establecer la propiedad onclick del nodo creado. La sintaxis a emplear para ello es esta:

nombreDeNodo.onclick = function() {nombreDeFuncion(param1, param2, , paramN)};

nombreDeFuncion indica la funcin que debe ejecutarse como respuesta al evento onclick. Param1,
param2, , paramN indica los parmetros que se le pasan a la funcin (en caso de no existir parmetros
simplemente se abrirn y cerrarn parntesis).

aprenderaprogramar.com, 2006-2029
createElement, createTextNode, appendChild JavaScript.

Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados en tu navegador:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head> <title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div {border-style:solid;margin: 20px; padding:15px; display:inline-block;}
</style>
<script type="text/javascript">
var contador = 1;
function crearNodoHijo(nodoPadre) {
if (nodoPadre.children.length == 0) {
var nodoHijo = document.createElement("div");
nodoHijo.id ='divElementID'+contador;
nodoHijo.onclick = function() {crearNodoHijo(this)};
nodoHijo.innerHTML = ''+contador;
if (contador%2 == 0) {nodoHijo.style.backgroundColor = '#E9967A';}
else {nodoHijo.style.backgroundColor = 'yellow'; }
nodoPadre.appendChild(nodoHijo);
contador = contador +1;
}
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)" style="background-color:#E6E6FA">
Contenido inicial
</div>
</body>
</html>

Merece la pena detenernos en la lnea nodoHijo.onclick = function() {crearNodoHijo(this)};

Para establecer el valor del atributo onclick de un nodo, hemos de definir una funcin para ser
ejecutada. Esto se hace con la sintaxis que hemos indicado. No es vlido nodoHijo.onclick =
'crearNodoHijo(this) '; porque equivale a asignar un texto, ni nodoHijo.onclick = crearNodoHijo(this);
porque aqu estaramos asignando a la propiedad el hipottico resultado (obtenido con return) de
ejecutar la funcin crearNodoHijo.

El resultado esperado es que cada vez que hacemos click en el div ms interno entro todos los
existentes, se genere un nuevo div, y que los colores se vayan alternando entre color amarillo y un color
salmn. El evento onclick se genera para todos los div existentes (ya que el ms interno est contenido
dentro de todos ellos). Es decir, suponiendo que tengamos por ejemplo tres div uno externo, otro
intermedio y otro interno, al pulsar encima del div interno se generan tres eventos onclick, uno para
cada div. No obstante, en nuestro ejemplo slo generamos un nodo hijo si el nodo que recibe el click no
tiene hijos. De este modo, no se generan nuevos hijos excepto para el div ms interno, que es el nico
que no tiene hijos, mientras que los div ms externos no sufren cambios.

aprenderaprogramar.com, 2006-2029
createElement, createTexttNode, append
dChild JavaScrip
pt.

Grficameente, el resultado esperaado es que se vayan gene

erando sucesivos recuad
dros internoss a medida
que se pu
ulsa en el recuadro centraal.

Podramos determin ndo click sin tener que

nar usando JaavaScript en qu div exaactamente see est hacien
do con la captura de eventos y lo
basarnos en el nmeero de hijos que tenga? S, esto est relacionad
estudiaremos ms adeelante.

EJERCICIO
O

Crea una pgina web donde iniciaalmente exissta un div co on borde soliid y ancho d
delimitado co on el texto
Curso JaavaScript ap prenderapro ogramar.com m. Debajo del div deeben mostrarse dos botones b o
pulsadorees. Un botn debe indicaar Aadir al final y otro Anidar. Cuando se pulse el botn Aadir al
final, debbe aadirse un div al final de la pgiina con el te
exto Nodo creado
c 1 (o Nodo cread do 2, 3, 4
segn corrresponda). Cuando
C se pulse
p el bot
n Anidar debe
d aadirsse un div dentro del div inicial con
el texto Nodo
creado 5 (o Nod do creado 6, 7, 8 segn n corresponda). La numeracin ser nica, es
decir, poddremos saber en qu ord den han sido creados los div estn deentro o fueraa del div inicial.

mprobar si tus respuestas y c

Para com digo son correctos puedes
p nsultar en los foros
con
aprenderaaprogramar..com.

Prxima entrega:
e CU0
01141E

Acceso al curso comp n siguiente:

pleto en apreenderaprograamar.com -- > Cursos, o en la direcci
http://apreenderaprograamar.com/index.php?option=com_conte
ent&view=category&id=78&
&Itemid=206

aprenderraprogramar.co
om, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
r

MS ACCIONES SOBR
RE NODOS DEL DOM

JavaScriptt ofrece algu

unas posibilid
dades adicionales de actuar sobre no
odos del DOM
M. En este caaso vamos
a ver un na variante de append dChild deno ominada inssertBefore, un mtodo o para clon nar nodos
denominaado cloneNode, y los mtodos para eliminar
e y ree
emplazar nodos removeCChild y replaaceChild.

INSERTBEEFORE

Adems ded usar appeendChild, que nos permiite aadir un

n nodo como o nodo hijo del nodo esspecificado
con la sin
ntaxis nombreNodoPadre.appendChild(nombreN NodoHijo); teenemos otraa opcin parra insertar
un nodo en un doccumento HTTML (pginaa web): el mtodom inseertBefore. LLa sintaxis a emplear
normalmeente es de esste tipo:

nodoQueSerrPadreDelN
NuevoNodo.insertBefore((nuevoNodo
o,
noodoAntesDelQueHaremoosLaInsercin
n);

Escribe ell siguiente cdigo, gurd

dalo con extensin html y visualiza los
l resultado os en tu navvegador. El
resultado esperado es e que iniciaalmente apaarece un forrmulario donde se pidee nombre, apellidos
a y
correo eleectrnico. See nos da opcin a pulsar en un enlace
e para poderr aadir otra persona al formulario
f
y cuandoo lo hacemo os nos aparecen las casillas para la persona adicional (taantas perso onas como
q estamos insertando un
queramoss) debido a que u nuevo no odo con las nuevas casillaas.

Analiza el cdigo y trata

t de razzonar sobre algunos dettalles, por ejemplo
e cul es el papeel de <div
id="refereenciaVacia1""></div>. Si tienes
t dudas consulta en los foros ap
prenderaproggramar.com..

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www
w.w3.org/TR/httml4/loose.dtd">
<html>
<head>
<title>Ejeemplo curso aprenderaprogram mar.com</titlee><meta charse
et="utf-8">
<style typpe="text/css">
body {bacckground-colorr:yellow; font-faamily: sans-seriif;}
label {color: maroon; dissplay:block; pad dding:5px;}
.simulaLin nk {color: blue; cursor:pointerr;}
</style>
<script tyype="text/javasscript">
var contaador = 1;
function addPersona
a () {
var nodoForm = documeent.querySelecttor('form');
var nuevo oNodo = docum ment.createElemment('div');
contadorr = contador+1;

aprenderraprogramar.co
om, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.

nuevoNodo.innerHTML = '<label for="nombre'+contador+'"><span>Nombre persona '+contador+':</span> <input

id="nombre'+contador+
'" type="text" name="nombre'+contador+'" /></label>'+
'<label for="apellidos'+contador+'"><span>Apellidos persona '+contador+':</span> <input id="apellidos'+contador+
'" type="text" name="apellidos'+contador+'" /></label>'+
'<label for="email'+contador+'"><span>Correo electrnico persona '+contador+':</span> <input id="email"'+contador+
' type="text" name="email'+contador+'" /></label>'+
'<p>Si quieres apuntar simultneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa
aqu</span></p>';
nodoForm.insertBefore(nuevoNodo, nodoForm.querySelector('#referenciaVacia1'));
}
</script>
</head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2></div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Indica los datos de la persona que se apunta al curso:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<p>Si quieres apuntar simultneamente otra persona <span class="simulaLink" onclick="addPersona()">pulsa
aqu</span></p>
<div id="referenciaVacia1"></div>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>

DUPLICAR NODOS EN EL DOCUMENTO HTML. CLONENODE

Si estamos trabajando con un documento HTML (pgina web) y tratamos de reinsertar un nodo ya
existente, el resultado no ser que se genere una copia del nodo a insertar en la nueva posicin, sino
que en primer lugar se eliminar el nodo automticamente de su posicin inicial y se insertar en la
nueva posicin designada.

Cmo podemos entonces aadir exactamente el mismo nodo (una copia) en otra posicin del
documento HTML?

Para ello disponemos del mtodo cloneNode. La sintaxis a emplear normalmente es de este tipo:

var nodoNuevoCopia = nodoACopiar.cloneNode(valorBooleano);

Donde valorBooleano es un parmetro que se le pasa al mtodo que en caso de valer true supone que
se clonar el nodo a copiar con todos sus descendientes (copia completa) y en caso de valer false
supone que se clonar el nodo sin sus descendientes (copia simple).

El ejercicio propuesto ms adelante incluye un ejemplo de uso de cloneNode.

aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.

ELIMINAR NODOS EN EL DOCUMENTO HTML CON REMOVECHILD

El mtodo removeChild elimina un nodo y todos sus descendientes. La sintaxis para emplearlo es:

nodoPadre.removeChild(nodoHijo);

Donde nodoPadre es el nodo padre del nodo que queremos eliminar, y nodoHijo el nodo a eliminar
(junto a todos sus descendientes).

Una forma habitual de acceder al nodo padre es usar la invocacin nodoHijo.parentNode. Por ejemplo:

nodoAEliminar.parentNode.removeChild(nodoAEliminar);

Nos permite acceder al nodo padre del que queremos eliminar e invocar sobre l removeChild.

Crea un documento html con el siguiente cdigo y comprueba cmo se pueden aadir nodos con
appendChild y eliminar nodos con removeChild pulsando un botn aadir o eliminar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
#nodoRaiz {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
.nodoHijo {background-color: yellow; border-style:solid;margin: 20px; padding:15px; display:inline-block;}
#contenedor {width:405px;margin: 0 auto;}
#adelante, #atras {padding:15px; width: 130px; float: left; margin-left:20px;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var contador = 1
function crearNodoHijo(nodoPadre) {
var nodoHijo = document.createElement("div");
var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);
nodoHijo.className = 'nodoHijo'; nodoHijo.appendChild(nodoTexto); nodoPadre.appendChild(nodoHijo);
contador = contador +1;
}
function removeNodo() {
var nodosEliminar = document.querySelectorAll('.nodoHijo');
if (nodosEliminar.length>0) { //Si hay nodos que se puedan eliminar
var nodoAEliminar = nodosEliminar[nodosEliminar.length-1]; //Acceso al ltimo nodo hijo
nodoAEliminar.parentNode.removeChild(nodoAEliminar);
contador = contador -1; }
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Contenido inicial es este texto</div>
<div id="contenedor">
<div id ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Aadir </div>
<div id="adelante" onclick="removeNodo()" > Eliminar </div>
</div></body></html>

aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.

REEMPLAZAR UN NODO CON REPLACECHILD

El mtodo replaceChild permite eliminar un nodo y reemplazarlo por otro. La sintaxis para emplearlo
es:

nodoPadre.replaceChild(nuevoNodo, nodoQueSerReemplazado);

Donde nuevoNodo es el nodo que vamos a insertar para reemplazar al nodo que hemos denominado
nodoQueSerReemplazado.

Si nuevoNodo ya existe en el DOM, primero ser eliminado del lugar en que ya exista y luego ser
insertado en el lugar indicado. El nodo reemplazado es eliminado en todo caso.

Crea un documento html con el siguiente cdigo y comprueba cmo se puede reemplazar el primer
nodo de una serie por el ltimo usando replaceChild.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head> <title>Curso JavaScript aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
#nodoRaiz {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
.nodoHijo {background-color: yellow; border-style:solid;margin: 20px; padding:15px; display:inline-block;}
#contenedor {width:405px;margin: 0 auto;}
#adelante, #atras {padding:15px; width: 130px; float: left; margin-left:20px;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var contador = 1
function crearNodoHijo(nodoPadre) {
var nodoHijo = document.createElement("div");
var nodoTexto = document.createTextNode("Soy el nodo hijo "+contador);
nodoHijo.className = 'nodoHijo';
nodoHijo.appendChild(nodoTexto);
nodoPadre.appendChild(nodoHijo);
contador = contador +1;
}
function cambiarNodo() {
var nodosHijos = document.querySelectorAll('.nodoHijo');
var nodoPadre = document.querySelector('#nodoRaiz');
if (nodosHijos.length>1) { //Si hay nodos que se puedan cambiar
var tmpNodo = nodosHijos[0].cloneNode(true);
nodoPadre.replaceChild(nodosHijos[nodosHijos.length-1], nodosHijos[0]);
nodoPadre.appendChild(tmpNodo);
}
}
</script>
</head>

aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.

<body>
<div id="nodoRaiz">
Contenido inicial es este texto
</div>
<div id="contenedor">
<div id ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Aadir </div>
<div id="adelante" onclick="cambiarNodo()" > Cambiar </div>
</div>
</body>
</html>

Fjate cmo el primer nodo de la serie de hijos lo clonamos para despus de ser reemplazado por el
ltimo, poder insertar el clon en la posicin final.

EJERCICIO

El siguiente cdigo pretenda duplicar un nodo cada vez que se pulsara sobre l, de modo que
inicialmente apareciera en pantalla el mensaje Pulsa aqu para duplicar este nodo y que cada vez que
se pulsara sobre l, se duplicara (tantas veces como veces se pulsara). El problema es que no funciona,
es decir, no obtenemos ningn resultado. Analiza el cdigo y responde estas cuestiones:

1) Por qu no funciona?

2) Realiza los cambios en el cdigo que nos permitan realizar lo que tenamos previsto creando un
nuevo nodo del mismo tipo y con el mismo texto que el deseado y aadindolo como ltimo hijo del
nodo body.

3) Realiza los cambios en el cdigo que nos permitan realizar lo que tenamos previsto clonando el nodo
con el mtodo cloneNode y aadiendo el nodo clonado como ltimo hijo del nodo body.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
div div {background-color: yellow;}
</style>
<script type="text/javascript">
function crearNodoHijo(nodoPadre) {
var nodoHijo = nodoPadre;
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aqu para duplicar este nodo</div>
</body></html>

aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01142E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texxto

FUNCIONES JAVASCR
RIPT PARA CA
ADENAS DE TEXTO
T

JavaScriptt ofrece num

merosas funcciones predeffinidas que facilitan
f el trrabajo con caadenas de te
exto. Entre
las posibilidades que ofrecen estaas funciones tenemos el extraer un carcter, exttraer un fraggmento de
cadena, seeparar una cadena
c en mltiples cadeenas indicanddo un separaador, etc.

En las siguientes tablaas resumimoos las princip

pales funcion
nes disponibbles. Las hem
mos agrupado segn el
uso ms habitual que se hace de d ellas en funciones
f qu
ue se usan habitualmen nte para mo odificar las
cadenas, funciones
f ue se usan habitualmente para extraer subcaden
qu nas o caracteeres y funcion
nes que se
usan paraa determinarr el ndice de posicin de un carcter bajo ciertas condicioness.

En alguno
os casos pueeden presen
ntarse difereencias entre navegadorees cuando sse hacen invvocaciones
anormales o cuando se
s usan algun
nas funcionees como slice
e con nmeroos negativoss.

FUNCIONES MODIFIC
CADORAS

Fu
uncin Tarea y com
mentarios EEjemplo

toUpperCase() Transforma la cadena a maysculass texttoUsuario.toU

UpperCase()

toLow
werCase() Transforma la cadena a minsculass texttoUsuario.toLo
owerCase()

replace(('carcterA',, Reemplaaza la prim mera aparici n de

texttoUsuario.replace('e', 'E');
'carracterB') carcterA
A por carcterB en la caden
na.
texttoUsuario.replace (/e/g, 'E')
Reemplaza todass las e minscu
ulas por E
Reemplaaza todas laas apariciones de mayysculas. Si quueremos reem
mplazar los
replace (//carcterA/gg, A por carctterB en la cadena.
carcterA espaacios escribireemos:
'carrcterB') Tener en
n cuenta que el
e primer parmetro texttoUsuario.replace (/ /g, 'E') dejando
no va entrecomillado. un espacio
e entre las barras.
Es laa forma de exxpresar el replaceAll de
otro
os lenguajes.
Reemplaaza todas lass apariciones de la
texttoUsuario.replace (/plo/g, 'XX')
replace (/cadenaA/g
( g, subcadena cadenaA por p cadenaB. Tener
Reemplaza todass las apariciones de plo
'cad
denaB') en cuentta que el prim
mer parmetro
o no va
susttituyndolas p
por XX
entrecom
millado.

aprenderraprogramar.co
om, 2006-2029
Funciones JavaScript para cadenas de texto

LA AUSENCIA DE REPLACEALL

Hemos indicado una sintaxis un tanto extraa para reemplazar todas las apariciones de un carcter en
una cadena: replace (/carcterA/g, 'carcterB') o de una subcadena por otra, con la sintaxis de tipo
replace (/cadenaA/g, 'cadenaB').

Lo que podemos intuir como extrao es que hemos de incluir el primer parmetro entre las barras y
que no aparecen comillas en este primer parmetro. El motivo para ello es la ausencia de una
instruccin replaceAll en JavaScript que nos obliga a buscar alguna alternativa para conseguir el
objetivo de reemplazar todas las apariciones de un carcter o subcadena en una cadena. La alternativa
que hemos sealado aqu se basa en expresiones regulares: una forma de definir patrones de
cadenas a ser reconocidas por JavaScript. Hablaremos de expresiones regulares ms adelante, por lo
que no vamos a entrar ahora en ms detalles.

FUNCIONES PARA EXTRAER SUBCADENAS O CARACTERES

Funcin Tarea y comentarios Ejemplo

Devuelve la subcadena extrada entre los textoUsuario.substring(2, 6)

ndices firstIn y lastOut-1. Es decir, el Para la cadena desarrolloWeb nos
substring(firstIn, carcter en la posicin firstIn se incluye y devolvera "sarr", donde d es el carcter
lastOut) el carcter en la posicin lastOut se en posicin cero, s el que est en
excluye. Recordar que el primer ndice es posicin 2 y o el que est en posicin 6
cero y el ltimo la longitud menos uno. (que queda excluido).
Misma funcin omitiendo el segundo
substring (firstIn) parmetro. Devuelve la subcadena desde textoUsuario.substring(5)
el ndice firstIn hasta el final de la cadena
textoUsuario.slice(-5, -1)
Anlogo a substring pero permite que los
ndices sean negativos. En este caso, se Si la cadena es "aprenderaprogramar"
slice (firstIn, lastOut) nos devuelve rama, siendo la r la quinta
toman desde el final de la cadena hacia el
principio, excluyendo el ltimo carcter. letra empezando por el final. Para
extraer hasta el final usar (-5, 0) (-5).
Anlogo a substring pero permite definir textoUsuario.slice(-5);
slice (firstIn) que se tome una porcin final de cadena,
desde el ndice sealado hasta el final. Devuelve las cinco ltimas letras.

Devuelve un array con las subcadenas

resultantes de dividir la cadena original textoUsuario.split(' ')
en subcadenas delimitadas por el Divisin por espacios en blanco
split('caracterSepara') carcter separador especificado (que
queda excluido). Si se indican unas textoUsuario.split('');
comillas vacas se extraen todos los Extraccin de todos los caracteres
caracteres a un array.
textoUsuario[3]
Devuelve el carcter en la posicin Devuelve el carcter en ndice 3
nombreCadena[indice]
indicada por ndice. textoUsuario[textoUsuario.length-1]
devuelve el ltimo carcter

aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto

FUNCIONES PARA RECUPERAR NDICES DE POSICIONES

Funcin Tarea y comentarios Ejemplo

Devuelve la letra situada en la posicin

indicePosicion. Tener en cuenta que el var primeraLetra =
charAt(indicePosicion) primer ndice es cero y el ltimo la textoUsuario.charAt(0)
longitud menos uno.
Devuelve el ndice de la primera
aparicin de la cadena especificada
empezando a buscar desde la izquierda.
indexOf ('cadena') textoUsuario.indexOf('p')
Si no existe el carcter se devuelve -1.
Recordar que la primera letra lleva ndice
cero.
Devuelve el ndice de la primera
indexOf ('cadena', aparicin de la cadena especificada
textoUsuario.indexOf('p', 5)
indiceInicial) empezando la bsqueda desde el ndice
inicial especificado (incluido).
Devuelve el ndice de la ltima aparicin
de la cadena especificada en un string. Si
lastIndexOf ('cadena') no existe la cadena se devuelve -1. textoUsuario.lastIndexOf('p')
Recordar que la primera letra lleva ndice
cero.

EJEMPLO

Escribe este cdigo y gurdalo con extensin HTML. Comprueba los resultados de la ejecucin en tu
navegador.

aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> body {font-family: sans-serif; margin:25px; text-align:center;}
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px; cursor: pointer;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#pulsador:hover, #marcaOperadores:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function ejemploCadenasDeTexto() {
var textoUsuario = prompt ('Introduzca una frase');
var mayusculas = textoUsuario.toUpperCase(); var minusculas = textoUsuario.toLowerCase();
var primeraLetra = textoUsuario.charAt(0); var ultimaLetra = textoUsuario.charAt(textoUsuario.length-1);
var subcadena26 = textoUsuario.substring(2, 6); var subcadena26sli = textoUsuario.slice(2,6);
var subcadena5aFinal = textoUsuario.substring(5); var subcadena5aFinalsli = textoUsuario.slice(5);
var tresCharDesdeFinal = textoUsuario.slice(-5, -2); var cincoUltimasLetras = textoUsuario.slice(-5);
var indicePrimeraP = textoUsuario.indexOf('p'); var indicePrimeraPDesdeIndice5 = textoUsuario.indexOf('p', 5);
var ultimaP = textoUsuario.lastIndexOf('p'); var subcadenasPorEspacios = textoUsuario.split(' ');
var cadenaCambiaPrimeraePorE = textoUsuario.replace('e', 'E');
var cadenaCambiaTodasePorE = textoUsuario.replace (/e/g, 'E');
var reemplazoSubcadena = textoUsuario.replace (/plo/g, 'XX');
var caracterIndice3 = textoUsuario[3];
var msg = 'Entrada: '+textoUsuario + '\n';
msg = msg + 'La entrada en maysculas es: ' + mayusculas +'\nLa entrada en minsculas es: ' + minusculas + '\n';
msg = msg + 'Primera letra es: ' + primeraLetra + ' y ltima letra es: '+ultimaLetra + '\n';
msg = msg + 'Subcadena entre tercera letra y sexta letra es: ' + subcadena26 + '. Si se extrae con slice: '+subcadena26sli
+'\n';
msg = msg + 'Subcadena desde el caracter indice 5 hasta el final es: ' + subcadena5aFinal+ '. Si se extrae con slice:
'+subcadena5aFinalsli+'\n';
msg = msg + 'Uso de slice negativo para extraer del quinto por atrs al antepenltimo caracter: ' + tresCharDesdeFinal+ '\n';
msg = msg + 'Cinco ltimos caracteres: '+cincoUltimasLetras + '\n';
msg = msg + 'Indice posicin de la primera p en la cadena: ' + indicePrimeraP + ' y de la ltima p es: ' +ultimaP +'\n';
msg = msg + 'Indice primera p desde la 5a posicin es: ' + indicePrimeraPDesdeIndice5 +'\n';
msg = msg + 'Divisin de subcadenas por espacios: ';
for (var i=0; i<subcadenasPorEspacios.length; i++) { msg = msg + 'Subcadena ' + (i+1) + ':\<\<'+subcadenasPorEspacios[i] +
'\>\> '; }
msg = msg + '\n';
msg = msg + 'Cadena con primera e reemplazada por E: ' + cadenaCambiaPrimeraePorE + '\n';
msg = msg + 'Cadena con e reemplazada por E todas: ' + cadenaCambiaTodasePorE + '\n';
msg = msg + 'Cadena reemplazando plo por XX: ' + reemplazoSubcadena + '\n';
msg = msg + 'El carcter con ndice 3 es: ' + caracterIndice3;
alert (msg);
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo funciones para texto JavaScript</h3>
</div>
<div id ="pulsador" onclick="ejemploCadenasDeTexto()"> Probar </div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto

El resultado esperado si introducimos la cadena "Ejemplo aplicacin JavaScript

aprenderaprogramar.com diploma" es el siguiente:

Entrada: Ejemplo aplicacin JavaScript aprenderaprogramar.com diploma

La entrada en maysculas es: EJEMPLO APLICACIN JAVASCRIPT APRENDERAPROGRAMAR.COM
DIPLOMA
La entrada en minsculas es: ejemplo aplicacin javascript aprenderaprogramar.com diploma
Primera letra es: E y ltima letra es: a
Subcadena entre tercera letra y sexta letra es: empl. Si se extrae con slice: empl
Subcadena desde el caracter indice 5 hasta el final es: lo aplicacin JavaScript
aprenderaprogramar.com diploma. Si se extrae con slice: lo aplicacin JavaScript
aprenderaprogramar.com diploma
Uso de slice negativo para extraer del quinto por atrs al antepenltimo caracter: plo
Cinco ltimos caracteres: ploma
Indice posicin de la primera p en la cadena: 4 y de la ltima p es: 55
Indice primera p desde la 5a posicin es: 9
Divisin de subcadenas por espacios: Subcadena 1:<<Ejemplo>> Subcadena 2:<<aplicacin>>
Subcadena 3:<<JavaScript>> Subcadena 4:<<aprenderaprogramar.com>> Subcadena 5:<<diploma>>
Cadena con primera e reemplazada por E: EjEmplo aplicacin JavaScript aprenderaprogramar.com
diploma
Cadena con e reemplazada por E todas: EjEmplo aplicacin JavaScript aprEndEraprogramar.com
diploma
Cadena reemplazando plo por XX: EjemXX aplicacin JavaScript aprenderaprogramar.com diXXma
El carcter con ndice 3 es: m

EJERCICIO

Crea un documento HTML (pgina web) donde exista un formulario que se enve por el mtodo GET. Se
pedir al usuario que introduzca nombre, apellidos y correo electrnico. Define dentro de la etiqueta
form que cuando se produzca el evento onsubmit (pulsacin del botn de envo del formulario) se
ejecute una funcin a la que denominaremos validar que no recibe parmetros.

La funcin validar debe realizar estas tareas y comprobaciones:

a) Comprobar que el nombre contiene al menos tres letras. Si no es as, debe aparecer un mensaje por
pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar
Ka como nombre debe aparecer el mensaje: El nombre no cumple tener al menos tres letras.

b) Comprobar que el correo electrnico contiene el carcter @ (arroba) y el carcter . (punto). De no

ser as, deber aparecer un mensaje indicando que al correo electrnico le falta uno o ambos
caracteres. Por ejemplo si se trata de enviar pacogmail.com deber aparecer el mensaje: Falta el
smbolo @ en el correo electrnico.

aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto

c) Antes de enviarse los datos del formulario a la pgina de destino, todas las letras del correo
electrnico deben transformarse a minsculas. Por ejemplo si se ha escrito [email protected] debe
enviarse [email protected]

d) Antes de enviarse los datos del formulario a la pgina de destino, si el correo electrnico contiene la
subcadena at debe reemplazarse por el smbolo @. Por ejemplo si se ha escrito paco at gmail.com
debe enviarse [email protected]

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01143E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objetos JavvaScript

OBJETOS JAVASCRIPTT

En muchaas ocasiones nos hemos referido a el objeto do

ocument de JavaScript
J o hemos dicho que un
NodeList es un tipo de objeto JavaScript. Nos interessa ahora centrarnos en n estudiar con
c mayor
detenimieento el conceepto de objeeto JavaScrip
pt.

o es un tipo
Un objeto o avanzado de d datos que admite atributos (pro
opiedades) y funciones (mtodos).
Tendremoos que ir passo a paso parra comprend
der esta defin
nicin.

Si recordaamos cmo considera JavaScript

J que se estructura una pgina
p web a travs del DOM, la
representtacin que haacamos era de este tipo
o:

DOCU
UMENT OBJECT MODEL
L (DOM)

docum
ment

htm
ml

head body

title style div form

h1 h2 p label lab
bel label label
Ejemplo DOM
aprendera
aprogramar.com

Portal web... Didctica ... Si... imput imp

put imput imp
put imput

Podemos sealar quee el propio DOM

D lleva la palabra objeto contenid
da en s mismo: Docume ent Object
Model. Essto ya nos in
ndica que paara JavaScrippt todos los elementos presentes
p en
n el DOM so on objetos.
Por ejemplo el elemeento docum ment es un objeto
o que representa
r la pgina weeb en su coonjunto (el
documentto HTML) y a su vez conssta de numerosos nodos que tambin son objeto os. JavaScriptt utiliza los
objetos como
c estrucctura de dattos fundameental: prcticamente todo (casi tod do) en JavaScript son
objetos.

aprenderraprogramar.co
om, 2006-2029
Objetos JavaScript

Un objeto puede tener valores asociados a los que denominamos propiedades o atributos. Por ejemplo
en un nodo al que hayamos denominado nodoDiv el atributo id nos indica el valor de id en el
documento html para la etiqueta asociada.

En el cdigo HTML tendremos por ejemplo: <div id="cabecera">

Y rescatamos el nodo as: var nodo = document.getElementById('cabecera');

Y luego nos referimos al atributo id del objeto nodo como nodo.id.

Un atributo podra ser una entidad simple, por ejemplo un atributo id con valor cabecera, pero
tambin podra ser una entidad compleja, es decir, otro objeto. Por ejemplo la propiedad doctype del
objeto document (que invocamos como document.doctype) nos devuelve otro objeto.

Un objeto puede tener mtodos (funciones) asociados, que permiten realizar operaciones invocando
dicho objeto. Por ejemplo getElementById es un mtodo disponible para el objeto document.

Escribe este cdigo, gurdalo como documento HTML y trata de razonar sobre lo que se visualiza.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemploObjetos() {
var elDocType = document.doctype;
var resultadoEjecutarMetodo = document.getElementById('cabecera');
var msg = 'document es un objeto. Una de sus propiedades es doctype, puede valer por ejemplo: ' + elDocType + ' que es
otro objeto, ';
msg = msg +'es decir, una propiedad puede ser un objeto. La propiedad name del objeto doctype devuelve: ' +
elDocType.name;
msg = msg + ' y la propiedad publicId devuelve ' + elDocType.publicId + ' \n\n';
msg = msg + 'document como objeto tiene mtodos, por ejemplo getElementById nos devuelve ';
msg = msg + 'el elemento (objeto) con id indicado, que a su vez tiene atributos y mtodos. Por ';
msg = msg + 'ejemplo el div con id cabecera objeto ' + resultadoEjecutarMetodo + ' tiene atributo nodeName:
'+resultadoEjecutarMetodo.nodeName + '\n\n';
alert (msg);
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo funciones JavaScript</h3>
</div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

Fijate cmo los objetos cuando se tratan de mostrar por pantalla (en modo texto) devuelven un
corchete seguido de la palabra object y el tipo de objeto. Por ejemplo [object DocumentType] [object
HTMLDivElement]. En cambio las propiedades o atributos nicamente devuelven un texto, sin los
corchetes ni la palabra object.

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

Nosotros podremos definir moldes de objetos con sus propiedades y con sus mtodos, crear uno o
varios objetos del tipo definido y hacerlos trabajar dentro de nuestro cdigo para facilitar la tarea de la
programacin.

Pensemos en la ventaja que esto nos supone: consideremos que tenemos un array como una serie de
nmeros y queremos conocer su suma. Podramos escribir algo como:

var suma = 0;
var numero = [3, 2, 9];
for (var i=0; i<numero.length; i++){
suma = suma + numero[i];
}
alert ('La suma de los nmeros es: ' + suma);

Pero esto nos obliga a usar un bucle cada vez que queremos conocer la suma de los nmeros
contenidos en el array.

Y si definiramos el array como un objeto al que le aadimos un mtodo por el cual sea capaz de
sumar automticamente el valor de sus nmeros y devolvrnoslo?

Esto sera bastante til. El inters entonces de usar objetos est en que nos permiten combinar datos y
funciones en una misma entidad. El objeto almacenar unos datos (por ejemplo los valores numricos
contenidos en un array) y tendr definidos unos mtodos o funciones internas que permiten realizar
operaciones o procesos (por ejemplo obtener la suma de los valores numricos).

DEFINIR TIPOS DE OBJETOS SIMPLES CON JAVASCRIPT

Empecemos por definir un objeto muy simple, algo que representar una cuenta bancaria. Nuestro
molde, patrn o definicin de tipo se llamar cuentaBancaria y cada vez que queramos crear una
cuenta bancaria escribiremos algo as como new cuentaBancaria.

Hay varias formas de definir tipos de objetos y de crear objetos. Empezaremos usando esta sintaxis
para definir un tipo de objeto:

function nombreDelTipoDeObjeto (par1, par2, , parN) {

this.nombrePropiedad1 = valorPropiedad1;
this.nombrePropiedad2 = valorPropiedad2;
this.mtodo1 = function () { cdigo . }
this.mtodo2 = function (param1, param2, , paramN) { cdigo }
}

Donde par1, par2, , parN son los posibles parmetros necesarios para crear un objeto.

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

nombrePropiedad1, nombrePropiedad2, etc. son los atributos o propiedades (informacin) que porta el
objeto.
mtodo1, mtodo2, etc. son los mtodos o funciones que pueden ser invocadas a travs del objeto.
Estos mtodos pueden no requerir parmetros o s requerir parmetros. El mtodo1 sera un ejemplo
de mtodo que no requiere parmetros y el mtodo2 un ejemplo de mtodo que s requiere
parmetros.

Para crear un objeto del tipo definido escribiremos:

var nombreInstanciaObjetoCreada = new nombreTipoObjeto (param1, param2, , paramN);

Para invocar una propiedad escribiremos:

nombreDelObjeto.nombreDeLaPropiedad

Para invocar un mtodo escribiremos:

nombreDelObjeto.nombreDelMtodo (param1, param2, , paramN)

Donde param1, param2, paramN son los parmetros necesarios para que el mtodo (funcin) se pueda
ejecutar, si es que hay parmetros. Si no los hubiera, simplemente escribiremos los parntesis de
apertura y cierre.

Dado que para invocar propiedades y mtodos se usa el nombre del objeto seguido de un punto y el
nombre de la propiedad o mtodo, se dice que las propiedades y mtodos se invocan usando el
operador punto.

Para comprender todo lo anterior escribe este cdigo y gurdalo con extensin html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function CuentaBancaria () {
this.nombreTitular = "Barack";
this.apellidosTitular = "Obama";
this.saldo = 600000;
this.mostrarDatos = function () {
var msg = 'Los datos de la cuenta son Nombre: ' + this.nombreTitular;
msg = msg + '; Apellidos: ' + this.apellidosTitular + '; Saldo: ' + this.saldo;
alert(msg);
}
}

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

function ejemploCreaObjetos() {
var cuenta1 = new CuentaBancaria();
msg = 'El saldo en la cuenta bancaria de Obama es: ' + cuenta1.saldo + ' dlares';
alert (msg);
cuenta1.mostrarDatos();
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo funciones JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploCreaObjetos()"> Probar </div>
</body>
</html>

Cuando pulsamos sobre el texto Probar se crea el objeto cuenta1 mediante la invocacin de new
cuentaBancaria(). Al crearse el objeto, se establecen sus propiedades, en este ejemplo nombreTitular es
una propiedad y su contenido es Barack. Tambin se establecen mtodos, en este ejemplo el mtodo
mostrarDatos que permite visualizar la informacin que contiene el objeto.

Una vez creado el objeto ya se pueden invocar sus propiedades y sus mtodos con la sintaxis de punto.

Pero este ejemplo es poco til, porque cada vez que creramos un objeto cuentaBancaria, ste objeto
siempre tendra el mismo titular y el mismo saldo.

Normalmente nos interesar crear objetos que respeten el patrn o molde (el tipo definido) pero
donde cada objeto porte unos datos diferentes. Para ello lo ms habitual ser pasar esos datos como
parmetros cuando se crea el objeto. Escribe el cdigo de este ejemplo y prubalo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function CuentaBancaria (datoTitular, datoApellidos, datoSaldo) {
this.nombreTitular = datoTitular;
this.apellidosTitular = datoApellidos;
this.saldo = datoSaldo;
this.mostrarDatos = function () {
var msg = 'Los datos de la cuenta son Nombre: ' + this.nombreTitular;
msg = msg + '; Apellidos: ' + this.apellidosTitular + '; Saldo: ' + this.saldo;
alert(msg);
}
}
function ejemploCreaObjetos() {
var cuenta1 = new CuentaBancaria('Barack', 'Obama', 600000);
cuenta1.mostrarDatos();
var cuenta2 = new CuentaBancaria('Vladimir', 'Putin', 900000);
cuenta2.mostrarDatos();
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo funciones JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploCreaObjetos()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

Resulta un tanto paradjico que para crear un objeto se use function. Y adems para crear los mtodos
dentro del objeto, tambin se usa function. Hablaremos de ello ms adelante.

EJERCICIO

Crea un documento HTML (pgina web) donde exista un botn Crear cuenta bancaria. Cuando el
usuario pulse sobre el botn debe:

a) Pedirse al usuario un nombre de titular, apellidos de titular y saldo de la cuenta.

b) Crear un nuevo objeto cuentaBancaria (similar al que hemos creado en los ejemplos) que se
inicializar con los datos facilitados por el usuario.

c) Mostrar un mensaje informando de que se ha creado la nueva cuenta bancaria y de los datos
asociados a la cuenta bancaria creada.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01144E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objetos JavvaScript

CLASS JAV
VASCRIPT

Las persoonas que esttn aprendieendo JavaSccript y han programado o previamente en otros lenguajes
tradicion
nales como Java, C++, Visual
V Basic, etc.
e usando programaci
p n orientada a objetos, buscan
b con
frecuenciaa las clases (class)
( en JavvaScript. Perro tal y como indica la especificacin
e n oficial, JavvaScript no
usa clasess como lo hacen C++, Smalltalk o Javaa, aunque s permita la creacin de o objetos.

Al igual que
q muchas personas bu uscan class en
e JavaScriptt, tambin buscan
b que eel comportamiento de
JavaScriptt se asemejee al de otro
os lenguajes,, y la verdadd es que JavvaScript tienne en gran medida
m un
comportaamiento disttinto al de lenguajes tradicionales
t populares como Java.. El uso de trminos
comunes entre JavaSccript y otros lenguajes, y el intento por
p program mar en JavaSccript como ses hara en
otros lengguajes, ha provocado
p que exista cieerta confusi
n terminol gica y con frecuencia errores
e de
diseo o de concep pto a la hora de conceebir la proggramacin con c JavaScriipt. Por tan
nto si has
programaado previamente con lenguajes com mo C++ Javva, te darem mos la recom mendacin ded que no
supongas que JavaScrript se va a co
omportar igu ual que estoss lenguajes.

JavaScriptt se dice quee es un lengguaje orientaado a objeto

os que sigue un paradigm ma diferente e de otros
lenguajes como Java,, al paradigm ma de JavaSScript se le llama progrramacin baasada en pro ototipos o
programaacin basadaa en instanciaas. En la programacin basada
b en prrototipos no existen las clases
c tal y
como exissten en otroos lenguajes,, ni existe la herencia tal y como existe en otross lenguajes, aunque s
podemos encontrar ciertas similitudes.

Algunos expertos co onsideran qu

ue JavaScrip
pt es el lennguaje ms incomprend dido entre todos los
existentess, porque po
ocos program
madores con
nocen bien suu filosofa y potencialidaad. Nosotross a lo largo
del curso estamos traatando de co
omprender JavaScript, y seguiremos en ello a lo largo de loss prximos
apartadoss.

DEFINICI
N DE OBJETTO

Ya hemoss hablado sobre objetos y tenemos una

u idea basstante clara de lo que so
on. Vamos ahora a dar
una definicin un poco ms acadmica:

<<Un objeeto es una esstructura de datos que posee

p un nommbre y que est
e formado o por conten
nedores de
informacin que pued den albergarr otros objettos, valores primitivos
p o funciones. U
Un objeto pe
ertenece al
tipo de daato Object dee JavaScript.>>

A los objeetos y valores primitivos que alberga un objeto lo

os solemos llamar propieedades, mien
ntras que a
las funcio
ones que alb berga un objeto las llamamos mtod dos, de ah que
q muchas veces se diga que un
objeto es una colecci n de propieedades y mttodos.

aprenderraprogramar.co
om, 2006-2029
Objetos JavaScript

Casi todo en JavaScript son objetos. Pero no todo. No son objetos los datos que son tipos primitivos:
String, Number, Boolean, Null, Undefined. No obstante, existen tipos objeto equivalentes a los tipos
primitivos. Por ejemplo, podemos crear un String como tipo primitivo o como objeto usando:

var cadena = 'aprenderaprogramar.com'; // Tipo primitivo

var cadenaOb = new String ('aprenderaprogramar.com'); // Objeto

Un tipo primitivo se considera un tipo de dato simple: contiene una informacin simple. En cambio un
objeto es un tipo de datos complejo, que puede albergar gran cantidad de informacin de distinta
naturaleza.

OBJETOS EN EL ENTORNO DE JAVASCRIPT Y OBJETOS DE USUARIO

Hemos visto cmo crear un objeto donde nosotros definimos sus propiedades y mtodos. Pero existen
objetos que son predefinidos por JavaScript y por tanto el navegador los reconoce sin necesidad de que
nosotros los creemos.

Objeto predefinido Utilidad

Objeto nico y global, existente antes de que comience la ejecucin de

Objeto global
cdigo. window suele considerarse que es el objeto global.

Objeto que permite acceder a propiedades y hacer operaciones

Object
relacionadas con objetos

Objeto que permite acceder a propiedades y hacer operaciones

Function
relacionadas con funciones

Objeto que permite acceder a propiedades y hacer operaciones

Array
relacionadas con arrays

Objeto que permite acceder a propiedades y hacer operaciones

String
relacionadas con strings

Objeto que permite acceder a propiedades y hacer operaciones

Boolean
relacionadas con booleanos

Objeto que permite acceder a propiedades y hacer operaciones

Number
relacionadas con nmeros

Math Facilita el uso de funciones y posibilidades matemticas

Date Facilita el trabajo con fechas

Permite trabajar con expresiones regulares para reconocer fragmentos de

RegExp
cadenas o patrones presentes en cadenas

JSON Permite trabajar con el formato de datos JSON

Error, EvalError, RangeError,

ReferenceError, SyntaxError, Objetos que permiten controlar y obtener informacin sobre errores
TypeError, URIError

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

Escribe por ejemplo alert ('El valor de number max value es ' + Number.MAX_VALUE);

Comprobars que te devuelve un resultado del tipo El valor de number max value es
1.7976931348623157e+308. Por qu podemos invocar Number.MAX_VALUE si no hemos definido el
objeto Number ni sus propiedades y mtodos? Porque este objeto, al igual que otros, son objetos
predefinidos de JavaScript.

Los objetos predefinidos de JavaScript nos resultarn muy tiles para distintos cometidos. Por ejemplo
el objeto Math nos permite realizar clculos matemticos u obtener nmeros pseudoaleatorios. Prueba
por ejemplo a hacer que se muestren varios nmeros aleatorios con alert(Math.random());

Todo objeto JavaScript (incluido las funciones) se considera que son instancias del objeto Object, y
debido a ello heredan propiedades y mtodos de Object. Si no tienes claro qu significa que exista
herencia no te preocupes pues lo iremos viendo a lo largo del curso. Te recomendamos que leas esto:
herencia en POO, slo para tener una idea de lo que significa herencia.

window, el objeto global, tiene sus propiedades y mtodos. La funcin que venimos usando para
mostrar mensajes por pantalla, alert, es un mtodo de window. Cuando escribimos alert('Hola'); en
realidad estamos invocando window.alert('Hola');

Es decir, alert y window.alert son lo mismo para el navegador. El hecho de que no sea necesario escribir
window cuando escribimos alert obedece a que si se invoca una funcin que no ha sido definida de otra
manera, se considera que es un mtodo del objeto global.

Prueba este cdigo y comprueba sus resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemploObjetos() {
var texto = 'Aprende a programar';
window.alert('alert es un mtodo del objeto global window');
window.alert(texto);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

JavaScript permite definir tipos de objetos y crear instancias de objetos de diferentes maneras y esto ha
creado algo de confusin entre los programadores. Otros lenguajes tienen una sola manera de hacer
estas cosas, en cambio JavaScript tiene varias. Esto resulta molesto para muchos programadores, sobre
todo cuando tienen que revisar cdigo creado por otras personas. La ventaja de esta existencia de
mltiples formas sintcticas para hacer lo mismo es que cada programador puede elegir la que le
resulte ms cmoda o conveniente, y el inconveniente es la falta de uniformidad en el cdigo
desarrollado por distintos programadores y la necesidad de conocer esas mltiples formas para poder
revisar cdigo no creado por uno mismo.

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

Ya conocemos una de las formas de definir un tipo de objeto:

function nombreDelTipoDeObjeto (par1, par2, , parN) {

this.nombrePropiedad1 = valorPropiedad1;
this.nombrePropiedad2 = valorPropiedad2;
this.mtodo1 = function () { cdigo . }
this.mtodo2 = function (param1, param2, , paramN) { cdigo }
}

Como alternativa tenemos esta otra forma:

function nombreDelTipoDeObjeto (par1, par2, , parN) {

this.nombrePropiedad1 = valorPropiedad1;
this.nombrePropiedad2 = valorPropiedad2;
this.mtodo1 = nombreFuncion1;
this.mtodo2 = nombreFuncion2;
}
function nombreFuncion1 (par1, par2, , parN) { cdigo }
function nombreFuncion2 (par1, par2, , parN) { cdigo }

En esta forma de definicin lo que antes eran funciones annimas internas, ahora se han convertido en
funciones con nombre externas.

Fjate que this.mtodo1 = nombreFuncion1; nicamente define el nombre de la funcin que se

ejecutar cuando se llame al mtodo. En el nombre de la funcin no se incluyen parntesis, nicamente
el nombre.

La funcin externa reconoce a que se invoca una propiedad del objeto si se incluye
this.nombrePropiedad dentro de su cdigo. Igualmente para los mtodos.

Prueba este cdigo y comprueba sus resultados (que deben ser 14, 14 y 10).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
function objetoSerie(unArray) {
this.nombre = 'Nombre del objeto';
this.contenidoArray = unArray;
this.suma = obtenerSuma;
}

aprenderaprogramar.com, 2006-2029
Objetos JavaScript

function obtenerSuma() {
var suma=0;
for (var i=0; i<this.contenidoArray.length; i++){ suma = suma + this.contenidoArray[i]; }
return suma;
}

function ejemploObjetos() {
var suma = 0; var serie = [3, 2, 9];
for (var i=0; i<serie.length; i++){ suma = suma + serie[i]; }
alert ('La suma de los nmeros visto como array simple es: ' + suma);
serieOb = new objetoSerie(serie);
alert ('La suma de los nmeros visto como objeto es: ' + serieOb.suma());
otroObjeto = new objetoSerie([2,1,3,4]); alert ('La suma para otro objeto es: ' + otroObjeto.suma());
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

El problema de usar este mtodo basado en funciones auxiliares definidas externamente es que dichas
funciones son accesibles no slo desde objetos del tipo definido, sino tambin como funciones
normales. Adems, al crearse muchos mtodos basados en funciones externas normalmente se
termina creando un conflicto de nombres: ms de una funcin auxiliar externa con el mismo nombre,
de modo que el navegador no sabe qu funcin es la que debe tomar entre las dos (o ms) con el
mismo nombre. Por ello recomendamos seguir la definicin de tipos de objeto basada en funciones
internas antes que este otro mtodo (que tambin es muy popular).

EJERCICIO

Define un tipo de objeto Medico en JavaScript que tenga como propiedades: nombre (String),
personasCuradas (nmero entero), especialidad (String) y como mtodos un mtodo denominado
curarPersona y otro mtodo denominado mostrarDatos. El mtodo curarPersona deber aadir una
unidad al valor de la propiedad personasCuradas y el mtodo mostrarDatos deber mostrar los datos el
mdico. Por ejemplo, El mdico se llama Juan Eslava, su especialidad es traumatologa y lleva curadas
8 personas. Crea dos objetos del tipo definido, e invoca sus mtodos para comprobar que funcionan
correctamente.

Crea las dos alternativas de cdigo: mtodos con funciones internas annimas o mtodos con
referencia a funciones externas.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01145E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Constructorres JavaScript. Crear objetos vacos.
v Singleto
on.

CONSTRU
UCTORES Y MS
M FORMAS DE CREAR OBJETOS

JavaScriptt tiene ciertaas diferencias respecto a otros lenguajes de proggramacin orrientados a objetos.
o En
JavaScriptt no existe el
e concepto ded clase ni ell concepto de
d constructo or propiamente dicho, aunque por
analoga con
c otros len nguajes much has veces ussamos estos trminos.
t

UCTORES EN CLASES JA
CONSTRU AVASCRIPT

En prograamacin orieentada a objeetos se deno digo que se eejecuta cuando se crea

omina constrructor al cd
un objetoo de un tipo determinado (a cada ob bjeto creado se le denommina instancia). En otross lenguajes
el constru
uctor se deliimita dentroo de etiquetas separnd dolo del restto del cdigo
o de la clase
e, pero en
JavaScriptt esto no ess as. Cuando se instanccia un objeto o, funciona como consttructor todo el cdigo
declaradoo dentro de la funcin, ess decir, todo
o cdigo denttro de la funcin que pueeda ser ejecu
utado ser
ejecutadoo (no se ejeccutarn los mtodos
m de la funcin, ya que ser necesario invocarlos paara que se
ejecuten).

Escribe esste cdigo, gurdalo con extensin httml y comprueba lo que ocurre.

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html>
<head>
<title>Ejeemplo aprenderraprogramar.co om</title>
<meta ch harset="utf-8">
<script tyype="text/javasscript">
function Taxi
T (tipoMotor) {
this.tipoMMotor = tipoMo otor;
alert('Se ha creado un objeto taxi con tipot motor: ' + this.tipoMotor)
t );
this.getCaapacidad = funcction () { if (tipo
oMotor == 'Diessel') { return 40
0;} else {return 35;}
3 }
}

function ejemploObjeto
e os() {
var cochee1 = new Taxi('D Diesel');
var cochee2 = new Taxi('G Gasolina');
alert ('El coche
c 1 tiene capacidad
c ' + co
oche1.getCapaccidad() + ' litros\\n');
alert ('El coche
c 2 tiene capacidad
c ' + co
oche2.getCapaccidad() + ' litros\\n');
}
</script>
</head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejempplos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

aprenderraprogramar.co
om, 2006-2029
Constructores JavaScript. Crear objetos vacos. Singleton.

Al pulsar sobre el texto Probar comprobamos que se muestran los mensajes:

Se ha creado un objeto taxi con tipo motor: Diesel. Se ha creado un objeto taxi con tipo motor: Gasolina
El coche 1 tiene capacidad 40 litros. El coche 2 tiene capacidad 35 litros

Como obervamos, cada vez que se instancia (crea un objeto) de la clase, se ejecuta el cdigo asociado.

En este ejemplo tenemos el cdigo this.tipoMotor = tipoMotor; donde debemos recordar que
this.tipoMotor alude a la propiedad de la clase, mientras que tipoMotor es el parmetro recibido. Dado
que ambos tienen el mismo nombre, la forma de diferenciar cundo nos referimos a la propiedad y
cundo al parmetro es usar this cuando queramos referirnos a la clase. En general, toda propiedad y
todo mtodo dentro de la clase irn antecedidos de la palabra clave this para indicar que nos referimos
a propiedades y mtodos y no a variables cualquiera.

MS FORMAS DE CREAR OBJETOS

Hemos visto que podemos declarar un tipo y luego crear objetos usando la invocacin basada en new
nombreDelObjeto. Existen ms alternativas para crear objetos:

Creacin de un objeto vaco

Para crear un objeto vaco podemos usar esta sintaxis.

var objetoCreado = { };
Esta sintaxis equivale a escribir var objetoCreado = new Object ();

El objeto vaco creado con esta sintaxis pertenece al tipo de objeto predefinido de JavaScript al cual
pertenecen todos los dems objetos existentes: Object.

Adems existe un objeto Object, objeto predefinido de JavaScript, que nos facilita mtodos para
manipular objetos. No confundir el tipo de dato Object con el objeto predefinido Object. Prueba este
ejemplo donde se usa el objeto Object para definir una propiedad de un objeto creado inicialmente
vaco:

var pintura1 = {};

Object.defineProperty(pintura1, 'autor', {value: 'Vincent Van Gogh', writable:true, enumerable:true, configurable:true});
alert ('La propiedad autor del objeto pintura1 es: ' + pintura1.autor);
pintura1.autor = 'Michelangelo';
alert ('La propiedad autor del objeto pintura1 es: ' + pintura1.autor);
pintura1.deletrear = function () {
var letras = []; var msg = '';
for(var i=0; i<pintura1.autor.length;i++){msg = msg+pintura1.autor[i]+'-'; }
alert (msg);
}
pintura1.deletrear();

aprenderaprogramar.com, 2006-2029
Constructores JavaScript. Crear objetos vacos. Singleton.

Con este cdigo en primer lugar creamos un objeto vaco pintura1. Luego le aadimos una propiedad
valindonos del mtodo defineProperty del objeto predefinido Object. En este mtodo pasamos como
parmetros el objeto del que definimos la propiedad (pintura1), el nombre de la propiedad (autor), el
valor de la propiedad (Vincent Van Gogh) y sus caractersticas writable, enumerable y configurable (no
vamos ahora a hablar sobre estas caractersticas). Posteriormente, accedemos a la propiedad y la
modificamos para que pase a valer Michelangelo. Finalmente definimos una funcin para el objeto
creado. A continuacin resumimos la sintaxis utilizada. Adicin de una propiedad a un objeto:

Object.defineProperty(nombreObjeto, 'nombrePropiedad', {value: 'valorAsignado',

writable:true, enumerable:true, configurable:true});

Adicin de una funcin a un objeto:

nombreObjeto.nombreFuncionDefinimos = function () { cdigo }

Definicin y creacin simultnea de un objeto

Para definir y crear un objeto en un solo paso usamos esta sintaxis:

var nombreObjetoCreado = {
propiedad1: valorPropiedad1,
propiedad2: valorPropiedad2,
propiedadN: valorPropiedadN,

mtodo1: function () { cdigo }
mtodo2: function (par1, par2, , parN) { cdigo }
mtodoN: function () { cdigo }
}

Comprueba los resultados de ejecutar este cdigo:

var pintura2 = {
autor: "Vincent Van Gogh",
aoCreacion: 1871,
titulo: 'Los rosales corintios',
getInfo: function () { return this.titulo + ':' + this.autor + ', ' + this.aoCreacion +'.'; }
}
alert(pintura2.getInfo());

aprenderaprogramar.com, 2006-2029
Constructores JavaScript. Crear objetos vacos. Singleton.

Con esta sintaxis no se pueden crear objetos adicionales del tipo definido. El nico objeto existente es
el que hemos definido y creado simultneamente. Algunos autores denominan a esta construccin un
Singleton (objeto nico) por analoga con el patrn Singleton usado en otros lenguajes orientados a
objetos para crear objetos nicos.

EJERCICIO

Una de las utilidades de crear objetos vacos es evitar conflictos de nombres. Supn que creas funciones
como:
function crearEntrada() {
// hacer algo
}

function crearSalida() {
// hacer algo
}

El problema que se presenta es que en otro momento se pueda definir otra funcin con el mismo
nombre que alguna de las ya definidas, creando un conflicto de nombres.

Crea un objeto vaco denominado GestionDeUsuarios y adele dos mtodos: un mtodo

preguntarNombre y un mtodo despedir. Al invocar GestionDeUsuarios.preguntarNombre(user) se
debe crear un objeto de tipo usuario con id de usuario user y almacenar su nombre e id de usuario. Al
invocar el mtodo GetionDeUsuarios.despedir(user) se debe mostrar un mensaje de despedida Hasta
luego nombreDeUsuario donde nombreDeUsuario ser el nombre correspondiente.

Responde la siguiente pregunta: si se crea una funcin despedir entrar en conflicto con el mtodo
definido?

Nota: una de las libreras ms populares construidas para JavaScript es jQuery. jQuery dispone de un
objeto global al que se denomina $, de modo que se accede a las funciones de jQuery escribiendo algo
como $.nombreFuncion(). Esto es, con la diferencia de escala, algo similar a la creacin del objeto
GestionDeUsuarios visto en el ejemplo. $ evita que jQuery entre en conflictos de nombres.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01146E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Arrays aso
ociativos JavaSccript? Recorrer propiedades de
d objetos.

ARRAYS ASOCIATIVO
OS JAVASCRIPT?

Con frecu o que los objetos JavvaScript deffinen arrayss asociativoss. Existen los arrays
uencia se oye
asociativoos en JavaScript de la misma forma en que se co
onocen en otros
o lenguajjes? Tambin se alude
muchas veces
v a los objetos
o JavaScript como
o maps. Vam
mos a tratar de aclarar eesta termino
ologa y su
significado.

ADES DEFIN
PROPIEDA NEN ARRAYSS ASOCIATIV
VOS?

Hemos vissto que geneeralmente deefinimos las propiedadess y luego acccedemos a ellas con la no
otacin de
punto commo nombreO Objeto.nomb brePropiedad d. Pero hay otra
o forma alternativa
a dee acceso: la basada en
usar una notacin
n sim
milar a la de acceso
a a los elementos
e de un array.

La sintaxiss de notacin tipo array para acceder a las propie n objeto es la siguiente:
edades de un

nombreObjeto['nombre
ePropiedad']
Essta sintaxis equivale a esccribir nombreObjeto.nom
mbrePropied
dad
Fijarse que en el
e primer caso nombrePro opiedad est entre comillas y en el segundo caso
o no,
aunquue tambin sera
s vlido nombreObjet
n to[nombreV VariableTipoSString].

Escribe el siguiente c
digo en tu editor
e y com
mprueba cm
mo el acceso a propiedad
des con amb
bas sintaxis
genera loss mismos ressultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<script tyype="text/javasscript">
function TaxiRenault
T (tip
poMotor) { thiss.tipoMotor = tiipoMotor;
this.marcca = 'Renault';
this.getCaapacidad = funcction () { if (tipo
oMotor == 'Diessel') { return 40
0;} else {return 35;}
3 }
}
function ejemploObjeto
e os() {
var taxi1 = new TaxiRenaault();
alert ('La marca de taxi 1 como taxi1.m marca es ' + taxi1
1.marca);
alert ('La marca de taxi 1 como taxi1.[\\'marca\'] es ' + taxi1['marca']));
}
</script>
</head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

aprenderraprogramar.co
om, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.

Si lo deseamos podemos crear objetos carentes de mtodos con el nmero de propiedades que
deseemos y despus rescatar esas propiedades invocando el elemento con la sintaxis tipo array. La
sintaxis es:

var nombreDelObjeto = { propiedad1: valorPropiedad1, propiedad2: valorPropiedad2,

propiedadN: valorPropiedadN };

Con esta sintaxis algunos caracteres o palabras reservadas no pueden usarse como nombre de
propiedad sin encerrarlos entre comillas. Por ejemplo no debemos definir como propiedad +:
obtenerSuma (donde obtenerSuma es el nombre de una funcin asociada). Si queremos que + sea una
propiedad escribiremos '+': obtenerSuma. En realidad si usamos esta sintaxis todos los nombres de
propiedades pueden encerrarse entre comillas porque JavaScript los considera de tipo String.

Resulta vlido tanto var pintor = {'edad':32, 'nombre':'jose'} como var pintor = {edad:32, nombre:'jose'}

Con frecuencia se dice que los objetos JavaScript funcionan como Maps o que hacen un mapeo entre
Strings y valores. El concepto de Map es similar al de diccionario: en un Map tenemos muchos pares
(key, value) o (llave, valor). La llave es un identificador breve al que est asociado algo ms complejo (el
valor). Por ejemplo podramos crear un map donde la llave es el nmero de pasaporte y el valor un
objeto que porta todos los datos de una persona (nombre, domicilio, lugar de nacimiento, etc.). En un
diccionario las claves o llaves son los trminos y los valores las definiciones del trmino. Para encontrar
una definicin, buscamos la llave y a continuacin leemos la definicin.

En otras ocasiones se dice que los objetos JavaScript definen arrays asociativos porque permiten el
acceso a las propiedades a travs de la sintaxis propia de arrays usando como ndice el nombre de la
propiedad. Pero realmente se genera un array al crear un objeto?

Vamos a comprobarlo. Escribe el siguiente cdigo y ejectalo. A continuacin comentaremos las

conclusiones que podemos sacar de l.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemploObjetos() {
var ejemploArray = new Array();
ejemploArray[0] = 'verde'; ejemploArray[1] = 'Argentina'; ejemploArray[2] = 'mate';
alert ('La longitud de ejemploArray es ' + ejemploArray.length);
var ejemploPropiedades = new Array();
ejemploPropiedades['color'] = 'verde'; ejemploPropiedades['pais'] = 'Argentina'; ejemploPropiedades['bebida'] = 'mate';
alert ('La longitud de ejemploPropiedades es ' + ejemploPropiedades.length);
alert ('La propiedad color vale ' + ejemploPropiedades['color']);
alert ('El ndice cero del array vale ' + ejemploPropiedades[0]);
for (var i=0; i<ejemploArray.length; i++) { alert ('Valor en ejemploArray: ' + ejemploArray[i]); }
for (var i=0; i<ejemploPropiedades.length; i++) { alert ('Valor en ejemploPropiedades ' + ejemploPropiedades[i]); }
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.

Al ejecutar este cdigo el resultado esperado es el siguiente:

La longitud de ejemploArray es 3 -- > Para el array creado con ndices numricos

La longitud de ejemploPropiedades es 0 -- > Para el array creado aadiendo propiedades
nombreArray['x'] = 'valor';
La propiedad color vale verde -- > La propiedad se puede rescatar
El ndice cero del array vale undefined -- > No existe elemento ndice cero entonces es esto un array?
Valor en ejemploArray: verde, Valor en ejemploArray: Argentina, Valor en ejemploArray: mate

Comentarios: este cdigo no hace lo que podra suponerse que debera hacer. Vamos a plantear y
responder preguntas relativa a lo que ocurre cuando se ejecuta este cdigo.

Es ejemploPropiedades un array? S, puesto que lo hemos creado con new Array().

Qu contiene el elemento con ndice cero del array? No contiene nada (contiene undefined), ya que
no ha sido definido, ni este ni ningn otro elementos. El array tiene cero elementos (est vaco).

Entonces al definir ejemploPropiedades['color'] = 'verde'; no estamos definiendo un elemento del

array? No, con esa sintaxis lo que estamos haciendo es aadir una propiedad al objeto. Una propiedad
no es un elemento en la coleccin de elementos que constituye un array, sino algo propio del objeto (y
por tanto inherente al objeto dentro del cual estara la coleccin de elementos). La confusin puede
venir porque en otros lenguajes no existe esta sintaxis para acceder a las propiedades de un objeto y
porque en otros lenguajes con arrays asociativos se permite el uso indistinto de cadenas o nmeros
para acceder a los elementos del array. Tenemos que pensar que JavaScript es JavaScript y no sigue
necesariamente las convenciones o pautas habituales en otros lenguajes.

Por qu ejemploPropiedades.length devuelve cero? Porque no existen (al menos por el momento)
elementos en el array. Por tanto no podemos recorrer este array con un bucle for porque no existen
elementos en el array.

Cmo podra conocer o recorrer las propiedades existentes en un objeto?

Con un for in. La sintaxis a emplear para recorrer las propiedades de un objeto es la siguiente:

for (nombrePropiedad in nombreObjeto) {

... ejecucin de sentencias
}

Escribe este cdigo y comprueba el resultado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemploObjetos() { var ejemploPropiedades = new Array();
ejemploPropiedades['color'] = 'verde'; ejemploPropiedades['pais'] = 'Argentina'; ejemploPropiedades['bebida'] = 'mate';
msg = '';

aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.

for(nombrePropiedad in ejemploPropiedades) {
msg = msg + 'Propiedad: ' + nombrePropiedad + '. Valor propiedad es: '+ejemploPropiedades[nombrePropiedad]+ ' \n';
}
alert (msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

El resultado esperado es que se muestre por pantalla:

Propiedad: color. Valor propiedad es: verde

Propiedad: pais. Valor propiedad es: Argentina
Propiedad: bebida. Valor propiedad es: mate

Las propiedades y forma de acceso asociativo existen para cualquier objeto aunque no sea de tipo
Array?

S, el acceso basado en la sintaxis nombreObjeto.[ 'nombrePropiedad'] existen para cualquier objeto.

Es correcto o no hablar de arrays asociativos en JavaScript?

La especificacin oficial JavaScript no hace uso del trmino array asociativo y nosotros preferimos no
hacer uso del trmino array asociativo sino referirnos a sintaxis de acceso de tipo array. No obstante,
encontrars que mucha gente hace uso de este trmino (algunos por desconocimiento, pero otros
porque lo consideran adecuado). Grandes expertos en JavaScript hacen uso del trmino y otros grandes
expertos indican que no se debe hacer uso del trmino.

Si te fijas usando el for in puedes conseguir que un objeto se comporte de forma muy parecida a como
lo hara un array. Ten clara la sintaxis y las posibilidades que existen, y respecto a si usar o no el
trmino, haz lo que consideres ms oportuno.

Para qu es til el acceso a propiedades con la sintaxis tipo array?

Algunos programadores la usan porque les gusta, pero hay casos en que es la nica forma de acceder a
una propiedad. Supn que el nombre de una propiedad lo establece el usuario (o se crea
dinmicamente de alguna manera) introduciendo un dato que almacenas en una variable denominada
nombrePropiedad. En este caso no es posible acceder a la propiedad con la sintaxis
nombreObjeto.nombrePropiedad, pero s ser posible acceder con la sintaxis
nombreObjeto[nombrePropiedad].

aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.

EJERCICIO

El siguiente cdigo hace uso de la notacin tipo array para invocar propiedades. Tambin crea objetos
nicos (los objetos plus, minus, operaciones y calcular). Analiza el cdigo y trata de comprenderlo.

Se pide realizar los siguientes cambios:

a) Reemplaza toda la notacin basada en sintaxis tipo array para el acceso a propiedades por sintaxis
basada en notacin de punto. Ejecuta el cdigo y comprueba su funcionamiento.

b) Sobre el cdigo de la opcin a), cambia la definicin de objetos para que no sean objetos nicos, sino
que plus, minus y calcular sean funciones simples, y operaciones un objeto instanciable (que tendrs
que instanciar si es necesario). Ejecuta el cdigo y comprueba su funcionamiento.

c) Sobre el cdigo de la opcin c), aade la posibilidad de hacer clculos de multiplicacin y divisin de
la misma forma que se hacen clculos de suma y resta. Muestra un mensaje por cada tipo de operacin.
Ejecuta el cdigo y comprueba su funcionamiento.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var plus = function(x,y){ return x + y };
var minus = function(x,y){ return x - y };
var operaciones = {
'+': plus,
'-': minus
};
var calcular = function(x, y, operacion){ return operaciones[operacion](x, y); }
function ejemploObjetos() {
alert ('Resultado de calcular(3, 15, \'+\') es '+ calcular(3,15, '+'));
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

Este cdigo nos recuerda, entre otras cosas, que: un objeto se puede crear usando la palabra clave var,
una funcin se puede crear usando la palabra clave var, y una propiedad de un objeto puede ser una
funcin. Esta nomenclatura es un poco complicada, pero hay que irse acostumbrando poco a poco a
ella.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01147E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Herencia baasada en prototipos JavaScrip
pt (prototype).

HERENCIA
A Y PROTOTY
YPE

Hasta ahoora hemos visto como definir objetos con prropiedades y mtodos y cmo instanciarlos.
Trataremoos ahora dee ver cmo podemos hacer que muchos objettos de un mmismo tipo compartan
c
(hereden)) propiedadees y mtodoss de modo que se optimice el cdigo.

Cada vez que instanciamos un ob bjeto con neew se crea una instancia que porta espacio de
e memoria
donde esttn las propiedades y loss mtodos.

Supongam mos que hemos

h defin
nido un ob bjeto TaxiRenault cuyaas propiedaades son fabricante,
f
direccionFFabricante, tipoMotor, numeroPaasajeros, carga, y velo ocidad, y cuyos mtodos son
getCapaciidad (devueelve la capacidad del depsito
d de combustiblee), variarCarga y variarrVelocidad
(suponemmos que la caarga y velocid dad aumentaan si se pasaa un valor po
ositivo a los m
mtodos respponsables,
o que dism
minuyen si se pasa un vaalor negativo o). Suponemoos que propiiedades y mtodos se haan definido
usando la palabra clavve this, lo cual significa que
q perteneccen al objeto.

Este esquema resumee cmo se haa concebido el

e patrn o clase
c para loss objetos de tipo TaxiRen
nault:

TaxiRe
enault

fa
abricante
d
direccinFabrica
ante
tipoMotor
Propieda
ades
n
numeroPasajero
os
c
carga
v
velocidad

g
getCapacidad
v
variarCarga Mtodos
s
v
variarVelocidad

Renault podra
p o Taxi (en veez de usar como objeto
haber sido el valorr de la propieedad marca de un objeto
TaxiRenauult), pero ten en cuentaa que esto es e un ejempllo para estudiar la herencia, no pre etendemos
que uses esto como cdigo real.

Supongam
mos ahora qu ue creamos tres objetos de tipo TaxiRenault mediante la sen ntencia new, a los que
denominaamos taxi1, taxi2
t y taxi3. Un esquema para repre
esentarlos po
odra ser el siiguiente:

aprenderraprogramar.co
om, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

Aqu vemos que cada objeto cuenta con sus propiedades y con sus mtodos. Cada propiedad y cada
mtodo ocupa espacio de memoria y genera una carga a la hora de trabajar con ellos. Tambin
observamos que algunas propiedades siempre tienen el mismo valor en todos los objetos. En este
ejemplo la propiedad fabricante siempres es Renault S.A., y la direccin del fabricante siempre es c/R,
Pars. Otras propiedades (aunque casualmente puedan tener el mismo valor en varios objetos) son las
que realmente caracterizan al objeto (tipoMotor, numeroPasajeros, carga, velocidad), es decir, son
propiedades inherentes a cada objeto individual y especfico, no compartidas por todos los objetos.

En cuanto a los mtodos, todos los mtodos hacen lo mismo: reciben (o no) unos datos, y realizan un
proceso. En todos los objetos los mtodos son iguales pero estn repetidos.

Escribe y prueba el siguiente cdigo, que refleja al esquema anterior.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function TaxiRenault (tipoMotor, numeroPasajeros, carga, velocidad) {
this.fabricante = 'Renault, S.A.'; this.direccionFabricante = 'c/R, Paris';
this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros;
this.carga = carga; this.velocidad = velocidad;
this.getCapacidad = function () { if (tipoMotor == 'Diesel') { return 40;} else {return 35;} }
this.variarCarga = function (variacion) { this.carga = this.carga + variacion; }
this.variarVelocidad = function (variacion) { this.velocidad = this.velocidad + variacion; }
}
function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90); var taxi2 = new TaxiRenault(2, 6, 350, 80);
var taxi3 = new TaxiRenault(1, 5, 340, 110);
alert ('La velocidad del taxi 2 es ' + taxi2.velocidad);
taxi2.variarVelocidad(-10);
alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

Si los objetos TaxiRenault fueran objetos muy complejos y generramos cientos o miles de objetos de
esta manera nos encontraramos con que podemos saturar la memoria disponible y ralentizar la
ejecucin de la pgina web, o incluso generar un bloqueo.

HERENCIA BASADA EN PROTOTIPOS

La idea de la herencia basada en prototipos JavaScript es definir un objeto (el objeto padre o
prototipo) donde se aloja toda la informacin comn que comparten todos los objetos de ese tipo (los
objetos hijos). De esta manera se evita que cada objeto repita las propiedades y mtodos comunes, lo
cual ahorra memoria y agiliza la ejecucin.

Las propiedades y mtodos comunes se alojan en el prototipo u objeto padre, lo cual podemos
representar con un esquema como este:

TaxiRenault.prototype

fabricante Propiedades
direccinFabricante comunes

getCapacidad
Mtodos
variarCarga comunes
variarVelocidad
Hereda de ...

TaxiRenault

tipoMotor
Propiedades
numeroPasajeros especficas de
carga cada objeto
velocidad
Mtodos
especficos de
cada objeto

La ventaja de este esquema es que las propiedades y mtodos comunes slo existen una vez. Cuando
un objeto invoca una propiedad, por ejemplo taxi1.fabricante, se comprueba si dicha propiedad est
definida como propiedad especfica del objeto, y si no es as, se busca en su prototipo de modo que si la
propiedad existe en el prototipo, se devuelve esa propiedad de la misma manera que si fuera una
propiedad del objeto. Si no se encontrara en el prototipo, se buscara en el prototipo del prototipo (el
padre del padre) y as sucesivamente hasta encontrarla o no: a esto se le denomina cadena de
prototipos o prototype chain y hablaremos sobre esto ms adelante.

aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

Al crear varios objetos TaxiRenault el esquema sera como este:

Lo que este esquema representa es que los objetos taxi1, taxi2 y taxi3 disponen de los atributos
fabricante y direccinFabricante, as como de los mtodos getCapacidad, variarCarga y variarVelocidad.
Pero estos atributos y mtodos ya no estn repetidos en cada uno de los objetos (no son propiedades y
mtodos de instancia) sino que estn alojados en el prototipo, evitando as la repeticin de informacin
y sobrecarga de memoria.

Ten en cuenta que el uso de prototipos y herencia no es algo que haya que utilizar para todo: slo
debemos pensar en ello cuando sea necesario. Cundo es necesario? Esta pregunta debe ser
respondida para cada problema particular, pero en general piensa que no ser necesario pensar en
prototipos y herencia cuando slo se vayan a crear unos pocos objetos. En cambio, en aplicaciones
como juegos donde se usan intensivamente objetos (por ejemplo para representar meteoritos cayendo
desde el espacio) ser til el uso de prototipos.

Si has trabajado previamente con otro tipo de lenguajes orientados a objetos (por ejemplo Java),
posiblemente ests tratando de buscar las similitudes entre Java y JavaScript. Podramos hacerlo, pero
posiblemente esto nos generara un lo de conceptos. Intenta olvidarte de las clases y mecanismos de
herencia propios de otros lenguajes y cambia el chip: piensa en JavaScript.

A diferencia de otros lenguajes (como Java) donde existen clases y objetos, en JavaScript deberamos
decir que existen prototipos y objetos, aunque en muchos casos se usa la palabra clase por analoga.

aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

DEFINIR PROTOTIPOS

En JavaScript el prototipo de un objeto est definido de forma predeterminada como una propiedad
oculta de todo objeto, a la que podemos acceder con la sintaxis: nombreObjeto.prototype. El
prototipo es a su vez un objeto (recuerda que una propiedad puede ser tanto un tipo primitivo como un
objeto) y por tanto a dicho objeto se le pueden aadir propiedades y mtodos.

Dado que JavaScript ofrece numerosas alternativas para trabajar con objetos, propiedades y mtodos,
existen numerosas alternativas para definir el prototipo de un objeto.

Alternativa 1: definir propiedades y mtodos con la notacin de punto:

function nombreObjeto (par1, par2, , parN) {

this.propiedad1 = valorPropiedad1;
this.propiedad2 = valorPropiedad2;

}
nombreObjeto.prototype.propiedadComn1 = valorPropieadadComn1;
nombreObjeto.prototype.propiedadComn2 = valorPropieadadComn2;

nombreObjeto.prototype.mtodoComn1 = function (par1, par2, ) { }
nombreObjeto.prototype.mtodoComn2 = function (par1, par2, ) { }

Escribe este cdigo y comprueba los resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function TaxiRenault (tipoMotor, numeroPasajeros, carga, velocidad) {
this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros; this.carga = carga;
this.velocidad = velocidad;
}
TaxiRenault.prototype.fabricante = 'Renault, S.A.';
TaxiRenault.prototype.direccionFabricante = 'c/R, Paris';
TaxiRenault.prototype.getCapacidad = function () { if (tipoMotor == 'Diesel') { return 40;} else {return 35;} }
TaxiRenault.prototype.variarCarga = function (variacion) { this.carga = this.carga + variacion; }
TaxiRenault.prototype.variarVelocidad = function (variacion) { this.velocidad = this.velocidad + variacion; }
function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90); var taxi2 = new TaxiRenault(2, 6, 350, 80);
var taxi3 = new TaxiRenault(1, 5, 340, 110);
alert ('El fabricante del taxi 2 es ' + taxi2.fabricante + ' y la velocidad del taxi 2 es ' + taxi2.velocidad);
taxi2.variarVelocidad(-10); alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

Alternativa 2: definir un objeto y convertir una instancia de dicho objeto en prototipo:

function nombreObjeto (par1, par2, , parN) {

this.propiedad1 = valorPropiedad1; this.propiedad2 = valorPropiedad2;
}
function objetoDestinadoASerPrototipo (par1, par2, ) { }
nombreObjeto.prototype = new objetoDestinadoASerPrototipo();

Escribe este cdigo y comprueba los resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function TaxiRenault (tipoMotor, numeroPasajeros, carga, velocidad) {
this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros;
this.carga = carga; this.velocidad = velocidad;
}
function prototipoTaxiRenault () {
this.fabricante = 'Renault, S.A.'; this.direccionFabricante = 'c/R, Paris';
this.getCapacidad = function () { if (tipoMotor == 'Diesel') { return 40;} else {return 35;} }
this.variarCarga = function (variacion) { this.carga = this.carga + variacion; }
this.variarVelocidad = function (variacion) { this.velocidad = this.velocidad + variacion; }
}

TaxiRenault.prototype = new prototipoTaxiRenault();

function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90); var taxi2 = new TaxiRenault(2, 6, 350, 80);
var taxi3 = new TaxiRenault(1, 5, 340, 110);
alert ('El fabricante del taxi 2 es ' + taxi2.fabricante + ' y la velocidad del taxi 2 es ' + taxi2.velocidad);
taxi2.variarVelocidad(-10); alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

Las propiedades y mtodos de un prototipo a veces se dice que son propiedades y mtodos de clase o
estticas tratando de buscar analogas con otros lenguajes.

aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

Alternativa 3: definir un objeto y asignarle contenido a su propiedad prototype creando un objeto

nico con la sintaxis de literal (propiedades enumeradas con dos puntos y separadas por comas):

function nombreObjeto (par1, par2, , parN) {

this.propiedad1 = valorPropiedad1; this.propiedad2 = valorPropiedad2;
}
nombreObjeto.prototype = {
propiedadComn1: valorPropiedadComn1;
propiedadComn2: valorPropiedadComn2;

mtodoComn1: function (par1, par2, , parN) { },
mtodoComn2: function (par1, par2, , parN) { },

}

Escribe este cdigo y comprueba los resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function TaxiRenault (tipoMotor, numeroPasajeros, carga, velocidad) {

this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros;
this.carga = carga; this.velocidad = velocidad;
}

TaxiRenault.prototype = {
fabricante: 'Renault, S.A.',
direccionFabricante: 'c/R, Paris',
getCapacidad: function () { if (tipoMotor == 'Diesel') { return 40;} else {return 35;} },
variarCarga: function (variacion) { this.carga = this.carga + variacion; },
variarVelocidad: function (variacion) { this.velocidad = this.velocidad + variacion; }
}

function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90); var taxi2 = new TaxiRenault(2, 6, 350, 80);
var taxi3 = new TaxiRenault(1, 5, 340, 110);
alert ('El fabricante del taxi 2 es ' + taxi2.fabricante + ' y la velocidad del taxi 2 es ' + taxi2.velocidad);
taxi2.variarVelocidad(-10);
alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).

Podramos especificar varias formas ms de definir el prototipo de un objeto, pero con lo visto hasta
ahora podemos seguir avanzando.

EJERCICIO

Define un tipo de objeto Cometa cuyas propiedades de instancia (especficas de cada objeto) sean
diametro, temperatura y nombre. La temperatura ser un valor numrico que suponemos est en
grados centgrados. Como propiedad comn a todos los objetos de tipo cometa define
definicionSegunDiccionario (que debe contener la definicin de cometa segn el diccionario) y como
mtodos comunes obtenerRadio (que debe devolver el radio) y obtenerTemperaturaFarenheit (que
debe devolver el valor de temperatura expresado en grados Farenheit). Crea tres objetos de tipo
cometa y comprueba que puedes acceder tanto a las propiedades especficas como a las propiedades
comunes y mtodos comunes desde cada objeto.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01148E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Propiedade
es y mtodos esstticos JavaScript.

STATIC JA
AVASCRIPT

A diferencia de otross lenguajes, JavaScript no n utiliza la palabra claave static paara definir variables
v o
mtodos estticos, aunque
a s provee
p de laa posibilidadd de definirr propiedades y mtod dos nicos
es y mtodos estticos.
asociadoss a un tipo deefinido equivvalentes a lass propiedade

Recordar que si escriibimos una definicin

d de tipo de ob bjeto basadaa en function y dentro de ella un
mtodo o propiedad antecedida
a d la palabraa clave this, cada
de c vez quee se crea unaa instancia con new se
generan copias
c de lass propiedadees y mtodoss, cosa que ya y hemos vissto que pued de resultar inneficiente.
Hemos visto como altternativa, deefinir propieedades y mtodos en el prototipo que son heredados por
todas las instancias de ese tipoo de objeto. De este modo,m todos los objetoss tienen acceso a esa
propiedadd o mtodo por herenciaa prototpicaa: cuando se invoca la propiedad o m mtodo sobre e el objeto
y no se en e el objeto prototipo (el padre del objeto).
ncuentra, se procede a laa bsqueda en

La ventajaa de usar pro

ototype es que estos pro
opiedades y mtodos
m slo
o existen unaa vez en mem
moria y no
generan duplicados
d p
para cada objeto,
o y as es ms eficiente el c
digo. Adem ms, las proppiedades y
mtodos pueden tran nsmitirse a lo
l largo de una
u cadena de herenciaa y ser accessibles desde e cualquier
objeto.

SIMULAR PROPIEDAD
DES Y MTOD
DOS ESTTIC
COS

Tenemos an otra manera

m de generar pro opiedades y mtodos: declararlos como prop piedades y
mtodos asociados al objeto que define el tip po (lo que llamaramos lla clase), dee modo que slo sern
accesibless invocando al nombre deld tipo de objeto,
o pero no a travs de las instan ncias. Esto se asemeja
mucho a lo que en otros
o lenguaajes se deno omina propiedades y mtodos
m estticos, de ahh que por
analoga muchas
m vecees se aluda a este tipo dee propiedade es y mtodoss como estticos.

Para defin mulan ser esstticos podeemos hacerllo fuera de la funcin

nir mtodoss y propiedaades que sim
constructora con estaa sintaxis:

functtion nombreeObjeto (par1

1, par2, , paarN) {
this.propied
dad1 = valorPropiedad1;
dad2 = valorPropiedad2;
this.propied
}
nombreObjeto.n
nombrePropiedadEstticaa1 = valorPro
opiedadEstttica1;
nombreObjeto.n
nombrePropiedadEstticaa1 = valorPro
opiedadEstttica2;

nombreObjetto.mtodoEssttico1 = fun
nction (par1,, par2, ) { }
nombreObjetto.mtodoEssttico2 = fun
nction (par1,, par2, ) { }

aprenderraprogramar.co
om, 2006-2029
Propiedades y mtodos estticos JavaScript.

Tambin es sintcticamente posible incluir la propiedad o mtodo esttico dentro de la funcin

constructora con esta sintaxis, que es anloga a la anterior con la diferencia de que la declaracin se
realiza dentro de la funcin:

function nombreObjeto (par1, par2, , parN) {

this.propiedad1 = valorPropiedad1;
this.propiedad2 = valorPropiedad2;

nombreObjeto.nombrePropiedadEsttica1 = valorPropiedadEsttica1;
nombreObjeto.nombrePropiedadEsttica1 = valorPropiedadEsttica2;

nombreObjeto.mtodoEsttico1 = function (par1, par2, ) { }
nombreObjeto.mtodoEsttico2 = function (par1, par2, ) { }

}

Una propiedad o mtodo esttico no se duplica en cada objeto, sino que existe una nica vez en
memoria.

Escribe este cdigo y comprueba sus resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function Taxi (tipoMotor, numeroPasajeros, carga, velocidad) {

if (Taxi.numeroObjetos) {Taxi.numeroObjetos++;}
else {Taxi.numeroObjetos = 1; }
this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros;
this.carga = carga; this.velocidad = velocidad;
alert('Creado objeto nmero '+Taxi.numeroObjetos);
}

function ejemploObjetos() {
var taxi1 = new Taxi(1, 4, 300, 90);
var taxi2 = new Taxi(2, 5, 250, 100);
var taxi3 = new Taxi(1, 6, 400, 80);
alert('El nmero de objetos Taxi creados hasta el momento es ' + Taxi.numeroObjetos);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Propiedades y mtodos estticos JavaScript.

La expresin << if (Taxi.numeroObjetos) >> devuelve true si numeroObjetos es una propiedad existente
de Taxi y false en caso contrario. Si la propiedad esttica no existe cuando se invoca la creacin de un
objeto con new, se crea con la sentencia Taxi.numeroObjetos = 1;

El resultado esperado es:

Creado objeto nmero 1, Creado objeto nmero 2, Creado objeto nmero 3. El nmero de objetos Taxi
creados hasta el momento es 3.

Si volvemos a ejecutar el script el contador se sigue incrementando (4, 5, 6, si volvemos a ejecutar 7, 8,

9, etc.), excepto si volvemos a recargar la pgina web en nuestro navegador. Cuando tiene lugar una
recarga, todo se inicializa, con lo cual volveramos a empezar la cuenta del nmero de objetos por 1.

A continuacin un ejemplo de declaracin de una propiedad y mtodo esttico fuera de la funcin

constructora. Escribe este cdigo y comprueba sus resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function TaxiRenault (tipoMotor, numeroPasajeros, carga, velocidad) {

this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros;
this.carga = carga; this.velocidad = velocidad;
}

TaxiRenault.fabricante = 'Renault, S.A.'; //Propiedad esttica

TaxiRenault.mostrarMensaje = function () {alert('Soy un taxi Renault');} //Mtodo esttico

function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90);
alert ('La velocidad del taxi 1 es ' + taxi1.velocidad);
TaxiRenault.mostrarMensaje(); //Invocamos el nombre del tipo de objeto
alert ('La propiedad esttica fabricante vale ' + TaxiRenault.fabricante);
alert ('Si intentamos obtener la propiedad fabricante para una instancia obtenemos: ' + taxi1.fabricante); //undefined
taxi1.mostrarMensaje(); //ERROR las instancias no tienen acceso a los mtodos estticos
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

El resultado de ejecucin esperado es:

La velocidad del taxi 1 es 90
Soy un taxi Renault
La propiedad esttica fabricante vale Renault, S.A.
Si intentamos obtener la propiedad fabricante para una instancia obtenemos: undefined
(error, taxi1.mostrarMensaje(); no se ejecuta).

aprenderaprogramar.com, 2006-2029
Propiedades y mtodos estticos JavaScript.

De este ejemplo obtenemos la siguiente conclusin:

No se puede acceder a una propiedad o mtodo esttico desde una instancia, hay que hacerlo
invocando directamente sobre el nombre del objeto que define el tipo (lo que llamaramos sobre la
clase).

Modifica el cdigo anterior y escribe:

TaxiRenault.mostrarMensaje = function () {alert('Soy un taxi Renault con carga ' + this.carga);}

El resultado ser Soy un taxi Renault con carga undefined Por qu? Porque this hace referencia al
objeto dentro del cual se encuentra la invocacin y en este caso estamos trabajando con un mtodo
esttico que no conoce las propiedades de un objeto en particular.

EJERCICIO

Define un tipo de objeto Meteorito cuyas propiedades de instancia (especficas de cada objeto) sean
diametro, temperatura y nombre. La temperatura ser un valor numrico que suponemos est en
grados centgrados. Como propiedad esttica del tipo meteorito define definicionSegunDiccionario (que
debe contener la definicin de meteorito) y como mtodos estticos obtenerRadio (que debe devolver
el radio a partir de un parmetro diametro) y obtenerTemperaturaFarenheit (que debe devolver el
valor de temperatura expresado en grados Farenheit a partir de un parmetro temperatura). Crea un
objeto de tipo Meteorito con un dimetro, temperatura y nombre y comprueba que puedes acceder a
las propiedades y mtodos estticos mostrando por pantalla la definicin de meteorito, la superficie del
objeto creado y la temperatura Farenheit del objeto creado.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01149E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia po
or prototipos.

HERENCIA A Y OBJETO PROTOTYPE

P
JavaScriptt carece de clases
c como existen en otros lenguaje
es, por tanto
o no existe laa herencia co
omo existe
en otros lenguajes.
l oloquialmente nos referimos en ocasiones a claases entre ccomillas, perro hay que
Co
recordar que
q en JavaSScript prcticcamente todo con lo quee se trabaja son
s objetos (instancias) y por tanto
no es posible diferencciar entre claases e instancias.

No se pueede crear por tanto una jerarqua

j o se hace en otros lenguajes, aunque
de clases como e se puede
crear una simulacin basada en prrototipos.

Todo objeeto tiene unna propiedad

d oculta den nominada prototype quee es un objeeto de refere encia. Este
objeto dee referencia acta
a como si fuera la cclase padre donde el ob
bjeto consultta atributos y mtodos
en caso de que no los encuentre definidos
d commo atributoss y mtodos propios de ss mismo.

Ejemplo:

function Taxi
T (tipoMotor, numeroPasajjeros, carga, veelocidad) {
this.tipoM
Motor = tipoMo otor; this.numeeroPasajeros = numeroPasajer
n os;
this.cargaa = carga; this.vvelocidad = velo
ocidad;
}

Taxi.protootype = { ruedaas: 4, saludar: fu

unction() {
alert('Holla soy un taxi de ' + this.ruedas + ' ruedas y ' +this.numeroPa
+ asajeros +' pasaajeros');} }

function ejemploObjeto
e os() {
var taxi1 = new Taxi(1, 6,
6 300, 90);
taxi1.salu
udar();
}

En este ejemplo,
e se define la cclase Taxi y se dota dee contenido al objeto p prototype assignndole
propiedaddes y mtodos. Se crea un objeto taaxi1 y se invooca su mto odo saludar()). En primer lugar este
mtodo ses busca deentro de los mtodos de d la clase y al no en ncontrarse sse busca en el objeto
prototypee, donde s se encuentrra y se devu uelve. Al eje
ecutar el mtodo saludaar() se encu uentra una
invocacin a this.rued
das. Esta pro
opiedad se buusca primeroo en la clasee y al no en
ncontrarse see busca en
el prototipo. Lo mismo ocurre conn numeroPassajeros, aunq que en este caso
c s se encuentra.

El objeto prototype existe como o objeto vacco desde que se crea una instancia. Por qu ? Porque
JavaScriptt lo crea en segundo plaano, como si incluyram
mos dentro del cdigo dee la clase la sentencia:
prototypee = {};

Por ello podemos

p accceder al obbjeto y asign
narle propied
dades y fun
nciones y po
or ello este cdigo de
ejemplo es
e equivalentte al anterior:

aprenderraprogramar.co
om, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.

function Taxi (tipoMotor, numeroPasajeros, carga, velocidad) {

this.tipoMotor = tipoMotor; this.numeroPasajeros = numeroPasajeros;
this.carga = carga; this.velocidad = velocidad;
}

Taxi.prototype.ruedas = 4;
Taxi.prototype.saludar = function() {
alert('Hola soy un taxi de ' + this.ruedas + ' ruedas y ' +this.numeroPasajeros +' pasajeros');}

function ejemploObjetos() {
var taxi1 = new Taxi(1, 6, 300, 90);
taxi1.saludar();
}

Podemos hacer una simulacin de jerarqua de clases basndonos en los objetos prototipo. Para ello
hemos de crear prototipos en cadena. Veamos un cdigo de ejemplo bsico:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function Persona () { this.nombre = 'Nombre desconocido';
this.saludar = function () {alert('Hola, soy ' + this.nombre);}
}
Persona.prototype.definicion = 'Ser humano';
function Profesor () { this.institucionAcademica = 'Institucin desconocida'; }
Profesor.prototype = new Persona();
function ProfesorInterino() { this.mesesContrato = 0;}
ProfesorInterino.prototype = new Profesor();
function ProfesorTitular() { this.aosTrabajados = 0;}
ProfesorTitular.prototype = new Profesor();
function ejemploObjetos() {
var unProfesorTitular = new ProfesorTitular();
alert ('El nombre de unProfesorTitular es ' + unProfesorTitular.nombre);
unProfesorTitular.saludar();
unProfesorTitular.nombre = 'Juan';
unProfesorTitular.institucionAcademica = 'Universidad de Chapingo';
unProfesorTitular.aosTrabajados = 14;
var msg = 'El profesor titular creado tiene nombre ' + unProfesorTitular.nombre + ', trabaja en '
msg = msg + unProfesorTitular.institucionAcademica + ', tiene ' + unProfesorTitular.aosTrabajados + ' aos trabajados';
msg = msg + ' y definicin de ' + unProfesorTitular.definicion;
alert(msg);
unProfesorTitular.saludar();
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

El cdigo anterior se corresponde con este esquema de herencia, donde podemos observar que hay
objetos Profesor duplicados Por qu? Lo explicamos a continuacin.

aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.

Nota: en gris sealamos propiedades o mtodos accesibles a travs del prototipo. Dichas propiedades o
mtodos no se encuentran en los objetos en s, pero son accesibles.

Persona.prototype

definicion

HERENCIA

Hereda de...
POR PROTOTIPOS
JAVASCRIPT
Persona
definicion
nombre

saludar
de...

He
r ed
Hereda

ad
e ..
.

Profesor Profesor

definicion definicion
nombre nombre
institucionAcademica institucionAcademica
saludar saludar
e...

Hereda
Hereda d

de...

ProfesorInterino ProfesorTitular
definicion definicion
nombre nombre
institucionAcademica institucionAcademica
mesesContrato aosTrabajados

saludar saludar
aprenderaprogramar.com

El resultado de ejecucin esperado para el cdigo es:

El nombre de unProfesorTitular es Nombre desconocido
Hola, soy Nombre desconocido
El profesor titular creado tiene nombre Juan, trabaja en Universidad de Chapingo, tiene 14 aos
trabajados y definicin de Ser humano
Hola, soy Juan

aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.

Analicemos el cdigo paso a paso:

Se define profesorTitular de modo que toda instancia de profesorTitular se inicializar con la propiedad
aosTrabajados = 0

Se define que el objeto prototipo de ProfesorTitular es un objeto Profesor.

Se define ProfesorInterino de modo que toda instancia de profesorInterino se inicializar con la

propiedad mesesContrato = 0;

Se define que el objeto prototipo de ProfesorInterino es un objeto Profesor.

Se define Profesor de modo que toda instancia de Profesor se inicializar con la propiedad
institucionAcademica = 'Institucin desconocida';

Se define que el prototipo de Profesor es un objeto Persona.

Por ltimo se define Persona de modo que toda instancia de Persona se inicializar con la propiedad
nombre = 'Nombre desconocido'; y se define que el objeto prototipo de Persona (de tipo Object) tiene
la propiedad << definicion = 'Ser humano'; >>

En el cdigo de ejecucin comenzamos por crear un objeto de tipo profesorTitular al que denominamos
unProfesorTitular. Al invocar la propiedad nombre y el mtodo saludar del objeto profesorTitular el
intrprete JavaScript busca estas propiedades y mtodos en el propio objeto, pero no los encuentra, ya
que la nica propiedad en el objeto es aosTrabajados. Al no encontrarlas, pasa a buscar las
propiedades y mtodos en el objeto prototipo (que es un objeto Profesor), pero en este objeto
tampoco las encuentra. Finalmente, busca en el prototipo del objeto Profesor que es un objeto
Persona. Como todo objeto Persona tiene inicialmente la propiedad nombre = 'Nombre desconocido' y
dispone del mtodo saludar, son stos los que se devuelven. El resultado es que se muestra por
pantalla <<El nombre de unProfesorTitular es Nombre desconocido. Hola, soy Nombre desconocido >>

Seguidamente se establecen valores para las propiedades nombre, institucionAcademica y

aosTrabajados de unProfesorTitular y se muestra por pantalla un mensaje donde adems de estas
propiedades se muestra cmo unProfesorTitular dispone de la propiedad <<definicion>> que se obtiene
recorriendo la cadena de prototipos.

PENSAR EN OBJETOS Y NO EN CLASES

Muchas personas (normalmente los programadores que provienen de Java) pueden pensar que sera
ms correcto un esquema donde ProfesorInterino y ProfesorTitular dependan de un nico Profesor.

Esto podra simularse haciendo que ProfesorInterino y ProfesorTitular compartan un mismo prototipo y
esto podra lograrse con un cdigo como este:

function Profesor () { this.institucionAcademica = 'Institucin desconocida'; }

Profesor.prototype = new Persona();

function ProfesorInterino() { this.mesesContrato = 0;}

ProfesorInterino.prototype = ProfesorTitular.prototype;

aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.

El esquema sera este:

Esta concepcin tiene un inconveniente importante. Dado que las propiedades y mtodos comunes
(de clase) en JavaScript se establecen a travs del prototipo, usar un mismo objeto como prototipo
para los profesores interinos y los profesores titulares nos impedira diferenciar propiedades comunes
exclusivas de los profesores interinos y propiedades comunes exclusivas de los profesores titulares. Si el
prototipo es un mismo objeto, las propiedades comunes lo seran tanto para profesores interinos como
para profesores titulares.

A modo de conclusin: cuando trabajes con JavaScript no pienses en clases, piensa en objetos.

aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.

CONSTRUCTORES CON HERENCIA

En el cdigo de ejemplo visto anteriormente trabajamos con objetos que no reciben parmetros para
su constructor, sino que inicializan sus propiedades a unos valores de defecto. Cmo implementar
herencia de modo que se pueda inicializar un objeto con unos valores concretos? Lo veremos en la
prxima entrega.

EJERCICIO

Crea un esquema de herencia en JavaScript que refleje estos requisitos:

a) Hay tres tipos de hortalizas: zanahoria, lechuga y tomate. La zanahoria tiene como propiedad su valor
calrico que es de 45 cal, mientras que la lechuga tiene 31 cal y el tomate 39 cal.

b) Toda hortaliza tiene como propiedad especfica tipoHortaliza y su valor inicial debe ser indefinido.

c) Todas las hortalizas tienen una propiedad comn: su componente principal: <<Agua>>

c) Una hortaliza es un tipo de planta cultivada. Una planta cultivada tiene como propiedad especfica
nombreCientifico y su valor inicial debe ser desconocido.

d) Una planta cultivada es un tipo de vegetal. Una propiedad de los vegetales es la movilidad y su valor
es comn para todos los vegetales: <<Ser vivo sin movilidad>>

Escribir el cdigo correspondiente. Haciendo uso de la herencia por prototipos, crear un objeto de tipo
tomate al que se denomine tomate1 y hacer que se muestre por pantalla <<tomate1 tiene la propiedad
movilidad: Ser vivo sin movilidad>>.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01150E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Con
nstructores con
n herencia en cadena.
c

CADENASS DE HERENC
CIA JAVASCR
RIPT
JavaScriptt permite la herencia a trravs de prototipos, pero
o todava no hemos visto
o cmo pode emos crear
un objetoo de un subttipo que pueeda ser instaanciado paraa que se inicialice portan
ndo informacin tanto
del subtip
po como del supertipo. Antes
A de abordar esta cueestin estudiaremos las ffunciones caall y apply.

CALL JAVA
ASCRIPT
La funcin call permite llamar a cualquier fu uncin JavaScript indicnndole el objeeto que actu
uar como
this dentrro de la funciin llamada, as como loss parmetros adicionaless que sean necesarios.

La sintaxiss ms bsica es la siguien

nte:

nction unaFuncion (par1, par2, , parrN) {

fun
// cdigo
}
unaaFuncion.calll (objetoQueeActuarCom
moThis, par1
1, par2, parrN);

Veamos un
u ejemplo bsico
b para comprender
c lo que signiffica y permitte esta funcin. Escribe el
e cdigo y
comprueb
ba el resultad
do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<script tyype="text/javasscript">
function Profesor (nomb bre) { this.nomb bre = nombre || 'Nombre dessconocido'; this.salarioBase = 1
1200; }
function saludar()
s { alertt ('Hola, soy ' + this.nombre); }
function ejemploObjeto
e os() {
var unPro ofesor = new Prrofesor('Carlos');
saludar();;
saludar.call(unProfesor));
unProfesor.saludar(); //ERROR - NO PEERMITIDO
}
</script>
</head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

El resultado de ejecuucin esperado es: Hola,, soy undefin

ned. >>> Ho
ola, soy Carlo
os. >>> (Y un error: la
lnea unPrrofesor.salud
dar() no se ejecuta).
Analicemo
os paso a paso lo que hace el cdigo:

aprenderraprogramar.co
om, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

Se define el tipo de objeto Profesor con los atributos nombre y salarioBase. Se define la funcin
saludar() que carece de propiedades y que cuando se invoca muestra por pantalla un mensaje.
Se crea un objeto de tipo Profesor cuya propiedad nombre vale Carlos.
Se llama a la funcin saludar() y como resultado se obtiene Hola, soy undefined. Por qu? Porque el
objeto this en este caso es la propia funcin saludar y dicha funcin no tiene definido atributo nombre,
por tanto al tratar de mostrar this.nombre muestra undefined.
A continuacin se llama a la funcin saludar indicando que el objeto unProfesor actuar como objeto
this para la ejecucin de la funcin. Como consecuencia, this.nombre vale Carlos y se muestra por
pantalla el mensaje Hola, soy Carlos.
El quid de la cuestin est en que cualquier funcin puede invocarse como mtodo de cualquier objeto
a travs del mtodo predefinido JavaScript call. En el ejemplo que hemos usado podemos destacar
algunas cuestiones:
a) saludar() es lo mismo que saludar.call(). Al indicar saludar.call() y no pasar como parmetro ningn
objeto, es la propia funcin saludar quien acta como this.
b) La funcin saludar podra ser usada por diversos tipos de objetos que tuvieran un atributo name. La
funcin actuara as como mtodo compartido por numerosos tipos de objetos, pudiendo estar fuera de
la definicin de los mismos y fuera de la cadena de herencia de los mismos.

Veamos ahora la sintaxis usando parmetros. Escribe este cdigo y comprueba el resultado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function Profesor (nombre) { this.nombre = nombre || 'Nombre desconocido'; this.salarioBase = 1200; }
function saludar(nombrePersona, modoSaludo) {
alert ('Hola, soy ' + this.nombre + ' y saludo a ' +nombrePersona+ ' con ' + modoSaludo); }
function ejemploObjetos() {
var unProfesor = new Profesor('Carlos');
saludar.call();
saludar.call(unProfesor, 'Ernesto', 'afecto');
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

El resultado esperado es: Hola, soy undefined y saludo a undefined con undefined. >>> Hola, soy Carlos
y saludo a Ernesto con afecto.
En la invocacin saludar.call(unProfesor, 'Ernesto', 'afecto'); el parmetro unProfesor indica quin va a
actuar como objeto this en la ejecucin de la funcin saludar, mientras que 'Ernesto' y 'afecto' son los
parmetros que se le pasan a la funcin.

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

APPLY JAVASCRIPT
La funcin apply permite llamar a cualquier funcin JavaScript indicndole el objeto que actuar como
this dentro de la funcin llamada, de la misma forma que con la funcin call. La diferencia de apply con
call est en que los parmetros se pasan con un array en vez de separados por comas. De este modo
apply consta exactamente de dos parmetros: el objeto que actuar como this y un array.

La sintaxis ms bsica es la siguiente:

function unaFuncion (par1, par2, , parN) {

// cdigo
}
unaFuncion.apply (objetoQueActuarComoThis, arrayDeElementos);

Donde arrayDeElementos es un array. El array se puede haber declarado previamente, o bien

declararse en el mismo momento de llamada de la funcin escribiendo [elemento1, elemento2, ,
etc.].

Veamos un ejemplo bsico para comprender lo que significa y permite esta funcin. Escribe el cdigo y
comprueba el resultado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function Profesor (nombre) { this.nombre = nombre || 'Nombre desconocido'; this.salarioBase = 1200; }
function saludar(nombrePersona, modoSaludo) {
alert ('Hola, soy ' + this.nombre + ' y saludo a ' +nombrePersona+ ' con ' + modoSaludo); }
function ejemploObjetos() { var unProfesor = new Profesor('Carlos');
saludar.apply();
var unArray = ['Christian', 'odio'];
saludar.apply(unProfesor, ['Ernesto', 'afecto']);
saludar.apply(unProfesor, unArray);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

El resultado de ejecucin esperado es: Hola, soy undefined y saludo a undefined con undefined >>>
Hola, soy Carlos y saludo a Ernesto con afecto >>> Hola, soy Carlos y saludo a Christian con odio.
Call y apply son dos funciones muy similares. Cundo usar una y cundo usar otra? En muchos casos
ser indistinto usar una y otra. Sin embargo apply nos provee de la potencia de los arrays, lo que la hace
interesante cuando por algn motivo necesitemos crear bucles que recorran los parmetros pasados en
el array, o cuando simplemente no se conozca a priori el nmero de parmetros que deben pasarse
porque se establezcan de forma dinmica.

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

CREAR HERENCIA CON JAVASCRIPT

Sabemos cmo hacer para que todos los objetos de un tipo hereden propiedades y mtodos comunes
de su prototipo, pero cmo crear herencia entre dos tipos de objetos?

Partimos de un ejemplo: tenemos como subtipo ProfesorInterino con la propiedad mesesContrato y

como supertipo Profesor con las propiedades institucion y salarioBase como muestra el siguiente
cdigo.

function Profesor (institucion) { this.institucion = institucion || 'Desconocida'; this.salarioBase = 1200; }

function ProfesorInterino(mesesContrato) { this.mesesContrato = mesesContrato || -1;}

Ahora nos planteamos que los Profesores Interinos son un tipo de profesor, y por tanto al crear un
profesor interino queremos inicializarlo de modo que disponga de las propiedades y mtodos de
Profesor. Al crear un profesor interino queremos poder especificar el atributo institucion o, si no lo
especificamos, poder acceder a la propiedad institucion obteniendo como valor Desconocida Cmo
hacerlo?

Una primera aproximacin puede ser esta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function Profesor (institucion) {

this.institucion = institucion || 'Desconocida';
this.salarioBase = 1200;
}

function ProfesorInterino(mesesContrato, institucion) {

Profesor.call(this, institucion);
this.mesesContrato = mesesContrato || -1;}

function ejemploObjetos() {
var unProfesorInterino = new ProfesorInterino(4, 'Universidad de Chapingo');
var msg = 'El objeto unProfesorInterino tiene ' + unProfesorInterino.mesesContrato + ' meses de contrato';
msg = msg + ' y pertenece a la institucin '+unProfesorInterino.institucion;
alert(msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

El resultado de ejecucin esperado es: El objeto unProfesorInterino tiene 4 meses de contrato y

pertenece a la institucin Universidad de Chapingo

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

Analicemos lo que ocurre. Hemos modificado la funcin ProfesorInterino para que adems de las
propiedades intrnsecas (mesesContrato) pueda recibir la institucin, propiedad de los objetos tipo
Profesor.

Con la invocacin Profesor.call(this, institucion); estamos haciendo que se ejecute la funcin Profesor
pasndole como this el objeto ProfesorInterino y como parmetros la institucin. Al ejecutarse la
funcin Profesor, el objeto ProfesorInterino pasa a tener todos los atributos y mtodos de un Profesor
ya que se ejecuta this.institucion = institucion || 'Desconocida'; y this.salarioBase = 1200.

De este modo, el objeto ProfesorInterino dispone de las propiedades y mtodos propios de los objetos
Profesor.
Pero, realmente se comporta el objeto unProfesorInterino como los objetos de tipo Profesor? La
respuesta es que no: a travs de la llamada call hemos logrado que las propiedades y mtodos
declarados con this para Profesor estn disponibles para el profesor interino, pero qu ocurre con las
propiedades y mtodos comunes de los objetos Profesor, es decir, aquellas propiedades y mtodos que
hayamos especificado en el prototipo de Profesor. Lo que ocurre es que no estn disponibles para
unProfesorInterino. Comprobmoslo. Escribe este cdigo y comprueba los resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function Profesor (institucion) { this.institucion = institucion || 'Desconocida';

this.salarioBase = 1200; }
Profesor.prototype.saludar = function() {alert('Hola trabajo en '+ this.institucion + ' y mi salario base es
'+this.salarioBase);}

function ProfesorInterino(mesesContrato, institucion) { Profesor.call(this, institucion);

this.mesesContrato = mesesContrato || -1;}

function ejemploObjetos() {
var unProfesor = new Profesor(); unProfesor.saludar();
var unProfesorInterino = new ProfesorInterino(4, 'Universidad de Chapingo');
var msg = 'El objeto unProfesorInterino tiene ' + unProfesorInterino.mesesContrato + ' meses de contrato';
msg = msg + ' y pertenece a la institucin '+unProfesorInterino.institucion;
alert(msg);
unProfesorInterino.saludar();
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>

El resultado esperado es: Hola trabajo en Desconocida y mi salario base es 1200 >> El objeto
unProfesorInterino tiene 4 meses de contrato y pertenece a la institucin Universidad de Chapingo >>
error (la lnea unProfesorInterino.saludar(); no se ejecuta).
Lo que comprobamos es que los objetos de tipo Profesor conocen el mtodo saludar (que es un
mtodo comn a todos los objetos de tipo Profesor definido a travs de su prototipo), pero sin

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

embargo los objetos de tipo ProfesorInterino no conocen el mtodo saludar, lo que demuestra que no
es estn comportando realmente como Profesor.
Para que los objetos de tipo ProfesorInterino dispongan de todo lo que dispone Profesor nos falta hacer
que el prototipo de todo objeto ProfesorInterino sea un objeto Profesor. De este modo, cuando se
busque el mtodo saludar se buscar en primer lugar como mtodo intrnseco de ProfesorInterino, al
no encontrarse se buscar en el prototipo, que al ser un objeto Profesor s podr responder cuando se
invoque el mtodo saludar.
Para ello aadiremos la lnea: ProfesorInterino.prototype = new Profesor();
Con esta lnea ya los objetos de tipo ProfesorInterino conocen las propiedades y mtodos comunes de
Profesor.
Con esta lnea ya se ejecuta la invocacin unProfesorInterino.saludar() dando como resultado que se
muestre por pantalla <<Hola trabajo en Universidad de Chapingo y mi salario base es 1200>>.
En resumen, para implementar una herencia completa y poder crear instancias pasando parmetros
para generar objetos que hereden propiedades y mtodos de un supertipo usaremos la invocacin call
al supertipo y adems estableceremos que el prototipo es un objeto del supertipo.

CONSTRUCTORES CON HERENCIA

Con las herramientas que conocemos ya somos capaces de implementar cadenas de herencia con
constructores que reciban parmetros de los supertipos. Supongamos que tenemos 4 clases en cadena
y cada clase tiene una propiedad intrnseca. En la generacin de un objeto del tipo inferior con
herencia, tendramos que pasarle 4 parmetros e invocar con 3 parmetros a su ascendiente. Luego el
ascendiente ser invocado con 2 parmetros y finalmente habr una invocacin con un parmetro.
A su vez, estableceremos como prototype de cada tipo de objeto a una instancia de su ascendiente.

ALTERNATIVA AL USO DE CALL

Podemos obtener los mismos efectos que con call usando esta construccin:

function unaFuncion (par1, par2, , parN) {

this.fun = Superclase;
this.fun (param1, param2, , paramN);
}

Es decir, el cdigo <<A>>: Profesor.call(this, institucion);

Da lugar al mismo efecto que el cdigo <<B>>: this.fun = Profesor; this.fun(institucion);

En el primer caso (A) se ejecuta la funcin Profesor pasando como objeto this al objeto que lo llama y
esto da lugar a que el objeto incorpore las propiedades y mtodos del objeto llamado.

En el segundo caso (B) se define Profesor como un mtodo propio del objeto y a continuacin con la
invocacin this.prop(instituticion) se ejecuta dicho mtodo.

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

En principio call o apply resultan ms eficientes, ya que nos ahorramos crear el mtodo prop para
posteriormente ejecutarlo, pero a efectos prcticos suele resultar indistinto y este tipo de invocaciones
es frecuente encontrarlo cuando se revisa cdigo JavaScript.

RESUMEN
La herencia en JavaScript no funciona como en otros lenguajes y en cierta medida ms que de herencia
propiamente dicha podramos hablar de simulacin de herencia. El siguiente cuadro resume las vas
principales para generar herencia en JavaScript:

GENERADOR DE HERENCIA DESCRIPCIN APRENDERAPROGRAMAR.COM

prototype.nombrePropiedadOMetodo Define propiedades y mtodos comunes que son

compartidos por un tipo de objetos.

subtipo.prototype = new supertipo() Crea herencia del supertipo pero no permite especificar los
parmetros para los constructores de los supertipos.

nombreFuncion.call(objetoThis, par1, par2, ) Crea herencia de propiedades y mtodos declarados con this
dentro de una funcin declarativa de tipo. en los supertipos y permite inicializar objetos pasando
parmetros para los subtipos y los supertipos, pero no da
lugar a que se conozcan las propiedades y mtodos
compartidos del supertipo.

subtipo.prototype = new supertipo() + Permite simular una herencia completa y la instanciacin de

nombreFuncion.call(objetoThis, par1, par2, ) un objeto con todos los parmetros propios y de supertipos.
dentro de una funcin declarativa de tipo

EJERCICIO 1

Crea un esquema de herencia que cumpla con estos requisitos:

a) Un Mdico especialista tiene una especialidad y es un tipo de Mdico.

b) Un Mdico trabaja en un centro de trabajo y es un tipo de Persona.

c) Una Persona tiene un nombre y una nacionalidad. Como mtodo comn a todas las personas
tenemos mostrarNacionalidad, que muestra un mensaje informando de la nacionalidad.

Se desea crear un objeto de tipo MedicoEspecialista pasndole como parmetros para su creacin
adems de sus propiedades intrnsecas las propiedades que hereda de sus supertipos y sobre este
objeto invocar el mtodo mostrarNacionalidad(), que deber ser reconocido por herencia.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.

EJERCICIO 2

Crea un cdigo que represente el siguiente esquema de herencia permitiendo instanciar los subtipos
pasndole los parmetros necesarios para inicializar las propiedades de los supertipos. Crea un objeto
ProfesorTitular profesorTitular1 al que le pases como parmetros 8 (aos trabajados), Universidad de
Len (institucin acadmica), Juan (nombre), e invoca el mtodo saludar sobre este objeto.

He
red
ad
e..
.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01151E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Depurar JavvaScript. Debuggging de errore
es con Firefox, Chrome,
C etc.

DEPURAR
R JAVASCRIPT
Si vienes siguiendo el curso de JavaScript y has ido realizando los ejercicios
e con seguridad te habrs
enfrentaddo a problem mas a la hora de ejecutaar los scriptss relacionadoos con errorres en el cd
digo. Estos
errores pueden dar lu ugar a que no
n se ejecutee lo esperad do, o simplem mente que n no se ejecute
e nada. La
dificultad radica en qu
ue no tenem
mos ningn mensaje
m de avviso del error.

Por tratarrse de un len

nguaje interp
pretado y em
mbebido JavaaScript resultta un lenguajje relativame
ente difcil
de depurrar. No hay un mtodo o nico o preferido por la comuniidad de pro ogramadoress, por ello
hablaremos de alternativas o posiibilidades para depurar JavaScript.

Agruparemos en prrimer lugar las altern nativas en tres grandes grupos que vamos a citar
superficiaalmente paraa luego centrrarnos en una de estas allternativas:

a) Herram mientas de e validacin n del cdigo o (validadores) on-linee o instalad das en un pc. Estas
herramien ntas, en lneas generaless, reciben unn cdigo JavaaScript como devuelven una lista de
o entrada y d
los errorees o problem mas detectado os en el cdiigo. Estos problemas pueeden ser de sintaxis o de
e otro tipo.
Como herramienta
h s on-line podemos citar JSSLint (http p://www.jslint.com/) y JSHint
(http://ww ww.jshint.coom/). Entre laas herramienntas para insstalar en el computador dde desarrollo
o tenemos
Google Closure Linter L (https://developpers.google.ccom/closuree/utilities/) y JavaScript Lint
(http://ww ww.javascrip ptlint.com/).

b) IDEs para
p desarroollo web. En n general see trata de entornos
e dee desarrollo que provee en algunas
herramienntas o extennsiones capaaces de deteectar erroress en el cdiggo al menos facilitar ayuda
a que
debera dar lugar a qu
ue existan menos
m errorees en el cdigo. Son en general
g herraamientas que proveen
muchas fuuncionalidaddes y por tan
nto ms pesaadas que un simple edito or de texto. Podemos citar dentro
de este grupo
g Eclipse, IDE que permite la instalacin
i de
d plugins entre
e los que cabe desttacar JSDT
(JavaScrip
pt Developeer Tools), Komodo
K IDEE, NetBeans, Microsoft Visual Stu udio con Visual Web
Developer, WebStorm m y Aptana Sttudio.

mientas nativvas o que se integran en los navegad

c) Herram dores web y que
q permiten el anlisis del cdigo
y depuraccin de erro ores. Mozillaa Firefox, ess uno de los navegadorres que ha sido tradicio onalmente
preferido por los pro ogramadores por las heerramientas de anlisis y depuracin que provee y por
atenerse a los estndares. De cara
c a la depuracin de e cdigo JavvaScript disp
pone de herrramientas
nativas (Developer tools,
t propiaa del explo orador) commo la consola y de differentes plu ugins para
desarrollaadores entree los que destaca Firebu ug. El navegaador Chromee de Googlee provee herrramientas
nativas enn lo que se denomina
d Ch
hrome Developer Tools. Internet Exp plorer de Miccrosoft ofrecce tambin
sus Develloper Tools. En la mayor parte de lo os navegadoores se acced
de a las devveloper toolss pulsando
F12.

aprenderraprogramar.co
om, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.

QU ALTERNATIVA ELEGIR?
Dado que existen numerosas alternativas la pregunta que nos planteamos es: qu alternativa elegir?
Para el desarrollo web profesional posiblemente debiramos decantarnos por un IDE y conocer sus
herramientas de depuracin nativas o en forma de extensiones. Pero en este curso, donde nos
centramos en comprender JavaScript y no en la productividad como programadores, vamos a
recomendar que utilices las herramientas de desarrollador (developer tools) de tu navegador web,
principalmente con el fin de tener ayuda a la hora de localizar errores en nuestro cdigo JavaScript. Esta
es una va relativamente cmoda, rpida y sin necesidad de instalacin de software adicional, para
localizar errores en nuestro cdigo.
Qu navegador ofrece mejores posibilidades de cara a la depuracin? Preferimos no opinar al
respecto. Firefox ha tenido siempre muy buena prensa entre los programadores e Internet Explorer al
revs. Pero el mundo del desarrollo de aplicaciones web y apps para smartphones se mueve a gran
velocidad y las opiniones que eran vlidas hace unos aos pueden no serlo en la actualidad.
Te recomendamos que optes por las herramientas de depuracin de tu propio navegador web (el que
vengas utilizando), y si consideras que no te responde adecuadamente, simplemente prueba otro.

UN CDIGO DE EJEMPLO
A modo de ejemplo consideraremos que hemos desarrollado un cdigo JavaScript pero al tratar de
ejecutarlo no hay respuesta alguna. Entendemos (suponemos) que hay un error y queremos que una
herramienta de depuracin nos facilite su localizacin.
El cdigo que usaremos es este:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function saludar() { alert ('Hola, soy ' + this.nombre); }
function ejemploObjetos() {
var unObjeto = new Array();
unObjeto.saludar();
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

CACH DE NAVEGADOR
Un problema que aparece en ocasiones es que el navegador guarda informacin en cach de modo que
no se ejecuta el cdigo que hemos modificado, sino cdigo guardadado en la cach del navegador.
Normalmente este problema se soluciona haciendo una recarga completa pulsando CTRL + F5 (teclas
ctrl y F5 al mismo tiempo).

aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.

DESPLEGAR LA CONSOLA DEL NAVEGADOR

La mayora de los navegadores permiten desplegar una consola o ventana auxiliar en la parte inferior
del navegador, que sirve para fines de desarrollo de cdigo y mostrar mensajes de error. Para activarla
en tu navegador pulsa F12 (esto funciona en la mayor parte de los navegadores modernos, pero puede
no estar disponible en algunos).
Una vez desplegada la consola, carga el archivo html con el cdigo que contiene el error y pulsa en
Probar.

Por consola se muestra un mensaje como: TypeError: unObjeto.saludar is not a function

ejemplo1.html:7
Este mensaje nos indica el tipo de error (se trata de invocar una funcin que no existe) y la lnea donde
se ha detectado el error dentro del archivo (lnea 7).
El mensaje de error puede diferir segn el navegador que estemos utilizando, por ejemplo otro
navegador puede mostrar <<Uncaught TypeError: undefined is not a function ejemplo1.html:7>>
Este sencillo mtodo para detectar y localizar errores te ser muy til para detectar y solucionar errores
cuando ests creando cdigo JavaScript.
Si tu navegador no te permite desplegar consola te recomendamos que lo actualices (puede que sea
demasiado antiguo) o que te cambies de navegador.

CONSOLE.LOG
La consola tiene otra utilidad clave: permite mostrar mensajes informativos introducidos en el cdigo
pero no visibles como contenido de la pgina web.
Para mostrar mensajes a travs de la consola usaremos la sintaxis: console.log(argumento), donde
argumento es aquello que debe ser mostrado por consola (puede ser un texto, una variable, un objeto,
etc.).
Por ejemplo:
var unObjeto = new Array();
console.log(unObjeto);

aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.

Nos devuelve a travs de la consola (que tendremos que haber activado previamente pulsando F12)
Array [ ] y la lnea en que se genera el mensaje.
Console.log tiene un funcionamiento anlogo a alert pero una ventaja importante respecto a esta
funcin: por un lado, si olvidas en el cdigo un console.log las repercusiones sern menores puesto que
no ser visible a menos que se active la consola, y los usuarios no navegan con la consola activada. Por
otro lado, permite mostrar mensajes sin detener la ejecucin del script, lo cual nos ahorra tiempo y
facilita el trabajo.

FIREBUG: EXTENSIN DE FIREFOX

Debido a que es una herramienta con una larga tradicin entre los desarrolladores web, merece la pena
dedicarle unas lneas a la extensin FireBug de Mozilla Firefox.
Firebug es una extensin del navegador Firefox que nos permite editar webs y hojas de estilo,
monitorizar tiempos de carga, depurar javascript y ver los errores y procesos de carga en la pgina
adems de explorar el DOM.
Firebug dispone de su propia consola donde igualmente podemos visualizar los mensajes de error. Si
utilizas Firefox y ests interesado en conocer e instalar esta herramienta te recomendamos que leas el
artculo Firebug, una extensin gratuita de Firefox para programadores y diseadores web en la seccin
de Herramientas Informticas de aprenderaprogramar.com.

RESUMEN

Existen mltiples vas para depurar cdigo JavaScript y puedes optar por aquellas que mejor se adapten
a t. Como alternativa rpida y sencilla, te recomendamos que cuando ests probando cdigo trabajes
con la consola de tu navegador desplegada y que te valgas de console.log para mostrar mensajes que
no detengan la ejecucin de los scripts.

EJERCICIO

Ejecuta este script con la consola de tu navegador activada. Qu mensajes aparecen en la consola
antes y despus de pulsar <<Probar>>? Corrige el error que contiene el cdigo. Qu mensajes
aparecen ahora en la consola? Qu interpretacin podemos darle a los resultados que hemos
obtenido?

aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemploObjetos() {
var unObjeto = new Array();
console.log('unObjeto es' + unObjeto);
console.log(unObjeto);
console.log('this es ' + this);
alert('Hello';
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01152E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Operador co
ondicional tern
nario JavaScriptt. Ventajas e in
nconvenientes.

OPERADO
OR CONDICIO
ONAL TERNA
ARIO
Para escribir condicioonales la esttructura bsiica de lengu
uajes como JavaScript,
J Jaava, PHP y otros
o es la
sentencia if. Otro tipo
o de condicioonales comoo el switch o el else if pueeden ser reeemplazados por if. Hay
otra sintaaxis de conddicional quee se denomiina operado or condicional ternario y que se esscribe con
nes que incluyen una inteerrogacin y dos puntos como: a ? b : c;
expresion

La sintaxiis y significaado del opeerador condicional ternaario (vlida para difereentes lenguaajes, como
JavaScriptt, Java, PHP, etc.) es la sigguiente:

expresin ooleano ? expresin1 : exxpresin2;

nConValorBo

Inteerpretacin: si la expresi
nConValorB Booleano es cierta se ejecuta la expreesin1, y en caso
contrario se ejecuta la expresin2.

Ejemplos.. Supongamo
os que tenem
mos cuatro variables: A = 5, B = 3, C = -7 y D = 5

Expreesin R
Resultado

A==5 ? disparra(): espera(); Se ejecuta disspara()

A<B ? dispara(): espera(); Se ejecuta espera()

B<C ? dispara(): espera(); Se ejecuta espera()

A<B
B && B>C ? disspara(): esperra(); Se ejecuta espera()

A<B &&
& B>C || B==3 ? dispara(): espera();
e Se ejecuta disspara()

A==5 ? A==20: A=1; Si A vala 5 ah

hora vale 20, caso
c contrario
o ahora vale 1.

B = B==3 ? B*10:
B B*100; Se trata de unna asignacin: si B vala 3, aahora B vale 10
1 veces lo
que vala, casso contrario ah
hora B vale 10 00 veces lo quue vala.

El operador ternario puede ser in

nsertado en sentencias de
d ejecucin donde no sse permite laa insercin
de if, porr ejemplo en
n una operaacin de asiggnacin o en
n la variablee de controll de un buclle for. Por

aprenderraprogramar.co
om, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.

ejemplo for (var i = A==5 ? k(): t(); i<8; i++) implica que el bucle comienza con i valiendo lo que retorne
la funcin k() si A vale 5, o lo que retorne la funcin t si A no vale 5.
Usar el operador condicional ternario tiene ventajas e inconvenientes.

VENTAJAS E INCONVENIENTES DEL OPERADOR CONDICIONAL TERNARIO

En la siguiente tabla resumimos las ventajas e inconvenientes del operador condicional ternario
comparndolo con el if tradicional.

Condicional ternario If tradicional

Permite la escritura compacta, permitiendo Obliga a escribir ms sentencias para conseguir el mismo
ahorrar escritura de cdigo. resultado.

Resulta ms difcil de leer, entender y depurar Resulta ms fcil de leer, entender y depurar

No todos los programadores lo usan, algunos ni

Todos los programadores lo usan y lo conocen.
siquiera lo conocen.

No es vlido en ciertas ubicaciones donde slo se admiten

Se admite en la sintaxis de los lenguajes en
expresiones, pero puede hacerse la evaluacin antes del
lugares donde no se admite la sentencia if
punto donde sea necesario el condicional.

Criticado por algunos expertos, adorado por

Uso y aceptacin cuasi-universal
otros

EJEMPLOS DE USO EN JAVASCRIPT

Escribe este cdigo, gurdalo como archivo html y comprueba los resultados de ejecucin. Razona
sobre los resultados obtenidos y trata de explicar paso a paso la lgica de todo lo que hace el cdigo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var A=5; var B=3; C=-7; D=5;
var msg = '';
A==5 ? msg=msg+'A es 5\n': msg=msg+'A no es 5\n';
A<B ? msg=msg+'A es menor que B\n': msg=msg+'B es mayor o igual que A\n';
B<C ? msg=msg+'B es menor que C\n': msg=msg+'C es mayor o igual que B\n';
A<B && B>C ? msg=msg+'Se cumple A<B y B>C\n': msg=msg+'No se cumple A<B y B>C\n';
A<B && B>C || B==3 ? msg=msg+'Se cumple la condicin\n': msg=msg+'No se cumple la condicin\n';
A==5 ? A=20: msg=msg+'A no es 5\n';
msg = msg + 'Si A vala 5 ahora A vale 20, si no sigue valiendo lo que vala\n';
msg = msg + 'Ahora A vale '+A+'\n';

aprenderaprogramar.com, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.

A==5 ? k(): t();

B = B==3 ? B*10: B*100;
msg = msg + 'Despus de ejecutar B = B==3 ? B*10: B*100; resulta que B vale ' + B + '\n';
for (var i = A==5 ? k(): t(); i<8; i++) { msg = msg + 'Bucle: '+i+' \n'; }
alert(msg);
}
function k() {alert('Ha Sido llamada la funcin k'); return 3;}
function t() {alert('Ha Sido llamada la funcin t'); return 5;}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>

El resultado esperado es:

Ha sido llamada la funcin t >> Ha sido llamada la funcin t >>
A es 5
B es mayor o igual que A
C es mayor o igual que B
No se cumple A<B y B>C
Se cumple la condicin
Si A vala 5 ahora A vale 20, si no sigue valiendo lo que vala
Ahora A vale 20
Despus de ejecutar B = B==3 ? B*10: B*100; resulta que B vale 30
Bucle: 5
Bucle: 6
Bucle: 7

EJERCICIO

Ejecuta este script y responde a las siguientes preguntas (algunas de ellas corresponden a cuestiones
que hemos visto a lo largo del curso):

a) Qu significa el operador += que se emplea en el cdigo?

b) Por qu usamos [0] para establecer nodoBody?

c) Qu ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qu ocurre esto.

d) Qu ocurre si escribimos pink cuando nos pide el color? Razona por qu ocurre esto.

e) Modifica el cdigo para que usando el operador ternario, si el usuario no introduce como color red,
yellow o blue aparezca el mensaje No eligi color o el color es no vlido

f) Reescribe el cdigo inicial de partida sustituyendo el condicional ternario por if tradicionales.

aprenderaprogramar.com, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var htmlADevolver = '';
var colorUsuario = prompt('Elija color red, yellow o blue');
htmlADevolver += colorUsuario ? '<h1 style="background-color:'+colorUsuario+
';"> Usted eligi '+colorUsuario+'</h1>' : '<h1>No eligi color</h1>';
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01153E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Funciones predefinidas
p JavaScript para arrays.
a

FUNCIONES PREDEFIN
NIDAS PARA
A ARRAYS (AR
RREGLOS)
JavaScriptt proporcion
na una seriee de funciones predefinidas para el manejo d de arrays. Entre
E ellas
podemos citar concaat, join, splitt, pop, push
h, shift, unsshift, reversee. Vamos a estudiarlas. Recordar
tambin que
q para con nocer el nm
mero de elem mentos en un array bastta con invocaar la propieddad length
del array escribiendo nombreArraay.length

En las sigguientes tabblas se resumen funciones que pueden ser ttiles para trrabajar con arrays en
JavaScriptt. Algunas dee ellas ya fueeron nombradas cuando hablamos dee funciones p
para cadenas de texto,
ya que JavvaScript asemmeja las cadeenas de texto como arrays de caracteres.

Supondreemos que A1, A2, A3, A4 y A5 son arrays JavaScrip

pt.

ADIR ELEMEENTOS O CO
FUNCIONES PARA A ONCATENAR ARRAYS

FUNCI
N UTTILIDAD EJEMPLO
OS aprenderraprogramarr.com

concat(it1,, it2, Devuuelve la conccatenacin dee it1, it2, var

v A3 = A1.co
oncat(5, 9);
, itN) , itN
i con el array sobre ele que se
var
v A4 = A1.co
oncat(A2);
invo itN pueden ser tipos
oca. It1, it2, ,
prim
mitivos u objettos. var
v A5 = A1.co
oncat([-4, 22, 1
11]);

push(x) Aadde x al final del array com

mo nuevo A1.push(55,
A 66
6);
(o nuevos)
n elem
mento, y devvuelve la
//Aade 55 y 66
6 al final
nuevva longitud deel array.

unshift(x) Aadde x al principio del arrray como A1.unshift([77

A , 88, 99]);
nuevvo (o nuevos) elementos.
//Ahora A1 tieene 3 elementtos ms, al principio

splice (in nd, 0, Mod difica el array aadieendo los A1.splice(3,

A 0, 'xxx', 'yyy');
it1, it2, , itN) elem
mentos it1, it2,
i , itN, que son
//Inserta xxx en posicin 3, yyy en po osicin 4 y
insertados en la posiciin ind
desplaza
d a los elementos exxistentes antes.
(dessplazando a lo
os existentes).

splice (ind, Moddifica el array eliminand do cuant ejemplo.splice

e e(3, 2, 'es', 'un
n', 'en');
cuant, it1, it2, elem
mentos e inseertando it1, itt2, , itN,
//Se borran do
os elementos y se insertan tres, con lo
, itN) desd
de el ndice ind.
que
q la longitudd del array es 1 ms de la anterior.

aprenderraprogramar.co
om, 2006-2029
Funciones predefinidas JavaScript para arrays.

FUNCIONES PARA EXTRAER ELEMENTOS O PARTES DE UN ARRAY CON ELIMINACIN

FUNCIN UTILIDAD EJEMPLOS aprenderaprogramar.com

pop() Elimina el ltimo elemento del array y var ultimoElemento = A1.pop();

lo devuelve.
//Ahora A1 tiene 1 elemento menos

shift() Elimina el primer elemento del array y var primerElemento = A1.shift();

lo devuelve.
//Ahora A1 tiene 1 elemento menos

splice (ind, Modifica el array borrando cuant A1.splice(3, 2);

cuant) elementos a partir del ndice ind.

splice (ind, Modifica el array eliminando cuant ejemplo.splice(3, 2, 'es', 'un', 'en');
cuant, it1, it2, elementos e insertando it1, it2, , itN,
//Se borran dos elementos y se insertan tres, con lo
, itN) desde el ndice ind.
que la longitud del array es 1 ms de la anterior.

delete A[ind] Elimina el elemento con ndice ind del delete A[7];
array A. El contenido a[ind] pasa a ser
//Ahora A[7] contiene undefined
undefined.

FUNCIONES PARA EXTRAER PARTES O ELEMENTOS DE UN ARRAY SIN ALTERARLO

FUNCIN UTILIDAD EJEMPLOS aprenderaprogramar.com

slice (firstIn, Devuelve un array con los elementos extrados var result = [1, 2, 3, 4, 5].slice(1,4);
lastOut) entre los ndices firstIn y lastOut-1. Es decir, el
//result contiene [2, 3, 4]
elemento en la posicin firstIn se incluye y el
elemento en la posicin lastOut se excluye.

slice (firstIn) Devuelve un array con los elementos extrados var result = [1, 2, 3, 4, 5].slice(-2)
entre el ndice firstIn y el ltimo elemento. Si
//result contiene [4, 5]
se indica un valor negativo, se extrae un array
con los firstIn ltimos elementos.

FUNCIONES PARA RECUPERAR NDICES DE POSICIONES

FUNCIN UTILIDAD EJEMPLOS aprenderaprogramar.com

indexOf(x) Busca x dentro del array y devuelve la posicin var result = A1.indexOf(14);
de la primera ocurrencia.

lastIndexOf() Busca x dentro del array empezando por el final var result = A1.lastIndexOf(14);
y devuelve la posicin de primera ocurrencia.

aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.

FUNCIONES PARA TRANSFORMAR ARRAYS EN STRINGS O TIPOS PRIMITIVOS

FUNCIN UTILIDAD EJEMPLOS aprenderaprogramar.com

join(separador) Une los elementos de un array en una var frase = ['quiero', 'aprender'].join(' ');
cadena de texto donde cada elemento
//frase es tipo String y contiene quiero aprender
est separado por separador.

toString() Une los elementos de un array en una var frase = ['quiero', 'aprender'].toString();
cadena de texto donde cada elemento
//frase es tipo String y contiene quiero,aprender
est separado por una coma.

valueOf() Este mtodo devuelve la alert (A1.valueOf());

representacin como tipo primitivo de
//Mismo resultado que alert(A1);
un objeto. En el caso de un array, hace
lo mismo que el mtodo toString().

FUNCIONES QUE PERMITEN ORDENAR O REORDENAR ARRAYS

FUNCIN UTILIDAD EJEMPLOS aprenderaprogramar.com

reverse() Invierte el orden de los elementos en el array A1.reverse();

(el final pasa a ser el principio).
//Los elementos quedan ordenados al revs

sort() Si no recibe parmetros, ordena los var result = [2, 11, 111, 7].sort();
elementos del array por orden alfabtico
//result vale [11, 111, 2, 7] porque el orden es
(que no coincide con el numrico), quedando
alfabtico, no numrico.
el array modificado. Comentaremos esta
funcin con ms detenimiento.

LA FUNCIN SORT JAVASCRIPT. CMO ORDENAR NUMRICAMENTE

Hemos visto que [2, 11, 111, 7].sort() devuelve [11, 111, 2, 7] porque el array se ordena por orden
alfabtico y alfabticamente cualquier nmero que contenga un 1 inicial se coloca antes que cualquier
nmero que contenga un 2 inicial, independientemente de cul de los dos nmeros es mayor o menor.
Si el array contiene elementos undefined, estos se colocan al final del array.
Nos planteamos ahora, cmo ordenar nmeros de menor a mayor (o de mayor a menor)?
Para que la funcin sort ordene de forma distinta a la predeterminada se le debe pasar como
parmetro una funcin de comparacin. Por ejemplo:

aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.

[3, 5, 1, 7, 4].sort (funcionDeComparacion);

Donde funcionDeComparacion debe ser una funcin que reciba como parmetros dos elementos del
tipo con el que trabaja el array y devuelva un nmero negativo si el primer elemento debe ordenarse
antes que el segundo, cero si ambos elementos tienen igual orden, o un nmero positivo si el segundo
elemento debe ordenarse antes que el primero.

Definir una funcin de comparacin que permita ordenar un array numrico de menor a mayor es
sencillo:

function funcionDeComparacion (elem1, elem2) {

return elem1 elem2;
}

Esta funcin devuelve un nmero positivo si elem1 es mayor que elem2, con lo cual elem1 se colocar
detrs. Si escribimos return elem2 elem1 se ordenar de mayor a menor.

Escribe el siguiente cdigo y comprueba los resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var miArrayOriginal = [1, 4, 2, 9, 11, 44, 111, 7, 4];
var miArray = [1, 4, 2, 9, 11, 44, 111, 7, 4];
var msg ='El array original es: ' + miArrayOriginal +'\n';
msg = msg + 'Ordenado de mayor a menor es ' + miArray.sort(deMayorAMenor)+'\n';
msg = msg + 'Ordenado de menor a mayor es ' + miArray.sort(deMenorAMayor)+'\n';
alert(msg);
}
function deMenorAMayor(elem1, elem2) {return elem1-elem2;}
function deMayorAMenor(elem1, elem2) {return elem2-elem1;}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>

El resultado esperado es:

El array original es: 1,4,2,9,11,44,111,7,4
Ordenado de mayor a menor es 111,44,11,9,7,4,4,2,1
Ordenado de menor a mayor es 1,2,4,4,7,9,11,44,111

aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.

EJERCICIO 1

Crea un script donde a partir del array [33, 2, 36, 55, 4, 1] se realicen los siguientes procesos:

a) Mostrar el array ordenado de menor a mayor y de mayor a menor usando la funcin sort y
definiendo la funcin de ordenacin de forma annima, es decir, debers invocar X.sort(function () {
} ) definiendo la funcin de forma annima en vez de cmo funcin con nombre.

b) Crea una variable de nombre deMenorAMayor que contenga el resultado de ordenar de menor a
mayor los elementos del array.

c) Crea una variable de nombre deMayorAMenor que contenga el resultado de ordenar de mayor a
menor los elementos del array.

d) Muestra por pantalla el array original, la variable deMenorAMayor y la variable deMayorAMenor.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea un script donde sea posible ordenar palabras por orden alfabtico sin tener en cuenta la existencia
de maysculas o minsculas. Por ejemplo, declarar var miArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo',
'nieve', 'Zumba, 'barco'] y tras ordenar obtener =[ 'Abaco', 'abeja', 'barco', 'Moto', 'nieve', 'Sapo', 'soto',
'Zumba].

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01154E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Expresioness regulares JavaaScript. Caracte
eres especialess.

EXPRESIO
ONES REGULA
ARES JAVASCRIPT

En muchaas ocasioness nos encon ntramos con la necesidaad de hacer comprobacciones respe ecto a una
cadena dee texto. Por ejemplo comprobar si contiene
c letras mayscuulas, validar si es una dirreccin de
correo electrnico correctamen
c te formada Estas co omprobacion nes tambin n pueden se ervir para
autocomppletar cuando el usuario est escribieendo una enttrada en un formulario.
f

Las comprobaciones sobre

s cadenaas de texto se
s pueden haacer de muyy distintas maaneras y pue
eden tener
muy distiintas utilidaddes. En un nivel muy amplio,
a el estudio
e de cadenas, sus patrones, formas
f de
construcccin, etc. lo podramos englobar
e dentro de la temtica de Lenguajes formales, exxpresiones
regulares,, autmatas y gramticass.

Nosotros vamos simp ndicar las cueestiones ms relevantes relacionadaas con la posibilidad de
plemente a in
uso de exxpresiones regulares
r dentro de JavaaScript, sin entrar
e u anlisis deesde el punto de vista
en su
formal o terico.
t

Una expresin regulaar es un pattrn: una exxpresin que e define todas las cadennas o subcaddenas que
cumplen con
c ciertos criterios.
c Porr ejemplo, un criterio pu
uede ser conntener una aa. Hemos de
e tener en
cuenta quue a efectos de anlisis de
d cadenas de
d texto no ese lo mismo a (minsculaa) que A (maayscula)
(con tilde). Es decir, una letra no es lo mismo
m que essa letra en maysculas o esa letra con tilde,
diresis o cualquier otro signo ded puntuacin. De hech ho, quienes estn habittuados a traabajar con
cdigos de
d caracteress como ASCIII Unicodee ya sabrn queq una letrra minsculaa tiene distin
nto cdigo
numrico que esa missma letra maayscula.

Una forma inicial de expresar

e un patrn
p podra ser la indiccada en la sigguiente tablaa:

Patrn Cadena a probar Cumple eel patrn?

Camin SS

Abetto No, dado

o que no conttiene una a miinscula

No, ya quee aunque contiene la A no cumple

c el
UEFA
Todas las cadenas que requisito: contener una a minsscula.
comienzan por una letra
S, ya que comienza con
n una letra A mayscula
m
distinta de
d a y contie
enen al Abejja
y contiene unaa a minsculaa
m
menos una a
BATH
Ha S, cumple lo
os requisitos

"apis mellifeera sativa" No

o, no cumple los requisitos*.

\"apis mellifeera sativa\" S, cumple loss requisitos*.

aprenderraprogramar.co
om, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.

Hemos indicado "apis mellifera sativa" entrecomillada para indicar que la cadena est compuesta por
varias palabras separadas por espacios en blanco. En este caso, la cadena contiene dos espacios en
blanco. Hemos escrito \"apis mellifera sativa\" para representar una cadena donde las comillas forman
parte de la cadena (pero no las barras inclinadas, que son el smbolo de escape que nos sirve para
indicar que las comillas deben leerse literalmente). Esta cadena comienza con una comilla y contiene al
menos una a minscula, por lo que cumple con los requisitos.

Tener en cuenta que en una expresin regular los espacios en blanco cuentan. Por tanto no es lo mismo
"apis mellifera sativa" que "apis mellifera sativa". Un solo espacio en blanco hace que dos
cadenas se consideren distintas.

Las expresiones regulares son formas estandarizadas de expresar un patrn siguiendo ciertas reglas
para definirlo. A un computador no podemos indicarle con una frase cul es el patrn que queremos
comprobar, tendremos que indicrselo con una sintaxis normalizada.

Es frecuente encontrar cdigo donde se hace alusin a los siguientes trminos:

regex: abreviatura de regular expression (expresin regular)

pattern: patrn

match: coincidencia (cadena que contiene el patrn).

Una expresin regular como Todas las cadenas que comienzan por una letra distinta de a y contienen
al menos una a es relativamente compleja. Las expresiones regulares ms sencillas son las que hacen
alusin a si una cadena contiene un patrn. Por ejemplo: Contiene una cadena la subcadena rio?
Seran cadenas que contienen la subcadena rio y hacen match para la expresin regular indicada:
armariote, canario, rioboo, ariofonte, etc. En cambio no contienen la subcadena y no hacen
match cadenas como CABRIOLET (por estar en maysculas), rico, daino ni ro, en este ltimo
caso por llevar tilde.

EL OBJETO PREDEFINIDO REGEX

Para crear expresiones regulares JavaScript provee de una serie de smbolos especiales que permiten
definir los patrones, como veremos ms adelante.

Para introducir el concepto de smbolo especial y expresin regular vamos a usar primeramente slo
dos caracteres especiales: el carcter punto . , que es un simple punto, y el carcter ? que sirve para
indicar que el carcter a continuacin del smbolo es opcional, es decir, que puede aparecer 0 1 vez.

En JavaScript el uso de expresiones regulares se basa en el uso de un objeto predefinido (existente) del
lenguaje que podemos usar para construir nuestros scripts: el objeto RegExp. Este es uno de los objetos
predefinidos de JavaScript, ya que existen otros (como Math, Date, etc.). RegExp nos provee de
mtodos tiles para trabajar con expresiones regulares.

JavaScript permite crear expresiones regulares de dos maneras:

a) En forma de literal: var miExpresionRegular = /as?.a/ representa a todas las cadenas que contienen
una subcadena con la primera letra de la subcadena una a, seguida de una s, opcionalmente seguida de
cualquier letra, y seguida de una a.

aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.

b) Instanciando el objeto RegExp: var miExpresionRegular = new RegExp("as?.a") representa lo mismo.

Una cadena como casamentero contiene el patrn: contiene una a, seguida de s, el carcter opcional
no est presente, y seguida una a. c-a-s-a-m-e-n-t-e-r-o

Una cadena como castao contiene el patrn: c-a-s-t-a--o contiene el patrn, siendo el carcter
opcional la letra t.

Tambin contienen el patrn asa, casta, masa, castauela, casiarina, kaspamina asma.

Cadenas como sabina, casualidad as no contienen el patrn.

Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados. Observa cmo el mtodo
test aplicado a un objeto de tipo RegExp pasndole una cadena devuelve true si la cadena contiene el
patrn definido por la expresin regular o false si la cadena no contiene el patrn.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var miExpReg = /as?.a/
var cadena = 'casamentero';
var msg = 'Patrn: as?.a \n';
msg = msg + 'Contiene casamentero el patrn? : '+ miExpReg.test(cadena) +'\n';
msg = msg + 'Contiene castao el patrn? : '+ miExpReg.test('castao') +'\n';
msg = msg + 'Contiene sabina el patrn? : '+ miExpReg.test('sabina') +'\n';
msg = msg + 'Contiene asa el patrn? : '+ miExpReg.test('asa') +'\n';
msg = msg + 'Contiene as el patrn? : '+ miExpReg.test('as') +'\n';
alert(msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>

El resultado esperado es: Patrn: as?.a >> Contiene casamentero el patrn? : true

Contiene castao el patrn? : true >> Contiene sabina el patrn? : false

Contiene asa el patrn? : true >> Contiene as el patrn? : false

CARACTERES ESPECIALES EN EXPRESIONES REGULARES

Los principales caracteres especiales para construir expresiones regulares JavaScript estn reflejados en
la siguiente tabla. Los parntesis tienen un significado especial que veremos en la siguiente entrega.

aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.

Carcter Significado Ejemplo aprenderaprogramar.com

Backslash o carcter de escape. Sirve para

\ anular un carcter especial y hacer que se Ver ms abajo
considere como si fuera un carcter normal.
barco
Donde a es una letra cualquiera. Indica que el
a patrn incluye una a en el orden especificado. Cadenas que tienen a barco como
subcadena (incluido barco mismo)
El carcter anterior aparece exactamente n ca{3}t{3}e
{n} veces, siendo n un entero positivo. Hace match si una subcadena es caaattte.
ca{3,}te
El carcter anterior aparece n o ms veces,
{n,} siendo n un entero positivo. Hace match con caaate, caaaate, etc. pero no
con cate
El carcter anterior aparece un mnimo de n ca{2,5}te
{n,m} veces y un mximo de m veces, siendo n y m Hace match con caate, caaate, caaaate y
enteros positivos. caaaaate
El smbolo ^ (denominado exponente) indica /^a/
^ comienzo de la cadena por ese smbolo. Cadenas que empiezan por a minscula.
ca.e
El smbolo punto indica existencia de cualquier
. carcter. Cadenas que contienen subcadenas con caxe
donde x es cualquier carcter.
^a..e$
El smbolo dlar indica que la letra anterior ha Cadenas que empiezan por a y terminan con
$ de ser obligatoriamente ltima letra de la e, y que contienen exactamente cuatro
cadena caracteres (la a inicial, dos intermedios, ms
la e final)
^at*e$
El smbolo asterisco indica que la subcadena
contiene el smbolo al que precede cero o ms Cadenas que empiezan por a, terminan por e,
* y entre ambos tienen cero, una o muchas ts
veces.
(pero no ningn otro carcter).
^at{0,}e$
{0,} Equivalente al smbolo asterisco
Igual que el anterior
^at+e$
El smbolo ms indica que la subcadena
contiene el smbolo al que precede una o ms Cadenas que empiezan por a, terminan por e,
+ y entre ambos tienen una o muchas ts (pero
veces.
no ningn otro carcter).
^at{1,}e$
{1,} Equivalente al smbolo +

El smbolo interrogacin indica opcionalidad: el ^at?e$

? carcter que lo precede puede aparecer 0 1 Cadenas que empiezan por a, terminan por e,
vez en la subcadena. y entre ambos tienen una ninguna t.
Equivalente al smbolo ?, es decir, el carcter
{0,1} ^at{0,1}e$
anterior puede aparecer 0 1 vez.
El smbolo or genera un match si se encuentra ^a(t|g)e$
a|b a b siendo a b dos caracteres cualesquiera Cadenas que empiezan por a, terminan por e,
que se indiquen. y entre ambos hay una t una g.

aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.

Carcter Significado Ejemplo aprenderaprogramar.com

Hace match slo si existe una subcadena mahatma(?= ghandi)

sub1(?=sub2) donde la subcadena sub1 est antes de la Hace match con mahatma ghandi pero no con
subcadena sub2 mahatma prasha
Hace match en todas las subcadenas donde la mahatma(?! ghandi)
sub1(?!sub2) subcadena sub2 no est despus de la Hace match con mahatma para, mahatma
subcadena sub1 gon, etc. pero no con mahatma ghandi
Hace match con cualquiera de los caracteres ^[aeiou]
[abc] indicados dentro de los corchetes (conjunto de
caracteres) Cadenas que empiezan por una vocal.

Rango de caracteres. Hace match con

cualquier carcter comprendido entre el inicial ^[c-k]
y el final, en orden alfabtico. Se pueden
[a-z] definir varios conjuntos uno detrs de otro, Cadenas que empiezan por c, d, e, f, g, h, i, j
por ejemplo: [A-Za-z] indica letra mayscula o k.
minscula.
Complementario o negado de un conjunto de [^au]$
[^abc] [^a- caracteres. Hace match con cualquier carcter
distinto de los definidos en el conjunto de Hace match con cualquier cadena que no
z] termina en a ni en u
caracteres
^\d\*\d$
Hace match si la cadena es un nmero
\d Hace match con cualquier nmero entre 0 y 9 seguido del smbolo * y seguido de otro
nmero. * no es aqu especial por estar
precedido del escape \.
^[0-9]\* [0-9]$
[0-9] Equivalente a \d

Hace match con cualquier carcter que no sea ^ [^0-9]

\D un dgito. Equivale a [^0-9] Cadena que no empieza por un nmero.
\s\s
Hace match con un espacio en blanco (incluye
\s tabuladores y saltos de lnea entre otros). Hace match si encuentra dos espacios en
blanco
Hace match con cualquier carcter que no sea [\s\S]
\S espacio en blanco, tabulador, salto de lnea Hace match con cualquier carcter
Hace match con cualquier letra mayscula,
minscula, nmero o guin bajo. Equivale a [A- \w{3}
\w Za-z0-9_]. Tener en cuenta que las letras con Hace match si existe una subcadena con 3
tilde quedan fuera y habra que aadirlas si caracteres vlidos seguidos.
queremos.
\W{2,3}
Hace match con cualquier carcter que no sea
letra mayscula, minscula, nmero o guin Hace match si existe una subcadena con 2 3
\W caracteres seguidos que no son letras ni
bajo. Equivale a [^A-Za-z0-9_]
nmeros.
Existen otros smbolos especiales y
Otros combinaciones de smbolos especiales para
lograr determinados fines.

aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.

EJERCICIO

Dada la expresin regular de JavaScript /^[A-C]\w+\ses\s\w+/ indicar cules de las siguientes cadenas
hacen match con la expresin regular, y en caso de hacer match, qu parte o partes son las que hacen
match:

a) Juan es guapo

b) Adriano no es feo

c) Adriano deja de ser guapo

d) Adriano ya es guapo

e) No es ahora

f) Ahora es no

g) Adriano es guapo

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01155E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Parntesis en
e expresioness regulares JavaaScript. Flags. Mtodos.
M

PARNTESIS Y FLAGS EN EXPRESIO

ONES REGULLARES

Las expreesiones regulares JavaSScript son una potentte herramienta que no os permitir resolver
problemaas diversos. Ya conocem mos aspectoss bsicos co
omo la instanciacin de objetos ReggExp y los
caracteres especiales disponibles. Vamos a am
mpliar conocimientos sob
bre expresion
nes regulare
es.

ONES REGULA
EXPRESIO ARES CON FLLAGS

JavaScriptt permite especificar

e m
modos de bsqueda
b de
e expresionees regularess a travs de
d lo que
denominaa flags (banderas o indicaadores).

Los flags se
s indican en
n el momento de definir la expresin regular:

a) Si se deefine en form
ma de literal: var miExpreesionRegularr = /as?.a/flagsAIncluir

b) Instancciando el objeto RegExp: var miExpreesionRegular = new RegExp("as?.a", " flagsAIncluir")

En la siguiente tabla se indican loss principales flags, cmo usarlos y ejeemplos.

Flagg Significado Ejempllo sintaxis

Bssqueda globaal de todas las coincidenccias /as?.a/gg

g o se detienee al enconttrar la primera
(no
coin
ncidencia) new ReegExp("as?.a", "g")

/as?.a/ii
i No diferenciar en
ntre maysculas y minscu
ulas
new ReegExp("as?.a", "i")
Bssqueda multilnea. Para loss indicadores de
commienzo de cad dena ^ y fin de cadena $, si se /as?.a/m
m
m aplica esta ban ndera, se tieenen en cuenta
matches en todos los princip pios y finales de new ReegExp("as?.a", "m")
lneea, no slo al principio
p y final de cadena.
var miEExpReg = /^i/m
mi
Indica que har match con cualquier
Combinacciones Se pueden especcificar varios flags
f comiennzo de lnea p
por una i min
nscula I
maysccula (bsqueeda multilne ea y sin
diferenciar maysculas y minsculas).

aprenderraprogramar.co
om, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.

MTODOS DE LOS OBJETOS TIPO EXPRESIN REGULAR

Los objetos de tipo expresin regular proveen de una serie de mtodos tiles. En la siguiente tabla
vemos cules son, su significado y un ejemplo de uso.

Mtodo Significado Ejemplo de uso

var miExpReg = /p.sto/g

Ejecuta una bsqueda del patrn y
devuelve un array cuyo ndice 0 var txt = 'el pasto es pisto pero no pesto';
contiene el valor encontrado. Si est msg = '';
exec activado el flag g, la repeticin de la while ((matches = miExpReg.exec(txt)) !== null ) {
bsqueda devuelve la siguiente msg = msg + 'Encontrado: '+matches[0]+'\n'; }
coincidencia. alert(msg);
var miExpReg = /p.sto/g
Comprueba si se verifica el patrn y var txt = 'el pasto es pisto pero no pesto';
test devuelve true o false msg = '';
alert('Hay match: '+ miExpReg.test(txt));

MTODOS DE LOS OBJETOS STRING RELACIONADOS CON EXPRESIONES REGULARES

Los objetos de tipo String proveen de una serie de mtodos tiles. En la siguiente tabla vemos cules
son, su significado y un ejemplo de uso.

Mtodo Signficado Ejemplo de uso

var miExpReg = /p.sto/g

var txt = 'el pasto es pisto pero no pesto';
msg = ''; var matches = txt.match(miExpReg);
Devuelve un array con las
if (matches != null) {
match coincidencias encontradas, o null si
for (var i=0; i<matches.length; i++){
no hay coincidencias.
msg = msg + 'Encontrado: '+matches[i]+'\n'; }
} else {msg = 'No se encontraron coincidencias';}
alert(msg);
var miExpReg = /p.sto/g
var txt = 'el pasto es pisto pero no pesto';
Devuelve la posicin de comienzo de msg = ''; var posicion = txt.search(miExpReg);
la primera coincidencia dentro del
if (posicion != -1) {
search string, o -1 si no hay coincidencia.
Recordar que la primera posicin msg = msg + 'Encontrado patrn en posicin:
posible es cero. '+posicion+'\n';
} else {msg = 'No se encontraron coincidencias';}
alert(msg);
Devuelve un nuevo String (sin var miExpReg = /p.sto/g
modificar el original) donde se var txt = 'el pasto es pisto pero no pesto';
replace reemplaza una o varias coincidencias msg = ''; var nuevoTxt = txt.replace(miExpReg, 'coco');
por lo especificado (una cadena o msg = 'txt vale ' + txt + ' y nuevoTxt vale ' +nuevoTxt;
una funcin que devuelve la cadena). alert(msg);

aprenderaprogramar.com, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.

Mtodo Signficado Ejemplo de uso

Devuelve un array con las

subcadenas resultantes de dividir la var miExpReg = /\d/g
cadena original en subcadenas var txt = 'un 3 de bastos gana a un 5 de copas pero no
delimitadas por el carcter separador a un 7 de oros';
split especificado (que queda excluido). Si msg = ''; var splits = txt.split(miExpReg);
se indican unas comillas vacas se msg = 'splits contiene ' + splits;
extraen todos los caracteres a un alert(msg);
array.

USAR PARNTESIS PARA AGRUPAR FRAGMENTOS

Los parntesis sirven para agrupar varios caracteres y afectarlos por un carcter especial.

Por ejemplo var miExpReg = /(p.s)?to/g

var txt = 'el pasto es pisto y eso es todo';

var resultado = txt.match(miExpReg);

Hace que resultado contenga ['pasto ', 'pisto ', 'to '] ya que hay un fragmento de la expresin que se ha
agrupado e indicado que es opcional.

Los parntesis nos permiten no tener que repetir. Por ejemplo en vez de /estereotipo|estereoforma/
podemos escribir /estereo(tipo|forma).

USAR PARNTESIS PARA IDENTIFICAR SUBEXPRESIONES CON MATCH

Los parntesis generan otro efecto. Cuando se invoca la funcin match buscando la primera
coincidencia (es decir, bsqueda no generalizada sin el flag g) y existen subexpresiones entre
parntesis, el array generado guarda en su ndice cero la primera coincidencia mientras que en los
sucesivos ndices guarda las coincidencias de las subexpresiones.

Cuando se escribe una expresin regular, los elementos que se incluyen entre parntesis pueden ser
recuperados por separado invocndolos luego como $1, $2, $3. Estas variables persisten
normalmente hasta que se invoca una nueva expresin regular.

Vemoslo con un ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var expReg = /(\w+)\s(\w+)\s(\w+)/;

aprenderaprogramar.com, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.

var txt = "Era una noche negra y sola";

var newTxt = txt.match(expReg);
console.log(newTxt); //Activar la consola para que se visualice
var cambiada = newTxt[0].replace(newTxt[3], 'madrugada');
console.log(cambiada); //Activar la consola para que se visualice
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>

El resultado esperado es:

Array [ "Era una noche", "Era", "una", "noche" ]

"Era una madrugada"

Analicemos lo que hace el cdigo: en el array newTxt queda almacenado en su posicin cero la
coincidencia global con la expresin regular. En su ndice uno, queda almacenado el match de la
primera subexpresin entre parntesis, es decir, la primera palabra (sin tildes). En su ndice dos, la
segunda palabra, y en su ndice 3, la tercera palabra. A continuacin creamos una cadena formada por
las tres palabras con la tercera de ellas reemplazada por madrugada.

USAR PARNTESIS PARA IDENTIFICAR SUBEXPRESIONES CON REPLACE

Dentro de una sentencia replace, los matches de subexpresiones entre parntesis pueden ser invocadas
usando unas variables temporales especiales que se numeran como $1, $2, $3 etc. de acuerdo con la
cantidad de subexpresiones entre parntesis que existan. Este ejemplo nos muestra cmo se pueden
usar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var expReg = /(\w+)\s(\w+)\s(\w+)/;
var txt = "Alberto Flores Rubalcaba: tiene calificacin de 10";
var cambiada = txt.replace(expReg, '$3 $2, $1');
console.log(cambiada); //Activar la consola para que se visualice
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.

En este ejemplo el match de la expresin regular es <<Alberto Flores Rubalcaba>>, y cada palabra es
una subexpresin por encontrarse entre parntesis en la expresin regular. En el replace podemos
identificar cada subexpresin como $1 (primera subexpresin), $2 (segunda) y $3 (tercera).

En el replace indicamos que la coincidencia de la expresin regular sea sustituida por la cadena formada
por la tercera palabra seguida de la segunda, una coma y la primera palabra.

De este modo el resultado esperado es que se muestre por consola: "Rubalcaba Flores, Alberto: tiene
calificacin de 10".

EJERCICIO

Crea un documento HTML (pgina web) donde exista un formulario que se enve por el mtodo GET. Se
pedir al usuario que introduzca nombre, apellidos y correo electrnico. Define dentro de la etiqueta
form que cuando se produzca el evento onsubmit (pulsacin del botn de envo del formulario) se
ejecute una funcin a la que denominaremos validacionConExpReg que no recibe parmetros.

La funcin validar debe realizar estas tareas y comprobaciones utilizando expresiones regulares:

a) Comprobar que el nombre contiene al menos tres letras. Si no es as, debe aparecer un mensaje por
pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar
Ka como nombre debe aparecer el mensaje: El nombre no cumple tener al menos tres letras.

b) Comprobar que el correo electrnico contiene el carcter @ (arroba) y el carcter . (punto). De no

ser as, deber aparecer un mensaje indicando que al correo electrnico le falta uno o ambos
caracteres. Por ejemplo si se trata de enviar pacogmail.com deber aparecer el mensaje: Falta el
smbolo @ en el correo electrnico.

c) Antes de enviarse los datos del formulario a la pgina de destino, todas las letras del correo
electrnico deben transformarse a minsculas. Por ejemplo si se ha escrito [email protected] debe
enviarse [email protected]

d) Antes de enviarse los datos del formulario a la pgina de destino, si el correo electrnico contiene la
subcadena at debe reemplazarse por el smbolo @. Por ejemplo si se ha escrito paco at gmail.com
debe enviarse [email protected]

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01156E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Funciones para
p nmeros y conversin de
e Strings a nm
meros.

FUNCIONES PARA TRA

ABAJAR CON
N NMEROSS

JavaScriptt proporcion na una serie de funciones predefinidas y palabras clave o constantes parra trabajar
con nmeeros. Entre ellas
e podemo os citar isNan
n, Number(n
n), toFixed(n)), toExponen
ntial(n), toPrecision(n),
valueOf(),, toString().

os en JavaScrript se puedee abordar de

El trabajo con nmero esde distintas perspectivaas.

En primerr lugar, existeen dos variab

bles predefin es que ya hemos mencionado:
nidas globale

Not-a-Numbeer) que se usa para repreesentar un vaalor numrico no vlido ((p.ej. 0/0).
a) NaN (N

b) Infinityy que se usa para repressentar un vaalor numrico positivo in

nfinito, o su variante -Infinity, que
representta un valor numrico neggativo infinitoo.

El valor NaN
N es un vaalor peculiar en JavaScrip pt desde el momento en n que no peermite su com mparacin
con el operador ==. Por
P ejemplo, var x = NaN N; var y = NaaN; alert (x===y); devuelve false a pessar de que
ambas variables contiienen Nan. Para
P ble contiene Nan ha de u
evaluar si una variab usarse la expresin x !=
x, que devvolver true nicamentee si x contien
ne NaN. Dad do que la aplicacin de estos operadores es un
tanto connfusa con vaariables quee pueden co ontener NaN N, se recomienda usar la funcin isNaN que
comentarremos un poco ms adelaante, y que permite
p evaluar si un valor es NaN.

Una expreesin como 1/Infinity

1 se evala a cerro.

PROPIEDA
ADES DEL OB
BJETO NUMB
BER

JavaScriptt, al igual que

q disponee de un objjeto predefiinido RegExp para trabbajar con exxpresiones
regulares,, dispone dee un objeto predefinido
p denominadoo Number qu ue permite ttrabajar con nmeros.
Este objeeto predefin nido tiene propiedades
p y mtodoss. Entre suss propiedadees podemoss citar las
siguientess:

PROPIEDAD REPRESENTTA EJEM

MPLOS aprenderaprogram
mar.com

POSITIVE__INFINITY Infinito positivvo (igual que Infinity)

I var num
m = Number.POSITIVE_INFIN
NITY;
//num toma
t valor Inffinity

NEGATIVE_INFINITY Infinito negatiivo (igual que -Infinity) var num

m = Number.N
NEGATIVE_INFFINITY;
//num toma
t valor -In
nfinity

aprenderraprogramar.co
om, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.

MAX_VALUE Representa el valor numrico ms grande var num = Number.MAX_VALUE;

con el que puede trabajar JavaScript // num vale 1.7976931348623157e+308 u
otra cifra igualmente gigantesca,
dependiendo del sistema

MIN_VALUE Representa el valor numrico ms var num = Number.MIN_VALUE;

pequeo con el que puede trabajar // num vale num vale 5e-324 u otra cifra
JavaScript. tambin aproximadamente cero,
dependiendo del sistema

NaN Representa el valor NaN var num = Number.NaN;

// num vale NaN

Las propiedades de Number son de slo lectura, es decir, no podemos establecer valores distintos de
los predefinidos para ellas.

FUNCIONES DEL OBJETO NUMBER

FUNCIN UTILIDAD EJEMPLOS aprenderaprogramar.com

toFixed(n) Devuelve un String con el nmero o variable sobre var num = 3.1416;
el que se invoca el mtodo con tantos decimales
alert('num vale ' + num.toFixed(2));
como indique el parmetro n. Si n es cero o vaco,
redondea al entero ms prximo. Si es x.50 // num vale "3.14 "
devuelve el entero inmediato superior si x es
positivo o inferior si x es negativo. No genera
notacin exponencial.

isNaN(x) Evala a true si x es un valor NaN o a false en caso alert('0/0 vale NaN?: ' + isNaN(0/0));
contrario.
// true

toPrecision(n) Devuelve un String con el nmero o variable sobre var num = (3.1416).toPrecision(2);
el que se invoca el mtodo con un nmero de
// num vale 3.1, hay dos dgitos
dgitos significativos especificado por el nmero de
significativos.
decimales n. Si n es vaco devuelve el nmero sin
modificar. No admite n cero. Si el nmero es
demasiado grande para representar su parte
entera, genera notacin exponencial.

valueOf(x) Este mtodo devuelve la representacin como tipo alert (A1.valueOf());

primitivo de un objeto. En el caso de un Number,
//Mismo resultado que alert(A1);
hace lo mismo que el mtodo toString().

toString() Devuelve la representacin como String de un alert (A1.toString());

objeto Number.
//Mismo resultado que alert(A1);

aprenderaprogramar.com, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.

DIFERENCIAR EL OBJETO NUMBER DE OBJETOS NUMBER

Debemos diferenciar entre el objeto predefinido Number, y los objetos Number que podamos crear
nosotros como programadores (que tambin dispondrn de mtodos heredados del objeto Number).
Para crear objetos Number usamos la sintaxis var num = new Number(valorNumerico);

NUMBER COMO FUNCIN PARA CONVERTIR OTROS TIPOS DE DATOS

Dado una variable de otro tipo a la que denominaremos unaVarOtroTipo, podemos usar Number como
funcin para realizar la conversin de dicha variable a un valor numrico usando esta sintaxis:

var valorNumerico = Number(unaVarOtroTipo);

Donde unaVarOtroTipo puede ser un String, un objeto Date, o cualquier otro objeto del que se pueda
realizar una representacin numrica.

FUNCIONES GLOBALES PARSEINT Y PARSEFLOAT

Existen dos funciones globales tiles para convertir cadenas en valores numricos: parseInt y
parseFloat.

La sintaxis bsica de parseFloat es la siguiente:

var numerica = parseFloat(cadena);

La funcin parseFloat toma la cadena y trata de retornar un valor numrico decimal. Si la conversin no
se puede completar por aparecer algn carcter extrao, devuelve el valor numrico que pueda extraer
hasta la aparicin de dicho valor. Si la cadena no empieza con un valor vlido para un nmero (es decir,
un +, un un nmero, un signo . una letra e indicadora de exponente) la funcin devuelve NaN.

Vemoslo con un ejemplo:

var cadena1 = '82.35 % de aprobados';

var cadena2 = '% de aprobados: 82.35';
alert('cadena1 a numero: ' + parseFloat(cadena1) + ' ; cadena2 a numero: ' + parseFloat(cadena2));

Este ejemplo da lugar a que se muestre por pantalla:

cadena1 a numero: 82.35 ; cadena2 a numero: NaN

En el primer caso, extrae el valor numrico hasta all donde le es posible. En el segundo caso, al no
comenzar la cadena con algo que pueda convertirse a numrico, devuelve NaN.

aprenderaprogramar.com, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.

La sintaxis bsica de parseInt es la siguiente:

var numericaInt = parseInt(cadena);

Hay otra forma de invocacin consistente en pasar dos parmetros: parseInt (cadena, raz), donde raz
es un parmetro opcional que por defecto es 10 e indica la base numrica empleada. Por defecto es la
decimal (10), pero podra ser 8 (valor numrico octal) 16 (valor numrico hexadecimal).

El funcionamiento de parseInt es similar al de parseFloat con la diferencia de que parseInt extrae

nicamente aquella parte de la cadena que pueda reconocerse como un entero. As parseInt('15.67
metros') devuelve 15, parseInt ('.1 metros') devuelve NaN (no admite que un entero comience con un
punto), y parseInt ('0.1 metros') devuelve 0.

EJERCICIO

Crea un script donde:

a) Se pida al usuario que introduzca un nmero superior a 10000000 y se muestre por pantalla ese
nmero con tres dgitos significativos. Si el nmero introducido no cumple la condicin, se volver a
solicitar que se introduzca.

b) Se pida al usuario que introzca un nmero con 4 decimales y se muestre por pantalla ese nmero
redondeado a dos decimales. Si el nmero introducido no cumple la condicin, se volver a solicitar que
se introduzca (para ello habr que analizar que la cadena introducida cuente con cuatro dgitos despus
del carcter de punto decimal).

c) Se pida al usuario que introduzca una frase que comience por un nmero que puede ser entero o
decimal. Para dicha frase, se devolver el nmero entero que se pueda extraer, y el nmero decimal
que se pueda extraer. Deber analizarse la entrada con una expresin regular, de modo que si no
cumple la condicin, se vuelva a solicitar la introduccin de la frase.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01157E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Concepto de evento JavaSScript. Manejad
dores de evento
os.

CONCEPTTO DE EVENTTO JAVASCRIIPT

Un evento es algo qu ue ocurre y puede ser detectado. Essta definicin de partidaa es quizs demasiado
d
simple. Poodramos deecir que si un
n usuario hace click sobrre un botn en una pgina web se produce un
evento (eel usuario ha hecho click), pero tamb e usuario esstornuda se produce un evento, lo
bin que si el
mente no entra dentro del
cual realm d mbito de la program o que hemos de acotar
macin JavaSScript, por lo
esta defin
nicin.

JavaScriptt es un lengguaje que puedep realizzar tareas propias de laa programaccin tradicio onal como
ejecuciones secuenciaales de instrucciones o buclesb iterativos, pero esst especialm
mente prepaarado para
ser un lennguaje de reespuesta dinmica a los eventos que e genera el usuario. Porr ello muchas veces se
alude a JaavaScript com mo un lengu uaje dirigido por eventoss o como un n tipo de proogramacin basada en
eventos. Segn
S este modelo
m de programaci
p n, la aplicaccin web estt a la espeera de que el usuario
haga algoo (pulsar un botn,
b un lin
nk, cerrar unna ventana, etc.)
e y es cuaando existe u
una accin del
d usuario
cuando see ejecuta un fragmento de cdigo. Esto E permite que las aplicaciones weeb sean interractivas en
base al cicclo accin deel usuario reaccin
r de la aplicacin.

Podramo
os hablar de distintos
d tipo
os de evento
os:

a) Evento n evento inteerceptable ees aquel que puede ser

os interceptaables y eventtos no intercceptables: un
detectadoo por el sisteema operativo o el naveegador y gen n fragmento de cdigo
nerar la ejeccucin de un
JavaScriptt como conssecuencia dee ello. Estos son los eventos JavaScrript con los que trabajarremos. Un
evento no quel que no puede ser detectado,
o interceptaable sera aq d c
como que el usuario se rasque la
cabeza o que
q reciba unu mensaje de d correo eleectrnico en una aplicaci n local.

b) Evento os disparadoos por el usuario y eventos disparaados por el sistema: cada vez que el usuario
realiza un
na accin inteerceptable, como
c hacer click pulsaar una tecla, decimos quee se dispara un evento
generado por el usuarrio. Pero adeems de eventos disparados por el usuario, existen eventos disparados
d
por el sisttema operattivo o por el navegador. Por ejemplo o, cuando termina la carrga de una pgina web
en el navvegador se dispara
d el evvento de sisstema <<onlload>> (cargga terminadaa). Tambin podemos
incluir insstrucciones especficas JavaScript para
p que se ejecuten cu uando tengaa lugar un evento
e de
sistema.

TIPOS DE EVENTOS. OBJETIVO

O O TARGET
T DE EVENTO.

Cada eveento tiene un nombre, al que tambin se llam ma tipo de evento. P Por ejemplo al evento
correspon
ndiente a haacer click see le identifica como on malmente los nombres se
nclick. Norm s forman
anteponieendo el preffijo on con el nombre dee lo que ocurre en inglss. As por ejeemplo onlo
oad indica
cuando termina
t la caarga del docu
umento HTM ML.

aprenderraprogramar.co
om, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.

Cada evento est asociado a un objeto que es quien recibe o detecta el evento, al que se denomina
target u objetivo del evento. As, el evento onclick del ejemplo anterior tiene como objetivo un nodo
HTML de imagen, y un nodo HTML div. El evento onload tiene como target el objeto window u objeto
global.

MODELOS DE EVENTOS. PROPAGACIN.

Al igual que definir la estructura de un documento HTML es complejo y por ello se cre el DOM
(Document Object Model), para poder describirla y manejarla, existen modelos de eventos para
describir y manejar los eventos.

El problema reside en que a lo largo del tiempo se crearon distintos modelos de eventos propuestos
por distintas organizaciones (Netscape, Microsoft, W3C, etc.). Distintos navegadores adoptaron
distintos modelos de eventos, lo cual haca difcil que el cdigo programado y til en un navegador
funcionara en otro que usaba un modelo de eventos distinto.

Un modelo de eventos implica como aspecto importante qu eventos son detectados y cules son sus
nombres. Pero esta no es la nica cuestin relacionada con los eventos. Otra cuestin importante es en
qu orden se ejecutan dos eventos que suceden simultneamente. Por ejemplo, si tenemos un evento
onclick definido para un div, y otro evento onclick definido para una imagen dentro del div, al hacer
click sobre la imagen se producen dos eventos simultneamente: el evento onclick correspondiente al
div y el evento onclick correspondiente a la imagen. Qu cdigo de respuesta se debera ejecutar
primero, el correspondiente al div o el correspondiente a la imagen? Al orden en que se van disparando
los eventos se le denomina propagacin de eventos. La propagacin de eventos puede ser desde dentro
hacia fuera (p.ej. primero el evento de la imagen y luego el del div), desde fuera hacia dentro (p.ej.
primero el evento del div y luego el de la imagen), o para casos ms complejos, segn otras formas de
establecer el orden.

Cuestiones como esta tambin estn comprendidas en el modelo de eventos. Al existir distintos
modelos de eventos, el resultado era (y en cierta medida es) que el orden en que se ejecutaban los
eventos dependa del navegador que estuviramos utilizando.

Con el paso del tiempo se ha ido produciendo cierta estandarizacin entre navegadores, aunque esta
todava no es completa. Nosotros en este curso no vamos a entrar a estudiar en profundidad ningn
modelo de eventos en concreto, slo haremos referencias puntuales a ellos cuando lo consideremos
necesario. Nos vamos a limitar a describir la forma ms estandarizada y aceptada por la industria (los
fabricantes de navegadores) y la comunidad de programadores para trabajar con eventos.

Pero debes tener en cuenta lo siguiente: distintos navegadores pueden responder de distinta manera a
un mismo cdigo. Algunos navegadores pueden no reconocer el cdigo que s es reconocido por otros
navegadores. Algunos navegadores pueden considerar como eventos algo que otros navegadores
simplemente ignoran y no son capaces de capturar.

Debemos preocuparnos por esto? Pues la verdad es que no, ya que eso no nos aportar ninguna
solucin. La estrategia que recomendamos es tratar de usar el cdigo ms inter-compatible que
podamos y sepamos, siendo conscientes de que hoy por hoy es imposible conseguir que una pgina
web se muestre exactamente igual y responda exactamente igual en todos los navegadores.

aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.

Conociendo que no podemos cambiar esta situacin, nuestro objetivo ser crear pginas web cuyo
funcionamiento sea correcto en el mayor nmero de navegadores posible.

MANEJADOR DE EVENTOS O EVENT HANDLER COMO ATRIBUTO DE ELEMENTO HTML. CONFIRM.

Cmo indicar en el cdigo que una serie de instrucciones deben ejecutarse cuando tiene lugar un
evento?

La forma ms tradicional sera la consistente en aadir un atributo a la etiqueta HTML que recibe el
evento, tambin llamado captura de eventos en lnea:

<etiqueta nombreEvento="accin a ejecutar"> </etiqueta>

Donde accin a ejecutar es un fragmento de cdigo JavaScript, que en caso de comprender varias
sentencias deben ir separadas por punto y coma.

<a onclick="alert('Cambiamos la url')" href="http://aprenderaprogramar.com">Aprende a programar</a>

En este ejemplo podemos decir que onclick es el nombre del evento (aunque a veces se prefiere decir
que el nombre del evento es click). Tambin podemos decir que es un atributo de la etiqueta <a>, y
podemos decir que es el manejador del evento: el elemento que dice qu ha de ejecutarse cuando se
produzca el evento.

Una posibilidad interesante de este tipo de manejadores de eventos es que podemos pasar a una
funcin el elemento HTML que recibe el evento usando la palabra clave this. Por ejemplo:

<a onclick="llamarFuncion(this)" href="http://aprenderaprogramar.com">Aprende a programar</a>

Al invocar a this estamos pasando el elemento HTML, nodo del DOM, <a>, lo cual puede ser de inters
en numerosas ocasiones en que nos interese ejecutar una serie de acciones sobre el elemento que
recibe la accin.

Con esta forma de manejo nos podemos plantear una pregunta: si hay una accin predeterminada
cuando se pulsa el link (dirigirnos a la url de destino) Qu se ejecuta primero, el cdigo de respuesta o
la accin predeterminada? Se estandariz que en primer lugar se ejecuta el script de respuesta al
evento, y luego la accin predeterminada.

Pero como en programacin todo es posible, se plante la cuestin: Por qu no idear una forma de
hacer que la ejecucin predeterminada se produzca slo cuando nosotros queramos?

aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.

La solucin que se le dio a esto fue permitir que el manejador del evento devolviera un valor booleano:
true (por defecto) si se deba ejecutar la accin predeterminada, o false para evitar que se ejecutara la
accin predeterminada.

<etiqueta nombreEvento="accin a ejecutar; return valorBooleano"> </etiqueta>

<a onclick="alert('Link desactivado'); return confirm('Va a acceder a aprenderaprogramar.com')"

href="http://aprenderaprogramar.com">Aprende a programar</a>

La ejecucin de la accin predeterminada se poda dejar en manos del usuario a travs de un mensaje
de confirmacin usando la funcin global de JavaScript confirm, de modo que el manejador devuelve
true si el usuario pulsa Aceptar o false si el usuario pulsa en Cancelar.

<a onclick="return confirm('Va a acceder a aprenderaprogramar.com Est seguro?')"

href="http://aprenderaprogramar.com">Aprende a programar</a>

Algunos eventos, como el cierre de una ventana, pueden generar la ejecucin de un cdigo JavaScript,
pero no se puede impedir en este caso la accin predeterminada porque sera ir contra los deseos del
usuario. Quizs se pudiera impedir, pero no tendra lgica.

Esta forma de introducir manejadores de eventos, digamos que la ms antigua de todos, es reconocida
por todos los navegadores, al igual que los cuatro eventos mgicos (en el sentido de que cuando se
introdujeron fueron un gran avance en el desarrollo web) onclick, onload, onmouseover, onmouseout.

Desde la poca del navegador Netscape en que se introdujeron los manejadores de eventos bsicos y
los eventos bsicos hasta hoy en da, ha habido una larga y complicada evolucin.

Hoy da podemos decir que la captura de eventos en lnea, aunque es compatible con todos los
navegadores, tiene un serio inconveniente: nos obliga a mezclar aspectos de comportamiento o
respuesta dinmica con aspectos de estructura del documento HTML. Como sabemos, hoy da hay
consenso en que es ventajoso separar la estructura (HTML) de la presentacin (CSS) y del
comportamiento (JavaScript).

MANEJADORES DE EVENTOS COMO PROPIEDADES DE OBJETOS

Podemos independizar los manejadores de eventos usando cdigo JavaScript para crearlos manejando
la propiedad de nodos HTML del DOM que representa el atributo de la etiqueta HTML.

Lo entenderemos mejor con un ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
</head>

aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.

<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<a href="http://aprenderaprogramar.com">Aprende a programar.</a>
<a href="http://aprenderaprogramar.es">Intntalo, ser divertido.</a>
</body>
</html>
<script type="text/javascript">
var elemsA = document.getElementsByTagName('a');
for (var i=0;i<elemsA.length;i++) {
elemsA[i].onclick = function() {return confirm('Ud. va a ser transferido de url hacia ' + this.href);}
}
</script>

Sobre este ejemplo tenemos que llamar la atencin sobre algunas cuestiones:

a) El cdigo JavaScript est incluido detrs del cdigo HTML. Por qu? Porque si es incluido antes del
cdigo HTML, se ejecuta antes de que se haya cargado la pgina, y al no haberse cargado los elementos
HTML no es posible establecer la propiedad onclick de los mismos (es decir,
getElementsByTagName(a) nos devuelve cero elementos cuando todava no se ha cargado la pgina
web.

b) A cada nodo de tipo link (a) se le asigna como propiedad onclick una funcin, en este caso haciendo
uso de return y confirm, de modo que el usuario puede elegir entre aceptar el ir al link elegido o
cancelar.

c) this dentro de la funcin annima a ejecutar ante un evento onclick sobre un elemento a hace
referencia al elemento propietario de la funcin, en este caso el propio nodo de tipo link a, de modo
que podemos rescatar la url de destino escribiendo this.href.

Una forma alternativa de escribir el script sera:

<script type="text/javascript">
var elemsA = document.getElementsByTagName('a');
for (var i=0;i<elemsA.length;i++) {
elemsA[i].onclick = transferir;}
function transferir() {
return confirm('Ud. va a ser transferido de url hacia ' + this.href);
}
</script>

En este caso usamos una asignacin a la funcin. Tener en cuenta que no escribimos elemsA[i].onclick =
transferir();} porque esto dara lugar a que se ejecutar la funcin (invocacin). Al escribir la asignacin
sin parntesis la funcin queda asignada pero no se ejecuta.

Finalmente tenemos una alternativa ms lgica que nos permite no tener que poner el script despus
del cdigo HTML. La idea es la siguiente: el evento onload nos informa de cundo se ha completado la
carga de la pgina web. En ese momento dispararemos una funcin que se encargar de introducir los
manejadores de eventos que queramos. Como en el momento en que se dispara la funcin la carga de

aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.

la pgina ya se ha realizado, no es necesario que el cdigo JavaScript para realizar este proceso quede
debajo del cdigo HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function () {
var elemsA = document.getElementsByTagName('a');
for (var i=0;i<elemsA.length;i++) {
elemsA[i].onclick = transferir;}
function transferir() { return confirm('Ud. va a ser transferido de url hacia ' + this.href);}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<a href="http://aprenderaprogramar.com">Aprende a programar.</a>
<a href="http://aprenderaprogramar.es">Intntalo, ser divertido.</a>
</body>
</html>

Recordar que al escribir window.onload = algo(); la funcin algo() se ejecutar porque mediante esta
instruccin estamos indicando que esa funcin debe ejecutarse cuando se produzca el evento onload
sobre el objeto window.

Por ejemplo window.onload = alert ('La pgina ha terminado de cargar'); nos permite mostrar un
mensaje de alerta advirtiendo de que la pgina ha terminado de cargar.

EJERCICIO

A partir del siguiente cdigo HTML, crea un script que cumpla los requisitos indicados ms abajo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head><title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
</head>
<body> <p><a href="principal.html" title="Pgina principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aqu presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un beb.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versin del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.

a) Mediante el control de los eventos onmouseover y onmouseout, debemos hacer que cuando el
usuario pase el ratn sobre las etiquetas h1 y h3, el color del texto pase a ser orange y cuando deje de
pasarlo el texto quede en marrn.

b) Mediante el control del evento onmouseover, debemos hacer que cuando el usuario pase el ratn
sobre un prrafo, el color de fondo del prrafo sea amarillo y cuando deje de pasarlo no haya color de
fondo.

c) El cdigo JavaScript debe estar situado entre las etiquetas <head> </head>

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01158E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
addEventLisstener JavaScriipt. Bubbling o burbujeo de evventos.

ADDEVEN
NTLISTENER JAVASCRIPT
J T

Pueden seer objetivos (target) de eventos el objeto

o windo
ow, el objeto documentt y todos loss nodos de
tipo Elem
ment de un documento o HTML. Tod dos estos objetos
o dispo
onen de un
n mtodo predefinido
denominaado addEven ntListener() que
q permite agregarles uno,
u dos o ms manejado
ores de eventos.

La sintaxiss a emplear para addEveentListener es bsicamen

nte la siguiente:

nodoObjettivo.addEven
ntListener ("nombreDeEvventoSinPreffijo", funcion
nAEjecutar,
paramettroBooleanoO
Opcional)

Donde no odoObjetivo ser un nod do que habremos obten

nido con un mtodo co omo getElem mentById
similar, no
ombreDeEveentoSinPrefijjo es el nombre del even
nto sin el preefijo on, por eejemplo clickk (en lugar
de onclickk como se esscribira tradiicionalmentee).

funcionAEEjecutar es laa funcin que se ejecutarr cuando se

e produzca el evento.

Finalmentte, el parmetroBoolean noOpcional especifica

e si el
e evento deebe ser captu urado (true) o no debe
serlo (falsse, que es el
e valor que se aplica por
p defecto si no se esp pecifica estee parmetro. El tercer
parmetro no lo espeecificaremoss, o lo harem
mos como faalse. El motivvo por el qu ue se encuen ntra ah es
ms histrico que unaa necesidad real
r y no vammos a detene ernos a hablaar sobre estee parmetro.

Veamos un
u ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<script tyype="text/javasscript">
window.o onload = functio
on () {
var elemssH = document.querySelectorA All("h1, h2, h3, h4, h5, h6");
for (var i==0;i<elemsH.len
ngth;i++) {
elemsH[i]].addEventListeener("mouseovver", cambiarCo olor1);
elemsH[i]].addEventListeener("mouseou ut", cambiarColo or2);}
function cambiarColor1(
c () { this.style.co
olor = 'orange';}}
function cambiarColor2(
c () { this.style.co
olor = 'brown';}
}
</script>
</head>
<body><p p><a href="prin
ncipal.html" titlle="Pgina prin ncipal" >Ir a la pagina
p principall</a></p>
<h1>Novedades</h1><p p>Aqu presenttamos las noved dades del sitio.</p>
<h3>Lanzzamos el producto X-FASHION</h3>
<p>Este producto
p permite estirar la pieel hasta dejarla como la de un beb.</p>

aprenderraprogramar.co
om, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.

<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>

<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versin del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>

El resultado esperado es que cuando se pase el mouse por encima de un elemento de ttulo <h1>, <h2>,
etc. el color cambie a naranja. Una vez el mouse deja de estar encima del elemento, el color del texto
cambiar a marrn. Ten en cuenta que en algunos navegadores antiguos el cdigo puede que no
funcione.

PALABRA CLAVE THIS

Recordar que dentro de la funcin de respuesta a un evento, la palabra clave this hace referencia al
elemento que es quien recibe (objetivo o target) el evento. En el ejemplo anterior vemos un ejemplo
con el cdigo this.style.color = 'orange'; que se encarga de cambiar el color del texto del elemento
HTML donde se ha generado el evento.

REMOVEEVENTLISTENER

Al igual que podemos aadir manejadores de eventos con addEventListener, podemos eliminarlos con
removeEventListener, cuya sintaxis bsica es la siguiente:

nodoObjetivo.removeEventListener ("nombreDeEventoSinPrefijo", funcionAEjecutar,

parametroBooleanoOpcional)

Donde los parmetros tienen el mismo signficado que con addEventListener.

Un ejemplo nos aclarar las ideas. En este caso, vamos a plantear una variante del cdigo de ejemplo
que vimos para addEventListener. Ese cdigo daba lugar a que cuando el usuario pasaba el ratn sobre
un elemento de tipo ttulo <h1>, <h2>, el texto tomara color naranja, y cuando dejara de estar
encima de ese elemento tomara color marrn. Pero al repetirse el paso por un elemento que estaba en
color marrn, volva a ponerse naranja porque los manejadores de eventos seguan actuando de la
misma manera. Una forma de anular ese cambio de color es eliminar los manejadores de eventos
despus de que el texto haya cambiado a color marrn. Al anular los manejadores de eventos, una vez
el texto toma el color marrn, quedar ya en ese color definitivamente. El cambio a introducir es en la
funcin cambiarColor2, dejando el cdigo como sigue:

aprenderaprogramar.com, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.

function cambiarColor2() { this.style.color = 'brown';

this.removeEventListener("mouseover", cambiarColor1);
this.removeEventListener("mouseout", cambiarColor2);
}

ATTACHEVENT() Y DETACHEVENT()

Estos mtodos fueron usados en el pasado por algunos navegadores como equivalentes a
addEventListener y removeEventListener. Desde el momento en que todos los navegadores modernos
soportan los mtodos addEventListener y removeEventListener, estos mtodos no deben ser usados
excepto en casos muy concretos en que tengamos que resolver situaciones muy especficas.

PROPAGACIN DE EVENTOS. BUBBLING.

Ya hemos indicado que ciertas acciones del usuario generan varios eventos simultneos. Por ejemplo si
tenemos una imagen dentro de un div, y tenemos definida la captura del evento click para ambos,
cuando se hace click sobre la imagen se producen en realidad dos eventos: el evento click sobre la
imagen y el evento click sobre el div.

La propagacin se dice que consta de varias fases: la captura sobre los elementos que sufren el evento
detectada por el navegador (que va desde fuera del DOM hacia dentro), el envo del evento al
manejador del evento (donde el evento es enviado como un objeto), y el burbujeo, que da lugar a la
ejecucin del cdigo de respuesta asociado al evento (que va desde dentro del DOM hacia fuera).

El comportamiento que secuencia la ejecucin del cdigo de respuesta con un orden determinado se
llama bubble o burbujeo, de modo que desde el elemento ms interior del DOM se va ejecutando
la respuesta al evento y seguidamente se va expandiendo la ejecucin hacia los elementos ms
externos. En nuestro ejemplo, se ejecutara en primer lugar la respuesta al evento sobre la imagen por
estar dentro del div, y a continuacin la respuesta el evento sobre el div. El burbujeo continua sobre
todos los elementos del DOM hasta llegar a document y al objeto global window.

Casi todos los eventos burbujean, pero algunos eventos no lo hacen. Por ejemplo el evento focus
(onfocus, obtener el foco un campo input) no lo hace. Algunos eventos tienen un burbujeo especial, por
ejemplo el evento load (onload, carga de un elemento) burbujea hasta el elemento document, pero no
alcanza al elemento window.

QU FORMA DE INTRODUCIR MANEJADORES DE EVENTOS ES MEJOR?

Hemos visto tres maneras diferentes de introducir manejadores de eventos: en lnea dentro del cdigo
HTML, como propiedades de nodos del DOM y a travs de la funcin addEventListener. Cul es mejor?

aprenderaprogramar.com, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.

Haremos las siguientes consideraciones:

- Introducir los manejadores de eventos en lnea es simple pero tiene inconvenientes serios: no separa
la estructura de la pgina web (HTML) del cdigo JavaScript. Esto dificulta el mantenimiento del cdigo
y se considera una prctica no adecuada. Por otro lado, se generan conflictos de nombres.

- Introducir manejadores de eventos como propiedades puede resultar adecuado, pero cuando hay que
introducir varios manejadores para un mismo evento puede oscurecer (hacer ms difcil de leer) el
cdigo. Por ejemplo para introducir dos manejadores para el evento onclick escribiramos
element.onclick = function () {dispararA(); dispararB()}.

- Introducir manejadores de eventos a travs de addEventListener, a pesar de que ha tenido algunos

problemas de compatibilidad en el pasado, es un modo que se est estandarizando y se considera
tambin adecuado.

EJERCICIO

Crea un documento HTML donde dentro del elemento body tengamos un div con id principal, dentro
de principal otro div denominado secundario, y dentro de secundario otro div con id terciario.
Dentro de terciario debe existir un prrafo con el texto: Ejemplo de bubbling (burbujeo). Aade
eventListeners con el evento click para los prrafos y todos los elementos div, document y window, y
una funcin de respuesta comn para todos ellos que emita el mensaje de alerta <<Soy un nodo tipo
NombreDelNodo y estoy burbujeando>>.

Ejemplo: al hacer click sobre el texto <<Ejemplo de bubbling (burbujeo)>> debern empezar a
aparecernos mensajes como: Soy un nodo tipo P y estoy burbujenado. Soy un nodo tipo DIV y estoy
burbujeando. Soy un nodo tipo DIV y estoy burbujeando

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01159E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Lista de eve
entos JavaScrip
pt. onclick, onm
mouseover, onm
mouseout

LISTA DE EVENTOS JA
AVASCRIPT

Ya sabem
mos cmo a adir manejaadores de eventos
e paraa ejecutar un n fragmentoo de cdigo JavaScript
cuando teenga lugar un determinado evento. Pero,
P culess son los eveentos recono
ocibles? cuntos hay?
cmo poodemos sabeer sus nombrres? A qu elementos HTML
H son applicables?

Estas preguntas que a priori parrecen sencilllas, en realidad son com

mplicadas dee responderr debido a
diversos motivos
m com
mo:

a) El nm
mero de eventos recono ocibles se esst ampliand
do constanteemente. Iniccialmente haaba 6 u 8
eventos reconocibles,
r , luego fuero
on 15 20, luego 50 60, luego 1000 120 PPor tanto noo podemos
nta de cuntos eventos existen,
responder a la pregun e porq
que el nmerro de evento
os reconociblles cambia
con frecuencia.

b) Algunoos eventos s
lo son recon
nocidos por algunos
a nave
egadores pero no por ottros. Nosotro
os vamos a
tratar de centrarnos en
e los eventoos que son reeconocidos por
p todos loss navegadorees.

c) No exisste un organismo nico encargado

e dee definir los eventos recoonocibles, siino varios. Ess decir, los
eventos con
c los que puede
p trabajar un navegaador son el resultado
r dee la definicin
n de eventoss realizada
por difereentes especiificaciones oficiales
o (DOM, HTML5, CSS Animations, especificaciones oficiales de
diversas APIs,
A etc.) qu
ue van siendoo integradas en los naveggadores.

Por tantoo ms que prretender con nocer todos los eventos y en base a ello escribir nuestro c digo, ms
bien debeemos pregun ntarnos qu es lo que queremos hacer y en basse a ello busscar el eventto que nos
permite hacerlo.
h Una vez localizado el evento o, deberemo os documentarnos en internet para comprobar
c
cul es la compatibilid
dad con los distintos
d navvegadores. Recomendam mos usar slo
o aquellos evventos que
tengan coompatibilidadd contrastad
da en la mayo ora de los naavegadores.

La siguiennte lista por tanto slo

o pretende ser orientattiva de los eventos dissponibles de
e uso ms
habitual.

Son eventtos que se usan con muccha frecuenccia onload, para

p realizar acciones un
na vez termin
na la carga
de la pggina web, ass como onclick, onmouseover, onm mouseout paara control dde la apariencia de la
pgina weeb segn po or donde passe el usuario
o el ratn (m nchange, onssubmit y onreset para
mouse), y on
control dee los formulaarios.

Tener en cuenta que no todos loss eventos haacen bubbling y no todoss tienen accin por defecto, o si la
tienen, no
o para todo
os puede serr evitada. Cuuando trabaajemos con un evento ees convenien nte buscar
documenttacin adicio
onal sobre su
u comportammiento y resp
puesta en loss distintos naavegadores.

aprenderraprogramar.co
om, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout

LISTA DE EVENTOS JAVASCRIPT

Nombre con prefijo on

Tipo de evento Descripcin aprenderaprogramar.com
(eliminar cuando proceda)

onclick Click sobre un elemento

ondblclick Doble click sobre un elemento

onmousedown Se pulsa un botn del ratn sobre un elemento

El puntero del ratn entra en el rea de un

onmouseenter
elemento
El puntero del ratn sale del rea de un
onmouseleave
elemento

Relacionados con el El puntero del ratn se est moviendo sobre el

onmousemove
ratn rea de un elemento
El puntero del ratn se sita encima del rea de
onmouseover
un elemento
El puntero del ratn sale fuera del rea del
onmouseout
elemento o fuera de uno de sus hijos
Un botn del ratn se libera estando sobre un
onmouseup
elemento
Se pulsa el botn derecho del ratn (antes de
contextmenu
que aparezca el men contextual)
El usuario tiene pulsada una tecla (para
onkeydown
elementos de formulario y body)
El usuario pulsa una tecla (momento justo en
Relacionados con el
onkeypress que la pulsa) (para elementos de formulario y
teclado
body)
El usuario libera una tecla que tena pulsada
onkeyup
(para elementos de formulario y body)
onfocus Un elemento del formulario toma el foco

onblur Un elemento del formulario pierde el foco

onchange Un elemento del formulario cambia

Relacionados con
El usuario selecciona el texto de un elemento
formularios onselect
input o textarea
Se pulsa el botn de envo del formulario (antes
onsubmit
del envo)
onreset Se pulsa el botn reset del formulario

aprenderaprogramar.com, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout

Nombre con prefijo on

Tipo de evento Descripcin aprenderaprogramar.com
(eliminar cuando proceda)

onload Se ha completado la carga de la ventana

Relacionados con
onunload El usuario ha cerrado la ventana
ventanas o frames
onresize El usuario ha cambiado el tamao de la ventana

Relacionados con
animationend, animationiteration, animationstart, beginEvent, endEvent,
animaciones y
repeatEvent, transitionend
transiciones

Relacionados con la
batera y carga de la Chargingchange, chargingtimechange, dischargingtimechange levelchange
batera

Relacionados con
alerting, busy, callschanged, connected, connecting, dialing, disconnected,
llamadas tipo
disconnecting, error, held, holding, incoming, resuming, statechange
telefona

DOMAttrModified, DOMCharacterDataModified, DOMContentLoaded,

Relacionados con DOMElementNameChanged, DOMNodeInserted,
cambios en el DOM DOMNodeInsertedIntoDocument, DOMNodeRemoved,
DOMNodeRemovedFromDocument, DOMSubtreeModified

Relacionados con
arrastre de
drag, dragend, dragenter, dragleave, dragover, dragstart, drop
elementos (drag and
drop)

audioprocess, canplay, canplaythrough, durationchange, emptied, ended,

Relacionados con
ended, loadeddata, loadedmetadata, pause, play, playing, ratechange, seeked,
video y audio
seeking, stalled, suspend, timeupdate, volumechange, waiting, complete

Relacionados con la
disabled, enabled, offline, online, statuschange, connectionInfoUpdate
conexin a internet

Otros tipos de Hay ms tipos de eventos: relacionados con la pulsacin sobre pantallas, uso
eventos de copy and paste (copiar y pegar), impresin con impresoras, etc.

Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender
ahora el significado de cada uno de ellos. Simplemente ten unas nociones bsicas que te permitan
resolver los retos que como programador te puedan ir surgiendo.

aprenderaprogramar.com, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout

EJERCICIO 1

Crea un documento HTML que conste de un ttulo h1 con el texto <<La web para aprender
programacin>>, dos prrafos de texto y una imagen. Utiliza los eventos onmouseover para que la
imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratn sobre ella. Utiliza el
evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer
la imagen original.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea un documento HTML que conste de un ttulo h1 con el texto <<La web para aprender
programacin>>, dos prrafos de texto y un formulario con los campos nombre, apellidos, edad y
correo electrnico, as como con botones enviar y cancelar. Utiliza el evento onsubmit y otras
herramientas para impedir que se enve el formulario si se produce alguna de estas circunstancias:

a) El nombre est vaco el correo electrnico est vaco.

b) El correo electrnico no contiene los smbolos @ (arroba) y . (punto). Por ejemplo juan arroba
gmail.com no es un correo vlido.

c) No existe al menos una letra precediendo el smbolo @ del correo electrnico y una letra despus de
este smbolo. Por ejemplo [email protected] no es un correo vlido.

d) No existen al menos dos letras despus del punto en el correo electrnico. Por ejemplo [email protected]
no es un correo vlido.

e) La edad es cero o menor de cero.

En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color
distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinmicamente)
cuando el campo que tena un problema tome el foco (para ello usa el evento onfocus).

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01160E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objeto Even
nt. Informacin
n del evento. tyype, target, tim
meStamp

OBJETO EVENT.
E INFORMACIN DEL
D EVENTO.

Podemos aadir man nejadores dee eventos a los elementtos del DOM M y hacer quue exista uno o varios
manejadoores de eveentos para gestionar laa respuesta ante dicho o evento. AAdems en ocasiones
necesitareemos informmacin relacionada con ele evento: po or ejemplo ene qu coord denadas de la pantalla
se ha hecho click, o qu
u tecla ha sido pulsada. Para ello JavvaScript disp
pone del objeeto Event.

El objeto Event es un objeto pred

definido de JavaScript qu
ue almacena informacin n sobre un evento y es
pasado, para
p cada evvento que tieene lugar, co
omo argume ento a la funcin o funciones que ge
estionan el
evento.

Las propiedades y mtodos

m del objeto Even nt presentan n la misma problemtica que los eventos
e en
relacin a la estandarrizacin y compatibilidad d entre naveggadores. No todos los naavegadores reconocen
r
la misma informacin n en el objetoo Event. Tam mbin las proopiedades deel objeto Eveent se estn ampliando
a
continuammente, con loo cual es difcil decir qu cantidad dee propiedadees (informaciin) est disp
ponible en
mbin no exxiste una nica especificaacin oficial de propiedaades del objeto Event.
el objeto Event. Y tam
Nosotros intentaremos abstraern nos de esa situacin y centrarnos en comprender los co onceptos y
conocer las propiedades y mtodos del objeeto event ms m usados y estandarizaados. Comprendiendo
esto, cuan
ndo necesiteemos alguna informacin n especfica podremos
p buuscar informacin para resolver un
problemaa concreto. Esta
E es una mejor
m estrateegia que trattar de conocer de antemmano y tener un listado
preciso dee propiedadees y mtodos del objeto Event.

Las propieedades y mtodos del objeto

o Eventt se resumen Veremos su aplicacin
n en la siguieente tabla. V
prctica en
e el cdigo de
d ejemplo que
q incluimo os posteriorm
mente:

Tip
po Nombre Descrripcin aprenderaprograamar.com

type Devuelve el tipo de

e evento prod
ducido, sin el p
prefijo on (p.e
ej. click)

Propiedaddes de target Devuelve el elemento del DOM que dispar eel evento (iniccialmente)
control deel
evento Devuelve el elemmento del DOOM que est disparando el evento
currentTargget actuaalmente (no nesariamente
n el elemento que dispar el evento,
ya qu
ue puede ser un
u disparo deb
bido a burbujeeo)

Otras evventPhase (inndica en qu fase de traatamiento dee evento estaamos, 1 capttura, 2 en

objetivo, 3 buurbujeo), bubbles (boolean na, indica si es un eventoo que burbujjea o no),
propiedaddes de
caancelable (bo
ooleana, devuelve si el evento viene segguido de una accin predeterminada
control deel
que puede seer cancelada)), cancelBubb ble (booleanaa, devuelve ssi el evento actual se
evento propagar haciia arriba en la jerarqua del DOM o no).

Propiedad
d Devuelve una meddida de tiemp
po en milisegundos desde un origen
timeStamp
temporal temp
poral determin
nado.

aprenderraprogramar.co
om, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp

Tipo Nombre Descripcin aprenderaprogramar.com

Devuelven las coordenadas en que se encontraba el puntero del

ratn cuando se dispar el evento. Las coordenadas estn referidas
clientX, clientY
a la esquina superior izquierda de la ventana del navegador y se
expresan en pixeles.

Devuelven las coordenadas en que se encontraba el puntero del

Propiedades de ratn cuando se dispar el evento. Las coordenadas estn referidas
screenX, screenY
localizacin del a la esquina superior izquierda de la pantalla y se expresan en
puntero del ratn pixeles.

Devuelven las coordenadas en que se encontraba el puntero del

ratn cuando se dispar el evento. Las coordenadas estn referidas
pageX, pageY a la esquina superior izquierda del documento, que pueden ser
distintas a las de la ventana si el usuario ha hecho scroll sobre el
documento.

Normalmente empleado para el evento mouseup (liberacin de

Propiedad para botn del ratn) para detectar cul ha sido el botn pulsado.
detectar el botn button Contiene un valor numrico: 0 para click normal (botn izquierdo), 1
del ratn pulsado para botn central (botn en el scroll), 2 para botn auxiliar (botn
derecho).

Propiedades Para determinar

relacionadas con qu tecla ha sido Lo estudiaremos por separado en la siguiente entrega del curso
el teclado pulsada

Propiedades
Algunas no
relacionadas con dataTransfer, dropEffect, effectAllowed, files, types
estandarizadas
drag and drop

Otras x, y, layerx, layery, offsetX, offsetY, wheelDelta, detail, relatedNode,

Otras (algunas no
propiedades relatedTarget, view, attrChange, attrName, newValue, prevValue,
estandarizadas)
varias data, lastEventId, origin, source

Mtodo stopPropagation() Detiene la propagacin del evento

Cancela (si es posible) la accin de defecto que debera ocurrir

Mtodo preventDefault()
despus del evento (equivale a return false para cancelar la accin).

Otros mtodos initEvent(a, b, c) se usa para definir eventos. No lo estudiaremos.

EJEMPLO CON TRATAMIENTO DE MANEJADORES DE EVENTOS COMO PROPIEDADES

Escribe este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var tiempoAnterior;

aprenderaprogramar.com, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp

function ejemploJS1 (evobject) {

alert ('La funcin de gestin ha recibido objeto Event con tipo: ' + evobject.type);
evobject.target.style.color = 'red'; //Cambiamos el color si se ha producido el evento
if (tiempoAnterior) {
alert('Han transcurrido ' + (evobject.timeStamp-tiempoAnterior)/1000 +' segundos desde el click anterior');}
tiempoAnterior = evobject.timeStamp;
}
function ejemploJS2 (evobject) {alert ('Haz hecho doble click!'); evobject.target.style.color = 'red';}
window.onload = function() {
document.getElementById('pulsador1').onclick = ejemploJS1;
document.getElementById('pulsador2').ondblclick = ejemploJS2;}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="pulsador1" > Haz click aqu </div>
<div style="color:blue;" id ="pulsador2" > Haz doble click aqu </div>
</body>
</html>

El resultado esperado es que cuando se haga click sobre el texto Haz click aqu se muestre el mensaje:
La funcin de gestin ha recibido objeto Event con tipo: click. Adems si es la segunda o posterior vez
que se hace click aparecer el tiempo que ha pasado desde el anterior click, por ejemplo: Han
transcurrido 5.117 segundos desde el click anterior.

En caso de hacerse doble click sobre el texto Haz doble click aqu, se espera que aparezca el mensaje
Haz hecho doble click!

Del cdigo anterior podemos destacar lo siguiente:

evobject.target nos devuelve el elemento HTML que dispar el evento. Valindonos de esto,
cambiamos el color del texto justo despus de mostrar los mensajes correspondientes.

Hemos escrito function ejemploJS1 (evobject) donde evobject representa el objeto Event que se recibe
y que es un argumento que se pasa automticamente cuando se invoca la funcin al dispararse el
evento. El nombre de este argumento es el que nosotros decidamos, es decir, podemos llamarlo
evobject, eventoDatos, miEvento u objetoRepresentaEvento, etc., segn prefiramos. Incluso podramos
escribir function ejemploJS1 (), en este caso no podramos recuperar informacin del evento ya que
para hacerlo necesitamos hacerlo incluyendo un parmetro en la funcin.

La funcin que detecta el evento click es distinta de la que gestiona el evento dblclick Podra ser la
misma? Esta pregunta tiene dos respuestas: si la pregunta se refiere a si una funcin puede gestionar
varios eventos distintos la respuesta es s. Si la pregunta es si una funcin puede distinguir si se ha
hecho click o se ha hecho doble click la respuesta es, inicialmente, que no es fcil. Decimos que
inicialmente que no es fcil porque entre los eventos click y dblclick hay una dificultad especial que no
existe entre otro tipo de eventos. La dificultad radica en que el evento click es parte o comienzo del
evento dblclick. Por ello no es evidente cmo diferenciar entre dos clicks y un doble click, o cmo
detener la ejecucin de la respuesta a click cuando se hace doble click. En realidad, es posible que una
funcin diferencie entre click y doble click basndonos en el intervalo de tiempo que transcurre, pero
esto requiere un poco ms de cdigo y de momento no vamos a detenernos a estudiarlo.

aprenderaprogramar.com, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp

EJEMPLO CON TRATAMIENTO DE MANEJADORES DE EVENTOS COMO ATRIBUTOS

En este caso la diferencia radica en que al indicar el atributo del elemento HTML debemos pasar como
argumento event. La sintaxis es:

onNombreDelEvento = "nombreFuncion(event)"

Donde event representa el objeto Event que se pasa a la funcin. Por ejemplo podramos escribir
onmousedown="showCoords(event)" que indica que cuando se pulse un botn del ratn sobre el
elemento que recibe el evento, debe ejecutarse la funcin showCoords, que recibir el objeto Event
con la informacin correspondiente gracias a que indicamos <<event>> como parmetro que se le pasa
a la funcin.

INFORMACIN SOBRE EVENTOS DEL TECLADO

La informacin sobre eventos del teclado la abordaremos en la prxima entrega del curso.

EJERCICIO

Crea un documento HTML que conste de un ttulo h1 con el texto <<Posicin x: - Posicin y>>, y un div
con ancho 500 px y alto 400 px. Utiliza el evento onmouseover para mostrar dinmicamente en el ttulo
h1 las coordenadas del puntero del ratn a medida que se desplaza por el elemento div.

Por ejemplo, cuando el usuario coloca el ratn sobre el div se deber mostrar: Posicin x: 244 Posicin
y: 188, al mover el ratn las coordenadas indicadas cambiarn a otro valor, por ejemplo Posicin x: 322
Posicin y: 228, y as sucesivamente.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01161E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Eventos de teclado JavaSccript. keyCode. which. fromCh
harCode

EVENTOS DE TECLADO
O E INFORM
MACIN RELA
ACIONADA

Los eventtos de teclaado han ressultado hist ricamente difciles de trabajar coon JavaScriptt. Algunos
especialisstas han llam
mado a esto el caos de JavaScript en el manejo de eventos de teclado. Vamos a
v los aspecctos clave relacionados con
tratar de ver c la gestinn de eventoss de teclado..

Los eventos de teclaado presenttan especiall dificultad debido a que q existen diferentes juegos de
caracteres, diferentess sistemas operativos,
o d
diferentes configuracion
c nes de teclaado, teclas especiales,
e
caracteres no visibless, caracteress que se obttienen mediiante pulsacin de dos teclas y porr supuesto
diferentess idiomas qu
ue tienen carracteres no comunes
c con
n otros idiom
mas.

A pesar de todo, no n debera ser difcil determinar

d qu tecla ha sido pulsada y sin embargo
histricam
mente s ha sido difcil, lo cual es pooco entendibble en una poca
en quee la tecnologga inunda
nuestras vidas. Estass dificultadees han provenido principalmente de d la falta d de acuerdo entre los
fabricantees de los disttintos navegadores para alcanzar una estandarizacin adecuada. Hoy daa podemos
decir que esta falta dee estandarizaacin est en vas de ressolverse (porr fortuna no nos enfrentaamos a las
incompatibilidades qu ue existan hace tan solo unos pocos aos).

Hemos dee tener en cu

uenta que exxisten tres evventos distin
ntos relacionados con pulsar una teclla. Cuando
pulsamos una tecla se
s producen n tres eventtos, que enuunciados por orden son n: keydown, keypress,
keyup. Lo
os eventos keydown
k y keyup podeemos traducirlos como la tecla baja y la tecla sube,
mientras que keypress sera la teecla es pulsad
da.

Hay dos tipos de cdiggos diferentes: los cdiggos de teclad do (que repreesentan la teecla del teclaado que ha
sido pulsaada, tecla fssica) y los cdigos de carracteres (nm
mero asociad do a cada caarcter, seg n el juego
de caracteeres Unicodee). Tener en cuenta que desde el punto de vista de qu teclaa fsica ha sid do pulsada
es lo mism
mo escribir una
u a que un na A, ya que en ambos caasos pulsamo os la misma tecla en el teclado. En
cambio deesde el puntto de vista del carcter, a es un carccter y A es otro
o carcterr diferente (yy cada uno
tiene su cdigo
c numrico diferentte).

Para cadaa evento de teclado

t las propiedades
p del objeto Evvent relacion
nadas con el teclado pue
eden tener
distinto signficado, po
or ello hemo os de atenerrnos a unas reglas
r para poder
p operar con seguridad. Estas
reglas son
n recomendaaciones (nuestras), no se trata de regglas de obligaado cumplimmiento:

Regla 1: para deterrminar el caarcter resuultado de laa pulsacin de una tecla simple o de una
combinaccin de teclas usaremos el evento keeypress (no los eventos keydown
k ni keyup), dete
erminando
la tecla pu
ulsada con laa propiedad wich
w del objeeto event.

Regla 2: para determminar si ha sido

s pulsadaa una tecla no imprimib ble (como flecha de currsor, etc.),
usaremoss el evento keyup, determ
minando la tecla
t pulsadaa con la prop ode (cdigo de la tecla
piedad keyCo
fsica).

aprenderraprogramar.co
om, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode

Regla 3: no intentes controlar todo lo que ocurre con el teclado (porque quizs te vuelvas loco).
Controla nicamente aquello que sea necesario y til.

Tener en cuenta que hay algunas teclas no imprimibles que no generan evento keypress, sino
nicamente eventos keydown y keyup. En cambio, algunas teclas no imprimibles s generan evento
keypress.

RECUPERAR UN CARCTER A PARTIR DE SU CDIGO NUMRICO

Cada carcter tiene un cdigo numrico. Guindonos por el juego de caracteres Unicode los cdigos
numricos son 65 para la letra A (mayscula), 66 para la letra B, , 97 para la letra a (minscula). Teclas
especiales como ENTER tambin tienen asignados cdigos numricos: 13 para ENTER, 37 flecha
izquierda del cursor, 38 flecha arriba del cursor, 39 flecha derecha del cursor, 40 flecha derecha del
cursor, etc.

Para recuperar el carcter asociado a un cdigo usaremos un mtodo esttico del objeto predefinido
String, con la siguiente sintaxis:

String.fromCharCode(num1, num2, ..., numN);

Donde num1, num2, , numN son los cdigos numricos a convertir. Si escribimos por ejemplo
alert(String.fromCharCode(97,98,99)); obtendremos como resultado <<abc>>

PROPIEDADES Y MTODOS DEL OBJETO EVENT RELACIONADOS CON TECLADO

Las propiedades y mtodos del objeto Event relacionados con el teclado se resumen en la siguiente
tabla. Veremos su aplicacin prctica en el cdigo de ejemplo que incluimos posteriormente:

Tipo Nombre Descripcin aprenderaprogramar.com

Contiene el valor booleano true si la tecla ALT estaba pulsada

altKey
cuando se produjo el evento, o false en caso contrario.

Propiedades Contiene el valor booleano true si la tecla CTRL estaba pulsada

ctrlKey
relacionadas cuando se produjo el evento, o false en caso contrario.
con el
Contiene el valor booleano true si la tecla SHIFT estaba pulsada
teclado shiftKey
cuando se produjo el evento, o false en caso contrario.

Devuelve el cdigo del carcter unicode generado por el evento

charCode
keypress. Se recomienda usar wich en lugar de charCode.

aprenderaprogramar.com, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode

Tipo Nombre Descripcin aprenderaprogramar.com

Devuelve el cdigo de tecla pulsada para eventos keydown y

keyCode
keyup

Devuelve el cdigo del carcter unicode generado por el evento

wich
keypress.

Otras
data, metakey
propiedades

Otras
propiedades no altLeft, ctrlLeft, shiftLeft, isChar
estandarizadas

EJEMPLO: TRABAJANDO CON EVENTOS DE TECLADO

Escribe el siguiente cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var eventoControlado = false;
window.onload = function() { document.onkeypress = mostrarInformacionCaracter;
document.onkeyup = mostrarInformacionTecla; }
function mostrarInformacionCaracter(evObject) {
var msg = ''; var elCaracter = String.fromCharCode(evObject.which);
if (evObject.which!=0 && evObject.which!=13) {
msg = 'Tecla pulsada: ' + elCaracter;
control.innerHTML += msg + '-----------------------------<br/>'; }
else { msg = 'Pulsada tecla especial';
control.innerHTML += msg + '-----------------------------<br/>';}
eventoControlado=true;
}
function mostrarInformacionTecla(evObject) {
var msg = ''; var teclaPulsada = evObject.keyCode;
if (teclaPulsada == 20) { msg = 'Pulsado caps lock (act/des maysculas)';}
else if (teclaPulsada == 16) { msg = 'Pulsado shift';}
else if (eventoControlado == false) { msg = 'Pulsada tecla especial';}
if (msg) {control.innerHTML += msg + '-----------------------------<br/>';}
eventoControlado = false;
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo JavaScript: pulse una
tecla</h3></div>
<div id="control"> </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode

El resultado esperado es que al pulsar una tecla como a b se muestre por pantalla Tecla pulsada: a-----
------------------------ Tecla pulsada: b-----------------------------, o que al pulsar shift se muestre Pulsado shift--
---------------------------, o Pulsada tecla especial para otras teclas especiales.

Ten en cuenta lo siguiente:

Se controla si el evento ha sido detectado con keypress mediante la variable booleana

eventoControlado. Si el evento ha sido detectado con keypress, no lo tratamos con keyup (evento que
tiene lugar despus de keypress). De esta forma tratamos de distinguir, de forma aproximada, entre
teclas especiales y normales.

Podran existir algunas divergencias entre diferentes navegadores o diferentes computadores

(diferentes teclados).

Este cdigo trata de ser un ejemplo de cmo trabajar con eventos de teclado, pero puedes crear tus
propios trucos para trabajar con el teclado, o usar trucos o bibliotecas creadas por otros programadores
que estn disponibles en internet.

EJERCICIO 1

Crea un documento HTML que conste de un ttulo h1 con el texto <<Pulsa una tecla>>, y un div central
de 400 por 400 px con el borde marcado y mrgenes de 100px en todas direcciones. Utiliza el evento
keypress para determinar el carcter que el usuario ha escrito utilizando el teclado y haz que se
muestre dentro del div con un tamao de fuente de 250px.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea un documento HTML que conste de un ttulo h1 con el texto <<Pulsa una flecha>>, y un div central
de 300 por 300 px con borde color negro, color de fondo amarillo y mrgenes de 200px en todas
direcciones. Inicialmente el cuadrado que define el div debe estar alineado en el centro de la ventana.
Utiliza el evento keyup para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando
CSS haz que el cuadrado que define el div se desplace 20px en la direccin de flecha elegida por el
usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la
ventana, hacia la derecha. Para comprobar si tus respuestas y cdigo son correctos puedes consultar en
los foros aprenderaprogramar.com.

Prxima entrega: CU01162E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objeto Date
e JavaScript. ge
etFullYear, getM
Month, getDate
e.

OBJETO DATE
D JAVASC
CRIPT

Con frecuuencia cuand do creamos webs o ap pps tenemoss que trabajjar con fech has y calend darios. Por
ejemplo en
e la pgina web
w de un hotel
h o un resstaurante ess posible quee trabajemoss con fechas y horas de
comienzo o de reserva, de fin de resserva, etc. JaavaScript dispone del objjeto predefin
nido Date paara facilitar
el trabajo con fechas.

El manejo o del tiemppo es un aspecto contro overtido en la programaacin. La primera dificulltad y ms

obvia es que existen n cientos de dispositivoss electrnico os y no toddos manejan n la misma fecha.
f Por
ejemplo mim computad dor personall puede indiccar que hoy es lunes 25 de enero dee 2048 y la hora h es las
12:35:44 mientras qu ue el servidoor al que estoy conectad do, suponiendo que est en mi mism ma ciudad,
puede ind dicar que ho 2 de enero de 2048 y la hora es las 12:33:21. Otro servido
oy es lunes 25 or, en otro
pas, puedde indicar qu e domingo 24 de enero
ue la fecha es o de 2048 y la hora es las 23:51:15 debido
d a la
diferenciaa horaria enttre pases. Aqu,
A claro esst, nos estaaramos refirriendo a horras locales. Para
P poder
disponer de
d horas de referencia globales paraa todo el mun ndo se crearon estndarees como:

a) GMT o tiempo meedio de Greeenwich: ha sidos un estn

ndar ampliamente usado. GMT era el tiempo
medido en el observaatorio britniico de Green
nwich, que see defini commo meridianno cero de la tierra. As
cada pass poda exprresar su horra en funcin de la horra del merid diano de Greeenwich. Poor ejemplo
GMT+0 inndicaba que la hora era la misma qu ue la hora official en el meridiano
m dee Greenwich, mientras
que GMT+3 indicaba que la hora eran 3 horaas ms que en el meridiiano de Greeenwich (es decir, d si es
Greenwich eran las 099:00 en un pas cuya horaa fuera GMTT+3 seran lass 12:00).

b) UTC o tiempo univversal coordiinado: es el estndar que se ha adoptado como o referencia que indica
un tiempo nico indeependientem mente de en n qu lugar del planeta nos enconttremos, basaado en las
p distintos pases. Es ell estndar qu
medicionees de relojess atmicos distribuidos por ue se est im
mponiendo
en los sisttemas inform
mticos.

nferencia terrestre se dividi

La circun d en 242 husos horarios
h de modo que cada huso
o quedaba
referenciaado a un tiem
mpo comn (lo que se deenominaba el
e tiempo de Greenwich).

aprenderraprogramar.co
om, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

Aunque desde el punto de vista de su definicin tcnica UTC y GMT no son lo mismo, a efectos
prcticos hablar de GMT+3 es lo mismo que hablar de UTC+3.

A pesar de este gran avance, el trabajo con el tiempo sigue presentando grandes dificultades en los
sistemas informticos, tanto por la falta de sincronizacin entre dispositivos como por la disparidad en
cuanto a cmo medir el tiempo y con qu grado de precisin, existencia de horarios de verano e
invierno, etc. Por ello encontrars que es relativamente frecuente encontrar que a medida que los
lenguajes de programacin evolucionan vayan introduciendo cambios en la forma de manejar el
tiempo.

Una cuestin a tener en cuenta es que el tiempo oficial de Greenwich, tiempo GMT UTC, no se
corresponde con el tiempo local el Greenwich debido a la existencia del horario de verano. Por ejemplo,
Lisboa se encuentra en el huso horario de Greenwich, pero en verano la hora local est adelantada una
hora respecto al tiempo oficial de Greenwich por motivos de ahorro energtico. Esto da lugar a que el 5
de agosto a las 21:00 en Lisboa se corresponda con el 5 de agosto 20:00 UTC debido al horario de
verano, a pesar de que Lisboa se encuentre en el mismo huso horaria que Greenwich.

OBJETO DATE JAVASCRIPT

JavaScript nos provee de un objeto predefinido (existente) del lenguaje que podemos usar para trabajar
con fechas en nuestros scripts: el objeto Date. Este es uno de los objetos predefinidos de JavaScript, ya
que existen otros (como Math, RegExp, etc.). Adems de un objeto predefinido Date define un tipo de
dato en JavaScript.

MTODOS DEL OBJETO PREDEFINIDO DATE

El objeto Date (predefinido) nos proporciona estos mtodos:

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

Date.now() Devuelve el nmero de milisegundos transcurridos alert('Milisegundos desde 1 de enero de

desde el 1 de enero de 1970 a las 00:00:00 horas UTC 1970: '+Date.now());
hasta el instante actual UTC segn el tiempo del
sistema.

Date.parse(fecha) Transforma el String fecha en una fecha y devuelve el alert('Milisegundos desde 1 de enero de
nmero de milisegundos transcurridos desde el 1 de 1970: '+Date.parse('1970-01-
enero de 1970 a las 00:00:00 UTC hasta el instante 02T00:00:00+0000'));
actual UTC segn el tiempo del sistema. //Devuelve 86400000

Date.UTC(ao,mes, Ao y mes son obligatorios y el resto opcionales. El alert('Milisegundos desde 1 de enero de 1970
dia, hora, min, seg, ao ha de ser mayor que 1900. Los meses van de 0 a son: '+Date.UTC(1970, 0, 2, 0, 0, 0));
ms) 11 y los das de 1 a 31. Devuelve el nmero de //Devuelve 86400000
milisegundos transcurridos desde el 1 de enero de
1970 a las 00:00:00 UTC hasta el instante UTC indicado
en los argumentos.

aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

El mtodo toString() aplicado a estos mtodos devuelve un valor numrico (milisegundos).

CONSTRUCTORES DE OBJETOS TIPO DATE

Adems del objeto predefinidio Date, podemos crear objetos Date, que representan un instante en el
tiempo. Hay cuatro formas distintas de crear objetos Date (constructores):

new Date();
new Date(valorEntero);
new Date(fechaString);
new Date(ao, mes, da, hora, minuto, segundo, milisegundo);

El constructor sin parmetros crea un objeto Date donde el instante de tiempo que representa es el
tiempo del sistema en el momento de la creacin. El tiempo del sistema es el tiempo de acuerdo con
nuestro computador (sistema operativo), y no necesariamente coincidir con el de otro computador.

Si se invoca Date() sin la palabra new, se obtiene la representacin del tiempo actual del sistema. No
hay que confundir esta invocacin (que sera a una funcin que devuelve un valor de tipo Date
correspondiente al tiempo actual y que cambiar en cada invocacin) con la invocacin new Date(), que
crea un objeto Date que representa el tiempo actual, que queda almacenado en el objeto.

El constructor que recibe un valor entero crea un objeto Date cuyo instante de tiempo est definido por
los milisegundos que hayan pasado desde el origen de tiempo (el origen de tiempo en JavaScript est
fijado el 1 de enero de 1970 a las 00:00:00 horas, medianoche). Dado que un da tiene 24 horas, una
hora 60 minutos, un minuto 60 segundos y un segundo 1000 milisegundos, para representar el 2 de
enero de 1970 usaramos new Date(86400000); , donde el entero entre parntesis son los milisegundos
que contiene un da.

Ejecuta este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var capturaTiempo = new Date();
alert('capturaTiempo es ' + capturaTiempo);
var unaFecha = new Date(86400000);
alert('El valor numrico 86400000 representa la fecha '+unaFecha);
alert('Date tiempo actual es ' +Date() + ' mientras que capturaTiempo sigue valiendo'+capturaTiempo+
' y unaFecha sigue valiendo '+unaFecha);
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

El resultado esperado (ten en cuenta que puede diferir segn el navegador y sistema operativo que
ests usando) es que se muestre:

capturaTiempo es Mon Aug 11 2094 17:22:48 GMT+0100 >> El valor numrico 86400000 representa la fecha Fri Jan 02 1970 00:00:00
GMT+0000 (Hora de verano GMT) >> Date tiempo actual es Mon Aug 11 2094 17:23:31 GMT+0100 mientras que capturaTiempo sigue
valiendoMon Aug 11 2094 17:22:48 GMT+0100 y unaFecha sigue valiendo Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT)

Comprobamos que el mtodo toString() aplicado a objetos de tipo Date devuelve una representacin
como cadena de texto de la fecha.

El constructor que recibe un String crea un objeto Date a partir de una cadena de texto que representa
una fecha construida segn las formas normalizadas vlidas. Hay mltiples formas normalizadas
(europeas, norteamericanas) y algunos navegadores reconocen ms formas que otros, por lo que no
vamos a estudiar todas ellas, sino a mostrar ejemplos en una forma recomendada consistente en
indicar ao-mes-diaThh:mm+xxyy donde +xxyy indica una diferencia horaria respecto a la hora UTC,
que puede ser negativa (hora local retrasada respecto a la UTC) o positiva (hora local adelantada
respecto a la UTC).

Ejemplo Comentarios aprenderaprogramar.com

new Date ('2050-12-25T00:00:00+0000') 25 de diciembre de 2050 a las 00:00:00 horas locales, estando en una
zona horaria sin diferencia respecto a la hora UTC (Greenwich)
new Date ('2050-12-25')

new Date ('2050-12-25T00:00+0300') 25 de diciembre a las 00:00:00 horas locales estando en una zona
horaria con 3 horas de adelanto respecto a la hora UTC, por tanto
representa la fecha 24 de diciembre de 2050 a las 21:00:00 horas UTC

new Date ('2050-12-25T12:00-0600') 25 de diciembre a las 00:00:00 horas locales estando en una zona
horaria con 6 horas de retraso respecto a la hora UTC, por tanto
representa la fecha 24 de diciembre de 2050 a las 18:00:00 horas UTC

El constructor new Date(ao, mes, da, hora, minuto, segundo, milisegundo); trabaja de la misma forma
que el mtodo Date.UTC: ao y mes son obligatorios y el resto opcionales. El ao ha de ser mayor que
1900. Los meses van de 0 a 11 y los das de 1 a 31. Devuelve el nmero de milisegundos transcurridos
desde el 1 de enero de 1970 a las 00:00:00 UTC hasta el instante UTC indicado en los argumentos.
Ejemplo:

var miFecha = new Date(1970, 0, 2, 0, 0, 0);

alert('Milisegundos desde 1 de enero de 1970 son: '+(miFecha-0));

Escribimos una operacin aritmtica para forzar a que el mtodo toString devuelva el valor numrico en
lugar de una representacin del tipo << Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT)>>

aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

MTODOS GETTERS DE OBJETOS TIPO DATE

Los objetos de tipo Date disponen de estos mtodos:

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

getFullYear() Devuelve un entero de cuatro dgitos, Suponiendo que tenemos como hora local del sistema
ao correspondiente a la fecha segn el UTC-6 si ejecutamos:
tiempo local del sistema. var miFecha = new Date('2050-12-31T23:00:00-0600');
var miDia = miFecha.getFullYear(); //Tenemos 2050

getUTCFullYear() Devuelve un entero de cuatro dgitos, Independientemente de en qu zona horaria estemos si

ao correspondiente a la fecha segn el ejecutamos:
tiempo UTC. var miFecha = new Date('2050-12-31T23:00:00-0600');
var miDia = miFecha.getUTCFullYear(); //Tenemos 2051

getMonth() y Devuelve un entero (entre 0 y 11) Suponiendo que tenemos como hora local del sistema
getUTCMonth() correspondiente al mes segn el tiempo UTC-6 si ejecutamos:
local del sistema segn el tiempo UTC. var miFecha = new Date('2050-12-31T23:00:00-0600');
var miDia1 = miFecha.getMonth(); //Tenemos 11
var miDia2 = miFecha.getUTCMonth(); //Tenemos 0

getDate() y Devuelve un entero, da del mes Suponiendo que tenemos como hora local del sistema
getUTCDate() correspondiente a la fecha segn el UTC-6 si ejecutamos:
tiempo local del sistema segn el var miFecha = new Date('2050-12-24T23:00:00-0600');
tiempo UTC. var miDia1 = miFecha.getDate(); //Tenemos 24
var miDia2 = miFecha.getUTCDate(); //Tenemos 25

getDay() y Devuelve un entero, da de la semana Suponiendo que tenemos como hora local del sistema
getUTCDay() (entre 0 y 6, siendo el 0 el domingo), UTC-6 si ejecutamos:
correspondiente a la fecha segn el var miFecha = new Date('2050-12-24T23:00:00-0600');
tiempo local del sistema segn el var miDia1 = miFecha.getDay(); //Tenemos 6 (sbado)
tiempo UTC.
var m = miFecha.getUTCDay(); //Tenemos 0 (domingo)

getHours() y Devuelve un entero (entre 0 y 23), Suponiendo que tenemos como hora local del sistema
getUTCHours() correspondiente a la hora segn el UTC-6 si ejecutamos:
tiempo local del sistema segn el var miFecha = new Date('2050-12-24T23:00:00-0600');
tiempo UTC. var miDia1 = miFecha.getHours(); //Tenemos 23
var m = miFecha.getUTCHours(); //Tenemos 5

getMinutes() y Devuelve un entero (entre 0 y 59) Suponiendo que tenemos como hora local del sistema
getUTCMinutes() correspondiente al minuto segn el UTC-6 si ejecutamos:
tiempo local del sistema o segn el var miFecha = new Date('2050-12-24T23:35:00-0600');
tiempo UTC. var miDia1 = miFecha.getMinutes(); //Tenemos 35
var m = miFecha.getUTCMinutes(); //Tenemos 35

getSeconds() y Devuelve un entero (entre 0 y 59) Suponiendo que tenemos como hora local del sistema
getUTCSeconds() correspondiente al segundo segn el UTC-6 si ejecutamos:
tiempo local del sistema o segn el var miFecha = new Date('2050-12-24T23:35:15-0600');
tiempo UTC. var miDia1 = miFecha.getSeconds(); //Tenemos 15
var m = miFecha.getUTCSeconds(); //Tenemos 15

aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

getMilliseconds() y Devuelve un entero (entre 0 y 999) Slo til para aplicaciones muy especficas.
getUTCMilliseconds() correspondiente a los milisegundos
segn el tiempo local del sistema
segn el tiempo UTC.

getTime() Devuelve un entero, nmero de var miFecha = new Date('1970-01-02T00:00:00+0000');

milisegundos transcurridos desde el 1 var milisec = miFecha.getTime();
de enero de 1970 00:00:00 UTC. El valor alert('Tenemos: '+milisec); // Tenemos 86400000
es negativo para fechas anteriores a
esta fecha.

getTimezoneOffset() Devuelve un entero, valor en minutos Si tenemos hora local del sistema GMT+0100:
de la operacin tiempo UTC tiempo var desfase = new Date().getTimezoneOffset();
local del sistema. Valor negativo para alert('Tenemos: '+desfase); // Tenemos -60
zonas horarias + y positivo para zonas
horarias .

MTODOS SETTERS DE OBJETOS TIPO DATE

Los objetos de tipo Date disponen de estos mtodos para establecer los datos correspondientes a una
fecha:

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

setFullYear() Establece un entero de cuatro dgitos, miFecha.setFullYear(2050);

ao correspondiente a la fecha segn el
tiempo local del sistema.

setUTCFullYear() Establece un entero de cuatro dgitos, miFecha.setUTCFullYear(2050);

ao correspondiente a la fecha segn el
tiempo UTC.

setMonth() y Establece un entero (entre 0 y 11) miFecha.setMonth(11); //El mes es diciembre

setUTCMonth() correspondiente al mes segn el tiempo miFecha.setUTCMonth(11); //El mes es diciembre
local del sistema segn el tiempo UTC.

setDate() y Establece un entero, da del mes miFecha.setDate(24);

setUTCDate() correspondiente a la fecha segn el miFecha.setUTCDate(24);
tiempo local del sistema segn el
tiempo UTC.

setHours() y Establece un entero (entre 0 y 23), miFecha.setHours(23);

setUTCHours() correspondiente a la hora segn el miFecha.setUTCHours(23);
tiempo local del sistema segn el
tiempo UTC.

aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

setMinutes() y Establece un entero (entre 0 y 59) miFecha.setMinutes(35);

setUTCMinutes() correspondiente al minuto segn el miFecha.setUTCMinutes(35);
tiempo local del sistema o segn el
tiempo UTC.

setSeconds() y Establece un entero (entre 0 y 59) miFecha.setSeconds(15);

setUTCSeconds() correspondiente al segundo segn el miFecha.setUTCSeconds(15);
tiempo local del sistema o segn el
tiempo UTC.

setMilliseconds() y Establece un entero (entre 0 y 999) Slo til para aplicaciones muy especficas.
setUTCMilliseconds() correspondiente a los milisegundos
segn el tiempo local del sistema
segn el tiempo UTC.

setTime() Establece un entero, nmero de miFecha.setTime(86400000); //La fecha es 2 de enero de

milisegundos transcurridos desde el 1 1970 00:00:00 +0000
de enero de 1970 00:00:00 UTC. El valor
es negativo para fechas anteriores a
esta fecha.

PARADOJAS CON FECHAS Y RECOMENDACIN

Suponiendo que estamos en Mxico D.F. (zona horaria) UTC-6 si ejecutamos:

var miFecha1 = new Date('2050-12-24T23:00:00-0600');

var miDia = miFecha.getDate(); da lugar a que miDia contenga 24

Suponiendo que estamos en Lisboa (zona horaria UTC+0000) si ejecutamos:

var miFecha1 = new Date('2050-12-24T23:00:00-0600');

var miDia = miFecha.getDate();da lugar a que miDia contenga 25

Por qu en un caso obtenemos 24 y en otro 25? Primeramente partimos de la fecha '2050-12-

24T23:00:00-0600', esta fecha son las 5 de la maana del 25 de diciembre de 2050 hora UTC. El da del
mes expresado como da local depende de en qu zona del planeta estemos: si estamos en Mxico D.F.
a esa hora UTC sern las 23:00 del 24 de diciembre, por ello el mtodo getDate() devolvera 24 en un
computador situado en Mxico D.F. Si estamos en Lisboa, a esa hora UTC son las 5 de la maana del 25
de diciembre y por ello el mtodo getDate() devolvera 25 en un computador situado en Lisboa. Cuando
decimos situado nos referimos a que tenga como hora local del sistema la hora local del sitio donde
est ubicado el computador (aunque no necesariamente tendra por qu ser as).

Esta aparente paradoja (que no es tal) podra traernos complicaciones si no tenemos en cuenta los
detalles. A modo de recomendacin, recomendamos trabajar siempre bajo la referencia UTC y hacer
conversiones a fechas locales de forma controlada.

aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.

EJERCICIO

Crea un documento HTML que conste de un ttulo h1 con el texto <<Calendario>>, y un div central de
400 por 400 px con el borde marcado y mrgenes de 100px en todas direcciones. Dentro del div central
crea una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 pxeles y tamao de
fuente en la tabla 24 pxeles. La primera columna corresponder a lunes y la ltima a domingo. Usa un
mtodo JavaScript para determinar el mes actual. Mediante cdigo JavaScript, haz que aparezca
dinmicamente como texto encima de la tabla el mes y ao de que se trate (por ejemplo <<MAYO DE
2050>>). Haz que cada celda de la primera fila se rellene indicando el da de la semana (Lu Ma Mi
Ju Vi Sa Do). Haz que la tabla se rellene dinmicamente (al cargar la pgina) con:

a) Espacio en blanco si no corresponde ningn da.

b) El nmero del da del mes segn corresponda (28, 30 31 das segn de qu mes se trate).

El aspecto, suponiendo que te encuentras en el mes de mayo de 2050, sera el siguiente:

MAYO DE 2050
Lu Ma Mi Ju Vi Sa Do
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31

Ten en cuenta que debe generarse el calendario del mes en que te encuentres segn la hora local del
sistema (de tu computador).

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01163E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Ms mtodos Date. toString, toLocaleDaateString, toTim
meString, etc.

MTODOS PARA DAR

R FORMATO A FECHAS JA
AVASCRIPT

Los objeto
os de tipo Date disponen n de otros mtodos
m adems de los queq ya conoccemos. Estoss mtodos
nos permitirn repressentar la fecha como cad dena de textto, especificaando el form
mato en que queremos
que se muuestre (12 24 horas, len
nguaje, calen
ndario empleeado, etc.).

FORMATO
OS DE FECHA
AS JAVASCRIIPT

Como mtodos que facilitan

f mosstrar informaacin sobre los objetos tipo
t Date enn un formato
o amigable
para los humanos
h nemos los indicados en la siguiente tabla.
ten t Para los ejemplos, hemos suppuesto que
nuestro computador tiene
t como hora
h local deel sistema la de Mosc (R
Rusia), que ess UMT+0300
0.

Como feccha de parttida tomamo os var fechaa2050 = new 50-12-25T23:30:00-0600'); que se

w Date('205
correspon
nde con la ho
ora de Mxicco D.F.

Esta fech
ha expresada como UM MT es '2050 30:00+0000' y como ho
0-12-26T05:3 ora local deel sistema
(consideraando que ess Mosc) '20050-12-26T08
8:30:00+030
00'. Podemoss comprobarr que segn el sistema
con el que expresemo os la fecha nos
n encontraamos en unoos casos en el da 25 dee diciembre y en otros
casos en el
e da 26 de diciembre.
d

Para busccar la lgica al

a manejo dee fechas con n JavaScript te
t recomend damos que to omes como referencia
la fecha UTC,
U y a partiir de ah generar las horaas locales (de ue te resulten de inters.
e sistema) qu

MTTODO UTILIDA
AD EJEMPLOS apreenderaprogramar.com

toString() Devuelve una representacin n de la fecha do

onde da fecha2050.toStringg();
y mes estn exxpresados en in
ngls // Mon
M Dec 26 2 2050 08:30:00
0 GMT+0300
(Horra de verano dee Rusia)

toDateStrin
ng() Devuelve una representacinn abreviada de la fecha fecha2050.toDateSString();
donde da y mes estn expressados en ingls. M Dec 26 2050
// Mon

toISOStringg() Devuelve unaa representaciin de la feccha en fecha2050.toISOStrring()

formato ISO, que se corresp ponde con YYYYY-MM- 050-12-26T05:3
// 20 30:00.000Z
DDTHH:mm:sss.sssZ donde Y es ao, M mess, D da,
T un separadoor, H hora, m minuto, s seguundos y
milisegundos y Z indica que es
e un tiempo UTTC.

toLocaleDatteString() Devuelve una representacin

n de la fecha (d
da, mes toLo
ocaleDateStringg()
y ao) segn la forma de expresar fech has que // 26
6/12/2050
(*Sin Parm
metros)
venga determinada por el tiempo del sisteema del Notaa: supuesto ejeecutado en un computador
computador donde se ejecutee. con configuracin eestndar europ
pea.

aprenderraprogramar.co
om, 2006-2029
Ms mtodos Date. toString, toLocaleDateString, toTimeString, etc.

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

toLocaleDateString(loc Localizacion (opcional) indica un array de datos de var options = {weekday: "long", year:
alizacion , options) referencia para mostrar la fecha, por ejemplo es-ES "numeric", month: "long", day: "numeric"};
para Espaa, es-AR para Argentina Tambin se alert(fecha2050.toLocaleDateString("es-ES",
(* Con parmetros)
puede especificar calendario y otros aspectos. options));

Options (opcional) es un array que indica opciones // lunes, 26 de diciembre de 2050

toLocaleString() Devuelve una representacin de la fecha segn la fecha2050.toLocaleString();

configuracin local del computador donde se // 26/12/2050 9:30:00
(*Sin Parmetros)
ejecute. Nota: puede variar segn configuracin
computador.

toLocaleString(localiza Localizacion (opcional) indica un array de datos de var options = {weekday: "long", year:
cion , options) referencia para mostrar la fecha, por ejemplo es-ES "numeric", month: "long", day: "numeric",
para Espaa, es-AR para Argentina Tambin se hour: "numeric", hour12:"false"};
(* Con parmetros)
puede especificar calendario y otros aspectos. alert(fecha2050.toLocaleString("es-ES",
options));
Options (opcional) es un array que indica opciones
// lunes, 26 de diciembre de 2050 9 a. m.

toLocaleTimeString() Devuelve una representacin de la hora segn la fecha2050.toLocaleTimeString();

configuracin local del computador donde se // 9:30:00
(*Sin Parmetros)
ejecute. Nota: puede variar segn configuracin
computador.

toLocaleTimeString() Localizacion (opcional) indica un array de datos de var options = {hour: "numeric",
referencia para mostrar la fecha, por ejemplo es-ES hour12:"false"};
(* Con Parmetros)
para Espaa, es-AR para Argentina Tambin se alert(fecha2050.toLocaleTimeString("es-ES",
puede especificar calendario y otros aspectos. options));

Options (opcional) es un array que indica opciones // 9 a. m.

toTimeString() Devuelve una representacin de la hora segn el fecha2050.toTimeString()

sistema americano. // 08:30:00 GMT+0300 (Hora de verano de
Rusia)

toUTCString() Devuelve la fecha UTC en formato dependiente de fecha2050.toUTCString() ;

configuracin del sistema, normalmente en ingls. // Mon, 26 Dec 2050 05:30:00 GMT

valueOf() Devuelve un valor numrico que representa el fecha2050.valueOf();

nmero de milisegundos transcurridos desde el1 // 2555645400000
de enero de 1970 a las 00:00 UTC.

EJERCICIO 1

Crea un script donde se calcule el tiempo en minutos entre que se formula primera peticin al usuario y
este responde, y entre una segunda peticin al usuario y este responde. Ejemplo:

Introduzca su nombre: Alfredo >> Introduzca su pas: Colombia >> Han pasado 0.122 minutos entre su
primera y segunda respuesta.

aprenderaprogramar.com, 2006-2029
Ms mtodos Date. toString, toLocaleDateString, toTimeString, etc.

Otro ejemplo: Introduzca su nombre: Juan >> Introduzca su pas: Chile >> Han pasado 0.73 minutos
entre su primera y segunda respuesta.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea un script donde pida al usuario que introduzca una primera fecha (fecha1) en formato dd-mm-
yyyy, y una segunda fecha en el mismo formato y calcule los das que han pasado entre las dos fechas .
Ejemplo: Introduzca la fecha 1: 05-09-2076 >> Introduzca la fecha 2: 09-09-2076 >> Entre las 00:00
horas del primer da a las 00:00 del segundo hay 4 das.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01164E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
setTimeOutt, setInterval, requestAnimatiionFrame.

TIMERS JA
AVASCRIPT

Adems ded Date en JaavaScript disponemos dee otros objetos y mtodo

os que nos peermiten realizar tareas
relacionad
das con el tiempo. En cooncreto el ob
bjeto global window disp
pone de variios mtodoss pensados
para ejecu
utar una fun
ncin con un cierto retard
do, o peridicamente co
on cierto inteervalo de tiem
mpo entre
cada ejecucin.

TIMERS: SETTIMEOUT
S T, SETINTERV
VAL, REQUESSTANIMATIO
ONFRAME

Normalmente el cd digo JavaScript se ejecuuta secuenccialmente, pero existen funciones especiales

denominaadas timers que permiteen estableceer la ejecuci ones en determinados momentos
n de funcio m
del tiempo.

Los timerrs son funciones predeefinidas del objeto win

ndow (por tanto
t se pueden invocaar usando
window.nnombreDeLaFuncion() o simplemen nte usando nombreDeLa
n Funcion().

SIN
NTAXIS TIMER UTILIDAD EJEMPLOS apreenderaprogramar.com

var reeferenciaTimeer = La funcin nombreFuncio

n on se var ejecT = setTimeout(mostrarAlerta,
setTimeout(nombreFuncion, ejeecutar con un retrasso de 5000);
tiempoMiliseg); tieempoMiliseg respecto a lo l que //mostrarAlerta se ejecutaa con 5
* Para funcin sin parm
metros serra su ejecuci
n natural. undos de retraso
segu

var control = setTimeout(function()

var reeferenciaTimeer =
La funcin nombreFuncio
n on se {ejemploAccion(n nodosTituloCu
urso,
setTimeout(function()
ejeecutar con un retrasso de nodosCambiadoss, contador,
{nombreFu uncion (par1, par2, ,
tieempoMiliseg respecto a lo l que tocaaCambiar)}, 15
500);
parN)},tiem
mpoMiliseg);
serra su ejecuci
n natural. //Laa funcin se ejecuta con
n 1.5 s de
* Para funcin con parmetros
retrraso

Deetiene la ejeccucin progrramada

poor referenciiaTimer me ediante
clearTimeO
Out(referenciaaTimer) cleaarTimeOut(ejeecT)
s ejecuta antes del
settTimeOut (si se
tieempo program
mado)

var reeferenciaTimeer =
setIntervall(nombreFunccion(par Ejeecuta peridicamente la funcin
f
setInterval(mostrrarAlerta, 500
00);
1, parr2, parN), noombreFuncion n con un inttervalo
//mostrarAlerta se ejecuta
tiempoMiliseg); entre ejeecuciones de
periidicamente ccada 5 segund
dos
tieempoMiliseg.
* Para funcin sin parm
metros

aprenderraprogramar.co
om, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.

SINTAXIS TIMER UTILIDAD EJEMPLOS aprenderaprogramar.com

var referenciaTimer =
Ejecuta peridicamente la funcin var t = setInterval(function(){reloj('Chile')
setInterval(function()
nombreFuncion con un intervalo },2000);
{nombreFuncion(par1, par2,
parN)}, tiempoMiliseg); entre ejecuciones de //reloj se ejecuta peridicamente cada 2
tiempoMiliseg. s
* Para funcin con parmetros

Detiene la ejecucin programada

clearInterval(referenciaTimer) por referenciaTimer mediante clearInterval(ejecT)
setInterval

var referenciaTimer =
requestAnimationFrame(nomb Crea un bucle de repintado globalID =
reFuncion) delegando el control del mismo en requestAnimationFrame(animacionRepet
el navegador. imos);
* Para funcin sin parmetros

var referenciaTimer =
requestAnimationFrame(functi Crea un bucle de repintado globalID =
on(){nombreFuncion(par1, delegando el control del mismo en requestAnimationFrame(function(){anim
par2, , parN)}); el navegador. acionRepetimos('estiloDivertido')});
* Para funcin con parmetros

Detiene la ejecucin programada

cancelAnimationFrame(referen
por referenciaTimer mediante Ver ejemplo ms abajo
ciaTimer)
RequestAnimationFrame.

Escribe este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function alertaTras5seg() { setTimeout(mostrarAlerta, 5000); }
function mostrarAlerta() {alert('Han pasado 5 segundos desde la carga de la pgina');}
</script>
</script></head>
<body onload="alertaTras5seg()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

El resultado esperado es que cuando transcurran 5 segundos desde la carga de la pgina se muestre el
mensaje Han pasado 5 segundos desde la carga de la pgina.
Si queremos introducir la repeticin peridica de la ejecucin de la funcin podemos escribir una
llamada con setTimeOut dentro de la propia funcin. Por ejemplo:

aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.

function mostrarAlerta() {
alert('Han pasado 5 segundos');
setTimeout(mostrarAlerta, 5000);
}
Har que se repita peridicamente la alerta indicando que han pasado 5 segundos.
Aunque si se quiere una repeticin peridica ser ms cmodo usar setInterval:
function alertaTras5seg() {setInterval(mostrarAlerta, 5000);}

REQUESTANIMATIONFRAME

Tradicionalmente los efectos de progresin o animacin incremental con JavaScript se lograban con un
cdigo de este tipo:

setInterval(function() { // Cdigo a ejecutar}, 1000/60);

Con este cdigo se lograba ejecutar 60 repintados por segundo de una funcin que por ejemplo iba
dibujando una lnea. Esta cadencia daba lugar a que pareciera que la lnea se dibujaba progresivamente.

A partir de cierto momento, se introdujo una forma de crear estos efectos (puede que no funcione en
algunas versiones de navegadores) que trataba de trasladar el control de la cadencia de la animacin al
propio navegador con varios objetivos:

a) Permitir que el navegador detuviera el proceso en una pestaa si esta pasaba a estar inactiva
(dejando as de consumir recursos).
b) Permitir que el navegador optimizara el redibujado, optimizando los recursos y evitando bloqueos.
c) Buscar un menor consumo de energa (CPU).

Algunos programadores adoran requestAnimationFrame y otros lo ignoran o simplemente no lo usan.

El esquema bsico para trabajar con requestAnimationFrame es el siguiente:

var globalID;
function animacionRepetimos() {
//Cdigo a ejecutar
globalID = requestAnimationFrame(animacionRepetimos);
}
function detener() { cancelAnimationFrame(globalID);}

La animacin comienza cuando se invoca a una funcin a la que hemos denominado (a modo de
ejemplo) animacionRepetimos. Dentro de esta funcin existe una llamada recursiva que da lugar a que

aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.

el navegador ejecute el repitando peridico ejecutando previamente la funcin. La funcin puede ser
detenida usando cancelAnimationFrame(nombreDelIdentificadorEmpleado);

Ejecuta este cdigo y comprueba sus resultados (ten en cuenta que en algunos navegadores puede no
funcionar, especialmente si son ms antiguos):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
button {margin:10px;}
#cabecera{position:absolute; color:white; margin:5px; font-family:verdana, arial;}
.relleno { width: 5px; height: 20px; background: black; float: left;}
</style>
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
var globalID;
function animacionRepetimos() {
var nuevoDiv = document.createElement("div");
document.getElementById('oculto').appendChild(nuevoDiv);
nuevoDiv.innerHTML='<div class="relleno" \>&nbsp;</div>';
globalID = requestAnimationFrame(animacionRepetimos);
}
function empezar() {globalID = requestAnimationFrame(animacionRepetimos);}
function detener() { cancelAnimationFrame(globalID);}
</script></head>
<body >
<button id="start" onclick="empezar()">Empezar</button><button id="stop" onclick = "detener()">Detener</button>
<div id="oculto"></div>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

El resultado esperado es que una el color negro se vaya extendiendo de izquierda a derecha rellenando
lneas (al acumularse div de fondo negro) sobre la pantalla haciendo visible el texto blanco que no se
desplaza por tener la propiedad CSS position: absolute;

aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.

CREAR UN RELOJ CON JAVASCRIPT

Con las herramientas de que disponemos estamos en disposicin de crear un reloj con JavaScript.

Ejecuta este cdigo y comprueba sus resultados (ten en cuenta que en algunos navegadores puede no
funcionar, especialmente si son ms antiguos):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">

function reloj() {
var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();
m = actualizarHora(m); s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
var t = setTimeout(function(){reloj()},500);
}

function actualizarHora(i) {
if (i<10) {i = "0" + i}; // Aadir el cero en nmeros menores de 10
return i;
}
</script>

</script>
</head>
<body onload="reloj()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > &nbsp; </div>
</div>
</body>
</html>

El resultado esperado es que se muestre un reloj marcando los segundos.

aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.

EJERCICIO 1

Crea un reloj JavaScript que marque los segundos usando el mtodo setInterval.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea un reloj JavaScript que marque los segundos usando el mtodo requestAnimationFrame.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 3

Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrs
(00:59, 00:58, 00:57 etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el
mensaje: Tu tiempo ha terminado.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01165E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objeto Matth JavaScript. Constantes
C mattemticas y m
todos.

MATH JAV
VASCRIPT

JavaScriptt nos proveee de un objeeto predefin nido con pro

opiedades y mtodos ttiles de cara a realizar
operacionnes matemtticas: el objeeto Math. Grracias a este objeto podeemos accedeer a constantes de uso
habitual como
c mero pi, o reaalizar clculos trigonomtricos, redon
el nm ndeos, logariitmos, poten
ncias, etc.

La precisin de los reesultados ob

btenidos con
n el objeto Math
M puede diferir seg
n las caracttersticas y
configuracin local deel computado
or donde se ejecuten loss scripts.

PROPIEDA
ADES DEL OB
BJETO MATH
H

Las propieedades del objeto

o Math portan consttantes que pueden
p ser tiles para clculos matem
mticos.

Propiedad (constante matem

mtica) Siggnificado

Connstante de Euler, basee de los loggaritmos ne

eperianos,
Math
h.E
aprroximadamente 2.718

Math.LLN2 Valor de logarittmo neperian

no de 2, apro
oximadamen
nte 0.693

Valor de logaritmo neperiano de 10

0, aproximaadamente
Math.LN
N10:
2.303.

Loggaritmo en base 2 de la co
onstante de Euler,
Math.LO
OG2E:
aprroximadamente 1.443

Loggaritmo en base 10 de la co
onstante de
d Euler,
Math.LO
OG10E
aprroximadamente 0.434

Math.PI Nm
mero pi, aproximadamen
nte 3.14159

Raz cuadrada de
d 1/2, aproxximadamentte 0.707
Math.SQRT1_2

Math.SQ
QRT2 Raz cuadrada de
d 2, aproxim
madamente 1
1.414

aprenderraprogramar.co
om, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.

MTODOS GENERALES DEL OBJETO MATH

Los mtodos del objeto Math son tiles para diversos clculos matemticos.

SINTAXIS MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

'Valor absoluto de -2 es ' +Math.abs(-2);

Math.abs(x) Devuelve el valor absoluto de x
// 2

Devuelve el entero ms prximo

Math.ceil(3.33) // 4
Math.ceil(x) mayor o igual al valor de x (redondeo
Math.ceil(-3.33) // -3
hacia arriba)

Devuelve el entero ms prximo

Math.floor(3.33) // 3
Math.floor(x) menor o igual al valor de x (redondeo
Math.floor(-3.33)) // -4
hacia abajo)

Devuelve e elevado a x, donde e es la Math.exp(1)

Math.exp(x)
constante de Euler (2.718) //2.718281828459045

Devuelve el logaritmo neperiano (con Math.log(Math.E)

Math.log(x)
base e) de x // 1

Devuelve el mximo valor entre una Math.max(-15, 20)

Math.max(num1, num2, , numN)
serie de n nmeros // 20

Devuelve el mnimo valor entre una Math.min(-15, 20)

Math.min(num1, num2, , numN)
serie de n nmeros // -15

Construccin que permite obtener el Math.max.apply(null, [3, 44, 2])

Math.max.apply(null, nombreArray)
mximo valor dentro de un array //44

Construccin que permite obtener el Math.min.apply(null, [3, 44, 2])

Math.min.apply(null, nombreArray)
mnimo valor dentro de un array //2

Devuelve el resultado de elevar el Math.pow(2,4)

Math.pow(x,y)
nmero x al exponente y // 16

Devuelve un nmero pseudo alert('Aleatorio entre 1 y 10: '

Math.random() aleatorio comprendido entre 0 +Math.floor((Math.random() * (11 - 1)) + 1));
(incluido) y 1 (excluido). // Devuelve un entero entre 1 y 10

Devuelve el entero ms prximo a x.

Si se trata de nmero cuya parte Math.round(3.33)
Math.round(x)
decimal es .5 (equidistante), se // 3
redondea al entero superior.

Devuelve la raz cuadrada (valor Math.sqrt(36)

Math.sqrt(x)
positivo) de x // 6

A Math.max y Math.min no se le puede pasar directamente un array tratando de obtener el mximo o

mnimo valor dentro del array, porque la funcin espera un nmero o serie de nmeros, y no un objeto
array.

aprenderaprogramar.com, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.

MTODOS TRIGONOMTRICOS DEL OBJETO MATH

Las funciones trigonomtricas (sin, cos, tan, asin, acos, atan, atan2) operan en radianes. Pi radianes son
180 grados sexagesimales. Para obtener los grados sexagesimales que son numRad radianes usamos
una regla de tres: Math.Pi/180 = numRad / numGrad. numGrad = numRad * (180/ Math.PI ).

Para obtener los radianes que son numGrad grados sexagesimales usamos: Math.Pi/180 = numRad /
numGrad y obtenemos numRad = numGrad * (Math.Pi/180)

Como mostramos en los ejemplos, se pueden producir errores de precisin (obtener un decimal
prximo a cero en lugar de cero, u obtener un nmero muy grande en lugar de indeterminacin por
infinito).

SINTAXIS MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

alert('Seno de Pi es ' +Math.sin(Math.PI));

Devuelve el seno de x (donde x est
Math.sin(x) // Seno de Pi es 1.2246467991473532e-16 *
expresado en radianes)
* Error de precisin, resultado real debe ser 0

Devuelve el coseno de x (donde x alert ('Coseno de Pi es ' +Math.cos(Math.PI));

Math.cos(x)
est expresado en radianes) // Coseno de Pi es -1

alert('Tangente de 90 o Pi es ' +Math.tan(Math.PI/2));

Devuelve la tangente de x (donde x
Math.tan(x) // Tangente de 90 o Pi es 16331239353195370 *
est expresado en radianes)
* Error de precisin, resultado real debe ser infinito

alert('Arcoseno de 1 es (90 grados o pi/2) '

Devuelve el arcoseno de x (donde x
Math.asin(x) +Math.asin(1));
est expresado en radianes)
//Arcoseno de 1 es 1.5707963267948966

Devuelve el arcocoseno de x (donde x alert('Arcocoseno de -1 es ' +Math.acos(-1));

Math.acos(x)
est expresado en radianes) // Arcocoseno de -1 es 3.141592653589793

alert('Arcotangente de 90 es ' +Math.atan(Infinity));

Devuelve la arcotangente de x
Math.atan(x) // Arcotangente de 90 es 1.5707963267948966 (este
(donde x est expresado en radianes)
valor son pi/2)

Devuelve la arcotangente del

cociente entre x e y (donde el alert('Arcotangente de 9/3 es' +Math.atan2(9, 3));
Math.atan2(x, y)
cociente representa un valor en // Arcotangente de 9/3 es1.2587542052323633
radianes)

EJERCICIO 1

Crea un script que genere un nmero aleatorio entre 1 y 100. A continuacin debe pedir al usuario que
adivine el nmero. Si el usuario responde un nmero menor al nmero aleatorio, debe mostrarse un
mensaje El nmero es mayor. Intntelo de nuevo y dar opcin a responder de nuevo. Si el usuario
responde un nmero mayor debe mostrarse un mensaje El nmero es menor. Intntelo de nuevo. Si
el usuario acierta debe mostrarse Enhorabuena. Ha acertado. El programa debe terminar si el usuario

aprenderaprogramar.com, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.

acierta o si se superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse
el mensaje Ha superado 30 intentos. El programa termina.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura
del cilindro. Utilizando la propiedad Math.PI debe realizarse el clculo para determinar el rea de la
base del cilindro y el volumen del cilindro y mostrar estos resultados. Consulta en internet si no
recuerdas las frmulas a aplicar. .

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 3

Crea un script que d lugar a lo siguiente:

a) En un div con id="volador debes tener una palabra como <<JavaScript>>.

b) Utilizando las funciones trigonomtricas, las propiedades de posicionamiento CSS y funciones para
control de animaciones/tiempo debes dar lugar a que dicha palabra se desplace desde la izquierda
hasta la derecha de la pantalla siguiendo un movimiento sinusoidal (es decir, subiendo y bajando
suavemente describiendo ondas).

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01166E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Efectos visu
uales JavaScriptt: imgenes, te
exto, etc.

EFECTOS JAVASCRIPT
J T

Existen diiferentes APIs y librerass JavaScript que

q permiten generar effectos visualles muy llam
mativos. En
este cursoo no querem mos entrar a estudiar estas
e posibiliidades ya quue nos estammos centran
ndo en los
fundamen ntos de JavaSScript. Pero yay con estoss podemos ge enerar efectos variados.

Los efecto
os visuales muchas
m vecees se basarn en el uso de recursin y funcionees relacionad
das con la
repeticin
n en el tiemp
po y ejecuci
n de funcion
nes con ciertto retardo en
n el tiempo.

N CON JAVA
RECURSI ASCRIPT

La recursiin es una tcnica de prrogramacinn admitida por

p la mayorr parte de loos lenguajes modernos
basada enn la autollam
mada de un mtodo
m o fun
ncin a s mismo. Estas llamadas
l van
n creando uuna pila de
llamadas hasta que se
s llega a lo que se deno
omina caso base:
b una situ
uacin en qu
ue ya no se realiza
r una
nueva llamada recurssiva, sino quue se devuelve un resulltado concreeto que da llugar a la saalida de la
recursin.

La recursiin no es fccil de entendder ni de exp de leer lo que vamos a

plicar. No te preocupes si despus d
exponer no
n terminas de compren nderla del to
odo. Ten en cuenta
c que muchos
m proggramadores no usan o
no saben manejar la recursin
r y que
q aprenderr su uso y maanejo requiere tiempo y prctica.

os ejemplos ms
Uno de lo m habitualles de recurssin es el clculo del facttorial de un n
nmero. El faactorial de
un nmerro n se calcuula como n * (n-1) * (n--2) * ( ) * 1.
1 Por ejemp plo el factorrial de 3 es 3*2*1
3 = 6,
mientras que el factorrial de 5 es 5*4*3*2*1
5 = 120.

La forma ms intutiva de calcular el factorial es no recu

ursiva, sino usando
u un b
bucle tradicio
onal como
vamos a ver
v ahora. Esscribe este c
digo y comp prueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN T N" "http://www

w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<script tyype="text/javasscript">
function ejemplo(nume
e ro) { alert ('El faactorial de 5 es '+factorialIteraativo(numero));; }
function factorialIterativ
f vo(numero){ vaar factorial = 1;
//Factoriaal de numero
for (var i==numero; i>0; i--){ factorial = factorial
f * (i); }
return facctorial;
}
</script>
</script></head>
<body on nload="ejemplo o(5)" >
<div id="ccabecera"><h2>Cursos aprend deraprogramarr.com</h2><h3>Ejemplos JavaaScript</h3></d div>
</body><</html>

aprenderraprogramar.co
om, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.

Ahora vamos a plantear el factorial de forma recursiva. El factorial de un nmero se puede ver como
factorial de n = n * (factorial de n-1)

As el factorial de 5 podramos verlo como 5 * (factorial de 4), que a su vez es 5 * 4 * (factorial de 3),
que a su vez es 5 * 4 * 3 * (factorial de 2) Cundo termina este proceso recursivo? Cuando llegamos
a un caso en el que el resultado es elemental, es decir, un caso donde no es necesario utilizar factorial
de n = n * (factorial de n-1), sino simplemente factorial de n = resultado elemental. Este caso, que se
denomina caso base, para el factorial lo tenemos con el 1: factorial de 1 es 1, caso elemental.

El cdigo recursivo para el factorial sera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo(numero) { alert ('El factorial de '+numero+' es '+factorialRecursivo(numero)); }

function factorialRecursivo(numero){
if (numero==0) {return 1;} //caso base
else {return numero*factorialRecursivo(numero-1);} //caso recursivo
}

</script></head>
<body onload="ejemplo(5)" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

Los pasos que da el factorial recursivo son:

5 * factorialRecursivo(4) -- > 5 * 4 * factorialRecursivo(3) -- > 5 * 4 * 3 * factorialRecursivo(2) -- >

5 * 4 * 3 * 2 * factorialRecursivo(1) y llega al caso base, devolviendo 5*4*3*2*1 = 120.

A la hora de plantear un proceso recursivo siempre es necesario tener presente la necesidad de que
exista un caso base: si no es as, la recursin puede no terminar nunca y se entra en procesos que se
asemejan a un bucle infinito. Cuando esto ocurre, en la consola de depuracin de JavaScript nos
podemos encontrar mensajes como Too much recursion.

EL PROBLEMA DEL SETTIMEOUT DENTRO DE BUCLES

Supongamos que queremos ejecutar un proceso de forma que entre cada ejecucin haya un intervalo
de 5 segundos y escribimos un bucle con un setTimeOut llamando a la funcin oportuna dentro del
bucle:

while (contador<numeroNodos){
contador = contador+1;
referenciaTimer[contador] = setTimeout (cambiarNodo(nodosTituloCurso[contador]), 5000);
}

aprenderaprogramar.com, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.

La idea es realizar el proceso cada 5 segundos, sin embargo hay un fallo de planteamiento que hace
que esto no funcione: lo que ocurre en realidad es que se ejecuta el bucle en todas sus iteraciones de
forma prcticamente instantnea, lo que da lugar a que el setTimeout no se ejecute.

Una funcin para detenerse tiene que llamarse a s misma o utilizar algn mecanismo que fuerce la
detencin.

Vamos a analizar esto con mayor detenimiento. Para ello escribe y ejecuta este cdigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
*{font-family: verdana, sans-serif;}
.nodoNuevo{background-color: black; color:white; width:100px;
text-align:center; padding:20px; font-size:32px; float:left;}
</style>
<script type="text/javascript">
var contador = 1;
function mostrarNumConRetardo() {
setTimeout(crearNodo, 1000);
}
function crearNodo() {
var nodoHijo = document.createElement("div");
nodoHijo.className="nodoNuevo";
nodoHijo.innerHTML = ''+contador;
document.body.appendChild(nodoHijo);
contador = contador+1;
}
</script>
</script></head>
<body onload="mostrarNumConRetardo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

Con este cdigo hacemos que se muestre el nmero 1 por pantalla despus de 1 segundo. Hasta aqu
todo correcto. Ahora supongamos que queremos que se cuente hasta 10 y lo hacemos con un bucle.
Para ello modificamos la funcin mostrarNumConRetardo que queda as:

function mostrarNumConRetardo() {
for(var i=0; i<10; i++){
setTimeout(crearNodo, 1000);
}
}

El resultado no es que se vayan mostrando progresivamente 1, luego 2, luego 3, luego 4 sino que se
nos muestran de golpe todos los nmeros: 1, 2, 3,4, 5, 6, 7, 8, 9, 10. Por qu? Porque el bucle se
ejecuta de forma inmediata quedando 10 rdenes de que se muestren dentro de 1 segundo los
nmeros, cuando transcurre un segundo se ejecutan todas las rdenes.

aprenderaprogramar.com, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.

Para solucionar este problema tenemos que forzar la detencin y que la siguiente llamada se ejecute
despus de que el retardo previo haya tenido lugar. Hay varias maneras de solucionar esto. Aqu vamos
a mostrar una de ellas, basada en llamadas recursivas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
*{font-family: verdana, sans-serif;}
.nodoNuevo{background-color: black; color:white; width:100px;
text-align:center; padding:20px; font-size:32px; float:left;}
</style>
<script type="text/javascript">
var contador = 1;
function mostrarNumConRetardo() { setTimeout(crearNodo, 1000);}
function crearNodo() {
if (contador==11) {
//Caso base: fin de la recursin (no hacemos nada)
} else { //Caso recursivo
var nodoHijo = document.createElement("div");
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+contador;
document.getElementById('cabecera').appendChild(nodoHijo); contador = contador+1;
setTimeout(crearNodo, 1000);
}
}
</script>
</script>
</head>
<body onload="mostrarNumConRetardo()" >
<div id="cabecera" style="width:500px;">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3></div>
</body>
</html>

En este cdigo observamos lo siguiente:

a) No existe un bucle como exista en el ejemplo puesto anteriormente. Lo que existen son llamadas
recursivas que simulan un bucle (de hecho, llevamos un contador).

b) Cada llamada recursiva introduce un retardo. De este modo, la siguiente ejecucin no comienza si no
se ha producido el retardo. A diferencia del caso de un bucle, donde la ejecucin es instantnea, en
este caso la ejecucin va siendo progresiva: no comienza la siguiente recursin hasta que pasa el
tiempo de retardo especificado.

El resultado esperado es que vayan apareciendo en pantalla progresivamente los nmeros 1, 2, 3,

hasta 10, con un pequeo retardo en la aparicin de cada nmero.

aprenderaprogramar.com, 2006-2029
Efectos visu
uales JavaScriptt: imgenes, te
exto, etc.

CREAR EFFECTOS JAVA

ASCRIPT: HASSTA DONDE LA IMAGINA
ACIN ALCA
ANCE

Con las herramientass que hemoss visto a lo largo del currso podemoss crear poteentes animacciones con
JavaScriptt. Es cierto que
q existen frameworks JavaScript
J y APIs que nos facilitan crear animacio
ones, pero
nosotros mismos po odemos plan
ntear animaaciones usanndo puro c digo JavaSScript hasta donde la
imaginacin nos alcan nce

Escribe ell siguiente cdigo

c y com
mprueba los resultados de ejecucin n. Este cdiggo corresponde a una
pgina weeb real que lanzamos en el dominio http://apren ndeaprogram mar.es. El cd digo es senciillo, puede
resultar un
u poco exteenso para esstudiar pero merece la pena, ya que aborda differentes materias que
hemos ido o estudiandoo a lo largo del
d curso com mo acceso y manipulaci n del DOM,, creacin de e efectos y
retardo co
on setTimeO Out, recursinn, cambio dee estilos CSS,, uso de variaables de disttintos tipos, etc.
e

<!DOCTYPE HTML PUBLIC C "-//W3C//DTD D HTML 4.01 Trransitional//EN" "http://www.w3.org/TR/htm ml4/loose.dtd">>

<html><heead>
<title>Curssos aprende a programar</tit
p le>
<meta chaarset="utf-8">
<meta nam me="description" content="Ap prende a prograamar con curso os reconocidos por su calidad d didctica">
<meta nam me="keywords"" content="HTM ML, CSS, JavaScript, Java, Visuaal Basic, Joomlaa, PHP">
<style typee="text/css">
*{font-fammily: verdana, saans-serif;}
#principal{{text-align:centter;width:95%; margin: 0 auto o;}
.tituloCursso {color: whitee; float:left; pad
dding: 36px 44p
px; font-size: 2.6
65em; font-stylle:bold; text-deecoration:none;;}
a:hover{co olor:orange !im
mportant;}
</style>
<script typ
pe="text/javasccript">
function ejemplo(){
e var nodosTituloCur
n so = documentt.querySelectorA All(".tituloCurso");
var contaddor = 0; var nod dosCambiados = new Array(); var v tocaCambiaar = true;
setTimeou ut(function() {ejjemploAccion(n nodosTituloCurso, nodosCamb biados, contado or, tocaCambiarr)}, 1500);
}

aprenderraprogramar.co
om, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.

function ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar) {

if (contador<nodosTituloCurso.length){
var indice = Math.floor((Math.random() * (nodosTituloCurso.length)));
if (nodosCambiados.length!=0) {
for (var i=0; i<nodosCambiados.length; i++) {
if(nodosCambiados[i]==indice) {tocaCambiar = false;}
}
}
if (tocaCambiar==true) {
cambiarNodo(nodosTituloCurso[indice]);
nodosCambiados.push(indice);
contador = contador+1;
setTimeout(function() {ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar)}, 1500);
} else {tocaCambiar=true; ejemploAccion(nodosTituloCurso, nodosCambiados, contador, tocaCambiar);}
}
else { //Caso base fin de la recursin
document.body.style.backgroundColor='black';
document.getElementById('principal').style.color='white';
for (var i=0; i<nodosTituloCurso.length; i++) {
nodosTituloCurso[i].style.color='yellow';
}
}
}

function cambiarNodo(elNodo){ elNodo.style.backgroundColor = 'black'; }

</script>
</head>
<body onload="ejemplo()">
<div id="principal"><h1>Cursos de programacin</h1>
<h3>Reconocidos por su calidad didctica</h3>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59">
Fundamentos</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188">
Java</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192">
HTML</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203">
CSS</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206">
JavaScript</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193">
PHP</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=38&Itemid=152">
Joomla</a></div>
<div ><a class="tituloCurso"
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61"> Visual Basic</a></div>
<div ><a class="tituloCurso" href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59">
Pseudocdigo</a></div>
<div ><a class="tituloCurso"
href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26">
Libros/ebooks</a></div>
<div ><a class="tituloCurso"
href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div>
</div></body></html>

aprenderaprogramar.com, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.

EJERCICIO 1

Realiza una descripcin de cada una de las instrucciones del cdigo del ejemplo anterior indicando cul
es su cometido. Si has seguido el curso desde el principio, debes ser capaz de interpretar todo el cdigo.

Ejemplo: La primera lnea <!DOCTYPE realiza la declaracin de tipo de documento HTML a efectos de
que los navegadores interpreten en qu versin de HTML est escrito el cdigo.

La etiqueta html es la etiqueta de apertura del cdigo HTML. La etiqueta head es

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

EJERCICIO 2

Crea una animacin JavaScript (decide t el efecto que quieres implementar: pueden ser cosas
movindose por la pantalla, texto cambiando de tamao o cualquier otra cosa que se te ocurra) con las
herramientas que hemos ido conociendo a lo largo del curso. Ejectalo en distintos navegadores y
comprueba que se ejecute tal y como esperas en todos ellos.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01167E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
typeof y tip
po de variable. Ambito
A (scope) global y local con JavaScriptt.

AMBITO (SCOPE)
( JAV
VASCRIPT

Cuando trrabajamos con JavaScrip pt podemos definir varioos mbitos: mbito

globaal (variables conocidas
por todass las funciones y por el espacio
e glob
bal) y mbito
os locales (vaariables conocidas nicaamente en
determinaadas partes del
d cdigo).

OR TYPEOF
OPERADO

Existe un operador qu ue nos va a resultar

r til para
p determinar el tipo de
d una variab ble, o para determinar
d
si esta variable existe en el mbitto en el que tratamos de e utilizarla. La
L sintaxis paara usar este
e operador
es la siguiente:

typeof exxpresinAEvaaluar typeo

of (operando
oAEvaluar)

El resultado de aplicaar este operaador a un id dentificador JavaScript

J ess una caden na de texto que q puede
puede serr: string (si el
e tipo de exp presinAEvaaluar es cadeena de texto), number (ssi el tipo es numrico),
n
boolean (si el tipo es booleano o se s pasan las palabras claave true fallse) object (ssi el tipo es un
u objeto),
function (si
( el tipo es una funcin n o un mtoodo) o undeffined si el ideentificador p pasado no exxiste en el
mbito en n que se trata de utilizar..

En este ejjemplo vemo

os cmo obteener tipos co
onocidos de variables

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<script tyype="text/javasscript">
function ejemplo()
e {
var miString = 'cosa';
var miNumeroEntero = 33; 3
var miNumeroDecimal = 23.65;
var miBoo oleano = true;
var miFun ncion = new fun nction(a, b) {retturn (a+b);}
msg = 'Tip po de miString:: '+typeof miStrring + '\nTipo de miNumeroEn ntero: '+typeof miNumeroEnte
m ero;
msg = mssg + '\nTipo de miNumeroDeciimal: '+typeof miNumeroDecim
m mal + '\nTipo de miBooleano: '+typeof miBoooleano;
msg = mssg + '\nTipo de miFuncion: '+tyypeof miFuncio on + '\nTipo de Math: '+typeoff Math;
msg = mssg + '\nTipo de Date: '+typeof Date + '\nTipo de algoIndefiniido: '+typeof alggoIndefinido;
if (typeoff miNumeroEntero == 'string') {msg = msg + 'm miNumeroEnte ero es de tipo sttring';}
else {msgg = msg + '\nmiN NumeroEntero no es de tipo string';}
s
alert(msgg);
}
</script>
</script></head>
<body on nload="ejemplo o()" >
<div id="ccabecera"><h2>Cursos aprend deraprogramarr.com</h2><h3>Ejemplos JavaaScript</h3></d div>
</body><</html>

aprenderraprogramar.co
om, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.

AMBITO DE VARIABLES: GLOBAL Y LOCAL

La primera aproximacin al concepto de mbito (scope) va a consistir en distinguir entre las variables
declaradas fuera de cualquier funcin, a las que se denomina variables globales y sern conocidas por
todas las funciones, frente a variables declaradas dentro de una funcin concreta, que slo sern
conocidas dentro de esa funcin. Los parmetros pasados a funciones funcionan como si fueran
variables locales a la funcin.

Escribe este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

var idGlobal=33;
var msg = 'Variable global';

function ejemplo(numero) {
var miVarLocal = 'Soy una variable local';
var msg = 'idGlobal es conocido en la funcin ejemplo. idGlobal vale: '+idGlobal;
msg = msg + '\n\nEn ejemplo el valor de numero es recibido como parametro (local). numero es: '+numero;
msg = msg + '\n\n La variable local miVarLocal contiene: '+miVarLocal;
alert(msg); //msg es local a esta funcin, aunque exista otra variable con este nombre se reconoce slo la ms prxima
ejemplo2();
}

function ejemplo2(){
var msg = 'idGlobal es conocido en la funcin ejemplo2. idGlobal vale: '+idGlobal;
//msg = msg + '\n\nEjemplo2 desconoce qu es numero porque es local a otra funcin: aqu numero es '+numero;
//msg = msg + '\n\nEjemplo2 desconoce qu es miVarLocal porque es local a otra funcin: aqu miVarLocal es
'+MiVarLocal;
if (typeof miVarLocal != 'undefined') { msg=msg+'\n\nEjemplo2 desconoce qu es miVarLocal porque es local a otra
funcin: aqu miVarLocal es '+miVarLocal }
else {msg=msg+'\n\nmiVarLocal No existe en el mbito de la funcin ejemplo2\n\n';}
alert(msg); //msg es local a esta funcin
}

</script>
</script></head>
<body onload="ejemplo(5)" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

El resultado esperado es:

idGlobal es conocido en la funcin ejemplo. idGlobal vale: 33

En ejemplo el valor de numero es recibido como parametro (local). numero es: 5
La variable local miVarLocal contiene: Soy una variable local
idGlobal es conocido en la funcin ejemplo2. idGlobal vale: 33
miVarLocal No existe en el mbito de la funcin ejemplo2

aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.

La variable global idGlobal es conocida por todas las funciones. De acuerdo con esto, la variable msg
tambin es conocida por todas las funciones. Sin embargo, al declararse una variable local en las
funciones con igual nombre, decimos que la variable global queda tapada por la variable local, es
decir, al invocar dicha variable dentro de la funcin primeramente se busca si existe en el mbito de
dicha funcin (como local) y si es as, se devuelve dicha variable ignorando las que puedan existir en
mbitos externos. En resumen: siempre se busca si un identificador existe en el mbito en que se
invoca, si no es as se trata de localizar en el siguiente mbito ms prximo y as sucesivamente hasta
llegar al mbito global. Si no existe en el mbito global y se trata de utilizar se obtiene un error de tipo
<< ReferenceError: MiVarLocal is not defined>>. Recordar que los errores no se muestran directamente
en pantalla, sino que hemos de activar la consola de depuracin del navegador para poder visualizarlos.

En el cdigo aparecen dos lneas comentadas que si tratamos de ejecutar nos devuelven un error, ya
que estamos tratando de invocar identificadores de variables o parmetros desconocidos en ese
mbito.

La sintaxis: if (typeof miVarLocal != 'undefined') nos permite determinar si el identificador miVarLocal es

conocido en el mbito. Podramos tambin haber invertido la lgica escribiendo if (typeof miVarLocal
== 'undefined') y cambiando el orden de las sentencias a ejecutar.

Grficamente podramos ver los mbitos como espacios donde las variables son conocidas:

ESQUEMA EJEMPLO MBITOS JAVASCRIPT

Ambito global

Variable idGlobal Variable msg

Ambito funcin ejemplo Ambito funcin ejemplo2

Variable miVarLocal Variable msg

Variable msg

Parmetro numero

IMPLICACIONES DEL USO DE VAR EN EL MBITO DE LAS VARIABLES

Nosotros estamos trabajando declarando una variable con la palabra clave var. Por ejemplo var
miNumero = 33;

aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.

Sin embargo, el uso de var no es obligatorio, y el intrprete considera que una asignacin de contenido
a una variable que no ha sido declarada es una declaracin implcita. Por ejemplo podramos escribir
directamente miNumero=33; alert(miNumero) ; sin hacer uso de la palabra clave var.

Cuando no se escribe la palabra clave var dentro de una funcin tiene una implicacin: la variable
automticamente es tratada como una variable global an a pesar de estar dentro de una funcion.
Ejecuta este cdigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function ejemplo() {miVarLocal = 'Soy una variable local'; ejemplo2();}

function ejemplo2(){
var msg= '';
if (typeof miVarLocal != 'undefined') { msg=msg+'\n\nEjemplo2 conoce qu es miVarLocal porque se'+
' declar en otra funcin sin var: aqu miVarLocal es '+miVarLocal+ ' y es de tipo '+(typeof miVarLocal) }
else {msg=msg+'\n\nmiVarLocal No existe en el mbito de la funcin ejemplo2\n\n';}
alert(msg); //msg es local a esta funcin
}
</script>
</script></head>
<body onload="ejemplo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

El resultado, que podemos ver como a priori poco lgico, es el siguiente:

<<Ejemplo2 conoce qu es miVarLocal porque se declar en otra funcin sin var: aqu miVarLocal es Soy
una variable local y es de tipo string>>

Esto nos da pie a que podamos plantear las siguientes situaciones y resultados:

Forma de declaracin Lugar de declaracin Efecto

Implcita sin uso de var Fuera de cualquier funcin La variable es global

Usando var Fuera de cualquier funcin La variable es global

Implcita sin uso de var Dentro de una funcin La variable es global

Usando var Dentro de una funcin La variable es local

En general recomendaremos hacer uso siempre de var, de forma que las variables declaradas dentro de
funciones trabajen como variables locales. Esto hace la programacin ms segura y evita saturar el
espacio global de nombres que en caso de repeticin pueden crear conflictos.

aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.

Tener en cuenta que si una variable como mensaje es declarada como variable global y luego es
utilizada dentro de una funcin sin hacer uso de var, su valor queda modificado al considerarse que se
est haciendo referencia a la variable global (nica) aunque nuestra intencin no fuera esa. Esto
refuerza la recomendacin de hacer siempre uso de var para declarar variables.

No deben declararse indiscriminadamente variables sin uso de var dentro de funciones porque eso
podra calificarse como abuso de variables globales que a la larga traer complicaciones. Las variables
globales deben ser usadas de forma controlada y en su justa medida.

EJERCICIO

Analiza este cdigo JavaScript y responde a las preguntas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var target_date = new Date("Jan 1, 2089").getTime();
var days, hours, minutes, seconds;
function ejemplo() {
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = 'Para el 1 de enero de 2089 faltan ' +days+ ' das, ' + hours + " horas, "
+ minutes + " minutos, " + seconds + " segundos";
}, 1000);
}
</script>
</head>
<body onload="ejemplo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<span id="countdown"></span></div>
</body></html>

a) Haz una lista de las variables que intervienen indicando para cada variable cul es su nombre, cul es
su tipo, cul es su cometido y si est definida como variable global o variable local.

Ejemplo: la variable target_date es de tipo Date, su cometido es almacenar la fecha futura respecto de
la cual el script va a mostrar los das, horas, minutos y segundos que faltan para alcanzar dicha fecha, y
est definida como variable global.

aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.

b) Qu ocurre si definimos la variable current_date en el mbito global en vez de dentro de la funcin?

Por qu ocurre esto?

c) Podramos definir todas las variables como locales a la funcin y prescindir de las variables globales?
Si se pudiera hacer, crees que sera positivo para el diseo del cdigo, su mantenimiento y
ampliabilidad, o por el contrario, que sera negativo?

d) Qu mtodos de los empleados en el cdigo devuelven valores en milisegundos?

e) Razona la lgica del cdigo. Con los contenidos que hemos visto en el curso hasta el momento, debes
ser capaz de entender todo el cdigo que aparece en el script.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01168E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Ambitos (sccopes), namesp
paces y significaado de this en JavaScript.
J

MS SOB
BRE MBITOSS (SCOPES)

Hemos haablado bsiccamente de dos mbito os: el global,, cuyas variaables son deefinidas porr todas las
funcioness, y el local, correspond
diente a unaa funcin. No
N obstante, los mbitos son anidables en el
sentido dee que una fu
uncin se pueede definir dentro
d de otrra.

AMBITOSS INTERNOS

Una funciin se puedee definir den ncin define un mbito local a ella
ntro de otra. En este casso, cada fun
misma.

La regla para
p saber si
s una variable es visible es: todo variable
v deffinida en un mbito extterno (que
envuelve a otro) es conocida enn un mbito or el contrario, las variaables definid
o interno. Po das en un
mbito interno no son
n conocidas en
e mbitos externos
e a dicho mbito..

Ejecuta esste cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<script tyype="text/javasscript">
function ejemplo()
e { //Ambito de ejemplo
var comb bustible=40;
var llenarrDeposito = funnction() {
//Ambito o de llenarDepo osito (interno a ejemplo)
alert('Se han introducido o en el depsito
o '+combustiblee+' litros');
var faltaPParaLlenado = 200-combustibl
2 e;
}
llenarDep posito();
if (typeoff faltaParaLlenaado == 'undefined') {alert('Aqu
u no se conoce la variable faltaaParaLlenado');}
}
</script></head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<
</body><</html>

El resultado esperado o es: <<Se han

h introduccido en el de
epsito 40 litros>> y <<<Aqu no se conoce la
variable faaltaParaLlenado.>>

En resummen, las funcciones se pu

ueden definir dentro de funciones, y cada funccin define un
u mbito
interno no
o conocido por
p las funcioones externaas.

En cambio o, las variab ones externas s son conocidas por las funcioness internas.
bles definidas por funcio
Por ejemp ble combustiible definida en la funci
plo, la variab s es conocida dentro de la funcin
n ejemplo s
p llenarDeposito.
interna reeferenciada por

aprenderraprogramar.co
om, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

ESPACIOS DE NOMBRES (NAMESPACES) JAVASCRIPT

Cuando se crea cdigo donde se tienen decenas de archivos JavaScript y miles de lneas, es probable
que se den colisiones de nombres: dos variables que toman el mismo nombre, dos funciones que
toman el mismo nombre, etc. Una colisin de nombres no siempre es negativa en el sentido de que si
est bien resuelta y planteada, no tiene por qu generar un conflicto. No obstante, con frecuencia se
producen colisiones con efectos indeseados. Vemoslo con un ejemplo: partimos de este cdigo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var capacidadDeposito = 200;
function obtenerNecesidades(contenidoActual){
alert('La capacidad del depsito es ' + capacidadDeposito + ' litros y faltan ' + (capacidadDeposito-contenidoActual) +
' litros para llenarlo');
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="obtenerNecesidades(20)"> Probar </div>
</body></html>

El resultado esperado al hacer click es: <<La capacidad del depsito es 200 litros y faltan 180 litros para
llenarlo>>

Pero supongamos que es una aplicacin web y que al cabo de un par de aos, cuando esta aplicacin
tiene miles de lneas, otro programador introduce otra funcin que tiene el mismo nombre que la que
nosotros habamos definido antes. El cdigo suponemos que hubiera quedado as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var capacidadDeposito = 200;
//Aqu muchas lneas
function obtenerNecesidades(contenidoActual){
alert('La capacidad del depsito es ' + capacidadDeposito + ' litros y faltan ' + (capacidadDeposito-contenidoActual) +
' litros para llenarlo');
}
// Aqu muchas lneas
function obtenerNecesidades(contenidoActual) {
var capacidadDeposito = 300;
alert('La capacidad del depsito es ' + capacidadDeposito +
' litros y faltan ' + (capacidadDeposito-contenidoActual) + ' litros para llenarlo');
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="obtenerNecesidades(20)"> Probar </div>
</body></html>

Ahora el resultado obtenido al hacer click es: << La capacidad del depsito es 300 litros y faltan 280
litros para llenarlo>>

aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

Quizs la capacidad del depsito de un nuevo modelo de vehculo sea de 300 litros, pero nuestro cdigo
referido a otro modelo de vehculo ha dejado de funcionar debido a una colisin de nombres: la funcin
que se invoca al hacer click es la ltima que el intrprete lee dentro del cdigo, y al haber dos funciones
con el mismo nombre una queda tapada por la otra.

Una forma de tratar de mitigar estos efectos indeseados es definir spacenames o espacios de nombres.

Los espacios de nombres son objetos que actan a modo de contenedor para envolver todo un
conjunto de propiedades, funciones, etc. de forma que su identificacin sea ms segura y la
probabilidad de conflicto de nombres sea baja.

Para crear un espacio de nombres podemos usar esta sintaxis, que ya habamos explicado como forma
de crear objetos en JavaScript:

var nombreObjetoCreado = {
propiedad1: valorPropiedad1,
propiedad2: valorPropiedad2,
propiedadN: valorPropiedadN,

mtodo1: function () { cdigo }
mtodo2: function (par1, par2, , parN) { cdigo }
mtodoN: function () { cdigo }
}

En nuestro caso, nombreObjetoCreado ser el nombre del espacio de nombres. Este nombre ser un
prefijo que habr que aplicar para invocar cualquier variable (propiedad) o mtodo de ese espacio de
nombres.

El prefijo puede ser relativo a la funcionalidad que tiene el cdigo, o puede ser un prefijo que usemos
nosotros para identificarnos como programadores, un prefijo creado para desarrollar una aplicacin,
etc.

Ejecuta este cdigo y comprueba los resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

var modeloFordSpace = {
capacidadDeposito: 200,
obtenerNecesidades: function (contenidoActual){
alert('La capacidad del depsito es ' + modeloFordSpace.capacidadDeposito + ' litros y faltan ' +
(modeloFordSpace.capacidadDeposito-contenidoActual) +
' litros para llenarlo');}
}

aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

var modeloToyotaSpace = {
obtenerNecesidades: function(contenidoActual) {
var capacidadDeposito = 300;
alert('La capacidad del depsito es ' + capacidadDeposito +
' litros y faltan ' + (capacidadDeposito-contenidoActual) + ' litros para llenarlo');}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="modeloFordSpace.obtenerNecesidades(20)"> Probar (ford) </div>
<div style="color:blue;" id ="pulsador" onclick="modeloToyotaSpace.obtenerNecesidades(20)"> Probar (toyota) </div>
</body></html>

Con esta alternativa de diseo usamos a modo de variables propiedades de un objeto y a modo de
funciones mtodos de un objeto, sirvindonos dicho objeto para crear el espacio de nombres. En este
ejemplo tenemos dos funciones con el mismo nombre, pero al estar en distintos espacios de nombres
podemos usar uno u otro sin problemas, simplemente empleando el prefijo adecuado.

Una sintaxis que puede resultar interesante es usar var espacioDeNombres = {}; para crear el espacio de
nombres y posteriormente definir sus propiedades y mtodos por separado. Ejecuta este ejemplo y
comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var modeloToyotaSpace = {};
modeloToyotaSpace.cocheToyota = function(modelo, capacidadDeposito) {
this.capacidadDeposito = capacidadDeposito;
this.modelo = modelo;
alert('Creado coche Toyota modelo ' + this.modelo + ' con capacidad '+this.capacidadDeposito);
this.obtenerVelocidad = function(){ if (capacidadDeposito<200) {return '150 km/h';} else {return '240 km/h';}}
this.fabrica = 'Ken-Zhuan';
}
function ejemplo() {
var coche1 = new modeloToyotaSpace.cocheToyota('Auris', 175);
alert('La velocidad mxima de este vehculo es ' + coche1.obtenerVelocidad());
alert('Vehiculo fabricado en la fbrica de ' + coche1.fabrica);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>

LA PALABRA CLAVE THIS

Ya hemos hablado sobre el significado de la palabra clave this, que en JavaScript no siempre es el
mismo. Vamos a tratar de resumir a qu puede hacer referencia la palabra clave this y repasar este
concepto:

aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

1. this para referirnos a un nodo del DOM (ya estudiado)

Un ejemplo lo veramos aqu:

<h2 onclick="alert(this.nodeName)">Haz click aqu para ver el nodeName de this</h2>

<h2>Haz click <span onclick="alert(this.nodeName)" style="color:red;">aqu para ver el nodeName de this</span></h2>

En este caso al hacer click en el primer caso obtenemos H2 y en el segundo SPAN porque this alude al
nodo dentro del cual estamos haciendo uso de esta palabra clave.
Aqu this (usada dentro de un manejador de evento onclick) nos devuelve el nodo de tipo Element
definido por las etiquetas HTML donde se define el evento.
Generalizando, podemos decir que dentro de la funcin de respuesta a un evento, la palabra clave this
hace referencia al elemento que es quien recibe (objetivo o target) el evento.

Este cdigo refleja lo que hemos comentado:

window.onload = function () {
var elemsH = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for (var i=0;i<elemsH.length;i++) {
elemsH[i].addEventListener("mouseover", cambiarColor1);
elemsH[i].addEventListener("mouseout", cambiarColor2);}
function cambiarColor1() { this.style.color = 'orange';}
function cambiarColor2() { this.style.color = 'brown';}
}

Aqu las funciones de respuesta al evento son cambiarColor1 y cambiarColor2. Y dentro de estas
funciones, this hace referencia al nodo del DOM (elemento) que recibe el evento.

2. this para referirnos a propiedades y mtodos de un objeto (ya estudiado)

Lo aplicamos cuando construimos objetos de esta forma:

function nombreDelTipoDeObjeto (par1, par2, , parN) {

this.nombrePropiedad1 = valorPropiedad1;
this.nombrePropiedad2 = valorPropiedad2;
this.mtodo1 = function () { cdigo . }
this.mtodo2 = function (param1, param2, , paramN) { cdigo }
}

aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

Aqu this sirve para aludir al objeto del cual estamos definiendo propiedades y mtodos. This nos
permite desambiguar los nombres y por ejemplo podemos tener como nombre de parmetro edad y
establecer this.edad = edad; quedando as claro que this.edad alude a la propiedad del objeto y edad al
parmetro recibido.

3. this para referirnos a un objeto especificado cuando usamos call y apply (ya estudiado)

La funcin call permite llamar a cualquier funcin JavaScript indicndole el objeto que actuar como
this dentro de la funcin llamada, as como los parmetros adicionales que sean necesarios.
Lo vemos en este ejemplo:

function Profesor (nombre) { this.nombre = nombre || 'Nombre desconocido'; this.salarioBase = 1200; }

function saludar() { alert ('Hola, soy ' + this.nombre); }
function ejemploObjetos() {
var unProfesor = new Profesor('Carlos');
saludar.call(unProfesor);
}

Aqu al invocar call sobre la funcin saludar, se indica que el objeto que actuar como this ser el objeto
unProfesor. Pero podra haber sido otro objeto, el que nosotros hubiramos querido.

Las funciones call y apply son muy similares, difieren tan solo en cmo pasan los parmetros a la
funcin invocada (como una lista de items separados por comas con call como un array con apply).

4. this por defecto

Si no usamos this en ninguno de los contextos anteriores, qu es this? This por defecto es el objeto
dentro del cual se invoca. Si no se invoca dentro de ningn objeto, el objeto por defecto es el objeto
global window.
Ejecuta este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
alert ('Aqu this es ' + this);
var miObjeto = {};
miObjeto.habla = function() {alert('Aqu ahora this es ' + this);}
miObjeto.habla();
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

El resultado esperado es <<Aqu this es [object Window]>> y <<Aqu ahora this es[object Object]>>
Ten en cuenta que dentro de ejemplo this no es el nodo del DOM porque ejemplo no es la funcin de
respuesta al evento. En realidad la funcin de respuesta al evento podemos decir que es una funcin
cuyo contenido es ejemplo(), es decir, una funcin que da lugar a la ejecucin de la funcin ejemplo,
pero esta funcin no es la funcin de respuesta al evento.

PERDER EL THIS

Toda funcin define un mbito y una funcin dentro de otra funcin puede hacer que this no se refiera
a lo mismo segn dnde lo usemos. Por ejemplo, si tenemos una funcin annima dentro de otra, this
en la funcin externa puede estar haciendo referencia al objeto envolvente mientras que this en la
funcin annima puede estar haciendo referencia al objeto global window.

La solucin para mantener una referencia a this en una funcin annima interna puede estar en crear
un closure. Definiramos como variable local a la funcin externa var that = this;, y luego en la funcin
annima interna haramos referencia a that, variable auxiliar que nos sirve para mantener la referencia
deseada.

En el ejercicio propuesto a continuacin veremos un ejemplo de esta situacin.

RESUMEN SOBRE THIS

Hemos visto distintas acepciones de this en JavaScript y posiblemente todava nos falten otras
acepciones y nos resulte difcil manejar este concepto y su importancia. No te preocupes ahora de
entender todo lo relacionado con este concepto. Contina avanzando con el curso, irs adquiriendo
destreza en el manejo de estas ideas a medida que desarrolles ms cdigo y te enfrentes a situaciones
variadas.

EJERCICIO

Analiza el siguiente cdigo y responde a las siguientes preguntas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
var cabecera = document.querySelector('#cabecera');
var respuestaCabecera = function () {
alert(this);
setTimeout(function () { alert(this);}, 2000);
};
cabecera.addEventListener('click', respuestaCabecera, false);
}
</script>

aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.

</head>
<body onload="ejemplo()"><div id="cabecera"><h2>Cursos aprenderaprogramar.com HAZ CLICK
AQU</h2><h3>Ejemplos JavaScript</h3></div>
</body>
</html>

a) Por qu se muestran diferentes mensajes si en ambos alert estamos invocando this?

b) Modifica el cdigo para que el mensaje que se muestre con retardo muestre lo mismo que el
mensaje que se muestra sin retardo. Para ello, haz que en la funcin annima sea conocida la
referencia a this que existe en la funcion externa.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01169E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Closures JavvaScript, ejemp
plos. Qu son y para qu sirve
en.

CLOSURESS JAVASCRIP
PT

Los closurres JavaScrip

pt son funcio
ones que llevvan informaccin asociada relativa al momento en
e que son
invocadass. No es fcil explicar ni entender el concepto de
d closure porque ste ees un tanto complejo.
Recomendamos que se estudie viendov ejemplos y se vaaya asimilanddo poco a p poco a medida que se
practique con el desarrollo de cddigo JavaScript.

Los closures, en casttellano deno ominados cierres, cerraduras o clau

usuras, son una caracte
erstica de
algunos leenguajes enttre los que see encuentra JavaScript.

Un closure se genera cuando se produce la sigguiente situaacin en el c

digo:

fu
unction funciionExterna(p
par1, par2, ,
parN){
var miVarriableLocal = un valor;
ncionInterna = function () {
var miFun
reeturn par1 - miVariableLo
ocal; // Situaacin que genera el closu
ure
}
return miFuncionInterna miFuncionInterna(); // Veremo
os ejemplos p
para entende
erlo
}

El closuree se genera cuando unaa funcin intterna a otra funcin usaa una variab
ble local (o parmetro
p
recibido) de la funcin on un ejemplo lo veremo
n externa. Co os ms claro::

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://www w.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co
om</title><metta charset="utf-8">
<script tyype="text/javasscript">

function dimeMsg(nomb bre){

var msg = 'holaa';
var respuesta = function () { alert(msg+
a ' ' + nombre); }
respuesta()
}

function ejemplo(){
e var habla1 = dimeMMsg('Juan'); }
</script></head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp
plos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<
</body><</html>

aprenderraprogramar.co
om, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

El resultado esperado es que se muestre por pantalla <<Hola Juan>>

La funcin interna tambin la podemos definir as (siendo equivalente al cdigo anterior):

function dimeMsg(nombre){
var msg = 'hola';
function respuesta () { alert(msg+ ' ' + nombre); }
respuesta()
}

A las funciones internas que hacen uso de variables locales de las funciones externas dentro de las
cuales se encuentran las denominamos cerraduras o closures. Una cerradura tiene unas
particularidades que trataremos de estudiar a continuacin. Ten en cuenta que los closures a veces se
generan intencionadamente y otras veces se generan sin querer. Pero de una forma u otra,
conviene entender qu implica que exista un closure para poder entender lo que ocurre en muchos
scripts.

El cdigo anterior parece que tiene poco inters, pero veamos cmo los closures tienen caractersticas
interesantes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function dimeVuelta(entrega){
var precio = 1000;
var respuesta = function () { return precio-entrega; } //Aqu el closure
return respuesta;
}

function ejemplo(){
var calcula = dimeVuelta(600);
alert('Su vuelta es ' +calcula());
}

</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>

El resultado esperado es que se muestre por pantalla: <<Su vuelta es: 400 >>

Analicemos el cdigo. La referencia respuesta es una cerradura o closure, ya que es una funcin
interna que utiliza variables locales de la funcin externa.

La funcin externa dimeVuelta devuelve como resultado una referencia a la funcin interna.

aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

Al ejecutar var calcula = dimeVuelta(600); lo que se almacena en calcula es una referencia a la funcin
interna. Es como si hiciramos calcula = function () { return precio-entrega; } Pero qu significado
tendran aqu precio y entrega, teniendo en cuenta que la funcin donde se definan ya se ejecut y por
tanto en principio estn fuera de un mbito vlido? Tericamente las variables globales a una funcin
son destruidas cuando termina de ejecutarse la funcin, por tanto precio y entrega supuestamente
deberan haber sido destruidas.

Sin embargo, cuando JavaScript encuentra un closure toda variable local que sea necesaria para el
funcionamiento del closure queda encerrada en el propio closure. Es decir, dado que respuesta
necesita de precio y entrega, stas se guardan dentro de la funcin cerradura.

Despus de ejecutarse var calcula = dimeVuelta(600); en la variable calcula tenemos almacenados el

precio (1000) y la entrega (600), aunque la funcin externa ya haya sido ejecutada.

Ahora calcula tiene una referencia a una funcin. Para ejecutar dicha funcin invocamos calcula(), y
dado que esta funcin recuerda los valores de variables locales devuelve 400 (obtenidos de 1000-400,
precio-entrega).

Ahora bien, qu valor de variable local es el que almacena el closure? Tener en cuenta que una
variable local puede cambiar a lo largo del cdigo. Por ejemplo:

function dimeVuelta(entrega){
var precio = 1000;
var respuesta = function () { return precio-entrega; } //Aqu el closure
precio = 700;
return respuesta;
}

El closure quedar tomando como referencia 1000 700? La realidad es que toma como referencia el
valor que tena la variable local cuando se produce la salida de la funcin externa (en este ejemplo justo
antes del return), por tanto en este caso el closure queda almacenando como precio un valor de 700.

Podra darse la situacin de que existan varias funciones internas a una funcin externa dada, y que
varias de esas funciones internas usen variables locales de la funcin externa. En este caso decimos que
se generan varias cerraduras (una por cada funcin interna que hace uso de variables locales), pero
aqu s es cierto que todas ellas quedan con una nica referencia de variable local: la que exista cuando
se produzca la salida de la funcin externa.

En el ejemplo anterior hemos usado la creacin de una referencia intermedia para despus invocar la
funcin:

function ejemplo() { var calcula = dimeVuelta(600); alert('Su vuelta es ' +calcula()); }

Pero la invocacin de la funcin podemos hacerla directamente si lo deseamos escribiendo esto:

function ejemplo() { alert('Su vuelta es ' +dimeVuelta(600)()); }

aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

Aqu dimeVuelta(600) nos devuelve la referencia a la funcin annima, y al aadir () a continuacin,

damos pie a su ejecucin directamente (sin necesidad de crear la referencia usando var).
Si escribes alert('Su vuelta es ' +dimeVuelta(600)); por pantalla obtendrs la funcin que devuelve la
funcin invocada, por tanto se ver << Su vuelta es function () { return precio-entrega; }>> o un mensaje
similar (puede variar segn el navegador).

CADA CLOSURE LLEVA SUS DATOS

Cuando se invoca la funcin externa se genera un closure y cada closure que se genere guarda sus
propias referencias, es decir, no se guarda una nica referencia para todos los closures. Un closure es
una combinacin de funcin y de datos relativos al momento de su creacin. En ese sentido podemos
decir que recuerdan a los objetos de la programacin orientada a objetos (objeto = datos + mtodos
closure = datos + funcin). Un closure sera un objeto con un solo mtodo. Ejecuta este cdigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">

function dimeVuelta(entrega){ var precio = 1000;

var respuesta = function () { return precio-entrega; } //Aqu el closure
return respuesta;
}

function ejemplo(){ var calculo1 = dimeVuelta(600); alert('Su vuelta es: '+calculo1());

var calculo2 = dimeVuelta(500); alert('Su vuelta es: '+calculo2());
}

</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>

El resultado es <<Su vuelta es: 400>> y <<Su vuelta es: 500>> porque cada closure guarda la referencia
al valor de las variables locales en el momento en que fueron creados.

El hecho de que cada closure guarde su informacin permite interesantes aplicaciones.

USAR CLOSURES PARA FUNCIONES RETARDADAS

Partimos del siguiente cdigo con el que tratamos de hacer que mediante un bucle for se cuente de 1 a
10 con intervalos de 1 segundo entre que aparezca cada nmero en pantalla. Ejecuta el cdigo y
comprueba qu ocurre:

aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
*{font-family: verdana, sans-serif;}
.nodoNuevo{background-color: black; color:white; width:100px;
text-align:center; padding:20px; font-size:32px; float:left;}
</style>
<script type="text/javascript">

function mostrarNumConRetardo() {
for(var i=1; i<11; i++){ setTimeout(crearNodo(i), 1000); }
}

function crearNodo(numero) {
var nodoHijo = document.createElement("div");
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+numero;
document.body.appendChild(nodoHijo);
}
</script>
</script></head>
<body onload="mostrarNumConRetardo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

Lo que ocurre es que se muestra por pantalla de forma inmediata todos los nmeros (1-2-3-4-5-6-7-8-9-
10) sin retardo.
Podemos pensar en tratar de arreglarlo con la siguiente modificacin:

function mostrarNumConRetardo() {
for(var i=1; i<11; i++){ setTimeout(crearNodo(i), 1000*i); }
}

Pero esto no funciona. Por qu? Porque el valor de i que se est pasando a setTimeout no es el valor
de i en cada bucle, sino la referencia a la variable i cuando setTimeout se ha ejecutado y el bucle ha
terminado, y esa referencia no tiene valor (ya que el bucle ha terminado).
Necesitamos que setTimeout recuerde el valor que tena i en cada pasada del bucle. Esto lo podemos
hacer creando un closure en cada pasada del bucle. Ejecuta este cdigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
*{font-family: verdana, sans-serif;}
.nodoNuevo{background-color: black; color:white; width:100px;
text-align:center; padding:20px; font-size:32px; float:left;}
</style>
<script type="text/javascript">

aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

function mostrarNumConRetardo() {
for(var i=1; i<11; i++){ setTimeout(function(x) { return function() { crearNodo(x); }; }(i), 1000*i); }
}

function crearNodo(numero) {
var nodoHijo = document.createElement("div");
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+numero;
document.body.appendChild(nodoHijo);
}
</script>
</script></head>
<body onload="mostrarNumConRetardo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>

Dentro del setTimeout invocamos la siguiente funcin:

function(x) { return function() { crearNodo(x); }; }(i)

Con esta sintaxis lo que hacemos es crear una funcin annima que recibe un parmetro x y que
devuelve otra funcin annima interna que crea un closure ya que usa el parmetro que recibe la
funcin externa. El closure recuerda el valor de la variable local (parmetro). Para ejecutar el closure,
invocamos la funcin externa pasndole (i) como parmetro, siendo i el contador del bucle. Esto fuerza
que setTimeout se ejecute con los valores que tena i en cada pasada del bucle, y no con una nica
referencia a i.

RESUMEN SOBRE CLOSURES Y MBITOS

Los closures son funciones que llevan datos asociados, relativos al momento en que fueron invocadas.

La existencia de closures aporta ventajas a la programacin con JavaScript, ya que podemos usarlos
para resolver necesidades que nos surjan. Pero tambin genera problemas: a veces se generan closures
sin querer con efectos indeseados. O a veces se crea un excesivo nmero de closures innecesariamente,
consumiendo recursos y haciendo ms lenta la ejecucin del cdigo.

Los closures son una parte de la programacin JavaScript que no es fcil de explicar ni de entender. Esto
podemos extenderlo en general a los mbitos y a la palabra clave this. No te preocupes si te has
perdido en algunas partes de las explicaciones que hemos dado. Sigue avanzando con el curso y trata
de ir adquiriendo destreza en la interpretacin y uso de closures a medida que sigas programando
JavaScript.

aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

EJERCICIO

Analiza el siguiente cdigo y responde a las siguientes preguntas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<style type="text/css">
body { font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>

<script type="text/javascript">
function cambiarDimensionFuente(size) { return function() { document.body.style.fontSize = size + 'px';};
}

var size8 = cambiarDimensionFuente(8);

var size16 = cambiarDimensionFuente(16);
var size24 = cambiarDimensionFuente(24);

function setClicks(){
document.getElementById('fuente-8').onclick = size8;
document.getElementById('fuente-16').onclick = size16;
document.getElementById('fuente-24').onclick = size24;
}

</script></head>
<body onload="setClicks()">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>
<div id ="fuente-24" > Poner texto a 24 </div> </div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer fro</p>
</body></html>

a) En qu parte del cdigo se genera un closure o cerradura? Por qu?

b) En qu parte del cdigo se establece que al hacer click sobre el elemento con id fuente-8 se cambie
el tamao de las fuentes de la pgina?

c) Supn que eliminamos la funcin setClicks y dejamos su cdigo libre dentro de las etiquetas
<script> </script>. Qu mensaje de error te muestra la consola de depuracin? (Activa la consola si
no la tienes activada) Por qu aparece ese mensaje de error?

d) Debemos escribir document.getElementById('fuente-8').onclick = size8;

document.getElementById('fuente-8').onclick = size8(); ?Por qu?

aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.

e) Supn que al cargar la pgina queremos que el tamao inicial de fuente sea 8 y para ello nos valemos
de la funcin setClicks. Debemos escribir dentro de esta funcin size8; size8();? Por qu?

f) Las closures no siempre son necesarias, incluso a veces se generan involuntariamente o

innecesariamente consumiendo recursos del sistema que podran ahorrarse. Qu ventajas le ves al uso
de closures en este cdigo? Y qu inconvenientes?

g) Reescribe el cdigo (hazlo como mejor creas cambiando todo aquello que consideres necesario) de
forma que obtengamos el mismo resultado pero sin hacer uso de closures.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01170E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Jerarqua de
e objetos JavaSScript. Objeto navigator:
n userrAgent...

JERARQUA DE OBJETTOS JAVASCR

RIPT

Recordemmos que window, el objeeto global en n JavaScript, tiene sus propiedades y mtodos. La funcin
que venim
mos usando para mostrrar mensajess por pantalla, alert, ess un mtodo o de windoww. Cuando
os alert('Holaa'); en realidaad estamos invocando window.alert(
escribimo w ('Hola');

Es decir, alert
a y windo
ow.alert son lo mismo paara el navegaador. El hechho de que no
o sea necesarrio escribir
window cuando
c escrib
bimos alert obedece
o ue si se invoca una funcin que no ha sido definida de otra
a qu
manera, ses considera que es un mtodo
m del objeto global,, es decir, un
n mtodo de window.

JavaScriptt define una jerarqua dee objetos qu

ue podemos reflejar de forma
f aproximada en un
n esquema
similar al siguiente:

En estas jerarqua
j po
odemos pensar en objettos predefinidos de JavaaScript (com
mo Math, Daate, String,
RegExp, etc.,
e incluido el objeto window).

Tambin podemos pensar

p en el objeto document que e contiene toda
t la info
ormacin rellativa a la
estructuraa del docum
mento HTMLL, lo que hem
mos llamado
o el DOM. NNo obstante,, debemos diferenciar
d

aprenderraprogramar.co
om, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...

entre la jerarqua del DOM, teniendo en cuenta que el DOM existe de forma independiente a
JavaScript, y la jerarqua de objetos JavaScript, aunque guarden cierta similitud organizativa.

Podemos ver una pgina web como una coleccin de objetos. Por ejemplo, para JavaScript un
formulario es un objeto, una imagen es un objeto, etc.

Los objetos tienen propiedades, mtodos y eventos asociados.

Los objetos se organizan conforme a una jerarqua de forma que heredan mtodos o propiedades de
sus objetos padre, e incluso el nombre de un objeto se crea a partir de sus objetos padre.

Todo documento HTML dispone de los siguientes objetos en la jerarqua de objetos JavaScript:

navigator: tiene propiedades relacionadas con el nombre y la versin del navegador, protocolos de
transferencia permitidos por el navegador (mime types) y sobre plugins instalados.

window: considerado habitualmente el objeto global o de mximo nivel. Tiene propiedades

relacionadas con la ventana del navegador. En caso de uso de frames (subventanas) hay un objeto
window por cada ventana hija que exista.

document: tiene propiedades relacionadas con el documento como ttulo, links, formularios, etc.

location: tiene propiedades relacionadas con la URL actual.

history: tiene propiedades relacionadas con URLs previamente visitadas.

Adems de estos objetos en el documento HTML existirn ms objetos segn su contenido: objetos
imgenes, objetos link, objetos formulario, etc.

CMO SE NOMBRAN LOS OBJETOS EN LA JERARQUA JAVASCRIPT

Para nombrar los objetos en la jerarqua de objetos JavaScript debemos tener en cuenta las siguientes
reglas:

1) El nombre de un objeto que desciende de otro en la jerarqua JavaScript incluye el nombre de los
objetos padre de la jerarqua. Por ejemplo el objeto document podemos nombrarlo como
window.document. Un objeto hijo es a su vez un objeto y una propiedad del objeto padre. document es
a su vez un objeto y una propiedad de window.

2) Dado que todos los objetos que podemos usar en el cdigo descienden de window, normalmente
omitiremos el uso de window a la hora de nombrar un objeto. Por eso escribiremos por ejemplo
document.body en lugar de window.document.body, aunque ambas formas son vlidas.

3) JavaScript organiza de forma automtica ciertos objetos de naturaleza mltiple en arrays. Por
ejemplo, una pgina web puede contener varios formularios. JavaScript, de forma automtica, crea un
array de objetos cuyo nombre es forms, siendo el primer formulario el de ndice 0 y sucesivamente el 1,
2, etc. representan los siguientes formularios que aparezcan en el documento HTML por orden de
aparicin. Nos podemos referir a un formulario como window.document.forms[0], o ms
frecuentemente: document.forms[0]

aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...

Entre los arrays de objetos que crea JavaScript automticamente tenemos:

forms: array con todos los formularios existentes en el documento HTML.

elements: array para cada formulario con los objetos que conforman dicho formulario (esto comprende
objetos text, button, checkbox, hidden, radio, textarea, etc.). Si el primer formulario de una web tiene 3
input de tipo texto nos podemos referir al ltimo de ellos como forms[0].elements[2]

images: array con todas las imgenes existentes en el documento HTML.

links: array con todos los links (tag HTML a) existentes en el documento HTML.

Para comprobar cmo podemos acceder a los objetos en la jerarqua de JavaScript escribe este cdigo y
comprueba los resultados (hemos incluido la ruta de dos imgenes, cmbiala si es necesario):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
window.document.images[0].style.border = 'solid blue 10px';
document.images[1].style.border = 'solid red 10px';
document.links[0].style.color = 'grey';
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"><a href="#"> Probar</a> </div>
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto" />
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo"
/>
</body>
</html>

El resultado esperado es que al pulsar sobre el texto Probar, la primera imagen adquiere un borde
azul de 10 pxeles de grosor, la segunda imagen un borde rojo del mismo grosor y el texto del link
queda de color gris. La sintaxis window.document.images[1] o simplemente document.images[1] nos
da acceso a la segunda imagen existente en el documento HTML.

A travs de la jerarqua de objetos de JavaScript podemos acceder a las propiedades de cada objeto por
separado. En el ejemplo anterior hemos visto cmo cambiar propiedades de estilo CSS, pero tambin
podramos acceder y modificar otras propiedades. Por ejemplo, introduce estas lneas y comprueba el
resultado:

var rut = 'http://aprenderaprogramar.com/images/stories/Libros/portada_libro_aprender_programar_java_lowres.jpg';

document.images[1].src = rut;

aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...

El resultado esperado es que al hacer click en el texto <<Probar>> una de las imgenes existentes deje
de mostrarse y pase a mostrarse otra, debido a que hemos accedido al objeto que representa la imagen
y hemos modificado su propiedad src (que define la ruta de la imagen).

El acceso a formularios y elementos de formularios suele ser de gran importancia con JavaScript, por lo
que lo estudiaremos por separado.

EL OBJETO NAVIGATOR

Podemos recuperar un objeto de tipo Navigator haciendo la invocacin objetoNav = window.navigator;

o dado que window no es necesario, simplemente escribiendo navigator.

Ese objeto Navigator dispondr de propiedades y mtodos que nos pueden ser tiles, aunque de
momento muchas de las propiedades y mtodos son experimentales o no responden de la misma
manera en los distintos navegadores. Vamos a citar aqu algunas de las propiedades:

PROPIEDAD UTILIDAD EJEMPLOS aprenderaprogramar.com

userAgent Devuelve una cadena de texto representando el alert(window.navigator.userAgent);

agente que se est empleando en la navegacin. // Por ejemplo Mozilla/5.0 (Windows NT 6.0;
Puede identificar el navegador empleado, pero no es rv:31.0) Gecko/20100101 Firefox/31.0
seguro porque puede configurarse para falsearlo.

battery Devuelve un objeto BatteryManager que puede usarse alert('Cargando?:

para obtener informacin sobre el estado de la '+window.navigator.battery.charging);
batera. No disponible para todos los navegadores. // Cargando?: true si est cargando

geolocation Devuelve un objeto Geolocation que puede usarse navigator.geolocation.getCurrentPosition

para obtener informacin sobre la ubicacin (latitud, (funcionSiExito, funcionSiFallo, arrayDeOpciones);
longitud) desde donde el usuario navega. Algunos
navegadores no responden bien. Otros restringen o
piden permiso al usuario por considerar que puede
atentar contra su privacidad.

language Devuelve un string representativo del lenguaje del var lenguaje = navigator.language ||
navegador. Algunos navegadores no disponen de navigator.userLanguage;
language pero en su lugar tienen disponible alert ('Cdigo lenguaje navegador: '+lenguaje);
userLanguage. Otros navegadores no reconocen ni una //Cdigo lenguaje navegador: es-ES por ejemplo
ni otra forma.

online Devuelve un valor booleano (true o falso) que indica si alert ('Estamos online?:
se est o no con conexin a internet. Combinado con '+window.navigator.onLine);
eventos (window.ononline y window.onoffline), puede // Estamos online?: true si estamos conectados
servir para mostrar un mensaje de alerta si se pierde o a internet
recupera la conexin.

Entre los mtodos de los objetos Navigator nicamente citaremos a Navigator.vibrate(), que genera la
vibracin de aquellos dispositivos (como smartphones) que admiten la vibracin.

aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...

EJERCICIO

Usando la propiedad userAgent de los objetos Navigator, determina el navegador que est usando el
usuario y muestra un mensaje por pantalla informando de ello. El resultado debe ser del tipo: <<Ests
usando: nombreNavegador>>, donde nombreNavegador ser Google Chrome, Apple Safari, Opera,
Mozilla Firefox, Microsoft Internet Explorer Desconocido. Resulvelo de dos maneras distintas:

a) Usando expresiones regulares.

b) Usando el mtodo indexOf de los objetos tipo String de JavaScript.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01171E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Propiedad window.locatio
w on y objetos tip
po Location en JavaScript.

WINDOW
W.LOCATION

Dentro de la jerarqu ua de objetos JavaScriipt existe un objeto deenominado location, qu ue es una

propiedad d de window. A su vez, se dice que q existen objetos dee tipo Location, siendo el objeto
window.lo ocation un ejemplo
e de este
e tipo de objetos.
o Conn este objeto
o podemos eextraer informacin de
la url (porr ejemplo parmetros reccibidos), redireccionar a otra pgina web, refreescar la web actual.

Recordem mos que dee forma aprroximada pu

uede repressentarse la jerarqua d
de objetos JavaScript
J
de la sigu
uiente maneera.

AD WINDOW
PROPIEDA W.LOCATION
N

La propiedad window o Location con informaccin relacionada con la

w.location deevuelve un objeto de tipo
URL del documento actual.

aprenderraprogramar.co
om, 2006-2029
Propiedad window.location y objetos tipo Location en JavaScript.

Vamos a citar aqu algunas de las propiedades de los objetos Location. Tener en cuenta que algunas de
ellas no son soportadas por algunos navegadores:

PROPIEDAD UTILIDAD EJEMPLOS aprenderaprogramar.com

Devuelve un string con la url completa. alert ('url actual: '+window.location.href);

window.location es equivalente a
href alert ('url actual: '+location.href);
document.location pero recomendamos
usar window.location. // Devuelve la url actual completa

Devuelve el protocolo de la URL,

alert ('protocolo actual: '+window.location.protocol);
protocol normalmente http https. Si trabajamos
//Devuelve por ejemplo http
en local ser file:

Devuelve el nombre del servidor,

normalmente como nombre de dominio, alert ('host actual: '+window.location.host);
host
y si existe un puerto especificado //Devuelve por ejemplo http://aprenderaprogramar.com
tambin, separado con :.

alert ('el hostname actual: '+window.location.hostname);

hostname Devuelve el dominio o servidor.
//Devuelve por ejemplo http://aprenderaprogramar.com

Devuelve la ruta excluido el nombre de alert ('El pathname actual: '+window.location.pathname);

pathname
dominio o servidor. //Por ejemplo devuelve /ejemplo1.html

alert ('Los parmetros en url: '+window.location.search);

Devuelve la cadena que representa los
search // Por ejemplo: Los parmetros en url:
parmetros que existen en la url.
?name=pepe&apellido1=perez&pais=ecuador

Devuelve # seguido de un texto si en la

alert ('Valor localizador #: '+ window.location.hash);
hash url existe un #seguido de un texto (ancla
// Por ejemplo: #final
de localizacin del fragmento html).

Devuelve una cadena que representa la alert ('Valor origin: '+ window.location.origin);
origin
raz del sitio web //Devuelve por ejemplo http://aprenderaprogramar.com

Vamos a citar aqu algunos de los mtodos de los objetos Location. Tener en cuenta que algunas de
ellas no son soportadas por algunos navegadores:

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

alert ('Transfiriendo a aprenderaprogramar: ');

Asigna una url a la ventana actual, lo que genera window.location.assign('http://aprenderaprogra
assign (urlDestino) que se cargue la urlDestino. El usuario puede mar.com');
volver atrs con el botn back del navegador. //Da lugar a que se cargue la url indicada con
posibilidad de volver atrs con el botn back

aprenderaprogramar.com, 2006-2029
Propiedad window.location y objetos tipo Location en JavaScript.

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

Da lugar a la recarga de la url actual. Si se indica alert ('Recargando la pgina... ');

reload como parmetro true, la recarga se har desde el window.location.reload(true);
(opcSiDesdeServidor) servidor (refresco completo). Si no se especifica //Se recarga la pgina desde el servidor (refresco
o es false la recarga puede ser desde cach. completo)

alert ('Reemplazando la pgina... ');

Asigna una url a la ventana actual, lo que genera window.location.replace('http://aprenderaprogra
replace (urlDestino) que se cargue la urlDestino. El usuario no puede mar.com');
volver atrs con el botn back del navegador. //Da lugar a que se cargue la url indicada sin
posibilidad de volver atrs con el botn back

Devuelve una cadena representativa de la url

alert ('Url actual: '+window.location.toString());
toString() (window.location.toString() devuelve lo mismo
//Devuelve la url actual
que window.location.href)

EJEMPLO DE USO DE WINDOW.LOCATION

Supongamos una url que se construye segn este patrn:

http://aprenderaprogramar.com/index.php?option=compra&moneda=euro&producto=libro1, donde el
parmetro option puede ser compra, venta o intercambio. El parmetro moneda puede ser
pesoMexicano, euro, pesoArgentino, pesoColombiano, bolivar, sol, pesoChileno. Y el parmetro
producto puede ser cualquier valor.

Y supongamos que queremos rescatar el valor que tenga el parmetro moneda usando JavaScript.
Podemos hacerlo de esta manera. Escribe este cdigo y gurdalo con nombre de archivo
ejemplo1.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
msg = '';
var moneda = extraerParametroUrl('moneda');
if (moneda) {alert ('El valor del parmetro moneda en la url es: '+moneda)}
else {alert ('No se recibe moneda en la url'); }
}
function extraerParametroUrl( nombreParametro ){
var regexS = "[\\?&]"+nombreParametro+"=([^&#]*)";
var regex = new RegExp ( regexS );
var tmpURL = window.location.href;
var results = regex.exec( tmpURL );
if( results == null ) { return "";} else {return results[1];}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"><a href="#"> Probar</a> </div>
</body></html>

aprenderaprogramar.com, 2006-2029
Propiedad window.location y objetos tipo Location en JavaScript.

A continuacin visualiza el archivo en tu navegador. El resultado esperado es que al pulsar el enlace

Probar se muestre: << No se recibe moneda en la url >>

Si aadimos el parmetro al final de la ruta, por ejemplo: / ejemplo1.html?moneda=pesoMexicano

El resultado esperado es que al pulsar el enlace Probar se muestre: <<El valor del parmetro moneda
en la url es: pesoMexicano>>

Este cdigo hace uso de expresiones regulares JavaScript. Si no recuerdas cmo funcionan stas, lee los
anteriores apartados del curso que hemos dedicado a expresiones regulares.

Hemos definido var regexS = "[\\?&]"+nombreParametro+"=([^&#]*)";

Esto representa una expresin regular JavaScript que comienza con ? &, viene seguido de
nombreParametro, seguido de un igual, y de cualesquiera caracteres hasta alcanzar el final de la cadena
un simbolo & un smbolo #, que seran las situaciones que nos indicaran que el valor del parmetro
ya ha sido extraido completamente. Recordar que dentro de corchetes el smbolo ^ funciona como
negacin. Al ejecutar exec sobre una cadena (en este caso la URL) el ndice [0] del resultado contiene el
valor completo, por ejemplo <<?moneda= pesoMexicano >>, mientras que el siguiente ndice contiene
el match correspondiente al primer parntesis, en este caso sera << pesoMexicano >>. El ndice [2]
contendra el match correspondiente al segundo parntesis, pero aqu slo tenemos un parntesis con
lo cual el ndice [2] no tiene valor definido.

Como conclusin de este ejemplo, vemos cmo podemos rescatar parmetros de una url enviados por
el mtodo GET haciendo uso de JavaScript de varias maneras: hemos visto mtodos especficos y esta
otra manera mostrada en este ejemplo, que al ser ms generalista asegura un buen funcionamiento en
todos los navegadores.

EJERCICIO

Crea una pgina web que al ser invocada muestre un mensaje Hemos cambiado de ubicacin esta
pgina. En breves momentos ser redireccionado junto a una cuenta atrs que muestre 5, 4, 3, 2, 1
(correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrs, el usuario
debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar
la propiedad window.location junto con funciones que permitan el retardo en la ejecucin vistas en
entregas anteriores del curso.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01172E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Propiedad window.history
w y: back, forwarrd, go. window.screen

WINDOW
W.HISTORY

Dentro dee la jerarquaa de objetos JavaScript exxiste un obje

eto denomin nado history, que es una propiedad
de window. A su vez,, se dice quee existen objjetos de tipo o History, sieendo el objeeto window.history un
ejemplo de
d este tipo de objetos. Con este ob bjeto podem mos trabajar con el historial de navegacin del
usuario y retroceder a una pgina anterior o avanzar
a pgin
nas visitadass.

Recordemmos que de forma aproxximada pued

de representtarse la jeraarqua de ob
bjetos JavaSccript de la
siguiente manera.

PROPIEDA
AD - OBJETO
O WINDOW.H
HISTORY

La propiedad window w.history devvuelve un ob bjeto de tipo

o History con n relacionada con las
n informaci
URLs visitadas por el usuario
u en laa pestaa acttual.

Por motivvos de seguridad, window

w.history no
o almacena in
nformacin sobre
s las urls concretas accedidas
por el ussuario, aunque permite moverse haacia delantee y hacia deetrs en las urls visitadaas usando
mtodos especficos para
p ello.

Vamos a citar aqu alggunas de lass propiedade

es de los objjetos Historyy. Tener en ccuenta que algunas
a de
ellas no so
on soportadaas por algunos navegadoores:

aprenderraprogramar.co
om, 2006-2029
Propiedad window.history: back, forward, go. window.screen

PROPIEDAD UTILIDAD EJEMPLOS aprenderaprogramar.com

Devuelve un entero que representa el

alert ('Valor window.history.length es: '+
nmero de elementos (urls) visitados
window.history.length);
length para esa pestaa y sesin por el usuario.
//Devuelve un entero, por ejemplo 4 si se han visitado 4
Si slo se ha visitado la url actual
direcciones web (3 ms la actual).
devuelve 1.

Un objeto asociado a la url actual, que

almacena propiedades informativas de
situaciones que existan durante la
alert ('Valor window.history.state es: '+ window.history.state);
state navegacin y que deben establecerse a
// Por defecto null
travs de cdigo de programacin. Su fin
es poder recordar situaciones que
existan durante la navegacin.

La propiedad state nos permitira por ejemplo almacenar un valor que hubiera elegido un usuario de un
formulario y que no se encuentra en la url pero podemos considerar como asociado a la historia de
navegacin.

Vamos a citar aqu algunos de los mtodos de los objetos History. Tener en cuenta que algunas de ellas
no son soportadas por algunos navegadores:

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

Carga la anterior url visitada en esa pestaa de window.history.back();

back() navegacin por el usuario. Equivale a que el //Carga la anterior url en la historia de
usuario pulsara el botn back del navegador. navegacin

window.history.forward();
Carga la siguiente url almacenada en el historial
forward() //Carga la siguiente url en la historia de
de navegacin del usuario para esa pestaa.
navegacin

Permite avanzar numeroUrls hacia delante o

window.history.go(-2);
go (numeroUrls) hacia detrs (con nmeros negativos). As
//Salta atrs dos urls en la historia de navegacin
history.go(-1) equivale a history.back()

Otros mtodos como history.pushState y

history.replaceState() permiten aadir o
Otros mtodos No vamos a presentar ejemplos de estos mtodos
modificar entradas de la historia de navegacin
del usuario.

Recordar que en el contexto global window.history.back() es equivalente a history.back(). No obstante,

si queremos dejar patente nuestra intencin de referirnos a window podemos escribirlo si as lo
preferimos.

aprenderaprogramar.com, 2006-2029
Propiedad window.history: back, forward, go. window.screen

Escribe este cdigo y comprueba su funcionamiento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function () {
var adelante = document.getElementById('irAdelante');
adelante.addEventListener("click", irAdelante);
var atras = document.getElementById('irAtras');
atras.addEventListener("click", irAtras);
function irAdelante() { this.style.color = 'orange'; window.history.forward();}
function irAtras() { this.style.color = 'red'; window.history.back();}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="irAdelante">Ir adelante</div>
<div style="color:blue; margin:20px;" id ="irAtras">Ir atras </div>
<a href="http://aprenderaprogramar.com">Pulsa para generar un avance y poder volver atrs con back</a>
</body>
</html>

Para comprobar el funcionamiento, accede a una pgina web, por ejemplo clarin.com, luego carga la url
correspondiente al archivo html y pulsa Ir atrs. Al pulsar, el navegador volver a clarin.com. Si pulsas
en el enlace Pulsa para generar un avance, luego pulsas el botn back del navegador y luego pulsas
sobre Ir adelante, el navegador cargar la web aprenderaprogramar.com porque es la que se
encuentra delante en el historial de navegacin.

EVENTO ONPOPSTATE

Existe un evento denominado onpopstate que se dispara cuando se produce un cambio de url
(navegacin, avance o retroceso) dentro del proceso de navegacin del usuario.

PROPIEDAD - OBJETO WINDOW.SCREEN

La propiedad window.screen devuelve un objeto de tipo Screen con informacin relacionada con la
pantalla donde el usuario est visualizando el documento HTML.

Vamos a citar aqu algunas de las propiedades de los objetos Screen. Tener en cuenta que algunas de
ellas no son soportadas por algunos navegadores. Recordar que para ver los mensajes con la instruccin
console.log hemos de tener abierta la consola del navegador.

aprenderaprogramar.com, 2006-2029
Propiedad window.history: back, forward, go. window.screen

PROPIEDAD UTILIDAD EJEMPLOS aprenderaprogramar.com

console.log( 'Ancho de pantalla en px: '+window.screen.width);

width Devuelve el ancho de pantalla, en pxeles
// Por ejemplo 1280 px

console.log('Alto de pantalla en px: '+window.screen.height);

height Devuelve el alto de pantalla, en pxeles
// Por ejemplo 800 px

Devuelve el ancho de pantalla disponible

console.log('Ancho de pantalla efectivo en px:
para visualizacin, descontados
availWidth '+window.screen.availWidth);
elementos fijos como barras que resten
// Por ejemplo 1280 px
espacio de visualizacin.

Devuelve el ancho de pantalla disponible

console.log('Alto de pantalla efectivo en px:
para visualizacin, descontados
availHeight '+window.screen.availHeight);
elementos fijos como barras que resten
// Por ejemplo 770 px debido a la barra de tareas
espacio de visualizacin.

colorDepth (calidad de color en bits),

pixelDepth (cantidad de colores que
Otras puede representar un pxel), y otras No veremos ejemplos sobre otras propiedades
propiedades experiementales como
orientation.

Los objetos Screen tienen algunos mtodos pero su uso est vinculado a prefijos especficos de
navegador o son tecnologas experimentales ms propias de smartphones y de tablets que de
desarrollos web habituales, por lo que no vamos a comentarlos aqu.

PROPIEDAD - OBJETO WINDOW.FRAMES

Si un documento HTML contiene frames iframes, el navegador crea un objeto window asociado al
documento HTML principal, y tantos objetos window adicionales como frames o iframes existan.

La propiedad window.frames devuelve un objeto de tipo array-like con los objetos tipo window (frames
iframes), que son subventanas de la ventana principal.

Para entender qu devuelve window.frames ejecuta este cdigo donde se accede de forma tradicional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
iframe = document.getElementsByTagName( "iframe" );
alert( "Tenemos: " + iframe[0].name + ', ' + iframe[1].name );
}
function ejemplo() {
for (var i = 0; i < iframe.length; i++) {iframe[i].style.background = "red";}
}
</script>

aprenderaprogramar.com, 2006-2029
Propiedad window.history: back, forward, go. window.screen

</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<iframe name="aprende1" style="margin:20px; padding:20px;" src="http://aprendeaprogramar.es" width="350"
height="600">
<p>Tu navegador no admite iframes.</p>
</iframe>
<iframe name="aprende2" style="margin:20px; padding:20px;" src="http://aprenderaprogramar.com/foros" width="350"
height="600">
<p>Tu navegador no admite iframes.</p>
</iframe>
</body>
</html>

En teora window.frames nos devolvera lo mismo que document.getElementsByTagName( "iframe" );,

pero en la prctica el resultado de usar esta propiedad es irregular y est influido por parmetros
(server side headers) que enva el servidor que sirve la pgina web dentro del frame o iframe que
pueden dar lugar a restricciones.

Si pruebas a hacer el cambio en el cdigo anterior: iframe = window.frames;

Al intentar ejecutarlo obtendrs un mensaje de error por consola (por ejemplo Error: Permission denied
to access property 'name', Error: Permission denied to access property 'style'). Sin embargo si en lugar
de intentar modificar el estilo intentas modificar la propiedad location, por ejemplo iframe[i].location =
"http://aprenderaprogramar.com"; no obtendrs este error.

EJERCICIO

Crea una pgina web que muestre en el lado izquierdo tres opciones donde podr pulsar el usuario:
clarin.com, elmercurio.cl y elespectador.com. En la parte inferior izquierda, debajo de estas opciones,
habr un frame donde deber cargarse la pgina web segn elija el usuario (por ejemplo si el usuario
pulsa en elmercurio.cl en el frame que se encuentra debajo deber mostrarse la web de elmercurio.cl).
En el lado derecho estarn las opciones eluniversal.com.mx, elcomercio.pe y elmundo.es. En la parte
inferior derecha, debajo de estas opciones, habr un frame donde deber cargarse la pgina web segn
elija el usuario.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01173E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objeto wind
dow JavaScriptt. Propiedades:: innerWidth, screenX, etc.

WINDOW
W JAVASCRIP
PT

Hemos viisto distintass propiedades del objetto window, que a su veez se constittuyen en ob
bjetos que
disponen de sus proppias propiedaades y mtoddos. Ya cono
ocemos muchas de las propiedades y mtodos
del objeto
o window, peero vamos ahora a repassar algunas y estudiar otrras nuevas.

Recordemmos que de forma aproxximada pued

de representtarse la jeraarqua de ob
bjetos JavaSccript de la
siguiente manera.

Un objeto
o window reepresenta un na ventana cuya organizaacin internaa es conform me al DOM (document
object mo
odel). En un navegador donde
d tengaamos abiertaas varias pestaas, cada pestaa equ
uivale a un
objeto window que tiiene su prop pia propiedad d document y con el quee podemos ttrabajar por separado.
Desde estta perspectivva, cada pesttaa es un ob
bjeto windoww. No obstan nte, hay algu
unos mtodo
os que slo
se puedeen aplicar sobre
s ventannas abiertass mediante JavaScript y no a la ventana principal de
navegaci
n del usuariio.

No tiene inters
i conocer de memoria cules son
s todas lass propiedadees de los objeetos windoww, pero s al
menos tener una ideaa o referenciaa que nos peermita buscar informaci
n cuando no os resulte ne
ecesario.

aprenderraprogramar.co
om, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.

Vamos a citar aqu de forma breve propiedades de los objetos window. Tener en cuenta que usando
JavaScript podemos crear ventanas auxiliares para mostrar al usuario distinto contenido, y que dichas
ventanas auxiliares tambin son objetos window. Cuando hablamos de dimensiones, posicionamiento y
coordenadas, pueden obtenerse resultados extraos si se trabaja con ms de un monitor.

PROPIEDAD UTILIDAD EJEMPLOS aprenderaprogramar.com

if (myWindow.closed) {alert('La ventana fue

Devuelve un valor booleano que indica si un objeto
closed cerrada');}
window creado previamente est cerrado o no
//Se muestra el mensaje si la ventana fue cerrada

document Devuelve el objeto document asociado a la Ya vistos durante el curso

ventana.

frames Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

history Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

Devuelve la altura en pxeles del rea de alert ('Altura en px del viewport es:
innerHeight contenidos (viewport) del navegador incluyendo '+window.innerHeight);
scrollbar si existe. // Por ejemplo 820

Devuelve la anchura en pxeles del rea de alert ('Anchura en px del viewport es:
innerWidth contenidos (viewport) del navegador incluyendo '+window.innerWidth);
scrollbar si existe. // Por ejemplo 1130

Devuelve el nmero de elementos frame iframe alert ('Elementos frame o iframe: '+window.length);
length
presentes en la ventana. // Por ejemplo 0

location Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

Devuelve o establece el nombre de una ventana. window.name='Aprender a programar';

Una ventana no tiene que tener nombre
name alert ('Valor name de ventana es: '+window.name);
obligatoriamente aunque puede ser til para
diferenciar entre ventanas si hay varias. // Valor name de ventana es Aprender a programar

navigator Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

Si desde una ventana se ha abierto otra, opener

devuelve una referencia a la ventana generadora if (window.opener){alert ('Nombre de la ventana que
opener o ventana desde la que se invoc la apertura de la abri esta: '+window.opener.name); }
ventana actual. Si es la ventana inicial de //Devuelve el nombre si existe una ventana padre
navegacin, opener devuelve null.

Devuelve la altura en pxeles de la ventana

alert ('Dimension vertical total:
completa hasta el lmite exterior de sus bordes
outerHeight '+window.outerHeight);
(quedando dentro de esta medida barras de men,
// Por ejemplo 1040
barras de estado, etc.).

Devuelve el ancho en pxeles de la ventana

alert ('Dimension horizontal total:
completa hasta el lmite exterior de sus bordes
outerWidth '+window.outerWidth);
(quedando dentro de esta medida barras de men,
// Por ejemplo 1296
barras de estado, etc.).

aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.

alert ('Scroll horizontal realizado:

Valor en pxeles indicativo de cunto scroll se ha '+window.pageXOffset);
pageXOffset
realizado en sentido horizontal. // 0 si no hay barra de scroll horizontal o no se ha
hecho scroll

alert ('Scroll vertical realizado:

Valor en pxeles indicativo de cunto scroll se ha '+window.pageYOffset);
pageYOffset
realizado en sentido vertical. // 0 si no hay barra de scroll vertical o no se ha hecho
scroll

Igual que pageXOffset. Se recomienda usar Igual que pageXOffset. Se recomienda usar
scrollX
pageXOffset. pageXOffset.

Igual que pageYOffset. Se recomienda usar Igual que pageYOffset. Se recomienda usar
scrollY
pageYOffset. pageYOffset.

Referencia a la ventana que aloja una subventana window.name = 'Aprender programacin';

(es decir, ventana que aloja un frame o iframe
parent alert ('Mi propio nombre es: '+window.parent.name);
tpicamente). Si no existe parent, devuelve una
referencia a s misma (la propia ventana). // Mi propio nombre es: Aprender programacin

screen Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

screenLeft Igual que screenX. Se recomienda usar screenX. Igual que screenX. Se recomienda usar screenX.

screenTop Igual que screenY. Se recomienda usar screenY. Igual que screenY. Se recomienda usar screenY.

alert ('Ventana a: '+window.screenX + ' pixels del

borde izquierdo de pantalla');
Devuelve la coordenada X relativa a la pantalla // Por ejemplo Ventana a: 0 pixels del borde
screenX (screen). Origen lateral izquierdo de la pantalla. izquierdo de pantalla
Valor en pixels. Nota: dependiendo del monitor y del navegador se
pueden obtener valores negativos (por ejemplo: -
1024x0 a 0x768).

alert ('Ventana a: '+window.screenY + ' pixels del

borde superior de pantalla');
Devuelve la coordenada Y relativa a la pantalla
// Por ejemplo Ventana a: 0 pixels del borde superior
screenY (screen). Origen borde superior de la pantalla.
de pantalla
Valor en pixels.
Nota: dependiendo del monitor y del navegador se
pueden obtener valores negativos como origen.

if (window.self.name){ alert ('Mi nombre es: ' +

self Devuelve una referencia a la propia ventana
window.self.name);} else {alert('No tengo nombre');}

Devuelve una referencia a la ventana principal if (window.top){ alert ('Soy la ventana principal');}
top
(ventana ms alta en la jerarqua de ventanas) // Soy la ventana principal si es la principal

Existen otras propiedades, algunas no

Otras No veremos ejemplos
estandarizadas.

aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.

EJERCICIO

El siguiente cdigo crea una ventana cuando se pulsa en el texto Pulsa aqu. Esta ventana es asignada
a una variable u objeto denominado nuevaVentana. Queremos conocer las siguientes propiedades del
objeto nuevaVentana y mostrarlas por pantalla: si est cerrada o no, dimensiones del viewport, nmero
de frames presentes en ella, url a la que apunta, valor de name, dimensiones de la ventana completa
hasta los bordes exteriores y cuntos pxeles est desplazada en horizontal y vertical respecto al punto
origen de la pantalla

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}
function ejecutarEjemplo () {
var nuevaVentana = window.open ('http://aprendeaprogramar.es', 'miNombre', 'width=300, height=300,
resizable=true, menubar=yes');
nuevaVentana.focus();
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
</body>
</html>

Aade el cdigo JavaScript necesario para mostrar esta informacin por pantalla.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01174E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Objeto wind
dow JavaScriptt. Mtodos. Efe
ectos. confirm, prompt

MTODOS DE WINDO
OW

Hemos viisto distintass propiedades del objetto window, que a su veez se constittuyen en ob
bjetos que
disponen de sus proppias propiedaades y mtoddos. Ya cono
ocemos muchas de las propiedades y mtodos
del objeto
o window, peero vamos ahora a repassar algunas y estudiar otrras nuevas.

o window reepresenta un
Un objeto na ventana cuya organizaacin internaa es conform me al DOM (document
object mo
odel). En un navegador donde
d tengaamos abiertaas varias pestaas, cada pestaa equ
uivale a un
objeto window que tiiene su prop pia propiedad d document y con el quee podemos ttrabajar por separado.
Desde estta perspectivva, cada pesttaa es un ob
bjeto windoww. No obstan nte, hay algu
unos mtodo
os que slo
se puedeen aplicar sobre
s ventannas abiertass mediante JavaScript y no a la ventana principal de
navegaci
n del usuariio.

No tiene inters cono

ocer de mem moria cules son todos los mtodos de los objettos window, pero s al
menos tener una ideaa o referenciaa que nos peermita buscar informaci
n cuando no
os resulte ne
ecesario.

Vamos a citar aqu alggunos de loss mtodos de

d los objeto os window. Cuando
C hablaamos de dim
mensiones,
posicionamiento y cooordenadas, pueden obttenerse resultados extraos si se traabaja con msm de una
pantalla (por ejemplo un porttil y una pantalla auxiliar).

MTOD
DO UTILIDAD EJEM
MPLOS apren
nderaprograamar.com

Muesstra una venttana de dilogo con la caadena

alert (men
nsaje) especcificada o con la conversin a string del objeto
o alert('hola usuario');
pasad
do como parm metro y un botn Aceptar

ndow.confirm(""Va a salir de la aplicacin

if (win
Abre un cuadro dee dilogo con un mensaje y dos
Desea salir realmente e?")) {
confirm
m botonnes, Aceptar y Cancelar. Devuelve
D un valor
windoow.alert('Gracias por visitarnoss'); }
(mensajje) booleeano: true si see pulsa aceptar o false si se pulsa
// Si usuario pulsa aceptar se cumple la
canceelar.
condiccin

clearInterval
Ya esttudiado. Ver en
ntregas anteriorres. Ya estudiado. Ver enttregas anteriores.
(referenciaTTimer)

clearTimeeout
Ya esttudiado. Ver en
ntregas anteriorres. Ya estudiado. Ver enttregas anteriores.
(referenciaTTimer)

Uso habitual
h var nuevaVentana = window.open ()
dondee nuevaVentana es una reeferencia al objeto o var nuevaVentan
na = window.open
w
open (opU
URL, windoow que se crea. opURL es un parmetro opccional, ('http://aprendeapro
ogramar.es', 'miiNombre');
opNamme) url a cargar en una nueva pestaa. opName no ombre o se especifica url de destino, se abre una
//Si no
opcional que puede usarse para fijaar atributo targget en pestaa en blanco
un link.

aprenderraprogramar.co
om, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

Uso habitual var nuevaVentana = window.open ()

donde nuevaVentana es una referencia al objeto
window que se crea. opURL es un parmetro opcional, var nuevaVentana = window.open
url a cargar en la nueva ventana. opName: nombre, ('http://aprendeaprogramar.es', 'miNombre',
open (opURL,
opcional, puede usarse para fijar atributo target en un 'width=300, height=300, resizable=true,
opName,
link. opParametros es una lista de parmetros como menubar=yes');
opParametros)
left top para posicin, height o width para // Puede haber diferencias entre navegadores
dimensiones, outerHeight, outerWidth, innerHeight, en la respuesta a algunos de los parmetros
innerWidth, menubar, toolbar, location, resizable,
scrollbars, status, titlebar

Cierra una ventana. Slo se pueden cerrar ventanas

que hayan sido abiertas por un script. No es posible nuevaVentana.close();
close()
cerrar la ventana principal del navegador por no //Cierra la ventana
abrirse por un script.

nuevaVentana.moveBy(200, 200);
nuevaVentana.focus();
Desplaza el objeto window una distancia valorX en // Si no usamos focus() la ventana puede perder
moveBy (valorX, horizontal y valorY en vertical, en pxeles, respecto de el foco y no ser visible.
valorY) su posicin inicial (movimiento relativo). No se pueden Si la ventana contiene una url que no pertenece
desplazar ventanas no creadas con scripts. al mismo directorio-dominio que la ventana
madre podemos obtener un error de tipo Error:
Permission denied to access property 'moveBy'

focus() Pone el foco en una ventana que lo ha perdido nuevaVentana.focus();

Coloca el objeto window en una posicin valorX en nuevaVentana.moveTo(0, 0);

moveTo(coordX, horizontal y valorY en vertical, en pxeles, respecto de nuevaVentana.focus();
coordY) la esquina superior izquierda de la pantalla. No se // Si no usamos focus() la ventana puede perder
pueden desplazar ventanas no creadas con scripts. el foco y no ser visible.

Abre el cuadro de dilogo para imprimir por impresora window.print();

print()
el contenido de la ventana

Muestra un cuadro de dilogo pidiendo una entrada al

usuario y, opcionalmente, un valor de defecto. var persona = prompt("Cul es tu nombre?",
prompt(msg, Devuelve un objeto String con el contenido "Barack Obama");
opValorDefecto) introducido por el usuario, o null si se pulsa la tecla if (persona != null) {alert("Hola " + persona);}
cancelar. Si se pulsa aceptar sin introducir nada //Por ejemplo <<Hola Pedro>>
retorna una cadena vaca.

Modifica el tamao de la ventana agrandndola o nuevaVentana.resizeBy(250, 250);

empequeecindola en la cantidad de pixels indicada
resizeBy (varX, nuevaVentana.focus();
por varX para la dimensin horizontal o varY para la
varY) // Si no usamos focus() la ventana puede perder
dimensin vertical. No se pueden redimensionar
ventanas no creadas con scripts. el foco y no ser visible.

nuevaVentana.resizeTo(100, 100);
Modifica el tamao de la ventana y lo establece a los
resizeTo(ancho, nuevaVentana.focus();
valores de ancho y alto especificados. No se pueden
alto) // Si no usamos focus() la ventana puede perder
redimensionar ventanas no creadas con scripts.
el foco y no ser visible.

aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt

MTODO UTILIDAD EJEMPLOS aprenderaprogramar.com

Hace scroll en la ventana en la cantidad de pixels

scrollBy(varX, window.scrollBy(0, 400);
indicada por varX para la dimensin horizontal o varY
varY) //Desplaza el scroll 400 pxeles hacia abajo
para la dimensin vertical.

Hace scroll hasta dejar como la esquina superior window.scrollTo(0, 400);

scrollTo(posX,
izquierda a posX pixeles del origen en horizontal y posY //Coloca el scroll 400 pxeles por debajo del
posY)
pxeles en vertical. origen

Hace scroll hacia arriba o abajo en el nmero de lneas

scrollByLines(nu
especificado. Una lnea se corresponde con un prrafo window.scrollByLines(20);
mLin)
<p>.

setInterval() Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

setTimeout Ya estudiado. Ver entregas anteriores. Ya estudiado. Ver entregas anteriores.

Detiene la carga de los contenidos de la ventana de la

stop() misma manera que si el usuario pulsara el botn para window.stop();
detener la carga en el navegador.

blur() quita el foco, btoa('cadena') codifica en base-64

una cadena y atob(referencia) decodifica una
Algunos de estos mtodos no son soportados
referencia codificada en base-64, fullScreen() indica si
Otros por todos los navegadores. No vamos a ver
la ventana est a pantalla completa o no,
ejemplos de ellos.
find('cadena') para buscar una cadena en la ventana,
minimize() para minimizar la ventana

EJEMPLO Y EJERCICIO

El siguiente cdigo nos sirve al mismo tiempo de ejemplo y de ejercicio. Ejecuta el cdigo y comprueba
sus resultados. Luego responde las preguntas y cuestiones que se plantean ms abajo.

Nota: si ests trabajando con una sola pantalla, el resultado esperado es que aparezca una nueva
ventana que se va moviendo de izquierda a derecha y de arriba abajo con un movimiento sinusoidal
(como una onda que sube y baja). Si ests trabajando con varias pantallas, es posible que el nico
movimiento que veas sea en horizontal. Por qu? Porque habr un monitor principal y un monitor
secundario. Con moveTo el navegador puede tratar de realizar el posicionamiento en un monitor que
no es el que t ests usando y en consecuencia no visualizarse lo esperado.

Nota: para comprender los detalles de este ejercicio hace falta tener conocimientos bsicos de
trigonometra (seno de un ngulo, clculos usando radianes). Si no tienes estos conocimientos no te
preocupes: sigue avanzando.

aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}

function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
nuevaVentana.setInterval( sine, 1000/30 );
}

function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
start += 2;
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}

</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
</body>
</html>

aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt

Preguntas y cuestiones a desarrollar:

a) Qu representa la variable start? Qu significado tiene que su valor inicial sea cero?

b) Qu representa la variable positionY? Qu significado tiene que su valor inicial sea

window.innerHeight/2-125 ?

c) Con qu frecuencia (cada cunto tiempo) se produce el refresco o redibujado de la pantalla?

d) Cuntos pxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el
navegador?

e) La base matemtica del movimiento que describe la ventana es el movimiento ondulatorio. Por qu
la ventana sube y baja?

f) Modifica el cdigo para que cuando la ventana llegue al lateral derecho de la pantalla se detenga su
movimiento y aparezca un mensaje (alert) con el texto Se termin!

g) Modifica el cdigo para que cuando la ventana llegue al lateral derecho de la pantalla haga un efecto
de rebote y empiece a moverse en sentido opuesto al que vena (es decir, subiendo y bajando pero
ahora de derecha a izquierda), hasta llegar al lateral izquierdo y volver a rebotar, y as
indefinidamente.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01175E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
JavaScript trabajo
t con form
mularios. docu
ument.forms. elements

TRABAJO CON FORMULARIOS JAV

VASCRIPT

En la jerarqua de objjetos JavaScrript que hem

mos visto pod
dramos disttinguir entree tres tipos de
d objetos:
objetos del
d navegado or (window, document, etc.), objeto os del lenguaje (Math, R RegExp, etc.) y por su
importanccia tradicion ogramacin JavaScript, los objetos campos de formularios. Vamos a
nal en la pro
hablar sobbre el trabajo con formularios en JavvaScript.

Cuando comenz
c el desarrollo de
d internet y de la proggramacin web w exista eel problema de que el
trabajo coon formularios era muy pesado.
p Sup n que un usuario deja unu campo dee un formulaario que es
obligatorio vaco: si la informaciin tiene qu ue ser enviaada al servid dor, en el sservidor procesarse la
informacin, comprob bar que hayy un campo vaco,
v y envviar una resp
puesta al usu uario inform
mndole de
que hay unu campo vaaco, se conssume tiempo, puede haaber interrup pciones, el u usuario se deesespera...
Por ello JaavaScript se convirti en
n una potentte herramien ucionar estee problema: realizando
nta para solu
la validacin del formmulario del lado del clientte (en el propio pc del ussuario) la deeteccin de un
u error es
instantnea y no req quiere comunicacin con n el servidorr. Slo cuando el formu ulario est co
orrecto se
permite sus envo. Po or esto el uso
u en form mularios ha sido una de las aplicaaciones princcipales de
JavaScriptt histricameente.

Si recordamos la jerarqua de objetos

o JavaScript podemos ver grficamente la importancia de los
formulario
os y campos de formularrios.

Hoy en da el trabajo con formulaarios no tienee tanta impo

ortancia com
mo la tuvo en
n el pasado, pero sigue
siendo un
n aspecto imp portante de la programaacin web y ded JavaScriptt.

aprenderraprogramar.co
om, 2006-2029
JavaScript trabajo con formularios. document.forms. elements

TODOS LOS FORMULARIOS EN FORMS

La propiedad forms del objeto document devuelve una coleccin de objetos tipo array conteniendo
todos los formularios que existan en el documento HTML, con ndice 0 para el primer formulario por
orden de aparicin, ndice 1 para el siguiente y as sucesivamente.

En este ejemplo vemos cmo podemos acceder a document.forms y obtener el nmero de formularios
existentes en el documento HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () { var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo); }
function ejecutarEjemplo () {
var formularios = document.forms; alert('El nmero de formularios en el documento es: '+formularios.length); }
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body></html>

TODOS LOS CAMPOS DE FORMULARIOS EN ELEMENTS

Si prestamos atencin a los campos de un formulario, cada uno de estos campos puede tener hasta dos
identificadores importantes. Por ejemplo:

<input id="nombreFormContacto" type="text" name="nombre" />

Estos identificadores son el id, que identifica de forma nica a un elemento dentro de un documento
html (es decir, el id es nico en toda la pgina web), y el atributo name, que identifica de forma nica a
un elemento dentro de un formulario (es decir, no habr dos elementos dentro de un formulario con el
mismo atributo name, pero s puede haber elementos en distintos formularios que tengan el mismo
atributo name.

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements

Es frecuente que id y name tengan un mismo valor, por ejemplo <input id="nombre" type="text"
name="nombre" />, pero no siempre ocurre as.

El atributo id, si existe, nos permitira acceder a este elemento del formulario usando el mtodo
getElementById('valorDeId').

La propiedad name posiblemente no nos sea til para acceder con getElementsByName debido a que
pueden existir varios elementos con el mismo name, sin embargo s nos va a ser til con mtodos para
trabajar con formularios de los que nos provee JavaScript de los que vamos a ir hablando.

La propiedad elements de cada objeto form obtenido mediante document.forms devuelve una
coleccin de objetos tipo array conteniendo todos los campos de formulario que existan en el
formulario concreto al que hagamos alusin, con ndice 0 para el primer elemento por orden de
aparicin, ndice 1 para el siguiente y as sucesivamente.

Cada campo de formulario es para JavaScript un HTML Object y como tal tiene propiedades a las que
podemos acceder. Por ejemplo name es una propiedad, value otra propiedad, id otra propiedad, etc.

Analiza este cdigo y comprueba sus resultados en tu navegador para ver cmo elements nos permite
acceder a los campos de formulario.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}

function ejecutarEjemplo () {
var msg = '';
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
msg = msg + '\n\nElemento '+j+ ' del formulario '+(i+1)+ ' tiene id: '+ formularios[i].elements[j].id;
msg = msg + ' y name: ' + formularios[i].elements[j].name;
}
}
alert (msg);
}

</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>

<form name ="formularioContacto" method="get" action="accion1.html">

<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements

<form name ="formularioReclamacion" method="get" action="accion2.html">

<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body></html>

El resultado esperado es que cuando pulsemos en el texto Pulsa aqu se muestre por pantalla lo
siguiente:

Elemento 0 del formulario 1 tiene id: nombreFormContacto y name: nombre

Elemento 1 del formulario 1 tiene id: apellidosFormContacto y name: apellidos
Elemento 2 del formulario 1 tiene id: botonEnvio1 y name:
Elemento 0 del formulario 2 tiene id: motivoFormReclama y name: motivo
Elemento 1 del formulario 2 tiene id: fechaFormReclama y name: fecha
Elemento 2 del formulario 2 tiene id: botonEnvio2 y name:

Vemos cmo usando elements hemos accedido a cada uno de los elementos HTML dentro del
formulario y mostrado sus propiedades. Vemos cmo los campos name correspondientes a los botones
de envo quedan vacos debido a que estos elementos input no tienen establecido atributo name.

ACCESO DIRECTO A FORMULARIOS MEDIANTE EL ATRIBUTO NAME

Aunque podamos acceder a cualquier elemento mediante el uso de

document.forms[indice1].elements[indice2], el acceso mediante ndices numricos posiblemente no
resulta cmodo. Adems, si introducimos nuevos elementos en los formularios o nuevos formularios,
los ndices numricos cambiarn y esto afectara al diseo de nuestro cdigo.

JavaScript provee una forma cmoda de acceder a los formularios a la que denominamos acceso
directo al formulario a travs de su atributo name. Para ello nos basamos en que cada formulario se
mantiene como una propiedad de document a la que se puede acceder escribiendo simplemente:

document.valorAtributoNameDelFormulario

De esta forma podemos obtener una referencia a un formulario simplemente con una expresin del
tipo: var formulario1 = document.formularioContacto; donde formularioContacto es el atributo name
de un formulario dentro del documento HTML.

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements

ACCESO DIRECTO A ELEMENTOS DE FORMULARIOS MEDIANTE EL ATRIBUTO NAME

Del mismo modo que podemos acceder a un formulario usando el valor de su atributo name, podemos
acceder a elementos de un formulario usando el atributo name de estos elementos con una sintaxis de
este tipo:

document.valorAtributoNameDelFormulario.valorAtributoNameDelElementoHTML

De esta forma podemos obtener una referencia a un elemento simplemente con una expresin del
tipo: var elemento1 = document.formularioContacto.apellidos; donde formularioContacto es el atributo
name de un formulario dentro del documento HTML y apellidos es el atributo name de un elemento
input dentro del formulario. Aunque en una primera lectura puede parecer un trabalenguas, leyndolo
un par de veces y viendo un ejemplo se comprender con facilidad.

Veamos el ejemplo. Escribe este cdigo, gurdalo con un nombre como ejemplo.html y visualiza los
resultados que se obtienen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () { var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo); }
function ejecutarEjemplo () {
var formulario1 = document.formularioContacto; dimeDatos(formulario1);
var formulario2 = document.formularioReclamacion; dimeDatos(formulario2);
}
function dimeDatos(formulario){
var msg=''; msg = msg + '\n\nElemento input del formulario '+formulario.name+ ' tiene id: '+ formulario.nombre.id;
msg = msg + '\n\nOtro elemento input del formulario '+formulario.name+ ' tiene id: '+ formulario.apellidos.id;
alert (msg+'\n\n');
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamacin</h2>
<label>Nombre:<input id="nombreFormReclamacion" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormReclamacion" type="text" name="apellidos" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body></html>

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements

En este ejemplo var formulario2 = document.formularioReclamacion; nos devuelve el objeto HTML que
es el form cuyo atributo name es formularioReclamacion. A su vez
document.formularioReclamacion.apellidos nos devuelve el elemento HTML que es el input cuyo
atributo name es apellidos.

Estos mismos resultados podran conseguirse combinando los distintos mtodos de acceso a nodos del
DOM que ofrece JavaScript (document.getElementById, getElementsByName, childnodes, etc.) o los
arrays document.forms y document.elements, pero el acceso basado en nombres resultar cmodo si
hemos creado una buena definicin de nombres en nuestro documento HTML.

ACCESO CON SINTAXIS MIXTA FORMS ELEMENTS NAME ID

Hay ms forma de acceder a los elementos de un formulario, e incluso al formulario en s.

Podemos acceder a formularios o a los elementos de un formulario con una sintaxis como:

var formulario1 = document.forms['valorAtributoIdDelFormulario'];

var elemento1 = formulario1.elements['valorAtributoIdDelElemento']

Por ejemplo var formulario1 = document.forms['form1']; nos permite acceder a un formulario cuyo
atributo id es form1.

Igualmente podemos acceder a formularios o a los elementos de un formulario con una sintaxis como:

var formulario1 = document.forms['valorAtributoNameDelFormulario'];

var elemento1 = formulario1.elements['valorAtributoNameDelElemento'];

Por ejemplo var formulario1 = document.forms['formularioContacto']; nos permite acceder a un

formulario cuyo atributo name es formularioContacto.

Finalmente, un elemento de un formulario tiene una propiedad que es una referencia al formulario en
el cual est inserto. La sintaxis sera del tipo:

var formulario1 = document.getElementById['valorIdDelCampo'].form;

Suponiendo que un formulario tiene un campo como: <label>Apellidos:<input

id="apellidosFormContacto" type="text" name="apellidos" /></label>, podemos acceder al formulario
usando document.getElementById('apellidosFormContacto').form

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements

EVENTOS RELACIONADOS CON FORMULARIOS

Ya hemos mencionado los eventos relacionados con formularios en apartados anteriores del curso,
cuando tratamos los eventos. Recordar que los principales eventos son onfocus (un elemento toma el
foco), onblur (prdida del foco), onchange (cambio), onselect (seleccin de texto de un elemento input
o textarea), onsubmit (pulsar botn de envo, antes del envo), y onreset (pulsar botn de cancelacin).

EJERCICIO

Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido
introducido por el usuarios sea vlido. Crea un formulario que conste de cinco campos: nombre,
apellidos, email, ciudad y pas. Usando el evento onsubmit, realiza la validacin para:

a) Comprobar que en el momento del envo ninguno de los campos tiene menos de dos caracteres (es
decir, si est vaco, contiene una letra o dos letras se considerar no vlido) accediendo a los campos
mediante document.forms y elements.

b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por
ejemplo formularioContacto.apellidos hara alusin a un elemento input cuyo atributo name es
apellidos en un formulario cuyo atributo name es formularioContacto)

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01176E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
JavaScript trabajo
t con form
mularios. setAtttribute y getAttribute.

FORMULA
ARIOS. SETA
ATTRIBUTE Y GETATTRIBU
UTE

JavaScriptt facilita el trabajo

t con formularioss proveindo onos de form mas de acceeso simplificaadas a los
formulario os y sus elem
mentos interrnos. Estas fo
ormas de accceso directo son ligeramente distintaas a lo que
es el acceeso al resto de
d nodos dell DOM, aunq que al fin y al cabo lo quee logramos ees lo mismo: acceder a
un nodo.

mento describimos el DO
En su mom OM, y ahora creemos
c opo
ortuno record
dar algunas ccosas que yaa habamos
estudiado
o para refresccarlas.

pales tipos de nodos en el

Los princip e DOM son:

D
Document: el nodo docum
ment es el no
odo raz, a partir del cual derivan
d el ressto de nodoss.

Ellement: son los nodos definidos

d porr etiquetas html.
h Por ejeemplo una eetiqueta div genera un
noodo. Si dentro de ese divv tenemos tres etiquetas p, dichas etiquetas
e deffinen nodos hijos de la
ettiqueta div. Un
U formulario
o y los elemeentos de un formulario
f on nodos element.
so

Teext: el texto dentro de unu nodo elem

ment se conssidera un nu
uevo nodo hiijo de tipo te
ext (texto).
Loos navegadores tambin crean nodoss tipo texto sin contenido
o para repressentar elementos como
saaltos de lneaa o espacios vacos.
v

Attribute: los atributos dee las etiquetaas definen nodos, aunqu

A ue trabajando o con JavaSccript no los
veeremos como nodos, sin no que lo con nsideramos informacin
i asociada al nodo de tipo o element.
Paara trabajar con formularios nos va a interesar co onocer los attributos de lo
os formularioos y de los
ellementos de los formularrios. De esta forma podre emos recupeerarlos para rrealizar verificaciones o
ejjecutar condicionales, o modificarlos.
m

Coomentarios y otros: loss comentario omo las declaraciones doctype

os y otros elementos co d en
caabecera de lo
os documenttos HTML gen
neran nodos.

Existen ms tipos de nodos

n en el DOM,
D pero dee uso ms inffrecuente.

Un fragmeento de cdiigo como estte:

<bodyy>
<div id
d="cabecera" class="brillante"
c ">
<h1>PPortal web <spaan class="destaacado">aprendeeraprogramar.ccom</span>, paara aprender<//h1>
<h2>DDidctica y divu
ulgacin de la programacin<//h2>
</div>>
</boddy>

aprenderraprogramar.co
om, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.

Se puede ver como un rbol de nodos del DOM:

TIPOS DE NODOS EN EL DOM

Element body

id Attribute
Element div class Attribute

Element h1 h2 Element

Portal web span class , para aprender Didctica y

Attribute divulgacin
Text Element Text de la
programacin

Text
aprenderaprogramar.com Text

Una etiqueta como la etiqueta input de un formulario genera un nodo. Sus atributos id, name, size, etc.
diremos que son propiedades del nodo. Por ejemplo supongamos un elemento input de tipo texto. Si
escribimos algo como var nodo = document.getElementById('nombreFormularioContacto') nos
devuelve un nodo, y escribiendo nodo.maxlenght podemos recuperar o establecer un valor para esta
propiedad del nodo.
No todos los nodos de tipo element tienen las mismas propiedades disponibles. Por ejemplo un nodo
de tipo input de un formulario que es un campo de texto dispondr de un atributo maxlength, pero un
nodo span no dispondr de este atributo. Las propiedades de los nodos estn por tanto ligadas a la
definicin del estndar HTML, que para cada elemento HTML define una serie de atributos permitidos.
Por tanto, para trabajar con estas propiedades en JavaScript, tendremos que conocer o remitirnos al
estndar HTML para saber a qu propiedades podemos acceder.
En general las propiedades son accesibles y modificables mediante JavaScript.

HTML FRENTE A DOM Y maxlength FRENTE A maxLength

Vamos ahora a pensar en los elementos input de los formularios. Estos elementos si son de tipo text
tienen como atributo opcional una longitud mxima en nmero de caracteres. Por ejemplo <input
id="nombreFormContacto" type="text" name="nombre" maxlength="4"/> indica que para este input el
nmero mximo de caracteres que podr introducir el usuario por teclado es 4.

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.

Supongamos que usamos nodo = document.getElementById('nombreFormContacto') para recuperar el

nodo del DOM correspondiente a este elemento. Este nodo tiene atributos como type que podemos
recuperar como nodo.type. Igualmente podramos pensar que nodo.maxlength nos debera devolver el
valor del atributo maxlength del elemento. Sin embargo no ocurre as, y tenemos que escribir
nodo.maxLength con la L mayscula intermedia para poder recuperar el valor del atributo con
JavaScript. Por qu?
Pues bsicamente por el mismo motivo por el que no podemos acceder a las propiedades CSS de los
elementos con exactamente los mismos nombres en JavaScript y en CSS. Por ejemplo, podemos
recordar que en CSS escribimos background-color: red; mientras que en JavaScript usamos una sintaxis
como nodo.style.backgroundColor = 'red';
JavaScript nos da acceso al DOM y a la manipulacin de elementos del DOM, pero no se cie siempre a
la sintaxis especificada por estndares como CSS HTML.
Muchas propiedades se escriben igual en HTML que con JavaScript. Por ejemplo la propiedad type de
HTML encuentra su equivalente en una sintaxis de tipo nodo.type. Pero no siempre ocurre as.
En el caso de maxlength, para acceder a esta propiedad a travs de JavaScript hemos de escribir
maxLength. En general podemos decir que se sigue la sintaxis camelCase, pero siempre debemos
hacer comprobaciones porque puede haber casos especiales.
Escribe este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () {
var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo);
}

function ejecutarEjemplo () {
var msg = '';
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' ) {
msg = msg + '\n\nValor inicial maxlength: '+formularios[i].elements[j].maxLength;
msg = msg + '\n\nFijada longitud mxima 5 para elemento con id: '+formularios[i].elements[j].id;
formularios[i].elements[j].maxLength=5;
}
}
}
alert (msg);
}

</script>
</head>

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body></html>

El resultado que hemos obtenido con este cdigo ha sido que despus de pulsar sobre Pulsa aqu las
casillas de texto quedan con un mximo de 5 caracteres admitidos para entrada y que por pantalla se
muestra los siguiente:

Navegadores 1 y 2 Navegador 3

Valor inicial maxlength: 4 Valor inicial maxlength: 4

maxlength ahora 5 para: nombreFormContacto maxlength ahora 5 para: nombreFormContacto
Valor inicial maxlength: -1 Valor inicial maxlength: 2147483647
maxlength ahora 5 para: apellidosFormContacto maxlength ahora 5 para: apellidosFormContacto
Valor inicial maxlength: -1 Valor inicial maxlength: 2147483647
maxlength ahora 5 para: motivoFormReclama maxlength ahora 5 para: motivoFormReclama
Valor inicial maxlength: -1 Valor inicial maxlength: 2147483647
maxlength ahora 5 para: fechaFormReclama maxlength ahora 5 para: fechaFormReclama

Lo que nos llama la atencin de este resultado es: cmo distintos navegadores devuelven un resultado
distinto cuando maxlength no est establecida (en unos casos obtenemos -1, que interpretamos como
una seal de valor no establecido, y en otros 2147483647 que interpretamos como el valor ms grande
para un entero, que interpretamos como que no existe lmite en el nmero de caracteres que se
pueden introducir en el input.
Prueba ahora a sustituir en el cdigo anterior maxLength por maxlength. Abre la consola de depuracin
de tu navegador y comprueba cmo no aparece ningn error. Sin embargo, despus de hacer click en
Pulsa aqu los input siguen sin cambiar el lmite de caracteres admitido. Por qu? En este caso, lo
que estaramos haciendo al invocar formularios[i].elements[j].maxlength sera invocar una propiedad
que no existe sobre un objeto, y esto nos devuelve undefined, que es precisamente lo que se muestra
por pantalla. Al escribir formularios[i].elements[j].maxlength=5; no estamos modificando el atributo
que limita el mximo nmero de caracteres admisible, sino que estamos creando un nuevo atributo al
que hemos denominado maxlength con minsculas, y que hemos establecido con valor 5. Pero esto es
lo mismo que si hubiramos escrito formularios[i].elements[j].lechugas = 5; ya que podemos escribir
una nueva propiedad de un objeto y asignarle un valor en el momento en que queramos.

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.

ENCONTRAR LAS EQUIVALENCIAS ENTRE HTML Y JAVASCRIPT

El HTML y el propio JavaScript son realidades relativamente cambiantes: a medida que surgen nuevos
estndares, nuevas versiones de navegadores, van apareciendo nuevas formas sintcticas y
propiedades, por lo que es casi imposible encontrar un lugar donde tengamos todas las propiedades
HTML y sus equivalentes para JavaScript.
Nos encontramos ante un pequeo problema: cmo encontrar las equivalencias entre la sintaxis HTML
y la sintaxis JavaScript?
De forma orientativa podemos seguir las siguientes reglas:
1) Escribe la propiedad en JavaScript de la misma forma que lo haras en HTML. Esto es vlido para la
gran mayora de propiedades como value, src, type, etc.
2) Si no funciona lo anterior usa sintaxis camelcase, por ejemplo maxLength para JavaScript frente a
maxlength para HTML.
3) Si tienes dudas sobre la sintaxis o existencia de una propiedad en HTML, busca la referencia HTML
correspondiente. Por ejemplo, si quieres utilizar un elemento input y conocer sus propiedades vlidas
en HTML puedes recurrir a un libro o a una bsqueda en internet donde buscaramos <<input HTML>>
<<input HTML mozilla developer>>. En este caso hemos optado por incluir <<mozilla developer>> en
la bsqueda para acceder a la documentacin que facilita la fundacin Mozilla al respecto, que suele
ser de buena calidad en lneas generales. Por ejemplo, encontraramos que nos aparece maxlength y
nos indica If the value of the type attribute is text, email, search, password, tel, or url, this attribute
specifies the maximum number of characters (in Unicode code points) that the user can enter
4) Para conocer el equivalente para JavaScript nos hemos de remitir a la especificacin del DOM. Por
tanto haramos una bsqueda en internet del texto <<html input element dom>> <<html input
element dom mozilla developer>>. En los resultados de bsqueda comprobaremos que existe la
propiedad maxLength, de la que se indica Reflects the maxlength HTML attribute, containing the
maximum length of text

SETATTRIBUTE Y GETATTRIBUTE
JavaScript provee ms formas de acceder y modificar los atributos HTML relacionados con un nodo.
Vamos a ver una de ellas. Podemos usar esta sintaxis para establecer el valor de un atributo:

nodo.setAttribute('nombreAtributoHMTL', 'valorAtributoHTML');

O esta otra sintaxis para recuperar el valor del atributo:

nodo.getAttribute('nombreAtributoHMTL');

En general se recomienda el acceso directo a las propiedades, por ejemplo nodo.type = 'text'; en lugar
de usar nodo.setAttribute('type', 'text'); pero la alternativa est ah y debe conocerse.

aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.

En este caso, donde se indica nombreAtributoHTML tendremos que usar la forma de nombrar el
atributo con HTML. Por ejemplo si nos referimos a maxlength, habremos de escribirlo todo en
minsculas.

EJERCICIO

Dado el siguiente cdigo HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body>
</html>

Crea un script que recorra todos los elementos input dentro de cada uno de los formularios presentes y
si son de tipo text, modifique su atributo asociado maxlength usando el mtodo setAttribute de los
objetos tipo Element para limitar a 8 el nmero mximo de caracteres que pueda introducir el usuario.
Una vez modificado el atributo, muestra por pantalla el valor que tiene dicho atributo para todos los
elementos de tipo input usando el mtodo getAttribute.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01177E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListenerr con parmetrros

ADDEVEN
NTLISTENER CON
C PARM
METROS

Vamos a seguir estud diando formmularios, perro vamos a detenernos en ver cm mo podemos utilizar el
mtodo addEventList
a ener con paarmetros. Con
C lo que hemos
h estud
diado anterio
ormente sobbre mbito
de variables, closuress, etc. vamoss a ser capacces de resolvverlo, aunqu
ue no es sencillo y merece la pena
estudiarlo
o paso a pasoo.

Nos plantteamos querrer aadir reespuesta a evventos cuando el usuario hace click sobre un inputbox de
un formulario.

Escribe esste cdigo y comprueba

c s resultado
sus os:

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://wwww.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo1 aprendeeraprogramar.ccom</title><me eta charset="uttf-8">
<style typpe="text/css"> label{display:block;margin:5px;}</style>
<script tyype="text/javasscript">
window.o onload = functioon () {
var formulario
os = document.fforms;
formularios['fo
ormularioContaacto'].elementss['nombreFormContacto'].addEventListener('click', cambiaC Color);
formularios['fo
ormularioContaacto'].elementss['apellidosForm
mContacto'].addEventListenerr('click', cambiaColor);
}
function cambiaColor
c () {this.style.backkgroundColor=''yellow'; }
</script></head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
<form name ="formularrioContacto" meethod="get" acction="accion1.html">
<h2>Form mulario de conttacto</h2>
<label>No ombre:<input id="nombreForrmContacto" type="text" name e="nombre" maxlength="4"/>></label>
<label>Ap pellidos:<input id="apellidosFormContacto" type="text"
t name="apellidos"" /></label>
<label><input id ="botonEnvio1" type=="submit" valuee="Enviar"></laabel>
</form>
<form name ="formularrioReclamacion" method="gett" action="accio on2.html">
<h2>Form mulario de reclaamacin</h2>
<label>MMotivo reclamaccin:<input id=""motivoFormReeclama" type=""text" name="m motivo" /></lab bel>
<label>Feecha del hecho::<input id="fechaFormReclam ma" type="text" name="fecha" /></label>
<label><input id="boton nEnvio2" type="submit" value="Enviar"></label>
</form><</body></html>>

do esperado
El resultad o es que cuan
ndo hagamo
os click sobre
e un inputbo
ox del primerr formulario,, ste pase
a tener coolor de fondo
o amarillo.

Es interessante ver c
mo dentro de la funci n cambiaCo
olor, la referrencia this nos devuelve
e el objeto
HTML que dispara el evento. P Por qu? Se ha explicaddo en anteriores entreggas del curso o, pero lo
recordammos aqu: thiss usada dentro de una funcin manejjadora de evvento nos devuelve el nodo de tipo

aprenderraprogramar.co
om, 2006-2029
this.style is undefined. addEventListener con parmetros

Element definido por las etiquetas HTML que reciben el evento. Y en este caso cambiaColor es una
funcin manejadora del evento click para los input de los formularios.

Pero el cdigo planteado no es muy eficiente: si quisiramos hacer esto mismo para todos los inputbox
de todos los formularios y tuviramos muchos, tendramos que escribir mucho cdigo a mano.

Adems expresiones como formularios['formularioContacto'].elements['apellidosFormContacto'] no

nos generan mucha seguridad porque qu ocurre si se cambian los nombres asociados a los
formularios o los campos? El cdigo dejara de funcionar.

Por ello veremos vamos a intentar buscar una solucin ms genrica (ms abstracta). Pero primero
repasaremos algunos conceptos.

FUNCIONES MANEJADORAS DE EVENTOS CON NINGN O UN PARMETRO

Recordamos ahora cosas ya explicadas anteriormente en el curso pero que conviene repasar. Una
funcin manejadora de un evento recibe de forma automtica un objeto de tipo Event. Este objeto es
un argumento que se pasa automticamente cuando se invoca la funcin al dispararse el evento. El
nombre de este argumento es el que nosotros decidamos, es decir, podemos llamarlo evobject,
eventoDatos, miEvento u objetoRepresentaEvento, etc. y para poder usarlo hemos de declararlo como
parmetro de la funcin.

Ejemplo:

function cambiaColor (elEvento) {

alert('Detectado evento de tipo: '+elEvento.type);
this.style.backgroundColor='yellow';
}

En el ejemplo anterior, el parmetro el evento se recibe siempre que la funcin se invoque como
respuesta a un evento. Con el cdigo que hemos visto previamente y esta funcin manejadora del
evento, cuando se hiciera click en el inputbox se mostrara por pantalla << Detectado evento de tipo:
click>> y seguidamente el color del cuadro del inputbox pasara a ser amarillo.

Podra una funcin manejadora de evento invocarse sin ser como respuesta a un evento? S, aunque
hay que tener en cuenta cmo funciona JavaScript a este respecto.

Si estamos usando la funcin <<function cambiaColor ()>> que carece de parmetros significa que el
objeto tipo Event que se enva automticamente cuando sucede el evento no es recuperable Por qu?
Porque para poder recuperarlo necesitamos especificar un parmetro en la definicin de la funcin que
represente al objeto Event que se enva automticamente. En un caso as podemos invocar la funcin
de un modo como este: <<cambiaColor.call(document.body);>> dando como resultado que la funcin
se ejecutar tomando como this al objeto document.body.

En cambio si estamos usando la funcin <<function cambiaColor (elEvento)>> y hacemos una

invocacin como <<cambiaColor.call(document.body);>> podemos obtener un error del tipo 'elEvento
is undefined'. Este error aparece si tratamos de usar el parmetro (que es el Evento que se enva

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

automticamente en segundo plano) cuando en este caso no ha existido evento, sino simplemente una
invocacin directa para la ejecucin de la funcin.

Podramos usar un cdigo como este para diferenciar si la funcin se ejecuta como respuesta al evento
o por invocacin directa desde el cdigo:

function cambiaColor (elEvento) {

if(elEvento){ alert('Detectado evento de tipo: '+elEvento.type); }
this.style.backgroundColor='yellow';
}

De esta manera, si no se recibe el parmetro, no se intenta hacer uso de l.

FUNCIONES MANEJADORAS DE EVENTOS CON MS DE UN PARMETRO

Supongamos que queremos enviar a la funcin manejadora del evento un parmetro que represente el
color de fondo que debe adquirir el elemento.

Podramos pensar en algo como esto (mala idea):

function cambiaColor (elColor) {

alert(elColor);
if(elColor) {this.style.backgroundColor=elColor;}
else {this.style.backgroundColor='yellow'; alert(this);}
}

Esta idea falla porque no tiene en cuenta una cosa: si la funcin se ejecuta como respuesta a un evento,
el primer argumento (no explcito, pero existente) es el objeto Event asociado al evento. Con un cdigo
como el anterior tendramos este resultado:

Si la funcin se invoca desde cdigo con una sintaxis como cambiaColor.call(document.body, 'pink'); el
resultado es: << Argumento recibido: pink>>

Si la funcin se invoca como respuesta a un evento el resultado es: <<Argumento recibido: [object
MouseEvent]>>

Si pretendemos que esta sea una funcin manejadora de eventos a la que le podamos pasar un
parmetro como el color deseado, deberemos escribirla siguiendo esta idea:

function cambiaColor (elEvento, elColor) {

if(elEvento){ alert('Detectado evento de tipo: '+elEvento.type); }
if(elColor){ alert('Argumento recibido: '+elColor); }
if(elColor) {this.style.backgroundColor=elColor;}
else {this.style.backgroundColor='yellow';}
}

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

Si quisiramos invocar de forma directa esta funcin, tendramos que hacerlo incluyendo dos
parmetros porque la definicin de la funcin as lo requiere. Pero si no hay evento, qu ponemos
como primer parmetro? Tendremos que decidirlo, pero por ejemplo podemos simplemente pasar la
cadena vaca. La funcin la podramos invocar directamente desde cdigo con una sintaxis como esta:

cambiaColor.call(document.body, '', 'pink');

Aqu vemos que el argumento correspondiente al objeto Event, dado que no hay evento, lo enviamos
como cadena vaca. La funcin, si es que va a usarse de esta manera, tendra que tener previsto el
tratamiento oportuno.

Posiblemente en nuestro cdigo las funciones manejadoras de eventos no van a ser invocadas
directamente, pero el ejemplo anterior nos ha servido para comprender mejor la lgica a aplicar con
este tipo de funciones.

BUSCANDO UNA SOLUCIN MS GENRICA PARA MEJORAR NUESTRO CDIGO

Volvemos a nuestro cdigo con dos formularios, sobre el que estamos tratando de hacer que el color de
fondo de las cajas de los inputbox cambie cuando hagamos click sobre ellos.

Vamos a tratar de buscar una solucin ms genrica (ms abstracta) que la vista antes.

Escribe este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo2 aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' ) {
formularios[i].elements[j].addEventListener('click', cambiaColor);
}
}
}
}

function cambiaColor () {
this.style.backgroundColor='yellow';
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

<form name ="formularioReclamacion" method="get" action="accion2.html">

<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form></body></html>

El resultado esperado es que ahora todas las cajas de texto de los inputbox adquieren color de fondo
amarillo cuando pulsamos sobre ellos. Adems, hemos definido que se recorran todos los elementos de
todos los formularios y se aada el escuchador de evento correspondiente, y el cdigo seguir
funcionando aunque cambien los atributos id name de los elementos input.

Ahora nos vamos a plantear lo siguiente: queremos que el color de fondo de un inputbox se convierta
en amarillo si es el primer, tercer, quinto, sptimo, etc. elemento dentro del formulario, o que se
convierta en verde si es el segundo, cuarto, sexto, octavo, etc. elemento dentro del formulario.

Podemos plantearlo de dos maneras:

a) Desde la funcin cambiaColor, recuperar de alguna manera la posicin en que se encuentra el

inputbox del formulario. No vamos a estudiar esta opcin.

b) Pasarle a la funcin de manejo del evento un parmetro que le diga si el elemento es impar o par
dentro del formulario. Vamos a tratar de resolver esta cuestin porque es un buen ejemplo de paso de
parmetros a una funcin manejadora de eventos.

Inicialmente podra pensarse en una solucin de este tipo:

if (formularios[i].elements[j].type=='text' && j%2==0 ) {

formularios[i].elements[j].addEventListener('click', cambiaColorPonAmarillo);
}
else {
formularios[i].elements[j].addEventListener('click', cambiaColorPonNaranja);
}

Pero esto no es interesante: qu ocurrira si quisiramos poner 10 colores distintos? Tendramos que
crear 10 funciones con 10 nombres distintos? Y si en un momento dado queremos cambiar los
colores?

Esto sera poco til. Nuestra idea es pasar un parmetro a la funcin manejadora del evento con el
color.

Podramos pensar en redefinir la funcin cambiaColor como function cambiaColor (elEvento, elColor) {
} y escribir algo como esto. Prubalo y comprueba los resultados:

if (formularios[i].elements[j].type=='text' && j%2==0 ) {

formularios[i].elements[j].addEventListener('click', cambiaColor('', 'yellow'));
}
else { formularios[i].elements[j].addEventListener('click', cambiaColor('', 'orange')); }

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

Pero esto tiene varios problemas (activa la consola del navegador para ver los mensajes de error si no la
tienes activada): pasamos un argumento evento vaco, por qu si aqu estamos con una funcin
manejadora de eventos? No tiene sentido. Otro problema es que addEventListener espera una
referencia a una funcin, mientras que el cdigo anterior ejecuta la funcin, lo que es distinto.

Para definir correctamente una referencia a una funcin tendramos que definir una funcin annima.

Nos vamos aproximando a una solucin si planteamos esto, aunque todava no funciona. Prueba este
cdigo y comprueba qu sucede:

<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function() {cambiaColor('', 'yellow');});
}
else { formularios[i].elements[j].addEventListener('click', function(){cambiaColor('', 'orange');});
}
}
}
}

function cambiaColor (elEvento, elColor) { alert(elEvento + '***'+elColor + ' - ' + this);

this.style.backgroundColor=elColor;
}

Qu ocurre con este cdigo? En primer lugar que dentro de la funcin annima estamos creando un
mbito nuevo, y this ya no es el elememento html que recibe el evento. Qu es entonces this? Como
siempre que this no est definido en un mbito, es el objeto window. Al invocar
this.style.backgroundColor=elColor; obtenemos un error del tipo this.style is undefined porque al
objeto window no le podemos aplicar estilos (ya que no es un elemento HTML). Adems estamos
perdiendo el objeto Event al pasar un argumento vaco. Activa la consola si no la tienes activada para
poder ver los mensajes de error.

STOP FOR A MINUTE

Lo que estamos explicando es un tanto engorroso, pero llegar a comprender todo lo que estamos
discutiendo es interesante de cara a la comprensin de JavaScript. Si vienes siguiendo el curso desde el
principio, deberas ser capaz de seguir estas explicaciones. Si ests siguiendo el curso y te has perdido,
vuelve atrs y relee las explicaciones y haz pruebas con el cdigo con calma. Incluso djalo para
maana, siempre es til descansar y retomarlo al da siguiente. Si despus de releer esta entrega se te
sigue atragantando, te recomendamos escribir una consulta en los foros aprenderaprogramar.com.

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

CONTINUAMOS

Repasamos conceptos: this es el elemento HTML que nos interesa dentro de la funcin annima que es
ahora la manejadora del evento, pero ya no lo es en la funcin cambiaColor porque sta ya no es la
manejadora del evento, sino una funcin invocada por la manejadora del evento.

Ahora la funcin manejadora del evento es la funcin annima, por lo que si quisiramos pasar el
evento tendramos que hacer algo as:

<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function(elEvento)
{cambiaColor(elEvento, 'yellow');});
}
else { formularios[i].elements[j].addEventListener('click',
function(elEvento){cambiaColor(elEvento, 'orange');}); }

}
}
}

function cambiaColor (elEvento, elColor) {

this.style.backgroundColor=elColor;
}
</script>

Ahora estamos pasando el evento, pero todava no hemos resuelto el problema de haber perdido la
referencia al this.

Podramos pensar en intentar algo como esto:

<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function(elEvento) {
cambiaColor(elEvento, 'yellow', formularios[i].elements[j]);});
}
else { formularios[i].elements[j].addEventListener('click', function(elEvento){
cambiaColor(elEvento, 'orange',formularios[i].elements[j]);}); }
}
}
}
function cambiaColor (elEvento, elColor, quienEsThis) {
quienEsThis.style.backgroundColor=elColor;
}
</script>

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

Ahora nos enfrentamos a un error de tipo <<TypeError: formularios[i] is undefined>> porque la funcin
annima define un nuevo mbito, independiente puesto que es un argumento de addEventListener y
no una funcin anidada dentro de la funcin de respuesta a window.onload.

Finalmente vamos a llegar a una solucin vlida que consiste en pasarle el this a la funcin cambiaColor.
Escribe este cdigo y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function(elEvento) {
cambiaColor(elEvento, 'yellow', this);});

}
else { formularios[i].elements[j].addEventListener('click', function(elEvento){
cambiaColor(elEvento, 'orange', this);}); }
}
}
}

function cambiaColor (elEvento, elColor, quienEsThis) {

quienEsThis.style.backgroundColor=elColor;
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<form name ="formularioContacto" method="get" action="accion1.html">

<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>

<form name ="formularioReclamacion" method="get" action="accion2.html">

<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body>
</html>

aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros

PODEMOS MEJORAR?

En el cdigo que se ha propuesto como solucin, cada vez que se aade un manejador de eventos a un
elemento HTML estamos creando una funcin annima. Esto puede resultar ineficiente. Ms adelante
estudiaremos cmo podemos mejorar este cdigo para hacerlo ms eficiente.

EJERCICIO

Crea un cdigo HTML donde tengas un formulario con seis inputbox de texto que servirn para pedir al
usuario Nombre, Apellidos, Correo electrnico, Telfono, Domicilio y Pas. Crea el cdigo JavaScript
para que los elementos 1, 4, 7, 10 etc. del formulario tomen color de fondo amarillo cuando el usuario
pulse sobre ellos. Los elementos 2, 5, 8, 11, etc. del formulario debern tomar color de fondo azul claro
cuando el usuario pulse sobre ellos. Los elementos 3, 6, 9, 12, 15, etc. del formularios debern tomar
color de fondo verde claro cuando el usuario pulse sobre ellos.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01178E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Mtodo bin
nd JavaScript. Parntesis
P alred
dedor de una fu
uncin.

BIND JAV
VASCRIPT

El mtodoo bind de los objetos Fuunction en JaavaScript tie

ene distintas aplicacioness que nos vaan a hacer
ms cmo oda la progrramacin. Tiene similitu
udes (y diferrencias) con los mtodo os call y app
ply. Hemos
pospuestoo el estudio de bind hassta este mommento precissamente parra tener conocimientos suficientes
s
que nos permitan
p valo
orar lo que hace
h este mtodo.

Nos plantteamos querer obtener lo os ndices dee los elementos dentro de

d los formullarios que se
ean de tipo
input y tyype text, es decir, cajass de texto para
p entradaa de datos en
e un formu ulario. Los foormularios
existentess en el c digo html los obteneemos con var v formulaarios = doccument.form ms; donde
formularioos[0] ser el primer form
mulario, form
mularios[1] ell segundo formulario y ass sucesivam
mente

Con formmularios[0].eelements[0] accedemoss al prime er elemento dentro del formulario, con

formulario
os[0].elemennts[1] accedeemos al segu nto dentro del formulario
undo elemen o y as sucesiivamente.

Escribe esste cdigo y comprueba

c s resultado
sus os (activa primero la con
nsola del navvegador):

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://wwww.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<style typpe="text/css"> label{display:block;margin:5px;}</style>
<script tyype="text/javasscript">
window.o onload = functio on () {
var formulario os = document.fforms;
for (var i=0; i<fformularios.lenngth;i++){
for (vvar j=0; j<formuularios[i].elemeents.length; j++
+){
if (formularios[i].elemennts[j].type=='texxt' ) {
formularios[i].eelements[j].add dEventListener('click', dimeLossIndices(i,j)); }
}
}
}
function dimeLosIndicess (indiceI, indiceeJ) {console.logg('Has pulsado en e el inputbox cuyos
c ndices so
on i='+indiceI+'' ,
j='+indiceeJ);}
</script></head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
<form name ="formularrioContacto" meethod="get" acction="accion1.html">
<h2>Form mulario de conttacto</h2>
<label>No ombre:<input id="nombreForrmContacto" type="text" name e="nombre" />></label>
<label>Ap pellidos:<input id="apellidosFormContacto" type="text"
t name="apellidos"" /></label>
<label><input id ="botonEnvio1" type=="submit" valuee="Enviar"></laabel></form>
<form name ="formularrioReclamacion" method="gett" action="accio on2.html">
<h2>Form mulario de reclaamacin</h2>
<label>MMotivo reclamaccin:<input id=""motivoFormReeclama" type=""text" name="m motivo" /></lab bel>
<label>Feecha del hecho::<input id="fechaFormReclam ma" type="text" name="fecha" /></label>
<label><input id="boton nEnvio2" type="submit" value="Enviar"></label>
</form><</body></html>>

aprenderraprogramar.co
om, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.

El resultado esperado es que se muestre por consola lo siguiente:

Has pulsado en el inputbox cuyos ndices son i=0 , j=0
Has pulsado en el inputbox cuyos ndices son i=0 , j=1
Has pulsado en el inputbox cuyos ndices son i=1 , j=0
Has pulsado en el inputbox cuyos ndices son i=1 , j=1

Ya sabemos que esto ocurre porque en lugar de pasar una referencia de funcin en el addEventListener
estamos invocando la ejecucin de la funcin.

Si modificamos la lnea del addEventListener y escribimos esto:

formularios[i].elements[j].addEventListener('click', function(){dimeLosIndices(i,j);});

El resultado es que pulsemos sobre el inputbox que pulsemos siempre se muestra: "Has pulsado en el
inputbox cuyos ndices son i=2 , j=3" Por qu?

Porque los ndices i=2 y j=3 son los ltimos ndices que toman las variables en el bucle. En todos los
inputbox el comportamiento es: cuando se pulsa, se dispara el evento click, y con el evento click se
ejecuta la funcin dimeLosIndices pasndole los parmetros i, j actuales, que son una vez finalizada la
ejecucin del bucle, i=2, j=3.

No hemos resuelto lo que queramos, ya que queremos ligar a cada inputbox una funcin manejadora
de evento que se dispare con sus propios ndices, no con los ndices existentes al final del bucle.

CLOSURES Y UNA FUNCIN ENVUELTA EN PARNTESIS?

Podemos resolverlo con closures. Si no recuerdas los closures y su significado lee las anteriores
entregas del curso. Escribe este cdigo y comprueba los resultados (activa primero la consola del
navegador):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<style type="text/css">
label{display:block;margin:5px;}
</style>

<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' ) {

aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.

(function(){
var closureI =i;
var closureJ =j;
formularios[i].elements[j].addEventListener('click', function(){
dimeLosIndices(closureI,closureJ);});
})(); //Creamos un mbito con la funcin annima y la ejecutamos con ()
}

}
}
}

function dimeLosIndices (indiceI, indiceJ) {

console.log('Has pulsado en el inputbox cuyos ndices son i='+indiceI+' , j='+indiceJ);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<form name ="formularioContacto" method="get" action="accion1.html">

<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
<form name ="formularioReclamacion" method="get" action="accion2.html">
<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form></body></html>

El resultado es que ahora s se mostrarn correctamente los ndices. Por ejemplo si pulsamos sobre el
primer inputbox del primer formulario se mostrar: "Has pulsado en el inputbox cuyos ndices son i=0 ,
j=0"

En el cdigo anterior tenemos algo interesante adems de los closures, que ya hemos explicado en
apartados anteriores del curso: una funcin envuelta en parntesis con una sintaxis como esta:

( function () { //Contenido de la funcin

} () )

Bien, con function () { } () lo que estamos haciendo es invocar la ejecucin de la funcin

inmediatamente despus de haberla creado. Pero qu hacen los parntesis exteriores?

Los parntesis exteriores estn ah indicndole al intrprete JavaScript que ese fragmento de cdigo es
una expresin y no una declaracin de funcin. Una expresin se ejecuta dando lugar a una

aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.

equivalencia en cdigo, mientras que una declaracin de funcin implica definir un nombre para una
funcin que puede ser posteriormente invocada.

En el contexto en el que estamos no podemos declarar una funcin (dara lugar a un error del tipo
SyntaxError: function statement requires a name), pero s podemos usar una expresin utilizando una
funcin para lograr nuestros objetivos.

BIND JAVASCRIPT

El uso de funciones annimas y closures en el cdigo anterior deriva de la imposibilidad de pasar

parmetros a referencias de funciones: si pasamos parmetros, invocamos la funcin. Sin embargo las
ltimas versiones de JavaScript incorporaron un mtodo para los objetos de tipo Function que permite
ligar parmetros a referencias de funciones sin necesidad de ejecutar la funcin: el mtodo bind. Este
mtodo puede que no sea reconocido por algunos navegadores antiguos.

El mtodo bind recuerda en cierta manera a los mtodos call y apply que ya hemos estudiado. La
sintaxis que emplearemos ser habitualmente:

var copiaFunc = nombreDeLaFuncion.bind(objetoQueSerThis, opcArg1, opcArg2, );

El mtodo bind crea una copia de la funcin original que ser ejecutada siempre que se invoque con el
objeto this que se haya especificado y con los argumentos que se hayan especificado. Es importante
resear que bind, a diferencia de call y apply, no da lugar a la ejecucin de la funcin.

Si en un caso dado no tiene relevancia qu objeto actuar como this, se puede pasar entonces
undefined en el lugar que ocupa este parmetro.

Escribe este cdigo y comprueba su resultado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function ejemplo() {
function suma3(x, y, z) {return x+y+z;}
var suma3Primos = suma3.bind(undefined, 2, 3, 5);
alert (suma3Primos());
alert(suma3Primos()+15);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()">Pulsa aqu</div>
</body>
</html>

El resultado esperado es que se muestre por pantalla: 10, 25.

aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.

Fjate que escribimos suma3Primos() con los parntesis finales porque suma3Primos es una funcin.
Decimos que es una funcin ligada (binded) a la funcin suma3 a travs del mtodo bind.

Dado que bind no ejecuta la funcin, sino que crea una copia en la cual fijamos qu objeto actuar
como this y cules sern los parmetros con los que ser invocada la copia de la funcin, podemos
escribir el cdigo para mostrar los ndices de los inputs de formularios en un documento HTML de una
forma ms simple que la que vimos anteriormente (basada en closures y funciones annimas, un tanto
engorrosa en su definicin).

Escribe este cdigo y comprueba sus resultados (activa la consola del navagador si no la tienes
activada):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css"> label{display:block;margin:5px;}</style>
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' ) {
formularios[i].elements[j].addEventListener('click', dimeLosIndices.bind(this,i,j));

}
}
}

function dimeLosIndices (indiceI, indiceJ) {

console.log('Has pulsado en el inputbox cuyos ndices son i='+indiceI+' , j='+indiceJ);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<form name ="formularioContacto" method="get" action="accion1.html">

<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>

<form name ="formularioReclamacion" method="get" action="accion2.html">

<h2>Formulario de reclamacin</h2>
<label>Motivo reclamacin:<input id="motivoFormReclama" type="text" name="motivo" /></label>
<label>Fecha del hecho:<input id="fechaFormReclama" type="text" name="fecha" /></label>
<label><input id="botonEnvio2" type="submit" value="Enviar"></label>
</form>
</body></html>

aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.

El resultado es el mismo que obtuvimos antes: se muestran correctamente los ndices. Por ejemplo si
pulsamos sobre el primer inputbox del primer formulario se mostrar: "Has pulsado en el inputbox
cuyos ndices son i=0 , j=0"

Al escribir dimeLosIndices.bind(this,i,j) como argumento de addEventListener estamos creando una

copia de la funcin (funcin ligada) con su objeto this y parmetros especficos para cada elemento
input en el que introducimos un manejador de eventos.

Este cdigo es ms claro que el basado en closures y uso de funciones annimas, por lo tanto es
preferible.

RESUMEN BIND JAVASCRIPT

El uso de bind tiene distintas aplicaciones en JavaScript y en general nos facilita la programacin.
Normalmente lo usaremos para mantener una referencia al objeto que queremos que acte como this,
para mantener referencia a parmetros asociados a una funcin, o para ambas cosas.

En muchos casos nos puede ahorrar el escribir funciones annimas y usar closures, lo que a la larga se
traduce en un cdigo ms limpio y legible. Sin embargo, bind no es una varita mgica que haya que usar
para resolverlo todo. Hay que buscar un equilibrio: usar, no abusar, de este mtodo.

EJERCICIO

Escribe este cdigo, ejectalo y responde a las preguntas que aparecen a continuacin.

function conversor(toUnit, factor, offset, input) {

offset = offset || 0;
return [((offset+input)*factor).toFixed(2), toUnit].join(" ");
}

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0);

var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0);
var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32);

alert(milesToKm(10));
alert(poundsToKg(2.5));
alert(farenheitToCelsius(98));

a) Cuntas funciones ligadas (copias parametrizadas) de la funcin conversor se crean en este cdigo?

b) Qu es lo que devuelve la funcin conversor?

c) Qu objeto acta como this en la funcin milesToKm?

d) Qu tarea cumple y con qu frmula trabaja la funcin milesToKm?

aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.

e) Qu tarea cumple y con qu frmula trabaja la funcin poundsToKg?

f) Qu resultado devuelve milesToKm(10) y qu significa este resultado?

g) Qu resultado devuelve poundsToKg(2.5) y qu significa este resultado?

h) Qu resultado devuelve farenheitToCelsius(98) y qu significa este resultado?

i) Qu significado tiene la expresin offset = offset || 0;?

j) Cul es la finalidad del uso de toFixed(2)?

k) Por qu crees que se usa el parmetro offset en la funcin conversor?

l) Modifica el cdigo para ampliar la informacin que se nos muestra: introduce un parmetro fromUnit
en la funcin conversor de modo que el resultado nos informe del dato de origen, sus unidades, y el
dato convertido y sus unidades.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01179E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Trabajo con
n formularios JaavaScript: obte
ener value, checked, etc.

MS JAVA
ASCRIPT EN FORMULARIOS

Cuando trabajamos conc formularrios es habitual que que eramos introducir efectoos dinmicos a medida
que el ussuario realizza seleccin de opcionees. Por ejem
mplo, si se trrata de una compra y el usuario
seleccionaa para con tarjeta
t Visa,, en un lateral podemos mostrar laa comisin aaplicable. Si cambia la
eleccin a tarjeta Mastercard, podemos
p hacer que auttomticamen nte cambie la comisin n aplicable
utilizando
o JavaScript.

AR VALUE PARA TEXT Y TEXTAREA

RECUPERA

Para recuperar el con

ntenido de un cuadro dee texto correespondiente a un input d
de tipo text textarea
usamos el atributo value del elem
mento HTML. La sintaxis ser
s similar a:
a

document.getElementById(''apellidos').vvalue

El evento para detectaar cambios en

e los cuadro
os de texto y textarea no
ormalmente sser onchan
nge.

Veremos el ejemplo de
d cdigo desspus de exp
plicar otros elementos.
e

RECUPERA
AR CHECKED
D PARA UN CONJUNTO
C D RADIO BU
DE UTTONS

Cuando tenemos un conjunto dee radio butttons, cada uno u de ellos tiene un vaalue, pero lo o que nos
interesa saber
s es cul de los rad
dio buttons de
d los posib
bles ha sido elegido. En un conjunto o de radio
buttons, slo
s uno puede estar marcado
m (o no estar marrcado ningunno), y ese elemento es el e que nos
interesar. Para deterrminar el eleemento marccado usamoss la propiedaad checked. La sintaxis se
er similar
a:

var radioB Name("nameUtilizado");

ButTrat = doccument.getEElementsByN
for (var i=0; i<radioButTrat.length;; i++) {
if (radioBu
utTrat[i].checcked == truee) { cdigo a ejecutar }
}

El evento para detectaar cambios en

e los conjun
ntos radio bu
utton normalmente ser onclick.

Veremos el ejemplo de
d cdigo desspus de exp
plicar otros elementos.
e

aprenderraprogramar.co
om, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.

RECUPERAR CHECKED PARA UN CONJUNTO DE CHECKBOX

Cuando tenemos un conjunto de checkbox, cada uno de ellos tiene un value, pero lo que nos interesa
saber es qu casillas han sido marcadas (a diferencia de los radio buttons, en el caso de los checkbox
podemos tener marcada ninguna, una o varias casillas). Para ello usamos la propiedad checked. La
sintaxis ser similar a:

var radioButTrat = document.getElementsByName("tratamiento");

for (var i=0; i<radioButTrat.length; i++) {
if (radioButTrat[i].checked == true) { cdigo a ejecutar }
}

El evento para detectar cambios en los conjuntos checkbox normalmente ser onchange.

Veremos el ejemplo de cdigo despus de explicar otros elementos.

RECUPERAR LA OPCIN SELECCIONADA EN UN SELECT

Cuando tenemos una lista desplegable select con diferentes option, en general nos interesar saber
cul de los elementos option es el que se encuentra seleccionado y el contenido de su atributo value.
Para ello hemos de tener en cuenta que:

a) Cada elemento HTML de tipo select tiene una propiedad denominada options, de tipo array, que
contiene los elementos options con ndice 0, 1, 2, n. Por ejemplo aqu vemos cmo extraer los
elementos select, sus atributos value y el texto que contienen (mediante la propiedad text).

var elementosSelect = document.getElementsByTagName('select');

alert('Contenido de value es: '+ elementosSelect[0].value;
alert('Contenido texto es: '+ elementosSelect[0].text;

La propiedad selectedIndex del elemento select nos devuelve el ndice numrico de la opcin
seleccionada (la primera opcin tiene ndice 0, la segunda 1, y as sucesivamente).

Aqu vemos un ejemplo de cmo se puede utilizar selectedIndex:

var elementoCiudad = document.getElementById('ciudad');

var indiceSeleccionado = elementoCiudad.selectedIndex;
alert (elementoCiudad.options[indiceSeleccionado].text);

Tambin podemos escribir elementoCiudad.options[elementoCiudad.selectedIndex].text prescindiendo

del uso de la variable intermedia indiceSeleccionado.

El evento para detectar cambios en los select normalmente ser onchange.

aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.

EJERCICIO Y EJEMPLO

El cdigo que vamos a ver a continuacin nos va a servir al mismo tiempo como ejemplo de las
cuestiones que hemos explicado anteriormente y como ejercicio.

Para probar el funcionamiento de este cdigo debes poner dos imgenes de 100 por 100 pxeles con el
nombre caraHombre.jpg y caraMujer.jpg, en el mismo directorio donde tengas el cdigo HTML.
Nosotros vamos a usar estas dos imgenes (usa estas u otras segn prefieras):

Escribe el siguiente cdigo, gurdalo como archivo con extensin HTML, visualzalo en tu navegador y
comprueba su funcionamiento. No prestes atencin al cdigo CSS, ya que lo que nos interesa es
centrarnos en JavaScript. Estudia el cdigo y responde a las preguntas que se plantean ms abajo. Este
cdigo usa conocimientos variados que hemos ido adquiriendo a lo largo del curso, por lo que nos viene
bien como repaso. Si has venido siguiendo el curso, deberas ser capaz de entender todo el cdigo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css"> body {margin-left:30px; font-family: sans-serif;} h4 {margin:0;} div {float:left;}
.estiloForm, #encuadraImagen, #datos {background-color: #f3f3f3; border: solid 2px black; margin-left:10px; width:300px; }
.estiloForm{ width: 330px; padding:10px;} #datos {margin-top: 20px; height:226px; padding:10px;}
#encuadraImagen {width:100px; height:100px; text-align:center;}
.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}
</style>
<script type="text/javascript">
window.onload = function () {
/* Variables globales (por estar declaradas sin var) */
casillaDatos = document.getElementById('datos'); //Nodo donde vamos a mostrar los datos
radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttons
checkboxElements = new Array();

var elementosDelForm = document.getElementsByTagName('input'); //Elementos input

var elementosSelect = document.getElementsByTagName('select');
for(var i=0; i<elementosDelForm.length;i++) {
if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);}
else {elementosDelForm[i].addEventListener("change", actualizarDatos);}
if (elementosDelForm[i].type == 'checkbox') {checkboxElements.push(elementosDelForm[i]);}
}
for (var i=0; i<elementosSelect.length;i++) {elementosSelect[i].addEventListener("change", actualizarDatos);}
}

aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.

function actualizarDatos() {
var rutaImagen = '';
var radioButSelValue = '';
for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }
if (radioButSelValue != ''){
if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';}
document.getElementById('encuadraImagen').innerHTML = '';
document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';
}
var checkBoxSel = new Array();
for (var i=0; i<checkboxElements.length;i++) {
if (checkboxElements[i].checked ==true) {checkBoxSel.push(checkboxElements[i].name);}
}

var elementoCiudad = document.getElementById('ciudad');

casillaDatos.innerHTML='<h4> Datos introducidos: </h4><p>Tratamiento: '+(radioButSelValue||' --- ')+'</p>'+
'<p>Nombre: '+document.getElementById('nombre').value+'</p>'+
'<p>Apellidos: ' + (document.getElementById('apellidos').value||' --- ')+'</p>'+
'<p>Direccin: ' + (document.getElementById('direccion1').value||' --- ')+'</p>'+
'<p>Ciudad: ' + (elementoCiudad.options[elementoCiudad.selectedIndex].text||' --- ')+'</p>'+
'<p>Preferencias: ' + (checkBoxSel||' --- ')+'</p>';
}
</script></head>
<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="estiloForm">
<form name ="formularioContacto" method="get" action="#">
<label>Tratamiento</label>
<input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
<input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
<label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
<label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
<label>Direccin</label><input id="direccion1" name="direccion1" type="text"/><br/>
<label>Ciudad</label><select id="ciudad" name="ciudad">
<option value="">Elija opcin</option>
<option value="Mexico">Mxico D.F. (MX)</option>
<option value="Madrid">Madrid (ES)</option>
<option value="Santiago">Santiago (CL)</option>
</select><br/>
<label>Preferencias</label><input name="Libros" type="checkbox" />Libros
<input name="Peliculas" type="checkbox" />Pelculas
<input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
</form>
</div>
<div style="float:left;">
<div id="encuadraImagen"><h1> ? </h1></div> <br/>
<div id="datos" style="float:left;"><h4> Datos introducidos: </h4></div>
</div>
</body></html>

El resultado esperado es que cuando se escriba o seleccionen opciones en el formulario, se muestren

las imgenes y texto correspondientes en el lado derecho (en la imagen vemos un ejemplo).

aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.

Responde estas preguntas (mantn la consola activada para ver posibles mensajes de error):

a) Qu cdigo es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen
caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?

b) radioButTrat es una variable global o local a una funcin? Por qu?

c) radioButTrat es una array o un objeto NodeList de tipo array-like? El mtodo length es aplicable a
objetos de tipo array? El mtodo length es aplicable a objetos de tipo array-like?

d) Qu ocurre si tratas de aplicar el mtodo push a radioButTrat? Escribe el cdigo para ello. Qu
mensaje visualizas en la consola? Busca informacin y trata de explicar por qu ocurre esto.

e) Las imgenes son el fondo de un elemento HTML distinto de img o es el atributo source de un
elemento img?

f) checkBoxSel es un array o un NodeList de tipo array-like?

g) Qu significa y para qu sirve este cdigo: checkBoxSel||' --- ' ?

h) Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01180E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Array. proto
otype, nodeListt, arrays, arrayy-like objects.

ARRAY.PR
ROTOTYPE, NODELIST,
N A
ARRAYS Y AR
RRAY-LIKE OB
BJECTS

En apartaados anteriorres del cursoo estudiamoss que la here encia en JavaScript es un

na herencia basada en
prototipos. En esta enntrega vamoss a repasar algunos
a concceptos sobre herencia y aacceso a los objetos
o en
la raz de la cadena dee herencia, y a estudiar algunos
a concceptos sobree qu son No odeList, Arrays y array-
like objects.

Vamos a llamar la ateencin sobree el hecho de d que los mtodos

m de tipo
t get que actan sobrre el DOM
devuelvenn una colecccin de objetos a la quee se denomin na NodeList o lista de nodos, que see dice son
objetos arrray-like (sim
milares a un array,
a n exactamente arrays). El hecho de que un Node
pero no eList no es
un array se comprueba con este cdigo. Ejecctalo y com mprueba los resultados ((activa la con
nsola para
ver los meensajes de error):

<!DOCTYPE HTML PUBLIC "-//W3C//DTTD HTML 4.01 Transitional//EN

T N" "http://wwww.w3.org/TR/httml4/loose.dtd">
<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
<style type="text/css"
t "> body {margin n-left:30px; fon
nt-family: sans-sserif;}
.estiloForm {baackground-colo or: #f3f3f3; border: solid 2px black;
b margin-leeft:20px; width: 330px; paddin
ng:10px; }
.estiloFForm label {disp play: block; width: 120px; floatt: left; text-align:right; margin-bottom: 35px;; padding-right: 20px;}
br {clear: left;} input[type="ssubmit"], input[[type="reset"] {margin:25px 5px 5 10px 5px;}
</style>
<script tyype="text/javasscript">
window.o onload = functio on () {
var elementossInput = document.getElementsByTagName('input'); //Elem mentos input
var elementossSelect = docum ment.getElemen ntsByTagName(('select');
for (var i=0; i< elementosSeleect.length; i++) {elementosInput.push(elementosSelect[i])};
alert ('Tenemo os un nmero ded elementos in nput select en n el formulario: '+ elementosInnput.length);
}
</script></head>
<body><h h2>Cursos apreenderaprogram mar.com</h2><h h3>Ejemplos JaavaScript</h3>
<div claass="estiloForm m"><form namee ="formularioC Contacto" meth hod="get" actioon="#">
<labeel>Tratamiento o</label>
<inpu ut type="radio"" name="tratam miento" id="tratarSr" value="SSr."/>Sr.
<input type="radio" name="tratam miento" id ="traatarSra" value=="Sra."/>Sra.<br/>
<label>Nombre</laabel><input id="nombre" nam me="nombre" tyype="text"/><b br/>
<labeel>Apellidos</label><input id=="apellidos" name="apellidos"" type="text"/>><br/>
<labeel>Direccin</label><input id=="direccion1" name="direccio
n on1" type="textt"/><br/>
<labeel>Ciudad</lab bel><select id="ciudad" name=="ciudad">
<option value="">Elija
v opcin</option> >
<ooption value="M Mexico">Mxico o D.F. (MX)</op ption>
<ooption value="M Madrid">Madrid d (ES)</option>>
<ooption value="Santiago">Santiago (CL)</optio on>
</sellect><br/>
<label>Preferenciass</label><inputt name="Libross" type="checkb box" />Libros
<input name="Pelicculas" type="ch heckbox" />Pelculas
<input type="submit" value="Enviiar"/> <input tyype="reset" valu ue="Cancelar"//>
</formm></div>
</body><</html>

aprenderraprogramar.co
om, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.

El resultado es un error similar a este: <<TypeError: elementosInput.push is not a function>>. El motivo

de esto es que un objeto array-like no dispone de todos los mtodos propios de los arrays. Sin
embargo, los nodeList s tienen algunas caractersticas comunes con el array, como disponer de una
propiedad length que informa del nmero de elementos que contiene la coleccin de elementos.

El inters de los NodeList est en que son entidades dinmicas: si durante la ejecucin de cdigo se
elimina un elemento que perteneca a un NodeList, el NodeList queda actualizado automticamente
porque est referenciando dinmicamente. En cambio si tuviramos los nodos en un array y se elimina
un nodo, el array seguira tal y como estaba porque el array no est ligado dinmicamente a lo que
ocurra en el DOM en tiempo de ejecucin.

En ocasiones nos puede interesar convertir un objeto array-like en un array verdadero. Esto se puede
hacer de varias maneras:

a) Manualmente introduciendo cada elemento en un nuevo objeto array. Ejemplo modificando el

cdigo anterior (ejectalo y comprueba los resultados):

<script type="text/javascript">
window.onload = function () {
var elementosInput = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
var arrayNodos = [];
addNodeListToArray (elementosInput, arrayNodos);
addNodeListToArray (elementosSelect, arrayNodos);
alert ('Tenemos un nmero de elementos input select en el formulario: '+ arrayNodos.length);
}

function addNodeListToArray (elNodeList, elArray) {

for (var i=0; i< elNodeList.length; i++) {
var elementoActual = elNodeList[i];
elArray.push(elementoActual);
}
alert ('Aadidos ' + elNodeList.length +' elementos');
}
</script>

El resultado esperado es que se muestre: Aadidos 9 elementos, Aadidos 1 elementos, Tenemos un

nmero de elementos input select en el formulario: 10

b) Accediendo al objeto Array para aplicar un mtodo que nos permite obtener un array a partir de un
objeto array-like. La sintaxis sera cualquiera de estas (ten en cuenta que en algunos casos,
especialmente con navegadores antiguos, estas sintaxis pueden no ser reconocidas):

var divsEnArray = Array.prototype.slice.call(document.querySelectorAll('div'));

var divs = [].slice.call(document.querySelectorAll('div'));

aprenderaprogramar.com, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.

Esta sintaxis merece ser comentada. La invocacin Array.prototype nos permite acceder al objeto en la
cima de la jerarqua de herencia u objeto padre de todos los objetos de su tipo. Cuando escribimos
algo como miArray = new Array(); estamos creando una instancia de un objeto tipo Array, que hereda
todas sus caractersticas del objeto padre Array.prototype.

Normalmente invocamos mtodos sobre instancias de los objetos en la cima jerrquica, pero en
ocasiones (como en este ejemplo), puede que nos resulte de inters invocar directamente un mtodo
sobre el objeto padre o prototype. En este caso al invocar el mtodo slice sin argumentos, se nos
devuelve un array sin ms. Para indicarle a partir de qu coleccin se debe devolver el array, usamos el
mtodo call indicando que el objeto que actuar como this y a partir del cual se debe devolver el array
es un objeto NodeList (un array-like object).

La sintaxis [].slice.call(document.querySelectorAll('div')); es similar, pero en lugar de operar sobre el

prototype utilizamos un objeto array annimo representado por []. Aunque esta sintaxis es posible,
preferimos la otra basada en el uso del objeto prototype porque en general ser ms segura y eficiente.

Aplicado al ejemplo de cdigo que venimos viendo podramos utilizar este cdigo. Escrbelo en tu editor
y comprueba los resultados:

window.onload = function () {
var elementosInput = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
var arrayNodos = Array.prototype.slice.call(elementosInput);
arrayNodos.push([].slice.call(elementosSelect));
alert ('Tenemos un nmero de elementos input select en el formulario: '+ arrayNodos.length);
}

El resultado esperado es que se muestre por pantalla: <<Tenemos un nmero de elementos input
select en el formulario: 10>>

Hemos usado en un caso Array.prototype y en otro [] para poner un ejemplo de uso, aunque en
realidad preferiremos usar Array.prototype:

window.onload = function () {
var elementosInput = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
var arrayNodos = Array.prototype.slice.call(elementosInput);
arrayNodos.push(Array.prototype.slice.call(elementosSelect));
alert ('Tenemos un nmero de elementos input select en el formulario: '+ arrayNodos.length);
}

ARRAYS.FROM

An nos queda una alternativa para resolver la conversin de objetos tipo array-like en arrays. El
mtodo Array.from. Este mtodo crea un objeto de tipo array a partir de un objeto iterable u objeto de
tipo array-like. Su uso habitual ser con sintaxis similar a esta:

aprenderaprogramar.com, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.

var divs = document.querySelectorAll('div');

var arrayDivs = Array.from(divs);

Este mtodo parece el ms sencillo, sin embargo puede tener importantes problemas y no ser
soportado por diferentes navegadores donde puede generar mensajes de error (tipo Uncaught
TypeError: undefined is not a function). Por ello recomendamos usar alguno de los mtodos vistos
anteriormente, que nos evitan problemas de compatibilidad entre navegadores.

RESUMEN

Vamos a tratar de hacer un resumen que aclare ideas. Los aspectos clave que hemos visto son:

a) Existen algunos objetos que son similares a los arrays pero que no son exactamente arrays. Estos
objetos se suelen denominar objetos tipo array-like. Entre estos objetos tenemos los NodeList o listas
de nodos devueltos por los mtodos populares de acceso al DOM como document.getElementById y
similares.

b) Los objetos array-like tienen algunas propiedades y mtodos de los arrays, pero no todos ellos (por
ejemplo pueden carecer de los mtodos push, no pueden ser recorridos con foreach, etc.). Si tratamos
de aplicar ciertos mtodos de los arrays a objetos array-like podemos obtener errores del tipo: Object
#<NodeList> has no method. No podemos usar un objeto array-like como si fuera un array, pero en
circunstancias concretas s podemos transformar los objetos array-like en arrays verdaderos para
realizar ciertas manipulaciones u operaciones.

c) Los NodeList son objetos de tipo array-like que contienen lo que se denomina live Nodes: colecciones
de elementos que automticamente se actualizan si se modifica el DOM. Podemos decir que esta
ventaja de actualizacin automtica es importante, y que por ello en algunas ocasiones nos interesa
trabajar con NodeList en lugar de con arrays, a pesar de que por otro lado tengan la desventaja de
tener menos funcionalidad.

EJERCICIO

Examina el siguiente cdigo y responde a las cuestiones que se muestran a continuacin:

var arr = [];

var divs = document.querySelectorAll('div');
for(var i = divs.length; i--; arr.unshift(divs[i]));

aprenderaprogramar.com, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.

a) Qu cometido cumple este cdigo?

b) Aplicando la idea que podemos extraer de este cdigo, modifica el cdigo que hemos visto como
ejemplo en esta entrega para crear un array con los elementos input y select del formulario y mostrar
por pantalla el nmero de elementos input y select existentes en el formulario.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01181E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Mtodos fo
ocus, blur. Dete
ener envo de fo
ormularios. sub
bmit.

SIGNIFICA
ADOS DE FOC
CUS Y BLUR

Hemos dee distinguir varios

v posiblles usos de focus
f y blur.. Como sabeemos, focus hace alusin n a que un
elemento o HTML tomaa el foco en la l pgina weeb (bien porq que el usuario haga clickk sobre l, bien porque
al pulsar la
l tecla de taabulacin el foco llegue hasta
h l). Tomar el foco indica que se puede escribir sobre
el elemennto (si es un campo de teexto de un fo ormulario) o que el elemmento est seeleccionado (si es otro
tipo de elemento com mo una imageen).

Vamos a llamar la atencin sobree el hecho de

d que focus y blur pueeden tener d
distintos sign
nificados o
usos:

a) Eventos que podem mos capturarr para disparrar un cdigo

o de respuessta (esto ya lo hemos esttudiado en
apartadoss anteriores del curso).

b) Un mttodo aplicab
ble a objetos de tipo Win
ndow (esto ya
y lo hemos estudiado
e n apartados anteriores
en
del curso)).

c) Un mtodo aplicable a objeto

os de tipo HTMLElemen
H nt (nodos deel DOM) parra hacerles obtener o
perder el foco, siemp
pre que dich
ho objeto seea susceptible de tener el foco. Hayy elementoss como un
input de un oco y otros como un span
u formulario que puedeen tener el fo n que no pueeden tener el
e foco.

La sintaxiss para establlecer el foco en un elemeento que adm

mite el foco es:

nombreDelElemento
o.focus();

La sintaxiss para hacer que un elem

mento que teena el foco lo pierda es:

nombreeDelElementto.blur();

Escribe el siguiente c
digo y compprueba sus resultados. Comprueba cmo en l see hace uso por un lado
de los eveentos focus y blur, y por otro lado del
d mtodo focus para establecer
e el foco cuand
do carga la
pgina enn el primer ellemento inpu
ut de tipo text que existe
e en el formu
ulario.

Fjate tam
mbin en cm mo se maneejan los even
ntos blur y focus para haacer que cuaando un inp put de tipo
text recibe el foco, su color de fon
ndo cambie a amarillo, mientras
m que cuando pierrde el foco, su
s color de
fondo cammbia a blanco o.

aprenderraprogramar.co
om, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> body {margin-left:30px; font-family: sans-serif;}
.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }
.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}
</style>
<script type="text/javascript">
window.onload = function () {
var elegido = false;
var elementosInput = document.getElementsByTagName('input'); //Elementos input
for (var i=0; i< elementosInput.length; i++) {
if (elementosInput[i].type == 'text' && elegido==false) {var elegidoParaFoco = elementosInput[i];
elegido=true;}
if (elementosInput[i].type == 'text') {
elementosInput[i].addEventListener('blur', ponerFondoBlanco);
elementosInput[i].addEventListener('focus', ponerFondoAmarillo);
}
}
elegidoParaFoco.focus(); elegidoParaFoco.style.backgroundColor='yellow';
}

function ponerFondoBlanco() {this.style.backgroundColor = 'white';}

function ponerFondoAmarillo() {this.style.backgroundColor = 'yellow';}
</script>
</head>
<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="estiloForm">
<form name ="formularioContacto" method="get" action="#">
<label>Tratamiento</label>
<input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
<input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
<label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
<label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
<label>Direccin</label><input id="direccion1" name="direccion1" type="text"/><br/>
<label>Ciudad</label><select id="ciudad" name="ciudad">
<option value="">Elija opcin</option>
<option value="Mexico">Mxico D.F. (MX)</option>
<option value="Madrid">Madrid (ES)</option>
<option value="Santiago">Santiago (CL)</option>
</select><br/>
<label>Preferencias</label><input name="Libros" type="checkbox" />Libros
<input name="Peliculas" type="checkbox" />Pelculas
<input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
</form>
</div>
</body></html>

Cuando en una pgina web el formulario es el elemento principal, se considera una buena prctica
(para facilitar que el usuario introduzca los datos) establecer el foco sobre el primer elemento del
formulario una vez la pgina haya cargado.

aprenderaprogramar.com, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.

SIGNIFICADOS DE SUBMIT

Al igual que focus y blur pueden ser eventos o mtodos de objetos, submit puede ser un evento pero
tambin un mtodo de un formulario. Como sabemos, submit hace alusin al envo de un formulario.

Podemos utilizar el evento submit para retrasar el envo del formulario hasta despus de haber
procesado el evento (de esta forma podemos hacer operaciones previas al envo, por ejemplo una
validacin). Una vez procesado el evento, procederamos al envo del formulario. Para que el formulario
se enve o no segn los resultados de las operaciones previas al envo aadiremos el parmetro para
capturar el evento en la funcin manejadora y aplicaremos el mtodo preventDefault() que hemos
estudiado en anteriores entregas del curso.

Este sera un ejemplo de sintaxis:

document.forms['nombreFormulario'].addEventListener('submit', funcionManejadora);


function funcionManejadora(evObject) {
evObject.preventDefault(); //Anulamos la accin de defecto
if ( ) { //Tareas a realizar si se cumple la condicin
document.forms['formularioContacto'].submit(); } //Se enva el formulario
else { //Tareas a realizar si no se cumple la condicin
} //No se enva el formulario
}

Escribe este cdigo y comprueba sus resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> body {margin-left:30px; font-family: sans-serif;}
.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }
.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}
</style>
<script type="text/javascript">
window.onload = function () {
document.forms['formularioContacto'].addEventListener('submit', avisarUsuario);
}

function avisarUsuario(evObject) {
evObject.preventDefault();
var nuevoNodo = document.createElement('h2');
nuevoNodo.innerHTML = '<h2 style="color:orange;">Enviando el formulario...</h2>';
document.body.appendChild(nuevoNodo);
var retrasar = setTimeout(procesaDentroDe2Segundos, 1000);
}

aprenderaprogramar.com, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.

function procesaDentroDe2Segundos() {
document.forms['formularioContacto'].submit();
}

</script>
</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

<div class="estiloForm">
<form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">
<label>Tratamiento</label>
<input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
<input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
<label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
<label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
<label>Direccin</label><input id="direccion1" name="direccion1" type="text"/><br/>
<label>Ciudad</label><select id="ciudad" name="ciudad">
<option value="">Elija opcin</option>
<option value="Mexico">Mxico D.F. (MX)</option>
<option value="Madrid">Madrid (ES)</option>
<option value="Santiago">Santiago (CL)</option>
</select><br/>
<label>Preferencias</label><input name="Libros" type="checkbox" />Libros
<input name="Peliculas" type="checkbox" />Pelculas
<input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
</form>
</div>
</body>
</html>

El resultado esperado es que cuando se pulsa el botn enviar del formulario, debajo de este aparezca el
mensaje Enviando el formulario. Para hacer aparecer este mensaje hemos aadido un nodo al DOM
y establecido su contenido con innerHTML.

Nota: para que el efecto sea visible hemos introducido un pequeo retraso forzado en el envo del
formulario usando un setTimeout. Hemos hecho esto para que nos d tiempo a ver el texto (si la
conexin a internet que usemos es muy rpida y no establecemos una pequea demora no nos dara
tiempo a ver el mensaje, ya que este desaparece en cuanto comienza a cargarse la pgina de destino
del formulario). Este retraso no tiene una utilidad prctica, nicamente lo hemos introducido para
poder ver cmo podemos dar lugar a la ejecucin del evento submit usando el mtodo submit() en el
momento en que nosotros deseemos.

EJERCICIO Y EJEMPLO

Otra forma de detener el envo de un formulario se basa en que si el cdigo de respuesta a un evento
submit es el valor booleano false, no se producir el envo del formulario. En otro caso, s se producir
el envo. Examina el siguiente cdigo y responde a las cuestiones que se muestran a continuacin:

aprenderaprogramar.com, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.

<!DOCTYPE html>
<html><head><script>
function validarForm() {
var x = document.forms["elForm1"]["nombre"].value;
if (x==null || x=="") { alert("El formulario no puede enviarse sin rellenar el nombre");
return false; }
}
</script></head>
<body><form style ="margin:30px;" name="elForm1" action="http://aprenderaprogramar.com" onsubmit="return
validarForm()" method="get">
Nombre: <input type="text" name="nombre">
<input type="submit" value="Enviar">
</form>
</body></html>

a) Qu cometido cumple este cdigo?

b) Qu ocurre si en lugar de onsubmit="return validarForm()" escribes onsubmit="validarForm()"?

Por qu?

c) Si x no es null ni es vaco, qu devuelve la funcin validarForm()? Qu implicaciones tiene esto en

relacin al envo del formulario?

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01182E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029
Validacin de
d formularios con JavaScriptt.

VALIDACIIN DE FORM
MULARIOS CON
C JAVASCRIPT

portante de JavaScript es
Un uso haabitual e imp e servir paraa realizar la validacin
v dee formulario
os. Cuando
un usuariio rellena un formulario
o y pulsa en n el botn enviar, com mprobaremoss con JavaSccript si ha
introducid
do los datos mnimos req
queridos y coon el formato requerido.. Si no es as,, abortaremo os el envo
del formu
ulario y mostraremos los avisos correespondientess evitando en nviar la inforrmacin al se
ervidor.

El envo ded la informmacin al serrvidor suponndra una de emora en la respuesta (enviar la infformacin,
realizar laa validacin en el servid
dor, enviar laa respuesta
) y dara laa impresin de que la pgina web
est lentta. Con JavaaScript podemos lograr una
u respuestta inmediata, haciendo q que la navegaacin para
o de nuestra pgina web sea satisfacttoria.
el usuario

La validaccin normalm
mente consisste en detecttar el eventoo submit del formulario y derivar la gestin
g del
mismo a una funcin n manejadorra que se encarga de re ntenido del formulario. Si en esa
evisar el con
revisin se
s detectan errores en los formato os o falta dee datos, el envo
e se aborta y se muestra
m un
mensaje ded aviso al usuario.
u Si en
n la revisin se consideraa que est to
odo conform
me, se proced de al envo
del formuulario.

La validaccin no supoone ms quee una aplicacin prctica de los con nocimientos que hemos adquirido
durante el
e curso (acceeso a elemen
ntos del DOM
M, manejo de e objetos, exxpresiones reegulares, etcc.).

La invocacin a la validacin se puede enfocaar de distintaas maneras. La forma qu

uizs preferib
ble es usar
addEventListener y prreventDefault:
documentt.nombreDelFormulario.addEventListener('subm
mit', validarFo
ormulario);

function validarFormu
v ulario(evObjeect) {
evObject.ppreventDefaault(); //Evitaa el envo del formulario hasta comprrobar
}

Otra form
ma que ha veenido siendo o bastante uttilizada es caapturar el evvento en el ccdigo HTMLL para que
devuelva true (en cuyyo caso se en
nviar el form
mulario) o fallse (en cuyo caso no se eenviar):
function validarFormu
v ulario() {
if ( ) { retturn true; // Si se verificaan las condicciones enviarr formulario
} else { retturn false; /// Si no se verifican las conndiciones no
o se enviar eel formulario
o
}
---
}
---
<form action="" method d="" id="" naame="" onsu ubmit="returrn validarForrmulario ()">>

aprenderraprogramar.co
om, 2006-2029
Validacin de formularios con JavaScript.

VALIDAR QUE UN CAMPO NO EST VACO

En muchos formularios se requerir que uno o varios campos no se encuentren vacos. Por ejemplo si
se trata de una reserva de hotel, ser necesario que datos como el nombre de la persona que realiza la
reserva no se encuentren vacos.

Tambin podemos comprobar que no se hayan introducido slo espacios en blanco (que son caracteres
pero no aportan informacin), u otro tipo de comprobaciones ms elaboradas usando expresiones
regulares.

Escribe este cdigo que es un ejemplo de comprobacin de que un campo no est vaco o contenga
slo espacios en blanco y comprueba sus resultados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">body {background-color:yellow; font-family: sans-serif;} label{color: maroon; display:block;
padding:5px;}
</style>
<script type="text/javascript">
window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}

function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
for (var i=0; i<formulario.length; i++) {
if(formulario[i].type =='text') {
if (formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
alert (formulario[i].name+ ' no puede estar vaco o contener slo espacios en blanco');
todoCorrecto=false;
}
}
}
if (todoCorrecto ==true) {formulario.submit();}
}

</script></head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2>
</div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>

aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.

Recordar lo que explicamos en los apartados del curso dedicados a expresiones regulares. /^\s*$/
define una expresin regular donde \s es el espacio en blanco, ^ indica comienzo de cadena con ese
carcter, * indica repeticin cualquier nmero de veces y $ seala el carcter de terminacin de
cadena. Por tanto la expresin regular indica las cadenas que empiezan con espacio en blanco, siguen
con cualquier nmero de espacios en blanco y terminan con un espacio en blanco.

El mtodo test devuelve true si la cadena hace match con la expresin regular o false si la cadena no
hace match.

VALIDAR QUE UN CAMPO CONTIENE UN VALOR NUMRICO

En ocasiones se puede requerir que un campo contenga un valor numrico. Las comprobaciones se
pueden hacer basndonos en expresiones regulares, basndonos en la funcin isNaN, o basndonos en
que el valor numrico debe ser mayor, menor, mayor o igual, menor o igual que otro valor numrico de
referencia.

Recordar que isNaN(x) devuelve true si x es un valor no asimilable a un nmero o false si el valor es
asimilable a un nmero. La funcin isNaN es laxa en el sentido de que tratar de asimilar a un nmero
todo lo que sea posible. Por ejemplo alert(isNaN(-3.23)); devuelve false (se considera -3.23 un nmero).
Esto puede ser interesante en algunas ocasiones pero no interesante en otras.

Ejemplo: pedimos la altura respecto al nivel del mar, siendo 0 el nivel del mar, un valor positivo una
altura sobre el nivel del mar y un valor negativo una altura por debajo del nivel del mar (por ejemplo la
altura de un submario). En este caso nos interesa usar isNaN.

Otro ejemplo: pedimos la edad de una persona. En este caso ser preferible usar expresiones regulares,
por ejemplo comprobar que el valor del campo se corresponda con uno dos dgitos, lo que hara
vlido 5, 44, 88, pero hara invlidos 148, -3.23 5.25.

Escribe este cdigo que es un ejemplo de validaciones con campos numricos y comprueba sus
resultados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label{color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">

window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}

aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.

function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
if (isNaN(formulario.edad.value)==true || /^[1-9]\d$/.test(formulario.edad.value)==false ) {alert ('Edad no valida');
todoCorrecto=false;}
if (isNaN(formulario.altura.value)==true || formulario.altura.value<=0 || formulario.altura.value>=2.50) {
alert ('Altura no valida'); todoCorrecto=false;}
if (todoCorrecto ==true) {formulario.submit();}
}
</script></head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2></div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Edad:</span> <input id="edad" type="text" name="edad" /></label>
<label for="email"><span>Altura:</span> <input id="altura" type="text" name="altura" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>

El resultado esperado es que el formulario no se enve si la edad no est formada por dos dgitos (no
sera vlido 124 ni -3.23) o si la altura es un valor negativo, mayor o igual a 2.50 no tiene formato
numrico.

VALIDAR UNA DIRECCIN DE EMAIL

Para comprobar que el usuario introduce una direccin de email vlida podemos hacer distintos tipos
de comprobaciones. La ms bsica es comprobar que la cadena contiene cualquier nmero de
caracteres seguido del carcter @ segudio de cualquier nmero de caracteres, seguido de un punto, y
seguido de cualquier nmero de caracteres. Esta validacin es amplia y no aceptara la mayor parte de
direcciones no vlidas, por ejemplo no se aceptara <<andres@gmailcom>> porque le falta el punto.

En general ser suficiente usar una expresin regular simple del tipo:

/\S+@\S+\.\S+/

En muchas pginas de internet se encuentran expresiones ms complejas que tratan de tener en cuenta
posibilidades menos frecuentes de formato de correo electrnico, por ejemplo esta:

/ [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-
9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/

Las comprobaciones se haran de la misma forma a como hemos visto en los ejemplos anteriores.

aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.

EJERCICIO

Dado el siguiente cdigo HTML que contiene un formulario con tres campos (nombre, apellidos y
email):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">body {background-color:yellow; font-family: sans-serif;}
label{color: maroon; display:block; padding:5px;}
</style>
</head>
<body>
<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la programacin</h2>
</div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body>
</html>

Crear el cdigo JavaScript que cumpla con las siguientes funciones:

a) Si la longitud (nmero de caracteres) del campo nombre es mayor de 15 o igual a cero, el formulario
no se enviar.

b) Si la longitud (nmero de caracteres) del campo apellidos es mayor de 30 o igual a cero, el formulario
no se enviar.

c) Si la longitud (nmero de caracteres) del campo email es mayor de 35 o igual a cero, el formulario no
se enviar. Si el email no contiene el carcter @ el formulario no se enviar.

d) Si se produce cualquiera de las circunstancias anteriores, debe aparecer un recuadro con color de
fondo naranja y texto negro a la derecha de la casilla de introduccin de datos, informando del
problema detectado en ese campo (si es que ese campo presenta algn problema). Nota: estos
mensajes se deben mostrar slo si el campo es errneo despus de pulsado el botn enviar, y deben
desaparecer si el usuario realiza un nuevo intento y el campo es correcto. Los mensajes se incorporarn
al DOM (no sern mensajes usando alert).

Ejemplo de ejecucin. El usuario deja el nombre, apellidos y correo electrnico vacos. A la derecha de
las casillas de introduccin de datos aparecer: El nombre no puede estar vaco. Los apellidos no
pueden estar vacos. El correo electrnico no puede estar vaco.

aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.

Ahora el usuario introduce nombre: <<Juan Manuel de Todos los Santos Efmeros Ecunimes de Todos
los das de la Tercera Edad>>. Como apellidos introduce: <<Surez>>. Y como correo electrnico
introduce: <<juanmanueldetodoslosantosefimerosecuanimesdetodoslosdias@gmail.com>>. Pulsa
enviar. A la derecha de la casilla de introduccin del nombre debe aparecer: Nombre demasiado largo.
Mximo 15 caracteres. A la derecha de apellidos no aparecer nada porque el apellido es correcto. A la
derecha del correo electrnico debe aparecer: Correo electrnico demasiado largo. Mximo 35
caracteres. Ahora el usuario escribe como nombre: Juan Manuel. Como apellidos: Surez. Y como
correo electrnico [email protected]. Pulsa enviar y el formulario es enviado.

Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.

Prxima entrega: CU01183E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

aprenderaprogramar.com, 2006-2029