How and where to write JavaScript

JavaScript, when using it with web pages as we are in this course, can either be written inside the HTML document, i.e. embedded, or written in a different file, i.e. external. It doesn't really matter if you have embedded or external code, other than what's easy to read and maintain. JavaScript code is written inside the <script> elements, which can be placed in the <head> element or the <body> element.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      console.log('The code can be here')
    </script>
  </head>
  <body>
    ...
    <script type="text/javascript">
      console.log('Or the code can be here')
    </script>
  </body>
</html>

When the browser is rendering a HTML document, it will start at the top and read trough it. So in the example above the first console.log() function will be run first. Where you place the code in the HTML document though have an importance. In JavaScript, you can reference and manipulate HTML elements. But that element must be rendered before JavaScript can access it.

I.e. if we in the first script tag reference an element that occurs later in the document, the reference fails because the element doesn't exist yet. As I said in my first lecture in 2015:

You can't yell at a baby before it is born

On the other hand, if we reference the element after it has been rendered, we won't get those problems, i.e. in the second script tag.

We can overcome the problem of the script being executed before the DOM is rendered by encapsulating the code in window.onload = function(){ console.log(You code goes here) }. In a HTML document, this would look like:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      window.onload = function(){
        console.log("I'm waiting for the document to load")
      }
    </script>
  </head>
  <body>
    ...
  </body>
</html>

If you want to separate your HTML and JavaScript, as I would most often recommend, you use the script tag's src attribute to reference the script. The JavaScript file must end with ".js".

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    ...
    <script type="text/javascript" src="path/to/script.js"></script>
  </body>
</html>

Inside the file, in this case script.js, you can write JavaScript as you would inside the script element. There's no need for special markup or declaring the JavaScript version. A simple script could then look like:

console.log("I'm all that's left in this world.")

In the examples above I've used the JavaScript function console.log(). This is similar to Python's print function. You can use console.log() to print data to the developer console in your browser. This comes in handy when you want to see what's happening different places in your code. In chapter 13 you will learn how to manipulate the DOM, to display your data to the user. As of now we will concern ourself with learning JavaScript, and all it's wonders. There's a lot to cover, so hang tight!

PreviousIntroduction to JavaScriptNextComments

Last updated