JavaScript and HTML

1
JavaScript and HTML

• Simple Event Handling

2
JavaScript and DOM

• JavaScript relies on a Document Object Model
  (DOM) that describes the structure of the web
  page
• This is not the same as the XML DOM
• You can do a lot with a just a little
  understanding of the DOM
• You use the DOM to access elements on the web
  page
• You can capture events without knowing the DOM at
  all
• You need the DOM to make any changes to the web
  page

3
Events

• Some (but not all) elements on the web page
  respond to user interactivity (keystrokes, mouse
  clicks) by creating events
• Different kinds of elements produce different
  events
• Browsers are not all alike in what events are
  produced
• We will concentrate on events from HTML form
  elements and commonly recognized events
• You can put handlers on HTML form elements
• If the event isnt generated, the handler does
  nothing
• A handler should be very short
• Most handlers call a function to do their work

4
A simple event handler

• ltform method"post" action""gt ltinput
  type"button" name"myButton"
  value"Click me"
  onclick"alert('You clicked the
  button!')"gtlt/formgt
• The button is enclosed in a form
• method tells how to send the form data action
  tells where to send it
• The tag is input with attribute type"button"
• The name can be used by other JavaScript code
• The value is what appears on the button
• onclick is the name of the event being handled
• The value of the onclick element is the
  JavaScript code to execute
• alert pops up an alert box with the given text

5
Capitalization

• JavaScript is case sensitive
• HTML is not case sensitive
• onclick"alert('You clicked the button!')"
• The red underlined parts are HTML
• The quoted string is JavaScript
• You will frequently see onclick capitalized as
  onClick
• The Java naming convention is easier to read
• This is fine in HTML, but an error if it occurs
  in JavaScript
• Also note Since we have a quoted string inside
  another quoted string, we need both single and
  double quotes

6
Common events

• Most HTML elements produce the following events
• onClick -- the form element is clicked
• onDblClick -- the form element is clicked twice
  in close succession
• onMouseDown -- the mouse button is pressed while
  over the form element
• onMouseOver -- the mouse is moved over the form
  element
• onMouseOut -- the mouse is moved away from the
  form element
• onMouseUp -- the mouse button is released while
  over the form element
• onMouseMove -- the mouse is moved
• In JavaScript, these should be spelled in all
  lowercase

7
Example Simple rollover

• The following code will make the text Hello
  red when the mouse moves over it, and blue
  when the mouse moves away
• lth1 onMouseOver"style.color'red'"
  onMouseOut"style.color'blue'"gtHello lt/h1gt
• Image rollovers are just as easy
• ltimg src"../Images/duke.gif" width"55"
  height"68" onMouseOver"src'../Images/duke_
  wave.gif'" onMouseOut"src'../Images/duke.g
  if'"gt

8
Events and event handlers I

• The following tables are taken fromhttp//develo
  per.netscape.com/docs/manuals/js/client/
  jsguide/index.htm

9
Events and event handlers II
10
Events and event handlers III
11
Events and event handlers IV
12
Events and event handlers V
13
Events and event handlers VI
14
Back to the DOM

• You can attach event handlers to HTML elements
  with very little knowledge of the DOM
• However, to change what is displayed on the page
  requires knowledge of how to refer to the various
  elements
• The basic DOM is a W3C standard and is consistent
  across various browsers
• More complex features are browser-dependent
• The highest level element (for the current page)
  is window, and everything else descends from that
• Every JavaScript variable is a field of some
  object
• In the DOM, all variables are assumed to start
  with window.
• All other elements can be reached by working down
  from there

15
The DOM hierarchy
Source http//sislands.com/coin70/week1/dom.htm
16
Fields of window, I

• window
• The current window (not usually needed).
• self
• Same as window.
• parent
• If in a frame, the immediately enclosing window.
• top
• If in a frame, the outermost enclosing window.
• frames
• An array of frames (if any) within the current
  window. Frames are themselves windows.
• length
• The number of frames contained in this window.

17
Fields of window, II

• document
• The HTML document being displayed in this window.
  
• location
• The URL of the document being displayed in this
  window. If you set this property to a new URL,
  that URL will be loaded into this window. Calling
  location.reload() will refresh the window.
• navigator
• A reference to the Navigator (browser) object.
  Some properties of Navigator are
• appName -- the name of the browser, such as
  "Netscape"
• platform -- the computer running the browser,
  such as "Win32"
• status
• A read/write string displayed in the status area
  of the browser window. Can be changed with a
  simple assignment statement.

18
Methods of window, I

• alert(string)
• Displays an alert dialog box containing the
  string and an OK button.
• confirm(string)
• Displays a confirmation box containing the string
  along with Cancel and OK buttons. Returns true if
  OK is pressed, false if Cancel is pressed.
• prompt(string)
• Displays a confirmation box containing the
  string, a text field, and Cancel and OK buttons.
  Returns the string entered by the user if OK is
  pressed, null if Cancel is pressed.

19
Methods of window, II

• open(URL)
• Opens a new window containing the document
  specified by the URL.
• close()
• Closes the given window (which should be a
  top-level window, not a frame).

20
Fields of document, I

• You must prefix these fields with document.
• anchors
• An array of Anchor objects (objects
  representinglta name...gt tags)
• applets
• An array of Applet objects
• The properties are the public fields defined in
  the applet
• The methods are the public methods of the applet
• Cautions
• You must supply values of the correct types for
  the fields and method parameters
• Changes and method calls are done in a separate
  Thread

21
Fields of document, II

• forms
• An array of Form elements
• If the document contains only one form, it is
  forms0
• images
• An array of Image objects
• To change the image, assign a new URL to the src
  property
• links
• An array of Link objects
• A link has several properties, including href,
  which holds the complete URL

22
Fields of document, III

• bgColor
• The background color of the document
• May be changed at any time
• title
• A read-only string containing the title of the
  document
• URL
• A read-only string containing the URL of the
  document

23
Fields of the form object

• elements
• An array of form elements

24
The End