GEES
JavaScript
Aprende a programar
en el lenguaje de la Web
e
Instalar el entorno de trabajo
Sintaxis, arreglos, objetos, metodos
Manejo del DOM y componentes HTML
Programacion para smartphones 5
i
5
PROXIMO TITULO
0 SUSCRIBIENDOTE EN USERSHOP.REDUSERS.COM \USERS|
JavaScript
Aprende a programar
en el lenguaje de la Web
JavaScript es el lenguaje de programacién mas utilizado hoy,
Juntoa HTML y CSS, le da vida a la gran mayoria de los sitios
Web que visitamos. Pero JavaScript ya no es exclusivo de la
Web: prayectos como NodeJS, Electron y React Native lo
TITULO
JavaScript / Aprende a programar
enel lenguaje de la Web
llevaron al ambito de los servidores, los programas de escritorio ‘AUTOR
ylas aplicaciones maviles, Ademas, cada dia surgen nuevos Femando O. Luna
frameworks (como los lideres y archienemigos React y Angular) ae
para expandir las posibilidades de JavaScript. eaiaceee
En esta guia introductoria, Ferando Luna, con su larga experiencia
de docente y technical writer, nos llevard en un viaje vertiginoso
desde el primer "Hola Mundo” hasta aplicaciones que nos hablan
yacceden a bases de datos. Obviamente, este no pretende ser un
DISENO Y PRODUCCION
GustavoDe Matteo
‘curso comprehensivo, sino un punto de partida para que el lector COLECCION Users Guias
ccomience a programar en este excitante lenguaje, FORMATO 28% 20¢m
PAGINAS 144
Miguel Lederkremer (@leder) ie ari bey Fest 02
Director Editorial
Las 5 tecnologias mas
populares del momento
en Stack Overflow,
el foro de programacién lider.
Copyright © WIMXIX. Es una pubiescion 6
SIKEDICIONES. Hechoeldapésiloquemarca
\aley 11723. Todos los derechos reservados
Esta pubieacion no puede
fen todo nen parte, por ningun medi
tutu, sinal permiso previoy porescito de
SIX EDICIONES. Su inraccén esta penaca
por las leyes 11723 y 25446, La ectoria no
0 o
pekeomnediers Nerconfedisns asgumcimbedwesciny reercenevedsericon gum raspanaabidad alguna por cualquie
lervadade a fabricaién fun
‘Luna, Femando O. ionamiento yo ui
JavaScript: aprende a programar en el lenguaje de la Web / Fernando O, Luna, - | productos que se de
4a ed.- Ciudad Autonoma de Buenos Aires: Six Ediciones, 2019, clas lasmarcas mencionadas entero son
144 p.;28x 200m, propiedad exclusiva de sus respectivos due
fos, Impreso en Acgentina, Libro de edicén
ISBN 978-887-4958-08-2
4. Lenguaje de Programacién.| Titulo Ccasano Grafica S.A. = Ministro Brin 2932
argentina, Primera impresion relizeda en
laa (Lands) Prov. de Bue-
a, enV, MK
DD 005.133 (7826) R de
0s hires - Ager
reduserscom | 1 JavaScript
Aprende a programar
en el lenguaje de la Web
PROYECTOS
EXPLICADOS
PASO A PASO
INTRODUCCION
Qué es JavaScript
Configurar el entorno de trabajo.
VsCode
JS integrado versus JS independiente
JavaScript fuera del HTML
Sintaxis basica de JavaScript.
Manejo de condicionales IF-ELSE
2| @redcsrscom
RSSSaaa
CONCEPTO INICIALES
Introduccién a la Programacién
Orientada a Objetos.
Fechas, intervalos y cronémetros
Arreglos
Cadenas de texto
Formutarios y datos
PROYECTOS
Controlar el DOM HTML
Hacer hablar a JavaScript.
Utilizar la API de notificaciones
Almacenar datos localmente.
Implementar SL offline
Encriptar contenido
Detectar conectividad a Internet.
Adaptar graficos y multimedia
segtin la performance.
Capturar fotografias y videos.
Acceder al hardware de los dispositivos.
Los sensores de movimiento.
Manejo de datos remotos con JSON.
Proteger el cédigo mediante ofuscacién.
RRSxraes
BRB
Los archivos de practica marcados
ccon este icono se pueden descargar
gratuitamente desde
Ll J edusers.com/u/quiaUserss JavaScript > Introduccion
Qué es JavaScript
JavaScript, cominmente abreviado como JS, es un lenguaje de programacién del tipo
interpretado. Esta basado en el estandar ECMAScript y, a pesar de ser débilmente tipado
ydinamico, también se define como un lenguaje orientado a objetos.
JavaScript nacié en el afio 1995, practicamente _cddigo, dado que esta accién generaba un retardo
de la mano de la WWW, o Internet comercial notable en la carga completa de una pagina. A
Fue disefiado en un principio por Netscape los pocos afios de vida fue destronado por Flash
Communications (hoy, Mozilla Foundation). Player, pero tan solo una década después, volvid
Integrado originalmente como una especie de completamente recargado, y recuperé su lugar y
plugin en los navegadores de la primera era web, labor dentro del desarrollo de sitios web.
fue muy criticado por su lentitud para procesar
11 Ejemplo de listas en
int fibonacci[] = {1, 2, 3, 5, 8, 13, 21, 34}5
Sintaxis
JavaScript toma su mayor
esencia del lenguaje C, y utiliza
convenciones de lenguaje y
algunos nombres que son propios 1/ tjenplo de Listas en Javascript
de Java, aunque Java y JavaScript
‘no guardan relacion alguna entre
si. Las ultimas versiones de JS
permiten que este sea un lenguaje
del lado del cliente, como asi 11 otra Forma de declarar una Lista en Javascript
también del servidor.
var fibonacci[] = {1, 2, 3, 5, 8, 13, 21, 34}5
var fibonacci = new Array(1, 2, 3, 5, 8, 13)5
4] retuseracom Integracion en navegadores web
Actualmente, JavaScript esta integrado dentro del motor de
los navegadores web més populares. Esto determiné diferentes
implementaciones del lenguaje, y dependiendo del motor,
JS puede tener 0 no ciertas funcionalidades particulares.
NAisenonaiiss)
Googe rene Comin
kus Proyecto KDE (Konqueror Web Browser)
Los navegadores web mas populares y su version adaptada de JavaScript.
‘Almomento de escribir esta obra, los mayores motores web del
mercado son de V8, Rhino y Chakra/EdgeHTML. Por lo tanto,
cualquier desarrollo en JavaScript debe probarse en estos motores,
para garantizar su funcionamiento en los demas.
10 ventajas de utilizar JavaScript puro
Existen decenas de frameworks 0 implementaciones alternativas que utilizan JavaScript
‘como lenguaje y que, a través de diferentes APIs, favorecen el llamado de las sentencias
y funciones de este (query, ReactNative y Angular, entre otros tantos).
Apesar de la facilidad que nos dan estos frameworks, hay muchos beneficios que brinda
JavaScript como lenguaje puro. Entre ellos, podemos destacar los siguientes:
7) sung wrciio eam desl de apps
1 Vesuverpoderoce 6 reves nonce
(Cuando esta integrado en [Esra atorma
lasmoiores web, ejecuta (computadoras, tablets,
ripidamente su sintaxis ‘movies, hardware)
Ya esta integrado en los Elmina el peso aicional
navegadores web més ‘que un framewerk genera,
populares,
Introduccion
Configurar el entorno
de trabajo
instalando las herramientas necesarias destinadas a realizar algoritmos éptimos y probar
2 Para poner manos a la obra, delinearemos a continuacion nuestro ambiente de desarrollo,
cada uno de los ejercicios de la forma mas real posible.
Para llevar a cabo esta tarea, lo primero
que haremos sera instalar el IDE donde
programaremos todos los ejemplos practicos. La
sigla IDE (Integrated Development Environment)
significa “entomo de desarrollo integrado”. Se
trata de un programa o interfaz que permite
estructurar un proyecto que requiere ser
programado, En nuestro caso, el IDE que vamos a
utilizar da la posibilidad de incorporar una serie de
herramientas adicionales, denominadas plugins,
que facilitaran aun més la tarea de programacién,
depuracién y verificacion del cédigo.
July 2018 (version 1.26)
Visual Studio Code
Desde hace algunos afios, Microsoft cuenta con
una herramienta totalmente gratuita llamada
Visual Studio Code. Este IDE, desarrollado bajo
el paradigma Open Source e inspirado en el
editor de cédigo Atom, esta disponible para las
plataformas Windows, Linux y Mac.
También existen otros editores con excelentes
prestaciones para cualquier programador, por
ejemplo Alom, Sublime Text o Notepads.
6 | retuseracom
sa Encode
visualstudio,
com/updates
enconiraremas
informacién sobre
cada nueva release
deeste IDE
Plugins esenciales
Existe un compendio de plugins subidos ala
plataforma de Code que ofrecen diferentes
opciones a los programadores, como ahorro
de escritura de codigo mediante plantillas
prearmadas, y acceso FTP para subir el
contenido a una web, entre un sinnimero de.
funciones mas. Estan accesibles desde el
buscador de extensiones, presionando CTRL +
SHIFT + X. Recomendamos siempre utilizar los
plugins indispensables, ya que una instalacién
masiva de ellos ralentizard el IDE. Configurar el IDE
Visual Studio Code cuenta con un sistema de configuracién que permite adaptar el IDE a nuestra
necesidad. Pero, a diferencia del resto de las aplicaciones personalizables, en este IDE se modifica un
archivo JSON a nivel codigo.
41 Ingresemos ala URL hiips://code.visualstudio.com. ll encontraremos el
link para descargar Visual Studio Code seguin nuestro sistema operativo actual.
Realizado este paso, ejecutamos la instalacién correspondiente.
‘mo
Ya dentro de Code, nos ocupamos de instalar
os plugins SpanishLanguage Pack, que
2D Erproceso do nefslacién es summamonte adaptan toda la interfaz a nuestra lengua madre;
sencillo, guiado como siempre por y Live HTML Previewer, que ejecuta una vista
una interfaz gréfica que nos explica y previa de forma integrada al IDE.
consulta sobre lo que vamos a instalar
ydebemos dejar configurado.
Presionamos la tecla
CTRL seguida de la
coma (,) para abrir
la configuracién del
entorno. Ubicamos alli el
parémetro que deseamos
cambiar, y 10 pegamos
enel panel derecho
modificando su valor por
el deseado.
reduserscom | 7 JavaScript > Introduccién
VS Code
VS Code es un completo editor de cédigo fuente que incluye
decenas de funcionalidades (0 plugins) desarrolladas por terceros,
ideales para complementar nuestros proyectos,
A través de la barra lateral, accedemos Todos los archivos que se Dentro de los complementos
rapidamente ala lista de archivos y incluyen en nuestro proyecto basicos que instalamos en
Ccarpetas de nuesto proyecto, buscamos (HTML, CSS, J5, Imagenes, Code, se encuentra Live HTML
fextos o cadenas de caracteres especifcas JSON, etestera) son abierios y Previewer, el cual permite obtener
dentro de los archivos de trabajo, nos listados en esta barra superior Una vista del contenido que
cconectamos y sineronizaras el contenido on solo hacer clic sobre el estamos creando. Lo activamos
contra Github, accedemos ala ventana de archivo en cuestién, podremos presionando CTRL ++.
epuracion de codigo,
plugins dentro de
sumamos mas ver su codigo y comenzar a
de, trabajar sobre é
Los errores y advertencia
que surgen en el eédigo
sonalertados a través
deestosicones, que
dospliegan a ventana de
depuracion integrada en
Code y permiten obtener un
Aqui¥e lista a informacion
‘general de los archivos del
proyecto. Vernos en qué
linea columna de cécigo
ros encontramas, los
es: bulacion, el
istado de ellos. Haciendo, El cOdigo que editemas en cualquier archivo ‘codigo de idioma ye tipo de
licen alguno, se nos proyecto aparecerd en esta rea. Presionando CTRL+ archivo, entre otras tant
cconduce al archivo J/CTRL- podemas hacer zoom para tener una mejor [advertencias y notificaciones
cadigo para corregiia, visualizacion del cédigo, segtin nuestra pref propias de este IDE
B| redusers.com Herramientas para el desarrollador
Para depurar JavaScript a lo largo de esta obra, bloques de cédigo anidados HTML, CSS 0 JS;
uilizaremos las Herramientas parael desarrollador. _revisar el comportamiento de la red al cargar
Estas vienen integradas.a todos los navegadores un sito; verficar su performance y la memoria
web y nos permiten, entre otras opciones, que consume; ver informacién sobre una web
depurar cédigo; analizar variables; detectar instalable, por ejemplo, Progressive Web App: y
errores; acceder al cédigo fuente del frontend, analizar el comportamiento responsivo.
de cualquier sitio web; desplegar y contraer
bey Claneeaeful: thee des-mt” style"becharounds rah(28, 288,285)
ripe sr” Cal {aaah shlong e14-0
alba dl hone dns RES
?
res (
Un mundo detras de F12
Las Herramientas para el desarrollador o en detalle sus funciones integradas. Si somos
Developer Tools se activan en cualquier pestana usuarios de otros navegadores web, aqui listamos
de navegacién presionando la tecla F12. Alo las URL de las herramientas para el desarrollador
largo de las proximas paginas, conoceremos mas _ de otros browsers muy populares:
NAVEGADOR WEB —AYUDAENLINEA DE HERRAMIENTAS PARA EL DESARROLLADOR
| MozillaFirefox __| https://developer.mozila.org/son/docs/Tools.
von apr content
Herramientas para el desarrollador de los diferentes navegadores web.
Si bien utilizaremos Google Chrome como nuestra referencia para
probar los desarrollos web en JavaScript, las herramientas antes
mencionadas nos permitiran consultar y probar nuestros desarrollos
en otras plataformas en caso de que lo necesitemos.
redusers.com| 9 JavaScript > Introduccion
JS integrado versus
JS independiente
En nuestro primer acercamiento a JavaScript, repasaremos las ventajas y desventajas
de utilizar la sintaxis JavaScript integrada en un archivo HTML, versus la sintaxis JS
en un archivo independiente. También desarrollaremos nuestro primer proyecto,
el cldsico “Hola Mundo”, de todas las formas posibles que nos permite este lenguaje.
En los inicios de la era Web, JavaScript fue
la estrelia de facil implementacién dentro de
cada documento HTML. La simplicidad de
su cédigo permitia llevar a las webs efectos
notorios sobre imagenes y textos, e interactuar
facilmente con el browser. Esto fue un gran
avance para la época, pero también fue un
arma de doble filo, ya que las conexiones via
médem hacian pesada la carga de contenido
en abundancia. El resultado final fue que JS
no beneficiaba a los websites de la primera
era y, por consiguiente, su implementacién fue
estrictamente limitada y replanteada, de modo
que no perjudicare la velocidad y la respuesta
que el avance tecnolégico de Internet habia
puesto ante nosotros,
The World Hide Web prarect
sora wine
initiative aiming to aive universal accoss to a larse universe of dacunents.
Everything there i= online about KO ts Linked
41 , Hovenbor's Ha revel! , Freqsently Raked Bi
rectly oF indireetty to thi
Wat's out there2(7IPointers to the world’s online information,
Mettte1 fe the brauser you are acing
Prodectot 113
NexISteplt41 , Sorvarst1S1
robotl47) , Librarytt6) 2
ote
ntoenenmnnioeneaiy if
Si bien JavaScript era un lenguaje de
programacién independiente, en ese tiempo
dependia de que los usuarios tuvieran
instalada Java Virtual Machine en su
10 | redeserscom
state, (e.9- Line Model 21 X11 Uiolatt3) ,
TooteCt6l , Hat
Enel link https://bit.
ly/ldv8npP podemos
experimentar cémo era
una web y su velocidad
de carga en la época del
médem telefénico, si
CSS, niimagenes..
JavaScript!
computadora. Con los aftos y el gran avance de
los motores de navegaci6n web, JavaScript se
integré a ellos y facilité su uso a la mayoria de
los navegantes web Estructura HTML
Antes de sumergimos en el mundo JS, veamos las bases del lenguaje de marcado
HTML, el cual es fundamental para alojar todos los proyectos que realizaremos en esla
publicacién. Si ya tenemos el conocimiento necesario sobre esta tecnologia, podemos
pasar por alto esta seccién, e ir directamente al desarrollo del primer proyecto.
En la actualidad, se utiliza HTML como lenguaje de desarrollo web. Este término
proviene de HyperText Markup Language, o lenguaje de marcado de hipertexto. Este
‘se ocupa de indicarle al motor de navegacion como debe formatear estructuralmente
una web al momento de cargarla en la pestafia del navegador.
\Veamos a continuacién el cédigo de ejemplo de un HTML base.
Cédigo HTML base
Este tag hace reference @ cuéndo comienze Es la deeiaracion que todo documento HTML debe
contenido preformateado ene! lenguaje de fener como primera instanca, prececiendo al fag
hipertext. El contenido se inicia.con el fag -chiml>. Esl insiruccine indica al navegador web
yfnalizacon el fag . Todo qué version de HTML se uiliz6 para escribir la pagina
to que est entre ellos seré anaizedo por el que esta por cargar. Si bien HTMILS norequiere el
navegador web, que ratara de interpreterio Uso de la declaracion , se la sigue
como tagHTML (una imagen, text. un video. emplesndo porque, muchas veces, en una pagina web
elcétera).Encaso de que no pueda hacero, el se incluyen referencias de HTML moderna (HTMLS) y
‘motor de navegacién mostraréel contenido en referencias de HTML anfiguo (HTML 41 o ulterior)
estién como un simple texto.
© indexhtml %
2
width, initial-scale=t'
screen” href="nain.css” />
Esta infografia nos
‘Se usa comiinmente para deciarar Dentro de este tag se agrupa todo el da un panorama
€ contenido principal de la pagina contenido que le da vida ala parte
HTML, como lituloa mostrar, formato _—_grafiea de la pagina HTML: tulos, general de lo que
de coraceresullizado, eferenclasa _—extos, imagenes, videos y audio, HTML necesita
las hojas de estilo CSS, referencias entre otro material que aqu pueda
alosarchivos extemos JavaScript, volcarse. Todo esto finalmente para funcionar.
bloque de codigo JavaScript que conforma la pagina web ens, que es
Soietmanemn tam Rgaumsemnommpueey | /rerteleurncs tit
de la web, y otros tantos recursos nuestro browser. Todo tag deciarado poco mas en los
que complementan la pagina. Al secierta con eltag , y ir
igual que el resto de los tags que cualquier otro tg grtico que se principales tags que
conterman HTML ete se Gera con See eaeeel ea se utilizan en los
la contraparte interpretado por el navegador. apartados
y .
retuseracom | TH JavaScript > Introduccién /JS integrado versus JS independiente
Apartado HEAD
...
Indica el titulo que lleva la pagina web en si. Es lo que se visualiza en a
ppestafta del navegador cuando se carga un documento HTML.
...
Permite encerrar en su interior la mayoria de los contenidos 0 etiquetas
HTML que conforman la pagina web.
... ‘A través de H1, 2, 3, 4, 5 y 6 damos vida alos titulos que se incluyen
antes de un texto extenso.
...
El elemento Paragraph nos permite incluir el texto que se utiliza dentro
de cada sitio web.
Este elemento nos permite insertar un video con los controles basicos
(volumen, play, pausa, stop, pantalla completa, etcétera).
Los archivos de audio en los formatos mas comunes son visualizados
junto con el set de controles basicos, a través de este tag HTML.
12] retoserscom
Si bien existe un sinfin de etiquetas
HTML que conforman los documentos
en cuestion, a través de estas tablas
presentamos las mas esenciales.
Muchas de ellas seran usadas a lo
largo de esta obra, y las crearemos,
controlaremos y modificaremos desde
el lenguaje JavaScript. JS dentro del HTML
Comencemos a delinear nuestro primer trabajo, conocido como
lola mundo!”. Para hacerlo, vamos a ingresar en Visual Studio
Code y crear dentro de este IDE el primer proyecto, presionando la
combinacién de teclas CTRL + K + O.
= jf
ae
—
i
Bice
Bice
aoe
Deere
Tal como vemos, Code nos
pediré abriruna carpeta
‘También, en esta misma
ventana, tenemos la opcién de
crear una nueva presionando Broan et ean
elicono correspondiente dela | chem»
barra de herramientas superior.
Hacemos esto, le damos un Javascript - Proyecto e1
seguido, presionamos Ab
Carpeta,
Esra seer ieets
primer entorno de proyecto. eae
A.continuacion, presionamos Sree
CTRL + N para generar un
nuevo archivo, que guardamos
con el nombre index.html
Ahora copiamos en este Como vemos hasta aqui, el cédigo HTML
documento nuestro primer texto les muy basico y prescinde de algunos
HTML, tal como muestra el elementos mencionados en las tablas
siguiente bloque de cédigo de referencia. Esta base nos basta para
desarrollarel primer ejemplo.
redusers.com | 13 JavaScript > Introduccién /JS integrado versus JS independiente
El tag
Guardamas el cbdigo escrito
hasta el moment, y luego,
arrastramos el archivo © > X BD saemannoueipacnnanpmonce.numsiinach den
index hasta una nueva
pestafa del navegador
‘web. El resultado oblenido eens ince
dbe ser el que muestra ia
siguiente imagen
Como podemos apreciar, hemos escrito cédigo JS escrito hasta otra ubicacién del
nuestra primera sentencia JavaScript. Enella archivo HTML. Vamos a ubicarlo precisamente
utilizamos la funcién alert() para visualizar un entre el cietre del tag y el cierre
texto en pantalla del tag . El cédigo quedard de la
Ahora probemos a desplazar el bloque de siguiente forma
Ejecutemos otra vez el archivo HTML,
refrescando la pagina cargada ene!
navegador web meciante CTRL +R.
¢Logtamos e| mismo cometido que
‘antes? cPudimas volver a visualizar el
mensaje escrito en JS?
[Nuestro primer eédigo Javascript
‘Seguramente que si, hemos conseguido lo mismo. local y, luego, la procesa leyendo tal como
Ahora, évemos alguna diferencia entre una y otra leemos un libro: de arriba hacia abajo. Analiza
prueba realizada? cada uno de los tags de la pagina, los procesa,
E| motor de un navegador web, cualquiera y dibuja en la pestafia del navegador web, de
que este sea, busca la pagina web principal manera progresiva, lo que el tag, cédigo script u
(cespecifica) en el servidor 0 URL que le hoja de estilo CSS indica
indiquemos. Al encontrarla, la carga en la caché
14] reteseracom Comportamiento de HTML y JS en un web browser
Através de la siguiente infogratia veamos cémo se comportan un
navegador web y un sitio web durante el proceso de solicitud de una
pagina, su devolucién, procesamiento y visualizacién del cédigo.
Peticién
(Cuando un navegador webs hace
la peticién de una pagine ositioa
fl Internet, enviala URL requerida
hacia iran nube. Se producen
<+— todas las redirecciones necesarias
hasta encontrar ladireccion €!
WWW ics : souacrpense taper,
—> ‘ejecuta procesos internosy
finalmente, le dewelve al navegador
lapagina soicteda, ole indica cual
es la pagina principal oalternatva a
la buscada,
Devoluci6n y caché
Lega la pagina soictada por e!
web browser, y como primera een
medida, el navegador se ocup
dealmacenaria en una cache
de datos. Luego, de alli pasa
directamente al motor de
navegacin, que la procesa para,
finalmente, master el contenido —
en pantalla
Procesamiento y visualizacion
Porilimo, ¢l motor del navegador
web analiza y “decodifica”lasintaxis
de la pagina, yva mostrando en
pantalla, progresivamente, cada uno
de los tags que esta incluye. Es por
(50 que la carga de cada pgina de
sitios web que solemos vistar se ve
Ge forma gradual
Pero épor qué explicamos esto? Esta manera sea embebido en el documento HTML 0 en un
de procesar la informacién que tienen los archivo aparte. Es por eso que, en determinadas
navegadores web influye no solo en el cédigo situaciones, si influird el lugar donde ubiquemos
HTML y CSS de cada pagina, sino también en el cédigo JavaScript o la referencia a nuestro
el cédigo JavaScript que esta contenga, ya archivo JS.
retuseracom | 15 JavaScript > Introducci
JavaScript fuera del HTML
\Veamos ahora como llevar adelante el mismo ejemplo, pero ufilizando
un archivo externo al documento HTML. Los archivos que alojan
contenido exclusivo de JavaScript finalizan con la extension JS.
Volvamos al proyecto, eliminemos el cédigo dentro del tag
Por ultimo, modificamos el tag de apertura
El resultado debe ser igual al que se muestra en la imagen siguiente.
amc Prec) Si ejecutamos el ejemplo con esta
<> X BD tey/cjuseeitunaDescop/tocesnezadenplarayeasd nueva modificacién, veremos que
legamos al mismo camino que con
el cédigo escrito anteriormente,
vcd Hl ir con la diferencia de que nuestro
Cédigo JS esta escrito en un archivo
separado, y que el bloque de cédigo
que ejecuta el mensaje “Hola
mundo...” esta contenido dentro de
una funcién,
{sta pgina ace
+ eorones Aneto
© index
ae Mas adelante analizaremos para qué
. wa se usan las funciones.
> iene Ahora, como ultima prueba,
: ee & modifiquemos la ubicacion de la
sie linea
redusers.com |25 JavaScript > Conceptos iniciales
Introduccion a la
Programacion Orientada
a Objetos
Una de las aplicaciones mas comunes en JavaScript, al momento de programar, es la
invocacién de objetos que simplifican mucho las tareas cotidianas al escribir cédigo.
Veamos a continuacién las principales caracteristicas de estos elementos.
Dentro del mundo de la programacién, el
concepto “objetos” hace referencia a algo similar
a lo que sucede en el mundo que nos rodea. Si
miramos a nuestro alrededor, podemos ver un
sinfin de cosas, como mesas, sillas, personas,
puertas, ventanas, elcétera. A su vez, cada
uno de estos objetos tiene un comportamiento
Caracteristicas del Objeto Perro:
4 patas
cola
‘cabeza
2ojos
‘boca
ladea
determinado; por lo tanto, si sabemos qué son y
qué hace cada uno de ellos, entonces tendremos
en.claro su concepto
Si tomamos como referencia un perro, sabemos
que tiene cuatro patas, una cola y ladra. Si
pensamos en un gato, también tiene cuatro patas
yuna cola, pero maulla en vez de ladrar.
Caracteristicas del Objeto Automévil
4ruedas
2puertas
‘ail
‘Wolante
‘motor
2asientos
2faroles delanteros
2 faroles traseros
Sespejos
Por lo tanto, sin importar de qué tipo sean, cuando pensamos en objetos, podemos
identificar que tienen cosas en comun entre si: los atributos y el comportamiento,
26 | reduserscom Atributos
Un atributo es una caracteristica propia de un objeto. Si volvemos al
ejemplo del perro, podemos identificar que algunos de sus atributos son:
altura
color
raza
peso
Comportamiento
Pensando en el objeto
Modelos de objetos
La programacién orientada a objetos nos permite plasmar,
en el mundo del cédigo, modelos de objetos propios
del mundo real. Como seres humanos, aprovechamos
la capacidad de pensar, analizary razoner, para poder
disefar de forma intuitiva, dentro del mundo.
de la programacién, cada objeto que necesitamos
utilizar, junto con sus principales caracteristicas
que lo distinguen del resto
Los principales conceptos que nos brinda
Ia programacién orientada a objetos son:
clases
objetos
atributos
métodos
mensajes
reduserscom |27 JavaScript > Conceptos iniciales / Introduccién a la Programacién.
Clases
En JavaScript, cuando necesitamos trabajar con un objeto determinado, creamos una clase de él, que
heredard sus atributos, métodes y propiedades. Veamos en la siguiente imagen un ejemplo de esto.
Objeto Botella —
Objeto botella
Lacase bol es una Elobjetoboteia
meee coleraurm etic altura
pores det oto caracoisheas props :
Botella) odaslos corre hua, meter material
sacterbtce ne centerido nt pe de
Tapa
») ( Etiqueta
TipoDeContenido()
var bot] = new Botella();
ContenidoNeto()
Cuando definimos la clase botl, hacemos que esta sea del tipo Botella(),
con lo cual heredara todas las caracteristicas de esta. Una vez creada la
clase, podemos asignarle diferentes valores a cada uno de sus alributos,
tal como lo representamos en la siguiente imagen.
CObjeto botella Clasebott Clase botlaceite
altura Altura altura
Material Material = pastico Material = vicrio
Tapa Tapa = rosca Tapa = Presion
Etiqueta Eliqueta = Agua mineral Etiqueta = Acete de ova
TipoDeContenido() TipoDeContenido()
TipeDeContenido() = Aceite
ContenidoNeto() ContenidoNeto() Contenidotieto(
<7 ed a!
Atributos
Podemos definir
losatributos como
Mensajes
Oo Un mensaje es una peticion
den objeto otro, para
diferentes variables que este ultimo realice
que representan las una accién especifica
caracteristicas de un jecutando uno de sus
objeto. Cada atributo métodos. Los mensajes
es un componente ‘son los que se ocupan
fundamental de un de relacionar entre silos
objeto, a tal punto que ‘objetos que componen un
define su estado. programa.
28 | reduserscom Meétodos
Son un conjunto de operaciones que un objeto puede realizar de acuerdo
con su estado actual. Cada método que un objeto contiene son funciones
que especifican una accién, de tal manera que definirdn su comportamiento.
Objeto Botella
function contenidoNeto() {
alert('65@ centimetros cubicos');
Contenidoneto() }
a
botella.contenidoNeto();
Coma pademos ver en a figura, uno de los métados que oficia de caracteritica del objeto
boiella es contenidoNeto(). En esie caso, imaginemos a contenidoNeto() como una
funcion de JavaScript cuyo algoritmo interno ejecuta el mélado Alert(), mediante el cual
Conceptos iniciales / Introduccion a la Programacién...
Encapsulamiento
La informacién de un objeto es propia de él, y
para acceder a ella, debemos hacerlo mediante
un método predefinido, y no de forma directa,
leyendo el atributo.
Polimorfismo
momento de enviar o responder una peticion
Abstraccion
La abstraccion hace referencia a la extracci6n
‘oacceso de las propiedades esenciales de un
concepto. Nos ayuda a no enfocarnos en los
detalles que no son utiles o importantes respecto
de lo que estamos realizando.
El polimorfismo nos garantiza que una operacién determinada pueda tener diferentes
comportamientos en distintos objetos, pudiendo estos reaccionar de manera determinada en el
Objeto Persona1
Atture 4,50 ats
Pero 51 es
‘Ato de nacimiento 3980
actonalidad spat
‘obtenerE#ad()
(btener2Hc()
Objeto Persona2
aura 4,00 ats
Peso 91 kes
‘ao de Nacintento 3975,
Naclonalided —Ttaliano
‘btenerEdad()
obtenertxc()
Objeto Persona3
‘atturs 16 ts
Peso oes
‘Bo de Nacintento 1990
NacLonalidad — Hongtonds
‘ootenersda()
etenerixc()
Tomando como premisa la imagen anterior,
vemos un mismo objeto “persona”, con los,
mismos atributos y métodos pero diferentes
valores en cada uno de ellos. Por ejemplo,
sienviamos el mensaje obtenerEdad() a
persona’, nos devolverd como resultado 38
(tomando 2018 como el afio actual), mientras
30 | redserscom
que mandar el mismo mensaje a persona2 y
persona3 nos devolvera como resultado 43 y 28
respectivamente,
Asi funciona el concepto de polimorfismo,
aplicando la premisa de que “un mismo mensaje
a distintos objetos puede devolver diferentes
resultados’ Fechas, intervalos
y cronometros
A través de este proyecto, conoceremos las herramientas que incluye
JavaScript para manejar intervalos de tiempo, como asi también para realizar
célculos temporales, desde nuestro cédigo.
En la siguiente infografia veremos cuales son las caracteristicas que JS pone a nuestra
disposicién para controlar intervalos y espacios de tiempo en nuestros desarrollos de software.
SetInterval
+ - ~~ intervalo
setInterval(funcion, intervalo); Esel tiempo que debe pasar
ene la ejecucion de la
‘inion ndcade Se expresa
en milisegundos (1 segundo
setinterval funcion dlvdido 1000). v el intervalo
Esunmétodode JS que seutiiza __Eselpardmetro defuncién oexpresién _ minimo que podernos
para invocar una funcién oevaluar que deseamos que seevalie através _expresares 10 ms,
Una expresion determinada, {el metodo setInterval Sies una
durante un intervalo de tiempo funcion, puede recibir parametros
‘especticado en milisegundos, adicionales, en caso de requeriie.
\Veamos a continuacién un ejemplo de cémo funciona. Crearemos una pagina HTML base y un
archivo JS denominado index.js, dentro del cual escribimos el siguiente codigo:
function intervalo() { Pies pene
console.1og(‘Se ejecuts el intervalo de tiempo.”); eserioe una leyenda mediante
} console log en la consola de
- ; |
reduserscom | 31 JavaScript > Conceptos iniciales / Fechas, intervalos y cronémetros
SetTimeout
setTimeout(() => {funcion}, 9000);~ \intenato
Eel tempo que
debe paser ene la
tjecucon dea funciona
sefTimeout void funcion indicac. Se expres
Enel mitododeSufliznds inpidequela _Eselparimetrodefuncisno expresin enlieegurion
paracjecuerunatuncon funcénemétodo quedeseamos que se evaliearaves (Tsegunvo dwdido
Derauarunaexpresién,, _ullzado pueda _delmstodoen cussion Stesuna {000}, yetnteraio
Iungodeurdefernineda invecarsees!——funcin, puede recbirpardmeltos min que podernos
porto de tempo. rise atlcionsles,encaso derecueriios. ——_ndiar es Ome.
Los casos més habituales en los que podemos aplicar setTimeout son, por ejemplo, cuando llammamos
datos remotos y estos llegan de forma asinerénica, Con esta funcién podremos priorizar 0 retrasar la
ejecucién de un bloque de eédigo o de una funcién, luego de un periodo de tiempo estipulado.
Ejemplo de SetTimeout
Modifiquemos el cédigo del ejemplo anterior, creando en el archivo JS la siguiente funcion:
setTimeout(() => {
alert(‘Se ejecuté el Alerta, luego del intervalo establecido en Set timeout.’)
3, 9000);
Como podemos ver en el
cédigo, establecemos que, a
luego de un periodo de 9 eae an
segundos, se ejecute la
funcién Alert() en la aplicacién.
Ejecutemos el cédigo en el
navegador web para observar su
comportamiento. Como podomos aprecar, 2 ierencia de setlnterval),
| método setTimeout( se ejcutaré solo una vez
Manejo de Set timeout
Detener la ejecucion de ambos métodos
Existen métodos que nos permiten detener la ejecucidn preestablecida de setInterval()
y setTimeout(). Veamos a continuacién como utilizarlos:
clearTimeout (variable) ; clearInterval(variable) ;
Permiledetener métodos seTimeoul()donirode nuestra aplicacién, Eslernétodo _Aliqual que lo expicado en
laejecucién del necestaremos crear cada uno de ellos en una petite detener clearTimeout(), debemos
metodo timeout(), variable delermnada:vartot = sefTimeout..)- una funcion iializarpreviamente e
Siestefueinciado_Estonos pemiiainvocar luego. métod felinterval —_mtodo stinteral() en
prevamente, cleaTimeout(),especticando la variable tot prevamene unavariable, para luego
como parametro ae metodo, para ai poder Iniciaizada, poder detener un metodo
detenelaejecucén Si invecamos clearTimeout() specifi, en caso de que
Sin paramettoadiiona, se detendran todos is ereemos mas dene enel
mmélodos sefTimeout() ccads eno programa programa
32 | redeserscom El objeto Date()
Habiendo definido los fundamentos de
la programacién orientada a objetos, nos
‘ocuparemos de conocer el objeto Date(),
fundamental para numerosos procesos y
‘operaciones con JS que involucran fechas y horas,
/{Creacion de un objeto tipo Date
var d = new Date();
Probemos a escribir esta sentencia
directamente en la consola de las
Herramientas para el desarrollador de nuestro
navegador web. Una vez escrita, ejecutemos:
console. 1og(d);
ya que simplifica su manejo. Se invoca a través del
constructor new Date(), y permite obtener datos
sobre un periodo de tiempo que incluyen afio,
mes, dia, horas, minutos, segundos y mi
o especificar unidades entre todos ellos.
gd
BO & E
> var d = new Date();
undefined
> console. 2o4(d),
Tue Sep 11 2018 11:18:20 GHT-2300 (hora
eeténdar de argentina)
undefined
Clements Console Sources»
Fiter Default levels ¥
‘Come podemos apreciar enla imagen, a través de la consola del navegador, recibimos la
informacién completa dela fecha y hora actuales. Tengamos presente que cada navegador
‘web procesa de manera automtica la fecha yla hora, propias del equipo del usuario.
Personalizar fechas
A través del objeto Date(), no solo podemos obtener la informacién de un dia u hora especifica, sino
‘que también podemos crear un objeto del tipo Date, con una fecha especificada por nosotros:
Var d = new Date(1975, @2, 21);
Luego, mediante console. log, obtendremos el siguiente resultado:
console. log(d);
vya3a4:1
Fri Mar 21 1975 0:00:00 GMT-@388 (hora estandar de Argentina)
TH Ow 7) Filter
Defauk levels ¥ A Group
var d = new Date(1975,03,23);
‘Ahora, éexiste alguna diferencia
en la respuesta que devolvi6
console.log? Un dato: hay que
prestar atencién al mes. JavaScript
contabiliza los meses desde el 0
hasta el 11, siendo enero el nimero
0, y diciembre el ntimero 11.
cconsole.10¢(¢);
Mon Apr 21 1975 00:
estandar de Argenting
100 iT-0300 (hora
var d = new Date(1975,02,21);
undefined
consote.10g(4);
Fri TEGEEIEETE 00:00:20 cur-0300 (hora
erténdar de argentina)
undefined
reduserscom | 33 JavaScript > Conceptos iniciales / Fechas, intervalos y cronémetros
Métodos integrados en Date
En caso de que deseemos utilizar solo una parte de una fecha, podemos recutrir a los métodos:
integrados en el objeto Date. Estos nos facilitardn la tarea de extraccién y nos ahorraran mucho cédigo.
Veamos a continuacién cuales son:
METODO. DESCRIPCION uso
getDay Dewuelve el niimero de dia d.getDay()
var d = new date)
undefined
> d.getruldvear() > console.log(a)
ma Sun an 111970 21:35:08 @iT-@208 (hora
> dgetmonth() festindar de Argentina)
> d.setTine(9525e0000)
952500000
34] retureracom Calcular la edad de una persona
\Veamos a continuacién de qué forma podemos estimar la edad de una persona con
JavaScript, teniendo el dato minimo de su afio de nacimiento. Abrimos la consola del
navegador web para desarrollar el ejercicio alli. A continuacién, creamos dos variables (fiy
fn), donde fi almacena el afio actual, y fn almacena el afio de nacimiento de la persona:
var fi = new Date(2018)
var fn = new Date(1975)
Declaramos una variable denominada edad, en donde simplemente restamos al valor de fi, el afio almacenado
en fn. Luego, desplegamos mediante console.log el resultado almacenado en la variable edad:
var edad = (fi - fn);
console. log(edad) ;
Visualizar la fecha actual en una web
Construyamos a continuacién el HTML base que usamos en cada proyecto, y también
el archivo JS asociado. Dentro del archivo HTML, incluiremos un tag del tipo .
cuyo id sea “fecha”, Luego, en el archivo JS, creamos la funcion:
function fechaactual() {
var d = new Date();
document. getElementById (“fecha”). innerHTML =
d.toLocaleDateString();
+
Solo nos queda adaptar el HTML, modificando la etiqueta
por:
40 x 158 (RG) cements Conle Source»
\Veamos finalmente si
elresultado de nuestro va
ejercicio es igual al de la iets carsetvth
imagen, istidscsisy otimectioty
“itlesrapecto 8) = Visualiar fochac/tie
regusers.com |35 JavaScript > Conceptos iniciales / Fechas, intervalos y cronémetros
Cuenta regresiva
Acontinuacién realizaremos un ejercicio practico que nos permitira integrar en una web un
sistema de cuenta regresiva, partiendo de la fecha actual, hasta una fecha futura determinada
c) Materialize
‘Como primera instancia, accedemos CSS, un
al portal de descargas del material que framework CSS y JS que complementa
‘complementa esta obra. Ubicamos nuestro desarrollo con una interfaz grafica
el archivo cuenta_regresiva.zip, y lo moderna. Sieditamos el archivo HTML,
descargamos. En él encontraremos el HTML veremos que en el tag integra
base ya escrito, que nos permitira llevar a una hoja de estilos y un archivo de fuente
‘cabo la interfaz grafica del proyecto. tipografica y, al final del tag , un
archivo JS; todos son archivos remotos.
En VS Code, creamos
un nuevo proyecto
denominado Cuenta
regresiva y le agregamos
el HTML incluido en el ZIP
descargado. Lo editamos y
antes del cierre de
agregamos la referencia
Ya continuacién del cierre del tag , el siguiente script:
var a= speak(‘Hola, mundo!?);
Guardamas la pagina HTML y
la ejecutamos en el navegador
web. Coma resultado,
‘endremos una pagina
completamente en blanco,
pero que, al finaizar su carga,
Feproduce el texto ingresado
ela funcion speak) JavaScript > Proyectos / Hacer hablar a JavaScript
SppechSynthesis
Analicemos a continuacién el cédigo escrito en el primer bloque:
CCreamos una funcién denominada Luego creamos el abjeto msg, tomando como base el tipo
‘Speak(), la cual recibe un parémetro, en de objeto SpeechSynthesisUtterance. Aeste uitimo, le
este caso, llamado mensaje ppasamos el valor del parémetro mensaje (que reproducirs
— si serinvocado).
function speak(mensaje) { 7
Lapropledad var nsg = new SpeechSynthesisutterance(mensaje) ;
voices{2]incica que
iasintetizacion de var voices = window. speechsynthesis.getVoices();
wezsergenidioma | ~* asg. voice = votces [2];
patil, la propiedat
Pitchdeterminaque “® msg.pitch = 8.5; Elmétodo
Ds
la velocidad del audio window. speechsynthesis. speak GetVoices() nos
serda la mitad de su — ss permite ablener el
valor predeterminado, listado de todos los
Finalmente, reproducimos el contenido dé texto idiomas soportados
almacenado en el objeto msg, tomando como base la porel sintetizador
configuracion del resto de los parametros que ajustamos, de vor.
Reproducir texto de un
