001 – Hello World – JavaScript Noob to Pro Tutorials

Hello everyone and welcome to a new tutorial series I am putting together to help anyone looking to pick up the basics of JavaScript.

JavaScript is the most widely used programming language on the internet because it allows you to interact with the front end of your website and more recently it has transitioned to the back-end code too with the addition of NodeJS.

In this episode, we will be getting to the grips with some of the very basics. The only assumption we will make about your current knowledge is that you know at least some basic HTML/CSS. If you don’t then please take a look at my HTML/CSS Noob to Pro tutorials.

The Console

So for those of you who don’t know already if you press F12 (or right click on a page then go to inspect) then you will be presented with some developer functionality built into your browser. At the moment we are interested in the console.

The console is typically used for debugging. It allows you to print out arrays behind the scenes without any HTML getting in the way.

So first off let’s see if we can print out “Hello World!” into the console.

Let’s create our index.html file and add our script tags to signify that we are running JavaScript. Usually you would have your JavaScript in a separate JS file like you would with CSS but for now, we will do this.

Inside our script tags, we will add “console.log(‘Hello World!’);” like so

Now if you open your console and refresh the page you should see “Hello World!”.

Now it would be pretty boring if we ended things here so let’s look at printing this out to the DOM.


The DOM, aka “Document Object Model” is essentially just what you see in your browser.

We can modify elements in the DOM with JavaScript in a similar way to what we would with CSS.

So let’s create a div with the id of “change-me” and in our JS we can run “document.getElementByID(‘change-me’);” to select this element.

By itself, that won’t do anything, but say we want to console log what is inside the chosen element. We can do that by appending “.innerHTML” and sticking the whole thing inside our “console.log” like so.

Now you should see “I am a DOM element in your console”.

Now if we want to change text we just have to assign it to a new value.

So let’s remove the “console.log” for now and after the “innerHTML” we can add ” = ‘Hello World!’;”.

If you refresh your page now then you should see the words change instantly from “I am a DOM element” to “Hello World!”;

On Click

But usually, you would want to do something like this on something else being actioned on the page rather than on the screen loading. So let’s add a button and see if we can change the words once the button is clicked.

The simplest way to do this would be to add an onclick attribute to your button and add your JavaScript inside there like so.

So now if you load the page you should be greeted with “I am a DOM element”, then once you click the button it should change to “Hello World!”.


So to recap what is going on in this JavaScript tutorial. We use “document.getElementByID(‘the-id’)” to select the element by ID. From there we can attach an attribute to tell the selected element what we want to do with it. In this case, we are using “innerHTML”, which will either return what is inside the element or if you tell it to change by setting it to a new string then it will do that instead.

Then we added all this to happen on an on click action by using the HTML attribute “onclick”.

In the next episode, we will take a look at adding variables and functions to our script.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *