Introduction to JavaScript

John Carter
18-7-2000

References:

1. Peter McBride JavaScript Made Simple. Made Simple Books. 1997. ISBN 0-7506-3797-8.
2. Molly Holzschlag HTML 4. Hayden Books. 1999. ISBN 0-7897-2049-3.
3. Nick Heinle Designing with JavaScript. O'Reilly. 1997. ISBN 1-56592-300-6.

In this introduction, we experiment with the use of client-side JavaScript scripting. We assume you know about basic HTML tags. A client-side script is a program that runs in your user's browser. As well as running the HTML code, the browser runs the script to perform certain functions on the user's browser window, such as showing a message in the browser status bar or validating user input into a text box, or opening another browser window. JavaScript gives the web page more power. It's a procedural language, with variables and arrays and loops and if-else-endif, which raw HTML doesn't have.

The Javascript scripts (there can be more than one) are embedded in the HTML code of the page. You'll see examples below. When the user calls up the web page by typing the URL (Universal Resource Locator) into their browser, the whole page with its HTML and embedded JavaScript comes from the server, down the internet or intranet into their PC and is interpreted by the browser to produce what they see on the screen. JavaScript-enabled browsers (later versions of both Netscape and Internet Explorer are) interpret the script as well as the HTML.

Client-side scripting, whether it's VBScript or JavaScript, is said to allow the user to 'interact' with the page. Actually, ordinary HTML forms allow them to do that don't they? But what's really different when you use client-side scripting, is that a certain amount of procedural processing (validation etc.) can be done locally on their PC rather that involving the server in these simple tasks. This reduces network traffic of course. It also allows more advanced graphics. You could write a game in JavaScript for example and it would run on the browser.

While VBScript only works on Internet Explorer, JavaScript works on both Internet Explorer and Netscape. That is, Netscape doesn't support client-side VBScript. So we are forced to use JavaScript. For client-side scripting that you want to work on both browsers, JavaScript is the language you must use.

The software used to produce this introduction was FrontPage Express. The examples were typed in using Notepad. The browsers used to test the pages were Netscape Navigator (NN) and Internet Explorer (IE).

Example 1

je1.htm Send an alert.

This example shows how Javascript code is inserted into HTML. An alert is a simple message box with just an OK button. You can't get any feedback from the user with it.

<html>

<head>
<title>Javascript Experiment 1</title>
</head>

<body>
<h1>Javascript Experiment 1</h1>
<p>

<script language="JavaScript">
<!--
alert("Hello")
// -->
</script>

</body>
</html>		 Note:
  1. The script tags.
  2. The script is enclosed in HTML comment tags, with an extra // at the end.
  3. This is how the alert looks:



Call up this page (je1.htm) now.

Exercise 1

(a) Type in and save the HTML and JavaScript shown using NotePad or some other editor. Run it using the NetScape browser.
(b) Try it using Internet Explorer.

Example 2

je2.htm Call a function to send an alert.

This example shows how JavaScript functions are decalred and called. Functions are declared in the <head> section.

<html>
<head>

<script language="JavaScript">
<!--
function f1()
{
alert("Hello")
}
// -->
</script>

<title>Javascript Experiment 2</title>
</head>

<body>
<h1>Javascript Experiment 2</h1>
<p>

<script language="JavaScript">
<!--
f1() // Call function f1. This is a comment.
// -->
</script>

</body>
</html>		 Note:
  1. The function f1 declared in <head>.
  2. The contents of the function are enclosed in curly brackets.
  3. Round brackets after the function name are necessary, both in the declaration and the call.
  4. Note that comments start with //.
  5. You can also have multiline comments. Start a multiline comment with /* and end it with */.
  6. Functions only need to be declared once, but can be called from different places in your page.

Call up this page (je2.htm) now.

Exercise 2

(a) Type in and save the HTML and JavaScript shown using NotePad or some other editor. Run it using your browser.
(b) Can the function f1 be called from other pages? i.e. what is its scope?

Example 3

je3.htm Put an in-line JavaScript script in the onClick event of a button.

This example shows how make a script execute when the user clicks a button.

<html>

<head>
<title>Javascript Experiment 3</title>
</head>

<body>
<h1>Javascript Experiment 3</h1>
<p>

<form>
<input type=button value="Click me" onClick="alert('Hello')">
</form>

</body>
</html>		 Note:
  1. Clicking the 'Click me' button executes the JavaScript code "alert('Hello')".
  2. Single quotes go inside double quotes. If you need to nest more deeply, it will be doubles inside singles inside doubles. And so on.
  3. There are no HTML <script> tags. The browser doesn't need them because it's expecting to see a script there.

Call up je3.htm now.

Exercise 3

(a) Type in and run ('render') the page using your browser.
(b) Will the page run in IE?
(c) How does the browser know it's JavaScript and not VBScript? We haven't told it.

Example 4

je4.htm Separate JavaScript statements using semicolons.

This example shows how to separate JavaScript statements in a script using semicolons.

<html>

<head>
<title>Javascript Experiment 4</title>
</head>

<body>
<h1>Javascript Experiment 4</h1>
<p>

<form>
<input type=button value="Click me" onClick="alert('Hello'); alert('Goodbye')">
</form>

</body>
</html>		 Note:
  1. Clicking the 'Click me' button executes the JavaScript code "alert('Hello'); alert('Goodbye')"".
  2. Most scripts will contain more than one statement.
  3. onClick is called an event.

Call up je4.htm now.

Exercise 4

(a) Type in and run the page using your browser.
(b) Put the script in a function and call the function from the button onClick event.
(c) Rewrite the page without a form, so that the same script runs unconditionally.

Example 5

je5.htm The Status line and the onMouseOver and onMouseOut events.

An event is something the user does and that the page responds to.

Here are some events you might want to write scripts to respond to:

This example shows how to display a message in the status line when the cursor is over a button.
The status line is at the bottom of the browser window.

<html>

<head>
<title>Javascript Experiment 5</title>
</head>

<body>
<h1>Javascript Experiment 5</h1>
<p>

<a href="jehome.htm"
onMouseOver="self.status='Click here to get back to the home page'; return true"
onMouseOut="self.status=' '; return true"
>Home</a>

</body>
</html>		 Note:
  1. Running the cursor over the hyperlink will run the script: "self.status='Click here to get back to the home page'; return true". This will put the message shown into the status bar at the bottom of the browser window.
  2. Running the cursor off the hyperlink will run the script: "self.status=' '; return true". This will put a blank into the status bar at the bottom of the browser window.
  3. 'Self', is the current window.
  4. The statement 'return true' is necessary with onMouseOver and onMouseOut for proper functioning.

Run je5.htm

Exercise 5

(a) Type in and run the page using your browser.
(b) Modify the page to run the following script. Put it at the beginning of the <body>.:

<script language="JavaScript">
<!--
self.defaultStatus="Experiments in JavaScript"
// -->
</script>

(c) Explain what the self object is.
(d) Explain what the defaultStatus property of self is for.

Example 6

je6.htm Finding out what sort of Browser the user is using.

We have already seen the JavaScript self object. Now we are going to list out some properties of the navigator object on the document object We use the write method to write to the document object..

<html>
<head>
<title>Javascript Experiment 6</title>
</head>
<body>
<h1>Javascript Experiment 6</h1>
<p>
<i>Here are some details about your browser</i> :
<p>
<script>
document.write("<p>navigator.appName is " + navigator.appName)
document.write("<p>navigator.appVersion is " + navigator.appVersion)
document.write("<p>navigator.appCodeName is " + navigator.appCodeName)
document.write("<p>navigator.userAgent is " + navigator.userAgent)
</script>
</body>
</html>		 Note:
  1. We have used the simple <script> </script> tags instead of the more complex ones in the previous examples.
  2. We have left out the <!-- and //--> comment tags around the JavaScript code. This means that older non-JavaScript-compliant browsers will show an error when they try to interpret the JavaScript code.
  3. document is the page itself. document.write means write on the page.
  4. navigator is the browser the user is using.
  5. The string concatenation character is +.

Run je6.htm

Exercise 6

(a) Try running the page using IE as the browser. Does IE 'know' that the script is JavaScript, even though we haven't told it? Remember, IE can process both JavaScript and VBScript.
(b) Insert the <!-- and //--> comment tags around the JavaScript code.
(c) What is the purpose of the <p> in document.write("<p>navigator.appName is " + navigator.appName)?

Example 7

je7.htm Opening and writing to another window .

Here we meet the window object and its open method. We cover the open method in detail in a later example.

<html>
<head>
<title>Javascript Experiment 7</title>
</head>
<body>
<h1>Javascript Experiment 7</h1>
<script>
x=window.open("", "MyNewWindow","width=300,height=100")
x.document.write("<p>This is a message for MyNewWindow<p>")
</script>
</body>
</html>		 Note:
  1. The script opens a new window which we call x.
  2. We then write to the document part of this window. What could be simpler?
  3. If you don't put the last <p> in the last write, you might find nothing will be written to the new window. That's life.
  4. We shall cover more on window manipulation later.

Run je7.htm

The original window (self) and the new window (x) are shown here:

Exercise 7

(a) Run the page.
(b) Modify the script so that it opens two new windows.
(c) Put the opening and writing together in a function in <head>. Make the message to be printed on the new window a parameter of the function.
(d) Find out how to set a parameter in the open method to position the new window where you want it.

Example 8

je8.htm Writing to the current document .

Here we encounter a small problem that happens when we try to write to the current document.

<html>
<head>
<title>Javascript Experiment 8</title>
</head>
<body>
<h1>Javascript Experiment 8</h1>
<p>
<form>
<input type=button value="Click me"
onClick=
"self.document.write('Hello');
self.document.write('<br>world.')"
>
</form>
</body>
</html>		 Note:
  1. Here we are using a button and an associated script, consisting of two JavaScript writes to the current document.
  2. Note the semicolon that separates the statements.
  3. Note the <br> (HTML line break).
  4. The problem is that the text the script writes overwrites the document, so the button disappears.

Run je8.htm

Exercise 8

(a) Run the page.
(b) Modify the script so that it opens a new window and puts the message in there.
(c) What happens when you click the button a second time?
(d) Can you get the text to write under existing text on the document?

Send us email at John.Carter@databasedesign.co.uk