FUNDAMENTOS DE
JAVASCRIPT
La Llave de las Páginas Inteligentes
Índice de
CONTENIDOS
01. ¿Qué es JavaScript?
02. Sintaxis Básica y Variables
03. Operadores y Expresiones
04. Funciones Simples
¿QUÉ ES JAVASCRIPT?
JavaScript es un lenguaje de programación interpretado, lo
que significa que no necesita compilarse para ejecutarse. Es
uno de los lenguajes más utilizados en el mundo y se ejecuta
directamente en el navegador web, permitiendo a los
desarrolladores crear páginas interactivas, dinámicas y
responsivas.
HISTORIA Y CONTEXTO
Creado en 1995 por Brendan Eich.
Lenguaje esencial junto a HTML y CSS.
Utilizado para crear sitios dinámicos y aplicaciones web.
EJEMPLO PRÁCTICO
RESULTADO
Al presionar el botón nos
aparece una alerta con el
mensaje “¡Hola!”.
ENFOQUE ÉTICO (LEO/CRESE)
Crear soluciones seguras y respetuosas con los usuarios.
No manipular datos sin permiso.
APLICACIONES
Validación de formularios.
Animaciones dinámicas.
Juegos en línea.
Aplicaciones web como Google Maps, YouTube, etc.
CARACTERÍSTICAS
Lenguaje interpretado: No necesita compilarse.
Basado en objetos: Soporta objetos, arreglos o clases.
Débilmente tipado: Puedes cambiar el tipo de una variable sin error.
Orientado a eventos: Puedes hacer que el código responda a acciones
como clics o teclas.
ACTIVIDAD GUIADA
Crea una página HTML con un botón que al hacer clic muestre un saludo con tu
nombre.
Personaliza el saludo dependiendo de la hora del día (mañana, tarde, noche).
DESARROLLO
Llamaremos a nuestra vista “informacion.html” en el que al presionar el botón
mostraremos información personal de manera organizada y entendible.
Cuando el usuario hace clic
en el botón, se ejecuta el
código JavaScript que
muestra una ventana
emergente (alerta) con un
saludo y datos personales
(nombre, edad y ciudad).
RESULTADO
Al presionar el botón nos aparece 127.0.0.1 es la dirección IP de nuestra computadora
en pantalla la siguiente alerta. (localhost) y :5500 es el puerto del servidor.
El navegador muestra esto para indicar qué sitio web
generó la alerta, por seguridad.
¿QUÉ ES LOCALHOST?
Localhost es el nombre que se le da a la dirección IP 127.0.0.1, que representa tu
nuestra computadora. Cuando accedemos al "localhost" en el navegador,
ingresamos a un servidor web que se ejecuta en nuestro equipo, no en Internet. Se
usa para probar páginas o aplicaciones localmente antes de publicarlas.
¿QUÉ ES LA SINTAXIS EN
PROGRAMACIÓN?
La sintaxis en programación es como la gramática en los idiomas: define cómo debe
escribirse el código para que funcione. Si la sintaxis es incorrecta, el
programa no se ejecutará o mostrará errores.
En JavaScript, cada instrucción suele terminar con punto y coma (;), aunque no es
obligatorio en todos los casos, es una buena práctica usarlo.
¿QUÉ ES UNA VARIABLE?
Una variable es un contenedor donde se puede almacenar información para luego
utilizarla o modificarla. JavaScript permite declarar variables con:
var Antigua forma. Tiene alcance más amplio, pero menos control.
let Forma moderna. Se usa para variables que pueden cambiar.
const Para valores que no cambian (constantes).
EJEMPLO DECLARACIÓN DE VARIABLES
El código JavaScript debe ir dentro de la etiqueta
<script> para que el navegador lo reconozca y lo
ejecute correctamente. Si se escribe fuera de
<script>, el navegador lo interpreta como HTML y
no como instrucciones de programación.
TIPOS DE DATOS EN JAVASCRIPT
TIPO EJEMPLO DESCRIPCIÓN
Number 25, 3.14 Números enteros o decimales
String “Hola” Cadenas de texto entre comillas
Boolean true, false Verdadero o falso
Null null Valor intencionalmente vacío
Undefined undefined Valor no definido todavía
BUENAS PRÁCTICAS (LEO/CRESE)
Usa nombres descriptivos para las variables: let
nombreUsuario en lugar de let x.
Mantén tu código limpio, con espacios y sangrías
claras.
Escribe comentarios que expliquen lo que hace tu
código:
REFLEXIÓN ÉTICA
Desde LEO y CRESE, usamos las variables para representar
datos reales, por eso es importante:
No falsear la información.
Ser claros con lo que representamos (por ejemplo, una variable
edad debe ser un número válido, no un texto como "mucho").
Nombrar las cosas correctamente es parte de la honestidad.
EJEMPLO PRÁCTICO
Imagina que eres desarrollador de una página web para nuevos estudiantes. Quieres mostrar un
mensaje de bienvenida con el nombre, edad y si está inscrito o no. Esta información se guardará en
variables y luego se mostrará al usuario.
RESULTADO
Ejercicio Práctico
Estás creando una versión digital de un carné de estudiante para un colegio. Este
carné debe mostrar los datos básicos del estudiante usando variables en JavaScript,
y además, incluir un mensaje personalizado.
Crea un archivo llamado carneEstudiante.html.
Usa variables en JavaScript para almacenar:
Nombre del estudiante
Edad
Grado o curso
Si está activo o retirado (true o false)
Muestra la información en pantalla con document.write(), simulando el diseño de un
carné.
Agrega un mensaje personalizado según su estado:
✅ Bienvenido al año escolar, ¡sigue adelante!”
Si está activo: “
⚠️ Estudiante no activo. Contacta la secretaría.”
Si no: “
Desarrollo
OPERADORES Y EXPRESIONES
🧠 ¿QUÉ SON LOS OPERADORES?
Los operadores son símbolos que permiten realizar operaciones sobre variables o
valores. Son la base para hacer cálculos, comparaciones y decisiones en nuestros
programas.
📚 TIPOS DE OPERADORES EN JAVASCRIPT
Tipo Ejemplo ¿Para qué sirve?
Aritméticos +, -, *, /, % Para sumar, restar, multiplicar, dividir, etc.
Asignación =, +=, -=, *= Para guardar o actualizar valores.
Comparación ==, !=, >, <, >=, <= Para comparar datos.
Lógicos &&, `
🔢 EJEMPLOS PRÁCTICOS
Aritméticos
En la primera operación se suman las dos variables a y b mientras que
en la segunda operación se saca el modulo al dividir la variable a en b.
Comparación
Se establece una variable llamada “Edad” la cual se compara con dos
números y dependiendo de su operador se define si es true (Verdadero)
o false (falso).
Lógicos
Se utilizan operadores lógicos para verificar dos condiciones y muestra
los resultados en la página y en la consola del navegador.
OPERADORES Y EXPRESIONES
🧭 ¿QUÉ ES UNA EXPRESIÓN?
Una expresión es cualquier fragmento de código que devuelve un valor.
Por ejemplo:
5 + 3 → devuelve 8
nombre + " " + apellido → devuelve una cadena completa
edad >= 18 → devuelve true o false
⚖️ PENSAMIENTO LÓGICO Y ÉTICA (LEO/CRESE)
En la vida real, usamos lógica todo el tiempo para decidir. En programación:
No ocultes condiciones falsas o confusas.
Asegúrate de que tus decisiones en código sean claras, honestas y
justificadas.
No escribas condiciones que manipulen la lógica para beneficiar un mal
resultado (por ejemplo: forzar que todos “aprueben” con un if mal
intencionado).
Ejercicio Práctico
🎬 CONTEXTO:
Estás desarrollando un sistema para una sala de cine. Para permitir el ingreso, la persona debe:
Tener al menos 12 años
Y/o estar acompañada por un adulto
💻 INSTRUCCIONES:
Crea un programa que use variables:
edad (número)
acompañado (true o false)
Muestra un mensaje:
Si cumple las condiciones: "🎟️ ¡Bienvenido al cine!"
🚫 Lo sentimos, no puedes entrar."
Si no: "
Desarrollo
El código verifica si una persona
puede entrar al cine según su
edad o si está acompañada.
Si tiene 12 años o más, o está
acompañada, muestra el mensaje
de bienvenida.
Si no cumple ninguna de las dos
condiciones, muestra que no
puede entrar.
FUNCIONES SIMPLES EN JAVASCRIPT
🎯 ¿QUÉ ES UNA FUNCIÓN?
Una función es un bloque de código reutilizable que realiza una tarea
específica. Permite organizar mejor tu programa, evitar repetir código y
resolver problemas de manera modular.
📌 Es como una "receta" que puedes usar cada vez que la necesites.
🧩 ¿CÓMO SE ESCRIBE UNA FUNCIÓN?
✅ ¿Por qué son útiles?
Ahorras tiempo.
Tu código se ve más limpio y ordenado.
Puedes hacer cambios rápidos sin repetir todo.
FUNCIONES SIMPLES EN JAVASCRIPT
⚖️ ÉTICA (LEO/CRESE)
Escribe funciones con nombres claros que indiquen lo que hacen.
Usa funciones para compartir conocimiento, no para ocultar lógica
innecesaria o engañosa.
Promueve el trabajo colaborativo y la reutilización limpia de código.
🔄 FUNCIONES CON RETORNO (RETURN)
A veces, las funciones no solo muestran información, sino que devuelven un
resultado que puedes guardar:
return detiene la
función y entrega
un valor.
EJERCICIO DE SELECCIÓN MÚLTIPLE
📍 Pregunta: ¿Cuál de las siguientes afirmaciones sobre funciones en
JavaScript es correcta?
A. Una función siempre necesita return para funcionar.
B. Una función puede ser llamada varias veces con diferentes datos.
C. Las funciones solo sirven para mostrar texto en pantalla.
D. No se pueden usar variables dentro de una función.
EJERCICIO DE SELECCIÓN MÚLTIPLE
📍 Pregunta: ¿Cuál de las siguientes afirmaciones sobre funciones en
JavaScript es correcta?
A. Una función siempre necesita return para funcionar.
B. Una función puede ser llamada varias veces con diferentes datos.
C. Las funciones solo sirven para mostrar texto en pantalla.
D. No se pueden usar variables dentro de una función.
MUCHAS
GRACIAS
