How does a browser AUTOMATICALLY convert "Page Source" Javascript to HTML?

Question

Now that I understand how to access both the raw HTML+Javascript (as received by HTTP GET) and the rendered-result of auto-processing of the Javascript upon page load completion, I need to understand how it is being done:

1. Is there a specific Javascript function, embedded in the raw HTTP GET resonse, that the browser looks for, and when found, it simply calls it? (in other words, is it the responsibility of the web page programmer to instruct the browser to scan the raw content and substitute all non-interactive Javascript to HTML?)
2. Does the browser analyze the entire page, looking for certain cues, and then decides what to convert? If so, what are these cues and how it is being done?

Being totally fresh in this subject, it is quite possible that none of the above applies and the trick is done in completely different manner. If this is indeed the case, would you be so kind as to guide me how to re-phrase the question?

Answer 1

The HTML specification defines the circumstances under which Javascript runs. Some javascript it attached to onSOMETHING attributes, and it runs at the defined time. One important example of which is 'onload'. Other Javascript is simply in top-level blocks inside of <script> elements. By spec, the browser runs that whenever it feels like, just in order.

There's no 'conversion' and no 'substitution'. Javascript is a programming language. The browser runs the code. In some cases, the code does interact with the DOM tree to produce displayable contents. In other cases, it does not (e.g. sending information over a connection).

Answer 2

HTML gets loaded sequentially. When a script tag is discovered, the browser executes the script. For example:

<div id="test"></div>
<script type="text/javascript">document.getElementById("test").innerHTML = "Hi there!";</script>

However, if you have the following document

<script type="text/javascript">document.getElementById("test").innerHTML = "Hi there!";</script>
<div id="test"></div>

nothing would happen, because at the time the browser executes the script, the browser hasn't discovered the test div yet.

Answer 3

When a web browser parses an HTML page, if it encounters a <script> element, it stops parsing the HTML, and runs the JavaScript in (or linked to by) the <script> element immediately*.

The JavaScript code can amend the page’s DOM (Document Object Model — the programmatic representation of the HTML that JavaScript can access), and thus change the rendered HTML that’s shown by the browser. (It can also assign functions to built-in event handlers on DOM nodes, so that some JavaScript can be run e.g. when the user clicks on a link, or when the document has finished loading.)

It is thus indeed entirely the responsibility of the web page programmer to do this. Browsers don’t guess what to do with the downloaded JavaScript. They run and obey it.

(* That’s a bit of a simplification: the defer attribute can prevent the script from being run immediately.)

Answer 4

I red your last thread. Let me tell you this, A browser has a HTML version of the page and a DOM (Document Object Model) version of it. Whenever a Javascript changes something, it's changed in the DOM. At first DOM is generated from page HTML,

So Javascript doesn't change page source.

Your question here is totally irrelevant, Since the browser does this operation for loading a page :

1. HTTP request to recieve data (possibly an HTML document)
2. Parse the received data (if it is HTML)
3. Look for other resources in the parsed data (links to other javascript, css, images, etc.)
4. Download the remaining resources (loop back to step 2)
5. Generate the DOM, run the CSS and Scripts, show images.

The browser starts running all the javascript from top to bottom of the received data. You can also assign Javascript function to Events of elements on the page, so that when the event is triggered, The javascript function specified is automatically called.

Parsing a HTML and running its javascript has nothing to do with HTTP protocol and can be done solely on your own computer (opening a HTML file on your disk).