Skip to main content

JavaScript

JavaScript is a cross-platform, object-oriented scripting language. At a basic level it is used to enable interaction with HTML, while it can also be used to write complex applications on its own.

Importing JavaScript​

JavaScript can be applied to your web application within HTML itself or by importing it from an external source.

You can use a file (in this example called main.js) on your device or alternatively a source from the internet:

<head>
  <script type="text/javascript" src="/main.js"></script>
</head>

Or it can be applied inline after the body tag:

<body>
  <button class="navigation">Open menu</button>
</body>
<script>
  // Your javascript code here
</script>

Declaring and assigning variables​

You can declare variables in JavaScript in a few ways. You can use the keyword 'const' for variables that will not change value. You can use the keyword 'let' for variables that do need to change value. There is also the old keyword 'var' which you should not use.

You can then assign a value to your variable by using the '=' operator.

var myName = 'Harry'; // Don't use var!

const yourName = 'Fred';
yourName = 'Freddy'; // ERROR! Assignment to constant variable.

let herName = 'Fiona';
herName = 'Sally';

Declaring and using functions​

There are two ways to define your functions in JavaScript, using the 'function' keyword or using the arrow notation:

function sayHi(name) {
  console.log(`Hi ${name}!`);
}

const sayHello = (name) => {
  console.log(`Hello ${name}!`);
};

sayHi('Chris'); // Console logs: 'Hi Chris!'
sayHello('Christine'); // Console logs: 'Hello Christine!'

The Document object​

JavaScript has access to your HTML via the Document Object Model (DOM). This DOM represents all the elements in your webpage and helps you access it. You can take a look by logging the document object.

console.log(document);

Selecting elements in the DOM​

In order to make your HTML interactive you first need to 'get' the element you want to interact with. One of the things the document object allows you to do is select elements in your HTML. One of the methods available is 'querySelector'. QuerySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

You can use a class as your selector in order to get your toggleButton. When you console.log this button you can see that it returns the HTML element.

const toggleButton = document.querySelector('.navigation');

Element attributes​

The querySelector returns the element with all of its content and attributes. Let's discover which attributes the element you queried actually has. To do this, spin up a browser and open the browser's developer tools. Select the Console tab and write, or paste a query selector into the browser's terminal.

document.querySelector('.navigation')

Make sure the class/query you're trying to select is actually on the page!

Now when you press enter, if everything goes right you'll see the element returned to you in the console. Write, paste or press up in the console to get the query selector again. This time don't press enter, but add a dot behind the code. This will show you all attributes that the element has. There are quite a few 😉

One of the attributes we'll want access to is the classList. More about it on MDN.

Events and event listeners​

In your webpage a lot of events occur. The user can click on something, type something on the keyboard or scroll the page for instance. If you want you can react to these events by using JavaScript. You can use the addEventListener method for that.

In this situation we want to listen if the user does a 'click' on the button you just selected. After specifying what event the addEventListener should listen to you can give it a 'callback'. A callback is just a function that gets called in a specific circumstance, in this case when the button is clicked.

toggleButton.addEventListener('click', () => {
  window.alert('Navigation button was clicked');
});

Further reading​