Switch
La declaración switch en
JavaScript es una estructura de control de flujo que se utiliza para evaluar
una expresión y compararla con múltiples casos posibles (case). Funciona como
una alternativa más limpia y legible a una cadena larga de sentencias if ...
else if.
Cuando la expresión
coincide con el valor de un case, el programa ejecuta el bloque de código
asociado a ese caso hasta que encuentra una instrucción de salida o llega al
final del switch
Sintaxis:
switch (expresion) {
case
valor1:
//
Código que se ejecuta si expresion === valor1
break;
case
valor2:
//
Código que se ejecuta si expresion === valor2
break;
default:
//
Código que se ejecuta si ningún caso coincide
}
Ejemplo:
const dia = "Martes";
switch (dia) {
case "Lunes":
console.log("Inicio de la semana laboral.");
break;
case "Martes":
case "Miércoles":
case "Jueves":
console.log("Días de rutina y trabajo.");
break;
case
"Viernes":
console.log("¡Por fin es viernes!");
break;
case "Sábado":
case "Domingo":
console.log("Fin de semana para descansar.");
break;
default:
console.log("Día no válido.");
}
FUNCIONES EN JAVASCRIPT
Una función en JavaScript es un bloque de
código reutilizable diseñado para realizar una tarea específica o calcular un
valor. En lugar de escribir el mismo código una y otra vez, puedes agruparlo
dentro de una función y ejecutarlo ("llamarla") cada vez que lo
necesites.
Componentes básicos de una función
Para entender cómo funciona, imagina que es
una máquina:
- Entradas (Parámetros): Los datos opcionales que le introduces
para que trabaje.
- Cuerpo: El conjunto de instrucciones u operaciones que realiza.
- Salida (Retorno): El resultado final que te devuelve usando la
palabra clave return.
Formas comunes de escribir
funciones
Existen diferentes maneras de
declarar funciones en según las necesidades del código:
1. Función Declarativa (Tradicional)
Es la forma más clásica. Se define usando
la palabra clave function seguida de un nombre
function saludar(nombre)
{
return "Hola, " + nombre +
"!";
}
// Llamar a la función
console.log(saludar("Carlos"));
function saludar(nombre) {
return `Hola, ${nombre}!`; }
console.log(saludar("Sofía"));
2. Función de Expresión
Ocurre cuando guardas una función (que
usualmente no tiene nombre) dentro de una variable.
const sumar
= function(a, b) {
return a + b;
};
FUNCIONES FLECHA
Una función flecha (o arrow function) es
una forma compacta y moderna de escribir funciones en JavaScript, introducida
en el estándar ES6. A diferencia de las funciones tradicionales, no requieren
la palabra clave function, utilizan el operador flecha (=>) y no tienen su
propio contexto para la palabra clave this (sino que lo heredan del entorno
donde fueron creadas).
CASOS:
1. Sintaxis básica con múltiples parámetros
Es la estructura estándar cuando necesitas
pasar dos o más argumentos. Los parámetros van entre paréntesis y el resultado
se retorna automáticamente si está en una sola línea.
2. Con un solo parámetro (Sin paréntesis)
Si tu función recibe únicamente un
parámetro, puedes omitir por completo los paréntesis, haciendo que el código
sea aún más limpio.
3. Sin parámetros (Paréntesis obligatorios)
Cuando la función no requiere ningún
argumento para trabajar, los paréntesis vacíos son estrictamente obligatorios
antes de la flecha.
4. Cuerpo con múltiples líneas de código
Si la lógica de tu función necesita más de
una línea de código, debes abrir llaves {}. En este caso, el retorno automático
se pierde y es obligatorio usar la palabra clave return.
5. Uso común en métodos de arreglos (.map,
.filter)
Donde más brillan las funciones flecha es
al usarlas como callbacks dentro de métodos modernos de arreglos, reduciendo
bloques enteros de código a una sola línea muy legible.
EJEMPLOS:
// Tradicional
const sumar
= function(a, b) { return a + b; };
// Flecha
const sumarFlecha = (a, b) => a + b;
console.log(sumarFlecha(5, 3)); // Imprime:
8
// Si solo hay un parámetro, no hacen falta
los ()
const alCuadrado = x => x * x;
console.log(alCuadrado(4)); // Imprime: 16
//sin parametros
const
obtenerFechaActual = () => new Date().toLocaleDateString();
console.log(obtenerFechaActual()); //
Imprime la fecha de hoy
// con varias lineas de codigo
const procesarPago = (monto, impuesto)
=> {
const subtotal = monto * impuesto;
const total = monto + subtotal;
return `El total a pagar es
$${total}`;
};
console.log(procesarPago(100, 0.15)); //
Imprime: El total a pagar es $115
const numeros =[4,5,3,2,3];
// Filtramos solo los números pares usando
una función flecha
const pares = numeros.filter(n => n % 2
=== 0);
console.log(pares); // Imprime: [2, 4]
const array
=[2,1,4,7,9,12,14,17];
const
array2=array.map(function(valor){
return valor*2
});
const
array3=array.map((valor)=>valor*2);
console.log(array);
console.log(array2);
console.log(array3);
EL DOM:
El DOM (Document Object Model o Modelo de
Objetos del Documento) es una interfaz de programación que representa la
estructura de una página web como un árbol de nodos manipulables.
Cuando el navegador web carga un archivo
HTML, traduce ese código en una estructura organizada de objetos en la memoria.
Gracias a esto, lenguajes de programación como JavaScript pueden conectarse a
la página para cambiar el contenido, los estilos CSS o la estructura de forma
dinámica y en tiempo real.
EJEMPLO DE MANIPULACION
DEL DOM:
HTML:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="tarjeta">Botón 1</button>
<button
class="tarjeta">Botón 2</button>
<button
class="tarjeta">Botón 3</button>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT:
function saluda(){
document.write("hola
amigos");
alert("hola
amigos");
}
saluda();
const botones =
document.querySelectorAll('.tarjeta');
botones.forEach(boton
=> {
boton.addEventListener('click', function() {
// 'this' es exactamente el botón específico que
recibió el clic
this.style.backgroundColor = 'green';
this.innerText = '¡Seleccionado!';
});
});
No hay comentarios.:
Publicar un comentario