In this article, we will get an overview of the programming language JavaScript and we will learn how to see our code output and results when working with JavaScript.
In short, the easiest and most convenient way to see our JavaScript output is to use the console.log() method which shows a message in our web console:
console.log('Hello, world!');
A great JavaScript documentation can be found here.
This article is the first part of a JavaScript series here on Finxter. Feel free to check out the other articles after going through this one!
Feel free to skip ahead to the different ways to see your output in JavaScript—we’ll start slowly with some introductory material next.
What is JavaScript?
JavaScript is a programming language that was created in 1995 to make websites interactive and more dynamic. Together with HTML and CSS, it defines one of the three core technologies for the front-end of the web. If you used any kind of website where you interacted with the website in some way, you definitely came across JavaScript, maybe without knowing it.
So, why should you learn JavaScript? According to the “Stack Overflow Developer Survey 2021” JavaScript continues to be the most commonly used programming language.
Thus, although the language was created almost 30 years ago, it is still very much in demand.
There are countless libraries and frameworks built on top of JavaScript, such as React.js or Vue.js.
Hence, there are plenty of options to dive into after learning the language itself.
JavaScript and HTML
As we already know, JavaScript is mainly used for web development. So, when we are working on a web project, we have an HTML file that looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My homepage</title>
</head>
<body>
<h1>Hello, there!</h1>
<p id="p1">A paragraph.</p>
<script src="main.js"></script>
</body>
</html>
This is not an HTML tutorial. However, we will briefly go through what’s happening here.
The HTML file starts with a document type declaration which tells the browser what kind of document to expect.
All the actual information about our website is nested in the <html> tag.
The <head> tag contains the <meta> charset tag which specifies the character encoding.
It also contains the <title> tag which is the title of our homepage and can be seen in the browser’s title bar.
Then comes the <body> tag where we find the actual content of our webpage. Here, we can see a header tag <h1>, a paragraph tag <p> with the ID p1, and the <script> tag.
If we applied some form of CSS, we would link it in the “<head>” tag, but we will not do that here since it would be a bit too much for this tutorial.
The really interesting part of the HTML file for us is the “<script>” tag because it links to our JavaScript file with the src attribute. As we can see, we set the src attribute equal to "main.js" since this is the name of our JavaScript file. When we link a file this way, it means that the HTML file and the JavaScript file have to be in the same folder:
I’m using the code editor Visual Studio Code for development.
Here, I created the folder “JavaScript” and created two files: “index.html” which contains the content we saw above, and the “main.js” file.
Modify the HTML Document with JavaScript
In this section, we will see how to change the HTML document using JavaScript.
To be able to see the changes, we will have to open the HTML file in some way. There are different ways to do so: We can open the folder where our HTML file and JavaScript file are stored.
Here, we can just double-click on the “index.html” file. On my computer, this opens the Chrome browser by default. However, if you want to use another browser, you can right-click on the “index.html” file and open the file with another browser.
Doing it this way, we always have to reload our browser window when we make changes to our files. Thus, this method is not that convenient.
Using the code editor VS code that I already referred to, we can download the extension “Live Server”. To do so, we go to the “Extensions” symbol on the left-hand side and type in “Live Server“.
After clicking “Install” you might have to restart VS code in order to make the extension work properly.
Once we did that, this symbol should appear on the bottom-right corner:
When we click that, it opens the HTML file in our browser.
And now, anytime we make changes to the files and save the changes, the changes appear automatically without refreshing the page manually.
This is what the web page looks like at the moment:
Now, we head over to the “main.js” file and type in our first line of JavaScript code:
document.write('JavaScript is awesome!');This method writes the String "JavaScript is awesome!" to our HTML document.
💡 Notice that we end the command line with a semicolon to define the end of this statement.
So, when we save the “main.js” file and have a look at our browser again, we can see the following web page:
Compared to the initial web page, we can see that we added the sentence "JavaScript is awesome!" below the rest of the document’s content. Thus, we successfully modified our HTML document using JavaScript.
We can also change an existing HTML element. Therefore, we use this method:
document.getElementById('p1').innerHTML = 'A great paragraph';Here we access an HTML element by its ID, namely “p1” and change the inner HTML to something new, in this case: "A great paragraph".
When we save the JavaScript file and have a look at our browser again, we can see that the paragraph indeed has changed from "A paragraph" to "A great paragraph":
Display Output with the Console
By now, we saw how to use JavaScript to modify our HTML files and view the changes in our browser.
However, we will often want to get some JavaScript output without modifying an HTML file.
In fact, we do not always work with any kind of HTML when working with JavaScript. A great way to do that is to use the “console” object which gives us access to our browser’s debugging console.
Let’s see how that works. We add a line to our “main.js” file:
console.log('I am in the console!');We apply the console method “log” here which outputs a message to the browser’s console.
⭐ The console.log() method is the most commonly used way to produce JavaScript output and it is especially useful for testing and debugging.
When we have a look at our web page again, we can see that nothing has changed:
That’s because we did not modify the HTML file in any way.
But when we press CTRL + SHIFT + J on Windows or CMD + SHIFT + J on Mac, the browser console opens:
And there we can see the text "I am in the console!" that we put in the “console.log()” statement.
Inside the console, we can also input JavaScript code:
However, especially for larger projects, it is recommended to use a code editor for development. Using the browser console for coding is good for quick testing.
If we do not want to use the browser at all for getting JavaScript output, we can produce the output within VS code directly.
Therefore, we need to install the “Code Runner” extension:
And we need Node.js to be installed.
Our “main.js” file now only contains this one line of code:
console.log('I am in the console!');When the JavaScript file is opened, we press CTRL + ALT + N on Windows or CMD + OPTIONS + N on Mac. This runs the JavaScript code and the output will be shown in the output window at the bottom of VS Code:
This method for creating output is also great to use when we have got a lot of code, but we only want to run a part of it.
We will now add a new line of code to the “main.js” file:
console.log('I am in the console!');
console.log('Hi console!');If we ran the whole code, both messages would be shown.
However, we might only want to show the second line. Therefore, we highlight the second line, and then we hit CTRL + ALT + N on Windows or CMD + OPTIONS + N on Mac.
This way, we are able to run only a fraction of our code which is especially useful when we are working on a big project and we want to test a part of our code.
Summary
In this tutorial, we learned what JavaScript is, how to modify HTML documents with it, and how to view JavaScript output in the browser and in our code editor.
If you wish to learn more about JavaScript, stay tuned for the other tutorials that are being released to Finxter.
And for more tutorials about other computer and data science-related topics, check out the Finxter email academy!
Happy Coding!