Information Technology Learning Centers

JavaScript I - The Basics

Raymond J. Kimball


Project Manager, TechLEAP
Information Technology Institute

JavaScript Outline

  1. JavaScript Basics
  2. JavaScript II - Forms, Loops & Strings
  3. JavaScript III - Manipulating Browser Windows
  4. JavaScript IV - Roll-Over Buttons
  5. JavaScript and HTML Framesets
  6. C&O Canal  http://www.cocanal.com
  7. A
    1. Objects - JavaScript's Nouns
      • document - the browser document
      • window -- a new browser window.
      • navigator -- a browser
      • array -- object containing a set of related information
    2. Properties - An object's characteristics. JavaScript's adjectives
      • navigator.plugins - The plug-ins existing with a browser. We can search for these (See p. 24)
      • window.outerheight
      • See Table A.3, appendix A, for a full list of JavaScript's objects and associated properties and methods
    3. Methods( ) - the things that objects can do. JavaScript's verbs( )
      • document.write("You've got mail!")
      • window.alert(" You have performed an illegal operation!")
    4. Handling Events
      • Events - Actions the user performs.
      • Event handlers (p.7) - JavaScript commands which control or respond to events -- e.g., changing an image in an browser window's image location.
      • onClick - user clicks on an object
      • onMouseover - mouse moves over an object. Commonly used in roll-over buttons.
      • onBlur - user leaves an object. Commonly used when the programmer wants a new browser window to be selected (come into focus) when the user leaves an object. Slightly different from onMouseout
    5. Variables -- The Biggie Star of any computer program. Variables are used to hold:
      • information. This information commonly will be passed from one part of the JavaScript code to another.
      • numbers (3.g. counters; i=0; i++)
      • Boolean logical operators (e.g. hasFlash = false)
      • Arrays, i.e., lists of information, things to buy, price lists, etc.
        • adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif")
    1. The <Script> Tag
    2. The <Script> </Script> container
    3. Three places to place JavaScript Scripts:
      1. Inside the <HEAD> Tag
      2. In a script container inside the <BODY> tags;
      3. Inside individual HTML tags which are themselves being manipulated by JavaScript, or which call JavaScript functions.
    4. JavaScript Comment Tags - Hiding JavaScript from older browsers

    <!--Hide Script from older browsers
    <Script language = "javascript" type = "text/javascript">
    document.write("Hello, world!")
    </Script>
    //End Hide Script-->

    1. Long Comments /* Place comments inside the star */
    2. Creating an HTML/JavaScript/CSS template
    3. Hello, World
    4. Hello, World Alert
    5. Bev Alert!
    6. Bev Really Means It!
    7. Functions Ch 2, p. 26
      1. Function - performs producer-defined task
      2. Specially defined function in a program is preceded by the JavaScript reserved word, function
      3. Naming a function - Give it a descriptive name: function saySomething
      4. Function syntax
        • function saySomething (parameter) {alert("four score and seven years ago") }
        • parenthesis - often will hold a separate variable (known as a "parameter" of the function) which is used for passing information.
        • Braces { } hold the contents of the function.
        • Calling a function: Use an event handler:
          • p. 52 - function rotate(){if document.images{thisAd++ if(thisAd == imgCt){thisAd=0}document.acBanner.src=adImages[thisAd] setTimeout("rotate()", 3*1000)}}
          • onLoad = "rotate()"(p. 7).
        • Passing information to a function. Pass to a function to be processed:
          • strings
          • jpeg images in a slide show
          • numbers
      5. Presidential Quotes - Functions and Passing Information

    © Raymond J. Kimball, February, 2002