Guía de JavaScript - Irene-Frias/1DAM GitHub Wiki

💻 Guía de JavaScript

JavaScript es un lenguaje de programación esencial para el desarrollo web. Permite crear páginas dinámicas e interactivas, mejorando la experiencia del usuario con efectos visuales, validaciones de formularios, manipulación del DOM y mucho más. Es un lenguaje versátil que se ejecuta en los navegadores y también en el servidor con entornos como Node.js. Aquí te dejamos una guía rápida con los conceptos fundamentales que necesitas conocer para empezar a programar en JavaScript.


🌍 ¿Qué es JavaScript?

JavaScript es un lenguaje de programación ligero y versátil utilizado principalmente para el desarrollo web. Permite crear contenido interactivo y dinámico en sitios web.


⌨️ La consola del navegador

La consola del navegador es una herramienta que permite ejecutar y depurar código JavaScript directamente desde el navegador. Puedes abrirla usando F12 o Ctrl + Shift + I en la mayoría de los navegadores modernos.


📋 Tipos de datos

JavaScript tiene los siguientes tipos de datos:

  • Primitivos: string, number, boolean, null, undefined, symbol, bigint
  • Objetos: estructuras más complejas como Array, Object, Function.

📋 Operadores de comparación

  • Igualdad: ==, ===
  • Desigualdad: !=, !==
  • Mayor/Menor: >, <, >=, <=

📋 Operadores lógicos

  • AND: &&
  • OR: ||
  • NOT: !

📋 Variables

Se pueden declarar variables usando:

  • var: tiene un comportamiento inesperado debido a su ámbito de función y hoisting (evitar su uso).
  • let: para variables que cambian de valor.
  • const: para valores constantes.
let nombre = "Juan";
const edad = 25;

Estos son valores especiales en JavaScript que indican la ausencia del valor, pero tienen diferencias.

  • null: representa una ausencia intencionada de valor.
  • undefined: indica que una variable no ha sido inicializada.
let sinValor;
console.log(sinValor); // undefined

let valorNulo = null;
console.log(valorNulo); // null

🖊️ Operador typeof

El operador typeof se usa para conocer el tipo de un valor o variable.

console.log(typeof 42); // "number"
console.log(typeof "hola"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (error histórico de JavaScript)

💡 Comentarios

  • Comentarios de una línea: // Esto es un comentario
  • Comentarios multilínea: /* Esto es un comentario multilínea */
// Este es un comentario de una línea
/* Este es un comentario
   de múltiples líneas */

💬 Mensajes console.log, alert(), prompt()

El método console.log() se usa para imprimir mensajes en la consola del navegador.

console.log("Hola, mundo!");

El método alert() muestra un mensaje emergente cuando se carga la página.

alert("Ha cargado la página");

El método prompt() pide un valor al usuario y lo devuelve como una cadena de texto.

var nombre = prompt("Introduce tu nombre:"); // Muestra el mensaje 
alert("Hola " + nombre); // Muestra un mensaje personalizado 

🧩 Estructuras de Control (if, switch, for, while)

  • if-else permiten ejecutar un bloque de código solo si se cumple una condición. Se utiliza para evaluar la condición que se quiera al ejecutar el código según el resultado.
let edad = 20;
if (edad >= 18) {
    console.log("Eres mayor de edad");
} else {
    console.log("Eres menor de edad");
}
  • switch se usa cuando tenemos muchas condiciones y queremos que el código sea más ordenado.
let fruta = "manzana";

switch (fruta) {
    case "manzana":
        console.log("Es una manzana");
        break;
    case "banana":
        console.log("Es una banana");
        break;
    default:
        console.log("No es una fruta conocida");
}
  • for se usa cuando sabemos cuántas veces queremos repetir el código.
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}
  • while se usa cuando no sabemos exactamente cuántas veces se ejecutará el código.
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

📜 Funciones

Una función es un bloque de código reutilizable que se ejecuta cuando es llamada.

function saludo() {
    alert('Hola Mundo'); // Función simple que muestra un mensaje
}

Para el manejo de eventos u otras ocasiones se le pueden pasar algunos parámetros a la función.

function click(event, msg) {
    alert(msg);
}

📖 Arrays

Los arrays en JavaScript son estructuras de datos utilizadas para almacenar múltiples valores en una sola variable. Se pueden manipular con diversos métodos y recorrer con bucles.

  • Crear una array
let numeros = [1, 2, 3, 4, 5]; // Array de números
let frutas = ["Manzana", "Banana", "Naranja"]; // Array de strings
  • Acceder a un elemento del array
let frutas = ["Manzana", "Banana", "Naranja"];
console.log(frutas[0]); // "Manzana"
console.log(frutas[1]); // "Banana"
console.log(frutas[2]); // "Naranja"
  • Operaciones útiles
    • length → Devuelve la cantidad de elementos en un array.
    • indexOf(valor) → Devuelve la posición de un elemento (o -1 si no está).
    • includes(valor) → Devuelve true si el elemento está en el array.
    • reverse() → Invierte el orden de los elementos.
    • sort() → Ordena los elementos (como strings por defecto).
let nombres = ["Ana", "Luis", "Carlos"];

console.log(nombres.length); // 3
console.log(nombres.indexOf("Luis")); // 1
console.log(nombres.includes("Carlos")); // true

nombres.reverse();
console.log(nombres); // ["Carlos", "Luis", "Ana"]

nombres.sort();
console.log(nombres); // ["Ana", "Carlos", "Luis"]
⚠️ **GitHub.com Fallback** ⚠️