DePaul University

1
DePaul University

• SNL 262
• Advanced Web Page Design
• Chapt 6 - Strings Arrays
• Instructor David A. Lash

2
Chapt 6 - String Types

• You can store numbers or characters into
  variables.
• For example,
• x12 or
• x"Dave"
• JavaScript allows 2 different ways to assign a
  set of characters into a variable
• x "Dave" or
• x new String("Dave")
• These 2 assignments are equal. The 2nd
  explicitly creates a new object called string and
  assigns into it the initial value called Dave.
• JavaScript allows either assignment. The second
  is much closer to the Java string definition and
  assignment.

3
Manipulating Strings

• Simple assignment statements can be used to alter
  string values in JavaScript.
• The "" sign is used to concatenate two strings
  together
• ltscript language"JavaScript"gt
• x new String("Dave")
• y "Tom"
• x y
• y y x
• document.write("x", x,
  "ltBRgt" )
• document.write("y" y
  "ltBRgt")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

4
Using Strings

• A string is an object
• Objects have properties and behaviors
• Properties are attributes you can look at -
  Access properties via object_name.property.
• For example, strings have length
• testA String
• document.write(test.length)
• Behaviors are functions for the object - Access
  properties via object_name.property.
• For example, functions available for
• toUpperCase() - converts string to all upper case
  
• toLowerCase() - converts string to all lower case
• testA String
• document.write(test.toLowerCase())

5
Using Strings - Substrings

• Here is another behavior for string objects
• text.substring(3,6)
• returns the portion of string text starting at 3
  and ending at 6
• So
• textApple
• text.substring(1,2)
• returns A

6
Strings Example

• A more complete example ...
• ltHTMLgtltHEADgtltTITLEgtExample String
  lt/TITLEgtlt/HEADgtltBODYgt
• ltscript language"JavaScript"gt
• x window.prompt(Enter a String)
  
• document.write(x.length,
  ltBRgt)
• document.write(x.toUpperCase(),
  ltBRgt)
• document.write(x.toLowerCase(), ltBRgt)
• lt/scriptgt lt/bodygt lt/htmlgt

See http//www.depaul.edu/dlash/extra/Advwebpage
/examples/ stringtoUpper.html
7
Another String Function

• Here is yet another behavior
• location test.indexOf( Dave)
• searches for the string Dave in the string test
  and returns the positional value value if it is
  in there.
• Returns -1 if not there.

ltHTMLgtltHEADgtltTITLEgtExample String
lt/TITLEgtlt/HEADgtltBODYgt ltscript
language"JavaScript"gt x window.prompt("Ente
r a String")
document.write(x.indexOf("Dave"), "ltBRgt")
document.write("String
was", x) lt/scriptgt lt/bodygt
lt/htmlgt
See /examples/stringtoIndex.html
8
Introduction To Arrays

• Arrays are a way to group sets of data items as a
  single unit
• First you declare the size of array (or number of
  items you want to group together)
• scores new Array(30)
• scores0 39
• scores1 40
• scores2 55
• scores3 99
• average(scores0scores1scores3scores2)/
  4
• document.write( average, average )
• Arrays have many advantages that we will look at
• some now (and others when we look at looping).
• - e.g., xscores11

Variable name
Subscript
9
Creating Arrays

• var a new Array()
• creates an empty array with no elements
• var a new Array(5, 4, 3, 2, 1)
• creates an array with 5 elements and initializes
  them.
• var a new Array(10)
• creates an array of 10 elements each set with the
  undefined value and sets length property to 10.

10
An Array Example

• ltHTMLgtltHEADgtltTITLEgtExample String
• lt/TITLEgtlt/HEADgtltBODYgt
• ltH1gt Sample Array lt/H1gt
• ltscript language"JavaScript"gt
• numb new Array(5)
• numb0window.prompt("Enter Number 0")
• numb1window.prompt("Enter Number 1")
• numb2window.prompt("Enter Number 2")
• numb3window.prompt("Enter Number 3")
• numb4numb011
• index window.prompt("Enter an index number
  from 0-4")
• if ( index lt 5 index gt 0 )
• document.write("Your index was " index
  "ltbrgt")
• document.write("The Array element was "
  numbindex "ltbrgt")
• else document.write("I said a number between
  0-5 ltBRgt" )
• lt/scriptgt lt/bodygt lt/htmlgt

See examples/5_arrayexample1.html
11
Some array procedures methods

• length
• var a new Array(10)
• xa.length
• sort()
• var a new Array(1, 33, 12, 4, 0)
• a.sort()
• reverse()
• var a new Array(1, 44, 2, 4)
• a.reverse()

12
Another Array Example

• ltHTMLgtltHEADgtltTITLEgtExample String
  lt/TITLEgtlt/HEADgtltBODYgt
• ltH1gt Sample Array lt/H1gt
• ltscript language"JavaScript"gt
• var a new Array(1, 33, 12, 4, 0)
• for (i0 ilta.length i )
• document.write("presort item number" i
  "" ai "ltbrgt")
• document.write("ltHRgt")
• a.reverse()
• for (i0 ilta.length i )
• document.write("reverse item number" i ""
  ai "ltbrgt")
• document.write("ltHRgt")
• a.sort( )
• for (i0 ilta.length i )
• document.write("post sort item number" i
  "" ai "ltbrgt")
• lt/scriptgt lt/bodygt lt/htmlgt

See examples/5_arrayexample2.html
13
String Arrays

• Split splits a string from 1 string into an
  array of different parts
• testnameDavid A. Lash
• partstestname.split( )
• Example
• ltHTMLgtltHEADgtltTITLEgtExample String
  
• lt/TITLEgtlt/HEADgtltBODYgt
• ltH1gt Test String Split lt/H1gt
• ltscript language"JavaScript"gt
• testname "David A. Lash"
• parts testname.split(" ")
• document.write( parts2, ", ", parts0, " ",
  parts1, "ltBRgt" )
• lt/scriptgt lt/bodygt lt/htmlgt

See http//www.depaul.edu/dlash/extra/Advwebpage
/examples/5_StringSplit.html
14
Scrolling Example

• ltHTMLgt
• ltHEADgtltTITLEgtScrolling Message Examplelt/TITLEgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• var msg "This is an example of a scrolling
  message. Isn't it exciting?"
• var spacer "... ..."
• var pos 0
• function ScrollMessage()
• window.status msg.substring(pos, msg.length)
  spacer msg.substring(0, pos)
• pos
• if (pos gt msg.length) pos 0
• window.setTimeout("ScrollMessage()",200)
• ScrollMessage()
• lt/SCRIPTgt
• lt/HEADgt
• ltBODYgt
• ltH1gtScrolling Message Examplelt/H1gt
• Look at the status line at the bottom of this
  page. (Don't watch it too long, as it

See http//www.depaul.edu/dlash/extra/Advwebpage
/examples/5_scroll.html