Conceptos básicos de JavaScript para principiantes

HTML nos proporciona la estructura de una página y CSS controla su apariencia. JavaScript agrega el comportamiento. Puede escuchar una acción, tomar una decisión, actualizar un valor y cambiar la página que tenemos justo delante.

El navegador ejecuta JavaScript y proporciona herramientas como la consola y el modelo de objetos de documento, comúnmente llamado DOM. La consola nos ayuda a inspeccionar valores y errores. El DOM da acceso JavaScript a elementos HTML.

De acuerdo, primero creemos una carpeta llamada my-first-js-project y ábrela en Visual Studio Code. Dentro solo necesitamos dos archivos:

• index.html contiene la página web.
• script.js contiene el código JavaScript.

Ahora conectemos el archivo de JavaScript dentro del elemento head de HTML:

<script src="script.js" defer></script>

El atributo src indica al navegador qué archivo debe cargar. El atributo defer permite que el navegador termine de leer el HTML antes de ejecutar JavaScript.

Después, abre index.html con Live Server. En el navegador, abre las herramientas de desarrollador y selecciona el panel Console. Ahora podemos cambiar el código, guardarlo y revisar el resultado inmediatamente.

Ahora ejecutemos nuestra primera instrucción de JavaScript. El método console.log() muestra un valor en la consola del navegador:

console.log("Hello, JavaScript!");

El texto entre comillas es una cadena. Los paréntesis contienen el valor que pasamos a console.log(), y el punto y coma marca el final de la instrucción.

Los comentarios de JavaScript dejan notas en el código sin ejecutarlas:

// This is a single-line comment.

/* This comment
can use multiple lines. */

A continuación, guardemos algunos valores para poder reutilizarlos. Usa const cuando la variable deba conservar la misma asignación y let cuando esa asignación deba cambiar.

const userName = "Sahand";
let score = 0;

score = 1;

Para mí, const es la mejor opción predeterminada. Solo recurro a let cuando sé que el valor debe cambiar. Todavía verás var en código antiguo, pero no lo necesitas para los ejemplos de esta guía.

Usa nombres descriptivos en camelCase, como userName, totalPrice e isLoggedIn, en lugar de nombres poco claros como x o data1.

Hasta ahora, hemos almacenado texto y números. Los valores de JavaScript pueden representar varios tipos diferentes de información:

const courseName = "JavaScript Basics"; // string
const lessonCount = 14;                  // number
const isBeginner = true;                 // boolean
let nextLesson;                          // undefined
const selectedProject = null;            // intentionally empty

El operador typeof informa del tipo de la mayoría de los valores:

console.log(typeof courseName); // "string"
console.log(typeof lessonCount); // "number"
console.log(typeof isBeginner); // "boolean"

Una advertencia: typeof null devuelve "object". Es una peculiaridad histórica de JavaScript. Por ahora, piensa en null como un valor intencionadamente vacío.

Los operadores aritméticos realizan cálculos:

console.log(10 + 5);
console.log(10 - 5);
console.log(10 * 5);
console.log(10 / 5);

Los operadores de comparación producen valores booleanos. Usa la igualdad estricta, ===, como opción predeterminada para principiantes porque compara el valor y el tipo sin conversión automática.

console.log(10 > 5);       // true
console.log(10 === 10);    // true
console.log(10 === "10"); // false

Los operadores lógicos combinan o invierten condiciones:

• && requiere que ambas condiciones sean verdaderas.
• || requiere que al menos una condición sea verdadera.
• ! invierte un resultado booleano.

Ahora hagamos que el código elija qué hacer. Una instrucción if se ejecuta solo cuando su condición es verdadera. Podemos añadir else if para otra prueba y else para todo lo demás.

const age = 15;

if (age < 13) {
  console.log("You are a child.");
} else if (age < 18) {
  console.log("You are a teenager.");
} else {
  console.log("You are an adult.");
}

JavaScript verifica estas condiciones de arriba a abajo y se detiene después de la primera verdadera. Coloque los casos específicos antes que los casos más amplios para que pueda ejecutarse la rama prevista.

A continuación, dejemos de repetir lógica. Una función agrupa código bajo un nombre para poder ejecutarlo cuando lo necesitemos. Los parámetros son marcadores, los argumentos son los valores reales que proporcionamos y return devuelve el resultado.

function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("Sahand");
console.log(message);

Una misma función puede recibir diferentes argumentos sin duplicar su lógica. JavaScript también admite funciones de flecha:

const add = (numberOne, numberTwo) => {
  return numberOne + numberTwo;
};

Las funciones habituales suelen ser más fáciles de reconocer al principio. Las funciones de flecha son comunes en JavaScript moderno, especialmente cuando se pasan funciones cortas a otros métodos.

¿Y si queremos guardar varios valores relacionados? Un array nos proporciona una colección ordenada. JavaScript empieza a contar sus índices desde cero, así que el índice 0 corresponde al primer elemento.

const languages = ["HTML", "CSS", "JavaScript"];

console.log(languages[0]);
languages[1] = "CSS3";
languages.push("React");
const removedLanguage = languages.pop();
console.log(languages.length);

El método .push() añade un elemento al final, .pop() elimina el último elemento y .length indica cuántos elementos contiene el array. Un array declarado con const aún puede cambiar su contenido; const impide reasignar la variable.

A continuación, repitamos una acción sin copiar la misma línea una y otra vez. Un bucle for es útil cuando necesitamos un índice o un control preciso de la repetición:

for (let index = 0; index < languages.length; index++) {
  console.log(languages[index]);
}

Cuando solo quieres realizar una acción para cada elemento del array, forEach() ofrece una alternativa directa:

languages.forEach(function (language) {
  console.log(language);
});

Usa la forma que haga que la tarea sea más fácil de entender. Un bucle tradicional muestra el inicio, la condición y el incremento. forEach() se centra en el elemento actual del array.

Una matriz es excelente para una lista. Cuando queremos agrupar información sobre una cosa, podemos usar un objeto:

const user = {
  name: "John",
  age: 25,
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

Accede a una propiedad con notación de punto, como user.name, o con notación de corchetes, como user["age"]. Una función almacenada dentro de un objeto se llama método. En este ejemplo, this.name lee la propiedad name del objeto actual.

Muy bien, ahora podemos ir más allá de la consola y cambiar la página web real. El DOM representa el HTML cargado como objetos a los que JavaScript puede acceder. Primero seleccionamos un elemento y luego actualizamos su contenido o estilos.

<h1>JavaScript Basics</h1>
<p id="message">Learning the DOM</p>

const heading = document.querySelector("h1");
const message = document.getElementById("message");

heading.textContent = "JavaScript is working!";
message.textContent = "The DOM has been updated.";
heading.style.color = "royalblue";

querySelector() acepta un selector CSS y devuelve la primera coincidencia. getElementById() busca un elemento usando su ID sin el símbolo #.

A continuación, hagamos que la página responda. Un evento es algo que ocurre en el navegador, como un clic, una pulsación de tecla o una entrada de formulario. addEventListener() conecta ese evento con una función callback.

const button = document.getElementById("action-button");

button.addEventListener("click", function () {
  message.textContent = "The button was clicked.";
});

Tenga en cuenta que la devolución de llamada no se ejecuta inmediatamente. El navegador espera y lo llama solo cuando ocurre el evento seleccionado.

Ahora combinemos todo en un pequeño proyecto de mostrador. El HTML nos da un número y tres botones:

<main style="text-align: center; font-family: Arial, sans-serif;">
  <h1>JavaScript Counter</h1>
  <p id="count" style="font-size: 3rem;">0</p>
  <button id="decrease">Decrease</button>
  <button id="reset">Reset</button>
  <button id="increase">Increase</button>
</main>

En JavaScript, comience con un valor cambiante y una función que sincronice el número visible:

const countDisplay = document.getElementById("count");
let count = 0;

function updateDisplay() {
  countDisplay.textContent = count;
}

Seleccione los botones y cree una función para cada acción:

const increaseButton = document.getElementById("increase");
const decreaseButton = document.getElementById("decrease");
const resetButton = document.getElementById("reset");

function increaseCount() {
  count++;
  updateDisplay();
}

function decreaseCount() {
  if (count > 0) {
    count--;
  }
  updateDisplay();
}

function resetCount() {
  count = 0;
  updateDisplay();
}

Finalmente, conectemos cada botón con su función:

increaseButton.addEventListener("click", increaseCount);
decreaseButton.addEventListener("click", decreaseCount);
resetButton.addEventListener("click", resetCount);

Y eso es prácticamente todo. La variable count guarda el estado actual, nuestras funciones contienen el comportamiento reutilizable, la condición evita los valores negativos, textContent actualiza la página y los eventos de clic ejecutan cada acción. Como puedes ver, todos los conceptos independientes ahora funcionan juntos en un solo proyecto.

Si la página no responde, no te preocupes. Comprueba estos detalles primero:

• Confirma que script.js esté escrito exactamente igual en el nombre del archivo y en el atributo src.
• Añade defer cuando el script se cargue desde el head del HTML.
• Abre la consola del navegador y corrige el primer error antes de ocuparte de los siguientes.
• Haz coincidir exactamente el ID de cada elemento, incluidas las mayúsculas y los guiones.
• Pasa una función callback a addEventListener() sin llamarla inmediatamente. Usa increaseCount, no increaseCount().
• Recuerda que los índices de los arrays comienzan en cero.
• Usa let solo cuando sea necesario reasignar una variable y const para las demás variables.

Muy bien, ahora comprende los valores, variables, operadores, condiciones, funciones, matrices, bucles, objetos, DOM y eventos de JavaScript. Más importante aún, ha visto cómo estos conceptos funcionan juntos dentro de un proyecto interactivo completo.

El mejor siguiente paso es construir proyectos pequeños. Cada proyecto le brinda otra razón para seleccionar elementos, almacenar estados, responder a eventos y dividir el comportamiento en funciones. Así es como la sintaxis empieza a parecer natural en lugar de parecer una lista de reglas.