1.3 JavaScript in Browsers

We are now ready to write our first JavaScript code. To run JavaScript inside an HTML page, you need a <script> element. There are two places where you can add it: inside the <head> tag, or inside the <body> tag. The best practice is to place the script element at the end of the body, just after your visible elements such as <h1> and <p>.

Why place the script at the end of body?

There are two main reasons to follow this convention:

  • The browser parses HTML from top to bottom. If the script sits in the head, the browser is busy executing JavaScript instead of rendering the content, which creates a poor user experience.
  • The code inside the script often needs to interact with the page elements — for example to show or hide some of them. Placing the script last guarantees that all these elements have already been rendered.

Now let's write a small piece of JavaScript. Inside the script element, type console.log("Hello everyone");. What you see here is a statement: an instruction that expresses an action to perform. Every JavaScript statement should end with a semicolon. The text between the quotes is called a string of characters. This little message will be sent directly to the browser console.

You can also document your code with comments. A comment starts with // and is ignored by the JavaScript engine — it only exists for the developer. After saving the file and refreshing the browser, open the developer console: you will see "Hello everyone" printed there. That's it for this video, see you in the next one!

Summary

This lesson covers how to properly integrate JavaScript into HTML documents. It explains that script elements can be placed in either the Head or Body tag, but best practice is to place them at the end of the Body to prevent browser blocking and ensure DOM elements are available before code execution. The lesson demonstrates a basic console.log() statement and explains fundamental JavaScript syntax including statements, semicolons, strings, and comments.

Key points

  • Script elements should be placed at the end of the Body tag, not in the Head, to avoid blocking HTML parsing and poor user experience
  • The browser parses HTML files from top to bottom; early script execution in the Head delays content rendering
  • JavaScript statements must end with a semicolon (;), and code needs access to fully-rendered DOM elements
  • console.log() sends messages directly to the browser console for debugging
  • JavaScript comments (using //) document code without being executed by the engine
  • Strings are text values enclosed in quotes that can be displayed or processed by JavaScript code

FAQ

Why is it bad practice to place script elements in the Head tag?

Placing scripts in the Head forces the browser to parse and execute JavaScript before rendering page content. This blocks the entire page from loading and causes a poor user experience because the browser is preoccupied with executing code instead of rendering HTML elements.

What is the relationship between script placement and DOM element availability?

JavaScript code needs to interact with DOM elements (display, hide, or modify them). If scripts run before all elements are rendered, the code cannot access those elements. Placing scripts at the end of the Body ensures all HTML elements are rendered and available before the JavaScript code executes.

What does console.log() do and what is a string?

console.log() sends messages directly to the browser console for debugging. A string is a sequence of text enclosed in quotes (like "Bonjour tout le monde"). The string value is passed to console.log() and displayed in the console.