JavaScript

1
JavaScript Deeper into it
1
2
JavaScript We begin as we ended Assessor\Assesso
r_3.htm
2
3
Calling functions ()Event Handlers JavaScript
will call up a function from within a
button ltinput typebutton value" Extract Model
" onClick"viewrec()"gt The button is contained
within a form The ltscript language"JavaScript"gt
Is set into the HTML page after the lt/bodygt
tag function viewrec() var chosen
document.options.list.selectedIndex
3
4
Calling functions ()Event Handlers The variable
CHOSEN relates to the number of the chosen item
within the list box. The chosen option is called
up with the IF command if (chosen0)
document.options.type.value"Digger
H300" document.options.number1.value"22000" i
f (chosen1) document.options.type.value"Excav
ator C4530" document.options.number1.value"42000
"
4
5
Calling functions () Event Handlers Each button
has a different function it calls up including
the Clear Fields button which zeros the fields
and re-sets them ltinput typebutton value" Clear
Fields " onClick"document.options.type.value
0 document.options.number.value 0
document.options.number1.value 0
document.options.number2.value 0 The
document.options refers to the form name form
name"options"gt
5
6
Alerts Any part of a HTML page may need to
feedback to the user. HCI principles set out a
number of rules for programmers. The designer
must give feedback to the user to inform them
when they are doing something wrongor right.
Feedback information keeps the user tuned in to
the interface. NewAlert.htm
6
7
Change elements Any element within an active page
can be altered with scripting. RollOver buttons
may not look like RollOver buttons SwapImage.htm I
n this example the ltscriptgt is contained within
the ltheadgt of the HTML document all the specified
functions are also within the ltheadgt
7
8
Change elements ltheadgt ltscript
language"JavaScript"gt function ImgOver()
document.img1.src'tree.jpg function
ImgOut() document.img1.src'words.jpg lt/scrip
tgt
8
9
Change elements The call to the function is in
the form ltform name"form1"gt lta href""
onMouseOver "ImgOver()" onMouseOut
"ImgOut()"gt ltIMG NAME"img1" BORDER0 SRC
"words.jpg"gtlt/agt lt/formgt
9
10
Dynamic Web Pages Creating new windows is simple
with JavaScript Window.html Again the function
commands are contained within the head of the
HTML doc
10
11
Dynamic Web Pages ltheadgt lttitlegtWindowslt/titlegt lt
script language "JavaScript"gt function
openWindow() window.open("SwapImage.htm") lt/sc
riptgt lt/headgt
11
12
Data Conversion with X10 2 // 12 Xmy
word // my word X10 2 // 12 X 4
true // 5 X4 true // 4true Xwindow
1 // object window1 Xwindow true //
object windowtrue
12
13
Events you may need Not all HTML objects support
events. Below are some main events
handlers. onClick() onMouseOut() onMouseOver() OnB
lur() onFocus() onChange() onReset() onSubmit()
onLoad() OnUnload() onAbort() onError() Some of
these you have already come across in this lecture
13
14
Timer Events JavaScript has a built in timer
available setTimeout(myTickFunction(),1000)
The above sets the timer to wait for 1000
milliseconds (one second), then calls the
myTickFunction()
14
15
Timer Events The setTimeout() function only
causes one timer tick event, it is not a
clock. The clearTimeout() can cancel a pending
event
15
16
Event Handlers Some HTML tags support event
handlers. This means you can run simple code or
invoke a JavaScript function when certain events
occur Example lta hrefnext.HTML
onClickdoSomething(Next)gt
16
17
Multimedia JavaScript is used in both Macromedia
Flash And Macromedia Director. Both applications
can be used to create interactive multimedia
films which can be viewed on the web or on a
workstation via a player. Flash has the Flash
Player - Director has Shockwave.
17