JavaScript

1
JavaScript

• COMP 101
• Spring Semester, 2006
• (Last updated11-Apr-06)

2
A programming language

• Developed by Netscape in 1995
• Interpreted (instead of compiled) by the
  browser as it processes the HTML file
• Similar in syntax to Java (by Sun Microsystems)
• A popular language for creating dynamic Web pages
  (example)
• A safe language

3
Strict rules on

• Vocabulary
• Keywords
• Variables
• Special terms
• Syntax
• Semantics
• Many on-line tutorials (1), (2), etc.
• Best learned through examples

4
Vocabulary

• Case-sensitive on variable names e.g.,
• Hello is different from hello
• Keywords representing built-in functions e.g.,
• document.write
• Math.round
• document.body.clientWidth
• Multiple versions may be defined for different
  cases e.g.,
• onClick and onclick

5
Placements in HTML file

• Enclosed within ltscriptgt and lt/scriptgt tags
• ltscriptgt tag must include type"text/javascript"
  attribute
• Definitions must be made before their use
  normally placed within ltheadgt and lt/headgt tags
• Actions placed within ltbodygt and lt/bodygt tags

6
Insert lines to the HTML document

• document.write()
• document.write("hello!")
• document.write("how are you?")
• Format control
• document.write("lth1gthello!lt/h1gt")
• document.write(
• "ltpgthow are ltemgtyoult/emgt?")
• document.writeln()

7
Cheating the W3C validator

• Rather than using
• ltembed src'music.wma'gt
• Use instead
• document.write(
• "ltembed src'music.wma'gt")

8
Data declarations

• Variable names
• Start with a letter (upper- or lower-case)
• Followed by letters, digits, or the underscore
  character _
• Assignments
• Use the character
• my_marks 97

x
my_marks
theBestMatch
q7_7
9
Array declarations

• Used for data of a similar kind
• var marks new Array(5)
• Reference to individual elements
• marks0 15
• marks1 86
• marks2 23
• marks3 90
• marks4 64
• Courseware examples

10
Making an active button

• ltinput type"submit"
• name"PopUp"
• value"Pop-up Message"
• onClick
• "alert('Javascript Example!!')" gt

11
Invoking JavaScript function using on click event

• lta onclick
• 'javascriptdocument.bgColor"ffff00"'gt
• document.bgColor"ffff00"
• lt/agt

12
Invoking JavaScript function using hyperlink

• lta href"javascriptmaxWin()"gt
• ltfont size"1"gt
• ltbgtMaximize window to available size
• lt/bgt
• lt/fontgt
• lt/agt

13
Built-in functions

• top.window.moveTo(0,0)
• top.window.resizeTo
• (screen.availWidth,
• screen.availHeight)
• References available

14
Invoking a null function using hyperlink

• lta href"javascript" onMouseOver"rollover('in')
  " onMouseOut"rollover('out')" gt
• ltimg name"button" src"./mouse_out.gif"
  alt"Image rollover example" border0gt
• lt/agt

15
Sequence

• Browser interprets JavaScript statements in
  order
• statement1
• statement2
• statement3 statement4
• statement5
• Comment statements start with // or enclosed
  within / and /

16
Choice

• Use logical operators to specify conditions
• if (event'in') document.button.src
  pix1.src
• else document.button.src pix0.src
• Other operators
• lt lt ! gt gt
• !

17
Choice over several cases

• switch(orderInit)
• case 0 order06order19order22
• order38order41order57
• order65order74order83break
• case 1 order02order17order21
• order36order48order55
• order69order73order84break
• case 5
• defaultorder02order13order26
• order31order45order59
• order64order77order88break

18
Loop

• Loops using for and while supported
• for (var j0 jlt5 j)
• newWin
• window.open(j".gif",null,
• "left100,,locationno")
• newWin.focus()

initial
terminal
increment
19
The puzzle example

• The array order

20
A cell in the puzzle table

• lttd width"168" height"168"gt
• ltimg onClick"move(1)"
• src"1.jpg" alt"f1"
• name"f1" width"160"
• height"160" border"0"
• id"f1"gt
• lt/tdgt

21
Move image when clicked

• Identify neighbors

22
Move image when clicked

• Identify neighbors

23
Move image when clicked

• Identify neighbors

24
Move image to a neighbor which is blank

• Move image of the clicked box to the neighbor
  which is blank
• if (fn.substring(strlen-5, strlen) "1.jpg")
• orderind-1 orderindex-1
• orderindex-1 1
• document"f"ind.src
• document"f"index.src
• document"f"index.src "1.jpg"

25
A little clock example

• The clock at the users computer named Date()
• The built-in functions
• getHours()
• getMinutes()
• getSeconds()

26
(No Transcript)
27
The HTML input tag

• Used in on-line forms
• With attributes specifying browser actions

28
The submit button

• Used to create a rectangular click-able area
  (hot zone) in the browser window
• Upon click, it submits information to the server
  or initiates a JavaScript event

29
Label the button

• Using the value attribute
• Showing the string inside the button

30
The onClick event

• Invoking the built-in JavaScript function alert
• Causing an alert window to be displayed with the
  specified message