JavaScript Runtime and client Web APIs

JavaScript Runtime or Execution Environment can access browser objects such as Windows, Navigator, History, Screen, etc., although they are not part of JavaScript because these objects are part of the Browser's Web API (Application Programming Interface). 

The Web API is a collection of JavaScript interfaces that provide access to various browser functionalities and system resources. These APIs are provided by the browser to allow JavaScript running in the browser to interact with the environment and the user's device in a controlled way.

How JavaScript Can Access Browser Objects

JavaScript Runtime Environment: The JavaScript engine (e.g., V8 in Chrome, SpiderMonkey in Firefox) executes JavaScript code. This engine is embedded within the browser and provides the core features of the language (such as variables, functions, control structures, etc.).

Browser's Web API: In addition to the JavaScript engine, modern web browsers provide a set of Web APIs that expose browser-specific functionality. These APIs are not part of the core JavaScript language itself but are made available to JavaScript running in the browser. These browser objects are part of the global environment, making them accessible to JavaScript code.

The Web APIs provide an interface for the JavaScript runtime to access browser-specific capabilities like:

1. Window Management (window object)
2. Navigating History (history object)
3. Browser Information (navigator object)
4. Screen Information (screen object)
5. Document and DOM Manipulation (via document object)
6. Network requests (via fetch, XMLHttpRequest, etc.)
7. Local Storage (via localStorage, sessionStorage)
8. Global Object (window):

In the browser environment, the global object is the window object. This means that top-level variables and functions in the JavaScript environment are properties of the window object.For example, when you write alert(), it is actually a shorthand for window.alert(). Similarly, objects like navigator, history, and screen are available as properties of the window object.

Examples

Window Object:

console.log(window.innerWidth); // Accesses the width of the browser window
console.log(window.document);   // Accesses the DOM document object

Navigator Object:

console.log(navigator.userAgent); // Accesses the browser's user-agent string
console.log(navigator.language);  // Accesses the preferred language of the browser

History Object:

history.back();  // Goes back to the previous page in the browsing history

Screen Object:

console.log(screen.width);  // Accesses the screen width of the user's device
console.log(screen.height); // Accesses the screen height of the user's device

How is it Possible?

The JavaScript runtime (engine) running in the browser is aware of the browser environment, as it is hosted within the browser. The Web API is integrated into the browser's JavaScript environment. This means that while JavaScript itself does not define these objects, they are exposed to the global environment by the browser as part of its system capabilities.

Browser-Integrated APIs: These APIs are essentially extensions to JavaScript that allow you to interact with browser-specific features like the DOM, events, storage, navigation, etc. These APIs are not part of the ECMAScript standard but are included by the browser as a service for web developers.

Key Points:

1. JavaScript Engine (V8, SpiderMonkey, etc.) executes JavaScript.
2. Web APIs are provided by the browser and can be accessed via JavaScript running in the browser.
3. These Web APIs are part of the global execution environment (e.g., window object), making them available to JavaScript code.

Summary

JavaScript running in the browser environment can access browser-specific objects such as window, navigator, history, and screen because these objects are part of the browser's Web API. The JavaScript engine is integrated into the browser, which allows it to expose these APIs to JavaScript code running on web pages. These APIs provide a bridge between JavaScript and the underlying browser and system resources, enabling web developers to create interactive and dynamic web applications.