Get Going with JavaScript

What is it?

JavaScript is a programming language which can make web pages interact with the user. It can make web pages respond to user actions. Up until now our web pages haven’t actually done much. The web server sends the web pages to your browser, you click on links and that is about it. What we want to do is provide a way for the web page to interact with the user. We are going to do that using JavaScript. JavaScript is a great way to get into programming because you don’t need to buy a compiler or development kit to use it. All you need is what we have been using throughout the Web section of Technology for Testers—a browser to run the JavaScript and Notepad to write it in. Let’s be consistent with the overall approach of this series and look at an example before we discuss what JavaScript is.

Example

Type the example into Notepad and save it in a file called TechTest10.htm.
<HTML>
<HEAD>
<TITLE>Technology For Testers – JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JAVASCRIPT”>
<!–
function DisplayMessage(){
alert(“This is the alert box” );
}
//–>
</SCRIPT>
<H1>Technology For Testers – JavaScript</H1>
<FORM>
<INPUT TYPE=”button” VALUE=”Click here to call the function” onclick=”DisplayMessage()”>
</FORM>
</BODY>

Get Going with it…

In order to display it:

  • Windows: in your browser double click on it in Windows Explorer or open a browser and put
    ‘file:///C:/path-to-your-copy-of-the-example/TechTest10.htm’ in the address bar.
  • Mac:

We have some new tags in this month’s example. The first is the <SCRIPT> tag. This tells the browser that the text between the <SCRIPT> and </SCRIPT> tags should not be printed. It also tells the browser that it must treat this text differently because it is a script. A script is really a piece of program code. The script tag specifies what language the script is written in—JavaScript in this case. Microsoft have their own scripting language, VBScript, so the LANGUAGE=”JAVASCRIPT” part of the script tag is important, as it tells the browser how to interpret the code. VBScript is not used as much as JavaScript on the Web because not all browsers can interpret it. Internet Explorer can of course because its from Microsoft too, but JavaScript is now the most common scripting language for the web because it works in the majority of browsers. It is another example of how Microsoft missed the boat early on in the web’s development.

So now we have a section for the script. The script is enclosed in a comment tag starting with <!– and ending with //–>. This ensures that it is ignored if it is read by an old browser which does not understand JavaScript. More on this in the next issue.

What is in our script? Well not much really, just the following three lines.

function DisplayMessage(){
alert(“This is the alert box” );
}

The first line says that we are defining a function called ‘DisplayMessage’. You can think of a function as a block of script that can be used many times by other scripts within the HTML document. When the web page loads, the browser reads the function, loads it into memory, and then uses it later, when something calls it. When the function is called it carries out some kind of action—in this case it displays a message box with the message “This is the alert box”. The code: alert(“This is the alert box”) does this. The alert function comes as standard with JavaScript and you can use it anywhere in your code. The whole function is enclosed in curly brackets — ‘{‘ and ‘}’ — which are the same as in the C language and just mark the beginning and end of blocks of code.

Ignore the ordinary brackets, ‘(‘ and ‘)’ after the function name. These are used when we wish to pass information into the function when it is called and we are not doing that in this case.

Now all we have to do to run this function is to call it. That is, we need to have a line somewhere else in the code which looks like:
DisplayMessage();
We want the web page to be interactive so we have put the call to the function in the click event of a button. ‘Events’ are (mostly) triggered by user actions such as clicking or keying This gives rise to the term event driven programming where code is put into functions which run when events are triggered by a user action such as a mouse movement or click. You can see the function call in the example—it’s in the definition of the button. We have a form (see last months article on forms) with a button in it which has the caption “Click here to call the function”. It also has the code:
onclick=”DisplayMessage()”

This means when the button is clicked it calls the DisplayMessage function. The DisplayMessage function call is in the ‘onclick’ event. DisplayMessage runs the alert box which displays a dialog box with a message in it. The user must then press the OK button. Try running this example.

So there it is. JavaScript brings programming into your web pages. It can be used to make your web pages respond to user actions. If you don’t understand the detail, don’t worry. Be happy that you understand the overall concepts, which are that JavaScript is written into the same file as your HTML and that you don’t compile it. It is compiled or interpreted when the page is loaded into the browser. It provides a way to interact more closely with the user. For example, JavaScript can be used to provide validation of data that a user inputs into a form before it is sent back to the server. If all of the validation were done on the server, the user would have to wait for long periods before being told that they had not put the required information into a form. JavaScript can do this much more quickly.

JavaScript is Not Java. Let me write that again. JavaScript is not Java. The Java and JavaScript languages may superficially look similar but they work in two totally different ways. When you write a Java program it must be ‘compiled’. These compiled applets can then be inserted into HTML pages using a new tag (more on this later in the series). The actual source code does not go into the HTML page—only a reference to the applet as a whole. That’s Java. The JavaScript language is written directly into HTML pages. There is no compile stage at all. The raw JavaScript is interpreted directly by your browser.

Have a Play

The best way to learn something is to do it. You could try some of the following:

  1. Try putting the call to the function directly after the curly bracket at the end of the function. How is the behaviour different.
  2. Try putting the call to the function in a Script tag in the page header (i.e. before the function definition). You get an error when the page loads. This is because the function is called before it has been loaded into the browser.
  3. Try using a different event to the onclick. Try:
    onmouseover=”DisplayMessage()”.
  4. The great thing about the web is that there’s masses of Web pages out there for you to look at. You can learn from what is good and also from what is bad – and there are a plenty of badly built websites available for you to learn how not to build web pages. There is a mass of JavaScript code out there and you can look at it by opening a web page and clicking the View|Source menu item (or equivalent) in your browser.

Next Steps…

If you want to progress further you could try the following:

Leave a Reply

Your email address will not be published. Required fields are marked *