Fundamentos del navegador web
Contenidos
Cómo experimentamos en los laboratorios anteriores ya sabemos que Javascript requiere de un entorno de ejecución. La mayoría de los que hemos trabajado hasta ahora es parte núcleo de Javascript/ECMAScript que funciona en cualquier entorno de ejecución para Javascript. En este módulo nos enfocaremos en el navegador web, su entorno de ejecución original y el más popular.
¿Qué es un navegador web?
En sus inicios un navegador web (browser) era un software especializado en solicitar documentos en una red usando el protocolo HTTP (Hypertext Transfer Protocol)[1]. Hoy en día los navegadores pueden hacer mucho más que solo solicitar documentos. Hoy pueden, a través de interfaces dinámicas, desplegar aplicaciones altamente interactivas. El camino desde 1995, cuando se lanzó el primer navegador con Javascript (Netscape 2.0), hasta hoy no ha sido fácil ya que cada fabricante de navegador (IE, Firefox, Chrome, Opera y un largo etc…) interpretaba los documentos y Javascript a su manera, esto dió pié a la Guerra de los Navegadores [2]. En un momento los desarrolladores debían lidiar permanentemente con las diferencias en implementación entre navegadores. Al día de hoy esto no está completamente resuelto, pero sin duda, gracias a los estándares web estos casos no son tan frecuentes como solían serlo.
De todas formas recursos como can I use pueden ayudanos para saber que funcionalidades están soportadas en los navegadores más populares.
Motores y navegadores.
Acá puedes encontrar un listado de los principales intérpretes de Javascript y sus navegadores.
Para los curiosos ¿Qué significa que estos interpretes implementen compilación just-in-time?
Navegadores web en móviles.
Desde hace unos años los teléfonos inteligentes soportan los mismos navegadores que usamos en los equipos de escritorio y la mayoría ofrece sincronización entre ambos formatos.
Además, los celulares tienen objetos específicos que no están en los equipos de escritorio, pero que hacen mucho sentido en el mundo mobile, como acceso a cámara(s), vibración, eventos touch, telefonía y SMS.
ECMAScript, DOM y BOM: Las múltiples API’s del navegador en Javascript.
Dentro del navegador Javascript tiene acceso a diferentes objetos que podemos clasificar en tres grupos: Core ECMAScript, DOM y BOM. Los primeros son lo que ya hemos trabajado en los primeros laboratorios, los objetos del DOM son los relacionados al documento actualmente desplegado en el navegador y los últimos son relacionados al navegador propiamente tal como el tamaño de la ventana y .
DOM quiere decir Document Object Model y BOM por Browser object model.
BOM
El BOM es una colección de objetos que te dan acceso al navegador y a la pantalla. Estos objetos se acceden mediante el objeto global window
Existen varias formas de navegar a otros sitios
window.location.href = "https://boolean.cl"
location.href = "https://boolean.cl"
location = "https://boolean.cl"
location.assign("https://boolean.cl")
location.replace("https://boolean.cl")
El método replace no crea una nueva entrada en el historial de navegación.
window.history.length
history.forward()
history.back()
history.go(-2)
Algunos navegadores recientes soportan la API Historial. Esto permite cambiar la URL sin recargar la página. Esto es bueno para las páginas SPA (single page applications). De esta forma el usuario podría guardar en sus marcadores una url específica que representa un estado de la aplicación. Ideal para los routers de frameworks como Angular, React con NEXT y Vue con NUXT o VueRouter.
Corre la siguiente línea en la terminal del navegador y fíjate como cambia la url de tu navegador
history.pushState({a: 1}, "", "hello");
history.pushState({b: 2}, "", "hello-you-too");
console.log(history.state)
Solo para Chrome. Firefox dice: Uncaught DOMException: The operation is insecure.
Luego lo siguiente y observa los cambios en la url
window.history.back()
console.log(history.state)
DOM
HTML es un lenguaje de etiquetas utilizado para definir la estructura de páginas web. Otros lenguajes de marcado para propósitos más generales como XML que permite definir otros tipos de documentos. Pero en definitiva un archivo con extensión HTML define un documento y el DOM es la representación de este documento. Visto de otra perspectiva, podemos concluir que el DOM es la interfaz de programación del HTML[3]. Permitiendo su manipulación usando JavaScript como lenguaje de scripting.
Cookies y Navegación.
Las cookies son pequeños archivos de texto que se almacenan en el dispositivo del usuario por parte de un sitio web. Son utilizadas para mantener un seguimiento de la actividad del usuario en el sitio web y para personalizar la experiencia del usuario en el sitio.
Cuando un usuario accede a un sitio web, la cookie es enviada desde el servidor de la web al navegador del usuario, y luego es almacenada en el dispositivo del usuario. Cuando el usuario vuelve a acceder a ese sitio web en el futuro, la cookie es enviada de vuelta al servidor, permitiendo al servidor reconocer al usuario y recordar su actividad previa en el sitio.
Las cookies son una parte integral de las solicitudes HTTP, y se utilizan en una gran cantidad de sitios web para personalizar la experiencia del usuario y mantener un seguimiento de la actividad del usuario en el sitio.