Introducción a la Programación
Estructurada con JavaScript
¡Ingeniero: Jesus Manuel Parada L.
[Link]
Objetivos
• Introducir los conceptos de algoritmo y
• programación.
Comprender la importancia y el uso de JavaScript.
• Diseñar lógica con diagramas de flujo y pseudocódigo.
• Crear y ejecutar su primer programa básico en
JavaScript.
• Aplicar variables y operadores en problemas sencillos.
[Link]
[Link]
Desentrañando el Misterio del Algoritmo
Un algoritmo es una secuencia finita de instrucciones claras y
ordenadas para resolver un problema o realizar una tarea específica.
Piensen en ellos como recetas: si siguen los pasos al pie de la letra,
el resultado será el esperado.
Ejemplo 1: Preparar Café
• Hervir agua.
• Poner café en filtro.
• Verter agua caliente.
• Servir y disfrutar.
[Link]
[Link]
La Programación: Dando Vida a los Algoritmos
Programar es el arte de traducir algoritmos a un lenguaje que las computadoras puedan entender y ejecutar. Es como
hablarles en su propio idioma para que hagan exactamente lo que queremos.
JavaScript: ¡El Lenguaje de la Web! Versatilidad Asombrosa
Es el corazón interactivo de la mayoría de los sitios web que No solo para la web, JavaScript puede usarse en servidores
visitan. Desde animaciones hasta aplicaciones web ([Link]), aplicaciones móviles (React Native) e incluso en
complejas, JavaScript está en todas partes. el desarrollo de juegos. ¡Un mundo de posibilidades!
Gran Comunidad y Recursos Fácil de Empezar
Al ser tan popular, encontrarán una inmensa cantidad de Su sintaxis es relativamente sencilla y no requiere de
documentación, tutoriales y una comunidad activa dispuesta complejas configuraciones iniciales para empezar a
a ayudar. ¡Nunca estarán solos! codificar. Ideal para dar sus primeros pasos.
[Link]
Diagramas y Pseudocódigo
[Link]
Diseñando la Lógica: Diagramas y Pseudocódigo
Antes de escribir código, es crucial planificar. Los diagramas de flujo y el pseudocódigo son herramientas
esenciales para visualizar y estructurar sus algoritmos, haciéndolos más claros y fáciles de depurar.
Diagrama de Flujo
Representación gráfica de un algoritmo. Utiliza símbolos estandarizados para mostrar el
flujo de control y las operaciones.
Pseudocódigo
Descripción de un algoritmo de manera similar a un lenguaje de programación,
pero en un lenguaje natural y más flexible.
INICIO
LEER numero1
LEER numero2
SUMA = numero1 + numero2
ESCRIBIR SUMA
FIN
[Link]
[Link]
[Link]
[Link]
Primeros Pasos en
JavaScript
JavaScript es ejecutado principalmente por los navegadores web, lo que lo hace muy accesible para experimentar. Aquí algunas herramientas
clave:
Consola del CodePen / JSFiddle Visual Studio Code
Navegador
La forma más rápida de probar pequeños Plataformas online para escribir y ejecutar Un editor de código profesional. Lo usaremos
fragmentos de código. Presiona F12 en tu código directamente desde tu navegador. más adelante para proyectos más grandes.
navegador (Chrome, Firefox, Edge) y ve a la Ideales para compartir y practicar sin instalar
pestaña "Console". nada.
¡Pregunta para el grupo! ¿Quién ha usado antes la consola del navegador para algo? ¿Para qué la usarían hoy en esta
clase?
[Link]
Variables y Tipos de Datos en JavaScript
Las variables son como cajas donde guardamos información. Los "tipos de datos" nos dicen qué tipo de información podemos guardar en esas cajas.
Declaración de Variables Tipos de Datos Comunes
let: Para valores que cambiarán. Number: Números enteros o decimales. let precio = 99.99;
String: Texto. Se usa con comillas. let nombre = "Ana";
let edad = 20; Boolean: Verdadero (true) o Falso (false). let estaActivo = true;
const: Para valores que no cambiarán (constantes).
const PI = 3.14159;
Operadores en JavaScript
Los operadores nos permiten realizar operaciones con nuestras variables y valores.
Tipo Operador Descripción
Aritméticos +, -, *, /, % Suma, resta, multiplicación, división, módulo (residuo).
Lógicos && (AND), || (OR), ! (NOT) Combinan o invierten valores booleanos. Cruciales para
decisiones. [Link]
Mi Calculadora Básica!
• Pida dos números al usuario.
• Realice las cuatro operaciones básicas (suma, resta, multiplicación, división).
• Muestre cada resultado claramente.
Desafío Extra:
¿Cómo harían para que la división no muestre error si el segundo
número es cero? Piensen en una forma de manejar esa situación.
¡Discutamos esto en 5 minutos!
Recuerden: planifiquen con pseudocódigo, usen prompt() y alert(), y prueben
su código en la consola del navegador. ¡Manos a la obra!
[Link]