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 JavaScript Basics (Retired) Introducing JavaScript Where Does JavaScript Go?

Shane F
Shane F
400 Points
Posted by Shane F
Shane F
400 Points

My two JavaScript messages run before the HTML, even though the HTML runs between them. What's wrong?

Here is the code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>JavaScript Basics</title> <script> alert("Here's another message from Treehouse"); </script> </head> <body> <div class="container"> <h1>Where to place your JavaScript code.</h1> </div> <script src="scripts.js"></script> </body> </html>

Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points
Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

I hope you don't mind... I am reposting your code so I can read it easier...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/main.css">
    <title>JavaScript Basics</title>
    <script> alert("Here's another message from Treehouse"); </script>
  </head>
  <body>
    <div class="container">
      <h1>Where to place your JavaScript code.</h1>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

4 Answers

Bryan Valencia
Bryan Valencia
685 Points
Bryan Valencia
Bryan Valencia
685 Points

Hi Jonathan Fernandes , unfortunately I don't think the question was completely understood. Shane is asking this in regards to a video in the JavaScript Beginnings course named Where Does JavaScript Go? If you look lines below his initial <script> tag in the <head> section, you'll see he placed another right before the closing body tag. In the video, Dave MacFarland explains that the code should run in the following order: alert() from the command in the head tag, then the HTML on the page should load, and then after the HTML content loads, the last <Script> alert() would load on the page. When he runs his code in the video, that is what happens. When Shane ran the code though, and similarly when I did with identical code as Shane, the page loaded both alert() commands before displaying any HTML, despite the second alert() command being placed after any HTML content in the file which is contrary to what Dave was saying would happen. Is this a consequence of the Chrome runs or some other discrepancy?

Thanks, Bryan

Jonathan Fernandes
PLUS
Jonathan Fernandes
Courses Plus Student 22,784 Points
Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

To clarify, I am assuming you mean your code is firing off before the html loads.

Looking at what you have, that does make sense. You have a script tag in your head data that is firing off an alert before the rest of the page loads.

So to the browser, it is reading your code and then stops at the script tag in your head before it moves to the html underneath it.

Alerts are very obtrusive. When they fire off, they stop everything till the user dismisses the alert. Use them sparingly or use them with purpose.

I hope this helps or let me know if you need help with anything else!

Jonathan Fernandes
PLUS
Jonathan Fernandes
Courses Plus Student 22,784 Points
Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

Aha, I see now. Thanks for clearing that up Bryan. To answer your question, yes, your browser has a bit to do with that. If you pull up a browser like Safari on a Mac, you would get the behavior you are expecting. Chrome on the other hand, handles alerts differently. Chrome, if I am not mistaken, will fire off alerts immediately. And since Alerts interrupt until dismissed, the process pauses and you don't see anything else load in the meantime.

The frank truth is, I don't think it is something that will set you back. You just need to be aware of placement of scripts. In other words, if you call on a library that you have in a script tag after your own scripts, there will be an error because it will not know what you are calling. If you understand how that cascades, I honestly would not even give it a second thought.

Wojciech Kwiatkowski
Wojciech Kwiatkowski
5,856 Points
Wojciech Kwiatkowski
Wojciech Kwiatkowski
5,856 Points

Unfortunately, I've got the same problem on Chrome. Now, I tried it on Safari and there is the problem too. How to solve it? I have <script> at the bottom of index.html, but it loads first.

Reza Zandi
seal-mask
.a{fill-rule:evenodd;}techdegree
Reza Zandi
Full Stack JavaScript Techdegree Student 1,599 Points
Reza Zandi
.a{fill-rule:evenodd;}techdegree
Reza Zandi
Full Stack JavaScript Techdegree Student 1,599 Points

I'm getting the same problem on safari.. may not be that big of a deal, not sure what you mean by being aware of placement of scripts. A couple times it worked fine, but most of the times the alerts come first then the html.