JavaScript, Third Edition

1
JavaScript, Third Edition
Chapter 4
The Browser Object Model
2
HTML Tables

• Copy your Template.html file to a Chapter 4
  folder and rename as Auction.html
• Change the DOCTYPE to Transitional
• Use Auctions for the Title
• For this example you can delete both script
  sections
• After the opening body tag, typeMy Auctionslthrgt
• Then type the opening and closing table
  tagslttablegtlt/tablegt

3
HTML Tables

• Tables contain lttrgt tags which indicate rows
• Rows contain lttdgt tags which indicate cells
• Rows can contain the same or different numbers of
  cells

We are going to create the following table, with
four rows of three items each
4
HTML Tables

• Between the Table tags, type the opening and
  closing row tags. Indent these tagslttrgtlt/trgt
• Between these row tags, type the contents of the
  first cell in the first row (indented)lttdgt1.lt/td
  gt
• Repeat for the remaining cells in the first row.
  Type them directly below the first data
  tag.lttdgtCoinslt/tdgtlttdgt4 itemslt/tdgt

5
HTML Tables
Repeat for the three remaining rows

• lttrgt
• lttdgt2.lt/tdgt
• lttdgtDollslt/tdgt
• lttdgt12 itemslt/tdgt
• lt/trgt
• lttrgt
• lttdgt3.lt/tdgt lttdgtJewelrylt/tdgt
• lttdgt1 itemlt/tdgt
• lt/trgt

• lttrgt
• lttdgt4.lt/tdgt
• lttdgtWatcheslt/tdgt
• lttdgt7 itemslt/tdgt
• lt/trgt

Save your file Open the document
6
HTML Tables
Your document should look like
Auctions1.html
7
HTML Tables

• Change the height of the second, third and fourth
  rows. Add the height inside the opening lttdgt
  tags lttd height"50"gt
• Now it should look like this

Auctions2.html
8
HTML Tables

• Add a row before the first row to be the column
  headings
• lttrgt
• lttdgtIDlt/tdgt lttdgtItemlt/tdgt
  lttdgtQuantitylt/tdgt lt/trgt

9
HTML Tables

• Table Borders
• To set the border's width, change the opening
  table tag to belttable border"7"gt
• To set the table's main border color, change the
  first lttrgt line to belttr bordercolor"white"gt
• To set the light and dark border colors, add
  colors to the opening Table tag. (Type these all
  on one line) lttable border"7"
  bordercolorlight"silver" bordercolordark"black
  "gt
• Change the opening tag for the last data taglttd
  bordercolor"red"gt7 itemslt/tdgt

10
HTML Tables
Your document should look like
Auctions3.html
11
HTML Tables

• Remove the red color on the last data tag
• A table's width and height can be a number
  (pixels) or a percentage of the Web browser
  window
• Add width and height to the opening Table
  taglttable width"50" height"300" border"7"
  
• Change the first, second and third data tags to
  belttd width"10" height"100"gtltstronggtIDlt/stron
  ggtlt/tdgtlttd width"20"gtltstronggtItemlt/stronggtlt/tdgt
  lttdgtltstronggtQuantitylt/stronggtlt/tdgt

12
HTML Tables
Your document should look like
Auctions4.html
13
HTML Tables

• Multiple columns or rows can be combined
• Replace all the td tags in the first row with one
  linelttd colspan"3"gtItems for Salelt/tdgt
• Replace the last data tag in row 3. (1 item)
  withlttd rowspan"2"gtSold Outlt/tdgt
• Remove the last data tag in the last row.

Auctions5.html
14
HTML Tables

• Cell spacing adjusts the spaces between cells.
  The spacing number is in pixels
• Cell padding specifies the minimum distance in
  pixels the data will be from the sides of the
  cell.
• Add the following to the table tag after
  border"7"cellspacing"5" cellpadding"5"
• Add the following to the last opening data tag in
  rows 1, 2 and 3"lttd align"center"
• Add the following to the last opening data tag in
  row 3valign"middle"
• Align options are left, right and center.
• Valign options are top, bottom and middle.

15
HTML Tables HTML Tables

• A table can be nested inside another table
• Remove the rowspan in the last data tag in item
  3.
• Replace sold out with 1 item
• Add, in place of the last data tag line in row 4
  (watches), the following tablelttdgt lttable
  width"100" height"100" border"1"gt
• lt/tablegtlt/tdgt

16
HTML Tables

• Add the following between the two table
  tagslttrgt lttdgtDigitallt/tdgt lttdgt2
  itemslt/tdgtlt/trgtlttrgt lttdgtAnaloglt/tdgt
  lttdgt6 itemslt/tdgtlt/trgt

Auctions6.html
17
Understanding The Browser Object Model

• Also called client-side object model
• Is a hierarchy of objects
• Each object provides programmatic access to a
  different aspect of the Web browser window or the
  Web page

18
Understanding The Browser Object Model

• Window object
• Top level object in browser object model
• Represents a Web browser window or an individual
  frame within a window
• Automatically created by Web browser
• Also called global object
• Contains Document object

19
Understanding The Browser Object Model
20
The Document Object

• Most important object in the browser object model
  
• Represents Web page displayed in a browser
• The write( ) and writeln( ) methods, refer to the
  Document object
• Contains all of the elements you create on a Web
  page

21
Referencing JavaScript Objects

• To refer to a JavaScript object in code
• you must refer to all of the objects that contain
  it, with the object names, separated by periods
• exampledocument.images0.src

22
In-Class Practice

• Create a Chapter 4 folder on your flash drive
• Copy into that folder all the Chapter.04Chapter
  data files.
• Turn to page 171 and follow the instructions for
  the CentralValleyZoo.html
• Note the nbsp
• Add your name as a comment at the beginning of
  the file
• Turn to page 172 and follow the instructions
  there for the CentralValleyZoo.html

23
The Window Object

• Includes several properties that contain
  information about the Web browser window
• Contains methods that allow you to manipulate the
  Web browser window itself
• Use the self property to refer to the current
  Window object
• example replace document.images0.src with
  self.src

24
The Window Object (Cont.)
25
The Window Object (Cont.)
26
Windows and Events

• Events are particularly important when it comes
  to working with the browser object model
• Allow you to
• Execute the methods and change the properties of
  objects in the browser object model

27
The click and double-click Events

• Used with form controls
• Often used for the anchor element
• Primary event associated with click and
  double-click Events

28
The click and double-click Events

• If you want to override the automatic click event
  with your own code
• Add to the ltagt element an onclick event handler
  that executes custom code
• Your code must return a true or false with the
  return statement
• true the web browser witll perform its default
  event handling of opening the URL referenced in
  the link
• false do not open the URL
• The dblclick event works the same as the click
  event, except
• Users need to double-click the mouse instead of
  single-clicking it
• Rarely used

29
The mouseover and mouseout Events

• Used to create rollover effects
• Occur when your mouse moves over an element
• Such as changing the image displayed or changing
  the text in the status bar
• The mouseover event occurs when the mouse passes
  over an element
• The mouseout event occurs when the mouse moves
  off an element

30
The mouseover and mouseout Events

• Examplelta href"mypage.html"onmouseover"window
  .status'Words for status' return
  true"onmouseout"window.status'Other status
  words'return true"gtLink Name To Display On
  Pagelt/agt
• Default text for status bar
• window.defaultStatus"text to display in status
  bar"

31
The mousedown and mouseup Events

• The mousedown event occurs when you point to an
  element and hold the mouse button down
• The mouseup event occurs when you release the
  mouse button

32
In-Class Practice

• Turn to page 178 and follow the instructions
  there for CentralValleyZoo.html
• window.defaultStatus
• onmouseover
• self.status
• Turn to page 181 and follow the instructions
  there for CentralValleyZoo.html
• onmouseup
• onmousedown
• this.src

33
Opening and Closing Windows

• Reasons for opening new Web Browser windows
• To launch a new Web page in a separate window,
  allowing users to continue viewing current page
  in the current window
• To use an additional window to display
  information such as a picture or an order form

34
Opening and Closing Windows (Cont.)

• Whenever a new Web browser window is opened, a
  new Window object is created to represent the new
  window
• You can manually open a new Web browser window
• in Netscape by selecting New Window from the File
  menu
• In Internet Explorer by selecting Window from the
  New submenu on the File menu

35
Opening a Window

• In order to open new windows in the strict DTD
• You must use the open( ) method of the Window
  object
• Syntax for the open method is as follows
• window.open(url, name, options, replace)

You can include all or none of the open( ) method
arguments
36
Opening a Window (Cont.)
All options except for height and width are set
using "yes" or "no" (or 1 or 0). Multiple options
must be separated by commas.
37
Window Focus

• Open a window exampleOpenWin window.open(url,
  "MyWin","toolbarno,menubarno,locationno,width
  400,height325")
• To change the focus to this windowOpenWin.focus(
  )

38
Closing a Window

• The close( ) method
• Closes a Web browser window
• Probably used the most with variables
  representing other Window objects
• To close the Web browser window represented by
  the OpenWin variable
• Use the Statement OpenWin.close( )

39
In-Class Practice

• Turn to page 182 and follow the instructions
  there
• target
• Turn to page 187 and follow the instructions
  there
• window.open
• onclick event handler
• Turn to page 189 and follow the instructions
  there
• focus

40
Working with Timeouts and Intervals

• Use the Window objects timeout and interval
  methods to create code that executes
  automatically
• The setTimeout( ) method
• Used in JavaScript to execute code after a
  specific amount of time has elapsed
• Code executed with the setTimeout( ) method
  executes only once
• Syntax for the setTimeout( ) method is
• var variable setTimeout(code,
  milliseconds)

41
Working with Timeouts and Intervals

• ClearTimeout( ) method is used to cancel a
  setTimeout( ) method before its code executes
• ClearTimeout( ) method receives a single
  argument
• Variable that represents a setTimeout( ) method
  call

42
Working with Timeouts and Intervals

• Two other JavaScript methods that create code and
  execute automatically are
• setInterval( ) method
• clearInterval( ) method
• The setInterval( ) method
• is similar to the setTimeout( ) method, EXCEPT
• it repeatedly executes the same code after being
  called only once
• usually used for starting animation code that
  executes repeatedly
• The clearInterval( ) method
• Used to clear a setInterval( ) method call in the
  same fashion that the clearTimeout( ) method
  clears a setTimeout( ) method call

43
In-Class Practice

• Turn to page 194 and follow the instructions
  there
• setInterval

44
Homework for first part of Chapter 4

• Projects 4-1 and 4-2
• Case Projects 4-1 and 4-2
• Due in one week
• Remember to pass in your flash drive and a
  printout of all html code all in a 9" x 11½ "
  envelope with your name on it

45
The History Object

• Maintains an internal list (known as a history
  list) of all the documents that have been opened
  during the current Web browser session
• Each Web browser window and frame contains its
  own internal History object

46
The History Object

• You cannot view the URLs contained in the history
  list
• BUT you can write a script that uses the history
  list to navigate to Web pages that have been
  opened during a Web browser session

47
The History Object

• In Internet Explorer, you can use JavaScript code
  to navigate through a history list
• Only possible if the currently displayed Web page
  exists within the same domain as the Web page
  containing the JavaScript code attempting to move
  through the list

48
The History Object
Examples history.back( ) //same as using back
button history.forward( ) //same as using
forward button history.go(-2) //opens page two
pages back in history list history.go(3) //
opens page three pages forward in history list
49
The Location Object

• Allows you to change to a new Web page from
  within JavaScript code
• One reason to change Web pages with JavaScript
  code is
• to redirect your Web site visitors to a different
  or updated URL
• When you use a method or property of the Location
  object, you
• must include a reference to the Location object
  itself
• location.href URL

50
The Location Object
51
The Location Object
52
The Location Object

• location.assign("url") //is the same as
• location.href "url"
• location.reload( ) or location.reload(false)
• only reloads current web page from server if it
  has changed
• location.reload(true)
• reloads current web page from server even if no
  changes
• location.replace("url")
• replaces existing web page with another one
  and replaces the old url entry in the history
  list

53
The Navigator Object

• Used to obtain information about current Web
  browser
• Netscape and Internet Explorer each contain
  unique methods and properties of the Navigator
  object that cannot be used with the other browser
  
• Most commonly used to determine which type of Web
  browser is running

54
The Navigator Object (Cont.)
browserType navigator.appName returns
the name of the web browser
55
Using the target and base Attributes

• Target attribute determines in which frame or Web
  browser window a document opens
• Based on value assigned to an ltagt elements
  target attribute or the value assigned to a
  ltframegt elements name attribute
• Example
• ltframeset cols "250, "gt
• ltframe src "url1.html" name "first" /gt
• ltframe src "url2.html" name "second" /gt
• lt/framesetgt

56
Example using the target attribute

• ltframeset cols "250, "gt create two column
  frames
• ltframe src "url1.html" name "first" /gt
• ltframe src "url2.html" name "second" /gt
• lt/framesetgt
• lta href "mypage1.html" target "second"gtMy
  first pagelt/agt
• lta href "mypage2.html" target "second"gtMy
  second pagelt/agt

57
Using the target and base Attributes

• Use the target attribute with the ltbasegt element
• to specify a default target for all links in a
  document
• Using the assigned name of a window or frame

58
In-Class Practice

• Turn to page 202 and follow the instructions
  there for AnimalList.html
• target
• Turn to page 204 and follow the instructions
  there for AnimalList.html
• base target

59
The parent Property

• If a window contains no frames, then the frames
  array is empty
• To refer to a frame within the same frame set
• Use the parent property of the Window object
  combined with the frames index number from the
  frames array

60
In-Class Practice

• Turn to page 207 and follow the instructions
  there for AnimalList.html
• parent.frames .location.href

61
The top Property

• Refers to the topmost window on a Web page
• When working with frames, the top property refers
  to the window that constructed the frames
• When the top property is used on a Web page that
  does not contain frames
• refers to the window itself

62
Homework for the second part of Chapter 4

• Typed multiple-choice and true/false questions
  on pages 209 - 213
• Projects 4-4 and 4-5
• Case Projects 4-3 and 4-4
• Due in one week
• Remember to pass in your flash drive, a printout
  of all html code and a printout of the
  multiple-choice and true/false answers all in a
  9" x 11½ " envelope with your name on it