JavaScript 1 - PowerPoint PPT Presentation

Loading...

PPT – JavaScript 1 PowerPoint presentation | free to view - id: 1431b8-MDJiZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

JavaScript 1

Description:

Scripting Language that uses a similar syntax to. Java (or C/C ) developed by Netscape. ... onMouseOut='document.button1.src='button1.gif' ... – PowerPoint PPT presentation

Number of Views:36
Avg rating:3.0/5.0
Slides: 11
Provided by: hom4178
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com