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
FALL 2013

Under Construction Through out Semester




Teaching assistant: Bharat Kumar: bkunchar at emich . edu

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 and Recordings
Date Topic InLab Other Reading/Homework
Wednesday 12/11 Quiz: see yesterday's quiz
Tuesday 12/10 Coding and catchup Quiz: Here
Mon 12/9 Coding and catchup Quiz: instructor's choice - take the w3schools javascript quiz
Tues 12/5 lecture is same as 12/2 Inlab same as 12/2, due 12/5 Quiz
Mon 12/2 concurrency:

      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

Inlab: DUE 12/4/2013
Write A Java app with two JPanels using threads.
In one JPanel, you display a tick every 100 ms.
In the other JPanel, you display a tick every 1000 ms.
quiz
Mon 11/25 & Tues 11/26 Swing timer examples: Timer0.java & Timer1.java
Demo day
Wed 11/20 & Thurs 11/21 Turn in hard copy at next class period --> Entirely lab work on Java GUI app. Help each other unreservedly.
See example JTextField demo TextFieldDemo.java
Inlab1120.txt
M 11/18 and T 11/19 Java GUI intro M, 11/18: sign-in sheet only
T, 11/19: Write a Java app that will draw a circle at a random location after you click a button.
No deadline for Java app
In class modified Circles.java: Circles2.java
W 11/13 & Th 11/14 TCP/IP
http
HTTP request methods
HTTP status codes
  • Write a simple form with one input text field and one button
    Enter data to the input field
    1. Watching the http stream with firebug: is there a difference between a form that does a get action and a post action? Why?
    2. Watch the http stream: is there a difference between a button that is a submit button versus not a submit button?
  • use ping what is the largest ping value you can obtain? Write URL and latency on whiteboard.
W 11/6
  1. Rewrite this html page to reduce the number of variables to two.
T 11/5, M 11/4
  • Play, analyze, FIX (adding appropriate images) Sikes Treasure Hunt Game
    In the lab, use Safari (not FF). (1) Add all pictures (2) Slow the sprite down.
  • Play, analyze, COMMENT showinfo(), setopt(), and readquery() at Wolter's Flood-it game
    Hint: notice the address buffer
    Safari or FF; give at least 8 lines of documentation that MAKE SENSE.
Th 10/31 + W 10/30 Beginning Object Orientation
  1. Create an object that has an English word and its plural ('ox', 'oxen').
    Create 'toString', 'getter' and 'setter' methods
  2. Use your object to create a 'flashcard' set of at least 5 objects
  3. Now, write a page that will step through the 'flashcards', displaying one word at a time, and the user has to give the plural
  4. Keep track of the number of correct answers, and give that number after the user has gone through all cards.
  5. Demo the flashcard set, and also demo adding a new card to the set (in real time)
Late submission is ok.
remember to talk about random select without replacement
M 10/28, T 10/29
  1. Using a timer to make a slide show, pre-load images
  2. event handler pseudo code using setTimeOut (not setInterval) on board
  3. using wrap-around on board
    Inlab:
  • Write a slide show
  • Step through 3-5 images, displaying each image for 2 seconds.
  • Make a Start and Stop buttons to start and stop the slide show by controlling a timer.
  • Put images (either just src or use Image object) in an array and step through the array.
  • Use setTimeout (not setInterval)
Objects coming up!
Thurs 10/24 Want some JS syntax help? See:
jslint.com, jshint.com,
jslint errors explained

see escape and unescape
Set Cookies, Get Cookies
cookieLib.js
Inlab: Create a page that (1) reports the value of the cookie num, then accepts a number from the user, then (2) saves it to the cookie named num Read about cookies, JS book section 20.2
Mon 10/21 RegExp quiz EMAIL to shaynes & bkunchar
Beginning animation -- timers
No additional inlab today Read about timers
Wednesday 10/16, 17 Javascript: Objects built-in - overview
Regular Expressions see here
Inlab: Write and exercise a regular expression to test input (from a form) for correctness
    upload to Inlab1016.html
  • legal alien gender (see project 1)
  • Entered a string of 3 chars where each char can be 'r' or 'w' or 'x'
  • Entered a legal Canadian postal code
Read Javascript book: Objects chapter 6, Regular Expressions chapter 10
Thurs 10/10 Javascript: find the min; Javascript: associative arrays First,create an associative array for the first 5 elements in the periodic table: the key is the symbol (H, He, Li, Be, B), the value is the name of the element.
Then, ask the user, using a prompt box, to enter a chemical symbol, then give the user (using alert box), the chemical name (save to Inlab1009.html)
Read Javascript book:
4.1 - 4.6 (associative array),
Chpt 15 (especially 15.9, Forms)
Wed, 10/9 Javascript: find the min; Javascript: associative arrays #1.Answer can an associative array be used as an indexed array IN THE SAME SCOPE? (save source to Inlab1009horses.html
#2.First,create an associative array for the first 5 elements in the periodic table: the key is the symbol (H, He, Li, Be, B), the value is the name of the element.
Then, ask the user, using a prompt box, to enter a chemical symbol, then give the user (using alert box), the chemical name (save to Inlab1009.html)
Read Javascript book:
4.1 - 4.6 (associative array),
Chpt 15 (especially 15.9, Forms)
Tuesday, 10/8 dodge em - onMouseOver
painting: building strings, building id's
    Three small images, onMouseover:
  • change position of image to alternate position using hidden
  • change position of image to alternate position two images: man and a blank (color of background).
  • change position of image using top and left
Cannibalize to do the Inlab listed for 10/3
Mon, 10/7 Global vs local; function parameters and return; document.write
w3schools JS on HTML DOM , w3schools JS on CSS , w3schools JS DOM events
dodge em - onMouseOver
painting: building strings, building id's
Cannibalize to do the Inlab listed for 10/3
10/3 Scope of variables, use of var, defining functions and using parameters
w3schools JS on HTML DOM
w3schools JS on CSS
w3schools JS DOM events
Make a page, styled with INTERNAL style sheet.
Background is green, font color is red.
There is a quote, e.g., "For the strength of the pack is the wolf, and the strength of the wolf is the pack."
    Four buttons (<button>) labelled appropriately
  • Clicking the first causes background color to be green,
  • the second causes background color to white,
  • the third causes text color to be red,
  • the fourth causes text color to be black.
Mousing over the quote causes the quote to change to the author of the quote (e.g., Kipling)
10/2 Extend Lecture/0930a.html so there are TWO buttons. One makes a m X n 'numbered array (as already shown). The second button makes an m X n array where every element is a picture size 20 X 20
9/30 Extend Inlab/0930.html to work with three buttons and three images.
9/25 Breather: complete inlabs, work on projects see "quiz" below Read Javascript book:
chpts 1, 2, 3.1-3.5, 4.7-4.12, 5.1-5.7
9/24 CSS - Advanced: grouping through float
Intro to Javascript: getElementById() and innerHTML
Intro to Javascript: <script>,
See HERE for example.
Make an HTML/CSS with two images. Use Javascript.
When the left image is clicked, display that image below the original two (centered).
When the right image is clicked, display that image below the original two (centered).
At most three images are displayed.
Upload to 231/Inlab0924.html
Read the first chapter of the Javascript book
9/18 w3schools:
HTML quiz, CSS quiz
CSS basics (very fast)
CSS box model
Create a Mondrian-style piece of art of at least 6 blocks of color using CSS and HTML

Upload to your 231/Inlab0918.html
 
Look for next week's InLab to be HTML quiz and CSS quiz w3schools CSS tutorial Advanced through Positioning
9/16 Old school html (deprecated)
Introduction to CSS
See external style sheet for this page; at least 5 elements!
w3schools tutorial on CSS
Inlab: (1)Save to Inlab0916evett.html and Inlab0916evett.css   -   Design and implement an external style sheet for Dr Evett
(2) Add CSS style, either inline OR in the header, to your own index.html page You must style at least 3 elements or tags of your home page.
w3schools tutorial on CSS
Review html: div and span
9/11, 12 Introduction to HTML DOM
w3schools DOM example
w3schools definition of DOM
w3schools DOM tree: node types, parent, children, siblings
    do the following:
  • Sketch the DOM, labeling node types, for this document and for this one
  • Demo your HW from last class
Start the w3schools tutorial on HTML5
9/8 HTML elements
HTML character entities
color
    Create HTML file as close as possible to original. Save in your 231 directory under the names Inlab0908.html and Inlab0909.html:
  1. Inlab0908
  2. Inlab0909
Read through all the w3schools tutorial on HTML.
Create a page named HW0909.html that makes use of at least 10 HTML tags
9/4, 5 Course overview
Intro HTML at w3 schools
(1) Create homepage locally, include: name, a picture, a non-working link labelled "231"
(2) Publish homepage to emich webspace, make the 231 link a working link
You must follow Style Standards (see below),
and use a header that provides your name, COSC 231, FA13
Go through the w3schools HTML tutorial through


2. Assignments

Date Distributed Date Due Topic/Link Comment
9/8,9 See 9/8,9 on Lecture table



3. Projects
Date Distributed Date Due Topic/Link Comment
12/6 12/13 5pm Sierpinski
10/25 change of date: 11/22
(old date: 11/15, 5pm)(email URL)
'Mark it' game Extra credit available for enhancements that improve the game playing experience
10/8 10/25 5pm Painting web app
9/18 9/27 Give a new look using HTML and CSS to michigannutgrowers.org
9/11,12 9/27 SpaceAlien/Human Dating Site


4. Quizzes and Tests

5. General (Syllabus, Calendar, etc.)

6. Resources


Last changed: