Javascript Examples
Mississippi College
Computer Science
Dr. Bennet
  1. Simple On-click: [PageSource]
    1. Javascript is introduced in a <script> section.
    2. As typical, this contains data and function declarations.
    3. Functions are called from onclick attributes.
    4. The value of the onclick is Javascript code.
  2. On-Click, again: [PageSource]
    1. Same effect as first one.
    2. Events are added in Javascript, not HTML. This method is considered superior (or at least in style these days).
    3. There are many events.
    4. Handler can accept an Event object, which describes the event.
    5. Notice that the margin style on the bottom is added inline rather than in the style. This code breaks without that.
  3. On-Click, once again: [PageSource]
    1. This one creates most of the page by dynamically creating the HTML elements.
    2. The function addbox creates each of the interesting divs, decorates it, and fills it.
    3. Note that addbox adds a method to the div object which it creates. Note that it uses the fact that functions are closures means they keep the values of the parameters sent to addbox.
    4. Also uses the fact that addEventListener can establish multiple listeners on the same event. (On attributes cannot.)
  4. On-Click, yet again: [PageSource]
    1. This uses an event to build the document on page load.
  5. TextContent [PageSource]
    1. Just to show the use of text content.
    2. Notice that text content is not parsed as HTML, but shown literally.
    3. The innerHTML attribute can be used to if you need to add HTML content.
  6. Adjustable Text List [PageSource]
    1. This is an elaboration of the last one, which allows:
      1. Two-way movement through the list.
      2. Deletion of messages.
      3. Addition of messages.
    2. It was intended to demonstrate the use of a text input area, but sort of grew out of proportion.
      1. The entry box is not seen unless it is in use. This is done by setting the display style on its surrounding div to none.
      2. The click for entering a line changes that so the box appears.
      3. The line is actually inserted when you press enter using a button press callback.
  7. Tabs [PageSource]
    1. The boxes are arranged using CSS.
      1. An outer div tabrow holding the three tabs, arranged horizontally.
      2. An outer div contwrap below tabrow holding the three content boxes, arranged on top of each other.
    2. Onclick events attached to each tabs expose its corresponding content box by manipulating z-index.
  8. Document Write [Image IndexSource]
    1. This page has a lot of CSS, a little HTML and a little Javascript.
    2. The Javascript uses document.write to generate the index for all 50 images, and replaces a lot of HTML.
  9. Inner HTML [Guessing GameSourceJavascript]
    1. A simple game you can play in your browser.
    2. This page has very little HTML (just the start page) and a large Javascript file.
    3. The Javascript uses the innerHTML attribute to change the page.
    4. The state of the game is recorded in Javascript variables.
  10. Timer events.
    1. [Ball DropSource]
    2. [Auto ColorsSource]
    3. [Slow Auto ColorsSource]
    4. [Someone's In ThereSource]