ES
RU
EN
ZH
FR
DE
PT
AR
HI
Instalación y primer programa Hello World — JavaScript
¿Qué es y para qué sirve?
Imagina que le das órdenes a un robot. Le dices: "Robot, enciende la luz", y él la enciende. Pero para que el robot entienda, necesitas hablarle en un lenguaje especial. Lo mismo sucede con la computadora: para que haga algo, debes darle una orden en un lenguaje de programación.
JavaScript (abreviado JS) es uno de esos lenguajes. Es muy popular porque con él se pueden "animar" las páginas web. Cuando entras a un sitio y ves que una imagen se agranda al pasar el mouse, o que aparece un menú, o que surgen ventanas emergentes — probablemente está hecho con JavaScript.
Hagamos una analogía. Imagina que eres un profesor de educación física. Les dices a los alumnos: "¡Clase, de pie!", "¡Levanten la mano derecha!", "¡Den un paso adelante!". Si dices "Levántense" en chino, nadie te entenderá. Se necesita un lenguaje comprensible. JavaScript es justamente ese lenguaje comprensible para el navegador (el programa con el que ves sitios web, como Chrome, Firefox, Safari).
¿Por qué aprender JavaScript?
- Está en todas partes: casi todos los sitios web usan JavaScript.
- Es visual: ves inmediatamente el resultado de tus acciones.
- Es fácil para empezar: para escribir tu primer programa no necesitas instalar programas complicados — basta con un bloc de notas y un navegador.
- Es demandado: los programadores que saben JavaScript son muy necesarios para las empresas.
En este artículo aprenderemos a instalar las "herramientas" para trabajar con JavaScript y escribiremos nuestro primer programa — "Hello, World!". Es una tradición de todos los programadores: el primer programa siempre muestra este saludo. Considérelo como el "primer paso" en el mundo de la programación.
Si ya conoces Python: En Python escribías print("Hello, World!"). En JavaScript se verá un poco diferente, pero el significado es el mismo: mostrar texto en la pantalla.
Ejemplos de código con explicación
Antes de escribir código, preparemos el "lugar de trabajo". Necesitarás dos cosas:
- Un navegador (Chrome, Firefox, Edge, Safari — cualquiera sirve).
- Un editor de texto — un programa donde escribirás el código. La opción más simple es el "Bloc de notas" (Windows) o "TextEdit" (Mac) en modo de texto plano. Pero es mejor descargar un editor especial, como VS Code (Visual Studio Code) — es gratuito y muy cómodo.
¿Cómo verificar que todo funciona? Hay dos formas de ejecutar JavaScript:
- Directamente en el navegador (consola): Presiona F12 (o Ctrl+Shift+I) en el teclado, abre la pestaña "Console" (Consola) y escribe el código allí. Es rápido, pero incómodo para programas grandes.
- A través de un archivo HTML: Crearemos un archivo con extensión
.html, dentro del cual estará nuestro código JavaScript. Esta es la forma correcta.
Empecemos con la segunda forma. Crea una nueva carpeta en tu computadora, nómbrala, por ejemplo, "JS_lecciones". Dentro, crea un archivo con el nombre index.html (es importante que la extensión sea .html, no .txt). Abre este archivo en el editor de texto.
Inserta en él la siguiente plantilla básica:
Mi primer programa
Ahora guarda el archivo y ábrelo en el navegador (simplemente haz doble clic en él). Verás una página vacía. Por ahora no ha pasado nada, porque no hemos escrito código. ¡Vamos a solucionarlo!
Ejemplo 1: El clásico "Hello, World!"
La forma más simple de mostrar texto es usar el comando alert(). Muestra una ventana emergente con un mensaje. Inserta el siguiente código entre las etiquetas <script> y </script>:
// Esto es un comentario. La computadora lo ignora.
// Sirve para explicar el código a las personas.
// alert() es una función incorporada (como un comando).
// Muestra una ventana con un mensaje.
alert('¡Hola, mundo!'); // El texto que queremos mostrar se escribe entre comillas.
¿Qué ocurrirá? Cuando abras (o actualices) la página, aparecerá una ventana con el texto "¡Hola, mundo!". Para cerrarla, debes presionar "OK".
Análisis:
alert— es el nombre del comando. Le dice al navegador: "Muestra una ventana".- Los paréntesis
()— dentro de ellos pasamos lo que queremos decir. En este caso, el texto. - Las comillas
' '— son necesarias para que la computadora entienda que esto es texto y no un comando. También se pueden usar comillas dobles" ". - El punto y coma
;— es como un punto al final de una oración. Indica: "El comando ha terminado". Debe colocarse después de cada comando.
Comparación con Python: En Python habrías escrito print("Hello, World!"). La diferencia es que print muestra el texto en la consola, mientras que alert lo muestra en una ventana emergente.
Ejemplo 2: Salida en la consola del desarrollador
Las ventanas emergentes no son muy cómodas si necesitas mostrar mucha información. Los programadores usan más a menudo la consola — un lugar especial para la depuración. Para mostrar texto allí, se usa el comando console.log().
Reemplaza el código anterior dentro de <script> por este:
// console es un objeto (una estructura compleja) que se encarga de la consola.
// .log() es un método (una acción) que escribe un mensaje en la consola.
console.log('¡Este es un mensaje en la consola!');
console.log('Se puede mostrar un número:', 42);
console.log('Se puede mostrar un