ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
Taller de JavaScript: Del Código al Navegador
PÁGINA: 1 de 7
Índice
1. Introducción a JavaScript
2. Fundamentos de Programación
3. Estructuras de Control
4. Funciones
5. Programación Orientada a Objetos
6. Eventos
7. Modelo de Objeto del Documento (DOM)
Introducción
JavaScript es el lenguaje de programación que hace que las páginas web
sean interactivas. Es un lenguaje:
• Interpretado
• Dinámico
• De alto nivel
• Orientado a objetos
•
Práctica 1: Tu primer código JavaScript
javascript
// Escribe en la consola
[Link]("¡Hola Mundo!");
// Muestra una alerta
alert("Bienvenido al taller de JavaScript");
Ejercicio: Crea un archivo HTML y vincula un archivo JavaScript.
Muestra tres mensajes diferentes usando [Link] con distintos tipos
de datos.
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1
ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
Fundamentos
PÁGINA: 2 de 7
Variables y Tipos de Datos
// Variables con let y const
let nombre = "Ana";
const edad = 25;
// Tipos de datos
let texto = "Cadena";
let numero = 42;
let booleano = true;
let arreglo = [1, 2, 3];
let objeto = {
nombre: "Juan",
edad: 30
};
Práctica 2: Operadores y Expresiones
// Operadores aritméticos
let suma = 5 + 3;
let multiplicacion = 4 * 2;
// Operadores de comparación
let esIgual = 5 === "5"; // false
let esMayor = 10 > 5; // true
Ejercicio: Crea un programa que calcule el área y perímetro de un
rectángulo usando variables para el largo y ancho.
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1
ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
Estructuras de Control
PÁGINA: 3 de 7
Condicionales
let hora = 14;
if (hora < 12) {
[Link]("Buenos días");
} else if (hora < 18) {
[Link]("Buenas tardes");
} else {
[Link]("Buenas noches");
}
Bucles
// For
for (let i = 0; i < 5; i++) {
[Link](`Iteración ${i}`);
}
// While
let contador = 0;
while (contador < 3) {
[Link](`Contador: ${contador}`);
contador++;
}
Ejercicio: Crea un programa que muestre los números pares del 1 al
20 usando un bucle.
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1
ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
Funciones
Declaración y Uso PÁGINA: 4 de 7
// Función tradicional
function saludar(nombre) {
return `¡Hola, ${nombre}!`;
}
// Función flecha
const sumar = (a, b) => a + b;
// Función con múltiples parámetros
function calcularPromedio(numeros) {
const suma = [Link]((a, b) => a + b, 0);
return suma / [Link];
}
Ejercicio: Crea una función que determine si un número es primo.
Programación Orientada a Objetos
Clases y Objetos
javascript
Copy
class Persona {
constructor(nombre, edad) {
[Link] = nombre;
[Link] = edad;
}
saludar() {
return `Hola, soy ${[Link]} y tengo ${[Link]} años`;
}
}
const persona1 = new Persona("María", 28);
[Link]([Link]());
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1
ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
Ejercicio: Crea una clase Libro con propiedades como título, autor y
PÁGINA: 5 de 7
año, y métodos para mostrar su información.
Eventos
Manejo de Eventos
// Evento click
[Link]("miBoton").addEventListener("click", function()
{
alert("¡Botón clickeado!");
});
// Evento submit en formulario
[Link]("miFormulario").addEventListener("submit",
function(e) {
[Link]();
[Link]("Formulario enviado");
});
Ejercicio: Crea un botón que cambie de color cada vez que se hace
click en él.
DOM
Manipulación del DOM
// Seleccionar elementos
const elemento = [Link](".miClase");
const elementos = [Link]("p");
// Modificar contenido
[Link] = "Nuevo texto";
[Link] = "<strong>Texto en negrita</strong>";
// Crear y añadir elementos
const nuevoParrafo = [Link]("p");
[Link] = "Nuevo párrafo";
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1
ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
[Link](nuevoParrafo);
PÁGINA: 6 de 7
Proyecto Final: Lista de Tareas
class ListaTareas {
constructor() {
[Link] = [];
[Link] = [Link]("tareas");
}
agregarTarea(texto) {
const tarea = {
id: [Link](),
texto,
completada: false
};
[Link](tarea);
[Link]();
}
mostrarTareas() {
[Link] = "";
[Link](tarea => {
const elemento = [Link]("div");
[Link] = `
<input type="checkbox" ${[Link] ? 'checked' : ''}>
<span>${[Link]}</span>
<button>Eliminar</button>
`;
[Link](elemento);
});
}
}
const lista = new ListaTareas();
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1
ASIGNATURA: PROGRAMACION 3
Taller 3
Introducción AREA: SISTEMAS
Javascript
DOCENTE: ROSLAY BAUTISTA
Recursos Adicionales
PÁGINA: 7 de 7
• MDN Web Docs:
[Link]
• [Link]: [Link]
• FreeCodeCamp: [Link]
Retos para Práctica Independiente
1. Crea una calculadora que pueda realizar operaciones básicas.
2. Desarrolla un juego de adivinar números.
3. Implementa un validador de formularios.
4. Crea un cronómetro con funciones de inicio, pausa y reinicio.
Evaluación de Aprendizaje
Para cada sección, asegúrate de:
1. Comprender los conceptos teóricos
2. Completar los ejercicios prácticos
3. Modificar los ejemplos para crear variaciones
4. Documentar tus soluciones
5. Compartir y discutir con otros estudiantes
¡Feliz codificación!
CLASIF. DE CONFIDENCIALIDAD IPB CLASIF. DE INTEGRIDAD A CLASIF. DE DISPONIBILIDAD 1