Home   Current Courses   Video/Audio Library     Course Archive   Papers Archive   Beyond the Box   CV   Service My Keeper Shelf   Cultural References in Class

Home page for Professor Haynes'

COSC 231: Internet Computing
WINTER 2014

Textbooks:
    Required
  1. D. Flanagan, Javascript: The Definitive Guide 6th ed., O'Reilly, 0596805527, 2011.
  2. A decent Java text that covers Swing and threads.
    Recommended
  1. J.N. Robbins, HTML5 Pocket Reference, O'Reilly, 1449363350, 2013
  2. Meyer, CSS Pocket Reference, O'Reilly, 1449399037, 2011
    TBA for Legal, social, ethical Internet computing issues.


1. Lecture notes
Date Topic InLab Other Reading/Homework
R 4/17 applets
Java code
How to embed applets HERE
T 4/15
    Making a GUI responsive
  1. FillDemo unthreaded and fails
  2. ThreadedFillDemo improved and works
  3. ThreadedFillDemo2 improved (Runnable)
  4. use this one to cannabilize: ThreadedFillDemo3 event dispatch thread is made explicit
  5. ThreadedFillDemo4 Thread an inner class

    Two animation examples
  1. AlgorithmAnimcation by Horstmann
  2. Ball
  3. BallComponent
  4. BounceThread

See Homework Assignment given below!
R 4/10
    Java Graphics and Animation:
  • You may find this talk given to high school teachers helpful: HERE
  • Example code from the MACUL talk Circles
  • Another example: Timer0 Button control to output text
  • Another example: Timer1 Button control, randomly jumping rectangle
The due date on this is 4/15!!
Java code! Write an infinite loop that is controlled by a Java GUI. There is a long counter, the counter is incremented inside the loop. When the counter reaches values that are big enough so that you get a megatick every 5 - 10 seconds (formerly "multiples of one million") output a 'megatick' to the GUI. The counter should wrap-around to zero (not cause overflow). The GUI has a start button, a stop button (both of which turn turn on and off the Swing timer), the megatick is written to the GUI, not to the console. The code for the counter is inside the Swing timer actionPerformed() -- that is, only increment the counter (possibly multiple times) when the timer goes off.
Writing this with threads rather than with a Swing Timer is acceptable.
Looking for: writing to GUI, using Swing timer, Timer() controlled by buttons, infinite loop
T 4/8 Java code! This HOMEWORK is now JUST an EXTRA CREDIT ASSIGNMENT, due 4/17. Rewrite TenThreads.java so there are only two threads doing the work on an array. Demo on 10 X 10, and 1000 X 1000 arrays
T 4/1 Elementary DOM surgery
jshint.org		 Write three images side-by-side on a page. Clicking a button causes them to rotate to the right. Use DOM 'surgery' to change the html on the fly.
R 3/27 Inclass test: open book/internet
up to, but not including regular expressions
T 3/25 Reverse engineering:
Consider this Javascript program written by ace coder Jan Wolter: Jan's flood-it
Observe how he uses a submit button (labelled "new game") to get parameters for his board (board size and colors) 		Modify your inlab from 02/18/2014, #2, to make a slide show of four pictures (or start from scratch): using only a selection list of allowed delays, 1, 2, 3, 4 ms, and the Start button. The Start button is now a submit button that supplies the chosen delay amount.
Upload to Inlab0325.html		 Note assignment due next time
R 3/20 Regular expressions Inlab: Given a string, e.g., "now is the time for all good men to come to the aid of the party", obtain an array of all substrings that are separated from each other by one or more blanks
Eg {"now", "is", "the", "time", "for", ...}		 HERE is a practice regular expression quiz
Reminder of middle of term test!		 Read JS: chpt 11 - regular expressions
T 3/18 Intro to fractals: Sierpinski gasket, Koch curve, dragon curve, Mandelbrot set Demo day
R 3/13 Beginning object orientation
  • Improve your flashcard inlab (of 3/11) to use a user defined Card object
  • Improve your flashcard inlab (3/11) to always display the correct answer
  • Improve your flashcard inlab (3/11) to display a (background) color for problem and a different color for answer
Javascript: Chapter 6 (Objects), Chapter 8 (Functions)
T 3/11 Associative list Create a flashcard tool. Initialize a list of 5 flash cards. Display a random card, ask user for the answer. Tell the user if he got the answer right or wrong. If he got the answer wrong, also tell him the correct answer.
The subject is your choice: English nouns and plurals, German/English, lovers (Romeo/Juliette, Heloise/Abelard, ..), countries/capitals, car model/make, ...
T 3/4 Just inlabs today -- if needed, get caught up on old Inlabs, projects The following is changed to Homework, due 3/11
    Computer-generated artwork -- if desired, work in groups of TWO
  1. Assume a 300 X 300 drawing surface. Do not use HTML5 canvas for this inlab.
  2. Create a random background of at least 10 colors. Upload to Inlab0304b.js
    (Note, javascript goes into an external js file)
  3. Create a random foreground of at most 10 colors. Upload to Inlab0304f.js
  4. Create a "driver" html file that will automatically load ( ) the background and the foreground from external javascript. Upload to Inlab0304.html
Coming up: Associative lists, object-orientation
R 2/20
  1. Beauty contest!
  2. Animation (more on timers)
T 2/18
  1. http://www.w3schools.com/js/js_timing.asp
  2. slideshow
  1. Quiz
  2. Inlab: make a slide show of 4 images controlled by Start, Stop button.
    --->Upload to Inlab0218.html
    3. Inlab Homework! (see below): Beauty contest: from square the green square , buttons across the top
    • row 1: modify color
    • row 2: add a second colored squares (total of 2 squares)
    • row 3: change positions of first square
    • row 4: From a precoded list of answers ('yes', 'no', 'maybe', 'take care', 'what could go wrong?'), add a "magic 8 ball" button and prediction
T 2/11
  • document.getElementById(), document.getElementsByName()
  • using input
  • innerHTML
Do inlab0211.txt Read in Javascript book about getting input from input elements
R 2/6 It's homework now! make it red, green or blue
T 2/4 CSS Positioning
Also http://alistapart.com/article/css-positioning-101		 explosion effect
R 1/29 Beginning CSS Give a comp sci professor some style See: here Read all CSS tutorial on w3schools
T 1/21 Formatting http://w3schools.com/html/html_formatting.asp
block and inline: http://w3schools.com/html/html_blocks.asp
Layout, using div and using table: http://w3schools.com/html/html_layout.asp
Introduction to DOM (HTML elements, the tree structure): http://w3schools.com/js/js_htmldom.asp		 Create an HTML page (using only HTML) that displays a 4 X 4 checkerboard using 16 divs
and displays a second 4X4 checkerboard using a 4 X 4 table
Upload this to your Inlab0121.html
Due at 1/23 class		 Read about forms http://w3schools.com/html/html_forms.asp and
the DOM http://w3schools.com/js/js_htmldom.asp
R 1/16 w3schools.com
Example from class		 Inlab0116.txt
T 1/14 w3schools.com/html
Inlab0114.txt Do the entire w3schools html tutorial
R 1/9 First part of w3schools.com/html
Initial HTML
HTML page developed in class: click here		 Inlab0109.txt Do the entire w3schools html tutorial


2. Assignments

Date given Due Assignment
4/15 4/17 Figure it out! Write a Java GUI app that gets the location of a mouse click and displays that location on the GUI.
3/25 3/27 Modify Jan Wolter's floodit to: Add an easy/hard level. Easy level adds 20% more (ceiling) allowed moves
Use highlighter to mark modified/added code
2/18 20 minutes after class starts
See the Inlab for 2/18.
  • Beauty is in the eye of the beholder, make it beautiful
  • Do the niftiest job on your part of the production possible
  • Everyone should make an 8-ball. Your team will pick the "most beautiful" for integration into the final page.
  • Coordinate everything (all parts of the Homework) during the beginning of class 2/20
  • The group will demo to the class, and each part will be described by the lead-artist/engineer for the part.
  • There are four categories: evening gown (color, row1), swim suit (add a square), talent show(change position), answer the question (8ball).
2/6 Before class on 2/11 Inlab0206.txt



3. Projects
Date given Date due Project Comment
3/13/2014 3/24 4/3 4/10 Project #5 Javascript fractals Koch
2/20/2014 3/13/2014 Project #4 - fire rescue game
Do not use HTML5 canvas
Projects turned in 3/18 can avoid late penalty by tracking software development metrics
    See HERE
2/11/2014 2/20/2014 Project #3 - marking a grid
1/23/2014 1/30/2014 Project #2 - duplicate this form
1/16/2014 1/23/2014 Project #1 - html page


4. Quizzes and Tests

5. General (Syllabus, Calendar, etc.)

6. Resources


Last changed: