How the HTML and CSS code interface with JavaScript code? And so on so forth

Category: Front Development June 14, 2021 No Comments

I’ve been working mostly on HTML and CSS code intensively in the past 7 weeks, now it’s the time to connect some dots.

PART 1 – How the JavaScript code you linked/inserted to your HTML file/code interface with the HTML and/or CSS code? ( Web API )

Your JavaScript code interacts with the DOM API and CSSOM API that are built into the web browser and available to use by your JavaScript code. DOM API or CSSOM API is the entry point for your JavaScript code, and are able to expose data from the browser and surrounding environment.

For example:

1 ) The Document interface represents any web page loaded in the browser and server as the entry point into the web page’s content/data in web browser process’s memory.

The Document interface describes the common properties and methods for any kind of document.

The Document interface functions like the root node of the tree data structure, you can traverse the tree to reach to a certain node in that tree object.

PART 2 – The life cycle of HTTP client‘s request & HTTP server‘s response (Protocols)

When a web browser parses an HTML document, it builds a DOM tree and then uses it to display the document.

To continue…

PART 3 – Ajax, event loop (Application-level process management, Concurrency)

JavaScript has a concurrency modal based on the event loop that built in the web browser.

The term Ajax has come to represent a broad group of Web technologies that can be used to implement a Web application that communicates with a server in the background, without interfering with the current state of the page. In the article that coined the term Ajax, Jesse James Garrett explained that the following technologies are incorporated:

HTML (or XHTML) and CSS for presentation
The DOM for dynamic display of and interaction with data
JSON or XML for the interchange of data
The XMLHttpRequest object for asynchronous communication
JavaScript to bring these technologies together

PART 4 – Web browser and its components ( security sandboxes, caches, JavaScript VM, graphic rendering, GPU pipelines, storages, network sockets management …)

You can look at the web browser like the terminal emulator.

The main thread is created by the operating system as a process for the the web browser application with a single thread of execution.

To continue …

Reference:

Ajax (programming)

https://en.wikipedia.org/wiki/Ajax_(programming)

Process management (computing)

https://en.wikipedia.org/wiki/Process_management_(computing)

Jinxia Li