JavaScript: The Basics

JavaScript, or JS for short, is often referred to as the "language of the web" - and for good reason, it's the most popular scripting language on the internet and works in all major browsers! It's completely different to Java, which is a more complex programming language - people often confuse the two, and is very good for adding an extra layer of interaction or logic to a webpage.

JavaScript makes things on the web, that would otherwise be impossible, possible. In your journeys across the web you may have ran into things like clocks, pop-up boxes, dynamically changing content, and ever-scrolling pages, all of which are likely powered, at least somewhat, by the JavaScript scripting language.

This set of tutorials aims to teach you the basics of JavaScript from the ground up, but will require at least a basic knowledge of HTML and CSS (the languages used to actually create webpages).

Ok, so now that we should know what we're leaning - let's actually start learning it! There are two main ways to code JavaScript, either "inline" or "externally". It's generally considered better practice to code in external ".js" (the file extension for JavaScript) files, however inline JavaScript can be useful for testing purposes, and also prevents another file being requested on the load of a webpage. We will be using both methods throughout this series of tutorials.

You can create JavaScript files (file with the ".js" extension) using any text editor for any platform (whether Windows, Mac, Linux, or otherwise!). I personally recommend Sublime Text 2 as it's cross-platform and looks pretty, but anything will suffice (Notepad, TextEdit, 'nano', whatever!).

To get us started you should create a project folder for this tutorial series that contains an 'index.html' file (you should know how to do this if you know HTML!) and a 'js' folder which will contain all of our JavaScript files. Once you've done this, just put some basic HTML into our index.html document to act as a base:

<!DOCTYPE html>

<html>
<head>
	<title>This page is to test JavaScript!</title>
	<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
	
</body>
</html>

You should also create a file called 'script.js' (you can call this whatever you like, but you must make sure that when we reference 'script.js' later, you reference whatever you named the file) inside of our 'js' folder for the majority of our JavaScripting (at least for now!). We can just keep this empty for now as we'll mainly be concentrating on actually including our JavaScript file in our HTML for this basic tutorial.

Once this file is created, we need to link it to our HTML document so that the browser knows to load some JavaScript when it loads our HTML page. To do this we can use the script element within the head of our HTML document, with the src attribute pointing towards our 'script.js' file:

<script src="js/script.js"></script>

It's worth noting that some people like also having the type attribute on the script element set to text/javascript, however this isn't necessary in HTML5, and I've made my project of an HTML5 base. It's also worth remembering that the script line can actually go in the head section of your HTML document (as alluded to earlier), or it can put just before the end of the body (some people do this so the JavaScript is loaded by the browser after the main content of the page, which also makes sense). Most of the time (when you're not on a production server) it doesn't really matter and just depends who you ask for advice on the matter (some people swear by the former, some by the latter).

So we now know how to include external JS files into our HTML documents, and this should make it the case that any JavaScript that we put inside our 'script.js' file will be executed whenever the page loads! And although we're not going to use inline JavaScript in this tutorial, it's also worth noting that you can put JavaScript directly in the head of the document by simply surrounding the JavaScript in script and /script tags (with the optional type attribute set to text/javascript), as well as also having the option to put JavaScript inside of basic HTML attributes which we'll talk about more in the future.

So now we have everything linked up correctly, let's just learn some quick and easy JavaScript so we can end this tutorial with something that actually functions rather than me just telling you that things should work if we put JavaScript in there! Arguably the simplest thing you can do in JavaScript is creating a basic pop-up box.This pop-up functionality is achieved by using the 'alert' function (don't worry that you don't know what that means yet) - basically you just need to use the alert keyword, and then specify the message in double or single quotes in brackets (we'll go over more about why this is in a future tutorial). For this example, let's just put a simple alert in our script.js file:

alert("Hi");

Now if you open the page in a web browser, you should now see that a pop-up box appears! We have some fully functional, basic JavaScript linked to an HTML page!