Javascript: The Basics
Ok, so now we know what we’re learning – let’s actually start learning it!It’s worth noting that these Javascript tutorials require previous knowledge of HTML & CSS (as most Javascript tutorials do).
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) files, however inline Javascript can be useful for quick testing.
You can create a Javascript file (.js) using any normal text editor (for Windows, Mac or Linux) – I personally recommend Sublime Text as it’s cross-platform and looks pretty. 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. Let’s firstly put some basic HTML into our index.html document:
<!DOCTYPE html> <html> <head> <title>This page is to test Javascript!</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> </body> </html>
And let’s 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 your JS file name) inside of our ‘js’ folder for the majority of our Javascripting.
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.
To actually include all the Javascript in our js/script.js into our HTML document (which currently means including an empty Javascript file – but that doesn’t really matter right now), we can use the script tag 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 set to text/javascript, however this isn’t necessary in HTML5/Modern HTML (and I made my basic HTML structure use the HTML5 doctype).You can put this line either in the ‘head’ section of your HTML document (this is the way I often do it), or you can put it just before the end of your body (some people do this so the Javascript is loaded by the browser after the main content of the page). Most of the time (when your 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 (any Javascript that we put inside our script.js file would be executed when the page loads)!
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 tags (with the optional type attribute set to text/javascript), as well as also having the option to put Javascript on different HTML. We will go over this in detail in later tutorials, but as a basic example:<a href="javascript: JAVASCRIPTHERE">Click Me</a>
But let’s get rid of that inline Javascript, we’re interested in nice, neat, external Javascript! 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 most simple thing in Javascript, is the
alert function. This is a simple pop-up box and is achieved by typing the alert keyword, and then specifying the pop-up box message in double or single quotes in brackets (we’ll go over more about why this is in later tutorials).
For this example, let’s just put a simple alert in our script.js file:
alert("Hi");
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!
Back to Javascript
