Curso Completo de JavaScript para Principiantes

Beau Carnes, freeCodeCamp.org

Introducción

• Curso: JavaScript para Principiantes
• Propósito: Aprender los conceptos básicos del lenguaje JavaScript
• Incluye problemas interactivos en el curriculum de freeCodeCamp.org
• Después del curso: proyectos de JavaScript
• Recursos adicionales: tutoriales de proyectos en la descripción

Instalación de JavaScript

Opcional (ya está en todos los navegadores web)

• Editores de código recomendados:
  • Sublime Text
  • Visual Studio Code
  • Atom
• Opciones para escribir JS:
  • Dentro de etiquetas <script> en archivos HTML
  • Editor en freeCodeCamp.org
  • CodePen (Create Pen)
  • Scrimba.com

Comentarios en JavaScript

• Comentarios: líneas ignoradas por JavaScript
• Comentarios de una sola línea: //
• Comentarios multi-línea: /* */
• Utilizados para tomar notas o describir funciones

Tipos de Datos y Variables

Tipos de Datos

• Cadena (String): cualquier texto
• Número (Number): cualquier número
• Booleano (Boolean): true o false
• Indefinido (Undefined): valor no definido
• Nulo (Null): valor nulo
• Símbolo (Symbol): valor único e inmutable, más sobre estos después
• Objeto (Object): almacenar pares clave-valor

Variables

• Almacenan y manipulan datos de manera dinámica
• Declarar variables con var, let, o const
  • var: alcance global o de función
  • let: alcance de bloque
  • const: no se puede re-asignar, debe inicializarse

Asignación y Declaraciones

• Declaración de variable: var a;
• Asignación de variable: a = 7;
• Decl. y Asignación juntas: var b = 2;

Tipos de Asignaciones

• Inicialización de variable con operador de asignación: var a = 9;
• Variables no inicializadas tienen valor undefined, deben ser asignadas para evitar errores
• Sensibilidad a mayúsculas: nombres y funciones son sensibles a mayúsculas
• Buena práctica usar camelCase: comienza con minúscula, nuevas palabras en mayúscula myVariable

Operaciones Matemáticas

• Suma: 10 + 10
• Resta: 45 - 33
• Multiplicación: 8 * 10
• División: 66 / 33
• Incremento: myVar++
• Decremento: myVar--
• Decimales: 5.7
• Multiplicación de decimales: 2.5 * 0.2
• División de decimales: 4.4 / 2.2
• Resto: 11 % 3 (útil para determinar par/impar)

Asignación Compuesta

• Adición aumentada: a += 12
• Sustracción aumentada: a -= 6
• Multiplicación aumentada: a *= 5
• División aumentada: a /= 3

Manipulación de cadenas de texto (Strings)

Declaración y concatenación

• Declarar variables de string: var myName = "Beau";
• Concatenación de strings con operador +
• Concatenar con +=: myStr += " more text";
• Construcción de strings con variables: "My name is " + myName;
• Anexar variables a strings: += someAdjective;

Propiedades y notación

• Longitud de string: myName.length;
• Notación de corchetes: acceder a caracteres [index]
• Inmutabilidad de strings: no se pueden cambiar caracteres directamente, solo reasignar
• Especificación de caracteres finales y específicos: str[str.length - 1]
• Secuencias de escape: \, \n, \t, etc.

Manipulación y uso

• Crear matrices (arrays): var myArray = ["value", 2];
• Matrices anidadas: [["value", 2], ["another"]]
• Acceso a datos de matriz: myArray[0]
• Modificar datos de matriz: myArray[0] = 3;
• Agregar con .push(): myArray.push(4);
• Eliminar último item con .pop(): var lastItem = myArray.pop();
• Eliminar primer item con .shift(): var firstItem = myArray.shift();
• Agregar primer item con .unshift(): myArray.unshift(3);
• Listado de compras: matrices anidadas para representar listas

Funciones

Definición y uso

• Crear función: function reusableFunction() {...}
• Llamar función: reusableFunction();
• Parámetros de funciones: functionWithArgs(a, b) {...} y functionWithArgs(10, 5);
• Ambito de variables:
  • Global: fuera de funciones, accesible desde cualquier parte
  • Local: dentro de funciones, accesible solo allí
  • Precedencia local vs global: las locales tienen prioridad en caso de duplicados

Uso avanzado

• Retorno de valor: function returnVar() { return varName; }
• Valor undefined retornado de funciones: si no existe return, retorna undefined
• Asignación con valor retornado: var myVar = myFunction();

Ejemplos prácticos

• Cue (Queue) en ciencias de la computación: operaciones sobre datos en filas
• Card counting function (Blackjack): contar cartas

Condicionales y operadores

Booleanos y Lógica

• Valores booleanos: true, false
• if statement: if (condition) {...}, if (val == 12) {...}
• Operador de igualdad estricta: === no convierte tipos, == sí
• Operadores de desigualdad y estricta: != y !==
• Operadores >, >=, <, <=: comparación numérica
• Operadores lógicos &&, ||: if (a && b), if (a || b)
• else y else if: manejar múltiples condiciones
• Anidar declaraciones condicionales: usar múltiples else if en orden lógico
• Switch statements: switch (val) { case 1:...}, más limpieza que múltiples else if
• Declaración default: usar cuando nada más coincide: default: ...
• Uso de múltiples opciones idénticas: omitimos break: case 1: case 2: ...

Bucles e iteración

Tipos de bucles

• while loop: while (i < 5) {...}
• for loop: for (var i = 0; i < 5; i++) {...}
• do...while loop: ejecuta al menos una vez: do {...} while (i < 5);

Operaciones sobre matrices

• Iterar sobre matrices: for (var i = 0; i < array.length; i++) {...}
• Bucles anidados: manejar matrices multidimensionales: for (var i = 0; ...){ for (var j = 0; ...){...}}

Objetos

Fundamentos

• Crear objetos: { key: "value", ...}
• Acceso a propiedades:
  • Notación de puntos: object.key
  • Notación de corchetes: object["key"]
• Acceso a propiedades con variables: var prop = "key"; object[prop]
• Actualizar propiedades: object.key = "newValue"
• Agregar nuevas propiedades: object.newKey = "value"
• Eliminar propiedades: delete object.key
• Uso como búsqueda (lookup): buscar valores asociados a etiquetas
• Verificar propiedades con .hasOwnProperty(): if (object.hasOwnProperty(prop)) {...}
• Manipulación de objetos complejos: objetos dentro de objetos, arrays de objetos
• Acceso a objetos anidados con notación combinada: obj.innerObj["key"]
• Manejo de matrices anidadas: array[i][j]

Matemáticas y Números Aleatorios

• Generar fracciones aleatorias: Math.random();
• Números enteros aleatorios: Math.floor(Math.random() * 20);
• Números dentro de un rango: Math.floor(Math.random() * (max - min + 1)) + min;
• parseInt para convertir strings a números: parseInt("56");
• parseInt con radix: especificar base numérica: parseInt("1101", 2);

Operador Condicional (Ternario)

• Simplificar if...else: condition ? exprIfTrue : exprIfFalse;
• Condicionales múltiples: a ? b : c ? d : e

ES6 y Características Avanzadas

Variables Modernas: let y const

• Uso de let para bloquear el alcance: no declararlas dos veces
• let comparado con var: alcance limitado al bloque
• const para constantes: no se pueden re-asignar
• Mutar arrays con const: se pueden cambiar los elementos
• Prevenir mutaciones de objetos: Object.freeze(obj)

Funciones Flecha (Arrow Functions)

• Sintaxis concisa: (params) => {...}
• Con argumentos: (a, b) => a + b
• Parámetros por defecto: (param = defaultValue) => {...}
• Operador resto (...): agrupar parámetros: (...args) => {...}
• Operador spread (...): expandir arrays, copiar arrays

Desestructuración

• Asignación desestructurante en objetos: extraer propiedades: const {a, b} = obj;
• Objetos anidados: extraer propiedades profundas: const {a, b: {c}} = obj;
• Asignación desestructurante en arrays: extract elements: const [x, y] = arr;
• Resto (...) al desestructurar: agrupar restantes: [a, b, ...rest] = arr;

Clases y Métodos

• Declarar con class: class Name {...}
• Constructor: constructor(param) { this.prop = param; }
• Getters y Setters: manejar acceso a propiedades privadas get prop() y set prop(value)
• Exportar e Importar Módulos:
  • export: exportar funciones/variables
  • import desde otros archivos: import { func } from 'file';
  • export default: exportación por defecto
  • Importar todo el contenido: import * as obj from 'file';

Literales de Plantillas (Template Literals)

• Crear cadenas completas con backticks: \Hola ${nombre}\\
• Ventajas:
  • Multilínea
  • Insertar comillas sin escaparlas
  • Incluir variables directamente

Despedida

• No olvidar suscribirse a freeCodeCamp.org
• Usar código para el bien

¡Listo para comenzar a aplicar JavaScript en tus proyectos! 🚀