console.log() method which shows a message in our web console:
Thus, although the language was created almost 30 years ago, it is still very much in demand.
Hence, there are plenty of options to dive into after learning the language itself.
<!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
<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
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 “
src attribute. As we can see, we set the
src attribute equal to
I’m using the code editor Visual Studio Code for development.
Here, I created the folder “
index.html” which contains the content we saw above, and the “
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 “
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 “
This method writes the String
💡 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
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".
"A paragraph" to
"A great paragraph":
Display Output with the Console
console” object which gives us access to our browser’s debugging console.
Let’s see how that works. We add a line to our “
console.log('I am in the console!');
We apply the console method “
log” here which outputs a message to the browser’s console.
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 “
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.
Therefore, we need to install the “Code Runner” extension:
And we need Node.js to be installed.
main.js” file now only contains this one line of code:
console.log('I am in the console!');
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.
And for more tutorials about other computer and data science-related topics, check out the Finxter email academy!
Hi! I’m Luis, an Information Systems student and freelance writer and programmer from Germany. I love coding and creating educational content about computer science. For the articles I’m writing, I combine the knowledge I gained at the university with the insights I get from constantly reading and learning about new technologies. Making education more accessible for everyone is my passion and I hope you like the content I’m creating!