JS Basics


We have gone through the HTML basics and CSS basics, now for the final part of the trilogy. JS or JavaScript is the final of the three languages every web developer must know.

JavaScript is a dynamic programming language that gives you the power to program the behaviour of web pages and provide dynamic interactivity on websites.

JS Hello World Example

To show the power of JS we will do a simple hello world example. Create a basic index.html page like below. Like a <link> tag for an external CSS file, you use a <script> tag with a src attribute to include an external JS file.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1></h1>
        <script src="js/main.js"></script>
    </body>
</html>

In the main.js file

var header = document.querySelector('h1');
header.textContent = 'Hello world!';

When you run the html page you will now see “Hello World!” displayed on the page.

What just happened?

In our external JS file on line 1 we find the <h1> element on the page using the querySelector function and assign it to a variable called header. Similar to how we use CSS selectors. With header declared we then change the textContent property to “Hello World!”.

JS expanded

The Hello World example I ran you through is just a small part of the power of javascript. You can use javascript to trigger actions when a button is clicked, populate content on the web page from another website when it first loads and so much more.