JavaScript 1

1
JavaScript - 1

• JavaScript Fun!
• Alerts, Variables, Functions, Image Swaps

2
JavaScript Overview
Scripting Language that uses a similar syntax
to Java (or C/C) developed by
Netscape. Permits a higher level of interaction
in Web pages
Low level Example.. lthtmlgt ltbodygt ltscript
language"JavaScript"gt document.write('Hello')
lt/scriptgt lt/bodygt lt/htmlgt
3
JavaScript Alerts
lthtmlgt ltbodygt ltscript language"JavaScript"gt
alert('This is an Alert Box!') lt/scriptgt
lt/bodygt lt/htmlgt
Display a dialogue box message
4
Variables in JavaScript

• Just like any other programming language

var age 35 var height var name
Gordon
var part declares the variable
Defining a variable to use later
String variable example
5
Functions in JavaScript
Hint Use functions if you want to do the same
thing more than once
HTML comment For backwards compatibility
lthtmlgt ltscript language"JavaScript"gt lt!-- hide
the code function myFunctionname()
document.write('Welcome to my homepage!ltbrgt') do
cument.write('This is JavaScript!ltbrgt')
myFunctionname() myFunctionname()
myFunctionname() // --gt lt/scriptgt lt/htmlgt
6
What are Event Handlers?
The image changes as a result of a user action
causing a link event to occur
7
Creating an Image Rollover

• Note Authoring packages sure as Dreamweaver make
  creation of these easier !
• However, it is important you understand the
  technology behind Web pages

Example JavaScript Event Handlers
lta href"" onMouseOver"document.button1.src'
button2.gif'" onMouseOut"document.button1.src
'button1.gif'"gt ltimg src"button1.gif"
name"button1" width140 height30 border0gtlt/agt
8
Image Swapping
Standard Image tag used to load first image
ltimg src"button1.gif" name"button1" width140
height30 border0gt
Mouse Out Event Occurs
2
Reset Source Address
onMouseOut"document.button1.src'button1.gif'"
1
Mouse Over Link Event Occurs
Image Source Address set to second image
onMouseOver"document.button1.src'button2.gif'"
9
Problems rollovers

• Browser may not support JavaScript 1.1
• i.e. accessibility issues
• Second image has to be downloaded
• Solution Preload images into memory
• Software re-use
• You do not want to repeat the code for every link
  etc. Therefore, write a function
• This function should be written so that you can
  use it in any page you develop

10
Class task

• Read page 15 of the handout by Jeremy Wray on
• More Complex Image Swapping
• Exercise in groups of 2 or 3
• a) Explain using simple diagrams how the example
  works
• b) Write JavaScript code to modify the example
  to work with 5 different images