js-and-html by SanjuDudeja

VIEWS: 20 PAGES: 24

More Info
									JavaScript and HTML

   Simple Event Handling




                           26-Jan-11
        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




                                                                 2
        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 isn’t generated, the handler does nothing
       A handler should be very short
            Most handlers call a function to do their work



                                                                      3
      A simple event handler
   <form method="post" action="">
      <input type="button"
             name="myButton"
             value="Click me"
             onclick="alert('You clicked the button!');">
    </form>
      The button is enclosed in a form

      The tag is input 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

                                                                                 4
    Capitalization
   JavaScript is case sensitive
   HTML is not case sensitive
   onclick="alert('You clicked the button!');"
       The 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
                                                                             5
        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




                                                                                 6
     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
    <h1 onMouseOver="style.color='red';"
        onMouseOut="style.color='blue';">Hello </h1>
   Image rollovers are just as easy:
    <img src="../Images/duke.gif"
         width="55" height="68"
         onMouseOver="src='../Images/duke_wave.gif';"
         onMouseOut="src='../Images/duke.gif';">


                                                        7
      Events and event handlers I
   The following tables are taken from:
    http://developer.netscape.com/docs/manuals/js/client/
           jsguide/index.htm

Event      Applies to    Occurs when             Handler
Load       Document body User loads the page     onLoad
                         in a browser
Unload     Document body User exits the page     onUnload
Error      Images, window Error on loading an    onError
                          image or a window
Abort      Images          User aborts the       onAbort
                           loading of an image
                                                            8
    Events and event handlers II
Event      Applies to            Occurs when   Handler
KeyDown Documents, images, User depresses onKeyDown
        links, text areas  a key


KeyUp      Documents, images, User releases a onKeyUp
           links, text areas  key

KeyPress   Documents, images, User presses  onKeyPress
           links, text areas  or holds down
                              a key
Change     Text fields, text     User changes onChange
           areas, select lists   the value of an
                                 element
                                                         9
        Events and event handlers III

Event        Applies to         Occurs when     Handler
MouseDown Documents,            User         onMouseDown
          buttons, links        depresses a
                                mouse button
MouseUp      Documents,         User releases   onMouseUp
             buttons, links     a mouse
                                button
Click        Buttons, radio       User clicks a onClick
             buttons,             form element
             checkboxes,          or link
             submit buttons,
             reset buttons, links
                                                            10
    Events and event handlers IV

Event       Applies to          Occurs when     Handler
MouseOver   Links               User moves      onMouseOver
                                cursor over a
                                link
MouseOut    Areas, links        User moves       onMouseOut
                                cursor out of an
                                image map or
                                link
Select      Text fields, text   User selects   onSelect
            areas               form element’s
                                input field

                                                              11
  Events and event handlers V

Event      Applies to   Occurs when        Handler
Move       Windows      User or script     onMove
                        moves a window

Resize     Windows      User or script     onResize
                        resizes a window
DragDrop   Windows      User drops an      onDragDrop
                        object onto the
                        browser window



                                                        12
       Events and event handlers VI

Event      Applies to        Occurs when     Handler
Focus      Windows and all   User gives      onFocus
           form elements     element input
                             focus
Blur       Windows and all   User moves      onBlur
           form elements     focus to some
                             other element
Reset      Forms             User clicks a   onReset
                             Reset button

Submit     Forms             User clicks a onSubmit
                             Submit button

                                                       13
        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


                                                                        14
The DOM
hierarchy




Source:
http://sislands.com/coin70/week1/dom.htm
                                           15
        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.


                                                                            16
        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.


                                                                                   17
        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.

                                                                           18
        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).




                                                                  19
    Fields of document, I
   You must prefix these fields with document.
   anchors[ ]
       An array of Anchor objects (objects representing
        <a name=...> 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


                                                                              20
        Fields of document, II
   forms[ ]
       An array of Form elements
            If the document contains only one form, it is forms[0]
   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



                                                                                   21
        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




                                                                  22
        Fields of the form object
   elements[ ]
       An array of form elements




                                    23
The End




          24

								
To top