JavaScript para principiantes: guía desde cero ⚡

JavaScript es el lenguaje que permite agregar interactividad y comportamiento dinámico a las páginas web.

HTML crea la estructura, CSS controla la apariencia y JavaScript permite responder a las acciones del usuario.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación utilizado principalmente para desarrollar funciones interactivas dentro de páginas y aplicaciones web.

Los navegadores modernos pueden ejecutar JavaScript directamente, sin necesidad de instalar un programa adicional.

console.log("Hola desde JavaScript");

Esta instrucción muestra un mensaje dentro de la consola del navegador.

¿Para qué sirve JavaScript?

Puedes repasar el concepto general en: ¿Qué es JavaScript?

Cómo conectar JavaScript con HTML

Una práctica recomendada es guardar el código en un archivo separado.

Crea un archivo llamado:

script.js

Después conéctalo al final del documento HTML:

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

El enlace suele colocarse antes de </body> para que el contenido HTML ya esté disponible cuando JavaScript se ejecute.

Estructura de archivos

mi-proyecto/
├── index.html
├── style.css
└── script.js

Utilizar la consola del navegador

La consola permite comprobar resultados y encontrar errores durante el desarrollo.

console.log("El archivo funciona");

Para abrirla normalmente puedes usar:

F12

Después selecciona la pestaña llamada Consola o Console.

Variables en JavaScript

Una variable permite guardar información para utilizarla en diferentes partes del programa.

const nombre = "ByteNova";

let articulosLeidos = 3;

const

Se utiliza cuando la variable no será reasignada.

const sitio = "ByteNova";

let

Se utiliza cuando el valor puede cambiar.

let puntos = 0;

puntos = puntos + 10;

Tipos de datos

const nombre = "Ana";

const edad = 20;

const activo = true;

const resultado = null;

const temas = ["HTML", "CSS"];

const usuario = {
    nombre: "Ana",
    edad: 20
};

Comprobar el tipo de dato

const edad = 20;

console.log(typeof edad);

El resultado será:

number

Operadores básicos

Operadores matemáticos

const suma = 10 + 5;
const resta = 10 - 5;
const multiplicacion = 10 * 5;
const division = 10 / 5;

Operadores de comparación

Condiciones

Las condiciones permiten ejecutar instrucciones diferentes según una situación.

const edad = 20;

if (edad >= 18) {

    console.log("Eres mayor de edad");

} else {

    console.log("Eres menor de edad");

}

Utilizar else if

const nota = 85;

if (nota >= 90) {

    console.log("Excelente");

} else if (nota >= 70) {

    console.log("Aprobado");

} else {

    console.log("Debes mejorar");

}

Ciclos

Los ciclos permiten repetir instrucciones.

Ciclo for

for (let numero = 1; numero <= 5; numero++) {

    console.log(numero);

}

Ciclo for...of

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

for (const tecnologia of tecnologias) {

    console.log(tecnologia);

}

Funciones

Una función agrupa instrucciones que pueden reutilizarse.

function saludar() {

    console.log("Hola desde ByteNova");

}

saludar();

Funciones con parámetros

function saludar(nombre) {

    console.log(`Hola, ${nombre}`);

}

saludar("Ana");
saludar("Carlos");

Devolver un resultado

function sumar(numeroUno, numeroDos) {

    return numeroUno + numeroDos;

}

const resultado = sumar(5, 7);

console.log(resultado);

Arreglos

Un arreglo permite guardar varios valores dentro de una sola variable.

const articulos = [
    "HTML y CSS",
    "JavaScript",
    "Python"
];

console.log(articulos[0]);

Las posiciones comienzan desde cero.

Agregar un elemento

const articulos = ["HTML"];

articulos.push("CSS");

console.log(articulos);

Recorrer un arreglo

const temas = [
    "Programación",
    "Ciberseguridad",
    "Inteligencia artificial"
];

temas.forEach(function (tema) {

    console.log(tema);

});

Objetos

Un objeto permite agrupar información relacionada mediante propiedades.

const estudiante = {

    nombre: "Ana",
    edad: 20,
    activo: true

};

console.log(estudiante.nombre);

Modificar una propiedad

estudiante.edad = 21;

console.log(estudiante.edad);

Manipular el DOM

El DOM representa los elementos de una página para que JavaScript pueda encontrarlos y modificarlos.

Seleccionar un elemento

const titulo = document.getElementById("titulo");

También puedes seleccionar mediante una clase:

const tarjeta = document.querySelector(".tarjeta");

Cambiar un texto

const titulo = document.getElementById("titulo");

titulo.textContent = "Nuevo título";

Agregar o quitar una clase

const tarjeta = document.querySelector(".tarjeta");

tarjeta.classList.add("activa");

tarjeta.classList.remove("activa");

tarjeta.classList.toggle("activa");

Eventos

Un evento ocurre cuando una persona interactúa con la página.

Evento de clic

const boton = document.getElementById("boton");

boton.addEventListener("click", function () {

    console.log("Presionaste el botón");

});

Proyecto práctico: contador de clics

Construiremos un contador que aumentará cada vez que la persona presione un botón.

HTML

<main class="contador">

    <h1>Contador de clics</h1>

    <p id="resultado">
        0
    </p>

    <button
        type="button"
        id="boton-aumentar"
    >
        Aumentar
    </button>

    <button
        type="button"
        id="boton-reiniciar"
    >
        Reiniciar
    </button>

</main>

JavaScript

const resultado =
    document.getElementById("resultado");

const botonAumentar =
    document.getElementById("boton-aumentar");

const botonReiniciar =
    document.getElementById("boton-reiniciar");

let contador = 0;

botonAumentar.addEventListener(
    "click",
    function () {

        contador = contador + 1;

        resultado.textContent = contador;

    }
);

botonReiniciar.addEventListener(
    "click",
    function () {

        contador = 0;

        resultado.textContent = contador;

    }
);

Cómo funciona

Errores frecuentes

• No conectar correctamente el archivo JavaScript.
• Escribir incorrectamente el nombre de una variable.
• Olvidar cerrar paréntesis, llaves o comillas.
• Confundir asignación con comparación.
• Seleccionar un elemento que no existe.
• Ejecutar el código antes de cargar el HTML.
• No revisar la consola del navegador.
• Copiar código sin comprender su funcionamiento.
• Crear variables globales innecesarias.
• No probar diferentes situaciones.

Elemento no encontrado

const boton =
    document.getElementById("boton");

Si no existe un elemento con id="boton", la variable tendrá el valor null.

if (boton) {

    boton.addEventListener(
        "click",
        function () {

            console.log("Botón encontrado");

        }
    );

}

Ejercicios para practicar

Conclusión

JavaScript permite transformar una página estática en una experiencia interactiva.

Sus variables, condiciones, ciclos, funciones, eventos y herramientas para manipular el DOM forman la base del desarrollo web interactivo.

Comienza con proyectos pequeños y aumenta gradualmente la dificultad conforme comprendas cada concepto.