blog modern

Inicio

Fundamentos de Javascript

2023-10-11

Fundamentos de Javascript

¿Por qué aprender Javascript?

JavaScript es esencial para el desarrollo web, siendo el lenguaje principal que permite crear páginas interactivas y atractivas. Su capacidad para agregar funciones como formularios interactivos, animaciones y actualizaciones en tiempo real mejora significativamente la experiencia del usuario en los sitios web.

Variables

var i = 1 // variable
let ii = 1 // variable de bloque (if, function, etc)
const iii = 1 // constante

Tipos de datos

  • number → numérico
  • float → numérico decimal
  • string → cadena de texto
  • boolean → booleano
  • arrays → lista
  • {} → objetos literales
  • nan → not a number
  • null → nulo
  • undefined → indefinido
let entero = 42;
let decimal = 3.14;

let cadenaSimple = 'Hola, mundo!'; //cadena

let verdadero = true; //boolea
let falso = false; //boolea

let indefinidoVariable; //undefined
let nulo = null; //null

let persona = {
  nombre: 'Juan',
  edad: 30,
  hablar: function() {
    console.log('Hola');
  }
}; //objeto literal

let arreglo = [1, 2, 3, 4, 5]; //array

Operadores

  • Operadores Aritméticos:
    • + → suma.
    • - → resta.
    • * → multiplicación.
    • / → división.
    • % → módulo (resto de una división).
    • ** → potencia.
  • Operadores de asignación:
    • = → Asignación simple.
    • += → Suma y asignación.
    • -= → Resta y asignación.
    • *= → Multiplicación y asignación.
    • /= → División y asignación.
    • %= → Módulo y asignación.
  • Operadores de comparación:
    • == → Igual a (comparación de valor).
    • === → Igual a (comparación de valor y tipo).
    • != → Diferente de (comparación de valor).
    • !== → Diferente de (comparación de valor y tipo).
    • > → Mayor que.
    • < → Menor que.
    • >= → Mayor o igual que.
    • <= → Menor o igual que.
  • Operadores Lógicos:
    • && → AND lógico.
    • || → OR lógico.
    • ! → NOT lógico.
  • Operadores de Incremento/Decremento:
    • ++ → Incremento.
    • -- → Decremento.
  • Operadores de concatenación:
    • + → Concatenación de cadenas.
  • Operadores ternarios:
    • let resultado = numero % 2 === 0 ? "Par" : "Impar";

Concatenar

let nombre = "Alejo";
let apellido = "Pequeño";
let nCompleto = nombre + " " + apellido

Display

console.log(nCompleto);

Condicionales

If ternario

var edad = 18;

var mensaje = edad >= 18
  ? "Eres mayor de edad. Puedes ingresar al sitio."
  : "Eres menor de edad. No puedes ingresar al sitio.";

console.log(mensaje);

Switch

var diaDeLaSemana = 3;

switch (diaDeLaSemana) {
  case 1:
    console.log("Hoy es lunes.");
    break;
  case 2:
    console.log("Hoy es martes.");
    break;
  case 3:
    console.log("Hoy es miércoles.");
    break;
  case 4:
    console.log("Hoy es jueves.");
    break;
  case 5:
    console.log("Hoy es viernes.");
    break;
  case 6:
    console.log("Hoy es sábado.");
    break;
  case 7:
    console.log("Hoy es domingo.");
    break;
  default:
    console.log("Día no válido.");
}

Funciones

// Definición de la función
function saludar(nombre) {
  console.log("¡Hola, " + nombre + "! Bienvenido/a.");
}

// Llamada a la función
saludar("Juan"); // Output: ¡Hola, Juan! Bienvenido/a.
saludar("María"); // Output: ¡Hola, María! Bienvenido/a.

Arrow Functions

const restar = (a, b) => a - b;

console.log(restar(10, 5)); // Output: 5
console.log(restar(20, 8)); // Output: 12

Callbacks

Una función que se pasa como parametro de otra función.

// Función que recibe dos números y un callback para realizar una operación
function operacionMatematica(a, b, callback) {
  const resultado = callback(a, b);
  console.log("El resultado es:", resultado);
}

// Funciones de callback para realizar diferentes operaciones
function sumar(a, b) {
  return a + b;
}

function restar(a, b) {
  return a - b;
}

function multiplicar(a, b) {
  return a * b;
}

// Uso de la función con diferentes callbacks
operacionMatematica(10, 5, sumar); // Output: El resultado es: 15
operacionMatematica(20, 8, restar); // Output: El resultado es: 12
operacionMatematica(4, 3, multiplicar); // Output: El resultado es: 12

Metodos de string

  • Acceso y busqueda
    const str = "Hola, mundo";

console.log(str.length); // Output: 11
console.log(str.charAt(0)); // Output: H
console.log(str.indexOf("mundo")); // Output: 6
console.log(str.endsWith("mundo")); // Output: true
console.log(str.includes("la")); // Output: false
console.log(str.substring(0, 4)); // Output: Hola
  • Transformacion
    const texto = "Hola, amigos!";

console.log(texto.toUpperCase()); // Output: HOLA, AMIGOS!
console.log(texto.toLowerCase()); // Output: hola, amigos!
console.log(texto.concat(" ¿Cómo están?")); // Output: Hola, amigos! ¿Cómo están?
console.log(texto.trim()); // Output: Hola, amigos!
  • Modificacion
    const frase = "JavaScript es genial";

console.log(frase.replace("genial", "increíble")); // Output: JavaScript es increíble
console.log(frase.slice(4, 11)); // Output: Script
console.log(frase.split(" ")); // Output: ["JavaScript", "es", "genial"]
console.log(frase.padStart(30, "*")); // Output: *****JavaScript es genial
console.log(frase.padEnd(30, "*")); // Output: JavaScript es genial*****
  • Conversion
    const numeroTexto = "42";

console.log(parseInt(numeroTexto)); // Output: 42
console.log(parseFloat("3.14")); // Output: 3.14
  • Inspeccion
    const palabra = "Hola";

console.log(palabra.charCodeAt(0)); // Output: 72 (Código Unicode de 'H')
  • Formato
    const mensaje = "¡Hola, Mundo!";

console.log(mensaje.toLocaleLowerCase()); // Output: ¡hola, mundo!
console.log(mensaje.toLocaleUpperCase()); // Output: ¡HOLA, MUNDO!

Metodos de array

// Métodos de Modificación
const array1 = [1, 2, 3];
array1.push(4, 5);
console.log(array1); // Output: [1, 2, 3, 4, 5]

const poppedElement = array1.pop();
console.log(poppedElement); // Output: 5

const shiftedElement = array1.shift();
console.log(shiftedElement); // Output: 1

array1.unshift(0);
console.log(array1); // Output: [0, 2, 3, 4]

array1.splice(1, 1, 'a', 'b');
console.log(array1); // Output: [0, 'a', 'b', 3, 4]

// Métodos de Copia y Concatenación
const array2 = [1, 2, 3];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray); // Output: [0, 'a', 'b', 3, 4, 1, 2, 3]

const slicedArray = concatenatedArray.slice(2, 5);
console.log(slicedArray); // Output: ['b', 3, 4]

// Métodos de Acceso
console.log(concatenatedArray.indexOf('b')); // Output: 2
console.log(concatenatedArray.includes(2)); // Output: true

const foundElement = concatenatedArray.find(element => typeof element === 'number');
console.log(foundElement); // Output: 3

const foundIndex = concatenatedArray.findIndex(element => typeof element === 'number');
console.log(foundIndex); // Output: 3

// Métodos de Iteración
concatenatedArray.forEach(item => console.log(item));
// Output:
// 0
// a
// b
// 3
// 4
// 1
// 2
// 3

const mappedArray = concatenatedArray.map(item => item + 1);
console.log(mappedArray); // Output: [1, 'a1', 'b1', 4, 5, 2, 3, 4]

const filteredArray = concatenatedArray.filter(item => typeof item === 'string');
console.log(filteredArray); // Output: ['a', 'b']

const reducedValue = concatenatedArray.reduce((accumulator, currentValue) => accumulator + currentValue, '');
console.log(reducedValue); // Output: ab34523

// Métodos de Búsqueda
console.log(concatenatedArray.includes('x')); // Output: false

// Métodos de Manipulación
const flatArray = [[1, 2], [3, 4], [5, 6]].flat();
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]

const flatMappedArray = [[1], [2], [3], [4]].flatMap(value => value + 1);
console.log(flatMappedArray); // Output: [2, 3, 4, 5]

Ciclo

  • For
    for (let i = 0; i < 5; i++) {
  console.log("Iteración número:", i);
}
  • While
    let contador = 0;

while (contador < 5) {
  console.log("Iteración número:", contador);
  contador++;
}
  • Do-While
    let contador = 0;

do {
  console.log("Iteración número:", contador);
  contador++;
} while (contador < 5);

Objeto literal

// Crear un objeto literal representando una persona
const persona = {
  nombre: "Juan",
  edad: 30,
  profesion: "Ingeniero",
  saludar: function() {
    console.log("¡Hola! Mi nombre es " + this.nombre + " y tengo " + this.edad + " años.");
  }
};

// Acceder a las propiedades del objeto
console.log(persona.nombre); // Output: Juan
console.log(persona.edad);   // Output: 30

// Llamar al método del objeto
persona.saludar(); // Output: ¡Hola! Mi nombre es Juan y tengo 30 años.

Función constructora

// Definición de una función constructora para crear objetos de tipo "Persona"
function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
  this.saludar = function() {
    console.log("¡Hola! Mi nombre es " + this.nombre + " y tengo " + this.edad + " años.");
  };
}

// Crear instancias de objetos usando la función constructora
const persona1 = new Persona("Juan", 30);
const persona2 = new Persona("María", 28);

// Acceder a propiedades y métodos de los objetos creados
console.log(persona1.nombre); // Output: Juan
console.log(persona2.edad);   // Output: 28

persona1.saludar(); // Output: ¡Hola! Mi nombre es Juan y tengo 30 años.
persona2.saludar(); // Output: ¡Hola! Mi nombre es María y tengo 28 años.

Modulos

  • Creados:
    // miModulo.js

// Definición de un objeto literal con propiedades y métodos
const miObjeto = {
  nombre: "Ejemplo",
  edad: 25,
  saludar: function() {
    return "¡Hola! Mi nombre es " + this.nombre + " y tengo " + this.edad + " años.";
  }
};

// Exportar el objeto para que esté disponible en otros archivos
module.exports = miObjeto;
    Luego llamas a este modulo en tu archivo app.js
  • Nativos:
    const fs = require('fs');
    Son modulos nativos de Javascript, para utilizarlos solo se deben requerir.
  • Creados:
    // miModulo.js

// Definición de un objeto literal con propiedades y métodos
const miObjeto = {
  nombre: "Ejemplo",
  edad: 25,
  saludar: function() {
    return "¡Hola! Mi nombre es " + this.nombre + " y tengo " + this.edad + " años.";
  }
};

// Exportar el objeto para que esté disponible en otros archivos
module.exports = miObjeto;
    Luego llamas a este modulo en tu archivo app.js
  • Terceros: Se instalan con npm.

Destructuring

  • Objeto literal
    // Crear un objeto
const persona = {
  nombre: "Juan",
  edad: 30,
  profesion: "Ingeniero"
};

// Destructurar propiedades del objeto sin spread
const { nombre, edad } = persona;

console.log(nombre);  // Output: Juan
console.log(edad);    // Output: 30
  • Array
    // Crear un arreglo
const numeros = [1, 2, 3, 4, 5];

// Destructurar elementos del arreglo sin spread
const [primero, segundo] = numeros;

console.log(primero);  // Output: 1
console.log(segundo);  // Output: 2

Lectura de Archivo JSON

//datos.json
{
  "nombre": "Juan",
  "edad": 30,
  "profesion": "Ingeniero"
}
//app.js
const fs = require('fs');

// Leer el archivo JSON
const contenidoJSON = fs.readFileSync('datos.json', 'utf8');

// Realizar el análisis (parse) para convertirlo en un objeto JavaScript
const objetoJavaScript = JSON.parse(contenidoJSON);

// Modificar el objeto
objetoJavaScript.edad += 1;

// Convertir el objeto JavaScript nuevamente en una cadena JSON
const nuevoContenidoJSON = JSON.stringify(objetoJavaScript, null, 2);

// Escribir la cadena JSON en un nuevo archivo
fs.writeFileSync('datos_modificados.json', nuevoContenidoJSON, 'utf8');

console.log('Proceso completado.');

Spread Operator

  • Array:
    const numeros = [1, 2, 3];
const nuevosNumeros = [...numeros, 4, 5];

console.log(nuevosNumeros); // Output: [1, 2, 3, 4, 5]
  • Objeto literal:
    const persona = { nombre: "Juan", edad: 30 };
const personaModificada = { ...persona, profesion: "Ingeniero" };

console.log(personaModificada);
// Output: { nombre: "Juan", edad: 30, profesion: "Ingeniero" }
  • Funciones:
    function suma(a, b, c) {
  return a + b + c;
}

const valores = [1, 2, 3];
const resultado = suma(...valores);

console.log(resultado); // Output: 6
  • Clonación de array:
    const original = [1, 2, 3];
const copia = [...original];

console.log(copia); // Output: [1, 2, 3]
  • Clonación de objetos:
    const originalObj = { nombre: "Ana", edad: 28 };
const copiaObj = { ...originalObj };

console.log(copiaObj); // Output: { nombre: "Ana", edad: 28 }

Gracias por dedicar tiempo a leer mi post. Tu atención es muy apreciada.