Baby steps towards JavaScript

While working on Africapic I've learnt a lot around web development, even JavaScript, which is something I never really thought I had the capacity for (I didn't do well at math in school, somehow I thought the two must be related). However, I found that through reading and practise it might not be so difficult in the end!

The first thing you’ll have to do if you want JavaScript in your website/page is to place it in the source code. This can be done either by placing it either in an external .js document and linking to it (much like you would an external stylesheet), or straight in the ‘head’ tag of your HTML code. For simplicity’s sake we’ll place it in our ‘head’ tag, so go ahead and create a ‘script’ tag with an attribute called ‘type’ and set the value equal to ‘text/javascript’. Remember to close the ‘script’ tag as you would any other HTML element. Now you have a space to work in. Your JavaScript code goes in between these two tags. Let’s do a quick example then to start us off, and I’ll get to explaining more about the language afterwards. You are no doubt familiar with those pop-up boxes that some websites use to alert you of something when you, for example, click on a button. Well, JavaScript has a number of built-in capabilities like this. This one is called alert(), and the brackets are critical to its success. So type in between you ‘script’ tags the following:
alert(‘You have been alerted.’)

Save your document and refresh your page. You should now have a little box that pops up with the message you typed. Try it without the quotation marks and notice how it doesn’t work. There’s an important reason for this, but it requires that we depart into the realm of theory for a little while.

What needs to be understood about JavaScript is that it is an object-orientated language for writing scripts. Scripts are little programmes that do little things, and they rely on the pre-existence of certain attributes of the browser you use. This brings us to the OPME model, which helps a lot in understanding what this means. Think of your browser, as it sits in front of you now, as being composed of a number of objects in a hierarchy. There’s the browser window which encompasses everything inside of it, there’s the specific document you are viewing (the webpage), there’s the status bar, the location tab (where you see the current website’s address), et cetera. See the following diagram as an example, here. Now, understand that each of these ‘objects’ have ‘properties’ which can be manipulated. This is done through the use of what are called ‘methods’. In turn these methods are activated by ‘events’ (like clicking on a link, for instance). Put it all together and you’ve got Objects, Properties, Methods, Events (OPME). What this means is that if you want to manipulate the properties of an object you need to do so through a method triggered by an event. Let’s take the example we used previously, the alert box, and look at it through the OPME model. Alert() is a method that tells the browser application to pop-up a little box, and it is triggered by the default event ‘onLoad’ which occurs when you load or refresh a page (you don’t have to specify the event as it happens by default). The object we’re using here is the window object, i.e. what you see on the screen and recognise as your internet browser application.
To make things a little clearer, if you’re still having doubts about this whole OPME model, let’s look at what are called functions. A function is basically a custom-built method. It can also perform more than one task, i.e. you can contain a number of separate or interrelated instructions in it. You need to declare a function in your ‘script’ tag, so let’s take an example where more than one instruction is stated:
Function MyFunction() {
window.alert(‘Hi there.’)
window.alert(‘How are you?’)
}
What I’ve done here is declared a function called "MyFunction" (be careful using caps because JavaScript is a case sensitive language), and within it are two instructions. The instructions are contained by curly brackets. This is basically the syntax of a simple function. This is where functions are helpful in understanding the OPME model if you think about them as follows. For now, take it for granted that a function needs to be triggered by an event. So, I can work backwards from the event, say, when someone clicks on a link, to the method (or function), I write my instructions and make reference to the property or object that I want to manipulate (in the above example it would be the window object, as I’ve made explicit, but it’s really not necessary to include ‘window’ in the instruction as the browser interpreting your script will do so anyway).

Lastly, we need to look at the event. For instance, if I want the above script to execute specifically when someone clicks on a button (and not just when the page loads, as would be default) I will embed the attribute onClick="MyFunction()" in the ‘input’ tag. Now my custom built method, which manipulates the window object will be called upon when the button is clicked. You can see how this fits the OPME model, and how the logic of the language works. If this has all made sense to you, then you should go out and buy yourself a good handbook of JavaScript, you’ll see where all this can lead to. There’s lots more to the language, but that’s for you to discover on your own.