The JS Document

Go back to JavaScript Index

The script tag

Ok, so the console can show us things but nothing is really changing on the actual page. Can't we do something that is actually visible to the user of the page?

Of course we can.

We will start by actually adding the script to our page.

Internal script

JavaScript can be placed directly in the HTML file using the <script> tag:

example.html

<script>
console.log("Hello Spring!");
</script>
1.0 | HTML file with internal script

The script tag itself may be placed in the head or the body element, but I recommend you place it in the body element just before the end body tag. Why? If the script needs to work with elements that are on the page, it won't find them if placed in the head element or above the content. The browser will run the script when it sees it. As long as we don't have the necessary knowledge to make the script wait for the page to finish loading, placing the script in the bottom of the page is therefore your best option.

Notice the code block inside the script element.

The method console.log() is used to print to the console. Whatever is written inside the parentheses is what is printed.

External script

I recommend that you do not use internal script but keep HTML and JS (and CSS) separated. It will make the code easier to understand:

example.html

<script src="js/script.js">
</script>
1.1 | HTML file with reference to external script file

Placing the script tag in the bottom of your HTML, just before the end body tag is still your best option.

In this example, the src attribute is added to the script start tag.

The file we request in the example is placed in a subfolder called js, and the file itself is named script.js.

NB: Avoid spaces when naming your files.

script.js

console.log("Hello Spring!");
1.2 | External script

Notice that the actual JavaScript code in the external script file is written without any markup.

Assignment

  • Create a basic HTML file and save it in a folder.
  • Place the script element inside the body element, jus before the end body tag
  • Use console.log() to log the string Hello World! to the console
  • Test that is works by opening up the page in the Chrome browser and from there opening the console. If Hello World is visible in the console, you have succeeded with the assignment.
  • Now, create an external JavaScript file and copy the JavaScript code to that file. Save the file in a subfolder named js.
  • In your HTML file, remove the JavaScript code from inside the script element and add a reference (the src attribute) to the external script file instead.
  • Test that it works - If Hello World is still visible in the console when you refresh the page, you have succeeded with the assignment.

Next up

What's next?

Next up: Variables