Lenguaje de Programación: JavaScript 1
JavaScript
Samuel Orozco García
Colegio Santo Tomás de Aquino
Santa Mónica, Calle 30B # 78-85, Cartagena, Colombia
PROGRAMACIÓN 2
Resumen
JavaScript permitió transformar páginas web estáticas en interfaces dinámicas al validar
formularios sin recargar, manipular el DOM en tiempo real, controlar eventos del usuario e
implementar lógica condicional con estructuras como if. Además, facilita la creación de
contenido personalizado mediante objetos como Document y Form, y permite el uso de
variables flexibles con var o let. Su capacidad para responder a eventos, modificar el
contenido visual y evitar pérdidas de datos lo convirtió en el motor de la web interactiva
moderna.
Palabras clave: JavaScript, programación, HTML, variables, dinámicos,
personalizados, modernos, usuario, web, programa, proyecto, condicional, control,
instrucciones, comandos.
Abstract
JavaScript made it possible to transform static web pages into dynamic interfaces by
validating forms without reloading, manipulating the DOM in real time, controlling user
events and implementing conditional logic with structures such as if. It also facilitates the
creation of custom content through objects such as Document and Form, and allows the use
of flexible variables with var or let. Its ability to respond to events, modify visual content
and avoid data loss made it the engine of the modern interactive web.
Keywords: JavaScript, programming, HTML, variables, dynamic, dynamic, custom,
modern, user, web, program, project, conditional, control, instructions, commands.
PROGRAMACIÓN 3
Objetivos
Objetivo general.
• Comprender los conceptos claves de JavaScript con la finalidad de
implementar dinamismo, lógica e interacciones personalizadas en proyectos
web.
Objetivos específicos.
• Analizar el rol de JavaScript como pilar en el desarrollo del lenguaje de
programación
• Contrastar el comportamiento de JavaScript junto a páginas estáticas
• Sintetizar e identificar la estructura lógica de JavaScript implementando
condicionales (if)
PROGRAMACIÓN 4
JavaScript
A principios de la década de los 90’s, los usuarios dependían de módems analógicos
que permitían transmitir datos a velocidad de 14.4 kbps a 28 kbps, es decir, cargar una
imagen de 100 kb tomaría más de 30 segundos. En esos momentos la web comenzaba a
tomar un cambio de un espacio textual a un medio de interacciones dinámicas a tiempo real.
Gracias a esta necesidad de más dinamismo en el espacio del usuario y en contraste con una
velocidad de navegación tan tediosa para procesos sencillos, surgió la necesidad de la mejora
en el lenguaje de programación que se ejecutara en el navegador del usuario sin necesidad de
este esperar que el formulario se recargara nuevamente visualizando los errores existentes y
borrando el historial ya llevado. (Eguíluz, 2023) (Bautista, 2021).
Los sitios web tradicionales realizados con la implementación de HTML estático
funcionan como documentos digitales rígidos tras mostrar contenido idéntico para todo
usuario, sin capacidad de manejar interacciones específicas y personalizadas a tiempo real. Su
verdadera limitación se hace evidente cuando en la creación de experiencias customizadas
esta no responde a acciones usuario-web, mayores efectos y errores del usuario. Esto quiere
decir que la mayoría de navegadores web implementaban la 3er versión estándar de
ECMAScript, siendo en momentos estable, pero sin pensar más allá. Un ejemplo de esto fue
el formulario de 1995 de compra de libros de Amazon. Cuando un cliente cometía un error en
el ingreso de información personal, direción de envío o datos de pago, el sistema respondía
con una recargar completa de la página, es decir, todos los datos previamente ingresados por
el usuario, incluyendo los ítems del carrito, se borraban. Además, esta ofrecía apenas un
millón de títulos categorizados sistemáticamente, sin mostrar por defecto ofertas, por ende,
los usuarios debían buscarlos manualmente. (Silva, 2023) (Flannagan, 1997)
PROGRAMACIÓN 5
Interfaz Primera Página web de Amazon en 1995. (Web Design Musem). Sacado de: Silva, R. (2023) Infobae.
En Netscape, creadora del navegador Netscape Navigator, encargó a Brendan Eich a
crer un lenguaje sencillo para sobrellevar las dificultades que se presentaban en un tiempo de
10 días. Este decidió atraer desarrolladores al tomar sintaxis de Java, incorporarle funciones
de Scheme y añadirle capacidades de manipulación DOM, es decir, tomó tecnologías ya
existentes y las adaptó al navegador NetScape Navigator 2.0, dando el resultado de,
inicialmente. Mocha y finalmente llamado JavaScript. (Eguíluz, 2023)
Tras el éxito de la primera versión de JavaScript y NetScape Navigator, la corporación
Netscape decidió estandarizar el lenguaje JavaScript, dando como resultado que en 1997 se
realizara la especificación JavaScript 1.1 al ECMA. Llegando a nuestros días, en 2025,
JavaScript está presente en el 97% de los sitios web. (Eguíluz, 2023)
PROGRAMACIÓN 6
"JavaScript empezó como un 'parche' para Netscape y terminó como el lenguaje más
influyente de la historia digital."
— Brendan Eich, creador de JavaScript (2021).
Trascendencia de JavaScript
Las diferentes aplicaciones de JavaScript, respecto a la web, residen en el navegador y
objetos de documentos que admite el lenguaje. La mayor diferencia se lleva a cabo en el
dialecto implementado. Internet Explorer utiliza JScript, y los demás navegadores utilizan
JavaScript. Mientras HTML define el contenido, CSS mejora el aspecto, JavaScript presenta
el comportamiento de la web. Esto hace la web tener dinamismo e interacciones más
individuales al manipular la parte del contenido y aspecto para presenta una versión moderna
de proyectos o páginas web. (Ranjan, 2020)
Evita interrupciones en el flujo de usuario.
Antes de JavaScript, la interacción usuario-página web requería una solicitud HTTP
completa al servidor, implicando que el servidor generara una nueva página HTML
renderizándola por completo. Ante esto, se implementaron operaciones asíncronas y
manipulación del DOM en tiempo real para acortar el proceso. A causa de esta mejora, la
respuesta visual a errores del servidor es inmediato y no se presenta una pérdida de datos por
cambio de frecuencia de internet. (Silva, 2023)
Permite control de la apariencia y contenido.
A través de su método write()y el objeto Document de JavaScript, te permite
escribir HTML en un documento al tiempo de este mismo analizarlo. Operaciones como
mostrar textos diferentes en plataformas, reflejar textos adicionales, incluir fechas
actualizadas, generar documentos desde cero, especificar colores para el fondo del
documento, textos, enlaces. Dicho de otra manera, tiene la capacidad de generar documentos
PROGRAMACIÓN 7
HTML dinámicos y personalizados, permitiendo que un programa JavaScript sustituya el uso
de script CGI tradicional. (Flannagan, 1997)
Validación e interacción del contenido.
El objeto Document de JavaScript hace posible obtener una lista de enlaces de
hipertexto de un documento, obtener una matriz de todas las imágenes y applets Java
incrustados en un documento. Aunque la mayor interacción con el contenido del documento
la proporciona el objeto Form y objetos del elemento Form, permitiendo leer y escribir
valores de cualquier formulario del documento, mayormente utilizado para los programas de
calculadora JavaScript, pero siendo poco práctica con CGI, habiendo que contactar con el
servidor al hacer una operación. (Flannagan, 1997)
Añadido a esto, JavaScript tiene la capacidad de monitorear cada tecla incrustada en
el HTML o cambio realizado en el formulario:
elemento.addEventListener("tipo-evento", funciónDeValidación);}
Esto con el fin de incluir los términos necesarios para completar campos de formularios, en la
mayoría de casos, consultas a bases de datos con términos identificados y validación de contraseñas
seguras. (Ranjan, 2020)
Manipular imágenes.
En Navigator 3.0, utilizando la etiqueta <IMG> permite cambiar imágenes mostradas,
colocar efectos sofisticados y cambio rápido tras interacción táctil. (DesarrolloWeb, 2001)
Interacción con el usuario.
JavaScript tiene la capacidad de definir controladores de evento (evento handlers),
fragmentos de códigos arbitrarios que se ejecutan cuando se produce un evento, por ejemplo,
cuando el usuario hace clic en el botón “Enviar formulario”. En estos casos HTML requiere
un modelo de evento que le proporciona la gestión de JavaScript como mostrar un mensaje
especial, mostrar un cuadro de diálogo de confirmación o el cambio de color en el hipertexto.
(Flannagan, 1997)
PROGRAMACIÓN 8
Variables
Una variable es un elemento que refiere a un nombre permitiendo definir valores. En
el caso de JavaScript, una variable puede almacenar cualquier tipo de dato y adjuntarse a
cualquier parte del programa o página web. Por ejemplo, variables de tipos numéricos,
cadenas de caracteres o booleanos. (Ranjan, 2020)
El indicador se conoce como el nombre de la variable la cual debemos poner la
palabra var y la lista de variables:
• Sólo puede estar formado por letras, números y símbolos ($ y _)
• El primer carácter no puede ser un número
• No se puede usar palabras reservadas (if, for, while)
• No puede tener espacios
Por ejemplo, es correcto:
var $numero1;
var _$letra;
var $$$otroNumero;
var $_a_$4;
No obstante, cuando declaramos una variable no se le asigna directamente el tipo al
que pertenece, sino que el intérprete le da un tipo u otro, es decir, la declaración de esta es
opcional. (Román, 2019)
numero_1 = 2
numero_2 = 7
resultado = numero_1 + numero_2
El resultado se calcula en función del valor almacenado por las variables ya
categorizadas por el programa. Si se modificara el valor de las variables continuaría arrojando
un resultado. (Eguíluz, 2023)
PROGRAMACIÓN 9
A su vez, las variables se crean con la palabra var, necesitando ser indicada al definir
por primera vez la variable. Asi que, al utilizar las variables en el resto de intrucciones del
script, solamente es necesario indicar el nombre. (Eguíluz, 2023)
var numero_1;
var numero_2;
numero_1 = 2;
numero_2 = 7;
var resultado = numero_1 + numero_2;
Aunque sea correcto, en JavaScript no es necesario declarar las variables, asi que se
pueden utlizar variables que no se han definido mediante la palabra reservada var:
var numero_1 = 2;
var numero_2 = 7;
resultado = numero_1 + numero_2;
La variable resultado no está declarada, por lo que JavaScript crea una variable global
y le asigna el valor correspondiente. (Eguíluz, 2023)
Otra manera más moderna y sencilla de declarar una variable es usando let, aunque
con la desventaja de que no se puede redeclarar: (Román, 2019)
let cantidad_1 = 5;
let cantidad_2 = 4;
resultado = cantidad_1 – cantidad_2
Estructura de control de flujo: if
Las estructuras de control de flujo son mecanismos capaces de determinar el oren de
ejecución de las instrucciones en un programa. En JavaScript es permitido tomar decisiones
PROGRAMACIÓN 10
(if/else), repetir operaciones (for, while) y manejar casos especiales (switch,
try/catch). (Ranjan, 2020)
El flujo de ejecución es normalmente secuencial permitiéndonos:
• Ramificar el código
• Repetir tareas al ejecutar un código hasta que se cumpla la condición
• Gestionar errores sin interrumpir el programa del todo
En el caso de if, se emplea para tomar decisiones en función a una condición, siendo
su definición formal:
if(condicion) {
…
}
Siendo así, si la condición se cumple, siendo su valor true, se ejecutan todas las
instrucciones que se encuentran dentro de {…}; pero, si la condición no se cumple, siendo su
valor false, no se ejecuta ninguna instrucción y el programa continúa ejecutando el resto de
instrucciones del script. (Eguíluz, 2023)
Ejemplo 1: El mensaje “Hola Mundo” se mostraría al usuario al ejecutar true en
la condición y estando el programa dentro del bloque de instrucciones del if. (Román, 2019)
var mostrarMensaje = true;
if(mostrarMensaje) {
alert(“Hola Mundo”);
}
En este ejemplo, se declara una variable llamada mostrarMensaje con el valor
booleano true. Luego, se utiliza una estructura condicional if para evaluar esa variable.
Como la condición dentro del paréntesis es verdadera, el programa entra al bloque de
PROGRAMACIÓN 11
instrucciones definido por las llaves {} y ejecuta el código que contiene. En este caso, se
muestra un mensaje emergente con el texto "Hola Mundo" mediante la función alert().
Si el valor de la variable hubiese sido false, el bloque no se ejecutaría y el mensaje no
aparecería. Este tipo de estructura permite que el programa tome decisiones según ciertas
condiciones lógicas.
Ejemplo 2: El mensaje “Eres mayor de edad” se mostraría al usuario al
ejecutar true en la condición, en este caso ingresar un valor mayor o igual a 18 en el campo
de edad. (Eguíluz, 2023)
var edad = 18;
if(edad >=18 {
alert(“Eres mayor de edad”);
}
Este código declaramos una variable edad con valor 18 y luego usamos una estructura
condicional if para verificar si el valor almacenado es mayor o igual a 18. Al cumplirse esta
condición (pues 18 es igual a 18), se ejecuta el bloque de instrucciones dentro de las llaves
{}, mostrando al usuario una ventana emergente con el mensaje "Eres mayor de edad"
mediante la función alert(). Si el valor de edad fuera menor que 18 (por ejemplo, 17), la
condición no se cumpliría y el mensaje no se mostraría, ilustrando así cómo los condicionales
controlan el flujo del programa basado en evaluaciones lógicas.
PROGRAMACIÓN 12
Conclusión
JavaScript nació como una solución rápida a un problema urgente: mejorar la
experiencia del usuario en la web cuando todo era lento, rígido y frustrante. Lo que empezó
como un lenguaje “de apoyo” en el navegador, hoy es el motor que permite que los sitios
reaccionen en tiempo real, validen formularios sin recargar la página y personalicen
contenido con solo unas líneas de código.
Al permitir la manipulación directa del DOM, implementar eventos, controlar el
flujo con estructuras como if, y declarar variables dinámicamente, JavaScript transformó
páginas estáticas en aplicaciones vivas. El paso de var a let y const refleja su madurez
técnica, mientras que su integración con HTML y CSS demuestra su rol como el pilar del
comportamiento web.
En esencia, JavaScript no solo solucionó un problema de usabilidad: reescribió la
manera en que interactuamos con la información en línea. Ya no esperamos a que el servidor
nos devuelva todo; ahora, el navegador piensa, responde y actúa. Y eso, en términos de
programación, es pasar de ser espectador a ser protagonista en tiempo real.
PROGRAMACIÓN 13
Referencias
Flannagan, D. (1997). JavaScript: The Definitive Guide.
http://136.175.10.10:8090/ebook/pdf/JavaScript_The_Definitive_Guide.pdf
Bautista I. (2021). Velocidad de internet: todo lo que debes saber. (n.d.). Www.servnet.mx.
https://www.servnet.mx/blog/velocidad-de-internet-todo-lo-que-debes-saber
Eguíluz Pérez, J. (n.d.). Introducción a JavaScript. Retrieved February 12, 2023, from
https://biblus.us.es/bibing/proyectos/abreproy/12051/fichero/libros%252Flibro-
javascript.pdf
Silva, R. (2023, July 16). Cómo fue el inicio de Amazon en 1994 cuando Bezos empezó a
vender en línea. Infobae. https://www.infobae.com/tecno/2023/07/16/como-fue-el-
inicio-de-amazon-en-1994-cuando-bezos-empezo-a-vender-en-linea/
JavaScript: The Definitive Guide. (2025). Google Books.
https://books.google.com.mx/books?hl=es&lr=&id=6TAODdEIxrgC&oi=fnd&pg=P
R7&dq=javascript+preface&ots=ofckDOSrTE&sig=HfJUw3svEoRUrsR1iftA4Q1cK
7Y#v=onepage&q=javascript%20preface&f=false
iPlanet Documentation. (2025). Archive.org.
https://web.archive.org/web/20010304011342/http://docs.netscape.com/
JavaScript for Modern Web Development. (2020). Google Books.
https://books.google.com.mx/books?hl=es&lr=&id=b2bdDwAAQBAJ&oi=fnd&pg=
PT25&dq=javascript+web+development&ots=6ggDZxBlM1&sig=kDG0bFkmHUJul
iLo_Ps8tZ2ZZko#v=onepage&q=javascript%20web%20development&f=false
Primeros Pasos | MDN. (2024, December 17). MDN Web Docs.
https://developer.mozilla.org/es/docs/conflicting/Web/Guide/AJAX_21419c7dfa67c9
4789f037a33c4e4e3e
PROGRAMACIÓN 14
El objeto Image - La matriz images. (2001, June 10). DesarrolloWeb.com; Desarrollo
Web. https://desarrolloweb.com/articulos/439.php
Roman Arenaza, R. E. (2019). Lenguajes de programación Javascript Java y
Javascript. Características. Norma de escritura. Variables y operadores lógicos. Mensajes.
Ejercicios. Estructuras condicionales. Funciones y objetos. Aplicaciones.
