DESARROLLO WEB FULL STACK
NIVEL BÁSICO
Componente técnico - Metodología
Lógica de Programación e Introducción a JavaScript
Objetivos de la Clase:
➢ Comprender los principios fundamentales de la lógica de
programación.
➢ Aplicar los conceptos de lógica de programación mediante
pseudocódigo.
➢ Introducir la programación en JavaScript y su sintaxis básica.
➢ Crear un script simple en JavaScript dentro de un documento
HTML5.
Lógica de Programación e Introducción a JavaScript
La lógica de programación es el fundamento de todo proceso de desarrollo
de software. En esencia, se trata de descomponer un problema complejo en
una serie de pasos secuenciales que la computadora puede seguir para
resolver ese problema. Esta capacidad de estructurar y ordenar los pasos
lógicamente es lo que permite que los programadores diseñen soluciones
efectivas para problemas computacionales.
¿Por qué es la base de la programación?
• Descomposición de Problemas: La lógica de programación nos ayuda a
dividir un problema en partes más pequeñas y manejables, de modo que cada
una pueda ser resuelta con un conjunto de pasos bien definidos.
• Resolución Eficiente de Problemas: Permite estructurar las soluciones
de forma eficiente, evitando redundancias y garantizando que el código sea
comprensible y fácil de mantener.
• Creación de Algoritmos: La lógica de programación se manifiesta en la
creación de algoritmos, que son secuencias de instrucciones diseñadas para
resolver problemas específicos.
Lógica de Programación e Introducción a JavaScript
Un algoritmo es un conjunto de instrucciones o pasos definidos y ordenados
que deben seguirse para resolver un problema o realizar una tarea. Para
entender mejor el concepto, podemos verlo como una receta de cocina:
➢ Entrada: Los ingredientes necesarios para hacer una receta.
➢ Proceso: Los pasos que debes seguir para preparar la comida.
➢ Salida: El plato final listo para ser servido.
En programación, este mismo concepto se aplica:
➢ Entrada: Datos o valores que el programa recibe.
➢ Proceso: Los pasos que el programa sigue para procesar esos datos.
➢ Salida: El resultado final que el programa produce.
Lógica de Programación e Introducción a JavaScript
Un algoritmo debe ser :
preciso (cada paso debe estar claramente definido),
finito (tener un número limitado de pasos)
efectivo (producir un resultado deseado).
Características Clave de los Algoritmos:
1. Secuencia: Los pasos deben estar organizados en un orden
lógico.
2. Claridad: Cada paso debe ser claro y no ambiguo.
3. Finitud: Debe terminar después de un número limitado de
pasos.
4. Entrada y Salida: Debe recibir alguna entrada y producir una
salida.
Lógica de Programación e Introducción a JavaScript
El pseudocódigo es una representación intermedia entre el lenguaje natural
(el que usamos para comunicarnos) y un lenguaje de programación. Aunque
no sigue la sintaxis estricta de ningún lenguaje de programación específico, su
función es expresar algoritmos de manera que los humanos puedan entender y
que se pueda traducir fácilmente a un código real.
• Simple: El pseudocódigo usa un lenguaje simple y directo que cualquiera
que tenga conocimientos básicos de programación puede entender.
• No requiere reglas de sintaxis: A diferencia de los lenguajes de
programación, el pseudocódigo no necesita cumplir con reglas estrictas de
sintaxis.
• Translación sencilla: Una vez que el pseudocódigo está definido,
convertirlo a cualquier lenguaje de programación es bastante directo.
Lógica de Programación
Ejemplo: Vamos a creer un algoritmo y su seudocódigo en clases:
Vamos a crear un algoritmo que sume dos números.
Algoritmo Pseudocódigo
Lógica de Programación - Algoritmo
Estructuras de Control en Algoritmos
Los algoritmos, además de ser secuenciales, también pueden
utilizar estructuras de control que permiten manejar condiciones
y repeticiones:
Lógica de Programación - Algoritmo
Lógica de Programación – Trabajo de todo el grupo
Ejercicio en clases : determinar si un número es positivo, negativo o cero
Problema:
Queremos escribir un algoritmo que, dado un número, determine si es positivo, negativo
o igual a cero.
Introducción a JavaScript
¿Qué es JavaScript?
JavaScript es un lenguaje de programación de alto nivel, interpretado y
orientado a objetos que se utiliza principalmente para crear contenido dinámico
en las páginas web. Permite a los desarrolladores implementar funciones
complejas en páginas web, como actualizaciones en tiempo real, interacción
con el usuario y la manipulación del DOM (Document Object Model).
JavaScript es uno de los lenguajes de programación más populares del mundo
y es fundamental para el desarrollo web, junto con HTML y CSS.
Introducción a JavaScript
Introducción al DOM (Document Object Model)
¿Qué es el DOM?
El DOM (Modelo de Objetos del Documento) es una forma de representar la estructura
de una página web. Piensa en el DOM como en un mapa que muestra cómo están
organizados todos los elementos de una página. Cada elemento en la página, como
títulos, párrafos, imágenes y enlaces, se convierte en un objeto que puedes manipular
con JavaScript.
¿Por qué es importante el DOM?
•Interactividad: Permite que la página web responda a las acciones del usuario, como
clics o desplazamientos.
•Cambio Dinámico: Puedes modificar el contenido y estilo de la página sin necesidad
de recargarla.
•Acceso a Elementos: Te permite acceder a diferentes partes de la página y hacer
cambios en tiempo real.
•Interacción Dinámica: Permite a los desarrolladores modificar el contenido y la
estructura de la página de forma dinámica, lo que mejora la experiencia del usuario.
•Manipulación: Se pueden agregar, eliminar o modificar elementos y atributos en
tiempo real.
•Eventos: El DOM permite gestionar eventos de usuario, como clics, movimientos del
ratón y teclas presionadas.
Introducción a JavaScript
Introducción a JavaScript
Cómo Manipular el DOM con JavaScript
Seleccionar Elementos
Para trabajar con el DOM, primero necesitas seleccionar los elementos. Aquí
tienes algunas formas de hacerlo:
Introducción a JavaScript
Introducción a JavaScript
Ejercicio Práctico: Cambiar el Texto de un Botón
Ahora que sabemos cómo seleccionar y modificar elementos, hagamos un ejercicio práctico.
Introducción a JavaScript
Actividad: Utilizando el material de estudio Lista_Eventos_DOM.pdf que
esta en el contenido del curso cambia el evento para que cambie el titulo
con un saludo.
