Upload exercise 1

1
Upload exercise 1 IceCream, make sure link
works!
2
String Manipulation
3
http//wp.netscape.com/eng/mozilla/3.0/handbook/ja
vascript/
4
Looked for touppercase in 13. Navigator
JavaScript reference
5
.length
A String object has a property, length, that
indicates the number of characters in the string.
var language "JavaScript"document.write (
".length The string \"" language
"\""                  " is "                 
language.length                   " characters
long"                  "ltbrgt )
The string "JavaScript" is 10 characters long
6
toUpperCase/toLowerCase
Method. Returns the calling string value
converted to uppercase. Syntax
stringName.toUpperCase()
var lowerText"alphabetdocument.write(lowerTex
t.toUpperCase()) ALPHABET
7
.charAt()
Method. Returns the character at the specified
index Syntax stringName.charAt(index)
for ( var i 0 i lt language.length i
)    document.write( ".charAt( ) The
character at position " i                     
" in '" language "'"                     "
is "                     language.charAt( i
)                     "ltbrgt" )
.charAt( ) The character at position 0 in
'JavaScript' is J.charAt( ) The character at
position 1 in 'JavaScript' is a.charAt( ) The
character at position 2 in 'JavaScript' is
v.charAt( ) The character at position 3 in
'JavaScript' is a.charAt( ) The character at
position 4 in 'JavaScript' is S.charAt( ) The
character at position 5 in 'JavaScript' is
c.charAt( ) The character at position 6 in
'JavaScript' is r.charAt( ) The character at
position 7 in 'JavaScript' is i.charAt( ) The
character at position 8 in 'JavaScript' is
p.charAt( ) The character at position 9 in
'JavaScript' is t
8
.indexOf()

• Method.
• Returns the index within the calling String
  object of the first occurrence of the specified
  value, starting the search at fromIndex.
• Case sensitive
• Returns -1 if specified value not found in string
• Syntax stringName.indexOf(searchValue,
  fromIndex)

document.write( ".indexOf( ) The 'J' in "
                 language                  "
is at position "                 
language.indexOf( 'J' )                 
"ltbrgt" )
.indexOf( ) The 'J' in JavaScript is at
position 0
9
.blink
Method. Causes a string to blink as if it were in
a ltBLINKgt tag. Syntax stringName.blink()
The following example uses string methods to
change the formatting of a string var
worldString"Hello, worlddocument.write(worldS
tring.blink())document.write("ltPgt"
worldString.bold())document.write("ltPgt"
worldString.italics())document.write("ltPgt"
worldString.strike())
Hello, world Hello, world Hello, world Hello,
world
10
substring
Method. Returns a subset of a String
object. Syntax stringName.substring(indexA,
indexB)
var anyString"Netscape" document.write(anyStri
ng.substring(0,3))
Net
11
For more string methods
Look in the Javascript core manual (resources on
our page) Core JavaScript 1.5 Manual
(developer.netscape.com) choose index, scroll
to String substr() like substring, but
parameters are for starting position and length
unlike substring() where parameters are for
starting position and ending position. split() Sp
lits a String object into an array of strings by
separating the string into substrings.
fontcolor() Causes a string to be displayed in
the specified color as if it were in a ltFONT
COLORcolorgt tag. fontsize() Same as above,
but with font size .. An many more.
12
Window Eventsusually handled as ltbodygt attribute

• onLoad
• Triggered when page has fully loaded
• Adverts, recycling initial events, etc.
• onUnLoad
• Triggered when user leaves page
• Adverts, lock-in sites

• OnFocus
• Triggered by page becoming front-most
• onBlur
• Triggered by user sending page to background
• Force on top using
• onBlur"self.focus()"

12
13

• onAbort
• Triggered when user aborts an image load
• onError
• Triggered by JavaScript error
• onErrornull hides some errors from user

• onResize
• Triggered when window resized
• Usually in ltbodygt
• Used to fix bug in Netscape 4
• onMove
• Triggered when the window is moved
• ?

13
14
Mouse Events

• // for Netscape 4
• document.captureEvents(event.MOUSEDOWN)
• // for all browsers
• document.onmousedownmyMouseFunction
• function myMouseFunction(evt)
• ver mouseClick""
• if (evt) mouseClickevt.which // Netscape4
• else mouseClickwindow.event.button // IE
• if (mouseClick1 mouseClick2
• mouseClick3)
• cmd

• onMousedown
• Mouse key pressed
• onMouseup
• Mouse key released
• onMousemove
• um
• To handle as windows events
• need to declare a watcher function

14
15

• onMouseover
• Mouse moved into an area for which the handler
  has been declared
• onMouseout
• Same, except when mouse leaves

• onClick
• Triggered by user pressing releasing a mouse
  button
• onDblclick
• Triggered by a double-click
• (not normally found on web)

15
16
Form Events

• onSubmit
• User clicked submit button
• If result is false, form will not be sent
• onReset
• User clicked reset button
• Used if form has default settings at load
• onChange
• User left a field after changing it

• onSelect
• User selected text in an input or textarea
• onClick
• User clicked on form element (radio button,
  checkbox)
• onBlur/onFocus
• User left a field or entered it
• Via mouse or tab
• Use focus() or blur() to get them back, or force
  them off

16
17
Key Events (as in keyboard keys)

• document.onkeydown myKeyFunction
• if (document.layers)
• document.captureEvents(Event.KEYDOWN)
• var leftArrow28 // Netscape 4
• var rightArrow29
• else
• var leftArrow37 // other browsers
• var rightArrow39
• function myKeyFunction(evt)
• if (evt) var thisKeyevt.which // Netscape 4
• else var thisKeywindow.event.keyCode
• if (thisKeyleftArrow)

• onKeydown
• onKeyup
• onKeypress
• User pressed, released or pressed and released a
  key
• Need
• an event watcher
• decide which key

17
18
Scrolling

• Scrolling
• have text appear as if it is moving along
• Example Happy Valentines! Hap
• py Valentines! Happy Valent
• ines! Hap
• etc.
• Where
• In status bar (tacky!)
• In a text field (better)

19
Scrolling

• How
• write a function to build the string splitting it
  at position pos
• Continually increase pos
• When pos is equal to the length of the string
  minus 1 (because .length string abc is 3, and
  postions are numbered 0 to 2) reset the pos to 0
• Cycle through this every so many milliseconds

20
Scrolling

• book example 164-167
• the user enter text (blurb) to scroll, time delay
  and click a button to start and stop
• Following example
• Uses a fixed blurb and time delay an executes on
  load and continues until page unloads

21
Scrolling Function
ltheadgt ltscript language"JavaScript"
type"text/JavaScript"gt var blurb Happy
Valentine" var pos 0 function
scrollIt() var firstPartblurb.substring(pos)
var secondPartblurb.substring(0,pos) document.
myForm.scrollBox.valuefirstPart " ."
secondPart if(pos blurb.length-1) pos
0 else pos setTimeout("scrollIt()",
100) lt/scriptgt lt/headgt
Global Variables declared outside of function so
not reset each time function called
setTimeout Evaluates an expression or calls a
function after a specified number of milliseconds
elapses
22
Starting the function the first time
ltbody onLoad"scrollIt()"gt ltform name"myForm"
method"post" action""gt ltinput
name"scrollBox" type"text" id"scrollBox"
size"50"gt lt/formgt lt/bodygt