465: Introduction to JavaScript

  1. JavaScript is used for
      1.Improved user interface controls
        Activation buttons
        Response to mouse events
        User dialog boxes
        Status line messages
        Controls for web page characteristsics
      2. Forms preprocessing and processing

    1. Make sure your browser enables Javascript:
        NS3: Options - Network Preferences - Languages - enable JavScript
        NS4: Edit - Preferences - Advanced - enable Javascript

    2. Data types: numbers, strings, boolean, null

      Literals (eg. strings, numbers) and variables (placeholders)

      Keywords (reserved words)

    3. Objects:
        window -- navigator/plug-in
        frame
        history/document/location
        anchor/form/link
        button/checkbox/passweord/select/text/etc

      The Navigator object knows browser application name and version

      The Window object knows frames, parent, self, status messages

      The Document object knows title, URL, referrer, lastModified, colors of links, background, foreground

    4. Javascript refers to objects using dot notation:

        document.form1.text1.value

    5. Javascript uses flow-control statements:

        if, else, loop control

    6. Functions make a group of statements available and can be called from event handlers. Many are built-in ; others are user-defined.

    7. JavaScript events:
        onAbort (image)
        onBlur (select, text, textarea)
        onchange (select, text, textarea)
        onClick (botton, checkbox, radio, link, resect, submit)
        onError (image, window)
        onfocus (select, text, textarea)
        onLoad (window)
        onMouseOut (area, link)
        onMouseOver (link)
        onReset (form)
        onSubmit (form)
        onSelect (text, textarea)
        onUnload (window)

    8. Methods: functions assigned to JavaScript objects
        write, writeln
        alert, confirm, prompt, open, cloase, setTimeout, clear Timeout

    9. Some rules
      1. JavaScript scripts normally go inside the document HEAD
      2. JavaScript scripts are enclosed in the <SCRIPT> ... </SCRIPT> tag
      3. The SCRIPT tag may specify LANGUAGE=JAVASCRIPT1.1 or other levels
      4. The SCRIPT tag may be followed by a <NOSCRIPT> ... Message... </NOSCRIPT> tag
      5. JavaScript scripts are hidden from non-JS browsers hy being put within a <~-- ... Comment ... --> tag.
      6. Start the last line of the comment with a slash: /
      7. Enclose longer comments inside /* these multiline comment marks */
      8. JavaScript is case sesitive (but HTML tags are not)

    10. Some ideas
      1. Use the navigator name and version testing for browser capability
      2. Use direct object testing to redirect user if browser can handle the code
          window.location="fancier.url"
      3. Test for plugins and directuser to download site if not present
      4. Use mouseover and status bar for more information about link before clicking
      5. Avoid the cliche of status bar tickertape messages
      6. Don't use today's date object to make a lastmodified claim
      7. Rollovers can present highlights and previews before clicking links
      8. Preloading images will avoid rollover delays
      9. Rotating banner images can include JPG files (unlike animated GIFs) `
      10. Open new windows on demand for information, navigation
      11. Use DHTML for layering, behavior, motion libraries

    11. Javascript resources: Books
      • Tom Negrino et al, JavaScript for the World Wide Web(Peachpit, 2nd ed. Visual QuickStart)
      • Nick Henle, Designing with Javascript (O'Reilly). Nick was a 17 year-old high school student.
      • David Flanagan, Javascript: the Definitive Guide (O'Reilly, 2nd ed)
      • Danny Goodman, JavaScript Bible (IDG, 3rd ed)
      • Reaz Hoque, Practical JavaScript Programming(M&T)
      • Richard Wagner, et al, JavaScript Unleashed (Sams, 2nd ed)
      • Stephen Feather, JavaScript By Example (Que)
      • Emily Vander Veer, JavaScript for Dummies (IDG, 2nd ed) actually not simple at all

    12. Javascript resources: Online

    13. Javascript resources: Sites