Tu primer JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la

marca de tiempo en el vídeo
Vamos a comenzar a trabajar con nuestro primer archivo de JavaScript, para lo
cual es necesario que primero tengamos una página web. Para esto, vamos a
crear una carpeta, en este caso tenemos una creada: 'JavaScript Esencial'. Esta
carpeta simplemente la arrastramos y la dejamos caer en nuestro Visual
Studio Code. Aquí, cada vez que nosotros creemos un archivo,
automáticamente se va almacenar en esta carpeta, así que simplemente vamos
a crearlo dando clic en este botón o vamos a hacer clic derecho y damos en el
botón que dice Nuevo archivo. Vamos a escribir'index. html'. Te preguntarás por
qué necesitamos de un archivo HTML para trabajar con JavaScript. Esto es muy
simple, pues, cuando trabajamos con web necesitamos de HTML para que se
pueda ejecutar JavaScript, puesto que HTML es el punto de entrada para poder
trabajar con este lenguaje. Una vez que tenemos creado nuestro archivo, vamos
a escribir las letras "ht". Con esto, se nos está desplegando un menú emergente
conocido como "intelligence". Esta ventanita emergente me va a ofrecer
algunos "snippets", que simplemente son atajos de código para poder escribir
más rápidamente. Vamos a seleccionar la opción que dice Html5. Una vez que la
seleccionamos, nos aparece ya una base de código, por lo cual no es necesario
tener que escribir todo la primera vez. Vamos a remover la línea número 7,
puesto que, en este caso, todavía no estaremos trabajando con estilos. Al
contrario, vamos a generar una etiqueta llamada'script' para que nosotros
podamos escribir aquí nuestro código de JavaScript. Aquí simplemente vamos a
utilizar una alerta, entre paréntesis y entre comillas, vamos escribir "Hola
Mundo". Con esto, ya tenemos un primer JavaScript generado y simplemente
vamos a guardarlo, y para probarlo vamos a abrir nuestra carpeta y damos clic
en el archivo'index. html'que aparece aquí. Como podemos ver, cuando nuestra
página carga, aquí dice "Hola Mundo". En este caso, entonces, ya contamos
nosotros con nuestra primera aplicación de JavaScript. Sí, este ejercicio es algo
muy sencillo, pero poco a poco estaremos agregándole mejores características.

Herramientas y entorno de trabajo

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Las herramientas de trabajo para comenzar con JavaScript son muy
sencillas, simplemente necesitamos de un navegador web, un editor de texto y,
en ciertas circunstancias, de una línea de comandos. Dentro de los navegadores
web que podemos utilizar, se encuentran Google Chrome y Firefox, que están
disponibles para casi todos los sistemas operativos e incluso móviles. También,
si es que tú te encuentras trabajando en una Mac puedes utilizar Safari. Yo te
recomiendo mucho trabajar con Google Chrome, ya que es una herramienta
muy sencilla y nos permite interactuar muy bien con JavaScript. A lo largo de
este curso, estaremos utilizando este navegador, pero tú eres libre de utilizar el
que más desees. También, Google Chrome y Firefox cuentan con una versión
especial de desarrolladores que para Google Chrome es Google Canary y para
Firefox es Firefox Developer. Este tipo de herramientas están muy enfocadas
para que tú puedas desarrollar contenido web
adecuadamente. También tenemos los editores de texto. Los editores de texto,
por defecto, nos van a servir para poder escribir todo nuestro código, e incluso
muchos de estos que te voy a recomendar ahora cuentan con las herramientas
necesarias para agilizar el proceso de escritura de código, tal es el caso de
Visual Studio Code, que se ha posicionado como una herramienta muy
importante en casi todos los desarrolladores a nivel mundial. Otras herramientas
también muy buenas pueden ser WebStorm, Sublime Text y ATOM. Cualquiera
de ellas te puede servir, incluso el bloc de notas, pero lo que yo te recomiendo
es que pruebes algunas de estas herramientas y utilices la que más sencilla se te
haga. En este curso, estaremos trabajando con Visual Studio Code y verás todas
las propiedades y características muy eficientes que tiene. Cuando trabajemos
con línea de comandos, si es que tu trabajas en Mac, por ejemplo, puedes
utilizar Terminal, que es la línea de comandos nativa o puedes trabajar con
iTerm2. En el caso de Windows, puedes utilizar la línea de comandos que
viene por defecto o incluso trabajar con Windows PowerShell. Usar todas estas
herramientas nos va a facilitar el trabajo con JavaScript. Si bien hay muchas en
el mercado que nos van a facilitar todavía mucho más, estas son las necesarias
para comenzar a trabajar con este lenguaje.

Conoce el material de tu curso

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Hemos preparado material muy interesante para ti en este curso. Todo esto te
servirá de apoyo para cada uno de los temas que vas a ver. Para utilizarlos, lo
único que tienes que hacer es abrir toda esta carpeta, ya sea en tu editor de
código o ir abriendo archivo por archivo en tu navegador. Cuando accedas y
comiences con alguno de los temas, por ejemplo, en este caso el tema
Operadores, Operadores aritméticos, las recomendación es que primero abras el
archivo'index. html'en tu navegador y posterior a eso abras el archivo de
JavaScript que encontrarás en esta carpeta, en tu editor de código. Así te será
muchísimo más fácil seguir las instrucciones que se ofrecen en cada uno de los
videos. Recuerda, para cada uno de los temas hay un material en específico y lo
único que vas a necesitar a lo largo de todo este curso será un navegador web,
que te recomendamos utilices Google Chrome, y un editor de código, que en
este curso estaremos trabajando con Visual Studio Code. Esperamos que
disfrutes mucho de todo este contenido que estamos seguros te servirá de
mucho.

Tu primer JavaScript
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Vamos a comenzar a trabajar con nuestro primer archivo de JavaScript, para lo
cual es necesario que primero tengamos una página web. Para esto, vamos a
crear una carpeta, en este caso tenemos una creada: 'JavaScript Esencial'. Esta
carpeta simplemente la arrastramos y la dejamos caer en nuestro Visual
Studio Code. Aquí, cada vez que nosotros creemos un archivo,
automáticamente se va almacenar en esta carpeta, así que simplemente vamos
a crearlo dando clic en este botón o vamos a hacer clic derecho y damos en el
botón que dice Nuevo archivo. Vamos a escribir'index. html'. Te preguntarás por
qué necesitamos de un archivo HTML para trabajar con JavaScript. Esto es muy
simple, pues, cuando trabajamos con web necesitamos de HTML para que se
pueda ejecutar JavaScript, puesto que HTML es el punto de entrada para poder
trabajar con este lenguaje. Una vez que tenemos creado nuestro archivo, vamos
a escribir las letras "ht". Con esto, se nos está desplegando un menú emergente
conocido como "intelligence". Esta ventanita emergente me va a ofrecer
algunos "snippets", que simplemente son atajos de código para poder escribir
más rápidamente. Vamos a seleccionar la opción que dice Html5. Una vez que la
seleccionamos, nos aparece ya una base de código, por lo cual no es necesario
tener que escribir todo la primera vez. Vamos a remover la línea número 7,
puesto que, en este caso, todavía no estaremos trabajando con estilos. Al
contrario, vamos a generar una etiqueta llamada'script' para que nosotros
podamos escribir aquí nuestro código de JavaScript. Aquí simplemente vamos a
utilizar una alerta, entre paréntesis y entre comillas, vamos escribir "Hola
Mundo". Con esto, ya tenemos un primer JavaScript generado y simplemente
vamos a guardarlo, y para probarlo vamos a abrir nuestra carpeta y damos clic
en el archivo'index. html'que aparece aquí. Como podemos ver, cuando nuestra
página carga, aquí dice "Hola Mundo". En este caso, entonces, ya contamos
nosotros con nuestra primera aplicación de JavaScript. Sí, este ejercicio es algo
muy sencillo, pero poco a poco estaremos agregándole mejores características.

Elementos básicos de JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Ahora que hemos ya creado nuestro primer JavaScript, vamos a entender un
poquito más de cómo funciona el flujo entre una página de HTML y
JavaScript. Lo primero que debemos entender es que puede ejecutarse desde
dos formas: la primera, dentro de un código HTML, y la segunda, de manera
independiente, es decir, en un archivo separado. La primera forma es como la
que podemos ver aquí en pantalla, dentro de las etiquetas'script'. Incluso aquí,
yo puedo agregar cuanto código más necesite. Por ejemplo, si yo quisiera crear
una variable, simplemente puedo escribirla y puedo escribir aquí también todo
el código que yo vaya a necesitar. Pero, cuidado, porque si tú estás trabajando
con una aplicación a larga escala, escribir todo tu código dentro de estas
etiquetas puede resultar muy complicado de mantener y puede ser propenso a
que tengas más errores. Por lo cual, es muy recomendado que tú tengas que
generar archivos externos. Por ejemplo, vamos a hacer lo siguiente. Vamos a
crear aquí una carpeta que se llame'js'. Generalmente, tú puedes crear esta
carpeta para almacenar todos tus "scripts". Vamos a entender esto. Todo
archivo que tú crees de JavaScript podrá ser conocido como un "script". Aquí,
adentro de esta carpeta, tú podrás crear un archivo nuevo al cual vamos a
ponerle, en este caso, el nombre'app', con la extensión'js'. Esta convención de
nombres es importante, puesto que te ayudarán a ti a tener una correcta
organización en tus archivos. Recuerda, puedes ponerle el nombre que tú
quieras, pero entre más organizado esté, mucho mejor, y más si lo haces desde
el inicio. Por ejemplo, también tu proyecto de'js'puede haberse llamado 'app'y
dentro tener todos tus "scripts". Podrás encontrar muchas variantes a lo largo
del camino, simplemente es que entiendas cómo está conformado. En este caso,
tenemos el archivo'app. js', vamos a escribir aquí una alerta y dentro de esta
alerta vamos a mandar una notificación que diga: "Hola desde un archivo
externo". Guardamos nuestro archivo, y ahora simplemente tendremos que
ligarlo en nuestro archivo'index. html', para lo cual vamos a hacer uso de la
etiqueta "script". Pero, al contrario de lo que habíamos venido trabajando, en
lugar de que nosotros tengamos ahora simplemente un cierre de la etiqueta, lo
que vamos a hacer aquí es escribir la palabra'src'. Con'src', yo podré
determinar cuál es la fuente de nuestro archivo. En este caso, voy a decir que se
encuentra dentro de la carpeta 'js' y vamos a invocar el archivo'app.
js'. Guardamos nuestro archivo y ahora vamos al navegador a probarlo. Abrimos
y actualizamos y encontraremos que tenemos, ahora sí, una alerta que dice
"Hola desde un archivo externo", la aceptamos y vamos a tener la otra
alerta. Como vemos, tenemos dos alertas: la alerta que tenemos en el "script"
dentro de HTML y la alerta que tenemos en el archivo'app. js'. De esta manera,
podemos entender cómo está el flujo de una aplicación que utiliza
JavaScript. Las recomendación es: siempre vamos a utilizar archivos
independientes de JavaScript, 1) para facilitar el mantenimiento de nuestros
proyectos y 1) para poder trabajar de una manera más ágil y evitar, de esta
manera, errores. Con esto también hacemos que nuestro proyecto pueda ser
escalable, es decir, que podamos nosotros hacerlo crecer o incluso reutilizar
este código en otros proyectos.
Aprendiendo a usar la consola
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La consola es una herramienta clave y muy necesaria en todo desarrollo
web, puesto que con ella podremos hacer las pruebas necesarias para
garantizar que nuestro código esté funcionando como nosotros queremos. La
manera de utilizarla es la siguiente. Cuando estamos en el navegador, vamos a
dar clic derecho y vamos a seleccionar la opción que diga Inspeccionar –bueno,
en el caso de un navegador inglés: "Inspect Element"–. Una vez que la pulsamos,
tendremos esta ventana. Dentro de esta ventana encontraremos muchas
opciones con las cuales podremos trabajar con nuestro navegador. Puedes
tener esta ventana del lado derecho, del lado de abajo u organizarla donde tú
gustes. Cuando nosotros estemos trabajando con esta ventana, podremos
acceder a la opción que dice Console. Esta opción que Console me va a permitir
reflejar lo que sucede en el código directamente aquí, pero además puedo
hacer muchas operaciones, por ejemplo, cosas sencillas como un 2+2 o incluso
puedo mandar notificaciones o mensajes desde mi código hacia
esta consola. Vamos a hacer un ejemplo muy rápido. Tenemos el archivo'app.
js', en este archivo vamos a generar un mensaje el cual
enviaremos directamente a la consola. Para esto, necesitamos escribir lo
siguiente: 'console . log' y aquí adentro, dentro de unas comillas, vamos a
escribir el mensaje y escribiremos "Hola consola", guardamos y una vez que
tenemos esto guardado vamos de regreso al navegador y vamos a
actualizarlo. Cuando lo actualizamos tenemos las ventanas que ya habíamos
visto y, una vez después de esto, tenemos nosotros listo el mensaje en el cual
nos indica en qué archivo se está ejecutando y en qué línea, en este caso es en
el archivo'app. js', en la línea número tres. Y, como vemos, aquí es donde se
encuentra. Tú puedes agregarlo ya sea dentro del mismo'index. html', dentro de
las etiquetas'script' o puedes agregarlo en el archivo externo. Cuando lo
agregamos dentro de una etiqueta interna, por ejemplo, en este caso funciona
de la misma manera y nosotros podremos aquí enviar muchas cosas, por
ejemplo, yo puedo escribir "El nombre es: " y después de esto puedo mandar
una coma y vamos a escribir aquí el contenido de esta variable. Así, después de
la coma, yo escribo la variable'nombre', guardamos, actualizo mi navegador y,
como vemos, ahora dice "Hola consola", que viene desde'app. js'en la
línea número tres, y después otro texto que dice "El nombre es Sergio", que
viene de'index. html'en la linea 12. Esta herramienta nos va a ser muy útil y la
estaremos utilizando muchas veces a lo largo de este curso. Puedes irte
acostumbrando a ella, puesto que en todos tus desarrollos será una
herramienta de la cual harás mucho uso.

Escribiendo comentarios en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando estamos trabajando con el código, a veces es necesario ignorar
ciertas líneas. ¿A qué me refiero con ignorar? Me refiero a que deseamos que el
navegador no considere esa línea en específico en la ejecución, porque estamos
haciendo pruebas o simplemente porque no queremos que vaya pero
queremos que quede una referencia. Esto sucede cuando queremos omitir
algunas instrucciones o cuando nosotros queremos describir nuestro
código. Por ejemplo, si yo quiero hacer un comentario yo puedo hacer que, en
este caso, la primera línea no se ejecute y puedo escribir aquí una doble
diagonal. Esta doble diagonal es un comentario de una línea. Quiere decir que
todo lo que esté después de esta línea va a ser ignorado, pero una vez que
pasemos a la siguiente línea todo regresa a la normalidad. Por ejemplo, vamos a
hacer la prueba, que en este caso esto debería de detonarme una alerta que
dice "Hola desde un archivo externo". Ahora, como está comentado,
simplemente se va a ignorar y no se va a ejecutar, así que ya no tendremos esta
ventana en nuestro navegador. Vamos a actualizar y, una vez que actualizamos,
solamente tenemos esta alerta que pertenece al archivo'index. html', como lo
podemos ver aquí, en el código. Cuando regresamos y pulsamos el botón
Aceptar, solamente nos apareció una alerta, esto es porque la primera línea está
comentada. Ahora, tenemos otro tipo de comentarios que son los comentarios
de bloque. Los comentarios de bloque abarcan más espacio. Por ejemplo, si yo
quisiera que en este archivo'index. html' todo esto estuviera comentado, lo que
podemos hacer es escribir: diagonal, asterisco y después seleccionar en dónde
queremos terminar y escribir: asterisco, diagonal. De esta manera estamos
ignorando nosotros todas estas líneas de código. No te preocupes por estos
mensajes que aparecen aquí abajo. De hecho, podemos cerrar esta
ventana, dado que simplemente son cuestiones informativas que no implican el
hecho de que funcione o no nuestro código. Una vez que tenemos este
comentario, vamos a guardarlo y vamos de nuevo a probar. Con esto, este texto
que aparece aquí en la consola ya no debería aparecer, así como tampoco
deberían aparecer las alertas. Una vez que lo utilizamos, vemos que esto
sucede. También otro beneficio de los comentarios es que yo puedo
aquí escribir algún texto que describa lo que estoy haciendo, por
ejemplo, vamos escribir aquí una doble diagonal y pondremos un comentario
que diga: "Este es un mensaje de la consola". Esto simplemente me sirve
también como una referencia para cuando posteriormente yo desee regresar a
este código y saber qué estaba haciendo, o cuando yo voy a enviar este código
hacia otros desarrolladores y que ellos sepan qué es lo que estaba haciendo. Es
una muy buena práctica el hecho de que comentes tu codigo, para que siempre
estés informado de qué sucedía en este código cuando
regreses posteriormente. Créeme, la primera vez que lo haces piensas que tal
vez no tenga mucho sentido, pero cuando pasa mucho tiempo y regresas a tu
código siempre puedes preguntarte: "¿Por qué no lo había comentado? ". Así
que es muy buen momento para que comiences esta buena práctica
de comentar siempre tu código.

Qué es Strict Mode

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas veces te vas a encontrar con algo llamado como modo estricto o
"strict mode" a lo largo de todos tus archivos de JavaScript. Esto simplemente te
va a servir para asegurar tu código, es decir, garantizar que estás escribiendo
código de JavaScript con buenas prácticas y también garantizar que no estás
utilizando palabras reservadas, por ejemplo, la palabra "console", para
almacenar una variable o evitar variables no declaradas. Vamos a ver esto. Por
ejemplo, si yo aquí declaro una variable llamada X y vamos guardar aquí un
dato. Vamos a guardar, por ejemplo, el valor de Pi: 3, 1416. Con esto, lo
guardo y voy a mi navegador, actualizo, y si yo aquí escribo la palabra X, doy un
Enter y tengo el valor que yo tenía. Listo, se puede utilizar. Pero esto es una
mala práctica, porque la idea es que primero nosotros tengamos que hacer la
declaración de dicha variable utilizando la palabra reservada'var', así que vamos
a activar el modo estricto para ver cómo funciona. Lo primero que tenemos que
hacer es colocarnos en la línea 1 de nuestro archivo. De hecho, siempre que
activemos este "strict mode", siempre tendrá que estar al inicio de todo
archivo. Aquí vamos escribir la palabra "use strict" y ahora sí vamos a guardar y
vamos de vuelta a probar nuestro código. Actualizamos nuestro navegador y
vemos como ahora ya tenemos un error donde nos dice que X no está
definido, esto es porque tenemos el "strict mode" activo. Por ejemplo, para que
esto vuelva a funcionar, yo aquí estaré declarando la variable X. Vamos a
guardarlo, actualizamos nuevamente y, ahora sí, ya tengo la variable X en
función, puesto que ya la tengo declarada y con esto estoy cumpliendo la
función de "use strict". Veamos ahora qué sucede cuando trabajamos con una
palabra reservada. En este caso, vamos a declarar una variable
llamada'public'. Esta palabra es reservada, pues está destinada a ser utilizado
dentro de las clases con JavaScript. Vamos a utilizarla simplemente para este
ejemplo. Voy a crear esta variable llamada'public' y vamos a insertar aquí un
valor llamado "Hola", guardamos, actualizamos nuevamente y vemos como
ahora tenemos un error donde me dice que estamos utilizando una palabra
reservada. Esto quiere decir que también el modo estricto activa esta
función. ¿Qué pasa si quito el modo estricto? Actualizo y ahora ya no
aparece. Lo ideal es tener siempre este modo estricto activo para que no
tengamos problema. Entonces, para que esta variable realmente sea una
variable válida vamos a escribirla de otra manera. Vamos a poner el
nombre'public data', guardamos, actualizamos y vamos a escribir aquí el
nombre de la variable, que se llama'publicData', vamos a escribirla
correctamente, la seleccionamos de esta opción, damos Enter y vemos como ya
tenemos acceso a esta variable.

Trabajando con variables en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Las variables es una manera en la cual vamos a almacenar datos dentro de
nuestra aplicación. Para escribir nuestra primera variable, vamos a utilizar la
palabra reservada'var'. Una vez que nosotros escribimos esta palabra
reservada, podemos asignar un nombre. Procura usar un nombre que te dé idea
del dato que estás almacenando. En este caso vamos a utilizar la
palabra'nombre' y aquí vamos a asignar algún valor, en este caso voy a asignar
mi nombre: 'Sergio'. ¿Qué es lo que estoy haciendo aquí? Almacenando en la
variable'nombre' la palabra'Sergio'. Como ves, tiene una relación. Tener este
tipo de técnicas es una muy buena práctica para que no pierdas la relación de lo
que existe dentro de esta variable. Ahora, una variable puede existir de manera
global o de manera local. Cuando hablamos de manera global, quiere decir que
podemos acceder a este dato desde cualquier parte del programa. Pero debes
de tener cuidado con algo: las variables son de tipo destructivas. ¿Qué quiere
decir esto? Que si tú tienes un dato almacenado y posteriormente llegas y
almacenas otro, el dato que existía anteriormente se va a eliminar y no existe
forma de recuperarlo, ya que las variables no van a poder almacenar datos
persistentes de esta manera, solamente lo van a almacenar hasta que llegue un
nuevo dato, es decir, hasta que tengamos un nuevo valor almacenado dentro de
esta variable. Veamos un ejemplo claramente. Utilizando este mismo caso con la
variable'nombre', vamos a abrir nuestra página web en el navegador. Dentro de
la consola escribamos el nombre de la variable, que en este caso
se llama'nombre'. Cuando yo lo escribo, tiene el valor'Sergio'. Vamos a asignar
ahora un nuevo valor, escribamos el valor'nombre', igual a, y vamos a asignar
ahora el nombre'Susana'. Yo lo asigno y trato de recuperar el valor que
tenía, vuelvo a mostrarlo y, como puedes ver, tiene el nuevo valor. El valor que
existía al inicio llamado'Sergio' ya no existe, así que debes tener cuidado con el
tipo de valores que estás almacenando. A lo largo de tu aplicación, harás mucho
uso de las variables, así que planéalas muy bien y siempre procura tener un
nombre descriptivo, no importa que este sea un tanto largo, a veces dos o tres
palabras suelen ser normales para escribir una variable, pero también procura
que este sea corto para que la puedas usar recurrentemente.

Contenedores Let
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Las variables tienen un alcance, o también lo podemos conocer como un
"scope", es decir, el espacio que van a abarcar en su uso. En este caso, yo tengo
una variable llamada'nombre'. Esta variable'nombre' va a alcanzar toda la
aplicación, puesto que es una variable de tipo global. Aquí, en esta
situación, vamos a enviar un'console. log' para mostrar en Consola el contenido
de la variable'nombre'. Una vez que ya lo tengo aquí, actualizo mi pantalla y
vemos como ya me despliega el valor que contiene esta variable
llamada 'nombre'. Si yo me llevo esta variable y hago una nueva asignación, en
este caso dentro de esta estructura que es una función, y vamos a cambiar su
valor, por'yacxf'. Aquí yo cambio dicho valor y cuando lo voy a ejecutar
nuevamente, voy a probar el contenido de la variable, y vemos como tiene un
nuevo contenido. Yo puedo cambiar el alcance y lo puedo delimitar, es
decir, puedo dejar que el contenido de esta variable'nombre' solamente
abarque el contenido de esta función. Y esto lo puedo hacer simplemente
escribiendo nuevamente la palabra'var'. Así que ahora vamos a mostrarla dentro
de este contenido. Una vez que la tenemos aquí, actualizamos la página y
vemos como tengo esto que se está imprimiendo en la línea 5 y el contenido
que se está imprimiendo en la línea 9. Pero ¿qué sucede si yo vuelvo a acceder a
la variable'nombre'? En este caso, nosotros mantenemos el valor
de'Sergio', ¿por qué?, porque estamos viendo que simplemente el valor de esta
variable que existe aquí solamente es válida dentro de la función. Ahora, para
evitar alguna confusión, nosotros podemos cambiar este'var' por la palabra
reservada'let' y aquí estamos utilizando un contenedor de bloque, es decir, un
contenedor que solamente va a abarcar este espacio y va a tener el mismo
objetivo que lo que acabamos de escribir con la palabra'var' pero de una
manera y con una sintaxis más adecuada. Así que ahora actualizamos, vuelvo a
escribir la palabra'nombre' y aquí tengo ahora el valor'Sergio', que es el
mismo. Pero ¿qué sucede, por ejemplo, si yo creo una nueva variable o un
nuevo contenedor? En este caso vamos a crear el contenedor'edad' y aquí
vamos a grabar un número. Vamos a mandarlo a imprimir a Consola, aquí
vamos a escribir el nombre de la variable, que se llama'edad', y actualizamos
nuestra página. Como vemos, aquí me aparece el valor 34, pero ¿qué sucede si
yo invoco el valor de'edad'directamente aquí? Ya no existe dentro de este
contexto, ¿por qué?, porque simplemente lo estoy invocando fuera de la
función y aquí yo ya no me encuentro dentro de la función. Por tanto, podemos
ver que el error me dice que no está definido. Así también, si yo puedo probarlo
mandando el'console. log' fuera de la función, tendremos un error de manera
automática. Vamos a ejecutarlo y aquí se encuentra el error. Esto es porque
estamos definiendo el alcance, así que la manera adecuada, cuando tú quieras
trabajar con variables globales utiliza la palabra reservada'var', y cuando quieras
trabajar con variables de bloque o variables locales dentro de una función o una
estructura de datos puedes utilizar la palabra reservada'let'.

Contenedores Const
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En JavaScript también podemos utilizar constantes, y estos son contenedores de
datos que no van a permitir que cambie el dato que están almacenando a lo
largo de tu programa, es decir, lo van a tener persistente a lo largo de todo tu
programa mientras este se esté ejecutando. Así que, entonces, nosotros
podemos crear una nueva constante utilizando la palabra reservada'const'. Aquí
vamos a asignar un nombre, podemos trabajar ahora con la palabra'pi' y, por
tanto, guardaremos el valor 3, 1416. A diferencia de una variable, que en ese
caso sí puede cambiar el valor que tiene, para esta situación una constante no
va a permitir que el valor cambie. Vamos a ver primero qué sucede con este
ejemplo. Cuando trabajamos con una constante, en este caso'pi', yo voy a
guardar y voy a probar el contenido. Una vez que actualizo mi navegador,
escribo la palabra'pi', que es el nombre de esta constante, y me ofrece el
valor. Pero ¿qué sucede si yo trato de cambiar su contenido? Por ejemplo, aquí
mismo escribo ahora'pi'es igual a 15. Esto solamente por poner un caso. Vengo
y actualizo mi navegador y automáticamente tengo un error donde me dice que
la asignación a una constante no es posible. Con esto podemos ver que la
constante se está protegiendo. De la misma manera, y en el caso de que yo no
tenga alguna asignación, esto también puede cambiar. Voy a comentar aquí el
valor de'pi' y vamos a hacer la asignación en el momento de ejecución. Por
ejemplo, aquí yo tengo el valor de'pi' y ahora yo trato de hacer una asignación y
voy a poner ahora el valor 13. Cuando lo hago, me arroja el mismo tipo de
error. De esta manera, estamos asegurándonos de que estamos utilizando un
valor que no va a cambiar a lo largo del programa y así podemos evitar malas
asignaciones en nuestro código.

Trabajar con números en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En JavaScript contamos con distintos tipos de datos, el primero que veremos es
el dato numérico. Este dato numérico, como su nombre lo dice, nos permite
almacenar y trabajar con números. Para este caso, vamos a declarar primero una
variable llamada'edad'. Aquí, lo único que tenemos que hacer nosotros es
asignarle el valor numérico que queremos, en este caso pondremos el número
35. Debes de notar lo siguiente: los números no están expresados con
comillas. Cuando los expresamos directamente, sin ningún tipo de
comillas, estamos hablando de un número nato. También podemos asignar
números flotantes, por ejemplo, si yo pongo un punto y agrego los valores
decimales. O incluso puedo trabajar con números positivos, así, directamente, o
con números negativos si es que yo expreso el símbolo de negación al inicio de
un número. Algo que debemos tener en cuenta y que es muy importante es el
valor que significa para la consola o para la operación que estemos
realizando. Por ejemplo, yo tengo aquí, en este caso, el valor de la'edad' y
vamos a escribir la palabra'edad'. En este caso, la variable tiene el contenido 35,
que es un número. Si yo quisiera realizar una operación con esto, por ejemplo,
quiero hacer una suma, yo tendría'edad + 5', quiere decir que si la edad tenía
35, más 5, debe de ser 40. Y ahora este valor ya tiene este resultado, pero ¿qué
sucede, por ejemplo, si yo tengo alguna otra variable como esta variable que
estoy creando ahora que se llama'cantidad'? Si yo a esta variable le asigno un
valor de 100 y trato yo de acceder a este dato, ahora podemos ver lo siguiente.
Tenemos un valor de comillas, porque cuando hice la asignación, simplemente
le puse comillas. Debes tener cuidado con esto, pues lo estamos interpretando
como si fuera un texto, y aquí, ¿qué sucede? Si yo quisiera realizar una
operación de cantidad: '+20', cuando realizo la operación, lo único que hace es
pegar o juntar ambos datos, ya que esto no sería un dato numérico, sino sería
un dato de texto. Pero no te preocupes, hay una solución para esto, y para esta
parte nosotros podemos crear una nueva variable. Vamos a escribir ahora una
nueva cantidad y nosotros podemos cambiar el contenido o más bien podemos
cambiar el tipo de dato de cadena de texto hacia un número, ¿de qué
manera?, utilizando una función llamada'number'. Y aquí, entre los
paréntesis, agregamos lo que nosotros queremos convertir, que en este caso es
el valor'cantidad' que tiene un texto. Vamos a guardarlo y vamos a probar en
nuestro navegador. Ahora yo voy a ejecutar'nuevaCantidad', y cuando corro con
esto te puedes dar cuenta que ya tiene un valor de 100. Así, si yo quiero
agregarle entonces el número que teníamos, ya me está realizando la operación
aritmética de una manera correcta. También dispones de algunas otras
funciones como, por ejemplo, 'parseInt'para convertir tus datos
enteros o'parseFloat'cuando quieres convertir tus datos a decimales o que
estén utilizando un punto flotante. De esta manera, ya puedes comenzar a
trabajar con los números.

Trabajar con números en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En JavaScript contamos con distintos tipos de datos, el primero que veremos es
el dato numérico. Este dato numérico, como su nombre lo dice, nos permite
almacenar y trabajar con números. Para este caso, vamos a declarar primero una
variable llamada'edad'. Aquí, lo único que tenemos que hacer nosotros es
asignarle el valor numérico que queremos, en este caso pondremos el número
35. Debes de notar lo siguiente: los números no están expresados con
comillas. Cuando los expresamos directamente, sin ningún tipo de
comillas, estamos hablando de un número nato. También podemos asignar
números flotantes, por ejemplo, si yo pongo un punto y agrego los valores
decimales. O incluso puedo trabajar con números positivos, así, directamente, o
con números negativos si es que yo expreso el símbolo de negación al inicio de
un número. Algo que debemos tener en cuenta y que es muy importante es el
valor que significa para la consola o para la operación que estemos
realizando. Por ejemplo, yo tengo aquí, en este caso, el valor de la'edad' y
vamos a escribir la palabra'edad'. En este caso, la variable tiene el contenido 35,
que es un número. Si yo quisiera realizar una operación con esto, por ejemplo,
quiero hacer una suma, yo tendría'edad + 5', quiere decir que si la edad tenía
35, más 5, debe de ser 40. Y ahora este valor ya tiene este resultado, pero ¿qué
sucede, por ejemplo, si yo tengo alguna otra variable como esta variable que
estoy creando ahora que se llama'cantidad'? Si yo a esta variable le asigno un
valor de 100 y trato yo de acceder a este dato, ahora podemos ver lo siguiente.
Tenemos un valor de comillas, porque cuando hice la asignación, simplemente
le puse comillas. Debes tener cuidado con esto, pues lo estamos interpretando
como si fuera un texto, y aquí, ¿qué sucede? Si yo quisiera realizar una
operación de cantidad: '+20', cuando realizo la operación, lo único que hace es
pegar o juntar ambos datos, ya que esto no sería un dato numérico, sino sería
un dato de texto. Pero no te preocupes, hay una solución para esto, y para esta
parte nosotros podemos crear una nueva variable. Vamos a escribir ahora una
nueva cantidad y nosotros podemos cambiar el contenido o más bien podemos
cambiar el tipo de dato de cadena de texto hacia un número, ¿de qué
manera?, utilizando una función llamada'number'. Y aquí, entre los
paréntesis, agregamos lo que nosotros queremos convertir, que en este caso es
el valor'cantidad' que tiene un texto. Vamos a guardarlo y vamos a probar en
nuestro navegador. Ahora yo voy a ejecutar'nuevaCantidad', y cuando corro con
esto te puedes dar cuenta que ya tiene un valor de 100. Así, si yo quiero
agregarle entonces el número que teníamos, ya me está realizando la operación
aritmética de una manera correcta. También dispones de algunas otras
funciones como, por ejemplo, 'parseInt'para convertir tus datos
enteros o'parseFloat'cuando quieres convertir tus datos a decimales o que
estén utilizando un punto flotante. De esta manera, ya puedes comenzar a
trabajar con los números.

Uso de los datos booleanos

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los tipos de datos "booleanos" te ofrecen solamente dos valores: o "true" o
"false", que puede ser o prendido o apagado, o activo o inactivo, o uno o
cero. Para poder declarar un tipo de dato "booleano", simplemente tenemos
que escribir el nombre de la variable y hacer la asignación que queremos, ya sea
"true" o "false". Por ejemplo, en este caso tenemos la variable'activo' y vamos a
probarla en nuestro navegador y veamos qué sucede cuando yo hago la
invocación de la variable'activo'. Vamos a escribirla correctamente: 'activo', y
tenemos el valor'true'. Ahora, cuando yo cambio la asignación, simplemente es
un valor'false'. Y con esto nosotros podemos saber qué sucede con los valores
que tenemos. Vamos a invocarla nuevamente, 'activo', y ahora tenemos el
valor'false'. Esto me puede servir a mí para saber qué decisiones tomar. Si
sucede alguna cosa, entonces puedo hacer esto, porque la asignación que yo
tenía guardada en esta variable me detuvo un "true" o un "false". Por
ejemplo, yo aquí también puedo tener otro tipo de asignación. Veamos ahora y
creemos una variable llamada'estado'. En esta variable'estado'voy a utilizar una
función llamada'boolean', y dentro de'boolean'puedo enviar alguna cosa que yo
desee evaluar. En este caso, vamos a evaluar algo muy sencillo. Si 10 es mayor
que 9, en este caso sabemos que 10 sí es mayor que 9, por lo cual yo lo activo y
cuando ejecuto el contenido de la variable'estado' me sale un valor'true'. Pero
¿qué sucede si yo la cambio? Y vamos a escribir: es 10 menor que 9. Guardamos
y actualizamos y vamos a escribir de nuevo la variable'estado' y vemos como
ahora tenemos un valor "false". De cualquiera de las dos maneras, ya sea que yo
lo esté asignando o lo esté invocando, puedo utilizar un valor
"booleano". Cuando trabajemos también con las estructuras de control, como
un "if", por ejemplo, o como un "switch", los valores "booleanos" van a tomar
mucha importancia.

Trabajar con fechas en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Con JavaScript, podemos trabajar con fechas y esto lo vamos a hacer a través
del objeto llamado'date'. Para comenzar con ellas vamos a hacer la
asignación de la fecha utilizando este objeto y vamos escribir la palabra
"new date" seguido de un par de paréntesis. En este momento ya tenemos una
fecha. Vamos a utilizar nuestro navegador y vamos a ver cuál es el contenido
que tiene esta variable. Esta variable'fecha', cuando la ejecutamos vemos como
tiene el día, el mes, el año, la hora, el minuto y el segundo en el que se está
ejecutando esta fecha. Incluso, si yo la recupero en este momento puedo ver
como esta fecha se mantiene. ¿Pero qué sucede cuando yo vuelvo a generar
una nueva fecha? Vamos a escribir aquí nuevamente'new date'. Al escribir
yo'new date', cada vez que lo escribo me está generando la fecha al
momento. Esto podemos observarlo en este cambio en los segundos, incluso si
yo lo vuelvo a ejecutar me está cambiando y se está actualizando al
momento. Por lo cual, cada vez que nosotros estemos generando este
objeto'new date' estaremos generando una nueva fecha. Incluso, también
disponemos de algunos métodos importantes. Para eso, primero voy a limpiar
la consola y vamos a trabajar con estos métodos. Por ejemplo, yo puedo utilizar
el método'get date'. Este método'get date' me va a obtener el día de la semana
en la que nos encontramos. Por ejemplo, el día de hoy es martes y por eso me
regresa el día número dos. ¿Pero qué sucede si yo regreso un'get date'? Este'get
date' me está regresando cuál es el día del mes en el cual yo me encuentro y en
este caso es el primer día de agosto, por lo cual yo estoy regresando el día
número uno. De esta manera yo puedo estar variando entre estas
fechas, incluso también puedo obtener cuestiones como el año. Para esto, si tú
estás trabajando en la consola podrás ver, cada vez que tú utilices la
palabra'get' puedes obtener distintos tipos de métodos como, por ejemplo,
obtener el año completo o incluso obtener la hora en este momento o los
minutos. Por ejemplo, utilizamos el método'get hours'. Cuando yo utilizo este
método'get hours', me dice cuál es la hora en la que estoy ejecutando esta
instrucción. También es posible que yo pueda establecer cosas. Por ejemplo, si
yo utilizo el método'set date', aquí, al establecerlo yo puedo indicarle que
quiero trabajar con el día 5, así de esta manera me regresa a mí un valor
numérico convertido en fecha. Con estos valores numéricos yo puedo trabajar y
puedo estar utilizando las fechas y las horas en las cuales yo quiero trabajar. Si
volvemos a ejecutar entonces la parte fecha, vemos como ahora me
está apuntando al día 5. Vamos a hacer lo mismo pero, por ejemplo, ahora al
día 10. Volvemos a ejecutar la fecha y vemos como ahora la tenemos apuntando
al día 10. Así entonces tú puedes jugar con todos estos métodos, ya sea para
obtener datos o para asignar datos dependiendo de lo que tú estás
trabajando. Si tú tenías fechas establecidas o guardadas en una base de datos y
deseas, a partir de esto, crear objetos con los cuales crear operaciones tendrás
que utilizar los métodos'set' para que sea un tipo de dato válido. Pero, al
contrario, si tú ya tenías una fecha precargada y quieres obtener una parte o
todo o darle un formato en específico puedes trabajar con los métodos'get'para
obtener fecha, hora, minuto, segundo, etc., y con esto poder armar una fecha y
una hora a tu gusto o a la necesidad que tengas que cubrir en tu proyecto.

Uso de símbolos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los símbolos son un tipo de datos cuyos valores son únicos e inmutables, es
decir, no van a cambiar a lo largo del programa, puesto que estos valores al
momento de ser únicos simplemente se van a mantener de esa manera. Estos
valores pueden ser utilizados ya sea con identificadores clave, como si fuera una
propiedad del objeto, es decir, cuando creemos un símbolo podemos asignarle
un nombre o podemos asignarlo a una variable. Así, entonces, cada uno de
estos tendrá un valor de tipo "symbol" o símbolo, por lo cual este dato va a ser
único completamente a lo largo de todo el programa. Vamos a crear un valor de
estos. Por ejemplo, creemos una variable nueva y vamos a ponerle a
esta 'simbolo1'. Y para crear un símbolo, simplemente vamos escribir la
palabra'symbol' y un par de paréntesis. Cuando yo creo este símbolo y quiero
ver cuál es su contenido, simplemente lo voy a invocar aquí directamente en la
consola y vemos como tenemos este tipo'symbol'. Hay que tener mucho
cuidado, puesto que este símbolo simplemente es una función que se está
invocando, es decir, una función que ofrece JavaScript, pero si tú escribes la
palabra'new symbol', esto nos puede generar algún error. De hecho, cuando
nosotros corremos nuestra aplicación vemos como tenemos el error que nos
indica. El símbolo no es un constructor, es decir, no está diseñado de esta
manera. Así que simplemente vamos a invocarlo con esta
palabra'symbol'. Vamos a tener un caso donde podemos trabajar correctamente
con los símbolos. Por ejemplo, ¿qué sucede si yo necesito una variable para
saber si estoy o no en un ambiente productivo o de desarrollo? Entonces, yo
puedo agregar aquí una variable llamada'ambiente', igual, y podemos generar
aquí un nuevo símbolo. Al crear este símbolo, dentro puedo enviar una cadena
de texto para indicar en qué ambiente me encuentro: si me encuentro en un
ambiente de desarrollo o en un ambiente de producción. Así, cuando yo
actualizo mi navegador y ejecuto la variable ambiente, vamos a escribirla
correctamente: 'ambiente', en este momento yo puedo saber que me encuentro
en la palabra'dev', es decir, me encuentro con el símbolo de desarrollo. Algo
también muy importante es que cada que yo estoy generando un símbolo se
está generando un dato único alrededor del programa. Por ejemplo, voy a crear
aquí una variable nueva llamada'simbolo2' y voy a hacer la asignación de un
símbolo. En este caso, la asignación la estoy haciendo idéntica a como la tengo
en'simbolo1'. Esto no significa que ambos valores sean iguales. De hecho, van a
ser completamente distintos. Vamos a hacer una comparativa. Vamos a escribir
por aquí 'simbolo1' y vamos a preguntar si es completamente igual
a'simbolo2'. Aparentemente serían lo mismo, pero recordemos: como estos dos
símbolos tienen valores únicos de tipo'symbol', por tanto esta validación es
falsa. Así, entonces, ya sabemos que cada símbolo tiene intrínseco un
valor único que nos va ayudar a identificarlo y con el cual podemos trabajar a lo
largo de todo el programa.

Estructurando datos con JSON

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En JavaScript podemos trabajar con objetos y esto es una gran ventaja, pues
estos objetos nos permitirán estructurar mejor los datos con los cuales
estaremos trabajando a lo largo de nuestra aplicación. Para esto también se ha
creado JSON, que es un formato creado por Douglas Crockford, el autor de un
libro muy famoso llamado "JavaScript, the good parts". ¿Pero qué es
JSON? JSON, en sus iniciales, significa "JavaScript Object Notation" y es un
formato de intercambio de datos bastante ligero y es bastante descriptivo. ¿Y
por qué es bastante descriptivo? Porque, como utiliza la estructura de un
objeto, nosotros podemos tener esto para trabajar con JSON. De hecho,
prácticamente lo único que necesitaremos es crear un objeto nosotros y,
cuando lo vayamos a enviar, convertirlo a un texto. O a veces ni siquiera
convertirlo, porque algunos servidores ya aceptan el envío de JSON por
defecto. Pero cuando nosotros recibamos los datos, si no recibimos un dato ya
con el formato JSON, nosotros podemos convertirlo. Veamos un poco de estos
ejemplos. Yo aquí voy a tener una variable llamada'persona'. Esta variable
llamada'persona' tiene dos propiedades: 'nombre'y'twitter'. Cuando yo en
consola accedo a este dato, yo aquí puedo acceder a toda esta información y,
de hecho, yo puedo escribir de nuevo'persona' punto 'nombre' y al acceder a
esto tengo el valor directamente. También yo puedo acceder a varios
valores como, por ejemplo, en este caso donde tengo una variable
llamada'personas' que tiene un arreglo, es decir, tiene múltiples datos y aquí yo
tengo guardadas tres personas. Aquí, si yo necesito probar esto actualizo mi
navegador y voy a escribir'personas'. Como podemos ver, aquí tenemos los tres
elementos que estamos asignando. Incluso esta variable que yo tengo aquí,
'persona', como un valor individual también puedo asignarlo. Eso quiere decir
que ahora que yo vuelvo a invocar'personas', vamos a tener
cuatro elementos: uno, dos, tres y cuatro. Esto es una de las maravillas de
JavaScript. Ahora, ¿qué pasa si yo necesito utilizar todos estos datos y enviarlos
a algún servidor o almacenarlos localmente? Bueno, lo único que yo tendré que
hacer es convertir estos datos utilizando el objeto JSON. Para esto, yo tengo el
objeto JSON con un método llamado'stringify'. ¿Qué es lo que va a hacer este
objeto? Va a convertir todo esto que nosotros tenemos en una cadena de
texto. Voy a actualizar el navegador y vamos a escribir la palabra'persona'. En la
palabra'persona', podemos ver que aquí tenemos un objeto. De hecho, en la
misma definición nos dice. Pero ¿qué pasa cuando yo accedo a'personaJSON',
que es el que ya está convertido? Simplemente podemos ver que es una cadena
de texto, por tanto esto va a querer decir que si yo tengo 'personaJSON'y
quiero acceder a'nombre', punto'nombre', no voy a poder. Dice que está
indefinido, porque lo único que existe aquí es una cadena de texto que no está
estructurada correctamente para poderse interpretar como un
objeto. Ahora, ¿qué pasaría si yo necesito reestructurar este dato? Por
ejemplo, esta información ya fue a un servidor o ya se guardó localmente y la
vamos a querer recuperar. Cuando la queramos recuperar vamos a necesitar
convertirla, porque, como vemos aquí, 'personaJSON'es una cadena de
texto. Entonces, voy a escribir aquí yo una variable que se va a
llamar 'nuevaPersona' y en'nuevaPersona' voy a almacenar el valor pero ahora
convertido a un objeto JSON. Entonces, lo que utilizaré nuevamente es el objeto
JSON con un método llamado'parse'. Este método'parse' va a entender todo lo
que está en esta cadena de texto y lo va a recomponer como un objeto para
que lo podamos utilizar sin ningún problema. Así que ahora yo voy a
actualizar. Vamos a acceder primero a la variable'persona', vemos que es un
objeto. Cuando lo convertimos a una cadena de texto utilizando el
método'stringify', entonces tenemos esto, que es una simple cadena de texto
que no podemos utilizar más allá de simplemente mostrarlo. Pero
posteriormente la volvimos a convertir simulando que en este paso intermedio
fue a un servidor o fue a un lugar de almacenamiento. Entonces, yo aquí puedo
escribir nuevamente 'nuevaPersona' y cuando accedo a los datos vemos como
ya los tenemos convertidos. Como puedes ver, JSON tiene mucha facilidad de
uso y nosotros podemos anidar y podemos generar tanta cantidad de líneas o
de hijos o de subdivisiones como nosotros deseemos con tal de estructurar
correctamente nuestra información. Así que cada vez que estés trabajando con
muchos datos y necesites tenerlos bien estructurados y bien ordenados, piensa
en objetos y piensa en JSON. De hecho, muchos de estos datos pueden ir
abstraídos o aislados directamente en un archivo independiente donde
solamente vamos a tener datos y no hay ninguna operación, y posteriormente
podemos traerlos o cargarlos en nuestro aplicativo según necesitemos. Así que,
entonces, JSON es la manera ideal para que podamos intercambiar datos, ya sea
en nuestra aplicación o con servicios externos.

Operadores aritméticos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los operadores son aquellos recursos de JavaScript que me permitieran a
mí realizar operaciones. En este caso veremos los operadores aritméticos, los
cuales son de suma, resta, multiplicación, división, módulo o residuo,
incremento y decremento. Cada uno de ellos tiene asociado un símbolo. En el
caso de la suma, es el símbolo de la cruz. En el caso de la resta, es el símbolo del
guión. En el caso de la multiplicación, es el símbolo del asterisco. Para el caso de
la división tenemos la diagonal, para el caso de módulo o residuo tenemos el
símbolo de porcentaje, para los incrementos tenemos la doble cruz o símbolo
más, más. Y para el decremento tenemos el doble guión o símbolo de menos,
menos. Veamos ahora cómo podemos implementar el uso de cada uno de estos
operadores. Para el primer caso, como estaremos haciendo una suma,
simplemente vamos a agregar el símbolo cruz y vamos a escribir'datoB'. Para
este caso vamos a mandar a la consola el resultado de esta suma, así que
mostremos en este caso la suma de'datoA' más'datoB'es igual a
suma. Actualizamos nuestro navegador y vamos a ver como el resultado de 10
más 20 es igual a 30. Ten un poco de cuidado, aquí tenemos el uso de varios
símbolos. En el primer caso estamos haciendo una suma, aquí los números se
van agregando, pero cuando trabajamos en la consola el uso del símbolo de
cruz o símbolo de más simplemente sirve para pegar las cosas. Por eso es que
aquí nos aparece una secuencia de información bien armada. En el caso de la
resta, estaremos utilizando el símbolo de guión, así que veamos también como
se comporta. Aquí, en'datoA', vamos a restarle'datoB' y veamos a través de la
consola como se muestra este resultado. Aquí vemos que tenemos que 10
menos 20 es igual a -10. Esto es correcto. Revisemos ahora la multiplicación. De
la misma manera vamos a utilizar el símbolo asterisco, pero vamos a multiplicar
el'datoA' por el'datoB' y veamos cuál es el resultado que se estará
mostrando. En este caso, la multiplicación de'datoA' por'datoB' es igual a 200,
dado que 10 por 20 es igual a 200. Como te puedes dar cuenta, la operación se
está ejecutando de este lado. De manera similar queda para la división, donde
nosotros tenemos que agregar aquí el símbolo de diagonal y mandar el'datoB',
que es el que necesitamos dividir. Veamos cuál es el resultado. Aquí vamos a
mandar toda la consola, hagamos la prueba y vemos como el resultado de 10
entre 20 es igual 0, 5. Tenemos la otra operación que es el módulo. El módulo
no es más que el residuo que queda de una división. Si recuerdas, cuando
hacíamos una división tenías el resultado, que es la parte de arriba de la
división, y el residuo es lo que sobra, es decir, lo que quedó del resultado de
hacer esta operación. Así que vamos a evaluarlo. Y cuando nosotros hacemos la
evaluación de todo esto, tenemos que nosotros utilizar el símbolo de
porcentaje para poder hacer el cálculo de manera adecuada. Así que vamos a
guardar y vamos a probar. Y aquí tenemos como resultado 10, puesto que de 10
para 20 al momento de hacer la división nos están sobrando 10 elementos. El
incremento también es algo bastante simple. De hecho, lo único que tenemos
que hacer es escribir el incremento símbolo más, más. Por lo cual, lo único que
tengo que hacer aquí es escribir el nombre de la variable y poner los dos
operadores. Veamos ahora cuál es el valor de este incremento. Inicialmente,
como puedes ver, está asignado el valor'datoA'. Cuando nosotros lo enviamos,
'datoA'vale 10, pero en este caso, como estamos sumando 1, vale igual a 11. De
la misma manera va a funcionar cuando hagamos el decremento, pero aquí lo
que va a hacer es que va a estar decrementando de uno en uno el elemento, así
que veamos cuál es el valor ahora. El decremento de 10 es igual a 10, así que
vamos a asignarle el valor decremento menos, menos. Guardamos y con esto
vemos que ya tenemos un valor de 9. Esto es igual a decir como si yo tuviera
incremento, que es igual a incremento más 1. Y lo mismo pasa con el
decremento, que es como si yo tuviera escrito 'decremento' es igual
a'decremento' menos 1. Como puedes ver, utilizar esta manera abreviada nos
puede facilitar muchísimo la vida y el proceso de trabajo. Ahora, entonces, ya
conoces todos los operadores aritméticos que puedes utilizar a lo largo de tu
aplicación.

JavaScript y los operadores relacionales

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los operadores relacionales me van a permitir validar o definir el tipo
de relaciones que existen entre dos entidades. Al aplicar este tipo de
operadores, siempre obtendremos un valor "booleano", el cual puede ser "true"
o puede ser "false". Para este caso tenemos distintas operaciones. Por ejemplo,
la operación'mayor que' donde utilizaremos un pico paréntesis que apunta a la
derecha. La operación'menor que', donde ocuparemos el pico paréntesis que
ocupa al lado contrario. La operación'mayor o igual que', donde estaremos
ocupando el mismo pico paréntesis pero utilizando el símbolo de
igual. En'menor o igual', que estaremos ocupando el símbolo contrario. En el
caso de'igual que', utilizaremos dos símbolos de igual. Aquí debemos tener
cuidado, puesto que cuando nosotros queremos asignar un valor, solamente
utilizamos un igual y en este caso estamos haciendo una validación de una
relación, por lo cual tendremos que ocupar dos símbolos de igual. Y para el
caso de'no es igual que', entonces nosotros utilizaremos el símbolo de
exclamación seguido del símbolo igual. Comencemos a trabajar
rápidamente con el valor del'datoA'. En este caso vamos a tratar de ocupar y
vamos a validar si'datoA' es mayor que el'datoB'. Para poder tener esta
validación y revisar cual es el resultado, vamos ejecutar este valor en
consola, donde tendremos que si'datoA' es mayor que, y vamos a ver qué
resultado sale. En este caso es 10 el valor de'datoA', mayor que 20 el valor
de'datoB', por tanto me sale "false". ¿Qué sucede si yo cambio los valores? Voy
a agregar un cero más al'datoA', hacemos nuevamente la validación, y ahora
sí, 100 es mayor que 20, claro. Y al momento de ser mayor, entonces el
resultado es "true". Voy a regresar el'datoA'a su estado inicial y vamos a probar
ahora el caso contrario. Así que probemos qué sucede con 'datoA' si es menor
que'datoB'. Mandemos un mensaje nuevamente a la consola y vamos a
probar. ¿Es 10 menor que 20? "True". Nosotros ya sabemos, entonces, que esa
condición es verdadera, es decir, es una condición que se está
cumpliendo. Revisemos el otro tipo de operador y también para este operador
vamos a mandar un mensaje en consola. Guardamos y probamos nuevamente y
vamos a preguntar: ¿es 10 mayor o igual que 20? Falso, porque simplemente
esa condición no se cumple. Pero ¿qué sucede si, por ejemplo, al'datoA' yo le
pongo 20? En este caso los dos son iguales, por tanto la condición aquí debería
de salir "true". Vamos a actualizar para comprobarlo. Listo, esto ha funcionado
correctamente. Regresemos el valor de'datoA'a su estado inicial y vamos a
probar ahora la operación contraria, que en este caso sería menor o igual que
B. Para esto también vamos a enviar un mensaje a la consola y vamos a probar
nuestro código. Aquí vemos donde dice: "¿Es 10 menor o igual que 20? True". Es
decir, la condición se está cumpliendo. Probemos ahora qué sucede si yo envío
todo hacia'datoB', es decir, vamos a probar si'datoA' es igual que'datoB'. Para
esto vamos a mandar también el mensaje a consola, revisamos y vemos que
esto es falso. De la misma forma, si yo cambio el valor del'datoA'a 20 o el valor
de'datoB'a 10, entonces yo hago la validación y aquí sí se cumple la
condición. Este tipo de operadores generalmente se utilizan cuando nosotros
necesitamos hacer validaciones de ciertas instrucciones y así poder decidir
qué camino se va a tomar. Revisemos la última operación que tenemos, donde
simplemente vamos a preguntar si no es igual o es diferente que. Actualizamos
nuestro navegador y vemos entonces que dice: "¿10 no es igual o es diferente
que 20? True". Claro, no es igual, por eso mismo la validación surge. Como ves,
entonces, tenemos distintos tipos de validaciones que podemos operar de
manera lógica. Aún así, nosotros aquí lo único que estamos haciendo es validar
la relación que existe entre ambos datos.

Qué son los operadores lógicos dentro de JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los operadores lógicos me van a servir para combinar la evaluación de dos
o más condiciones y, de hecho, nosotros estaremos también utilizando aquí los
operadores relacionales. Y también, este tipo de operadores lógicos, una vez
que son evaluados, me regresa un valor "booleano", es decir, un "true" o un
"false". Aquí tenemos tres distintas variantes, uno es el operador Y, o en inglés
"AND". Otro es el operador O, o en inglés "OR". Y el otro es el operador de
negación o "NOT". Nosotros podemos utilizar también combinadas estas
evaluaciones. Si yo necesito utilizar una evaluación de un Y y un O en una
misma sentencia, puedo también utilizarla, no tengas miedo de experimentar
con ellas. Veamos ahora cómo quedaría la evaluación de un operador lógico
cuando estamos trabajando con el valor "AND". En este caso, lo que yo quiero
hacer es guardar en la variable "AND" el resultado de esta evaluación. El
símbolo que estaremos utilizando aquí es el doble "ampersand". Este doble
"ampersand" lo que significa es Y y es la manera técnica de escribirlo. En este
caso vamos a decir: es'datoA'mayor que 10 y'datoB'mayor que 10. Es decir, va a
evaluar primero esta condición y también va a evaluar la otra condición. Si
ambas condiciones se cumplen, entonces esto quiere decir que el valor sería un
"true". Y en caso de que no se cumplan, entonces el valor sería un
"false". Vamos a hacer la evaluación y veamos qué nos dice. El resultado de la
evaluación "AND" es "false", ¿por qué?, porque'datoA' ¿es mayor que 10? No,
no es mayor que 10. De entrada ya sabemos que no se va a cumplir la
condición. Y'datoB'¿es mayor que 10? Sí, esa condición sí se cumple. ¿Qué
sucede si yo aquí al valor A le agrego un número más? Ejecutamos y ahora sí
estoy forzando a que mi condición se cumpla. Regresaré el valor a su estado
inicial y ahora vamos a probar el otro operador. El otro operador lo podemos
utilizar nosotros trabajando directamente con el símbolo que corresponde a
"OR" y ese símbolo es el doble "pipe". Este doble "pipe" nos va a servir para
hacer esta evaluación. Pero lo que estaremos aquí evaluando es si se
cumple esta condición o esta condición. Es decir, con que se cumpla una de las
dos entonces todo va a suceder correctamente. Vamos a ver qué sucede
entonces una vez que se ha evaluado esta condición. Actualizamos nuestro
navegador y vemos que dice el resultado de la evaluación "OR" es
"true", porque la primera condición obviamente no se cumple y la segunda
condición sí se cumple. Entonces, con que se cumpla una condición, en este
caso, vamos a tener un valor "true". Ahora podemos ver que entonces la
evaluación de Y es muchísimo más estricta que la evaluación de "OR". Y ahora,
el otro tipo de evaluación que nosotros tenemos es la negación. En este caso
estaremos utilizando un símbolo de exclamación que cierra y ahora vamos a
hacer la evaluación. Lo único que yo estoy diciendo aquí es si esta condición
entonces no se cumple, así que vamos a revisarla, y me dice: el resultado de la
evaluación "NOT" es "true". Pero analicemos rápidamente qué sucede. Vemos
que el contenido de la evaluación, que en este caso sería'datoA' pregunta si es
mayor que 10. En este caso ambos son 10, y al ser 10 entonces el resultado de
esto sería un "false". Pero ¿qué sucede? Como estoy agregando aquí el símbolo
de admiración hacia abajo, entonces estamos cancelando o estamos
contrariando el resultado, por lo cual si nosotros habíamos tenido un "false"
entonces ahora tenemos un "true", como podemos ver aquí en pantalla. De esta
manera tenemos ya operadores lógicos que podemos estar utilizando y, como
puedes darte cuenta, estamos también integrándolo con operadores
relacionales. Así vas a poder hacer sentencias y operaciones muchísimo más
sofisticadas.

Cómo usar en JavaScript los operadores de asignación

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los operadores de asignación me van a permitir guardar el resultado de una
evaluación, de una operación o, incluso, solamente un valor dentro de una
variable. El valor más simple que tenemos nosotros es el símbolo de igual, que
en este ya hemos trabajado previamente y lo que estaríamos mostrando aquí es
como se estará guardando o almacenando en la variable igual el valor de este
contenido. Así que vamos a revisar que realmente se haya guardado el valor
10 en la variable igual. Actualizamos y vemos como dice: el resultado de la
asignación simple es 10. Esto es satisfactorio y es la operación más común que
tenemos. También yo tengo una operación llamada sumar y asignar, donde lo
que yo estoy haciendo es utilizar el operador más o símbolo de cruz y el
operador igual y aquí asignar el valor que yo quiero. Por ejemplo, yo puedo
aquí inicializar primero este valor de más igual con un valor de 10 y,
posteriormente, yo podré decirle 'masIgual' y aquí voy a asignar el valor que yo
necesite, en este caso pondremos el valor de'datoA'. ¿Qué sucede? Vamos a
probar rápidamente qué es lo que está pasando con esta variable. Aquí
nosotros vemos que el resultado de la asignación'masIgual'es 20, pero
realmente ¿qué sucedió? Veamos. El primer valor que teníamos almacenado era
el valor 10. Después de esto tenemos el símbolo'masIgual datoA'. ¿Qué
sucede? Esto es una manera muy simplificada de hacer esta
operación, 'masIgual' es igual al valor que se tiene en esta misma
variable más el'datoA'. Pero, como puedes ver, esta manera de escritura es
muchísimo más simple y más sencilla que poder escribir esta otra operación. De
esta misma forma, también tendremos nosotros el valor para cuando
nosotros queramos hacer un decremento. Por ejemplo, vamos a restar y
asignar. Vamos a hacer 'menosIgual' y pondremos el símbolo de guión menos
igual 'datoA'. Aquí, en este caso, mandamos a imprimir en pantalla y vemos
como obviamente el resultado de esta asignación es 0, puesto que el valor
de'datoA'es 10 y el valor que teníamos nosotros previamente era 10. Entonces,
10 menos 10 igual a 0. Lo mismo sucede cuando tenemos un'porIgual', es
decir, cuando queremos hacer una multiplicación. Vamos a asignar aquí
también un valor de 10 y vamos a hacer nuestra operación, donde vamos a
mandar en la variable 'porIgual' y utilizaremos el símbolo de asterisco que se
refiere a la multiplicación, el valor de igual para asignar nuestro valor, y vamos a
enviar todo esto junto con'dato10'. Vamos a probar cual es el valor que se
tiene. Actualizamos nuestro navegador y vemos que tenemos como el resultado
el número 100. ¿Qué sucedió? 10 por 10 igual a 100. Y también vamos a tener
un'entreIgual', es decir, si queremos hacer una operación para una
división. Entonces, vamos a asignar primero aquí el valor 20 y después nosotros
aquí vamos a poner 'entre Igual', escribiremos el símbolo de diagonal, el
símbolo de igual para escribir esta operación de manera abreviada y pondremos
entonces aquí el nombre de la variable, 'datoA'. Vamos a mandar el resultado
de la operación y vemos como ahora dice el resultado de la
asignación 'diagonalIgual'es 2. ¿Qué sucedió? Se dividió este valor entre el valor
que teníamos y y nosotros tenemos ahora como resultado 2. De esta manera,
podemos hacer operaciones aritméticas de una manera simplificada y, a la vez,
estar asignando los valores en las variables que corresponden.

En qué consiste el operador negativo

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El operador negativo lo único que va hacer es cambiar el signo del valor que se
estará almacenando. En este caso, por ejemplo, tenemos un valor'datoA'que
guarda 10 y un valor'datoB' que guarda a'datoA'. Es decir, ambos guardan el
valor 10. Vamos a mostrar esto en pantalla rápidamente y vemos como dice: el
valor de'datoA'es 10. Tenemos un texto que nosotros agregamos, donde dice:
después del operador negativo, 'datoB'es 10. Pero ¿qué sucede?, aquí no hemos
hecho ningún cambio, lo estamos poniendo solamente de
ejemplo. Ahora vamos a aplicar el símbolo del operador negativo para
el'datoA'cuando lo asignemos en la línea 7 al valor del'datoB'. Lo único que
hacemos es antes del valor de'datoA'es escribir el símbolo de guión. Con esto
ya estamos cambiando el signo, así que vamos a probar nuestro código y
vemos como ahora dice: el valor de'datoA'es 10. Y después del operador
negativo –y aquí lo tengo mal escrito, voy a corregir rápidamente– actualizamos
nuestro navegador y ahora sí podemos leerlo correctamente. El valor
de'datoA'es 10. Después del operador negativo, 'datoB' es igual a menos 10. De
esta manera, podemos ver que este valor cambia simplemente con asignar el
símbolo negativo antes de almacenarlo en una variable. Así que es necesario
que analices muy bien en qué circunstancias puedes ocuparlo, pues a veces
necesitas un dato completamente positivo o a veces también vas a necesitar un
dato negativo o estar convirtiendo estos datos. Así que ya sabes: asignando este
operador de guión previo al almacenado del valor en una variable, entonces
podrás cambiar el signo y toda tu operación podrá salir correctamente.

Operador de concatenación en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El operador de concatenación nos va a servir para poder unir dos textos o
unir dos valores. No va a realizar ninguna operación aritmética, a menos que los
datos que nosotros estemos uniendo sean números. Por ejemplo, en el primer
caso nosotros vamos a tener una concatenación de números. Cuando tenemos
una concatenación de números estamos utilizando el operador que es el
símbolo de más, pero cuando tenemos los números lo que vamos a obtener de
resultado será una operación aritmética. Vamos a revisar qué sucede. En este
caso vamos a sumar los valores de A y'datoB'. Como vemos, tenemos el
resultado de una operación aritmética, que es 10 y 20 es igual a 30, pero
tenemos otra combinación u otro tipo de combinaciones. ¿Qué sucede, por
ejemplo, si estos dos datos no son números y simplemente son letras? Al
encapsular el dato en comillas lo estamos convirtiendo en una cadena
de texto, así que aquí, en lugar de que diga 30, dirá 1020. Listo. Actualizamos y
vemos como cambia ese valor. Debemos tener cuidado con eso
precisamente, pero siempre nos va a servir para hacer más cosas. Por
ejemplo, ¿qué sucedería si yo al momento de hacer la concatenación de texto lo
que quiero es mandar el nombre y el apellido? Entonces, aquí sí nos va a
funcionar correctamente este tipo de concatenación. Vamos a probar y vemos
como tenemos nosotros donde dice: "Los textos Sergio y Brito se unen para
formar: SergioBrito". Pero aquí tenemos un detalle: no hay un espacio que los
esté separando. Entonces, simplemente vamos a agregar otro operador de cruz
o símbolo de más, escribiremos un par de comillas y en medio dejaremos un
espacio. Sí, tenemos que pensar en todo para que todos estos elementos se
pueden desplegar correctamente en pantalla. Voy a modificar un poco la
pantalla que tengo aquí y vemos como ahora dice: "Los textos Sergio y Brito se
unen para formar: Sergio Brito" y ya tiene el espacio considerado en
medio. También yo puedo hacer una concatenación de números,
como habíamos indicado en la primera parte y, en este caso, vamos a mandar el
resultado de 2 y 8. ¿Y qué sucederá cuando tenemos este resultado de 2 y
8? Pues simplemente, al momento de pegar estos valores vamos a obtener
obviamente estos dos textos pegados, es decir, los números 2 y 8 usados como
texto se unen para formar 28. Cuidado, no estás haciendo una operación
aritmética. También, si yo quiero hacer la combinación de lo que sería un dato,
es decir, un valor numérico y una cadena de texto, entonces todo esto se va a
volver una cadena de texto. Claro, no se puede realizar una operación y
entonces el motor de JavaScript es lo suficientemente inteligente como para
decidir cuál es el dato que se va a mostrar. Así que vamos a ver qué sucede. En
este caso, el número'datoA' usado como texto –perdón, debe decir como
número– y 8 como texto se unen para formar, y vamos a ver qué sucede, y en
este caso el número 10 usado como número y 8 usado como texto se unen para
formar 108. Como ves, la operación aritmética solamente sucede cuando son
dos números, pero cuando es la combinación de un número de un texto o de
dos textos, entonces estos simplemente se unen. De esta manera, ya estás
utilizando un operador de concatenación.

Cómo trabaja en JavaScript el operador ternario o condicional

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El operador ternario o condicional es un operador compuesto que me va a
permitir hacer dos operaciones en una sola. Una de ellas es hacer una
evaluación de los datos y, dependiendo de este resultado, hacer la asignación
de un valor. Por ejemplo, yo puedo tener en este caso el'datoA'y el'datoB', que
en este caso valen 10 y 20. Para esta situación, yo lo que quiero es preguntar
cuál es el mayor y que me guarde una cadena de texto en ese resultado, pero
primero necesitamos entender cuál es la sintaxis para escribir este operador
ternario. En este caso, lo que utilizaremos es primero una condición, seguido del
símbolo de interrogación. Si esta condición se llega a cumplir, entonces el
resultado de "true" iría en esta sección, el cual separaremos del resultado de
"false" o del resultado que sea incorrecto utilizando el símbolo de dos
puntos. Para realizar esta condición o esta evaluación podemos utilizar nosotros
operadores relacionales u operadores lógicos, cualquiera de ellos con los que
me acomode o que sirvan para poder cumplir el objetivo que yo quiero
lograr. En este caso vamos a estar haciendo lo siguiente. La evaluación o
condición en este caso es: 'datoA'es mayor que'datoB'. Si es así, entonces
escribo el símbolo de interrogación. Si todo es correcto, es decir, si esta
condición se cumple, entonces guardaremos el valor 'si es mayor' en la
variable'resultado'. En caso contrario de que esta condición no se
cumpla, entonces voy a mandar la cadena de texto "No es mayor" y esto lo
estaré separando por los dos puntos. De esta manera estoy haciendo la
evaluación y asignación de un valor directamente en una sola línea de
código, pero, ten cuidado, procura no hacer un uso excesivo de este
operador cuando lo que realmente necesitas hacer es una operación que va a
derivar en muchas otras, es decir, cuando tengas muchas decisiones que
tomar. Ahora vamos a probar qué sucede o cómo se muestra el valor
directamente en nuestro navegador. Guardamos y actualizamos y, una vez que
lo hacemos, dice: "El resultado con el operador ternario u operador condicional
es: no es mayor". Quiere decir que esta condición de'datoA' mayor a'datoB' no
se cumplió. Vamos a cambiar un poco los valores y vamos a ponerle ahora al
valor de'datoA'110. Actualizamos y ahora esta condición sí se cumplió, puesto
que'datoA'ya es mayor que'datoB'. Así, entonces, ya tenemos un operador
ternario implementado.

Operador de tipo de datos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Bajo ciertas circunstancias necesitarás evaluar el tipo de dato con el cual estás
trabajando, porque a veces necesitamos que el dato que estemos almacenando
sea un número o una cadena de texto o un valor "booleano". Para esto,
nosotros tenemos un operador de tipo de datos. Este operador de tipo de datos
se llama 'typeof' y vamos a utilizarlo ahora. Primero vamos a revisar aquí en
pantalla los datos que tenemos nosotros previamente registrados. El primero de
ellos es el'datoA', que tiene un valor 10 y es un número. El segundo de ellos es
el dato'Playa', que está guardado en la variable'nombre'y es una cadena de
texto. El tercero podemos ver que es un valor "booleano" con un valor'true' y el
cuarto es un tipo de dato objeto que tiene dos propiedades adentro; una de
ellas, un número, y la otra, una cadena de texto. Ahora utilicemos nuestro
operador. Para el primer caso vamos a utilizarlo de la siguiente
manera: mandemos a la consola el valor'typeof'de'datoA'. Actualizamos nuestro
navegador y vemos como me dice que es un número, así coincide con el dato
que nosotros tenemos aquí. Ahora veamos qué sucede cuando yo estoy
trabajando con una cadena de texto, en este caso yo lo envío y me dice que el
tipo de dato de'nombre'es un'string'. Recuerda, estos tipos de datos están
dados en inglés. Ahora veamos cuál es el tipo de dato que me va a regresar
para la variable'activo'. Actualizamos nuestro navegador y vemos que me indica
que es un valor "booleano". Repitamos esta misma operación para el
objeto'persona'. Vamos a escribir'typeof persona' y de esta manera yo puedo
ver que el resultado es un'object'o un objeto. Nosotros aquí podemos estar
preguntando siempre si'typeof persona'es igual a'object', entonces voy a poder
hacer tal situación. O, en algún caso, si'typeof'para el caso del número 'datoA'es
igual a'number', entonces voy a poder hacer otra situación, o no hacerla, para
eso me va a servir'typeof'. En este caso vamos a trabajar
ahora para'persona'. Vemos que ya teníamos un objeto, pero también puedo yo
hacer la evaluación de cada una de sus propiedades, así que veamos qué
sucede cuando yo mando'persona. edad'. Al hacerlo, vemos que tenemos un
valor numérico. ¿Qué sucede? Este valor objeto, adentro de sí, puede almacenar
otro tipo de datos. En este caso, 'edad', con un valor 34, es un número, por eso
me regresa el valor'number'. Y ahora veamos qué sucede cuando nosotros
invocamos la propiedad'deporte'utilizando'typeof'. Tenemos una cadena de
texto. Con esto nosotros ya pudimos implementar el operador de tipo de
datos 'typeof' directamente aplicado a cualquiera de las variables que nosotros
tenemos y así determinar el tipo de dato que tiene cada una de ellas.

Cómo usar en JavaScript la condición if-else

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Nuestro principal objetivo como programadores es llevar la vida real a
código, es decir, hacer metáforas de tal forma que lo que sucede en el mundo
real pueda suceder a nivel de código. Para esto nosotros entendemos cómo
funcionan los procesos y tratamos de plasmar su flujo en el código con
situaciones muy simples, como cuando vas a cruzar la calle, tú te detienes al
borde y volteas a ver a un lado o volteas a ver al otro, te preguntas si vienen
autos o no vienen autos. En caso de que no vengan autos puedes cruzar, pero
en caso de que sí vengan autos no cruzas. Estas son decisiones simples. Pero
¿qué sucede cuando tratamos de agregar más complejidad? Por
ejemplo, siguiendo este mismo caso, primero nos preguntamos sobre si vienen
o no autos, posteriormente nos podemos preguntar si vienen o no vienen
motocicletas y, por último, podemos preguntarnos si vienen o no vienen
bicicletas. De esta manera, tenemos distintas decisiones que tomar en un solo
momento. Cuando trabajamos en nuestro código, llevar este flujo es realmente
sencillo, ya hemos trabajado en una condición simple donde al hacer la primera
evaluación, si esta resulta verdadera nos muestra este mensaje. En caso de que
no se cumpla, nos muestra este otro mensaje. Pero ¿cómo podemos agregar
más? Tenemos una opción que sería copiar toda esta estructura, pero, la verdad,
no sería lo mejor. Lo que tendremos que hacer es utilizar una variante de esta
estructura donde nosotros podemos preguntar inmediatamente una nueva
condición. Por ejemplo, tendremos que escribir 'else' y de nuevo la palabra
reservada'if' y entre paréntesis podemos preguntar alguna nueva
condición. ¿Qué tal si en esta condición preguntamos si'datoB'es igual
a'datoA'? Aquí, yo simplemente voy a poner mi grupo de acciones y después
puedo dejarlo ligado directamente a esta condición. Aquí, yo puedo mandar la
instrucción 'resultado' es igual a "Segunda evaluación verdadera". ¿Qué quiere
decir? Si se cumple esta condición, entonces'resultado'obtiene esta
respuesta. En caso de que no se cumpla, preguntamos una segunda
condición, y aquí si esto es verdadero entonces guardamos en la
variable'resultado' el texto "Segunda evaluación verdadera". Vamos a
probarlo. Actualizamos nuestro navegador y vemos que el resultado en pantalla
dice: "El resultado de la evaluación'if-else-if' es: no se cumplió ninguna
evaluación". ¿Y esto por qué? ¿Es'datoA'mayor que'datoB'? Si'datoA' vale 10
y'datoB'igual a 20, entonces esta condición no se cumple. Entonces, vas a
preguntar en la siguiente parte: ¿es'datoB'igual a'datoA'? Tampoco se
cumple, entonces nos deja esta otra condición. Si nosotros cambiamos, por
ejemplo, y vamos a hacer que'datoA'sea igual a 30, aquí se va a cumplir la
primera condición y el texto nos lo va a indicar. De la misma forma, si yo lo
cambio y hago que los datos sean iguales. Una gran ventaja que tiene esta
estructura es que nosotros podemos agregar tantas evaluaciones
necesitemos, por lo tanto yo voy a agregar aquí unas cuantas más y podemos
agregar todas las que necesitemos para que el flujo de nuestra
información pueda seguir su camino correctamente. Este tipo de estructuras
pueden resultar muy complejas, mi recomendación es que hagas un uso
adecuado de ellas. ¿Cómo? Haciendo una planeación adecuada de todo el flujo
de datos que vas a tener a lo largo de tu aplicación.

Condición if-else JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
A veces necesitamos reaccionar en caso de que la condición no se haya
cumplido. Es decir, si la condición se cumple, podemos realizar cierta cantidad
de acciones. Pero si la condición no se cumple, entonces necesitamos hacer otro
tipo de acciones. Para este caso tenemos aquí una condición'if', simplemente
vamos a complementarla con la palabra reservada'else' y vamos a abrir otro
conjunto de llaves. Con esta parte tenemos, entonces, lo que va a suceder en
caso contrario, es decir, si esta condición se cumple se van a ejecutar estas
acciones. En este caso, en la variable'resultado'se guardará la información "La
condición se cumplió". Pero ¿qué va a suceder en caso de que no se cumpla? Y
entonces para eso tenemos este otro bloque y aquí vamos a guardar en la
variable'resultado' el texto "La condición no se cumplió". Así que ahora vamos a
revisar esta evaluación compuesta, y cuando nosotros revisamos vemos que
dice: "El resultado de la evaluación'if-else' es: la condición no se cumplió". ¿Qué
quiere decir? Que al no cumplirse esta condición, esta sección o el bloque de
instrucciones que existen aquí no se pudieron ejecutar, por lo tanto la misma
estructura de control busca cuál es la siguiente opción. Como nosotros tenemos
determinada la opción'else', es decir, en caso contrario o de lo
contrario, entonces se realiza este otro conjunto de acciones. De esta manera
puedes entender ya cómo es que este tipo de estructuras de control te ayudan
a organizar el flujo de datos a través de tu aplicación, y esto te va a
facilitar mucho más el proceso de desarrollo de una aplicación.

Cómo usar en JavaScript la condición if-else

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Nuestro principal objetivo como programadores es llevar la vida real a
código, es decir, hacer metáforas de tal forma que lo que sucede en el mundo
real pueda suceder a nivel de código. Para esto nosotros entendemos cómo
funcionan los procesos y tratamos de plasmar su flujo en el código con
situaciones muy simples, como cuando vas a cruzar la calle, tú te detienes al
borde y volteas a ver a un lado o volteas a ver al otro, te preguntas si vienen
autos o no vienen autos. En caso de que no vengan autos puedes cruzar, pero
en caso de que sí vengan autos no cruzas. Estas son decisiones simples. Pero
¿qué sucede cuando tratamos de agregar más complejidad? Por
ejemplo, siguiendo este mismo caso, primero nos preguntamos sobre si vienen
o no autos, posteriormente nos podemos preguntar si vienen o no vienen
motocicletas y, por último, podemos preguntarnos si vienen o no vienen
bicicletas. De esta manera, tenemos distintas decisiones que tomar en un solo
momento. Cuando trabajamos en nuestro código, llevar este flujo es realmente
sencillo, ya hemos trabajado en una condición simple donde al hacer la primera
evaluación, si esta resulta verdadera nos muestra este mensaje. En caso de que
no se cumpla, nos muestra este otro mensaje. Pero ¿cómo podemos agregar
más? Tenemos una opción que sería copiar toda esta estructura, pero, la verdad,
no sería lo mejor. Lo que tendremos que hacer es utilizar una variante de esta
estructura donde nosotros podemos preguntar inmediatamente una nueva
condición. Por ejemplo, tendremos que escribir 'else' y de nuevo la palabra
reservada'if' y entre paréntesis podemos preguntar alguna nueva
condición. ¿Qué tal si en esta condición preguntamos si'datoB'es igual
a'datoA'? Aquí, yo simplemente voy a poner mi grupo de acciones y después
puedo dejarlo ligado directamente a esta condición. Aquí, yo puedo mandar la
instrucción 'resultado' es igual a "Segunda evaluación verdadera". ¿Qué quiere
decir? Si se cumple esta condición, entonces'resultado'obtiene esta
respuesta. En caso de que no se cumpla, preguntamos una segunda
condición, y aquí si esto es verdadero entonces guardamos en la
variable'resultado' el texto "Segunda evaluación verdadera". Vamos a
probarlo. Actualizamos nuestro navegador y vemos que el resultado en pantalla
dice: "El resultado de la evaluación'if-else-if' es: no se cumplió ninguna
evaluación". ¿Y esto por qué? ¿Es'datoA'mayor que'datoB'? Si'datoA' vale 10
y'datoB'igual a 20, entonces esta condición no se cumple. Entonces, vas a
preguntar en la siguiente parte: ¿es'datoB'igual a'datoA'? Tampoco se
cumple, entonces nos deja esta otra condición. Si nosotros cambiamos, por
ejemplo, y vamos a hacer que'datoA'sea igual a 30, aquí se va a cumplir la
primera condición y el texto nos lo va a indicar. De la misma forma, si yo lo
cambio y hago que los datos sean iguales. Una gran ventaja que tiene esta
estructura es que nosotros podemos agregar tantas evaluaciones
necesitemos, por lo tanto yo voy a agregar aquí unas cuantas más y podemos
agregar todas las que necesitemos para que el flujo de nuestra
información pueda seguir su camino correctamente. Este tipo de estructuras
pueden resultar muy complejas, mi recomendación es que hagas un uso
adecuado de ellas. ¿Cómo? Haciendo una planeación adecuada de todo el flujo
de datos que vas a tener a lo largo de tu aplicación.

Condiciones anidadas con JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una característica también muy importante que ofrece JavaScript es la
versatilidad y flexibilidad que ofrece como lenguaje. Por ejemplo, ¿qué sucede si
tú necesitas dentro de una estructura de control anidar otra estructura de
control o viceversa? Bueno, esto es posible, de hecho es posible casi en
cualquier lenguaje de programación. ¿Y a qué me refiero con esto? Si tu tienes
una estructura'if' y adentro de esta necesitas tú meter otra estructura'if' y
adentro de esta otra más, o incluso algunas estructuras de control
distintas como puede ser un'switch', un'do', 'do while', etc., esto puede ser
posible, así que no temas anidar cuantas estructuras necesites. Pero,
recuerda, siempre debes planear correctamente el flujo de tu aplicación para
que no estés anidando muchas estructuras innecesariamente y esto pueda
afectar el "performance" de tu aplicación. Veamos algo muy sencillo: ¿cómo
podemos lograr tener aquí una estructura anidada? Pues de una manera muy
simple. Por ejemplo, vamos a trabajar con una estructura anidada si esta
condición se cumple. Por ahora, solamente estoy ejecutando esta acción, así
que justo debajo de'resultado'y antes de cerrar este bloque vamos a escribir
una nueva condición donde yo puedo preguntar algo nuevo: 'if''datoA'es menor
que'datoB', entonces'resultado' va a ser "Evaluación anidada verdadera". De lo
contrario, va a ser el resultado "No se cumplió la evaluación anidada". Primero
vamos a ver qué sucede en esta situación, así que aquí yo voy a mandar el
resultado y vemos que me dice: "El resultado de la evaluación anidada es: no se
cumplió la evaluación". Veamos cuál es la estructura donde se ejecuta esta
acción y vemos que obviamente al principio: ¿'datoA'es mayor que'datoB', es
decir, 10 es mayor que 20? No. Y, por tanto, nos vamos al primero de los que
teníamos. Ahora vamos a hacer esto un poco más simple, vamos a agregar una
tercera variable. Vamos a escribir aquí 'datoC' y vamos a poner'datoC' igual
a 5 y también vamos a subir el valor que está almacenado en la
variable'datoA'. Para esto, simplemente voy a agregar 1 para que sea 110. Con
esto estoy garantizando que esta condición sí se va a cumplir, es
decir, ¿'datoA'es mayor que'datoB'? Sí, se cumple, por tanto el valor
de'resultado'se debe mostrar. Ahora, ¿qué sucede aquí cuando yo tengo esta
siguiente condición? Vamos a revisar la evaluación que existe y vemos como
ahora me dice que no se cumplió la condición anidada, es decir, viene y
pregunta primero esto. Obviamente, como no se pudo ejecutar, estamos
almacenando esta siguiente opción, pero ya estamos trabajando sobre esta
estructura de control. Ahora vamos a hacer esta comparación de'datoA'es
menor que'datoB', pero vamos a cambiarla por el valor'datoC'que acabamos de
agregar. Así, entonces, esta condición va a resultar ser cierta. Probamos
nuevamente y vemos como dice: "El resultado de la evaluación anida la
es: evaluación anidada verdadera'. Quiere decir que se pudo ejecutar hasta este
nivel. Y también en este caso podemos anidar tantas estructuras queramos. Por
ejemplo, podemos ponerlas directamente en esta sección o también podemos
ponerlas en esta sección y a la vez podemos agregar todavía más y más
estructuras. Pero, como ves, el código se empieza a ver muy complejo. Así que,
insisto, ten mucho cuidado y planea muy bien tu aplicación para que evites
tener código que sea muy difícil de leer o que simplemente te esté causando
muchos problemas.

JavaScript y la estructura Switch

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando el uso de condiciones se vuelve demasiado abrumador, es decir, yo ya
tengo demasiadas variantes del uso de'if', 'if-else'o'if-else-if' o tengo
demasiadas condiciones anidadas, es momento de pensar en otra estructura de
control para manipular de una manera más adecuada la información. Para esto
existe la estructura'switch'. Si estás trabajando con Visual Studio Code o con
algún editor de texto, generalmente te ofrecen la opción donde tú podrás
escribir simplemente el nombre de la estructura que quieres escribir y al
seleccionarla te completa toda la forma que va a tener. En este caso podemos
ver que tenemos una palabra'case', una palabra'break', 'default'y otra vez
un'break'. Pero, para poder entender esto de una manera más simple, vamos a
trabajarlo a través de un ejemplo y para esto tenemos preparada aquí una
estructura de control'switch'con ciertos valores. Por ejemplo, vamos a validar la
edad y para esto tenemos varios casos: cuando se presente un caso de 10 o un
caso de 20 o un caso de 30, o utilizaremos la parte de'default' cuando no se
presente ningún caso. En esta situación, por ejemplo, la edad vale 30, por tanto
la estructura de control internamente pregunta: ¿coincide con el'case
10'? No. Entonces, continúa: ¿coincide con el'case 20'? No. Entonces,
continúa: ¿coincide con el'case 30'? Sí. Al coincidir con esto es porque el valor
que está contenido en'edad' es igual a 30, entonces está coincidiendo y por
tanto vamos a acceder a este "set" de instrucciones. Una vez que se ejecuta este
"set" de instrucciones, se ejecuta la opción'break', que quiere decir que va a
ignorar todo lo que está por debajo y va a continuar con la ejecución del
programa. Así que ahora vamos a probarlo y para esto voy a descomentar esta
línea donde tenemos un'console. log'con el'resultado'. Al momento de
ejecutarlo podemos ver que dice: "El resultado de la evaluación con números
es: la edad es 30 años". ¿Y qué pasa si yo lo cambio, por ejemplo, a
10? Entonces, ahora me va a decir: "La edad es 10 años", porque coincidió con
este caso. Pero ¿qué sucede por ejemplo si yo lo cambio a 40? Ahora, cuando
yo ejecuto dice: "Ningún caso coincide". Esto porque nosotros tenemos aquí
esta opción por defecto donde le estamos indicando a'switch' que si ninguno
de estos casos es válido, entonces agregue un valor por "default" o por
defecto. Ahora, también es posible que yo pueda agregar tantos'case'como
necesite, en este caso vamos a agregar un'case'para cuando sean 40
años, guardamos y actualizamos y vemos como ahora sí va a coincidir esta
opción, solamente voy a corregir este texto para que sea coherente. Y aquí tú
pues agregar tantos casos necesites, pero, de nuevo, al igual que como trabajas
con las estructuras de control de tipo condición, es necesario que planees bien
este flujo. Incluso aquí, adentro de cada uno de los bloques, tú puedes meter
más estructuras de control para estar controlando y manipulando el flujo de tu
información. Ahora, cuando nosotros queremos hacer una evaluación trabajada
con cadenas de texto, lo único que va a cambiar es que el valor al que apunta
cada uno de los casos va a estar encapsulado por un par de comillas para que
sea un valor de texto. En este caso tenemos el valor de'producto', que es'TV', y
tenemos el primer caso que corresponde a la'TV', el segundo caso que
corresponde a la'Radio'y el tercer caso que corresponde al'Teléfono'. Vamos a
quitar estos comentarios que tenemos en este mensaje, actualizamos nuestra
pantalla y vemos como el mensaje indica que "El resultado de la evaluación con
texto es: se eligió la TV". De esta misma forma, al igual que como trabajábamos
con el número, si yo tengo algún elemento que no coincida, como, por ejemplo,
'Tableta', aquí también nos va a agregar un valor por "default". Y aquí hay algo
muy interesante a considerar. Por ejemplo, ¿qué sucede si yo pongo aquí la
palabra'radio'? Cuando yo lo ejecuto vemos que me dice: "No se eligió ningún
producto", pero nosotros tenemos la palabra'radio'. Esto es'case sensitive', es
decir, es sensible al uso de mayúsculas y minúsculas, por tanto el'case Radio'que
nosotros estamos evaluando dentro del'switch' es con la erre mayúscula y acá lo
tengo con erre minúscula. Vamos a hacer la corrección, actualizo mi navegador
y vemos ahora que ya tengo el valor que corresponde a la situación'Radio'. De
esta manera podemos manejar decisiones un poco más complejas utilizando la
estructura'switch', y no olvides que puedes mezclarla o integrarla con otro tipo
de estructuras de control para mejorar el flujo de datos a través de tu
aplicación.

El ciclo for JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los ciclos son estructuras de control bastante sofisticadas, de hecho, nos sirven
para estar repitiendo acciones. Nosotros podemos tener distintos tipos de
ciclos, pero también a lo largo de todos los lenguajes de programación los
podrás encontrar con distintos nombres como ciclos, "loops" o iteradores. De
hecho, los ciclos son la manera ideal de estar repitiendo un conjunto
de acciones. En este contexto, cada vez que tú tienes una repetición lo podemos
conocer como una iteración. Así, nosotros podemos tener identificados dos
tipos de ciclos: los ciclos definidos y los ciclos indefinidos. Donde con los ciclos
definidos sabemos cuántas veces se va a ejecutar, al contrario, con los ciclos
indefinidos no sabemos cuántas veces se va a ejecutar. Un ejemplo de los ciclos
definidos son el ciclo'for' y de ciclos indefinidos son los ciclos'while'y'do
while'. Veamos ahora cómo vamos a trabajar con un ciclo'for'. En este caso
tenemos una variable de'productos' que tiene un valor 5 y lo que vamos a
hacer es mostrar en pantalla cada vez que estamos iterando sobre
el'producto'. Así que primero comencemos trabajando con nuestro código. Aquí
ya tenemos preparado un ejemplo de un ciclo'for', que es un ciclo definido. En
este caso, primero tenemos que utilizar la palabra reservada'for', después
podemos darnos cuenta de que esto se divide en tres partes y aquí
nosotros podemos entender cuáles son los componentes de un ciclo'for', que
son: contador, condición o evaluación, y el paso que puede ser un
incrementador o un decrementador. En el caso del contador, simplemente es el
elemento que nos va a servir de base para poder estar haciendo las repeticiones
o iteraciones. Después, la siguiente parte es la condición, en la cual nosotros
vamos a preguntar en qué estado nos encontramos para saber si continuamos o
no continuamos con la iteración. Y después de esto vamos a modificar el
contador con un paso, es decir, yo puedo ir agregando o eliminando
elementos para poder realizar la evaluación de una manera correcta. Y lo que
tenemos aquí entre estas llaves es el conjunto de acciones que vamos a estar
repitiendo, en este caso vamos a estar repitiendo este conjunto de
acciones cinco veces, porque esto se va a ejecutar mientras que el contador sea
menor que lo que hay en'productos', es decir, menor que 5. Pero, para poder
entender esto, vamos a utilizar una opción de nuestro navegador llamada
de'debugger'. El'debugger'me va a permitir a mí trabajar directamente en el
navegador y estar revisando qué sucede en cada paso y así podemos
entender de una mejor manera. Para esto puedes escribir la palabra'debugger' y
vamos a ejecutarla directamente en nuestro navegador. Una vez que
ejecutamos, nuestras ventanas se ponen de alguna manera diferente, así que no
te preocupes, lo primero que vamos a hacer será reorganizar esta parte para
que veamos qué está sucediendo. La parte clave que vamos a utilizar aquí será
esta sección llamada Watch, así que todas las demás las puedes contraer sin
ningún problema. Vamos a modificar un poquito los tamaños en pantalla y,
ahora sí, vamos a trabajar con este botón que aparece de este lado para ir
trabajando en cada iteración. Vamos a abrir la opción que dice Watch. Si, por
alguna razón, tienes algún elemento aquí colócate encima de él y pulsa en el
guión para eliminarlo. Si no tienes nada no te preocupes, ahora es cuando
vamos a agregarlo. Si te das cuenta, nosotros tenemos dos elementos con los
cuales estamos trabajando: 'productos'y'contador', así que vamos a agregarlos a
esta parte de la expresión. Pulsamos el símbolo de más y ponemos la
palabra 'productos', pulsamos nuevamente en el símbolo de más y vamos a
poner ahora 'contador'. Después damos un Enter y vamos a ver que es el valor
con el que están iniciando estos dos elementos. Ahora sí, vamos a pulsar en
este botón, que es ir trabajando en cada uno de los pasos. Así que pulsamos
nuevamente y vemos como nos estamos deteniendo aquí en la parte que
dice'contador', porque ya ejecutó la primera parte, y ahora va a sumar una vez
más al'contador'. El'contador'ahora vale 0. Cuando yo paso la siguiente
sección, pregunta: ¿es el'contador' menor que'productos'? Y vemos
que'contador'es igual a 1 y'productos'es igual a 5. Entonces, la condición se
cumple, por tanto podemos continuar. Esto se repite. Y si nosotros nos vamos a
la sección de la consola, en la consola podemos ver que dice'producto
0'. Regresamos a la sección que dice Sources y volvemos a repetir el
paso, así cada vez que nosotros estamos haciendo el paso podemos ver en esta
sección que está marcada como los valores van cambiando dependiendo de
cada iteración. Incluso, si tú colocas el "mouse" encima de las variables podrás
ver el valor que tiene en este momento, por lo tanto'contador'ahora tiene
2, volvemos a pulsar y volvemos a ejecutar. En este caso la condición se sigue
cumpliendo, el valor va cambiando, y si nosotros regresamos a la sección de la
consola podemos ver cuáles son todos los elementos que se están
imprimiendo. Así nosotros podemos terminar y cuando llegamos a la última
parte de iterar, en este caso'contador'vale 4, se hace el incremento de ese
valor y ya vale 5. Entonces, ahora va a hacer la pregunta en la
evaluación: ¿'contador' es menor que'productos'? Esto se procesa y obviamente,
como esta condición que no se cumple, entonces ya puede terminar
satisfactoriamente este ciclo. De esta manera nosotros hemos trabajado ya
correctamente con nuestro ciclo'for'.

JavaScript y el ciclo while

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La estructura de control'while' es un ciclo que me permitirá ejecutar un "set" de
instrucciones siempre y cuando una condición en específico se logre
cumplir. Para esto, vamos a trabajar con un ejemplo. Ahora nosotros tenemos
aquí una estructura'while'ya compuesta, vemos que tenemos esta palabra
reservada'while'. Siempre que nosotros necesitemos utilizar esta estructura de
control necesitaremos trabajar con esta palabra. Ahora, como veíamos, esta
condición necesita cumplirse para que este "set" de instrucciones puedan ser
ejecutados, así que ahora nosotros simplemente vamos a trabajar con esta
instrucción pero vamos a darle un sentido. En este caso vamos a poner que
cada vez que se esté ejecutando la instrucción se está vendiendo un
producto. Para apoyarnos en esto, vamos a utilizar el'debugger'que tiene
Google Chrome. Ahora, si guardamos y actualizamos nuestro navegador, una
vez que nosotros lo ejecutamos nuestro navegador va a cambiar un poco, así
que vamos a hacernos algo de espacio. Si te das cuenta, este'debugger'lo
estamos poniendo siempre al final para que con cada iteración se pueda
detener el ciclo y nosotros podamos observar los cambios directamente en esta
sección. Vamos a minimizar todas estas áreas y solamente vamos a abrir la parte
de Watch. El elemento que nos interesa estar revisando o evaluando es la
variable'productos', así que vamos a agregarlo en esta sección llamada
Watch. Como vemos, ahora dice'productos'es igual a 4. ¿Por qué? Puesto que
primero hizo la evaluación y preguntó: ¿'productos' es mayor que 0? Como sí es
mayor que 0, se mostró en consola'producto vendido'. Vamos a ver en consola,
aquí está el texto. Después de esto hizo un decremento del valor'productos', es
decir, de 5 le quitó un valor. Al quitarlo, tenemos este valor 4. Vamos a pulsar
ahora para continuar con el proceso. La marca azul que tú puedes ver en
pantalla es el paso en el que nos encontramos. Ahora volvemos a pulsarlo y
vemos como vuelve a preguntar: ¿es'productos'mayor que 0? Sí, como es mayor
que 0, porque ahora vale 3, entonces simplemente muestra en consola otra vez
este mensaje, después regresa a la sección de'productos' y lo va a decrementar
en un valor. Date cuenta como ahora vale 3, decrementamos y ahora vale
2. Volvemos a repetir y vuelve a hacer la pregunta. Cuando tenemos la
pregunta, esta condición todavía resulta ser válida. Como es válida, mostramos
el mensaje y volvemos a repetir, y así sucesivamente hasta que nos quedamos
sin productos. En este caso volvemos a entrar y cuando nosotros tenemos esta
situación del decrementador, aquí se va a decrementar en 1. ¿Qué quiere decir?
Que ahora vale 0. Entonces, ¿'productos'es mayor que 0? Como ya no es mayor
que 0, fíjate qué sucede con esta línea azul que es la que nos está indicando el
paso. Una vez que terminamos, vuelve a preguntar solamente. Como ya no se
cumple la condición, entonces el ciclo termina. De esta manera nosotros
podemos estar trabajando con un'while', pero fíjate muy bien, primero
pregunta si lo puede hacer y después hace las acciones. Esa es la clave de
trabajar con este ciclo: primero evalúa y después ejecuta.

El ciclo do...while
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El ciclo'do while'no es más que una variante del ciclo'while', solamente hay una
diferencia: dónde nosotros vamos a evaluar la condición. En el caso de'while', lo
primero que hacíamos era preguntar si podíamos ejecutar el conjunto de
acciones. Si la decisión era válida, entonces ejecutábamos. En este caso, con'do
while'lo primero que hacemos es ejecutar las acciones y después preguntar si
podemos continuar ejecutando las acciones. Así que debes tener mucho
cuidado con cuál de los dos ciclos vas a ocupar dependiendo del objetivo que
busques lograr en el flujo de tu aplicación. En este caso, lo primero que vamos a
trabajar será escribir la estructura. Como nosotros podemos ver aquí, la primera
sección que tenemos de un'do while'es la palabra reservada'do' y el conjunto de
acciones. La segunda parte es la palabra reservada'while' y la condición que
deseamos evaluar. En este caso, vamos a estar mostrando en consola la
leyenda'producto vendido' y cada vez que nosotros estemos ejecutando la
acción vamos a disminuir en 1 los productos que tenemos. Por tanto, la primera
vez que lo ejecutemos vamos a necesitar detenerlo en algún momento para
poder revisar paso paso, así que para esto vamos a utilizar el'debugger'de
Google Chrome. En este punto vamos a actualizar nuestro navegador y ejecutar
nuestra aplicación y vamos a mostrar directamente aquí el'debugger'. Si en la
sección de Watch no tenías ningún elemento, puedes agregarlo; si ya te aparece
alguno, solamente elimínalo y agrega el elemento con el cual vamos a estar
trabajando. En este caso, lo que nosotros vamos a usar como referencia es la
variable'productos', así que pulsemos en el símbolo de más para agregar la
expresión, solamente ponemos el nombre de la variable, 'productos', y vemos
que aparece con 4. ¿Por qué? Porque, siguiendo el mismo conjunto de
instrucciones, primero se ejecutó todo esto antes de preguntar la
evaluación. Vamos a ver qué sigue en el siguiente paso. En este caso, primero va
a preguntar: ¿es'productos'mayor o igual que 1? Nosotros podemos colocar el
cursor sobre el nombre de la variable y ves que aparecerá una ventanilla con el
número, en este caso un 4, que es el mismo que estamos observando
aquí. Entonces, ¿es 4 mayor o igual que 1? Sí. Y como esto es correcto, entonces
continuamos ejecutando. En este caso se muestra el mensaje en consola y se
decrementa en 1 el valor. Eso lo puedes identificar porque aquí tenemos 4 y
cuando pasamos por la instrucción de la línea 13 vemos como se decrementa al
valor 3 y regresamos nuevamente a ejecutar la condición. Esto resulta ser
válido, ¿es 3 mayor o igual que 1?, puesto que 3 es el valor que está
almacenado en'productos'. Sí. Como esta condición es válida, entonces
continúa, y así sucesivamente. Así que vamos a ver qué sucede una vez que
terminamos nosotros. Estamos ejecutando esta última acción
donde'productos'vale 1, lo voy a decrementar, ahora vale 0, y vamos a
preguntar en la condición: ¿es'productos'mayor o igual que 1? No, porque
ahora el valor es 0. Por tanto, cuando yo lo ejecuto una última vez, la instrucción
termina. Así, entonces, nosotros podemos ya tener el uso de un ciclo o
estructura de control'do while'donde lo primero que se va a hacer es ejecutar
un conjunto de acciones y después preguntar si se puede continuar o no. Así
que debes tener mucho cuidado en la manera en la que utilizas este tipo de
ciclos.

Controlar los ciclos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los ciclos son tan sofisticados que también nos permiten controlar el flujo que
van a tener. Es decir, si yo decido continuar e ignorar cierta cantidad de
instrucciones lo puedo hacer. O si simplemente yo decido romper el ciclo y
continuar, también lo puedo hacer. En este caso, para realizar este par de
operaciones, utilizaremos las instrucciones'continue' y las
instrucciones'break'. Aquí tenemos un ciclo'for', el objetivo de este ciclo'for' es
contar cuántos números impares existen en la numeración del 0 al 20, por eso
es que nuestro ciclo está apuntando al 20. Lo que vamos a hacer es lo
siguiente: vamos a escribir la instrucción'continue'en este'if'. Aquí lo que
estamos evaluando es si el residuo es igual a 0. Si el residuo de esta división es
igual a 0 significa entonces que el número es par, por tanto no necesitamos
modificar la parte de'cuenta'. Pero en este caso, si nuestro valor sí es un número
impar, entonces sí se va a ejecutar. Vamos a guardar y vamos a probar
directamente en nuestro navegador y vamos a agregar en la sección de
Watch los dos elementos con los cuales estaremos trabajando, que son
el'contador' y la'cuenta'. Fíjate bien qué sucede con esa sección azul, porque es
la que me está indicando el paso en el que nos encontramos. Así que vamos a
pulsar esta opción que se llama Step over para poder continuar. Vemos
ahora que la sección azul está marcada en la línea número 10, está
incrementando el'contador'. Una vez que lo incrementa, su valor ahora es 2 y
hace la evaluación: ¿'contador'es menor o igual que 20? Como esta evaluación
sí se cumple, porque'contador'vale 2, entonces ejecuta las instrucciones. Y lo
primero que pregunta es: ¿el residuo de esta división es igual a 0? Como esta
condición también se cumple, entonces entramos a la sección
de'continue'. Y'continue'¿qué nos dice? Ignora todo lo que sigue y continúa en
el siguiente paso. Entonces, si te das cuenta, el uso de'continue' es como tomar
un atajo hacia el siguiente paso, por eso mismo ahora ves que en esta sección
jamás pasó por la línea 12 y ahora ya podemos modificar el valor de'cuenta'. Y,
por tanto, el valor de'cuenta', que estaba en 1, ahora vale 2. Continuamos y
vemos como sí una vez va a entrar a'continue' y la otra vez lo va a ignorar. La
siguiente entra y la siguiente lo ignora, y así podemos ir contando hasta que
termine de repasar todo el ciclo'for' que tiene una secuencia de 20 veces. Esto,
como puedes ver, nos facilita a veces mucho controlar el flujo pero sin romper
la estructura de control. Ahora, ¿qué sucede si yo necesito romper esta
estructura de control? Para esto yo tengo la palabra reservada'break', así que
vamos a hacer por aquí un pequeño ajuste, vamos a preguntar si'contador' es
igual a 5. Si'contador'es igual a 5, entonces necesito que el ciclo se rompa, es
decir, que todo esto que está aquí ya no se pueda ejecutar y termine el flujo del
ciclo'for'. Vamos a guardar y vamos a actualizar nuestro navegador. Una vez que
tenemos actualizado el navegador, vamos a poner especial atención en el valor
de'contador', porque este solamente se va a ejecutar hasta que valga
5. Entonces, primero pregunta, no entra la condición, puedes ver como brinca el
paso, y así sucesivamente cuando vale 3, cuando vale 4 y ahora vale 5. Como
vale 5, entra y pregunta: ¿es'contador' igual a 5? Como sí es igual a 5, entonces
se rompe la instrucción y, al momento de romper, ya nos envía fuera del
ciclo. Entonces, quiere decir que ya ignora todos los pasos que seguían y
además ignora todas las demás evaluaciones que estaban pendientes. De esta
forma podemos controlar, ya sea con un'continue'o con un'break', el flujo de
todo ciclo.

Estructura básica de una función

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una función es un conjunto de instrucciones que podremos invocar a través de
un nombre clave. Por ejemplo, en un ser humano, la actividad de caminar es un
conjunto de instrucciones que combina distintas partes del cuerpo. Así, cuando
nosotros escuchamos la palabra caminar o pensamos en el término
caminar, todo nuestro cuerpo comienza a moverse. Es decir, hay muchas
instrucciones en nuestro cuerpo que están ligadas a la palabra caminar. En el
desarrollo de una aplicación web o una aplicación móvil trabajada
con JavaScript, nosotros podremos agrupar un conjunto de instrucciones y
después invocarlas a través de una palabra clave, esto es una función. También
es posible que a una función puedas escucharla con el nombre
de método, cualquiera de los dos nombres son adecuados. Por ahora vamos a
escribir una función simple. Para esto necesitamos la palabra
reservada'function'. Después de esto tenemos que escribir el nombre de la
función, para esta situación será la palabra'saludar', y estará seguida de un par
de paréntesis y de un conjunto de llaves. Aquí, adentro de estas llaves, es donde
nosotros indicaremos la instrucción que queremos ejecutar. En este caso, lo que
nosotros queremos hacer es guardar en la variable'saludo'el texto "Hola
mundo". Y si quisiéramos mostrar el contenido de esta variable, lo único que
tenemos que hacer es enviarlo a un'console. log'. Ahora, este conjunto de
instrucciones ya existe, solo nos resta invocarlo. Para hacerlo, lo único que
tendremos que hacer será escribir el nombre de la función, que en este caso se
llama'saludar', seguido del par de paréntesis. Con esto estaremos invocando
una función. Vamos a probarlo. Actualizamos nuestro navegador y vemos como
ya tenemos en consola un texto que dice: "Hola mundo". Así, entonces, ya
tenemos una función. Dicha función también podremos invocarla directamente
desde la consola. Para invocarla vamos a escribirla de la misma manera en como
la escribimos en el código y la podemos ejecutar. Vemos como la respuesta fue
la misma pero aquí tenemos algo adicional, un texto que dice:
"undefined". ¿Qué sucede? Por defecto, todas las funciones regresan algo, es
decir, si yo invoco a la función, la función tiene que procesar y tiene que
regresarme algo. En este caso, nosotros no estamos indicando que regrese
absolutamente nada, pero podemos hacerlo. Para esto vamos a escribir la
palabra reservada'return' y vamos a mandar el saludo. Así, ahora vamos a
comentar la consola y veamos qué sucede. Actualizamos nuestro navegador y
vamos a invocar directamente la función'saludar'. Vemos como ahora tenemos
en respuesta el texto "Hola mundo", puesto que la función ya me está
retornando o devolviendo un valor. De esta manera, has comenzado a escribir
ya tu primera función. Ya dentro del cuerpo de esta función puedes
invocar toda la cantidad de instrucciones que tú desees.

Parámetros de una función

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una función, además de procesar información y ejecutar instrucciones, también
puede recibir elementos con los cuales pueda trabajar. Puedes verlo como si
fuera una fábrica. Una fábrica para poder producir sus productos necesita de
ingredientes o implementos para poder trabajar. Estos vienen de fuera y se
procesan dentro de la fábrica. Así, una vez que termina todo este proceso, al
final tienes un producto ya formado. De la misma manera, las funciones pueden
recibir este tipo de implementos, que para este tipo de instrucciones le
llamaremos parámetros. En este caso, nosotros tenemos la función'saludar' y
vamos a enviarle dos parámetros. De hecho, podemos enviarle desde uno hasta
N cantidad de parámetros. Para esta situación vamos a recibir primero un
parámetro que se llame'nombre' y después vamos a recibir un parámetro
llamado'edad'. Esto quiere decir que cuando yo esté invocando la
función'saludar' debo enviarle estos dos parámetros. Así, en esta parte del
programa donde estoy invocando la función'saludar', voy a enviar como primer
parámetro un nombre, en este caso voy a enviar mi cuenta de Twitter 'yakaFx' y
después voy a enviar mi edad. Si te das cuenta, en este caso el mismo editor de
código Visual Studio Code me está diciendo cuáles son los parámetros que yo
necesito enviar. Una vez que ya tengo esto enviado, vamos a mostrarlo
directamente en la función. Así que en esta parte voy a eliminar la sección del
saludo y voy a mostrar en consola estas dos invocaciones. Vamos a probarlo, y
una vez que actualizamos nuestro navegador podemos ver como el primer
texto dice: "Hola", nombre, e interpreta el valor que contiene, que es'yakaFx'. Y
el siguiente dice: "Edad: 34". El primer tipo de dato, como puedes ver, es una
cadena de texto y el segundo es un número. También, las funciones en este tipo
de casos necesitan retornarnos un valor. Como ya habíamos visto, todas las
funciones retornan un valor. Para esta situación, vamos a crear una
variable'resultado' y vamos a retornarla. Para esto escribiremos la palabra
reservada'return' y enviaremos la sentencia de'resultado', que no es más que un
mensaje que indica 'nombre', en este caso'yakaFx', 'tiene' 'edad', en este caso
34 años. Es una cadena de texto completa y, de hecho, algo que podemos hacer
y que será un recurso que usarás ampliamente es el hecho de crear una
variable, en este caso la llamaremos'mensaje' y asignaremos el valor que nos
esté retornando'saludar'. Vamos a mostrar aquí el mensaje'saludar' y
escribiremos'console. log mensaje'. En este caso tengo la palabra mensaje mal
escrita, así que vamos a escribirla correctamente y vamos a probar nuestra
función. Al momento de probarla podemos ver como precisamente aquí, en la
línea 16, que es esta que acabo de escribir, dice: "yakaFx tiene 34 años". En este
caso ya pudimos enviar valores a través de los parámetros a una función y tener
un resultado, es decir, enviamos implementos o elementos con los cuales la
función puede trabajar y nos retornó un resultado, que para esta situación fue
un mensaje el cual compuso dentro de la función. Así, entonces, ya puedes
manejar parámetros en tus funciones.

Inicialización de parámetros
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas veces nos encontraremos en la situación en que al momento de utilizar
una función no necesitemos enviar valores de un parámetro aunque la
función tenga declarado que va a recibir un parámetro. Es decir, existirán ciertas
circunstancias donde el mismo algoritmo que nosotros hayamos armado pueda
o no recibir un valor. En este caso tenemos una función que se
llama'contar' que, al invocarla, debería recibir un valor'cantidad' y es lo que
estamos mostrando en consola. Cuando nosotros lo probamos en
pantalla, vemos como el valor que tenemos aquí dice: "undefined". ¿Por
qué? Porque al momento de hacer la invocación de la función simplemente no
enviamos nada. Si yo quiero enviar algún valor, escribo en este caso
10, actualizo y listo, dice: "Total: 10". Ya se pasó un dato, pero ¿qué sucede si yo
imperativamente necesito no enviar ningún parámetro? Bueno, para esta
situación puedo yo preinicializar el parámetro que se va a recibir. Es decir, yo
aquí puedo escribir el símbolo de igual y puedo poner un valor, en este
caso vamos a poner un valor 20. ¿Qué quiere decir esto? Que si yo no envío
ningún dato como parámetro al invocar la función, el valor que va a tener por
defecto esta variable cantidad es el valor 20. Pero si yo envío algo, obviamente
va a tomar el valor que nosotros estamos enviando. Vamos a hacer la
prueba. Actualizamos nuestro navegador y vemos como ahora el valor dice:
"Total: 20" porque no enviamos nada. ¿Pero qué sucede si yo envío un
valor? Voy a enviar ahora 100. Actualizo mi navegador y vemos como hace caso
directamente al valor que yo estoy enviando. En resumen, si no enviamos
ningún valor como parámetro, se va a quedar con el valor que tiene
preinicializado, pero si enviamos un valor va a hacer caso al valor que estemos
enviando. Y, de la misma manera, si tú tienes más parámetros que vas a
recibir puedes preinicializar todos los valores que necesites. Esta es una
característica bastante funcional que tiene JavaScript.

Parámetros de tipo REST

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas veces, los algoritmos que estamos haciendo nos presentan bastantes
retos a resolver. Por fortuna, la gran mayoría de los lenguajes de
programación son muy versátiles y flexibles y nos ofrecen los medios
necesarios para poder dar solución a los casos que se nos lleguen a
presentar. En este caso vamos a presentar una situación. Esta función se
llama'cocinar', está recibiendo dos'ingredientes': 'pollo'y'tomate', y los muestra
en este'console. log'. Si yo actualizo mi navegador voy a ver que
tenemos'Ingrediente1: pollo', e'Ingrediente2: tomate'. ¿Pero qué sucede si yo no
sé cuántos parámetros más voy a enviar, es decir, cuántos ingredientes más
pueda yo llegar a necesitar: uno, dos, tres, cinco? No lo sé. Para esta situación
vamos a poner que vamos a enviar tres parámetros más, en este caso 'arroz',
'frijoles'y'pescado', pero no vamos a declararlos directamente en la
función. Vamos a actualizar el navegador y veamos qué sucede. No muestra
ningún error pero tampoco muestra los datos. Lo que tendremos que hacer es
utilizar un parámetro de tipo'rest', esto viene de la expresión: 'el resto de...
' Entonces, nosotros aquí utilizaremos un operador muy
importante, escribiremos tres puntos y le daremos nombre al parámetro. Este
nombre que nosotros pondremos será'masIngredientes', así si yo
escribo'console . log' e invoco a los demás ingredientes, aquí simplemente
estaré pintando ese otro resultado. Veamos qué sucede. Actualizo mi
navegador y vemos como el'Ingrediente1'tiene pollo, el'Ingrediente2' tiene
tomate. Y después si tenemos más ingredientes, no importa, todos los demás
parámetros los agrupa en esta variable pero con la diferencia de que hay tres
puntos que los están percibiendo. Así, nosotros podemos distinguir cuándo
estamos trabajando con un parámetro de tipo'rest'. ¿Y qué pasa si yo quiero
enviar un parámetro más? No importa. Por ejemplo, vamos a enviar
aquí'chile'. Actualizo mi navegador y vemos como ahora tengo'arroz', 'frijoles',
'pescado'y'chile'. Y, de hecho, si yo necesito quitar los demás ingredientes lo
único que necesito es quitarlos de los parámetros. Actualizo mi navegador y voy
a tener un error porque estamos haciendo referencia
a'Ingrediente1', a'Ingrediente2'. Eliminamos esas referencias, con esto nos
queda una función más simple, actualizamos y vemos como ahora todos los
parámetros que estoy mandando los estamos recuperando a través de este
parámetro especial llamado parámetro'rest'. Así, entonces, ya no tendrás ningún
problema al recibir uno o N cantidad de parámetros en tu función.

Parámetros de tipo REST

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas veces, los algoritmos que estamos haciendo nos presentan bastantes
retos a resolver. Por fortuna, la gran mayoría de los lenguajes de
programación son muy versátiles y flexibles y nos ofrecen los medios
necesarios para poder dar solución a los casos que se nos lleguen a
presentar. En este caso vamos a presentar una situación. Esta función se
llama'cocinar', está recibiendo dos'ingredientes': 'pollo'y'tomate', y los muestra
en este'console. log'. Si yo actualizo mi navegador voy a ver que
tenemos'Ingrediente1: pollo', e'Ingrediente2: tomate'. ¿Pero qué sucede si yo no
sé cuántos parámetros más voy a enviar, es decir, cuántos ingredientes más
pueda yo llegar a necesitar: uno, dos, tres, cinco? No lo sé. Para esta situación
vamos a poner que vamos a enviar tres parámetros más, en este caso 'arroz',
'frijoles'y'pescado', pero no vamos a declararlos directamente en la
función. Vamos a actualizar el navegador y veamos qué sucede. No muestra
ningún error pero tampoco muestra los datos. Lo que tendremos que hacer es
utilizar un parámetro de tipo'rest', esto viene de la expresión: 'el resto de...
' Entonces, nosotros aquí utilizaremos un operador muy
importante, escribiremos tres puntos y le daremos nombre al parámetro. Este
nombre que nosotros pondremos será'masIngredientes', así si yo
escribo'console . log' e invoco a los demás ingredientes, aquí simplemente
estaré pintando ese otro resultado. Veamos qué sucede. Actualizo mi
navegador y vemos como el'Ingrediente1'tiene pollo, el'Ingrediente2' tiene
tomate. Y después si tenemos más ingredientes, no importa, todos los demás
parámetros los agrupa en esta variable pero con la diferencia de que hay tres
puntos que los están percibiendo. Así, nosotros podemos distinguir cuándo
estamos trabajando con un parámetro de tipo'rest'. ¿Y qué pasa si yo quiero
enviar un parámetro más? No importa. Por ejemplo, vamos a enviar
aquí'chile'. Actualizo mi navegador y vemos como ahora tengo'arroz', 'frijoles',
'pescado'y'chile'. Y, de hecho, si yo necesito quitar los demás ingredientes lo
único que necesito es quitarlos de los parámetros. Actualizo mi navegador y voy
a tener un error porque estamos haciendo referencia
a'Ingrediente1', a'Ingrediente2'. Eliminamos esas referencias, con esto nos
queda una función más simple, actualizamos y vemos como ahora todos los
parámetros que estoy mandando los estamos recuperando a través de este
parámetro especial llamado parámetro'rest'. Así, entonces, ya no tendrás ningún
problema al recibir uno o N cantidad de parámetros en tu función.

Funciones anónimas en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Las funciones anónimas son un recurso ampliamente utilizado por los
programadores de JavaScript. Esto nos permite no asignarle a un nombre a un
conjunto de instrucciones que deseemos ejecutarlo sin necesidad de
asociarlo. Esto lo podemos utilizar comúnmente cuando tenemos un "callback"
o cuando queremos nosotros aislar una función de algún otro elemento. Por
ejemplo, si nosotros quisiéramos ahorita ejecutar una función o un conjunto de
instrucciones al inicio de nuestra aplicación, en lugar de tener que crear una
función nueva y ponerle un nombre e invocar la función, podemos hacerlo de
manera aislada. ¿Esto cómo es? Vamos a escribir la sintaxis de dos paréntesis
seguidos, esto nos permite aislar nuestra función, y en este caso estamos
poniendo aquí adentro las instrucciones que nosotros queremos generar, pero
para escribir estas instrucciones simplemente vamos a ocupar la
siguiente sintaxis: 'function', paréntesis y llaves. Si te das cuenta, esto cambia de
una función normal, puesto que la función normal antes del paréntesis y
después de la palabra clave'function' lleva un nombre; en este caso no lo
lleva. Por ahora vamos a mandar un mensaje que diga: "Hola de nuevo" y
dentro de este mensaje vamos a mandarlo a la consola, 'console.
log mensaje'. Esto debería poderse ejecutar sin ningún problema. Actualizamos
nuestro navegador y vamos a ver qué sucede. En este caso, el'use strict'que
tenemos nosotros está impidiendo que podamos aislar este bloque de
secciones. Vamos a removerlo solamente para poder verificarlo. Actualizamos
nuestro navegador y vemos como ya tenemos este mensaje que dice: "Hola de
nuevo". Para poder seguir haciendo las cosas bien, vamos a comentar todo este
bloque de código y ahora vamos a escribir una función anónima de una manera
distinta. Este tipo de código que vamos a escribir ahora muy probablemente lo
hayas visto o lo veas regularmente al momento de estar trabajando con
JavaScript. ¿Qué es esto? Primero estamos creando una variable
llamada'saludar' y aquí después vamos a escribir la sintaxis
de'function', paréntesis y llaves. Como te puedes dar cuenta, esta parte de aquí
es muy similar a la sección que tenemos acá. Aquí adentro entonces vamos a
mandar, o vamos a crear más bien, un saludo. Vamos a reutilizar lo que ya
tenemos acá que diga'var mensaje' es igual a'Hola de nuevo' y vamos a retornar
el mensaje, 'return mensaje'. Ahora sí, si nosotros queremos invocar esta
función vamos a hacerlo ahora desde la consola. En la consola, yo invoco el
método'saludar'y tenemos el texto'Hola de nuevo'. Incluso, nosotros cuando lo
invocamos podemos enviar parámetros. Aquí vamos a enviar un parámetro que
se va a recibir como'nombre'. Voy a modificar un poco el mensaje y vamos a
escribir por acá 'Hola nombre'. Actualizo mi navegador y cuando yo voy a
utilizar ahora'saludar'yo puedo mandar el nombre que yo quiero saludar, en
este caso escribiré mi cuenta de Twitter, actualizamos y vemos como dice: "Hola
yakaFx". Escribir funciones anónimas de esta forma es bastante común y te lo
encontrarás regularmente en todos los códigos que estés revisando alrededor
de Internet. Y donde también harás mucho uso es cuando trabajes con los
llamados "callbacks". Por ahora, entonces, ya sabes cómo escribir una función
anónima.

Entendiendo los callbacks

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Hemos aprendido que una función puede recibir parámetros de distintos
tipos: objetos, arreglos, cadenas de texto, números, valores "booleanos". Pero
¿qué crees? También puede recibir funciones como parámetros. Espera, todavía
no enloquezcas. De hecho, recibir funciones como parámetros es algo muy
común y de pronto lo vas a estar utilizando y ni cuenta te vas a dar, puesto que
los "callbacks" hacen mucho juego con las funciones anónimas. Vamos a crear
un "callback" en esta situación. Después del parámetro'datoB'que existe en la
función'calcular' vamos a escribir la palabra'sumarCB'. Yo estoy agregando la
palabra'CB' para poder identificar un "callback"; no quiere decir que esta sea la
sintaxis, tú puedes poner el nombre que tú quieras. La recomendación es:
agrégale un CB al final o al inicio para que puedes identificarlo sin ningún
problema. Después de esto, yo voy a utilizar esta misma
función, 'sumarCB', y voy a enviarle el valor de'suma'. Aquí puede ser un tanto
confuso, pero ¿qué pasa? Cuando yo estoy invocando la función'calcular' estoy
trabajando con esta estructura que recibe un'datoA', que es el número
2, un'datoB', que es el número 3, y después recibe un "callback". ¿Pero qué es
este "callback"? Como habíamos visto, es una función. Entonces, ya sea que yo
tenga declarada una función previamente y solamente escriba el nombre o que
pueda utilizar una función anónima, aquí entonces yo tengo una función que va
a recibir un resultado. ¿Por qué recibe un resultado? Si te das cuenta, estamos
haciendo coincidir esta función con este dato y lo único que hacemos es
retornar el valor. ¿Esto qué quiere decir? Que un "callback" está esperando una
respuesta o una llamada de regreso. Así, cuando yo estoy mandando este valor
2 y este valor 3 se reciben como parámetros normales. Pero, posterior a esto, yo
tengo el valor de una función. Esta función es la que va a recibir los datos que
tenemos de este lado. Así, entonces, si yo necesito saber cuál es el resultado de
esta suma, voy a mandarlo a consola, actualizo mi navegador y vemos que
ahora dice: "Suma: 5". ¿Qué sucedió? Yo invoqué la función'calcular', parámetro
2, parámetro 3 y después envié la función. Esta función no tiene ningún nombre,
no tiene absolutamente nada, pero estamos correspondiendo a la forma y
estructura en que está declarada la función'calcular', que aquí recibe una
función llamada'sumarCB' y esta recibe como parámetro el valor guardado
en'suma'. Por eso yo tengo que recibirlo de este lado, es decir, estoy haciendo
como si fuera un "match". Al hacer este tipo de "match" en el "callback",
entonces, tengo una respuesta. Pero ¿qué crees? No solamente puede recibir un
"callback", puede recibir N cantidad. Aquí, en este caso, yo estoy agregando una
opción llamada'restarCB'. Esta opción'restar' simplemente lo que va a hacer es
enviar el resultado de la resta directamente a la invocación de la
función. Actualizamos nuestro navegador y por ahora me está indicando un
mensaje que dice: "restarCB is not a function". ¿Qué tenemos que hacer? Bueno,
pues simple y sencillo: tendríamos que declarar después de este parámetro otra
función. Aquí, entonces, voy a copiar esto nuevamente y en lugar de sumar
estaremos haciendo una operación de resta. Como podemos revisar, una vez
que actualizamos nuestro navegador tenemos aquí la opción que dice: "Resta
-1" y "Suma 5". Así podemos darnos cuenta de que este "callback"
funcionó. Pero un punto muy importante: los "callbacks" generalmente me
ayudan a controlar procesos asíncronos, es decir, en una función yo puedo
hacer la invocación de muchos procesos y en otra función puedo hacer otra
invocación, ya sea de otros tantos u otros pocos procesos. Así, entonces, se
ejecuta una función y la otra función también se puede ejecutar y no importa
cuál vaya terminando porque de cualquier forma podemos estar recuperando la
información. Revisemos una vez más la firma de esta función, la cual tiene esta
estructura y por aquí lo voy a comentar para evitar algún problema. 'Calcular',
que es el nombre de la función, valor 1, valor 2 y después recibe una función y
al final otra función. ¿Qué quiere decir esto? Que yo estoy enviando este primer
dato como el tercer parámetro y este cuarto dato como el cuarto parámetro. Así
ya pudiste crear tus propios "callbacks", y verás como muy pronto estarás
también utilizando "callbacks" que te permiten trabajar correctamente con
distintas funciones. De hecho, si trabajas con jQuery o vas a comenzar a trabajar
con jQuery te encontrarás bajo esta situación muchísimas veces.
Funciones arrow
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Otra manera que tenemos de escribir funciones anónimas es a través de las
llamadas funciones de tipo "arrow" o función flecha, que también son conocidas
con el nombre de "Fat arrow" o "lambda functions" o funciones lambda. Puedes
llamarla con cualquiera de estos nombres. La idea es simplificar un poco el uso
de la sintaxis para esta función, veamos cómo escribir una función con este tipo
de sintaxis. Para esto, vamos a crear una variable nueva llamada'saludar' donde
almacenaremos el resultado de nuestra función. En este caso vamos a escribir
primero'nombre', después el símbolo de igual seguido del símbolo mayor
que, pero lo dejamos pegado. Después de esto, entre comillas vamos a escribir
la palabra'Hola', dejamos un espacio y concatenamos con la
palabra'nombre'. Vamos a trabajar rápidamente en la invocación de esta
función para poder explicar de qué se trata la estructura que acabamos de
escribir. Aquí adentro vamos a escribir la palabra'saludar', que es el
nombre como tal de esta función o la manera en la cual vamos a invocar esta
función, y aquí adentro vamos a poner algún nombre, por ejemplo,
escribamos'Susana'. Ahora analicemos cómo funciona. Primero, la función
"arrow" la podemos identificar por este símbolo, así nosotros cuando queremos
ocuparla decimos que vamos a enviar este primer elemento como un
parámetro y lo que viene después de este símbolo de flecha es lo que va a
retornar. Es decir, estará retornando el valor'Hola' con el contenido de la
variable'nombre', en este caso'Susana'. Vamos a probarlo rápidamente, y ahora
que lo hacemos vemos como dice: "Hola Susana". Esto quiere decir que con
esto tenemos un tipo de función más sencillo y claro, es muchísimo más
fácil que escribir una función anónima con la sintaxis de'function'. Pero este tipo
de funciones también tiene ciertas variantes. Por ejemplo, en este caso, si yo
quiero agregar algún valor o realizar alguna operación lo puedo agregar de esta
forma escribiendo al final lo que yo quiero retornar. Pero verifica esto, estamos
realizando una operación y eso es lo que estamos retornando, es decir, aquí en
este caso está sumando el valor que existe en'cantidad' y le suma el valor
10. Como lo estamos invocando con un parámetro de 10, te regresa el
valor 20. También es posible que yo pueda enviar más de un parámetro. De
hecho, si yo envio más de un parámetro, entonces tengo que encapsularlo entre
los paréntesis para que así JavaScript pueda detectarlo y pueda enviarlo de
manera adecuada. Como podemos ver, de esta forma ya
recibimos'datoA'y'datoB'. ¿Pero qué sucede si yo necesito realizar más
operaciones? No te preocupes, también tiene su variante. En este caso, lo único
que hacemos es encapsular todas las operaciones con el símbolo de llave y al
final lo único que vamos a hacer será invocar a dicha función. En este caso la
estamos invocando de está manera. Actualizamos nuestro navegador y vemos
como tenemos el valor del'datoA', que es 10, el valor de'datoB', que es 15, y por
dentro realiza otra operación que suma el valor de 5 almacenado en la
variable 'datoC'. Cuando lo guardamos, entonces tenemos un valor de 30. Y, por
último, tenemos esta otra variante donde simplemente no enviaremos ningún
parámetro. Y, al no enviar ningún parámetro, solamente tenemos que
especificar el símbolo de los paréntesis y después aquí hacer un'return'del
contenido que vamos a utilizar. Como puedes ver, la función de tipo "arrow" es
bastante versátil, lo único que tenemos que hacer es adaptarla dependiendo de
las acciones que tenemos que ejecutar. Este tipo de funciones se vuelven
bastante importantes y muy usables cuando quiero integrarlas en "callbacks" o
incluso cuando yo quiero utilizarlas dentro de otras funciones como, por
ejemplo, funciones de búsqueda en un arreglo o funciones que me
permiten estar iterando en colecciones de datos. Así, ahora tienes una manera
nueva de cómo poder escribir una función anónima.

Uso del operador this

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Al trabajar con dos formas diferentes de crear funciones anónimas nos
enfrentamos a un problema y esto es trabajar con un objeto de
referencia llamado'this'. Este tipo de operador me permite hacer referencia al
mismo objeto con el cual se está trabajando. Vamos a entender un poco más
este concepto y para esto trabajaremos con este ejemplo. En pantalla podrás
ver que hay un botón, la idea es que podamos pulsar este botón y reaccionar en
consecuencia. Este botón está definido con este estilo y tenemos esta clase
sobre la cual haremos referencia, la clase se llama'botón'. Aquí vas a encontrar
una diferencia muy importante. Primero, este "script" lo estamos enviando al
final. Como estamos ligando el contenido de HTML a un contenido de
JavaScript, entonces si nosotros tenemos este "script" desde antes va a provocar
un error, porque al momento en que se están ejecutando las cosas todavía no
existe la etiqueta a la cual buscamos ligar con una operación de JavaScript, por
eso lo pasamos al final. Esto es algo que te encontrarás comúnmente en
muchos códigos de JavaScript. Listo. Ya que entendimos nuestra vista, vamos al
código de JavaScript. En este código encontrarás que tenemos aquí la parte
donde estamos ligando el botón que mostrábamos ahora y estamos
almacenando su referencia en la variable'botón'. En esta parte tenemos
un'addEventListener'. El'addEventListener'estará escuchando cada vez que
nosotros hacemos clic sobre el botón y así estará enviando el mensaje. Por
ahora estamos enviando el mensaje'Botón pulsado'. Actualizamos, y cuando
damos un clic tenemos aquí el texto'Botón pulsado'. Pero lo que nosotros
necesitamos utilizar es el objeto'this', con el cual podemos hacer muchas
referencias. Por ejemplo, en este caso, si utilizo el objeto'this', actualizo mi
navegador y doy un clic vemos como me está trayendo completamente toda la
etiqueta. Pero yo puedo solamente acceder al contenido que existe dentro
de este botón, es decir, al texto. Para poder hacerlo utilizo la propiedad
llamada'innerHTML'. Actualizo mi navegador y pulsamos sobre el botón. Al
hacerlo vemos como ya tengo solamente el texto, pero cuidado, hay una gran
diferencia cuando dejamos de trabajar con una función anónima tradicional y
comenzamos a trabajar con una función de tipo "arrow" o un "arrow
function". Para hacer esta prueba, vamos a comentar el pedazo de código que
acabamos de utilizar y vamos a agregar ahora, en el caso del "callback", una
función de tipo "arrow function". Al momento de agregarla también vamos a
trabajar con el'this', pero vamos a quitar por ahora el'inner. HTML'. Actualizamos
nuestro navegador y damos un clic. Al dar clic vamos a ver que ahora nosotros
no tenemos la etiqueta, tenemos acceso a la ventana completa y, por tanto, a
todas sus propiedades y a sus métodos. Por ejemplo, el'localStorage', 'location',
etc. ¿Y qué sucede si nosotros queremos acceder a este contenido utilizando
esta estructura? Simplemente no vamos a poder directamente, tendríamos que
navegar sobre toda la ventana hasta encontrar el valor. Por eso mismo tenemos
que decidir qué tipo de función anónima vamos a utilizar: una función anónima
tradicional o una función anónima de tipo "arrow function". Pero no todo es
malo. De hecho, podemos sacar un poco de provecho. Ya que aquí nosotros
tenemos acceso a la ventana, podemos acceder por ejemplo al
objeto'location'del cual dispone la ventana y así nosotros podemos hacer un
redireccionamiento. En este caso, vamos a hacer un redireccionamiento en'this.
location' igual a'www. google. com'. Actualizamos nuestro navegador, damos un
clic y vemos como esto nos envía directamente al sitio de'www. google.
com' porque estamos sacando ventaja de esta propiedad. Con esto ya tienes
claro qué sucede con el objeto'this'cuando trabajamos con cualquiera de las
dos formas de generar una función anónima.

Eventos del mouse

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En JavaScript, es posible interactuar con casi todos los elementos que van
a componer una página web o nuestra aplicación, desde HTML, CSS o el mismo
JavaScript. Para esto necesitamos agregar elementos de escucha, es
decir, agregar un elemento que me permita a mí estar escuchando cuando algo
sucede. Uno puede agregar este tipo de elementos ya sea directamente en las
etiquetas de HTML o trabajándolas directamente en JavaScript. Mi
recomendación es: tráete todo este tipo de interacciones hacia JavaScript. Para
esto, lo primero que tenemos que hacer es hacer una asociación entre HTML y
JavaScript, esto lo logramos de esta manera. Ahora, si tú te vas al archivo'index.
html'de este ejercicio podrás verificar que aquí tenemos una división con una
clase llamada'botón'. Este botón es este que podemos ver aquí en pantalla. Si tu
te vas a'app. js' podrás ver que estamos haciendo referencia utilizando el
método'querySelector' y lo estamos guardando en una constante
llamada'botón'. Con esto ya tenemos la asociación entre JavaScript y
HTML. Ahora sí podemos interactuar de este lado. Para hacer esto vamos a
hacer uso de un método llamado'addEventListener'. 'AddEventListener', como
su nombre lo indica en inglés, va a poner una escucha de eventos, es decir, algo
que va a estar pendiente de los eventos que van a suceder con este botón que
nosotros tenemos asociado. En el primer caso, lo que nosotros queremos
escuchar es un clic, entonces estaremos escuchando este evento. Si tú agregaras
este evento directamente en HTML tendrías que escribir'onclick', pero cuando lo
trabajamos directamente en JavaScript solamente dejamos el nombre del
evento, en este caso 'click'. Vamos a probar en nuestro navegador, actualizamos
y vamos a dar clic sobre el botón. Al dar un clic vemos que se ejecuta una
instrucción que dice: "El botón se ha pulsado". ¿Qué quiere
decir? El'addEventListener'escuchó cuando se dio un clic sobre este botón y, por
tanto, ejecutó este conjunto de acciones. A partir de aquí, tú puedes invocar
más funciones o más acciones dependiendo de lo compleja que tú hayas
armado tu aplicación. Pero no solamente podemos hacer este tipo de
eventos, también, como nosotros revisábamos, podemos tener acceso a otro
evento llamado'mouseover'. Este evento'mouseover'se va a detonar cuando
nosotros coloquemos el cursor que estás viendo en pantalla directamente sobre
el botón. Así que vamos a actualizar nuestra página y, una vez
actualizada, colocamos el cursor del "mouse" sobre el botón. Así puedes
ver como tenemos aquí el texto que dice: "El mouse está sobre el botón". Con
esto ya pudimos detectar cuando el "mouse" está sobre el botón. Ahora, ¿cómo
podemos detectar cuando el "mouse" sale del botón? Para esto vamos a
agregar el evento'mouseauto'. Actualizamos el navegador, entramos al botón y,
si observas, en la consola dice: "El "mouse" está sobre el botón". Pero si
salimos: "El mouse está fuera del botón". Entramos, salimos, entramos,
salimos. De esta manera tenemos acceso ya a tres de los principales
eventos que existen de JavaScript para poder trabajar con el "mouse". Es
importante señalar que estos no son los únicos eventos que existen, hay
muchos más eventos, los cuales puedes consultar en la documentación formal y
oficial de JavaScript que podrás encontrar ya sea en'w3schools' o en alguno de
los fabricantes como, por ejemplo, Mozilla Developer Network.

Eventos del teclado

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Así como podemos escuchar eventos del mouse, también podemos
escuchar eventos del teclado. Y para esto tenemos tres tipos de eventos: los
eventos que podemos escuchar del teclado son'keydown' 'keypress'y'keyup' y
podemos escucharlos directamente cuando se están aplicando a determinada
etiqueta o elemento de HTML de nuestra página o aplicación o cuando lo
estamos aplicando a cualquier parte de nuestra página. Cuando queremos
aplicarlo a cualquier parte de nuestra página, solamente debemos dirigir
nuestro'addEventListener'al objeto'window' y con esto podemos escuchar. Este
es el caso para este tipo de eventos. Por ejemplo, vamos a escuchar el primer
evento que es'keydown'. Con el evento'keydown'vamos a estar escuchando
cada que nosotros pulsando una tecla. En este caso, voy a pulsar la tecla Enter y
vemos como, al pulsarla, ya tengo este evento que se está detonando. Posterior
a esto, vamos a trabajar con el evento'keypress'. Esto es el momento en que la
tecla se mantiene oprimida. Actualizamos nuestro navegador y pulsamos la
tecla. Al pulsarlo vemos que tenemos acceso ya a estas dos acciones que
nosotros estamos detonando en cada uno de estos "listeners", pero también
tenemos acceso a un tercer evento, que es'keyup', es decir, cuando yo libero la
tecla. La tecla, si te das cuenta, pasa por tres etapas. Cuando yo la estoy
presionando, cuando está presionada y cuando la dejo de presionar. Entonces,
podemos escuchar estos tres eventos, actualizamos nuestro
navegador pulsamos la tecla y vemos como tenemos los tres estados que van
sucediendo en secuencia según vamos pasando por este proceso en las
teclas. Nosotros también podemos escuchar cuál es la tecla que estamos
presionando, para esto debemos hacer uso del evento que estamos
recibiendo. En este primer caso, vamos a hacer lo siguiente: vamos a escribir en
Consola 'console. log', el siguiente valor, que es'event', 'KeyCode'. Este'event.
KeyCode'me va a mostrar cuál es la tecla que estoy presionando. Pero cuando
lo hacemos, si te das cuenta, lo único que hace es mostrar el código pero no
nos indica cuál es la letra. Si nosotros quisiéramos acceder a dicha letra tenemos
que utilizar un método en específico. El método que vamos a ocupar pertenece
al objeto'string' y ese método se llama'fromCharCode', que quiere decir que
nosotros le enviamos el código y este nos va a responder la letra que
es. Actualizamos nuestro navegador, vamos a pulsar alguna tecla, y en este
caso, por ejemplo, si yo pulso la tecla Enter no tenemos una manera detectarlo,
es decir, no existe en el mapeo que tenemos acá. Pero si yo utilizo una letra
normal, por ejemplo, la letra hache, vemos como ésta sí la puede detectar. Y si
yo escribo alguna otra letra, vemos como esas letras sí se van mencionando. De
esta manera, yo puedo detectar cuál es la letra que estoy utilizando y así poder
reaccionar en caso de que yo necesite pulsar alguna tecla y que con esa tecla
suceda alguna acción. Esto lo puedes utilizar regularmente cuando tú quieres
pulsar la tecla Enter y quieres que algo se guarde o quieres que algo se
envíe, así nosotros podemos reaccionar con el teclado y poder guardar algún
elemento o realizar cualquier conjunto de acciones.

Evento de carga del documento

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Como hemos venido realizando, podemos escuchar eventos que sucedan en
cualquier parte de nuestra aplicación web. Ahora nos toca escuchar un evento
principal y es el evento de cuando el documento ha terminado de
cargarse. ¿Para qué? Para poder contar con estos elementos ya listos en
pantalla y poder comenzar a interactuar con algo. Se te puede presentar una
situación similar cuando tú tengas un espacio donde necesites cargar datos
remotos o datos que se encuentren en otro lado y no precisamente en tu
misma página. Para este tipo de situaciones, lo que nosotros hacemos primero
es escuchar cuando la carga del documento o de la ventana ha terminado y,
una vez que ha terminado esta carga, entonces nosotros ya podemos
trabajar. Lo único que tenemos que hacer es asociar al
objeto'window' un'addEventListener' que escuche el evento'load'. Con esto,
nosotros ya podemos escuchar cuando toda la ventana se ha "parseado"
correctamente, es decir, ya todos los elementos de HTML, de JavaScript, de
CSS, imágenes, etc., todo lo que compone a nuestro desarrollo, entonces,
nosotros ya estamos escuchando cuándo sucede. Ya terminó de
cargarse, entonces ahora sí puedo ir y conectarme a un dato remoto, por
ejemplo. Si yo actualizo mi navegador, en este caso ya me dice: "El contenido de
la ventana se ha cargado". Esto ha sucedido demasiado rápido, porque aquí no
tenemos absolutamente nada sofisticado que mostrar, pero cuando tienes ya
una página correctamente armada, allí sí vas a requerir estar escuchando este
tipo de evento'load' para saber en qué momento terminó. Y, obviamente,
nosotros aquí solamente mandamos un'console. log', pero lo que tú podrás
hacer de este lado es hacer todas las invocaciones de otras funciones o de datos
que necesites. De esta forma, ya puedes interactuar y comenzar a trabajar con el
evento'load' cada que tu documento ha sido cargado satisfactoriamente dentro
de una ventana web.

Eventos multimedia en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Si tu proyecto tiene que ver con contenido multimedia, como audio o
vídeo, pues también vas a poder interactuar con los eventos que dependan de
este tipo de contenidos. En este caso tenemos un vídeo y vamos a hacer la
relación hacia JavaScript a través de esta clase llamada'bostonVideo'. Una vez
que nosotros tenemos esta relación, tenemos para este
ejemplo tres'addEventlisteners'. En el primer'addEventListener', nosotros vamos
a agregar el evento'play'. ¿Qué vamos a hacer? Vamos a escuchar el momento
en el que le dimos Play a este vídeo. Actualizamos el navegador y pulsamos el
botón Play. Una vez que lo hacemos, vemos que dice: "El vídeo se ha
iniciado", por tanto ya pudimos escuchar este evento. También nosotros
podemos escuchar cuando el evento ha terminado, y para esto necesitaremos
trabajar con un evento llamado'ended' para saber cuando ya terminó. Vamos al
último'addEventListener'que tenemos, escribimos el nombre del evento, que
es'ended', actualizamos nuestro navegador, pulsamos Play y vamos a recorrer
un poco el cursor. Una vez que estamos cerca del final, lo soltamos y
verificamos cuando ha terminado y se detona el evento que dice: "El evento
ha terminado". Con esto tenemos ya dos eventos, pero dejamos uno
pendiente, este evento que nosotros vamos a escuchar aquí es un evento
llamado 'seeking'. Este evento llamado'seeking' lo que va a hacer es escuchar el
momento en el que nosotros estamos moviendo la ubicación de este control de
vídeo. Por ejemplo, yo doy un clic y empiezo a moverlo. Vemos como en la
Consola sale un mensaje que dice: "Se está buscando en el vídeo" y, de hecho,
nosotros podemos reaccionar también a esto y trabajar con los tiempos. Sí, este
tipo de objetos tiene algunos métodos y algunas propiedades a través de
las cuales podremos acceder dependiendo del evento en donde nosotros
estemos trabajando. Para este caso, nosotros vamos a trabajar con el
objeto'this' y vamos a traernos el tiempo actual según lo que estemos
buscando. Actualizamos nuestro navegador, pulsamos Play y una vez que lo
hacemos, movemos, y si te das cuenta viene el texto "Se está buscando en el
vídeo" y aparece el segundo, y si nosotros movemos vamos a verificar
rápidamente que los datos concuerden. Si tú puedes ver en el contador, inicia
en el segundo dos y en la parte de abajo de la Consola dice 2. 06. Conforme
vamos avanzando, vamos viendo como los tiempos coinciden. De esta manera,
a través de la propiedad'currentTime', yo puedo acceder al tiempo dependiendo
de la ubicación que tiene este control en el vídeo. Lo mismo podemos hacer con
el audio, porque ambos son contenidos multimedia. Y si el contenido de tu
proyecto trabaja mucho con audio y con vídeo, la recomendación es que
domines los eventos que están relacionados a este tipo de contenido para que
la experiencia de usuario que buscas plasmar en tu sitio sea una experiencia
muchísimo más enriquecida y que tu usuario pueda valorarla.

Uso de temporizadores o timers

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Bajo ciertas circunstancias, el uso de temporizadores dentro de tu aplicación va
a ser muy importante. Y esto ¿para qué nos va a servir? Para poder ejecutar
determinadas acciones dependiendo de un cierto lapso de tiempo. Y para esto,
nosotros tenemos dos tipos de temporizadores: uno llamado'setInterval'y el
otro llamado'setTimeout'. El primer elemento que nosotros vamos a
tener es'setInterval'. Con'setInterval', lo que nosotros estaremos trabajando es la
ejecución infinita de un elemento cada determinado tiempo. Es decir, si yo
establezco que sea cada tres segundos, entonces cada tres segundos va a
suceder una acción hasta que yo lo detenga. Y, posteriormente, vamos a
tener otro tipo de temporizador o "timer" y este va a ser el
llamado'setTimeout'. Lo que va a hacer este tipo de temporizador o "timer" es
que va a ejecutar una acción después del tiempo que tú le estés indicando y
solamente lo va a repetir una sola vez. Veamos cómo se implementan. En este
caso, nosotros tenemos una función llamada'setColor', esta
función'setColor'está asociado al "body" del documento de nuestra página y lo
que vamos a hacer es estar cambiando el color del fondo de pantalla. Si yo
invoco mi función'setColor'directamente desde la consola, al invocarla, lo
primero que hace es cambiarla a azul, porque nosotros aquí tenemos: si es igual
a color azul, entonces pone verde; de lo contrario, pone color azul. Volvemos a
invocar nuevamente'setColor' y cambia a verde, de nuevo azul, de nuevo
verde. ¿Pero qué tal si podemos hacer esto de una manera más
automatizada? Para esto vamos a utilizar nuestro temporizador y aquí vamos a
utilizar primero'setInterval'. En este caso de'setInterval', recibe por dentro
primero una función o la invocación de una función. Aquí adentro, nosotros
tenemos una función anónima donde estamos invocando la
función'setColor'. Aquí, nosotros vamos a cambiar cada dos segundos el color
del fondo de nuestra página. Debes tener cuidado, porque esta cantidad que
estamos escribiendo aquí está dada en milisegundos, entonces tú siempre
debes escribirla en milisegundos, y no existe una posibilidad de ponerlo en
segundos o ponerlo en horas de manera nativa, así que puedes hacer la
conversión y trabajar con milisegundos. Vamos a actualizar rápidamente el
navegador, esperamos dos segundos y vemos como cambia a un color azul y
después cambia a un color verde; uno, dos, uno, dos. Aquí tú puedes ver que
obviamente esto sigue y va a seguir cambiando y seguirá cambiando hasta que
nosotros detengamos el temporizador, por eso mismo nosotros hicimos una
asociación a una variable llamada'temporizador'. Esto lo vamos a meter
directamente en una función llamada 'stop ChangeColor'. Para poder detener
nuestro temporizador, vamos a utilizar un método llamado 'clearInterval' y le
vamos a pasar de parámetro el temporizador. Vamos a actualizar nuestro
navegador y vemos como comienza el temporizador a invocar a la
función'setColor' y esto va a seguir infinito hasta que nosotros lo detengamos o
se detenga, dependiendo de una acción en el sistema. Para esto, vamos a
invocar la función llamada'stopChangeColor', que lo único que hace es limpiar
el intervalo existente. Lo utilizamos y vemos como ahora se ha detenido y ya no
se sigue ejecutando, así nosotros ya tenemos un control sobre este tipo de
temporizadores. Y, de la misma manera, nosotros podemos trabajar pero
utilizando'setTimeout'. Vamos a utilizarlo, voy a copiar un poco este mismo
código y, en lugar de utilizar 'setInterval', voy a trabajar con'setTimeout'. Aquí
vamos a darle tres segundos. Para esto voy a comentar primero el primer
temporizador para que este no se active. Una vez que ya lo tengo comentado,
voy a actualizar mi página web, esperamos los tres segundos que se están
ejecutando y vemos como ha cambiado. Después de esto, ya no va a suceder
ningún cambio, porque con'setTimeout'solamente expresamos que va a ocurrir
una vez. Si quisiéramos que esto se ejecutara más veces o siempre se estuviera
ejecutando, entonces necesitaremos trabajar con el método'setInterval'. De esta
forma, has aprendido ya cómo puedes trabajar con temporizadores o "timers"
dentro de JavaScript.

Ventanas de alertas en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
JavaScript cuenta con mecanismos suficientes para poder alertar o notificar al
usuario de que algo ha sucedido en el sistema. Para poder hacer esto, haremos
uso de la palabra reservada'alert'. ¿Y qué es lo que estaremos
trabajando? Simplemente, una alerta en pantalla. ¿Recuerdas haber visto alguna
vez una ventana emergente que te aparece en pantalla para notificarte
algo? Bueno, eso lo podemos lograr utilizando el método'alert'. En este caso, lo
que vamos a hacer en este ejemplo es ponerle Play a este video y cuando
termine de ejecutarse el video, entonces, se va a generar una alerta. Esta alerta
va a mostrar simplemente la leyenda "El vídeo ha terminado". Vamos a
probarlo y, para hacerlo, vamos a actualizar nuestro navegador. Pondremos Play
al video y vamos a recorrerlo un poco hasta cerca del final. Ya que estamos aquí,
el video termina y la alerta se ha mostrado. Aquí lo que nosotros podemos
hacer simplemente es leer un mensaje. Para este tipo de alertas, no podemos
escuchar cuando el usuario haya pulsado el botón Aceptar, puesto que lo único
que busca este tipo alertas es dar una notificación o avisar al usuario final que
algo ha sucedido, en este caso que terminó de reproducirse un video. Debes
tener mucho cuidado en la manera en que usas las alertas, me refiero a que no
uses alertas indiscriminadamente para estar notificando de todo al usuario. Hay
distintos tipos de notificaciones y, de hecho, esta notificación o alerta es para
darle una notificación o aviso de alta escala el usuario, es decir, "¡Ey, algo ha
sucedido demasiado importante, entonces tienes que hacer algo! ". Para eso
vamos a utilizar estas alertas. Si el mensaje que quieres enviar no es tan
importante, entonces trata de evitar el uso de esta alerta y manda un mensaje
directamente en la página. Una característica más que tienen las alertas es que
podemos usar saltos de línea. Por ejemplo, yo aquí voy a escribir la
palabra'mensaje' y después voy a escribir una diagonal invertida, seguida de
una letra ene. Esto significa que va a escribir un salto de línea. Vamos a guardar
y vamos a probar para ver qué sucede. Pulsamos Play en el vídeo, recorremos
casi hasta el final y esperamos a que termine. Ahora que ha terminado,
podemos ver que dice: 'MENSAJE', salto de línea, "El video ha terminado". Si
queremos agregar otro salto de línea, lo único que tenemos que hacer es
repetir esta diagonal invertida seguida de una ene. Probemos nuevamente, y
ahora sí vamos a poder visualizar como el espacio se ha hecho más grande. De
esta manera, puedes trabajar ya con las alertas y reaccionar de una
manera distinta ante ciertos eventos que sucedan en el sistema.

Cómo generar en JavaScript una ventana de confirmación

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En el caso de una alerta, lo único que podíamos hacer era notificar al
usuario, pero habrá ciertas circunstancias donde tú necesites
reaccionar dependiendo de la respuesta que el usuario haya tomado. Por ahora,
sigamos trabajando con este video y vamos a escuchar cuando termine de
reproducirse el video y así podamos preguntar si el usuario desea repetir el
video o no. Para este tipo de ventanas, utilizaremos el método'confirm'. Este
método'confirm' lo que va a hacer es notificar directamente en
pantalla dándonos opciones de poder elegir qué queremos hacer. Vamos a
actualizar nuestro navegador y demos Play en el video. Una vez que el video
haya terminado, podremos ver este mensaje que dice: "¿Deseas ver el video
nuevamente? Aceptar o Cancelar. La idea es que podamos reaccionar ante estos
dos botones. Vamos a ver cómo lo podemos hacer, lo primero que
necesitaríamos es guardar el resultado de esa evaluación en una variable, para
lo cual nosotros vamos a generar una variable llamada'resultado' y
guardaremos ahí directamente nuestra alerta. ¿Qué sucede? Lo que nos haya
retornado esta alerta, si pulsamos Aceptar o Cancelar, se va a guardar en esta
variable llamada resultado, así que vamos a revisar qué es lo que tiene, así que
vamos a revisar qué es lo que tiene este dato. Vamos a mandar a'console. log'el
resultado, guardamos y actualizamos nuestro navegador y vamos a dar Play al
vídeo cerca del final. Una vez que termina, vamos a pulsar ahora el botón
Aceptar. Cuando pulsamos el botón Aceptar vemos que el resultado que tiene
es un "true". Repitamos nuevamente, demos Play, ahora pulsemos el botón
Cancelar, ¿qué sucede? Ahora tenemos un valor llamado "false". De esta forma
podemos detectar y podremos hacer una evaluación de la respuesta para saber
qué vamos a hacer. Entonces, ¿qué te parece si escribimos aquí 'if',
'resultado'? Y si el resultado fue'true', es decir, si el usuario sí quiere repetir y ver
de nuevo el video, entonces vamos a usar la misma referencia que tenemos aquí
de video y podemos invocar el método'play'. Este método'play'va a reproducir
nuevamente el video. En caso de que nosotros no queramos hacer nada, vamos
a forzar ahora que nos envíe a otra página. En este caso, estaremos
utilizando 'window. location'y enviándolo hacia una URL. Vamos a actualizar
nuevamente nuestro navegador, vamos a dar Play y vamos a colocarnos cerca
del final. El video termina de reproducirse y pregunta: "¿Deseas ver el video
nuevamente? " Si yo pulso Aceptar, esto me genera un valor "true", por tanto,
aquí, esta condición se va a cumplir. Recuerda: en ese tipo de condiciones,
cuando sabemos que el valor que viene es un valor "booleano", no es necesario
que yo ejecute esta evaluación: 'resultado=true'. Simplemente, como sabemos
que es un valor "booleano", con que yo exprese la variable que yo deseo
evaluar, la misma estructura de control se va a encargar de hacer todo el
proceso. Ahora vamos a pulsar el botón Aceptar y vemos como el video
comienza nuevamente. ¿Y qué sucede en el caso contrario? Movemos nuestro
video cerca del final, pulsamos el botón Cancelar y con esto podemos ver como
nos comienza redireccionar hacia otro sitio. De esta forma, ya puedes tú tener
un control sobre lo que sucede al final del video o sobre lo que tú deseas
hacer, dependiendo de lo que el usuario haya elegido en su mensaje de
confirmación.

Qué es la ventana para ingreso de datos

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Bajo ciertas circunstancias, las alertas nos van a permitir capturar ciertos
datos del usuario, esto es: nos van a ofrecer un espacio donde el usuario podrá
capturar información y nosotros podemos darle el tratamiento que
deseemos, por ejemplo, guardarlo en una base de datos, en una
variable, cualquier cosa que nosotros necesitemos. Pero debes de tener cuidado
con algo: no utilizar este tipo de alertas para capturar demasiada información
o información que sea muy crucial para el usuario. En este caso en el cual
estaremos trabajando, nosotros tenemos un video y podemos ofrecerle al
usuario que vea este u otros videos, pero para poder hacerlo necesitará
registrarse. Entonces, en lugar de que nos envíe a una página nueva, podemos
hacerlo desde aquí. Cuidado, no siempre va a ser necesario que desde aquí
hagamos este proceso, puedes hacerlo directamente trabajado en otra
página. Pero para poder entender este tipo de ventanas, lo primero que vamos
a hacer será crear una variable llamada'email' y utilizaremos el método
llamado'prompt'. Dentro de este método llamado'prompt' vamos a tener un
mensaje que dice: "Escribe tu correo para ver más videos", y justo aquí debajo
vamos a mandar a imprimir lo que existe dentro de la variable'email', es decir, el
resultado que obtuvo dependiendo de lo que el usuario haya escrito. Estas
instrucciones se van a ejecutar cuando el video esté terminando, así que vamos
al final, esperamos a que termine y vemos como este tipo de
ventana'prompt' me ofrece este espacio. Aquí yo puedo escribir mi correo
electrónico y pondré 'sergiobritor @ gmail. com', pulso el botón Aceptar y
vemos como donde se imprime la variable ya tenemos ese dato. Ahora, este
tipo de ventanas me recibe un segundo parámetro. De hecho, este segundo
parámetro es el valor que podría ir por "default" en ese espacio de
escritura. ¿Qué tenemos que hacer? Simplemente, como segundo parámetro de
la función'prompt'que estamos utilizando podemos mandar un siguiente
mensaje. Vamos a probar nuevamente. Nos colocamos cerca del final y
reproducimos y vemos como aparece en este espacio ya, por defecto, el
mensaje que dice'data@info. com', que ese es un mensaje que nosotros
podemos modificar, quitar o trabajar con él. Ahora, ¿qué sucede si el usuario
pulsa el botón Cancelar? En este momento me está regresando un valor
"null". Yo necesitaría ejecutar una evaluación o una condición para probar qué
sucede con este dato y si yo voy a hacer o no determinada actividad. Para esa
situación, lo que yo tengo aquí preparado es una evaluación con un'if', donde lo
primero que preguntamos es si el dato es nulo o también nosotros podemos
preguntar qué sucede cuando el usuario no escribe nada. Por ejemplo, vamos a
dejar aquí este espacio vacío y pulsamos Aceptar. En ese momento podemos
ver que el texto que tenemos no aparece, ¿por qué?, porque el usuario no
escribió nada. Entonces tenemos dos casos que son inválidos. Uno: cuando el
usuario pulsa Cancelar, dos: cuando el usuario no escribe absolutamente
nada. Entonces, probamos nuevamente, vamos a ver qué sucede y en este
primer caso tenemos ahí ese correo, yo lo voy a cambiar, vamos a poner
otro, por ejemplo, 'nombre@ correo. com', pulso el botón Aceptar y se muestra
en la línea 14. La línea 14 es esta condición de aquí, quiere decir que estas
evaluaciones nunca se cumplieron, es decir, 'email'nunca fue o nulo o nunca fue
vacío. Vamos a probar nuevamente pulsando el botón Cancelar de nuestra
alerta y vemos como ya me aparece el mensaje que dice'Sin datos', que se
ejecuta en la línea 12. Y el último caso a probar es cuando dejamos el texto
vacío, lo eliminamos, pulsamos Aceptar y vemos nuevamente como se ejecuta la
opción sin datos. De esta manera, ya puedes recuperar información de un
usuario utilizando una ventana de tipo'prompt'.

JavaScript y las propiedades numéricas

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Al igual que muchos lenguajes de programación, Javascript dispone de muchas
propiedades métodos y mecanismos para facilitar nuestras tareas como
programador. En este caso vamos a trabajar con algunas propiedades
numéricas, la primera que vamos a revisar es la propiedad'MAX_VALUE'. Para
poder utilizarla necesitamos invocar a'number'. 'Number', dentro de sus
propiedades, tiene este valor llamado'MAX_VALUE'. Una vez que nosotros lo
utilizamos, vamos a mostrarlo directamente en pantalla. Pero ¿qué
es'MAX_VALUE'? 'MAX_VALUE'como tal es el número positivo más largo posible
que puede manejar JavaScript, entonces nosotros podemos usarlo como una
referencia. También tenemos lo mismo para trabajar con'MIN_VALUE'. Si
nosotros copiamos este mismo código que tenemos y, en lugar
de'MAX_VALUE', escribimos 'MIN_VALUE', actualizamos nuestro navegador y
vemos cuál es el valor mínimo que podemos tener. Obviamente, estos cálculos
ya son muy sofisticados y podremos llegar a utilizarlos solamente en ciertas
situaciones o que nuestra aplicación así lo requiera. Si de pronto tienes alguna
duda sobre los valores o lo que significan estos valores y estás trabajando con
Visual Studio Code, recuerda que simplemente con colocar el cursor encima de
la propiedad que quieres, se va a desplegar una pequeña ventana donde se te
ofrece una explicación de lo que trata este valor. Sigamos revisando los demás
datos que tenemos. El siguiente número que tenemos es un infinito
negativo. Sí, aunque parezca salido de un videojuego, también podemos tener
este tipo de términos y donde un infinito negativo simplemente es el objeto
"infinity". ¿Qué quiere decir esto? Que es un objeto que tal cual me va a permitir
ser infinito, es decir, que nunca va a terminar. Por tanto, si yo llego a ejecutar
algún ciclo y mi condición la voy a validar directamente al infinito, entonces este
ciclo se va a ejecutar por siempre. Así que debes de tener mucho cuidado. Y, de
la misma manera, tenemos nosotros un positivo infinito. Cuando nosotros
probamos vemos el valor que tenemos acá y tenemos, por último, un valor muy
importante que, de hecho, si lo sabemos utilizar nos va a facilitar muchísimo la
vida en la gran mayoría de los casos y esto es una propiedad
llamada'NaN'. 'NaN'significa "not a number" y nosotros podemos hacer las
asignaciones o comparativas con esta propiedad para saber si el dígito o dato
que estamos trabajando es o no un número. De esta forma, estas propiedades
pueden sernos de mucha utilidad en ciertos casos cuando estemos
programando en JavaScript.

Métodos numéricos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
JavaScript nos ofrece algunos métodos que me van a permitir a mí trabajar
con números o, principalmente, poderlos convertir. Por ejemplo, habíamos visto
anteriormente que tenemos, en este mismo objeto'number', un método donde
simplemente yo le paso un valor –en este caso, número– y cuando yo lo envío y
lo voy a probar tengo como resultado un número. ¿Qué sucede? Originalmente,
este valor está almacenando una cadena de texto. De hecho, si yo lo envío
primero directamente a la consola, como estoy trabajando con texto, todo me
va a aparecer como texto, pero si yo ejecuto el valor de'typeof' puedo saber que
esta variable'número'realmente es un texto. ¿Pero qué sucede si yo
posteriormente ejecuto ese mismo'typeof' pero directamente en la conversión
que ya tenemos? Entonces, como puedes ver, tenemos un número. Como
podrás recordar, este objeto'number'convierte todas las cadenas de texto en
número. También tenemos otro valor importante, que
sería'parseInt'. 'ParseInt' lo que hace es "parsear" un texto como si fuera igual a
un número pero convirtiéndolo completamente en entero. Cuando nosotros
vamos a probar este método vemos que el valor que está almacenado dentro
de'número' es el valor 10. 30. Es decir, este valor tiene dos decimales que
buscamos convertir, pero al utilizar el método'parseInt' lo único que retornamos
es un valor entero y eso lo puedes revisar en esta parte, porque aquí
simplemente el valor sale ya sin ningún número decimal. También contamos
con una operación que sí me va a considerar esos decimales y esa operación se
llama'parseFloat'. De la misma forma, lo único que tenemos que enviar es el
número. Así, actualizo mi navegador y podemos ver como tenemos este
flotante, es decir, sigue considerando el número que tenemos completamente, y
si nosotros lo llegamos a modificar o agregar más decimales, estos decimales
siguen siendo válidos. También, yo tengo la opción de preguntar si un
número es realmente o no un número. ¿Recuerdas'NaN'? 'NaN'significa "not a
number" y para lo mismo existe una función llamada'isNaN'. Esta
función'isNaN' lo que va a hacer es preguntar si lo que yo estoy enviando como
parámetro de esta función es o no un número. Cuando yo actualizo, en este
caso, me sale un valor que dice "false". ¿Qué quiere decir? Que el contenido
de'número'no es un número. Aunque se escuche algo redundante, tiene mucha
razón, puesto que el contenido de'número' es una cadena de texto. Y, por
último, tenemos otro método importante: 'isInteger'. 'IsInteger'lo que hace es
preguntar si el valor que nosotros estamos enviando es o no un número
entero. Pero ten un poco de cuidado, porque para esta situación necesitamos
utilizar el objeto'number'para poder hacer esta prueba. De hecho, también tú
podrías hacerlo directamente así con los demás. Es decir, por ejemplo, 'number.
parseFloat' o'number. isInteger', pero el único que lo pide formalmente es la
opción de'isInteger'. Y cuando nosotros actualizamos nuestro
navegador podemos probar que esto realmente no es un entero. Incluso, si yo
llego aquí y modifico el valor que tenemos sigue siendo no un entero, ¿por
qué?, porque lo que está almacenado acá es una cadena de texto, y si yo lo
convierto o a un número, es decir, le quito las comillas, entonces los valores
cambian. Así, nosotros ya podemos trabajar con algunas operaciones y poder
hacer las conversiones y validaciones de números cuando necesitamos que
estos realmente sean un número y no una cadena de texto.

Métodos numéricos en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
JavaScript nos ofrece algunos métodos que me van a permitir a mí trabajar
con números o, principalmente, poderlos convertir. Por ejemplo, habíamos visto
anteriormente que tenemos, en este mismo objeto'number', un método donde
simplemente yo le paso un valor –en este caso, número– y cuando yo lo envío y
lo voy a probar tengo como resultado un número. ¿Qué sucede? Originalmente,
este valor está almacenando una cadena de texto. De hecho, si yo lo envío
primero directamente a la consola, como estoy trabajando con texto, todo me
va a aparecer como texto, pero si yo ejecuto el valor de'typeof' puedo saber que
esta variable'número'realmente es un texto. ¿Pero qué sucede si yo
posteriormente ejecuto ese mismo'typeof' pero directamente en la conversión
que ya tenemos? Entonces, como puedes ver, tenemos un número. Como
podrás recordar, este objeto'number'convierte todas las cadenas de texto en
número. También tenemos otro valor importante, que
sería'parseInt'. 'ParseInt' lo que hace es "parsear" un texto como si fuera igual a
un número pero convirtiéndolo completamente en entero. Cuando nosotros
vamos a probar este método vemos que el valor que está almacenado dentro
de'número' es el valor 10. 30. Es decir, este valor tiene dos decimales que
buscamos convertir, pero al utilizar el método'parseInt' lo único que retornamos
es un valor entero y eso lo puedes revisar en esta parte, porque aquí
simplemente el valor sale ya sin ningún número decimal. También contamos
con una operación que sí me va a considerar esos decimales y esa operación se
llama'parseFloat'. De la misma forma, lo único que tenemos que enviar es el
número. Así, actualizo mi navegador y podemos ver como tenemos este
flotante, es decir, sigue considerando el número que tenemos completamente, y
si nosotros lo llegamos a modificar o agregar más decimales, estos decimales
siguen siendo válidos. También, yo tengo la opción de preguntar si un
número es realmente o no un número. ¿Recuerdas'NaN'? 'NaN'significa "not a
number" y para lo mismo existe una función llamada'isNaN'. Esta
función'isNaN' lo que va a hacer es preguntar si lo que yo estoy enviando como
parámetro de esta función es o no un número. Cuando yo actualizo, en este
caso, me sale un valor que dice "false". ¿Qué quiere decir? Que el contenido
de'número'no es un número. Aunque se escuche algo redundante, tiene mucha
razón, puesto que el contenido de'número' es una cadena de texto. Y, por
último, tenemos otro método importante: 'isInteger'. 'IsInteger'lo que hace es
preguntar si el valor que nosotros estamos enviando es o no un número
entero. Pero ten un poco de cuidado, porque para esta situación necesitamos
utilizar el objeto'number'para poder hacer esta prueba. De hecho, también tú
podrías hacerlo directamente así con los demás. Es decir, por ejemplo, 'number.
parseFloat' o'number. isInteger', pero el único que lo pide formalmente es la
opción de'isInteger'. Y cuando nosotros actualizamos nuestro
navegador podemos probar que esto realmente no es un entero. Incluso, si yo
llego aquí y modifico el valor que tenemos sigue siendo no un entero, ¿por
qué?, porque lo que está almacenado acá es una cadena de texto, y si yo lo
convierto o a un número, es decir, le quito las comillas, entonces los valores
cambian. Así, nosotros ya podemos trabajar con algunas operaciones y poder
hacer las conversiones y validaciones de números cuando necesitamos que
estos realmente sean un número y no una cadena de texto.
Creación de cadenas de texto
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Trabajar con cadenas de texto es algo muy sencillo. Lo primero que tenemos
que aprender es cómo se crea una cadena de texto. La manera más tradicional y
simple de crear una cadena de texto es asignando un valor que se encuentre
entre comillas. Es decir, si yo escribo, por ejemplo, aquí, la palabra México, esto
ya es una cadena de texto. Cuando yo guardo y pruebo, yo puedo preguntar
aquí, directamente en la consola, 'typeof' y puedo enviar el nombre de la
variable, que es'país'. Nosotros podemos ver aquí que es una cadena de
texto. Al contrario, si yo solamente hubiera guardado un número, por ejemplo,
10, y vuelvo a realizar la misma prueba después de actualizar mi
navegador, tenemos un tipo'number'. Los textos que vamos a guardar pueden ir
entre comillas dobles o entre comillas simples. Si son comillas simples irían de
esta manera. Yo puedo tener aquí una cadena vacía, pues no existe nada entre
las comillas, o puedo tener un espacio en blanco o dos o tres o la cantidad que
necesite. Lo ideal es que siempre inicialices tus variables que tengan que ver
con texto, ya sea que las inicialices así o que asignes un valor de inicio. Otra
manera que existe y que probablemente te llegues a encontrar en algún lugar
cuando estés investigando más sobre JavaScript es crearlo a través de la
instancia de un objeto. Para esto, vamos a crearlo utilizando la palabra
reservada'new' y trabajando con el objeto'string'. Este objeto'string'recibirá
como parámetro, entre comillas, de la misma manera que un texto normal, el
valor que nosotros queremos guardar. Por ejemplo, aquí yo deseo guardar la
palabra ceviche dentro de la variable'comida'. Si yo actualizo mi navegador y
hago la prueba pertinente, pero ahora hago la prueba sobre la
variable'comida', voy a verificar que también tengo una cadena de texto pero,
en este caso, se entiende como si fuera un objeto, pero sigue siendo una
cadena de texto. Estas siguen siendo dos formas en las cuales podemos
trabajar. Pero, rápidamente, veamos también qué sucede cuando tenemos este
tipo de objeto. De hecho, si yo solamente mando imprimir en pantalla el
valor'comida', podemos ver que tenemos una cadena de texto muy grande pero
que está separada por cada una de las letras, es decir, el tratamiento que le
damos utilizando este objeto es muy distinto al tratamiento que le damos
simplemente utilizando comillas. Todo dependerá de lo que busques lograr con
tu aplicación. Mi recomendación es: siempre que desees crear una variable y
almacenar dentro de esta una cadena de texto, utiliza comillas, ya sean dobles o
ya sean simples, es la manera más simple y sencilla de poder trabajar con
cadenas de texto.

Medir una cadena de texto

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Algo que vas a necesitar muchas veces en toda tu etapa como desarrollador
de aplicaciones web con JavaScript será medir una cadena de texto. ¿Esto qué
quiere decir? Si nosotros tenemos una variable que almacena un texto, a veces
necesitaremos saber cuántos caracteres tiene esa cadena, que pueden ser cero,
es decir, ninguno, o puede ser una cantidad incierta. La idea es que si tienes
cero, entonces, quiere decir que tal vez no puedas continuar con tu proceso
porque no hay un dato que procesar. Entonces, podemos hacer esta
medición. Vamos a abrir rápidamente nuestra aplicación en el navegador. Una
vez que nosotros lo abrimos, vamos a tener aquí una cadena de texto. Por ahora
no le pongas tanta atención, en lo que trabajaremos es escribir aquí
directamente en la consola la palabra'mensaje . length'. Cuando nosotros
escribimos esto vemos que tenemos un valor de cero. ¿Qué pasa si aquí en el
mensaje yo agrego una letra, en este caso la letra'a'? Cuando trabajo con esta
letra'a', actualizo nuevamente el navegador, ejecuto nuevamente el'mensaje.
length' y al hacerlo tenemos un valor de 1 y así sucesivamente hasta
llenarlo. Por ejemplo, yo tengo una cadena más grande, vamos a probar y
veamos qué dice. Tenemos 28 caracteres. Obviamente, se cuentan todos los
caracteres incluidos los espacios, ya sea que tengas espacios antes o después de
la cadena de texto, pero siempre y cuando se encuentren dentro de las
comillas. Como puedes ver en la cadena de texto que tenemos aquí dentro
del'console. log', tenemos una leyenda que dice "La cadena de texto tiene : " el
valor de'mensaje': 'letras'. Para que esto tome sentido, nosotros necesitaremos
utilizar la propiedad'length'. Esta propiedad se la vamos a pegar directamente a
la variable'mensaje', seguida de un punto, es decir, 'mensaje . length'. Así,
cuando nosotros ejecutamos nuestro código, podemos ver que dice "La cadena
tiene 28 letras". En este caso, estamos midiendo todo este texto y lo estamos
plasmando directamente en este'console. log'. De esta forma, ya sabes cómo
medir la cantidad de letras que existen en una cadena.

Búsqueda de texto por índices y por expresiones regulares

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El trabajo con cadenas de texto en JavaScript tiene mucha relevancia
e importancia, por lo cual vamos a revisar ahora distintos métodos de
búsqueda. En esta primera parte, vamos a revisar algunos
métodos. Trabajaremos con'indexOF', las'indexOF Search' y una variante de esta
con una expresión regular. Para utilizar cualquiera de estos métodos, tenemos
que asignarlos y usarlos directamente con la variable que nosotros queremos
evaluar. En este caso tenemos una variable llamada'mensaje'. Sobre esta
variable yo quiero realizar operaciones. Así que voy a escribir'mensaje .
indexOF' y de aquí voy a tener unos paréntesis y dentro de esto voy a mandar lo
que yo quiero buscar. Por ahora vamos a escribir la palabra'aprendiendo'para
que comencemos a buscar esta palabra. ¿Pero qué es lo que
busca'indexOF'? Este método lo que busca es la posición de la primera
ocurrencia del valor que estamos buscando, es decir, comenzará buscando por
letras. Entonces, aquí tenemos: posición uno, dos, tres, cuatro, cinco, seis, y a
partir de aquí encuentra la palabra que estamos buscando. Esto es lo que va a
hacer'indexOF': buscar la primera incidencia y lo que nos regresa es la posición
en la que se encuentra dentro de estos caracteres. Vamos a actualizar el
navegador para ver el resultado. Como podemos ver, tenemos un valor 6, que
es lo que estamos mandando imprimir aquí y es lo que nos
regresó'indexOF'. Ahora nosotros tenemos otro método
llamado'lastIndexOf'. Para evitar alguna confusión, vamos a comentar esta
línea y vamos a descomentar la línea correspondiente a las'indexOF'. En este
caso vamos a utilizar'mensaje. lastIndexOf' y vamos a buscar la misma palabra
que estábamos revisando en el ejercicio anterior. Aquí, lo que va a
hacer'lastIndexOf' es buscar la última aparición de esta palabra. Para eso
tenemos preparado esta variable'mensaje', donde tenemos la
palabra'aprendiendo' y,, a propósito habíamos dejado esta frase que
dice'prendiendo'. Vamos a ponerle la'a'antes, para que sea la misma
palabra. Así, este'lastIndexOf'me va a regresar en donde inicia esto. Si recuerdas,
la primera que nosotros buscábamos nos regresaba a la opción 6. Entonces,
este'lastIndexOf'nos debe de regresar la posición que
ahora encontró. Actualizamos el navegador y podemos ver que eso está en la
posición número 37, lo cual es correcto. Así, entonces, ya sabemos
que'indexOF'nos encuentra la primer incidencia y'lastIndexOf'nos encuentra la
última incidencia dentro de esa misma cadena de texto. Ahora vamos a trabajar
rápidamente con el método'search'. Este método'search' también nos va a
regresar la posición en donde se encuentra el texto dentro de nuestra
variable. Vamos a quitar el comentario de esta línea y vamos a utilizar aquí el
método'search'. Trabajando con este método'search', vamos a buscar la palabra
aprendiendo, que será la primer incidencia. Entonces, vamos a actualizar y
vemos como me encuentra dentro de la posición número 6 esta palabra. Como
puedes ver, es muy similar a'indexOF', entonces puedes utilizar cualquiera de las
dos. Este método'search'tiene una variante, la cual podremos utilizar trabajando
con una expresión regular. Para trabajar con esta expresión regular, lo único que
tenemos que hacer es armar primero dicha expresión. En este caso, lo que
vamos a buscar es la palabra 'ja' o, es decir, la unión de la letra jota y'a' dentro
de todo este texto. Como podemos ver, aquí tenemos la jota y tenemos
la'a'. Tenemos una'i'que lo va a hacer "in case sensitive". ¿Qué es esto? Para
poder revisarlo, vamos a quitarlo. Y una vez que lo quitamos, actualizamos
nuestro navegador y podemos ver que nos sale un texto que dice -1. Siempre
que cualquiera de estos te arroje un resultado de -1, quiere decir que
no encontró ninguna coincidencia. ¿Por qué no la encontró? Porque aquí
tenemos jota, 'a'–y la jota es mayúscula– y aquí la estamos enviando con
minúscula. Si la escribimos con mayúscula nuevamente y realizamos la
búsqueda, nos regresa a la posición, ¿pero qué sucede si tú no puedes convertir
el texto? Entonces, agregamos el operador'i', que lo va a hacer "in case
sensitive", es decir, no me importa si es mayúscula o minúscula. Actualizamos
nuevamente y podemos ver que tenemos el mismo resultado. Ahora ya
tenemos dentro una serie de funciones que nos van a servir para realizar cierto
nivel de búsquedas en una cadena de texto.

Búsqueda de caracteres en cadenas de texto

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Otros métodos de búsqueda de texto que nos van a facilitar mucho el
trabajo cuando estemos trabajando con cadenas serán los siguientes. El primero
de ellos, 'match', el segundo, 'substr', el tercero, 'substring' y el
cuarto, 'charAT'. Vamos a comenzar trabajando primero con el que se
llama'match'. Para esto, nosotros trabajaremos utilizando una expresión
regular. 'Match'recibe este tipo de datos. Para poder agregar esta expresión
regular, lo primero que estamos haciendo es agregar un par de
diagonales. Vamos a buscar y veamos qué sucede. Una vez que yo busque, el
resultado que me retorna es el siguiente: es un arreglo donde nos indica que
encontró la palabra aprendiendo que estábamos buscando en la posición
número 6, en la cadena de texto "Estoy aprendiendo JavaScript y estoy
aprendiendo mucho", pero no encontró la segunda iteración. Para que pueda
buscar en todas, simplemente vamos a agregar el operador'g'. Actualizamos
nuevamente y, una vez que lo hacemos, vemos como tenemos un arreglo con
las dos opciones que pude encontrar. Y, en este caso, cada una de las opciones
va a estar almacenada en un arreglo, es decir, la manera en cómo se almacena
será algo distinta, pero podremos encontrar todas las incidencias que hayamos
visto. Y, de hecho, si una comienza con'A'mayúscula y la otra
con'a'minúscula, ¿qué sucede? La expresión regular no la detecta y, en este
caso, simplemente está guardando una opción. Para poder solucionarlo,
podemos combinar un par de operadores, en este caso el operador'g', que es
global, y el operador'i', que lo va a hacer "in case sensitive", es decir, va a
ignorar el uso de mayúsculas y minúsculas. Actualizamos nuevamente y vemos
como tenemos, ahora sí, las dos cadenas de texto, una con mayúscula y otra
con minúscula. Trabajemos ahora con el método'substr'. Para esto vamos a
comentar la línea anterior y vamos a descomentar esta con la que deseamos
trabajar. Aquí, al mismo modo que el anterior, tendremos que agregar el
método'substr' y lo que recibe de parámetros son dos cosas importantes, que,
de hecho, cambia un poco el contexto. Lo que recibe de parámetros son los
caracteres desde el primero que va encontrar, es decir, la primera posición que
será la 6, que será por acá, y de ahí hasta la posición 11. Pero hay que tener
cuidado porque de aquí comienza a contar 11 espacios, es decir, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11. Es decir, cubre toda la palabra. Veamos qué sucede. Actualizo mi
navegador y vemos que tengo la palabra'aprendiendo'. Como puedes ver, a
diferencia de los otros métodos que hemos utilizado, este no te retorna una
posición, al contrario, te retorna el pedazo de texto que estás buscando. Así que
lo que puedes hacer es utilizar los otros métodos para poder conseguir la
ubicación de dónde a dónde quieres extraer el texto y después de eso lo
puedes almacenar o buscarlo directamente con'substr'. La otra alternativa que
tenemos a'substr' es la alternativa'substring', pero esta cambia un poquito.
Cuando lo vamos a utilizar lo invocamos de esta manera. Probamos en nuestro
navegador y vemos que tenemos el mismo resultado, pero ¿qué sucede?, ¿por
qué el mismo resultado si están cambiando los índices? Lo que pasa es que, al
contrario de'substr', comienza a contar siempre desde el inicio de la
cadena. Repasemos esto: 'substr'cuenta la primera, que es 6, y comienza aquí y
a partir de aquí empieza la nueva cuenta, que en este caso sería
11. Pero'substring'comienza en 6 primero y el 17 que tenemos aquí arranca
desde la primera parte, es decir, desde acá, desde el inicio de la
cadena. Entonces tendremos 17 espacios: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
15, 16 y 17. Así tenemos, entonces, dos variantes para poder buscar una cadena
de texto. Vamos a comentar ahora esta línea y vamos a trabajar con el último
método de esta parte, que es'charAT' o char A T. Lo que va a hacer esto es
indicarnos, sencillamente, cuál es el carácter que estoy buscando. Por
ejemplo, si me gustaría tener el carácter número 3 sería este 1, 2, 3. Así que yo
aquí directamente lo que voy a hacer es escribir la función utilizando el punto, y
para eso diré: 'mensaje. charAT o charA'. Actualizo mi navegador y vemos que
en este caso yo tengo la letra'o'. ¿Por qué no consigue si tenemos 1, 2, 3 y el
que estoy buscando es el 3? Lo que sucede es que la cuenta en este tipo de
métodos comienza siempre en 0. Entonces, podemos trabajar primero con 0, 1,
2, 3 y ahora sí toma coherencia. De hecho, si nosotros escribimos aquí el
número 0, cuando hacemos la prueba vemos que tenemos la relación con la
letra'E'. De esta forma, ya tenemos más métodos con los cuales podemos
trabajar para hacer una búsqueda más refinada de texto.

Búsqueda de cadenas de texto específicas

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La evolución de JavaScript nos ha permitido hasta ahora contar con
nuevos métodos. En este caso, nuevos métodos de búsqueda que me van a
facilitar mi trabajo como programador. Para este ejercicio vamos a trabajar con
tres métodos distintos, uno de ellos es'startsWith', el otro'endsWith' y uno más
que es'includes'. Como ves, cada uno de sus nombres es
intuitivo. Con'startsWith'veremos si comienza con; con'endsWith'veremos si
termina con; y con'includes'veremos si está o no incluido el texto que estamos
buscando. Así que ahora vamos a trabajar primero con el primer
método. Comenzaremos escribiendo'mensaje . startsWith', la palabra'ja', es
decir, este mensaje comienza con la palabra'ja' y vamos a
revisarlo. Actualizamos el navegador y nos dice "false". ¿Por qué "false"? Porque
realmente está buscando si la cadena de texto comienza con esto, pero como
no comienza entonces nos retorna un "false". ¿Pero qué pasa si yo escribo aquí
la palabra'es'? Actualizamos y ahora sí nos regresa un "true". Aquí sí vamos a
tener una diferencia muy importante y que debes de saber. Si yo escribo la
palabra'es', que debería de ser esto, cuando yo actualizo me regresa un
"false". ¿Esto por qué es? Porque todos estos métodos que estaremos
trabajando en este ejercicio son sensibles a mayúsculas y minúsculas, entonces
debemos tener cuidado al respecto. Es posible que también tengamos una
variante en esta búsqueda. Para esto vamos a comentar esta cadena y vamos a
generar una nueva variable llamada'texto en'. ¿Qué estamos haciendo?
Utilizando otro método que se llama'indexOf' y lo que buscaremos es la palabra
JavaScript. Cuando yo actualizo mi navegador y ejecuto'indexOf', podemos ver
que me dice que comience en la letra 18. ¿Y por qué estoy comenzando
esto? Porque si yo hago la búsqueda con'startsWith' y mando la posición que
tengo en'texto en', quiere decir que va a comenzar a realizar la búsqueda de
esta palabra directamente en la posición 18 que habíamos visto. Así que vamos
a copiar el contenido de'texto en' y vamos a comenzar la
búsqueda. Actualizamos nuestro navegador y vemos que nos retorna un
"false". ¿Esto por qué es? Porque está buscando la palabra'es'. Busquemos
ahora'ja'. Actualizamos y vemos como tenemos un valor en "true" porque a
partir de la posición 18 comenzó a hacer la búsqueda. Entonces ahora, como
puedes ver, tenemos ya dos métodos mezclados a los cuales podemos sacar
bastante provecho. Vamos a comentar estas dos líneas y continuamos con el
siguiente método que tenemos pendiente. En este caso vamos a trabajar con el
método'endsWith'. Y aquí, al contrario del trabajo con'startsWith', lo único que
vamos a hacer es preguntar si termina con este texto. Actualizamos el
navegador y vemos que, efectivamente, sí termina con este texto, porque
tenemos almacenado en la variable mensaje "Estoy aprendiendo
JavaScript". Entonces, ahora ya podemos saber si comenzamos con cierta
cadena de texto y si terminamos con cierta cadena de texto. Ahora trabajemos
con la última función que tenemos, que es'includes' y aquí en'includes'va a
trabajar exactamente de la misma manera. De hecho, yo puedo preguntar si
incluye alguna palabra. En este caso vamos a preguntar: ¿'mensaje'incluye la
palabra JavaScript? Actualizamos el navegador y vemos que tenemos la palabra
"true". Y esa también puede llegar a tener una variante. Por ejemplo, yo puedo
indicarle que comience a realizar la búsqueda a partir de algún espacio. Vamos
a trabajar con el espacio número 6, es decir, que comenzará aproximadamente
por esta zona. Actualizamos el navegador y vemos que nos sigue saliendo un
"true". Vamos a buscar otra nueva palabra, por ejemplo, busquemos ahora la
palabra'estoy'. Actualizo mi navegador y vemos que tenemos ahora una
referencia falsa, ¿por qué?, porque está comenzando a contar la búsqueda a
partir de la posición 6, es decir, 1, 2, 3, 4, 5, 6 y a partir de esta posición la
palabra "estoy" ya no existe. Entonces, con eso podemos nosotros delimitar la
búsqueda que vamos a hacer o, más bien, delimitar de dónde a dónde
queremos buscar. Así, entonces, ya contamos con tres métodos nuevos para
poder hacer una búsqueda más sofisticada, y aprendimos cómo integrar estas
funciones con algunas otras funciones de búsqueda de texto.

Métodos de generación, reemplazo y separación

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Las situaciones que se nos pueden presentar cuando estamos trabajando
con cadenas de texto pueden ser muy variadas, es por eso que también
tenemos algunos métodos para generar texto, para reemplazar o para
separar. En este caso vamos a generar texto a través de una
repetición. Nosotros tenemos una función llamada'repeat', y dentro de esta
función llamada'repeat' vamos a invocarla directamente al mensaje, y aquí lo
que estamos diciendo es que vamos a repetir lo que hay dentro de mensaje N
cantidad de veces. Vamos a trabajar primero con dos veces. Actualizamos
nuestro navegador donde estamos probando y vemos que tenemos aquí un
texto que dice: "Estoy aprendiendo JavaScript", y sin espacio vuelve a decir
nuevamente: "Estoy aprendiendo JavaScript". ¿Qué sucede, por ejemplo, si yo
incremento el número a 4? Actualizamos el navegador y tenemos 4 repeticiones
almacenadas en esta variable. Y si, de pronto, yo quiero mandar a imprimir 200
caracteres de estos, actualizo mi navegador y tengo 200 repeticiones. Esto
puede serte muy útil cuando estés trabajando, por ejemplo, con algunos datos
ficticios para poder estar maquetando una página web y necesitas tener mucho
texto para llenar algunos bloques. Obviamente, esto durante la etapa de
pruebas de tu proyecto. Veamos otro método, que es el método'replace'. Para
esto vamos a comentar la línea en la que estábamos trabajando y vamos a
remover los comentarios de la línea 14. En este caso vamos a trabajar con el
método'replace'. El método'replace'lo que hace es buscar una cadena de
texto. La cadena de texto que va a buscar en este caso es la palabra
JavaScript, la va a ubicar y la va a reemplazar por el texto que tenemos aquí:
"a programar", para que ahora mi leyenda termine diciendo: "Estoy aprendiendo
a programar" en lugar de decir "Estoy aprendiendo JavaScript". Actualizamos
nuestro navegador y vemos como ahora ya tenemos la leyenda que dice: "Estoy
aprendiendo a programar". De esta forma, yo estoy buscando texto en una
cadena y lo estoy reemplazando por algo más, pero esto lo que va a hacer con
el mensaje es dejarlo completamente intacto. ¿Qué sucede? 'Replace'ejecuta la
función y retorna un resultado, pero no afecta el valor original. Vamos a trabajar
ahora con el método'slice'. El método'slice'también nos permite realizar algunas
cosas, por ejemplo, vamos a almacenar primero en la variable
resultado 'mensaje . slice' y para esto simplemente voy a ajustar correctamente
el mensaje y debe de quedar de esta manera: 'mensaje. slice'y estoy mandando
la posición número 6. Actualizamos nuestro navegador y vemos como lo que
está haciendo es colocar el cursor de inicio en la posición 6, por lo cual tú
puedes ver que esta palabra de "Estoy" y el espacio ya no es considerado. De
hecho, también tú puedes determinar cuánto espacio vas estar ocupando o
hasta qué lugar quieres hacer el corte. Por ejemplo, voy a comentar esta
línea, les comentaré la de abajo para que tengamos otro ejemplo, y lo que
vamos a hacer aquí es lo siguiente. Vamos a escribir'mensaje. slice', que
comience en la parte 6 y termine según la cantidad del mensaje. Actualizamos
nuestro navegador y vemos que dice "aprendiendo JavaScript". ¿Pero qué pasa
si en lugar de mensaje yo necesito hacer un cálculo y necesito quitarle 5
espacios? Lo aplicamos, actualizo y vemos como se corta. Yo necesito ahora
quitarle y dejarle 6 espacios. Actualizamos nuevamente y ahora mi texto ha
cambiado por una cosa diferente, que dice "aprendiendo Java", lo cual
obviamente no es correcto para este curso, pero solamente lo estamos
utilizando para tenerlo en caso de ejemplo. De hecho, yo puedo trabajar
también de esta manera y escribir aquí un número, puedo dejar ahí el texto 11 y
estamos recibiendo solamente este texto. Revisemos el siguiente, que es el
método'split'. Este método'split'lo que va a tener es que va a separar toda la
cadena de texto en un arreglo, y para esto diremos: 'mensaje. split' y vamos a
mandar el texto sobre el cual queremos hacer la separación. Vamos a actualizar
nuestro navegador y al momento de actualizar podemos darnos cuenta que
tenemos ahora un arreglo con todas las palabras:
"Estoy", "aprendiendo", "JavaScript". ¿Esto qué es? Es un arreglo y, simplemente,
tenemos todas las palabras distribuidas. ¿Pero qué sucede si tú te
encuentras con un mensaje que tiene puros guiones? Entonces aquí, en la parte
del'split', lo que vamos a hacer es mandar la separación utilizando los
guiones. Actualizamos el navegador y vemos como funciona. Si yo lo dejara con
el espacio y actualizo nuevamente, vemos que esto ya no va a tener ninguna
función y simplemente me regresa la misma cadena de texto. Y el último
método que vamos a tener y que también resulta ser muy efectivo es el
método'trim'. Voy a regresar este mensaje al estado original en el que
estábamos trabajando y voy a dejar algunos espacios de manera exagerada al
inicio y al final de la cadena de texto. Esto, con el objetivo de utilizar este
método. El método'trim'lo que va a hacer es eliminar los espacios en blanco que
hay antes y después de una cadena, así que actualizamos nuestro navegador y
vamos a probar que tenemos el puro texto en blanco. Si yo, por ejemplo, no
hubiera puesto el mensaje de'trim', lo voy a quitar aquí, actualizo, vemos como
tenemos los espacios en blanco antes y después. Por eso también es importante
que muchas veces, cuando estés procesando información como contraseñas,
correos electrónicos nombres o cualquier dato de un formulario, siempre le
pases este método'trim'para que tengas exactamente la cadena de texto que
quieres buscar. De esta forma, hemos revisado casi todos los métodos de
búsqueda de texto que existen para que puedas integrarlos directamente a tu
proyecto de JavaScript.

Métodos de transformación de texto en JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas veces vamos a necesitar transformar el texto a otra forma pero que siga
siendo una cadena de texto, o, incluso, necesitamos transformarlo de un
número a un texto. Ya hemos visto que cuando trabajamos con
número disponemos nosotros de un método llamado'toString'. Este
método'toString' lo que va a hacer es convertir en este caso un número a una
cadena de texto. De hecho, si yo aquí escribo'typeof'para probar el tipo de dato
que voy a estar utilizando y escribimos correctamente'typeof', nos cercioramos
de usar correctamente la función y escribimos la variable'resultado', podemos
ver que tenemos una cadena de texto. Esto es algo muy sencillo. Ahora, a veces
también necesitamos cambiar nuestra cadena de texto, por ejemplo, todo en
minúsculas. Si bien esto es un comportamiento que también podemos hacer
con CSS y es recomendado, algunas veces este método puede sacarnos de
muchos apuros. Entonces tendremos'mensaje. toLowerCase'. Actualizamos
nuestro navegador y vemos como ahora todos los textos están en
minúscula. Eso podemos identificarlo porque la'e'y la jota, que estaban en
mayúscula, ahora aparecen completamente en minúscula. Y la operación
contraria que tenemos para'toLowerCase' es convertir toda nuestra cadena de
texto en mayúsculas. Entonces ¿qué vamos a hacer? 'mensaje. toUpperCase', es
decir, hacia arriba o en mayúsculas. Actualizamos el navegador y vemos como
ahora todos los textos aparecen en mayúscula. Esto, obviamente, nos va a
permitir a nosotros estar haciendo modificaciones cuando estemos
programando. Ahora veamos también un método más que nos va a servir
mucho para poder trabajar o transformar los textos y este es el texto de
concatenación. Si bien ya lo vemos que podemos utilizar el símbolo de cruz o
de más para hacer la concatenación, todas las cadenas de texto tienen un
método llamado'concat'. Este método llamado'concat' lo que va a estar
haciendo es concatenar todo lo que nosotros estemos mandando. Por ejemplo,
en este caso estamos mandando a'mensaje'y'mensaje2', es decir, estoy
diciendo: "Mensaje, concaténate con el contenido de'mensaje2'" ¿Y qué es lo
que va a decir? "Estoy aprendiendo JavaScript" "y programación". Si nosotros lo
revisamos aquí, directamente, podemos ver esta leyenda. Vemos que JavaScript
y la i griega se pegan. Para poder despegarlo, simplemente agregamos un
espacio al inicio de'mensaje2', actualizamos y vemos que tenemos el texto. Pero
no solamente podemos concatenar con una sola variable, también podemos
concatenarlo con dos. Por ejemplo, que diga ahora: "Estoy aprendiendo
JavaScript y programación y tengo muchas ideas". Y si yo quiero agregar más
texto, lo único que tendré que hacer es una separación a través de una
coma, puesto que este tipo de métodos puede recibir N cantidad de
parámetros. Vamos a exagerar un poco y mandemos varios conceptos de 123 y
dejémosle un poco de espacios en blanco, simplemente para que estos no se
amontonen y podamos leerlo un poco más claro. Actualizamos el navegador y
vemos como tenemos ahora el texto que dice: "Estoy aprendiendo JavaScript y
programación y tengo muchas ideas 123 123 123" y la N cantidad de textos que
yo haya hecho. De esta forma, entonces, podemos transformar directamente
nuestro texto ya sea en mayúsculas, minúsculas, en cadenas de texto o unir
distintos tipos de cadenas de texto.

Cómo funcionan en JavaScript las plantillas y los literales

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una de las cosas verdaderamente funcionales cuando trabajamos con
cadenas de texto que posee JavaScript es el uso de plantillas y literales. Veamos
cómo funciona esto. Primero tenemos aquí una variable llamada'lenguaje'que
dice: JavaScript, una variable HTML, y tenemos una breve'mensaje'que está
vacía y que podemos mandar imprimir aquí, en consola. Lo que nosotros
queremos hacer es escribir un mensaje que concatene los datos. Por ejemplo,
yo puedo escribir "Me gusta JavaScript". Pero si yo quisiera utilizar el JavaScript
que tengo acá, lo que tendría que hacer yo normalmente es escribir el símbolo
de más y poner la palabra'lenguaje'. Cuando yo actualizo mi navegador, dice
"Me gusta JavaScript". Esto puede ser correcto, pero a la larga cuando nosotros
necesitemos estar manteniendo nuestro código o agregarle más funciones
puede ser algo complicado. Entonces ¿qué vamos a hacer? Primero voy a
eliminar todo el contenido del mensaje porque desde aquí comienza el
truco. Lo primero es utilizar unas comillas especiales que también se pueden
conocer como "backticks". Estas "backticks" o comillas especiales me van a
ayudar a determinar la manera en cómo voy escribir esto. Es decir, con este tipo
de comillas tendré la capacidad de escribir plantillas. ¿Y de qué manera lo voy a
hacer? Primero, de la manera tradicional, escribiendo "Me gusta". Y cuando yo
quiero usar la palabra'lenguaje', en lugar de concatenar voy a utilizar el símbolo
de dólar o pesos, y después de esto voy a trabajar con un par de llaves. Aquí,
adentro de las llaves, voy a mandar el nombre de la variable y, si te das
cuenta, esto cambia de color también dependiendo de tu editor de
código. Vamos a guardar nuevamente y actualizamos y vemos como ahora
tenemos el texto que dice: "Me gusta JavaScript". Esto, obviamente, nos permite
tener una plantilla más versátil. Y, de hecho, si yo quisiera trabajar con otra
variable lo puedo hacer, es decir, puedo integrar tantos elementos como yo
necesite dentro de esta cadena de texto. Entonces, por ejemplo, quiero decir:
"Me gusta'lenguaje' y su integración con el lenguaje2". Así que comenzamos
nuevamente: símbolo de dólar o pesos, y aquí vamos a mandar el nombre de la
variable que tenemos, que es'lenguaje2'. Actualizamos nuestro navegador y
vemos como el texto cambia y dice: "Me gusta JavaScript y su integración con
HTML". Esto es bastante usable. De hecho, cuando tú llegas a trabajar con
colecciones de datos muy grandes y necesitas estar actualizando
continuamente, esto te facilita bastante el manejo de una
plantilla. Ahora veamos lo siguiente. Voy a comentar este'console. log'y voy a
descomentar esta variable que se llama'mensaje multimedia'y por tanto
también su'console. log'. Lo que aquí voy a hacer es también utilizar una
plantilla, pero puedo usarla en modo multilínea. ¿Qué es esto? Trabajo con los
"backticks" nuevamente, pero aquí tenemos una ventaja: podemos trabajar con
distintas líneas y así yo puedo ordenar mi texto. Entonces, ¿qué te parece si yo
desde aquí escribo el siguiente texto que dice: "Hola mundo, estoy
aprendiendo lenguaje", que es la variable que tenemos acá, "y me gusta como
se integración con HTML y CSS". Nos podemos dar cuenta que este texto está
mal, entonces vamos a corregirlo: "y me gusta como se integra", que es lo que
debería decir "con HTML y CSS". Solamente para quitar este último espacio
dejaremos el "backtick" que cierra en esta parte y actualizamos nuestro
navegador. Como puedes ver, cuando mandamos el texto, este sigue
respetando la multilínea. Esto es una de las grandes ventajas que se tiene
cuando trabajamos con plantillas y literales. De esta manera, trabajar con
cadenas de texto llega a un nuevo nivel y de esto puedes sacar muchísimo
provecho cuando escribes código.

Crea tu primer arreglo con JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Los arreglos son estructuras de datos que nos permitirán almacenar más de
un tipo de dato dentro de una misma variable. ¿Qué significa esto? Que si yo
tengo información de distinta índole y quiero almacenarla en un solo lugar, lo
voy a poder hacer con estos arreglos. Los arreglos tienen una sintaxis en
específico, es decir, una manera exclusiva de escribirlos. Para que nosotros
podamos identificar un arreglo necesitaremos utilizar los caracteres de los
corchetes. Al usar estos caracteres podrás identificar un arreglo, así cuando
estés trabajando en cualquier lugar y veas que hay corchetes de por medio
significa que todo lo que está dentro de ese lugar son elementos de un
arreglo. Por ejemplo, si yo quiero construir aquí un arreglo, ya escribí mis
corchetes y voy a agregar el primer elemento. En este caso vamos a hacer un
arreglo de'platillos'. Por ejemplo, yo voy a poner el primer producto, que va a
ser un'ceviche'. Así, ya tengo el elemento número uno de mi arreglo. Si quiero
agregar un elemento más, lo único que tengo que hacer es escribir una coma
para separarlo y agregar el siguiente elemento, que en este caso será 'tacos'. Y
si yo deseo agregar uno más, vamos a escribir nuevamente una coma y
agregamos el elemento que necesitemos. De esta forma, yo puedo
agregar tantos elementos necesite. Puedo agregar 1, 10, 20, 100. Obviamente,
procura que siempre tu aplicación esté bien planeada para que solamente los
datos adecuados estén en este lugar. Para probar que nuestro arreglo funciona
correctamente vamos a actualizar nuestro navegador y vamos a ver como aquí
ya nos está mostrando un arreglo. De hecho, lo que tú puedes ver aquí es el uso
de los corchetes. Cuando nosotros abrimos el espacio vamos a encontrar
primero algo interesante: 1) vamos a tener una numeración por cada uno de los
elementos que conforman el arreglo, pero, si te das cuenta, esta numeración
siempre comienza con 0. ¿Qué quiere decir? Que la posición 0 es la primer
posición que tenemos. Aquí debes de tener mucho cuidado, puesto que todos
estamos muy acostumbrados siempre a pensar que cuando comenzamos a
contar comenzamos a contar en 1, y para la cuestión de los arreglos siempre
deberemos comenzar a contar en 0. Por tanto, el elemento que se encuentra en
la posición 0 del arreglo llamado'platillos' es la palabra'ceviche'. De ahí, la
posición 1 es'tacos', como podemos ver acá. Y la posición 2 es la
palabra'pasta'. Ahora tenemos otra manera de poder escribir un arreglo y esto
es utilizando el método'Array'. Aquí vamos a escribir'new'utilizando esta palabra
reservada y vamos a escribir la palabra'Array'. Aquí nosotros vamos a tener unos
paréntesis, lo cual nos indica el uso de una función. Y, de la misma manera, yo
puedo agregar tantos elementos necesite. En este caso vamos a agregar tres
elementos. Ya que es un arreglo de bebidas, tendremos: "Jamaica", "Chicha
Morada" y "Pozol". Las tres son bebidas. Actualizamos nuestro navegador y
vamos a ver como ahora ya tenemos dos arreglos: uno que tiene que ver
con'platillos' y el otro que tiene que ver con'bebidas'. Si en algún momento
necesitas preguntar si la variable realmente es un arreglo o no, podemos
utilizar la palabra clave'typeof'. Aquí, con'typeof', nos va a indicar cuál es el tipo
de dato de esta variable. En este caso'platillos'me indica que es un objeto. Pero,
espera, ¿no estábamos trabajando con arreglos? Vamos a abrir un poco la
ventana que tenemos y el siguiente elemento sí es un arreglo, pero este lo está
identificando como si fuera un objeto. Por tanto, el método adecuado que nos
va a servir para poder identificar si es o no un arreglo será el método'isArray',
que corresponde al objeto'Array', donde "array" es arreglo en inglés. Así,
entonces, yo voy a mandar la palabra'Array . isArray'. Es decir, está
preguntando si es o no un arreglo lo que le mandamos como parámetro, en
este caso, la palabra'platillos'. Actualizamos nuestro navegador y vemos como el
resultado que me aparece es "true". Quiere decir que el contenido de'platillos' sí
es un arreglo. De esta manera, yo ya puedo crear arreglos e identificarlos
sin ningún problema.

Cómo medir y acceder en JavaScript a un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando trabajamos con arreglos, va a haber dos cosas que vamos a
necesitar saber indudablemente ante cualquier operación. La primera de ellas es
cuánto mide nuestro arreglo, y la segunda de ellas es cuál es la información que
se encuentra en determinada posición de nuestro arreglo. Vamos a resolver la
primera, es decir, vamos a medir nuestro arreglo. Nosotros sabemos, por lo que
estamos viendo en pantalla, que nuestro arreglo tiene tres posiciones. La
posición 0, que es'ceviche'; la posición 1, que es'tacos'; y la posición 2, que
es'pasta'. Vamos a medir. Yo puedo escribir aquí'console. log' para poder
mandar un mensaje a pantalla y vamos a escribir directamente en este
mensaje. Ahí dejamos un espacio. Aquí, en medio de estos dos símbolos de
más, es donde voy a recuperar el tamaño que tiene el arreglo'platillos' y
posteriormente voy a terminar el mensaje escribiendo en el menú. ¿Esto qué
significa? Que hay una cantidad de platillos en el menú. Entonces, nosotros
vamos a agregar estos tres elementos, pero tenemos que contarlos. Para
hacerlo, tendremos que acceder a la variable que los contiene, es decir, el
arreglo'platillos'. Vamos a escribir aquí la palabra'platillos', y para poder
medirlos tendremos que acceder a la propiedad llamada'length'. Con esta
propiedad nosotros podemos saber cuánto mide este arreglo. Vamos a
actualizar nuestro navegador y, una vez actualizado, vemos que dice "Hay tres
en el menú". Para que esto se lea correctamente vamos a escribirlo de la
siguiente forma: 'hay', espacio, 'platillos. length', es decir, el número tres para
este caso, 'platillos en el menú'. Actualizamos el navegador y vemos como ahora
tenemos un escrito correcto. De esta forma, nosotros podemos medir
directamente nuestro arreglo y no importa si agregamos un elemento más. Por
ejemplo, si yo aquí quiero agregar la palabra'tostadas', entonces actualizo el
navegador y vemos como ahora hay cuatro platillos en el menú. La otra
situación a la cual nos vamos a enfrentar es cuando nosotros
necesitemos recuperar el platillo que se encuentra en determinada posición. En
la jerga de la programación, cada una de estas posiciones la podemos conocer
como si fuera un índice, es decir, en qué índice se encuentra determinado
producto o determinado platillo en este caso. Para poder acceder a esto,
nosotros vamos a crear una nueva variable llamada'platillo', la cual estamos
creando en singular porque aquí solamente vamos a guardar un platillo que
estaremos recuperando de nuestro arreglo. Y para esto vamos a escribir
igual y vamos a invocar al arreglo'platillos', que es donde existe el universo
de platillos. Al final, estamos escribiendo un par de corchetes. Esto significa que
vamos a acceder a la información que se encuentra dentro de este arreglo, y,
para esto, vamos a indicar solamente cuál es el elemento que queremos:
0, 1, 2 o 3. Vamos a poner que queremos acceder al elemento 1. Entonces,
simplemente pongo el número aquí y vamos a mandar un mensaje
directamente a pantalla. Para esto, utilizaremos'console. log', y vamos
escribir "El platillo seleccionado es" y mandamos el contenido de'platillo', la
variable en singular. Actualizamos nuestro navegador y vemos como ahora dice
"El platillo seleccionado es tacos", porque'tacos'se encuentra en la posición
número 1. Si yo quisiera cambiar a la posición número 3, y actualizo, vemos que
dice'tostadas'. ¿Pero qué pasa si yo me salgo del rango? Por ejemplo, vamos a
poner el número 10. En este caso, no tenemos ninguna posición 10. Por tanto,
cuando nosotros accedemos, ahora obtenemos un valor llamado'undefined'. De
esta manera, nosotros ya podemos acceder sin ningún problema a los
elementos que conforman un arreglo y también podemos medir el tamaño
completo de dicho arreglo. De hecho, nosotros podemos utilizar también este
mismo dato como el espacio donde nosotros queremos medir. Por
ejemplo, en'platillos', en lugar de mandar 1 vamos a mandar el tamaño del
arreglo. Si tú recuerdas, el arreglo tenía cuatro platillos. Actualizamos y tenemos
un valor'undefined'. ¿Esto por qué sucede? Porque el valor de'length'sí cuenta
desde 1, es decir, 1, 2, 3 y 4. Pero si nosotros quitamos un valor, entonces ya
estamos teniendo los mismos datos. Así que actualizamos nuestro navegador y
vemos como aquí ya podemos acceder directamente a nuestro elemento.

Cómo funcionan en JavaScript los arreglos multidimensionales

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En un arreglo podemos almacenar distintos tipos de datos: datos
numéricos, cadenas de texto, "booleanos", incluso otros arreglos. Cuando
trabajamos con arreglos dentro de otros arreglos, es decir, cuando
almacenamos un arreglo dentro de otro arreglo, estos se conocen como
arreglos multidimensionales y podemos identificarlos de una manera muy
sencilla. Por ejemplo, cuando trabajamos con un arreglo de una sola
dimensión es cuando tenemos un ejemplo como el que encontramos aquí, en la
línea 6, es decir, un arreglo que no almacena otro arreglo. Pero cuando tenemos
un arreglo que sí va a almacenar otro arreglo, lo tenemos que declarar de una
manera en específico. Por ejemplo, tenemos aquí la variable'menú'. En esta
variable'menú' voy a abrir mis corchetes y con estos corchetes yo ya sé que
estoy trabajando con un arreglo. Si te diste cuenta, previamente eliminé las
comillas para poder cambiar el tipo de dato a esta variable. Ahora, para declarar
un arreglo multidimensional, lo único que tendré que hacer es insertar
directamente los otros arreglos, es decir, en la posición número 0: el
arreglo'platillos', y en la posición número 2: el arreglo'países'. Cuando yo
actualizo mi navegador, me doy cuenta que aquí tenemos ya estos
dos arreglos. Y, de hecho, cuando yo reviso el contenido en el navegador vemos
que en la posición 0 me aparecen los platillos y en la posición 1 me aparecen
los países. Ahora, así yo ya tengo un arreglo multidimensional. Pero si yo
quisiera acceder a estos contenidos, lo que tengo que hacer aquí es utilizar esta
sintaxis. Como vemos, aquí tenemos dos juegos de corchetes, un juego de
corchetes por cada una de las dimensiones que tiene. En este caso, 'menú'tiene
dos dimensiones. En la primera, nosotros vamos a dedicar el espacio al
contenido del primer elemento, y en el segundo, el índice, que va a
corresponder a dicho elemento. Por ejemplo, en la primera opción vamos
escribir un 0. Si actualizo mi navegador, voy a tener un error porque el otro no
lo tengo lleno, así que vamos escribir primero 00, actualizamos y vemos que
estamos accediendo a la palabra'ceviche'. Esto quiere decir que estamos
entrando en'menú'a la posición 0, la cual corresponde al arreglo'platillos' y, a
partir de aquí, entramos a la siguiente posición 0, que es'ceviche'. Si yo cambio
ahora y digo, en lugar de la posición 0, la posición 1, y actualizo mi navegador
vemos que tenemos'tacos'. Pero no estoy cambiando la primera, por lo tanto
me estoy manteniendo en la primera dimensión. Así, podemos ver que la
primera dimensión es la que tenemos directa y la segunda dimensión que
vamos a tener es el contenido que existe dentro de esta variable. Ahora, si yo
cambio y en lugar del 0 yo mando 1 como la primera dimensión y 0 como la
segunda dimensión, estaremos accediendo directamente a'países'. Y después de
esto estaremos accediendo al país que se encuentra en la posición 0. De esta
manera, ya podemos trabajar con arreglos multidimensionales o arreglo
de arreglos. Mi recomendación es que tengas mucho cuidado al hacerlo y que
seas muy ordenado para que no te pierdas dentro de tantos datos que puedas
llegar a manejar.

Operaciones básicas de un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En un arreglo puedo tener ciertas operaciones básicas que me ayudarán a
procesar mejor los datos cuando estoy integrándolos o trabajándolos dentro
o fuera de un arreglo. En este caso, el primer método que nosotros vamos a
utilizar es un método llamado'push'. Este método nos permite estar agregando
un elemento nuevo a nuestro arreglo. Si bien yo puedo acceder directamente a
la fuente del arreglo y agregar nuevos elementos, la idea es que yo no necesite
ocupar esta técnica, puesto que a lo largo del programa puede llegar a
presentarse una situación donde yo necesite estar ingresando un nuevo dato a
nuestro arreglo y no pueda yo regresar a la declaración inicial de este
mismo. Para poder utilizar este primer método lo que tengo que hacer es
invocar primero al arreglo'platillos' y después de esto utilizar el
método'push'. Como su nombre en inglés lo dice, va a empujar un
elemento. Entonces aquí, adentro, yo puedo enviar lo que yo estoy ocupando. Si
nosotros revisamos ahora, antes yo tenía estos tres elementos y después los
mismos tres. Cuando yo actualizo mi navegador, lo que voy a ver es que antes
yo tenía tres elementos. Después yo agregué un elemento nuevo, que es el
elemento'tostadas'. Así, entonces, yo ya cuento ahora con un arreglo de 4
elementos. Así, yo puedo estar agregando nuevos elementos cada que yo
necesite. Por ejemplo, si yo quisiera agregar algo más como, por
ejemplo, 'queso', actualizo mi navegador y vemos como ahora ya tengo un
arreglo de 5 elementos. Vamos a comentar este par de líneas y vamos a utilizar
ahora un nuevo método. En este caso, la operación contraria: un
método'pop'. Este método'pop' lo que va a hacer es sacar el último elemento
que tengamos en nuestro arreglo. Para utilizarlo vamos a trabajar más o menos
de la misma manera, pero vamos a utilizar el método'pop'. El método'pop'no
recibe ningún parámetro, por lo cual lo único que va a hacer es estar sacando
siempre un elemento. Ahora, ¿qué pasa si yo lo invoco dos veces? Pues va a
sacar dos elementos. Como pudimos ver aquí, antes teníamos un arreglo con 3
elementos y, después de invocar dos veces al método'pop', ya solamente nos
queda uno. Y por último, vamos a revisar un método que reúne todos los
elementos que componen a un arreglo y los retorna como si fuera una cadena
de texto. Para esto vamos a comentar también estos dos métodos que estamos
invocando sobre'pop' y vamos a generar una variable llamada'mensajes'. En
esta variable vamos a guardar'platillos'con la invocación del método'join' y
vamos a generar también un nuevo'console. log' para que podamos observar
esto claramente. ¿Qué va a suceder cuando actualizamos el navegador? Vemos
que ahora tenemos una cadena de texto y ya no nos está arrojando, como tal,
un arreglo. Este es el objetivo del método'join'. De esta manera, hemos visto
tres funciones correspondientes a los arreglos: 'push'para agregar, 'pop'para
eliminar y'join'para unir.

Generación de arreglos con split(), from() y of()

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La generación de arreglos no está ligada exclusivamente a tener una variable
seguida de los corchetes y están ingresando los datos en ese momento. De
hecho, tenemos algunos métodos que nos pueden servir para poder crear un
arreglo desde 0. Uno de estos primeros métodos que vamos a utilizar es el
método'split'. En este caso, tenemos una variable llamada'mensaje' que tiene en
una sola línea la palabra'ceviche', 'tacos'y'pasta'. Lo que yo quiero es convertirlo
en un arreglo, para lo cual voy a crear una constante llamada'platillos', que, de
hecho, ya la tengo aquí como una variable, entonces simplemente la voy a
copiar y la voy a pegar, y en lugar de tener un valor "null" lo que voy hacer es
mandar el contenido de'mensaje'. Pero'mensaje', al ser una cadena de
texto, tiene disponible un método llamado'split'. Este método
llamado'split' recibe como parámetro un elemento con el cual vamos a tomar
de base para hacer la separación. Nosotros podemos ver que aquí tenemos una
coma. Entonces, vamos a mandar esa coma como cadena de texto y, después
de esto, simplemente dejaremos que se imprima en pantalla. Ahora vamos a
mostrarlo y actualizamos nuestro navegador y vemos como lo que teníamos
antes como una cadena de texto ahora ya lo tenemos como un arreglo. Pero
tenemos algo justo detrás, que es un espacio en blanco. Entonces,
simplemente tomamos el patrón que sería: coma, espacio en blanco, que son
estos dos elementos. Actualizamos el navegador y ahora ya tenemos un arreglo
bien formado. Otra manera que tenemos de generar arreglos es cuando
logramos conectarnos a nuestro HTML. En este caso tenemos una división que
contiene tres párrafos. Esta división tiene una clase llamada'platillos' y dentro de
cada párrafo tenemos el nombre de uno de estos'platillos'. Lo primero que
vamos a hacer es traernos dicha información. Para traernos esta información,
vamos a generar una variable llamada 'platillos HTML' y lo vamos a ligar de esta
forma, con'document. querySelectorAll', y vamos a mandar el nombre de la
clase que tenemos y la etiqueta'p'. ¿Qué significa esto? Que vamos a acceder a
esta clase y vamos a acceder a cada uno de estos elementos. Así, si yo quiero
enviar a consola'platillos html', actualizo el navegador y vemos que tenemos un
arreglo con tres elementos. Aquí podríamos decir "Perfecto, entonces ya tengo
un arreglo y ya lo pude generar". Pero ¿cuál es el detalle? Cada que accedemos
a este elemento, lo que tenemos es todo el contenido de la etiqueta y ese
contenido no nos sirve para lo que queremos hacer. Lo que necesitamos
nosotros es lo que tendremos dentro de la propiedad'text content', para lo cual
vamos a utilizar entonces el método'array. from'. Para evitar estar generando
tantas variables, lo que voy a hacer es encapsular esta referencia directamente
aquí. Entonces, lo que yo estoy haciendo, es decir, 'array. from' de este
elemento. En resumen, lo que estoy diciendo es que se convierta todo esto que
tenemos acá en un arreglo formal. Así, actualizamos nuevamente y vemos que
tenemos otra vez la misma etiqueta'p' pero tenemos otros métodos
disponibles. Dentro de ellos, el método'map', que con el método'map' voy a
poder hacer el mapeo de los elementos que yo necesito para trabajar. Por tanto,
voy a acceder nuevamente a la variable'platillos' y para lo cual y evitar alguna
confusión voy a comentarlas anteriormente. De aquí generaremos'bar
platillos' igual a, y vamos a utilizar este'platillos html' como la referencia, y aquí
ya vamos a contar con un método llamado'map'. Este método llamado'map'me
va a permitir a mí hacer un mapeo de todos los contenidos. Por lo cual, esto
mismo va a ser una iteración continua. Yo no necesito meter un ciclo'for'o un'for
in'o lo que sea. Automáticamente, esto lo hace solo. Y ya, una vez que lo vamos
a hacer solo, lo primero que va a recibir será un'platillo'como un
parámetro. Cuidado: esto es el nombre de un parámetro. Tú le puedes poner el
nombre que quieras. En este caso le estamos poniendo nosotros el nombre
de'platillo' para mantener la referencia. Cuando tenemos esta referencia, lo
único que diré yo es: 'platillo' punto 'textContent', que este'textContent'es lo
que nosotros estábamos revisando, puesto que nosotros con este
método'map' ya estamos haciendo la iteración. Ahora vamos a
mostrar'platillos'en el'console. log', actualizamos y, listo, ahora sí ya tenemos un
arreglo formal. Esto puede sonar algo rebuscado, pero realmente es algo
bastante usable. Y, por último, tenemos el método llamado'array. of'. Este
método es más simple. Todo lo que le enviemos aquí dentro simplemente lo va
a generar y lo va a convertir en un arreglo. Ahora actualizamos el navegador y
vemos como la línea 22, que es esta última, nos está mostrando el contenido de
esta variable. Así, nosotros ya pudimos crear de distintas maneras un arreglo, ya
sea con el método'split' o con el método'array. from'y el método'map' y con el
método'of'.

Ordenando un arreglo
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En los arreglos, generalmente, vamos a guardar colecciones grandes de
datos. Estos datos, muchas veces, los vamos a presentar en una tabla o en
pantalla de manera ordenada o de manera desordenada, que esta es una
actividad que debe ir por usabilidad en casi todas las páginas web o
aplicaciones que estén presentando datos. Para hacer esto y cuando trabajes
con un arreglo, podemos utilizar un método llamado'sort'. Este método'sort'me
va a permitir a mí ordenar el arreglo que yo esté necesitando. Por ejemplo, para
poder trabajar con esto lo único que voy a hacer es invocarlo directamente
en'platillos'. entonces yo escribiré'platillos. sort'. Este punto'sort'existe
porque'platillos'es un arreglo. Entonces, quiere decir que todos estos métodos
están disponibles siempre y cuando el tipo de dato sea un arreglo. Para este
caso estamos mandando a imprimir en pantalla el contenido que hay antes y el
contenido que hay después para que podamos detectar el
cambio. Actualizamos nuestro navegador y vemos como ahora tenemos una
diferencia, es decir, esto ya se encuentra ordenado. Antes
teníamos'ceviche', después'tacos'y después'pasta', pero como lo ordena de
manera alfabética, entonces después queda 'ceviche', después sigue'pasta'y
después'tacos', porque'tacos'comienza con te y es una letra que va después de
la pe en el alfabeto. También, yo puedo ordenarlos al contrario. ¿Qué significa
esto? Yo voy a utilizar un método llamado'reverse'. Cuando yo invoco este
método no significa que me va a ordenar al revés, lo que significa es que a
como está el arreglo lo va a enviar pero al contrario. Vamos a revisar
rápidamente los dos casos. En este caso, primero el arreglo está ordenado y
después aplicamos el método'reverse'. Actualizamos el navegador y vemos
como al principio tenemos'ceviche', 'tacos', 'pasta'. Después lo tenemos
ordenado, y para esto vamos a mandarlo a consola y así podremos ver qué
sucede cuando esto está ordenado. Actualizamos nuevamente el navegador y
podremos revisar. Antes teníamos'ceviche', 'tacos'y'pasta'. Después, ordenamos
el contenido y, al estar ordenado, tenemos'ceviche', 'pasta'y'tacos'. Y después, lo
que tenemos es el método'reverse', y este método'reverse'lo que me va a
permitir hacer es contarlo al revés, es decir, tendremos'tacos'al inicio, 'pasta'se
mantiene en su posición y'ceviche'al final. Y si, por alguna razón, tú deseas
aplicar nuevamente el método'reverse', ¿qué va a suceder? Cuando lo aplicamos
y actualizamos el navegador vemos como tenemos esta "reversa" de nuevo y
tenemos ahora'ceviche', 'pasta', y'tacos'al final. Lo único que debes mantener es
una lógica cuando estás trabajando con este tipo de ordenamientos o con este
tipo de acomodado de datos. Estos métodos te van a facilitar mucho el trabajo
cuando tengas que presentar tu información en pantalla.

Desestructuración de arreglos
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Con los arreglos en JavaScript, también podemos trabajar con algo
llamado desestructura o desestructuración de arreglos. ¿Esto qué es? Es como
una asignación a la inversa. Vamos a analizarlo rápidamente. Aquí, en pantalla,
tú podrás encontrar que tenemos un arreglo llamado'platillos'. Tenemos tres
variables: 'platillo 1', 'platillo 2'y'platillo 3'. A cada una de estas variables
estamos asignando cada una de las posiciones del arreglo'platillos': 'platillos'en
la posición 0, en la posición 1 y en la posición 2, y posteriormente los estamos
enviando a pantalla. Cuando los mandamos en pantalla, tenemos los tres
elementos, que es: 'ceviche', 'tacos'y'pasta'. Ahora, esta asignación puede ser un
tanto compleja. Entonces, ¿qué vamos a hacer? Primero, voy a comentar todos
estos elementos y, una vez que ya están comentados, yo voy a trabajar
generando primero tres variables, las mismas variables que teníamos pero sin
ningún dato, y ahora voy a trabajar con este proceso de desestructuración. Lo
primero que voy a hacer es utilizar la sintaxis del arreglo. Sí, no la estamos
asignando a ningún lugar, solamente estamos escribiendo los corchetes. Y aquí
vamos escribir los nombres de las tres variables: 'platillo 1', 'platillo 2' y'platillo
3'. Y después, siguiendo la sintaxis de la desestructuración de arreglos, vamos a
escribir el símbolo igual. Espera, ¿igual?, ¿a un arreglo le vamos a asignar
algo?, ¿cómo funciona esto? Esta sintaxis está muy rara, pero tiene mucha lógica
cuando hablamos de este tema. Aquí vamos a asignar la
variable'platillos'. Entonces, si estás de acuerdo, esto que tenemos aquí en
pantalla no debería cambiar. Actualizamos nuestro navegador y vemos como,
efectivamente, mantenemos el contenido. De hecho, si yo agrego aquí un
elemento más, por ejemplo, 'tostadas', y voy a crear una variable nueva y a esta
le voy a poner de nombre 'platillo 4', y aquí simplemente voy a hacer la
referencia, 'platillo 4'. Esto mismo lo voy a mandar a imprimir y, una vez que lo
mando a imprimir, actualizamos el navegador y, listo, tenemos esto. ¿Qué
sucede con la desestructuración? Lo que pasa es que cuando estamos
asignando utilizando esta sintaxis, por dentro el motor de Javascript toma el
contenido que hay dentro de esta variable, la identifica como un arreglo y, al
identificarla, empieza a hacer la asignación uno a uno, es decir, la posición 0 en
el primer elemento que yo mandé, es decir, en la posición 0. Uno a uno, dos a
dos, tres a tres. Entonces, este tipo de asignaciones es bastante sencillo ahora y,
de hecho, podemos agregar un nivel de simplicidad más. ¿Y este cuál es? Voy a
comentar todas estas variables, voy a guardar y actualizar mi
navegador. Cuando yo lo hago, me genera un error y me dice'platillo 1'no está
definido. Esto sucede porque estamos trabajando con el modo'use strict'. Pero
lo que podemos hacer es que al inicio escribimos la
palabra reservada'var'. Ahora sí, actualizamos el navegador y todo vuelve a
funcionar correctamente. Dime, ¿qué tipo de sintaxis prefieres?, ¿esta donde
tenemos que estar asignando cada una o estar declarando cada variable?, ¿o
simplemente hacer este proceso de desestructuración? Creo que esto es
bastante sencillo y te ayudará a agilizar tu proceso de generación de código.

Iterando arreglos con for...in

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Además de tener el ciclo'for' o alguna estructura de control como el'while'o
el'dowhile', también contamos con una variante del ciclo'for' para poder
iterar dentro de un arreglo. En este caso, este "loop" que vamos a utilizar se
llama'for in' y se va a conformar de una manera muy simple. Lo primero que
tenemos que enviar nosotros es el contador. En este caso vamos a poner
primero la palabra'platillo' y después vamos a utilizar la palabra
reservada'in', que eso sí lo necesitamos, y después sobre lo que vamos a
iterar, y esto es el nombre del arreglo'platillos'. Aquí funciona de una manera
muy simple. ¿Qué quiere decir? Que va a repetir tantas veces "mira platillos", es
decir, lo va a ejecutar tres veces. Y en cada iteración el valor que tengamos
en'platillo'lo va a ir incrementando de uno en uno. Vamos a escribir "platillo"
rápidamente dentro de este'console. log' y vamos a actualizar nuestro
navegador. Cuando lo hacemos vemos que tenemos los tres elementos: 0, 1,
2. ¿Qué quiere decir? Que iteró en la posición 0, en la posición 1 y en la posición
2. Entonces, ahora simplemente tendremos que acceder a la variable'platillos' y
utilizar los corchetes para poder acceder a la información en la posición que nos
está indicando'platillo'. Actualizamos y, listo, con esto ya pudimos iterar
directamente sobre este arreglo. Ahora, puedes observar algo muy
importante. Nosotros aquí utilizamos esta forma de escribirlo para que al
momento de que tú lo entiendas sea algo más sencillo. Por ejemplo, 'platillo in
platillos', es decir, cuántos'platillo'existen en'platillos'. Como nosotros tenemos
este arreglo, el contexto es muy importante y esto te facilita mucho escribir el
código. Ahora, muchas veces te encontrarás ejemplos que van a cambiar un
poco. Por ejemplo, en lugar de utilizar este'platillo', simplemente escribirán'y' y
con esto se refieren como'y'al índice en el que se encuentra, y esto va a
funcionar de la misma forma. Así, ahora ya tienes todos los conocimientos
necesarios para poder iterar en un arreglo utilizando la estructura de control'for
in'.

Iteración de arreglos con forEach()

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Otra manera que tenemos de iterar directamente sobre un arreglo es utilizando
el método'for each', que está ligado directamente a los arreglos. Este tipo de
métodos lo que va a recibir es una función y podemos utilizar una función
anónima o un'arrow function'. De hecho, yo te recomiendo utilizar un'arrow
function'por la sencillez que tiene para poder trabajar con este tipo de
funciones. Lo primero que vamos a hacer aquí es utilizar el
arreglo'platillos', pues sobre este es donde nosotros queremos iterar. Después
de esto vamos a escribir aquí'for each' y, con este'for each'adentro, nosotros
vamos a mandar la función que queremos ocupar. ¿Recuerdas cómo funcionaba
una función de tipo'arrow'o un'arrow function'? Lo primero que enviamos es un
parámetro y vamos a escribir la palabra'platillo'en singular porque es el
parámetro que nosotros estaremos asignando. Escribimos el símbolo de flecha,
que es un símbolo de igual y un mayor que, y después de esto, lo que
queremos ejecutar. Recuerda: si queremos ejecutar muchas acciones lo único
que tenemos que hacer es mandar un juego de llaves y después no olvides
tener un'return' para que puedas recibir datos. De otra forma, si lo único que
necesitamos, como en este caso, es imprimir el contenido, pues simplemente
vamos a invocar la función que vamos a utilizar. En este caso, un'console. log', y
vamos a mandar a imprimir'platillo'. Así, ahora, actualizo mi navegador y de esta
manera veo como ya pude acceder a cada uno de estos contenidos. Pero
también yo puedo acceder al índice en el cual estoy trabajando, porque muy
probablemente yo necesite saber cuál es la posición del menú donde yo quiero
estar. Entonces vamos a repetir esta función. Voy a comentar la línea número 8
para evitar alguna confusión y lo que voy a hacer simplemente es encapsular los
parámetros dentro de un paréntesis y, como segundo parámetro, voy a
mandar'i', que puede ser un'i'de índice, o puedo escribir la palabra'index'o
puedo escribir lo que yo necesite, un contador, etc. Solamente es un nombre de
variable para mantener la relación. Y después de esto, en el'console. log' lo que
yo voy a hacer es escribir 'index', coma, 'platillo'. Recuerda: este orden es muy
importante, primero va el dato y después el índice. Posteriormente, dentro de la
función, no importa cuál sea el orden en el que tu vayas a utilizar dichos
parámetros. Ahora actualizamos nuestro navegador y con esto podemos ver
que en la posición 0 tenemos'ceviche'; 1, 'tacos'; y 2, 'pasta'. De esta forma, ya
pudimos iterar sobre el arreglo'platillos'trabajando con el método'for each'de
los arreglos.

Buscar en un arreglo de JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Una de las operaciones más buscadas por todo programador es la operación de
la búsqueda. Sí, cuando trabajamos con un arreglo, a veces necesitamos buscar
determinado dato dentro del arreglo. Y muy probablemente tu arreglo sea muy
grande o contenga muchísima información, para lo cual va a ser muy
importante que podamos tener un método óptimo para esto. Con la evolución
de JavaScript, se han presentado nuevos métodos y uno de estos métodos es el
método llamado'find', que me va a permitir a mí iterar sobre un arreglo sin
necesidad de utilizar un ciclo y, a partir de esto, recuperar la información que yo
quiero. ¿Cómo lo vamos a ocupar? Primero, aquí tenemos un arreglo
llamado'platillos', así que yo escribo esto de'platillos'y utilizo el método
llamado'find'. El resultado lo voy a guardar en la variable'pElegido', que tiene la
letra pe por'platillo elegido'. Entonces, aquí, adentro de'find'vamos a enviar una
función. Para esto vamos a utilizar un'arrow function' al cual le estaremos
enviando el parámetro'platillo'. Recuerda, el método'find'por dentro va a hacer
todo el proceso de iteración. Sea 1, 2 o 1. 000 registros los que tenga, hacia
todos estos va a navegar para poder obtener un valor. Por eso mismo es que
aquí primero recibimos'platillo', que es el nombre que le estamos dando al
parámetro, y lo que yo voy a hacer aquí es crear una condición donde voy a
preguntar'platillo es igual a'. Por ejemplo, vamos a hacerlo con'pasta'. Y aquí
escribimos. Enviamos a parámetro'platillo' y revisamos ¿'platillo'es igual
a'pasta'? Si sí es correcto, es decir, si esta condición nos regresa un
"true", entonces va a regresar ese elemento al método y esto se va a almacenar
en la variable'p'elegido. Vamos a guardarlo. Y con esto podemos ver que sí,
efectivamente, sí encontró el valor'pasta'. ¿Pero qué pasa si yo tengo algún otro
elemento?, por ejemplo, 'tostadas', y aquí yo actualizo mi navegador y nos
damos cuenta que tenemos un valor "undefined". Quiere decir que ese valor no
lo encontró. Ahora, cuando trabajamos también con JavaScript tenemos
estructuras más complejas, por ejemplo, un objeto. En este caso, nosotros
tenemos un objeto llamado'menú' que tiene distintas
propiedades: tiene'nombre', tiene'precio'y tiene'país'. Por eso podemos
entender que cada uno de estos es un platillo distinto. Y, sí, también nosotros
podemos aplicar esta misma técnica para buscar sobre este tipo de
datos. Vamos a hacerlo rápidamente. Primero vamos a comentar la línea y
después vamos a copiarla. Una vez que ya la tenemos pegada, vamos a trabajar
solamente en algo muy importante. Como obviamente aquí estamos en el
menú, entonces tenemos que ocupar el menú. Entonces, será'menu. find'. A
pesar de que aquí tenemos objetos, esto se conoce como un arreglo de
objetos porque el contenido que estamos presentando son objetos. Y así, ahora,
lo que vamos a preguntar es lo siguiente: si yo itero en cada una de estas yo
necesito preguntar, por ejemplo, sobre el nombre del platillo. Entonces, el
nombre se encuentra en una propiedad llamada'nombre'. Así que yo
preguntaré'platillo', punto, y el mismo editor nos ayuda: 'nombre'. Y vamos a
preguntar si esto es igual a 'tacos'. Vamos a actualizarlo. Y aquí tenemos una
gran diferencia. Una vez que nosotros terminamos de utilizar este método, lo
que va a suceder es que nos va a regresar todo el objeto completo, es
decir, todo el contenido donde se hizo "match". Aquí podemos ver, entonces, lo
poderoso que es este método'find' que poseen todos los arreglos en JavaScript.

Búsqueda de índice de elementos

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En algunas circunstancias no vamos a necesitar acceder al objeto que hayamos
encontrado en el arreglo. Al contrario, necesitamos encontrar el índice donde se
encuentra nuestro dato. Es decir, si yo tengo un arreglo como, por ejemplo, en
este caso donde tengo'ceviche', 'tacos'y'pasta', yo necesitaré encontrar el índice,
por ejemplo, de'tacos'. Para eso voy a utilizar el método 'findIndex'. Este
método se encuentra pegado directamente a'platillos', así que vamos a ponerlo
aquí. Vamos a suponer que lo que yo quiero encontrar es el número del
platillo, entonces tengo una variable creada llamada'numPlatillo' y entonces
aquí yo voy a poder iterar. Voy a buscar el método llamado'findIndex' y adentro
de'findIndex'voy a utilizar un'arrow function'. A esto le voy a enviar yo
el'platillo' y voy a hacer una búsqueda como había hecho previamente con el
método'find'. Así que simplemente preguntaré: ¿'platillo' es igual, en este
caso, a'tacos'? Si es igual, entonces'numPlatillo' debería tener el valor número
1, porque recordemos: los arreglos se leen primero desde 0, 1, 2. Actualizamos
el navegador y vemos como efectivamente sí lo encontró y ahora tenemos la
posición número 1. Eso fue para un arreglo simple, pero ¿qué pasa cuando
tenemos un arreglo más estructurado, por ejemplo, en este caso un arreglo de
objetos? Para hacer esta prueba vamos a copiar la línea que trabajamos ahora y
lo único que vamos a hacer es comentarla previamente para que nos quede la
otra de base. Así, lo que yo quiero buscar es dentro de'menú' el número del
platillo. Entonces, aquí, en lugar de utilizar'platillos'voy a utilizar'menú'. ¿Por
qué? Cuando yo utilizaba'platillos'me refería a este arreglo, ahora
utilizo'menú'porque me estoy refiriendo a este arreglo de objetos. Igual. Tiene
un'platillo', recibe un'platillo', pero lo que yo necesito preguntar es sobre la
propiedad'nombre'del'platillo'. Entonces, voy a poner aquí 'platillo. nombre'es
igual a'tacos', actualizo y esto me regresa un -1. Este -1 significa que no lo
encontró. Pero, espera, aquí tenemos'tacos', ¿por qué no aparece? La diferencia
es que aquí tenemos una te mayúscula, lo que sucede es que este tipo de
validaciones es muy sensible al uso de mayúsculas y minúsculas. Entonces,
estamos aprendiendo algo nuevo: si te encuentras con un -1 significa que el
dato no se encontró. Al contrario, si te encuentras ya con un dato distinto
quiere decir que el dato sí fue encontrado. Hagamos el ejemplo ahora
rápidamente para'pasta', probamos con'pasta', actualizamos y vemos como
efectivamente sí se encuentra en la posición 2. Aquí tenemos la posición 0, la
posición 1 y la posición 2, donde se encuentra'pasta'. De esta forma, ya
pudimos encontrar el índice del elemento que estamos buscando en un arreglo.

Filtrar arreglos usando JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando buscamos elementos en un arreglo, hemos visto que el uso del
método'find' nos ayuda muchísimo y, de hecho, nos facilita mucho el
trabajo, como podemos verlo aquí en el código. Aquí lo que estamos buscando
es en esa estructura de datos el'platillo'que tenga que ver con
México. Actualizamos el navegador y vemos como me está regresando el
platillo'tacos' que pertenece al país México. Pero aquí vamos a encontrar algo
importante, que, de hecho, no lo cubre'find'. ¿Y qué es? Que nosotros tenemos
en todo este'menú' dos platillos que pertenecen al país México. ¿Qué sucede? El
método'find' solamente te va a traer la primera incidencia que se encuentre, es
decir, si está iterando en una colección de datos de 1. 000 datos, por
ejemplo, cuando se encuentra la primera esa es la que va a retornar. Ya sea que
la primera incidencia la haya encontrado entre los tres primeros registros o
entre los últimos 1. 000, no importa, solamente va a retornar una. Pero tenemos
una solución para esto. La solución es simplemente utilizar otro método y el
método que vamos a utilizar se llama'filter'. En este caso, voy a comentar esta
línea y la voy a repetir abajo para utilizar este método nuevo. En lugar de utilizar
el método'find' voy a utilizar el método'filter', que prácticamente es lo único
que vamos a cambiar. Así, yo actualizo mi navegador y cuando lo hago veo que
tenemos un resultado con dos elementos. Cuando yo lo expando, vemos como
el primero me indica que yo aquí tengo la primera incidencia donde el país es
igual a México y después tengo la siguiente incidencia. Si tú quisieras saber en
qué índice se encontraban estos elementos, podemos utilizarlos como
referencia utilizando el método'findIndex', y así podemos tener todo un
esquema completo. De esta manera, ya podemos cubrir ciertos métodos de
búsqueda muy importantes. El primero, 'find', que me trae la primera
incidencia. Y el segundo, 'filter', que me va a traer todas las incidencias que
coincidan. En resumen, el método'filter' lo que hace es que me trae todas las
incidencias, es decir, guarda todos los que hayan pasado una evaluación, en
este caso la evaluación de que'platillo. país'es igual a México. Si lo quieres ver
como una metáfora, es como cuando vas a una discoteca y te piden tu
identificación para poder acceder. Si eres mayor de edad, pasas; de lo contrario,
te quedas fuera. De la misma forma, aquí es: si el valor de'país'es igual a México,
entonces se almacena en la variable; de lo contrario, lo ignora.

Validación de elementos de un arreglo

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Algunas veces, te vas a enfrentar a ciertas circunstancias especiales cuando estás
trabajando con un arreglo. Por ejemplo, vamos a poner un caso de uso. Aquí,
nosotros tenemos un menú. En este menú tenemos platillos con
un'nombre', un'precio'y el'país'al que corresponde. ¿Qué pasaría si tú desearas
comer de este menú pero cuentas con determinada cantidad de
dinero? Supongamos que cuentas con 20 pesos. Para este caso, entonces,
vamos a necesitar preguntarle al arreglo si es que tiene platillos que estén
dentro del rango que tú tienes, es decir, platillos debajo de 20 pesos. Para hacer
esto voy a utilizar la variable'resultado', donde almacenaré todo lo que voy a
iterar. Para esto voy a trabajar con la variable'menú'. Aquí voy a
poner'menú', punto, 'some'. 'Some'es un método que existe en todos los
arreglos y este método va a recibir una función como "callback". Dentro de esta
función, yo voy a hacer una evaluación y vamos a escribirla. Esta función recibe
un'platillo'. Recordemos que en este'menú', que es un arreglo, vamos a estar
iterando sobre cada uno de los elementos, es decir, sobre cada uno de los
platillos. Así, aquí le podemos poner un nombre. Entonces tenemos'platillo' y
sobre esto vamos a preguntar en cada iteración. Recordemos
nuevamente: 'some'se encarga de hacer toda la iteración, tú no necesitas
implementar en ningún lado ningún tipo de ciclo, así que esto te facilita mucho
el trabajo. Y vamos a preguntar: ¿'platillo. precio' es menor que los 20 pesos que
habíamos determinado? Si es menor, entonces me va a regresar un "true"; en
caso de que no sea menor, me va a regresar un "false". Vamos a actualizar
nuestro navegador y vamos a ver como efectivamente me regresó un "true". En
el texto que teníamos prefabricado, aquí, decía: "¿Hay platillos abajo de 20? " Y
tenemos de valor "true", es decir, que sí. Vamos a analizarlo. ¿El primero es
menor que 20? No, pero sí es igual. ¿El segundo es menor que 20? Sí, porque es
10. ¿El tercero es menor que 20? No, porque es 50. Pero el cuarto que tenemos
acá sí lo es. Vamos a cambiar un poco esta condición y vamos a poner ahora,
por ejemplo, el valor 3. Con esto estamos forzando a que me regrese un
"false", porque no hay ningún platillo que esté debajo de este
precio. Actualizamos el navegador y vemos como ahora tenemos "false". Si
regresamos todo esto al estado en el que lo teníamos podemos darnos cuenta
también de como, efectivamente, aunque se cumpla solamente una condición,
es decir, aunque uno de los resultados sea positivo, entonces me va a
retornar un "true". Por ejemplo, vamos a poner aquí: menor o igual que 10. Si
esto es menor o igual que 10, quiere decir entonces que se va a cumplir. ¿Por
qué? Porque solamente tenemos un platillo con 10, entonces la condición se
cumple. El caso contrario, por ejemplo, es cuando vamos a trabajar con otro
tipo de función. Para esto vamos a comentar estas dos líneas, vamos a copiar el
texto que teníamos, y en lugar de usar la función'some' lo que vamos a utilizar
será una función llamada 'every'. Esta función lo que va a hacer es que va a
validar que todos los elementos de este arreglo cumplan con dicha
condición. En este caso vamos a hacer una revisión rápida. ¿Todos los platillos
son menores o iguales que 10? Revisamos y nos vamos a dar cuenta de que no
es así, por tanto vamos a quitar el comentario de este último
mensaje, actualizamos el navegador y vemos que dice: "¿Todos los platillos
cuestan menos de 20? " Falso. Vamos a actualizar aquí rápidamente esto para
que diga 10 y sea un poco más coherente. Ahora sí, "¿Todos los platillos cuestan
menos de 10? " Falso. ¿Por qué? Porque no es así. Vamos a subirlo y vamos a
ponerlo ahora en 60. Esto sí nos va a dar un valor "true". ¿Por qué? Porque
vamos a ver que todos los precios que están expresados aquí sí son menores
que 60. Actualizamos el navegador y, efectivamente, ya tenemos un "true". De
esta manera nosotros podemos validar los elementos que existen en un
arreglo y así poder reaccionar en consecuencia. Recuerda que puedes
integrar estas funciones con las demás funciones que tienen un arreglo, para
que puedas tener procesos más óptimos y así puedas procesar de una manera
ideal todos tus datos.

Entender el DOM y el BOM

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Para que JavaScript pueda liberar todo su poder es necesario de un
mecanismo que me permita interactuar con HTML e incluso con CSS. Este
mecanismo se llama "Document Object Model" o lo podemos conocer también
como DOM, las letras D, O, M. Esto en español significa: modelo del objeto
documento. La principal característica del DOM es que nos permite usar los
elementos o etiquetas que componen una página web como objetos y así
poder manipularlos con JavaScript. Es decir, en este caso yo tengo varias
etiquetas'p' o tengo incluso también una etiqueta'div' o una etiqueta de
botón o una etiqueta de'header'. Todo esto yo puedo trabajarlo también con
JavaScript, es decir, yo puedo tender un puente para poder manipularlos desde
mi código. De una manera resumida, el DOM es el puente entre HTML y
JavaScript, pues al poder usar o referirnos a los elementos que componen
nuestro sitio o aplicación, podremos manipular a nuestro gusto y necesidad
todo lo que hayamos creado. Hasta ahora ya hemos hecho uso del DOM y tal
vez no te hayas percatado de esto, pero te aseguro que el siguiente código lo
sentirás muy familiar. ¿Este código, qué es lo que tiene? Tiene principalmente
un objeto llamado'document'. Este objeto llamado'document' hace referencia a
todo el contenido que nosotros tenemos en nuestro navegador. Aquí estamos
utilizando un método propio del DOM que dicta 'getElementById', en
español: obtener un elemento según su ID. Y el ID que va a buscar es un ID
llamado'botón'. Si nosotros hacemos un poco de "scroll" hacia
arriba encontraremos que aquí tenemos un botón con un ID 'botón'. Aquí
nosotros estamos haciendo dicha referencia y la estamos almacenando en una
variable. Aquí es donde comienza la magia, porque a partir de esto nosotros
podremos agregarle más eventos y manipular todo el contenido que se va a
estar mostrando en pantalla. En este caso, nosotros estamos agregando
un'addEventListener', es decir, una escucha, algo que esté pendiente de este
elemento'botón' y que pueda reaccionar en consecuencia. En este caso estamos
escuchando el evento'click' y para esto va a ejecutar alguna función. Con esto ya
nos hemos topado antes. Así, ya contamos con un mecanismo para lograr que
JavaScript se comunique con HTML. Pero ahora tenemos otro jugador en
medio y esto es el navegador. Sí, hasta ahora hemos visto el
contenido, pero este contenido es el documento. ¿Quién contiene al
documento? El navegador. Y para esto nosotros contamos con otro objeto
llamado BOM. El BOM significa "Browser Object Model", y también, al igual que
el DOM, están definidos por la W3C, que es la organización que se encarga de
dictar los estándares web a nivel mundial. Para evitar confusiones, existen
algunos objetos independientes que hacen referencia tanto al BOM como al
DOM. Y si lo vemos en perspectiva, el BOM es el contenedor o padre principal, y
dentro vive el DOM. Para el DOM ya tenemos el objeto'document'que habíamos
visto, pero para el caso del BOM tenemos otro objeto. Este objeto se
llama'window' y también tiene sus propios métodos y sus propiedades, así que
pueden actuar de manera independiente pero podemos coordinar su
operación. En este caso, yo lo que voy a necesitar es utilizar uno de estos
métodos. Por ejemplo, podemos trabajar rápidamente con'location' y su
propiedad'href'. Si yo envío esto a consola y escribimos'console. log' y me
aseguro de captar todo esto aquí, actualizo mi navegador y después pulso el
botón que dice ¡Púlsame! Al hacerlo estoy obteniendo una dirección, en este
caso lo que obtiene es la ubicación de este archivo en donde se está
ejecutando. Si este ejercicio lo estuviéramos ejecutando en algún
servidor, entonces nos traería la dirección web donde se encuentra. Esto es un
ejemplo de lo que podemos trabajar con el BOM, pero también podemos
asignarle algunas propiedades. Por ejemplo, aquí nosotros solamente estamos
leyendo en donde nos encontramos, pero también yo podría asignarle algo. Por
ejemplo, en este caso, en lugar de mostrar'href' estoy utilizando el operador
igual para asignarle una nueva ubicación. ¿Por qué? Porque este objeto me
permite hacer un redireccionamiento de la página, dado que es un objeto que
pertenece al navegador. Así, yo actualizo mi página y vamos a pulsar el botón.
¿Qué va a suceder antes de que lo pulsemos? Uno: va a mostrar en consola en
dónde se encuentra. Esto tal vez lo haga de una manera muy rápida. Y dos: va a
cambiar de página y vamos a ir a GitHub. Ahora sí, pulso el botón ¡Púlsame! y
vemos como está trabajando y efectivamente esto ya nos movió
directamente hacia GitHub. De esta manera, ya conocemos los dos elementos
base y muy importantes de toda página web, que sin la cual JavaScript no
podría funcionar adecuadamente. Entonces, es necesario que conozcas al
menos qué es el DOM y el BOM para que puedas sacar el mayor provecho de
todo lo que estás programando.

Propiedades y métodos del DOM

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Realicemos ahora algunos métodos y propiedades del DOM. Estos métodos me
van a permitir a mí hacer el puente entre HTML y JavaScript, por lo cual es muy
importante que los conozcas para saber cómo se utilizan. Por ejemplo, vamos a
comenzar con lo primero. Podemos usar nosotros un método que haga
referencia a todos los párrafos que tenemos aquí. Para este caso tenemos una
variable llamada'todosLosParrafos' y con esto vamos a utilizar el
objeto'document' punto, y tenemos un método
llamado'getElementsByTagName'. Este método de'getElementsByTagName' me
va a permitir a mí obtener los elementos que yo quiera por su etiqueta. Para
esto, yo voy a necesitar enviar como parámetro el nombre de la etiqueta, que
en este caso sería la etiqueta'p', que es lo que yo estoy buscando. Como puedes
ver, tenemos tres párrafos. Entonces, se supone que si yo muestro el contenido
de la variable'todosLosParrafos' debería mostrar tres elementos, es decir, los
tres párrafos a los cuales estoy haciendo referencia. Para hacer esto vamos a
escribir aquí, adentro de este método, del'addEventListener'que tiene anexado
el botón: 'console . log' y vamos a
mandar 'todosLosParrafos'. Guardamos, redimensionaré un poco mi
ventana. Ahora, sí, pulso el botón ¡Púlsame! y vemos como precisamente me
indica que tiene tres elementos, es decir, los tres párrafos que habíamos
mencionado previamente. Y, de hecho, uno de ellos dice'p. principal'. ¿Por qué?
Porque nosotros tenemos esta etiqueta con una clase llamada'principal', que, de
hecho, nosotros también podemos obtener los elementos que tengan una
clase. Para poder obtener esos elementos lo único que tengo que hacer, al igual
que con el método de'getElementsByTagName', simplemente es invocar al
objeto'document', punto 'getElements ByClassName'. Aquí tenemos dos
diferencias, uno es por etiqueta y el otro es por clase. En este caso que tenemos,
por clase, lo que vamos a hacer es mandar el nombre de la clase que teníamos,
puesto que en este caso se llama'principal'. Igual, podemos actualizar y vamos a
mandar ahora cada vez que pulsemos el
botón a'parrafoPorClase'. Actualizamos, pulsamos y encontramos que
efectivamente aquí se encuentra este elemento. ¿Pero qué pasa si yo deseo
acceder a ese contenido? Es decir, yo lo que necesito es ver lo que está dentro
de ese texto. Bueno, lo podemos hacer de una manera muy sencilla. El
método'getElementsByClassName'lo que hace es capturar todos los elementos
que tengan esta clase y los guarda en un arreglo, así que en esta situación
solamente utilizamos uno y vamos a acceder al elemento 0. Actualizamos el
navegador, y cuando pulsamos el botón vemos que ahora ya tenemos acceso al
elemento y ya no nos aparecen los corchetes, por lo tanto yo puedo utilizar un
método que ya habías visto previamente, en este
caso utilizaré'textContent'. Actualizo mi navegador, pulso el botón y, listo, ya
tenemos acceso al contenido. Dado que estamos accediendo a todas las
propiedades que tenemos aquí, por ejemplo, aquí yo podría también cambiar el
estilo que tiene el botón, estoy agregando aquí por ejemplo el acceso al botón
y tiene un objeto llamado'style' y a partir de esto puedo acceder a las
propiedades. Actualizo el navegador y pulso el botón que dice ¡Púlsame! y
vemos como ahora cambia de estilo a un color verde con texto en blanco y un
tamaño de 200 píxeles. Incluso podemos generar etiquetas de HTML de manera
dinámica. Por ejemplo, vamos a generar una foto. En este caso estoy usando el
método llamado'createElement' y entre comillas le mando el elemento que
quiero crear, que en este caso es una imagen. Envío cuál es la fuente que va a
tener, el nombre, el ancho y después de esto, en el'body', usando el
documento utilizo un método llamado'appendChild', adentro de este método
yo estoy mandando la foto. Vamos a actualizar y vamos a ver qué
sucede. Redimensiono un poco mi navegador y, después de haber actualizado,
vemos que tenemos una foto interesante. Y solo para hacer esto un poco más
interesante, pues también podemos agregar'listeners'a esta foto. Claro, ¿pero
como la foto podrá tener un'listener'? ¿Qué tal si nosotros agregamos aquí
un'click'a la foto? Es decir, cada vez que nosotros escuchamos un clic sobre la
foto, que cambie y esta se actualice. Vamos a probar, actualizamos y tenemos
aquí la fotografía. Damos un clic y, listo, me cambia por la foto 2. Vamos a dar
un clic nuevamente y me vuelve a cambiar por la foto 1. De esta manera, ya
conoces cuáles son algunos de los métodos y propiedades con los que cuenta
el DOM.

Propiedades y métodos del BOM

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Ya trabajamos con el DOM, es decir, con el objeto del documento. Ahora vamos
a trabajar con el navegador, y para esto ahora utilizaremos el
objeto'window'. En este caso, el objeto'window'tiene muchas propiedades. Por
ejemplo, podemos utilizar aquí'window. innerHeight' y'window.
innerWidht' para poder saber el alto y el ancho. Pero observa esto: también
nosotros podemos utilizarlo sin necesidad de trabajar con'window'. Hay muchos
de estos métodos que te vas a encontrar que no va a ser necesario que ocupes,
en este caso, 'window. 'y la propiedad o método que quieras, a veces
simplemente con que pongas la propiedad o método que quieres usar puede
funcionar. La recomendación es: no dejes de usar el objeto'window' para que
tengas la certeza de que todo va a funcionar adecuadamente. En este caso
estamos mostrando el ancho y el alto de nuestra ventana, así que actualizamos
el navegador y vemos que tiene ahorita un tamaño de 283 x 559. Si yo hago
algún movimiento en mi ventana, en este caso vamos a hacer más grande la
ventana, actualizo el navegador y cuando lo actualizo vemos como el ancho ya
cambia por 800, es decir, esto puede irse ajustando sin problemas. Y también si
yo cambio y hago la actualización de la altura. Regresemos ahora la ventana a
su estado original para tener más espacio en el código. También, a partir
de'window'podemos hacer muchas cosas. Por ejemplo, si yo quiero puedo
almacenar datos directamente en el navegador. En serio, es posible, lo único
que tenemos que hacer aquí primero es acceder a la sección de Application. En
la sección de Application tú podrás encontrar mucha información, en este caso
tenemos un objeto que dice aquí Storage. En este objeto Storage, podemos
almacenar información de manera local o por sesión. Por aquí teníamos
almacenado algo previamente, entonces simplemente lo voy a eliminar para
este ejemplo. Nosotros podemos utilizar este tipo de objetos para
guardar algunos datos como, por ejemplo, algun "token", algún nombre
usuario..., algún texto que no necesitemos que vaya al servidor, y eso
obviamente pertenece al objeto'window'. Como te había explicado previamente,
podemos utilizarlo si necesidad de'window'. En este caso estamos trabajando
directamente con'localStorage' y tiene este un método llamado'setItem'. Este
tipo de elemento funciona porque recibe un par de datos, el primero es el
campo y el segundo es el contenido, y ya. Si yo necesito recuperarlo en algún
momento, lo podré recuperar de esta manera, donde lo único que tendré que
hacer es hacer uso igual de'localStorage' pero con un método
llamado'getItem'. Y lo que voy a hacer es obtener como tal este ítem pero
almacenado directamente en esta variable'contenido' Vamos a actualizar el
navegador y vemos como precisamente cuando yo tengo este dato, aquí tengo
contenido y tengo su valor, el valor que dice: "Código y café es una gran
combinación". Pero ahora vamos a ver lo siguiente. ¿Qué te parece si ese
contenido lo mandamos directamente a este párrafo que tenemos arriba? Sí, en
serio, es posible que podamos cambiar ese contenido. Para poder hacerlo, voy a
mover la variable donde estoy obteniendo los datos y voy a utilizar un método
correspondiente al DOM. Como puedes ver, estamos utilizando ahorita un
método del BOM o del'windows' para poder almacenar información en el
navegador. Y ahora, ya que recupero información del navegador, lo voy a
mandar al documento utilizando el DOM. A este tipo de situaciones te vas a
enfrentar diariamente, así que no te preocupes, poco a poco te irás sintiendo
más cómodo con el lenguaje. En este caso, si te das cuenta, ya teníamos ligado
este párrafo a esta variable y entonces lo único que usaré es un método
llamado'innerHTML'. Esto va a reemplazar todo el contenido que tenemos
aquí y va a reemplazar el contenido de esta variable por lo que estamos
trayendo en'contenido'. Actualizamos el navegador y una vez que actualizamos,
ahora sí, vamos a pulsar el botón ¡Púlsame!, pulsamos y vemos como
obviamente recupera la información del'localStorage', que es esta información
que tenemos aquí, y la almacena en'contenido'. Y después la estamos
mandando directamente al HTML. Esta característica es bastante buena, y
también existen muchas más propiedades y muchos más métodos. Por ejemplo,
aquí te voy a dejar algunos que te pueden servir mucho si es que tú quieres
manipular la navegación de tu página. Por ejemplo, 'window. history', con su
menú'forward', lo que va a hacer es avanzar, con el menú'back'te va a regresar
en el histórico, y con el menú'go'te podrá mover a través del histórico que
tengas de navegación en tu navegador. Así, entonces, ahora ya conoces el
DOM, ya conoces el BOM, y lo mejor de todo: ya sabes cómo integrar ambas
características. Si quieres saber más propiedades y más métodos puedes acudir
a la documentación que existe tanto de parte de Mozilla como en un sitio
llamado'w3schools'; esta te sacará de muchos apuros.

Obtener datos con fetch

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Con JavaScript podemos conectarnos a datos remotos o a archivos con datos
que tengamos almacenados localmente. De hecho, esta es una característica
muy recurrente en casi todos los sistemas, aplicaciones o páginas web que
vayas a desarrollar. Probablemente hayas escuchado que hay muchos servicios
en Internet que te ofrecen algo llamado API o "API", esto es un mecanismo para
que puedas consumir sus datos. Por ejemplo, servicios como
Spotify, YouTube, Flickr, etc., tienen disponible ese tipo de API y, de hecho,
muchos sistemas también que no son tan públicos tendrán disponible este tipo
de sistemas, para lo cual será necesario que tengas un mecanismo
para conectarte. En este ejemplo en el cual vamos a trabajar tenemos, en el
HTML, una sección llamada'contenedor'y un botón que dice "Traer
datos". Cuando pulsemos este botón nos vamos a traer contenidos del servicio
que estamos viendo de este lado, que es un servicio libre que nos va a permitir
conectarnos a datos, y los vamos a mostrar dentro de este'contenedor'. Así que
vamos a comenzar a conectarnos. Para esto vamos a utilizar el método
llamado'fetch'. Este método llamado'fetch'va a recibir como parámetro la URL o
"link" donde se encuentren todos nuestros datos. En este caso, el "link" que
vamos a utilizar es este: 'jsonplaceholder. typicode. com/posts'. Una vez que
nosotros entramos, una vez que lo hacemos, puedes ver que esto es un archivo
de JSON, que este se genera automáticamente y está almacenado en algún
lugar, en este caso en este servicio. ¿Qué vamos a hacer? Lo vamos a agregar
aquí directamente entre comillas y desde aquí vamos a poder consumir toda la
información. Ahora, 'fetch'trabaja en base a promesas, pero ¿qué es una
promesa? Todos hemos hecho una promesa alguna vez donde a quien le
hacemos la promesa se queda esperando hasta que nosotros la
hagamos porque confía que en algún momento nosotros la cumplamos. Lo
mismo va a suceder con los datos, los datos van a trabajar con promesas, dado
que van a solicitar la información a algún servicio remoto y van a quedar a la
espera de esos datos. Para poder hacer eso, vamos a utilizar un método
llamado'then', que en este caso, como tú puedes ver, vamos a decir 'fetch', es
decir, vamos a traernos todos estos datos y una vez que los tengas, 'then',
vamos a hacer algo. En este caso tenemos que preformatear los datos y esto lo
tendrás que hacer siempre que trabajes con este método. Y aquí lo que vamos a
hacer es que recibimos la información'data' y la vamos a convertir en un'data.
json'. Este tipo de "arrow functions" hace el retorno inmediatamente y ahora sí
podremos acceder a esta información, para lo cual tendremos que usar
nuevamente'then', es decir, una promesa más. Cada vez que accedemos con
un'then'es como si tuviéramos acceso a una nueva promesa. Y entonces,
simplemente a través de un "arrow function", voy a poder acceder a la
información que yo ya tengo lista. Aquí lo que voy a trabajar es primero corregir
este error que tengo aquí, listo, ya tenemos bien escrito el "arrow function", y
ahora escribimos un par de llaves. ¿Esto para qué? Para poder guardar
esta'data'que tenemos aquí en esta variable llamada'posts'. Lo único que
hacemos allí es asignarlo, y ya que está asignado, vamos a enviarlo a esta
función que tenemos preparada que se llama'mostrarDatos'. Así que solo
escribimos'mostrarDatos' y le pasamos'posts'. Vamos a probarlo. Así que
accedo a mi archivo, actualizo mi navegador y pulso el botón Traer datos. Una
vez que yo lo pulso, vemos que traemos toda la información que habíamos
visto. Tiene esta vista porque aquí nosotros tenemos un estilo ya
predefinido, pero quien se encarga de mostrar toda esa información es la
función'mostrarDatos', es decir, con'fetch'lo extraemos y dentro de esta función
se encuentra la generación dinámica de todos los elementos utilizando el
DOM. Así, entonces, ya puedes conectarte a datos remotos utilizando el
método'fetch'nativo de JavaScript.
Trabajar con promesas en JavaScript
Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Muchas veces, nuestras fuentes de datos pueden ser muchas, es decir, no
solamente vamos a necesitar conectarnos a una sola fuente de datos, tal vez
necesitemos conectarnos a dos, a tres o a más. Para esto vamos a trabajar de la
mano con las promesas que tiene'fetch', para que así podamos controlar el flujo
de la información cuando viene de distintas fuentes. Para esto vamos a utilizar
un servicio que se encuentra en el'restcountries. eu' donde nosotros podemos
acceder a información de todos los países del mundo. Este servicio que
nosotros vamos a utilizar nos regresa un JSON con toda la información y, de
hecho, dentro de toda la información que tiene aquí podrás encontrar en
algunos casos una propiedad llamada'flag'. Esto, en su contenido, te da la ruta a
la imagen de una bandera de cada país. También vamos a seguir utilizando el
servicio que teníamos previamente. Ahora vamos a nuestro archivo 'index.
html' y vemos que tenemos dos secciones distintas: una llamada Banderas y una
llamada Posts. En cada una de ellas estaremos poniendo las secciones cuando
pulsemos el botón Traer datos. Lo primero que vamos a hacer es llenar las
funciones que tenemos aquí de'getPosts'y'getCountries'. En el caso de'getPosts',
lo que vamos a hacer es un'return'directamente al'fetch'. Lo estamos
encapsulando en una función para que podamos reutilizar cada vez
que necesitemos estas funciones y no nos esté generando algún error. Ahora ya
tenemos dos funciones: 'getPosts'y'getCountries'. Estos, al final, estarán
retornando una promesa. Así que cuando yo voy a trabajar con mi botón, lo
primero que voy a pedir es traerme todos los'posts'. Para eso tengo este
método y a partir de aquí yo puedo acceder directamente a todas las
promesas, porque como me retorna el resultado de'fetch', entonces tengo
acceso a una promesa. Como habíamos visto previamente, necesitamos
primero traernos los datos y formatearlos en tipo JSON y después de esto
vamos a trabajar nuevamente con el'then' y esto nos va a servir para poder
mostrar los datos que estamos recibiendo. En este caso vamos a recibir
los'posts'y, utilizando un "arrow function", vamos a mandar la
información primero a'mostrarDatos', es decir, la función que teníamos escrita
previamente para mostrar todo el contenido de los'posts'. Ahora, una vez que
ya tenemos esto, vamos a invocar el resultado de'getCountries', pero esto lo
vamos a hacer de la siguiente forma. Aquí, en la misma promesa, también es
posible que yo pueda retornar nuevas promesas. Es decir, una promesa puede
retornar otra promesa y así sucesivamente hasta cumplir el objetivo. Una vez
que lo tenemos, repetimos los pasos. ¿Qué quiere decir? Que esto va a esperar
hasta que nosotros tengamos otra promesa escrita. Quiere decir que cuando se
ejecute esta función que va a traerse a los países, va a generar una nueva
promesa, y cuando lleguen los datos lo único que va a hacer es "parsearlos" a
JSON y posterior a eso tendremos la última promesa para mostrar los datos. Lo
único repetitivo y complejo que tiene esta situación es que cada que llegan los
datos, la primera vez tienes que convertirlos a un JSON y después ya puedes
acceder a la información. No te olvides de ese paso. Ahora esta
función'mostrarBanderas'lo que se encarga es de leer dónde se encuentra la
bandera y generar una imagen. Vamos a actualizar nuestro navegador y vamos
a pulsar el botón Traer datos. Esto, como puedes ver, rápidamente nos trajo
todos los textos y también nos trajo todas las banderas. ¿Qué tal? Ahora ya
podemos conectarnos a dos servicios y estar trabajando con las promesas y
reaccionar de distinta forma dependiendo de en qué momento lleguen los
datos de cada petición.

Cómo maneja JavaScript los errores

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
"No todo es miel sobre hojuelas". Muchas veces nos vamos a enfrentar a
errores y errores que no van a depender de nosotros. Por ejemplo, ¿qué sucede
si los servicios que estamos consumiendo no están disponibles o los datos en
algún momento se malformaron y no llegó bien la información? ¿O
simplemente no tenemos acceso a Internet y, por tanto, no podemos consumir
datos? Bueno, también es muy importante que podamos manejar los errores y
reaccionar ante ellos. Para esto vamos a trabajar con este ejemplo. Aquí, en el
HTML de este ejercicio, tenemos una división con un ID llamado'mensajes'. Lo
que haremos es que cuando detectamos que hay un error vamos a enviar toda
la información directamente a esta división. Esta división también tiene una
clase'hide' que hace que esta esté oculta inmediatamente que carga la
página. Esto se va a provocar porque tenemos una regla de'mensajes'donde
aparece todo con un color, con una forma, etc. Por ejemplo, ¿qué sucede si yo
quito'hide'y actualizo mi página? Vemos que tenemos aquí esta zona de
mensajes. La idea es que esa zona de mensajes solamente aparezca cuando se
necesite, así que vamos a solucionarlo. Vamos al archivo'app. js' y aquí, después
de que tenemos nuestras peticiones, vamos a trabajar con un método
llamado'catch'. Este método llamado'catch', como su nombre en inglés lo dice,
va a atrapar todos los errores que sucedan. Y aquí lo que vamos a hacer es que
vamos a capturar la información primero a través de un error. Así que podemos
mandar aquí'error' y vamos a trabajar con un "arrow function" y dentro de este
"arrow function" vamos a escribir un par de llaves para todo lo que tenemos
que hacer. Lo primero que vamos a hacer es mostrar ese pedazo de mensaje y
para esto vamos a utilizar el método'classList . toggle'para que podamos
"remover" la clase. Este'toggle' es un método del DOM que lo que va a hacer es
simplemente "remover" o agregar la clase según se necesite. La lógica de este
agregado o de "remover" esta clase ya está dentro de este método. Y, como
puedes ver, acá nosotros tenemos la asignación del HTML a una variable
de JavaScript. Ahora, entonces, vamos a mandar el mensaje de error para que se
muestre en esa parte de mensajes. Entonces, para eso vamos a
utilizar 'innerHTML'y vamos a mandar el error que estamos recibiendo como
parámetro y, posterior a eso, vamos a ocultarlo. Pero para ocultarlo vamos a
usar un truco, ¿recuerdas el'setTimeout, que después de un cierto tiempo
ejecuta una acción? Bueno, pues ahora vamos a utilizarlo. ¿Para
qué? Simplemente para que vuelva a aplicar la clase'hide' a'mensajes', y así,
después de tres segundos que nosotros estamos estableciendo, el mensaje
desaparezca. Vamos a hacer la prueba primero, actualizo mi navegador y pulso
el botón Traer datos. Aquí todo funciona correctamente, pero vamos a provocar
un error. ¿Qué tal si yo escribo mal la URL? Voy a agregar una eme extra para
provocar este error, guardo y actualizo el navegador. Pulsamos el botón Traer
datos y vemos como en este momento se genera un error y rápidamente
apareció ese mensaje. ¡Ups!, se fue inmediatamente. Vamos a darle un poco
más de tiempo, vamos a darle 6 segundos. Actualizo el navegador y pulsamos el
botón Traer datos nuevamente. Como vemos, aquí nos dice que tiene un error
que dice: "Fail to fetch". Esto significa que hay un error y no pudo traerse la
información necesaria. No te preocupes, a ti en la consola te va a quedar un
poquito más de detalle del error y podrás saber qué es lo que sucede. Una vez
que el error es corregido, actualizamos el navegador y así podemos traernos
nuevamente la información. Así, ahora ya puedes reaccionar cuando algo no
salga conforme a lo esperado.

Trabajar con clases en la programación orientada a objetos

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La programación orientada a objetos es un tema fascinante, porque nos
facilitará mucho del trabajo que tenemos que hacer cuando
estemos programando. Y más que facilitarnos nos ayudará a entender y a
estructurar mejor nuestras aplicaciones. Para esto, vamos a entender un poco
de la historia que existe de la programación orientada a objetos en
JavaScript. Aquí, en el código que estás viendo en pantalla, está declarada una
clase a como se trabajaba regularmente. En esta clase nosotros teníamos una
función, y después cada uno de los métodos lo declarábamos con un
"prototype" y escribíamos una función. Y simplemente cuando queríamos hacer
una instancia de cada una de ellas, entonces hacíamos un "new" y poníamos el
nombre de la clase. Tal vez te hayas topado con esto alguna vez, tal vez
nunca, no te preocupes, vamos a revisar ahora todos estos temas que hemos
tocado en pocos segundos. Lo primero que vamos a hacer será entender cómo
funciona una clase en JavaScript actualmente. Para esto, vamos a comentar
primero todas estas líneas y vamos a generar una nueva clase, pero
trabajaremos ahora con una nueva sintaxis. Una nueva sintaxis que, de hecho, es
más popular y es más aceptada. Trabajaremos con la palabra
reservada'class'. Para esto, antes, nosotros teníamos una clase llamada
Pantalla, así que vamos a crearla nuevamente. Después de que creamos la
clase, lo único que tenemos que hacer es abrir y cerrar llaves para delimitarla. Y
posterior a eso, toda clase siempre va a necesitar de un constructor. Este
constructor es el que va a dar paso para que se inicialicen las cosas y, por
ejemplo, aquí abajo nosotros tenemos un par de constantes, vamos a copiarlas
para entender qué sucede con ellas. Voy a quitar de aquí los comentarios y
también voy a quitar los parámetros que tiene cada una. El objetivo de esto es
que tú puedas ver que en este caso, cuando utilizamos la palabra'new' y
escribimos el nombre de la clase, estamos haciendo una instancia. Esto es como
cuando se prepara, por ejemplo, gelatinas. ¿Qué sucede? Cuando tú preparas
una gelatina tienes distintos moldes, o incluso si preparas pasteles o algún
dulce que se base en algún molde. La idea es que tengas moldes para preparar
cosas, entonces tú puedes vaciar todos los ingredientes y contenidos
mezclados en esos moldes y, al final, cuando terminas el proceso, ya tienes un
producto. Estas pueden ser instancias. De hecho, el objetivo que va a tener es
declarar la estructura y funcionamiento básico para que tú lo puedas
utilizar. Aquí, en este caso tenemos una clase'Pantalla'. Ahorita no tiene nada,
no tiene propiedades, no tiene métodos, es una pantalla vacía. Y después de
esto tenemos un par de instancias, es decir, una instancia de pantalla que se
llama'tvSala' y otra instancia de otra pantalla que se llama'tvHabitacion'. El
objetivo es que nosotros posteriormente podamos migrar todas estas funciones
y propiedades a la nueva forma de escribir una clase. Si actualizamos nuestro
navegador, podemos encontrar por aquí que tenemos un pequeño error. No te
preocupes, esto es porque el constructor también necesita su "set" de
llaves. Actualizamos y vemos que ahora ya no tenemos ningún error, y si
escribimos aquí directamente 'tvSala' podemos ver que ya tenemos una
instancia de Pantalla. Hasta ahora, entonces, ya sabes cómo se escribe una clase
con esta sintaxis.

Objetos: sus métodos y sus propiedades

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
En la programación orientada a objetos, las clases son el elemento base que
se necesita para poder comenzar con este paradigma. Ahora, también se
requieren de otros elementos, como son las propiedades y como son los
métodos. Las propiedades van a describir al objeto que estamos creando y los
métodos le van a dar vida. Es como si fuera una persona. Las propiedades
son su color de piel, su color de cabello, su estatura, su peso. Y los métodos son
las cosas que puede hacer, por ejemplo, puede caminar, puede brincar, puede
correr, puede sentarse, etc. Entonces, lo que estamos haciendo con la
programación orientada a objetos es hacer una analogía o una metáfora de la
vida real pero en un código, es decir, en la computadora. Para esto, lo que
nosotros tenemos aquí es una clase llamada'pantalla', y en esta clase llamada
pantalla lo que nosotros vamos a ocupar es generarle a esto sus propiedades y
sus métodos. Lo más simple es generarle sus propiedades. Por ejemplo, cuando
tenemos un constructor, el constructor en una clase define cómo es que va a
llegar al mundo, es decir, cuando nosotros hacemos una instancia, cómo se va a
presentar en nuestro entorno de desarrollo. Por ejemplo, una pantalla, cuando
se crea, ¿qué va a tener? Podemos trabajar, por ejemplo, en tres
opciones. Podemos decir que va a tener un modelo, que va a tener una marca. Y
para esto vamos a llevar un orden, vamos a mandar primero la marca, después
el modelo y posteriormente las pulgadas. Aquí, nosotros ya estamos recibiendo
datos para poder inicializar una'pantalla', es decir, la información básica para
que este objeto pueda existir. Y después de eso, lo único que necesitamos es
hacer una asignación. ¿A qué me refiero con esta asignación? Cuando estamos
trabajando con las propiedades, estos datos van a llegar directamente de la
instancia que estamos haciendo, es decir, cuando estamos utilizando 'new
Pantalla'. Y cuando queremos asignarlo o pegar esos datos directamente a la
clase Pantalla o a la instancia que estamos utilizando, necesitamos trabajar con
el objeto'this' –este objeto'this'en español es como "este"– es decir, a la
instancia en la que estemos trabajando. Así, entonces, aquí ya tenemos
declarada una'pantalla'con tres propiedades. Cuando actualizo mi navegador y
quiero utilizar alguna de estas propiedades, por ejemplo, trabajando
con'tvSala', si yo lo ejecuto, automáticamente me dice que las propiedades no
están definidas. ¿Esto por qué? Porque cuando yo la inicialicé no le mandé
ningún dato. Así que vamos a mandarle parámetros como si fuera una función
normal. Aquí, para el primero estamos mandando la marca Master, el modelo
Oasis y es de 55 pulgadas. Para la siguiente'pantalla'que tenemos declarada
aquí, en este ejemplo, que se llama tvHabitacion, tenemos una marca Origin, un
modelo Artemis y es de 80 pulgadas. Actualizamos nuevamente el
navegador, invocamos a'tvSala'en la consola de nuestro navegador y vemos
como ahora sí ya tiene datos. Lo que sigue es verdaderamente simple: puesto
que ya declaramos las propiedades, ahora tendremos que declarar métodos. En
este caso tenemos tres métodos: el método de'encendido', el método
de'volumen'y el método de'información'. Estos métodos no requieren de la
palabra reservada'function', es decir, no necesitas escribir esta
palabra'function'antes de declararlo. Lo único que necesitas es escribir el
nombre, paréntesis, y dentro, las llaves para que puedas declarar las acciones
que va a hacer. En este caso, vamos a mover estos'console. log' que teníamos
para los métodos previos a esta versión que estamos trabajando. Aquí los
insertamos sin ningún problema, y después de esto ya voy a poder
invocarlos. ¿De qué manera voy a poder invocarlos? Bueno, guardamos nuestro
documento, actualizamos el navegador y vamos a trabajar, por ejemplo,
con'tvSala'. Si yo quiero acceder a la información, es decir, al método'info', lo
único que hago es invocarlo: punto 'info', abro y cierro paréntesis y pulsamos
Enter y ¿qué dice?: "La pantalla master de modelo Oasis es de 55 pulgadas" y
eso es el mensaje que tenemos acá; la'pantalla', y accedemos a la
propiedad'marca'de dicha instancia; de'modelo', y accedemos a la
propiedad'modelo'; 'es de', y accedemos a su propiedad'pulgadas'. También yo
puedo hacer esto para la otra pantalla. Por ejemplo, yo escribo
aquí'tvHabitacion' punto, 'info', y al hacerlo simplemente tengo acceso pero
ahora con los otros datos. Como te das cuenta, esto es la plantilla, es la clase, y
después los datos varían según como lo vayas creando. Ahora, un "tip" más
antes de que se nos pase: para poder generar más propiedades necesitamos de
las palabra clave'set'y'get', donde con'set'estamos definiendo una función que
va a recibir un dato y con ese mismo vamos a asignar un valor. Y
con'get'podemos obtener esa información. Y después, con el'return'podemos
regresarlo. Esto, obviamente no lo vamos a usar como si fuera una función,
vamos a utilizarlo como si fuera una propiedad. Hagamos el
ejemplo: 'tvSala', punto, y vamos a agregarle un peso. En este caso, el peso que
vamos a agregarle es de 10 kilos, escribiremos'10 kgs', damos Enter, y después
cuando accedemos a la propiedad, automáticamente tenemos el valor que
previamente habíamos asignado. Muy probablemente esto lo hayas visto en
algunos otros códigos. Bueno, ya sabes ahora cómo se genera. De esta forma,
ya pudimos trabajar con propiedades y métodos que debe tener toda clase.

Herencia de métodos y propiedades

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando trabajamos con programación orientada a objetos, muchas veces
creamos plantillas o clases muy genéricas. Y este tipo de clases nos van a
servir porque a partir de estas se van a derivar otras clases, es decir, vamos a
tener clases padre y vamos a tener clases hijo. Para este ejercicio, lo que vamos
a hacer nosotros es generar una nueva clase. Hemos estado trabajando con una
clase'pantalla'. Vamos a imaginar que estamos trabajando en una aplicación que
va a controlar los productos de una tienda. Para esto, nuestra clase general es
una clase llamada'producto'. En esta clase llamada'producto', nosotros tenemos
varias propiedades. Primero, cuando se inicialice el producto recibimos un
número de serie. Después de esto, tenemos también un tiempo de garantía, es
decir, todos los productos van a tener este mismo tiempo de garantía. Tiene un
método llamado'infoTienda'para saber en dónde se adquirió este producto. Y
después de esto tiene un par de métodos para poder establecer la garantía, es
decir, vamos a modificar la garantía del producto. Vamos a inventar ahorita
también una regla. Por ejemplo, si nosotros tenemos un producto que es
Pantalla, la garantía va ir disminuyendo día a día, pero en este caso va a
disminuir con cada uso, es decir, cada que encendamos la
pantalla. Obviamente, este es un ejemplo no muy tradicional, pero nos ayudará
a entender la herencia de métodos y propiedades trabajando en orientación a
objetos. Ahora, aquí ya tenemos dos clases, estas dos clases pueden trabajar
independientemente, pero nosotros lo que queremos hacer es que la
clase'pantalla'extienda de producto, es decir, herede todos los métodos y
propiedades que están disponibles. Para eso, lo que vamos a utilizar es una
palabra reservada llamada'extends' y después vamos a decirle sobre quién
queremos extender. Ahora tenemos una clase'pantalla'que extiende
de'producto', es decir, que está aceptando que la clase padre
es'producto'. Después de que nosotros tenemos esto, vamos a guardar y
actualizar nuestro navegador y vamos a encontrar que primero tenemos un
error. Es decir, aquí no ha acabado todo. Nosotros tenemos un error que dice
que se debe llamar al "superconstructor", pero ¿qué es esto? Cada clase tiene
un constructor, pero obviamente necesitamos inicializar el primero para que
pueda funcionar el segundo. Como'pantalla'ahora es hijo de'producto', hay una
secuencia en cadena que se necesita cumplir. Para que esto pueda cumplirse
satisfactoriamente, lo único que tenemos que hacer es utilizar la palabra
reservada 'super' dentro del constructor del hijo, en este caso en la
pantalla. Aquí nosotros estamos agregando'super'y vamos a trabajar con el
número de serie. ¿Y por qué con el número de serie? Porque si te das cuenta, en
la clase que tenemos definido aquí arriba, tenemos que el constructor inicializa
con un número de serie, entonces eso quiere decir que ahora que yo estoy
trabajando con estas funciones voy a tener que hacer algunas
modificaciones. Por ejemplo, yo tengo que mandar inicialmente el número de
serie y vamos a mandar aquí, por ejemplo, '13579'. Y en la sección de abajo
vamos a mandar otro número de serie y vamos a ponerle que sea ahora uno
distinto y que sea'24680'. Cerramos las comillas adecuadamente, y después de
esto vamos a modificar obviamente el constructor que nosotros tenemos
de'pantalla'para que reciba el número de serie. Actualizamos nuestro navegador
y vemos como ahora el error ya se fue. Pero ¿qué sucede? Ahora yo puedo
acceder al número de serie. 'Pantalla'no tiene el número de serie como
tal, quién sí lo tiene es'producto', a través de su propiedad'numSerie', así que
vamos a poner ahora'tvSala', punto, 'numSerie' y, listo, ya tenemos acceso a las
propiedades del padre. Es como si tu padre te prestara un auto, si validas que tú
realmente seas su hijo, entonces puedes utilizar su auto; de lo contrario, no
podrás utilizarlo. Ahora, ¿recuerdas la regla extravagante que habíamos hablado
sobre la garantía? Bueno, lo que queremos es que cada que se ejecute el
método encendido, esto modifique el valor de la garantía. Vamos a validar
primero cuánto tiene garantía ahora. Ejecutamos'tvSala. garantia'y vemos que
tiene el valor de 100, pero cuando yo le enciendo quiero que este valor
disminuya, para lo cual voy a usar la palabra reservada'this', punto, y voy a
acceder a'garantia'. ¿Y por qué puedo acceder a'garantia'de aquí? Porque
simplemente estamos extendiendo de producto, es decir, estamos accediendo a
la propiedad del padre y lo único que vamos a hacer, por ahora, es enviarle un
valor. ¿Por qué un valor? Porque yo, dentro de'garantia', voy a estar
decrementando dicho valor. En este caso, en el método'garantia', cuando lo
recibimos de esta manera, ejecuta una operación "menos, igual", es
decir, 'tiempoGarantía' es igual a'tiempoGarantía', menos el valor que estamos
recibiendo, por tanto, tendrá que ir decrementando de uno en
uno. Actualizamos el navegador y volvemos a repetir esto, vemos que
tenemos en'tvSala. garantia'. Ahora vamos a encender la televisión, utilizamos el
método'encendido', y para esto no olvides el uso de paréntesis. Cuando
nosotros lo encendemos vemos como aquí tenemos el texto que dice
"La pantalla Master se ha encendido". Vamos a probar la garantía nuevamente y
vemos como ahora la garantía ha disminuido. Supongamos que se apagó la
pantalla, volvamos a prenderla nuevamente. Listo, accedamos a la garantía, la
garantía va disminuyendo de uno en uno. Ahora, ¿recuerdas que hace unos
segundos te dije que no olvidaras utilizar los paréntesis? Esto ¿por qué? Porque
si tú no los utilizas, cuando ejecutas la acción te escribe la función, es decir, te
pone algo conocido como el "blue print" o la estructura de la función. Entonces,
lo único que verás aquí es cómo está escrito. Ahora veamos una cosa más que
es muy importante y estos son los métodos o las propiedades estáticas. Por
ejemplo, en la clase'producto'tenemos un método llamado'infoTienda'. Aquí
vamos a escribir la palabra reservada'static'. ¿Qué es lo que va a hacer esta
palabra reservada? Va a hacer que el método'infoTienda', en la clase
Producto, esté disponible, aunque no hagamos una instancia, es decir, aunque
nosotros no hagamos un'new Pantalla'y generemos un nuevo
producto. Entonces, vamos a actualizar nuestro navegador, vamos a ver que
ahora tenemos entonces: 'Producto', punto, y vamos a utilizar el método
estático que acabamos de crear y escribiremos'infoTienda'. Aquí nos generó un
error porque lo utilizamos con paréntesis, y esto, si recuerdas, cuando
trabajamos con'get'y'set' lo accedemos sin paréntesis. Escribimos ahora de
nuevo y vemos como ya podemos acceder a esa información. Si te das cuenta,
jamás hicimos una instancia del producto, pero eso no significa
que'pantalla'también lo tenga. Entonces, vamos a probarlo rápidamente y
vamos a escribir aquí 'Pantalla', punto, 'infoTienda', lo ejecutamos y, claro,
también existe entonces. ¿Por qué? Porque, si recuerdas, esta información se
extiende. Entonces todas las propiedades del padre y todos los métodos del
padre van a pertenecer también al hijo. Pero, de la misma manera, no fue
necesario que nosotros tuviéramos que hacer una instancia de ese objeto para
poder utilizarlo.

Manejo de errores con JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La primera característica de todo programador es que debe ser
altamente tolerante al fracaso. ¿Por qué? Porque, generalmente, cuando
programamos no todo nos sale a la primera, entonces debemos intentar una y
otra vez y otra vez investigar, leer, corregir, volver a probar hasta que nos
salga. Si bien tenemos luego muchos fundamentos de programación, esta es
una de las habilidades que debemos pulir mucho. Pero no te preocupes,
conforme vayas tomando experiencia y horas de código, este tipo de errores
van a ser menos o simplemente serán otro tipo de errores de otro nivel a los
cuales te tengas que enfrentar. Pero, eso sí, ni en JavaScript ni en cualquier
lenguaje vas a estar exento de errores y, por tanto, también todos los lenguajes
de programación te ofrecen mecanismos para que puedas reaccionar ante estos
errores. Hay errores muy simples con los cuales puedes reaccionar. Por ejemplo,
vamos a provocar aquí alguno de ellos. Lo que voy a hacer aquí, en esta
aplicación, es asignar a un "array" o un arreglo un valor que simplemente no sea
real. Cuando yo actualizo mi navegador, vemos que tenemos un error que dice
que tiene un tamaño inválido, ¿pero cómo podemos saber o cómo podemos
reaccionar ante este error? Bueno, para poder manejar los errores tenemos una
estructura llamada'try and catch'. ¿Qué significa esto? Que yo puedo escribir
aquí 'try' y todo lo que escriba dentro de este bloque van a ser códigos que se
van a probar. Que si salen bien, no hay ningún problema, pero si salen mal va a
capturar el error a través del método'catch' y, obviamente, va a recibir de evento
un error con el cual nosotros podremos acceder y podemos mandar un mensaje
o podemos también dar más alternativas al usuario para que pueda corregir su
error si es que viene de los datos que él tiene o nos puedan informar a nosotros
del error que tenemos en nuestro programa. Aquí, por ejemplo, vamos a
mandar un'console. log' del error que tenemos. Visualmente, contra lo primero
que te podrás encontrar es que cuando actualicemos el navegador, este error
que aparece aquí en color rojo ya no va a aparecer en rojo. Actualizamos, ahora
simplemente aparece como un mensaje, porque lo estamos enviando a través
del'console. log'. Pero la gran diferencia es que ahora sabemos que estamos
tratando con un error, de esta manera también podemos capturar nosotros otro
tipo de errores. Vamos a comentar esta línea y vamos a generar, por ejemplo,
una asignación errónea: 'x = y'. ¿Cuál podría ser el error aquí? Y es que la
variable Y no está definida. Entonces, de nuevo nos estamos enfrentando a este
tipo de asignaciones o, incluso, si llegamos a utilizar algún método nativo o no
nativo, un método que hayamos hecho nosotros, entonces podemos detectar
también los errores. Aquí vemos el uso de un método nativo que se
llama'decode URIcomponent' y estamos mandando un dominio, cual
sea. Actualizamos y probamos y vemos también como nos está detonando un
error. La gran diferencia es que dependiendo del error es el mensaje que
nosotros obtenemos. Aquí, entonces, tú ya aprendiste cómo puedes acceder a
esta información y poder estar mostrando los errores. De hecho, los errores
siempre tienen un mensaje que podemos acceder como'error', punto,
'message', y también tienen un nombre. Vamos a duplicar esta línea y vamos a
mandar 'error', punto, 'name'. Actualizamos el navegador y entonces podemos
ver como el mensaje es que la URL está mal formada y el nombre del error es
el'URIError'. De esta forma, ya somos capaces de reaccionar ante los errores que
se nos estén presentando en nuestro código.

Generación de errores personalizados con JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Cuando nos enfrentamos a una nueva aplicación o un nuevo proyecto, lo que
tenemos que hacer primero generalmente es planear cuáles van a ser todos los
flujos de datos que se van a seguir en nuestra aplicación. Pero algo que
olvidamos generalmente hacer es planear también los errores. ¿Por qué planear
los errores? Porque también es muy importante que le puedas decir tú al
usuario en que está mal y así el usuario tenga la facilidad de resolver o
corregir sus datos de entrada ante el sistema que tú hayas hecho. Para esto,
nosotros podemos trabajar con errores personalizados. Así, una vez que tú
tengas identificados todos los posibles errores que lleguen a suceder puedas
lanzar mensajes adecuados ante cada situación. En este caso, nosotros tenemos
un'try and catch' que va a escuchar una condición. Si esta condición de valor 1,
mayor que valor 2, se cumple, se va a mostrar este mensaje; de lo contrario,
sería un error. ¿Estás de acuerdo? Vamos a ver, entonces, cómo podemos
detonar un error en esta situación, es decir, en la situación en que esta
condición simplemente no se cumpla. Para poder generar este
error utilizaremos la palabra reservada 'throw', que la vamos a escribir como: te,
hache, erre, o, doble uve. Esta palabra reservada, como su nombre en inglés lo
dice, va a tirar o va a detonar algo. En este caso lo que vamos a detonar es un
error. Sí, vamos a utilizar el objeto'error', que existe directamente en JavaScript,
para detonar este mensaje de error y sea tratado como tal. Aquí, nosotros
vamos a enviar un mensaje que va a decir "Valor 1 no es mayor que valor
2". Esto va a suceder solamente cuando esta condición no se cumpla. Cuando
esa condición no se cumpla, se va a detonar un error con este mensaje. Y lo
mejor de todo: que en esta estructura que tenemos nosotros de'try and
catch', estamos capturando un error. En teoría, cuando esta condición no se
cumpla, el mensaje que tenemos acá deberá mostrarse en la consola. Vamos a
aprobar rápidamente. Actualizamos el navegador y vemos que el mensaje
dice: "Mensaje de validación: 100 sí es mayor que 20", es decir, la condición se
cumplió. Vamos a afectar este dato y vamos a dejarlo como 10, para que
nosotros provoquemos este error. Actualizamos el navegador y vemos como
ahora dice "Error, 10 no es mayor que 20". Y esto sucede ¿por qué? Porque
como no se cumple la condición, entonces pudimos detonar un error, y así
también pudimos capturarlo y mostrarlo en pantalla. De esta manera, tú puedes
detonar cuantos errores necesites, no hay un delimitante. Lo que sí te
recomiendo es que los planees adecuadamente para no saturar de mensajes
innecesarios al usuario. Ahora ya puedes detonar tus propios errores.

Depurar tu código JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
La base de toda aplicación o de todo desarrollo en el cual
estaremos trabajando siempre es la correcta planeación. Es decir, nosotros
debemos planear, previamente a escribir el código, cuál va a ser el algoritmo
que vamos a estar utilizando. Para esto, puedes utilizar una hoja de papel e ir
escribiendo todos los pasos que se van a ir detonando en tu aplicación. Una vez
que nosotros tenemos estos pasos bien definidos, entonces ya pasamos a la
parte de escribir código. La parte más difícil de la programación no es escribir el
código o aprender un nuevo lenguaje. De hecho, es la generación de ese
algoritmo que te va a permitir solucionar un problema. Cuando tú ya estás
trabajando en el código y terminaste tu algoritmo correctamente, entonces
viene la etapa de pruebas y comienzas a tratar de ejecutar tu aplicación. Muchas
veces, puedes encontrarte con problemas. Tal vez lo hayas planeado
correctamente en el papel, pero algo en la escritura salió mal, entonces es
cuando nosotros necesitamos depurar nuestra aplicación o "debuggear" nuestra
aplicación, es decir, encontrar errores que muy probablemente hayamos dejado
pasar por alto. Para esto tenemos el navegador. Entonces, en este caso yo voy a
hacer la pantalla un poco más grande y voy a actualizar mi pantalla. Ahora que
yo la tengo actualizada y yo quiero depurar mi aplicación, todos los
navegadores cuentan con ese depurador o "debugger". En el caso de Google
Chrome, que estamos usando para este ejercicio, vamos a la pestaña de
Sources. Aquí, nosotros podemos ejecutar y probar todo nuestro código. Por
ejemplo, si yo actualizo mi navegador y doy clic donde dice'app. js' voy a poder
revisar todo el código que tengo disponible. En este caso, estábamos
trabajando directamente con una clase donde teníamos varios métodos y
teníamos varias propiedades, una de ellas era la que afectaba a la
garantía. Entonces, yo quiero analizar si realmente ese dato está pasando por
algo. Para esto, puedo trabajar con algo llamado "breakpoints". ¿Qué hacen los
"breakpoints"? Son puntos en tu programa que te van a permitir detener la
ejecución en ese momento para que tú puedas hacer pruebas. Por ejemplo, yo
quiero que cuando el método'set garantía' se ejecute, el programa se detenga
aquí para que yo pueda ver cuál es el valor que existe. Para poder generar un
"breakpoint", lo único que tengo que hacer es, en esta sección, dar un clic y
vamos a ver este ícono. Una vez que ya lo tenemos, vamos a actualizar nuestra
página y podemos ver lo siguiente: tenemos una pestaña que dice
Breakpoints. Entonces, con esta pestaña que dice Breakpoints podemos ver en
dónde lo tenemos, que en este caso es la línea 17. Ahora vamos a invocar esa
función. Para esto, nosotros podemos utilizar la tecla Escape, que nos va a
levantar una consola de la parte de abajo, o utilizar este símbolo que tenemos
en la parte superior derecha y mostrar la opción que dice Hide console drawer –
que en este caso la va a ocultar– o Show console drawer. Muy probablemente lo
puedas tener en español o en algún otro idioma, pero la función es la
misma. Ahora que ya lo tenemos, vamos a tratar de invocar a esta función. Para
hacerlo vamos a utilizar la instancia que ya teníamos, que en este caso se
llama'tvSala'. Vamos escribir 'tvSala', punto, 'encendido'. ¿Por
qué'encendido'? Porque si tú recuerdas, cuando nosotros teníamos esta función
de'encendido', aquí es donde modificábamos el valor de garantía, entonces
vamos a ejecutarlo. Lo ejecutamos y ¿qué sucede? En la pantalla se muestran
algunos elementos, uno de ellos dice 'Paused' o pausado por el
"debugger". ¿Qué quiere decir? Como nosotros tenemos un "breakpoint", ahí se
detuvo el programa. Del lado derecho vas a poder ver la información que
tienes. Por ejemplo, estás viendo que se refiere a'pantalla' y también puedes ver
toda la información que está trabajada en'pantalla'. Por ejemplo, la marca, el
modelo, el número de serie, las pulgadas, etc. Y en un color más tenue podrás
observar las propiedades o métodos que correspondan al padre, en este caso:
'garantia'y'peso'. Tenemos dos opciones: una, podemos ir a la opción de
Watch y en la opción de Watch nosotros podemos agregar la propiedad a la
cual queremos poner atención. En este caso, nosotros estamos trabajando
con'tvSala' y lo que queremos ver es la garantía. Entonces, ponemos'tvSala.
garantia' Si no lo escribimos correctamente, damos doble clic y escribimos,
ahora sí, 'garantia'. Como ves, ahora tiene 100. Pulsamos el "step over" que
tenemos en esta sección o el que tenemos aquí arriba. Cuando continuamos,
ahora sí baja a 99. Podemos dar Play y, una vez de esto termina, así tenemos el
nuevo valor. Si lo volvemos ejecutar, entonces se va a detener nuevamente en
este "breakpoint". Continuamos, damos Play y vemos cuál es el valor
actualizado. De hecho, cuando tu estás trabajando con este "debugger" y lo
actualizamos, podemos colocar nuestro cursor sobre alguno de los valores y
podemos ver cuál es el valor que tiene actualmente. Tú puedes agregar cuantos
"breakpoints" necesites, no te limites, solamente sé un poco ordenado para que
no te pierdas entre todos los "breakpoints" que puedas llegar a utilizar.

Uso del debugger

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
A veces, nuestro código va a ser muy grande, es decir, vamos a tener
demasiadas líneas de código que hacen que si utilizamos esta opción que
tenemos en pantalla para utilizar el "debugger" hagan el proceso demasiado
complicado. Por lo cual, nosotros tenemos una palabra reservada
llamada'debugger' que podemos utilizar con Google Chrome, y esto es que
nosotros, en el momento que deseemos, en nuestro programa
podemos utilizarla para que se detenga en la ejecución, esto sin necesidad de
tener escrito un "breakpoint", el cual, nosotros, como habíamos visto, podemos
agregar en cualquier momento y si lo queremos quitar, bueno, damos también
un clic sobre este "breakpoint" y se elimina. Pero ahora veamos cómo podemos
utilizar el "debugger" que ya hemos visto previamente. Por ejemplo, vamos a
trabajar con'mostrarDatos' Aquí, en'mostrarDatos', yo necesito que cuando la
información llegue se detenga el "debugger" para saber qué sucede con los
"posts". Vamos a probarlo. Actualizamos el navegador, pulsamos el botón Traer
datos y vemos como aquí se detiene nuestro programa en algún momento. ¿En
qué parte? Cuando nosotros tenemos los "posts", de hecho, si nosotros vemos
en esta sección, tenemos una parte donde se está mostrando el contenido de
los "posts", y así me ayudará a saber cuál es la información que se encuentra
en ese momento de la ejecución, yo puedo hacer "step overs" y continuar
durante todo el proceso hasta que se empiece a generar un elemento. En este
caso, si te das cuenta, estamos generando ya el título y después estamos
generando el siguiente "post". Así, cuando hacemos otra vez "step over" va a
continuar durante todo el proceso hasta que termine. A veces, esto puede ser
complicado, como en este caso que estamos trabajando con 100 datos. Para
poder correr toda la aplicación y evitar que se siga deteniendo, damos un clic
sostenido sobre esta flecha y pulsamos el botón de Play que aparece aquí, sin
ninguna modificación. Esto lo que hace es terminar de hacer toda la ejecución
del programa. De esta manera, esta palabra clave de "debugger" podemos
utilizarla en cualquier parte del programa y así podemos analizar
correctamente qué es lo que sucede con todos los datos que estamos
recibiendo sin necesidad de que tengas que mandar toda la información
directamente a consola.

Consideraciones generales con JavaScript

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
El alcance que tiene JavaScript en la actualidad es bastante grande, y todo lo
que has aprendido a lo largo de este curso te servirá para que puedas comenzar
y puedas trabajar con este lenguaje. Pero es muy importante que
conozcas algunas de las herramientas más importantes y conocidas que te
pueden servir o con las cuales te encontrarás en el camino. Una de ellas es
Node. js. Node es un entorno para poder trabajar en servidor pero con
JavaScript. Sí, JavaScript podemos utilizarlo directamente en el navegador, pero
como es un lenguaje muy versátil, entonces se genera una opción para poderlo
tener del lado del servidor, así entonces podemos ejecutar código de
JavaScript como si ejecutaras código de Java o código de PHP o código de
algún otro tipo de lenguaje. Entonces, Node es una de estas herramientas que
muy probablemente te encontrarás y con la cual tendrás que trabajar muy
pronto. Así que te recomiendo aprender sobre esta herramienta para que
puedas sacar más provecho del conocimiento que tienes ya sobre
JavaScript. Otra herramienta importante que te encontrarás es esta que se
llama Webpack. ¿Qué sucede? Actualmente tenemos muchos archivos con los
cuales vamos a trabajar y Webpack nos permite empaquetar todo en muy
pocos archivos o incluso, en ciertas circunstancias, en un solo archivo. Entonces,
las recomendación es: aprende y conoce sobre este empaquetador para que
puedas agilizar tu trabajo. De hecho, algunos "frameworks" como Angular, por
ejemplo, utilizan este empaquetador para generar sus aplicaciones. También te
recomiendo mucho que veas cosas como ESLint, que te permitirá escribir
JavaScript correctamente. Es decir, si estás escribiendo mal una sintaxis o tienes
algún error que desees solucionar, esta herramienta te dará las claves para que
puedas agilizar ese proceso. Otra herramienta que vas a utilizar mucho también
se llama TypeScript. TypeScript es un transpilador. ¿Qué es eso? Hay muchas
características que existen y que se van agregando a JavaScript pero que no
todos los navegadores soportan. La labor de TypeScript es hacer un transpilado,
es decir, convertir este código, con todas las cosas nuevas que casi todos los
navegadores no soportan, a un código que realmente pueda soportarlo. Esto es
posible gracias a TypeScript. También te encontrarás con algunas cosas como
AngularJS, React o Vue, que te van a permitir a ti trabajar de una manera más
ágil con el lenguaje. Estos no son más que "frameworks" que te van a facilitar tu
labor como programador. También, si te animas a trabajar con algunas
aplicaciones nativas tendrás algunas herramientas como NativeScript o como
Ionic. Aunque incluso hay más en el mercado, pero estas dos son muy
populares y, de hecho, el alcance de JavaScript es tan grande que también
podemos trabajar con bases de datos, es decir, podemos integrar muchas cosas
de JavaScript a bases de datos, como es el caso de MongoDB cuando
trabajamos en ella con archivos de tipo JSON. Pero, bueno, como te das cuenta,
el universo que maneja JavaScript es bastante amplio y hay muchas líneas de
especialización. Mi recomendación es: trata de conocerlas todas y de utilizar
siempre muy buenas prácticas para que puedas adaptar cualquiera de ellas sin
ningún problema.

Conclusiones y despedida del curso JavaScript esencial

Si seleccionas líneas de la transcripción en esta sección, irás a la
marca de tiempo en el vídeo
Este curso llegó a su fin, pero no te preocupes, hay mucho JavaScript por
delante. A lo largo de este curso, pudiste aprender muchas cosas. Por
ejemplo, desde trabajar con estructuras de control y variables como, por
ejemplo, en el ciclo'for' donde pudiste aprender cómo iterar sobre una
colección de datos. También aprendiste sobre la manera tradicional de crear
una función y también cómo crear funciones anónimas o las llamadas
"arrow functions", que será un recurso muy necesario en todos tus
desarrollos. Incluso llegamos a utilizar algunos métodos más simples, pero a la
vez sofisticados, para buscar contenido dentro de un arreglo, como cuando
trabajábamos con el método'find'. Y creo que uno de los ejercicios que más
disfrutamos fue cuando nos conectamos a datos remotos. Sí, cuando
pulsábamos un botón y nos traíamos una colección de "posts" y una colección
de banderas de servicios que estaban en otro servidor. Creo que todos estos
ejercicios y ejemplos que estuvimos viendo alrededor del curso te serán muy
útiles en tu labor como programador. No olvides siempre consultar este
contenido para que puedas tener a la mano toda la información que necesites
cuando estás trabajando y, aun así, siempre aprender más sobre JavaScript y
documentarte en Internet. Hay muchísima información ahí afuera que puede
servir y muchas herramientas que se generan y actualizan día a día. JavaScript es
un gran lenguaje, y si estás aquí tienes un gran futuro como
programador. Muchas gracias.