Client side web programming

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Introduction to Javascript

Client-side JavaScript statements on an HTML page can respond to user events such as:

mouse clicks,
form input, and
page navigation.

You can embed JavaScript in an HTML document in the following ways:

as statements and functions within a <script> tag
as specifying a file as the Javascript source
by specifying a JavaScript expression as the value for an HTML attribute
event handlers within certain HTML tags (mostly form elements)

Practice 1: Placing small scripts on a page

Start by creating an HTML template where you place all scripts in the following exercises. Use Notepad++ for editing.

<html>
<head>
<title>Practice .. by Your Name</title>
<script language="JavaScript">

</script>
</head>

<body>
<h1> Javascript exercise number </h1>
<h2>Author: Your name </h2>
<br>
The document itself.
</body>
</html>

You can trace problems in Firefox using debugger tools that are available from the Web developer menu: select Error Console for debugging Javascript. Similarly with Chrome. Note also the Responsive design option that lets you compare different screen sizes. The classroom installation does not allow pop-ups in Firefox, test with other browsers.

Add commenting to all your code, so that each section is clearly separate and explained. Add your name or initials to all pages as well, or if you co-author, to the sections that you have created. When you copy code from other sources, indicate them clearly.

Practice 1a: A small form

JavaScript can be used to add functionality to forms: onClick statement calls a JavaScript. JavaScript can refer to the data fields on a form (DOM). Add the following form to your page, save the file and test:

<form>
<input name="text" value="" size="10">
<input value="Press" type="button" onClick="this.form.text.value = 'HELLO'">
</form>

You can also try to modify input fields applying an image to replace standard button, or to format the style of input text. The images are not provided by these instructions, find your own pictures! Examples:

<form>
<input type="text" style="font-size:8pt; color: red; text-align: center " size="12"> Give a value!<p>
<input type="image" src="Mlogo.gif" onClick="alert ('hi') ">
</form>

Pay attention to the use of quotations in onClick statements.

Practice 1b: Function calls

In the previous script, you called a standard function Alert. You can also create your own functions. They are called when needed. Next you add to the body section a script which has an embedded function. Try it.

This is a regular HTML page which happens to contain a program and a function.
<p>

<script language = "JavaScript">
// The function is defined here within curly braces
function print_function()
{
document.write("Here we print some text on the page!");
}

// semicolon is always used to denote the end of the statement
//the main program starts here and it also prints text in the HTML document
document.write("This is printed from the main program which in turn calls the function! <p>")
print_function()
</script>

</p>
<p>

<script language="JavaScript">
document.write("Last updated :");
document.write(document.lastModified);
</script>
<p>
Scripts are over and this is just ordinary document.
</p>

Practice 1c: Opening a pop-up browser window

This time you place a function in the head section and the calling script is in the body. Add the following function:

<script>
var help = null;
// Declare a variable and initialize it!
function tip_box(info)
{
help = window.open("","Onthefly",
"width=500,height=200,resizable=yes");
// Open a pop-up window and write a message!
help.document.open("text/plain");
help.document.write(info);
help.document.close();
}
</script>

Place the calling program in the body as follows.

<script>
tip_box ("This way you can add help boxes or annoying ads");
</script>

Test again.

Note that in the previous program you created an object "window". The method "open" takes 3 parameters: URL (empty), name (Onthefly), and properties.

Practice 1d: Opening the tip window with a button

Modify the calling script so that you use a button to open the tip.

Practice 1e: Iteration and loops: for - statement

Very often you need to repeat some action, to make a loop. In the body section add a script:

var i=0, result = 0;
for (i = 0; i <= 10; i++) {
result += i;
document.write(i + ": " + result + "<br>");
}
document.write("<br><br>");

The for-loop increments the value of i by one each time and adds the current value of i to variable result. The document write method uses plus (+) symbol to concatenate character strings. Now test this and try some modification.

Practice 1f: Changing pictures

The following script changes the picture in the link when the mouse is over it. You need two images called arrow_on.gif and arrow_off.gif.

<a href="next.html" onmouseover="document.arrow.src='arrow_on.gif'" onmouseout="document.arrow.src='arrow_off.gif'">
<img src="arrow_off.gif" width="147" height="82" border="0" name="arrow" alt="arrow" />
</a>

Similarly, you could make a page that responds to the mood of the user. You need two images again, a happy picture and a sad picture.
id="faceIm" is the identification for the place where to place the image. ID needs to be unique in the document so that the getElementById can locate it.

<body>
<div style="text-align:center ">
<h2> Are you happy? </h2>
<p>
<form>
<img id="faceIm" src="happy.gif" />
<p></p>
<input type="button" value="Happy"
onClick="document.getElementById('faceIm').src= 'happy.gif';
"/>
<input type="button" value="Down"
onClick="document.getElementById('faceIm').src= 'sad.gif';
"/>
</form>
</body>
</html>

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Created by: Jaana Holvikivi
Last update: 29.12.2012