Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Laurence kite
Laurence kite
11,768 Points

The script tag and the loading page.

I have noted that

<script> document.write("hello"); alert("bye"); </script>

That the alert bye appears first. Try it and see by placing it in a html page mid body.

Is. It because the page has not been fully parsed?

Lee Stetson
Lee Stetson
16,944 Points

Hi Laurence,

This is a great question, and the kind of "problem" you will frequently scratch your head at when programming.

From a high level, yes, this occurs because the page has not been fully parsed.

<script> is an element that is executed immediately and before the page is fully parsed. And alert() creates a modal window, which effectively takes the user hostage until it is acknowledged. Now, there is a way to "manage" the execution of <script> elements, but that is a topic you might explore later when necessary.

For now, just understand that the <script> element executes immediately, and alert() demands attention before releasing control.

Ioannis Leontiadis
Ioannis Leontiadis
9,828 Points

Lee Tratnyek, I thought document.write() executes first if placed before the alert(), am I mistaken ? The results are visible but maybe in an unexpected place.

Lee Stetson
Lee Stetson
16,944 Points

Ioannis Leontiadis Well, that is possible/probable. Execution and parsing are, of course, separate issues. <script> itself is executing first (and that contains both document.write(); and alert();). And if you place it (<script>) in the code multiple times, the scripts will all execute before parsing is complete.

Therefore, even if/when document.write(); is added before the alert(); whether or not it executes first doesn't matter, the page itself has not yet parsed, and won't until the alert(); releases control, and all the <script> elements have executed.

Ioannis Leontiadis
Ioannis Leontiadis
9,828 Points

Lee Tratnyek, ow I see! In the example code I tried for answering this question, document.write() 's results were parsed before alert(). Nice catch separating executing and parsing! :)

1 Answer

Ioannis Leontiadis
Ioannis Leontiadis
9,828 Points
Ioannis Leontiadis
Ioannis Leontiadis
9,828 Points

Hello Laurence,

document.write() is actually a tricky method and it is considered a bad practice. See a stack-overflow article for more. Lets consider two cases.

Case 1: once an html page is fully loaded

Assume you trigger document.write() manually via the developer tools terminal of your favorite browser. This will trigger document.open() because there is no open stream to write in. As a result, the contents of the page will be replaced by the argument you provide to the function. Then you can, of course, demand an alert().

Case 2: placing a script inside an inline html script tag

This is considered a bad practice and for good reasons. You can get pretty unexpected behaviors in such cases. But lets look at such a script anyway,

<div id='container'>
<script>
    'this will trigger the example function in 3000ms'
    window.setTimeout( example, 3000 );
</script>
</div>

function example() {
    alert('hello');
    document.write('hello');
}

Note: the function was removed from the <script> for clarity purposes.

This will not delay the contents after the <div id='container'> from being loaded. There is no way to know if example() will be triggered either before or after the page loads. And this matters! If the page fully loads before example() executes, then document.open() will be triggered and previous contents will be replaced. If not, things are worst ..

MDN states that "if the document.write() call is embedded within an inlined HTML <script> tag, then it will not call document.open()". This seems not to be the case thought.

Anyway, in both cases document.write('hello') is called first. You can notice this behind the alert box! The same occurs without the delay. This was tested using Firefox 52.0a2.

Hope that helped!