Thanks for visiting Learn JavaScript On Your Coffee Break. This is the first part of a longer series dedicated to teaching you the JavaScript programming language in a timely fashion. We'll begin this series by talking about where we can actually write our JavaScript code. Let's begin!
Finding a home for our JavaScript code
If you've read the preface of this series, you'll know that an important prerequisite is understanding HTML (Hyper Text Markup Language). If you're not familiar with this concept, I'd recommend learning it before proceeding with this series.
There are two ways in which we can write our JavaScript code; inside of a .html file, or inside of a .js file.
First, let's take a look at the former option.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<script>
// Your JavaScript code goes here
console.log("Hello World!")
</script>
</body>
</html>
Okay, so what's going on here?
You will notice we're using the HTML <script> tag . This tag indicates that we should write JavaScript code inside of it. Don't worry too much about what we can do inside of the <script> tag, for now just understand that we can write JavaScript code here, and this code will run when we navigate to our web page.
If you were to navigate to this page in your browser and open the developer tools, you would see Hello World! printed to your console!
You have successfully written your first JavaScript program - a simple instruction that tells your page to write some text to your console! Don't worry too much about why console.log() is written the way it is, we'll learn about that later in the series.
We can also isolate our JavaScript code into it's own .js file. This means we have one home for our HTML code, and one home for our JavaScript code. If you're familiar with CSS (Cascading Style Sheets), you'll already be familiar with the concept of isolating languages into their own respective files.
To do this, we simply assign a src attribute to our <script> tag, and pass in the name of our .js file as the value...
<script src="script.js"></script>
In this example, we are telling our web page that we need to run the code inside of script.js , rather than writing the code between the script tags.
// script.js
console.log("I am a JavaScript file!");
Now if you reload our web page, you'll see I am a JavaScript file! printed to the console instead!
Okay, but which approach is best?
You might be thinking: Well, surely it would be easier to just write all of my code inside of the script tags?
Yes, you could be right about that to some extent. However, we need to think about the potential scope of our website. To put it simply, the larger our website becomes, the more JavaScript code we need to write. As you can imagine, having all of our JavaScript code crammed in between a single <script> tag could become overwhelming to work with.
This is why, in most cases, we should look to separate our code into it's own .js file to prevent this from happening.
Conclusion
Well done!
You've written your first line of JavaScript code and printed Hello World! to your developer console! You've also learned about the two places that we can write our JavaScript code: inside of a <script> tag, or inside of it's own .js file.
If you found this at all overwhelming, that's completely normal. You're learning a foreign concept, and you'll slowly build familiarity with it throughout this series.
The goal of this lesson was purely to see JavaScript code in action, rather than understanding how to read the language.
In the next part of this series, we'll learn about variables and working with numbers.
Thank you very much for reading!