How to add JavaScript to a project

You can view a boilerplate template here: https://github.com/mmagnusen/boilerplate

  • Clone the project
  • Open your preferred web browser
  • Click on file > open file
  • Find the location of the project we've just cloned and double-click on the index.html file
  • If you open the inspector, you should be able to see four console logs

Let's find out where these logs are coming from.

Boilerplate html console log

Script Tags

Adding JavaScript code can only be done using a script tag, there are two ways we can add these tags:

  • Write code directly within script tags
    • Script tag in head
    • Script tag in body
  • Link to seperate JavaScript file

Write your JavaScript code directly within the script tags

Script tag in head

Lines 11-13: This is where we are seeing console.log('hello, this is a log coming from index.html head')

Script tag in body

This can be anywhere in the body of the html

  • At the start of the body - lines 17-19: console.log('hello, this is a log coming from index.html at the start of the body')
  • Anywhere in the middle of the body - lines 24-26: console.log('hello, this is a log coming from index.html in the middle of the body')
  • At the end of the body: lines 30-32: console.log('hello, this is a log coming from index.html at the end of the body')
index.js
1
<!doctypehtml>
2
<htmllang="en">
3
4
<head>
5
<metacharset="utf-8">
6
<title>BoilerplateTemplate</title>
7
<metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no">
8
<metaname="description"content="HTMLBoilerplateTemplate">
9
<metaname="author"content="Clearli">
10
<linkrel="stylesheet"href="styles.css">
11
<script>
12
console.log('hello,thisisalogcomingfromindex.htmlhead')
13
</script>
14
</head>
15
16
<body>
17
<script>
18
console.log('hello,thisisalogcomingfromindex.htmlatthestartofthebody')
19
</script>
20
<p>Helloworld!</p>
21
22
<p>ThisisanHTMLtemplate</p>
23
24
<script>
25
console.log('hello,thisisalogcomingfromindex.htmlinthemiddleofthebody')
26
</script>
27
28
<p>Somemoretexthere</p>
29
30
<script>
31
console.log('hello,thisisalogcomingfromindex.htmlattheendofthebody')
32
</script>
33
</body>
34
35
</html>
36

The better way is to put your JavaScript code inside a separate file, and link to it from your index file.

Replace the code in index.html with:

index.js
1
<!doctypehtml>
2
<htmllang="en">
3
4
<head>
5
<metacharset="utf-8">
6
<title>BoilerplateTemplate</title>
7
<metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no">
8
<metaname="description"content="HTMLBoilerplateTemplate">
9
<metaname="author"content="Clearli">
10
<linkrel="stylesheet"href="styles.css">
11
<scriptsrc="headJavaScript.js"></script>
12
</head>
13
14
<body>
15
<p>Helloworld!</p>
16
17
<p>ThisisanHTMLtemplate</p>
18
19
<p>Somemoretexthere</p>
20
21
<scriptsrc="mainJavaScript.js"></script>
22
</body>
23
24
</html>
25

The link to the separate file can be put in the head (line 11) or the body (line 21) of the html.

Our JavaScript code is contained within files called headJavaScript.js and mainJavaScript.jsso we provide the name and path to these files as the source of our scripts.

Summary

You can place a script tag in the head, in the body or both.

You can also add a link to a separate JavaScript file, either on its own or use in combination with script tags in the head and body.

Best practice is to place your JavaScript code in a separate file, because it makes your code easier to read and work with. This should be put in the head, so the JavaScript is loaded by the browser ready for any code which may rely upon it on initial load.