Introducción a JavaScript

JavaScript es uno de los lenguajes de programación más populares y esenciales para la creación de páginas web interactivas. Es un lenguaje de alto nivel utilizado tanto en el lado del cliente (navegador) como en el lado del servidor (con Node.js), lo que lo convierte en una herramienta fundamental en el desarrollo web moderno.

En este tutorial, aprenderás sobre la sintaxis básica de JavaScript, cómo trabajar con variables, funciones, operadores, y más. JavaScript te permite crear dinámicas interactivas, modificar el contenido de una página y trabajar con APIs para realizar tareas asincrónicas, como obtener datos de un servidor.

¿Por qué usamos JavaScript?

JavaScript se utiliza para agregar interactividad y dinamismo a las páginas web. A través de este lenguaje, puedes:

  • Validar formularios de manera eficiente.
  • Manipular el contenido HTML y CSS sin recargar la página.
  • Crear animaciones, juegos y aplicaciones web.
  • Interactuar con APIs y gestionar eventos del usuario.

Sintaxis Básica de JavaScript

JavaScript tiene una sintaxis sencilla que incluye declaraciones de variables, funciones, operadores, y estructuras de control. A continuación, se presenta un ejemplo básico de un programa JavaScript:


<script>
    let mensaje = "Hola, mundo!";
            
    console.log(mensaje);
            
    function saludar(nombre) {
        console.log("Hola, " + nombre);
    }
            
    saludar("Juan");
</script>

¿Qué son las Variables en JavaScript?

Las **variables** son contenedores donde se almacenan datos. JavaScript tiene tres formas principales de declarar variables:

  • var: Era la forma tradicional de declarar variables (ahora se recomienda evitar su uso en favor de let y const).
  • let: Se usa para declarar variables cuyo valor puede cambiar.
  • const: Se usa para declarar variables cuyo valor no cambiará después de su asignación.

Ejemplo de declaración de variables:


let edad = 30;
const nombre = "Ana";

Funciones en JavaScript

Las **funciones** son bloques de código reutilizables que realizan una tarea específica. En JavaScript, puedes definir una función de la siguiente manera:


function sumar(a, b) {
    return a + b;
}

            
let resultado = sumar(5, 10);
console.log(resultado);

Operadores en JavaScript

Los **operadores** en JavaScript se utilizan para realizar operaciones sobre variables y valores. Algunos operadores comunes incluyen:

  • Operadores aritméticos: +, -, *, /, etc.
  • Operadores de comparación: ==, ===, !=, >, <, etc.
  • Operadores lógicos: &&, ||, !

Ejemplo de uso de operadores:


let x = 10;
let y = 5;
let resultado = x + y;
console.log(resultado);  // Imprime 15

Eventos en JavaScript

Los **eventos** son acciones que ocurren en la página web, como un clic de ratón, una pulsación de tecla o el movimiento del ratón. Puedes agregar interactividad a tu página al manejar estos eventos con JavaScript.

Ejemplo de manejo de un evento de clic:


// Seleccionamos un botón

const boton = document.querySelector("button");



// Añadimos un event listener

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

alert("¡Has hecho clic en el botón!");

});

Manipulación del DOM en JavaScript

JavaScript permite modificar el contenido HTML y el estilo CSS de una página web utilizando el **DOM** (Document Object Model). Puedes seleccionar elementos, cambiar su contenido, agregar nuevos elementos y más.

Ejemplo de manipulación del DOM:


// Seleccionar un elemento

const encabezado = document.querySelector("h1");



// Cambiar su texto

encabezado.textContent = "Nuevo Título";

Conclusión

JavaScript es un lenguaje poderoso que permite crear páginas web interactivas y dinámicas. A través de este tutorial, has aprendido algunos de los aspectos más fundamentales de JavaScript, como las variables, funciones, operadores, y eventos. A medida que vayas avanzando, podrás explorar conceptos más avanzados como promesas, programación asincrónica, clases, y mucho más.

Ahora que tienes una base sólida de JavaScript, puedes comenzar a crear aplicaciones web más complejas y ricas en funcionalidades.

Anterior Siguiente