Using JavaScript

Create a JavaScript file

In the root of your project,
create a new file called site-script.js.

You should have a new file called site-script.js.

Include the script into your HTML

  ...

  <script src="site-script.js"></script>

</body>

JavaScript includes go at the end of the body.
This is so they load after the HTML and CSS.

Nothing will change yet! The JavaScript file is empty.

Use Chrome Developer Tools to check
that the file was included correctly

Open the developer tools using Ctrl + Option + I.
Change to the Network tab, then refresh the page.

The file site-script.js should be listed.

Write some code to check your script runs

console.log('Hello!');

In site-script.js, use the console.log() function
to log a message to yourself in the developer console.

Make sure your file is saved!

Check your output in the developer console

Open the dev tools and switch to the Console tab.
Refresh the page, and your message should be displayed.

If you have an error, try to understand
the error and correct your code.

Hooray, I got a message with no errors!

Things we learned

• Adding a JavaScript file
• Viewing network activity
• Logging to the console