[AFO028L7M] Curso de Analista Programador Javascript

[MOD024H2Y] Analista Programador Javascript

[UDI152LMS] Desarrollo de páginas web con JavaScript

Introducción

En esta unidad, se abordará la importancia de JavaScript en el panorama actual de desarrollo web,

destacando su papel clave en la mejora de la interactividad y la dinámica de los sitios web modernos.

Se examinará la programación en JavaScript para el desarrollo web, sumergiéndose en la sintaxis y

funcionalidades del lenguaje para proporcionar una comprensión profunda de su aplicación práctica.

Además, se explorará el amplio ecosistema de frameworks y librerías de JavaScript comúnmente

om
utilizados en el desarrollo web, ofreciendo a los participantes una visión práctica de las

herramientas que agilizan y facilitan el proceso de creación de aplicaciones web.

s .c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
1 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Objetivos

Lograr un dominio sólido de la programación en JavaScript.

Explorar y comprender el ecosistema de frameworks y librerías de JavaScript utilizados en el

desarrollo web.

Lograr la capacidad de desarrollar aplicaciones web completas tanto en el lado del cliente

como en el servidor.

om
s .c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
2 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Mapa Conceptual

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
3 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

1. Introducción al desarrollo de aplicaciones web con

JavaScript

JavaScript se destaca como un lenguaje de programación poderoso, ofreciendo soluciones eficaces

en una amplia variedad de campos tecnológicos. Su relevancia es especialmente notable debido a

ser el único lenguaje entendido por los navegadores, siendo esencial para el desarrollo de la

funcionalidad del frontend en sitios web y aplicaciones web modernas. Sin embargo, su utilidad va

más allá, abarcando diversos tipos de desarrollos en la actualidad.

om
Algunos de los usos más significativos de JavaScript incluyen el desarrollo de sitios web en el lado

.c
del cliente (frontend, en el navegador), la creación de aplicaciones mediante la plataforma NodeJS,

s
el desarrollo de aplicaciones móviles, ya sean híbridas o compiladas a nativo, y la elaboración de

ro
aplicaciones de escritorio para sistemas Windows, Linux y Mac, permitiendo escribir un código

compatible con todas las plataformas.

ha
De esta manera, JavaScript se erige como el lenguaje universal, capaz de abordar una variedad de
ap

aplicaciones y usos en la actualidad. Por tanto, resulta altamente recomendable para aquellos que

desean aprender a programar, ya que proporciona habilidades aplicables en diversos proyectos,

l
au

algunos de los cuales son exclusivos de este lenguaje.

a.

Aunque JavaScript es levemente tipado, lo que facilita los primeros pasos en la programación, su

naturaleza presenta diferencias significativas respecto a otros lenguajes a medida que el estudiante
os

profundiza. Se requiere un estudio detallado para dominarlo completamente y comprender todas sus
m

particularidades, especialmente necesarias para desarrollar aplicaciones avanzadas con destreza.

ce

Librerías populares como jQuery o React, así como frameworks como Angular, Vue o Ionic, tienen

sus bases en JavaScript. Además, estándares ampliamente utilizados como Web Components y

librerías derivadas de ellos, como Stencil o Lit, también se basan en este lenguaje. Para abordar

eficientemente estas herramientas y muchas otras, es imperativo contar con un sólido conocimiento

de JavaScript.

cemosa.aulapharos.com
4 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

2. Programación en JavaScript para el desarrollo web

JavaScript es un lenguaje de programación creado originalmente para hacer las páginas web

interactivas. A medida que evolucionó, también se hizo popular en el desarrollo de servidores (con

Node.js) y en el desarrollo de aplicaciones móviles e incluso de escritorio.

Las características principales de JS son:

om
Lenguaje del Navegador: JavaScript se ejecuta en el navegador del usuario, permitiendo la

manipulación dinámica de elementos HTML, la interacción con el usuario y la comunicación

.c
asíncrona con servidores.

Interpretado: no necesita ser compilado, ya que los navegadores pueden interpretar

s
ro
directamente el código fuente.

Orientado a Eventos: gran parte de la programación en JavaScript se basa en la detección y

ha
respuesta a eventos, como clics de ratón, pulsaciones de teclas, etc.
ap

Su labor en el desarrollo implica los siguientes campos:

l
au

Manipulación del DOM: JavaScript permite cambiar dinámicamente el contenido y la

apariencia de una página web interactuando con el DOM (Document Object Model).
a.

Validación de Formularios: se puede usar JavaScript para validar datos de entrada del
os

usuario en formularios antes de enviarlos al servidor.

Comunicación Asíncrona: realizar solicitudes asíncronas al servidor utilizando tecnologías

m

como AJAX (Asynchronous JavaScript and XML).

ce

Animaciones y Efectos: crear animaciones y efectos visuales para mejorar la experiencia del

usuario.

2.1. Herramientas y recursos para programadores

En el ámbito de la programación en JavaScript, es esencial contar con diversas herramientas y

recursos que faciliten el desarrollo eficiente y la gestión efectiva del código. Estas herramientas no

solo optimizan el flujo de trabajo del programador, sino que también contribuyen a mejorar la

cemosa.aulapharos.com
5 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

calidad y la fiabilidad del código producido.

Entornos de Desarrollo Integrados (IDEs): los programadores disponen de una variedad de

IDEs especializados para trabajar con JavaScript. Estas plataformas ofrecen funciones como

resaltado de sintaxis, completado automático, depuración integrada y gestión de proyectos.

Ejemplos notables incluyen Visual Studio Code, Atom y WebStorm.

Depuración y Pruebas en JavaScript: para garantizar la estabilidad y el rendimiento del

código, se emplean herramientas de depuración y pruebas. Herramientas como Chrome

om
DevTools permiten la inspección detallada del código JavaScript en el navegador, mientras que

bibliotecas de pruebas como Jest facilitan la creación y ejecución de pruebas unitarias y de

.c
integración.

s
Control de Versiones: la gestión eficaz del código se logra mediante sistemas de control de

ro
versiones. Git es ampliamente utilizado para rastrear cambios, colaborar en proyectos y
ha
mantener un historial de versiones. Plataformas como GitHub y GitLab ofrecen servicios

basados en la nube para alojar repositorios y facilitar la colaboración entre desarrolladores.

ap

Herramientas de Construcción y Automatización: para simplificar tareas repetitivas y

optimizar el flujo de trabajo, se utilizan herramientas de construcción y automatización.

l
au

Webpack y Gulp son ejemplos populares que facilitan la creación de bundles, la gestión de

dependencias y la optimización de recursos.

a.

Sistemas de Gestión de Paquetes: Node Package Manager (NPM) es fundamental en el

os

ecosistema JavaScript para gestionar dependencias y bibliotecas. Permite la instalación,

actualización y eliminación de paquetes, garantizando la coherencia en el entorno de

m

desarrollo.
ce

Herramientas de Análisis Estático del Código: herramientas como ESLint ofrecen análisis

estático del código para identificar posibles errores y asegurar la consistencia en el estilo de

codificación. Esto contribuye a mantener un código limpio y fácilmente mantenible.

2.2. Estrategias de organización de código en JavaScript

En este contexto, diversas estrategias y enfoques son empleados con el objetivo de estructurar el

código de manera coherente, fomentando tanto la comprensión como la colaboración efectiva entre

cemosa.aulapharos.com
6 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

desarrolladores.

Enfoque en la Modularización y Uso de Módulos: la práctica de dividir la lógica de la

aplicación en módulos independientes y reutilizables destaca como un elemento clave. Al

incorporar conceptos como CommonJS o ECMAScript Modules (ESM), es posible crear

unidades de código separadas que facilitan la gestión y comprensión del sistema en su

conjunto.

Estrategias para la Estructura del Código: la adopción de prácticas sólidas para la

om
estructura de carpetas y archivos simplifica la navegación y comprensión del proyecto. La

organización basada en funcionalidades o tipos de recursos, junto con convenciones de

.c
nomenclatura consistentes, contribuye significativamente a mantener una estructura clara y

s
ordenada.

ro
Optimización de la Gestión de Dependencias: la utilización de herramientas como NPM o
ha
Yarn para administrar dependencias externas es fundamental. Este enfoque asegura una

integración suave de bibliotecas y facilita la actualización y mantenimiento eficiente, con la

ap

documentación clara de dependencias en archivos específicos.

Énfasis en la Documentación del Código: la inclusión de documentación clara, ya sea

l
au

mediante comentarios pertinentes o anotaciones en el estilo JSDoc, potencia la comprensión

del código fuente. Herramientas como JSDoc permiten generar documentación

a.

automáticamente, fortaleciendo la comunicación y comprensión entre los miembros del equipo.

os

Reducir el Acoplamiento mediante Patrones de Diseño: la implementación de patrones de

diseño, como el patrón de módulo o el patrón de observador, se destaca como una estrategia
m

clave para reducir el acoplamiento y estructurar el código de manera más flexible. Se fomenta
ce

el uso de prácticas modernas, como Promesas o Async/Await, para gestionar operaciones

asíncronas.

Gestión Efectiva de Errores y Excepciones: integrar prácticas sólidas para el manejo de

errores mejora la robustez del código. La aplicación coherente de bloques try-catch y la

centralización del manejo de errores contribuyen a una gestión más eficiente de excepciones y

mejoran la estabilidad del sistema.

Incorporación de Pruebas Unitarias e Integración Continua: integrar pruebas unitarias

en el proceso de desarrollo, mediante herramientas como Jest o Mocha, resulta fundamental.

La integración continua con plataformas como Travis CI o Jenkins automatiza las pruebas,

cemosa.aulapharos.com
7 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

garantizando la confiabilidad y estabilidad del proyecto.

2.3. Programación asíncrona en JavaScript

Para comprender el significado de la programación asíncrona, se puede imaginar a un grupo de

personas trabajando en simultáneo en un proyecto, cada una dedicada a una tarea distinta.

om
En la programación tradicional y sincrónica, cada persona debe esperar a que la anterior complete

su tarea antes de comenzar la propia. En cambio, con la programación asíncrona, cada individuo

puede iniciar su tarea y trabajar en paralelo, sin depender de que los demás finalicen sus labores.

s .c
De manera análoga, en el ámbito de un programa informático, la programación asíncrona permite

ro
que el programa realice varias tareas simultáneamente sin esperar a completar una tarea para pasar

a la siguiente. Esto posibilita que un programa lleve a cabo más acciones en menos tiempo.
ha
Por ejemplo, un programa puede enviar una solicitud a un servidor mientras gestiona y procesa la
ap

información del usuario, todo al mismo tiempo. De esta manera, un programa puede ejecutarse de

manera más eficiente.

l
au
a.
os
m
ce

Esquema freeCodeCamp

Comprender la programación asíncrona es fundamental para desarrollar aplicaciones web de alto

rendimiento, ya sea como un desarrollador experimentado o como principiante en JavaScript.

La programación sincrónica es una técnica que se utiliza para que las computadoras realicen tareas

paso a paso, siguiendo el orden en que se les proporcionan las instrucciones.

cemosa.aulapharos.com
8 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Se puede ilustrar este enfoque comparándolo con la preparación de una cena donde hay una lista de

tareas, como hervir agua para la pasta, freír pollo y preparar una ensalada. En la programación

sincrónica, estas tareas se realizarían una por una, esperando a que cada una termine antes de

pasar a la siguiente. Esto facilita la comprensión y predicción de las acciones de la computadora en

cualquier momento dado.

A continuación, se presenta un ejemplo de código sincrónico en JavaScript:

om
s.c
ro
ha
l ap
au

Código síncrono
a.

Este código mostrará los mensajes en el orden en que aparecen: "Tarea 1", "Tarea 2", "Tarea 3".
os

Cada tarea se ejecuta en secuencia, esperando a que la anterior termine.

m

No obstante, la programación sincrónica puede generar problemas en situaciones específicas,

especialmente cuando se trata de tareas que demandan un tiempo considerable para completarse.
ce

Por ejemplo, si un programa sincrónico espera una respuesta de un servidor remoto, quedará

bloqueado hasta recibir dicha respuesta, lo que puede resultar en una aplicación no receptiva o

aparentemente "congelada" para el usuario.

Se presenta un ejemplo adicional para ilustrar esta limitación:

cemosa.aulapharos.com
9 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

om
Ejemplo con limitación

.c
En este caso, el programa se bloqueará durante 5 segundos mientras la función

s
ro
funcionDeLargaDuracion() se ejecuta, impidiendo la ejecución de la siguiente línea de código y

afectando la capacidad de respuesta de la aplicación. En contraste, la programación asíncrona

ha
permitiría que el programa continuara ejecutando otras instrucciones mientras espera que la tarea

de larga duración se complete.

ap

La programación asíncrona se define como una modalidad mediante la cual un programa de

l
au

computadora administra varias tareas simultáneamente, evitando ejecutarlas de manera secuencial.

a.

Esta metodología posibilita que un programa continúe con otras tareas mientras aguarda eventos

externos, como solicitudes de red, lo que puede resultar en mejoras significativas en el rendimiento
os

y la capacidad de respuesta del programa.

m

Un ejemplo práctico de programación asíncrona se ilustra con el uso del método setTimeout:
ce

Timeout

En este contexto, el método setTimeout ejecuta una función después de un intervalo de tiempo

cemosa.aulapharos.com
10 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

específico. La función asignada a setTimeout se ejecutará de manera asíncrona, lo que permite que

el programa continúe con la siguiente línea de código sin esperar la finalización del tiempo de

espera.

Al ejecutar este código, se obtiene el siguiente resultado:

om
Resultado

.c
Como se observa, console.log("Primer tiempo muerto completado") se ejecuta después de 2

s
segundos, mientras el guión sigue su ejecución sin provocar bloqueos o "congelamientos".

ro
En JavaScript, la programación asíncrona se implementa a través de diversas técnicas, siendo una
ha
de las más comunes el empleo de callbacks o retrollamadas.
ap

2.3.1. CallBacks
l
au

En la planificación de una fiesta de cumpleaños para un hijo/a, se puede utilizar la analogía de la

programación asíncrona al organizar diversos preparativos, como enviar invitaciones, encargar la

a.

torta y planificar juegos. Supongase que se desea contratar a un payaso para entretener a los

invitados, pero solo se le puede pedir que venga una vez completados todos los demás preparativos y
os

después de que los invitados hayan llegado.

m
ce

cemosa.aulapharos.com
11 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Clown freecodecamp

En este contexto, el payaso simboliza una función de devolución de llamada (callback), y la condición

de que solo aparezca después de la llegada de los invitados refleja la función cuya ejecución debe

completarse antes de activar la devolución de llamada.

En el código, una devolución de llamada es una función que se pasa como argumento a otra función

y se ejecuta después de que la primera función ha concluido su ejecución. En JavaScript, se utiliza

om
comúnmente para manejar operaciones asíncronas, como la obtención de datos de un servidor, la

espera de la entrada de datos por parte del usuario o el manejo de eventos.

.c
A continuación, se presenta un ejemplo simple de cómo se puede usar una función de devolución de

s
llamada para gestionar una operación asíncrona:

ro
ha
l ap
au
a.
os

Callback
m

En este ejemplo:
ce

La función obtenerDatos utiliza setTimeout para simular una operación asíncrona y recibe una

función de devolución de llamada (callback) como argumento.

La callback recibe los datos recuperados por la función después de completarse el tiempo de

espera.

setTimeout se emplea para ejecutar la callback después de un tiempo especificado (3

segundos). La callback se ejecutará de forma asíncrona, lo que implica que el programa

continuará ejecutando la siguiente línea de código sin esperar a que se complete el tiempo de

cemosa.aulapharos.com
12 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

espera.

Al ejecutar el código, se obtiene el siguiente resultado:

Resultado

om
Como se puede observar, console.log("Se están obteniendo los datos...") se ejecutará de

inmediato, mientras que la ejecución de la callback, que muestra los datos obtenidos, ocurrirá

.c
después de 3 segundos. Esto ejemplifica cómo la programación asíncrona permite que el programa

s
continúe ejecutando instrucciones sin esperar a que se completen las operaciones asíncronas.

2.3.2. Promesas ro
ha
ap

La promesa en JavaScript representa una forma más organizada de gestionar operaciones

asíncronas en comparación con los callbacks. Aunque cumple el mismo propósito que un callback,
l
au

una promesa ofrece capacidades adicionales y tiene una sintaxis más legible.

En términos simples, una promesa es un marcador de posición para un valor o acción futura. Al
a.

crear una promesa, se le indica al motor de JavaScript que "prometa" llevar a cabo una acción
os

específica y notificar una vez que se haya completado o fallado.

m
ce

Promesa freecodecamp

cemosa.aulapharos.com
13 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Las funciones de devolución de llamada se adjuntan a las promesas para manejar el resultado de la

acción, siendo llamadas cuando la promesa se cumple (acción completada exitosamente) o cuando se

rechaza (acción fallida).

Para crear una promesa, se debe instanciar un objeto Promise llamando al constructor Promise. El

constructor toma un argumento: una función llamada "executor", la cual se ejecuta inmediatamente

cuando se crea la promesa. Esta función tiene dos argumentos: una función de resolución (resolve) y

una función de rechazo (reject).

om
.c
s
Crear promesa

ro
Al inspeccionar el objeto myPromise, se observa que tiene un estado "pendiente" y un valor
ha
indefinido, ya que aún no se ha realizado ninguna configuración para el objeto de la promesa.
ap

Para configurar la promesa y hacer que se resuelva con una cadena después de 2 segundos, se

puede escribir:
l
au
a.
os

Configurar promesa
m

Ahora, al inspeccionar el objeto myPromise, se encuentra que tiene un estado "cumplida" y un valor
ce

correspondiente a la cadena de caracteres que se pasó a la función resolve.

Una promesa puede estar en uno de tres estados: "pendiente" (estado inicial), "cumplida" (operación

completada con éxito) o "rechazada" (operación fallida).

Es crucial destacar que una promesa se considera resuelta tanto si se completa con éxito como si se

rechaza. Este concepto sienta las bases para entender cómo consumir promesas, que es la siguiente

etapa de utilización de este poderoso paradigma en JavaScript

cemosa.aulapharos.com
14 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

3. Frameworks y librerías de JavaScript para el desarrollo web

En un principio, resulta crucial resaltar las disparidades entre framework y librería, dado que

frecuentemente son utilizados de manera inapropiada como términos equivalentes. Aunque

comparten similitudes en múltiples aspectos, existen notables diferencias entre ambos.

Dentro del ámbito de la codificación, el concepto de "librería" hace referencia a un conjunto de

aplicaciones, ya sea que incluyan clases, componentes u otras formas de recursos. Las librerías

om
siempre contienen subrutinas diseñadas para simplificar la programación mediante funciones de

asistencia. A diferencia de un framework, una librería está concebida para ser empleada de manera

.c
específica y presenta funciones ajustadas entre sí. Un ejemplo ilustrativo es la librería D3.js de

JavaScript, que viabiliza la visualización de datos y facilita la creación de tablas, gráficos,

s
ro
estadísticas, así como representaciones gráficas complejas con animaciones y opciones interactivas.

Dichas librerías están conectadas a un software que accede a sus funciones correspondientes
ha
cuando es necesario, funcionando exclusivamente dentro del entorno de un programa sin la

capacidad de ejecutarse de manera autónoma.

ap

En contraste, un framework, cuya traducción al inglés es "infraestructura" o "armazón", no

l
au

constituye un programa independiente, sino más bien una categoría especial de librería de clases.

Los frameworks representan la estructura del software (el marco) de una aplicación y esencialmente
a.

definen el proceso de desarrollo. Estos poseen modelos particulares de desarrollo que abarcan
os

diversas funciones (frecuentemente en forma de múltiples librerías) y se utilizan para erigir

aplicaciones nuevas e independientes. Un ejemplo paradigmático es el Zend Framework para PHP,

m

aplicable en software para tiendas online como Magento y también en la herramienta de análisis
ce

web Piwik.

Una distinción suplementaria entre un framework y una librería reside en su control. En el caso de

las librerías, los programadores acceden al código a través de la interfaz de programación de un

software. En contraposición, los frameworks implementan una "Inversión del Control" (IoC): el

código se integra en las estructuras predefinidas del framework y se ejecuta cuando es requerido.

En resumen, las librerías son invocadas por el programa, mientras que los frameworks establecen

las directrices para el programa.

Dentro del contexto de JavaScript, su característica más sobresaliente es ser un lenguaje de

cemosa.aulapharos.com
15 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

programación óptimo para el lado del navegador. No obstante, la manipulación de la interfaz de la

página web, conocida como DOM (Modelo de Objetos del Documento), resulta desafiante para

muchos programadores. En este punto, entran en acción los frameworks de JavaScript y sus

librerías, simplificando la labor de los desarrolladores en diversos aspectos de la programación. Las

extensiones de JavaScript mencionadas a continuación están disponibles para descargarse de

manera gratuita.

om
3.1. Librerías

Las bibliotecas JavaScript representan conjuntos de códigos reutilizables utilizados para asignar

.c
funciones y características a páginas web. jQuery destaca como la más reconocida, pero hay otras

s
opciones relevantes.

ro
ha
jQuery: es la librería JavaScript más utilizada, gracias a su capacidad para escribir código

compatible con diversos navegadores y a la disponibilidad de numerosos plugins. Se incluye en

ap

sistemas de gestión de contenidos populares como WordPress, Drupal y Joomla!. Ampliamente

reconocida por su práctica interfaz de DOM, jQuery ofrece ventajas como la asistencia de Ajax
l
au

para realizar solicitudes HTTP sin recargar la página. Sin embargo, presenta inconvenientes,

como posible lentitud en comparación con CSS y la tendencia a generar código extenso que
a.

algunos llaman "código espagueti". Aunque es extensa, se ha vuelto algo redundante con las
os

nuevas funciones de JavaScript.

jQuery UI: una extensión gratuita para jQuery, se utiliza para el diseño de interfaces de
m

usuario en páginas y aplicaciones web. Facilita la creación de efectos e interacciones con su

ce

manejo sencillo y la disponibilidad de widgets. Ofrece funciones como drag and drop, aumento

y disminución de elementos web, entre otras. El editor gráfico ThemeRoller permite crear

temas personalizados, aunque su progreso de desarrollo es lento y requiere jQuery.

Dojo Toolkit: una de las bibliotecas JavaScript más antiguas aún relevantes, está diseñada

para aplicaciones web dinámicas. Sus componentes principales, Dojo y Dijit, facilitan la

incorporación de elementos en la página mediante widgets predefinidos. Aunque ofrece

facilidad de uso con widgets y soporte para Ajax, su aprendizaje puede resultar difícil, y su

progreso de desarrollo es relativamente lento. Destaca por ser una biblioteca amplia y modular.

React: inicialmente utilizada en el newsfeed de Facebook en 2011, se convirtió en una librería

cemosa.aulapharos.com
16 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

JavaScript de código abierto en 2013 para la creación de interfaces de usuario. Destaca por su

versatilidad, siendo aplicable no solo en clientes de páginas web, sino también en el servidor y

en el desarrollo de aplicaciones. La implementación de un DOM virtual facilita el análisis de

aplicaciones web, y su técnica de flujo de datos en una dirección proporciona estabilidad al

código. Aunque presenta la ventaja de la renderización del lado del servidor y es compatible

con aplicaciones móviles, su curva de aprendizaje puede resultar desafiante.

Zepto: es una librería JavaScript ligera diseñada como alternativa a jQuery, abordando la

complejidad que algunos desarrolladores encuentran en esta última. Su minimalismo permite

om
una carga más rápida y ocupa menos espacio, siendo ideal para integrarse en aplicaciones

móviles. Sin embargo, no es compatible con navegadores más antiguos, y para funciones como

.c
Ajax y animaciones, se requiere el uso de módulos adicionales. Aunque es fácil de aprender,

s
Zepto ofrece pocas ventajas en comparación con jQuery.

ro
CreateJS: no es una sola biblioteca, sino una suite compuesta por cuatro bibliotecas
ha
diferentes: EaselJS (gráficos e interactividad), TweenJS (animaciones), SoundJS (audio) y

PreloadJS (preloading). Estas bibliotecas son independientes, lo que permite implementar solo
ap

aquellas necesarias en un proyecto específico. Además de las bibliotecas, CreateJS proporciona

herramientas adicionales para simplificar el trabajo con librerías de JavaScript. Aunque está
l
au

centrada en el desarrollo de aplicaciones HTML5 y Flash, su comunidad es relativamente

pequeña, y se integra de manera fluida con Adobe Animate.

a.
os

3.2. Frameworks
m

El recuento de frameworks JavaScript supera considerablemente al de librerías. Estas últimas son

ce

especialmente útiles para aplicaciones web complicadas y demuestran su eficacia cuando los

desarrolladores participan en la formulación y descripción del marco correspondiente.

AngularJS: el framework desarrollado por Google, destaca por contar con la comunidad más

extensa entre los frameworks de JavaScript. Utilizado para la creación de aplicaciones web de

una sola página (SPA), al igual que su competidor React de Facebook, se apoya en el patrón

MVVM (Model-View-ViewModel) para facilitar el desarrollo de aplicaciones especializadas en

interacción con los usuarios. Aunque algunos proveedores lo describen humorísticamente como

cemosa.aulapharos.com
17 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

un "Model-View-Whatever" (modelo-vista-lo que sea), la renderización de la aplicación se

realiza del lado del cliente, y el framework se basa en jQuery Lite, una versión reducida de

jQuery.

Angular: también conocido como Angular 2, sucede a AngularJS y se centra en el desarrollo de

SPAs. La diferencia principal radica en que ya no se utiliza JavaScript para programar, sino

TypeScript. Aunque TypeScript se basa en JavaScript y es compatible con él, la migración de

AngularJS a Angular puede resultar complicada. Sin embargo, Angular ofrece más

posibilidades y facilita el desarrollo multiplataforma sin restricciones directas.

om
Ember.js: otro framework del lado del cliente, permite la creación de SPAs y aplicaciones de

escritorio. Distinguiéndose de AngularJS, los creadores de Ember.js involucran intensamente a

.c
la comunidad en el proceso de desarrollo, discutiendo cambios importantes antes de su

s
implementación. Diseñado para desarrolladores con experiencia, Ember.js se presenta como un

ro
framework para aplicaciones web ambiciosas.
ha
Vue.js: también un framework de JavaScript para el desarrollo de SPAs, presenta similitudes

con Angular y React. Sus desarrolladores han diseñado Vue.js para facilitar su aprendizaje,
ap

permitiendo la integración de plantillas en HTML. Además, Vue.js es más flexible en

comparación con otros frameworks que suelen imponer una estructura más rígida en su uso.
l
au

Meteor: también conocido como MeteorRJ, es un framework de JavaScript especialmente

adecuado para el desarrollo cross-platform, permitiendo a los desarrolladores crear

a.

aplicaciones web y móviles con un código único. Una ventaja adicional es la capacidad de
os

enviar cambios directamente a los clientes mediante su propio Distributed Data Protocol

(DDP). Meteor ofrece Galaxy, una plataforma de pago que facilita la publicación y el
m

alojamiento en la nube de proyectos. El framework funciona con Node.js, por lo que es

ce

recomendable tener conocimientos en este entorno de desarrollo. Meteor introduce un

concepto revolucionario al permitir la creación de backend y frontend sin modificar el lenguaje.

cemosa.aulapharos.com
18 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

4. Desarrollo de aplicaciones web en el lado del cliente y del

servidor

El desarrollo de aplicaciones web en el lado del cliente y del servidor es una disciplina esencial en el

ámbito de la programación, donde se abordan aspectos cruciales para la creación y el

funcionamiento de aplicaciones interactivas y dinámicas en la web.

En el lado del cliente, se enfoca en la implementación y ejecución de código en el navegador web del

om
usuario. Aquí, las tecnologías principales son HTML, CSS y JavaScript. HTML (Hypertext Markup

Language) proporciona la estructura básica de la página web, CSS (Cascading Style Sheets) se

.c
encarga del diseño y la presentación, y JavaScript se utiliza para la interactividad y la manipulación

s
dinámica de los elementos de la página.

ro
Además, el uso de bibliotecas y frameworks como jQuery, React, o Vue.js facilita el desarrollo del
ha
lado del cliente al proporcionar herramientas y abstracciones que simplifican tareas comunes, como

la manipulación del DOM (Document Object Model) y la gestión de eventos.

ap

En el lado del servidor, se trabaja con tecnologías que permiten gestionar las solicitudes de los
l

clientes, procesar datos y enviar respuestas. Los lenguajes de programación comunes para el
au

desarrollo en el lado del servidor incluyen JavaScript (Node.js), Python (Django, Flask), Java
a.

(Spring), Ruby (Ruby on Rails), entre otros.

os

En esta fase, se diseñan y desarrollan las lógicas de negocio, se accede a bases de datos para

recuperar o almacenar información, y se gestionan aspectos como la autenticación y la autorización

m

de usuarios. Los frameworks del lado del servidor, como Express.js (para Node.js), Flask (para
ce

Python) o Ruby on Rails (para Ruby), proporcionan estructuras y herramientas que agilizan el

desarrollo y aseguran buenas prácticas.

La comunicación entre el lado del cliente y del servidor se realiza a través de solicitudes HTTP. El

intercambio de datos se lleva a cabo, comúnmente, mediante formatos como JSON (JavaScript

Object Notation). Esta interacción permite la actualización dinámica de la interfaz de usuario, la

gestión de sesiones de usuario, y otros aspectos esenciales para la experiencia interactiva en la web.

cemosa.aulapharos.com
19 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

4.1. Comunicación en el lado del cliente

La comunicación en el lado del cliente es un aspecto fundamental en el desarrollo de aplicaciones

web, ya que permite la interacción entre el navegador del usuario y el servidor que aloja la

aplicación. Esta comunicación se basa principalmente en el intercambio de datos a través del

protocolo HTTP (Hypertext Transfer Protocol) y puede adoptar diversas formas y tecnologías:

Las solicitudes HTTP, como GET y POST, son el medio principal para que el cliente envíe

om
peticiones al servidor. Estas solicitudes contienen información importante, como parámetros y

datos del usuario, que el servidor utiliza para procesar y responder de manera adecuada.

.c
AJAX es una técnica que permite realizar solicitudes asíncronas al servidor sin tener que

s
recargar toda la página. Esto posibilita la actualización dinámica de contenido sin afectar la

ro
experiencia del usuario. JavaScript juega un papel crucial al gestionar estas solicitudes y

procesar las respuestas del servidor.

ha
La Fetch API es una interfaz moderna de JavaScript que simplifica aún más la realización de
ap

solicitudes HTTP. Proporciona una forma más flexible y potente de interactuar con el servidor y

manejar las respuestas. Es especialmente común en el desarrollo de aplicaciones basadas en

l

JavaScript.
au

WebSockets ofrecen una comunicación bidireccional entre el cliente y el servidor, lo que

a.

significa que tanto el cliente como el servidor pueden enviar mensajes en cualquier momento.

Esto es útil para aplicaciones que requieren actualizaciones en tiempo real, como chats o
os

juegos en línea.
m

La arquitectura de API RESTful (Representational State Transfer) se basa en estándares HTTP

y se ha vuelto muy popular para la comunicación entre el cliente y el servidor. Las solicitudes
ce

RESTful generalmente se realizan a través de URL bien definidas y devuelven datos en formato

JSON.

Ejemplo de comunicación del lado del cliente:

Uno. Se crea una página HTML con un título, una lista (<ul>) para mostrar las tareas y un

formulario con un campo de entrada de texto y un botón.

Dos. Se incluye un script (<script>) que vincula el archivo JavaScript (script.js).

cemosa.aulapharos.com
20 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

om
.c
s
Código HTML
ro
ha
Tres. Se define una función loadTasks que utiliza AJAX (XMLHttpRequest) para realizar una
ap

solicitud GET al servidor y obtener la lista de tareas.

l
au

Cuatro. Otra función, displayTasks, toma las tareas obtenidas y las muestra en la página.

Cinco. La función addTask se utiliza para agregar nuevas tareas al enviar una solicitud POST al
a.

servidor.
os
m
ce

cemosa.aulapharos.com
21 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
22 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Código JS

Seis. Al cargar la página (window.onload), se llama a la función loadTasks que realiza una solicitud

GET al servidor para obtener la lista de tareas existentes y mostrarlas en la página.

Siete. La función addTask se dispara cuando el usuario hace clic en el botón "Agregar tarea".

Obtiene el valor del nuevo título de tarea, realiza una solicitud POST al servidor para agregar la

nueva tarea y luego vuelve a cargar la lista actualizada de tareas.

om
4.2. Comunicación del lado del servidor

.c
La comunicación del lado del servidor implica la interacción entre el servidor y la aplicación cliente,

s
ro
generalmente a través de solicitudes y respuestas. Este proceso permite que la aplicación obtenga

datos, realice operaciones y mantenga la coherencia entre el cliente y el servidor.

ha
Uno. Se tiene un servidor con una API que maneja las solicitudes relacionadas con las tareas de una
ap

lista.
l
au
a.
os
m
ce

Inicio

Dos. El servidor tiene un endpoint /tasks que responde a las solicitudes GET con la lista de tareas

en formato JSON.

cemosa.aulapharos.com
23 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Tasks

om
Tres. Desde el lado del cliente (por ejemplo, una aplicación web), se realiza una solicitud GET para

obtener las tareas.

.c
s
ro
ha
ap

Get
l
au

Cuatro. Además, el servidor puede tener un endpoint para agregar una nueva tarea a la lista, como

/addTask.
a.
os
m
ce

Agregar tarea

Cinco. Desde el lado del cliente, se realiza una solicitud POST para agregar una nueva tarea.

cemosa.aulapharos.com
24 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

om
.c
s
Solicitud POST

ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
25 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

5. Optimización y rendimiento en el desarrollo de aplicaciones

web con JavaScript

En el desarrollo de aplicaciones web con JavaScript, se implementa la carga asíncrona para recursos

como scripts y hojas de estilo, permitiendo evitar bloqueos en la carga de la página y acelerando el

tiempo de carga. Se recomienda combinar y minificar archivos JavaScript y CSS para reducir el

número de solicitudes HTTP y el tamaño de los archivos. La compresión de imágenes también se

considera esencial, utilizando herramientas como ImageOptim o TinyPNG para mantener la calidad

om
mientras se reduce el tamaño de los archivos.

.c
Es fundamental configurar el caching adecuado para los recursos estáticos, haciendo uso de

s
cabeceras de caché que permitan a los navegadores almacenar en caché archivos y evitar descargas

ro
innecesarias. La carga diferida (lazy loading) se implementa para imágenes y contenido no esencial

en la carga inicial, mejorando así los tiempos de carga. Se recomienda evitar solicitudes síncronas y
ha
utilizar solicitudes asíncronas o promesas para operaciones que puedan llevar tiempo.
ap

En cuanto a la manipulación del DOM, se sugiere realizar operaciones eficientes para minimizar

reflow y repaint, factores que pueden afectar negativamente al rendimiento. Se aconseja un uso
l
au

eficiente de eventos, evitando sobrecargar el sistema con demasiados eventos y utilizando

delegación de eventos cuando sea posible.

a.

Es importante realizar análisis y perfilado del rendimiento utilizando herramientas de desarrollo del
os

navegador para identificar y abordar posibles cuellos de botella. Para aplicaciones web progresivas
m

(PWA), se implementan service workers para habilitar el almacenamiento en caché y permitir el

funcionamiento fuera de línea.

ce

En el ámbito del código, se busca la eficiencia y legibilidad, aplicando técnicas de programación

eficiente y evitando patrones que puedan causar bloqueos o consumir demasiados recursos. Al

seguir estas prácticas, se logra mejorar sustancialmente el rendimiento de las aplicaciones web

JavaScript, proporcionando a los usuarios una experiencia más rápida y eficiente.

cemosa.aulapharos.com
26 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Recuerda

JavaScript permite agregar interactividad y dinamismo a las páginas web del lado del cliente.

Las acciones como validación de formularios, animaciones, y actualizaciones de contenido sin

recargar la página son posibles gracias a JavaScript.

El Document Object Model (DOM) es la representación en memoria de la estructura de una

página web.

om
JavaScript facilita la manipulación y modificación del DOM, lo que permite cambios dinámicos

en la apariencia y contenido de una página.

JavaScript posibilita la programación asíncrona, crucial para realizar operaciones sin bloquear

.c
la ejecución del resto del código.

s
Frameworks como Meteor permiten el desarrollo cross-platform, donde el mismo código se

ro
utiliza para construir aplicaciones tanto web como móviles.
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
27 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

Autoevaluación

¿Qué es JavaScript y cuál es su principal función en el desarrollo web?

Un lenguaje de programación para agregar interactividad al lado del cliente en

páginas web.

om
Un lenguaje de programación para el desarrollo de aplicaciones móviles.

.c
Una base de datos utilizada en el lado del servidor.

s
ro
¿Cuál es la utilidad principal de AJAX en el desarrollo web?
ha
Controlar la apariencia visual de una página web.
l ap

Realizar solicitudes al servidor sin recargar la página.

au
a.

Realizar solicitudes al servidor recargando la página.

os

¿Cómo se llama la representación en memoria de la estructura de una página

m

web que JavaScript puede manipular?

ce

Document Object Model (DOM).

HTML Canvas.

CSS Grid.

¿Qué función cumplen los frameworks y bibliotecas en el desarrollo web con

cemosa.aulapharos.com
28 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript

JavaScript?

Facilitar y agilizar el desarrollo proporcionando patrones y estructuras predefinidas.

Definir el estilo visual de una página web.

Realiza labores de posicionamiento web.

om
¿Cuál es uno de los enfoques para optimizar el rendimiento de aplicaciones web

.c
con JavaScript?

s
ro
Aplicar técnicas como carga asíncrona, minificación y compresión de recursos.
ha
Utilizar solo código síncrono.
l ap

Aumentar la complejidad del código.

au
a.
os
m
ce

cemosa.aulapharos.com
29 / 29