Web Design II

Lecture 5: Document Object and Events

For the lecture will be talking about the document object model (DOM), and looking deeper at object oriented programming (OOP) and how to use JavaScript to interact with the DOM tree. We will also be covering events that can trigger code, i.e. on click, on load, on keypress, etc. We will look at some sample javascript-based games, as we begin to explore our mid term work.

Practice 3 Assignment

Create an object constructor, for student date. Define your own name + value pairs (properties), and include one method (a function inside an object). Then using oyur new object constructor, create a new object. Iterate through that object in the console using the "for" function.

Home Work

For our midterm we will be programming a simple game or interactive visual art piece. Your midterm assignment should:

  • Be a fully developed concept, that also demonstrates visual competence, and an understanding of user interaction design
  • Demonstrate an appropriate competence of Javascript skills learned to date
  • Include at least 3 forms of data inputs, that change the direction/logic sequences that are being performed in your application
For next week, design the static version of your midterm using some form of prototyping format (some combination of Illustrator, Photoshop, Sketchup, wireframes, written use cases, etc..)

Resources

Here is the code from this week's lecture (I have heavily commented the code to further illustrate the concepts and ideas discussed):

Here are some tutorials and resources for Canvas:

And here are some of the events/tech spaces I mentioned this week:

If our artists are not versed in technology, who will imagine what we can become, who will ask what we should not be?