Getting Started

Intro to JavaScript

JavaScript?

JavaScript (JS) is traditionally regarded as the language of the Web. Pretty much all browsers support JavaScript to varying (extensive) degrees. As it stands, more than 94 percent of sites on the internet utilise JS in some form. That's a lot of JavaScript.

Over 10 million developers worldwide use JS, making it the most popular programming language worldwide at the moment.

Step 0

Before we get properly down to business, it is important to clarify a few terms. The two main things that you will need in order to follow along with this content is a browser and an editor.

A (web) browser is an application which allows you to navigate the internet. You supply an address, and a server will send your browser the files needed to render the webpage you requested. For this workshop, I suggest sticking with Google Chrome

You can also write and edit your own files for the browser to render, which is where the editor comes in. a Code Editor is an application not too different from a word processor, but instead of being focused on typesetting, code editors instead provide tools to help you write code for computers to interpret.

In this case, we will use Brackets

Step 1 - The web page

We are going to start things off by making a folder to keep your work in. You can do this on the desktop or anywhere else that makes sense for you.

Open up your code editor (Brackets), and add the folder that you just created File > Open Folder

Next up, make a file called index.html inside the folder (right click inside the folder, and select New File)

You are going to need to add the following markup into the document. This will act as the scaffolding of your web page.

<html>
    <head>
        <title>My First web page</title>
    </head>
    <body>
        <h1>my heading</h1>
        <p>My paragraph</p>
    </body>
</html>

🤔 What is happening here?

Web pages are made up of a few different types of file. the most common ones which you will find in almost every site are Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS).

The above snippet is HTML, and it consists of a number of tags used to "markup" the text. The tags indicate to the browser what type of content the contained text is. For example, our h1 tag tells the browser that we are dealing with a Level 1 Heading, and the p tag indicates that we are working with a paragraph. The current HTML5 standard includes around 150 tags, but a lot of them are very niche, and you certainly don't need to remember each and every one. For a good reference about different tags, look here

Step 2 - The good stuff, JavaScript

Now we are going to add some actual code to make magic happen. To do this we are going to need to add a script to our web page. The easiest way to do this is to add a new tag into the body of your HTML document. After your p tag, but before the closing body tag, add the following:

<script>
    console.log('Oh look, some JavaScript');
</script>

When the browser reaches a script tag, it will run all the code contained within before continuing on. Because of this, we tend to put the script tags at the bottom of the page most of the time, so that they won't slow down the loading of the page too much.

⚡️ console.log

console.log is a function which tells the browser to display some information in the dev tools console. this is super hand for debugging issues and check whats what as you write your code. To see the fruits of you labour, right click somewhere on your page, and select inspect. In the new window that pops up, go to the console tab, and you should see the output of your script.

Console logging is all well and good, but it is more for developers and debugging. Most of your users won't see it. lets do something that the users will actually be able to see. replace your console.log with alert so that the contents of your script tag reads like

alert('Oh look, some JavaScript');

and then save and reload your page.

External script files

As you start writing more and more code, you will want to keep it in separate files so that everything stays tidy. This also has the benefit of keeping your code separate from your markup, and letting you reuse the same code in multiple different pages without having to rewrite it each time.

Lets do this now.

make a new file in your folder called script.js and move the contents of your script tag into this file.

You will now have an empty script tag in your html file, and we are going to change it so that it load the content of external file. Change your pair of script tags to be like this:

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

Now when you save and refresh, everything should still be exactly the same. Good.

Comments

Comments allow us to write lines which will be ignored by the computer. This might sound weird, but it can actually be very useful. A lot of time spent coding is actually spent reading other people's code, and having comments can help explain what is happening, and why. Think of it like sticky notes for your code.

There are two kinds of comment in JS

// Single line comments which start with a double slash

and

/*

Multiline comments, which allow you to write blocks of comment without having to put slashes at the start of every line.

This can be handy for writing explanations and documentation, or for temporarily stopping certain blocks of code from running while your are debugging.

This type of comment is denoted by the slash-asterisk asterisk-slash seen at the top and bottom of this block.

*/

HTML also has comments. they start with <!-- and end with -->

<!--  Simply surround the comment with those tags, and it will be ignored by the browser -->
PreviousThe BasicsNextThe Basics

Last updated