DESARROLLO DE APLICACIONES WEB
DINÁMICAS
Semana 1 - Introducción a JavaScript
Introducción para el docente
Durante esta primera semana se busca que los estudiantes comprendan qué es JavaScript y por
qué es uno de los lenguajes más utilizados en el desarrollo web. El objetivo principal es que
comiencen a programar mediante actividades simples y visuales que les permitan observar
resultados inmediatos en el navegador.
Clase 1: ¿Qué es JavaScript? Mi primera página
interactiva
Objetivos
• Comprender qué es un script. • Diferenciar HTML, CSS y JavaScript. • Ejecutar instrucciones
simples.
Preguntas de inicio
¿Cómo hace una página para responder cuando tocamos un botón? ¿Cómo sabe una aplicación si
una contraseña es correcta? ¿Qué hace que aparezcan mensajes en pantalla?
Explicación
HTML se utiliza para crear la estructura de una página. CSS sirve para darle diseño y apariencia.
JavaScript permite agregar comportamiento e interacción. Una analogía útil es pensar que HTML
construye la casa, CSS la pinta y JavaScript enciende las luces y abre las puertas.
¿Qué es un script?
Un script es una serie de instrucciones que la computadora ejecuta para realizar una tarea
determinada.
Ejemplo
alert('Hola mundo');
La función alert() muestra un mensaje emergente en la pantalla.
Actividad práctica
Crear una página web que muestre un mensaje personalizado utilizando alert().
Clase 2: Variables y tipos de datos
Objetivos
• Comprender el concepto de variable. • Utilizar distintos tipos de datos.
Preguntas de inicio
Si necesitamos guardar el nombre de un alumno para utilizarlo varias veces, ¿cómo podríamos
hacerlo?
Explicación
Las variables son espacios de memoria donde se almacena información para ser utilizada
posteriormente por el programa.
Ejemplos
let nombre = 'Juan';
let edad = 16;
let aprobado = true;
JavaScript permite almacenar textos, números y valores lógicos.
Mostrar información
alert(nombre);
Actividad práctica
Crear variables para nombre, edad y curso. Luego mostrar la información mediante alert().
Ejercicio adicional
alert('Hola ' + nombre);
Explicar el concepto de concatenación de cadenas.
Clase 3: Operadores y estructuras condicionales
Objetivos
• Utilizar operadores matemáticos. • Resolver problemas mediante condicionales.
Preguntas de inicio
¿Cómo haría una computadora para decidir si un alumno aprobó o desaprobó una materia?
Operadores matemáticos
+ - * /
Ejemplo
let nota1 = 8; let nota2 = 6; let promedio = (nota1 + nota2) / 2;
Operadores de comparación
> < >= <= ==
Estructuras condicionales
let nota = 8; if(nota >= 7){ alert('Aprobado'); }
Condicional completa
if(nota >= 7){ alert('Aprobado'); }else{ alert('Desaprobado'); }
Actividad práctica
Crear un programa que determine si una persona es mayor o menor de edad.
Trabajo Práctico Integrador
Desarrollar una página web denominada 'Mi Presentación Personal'.
La página debe incluir: nombre, edad, escuela, mensajes personalizados y una condición que
indique si la persona es mayor o menor de edad.
Criterios de evaluación
• Participación en clase. • Correcta utilización de variables. • Uso adecuado de operadores. •
Aplicación correcta de estructuras condicionales. • Entrega del trabajo práctico.