Client side programming with JavaScript and DHTML

Transcript Client side programming with JavaScript and DHTML

Client side programming with
JavaScript and DHTML
Dr Jim Briggs
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
2
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
3
Tools for the trade
• Any simple text editor
– Textpad
– Notepad
• Specialist HTML editors
– Dreamweaver
• Browsers (for testing and debugging)
4
How to run JavaScript
<html>
…
<script type =“text/javascript”>
document.write(“hello World”)
</script>
…
</html>
5
JavaScript the Output
6
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!
7
JavaScript's Compatibility
• To insert HTML that only appears in nonscripting browsers
<NOSCRIPT> </NOSCRIPT>
• This would also be visible to those that
have JavaScript turned off
8
Animation
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
10
Example 1
<html>
<A HREF="jmouse.htm"
onMouseover="window.status='Hi there!';
return true">Place your mouse here!</A>
</html>
• Example: rollover1.html
11
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
12
Example 3
• Use the same method to swap one image
for another.
• rollover3.html
13
Multiple Links
• It is easy to have multiple rollovers in a
page
• buttonover.html
14
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
15
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
16
Cycling Banners
• Image arrays
• Array contains each of the images
required for the page
• The image then becomes the child object
• rotbanner.htm
17
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
18
Form validation
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
20
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
21
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
22
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
23
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!
24
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
25
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
26
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
27
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
28
Event handling
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
30
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
31
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.
32
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
33
onMousemove Event
• This is triggered when the user moves the
mouse over an element
• The eyes
34
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)
35
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.
36
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.
37
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.
38
Advanced interfaces
User Interface Design
• "MS-Windows" interface elements not
available in HTML:
– Menu bars
– Pull-down menus
• Need to accomplish with JavaScript
40
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
41
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
42
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)
43
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
44