Weeks 4 - 5

final projects

 final projects project descriptions

Final Project Teams

Logistics and Details of final projects

JavaScript review:

Basic form components (elements) -- A bit more detail on some form elements



Dynamic HTML and rewriting pages:

document.write and innerHTML and appendChild( )

The document object model

DOM Methods:

Comments on new developments:

Basic stuff:

Sensing mouse coordinates (cross browser) 
(see also http://www.quirksmode.org/js/events_mouse.html and http://www.quirksmode.org/js/events_properties.html )

Measuring the screen (or other content)

Assigning event listeners:

more on events

Introduction to XML (see here for ways to make this cross-browser)


Google data on HTML behavior (Firefox only, last I looked)


Assignment #2 (Monday, February 9th):  

in class example1, in class example 2,

Final projects (to be thinking about)

Academic rather than social considerations.

Final projects

In class Friday. Feb. 11th, come to class prepared to reveal a list of your top four projects (by both name and project number). I'll do my best to get you on projects near the top of your preference listing.

Some CSS tricks

changing position and color

Gradients (compare SVG version)


animated rotation Oops -- I didn't make this one webkit compatable yet

Some JavaScript worth knowing about:

Discerning the type of event and assigning listeners

XML - Introduction to XML

JavaScript coding guidelines (from Siemens)

more about events

Event handlers -- assigning dynamically using function(){}(and traversing nodes)

associative arrays

updating parts of pages from the server

AJAX -- anticipating what you are typing

Objects in JavaScript -- 

creating and deleting objects

using arrays to index objects

Appending and removing rows of a table (using createElement, appendChild and removeChild)

Objects and such -- constructors, methods, inheritance, anonymous functions, classes and instances.

Types of sequencing problems.

Events and the browser.

  1. How to reposition absolutely in either browser
  2. How to sense mouse coordinates
  3. Observe how mouse changes (), hence disabling "onmove".
  4. How to sense dragging (of say, a div)
  5. Sensing the size of a picture

Random music and some better random music

Beginning with SVG

The very basics

Some notes from the course I've been teaching for the W3C:

Week 1

Week 2

More adventurous stuff

A simple template with namespaces, script, tags, and DOM calls. A good place to start, perhaps for an SVG project.

A start on dragging in SVG

Assignment #3 - Friday February 20th

  1. Do "assignment 2" at the end of http://srufaculty.sru.edu/david.dailey/W3CCourse/First%20Week.html
  2. Using SVG accomplish the following:

Similar things in HTML:

Dragger1  Dragger2  Dragger3 Dragger4

maybe use background-image?