44238: Dynamic Web-site Development Client Side Programming Ian Perry Room:C48 Extension:7287

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)

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 3 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 Side only works with Internet Explorer. Web Browsers such as Netscape DO NOT know how to interpret VBScript.

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 4 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).

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 5 JavaScript  JavaScript is usually written as a series ‘functions’.  These JavaScript ‘functions’: are usually located within the … 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.

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 6 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’.

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 7 A simple JavaScript Function A simple JavaScript Function function check() { alert("Thank You!") }

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 8 The Web-based Form in action!

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 9 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.

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 10 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

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 11 onChange – no need for buttons - 1

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 12 onChange – no need for buttons - 2 The Code behind the ‘nextpage’ Drop-Down Box: Select a Page One Two

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 13 onChange – no need for buttons - 3 The ‘navigate()’ JavaScript Function: function navigate(form) { var go = (form.nextpage.options[form.nextpage.selectedIndex].value); document.location.href=go; } See it in action!

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 14 onMouseOver & onMouseOut for 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 See them in action!

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 15 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.

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 16 The JavaScript ‘if’ Statement - 2  A simple ‘if’ Statement: if (test) { Resulting action, if test is passed. }  A more complex ‘if’ Statement if (test) { Resulting action, if test is passed. } else { Resulting action, if test fails. }

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 17 The JavaScript ‘if’ Statement - 2  Checking for a specific value in a Form field: function check() { if(form1.valuetocheck.value=="Hello") { alert("Thank you for typing 'Hello'") } else { alert("You MUST type 'Hello'") } valuetocheck

Ian Perry 44238: Dynamic Web-site Development: Client Side Programming Slide 18 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.