Laboratorio Práctico: JavaScript - Consola del Navegador

Tiempo Estimado: 25 minutos

El propósito de este laboratorio es practicar el uso de JavaScript en la consola del navegador, para reforzar tu comprensión de ciertos
conceptos.

Objetivos

Después de completar este laboratorio, podrás:

1. Escribir y ejecutar JavaScript en la consola del navegador

2. Crear variables, trabajar con declaraciones condicionales, crear bucles y definir métodos en JavaScript.

Tarea 1 - Abrir la consola del navegador

En esta tarea, vamos a ejecutar código JavaScript en la consola del navegador. El navegador Chrome utiliza V8, que es el motor de JavaScript de
alto rendimiento de código abierto de Google.

1. Abre una nueva pestaña en blanco en tu navegador. Puedes hacer esto presionando Ctrl + T (Windows) o Command + T (Mac).

2. Haz clic derecho en cualquier parte de la nueva pestaña en blanco del navegador y elige Inspeccionar o Inspeccionar elemento,
dependiendo del navegador que estés utilizando. La imagen a continuación es para el navegador Chrome.

3. Debería abrirse una ventana de desarrollador en tu pantalla. Ve a la pestaña Consola, como se muestra a continuación. Verás un símbolo
del sistema. Puedes ejecutar el resto de las tareas allí.
 4. Si tu consola tiene algún registro impreso, límpiala ejecutando el siguiente comando. Esto no es obligatorio, pero te ayudará a empezar de
nuevo.
clear()

Si tu navegador no soporta esto, usa el comando console.clear() en su lugar.

Tarea 2 - Ejecutando comandos de JavaScript

NOTA: En cualquier momento, cuando desees limpiar la consola, ejecuta el comando clear(), o console.clear().

Para ejecutar los comandos, utilizaremos el símbolo del sistema en el control del navegador. Escribe o pega cada comando y presiona enter
para ejecutar el comando.

1. Comencemos con un código simple para imprimir ¡Hola Mundo! en la consola. Ejecuta el siguiente comando.
console.log("Hello World!")

El valor undefined significa que tu comando no devuelve ningún valor.

2. Vamos a crear algunas variables y a imprimirlas. Ejecuta los siguientes comandos.

let num = 5
var mystr = "John"
console.log(num)
console.log(mystr)

Tanto let como var se pueden usar para crear variables. var se utiliza cuando deseas que la variable tenga un alcance global y let se
usa cuando deseas que la variable tenga un alcance dentro del bloque donde se crea.

3. Vamos a crear una constante y a imprimirla. Ejecuta el siguiente comando.

const pi_val = 3.147
console.log(pi_val)
 const se utiliza para declarar variables cuyos valores nunca pueden cambiar.

4. Vamos a crear una función que imprima cualquier valor que se le pase como entrada.
function printMyInput(user_input) {
console.log("The parameter passed is " + user_input)
}

5. Llama a la función que creaste en el paso anterior, una vez con un número y una vez con una cadena.

Nota: 9 y John son los 2 parámetros de entrada pasados a la función printMyInput.

printMyInput(9)
printMyInput("John")

6. Veamos otro enfoque para escribir la printMyInput función según el estándar ES6. Esta sintaxis también se llama arrow functions y
proporciona una forma abreviada de escribir funciones.
let printMyInputES6 = (user_input) => {
console.log(user_input)
}

7. Llama a la función que creaste en el paso anterior una vez con un número y una vez con una cadena.
printMyInputES6(9)
printMyInputES6("John")

Dado que la función recibe un solo valor y el cuerpo de la función es una sola línea, se pueden omitir los corchetes. El código
también se puede escribir de la siguiente manera.
let printMyInputES6Short = user_input => console.log(user_input)
Ahora, cuando lo llamemos, la salida debería permanecer igual.
printMyInputES6Short(9)
printMyInputES6Short("John")

Tarea 3 - Operadores, Condiciones, Bucles

En esta tarea, ejecutarás algunos JavaScript de los cuales podrás aprender cómo usar operadores, controles y bucles.

Asegúrate de entender el código en cada archivo. Estos son primitivos y fundamentales para tu comprensión de JavaScript.

1. Los operadores aritméticos son operadores que utilizamos para realizar operaciones aritméticas.
El operador + (más) se utiliza para sumar
El operador - (menos) se utiliza para restar
El operador * (estrella o asterisco) se utiliza para multiplicar
El operador / (barra) se utiliza para dividir
El operador ** (doble estrella) se utiliza para la exponenciación/potencia
El operador % (porcentaje) se utiliza para la operación de módulo (el residuo que queda después de la división)
console.log("5 + 3 = ", 5 + 3)
console.log("7 - 3 = ", 7 - 3)
console.log("8 * 2 = ", 8 * 2)
console.log("27 / 3 = ", 27 / 3)
console.log("4 to the power of 3 = ", 4 ** 3)
console.log("19 mod 4 = ", 19 % 4)

El operador más (+) también se utiliza para la concatenación de cadenas. Al usar un + con un número y una cadena, ambos se tratan como una
cadena y se concatenan en lugar de sumarse.
Las expresiones se leen de izquierda a derecha, por lo que al sumar dos números y luego una cadena, se interpretará el primer + como suma y
el segundo + como concatenación.
console.log("5 + 3 = ", 5 + 3)
console.log("5 + \"3\" = ", 5 + "3")
console.log("5 + 5 + \"3\" = ", 5 + 5 + "3")
console.log("\"3\" + 5 + 5 = ", "3" + 5 + 5)
console.log("5 + 5 + \"3\" + 5 = ", 5 + 5 + "3" + 5)

2. Los operadores de asignación son operadores que se utilizan para asignar valores a las variables.

El operador = se utiliza para asignar el valor de la derecha a la variable de la izquierda.

El operador += se utiliza para incrementar el valor almacenado en el operando de la izquierda por el valor del operando de la
derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp + val donde tmp es una variable y
val es un valor arbitrario).
El operador -= se utiliza para decrementar el valor almacenado en el operando de la izquierda por el valor del operando de la
derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp - val donde tmp es una variable y
val es un valor arbitrario).
El operador *= se utiliza para multiplicar el valor almacenado en el operando de la izquierda por el valor del operando de la derecha
y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp * val donde tmp es una variable y val es un
valor arbitrario).
El operador /= se utiliza para dividir el valor almacenado en el operando de la izquierda por el valor del operando de la derecha y
almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp / val donde tmp es una variable y val es un
valor arbitrario).
El operador **= se utiliza para elevar el valor almacenado en el operando de la izquierda a la potencia del valor del operando de la
derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp ** val donde tmp es una variable y
val es un valor arbitrario).
 El operador %= se utiliza para obtener el módulo del valor almacenado en el operando de la izquierda por el valor del operando de
la derecha y almacenarlo de nuevo en el operando de la izquierda (lo mismo que escribir tmp = tmp % val donde tmp es una variable y
val es un valor arbitrario).

x = 5
console.log("Old value of x: ", x)
x += 3
console.log("New value of x: ", x)
y = 5
console.log("Old value of y: ", y)
y -= 3
console.log("New value of y: ", y)
a = 6
console.log("Old value of a: ", a)
a *= 3
console.log("New value of a: ", a)
b = 6
console.log("Old value of b: ", b)
b /= 3
console.log("New value of b: ", b)
c = 6
console.log("Old value of c: ", c)
c %= 3
console.log("New value of c: ", c)
d = 6
console.log("Old value of d: ", d)
d **= 3
console.log("New value of d: ", d)

3. Los operadores de comparación se utilizan para comparar valores o variables con otros valores o variables

El operador == verifica si el operando a la izquierda es igual en valor al operando a la derecha

El operador === verifica si el operando a la izquierda es igual en valor y en tipo al operando a la derecha
El operador != verifica si el operando a la izquierda no es igual en valor al operando a la derecha
El operador > verifica si el operando a la izquierda es mayor que el de la derecha
El operador < verifica si el operando a la izquierda es menor que el de la derecha
El operador >= verifica si el operando a la izquierda es mayor o igual que el de la derecha
El operador <= verifica si el operando a la izquierda es menor o igual que el de la derecha
//Checking equality of 5 (number type) and 5 (string type)
console.log("5=='5' ", 5=='5')
console.log("5==='5' ", 5==='5')
console.log("5===5 ", 5===5)
console.log("5 != 5 ", 5 !== 5)
console.log("5 != 6 ", 5 != 6)
console.log("5 != '5' ", 5 !== '5')
console.log("5 > 2 ", 5 > 2)
console.log("5 > 7 ", 5 > 7)
console.log("5 > 5 ", 5 > 5)
console.log("5 < 7 ", 5 < 7)
console.log("5 < 2 ", 5 < 2)
console.log("5 < 5 ", 5 < 5)
console.log("5 >= 5 ", 5 >= 5 )
console.log("5 <= 5 ", 5 <= 5 )

4. Operadores Lógicos se utilizan para combinar más de una condición.

El operador && verifica si la condición a la izquierda y a la derecha son verdaderas. Devuelve verdadero solo si ambas condiciones son
verdaderas. De lo contrario, devuelve falso.
El operador || verifica si ya sea la condición a la izquierda es verdadera o la de la derecha es verdadera. Devuelve verdadero incluso si
una de las dos condiciones es verdadera.
El operador ! verifica si la condición no se cumple.
var raining = false
var cloudy = true
console.log("It is raining: ", raining)
console.log("It is cloudy: ", cloudy)
console.log("It is raining AND cloudy: ", raining && cloudy)
console.log("It is raining OR cloudy: ", raining || cloudy)
console.log("It is not raining: ", !raining)
console.log("It is not cloudy: ", !cloudy)
Evaluación de Cortocircuito

La evaluación de cortocircuito es un concepto en el que el compilador omitirá la verificación de subexpresiones en una declaración compuesta
(una declaración con operadores lógicos) una vez que se determina el valor.

exp1 && exp2 no evaluará exp2 si exp1 es falso porque si incluso una expresión es falsa con un &&, la expresión completa es falsa.
exp1 || exp2 no evaluará exp2 si exp1 es verdadero porque si incluso una expresión es verdadera con un ||, la expresión completa es
verdadera.

Esto puede ser muy útil al evaluar ciertas expresiones, y se debe aprovechar donde sea necesario.
var chocolate = true
var candy = false
console.log("There is chocolate: ", chocolate)
console.log("There is candy: ", candy)
console.log("There is candy AND chocolate: ", chocolate && candy, " -- Only candy is evaluated")
console.log("There is chocolate OR candy: ", chocolate || candy, " -- Only chocolate is evaluated")

5. if - else if - else Las declaraciones condicionales son muy útiles para controlar el flujo de tu código.
//Accept a input from the user. If it is a number, print the multiplication table for the number. Else print the input and the length of
let user_input = prompt('Enter a value');
//Check if the user did not input anything
if (!user_input) {
console.log("You did not input anything")
}
//Check if the user input is not a number
else if (isNaN(user_input)) {
console.log("Your input is ", user_input)
console.log("The length of your input is ", user_input.length)
}
//The only option remaining is that the input is a number
else {
console.log(user_input, " X 1 = ", user_input*1)
console.log(user_input, " X 2 = ", user_input*2)
console.log(user_input, " X 3 = ", user_input*3)
console.log(user_input, " X 4 = ", user_input*4)
console.log(user_input, " X 5 = ", user_input*5)
console.log(user_input, " X 6 = ", user_input*6)
console.log(user_input, " X 7 = ", user_input*7)
console.log(user_input, " X 8 = ", user_input*8)
console.log(user_input, " X 9 = ", user_input*9)
console.log(user_input, " X 10 = ", user_input*10)
}

6. Las declaraciones switch-case se utilizan para reemplazar múltiples condiciones if - else if que verifican la misma variable. Después de
que se satisface una de las condiciones y se ejecuta el bloque de código, el control debe salir explícitamente del bloque switch con break.
De lo contrario, se ejecutarán todas las demás condiciones hasta que se encuentre una declaración break o hasta que no haya más código.
let user_input = prompt('Enter a number between 1 to 7');
//Using logical OR operator to check if the input is a number and it is between 1 to 7
if(isNaN(user_input) || user_input< 1 || user_input>7) {
console.log("Invalid input")
} else {
user_input = parseInt(user_input)
switch(user_input){
case 1: console.log("Sunday"); break;
case 2: console.log("Monday"); break;
case 3: console.log("Tuesday"); break;
case 4: console.log("Wednesday"); break;
case 5: console.log("Thursday"); break;
 case 6: console.log("Friday"); break;
case 7: console.log("Saturday"); break;
default: console.log("Invalid entry");
}
}

7. Los bucles se pueden utilizar cuando el mismo bloque de código necesita ejecutarse muchas veces.

Los bucles for tienen un valor inicial, una condición en base a la cual se ejecuta el bucle, y un valor incremental.
//Accept a input from the user. If it is a number print the multiplication table for the number.
let user_input = prompt('Enter a number');
//Check if the user input is a number
if(!isNaN(user_input)) {
//Using for loop for the repetitive statement
for (let i=0; i<10; i++) {
console.log(user_input, " X ", i, " = ", user_input*i)
}
}

Los bucles while tienen solo una expresión: una condición en base a la cual se ejecuta un bloque de código. Este es el mismo tipo de expresión
que la segunda en un bucle for.
//The code below is to find the length of the words the user is entering. The loop will go on and on until the user chooses not to contin
let do_more = true
while(do_more) {
//Accept a input from the user.
let user_input = prompt('Enter a word');
//Check if the user input is not a number and then print the length of the input
if(isNaN(user_input)) {
console.log("Length of the word you entered is " + user_input.length)
} else {
console.log("You entered a number. Only words are allowed")
}
let should_continue = prompt("Do you want to continue. Press n to stop")

if(should_continue === "n") {

do_more = false
}
}

Tarea 4 - Colecciones
1. Un arreglo es una colección indexada. Las posiciones de índice comienzan desde 0. El elemento en la primera posición está en el índice 0,
el segundo elemento está en la posición 1, y así sucesivamente. El índice de la última posición siempre será uno menos que la longitud del
arreglo.
let myArray = ["Jack","Jill",4,5,true,"John"]
console.log(myArray[0]);
console.log(myArray[5]);
 2. Para iterar a través de arreglos, hay un tipo especial de bucle for, forEach, que se ejecuta para cada valor en el arreglo dado.
let myArray = ["Jack","Jill",4,5,true,"John"]
myArray.forEach(element => {
console.log(element)
})

3. Para encontrar la posición del índice y el valor, podemos usar el método genérico Object.entries, que se puede utilizar con todos los
objetos de colección. Esto mapea cada posición del índice al valor.
let myArray = ["Jack","Jill",4,5,true,"John"]
for (const [index, value] of Object.entries(myArray)) {
console.log(index, " - ", value);
}

4. El objeto Map asigna una clave a un valor. Las claves deben ser únicas. Los valores pueden ser cadenas, enteros, flotantes o cualquier
otro tipo de dato válido de JavaScript. Un objeto Map vacío se puede crear con la palabra clave new.
let myMap = new Map();
//Add a key-value pair to the map, with a key of "name" and a value of "John".
myMap.set("name", "John")
//Add another key-value pair to the map, with a key of "age" and a value of 22.
myMap.set("age", 22)
myMap.forEach((val,key) => {
console.log(key, " - ", val)
})

Autor(es)
Lavanya

Otros Contribuyentes
Michelle Saltoun