¿Qué es JavaScript?
En la era digital actual, JavaScript se ha convertido en un lenguaje esencial para el desarrollo web, permitiendo crear páginas dinámicas e interactivas. Desde su creación en 1995 por Brendan Eich, JavaScript ha evolucionado hasta ser fundamental para la experiencia del usuario en la web. A diferencia de HTML y CSS, que se encargan de la estructura y el estilo de una página, JavaScript permite interactuar con los elementos, responder a eventos y actualizar el contenido en tiempo real. Este artículo te introducirá a las nociones básicas de JavaScript
Prerrequisitos: Conocimientos básicos en HTML (), conocimientos básicos en CSS ().
JavaScript es un lenguaje de programación que permite añadir funcionalidades interactivas a las páginas y aplicaciones web. Mientras HTML y CSS se encargan de dar estructura y estilos estáticos, JavaScript se encarga de hacer que la página sea dinámica.
Sintaxis Básica
Variables:
En JavaScript, las variables se utilizan para almacenar datos que pueden ser utilizados y manipulados a lo largo del código. Existen tres palabras clave para declarar variables: var
, let
y const
. var
se usa para declarar variables con un alcance global o de función, mientras que let
y const
permiten declarar variables con un alcance de bloque, siendo const
para variables cuyo valor no cambiará. Por ejemplo:var nombre = "Juan";
let edad = 25;
const PI = 3.14159;
Operadores:
Los operadores en JavaScript se utilizan para realizar operaciones sobre variables y valores. Los operadores aritméticos básicos incluyen +
(suma), -
(resta), *
(multiplicación) y /
(división). Además, existen operadores de comparación como ==
(igual a), !=
(diferente de), >
(mayor que) y <
(menor que). También se utilizan operadores lógicos como &&
(y), ||
(o) y !
(no). Acá hay un ejemplo:let suma = 10 + 5;
let esMayor = 10 > 5; // true
let esAdulto = (edad >= 18) && (edad < 65); // true si edad está entre 18 y 64
Estructuras de control:
Las estructuras de control permiten dirigir el flujo de la ejecución del código. Las más comunes son las declaraciones if
, else if
, else
y los bucles for
y while
. La declaración if
evalúa una condición y ejecuta el bloque de código correspondiente si la condición es verdadera. Los bucles permiten repetir un bloque de código varias veces. Por ejemplo:if (edad >= 18) {
console.log("Es adulto");
} else {
console.log("Es menor de edad");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
Funciones:
Las funciones son bloques de código reutilizables que realizan una tarea específica. Se pueden declarar usando la palabra clave function
, seguida de un nombre, parámetros y un cuerpo de función. Las funciones pueden devolver un valor usando la palabra clave return
. Acá hay un ejemplo:function saludar(nombre) {
return "Hola, " + nombre;
}
console.log(saludar("Juan")); // "Hola, Juan"
Incluir JavaScript en HTML
JavaScript Interno
La manera más directa de añadir JavaScript a una página web es mediante la incrustación del código dentro de una etiqueta <script> en el documento HTML. Este método es útil para scripts pequeños y específicos de la página. El código JavaScript puede ser colocado dentro del <head> o del <body> del documento. Aquí hay un ejemplo básico:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script>
function saludar() {
alert("¡Hola, Mundo!");
}
</script>
</head>
<body>
<button onclick="saludar()">Haz clic aquí</button>
</body>
</html>
JavaScript Externo
Para tener un código mas organizado es recomendable crear un nuevo archivo que contenga todo el código de JavaScript y luego llamarlo desde el documento HTML. Por ejemplo creo un archivo de nombre main.js que tendría lo siguiente:
function saludar() {
alert("¡Hola, Mundo!");
}
Y en mi documento HTML llamo al archivo main.js usando la etiqueta <script>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
<script src="main.js"></script>
</head>
<body>
<button onclick="saludar()">Haz clic aquí</button>
</body>
</html>
Un detalle importante a tener en cuenta a la hora de usar JavaScript es donde ubicar la etiqueta. Todos los documentos de HTML se cargan según el orden en el que están ubicados con lo cual lo ideal para mantener una pagina web mas rápida es usar la etiqueta <script> al final del <body> ya que esto garantiza que se cargue antes el HTML y una vez cargado el HTML se comience a cargar el JavaScript. De esta manera el usuario que este navegando en tu página o aplicación web tendrá que esperar menos tiempo para comenzar a usarla.