Documente Academic
Documente Profesional
Documente Cultură
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
Duracin
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).
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
ORIENTACIN SOBRE EL CURSO PASO A PASO TUTORIAL BSICO DEL PROGRAMADOR WEB:
JAVASCRIPT DESDE CERO
JavaScript es un lenguaje ideado para dotar de dinamismo, rapidez y agilidad a las pginas web.
JavaScript puede tener distintas aplicaciones, pero la ms comn es la de ser un lenguaje de
programacin que se ejecuta del lado del cliente. Por si alguien se est preguntando qu es un cliente
Para quienes estn menos habituados a la terminologa cliente servidor, podemos decir
simplificadamente que un servidor es un computador con capacidades especiales para atender las
peticiones de muchos otros computadores. Normalmente los servidores estn situados en centros de
datos gestionados por empresas. Por el contrario, un cliente sera un computador u ordenador personal
con el que trabajamos en nuestra casa u oficina. Esto no siempre es as, pero nos sirve para situarnos de
forma introductoria en el contexto de los desarrollos web y del lenguaje JavaScript.
A veces se dice que JavaScript no es un lenguaje de programacin propiamente dicho, sino un lenguaje
de script. Un script vendra siendo un programa normalmente simple, almacenado en un archivo de
texto, y que es ejecutado por un intrprete del lenguaje para conseguir unos resultados. Pero muchos
estudiosos no se ponen de acuerdo sobre qu es exactamente un lenguaje de script y cules son
lenguajes de script y cules no lo son, por lo que nosotros no vamos a interesarnos demasiado por esta
terminologa.
Para tener un enfoque global de lo que es JavaScript dividiremos los lenguajes que intervienen en los
desarrollos web en estas categoras:
En los desarrollos web JavaScript se mezcla de alguna manera con HTML y CSS o con lenguajes de
programacin como PHP. Esta mezcolanza implica que a veces el cdigo JavaScript est junto al HTML o
PHP, o que a la hora de desarrollar una web o solucionar un problema en una web sean necesarios
conocimientos de HTML, CSS, JavaScript y de un lenguaje de programacin de propsito general.
aprenderaprogramar.com, 2006-2029
Orientacin Tutorial bsico programador web: JavaScript desde cero
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):
Se recomienda tambin conocer algn lenguaje de programacin, de modo que a la persona que siga el
curso le resulten familiares los conceptos de variable, arrays o arreglos unidimensionales y
multidimensionales, condicionales, bucles, algoritmos, etc. Si no tienes ningn conocimiento de
programacin te recomendamos realizar el curso Programacin en Visual Basic nivel I de
aprenderaprogramar.com como forma de familiarizarte con estos conceptos que te van a resultar
necesarios para seguir este curso. La URL del curso de Visual Basic es la siguiente:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=37&Itemid=61
Los conocimientos previos son, como hemos dicho, deseables pero no imprescindibles.
Aprender JavaScript requiere tiempo y esfuerzo. Para hacer ese recorrido ms llevadero, te
recomendamos que utilices los foros de aprenderaprogramar.com, herramienta a disposicin de todos
los usuarios de la web (http://www.aprenderaprogramar.com/foros/), que te servirn para consultar
dudas y recabar orientacin sobre cmo enfrentarte a los contenidos. Entre los miembros del portal
web y otros usuarios, trataremos de ayudarte para que el estudio te sea ms llevadero y seas capaz de
adquirir los conocimientos necesarios y avanzar como programador o diseador web.
El tiempo necesario (orientativamente) para completar el curso incluyendo prcticas con ordenador,
suponiendo que se cuenta con los conocimientos previos necesarios, se estima en 150 horas de
aprenderaprogramar.com, 2006-2029
Orientacin Tutorial bsico programador web: JavaScript desde cero
dedicacin efectiva o aproximadamente tres meses con una dedicacin de 2,50 horas diarias de lunes a
viernes. Aprender a crear pginas web requiere dedicacin y esfuerzo.
El curso ha sido generado paso a paso usando Windows como sistema operativo y por ello contiene
algunas indicaciones especficas para usuarios de Windows, pero tambin puede ser utilizado en otros
entornos (Linux, Macintosh, etc.), ya que los desarrollos web no son dependientes del sistema
operativo con el que trabajemos en nuestro computador.
Estamos seguros de que con tu esfuerzo y la ayuda que te podamos brindar este curso te resultar de
gran utilidad.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Le
enguaje de pro
ogramacin ejecucin cliente.
QU ES JA
AVASCRIPT
Este lengu
uaje es princcipalmente utilizado
u por parte de pro
ogramadores web para d dar respuesttas rpidas
a las acciiones del ussuario sin neecesidad de enviar la in
nformacin ded lo que ha hecho el usuario al
servidor y esperar resspuesta de ste (lo que hara
h ms len
nto los proceesos). El cdigo JavaScrip
pt se carga
al mismo tiempo que el cdigo HTTML en el naavegador, y reside
r en el cliente
c (commputador en el que nos
encontrammos), por loo que JavaSccript sigue funcionando
f incluso aunnque se pro oduzca un co orte en la
conexin a internet (een este casoo no podremmos seguir naavegando haacia otras dirrecciones we eb, pero s
podremoss ejecutar procesos
p lo
ocales en nuestro com mputador para
p la pgiina web en n que nos
encontrrramos).
En el sigu
uiente esqueema vemos un
u esquemaa bsico de lo que supon
ne navegar p
por internett desde un
computad dor personal.
El proceso
o bsico es el
e envo de una peticin (que
( puede llevar
l incorp
porada inform
macin como o los datos
de un forrmulario) a un servidor,, esperar reespuesta porr parte del servidor
s y reecibir la respuesta en
nuestro computador.
c . Cada proceeso de este tipo consume tiempo, el tiempo ttotal podramos verlo
desde el lado de nueestro computador como Tiempo Tottal Proceso = tiempo en nvo peticin n + tiempo
procesam n + tiempo recepcin reespuesta.
miento petici
aprenderraprogramar.co
om, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
An con velocidades rpidas de navegacin cuantos ms procesos de este tipo realicemos ms lenta
ser la navegacin web. JavaScript podemos decir que supone que las respuestas del servidor sean ms
completas y permite que se realicen ms procesos en nuestro computador (aquellos procesos que
realmente pueden ser resueltos en nuestro propio computador sin necesidad de estar enviando
peticiones al servidor), de modo que se reduce el nmero de peticiones y respuestas necesarias entre
cliente y servidor.
El cdigo JavaScript es interpretado directamente por el navegador web, sin necesidad de otros
programas o procesos intermedios. Un ejemplo puede ayudarnos a comprender la idea. Supongamos
que en una pgina web pedimos al usuario que rellene un formulario con sus datos personales, y que
entre los requisitos para enviar el formulario tenemos que es obligatorio que se incluya el nombre de
usuario y correo electrnico, siendo obligatorio que el nombre tenga ms de una letra y que el correo
electrnico contenga el carcter @ (arroba).
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
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
Aqu comprobamos cmo una ventaja importante de JavaScript es hacer ms gil y dinmica la
navegacin por pginas web, evitando los tiempos de espera.
Significa esto que podemos hacer todo mediante JavaScript? Algunas pginas web pueden basarse en
combinaciones de HTML con CSS y JavaScript. Incluso una pgina web podra ser slo HTML sin CSS ni
JavaScript, pero en los desarrollos profesionales lo normal es que intervengan estos tres elementos
junto a un lenguaje del lado del servidor (cdigo que reside en el servidor y no en el cliente).
Hay varios motivos por lo que en los desarrollos web profesionales se combinan procesos del lado del
cliente con procesos del lado del servidor. Vamos a citar algunos y para ello nos valdremos del ejemplo
de una tienda de comercio electrnico.
a) Los datos en la web cambian con frecuencia. Para que los datos se mantengan actualizados es
necesario refrescar la informacin haciendo nuevas peticiones al servidor. Para que el usuario
vaya navegando por la tienda quizs podamos enviar los datos de 10 12 productos pero para
cargar nuevos productos ser lgico hacer una nueva peticin al servidor.
b) Los datos pueden sobrecargar el computador del usuario. Si tenemos una tienda con 7.000
productos y enviramos todos los datos al computador del usuario para que fueran gestionados
mediante JavaScript tendramos problemas. En primer lugar, el envo de volmenes muy
grandes de informacin consume mucho tiempo (y posiblemente el usuario se vaya a otra
tienda si lo hacemos esperar demasiado). En segundo lugar, el computador del usuario puede
tener problemas para gestionar volmenes demasiado grandes de informacin (sobrecarga).
Los volmenes grandes de informacin normalmente residen en bases de datos gestionadas
por el servidor y los datos son servidos en pequeos paquetes de datos a medida que resulta
necesario.
c) Hay procesos que tienen que ser realizados del lado del servidor porque necesitan de
verificaciones de seguridad que no pueden residir en el computador de un usuario. Por
ejemplo, para el pago con una tarjeta de crdito es necesario que el usuario enve el nmero de
su tarjeta de crdito al servidor y que ste mediante un proceso seguro verifique la tarjeta y el
pago. Sera disparatado pensar en enviar los nmeros de tarjetas de crdito vlidas al
computador del usuario y que el proceso tuviera lugar en el computador cliente para luego
informar al servidor de que el pago es correcto.
Conforme vayamos adquiriendo experiencia como programadores nos daremos cuenta de que hay
procesos que claramente es ms adecuado realizarlos del lado del servidor, otros que claramente es
ms adecuado realizarlos del lado del cliente, y otros que podran realizarse tanto del lado del servidor
como del lado del cliente. Tambin con la experiencia iremos aprendiendo a tomar decisiones
relacionadas con esto.
En este esquema vemos cmo se combina un lenguaje del lado del servidor con JavaScript y HTML (no
citamos CSS pero obviamente CSS debe incluirse tambin en la respuesta del servidor).
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
Aqu hemos indicado como lenguaje del lado del servidor PHP, pero podra ser cualquier otro como
ASP, JSP, etc.
- Despliegue de mens
- Galeras de imgenes que van rotando automticamente
- Relojes
- Contadores de tiempo hacia delante o hacia detrs (cuenta atrs)
- Cronmetros
- Calculadoras
- Cambiar la apariencia de la pgina web cuando el usuario hace click en un botn o imagen. Por
ejemplo, los estilos CSS pueden variar al pulsar un botn y as permitir que el usuario
personalice la apariencia de una pgina web.
- Ofrecer distintos tipos de respuesta segn el navegador y sistema operativo que est utilizando
el usuario.
- Validacin de datos en formularios (impedir envo de formularios con datos errneos o
incompletos y mostrar mensajes de aviso).
- Ejecutar clculos o pequeos programas del lado del cliente.
- Modificar cdigo HTML en respuesta a la accin del usuario sin necesidad de establecer
conexin con el servidor.
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
Ejemplo: Calculadora en una pgina web para calcular el valor de una pieza de oro creada con JavaScript.
En este curso vamos a centrarnos en aprender las bases fundamentales para usar JavaScript del lado del
cliente. No vamos a entrar a detallar todas las instrucciones y detalles del lenguaje, ni las diferencias
entre versiones, porque lo que nos interesar ser comprender cul es la filosofa y cmo podemos
sacarle partido a una herramienta muy potente como JavaScript. Para hacer el curso didctico, tenemos
que centrarnos en lo fundamental y dejar los detalles de lado. Para aquellas personas que lo deseen,
daremos referencias de cmo encontrar la especificacin oficial del lenguaje donde se podrn consultar
detalles especficos.
Debido a lo indicado anteriormente, para seguir este curso son necesarios como conocimientos previos:
HTML
CSS
Fundamentos de la programacin (haber programado en algn lenguaje y conocer conceptos
como variable, array o arreglo, condicionales tipo if y bucles tipo for).
Para seguir el curso puedes utilizar como herramienta de apoyo los foros aprenderaprogramar.com,
disponibles en http://aprenderaprogramar.com/foros, donde puedes plantear consultas y dudas
relativas al contenido del curso.
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
JAVASCRIPT: LENGUAJE DE
PROGRAMACIN WEB .
JAVASCRIPT DEL LADO DEL
APRENDERAPROGRAMAR.COM
SERVIDOR. NODE.JS,
JAXER, RINGOJS, ETC.
(CU01104E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Le
enguaje de pro
ogramacin ejecucin cliente.
JAVASCRIIPT EN EL MA
ARCO DE LA PROGRAMA
ACIN WEB
Ya hemoss comentado o que JavaScrript se integrra dentro dee los desarrollos web con
n otros lengu
uajes como
HTML, CSSS y generalm mente con un lenguaje deld lado del servidor com mo PHP, JSP ASP u otroos. Hemos
dicho tam
mbin que su u uso principal es ejecutaarse del ladoo del cliente (computadoor del usuario
o). En esta
entrega del
d curso vam mos a ver c
mo se integgra JavaScrip ollos web en general y
pt dentro dee los desarro
cmo exissten posibilid
dades para usar
u JavaScrip pt no slo de
el lado del cliente.
Si hiciram
mos un smill entre una orquesta
o y un desarrollo web, el direector de orquesta sera el
e lenguaje
del lado del
d cliente (p por ejemplo o PHP), que acta
a como cerebro controlador
c d
de la pginaa web. CSS
sera el en
ncargado de vestuario y maquillaje, ese decir, quie
en controla la
l aparienciaa de lo que see presenta
al pblicoo. HTML sera la estructtura: el encaargado de cmo se distribuyen las sillas en el escenario,
dnde se coloca cadaa msico y qu instrum mento lleva cada
c msico o. Supongam mos que paraa distintas
cancioness (urls) los msicos cam mbian de po osicin (cam
mbia la estru uctura HTML). JavaScrip pt sera el
encargado o de efectoss especiales, por ejemploo quien mue eve las luces y dispara unn can de confetis
c en
un momeento dado, una persona gil y rpida. Por ltimo tenemos a la l base de datos, un enccargado de
guardar todas
t las paartituras (infformacin) y de ir entreegndolas a medida qu ue se lo requieren los
msicos u otros encarrgados.
lo un smil, pero nos sirrve de introd
Esto es s duccin paraa contextualizar el papel habitual de JavaScript
dentro dee los desarrollos web.
Una orquuesta puede tocar sin diirector (sin lenguaje del lado del seervidor), sin encargado de d efectos
especialess (JavaScript), sin encargado de vestu
uario y prese
entacin (CSSS), pero no sin msicos (HTML). De
todas formas, una bu uena orquestta normalmeente tendr todo el perrsonal (recurrsos de proggramacin)
necesario
os para que su puesta en escena sea brillante.
Un lenguaaje de prograamacin es un u lenguaje que
q se usa para
p realizar procesos de inters a traavs de un
ordenado n clculo para un estudiante o ingeniero, a una co
or o dispositivvo electrnicco, desde un ompra por
internet, pasando po or cualquier cosa que se s te ocurraa. Un lenguaaje de programacin tie ene como
caracterssticas bsicass el tener laa capacidad para tomarr decisiones o ejecutar un proceso u otro en
funcin de las circunsstancias (por ejemplo dep d botn que pulse el ussuario), as co
pendiendo del omo el ser
capaz de repetir pro ocesos numeerosas vecess hasta que e se cumpla una condiccin. JavaScrript es un
lenguaje que permitee cumplir esttas funcionees, por tanto o es un lenguaje de proggramacin, aunque
a se
use junto a otros lengguajes de pro ogramacin y lenguajes de
d etiquetas como HTMLL y CSS.
JavaScriptt es un lengu
uaje que apaareci para hacer
h ms fciles de proggramar y ms fciles parra navegar
los desarrrollos web. Un
U desarrollo
o web comprrende mltip ples reas de conocimien nto:
aprenderraprogramar.co
om, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
Anlisis y
diseo
funcional
Anlisis y
Programacin diseo
arquitectural
Desarrollo
web
Diseo
Integracin,
grfico,
Testing
Maquetacin
Sistemas
(servidores,
bases de
datos)
En la clasificacin que hemos hecho, JavaScript estara englobado dentro del rea de programacin.
Los desarrollos web tienen dimensiones muy variables. Podemos hablar desde una pequea pgina
web para una empresa local hasta un gran portal para una empresa de mbito internacional. En ambos
casos podramos decir que interviene la programacin web y el diseo web. Sin embargo, un pequeo
desarrollo puede ser llevado a cabo por una sola persona que abarque tanto programacin como
diseo, mientras que un gran desarrollo requiere de un equipo de trabajo ms o menos amplio y con
distintos especialistas, ya que en torno a los desarrollos web hay diferentes reas de conocimiento
implicadas (anlisis, diseo, programacin, sistemas, integracin, testing, etc.).
En un gran desarrollo existen personas especializadas en las distintas reas, de modo que el
programador no suele trabajar en el diseo (excepto para hacer algn retoque o cambio, o para
solucionar problemas). No obstante, s resulta conveniente que un programador web tenga los
conocimientos suficientes de HTML y CSS ya que le resultarn tiles y necesarios, por un lado para la
solucin de problemas y por otro para integrar cuestiones donde el diseo y la programacin se
entremezclan. Por ejemplo, podremos hacer modificaciones rpidas del aspecto de una pgina web,
cambiar un color de fondo o imagen, etc. cuando el usuario pulse un botn, mezclando JavaScript con
CSS.
Si miramos a los lenguajes o tecnologas que hay en torno a los desarrollos web podramos hacer una
clasificacin que comprende: HTML, CSS, Bases de datos, Servidores, Lenguajes de programacin del
lado del cliente (p.ej. JavaScript) y Lenguajes de programacin del lado del servidor (p.ej. PHP). Aqu nos
estamos refiriendo a paradigmas o situaciones ms frecuentes. Como comentaremos ms adelante,
JavaScript tambin se est usando en algunos casos como lenguaje de programacin del lado del
servidor.
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
HTML
Lenguajes
del lado
CSS
del
servidor
Tecnologas
web
Lenguajes
Bases de
del lado
datos
del cliente
Servidores
JavaScript es una tecnologa (o lenguaje) aceptada por todos los navegadores y que interviene en
prcticamente todo desarrollo web, grande o pequeo. Se encarga de dotar de respuesta rpida y
efectos controlados directamente desde el computador del usuario a las pginas web.
Los lenguajes de programacin del lado del servidor realizan procesos en el servidor (computador
remoto que se encarga de enviar las pginas web a travs de internet): podemos citar entre estos
lenguajes Java (JSP), ASP.NET, o PHP entre los principales.
Los lenguajes de programacin del lado del cliente realizan procesos en el ordenador personal del
usuario (efectos visuales, clculos, etc.): podemos citar entre estos lenguajes JavaScript, Java (applets),
VBScript Dart (impulsado por Google), entre los principales. JavaScript es el lenguaje de programacin
del lado del cliente ms utilizado hoy da en los desarrollos web y es aceptado por todos los
navegadores.
En cuanto a bases de datos podemos nombrar MySQL, SQLServer y Oracle, entre las principales.
Las tecnologas se combinan entre ellas de muy diversas maneras. Podemos citar algunas
combinaciones bastante habituales entre lenguajes de programacin y bases de datos: Java + Oracle,
ASP.NET + SQLServer, PHP + MySQL. Sea cual sea la combinacin utilizada, en un desarrollo web
moderno siempre intervendr HTML, CSS y JavaScript.
En resumen, JavaScript es un lenguaje de programacin del lado del cliente cuyos aspectos bsicos
deben ser conocidos por los programadores web. En la prctica, muchas veces se entremezcla el cdigo
de programacin del lado del servidor o del lado del cliente con el cdigo HTML y cdigo CSS, de ah
aprenderaprogramar.com, 2006-2029
Concepto de JavaScript. Lenguaje de programacin ejecucin cliente.
que coloquialmente se hable de programacin web para referirse a todo este conjunto, aunque
formalmente ni HTML ni CSS son lenguajes de programacin.
Fjate que estamos tratando de dejar claro qu es y para qu sirve JavaScript antes de empezar a
estudiar este lenguaje porque si tenemos los conceptos claros nos ser mucho ms sencillo el
aprendizaje, ahorraremos tiempo y cometeremos menos errores.
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.
aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.
DIFERENCIAS ENTRE
JAVASCRIPT Y JAVA, HTML,
CSS, PHP, ETC. FRONTERA
APRENDERAPROGRAMAR.COM
ENTRE LENGUAJES EN
DESARROLLOS WEB
(CU01105E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTMLL, CSS, PHP, etc.
DIFERENC
CIAS ENTRE JAVA
J Y JAVA
ASCRIPT
Como hem mos visto, JaavaScript es un lenguaje de program macin para desarrollos
d w
web que norrmalmente
usaremoss del lado del cliente (es decir, que see ejecuta en el computador personaal del usuario
o). Muchas
veces noss han planteeado la preggunta: es JaavaScript y Java lo mismmo? Por qu tienen nombres tan
similares??
Java y JavvaScript son dos lenguajees de prograamacin con un nombre parecido y algunas simiilitudes en
algunos aspectos,
a p
pero que enn el fondo son dos lenguajes
l coompletamen nte indepen ndientes y
completamente distin ntos. Una persona puedee saber much ner ni idea de Java, y
ho de JavaSccript y no ten
al revs.
Si son disttintos, por qu tienen un
u nombre tant parecido? La causa de esta similitud en los nombres se
debe a el origen de JavaScript. In f desarrollado por la empresa
nicialmente fue e Nettscape en 19 995 con el
nombre ded LiveScriptt. Posteriorm mente pas a llamarse JavaScript qu uizs tratand
do de aprovvechar que
Java era un
u lenguaje de d programaacin de gran n popularidaad y que un nombre
n simiilar poda haacer que el
nuevo lennguaje fuera atractivo. Pero
P salvandoo algunas sim
militudes, am
mbos lenguaajes son bien n distintos.
Su princippal parecido o podemos decir que es e el nombre e y algunoss aspectos d de sintaxis, yay que su
finalidad y filosofa so
on muy distin
ntos.
A continuacin indicamos algunass similitudes y diferenciass entre uno y otro lenguaaje:
Java JavaScrip
pt
Es un 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.
aprenderraprogramar.co
om, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.
Java JavaScript
Su sintaxis est inspirada en la sintaxis del lenguaje de Su sintaxis tambin est inspirada en la sintaxis del
programacin C lenguaje de programacin C
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.
En este curso nos centramos en el estudio de JavaScript en el contexto de los desarrollos web. Si ests
interesado en un curso de Java puedes acceder a l en esta direccin web:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=68&Itemid=188
A veces nos encontraremos que se puede lograr un mismo efecto usando HTML, usando CSS usando
un lenguaje de programacin. Por qu tantas formas para hacer una misma cosa? Dnde est la
frontera entre cada lenguaje?
Esta pregunta no es de fcil respuesta. Vamos a ver con un ejemplo lo que puede ocurrir para algo tan
sencillo como aplicar algunos efectos a un texto. No obstante, ten en cuenta que este ejemplo relativo
a texto podra aplicarse a otros conceptos como bordes, mrgenes, animaciones, etc.
El lenguaje HTML permite aplicar algunos efectos visuales al texto. Escribe o copia este cdigo y
gurdalo en un archivo de nombre ejemplo1.html.
aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.
Con Javascript podemos hacer algo parecido. Escribe o copia este cdigo y gurdalo en un archivo de
nombre ejemplo2.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:
aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.
Haz doble click sobre cada uno de los archivos para visualizar el resultado en un navegador. El resultado
que obtenemos es algo similar a esto:
El nico cdigo que debemos entender por el momento es el correspondiente al ejemplo 1 y al ejemplo
3, ya que debemos conocer HTML y CSS para seguir este curso. El cdigo del ejemplo 2 no te preocupes
si no lo entiendes ya que el objetivo ahora no es comprender ese cdigo, sino simplemente ver cmo
podemos alcanzar un mismo objetivo usando distintos lenguajes como HTML, Javascript CSS.
Adems si nos fijamos, el cdigo Javascript y el cdigo CSS est dentro de un documento HTML (aunque
podran estar en archivos separados).
Todo esto nos puede llevar a preguntarnos: Por qu se entremezclan unos lenguajes con otros? La
respuesta sera histrica y tcnica: HTML se convirti en la forma de crear pginas web, pero tena
muchas limitaciones. En un momento dado, se consider que entremezclar (embeber) lenguajes entre
s poda ser una buena opcin tcnica para resolver problemas o hacer cosas que no era posible o
conveniente hacer con HTML. As, podemos embeber Javascript en HTML embeber CSS en HTML, o
embeber HTML en PHP, etc. Por ello a veces ocurre que no hay una frontera clara entre lenguajes de
programacin, HTML y CSS. Esto, que puede resultar un tanto confuso inicialmente, se va convirtiendo
en comprensible a medida que se trabaja y se aprende ms sobre estos lenguajes.
Por otro lado, por qu tantas vas distintas para hacer algo cuando quizs que solo hubiera una
manera de poner el texto en negrita, o una sola manera de poner un color de fuente, sera ms simple?
Para esto podemos citar varios motivos:
a) Motivos histricos: a veces las cosas se empezaron a hacer de una manera y luego se pens
que era mejor hacerlas de otra. Sin embargo, para evitar que las pginas web existentes
dejaran de funcionar, se siguieron permitiendo formas de hacer las cosas anticuadas. Por
ejemplo la etiqueta <strike> </strike> en HTML se considera deprecated (obsoleta, de uso no
recomendado) en HTML 4.01 y no est admitida en HTML 5. Sin embargo, se sigue usando.
Muchas formas de hacer las cosas se admiten aunque no estn recomendadas.
aprenderaprogramar.com, 2006-2029
Diferencias entre JavaScript, Java, HTML, CSS, PHP, etc.
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.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
JavaScript en
e CMS como Jo
oomla, WordPress, Drupal
JAVASCRIIPT EN APLIC
CACIONES WEB
W
Ya hemos dicho quee JavaScript es un lengguaje de prrogramacin que nos p permite creaar efectos
dinmicoss y giles del
d lado dell cliente. Un na de las aplicaciones
a ms ampliaamente exte endida de
JavaScriptt est en dottar de dinam mismo y efecctos a las aplicaciones weeb, dentro d
de las que de
estacan los
Gestores de Contenid dos o CMS (C Content Man nagement Syystems). Un CMSC ware que se instala en
es softw
el servido
or y sirve paraa publicar co
ontenidos en
n una pgina web fcilmeente.
El conceppto de aplicacin web (programa que q se alojaa en un servvidor remotto o hostingg y al que
accedemo os a travs de
d internet) es muy am mplio, de heccho con el paso
p de los aos se ha hecho tan
amplio co
omo los proggramas de orrdenador o lasl actividades que realizza el ser hum
mano. Las ap
plicaciones
web se han
h populariizado en loss ltimos a os gracias a que buen na parte de estas aplicaaciones se
comenzarron a distribuir y utilizar de forma gratuita, con una comunidad de usuaarios y desarrrolladores
de softwaare en torno a ellas.
Muchas de d estas apliicaciones sirrven para qu
ue personas que no tiennen conocimmientos de in nformtica
gestionenn pginas weeb como tiendas de comeercio electrnico, foros, portales de ccontenidos, peridicos
digitales, etc.
Las aplicaciones web se
s podran clasificar de varias
v manerras. De hechoo es difcil reealizar una clasificacin
debido a que los campos en que ses utilizan las distintas aplicaciones muchas
m vecees se solapan n. Vamos a
hacer unaa clasificaci
n comn, que
q es basndonos en el tipo de pgina p web para el que e son ms
habitualmmente usadoss:
CLASIFICA
ACIN EJEMPLOS DESC
CRIPCIN
aprenderraprogramar.co
om, 2006-2029
JavaScript en CMS como Joomla, WordPress, Drupal
Vamos a centrarnos ahora en lo que permite mostrar una aplicacin web a los usuarios. Por ejemplo,
para un diario digital diremos que existe una parte denominada BackEnd donde escriben los articulistas
y otra parte denominada FrontEnd que es la pgina web en s del diario. Aplicaciones web que pueden
servir para este propsito son Joomla, Drupal o WordPress.
Tanto en el backEnd de las aplicaciones como en el FrontEnd de estas, se utiliza JavaScript. En el
backEnd no se trata tanto de crear efectos visuales atractivos, sino de dotar a la pgina de
administracin de agilidad y rapidez. En el FrontEnd el principal objetivo ser crear efectos visuales
atractivos y hacer que la pgina funcione de forma correcta y rpida.
Para conseguir webs tiles y rpidas estas herramientas incorporan cdigo JavaScript avanzado
mediante el que se realizan distintos procesos o se crean distintos efectos. La aplicacin web suele
contar con una parte para la gestin de contenidos mientras que otra parte denominada plantilla,
template, theme, skin, etc. se encarga de controlar el aspecto.
El template o theme acta como una piel sobre los contenidos y su principal herramienta es CSS, pero
tambin suele estar controlado por un lenguaje de programacin del lado del servidor como PHP y en
algunos aspectos por un lenguaje del lado del cliente como JavaScript, adems de tener un esqueleto
de HTML.
aprenderaprogramar.com, 2006-2029
JavaScript en CMS como Joomla, WordPress, Drupal
Fjate en estas imgenes, que corresponden a themes o plantillas del gestor de contenidos Drupal.
Fjate en las imgenes, en los mens, en los iconos. Vamos a comentar distintos efectos que se pueden
conseguir con JavaScript:
a) Es frecuente que una imagen principal en la cabecera de una pgina web vaya rotando o
alternndose con otras imgenes (a veces con un texto superpuesto). Para hacer esto el usuario
no tiene que recargar la pgina, es un proceso que se puede ejecutar del lado del cliente
usando JavaScript.
aprenderaprogramar.com, 2006-2029
JavaScript en CMS como Joomla, WordPress, Drupal
Vemos cmo usando JavaScript se pueden conseguir muy distintos efectos y procesos. Esto ha
permitido el xito de gestores de contenidos como Joomla, Drupal o WordPress, con los que se puede
crear desde una pgina dedicada al comercio electrnico hasta una web de un restaurante o un
peridico digital. Gracias a JavaScript estas pginas pueden tener muchos contenidos y ser rpidas a la
hora de realizar procesos, desplegar mens, rotar imgenes, etc.
JavaScript interviene en la programacin de distintos complementos para las aplicaciones web.
Existen muchos estudios de diseo y programacin donde se trabaja en la creacin de templates o
themes prediseados. Hay muchos de distribucin gratuita, pero la mayora de los templates o themes
de calidad son de pago (cosa lgica, ya que tienen un gran trabajo detrs). Prcticamente todos estos
templates usan, entre otros lenguajes, JavaScript.
La mayora de las aplicaciones web tienen disponibles extensiones (que reciben distintos nombres
como mdulos, componentes, etc.) que permiten incorporar nuevas funcionalidades. Por ejemplo si
queremos incorporar una calculadora a nuestra aplicacin web Joomla, Drupal o WordPress
posiblemente ya exista un mdulo de descarga gratuita o de pago que permita incorporar la calculadora
sin tener que programarla partiendo de cero. Estas extensiones usan, entre otros lenguajes, JavaScript.
Hemos querido con esta aproximacin al uso de JavaScript en aplicaciones web remarcar la importancia
que ha adquirido esta tcnica en los desarrollos web. No vamos a entrar de momento en cuestiones
relacionadas con aplicaciones web o gestores de contenidos, sino a centrarnos en cuestiones bsicas de
JavaScript. La realidad en torno a las aplicaciones web es bastante compleja, ya que actualmente se
tiende a trabajar con muchos lenguajes, frameworks y herramientas de carcter avanzado. Esto ya
supone el uso de herramientas muy especficas, y tambin suele suponer la participacin de distintos
especialistas (diseadores, maquetadores, expertos en CSS, programadores expertos en bases de datos,
expertos en programacin del lado del servidor, expertos en programacin del lado del cliente, etc.)
para la creacin de las aplicaciones web.
Lo primero es lo primero, as que empecemos con los fundamentos de JavaScript.
aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTML y CSS bsico.
EMPEZAR A USAR
JAVASCRIPT A PARTIR DE
HTML Y CSS BSICOS
APRENDERAPROGRAMAR.COM
(MEN, LISTAS, LINKS,
FORMULARIOS, ETC.)
(CU01107E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTM
ML y CSS bsico.
HTML Y CSS
C DE PARTIIDA
aprenderraprogramar.co
om, 2006-2029
JavaScript a partir de HTML y CSS bsico.
aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTML y CSS bsico.
Crea un archivo CSS (cuyo nombre debe ser estilosA.css) con un editor de texto como Notepad++ o
similar con el siguiente contenido:
h1 {color: blue;}
a {text-decoration: none;}
El cdigo anterior es HTML y CSS y lo usaremos a lo largo del curso para poner diferentes ejemplos, por
lo que lo denominaremos "cdigo base HTML del curso" o cdigo base CSS del curso. Para seguir este
curso debes ser capaz de comprender todo el cdigo HTML y CSS que hemos usado, su significado y
sintaxis. Si no comprendes el cdigo anterior no continues avanzando, dirgete a la web
aprenderaprogramar.com y en la seccin cursos busca los cursos Curso bsico del programador web:
HTML desde cero y Curso bsico del programador web: CSS desde cero y realzalos. Si no lo haces as
no entenders o no le sacars todo el partido posible a este curso.
Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla
alguna imagen puedes cambiar las rutas y poner otra imagen que t desees):
aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTML y CSS bsico.
En este documento tenemos varios elementos como etiquetas de ttulo h1 y h2, links, listas con
elementos dentro de las listas, imgenes, formularios, botones, texto, etc. Todo ello nos va a servir para
usar JavaScript y ver las posibilidades que nos ofrece JavaScript para crear efectos y procesos dinmicos
en nuestras pginas web. En este curso nos vamos a centrar en tratar de aprender los aspectos ms
importantes de JavaScript y la lgica de JavaScript. El objetivo ser saber hacer un buen diseo de
cdigo JavaScript, un buen uso de JavaScript y comprender lo que hacemos. Por el contrario, no vamos
a tratar de aprender o conocer todas las propiedades, posibilidades o instrucciones de JavaScript ya que
si logramos comprender cmo funciona y su lgica, nos bastar con realizar bsquedas en internet para
encontrar aquella propiedad o sintaxis que podamos necesitar en un momento dado. Aprende a
pescar, no te conformes con que te den peces.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
Diferentes respuestas
r de navegadores
n a JavaScript.
INCLUIR JAVASCRIPT
J EN WEBS. RESPUESTA
R D LOS NAVEEGADORES.
DE
Una pginna web podeemos verla comoc estructura o armazn, ms esstilos o apariiencia, ms acciones
a o
respuestaas dinmicass. En esta visin HTML es e la estructtura, CSS loss estilos y JaavaScript la respuesta
dinmica.. El cdigo JavaScript see incluye en las pginas web de form ma similar a como se haace con el
cdigo CSSS: puede ir especificado
e o en un aparttado especffico dentro del
d cdigo HTTML, en lne ea, o en un
archivo exxterno.
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>
aprenderraprogramar.co
om, 2006-2029
Diferentes respuestas de navegadores a JavaScript.
Ahora vamos a ver la primera forma de introducir JavaScript: hacerlo en lnea. Modifica el cdigo y
comprueba el resultado de hacer click sobre la imagen despus de introducir esta modificacin:
<img onclick="alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')"
src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
Interpretamos lo que hace este cdigo: le indica al navegador que cuando sobre el elemento img se
produzca un click (evento denominado onclick), se muestre un mensaje de alerta al usuario cuyo
contenido ser Bienvenido al curso de JavaScript de aprenderaprogramar.com.
Una vez hacemos click sobre la imagen obtendremos un resultado. Qu resultado? Aqu mostramos
algunas posibilidades:
aprenderaprogramar.com, 2006-2029
Diferentes respuestas de navegadores a JavaScript.
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).
Nos gustara que al incluir un cdigo obtuviramos siempre la misma respuesta, pero la realidad es que
no siempre se obtiene la misma respuesta. El navegador que utilicemos (Firefox, Internet Explorer,
Chrome, Safari, Opera, etc.) puede influir en los resultados que obtengamos. Y tambin puede influir la
aprenderaprogramar.com, 2006-2029
Diferentes respuestas de navegadores a JavaScript.
configuracin de seguridad del navegador (que impida la ejecucin de ciertas cosas para evitar que un
virus, un hacker, o un programa indeseado pueda generarnos algn perjuicio).
Tambin puede influir el sistema operativo (Windows, Macintosh, Linux) e incluso qu tipo de
dispositivo sea el que estemos usando: un computador tradicional (pc o porttil), un smartphone, una
tablet, una consola de videojuegos, una smartv, etc.
En este curso vamos a centrarnos en aprender JavaScript bsico, aplicable al 99 % de los usuarios, el 99
% de los navegadores y el 99 % de los dispositivos. No obstante, acostmbrate a que siempre pueden
existir pequeas diferencias entre navegadores o a que en algn dispositivo concreto no se obtengan
los resultados deseados. Para este curso consideramos que usaremos un computador tradicional (pc
o porttil), con un navegador como Firefox, Internet Explorer, Chrome, Opera o Safari, y con la
configuracin de seguridad habitual (99 % de los usuarios).
No podemos (y no tiene sentido) estar considerando todas las posibles configuraciones de seguridad,
todos los posibles dispositivos, todos los posibles navegadores, etc. para tratar de tener una pgina web
que funcione correctamente en el 100 % de los dispositivos. Nos resignamos a que nuestra web
funcione correctamente en el 99 %. Si tienes algn problema para visualizar los resultados y ejecutar el
cdigo con el que iremos trabajando a lo largo del curso te recomendamos que escribas una consulta
en los foros de aprenderaprogramar.com (http://aprenderaprogramar.com/foros) para obtener ayuda.
A medida que vayamos avanzando con el curso iremos comentando algunos aspectos concretos
relativos a diferencias entre navegadores, cuando consideremos que puede resultar relevante.
aprenderaprogramar.com, 2006-2029
JavaScript interno delimitado por etiquetas.
JAVASCRIPT INTERNO
<SCRIPT TYPE=
"TEXT/JAVASCRIPT">.
APRENDERAPROGRAMAR.COM
INTRPRETE JAVASCRIPT .
FUNCIN EJEMPLO
BSICO. (CU01109E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
JavaScript interno delimitaado por etique
etas.
INCLUIR JAVASCRIPT
J EN WEBS.
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.
aprenderraprogramar.co
om, 2006-2029
JavaScript interno delimitado por etiquetas.
Los motivos por los que se introdujo la especificacin type son varios:
a) Existan (y existen) distintos lenguajes de script, es decir, adems de javascript nos podemos
encontrar otros lenguajes. El uso de type se concibi para indicarle al navegador qu lenguaje
era el que usaba el script. Por ejemplo type="text/vbscript" indicara lenguaje VBscript,
type="text/tcl" indicara lenguaje TCL, etc.
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.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
function mostrarMensaje2() {
alert('Ha hecho click sobre el prrafo inferior');
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es un lenguaje utilizado para dotar
de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
JavaScript interno delimitado por etiquetas.
Visualiza la pgina. El resultado esperado ser que al hacer click sobre la imagen se muestre un mensaje
(el mensaje 1), mientras que al hacer click sobre el prrafo inferior se mostrar otro mensaje (el
mensaje 2). Aqu vemos cmo hemos definido un script. Nos podemos hacer algunas preguntas como:
Puede escribirse un script en otro lugar distinto del comprendido entre las etiquetas <head>
</head>?
La respuesta es que s. La mayora de los navegadores aceptarn que el script est en casi cualquier
parte. Prueba a cambiar el cdigo y ponerlo en distintos lugares y comprueba los resultados. Pero
poniendo el cdigo fuera de <head> </head> podemos tener problemas con algunos navegadores, o
podemos tener problemas en algunos casos en que el cdigo deba guardar cierto orden. Para no tener
problemas pondremos siempre los scripts dentro de las etiquetas <head> </head>.
<script type="text/javascript">
function mostrarMensaje1() {
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
</script>
<script type="text/javascript">
function mostrarMensaje2() {
alert('Ha hecho click sobre el prrafo inferior');
}
</script>
Aqu en vez de un script con dos funciones, tenemos dos scripts cada uno de ellos con una funcin.
Cul es mejor opcin, un script o dos scripts? Recordar que JavaScript es un cdigo que es
interpretado por el navegador (en concreto por una parte del navegador a la que se denomina
precisamente intrprete JavaScript). Al escribir dos scripts estamos obligando al intrprete a leer ms
lneas, y considerar dos unidades de scripts en lugar de una. Esto ralentiza la carga de la pgina web y
su ejecucin, por tanto normalmente incluiremos el cdigo dentro de un nico script, excepto cuando
justificadamente necesitemos o sea razonable hacerlo de otra manera. En pginas web avanzadas es
posible que encuentres muchos scripts que salen de muchos sitios diferentes.
aprenderaprogramar.com, 2006-2029
JavaScript externo en archivos de extensin js.
ARCHIVOS DE EXTENSIN
JS. INCLUIR JAVASCRIPT
EN WEBS
APRENDERAPROGRAMAR.COM
REFERENCIANDO UN
ARCHIVO EXTERNO CON
SRC (CU01110E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
aprenderaprogramar.com, 2006-2029
JavaScript externo
e en arch
hivos de extenssin js.
JAVASCRIIPT EN ARCH
HIVOS JS
JAVASCRIIPT EXTERNO
O EN ARCHIV
VOS JS
<head>
<script type="text/ja
t avascript" src=="rutaDelArch
hivo1.js"></script>
<script type="text/ja
t hivo2.js"></script>
avascript" src=="rutaDelArch
<script type="text/ja
t hivo3.js"></script>
avascript" src=="rutaDelArch
</head>>
En generaal tener el c
digo JavaScrript en archivvos independdientes ser lo ms prcctico desde el
e punto de
vista del mantenimiento de un sitio web. Tendremos lass funciones agrupadas
a y ordenadas, pudiendo
ser invoccadas desdee cualquier parte de nuestra pgina web. Esto nos ahorrar tiiempo de
mantenim miento: si tenemos 200 documentoss html, no te endremos que hacer 20 00 modificaciones sino
nicamen nte modificarr el archivo o los archivos con las fun
nciones JavaSScript que ussamos en tod
do nuestro
sitio web..
aprenderraprogramar.co
om, 2006-2029
JavaScript externo en archivos de extensin js.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript" src="functions.js"></script>
</head>
<body onload="alert('Completada la carga de la pgina')">
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es un lenguaje utilizado para dotar
de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Crea un archivo de nombre functions.js (cralo con un editor de textos como el bloc de notas,
Notepad++ o cualquier otro) y escribe el siguiente cdigo:
function mostrarMensaje1(){
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com');
}
function mostrarMensaje2(){
alert('Ha hecho click sobre el prrafo inferior');
}
1) Nada ms cargarse la pgina aparecer una ventana informativa con el texto Completada la carga
de la pgina. Esto se debe a que hemos incluido JavaScript en lnea asociado a la etiqueta body. El
evento onload se produce cuando el elemento body se ha cargado completamente en el navegador. En
ese momento se dispara el cdigo JavaScript asociado.
2) Al hacer click sobre la imagen se muestra un mensaje (el mensaje 1), debido a que hemos indicado
que cuando se produzca el evento onclick sobre la imagen, debe ejecutarse la funcin
mostrarMensaje1(). Esta funcin no se encuentra dentro del documento html, pero el navegador ha
incorporado el cdigo JavaScript externo porque as se lo hemos indicado al indicar src =
functions.php. Por tanto el cdigo externo funciona como si fuera cdigo incluido en el propio
documento html.
3) Al hacer click sobre el prrafo inferior se mostrar otro mensaje (el mensaje 2), debido a que hemos
indicado que cuando se produzca el evento onclick sobre el segundo prrafo debe ejecutarse la funcin
mostrarMensaje2().
aprenderaprogramar.com, 2006-2029
JavaScript externo en archivos de extensin js.
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.
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.
aprenderaprogramar.com, 2006-2029
JavaScript externo en archivos de extensin js.
siempre hay mentes perversas que buscan fallos de seguridad en los sistemas e intentan hacer cosas
de este tipo. Es muy difcil, pero a veces lo consiguen (y seguidamente son perseguidos por la polica).
Es posible ejecutar cdigo JavaScript sin estar asociado a una respuesta a un evento?
S, escribe este cdigo en un archivo html y visualiza el resultado en tu navegador.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
</head>
<body>
<div>
<p>Hola</p>
<script type="text/javascript">
alert('Estamos cargando los contenidos de la web...');
</script>
<p>Aqu estamos</p>
</div>
</body>
</html>
El resultado esperado es que se cargue en pantalla el texto Hola. A continuacin se ejecuta el cdigo
JavaScript que al no estar incluido dentro de una funcin se ejecuta directamente. El resultado es que
se detiene la carga de la pgina web y aparece una ventana con el mensaje Estamos cargando los
contenidos de la web. Una vez pulsamos aceptar, se terminar la carga de la pgina y aparecer el
texto Aqu estamos. En este caso hemos hecho cosas extraas (slo para ver un ejemplo de cosas
que te puedes encontrar!): hemos incluido un script fuera de las etiquetas <head> </head> y hemos
dado lugar a la ejecucin de un cdigo JavaScript secuencialmente con el progreso de la carga del html,
en lugar de dar lugar a su ejecucin en respuesta a un evento (que sera lo ms normal).
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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:
aprenderraprogramar.co
om, 2006-2029
Comentarios JavaScript. Insercin automtica de punto y coma final.
Los comentarios son parte del cdigo JavaScript. El navegador los recibe y los detecta pero los ignora al
no constituir instrucciones que hayan de ejecutarse. Sin embargo, los comentarios pueden ser
visualizados si accedemos al cdigo fuente de la pgina web (cosa que puede hacer cualquier usuario).
Por lo tanto en los comentarios no debe figurar nada que pueda considerarse indebido (como este
cdigo lo he copiado a mi compaero de trabajo sin permiso, Para acceder a la base de datos usar
como datos usuario: cesar y contrasea: aprenderaprogramar.com).
Los comentarios deben usarse para describir aspectos importantes. Por ejemplo, contenido de un
archivo, cometido de una funcin, versin, licencia, autor, copyright, aspectos que permitan una mejor
comprensin del cdigo, avisos importantes, etc.
Obviamente los comentarios JavaScript tienen que encontrarse dentro de cdigo JavaScript, no pueden
insertarse en cualquier parte. Por tanto debern estar dentro de las etiquetas <script> </script> o
bien dentro de un archivo js, no pueden encontrarse en el cdigo HTML.
Los comentarios multilnea no se pueden anidar (es decir, no puede haber un comentario multilnea
dentro de otro comentario multilnea). Los comentarios multilnea pueden dar lugar a errores cuando
se mezclan con expresiones regulares (hablaremos de expresiones regulares ms adelante).
En general las sentencias JavaScript deben terminar con un punto y coma que delimita el final de una
instruccin. No obstante, en caso de que se olvide insertar el punto y coma delimitador, el intrprete
JavaScript lo insertar automticamente siempre que le sea posible, facilitando que el cdigo se
ejecute.
En el cdigo anterior, elimina los punto y coma al final se las sentencias JavaScript:
function mostrarMensaje1() {
alert('Bienvenido al curso JavaScript de aprenderaprogramar.com')
}
function mostrarMensaje2() {
alert('Ha hecho click sobre el prrafo inferior')
}
Visualiza la pgina web en tu navegador y comprueba que JavaScript sigue funcionando. Por qu?
Porque el intrprete del navegador, al encontrar que faltan los ; de cierre, los ha introducido
automticamente para permitir que se ejecute el cdigo. Aunque esto puede parecer una facilidad,
recomendamos siempre el cierre de toda instruccin mediante punto y coma. Esto evitar errores o
que ocurran cosas indeseadas.
aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.
TIPOS DE DATOS EN
JAVASCRIPT. TIPOS
PRIMITIVOS Y OBJETO.
APRENDERAPROGRAMAR.COM
SIGNIFICADO DE
UNDEFINED, NULL, NAN
(CU01112E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Los tipos de datos JavvaScript se dividen en doss grupos: tipos primitivos y tipos objeeto.
Los tipos primitivos in
ncluyen: cadeenas de texto (String), vaariables booleanas cuyo valor puede ser true o
false (Booolean) y n meros (Num mber). Adem ms hay doss tipos prim mitivos especciales que son
s Null y
Undefined. Es en los tipos
t primitivvos donde vaamos a centrrarnos por el momento.
Los tipos objeto son datos interrrelacionados, no ordenados, donde existe un no ombre de ob bjeto y un
conjunto de propiedaades que tieenen un vallor. Un obje eto puede seer creado especficamennte por el
programaador. No obsstante, se dicce que todo aquello que no es un tip
po primitivo es un objeto
o y en este
sentido taambin es un
n objeto, porr ejemplo, un
na funcin. Lo
L estudiarem
mos ms adeelante.
Existen algunos obje etos especiaales con un comportam miento que estudiaremo os por sepaarado ms
adelante: el objeto global,
g el o
objeto protootipo, los arrrays, las fun
nciones, las cclases definiidas por el
programaador, las classes predefin
nidas JavaScrript (como laa clase Datee para maneejo de fechaas, la clase
RegExp para manejo de expresiones regularees y bsqued da de patron nes en textoo, y la clase Error para
almacenar informacin relacionad da con los errores) y otro
os.
Los primeeros lenguajes de progrramacin no o usaban objjetos, solo variables.
v Un
na variable podramos
p
decir que es un espaccio de la me
emoria del ordenador a lal que asignaamos un con ntenido que puede ser
bsicamente un valorr numrico (sslo nmero o carcter o cadena de
os, con su vaalor de clculo) o de tipo
numrico que constar slo de texto o de texto mezclado
caracteres (valor alfan m con
n nmeros).
Como ejeemplo podem mos definir una variablee a que con
ntenga 32 y esto lo escribimos com mo a = 32.
Posteriormmente podemos cambiar el valor dee a y hacer a = 78. O hacer a equivalente al vallor de otra
variable b
as: a = b..
Dado quee antes hemo os dicho que un objeto taambin ocup
pa un espacio
o de memoria: en qu ses parecen
y en qu se diferenccia un objetoo de una vaariable? Connsideraremoss que las vaariables son entidades
elementales: un nm mero, un carcter, un valor
v verdad o mientras que los ob
dero o falso bjetos son
entidadess complejas que pueden estar formaadas por mucha informacin. Pero aambas cosas ocupan lo
mismo: unn espacio dee memoria (q
que puede seer ms o men nos grande).
aprenderraprogramar.co
om, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.
Date (fechas)
TIPOS DE DATOS EN Tipos predefinidos de RegExp (expresiones regulares)
JAVASCRIPT JavaScript
Error (datos de error)
Objeto global
Objetos Objeto prototipo
especiales
Otros
No te preocupes ahora por conocer todos los posibles tipos de datos de JavaScript ni su significado. Los
iremos estudiando y trabajando con ellos poco a poco.
Frente a otros lenguajes fuertemente tipados (las variables tienen un tipo declarado y no pueden
cambiar el tipo de contenido que almacenan) como Java, JavaScript es un un lenguaje dbilmente
tipado: las variables pueden no ser de un tipo especfico y cambiar el tipo de contenido que almacenan.
aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.
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 se usa nicamente para declarar una variable. No puede usarse para otra cosa. Una vez declarada la
variable, ya se har uso de ella sin precederla de la palabra clave var. Si se declara una variable estando
ya declarada, JavaScript intentar continuar (y posiblemente lo consiga), pero esto puede considerarse
una mala prctica excepto si se sabe muy bien lo que se est haciendo.
aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
alert('La variable precio vale: ' + precio);
dato1 = null;
alert('La variable dato1 vale: ' + dato1);
var precio = 22.55;
precio = precio + 10;
alert('La variable precio vale: ' + precio);
alert('El doble de precio es: ' + (precio*2));
cantidad = 10;
alert('El importe resultante de multiplicar precio por cantidad es: ' + (precio*cantidad));
precio = 'muy caro';
alert('La variable precio vale ahora: ' + precio);
alert('El doble de precio es ahora: ' + (precio*2));
var precio = 99.55
alert('La variable precio ha sido declarada por segunda vez y ahora vale: ' + precio);
var $descuento_aplicado = 0.55;
alert('La variable $descuento_aplicado vale : ' + $descuento_aplicado);
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es
un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente:
La variable precio vale: undefined (Aceptar)
La variable dato1 vale: null (Aceptar)
La variable precio vale: 32.55 (Aceptar)
El doble de precio es: 65.1 (Aceptar)
El importe resultante de multiplicar precio por cantidad es: 325.5 (Aceptar)
La variable precio vale ahora: muy caro (Aceptar)
El doble de precio es ahora: NaN (Aceptar)
La variable precio ha sido declarada por segunda vez y ahora vale: 99.55 (Aceptar)
La variable $descuento_aplicado vale: 0.55 (Aceptar)
aprenderaprogramar.com, 2006-2029
Tipos de datos y tipos de variables en JavaScript. Declaracin.
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?
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
aprenderraprogramar.co
om, 2006-2029
Tipos de variables en JavaScript. Numricas (Number).
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var bacterias = 3.55; var texto = 'bacterias en la probeta'; var numeroInfinito = Infinity;
alert('La variable bacterias vale: ' + bacterias);
bacterias = 3.55E5; alert('La variable bacterias vale (multiplicamos por 100000): ' + bacterias);
bacterias = 3.55E-5; alert('La variable bacterias ahora es un nmero muy pequeo: ' + bacterias);
alert('La variable bacterias ahora es (operacin sin sentido): ' + bacterias*texto);
bacterias = 3.55e100000000000000000; alert('La variable bacterias ahora es demasiado grande: ' +
bacterias);
bacterias = 3.55E-100000000000000000; alert('La variable bacterias ahora es demasiado pequea: ' +
bacterias);
alert('Un numero positivo dividido entre cero (indeterminacin matemtica) devuelve: ' + (4/0));
alert('Un numero negativo dividido entre cero (indeterminacin matemtica) devuelve: ' + (-4/0));
alert('Cero dividido entre cero devuelve: ' + (0/0));
alert('La variable numeroInfinito vale: ' + numeroInfinito);
var diezCentimos = .1; var veinteCentimos = .2; var treintaCentimos = .3;
alert('Esperamos 0.1 y lo obtenemos: ' + (veinteCentimos-diezCentimos));
alert('Esperamos 0.1 y no lo obtenemos: ' + (treintaCentimos-veinteCentimos));
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aqu otro prrafo de texto. JavaScript es
un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente:
La variable bacterias vale: 3.55 (Aceptar)
La variable bacterias vale (multiplicamos por 100000): 355000 (Aceptar)
La variable bacterias ahora es un nmero muy pequeo: 0.0000355 (Aceptar)
La variable bacterias ahora es (operacin sin sentido): NaN (Aceptar)
La variable bacterias ahora es demasiado grande: Infinity
La variable bacterias ahora es demasiado pequea: 0
Un numero positivo dividido entre cero (indeterminacin matemtica) devuelve: Infinity
Un numero negativo dividido entre cero (indeterminacin matemtica) devuelve: -Infinity
Cero dividido entre cero devuelve: NaN
La variable numeroInfinito vale: Infinity
Esperamos 0.1 y lo obtenemos: 0.1
Esperamos 0.1 y no lo obtenemos: 0.09999999999999998
aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. Numricas (Number).
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.
aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. String (Texto).
VARIABLES STRING
JAVASCRIPT. DEBEN
USARSE COMILLAS
APRENDERAPROGRAMAR.COM
SIMPLES O DOBLES?
CARACTERES DE ESCAPE
\N \T.LENGTH (CU01114E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
CARACTERES Y CADEN
NAS DE TEXTTO EN JAVASSCRIPT
VARIABLEES STRING EN
N JAVASCRIP
PT
aprenderraprogramar.co
om, 2006-2029
Tipos de variables en JavaScript. String (Texto).
\\ 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 \\.
En general cada carcter suma una unidad a la propiedad length del texto (aunque algunos caracteres
extraos suman 2 unidades por representarse concatenando dos cdigos Unicode, pero esto es algo a
lo que no le prestaremos atencin porque en la prctica casi nunca tendremos que trabajar con este
tipo de caracteres extraos).
aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. String (Texto).
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var textoUsuario;
var cadenaTexto;
cadenaTexto = '\xA9 aprenderaprogramar.com' ; alert ('cadena texto vale ' + cadenaTexto);
cadenaTexto = '"aprenderaprogramar.com"' ; alert ('cadena texto es ' + cadenaTexto);
cadenaTexto = "Letra A: \u0041, o con tilde: \u00F3 sigue Caracter \\ igualmente \u005C seguido de tres
saltos de lnea \n\n\n Prosigue comilla simple \' y doble \"\n\n\n"
alert ('cadena texto ahora contiene ' + cadenaTexto);
textoUsuario = prompt("Introduzca un texto por favor:");
alert ("El texto introducido fue " + textoUsuario + " con longitud de " + textoUsuario.length + " caracteres");
alert ("La longitud de extraordinario es de " + ("extraordinario".length) + " caracteres");
alert ("La longitud de la cadena vaca es de " + ("".length) + " caracteres");
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
cadena texto vale aprenderaprogramar.com
cadena texto es "aprenderaprogramar.com"
cadena texto ahora contiene Letra A: A, o con tilde: sigue Caracter \ igualmente \ seguido de tres
saltos de lnea
aprenderaprogramar.com, 2006-2029
Tipos de variables en JavaScript. String (Texto).
EJERCICIO
Consulta en internet cul es el cdigo unicode que corresponde al carcter (smbolo matemtico Pi) y
usando el cdigo muestra por pantalla el mensaje El nmero vale 3.1416.
aprenderaprogramar.com, 2006-2029
Declaracin de variables JavaScript. Variables booleanas.
DECLARAR VARIABLES
JAVASCRIPT E
INICIALIZARLAS.
APRENDERAPROGRAMAR.COM
VARIABLES BOOLEANAS Y
VALORES TRUE Y FALSE.
TOSTRING() (CU01115E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Por ejemp
plo podemoss declarar:
var cochees;
var motoss;
var treness;
O bien hacerlo en unaa sola lnea de
d esta maneera: var coches, motos, trrenes;
Tambin se
s permite laa inicializaci
n de variablles en lnea. Por ejemplo
o podramos escribir:
var cochees = 32, moto
os = 9, treness = 12;
De este modo
m quedan
n las variablees inicializadaas en el mism
mo momento
o de declaraccin.
Aunque laa declaracinn de variablees no es obliggatoria, se re
ecomienda siempre declaarar las variaables. Si se
trata de hacer
h uso dee un nombre de variable que no existte para asign nrselo a una variable s existente,
se producce un error y el cdigo JavaScript dejaa de funcionar. Ejemplo:
function mostrarMen
m saje1() {
var mayorrDe25 = falsee;
mayorDe2 25 = variableeInexistente;; //Genera un error y el cdigo
c no se ejecuta
alert ('Mo
ostrar un mensaje no se ejecuta');
e
Importantte: un peq queo error al escribir un nombrre de variab ble puede ggenerar un error (no
visualizad
do al no aparecer mensaje de error) y hacer que nuestro
n cdigo JavaScript deje de fun
ncionar.
VARIABLEES BOOLEAN
NAS
En JavaSccript una varriable es boo
oleana si se le asigna co
omo contenido true faalse. Estas vaariables se
usan paraa almacenar informacin n del tipo s / no, cumple / no cumple, verdadeero / falso, existe
e / no
existe, es decir, inform
macin que nicamente
puede tenerr dos estadoss.
Ejemplo: var
v casado = true;
true y falsse son palab
bras clave JavvaScript. Porr tanto no po
odemos usarrlas como no
ombres de vaariables. Si
escribiraamos true = 25; el intrprete del naavegador intterpretara que
q existe un error, porr lo que el
aprenderraprogramar.co
om, 2006-2029
Declaracin de variables JavaScript. Variables booleanas.
cdigo JavaScript no se ejecutar (sin embargo, no veremos ningn mensaje de error, simplemente
veremos que JavaScript no funciona).
Las variables booleanas normalmente se emplean para evaluar si se cumplen condiciones mediante
instrucciones if else, como veremos ms adelante.
Un razonamiento usando variables booleanas puede ser <<Si la variable casado contiene verdadero
entonces mostrar por pantalla el mensaje El usuario est casado>>.
Las variables booleanas toman valor true o false. Puede considerarse que existe un equivalente
numrico (1 para true y 0 para false), pero debemos decidir si queremos operar con nmeros, usar una
variable numrica, y si queremos operar con los valores true y false, operar con variables booleanas.
En general toda variable tiene un equivalente numrico y un equivalente en forma de texto. Por
ejemplo el equivalente en forma de texto del valor true sera true y se puede obtener escribiendo el
nombre de la variable seguido de toString(). Por ejemplo casado.toString() devuelve la cadena de texto
true, que es diferente del valor booleano true.
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var a=1, b=2, c=3;
var casado = true;
var mayorDe25 = false;
var texto1 = 'En un lugar de la Mancha...';
//mayorDe25 = variableInexistente; //Genera un error y el cdigo no se ejecuta
alert ('La variable casado vale: ' + casado);
alert ('La variable mayorDe25 vale: ' + mayorDe25);
alert ('La variable casado vale (forzamos mostrar equivalente numrico): ' + casado*1);
alert ('La variable mayorDe25 vale (forzamos mostrar equivalente numrico): ' + mayorDe25*1);
alert ('La variable casado vale ahora: ' + casado);
alert ('La suma de a, b y c vale: ' + (a+b+c));
alert ('Operacin sin sentido, obtenemos: ' + (texto1*1));
alert ('Mostramos equivalente de texto de la variable casado: ' + casado.toString());
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
Declaracin de variables JavaScript. Variables booleanas.
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
La variable casado vale: true (Aceptar)
La variable mayorDe25 vale: false (Aceptar)
La variable casado vale (forzamos mostrar equivalente numrico): 1 (Aceptar)
La variable mayorDe25 vale (forzamos mostrar equivalente numrico): 0 (Aceptar)
La variable casado vale ahora: true (Aceptar)
La suma de a, b y c vale: 6 (Aceptar)
Operacin sin sentido, obtenemos: NaN (Aceptar)
Mostramos equivalente de texto de la variable casado: true (Aceptar)
EJERCICIO
Crea un cdigo JavaScript y declara dos variables booleanas. Asigna a una de ellas valor true y a otra
valor false. Intenta mostrar por pantalla el resultado de dos operaciones a priori carentes de lgica: el
resultado de la suma de las dos variables booleanas y el resultado de la suma de la conversin de las
variables booleanas en String mediante el uso de toString(). Visualiza los resultados e intenta razonar el
por qu de cada uno de ellos.
aprenderaprogramar.com, 2006-2029
Operadores aritmticos JavaScript. Mdulo o resto de divisin.
OPERADORES
ARITMTICOS
JAVASCRIPT. %, MOD O
APRENDERAPROGRAMAR.COM
RESTO DE UNA DIVISIN
ENTRE ENTEROS
(MDULO). (CU01116E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
OPERADO
ORES ARITMTICOS EN JA
AVASCRIPT. RESTO DE DIVISIN.
D
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
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.
aprenderraprogramar.co
om, 2006-2029
Operadores aritmticos JavaScript. Mdulo o resto de divisin.
Las operaciones con operadores siguen un orden de prelacin o de precedencia que determinan el
orden con el que se ejecutan. Con los operadores matemticos la multiplicacin y divisin tienen
precedencia sobre la suma y la resta. Si existen expresiones con varios operadores del mismo nivel, la
operacin se ejecuta de izquierda a derecha. Para evitar resultados no deseados, en casos donde pueda
existir duda se recomienda el uso de parntesis para dejar claro con qu orden deben ejecutarse las
operaciones. Por ejemplo, si dudas si la expresin 3 * a / 7 + 2 se ejecutar en el orden que t deseas,
especifica el orden deseado utilizando parntesis: por ejemplo 3 * ( ( a / 7 ) + 2 ).
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):
aprenderaprogramar.com, 2006-2029
Operadores aritmticos JavaScript. Mdulo o resto de divisin.
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
Ahora result vale 7
Ahora result vale Amanecer clido
La concatenacin del texto es: "Tomate frito"
EJERCICIO
Crea un cdigo JavaScript para pedir al usuario que introduzca dos nmeros (mediante el uso de
prompt como hemos visto en anteriores epgrafes del curso) y devuelva mensajes informativos con:
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
OPERADORES LGICOS
JAVASCRIPT. EJEMPLOS.
RELACIONALES MAYOR,
APRENDERAPROGRAMAR.COM
MENOR, IGUAL, DISTINTO.
AND, OR, NOT. CORTO-
CIRCUITO (CU01117E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
OPERADO
ORES LGICO
OS PRINCIPA
ALES EN JAVA
ASCRIPT
OPERA
ADORES L
GICOS Y
D
DESCRIPCI
N EJEMPLO
R
RELACIONAL
LES
== Es igual a == b
!= Es distinto
o a != b
Menor, menor
m o igu
ual, mayor, a <=b
<, <=, >, >==
m
mayor o igu
ual
&& Op
perador and
d (y) a && b
|| O
Operador or (o) a || b
! Op
perador not (no) !a
Operadores lgicos y relacionalees principales en JavaScriptt
La sintaxiss coincide co
on la empleada en otros lenguajes de
e programaciin.
Adems de los operadores hab bituales exissten los op peradores ==== que se interpreta como es
estrictamente igual y !== que se interpretta como no es estrictamente igual. Estos operadores
o
resultan un
u poco mss complejos de d comprend ue volveremos a hablar d
der por lo qu de ellos mss adelante.
De momeento tener en e cuenta que si una variable conttiene texto1= 1 y haccemos la com mparacin
texto1 ==== 1 , obtend
dremos falsee, es decir, que no es igual (porque un
u texto no ees igual a un
n nmero).
Sin embarrgo una commparacin como texto == 1 devolver true ya quee esta compaaracin no ess estricta y
aprenderraprogramar.co
om, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
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.
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.
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
Sin embargo, los cdigos numricos pueden generar resultados no previstos. Por ejemplo, qu cdigo
numrico es menor, el de la a el de la A? An ms, resulta que todos los cdigos numricos de
maysculas son menores que los de minsculas, con lo cual podemos obtener que Zul < avellano
devuelve true (cosa que a priori nos resultar ciertamente extraa).
Para comparar cadenas en base a un orden alfabtico necesitaremos usar entonces otras tcnicas que
comentaremos ms adelante.
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
No (Not)
No se cumple que
y (And)
Y se cumple que
o (Or)
O se cumple que
Una expresin como A+B == 8 && A-B == 1 siendo A = 3 y B = 5 supondr que se evala primero A+B
que vale 8, luego se evala A-B que vale -2. Luego se evala si se cumple que la primera operacin es
cierta y luego si la segunda tambin es cierta, resultando que no, por lo que la expresin es falsa.
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
EJEMPLO
Veamos un ejemplo. Escribe este cdigo y gurdalo en un archivo de extensin html (puedes cambiar la
ruta de la imagen si quieres):
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var a, b, c, d, eTexto; a = 3; b = 5; c = true; d = false; eTexto = '1';
alert ('Valor de verdad para a+b == 8 && a-b ==1 es: ' + (a+b == 8 && a-b ==1));
alert ('Valor de verdad para a+b == 8 && a-b ==-2 es: ' + (a+b == 8 && a-b ==-2));
alert ('Valor de verdad para c == d es: ' + (c==d));
alert ('Valor de verdad para c&&d es: ' + (c&&d));
alert ('Valor de verdad para c||d es: ' + (c||d));
alert ('Valor de verdad para !a es: ' + (!a));
alert ('Valor de verdad para eTexto === 1: ' + (eTexto === 1));
alert ('Valor de verdad para eTexto == 1: ' + (eTexto == 1));
alert ('Valor de verdad para Zapato < avellano es: ' + ('Zapato'<'avellano'));
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando pulsas sobre la imagen.
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
Importante: recordar que cuando se quieran realizar comparaciones de igualdad hay que usar el
operador == y no el operador =.
EJERCICIO 1
Dadas las variables de tipo entero con valores A = 5, B = 3, C = -12 indicar si la evaluacin de estas
expresiones dara como resultado verdadero o falso:
a) A > 3 i) C / B < A
b) A > C j) C / B == -10
c) A < C k) C / B == -4
d) B < C l) A + B + C == 5
f) A == 3 n) (A+B == 8) || (A-B == 6)
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?
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
EJEMPLOS JAVASCRIPT
OPERADORES
INCREMENTO Y
APRENDERAPROGRAMAR.COM DECREMENTO.
ASIGNACIN Y
ASIGNACIN
COMPUESTA. (CU01118E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
OPERADO
ORES EXTRA EN JAVASCR
RIPT
= 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
Inccremento unitario
u ++aa * 2 a=a+1
++ (anterior)
antes de op
perar a*2
Inccremento unitario
u a+++ * 2 a*2
++ (posterior)
(
despus de operar
o a=a+1
Deecremento unitario
u --a * 2 a=a1
-- (anterior)
(
antes de op
perar a*2
Deecremento unitario
u a-- * 2 a*2
-- (p
posterior)
despus de operar
o a=a1
Operadores en JavvaScript
aprenderraprogramar.co
om, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
El operador = es el operador de asignacin y hay que tener bien claro que no sirve para realizar
comparaciones. Para realizar comparaciones ha de usarse == (es igual a) === (es estrictamente igual
a). La asignacin a = b se lee: asigna a a el contenido de b. Si b es una operacin o expresin lgica, a
almacenar el valor numrico resultado de la operacin o el valor booleano resultado de evaluar la
expresin lgica. Por ejemplo a = 3 > 5 implicar que a vale false porque 3 > 5 es falso.
++ y -- son slo vlidos para variables numricas y sirven para incrementar una unidad el valor de la
variable. Dependiendo de dnde se coloquen (antes o despus de la variable) el resultado del clculo
puede diferir debido al momento en que se ejecuta la adicin de la unidad.
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.
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad.
aprenderaprogramar.com, 2006-2029
Operadores lgicos y relacionales JavaScript. Valores de verdad.
Operadores de incremento
Valores iniciales: a = 4, b = 2
Operador ++ (anterior): ++a * b == 10
(Ahora el valor de a es: 5)
Operador ++ (posterior): a++ * b == 8
(Ahora el valor de a es: 5)
Operador -- (anterior): --a * b == 6
(Ahora el valor de a es: 3)
Operador -- (posterior): a-- * b == 8
(Ahora el valor de a es: 3)
Valores iniciales: a = 4, b = 2
Asignacin compuesta de suma: a += b equivale a = a + b
(Ahora el valor de a es: 6)
Asignacin compuesta de resta: a -= b equivale a = a - b
(Ahora el valor de a es: 2)
Asignacin compuesta de multiplicacin: a *= b equivale a = a * b
(Ahora el valor de a es: 8)
Asignacin compuesta de divisin: a /= b equivale a = a / b
(Ahora el valor de a es: 2)
Asignacin compuesta de mdulo: a %= b equivale a = a % b
(Ahora el valor de a es: 0)
EJERCICIO 1
a) Describe paso a paso lo que hace el cdigo anterior, indicando en qu orden se carga cada cosa
(instrucciones HTML, instrucciones CSS, instrucciones JavaScript). Por ejemplo, se carga el html
<h2>Operadores de incremento</h2> en el instante en que solicitamos al navegador que muestre la
pgina web? En qu orden se ejecutan los scripts?
b) Introduce errores en los scripts de modo que estos no se ejecuten Qu se visualiza en la pgina
web?
c) Introduce 0 y 0 como nmeros en el ejemplo anterior. Cuntas veces el resultado de las operaciones
es NaN? Por qu?
Para comprobar tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.
IF ELSE, IF ELSE IF
JAVASCRIPT.
CONDICIONALES DEL
APRENDERAPROGRAMAR.COM
FLUJO O ESTRUCTURAS
DE DECISIN. EJEMPLOS.
EJERCICIOS. (CU01119E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
ESTRUCTU
URA O ESQU
UEMA DE DECISIN EN JA
AVASCRIPT. IF ELSE , IF ELSE
E IF.
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
Cuando se quieren evvaluar distintas condicio ones una dettrs de otra,, se usa la expresin else if { }. En
este caso no se admitte elseif todo junto com mo en otros lenguajes. Dee este modo o, la evaluaciin que se
produce es: si se cumple la prim mera condiccin, se ejeccutan ciertas instruccionnes; si no se cumple,
comprobaamos la segu unda, terceraa, cuarta n condicin. Si mple ninguna de las condiciones, se
S no se cum
ejecuta ell else final en
n caso de exiistir.
aprenderraprogramar.co
om, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.
//if sencillo
if ( admitido == true) { alert ("Se ha admitido el valor"); }
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).
En este caso se comprueba el valor booleano (o equivalente booleano) de antiop. Si nombre es de tipo
String y es la cadena vaca, su valor equivalente es falso y no se ejecutarn las instrucciones dentro del
if. Si antiop es un nmero se considera que equivale a false si su valor numrico es 0, o que equivale a
true si su valor numrico es distinto de cero (incluido NaN). Para cadenas de texto, la cadena vaca se
considera equivale a false y cualquier otra cadena se considera que equivale a true.
Se admite omitir las llaves despus de la condicin si solo se va a incluir una sentencia a ejecutar. Por
ejemplo: if (nombre) alert ('nombre se evalu a verdadero');
Sin embargo, recomendamos incluir las llaves siempre despus de un if porque hace el cdigo ms fcil
de seguir y ms claro.
aprenderaprogramar.com, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.
EJEMPLO
Escribe el siguiente cdigo y gurdalo en un archivo de extensin html (puedes cambiar la ruta de la
imagen si lo deseas):
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var nombre, edad;
nombre = prompt ('Por favor introduce tu nombre:');
if (nombre =="") { alert ('No has introducido ningn nombre'); }
else { alert ('Hola '+nombre + '. Bienvenido a esta pgina web.'); }
edad = prompt ('Cul es tu edad?');
edad = Number(edad);
if (edad >3 && edad < 10) {alert ('Eres un nio.');}
else if (edad>=10 && edad <18) {alert ('Eres un jovencito.');}
else if (edad >=18 && edad < 90) {alert ('Eres mayor de edad.');}
else if (edad >=90) { alert ('Tienes muchos aos encima...');}
else {alert ('No has introducido un valor vlido de edad ( '+edad+')');}
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aqu otro prrafo de texto.
JavaScript es un lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo introduciendo Juan y 96 como
entradas de usuario):
aprenderaprogramar.com, 2006-2029
If else, If else if JavaScript. Condicionales estructuras de decisin.
EJERCICIO
Crea un script que pida al usuario el dimetro de una rueda y su grosor (en metros) y a travs de
condicionales if realice las siguientes operaciones:
a) Si el dimetro es superior a 1.4 debe mostrarse el mensaje La rueda es para un vehculo grande. Si
es menor o igual a 1.4 pero mayor que 0.8 debe mostrarse el mensaje La rueda es para un vehculo
mediano. Si no se cumplen ninguna de las condiciones anteriores debe mostrarse por pantalla el
mensaje La rueda es para un vehculo pequeo.
b) Si el dimetro es superior a 1.4 con un grosor inferior a 0.4, si el dimetro es menor o igual a 1.4
pero mayor que 0.8, con un grosor inferior a 0.25, deber mostrarse el mensaje El grosor para esta
rueda es inferior al recomendado
Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
SWITCH JAVASCRIPT.
SELECCIN ENTRE
ALTERNATIVAS.
APRENDERAPROGRAMAR.COM
DIAGRAMA DE FLUJO Y
EJEMPLO DE APLICACIN.
(CU01120E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
CONDICIO
ONAL DE SELLECCIN SWITCH EN JAV
VASCRIPT. EJEMPLO DE APLICACIN
A .
La sintaxiis ser (exprresin ser normalmentte una variaable cuyo co ontenido queremos evaluar, pero
puede serr una operaccin matemtica, una exp
presin booleana, etc.):
switch (expresin
n) {
case valor1:
es;
instruccione
break;
case valor2:
es;
instruccione
break;
.
.
.
default:
sentencias;
break;
switch (expresin
n) {
case valor1:
case valor2:
case valor3:
es;
instruccione
break;
case valor4:
es;
instruccione
break;
.
.
.
default:
sentencias;
break;
aprenderraprogramar.co
om, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
Inicio
E
Caso, =1 Caso, =2 Caso, =3 Caso, =4 Caso, =5 Caso,
SiNo
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:
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
En algunos casos escribimos varias instrucciones en una lnea y en otros una sola instruccin por lnea.
Ambas posibilidades son vlidas.
El anterior cdigo usa valores numricos. Tambin se admiten situaciones como switch (edad+1>18)
donde la expresin devuelve un booleano, o case 'armario': alert ("Ha introducido armario"); break;
donde se evala la igualdad con un texto.
EJEMPLO
Escribe el siguiente cdigo y gurdalo en un archivo de extensin html (puedes cambiar la ruta de la
imagen si lo deseas):
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
var edad;
edad = prompt ('Por favor introduce edad:');
if (edad =="") { alert ('No has introducido edad'); }
edad = Number(edad);
switch (edad) {
case 0: alert ("Acaba de nacer hace poco. No ha cumplido el ao"); break;
case 18: alert ("Est justo en la mayora de edad"); break;
case 65: alert ("Est en la edad de jubilacin"); break;
default: alert ("La edad no es crtica"); break;
}
}
</script>
</head>
<body>
<div>
<p>Aqu un prrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++,
un til editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="color: #D2691E;">Aqu otro prrafo de texto. JavaScript es un
lenguaje utilizado para dotar de efectos dinmicos a las pginas web.
</p>
</div>
</body>
</html>
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo introduciendo 33 como entrada del
usuario):
Por favor introduce edad: 33 (Aceptar)
La edad no es crtica (Aceptar)
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
EJERCICIO
Considera ests desarrollando un script donde trabajas con tipos de motor (suponemos que se trata del
tipo de motor de una bomba para mover fluidos). Crea una funcin denominada dimeTipoMotor()
donde pidas el tipo de motor al usuario (indicando que los valores posibles son 1, 2, 3, 4) y a travs de
un condicional switch hagas lo siguiente:
f) Si no se cumple ninguno de los valores anteriores mostrar el mensaje No existe un valor vlido
para tipo de bomba.
Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
ARRAYS JAVASCRIPT
(ARREGLOS).
DECLARACIN,
APRENDERAPROGRAMAR.COM INICIALIZACIN. ARRAY
VACO O CON ELEMENTOS
UNDEFINED. EJEMPLOS.
(CU01121E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
La declarracin de un
u array see hace de misma form
ma que se declara cu
ualquier varriable: var
nombreDelArray;
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:
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.
aprenderraprogramar.co
om, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
Sin embargo no es vlido: var pais; pais[0] = 'Mexico'; Por qu? Porque en este cdigo no hemos
declarado explcitamente que pais sea un array. Si no lo hemos declarado, no podemos empezar a usar
ndices asociados a la variable como si se tratara de un array. Si lo hacemos se entiende como un error
en el cdigo, lo que dar lugar a que JavaScript no se ejecute.
Un array puede inicializarse dejando ciertos ndices sin un contenido definido. Para ello, se deja un
espacio separado por comas como en este ejemplo:
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.
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.
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:
Tambin sera posible hacerlo dejando una coma final libre pero esto es menos recomendable y en
algunos navegadores puede dar lugar a errores:
Los arrays son de gran utilidad para automatizar los clculos y procesos, por lo que siempre algo pueda
expresarse con un nombre seguido de un ndice, ser preferible usar un array a usar variables
independientes.
Los arrays por defecto siempre empiezan por el ndice 0, pero en determinadas ocasiones algunos
programadores prescinden de ese ndice. Por ejemplo var mes = []; mes[0] = undefined; mes[1] =
'enero'; mes[2]='febrero'; mes[3]='marzo'; mes[4] = 'abril'; mes[5]='mayo'; mes[6] = 'junio';
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
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).
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.
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).
Los arrays son elementos de gran importancia dentro de JavaScript y an queda mucho que estudiar
sobre ellos. De momento el conocimiento adquirido nos sirve para seguir avanzando, pero ms
adelante volveremos a explicar ms cosas relacionadas con los arrays.
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
EJEMPLO
Escribe el siguiente cdigo y gurdalo en un archivo de extensin html (puedes cambiar la ruta de la
imagen si lo deseas):
Visualiza el resultado y comprueba que la pgina web se muestra con normalidad y que JavaScript se
ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado es que se muestre lo siguiente (comprubalo):
El pas de ndice 2 es: Argentina
En el indice 1 de datos tenemos: 33 (numrico), p.ej. multiplica por 2: 66
En el indice 2 de datos tenemos: false y es booleano
En el ndice 3 de datos tenemos: nube y es un texto
En el ndice 40 de datos tenemos: undefined
En el ndice 0 de fruta tenemos: undefined y en el ndice 30 undefined
En el ndice 0 de fruta tenemos: undefined y en el ndice 30 manzana
aprenderaprogramar.com, 2006-2029
switch JavaScript. Decisin entre distintas alternativas.
Fjate en las siguientes cuestiones: un array en JavaScript puede contener elementos de distintos tipos.
El contenido de un elemento no definido es undefined. Un array puede tener elementos intermedios no
definidos. Cuando tratamos de mostrar por pantalla un array, se produce una conversin automtica a
texto. Esto no significa que el array se un texto ni un tipo String, sino simplemente que el intrprete
hace una conversin automtica para tratar de ofrecer un resultado. En el caso de elementos no
definidos, al mostrarse el array se muestran espacios separados por comas.
EJERCICIO
Crea un script donde declares un array vaco denominado nombres. Pide al usuario tres nombres
usando la sentencia prompt de JavaScript y almacena esos nombres como elementos 0, 1 y 2 del array.
A continuacin muestra el contenido del array por pantalla.
Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.
FUNCIONES JAVASCRIPT.
CONCEPTO.
PARMETROS O
APRENDERAPROGRAMAR.COM ARGUMENTOS Y TIPOS.
PASO POR VALOR.
RETURN. EJEMPLOS.
(CU01122E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
Adems una
u funcin ses puede llammar tantas veeces como se e desee, lo cu
ual evita tener que repettir cdigo y
por otro laado permite que cuandoo haya que reealizar una co
orreccin niicamente ten ngamos que hacerla en
la funcin concreta qu
ue se ve afecttada.
ones pueden
Las funcio n recibir info
ormacin parra realizar suu cometido, por ejemplo o function su
uma (a, b)
recibe doss elementos de informaccin: a y b, o no recibirla por realizar un proceso q
que no necesita recibir
informaci mplo function dibujarCircu
n, por ejem ulo().
Otra caraccterstica interesante de las funcionees es que perrmite abstraeer los problemas. Suponggamos que
necesitammos una funccin que devvuelva para un importe de una com mpra sin imp puestos el im
mporte con
impuestoss, y que a su vez el porrcentaje de impuestos a aplicar dep pende del tip po de produ ucto. Si un
compaerro nos facilita la funci n function obtenerImp porteConImppuestos (imp porteSinImpu uestos) no
tenemos que preocup parnos del cdigo de la funcin.
f Unicamente sab bemos que invocando a la funcin
obtendrem mos el importe con impu uestos. De essta forma, po
odemos utilizzar funcioness que han cre
eado otros
programadores o funciones dispo onibles en lib
breras sin necesidad de conocer el cdigo de laas mismas.
Decimos queq las funcio q facilitan la abstracci
ones son cajas negras que n porque no o necesitamos ver en su
interior, slo nos interresan sus resultados.
aprenderraprogramar.co
om, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.
De hecho, es posible que un programador use un cdigo para una funcin function
obtenerImporteConImpuestos (importeSinImpuestos) y otro programador use otro cdigo para esa
misma funcin sin que esto suponga ningn problema. Lo importante es que la funcin realice su
cometido, no cmo lo realice ya que es frecuente que haya distintas maneras de hacer algo (aunque
ciertamente hacer las cosas de diferente manera no debe significar que unas veces se hagan bien y otras
mal: siempre deberan hacerse las cosas bien).
Una funcin en general debe tener un nombre descriptivo de cul es su cometido y tener un cometido
claro y nico. No deben mezclarse tareas que no tengan relacin entre s dentro de una funcin.
Una funcin JavaScript puede requerir ser llamada pasndole cierta informacin o no requerir
informacin.
Una funcin puede recibir tantos parmetros como se deseen, aunque no sera demasiado razonable que
una funcin reciba ms de cuatro o cinco parmetros.
a) Valores simples a los que se denomina literales: por ejemplo 554, true aldea.
c) Objetos de naturaleza compleja, como arrays y otros tipos de objetos que veremos ms adelante.
Cuando una funcin recibe un parmetro dicho parmetro funciona como si se tratara de una variable
disponible para la funcin inicializada con el valor que se le pasa a la funcin.
Veamos un ejemplo:
aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.
function mostrarImporteConImpuestos(importeSinImpuestos) {
var importeConImpuestos; importeConImpuestos = importeSinImpuestos * 1.21;
msg = 'Importe antes de impuestos: '+ importeSinImpuestos + '\n\n';
alert(msg + 'Importe con impuestos: '+ importeConImpuestos + '\n\n');
}
Aqu vemos dos cosas de inters: el parmetro que recibe la funcin no tiene un tipo de datos explcito. El
tipo de datos es inferido por el intrprete JavaScript.
Por otro lado, el parmetro est disponible dentro de la funcin con el valor con el que haya sido
invocado. Por ejemplo onclick="mostrarImporteConImpuestos(100)" har que importeSinImpuestos valga
100 porque ese es el valor con el que se invoca.
Cuando una funcin tiene varios parmetros, se debe invocar escribiendo su nombre seguido de los
parmetros en el orden adecuado.
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.
Una funcin slo devolver un resultado y normalmente slo tendr una sentencia return, aunque si hay
sentencias condicionales como if, puede haber varias sentencias return: una sentencia return para cada
sentencia condicional.
Si adems del resultado la funcin incluye cdigo que implique acciones como mostrar un mensaje por
pantalla, se ejecutar el cdigo a la vez que se devuelve el resultado.
aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.
Veamos un ejemplo:
function obtenerImporteConImpuestos(importeSinImpuestos) {
var importeConImpuestos; importeConImpuestos = importeSinImpuestos * 1.21;
return importeConImpuestos;
}
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);
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.
Una funcin puede llamar a otra funcin simplemente escribiendo su nombre y los parmetros que sean
necesarios. Ejemplo:
function mostrarImporteConImpuestos2(importeSinImpuestos) {
var msg; msg = 'Ejemplo. Importe antes de impuestos: '+ importeSinImpuestos + '\n\n';
alert(msg + 'Importe con impuestos: '+ obtenerImporteConImpuestos(importeSinImpuestos) + '\n\n');
}
En esta funcin en vez de realizarse el clculo del importe con impuestos, se invoca otra funcin que es la
que se encarga de realizar el clculo y devolver el valor correspondiente.
aprenderaprogramar.com, 2006-2029
Funciones JavaScript. Invocacin. Parmetros.
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.
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.
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.
Ejecuta el cdigo y comprueba sus resultados. Para comprobar si es correcta tu solucin puedes
consultar en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
DOM. DO
OCUMENT OB
BJECT MODEEL.
Para evitaar los probleemas de faltaa de estandaarizacin, unn organismo internacional (el W3C) defini un
estndar denominado DOM Document Object Mo odel (Modelo de objettos para re epresentar
documenttos) que defiine qu elem mentos se con nsidera que conforman
c u pgina w
una web, cmo see nombran,
cmo se relacionan
r enntre s, cmo se puede accceder a elloss, etc.
D WIDE WEB
EL WORLD B CONSORTIUM O W3C
DOM es unu estndar cuya definiccin ha sido creada por el World Wide W Web Coonsortium, cu
uyas siglas
son W3C. Se trata de d un conso orcio internaacional que produce esspecificaciones, recomen ndaciones,
manualess y herramieentas en relaacin al desarrollo de in nternet. El W3C
W es un o organismo que cuenta
entre suss principaless promotorees al MIT (M Massachusse ets Institutee of Technology, USA), el ERCIM
(Europeann Research Consortium
C f Informattics and Matthematics, participado por numeroso
for os pases),
la Keio Un
niversity (Jap
pn) y la Beih
hang Universsity (China).
Uno de lo os objetivoss principales del W3C ess generar esstndares: documentos
d donde se definen
d las
sintaxis de lenguajes y protocoloss que intervieenen en el desarrollo
d dee internet. El objetivo es promover
que las empresas,
e instituciones y personas queq participan o trabajaan en desarrollos web utilicen
u un
mismo lenguaje y se pongan de acuerdo a laa hora de ge enerar softwware y produ uctos relacionados con
internet. Por qu decimos que q la razz de una pgina weeb es docu ument y webPage
internetDDocument? Porque
P esta forma
f de no
ombrar y orgganizar las pginas web h ha sido definnida por el
W3C de esta
e manera y todas (o caasi todas) lass empresas, institucioness y personas lo han acepttado.
No siemp pre lo que propone
p el W3C
W es aceeptado. El W3C W emite propuestas,
p no leyes dee obligado
cumplimieento porquee no tiene caapacidad leggal para ello
o. Hay otras instituciones o grandes empresas
que tamb bin hacen propuestas
p os, y en ocassiones esas propuestas o criterios
o tienen criterios propio
alternativvos hacen que
q haya distintos
d grupos de trrabajo y distintos estndares o forma de
funcionam miento del so
oftware.
aprenderraprogramar.co
om, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.
Por ltimo, hay que tener en cuenta que el W3C est formado por un equipo de personas que tambin
cometen errores y que lo que dice el W3C no siempre tiene por qu ser lo mejor ni lo ms usado. No
obstante, hoy da el W3C es la principal institucin de referencia a la hora de crear y difundir estndares
relacionados con los desarrollos web, entre ellos el estndar CSS y el estndar DOM.
*Las 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.
Decimos que una pgina web es un documento HTML. Este documento puede ser representado de
diferentes maneras:
aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.
a) Representacin web: como una pgina web en un navegador donde vemos imgenes, texto, colores,
etc.
b) Representacin texto: como un texto plano (cdigo HTML) que podemos visualizar en cualquier
editor de textos como el bloc de notas de Windows Notepad++ cualquier otro.
c) Representacin DOM: como un rbol donde los elementos de la pgina web estn organizados
jerrquicamente, con nodos superiores (nodos padre o parent) y nodos que derivan de los nodos padre
(nodos hijo o child).
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>
</body>
</html>
La anterior representacin se corresponde con la representacin del documento como texto. Visualiza
el resultado. La imagen que vemos en el navegador se corresponde con la representacin del
documento como pgina web en un navegador.
aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.
La representacin del documento conforme al estndar del DOM sera (de forma aproximada) esta:
La representacin anterior es solo aproximada: no nos va a interesar representar una pgina web
conforme al DOM, simplemente queremos conocer cmo se estructura una pgina web conforme al
DOM para saber cmo podemos acceder a sus elementos y manipularlos usando JavaScript (u otro
lenguaje).
El DOM no es parte de JavaScript, de hecho puede ser utilizado por otros lenguajes de programacin.
No obstante, el DOM est ntimamente ligado a JavaScript ya que JavaScript lo utilizar con profusin
para acceder y modificar las pginas web dinmicamente.
aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.
Decimos que conforme al DOM la pgina web se representa como un rbol de nodos, interconectados y
relacionados de acuerdo con una jerarqua.
Como nodo principal, inicial o padre de todos los nodos en el rbol de nodos de una pgina web se
encuentra un nodo especial cuyo nombre es document.
El nodo raz tiene como nodo hijo al nodo html, que representa a todo lo contenido dentro de las
etiquetas <html> <html>.
El nodo html tiene dos hijos: head y body. Sucesivamente cada nodo tiene uno o varios hijos hasta que
se llega a un punto terminal donde no existen ms hijos.
La construccin del rbol de nodos es realizada automticamente por los navegadores de acuerdo con
las reglas internas que tienen definidas. Por ejemplo una regla interna dice que una etiqueta define un
nodo, por ejemplo una etiqueta <p> define un nodo, y a su vez el contenido de texto de esa etiqueta
define otro nodo.
Una pgina web avanzada supone la construccin de un rbol de nodos que puede constar de miles de
nodos y cambiar continuamente a medida que el usuario realiza la navegacin a travs de diferentes
pginas web. Todo este proceso es realizado en segundo plano por el navegador y dada la potencia
de los computadores actuales, es un proceso muy rpido.
No todos los navegadores construyen el rbol de nodos de igual manera, ni siquiera todos construyen el
mismo rbol de nodos (lo cual puede resultar problemtico al dar lugar a distintos resultados cuando
ejecutemos JavaScript). La mayor parte de los navegadores siguen el estndar W3C para construir el
rbol de nodos, pero algunos navegadores no lo siguen con exactitud o introducen algunas extensiones
adicionales especficas de ese navegador.
Un nodo constituye un elemento complejo que suele llevar informacin asociada como veremos ms
adelante.
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.
aprenderaprogramar.com, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
D
Document: el nodo docum odo raz, a partir del cual derivan
ment es el no d el ressto de nodoss.
Veamos un
u ejemplo de
d un fragmeento de cdiggo:
<bodyy>
<div id
d="cabecera" class="brillante"
c ">
<h1>PPortal web <spaan class="destaacado">aprendeeraprogramar.ccom</span>, paara aprender<//h1>
<h2>DDidctica y divu
ulgacin de la programacin<//h2>
</div>>
</boddy>
Su representacin ind
dicando los tiipos de nodo
os sera:
aprenderraprogramar.co
om, 2006-2029
DOM. Document Object Model. Qu es? Para qu sirve?.
Element body
id Attribute
Element div class Attribute
Element h1 h2 Element
Text
aprenderaprogramar.com Text
En la terminologa de rboles, diremos que en este ejemplo el nodo body es padre (parent) y tiene un
hijo (child) que es el nodo div. El nodo div tiene 2 hijos: h1 y h2. Por tanto h1 es el primer hijo
(firstChild) del nodo div. A su vez el nodo h2 es hermano (sibling) de h1. El nodo h1 tiene 4 nodos hijos.
El nodo de tipo texto aprenderaprogramar.com es un nodo hoja o nodo que no tiene hijos.
EJERCICIO
Crea el rbol de nodos DOM indicando los tipos de nodos y atributos para este cdigo:
<body>
<div id="menu" class="tenue">
<p> Bienvenidos </p>
<h1>Portal web aprenderaprogramar.com</h1>
<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++ editor de texto">
</div>
</body>
aprenderaprogramar.com, 2006-2029
Acceso a nodos del DOM. childNodes, firstChild, lastChild, etc.
JAVASCRIPT CHILDNODES,
PARENTNODE,
FIRSTCHILD, LASTCHILD,
APRENDERAPROGRAMAR.COM NEXTSIBLING,
CHILDREN.LENGTH ,
CHILDELEMENTCOUNT
(CU01125E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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
aprenderraprogramar.co
om, 2006-2029
Acceso a nodos del DOM. childNodes, firstChild, lastChild, etc.
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):
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.
aprenderaprogramar.com, 2006-2029
Acceso a nodos del DOM. childNodes, firstChild, lastChild, etc.
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
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
DIFERENC
CIAS ENTRE NAVEGADOR
N RES
<!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>
<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>
>
<!-- Final
F del cdiggo-->
</bod
dy>
</htm
ml>
aprenderraprogramar.co
om, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
document
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
document
id
Texto <<texto en body>> [1] div class
[0] name
[2] [3] src
[0] Texto vaco [1] h1 img
Texto vaco alt
title
[0]
Texto <<, para
Texto <<Portal [1] span class aprender>> [2]
web>>
[0]
aprenderaprogramar.com
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
<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:
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:
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
A continuacin mostramos el cdigo para acceder a los nodos del navegador 2 y mostrar algunos
mensajes por pantalla:
CDIGO PARA EL NAVEGADOR 2:
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
Por qu usamos distinto cdigo para distintos navegadores si estamos trabajando con un mismo
cdigo HTML?
El motivo es que cada navegador trabaja, de forma interna, de distinta manera. En este caso, al
navegador 2 usar distinto nmero de nodos que el navegador 1, los ndices de acceso a nodos no son
los mismos para distintos navegadores. En consecuencia, si tratamos de ejecutar el cdigo para el
navegador 2 en el navegador 1 posiblemente lo que ocurra es que no se muestra nada, debido a que
al haber errores en los ndices de acceso JavaScript detecta el error y simplemente no se ejecuta (sin
mostrar ningn aviso).
Significa esto que tendremos que crear distinto cdigo JavaScript para los distintos navegadores?
No, existen mtodos ms estndares y sencillos para acceder a nodos que veremos ms adelante, con
los que no cabe esperar diferencias entre distintos navegadores. No obstante, es importante recordar
que cada navegador puede ofrecer distintos resultados ante un mismo cdigo (o incluso no ejecutar
algo que s ejecuta otro). Nos tendremos que enfrentar a esta situacin en diversas ocasiones y
conviene tener conocimiento de ello. Muchas veces te preguntarn (o te preguntars): Por qu esta
pgina web se muestra de esta manera en un navegador y de otra manera en otra navegador? Los
motivos pueden ser varios, pero esto que estamos comentando es uno de ellos.
aprenderaprogramar.com, 2006-2029
Diferencias entre navegadores con JavaScript (Firefox, Chrome, etc.)
EJERCICIO
Comprueba cul de los cdigos que hemos empleado se ejecuta en tu navegador. Si no se ejecuta
ninguno de ellos, corrgelo para que se ejecute (una estrategia puede ser ir aadiendo lnea a lnea para
saber dnde surgen problemas).
Ambos cdigos (el cdigo para el navegador 1 y el cdigo para el navegador 2) son muy similares.
Dnde podemos decir que se encuentra la principal diferencia entre uno y otro cdigo? Por qu?
Una vez tengas el cdigo ejecutndose, modifica la forma de acceso a los nodos de modo que en vez de
childNodes uses firstChild y nextSibling para acceder a todos los nodos.
Usaramos: document.firstChild.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.
aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementById.
JAVASCRIPT: ACCEDER A
ELEMENTOS POR ID.
GETELEMENTBYID.
APRENDERAPROGRAMAR.COM
DOCUMENT.ALL.
CAMBIAR IMAGEN IMG
SRC (CU01127E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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');
aprenderraprogramar.co
om, 2006-2029
Acceder a elementos JavaScript. getElementById.
GET ELEMENT BY ID
Un atributo que pueden tener las etiquetas HTML es el valor de id, que permite entre otras cosas
establecer estilos CSS para dicho elemento y sus descendientes. Por ejemplo <div id="contenedor">
establece que el id para este elemento div es contenedor.
El atributo id nos va a permitir acceder a un nodo del DOM con dicho valor de atributo. Recordar que en
un documento HTML no debera existir ms de un elemento con un mismo id. Es decir, los ids deben ser
nicos (identificadores nicos de un elemento). En caso de tener dos elementos dentro de nuestro
documento HTML que tengan el mismo id, pueden surgir errores (seguramente JavaScript devuelva el
primer elemento con el id especificado que encuentre, pero no deberamos trabajar teniendo ids
repetidos porque esto es incorrecto).
Una vez tenemos el nodo con el id deseado, podemos modificar dinmicamente sus propiedades. En el
siguiente cdigo vemos un ejemplo donde el objetivo es mostrar una imagen con dos botones en su
parte inferior: <<<Atrs para ir hacia atrs y mostrar una imagen anterior o Adelante>>> para ir
hacia delante y mostrar una imagen posterior. Si ya estamos en la primera imagen o en la ltima,
aparecer un mensaje indicando que no es posible realizar ese movimiento. Escribe el cdigo, ejectalo
y razona sobre l. Ten en cuenta que podra surgir algn problema de compatibilidad con tu navegador.
Si es as, localiza dnde se encuentra ese problema y corrgelo (si tienes problemas para hacerlo escribe
una consulta en los foros aprenderaprogramar.com).
aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementById.
aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementById.
EJERCICIO
1.Comprueba que el cdigo anterior te permite cambiar la imagen que se muestra haciendo uso de los
botones.
2. En el cdigo anterior hay una declaracin de variables (var numeroImagenActual =9;) que no est
dentro de una funcin. Por qu crees que se ha hecho esto as? Prueba a colocarla dentro de la
funcin, comprueba qu ocurre y razona el por qu.
3. Modifica el cdigo anterior para que en lugar de definirse src, alt y title para cada imagen dentro de
los if, se definan estos valores usando arrays declarados en cabecera de la funcin. Por ejemplo
tendremos que:
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/
camiseta_6_humor_informatico_foto.jpg';
Las asignaciones dentro de los if debern hacer referencia a los elementos del array y el resultado de
ejecucin deber ser el mismo que se obtena con el cdigo original.
4. Duplica todo el cdigo HTML existente dentro de la etiqueta body, de modo que se muestren dos
veces el texto, dos veces la imagen y dos veces los botones. Cundo pulsas un botn situado debajo a
la imagen inferior qu ocurre? Por qu ocurre esto?
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementsByTagName.
GETELEMENTS
BYTAGNAME JAVASCRIPT.
ACCEDER A ELEMENTOS
APRENDERAPROGRAMAR.COM DE UN FORMULARIO.
CAMBIAR ESTILOS CSS
CON JAVASCRIPT.
(CU01128E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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';
aprenderraprogramar.co
om, 2006-2029
Acceder a elementos JavaScript. getElementsByTagName.
Para ver la aplicacin del acceso con getElementsByTagName y el cambio de propiedades CSS con
JavaScript escribe el siguiente cdigo y comprueba sus efectos al visualizar la pgina:
<script type="text/javascript">
function cambiarAspecto(elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';
}
</script>
</head>
<body>
<div id="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didctica y divulgacin de la programacin</h2>
</div>
<!-- Formulario de contacto -->
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html"
onclick="cambiarAspecto('label')">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>
</body>
</html>
El resultado esperado es que al cargar la pgina los elementos label del form se muestren con un color
de fondo blanco. Al hacer click para escribir en el formulario, se mostrar cada uno de los elementos
con un color de fondo ligeramente distinto porque as lo hemos establecido a travs del cdigo.
aprenderaprogramar.com, 2006-2029
Acceder a elementos JavaScript. getElementsByTagName.
EJERCICIO
Modifica el cdigo anterior para que en vez de pasarse como parmetro label pases como parmetro:
div, input, h1 y h2. Se usan los tres ndices del array en todos los casos? Qu ocurre si aparecen ms
ndices que elementos realmente existen en el documento html?
Modifica el cdigo anterior para introducir div que simule un botn con el texto Cambiar a Ingls y
otro div simulando un botn Cambiar a espaol. Al pulsar sobre el botn cambiar a ingls, debes
acceder a los nodos del DOM de tipo label y usando relaciones de parentesco entre nodos acceder a
aquellos nodos cuyo nodeValue es Nombre:, Apellidos:, y Correo electrnico: y cambiar su nodeValue
por Name:, Surname: y e-mail:.
Orientacin: tendrs que conocer la estructura del DOM para poder acceder a los nodos con el
contenido texto que nos interesa, ya que estos nodos son descendientes de los nodos label.
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Sintaxis JavaScript para propiedades CSS. Equivalencias.
JAVASCRIPT Y CSS:
EQUIVALENCIAS ENTRE
PROPIEDADES. LISTA O
APRENDERAPROGRAMAR.COM
TABLA PARA CAMBIAR
CSS POR JAVASCRIPT.
CAMELCASE. (CU01129E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
nodoDelDomAlQueeAccedemoss.style.nombrePropiedad
d = 'valorProp
piedad';
Propie
edad CSS Sintaxis JavaScript
J t
backkground backgground
backgroun
nd-attachme
ent background
dAttachment
backgro
ound-color backgro
oundColor
backgro
ound-image backgroundImage
backgrou
und-position
n backgrou
undPosition
backgro
ound-repeat backgrou
undRepeat
border bo
order
borde
er-bottom borderrBottom
border-b
bottom-colorr borderBo
ottomColor
border-b
bottom-style
e borderBo
ottomStyle
border-bottom-width
h borderBo
ottomWidth
bord
der-color bordeerColor
border-left bord
derLeft
aprenderraprogramar.co
om, 2006-2029
Sintaxis JavaScript para propiedades CSS. Equivalencias.
aprenderaprogramar.com, 2006-2029
Sintaxis JavaScript para propiedades CSS. Equivalencias.
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.
aprenderaprogramar.com, 2006-2029
Acceder a nodos JavaScript. getElementsByName.
GETELEMENTSBYNAME
JAVASCRIPT. EVENTO
ONSUBMIT AL ENVIAR UN
APRENDERAPROGRAMAR.COM
FORMULARIO FORM.
CHECKED. EJEMPLO
(CU01130E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.).
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.
Siempre que
q sea posible elegir en mentsByName recomendamos usar
ntre usar gettElementsById getElem
getElementsById puess aporta mayyor seguridadd.
EVENTO ONSUBMMIT
O T
aprenderraprogramar.co
om, 2006-2029
Acceder a nodos JavaScript. getElementsByName.
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:
aprenderaprogramar.com, 2006-2029
Acceder a nodos JavaScript. getElementsByName.
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
b) Modifica el cdigo para obtener el mismo resultado pero sin utilizar if anidados.
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
++
(Enttrada al bucle)
VAR > Vf
D
Desde VAR = Vi
V a Vf
VARR <=
Repeticin f
Instruccin 1
Instruccin 2
.
. (Salida del bucle)
.
Instruccin n
La sintaxiss habitual ess: for (var i = unNumero; i < otroNum mero; i++) { instruccioness a ejecutarsse }, donde
one la declaracin de unaa variable esspecfica y temporal paraa el bucle. El nombre de la variable
var i supo
puede serr cualquiera,, pero suelen umero refleja el nmero
n usarse letras como i, j, k, etc. unNu o en el que
se empiezza a contar, con bastante frecuenciia es 0 1. i < otroNum mero i <= otroNumero o refleja la
condicinn que cuando o se verifique supondr la salida del bucle y el fin de las repeticiones. i++ utiliza el
operador ++ cuyo sign nificado es incrementarr la variable i en una unid dad. Este op
perador se puede
p usar
en otras partes del cdigo,
c no ese exclusivo para los buccles for. Igualmente se dispone del operador
gemelo , que reealiza la opeeracin en sentido s conttrario: reducce el valor dde la variabble en una
unidad. Esscribe el sigu
uiente cdigo o y comprueba los resulttados:
aprenderraprogramar.co
om, 2006-2029
Bucles for con JavaScript. Sentencia break.
E
Es
Est
Este
Ester
Estern
Esterno
Esternoc
Esternocl
Esternocle
Palabra al revs:
oediotsamodielconretsE
aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.
Hemos usado el mtodo charAt(i) que aplicado a una cadena de texto nos devuelve el carcter situado
en la posicin i (considerando que el primer carcter est en posicin 0, el segundo en 1, etc.).
Un bucle for (o de cualquier otro tipo) puede ser interrumpido y finalizado en un momento intermedio
de su ejecucin mediante una instruccin break;. El uso de esta instruccin dentro de bucles solo tiene
sentido cuando va controlada por un condicional que determina que si se cumple una condicin, se
interrumpe la ejecucin del bucle. Por ejemplo: if (i==5) {break;}
Una posibilidad interesante es utilizar mtodos para acceder a nodos del DOM y despus recorrer
dichos nodos con un bucle. Aqu mostramos un ejemplo donde adems usamos arrays, el mtodo
length para conocer el nmero de elementos que forman un array y condicionales. Escribe el cdigo y
comprueba los resultados.
aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.
El resultado esperado es que se muestren inicialmente las cajas con el texto de color blanco y que
cuando pulsemos el botn cambien de color. Pulsando nuevamente el botn, los colores volvern a
cambiar.
aprenderaprogramar.com, 2006-2029
Bucles for con JavaScript. Sentencia break.
EJERCICIO
1) Crea una funcin que pida una palabra al usuario y usando un bucle for y el mtodo charAt, muestre
cada una de las letras que componen la entrada. Por ejemplo si se introduce ave debe mostrar:
Letra 1: a
Letra 2: v
Letra 3: e
2) Crea una funcin denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de
tipo prrafo, muestre el texto que contienen. Por ejemplo para el cdigo de ejemplo visto
anteriormente el resultado debera ser: Prrafo 1 contiene: manzana; Prrafo 2 contiene: pera. Prrafo
3 contiene: fresa. Prrafo 4 contiene (etc., hasta que no haya ms prrafos).
Puedes comprobar si tus respuestas son correctas consultando en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.
WHILE JAVASCRIPT. DO
WHILE. CONTINUE PARA
SALTAR BUCLE. BUCLES
APRENDERAPROGRAMAR.COM
CON LABEL (ETIQUETA O
NOMBRE). EJEMPLOS
(CU01132E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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;.
aprenderraprogramar.co
om, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.
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;.
El bucle do while es muy similar al bucle while. La diferencia radica en cundo se evala la condicin
de salida del ciclo. En el bucle while esta evaluacin se realiza antes de entrar al ciclo, lo que significa
que el bucle puede no llegar ejecutarse. En cambio, en un bucle do while, la evaluacin se hace
despus de la primera ejecucin del ciclo, lo que significa que el bucle obligatoriamente se ejecuta al
menos en una ocasin. Despus de la condicin del while debemos escribir punto y coma. Por ejemplo
while (contador < 10);
A modo de ejercicio, escribe este cdigo y comprueba los resultados que se obtienen con l:
aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.
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:
aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.
La sentencia continue da lugar a que se salte a la siguiente iteracin del bucle sin ejecutar las
instrucciones existentes despus de la sentencia continue. Si escribimos continue; la sentencia afecta al
bucle ms prximo a donde se encuentre la sentencia. Si escribimos continue
nombreDeLaEtiquetaDelBucle; la sentencia afecta a aquel bucle que hayamos referenciado.
El siguiente cdigo nos muestra ejemplos de uso de continue en bucles etiquetados y sin etiquetar:
aprenderaprogramar.com, 2006-2029
Bucles while, do while. Sentencia continue. Bucles etiquetados.
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.
aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.
FUNCIN EVAL
JAVASCRIPT.
GETELEMENTSBY
APRENDERAPROGRAMAR.COM
CLASSNAME . EJEMPLO
CDIGO CALCULADORA
SIMPLE (CU01133E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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');
eval('movverImagen(\'adelante\')')); dar luggar a que e se ejecu ute la llam mada a laa funcin
moverImaagen('adelan nte') y que see devuelva, si
s existe, un valor de retoorno. Fjate que para po
oder incluir
la comillaa simple den
ntro de la cadena de texxto hemos usado
u el escaape del carcter con el simbolo \.
Tambin sera
s vlido usar
u esta sintaxis:
eval("movverImagen('aadelante')");
Como decimos eval ('cadenaDeTTextoPasadaA ALaFuncion'); tiene doss implicacionnes: una evaaluacin o
ejecucin, y la obtenccin de un vaalor de retorno (si existe
e). De este modo
m la funccin eval pue
ede usarse
como argumento paraa otras funciones, por ejeemplo:
alert(Hem
mos obtenido
o un resultad
do: ' + eval("m
moverImage
en('adelante')"));
aprenderraprogramar.co
om, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.
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.
b) Resulta de ejecucin pesada y lenta para el intrprete, pudiendo dar lugar a que nuestra aplicacin
web responda mal o lentamente.
c) Puede poner en riesgo la seguridad de las aplicaciones, ya que si por ejemplo introducimos en eval
una cadena proporcionada por un usuario malicioso, ste puede intentar que se ejecute cdigo que
comprometa la seguridad.
Iremos conociendo alternativas al uso de eval, pero de momento sealaremos que el siguiente cdigo
genera el mismo resultado que el anterior evitando el uso de eval:
function componer(sentido) {
var accion = 'mover';
var sobreElemento = 'Imagen';
var haciaDonde = sentido;
var llamada = accion + sobreElemento+'(\''+haciaDonde+'\')';
alert ('La unin del texto genera ' + llamada);
var tmpFunc = new Function(llamada);
tmpFunc();
}
aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.
GETELEMENTSBYCLASSNAME
El acceso a un nodo concreto del DOM usando getElementById es muy frecuente, pero hay otras
maneras de acceder a los nodos del DOM. Ya conocemos algunas alternativas. Otra de ellas es usar
getElementsByClassName('valorClassBuscado'). Esta funcin nos devuelve un array conteniendo todos
los nodos DOM cuyo atributo class coincide con valorClassBuscado.
El orden en que aparecern los elementos en el array (comenzando con ndice cero) es el mismo en el
que aparezcan en el cdigo de la pgina web. Ejemplo:
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.
A continuacin vamos a estudiar un ejemplo de cdigo donde creamos una calculadora simple usando
JavaScript con la sintaxis getElementsByClassName y la funcin eval para realizar los clculos.
aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.
Hemos incluido cdigo CSS para crear una visualizacin agradable. As, CSS se encarga principalmente
del aspecto y JavaScript se encarga principalmente de la parte dinmica (respuesta ante las acciones del
usuario). Escribe este cdigo y comprueba sus resultados.
aprenderaprogramar.com, 2006-2029
Funcin eval. getElementsByClassName para seleccionar nodos.
<span onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span onclick="pulsada('4')">4</span>
<span onclick="pulsada('5')">5</span>
<span onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span onclick="pulsada('1')">1</span>
<span onclick="pulsada('2')">2</span>
<span onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')"></span>
<span onclick="pulsada('0')">0</span>
<span onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
</body>
</html>
De este cdigo podemos comentar lo siguiente. Debes ser capaz de comprender cmo el cdigo CSS da
lugar a la visualizacin de la calculadora. Debes ser capaz de comprender por qu la invocacin
listaNodosPantalla[0].firstChild nos permite acceder al nodo de texto con el contenido de la pantalla de
la calculadora. Debes ser capaz de comprender cmo manipulamos el contenido de la pantalla
accediendo al nodo texto y cmo modificamos su contenido y mostramos resultados usando la funcin
eval. Si tienes dudas consulta en los foros aprenderaprogramar.com
EJERCICIOS
1) Modifica el cdigo del ejemplo de la calculadora javascript para que en lugar del condicional switch
uses el condicional if (con if else if else if cuando sea necesario).
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.
QUERYSELECTORALL
JAVASCRIPT Y
QUERYSELECTOR.
APRENDERAPROGRAMAR.COM
ACCEDER A ELEMENTOS
POR SELECTORES CSS.
EJEMPLOS (CU01134E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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.
aprenderraprogramar.co
om, 2006-2029
querySelectorAll y querySelector con JavaScript.
La sintaxis es:
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:
Una vez tenemos una coleccin de nodos en una variable, podemos recorrerla usando un bucle for. Por
ejemplo:
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:
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
Esta ltima forma de escritura resulta quizs ms clara, y por eso la consideraremos preferible cuando
podamos elegir entre usar una forma u otra.
aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.
<script type="text/javascript">
function marcarOperadores() {
var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
var nodoIgual = document.querySelector (".igual");
for (var i=0; i<listaNodosOperadores.length; i++) {
listaNodosOperadores[i].style.backgroundColor = "yellow";
listaNodosOperadores[i].style.color = "black";
listaNodosOperadores[i].style.border = "solid 1px";
}
nodoIgual.style.backgroundColor = "yellow";
nodoIgual.style.color = "black";
nodoIgual.style.border = "solid 1px";
}
function marcarNumeros() {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
for (var i=0; i<listaNodosNumeros.length; i++) {
listaNodosNumeros[i].style.backgroundColor = "black";
listaNodosNumeros[i].style.color = "white";
listaNodosNumeros[i].style.border = "solid 1px";
}
}
</script>
</head>
aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>
<!-- Calculadora -->
<div id="calculadora">
<!-- pantalla y tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
</div>
<div class="teclas">
<!-- operadores y otras teclas -->
<span class = "numero" onclick="pulsada('7')">7</span>
<span class = "numero" onclick="pulsada('8')">8</span>
<span class = "numero" onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class = "numero" onclick="pulsada('4')">4</span>
<span class = "numero" onclick="pulsada('5')">5</span>
<span class = "numero" onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class = "numero" onclick="pulsada('1')">1</span>
<span class = "numero" onclick="pulsada('2')">2</span>
<span class = "numero" onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')"></span>
<span class = "numero" onclick="pulsada('0')">0</span>
<span class ="punto" onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
<div id="contenedor">
<div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar nmeros </div>
<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
</div>
</body>
</html>
El resultado esperado es que se muestre una calculadora y en su parte inferior dos botones: Marcar
nmeros y Marcar operadores. Al pulsar sobre Marcar nmeros las teclas correspondientes a los
nmeros de la calculadora debern verse de color negro con los nmeros de color blanco. Al pulsar
sobre Marcar operadores las teclas correspondientes a los operadores (+, -, =, etc.) debern verse de
color amarillo con los operadores de color negro.
Fjate en el cdigo: la seleccin de las teclas afectadas y el cambio de estilos se hace gracias al uso de
los operadores querySelectorAll y querySelector de JavaScript.
aprenderaprogramar.com, 2006-2029
querySelectorAll y querySelector con JavaScript.
EJERCICIO
1) Modifica el cdigo del ejemplo de la calculadora JavaScript para que adems de tener dos botones
que permitan marcar nmeros y operadores con distintos colores tenga:
a) Un botn que permita marcar la tecla C con color rojo fuerte y smbolo C en blanco.
b) Un botn que permita marcar la tecla con el punto con color violeta fuerte y smbolo . en blanco.
d) Un botn que permita limpiar todo lo que se haya marcado y volver a la situacin original (es decir,
que la calculadora se vea tal y como se vea inicialmente).
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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);
}
aprenderraprogramar.co
om, 2006-2029
Recorrer colecciones JavaScript con for in.
Es decir, hemos recorrido el array con un for normal y con un for in. Es mejor usar un for tradicional o
un for in? Ambas formas resultan relativamente equivalentes y tiles, aunque en algunos casos
especficos puede interesar ms usar una forma u otra, y en algunos casos especficos no se obtienen
los mismos resultados usando ambas formas. Nosotros nos inclinamos preferentemente por el uso del
for tradicional, pero en determinadas circunstancias y para algunos usos especiales ms avanzados (de
los que hablaremos cuando estudiemos los objetos en JavaScript y el recorrido de las propiedades de
un objeto) puede ser interesante usar for - in.
Una cuestin a tener en cuenta cuando se hacen usos ms avanzados de for in es que el orden en que
se obtienen los elementos de la coleccin no tiene por qu coincidir con el orden de los ndices. En el
ejemplo anterior tenamos un array var dato = [2, 6, 5, 1, 18, 44]; y el orden esperado de recorrido es 2 -
6 - 5 - 1 - 18 44. Pero el for in no necesariamente respeta este orden, podra hacer un recorrido en un
orden aparentemente aleatorio como 18 - 6 - 44 - 1 5. Con los arrays probablemente no ocurra esto,
pero con otro tipo de colecciones s puede ocurrir. Por tanto al usar un for in podemos estar seguros
de que se van a recorrer todos los elementos en la coleccin, pero no podemos asegurar que ese
recorrido vaya a seguir un orden determinado. Si el orden es importante, ser mejor usar un for
tradicional u otro tipo de control.
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:
Multiplicamos por 5 los nmeros introducidos: 1*5 = 5, 3*5 = 15, 9*5 = 45, 10*5 = 50 y 7*5 =35.
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.
NODELIST JAVASCRIPT.
DIFERENCIAR NODELIST Y
ARRAY. ACCEDER AL
APRENDERAPROGRAMAR.COM
TEXTO DE NODOS CON
TEXTCONTENT,
INNERTEXT (CU01136E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.
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.
aprenderraprogramar.co
om, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.
Element body
id Attribute
Element div class Attribute
Element h1 h2 Element
Text
aprenderaprogramar.com Text
El esquema anterior representa que dentro del elemento div se encuentra el texto Portal web
aprenderaprogramar.com, para aprender. Didctica y divulgacin de la programacin. Sin embargo ese
texto se encuentra repartido por diferentes nodos debido a la presencia de subdivisiones dentro del
elemento div creadas por h1, h2, span, etc.
Si queremos extraer (o definir) el texto contenido en todos los nodos derivados de un nodo padre
podemos usar la propiedad textContent de los nodos.
Es importante resaltar que con textContent se extrae no slo el texto directamente asociado al nodo,
sino tambin el texto contenido en otros nodos hijos.
En el ejemplo grfico anterior, si extraemos el textContent del nodo div obtendremos Portal web
aprenderaprogramar.com, para aprender. Didctica y divulgacin de la programacin, que incluye el
texto encontrado en todos sus nodos hijos.
Hay una alternativa de funcionamiento muy similar a textContent que ha sido utilizada por algunos
navegadores: innerText. Su comportamiento es muy similar al de textContent, aunque no exactamente
igual. innerText no es reconocido por todos los navegadores y no se considera un estndar vlido, por
ello no le prestaremos ms atencin y no lo usaremos. No obstante, hemos considerado conveniente
citarlo por si lo encuentras mientras revisas el cdigo en alguna pgina web.
A modo de resumen: usaremos textContent para extraer el contenido de texto dentro de un nodo y sus
nodos hijos.
aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.
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:
aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.
El resultado esperado depende del navegador que utilicemos. Aqu vamos a mostrar los resultados
obtenidos en dos navegadores diferentes:
aprenderaprogramar.com, 2006-2029
Diferencia entre NodeList y array. textContent, innerText.
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:
Para comprobar si tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.
VERSIONES DE
JAVASCRIPT. DIFERENCIA
CON ECMASCRIPT-262 O
APRENDERAPROGRAMAR.COM
ISO/IEC. ESPECIFICACIN
OFICIAL. ALGO DE
HISTORIA. (CU01137E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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 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.
aprenderraprogramar.co
om, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.
de una organizacin europea, sino plenamente internacional, que se define como un organismo que
asocia a productores de tecnologas de informacin y comunicacin.
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).
aprenderaprogramar.com, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.
1995. Primeras versiones de JavaScript, todava con nombres provisionales como Mocha,
LiveScript.
1997. Definicin del primer estndar JavaScript a cargo de Ecma International que fue
denominado ECMA-262 first edition tambin denominado JavaScript 1.2.
1998. Aparicin del segundo estndar JavaScript denominado ECMA-262 second edition
tambin denominado JavaScript 1.3.
2010. Aparicin de la especificacin del estndar JavaScript denominado ECMA-262 fifth edition
tambin denominado JavaScript 1.8.5.
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.
aprenderaprogramar.com, 2006-2029
Versiones de JavaScript. Diferencia con ECMAScript-262.
Qu inters tiene para nosotros la especificacin oficial? Tiene un inters relativo, ya que se trata de
un documento denso, extenso y que aborda todos los detalles de una especificacin oficial que puede
presentar algunas divergencias con lo que nos encontremos en la realidad trabajando con los
navegadores.
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.
aprenderaprogramar.com, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. This.
INNERHTML JAVASCRIPT.
MODIFICAR TEXTO, HTML
O ELEMENTOS COMO UN
APRENDERAPROGRAMAR.COM
DIV EN TIEMPO REAL.
THIS: ACCEDER AL NODO
ACTUAL. (CU01138E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
oAlQueAcced
nodo demos.innerrHTML = 'Nue
evo cdigo HTML
H en el n
nodo';
aprenderraprogramar.co
om, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. 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):
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
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
aprenderaprogramar.com, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. This.
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.
Se nos muestra un mensaje: Contenido innerHTML actual es: <div style=" width:50%; border-
style:solid; background-color: #FF7F50; ">Ahamham!</div>
Esto refleja que el anterior contenido dentro de h2 ha desaparecido. Ahora dentro de la etiqueta h2
tenemos un div al que hemos aplicado estilos haciendo que muestre un color de fondo naranja, un
borde, y que contiene el texto Ahamham!
Sin embargo, el cdigo fuente o cdigo HTML asociado a la pgina que nos facilita el navegador (que
podemos visualizar accediendo a l a travs de opciones de men) no ha cambiado. Esto significa que
se trata de cambios dinmicos que son controlados por el navegador y no se reflejan en que el cdigo
fuente accesible sea distinto en cada momento. O dicho de otra manera: la visualizacin de una
pgina web puede no coincider con lo que veamos que indica el cdigo fuente si dicho cdigo fuente ha
sido manipulado dinmicamente con JavaScript.
LA POTENCIALIDAD DE INNERHTML
innerHTML tiene una gran potencialidad debido a que nos permite generar cdigo HTML
dinmicamente y esto facilita la manipulacin de pginas web y la creacin de efectos hasta los lmites
de nuestra imaginacin. Todo ello a pesar de que histricamente no formaba parte del lenguaje
JavaScript. Se convirti es un estndar de facto, es decir, no formando parte de la especificacin oficial
JavaScript sin embargo fue introducido y aceptado por todos los navegadores.
En la prxima entrega del curso veremos un ejemplo ms avanzado de utilizacin de innerHTML para el
control dinmico de procesos en el frontEnd. Si el trmino frontEnd te resulta extrao, ten en cuenta
que suele usarse en alusin a cdigo que se ejecuta del lado del cliente, mientras que backEnd suele
usarse en alusin a procesos del lado del servidor. El trabajo con JavaScript se califica normalmente de
trabajo en el frontEnd de las aplicaciones web.
EJERCICIO
Crea un documento html con div central (el cuadrado principal) que contenga a su vez cuatro divs (los
cuadrados secundarios). Debajo del cuadrado principal debe aparecer un botn con el texto Avanzar.
Inicialmente los cuatro cuadrados tendrn fondo blanco y un signo ? de gran tamao. Al pulsar en el
botn por primera vez, el cuadrado superior izquierdo debe aparecer con fondo negro, texto blanco, y
tener como texto El. Al pulsar de nuevo el botn, el cuadrado superior derecho debe aparecer con
fondo blanco y texto negro y tener como texto poder. Al pulsar de nuevo el botn el cuadrado
aprenderaprogramar.com, 2006-2029
InnerHTML JavaScript. Modificar HTML en tiempo real. This.
inferior izquierdo debe aparecer con fondo blanco y texto negro y tener como texto de. Al pulsar de
nuevo el botn el cuadrado inferior derecho debe aparecer con fondo amarillo y texto negro y tener
como texto JavaScript. Si se pulsa nuevamente el botn avanzar debe mostrarse un mensaje que
indique No es posible avanzar ms.
Inicialmente:
? ?
? ?
Avanzar
? ? ? ? de ? de JavaScript
Para comprobar si tu cdigo y tus respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.
EJEMPLO INNERHTML
JAVASCRIPT. EJERCICIO
RESUELTO. MODIFICAR
APRENDERAPROGRAMAR.COM
CAMPOS DE UNA TABLA
DINMICA: EDITAR
CAMPOS. (CU01139E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
EJERCICIO
O RESUELTO CON INNERHTML JAVASSCRIPT
Una pgin
na web cargaa una tabla con datos reelativos al co
ontenido nuttricional de llos alimento
os como se
muestra a continuaci
n:
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
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.
aprenderraprogramar.co
om, 2006-2029
Ejemplo inn
nerHTML JavaScript. Ejercicio resuelto.
c) Debe aparecer
a en la parte infeerior de la taabla el texto: <<Pulse Acceptar para gguardar los cambios o
cancelar para
p anularlos>> y dos botones:
b Aceeptar y Canccelar, que poodrn ser puulsados por el usuario
para Acep
ptar los camb
bios o para cancelar.
c
http://apreenderaprograamar.com/?aliimento=Fresaa&calorias=57&grasas=1.5&
&proteina=0.4
4&carbohidrattos=12.8
Si el usuaario pulsa en
n Cancelar se recargar la tabla origginal (de forrma que no habr ningu
una fila en
edicin).
La siguien
nte imagen reefleja la ideaa de lo que see quiere conseguir:
En este ejjercicio supoonemos que la tabla va a cargar datoss desde una base de dato os, pero commo nuestro
n es el manejo de basess de datos ni de lenguaje
objetivo no es del lado deel servidor siino ver aplicaaciones de
JavaScriptt, nos limitarremos a creaar la tabla maanualmente con el cdigo HTML neceesario.
aprenderraprogramar.co
om, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.
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.
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.
5) Crea una funcin <<function capturarEnvio()>> que sirva para que cuando el usuario pulse el botn
Aceptar, se cree un formulario con datos ocultos (hidden) capturados de las casillas de la fila en edicin
y se enven a la url de destino por el mtodo get. El formulario lo aadirs con innerHTML y el envo lo
puedes realizar con la sentencia javascript document.nombreDelformulario.submit();
6) Crea la funcin anular que recargue la pgina original cuando el usuario pulse el botn cancelar. Esto
puedes hacerlo con la sentencia JavaScript window.location.reload();
SOLUCIN PROPUESTA
A continuacin indicamos el cdigo de la solucin propuesta. Ten en cuenta que esta no tiene por qu
considerarse ni la nica solucin ni la mejor solucin. Es posible que t hayas definido una solucin
mejor que esta. Compara tu solucin con la propuesta y trata de ver las ventajas e inconvenientes de
cada una de ellas.
aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.
Archivo testEdicionTablas.html:
Archivo estilos.css:
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; }
aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.
Archivo functions.js:
function transformarEnEditable(nodo) {
//El nodo recibido es SPAN
if (editando == false) {
var nodoTd = nodo.parentNode; //Nodo TD
var nodoTr = nodoTd.parentNode; //Nodo TR
var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
var nodosEnTr = nodoTr.getElementsByTagName('td');
var alimento = nodosEnTr[0].textContent; var calorias = nodosEnTr[1].textContent;
var grasas = nodosEnTr[2].textContent; var proteina = nodosEnTr[3].textContent;
var carbohidratos = nodosEnTr[4].textContent; var opciones = nodosEnTr[5].textContent;
var nuevoCodigoHtml = '<td><input type="text" name="alimento" id="alimento" value="'+alimento+'" size="10"></td>'+
'<td><input type="text" name="calorias" id="calorias" value="'+calorias+'" size="5"</td>'+
'<td><input type="text" name="grasas" id="grasas" value="'+grasas+'" size="5"</td>'+
'<td><input type="text" name="proteina" id="proteina" value="'+proteina+'" size="5"</td>'+
'<td><input type="text" name="carbohidratos" id="carbohidratos" value="'+carbohidratos+'" size="5"</td> <td>En
edicin</td>';
nodoTr.innerHTML = nuevoCodigoHtml;
nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos'+
'<form name = "formulario" action="http://aprenderaprogramar.com" method="get" onsubmit="capturarEnvio()"
onreset="anular()">'+
'<input class="boton" type = "submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar">';
editando = "true";}
else {alert ('Solo se puede editar una lnea. Recargue la pgina para poder editar otra');
}
}
function capturarEnvio() {
var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos'+
'<form name = "formulario" action="http://aprenderaprogramar.com" method="get" onsubmit="capturarEnvio()"
onreset="anular()">'+
'<input type="hidden" name="alimento" value="'+document.querySelector('#alimento').value+'">'+
'<input type="hidden" name="calorias" value="'+document.querySelector('#calorias').value+'">'+
'<input type="hidden" name="grasas" value="'+document.querySelector('#grasas').value+'">'+
'<input type="hidden" name="proteina" value="'+document.querySelector('#proteina').value+'">'+
'<input type="hidden" name="carbohidratos" value="'+document.querySelector('#carbohidratos').value+'">'+
'<input class="boton" type = "submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar">';
document.formulario.submit();
}
function anular() {
window.location.reload();
}
aprenderaprogramar.com, 2006-2029
Ejemplo innerHTML JavaScript. Ejercicio resuelto.
aprenderaprogramar.com, 2006-2029
createElement, createTextNode, appendChild JavaScript.
JAVASCRIPT
CREATEELEMENT,
CREATETEXTNODE,
APRENDERAPROGRAMAR.COM APPENDCHILD.
MODIFICAR PROPIEDAD
ONCLICK CON JAVASCRIPT
(CU01140E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
doTexto = do
var nod ocument.creeateTextNode('texto conttenido en el nodo');
nombreeNodoPadre..appendChild
d(nombreNo
odoHijo);
aprenderraprogramar.co
om, 2006-2029
createElement, createTextNode, appendChild JavaScript.
Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados en tu navegador:
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.
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:
nombreDeFuncion indica la funcin que debe ejecutarse como respuesta al evento onclick. Param1,
param2, , paramN indica los parmetros que se le pasan a la funcin (en caso de no existir parmetros
simplemente se abrirn y cerrarn parntesis).
aprenderaprogramar.com, 2006-2029
createElement, createTextNode, appendChild JavaScript.
Escribe este cdigo, gurdalo como archivo html y comprueba sus resultados en tu navegador:
Para establecer el valor del atributo onclick de un nodo, hemos de definir una funcin para ser
ejecutada. Esto se hace con la sintaxis que hemos indicado. No es vlido nodoHijo.onclick =
'crearNodoHijo(this) '; porque equivale a asignar un texto, ni nodoHijo.onclick = crearNodoHijo(this);
porque aqu estaramos asignando a la propiedad el hipottico resultado (obtenido con return) de
ejecutar la funcin crearNodoHijo.
El resultado esperado es que cada vez que hacemos click en el div ms interno entro todos los
existentes, se genere un nuevo div, y que los colores se vayan alternando entre color amarillo y un color
salmn. El evento onclick se genera para todos los div existentes (ya que el ms interno est contenido
dentro de todos ellos). Es decir, suponiendo que tengamos por ejemplo tres div uno externo, otro
intermedio y otro interno, al pulsar encima del div interno se generan tres eventos onclick, uno para
cada div. No obstante, en nuestro ejemplo slo generamos un nodo hijo si el nodo que recibe el click no
tiene hijos. De este modo, no se generan nuevos hijos excepto para el div ms interno, que es el nico
que no tiene hijos, mientras que los div ms externos no sufren cambios.
aprenderaprogramar.com, 2006-2029
createElement, createTexttNode, append
dChild JavaScrip
pt.
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.
Prxima entrega:
e CU0
01141E
aprenderraprogramar.co
om, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
JAVASCRIPT
INSERTBEFORE,
CLONENODE (COPIAR O
APRENDERAPROGRAMAR.COM DUPLICAR NODOS),
REMOVECHILD,
REPLACECHILD.
EJEMPLOS (CU01141E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
MS ACCIONES SOBR
RE NODOS DEL DOM
INSERTBEEFORE
nodoQueSerrPadreDelN
NuevoNodo.insertBefore((nuevoNodo
o,
noodoAntesDelQueHaremoosLaInsercin
n);
aprenderraprogramar.co
om, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
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:
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).
aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
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.
aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, 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.
aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
<body>
<div id="nodoRaiz">
Contenido inicial es este texto
</div>
<div id="contenedor">
<div id ="atras" onclick="crearNodoHijo(document.querySelector('#nodoRaiz'))"> Aadir </div>
<div id="adelante" onclick="cambiarNodo()" > Cambiar </div>
</div>
</body>
</html>
Fjate cmo el primer nodo de la serie de hijos lo clonamos para despus de ser reemplazado por el
ltimo, poder insertar el clon en la posicin final.
EJERCICIO
El siguiente cdigo pretenda duplicar un nodo cada vez que se pulsara sobre l, de modo que
inicialmente apareciera en pantalla el mensaje Pulsa aqu para duplicar este nodo y que cada vez que
se pulsara sobre l, se duplicara (tantas veces como veces se pulsara). El problema es que no funciona,
es decir, no obtenemos ningn resultado. Analiza el cdigo y responde estas cuestiones:
1) Por qu no funciona?
2) Realiza los cambios en el cdigo que nos permitan realizar lo que tenamos previsto creando un
nuevo nodo del mismo tipo y con el mismo texto que el deseado y aadindolo como ltimo hijo del
nodo body.
3) Realiza los cambios en el cdigo que nos permitan realizar lo que tenamos previsto clonando el nodo
con el mtodo cloneNode y aadiendo el nodo clonado como ltimo hijo del nodo body.
aprenderaprogramar.com, 2006-2029
insertBefore, cloneNode, removeChild, replaceChild.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
FUNCIONES JAVASCR
RIPT PARA CA
ADENAS DE TEXTO
T
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
toLow
werCase() Transforma la cadena a minsculass texttoUsuario.toLo
owerCase()
aprenderraprogramar.co
om, 2006-2029
Funciones JavaScript para cadenas de texto
LA AUSENCIA DE REPLACEALL
Hemos indicado una sintaxis un tanto extraa para reemplazar todas las apariciones de un carcter en
una cadena: replace (/carcterA/g, 'carcterB') o de una subcadena por otra, con la sintaxis de tipo
replace (/cadenaA/g, 'cadenaB').
Lo que podemos intuir como extrao es que hemos de incluir el primer parmetro entre las barras y
que no aparecen comillas en este primer parmetro. El motivo para ello es la ausencia de una
instruccin replaceAll en JavaScript que nos obliga a buscar alguna alternativa para conseguir el
objetivo de reemplazar todas las apariciones de un carcter o subcadena en una cadena. La alternativa
que hemos sealado aqu se basa en expresiones regulares: una forma de definir patrones de
cadenas a ser reconocidas por JavaScript. Hablaremos de expresiones regulares ms adelante, por lo
que no vamos a entrar ahora en ms detalles.
aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto
EJEMPLO
Escribe este cdigo y gurdalo con extensin HTML. Comprueba los resultados de la ejecucin en tu
navegador.
aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto
aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto
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.
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.
aprenderaprogramar.com, 2006-2029
Funciones JavaScript para cadenas de texto
c) Antes de enviarse los datos del formulario a la pgina de destino, todas las letras del correo
electrnico deben transformarse a minsculas. Por ejemplo si se ha escrito 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
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
CREAR OBJETOS
JAVASCRIPT CON THIS Y
NEW. EJEMPLOS PARA
APRENDERAPROGRAMAR.COM
ENTENDER QU SON LOS
OBJETOS Y PARA QU
SIRVEN. (CU01143E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
OBJETOS JAVASCRIPTT
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.
DOCU
UMENT OBJECT MODEL
L (DOM)
docum
ment
htm
ml
head body
h1 h2 p label lab
bel label label
Ejemplo DOM
aprendera
aprogramar.com
aprenderraprogramar.co
om, 2006-2029
Objetos JavaScript
Un objeto puede tener valores asociados a los que denominamos propiedades o atributos. Por ejemplo
en un nodo al que hayamos denominado nodoDiv el atributo id nos indica el valor de id en el
documento html para la etiqueta asociada.
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.
Fijate cmo los objetos cuando se tratan de mostrar por pantalla (en modo texto) devuelven un
corchete seguido de la palabra object y el tipo de objeto. Por ejemplo [object DocumentType] [object
HTMLDivElement]. En cambio las propiedades o atributos nicamente devuelven un texto, sin los
corchetes ni la palabra object.
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
Nosotros podremos definir moldes de objetos con sus propiedades y con sus mtodos, crear uno o
varios objetos del tipo definido y hacerlos trabajar dentro de nuestro cdigo para facilitar la tarea de la
programacin.
Pensemos en la ventaja que esto nos supone: consideremos que tenemos un array como una serie de
nmeros y queremos conocer su suma. Podramos escribir algo como:
var suma = 0;
var numero = [3, 2, 9];
for (var i=0; i<numero.length; i++){
suma = suma + numero[i];
}
alert ('La suma de los nmeros es: ' + suma);
Pero esto nos obliga a usar un bucle cada vez que queremos conocer la suma de los nmeros
contenidos en el array.
Y si definiramos el array como un objeto al que le aadimos un mtodo por el cual sea capaz de
sumar automticamente el valor de sus nmeros y devolvrnoslo?
Esto sera bastante til. El inters entonces de usar objetos est en que nos permiten combinar datos y
funciones en una misma entidad. El objeto almacenar unos datos (por ejemplo los valores numricos
contenidos en un array) y tendr definidos unos mtodos o funciones internas que permiten realizar
operaciones o procesos (por ejemplo obtener la suma de los valores numricos).
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:
Donde par1, par2, , parN son los posibles parmetros necesarios para crear un objeto.
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
nombrePropiedad1, nombrePropiedad2, etc. son los atributos o propiedades (informacin) que porta el
objeto.
mtodo1, mtodo2, etc. son los mtodos o funciones que pueden ser invocadas a travs del objeto.
Estos mtodos pueden no requerir parmetros o s requerir parmetros. El mtodo1 sera un ejemplo
de mtodo que no requiere parmetros y el mtodo2 un ejemplo de mtodo que s requiere
parmetros.
nombreDelObjeto.nombreDeLaPropiedad
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:
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
function ejemploCreaObjetos() {
var cuenta1 = new CuentaBancaria();
msg = 'El saldo en la cuenta bancaria de Obama es: ' + cuenta1.saldo + ' dlares';
alert (msg);
cuenta1.mostrarDatos();
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplo funciones JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploCreaObjetos()"> Probar </div>
</body>
</html>
Cuando pulsamos sobre el texto Probar se crea el objeto cuenta1 mediante la invocacin de new
cuentaBancaria(). Al crearse el objeto, se establecen sus propiedades, en este ejemplo nombreTitular es
una propiedad y su contenido es Barack. Tambin se establecen mtodos, en este ejemplo el mtodo
mostrarDatos que permite visualizar la informacin que contiene el objeto.
Una vez creado el objeto ya se pueden invocar sus propiedades y sus mtodos con la sintaxis de punto.
Pero este ejemplo es poco til, porque cada vez que creramos un objeto cuentaBancaria, ste objeto
siempre tendra el mismo titular y el mismo saldo.
Normalmente nos interesar crear objetos que respeten el patrn o molde (el tipo definido) pero
donde cada objeto porte unos datos diferentes. Para ello lo ms habitual ser pasar esos datos como
parmetros cuando se crea el objeto. Escribe el cdigo de este ejemplo y prubalo:
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
Resulta un tanto paradjico que para crear un objeto se use function. Y adems para crear los mtodos
dentro del objeto, tambin se usa function. Hablaremos de ello ms adelante.
EJERCICIO
Crea un documento HTML (pgina web) donde exista un botn Crear cuenta bancaria. Cuando el
usuario pulse sobre el botn debe:
b) Crear un nuevo objeto cuentaBancaria (similar al que hemos creado en los ejemplos) que se
inicializar con los datos facilitados por el usuario.
c) Mostrar un mensaje informando de que se ha creado la nueva cuenta bancaria y de los datos
asociados a la cuenta bancaria creada.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
CLASS JAVASCRIPT
CLASES? OBJETOS
PREDEFINIDOS. WINDOW,
APRENDERAPROGRAMAR.COM OBJETO GLOBAL.
NUMBER, MATH, DATE,
REGEXP, ERROR.
(CU01144E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
DEFINICI
N DE OBJETTO
aprenderraprogramar.co
om, 2006-2029
Objetos JavaScript
Casi todo en JavaScript son objetos. Pero no todo. No son objetos los datos que son tipos primitivos:
String, Number, Boolean, Null, Undefined. No obstante, existen tipos objeto equivalentes a los tipos
primitivos. Por ejemplo, podemos crear un String como tipo primitivo o como objeto usando:
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.
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.
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
Escribe por ejemplo alert ('El valor de number max value es ' + Number.MAX_VALUE);
Comprobars que te devuelve un resultado del tipo El valor de number max value es
1.7976931348623157e+308. Por qu podemos invocar Number.MAX_VALUE si no hemos definido el
objeto Number ni sus propiedades y mtodos? Porque este objeto, al igual que otros, son objetos
predefinidos de JavaScript.
Los objetos predefinidos de JavaScript nos resultarn muy tiles para distintos cometidos. Por ejemplo
el objeto Math nos permite realizar clculos matemticos u obtener nmeros pseudoaleatorios. Prueba
por ejemplo a hacer que se muestren varios nmeros aleatorios con alert(Math.random());
Todo objeto JavaScript (incluido las funciones) se considera que son instancias del objeto Object, y
debido a ello heredan propiedades y mtodos de Object. Si no tienes claro qu significa que exista
herencia no te preocupes pues lo iremos viendo a lo largo del curso. Te recomendamos que leas esto:
herencia en POO, slo para tener una idea de lo que significa herencia.
window, el objeto global, tiene sus propiedades y mtodos. La funcin que venimos usando para
mostrar mensajes por pantalla, alert, es un mtodo de window. Cuando escribimos alert('Hola'); en
realidad estamos invocando window.alert('Hola');
Es decir, alert y window.alert son lo mismo para el navegador. El hecho de que no sea necesario escribir
window cuando escribimos alert obedece a que si se invoca una funcin que no ha sido definida de otra
manera, se considera que es un mtodo del objeto global.
JavaScript permite definir tipos de objetos y crear instancias de objetos de diferentes maneras y esto ha
creado algo de confusin entre los programadores. Otros lenguajes tienen una sola manera de hacer
estas cosas, en cambio JavaScript tiene varias. Esto resulta molesto para muchos programadores, sobre
todo cuando tienen que revisar cdigo creado por otras personas. La ventaja de esta existencia de
mltiples formas sintcticas para hacer lo mismo es que cada programador puede elegir la que le
resulte ms cmoda o conveniente, y el inconveniente es la falta de uniformidad en el cdigo
desarrollado por distintos programadores y la necesidad de conocer esas mltiples formas para poder
revisar cdigo no creado por uno mismo.
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
En esta forma de definicin lo que antes eran funciones annimas internas, ahora se han convertido en
funciones con nombre externas.
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).
aprenderaprogramar.com, 2006-2029
Objetos JavaScript
function obtenerSuma() {
var suma=0;
for (var i=0; i<this.contenidoArray.length; i++){ suma = suma + this.contenidoArray[i]; }
return suma;
}
function ejemploObjetos() {
var suma = 0; var serie = [3, 2, 9];
for (var i=0; i<serie.length; i++){ suma = suma + serie[i]; }
alert ('La suma de los nmeros visto como array simple es: ' + suma);
serieOb = new objetoSerie(serie);
alert ('La suma de los nmeros visto como objeto es: ' + serieOb.suma());
otroObjeto = new objetoSerie([2,1,3,4]); alert ('La suma para otro objeto es: ' + otroObjeto.suma());
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>
El problema de usar este mtodo basado en funciones auxiliares definidas externamente es que dichas
funciones son accesibles no slo desde objetos del tipo definido, sino tambin como funciones
normales. Adems, al crearse muchos mtodos basados en funciones externas normalmente se
termina creando un conflicto de nombres: ms de una funcin auxiliar externa con el mismo nombre,
de modo que el navegador no sabe qu funcin es la que debe tomar entre las dos (o ms) con el
mismo nombre. Por ello recomendamos seguir la definicin de tipos de objeto basada en funciones
internas antes que este otro mtodo (que tambin es muy popular).
EJERCICIO
Define un tipo de objeto Medico en JavaScript que tenga como propiedades: nombre (String),
personasCuradas (nmero entero), especialidad (String) y como mtodos un mtodo denominado
curarPersona y otro mtodo denominado mostrarDatos. El mtodo curarPersona deber aadir una
unidad al valor de la propiedad personasCuradas y el mtodo mostrarDatos deber mostrar los datos el
mdico. Por ejemplo, El mdico se llama Juan Eslava, su especialidad es traumatologa y lleva curadas
8 personas. Crea dos objetos del tipo definido, e invoca sus mtodos para comprobar que funcionan
correctamente.
Crea las dos alternativas de cdigo: mtodos con funciones internas annimas o mtodos con
referencia a funciones externas.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
Escribe esste cdigo, gurdalo con extensin httml y comprueba lo que ocurre.
function ejemploObjeto
e os() {
var cochee1 = new Taxi('D Diesel');
var cochee2 = new Taxi('G Gasolina');
alert ('El coche
c 1 tiene capacidad
c ' + co
oche1.getCapaccidad() + ' litros\\n');
alert ('El coche
c 2 tiene capacidad
c ' + co
oche2.getCapaccidad() + ' litros\\n');
}
</script>
</head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejempplos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
aprenderraprogramar.co
om, 2006-2029
Constructores JavaScript. Crear objetos vacos. Singleton.
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.
Hemos visto que podemos declarar un tipo y luego crear objetos usando la invocacin basada en new
nombreDelObjeto. Existen ms alternativas para crear objetos:
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:
aprenderaprogramar.com, 2006-2029
Constructores JavaScript. Crear objetos vacos. Singleton.
Con este cdigo en primer lugar creamos un objeto vaco pintura1. Luego le aadimos una propiedad
valindonos del mtodo defineProperty del objeto predefinido Object. En este mtodo pasamos como
parmetros el objeto del que definimos la propiedad (pintura1), el nombre de la propiedad (autor), el
valor de la propiedad (Vincent Van Gogh) y sus caractersticas writable, enumerable y configurable (no
vamos ahora a hablar sobre estas caractersticas). Posteriormente, accedemos a la propiedad y la
modificamos para que pase a valer Michelangelo. Finalmente definimos una funcin para el objeto
creado. A continuacin resumimos la sintaxis utilizada. Adicin de una propiedad a un objeto:
var nombreObjetoCreado = {
propiedad1: valorPropiedad1,
propiedad2: valorPropiedad2,
propiedadN: valorPropiedadN,
mtodo1: function () { cdigo }
mtodo2: function (par1, par2, , parN) { cdigo }
mtodoN: function () { cdigo }
}
var pintura2 = {
autor: "Vincent Van Gogh",
aoCreacion: 1871,
titulo: 'Los rosales corintios',
getInfo: function () { return this.titulo + ':' + this.autor + ', ' + this.aoCreacion +'.'; }
}
alert(pintura2.getInfo());
aprenderaprogramar.com, 2006-2029
Constructores JavaScript. Crear objetos vacos. Singleton.
Con esta sintaxis no se pueden crear objetos adicionales del tipo definido. El nico objeto existente es
el que hemos definido y creado simultneamente. Algunos autores denominan a esta construccin un
Singleton (objeto nico) por analoga con el patrn Singleton usado en otros lenguajes orientados a
objetos para crear objetos nicos.
EJERCICIO
Una de las utilidades de crear objetos vacos es evitar conflictos de nombres. Supn que creas funciones
como:
function crearEntrada() {
// hacer algo
}
function crearSalida() {
// hacer algo
}
El problema que se presenta es que en otro momento se pueda definir otra funcin con el mismo
nombre que alguna de las ya definidas, creando un conflicto de nombres.
Responde la siguiente pregunta: si se crea una funcin despedir entrar en conflicto con el mtodo
definido?
Nota: una de las libreras ms populares construidas para JavaScript es jQuery. jQuery dispone de un
objeto global al que se denomina $, de modo que se accede a las funciones de jQuery escribiendo algo
como $.nombreFuncion(). Esto es, con la diferencia de escala, algo similar a la creacin del objeto
GestionDeUsuarios visto en el ejemplo. $ evita que jQuery entre en conflictos de nombres.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.
ARRAYS ASOCIATIVOS
JAVASCRIPT? MAPS?
RECORRER PROPIEDADES
APRENDERAPROGRAMAR.COM
DE OBJETOS CON FOR IN.
EJEMPLOS EJERCICIOS
RESUELTOS. (CU01146E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
aprenderraprogramar.co
om, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.
Si lo deseamos podemos crear objetos carentes de mtodos con el nmero de propiedades que
deseemos y despus rescatar esas propiedades invocando el elemento con la sintaxis tipo array. La
sintaxis es:
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?
aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.
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.
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).
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.
Con un for in. La sintaxis a emplear para recorrer las propiedades de un objeto es la siguiente:
aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.
for(nombrePropiedad in ejemploPropiedades) {
msg = msg + 'Propiedad: ' + nombrePropiedad + '. Valor propiedad es: '+ejemploPropiedades[nombrePropiedad]+ ' \n';
}
alert (msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
Las propiedades y forma de acceso asociativo existen para cualquier objeto aunque no sea de tipo
Array?
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.
Algunos programadores la usan porque les gusta, pero hay casos en que es la nica forma de acceder a
una propiedad. Supn que el nombre de una propiedad lo establece el usuario (o se crea
dinmicamente de alguna manera) introduciendo un dato que almacenas en una variable denominada
nombrePropiedad. En este caso no es posible acceder a la propiedad con la sintaxis
nombreObjeto.nombrePropiedad, pero s ser posible acceder con la sintaxis
nombreObjeto[nombrePropiedad].
aprenderaprogramar.com, 2006-2029
Arrays asociativos JavaScript? Recorrer propiedades de objetos.
EJERCICIO
El siguiente cdigo hace uso de la notacin tipo array para invocar propiedades. Tambin crea objetos
nicos (los objetos plus, minus, operaciones y calcular). Analiza el cdigo y trata de comprenderlo.
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.
Este cdigo nos recuerda, entre otras cosas, que: un objeto se puede crear usando la palabra clave var,
una funcin se puede crear usando la palabra clave var, y una propiedad de un objeto puede ser una
funcin. Esta nomenclatura es un poco complicada, pero hay que irse acostumbrando poco a poco a
ella.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
PROTOTYPE JAVASCRIPT.
EJEMPLOS DE
PROTOTIPOS Y HERENCIA.
APRENDERAPROGRAMAR.COM
CMO USARLOS.
SINTAXIS. EFICIENCIA.
(CU01147E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
TaxiRe
enault
fa
abricante
d
direccinFabrica
ante
tipoMotor
Propieda
ades
n
numeroPasajero
os
c
carga
v
velocidad
g
getCapacidad
v
variarCarga Mtodos
s
v
variarVelocidad
Renault podra
p o Taxi (en veez de usar como objeto
haber sido el valorr de la propieedad marca de un objeto
TaxiRenauult), pero ten en cuentaa que esto es e un ejempllo para estudiar la herencia, no pre etendemos
que uses esto como cdigo real.
Supongam
mos ahora qu ue creamos tres objetos de tipo TaxiRenault mediante la sen ntencia new, a los que
denominaamos taxi1, taxi2
t y taxi3. Un esquema para repre
esentarlos po
odra ser el siiguiente:
aprenderraprogramar.co
om, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
Aqu vemos que cada objeto cuenta con sus propiedades y con sus mtodos. Cada propiedad y cada
mtodo ocupa espacio de memoria y genera una carga a la hora de trabajar con ellos. Tambin
observamos que algunas propiedades siempre tienen el mismo valor en todos los objetos. En este
ejemplo la propiedad fabricante siempres es Renault S.A., y la direccin del fabricante siempre es c/R,
Pars. Otras propiedades (aunque casualmente puedan tener el mismo valor en varios objetos) son las
que realmente caracterizan al objeto (tipoMotor, numeroPasajeros, carga, velocidad), es decir, son
propiedades inherentes a cada objeto individual y especfico, no compartidas por todos los objetos.
En cuanto a los mtodos, todos los mtodos hacen lo mismo: reciben (o no) unos datos, y realizan un
proceso. En todos los objetos los mtodos son iguales pero estn repetidos.
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
Si los objetos TaxiRenault fueran objetos muy complejos y generramos cientos o miles de objetos de
esta manera nos encontraramos con que podemos saturar la memoria disponible y ralentizar la
ejecucin de la pgina web, o incluso generar un bloqueo.
La idea de la herencia basada en prototipos JavaScript es definir un objeto (el objeto padre o
prototipo) donde se aloja toda la informacin comn que comparten todos los objetos de ese tipo (los
objetos hijos). De esta manera se evita que cada objeto repita las propiedades y mtodos comunes, lo
cual ahorra memoria y agiliza la ejecucin.
Las propiedades y mtodos comunes se alojan en el prototipo u objeto padre, lo cual podemos
representar con un esquema como este:
TaxiRenault.prototype
fabricante Propiedades
direccinFabricante comunes
getCapacidad
Mtodos
variarCarga comunes
variarVelocidad
Hereda de ...
TaxiRenault
tipoMotor
Propiedades
numeroPasajeros especficas de
carga cada objeto
velocidad
Mtodos
especficos de
cada objeto
La ventaja de este esquema es que las propiedades y mtodos comunes slo existen una vez. Cuando
un objeto invoca una propiedad, por ejemplo taxi1.fabricante, se comprueba si dicha propiedad est
definida como propiedad especfica del objeto, y si no es as, se busca en su prototipo de modo que si la
propiedad existe en el prototipo, se devuelve esa propiedad de la misma manera que si fuera una
propiedad del objeto. Si no se encontrara en el prototipo, se buscara en el prototipo del prototipo (el
padre del padre) y as sucesivamente hasta encontrarla o no: a esto se le denomina cadena de
prototipos o prototype chain y hablaremos sobre esto ms adelante.
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
Lo que este esquema representa es que los objetos taxi1, taxi2 y taxi3 disponen de los atributos
fabricante y direccinFabricante, as como de los mtodos getCapacidad, variarCarga y variarVelocidad.
Pero estos atributos y mtodos ya no estn repetidos en cada uno de los objetos (no son propiedades y
mtodos de instancia) sino que estn alojados en el prototipo, evitando as la repeticin de informacin
y sobrecarga de memoria.
Ten en cuenta que el uso de prototipos y herencia no es algo que haya que utilizar para todo: slo
debemos pensar en ello cuando sea necesario. Cundo es necesario? Esta pregunta debe ser
respondida para cada problema particular, pero en general piensa que no ser necesario pensar en
prototipos y herencia cuando slo se vayan a crear unos pocos objetos. En cambio, en aplicaciones
como juegos donde se usan intensivamente objetos (por ejemplo para representar meteoritos cayendo
desde el espacio) ser til el uso de prototipos.
Si has trabajado previamente con otro tipo de lenguajes orientados a objetos (por ejemplo Java),
posiblemente ests tratando de buscar las similitudes entre Java y JavaScript. Podramos hacerlo, pero
posiblemente esto nos generara un lo de conceptos. Intenta olvidarte de las clases y mecanismos de
herencia propios de otros lenguajes y cambia el chip: piensa en JavaScript.
A diferencia de otros lenguajes (como Java) donde existen clases y objetos, en JavaScript deberamos
decir que existen prototipos y objetos, aunque en muchos casos se usa la palabra clase por analoga.
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
DEFINIR PROTOTIPOS
En JavaScript el prototipo de un objeto est definido de forma predeterminada como una propiedad
oculta de todo objeto, a la que podemos acceder con la sintaxis: nombreObjeto.prototype. El
prototipo es a su vez un objeto (recuerda que una propiedad puede ser tanto un tipo primitivo como un
objeto) y por tanto a dicho objeto se le pueden aadir propiedades y mtodos.
Dado que JavaScript ofrece numerosas alternativas para trabajar con objetos, propiedades y mtodos,
existen numerosas alternativas para definir el prototipo de un objeto.
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90); var taxi2 = new TaxiRenault(2, 6, 350, 80);
var taxi3 = new TaxiRenault(1, 5, 340, 110);
alert ('El fabricante del taxi 2 es ' + taxi2.fabricante + ' y la velocidad del taxi 2 es ' + taxi2.velocidad);
taxi2.variarVelocidad(-10); alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
Las propiedades y mtodos de un prototipo a veces se dice que son propiedades y mtodos de clase o
estticas tratando de buscar analogas con otros lenguajes.
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
TaxiRenault.prototype = {
fabricante: 'Renault, S.A.',
direccionFabricante: 'c/R, Paris',
getCapacidad: function () { if (tipoMotor == 'Diesel') { return 40;} else {return 35;} },
variarCarga: function (variacion) { this.carga = this.carga + variacion; },
variarVelocidad: function (variacion) { this.velocidad = this.velocidad + variacion; }
}
function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90); var taxi2 = new TaxiRenault(2, 6, 350, 80);
var taxi3 = new TaxiRenault(1, 5, 340, 110);
alert ('El fabricante del taxi 2 es ' + taxi2.fabricante + ' y la velocidad del taxi 2 es ' + taxi2.velocidad);
taxi2.variarVelocidad(-10);
alert ('El taxi 2 ha reducido su velocidad y ahora es ' + taxi2.velocidad);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
Herencia basada en prototipos JavaScript (prototype).
Podramos especificar varias formas ms de definir el prototipo de un objeto, pero con lo visto hasta
ahora podemos seguir avanzando.
EJERCICIO
Define un tipo de objeto Cometa cuyas propiedades de instancia (especficas de cada objeto) sean
diametro, temperatura y nombre. La temperatura ser un valor numrico que suponemos est en
grados centgrados. Como propiedad comn a todos los objetos de tipo cometa define
definicionSegunDiccionario (que debe contener la definicin de cometa segn el diccionario) y como
mtodos comunes obtenerRadio (que debe devolver el radio) y obtenerTemperaturaFarenheit (que
debe devolver el valor de temperatura expresado en grados Farenheit). Crea tres objetos de tipo
cometa y comprueba que puedes acceder tanto a las propiedades especficas como a las propiedades
comunes y mtodos comunes desde cada objeto.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Propiedades y mtodos estticos JavaScript.
STATIC JAVASCRIPT.
PROPIEDADES Y
MTODOS ESTTICOS O
APRENDERAPROGRAMAR.COM
DE CLASE. EJERCICIO.
CDIGO EJEMPLOS
BSICOS (CU01148E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
SIMULAR PROPIEDAD
DES Y MTOD
DOS ESTTIC
COS
aprenderraprogramar.co
om, 2006-2029
Propiedades y mtodos estticos JavaScript.
Una propiedad o mtodo esttico no se duplica en cada objeto, sino que existe una nica vez en
memoria.
function ejemploObjetos() {
var taxi1 = new Taxi(1, 4, 300, 90);
var taxi2 = new Taxi(2, 5, 250, 100);
var taxi3 = new Taxi(1, 6, 400, 80);
alert('El nmero de objetos Taxi creados hasta el momento es ' + Taxi.numeroObjetos);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
Propiedades y mtodos estticos JavaScript.
La expresin << if (Taxi.numeroObjetos) >> devuelve true si numeroObjetos es una propiedad existente
de Taxi y false en caso contrario. Si la propiedad esttica no existe cuando se invoca la creacin de un
objeto con new, se crea con la sentencia Taxi.numeroObjetos = 1;
Creado objeto nmero 1, Creado objeto nmero 2, Creado objeto nmero 3. El nmero de objetos Taxi
creados hasta el momento es 3.
function ejemploObjetos() {
var taxi1 = new TaxiRenault(1, 4, 300, 90);
alert ('La velocidad del taxi 1 es ' + taxi1.velocidad);
TaxiRenault.mostrarMensaje(); //Invocamos el nombre del tipo de objeto
alert ('La propiedad esttica fabricante vale ' + TaxiRenault.fabricante);
alert ('Si intentamos obtener la propiedad fabricante para una instancia obtenemos: ' + taxi1.fabricante); //undefined
taxi1.mostrarMensaje(); //ERROR las instancias no tienen acceso a los mtodos estticos
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
Propiedades y mtodos estticos JavaScript.
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).
El resultado ser Soy un taxi Renault con carga undefined Por qu? Porque this hace referencia al
objeto dentro del cual se encuentra la invocacin y en este caso estamos trabajando con un mtodo
esttico que no conoce las propiedades de un objeto en particular.
EJERCICIO
Define un tipo de objeto Meteorito cuyas propiedades de instancia (especficas de cada objeto) sean
diametro, temperatura y nombre. La temperatura ser un valor numrico que suponemos est en
grados centgrados. Como propiedad esttica del tipo meteorito define definicionSegunDiccionario (que
debe contener la definicin de meteorito) y como mtodos estticos obtenerRadio (que debe devolver
el radio a partir de un parmetro diametro) y obtenerTemperaturaFarenheit (que debe devolver el
valor de temperatura expresado en grados Farenheit a partir de un parmetro temperatura). Crea un
objeto de tipo Meteorito con un dimetro, temperatura y nombre y comprueba que puedes acceder a
las propiedades y mtodos estticos mostrando por pantalla la definicin de meteorito, la superficie del
objeto creado y la temperatura Farenheit del objeto creado.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.
HERENCIA JAVASCRIPT:
EJEMPLO CON CDIGO
APRENDERAPROGRAMAR.COM BSICO. JERARQUA DE
CLASES EN CADENA DE
PROTOTIPOS. (CU01149E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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;
}
function ejemploObjeto
e os() {
var taxi1 = new Taxi(1, 6,
6 300, 90);
taxi1.salu
udar();
}
En este ejemplo,
e se define la cclase Taxi y se dota dee contenido al objeto p prototype assignndole
propiedaddes y mtodos. Se crea un objeto taaxi1 y se invooca su mto odo saludar()). En primer lugar este
mtodo ses busca deentro de los mtodos de d la clase y al no en ncontrarse sse busca en el objeto
prototypee, donde s se encuentrra y se devu uelve. Al eje
ecutar el mtodo saludaar() se encu uentra una
invocacin a this.rued
das. Esta pro
opiedad se buusca primeroo en la clasee y al no en
ncontrarse see busca en
el prototipo. Lo mismo ocurre conn numeroPassajeros, aunq que en este caso
c s se encuentra.
El objeto prototype existe como o objeto vacco desde que se crea una instancia. Por qu ? Porque
JavaScriptt lo crea en segundo plaano, como si incluyram
mos dentro del cdigo dee la clase la sentencia:
prototypee = {};
aprenderraprogramar.co
om, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.
Taxi.prototype.ruedas = 4;
Taxi.prototype.saludar = function() {
alert('Hola soy un taxi de ' + this.ruedas + ' ruedas y ' +this.numeroPasajeros +' pasajeros');}
function ejemploObjetos() {
var taxi1 = new Taxi(1, 6, 300, 90);
taxi1.saludar();
}
Podemos hacer una simulacin de jerarqua de clases basndonos en los objetos prototipo. Para ello
hemos de crear prototipos en cadena. Veamos un cdigo de ejemplo bsico:
El cdigo anterior se corresponde con este esquema de herencia, donde podemos observar que hay
objetos Profesor duplicados Por qu? Lo explicamos a continuacin.
aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.
Nota: en gris sealamos propiedades o mtodos accesibles a travs del prototipo. Dichas propiedades o
mtodos no se encuentran en los objetos en s, pero son accesibles.
Persona.prototype
definicion
HERENCIA
Hereda de...
POR PROTOTIPOS
JAVASCRIPT
Persona
definicion
nombre
saludar
de...
He
r ed
Hereda
ad
e ..
.
Profesor Profesor
definicion definicion
nombre nombre
institucionAcademica institucionAcademica
saludar saludar
e...
Hereda
Hereda d
de...
ProfesorInterino ProfesorTitular
definicion definicion
nombre nombre
institucionAcademica institucionAcademica
mesesContrato aosTrabajados
saludar saludar
aprenderaprogramar.com
aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.
Se define profesorTitular de modo que toda instancia de profesorTitular se inicializar con la propiedad
aosTrabajados = 0
Se define Profesor de modo que toda instancia de Profesor se inicializar con la propiedad
institucionAcademica = 'Institucin desconocida';
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 >>
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:
aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.
Esta concepcin tiene un inconveniente importante. Dado que las propiedades y mtodos comunes
(de clase) en JavaScript se establecen a travs del prototipo, usar un mismo objeto como prototipo
para los profesores interinos y los profesores titulares nos impedira diferenciar propiedades comunes
exclusivas de los profesores interinos y propiedades comunes exclusivas de los profesores titulares. Si el
prototipo es un mismo objeto, las propiedades comunes lo seran tanto para profesores interinos como
para profesores titulares.
A modo de conclusin: cuando trabajes con JavaScript no pienses en clases, piensa en objetos.
aprenderaprogramar.com, 2006-2029
Ejemplo herencia JavaScript. Herencia por prototipos.
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
a) Hay tres tipos de hortalizas: zanahoria, lechuga y tomate. La zanahoria tiene como propiedad su valor
calrico que es de 45 cal, mientras que la lechuga tiene 31 cal y el tomate 39 cal.
b) Toda hortaliza tiene como propiedad especfica tipoHortaliza y su valor inicial debe ser indefinido.
c) Todas las hortalizas tienen una propiedad comn: su componente principal: <<Agua>>
c) Una hortaliza es un tipo de planta cultivada. Una planta cultivada tiene como propiedad especfica
nombreCientifico y su valor inicial debe ser desconocido.
d) Una planta cultivada es un tipo de vegetal. Una propiedad de los vegetales es la movilidad y su valor
es comn para todos los vegetales: <<Ser vivo sin movilidad>>
Escribir el cdigo correspondiente. Haciendo uso de la herencia por prototipos, crear un objeto de tipo
tomate al que se denomine tomate1 y hacer que se muestre por pantalla <<tomate1 tiene la propiedad
movilidad: Ser vivo sin movilidad>>.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
CALL JAVASCRIPT.
DIFERENCIAS CON APPLY.
CONSTRUCTORES CON
APRENDERAPROGRAMAR.COM
HERENCIA EN CADENA
(PROTOTYPE CHAIN).
EJEMPLOS (CU01150E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.
aprenderraprogramar.co
om, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
Se define el tipo de objeto Profesor con los atributos nombre y salarioBase. Se define la funcin
saludar() que carece de propiedades y que cuando se invoca muestra por pantalla un mensaje.
Se crea un objeto de tipo Profesor cuya propiedad nombre vale Carlos.
Se llama a la funcin saludar() y como resultado se obtiene Hola, soy undefined. Por qu? Porque el
objeto this en este caso es la propia funcin saludar y dicha funcin no tiene definido atributo nombre,
por tanto al tratar de mostrar this.nombre muestra undefined.
A continuacin se llama a la funcin saludar indicando que el objeto unProfesor actuar como objeto
this para la ejecucin de la funcin. Como consecuencia, this.nombre vale Carlos y se muestra por
pantalla el mensaje Hola, soy Carlos.
El quid de la cuestin est en que cualquier funcin puede invocarse como mtodo de cualquier objeto
a travs del mtodo predefinido JavaScript call. En el ejemplo que hemos usado podemos destacar
algunas cuestiones:
a) saludar() es lo mismo que saludar.call(). Al indicar saludar.call() y no pasar como parmetro ningn
objeto, es la propia funcin saludar quien acta como this.
b) La funcin saludar podra ser usada por diversos tipos de objetos que tuvieran un atributo name. La
funcin actuara as como mtodo compartido por numerosos tipos de objetos, pudiendo estar fuera de
la definicin de los mismos y fuera de la cadena de herencia de los mismos.
Veamos ahora la sintaxis usando parmetros. Escribe este cdigo y comprueba el resultado.
El resultado esperado es: Hola, soy undefined y saludo a undefined con undefined. >>> Hola, soy Carlos
y saludo a Ernesto con afecto.
En la invocacin saludar.call(unProfesor, 'Ernesto', 'afecto'); el parmetro unProfesor indica quin va a
actuar como objeto this en la ejecucin de la funcin saludar, mientras que 'Ernesto' y 'afecto' son los
parmetros que se le pasan a la funcin.
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
APPLY JAVASCRIPT
La funcin apply permite llamar a cualquier funcin JavaScript indicndole el objeto que actuar como
this dentro de la funcin llamada, de la misma forma que con la funcin call. La diferencia de apply con
call est en que los parmetros se pasan con un array en vez de separados por comas. De este modo
apply consta exactamente de dos parmetros: el objeto que actuar como this y un array.
Veamos un ejemplo bsico para comprender lo que significa y permite esta funcin. Escribe el cdigo y
comprueba el resultado.
El resultado de ejecucin esperado es: Hola, soy undefined y saludo a undefined con undefined >>>
Hola, soy Carlos y saludo a Ernesto con afecto >>> Hola, soy Carlos y saludo a Christian con odio.
Call y apply son dos funciones muy similares. Cundo usar una y cundo usar otra? En muchos casos
ser indistinto usar una y otra. Sin embargo apply nos provee de la potencia de los arrays, lo que la hace
interesante cuando por algn motivo necesitemos crear bucles que recorran los parmetros pasados en
el array, o cuando simplemente no se conozca a priori el nmero de parmetros que deben pasarse
porque se establezcan de forma dinmica.
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
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?
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?
function ejemploObjetos() {
var unProfesorInterino = new ProfesorInterino(4, 'Universidad de Chapingo');
var msg = 'El objeto unProfesorInterino tiene ' + unProfesorInterino.mesesContrato + ' meses de contrato';
msg = msg + ' y pertenece a la institucin '+unProfesorInterino.institucion;
alert(msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
Analicemos lo que ocurre. Hemos modificado la funcin ProfesorInterino para que adems de las
propiedades intrnsecas (mesesContrato) pueda recibir la institucin, propiedad de los objetos tipo
Profesor.
Con la invocacin Profesor.call(this, institucion); estamos haciendo que se ejecute la funcin Profesor
pasndole como this el objeto ProfesorInterino y como parmetros la institucin. Al ejecutarse la
funcin Profesor, el objeto ProfesorInterino pasa a tener todos los atributos y mtodos de un Profesor
ya que se ejecuta this.institucion = institucion || 'Desconocida'; y this.salarioBase = 1200.
De este modo, el objeto ProfesorInterino dispone de las propiedades y mtodos propios de los objetos
Profesor.
Pero, realmente se comporta el objeto unProfesorInterino como los objetos de tipo Profesor? La
respuesta es que no: a travs de la llamada call hemos logrado que las propiedades y mtodos
declarados con this para Profesor estn disponibles para el profesor interino, pero qu ocurre con las
propiedades y mtodos comunes de los objetos Profesor, es decir, aquellas propiedades y mtodos que
hayamos especificado en el prototipo de Profesor. Lo que ocurre es que no estn disponibles para
unProfesorInterino. Comprobmoslo. Escribe este cdigo y comprueba los resultados.
function ejemploObjetos() {
var unProfesor = new Profesor(); unProfesor.saludar();
var unProfesorInterino = new ProfesorInterino(4, 'Universidad de Chapingo');
var msg = 'El objeto unProfesorInterino tiene ' + unProfesorInterino.mesesContrato + ' meses de contrato';
msg = msg + ' y pertenece a la institucin '+unProfesorInterino.institucion;
alert(msg);
unProfesorInterino.saludar();
}
</script></head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemploObjetos()"> Probar </div>
</body></html>
El resultado esperado es: Hola trabajo en Desconocida y mi salario base es 1200 >> El objeto
unProfesorInterino tiene 4 meses de contrato y pertenece a la institucin Universidad de Chapingo >>
error (la lnea unProfesorInterino.saludar(); no se ejecuta).
Lo que comprobamos es que los objetos de tipo Profesor conocen el mtodo saludar (que es un
mtodo comn a todos los objetos de tipo Profesor definido a travs de su prototipo), pero sin
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
embargo los objetos de tipo ProfesorInterino no conocen el mtodo saludar, lo que demuestra que no
es estn comportando realmente como Profesor.
Para que los objetos de tipo ProfesorInterino dispongan de todo lo que dispone Profesor nos falta hacer
que el prototipo de todo objeto ProfesorInterino sea un objeto Profesor. De este modo, cuando se
busque el mtodo saludar se buscar en primer lugar como mtodo intrnseco de ProfesorInterino, al
no encontrarse se buscar en el prototipo, que al ser un objeto Profesor s podr responder cuando se
invoque el mtodo saludar.
Para ello aadiremos la lnea: ProfesorInterino.prototype = new Profesor();
Con esta lnea ya los objetos de tipo ProfesorInterino conocen las propiedades y mtodos comunes de
Profesor.
Con esta lnea ya se ejecuta la invocacin unProfesorInterino.saludar() dando como resultado que se
muestre por pantalla <<Hola trabajo en Universidad de Chapingo y mi salario base es 1200>>.
En resumen, para implementar una herencia completa y poder crear instancias pasando parmetros
para generar objetos que hereden propiedades y mtodos de un supertipo usaremos la invocacin call
al supertipo y adems estableceremos que el prototipo es un objeto del supertipo.
En el primer caso (A) se ejecuta la funcin Profesor pasando como objeto this al objeto que lo llama y
esto da lugar a que el objeto incorpore las propiedades y mtodos del objeto llamado.
En el segundo caso (B) se define Profesor como un mtodo propio del objeto y a continuacin con la
invocacin this.prop(instituticion) se ejecuta dicho mtodo.
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
En principio call o apply resultan ms eficientes, ya que nos ahorramos crear el mtodo prop para
posteriormente ejecutarlo, pero a efectos prcticos suele resultar indistinto y este tipo de invocaciones
es frecuente encontrarlo cuando se revisa cdigo JavaScript.
RESUMEN
La herencia en JavaScript no funciona como en otros lenguajes y en cierta medida ms que de herencia
propiamente dicha podramos hablar de simulacin de herencia. El siguiente cuadro resume las vas
principales para generar herencia en JavaScript:
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.
EJERCICIO 1
c) Una Persona tiene un nombre y una nacionalidad. Como mtodo comn a todas las personas
tenemos mostrarNacionalidad, que muestra un mensaje informando de la nacionalidad.
Se desea crear un objeto de tipo MedicoEspecialista pasndole como parmetros para su creacin
adems de sus propiedades intrnsecas las propiedades que hereda de sus supertipos y sobre este
objeto invocar el mtodo mostrarNacionalidad(), que deber ser reconocido por herencia.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
call y apply JavaScript. Constructores con herencia en cadena.
EJERCICIO 2
Crea un cdigo que represente el siguiente esquema de herencia permitiendo instanciar los subtipos
pasndole los parmetros necesarios para inicializar las propiedades de los supertipos. Crea un objeto
ProfesorTitular profesorTitular1 al que le pases como parmetros 8 (aos trabajados), Universidad de
Len (institucin acadmica), Juan (nombre), e invoca el mtodo saludar sobre este objeto.
He
red
ad
e..
.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.
DEPURAR JAVASCRIPT.
CONSOLE.LOG. DEBUG DE
ERRORES CON FIREFOX
APRENDERAPROGRAMAR.COM
(FIREBUG), CHROME,
INTERNET EXPLORER.
IDES. (CU01151E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.
aprenderraprogramar.co
om, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.
QU ALTERNATIVA ELEGIR?
Dado que existen numerosas alternativas la pregunta que nos planteamos es: qu alternativa elegir?
Para el desarrollo web profesional posiblemente debiramos decantarnos por un IDE y conocer sus
herramientas de depuracin nativas o en forma de extensiones. Pero en este curso, donde nos
centramos en comprender JavaScript y no en la productividad como programadores, vamos a
recomendar que utilices las herramientas de desarrollador (developer tools) de tu navegador web,
principalmente con el fin de tener ayuda a la hora de localizar errores en nuestro cdigo JavaScript. Esta
es una va relativamente cmoda, rpida y sin necesidad de instalacin de software adicional, para
localizar errores en nuestro cdigo.
Qu navegador ofrece mejores posibilidades de cara a la depuracin? Preferimos no opinar al
respecto. Firefox ha tenido siempre muy buena prensa entre los programadores e Internet Explorer al
revs. Pero el mundo del desarrollo de aplicaciones web y apps para smartphones se mueve a gran
velocidad y las opiniones que eran vlidas hace unos aos pueden no serlo en la actualidad.
Te recomendamos que optes por las herramientas de depuracin de tu propio navegador web (el que
vengas utilizando), y si consideras que no te responde adecuadamente, simplemente prueba otro.
UN CDIGO DE EJEMPLO
A modo de ejemplo consideraremos que hemos desarrollado un cdigo JavaScript pero al tratar de
ejecutarlo no hay respuesta alguna. Entendemos (suponemos) que hay un error y queremos que una
herramienta de depuracin nos facilite su localizacin.
El cdigo que usaremos es este:
CACH DE NAVEGADOR
Un problema que aparece en ocasiones es que el navegador guarda informacin en cach de modo que
no se ejecuta el cdigo que hemos modificado, sino cdigo guardadado en la cach del navegador.
Normalmente este problema se soluciona haciendo una recarga completa pulsando CTRL + F5 (teclas
ctrl y F5 al mismo tiempo).
aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.
CONSOLE.LOG
La consola tiene otra utilidad clave: permite mostrar mensajes informativos introducidos en el cdigo
pero no visibles como contenido de la pgina web.
Para mostrar mensajes a travs de la consola usaremos la sintaxis: console.log(argumento), donde
argumento es aquello que debe ser mostrado por consola (puede ser un texto, una variable, un objeto,
etc.).
Por ejemplo:
var unObjeto = new Array();
console.log(unObjeto);
aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.
Nos devuelve a travs de la consola (que tendremos que haber activado previamente pulsando F12)
Array [ ] y la lnea en que se genera el mensaje.
Console.log tiene un funcionamiento anlogo a alert pero una ventaja importante respecto a esta
funcin: por un lado, si olvidas en el cdigo un console.log las repercusiones sern menores puesto que
no ser visible a menos que se active la consola, y los usuarios no navegan con la consola activada. Por
otro lado, permite mostrar mensajes sin detener la ejecucin del script, lo cual nos ahorra tiempo y
facilita el trabajo.
RESUMEN
Existen mltiples vas para depurar cdigo JavaScript y puedes optar por aquellas que mejor se adapten
a t. Como alternativa rpida y sencilla, te recomendamos que cuando ests probando cdigo trabajes
con la consola de tu navegador desplegada y que te valgas de console.log para mostrar mensajes que
no detengan la ejecucin de los scripts.
EJERCICIO
Ejecuta este script con la consola de tu navegador activada. Qu mensajes aparecen en la consola
antes y despus de pulsar <<Probar>>? Corrige el error que contiene el cdigo. Qu mensajes
aparecen ahora en la consola? Qu interpretacin podemos darle a los resultados que hemos
obtenido?
aprenderaprogramar.com, 2006-2029
Depurar JavaScript. Debugging de errores con Firefox, Chrome, etc.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.
OPERADOR CONDICIONAL
TERNARIO TIPO IF CON
INTERROGACIN
APRENDERAPROGRAMAR.COM
(JAVASCRIPT, JAVA, ETC.)
Y DOS PUNTOS. EJEMPLOS
(CU01152E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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:
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<B
B && B>C ? disspara(): esperra(); Se ejecuta espera()
A<B &&
& B>C || B==3 ? dispara(): espera();
e Se ejecuta disspara()
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.
aprenderraprogramar.co
om, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.
ejemplo for (var i = A==5 ? k(): t(); i<8; i++) implica que el bucle comienza con i valiendo lo que retorne
la funcin k() si A vale 5, o lo que retorne la funcin t si A no vale 5.
Usar el operador condicional ternario tiene ventajas e inconvenientes.
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
aprenderaprogramar.com, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.
EJERCICIO
Ejecuta este script y responde a las siguientes preguntas (algunas de ellas corresponden a cuestiones
que hemos visto a lo largo del curso):
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
aprenderaprogramar.com, 2006-2029
Operador condicional ternario JavaScript. Ventajas e inconvenientes.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.
FUNCIONES ARRAYS
JAVASCRIPT. PUSH, SORT
(ORDENAR NMEROS),
APRENDERAPROGRAMAR.COM
CONCAT, JOIN, POP,
SHIFT, SLICE, SPLICE.
(CU01153E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
ADIR ELEMEENTOS O CO
FUNCIONES PARA A ONCATENAR ARRAYS
FUNCI
N UTTILIDAD EJEMPLO
OS aprenderraprogramarr.com
aprenderraprogramar.co
om, 2006-2029
Funciones predefinidas JavaScript para arrays.
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.
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.
indexOf(x) Busca x dentro del array y devuelve la posicin var result = A1.indexOf(14);
de la primera ocurrencia.
lastIndexOf() Busca x dentro del array empezando por el final var result = A1.lastIndexOf(14);
y devuelve la posicin de primera ocurrencia.
aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.
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.
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.
aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.
Definir una funcin de comparacin que permita ordenar un array numrico de menor a mayor es
sencillo:
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.
aprenderaprogramar.com, 2006-2029
Funciones predefinidas JavaScript para arrays.
EJERCICIO 1
Crea un script donde a partir del array [33, 2, 36, 55, 4, 1] se realicen los siguientes procesos:
a) Mostrar el array ordenado de menor a mayor y de mayor a menor usando la funcin sort y
definiendo la funcin de ordenacin de forma annima, es decir, debers invocar X.sort(function () {
} ) definiendo la funcin de forma annima en vez de cmo funcin con nombre.
b) Crea una variable de nombre deMenorAMayor que contenga el resultado de ordenar de menor a
mayor los elementos del array.
c) Crea una variable de nombre deMayorAMenor que contenga el resultado de ordenar de mayor a
menor los elementos del array.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un script donde sea posible ordenar palabras por orden alfabtico sin tener en cuenta la existencia
de maysculas o minsculas. Por ejemplo, declarar var miArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo',
'nieve', 'Zumba, 'barco'] y tras ordenar obtener =[ 'Abaco', 'abeja', 'barco', 'Moto', 'nieve', 'Sapo', 'soto',
'Zumba].
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.
EXPRESIONES REGULARES
JAVASCRIPT. REGEX. NEW.
CARCTER ESPECIAL.
APRENDERAPROGRAMAR.COM
NMERO, LETRA,
ESPACIO BLANCO.
(CU01154E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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.
Camin SS
aprenderraprogramar.co
om, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.
Hemos indicado "apis mellifera sativa" entrecomillada para indicar que la cadena est compuesta por
varias palabras separadas por espacios en blanco. En este caso, la cadena contiene dos espacios en
blanco. Hemos escrito \"apis mellifera sativa\" para representar una cadena donde las comillas forman
parte de la cadena (pero no las barras inclinadas, que son el smbolo de escape que nos sirve para
indicar que las comillas deben leerse literalmente). Esta cadena comienza con una comilla y contiene al
menos una a minscula, por lo que cumple con los requisitos.
Tener en cuenta que en una expresin regular los espacios en blanco cuentan. Por tanto no es lo mismo
"apis mellifera sativa" que "apis mellifera sativa". Un solo espacio en blanco hace que dos
cadenas se consideren distintas.
Las expresiones regulares son formas estandarizadas de expresar un patrn siguiendo ciertas reglas
para definirlo. A un computador no podemos indicarle con una frase cul es el patrn que queremos
comprobar, tendremos que indicrselo con una sintaxis normalizada.
pattern: 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.
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.
a) En forma de literal: var miExpresionRegular = /as?.a/ representa a todas las cadenas que contienen
una subcadena con la primera letra de la subcadena una a, seguida de una s, opcionalmente seguida de
cualquier letra, y seguida de una a.
aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.
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.
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.
El resultado esperado es: Patrn: as?.a >> Contiene casamentero el patrn? : true
Los principales caracteres especiales para construir expresiones regulares JavaScript estn reflejados en
la siguiente tabla. Los parntesis tienen un significado especial que veremos en la siguiente entrega.
aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.
aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.
aprenderaprogramar.com, 2006-2029
Expresiones regulares JavaScript. Caracteres especiales.
EJERCICIO
Dada la expresin regular de JavaScript /^[A-C]\w+\ses\s\w+/ indicar cules de las siguientes cadenas
hacen match con la expresin regular, y en caso de hacer match, qu parte o partes son las que hacen
match:
a) Juan es guapo
b) Adriano no es feo
d) Adriano ya es guapo
e) No es ahora
f) Ahora es no
g) Adriano es guapo
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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
/as?.a/ii
i No diferenciar en
ntre maysculas y minscu
ulas
new ReegExp("as?.a", "i")
Bssqueda multilnea. Para loss indicadores de
commienzo de cad dena ^ y fin de cadena $, si se /as?.a/m
m
m aplica esta ban ndera, se tieenen en cuenta
matches en todos los princip pios y finales de new ReegExp("as?.a", "m")
lneea, no slo al principio
p y final de cadena.
var miEExpReg = /^i/m
mi
Indica que har match con cualquier
Combinacciones Se pueden especcificar varios flags
f comiennzo de lnea p
por una i min
nscula I
maysccula (bsqueeda multilne ea y sin
diferenciar maysculas y minsculas).
aprenderraprogramar.co
om, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.
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.
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.
aprenderaprogramar.com, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.
Los parntesis sirven para agrupar varios caracteres y afectarlos por un carcter especial.
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).
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.
aprenderaprogramar.com, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.
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.
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:
aprenderaprogramar.com, 2006-2029
Parntesis en expresiones regulares JavaScript. Flags. Mtodos.
En este ejemplo el match de la expresin regular es <<Alberto Flores Rubalcaba>>, y cada palabra es
una subexpresin por encontrarse entre parntesis en la expresin regular. En el replace podemos
identificar cada subexpresin como $1 (primera subexpresin), $2 (segunda) y $3 (tercera).
En el replace indicamos que la coincidencia de la expresin regular sea sustituida por la cadena formada
por la tercera palabra seguida de la segunda, una coma y la primera palabra.
De este modo el resultado esperado es que se muestre por consola: "Rubalcaba Flores, Alberto: tiene
calificacin de 10".
EJERCICIO
Crea un documento HTML (pgina web) donde exista un formulario que se enve por el mtodo GET. Se
pedir al usuario que introduzca nombre, apellidos y correo electrnico. Define dentro de la etiqueta
form que cuando se produzca el evento onsubmit (pulsacin del botn de envo del formulario) se
ejecute una funcin a la que denominaremos validacionConExpReg que no recibe parmetros.
La funcin validar debe realizar estas tareas y comprobaciones utilizando expresiones regulares:
a) Comprobar que el nombre contiene al menos tres letras. Si no es as, debe aparecer un mensaje por
pantalla indicando que el texto no cumple tener al menos tres letras. Por ejemplo si se trata de enviar
Ka como nombre debe aparecer el mensaje: El nombre no cumple tener al menos tres letras.
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
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.
CONVERTIR STRING A
NUMBER JAVASCRIPT.
REDONDEAR. TOFIXED,
APRENDERAPROGRAMAR.COM
ISNAN, TOPRECISION,
VALUEOF. PARSEINT Y
PARSEFLOAT (CU01156E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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().
Not-a-Numbeer) que se usa para repreesentar un vaalor numrico no vlido ((p.ej. 0/0).
a) NaN (N
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.
PROPIEDA
ADES DEL OB
BJETO NUMB
BER
aprenderraprogramar.co
om, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.
Las propiedades de Number son de slo lectura, es decir, no podemos establecer valores distintos de
los predefinidos para ellas.
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.
aprenderaprogramar.com, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.
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);
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:
Donde unaVarOtroTipo puede ser un String, un objeto Date, o cualquier otro objeto del que se pueda
realizar una representacin numrica.
Existen dos funciones globales tiles para convertir cadenas en valores numricos: parseInt y
parseFloat.
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.
En el primer caso, extrae el valor numrico hasta all donde le es posible. En el segundo caso, al no
comenzar la cadena con algo que pueda convertirse a numrico, devuelve NaN.
aprenderaprogramar.com, 2006-2029
Funciones para nmeros y conversin de Strings a nmeros.
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).
EJERCICIO
a) Se pida al usuario que introduzca un nmero superior a 10000000 y se muestre por pantalla ese
nmero con tres dgitos significativos. Si el nmero introducido no cumple la condicin, se volver a
solicitar que se introduzca.
b) Se pida al usuario que introzca un nmero con 4 decimales y se muestre por pantalla ese nmero
redondeado a dos decimales. Si el nmero introducido no cumple la condicin, se volver a solicitar que
se introduzca (para ello habr que analizar que la cadena introducida cuente con cuatro dgitos despus
del carcter de punto decimal).
c) Se pida al usuario que introduzca una frase que comience por un nmero que puede ser entero o
decimal. Para dicha frase, se devolver el nmero entero que se pueda extraer, y el nmero decimal
que se pueda extraer. Deber analizarse la entrada con una expresin regular, de modo que si no
cumple la condicin, se vuelva a solicitar la introduccin de la frase.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
EVENTOS JAVASCRIPT.
TIPOS. PROPAGACIN.
MODELOS. MANEJADOR
APRENDERAPROGRAMAR.COM
O EVENT HANDLER.
CONFIRM. EJEMPLO.
(CU01157E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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:
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.
Cada eveento tiene un nombre, al que tambin se llam ma tipo de evento. P Por ejemplo al evento
correspon
ndiente a haacer click see le identifica como on malmente los nombres se
nclick. Norm s forman
anteponieendo el preffijo on con el nombre dee lo que ocurre en inglss. As por ejeemplo onlo
oad indica
cuando termina
t la caarga del docu
umento HTM ML.
aprenderraprogramar.co
om, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
Cada evento est asociado a un objeto que es quien recibe o detecta el evento, al que se denomina
target u objetivo del evento. As, el evento onclick del ejemplo anterior tiene como objetivo un nodo
HTML de imagen, y un nodo HTML div. El evento onload tiene como target el objeto window u objeto
global.
Al igual que definir la estructura de un documento HTML es complejo y por ello se cre el DOM
(Document Object Model), para poder describirla y manejarla, existen modelos de eventos para
describir y manejar los eventos.
El problema reside en que a lo largo del tiempo se crearon distintos modelos de eventos propuestos
por distintas organizaciones (Netscape, Microsoft, W3C, etc.). Distintos navegadores adoptaron
distintos modelos de eventos, lo cual haca difcil que el cdigo programado y til en un navegador
funcionara en otro que usaba un modelo de eventos distinto.
Un modelo de eventos implica como aspecto importante qu eventos son detectados y cules son sus
nombres. Pero esta no es la nica cuestin relacionada con los eventos. Otra cuestin importante es en
qu orden se ejecutan dos eventos que suceden simultneamente. Por ejemplo, si tenemos un evento
onclick definido para un div, y otro evento onclick definido para una imagen dentro del div, al hacer
click sobre la imagen se producen dos eventos simultneamente: el evento onclick correspondiente al
div y el evento onclick correspondiente a la imagen. Qu cdigo de respuesta se debera ejecutar
primero, el correspondiente al div o el correspondiente a la imagen? Al orden en que se van disparando
los eventos se le denomina propagacin de eventos. La propagacin de eventos puede ser desde dentro
hacia fuera (p.ej. primero el evento de la imagen y luego el del div), desde fuera hacia dentro (p.ej.
primero el evento del div y luego el de la imagen), o para casos ms complejos, segn otras formas de
establecer el orden.
Cuestiones como esta tambin estn comprendidas en el modelo de eventos. Al existir distintos
modelos de eventos, el resultado era (y en cierta medida es) que el orden en que se ejecutaban los
eventos dependa del navegador que estuviramos utilizando.
Con el paso del tiempo se ha ido produciendo cierta estandarizacin entre navegadores, aunque esta
todava no es completa. Nosotros en este curso no vamos a entrar a estudiar en profundidad ningn
modelo de eventos en concreto, slo haremos referencias puntuales a ellos cuando lo consideremos
necesario. Nos vamos a limitar a describir la forma ms estandarizada y aceptada por la industria (los
fabricantes de navegadores) y la comunidad de programadores para trabajar con eventos.
Pero debes tener en cuenta lo siguiente: distintos navegadores pueden responder de distinta manera a
un mismo cdigo. Algunos navegadores pueden no reconocer el cdigo que s es reconocido por otros
navegadores. Algunos navegadores pueden considerar como eventos algo que otros navegadores
simplemente ignoran y no son capaces de capturar.
Debemos preocuparnos por esto? Pues la verdad es que no, ya que eso no nos aportar ninguna
solucin. La estrategia que recomendamos es tratar de usar el cdigo ms inter-compatible que
podamos y sepamos, siendo conscientes de que hoy por hoy es imposible conseguir que una pgina
web se muestre exactamente igual y responda exactamente igual en todos los navegadores.
aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
Conociendo que no podemos cambiar esta situacin, nuestro objetivo ser crear pginas web cuyo
funcionamiento sea correcto en el mayor nmero de navegadores posible.
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:
Donde accin a ejecutar es un fragmento de cdigo JavaScript, que en caso de comprender varias
sentencias deben ir separadas por punto y coma.
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:
Al invocar a this estamos pasando el elemento HTML, nodo del DOM, <a>, lo cual puede ser de inters
en numerosas ocasiones en que nos interese ejecutar una serie de acciones sobre el elemento que
recibe la accin.
Con esta forma de manejo nos podemos plantear una pregunta: si hay una accin predeterminada
cuando se pulsa el link (dirigirnos a la url de destino) Qu se ejecuta primero, el cdigo de respuesta o
la accin predeterminada? Se estandariz que en primer lugar se ejecuta el script de respuesta al
evento, y luego la accin predeterminada.
Pero como en programacin todo es posible, se plante la cuestin: Por qu no idear una forma de
hacer que la ejecucin predeterminada se produzca slo cuando nosotros queramos?
aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
La solucin que se le dio a esto fue permitir que el manejador del evento devolviera un valor booleano:
true (por defecto) si se deba ejecutar la accin predeterminada, o false para evitar que se ejecutara la
accin predeterminada.
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.
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).
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.
aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<a href="http://aprenderaprogramar.com">Aprende a programar.</a>
<a href="http://aprenderaprogramar.es">Intntalo, ser divertido.</a>
</body>
</html>
<script type="text/javascript">
var elemsA = document.getElementsByTagName('a');
for (var i=0;i<elemsA.length;i++) {
elemsA[i].onclick = function() {return confirm('Ud. va a ser transferido de url hacia ' + this.href);}
}
</script>
Sobre este ejemplo tenemos que llamar la atencin sobre algunas cuestiones:
a) El cdigo JavaScript est incluido detrs del cdigo HTML. Por qu? Porque si es incluido antes del
cdigo HTML, se ejecuta antes de que se haya cargado la pgina, y al no haberse cargado los elementos
HTML no es posible establecer la propiedad onclick de los mismos (es decir,
getElementsByTagName(a) nos devuelve cero elementos cuando todava no se ha cargado la pgina
web.
b) A cada nodo de tipo link (a) se le asigna como propiedad onclick una funcin, en este caso haciendo
uso de return y confirm, de modo que el usuario puede elegir entre aceptar el ir al link elegido o
cancelar.
c) this dentro de la funcin annima a ejecutar ante un evento onclick sobre un elemento a hace
referencia al elemento propietario de la funcin, en este caso el propio nodo de tipo link a, de modo
que podemos rescatar la url de destino escribiendo this.href.
<script type="text/javascript">
var elemsA = document.getElementsByTagName('a');
for (var i=0;i<elemsA.length;i++) {
elemsA[i].onclick = transferir;}
function transferir() {
return confirm('Ud. va a ser transferido de url hacia ' + this.href);
}
</script>
En este caso usamos una asignacin a la funcin. Tener en cuenta que no escribimos elemsA[i].onclick =
transferir();} porque esto dara lugar a que se ejecutar la funcin (invocacin). Al escribir la asignacin
sin parntesis la funcin queda asignada pero no se ejecuta.
Finalmente tenemos una alternativa ms lgica que nos permite no tener que poner el script despus
del cdigo HTML. La idea es la siguiente: el evento onload nos informa de cundo se ha completado la
carga de la pgina web. En ese momento dispararemos una funcin que se encargar de introducir los
manejadores de eventos que queramos. Como en el momento en que se dispara la funcin la carga de
aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
la pgina ya se ha realizado, no es necesario que el cdigo JavaScript para realizar este proceso quede
debajo del cdigo HTML.
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:
aprenderaprogramar.com, 2006-2029
Concepto de evento JavaScript. Manejadores de eventos.
a) Mediante el control de los eventos onmouseover y onmouseout, debemos hacer que cuando el
usuario pase el ratn sobre las etiquetas h1 y h3, el color del texto pase a ser orange y cuando deje de
pasarlo el texto quede en marrn.
b) Mediante el control del evento onmouseover, debemos hacer que cuando el usuario pase el ratn
sobre un prrafo, el color de fondo del prrafo sea amarillo y cuando deje de pasarlo no haya color de
fondo.
c) El cdigo JavaScript debe estar situado entre las etiquetas <head> </head>
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.
ADDEVENTLISTENER
JAVASCRIPT. REMOVE.
ATTACHEVENT. THIS EN
APRENDERAPROGRAMAR.COM
EVENTOS. PROPAGACIN.
BUBBLING. CAPTURA.
(CU01158E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
ADDEVEN
NTLISTENER JAVASCRIPT
J T
nodoObjettivo.addEven
ntListener ("nombreDeEvventoSinPreffijo", funcion
nAEjecutar,
paramettroBooleanoO
Opcional)
Veamos un
u ejemplo:
aprenderraprogramar.co
om, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.
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.
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:
Un ejemplo nos aclarar las ideas. En este caso, vamos a plantear una variante del cdigo de ejemplo
que vimos para addEventListener. Ese cdigo daba lugar a que cuando el usuario pasaba el ratn sobre
un elemento de tipo ttulo <h1>, <h2>, el texto tomara color naranja, y cuando dejara de estar
encima de ese elemento tomara color marrn. Pero al repetirse el paso por un elemento que estaba en
color marrn, volva a ponerse naranja porque los manejadores de eventos seguan actuando de la
misma manera. Una forma de anular ese cambio de color es eliminar los manejadores de eventos
despus de que el texto haya cambiado a color marrn. Al anular los manejadores de eventos, una vez
el texto toma el color marrn, quedar ya en ese color definitivamente. El cambio a introducir es en la
funcin cambiarColor2, dejando el cdigo como sigue:
aprenderaprogramar.com, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.
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.
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.
Hemos visto tres maneras diferentes de introducir manejadores de eventos: en lnea dentro del cdigo
HTML, como propiedades de nodos del DOM y a travs de la funcin addEventListener. Cul es mejor?
aprenderaprogramar.com, 2006-2029
addEventListener JavaScript. Bubbling o burbujeo de eventos.
- 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()}.
EJERCICIO
Crea un documento HTML donde dentro del elemento body tengamos un div con id principal, dentro
de principal otro div denominado secundario, y dentro de secundario otro div con id terciario.
Dentro de terciario debe existir un prrafo con el texto: Ejemplo de bubbling (burbujeo). Aade
eventListeners con el evento click para los prrafos y todos los elementos div, document y window, y
una funcin de respuesta comn para todos ellos que emita el mensaje de alerta <<Soy un nodo tipo
NombreDelNodo y estoy burbujeando>>.
Ejemplo: al hacer click sobre el texto <<Ejemplo de bubbling (burbujeo)>> debern empezar a
aparecernos mensajes como: Soy un nodo tipo P y estoy burbujenado. Soy un nodo tipo DIV y estoy
burbujeando. Soy un nodo tipo DIV y estoy burbujeando
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout
LISTA DE EVENTOS
JAVASCRIPT. (ON) CLICK,
DBLCLICK, MOUSEOVER,
APRENDERAPROGRAMAR.COM
MOUSEOUT, CHANGE,
SUBMIT, KEYPRESS, ETC.
(CU01159E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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?
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.
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.
Tener en cuenta que no todos loss eventos haacen bubbling y no todoss tienen accin por defecto, o si la
tienen, no
o para todo
os puede serr evitada. Cuuando trabaajemos con un evento ees convenien nte buscar
documenttacin adicio
onal sobre su
u comportammiento y resp
puesta en loss distintos naavegadores.
aprenderraprogramar.co
om, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout
aprenderaprogramar.com, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout
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
Relacionados con
arrastre de
drag, dragend, dragenter, dragleave, dragover, dragstart, drop
elementos (drag and
drop)
Relacionados con la
disabled, enabled, offline, online, statuschange, connectionInfoUpdate
conexin a internet
Otros tipos de Hay ms tipos de eventos: relacionados con la pulsacin sobre pantallas, uso
eventos de copy and paste (copiar y pegar), impresin con impresoras, etc.
Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender
ahora el significado de cada uno de ellos. Simplemente ten unas nociones bsicas que te permitan
resolver los retos que como programador te puedan ir surgiendo.
aprenderaprogramar.com, 2006-2029
Lista de eventos JavaScript. onclick, onmouseover, onmouseout
EJERCICIO 1
Crea un documento HTML que conste de un ttulo h1 con el texto <<La web para aprender
programacin>>, dos prrafos de texto y una imagen. Utiliza los eventos onmouseover para que la
imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratn sobre ella. Utiliza el
evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer
la imagen original.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un documento HTML que conste de un ttulo h1 con el texto <<La web para aprender
programacin>>, dos prrafos de texto y un formulario con los campos nombre, apellidos, edad y
correo electrnico, as como con botones enviar y cancelar. Utiliza el evento onsubmit y otras
herramientas para impedir que se enve el formulario si se produce alguna de estas circunstancias:
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.
En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color
distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinmicamente)
cuando el campo que tena un problema tome el foco (para ello usa el evento onfocus).
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp
OBJETO EVENT
JAVASCRIPT. TYPE,
CURRENTTARGET,
APRENDERAPROGRAMAR.COM TARGET, TIMESTAMP,
CLIENTX, SCREENX,
PAGEX, BUTTON.
(CU01160E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
Tip
po Nombre Descrripcin aprenderaprograamar.com
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)
Propiedad
d Devuelve una meddida de tiemp
po en milisegundos desde un origen
timeStamp
temporal temp
poral determin
nado.
aprenderraprogramar.co
om, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp
Propiedades
Algunas no
relacionadas con dataTransfer, dropEffect, effectAllowed, files, types
estandarizadas
drag and drop
aprenderaprogramar.com, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp
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!
evobject.target nos devuelve el elemento HTML que dispar el evento. Valindonos de esto,
cambiamos el color del texto justo despus de mostrar los mensajes correspondientes.
Hemos escrito function ejemploJS1 (evobject) donde evobject representa el objeto Event que se recibe
y que es un argumento que se pasa automticamente cuando se invoca la funcin al dispararse el
evento. El nombre de este argumento es el que nosotros decidamos, es decir, podemos llamarlo
evobject, eventoDatos, miEvento u objetoRepresentaEvento, etc., segn prefiramos. Incluso podramos
escribir function ejemploJS1 (), en este caso no podramos recuperar informacin del evento ya que
para hacerlo necesitamos hacerlo incluyendo un parmetro en la funcin.
La funcin que detecta el evento click es distinta de la que gestiona el evento dblclick Podra ser la
misma? Esta pregunta tiene dos respuestas: si la pregunta se refiere a si una funcin puede gestionar
varios eventos distintos la respuesta es s. Si la pregunta es si una funcin puede distinguir si se ha
hecho click o se ha hecho doble click la respuesta es, inicialmente, que no es fcil. Decimos que
inicialmente que no es fcil porque entre los eventos click y dblclick hay una dificultad especial que no
existe entre otro tipo de eventos. La dificultad radica en que el evento click es parte o comienzo del
evento dblclick. Por ello no es evidente cmo diferenciar entre dos clicks y un doble click, o cmo
detener la ejecucin de la respuesta a click cuando se hace doble click. En realidad, es posible que una
funcin diferencie entre click y doble click basndonos en el intervalo de tiempo que transcurre, pero
esto requiere un poco ms de cdigo y de momento no vamos a detenernos a estudiarlo.
aprenderaprogramar.com, 2006-2029
Objeto Event. Informacin del evento. type, target, timeStamp
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.
La informacin sobre eventos del teclado la abordaremos en la prxima entrega del curso.
EJERCICIO
Crea un documento HTML que conste de un ttulo h1 con el texto <<Posicin x: - Posicin y>>, y un div
con ancho 500 px y alto 400 px. Utiliza el evento onmouseover para mostrar dinmicamente en el ttulo
h1 las coordenadas del puntero del ratn a medida que se desplaza por el elemento div.
Por ejemplo, cuando el usuario coloca el ratn sobre el div se deber mostrar: Posicin x: 244 Posicin
y: 188, al mover el ratn las coordenadas indicadas cambiarn a otro valor, por ejemplo Posicin x: 322
Posicin y: 228, y as sucesivamente.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode
CAPTURAR EVENTOS DE
TECLADO JAVASCRIPT.
TECLA PULSADA.
APRENDERAPROGRAMAR.COM
FROMCHARCODE.
KEYCODE, WICH.
(CU01161E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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).
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.
aprenderraprogramar.co
om, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode
Regla 3: no intentes controlar todo lo que ocurre con el teclado (porque quizs te vuelvas loco).
Controla nicamente aquello que sea necesario y til.
Tener en cuenta que hay algunas teclas no imprimibles que no generan evento keypress, sino
nicamente eventos keydown y keyup. En cambio, algunas teclas no imprimibles s generan evento
keypress.
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:
Donde num1, num2, , numN son los cdigos numricos a convertir. Si escribimos por ejemplo
alert(String.fromCharCode(97,98,99)); obtendremos como resultado <<abc>>
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:
aprenderaprogramar.com, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode
Otras
data, metakey
propiedades
Otras
propiedades no altLeft, ctrlLeft, shiftLeft, isChar
estandarizadas
aprenderaprogramar.com, 2006-2029
Eventos de teclado JavaScript. keyCode. which. fromCharCode
El resultado esperado es que al pulsar una tecla como a b se muestre por pantalla Tecla pulsada: a-----
------------------------ Tecla pulsada: b-----------------------------, o que al pulsar shift se muestre Pulsado shift--
---------------------------, o Pulsada tecla especial para otras teclas especiales.
Este cdigo trata de ser un ejemplo de cmo trabajar con eventos de teclado, pero puedes crear tus
propios trucos para trabajar con el teclado, o usar trucos o bibliotecas creadas por otros programadores
que estn disponibles en internet.
EJERCICIO 1
Crea un documento HTML que conste de un ttulo h1 con el texto <<Pulsa una tecla>>, y un div central
de 400 por 400 px con el borde marcado y mrgenes de 100px en todas direcciones. Utiliza el evento
keypress para determinar el carcter que el usuario ha escrito utilizando el teclado y haz que se
muestre dentro del div con un tamao de fuente de 250px.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un documento HTML que conste de un ttulo h1 con el texto <<Pulsa una flecha>>, y un div central
de 300 por 300 px con borde color negro, color de fondo amarillo y mrgenes de 200px en todas
direcciones. Inicialmente el cuadrado que define el div debe estar alineado en el centro de la ventana.
Utiliza el evento keyup para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando
CSS haz que el cuadrado que define el div se desplace 20px en la direccin de flecha elegida por el
usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la
ventana, hacia la derecha. Para comprobar si tus respuestas y cdigo son correctos puedes consultar en
los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.
aprenderraprogramar.co
om, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
Aunque desde el punto de vista de su definicin tcnica UTC y GMT no son lo mismo, a efectos
prcticos hablar de GMT+3 es lo mismo que hablar de UTC+3.
A pesar de este gran avance, el trabajo con el tiempo sigue presentando grandes dificultades en los
sistemas informticos, tanto por la falta de sincronizacin entre dispositivos como por la disparidad en
cuanto a cmo medir el tiempo y con qu grado de precisin, existencia de horarios de verano e
invierno, etc. Por ello encontrars que es relativamente frecuente encontrar que a medida que los
lenguajes de programacin evolucionan vayan introduciendo cambios en la forma de manejar el
tiempo.
Una cuestin a tener en cuenta es que el tiempo oficial de Greenwich, tiempo GMT UTC, no se
corresponde con el tiempo local el Greenwich debido a la existencia del horario de verano. Por ejemplo,
Lisboa se encuentra en el huso horario de Greenwich, pero en verano la hora local est adelantada una
hora respecto al tiempo oficial de Greenwich por motivos de ahorro energtico. Esto da lugar a que el 5
de agosto a las 21:00 en Lisboa se corresponda con el 5 de agosto 20:00 UTC debido al horario de
verano, a pesar de que Lisboa se encuentre en el mismo huso horaria que Greenwich.
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.
Date.parse(fecha) Transforma el String fecha en una fecha y devuelve el alert('Milisegundos desde 1 de enero de
nmero de milisegundos transcurridos desde el 1 de 1970: '+Date.parse('1970-01-
enero de 1970 a las 00:00:00 UTC hasta el instante 02T00:00:00+0000'));
actual UTC segn el tiempo del sistema. //Devuelve 86400000
Date.UTC(ao,mes, Ao y mes son obligatorios y el resto opcionales. El alert('Milisegundos desde 1 de enero de 1970
dia, hora, min, seg, ao ha de ser mayor que 1900. Los meses van de 0 a son: '+Date.UTC(1970, 0, 2, 0, 0, 0));
ms) 11 y los das de 1 a 31. Devuelve el nmero de //Devuelve 86400000
milisegundos transcurridos desde el 1 de enero de
1970 a las 00:00:00 UTC hasta el instante UTC indicado
en los argumentos.
aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
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.
aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
El resultado esperado (ten en cuenta que puede diferir segn el navegador y sistema operativo que
ests usando) es que se muestre:
capturaTiempo es Mon Aug 11 2094 17:22:48 GMT+0100 >> El valor numrico 86400000 representa la fecha Fri Jan 02 1970 00:00:00
GMT+0000 (Hora de verano GMT) >> Date tiempo actual es Mon Aug 11 2094 17:23:31 GMT+0100 mientras que capturaTiempo sigue
valiendoMon Aug 11 2094 17:22:48 GMT+0100 y unaFecha sigue valiendo Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT)
Comprobamos que el mtodo toString() aplicado a objetos de tipo Date devuelve una representacin
como cadena de texto de la fecha.
El constructor que recibe un String crea un objeto Date a partir de una cadena de texto que representa
una fecha construida segn las formas normalizadas vlidas. Hay mltiples formas normalizadas
(europeas, norteamericanas) y algunos navegadores reconocen ms formas que otros, por lo que no
vamos a estudiar todas ellas, sino a mostrar ejemplos en una forma recomendada consistente en
indicar ao-mes-diaThh:mm+xxyy donde +xxyy indica una diferencia horaria respecto a la hora UTC,
que puede ser negativa (hora local retrasada respecto a la UTC) o positiva (hora local adelantada
respecto a la UTC).
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:
Escribimos una operacin aritmtica para forzar a que el mtodo toString devuelva el valor numrico en
lugar de una representacin del tipo << Fri Jan 02 1970 00:00:00 GMT+0000 (Hora de verano GMT)>>
aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
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
getMonth() y Devuelve un entero (entre 0 y 11) Suponiendo que tenemos como hora local del sistema
getUTCMonth() correspondiente al mes segn el tiempo UTC-6 si ejecutamos:
local del sistema segn el tiempo UTC. var miFecha = new Date('2050-12-31T23:00:00-0600');
var miDia1 = miFecha.getMonth(); //Tenemos 11
var miDia2 = miFecha.getUTCMonth(); //Tenemos 0
getDate() y Devuelve un entero, da del mes Suponiendo que tenemos como hora local del sistema
getUTCDate() correspondiente a la fecha segn el UTC-6 si ejecutamos:
tiempo local del sistema segn el var miFecha = new Date('2050-12-24T23:00:00-0600');
tiempo UTC. var miDia1 = miFecha.getDate(); //Tenemos 24
var miDia2 = miFecha.getUTCDate(); //Tenemos 25
getDay() y Devuelve un entero, da de la semana Suponiendo que tenemos como hora local del sistema
getUTCDay() (entre 0 y 6, siendo el 0 el domingo), UTC-6 si ejecutamos:
correspondiente a la fecha segn el var miFecha = new Date('2050-12-24T23:00:00-0600');
tiempo local del sistema segn el var miDia1 = miFecha.getDay(); //Tenemos 6 (sbado)
tiempo UTC.
var m = miFecha.getUTCDay(); //Tenemos 0 (domingo)
getHours() y Devuelve un entero (entre 0 y 23), Suponiendo que tenemos como hora local del sistema
getUTCHours() correspondiente a la hora segn el UTC-6 si ejecutamos:
tiempo local del sistema segn el var miFecha = new Date('2050-12-24T23:00:00-0600');
tiempo UTC. var miDia1 = miFecha.getHours(); //Tenemos 23
var m = miFecha.getUTCHours(); //Tenemos 5
getMinutes() y Devuelve un entero (entre 0 y 59) Suponiendo que tenemos como hora local del sistema
getUTCMinutes() correspondiente al minuto segn el UTC-6 si ejecutamos:
tiempo local del sistema o segn el var miFecha = new Date('2050-12-24T23:35:00-0600');
tiempo UTC. var miDia1 = miFecha.getMinutes(); //Tenemos 35
var m = miFecha.getUTCMinutes(); //Tenemos 35
getSeconds() y Devuelve un entero (entre 0 y 59) Suponiendo que tenemos como hora local del sistema
getUTCSeconds() correspondiente al segundo segn el UTC-6 si ejecutamos:
tiempo local del sistema o segn el var miFecha = new Date('2050-12-24T23:35:15-0600');
tiempo UTC. var miDia1 = miFecha.getSeconds(); //Tenemos 15
var m = miFecha.getUTCSeconds(); //Tenemos 15
aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
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.
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 .
Los objetos de tipo Date disponen de estos mtodos para establecer los datos correspondientes a una
fecha:
aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
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.
Esta aparente paradoja (que no es tal) podra traernos complicaciones si no tenemos en cuenta los
detalles. A modo de recomendacin, recomendamos trabajar siempre bajo la referencia UTC y hacer
conversiones a fechas locales de forma controlada.
aprenderaprogramar.com, 2006-2029
Objeto Date JavaScript. getFullYear, getMonth, getDate.
EJERCICIO
Crea un documento HTML que conste de un ttulo h1 con el texto <<Calendario>>, y un div central de
400 por 400 px con el borde marcado y mrgenes de 100px en todas direcciones. Dentro del div central
crea una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 pxeles y tamao de
fuente en la tabla 24 pxeles. La primera columna corresponder a lunes y la ltima a domingo. Usa un
mtodo JavaScript para determinar el mes actual. Mediante cdigo JavaScript, haz que aparezca
dinmicamente como texto encima de la tabla el mes y ao de que se trate (por ejemplo <<MAYO DE
2050>>). Haz que cada celda de la primera fila se rellene indicando el da de la semana (Lu Ma Mi
Ju Vi Sa Do). Haz que la tabla se rellene dinmicamente (al cargar la pgina) con:
b) El nmero del da del mes segn corresponda (28, 30 31 das segn de qu mes se trate).
MAYO DE 2050
Lu Ma Mi Ju Vi Sa Do
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Ten en cuenta que debe generarse el calendario del mes en que te encuentres segn la hora local del
sistema (de tu computador).
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Ms mtodos Date. toString, toLocaleDateString, toTimeString, etc.
FORMATO DE FECHAS
JAVASCRIPT. TOSTRING,
TOLOCALEDATESTRING,
APRENDERAPROGRAMAR.COM
TOLOCALETIMESTRING,
TOTIMESTRING, ETC.
(CU01163E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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
MTTODO UTILIDA
AD EJEMPLOS apreenderaprogramar.com
toDateStrin
ng() Devuelve una representacinn abreviada de la fecha fecha2050.toDateSString();
donde da y mes estn expressados en ingls. M Dec 26 2050
// Mon
aprenderraprogramar.co
om, 2006-2029
Ms mtodos Date. toString, toLocaleDateString, toTimeString, etc.
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));
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() 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));
EJERCICIO 1
Crea un script donde se calcule el tiempo en minutos entre que se formula primera peticin al usuario y
este responde, y entre una segunda peticin al usuario y este responde. Ejemplo:
Introduzca su nombre: Alfredo >> Introduzca su pas: Colombia >> Han pasado 0.122 minutos entre su
primera y segunda respuesta.
aprenderaprogramar.com, 2006-2029
Ms mtodos Date. toString, toLocaleDateString, toTimeString, etc.
Otro ejemplo: Introduzca su nombre: Juan >> Introduzca su pas: Chile >> Han pasado 0.73 minutos
entre su primera y segunda respuesta.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un script donde pida al usuario que introduzca una primera fecha (fecha1) en formato dd-mm-
yyyy, y una segunda fecha en el mismo formato y calcule los das que han pasado entre las dos fechas .
Ejemplo: Introduzca la fecha 1: 05-09-2076 >> Introduzca la fecha 2: 09-09-2076 >> Entre las 00:00
horas del primer da a las 00:00 del segundo hay 4 das.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
EJEMPLO RELOJ
JAVASCRIPT.
SETTIMEOUT,
APRENDERAPROGRAMAR.COM CLEARTIMEOUT,
SETINTERVAL, REQUEST
ANIMATIONFRAME.
(CU01164E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
TIMERS JA
AVASCRIPT
TIMERS: SETTIMEOUT
S T, SETINTERV
VAL, REQUESSTANIMATIO
ONFRAME
SIN
NTAXIS TIMER UTILIDAD EJEMPLOS apreenderaprogramar.com
var reeferenciaTimeer =
setIntervall(nombreFunccion(par Ejeecuta peridicamente la funcin
f
setInterval(mostrrarAlerta, 500
00);
1, parr2, parN), noombreFuncion n con un inttervalo
//mostrarAlerta se ejecuta
tiempoMiliseg); entre ejeecuciones de
periidicamente ccada 5 segund
dos
tieempoMiliseg.
* Para funcin sin parm
metros
aprenderraprogramar.co
om, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
var referenciaTimer =
Ejecuta peridicamente la funcin var t = setInterval(function(){reloj('Chile')
setInterval(function()
nombreFuncion con un intervalo },2000);
{nombreFuncion(par1, par2,
parN)}, tiempoMiliseg); entre ejecuciones de //reloj se ejecuta peridicamente cada 2
tiempoMiliseg. s
* Para funcin con parmetros
var referenciaTimer =
requestAnimationFrame(nomb Crea un bucle de repintado globalID =
reFuncion) delegando el control del mismo en requestAnimationFrame(animacionRepet
el navegador. imos);
* Para funcin sin parmetros
var referenciaTimer =
requestAnimationFrame(functi Crea un bucle de repintado globalID =
on(){nombreFuncion(par1, delegando el control del mismo en requestAnimationFrame(function(){anim
par2, , parN)}); el navegador. acionRepetimos('estiloDivertido')});
* Para funcin con parmetros
El resultado esperado es que cuando transcurran 5 segundos desde la carga de la pgina se muestre el
mensaje Han pasado 5 segundos desde la carga de la pgina.
Si queremos introducir la repeticin peridica de la ejecucin de la funcin podemos escribir una
llamada con setTimeOut dentro de la propia funcin. Por ejemplo:
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
function mostrarAlerta() {
alert('Han pasado 5 segundos');
setTimeout(mostrarAlerta, 5000);
}
Har que se repita peridicamente la alerta indicando que han pasado 5 segundos.
Aunque si se quiere una repeticin peridica ser ms cmodo usar setInterval:
function alertaTras5seg() {setInterval(mostrarAlerta, 5000);}
REQUESTANIMATIONFRAME
Tradicionalmente los efectos de progresin o animacin incremental con JavaScript se lograban con un
cdigo de este tipo:
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).
var globalID;
function animacionRepetimos() {
//Cdigo a ejecutar
globalID = requestAnimationFrame(animacionRepetimos);
}
function detener() { cancelAnimationFrame(globalID);}
La animacin comienza cuando se invoca a una funcin a la que hemos denominado (a modo de
ejemplo) animacionRepetimos. Dentro de esta funcin existe una llamada recursiva que da lugar a que
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
el navegador ejecute el repitando peridico ejecutando previamente la funcin. La funcin puede ser
detenida usando cancelAnimationFrame(nombreDelIdentificadorEmpleado);
Ejecuta este cdigo y comprueba sus resultados (ten en cuenta que en algunos navegadores puede no
funcionar, especialmente si son ms antiguos):
El resultado esperado es que una el color negro se vaya extendiendo de izquierda a derecha rellenando
lneas (al acumularse div de fondo negro) sobre la pantalla haciendo visible el texto blanco que no se
desplaza por tener la propiedad CSS position: absolute;
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
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):
function reloj() {
var hoy=new Date(); var h=hoy.getHours(); var m=hoy.getMinutes(); var s=hoy.getSeconds();
m = actualizarHora(m); s = actualizarHora(s);
document.getElementById('displayReloj').innerHTML = h+":"+m+":"+s;
var t = setTimeout(function(){reloj()},500);
}
function actualizarHora(i) {
if (i<10) {i = "0" + i}; // Aadir el cero en nmeros menores de 10
return i;
}
</script>
</script>
</head>
<body onload="reloj()" >
<div style="text-align:center;">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; font-family: verdana, arial; font-size:30px; padding:15px;" id ="displayReloj" > </div>
</div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
setTimeOut, setInterval, requestAnimationFrame.
EJERCICIO 1
Crea un reloj JavaScript que marque los segundos usando el mtodo setInterval.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un reloj JavaScript que marque los segundos usando el mtodo requestAnimationFrame.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 3
Crea un reloj JavaScript que marque inicialmente 01:00 (es decir, 1 minuto) y que marche hacia atrs
(00:59, 00:58, 00:57 etc.) hasta llegar a 00:00. Cuando llegue a 00:00 debe deternerse y mostrar el
mensaje: Tu tiempo ha terminado.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.
MATH JAVASCRIPT.
GENERAR NMEROS
ALEATORIOS RANDOM.
APRENDERAPROGRAMAR.COM REDONDEAR. FUNCIONES
TRIGONOMTRICAS Y
CONSTANTES.
(CU01165E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
MATH JAV
VASCRIPT
PROPIEDA
ADES DEL OB
BJETO MATH
H
Loggaritmo en base 2 de la co
onstante de Euler,
Math.LO
OG2E:
aprroximadamente 1.443
Loggaritmo en base 10 de la co
onstante de
d Euler,
Math.LO
OG10E
aprroximadamente 0.434
Math.PI Nm
mero pi, aproximadamen
nte 3.14159
Raz cuadrada de
d 1/2, aproxximadamentte 0.707
Math.SQRT1_2
Math.SQ
QRT2 Raz cuadrada de
d 2, aproxim
madamente 1
1.414
aprenderraprogramar.co
om, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.
Los mtodos del objeto Math son tiles para diversos clculos matemticos.
aprenderaprogramar.com, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.
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).
EJERCICIO 1
Crea un script que genere un nmero aleatorio entre 1 y 100. A continuacin debe pedir al usuario que
adivine el nmero. Si el usuario responde un nmero menor al nmero aleatorio, debe mostrarse un
mensaje El nmero es mayor. Intntelo de nuevo y dar opcin a responder de nuevo. Si el usuario
responde un nmero mayor debe mostrarse un mensaje El nmero es menor. Intntelo de nuevo. Si
el usuario acierta debe mostrarse Enhorabuena. Ha acertado. El programa debe terminar si el usuario
aprenderaprogramar.com, 2006-2029
Objeto Math JavaScript. Constantes matemticas y mtodos.
acierta o si se superan los 30 intentos sin acertar. En caso de superarse los 30 intentos debe mostrarse
el mensaje Ha superado 30 intentos. El programa termina.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea un script que pida al usuario el dato de radio en metros de la base de un cilindro y el dato de altura
del cilindro. Utilizando la propiedad Math.PI debe realizarse el clculo para determinar el rea de la
base del cilindro y el volumen del cilindro y mostrar estos resultados. Consulta en internet si no
recuerdas las frmulas a aplicar. .
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 3
b) Utilizando las funciones trigonomtricas, las propiedades de posicionamiento CSS y funciones para
control de animaciones/tiempo debes dar lugar a que dicha palabra se desplace desde la izquierda
hasta la derecha de la pantalla siguiendo un movimiento sinusoidal (es decir, subiendo y bajando
suavemente describiendo ondas).
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
EFECTOS JAVASCRIPT
J T
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
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.
aprenderraprogramar.co
om, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.
Ahora vamos a plantear el factorial de forma recursiva. El factorial de un nmero se puede ver como
factorial de n = n * (factorial de n-1)
As el factorial de 5 podramos verlo como 5 * (factorial de 4), que a su vez es 5 * 4 * (factorial de 3),
que a su vez es 5 * 4 * 3 * (factorial de 2) Cundo termina este proceso recursivo? Cuando llegamos
a un caso en el que el resultado es elemental, es decir, un caso donde no es necesario utilizar factorial
de n = n * (factorial de n-1), sino simplemente factorial de n = resultado elemental. Este caso, que se
denomina caso base, para el factorial lo tenemos con el 1: factorial de 1 es 1, caso elemental.
function factorialRecursivo(numero){
if (numero==0) {return 1;} //caso base
else {return numero*factorialRecursivo(numero-1);} //caso recursivo
}
</script></head>
<body onload="ejemplo(5)" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
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.
Supongamos que queremos ejecutar un proceso de forma que entre cada ejecucin haya un intervalo
de 5 segundos y escribimos un bucle con un setTimeOut llamando a la funcin oportuna dentro del
bucle:
while (contador<numeroNodos){
contador = contador+1;
referenciaTimer[contador] = setTimeout (cambiarNodo(nodosTituloCurso[contador]), 5000);
}
aprenderaprogramar.com, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.
La idea es realizar el proceso cada 5 segundos, sin embargo hay un fallo de planteamiento que hace
que esto no funcione: lo que ocurre en realidad es que se ejecuta el bucle en todas sus iteraciones de
forma prcticamente instantnea, lo que da lugar a que el setTimeout no se ejecute.
Una funcin para detenerse tiene que llamarse a s misma o utilizar algn mecanismo que fuerce la
detencin.
Vamos a analizar esto con mayor detenimiento. Para ello escribe y ejecuta este cdigo:
Con este cdigo hacemos que se muestre el nmero 1 por pantalla despus de 1 segundo. Hasta aqu
todo correcto. Ahora supongamos que queremos que se cuente hasta 10 y lo hacemos con un bucle.
Para ello modificamos la funcin mostrarNumConRetardo que queda as:
function mostrarNumConRetardo() {
for(var i=0; i<10; i++){
setTimeout(crearNodo, 1000);
}
}
El resultado no es que se vayan mostrando progresivamente 1, luego 2, luego 3, luego 4 sino que se
nos muestran de golpe todos los nmeros: 1, 2, 3,4, 5, 6, 7, 8, 9, 10. Por qu? Porque el bucle se
ejecuta de forma inmediata quedando 10 rdenes de que se muestren dentro de 1 segundo los
nmeros, cuando transcurre un segundo se ejecutan todas las rdenes.
aprenderaprogramar.com, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.
Para solucionar este problema tenemos que forzar la detencin y que la siguiente llamada se ejecute
despus de que el retardo previo haya tenido lugar. Hay varias maneras de solucionar esto. Aqu vamos
a mostrar una de ellas, basada en llamadas recursivas.
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.
aprenderaprogramar.com, 2006-2029
Efectos visu
uales JavaScriptt: imgenes, te
exto, etc.
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
aprenderraprogramar.co
om, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.
aprenderaprogramar.com, 2006-2029
Efectos visuales JavaScript: imgenes, texto, etc.
EJERCICIO 1
Realiza una descripcin de cada una de las instrucciones del cdigo del ejemplo anterior indicando cul
es su cometido. Si has seguido el curso desde el principio, debes ser capaz de interpretar todo el cdigo.
Ejemplo: La primera lnea <!DOCTYPE realiza la declaracin de tipo de documento HTML a efectos de
que los navegadores interpreten en qu versin de HTML est escrito el cdigo.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
EJERCICIO 2
Crea una animacin JavaScript (decide t el efecto que quieres implementar: pueden ser cosas
movindose por la pantalla, texto cambiando de tamao o cualquier otra cosa que se te ocurra) con las
herramientas que hemos ido conociendo a lo largo del curso. Ejectalo en distintos navegadores y
comprueba que se ejecute tal y como esperas en todos ellos.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
AMBITO (SCOPE)
( JAV
VASCRIPT
OR TYPEOF
OPERADO
aprenderraprogramar.co
om, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.
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)" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.
La variable global idGlobal es conocida por todas las funciones. De acuerdo con esto, la variable msg
tambin es conocida por todas las funciones. Sin embargo, al declararse una variable local en las
funciones con igual nombre, decimos que la variable global queda tapada por la variable local, es
decir, al invocar dicha variable dentro de la funcin primeramente se busca si existe en el mbito de
dicha funcin (como local) y si es as, se devuelve dicha variable ignorando las que puedan existir en
mbitos externos. En resumen: siempre se busca si un identificador existe en el mbito en que se
invoca, si no es as se trata de localizar en el siguiente mbito ms prximo y as sucesivamente hasta
llegar al mbito global. Si no existe en el mbito global y se trata de utilizar se obtiene un error de tipo
<< ReferenceError: MiVarLocal is not defined>>. Recordar que los errores no se muestran directamente
en pantalla, sino que hemos de activar la consola de depuracin del navegador para poder visualizarlos.
En el cdigo aparecen dos lneas comentadas que si tratamos de ejecutar nos devuelven un error, ya
que estamos tratando de invocar identificadores de variables o parmetros desconocidos en ese
mbito.
Grficamente podramos ver los mbitos como espacios donde las variables son conocidas:
Variable msg
Parmetro numero
Nosotros estamos trabajando declarando una variable con la palabra clave var. Por ejemplo var
miNumero = 33;
aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.
Sin embargo, el uso de var no es obligatorio, y el intrprete considera que una asignacin de contenido
a una variable que no ha sido declarada es una declaracin implcita. Por ejemplo podramos escribir
directamente miNumero=33; alert(miNumero) ; sin hacer uso de la palabra clave var.
Cuando no se escribe la palabra clave var dentro de una funcin tiene una implicacin: la variable
automticamente es tratada como una variable global an a pesar de estar dentro de una funcion.
Ejecuta este cdigo:
function ejemplo2(){
var msg= '';
if (typeof miVarLocal != 'undefined') { msg=msg+'\n\nEjemplo2 conoce qu es miVarLocal porque se'+
' declar en otra funcin sin var: aqu miVarLocal es '+miVarLocal+ ' y es de tipo '+(typeof miVarLocal) }
else {msg=msg+'\n\nmiVarLocal No existe en el mbito de la funcin ejemplo2\n\n';}
alert(msg); //msg es local a esta funcin
}
</script>
</script></head>
<body onload="ejemplo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
<<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:
En general recomendaremos hacer uso siempre de var, de forma que las variables declaradas dentro de
funciones trabajen como variables locales. Esto hace la programacin ms segura y evita saturar el
espacio global de nombres que en caso de repeticin pueden crear conflictos.
aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.
Tener en cuenta que si una variable como mensaje es declarada como variable global y luego es
utilizada dentro de una funcin sin hacer uso de var, su valor queda modificado al considerarse que se
est haciendo referencia a la variable global (nica) aunque nuestra intencin no fuera esa. Esto
refuerza la recomendacin de hacer siempre uso de var para declarar variables.
No deben declararse indiscriminadamente variables sin uso de var dentro de funciones porque eso
podra calificarse como abuso de variables globales que a la larga traer complicaciones. Las variables
globales deben ser usadas de forma controlada y en su justa medida.
EJERCICIO
a) Haz una lista de las variables que intervienen indicando para cada variable cul es su nombre, cul es
su tipo, cul es su cometido y si est definida como variable global o variable local.
Ejemplo: la variable target_date es de tipo Date, su cometido es almacenar la fecha futura respecto de
la cual el script va a mostrar los das, horas, minutos y segundos que faltan para alcanzar dicha fecha, y
est definida como variable global.
aprenderaprogramar.com, 2006-2029
typeof y tipo de variable. Ambito (scope) global y local con JavaScript.
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?
e) Razona la lgica del cdigo. Con los contenidos que hemos visto en el curso hasta el momento, debes
ser capaz de entender todo el cdigo que aparece en el script.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
THIS JAVASCRIPT:
SIGNIFICADOS. AMBITOS
(SCOPE). ANIDAMIENTO.
APRENDERAPROGRAMAR.COM
NAMESPACES. EJEMPLO
EJERCICIO RESUELTO.
(CU01168E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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..
En cambio o, las variab ones externas s son conocidas por las funcioness internas.
bles definidas por funcio
Por ejemp ble combustiible definida en la funci
plo, la variab s es conocida dentro de la funcin
n ejemplo s
p llenarDeposito.
interna reeferenciada por
aprenderraprogramar.co
om, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
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.
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:
Ahora el resultado obtenido al hacer click es: << La capacidad del depsito es 300 litros y faltan 280
litros para llenarlo>>
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
Quizs la capacidad del depsito de un nuevo modelo de vehculo sea de 300 litros, pero nuestro cdigo
referido a otro modelo de vehculo ha dejado de funcionar debido a una colisin de nombres: la funcin
que se invoca al hacer click es la ltima que el intrprete lee dentro del cdigo, y al haber dos funciones
con el mismo nombre una queda tapada por la otra.
Una forma de tratar de mitigar estos efectos indeseados es definir spacenames o espacios de nombres.
Los espacios de nombres son objetos que actan a modo de contenedor para envolver todo un
conjunto de propiedades, funciones, etc. de forma que su identificacin sea ms segura y la
probabilidad de conflicto de nombres sea baja.
Para crear un espacio de nombres podemos usar esta sintaxis, que ya habamos explicado como forma
de crear objetos en JavaScript:
var nombreObjetoCreado = {
propiedad1: valorPropiedad1,
propiedad2: valorPropiedad2,
propiedadN: valorPropiedadN,
mtodo1: function () { cdigo }
mtodo2: function (par1, par2, , parN) { cdigo }
mtodoN: function () { cdigo }
}
En nuestro caso, nombreObjetoCreado ser el nombre del espacio de nombres. Este nombre ser un
prefijo que habr que aplicar para invocar cualquier variable (propiedad) o mtodo de ese espacio de
nombres.
El prefijo puede ser relativo a la funcionalidad que tiene el cdigo, o puede ser un prefijo que usemos
nosotros para identificarnos como programadores, un prefijo creado para desarrollar una aplicacin,
etc.
var modeloFordSpace = {
capacidadDeposito: 200,
obtenerNecesidades: function (contenidoActual){
alert('La capacidad del depsito es ' + modeloFordSpace.capacidadDeposito + ' litros y faltan ' +
(modeloFordSpace.capacidadDeposito-contenidoActual) +
' litros para llenarlo');}
}
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
var modeloToyotaSpace = {
obtenerNecesidades: function(contenidoActual) {
var capacidadDeposito = 300;
alert('La capacidad del depsito es ' + capacidadDeposito +
' litros y faltan ' + (capacidadDeposito-contenidoActual) + ' litros para llenarlo');}
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="modeloFordSpace.obtenerNecesidades(20)"> Probar (ford) </div>
<div style="color:blue;" id ="pulsador" onclick="modeloToyotaSpace.obtenerNecesidades(20)"> Probar (toyota) </div>
</body></html>
Con esta alternativa de diseo usamos a modo de variables propiedades de un objeto y a modo de
funciones mtodos de un objeto, sirvindonos dicho objeto para crear el espacio de nombres. En este
ejemplo tenemos dos funciones con el mismo nombre, pero al estar en distintos espacios de nombres
podemos usar uno u otro sin problemas, simplemente empleando el prefijo adecuado.
Una sintaxis que puede resultar interesante es usar var espacioDeNombres = {}; para crear el espacio de
nombres y posteriormente definir sus propiedades y mtodos por separado. Ejecuta este ejemplo y
comprueba sus resultados:
Ya hemos hablado sobre el significado de la palabra clave this, que en JavaScript no siempre es el
mismo. Vamos a tratar de resumir a qu puede hacer referencia la palabra clave this y repasar este
concepto:
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
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.
window.onload = function () {
var elemsH = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
for (var i=0;i<elemsH.length;i++) {
elemsH[i].addEventListener("mouseover", cambiarColor1);
elemsH[i].addEventListener("mouseout", cambiarColor2);}
function cambiarColor1() { this.style.color = 'orange';}
function cambiarColor2() { this.style.color = 'brown';}
}
Aqu las funciones de respuesta al evento son cambiarColor1 y cambiarColor2. Y dentro de estas
funciones, this hace referencia al nodo del DOM (elemento) que recibe el evento.
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
Aqu this sirve para aludir al objeto del cual estamos definiendo propiedades y mtodos. This nos
permite desambiguar los nombres y por ejemplo podemos tener como nombre de parmetro edad y
establecer this.edad = edad; quedando as claro que this.edad alude a la propiedad del objeto y edad al
parmetro recibido.
3. this para referirnos a un objeto especificado cuando usamos call y apply (ya estudiado)
La funcin call permite llamar a cualquier funcin JavaScript indicndole el objeto que actuar como
this dentro de la funcin llamada, as como los parmetros adicionales que sean necesarios.
Lo vemos en este ejemplo:
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).
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:
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
El resultado esperado es <<Aqu this es [object Window]>> y <<Aqu ahora this es[object Object]>>
Ten en cuenta que dentro de ejemplo this no es el nodo del DOM porque ejemplo no es la funcin de
respuesta al evento. En realidad la funcin de respuesta al evento podemos decir que es una funcin
cuyo contenido es ejemplo(), es decir, una funcin que da lugar a la ejecucin de la funcin ejemplo,
pero esta funcin no es la funcin de respuesta al evento.
PERDER EL THIS
Toda funcin define un mbito y una funcin dentro de otra funcin puede hacer que this no se refiera
a lo mismo segn dnde lo usemos. Por ejemplo, si tenemos una funcin annima dentro de otra, this
en la funcin externa puede estar haciendo referencia al objeto envolvente mientras que this en la
funcin annima puede estar haciendo referencia al objeto global window.
La solucin para mantener una referencia a this en una funcin annima interna puede estar en crear
un closure. Definiramos como variable local a la funcin externa var that = this;, y luego en la funcin
annima interna haramos referencia a that, variable auxiliar que nos sirve para mantener la referencia
deseada.
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
aprenderaprogramar.com, 2006-2029
Ambitos (scopes), namespaces y significado de this en JavaScript.
</head>
<body onload="ejemplo()"><div id="cabecera"><h2>Cursos aprenderaprogramar.com HAZ CLICK
AQU</h2><h3>Ejemplos JavaScript</h3></div>
</body>
</html>
b) Modifica el cdigo para que el mensaje que se muestre con retardo muestre lo mismo que el
mensaje que se muestra sin retardo. Para ello, haz que en la funcin annima sea conocida la
referencia a this que existe en la funcion externa.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
CLOSURESS JAVASCRIP
PT
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::
function ejemplo(){
e var habla1 = dimeMMsg('Juan'); }
</script></head>
<body><d div id="cabecerra"><h2>Cursoss aprenderapro ogramar.com<//h2><h3>Ejemp
plos JavaScript<</h3></div>
<div stylee="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<
</body><</html>
aprenderraprogramar.co
om, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
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><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body></html>
El resultado esperado es que se muestre por pantalla: <<Su vuelta es: 400 >>
Analicemos el cdigo. La referencia respuesta es una cerradura o closure, ya que es una funcin
interna que utiliza variables locales de la funcin externa.
La funcin externa dimeVuelta devuelve como resultado una referencia a la funcin interna.
aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
Al ejecutar var calcula = dimeVuelta(600); lo que se almacena en calcula es una referencia a la funcin
interna. Es como si hiciramos calcula = function () { return precio-entrega; } Pero qu significado
tendran aqu precio y entrega, teniendo en cuenta que la funcin donde se definan ya se ejecut y por
tanto en principio estn fuera de un mbito vlido? Tericamente las variables globales a una funcin
son destruidas cuando termina de ejecutarse la funcin, por tanto precio y entrega supuestamente
deberan haber sido destruidas.
Sin embargo, cuando JavaScript encuentra un closure toda variable local que sea necesaria para el
funcionamiento del closure queda encerrada en el propio closure. Es decir, dado que respuesta
necesita de precio y entrega, stas se guardan dentro de la funcin cerradura.
Ahora calcula tiene una referencia a una funcin. Para ejecutar dicha funcin invocamos calcula(), y
dado que esta funcin recuerda los valores de variables locales devuelve 400 (obtenidos de 1000-400,
precio-entrega).
Ahora bien, qu valor de variable local es el que almacena el closure? Tener en cuenta que una
variable local puede cambiar a lo largo del cdigo. Por ejemplo:
function dimeVuelta(entrega){
var precio = 1000;
var respuesta = function () { return precio-entrega; } //Aqu el closure
precio = 700;
return respuesta;
}
El closure quedar tomando como referencia 1000 700? La realidad es que toma como referencia el
valor que tena la variable local cuando se produce la salida de la funcin externa (en este ejemplo justo
antes del return), por tanto en este caso el closure queda almacenando como precio un valor de 700.
Podra darse la situacin de que existan varias funciones internas a una funcin externa dada, y que
varias de esas funciones internas usen variables locales de la funcin externa. En este caso decimos que
se generan varias cerraduras (una por cada funcin interna que hace uso de variables locales), pero
aqu s es cierto que todas ellas quedan con una nica referencia de variable local: la que exista cuando
se produzca la salida de la funcin externa.
En el ejemplo anterior hemos usado la creacin de una referencia intermedia para despus invocar la
funcin:
aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
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:
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>
</body>
</html>
El resultado es <<Su vuelta es: 400>> y <<Su vuelta es: 500>> porque cada closure guarda la referencia
al valor de las variables locales en el momento en que fueron creados.
Partimos del siguiente cdigo con el que tratamos de hacer que mediante un bucle for se cuente de 1 a
10 con intervalos de 1 segundo entre que aparezca cada nmero en pantalla. Ejecuta el cdigo y
comprueba qu ocurre:
aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
function mostrarNumConRetardo() {
for(var i=1; i<11; i++){ setTimeout(crearNodo(i), 1000); }
}
function crearNodo(numero) {
var nodoHijo = document.createElement("div");
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+numero;
document.body.appendChild(nodoHijo);
}
</script>
</script></head>
<body onload="mostrarNumConRetardo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
Lo que ocurre es que se muestra por pantalla de forma inmediata todos los nmeros (1-2-3-4-5-6-7-8-9-
10) sin retardo.
Podemos pensar en tratar de arreglarlo con la siguiente modificacin:
function mostrarNumConRetardo() {
for(var i=1; i<11; i++){ setTimeout(crearNodo(i), 1000*i); }
}
Pero esto no funciona. Por qu? Porque el valor de i que se est pasando a setTimeout no es el valor
de i en cada bucle, sino la referencia a la variable i cuando setTimeout se ha ejecutado y el bucle ha
terminado, y esa referencia no tiene valor (ya que el bucle ha terminado).
Necesitamos que setTimeout recuerde el valor que tena i en cada pasada del bucle. Esto lo podemos
hacer creando un closure en cada pasada del bucle. Ejecuta este cdigo:
aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
function mostrarNumConRetardo() {
for(var i=1; i<11; i++){ setTimeout(function(x) { return function() { crearNodo(x); }; }(i), 1000*i); }
}
function crearNodo(numero) {
var nodoHijo = document.createElement("div");
nodoHijo.className="nodoNuevo"; nodoHijo.innerHTML = ''+numero;
document.body.appendChild(nodoHijo);
}
</script>
</script></head>
<body onload="mostrarNumConRetardo()" >
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
</body></html>
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.
Los closures son funciones que llevan datos asociados, relativos al momento en que fueron invocadas.
La existencia de closures aporta ventajas a la programacin con JavaScript, ya que podemos usarlos
para resolver necesidades que nos surjan. Pero tambin genera problemas: a veces se generan closures
sin querer con efectos indeseados. O a veces se crea un excesivo nmero de closures innecesariamente,
consumiendo recursos y haciendo ms lenta la ejecucin del cdigo.
Los closures son una parte de la programacin JavaScript que no es fcil de explicar ni de entender. Esto
podemos extenderlo en general a los mbitos y a la palabra clave this. No te preocupes si te has
perdido en algunas partes de las explicaciones que hemos dado. Sigue avanzando con el curso y trata
de ir adquiriendo destreza en la interpretacin y uso de closures a medida que sigas programando
JavaScript.
aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
EJERCICIO
<style type="text/css">
body { font-family: Helvetica, Arial, sans-serif;}
h2 { font-size: 1.5em;} h3 { font-size: 1.2em;}
div div {color:blue; margin:10px;}
</style>
<script type="text/javascript">
function cambiarDimensionFuente(size) { return function() { document.body.style.fontSize = size + 'px';};
}
function setClicks(){
document.getElementById('fuente-8').onclick = size8;
document.getElementById('fuente-16').onclick = size16;
document.getElementById('fuente-24').onclick = size24;
}
</script></head>
<body onload="setClicks()">
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div id ="fuente-8" > Poner texto a 8 </div> <div id ="fuente-16" > Poner texto a 16 </div>
<div id ="fuente-24" > Poner texto a 24 </div> </div>
<p>En las praderas de la estepa de la Tierra del Fuego suele hacer fro</p>
</body></html>
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?
aprenderaprogramar.com, 2006-2029
Closures JavaScript, ejemplos. Qu son y para qu sirven.
e) Supn que al cargar la pgina queremos que el tamao inicial de fuente sea 8 y para ello nos valemos
de la funcin setClicks. Debemos escribir dentro de esta funcin size8; size8();? Por qu?
g) Reescribe el cdigo (hazlo como mejor creas cambiando todo aquello que consideres necesario) de
forma que obtengamos el mismo resultado pero sin hacer uso de closures.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...
JERARQUA DE OBJETOS
JAVASCRIPT. FORMS,
ELEMENTS, IMAGES,
APRENDERAPROGRAMAR.COM LINKS. NAVIGATOR:
USERAGENT,
GEOLOCATION, ONLINE.
(CU01170E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
En estas jerarqua
j po
odemos pensar en objettos predefinidos de JavaaScript (com
mo Math, Daate, String,
RegExp, etc.,
e incluido el objeto window).
aprenderraprogramar.co
om, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...
entre la jerarqua del DOM, teniendo en cuenta que el DOM existe de forma independiente a
JavaScript, y la jerarqua de objetos JavaScript, aunque guarden cierta similitud organizativa.
Podemos ver una pgina web como una coleccin de objetos. Por ejemplo, para JavaScript un
formulario es un objeto, una imagen es un objeto, etc.
Los objetos 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.
document: tiene propiedades relacionadas con el documento como ttulo, links, formularios, etc.
Adems de estos objetos en el documento HTML existirn ms objetos segn su contenido: objetos
imgenes, objetos link, objetos formulario, etc.
Para nombrar los objetos en la jerarqua de objetos JavaScript debemos tener en cuenta las siguientes
reglas:
1) El nombre de un objeto que desciende de otro en la jerarqua JavaScript incluye el nombre de los
objetos padre de la jerarqua. Por ejemplo el objeto document podemos nombrarlo como
window.document. Un objeto hijo es a su vez un objeto y una propiedad del objeto padre. document es
a su vez un objeto y una propiedad de window.
2) Dado que todos los objetos que podemos usar en el cdigo descienden de window, normalmente
omitiremos el uso de window a la hora de nombrar un objeto. Por eso escribiremos por ejemplo
document.body en lugar de window.document.body, aunque ambas formas son vlidas.
3) JavaScript organiza de forma automtica ciertos objetos de naturaleza mltiple en arrays. Por
ejemplo, una pgina web puede contener varios formularios. JavaScript, de forma automtica, crea un
array de objetos cuyo nombre es forms, siendo el primer formulario el de ndice 0 y sucesivamente el 1,
2, etc. representan los siguientes formularios que aparezcan en el documento HTML por orden de
aparicin. Nos podemos referir a un formulario como window.document.forms[0], o ms
frecuentemente: document.forms[0]
aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...
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]
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):
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:
aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...
El resultado esperado es que al hacer click en el texto <<Probar>> una de las imgenes existentes deje
de mostrarse y pase a mostrarse otra, debido a que hemos accedido al objeto que representa la imagen
y hemos modificado su propiedad src (que define la ruta de la imagen).
El acceso a formularios y elementos de formularios suele ser de gran importancia con JavaScript, por lo
que lo estudiaremos por separado.
EL OBJETO NAVIGATOR
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:
language Devuelve un string representativo del lenguaje del var lenguaje = navigator.language ||
navegador. Algunos navegadores no disponen de navigator.userLanguage;
language pero en su lugar tienen disponible alert ('Cdigo lenguaje navegador: '+lenguaje);
userLanguage. Otros navegadores no reconocen ni una //Cdigo lenguaje navegador: es-ES por ejemplo
ni otra forma.
online Devuelve un valor booleano (true o falso) que indica si alert ('Estamos online?:
se est o no con conexin a internet. Combinado con '+window.navigator.onLine);
eventos (window.ononline y window.onoffline), puede // Estamos online?: true si estamos conectados
servir para mostrar un mensaje de alerta si se pierde o a internet
recupera la conexin.
Entre los mtodos de los objetos Navigator nicamente citaremos a Navigator.vibrate(), que genera la
vibracin de aquellos dispositivos (como smartphones) que admiten la vibracin.
aprenderaprogramar.com, 2006-2029
Jerarqua de objetos JavaScript. Objeto navigator: userAgent...
EJERCICIO
Usando la propiedad userAgent de los objetos Navigator, determina el navegador que est usando el
usuario y muestra un mensaje por pantalla informando de ello. El resultado debe ser del tipo: <<Ests
usando: nombreNavegador>>, donde nombreNavegador ser Google Chrome, Apple Safari, Opera,
Mozilla Firefox, Microsoft Internet Explorer Desconocido. Resulvelo de dos maneras distintas:
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
WINDOW
W.LOCATION
AD WINDOW
PROPIEDA W.LOCATION
N
aprenderraprogramar.co
om, 2006-2029
Propiedad window.location y objetos tipo Location en JavaScript.
Vamos a citar aqu algunas de las propiedades de los objetos Location. Tener en cuenta que algunas de
ellas no son soportadas por algunos navegadores:
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:
aprenderaprogramar.com, 2006-2029
Propiedad window.location y objetos tipo Location en JavaScript.
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:
aprenderaprogramar.com, 2006-2029
Propiedad window.location y objetos tipo Location en JavaScript.
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.
Esto representa una expresin regular JavaScript que comienza con ? &, viene seguido de
nombreParametro, seguido de un igual, y de cualesquiera caracteres hasta alcanzar el final de la cadena
un simbolo & un smbolo #, que seran las situaciones que nos indicaran que el valor del parmetro
ya ha sido extraido completamente. Recordar que dentro de corchetes el smbolo ^ funciona como
negacin. Al ejecutar exec sobre una cadena (en este caso la URL) el ndice [0] del resultado contiene el
valor completo, por ejemplo <<?moneda= pesoMexicano >>, mientras que el siguiente ndice contiene
el match correspondiente al primer parntesis, en este caso sera << pesoMexicano >>. El ndice [2]
contendra el match correspondiente al segundo parntesis, pero aqu slo tenemos un parntesis con
lo cual el ndice [2] no tiene valor definido.
Como conclusin de este ejemplo, vemos cmo podemos rescatar parmetros de una url enviados por
el mtodo GET haciendo uso de JavaScript de varias maneras: hemos visto mtodos especficos y esta
otra manera mostrada en este ejemplo, que al ser ms generalista asegura un buen funcionamiento en
todos los navegadores.
EJERCICIO
Crea una pgina web que al ser invocada muestre un mensaje Hemos cambiado de ubicacin esta
pgina. En breves momentos ser redireccionado junto a una cuenta atrs que muestre 5, 4, 3, 2, 1
(correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrs, el usuario
debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar
la propiedad window.location junto con funciones que permitan el retardo en la ejecucin vistas en
entregas anteriores del curso.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
WINDOW
W.HISTORY
PROPIEDA
AD - OBJETO
O WINDOW.H
HISTORY
aprenderraprogramar.co
om, 2006-2029
Propiedad window.history: back, forward, go. window.screen
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:
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
aprenderaprogramar.com, 2006-2029
Propiedad window.history: back, forward, go. window.screen
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.
La propiedad window.screen devuelve un objeto de tipo Screen con informacin relacionada con la
pantalla donde el usuario est visualizando el documento HTML.
Vamos a citar aqu algunas de las propiedades de los objetos Screen. Tener en cuenta que algunas de
ellas no son soportadas por algunos navegadores. Recordar que para ver los mensajes con la instruccin
console.log hemos de tener abierta la consola del navegador.
aprenderaprogramar.com, 2006-2029
Propiedad window.history: back, forward, go. window.screen
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.
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:
aprenderaprogramar.com, 2006-2029
Propiedad window.history: back, forward, go. window.screen
</head>
<body>
<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="pulsador" onclick="ejemplo()"> Probar </div>
<iframe name="aprende1" style="margin:20px; padding:20px;" src="http://aprendeaprogramar.es" width="350"
height="600">
<p>Tu navegador no admite iframes.</p>
</iframe>
<iframe name="aprende2" style="margin:20px; padding:20px;" src="http://aprenderaprogramar.com/foros" width="350"
height="600">
<p>Tu navegador no admite iframes.</p>
</iframe>
</body>
</html>
Al intentar ejecutarlo obtendrs un mensaje de error por consola (por ejemplo Error: Permission denied
to access property 'name', Error: Permission denied to access property 'style'). Sin embargo si en lugar
de intentar modificar el estilo intentas modificar la propiedad location, por ejemplo iframe[i].location =
"http://aprenderaprogramar.com"; no obtendrs este error.
EJERCICIO
Crea una pgina web que muestre en el lado izquierdo tres opciones donde podr pulsar el usuario:
clarin.com, elmercurio.cl y elespectador.com. En la parte inferior izquierda, debajo de estas opciones,
habr un frame donde deber cargarse la pgina web segn elija el usuario (por ejemplo si el usuario
pulsa en elmercurio.cl en el frame que se encuentra debajo deber mostrarse la web de elmercurio.cl).
En el lado derecho estarn las opciones eluniversal.com.mx, elcomercio.pe y elmundo.es. En la parte
inferior derecha, debajo de estas opciones, habr un frame donde deber cargarse la pgina web segn
elija el usuario.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.
OBJETO WINDOW
JAVASCRIPT.
PROPIEDADES: NAME,
APRENDERAPROGRAMAR.COM INNERWIDTH, LENGTH, ,
OPENER, OUTERHEIGHT,
PAGEXOFFSET, SCREENX
(CU01173E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
Un objeto
o window reepresenta un na ventana cuya organizaacin internaa es conform me al DOM (document
object mo
odel). En un navegador donde
d tengaamos abiertaas varias pestaas, cada pestaa equ
uivale a un
objeto window que tiiene su prop pia propiedad d document y con el quee podemos ttrabajar por separado.
Desde estta perspectivva, cada pesttaa es un ob
bjeto windoww. No obstan nte, hay algu
unos mtodo
os que slo
se puedeen aplicar sobre
s ventannas abiertass mediante JavaScript y no a la ventana principal de
navegaci
n del usuariio.
No tiene inters
i conocer de memoria cules son
s todas lass propiedadees de los objeetos windoww, pero s al
menos tener una ideaa o referenciaa que nos peermita buscar informaci
n cuando no os resulte ne
ecesario.
aprenderraprogramar.co
om, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.
Vamos a citar aqu de forma breve propiedades de los objetos window. Tener en cuenta que usando
JavaScript podemos crear ventanas auxiliares para mostrar al usuario distinto contenido, y que dichas
ventanas auxiliares tambin son objetos window. Cuando hablamos de dimensiones, posicionamiento y
coordenadas, pueden obtenerse resultados extraos si se trabaja con ms de un monitor.
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
aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.
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.
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.
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
aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Propiedades: innerWidth, screenX, etc.
EJERCICIO
El siguiente cdigo crea una ventana cuando se pulsa en el texto Pulsa aqu. Esta ventana es asignada
a una variable u objeto denominado nuevaVentana. Queremos conocer las siguientes propiedades del
objeto nuevaVentana y mostrarlas por pantalla: si est cerrada o no, dimensiones del viewport, nmero
de frames presentes en ella, url a la que apunta, valor de name, dimensiones de la ventana completa
hasta los bordes exteriores y cuntos pxeles est desplazada en horizontal y vertical respecto al punto
origen de la pantalla
Aade el cdigo JavaScript necesario para mostrar esta informacin por pantalla.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
MTOD
DO UTILIDAD EJEM
MPLOS apren
nderaprograamar.com
clearInterval
Ya esttudiado. Ver en
ntregas anteriorres. Ya estudiado. Ver enttregas anteriores.
(referenciaTTimer)
clearTimeeout
Ya esttudiado. Ver en
ntregas anteriorres. Ya estudiado. Ver enttregas anteriores.
(referenciaTTimer)
Uso habitual
h var nuevaVentana = window.open ()
dondee nuevaVentana es una reeferencia al objeto o var nuevaVentan
na = window.open
w
open (opU
URL, windoow que se crea. opURL es un parmetro opccional, ('http://aprendeapro
ogramar.es', 'miiNombre');
opNamme) url a cargar en una nueva pestaa. opName no ombre o se especifica url de destino, se abre una
//Si no
opcional que puede usarse para fijaar atributo targget en pestaa en blanco
un link.
aprenderraprogramar.co
om, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt
nuevaVentana.moveBy(200, 200);
nuevaVentana.focus();
Desplaza el objeto window una distancia valorX en // Si no usamos focus() la ventana puede perder
moveBy (valorX, horizontal y valorY en vertical, en pxeles, respecto de el foco y no ser visible.
valorY) su posicin inicial (movimiento relativo). No se pueden Si la ventana contiene una url que no pertenece
desplazar ventanas no creadas con scripts. al mismo directorio-dominio que la ventana
madre podemos obtener un error de tipo Error:
Permission denied to access property 'moveBy'
nuevaVentana.resizeTo(100, 100);
Modifica el tamao de la ventana y lo establece a los
resizeTo(ancho, nuevaVentana.focus();
valores de ancho y alto especificados. No se pueden
alto) // Si no usamos focus() la ventana puede perder
redimensionar ventanas no creadas con scripts.
el foco y no ser visible.
aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt
EJEMPLO Y EJERCICIO
El siguiente cdigo nos sirve al mismo tiempo de ejemplo y de ejercicio. Ejecuta el cdigo y comprueba
sus resultados. Luego responde las preguntas y cuestiones que se plantean ms abajo.
Nota: si ests trabajando con una sola pantalla, el resultado esperado es que aparezca una nueva
ventana que se va moviendo de izquierda a derecha y de arriba abajo con un movimiento sinusoidal
(como una onda que sube y baja). Si ests trabajando con varias pantallas, es posible que el nico
movimiento que veas sea en horizontal. Por qu? Porque habr un monitor principal y un monitor
secundario. Con moveTo el navegador puede tratar de realizar el posicionamiento en un monitor que
no es el que t ests usando y en consecuencia no visualizarse lo esperado.
Nota: para comprender los detalles de este ejercicio hace falta tener conocimientos bsicos de
trigonometra (seno de un ngulo, clculos usando radianes). Si no tienes estos conocimientos no te
preocupes: sigue avanzando.
aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt
function ejecutarEjemplo () {
nuevaVentana = window.open ('', 'miNombre', 'width=250, height=250, resizable=true, menubar=yes');
nuevaVentana.document.write('<h1>Aprenda a programar ahora. Aproveche la oportunidad</h1>');
nuevaVentana.focus();
nuevaVentana.moveTo(0,positionY);
nuevaVentana.setInterval( sine, 1000/30 );
}
function sine(){
controlSinusoidal = controlSinusoidal + Math.PI/256;
positionY = 100*Math.sin(controlSinusoidal);
start += 2;
nuevaVentana.moveTo(start, window.innerHeight/2-100+positionY);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
</body>
</html>
aprenderaprogramar.com, 2006-2029
Objeto window JavaScript. Mtodos. Efectos. confirm, prompt
a) Qu representa la variable start? Qu significado tiene que su valor inicial sea cero?
d) Cuntos pxeles se desplaza hacia la derecha la ventana en cada refresco de pantalla que realiza el
navegador?
e) La base matemtica del movimiento que describe la ventana es el movimiento ondulatorio. Por qu
la ventana sube y baja?
f) Modifica el cdigo para que cuando la ventana llegue al lateral derecho de la pantalla se detenga su
movimiento y aparezca un mensaje (alert) con el texto Se termin!
g) Modifica el cdigo para que cuando la ventana llegue al lateral derecho de la pantalla haga un efecto
de rebote y empiece a moverse en sentido opuesto al que vena (es decir, subiendo y bajando pero
ahora de derecha a izquierda), hasta llegar al lateral izquierdo y volver a rebotar, y as
indefinidamente.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
aprenderraprogramar.co
om, 2006-2029
JavaScript trabajo con formularios. document.forms. elements
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:
Si prestamos atencin a los campos de un formulario, cada uno de estos campos puede tener hasta dos
identificadores importantes. Por ejemplo:
Estos identificadores son el id, que identifica de forma nica a un elemento dentro de un documento
html (es decir, el id es nico en toda la pgina web), y el atributo name, que identifica de forma nica a
un elemento dentro de un formulario (es decir, no habr dos elementos dentro de un formulario con el
mismo atributo name, pero s puede haber elementos en distintos formularios que tengan el mismo
atributo name.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements
Es frecuente que id y name tengan un mismo valor, por ejemplo <input id="nombre" type="text"
name="nombre" />, pero no siempre ocurre as.
El atributo id, si existe, nos permitira acceder a este elemento del formulario usando el mtodo
getElementById('valorDeId').
La propiedad name posiblemente no nos sea til para acceder con getElementsByName debido a que
pueden existir varios elementos con el mismo name, sin embargo s nos va a ser til con mtodos para
trabajar con formularios de los que nos provee JavaScript de los que vamos a ir hablando.
La propiedad elements de cada objeto form obtenido mediante document.forms devuelve una
coleccin de objetos tipo array conteniendo todos los campos de formulario que existan en el
formulario concreto al que hagamos alusin, con ndice 0 para el primer elemento por orden de
aparicin, ndice 1 para el siguiente y as sucesivamente.
Cada campo de formulario es para JavaScript un HTML Object y como tal tiene propiedades a las que
podemos acceder. Por ejemplo name es una propiedad, value otra propiedad, id otra propiedad, etc.
Analiza este cdigo y comprueba sus resultados en tu navegador para ver cmo elements nos permite
acceder a los campos de formulario.
function ejecutarEjemplo () {
var msg = '';
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
msg = msg + '\n\nElemento '+j+ ' del formulario '+(i+1)+ ' tiene id: '+ formularios[i].elements[j].id;
msg = msg + ' y name: ' + formularios[i].elements[j].name;
}
}
alert (msg);
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<div style="color:blue; margin:20px;" id ="ejemplo">Pulsa aqu</div>
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements
El resultado esperado es que cuando pulsemos en el texto Pulsa aqu se muestre por pantalla lo
siguiente:
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.
JavaScript provee una forma cmoda de acceder a los formularios a la que denominamos acceso
directo al formulario a travs de su atributo name. Para ello nos basamos en que cada formulario se
mantiene como una propiedad de document a la que se puede acceder escribiendo simplemente:
document.valorAtributoNameDelFormulario
De esta forma podemos obtener una referencia a un formulario simplemente con una expresin del
tipo: var formulario1 = document.formularioContacto; donde formularioContacto es el atributo name
de un formulario dentro del documento HTML.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements
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.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements
En este ejemplo var formulario2 = document.formularioReclamacion; nos devuelve el objeto HTML que
es el form cuyo atributo name es formularioReclamacion. A su vez
document.formularioReclamacion.apellidos nos devuelve el elemento HTML que es el input cuyo
atributo name es apellidos.
Estos mismos resultados podran conseguirse combinando los distintos mtodos de acceso a nodos del
DOM que ofrece JavaScript (document.getElementById, getElementsByName, childnodes, etc.) o los
arrays document.forms y document.elements, pero el acceso basado en nombres resultar cmodo si
hemos creado una buena definicin de nombres en nuestro documento HTML.
Podemos acceder a formularios o a los elementos de un formulario con una sintaxis como:
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:
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:
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. document.forms. elements
Ya hemos mencionado los eventos relacionados con formularios en apartados anteriores del curso,
cuando tratamos los eventos. Recordar que los principales eventos son onfocus (un elemento toma el
foco), onblur (prdida del foco), onchange (cambio), onselect (seleccin de texto de un elemento input
o textarea), onsubmit (pulsar botn de envo, antes del envo), y onreset (pulsar botn de cancelacin).
EJERCICIO
Un uso habitual de JavaScript con formularios es usar JavaScript para validar que el contenido
introducido por el usuarios sea vlido. Crea un formulario que conste de cinco campos: nombre,
apellidos, email, ciudad y pas. Usando el evento onsubmit, realiza la validacin para:
a) Comprobar que en el momento del envo ninguno de los campos tiene menos de dos caracteres (es
decir, si est vaco, contiene una letra o dos letras se considerar no vlido) accediendo a los campos
mediante document.forms y elements.
b) Igual que el apartado a) pero accediendo a los campos directamente usando el atributo name (por
ejemplo formularioContacto.apellidos hara alusin a un elemento input cuyo atributo name es
apellidos en un formulario cuyo atributo name es formularioContacto)
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.
SETATTRIBUTE Y
GETATTRIBUTE
JAVASCRIPT. DIFERENCIAS
APRENDERAPROGRAMAR.COM DE SINTAXIS
PROPIEDADES CON HTML.
EJEMPLO MAXLENGTH.
(CU01176E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
FORMULA
ARIOS. SETA
ATTRIBUTE Y GETATTRIBU
UTE
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.
D
Document: el nodo docum
ment es el no
odo raz, a partir del cual derivan
d el ressto de nodoss.
<bodyy>
<div id
d="cabecera" class="brillante"
c ">
<h1>PPortal web <spaan class="destaacado">aprendeeraprogramar.ccom</span>, paara aprender<//h1>
<h2>DDidctica y divu
ulgacin de la programacin<//h2>
</div>>
</boddy>
aprenderraprogramar.co
om, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.
Element body
id Attribute
Element div class Attribute
Element h1 h2 Element
Text
aprenderaprogramar.com Text
Una etiqueta como la etiqueta input de un formulario genera un nodo. Sus atributos id, name, size, etc.
diremos que son propiedades del nodo. Por ejemplo supongamos un elemento input de tipo texto. Si
escribimos algo como var nodo = document.getElementById('nombreFormularioContacto') nos
devuelve un nodo, y escribiendo nodo.maxlenght podemos recuperar o establecer un valor para esta
propiedad del nodo.
No todos los nodos de tipo element tienen las mismas propiedades disponibles. Por ejemplo un nodo
de tipo input de un formulario que es un campo de texto dispondr de un atributo maxlength, pero un
nodo span no dispondr de este atributo. Las propiedades de los nodos estn por tanto ligadas a la
definicin del estndar HTML, que para cada elemento HTML define una serie de atributos permitidos.
Por tanto, para trabajar con estas propiedades en JavaScript, tendremos que conocer o remitirnos al
estndar HTML para saber a qu propiedades podemos acceder.
En general las propiedades son accesibles y modificables mediante JavaScript.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.
function ejecutarEjemplo () {
var msg = '';
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' ) {
msg = msg + '\n\nValor inicial maxlength: '+formularios[i].elements[j].maxLength;
msg = msg + '\n\nFijada longitud mxima 5 para elemento con id: '+formularios[i].elements[j].id;
formularios[i].elements[j].maxLength=5;
}
}
}
alert (msg);
}
</script>
</head>
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.
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
Lo que nos llama la atencin de este resultado es: cmo distintos navegadores devuelven un resultado
distinto cuando maxlength no est establecida (en unos casos obtenemos -1, que interpretamos como
una seal de valor no establecido, y en otros 2147483647 que interpretamos como el valor ms grande
para un entero, que interpretamos como que no existe lmite en el nmero de caracteres que se
pueden introducir en el input.
Prueba ahora a sustituir en el cdigo anterior maxLength por maxlength. Abre la consola de depuracin
de tu navegador y comprueba cmo no aparece ningn error. Sin embargo, despus de hacer click en
Pulsa aqu los input siguen sin cambiar el lmite de caracteres admitido. Por qu? En este caso, lo
que estaramos haciendo al invocar formularios[i].elements[j].maxlength sera invocar una propiedad
que no existe sobre un objeto, y esto nos devuelve undefined, que es precisamente lo que se muestra
por pantalla. Al escribir formularios[i].elements[j].maxlength=5; no estamos modificando el atributo
que limita el mximo nmero de caracteres admisible, sino que estamos creando un nuevo atributo al
que hemos denominado maxlength con minsculas, y que hemos establecido con valor 5. Pero esto es
lo mismo que si hubiramos escrito formularios[i].elements[j].lechugas = 5; ya que podemos escribir
una nueva propiedad de un objeto y asignarle un valor en el momento en que queramos.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.
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');
nodo.getAttribute('nombreAtributoHMTL');
En general se recomienda el acceso directo a las propiedades, por ejemplo nodo.type = 'text'; en lugar
de usar nodo.setAttribute('type', 'text'); pero la alternativa est ah y debe conocerse.
aprenderaprogramar.com, 2006-2029
JavaScript trabajo con formularios. setAttribute y getAttribute.
En este caso, donde se indica nombreAtributoHTML tendremos que usar la forma de nombrar el
atributo con HTML. Por ejemplo si nos referimos a maxlength, habremos de escribirlo todo en
minsculas.
EJERCICIO
Crea un script que recorra todos los elementos input dentro de cada uno de los formularios presentes y
si son de tipo text, modifique su atributo asociado maxlength usando el mtodo setAttribute de los
objetos tipo Element para limitar a 8 el nmero mximo de caracteres que pueda introducir el usuario.
Una vez modificado el atributo, muestra por pantalla el valor que tiene dicho atributo para todos los
elementos de tipo input usando el mtodo getAttribute.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
FUNCIONES
MANEJADORAS DE
EVENTOS Y
APRENDERAPROGRAMAR.COM ADDEVENTLISTENER CON
PARMETROS.
THIS.STYLE IS UNDEFINED
(CU01177E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
do esperado
El resultad o es que cuan
ndo hagamo
os click sobre
e un inputbo
ox del primerr formulario,, ste pase
a tener coolor de fondo
o amarillo.
Es interessante ver c
mo dentro de la funci n cambiaCo
olor, la referrencia this nos devuelve
e el objeto
HTML que dispara el evento. P Por qu? Se ha explicaddo en anteriores entreggas del curso o, pero lo
recordammos aqu: thiss usada dentro de una funcin manejjadora de evvento nos devuelve el nodo de tipo
aprenderraprogramar.co
om, 2006-2029
this.style is undefined. addEventListener con parmetros
Element definido por las etiquetas HTML que reciben el evento. Y en este caso cambiaColor es una
funcin manejadora del evento click para los input de los formularios.
Pero el cdigo planteado no es muy eficiente: si quisiramos hacer esto mismo para todos los inputbox
de todos los formularios y tuviramos muchos, tendramos que escribir mucho cdigo a mano.
Por ello veremos vamos a intentar buscar una solucin ms genrica (ms abstracta). Pero primero
repasaremos algunos conceptos.
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:
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.
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
automticamente en segundo plano) cuando en este caso no ha existido evento, sino simplemente una
invocacin directa para la ejecucin de la funcin.
Podramos usar un cdigo como este para diferenciar si la funcin se ejecuta como respuesta al evento
o por invocacin directa desde el cdigo:
Supongamos que queremos enviar a la funcin manejadora del evento un parmetro que represente el
color de fondo que debe adquirir el elemento.
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:
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
Si quisiramos invocar de forma directa esta funcin, tendramos que hacerlo incluyendo dos
parmetros porque la definicin de la funcin as lo requiere. Pero si no hay evento, qu ponemos
como primer parmetro? Tendremos que decidirlo, pero por ejemplo podemos simplemente pasar la
cadena vaca. La funcin la podramos invocar directamente desde cdigo con una sintaxis como esta:
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.
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.
function cambiaColor () {
this.style.backgroundColor='yellow';
}
</script>
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
<form name ="formularioContacto" method="get" action="accion1.html">
<h2>Formulario de contacto</h2>
<label>Nombre:<input id="nombreFormContacto" type="text" name="nombre" maxlength="4"/></label>
<label>Apellidos:<input id="apellidosFormContacto" type="text" name="apellidos" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
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.
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.
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:
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
Pero esto tiene varios problemas (activa la consola del navegador para ver los mensajes de error si no la
tienes activada): pasamos un argumento evento vaco, por qu si aqu estamos con una funcin
manejadora de eventos? No tiene sentido. Otro problema es que addEventListener espera una
referencia a una funcin, mientras que el cdigo anterior ejecuta la funcin, lo que es distinto.
Para definir correctamente una referencia a una funcin tendramos que definir una funcin annima.
Nos vamos aproximando a una solucin si planteamos esto, aunque todava no funciona. Prueba este
cdigo y comprueba qu sucede:
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function() {cambiaColor('', 'yellow');});
}
else { formularios[i].elements[j].addEventListener('click', function(){cambiaColor('', 'orange');});
}
}
}
}
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.
Lo que estamos explicando es un tanto engorroso, pero llegar a comprender todo lo que estamos
discutiendo es interesante de cara a la comprensin de JavaScript. Si vienes siguiendo el curso desde el
principio, deberas ser capaz de seguir estas explicaciones. Si ests siguiendo el curso y te has perdido,
vuelve atrs y relee las explicaciones y haz pruebas con el cdigo con calma. Incluso djalo para
maana, siempre es til descansar y retomarlo al da siguiente. Si despus de releer esta entrega se te
sigue atragantando, te recomendamos escribir una consulta en los foros aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
CONTINUAMOS
Repasamos conceptos: this es el elemento HTML que nos interesa dentro de la funcin annima que es
ahora la manejadora del evento, pero ya no lo es en la funcin cambiaColor porque sta ya no es la
manejadora del evento, sino una funcin invocada por la manejadora del evento.
Ahora la funcin manejadora del evento es la funcin annima, por lo que si quisiramos pasar el
evento tendramos que hacer algo as:
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function(elEvento)
{cambiaColor(elEvento, 'yellow');});
}
else { formularios[i].elements[j].addEventListener('click',
function(elEvento){cambiaColor(elEvento, 'orange');}); }
}
}
}
Ahora estamos pasando el evento, pero todava no hemos resuelto el problema de haber perdido la
referencia al this.
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' && j%2==0 ) {
formularios[i].elements[j].addEventListener('click', function(elEvento) {
cambiaColor(elEvento, 'yellow', formularios[i].elements[j]);});
}
else { formularios[i].elements[j].addEventListener('click', function(elEvento){
cambiaColor(elEvento, 'orange',formularios[i].elements[j]);}); }
}
}
}
function cambiaColor (elEvento, elColor, quienEsThis) {
quienEsThis.style.backgroundColor=elColor;
}
</script>
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
Ahora nos enfrentamos a un error de tipo <<TypeError: formularios[i] is undefined>> porque la funcin
annima define un nuevo mbito, independiente puesto que es un argumento de addEventListener y
no una funcin anidada dentro de la funcin de respuesta a window.onload.
Finalmente vamos a llegar a una solucin vlida que consiste en pasarle el this a la funcin cambiaColor.
Escribe este cdigo y comprueba sus resultados:
}
else { formularios[i].elements[j].addEventListener('click', function(elEvento){
cambiaColor(elEvento, 'orange', this);}); }
}
}
}
aprenderaprogramar.com, 2006-2029
this.style is undefined. addEventListener con parmetros
PODEMOS MEJORAR?
En el cdigo que se ha propuesto como solucin, cada vez que se aade un manejador de eventos a un
elemento HTML estamos creando una funcin annima. Esto puede resultar ineficiente. Ms adelante
estudiaremos cmo podemos mejorar este cdigo para hacerlo ms eficiente.
EJERCICIO
Crea un cdigo HTML donde tengas un formulario con seis inputbox de texto que servirn para pedir al
usuario Nombre, Apellidos, Correo electrnico, Telfono, Domicilio y Pas. Crea el cdigo JavaScript
para que los elementos 1, 4, 7, 10 etc. del formulario tomen color de fondo amarillo cuando el usuario
pulse sobre ellos. Los elementos 2, 5, 8, 11, etc. del formulario debern tomar color de fondo azul claro
cuando el usuario pulse sobre ellos. Los elementos 3, 6, 9, 12, 15, etc. del formularios debern tomar
color de fondo verde claro cuando el usuario pulse sobre ellos.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
BIND JAVASCRIPT .
FUNCIN ENTRE
PARNTESIS QUE LA
APRENDERAPROGRAMAR.COM
ENVUELVEN. FUNCTION
STATEMENT REQUIRES A
NAME (CU01178E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
BIND JAV
VASCRIPT
aprenderraprogramar.co
om, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
Ya sabemos que esto ocurre porque en lugar de pasar una referencia de funcin en el addEventListener
estamos invocando la ejecucin de la funcin.
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.
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):
<style type="text/css">
label{display:block;margin:5px;}
</style>
<script type="text/javascript">
window.onload = function () {
var formularios = document.forms;
for (var i=0; i<formularios.length;i++){
for (var j=0; j<formularios[i].elements.length; j++){
if (formularios[i].elements[j].type=='text' ) {
aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
(function(){
var closureI =i;
var closureJ =j;
formularios[i].elements[j].addEventListener('click', function(){
dimeLosIndices(closureI,closureJ);});
})(); //Creamos un mbito con la funcin annima y la ejecutamos con ()
}
}
}
}
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:
} () )
Los parntesis exteriores estn ah indicndole al intrprete JavaScript que ese fragmento de cdigo es
una expresin y no una declaracin de funcin. Una expresin se ejecuta dando lugar a una
aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
equivalencia en cdigo, mientras que una declaracin de funcin implica definir un nombre para una
funcin que puede ser posteriormente invocada.
En el contexto en el que estamos no podemos declarar una funcin (dara lugar a un error del tipo
SyntaxError: function statement requires a name), pero s podemos usar una expresin utilizando una
funcin para lograr nuestros objetivos.
BIND JAVASCRIPT
El mtodo bind recuerda en cierta manera a los mtodos call y apply que ya hemos estudiado. La
sintaxis que emplearemos ser habitualmente:
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.
aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
Fjate que escribimos suma3Primos() con los parntesis finales porque suma3Primos es una funcin.
Decimos que es una funcin ligada (binded) a la funcin suma3 a travs del mtodo bind.
Dado que bind no ejecuta la funcin, sino que crea una copia en la cual fijamos qu objeto actuar
como this y cules sern los parmetros con los que ser invocada la copia de la funcin, podemos
escribir el cdigo para mostrar los ndices de los inputs de formularios en un documento HTML de una
forma ms simple que la que vimos anteriormente (basada en closures y funciones annimas, un tanto
engorrosa en su definicin).
Escribe este cdigo y comprueba sus resultados (activa la consola del navagador si no la tienes
activada):
}
}
}
aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
El resultado es el mismo que obtuvimos antes: se muestran correctamente los ndices. Por ejemplo si
pulsamos sobre el primer inputbox del primer formulario se mostrar: "Has pulsado en el inputbox
cuyos ndices son i=0 , j=0"
Este cdigo es ms claro que el basado en closures y uso de funciones annimas, por lo tanto es
preferible.
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.
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?
aprenderaprogramar.com, 2006-2029
Mtodo bind JavaScript. Parntesis alrededor de una funcin.
l) Modifica el cdigo para ampliar la informacin que se nos muestra: introduce un parmetro fromUnit
en la funcin conversor de modo que el resultado nos informe del dato de origen, sus unidades, y el
dato convertido y sus unidades.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.
EVENTOS DE
FORMULARIOS: CHANGE.
OPTIONS, SELECTEDINDEX
APRENDERAPROGRAMAR.COM
OBTENER VALUE DE
INPUT, CHECKED Y TEXT
DE SELECT (CU01179E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
document.getElementById(''apellidos').vvalue
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:
Veremos el ejemplo de
d cdigo desspus de exp
plicar otros elementos.
e
aprenderraprogramar.co
om, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.
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:
El evento para detectar cambios en los conjuntos checkbox normalmente ser onchange.
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).
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).
aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.
EJERCICIO Y EJEMPLO
El cdigo que vamos a ver a continuacin nos va a servir al mismo tiempo como ejemplo de las
cuestiones que hemos explicado anteriormente y como ejercicio.
Para probar el funcionamiento de este cdigo debes poner dos imgenes de 100 por 100 pxeles con el
nombre caraHombre.jpg y caraMujer.jpg, en el mismo directorio donde tengas el cdigo HTML.
Nosotros vamos a usar estas dos imgenes (usa estas u otras segn prefieras):
Escribe el siguiente cdigo, gurdalo como archivo con extensin HTML, visualzalo en tu navegador y
comprueba su funcionamiento. No prestes atencin al cdigo CSS, ya que lo que nos interesa es
centrarnos en JavaScript. Estudia el cdigo y responde a las preguntas que se plantean ms abajo. Este
cdigo usa conocimientos variados que hemos ido adquiriendo a lo largo del curso, por lo que nos viene
bien como repaso. Si has venido siguiendo el curso, deberas ser capaz de entender todo el cdigo.
aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.
function actualizarDatos() {
var rutaImagen = '';
var radioButSelValue = '';
for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }
if (radioButSelValue != ''){
if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';}
document.getElementById('encuadraImagen').innerHTML = '';
document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';
}
var checkBoxSel = new Array();
for (var i=0; i<checkboxElements.length;i++) {
if (checkboxElements[i].checked ==true) {checkBoxSel.push(checkboxElements[i].name);}
}
aprenderaprogramar.com, 2006-2029
Trabajo con formularios JavaScript: obtener value, checked, etc.
Responde estas preguntas (mantn la consola activada para ver posibles mensajes de error):
a) Qu cdigo es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen
caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?
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?
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
ARRAY.PR
ROTOTYPE, NODELIST,
N A
ARRAYS Y AR
RRAY-LIKE OB
BJECTS
aprenderraprogramar.co
om, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.
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:
<script type="text/javascript">
window.onload = function () {
var elementosInput = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
var arrayNodos = [];
addNodeListToArray (elementosInput, arrayNodos);
addNodeListToArray (elementosSelect, arrayNodos);
alert ('Tenemos un nmero de elementos input select en el formulario: '+ arrayNodos.length);
}
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):
aprenderaprogramar.com, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.
Esta sintaxis merece ser comentada. La invocacin Array.prototype nos permite acceder al objeto en la
cima de la jerarqua de herencia u objeto padre de todos los objetos de su tipo. Cuando escribimos
algo como miArray = new Array(); estamos creando una instancia de un objeto tipo Array, que hereda
todas sus caractersticas del objeto padre Array.prototype.
Normalmente invocamos mtodos sobre instancias de los objetos en la cima jerrquica, pero en
ocasiones (como en este ejemplo), puede que nos resulte de inters invocar directamente un mtodo
sobre el objeto padre o prototype. En este caso al invocar el mtodo slice sin argumentos, se nos
devuelve un array sin ms. Para indicarle a partir de qu coleccin se debe devolver el array, usamos el
mtodo call indicando que el objeto que actuar como this y a partir del cual se debe devolver el array
es un objeto NodeList (un array-like object).
Aplicado al ejemplo de cdigo que venimos viendo podramos utilizar este cdigo. Escrbelo en tu editor
y comprueba los resultados:
window.onload = function () {
var elementosInput = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
var arrayNodos = Array.prototype.slice.call(elementosInput);
arrayNodos.push([].slice.call(elementosSelect));
alert ('Tenemos un nmero de elementos input select en el formulario: '+ arrayNodos.length);
}
El resultado esperado es que se muestre por pantalla: <<Tenemos un nmero de elementos input
select en el formulario: 10>>
Hemos usado en un caso Array.prototype y en otro [] para poner un ejemplo de uso, aunque en
realidad preferiremos usar Array.prototype:
window.onload = function () {
var elementosInput = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
var arrayNodos = Array.prototype.slice.call(elementosInput);
arrayNodos.push(Array.prototype.slice.call(elementosSelect));
alert ('Tenemos un nmero de elementos input select en el formulario: '+ arrayNodos.length);
}
ARRAYS.FROM
An nos queda una alternativa para resolver la conversin de objetos tipo array-like en arrays. El
mtodo Array.from. Este mtodo crea un objeto de tipo array a partir de un objeto iterable u objeto de
tipo array-like. Su uso habitual ser con sintaxis similar a esta:
aprenderaprogramar.com, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.
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
aprenderaprogramar.com, 2006-2029
Array. prototype, nodeList, arrays, array-like objects.
b) Aplicando la idea que podemos extraer de este cdigo, modifica el cdigo que hemos visto como
ejemplo en esta entrega para crear un array con los elementos input y select del formulario y mostrar
por pantalla el nmero de elementos input y select existentes en el formulario.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
SIGNIFICA
ADOS DE FOC
CUS Y BLUR
b) Un mttodo aplicab
ble a objetos de tipo Win
ndow (esto ya
y lo hemos estudiado
e n apartados anteriores
en
del curso)).
nombreDelElemento
o.focus();
nombreeDelElementto.blur();
Escribe el siguiente c
digo y compprueba sus resultados. Comprueba cmo en l see hace uso por un lado
de los eveentos focus y blur, y por otro lado del
d mtodo focus para establecer
e el foco cuand
do carga la
pgina enn el primer ellemento inpu
ut de tipo text que existe
e en el formu
ulario.
Fjate tam
mbin en cm mo se maneejan los even
ntos blur y focus para haacer que cuaando un inp put de tipo
text recibe el foco, su color de fon
ndo cambie a amarillo, mientras
m que cuando pierrde el foco, su
s color de
fondo cammbia a blanco o.
aprenderraprogramar.co
om, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.
Cuando en una pgina web el formulario es el elemento principal, se considera una buena prctica
(para facilitar que el usuario introduzca los datos) establecer el foco sobre el primer elemento del
formulario una vez la pgina haya cargado.
aprenderaprogramar.com, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.
SIGNIFICADOS DE SUBMIT
Al igual que focus y blur pueden ser eventos o mtodos de objetos, submit puede ser un evento pero
tambin un mtodo de un formulario. Como sabemos, submit hace alusin al envo de un formulario.
Podemos utilizar el evento submit para retrasar el envo del formulario hasta despus de haber
procesado el evento (de esta forma podemos hacer operaciones previas al envo, por ejemplo una
validacin). Una vez procesado el evento, procederamos al envo del formulario. Para que el formulario
se enve o no segn los resultados de las operaciones previas al envo aadiremos el parmetro para
capturar el evento en la funcin manejadora y aplicaremos el mtodo preventDefault() que hemos
estudiado en anteriores entregas del curso.
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
}
function avisarUsuario(evObject) {
evObject.preventDefault();
var nuevoNodo = document.createElement('h2');
nuevoNodo.innerHTML = '<h2 style="color:orange;">Enviando el formulario...</h2>';
document.body.appendChild(nuevoNodo);
var retrasar = setTimeout(procesaDentroDe2Segundos, 1000);
}
aprenderaprogramar.com, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.
function procesaDentroDe2Segundos() {
document.forms['formularioContacto'].submit();
}
</script>
</head>
El resultado esperado es que cuando se pulsa el botn enviar del formulario, debajo de este aparezca el
mensaje Enviando el formulario. Para hacer aparecer este mensaje hemos aadido un nodo al DOM
y establecido su contenido con innerHTML.
Nota: para que el efecto sea visible hemos introducido un pequeo retraso forzado en el envo del
formulario usando un setTimeout. Hemos hecho esto para que nos d tiempo a ver el texto (si la
conexin a internet que usemos es muy rpida y no establecemos una pequea demora no nos dara
tiempo a ver el mensaje, ya que este desaparece en cuanto comienza a cargarse la pgina de destino
del formulario). Este retraso no tiene una utilidad prctica, nicamente lo hemos introducido para
poder ver cmo podemos dar lugar a la ejecucin del evento submit usando el mtodo submit() en el
momento en que nosotros deseemos.
EJERCICIO Y EJEMPLO
Otra forma de detener el envo de un formulario se basa en que si el cdigo de respuesta a un evento
submit es el valor booleano false, no se producir el envo del formulario. En otro caso, s se producir
el envo. Examina el siguiente cdigo y responde a las cuestiones que se muestran a continuacin:
aprenderaprogramar.com, 2006-2029
Mtodos focus, blur. Detener envo de formularios. submit.
<!DOCTYPE html>
<html><head><script>
function validarForm() {
var x = document.forms["elForm1"]["nombre"].value;
if (x==null || x=="") { alert("El formulario no puede enviarse sin rellenar el nombre");
return false; }
}
</script></head>
<body><form style ="margin:30px;" name="elForm1" action="http://aprenderaprogramar.com" onsubmit="return
validarForm()" method="get">
Nombre: <input type="text" name="nombre">
<input type="submit" value="Enviar">
</form>
</body></html>
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.).
function validarFormu
v ulario(evObjeect) {
evObject.ppreventDefaault(); //Evitaa el envo del formulario hasta comprrobar
}
Otra form
ma que ha veenido siendo o bastante uttilizada es caapturar el evvento en el ccdigo HTMLL para que
devuelva true (en cuyyo caso se en
nviar el form
mulario) o fallse (en cuyo caso no se eenviar):
function validarFormu
v ulario() {
if ( ) { retturn true; // Si se verificaan las condicciones enviarr formulario
} else { retturn false; /// Si no se verifican las conndiciones no
o se enviar eel formulario
o
}
---
}
---
<form action="" method d="" id="" naame="" onsu ubmit="returrn validarForrmulario ()">>
aprenderraprogramar.co
om, 2006-2029
Validacin de formularios con JavaScript.
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:
function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
for (var i=0; i<formulario.length; i++) {
if(formulario[i].type =='text') {
if (formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
alert (formulario[i].name+ ' no puede estar vaco o contener slo espacios en blanco');
todoCorrecto=false;
}
}
}
if (todoCorrecto ==true) {formulario.submit();}
}
</script></head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2>
</div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>
aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.
Recordar lo que explicamos en los apartados del curso dedicados a expresiones regulares. /^\s*$/
define una expresin regular donde \s es el espacio en blanco, ^ indica comienzo de cadena con ese
carcter, * indica repeticin cualquier nmero de veces y $ seala el carcter de terminacin de
cadena. Por tanto la expresin regular indica las cadenas que empiezan con espacio en blanco, siguen
con cualquier nmero de espacios en blanco y terminan con un espacio en blanco.
El mtodo test devuelve true si la cadena hace match con la expresin regular o false si la cadena no
hace match.
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>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label{color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.
function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
if (isNaN(formulario.edad.value)==true || /^[1-9]\d$/.test(formulario.edad.value)==false ) {alert ('Edad no valida');
todoCorrecto=false;}
if (isNaN(formulario.altura.value)==true || formulario.altura.value<=0 || formulario.altura.value>=2.50) {
alert ('Altura no valida'); todoCorrecto=false;}
if (todoCorrecto ==true) {formulario.submit();}
}
</script></head>
<body><div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didctica y divulgacin de la
programacin</h2></div>
<!-- Formulario de contacto -->
<form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Edad:</span> <input id="edad" type="text" name="edad" /></label>
<label for="email"><span>Altura:</span> <input id="altura" type="text" name="altura" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form></body></html>
El resultado esperado es que el formulario no se enve si la edad no est formada por dos dgitos (no
sera vlido 124 ni -3.23) o si la altura es un valor negativo, mayor o igual a 2.50 no tiene formato
numrico.
Para comprobar que el usuario introduce una direccin de email vlida podemos hacer distintos tipos
de comprobaciones. La ms bsica es comprobar que la cadena contiene cualquier nmero de
caracteres seguido del carcter @ segudio de cualquier nmero de caracteres, seguido de un punto, y
seguido de cualquier nmero de caracteres. Esta validacin es amplia y no aceptara la mayor parte de
direcciones no vlidas, por ejemplo no se aceptara <<andres@gmailcom>> porque le falta el punto.
En general ser suficiente usar una expresin regular simple del tipo:
/\S+@\S+\.\S+/
En muchas pginas de internet se encuentran expresiones ms complejas que tratan de tener en cuenta
posibilidades menos frecuentes de formato de correo electrnico, por ejemplo esta:
/ [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-
9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/
Las comprobaciones se haran de la misma forma a como hemos visto en los ejemplos anteriores.
aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.
EJERCICIO
Dado el siguiente cdigo HTML que contiene un formulario con tres campos (nombre, apellidos y
email):
a) Si la longitud (nmero de caracteres) del campo nombre es mayor de 15 o igual a cero, el formulario
no se enviar.
b) Si la longitud (nmero de caracteres) del campo apellidos es mayor de 30 o igual a cero, el formulario
no se enviar.
c) Si la longitud (nmero de caracteres) del campo email es mayor de 35 o igual a cero, el formulario no
se enviar. Si el email no contiene el carcter @ el formulario no se enviar.
d) Si se produce cualquiera de las circunstancias anteriores, debe aparecer un recuadro con color de
fondo naranja y texto negro a la derecha de la casilla de introduccin de datos, informando del
problema detectado en ese campo (si es que ese campo presenta algn problema). Nota: estos
mensajes se deben mostrar slo si el campo es errneo despus de pulsado el botn enviar, y deben
desaparecer si el usuario realiza un nuevo intento y el campo es correcto. Los mensajes se incorporarn
al DOM (no sern mensajes usando alert).
Ejemplo de ejecucin. El usuario deja el nombre, apellidos y correo electrnico vacos. A la derecha de
las casillas de introduccin de datos aparecer: El nombre no puede estar vaco. Los apellidos no
pueden estar vacos. El correo electrnico no puede estar vaco.
aprenderaprogramar.com, 2006-2029
Validacin de formularios con JavaScript.
Ahora el usuario introduce nombre: <<Juan Manuel de Todos los Santos Efmeros Ecunimes de Todos
los das de la Tercera Edad>>. Como apellidos introduce: <<Surez>>. Y como correo electrnico
introduce: <<juanmanueldetodoslosantosefimerosecuanimesdetodoslosdias@gmail.com>>. Pulsa
enviar. A la derecha de la casilla de introduccin del nombre debe aparecer: Nombre demasiado largo.
Mximo 15 caracteres. A la derecha de apellidos no aparecer nada porque el apellido es correcto. A la
derecha del correo electrnico debe aparecer: Correo electrnico demasiado largo. Mximo 35
caracteres. Ahora el usuario escribe como nombre: Juan Manuel. Como apellidos: Surez. Y como
correo electrnico juanmanuel@gmail.com. Pulsa enviar y el formulario es enviado.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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):
<script tyype="text/javasscript">
window.o onload = functioon () {
documen nt.forms['formuularioContacto']].addEventListeener('submit', avisarUsuario);
a
}
aprenderraprogramar.co
om, 2006-2029
disabled JavaScript. Deshabilitar elementos en tiempo dinmico.
function avisarUsuario(evObject) {
evObject.preventDefault();
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);
}
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).
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.
aprenderaprogramar.com, 2006-2029
disabled JavaScript. Deshabilitar elementos en tiempo dinmico.
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.
aprenderaprogramar.com, 2006-2029
disabled JavaScript. Deshabilitar elementos en tiempo dinmico.
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.
aprenderaprogramar.com, 2006-2029
disabled JavaScript. Deshabilitar elementos en tiempo dinmico.
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:
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.
aprenderaprogramar.com, 2006-2029
disabled JavaScript. Deshabilitar elementos en tiempo dinmico.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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.
aprenderraprogramar.co
om, 2006-2029
Qu significa javascript:void(0)? return false y preventDefault.
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.
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:
aprenderaprogramar.com, 2006-2029
Qu significa javascript:void(0)? return false y preventDefault.
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:
</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.
aprenderaprogramar.com, 2006-2029
Qu significa javascript:void(0)? return false y preventDefault.
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().
Cuando se revisa cdigo HTML y JavaScript con frecuencia nos encontramos con expresiones del tipo:
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.
Aqu tenemos ms o menos claro que lo que se indica es: cuando se pulse sobre el enlace, ejecuta la
funcin JavaScript indicada.
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:
aprenderaprogramar.com, 2006-2029
Qu significa javascript:void(0)? return false y preventDefault.
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.
a) Se crea el aspecto de un link con el objetivo de avisar al usuario de que puede hacer click sobre ese
elemento.
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:
Esto es ms correcto: aqu est claro lo que se quiere hacer y se hace de una forma coherente.
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:
aprenderaprogramar.com, 2006-2029
Qu significa javascript:void(0)? return false y preventDefault.
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.
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:
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.
aprenderaprogramar.com, 2006-2029
Qu significa javascript:void(0)? return false y preventDefault.
EJERCICIO
b) Explica paso a paso qu es lo que hace el cdigo JavaScript que se ha incluido como respuesta al
evento click.
d) Modifica el cdigo para que la apariencia y resultados sean iguales pero sin usar un elemento <a>
</a>
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
VALIDACIIN DE FORM
MULARIOS JAVASCRIPT
EJEMPLO DE VALIDAC
CIN DE UN FORMULAR
RIO
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
aprenderraprogramar.co
om, 2006-2029
Validacin de formularios JavaScript. RadioButton, checkbox, select.
/*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>
<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="estiloForm">
<form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">
<label>Tratamiento</label> <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
<input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
<label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
<label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
<label>Direccin</label><input id="direccion1" name="direccion1" type="text"/><br/>
<label>Ciudad</label><select id="ciudad" name="ciudad"><option value="">Elija opcin</option>
<option value="Mexico">Mxico D.F. (MX)</option> <option value="Madrid">Madrid (ES)</option>
<option value="Santiago">Santiago (CL)</option>
</select><br/>
<label>Preferencias</label><input name="Libros" type="checkbox" />Libros
<input name="Peliculas" type="checkbox" />Pelculas
<input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
</form>
</div>
<div style="float:left;"><div id="validacionDatos" style="float:left;"><h4> Aviso datos a revisar o corregir: </h4></div>
</div></body></html>
aprenderaprogramar.com, 2006-2029
Validacin de formularios JavaScript. RadioButton, checkbox, select.
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:
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.
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:
Si no entiendes el significado de este cdigo, revisa los apartados relacionados con expresiones
regulares del curso.
aprenderaprogramar.com, 2006-2029
Validacin de formularios JavaScript. RadioButton, checkbox, select.
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>
<meta charset="utf-8">
<style type="text/css">
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>
aprenderaprogramar.com, 2006-2029
Validacin de formularios JavaScript. RadioButton, checkbox, select.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Objetos de tipo Image JavaScript. Obtener una coleccin de imgenes.
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.
aprenderraprogramar.co
om, 2006-2029
Objetos de tipo Image JavaScript. Obtener una coleccin de imgenes.
El resultado esperado es que una vez pulsamos sobre Probar se muestre lo siguiente:
Adems, debe aparecer la imagen una vez que aadimos el nodo img al elemento body del documento.
Disponemos de propiedades y mtodos aplicables a los objetos de tipo Image. Algunas propiedades a
destacar son:
aprenderaprogramar.com, 2006-2029
Objetos de tipo Image JavaScript. Obtener una coleccin de imgenes.
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:
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 programador ha desarrollado un cdigo y nos han pedido que lo revisemos. Escribe este cdigo en
un editor y responde a las siguientes preguntas (nota: cambia la ruta de las imgenes si quieres):
<html>
<head>
<script type="text/javascript">
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>
aprenderaprogramar.com, 2006-2029
Objetos de tipo Image JavaScript. Obtener una coleccin de imgenes.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
TRATAMIENTO DE ER
RRORES
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.
}
aprenderraprogramar.co
om, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
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.
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.
aprenderaprogramar.com, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
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.
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.
}
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).
aprenderaprogramar.com, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
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 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.
aprenderaprogramar.com, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
Adems de los objetos Error que indican un error genrico, podemos lanzar errores especializados.
Entre los errores especializados tenemos los siguientes:
Representa un error en la
SyntaxError sintaxis del cdigo que se throw new SyntaxError();
pretende ejecutar con eval()
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.
La creacin de objetos Error puede realizarse indicando simplemente new Error() o bien introduciendo
parmetros. Los parmetros admitidos son:
aprenderaprogramar.com, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
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'.
EJERCICIO
Un programador ha desarrollado un cdigo y nos han pedido que lo revisemos. Escribe este cdigo en
un editor, ejectalo y responde a las siguientes preguntas:
<html>
<head>
<meta charset="utf-8">
<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>
aprenderaprogramar.com, 2006-2029
Captura de errores con JavaScript. Bloques try catch.
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')?
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
AR INFORMA
TRASLADA ACIN DURA
ANTE LA NAV
VEGACIN
aprenderraprogramar.co
om, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
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.
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.
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:
aprenderaprogramar.com, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
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.
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):
aprenderaprogramar.com, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
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.
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.
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.
aprenderaprogramar.com, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
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.
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:
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.
aprenderaprogramar.com, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
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:
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.
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:
aprenderaprogramar.com, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
</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 >>
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
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=/";
}
aprenderaprogramar.com, 2006-2029
Cookies con JavaScript: crear, borrar, modificar, transmitir.
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.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Stric mode y use strict JavaScript. with.
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
STRICT MODE
M
A USE STRIC
DIRECTIVA CT
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
'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
aprenderraprogramar.co
om, 2006-2029
Stric mode y use strict JavaScript. with.
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:
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.
aprenderaprogramar.com, 2006-2029
Stric mode y use strict JavaScript. with.
Citaremos algunas:
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 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
aprenderaprogramar.com, 2006-2029
Stric mode y use strict JavaScript. with.
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:
Una aplicacin de with podra ser aplicar propiedades a un objeto, por ejemplo:
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.
aprenderaprogramar.com, 2006-2029
Stric mode y use strict JavaScript. with.
Ejemplo:
function 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
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?
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Stric mode y use strict JavaScript. with.
EJERCICIO 2
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Hoisting. Errores frecuentes en programacin JavaScript.
JAVASCRIPT HOISTING.
ERRORES FRECUENTES DE
PROGRAMADORES Y
APRENDERAPROGRAMAR.COM
CONSEJOS. PROBLEMAS
PRECISIN DECIMAL
(CU01190E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
HOISTING
G JAVASCRIP
PT
N O HOISTING DE DECLA
ELEVACI ARACIONES DE VARIABLLES
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;
aprenderraprogramar.co
om, 2006-2029
Hoisting. Errores frecuentes en programacin JavaScript.
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:
b) Ejecutar el cdigo
function ejemplo() {
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:
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.
aprenderaprogramar.com, 2006-2029
Hoisting. Errores frecuentes en programacin JavaScript.
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.
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:
aprenderaprogramar.com, 2006-2029
Hoisting. Errores frecuentes en programacin JavaScript.
aprenderaprogramar.com, 2006-2029
Hoisting. Errores frecuentes en programacin JavaScript.
EJERCICIO
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?
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?
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para escribir cdigo JavaScript.
JAVASCRIPT. REGLAS DE
ESTILO (MANUALES O
CONVENCIONES). CMO
APRENDERAPROGRAMAR.COM
CREAR OBJETOS Y
ARRAYS. EJEMPLOS Y
EJERCICIO (CU01191E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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.
aprenderraprogramar.co
om, 2006-2029
Reglas de estilo para escribir cdigo JavaScript.
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.
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 */ };
}
aprenderaprogramar.com, 2006-2029
Reglas de estilo para escribir cdigo JavaScript.
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);
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.
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.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para escribir cdigo JavaScript.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para escribir cdigo JavaScript.
EJERCICIO
Un programador ha creado este cdigo y nos han pedido que lo mejoremos. Revsalo y responde a las
siguientes cuestiones:
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>
aprenderaprogramar.com, 2006-2029
Reglas de estilo para escribir cdigo JavaScript.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
GUA DE ESTILO
JAVASCRIPT PARA
COMENTARIOS DE
APRENDERAPROGRAMAR.COM PROYECTOS. JSDOC.
@CONSTRUCTOR,
@DEPRECATED, ETC.
EJEMPLOS (CU01192E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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.
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.
aprenderraprogramar.co
om, 2006-2029
Reglas de estilo para comentarios JavaScript.
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.
Considera que ests revisando un cdigo y que en una funcin encuentras esto:
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.
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:
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.
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.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
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.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
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.
Ejemplo:
/**
* Verifies if the string is in a valid email format
* @param {string}
* @return {boolean}
*/
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;
}
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>>.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
@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() {
...
};
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
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:
aprenderaprogramar.com, 2006-2029
Reglas de estilo para comentarios JavaScript.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
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
Categora: Tutorial bsico del programador web: JavaScript desde cero
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?
aprenderraprogramar.co
om, 2006-2029
Qu es y para qu sirve Ajax? XML, JSON. Ejemplo.
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.
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.
aprenderaprogramar.com, 2006-2029
Qu es y para qu sirve Ajax? XML, JSON. Ejemplo.
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.
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.
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
aprenderaprogramar.com, 2006-2029
Qu es y para qu sirve Ajax? XML, JSON. Ejemplo.
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.
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.
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).
aprenderaprogramar.com, 2006-2029
Qu es y para qu sirve Ajax? XML, JSON. Ejemplo.
// 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).
aprenderaprogramar.com, 2006-2029
Qu es y para qu sirve Ajax? XML, JSON. Ejemplo.
Fjate en que lo interesante de este ejemplo es que se recuperan datos que se encuentran en el
servidor.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
Programacin web profesional JavaScript. Libreras, frameworks.
PROGRAMACIN WEB-
APP JAVASCRIPT.
LIBRERAS,
APRENDERAPROGRAMAR.COM
FRAMEWORKS. JQUERY,
ANGULARJS. VENTAJAS.
DIFERENCIAS. (CU01194E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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
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.
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
aprenderraprogramar.co
om, 2006-2029
Programacin web profesional JavaScript. Libreras, frameworks.
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.
aprenderaprogramar.com, 2006-2029
Programacin web profesional JavaScript. Libreras, frameworks.
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.
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):
aprenderaprogramar.com, 2006-2029
Programacin web profesional JavaScript. Libreras, frameworks.
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.
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.
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.
aprenderaprogramar.com, 2006-2029
Programacin web profesional JavaScript. Libreras, frameworks.
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:
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
El API Canvas. Dibujar crculos, formas, grficos, juegos
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
CANVAS COMO
C SUPEERFICIE GRFFICA
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
aprenderraprogramar.co
om, 2006-2029
El API Canvas. Dibujar crculos, formas, grficos, juegos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
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>
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).
aprenderaprogramar.com, 2006-2029
El API Canvas. Dibujar crculos, formas, grficos, juegos
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);
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).
aprenderaprogramar.com, 2006-2029
El API Canvas. Dibujar crculos, formas, grficos, juegos
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:
b) Dibujar texto
d) Dibujar grficos
g) Crear juegos
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.
aprenderaprogramar.com, 2006-2029
El API Canvas. Dibujar crculos, formas, grficos, juegos
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.
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.
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
ElAPIDragandDrop.Arrastrarysoltarendesarrollosweb
APIDRAGANDDROP
HTMLYJAVASCRIPT.
EVENTOS.EFECTOS.
APRENDERAPROGRAMAR.COM
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
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
aprenderraprogramar.co
om,20062029
ElAPIDragandDrop.Arrastrarysoltarendesarrollosweb
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>
aprenderaprogramar.com,20062029
ElAPIDragandDrop.Arrastrarysoltarendesarrollosweb
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.
aprenderaprogramar.com,20062029
ElAPIDragandDrop.Arrastrarysoltarendesarrollosweb
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!
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
Prximaentrega:CU01197E
Accesoalcursocompletoenaprenderaprogramar.com>Cursos,oenladireccinsiguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
aprenderaprogramar.com,20062029
El API Geolocation. Geolocalizacin y mapas con JavaScript.
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
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.
aprenderraprogramar.co
om, 2006-2029
El API Geolocation. Geolocalizacin y mapas con JavaScript.
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>
<script type="text/javascript">
function iniciar(){
var boton=document.getElementById('obtener');
boton.addEventListener('click', obtener, false);
}
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');
}
</script>
</head>
<body>
<div id="localizacion">
<button id="obtener" style="margin:30px;">Obtener mi localizacin</button>
</div>
</body>
</html>
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:
aprenderaprogramar.com, 2006-2029
El API Geolocation. Geolocalizacin y mapas con JavaScript.
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.
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>
aprenderaprogramar.com, 2006-2029
El API Geolocation. Geolocalizacin y mapas con JavaScript.
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 y profundizar en las posibilidades del api de Google Maps puede visitar la
documentacin del api: https://developers.google.com/maps/documentation/javascript/.
aprenderaprogramar.com, 2006-2029
El API Geolocation. Geolocalizacin y mapas con 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
Para comprobar si tus respuestas y cdigo son correctos puedes consultar en los foros
aprenderaprogramar.com.
aprenderaprogramar.com, 2006-2029
sessionStorage y localStorage JavaScript.
SESSIONSTORAGE Y
LOCALSTORAGE.
DIFERENCIAS. GUARDAR
APRENDERAPROGRAMAR.COM
DATOS EN CACH Y
PERSISTENCIA CON
JAVASCRIPT (CU01198E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
UN MUND
DO POR DELLANTE CON JAVASCRIPT
J
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.
aprenderraprogramar.co
om, 2006-2029
sessionStorage y localStorage JavaScript.
SESSION STORAGE
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Web Storage API ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
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.';
}
</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.
aprenderaprogramar.com, 2006-2029
sessionStorage y localStorage JavaScript.
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.
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.
Los datos con sessionStorage son accesibles mientras dura la sesin de navegacin. Los datos no son
recuperables si:
b) Se abre una nueva pestaa de navegacin independiente y se sigue navegando en esa pestaa.
LOCALSTORAGE
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.
aprenderaprogramar.com, 2006-2029
sessionStorage y localStorage JavaScript.
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.
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.
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.
aprenderaprogramar.com, 2006-2029
sessionStorage y localStorage JavaScript.
Api Indexed Database: concebida para almacenar grandes volmenes de informacin estructurada, de
forma anloga a una base de datos pero con ciertas particularidades.
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.
aprenderaprogramar.com, 2006-2029
Final del curso tutorial bsico del programador web: JavaScript.
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
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.
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
El equipo de apren
nderaprogram
mar.com
aprenderraprogramar.co
om, 2006-2029