Básico - SuperHispano

JavaScript

¿Alguna vez te has preguntado cómo funcionan las páginas web interactivas y por qué son tan atractivas? Existe un lenguaje de programación que ha revolucionado la web, y su nombre es JavaScript.
En este artículo, descubrirás todo lo que necesitas saber sobre este lenguaje: qué es JavaScript, su historia, su relación con TypeScript y, lo más importante, para qué sirve.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web.
Con JavaScript, los desarrolladores pueden crear sitios web más atractivos y funcionales, ya que permite la manipulación del contenido de la página, la comunicación con el servidor y la realización de cálculos en tiempo real, entre otras cosas.

Diferencias entre HTML, CSS y JavaScript

Para entender mejor qué es JavaScript, es útil diferenciarlo de otros dos lenguajes de programación relacionados con la creación de sitios web: HTML y CSS.

1. HTML (Hypertext Markup Language) es el lenguaje que se utiliza para estructurar el contenido de una página web. Define elementos como encabezados, párrafos, listas y enlaces.
2. CSS (Cascading Style Sheets) se encarga del diseño y estilo de la página web. Permite aplicar colores, fuentes, tamaños y espaciado, entre otros aspectos visuales.
3. JavaScript agrega interactividad y dinamismo a la página web, permitiendo que el usuario interactúe con el contenido y realice acciones sin necesidad de recargar la página.

Historia de JavaScript

JavaScript fue creado en 1995 por Brendan Eich, quien trabajaba en la empresa Netscape Communications. En aquel entonces, se buscaba un lenguaje de programación fácil de aprender y usar que permitiera a los desarrolladores crear páginas web interactivas.
Eich desarrolló el primer prototipo de JavaScript en tan solo 10 días, y su éxito fue tal que pronto se convirtió en un estándar en la industria.
En 1997, JavaScript fue adoptado como un estándar por la organización ECMA International, que publicó la especificación oficial del lenguaje llamada ECMAScript.
Desde entonces, ECMAScript ha pasado por varias versiones y actualizaciones, y JavaScript se ha mantenido como el lenguaje de programación basado en ECMAScript más popular y ampliamente utilizado en todo el mundo.

¿Para qué sirve JavaScript?

JavaScript es fundamental en el desarrollo web y tiene numerosas aplicaciones. Veamos algunas de las más comunes:

Interacción con el usuario

Una de las funciones principales de JavaScript es permitir la interacción entre el usuario y la página web. Esto se logra mediante la manipulación del Document Object Model (DOM), que es una representación estructurada de los elementos de la página.
Con JavaScript, es posible crear elementos interactivos como botones, formularios, menús desplegables y carruseles de imágenes, entre otros.

Validación de formularios

JavaScript es muy útil para validar la información ingresada por el usuario en un formulario antes de enviarla al servidor.
Esto permite detectar errores y solicitar al usuario que corrija la información antes de enviarla, lo que reduce la carga en el servidor y mejora la experiencia del usuario.

Animaciones y efectos visuales

Con JavaScript, es posible crear animaciones y efectos visuales que hacen que las páginas web sean más atractivas y dinámicas.
Por ejemplo, se pueden realizar transiciones suaves entre páginas, crear efectos de parallax scrolling y animar elementos de la página al hacer scroll o al pasar el cursor por encima.

Comunicación con el servidor

JavaScript permite la comunicación entre el navegador y el servidor sin necesidad de recargar la página. Esto se logra mediante el uso de AJAX (Asynchronous JavaScript and XML), que permite enviar y recibir información en segundo plano.
Esto es especialmente útil en aplicaciones web como redes sociales, correo electrónico y sistemas de gestión de contenidos.

Aplicaciones web de una sola página (SPA)

Una de las tendencias en el desarrollo web es la creación de aplicaciones web de una sola página o SPA (Single Page Application). Estas aplicaciones cargan una única página HTML y luego utilizan JavaScript para actualizar dinámicamente el contenido según las acciones del usuario.
Esto permite una experiencia de navegación más rápida y fluida, similar a la de una aplicación de escritorio.

¿Qué es TypeScript?

TypeScript es un lenguaje de programación que fue creado por Microsoft en 2012. Es un superset de JavaScript, lo que significa que incluye todas las características de JavaScript y algunas adicionales, como la posibilidad de usar tipado estático.
El tipado estático permite a los desarrolladores definir el tipo de datos que una variable puede almacenar, lo que ayuda a detectar errores antes de que el código se ejecute.
Aunque TypeScript no es tan conocido como JavaScript, su popularidad ha ido en aumento debido a que ofrece algunas ventajas en cuanto a la detección temprana de errores y la facilidad de mantenimiento del código.
Sin embargo, es importante mencionar que TypeScript no reemplaza a JavaScript, sino que complementa sus características y permite a los desarrolladores escribir código más seguro y eficiente.

Empezando con JavaScript

Ahora que conoces qué es JavaScript y para qué sirve, es momento de aprender cómo utilizarlo. Para ello, sigue estos pasos:

1. Añade JavaScript a tu página web

Para agregar JavaScript a tu página, debes incluir el siguiente código en tu archivo HTML:

<script>
// Aquí va tu código JavaScript
</script>

Puedes colocar este código en cualquier parte de tu archivo HTML, aunque generalmente se coloca al final del cuerpo (<body>).

2. Variables y tipos de datos

En JavaScript, podemos almacenar información en variables. Para crear una variable, utilizamos la palabra clave var, let o const, seguida del nombre de la variable y su valor.

Por ejemplo:
var nombre = "Juan";
let edad = 25;
const pi = 3.141592;

Existen varios tipos de datos en JavaScript, como números, cadenas de texto (strings), objetos y más.
A continuación, algunos ejemplos:

Números: var numero = 42;
Strings: var texto = "¡Hola, mundo!";
Objetos: var persona = {nombre: "Juan", edad: 25};
Arrays: var colores = ["rojo", "verde", "azul"];

3. Operadores y expresiones

Los operadores nos permiten realizar operaciones matemáticas, comparaciones y asignaciones en JavaScript.
Algunos ejemplos de operadores son:

Aritméticos: +, -, *, /, %
Comparación: ==, ===, !=, !==, <, >, <=, =>
Asignación: =, +=, -=, *=, /=, %=

Las expresiones son combinaciones de valores, variables y operadores que JavaScript evalúa para obtener un resultado.

Ejemplo:
var resultado = (10 + 5) * 2;
// resultado será 30

4. Funciones

Las funciones son bloques de código que podemos llamar múltiples veces para realizar una tarea específica. Para crear una función en JavaScript, utilizamos la palabra clave function, seguida del nombre de la función, los parámetros y el cuerpo de la función.

Por ejemplo:

function saludar(nombre) {
console.log("¡Hola, " + nombre + "!");
}
saludar("Juan");
// Imprime "¡Hola, Juan!"

5. Condicionales y bucles

Los condicionales nos permiten ejecutar diferentes bloques de código dependiendo de ciertas condiciones.

Por ejemplo, con la estructura if...else:

if (edad >= 18) {
console.log("Eres mayor de edad");
}
else {
console.log("Eres menor de edad");
}

Los bucles nos permiten repetir un bloque de código mientras se cumpla una condición.

Por ejemplo, el bucle for:

for (var i = 0; i < 5; i++) {
console.log(i);
// Imprime los números del 0 al 4
}

6. Eventos y manipulación del DOM

El DOM (Document Object Model) es la representación en árbol de los elementos de una página web. Con JavaScript, podemos manipular el DOM para cambiar el contenido, los atributos y los estilos de los elementos. Por ejemplo, podemos cambiar el contenido de un elemento con el siguiente código:

document.getElementById("miElemento").innerHTML = "Nuevo contenido";

Los eventos son acciones que ocurren en la página, como hacer clic en un botón o cargar una imagen. Podemos utilizar JavaScript para “escuchar” estos eventos y ejecutar funciones cuando ocurran.

Ejemplo:

document.getElementById("miBoton").addEventListener("click", function () {
console.log("¡Botón presionado!");
});

Conclusión

JavaScript es un lenguaje de programación esencial en el mundo del desarrollo web. Ha revolucionado la forma en que creamos y experimentamos las páginas web, permitiendo interactividad, validación de formularios, animaciones y comunicación con el servidor sin recargar la página.
Ahora que conoces qué es JavaScript, su historia, su relación con TypeScript y para qué sirve, estás listo para adentrarte en el mundo del desarrollo web y crear sitios web interactivos y atractivos.

¡Hola, mundo!, en JavaScript

El “Hola Mundo” en JavaScript es un programa básico que imprime el mensaje “Hola Mundo” en la consola de JavaScript. Es un buen ejemplo para empezar a aprender a programar en JavaScript.
Para crear un “Hola Mundo” en JavaScript, se usa la función console.log("Hola Mundo"). Este código puede ser ejecutado en la consola de JavaScript de un navegador o en cualquier entorno de desarrollo de JavaScript.
También se puede incluir en un archivo HTML5 para mostrar el resultado en la consola de JavaScript.

Cómo hacer un hola mundo en JavaScript

Aquí hay un ejemplo de código para hacer un “Hola Mundo” en JavaScript:

console.log("Hola Mundo");

Este código usa la función console.log() para imprimir el mensaje “Hola Mundo” en la consola de JavaScript.

Otro ejemplo
Aquí hay otro ejemplo con HTML5 y JavaScript para hacer “Hola Mundo”:

<!DOCTYPE html>
<html>
<head> <title>¡Hola, mundo!, en HTML 5 con JavaScript</title>
</head>
<body>
<script>
console.log("Hola mi mundo");
</script>
</body>
</html>

Este código crea un documento HTML5 básico y dentro del elemento <body> incluye un script que usa la función console.log() para imprimir el mensaje “Hola Mundo” en la consola de JavaScript.

Salida de datos en JavaScript

En JavaScript, la salida de datos es el proceso de mostrar resultados o mensajes al usuario. Hay varias formas de hacer esto en JavaScript, incluyendo console.log(), document.write(), alert(), window.prompt() e innerHTML.
console.log() es una función que permite imprimir mensajes en la consola de JavaScript, que se puede acceder a través del navegador o cualquier entorno de desarrollo. Esta función es útil para depurar y verificar el resultado de código en tiempo real.
document.write() es una función que permite escribir HTML en un documento. Es importante tener en cuenta que document.write() solo debe usarse antes de que la página se haya completado de cargar, ya que puede sobrescribir el contenido existente.
alert() es una función que muestra un cuadro de diálogo con un mensaje. Esta función es útil para notificar al usuario de algo importante o para confirmar una acción.
window.prompt() es una función que permite al usuario ingresar datos a través de un cuadro de diálogo. Esta función es útil para solicitar información del usuario.
innerHTML es un atributo que permite modificar el contenido HTML de un elemento específico en un documento. Es útil para actualizar dinámicamente el contenido de una página sin necesidad de recargarla completamente.

console.log() en JavaScript

console.log() es una función en JavaScript que permite imprimir mensajes y valores en la consola de JavaScript. La consola de JavaScript se puede acceder a través del navegador o cualquier entorno de desarrollo, y es útil para depurar y verificar el resultado de código en tiempo real.

Ejemplo de uso:

console.log('Hola mundo');

console.log() es una función muy flexible, ya que permite imprimir no solo cadenas de texto, sino también variables, objetos, matrices, y otros tipos de datos. También se pueden concatenar varios argumentos y mostrarlos en la misma línea en la consola.

Ejemplo:

var nombre = 'Juan';
console.log('Hola', nombre);

Tipos de console JavaScript

JavaScript proporciona varios tipos de métodos de consola que permiten a los desarrolladores verificar y depurar su código. Aquí están algunos de los tipos más comunes:

console.log(): Este método permite imprimir mensajes y valores en la consola. Es el método más comúnmente utilizado para imprimir información durante el desarrollo y depuración de código.

console.log("Hola mundo");

console.error(): Este método se utiliza para imprimir mensajes de error en la consola. La información impresa con console.error() se muestra en rojo.

console.error("Este es un mensaje de error");

console.warn(): Este método se utiliza para imprimir mensajes de advertencia en la consola. La información impresa con console.warn() se muestra en amarillo.

console.warn("Este es un mensaje de advertencia");

console.info(): Este método se utiliza para imprimir información en la consola. La información impresa con console.info() se muestra en azul.

console.info("Este es un mensaje de información");

console.debug(): Este método se utiliza para imprimir mensajes de depuración en la consola. La información impresa con console.debug() suele ser menos relevante para el usuario final y se utiliza principalmente para depurar el código.

console.debug("Este es un mensaje de depuración");

console.table(): Este método permite imprimir datos en formato de tabla en la consola. Es útil para imprimir información sobre objetos o matrices complejas.

var datos = [
{nombre: "Juan", edad: 30},
{nombre: "María", edad: 25}
];
console.table(datos);

console.clear(): Es un método de la consola de JavaScript que se utiliza para limpiar la consola. Al llamar a este método, todos los mensajes previos y los resultados de los comandos en la consola se eliminarán, y la consola quedará en blanco.

console.log("Mensaje 1");
console.log("Mensaje 2");
console.clear();

Cada uno de estos tipos de métodos de consola proporciona una manera diferente de imprimir información en la consola, y pueden ser útiles para diferenciar entre diferentes tipos de mensajes y para hacer más fácil la lectura de la información impresa en la consola.

document.write() en JavaScript

document.write() es una función en JavaScript que permite escribir contenido en un documento HTML. Esta función se utiliza para generar dinámicamente contenido en una página web.
Sin embargo, su uso se desaconseja debido a que puede causar problemas en la experiencia del usuario y en la estructura del documento HTML.

Ejemplo de uso:

document.write('Hola mundo');

Al ejecutar este código, el contenido “Hola mundo” se escribirá en la página web en el punto donde se encuentre el código JavaScript. Si se ejecuta después de que la página web se haya cargado, puede reemplazar completamente el contenido existente en la página web.

En lugar de document.write(), se recomienda utilizar otros métodos de JavaScript para modificar el contenido de una página web, como innerHTML, textContent, o la manipulación de elementos HTML con el objeto Document.alert() en JavaScript

alert() o window.alert() es una función de JavaScript que muestra un cuadro de diálogo emergente con un mensaje para el usuario. Este cuadro de diálogo tiene un botón “OK” que el usuario puede hacer clic para cerrar el cuadro de diálogo. alert() se utiliza a menudo para notificar al usuario sobre algún evento o para solicitar información.

Aquí hay un ejemplo de código que muestra un cuadro de diálogo emergente con el mensaje “Hola mundo”:

alert("Hola mundo");

El cuadro de diálogo emergente se mostrará hasta que el usuario haga clic en el botón “OK”. Mientras tanto, el resto del código JavaScript no se ejecutará hasta que el usuario cierre el cuadro de diálogo.

window.prompt() en JavaScript

window.prompt() es una función de JavaScript que muestra un cuadro de diálogo emergente que permite al usuario ingresar una cadena de texto. Este cuadro de diálogo tiene un botón “OK” y un botón “Cancelar”, que el usuario puede hacer clic para aceptar o cancelar la entrada de texto.

La función window.prompt() devuelve el texto ingresado por el usuario o null si el usuario hace clic en el botón “Cancelar”.

Aquí hay un ejemplo de código que muestra un cuadro de diálogo emergente que pide al usuario su nombre:

let nombre = window.prompt("Por favor ingresa tu nombre");
if (nombre) {
console.log("Bienvenido, " + nombre);
}
else {
console.log("El usuario canceló la entrada");
}

El cuadro de diálogo emergente se mostrará hasta que el usuario haga clic en el botón “OK” o “Cancelar”. La función window.prompt() devolverá el texto ingresado por el usuario o null si el usuario hace clic en el botón “Cancelar”.
En este caso, se verifica si el valor devuelto es diferente de null y se muestra un mensaje de bienvenida en la consola, de lo contrario, se muestra un mensaje en la consola indicando que el usuario canceló la entrada.

innerHTML en JavaScript

innerHTML es una propiedad de JavaScript que se usa para obtener o establecer el contenido HTML de un elemento. Con innerHTML, puedes leer o modificar el contenido HTML de un elemento en tu página web.
Aquí hay un ejemplo de código que muestra cómo modificar el contenido HTML de un elemento con la propiedad innerHTML:

let element = document.getElementById("miElemento");
element.innerHTML = "Nuevo contenido HTML";

En este ejemplo, se utiliza document.getElementById para obtener un elemento con un ID específico y luego se usa la propiedad innerHTML para establecer su contenido HTML a “Nuevo contenido HTML”.
También puedes leer el contenido HTML de un elemento con innerHTML:

let element = document.getElementById("miElemento");
let contenidoHTML = element.innerHTML; console.log(contenidoHTML);

En este ejemplo, se usa document.getElementById para obtener un elemento con un ID específico y luego se usa la propiedad innerHTML para obtener su contenido HTML y almacenarlo en una variable llamada contenidoHTML. Finalmente, se muestra el contenido HTML en la consola con console.log.

Comentarios en JavaScript

Los comentarios en JavaScript son líneas de texto que son ignoradas por el intérprete de JavaScript y no tienen ningún efecto en el comportamiento de una página web. Los comentarios se usan para documentar el código y hacerlo más legible y fácil de entender para otros desarrolladores.

Tabla de contenidos
Tipos de comentarios en JavaScript
Más ejemplos

Tipos de comentarios en JavaScript
Hay dos tipos de comentarios en JavaScript:
Comentarios de una línea: Son aquellos que se inician con dos barras (//) y finalizan con un salto de línea.
Por ejemplo:
// Este es un comentario de una línea en JavaScript
Comentarios de múltiples líneas: Son aquellos que se comienzan con una barra y asterisco (/*) y finalizan con un asterisco y barra (*/).

Por ejemplo:
/* Este es un comentario de múltiples líneas en JavaScript */
Estos dos tipos de comentarios permiten a los programadores documentar su código y hacerlo más legible y fácil de entender para otros desarrolladores.
Es importante que los comentarios sean claros, concisos y relevantes al código que describen. Esto ayuda a los otros desarrolladores a comprender mejor tu código y a mantenerlo más fácilmente.

Más ejemplos
Aquí te muestro algunos ejemplos de se agrega comentarios en JavaScript:
// Este es un comentario de una línea /* Este es un comentario de varias líneas */
Los comentarios pueden ser útiles para describir el propósito de una línea de código JavaScript específica.
var x = 10; // Esta variable almacena un número
También los comentarios pueden ser utilizados para desactivar código JavaScript temporalmente.
// alert("Hola mundo");
A veces es útil incluir información adicional sobre el autor y la fecha en los comentarios.
// Autor: Juan Perez // Fecha: 30 de Enero, 2023