Javascript is a scripting language, unlike the likes the of HTML which is a mark up language. The key difference is that whilst HTML is just a series of tags used to give meaning and structure to some text and images, Javascript is a language that you as the developer can program, in order to have your pages do stuff – be interactive.

As such Javascript has many of the common features of others programming languages – variables, conditional logic, functions, loops, objects and arrays. A grasp of these key concepts will help you in lots of other languages but Javascript is a good starting point because of its many uses in web design.

The whole point of using Javascript within a web page is to add interaction very often involving outputting change to the user – in terms of different text, images, HTML or CSS values.

Variables

Variables are containers for information – information that can be of different types such as text or numbers. In Javascript variables are created (or declared) with the var keyword.


var firstName;

Notice the semi-colon (;) at the end of the line to indicate the end of the statement. The above declares a variable but doesn’t place any value in it. You can think of it as just an empty box waiting for content. We can put a value in the box (assign a value) using equals (=) as follows:


var firstName = "Martin";

Notice that the value “Martin” appears in quotes. This is to indicate that the value is text – or to use the more techie term – what we call a ‘string’. Note that when you assign a string/text value you can use double quotes, as above, or single quotes just as long as they pair up.

If you were wanting to place a numeric value in a variable there is no need for the quotes.


var age= 21;

Warning: Beware if you did use quotes in the above example it would be treated as string and not a number.

You probably want to see something happen in the web browser now so take a look at this page.

Alerts and Console

In the example linked to above the value of a variable is sent to the alert() method. Methods in a programming language represent doing words / verbs – and are things that you can do – sometimes requiring a value, sometimes that value taking the shape of a variable.


var surname = "Cooper";
alert(surname);

A Javascript alert creates an alert box and the value of the surname variable is output in it.

If you want to try this yourself create a simple HTML page and add the following before the closing body tag – that is the </body>.

There is a simple example here for you to use.

Testing Pages

Testing Javascript only requires a web browser. You can just open up your pages in the browser to test the Javascript.

You can also make use of jsfiddle to play with code. Here is the simple alert() example from above:

JSFIDDLE Demo

Note: Javascript is what is known as a client side technology. That means you only need a web browser to test your pages – no need to publish them to a web server. Obviously, when you want your pages to be viewed by other people later on, then they will need to be published to a webserver.

As well as alert() a subtler way of debugging is to use a Javascript method called console(). Modern browsers like Chrome, Safari, IE9 and Firefox tend to have a ‘console’ often found as part of an Inspector. This is a pane that appears at the bottom of the browser window. For example, in Google Chrome if you right-click anywhere in the page you will be offered a menu with ‘Inspect Element’ as an option. When you select this you will see the Inspector appear at the bottom of the browser window. The Console tab is on the right.

Try changing the code in the simple example to the following:


var surname = "Cooper";
console.info(surname);

This time you will see the value of surname placed in the console window. This is a neater way of seeing what is going on in your code rather than to continually have to click on alert boxes.

The <script> Tag

If you look at the HTML code of the above example then you will see that it is placed inside the <script> tag. There are other places where this code can be placed but for now we’ll leave it here. The reason it is at the end of the document is quite simple. As previously mentioned, Javascript is used to change a HTML document. In order to make changes it needs to know what the structure of the HTML actually is. We call the structure of the HTML the DOM. We place our code at the end of the document so that we can rightly assume that any Javascript we write knows the structure/the DOM of our HTML.

A number of the concepts outlined here can be expanded upon but before we do let us make sure we are happy with the basic programming concepts used in Javascript.

Leave a Comment