7

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?

Improve this question

6 Answers 6

Reset to default
3

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the great answer. Could please clarify the following for me? I understand the interactive parts of HTML/Javascript/DOM, i.e. onClick, onMouseOver, etc. - The browser just leaves those intact when producing the "rendered" HTML. But how does it know what not to leave intact and rather run this upon page complete? What does "whenever it feels like" mean? Isn't there a standard to be followed? Is a category of Javascript functions that is bound for auto-execution?
@PeSmith: sorry to hijack, and I’m not sure if I’m answering your point, but all JavaScript is “auto-executed”: when the browser encounters a <script> tag, it runs all the JavaScript therein, line by line. Some JavaScript functions amend the DOM — e.g. document.getElementsByTagName('p')[0].style.backgroundColor='#c00'; would give the first paragraph in the HTML page a red background; and document.getElementsByTagName('p')[0].onclick = doSomething; assigns the function doSomething to be run whenever the first paragraph’s click event occurs. Other functions don’t, e.g. var x = 1;.
@Pe what @Paul said. Top level runs during or after page load.
3

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.

Improve this answer

Comments

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.)

Improve this answer

2 Comments

It hardly matters at this level, but it's slightly more accurate to say that the script executes when the parser encounters the </script> tag. This makes sense if you think about the way that document.write works by injecting characters into the parser input stream.
@Alohci: ah, yeah I see your point. I’ll put “<script> element” as opposed to “<script> tag”.
1

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).

Improve this answer

2 Comments

This isn’t really my field, but I think JavaScript gets run during the HTML parsing stage — HTML parsing pauses whilst the script is run. This is because JavaScript includes document.write, which writes out HTML content into the DOM. Then again, I don’t know if browsers literally stop parsing the HTML, or whether your description is closer to what they actually do.
@Paul - My understanding is that parsers have traditionally literally stopped parsing, because you can do things like document.write('<!--') which would fundamentally change what the remainder of the DOM would look like. In theory, parsers could bookmark the DOM state, tentatively look-ahead parse, and back-track if document.write was encountered in the script. Given the introduction of the async attribute in HTML5, I'm guessing that browsers don't do that.
1

The browser parses the HTML code, and upon encountering JavaScript code enclosed in proper <script> tags, it evaluates the encountered JavaScript which can result in document structure and/or content changes that become visible to the user.

Improve this answer

Comments

0

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?)

No. There are many. See http://dev.opera.com/articles/view/creating-and-modifying-html/

(Actually, you should probably start at http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc )

Does the browser analyzes the entire page, looking for certain cues, and then decides what to convert? If so, what are these cues

<script>

and how it is being done?

DOM

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.