Client side programming with JavaScript and DHTML Dr Jim Briggs

2 What is JavaScript? Scripting Language Developed by Netscape in 1995 Originally called LiveScript Renamed to form a marketing relationship with Java An open language - no licence required JavaScript is lines of code combined with HTML –JavaScript is supported by all major browsers (but in slightly different ways!) –The client has the option not to run JavaScript

3 What can JavaScript do? JavaScript introduces interactivity to web pages –This is achieved by controlling the browser Common uses for JavaScript: –Validating forms –Performing calculations –Animating images, including rollovers –Creating advertising banners –Detect certain predetermined aspects of the environment e.g. the browser version or required plug-ins –Generate date and time features including calendars and time stamps

4 Tools for the trade Any simple text editor –Textpad –Notepad Specialist HTML editors –Dreamweaver Browsers (for testing and debugging)

5 How to run JavaScript … document.write(“hello World”) …

6 JavaScript the Output

7 JavaScript's Compatibility Some very old browsers don’t support JavaScript –Netscape 1.X and Internet Explorer 3 Some implement it in different ways –Netscape vs. Internet Explorer Getting better!

8 JavaScript's Compatibility To insert HTML that only appears in non- scripting browsers This would also be visible to those that have JavaScript turned off

Animation

10 What is a rollover? As the user moves the mouse over an image or text the view changes It is a reaction to an event It could invoke a status message or change the colour of a graphic on the web page

11 Example 1 Place your mouse here! Example: rollover1.htmlrollover1.html

12 Example 2 code Place your mouse here! rollover2.html

13 Example 3 Use the same method to swap one image for another. rollover3.html

14 Multiple Links It is easy to have multiple rollovers in a page buttonover.html

15 Example 4 - Cycling Banners One feature of JavaScript is its capability to dynamically change images in web pages This technique is usually incorporated into adverts that popup on your web page JavaScript can do this very simply by using an image array The code cycles through a selection of graphics, giving the impression of the graphics rotating This creates dynamically changing content on the page without the need to use frames and layers

16 Cycling Banners Disadvantages: –Only images that exist in the document can change –New one can’t be added –Existing ones can’t be removed Images with differing sizes can still be used Image download times

17 Cycling Banners Image arrays Array contains each of the images required for the page The image then becomes the child object rotbanner.htm

18 Slide Shows Here the user controls the flow of the images This works simply by using the array element numbers Add 1 to move forward Subtract 1 to move backwards Add the navigation to the page slideshow.htm

Form validation

20 Form validation with HTML Forms are used frequently in websites to collect data They incorporate a variety of graphical interface elements, e.g. Radio Buttons, Check Boxes, Pop-up Menus and textual entry fields

21 Form validation with HTML User inputs the data Once completed the Submit button is clicked This triggers an event - sending the data to the web server Here the server-side program interprets the data and acts on it

22 Form validation with HTML Disadvantage: –The user has to complete the whole form and submit it before the data gets validated –The data has to reach the server before the validation can commence The solution: –To validate on the client-side –JavaScript enables validation on the client-side

23 Form Validation using JavaScript Example When changing a password the user is asked to enter the new password twice to check for typos If the text fields do not match an Alert box will appear to inform the user If the password input is accurate then it is sent to the server password_check.html

24 Active site navigation With JavaScript you can create a select and go menu to select options from a drop down list in one click, eliminating the go button Take care not to confuse people who have JavaScript turned off!

25 Active site navigation When the menu is not pulled down, it will display a user prompt This technique is used by many websites to move the user to different sections SelectAndGo.html

26 Validating fields Use Regular Expressions –Powerful way to validate and format text strings –It provides compact way of coding –You need to know the syntax There is only a limited amount of checking that can be done client-side RegExp.html

27 Regular Expressions This regular expression will test the address for us: re = re is the variable the RegExp is assigned to RegExp begins and ends with / ^ indicates beginning of string; $ end \w is any character a-z, A-Z and one or more of the previous item

28 Regular Expression The use of () brackets indicate a group Square brackets [] indicate any one of the characters inside \. means a full stop (. means any character) ? means optional \.\w{2,3} looking for the. followed by either 2 or 3 characters + must exist 1 or more times e.g..com,.ac.uk,.net * after an item indicates 0 or more of the represents character \w+ means 1 or more characters ([\.-]?\w+)* indicates a. or – are allowed in the suffix/prefix of an address

Event handling

30 Event Handling Events are actions that the user performs while visiting your web page These events can be triggered by: –A mouse click –A key press –Form loading

31 The onLoad Event Triggered when the user enters your page and all its elements have loaded –A common use of this event is to have advertisement windows pop up when you first load the page The onLoad command is normally in the tag. If you want to do more than one thing, define a function

32 onUnLoad Event Triggered when the user leaves the site Used commonly again for pop up advertising windows when you leave the site. Can be used to produce an infinite loop of pop up’s - a user’s nightmare! A possible use would be to display an exit message. The onUnLoad is normally on the tag, similar to the onLoad command.

33 Mouse Event Handlers Commands can be associated with most page elements Event only applies to element it is associated with onmousedown onmouseup onclick ondblclick onmouseover onmouseout onmousemove

34 onMousemove Event This is triggered when the user moves the mouse over an element The eyes

35 onMouseover Event This command is used extensively with image rollovers. This event is triggered when the mouse is moved into any area for which the command has been assigned (i.e. over an element)

36 onMouseout Event The reverse of the onMouseover. Triggered when the user moves the mouse out of the area for which the event has been assigned.

37 Form event handling Form handling event are largely used in form validation scripts onSubmit event –Triggered when the user clicks on the Submit button to complete the form –If the result of the handler is false then the form is not sent to the server. onReset Event –Triggered when the user clicks the reset button on the form –A function should be called to (re-)assign the default values to the form.

38 Form Event handling onSelect Event –Is trigger if the user selects text in an INPUT or a TEXTAREA form field onChange Event –Triggered when a user changes a form field. –Used to verify information immediately or to respond to a user’s choice before the submit button is clicked.

Advanced interfaces

40 User Interface Design "MS-Windows" interface elements not available in HTML: –Menu bars –Pull-down menus Need to accomplish with JavaScript

41 Pull down menus Source: pulldownmenu.htmlpulldownmenu.html The function toggleMenu() switches between the menu pulled down and not –currElem is the element to be toggled –nextPos is where you want the top position of the menu to be

42 Sliding menus DHTML enables elements of a page to be switched on or off –Not implemented in Netscape 4 –display attribute: either "none" or "block" Source slidingmenu.htmlslidingmenu.html

43 Tool Tips Tool tips appear when you hold a cursor over an item. Example: tooltips.htmltooltips.html Contains an image map ( … tag) –Associate named map to image ( attribute) –Specify region of an image ( tag) rect, circle or poly –Associate action with that region Can be client-side action (e.g. JavaScript or follow link) or server-side (send co-ordinates to server)

44 Click anywhere form fields In MS-Windows, clicking on the label of a control selects it Browser interaction doesn’t work in the same way - the control requires a precise click Source: clickanywhere.htmlclickanywhere.html