6 - Desarrollo de Páginas Web Con JavaScript
6 - Desarrollo de Páginas Web Con JavaScript
Introducción
destacando su papel clave en la mejora de la interactividad y la dinámica de los sitios web modernos.
funcionalidades del lenguaje para proporcionar una comprensión profunda de su aplicación práctica.
om
utilizados en el desarrollo web, ofreciendo a los participantes una visión práctica de las
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
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
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
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
aplicaciones y usos en la actualidad. Por tanto, resulta altamente recomendable para aquellos que
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
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
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
om
Lenguaje del Navegador: JavaScript se ejecuta en el navegador del usuario, permitiendo la
.c
asíncrona con servidores.
s
ro
directamente el código fuente.
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
Animaciones y Efectos: crear animaciones y efectos visuales para mejorar la experiencia del
usuario.
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
IDEs especializados para trabajar con JavaScript. Estas plataformas ofrecen funciones como
om
DevTools permiten la inspección detallada del código JavaScript en el navegador, mientras que
.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
Webpack y Gulp son ejemplos populares que facilitan la creación de bundles, la gestión de
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
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.
conjunto.
om
estructura de carpetas y archivos simplifica la navegación y comprensión del proyecto. La
.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
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
asíncronas.
centralización del manejo de errores contribuyen a una gestión más eficiente de excepciones y
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
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
Esquema freeCodeCamp
La programación sincrónica es una técnica que se utiliza para que las computadoras realicen tareas
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
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
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
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
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
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.
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
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
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
En el código, una devolución de llamada es una función que se pasa como argumento a otra función
om
comúnmente para manejar operaciones asíncronas, como la obtención de datos de un servidor, la
.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
La callback recibe los datos recuperados por la función después de completarse el tiempo de
espera.
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.
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
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
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
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
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
Una promesa puede estar en uno de tres estados: "pendiente" (estado inicial), "cumplida" (operación
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
cemosa.aulapharos.com
14 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript
En un principio, resulta crucial resaltar las disparidades entre framework y librería, dado que
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
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
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
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
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
cemosa.aulapharos.com
15 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript
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
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
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
jQuery UI: una extensión gratuita para jQuery, se utiliza para el diseño de interfaces de
m
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
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
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.
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
código. Aunque presenta la ventaja de la renderización del lado del servidor y es compatible
Zepto: es una librería JavaScript ligera diseñada como alternativa a jQuery, abordando la
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
herramientas adicionales para simplificar el trabajo con librerías de JavaScript. Aunque está
l
au
3.2. Frameworks
m
especialmente útiles para aplicaciones web complicadas y demuestran su eficacia cuando los
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
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
realiza del lado del cliente, y el framework se basa en jQuery Lite, una versión reducida de
jQuery.
SPAs. La diferencia principal radica en que ya no se utiliza JavaScript para programar, sino
AngularJS a Angular puede resultar complicada. Sin embargo, Angular ofrece más
om
Ember.js: otro framework del lado del cliente, permite la creación de SPAs y aplicaciones de
.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
comparación con otros frameworks que suelen imponer una estructura más rígida en su uso.
l
au
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
cemosa.aulapharos.com
18 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript
El desarrollo de aplicaciones web en el lado del cliente y del servidor es una disciplina esencial en el
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
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.
En esta fase, se diseñan y desarrollan las lógicas de negocio, se accede a bases de datos para
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
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
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
web, ya que permite la interacción entre el navegador del usuario y el servidor que aloja la
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
solicitudes HTTP. Proporciona una forma más flexible y potente de interactuar con el servidor y
JavaScript.
au
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
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.
Uno. Se crea una página HTML con un título, una lista (<ul>) para mostrar las tareas y un
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
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
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
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
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
.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
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
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
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
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
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.
página web.
om
JavaScript facilita la manipulación y modificación del DOM, lo que permite cambios dinámicos
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
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
HTML Canvas.
CSS Grid.
cemosa.aulapharos.com
28 / 29
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMS] Desarrollo de páginas web con JavaScript
JavaScript?
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
cemosa.aulapharos.com
29 / 29