Aprendeaprogramar Curso Javascript

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: contacto@aprenderaprogramar.com

Indice curso Tutorial bsico programador web: JavaScript desde cero.
INDICE DEL CURSO

TUTORIAL BSICO DEL
APRENDERAPROGRAMAR.COM PROGRAMADOR WEB:
JAVASCRIPT DESDE
CERO(CU01101E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Fecha revisin: 2029
Resumen: Entrega n1 del curso Tutorial bsico del programador web:

JavaScript desde cero. Indice del curso.
Autor: Csar Krall

Ms informacin: contacto@aprenderaprogramar.com
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
o@aprenderaprogramar.com
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: contacto@aprenderaprogramar.com
Orientacin Tutorial bsico programador web: JavaScript desde cero
ORIENTACIN SOBRE EL
CURSO TUTORIAL BSICO
APRENDERAPROGRAMAR.COM DEL PROGRAMADOR WEB:
JAVASCRIPT DESDE CERO
(CU01102E)
Seccin: Cursos
Fecha revisin: 2029
Resumen: Entrega n2 del Tutorial bsico del programador web:

JavaScript desde cero. Orientacin sobre duracin del curso y
conocimientos previos recomendados.
Autor: Csar Krall

aprenderaprogramar.com, 2006-2029
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.
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:

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:
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
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

Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
QU ES JAVASCRIPT?
PRINCIPALES USOS.
SERVIDOR Y CLIENTE.
APRENDERAPROGRAMAR.COM HTML, CSS Y
PROGRAMACIN.
EFECTOS DINMICOS
(CU01103E)
Seccin: Cursos
Fecha revisin: 2029
Resumen: Entrega n3 del Tutorial bsico JavaScript desde cero.
Autor: Csar Krall
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
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
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).
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.
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

JAVASCRIPT: LENGUAJE DE
PROGRAMACIN WEB .
JAVASCRIPT DEL LADO DEL
APRENDERAPROGRAMAR.COM
SERVIDOR. NODE.JS,
JAXER, RINGOJS, ETC.
(CU01104E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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:
om, 2006-2029
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.
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
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.

Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.
DIFERENCIAS ENTRE
JAVASCRIPT Y JAVA, HTML,
CSS, PHP, ETC. FRONTERA
ENTRE LENGUAJES EN
DESARROLLOS WEB
(CU01105E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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.
om, 2006-2029
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:
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.
<!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:

<html>
<head>
<title>Ejemplo Javascript aprenderaprogramar.com</title>
</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:

<html>
<head>
<title>Ejemplo CSS aprenderaprogramar.com</title>
<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>
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.
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.

JavaScript en CMS como Joomla, WordPress, Drupal
JAVASCRIPT EN
APLICACIONES WEB
COMO JOOMLA,
APRENDERAPROGRAMAR.COM WORDPRESS, DRUPAL,
PRESTASHOP, ETC.
MDULOS, TEMPLATES O
THEMES, ETC. (CU01106E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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.
om, 2006-2029
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.
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.
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.

JavaScript a partir de HTML y CSS bsico.
EMPEZAR A USAR
JAVASCRIPT A PARTIR DE
HTML Y CSS BSICOS
(MEN, LISTAS, LINKS,
FORMULARIOS, ETC.)
(CU01107E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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>

<body>

<div id="caabecera">
<h1>Portaal web aprenderaprogramar.co om</h1>
<h2>Didcctica y divulgacin de la prograamacin</h2>
</div>

>
<div id="ceentral">

<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>

om, 2006-2029


<div id="cuerpoCentral">

<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>



<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>

</div>

</div>



<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>

</body>

</html>
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):
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.

Diferentes respuestas de navegadores a JavaScript.
DIFERENCIAS ENTRE
NAVEGADORES EN
RESPUESTAS A
APRENDERAPROGRAMAR.COM JAVASCRIPT (FIREFOX,
EXPLORER, CHROME,
SAFARI). JAVASCRIPT EN
LNEA. (CU01108E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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
om, 2006-2029
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:
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
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.

JavaScript interno delimitado por etiquetas.
JAVASCRIPT INTERNO
<SCRIPT TYPE=
"TEXT/JAVASCRIPT">.
INTRPRETE JAVASCRIPT .
FUNCIN EJEMPLO
BSICO. (CU01109E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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>.
om, 2006-2029
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');
}
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>
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>
}
</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.

JavaScript externo en archivos de extensin js.
ARCHIVOS DE EXTENSIN
JS. INCLUIR JAVASCRIPT
EN WEBS
REFERENCIANDO UN
ARCHIVO EXTERNO CON
SRC (CU01110E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall
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>

t avascript" src=="rutaDelArch
hivo1.js"></script>
t hivo2.js"></script>
avascript" src=="rutaDelArch
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..
om, 2006-2029
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html:
<html>
<head>
<script type="text/javascript" src="functions.js"></script>
</head>
<body onload="alert('Completada la carga de la pgina')">
<div>
<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(){
}
function mostrarMensaje2(){
}
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().
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,
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>
</head>
<body>
<div>
<p>Hola</p>
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).

Comentarios JavaScript. Insercin automtica de punto y coma final.
COMENTARIOS
JAVASCRIPT EN LNEA O
APRENDERAPROGRAMAR.COM MULTILNEA. INSERCIN
AUTOMTICA DE PUNTO Y
COMA ; FINAL (CU01111E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
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:
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')
}
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.

Tipos de datos y tipos de variables en JavaScript. Declaracin.
TIPOS DE DATOS EN
JAVASCRIPT. TIPOS
PRIMITIVOS Y OBJETO.
SIGNIFICADO DE
UNDEFINED, NULL, NAN
(CU01112E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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).
om, 2006-2029
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.
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.
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>
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 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)
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.

Tipos de variables en JavaScript. Numricas (Number).
TIPOS DE VARIABLES
JAVASCRIPT: NUMRICAS
O NUMBER (INT ,
APRENDERAPROGRAMAR.COM INTEGER, SINGLE,
DOUBLE, FLOAT).
RESULTADOS NAN E
INFINITY (CU01113E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
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 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>
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
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.

Tipos de variables en JavaScript. String (Texto).
VARIABLES STRING
JAVASCRIPT. DEBEN
USARSE COMILLAS
SIMPLES O DOBLES?
CARACTERES DE ESCAPE
\N \T.LENGTH (CU01114E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:
om, 2006-2029
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).
<html>
<head>
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 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>
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
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.

Declaracin de variables JavaScript. Variables booleanas.
DECLARAR VARIABLES
JAVASCRIPT E
INICIALIZARLAS.
VARIABLES BOOLEANAS Y
VALORES TRUE Y FALSE.
TOSTRING() (CU01115E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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.
<html>
<head>
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>
</div>
</body>
</html>
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.

Operadores aritmticos JavaScript. Mdulo o resto de divisin.
OPERADORES
ARITMTICOS
JAVASCRIPT. %, MOD O
RESTO DE UNA DIVISIN
ENTRE ENTEROS
(MDULO). (CU01116E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

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>
</div>
</body>
</html>
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.

Operadores lgicos y relacionales JavaScript. Valores de verdad.
OPERADORES LGICOS
JAVASCRIPT. EJEMPLOS.
RELACIONALES MAYOR,
MENOR, IGUAL, DISTINTO.
AND, OR, NOT. CORTO-
CIRCUITO (CU01117E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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.
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.
EJEMPLO
<html>
<head>
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>
</div>
</body>
</html>

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)
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?

EJEMPLOS JAVASCRIPT
OPERADORES
INCREMENTO Y
APRENDERAPROGRAMAR.COM DECREMENTO.
ASIGNACIN Y
ASIGNACIN
COMPUESTA. (CU01118E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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:
<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>
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/>');
a = valorInicial_a; //Restablecemos el valor que inicialmente tena a
disminuir = --a * b; document.write ('Operador -- (anterior): --a * b == ' + disminuir + '<br/>');
a = valorInicial_a;
disminuir = a-- * b;
document.write ('Operador -- (posterior): a-- * b == ' + disminuir + '<br/>');
a = valorInicial_a;
</script>
</div>
<div>
<h2>Operadores de asignacin compuestos</h2>
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/>');
a = inicio; a *= b;
document.write ( 'Asignacin compuesta de multiplicacin: a *= b equivale a = a * b<br/>');
a = inicio; a /= b;
document.write ( 'Asignacin compuesta de divisin: a /= b equivale a = a / b<br/>');
a = inicio; a %= b;
document.write ( 'Asignacin compuesta de mdulo: a %= b equivale a = a % b<br/>');
</script> </div> </body> </html>
ejecuta con normalidad.
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
Operador -- (anterior): --a * b == 6
Operador -- (posterior): a-- * b == 8
Operadores de asignacin compuestos
Valores iniciales: a = 4, b = 2
Asignacin compuesta de suma: a += b equivale a = a + b
Asignacin compuesta de resta: a -= b equivale a = a - b
Asignacin compuesta de multiplicacin: a *= b equivale a = a * b
Asignacin compuesta de divisin: a /= b equivale a = a / b
Asignacin compuesta de mdulo: a %= b equivale a = a % b
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.

If else, If else if JavaScript. Condicionales estructuras de decisin.
IF ELSE, IF ELSE IF
JAVASCRIPT.
CONDICIONALES DEL
FLUJO O ESTRUCTURAS
DE DECISIN. EJEMPLOS.
EJERCICIOS. (CU01119E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
//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.
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>
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>
</div>
</body>
</html>
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)
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.

switch JavaScript. Decisin entre distintas alternativas.
SWITCH JAVASCRIPT.
SELECCIN ENTRE
ALTERNATIVAS.
DIAGRAMA DE FLUJO Y
EJEMPLO DE APLICACIN.
(CU01120E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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;
om, 2006-2029
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;
}
}
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
<html>
<head>
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 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>
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)
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.

ARRAYS JAVASCRIPT
(ARREGLOS).
DECLARACIN,
APRENDERAPROGRAMAR.COM INICIALIZACIN. ARRAY
VACO O CON ELEMENTOS
UNDEFINED. EJEMPLOS.
(CU01121E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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';
om, 2006-2029
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';
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.
EJEMPLO
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

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>
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
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.

Funciones JavaScript. Invocacin. Parmetros.
FUNCIONES JAVASCRIPT.
CONCEPTO.
PARMETROS O
APRENDERAPROGRAMAR.COM ARGUMENTOS Y TIPOS.
PASO POR VALOR.
RETURN. EJEMPLOS.
(CU01122E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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):

function nombreDeLaFuncin (param1, param2, , paramN) {
}
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:
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:

function nombreDeLaFuncin () {
return resultado;
}
Definicin de una funcin con parmetros que devuelve un resultado:

function nombreDeLaFuncin (param1, param2, , paramN) {
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.
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.
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.

DOM. Document Object Model. Qu es? Para qu sirve?.
DOM O DOCUMENT
OBJECT MODEL
JAVASCRIPT. QU ES?
APRENDERAPROGRAMAR.COM PARA QU SIRVE? EL
W3C. ARBOL DE NODOS.
PARENT Y CHILD.
EJEMPLOS (CU01123E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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 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:
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:

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
body {background-color:yellow; font-family: sans-serif;}
</style>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>

<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html">
<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>
</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.
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.
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.

TIPOS DE NODOS DEL

DOM: DOCUMENT,
ELEMENT, TEXT,
ATTRIBUTE, COMMENT.
ARBOL DE NODOS PARA
JAVASCRIPT (CU01124E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:
om, 2006-2029
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>
<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.

Acceso a nodos del DOM. childNodes, firstChild, lastChild, etc.
JAVASCRIPT CHILDNODES,
PARENTNODE,
FIRSTCHILD, LASTCHILD,
APRENDERAPROGRAMAR.COM NEXTSIBLING,
CHILDREN.LENGTH ,
CHILDELEMENTCOUNT
(CU01125E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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');
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:

<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>
</body></html>

Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
ACCEDER A NODOS HIJOS

JAVASCRIPT Y SUS
ATRIBUTOS. NODENAME,
NODETYPE Y NODEVALUE
O TEXTO DEL NODO.
EJEMPLOS (CU01126E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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>

</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:
om, 2006-2029
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]
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:
<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:

<html>
<head>
</head>
<body>Texto en body
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</div>

<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';
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';
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>
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:

<html>
<head>
</head>
<body>Texto en body
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</div>

<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';
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';
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';
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>
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.
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.

Acceder a elementos JavaScript. getElementById.
JAVASCRIPT: ACCEDER A
ELEMENTOS POR ID.
GETELEMENTBYID.
DOCUMENT.ALL.
CAMBIAR IMAGEN IMG
SRC (CU01127E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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).
<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

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>
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') {
document.getElementById('imgCarrusel').title = 'Desbordado por los nmeros';
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
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>
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.

Acceder a elementos JavaScript. getElementsByTagName.
GETELEMENTS
BYTAGNAME JAVASCRIPT.
ACCEDER A ELEMENTOS
APRENDERAPROGRAMAR.COM DE UN FORMULARIO.
CAMBIAR ESTILOS CSS
CON JAVASCRIPT.
(CU01128E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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:

<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
body {background-color:white; font-family: sans-serif;}
</style>
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">
</div>
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html"
onclick="cambiarAspecto('label')">
<label>
</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.
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.

Sintaxis JavaScript para propiedades CSS. Equivalencias.
JAVASCRIPT Y CSS:
EQUIVALENCIAS ENTRE
PROPIEDADES. LISTA O
TABLA PARA CAMBIAR
CSS POR JAVASCRIPT.
CAMELCASE. (CU01129E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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
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.

Acceder a nodos JavaScript. getElementsByName.
GETELEMENTSBYNAME
JAVASCRIPT. EVENTO
ONSUBMIT AL ENVIAR UN
FORMULARIO FORM.
CHECKED. EJEMPLO
(CU01130E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
<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:

<html>
<head>
<title>Ejemplo JavaScript - aprenderaprogramar.com</title>
label {color: maroon; display:inline-block; padding:5px;}
</style>
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 + ', ';}
if (elementosObtenidos[3].checked) { if (elegidos>=1) {msg = msg + ', ';}
if (elegidos == 0 ) {msg = 'No ha elegido ningn animal!';}
alert (msg);
}
</script>
</head>
<body>
<div id="cabecera">
</div>
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com"
onsubmit="informarItemsElegidos('animal')">
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">Len     </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre     </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo

    </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </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.

Bucles for con JavaScript. Sentencia break.
FOR JAVASCRIPT (BUCLES)

CONOCER TAMAO DE
UN ARRAY CON LENGTH.
BREAK PARA DETENER
EJECUCIN. EJEMPLOS Y
EJERCICIOS (CU01131E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:
om, 2006-2029

<html>
<head>
.boton{padding:15px; width: 200px; text-align:center; clear:both;
</style>
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>
<h3 class="boton" onclick="ejemploFor()">Pulsa aqu</h3>
</body>
</html>
Diez primeras letras:
E
Es
Est
Este
Ester
Estern
Esterno
Esternoc
Esternocl
Esternocle
Palabra al revs:
oediotsamodielconretsE
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.

<html>
<head>
p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}
.boton:hover {background: rgb(66, 184, 221);}
</style>
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>
<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>
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.
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.

Bucles while, do while. Sentencia continue. Bucles etiquetados.
WHILE JAVASCRIPT. DO
WHILE. CONTINUE PARA
SALTAR BUCLE. BUCLES
CON LABEL (ETIQUETA O
NOMBRE). EJEMPLOS
(CU01132E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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;}
}
om, 2006-2029
alert ('Bucle con while: \n'+ msg);

}
</script>
</head>
<body>
<h3 class="boton" onclick="ejemploWhile()">Pulsa aqu</h3>
</body>
</html>
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:

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">body {background-color:white; font-family: sans-serif;}
</style>
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>
<h3 class="boton" onclick="ejemploDoWhile()">Pulsa aqu</h3>
</body></html>
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';
}
}
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:

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
</style>
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'
comprobarSijvale2: if (j==2) {continue bucleExterior;}
}
}
msg = msg + 'Bucles sin etiquetar y continue sin referenciar: \n'
if (j==2) {continue;}
}
}
alert (msg);
}
</script>
</head>
<body>
<h3 class="boton" onclick="ejemploBuclesConContinue()">Pulsa aqu</h3>
</body>
</html>
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
Bucles sin etiquetar y continue sin referenciar:
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.

Funcin eval. getElementsByClassName para seleccionar nodos.
FUNCIN EVAL
JAVASCRIPT.
GETELEMENTSBY
CLASSNAME . EJEMPLO
CDIGO CALCULADORA
SIMPLE (CU01133E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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')"));
om, 2006-2029
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();
}
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.
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.

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>
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>

<div id="calculadora">

<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> 
</div>
<div class="teclas">

<span onclick="pulsada('7')">7</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class="operador" onclick="pulsada('/')"></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.

querySelectorAll y querySelector con JavaScript.
QUERYSELECTORALL
JAVASCRIPT Y
QUERYSELECTOR.
ACCEDER A ELEMENTOS
POR SELECTORES CSS.
EJEMPLOS (CU01134E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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:
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.

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>
function marcarOperadores() {
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>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>

<div id="calculadora">

<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> 
</div>
<div class="teclas">

<span class = "numero" onclick="pulsada('7')">7</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class="operador" onclick="pulsada('/')"></span>
<span class ="punto" onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
<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.
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).

Recorrer colecciones JavaScript con for in.
FOR IN JAVASCRIPT:
RECORRER ARRAYS O
PROPIEDADES DE
APRENDERAPROGRAMAR.COM OBJETOS. DIFERENCIA
ENTRE FOR NORMAL Y
FOR IN. EJEMPLOS
(CU01135E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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 -
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.

Diferencia entre NodeList y array. textContent, innerText.
NODELIST JAVASCRIPT.
DIFERENCIAR NODELIST Y
ARRAY. ACCEDER AL
TEXTO DE NODOS CON
TEXTCONTENT,
INNERTEXT (CU01136E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
Element body
id Attribute

programacin
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.
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:

body {font-family: sans-serif; margin:25px;}
#pulsador {padding:15px; width: auto; display: inline-block;
margin: 25px; cursor: pointer;
#pulsador:hover, #marcaOperadores:hover {background: rgb(66, 184, 221);}
</style>
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'; }
msg = 'Tercer for \n';
//Tercer for
for (i in nodoSpan) { msg = msg + i + ': contiene ' + nodoSpan[i].textContent + ' -- \n'; }
}
</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>
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 + **
3: contiene - , y nodeValue - ** 3: contiene - , y nodeValue - **
5: contiene , y nodeValue ** 5: contiene , y nodeValue **
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 + //
3: contiene undefined // 3: contiene - //
5: contiene undefined // 5: contiene //
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 + --
3: contiene - -- 3: contiene - --
5: contiene -- 5: contiene --
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.
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.

Versiones de JavaScript. Diferencia con ECMAScript-262.
VERSIONES DE
JAVASCRIPT. DIFERENCIA
CON ECMASCRIPT-262 O
ISO/IEC. ESPECIFICACIN
OFICIAL. ALGO DE
HISTORIA. (CU01137E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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:
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.
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.

InnerHTML JavaScript. Modificar HTML en tiempo real. This.
INNERHTML JAVASCRIPT.
MODIFICAR TEXTO, HTML
O ELEMENTOS COMO UN
DIV EN TIEMPO REAL.
THIS: ACCEDER AL NODO
ACTUAL. (CU01138E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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>
om, 2006-2029
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

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

#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.
* 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
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

Ejemplo innerHTML JavaScript. Ejercicio resuelto.
EJEMPLO INNERHTML
JAVASCRIPT. EJERCICIO
RESUELTO. MODIFICAR
CAMPOS DE UNA TABLA
DINMICA: EDITAR
CAMPOS. (CU01139E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
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.
om, 2006-2029
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.
Archivo testEdicionTablas.html:

<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>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
</tr>
</table>
<div id="contenedorForm">
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; }
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();
}
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.

createElement, createTextNode, appendChild JavaScript.
JAVASCRIPT
CREATEELEMENT,
CREATETEXTNODE,
APRENDERAPROGRAMAR.COM APPENDCHILD.
MODIFICAR PROPIEDAD
ONCLICK CON JAVASCRIPT
(CU01140E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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);
om, 2006-2029
Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados en tu navegador:

<html>
<head> <title>Curso JavaScript aprenderaprogramar.com</title>
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>
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).
Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados en tu navegador:

<html>
</style>
var contador = 1;
if (nodoPadre.children.length == 0) {
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'; }
}
}
</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.
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
om, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
JAVASCRIPT
INSERTBEFORE,
CLONENODE (COPIAR O
APRENDERAPROGRAMAR.COM DUPLICAR NODOS),
REMOVECHILD,
REPLACECHILD.
EJEMPLOS (CU01141E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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..

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;
om, 2006-2029
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>
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Indica los datos de la persona que se apunta al curso:</p>
<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.
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.

<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
#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;
</style>
var contador = 1
nodoHijo.className = 'nodoHijo'; nodoHijo.appendChild(nodoTexto); nodoPadre.appendChild(nodoHijo);
}
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 ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Aadir </div>
<div id="adelante" onclick="removeNodo()" > Eliminar </div>
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.

<html>
#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;
</style>
var contador = 1
nodoHijo.className = 'nodoHijo';
nodoHijo.appendChild(nodoTexto);
}
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>
<body>
<div id="nodoRaiz">
Contenido inicial es este texto
</div>
<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.

<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
div div {background-color: yellow;}
</style>
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>
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros

Funciones JavaScript para cadenas de texto
FUNCIONES JAVASCRIPT
PARA CADENAS DE
TEXTO: TOUPPERCASE,
APRENDERAPROGRAMAR.COM TOLOWERCASE, CHARAT,
SUBSTRING, SLICE,
INDEXOF, SPLIT, REPLACE,
REPLACEALL. (CU01142E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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
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.

<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;
#pulsador:hover, #marcaOperadores:hover {background: rgb(66, 184, 221);}
</style>
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">
<h3>Ejemplo funciones para texto JavaScript</h3>
</div>
<div id ="pulsador" onclick="ejemploCadenasDeTexto()"> Probar </div>
</body>
</html>
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.
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 PACO@GMAIL.COM debe
enviarse paco@gmail.com
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 paco@gmail.com

Objetos JavaScript
CREAR OBJETOS
JAVASCRIPT CON THIS Y
NEW. EJEMPLOS PARA
ENTENDER QU SON LOS
OBJETOS Y PARA QU
SIRVEN. (CU01143E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
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.

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">
<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.
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.mtodo1 = function () { cdigo . }
this.mtodo2 = function (param1, param2, , paramN) { cdigo }
}
Donde par1, par2, , parN son los posibles parmetros necesarios para crear un objeto.
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:

<html>
<head>
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);
}
}
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:

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);
var cuenta2 = new CuentaBancaria('Vladimir', 'Putin', 900000);
}
</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>
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.

Objetos JavaScript
CLASS JAVASCRIPT
CLASES? OBJETOS
PREDEFINIDOS. WINDOW,
APRENDERAPROGRAMAR.COM OBJETO GLOBAL.
NUMBER, MATH, DATE,
REGEXP, ERROR.
(CU01144E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
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

Function
relacionadas con funciones

Array
relacionadas con arrays

String
relacionadas con strings

Boolean
relacionadas con booleanos

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
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.

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>
</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.
Objetos JavaScript
Ya conocemos una de las formas de definir un tipo de objeto:

}
Como alternativa tenemos esta otra forma:

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).

<html>
<head>
function objetoSerie(unArray) {
this.nombre = 'Nombre del objeto';
this.contenidoArray = unArray;
this.suma = obtenerSuma;
}
Objetos JavaScript
function obtenerSuma() {
var suma=0;
for (var i=0; i<this.contenidoArray.length; i++){ suma = suma + this.contenidoArray[i]; }
return suma;
}
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></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.

Constructores JavaScript. Crear objetos vacos. Singleton.
CONSTRUCTORES
JAVASCRIPT. CREAR
OBJETOS VACOS. AADIR
APRENDERAPROGRAMAR.COM PROPIEDADES Y
MTODOS. OBJETOS
NICOS O SINGLETON.
EJEMPLOS (CU01145E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.

<html>
<head>
<title>Ejeemplo aprenderraprogramar.co om</title>
<meta ch harset="utf-8">
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>
om, 2006-2029
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();
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,
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());
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.

Arrays asociativos JavaScript? Recorrer propiedades de objetos.
ARRAYS ASOCIATIVOS
JAVASCRIPT? MAPS?
RECORRER PROPIEDADES
DE OBJETOS CON FOR IN.
EJEMPLOS EJERCICIOS
RESUELTOS. (CU01146E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.

<html><h head><title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utf-8">
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 }
}
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>
</body>
</html>
om, 2006-2029
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.

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></html>
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:

function ejemploObjetos() { var ejemploPropiedades = new Array();
ejemploPropiedades['color'] = 'verde'; ejemploPropiedades['pais'] = 'Argentina'; ejemploPropiedades['bebida'] = 'mate';
msg = '';
for(nombrePropiedad in ejemploPropiedades) {
msg = msg + 'Propiedad: ' + nombrePropiedad + '. Valor propiedad es: '+ejemploPropiedades[nombrePropiedad]+ ' \n';
}
alert (msg);
}
</script>
</head>
</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].
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.

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); }
alert ('Resultado de calcular(3, 15, \'+\') es '+ calcular(3,15, '+'));
}
</script>
</head>
</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.

Herencia basada en prototipos JavaScript (prototype).
PROTOTYPE JAVASCRIPT.
EJEMPLOS DE
PROTOTIPOS Y HERENCIA.
CMO USARLOS.
SINTAXIS. EFICIENCIA.
(CU01147E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:
om, 2006-2029
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.

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; }
}
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></html>
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.
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.
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;

}
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:

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; }
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></html>
Alternativa 2: definir un objeto y convertir una instancia de dicho objeto en prototipo:

this.propiedad1 = valorPropiedad1; this.propiedad2 = valorPropiedad2;
}
function objetoDestinadoASerPrototipo (par1, par2, ) { }
nombreObjeto.prototype = new objetoDestinadoASerPrototipo();

}
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();
taxi2.variarVelocidad(-10); alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
</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.
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):

this.propiedad1 = valorPropiedad1; this.propiedad2 = valorPropiedad2;
}
nombreObjeto.prototype = {
propiedadComn1: valorPropiedadComn1;
propiedadComn2: valorPropiedadComn2;

mtodoComn1: function (par1, par2, , parN) { },
mtodoComn2: function (par1, par2, , parN) { },

}


}
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; }
}
taxi2.variarVelocidad(-10);
alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
</body>
</html>
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.

Propiedades y mtodos estticos JavaScript.
STATIC JAVASCRIPT.
PROPIEDADES Y
MTODOS ESTTICOS O
DE CLASE. EJERCICIO.
CDIGO EJEMPLOS
BSICOS (CU01148E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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, ) { }

om, 2006-2029
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:


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.

function Taxi (tipoMotor, numeroPasajeros, carga, velocidad) {

if (Taxi.numeroObjetos) {Taxi.numeroObjetos++;}
else {Taxi.numeroObjetos = 1; }
alert('Creado objeto nmero '+Taxi.numeroObjetos);
}
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>
</html>
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.


}
TaxiRenault.fabricante = 'Renault, S.A.'; //Propiedad esttica

TaxiRenault.mostrarMensaje = function () {alert('Soy un taxi Renault');} //Mtodo esttico
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>
</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).
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.

Ejemplo herencia JavaScript. Herencia por prototipos.
HERENCIA JAVASCRIPT:
EJEMPLO CON CDIGO
APRENDERAPROGRAMAR.COM BSICO. JERARQUA DE
CLASES EN CADENA DE
PROTOTIPOS. (CU01149E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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');} }
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:
om, 2006-2029
function Taxi (tipoMotor, numeroPasajeros, carga, velocidad) {

}
Taxi.prototype.ruedas = 4;
Taxi.prototype.saludar = function() {
alert('Hola soy un taxi de ' + this.ruedas + ' ruedas y ' +this.numeroPasajeros +' pasajeros');}
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:

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();
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></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.
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
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
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;
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.
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>>.

call y apply JavaScript. Constructores con herencia en cadena.
CALL JAVASCRIPT.
DIFERENCIAS CON APPLY.
CONSTRUCTORES CON
HERENCIA EN CADENA
(PROTOTYPE CHAIN).
EJEMPLOS (CU01150E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.

function Profesor (nomb bre) { this.nomb bre = nombre || 'Nombre dessconocido'; this.salarioBase = 1
1200; }
function saludar()
s { alertt ('Hola, soy ' + this.nombre); }
e os() {
var unPro ofesor = new Prrofesor('Carlos');
saludar();;
saludar.call(unProfesor));
unProfesor.saludar(); //ERROR - NO PEERMITIDO
}
</script>
</head>
</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:
om, 2006-2029
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.

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); }
var unProfesor = new Profesor('Carlos');
saludar.call();
saludar.call(unProfesor, 'Ernesto', 'afecto');
}
</script>
</head>
</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.
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.

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></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.
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:

function Profesor (institucion) {

this.institucion = institucion || 'Desconocida';
this.salarioBase = 1200;
}
function ProfesorInterino(mesesContrato, institucion) {

Profesor.call(this, institucion);
this.mesesContrato = mesesContrato || -1;}
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>
</html>
El resultado de ejecucin esperado es: El objeto unProfesorInterino tiene 4 meses de contrato y

pertenece a la institucin Universidad de Chapingo
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.

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;}
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></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
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.
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.
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..
.

Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.
DEPURAR JAVASCRIPT.
CONSOLE.LOG. DEBUG DE
ERRORES CON FIREFOX
(FIREBUG), CHROME,
INTERNET EXPLORER.
IDES. (CU01151E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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:

function saludar() { alert ('Hola, soy ' + this.nombre); }
var unObjeto = new Array();
unObjeto.saludar();
}
</script>
</head>
</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).
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:
console.log(unObjeto);
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?

console.log('unObjeto es' + unObjeto);
console.log(unObjeto);
console.log('this es ' + this);
alert('Hello';
}
</script>
</head>
</body>
</html>

Operador condicional ternario JavaScript. Ventajas e inconvenientes.
OPERADOR CONDICIONAL
TERNARIO TIPO IF CON
INTERROGACIN
(JAVASCRIPT, JAVA, ETC.)
Y DOS PUNTOS. EJEMPLOS
(CU01152E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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.

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';
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>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>

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.

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>
</html>

Funciones predefinidas JavaScript para arrays.
FUNCIONES ARRAYS
JAVASCRIPT. PUSH, SORT
(ORDENAR NMEROS),
CONCAT, JOIN, POP,
SHIFT, SLICE, SPLICE.
(CU01153E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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
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
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.
FUNCIONES PARA TRANSFORMAR ARRAYS EN STRINGS O TIPOS PRIMITIVOS
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
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:
[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.

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>
</html>

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
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.
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].

Expresiones regulares JavaScript. Caracteres especiales.
EXPRESIONES REGULARES
JAVASCRIPT. REGEX. NEW.
CARCTER ESPECIAL.
NMERO, LETRA,
ESPACIO BLANCO.
(CU01154E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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*.
om, 2006-2029
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.
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.

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>
</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.
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 /â/
^ 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.
â..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)
ât*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).
ât{0,}e$
{0,} Equivalente al smbolo asterisco
Igual que el anterior
ât+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).
ât{1,}e$
{1,} Equivalente al smbolo +
El smbolo interrogacin indica opcionalidad: el ât?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} ât{0,1}e$
anterior puede aparecer 0 1 vez.
El smbolo or genera un match si se encuentra â(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.
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 [âu]$
[âbc] [â- 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 [Â-Za-z0-9_]
nmeros.
Existen otros smbolos especiales y
Otros combinaciones de smbolos especiales para
lograr determinados fines.
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

Parntesis en expresiones regulares JavaScript. Flags. Mtodos.
PARNTESIS EN
EXPRESIONES REGULARES
JAVASCRIPT. FLAGS.
APRENDERAPROGRAMAR.COM MTODOS EXEC, TEST,
MATCH, SEARCH,
REPLACE, SPLIT.
EJEMPLOS (CU01155E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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 = /î/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).
om, 2006-2029
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);
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 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 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);
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:

var expReg = /(\w+)\s(\w+)\s(\w+)/;
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></html>
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:

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></html>
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 PACO@GMAIL.COM debe
enviarse paco@gmail.com
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 paco@gmail.com

Funciones para nmeros y conversin de Strings a nmeros.
CONVERTIR STRING A
NUMBER JAVASCRIPT.
REDONDEAR. TOFIXED,
ISNAN, TOPRECISION,
VALUEOF. PARSEINT Y
PARSEFLOAT (CU01156E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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
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,
hace lo mismo que el mtodo toString().
toString() Devuelve la representacin como String de un alert (A1.toString());

objeto Number.
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.
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.

Concepto de evento JavaScript. Manejadores de eventos.
EVENTOS JAVASCRIPT.
TIPOS. PROPAGACIN.
MODELOS. MANEJADOR
O EVENT HANDLER.
CONFIRM. EJEMPLO.
(CU01157E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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.
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?
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:

</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<a href="http://aprenderaprogramar.com">Aprende a programar.</a>
<a href="http://aprenderaprogramar.es">Intntalo, ser divertido.</a>
</body>
</html>
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:
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
la pgina ya se ha realizado, no es necesario que el cdigo JavaScript para realizar este proceso quede
debajo del cdigo HTML.

window.onload = function () {
elemsA[i].onclick = transferir;}
function transferir() { return confirm('Ud. va a ser transferido de url hacia ' + this.href);}
}
</script>
</head>
<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:

<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>
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>

addEventListener JavaScript. Bubbling o burbujeo de eventos.
ADDEVENTLISTENER
JAVASCRIPT. REMOVE.
ATTACHEVENT. THIS EN
EVENTOS. PROPAGACIN.
BUBBLING. CAPTURA.
(CU01158E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:

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>
om, 2006-2029
<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:
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?
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

Lista de eventos JavaScript. onclick, onmouseover, onmouseout
LISTA DE EVENTOS
JAVASCRIPT. (ON) CLICK,
DBLCLICK, MOUSEOVER,
MOUSEOUT, CHANGE,
SUBMIT, KEYPRESS, ETC.
(CU01159E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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
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.
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.
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 a@.com no es un correo vlido.
d) No existen al menos dos letras despus del punto en el correo electrnico. Por ejemplo juan@gmail.c
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).

Objeto Event. Informacin del evento. type, target, timeStamp
OBJETO EVENT
JAVASCRIPT. TYPE,
CURRENTTARGET,
APRENDERAPROGRAMAR.COM TARGET, TIMESTAMP,
CLIENTX, SCREENX,
PAGEX, BUTTON.
(CU01160E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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.

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.

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:

var tiempoAnterior;
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.
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.

Eventos de teclado JavaScript. keyCode. which. fromCharCode
CAPTURAR EVENTOS DE
TECLADO JAVASCRIPT.
TECLA PULSADA.
FROMCHARCODE.
KEYCODE, WICH.
(CU01161E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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).
om, 2006-2029
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:
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.
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:

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>
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.
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.

Objeto Date JavaScript. getFullYear, getMonth, getDate.
DATE JAVASCRIPT.
DATE.NOW, DATE.PARSE,
DATE.UTC. DIFERENCIAS
APRENDERAPROGRAMAR.COM ENTRE GMT Y UTC
LOCAL. GETMONTH,
GETDATE, GETDAY.
(CU01162E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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).
om, 2006-2029
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.
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:

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></html>
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)>>
MTODOS GETTERS DE OBJETOS TIPO DATE
Los objetos de tipo Date disponen de estos mtodos:
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
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:
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.
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.
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).

Ms mtodos Date. toString, toLocaleDateString, toTimeString, etc.
FORMATO DE FECHAS
JAVASCRIPT. TOSTRING,
TOLOCALEDATESTRING,
TOLOCALETIMESTRING,
TOTIMESTRING, ETC.
(CU01163E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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.
Otro ejemplo: Introduzca su nombre: Juan >> Introduzca su pas: Chile >> Han pasado 0.73 minutos
entre su primera y segunda respuesta.
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.

setTimeOut, setInterval, requestAnimationFrame.
EJEMPLO RELOJ
JAVASCRIPT.
SETTIMEOUT,
APRENDERAPROGRAMAR.COM CLEARTIMEOUT,
SETINTERVAL, REQUEST
ANIMATIONFRAME.
(CU01164E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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
Detiene la ejecucin programada

clearInterval(referenciaTimer) por referenciaTimer mediante clearInterval(ejecT)
setInterval
requestAnimationFrame(nomb Crea un bucle de repintado globalID =
reFuncion) delegando el control del mismo en requestAnimationFrame(animacionRepet
el navegador. imos);
* Para funcin sin parmetros
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')});
Detiene la ejecucin programada

cancelAnimationFrame(referen
por referenciaTimer mediante Ver ejemplo ms abajo
ciaTimer)
RequestAnimationFrame.

function alertaTras5seg() { setTimeout(mostrarAlerta, 5000); }
function mostrarAlerta() {alert('Han pasado 5 segundos desde la carga de la pgina');}
</script>
</script></head>
<body onload="alertaTras5seg()" >
</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:
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
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):

button {margin:10px;}
#cabecera{position:absolute; color:white; margin:5px; font-family:verdana, arial;}
.relleno { width: 5px; height: 20px; background: black; float: left;}
</style>
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" \> </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>
</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;
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):

<html>
<head>
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 style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
</body>
</html>
El resultado esperado es que se muestre un reloj marcando los segundos.
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el mtodo setInterval.
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el mtodo requestAnimationFrame.
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.

Objeto Math JavaScript. Constantes matemticas y mtodos.
MATH JAVASCRIPT.
GENERAR NMEROS
ALEATORIOS RANDOM.
APRENDERAPROGRAMAR.COM REDONDEAR. FUNCIONES
TRIGONOMTRICAS Y
CONSTANTES.
(CU01165E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:
Loggaritmo en base 10 de la co
onstante de
d Euler,
Math.LO
OG10E
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
om, 2006-2029
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.
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
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.
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. .
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).

Efectos visuales JavaScript: imgenes, texto, etc.
EFECTOS JAVASCRIPT
VISUALES, DE IMGENES,
TEXTO... RECURSIN.
APRENDERAPROGRAMAR.COM SETTIMEOUT NO
FUNCIONA EN BUCLES
FOR, WHILE, ?
(CU01166E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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

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>
om, 2006-2029
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:

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)" >
</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);
}
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:

*{font-family: verdana, sans-serif;}
.nodoNuevo{background-color: black; color:white; width:100px;
text-align:center; padding:20px; font-size:32px; float:left;}
</style>
var contador = 1;
function mostrarNumConRetardo() {
setTimeout(crearNodo, 1000);
}
function crearNodo() {
nodoHijo.className="nodoNuevo";
nodoHijo.innerHTML = ''+contador;
}
</script>
</script></head>
<body onload="mostrarNumConRetardo()" >
</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:
for(var i=0; i<10; i++){
}
}
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.
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.

<html>
<head>
</style>
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
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+contador;
document.getElementById('cabecera').appendChild(nodoHijo); contador = contador+1;
}
}
</script>
</script>
</head>
<div id="cabecera" style="width:500px;">
<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.
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);
}
om, 2006-2029
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);
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>
Java</a></div>
HTML</a></div>
CSS</a></div>
JavaScript</a></div>
PHP</a></div>
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>
Pseudocdigo</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26">
Libros/ebooks</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div>
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
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.

typeof y tipo de variable. Ambito (scope) global y local con JavaScript.
TYPEOF JAVASCRIPT.
SABER TIPO DE VARIABLE.
GLOBAL Y LOCAL: AMBITO
APRENDERAPROGRAMAR.COM (SCOPE). VAR CAMBIA EL
AMBITO. EJEMPLO
CUENTA ATRS
(CU01167E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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

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>
om, 2006-2029
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.

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)" >
</body></html>
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
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;
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:

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()" >
</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.
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:

var target_date = new Date("Jan 1, 2089").getTime();
var days, hours, minutes, seconds;
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.
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.

Ambitos (scopes), namespaces y significado de this en JavaScript.
THIS JAVASCRIPT:
SIGNIFICADOS. AMBITOS
(SCOPE). ANIDAMIENTO.
NAMESPACES. EJEMPLO
EJERCICIO RESUELTO.
(CU01168E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:

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>
<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
om, 2006-2029
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.

var capacidadDeposito = 200;
function obtenerNecesidades(contenidoActual){
alert('La capacidad del depsito es ' + capacidadDeposito + ' litros y faltan ' + (capacidadDeposito-contenidoActual) +
' litros para llenarlo');
}
</script></head>
<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:

//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) {
alert('La capacidad del depsito es ' + capacidadDeposito +
' litros y faltan ' + (capacidadDeposito-contenidoActual) + ' litros para llenarlo');
}
</script></head>
<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>>
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 = {
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:

<html>
<head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
var modeloFordSpace = {
capacidadDeposito: 200,
obtenerNecesidades: function (contenidoActual){
alert('La capacidad del depsito es ' + modeloFordSpace.capacidadDeposito + ' litros y faltan ' +
(modeloFordSpace.capacidadDeposito-contenidoActual) +
' litros para llenarlo');}
}
var modeloToyotaSpace = {
obtenerNecesidades: function(contenidoActual) {
alert('La capacidad del depsito es ' + capacidadDeposito +
' litros y faltan ' + (capacidadDeposito-contenidoActual) + ' litros para llenarlo');}
}
</script>
</head>
<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:

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';
}
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></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:
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:
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:

}
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 saludar() { alert ('Hola, soy ' + this.nombre); }
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:

alert ('Aqu this es ' + this);
var miObjeto = {};
miObjeto.habla = function() {alert('Aqu ahora this es ' + this);}
miObjeto.habla();
}
</script>
</head>
</body></html>
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:

var cabecera = document.querySelector('#cabecera');
var respuestaCabecera = function () {
alert(this);
setTimeout(function () { alert(this);}, 2000);
};
cabecera.addEventListener('click', respuestaCabecera, false);
}
</script>
</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.

Closures JavaScript, ejemplos. Qu son y para qu sirven.
CLOSURES JAVASCRIPT.
EJEMPLOS. CONCEPTO:
QU SON Y PARA QU
APRENDERAPROGRAMAR.COM SIRVEN. RETARDO DE
EJECUCIN CON
SETTIMEOUT Y CLOSURES.
(CU01169E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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::

<html><h head><title>Ejeemplo aprenderraprogramar.co
om</title><metta charset="utf-8">
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>
<
</body><</html>
om, 2006-2029
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.

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></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.
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;
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)()); }
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:

<html>
<head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
function dimeVuelta(entrega){ var precio = 1000;

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>
</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:

</style>
for(var i=1; i<11; i++){ setTimeout(crearNodo(i), 1000); }
}
function crearNodo(numero) {
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+numero;
}
</script>
</script></head>
</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:
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:

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
</style>
for(var i=1; i<11; i++){ setTimeout(function(x) { return function() { crearNodo(x); }; }(i), 1000*i); }
}
function crearNodo(numero) {
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+numero;
}
</script>
</script></head>
</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.
EJERCICIO
Analiza el siguiente cdigo y responde a las siguientes preguntas:

<html>
<head>
body { font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>
function cambiarDimensionFuente(size) { return function() { document.body.style.fontSize = size + 'px';};
}
var size8 = cambiarDimensionFuente(8);

function setClicks(){
document.getElementById('fuente-8').onclick = size8;
}
</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?
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.

Jerarqua de objetos JavaScript. Objeto navigator: userAgent...
JERARQUA DE OBJETOS
JAVASCRIPT. FORMS,
ELEMENTS, IMAGES,
APRENDERAPROGRAMAR.COM LINKS. NAVIGATOR:
USERAGENT,
GEOLOCATION, ONLINE.
(CU01170E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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]
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):

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>
<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;
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.
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.

Propiedad window.location y objetos tipo Location en JavaScript.
REDIRECCIONAR Y
RECARGAR WEBS CON
JAVASCRIPT.
APRENDERAPROGRAMAR.COM WINDOW.LOCATION.
HREF, HOSTNAME,
ASSIGN, RELOAD,
REPLACE. (CU01171E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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:
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:
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
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:

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>
<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"><a href="#"> Probar</a> </div>
</body></html>
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.

Propiedad window.history: back, forward, go. window.screen
RETROCEDER PGINA
ANTERIOR JAVASCRIPT.
WINDOW.HISTORY.
APRENDERAPROGRAMAR.COM OBTENER TAMAO
PANTALLA.
WINDOW.SCREEN.
FRAMES. (CU01172E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:
om, 2006-2029
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:
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.
Escribe este cdigo y comprueba su funcionamiento:

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>
<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.
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
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
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:

window.onload = function() {
iframe = document.getElementsByTagName( "iframe" );
alert( "Tenemos: " + iframe[0].name + ', ' + iframe[1].name );
}
for (var i = 0; i < iframe.length; i++) {iframe[i].style.background = "red";}
}
</script>
</head>
<body>
<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.

Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.
OBJETO WINDOW
JAVASCRIPT.
PROPIEDADES: NAME,
APRENDERAPROGRAMAR.COM INNERWIDTH, LENGTH, ,
OPENER, OUTERHEIGHT,
PAGEXOFFSET, SCREENX
(CU01173E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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.
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.).
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.
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

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>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
</body>
</html>
Aade el cdigo JavaScript necesario para mostrar esta informacin por pantalla.

Objeto window JavaScript. Mtodos. Efectos. confirm, prompt
MTODOS DE WINDOW
JAVASCRIPT. EFECTOS.
CONFIRM, PROMPT,
APRENDERAPROGRAMAR.COM OPEN, MOVEBY,
MOVETO, FOCUS,
RESIZETO, CLOSE
(CU01174E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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);
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.
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.

var start = 0;
var positionY = window.innerHeight/2-125;
var nuevaVentana;
var controlSinusoidal=0;
}
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.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>
</html>
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.

JavaScript trabajo con formularios. document.forms. elements
FORMULARIOS
JAVASCRIPT: EJEMPLOS
DE DOCUMENT.FORMS Y
APRENDERAPROGRAMAR.COM ELEMENTS. ACCESO
DIRECTO A FORMULARIOS
Y CAMPOS CON ID Y
NAME (CU01175E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029
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:

<style type="text/css"> label{display:block;margin:5px;}</style>
window.onload = function () { var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", ejecutarEjemplo); }
var formularios = document.forms; alert('El nmero de formularios en el documento es: '+formularios.length); }
</script></head>
<form name ="formularioContacto" method="get" action="accion1.html">
<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.
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.

}
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>

</form>

</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.
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.

window.onload = function () { var ejemplo = document.getElementById('ejemplo');
ejemplo.addEventListener("click", 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>
</form>
<label>Nombre:<input id="nombreFormReclamacion" type="text" name="nombre" /></label>
<label>Apellidos:<input id="apellidosFormReclamacion" type="text" name="apellidos" /></label>
</form>
</body></html>
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
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)

JavaScript trabajo con formularios. setAttribute y getAttribute.
SETATTRIBUTE Y
GETATTRIBUTE
JAVASCRIPT. DIFERENCIAS
APRENDERAPROGRAMAR.COM DE SINTAXIS
PROPIEDADES CON HTML.
EJEMPLO MAXLENGTH.
(CU01176E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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>
om, 2006-2029
Se puede ver como un rbol de nodos del DOM:
Element body
id Attribute

programacin
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.
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.

<html>
<head>
}
var msg = '';
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>

<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
</form>
</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
maxlength ahora 5 para: motivoFormReclama maxlength ahora 5 para: motivoFormReclama
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.
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.
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:

</head>
</form>
</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.

this.style is undefined. addEventListener con parmetros
FUNCIONES
MANEJADORAS DE
EVENTOS Y
APRENDERAPROGRAMAR.COM ADDEVENTLISTENER CON
PARMETROS.
THIS.STYLE IS UNDEFINED
(CU01177E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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:

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>
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>
<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
om, 2006-2029
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
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); }
}
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';}
}
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.

<html><head><title>Ejemplo2 aprenderaprogramar.com</title><meta charset="utf-8">
formularios[i].elements[j].addEventListener('click', cambiaColor);
}
}
}
}
function cambiaColor () {
}
</script>
</head>
</form>

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:

formularios[i].elements[j].addEventListener('click', cambiaColor('', 'yellow'));
}
else { formularios[i].elements[j].addEventListener('click', cambiaColor('', 'orange')); }
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:
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.
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:
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:
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>
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.

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>

</form>

</form>
</body>
</html>
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.

Mtodo bind JavaScript. Parntesis alrededor de una funcin.
BIND JAVASCRIPT .
FUNCIN ENTRE
PARNTESIS QUE LA
ENVUELVEN. FUNCTION
STATEMENT REQUIRES A
NAME (CU01178E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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):

<style typpe="text/css"> label{display:block;margin:5px;}</style>
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>
<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>>
om, 2006-2029
El resultado esperado es que se muestre por consola lo siguiente:

Has pulsado en el inputbox cuyos ndices son i=0 , j=0
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):

<html>
<head>
label{display:block;margin:5px;}
</style>
(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>

</form>
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
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.

function suma3(x, y, z) {return x+y+z;}
var suma3Primos = suma3.bind(undefined, 2, 3, 5);
alert (suma3Primos());
alert(suma3Primos()+15);
}
</script>
</head>
<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.
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):

<html>
<head>
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>

</form>

</form>
</body></html>
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?
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.

Trabajo con formularios JavaScript: obtener value, checked, etc.
EVENTOS DE
FORMULARIOS: CHANGE.
OPTIONS, SELECTEDINDEX
OBTENER VALUE DE
INPUT, CHECKED Y TEXT
DE SELECT (CU01179E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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
om, 2006-2029
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.
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.

<html>
<head>
<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>
/* 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

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);}
}
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).
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 ?

Array. prototype, nodeList, arrays, array-like objects.
ARRAY.PROTOTYPE
JAVASCRIPT. DIFERENCIA
ENTRE ARRAY ARRAY-
APRENDERAPROGRAMAR.COM LIKE, NODELIST.
TYPEERROR: NOT A
FUNCTION NO METHOD
'FOREACH' (CU01180E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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):

<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>
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>
om, 2006-2029
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):
var elementosInput = document.getElementsByTagName('input'); //Elementos input
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'));
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:
var arrayNodos = Array.prototype.slice.call(elementosInput);
arrayNodos.push([].slice.call(elementosSelect));
}
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:
var arrayNodos = Array.prototype.slice.call(elementosInput);
arrayNodos.push(Array.prototype.slice.call(elementosSelect));
}
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:
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]));
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.

Mtodos focus, blur. Detener envo de formularios. submit.
HTMLELEMENT
JAVASCRIPT. MTODOS
FOCUS, BLUR. SUBMIT
APRENDERAPROGRAMAR.COM FORMULARIOS: DETENER
ENVO. ONSUBMIT
RETURN. EJEMPLOS.
(CU01181E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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.
om, 2006-2029

<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; }
</style>
var elegido = false;
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>
<form name ="formularioContacto" method="get" action="#">
</select><br/>
</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.
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.

<style type="text/css"> body {margin-left:30px; font-family: sans-serif;}
</style>
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);
}
function procesaDentroDe2Segundos() {
document.forms['formularioContacto'].submit();
}
</script>
</head>

<form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">
</select><br/>
</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:
<!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">
</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?

Validacin de formularios con JavaScript.
JAVASCRIPT VALIDAR
CAMPO TEXTO NO VACO.
QUE VALOR SEA
APRENDERAPROGRAMAR.COM NUMRICO. EMAIL O
CORREO ELECTRNICO EN
FORMULARIOS.
EJEMPLOS (CU01182E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

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 ()">>
om, 2006-2029
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:

<style type="text/css">body {background-color:yellow; font-family: sans-serif;} label{color: maroon; display:block;
padding:5px;}
</style>
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
function validarFormulario(evObject) {
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>
programacin</h2>
</div>
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.
<html>
<head>
body {background-color:yellow; font-family: sans-serif;}
label{color: maroon; display:block; padding:5px;}
</style>
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
function validarFormulario(evObject) {
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>
programacin</h2></div>
<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>
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.
EJERCICIO
Dado el siguiente cdigo HTML que contiene un formulario con tres campos (nombre, apellidos y
email):

<html>
<head>
<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>
</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.
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 juanmanuel@gmail.com. Pulsa enviar y el formulario es enviado.

disabled JavaScript. Deshabilitar elementos en tiempo dinmico.
DISABLED JAVASCRIPT EN
INPUT TEXT, SUBMIT,
BUTTON, SELECT, LINK,
APRENDERAPROGRAMAR.COM STYLE... IMPEDIR ENVO
DUPLICADO FORM.
DESACTIVAR CSS
(CU01183E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

disabled JavvaScript. Deshaabilitar elemen
ntos en tiempo dinmico.
DISABLED
D JAVASCRIP
PT
Diferentes objetos dee tipo HTMLLElement tieenen disponible la prop piedad disabled, que permite que
estn inactivos o deshabilitados de
d modo qu ue el usuario
o no podr pulsar
p sobre ellos o eleggirlos. Esto
puede tener distintass utilidades:: impedir el envo dupliicado de un
n formulario por error, desactivar
temporalmmente algunnas opciones,, etc.
VAR EL BOT
DESACTIV N DE ENVO
O DE UN FOR
RMULARIO. IMPEDIR
I ENVO DUPLICA
ADO
Cuando un usuario pu ulsa el botn

n enviar de un
u formulario o deberamoos esperar quue no ejecutte ninguna
accin ad dicional hastaa que el formulario sea enviado. No o obstante, podra ocurrrir que por error
e haga
dos vecess click, o quee la conexin
n con el servvidor se dem
more y tenga la impresin n de que el formulario
f
no se est enviando y vuelva a haacer click sobbre el botn de envo. Estas situacion
nes pueden dar
d lugar a
el envo duplicado
d dee un formulaario, situaci
n no deseabble en cuantto que duplica procesos,, consume
recursos y puede dar lugar a problemas com mo errores en procesoss de compraa o contabilizacin de
solicitudees, etc.
Para evitaar un posiblee click en la fraccin

f de tiempo
t que transcurre
t en
ntre el click een el botn de envo y
la carga de
d la pginaa de destino o podemos usar
u la propiedad disablled (deshabiilitado) apliccable a los
objetos HTMLElementt de tipo input y a objeto os HTML de tipo
t button entre
e otros.
La sintaxiss a utilizar ess la siguientee:
nomb
breDelObjeto
oADeshabilitar.disabled = true;
Lo normaal ser deshaabilitar el botn de envoo en cuanto detectemoss el evento cclick sobre el botn de
ubmit sobre un formulario. Escribe este
envo su e cdigo y comprueb
ba cmo se d desactivan lo
os botones
cuando see pulsa el botn enviar (een este caso lo detectam
mos usando el
e evento subbmit):

<html>
<head><ttitle>Ejemplo aprenderaprogramar.com</title><meta charsset="utf-8">
<style type="text/css"> body {margin-left:30px; font--family: sans-se erif;}
.estiloForrm {background d-color: #f3f3f3
3; border: solid 2px black; margin-left:20px; width:
w 330px; padding:10px; }
.estiloForm label {displaay: block; width
h: 120px; float: left; text-align::right; margin-b
bottom: 35px; p
padding-right: 20px;}
2
br {clear: left;} input[typ
pe="submit"], in
nput[type="reset"] {margin:25 5px 5px 10px 5p px;}
</style>
documen nt.forms['formuularioContacto']].addEventListeener('submit', avisarUsuario);
a
}
om, 2006-2029
function avisarUsuario(evObject) {
var botones = document.querySelectorAll('.botonFormulario');
for (var i=0; i<botones.length; i++) {botones[i].disabled = true; }
var nuevoNodo = document.createElement('h2');
nuevoNodo.innerHTML = '<h2 style="color:orange;">Enviando... espere por favor</h2>';
document.body.appendChild(nuevoNodo);
var retrasar = setTimeout(procesaDentroDe2Segundos, 1000);
}
function procesaDentroDe2Segundos() {document.forms['formularioContacto'].submit();}

</script>
</head>
<body>
<h3>Ejemplos JavaScript</h3>
<label>Direccin</label><input id="direccion1" name="direccion1" type="text"/>
<input class="botonFormulario" type="submit" value="Enviar"/>
<input class="botonFormulario" type="reset" value="Cancelar"/>
</form>
</div>
</body></html>
En el cdigo anterior hemos activado un retardo utilizando setTimeout simplemente para poder
comprobar cmo se desactivan los botones hasta que el formulario es enviado (es decir, el setTimeout
no sirve realmente para nada, lo hemos incluido para poder ver el efecto de desactivar botones).
DESACTIVAR INPUTS, SELECTS O CHECKBOX
En ocasiones nos puede interesar desactivar elementos de un formulario hasta que el usuario no elija
alguna opcin previa requerida.
Podemos desactivar inputs de tipo text, inputs de tipo checkbox, o elementos de tipo select. Para ello
debemos aplicar la sintaxis ya conocida:
nombreDelObjetoADeshabilitar.disabled = true;
Escribe el siguiente cdigo donde vemos un ejemplo de cmo mantener desactivados ciertos elementos
hasta que el usuario no escoja una opcin que queremos sea escogida antes que las que mantenemos
desactivadas. Comprueba los resultados.

<style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;}
</style>
// Variable global por estar declarada sin hacer uso de var
elementosEnForm = document.forms['formularioContacto'].elements;
for (var i=0; i< elementosEnForm.length; i++) {
if (elementosEnForm[i].type != 'radio') {elementosEnForm[i].disabled = true;}
else {elementosEnForm[i].addEventListener('click', activarElementos);}
}
}
function activarElementos() { for (var i=0; i<elementosEnForm.length; i++) {elementosEnForm[i].disabled=false;} }

</script>
</head>
<p>Debe elegir tratamiento para activar el formulario</p>
<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/>
</form>
</div>
</body></html>
El resultado esperado es que el usuario no pueda escribir en los input de tipo text, ni seleccionar
opciones del select o de tipo checkbox, ni pulsar botn de envo o reset. Por qu? Porque inicialmente
establecemos la propiedad disabled de todos los elementos del formulario (excepto los input de tipo
radio) a true. Esta situacin no cambiar hasta que el usuario elija una opcin de las presentadas como
input de tipo radio. Cuando detectamos el evento click sobre un objeto de tipo radio (el usuario ha
elegido una de las dos opciones que le pedimos que elija) hacemos que la propiedad disabled de todos
los elementos del formulario quede establecida en true, con lo cual ya pueden introducirse textos,
elegir opciones o pulsar los botones de envo o cancelacin.
DESACTIVAR ELEMENTOS OPTION DE UN SELECT
En ocasiones nos puede interesar desactivar no un select de forma completa sino determinados
elementos del select. Por ejemplo, supongamos que se trata de una aplicacin web para un hotel
donde existen tres habitaciones suite: Mediterrneo, Atlntico y Pacfico. Supongamos que la
habitacin Atlntico est en obras y queremos mantener la opcin visible pero deshabilitada, de forma
que el usuario no pueda elegir esa opcin.
Escribe este cdigo y comprueba cmo la opcin Atlntico no est disponible para ser seleccionada.

<style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;}
</style>
var habitacionesSelect = document.forms['formularioContacto'].elements['habitacion'];
// habitacionesSelect.options[2].disabled=true; Qu ocurre si cambia el ndice y no es 2?
for (var i=0; i<habitacionesSelect.length; i++) {
if (habitacionesSelect[i].value =='atlantico') {habitacionesSelect[i].disabled=true;}
}
}
</script>
</head>
<p>La suite Atlntico est en obras</p>
<label>Habitacin suite:</label><select id="habitacion" name="habitacion">
<option value="mediterraneo">Mediterrneo</option>
<option value="atlantico">Atlntico</option>
<option value="pacifico">Pacfico</option>
</select><br/>
</form>
</div>
</body></html>
Fjate que podemos desactivar la opcin directamente usando la sintaxis

habitacionesSelect.options[2].disabled=true; pero que sin embargo lo hemos hecho con un bucle for.
Usar un bucle for tiene un coste (recorrer los elementos) pero nos proporciona ms seguridad al basar
la seleccin en el value 'atlantico' en lugar de en un ndice numrico que podra cambiar. No podemos
decir que una opcin sea buena y otra mala: simplemente son alternativas que tenemos para llegar a
un mismo objetivo y como programadores deberemos elegir la que consideremos ms adecuada.
DESACTIVAR OTROS ELEMENTOS COMO BUTTON LINK
Hay ms elementos a los que se le puede aplicar la propiedad disabled, por ejemplo los elementos
button. La sintaxis a utilizar es la misma que hemos visto anteriormente.
Tambin podemos desactivar elementos link como los que se emplean para referenciar un archivo CSS
externo o elementos style como los que se emplean para incluir CSS interno. Usando esta posibilidad
podemos activar o desactivar CSS de una pgina web de forma bastante sencilla. Escribe este cdigo y
comprueba cmo se activa o desactiva CSS pulsando en el botn:

<style type="text/css"> .miEstilo{background-color: yellow; font-size:3em;} input{margin:10px;}
</style>
function cambiarCSS() {
var nodoStyle = document.getElementsByTagName('style');
nodoStyle[0].disabled = !nodoStyle[0].disabled;
}
</script>
</head>
<input type="button" value="Activar/Desactivar Css" onclick="cambiarCSS()"/></br>
<div class="miEstilo">Esto es un Ejemplo</div>
</body></html>
El resultado esperado es que el texto Esto es un ejemplo se muestre con fondo amarillo y texto
grande al cargar la pgina. Cuando pulsemos en el botn Activar/Desactivar CSS el texto dejar de
tener el fondo amarillo y se mostrar con tamao de letra normal al quedar el nodo style con la
propiedad disabled establecida a true. Si se vuelve a pulsar el botn, la propiedad disabled toma el
valor opuesto al que tuviera anteriormente. Esto lo conseguimos con la sintaxis de la lnea
nodoStyle[0].disabled = !nodoStyle[0].disabled;
RESUMEN
La propiedad disabled de los objetos HTMLElement del DOM nos permite deshabilitar elementos de
formularios pero tambin dejar inhabilitados otros nodos del DOM, con lo que podemos conseguir
efectos interesantes.
Hay ciertos tipos de nodos, por ejemplo un elemento div, que no admiten la propiedad disabled.
EJERCICIO
Crear el cdigo HTML y JavaScript que cumpla con las siguientes funciones:
a) Deber presentarse un formulario con 2 elementos select. El primer elemento select permitir elegir
pas y podr elegirse entre Mxico, Espaa, Per y Colombia.
b) El segundo elemento select permitir elegir ciudad y podr elegirse entre Mxico D.F., Guadalajara,
Madrid, Barcelona, Lima, Trujillo, Bogot y Cali.
c) Si el usuario selecciona ciudad sin haber elegido pas, deber mostrarse como opcin elegida de pas
el pas correspondiente a la ciudad. Por ejemplo, si el usuario selecciona Bogot deber aparecer como
pas seleccionado Colombia.
d) Si el usuario selecciona un pas en primer lugar, debern deshabilitarse todas las opciones que no
correspondan a ciudades de ese pas. Por ejemplo si el usuario elige Espaa, slo podr elegir entre
Madrid y Barcelona, debiendo estar Mxico D.F., Guadalajara, Lima, Trujillo, Bogot y Cali
deshabilitadas. Si el usuario cambia el pas, debern cambiar las ciudades cuya eleccin es posible.
e) Ampliacin opcional para el ejercicio: introduce medidas de seguridad adicionales para que no
puedan existir incoherencias entre el pas seleccionado y la ciudad. Por ejemplo, imagina que el usuario
elige en primer lugar como ciudad Mxico D.F. y luego elige como pas Per. Introduce medidas de
seguridad que impidan que esto suceda.

Qu significa javascript:void(0)? return false y preventDefault.
QU SIGNIFICA
JAVASCRIPT VOID (0) Y
JAVASCRIPT: EN HREF?
APRENDERAPROGRAMAR.COM QU DIFERENCIA
RETURN FALSE Y
PREVENTDEFAULT?
(CU01184E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Qu signifiica javascript:vvoid(0)? return false y preventtDefault.
ALGUNOSS DETALLES JAVASCRIPT

J
Vamos a detenernos
d a estudiar alggunos detalles de JavaSccript.
BURBUJEO EN LA PRO
OPAGACIN DE EVENTO
OS
Cuando hablamos
h so
obre los evventos en apartados
a anteriores deel curso inddicamos que pueden
producirse varios eveentos simulttneamente y que en este caso la respuesta a los eventoss sigue un
orden. Si no se indicaa otra cosa, el evento bburbujea deesde dentro hacia fuera y a esto se le llamaba
bubbling. Por ejemplo o, si tenemoos tres div, uno
u interno,, otro interm
medio y otro o externo, y definimos
una funciin de respu uesta al eveento click so obre los elementos div,, cuando hacemos click en el div
interno en
e primer lu ugar se ejecuta la funciin de respuesta para el div interno, luego para p el div
intermediio y luego paara el div externo.
Ejecuta esste cdigo y comprueba sus resultados:

<style typpe="text/css"> *{font-family:sans-serif;}
div {marggin:20px; padding:20px; backgground-color: yeellow; border-sstyle:solid;}</styyle>
var elemssDiv = documen nt.querySelectoorAll('div');
for (var i==0;i<elemsDiv.length;i++) {elemsDiv[i].addEventListener("click", decirHola));}
}
function decirHola() {aleert('Hola soy el '+this.classNam
me);}
</script>
</head>
<body><h h2>Cursos apreenderaprogram mar.com</h2><h h3>Ejemplos JaavaScript</h3>
<div classs="externo"> So oy el div extern
no:
<div class="inttermedio"> Soyy el div intermedio
<div class="interno"> Soy el div intterno</div>
</div>
</div>
</body><</html>
El resultado esperado
o es que si hacemos
h clicck en el div interno se muestre porr pantalla: Hola
H soy el
interno, Hola
H soy el inntermedio, Hola
H soy el exxterno.
e evento asociado al eleemento ms interno, y

Aqu comprobamos que primero se ejecuta laa respuesta el
seguidamente las respuestas de elementos
e e
envolventes sucesivamen
s nte hasta lleggar a comple
etar todos
los evento
os.
om, 2006-2029
Podemos evitar que el evento burbujee indicando que no debe propagarse hacia elementos externos.
Esto lo podemos hacer cambiando la funcin decirHola. Cmbiala por este cdigo y comprueba lo que
ocurre:
function decirHola(elEvento) {
alert('Hola soy el '+this.className);
elEvento.stopPropagation();
}
Ahora el nico evento que se ejecuta es el primero (ms interno), y al encontrarnos con
stopPropagation() queda detenida la propagacin.
EVITAR LA ACCIN DE DEFECTO
Recordar que algunos eventos tienen una accin de defecto, por ejemplo el evento submit de un
formulario tiene como accin de defecto el envo del formulario, o el evento click sobre un link tiene
como accin de defecto el cargar la pgina referenciada por el link en el navegador.
La accin por defecto puede ser anulada introduciendo preventDefault() en la funcin manejadora del
evento. Escribe este cdigo y comprueba sus resultados:

<style type="text/css"> *{font-family:sans-serif;}
div {margin:20px; padding:20px; background-color: yellow; border-style:solid;}</style>
var elemsLink = document.querySelectorAll("div a");
var elemsDiv = document.querySelectorAll('div');
for (var i=0;i<elemsLink.length;i++) {
elemsLink[i].addEventListener("click", decirHola);
elemsDiv[i].addEventListener("click", decirHola);
}
}
function decirHola(elEvento) {
elEvento.preventDefault();
alert('Hola soy el '+this.parentNode.className);
elEvento.stopPropagation();
}
</script>
</head>
<body>
<h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="externo"> Soy el div externo: <a href="http://aprenderaprogramar.com"> Aqu un link </a>
<div class="intermedio"> Soy el div intermedio <a href="http://aprenderaprogramar.es"> Aqu un link </a>
<div class="interno"> Soy el div interno <a href="http://aprendeaprogramar.es"> Aqu un link </a> </div>
</div>
</div>
</body></html>
El resultado esperado es que si hacemos click en el link ms interno se muestre nicamente <<Hola soy
el interno>>. Sin embargo, no se carga la pgina web referenciada por el link debido al
preventDefault(), y no se ejecuta la respuesta a los eventos asociados a los div debido a que el evento
no se propaga debido a stopPropagation().
AL ESTILO TRADICIONAL
Todava se pueden encontrar muchos programadores o cdigo existente donde para prevenir la accin
de defecto se usa una sintaxis ms tradicional basada en definir la respuesta al evento dentro del
cdigo HTML y prevenir la accin de defecto escribiendo return false. Ejecuta este cdigo y comprueba
sus resultados:

<style type="text/css"> *{font-family:sans-serif;}
div {margin:20px; padding:20px; background-color: yellow; border-style:solid;}</style>
function decirHola(elEvento, that) {

alert('Hola soy el '+that.parentNode.className);
return false;
}
</script>
</head>
<body>
<h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="externo" onclick="return decirHola(event, this);"> Soy el div externo: <a onclick="return decirHola(event,
this);" href="http://aprenderaprogramar.com"> Aqu un link </a>
<div class="intermedio" onclick="return decirHola(event, this);"> Soy el div intermedio <a onclick="return
decirHola(event, this);" href="http://aprenderaprogramar.es"> Aqu un link </a>
<div class="interno" onclick="return decirHola(event, this);"> Soy el div interno <a onclick="return decirHola(event, this);"
href="http://aprendeaprogramar.es"> Aqu un link </a> </div>
</div>
</div>
</body></html>
En lugar de incluir el return al final de la funcin tambin podramos introducirlo en lnea con esta
sintaxis: onclick="decirHola(event, this); return false;"
De este modo, la sentencia return queda en lnea despus de invocar la ejecucin de la funcin de
respuesta sin necesidad del return en la llamada ni dentro de la propia funcin.
En este caso al pulsar en el link interno se nos muestra: <<Hola soy el interno, Hola soy el intermedio,
Hola soy el externo, Hola soy el >> que se corresponde con los eventos click en el link a, ms click en
cada uno de los tres div (suponiendo un total de 4 elementos). La propiedad className no est definida
para el nodo padre del div ms externo, de ah que nos aparezca como una cadena vaca.
Fjate en que en JavaScript return false tiene el mismo efecto que preventDefault(). En JavaScript return
false no evita la propagacin del evento, del mismo modo que preventDefault() tampoco la evita. Si
quisiramos evitar la propagacin del evento hemos de introducir stopPropagation().
QU SIGNIFICA JAVASCRIPT VOID?
Cuando se revisa cdigo HTML y JavaScript con frecuencia nos encontramos con expresiones del tipo:
<a href="javascript:void(0);"> Aqu un texto </a>
Qu significa javascript:void(0)?
Para entender esto primeramente nos vamos a referir a qu significa javascript: en el contexto del
atributo href cuando escribimos javascript: estamos indicando que en lugar de llevar a una direccin
web, se ejecute el cdigo javascript que vaya indicado a continuacin de los dos puntos.

function mostrarMensaje() {
alert('Aham, lo que pareca un link en realidad lo que est haciendo es ejecutar una funcin javascript!');
}
</script>
</head>
<a href="javascript:mostrarMensaje();"> Pulsa aqu por favor </a>
</body></html>
Aqu tenemos ms o menos claro que lo que se indica es: cuando se pulse sobre el enlace, ejecuta la
funcin JavaScript indicada.
Un efecto parecido se puede lograr si escribimos <a href="#" onclick="mostrarMensaje();">Pulsa aqu

por favor</a>
Sin embargo, escribir como destino del href # mueve la vista al comienzo del documento html (para ver
este efecto tiene que tratarse de un enlace colocado en una pgina web que tenga un scroll vertical).
Hay una forma sencilla de evitar el retorno al comienzo de la pgina en este caso: hacer que el evento
devuelva false, con lo que la accin de defecto (ir al comienzo de la pgina no se ejecutar). El cdigo
sera este:
<a href="#" onclick="return false;"> Pulsa aqu por favor </a>
Piensa en otra alternativa como esta: <a href="javascript://"> Pulsa aqu por favor </a>
Qu har este cdigo? Este cdigo ejecutar el cdigo javascript despus de los dos puntos. Despus
de los dos puntos tenemos una doble barra que es el smbolo de comentario en JavaScript. Entonces
que har? Pues no har nada, porque ejecutar un comentario equivale a no hacer nada.
Este tipo de cdigo normalmente lo encontraremos en situaciones como esta:
<a href="javascript://" onclick="imprimir()"> Pulsa aqu para imprimir </a>
Qu se est haciendo aqu?
a) Se crea el aspecto de un link con el objetivo de avisar al usuario de que puede hacer click sobre ese
elemento.
b) El link en s no lleva a ningn lado
c) Como respuesta al evento click se ejecuta una funcin JavaScript.
Este planteamiento no parece muy adecuado: incluir un link que no lleva a ninguna parte simplemente
para que el usuario sepa que puede pulsar ah para ejecutar algo. Tiene sentido? Posiblemente no
demasiado, porque no tiene lgica crear un link que no linka a ningn lado: es confuso. La alternativa
recomendada sera incluir el texto dentro de un elemento html sin necesidad de escribir una etiqueta
de link, y dotarla del estilo adecuado (como si fuera un link, pero sin serlo) para que el usuario sepa que
puede pulsar ah. La idea sera de este tipo:
<span style="comoSiFueraLink" onclick="imprimir()> Pulsa aqu para imprimir </span>
Esto es ms correcto: aqu est claro lo que se quiere hacer y se hace de una forma coherente.
En muchas ocasiones nos encontraremos algo como esto:
<a href="javascript:void(0)" id="loginlink">Pulsa aqu para logarte</a>
Void es un operador JavaScript que evala (ejecuta) la expresin que se le pasa como argumento y a
continuacin devuelve <<undefined>>. En este caso, javascript:void(0) ejecuta 0, que en realidad no
tiene ningn efecto, y devuelve undefined. Y qu significa esto? Pues lo mismo que
href="javascript://", es decir, que simplemente se crea un link que no enlaza con ningn lado (o
podramos decir que enlaza con undefined, lo cual es enlazar con ningn lado).
Entonces tiene void alguna utilidad? Puede tenerla. Como hemos visto, nos puede servir para decir
que el link no lleve a ningn lado, aunque por otro lado como respuesta al evento s puede que se
ejecuten ciertos efectos colaterales.
Otra utilidad sera dar lugar a la ejecucin de algo devolviendo undefined. Por ejemplo, ejecuta este
cdigo y comprueba sus resultados:

<html>
<head>
</head>
<body>
<a href="javascript:void(document.body.style.backgroundColor='yellow');">
Pulsa aqu para cambiar a color de fondo amarillo
</a>
</body>
</html>
Aqu tenemos un link que no lleva a ningn lado (ya que void termina devolviendo undefined), y sin
embargo existe un efecto colateral derivado de la expresin que se le pasa como argumento a void.
Obtendramos el mismo efecto escribiendo esto:
<a href="#" onclick="document.body.style.backgroundColor='yellow'; return false;">Pulsa aqu para

cambiar a color de fondo amarillo</a>
Que posiblemente es ms claro (se dice que oscurece menos el cdigo). Pero ms claro todava es no
crear un link si realmente no es un link, por tanto preferimos usar esto otro:
<span class="comoSiFueraLink" onclick="document.body.style.backgroundColor='yellow';">Pulsa aqu

para cambiar a color de fondo amarillo</a>
Obviamente para usar esto tendremos que haber definido el estilo CSS .comoSiFueraLink para darle la
apariencia al texto de un link.
Algunos expertos consideran que javascript void(0) es una mala prctica de programacin (de hecho
hay una expresin acuada en referencia a ello: <<javascript void(0) must die>>).
Nosotros no recomendamos su uso, pero es til conocer su significado porque ha sido usado y sigue
usndose, con lo cual es posible que nos encontremos cdigo que se use cuando estemos revisando
cdigo desarrollado por otros programadores.
RESUMEN
Con javascript:void(0) y otras expresiones similares se busca que el usuario perciba como algo donde
puede hacer click un texto, por ejemplo Imprimir, y para ello se simula un link. De esta forma el
navegador mostrar el texto con un color y cursor especial si se pasa el ratn encima de l. Esto no es
una idea muy afortunada y sin embargo ha sido bastante usada debido a que es simple.
EJERCICIO
Escribe este cdigo en un editor y responde a las siguientes preguntas:

</head>
<a href="javascript:void(0);" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form');
f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m =
document.createElement('input');
m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);
var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token');
s.setAttribute('value', 'aprenderaprogramar.com='); f.appendChild(s);f.submit(); };return false;">Pulsa aqu para
proceder</a>
</body></html>
a) Para qu se utiliza aqu javascript: void(0)?
b) Explica paso a paso qu es lo que hace el cdigo JavaScript que se ha incluido como respuesta al
evento click.
c) Qu implica el uso de return false; en este cdigo?
d) Modifica el cdigo para que la apariencia y resultados sean iguales pero sin usar un elemento <a>
</a>

Validacin de formularios JavaScript. RadioButton, checkbox, select.
VALIDACIN DE
FORMULARIOS
JAVASCRIPT. EJEMPLO
APRENDERAPROGRAMAR.COM COMPROBAR CAMPO NO
VACO, RADIO BUTTON,
CHECKBOX, SELECT
ELEGIDO (CU01185E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Validacin de
d formularios JavaScript. RadioButton, che
eckbox, select.
VALIDACIIN DE FORM
MULARIOS JAVASCRIPT
Con los conocimiento

c os que hemmos ido adquiriendo durante el currso somos ccapaces de realizar la
validacin
n de un form
mulario para evitar que sea
s enviado si no cumple con cierto os criterios. En
E caso de
no cumpliir, podemos mostrar un aviso al usuaario para que
e corrija o reellene los dattos necesarioos.
EJEMPLO DE VALIDAC
CIN DE UN FORMULAR
RIO
En esta enntrega te pro

oponemos queq estudies y ejecutes el
e cdigo quee te mostram mos a contin
nuacin. Es
importantte que lo an nalices lnea a lnea y que compren
ndas el signifficado de caada instrucciin. Si has
venido siiguiendo el curso debes ser capaz de comprenderlo totalmente,
t ya que no o estamos
introducieendo concepptos nuevos, sino viendo una aplicacin de conceeptos ya estu
udiados.

<style typpe="text/css"> body {margin-left:30px; font-ffamily: sans-serrif;} h4 {margin:0;} div {float:leeft;}
.estiloForrm, #validacionDatos {backgro ound-color: #f3ff3f3; border: so olid 2px black; margin-left:10p
m px; width:300pxx; }
.estiloForrm{ width: 330p px; padding:10ppx;} #validacion
nDatos {height:226px; paddingg:10px; backgro ound-color: yellow;}
.estiloForrm label {display: block; width: 120px; float: left;
l text-align:rright; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[typ
pe="submit"], in
nput[type="reset"] {margin:25 5px 5px 10px 5p px;}
</style>
formularioCon ntacto.addEventListener("subm mit", validarForrmulario);
document.getElementById('vvalidacionDatoss').style.visibilityy = 'hidden';
formularioCon ntacto.addEventListener("chan nge", ocultarAvvisos);
}
function ocultarAvisos()
o {document.gettElementById('validacionDato
os').style.visibilitty = 'hidden';}
function validarFormula
v ario(elEvento) {
elEvento..preventDefault(); //Impedir envo
e del formu ulario hasta quee se realice la vaalidacin
var msgV Validacion = '';
var casillaaDatos = docum ment.getElemen ntById('validaciionDatos'); //Nodo donde vam mos a mostrar laa validacin de datos
casillaDattos.innerHTML = '<h4> Aviso datos
d a revisar o corregir: </h4
4>';
var radioButTrat = document.getElemeentsByName("tratamiento"); //Nodos / radio buttons
b
var checkkboxElements = new Array();
var elemeentosSelect = document.getEl
d ementsByTagN Name('select');
var elemeentosDelForm = document.getElementsByTaagName('input')); //Elementos input
/*Validaccin de que se haya

h elegido un
n radio button**/
var radioButElegido = faalse;
for (var i==0; i<radioButTTrat.length; i++)) {if (radioButTrrat[i].checked ==
= true) { radioB
ButElegido=truee;} }
if (radioB
ButElegido == faalse){msgValidacion = msgValid dacion+'<p>(*) No hay elegidoo tratamiento ssr. o sra. </p> ';}
om, 2006-2029
/*Validacin de que los campos input text no estn vacos*/

var textosConformes = true;
if (elementosDelForm[i].type == 'text' && elementosDelForm[i].value=='') {
msgValidacion = msgValidacion+'<p>(*) Campo '+ elementosDelForm[i].name +' est vaco </p> ';
textosConformes = false;
}
}
/*Validacin de que se haya elegido un elemento del select */

var ciudadElegida = true; indiceElegido = document.getElementById('ciudad').selectedIndex;
if( indiceElegido == null || indiceElegido == 0 ) {
msgValidacion = msgValidacion+'<p>(*) No hay elegida una ciudad. </p> ';
ciudadElegida = false;
}
/*Validacin de que se haya elegido un checkbox*/

if (elementosDelForm[i].type == 'checkbox') {checkboxElements.push(elementosDelForm[i]);}
}
var checkboxMarcado = false;
for (var i=0; i<checkboxElements.length;i++) {
if (checkboxElements[i].checked ==true) {checkboxMarcado=true;}
}
if (checkboxMarcado==false) {msgValidacion = msgValidacion+'<p>(*) No hay elegida ninguna preferencia </p> ';}
/*Decisin final: mostrar avisos si hay fallos o enviar el formulario si est correcto*/
if (radioButElegido == false || checkboxMarcado == false || textosConformes == false || ciudadElegida == false ) {
document.getElementById('validacionDatos').style.visibility = 'visible';
casillaDatos.innerHTML= casillaDatos.innerHTML+msgValidacion;
}
else { alert ('Se ha realizado la validacin de datos y es conforme, se procede al envo del formulario');
document.forms['formularioContacto'].submit(); }
}
</script></head>
<label>Tratamiento</label> <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
<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>
</select><br/>
</form>
</div>
<div style="float:left;"><div id="validacionDatos" style="float:left;"><h4> Aviso datos a revisar o corregir: </h4></div>
El resultado esperado es que si hay algn elemento que el usuario ha olvidado rellenar o marcar, se
mostrar un mensaje de aviso informando de aquellos elementos que presentan problemas. Por
ejemplo, si el usuario intenta enviar el formulario sin haber elegido ninguna opcin ni rellenado ningn
dato se mostrar el mensaje:
Aviso datos a revisar o corregir:

(*) No hay elegido tratamiento sr. o sra.
(*) Campo nombre est vaco
(*) Campo apellidos est vaco
(*) Campo direccion1 est vaco
(*) No hay elegida una ciudad.
(*) No hay elegida ninguna preferencia
Cuando el usuario realiza un cambio en el formulario, los mensajes de aviso desaparecen (para ello
hemos usado el evento onchange del formulario y modificado la propiedad css visibility del contenedor
donde se muestran los mensajes). Cuando el usuario vuelve a pulsar el botn enviar, se le muestran los
mensajes de aviso relativos a los campos que tienen problemas. Si ningn campo presenta problemas,
se muestra el mensaje: Se ha realizado la validacin de datos y es conforme, se procede al envo del
formulario y el formulario es enviado a la url de destino.
INTRODUCIR EXPRESIONES REGULARES EN LA VALIDACIN DE FORMULARIOS
Una tcnica bastante empleada y bastante til es realizar validaciones basadas en comprobar que la
entrada del usuario cumple con un determinado patrn. Por ejemplo, supongamos que solicitamos un
nmero de telfono y deseamos comprobar que exactamente tiene 9 dgitos. Por ejemplo 646 77 88 22
sera vlido pero 646 77 88 22 11 no sera vlido.
Esto se puede hacer de forma relativamente usando funciones para cadenas de caracteres y
expresiones regulares. Ambas han sido explicadas en apartados anteriores del curso, por lo que no
vamos a explicarlo aqu de nuevo. Revisa estos apartados del curso si tienes dudas. Un ejemplo de
validacin con expresiones regulares podra ser algo como esto:
var telefonoValue = document.getElementById('telefono').value;

if( !(/^\d{9}$/.test(telefonoValue)) ) {
alert ('Formato de telfono no vlido');
}
Si no entiendes el significado de este cdigo, revisa los apartados relacionados con expresiones
regulares del curso.
EJERCICIO
Un programador ha desarrollado un cdigo y nos han pedido que lo revisemos. Escribe este cdigo en
un editor y responde a las siguientes preguntas:
<html>
<head>
input {margin:10px;}
</style>
<script>
function Valida(formulario) {
/* Validacin de campos NO VACOS */
if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) ||
(formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {
alert('Falta informacin');
return false;
}
if (isNaN(parseInt(formulario.campo2.value))) {
alert('El campo2 debe ser un nmero');
return false;
}
/* validacin del CDIGO POSTAL*/
var ercp=/(^([0-9]{5,5})|^)$/;
if (!(ercp.test(formulario.cpostal.value))) {
alert('Contenido del cdigo postal no es un cdigo postal vlido');
return false; }
/* validacin del DNI */
var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
if (!(erdni.test(formulario.dni.value))) {
alert('Contenido del dni no es un DNI vlido.');
return false; }
/* validacin del e-mail */
var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;
if (!(ercorreo.test(formulario.email.value))) {
alert('Contenido del email no es un correo electrnico vlido.');
return false; }
/* si no hemos detectado fallo devolvemos TRUE */
return true;
}
</script>
</head>
<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="http://aprenderaprogramar.com" >
Campo1 <input type="text" name="campo1"><br>
Campo2 (debe ser nmero) <input type="text" name="campo2"><br>
Cdigo postal <input type="text" name="cpostal"><br>
DNI <input type="text" name="dni"><br>
email <input type="text" name="email"><br>
<input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
a) Cmo se realiza la comprobacin de que no hay campos vacos?
b) Cmo se realiza la comprobacin de que el campo 2 es un nmero?
c) En qu consiste la validacin del cdigo postal? Explcala paso a paso. Pon ejemplos de tres valores
vlidos y tres valores no vlidos.
d) En qu consiste la validacin del DNI? Explcala paso a paso. Pon ejemplos de tres valores vlidos y
tres valores no vlidos.
e) En qu consiste la validacin del email? Explcala paso a paso. Pon ejemplos de tres valores vlidos y
tres valores no vlidos.
f) Cmo se consigue que no se enve el formulario si no se cumplen los requisitos exigidos?

Objetos de tipo Image JavaScript. Obtener una coleccin de imgenes.
IMAGE JAVASCRIPT. NEW

IMAGE. COMPLETE,
NATURALWIDTH.
APRENDERAPROGRAMAR.COM OBTENER TODAS LAS
IMGENES DE UNA WEB
CON DOCUMENT.IMAGES
(CU01186E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Objetos de tipo Image JavvaScript. Obtener una colecci
n de imgeness.
OBJETOS DE TIPO IMA

AGE JAVASC
CRIPT
Ya conocemos que podemos

p creear un nodoo del DOM de tipo imagen usando o una expressin como
documentt.createElem ment('img'). Sobre
S ese nodo
n podemmos especificcar las propiedades de la imagen
como alt,, src, etc. y podemos insertar el nodo en el do ocumento HTTML. Existe una forma alternativa
a
basada enn los denom minados objettos tipo Imaage que se crrean invocan
ndo new Imaage() como veremos
v a
continuaccin.
OBJETOS DE TIPO IMA

AGE EN JAVA
ASCRIPT
JavaScriptt define el tipo de datoss HTMLElem ment que noss permite reepresentar n
nodos del DO
OM. Como
subtipo de HTMLElem ment tenemo os HTMLImaageElement, que permitee crear nodo os <img> y dispone
d de
atributos y mtodos adicionales
a p
para este tipo
o de nodos de
d imagen.
Veamos ene primer lugar cmo crrear un objeeto de tipo HTMLImageE

H Element. La ssintaxis a uttilizar es la
siguiente::
var image1 = new Imagee(opcionalWidth, opcionaalHeight);
Los valores de width h (anchura) y height (aaltura) son opcionales.

o Si se especiifica un solo
o valor se
entiende que se refierre al valor width para la imagen.
El contenido de un noodo (por ejem mplo lo que visualizarem

mos si tratam
mos de mostrrarlo por panntalla) ser
el cdigo HTML generrado para la etiqueta imgg. Escribe estte cdigo y comprueba
c ssus resultado
os (cambia
la ruta de la imagen utilizada si lo deseas):

e os() {
var imageen1 = new Imagge(600, 400);
imagen1..src =
'http://apprenderaprograamar.com/imagges/thumbs_po ortada/thumbs__divulgacion/355_errores_en_programacion.jjpg';
alert('Vammos a aadir unn nodo al DOM de tipo: '+imaggen1);
documen nt.body.append dChild(imagen1);
alert ('El cdigo
c HTML ha quedado as: \n\n' + document.body.innerrHTML + '\n\n');;
}
</script>
</head>
<body><d div id="cabecerra"><h2>Cursoss aprenderaproogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
</body>
</html>
om, 2006-2029
El resultado esperado es que una vez pulsamos sobre Probar se muestre lo siguiente:
Vamos a aadir un nodo al DOM de tipo: [object HTMLImageElement]

El cdigo HTML ha quedado as:
<div style="color:blue;" id="pulsador" onclick="ejemploObjetos()"> Probar </div>
<img src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_divulgacion/35_errores_en_programacion.jpg"
height="400" width="600">
Adems, debe aparecer la imagen una vez que aadimos el nodo img al elemento body del documento.
PROPIEDADES Y MTODOS DE OBJETOS TIPO IMAGE
Disponemos de propiedades y mtodos aplicables a los objetos de tipo Image. Algunas propiedades a
destacar son:
SINTAXIS UTILIDAD Ejemplos aprenderaprogramar.com
img1.alt Define el atributo alt (texto img1.alt = 'Humor informtico';

alternativo) para la imagen
img1.complete Devuelve un valor booleano que es document.getElementById("img1").complete;

true si la imagen ha sido
Nota: puede no dar los resultados deseados si la
completamente cargada por el
imagen est cacheada o si la imagen se ha
navegador o false en caso contrario.
definido a travs de JavaScript.
img1.width Define el atributo width (anchura) de img1.width=200;

la imagen, en pxeles
img1.height Define el atributo height (altura) de la img1.height=200;

imagen, en pxeles
img1.naturalWidth Devuelve el ancho de la imagen img1.width=img1.naturalWidth;

original en pxeles
Nota: la url de la imagen debe estar definida para
poder recuperar su tamao
img1.naturalHeigth Devuelve la altura de la imagen img1.height=img1.naturalHeight;

original en pxeles
Nota: la url de la imagen debe estar definida para
poder recuperar su tamao
img1.src La url de la imagen, relativa o absoluta img1.src = 'dibujo.jpg';
OBTENCIN DE TODAS LAS IMGENES EN UN DOCUMENTO HTML
El objeto document tiene una propiedad relacionada con imgenes que es interesante, ya que nos
permite recuperar una coleccin de objetos imagen con todas las imgenes presentes en el documento
HTML, ordenadas segn su orden de aparicin en el documento HTML. Para ello se usa esta sintaxis:
var coleccionDeImagenes = document.images;
Dado que obtenemos una coleccin, podemos acceder a un elemento de la misma usando un ndice
(siempre que el ndice sea vlido). Por ejemplo coleccionDeImagenes[2] nos devolvera el nodo del
DOM con la tercera imagen que aparece en el documento. Tambin se admite la sintaxis
document.images.item(2) con el mismo resultado.
Tambin podemos usar la propiedad length de las colecciones para saber cuntas imgenes han sido
encontradas. Por ejemplo alert ('Se han encontrado '+document.images.length +' imgenes');
EJERCICIO
un editor y responde a las siguientes preguntas (nota: cambia la ruta de las imgenes si quieres):
<html>
<head>
image01= new Image()
image01.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png"
image02= new Image()
image02.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg"
function rollover(imagename, newsrc){
document.images[imagename].src=newsrc.src
}
</script>
</head>
<body style="text-align:center; margin:50px;">
<p> Pasa el mouse sobre la imagen </p>
<a href="#" onmouseover="rollover('example', image02)"
onmouseout="rollover('example', image01)">
<img src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png" name="example">
</a>
</body>
</html>
a) En qu mbito se encuentran image01 e image02?
b) Qu tipo de objetos son image01 e image02?
c) Aparecern errores debido a la falta de puntos y coma de terminacin en las instrucciones de

JavaScript? Por qu?
d) Al acceder a una imagen con la sintaxis document.images[imagename], se est usando un ndice

numrico para acceder a la coleccin? Si es numrico, indicar qu valores son los que se usan. Si no es
numrico, indicar qu tipo de ndice es.
e) El efecto esperado es que la imagen que se muestra cambie cuando pasamos el puntero del ratn
por encima de ella. Por qu se produce ese cambio? Explcalo brevemente.

Captura de errores con JavaScript. Bloques try catch.
ERROR, THROW Y TRY

CATCH JAVASCRIPT .
MESSAGE, FILENAME,
APRENDERAPROGRAMAR.COM LINENUMBER. EVAL Y
RANGEERROR,
REFERENCE ERROR.
EJEMPLOS (CU01187E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Captura de errores con JavvaScript. Bloqu
ues try catch.
TRATAMIENTO DE ER
RRORES
Los prograamadores JaavaScript se enfrentan

e co
on frecuenciaa a la aparicin de errorees durante laa ejecucin
del cdigo en los navvegadores. AlA igual quee otros lenguuajes de pro ogramacin, JavaScript permite
p la
captura de esos errores con instru dentificar y tratar dichos errores.
ucciones quee permiten id
ERROR, THROW Y TRY

Y CATCH
La gestin n de erroress en tiempo de ejecuci n tiene com mo elemento

os principalees las senten
ncias try
catch, thrrow, y el tipo
o de datos deefinido por JaavaScript Errror.
El tipo dee datos Errorr es un tipo de datos preedefinido de

e JavaScript que
q permitee crear objettos de tipo
Error. Loss objetos dee tipo Error son creadoss automticaamente por JavaScript ccuando se produce un
error en tiempo
t de ejjecucin, peero tambin podemos de efinir la creaacin de objeetos Error a travs del
cdigo.
Un objeto o Error reprresenta un error

e y tiene propiedad des asociadaas (por ejem mplo propied dades que
informan del tipo de error
e de que se trata). No ormalmente un error no se crea y see guarda, siino que un
error se lanza (is thrrown). Al lan
nzarse un errror, el flujo o ejecucin prevista
p del sscript se ver alterado.
Esa alteraacin puede dar lugar a la detencin n del script sis el error im
mpide que prosiga la ejeccucin, o a
que el sccript contine ejecutnd dose con an nomalas, etcc.. Como forma de prevvenir que el script se
detenga sin
s ms, o qu ue aparezcan n disfuncionees no previsttas, existe la posibilidad de capturar y tratar el
error usanndo las senteencias try catch.
c
Un esquema tpico paara tratamien

nto de errorees ser el siguiente:
tryy {
//C
Cdigo que vamos
v a ejecutar
// Si
S se produce un error see lanza una excepcin
e s salta al catch
y se
}
cattch (e) {
// e represen
nta el error laanzado
// mensajes de
d alerta, accciones a ejeccutar, etc.
}
Vamos a partir del sigguiente ejem

mplo que al ser
s ejecutado dar lugarr a que salte un error. Esscribe este
cdigo, activa la con
nsola de tu navegador y comprueba cmo al ejecutar
e el ccdigo te aparece un
mensaje de
d error cuan ndo haces click sobre el texto
t Probaar.
om, 2006-2029

function ejemploError() {
cambiarImagen(imagen1);
alert('Se cambi la imagen'+window.imagen1);
alert('A continuacin se le solicitarn los datos fiscales');
}
</script>
</head>
<div style="color:blue;" id ="pulsador" onclick="ejemploError()"> Probar </div>
</body>
</html>
El resultado esperado es que no ocurra nada y que en la consola se muestre un mensaje de error similar
a este: <<ReferenceError: cambiarImagen is not defined>>. Este error nos informa de que se est
invocando una funcin que no est definida (adems tenemos un segundo error, ya que imagen1
tampoco est definido).
Supongamos que este error aparezca sin querer, debido a un error del programador o debido a que el
usuario o el cdigo HTML no facilitan los datos que se espera. Un bloque try catch puede envolver a un
fragmento de cdigo (tan amplio como se desee) y establecer un tratamiento para el error, de modo
que el script continuar ejecutndose siempre que sea posible.

try{
cambiarImagen(imagen1);
alert('Se cambi la imagen'+imagen1);
}
catch(e){ alert('Se produjo un error. Referencia: '+e);}
}
</script></head>
</body></html>
El resultado esperado es que se muestre una ventana de mensaje de alerta con un texto similar al
siguiente: <<Se produjo un error. Referencia: ReferenceError: cambiarImagen is not defined>> y que
seguidamente se muestre el mensaje <<A continuacin se le solicitarn los datos fiscales>>.
La diferencia entre este cdigo y el anterior donde no exista un bloque try catch es que como
comprobamos aqu el error se captura, es tratado y la ejecucin del script contina. En el caso anterior
no llegbamos a ver el mensaje A continuacin se le solicitarn los datos fiscales porque el script
quedaba detenido.
Un bloque try catch se introducir, tpicamente, en fragmentos de cdigo donde sea previsible que
pueda producirse un error, con el fin de capturarlo y tratarlo.
Otro esquema tpico para tratamiento de errores ser el siguiente:
try {
//Cdigo que vamos a ejecutar
if (evaluacin indica que existe un error) {throw new Error("Descripcin del error"); }
}
catch (e) {
// e representa el error lanzado
// mensajes de alerta, acciones a ejecutar, etc.
}
Escribe este cdigo y comprueba sus resultados al introducir diferentes nmeros:

try{
var numeroUsuario = prompt('Introduzca un nmero del 1 al 9 por favor: ');
if (isNaN(numeroUsuario)|| numeroUsuario<1 ||numeroUsuario>9) {
throw new Error('Nmero introducido no vlido');
}
}
}
</script></head>
</body></html>
El resultado esperado es que si introducimos un nmero que se considera vlido (por ejemplo el 4), la
ejecucin se realice con normalidad. Por el contrario, si introducimos sun nmero que se considera no
vlido como el 88, se lanzar la excepcin y se mostrar el mensaje <<Nmero introducido no vlido>>.
Aqu realmente no necesitbamos lanzar una excepcin (ya que podramos haber controlado el proceso
de otra manera), por lo que este cdigo debemos tomarlo nicamente como un ejemplo y no como
una referencia de cmo hacer las cosas. Lo ms habitual entre programadores es no lanzar excepciones
excepto ante circunstancias que difcilmente pueden ser tratadas de otra manera (por ejemplo que el
acceso a un recurso que normalmente est disponible, como un fichero, pueda no estar disponible en
un momento concreto).
CLUSULA FINALLY
Una instruccin try adems de bajo el esquema try {...} catch { } que hemos visto anteriormente, se
puede combinar con una clusula finally de alguna de estas maneras: try {...} catch {...} finally {} y
tambin con try {...} finally {}.
Las sentencias incluidas dentro de una clusula finally se ejecutarn independientemente de que se
haya producido un error o no durante la ejecucin del bloque try. El objetivo habitual de una clusula
finally es liberar un recurso (por ejemplo cerrar un archivo) que haya podido ser comprometido
anteriormente.
El esquema habitual ser el siguiente:
abrirElRecurso(); //Por ejemplo accedemos a un fichero

try {
// Ejecutamos acciones previstas con el recurso
escribirEnElFichero(fechaActual);
}
finally {
cerrarElRecurso(); // Por ejemplo cerramos el fichero
}

try{
var numeroUsuario = prompt('Introduzca un nmero del 1 al 9 por favor: ');
if (isNaN(numeroUsuario)|| numeroUsuario<1 ||numeroUsuario>9) {
throw new Error('Nmero introducido no vlido');
}
}
finally {alert('Se ejecuta siempre haya o no captura de error');}
}
</script></head>
</body></html>
El resultado esperado es que el mensaje <<Se ejecuta siempre haya o no captura de error>> aparezca
tanto cuando se lanza un error como cuando no se lanza.
TIPOS ESPECIALIZADOS DE ERROR
Adems de los objetos Error que indican un error genrico, podemos lanzar errores especializados.
Entre los errores especializados tenemos los siguientes:
Tipo de error Significado Ejemplo
Representa un error relacionado

EvalError con la ejecucin de la funcin throw new EvalError();
eval()
Representa que un valor est

RangeError fuera del rango permitido para throw new RangeError();
una variable o parmetro.
Representa que se ha intentado

ReferenceError invocar una funcin u objeto y throw new ReferenceError();
no existe en ese mbito
Representa un error en la
SyntaxError sintaxis del cdigo que se throw new SyntaxError();
pretende ejecutar con eval()
Representa un error debido a

TypeError que una variable o parmetro throw new TypeError();
no tienen un tipo vlido.
Representa un error cuando se

pasan parmetros no vlidos a
URIError Throw new URIError();
las funciones encodeURI()
decodeURl()
ANIDAMIENTO DE TRY
Se pueden incluir bloques try dentro de otros bloques try. Normalmente cada bloque try llevar su
catch correspondiente, pero en caso de que un bloque try interno a otro carezca de catch, en caso de
lanzarse una excepcin se acceder al catch del bloque externo.
PROPIEDADES DE LOS OBJETOS ERROR
La creacin de objetos Error puede realizarse indicando simplemente new Error() o bien introduciendo
parmetros. Los parmetros admitidos son:
new Error (opcional_message, opcional_fileName, opcional_lineNumber);
Esta informacin puede ser usada durante el tratamiento del error de la forma en que se considere
oportuno. Por ejemplo podramos escribir:
catch(e) { alert ('Se produjo un error. Referencia: '+e.message + ' Lnea: '+e.lineNumber +' Fichero:
'+e.fileName);}
Los errores que se lanzan automticamente llevarn asociado un contenido para estas propiedades de
forma automtica. Al mensaje descriptivo se puede acceder con la propiedad message, y al nombre de
archivo y nmero de lnea con las propiedades lineNumber y fileName.
En los errores que lanzamos nosotros con new Error las propiedades del objeto pueden ser establecidas
por nosotros, pero si no establecemos las propiedades, stas tomarn los valores asociados
automticamente.
Otra propiedad de los objetos Error es name. Esta propiedad inicialmente toma el valor <<Error>>, pero
podemos establecer por ejemplo e.name ='Error-Usuario'.
Al invocar e.toString() se devuelve la concatenacin de name con message.
EJERCICIO
un editor, ejectalo y responde a las siguientes preguntas:
<html>
<head>
<style type="text/css"> input {margin:10px;} </style>
<script>
function validarPassword(password){
try {
if(password.length < 5 ) { throw "SHORT"; }else if(password.length > 10 ) { throw "LONG"; }
alert("Password Validated!");
} catch(e) {
if(e == "SHORT"){ alert("Not enough characters in password!"); }
else if(e == "LONG"){ alert("Password contains too many characters!"); }
}finally{ document.miFormulario.password.value=""; }
alert("La revisin ha terminado.");
}
</script>
</head>
<body>
<form name="miFormulario" onsubmit="validarPassword(document.getElementById('pass').value)" action="#" >
Nombre de usuario: <input type="text" name="campo1"><br>
Password: <input id="pass" type="password" name="password"><br>
<input type="submit" value="Comprobar" name="comprobar">
</form>
</body>
</html>
a) Busca informacin en internet y respode: Qu significado tiene una instruccin como throw
"SHORT";? A qu da lugar? Qu diferencia hay entre throw "SHORT" y throw new Error('SHORT')?
b) Cul es el objetivo que pareca pretender cumplir el autor del cdigo?
c) En qu casos se ejecuta la clusula finally incluida en el cdigo?

Cookies con JavaScript: crear, borrar, modificar, transmitir.
COOKIES JAVASCRIPT:
QU SON? FECHA
EXPIRES, MAX AGE. PATH,
APRENDERAPROGRAMAR.COM DOMAIN, SECURE. CREAR,
LEER, BORRAR, AADIR.
DOCUMENT.COOKIE .
EJEMPLOS (CU01188E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Cookies con
n JavaScript: cre
ear, borrar, mo
odificar, transm
mitir.
COOKIES CON JAVASC

CRIPT
Los prograamadores JaavaScript se enfrentan

e co
on frecuenciaa a la aparicin de errorees durante laa ejecucin
del cdigo en los navvegadores. AlA igual quee otros lenguuajes de pro ogramacin, JavaScript permite
p la
captura de esos errores con instru dentificar y tratar dichos errores.
ucciones quee permiten id
AR INFORMA
TRASLADA ACIN DURA
ANTE LA NAV
VEGACIN
Hemos vissto muchos ejemplos

e donde trabajam
mos sobre un o HTML, pero obviamentte durante
n documento
el desarrrollo de ap
plicaciones reales
r osos documentos HTML que se
el ussuario visitaar numero
corresponndern con diferentes urls durantee una navegacin a travs de una pgina webw o una
aplicacin
n web.
Para situaarnos, proced

de a hacer loo siguiente: crea
c un archivo html con
n el siguientee contenido y gurdalo
con el nommbre de archhivo inicio.httml:

var miVarriableGlobal = 8;8
window.o onload =
alert ('En esta url mi varriable global valle: ' + miVariableGlobal);
</script>
</head>
<div stylee="color:blue;" id ="pulsador" ><a href="item m1.html"> Pulse
e aqu para visittar la seccin "A
Animales
salvajes"<</a></div>
</body>
</html>
Seguidammente crea unu documen

nto HTML co
on el siguien
nte contenid
do y gurdaalo con el nombre de
archivo iteem1.html:

window.o onload = alert ('En esta url mi variable global vale: ' + miVariableGlobal);
</script>
</head>
<div stylee="color:blue;" id ="pulsador" ><a href="iniciio.html"> Pulse e aqu para volvver</a></div>
</body>
</html>
om, 2006-2029
Comprueba que al cargar la pgina inicio.html se muestra por pantalla el mensaje << En esta url mi
variable global vale: 8>>. Sin embargo, cuando hacemos click en el enlace y llegamos al archivo
item1.html no se muestra nada. De hecho, si desplegamos la consola del navegador observaremos que
aparece un error del tipo << ReferenceError: miVariableGlobal is not defined>>. Lo que esto nos deja
claro es que las variables JavaScript tienen una vida limitada al propio documento HTML en el que van
insertas y su informacin desaparece cuando se carga un nuevo documento HTML.
Cargar un archivo comn donde definamos unas variables nos puede servir para disponer de dichas
variables con su valor inicial en diferentes urls, pero qu ocurre si el valor de esa variable se modifica y
contina la navegacin? Que no dispondremos de informacin sobre dicha modificacin en el resto de
urls, ya que se perdern.
Lo que vamos buscando es la persistencia de la informacin, es decir, que no desaparezca la

informacin cuando cambiamos de url. Esto hay diferentes maneras de abordarlo: se puede transmitir
informacin almacenndola en base de datos y recuperndola posteriormente, tambin usando
formularios para enviar informacin, y de otras maneras. En estos ejemplos el trabajo (base de datos,
recuperacin de informacin de formularios) se basara principalmente en lenguajes que trabajan del
lado del servidor. Pero nosotros vamos buscando una forma de trabajar del lado del cliente, en este
caso con JavaScript.
CONCEPTO DE COOKIE
Las cookies fueron creadas por trabajadores de la empresa Netscape como forma de dar una respuesta
sencilla a la necesidad de almacenar informacin relacionada con la identificacin de usuarios y
acciones que un usuario desarrolla durante la navegacin. Por ejemplo se planteaba la siguiente
cuestin: si un usuario accede a una tienda web y queremos que pueda ir agregando productos a un
carrito de compras, cmo saber qu productos ha almacenado cuando cambia de url? Sin el uso de
alguna forma de dotar de persistencia a la informacin, la informacin se perda. Y cierta informacin
sera muy costoso manejarla con herramientas como bases de datos o formularios.
La forma de solucionar esto inventar las cookies. Las cookies son informacin que se almacena en el
navegador de forma persistente, es decir, que no desaparece cuando el usuario navega a travs de
diferentes urls. Adems, las cookies son enviadas al servidor cuando el usuario hace una peticin, de
modo que el servidor puede conocer esa informacin y actuar en consecuencia.
Las cookies pueden ser creadas de diferentes maneras, por ejemplo:
a) Ser creadas por el servidor, y enviarlas al navegador para que las almacene. Supongamos que
entramos en una pgina web como los foros de aprenderaprogramar.com. En ese momento somos
usuarios annimos, pero una vez introduzcamos nuestro nombre de usuario y password (por ejemplo
supongamos que somos el usuario Albert Einstein), el servidor enva una cookie al navegador que
podra ser:
session_id_foros_apr = 6n4465736gf9863b52e641757fa0b7db, donde sessin_id_foros_apr es el

nombre la cookie y la cadena de letras y nmeros el valor que tiene la cookie, lo que permitir saber al
servidor que quien hace una peticin es la misma persona (el mismo computador cliente) que haba
hecho una peticin anteriormente. La comprobacin de que sea el mismo computador cliente se basa
en comparar el valor de esa cadena larga: si coincide, es el mismo usuario, si es diferente, es otro
usuario. Un usuario no puede conocer el valor de la cookie que tiene otro debido a que existen
prcticamente infinitas posibilidades de combinacin de letras y nmeros. Si se usan cadenas
arbitrariamente largas, es prcticamente imposible averiguar por casualidad o mediante pruebas el
contenido de una cookie.
Ahora cada vez que cambiemos de url esta cookie es enviada al servidor. El servidor lee la cookie y
comprueba: esta cookie pertenece al usuario Albert Einstein!
Aunque el usuario haya cambiado de url, la cookie informa en cada momento que l es Albert Einstein,
con lo cual no hace falta estar introduciendo en cada url que se visite el nombre de usuario y password.
b) Ser creadas mediante JavaScript en el navegador, almacenarse en el navegador y enviarse

posteriormente al servidor en cada comunicacin que tenga lugar.
Simplificadamente podramos decir que navegar sin cookies sera algo similar a lo que se muestra en
este esquema, donde cada peticin al servidor equivale a una peticin nueva:
Mientras que navegar con cookies sera algo similar a lo que se muestra en este esquema, donde el
navegador est almacenando informacin en un almacn de cookies y con cada peticin que hace esas
cookies son transmitidas (y adems pueden irse aadiendo ms cookies a las ya existentes
previamente):
Resumiendo: las cookies son datos que se almacenan en el navegador del usuario.
Las cookies pueden presentar algunos problemas de seguridad, pero en general se considera que si se
utilizan de forma adecuada son un mecanismo que resulta prctico para realizar muchas de las tareas
que normalmente se requieren en la navegacin web.
TIEMPO DE VIDA DE LAS COOKIES
Las cookies son datos temporales, es decir, su intencin no es almacenarse para siempre, sino
almacenarse por un tiempo para facilitar la navegacin. Una cookie puede tener asociada una fecha de
borrado o expiracin, en cuyo caso permanecer en el navegador del usuario hasta que llegue dicha
fecha (a no ser que el usuario decida hacer un borrado de cookies). En este caso, puede ocurrir que el
usuario cierre el navegador y lo abra al cabo de unas horas o das y la informacin en forma de cookies
siga estando ah. Las cookies con fecha de borrado se suelen llamar cookies persistentes, porque no se
destruyen excepto cuando llega la fecha de expiracin.
Otras cookies no tienen fecha de borrado o expiracin, o si la tienen es muy corta (pongamos que una
hora de duracin). Si la cookie no tiene fecha de borrado, se destruye cuando se cierra el navegador.
Tener en cuenta que los navegadores pueden almacenar informacin de otras maneras adems de
como cookies (por ejemplo como opciones de configuracin, perfiles de usuario, contraseas, etc.).
Tener en cuenta tambin que las cookies (al igual que JavaScript) pueden desactivarse en los
navegadores. La mayora de los usuarios navegan con cookies activadas (al igual que con JavaScript
activado), pero tericamente un usuario puede deshabilitarlas.
CONTENIDOS DE LAS COOKIES
Las cookies podemos verlas como pequeos ficheros de texto que se almacenan en el navegador, cuyo
contenido es el siguiente:
1. Un par nombre valor que define la cookie. Por ejemplo el nombre puede ser user_name_foros_apr
y el valor 6n4465736gf9863b52e641757fa0b7db
2. Una fecha de caducidad (en algunos casos, estar indefinida, con lo cual la cookie ser borrada
cuando se cierre el navegador). La fecha se expresa en tiempo UTC (ver entregas del curso donde se
explican los formatos de tiempo) o como un nmero de segundos dede el momento actual.
3. El dominio y ruta del servidor donde la cookie fue definida, lo que permite que si existieran dos
cookies con el mismo nombre se pudiera saber qu cookie corresponde a cada url que se visita. No est
permitido falsear dominios, es decir, si el dominio desde el que se establece una cookie es
aprenderaprogramar.com no se podra poner como informacin asociada a la cookie que el dominio es
microsoft.com, sino que la cookie nicamente puede ir asociada a aprenderaprogramar.com. Esto
permite que si se est navegando por un sitio, no haya necesidad de enviar todas las cookies
almacenadas en el navegador al servidor de ese sitio, sino nicamente las cookies relacionadas con ese
sitio.
La ruta permite especificar un directorio especfico al cual se deba considerar asociada la cookie. De
este modo, el navegador no tendra que enviar la cookie a todas las pginas de un dominio, sino solo a
las pginas concretas cuya ruta est definida. Normalmente la ruta definida es simplemente << / >> lo
que significa que la cookie es vlida en todo el dominio.
COOKIES CON JAVASCRIPT: DOCUMENT.COOKIE
Las cookies podemos verlas como pequeos ficheros de texto que se almacenan en el navegador.
Para crear una cookie con JavaScript podemos usar una sintaxis como esta:
document.cookie =
'nombreCookie=valorCookie;
expires=fechaDeExpiracin;
path=rutaParaLaCookie';
Podemos dejar sin especificar expires (la cookie se borrar al cerrar el navegador) y path (la cookie
quedar asociada al dominio), con lo que la definicin quedara:
document.cookie = 'nombreCookie = valorCookie;';
Tambin se pueden indicar como parmetros de la cookie domain (dominio) y secure (en este caso a
secure no se le asigna ningn valor, basta con incluir la palabra. Si se incluye, significa que la cookie slo
se enviar si la conexin se est realizando bajo un protocolo seguro como https).
En lugar de expires se puede usar max-age. En este caso, en lugar de especificar una fecha concreta se
especifica el nmero de segundos desde la creacin de la cookie hasta su caducidad. Por ejemplo:
"theme=blue; max-age=" + 60*60*24*30 + "; path=/; domain=aprenderaprogramar.com; secure"
servira para indicar que el nombre de la cookie es theme, su valor blue, su fecha de expiracin 30 das
(expresado en segundos resulta 30 das * 24 horas/da * 60 minutos/hora * 60 segundos/minuto).
Cuando se van creando cookies, stas se van aadiendo a document.cookie (es decir, document.cookie
no funciona como una propiedad que se vaya sobreescribiendo, sino que cada definicin de
document.cookie aade una cookie a la coleccin de cookies).
Una cookie se puede redefinir: para ello simplemente hemos de usar document.cookie indicando el
mismo nombre de cookie que uno que existiera previamente. Los datos de esa cookie sern
sobreescritos quedando reemplazados los anteriormente existentes por los nuevos.
Una cookie se puede eliminar: para ello hemos de usar document.cookie indicando el nombre de
cookie que queremos eliminar y establecer una fecha de expiracin ya pasada (por ejemplo del da de
ayer, o simplemente indicar expires=Thu, 01 Jan 1970 00:00:00 UTC;). El navegador al comprobar que la
fecha de caducidad de la cookie ha pasado, la eliminar.
RECUPERAR EL CONTENIDO DE COOKIES
Para recuperar el contenido de cookies hemos de trabajar con document.cookie como si fuera una
cadena de texto donde las cookies se organizan de la siguiente manera:
nombreCookieA=valorCookieA; nombreCookieB=valorCookieB; ; nombreCookieN = valorCookieN;
Para recuperar el valor de la cookie, hemos de buscar dentro de esa cadena de texto. Para ello
usaremos las herramientas que nos proporciona JavaScript, y hay varias maneras de hacerlo. A
continuacin vamos a ver un ejemplo.
Escribe este cdigo y gurdalo con el nombre de archivo inicioCookie.html:

var miVariableGlobal = 8;
document.cookie = 'cookieNombreUsuario = Alberto; expires=Thu, 12 Aug 2049 20:47:11 UTC; path=/';
document.cookie = 'cookieEdadUsuario='+miVariableGlobal+'; expires=Thu, 12 Aug 2049 20:47:11 UTC; path=/';
alert ('El contenido de document.cookie es: '+document.cookie);
</script>
</head>
<div style="color:blue;" id ="pulsador" ><a href="item1Cookie.html"> Pulse aqu para visitar la seccin "Animales
salvajes"</a></div>
</body>
</html>
Con este cdigo hemos definido dos cookies. Al ejecutar el cdigo el resultado esperado es que se
muestren por pantalla: << El contenido de document.cookie es: cookieNombreUsuario=Alberto;
cookieEdadUsuario=8 >>
Escribe ahora este otro cdigo y gurdalo con el nombre de archivo item1Cookie.html:

//Funcin para encontrar el valor de una cookie
function readCookie(nombre) {
var nombreIgual = nombre + "=";
var numeroCookies = document.cookie.split(';');
for(var i=0;i < numeroCookies.length;i++) { //Recorremos todas las cookies
var valorCookie = numeroCookies[i]; //Analizamos la cookie actual
while (valorCookie.charAt(0)==' ') {valorCookie = valorCookie.substring(1,valorCookie.length); }
//Eliminamos espacios
if (valorCookie.indexOf(nombreIgual) == 0) {return
valorCookie.substring(nombreIgual.length,valorCookie.length);} //Devolvemos el valor
}
return null; //Si numeroCookies es cero se devuelve null
}
window.onload = function () {alert ('El valor de la cookieNombreUsuario es: '+readCookie('cookieNombreUsuario'));

alert ('El valor de la cookieEdadUsuario es: '+readCookie('cookieEdadUsuario'));
};
</script></head>
<body><div id="numeroCookiesbecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos
JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" ><a href="inicioCookie.html"> Pulse aqu para volver</a></div>
</body></html>
Prueba ahora a entrar en la pgina inicioCookie.html y pulsar sobre el enlace que nos lleva a
item1Cookie.html. Al entrar en item1Cookie.html el resultado esperado es que se muestre por pantalla:
<< El valor de la cookieNombreUsuario es: Alberto, El valor de la cookieEdadUsuario es: 8 >>
Vamos a destacar algunas cuestiones del cdigo que hemos usado:
a) Las cookies se crean en una url (inicioCookie.html) y se almacenan en el navegador.
b) Las cookies se recuperan en otra url (item1Cookie.html) usando la funcin readCookie. De esta
manera tenemos una solucin al problema de transmitir informacin entre distintas urls que habamos
planteado al principio de esta explicacin. La funcin readCookie utiliza distintas construcciones y
funciones nativas de JavaScript que deberas ser capaz de entender completamente si has venido
siguiendo el curso desde el principio. Si no entiendes algo de este cdigo, repasa las entregas anteriores
del curso.
c) Las cookies que se reciben son slo las asociadas al dominio. Y cul es el dominio? En este caso el
asociado a la ruta de nuestro computador donde estemos trabajando. Si estuviramos trabajando sobre
una web on-line, el dominio seran todas las pginas pertenecientes al sitio web.
d) Las cookies que se han creado tienen fecha de caducidad 2049. Es decir, no se borrarn del
navegador hasta 2049, excepto si realizamos el borrado de cookies del navegador (al borrado de este
tipo de datos se le denomina en sentido amplio Limpieza de la cach del navegador).
EJERCICIO
Un programador ha desarrollado este cdigo. Revsalo y responde a las siguientes preguntas:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function eraseCookie(name) { createCookie(name,"",-1); }
a) Para qu sirve la funcin createCookie? Explica paso a paso qu es lo que hace esta funcin.
b) Para qu sirve la funcin eraseCookie? Explica paso a paso qu es lo que hace esta funcin.
c) Escribe el cdigo de una funcin de nombre mostrarTodasLasCookies() que muestre el nombre y

valor de todas las cookies existentes. Por ejemplo, si hay dos cookies deber mostrarse algo como esto:
Hay 2 cookies en el documento
Cookie 1 con nombre: cookieNombreUsuario y valor: Alberto
Cookie 2 con nombre cookieEdadUsuario y valor 8
d) Usando las funciones createCookie, eraseCookie y mostrarTodasLasCookies() crea un script que pida
3 nombres y valores de cookies al usuario, y cree las cookies correspondientes. A continuacin deber
mostrar las cookies existentes y sus valores. Finalmente, deber borrar la ltima cookie existente y
volver a mostrar todas las cookies y sus valores.

Stric mode y use strict JavaScript. with.
USE STRICT JAVASCRIPT.

QU ES STRICT MODE
(MODO ESTRICTO). WITH.
THE GOOD PARTS. HACIA
NUEVAS VERSIONES.
(CU01189E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Stric mode y use strict JavvaScript. with.
STRICT MODE
M
El lenguajje JavaScriptt ha sido den

nostado por algunos porr considerarlo poco conssistente y alabado por
otros porr su gran pottencia. Se suuele citar el libro JavaSScript: The Good
G Parts (JavaScript: las partes
buenas) como
c refereente para ilu
ustrar que JavaScript tie ene cosas buenas
b y otrras cosas quue no son
buenas y por tanto su upuestamentte no se debeeran usar.
Nosotros consideramo os que las peersonas que adquieran un

u conocimieento avanzad do de JavaScript deben
or su propio
guiarse po o criterio y decidir
d cmo
o usarlo. Por el contrario nas que slo tienen un
o, las person
q guiarse por lo que hacen
conocimieento superficial tienen que h o pro
oponen otross. Te animam mos a que
progresivaamente vayaas conformando tu propiio criterio.
A USE STRIC
DIRECTIVA CT
La directivva use strict es una direcctiva que no supone una instruccin de

d cdigo, siino que indicca el modo
en que el navegador debe ejecutar el cdigo JavaScript. Podramos hablarh de doos modos de ejecucin
JavaScriptt: el <<normal mode>>, que q es el que hemos esttudiado hasta ahora, y ell <<strict mo
ode>>, que
vamos a explicar.
e
Declarar que
q se use sttrict mode suupone algunos cambios en e cuanto al cdigo que admite o noo admite el
navegadoor. Por ejemplo en strictt mode es obligatoria la declaracin
n de variablees, mientras que en el
modo norrmal no es neecesario decclarar una variable para usarla.
u
Para indiccar que el cdigo debe seer considerad

do en modo estricto se escribe
e lo siguiente:
'use strictt';
Esta direcctiva la escribiremos norrmalmente al a comienzo de d un fichero, en cuyo ccaso afectar a todo el
cdigo y todas
t nciones existtentes dentrro de l, o bien al comieenzo de una funcin, en cuyo caso
las fun
afectar slo
s al cdigoo en el mbitto de dicha funcin.
f
Para situaarnos, activa la consola del

d navegadoor y procede a hacer lo siguiente: creea un archivo
o html con
el siguientte contenido
o y gurdalo con el nomb
bre de archivvo sinstrict.httml:

function ejemplo()
e { nom
mbre = 'Carlos';; alert('Soy '+no
ombre); }
</script></head>
<
</body><</html>
om, 2006-2029
El resultado esperado es que no haya mensajes de error y que al pulsar en Probar por pantalla se
muestre el mensaje <<Soy Carlos>>.
Crea ahora un archivo html con el siguiente contenido y gurdalo con el nombre de archivo
constrict.html:

<html>
<head>
'use strict';
nombre = 'Carlos';
alert('Soy '+nombre);
}
</script>
</head>
<body>
<div id="cabecera">
</div>
</body>
</html>
El resultado esperado es que cuando se pulse sobre Probar no se muestre ningn mensaje y
podremos observar un error en consola del tipo << ReferenceError: assignment to undeclared variable
nombre>>.
Aqu vemos cmo el strict mode est afectando a qu hace el intrprete del navegador. Sin strict mode,
asumen que cualquier variable no declarada debe considerarse creada implcitamente. Con strict mode,
asume que una variable no declarada generar un error.
Ten en cuenta que algunos navegadores, especialmente los ms antiguos, no reconocen la directiva
strict mode, y en estos navegadores el resultado es que no tiene ningn efecto (como si no existiera).
Por qu apareci el strict mode? En versiones antiguas de JavaScript no exista el strict mode. Este
surgi debido a que parte de la comunidad de programadores se quejaba porque JavaScript era poco
seguro a la hora de programar y se consideraba que sera adecuado introducir restricciones que
forzaran a que el cdigo debiera cumplir mayores requisitos para garantizar su coherencia. Por ejemplo,
es habitual considerar que es una mala prctica no declarar las variables antes de usarlas porque puede
inducir a errores (por ejemplo, si tenemos una variable cuyo nombre es <<aceptado>> y aparece otra
variable cuyo nombre es <<aceptada>>, si ambas estn declaradas se entiende que son variables
distintas. Pero si no estn declaradas, son variables distintas o podra tratarse de un error al escribir el
nombre de la variable?).
Adems de no permitir el uso de variables declaradas, hay otras prcticas de programacin que son
admitidas por JavaScript clsico pero que no son admitidas en strict mode.
Citaremos algunas:
Prctica admitida en modo normal

Ejemplo
pero no admitida en strict mode
Uso de variables no declaradas nombre = 'juan';
Borrar una variable u objeto usando

delete nombre;
delete
Definir una propiedad dos veces var x = {persona:'juan', persona:'juan'};
Nombres de parmetros duplicados function saludar(persona, persona) {};
Usar eval como nombre de variable eval = 'aprobado';
En una funcin si no se conoce this es el

En una funcin si no se conoce this es undefined
objeto global window
Hay ms restricciones que impone el strict mode, relacionadas con

Otras evitar el uso de sintaxis no adecuada, instrucciones poco adecuadas,
prcticas inseguras y mejora de la seguridad para el usuario.
En resumen, el strict mode supone que muchos fallos que JavaScript se tragaba, dejen de ser
aceptados y aparezcan como errores no admitidos (que detendrn la ejecucin del script o debern ser
capturados).
STRICT MODE Y LAS NUEVAS VERSIONES DE JAVASCRIPT
Strict mode trata de hacer ms segura y fiable la programacin JavaScript, y elimina algunas de las
denominadas Bad parts o partes malas del lenguaje.
La aparicin de strict mode posiblemente trata de ser una transicin entre la situacin y el JavaScript
aceptado por navegadores antiguos y lo que sern las versiones del futuro de JavaScript, donde todo o
parte de las caractersticas del strict mode pasarn a ser caractersticas intrnsecas de JavaScript.
Muchos programadores y libreras de JavaScript trabajan con strict mode, y otros muchos no lo hacen.
Programar bajo strict mode puede considerarse una buena prctica. Sin embargo, no es posible o no es
aconsejable tomar scripts, pginas web o aplicaciones web y aplicarles el strict mode porque pueden
dejar de funcionar en algunos navegadores, especialmente los ms antiguos.
Por otro lado, usar strict mode puede inducir que el cdigo tenga algunos comportamientos diferentes
a lo esperado. Tambin puede haber problemas si se combinan partes de cdigo o archivos que usan
strict mode con otros que no lo usan. Por ello, en caso de usar strict mode se recomienda que se hagan
pruebas en navegadores que no soportan strict mode y en navegadores que s lo soportan, para evitar
problemas de compatibilidad, es decir, que los scripts funcionen bien en algunos navegadores pero no
en otros.
Usar strict mode no nos convertir en mejores programadores, pero posiblemente nos ayudar a que
no se escapen errores que podran escaparse sin usarlo.
WITH JAVASCRIPT
Hay una clusula o sentencia de manipulacin de objetos JavaScript de la que no hemos hablado: with.
Se usa de la siguiente manera:
with (expresin que crea un contexto de referencia) {

sentencias donde el contexto de referencia por defecto es el indicado
}
Una aplicacin de with podra ser aplicar propiedades a un objeto, por ejemplo:

<html>
<head>
with(document.getElementById('pulsador').style) {
backgroundColor = 'yellow';
color = 'black';
width = '200px';
padding = '20px';
fontSize = '32px';
}
}
</script>
</head>
<body>
</body>
</html>
En JavaScript el uso de with se considera una mala prctica. Los motivos para ello son que puede dar
lugar a comportamientos inesperados, problemas de rendimiento y problemas de seguridad.
Un problema potencial es que si se trata de invocar una propiedad que no existe en el contexto del
with, en lugar de crearse una nueva propiedad, se crea una variable global completamente nueva e
independiente. Esto puede ser difcil de detectar y dar lugar a problemas.
Ejemplo:
with(document.getElementById('pulsador').style) {
backgroundColor = 'yellow';
color = 'black';
width = '200px';
padding = '20px';
font_Size = '32px';
}
}
Aqu parece que font_Size aluda al tamao de fuente del nodo con id <<pulsador>>, o al menos que
sera una propiedad del objeto asociado. Sin embargo, no es as. Al llevar el guin bajo en font_Size no
se reconoce la propiedad y se crea una variable global nueva.
Otro problema del with es que obliga al intrprete a buscar primero entre todas las propiedades del
objeto referenciado, y si no se encuentra el nombre utilizado, entonces buscarlo en otro contexto o
crear algo nuevo. Esto lleva a que trabajar con with conlleve un mal rendimiento. Especialmente en
bucles dentro de with, el rendimiento o velocidad de ejecucin se ve drsticamente reducido.
Por estos y otros motivos with ha pasado a considerarse no permitido en strict mode (donde
obtendremos un error de tipo <<SyntaxError: strict mode code may not contain 'with' statements>>) y
se considera que terminar por desaparecer (o ser replanteado de otra manera).
EJERCICIO 1
Dado este fragmento de cdigo. Revsalo y responde a las siguientes preguntas:
var persona1 = {};

Object.defineProperty(persona1, "edad", { value: 42, writable: false });
persona1.edad = 19;
a) Explica paso a paso el significado de este cdigo (busca informacin en internet si te es preciso).
b) Crea un pequeo script donde se ejecute este cdigo y se muestre un mensaje por pantalla
informando del valor de la edad. Activa la consola para comprobar si aparece algn error.
c) Crea el mismo script pero usando strict mode. Activa la consola y comprueba si aparece algn error.
Qu diferencias observas entre la ejecucin con strict mode y sin strict mode? Qu explicacin le
daras a estas diferencias? Crees que sera positivo que este cdigo se escribiera en strict mode o no?
Por qu?
EJERCICIO 2
Crea y ejecuta un script que use with y que est:
a) En modo normal. Cul es el cdigo y cul es el resultado que obtienes?
b) En strict mode. Cul es el cdigo y cul es el resultado que obtienes?

Hoisting. Errores frecuentes en programacin JavaScript.
JAVASCRIPT HOISTING.
ERRORES FRECUENTES DE
PROGRAMADORES Y
CONSEJOS. PROBLEMAS
PRECISIN DECIMAL
(CU01190E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Hoisting. Errrores frecuentes en programacin JavaScrip
pt.
HOISTING
G JAVASCRIP
PT
La programacin JavaaScript tiene algunos dettalles que co onviene ir co

onociendo po
oco a poco, ya que en
algunos momentos
m p
pueden geneerarnos quebraderos de e cabeza si no los cono
ocemos. Unoo de estos
e el hoisting de las declaraciones de variables, qu
detalles es ue vamos a explicar.
e
N O HOISTING DE DECLA
ELEVACI ARACIONES DE VARIABLLES
Como hem mos visto a lo largo del curso, JavaSScript admite

e el uso direecto de variaables sin neccesidad de
declaraci
n previa. Taambin hemoos dicho quee recomendaamos declaraar las variablees.
Cuando ses declara una variable en un punto intermedio del cdigo o, dicha decclaracin es elevada
(hoisted) a la parte inicial del cdiigo en el mbito donde se ble. Como m
s encuentraa dicha variab mbito ms
bsico poodemos pen nsar en unaa funcin. Supongamos
S s que dicha funcin co omienza con n diversas
instruccio neas iniciales y que en laa lnea 15 introducimos una
ones en las ln u declaraciin como var x;
Debido a que JavaScript realiza el izado o elevacin

e dee las declaraciones de vvariables, el intrprete
JavaScriptt ejecutar el
e cdigo com
mo si dicha declaracin
d se
s encontrara en la primera lnea de la funcin
en lugar de
d en la lneaa 15.
El hoistingg afecta slo

o a la declaraacin de variiables. Si haccemos una declaracin-in nicializacin,, se realiza
el izado slo
s de la deeclaracin, pero
p no de la asignacin n. Esto impliica que la vaariable consttar como
declaradaa desde el co omienzo del mbito, pero o el valor asignado no seer conocido o hasta que se
s llegue a
la lnea co
orrespondien nte. Por ejemmplo var x; es
e izado pero o var x=67; no es izado en su totalidaad. En este
caso se izaa var x; mien
ntras que x=6 67 no surtir efecto hasta que se lleggue a la lneaa corresponddiente.
Con un ejemplo lo enttenderemos mejor. Escriibe este cdiigo y compru

ueba sus resu
ultados:

T N" "http://www
<html>
<head>
<title>Ejeemplo aprenderraprogramar.co om</title><metta charset="utff-8">
function ejemplo()
e {
nombre = 'Carlos';
alert('Soyy '+nombre);
var nomb bre;
alert('Soyy yo otra vez: '++nombre);
}
</script></head>
<body><d div id="cabecerra"><h2>Cursoss aprenderaproogramar.com<//h2><h3>Ejemp plos JavaScript<</h3></div>
<
</body><</html>
om, 2006-2029
El resultado esperado es que se muestre por pantalla el mensaje <<Soy Carlos>> y seguidamente el
mensaje <<Soy yo otra vez: Carlos>>.
Este resultado puede resultar un poco contradictorio respecto a lo que podramos esperar (sobre todo
si hemos programado en otros lenguajes). Mucha gente piensa que al declarar var nombre; en un punto
intermedio sera como si esa variable se destruyera y volviera a ser creada con un contenido
<<undefined>>. Sin embargo, esto no ocurre en este caso en JavaScript porque lo que hace el
intrprete es:
a) Izar la declaracin de variable al comienzo de la funcin
b) Ejecutar el cdigo
Por tanto lo que se ejecuta realmente despus de este preprocesamiento es lo siguiente:
var nombre;
nombre = 'Carlos';
alert('Soy '+nombre);
alert('Soy yo otra vez: '+nombre);
}
Esto puede generar efectos un tanto extraos o confusos. La recomendacin para evitarlos es:
a) Declarar siempre las variables antes de usarlas
b) Realizar la declaracin de variables al comienzo del mbito donde se van a usar, en este caso sera al
comienzo de la funcin. Si JavaScript las va a izar, mejor que se vea claramente dnde se sitan que
tenerlas entremezcladas en el cdigo.
Escribe y comprueba los resultados de este cdigo:

<html>
<head>
nombre = 'Carlos';
alert('Soy '+nombre+ ' ' +apellidos);
var nombre = 'Juan';
var apellidos = 'Fernndez';
alert('Soy '+nombre+ ' ' +apellidos);
}
</script></head>
</body></html>
El resultado esperado es que se muestre por pantalla: << Soy Carlos undefined>> y a continuacin <<
Soy Juan Fernndez>>. Aqu vemos que var nombre = 'Juan'; tiene el mismo efecto que si escribiramos
nombre = 'Juan'; y que la declaracin de apellidos combinada con una inicializacin, no es izada
completamente: slo se iza la declaracin, mientras que la asignacin queda pendiente y no se ejecuta
hasta llegar a la lnea correspondiente.
No comprender el mecanismo de hoisting ocasiona errores en el cdigo. Es algo que los programadores
JavaScript deben conocer y saber manejar.
ERRORES FRECUENTES DE PROGRAMADORES JAVASCRIPT
Es frecuente oir JavaScript no funciona!, pero JavaScript s funciona. De hecho, es una tecnologa cada
vez ms usada. Tambin es cierto que es un lenguaje ms rico y complejo de lo que la mayora de la
gente suele creer. La mayor parte de las ocasiones los problemas se deben a que los programadores no
entienden lo que ocurre o han cometido equivocaciones.
Existen diferentes listados de errores frecuentes cometidos por programadores JavaScript (sobre todo
por programadores que estn empezando con JavaScript). A continuacin resumimos algunos de estos
errores frecuentes. Tenlos en cuenta cuando crees cdigo JavaScript:
Equivocacin frecuente Ejemplo Explicacin y solucin

Muy frecuente: problemas de
Pensar que el cdigo no compatibilidad del navegador. No todos los
No se muestra un efecto que
funciona a pesar de estar bien navegadores, en especial los ms antiguos,
tena que mostrarse
programado se comportan como sera de esperar. Realiza
un test con otros navegadores.
Se invoca this pensando que
Revisar las entregas de este curso donde se
se refiere a un objeto y se
Mal uso de this habla de this. Es frecuente poder solucionar
est refiriendo a window, o al
este error usando bind.
revs
Esto devuelve siempre true. Error por no
Mal uso del operador = dentro usar el operador correcto en
if (numero = 20) { }
de if comparaciones, == ===, normalmente por
despiste.
En otros lenguajes i es una variable local que
for (var i = 0; i < 10; i++) { se destruye al terminar el bucle. En
JavaScript no crea mbitos alert(i); JavaScript no, sigue existiendo (como si se
locales en bucles for } tratara de una variable normal) y adems
alert (i); con el valor que causa la salida del bucle, en
este ejemplo 10.
Basta cambiar una minscula por una
Pensar que un elemento no
mayscula, o al revs, para que el cdigo no
responde sin darnos cuenta de getElementByID('myId');
responda. En este ejemplo tendra que ser
que est mal escrito
byId en lugar de byID.
Cuando el cdigo es largo y
Sobreescribir una variable
complejo, podemos repetir Restringir el uso de variables globales. Crear
global dentro de una funcin
nombres de variables sin espacios de nombres.
sin querer
querer.
Equivocacin frecuente Ejemplo Explicacin y solucin

Un salto de lnea equivale a un ; de cierre.
Para concatenar la cadena usar + y delimitar
var txt = '<ul id="lista1">
Hacer roturas de lnea sin los fragmentos con apstrofes:
<li>Aprender</li>
pensar que equivale a que var txt = '<ul id="lista1">' +
<li>Programa</li>
exista un ; de cierre '<li>Aprender</li>' +
</ul>';
'<li>Programa</li>' +
'</ul>';
A diferencia de otros
lenguajes como Java, en
JavaScript no se puede repetir
Repetir nombres de funciones Mantener un buen control de nombres.
el nombre de una funcin ni
siquiera teniendo distinto
nmero de parmetros.
Function obtenerDomicilio (direccion,
Llamar a obtenerDomicilio ciudad, provincia, pais) {
Llamadas a funciones sin los
(direccion, ciudad, provincia, pais = pais || "Colombia"; // Si no se recibe
parmetros necesarios
pais) sin pasarle el pas. pais, indicar el valor que se debe tomar
}
Comprobar primero si el objeto est
Intentar comprobar si un definido y luego comprobar si contiene null.
Pensar que un objeto no
objeto contiene null pero el if(typeof(myObject) !== 'undefined' &&
definido contiene null
objeto no est definido myObject !== null) { //cdigo
}
No usar sintaxis JavaScript
No tener en cuenta algunas para invocar la clase de un Usar element.className para clases,
peculiaridades de sintaxis elemento HTML la element.htmlFor para atributos for.
propiedad for.
JavaScript (y muchos ms lenguajes) tiene
dificultades con la precisin decimal.
var x = 0.1;
Realizar comparaciones basadas en enteros:
Tratar de operar con precisin var y = 0.2;
var x = 0.1;
decimal var z = x + y // no da 0.3
var y = 0.2;
if (z == 0.3) { // No cumple!
var z = x*10 + y*10
if (z == 3)
nombreObjeto.['nombre']
Confundir objetos y
alude a una propiedad de un Recordar que JavaScript no admite arrays
propiedades con arrays
objeto, no a un elemento de asociativos como otros lenguajes.
asociativos
un array.
Crear closures
Deben ir entendindose y corrigindose
Errores en la concepcin del indebidamente y muchos
progresivamente mediante prctica y
cdigo otros errores a la hora de
estudio.
concebir el cdigo
Pensar que JavaScript es

Pensar que JavaScript es un
un mal lenguaje cuando el Estudiar JavaScript
mal lenguaje de programacin
problema es que no se conoce
EJERCICIO
Dado este fragmento de cdigo. Revsalo y responde a las siguientes preguntas:

var x = 'Hola amigos'; // variable global
function ejemplo(){
alert( x ); // esperamos el valor global
var x;
x = 'Saludos desde Costa Rica'; // redefinimos la variable en contexto local
alert( x ); // esperamos el nuevo valor local
}
</script></head>
</body></html>
a) Realiza una prueba pulsando en Probar. Qu resultados obtienes? Cmo se explican esos
resultados?
b) Cambia el cdigo y declara la variable x dentro de la funcin al mismo tiempo que la inicializas. Qu
resultados obtienes? Cmo se explican esos resultados?
c) De los dos casos anteriores ( a y b ). En cules se produce hoisting: en el a), en el b) en ambos?
d) En este caso, el hoisting est afectando a los resultados obtenidos? Por qu? Cules seran los
resultados de ejecutar estos cdigos si no existiera hoisting?

Reglas de estilo para escribir cdigo JavaScript.
JAVASCRIPT. REGLAS DE
ESTILO (MANUALES O
CONVENCIONES). CMO
CREAR OBJETOS Y
ARRAYS. EJEMPLOS Y
EJERCICIO (CU01191E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Reglas de estilo para escribir cdigo JavaaScript.
REGLAS DE
D ESTILO JA
AVASCRIPT
Los programadores JaavaScript sueelen atenersee a unas regglas de estilo a la hora dee escribir cd
digo. Estas
n definidas por
reglas son p programaadores experrtos (gurs) o por empreesas como Go oogle Micrrosoft y no
son de obbligado cump plimiento. Taan slo son recomendacciones que buscan
b que eel cdigo seaa ms fcil
de leer y entender
e s unos estndares.
y siga
MANUALES DE ESTILO
O
En una emmpresa en laa que trabajaan 100 100

00 programaadores cada programado or no puede hacer las
cosas a su
u manera. En
E estas emp presas es frecuente que cada
c programmador desarrrolle un fraggmento de
una aplicacin y lueggo esos fraggmentos hayy que unirloos. Para quee esa unin sea slida y no haya
problemaas de integracin y mantenimiento posterior,
p dos los programadores d
tod deben atenerse a unas
mismas normas.
Lo ideal sera
s que en una aplicaccin donde han
h trabajad
do 20 prograamadores, u un supervisor no fuera
capaz de detectar qu parte deel cdigo haa hecho cadda programaador. Esto ees difcil, porque cada
programaador deja suu impronta, pero siguiendo unas reeglas predeffinidas se puede consegguir como
b estructurado y bastaante homog
resultado un cdigo bien neo.
Si una aplicacin se ha creado sigguiendo unass reglas, cuando se hagaan ampliacion nes o correccciones del
s deberan seguir usando esas reglas para mantener el
cdigo, se e cdigo h homogneo y hacerlo
mantenibble. Si no se mantiene un n orden y un
n criterio de
e estilo, las aplicaciones
a terminan po or hacerse
demasiaddo complicad das y difciless de entender.
La idea puede ser sim milar a la con

nstruccin de un edificio
o: en todas las
l plantas d deben respettarse unas
normas (aaltura de lass puertas, piintura aplicaada, dimensiones de los pasillos, etcc.). Adems cuando el
ben seguir reespetndose esas normaas. Si no se hace as, el asspecto ser el de una
edificio see ample deb
chapuza o una unin n de cosas enn lugar de un edificio.
om, 2006-2029
REGLAS DE ESTILO
A continuacin presentamos una lista de reglas de estilo que suelen recomendarse para la
programacin JavaScript. Como hemos indicado, son opcionales, pero un programador que no sigue
unas reglas de estilo no suele considerarse un buen programador. Ms que seguir estrictamente estas
reglas que presentamos a continuacin, lo importante es que cuando crees cdigo sigas unas reglas de
estilo (que pueden ser estas o similares a estas) y que no las modifiques. De esa manera crears cdigo
homogneo.
Tambin ten en cuenta que las reglas aqu presentadas son una forma resumida de reglas respecto a lo
que sera un manual de estilo propio de una empresa, que sera mucho ms extenso. El objetivo de
presentar aqu estas reglas es didctico y para familiarizarnos con ellas, no consideres que son
obligatorias ni que aqu tienes todas las reglas necesarias.
Reglas de estilo recomendadas a la hora del uso del lenguaje JavaScript:
REGLA DE ESTILO EJEMPLO
Declarar siempre las variables usando var. No

hacerlo dificulta interpretar en qu mbito se
var nodosDiv;
encuentra la variable y puede ocasionar que una
variable est en mbito global indebidamente.
Usa siempre puntos y coma para delimitar el final var mivar1 = function() {
return true;
de una instruccin o lnea. Cuando una funcin
}; // Aqu incluir punto y coma final
funciona como una expresin, debe delimitarse
con punto y coma final. En cambio, en las
function miFuncion1() {
declaraciones de funciones no se usa punto y return true;
coma final (ver ejemplo) } // Aqu no incluimos punto y coma final
if (x) {
No declarar funciones dentro de bloques function miFuncion1() {} // incorrecto!
(condicionales, bucles). Si se requiere crear }
funciones dentro de bloques, usarlas como if (x) {
expresiones que se asignan a una variable. var mivar1 = function() {}; // correcto!
}
No utilizar:
function miFuncion1(element, a, b) {
element.onclick = function() { /* cdigo que usa a y
b, crea el closure que mantiene una referencia a
element a pesar de no usarlo, mientras que element
mantiene una referencia al closure, circularidad */ };
Hay que tener cuidado a la hora de crear closures
}
porque pueden generar referencias circulares
Para resolver esta situacin se usa:
que impliquen desbordamiento de memoria. function miFuncion1(element, a, b) {
element.onclick = miFun2(a, b);
}
function miFun2(a, b) {
return function() { /* cdigo que usa a y b */ };
}
No usar with Evitar el uso de esta sentencia
this puede tener distintos significados segn el

Limitar el uso de this
contexto. Usarlo slo cuando sea realmente necesario.
Para recorrer arrays debe usarse un bucle for
No usar for-in para recorrer arrays.
tradicional.
Crear arrays usando sintaxis de literal en lugar de Recomendado: var a = [x1, x2, x3];
new Array No usar: var a = new Array(x1, x2, x3);
Crear objetos usando sintaxis de literal en lugar Recomendado: var a = { };

de new Object No usar: var a = new Object ();
Crea el javascript en archivos js independientes Esto har reusable el cdigo y har ms pesada la carga
en lugar de embeberlo en ficheros html de los archivos html.
Usa === y !== en condicionales para realizar

if ( a === b) { }
comparaciones preferentemente sobre == y !=
Evita el uso de eval Busca alternativas y evita usar la funcin eval
function myFunction(x, y) {
if (y === undefined) { y = 0; }
}
Incluye cdigo previendo una llamada a una
Esto se escribe ms fcil y cmodo as:
funcin en la que falten parmetros
function myFunction(x, y) {
y = y || 0;
}
Si tienes que acceder varias veces a un elemento del
DOM, no uses el acceso tipo getElementById repetidas
Reduce el acceso al DOM.
veces. Usalo una sola vez y almacena el resultado en
una variable. De esta manera mejoras el rendimiento.
Reglas de estilo recomendadas para la presentacin de cdigo JavaScript:
Usar la sintaxis camelCase para declarar nombres

nombreDeFuncionAsi, nombreDeVariableAsi,
de variables y funciones (primera letra minscula
nombreDeMetodoAsi,
e intercalar maysculas).
Crear los nombres de funciones y variables

usando slo 26 letras (a hasta z, sin la ), diez
nmeros (0 al 9) y el guin bajo _. Evitar uso de la var anyo = 2089;
o signos como $, %, &, etc. Tampoco uses el
guin medio.
Si una variable no va a cambiar de valor nunca se

var NUMERODEAVOGADRO;
declara con todas sus letras en maysculas.
Los nombres de ficheros se escriben

completamente en minsculas. En el caso de nombredeficherotodominusculas.js
ficheros html, se usa la extensin html en lugar de otroNombre.html
htm.
if (condicion) {
Incluye las llaves en la misma lnea de aquello que // ...
abren (no pongas las llaves por ejemplo debajo de } else {
una condicin de un if, sino al lado) // ...
}
Usa siempre indentado para aquello que est

for (var i=0; i<10; i++) {
dentro de un bloque. Por ejemplo, el cdigo
//aqu codigo
dentro de un bucle for estar desplazado hacia la
}
derecha. Usa siempre el mismo indentado.
esto.aquello.alli.hacer = function(
unArgumentoParaLaFuncionDeNombre1,
Las lneas no se deben alargar tanto como para no
ser visibles. Se usa la referencia de 80 caracteres.
La lnea no debe tener ms de 80 caracteres. Si se
unArgumentoParaLaFuncionDeNombre4) {
excede esta longitud, la lnea deber dividirse. // cdigo
};
Usa comillas simples en lugar de comillas dobles var nombre = 'carlos';
var x=1; var y=2; // No

Separa las sentencias en distintas lneas. No
var x=1;
escribas una detrs de otra separadas por ;
var y=2;
while(x<3&&y<5&&z==10){llamarA();} //No
Usa espacios separadores: esto hace ms fcil de while ( x < 3 && y < 5 && z == 10 ) {
leer el cdigo llamarA();
} //S
El cdigo debe estar correctamente comentado.

Los bloques /* */ se usarn para Para documentar proyectos extensos se recomienda
documentacin formal (explicacin de funciones, seguir unas normas de comentarios y usar
parmetros que intervienen, etc. y los herramientas especficas que crean la documentacin
comentarios en lnea // para aclaraciones de forma automtica, como JSDoc.
puntuales.
Si nos encargan realizar unos cambios en un cdigo
que tiene un estilo, respetar el estilo de dicho cdigo
Respetar el estilo del cdigo en edicin aunque no coincida con el que nosotros usemos
habitualmente. Es importante que dentro de un cdigo
se mantenga siempre el mismo criterio.
EJERCICIO
Un programador ha creado este cdigo y nos han pedido que lo mejoremos. Revsalo y responde a las
siguientes cuestiones:
<HTML><HEAD><TITLE>JavaScript Index</TITLE><script Language="JavaScript">

function goback(){alert("Good Bye!");history.go(-1);}
function getthedate() {Todays = new Date();
TheDate = "" + (Todays.getMonth()+ 1) +" / "+ Todays.getDate() + " / " +
Todays.getYear()
document.clock.thedate.value = TheDate;
}
var timerID = null;

var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () { stopclock(); getthedate()

showtime();
}
function showtime () {
var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000); timerRunning = true;
}
</script>
</HEAD>
<BODY bgcolor="#00FFFF" onLoad="startclock()">
<CENTER><h2>Esto es un reloj hecho con JavaScript</h2>
<table border><tr>
<td><form name="clock" onSubmit="0"></td>
</tr>
<tr>
<td colspan=2>Hoy es: <input type="text" name="thedate" size=12 value=""></td>
<td colspan=2>La hora es: <input type="text" name="face" size=12
value=""></td></form>
</tr>
</table>
</CENTER>
<hr>
<center>
<h3>
[<a href="http://aprenderaprogramar.com">Volver</a>]
</h3></center></BODY></HTML>
a) Reescribe el cdigo HTML que presenta distintas deficiencias y no se ajusta a las normas de estilo
habituales.
b) Reescribe el cdigo JavaScript para que cumpla con las normas de estilo que hemos estudiado.
c) Corrige el cdigo del reloj para que se vea una mejor presentacin y funcione correctamente.
d) Incluye comentarios en el cdigo indicando qu es lo que hacen las diferentes partes del cdigo
JavaScript.
e) Como resultado de este ejercicio debes presentar el cdigo con todos los cambios antes
mencionados.

Reglas de estilo para comentarios JavaScript.
GUA DE ESTILO
JAVASCRIPT PARA
COMENTARIOS DE
APRENDERAPROGRAMAR.COM PROYECTOS. JSDOC.
@CONSTRUCTOR,
@DEPRECATED, ETC.
EJEMPLOS (CU01192E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Reglas de estilo para come
entarios JavaSccript.
GUA DE ESTILO
E PARA
A COMENTA
ARIOS
Los programadores JaavaScript sueelen atenerse a unas regglas de estiloo a la hora de escribir c
digo. Esto
no slo ese vlido paara el cdigo o en s, sino tambin para los com mentarios. EEn proyecto os de gran
extensinn pueden exiistir miles dee lneas de cdigo
c JavaScript. Este cdigo debe estar bien comentado
para faciliitar su comprensin y maantenimiento.
MANUALES DE ESTILO
O
En una em 00 programaadores cada programado

mpresa en laa que trabajaan 100 100 or no puede hacer las
cosas a su
u manera. En
E estas emp presas es frecuente que cada
c programmador desarrrolle un fraggmento de
una aplicacin y lueggo esos fraggmentos hayy que unirloos. Para quee esa unin sea slida y no haya
problemaas de integracin y mantenimiento posterior,
p dos los programadores d
tod deben atenerse a unas
mismas normas.
Lo ideal sera
s que en una aplicaccin donde han
h trabajad
do 20 prograamadores, u un supervisor no fuera
capaz de detectar qu parte deel cdigo haa hecho cadda programaador. Esto ees difcil, porque cada
programaador deja suu impronta, pero siguiendo unas reeglas predeffinidas se puede consegguir como
b estructurado y bastaante homog
resultado un cdigo bien neo.
Ya hemoss hablado dee reglas de estilo

e a la ho
ora de crear cdigo en reelacin formmas de uso preferentes
del lenguaaje y en relaccin a cuesttiones organiizativas relaccionadas con
n el cdigo.
Vamos a centarnos ahora en lo os comentarios dentro del cdigo o JavaScript. No hay un nas reglas
obligatorias que cumpplir en relacin a los commentarios. Caada empresaa puede usarr diferentes estilos
e a la
hora de comentar
c el cdigo, si biien es cierto
o que suele hacerse
h orma similarr cuando hablamos de
de fo
programaacin profesional.
Nosotros vamos a preesentar aqu unas reglass de estilo para comentaarios que se corresponden con las
que utilizaan grandes empresas,
e peero ten en cu
uenta que ni son obligattorias ni todaas las empre
esas siguen
los mismo os criterios.
REGLAS DE
D ESTILO PA
ARA COMENTTARIOS
A continuacin pressentamos una lista dee reglas de e estilo quee suelen reecomendarse e para la
programaacin JavaScrript. Como hemos
h indicado, son op pcionales, peero un progrramador que e no sigue
unas reglaas de estilo no suele con
nsiderarse un buen proggramador. Ms M que segu uir estrictamente estas
reglas quee presentammos a continuuacin, lo im
mportante es que cuando o crees cdiggo sigas unass reglas de
estilo (que pueden seer estas o sim
milares a estaas) y que no las modifiqu
ues. De esa mmanera crears cdigo
homogneo.
om, 2006-2029
Tambin ten en cuenta que las reglas aqu presentadas son una forma resumida de reglas respecto a lo
que sera un manual de estilo propio de una empresa, que sera mucho ms extenso. El objetivo de
presentar aqu estas reglas es didctico y para familiarizarnos con ellas, no consideres que son
obligatorias ni que aqu tienes todas las reglas necesarias.
Las reglas aqu presentadas siguen el estndar JSDoc. Seguir un estndar tiene ventajas como poder
generar de forma automtica documentacin de proyectos usando el software adecuado.
Regla 1. El mejor comentario es el implcito o auto-documentador
Considera que ests revisando un cdigo y que en una funcin encuentras esto:
function f33 (a, b) { }
Te haces una idea de lo que hace esta funcin? Te haces una idea de qu tipo de parmetros recibe la
funcin? Difcilmente nos podremos hacer una idea si los nombres de variables, funciones, parmetros,
etc. son cortos y no descriptivos.
Sera mucho mejor esto:
function getFullName (name, surname) { }
Fjate que estamos usando nombres descriptivos. En este caso hemos usado el ingls para que tengas
en cuenta que el ingls es el lenguaje ms universalmente utilizado en programacin. No solo lo utilizan
quienes hablan ingls, sino que lo utilizan muchas empresas aunque sean de habla hispana. Si prefieres
utilizar el espaol puedes escribirlo as:
function obtenerNombreCompleto (nombre, apellidos) { }
Este cdigo, aunque no hemos comentado nada, podemos decir que est autodocumentado, porque se
entiende (aproximadamente) lo que hace simplemente leyndolo. Esto es un buen estilo de
programacin.
Regla 2. Usa un estilo de comentarios y no lo cambies, pero respeta el existente
Si estamos trabajando en un nuevo proyecto usaremos un estilo para comentarios que debemos
mantener en todo el proyecto. Sin embargo, si estamos revisando el cdigo desarrollado por otras
personas y observamos que siguen un estilo de comentarios diferente al que nosotros estemos
habituados a usar, deberemos respetarlo (para no afectar a la homogeneidad del cdigo).
El estilo de comentarios que vamos a proponer aqu es un estilo similar al que se usa en otros lenguajes
de programacin como C++ y Java.
Regla 3. Usa comentarios multilnea en cabeceras de funciones y en lnea en otros casos
Para comentar lo que hace una funcin usaremos comentarios de este tipo:
/**
* El comentario comienza con una barra y dos asteriscos.
* Cada nueva lnea lleva un asterisco al comienzo.
* @param {string} nombre indica que una funcin recibe un parmetro de tipo string y que
* el nombre del parmetro es nombre.
* @descriptor Cada descriptor que aadamos ir en una lnea independiente.
*/
Si una lnea es demasiado larga la dividimos en varias lneas. La primera estar sin indentar y el resto
indentada (desplazada hacia dentro) respecto de la primera.
Los comentarios puntuales en lnea se harn con //. Por ejemplo:
var tmpPers; //Variable temporal que almacenar un objeto Persona
Regla 4. Usa un comentario al principio de un archivo js para describir su contenido
En un proyecto podemos tener decenas de archivos js correspondientes a cdigo JavaScript. Al principio

de cada archivo deberamos incluir un comentario descriptivo de qu contiene dicho archivo que
comenzar con la etiqueta @fileoverview. Por ejemplo:
/**
* @fileoverview Men aprMenu, desplegable con efecto expansin suavizado
*
* @version 2.2
*
* @author Csar Krall <cesarkrall@aprenderaprogramar.com>
* @copyright aprenderaprogramar.com
*
* History
* v2.2 Se mejor el efecto de expansin de los submens dndole efecto aceleracin
* v2.0 Se evit que quedaran supersupuestos textos de submens
* v1.1 Se mejor la compatibilidad con navegadores Opera
* ----
* La primera versin de aprMenu fue escrita por Karl Monitrix
*/
Regla 5. Documenta las funciones incluyendo los parmetros que usa y lo que devuelve
Un comentario tpico para describir una funcin incluir una descripcin de lo que hace la funcin, la
descripcin de sus parmetros, y la descripcin de lo que devuelve la funcin.
La descripcin de un parmetro se hace comenzando con @param
La descripcin de lo que devuelve la funcin se hace comenzando con @return. Si la funcin no

devuelve nada se omitir esta etiqueta.
Ejemplo:
/**
* Verifies if the string is in a valid email format
* @param {string}
* @return {boolean}
*/
Regla 6. Usa comentarios para constructores y para documentar las propiedades
Si estamos definiendo un tipo de objeto usaremos una declaracin @constructor para indicar que
estamos definiendo el constructor para un tipo de objeto. Adems, las propiedades sern comentadas
para reflejar su significado. La etiqueta @type se usar para describir qu tipo de dato corresponde a la
propiedad.
Ejemplo:
/** @constructor */
project.MiDefinicionDeTipoDeObjeto = function() {
/**
* Propiedad que indica el nmero mximo de colores permitidos.
* @type {number}
*/
this.maxNumeroColores = 4;
}
Regla 7. Usa etiquetas normalizadas
Cuando queramos incluir una descripcin de un elemento usaremos etiquetas normalizadas. Por
ejemplo una etiqueta normalizada para describir al autor de un cdigo es @author. En cambio no es
normalizada <<@autor>> ni <<@Author>> ni <<@authors>>.
A continuacin indicamos la lista de etiquetas normalizadas recomendadas:
Etiqueta Descripcin Ejemplo
@author Indica el nombre del autor del cdigo @author Csar Krall
/**
Indica que una propiedad o variable * El nombre de la empresa.
@const {type}
sern constantes y su tipo * @const {string}
*/
/**
* Representa un crculo.
* @constructor
@constructor Indica que se define un tipo de objeto
*/
function Circulo() { ...
}
Indica que una funcin, mtodo o
propiedad no deberan usarse por ser
@deprecated obsoletas. Debe indicarse cul es la @deprecated Usar getNombre().
funcin, mtodo o propiedad que
debe ser usada en su lugar.
/**
* Enum para tres estados posibles.
* @enum {number}
*/
Indica que se trata de una
@enum project.TresEstado = {
enumeracin
SI: 1,
NO: -1,
DESCONOCIDO: 0
};
/**
Usado con @constructor para indicar * Una lista de objetos persona.
@extends que un tipo de objeto hereda de otro * @constructor
tipo de objeto * @extends apr.bc.BasicList
*/
Comentario para describir los Ver el ejemplo de la regla 4 expuesto
@fileoverview
contenidos de un fichero anteriormente.
/**
* Una forma.
Usado para indicar que una funcin * @interface
@interface
define una interface */
function Forma() {};
Forma.prototype.dibujar = function() {};
/**
* @constructor
* @implements {Forma}
Usado con @constructor para indicar
*/
@implements que un tipo de objeto implementa una
function Square() {};
interface Square.prototype.dibujar = function() {
...
};
Etiqueta Descripcin Ejemplo

/* Copyright aprenderaprogramar.com,
2002-2005
* This script is developed by
aprenderaprogramar. Visit us at
www.aprenderaprogramar.com.
@license Indica los trminos de licencia
* This script is distributed under the GNU
Lesser General Public License.
* Read the entire license text here:
http://www.gnu.org/licenses/lgpl.html
*/
Indica que un mtodo o propiedad de
una subclase sobreescribe el mtodo /**
de la superclase. Si no se indica otra * @return {number} Sueldo.
@override
cosa, los comentarios y * @override
documentacin sern los mismos que */
los de la superclase.
Indica un parmetro para un mtodo,
* @param {string}
@param {type} funcin o constructor y el tipo de dato
que es.
Indica qu devuelve un mtodo o * @return {boolean}
@return {type}
funcin y su tipo.
Indica una referencia a
@see @see http://aprenderaprogramar.com
documentacin ms amplia
Indica navegadores para los que se
@supported @supported Testado en IE10+ y en FF26+
conoce que aceptan el cdigo
Identifica el tipo de una variable,
@type {Type} @type {number}
propiedad o expresin.
Por ejemplo @code, @define, @dict,
@export, @expose, @externs,
@inheritDoc, @lends, @preserve,
Existen ms etiquetas que no vamos a
Otros @noalias, @nocompile, @nosideeffects,
estudiar ahora
@private, @protected, @public, @struct,
@suppress, @template, @this, @typedef y
otros)
GENERADORES DE DOCUMENTACIN AUTOMTICOS
Existen generadores automticos de documentacin de proyectos JavaScript. Estos generadores lo que

hacen bsicamente es extraer los comentarios en el cdigo y transformarlos en un documento (por
ejemplo un documento HTML) organizado donde se pueden leer todos los detalles del cdigo con una
presentacin adecuada.
En este curso no vamos a entrar a estudiar esta posibilidad (que s es habitual usar en empresas),
aunque si lo deseas puedes hacer pruebas por tu cuenta.
Cada empresa o equipo de desarrolladores puede seguir distintos estndares o usar distintos
generadores de documentacin, por ello debers atenerte en cada empresa a la herramienta que se
est usando para la documentacin.
Las reglas de documentacin que hemos expuesto estn adaptadas al estndar JSDoc
(http://usejsdoc.org/). Puedes hacer pruebas usando este estndar si lo deseas.
EJERCICIO
Un programador ha creado este cdigo y nos han pedido que a) Lo comentemos de forma adecuada. b)
Lo indentemos y organicemos de forma adecuada. Revsalo, comntalo y organzalo conforme a los
estndares que hemos explicado, incluyendo comentarios de cabecera de funcin y comentarios en
lnea para describir los aspectos ms relevantes:

<html><head><title>Cursos aprende a programar</title><meta charset="utf-8">
<meta name="description" content="Aprende a programar con cursos reconocidos por su calidad didctica: HTML, CSS,
JavaScript, PHP, Java, Visual Basic, Joomla, pseudocodigo, diagramas de flujo, algoritmia y ms.">
<meta name="keywords" content="HTML, CSS, JavaScript, Java, Visual Basic, Joomla, PHP, pseudocodigo, diagramas de
flujo, cursos, tutoriales">
<style type="text/css"> *{font-family: verdana, sans-serif;} #principal{text-align:center;width:95%; margin: 0 auto;}
.tituloCurso {color: white; float:left; padding: 36px 44px; font-size: 2.65em; font-style:bold; text-decoration:none;}
a:hover{color:orange !important;}</style>
function ejemplo(){
var nodosTituloCurso = document.querySelectorAll(".tituloCurso");
var contador = 0;
var nodosCambiados = new Array();
var tocaCambiar = true;
}
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);
} 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>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Fundamentos</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188"> Java</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192"> HTML</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203"> CSS</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206"> JavaScript</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=70&Itemid=193"> PHP</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=38&Itemid=152"> Joomla</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61"> Visual Basic</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=28&Itemid=59"> Pseudocdigo</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=26">
Libros/ebooks</a></div>
href="http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=64&Itemid=87">Cursos tutorizados</a></div>
</div>
</body>
</html>

Qu es y para qu sirve Ajax? XML, JSON. Ejemplo.
QU ES Y PARA QU
SIRVE AJAX? JAVASCRIPT
ASNCRONO, XML Y JSON .
APRENDERAPROGRAMAR.COM VENTAJAS E
INCONVENIENTES DE
AJAX. XMLHTTPREQUEST .
EJEMPLO. (CU01193E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Qu es y para
p qu sirve Ajax?
A XML, JSON. Ejemplo.
LADO DELL CLIENTE Y

MS ALL
?
Hasta ahoora nos hem mos centradoo en JavaScript del lado del cliente. Pero las aplicaciones web
w o apps
para smartphones tienen que con onde normalmente resid
nectar con seervidores (do den los datos en bases
de datos). Las peticiones a servidores se suelen hacer con lenguajes como PHP y el inconven niente que
n que ralentizan las pginas web.
tienen son
U ES Y PARA
AJAX QU A QU SIRVEE?
u esquema para comprrender mejor la idea que

Veamos un e hay detrs del uso de Ajax. Este essquema lo
iremos co ncemos en la explicacin..
omentando y comprendieendo a medida que avan
om, 2006-2029
Realizar peticiones al servidor y esperar respuesta puede consumir tiempo (el tiempo necesario para
recargar una pgina completa). Para agilizar los desarrollos web surgi Ajax (inicialmente Asynchronous
JavaScript And XML, aunque hoy da ya no es una tecnologa ligada a XML con lo cual no pueden
asociarse las siglas a estos trminos), una tecnologa que busca evitar las demoras propias de las
peticiones y respuestas del servidor mediante la transmisin de datos en segundo plano usando un
protocolo especficamente diseado para la transmisin rpida de pequeos paquetes de datos.
Con Ajax, se hace posible realizar peticiones al servidor y obtener respuesta de este en segundo plano
(sin necesidad de recargar la pgina web completa) y usar esos datos para, a travs de JavaScript,
modificar los contenidos de la pgina creando efectos dinmicos y rpidos.
En el esquema anterior vemos las ideas en torno a Ajax de forma grfica. En la parte superior hemos
representado lo que sera un esquema de comunicacin tradicional: el cliente solicita una pgina web
completa al servidor. El servidor recibe la peticin, se toma su tiempo para preparar la respuesta y la
enva. El resultado, una pequea demora debido al tiempo que tarda en llegar la peticin al servidor, el
tiempo que ste tarda en preparar la respuesta, y el tiempo que tarda en llegar la respuesta ms
recargarse en el navegador.
En la parte inferior vemos lo que sera un esquema de comunicacin usando Ajax: el cliente tiene una
pgina web cargada (puede ser una pgina web completa, o slo el esqueleto de una pgina web). El
cliente sigue trabajando y en segundo plano (de ah que hayamos dibujado con lneas punteadas las
comunicaciones) le dice al servidor que le enve un paquete de datos que le hacen falta. El servidor
procesa la peticin. Ahora la respuesta es mucho ms rpida: no tiene que elaborar una pgina web
completa, sino slo preparar un paquete de datos. Por tanto el tiempo de respuesta es ms rpido. El
servidor enva el paquete de datos al cliente y el cliente los usa para cambiar los contenidos que se
estaban mostrando en la pgina web.
VENTAJAS E INCONVENIENTES DE AJAX
Las ventajas que proporciona Ajax son varias:
a) No es necesario recargar y redibujar la pgina web completa, con lo que todo es ms rpido.
b) El usuario no percibe que haya demoras: est trabajando y al ser las comunicaciones en segundo
plano no hay interrupciones.
c) Los pasos que antes poda ser necesario dar cargando varias pginas web pueden quedar
condensados en una sola pgina que va cambiando gracias a Ajax y a la informacin recibida del
servidor.
Como todo en la vida, Ajax tambin tiene inconvenientes:
a) El usuario puede perder la capacidad para hacer cosas que haca con webs tradicionales puesto que
no hay cambio de pgina web. Por ejemplo usar los botones de avance y retroceso del navegador o
aadir una pgina a favoritos puede dejar de ser posible. Esto en algunos casos no es deseable.
b) El desarrollo de aplicaciones web se puede volver ms complejo. Supongamos que antes tuviramos
un proceso en el que avanzbamos a travs de varias pginas web como 1, 2, 3. De este modo la
organizacin resulta sencilla. Si condensamos todo en una sola pgina web: 1, escribir y depurar el
cdigo puede volverse ms complicado. En sitios complejos, puede ser muy difcil depurar errores.
c) Existen problemas y restricciones de seguridad relacionados con el uso de Ajax. Hay que tener en
cuenta que por motivos de seguridad no todos los procesos se pueden realizar del lado del cliente (que
por su propia naturaleza es manipulable). Tambin existen restricciones de seguridad para impedir la
carga de contenidos mediante Ajax desde sitios de terceras partes.
d) La indexacin para los motores de bsqueda se ve dificultada, con lo cual nuestros sitios web pueden
perder visibilidad en los buscadores. No es lo mismo un contenido constante o aproximadamente
esttico, fcilmente rastreable para un buscador, que un contenido cambiante en funcin de la
ejecucin de JavaScript, difcilmente rastreable para un buscador.
MEJOR USAR O NO USAR AJAX?
Como todo, hay que usar las cosas en su justa medida. Ajax bien usado puede ser muy til para una
pgina web. Ajax mal usado puede ser un desastre para una pgina web.
ES AJAX UN LENGUAJE DE PROGRAMACIN?
No, Ajax es un conjunto de tcnicas que se usan para lograr un objetivo y se basa en lenguajes ya
existentes como JavaScript.
Podramos dar esta definicin de Ajax: Ajax es un conjunto de mtodos y tcnicas que permiten
intercambiar datos con un servidor y actualizar partes de pginas web sin necesidad de recargar la
pgina completamente.
Aunque Ajax se pens inicialmente para transferir datos en un solo formato (XML), actualmente Ajax
permite la transmisin de datos en mltiples formatos: XML, JSON, EBML, texto plano, HTML, etc.
QU ES XML Y QU ES JSON?
XML (extensible markup language) es un lenguaje de etiquetas que se usa para almacenar y enviar
informacin. No vamos a estudiar XML, simplemente pondremos un ejemplo para hacernos una idea de
qu son datos en formato XML. XML se usa para mltiples aplicaciones.
JSON (JavaScript Object Notation) es un formato para el intercambio de datos que se usa para
almacenar y enviar informacin, basado en la notacin literal de objetos de JavaScript. No vamos a
estudiar JSON, simplemente pondremos un ejemplo para hacernos una idea de qu son datos en
formato JSON. JSON se usa como alternativa al XML en AJAX.
Ejemplo datos en formato XML Ejemplo datos en formato JSON

{
<Curso> "Curso": {
<Titulo>JavaScript desde cero</Titulo> "Titulo": "JavaScript desde cero",
<Autores> "Autores": {
<Nombre>Csar Krall</Nombre> "Nombre": [
<Nombre>Bill Clinton</Nombre> "Csar Krall",
</Autores> "Bill Clinton"
<WebPublicacion> ]
<Url>aprenderaprogramar.com</Url> },
<PageRank>10</PageRank> "WebPublicacion": {
</WebPublicacion> "Url": "aprenderaprogramar.com",
</Curso> "PageRank": "10"
}
}
}
Esto nos sirve para hacernos una idea de qu es un paquete de datos que se intercambia entre el
cliente y el servidor a travs de Ajax.
Como curiosidad, tener en cuenta que el trmino XHTML hacer referencia a la combinacin de HTML
con XML en el sentido de escribir HTML siguiendo las reglas de sintaxis propias de XML. Bajo XHTML por
ejemplo, no pueden existir etiquetas que no se cierren, ya que XML impone la obligacin de que todas
las etiquetas se cierren.
UN EJEMPLO SIMPLE DE USO DE AJAX
En este curso nos centramos en JavaScript del lado del cliente y no vamos a estudiar Ajax. Hemos hecho
una breve introduccin a Ajax porque es una tecnologa interesante para aquellas personas que tras
terminar el curso quieran seguir profundizando en programacin web y por ello hemos considerado
conveniente hablar brevemente sobre Ajax. El ejercicio-ejemplo que se plantea es un ejercicio opcional,
por tanto puedes saltarlo y pasar a la siguiente entrega del curso.
EJERCICIO OPCIONAL
Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en ver un
breve ejemplo de uso de Ajax para realizar sugerencias de bsqueda (algo parecido a lo que hacen los
buscadores cuando muestran sugerencias una vez hemos empezado a introducir una palabra).
Para desarrollar este ejercicio necesitas tener conocimientos bsicos de PHP y disponer de un servidor
(puede ser un servidor remoto o un servidor local como WAMP XAMPP o similar).
Escribe este cdigo y gurdalo en el servidor con el nombre de archivo pruebaAjax.html:
<!DOCTYPE html><html><head><title>Cursos aprende a programar</title><meta charset="utf-8">

<script>
function mostrarSugerencia(str) {
var xmlhttp;
if (str.length==0) { document.getElementById("txtSugerencia").innerHTML=""; return; }
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtSugerencia").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","listadoDatos.php?q="+str,true);
xmlhttp.send();
}
</script></head>
<body><h3>Empieza a escribir un nombre en la casilla para obtener una sugerencia:</h3>
<form action="">
Nombre: <input type="text" id="txt1" onkeyup="mostrarSugerencia(this.value)" />
</form>
<p>Sugerencias: <span id="txtSugerencia"></span></p>
</body></html>
Escribe este cdigo y gurdalo en el servidor con el nombre de archivo listadoDatos.php:
<?php // Rellenamos un array con nombres

$a[]="Ana"; $a[]="Belinda"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gabriela"; $a[]="Hilda";
$a[]="Idaira"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ofelia"; $a[]="Petunia"; $a[]="Amanda";
$a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tania"; $a[]="Ursula";
$a[]="Violeta"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Walda"; $a[]="Vicky";
// Rescatamos el parmetro q que nos llega mediante la url que invoca xmlhttp
$q=$_REQUEST["q"]; $hint="";
// Buscamos la coincidencia en el primer caracter entre nombres del array con el primer caracter de q
if ($q !== ""){
$q=strtolower($q); $len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name,0,$len))) {
if ($hint==="") { $hint=$name; }
else { $hint .= ", $name"; }
}
}
}
// Devolvemos "no hay sugerencias" si no se encuentran coincidencias
// o los datos en $hint (nombres separados por comas) si se encontraron coincidencias
echo $hint==="" ? "No hay sugerencias" : $hint;
?>
Accede al archivo html invocando la ruta correcta (que depender de la ruta dentro de la que est
alojado en el servidor. La ruta ser por ejemplo http://aprenderaprogramar.com/pruebaAjax.html).
Fjate en que lo interesante de este ejemplo es que se recuperan datos que se encuentran en el
servidor.
Responde a estas preguntas:
a) Qu sugerencias se muestran si escribes la letra L en el cuadro de texto donde se pide el nombre?
b) Qu funcin JavaScript se dispara cada vez que se pulsa una tecla?
c) Se usa XML en este cdigo?
d) Se usa JSON en este cdigo?
e) Busca informacin en internet sobre las instrucciones JavaScript / Ajax que se usan en el cdigo y
explica cada una de ellas.
f) Reescribe el cdigo para que todo el proceso tenga lugar del lado del cliente. Es decir, traslada los
datos al lado del cliente y hazlo todo con cdigo JavaScript sin necesidad de utilizar Ajax.

Programacin web profesional JavaScript. Libreras, frameworks.
PROGRAMACIN WEB-
APP JAVASCRIPT.
LIBRERAS,
FRAMEWORKS. JQUERY,
ANGULARJS. VENTAJAS.
DIFERENCIAS. (CU01194E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Programacin web profesional JavaScrip
pt. Libreras, fraameworks.
LIBRERASS Y FRAMEW
WORKS JAVA
ASCRIPT
Un prograamador que no conoce las bases de un lenguaje tiene difcil crear buenaas aplicacion
nes usando
ese lenguaje. Pero co
onocer las baases no significa que todo deba ser programado
p por nosotro
os. Cuando
se trabajaa a nivel prrofesional, entra
e en jueego el conceepto de prooductividad. El uso de libreras y
frameworrks es una fo orma de ten ner una buenna productivvidad como programado ores y de esoo vamos a
hablar a continuacin
c .
PRODUCTTIVIDAD COM
MO PROGRA
AMADORES
Una frasee muy utilizaada en los am

mbientes dee programaccin es: no trates de inventar la rueda. Esta
frase alude a que existen num merosas fun ncionalidadees que son usadas con n frecuenciaa por los
programaadores, estn n bien estud
diadas y resu ueltas (posib
blemente por expertos ccon un mayo or nivel de
conocimieento que no osotros). Dichas solucion nes estn dissponibles a travs de in
nternet y po
or tanto es
ms inteligente y ms productivo o utilizar algo que funcioona bien y est
e ya desarrollado que
e tratar de
crearlo no
osotros desdde cero.
Veamos un u ejemplo ded una situaacin que se nos puede presentar co omo program madores: supongamos
que desarrollamos un na aplicacin web para una asociaccin que tieene un saln n de actos que
q puede
reservarsee por das. Queremos
Q inccluir un calendario en nu
uestra pgina web. Crearr un calendaario con un
buen diseeo y una bu uena funcionnalidad (que muestre al abrirse la fecha actual, q que permita avanzar o
retrocedeer meses o aos,
a etc.) puede
p requerir bastantes horas de trabajo,
t posiiblemente das. Ahora
bien, es este un prob blema frecueente dentro de los trabaajos de progrramacin? O Obviamente s,
s muchas
aplicacionnes web trabbajan con caalendarios para permitirr seleccionarr fechas: porr ejemplo ap plicaciones
para realizar reservas o compras ene hoteles, restaurantes,, etc. o para pedir cita co
on el mdico o con una
esteticistaa.
Esta tareaa por ser muuy comn estt bien estudiada y resuelta por la comunidad
c d
de programadores, por
tanto no tiene sentid do que tratem mos de inveentar la rued da construyndonos nosotros mismo os nuestro
propio calendario (a non ser que trratemos de hacer
h algo in
nnovador y exclusivo).
e Paara resolver esta tarea
lo ms lggico ser recurrir a cdigo disponiblee a travs de libreras JavaScript.
U LIBRERA JAVASCRIIPT? QU ES UN FRAMEEWORK JAVA

QU ES UNA ASCRIPT? Q
QU ES UNA API?
Entre los recursos qu

ue facilitan el
e trabajo a los program maodres teneemos libreraas, frameworks y apis.
Estos trmminos muchaas veces se entremezclan
e n entre s, yaa que no exisste un lmite o definicin clara para
cada uno de ellos. No
osotros vamo os a dar aqu
u unas definiciones, pero o ten en cueenta que son n slo algo
orientativvo.
Librera: conjunto
c de cdigo que contiene fu
unciones que e permiten realizar
r tareas que nos facilitan
f la
programaacin. Por ejemplo, si tenemos que calcular el faactorial de un
u nmero y tenemos una librera
om, 2006-2029
que nos ofrece dicha funcin, simplemente tendremos que llamar calcularFactorial(n) para obtener el
factorial de dicho nmero, sin necesidad de escribir el cdigo que resuelve dicha tarea (ya que ha sido
escrito por otra persona). Una librera muy conocida JavaScript es Jquery.
Framework: un framework (marco de trabajo) puede verse como una gran librera o conjunto de
libreras donde adems de facilitrsenos funciones para su uso, se suele disponer de una sintaxis o
metalenguaje especfico del framework y una forma de organizacin del cdigo especfica para dicho
framework. Por tanto para usar un framework no basta con conocer el nombre de una funcin que
queramos usar: hay que conocer qu sintaxis utiliza el framework, qu obligaciones impone (a la hora
de organizar el cdigo, archivos) y su lgica o filosofa de trabajo. El uso de frameworks se ha extendido
debido a la gran complejidad de las aplicaciones que se desarrollan hoy en da: los frameworks facilitan
su organizacin y mantenimiento. Un framework muy conocido JavaScript es AngularJS.
API: api (application programming interface o interface de programacin para aplicaciones) suele
aludir a la especificacin de libreras amplias con funciones y mtodos (signaturas) utilizadas en torno a
una tecnologa, usualmente por toda la comunidad de programadores, aunque no siempre. El cdigo de
implementacin (es decir, el detalle de la programacin) suele estar oculto o no disponible, pero sin
embargo la especificacin suele estar muy bien documentada. Una API puede estar asociado al lenguaje
en s, o bien haber sido creada por una empresa o casa comercial independiente. Son ejemplos de apis
muy conocidas JavaScript la api Canvas y la api de Google Maps.
Adems de estos trminos es frecuente que en torno a la programacin surjan otros que vamos a citar
brevemente:
IDE: un IDE (integrated development environment entorno de desarrollo integrado) es una aplicacin
que facilita la programacin en un lenguaje. Un IDE suele incluir un editor, herramientas de generacin
de cdigo automtica, de correccin sintctica, de ejecucin de cdigo, depuracin, etc. Son IDEs que
se pueden usar en JavaScritp Eclipse, Aptana, Codelobster, etc.
SDK: son las siglas de software development kit kit de desarrollo de software. Es un paquete de
software que puede incluir varias cosas tiles para la programacin en un determinado lenguaje, desde
compilador, depurador, ejemplos, organizadores de ficheros, etc.
Toolkit: trmino que puede englobar libreras e incluso frameworks. Suele usarse para aludir a un
conjunto de herramientas de desarrollo que facilita una empresa, o una comunidad de software libre.
Estas herramientas pueden incluir cosas diversas, por ejemplo formatos prediseados de botones,
tablas, cajas de dilogo, etc. Un ejemplo de toolkit sera GWT (Google Web Toolkit).
Ten en cuenta que las definiciones anteriores son imprecisas en el sentido de que estos trminos no
tienen unos lmites claros y distintas empresas o comunidades de programadores los utilizan de distinta
manera.
Es imposible conocer todas las herramientas de tipo librera, framework, api, ide, sdk, toolkit, etc. para
un lenguaje porque hay cientos. Una empresa (o una persona) elige una o varias de estas herramientas
y desarrolla con ellas ignorando a las dems.
CULES SON LAS MEJORES LIBRERAS Y FRAMEWORKS JAVASCRIPT?
Es difcil decir cules son los mejores frameworks o libreras JavaScript por varios motivos:
a) Posiblemente dependa de cules sean nuestros objetivos en una aplicacin concreta. Por ejemplo
habr libreras o frameworks que manipulen muy bien el DOM pero ofrezcan pocas funciones
matemticas, mientras que otros quizs ofrezcan muchas funciones matemticas pero no manipulen
bien el DOM.
b) Las libreras y frameworks (y el resto de elementos en torno al software) estn evolucionando

continuamente. Por ello una librera que sea la ms usada en 2089 puede dejar de serlo en 2090 debido
al cambio y auge de unas frente a otras. Cul ser la librera ms usada el prximo ao? No es fcil
saberlo.
c) Algunos proyectos de libreras y frameworks se abandonan por parte de sus creadores, quedando
como reliquias fsiles.
d) No todos los programadores tienen los mismos gustos o ideas: a unos les puede gustar algo que a
otros no le gusta.
Lo que s es cierto es que aunque sea difcil decir cules son las mejores, s hay una forma indirecta que
nos indica por lo menos la popularidad o apoyo que tienen libreras y frameworks entre los
programadores. Esta forma es simplemente medir el nmero de descargas o de pginas web que usan
una determinada librera o framework.
De acuerdo con esto, podemos citar las siguientes libreras y frameworks JavaScript como muy
populares (ten en cuenta que el grado de popularidad va cambiando con el tiempo):
Librera Logo Descripcin
Librera o biblioteca JavaScript creada por John Resig en 2006 y

que se ha convertido en una de las ms usadas. Se
Jquery
complementa con jQuery UI, una biblioteca que facilita
distintos componentes (mens desplegables, calendarios, etc.)
AngularJS Framework JavaScript desarrollado por Google.
Backbone Framework JavaScript creado por Jeremy Ashkenas.
Ember Framework JavaScript creado por Yehuda Katz.
Existen decenas de libreras y frameworks que no hemos citado (como Foundation, React, Three,
Meteor, Underscore) . Existen libreras o frameworks que tienen fines muy especficos, por ejemplo si
necesitamos crear grficos (de barras, de lneas, circulares, etc.) sobre datos nos resultar de inters
una librera especializada en la creacin de grficos como ChartJS, D3.js, Google Charts.
En resumen: el mundo de libreras y frameworks javascript es muy amplio, y no podemos pretender

conocer ni saber usar todos ellos. Tendremos que conocerlos y utilizarlos a medida que los vayamos
necesitando para proyectos concretos.
VENTAJAS E INCONVENIENTES DEL USO DE FRAMEWORKS JAVASCRIPT
El uso de frameworks JavaScript tiene ventajas e inconvenientes. Como ventajas podemos citar las
siguientes:
a) Elevan la productividad de los programadores: se pueden hacer cosas complejas en poco tiempo.
b) Elevan la claridad y mantenibilidad del cdigo. Al partir de un cdigo bien pensado y estructurado,
los proyectos resultan ms fciles de mantener.
c) Reutilizan cdigo creado por grandes programadores, posiblemente un cdigo ms efectivo y conciso
del que nosotros seramos capaces de crear.
d) Cdigo gratuito y abierto, en general con buena documentacin para los programadores.
e) Permiten el uso de funciones sin conocer el detalle del cdigo (abstraccin).
Y como desventajas:
a) Los frameworks evolucionan e incluso en algunos casos dejan de ser mantenidos y dejan de ser
usados. Esto genera un problema para el mantenimiento o continuidad de sitios web.
b) Pueden generar sobrecarga. Si se utiliza un framework cuyo contenido y tiempo de carga resultan
pesados para el navegador y por el contrario no se le saca partido, estaremos generando una
sobrecarga innecesaria.
c) Problemas de compatibilidad. Algunos frameworks son incompatibles entre s y usar dos de ellos al
mismo tiempo puede generarnos problemas. Tambin pueden existir problemas de compatibilidad con
algunos navegadores.
d) Aprender a usar un framework es algo restringido y que nicamente nos sirve para manejar dicho
framework, mientras que aprender un lenguaje de programacin es algo universal que tendr mltiples
aprovechamientos y aplicaciones.
e) Si los desarrolladores cambian y no manejan el framework que se vena empleando en un sitio web,
puede existir dificultad para continuar el desarrollo (o mantenerlo si ya se haba concluido) debido a
que tendrn que adaptarse a las particularidades del framework que se estuviera empleando, redisear
el sitio o como peor opcin, hacer un collage de diferentes frameworks o estilos.
Si te preguntas si usar una librera o framework puede ser o no conveniente, la respuesta es que
posiblemente dependa de lo que quieras hacer. Pero ten en cuenta que las grandes multinacionales
como Google, FaceBook, Microsoft, etc. y las grandes empresas usan frameworks porque en general se
acepta que las ventajas que aportan son mucho mayores que sus inconvenientes.
EJERCICIO OPCIONAL
Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en ver un
breve ejemplo de uso de una librera JavaScript para creacin de un grfico.
Considera que como resultado de realizar una encuesta a los clientes de un hotel se han obtenido estos
resultados: 35 % insatisfechos, 42 % satisfechos y 23 % indiferentes.
Se pide utilizar una librera o framework JavaScript especializada en la creacin de grficos para crear
un grfico circular que refleje dichos resultados. El resultado a obtener debe ser similar a este:

El API Canvas. Dibujar crculos, formas, grficos, juegos
API CANVAS HTML Y

DIBUJAR CRCULOS,
FORMAS, GRFICOS,
ANIMACIONES, JUEGOS,
ETC. (CU01195E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

El API Canvaas. Dibujar crcculos, formas, grficos,
g juegoss
CANVAS COMO
C SUPEERFICIE GRFFICA
En el pasaado, la creacin de efecto

os grficos y animacionees no resultaba sencilla dentro de pgginas web.
Un recursso que fue muy
m utilizado fue insertar applets Javaa u objetos o pelculas flaash (archivoss swf), con
el inconveeniente de que
q esto im mplicaba haceer uso de Flash Player, un plugin aadicional que e se deba
instalar en
e los naveggadores. La tendencia actual
a es quue la animaccin grfica quede denttro de los
estndarees web definidos por HTM ML, JavaScrippt y CSS sin dependencia
d as de terceras partes.
Dentro deel desarrolloo del estnddar de HTML se ha incluido una nu ueva etiquetta o elemen
nto HTML:
<canvas>.. Esta etiqueeta funciona igual que cualquier otra en el sentido de que se abre como <canvas>
< y
se cierra como
c </canvvas>.
El elemennto canvas ese un lienzo encima del cual se pue eden dibujar grficos y animaciones. Permite
generar grficos
g en pantalla, creear animacio ones, manippular imgen nes e inclusso video, etcc. En este
sentido, permite
p geneerar las anim
maciones grfficas necesarrias utilizand
do HTML+JavvaScript+CSSS, de modo
que todo os los desarrollos web puedan com mpletarse coon lo que ses denominaan lenguajes web sin
necesidadd de recurrir a tecnologaas de terceraas partes com os applets de Java.
mo Flash o lo
La incorpooracin de toda
t esta po
otencia grficca corre a caargo de los navegadores
n s. Dada la co
omplejidad
que conlleeva, todo lo relacionado o con canvas se dice que constituye unau API (inteerfaz de proggramacin
de aplicacciones). Algu
unos navegaadores antigguos no adm miten los elementos <canvas>, pero todos los
navegadoores moderno os s lo hacen
n.
El elemen
nto canvas co
onstituye un soporte al que u a travs de JavaScrip
q se le da uso pt.
Nosotros en este cursso no vamos a estudiar laa api Canvas. Simplemen nte nos limitaaremos a citar algunas
de las possibilidades que el uso de este elemen nto junto a JavaScript peermite para los desarrolloos web. La
creacin de elemen ntos grfico
os avanzado os y animaaciones avaanzadas con nstituye un rea de
especializzacin dentroo de los desaarrollos web n lo consideeramos un conocimiento
b, por tanto no o bsico.
No obstan nte, es adecuuado tener una
u idea de quq se puede e hacer con canvas
c y JavaaScript.
UTILIZANDO CANVASS
Un elemeento HTML caanvas tiene propiedades

p y mtodos que
q podemo os usar a travvs de JavaSccript, de la
misma foorma que ussamos propieedades y mtodos sobrre el resto de
d elemento os HTML com mo <img>,
<input>, <label>,
< etc.
No vamoss a detenernos a estudiar el API Canvvas, pero que

eremos mosttrar brevemeente algunoss ejemplos
que nos den
d una ideaa de qu es y para qu siirve. Escribe este cdigo en en edito
or de textos y gurdalo
con un no
ombre de arcchivo como ejemplo1.htm
e ml:
om, 2006-2029
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
function dibujar() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (20, 20, 150, 100);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 350);
}
</script>
</head>
<body onload="dibujar();">
<canvas id="canvas" width="200" height="400" style="border-style:solid;">
Su navegador no tiene soporte para mostrar el contenido
</canvas>
</body>
</html>
El resultado obtenido ser algo similar a esto:
Si investigas un poco sobre el cdigo podrs comprender con facilidad qu es lo que hace. No vamos a
entrar en detalles porque no es el objetivo de este curso.
Quizs pienses que esto es relativamente poco til, sin embargo hay un gran potencial detrs del
elemento canvas unido a la potencia de JavaScript. La creacin anterior implica que generamos una
imagen a partir de cdigo, esto implica un potencial enorme, ya que la imagen puede estar ligada a
datos (introducidos por el usuario, extrados de una base de datos, tomados de otra pgina web, etc.), y
tambin ligada a eventos (lo cual permite crear movimientos en respuesta a la accin del usuario,
incluso crear juegos) o ligada al tiempo (animaciones, imgenes que van cambiando en el tiempo).
Escribe este cdigo en en editor de textos y gurdalo con un nombre de archivo como ejemplo2.html:
<html>
<head><title>Ejemplo canvas de w3.org curso JavaScript aprenderaprogramar.com </title><head>
<body>
<h1> Ejemplo canvas curso JavaScript aprenderaprogramar.com </h1>
<canvas id="canvasGlowing" width="800" height="450">
El navegador no admite canvas</canvas>
</body>
<script>
var canvas = document.getElementById('canvasGlowing');
var context = canvas.getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();

context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 150);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 140);
</script>
</html>
El resultado esperado es que se dibujen lneas creando un efecto tridimensional en la pantalla (ten en
cuenta que en navegadores antiguos no se mostrar el resultado, slo los navegadores modernos
admiten canvas).
PARA QU SIRVE CANVAS?
El api Canvas combinado con CSS, HTML y JavaScript nos permite hacer todo aquello que se nos pueda
ocurrir. Vamos a citar algunas de las aplicaciones habituales:
a) Dibujar formas (lneas, puntos, crculos, etc.)
b) Dibujar texto
c) Dibujar encima de imgenes o manipular imgenes
d) Dibujar grficos
e) Crear animaciones de todo tipo (matemticas, escolares, publicidad, etc.).
f) Crear espacios tridimensionales por donde el usuario puede moverse
g) Crear juegos
h) Manipular videos por ejemplo crear efectos grficos sobre ellos
i) Hacer todo lo anterior en respuesta a eventos (por interaccin con el usuario)
j) Hacer todo lo anterior ligado a datos variables
Las bolas de la imagen anterior se pueden dibujar con relativa facilidad con Canvas. Tambin se pueden
dotar de animacin, hacer que salten, se dividan, etc.
Si escribes canvas examples en un buscador como google o bing podrs acceder a numerosos ejemplos
de uso de canvas. Muchos de ellos facilitan el cdigo fuente de forma ordenada para que te sea fcil
reproducirlo en tu ordenador o incorporarlo a tus pginas web.
VENTAJAS E INCONVENIENTES DE CANVAS
La principal ventaja de Canvas es permitir la creacion y manipulacin de todo tipo de formas e

imgenes sin dependencias de plugins o tecnologas externas a los propios lenguajes de desarrollo web
y navegadores. Igualmente es una gran ventaja la facilidad que brinda para la interaccin grfica con el
usuario o para ligar el aspecto grfico a datos que cambian dinmicamente.
Canvas es una herramienta que, al igual que todo, bien usado resulta muy til y mal usado puede
generarnos problemas. Un inconveniente ligado a canvas es pretender hacer pginas webs muy
animadas y con esto sobrecargar el computador del usuario. Ten en cuenta que crear animaciones
consume recursos y puede ralentizar la navegacin por las pginas web o crear molestias al usuario.
EJERCICIO OPCIONAL
Este ejercicio no forma parte del curso, por eso se califica como opcional. El ejercicio consiste en dibujar
la bandera de tu pas usando canvas y JavaScript. La respuesta al ejercicio debe ser el cdigo que genere
la bandera.

ElAPIDragandDrop.Arrastrarysoltarendesarrollosweb

APIDRAGANDDROP
HTMLYJAVASCRIPT.
EVENTOS.EFECTOS.
DATATRANSFER.
EJEMPLOS.ARRASTRARY
SOLTAR.(CU01196E)
Seccin:Cursos
Categora:Tutorialbsicodelprogramadorweb:JavaScriptdesdecero

Fecharevisin:2029

Resumen:Entregan96delTutorialbsicoJavaScriptdesdecero.

Autor:CsarKrall
aprenderaprogramar.com,20062029
ElAPIDragandDrop.Arraastrarysoltare
endesarrollosw
web
DRAGAN
NDDROP
Segurameente hayas trabajado

t co
on Windows y con el exxplorador dee archivos dee Windows, donde se
pueden cambiar
c archivos de ub bicacin sim
mplemente haciendo
h cliick sobre ellos, arrastrndolos y
soltndolo
os. Este pro
oceso de arrastrar y sooltar (drag and
a drop) reesulta muy cmodo parra realizar
determinaadas tareas y se ha inco
orporado a los
l desarrollos web a travs de lo q que se ha llaamado Api
DragandDrop.
pi Drag and Drop

Con el ap D podrem mos arrastraar y soltar im
mgenes, texxtos, enlacess, archivos o
o cualquier
elemento o que se noss ocurra, gracias a que laa nueva especificacin HTML
H pora todo lo necesario
incorp
parafacilitar quelos programado orespuedanincorporar estapotenccialidad en desarrollosw webyapps
parasmarrtphones.
EVENTOSDRAGANDDROP
Unaspecttoimportantteesqueconlanuevaeespecificacin ndisponemoosdenuevosseventospaarafacilitar
laprogrammacindelaarrastreysoltado.Paraeentenderesto oseventosd
debemostennerencuentaaquetoda
operacin ndearrastreeysoltadoim
mplicaadoseelementos:eelelementoorigen que se sele ecciona y
urce)yelelementodedeestino,queeeselelemen
arrastra(aalqueaveceessellamaffuenteosou ntoencima
delcualseesueltaelellementoqueesehaarrasttrado.
Nombre
edelevento
o D
Descripcina
aprenderaprrogramar.com
Sedisparasobreeleleementoorigencuandocom mienzaelarrasstre.Enestem
momento
dragstart
sedefiinenlosdatossasociadosalelementodeorigen.
Similaraleventomoussemove,peroafectaalelemmentoorigenquesehasele
eccionado
drag
yse
eestarrastraando.
Elelemeentoorigenqu uesehaarrasstradosufreelleventodrageendcuandoteerminael
drragend arrastre.Estonoapliccasiloquesearrastraesun
narchivodesd
deelsistemao
operativo
haciaelnavegaddor.
Sedisparasobreelelementodedesstinocuandoeelpunterodelratnentrad
dentrodel
draagenter
reaenquessepuederealiizarelsoltado
o.
Similaraleventomousemove,perroafectaaleleementodestin nocuandosobrelse
drragover
estarrastrandoalgoytodavaanosehasolttado.
Eventoquesedisparaenelelementodedestinocuandosesu
ueltaalgoqueseestaba
drop
arraastrandosobrrel.
Eventoqu
uesedisparaenelelementtodedestinocuandoelpunterodelrat
nsaledel
draagleave
padaporesteelemento.
reaocup
om,20062029
Unacuestinatenerencuentaesqueparaevitaraccionesdedefectodelnavegadorsobreelementos
destinados a ser arrastrados y soltados deberemos usar preventDefault(), instruccin de la que ya
hemoshabladoanteriormenteenestecurso.
Todos los eventos de arrastre tienen una propiedad denominada dataTransfer que se usa para
almacenar la informacin sobre lo que se est arrastrando. La informacin sobre lo que se est
arrastrando se compone de dos elementos: el tipo o formato de lo que se arrastra, y su valor. Por
ejemploeltipopuedesertextoysuvaloraprenderaprogramar.com.Oeltipopodraserunaurlysu
valorhttp://aprenderaprogramar.com.
Enestecursonovamosaentraraestudiarendetallelaapidraganddrop,noobstante,aligualquela
apiCanvas,puedesermuyinteresanteparadeterminadasaplicacionesytieneungranpotencial.
Algunosnavegadoresantiguosnoadmitendraganddrop,perotodoslosnavegadoresmodernosslo
hacen.
Veamosbrevementeunejemploquenosdunaideadequesyparaqusirvedraganddrop.Escribe
estecdigoeneneditordetextosygurdaloconunnombredearchivocomoejemplo1.html:
<!DOCTYPEHTML>
<html>
<head><metacharset="utf8"><title>Ejemplodraganddropaprenderaprogramar.com</title>
<style>*{fontfamily:sansserif;}
#div1{width:350px;height:70px;padding:30px;border:1pxsolid#aaaaaa;}
</style>
<script>
functionallowDrop(ev){ev.preventDefault();}
functiondrag(ev){ev.dataTransfer.setData("text",ev.target.id);}
functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
document.getElementById(data).style.color="blue";
setTimeout(function(){cambiarEstilo(document.getElementById(data))},700);
}
functioncambiarEstilo(elemento){
if(elemento.style.color=="blue"){elemento.style.color="red";}else{elemento.style.color="blue"}
setTimeout(function(){cambiarEstilo(elemento)},700);
}
</script>
</head>
<body>
<p>Mueveeltextoalrectngulo:</p>
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div><br/>
<divid="drag1"draggable="true"ondragstart="drag(event)"style="borderstyle:solid;display:inlineblock;
padding:5px;">
CursoJavaScriptaprenderaprogramar.com
</div>
</body>
</html>
Elresultadoesperadoesquesenosmuestreuntextodentrodeunrectngulojuntoaunrectngulo
vaco. Cuando arrastremos el texto sobre el rectngulo vaco, la caja del texto quedar dentro del
rectngulo vaco y empezar a parpadear en color azul y rojo (ten en cuenta que en navegadores
antiguosnosemostrarelresultado,slolosnavegadoresmodernosadmitendraganddrop).
LOSARCHIVOSYDRAGANDDROP
Hay muchos aspectos de drag and drop que habra que citar pero que no vamos a abordar en este
curso.Noobstante,hayunodeellosquemerecesercomentadoporsuespecialimportancia:dragand
drop facilita el arrastre de archivos, no slo dentro del navegador, sino desde nuestro ordenador
(nuestrosistemaoperativo)alnavegador.
Estapotencialidadjuntoalusodeotrastcnicasdeprogramacinhacemsfcildeloqueeraantesla
operacin con archivos, bajada de archivos desde el servidor a nuestro computador, o subida de
archivos desde nuestro computador al servidor. Aunque no vayamos a profundizar en esto, nos ha
parecido interesante citarlo para que lo tengas presente por si te surje la necesidad de realizar
operacionesconarchivosenaplicacioneswebusandodraganddrop.
PARAQUPUEDESERVIRDRAGANDDROP?
Drag and drop facilita la interaccin del usuario con el navegador y puede ser empleado para todo
aquelloquesenosocurra.Entrelasaplicacioneshabitualespodemosindicarlassiguientes:
a)Permitiralusuarioarrastrarlosarchivosasubiraunservidor(porejemploarchivosdeimgenes).
b) Permitir al usuario realizar selecciones arrastrando, por ejemplo permitir que elija por un lado un
modelodesillnyporotroladounmodelodetapizadoparaelsilln,arrastrandolaopcinelegidaa
partirdevariasopcionesposibles.
c) Aplicaciones de comercio electrnico donde el usuario elige lo que va a comprar y loarrastra asu
cestadelacompra.
c)Crearjuegosdondeelusuarioarrastraysueltaelementos.
d)Permitiralusuarioordenarelementos(porejemplocambiarelordendeunacoleccindefotografas
arrastrandoysoltandostasadistintasposiciones).
e) Crear aplicaciones de diseo donde los diseos se crean arrastrando y soltando elementos. Puede
usarse para cualquier tipo de aplicacin: diseo industrial, jardinera, decoracin, ingeniera, y por
supuestoparadiseowebdepginaswebcompletasodeelementosdeterminadoscomoformularios.
Combinandodraganddropconotrastcnicaspuedepermitirseeditarpropiedadesdeloselementos,
cambiarsuaspecto,moverlosdesitio,etc.
f)PermitircrearefectodeventanastipoWindowsendesarrollosweb,queelusuariopuedearrastrary
soltarendiferentespuntos,simulandoqueestuvieratrabajandoconunaaplicacindeescritorio.
g)Crearefectosdedesplegado:podemossimularqueunaimagensevadesplegandoountextoseva
haciendovisibleocambiandosuaspectoarrastrandounelemento.
PARAQUIENQUIERAINVESTIGAR
Para quien quiera investigar y profundizar en el api drag and drop citamos algunos elementos
relevantesquedeberanestudiarsecondetenimientoparaelcorrectomanejodeestaapi:
a)Eventosdragstart,drag,dragend,dragenter,dragover,drop,dragleave.
b)ObjetodataTransfer
c)MtodossetData,getData,clearDataysetDragImage.
d)Propiedadestypes,files,dropEffect,effectAllowed.
EJERCICIOOPCIONAL
Esteejercicionoformapartedelcurso,poresosecalificacomoopcional.Elejercicioconsisteenpartir
deunaimagencuadradaycrearapartirdeellacuatroimgenesdeigualtamaoqueseranlaspiezas
delpuzzle.Alaizquierdadelapantalladebenmostrarselascuatroimgenesenordenaleatorio(puzzle
desordenado).Aladerechadelapantalladebeverseuncuadradoconloscuatrobordesdelaspiezas
del puzzle. El usuario deber arrastrar cada pieza del puzzle a su posicin correcta. Cuando el puzzle
est correctamente construido debe aparecer el mensaje: Enhorabuena: puzzle correctamente
construido!
Prximaentrega:CU01197E
Accesoalcursocompletoenaprenderaprogramar.com>Cursos,oenladireccinsiguiente:
El API Geolocation. Geolocalizacin y mapas con JavaScript.
API GEOLOCATION Y API

GOOGLE MAPS
APRENDERAPROGRAMAR.COM INSERTAR MAPAS
INTERACTIVOS, SATLITE,
ETC. EN WEBS. EFECTOS.
(CU01197E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

El API Geolo
ocation. Geoloccalizacin y maapas con JavaSccript.
GEOLOCA
ALIZACIN Y MAPAS CON
N JAVASCRIP
PT
En los lttimos aos ha tenido un gran augee el uso de mapas interractivos, sisttemas de informacin
geogrficaa, aplicacion
nes para smartphones que q ayudan a calcular ru utas o que mmuestran informacin
sobre una ciudad o un monumeento basnd dose en la localizacin geogrfica. Existen herrramientas
JavaScriptt preparadass para aplicacciones de estte tipo.
Las herramientas quee incorporann los navegadores mode onadas con ggeolocalizacin se han
ernos relacio
llamado Api
geolocation. Los naavegadores modernos ju
unto con herramientas qque facilitan empresas
como Google dan piee a que los programado ores puedan incorporar esta potenccialidad en desarrollos
d
web y appps para smarrtphones.
EL OBJETO
O NAVIGATO
OR.GEOLOCA
ATION
El objeto navigator.geeolocation nos

n facilita mtodos
m parra trabajar con
c la geoloccalizacin de
el usuario.
Tener enn cuenta qu ue muchos navegadorees estn configurados para impedir que se aplique a la
geolocalizzacin (deteeccin de laa ubicacin del usuario
o) por motivvos de privaacidad. Por tanto los
resultados obtenidos pueden ser:
onfigurado el navegador para permitirlo).

a) Podemos obtener la geolocalizaacin (el usuario tiene co
b) La geoolocalizacin se obtiene slo si desp e se pida peermiso al usuario para facilitar

pus de que f su
localizaci
n, el usuario
o da una respuesta posittiva.
c) No see puede obttener la geolocalizacin

n (el usuariio tiene con
nfigurado el navegadorr para no
permitirlo
o).
Mttodo de
D
Descripcin aprenderapr
a rogramar.co
om
navigatorr.geolocation
n
Devuelve la informacin sobre la loccalizacin del naavegador. Slo es obligatorio incluir la
funcionDDeProceso. Estaa funcin es la funcin
f que reccibir como parmetro la inforrmacin de
getCurre entPosition geolocalizacin devuelta por el mtodo. Si se incluye funcionDeError,, esta es la funccin a la que
(funcion
nDeProceso, se enviarr un objeto dee tipo PositionError que lleva laa informacin rrelativa al errorr que se ha
funcio
onDeError, prodducido. El parmmetro configurration permite pasar
p un objeto
o con informacin de
configguration) configuracin relacionadaa con la geolocaalizacin (como o enableHigAccu uracy para obte ener mxima
n, timeout paraa indicar el tiem
precisi mpo mximo dee espera maximumAge para indicar el
tiempo mximo que se alm macenarn ubicaaciones obtenid das en cach).
watchhPosition Revisa la lo
ocalizacin del navegador perridicamente e informa sobre cambios en la localizacin.
l
(funcion
nDeProceso, Slo es obligatorio
o inclu
uir la funcionDe
eProceso. Esta funcin es la fu
uncin que recibir como
funcio
onDeError, parmetroo la informacinn de geolocalizaacin devuelta por el mtodo. Este mtodo est
e pensado
configguration) para smaartphones o tab blets donde el usuario
u se va deesplazando y caambiando su lo
ocalizacin.
El valor dee retorno de waatchPosition pu uede ser almaceenado en una vvariable de la misma
m forma
clearW
Watch(id) que se haaca con setInteerval(). La vigilancia puede detenerse usando el mtodo cleaarWatch de
forma similar a como se usa el clearIntervall.
om, 2006-2029
Veamos brevemente un ejemplo que nos d una idea de qu es y para qu sirve geolocation. Escribe
este cdigo en en editor de textos y gurdalo con un nombre de archivo como ejemplo1.html:
<!DOCTYPE html>
<html lang="es">
<head><meta charset="utf-8"><title>Curso JavaScript aprenderaprogramar.com</title>
function iniciar(){
var boton=document.getElementById('obtener');
boton.addEventListener('click', obtener, false);
}
function obtener(){navigator.geolocation.getCurrentPosition(mostrar, gestionarErrores);}
function mostrar(posicion){
var ubicacion=document.getElementById('localizacion');
var datos='';
datos+='Latitud: '+posicion.coords.latitude+'<br>';
datos+='Longitud: '+posicion.coords.longitude+'<br>';
datos+='Exactitud: '+posicion.coords.accuracy+' metros.<br>';
ubicacion.innerHTML=datos;
}
function gestionarErrores(error){
alert('Error: '+error.code+' '+error.message+ '\n\nPor favor compruebe que est conectado '+
'a internet y habilite la opcin permitir compartir ubicacin fsica');
}
window.addEventListener('load', iniciar, false);
</script>
</head>
<body>
<div id="localizacion">
<button id="obtener" style="margin:30px;">Obtener mi localizacin</button>
</div>
</body>
</html>
El resultado esperado depende de la configuracin del usuario: si el usuario admite facilitar su

ubicacin el resultado obtenido ser del tipo:
Latitud: 67.3409361
Longitud: -52.9290236
Exactitud: 44 metros.
Estos valores reflejan la posicin geogrfica del usuario. Podemos hacer uso de ellos por ejemplo para
mostrar un mapa de la zona donde se encuentra el usuario. Esto lo haramos modificando el cdigo
anterior de la siguiente manera:
function mostrar(posicion){
var ubicacion=document.getElementById('localizacion');
var mapurl='http://maps.google.com/maps/api/staticmap?center='+
posicion.coords.latitude+','+posicion.coords.longitude+
'&zoom=12&size=800x600&sensor=false&markers='+posicion.coords.latitude+
','+posicion.coords.longitude;
ubicacion.innerHTML='<img src="'+mapurl+'">';
}
Ahora bien, con el cdigo anterior estamos mostrando una imagen. Podemos incluir un mapa
interactivo de Google en nuestra pgina web? La respuesta es que s, como veremos a continuacin.
USO DE GOOGLE MAPS PARA MOSTRAR UN MAPA INTERACTIVO
Google permite el uso de su api de mapas para mostrar mapas en pginas web. Existen multitud de
posibilidades: crear mapas temticos, cromticos, personalizados, rutas, etc. y podemos mostrar una
zona del mundo, un pas, ciudad o calles. Tambin podemos crear efectos y dibujar sobre los mapas.
Nosotros en este curso no vamos a estudiar el api de Google Maps en profundidad, simplemente
mostraremos un ejemplo para ejemplificar que es muy sencillo y tiene grandes posibilidades el uso de
maps en nuestros sitios web.
Escribe este cdigo en en editor de textos y gurdalo con un nombre de archivo como ejemplo2.html:
<!DOCTYPE html>
<html>
<head> <title>Simple Map</title>
<meta charset="utf-8"><title>Curso JavaScript aprenderaprogramar.com</title>
<style> *{font-family:sans-serif;}
h1 {margin: 150px 0 30px 0; text-align:center; }
#lienzoMapa {width:800px; height:600px; margin: 0 auto; border: 5px solid; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(9.814103, -83.118708)
};
map = new google.maps.Map(document.getElementById('lienzoMapa'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<h1>Utiliza el mapa</h1>
<div id="lienzoMapa" ></div>
</body>
</html>
El resultado esperado es que se muestre un mapa en el cual podemos desplazarnos, hacer zoom, e
incluso llegar a la vista de street view o visin fotogrfica de una localizacin.
Para saber las coordenadas de un lugar, podemos acceder a la web de google maps, situarnos sobre el
sitio deseado, pulsar botn derecho y elegir Qu hay aqu?. Se nos mostrar la direccin y
coordenadas del lugar.
Hay que tener en cuenta que hemos indicado la posibilidad de obtener coordenadas del usuario o de
obtener coordenadas buscndolas en Google Maps. Hay ms formas de obtener coordenadas? S.
Adems de JavaScript, existen otras vas para hacer geolocalizacin. Por ejemplo usando la IP del
usuario, que puede determinarse usando lenguajes del lado del servidor como PHP, o usando servicios
web de geolocalizacin.
PARA QUIEN QUIERA INVESTIGAR
Para quien quiera investigar y profundizar en las posibilidades del api de Google Maps puede visitar la
documentacin del api: https://developers.google.com/maps/documentation/javascript/.
EJERCICIO
Crea una pgina web donde se muestre informacin sobre tu ciudad conteniendo un mapa interactivo
de Google Maps, de acuerdo con esta estructura para el documento HTML.
Visita aquiElNombreDeTuCiudad
Aqu un texto descriptivo sobre la ciudad
Aqu una imagen de tu ciudad Aqu otra imagen de tu ciudad
Aqu ms texto descriptivo sobre la ciudad
Aqu un mapa interactivo de Google Maps dimensiones 800x600 pixeles de tu ciudad
Aqu un pie de pgina

sessionStorage y localStorage JavaScript.
SESSIONSTORAGE Y
LOCALSTORAGE.
DIFERENCIAS. GUARDAR
DATOS EN CACH Y
PERSISTENCIA CON
JAVASCRIPT (CU01198E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

sessionStorrage y localStorrage JavaScript.
UN MUND
DO POR DELLANTE CON JAVASCRIPT
J
En la acttualidad la programacin JavaScrip

pt constituye
e un rea de
d especializacin denttro de los
desarrollo
os web. Las grandes empresas tieneen programadores exclussivamente d dedicados a JavaScript.
J
urso hemos visto los fun
En este cu d lenguaje y de algunass apis tiles. Vamos a citar algunas
ndamentos del
apis que no
n hemos no ombrado porr el momento o.
WEB STORAGE O ALM

MACENAMIEENTO WEB JA
AVASCRIPT
Se han desarrollado
d funcionalidaades que peermiten el almacenamie
a ormacin a travs de
ento de info
JavaScriptt. Desde los momento d internet,, en que laas webs se limitaban a mostrar
os iniciales de
informacin, hoy da cada vez se produce un mayor flujo o de informaacin entre u
usuarios y se
ervidores y
procesos donde intervvienen datoss que fluyen de un lado a otro. De laa idea o form ma de trabajoo inicial en
o de datos recaa en el seervidor, se esst pasando cada vez ms a dar un mayor
do el trabajo
el que tod m peso
al manejoo de datos deel lado del cliente. Y ah JavaScript
J ad
dquiere un paapel fundam
mental.
Inicialmen
nte el almacenamiento de d datos usaando JavaScrript era relattivamente co onflictivo: lass variables
desapareccan cuando se pasaba de d una pgin na web a otrra. Hoy da existen
e herraamientas com mo las que
vamos a ver
v a continu uacin que facilitan
f el trrabajo a los programado
p res permitieendo la persistencia de
la informaacin sin neccesidad de allmacenarla ene el servidor.
Anteriorm
mente en estte curso hem mos visto cmmo se puedeen manejar cookies
c con JJavaScript. Las
L cookies
presentann limitacionees por su natturaleza, de modo
m que se
e restringen al manejo de cadenas de e texto sin
integraci
n en un sistema de dato os bien estructurado.
En este caso
c vamos a referirnoss a algunas tecnologas como Web Storage (no o vamos a tratar
t aqu
Indexed Database).
D A
Algunas de sus
s posibiliddades todava no estn estandarizadas, pero otras estn
siendo ya usadas por la comunidad de programmadores.
Con la api Web Storagge se ha preetendido haccer una reforrmulacin y potenciacin n del manejo o de datos
con algo ms
m potentee que las coo okies. Con Weeb Storage se s utiliza el ordenador
o deel usuario (su
u memoria
o su disco
o duro) para almacenar informacin
i til para la navegacin web. Esa infformacin almacenada
e necesaria. Las posibilid
se recupeera cuando es dades de alm macenamientto se dividierron en dos partes,
p una
destinadaa a almacenaar informaci
n con tiemp po de vida laa duracin de una sesinn web (sessio onStorage,
por ejemplo para maantener los productos
p enn un carrito de compra)) y otra desttinada a mantener los
datos de forma perm manente (loccalStorage, por
p ejemplo para manteener un info orme de neggocios), de
forma sim
milar a como hara una applicacin de escritorio.
e
La informacin almacenada quedaa relacionada con un sitiio o apliccin orma que no puede ser
n web, de fo
utilizada por
p un sitio o aplicacin distinta
d a la que cre los datos.
Algunos navegadores
n pueden no admitir
a esta funcionalidaad, en especiial los ms an
ntiguos.
om, 2006-2029
SESSION STORAGE
Escribe el siguiente cdigo y gurdalo en un archivo html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Web Storage API ejemplo aprenderaprogramar.com</title>
function addProducto(){
var producto=document.getElementById('producto').value;
var precio=document.getElementById('precio').value;
sessionStorage.setItem(producto,precio); // sessionStorage[producto]=precio
mostrarDatos(producto);
}
function mostrarDatos(){
var datosDisponibles=document.getElementById('datosDisponibles');
datosDisponibles.innerHTML='';
for(var i=0;i<sessionStorage.length;i++){
var producto=sessionStorage.key(i);
var precio=sessionStorage.getItem(producto);
datosDisponibles.innerHTML += '<div>'+producto+' - '+precio+'</div>';
}
}
function limpiarVista() {
var datosDisponibles=document.getElementById('datosDisponibles');
datosDisponibles.innerHTML='Limpiada vista. Los datos permanecen.';
}
function borrarTodo() {sessionStorage.clear(); mostrarDatos(); }
</script>
</head>
<body>
<form name="formulario">
<p>Nombre del producto:<br><input type="text" name="producto" id="producto"></p>
<p>Precio:<br><input type="text" name="precio" id="precio"></p>
<p><input type="button" onclick="addProducto()" name="guardar" id="guardar" value="guardar"></p>
<p><input type="button" onclick="limpiarVista()" name="limpiar" id="limpiar" value="Limpiar Vista"></p>
<p><input type="button" onclick="borrarTodo()" name="borrar" id="borrar" value="Borrar todo"></p>
</form>
<br/>
<div id="datosDisponibles">No hay informacin almacenada</div>
</body>
El resultado esperado es que se nos permita ir aadiendo productos con su precio a la lista, limpiar la
vista de productos y precios pero manteniendo almacenados los mismos, o bien borrarlos
completamente pulsando el botn Borrar todo.
Resumen de mtodos y propiedades de sessionStorage:
Mtodo o propiedad de
Descripcin aprenderaprogramar.com
sessionStorage
sessionStorage.setItem('clave', Guarda la informacin valor a la que se podr acceder invocando a clave. Por
'valor'); ejemplo clave puede ser nombre y valor puede ser Francisco.
Recupera el value de la clave especificada. Por ejemplo si clave es nombre puede

sessionStorage.getItem('clave')
recuperar Francisco.
sessionStorage[clave]=valor Igual que setItem
sessionStorage.length Devuelve el nmero de items guardados por el objeto sessionStorage actual
Cada item se almacena con un ndice que comienza por cero y se incrementa
sessionStorage.key(i) unitariamente por cada item aadido. Con esta sintaxis rescatamos la clave
correspondiente al item con ndice i.
sessionStorage.removeItem(clave) Elimina un item almacenado en sessionStorage
Elimina todos los items almacenados en sessionStorage, quedando vaco el espacio

sessionStorage.clear()
de almacenamiento.
PERSISTENCIA DE LOS DATOS CON SESSION STORAGE
Los datos con sessionStorage son accesibles mientras dura la sesin de navegacin. Los datos no son
recuperables si:
a) Se cierra el navegador y se vuelve a abrir.
b) Se abre una nueva pestaa de navegacin independiente y se sigue navegando en esa pestaa.
c) Se cierra la ventana de navegacin que se estuviera utilizando y se abre otra.
LOCALSTORAGE
Con sessionStorage se puede tratar adecuadamente el flujo de informacin durante sesiones de

navegacin (por ejemplo, mantener los datos de un carrito de la compra). Pero qu ocurre si
quisiramos almacenar esa informacin ms all de una sesin y que estuviera disponible tanto si se
cierra el navegador y se vuelve a abrir como si se contina navegando en una ventana distinta de la
inicial?
Esto trata de ser respondido por localStorage. Este objeto tiene las mismas propiedades y mtodos que
sessionStorage, pero su persistencia va ms all de la sesin.
Sin embargo sessionStorage tiene limitaciones importantes: el almacenamiento de los datos depende,
en ltima instancia, de la voluntad del usuario. Aunque la forma en que se almacenan los datos
depende del navegador, podemos considerar que una limpieza de cach del navegador har que se
borren los datos almacenados con localStorage. Si el usuario no limpia la cach, los datos se
mantendrn durante mucho tiempo. En cambio hay usuarios que tienen configurado el navegador para
que la cach se limpie en cada ocasin en que cierren el navegador. En este caso la persistencia que
ofrece localStorage es similar a la que ofrece sessionStorage.
No podemos confiar el funcionamiento de una aplicacin web a que el usuario limpie o no limpie cach,
por tanto deberemos seguir trabajando con datos del lado del servidor siempre que deseemos obtener
una persistencia de duracin indefinida.
EL EVENTO STORAGE
Dado que localStorage permite que se reconozcan datos desde distintas ventanas Cmo detectar en
una ventana que se ha producido un cambio en los datos? Para ello se defini el evento storage: este
evento se dispara cuando tiene lugar un cambio en el espacio de almacenamiento y puede ser
detectado por las distintas ventanas que estn abiertas.
Para crear una respuesta a este evento podemos escribir:
window.addEventListener("storage", nombreFuncionRespuesta, false);
Donde nombreFuncionRespuesta es el nombre de la funcin que se invocar cuando se produzca el

evento.
DIFERENCIAS ENTRE COOKIES Y STORAGE
Los objetos storage juegan un papel en alguna medida similar a las cookies, pero por otro lado hay
diferencias importantes:
a) Las cookies estn disponibles tanto en el servidor como en el navegador del usuario, los objetos
storage slo estn disponibles en el navegador del usuario.
b) Las cookies se concibieron como pequeos paquetes de identificacin, con una capacidad limitada
(unos 4 Kb). Los objetos storage se han concebido para almacenar datos a mayor escala (pudiendo
comprender cientos o miles de datos con un espacio de almacenamiento tpicamente de varios Mb).
Tener en cuenta que de una forma u otra, ni las cookies ni los objetos storage estn pensados para el
almacenamiento de grandes volmenes de informacin, sino para la gestin de los flujos de datos
propios de la navegacin web.
MS POSIBILIDADES DE JAVASCRIPT CON LOS NAVEGADORES MODERNOS
En este curso hemos hecho un recorrido por los fundamentos del lenguaje JavaScript y muchas de las
tecnologas que hay en torno a l, pero extendernos en todas las posibilidades del lenguaje y
extensiones al mismo requerira alargar un curso y ese no era nuestro objetivo. Nuestro objetivo era
dar una visin sinttica del lenguaje y sus posibilidades.
A modo de referencia para aquellas personas que quieran profundizar en la programacin JavaScript
vamos a citar algunas extensiones o Apis de inters con las que no hemos trabajado:
Api forms: concebida para facilitar la validacin de formularios definiendo eventos, estados, mtodos,
etc.
Api Indexed Database: concebida para almacenar grandes volmenes de informacin estructurada, de
forma anloga a una base de datos pero con ciertas particularidades.
Api File: destinadas a facilitar la operacin con archivos y directorios.
Cross Document Messaging: concebida para comunicar entre s diferentes ventanas.
Web sockets: concebida para envo y recepcin de informacin del servidor en periodos cortos de
tiempo, til para aplicaciones de tiempo real (como una conversacin a travs de chat).
Web workers: concebida para hacer posible procesar mltiples tareas al mismo tiempo
(multiprocesamiento).
History: concebida para permitir la navegacin por pginas visitadas e incluso por estados dentro de la
evolucin de una web cuando no ha habido recarga explcita de la misma (por ejemplo debido al uso de
Ajax).
Offline: concebida para detectar la falta de conexin a internet y permitir el trabajo sin conexin.
EJERCICIO
Si has seguido el curso hasta aqu darte nuestra enhorabuena. No vamos a plantear aqu un ejercicio,
nicamente te propondremos que dejes un comentario en los foros aprenderaprogramar.com
indicndonos qu te ha parecido el curso, qu es lo que te ha parecido lo mejor de l y cules seran los
aspectos mejorables. Preparar este curso ha requerido muchas horas de dedicacin, pensamos que
pedirte unos minutos para que nos ayudes a mejorar y conocer tu opinin es razonable y ser algo que
te agradeceremos.

Final del curso tutorial bsico del programador web: JavaScript.
FINAL DEL CURSO

TUTORIAL BSICO DEL
APRENDERAPROGRAMAR.COM PROGRAMADOR WEB:
JAVASCRIPT DESDE CERO.
(CU01199E)
Seccin: Cursos
Fecha revisin: 2029
Autor: Csar Krall

Final del curso tutorial bssico del programador web: JaavaScript.
FINAL DELL CURSO TUTTORIAL BSICO DEL PRO

OGRAMADOR WEB: JAVA
ASCRIPT DESSDE CERO
Con esta entrega

e llegaamos al final del curso. Esperamos
E que haya sido
o un curso ttil y ameno para
p todas
las perso
onas que lo hayan segguido. Y com mo en todoo final, cabee hacer alggunas consid deraciones
especialess.
Gracias al equipo huumano de ap prenderapro ogramar.com m que ha heecho posiblee su publicaccin, y en

especial a Enrique Gonzlez, Manuel Sierra, Jaavier Roa, Maanuel Tello y Walter Sagstegui.
Gracias a todas las peersonas que de una u otra forma han

n participado
o enviando p
propuestas de
d mejora,
comentarrios, avisos de erratas, etc. y a loos alumnos que han seeguido el cu urso en la modalidad
m
tutorizadaa on-line.
A todos los que no han participado siguiendo el curso a travs de la we eb, desde
aprenderaaprogramar..com les agrradecemos que q nos hagaan llegar una opinin o propuesta de d mejora
sobre el mismo, bien n a travs de
d correo eleectrnico a contacto@aaprenderapro ogramar.com
m , bien a
travs de los foros. To
odas las opin
niones son bienvenidas y nos sirven para
p mejorar.
A quieness hayan segu

uido el curso ensen que los contenidoss son de caliidad y que
o de forma gratuita y pie
merece dar
d un pequ ueo apoyo econmico para que se s puedan seguir
s ofreciendo ms y mejores
contenido
os en este sitio
s web, lees estaremo
os muy agraadecidos si realizan
r unaa pequea aportacin
a
econmicca en forma de donaci n pulsandoo sobre el enlace que aparece
a en lla pgina prrincipal de
aprenderaaprogramar..com. Ten ene cuenta que detrs de d esta web b hay person nas y que preparar
p y
mantenerr este curso ha
h supuesto un gran esfuuerzo. Agraddeceremos dee corazn tu
u apoyo.
A quienes tengan inters en e proseguir formndose en el rea dee programaacin con

aprenderaaprogramar..com, les mos
remitim a consultar la ofertta formattiva en
http://www
w.aprenderap
programar.com/index.php??option=com_
_content&view
w=article&id==64&Itemid=8
87
Quienes quieran
q conssultar toda laa oferta de cu
ursos que se ofrecen en aprenderaprrogramar.com pueden
hacerlo en
n la siguientee URL:
http://www
w.aprenderap
programar.com/index.php??option=com_
_content&view
w=article&id==57&Itemid=8
86
Agradecemos que cuaalquier sugerencia, crticca, comentarrio o errata detectada

d quue nos pued da permitir
mejorar loos contenido
os para el fuuturo se nos haga llegar a la siguientte direccin de correo ellectrnico:
contacto@ @aprenderaprogramar.ccom , o alternattivamente a travss de lo
os foros
aprenderaaprogramar..com o del fo ormulario dee contacto que est a dissposicin dee todos los usuarios en
el portal web.
w A todoss los que noss han ledo y nos siguen, gracias. Nos vemos en eel prximo!
El equipo de apren
nderaprogram
mar.com
Acceso al curso comp

pleto en apreenderaprograamar.com -- > Cursos, o en la direcci
n siguiente:
http://apreenderaprograamar.com/index.php?option=com_conte
ent&view=category&id=78&
&Itemid=206
om, 2006-2029

Aprendeaprogramar Curso Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aprendeaprogramar Curso Javascript

Uploaded by

Copyright:

Available Formats

TUTORIAL BSICO DEL PROGRAMADOR WEB:

JAVASCRIPT DESDE CERO.

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

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

Direccin, modalidades y certificados

Para ms informacin: contacto@aprenderaprogramar.com

INDICE DEL CURSO

Fecha revisin: 2029

Resumen: Entrega n1 del curso Tutorial bsico del programador web:

Autor: Csar Krall

5.5. Aadir y borrar elementos de arrays.

6. DOM Y JERARQUA DE OBJETOS.

7. GESTIN DE EVENTOS CON JAVASCRIPT.

8. APLICANDO JAVASCRIPT EN DESARROLLOS WEB.

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

Fecha revisin: 2029

Resumen: Entrega n2 del Tutorial bsico del programador web:

Autor: Csar Krall

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

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

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

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

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

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

Prxima entrega: CU01103D

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

Fecha revisin: 2029

Resumen: Entrega n3 del Tutorial bsico JavaScript desde cero.

Autor: Csar Krall

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

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

CONTROL DE PROCESO DEL LADO DEL SERVIDOR

Servidor informa que el formulario ha

CONTROL DE PROCESO DEL LADO DEL CLIENTE

Cliente detecta error e informa de

Servidor informa que el formulario ha

Algunos usos tpicos de JavaScript son:

Prxima entrega: CU01104E

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

Fecha revisin: 2029

Resumen: Entrega n4 del Tutorial bsico JavaScript desde cero.

Autor: Csar Krall

JAVASCRIPT DEL LADO DEL SERVIDOR

Prxima entrega: CU01105E

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

Fecha revisin: 2029

Resumen: Entrega n5 del Tutorial bsico JavaScript desde cero.

Autor: Csar Krall

Es un lengguaje de proggramacin de propsito gen neral,

Es un lenguaje quue requiere dee compilacin

Es un lenguaje no clasificable bajo un paradigma

Se puedee utilizar tanto

No requiere nada especfico para poder programar en

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

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.

JAVASCRIPT Y HTML, CSS, PHP

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

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

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

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

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

Prxima entrega: CU01106E

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