FULL STACK · BT INFORMÁTICA 2026
JavaScript
Clase 1 — Variables, DOM y eventos
variables DOM eventos funciones
JavaScript — Clase 1 · Full Stack · BT Informática 2026
¿Qué hace JavaScript?
HTML construye la página. CSS la estiliza. JS la hace interactiva.
Es el esqueleto. Define qué elementos existen en la página.
HTML → Estructura
<button>Enviar</button>
Es la apariencia. Define cómo se ven esos elementos.
CSS → Apariencia
button { background: blue; }
Es el comportamiento. Define qué pasa cuando el usuario
interactúa.
JavaScript → Comportamiento
[Link](...)
JavaScript — Clase 1 · Full Stack · BT Informática 2026
¿Dónde va el JavaScript?
Igual que el CSS, JS puede ir en el HTML o en un archivo separado. La forma correcta es en un archivo .js separado.
❌ Inline — no hagas esto ✓ Archivo separado
●●● ●●●
<button onclick="alert('hola')"> // [Link]
Click <script src="[Link]"></script>
</button> // [Link]
const btn =
[Link]("button");
Regla: el script siempre al final del body, antes del cierre </body>. Así el HTML carga primero y el JS puede encontrar los elementos.
●●●
<!-- al final del body -->
<script src="[Link]"></script>
</body>
Variables — guardar información
Una variable es un contenedor con nombre. Guardás un valor ahí y lo usás después.
const let
Valor que no cambia. Usalo por defecto. Valor que puede cambiar.
●●● ●●●
const nombre = 'Ana'; let contador = 0;
const edad = 25; contador = contador + 1;
const activo = true; let mensaje = '';
Tipos de datos:
String — texto entre Boolean — verdadero o
'texto' comillas
42 Number — número true/false falso
Funciones — código reutilizable
Una función es un bloque de código con nombre. Lo definís una vez y lo llamás cuando lo necesitás.
●●● ●●●
// Definir la función // Función con parámetros
function saludar() { function saludar(nombre) {
[Link]('Hola!'); [Link]('Hola, ' + nombre);
} }
// Llamar la función
saludar('Ana'); // Hola, Ana
saludar();
saludar('Juan'); // Hola, Juan
Definir la función no la ejecuta — solo le da un nombre al código.
Para que se ejecute hay que llamarla: saludar() con los paréntesis.
Los parámetros son variables locales que reciben valores al llamar la función.
El DOM — acceder a los elementos de la página
DOM = Document Object Model. Es la representación de la página como objetos que JS puede leer y modificar.
Cómo seleccionar elementos:
[Link]('.clase')
Selecciona el primer elemento que coincide con el selector CSS. Es el más usado.
[Link]('id')
Selecciona un elemento por su id. Más rápido, pero solo funciona con ids.
[Link]('.clase')
Selecciona TODOS los elementos que coinciden. Devuelve una lista.
●●●
const titulo = [Link]('h1');
const boton = [Link]('btn-enviar');
Modificar el DOM — cambiar la página desde JS
Una vez que tenés el elemento seleccionado podés cambiar su contenido, sus clases, su estilo y más.
[Link] [Link]
Cambia el texto del elemento. No interpreta HTML. Cambia el contenido y puede incluir HTML.
[Link] = 'Nuevo título'; [Link] = '<strong>Hola</strong>';
[Link] [Link]
Agrega una clase CSS al elemento. Quita una clase CSS del elemento.
[Link]('activo'); [Link]('activo');
[Link] [Link]
Agrega la clase si no está, la quita si está. Cambia un estilo inline directamente.
[Link]('abierto'); [Link] = 'red';
Eventos — reaccionar a lo que hace el usuario
Un evento es algo que pasa: el usuario hace click, escribe, mueve el mouse, envía un formulario.
[Link]( 'click' , function() { ... } );
el elemento el evento qué hacer cuando ocurre
Eventos más comunes:
El usuario hace click El usuario escribe en El valor de un select o
'click' en el elemento
'input' un input
'change' checkbox cambia
El usuario envía un El mouse entra al El usuario presiona
'submit' formulario
'mouseover' elemento
'keydown' una tecla
●●●
const boton = [Link]('#btn');
[Link]('click', function() {
[Link]('click!');
});
Ejemplo completo — botón que cambia texto Todo junto
HTML + JS trabajando juntos. Cuando el usuario hace click, JS cambia el contenido de la página.
●●● ●●●
<!-- [Link] --> // [Link]
const titulo =
<h1 id='titulo'>Hola</h1>
[Link]('titulo');
<button id='btn'>Cambiar texto</button> const boton =
[Link]('btn');
<script src='[Link]'></script>
[Link]('click', function() {
[Link] = 'Texto cambiado!';
[Link] = 'green';
Lo que hace paso a paso: });
1 Selecciona el h1 y el botón con getElementById.
2 Le dice al botón: cuando alguien haga click, ejecutá esta función.
JavaScript
3 — Clase 1cambia
La función · Full Stack · BT Informática
el texto del h1 y su2026
color.