Setting up JavaScript
Introduction
Before we write JavaScript, we first have to understand how to view our code. In this lesson, you’ll learn how to run the JavaScript code that you’ll write in the next lessons. Let’s get started!
Overview
By the end of this lesson, you should be able to:
- How to run JavaScript code
- How to access the console
Running JavaScript code
All the JavaScript that’s going to be written in this course will be run in the console/browser. Let’s take a look and understand how to do that.
The easiest way to write and see our JavaScript code is to embed it directly within our HTML document using the <script></script> tags. Take a look:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Script Tags: -->
<script>
// Write any JS in here!
console.log("JavaScript is amazing!")
</script>
</body>
</html>In line 10, you can see that we are doing console.log("JavaScript is amazing"), all this does is log the message in quotes to our console. Now, how can we see that console?
If you’re using VSCode, make sure you have the live-server extension installed. If you don’t, go back to this HTML Lesson or watch this Quick Video on how to set it up (it’s really easy!).
Once you have the extension installed, right click on your HTML file, and click “open with live server”. You should have a blank webpage (or a webpage with stuff on it based on your HTML File). Go ahead and right-click and click “inspect”.
Doing that should open up an editor on the right with a lot of buttons and what-not. On the top bar, click “console” like this:
console.log() show up there! This is how we are going view the console and see our code output from now on. Later on in the course, you’ll also learn how to use the entire “inspect” page to make your coding experience better!Separate JS File
Although we could just write our JavaScript code in our HTML file as shown before, there is a much more efficient way: creating a new file. When we make a new JavaScript file, we add a .js to it at the end.
Once we have a file made, the last thing we need to do is link that page to our HTML file. We can do that with this little code snippet right here:
<script src="index.js"></script>Make sure to replace whatever is in the src attribute with your JavaScript file name.
And that’s basically it! It’s time to really start learning the basics of JavaScript. In the next lesson, you’ll learn about the different ways to print stuff out to the console (on top of console.log()) and the different ways to interact with the user. Let’s get coding!
Find an issue/typo/error with our content? Please report it here