Developing Web Applications

1
Lecture 3 Dynamic Web Pages More JavaScript
2
Review

• Client-side programming overview
• Basics of JavaScript programming
• Variables, arrays and objects
• Operators and maths
• Sequence, repetition and selection
• Functions
• Events

3
Today

• Document/JavaScript Object Model (DOM)
• Accessing elements
• Forms
• Graphics and Animation

4

• The Document Object Model (DOM)
• A specification
• An Application Programming Interface (API)
• Is used so programs can interact with web pages
• Language and platform neutral (whether
  Javascript or VBScript for example)
• Some problems with variations in browsers,
  always check
• DOM sometimes known as Dynamic HTML Object Model
  within Microsoft specific contexts

5
The Document Object Model
The main idea is to let any script access any
part of a web document, simply. This idea is
extended to controlling browser related features.
6
The Document Object Model

• Root level of the JavaScript DOM is the window
  object
• Window objects have properties such as status
  line
• The next level up is the document objectwhich
  is the loaded HTML page
• Document objects have properties such as
  background colour
• Each HTML element (e.g. links or forms) is a
  property of the document object.

7
Javascript Document Object Model
8
Document properties Property Description anchors
An array referring to document
anchors applets An array referring to document
applets body The element that contains the
content for the document cookie The current
document cookie string domain The domain name of
the server where the current document is
located ... forms images links referrer titl
e URL
9

• The first image on a web page can be represented
  as the property document.images0
• A web form also has its properties accessible in
  the object tree
• You can find any property by tracing it through
  the tree document.forms0.elements0

10
Can also access elements by name
lthtmlgt ltbodygt lth1 id"header"gtTest
theDOMlt/h1gtltscript type"text/javascript"gt docume
nt.getElementById('header').style.color"red" lt/sc
riptgtlt/bodygt lt/htmlgt
11
Using the Document Object Model
Using both JavaScript and VBScript various
elements within a page can be changed. One of the
simplest examples of accessing the current HTML
page is   document.write(Hello,
world!)   Which writes new text to the current
document, this can also contain
HTML   document.write(ltH1gtHello,
world!lt/H1gt) Note the syntax is the same for
both languages with the exception of the
semicolon needed in JavaScript! The API produces
the same interface for both languages.
12
ltHTMLgt ltHEADgt ltTITLEgtTest DOMlt/TITLEgt lt/HEADgt ltBOD
Y BGCOLOR"FFFFFF"gt ltFONT FACE"Verdana, Arial,
Helvetica" SIZE2gt ltscript language"javascript"gt
lt!-- var adocument.body.bgColor
document.write(a) document.body.bgColor'109
032' document.fgColor'ffffff' --gt lt/script
gt lt/BODYgtlt/HTMLgt
DOM Example 1
13
ltHTMLgtltHEADgtltTITLEgtGot Flash?lt/TITLEgt ltSCRIPT
LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT"gt
hasFlash false for (i0
iltnavigator.plugins.length i) if
(navigator.pluginsi.name.indexOf("Flash") gt 0)
hasFlash true
lt/SCRIPTgt lt/HEADgtltBODY BGCOLORWHITEgtltH2gt ltSC
RIPT LANGUAGEJAVASCRIPT TYPE"TEXT/JAVASCRIPT"gt
if (hasFlash) document.write("You
have Flash, you lucky person, you!")
else document.write("Sorry, you don't
have Flash.") lt/SCRIPTgt lt/H2gtlt/BODYgtlt/HTML
gt
DOM Example 2
14
Accessing HTML Elements Elements within a
document can be accessed by name   ltHTMLgt ltHEADgt
ltTITLEgtTest DOMlt/TITLEgt lt/HEADgt   ltBODY
BGCOLOR"FFFFFF"gt   ltFONT FACE"Verdana, Arial,
Helvetica" SIZE2gt ltdiv id"myobject"
name"myobject" style"positionabsolutetop120px
left150pxwidth390pxheight190pxbackground
aaffaa"gt This is a test lt/divgt ltscript
languageJavaScript"gt lt!-- document.all.myobject.
style.backgroundColor"Red --gt lt/scriptgt lt/BODYgt
lt/HTMLgt  
15
Accessing Form Elements
The normal HTML syntax is usually along the lines
of
ltform namelogon" action"html_form_action.php"
method"get"gt Username ltinput type"text"
name"username"gtltinput type"submit"
value"Submit"gt lt/formgt

• name (what the form is identifed by)
• action (where the form data sent to for
  processing)
• method (how the data is transported)

16
Accessing Form Elements
You can access and manipulate form related
information using the JavaScript DOM

• document.formsnumber.elementsnumber
• document.formsnumber.username
• document.logon.username

• If you want the actual value passed back use
• document.logon.username.value

17
DOM Example 3
ltHTMLgt ltHEADgt ltscript language"Javascript"gt lt!--
function hello(passed) document.write("Hello,
"document.logon.user.value)
document.write("ltbrgtare you sure you're called,
"passed) //--gt lt/scriptgt lt/HEADgt ltBODYgt ltform
name"logon" onsubmit"hello(document.forms0.ele
ments0.value)"gt Username ltinput type"text"
name"user"gt ltinput type"submit"
value"Submit"gt lt/formgt lt/HTMLgt lt/BODYgt
18
Graphics and animation
19
The basic idea
lt!-- This div is the element we are animating
--gt ltdiv id"urgent"gtlth1gtRed Alert!lt/h1gtThe Web
server is under attack!lt/divgt lt!-- This is the
animation script for the element --gt ltscriptgt
var e document.getElementById("urgent")
// Get the element object var colors
"white", "yellow", "orange", "red" // Colors
to cycle through var nextColor 0
// Position in the cycle //
Evaluate the following expression every 500
milliseconds. // This animates the background
color of the DIV element. setInterval("e.style.bac
kgroundColorcolorsnextColorcolors.length",
500) lt/scriptgt
20
The HTML image tag
A static image can be placed in HTML using the
image tag
ltimg src"url"gt
If it doesnt load properly theres the text
alternative
ltimg src"boat.gif" alt"Big Boat"gt
You can control features of the image such as the
size
ltimg src"/images/hackanm.gif width"20"
height"20"gt
21

• The Image Object
• Represents images created using ltimggt tag
• Each ltimggt tag in an HTML document is represented
  in the DOM images array by an Image object
• Use with JavaScript to change images based on
  user selection

22
Image object properties border, complete,
height, hspace, lowsrc, name src, vspace,
width Image object events OnLoad, OnAbort,
OnError
23

• The Image Object
• SRC property
• Allows JavaScript to change an image dynamically
• More efficient than loading a new document each
  time a new image is displayed

24

• Animation with the Image Object
• Simple animation
• Created by a sequence of images changed
  automatically
• Enabled by combining Image object SRC attribute
  with setTimeout() or setInterval() methods

25
(No Transcript)
26
Runner script
ltHTMLgt ltHEADgt ltTITLEgtRunner 1lt/TITLEgt ltSCRIPT
LANGUAGEJavaScriptgt lt!-- var runner new
Array(6) var curRunner 0 var
startRunning runner0 runner0.jpg runner1
runner1.jpg runner2 runner2.jpg ...
function marathon() if (curRunner 5)
curRunner 0
27
Runner script
else curRunner document.animation.src
runnercurRunner --gt ltSCRIPTgtlt/HEADgt ltBODYgt lt
PgtltIMG SRC runner0.jpg NAME
animationgtlt/Pgt ltFORMgt ltINPUT TYPEbutton
NAMErun VALUE Run onClickstartRunningset
Interval(marathon(),100)gt ltINPUT
TYPEbutton NAMEstop VALUE stop
onClickclearInterval(startRunning)gt lt/FORMgt
lt/BODYgtlt/HTMLgt
28

• Image Caching
• Allows JavaScript to store and retrieve images
  from memory rather than downloading image each
  time it is needed (erratic!)
• Three steps
• Create a new object using the Image() constructor
• Assign graphic file to SRC property of new Image
  object
• Assign SRC property of new Image object to SRC
  property of an ltimggt tag
• To ensure all images are cached prior to
  commencing animation
• Use onLoad event handler of the Image object
• Cache with function in ltheadgt

29
Runner script with caching
ltHTMLgtltHEADgtltTITLEgtRunner 2lt/TITLEgt ltSCRIPT
LANGUAGEJavaScriptgt lt!-- var runner new
Array(6) var curRunner 0 var
startRunning for(var i0 i lt 6 i)
runneri new Image() runneri.src
runneri.jpg function marathon() if
(curRunner 5) curRunner 0 else
curRunner document.animation.src
runnercurRunner.src
30
Runner script with caching
--gt lt/SCRIPTgtlt/HEADgtltBODYgt ltPgtltIMG
SRCrunner1.jpg NAMEanimationgtlt/Pgt ltFORMgt ltIN
PUT TYPEbutton NAMErun VALUE Run
onClickstartRunningsetInterval(marathon(),10
0)gt ltINPUT TYPEbutton NAMEstop VALUE
Stop onClickclearInterval(startRunning)gt lt/F
ORMgt lt/BODYgt lt/HTMLgt
31
Image Animation (another way)

• Now suppose we have the tag ltIMG NAMEimggtin
  the ltBODYgt. The following recursive method
  animates the cached images var n 0
  function animate() document.img.src
  imagesn.src n (n 1) images.length
  id setTimeout("animate()", 250)

32
Dynamic HTML (DHTML)

• Introduced in the 4.0 series of browsers
• Is a combination of HTML, CSS and Javascript
• Variations in how each browser implements it

33
ltHTMLgtltHEADgt ltscript language"javascript"gt
function onMove() exevent.x eyevent.y gr.
leftex gr.topey function setup()
window.document.onmousemove onMove()
lt/scriptgt lt/HEADgtltBODYgt ltDIV ID"test2"
STYLE"position absolute top110
left140"gt Some text... lt/DIVgt ltDIV
ID"test" STYLE"positionabsolute top 100
left 100"gt ltIMG SRC"arrow_up.gif"
border"0"gt lt/DIVgt ltscript language"javascrip
t" gt grdocument.all.test.style
window.onload setup() lt/scriptgt lt/BODYgtlt/HTML
gt
DHTML 1 Follow mouse!
34

• What we did
• JavaScript DOM
• Forms
• Animation

35

• What you still need to cover
• Cookies (http//www.webreference.com/js/column8)
• String manipulation (http//www.w3schools.com/js/
  js_string.asp)
• Objects (http//www.javascriptkit.com/javatutors/
  object.shtml)