JavaScript es el lenguaje de programación esencial para crear sitios web interactivos y aplicaciones web dinámicas. Si recién estás comenzando tu viaje en el mundo del desarrollo web, dominar JavaScript será una habilidad invaluable. Para ayudarte en este camino, he preparado una selección de ejemplos básicos de código JavaScript que te guiarán a través de los fundamentos del lenguaje.
Variables en JavaScript
Las variables son contenedores para almacenar datos. En JavaScript, puedes declarar variables con var, let, o const.
let mensaje = 'Hola, mundo!';
console.log(mensaje); // Salida: Hola, mundo!En este código, mensaje es una variable que contiene la cadena de texto 'Hola, mundo!'. Luego utilizamos console.log para imprimir el contenido de la variable en la consola.
Tipos de Datos
JavaScript es un lenguaje de tipado débil, lo que significa que no necesitas declarar el tipo de dato de una variable. Los tipos de datos básicos incluyen:
- String: Cadena de texto.
- Number: Números enteros o de punto flotante.
- Boolean: Valores verdadero (
true) o falso (false). - Object: Colecciones de datos.
- Array: Listas ordenadas de datos.
- undefined: Una variable que no ha sido asignada a un valor.
- null: Un valor nulo o "vacío".
let nombre = 'Nelko'; // String
let edad = 25; // Number
let esDesarrollador = true; // Boolean
let objeto = { nombre: 'Nelko', edad: 25 }; // Object
let lista = ['HTML', 'CSS', 'JavaScript']; // Array
let noDefinido; // undefined
let valorNulo = null; // nullEstructuras de Control
Condicionales
Los condicionales te permiten ejecutar código dependiendo de si una condición es verdadera o falsa.
let edad = 18;
if (edad >= 18) {
console.log('Eres mayor de edad.');
} else {
console.log('No eres mayor de edad.');
}Bucles
Los bucles son útiles cuando quieres ejecutar un bloque de código varias veces.
- for: Ejecuta un bloque de código un número determinado de veces.
for (let i = 0; i < 5; i++) {
console.log('El valor de i es: ' + i);
}- while: Ejecuta un bloque de código mientras una condición especificada es verdadera.
let i = 0;
while (i < 5) {
console.log('El valor de i es: ' + i);
i++;
}Funciones
Las funciones son bloques de código que realizan una tarea específica y puedes reutilizarlas en tu código.
function saludar(nombre) {
return 'Hola, ' + nombre + '!';
}
console.log(saludar('Nelko')); // Salida: Hola, Nelko!Eventos
Los eventos en JavaScript son acciones que pueden ser detectadas por tu script. Por ejemplo, cuando un usuario hace clic en un botón.
<button id="botonSaludo">Saludar</button>document.getElementById('botonSaludo').addEventListener('click', function() {
alert('¡Hola, visitante de nelkodev.com!');
});Esto enlaza un evento de clic al botón con id "botonSaludo" y, cuando se hace clic en él, muestra un mensaje de alerta.
DOM – Modelo de Objetos del Documento
El DOM es una representación del HTML de tu página web. Con JavaScript, puedes manipular el DOM para cambiar el contenido, la estructura y el estilo de tu sitio.
document.getElementById('titulo').innerHTML = '¡Bienvenido a nelkodev.com!';Este código buscará un elemento con el id "titulo" y cambiará su contenido HTML interno.
JSON – JavaScript Object Notation
JSON es un formato de texto para el intercambio de datos. Es fácil de entender para humanos y fácil de analizar para máquinas.
let datosJson = '{"nombre":"Nelko","website":"nelkodev.com"}';
let objeto = JSON.parse(datosJson);
console.log(objeto.nombre); // Salida: Nelko
console.log(objeto.website); // Salida: nelkodev.comPrimero, definimos una cadena de texto en formato JSON. Luego, utilizamos JSON.parse para convertir esa cadena en un objeto JavaScript.
AJAX – Asynchronous JavaScript and XML
AJAX es una técnica que permite actualizar partes de una página web sin necesidad de recargarla completamente, enviando una solicitud asincrónica al servidor.
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "https://api.nelkodev.com/data", true);
xhr.send();Este ejemplo muestra cómo puedes realizar una solicitud GET a un servidor para obtener datos sin recargar la página.
Herramientas de Depuración
Aprender a depurar tu código es tan importante como escribirlo. La mayoría de los navegadores tienen herramientas de desarrollo integradas para ayudarte con esto.
let numeroIncorrecto = '5' + 9; // Aquí hay un error, debería ser una suma de números
console.log(numeroIncorrecto); // Salida: "59"
console.assert(typeof numeroIncorrecto === 'number', 'La variable numeroIncorrecto no es un número');El método console.assert mostrará un mensaje de error en la consola si la condición que le pasas es falsa.
Con estos ejemplos, has dado tus primeros pasos en JavaScript. Para profundizar en estos temas y muchos otros, te invito a visitar nelkodev.com. Y si tienes preguntas o necesitas orientación adicional, no dudes en ponerte en contacto en nelkodev.com/contacto. ¡El camino hacia el dominio de JavaScript es emocionante y estoy aquí para apoyarte en tu aprendizaje!
Spanish 
English