Clase 6: Introducción a JavaScript

Lenguaje de programación, sintaxis básica, variables y primeras salidas en pantalla

"HTML estructura, CSS presenta y JavaScript agrega lógica e interacción"

Introducción Lenguaje Sintaxis Variables Salida de datos Enlace en HTML

1) Introducción a JavaScript

JavaScript es el lenguaje de programación que permite agregar lógica, interacción y comportamiento dinámico a una página web.

Con JavaScript podemos responder a acciones del usuario, validar formularios, cambiar contenido, mostrar mensajes, controlar animaciones y crear experiencias más vivas dentro del navegador.

HTML

Define la estructura y el contenido: títulos, párrafos, listas, imágenes, enlaces y secciones.

CSS

Se encarga de la presentación visual: colores, tipografía, bordes, márgenes y distribución.

JavaScript

Agrega comportamiento: decisiones, cálculos, eventos, cambios dinámicos y respuestas al usuario.

Idea para recordar: HTML y CSS ayudan a mostrar la página, pero JavaScript permite que la página haga cosas.

2) JavaScript como lenguaje de programación

JavaScript sí es un lenguaje de programación, a diferencia de HTML y CSS, que no se consideran lenguajes de programación.

HTML es un lenguaje de marcado, porque organiza el contenido con etiquetas. CSS es un lenguaje de estilos, porque define cómo se ve ese contenido. JavaScript, en cambio, puede guardar datos, tomar decisiones, repetir acciones y ejecutar instrucciones.

Tecnología Tipo Función principal
HTML Lenguaje de marcado Estructura y contenido
CSS Lenguaje de estilos Presentación visual
JavaScript Lenguaje de programación Lógica e interactividad
Un lenguaje de programación permite escribir instrucciones que una computadora puede seguir para realizar tareas. JavaScript hace justamente eso dentro de la página web.

Lenguajes interpretados y compilados

De forma sencilla, un lenguaje interpretado es aquel que se ejecuta paso a paso al momento de usarse, mientras que un lenguaje compilado primero se traduce completo a un formato que la computadora pueda entender antes de ejecutarse.

Interpretado

Se lee y se ejecuta casi al mismo tiempo. JavaScript funciona así en el navegador, lo que facilita probar cambios rápidamente.

Compilado

El código se traduce antes de ejecutarse. Esto suele ayudar al rendimiento y a detectar errores en etapas previas.

Explicación simple

Interpretado: el navegador va leyendo el código. Compilado: el programa se convierte antes en algo más cercano a lo que entiende la máquina.

3) Sintaxis básica de JavaScript

La sintaxis es el conjunto de reglas que debemos seguir para escribir código correcto. Si la sintaxis está mal, el programa puede fallar o no ejecutarse.

JavaScript usa instrucciones como declaraciones de variables, funciones, condiciones, ciclos y llamadas a métodos. Cada línea puede terminar con punto y coma, aunque en muchos casos JavaScript puede inferirlo.

Ejemplo simple

console.log("Hola, mundo");

Esta instrucción escribe un mensaje en la consola del navegador. Es una forma básica de comprobar que el código está funcionando.

Elementos comunes de la sintaxis

Elemento Uso Ejemplo
Paréntesis Se usan en llamadas a funciones y expresiones. alert("Hola")
Llaves Marcan bloques de código. { ... }
Comillas Delimitan textos o cadenas de caracteres. "Curso"
Operadores Permiten sumar, comparar o asignar valores. =, +, ===
Ejemplo de lectura:
let edad = 18; significa: crea una variable llamada edad y guarda el valor 18.

4) Variables, let y const

Una variable es un espacio donde guardamos un dato para usarlo después. En JavaScript moderno se recomienda usar let y const.

let

Se usa cuando el valor puede cambiar más adelante. Es ideal para variables que se actualizan.

const

Se usa cuando el valor no debe reasignarse. Es una buena opción para constantes y datos fijos.

var

Hoy casi no se usa. Fue la forma antigua de declarar variables, pero tiene comportamientos menos claros y puede causar errores difíciles de detectar.

¿Por qué no se usa var?

En JavaScript moderno, la práctica recomendada es usar const por defecto y cambiar a let solo cuando el valor necesite modificarse.

Ejemplos de declaración

let nombre = "Ana"; let edad = 20; let aprobado = true; const pais = "El Salvador"; const pi = 3.1416;

En estos ejemplos, nombre, edad y aprobado pueden cambiar si lo necesitas. En cambio, pais y pi se declaran como constantes.

Tipado débil

JavaScript tiene tipado débil, lo que significa que puede convertir valores entre tipos automáticamente en algunos casos.

let resultado = "5" + 2; // "52" let suma = 5 + 2; // 7

En el primer caso, JavaScript convierte el número a texto para unirlo con la cadena. Por eso decimos que su tipado es flexible, pero también requiere cuidado.

Tipo de dato no significa lo mismo que valor: una variable puede contener texto, números, booleanos, arreglos, objetos y más.

TypeScript

TypeScript es una tecnología relacionada con JavaScript que agrega tipos y otras herramientas para ayudar a escribir código más organizado. Luego ese código se transforma a JavaScript para poder ejecutarse en el navegador.

Añade tipos y herramientas para hacer el código más organizado y fácil de mantener.

5) Impresión y salida de datos

Existen dos formas muy comunes (y básicas) de mostrar información son console.log y alert.

console.log()

Muestra datos en la consola del navegador. Es muy útil para depurar, revisar valores y probar el código sin mostrar mensajes al usuario.

alert()

Muestra una ventana emergente con un mensaje. Sirve para ejemplos simples, aunque en proyectos reales se usa con moderación. En producción, suelen preferirse otras formas de mostrar información al usuario, como modales o notificaciones dentro de la página.

Ejemplos de uso

console.log("Hola desde la consola"); console.log(10 + 5); console.log("Nombre:", nombre); alert("Bienvenido a JavaScript"); alert("Tu edad es " + edad);
Función ¿Dónde se ve? Uso recomendado
console.log() Consola del navegador Depuración y pruebas
alert() Ventana emergente Mensajes simples o demostraciones
Si algo no funciona, abre las herramientas del navegador y revisa la consola. Ahí suelen aparecer mensajes de error útiles para encontrar el problema.

6) Cómo enlazar JavaScript en una página HTML

JavaScript debe estar dentro de una página HTML para poder interactuar con sus elementos. Hay dos formas comunes de enlazarlo: con código interno o con un archivo externo.

Opción 1: script interno

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ejemplo</title> </head> <body> <h1>Mi página</h1> <script> console.log("Hola desde el HTML"); </script> </body> </html>

Opción 2: archivo externo

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ejemplo</title> </head> <body> <h1>Mi página</h1> <script src="js/script.js"></script> </body> </html>
Recomendación práctica: coloca el archivo <script> al final del <body> o usa defer en el <head> para que el HTML cargue primero.

Ejemplo con defer

<head> <script src="js/script.js" defer></script> </head>
Importante: JavaScript no reemplaza a HTML. Necesita una página HTML para trabajar, porque ahí están los elementos que puede leer, modificar o controlar.

JavaScript no es Java

Aunque sus nombres se parecen, JavaScript no es Java. Son lenguajes distintos, con objetivos y ecosistemas diferentes.

7) Resumen

JavaScript

Es un lenguaje de programación que añade lógica e interactividad.

let y const

Son las formas modernas recomendadas para declarar variables.

console.log y alert

Son dos formas básicas de mostrar información durante el aprendizaje.

Enlace en HTML

JavaScript debe cargarse dentro de una página HTML, idealmente con defer o al final del cuerpo.

8) Cuestionario de retroalimentación

Pregunta 1: ¿Qué lenguaje agrega lógica e interactividad a una página web?

Pregunta 2: ¿Cuál es la forma recomendada de declarar una variable que puede cambiar?

Pregunta 3: ¿Qué hace console.log()?

Pregunta 4: ¿Cuál es una ventaja de usar const?

Pregunta 5: ¿Qué función muestra una ventana emergente con un mensaje?

Pregunta 6: ¿Por qué no se recomienda usar var?

Pregunta 7: ¿Qué significa que JavaScript tiene tipado débil?

Pregunta 8: ¿Dónde debe estar JavaScript para funcionar dentro de una página web?