Nombre: Juan Punin

Fecha : 28/10/2024

Qué es JavaScript
JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a
objetos, utilizado principalmente en el desarrollo web, pensado para agregar
potencial de interacción y dinamismo a las páginas web.

Es compatible con todos los navegadores modernos y se ejecuta del lado del cliente, lo que
significa que se ejecuta en el navegador web del usuario final. Además de su uso en el
desarrollo web, JavaScript también se utiliza en aplicaciones de servidor (con tecnologías como
Node.js) y en el desarrollo de aplicaciones móviles y de escritorio.

JavaScript proporciona una amplia gama de funcionalidades, como manipulación del DOM
(Document Object Model) para interactuar con elementos de una página web, manejo de
eventos, comunicación con servidores a través de AJAX, creación de animaciones, validación
de formularios y mucho más. Es un lenguaje flexible y dinámico que permite a
los desarrolladores crear experiencias interactivas y ricas en contenido.

Es importante destacar que JavaScript no está relacionado con Java, a pesar de tener un
nombre similar. Son dos lenguajes de programación diferentes con propósitos y características
distintas

Para qué sirve JavaScript

En el contexto actual, JavaScript se utiliza para todo, gracias a la introducción de Node.js. Esta
tecnología crea software robusto para empresas en todo el mundo. Por si fuera poco,
organizaciones como LinkedIn y Medium lo implementan al construir plataformas para que los
usuarios tengan acceso a sus servicios.

Lo que se puede hacer con JavaScript abarca diferentes tipos de software, como juegos,
programas de computadora, aplicaciones web y hasta tecnologías de blockchain. JavaScript es
posiblemente el lenguaje de programación más popular de la web. Por ejemplo, más de
125.000 empleos en LinkedIn buscan profesionales con habilidades en JavaScript.

Ya que hemos discutido el alcance de JavaScript en la industria laboral, hablemos más de su

uso más común: el desarrollo web.

JavaScript para desarrollo web

El uso más popular de JavaScript es para el desarrollo web, y es una de las herramientas más
poderosas que un desarrollador puede tener en sus manos. Los desarrolladores usan
JavaScript en esta área para añadir interactividad y funciones que mejoren la experiencia del
usuario y que internet se disfrute mucho más.

JavaScript se ha expandido más allá del desarrollo de interfaz, que es donde comenzó.
Recientemente, JavaScript ha llegado al back-end, o dorsal de desarrollo web.
Esto quiere decir que los desarrolladores tienen acceso de interfaz a métodos CRUD (Create,
Read, Update, Destroy; en español: Crear, Leer, Actualizar, Destruir) y hasta puede utilizarse
en el motor de un sitio web.

 Interactividad de interfaz o front-end: el desarrollo web mejora solamente por

el aumento de la interactividad y funciones que JavaScript ofrece.
 Aplicaciones Web: las aplicaciones web son similares a los sitios, pero en su lugar
pueden empacarse en una caja más compacta, que mejora el control de la
seguridad y otros aspectos.
 Juegos de navegador: los navegadores web actuales han cambiado mucho; los
desarrolladores pueden crear juegos robustos que funcionan en ellos.
 Nombre: Juan Punin
Fecha : 28/10/2024
 Desarrollo web dorsal o back-end: el desarrollo web se ha transformado tanto,
que JavaScript puede utilizarse para gestionar el back-end de sitios y aplicaciones.

Cómo funciona JavaScript

JavaScript es un lenguaje versátil y poderoso que se ha convertido en una parte integral del
desarrollo web. Permite crear interacciones dinámicas y enriquecer la experiencia del usuario
en las páginas web, lo que ha llevado a su amplia adopción y uso generalizado en la industria.

JavaScript se interpreta en el navegador web, lo que significa que el código JavaScript se

ejecuta directamente en el entorno del navegador sin necesidad de una etapa de compilación
previa. A continuación, te explicamos cómo funciona este proceso:

 Descarga y carga del código: cuando un navegador encuentra código JavaScript

en una página web, comienza a descargarlo y cargarlo en la memoria del
navegador. El código JavaScript puede estar incrustado directamente en el archivo
HTML o puede estar referenciado desde archivos externos.
 Análisis léxico y sintáctico: una vez que el código JavaScript se carga en el
navegador, el motor de JavaScript realiza un análisis léxico y sintáctico del código.
Esto implica dividir el código en tokens y verificar que la estructura del código sea
gramaticalmente correcta. Si se encuentran errores sintácticos, se mostrará un
mensaje de error en la consola del navegador.
 Creación del árbol de análisis (AST): después de completar el análisis léxico y
sintáctico, se crea un árbol de análisis (AST, Abstract Syntax Tree) que representa
la estructura del código JavaScript. El AST descompone el código en una estructura
jerárquica que facilita su posterior interpretación y ejecución.
 Interpretación línea por línea: a medida que el navegador interpreta el código
JavaScript, línea por línea, ejecuta las instrucciones correspondientes. Cada
instrucción se evalúa y produce un resultado o efecto según lo especificado en el
código.
 Manipulación del DOM y eventos: JavaScript interactúa con el DOM para
manipular y modificar elementos HTML y CSS en la página. Puede acceder a los
elementos del DOM utilizando métodos y propiedades proporcionados por el
navegador. Además, JavaScript puede registrar callbacks para eventos específicos,
como clics de botón o cambios en el valor de un campo de entrada, y responder a
ellos ejecutando el código asociado.
 Ciclo de eventos: el ciclo de eventos de JavaScript permite que el código
responda a eventos y se ejecute de forma asíncrona. Cuando se produce un evento,
el código correspondiente se ejecuta como parte del ciclo de eventos, lo que
permite una interactividad fluida y una respuesta en tiempo real en las aplicaciones
web.

Es importante tener en cuenta que diferentes navegadores pueden utilizar motores de

JavaScript distintos, como V8 en Chrome o SpiderMonkey en Firefox, lo que puede dar lugar a
diferencias sutiles en el rendimiento y las características compatibles. Sin embargo, en general,
el proceso de interpretación en el navegador sigue estos pasos básicos para ejecutar el código
JavaScript.
 Nombre: Juan Punin
Fecha : 28/10/2024

Lenguaje interpretado

JavaScript es un lenguaje interpretado debido a la forma en que se ejecuta y procesa su

código.

 Entorno de ejecución en el navegador: JavaScript se ejecuta principalmente en

los navegadores web. Cuando se carga una página web que contiene código
JavaScript, el navegador interpreta y ejecuta ese código directamente en su entorno
de ejecución interno. Esto significa que no se requiere un paso de compilación
previo antes de ejecutar el código JavaScript.
 Análisis y ejecución línea por línea: a diferencia de los lenguajes compilados, en
los que todo el código se traduce en instrucciones de máquina antes de su
ejecución, JavaScript se interpreta línea por línea a medida que se encuentra. El
motor de JavaScript del navegador analiza y ejecuta cada línea de código a medida
que se encuentra durante el proceso de carga de la página.
 Flexibilidad y facilidad de desarrollo: el enfoque interpretado de JavaScript
brinda flexibilidad y facilidad de desarrollo. No es necesario compilar el código
antes de probarlo, lo que permite un desarrollo rápido y una iteración ágil. Los
cambios realizados en el código JavaScript se pueden probar y ver inmediatamente
sin la necesidad de un proceso de compilación.
 Plataforma independiente: el hecho de que JavaScript sea un lenguaje
interpretado contribuye a su capacidad de ser ejecutado en diferentes plataformas
y sistemas operativos. Los navegadores web son la plataforma principal para la
ejecución de JavaScript, y los navegadores modernos han implementado sus
propios motores para interpretar y ejecutar el código en diferentes sistemas.
 Fácil actualización y distribución: con JavaScript interpretado, los cambios o
actualizaciones en el código se pueden implementar fácilmente, ya que los usuarios
solo necesitan cargar la nueva versión del código en sus navegadores. No es
necesario que los usuarios realicen una instalación manual o actualización de un
programa o aplicación.

OOP

JavaScript es un lenguaje de programación orientado a objetos (OOP), que proporciona

funcionalidades para trabajar con objetos y clases. Aunque no sigue un enfoque de OOP
estricto como lenguajes como Java o C++, ofrece características que permiten la
implementación de conceptos orientados a objetos.
 Nombre: Juan Punin
Fecha : 28/10/2024
 Objetos: en JavaScript, los objetos son colecciones de propiedades y métodos que
representan entidades del mundo real. Las propiedades son variables que
almacenan valores, mientras que los métodos son funciones que realizan acciones
relacionadas con el objeto. Los objetos se crean utilizando la sintaxis de llaves {} y
pueden ser personalizados para contener propiedades y métodos específicos.
 Prototipos: utiliza un modelo de herencia basado en prototipos en lugar de clases
tradicionales. Cada objeto tiene un prototipo, que es otro objeto del cual hereda
propiedades y métodos. Cuando se accede a una propiedad o método en un objeto,
si no se encuentra directamente en ese objeto, JavaScript busca en su prototipo y
continúa escalando por la cadena de prototipos hasta que se encuentra o se
alcanza el objeto raíz.
 Funciones constructoras: permite la creación de objetos utilizando funciones
constructoras. Una función constructora es una función regular que se invoca
utilizando la palabra clave «new». Dentro de la función constructora se definen las
propiedades y métodos del objeto que se está creando. Cada vez que se crea un
objeto utilizando una función constructora, se crea una instancia independiente con
sus propias propiedades y métodos.
 Herencia: aunque JavaScript no ofrece una sintaxis de clase tradicional para la
herencia, se puede conseguir la herencia utilizando prototipos. Un objeto puede
heredar propiedades y métodos de otro objeto estableciendo su prototipo en ese
objeto padre. Esto permite la reutilización de código y la creación de jerarquías de
objetos.
 Encapsulamiento: JavaScript no tiene un mecanismo nativo de encapsulamiento
como las clases en otros lenguajes, pero se puede lograr usando funciones para
crear ámbitos locales. Al definir variables y funciones dentro de una función, se
pueden ocultar y proteger del acceso externo, creando así un nivel básico de
encapsulamiento.
 Polimorfismo: permite la implementación de polimorfismo, que es la capacidad de
objetos de diferentes tipos para responder al mismo mensaje o llamada de método.
Dado que JavaScript es un lenguaje dinámico, las variables pueden contener
diferentes tipos de objetos en distintos momentos, y se puede acceder a sus
métodos y propiedades de manera flexible.

DOM

La integración de JavaScript con el DOM (Document Object Model) es una de las

características fundamentales de JavaScript y es lo que permite interactuar y manipular
elementos HTML y CSS en una página web.

 Acceso al DOM: JavaScript utiliza el objeto document para acceder y manipular el

DOM. El objeto document representa el documento HTML cargado en el navegador
y proporciona métodos y propiedades para interactuar con él. Puedes acceder a
elementos específicos del DOM utilizando métodos como getElementById(),
querySelector(), getElementsByTagName(), entre otros.
 Manipulación de elementos: una vez que tienes una referencia a un elemento en
el DOM, puedes utilizar las propiedades y métodos disponibles para manipularlo.
Por ejemplo, puedes cambiar el contenido de un elemento utilizando la propiedad
innerHTML, modificar los estilos utilizando la propiedad style, agregar o eliminar
atributos utilizando los métodos setAttribute() y removeAttribute(), y mucho más.
 Eventos del DOM: JavaScript permite responder a eventos que ocurren en los
elementos del DOM, como hacer clic en un botón, pasar el cursor sobre un
elemento o enviar un formulario. Puedes registrar eventos utilizando métodos como
addEventListener(), especificando el tipo de evento y una función de callback que
se ejecutará cuando ocurra el evento. Dentro de la función de callback, puedes
escribir el código que deseas ejecutar en respuesta al evento.
 Manipulación de la estructura del DOM: además de manipular los elementos
individuales, JavaScript también permite manipular la estructura del DOM, es decir,
agregar, eliminar y modificar elementos en la página. Puedes crear nuevos
elementos utilizando el método createElement(), agregarlos al DOM usando
 Nombre: Juan Punin
Fecha : 28/10/2024
métodos como appendChild() o insertBefore(), y eliminar elementos empleando
removeChild().
 Actualización dinámica de la página: una de las ventajas clave de la integración
de JavaScript con el DOM es la capacidad para realizar actualizaciones dinámicas en
la página sin tener que recargarla completa. Puedes cambiar el contenido de un
elemento en respuesta a eventos, actualizar estilos, mostrar u ocultar elementos,
realizar animaciones y mucho más. Esto permite crear experiencias interactivas y
dinámicas para los usuarios.

Basado en eventos

JavaScript es un lenguaje «event-driven» o basado en eventos, lo que significa que se ejecuta

en respuesta a eventos que ocurren en el entorno en el que se está ejecutando, como acciones
del usuario o eventos del sistema.

 Registro de eventos: para comenzar a responder a eventos, se deben registrar

los eventos que se desean detectar. En JavaScript, esto se realiza utilizando el
método addEventListener() en un elemento específico del DOM (Document Object
Model) o en un objeto relevante. Se especifica el tipo de evento (por ejemplo,
«click» para un clic de ratón) y una función de «callback» que se ejecutará cuando
ocurra el evento.
 Funciones de callback: las funciones de callback se ejecutan en respuesta a un
evento específico. Estas funciones se definen previamente y se pasan como
argumento al método addEventListener(). Cuando se produce el evento registrado,
JavaScript ejecuta la función de callback correspondiente.
 Ejecución asíncrona: el enfoque «event-driven» en JavaScript permite la
ejecución asíncrona, lo que significa que el código no se bloquea esperando
eventos. El flujo de ejecución continúa mientras el programa espera eventos, y
cuando ocurre un evento registrado, se dispara la ejecución de la función de
callback asociada.
 Event bubbling y event capturing: JavaScript también proporciona dos modelos
de propagación de eventos: «event bubbling» (burbujeo de eventos) y «event
capturing» (captura de eventos). El «event bubbling» hace que los eventos se
propaguen desde el elemento objetivo hacia los elementos padres, mientras que el
«event capturing» hace que los eventos se propaguen desde los elementos padres
hacia el elemento objetivo. Esto permite controlar cómo se manejan los eventos en
diferentes elementos.
 Manipulación del DOM: una de las principales aplicaciones del enfoque «event-
driven» en JavaScript es la manipulación del DOM. Al registrar eventos en
elementos del DOM, se puede responder a las interacciones del usuario, como clics,
cambios de valor en campos de entrada o movimiento del ratón. Esto posibilita
crear interacciones dinámicas y responsivas en aplicaciones web.

Asincronismo

El asincronismo en JavaScript es fundamental para realizar tareas sin bloquear la ejecución del
código, lo que permite que el programa sea más eficiente y receptivo.

 Callbacks: antes de que las promesas y el async/await estuvieran disponibles, eran

una forma común de implementar la asincronía en JavaScript. Un callback es una
función que se pasa como argumento a otra función y se ejecuta una vez que se
completa una operación asincrónica. Por ejemplo, en una llamada AJAX, se
proporciona un callback que se ejecuta cuando se recibe la respuesta del servidor.
 Event Loop: JavaScript utiliza un mecanismo llamado Event Loop (bucle de
eventos) para manejar la asincronía. El Event Loop se encarga de monitorear
constantemente la pila de llamadas y la cola de tareas. Cuando todas las tareas en
la pila de llamadas se han ejecutado, el Event Loop verifica la cola de tareas en
busca de tareas pendientes y las ejecuta en orden.
 Nombre: Juan Punin
Fecha : 28/10/2024
 Promesas: las promesas son una forma más moderna y legible de manejar la
asincronía en JavaScript. Una promesa es un objeto que representa la eventual
finalización o falla de una operación asincrónica y permite encadenar acciones
después de que se haya resuelto o rechazado. Puedes definir una promesa que
realiza una tarea y luego utilizar los métodos then() y catch() para manejar el
resultado.
 Async/await: el async/await es la sintaxis más reciente que se ha introducido en
JavaScript y simplifica aún más el manejo de la asincronía. Permite escribir código
asincrónico de manera más similar al código síncrono, lo que lo hace más legible y
fácil de entender. Puedes marcar una función como async y utilizar la palabra clave
await para esperar la resolución de una promesa antes de continuar la ejecución.
 Llamadas a API: una de las aplicaciones comunes del asincronismo en JavaScript
es realizar llamadas a API, como solicitudes AJAX o fetch para obtener datos de
servidores externos. Estas operaciones suelen ser asincrónicas, y el código espera
la respuesta de la API antes de continuar con otras tareas.

Patrones de diseño en JavaScript

Existen varios patrones de diseño que se pueden aplicar al desarrollo de aplicaciones

JavaScript para mejorar la estructura, modularidad y reusabilidad del código.

 Patrón Módulo: permite encapsular y organizar el código en módulos, evitando la

contaminación del espacio global. Se puede lograr mediante el uso de funciones
autoejecutables y closures.
 Patrón Singleton: se usa cuando solo se permite una única instancia de una clase
en toda la aplicación. Es útil cuando se necesita un objeto global compartido.
 Patrón Observador: también conocido como Pub/Sub (Publicador/Suscriptor), este
patrón favorece la comunicación entre diferentes partes de la aplicación. Un objeto
emisor (publicador) notifica a otros objetos (suscriptores) cuando ocurre un evento
o cambio.
 Patrón Constructor: se emplea para crear objetos a partir de una función
constructora. Permite la creación de múltiples objetos con propiedades y métodos
similares.
 Patrón Decorador: se utiliza para añadir funcionalidad adicional a un objeto
existente sin modificar su estructura original. Se logra envolviendo el objeto con
otro objeto que proporciona la funcionalidad adicional.
 Patrón Fábrica: proporciona una interfaz para crear objetos y permite que las
subclases decidan qué tipo de objetos crear. Ayuda a abstraer la lógica de creación
de objetos y facilita la creación de familias de objetos relacionados.
 Patrón Estrategia: este patrón permite cambiar el comportamiento de un objeto
en tiempo de ejecución, seleccionando entre diferentes algoritmos o estrategias.
Ayuda a encapsular algoritmos y a una mayor flexibilidad en la elección del
comportamiento.