------------------------------------------------------------------------------
MC logo
Javascript
[^] CSc 302 Outlines
------------------------------------------------------------------------------
<<Forms Random Stuff>>
  1. What is Javascript?
    1. Programming language inside web pages.
    2. Interpreted by the browser.
    3. Uses.
      1. Interact with the user.
      2. Check data before sending: Reduces net traffic.
    4. Problems.
      1. Not all browsers run javascript.
      2. Not all browsers have it turned on.
      3. Behavior of some constructs varies.
      4. Make sure you page does not depend on Javascript to work.
    5. Javascript is not java.
  2. Javascript Furniture
    1. Numbers and operations: 5 + 6
    2. Strings: "Hi there" or 'Hi there'.
    3. String concatenation: "Left" + "Right" is "LeftRight"
    4. Variables: var z = 17
    5. Objects: Things you can talk to and use.
      1. Window, Frame, Document, etc.
      2. Parts of each other.
    6. Objects have attributes. Examples:
      1. window.status
      2. document.bgcolor
      3. history.previous
    7. Attributes may be queried or changed.
    8. Parts are named by walking down from the top using dot: window.history.length.
    Window Frame
    Document
    Location
    History    		 Layer
    Link
    Image
    Area
    Anchor
    Applet
    Plugin
    Form     		Text Area
    Text
    File Upload
    Password
    Hidden
    Submit
    Reset
    Radio
    Checkbox
    Button
    Select Option
    Object Hierarchy: Objects Are Parts Of Others

  3. Inserting Javascript.
    1. Contents of the script tag are run when the page is loaded:
      <script language="javascript">
      window.alert("Hi there");
      </script>
    2. Code may be located in another file:
      <script language="javascript" src="somewhere.js">
      </script>
    3. Code may be contained in event attributes, and is run when the user does something: onclick, onchange, onload, etc.
      <input type="text" size="5" 
            onchange="window.alert('Hi there');" />
  4. Some examples:
    1. Message On Load
    2. Click To Raise
      1. Uses an onClick on a div.
      2. Changes the z-index when clicked.
    3. Change Colors.
      1. This uses a form and the <input type="button" /> tag.
      2. The form is not submitted; it just for scripting.
      3. The type=button is only for scripting.
      4. Uses onclick to run code when a button is pressed.
      5. Changes the bgColor attribute of the document.
    4. Self-Writing Document.
    5. Arithmetic.
      1. Uses events to perform arithmetic.
      2. The id attribute is used to identify fields.
      3. The need for parseFloat is due to some Javascript idiocy.
    6. Colors, Again.
      1. This one sets any background color.
      2. It uses a function and simple a array.
      3. Notice the re-initialization code at the bottom. I needed this to set the page on a reload.
    7. Automatic Color Changes
      1. This uses setTimeout to run some code later.
      2. The various functions call each other in rotation.
      3. Also uses the window.status to change the status line at the bottom of the window.
    8. Gradual Color Change
      1. This uses setTimeout to run some code later.
      2. Does some interesting conversions to change the color up and down.
    9. Popups
      1. Button generates a popup menu from javascript.
      2. The window which pops up has javascript button to close it.
      3. Many options for the popup window.
    10. Mouseover
      1. The onmouseover and onmouseout operate when the mouse enters and leaves an image.
      2. The large image is actually two images, changed using the src property.
      3. The green arrow uses the history object.
    11. Index Pictures
      1. Indexed set of images on a single Javascript-driven page.
      2. Index has a fixed location at the top. Horizontal scroll on the image list.
      3. Main content div is lowered by the height of the index div.
      4. Cursor property to show that thumbs can be clicked.
      5. Clicking uses Javascript to load each main image by changing the the src property.
    12. Same Images, Different Code
      1. Only difference: Use a Javascript loop to create the repetitive HTML within the index.
    13. Form Validation
      1. Use the onsubmit attribute to check data before sending.
      2. The verify function returns true if it approves, or makes an alert and returns false otherwise.
      3. Also makes use of some string functions.
      4. Conditionals.
      5. String handling.
  5. Getting Javascript error messages.
    1. Explorer: Tools/Internet Options/Advanced. Turn on script debugging and display on error.
    2. Mozilla: Tools/Error Console
  6. Not very much from Ch. 15.
<<Forms Random Stuff>>