44
Client side programming with JavaScript and DHTML Dr Jim Briggs
| Date post: | 22-Dec-2015 |
| Category: |
Documents |
| View: | 228 times |
| Download: | 0 times |
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
<html>
…
<script type =“text/javascript”>
document.write(“hello World”)
</script>
…
</html>
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 <NOSCRIPT> </NOSCRIPT>
• 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
<html><A HREF="jmouse.htm"
onMouseover="window.status='Hi there!'; return true">Place your mouse here!</A>
</html>
• Example: rollover1.html
12
Example 2 code
<html><A HREF="jmouse.htm"
onMouseover="window.status='Hi there!'; return true" onMouseout="window.status=' '; return true">Place your mouse here!</A>
</html>
• 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 e-mail address for us:re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
• 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 0-9• + 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 item
• @ represents the @ character• \w+ means 1 or more
characters• ([\.-]?\w+)* indicates a . or –
are allowed in the suffix/prefix of an e-mail 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 <BODY> tag.<BODY BGCOLOR="WHITE"
onLoad="document.myForm.newLocation.selectedIndex=0">
• 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 <BODY> 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.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.html
43
Tool Tips
• Tool tips appear when you hold a cursor over an item.
• Example: tooltips.html• Contains an image map (<MAP>…</MAP> tag)
– Associate named map to image (<IMG usemap> attribute)
– Specify region of an image (<AREA> 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.html
