Weeks 8 - 10

Some possible directions for the class to go:

1. Basic review of JavaScript / HTML (see here)

2. animation (see bottom of page here)

3. embellishment of Assignment #6 (see bottom of page here)

Assignment #4: Due Friday October 10th

Use Photoshop (available in ATSH224 and ATSH230) or comparable software to draw

a) a face
or
b) a tree

Your drawing should each be exactly 400 pixels wide by 300 pixels high, and stored in .jpg format. Make the picture as realistic as you can (within the time allotted). Slice the image into four pieces, each 200 by 150 pixels. Create a 2 by 2 table containing all four pieces (in some predefined, but scrambled order). Whenever someone clicks on one of the pictures, swap the position of it with the image next to it in a clockwise direction. Whenever the picture is reassembled (i.e., all four pieces are in their proper positions) then pop-up an alert message. Put the table on a web page in your class space and e-mail me the address (http://webclass.sru.edu/cpsc217/... et cetera).

puzzle.html

Assignment #5, Extra credit due: Wednesday October 22nd.

Build a web page in which the user can type or paste a paragraph or more of text. When done, the user can press a button which "analyzes" the text. The analysis consists of two tabulations: the frequency of occurrence of every letter and punctuation mark (lowercase and uppercase letters are considered the same so that "a" and "A" are identified) and the frequency of occurrence of every character pair (or digraph -- in which "ab" is not the same as "ba") is tabulated and presented on the page.

Finally, when a second button is pressed, new random text is generated and placed somewhere else on the page. The newly generated text should be generated with the probabilities of letters' occurrences matching the frequency of occurrence within the user's text. That is, if the occurrence of "e" accounts for 12% of the characters used, then the probability of generating an "e" should be 0.12.

For extra credit, make it so that the probabilities associated with digraphs match their observed frequencies. (Another button should be deployed on the page for this feature.)

Approach using two arrays

Approach using associative arrays

Even fancier approach

More on associative arrays

Uneven probabilities

Counting words

How to find the largest element(s) in an associative array (conventionally, and using objects)

A better version of the above

New material:

Basic Form components

Document Object Model

Probing DOM

Windows, locations and frames

 document.write and innerHTML and appendChild( )

Take Home Quiz: Due November 24th

evaluation of HTML authoring environments

Assignment #6 - Wednesday November 5th

Make a page containing two inputs (m and n) and three buttons. Whenever any button is pressed, construct an m by n multiplication table (illustration below). One button should use document.write, another: innerHTML, and the third should use the DOM methods (createElement, appendChild, etc.)