Introduction to JavaScript Fall 2011

I recommend putting in place holder links for assignments so you know what how much text will be there when it's full. It's going to be full, right? Everyone is going to do ALL their homework?

Get the structure done first, then spice it up with some CSS3.

example

In-Class 2

Console Testing:

Due: 2011-09-13

Make some variables.

Preform some operations on those variables (addition, multiplication, concatenation)

Output those variables to the console at various points in the operations

In-Class 3

Conditional Code Testing:

Due: 2011-09-13

Take user input from a form field.

Compare that input to a variable

Display different output based on the condition

Feel good bonus: do it again with a switch statement

In-Class 4

events and functions:

Due: 2011-09-20

create an anchor tag and create an event handler for it's onClick event.

Have the event handler display the href of the ancohr somewhere on the page, and prevent the link from actually being followed.

Create an additional element (of your choice on the page) that changes it's appearance based on onMouseOver and onMouseOut events.

Assignments

40 points each

Assignment 1

Hello Javascript: dynamically creating markup

Due:2011-09-13

Make an HTML page that has no content.

Add a page title with javascript.

Including answers to the following questions with Javascript (I'd put them in a unordered list, but that's just me):

Your legal name (what I'll see on the class roster)
The name you prefer to be called (if you don't like your legal name, or if it's long or confusing for me)
Any prior programming classes or experience you have (remember, html/css is not programing
Any prior Web Development or Web Design experience you have
Are you here because you want to learn Javascript, or just because you needed this credit? (or a little bit of both?)

example

Assignment 2

Conditional Statements: Choose your own adventure

Due:2011-09-20

Create a webpage that displays some options to the user.

Use JavaScript to evaluate the user's selection and display additional content based on their selection

Give the user AT LEAST 3 opportunities to make a selection.

Every opportunity to select an option, must include AT LEAST two options to pick from.

I would do this one of two ways:

Make all the display elements with HTML and put in the default content.
On form submission, run the selected value through a switch statement
Have the switch statement overwrite the default values for the display elements based on what option was selected

OR

Look up how to show/hide elements with JavaScript
Make a div for each branch of the adventure
Hide each all divs except the first branch by default
Use the switch to hide all divs and show the appropriate one

example

Assignment 3

Functions, Events, and the DOM: Visually compelling experimental experience

Due:2011-09-27

Create a webpage with at least 5 (but up to as many as you want)

(also, I think using absolute positioning and z-index to overlap the elements on top of each-other will make this a cooler experience)

The elements could have images in them, or they could just be colored blocks on the page.

Have the elements respond to events by altering their appearance (or even the appearance of other elements on the page instead of their own)

Experiment with different DOM elements to see what visual effects you can create.

If moving elements around and manipulating their basic CSS properties isn't exciting enough, then go read up on CSS3 visual effects, transitions, and transforms. Have the events add additional classes to elements that implement some CSS3 eye candy or animation.

Useful links:

DOM properties and methods

adding and removing classes from an element

Projects

125 points each

Proposal due: 2011-09-27

Finished Project Due: 2011-10-18

Progressive Enhancement / Graceful Degradation

Build a fully functional website in HTML & CSS on a subject that you find interesting.

Any (classroom appropriate) subject you like. Games, Music, TV shows, Power tools, Stamps, Useless USB peripherals, etc.

You must either use original content, or provide written permission to use content you did not create.

When designing your webpage, think about how traditional HTML features that could be enhanced with javascript.

Where would it be a better experience to display additional content with out a page refresh?

Would a javascript image gallery improve usability?

If you're taken the php class, you could use javascript to verify form submissions before sending the request to your database.

Course Resources

Text Editors

Cross Platform

Aptana (free, built on top of eclipse)

For Windows

Notepad++ (free)
e TextEditor
SciTE (free and open source)

For OS X

TextWrangler (free)
jEdit (free and open source)
TextMate
Coda

Browser Tools

Tools for Firefox

Books

DOM Scripting: Web Design with JavaScript and the Document Object Model: this book is very gentle introduction to JavaScript that focus on practical examples of scripting websites.

Eloquent JavaScript: A Modern Introduction to Programming: this book (also available as a free eBook) goes into more detail about programming with JavaScript, and doesn't even touch DOM Scripting until the end. Some of it's DOM Scripting practices seem a bit out of date to me, still a great read though.

JavaScript: the Definitive Guide: this is THE JavaScript reference book in my opinion. It is thick, and dry. I wouldn't try and read it cover to cover until you're already comfortable with JavaScript and you want to poke though every nitty gritty detail.

Introduction to JavaScript Fall 2011

Contents

Class Schedule

Student portfolio sites

Contact the instructor

Course Deliverables

In-Class Work

In-Class 1

In-Class 2

In-Class 3

In-Class 4

Assignments

Assignment 1

Assignment 2

Assignment 3

Projects

Course Resources

Text Editors

Browser Tools

Books

eBooks

References and Tutorials

Web Development Toolbox

Tutor

Interesting JavaScript Websites

Suggested reading

Class 01 (2011-09-06): Introduction

Class 02 (2011-09-13): Programming Syntax and Concepts

Class 03 (2011-09-20): Functions and Events

Navigation menu

Search