Hasta ahora en mis publicaciones he estado hablado sobre la estructura de una página web (HTML) y cómo hacer que se vea más bonita (CSS), en este post voy a ir un paso más allá y voy a explicar cómo hacer que una página web trabaje con datos y lógica utilizando JavaScript.
Si estás empezando en el mundo del desarrollo web, probablemente hayas oído hablar de este lenguaje. JavaScript es la herramienta mágica que te permite añadir interactividad a tus sitios web, haciendo que tus páginas cobren vida con formularios, conexión con una base de datos, juegos, respuestas a botones y mucho más.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se ejecuta en el navegador del usuario. Esto significa que, a diferencia de lenguajes como Python o Java que se ejecutan en el servidor, JavaScript puede interactuar directamente con el HTML y CSS de tu página para crear efectos dinámicos en tiempo real.
JavaScript también se puede ejecutar en el servidor, pero en este caso me voy a enfocar más en la parte del navegador que es lo que nos interesa para seguir con el camino del desarrollo Front-end.
¿Qué puedes hacer con JavaScript?
Las posibilidades con JavaScript son casi infinitas. Puedes empezar con tareas sencillas como cambiar el contenido de una página al hacer clic en un botón, crear carruseles de imágenes, validar formularios, y progresar hasta crear aplicaciones web complejas, juegos interactivos, animaciones en 2D y gráficos en 3D.
JavaScript es potente y flexible, y a menudo se complementa con varias herramientas y librerías que extienden su funcionalidad básica, como:
APIs del navegador: Te permiten manipular el DOM (Document Object Model), trabajar con gráficos 3D, capturar datos de la cámara web, enviar notificaciones, entre otros.
APIs de terceros: Integrar servicios externos como mapas, redes sociales, y más.
Frameworks y librerías: React, Angular, y Vue.js, que facilitan la creación de aplicaciones web complejas.
En este post voy a empezar desde lo más básico así que hablaré del JavaScript puro o también conocido como JavaScript Vanilla y en futuros posts lo iré complementando con otras APIs y frameworks.
Primeros Pasos con JavaScript
¡Hola Mundo!
Para empezar a trabajar con JavaScript, vamos a crear un sencillo ejemplo de "¡Hola Mundo!". Esto te permitirá ver cómo se integra JavaScript con tu HTML.
Crea un archivo llamado index.html y agrega dentro del <body> un texto dentro de una etiqueta <h1>
<body>
<h1>Texto de ejemplo</h1>
</body>
Si abres el archivo index.html con el navegador verás que aparece el texto "Texto de ejemplo"
Crea un archivo llamado main.js , el nombre del archivo es irrelevante pero tendrás que tenerlo en cuenta para importarlo en tu HTML como hicimos en el post anterior con el CSS.
Abre tu archivo index.html y añade el siguiente código el final del elemento <body> .
<body>
<h1>Texto de ejemplo</h1>
<script src="main.js"></script>
</body>
Esto conecta tu archivo JavaScript con la página HTML.
Escribe el siguiente código en main.js:
const miTitulo = document.querySelector("h1");
miTitulo.textContent = "¡Hola mundo!";
Guarda ambos archivos y abre tu index.html en el navegador. Deberías ver que el título de la página ha cambiado a "¡Hola mundo!".
¡Enhorabuena! 🎉 ya estás utilizando JavaScript en tu página web.
Entendiendo el Código
El código anterior hace lo siguiente:
Colocamos el script al final del documento HTML para asegurarnos de que todo el HTML se cargue antes de que JavaScript intente interactuar con él. Esto es importante ya que el HTML carga de forma progresiva de arriba hacia abajo, por tanto, si nuestro script se ejecuta antes de que el elemento <h1> esté en la página, no encontrará el elemento y nuestro script fallará, a este problema se les conoce como condición de carrera.
Es probable que en este ejemplo básico no lo notes, pero los archivos JavaScript son pesados en comparación con el HTML y el navegador tarda un tiempo en procesarlo y ejecutarlo, por tanto, es recomendable ponerlo al final del HTML o agregarle el atributo defer a la etiqueta script para que no bloquee la carga de la página.
Conceptos Básicos de JavaScript
Variables
Las variables son contenedores para almacenar datos. En JavaScript, puedes declarar variables usando let o const.
const nombre = "Juan";
let edad = 30;
Se utiliza let para definir una variable que su valor puede cambiar y const para variables que su valor es fijo, a estas se les suele llamar también constantes.
Como te he comentado, estas palabras reservadas (let, const) se utilizan para definir una nueva variable o constante, lo que significa que si quiero cambiar el valor de una variable que ya existe no tengo que utilizar esas palabras registradas delante de la variable.
const nombre = "Juan";
let edad = 30;
edad = 31;
En el ejemplo estoy asignando un nuevo valor (31) a la variable edad que ya existe, por tanto, ahora edad tendrá el valor 31.
Tipos de Datos
JavaScript maneja varios tipos de datos, incluyendo:
String (cadenas de texto): "Hola Mundo"
Number (números): 42 o 3.14
Boolean (booleanos): true o false
Array (colección): [1, 2, 3, 4]
Object (objeto): { nombre: "Juan", edad: 30 }
No te preocupes si no entiendes para qué sirven estos datos o cómo se utilizan, en futuras publicaciones te explicaré más en detalle cómo trabajar con cada uno de ellos, pero es necesario mencionarlos para que entiendas que puedes tratar con diferentes tipos de datos.
Volvamos al ejemplo anterior:
const nombre = "Juan";
let edad = 30;
En este caso, la constante nombre sería de tipo string porque el valor que guarda está definido entre comillas ( " ), esto le indica al JavaScript que el valor es de tipo cadena de texto (string).
Por otro lado tenemos la variable edad, esta no está definida entre comillas, y es un número, por tanto, JavaScript entiende que la variable edad es de tipo number.
Al contrario que en otros lenguajes de programación, JavaScript es flexible en cuanto al tipo de dato que guarda una variable, esto quiere decir, que si la edad ahora es de tipo number, puedo convertirla en tipo string simplemente asignándole un valor que sea de ese tipo.
const nombre = "Juan";
let edad = 30;
edad = "30";
En este ejemplo, lo que he hecho ha sido cambiar el valor de la variable edad y le he asignado un valor de tipo string y JavaScript me dejaría hacer ese cambio sin problema. Por tanto, ahora la variable edad sería de tipo string y su valor sería 30.
Si mostramos el valor de la variable edad, no podemos saber si esta es un número o una cadena de texto, por tanto, podríamos pensar que es irrelevante, pero en el código, una variable de tipo string no tiene las mismas propiedades que una variable de tipo number, por lo tanto, es importante que tengamos en cuenta los tipos.
🧠
Dato: Existe una variante del JavaScript llamada TypeScript que no permite que esto suceda. El TypeScript es utilizado por desarrolladores y empresas para evitar que por error cambie el tipo de dato que almacena una variable y el código sea más robusto y predecible.
Operadores
Los operadores permiten realizar operaciones sobre variables y valores. Algunos operadores básicos son:
Suma: +
Resta: -
Multiplicación: *
División: /
Mayor: >
Menor: <
Mayor o igual: >=
Menor o igual: <=
Igual: ===
⚠
¡Cuidado! La operación de comparación se debe hacer con triple signo igual (===), si solo se utiliza un signo (=) significa que quieres asignar un valor, y si utilizas dos == estarás comparando el valor pero no el tipo del valor, por tanto 30 será igual que "30".
Ejemplo:
let suma = 5 + 10;
let concatenacion = "Hola" + " " + "Mundo";
En el código anterior podemos ver dos operaciones de tipo suma que hacen diferentes funciones, la primera, al ser dos números, JavaScript entiende que lo que se quiere hacer es una operación matemática, por tanto, lo que hace es sumar ambos valores y devolver el resultado, que en este caso sería 15 .
Sin embargo, en la segunda operación, al contener al menos un dato de tipo string, JavaScript entiende que lo que se quiere hacer es concatenar (unir) todos los datos, en este ejemplo el texto Hola, un espacio en blanco y el texto Mundo y el resultado sería: Hola Mundo .
Condicionales
Los condicionales permiten ejecutar código basado en una condición.
let edad = 18;
if (edad >= 18) {
console.log("Eres mayor de edad.");
} else {
console.log("Eres menor de edad.");
}
En el código anterior tenemos la variable edad a la que le hemos asignado un valor de tipo number (18), a continuación encontramos una condición if .. else . Esta condición implica que si la variable edad es mayor o igual (>=) a 18 se ejecutará el código del interior del if , en caso de no cumplirse la condición, se ejecutará el código del interior del else.
En el caso del ejemplo, el código que se ejecutaría sería el del interior del if mostrando el valor: Eres mayor de edad.
Funciones
Las funciones encapsulan un bloque de código que puedes reutilizar.
function saludar(nombre) {
return "Hola, " + nombre;
}
console.log(saludar("Mundo"));
En este ejemplo encontramos una función llamada saludar , sabemos que es una función porque delante del nombre tiene la palabra reservada function , existe otra manera de generar funciones pero lo veremos más adelante, de momento vamos a decir que para definir una función se tiene que seguir la siguiente estructura:
function: Es una palabra reservada en JavaScript que indica el inicio de una función.
saludar: Es el nombre que va a tener la función.
(parámetros): Los paréntesis son parte de la función y son obligatorios, estos pueden contener dentro valores llamados parámetros, estos parámetros se deberán pasar al ejecutar la función y su valor se puede utilizar dentro de la función para hacer operaciones.
{ }: Las llaves de apertura y cierre indican el inicio y el final de la función.
return: Palabra reservada en JavaScript para indicar que el valor que viene a continuación será devuelto por la función.
Como puedes ver en el ejemplo del código superior, cuando se ejecuta la función saludar se le pasa un valor dentro de los paréntesis saludar("Mundo") esto indica, que cuando se ejecute la función, el valor del parámetro nombre será un string con el valor "Mundo". Por tanto, el valor devuelto por esta función es "Hola, Mundo".
Función sin parámetros
function nombre() {
return "código a ejecutar";
}
Esta otra función sigue la misma estructura pero no tiene parámetros, por tanto, al ejecutarla no tendremos que pasar ningún valor entre los paréntesis nombre() y el valor que devolverá, siempre será "código a ejecutar".
Las funciones son una parte fundamental de JavaScript y se utilizan para prácticamente todo, en futuros posts te explicaré más sobre las funciones y cómo utilizarlas en cada caso.
Eventos
Los eventos permiten interactuar con el usuario. Por ejemplo, puedes ejecutar código cuando un usuario hace clic en un botón.
const button = document.querySelector("button");
button.onclick = function() {
alert("¡Se ha pulsado el Botón!");
};
Este código crea una constante llamada button y se le asigna un elemento botón que se busca en el HTML con la función document.querySelector que ya hemos visto en el primer ejemplo, a continuación, a la constante botón se le asigna una función sin nombre en su propiedad onclick, de esta manera, cuando un usuario hace click en un botón, se ejecutará esa función.
Como te expliqué en el post del HTML, los elementos tienen atributos, uno de los atributos es onclick, este atributo permite ejecutar un código cuando un usuario realiza la acción de click encima del elemento, en este caso un botón.
¿Por qué esta función no tiene nombre?
Buena pregunta, a las funciones y la variables, se les asigna un nombre para poder referirnos a ellas más adelante en nuestro código, en este caso, como esa función se está asignando con un = al atributo onclick no necesitamos asignarle un nombre ya que, cuando se ejecute el evento click por parte del usuario, se ejecutará inmediatamente la función.
Además, por mucho que a esa función se le pusiera un nombre, no se podría hacer referencia a ella porque está asignada directamente a un atributo y el código no podría acceder a ella, para poder reutilizar una función en el atributo y desde otro lugar de nuestro código se tendría que definir la función a parte.
Por ejemplo así:
const button = document.querySelector("button");
function handleClick() {
alert("¡Se ha pulsado el Botón!");
};
button.onclick = handleClick;
handleClick();
Comentarios
Por último pero no menos importante debes saber que existe una manera de agregar comentarios en JavaScript, estos son texto simple que no se ejecuta, los comentarios te permiten dejar escrito en el código información útil sin que esto afecte al código. Para agregar comentarios en JavaScript se puede hacer utilizando doble barra (//) si el comentario es de una única línea o (/**/) si el comentario es de varias líneas.
A menudo en tutoriales o ejemplo de código, se utilizan estos comentarios para mostrar el valor de una variable o el resultado de una función, por ejemplo como he hecho yo en la función saludar:
function saludar(nombre) {
return "Hola, " + nombre;
}
console.log(saludar("Mundo"));
Práctica: Cambiador de Imágenes
Con lo que te he explicado en el post, te animo a que crees un cambiador de imágenes.
Requisitos:
Un elemento imagen con una imagen por defecto (puedes utilizar una imagen de unsplash).
Un botón con el texto "Cambiar".
Al hacer click en el botón, si la imagen que se muestra es la imagen por defecto, se debe cambiar por otra diferente.
Al hacer click en el botón, si la imagen que se muestra no es la imagen por defecto, se debe cambiar por la imagen por defecto.
Agrega los estilos css que quieras.
Solución
Conclusión
JavaScript es un lenguaje de programación poderoso que te permite añadir interactividad y dinamismo a tus sitios web. En este artículo, te he mostrado los fundamentos básicos y ejemplos prácticos para ayudarte a empezar, en futuras publicaciones te hablaré sobre casos prácticos y te iré mostrando trucos para que tu JavaScript sea mejor.
Entiendo perfectamente que de primeras es mucha información, pero te aseguro que con esta guía podrás seguir sin ningún problema las futuras publicaciones y a medida que vayas utilizando y practicando JavaScript se te irá haciendo más fácil.
Te recomiendo que hagas pruebas con los ejemplos que te he ido mostrando en la publicación. ¡Sigue practicando y explorando, y pronto estarás creando páginas web increíbles! Para aprender más, visita MDN Web Docs sobre JavaScript.
¡Hasta el siguiente post! 👋🏼
