JavaScript is used to enhance your HTML and CSS with animation, interactivity and visual effects. Unlike HTML and CSS, which concern themselves with how things are displayed, JavaScript can make logical decisions and is such an imperative language.
JavaScript
What is JavaScript?
Running JavaScript
You can run JavaScript locally by making use of node.js. You can download is from
here
and download the version that matches your operating system. Once downloaded, open the installer and follow the
instructions to install it. To check if it has installed correctly, you can run
node -v
in your terminal or git bash to check which version is installed.
To write your own JavaScript file, you can create a new file in VSCode or the IDE of your choice and give it the .js extension.
Asynchrony
JavaScript is asynchronus and as such the code does not run line by line in the order it appears like in HTML and CSS. Instead, some parts of the code may take time to finish, such as loading a file or fetching data, and JavaScript lets the rest of the code keep running while it waits. This is very important and by design. JavaScript is single-threaded, meaning it can only do one thing at a time. But websites need to stay responsive; imagine a button not working just because an image is still loading. That's where asynchronous code comes in. It allows slow tasks (like network requests, reading files, timers) to happen in the background, without freezing the whole program.
Resources
The main resource that I rely on for JavaScript is the Mozilla Developers Resource for JavaScript; essentially the go to online documentation. Another option is JavaScript the Definitive Guide by Dave Flannigan if you are after a physical textbook.
Syntax
Firstly, JavaScript files in your project should be kept in a specific folder such as assets/js or static/js.
You can include JavaScript directly in you HTML files by wrapping it within a
<script></script>
element. For most purposes this should be placed at the bottom (but still inside) the
<body>
element so that it is loaded last, ensuring that any elements it targets have already been loaded. Or can be
included in the
<head>
element or linked to from an external file using
<script src="filepath/file.js"></script>.
Comments in JavaScript follow this syntax.
// This is a comment in JavaScript
/*
This is a multi
Line comment
In JavaScript
*/
The key points to keep in mind whilst writing JavaScript code are:
- JavaScript is case sensitive so for example, TIME and Time in JavaScript have two different meanings
- End each line with a semi-colon (;). This is the JavaScript equivalent of a full stop. Strictly speaking, it is not entirely necessary these days because JavaScript will automatically insert semi-colons when you run it, however this does mean that it will sort of guess and may not get it correct every time.
- Variables and functions should be named using camel case. This means that they start with a lowercase letter and instead of using spaces between each word, the next word starts with a capital letter, such as camelCaseExampleVariable. The ups and downs of the capital letters are said to resemble the humps on the back of a camel, hence the name.
- JavaScript arrays are 0 order. That means if there is a list of 10 numbers. The index of the first number is 0 and the index of the last number is 9.
- For a comprehensive guide on good code structure in JavaScript see the Code Conventions by Douglas Crockford.