JavaScript 2019
100% (1) 100% found this document useful (1 vote) 201 views 148 pages JavaScript 2019
Full description 100% found this document useful, Mark this document as useful 0% found this document not useful, Mark this document as not useful Print Embed Report
Save JavaScript 2019 For Later
Concepto Iniciales Programación Orientada a Objetos Fechas, intervalos y cronómetros Arreglos Cadenas de texto Formularios y datos Proyectos ...
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.
Javascript - Proyecto e1
seguido, presionamos Ab
Carpeta,
Esra seer ieets
primer entorno de proyecto. eae
[Link], presionamos Sree
CTRL + N para generar un
nuevo archivo, que guardamos
con el nombre [Link]
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.
[Link] | 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 [Link] 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
[Link] |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
[Link] 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
[Link]();
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 [Link], 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
[Link]? 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 [Link]()
var d = new date)
undefined
> [Link]() > [Link](a)
ma Sun an 111970 21:35:08 @iT-@208 (hora
> dgetmonth() festindar de Argentina)
> [Link](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 [Link] 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 =
[Link]();
+
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
[Link] |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
al archivo index.
js. Acontinuacién, dentro
de este proyecto, creamos
el archivo en cuestion.
3 Comenzamos entonces
wr coon Sten 4 348 8) aescribir el cédigo en
1 ramen tin erate ere “Sg elarchivoindex,js. Lo
ir Gee © ewtnaduciont) que bés\camenta hard
este script es definir las
variables a utilizar, definir
la fecha futura para la
cual queremos calcular el
tiempo faltante, obtener
el tiempo restante entre
hoy y la fecha futura, y
convertir los milisegundos
del tiempo restante en una
fecha legible por nosotros. Codigo JavaScript
‘Comenzamos por declarar el objeto Date() que almacenaré la fecha futura
var countDownDate = new Date(“Jan 1, 2019 0:00:00”) .getTime();
A continuacién, creamos una variable denominada tiempo, la cual contendrd la funcion JS setinterval()
// Creamos una funcién integrada en la variable ‘tiempo?
var tiempo = setInterval(function() {
}, 1008); setinterva()
ccada 1 segundo.
Ahora reemplacemos los tres puntos dentro del cédigo anterior, por el siguiente cédigo’
var now = new Date().getTime();<————___——~ En laprimera linea, obtenemos
var diferencia = countDownDate - now; <— ela actual
la siguiente, identiticamos
Acontinuacién, pasamos a los célculos matematicos: hoy ynuestro dia futuro.
var dias = [Link](diferencia / (1000 + 68 * 60 * 24));
var horas = [Link]( (diferencia % (1000 * 6@ * 6@ * 24)) / (1000 * 60 * 60);
var minutos = [Link]( (diferencia % (1000 * 68 * 60)) / (1000 * 60));
var segundos = [Link]( (diferencia % (1000 * 68)) / 1000);
Creamos las variables dias, horas, minutos y fecha de hoy y la fecha futura (en milisegundos)
segundos, y utilizamos la funcién [Link](), El método floor() del objeto Math se ocupa de
que nos ayuda a calcular cada uno de los valores _redondeer el numero que da como resultado cada
para ellas, paséndole a cada operacién la variable una de estas operaciones. El codigo final es el
diferencia, la cual almacena el resultado entre la__siguiente:
document. getElement8yId(“cuentaregresiva”).innerHTML = “” + dias + “D+
horas + “H “ + minutos + “ M “ + segundos + “ S “ + “ ";
if (distancia < @) {
clearInterval( tiempo) ;
document. getElementByld(“cuentaregresiva”).innerHTML = “jFeliz 2019
para todos! ”;
Finalmente, mostramos el
resultado obtenido en el
elemento “cuentaregresiva’, y
sila fecha futura es menor que la
actual, mostramos al usuario un PRR
saludo u otro tipo de mensaje.
Dias restantes para el nuevo aio })
reduserscom | 37 JavaScript > Conceptos iniciales
Arreglos
Conozcamos qué son los arreglos y cudles son los principales métodos y funciones que
los complementan para que, al momento de programar, se simplifique el acceso a la
informacién que almacenan.
Utilizar arreglos en JS es un procedimiento no tener que acceder a una base de datos 0
eficaz para mantener ordenados y a mano archivo JSON cuando precisamos manipularlos.
aquellos pequefios bloques de informacion Veamos a continuacién una descripcién rapida
que necesitamos manipular o visualizar, yasi_ de los arreglos:
Para contener los elementos que conformarin
el arregio, abrimos y cerramos corchetes, y
agrupamos el contenido dentro de ellos.
Declaramos los arreglos
fen JS de la misma forma
ane
var lenguajes = ['Visual C#', ‘Objective C',
pee 'R', ‘Javascript’, ‘Kotlin'];
arregloestd compuesto texto, las comilas—_almacenar numeros clomentos que
poreadenas detest, (simples Genta del arego, oneal
por cada elemento dobles) debenser env de cadena, sregideben estar
Gebomos abrrcomilasconsistnfes.Poruna_poderos obra Spo po
(implesodobles),y_cuestiénde poliidad, apertura ye oere de ce
cerrarasalfinaizar ——hayqueusarelmsmo coma
cock ter "po de comila por
cadanuevo elemento,
Crear arreglos
Realicemos el primer ejercicio manipulando arreglos creados por nosotros mismos. Abrimos el
navegador web y accedemos a las herramientas para el desarrollador. Nos posicionamos en la
consola, donde escribimos las siguientes lineas de cddigo:
var fibonacci = [8, 13, 2, 34, 5, @ 1, 21, 3]3
var lenguajes = [‘Visual C#, ‘Javascript’, ‘Python’, ‘C++?, ‘PHP’, ‘Kotlin’];
En estas dos lineas de codigo
hemos creado dos arreglos BL & | top | Fike Dafaultlevels ¥ 2 Group sim
en JavaScript: uno de cadena > var Fibonacci = [8, 13, 2, 34) 5) @ 2) 22, 3]5
numérica y otro de texto. Veamos undefined
a continuacién las propladades y > var lenguajes = ['visual c#*, ‘Javascript’, ‘Python’, "c++",
pup", “*xotlin']5
undefines
funciones mas comunes que nos
permiten sacar partido de estos
arreglos répidamente. Métodos mas comunes para el manejo de arreglos
FUNCION 0 METODO DESCRIPCION
arteglo.{i] {i corresponde al niimero de indice. Devuelve el item
correspondiente almacenado en ese indice.
[Link]() Ordena el total de elementos almacenados en el array.
[Link]() Elimina el dltimo elemento del final del array.
[Link](nuevoelemento) __| Agrega un elemento al principio del array.
Probemos algunos de estos métodos sobre los arreglos que hemos creado.
Volvamos a la consola del navegador web y escribamos la siguiente linea:
fibonacci. length
Veremos en la consola un valor numérico, que _ tener en cuenta cuando deseemos acceder a
para el arreglo denominado fibonacei seré el _un item del arreglo en particular. Por ejemplo,
numero 9. Notemos que los arreglos inician si queremos acceder al elemento 5 del arreglo,
la indexacién de su contenido a partir del 0 entonces tendremos que escribir:
(cero). Este ultimo dato es el que debemos
aaa] Seti como posicionamos es nimeros al momenta
fibonacci[7] setere none tsb peti?
Ordenemos a continuacién este arreglo, utilizando el método correcto, seguin lo que
especificamos en la tabla anterior:
[Link]()
Elemente Console Sources Network
Obtendremos asi
en pantalla el orden 7 | iter Defoultleves ¥ FA Group simile
correspondiente de > var fbonacet = 18, 135 2, 34, $5 @ ts 20, 315
los numeros que Undefined
> fibonaces. Length
°
> #bonaced sort)
> (9) (0, 45 13, 2) 2p 3) 34, 5, 8]
componen este array.
reduserscom [39 JavaScript > Conceptos iniciales / Arreglos
Ubicar y agregar elementos
Trabajemos ahora con el otro arreglo creado. En él incluimos diversos lenguajes de programacién de
forma desordenada. Busquemos entonces el indice correspondiente al lenguaje JavaScript, como se
muestra a continuacién:
Lenguayjes. indexof (‘Javascript’);
‘Ahora agreguemos un nuevo lenguaje a la lista
[Link]( ‘GoLang? );
Como podemos ver, al agregar un nuevo item al arreglo, este se redimensiona,
Comprobemos esto validando todos los indices del arregio y listando el ultimo de ellos.
TR Gl) Elements Console Sources Network Performance >
DO top ¥ | Filter Default levels ¥ @ Group similar
var lenguajes = ['Visual ca", "Javascript", ‘Python’, ‘c#+", ‘PHP’, *Kotlin'];
undefined
Lenguajes. indexOF ("Javascript");
1
[Link]("GoLang');
7
[Link]
7
Lenguases[6)
“cotang"
40 | reduserscom Practica con arreglos
Acontinuacién, realizaremos una préctica sobre la consola del navegador web, con los
arreglos que hemos creado. En principio, trabajaremos con el arreglo lenguajes, en el
que debemos realizar lo siguiente:
Regenerar el arreglo
Ordenarlo
= Eliminar el primer elemento del artegio
Eliminar el ultimo elemento del arreglo
= Agregar al principio del arreglo un nuevo lenguaje de programacién
@ Agregar otro lenguaje de programacién al final del arreglo
= Por tltimo, volver a ordenar el arreglo
Ena siguiente imagen, podemos apreciar el resultado de este ejercicio, habiendo
agregado los lenguajes de programacion GoLang y Java
Tlements Console Sources Network Performance > ned
top Y | Fiter Defautievels ¥ @ Group similar |
as
var lenguajes = ['Visual CA, ‘Javascript’, ‘Python’, ‘cH, ‘PHP*, “Kotlin']s
undefined
> [Link]()
> (6) [°CH#", "Tovaseript”, “Kotlin*, "PH®", “Bython", "Visual ce]
> [Link]()
visual co"
> Lenguajes. tenguages. push( ‘Gola
5
> Lenguajes-unshift(* eve’)
6
> [Link]()
(6) ["Golang", “Jevo", "Javascript", "Kotlin", "PHP", “Python"]
Los invitamos a recorrer la pagina
web correspondiente a Mozilla
MON, donde encontraremos una
bateria de referencias, ejemplos y
mas informacién para complementar
lo aprendido hasta aqui con los
arreglos: [Link]
[Link]/es/docs/Web/
JavaScript/Referencia/Objetos_
globales/Array
[Link] | 41 JavaScript > Conceptos iniciales
Cadenas
de texto
Repasemos de qué forma podemos —
mejorar el manejo de cadenas de texto
almacenadas en variables, accediendo a
las propiedades y métados més utiles que contiene
cada variable JS.
*
J
Enel inicio de esta obra, dimos un panorama general
sobre el uso de variables. Ahora, profundizaremos
enel tema, explorando algunos métodos de las
variables que nos permiten explotar un poco
mas su funcionalidad desde nuestra perspectiva
!
de programadores. Conozcamos los principales.
métodos a través de la siguiente tabla:
METODOS DESCRIPCION
indexOf(cader (cadena) corresponde al texto que se quiere ubicar. El método indexOf devuelve
cl indice correspondiente donde inicia dicha cadena de texto.
substr(i,j) Estos pardmetros funcionan casi de igual manera, cortando una porcién dela
cadena de texto, de acuerdo con los pardmetros establecidos mediante los
substring(i, j) indices [i] y U-
slice(i, j) Existen diferencias entre si, que veremos en la siguiente infografia.
Perit coesena SU dos rar hs Go fers
toLowerCase() Convierte en mindsculas la cadena de texto contenida en la variable.
Eo] Extrae el cardcter correspondiente a la posicién indicada a través del parémetro
fi.
42 | resureracom Veamos en la siguiente imagen un ejemplo de cémo transformar en
mayuisculas y minusculas la cadena de texto almacenada en una variable:
Elements Console Sources Network Performance >
¥ | Filter Defauit levels ¥ © Group similar 1 hidden
1 message var texto = “Esto es Javascript";
undefined
> texto. touppercase();
No errors "ESTO ES JAVASCRIPT
Nowarnings > [Link]();
whe “esto es javascript”
No user messa.
1 verbose
Marcar diferencias entre métodos
Como pudimos apreciar en la tabla anterior, algunos métodos incluidos en las
variables poseen distinto nombre, pero cumplen casi la misma funcidn. ¢Hay una
diferencia sustancial entre ellos? Si, la hay, y la mostramos en la siguiente infografia.
var texto = ‘Est els un fragmento de! tlextlo.|';
012:345}6789 9
Lavariable texto almacena Esta cadena de caracteres posee
una cadena de caracteres. Ln total de 30 posiciones (Ol 29),
var sst = [Link](0, 20)5
El método substr() (sustraer)extrae de la variable texto, un
fragmento de la cadena, comenzando por la posicion 0 (cero);
Ln ftal de 20 (veinte) caracteres.V le almacena en la variable ss.
var str = [Link](11, 20);
método substring() (sustraer una cadena) extrae dela
variable texto un fragmento dela cadena de caracteres,
desde a posicion 1 (once) hasta la posicién 20 (veinte).
Podemos obviar el ultima pardmetro
de este método, y asi obtendremos la
‘cadena de caracteres, hasta el fina
var sst = [Link](11, 29);
EI método slice() cortael contenido dela variable texto, entre la
ppsicion inicialy final indicada, Alferencia de substring(), hay
‘que especificar ambos parémetros de forma obligatoria,
reduserscom |43 JavaScript > Conceptos iniciales / Cadenas de texto
Practica rapida
Ejercitemos en la consola del
navegador web lo visto en | Filter Default levels ¥ © Group similar 2 hidden
la infografia anterior, para var texto = ‘Esto es un fragnento de texto.';
tener una mejor idea de como undefined
se comporta cada uno de texto. slice(11,23)
los métodos al momento de algal is ithe
eee texto. substr(8)
“un fragmento de texto.
Verifiquemos qué [Link](21, 20)
resultado obtendremos si “Fragnento”
implementamos una variable texto. slice(-19)
negativa como parametro en el Fragnento de texto.”
método slice(), por ejemplo:
texto. slice(-19);
Concatenar textos
\Veamos a continuacién cémo conealenar o unr dos textos diferentes, ulilizando la funcién concat(),
Para hacerlo, volvemos a la consola del navegador web y creamos las siguientes variables con sus
respectivos valores:
var nombre = “Fernando”;
var apellido = “Luna”;
Ya tenemos dos variables, una con el nombre y otra con el apeliido.
Ahora crearemos una tercera variable donde concatenaremos ambos datos:
var nonbrecompleto = [Link](“ ” + apellido);
Como podemos ver, debemos utilizar una de las dos variables (nombre es el caso ideal)
para concatenar la segunda variable (apellido). En este caso, debemos destacar
que el método concat() puede recibir multiples parametros, no se limita solamente a dos:
[Link](“Fernando”, “ Nicolés “, “ Julian “, “ omar “)
TRE] | Sements Console Sources Network Peformance
BO & 7] ter Delautewie¥
> var nonbre = “Fernando”
var nonbrecenplato = [Link](" " + apellde);
renbreconpieto
rermando Luna"
44 | resureracom Separar cadenas de texto
De la misma manera en que podemos concatenar, también podemos separar. Para
hacerlo, utlizamos el método split(), que se ocupa de separarel contenido de una
cadena de texto, o numeros, tomando como paraémetro un caracter especial o comodin.
Veamos a continuacién un ejemplo:
var nombrecompleto = “Fernando Oar Luna Mercado”;
‘Tenemos una variable conformada por un nombre completo, donde el dnico caracter que
podemos utilizar como comodin es el espacio entre cada nombre. Entonces, creamos una
nueva variable, que obtendrd el resultado de la separacién de palabras:
var separar = nonbrecompleto. split(" ”);
Ahora, écual es el resultado para acceder a cada uno de los nombres? La variable que recibe
la cadena separada crea un indice por cada una de las palabras. Asi, podremos acceder a
cada palabra simplemente utilizando el nombre de la cadena, mas el indice.
Performance >
Sources
G} G] | Elements Console Network
Ho
> var nonbrecompleto = "Fernando Omar Luna Mercado”
undefined
> var separar = nonbreconpleto. split(" ");
undefined
> separa
(4) [*Fernando",
top ¥ | Filter Default levels ¥ @ G
"omar", “Luna”,
[Link] |45 JavaScript > Conceptos iniciales / Cadenas de texto
(ASE ees
Reemplazo de marcadores
\Veamos a continuacién cémo aprovechar las capacidades de
busqueda y reemplazo de cadenas de caracteres, creando un
sistema que nos permita ingresar un texto que queremos buscar,
y otro que oficiara como reemplazante del primero.
Descargamos de la web correspondiente a esta obra el archivo .ZIP
denominado Proyecto04_ReemplazarMarcadores. En él encontraremos
L 1 un archivo HTML y otro TXT. Creamos un nuevo proyecto llamado
Reemplazo de marcadores, y agregamos ambos archivos a la carpeta.
Ahora creamos dentro
del proyecto un archivo
JS. Luego abrimos el
archivo HTML, y dentro
at cea del apartado ,
\Gitloneepinor renorntition ubicamos el espacio
ate me correspondiente antes del
cierre de este tag, donde
incluimos la referencia al
JS creado,
2 Eisiouiente pasos
agregar el c6digo funcional
dentro del archivo index.
js. En él declaramos
tres variables, con las
cuales manejaremos las
cadenas de caracteres;
y dos funciones:
limpiarCampos() y
reemplazar(). Vearios el
toa mn an cédigo:
union remgzane’) € var b5
var r3
var t;
ee ene ena) Simplficamos en tres variables (b,
1,4) la manipulacion de cadenas de
texto que haremos en este ejerccio.
La primera almacenaré el marcador
{que debemos ubicar en el texto, la
segunda almacenaré la palabra que
reemplazara el marcador buscar
Finalmente, la tercera contendré e
bloque de fexto en cuestion
AG | reduserscom mplazar Marcadores
‘Como podemos apreciar, en la interfaz de nuestra
aplicacién web contamos con un campo que
tiene miltiples lineas de texto, dos cajas de texto
adicionales (Buscar y Reemplazar) y dos botones:
Reemplazar y Limpiar campos. Agregamos el
‘cédigo para limpiar los campos:
function limpiarcampos() {
document . getElement ById(“txtbuscar”).value =
document. get€lenentById(“txtreemplazar”). value
\Vemos que le funcién limpiarCampos() simplemente se ocupa de vaciar el contenido
agregado en las cajas de texto identificadas por los nombres txtbuscar y txtreemplazar.
function reemplazar() {
b = document. getElenentById(“txtbuscar”). value;
r = document. getElenentBy1d(“txtreemplazar”). value;
t = document. getElenentById(“texto”) value;
if ([Link]().length > © && [Link]().length > 0) {
if ([Link] > @) {
var cambio = [Link](b, r)3
document .get€lement8yId(“texto”).value = cambio;
La funcién reemplazar() captura en las
variables b, ry tlos valores de los campos
correspondientes. Mediante if() analizamos si
las variables b y r contienen datos cargados.
Finalmente, analizamos sia variable t contiene
una cadena de datos y, por ultimo, ejecutamos
el método replace(), pasdndole las funciones b
(buscar) y F (reemplazar)
Para terminar, ubicamos la funcién onclick:
de los botones, y les asignamos las funciones
JS correspondientes. Probamos el resultado
del proyecto pegando, en el campo textarea, el
bloque de texto almacenado en el archivo TXT.
retuseracom | 47 JavaScript > Conceptos iniciales
Formularios y datos
Repasemos los diferentes tipos de datos que se pueden manejar en formularios,
HTML, conozcamos como la sentencia For nos ayuda a cargar informacion en
campos de seleccién, y aprendamos a validar datos en formularios.
La sentencia de bucle For nos ayuda a repetir pantalla, o dentro de algun componente web,
un bloque de cédigo especifico N cantidad de como un combo de seleccién. Para comprender
veces, torando como premisa un valor finito para bien su funcionamiento, vamos a abrir la consola
[Link] de los usos efectivos de esta sentencia del navegador web y a escribir en ella el cédigo
es recorrer arreglos, listando los elementosen _ del siguiente arreglo
var cui = [“China”, “Indu”, “Italiana”, “Centroanericana”, “Mexicana”,
“Wediterranea”];
Antes de poner en practica este bucle, tengamos presente el nombre
de este arreglo, y repasemos la siguiente infografia
Iniciamoselbucie —Lavariable ies Lacondicion para que el Elaumento dela
Fer. incicando elparémetro que buclesiga suejecuciones variable serd de
entre parentesis, Ccontrola el bucle del quelavariableiseamenor 1 unidad por cada
los valores For. Seinicisen cero. queel méximovelordela ——_repelcion del buce.
inicialesy finales, g variable comparativa,
for (var iv= @; i ¢ [Link]; i++) {
{Aqui ponemos 1a ejecucién de una o mas instrucciones
// por cada recorrido que hace el For
console. log(cui[i])5
Imprimimes en la consola del navegador web el
valor del areglo cu, especificande através de
lavariable I que indice deseamos visuaizar.
Escribamos ahora en la consola del navegador el siguiente bucle For,
para poder evaluar su resultado:
for (var i = @; i < cui-length; it+) { [Link](cui[i]); }
48 | redeserscom Tem
undefined
for (var i =
china
Indu
Ttaliana
Como podemos notar, este
recorre el arreglo cui, ¢
imprime en la consola el valor
de cada uno de sus indices. menor
Nediterranea
undefined
Ejercitacion del bucle For
Existen diversos tipos de campos que permiten el
ingreso de datos a través de formularios web. En
esta oportunidad repasaremos cudles son y qué
podemos hacer desde JavaScript para controlar y
validar el ingreso de datos.
Pero, antes de empezar, veamos con un
‘ejemplo real como aprovechar el bucle For para
cargar un campo de formulario del tipo Select.
<100€T¥9€ hem»
Sieditamos el archivo HTML, veremos que
contiene un elemento del tipo Select. Este
despliega en el documento web un componente
similar a un Combo Box, que puede incluir
[rchina®, "rnd
“Mexicana”, "
rents Conale” Sources Network > *
Fiter Default levels ¥ & Group similar
i", "Italiana", "Centroamericana",
Nediterranea"}3
25 1 < cud-Lengths i++) { [Link](cui[i]); }
meses.
vyns96a:3
nsoes
Llevaremos a la practica el ejemplo
mencionado anteriormente, para lo
cual necesitamos descargar de la
web oficial de esta obra el archivo
Proyecto0S_sentenciaFor.zip. Lo
descomprimimos y creamos un nuevo proyecto en
‘VS Code agregando el documento HTML incluido
enel ZIP.
‘preview »
Sentencia For
Tipo de cocina preterida Todas
multiples opciones para que el usuario seleccione
una. El componente cuenta con un que
permite agregar mas de una opcidn para que esta
ea listada por el componente.
‘Como podemos ver en el cédigo
3S: document. createElement( option" );
HTMLS:
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. [Link]();
wezsergenidioma | ~* asg. voice = votces [2];
patil, la propiedat
Pitchdeterminaque “® [Link] = 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