{Javascript }

Grupo #1
Nobeli Sori {A00111394}
Jennifer Sanchez {A00111717}
Angel Morel {A00112157}
Darwin Castillo {A00111786}
Marjury Tejada {A00112211}
Isaac Felix {A00111979}

...
Introducción de JavaScript

JavaScript es un lenguaje de
programación de alto nivel que se
utiliza principalmente para el
desarrollo web. Permite la creación de
páginas web dinámicas e interactivas al
agregar comportamientos y funciones a
los elementos HTML y CSS.
 Estructura de JavaScript

Declaración de Variables:
Se definen las variables que se utilizarán en el programa. Pueden ser
variables numéricas, de cadena, booleanas, etc. Se utilizan las palabras
clave var, let, o const para declarar variables.
 Estructuras de Control de Flujo:

Incluyen instrucciones condicionales (como if, else if, else) y

bucles (como for, while, do-while) que controlan el flujo de
ejecución del programa.
 Funciones
Las funciones son bloques de código que se pueden reutilizar para
realizar tareas específicas. Existen dos tipos de funciones:

{ Declarativas Expresivas
Se define con la palabra Se asigna una función a una
clave function seguida por un variable. Estas funciones pueden
nombre. Es útil para utilizar ser con o sin nombre. Es ideal en
la función en diferentes momentos específicos.
partes del código.
// El "saludar" es el nombre de la
function saludar() { función) y se suele omitir
const saludo = function saludar()

}
return “Hola”;
{
} return "Hola";
};
 DOM en
= +
Document Object
Model
JavaScript
Es una interfaz de programación
que representa y manipula la
estructura de un documento HTML
como un conjunto de objetos.
JavaScript utiliza el DOM para
acceder a estos objetos, modificar
su contenido, estructura y
estilos, respondiendo a eventos
como teclas presionadas o cambios
en la carga de la página.
Ejemplos
01 Acceder a un elemento HTML por su ID

02 Cambiar el contenido de un elemento HTML

03 Cambiar el estilo de un elemento HTML

 MotoresUI
Los motores UI (User Interface)
son componentes de software que
se encargan de crear y gestionar
las interfaces de usuario, es
decir, los elementos visuales y
de interacción que permiten a
las personas comunicarse con las
máquinas.
 Integración de páginas con
motores UI

La integración de páginas web con

motores de interfaz de usuario
(UI, por sus siglas en inglés)
generalmente se refiere a la
conexión entre el frontend de una
aplicación web y un motor de
interfaz de usuario que ayuda a
gestionar y renderizar la interfaz
de usuario de manera eficiente.
 Condiciones para llevar a
{ .. cabo la integración
Elegir un Motor de Configuración del Creación de
Interfaz de Usuario: Proyecto Componentes

Algunos ejemplos populares Configura tu proyecto web para Divide la interfaz de

de motores de interfaz de utilizar el motor de interfaz usuario en componentes
usuario incluyen React, de usuario seleccionado. reutilizables.
Angular, Vue.js, Svelte,
entre otros.
Estilo y Pruebas y
Integración de
Estilización Optimización:
Componentes en
Páginas Web
Aplica estilos a tus Realiza pruebas
componentes según las exhaustivas para
Integra los componentes
necesidades de tu diseño. asegurarse de que la
en las páginas web
Algunos motores de interfaz integración funcione
existentes. Dependiendo
de usuario pueden tener correctamente en
del motor de interfaz

..
sistemas integrados para diferentes navegadores
de usuario que estés
gestionar estilos y dispositivos.
utilizando
Importancia de la integración de páginas con
motores UI.
la integración de páginas con motores de interfaz de usuario no solo
mejora la eficiencia del desarrollo, sino que también contribuye
significativamente a la calidad, consistencia y mantenibilidad de una
aplicación web. Esto es crucial para ofrecer una experiencia de
usuario positiva y para facilitar la evolución continua de la
aplicación a medida que los requisitos cambian
 Bibliotecas de scripts

El término "bibliotecas de scripts"

es bastante amplio y general, y su
significado puede variar dependiendo
del contexto. En el ámbito del
desarrollo web y la programación en
general, una biblioteca de scripts
generalmente se refiere a un
conjunto de funciones y rutinas
prescritas que pueden ser utilizadas
por programas o scripts para
facilitar tareas comunes.
 Categorías comunes de bibliotecas
{ ..de scripts en desarrollo web.
Bibliotecas de Bibliotecas de
Bibliotecas de Gráficos y
Manipulación del DOM Animación:
Visualización de Datos
jQuery: Aunque ha perdido GreenSock Animation Platform (GSAP):
popularidad con la adopción D3.js: Es una poderosa biblioteca para GSAP es una biblioteca popular para
la creación de visualizaciones crear animaciones fluidas y de alto
de estándares web modernos,
interactivas en la web utilizando HTML, rendimiento en la web.
jQuery sigue siendo una SVG y CSS. Anime.js: Una biblioteca ligera para la
biblioteca conocida para Chart.js: Ofrece gráficos simples y creación de animaciones.
manipulación del DOM y atractivos para representar datos en
manejo de eventos en páginas web. Bibliotecas de UI y
JavaScript. Componentes:
Bibliotecas de Bibliotecas de React: Una biblioteca para
construir interfaces de
Manipulación de Testing
usuario reactivas. React es
más que una biblioteca de
Fechas y Tiempo: Jest: Una popular biblioteca de
scripts, es una biblioteca de
pruebas para proyectos
desarrollo de interfaces de
Moment.js: Facilita el JavaScript. usuario completa.
manejo de fechas y tiempos Mocha y Chai: Mocha proporciona Vue.js: Similar a React, pero

..
en JavaScript, un marco de pruebas, y Chai es con un enfoque más progresivo
proporcionando funciones una biblioteca de aserciones y fácil de integrar en
para analizar, validar, para realizar afirmaciones más proyectos existentes.
manipular y formatear legibles en las pruebas.
fechas.
Desarrollo de rutinas de validación
El "desarrollo de rutinas de validación" se refiere a la creación y implementación
de procedimientos o conjuntos de pasos específicos para verificar la autenticidad
o validez de ciertos datos o información.

RNC (Registro Nacional de

Contribuyentes): Similar a la
cédula, puede tener un formato
específico, como una
combinación de números y
posiblemente letras, con una
longitud determinada.
Desarrollo de rutinas de validación

Teléfono: Puede necesitar

cumplir con un formato
específico de números, que
incluya un código de país, un
código de área y un número
local, además de cualquier
otro requisito específico.

Cédula: Puede requerir una longitud específica, un formato numérico

particular y, en algunos casos, la comprobación de un dígito
verificador para garantizar su autenticidad.
 Validadores incluidos en el
framework usado

Validador de Solo Números:

Definición: Un validador que comprueba si el

valor proporcionado es exclusivamente
numérico.
Ejemplo de Uso: Garantizar que un campo
destinado a números no contenga caracteres
alfabéticos u otros símbolos.

Validador de No Nulo (NotNull):

Definición: Asegura que el valor

proporcionado no sea nulo o vacío.
Ejemplo de Uso: Garantizar que los campos
obligatorios en un formulario o solicitud no
estén en blanco.
Validador Personalizado:

Definición: Permite a los desarrolladores

definir reglas de validación personalizadas
adaptadas a requisitos específicos del
negocio.
Ejemplo de Uso: Verificar condiciones
particulares, como la longitud mínima o
máxima de una cadena, la presencia de
ciertos caracteres, etc.

Validador de Formato de Fecha:

Definición: Comprueba si la cadena o valor

ingresado sigue un formato de fecha válido.
Ejemplo de Uso: Asegurarse de que una fecha
ingresada esté en el formato correcto (por
ejemplo, "YYYY-MM-DD").
Validador de Correo Electrónico:

Definición: Verifica si una cadena cumple

con el formato típico de una dirección de
correo electrónico.

Ejemplo de Uso: Garantizar que los campos

destinados a correos electrónicos contengan
direcciones válidas.

Validador de Longitud de Cadena:

Definición: Comprueba si la longitud de una

cadena está dentro de un rango específico.

Ejemplo de Uso: Limitar la longitud de un

campo de texto para cumplir con requisitos
específicos.
Manipulación de elementos del árbol
DOM
La manipulación de elementos del árbol DOM
es la capacidad de usar JavaScript para
modificar el contenido, la estructura y el
estilo de las páginas web. El árbol DOM es
una representación jerárquica de las
etiquetas HTML que forman una página web.
Cada etiqueta es un objeto que se puede
acceder y manipular mediante JavaScript. Por
ejemplo, se puede crear, eliminar o
modificar elementos, cambiar sus atributos,
añadir clases, cambiar el texto, etc. La
manipulación del DOM permite crear páginas
web dinámicas que responden a las acciones
del usuario o a los datos externos.
Independencia del navegador
(X-platform scripting).

Es la capacidad de escribir código

JavaScript que funcione de la misma
manera en diferentes navegadores web.
Los navegadores web pueden tener
diferencias en la forma de interpretar
y ejecutar el código JavaScript, lo que
puede causar problemas de
compatibilidad o inconsistencia.
 Conclusion
En conclusión JavaScript es un lenguaje de
programación fundamental en el desarrollo web,
permitiendo la creación de interactividad y dinamismo
en las páginas. Su versatilidad se refleja en sus
componentes web, como el Modelo de Objetos del
Documento (DOM) que facilita la manipulación de la
estructura HTML, eventos que gestionan la
interactividad del usuario, AJAX para peticiones
asíncronas, y bibliotecas/frameworks como React,
Angular y Vue.js que simplifican la creación de
interfaces de usuario complejas y reactivas. En
conjunto, estos componentes forman una poderosa
herramienta para construir aplicaciones web modernas
y experiencias interactivas.
{ ..

Muchas
Gracias
} ..