44238: dynamic web-site development client side programming ian perry room:c48 extension:7287...

44238: Dynamic Web-site Development

Client Side Programming

Ian Perry Room: C48

Extension: 7287

E-mail:[email protected]

http://itsy.co.uk/ac/0607/Sem1&2/44238_DWSD/

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 2

Web-based ‘Scripting’

There are a number of ways of making your Web-pages more dynamic: most of which require the embedding

of extra ‘scripts’ (i.e. ‘simple’ program code) within an HTML document.

These ‘scripts’ may then be interpreted either: Server Side (i.e. by a Web Server) Client Side (i.e. by a Web Browser)


VBScript

VBScript can be used BOTH: Server Side

will work with any Web Browser.the interpretation of the VBScript happens

on the Web Server, and a standard HTML-page is delivered to the Client.

Client Sideonly works with Internet Explorer.Web Browsers such as Netscape DO NOT

know how to interpret VBScript.


Client Side Programming

We will, therefore, be using JavaScript for all of our Client Side Programming: as it is much more portable, i.e. will ‘work’ on

more hardware/software platforms than VBScript.

A program, written in a relatively simple scripting language (e.g. JavaScript); is passed, embedded in a HTML file, from a

Server to a Client machine. the script then executes, under the control of

a Web Browser (e.g. Internet Explorer or Netscape) on that Client machine (hence Client Side).


JavaScript

JavaScript is usually written as a series ‘functions’.

These JavaScript ‘functions’: are usually located within the <head> …

</head> element of a HTML document. and tend to be ‘called’ as a result of a

particular ‘event’ occuring, e.g.:a button being pressed.a new item being selected from a list.etc.


A simple Web-based Form

This simple form has two buttons on it.

What we want to do is to respond to an ‘event’.

In this case, when the user selects the “Press Me!” button.

To do this, we must modify the HTML code for the “Press Me!” button, so that it ‘calls’ a JavaScript function, like this:

<input type="button" value="Press Me!“ name="B1" onClick="check()">

When the “Press Me!” button is selected, an onClick ‘event’ will occur, which ‘calls’ the check() ‘function’.


A simple JavaScript Function

<head>

<title>A simple JavaScript Function</title>

<script language="JavaScript">

function check() { alert("Thank

You!") }</script>

</head>


The Web-based Form in action!


Events?

Lots of ‘events’ to choose from. Can trigger an ‘event’ using Images &

Hyperlinks as well as Form elements (e.g. Buttons, Lists, etc).

E.g.: onClick

clicking on something. onChange

changing the value of Form element. onMouseOver

moving your mouse over something. onMouseOut

moving your mouse off something.


Responding to Events

onClick Can be used with:

Images & Hyperlinks, as well as buttons.

onChange Can be used to:

do away with the need for buttons.

onMouseOver & onMouseOut Can be used to:

swap Images to produce simple animations. produce rollover Text effects


onChange – no need for buttons - 1



The Code behind the ‘nextpage’ Drop-Down Box:

<form method="POST">

<select name="nextpage" size="1" onChange="navigate(this.form)">

<option value="index.htm" selected>Select a Page</option>

<option value="one.htm">One</option> <option value="two.htm">Two</option> </select>

</form>



The ‘navigate()’ JavaScript Function:

<SCRIPT language="JavaScript">

function navigate(form) { var go =

(form.nextpage.options[form.nextpage.selectedIndex].value); document.location.href=go; }

</SCRIPT>

See it in action!


onMouseOver & onMouseOutfor Image & Text manipulation

Image Swap<img border="0" src="blue.jpg" onMouseOver="src='red.jpg'" onMouseOut="src='blue.jpg'">

Text Rollover <font face="Arial" color="#0000FF“

onMouseOver="color='#FF0000'"onMouseOut="color='#0000FF'">Button</font>

See them in action!


The JavaScript ‘if’ Statement - 1

JavaScript functions can be written so that they can ‘decide’ between varieties of actions: depending upon values contained

within, or set by, other form elements. Understanding how to use the

JavaScript ‘if’ Statement: is the key to such programed decisions.



A simple ‘if’ Statement:if (test) { Resulting action, if test is passed. }

A more complex ‘if’ Statementif (test) { Resulting action, if test is passed. }else { Resulting action, if test fails. }



Checking for a specific value in a Form field:

<script language="JavaScript"> function check() { if(form1.valuetocheck.value=="Hello") {

alert("Thank you for typing 'Hello'") } else {

alert("You MUST type 'Hello'") } }</script>

valuetocheck


Next Week’s Workshop

The Client Side Programming Tasks in next week’s Workshop concentrate on the use of JavaScript with which to interact with the user.

Task 1 - a simple Web-based Form that can interact with the user.

Task 2 - a Web-based Form that checks the value entered in a specific field, and displays a different message dependent upon this value.

Task 3 - a Web-based Form that might form the basis of a Password Entry System, by checking for the presence of specific pairs of values in several fields.

Task 4 - a Web-based Form that checks for the presence of mandatory values in specific fields, before allowing the user to proceed to the next Web-page.

Task 5 – explore Web-based resources about Client Side Programming.

44238: dynamic web-site development client side programming ian perry room:c48 extension:7287...

Documents