Web Design II

Lecture 4: Javascript Objects, Functions and OOP

In this class, we will start to get into using Javascript as a more traditional programming language, learning to use Javascript objects, and their related properties, and methods, and provide an introduction to the concept of object oriented programming (OOP). Finally we will look at using Javascript with HTML5 Canvas.

In Class Assignment 1

Begin to develop the coding skill of "teaching yourself". Use the resources below to identify a canvas shape or element that you would like to create and apply this to your own code. Using the HTML 5 canvas example that was looked at today in class as a starting point (don't just copy), draw shapes to the canvas to create some visually appealing look.

In Class Assignment 2

Create an object, with multiple parameters and at least one method. Have the method call one of the parameters, and using an alert or some other approach, call the method in order to display the value of the parameter.

Resources

Suggested Reading

• Chapter 1B in "Javascript and JQuery"
• Chapter 3 in "Javascript and JQuery"

Here are some code examples we worked through today:

• Object Example
• Canvas Example

• Intro to Parameters
• Switch (Case) in Javascript

Here are some tutorials and resources for Canvas:

• 9 Mind-Blowing Canvas Demos
• HTML 5 Canvas Tutorials
• Basic Use of Canvas
• HTML 5 Canvas (scroll down to the HTML 5 canvas examples)

Here are some tutorials for Object Oriented Javascript (don't stress,just absorb)

• Object Oriented Javascript for Beginners
• Object Oriented Programming in Javascript