Introducción a JavaScript:
Programación para la Web
¡Bienvenido al emocionante mundo de la programación web! Hoy
exploraremos JavaScript, el lenguaje que da vida a los sitios web con
interactividad y comportamiento dinámico.
Made with
¿Qué es JavaScript?
Lenguaje de Modificación en
Programación Tiempo Real
Dinámico Permite la modificación
JavaScript da vida e dinámica del contenido
interactividad a las páginas HTML y los estilos CSS sin
web, transformando el recargar la página, creando
contenido estático en interacciones de usuario
experiencias atractivas. fluidas.
Ejecución Basada en Navegador
Se ejecuta directamente en los navegadores web sin necesidad
de compilación, lo que lo hace instantáneamente accesible y
comprobable.
Made with
¿Por qué aprender
JavaScript?
Fundamento Esencial Versatilidad Full-stack
de la Web Utilizado tanto en interfaces
JavaScript forma uno de los front-end como en
tres pilares fundamentales servidores back-end con
del desarrollo web, junto [Link], permitiendo el
con la estructura HTML y el desarrollo completo de
estilo CSS. aplicaciones.
Posibilidades Infinitas
Crea sitios web interactivos,
juegos de navegador,
aplicaciones móviles,
software de escritorio e
incluso programación de
dispositivos IoT.
Made with
Sintaxis y Estructura
Básica
1 Variables: Almacenamiento de Datos
Almacena información usando las declaraciones let, const, y
var para diferentes necesidades de ámbito.
2 Tipos de Datos
Trabaja con números, cadenas de texto, booleanos, objetos,
arreglos y más para representar diferentes tipos de
información.
3 Documentación del Código
Usa los comentarios // single line y /* multi-line */ para
explicar la lógica de tu código.
Made with
Primeros Comandos:
Consola y Manipulación del
DOM
Salida por Consola Manipulación de HTML
[Link]("Hello, [Link](
JavaScript!"); "title")
[Link]("Welcome to .innerHTML = "Dynamic
programming!"); Content!";
Muestra mensajes e información Cambia el contenido de la
de depuración en la consola de página web dinámicamente al
desarrollador del navegador. seleccionar elementos HTML y
modificar sus propiedades.
Made with
Operadores y Expresiones
Operaciones Operadores de
Aritméticas Comparación
+ suma, - resta, * == igual, === estrictamente
multiplicación, / división, % igual, != diferente, > mayor
módulo (resto) que, < menor que
Operadores Lógicos
&& Y, || O, ! NO para combinar y negar expresiones booleanas
Made with
Estructuras de Control
Declaraciones Condicionales
Usa if, else if, y else para tomar decisiones basadas
en diferentes condiciones.
1 if (score >= 90) {
grade = "A";
} else if (score >= 80) {
grade = "B";
}
Estructuras de Bucle
Repite la ejecución de código con bucles for y while
para procesar arreglos e iterar a través de datos.
2
for (let i = 0; i < [Link]; i++) {
[Link](students[i]);
}
Made with
Funciones: Bloques de
Código Reutilizables
01 02
Declaración de Función Ejecución de Función
function let roomArea =
calculateArea(width, calculateArea(12, 10);
height) { [Link]("Área:",
return width * height; roomArea);
}
03
Beneficios Clave
Promueve la modularidad del código, la reutilización, la claridad y
facilita la depuración y el mantenimiento.
Made with
Interactividad Básica con
Eventos
Detección de Eventos
Captura interacciones de usuario como clics, movimientos del
ratón, entrada de teclado y envíos de formularios para activar
respuestas.
Estilización Dinámica
Cambia colores, tamaños y posiciones de elementos en
tiempo real basándose en las acciones del usuario para una
retroalimentación visual atractiva.
Escuchadores de Eventos
Usa addEventListener para adjuntar múltiples manejadores
de eventos y crear comportamientos interactivos sofisticados.
[Link]('click', function() {
[Link] = '#e7bf6aff';
});
Made with
Ejercicio Práctico:
Calculadora Sencilla
1 2
Creación de Funciones Visualización de
Crea una función que acepte Resultados
dos números y una Muestra los resultados del
operación (+, -, *, /) como cálculo tanto en la consola
parámetros. del navegador como
directamente en la interfaz
de la página web.
Integración de Habilidades
Aplica variables, funciones, declaraciones condicionales y
manipulación del DOM en un proyecto cohesivo.
Objetivo del Reto: Crea una calculadora interactiva que
demuestre todos los conceptos fundamentales de JavaScript
aprendidos en esta introducción.
Made with