Apuntes JS - Javascript

VARIABLES

Se puede declarar una variable en JavaScript utilizando las palabras clave var, let, o const. A partir de ECMAScript 6 (ES6), se recomienda usar let y const en lugar de var.

// Declaración con var (no se recomienda en ES6)
                    var x;
                    
                    // Declaración con let (para variables reasignables)
                    let y;
                    
                    // Declaración con const (para variables constantes)
                    const z = 10;

//Asignación de valores:
                    //Puedes asignar valores a las variables después de declararlas.
                    
                    Copy code
                    x = 5;
                    y = "Hola";

//Tipos de datos:
                    //JavaScript es un lenguaje de tipado dinámico, lo que significa que no necesitas especificar el tipo de dato al declarar una variable. El tipo de dato se determina automáticamente.
                    
                    let numero = 42;        // Número entero
                    let texto = "Hola";     // Cadena de texto
                    let booleano = true;    // Valor booleano

//Ejemplos de operaciones:
                    //Puedes realizar operaciones con variables.

let a = 5;
                    let b = 3;
                    let suma = a + b;       // Suma
                    let resta = a - b;      // Resta
                    let multiplicacion = a * b;  // Multiplicación
                    let division = a / b;        // División

Ámbito de las variables:
                    El ámbito de una variable se refiere a la parte del código en la que la variable es visible y puede ser utilizada.

function ejemploScope() {
                    let localVariable = "Soy local";
                    if (true) {
                    let otraVariable = "También soy local";
                    // localVariable es accesible aquí
                    }
                    // otraVariable no es accesible aquí
                   }

Conclusión

En JavaScript, las variables son elementos fundamentales que permiten almacenar y manipular datos. Al declarar una variable, se le asigna un nombre y se pueden utilizar diferentes palabras clave como var, let, o const.
Es importante mencionar que las variables pueden tener un alcance local dentro de funciones o un alcance global en todo el programa.En resumen, las variables son contenedores flexibles que permiten a los programadores almacenar información y realizar operaciones en JavaScript. Su versatilidad las convierte en un componente esencial para el desarrollo de aplicaciones web dinámicas.

Operadores y Tipos de datos

1. Operadores Aritméticos:

let a = 5;
let b = 2;

let suma = a + b;   // Suma: 7
let resta = a - b;  // Resta: 3
let multiplicacion = a * b;  // Multiplicación: 10
let division = a / b;        // División: 2.5
let modulo = a % b;          // Módulo (resto de la división): 1

2. Operadores de Asignación:

let x = 10;
x += 5;  // Equivalente a x = x + 5; (Asignación con suma)

3. Operadores de Comparación:

let num1 = 10;
let num2 = "10";

let igualdad = num1 == num2;      // Comprobación de igualdad (sin verificar tipo): true
let igualdadEstricta = num1 === num2;  // Comprobación de igualdad estricta (verificando tipo): false
let mayorQue = num1 > num2;        // Mayor que: false

4. Operadores Lógicos:

let condicion1 = true;
let condicion2 = false;

let yLogico = condicion1 && condicion2;  // AND lógico: false
let oLogico = condicion1 || condicion2;  // OR lógico: true
let negacion = !condicion1;             // Negación lógica: false

Tipos de Datos en JavaScript:

1. Números:

let entero = 42;
let decimal = 3.14;

2. Cadenas (Strings):

let mensaje = "Hola, mundo!";

3. Booleanos:

let esVerdadero = true;
let esFalso = false;

4. Arrays:

let arreglo = [1, 2, 3, "cuatro"];

5. Objetos:

let persona = {
    nombre: "Juan",
    edad: 25,
    estudiante: true
};

6. Null y Undefined:

let nulo = null;
let indefinido;

Estructuras de control - Condicionales

Estructura if:
                    La estructura if permite ejecutar un bloque de código si una condición es verdadera.

let edad = 18;

if (edad >= 18) {
                        console.log("Eres mayor de edad");
                    }

En este ejemplo, el código dentro del bloque if se ejecutará solo si la variable edad es mayor o igual a 18.

Estructura else:
                    La estructura else se utiliza junto con if para especificar un bloque de código que se ejecutará si la condición en el if es falsa.
                    
                    let hora = 14;

if (hora < 12) {
                     console.log("Buenos días");
                    } else {
                     console.log("Buenas tardes o noches");
                   }
                   
                   Aquí, se imprime "Buenos días" si la variable hora es menor a 12; de lo contrario, se imprime "Buenas tardes o noches".

Estructura else if:
                   La estructura else if te permite evaluar múltiples condiciones en orden.
                
                   let calificacion = 85;

if (calificacion >= 90) {
                        console.log("A");
                    } else if (calificacion >= 80) {
                        console.log("B");
                    } else if (calificacion >= 70) {
                        console.log("C");
                    } else {
                        console.log("Reprobado");
                    }

En este ejemplo, se imprime una letra de calificación según el rango en el que se encuentra la variable calificacion.

Operador Ternario:
                    El operador ternario proporciona una forma concisa de escribir instrucciones if-else.

let clima = "soleado";
                    let mensaje = (clima === "soleado") ? "Disfruta del día" : "Lleva un paraguas";
                    console.log(mensaje);

Este código asigna el valor de mensaje dependiendo de la condición del clima.

Iteradores y Bucles

Iteradores en JavaScript:
            Los iteradores son objetos que permiten recorrer una secuencia de elementos. En JavaScript, los objetos iteradores deben implementar el protocolo de iterador, que consiste en tener un método llamado next() que devuelve un objeto con las propiedades value y done.
            
            Ejemplo de Iterador:
           
            // Definir un array
            let miArray = [1, 2, 3, 4, 5];

// Iterar sobre el array y mostrar cada elemento
            for (let elemento of miArray) {
            console.log(elemento);
            }

Bucles en JavaScript:
            JavaScript proporciona varios tipos de bucles, siendo los más comunes el bucle for y el bucle while.

Bucle for:

// Bucle for para imprimir los números del 1 al 5
            for (let i = 1; i <= 5; i++) {
            console.log(i);
            }

Bucle while:
            // Bucle while para imprimir los números del 1 al 5
            let contador = 1;
            while (contador <= 5) {
            console.log(contador);
            contador++;
            }

Bucle do-while:

// Bucle do-while para imprimir los números del 1 al 5
            let contador = 1;
            do {
            console.log(contador);
            contador++;
            } while (contador <= 5);

Alertas y ventanas

Alertas:

Las alertas son ventanas emergentes simples que muestran un mensaje y un botón "Aceptar". Puedes usar la función alert() para mostrar una alerta.
// Mostrar una alerta con un mensaje
alert("Hola, esto es una alerta!");

Confirmaciones:

Las confirmaciones son ventanas emergentes que muestran un mensaje y dos botones: "Aceptar" y "Cancelar". Puedes utilizar la función confirm() para mostrar una confirmación.
// Mostrar una confirmación y manejar la respuesta del usuario
let respuesta = confirm("¿Quieres continuar?");
if (respuesta) {
  console.log("El usuario ha hecho clic en Aceptar.");
} else {
  console.log("El usuario ha hecho clic en Cancelar.");
}

Ingreso de Datos (Prompt):

La función prompt() muestra una ventana con un mensaje, un campo de entrada de texto y dos botones: "Aceptar" y "Cancelar". Puedes utilizarlo para solicitar información al usuario.

// Solicitar al usuario que ingrese su nombre
let nombre = prompt("Por favor, ingresa tu nombre:");
if (nombre !== null) {
  console.log("Hola, " + nombre + "!");
} else {
  console.log("El usuario ha cancelado la entrada.");
}

Recuerda que las ventanas emergentes pueden ser intrusivas, y se recomienda utilizarlas con moderación para no interrumpir la experiencia del usuario de manera excesiva. Es mejor utilizar métodos más modernos e interactivos en aplicaciones web avanzadas.

Funciones y Métodos

Definición de una función:
            Puedes definir una función utilizando la palabra clave function, seguida del nombre de la función y una lista de parámetros entre paréntesis. Luego, el cuerpo de la función está encerrado entre llaves {}.
            
            // Definir una función sin parámetros
                function saludar() {
                console.log("¡Hola, mundo!");
                }

// Definir una función con parámetros
                function sumar(a, b) {
                return a + b;
                }

Llamada a una función:

Para ejecutar o "llamar" una función, simplemente escribes su nombre seguido de paréntesis. Si la función toma parámetros, debes proporcionar valores para esos parámetros dentro de los paréntesis.
                
                // Llamar a la función saludar
                saludar();
                
                // Llamar a la función sumar con argumentos 3 y 4
                let resultado = sumar(3, 4);
                console.log(resultado); // Imprimirá 7

Funciones anónimas y expresiones de función:
                Puedes definir funciones sin darles un nombre, lo que se conoce como función anónima. Esto es útil cuando deseas crear funciones sobre la marcha y asignarlas a variables o pasarlas como argumentos a otras funciones.

// Función anónima asignada a una variable
                let multiplicar = function(a, b) {
                  return a * b;
                };
                
                // Llamar a la función anónima
                let resultadoMultiplicacion = multiplicar(5, 2);
                console.log(resultadoMultiplicacion); // Imprimirá 10

Funciones de flecha (Arrow functions):
                En ES6 y versiones posteriores de JavaScript, puedes usar funciones de flecha para crear funciones de manera más concisa.
                // Función de flecha para elevar al cuadrado
                let cuadrado = (x) => x * x;

// Llamar a la función de flecha
                let resultadoCuadrado = cuadrado(3);
                console.log(resultadoCuadrado); // Imprimirá 9

Arrays

Crear un array:
                Puedes crear un array utilizando corchetes [] y separando los elementos con comas.
                
                // Crear un array de números
                let numeros = [1, 2, 3, 4, 5];

// Crear un array de strings
                let frutas = ["manzana", "banana", "cereza"];

// Crear un array mixto
                let mixto = [1, "dos", true, [4, 5]];

Acceder a elementos del array:
                Puedes acceder a elementos de un array utilizando su índice. Ten en cuenta que los índices en JavaScript comienzan desde 0.

console.log(numeros[0]); // Imprimirá 1
                console.log(frutas[1]);  // Imprimirá "banana"
                console.log(mixto[3][0]); // Imprimirá 4

Modificar elementos del array:
                Puedes modificar un elemento del array asignándole un nuevo valor mediante su índice.
                frutas[2] = "uva"; // Cambiar "cereza" por "uva"
                console.log(frutas); // Imprimirá ["manzana", "banana", "uva"]

Métodos de Array:
                JavaScript proporciona varios métodos incorporados para trabajar con arrays. Aquí hay algunos ejemplos:
                push() - Agregar elementos al final del array:

frutas.push("naranja");
                console.log(frutas); // Imprimirá ["manzana", "banana", "uva", "naranja"]

pop() - Eliminar el último elemento del array:
                frutas.pop();
                console.log(frutas); // Imprimirá ["manzana", "banana", "uva"]

splice() - Cambiar o eliminar elementos en una posición específica:
                frutas.splice(1, 1, "pera", "kiwi");
                console.log(frutas); // Imprimirá ["manzana", "pera", "kiwi", "uva"]
                
                concat() - Concatenar arrays:
                let masFrutas = ["sandía", "papaya"];
                let todasLasFrutas = frutas.concat(masFrutas);
                console.log(todasLasFrutas);
                // Imprimirá ["manzana", "pera", "kiwi", "uva", "sandía", "papaya"]

Recorrer un Array:
                1. Bucle for clásico:
                let numeros = [1, 2, 3, 4, 5];

for (let i = 0; i < numeros.length; i++) {
                console.log(numeros[i]);
                }
                2. Bucle for...of:
                let frutas = ["manzana", "banana", "uva"];

for (let fruta of frutas) {
                console.log(fruta);
                }
                3. Método forEach():

let colores = ["rojo", "verde", "azul"];

colores.forEach(function(color) {
                console.log(color);
                });
                Recorrer un Objeto:
                1. Bucle for...in:
                let persona = {
                nombre: "Juan",
                edad: 25,
                ciudad: "Madrid"
                };

for (let clave in persona) {
                console.log(clave + ": " + persona[clave]);
                }
                2. Método Object.keys():
                let coche = {
                marca: "Toyota",
                modelo: "Corolla",
                año: 2022
                };

Object.keys(coche).forEach(function(propiedad) {
                console.log(propiedad + ": " + coche[propiedad]);
                });
                3. Método Object.entries():
                let pelicula = {
                titulo: "Inception",
                director: "Christopher Nolan",
                año: 2010
                };

Object.entries(pelicula).forEach(function([clave, valor]) {
                console.log(clave + ": " + valor);
                });

Eventos

Los eventos en JavaScript son acciones o sucesos que ocurren en la página web, como hacer clic en un botón, mover el mouse sobre un elemento, o enviar un formulario. Puedes manejar estos eventos utilizando funciones en JavaScript.

// Obtener referencia al botón por su ID
            let miBoton = document.getElementById('miBoton');

// Agregar un evento de clic al botón
            miBoton.addEventListener('click', function() {
            alert('¡Se hizo clic en el botón!');
            });

// Obtener referencia al elemento por su ID
            let miElemento = document.getElementById('miElemento');

// Agregar un evento de mouseover al elemento
            miElemento.addEventListener('mouseover', function() {
            miElemento.style.backgroundColor = 'lightgreen';
            });

// Agregar un evento de mouseout al elemento
            miElemento.addEventListener('mouseout', function() {
            miElemento.style.backgroundColor = 'lightblue';
            });

JSON

(JavaScript Object Notation) es un formato de intercambio de datos ligero y fácil de leer que se utiliza comúnmente para transmitir datos entre un servidor y una aplicación web, así como entre diferentes partes de una aplicación. JSON es independiente del lenguaje y es compatible con varios lenguajes de programación, incluido JavaScript. Aquí hay una explicación básica de los objetos JSON:

Estructura de un Objeto JSON:
            Un objeto JSON es una colección de pares clave-valor. En JavaScript, un objeto JSON es similar a un objeto literal, pero se almacena como una cadena de texto.

{
                "nombre": "John",
                "edad": 30,
                "ciudad": "Nueva York",
                "activo": true,
                "amigos": ["Alice", "Bob", "Charlie"]
              }

Ejemplo de Uso en JavaScript:
              
              // Definir un objeto JSON como cadena de texto
              let jsonDatos = '{"nombre": "John", "edad": 30, "ciudad": "Nueva York", "activo": true, "amigos": ["Alice", "Bob", "Charlie"]}';
              
              // Convertir la cadena JSON a un objeto JavaScript
              let objetoDatos = JSON.parse(jsonDatos);
              
              // Acceder a propiedades del objeto
              console.log(objetoDatos.nombre);   // Imprimirá "John"
              console.log(objetoDatos.edad);     // Imprimirá 30
              console.log(objetoDatos.amigos[0]); // Imprimirá "Alice"
              
              // Convertir un objeto JavaScript a una cadena JSON
              let nuevoJsonDatos = JSON.stringify(objetoDatos);
              console.log(nuevoJsonDatos);

JSON.parse(): Convierte una cadena JSON en un objeto JavaScript.
              JSON.stringify(): Convierte un objeto JavaScript en una cadena JSON.

Peticiones asíncronas y Promesas

Peticiones Asíncronas con XMLHttpRequest:

// Crear una instancia de XMLHttpRequest
let xhr = new XMLHttpRequest();

// Configurar la solicitud
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

// Configurar el manejo de eventos para la carga exitosa
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // La solicitud fue exitosa
    let respuesta = JSON.parse(xhr.responseText);
    console.log(respuesta);
  } else {
    // La solicitud falló
    console.error('Error en la solicitud:', xhr.statusText);
  }
};

// Configurar el manejo de eventos para errores de red
xhr.onerror = function() {
  console.error('Error de red al realizar la solicitud.');
};

// Enviar la solicitud
xhr.send();

Este es un ejemplo básico de una solicitud GET asíncrona utilizando XMLHttpRequest. Sin embargo, hoy en día, se prefiere utilizar la API fetch() en lugar de XMLHttpRequest para realizar solicitudes.

Peticiones Asíncronas con fetch():

// Realizar una solicitud GET usando fetch()
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Error en la solicitud: ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
En este ejemplo, fetch() devuelve una promesa. La cadena .then() se encadena para manejar la respuesta exitosa, y .catch() se utiliza para manejar cualquier error durante la solicitud.

Promesas:

// Ejemplo de promesa
let miPromesa = new Promise((resolve, reject) => {
  // Lógica asíncrona
  setTimeout(() => {
    let exito = true; // Simular un resultado exitoso
    if (exito) {
      resolve('La operación fue exitosa.');
    } else {
      reject('La operación falló.');
    }
  }, 2000); // Simular una operación que lleva tiempo
});

// Utilizar la promesa
miPromesa
  .then(resultado => {
    console.log(resultado);
  })
  .catch(error => {
    console.error(error);
  });
En este ejemplo, la promesa se resuelve con éxito después de un cierto tiempo (setTimeout), y la cadena .then() maneja el resultado exitoso. Si la promesa se rechaza (por ejemplo, si la operación falla), la cadena .catch() maneja el error.

Las promesas son útiles para manejar operaciones asíncronas de manera más clara y evitar el llamado "callback hell" (anidación excesiva de funciones de devolución de llamada). Además, son la base de async/await, que es otra forma de manejar operaciones asíncronas introducida en JavaScript.

LocalStorage

localStorage en JavaScript es un objeto de almacenamiento que permite a las aplicaciones web almacenar datos de forma persistente en el navegador. La información almacenada en localStorage permanece incluso después de cerrar o recargar la página. Aquí tienes una breve explicación y ejemplos de cómo usar localStorage:

Almacenar Datos en localStorage:
            
            // Almacenar un valor en localStorage
            localStorage.setItem('nombre', 'Juan');
            En este ejemplo, estamos utilizando el método setItem para almacenar el valor "Juan" con la clave 'nombre' en localStorage.
            
            Obtener Datos de localStorage:
            
            // Obtener un valor de localStorage
            let nombreGuardado = localStorage.getItem('nombre');
            console.log(nombreGuardado);  // Imprimirá "Juan"
            El método getItem se utiliza para recuperar el valor asociado con la clave 'nombre' desde localStorage.
            
            Eliminar Datos de localStorage:
            
            // Eliminar un valor de localStorage
            localStorage.removeItem('nombre');
            Con removeItem, podemos eliminar el valor asociado con la clave 'nombre' de localStorage.
            
            Almacenar Objetos en localStorage:
            localStorage solo puede almacenar datos en formato de cadena. Si deseas almacenar objetos, necesitas convertirlos a cadenas JSON utilizando JSON.stringify al guardar y JSON.parse al recuperar:
            
         
            // Almacenar un objeto en localStorage
            let usuario = { nombre: 'Juan', edad: 25 };
            localStorage.setItem('usuario', JSON.stringify(usuario));
            
            // Obtener y convertir el objeto de localStorage
            let usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));
            console.log(usuarioGuardado);  // Imprimirá { nombre: 'Juan', edad: 25 }
            Notas Importantes:
            localStorage tiene una capacidad de almacenamiento limitada (generalmente alrededor de 5 MB por dominio).
            Los datos almacenados en localStorage están disponibles incluso después de cerrar el navegador y volver a abrirlo, siempre que no se hayan borrado manualmente o expirado.
            Es importante manejar errores, ya que el almacenamiento puede estar desactivado por configuración del navegador o por el usuario.
            Ten en cuenta que localStorage solo es accesible en el mismo dominio del que proviene la página web que lo utiliza. Además, ten cuidado con el tipo y la cantidad de datos que almacenas, ya que el espacio es limitado y el uso excesivo puede afectar el rendimiento de tu aplicación.

Volver arriba

QUICK LINKS

UN ESPACIO PARA APRENDER y RECORDAR

La finalidad de esta web es tener todos los conocimientos de programación que he aprendido reunidos y accesibles, los lenguajes son HTML5,CSS3,JS,PHP,MyJS, también tengo cursos de Frameworks como Angular JS, Angular, Vue.js,Laravel,Symphony.. iré subiendo en breve toda la documentación.

PARA CUALQUIER CONSULTA

Location administrador@albertogranadoibanez.com www.albertogranadoibanez.com

APUNTES