Operadores y Expresiones de JavaScript

Introducción

Bienvenido al laboratorio "Operadores y Expresiones en JavaScript". En esta sesión práctica, aprenderá sobre los bloques de construcción fundamentales de la programación en JavaScript: operadores y expresiones. Los operadores son símbolos especiales que se utilizan para realizar operaciones sobre valores (operandos), y una expresión es cualquier unidad de código que se resuelve en un valor.

Comenzará con operadores aritméticos básicos como la suma, la resta, la multiplicación y la división. Luego, explorará cómo el operador de suma también se puede utilizar para combinar cadenas de texto, un proceso conocido como concatenación. Finalmente, aprenderá sobre el útil operador de incremento. Al final de este laboratorio, podrá realizar manipulaciones básicas de datos en JavaScript.

Usar el operador de suma en números

En este paso, aprenderá a usar el operador de suma (+) para realizar sumas en números. Esta es una de las operaciones aritméticas más comunes.

Su entorno de laboratorio ya está configurado con un archivo index.html y un archivo script.js dentro del directorio ~/project. Escribiremos todo nuestro código JavaScript en el archivo script.js.

Primero, localice el archivo script.js en el explorador de archivos en el lado izquierdo de su pantalla. Haga clic en él para abrirlo en el editor.

Ahora, agregue el siguiente código a script.js. Este código declara dos variables numéricas, las suma y utiliza console.log() para imprimir el resultado en la consola de desarrollador del navegador.

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

Después de agregar el código, guarde el archivo presionando Ctrl+S.

Para ver la salida, navegue a la pestaña Web 8080 en la parte superior de la interfaz. Luego, abra la consola de desarrollador presionando F12 o haciendo clic derecho en la página, seleccionando "Inspect" (Inspeccionar) y luego haciendo clic en la pestaña "Console" (Consola). Debería ver el mensaje The sum is: 15.

Aplicar operadores de resta y multiplicación

En este paso, aplicará los operadores de resta (-) y multiplicación (*). Estos funcionan de manera similar al operador de suma, pero realizan cálculos diferentes.

Continúe editando el archivo ~/project/script.js. Agregue las siguientes líneas de código debajo de su código existente para calcular la diferencia y el producto de los mismos dos números.

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

Guarde el archivo nuevamente (Ctrl+S). Actualice la pestaña Web 8080 (puede usar el botón de actualización dentro de la pestaña). La consola de desarrollador ahora mostrará los resultados de la suma, la resta y la multiplicación.

Implementar operadores de división y módulo

En este paso, exploraremos los operadores de división (/) y módulo (%). El operador de división realiza la división estándar, mientras que el operador de módulo devuelve el resto de una división. Esto es útil para tareas como determinar si un número es par o impar.

Agregue el siguiente código al final de su archivo ~/project/script.js.

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

Guarde el archivo y actualice la pestaña Web 8080. Verifique la consola para ver la nueva salida de la división y el resto. Debería ver que el cociente es 2 y el resto es 1.

Concatenar cadenas usando el operador más

En este paso, verá un uso diferente del operador +: la concatenación de cadenas de texto. Cuando se utiliza con cadenas de texto, el operador + las une para crear una cadena nueva y más larga.

Creemos dos variables de cadena de texto y concatenémoslas. Agregue este código al final de ~/project/script.js.

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

En el ejemplo anterior, estamos uniendo firstName, un espacio " " y lastName para formar una frase completa.

Después de guardar el archivo, actualice la pestaña Web 8080. La consola ahora mostrará la cadena concatenada: Hello World.

Incrementar variable con el operador ++

En este último paso, aprenderá sobre el operador de incremento (++). Este es un operador unario, lo que significa que opera sobre un solo operando. Es una forma abreviada conveniente para sumar 1 a una variable numérica, lo cual es una operación muy común en bucles y contadores.

Agregue el siguiente código al final de ~/project/script.js para verlo en acción.

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

Guarde el archivo por última vez y actualice la pestaña Web 8080. La consola mostrará el valor final del contador, que debería ser 1.

Resumen

¡Felicitaciones por completar este laboratorio!

En este laboratorio, ha aprendido los fundamentos de los operadores y expresiones de JavaScript. Ha practicado el uso de:

• Operadores aritméticos para matemáticas básicas: + (suma), - (resta), * (multiplicación), / (división) y % (módulo).
• El operador + para la concatenación de cadenas de texto para unir texto.
• El operador de incremento ++ como atajo para aumentar el valor de un número en uno.

Estos operadores son bloques de construcción esenciales en JavaScript y se utilizan en prácticamente todos los programas. Ahora está listo para abordar lógica y funcionalidad más complejas en sus futuros proyectos.