Introduction to JavaScript Fall 2011
Contents
Class Schedule
- Class 01 (2011-09-06): Introduction
- Class 02 (2011-09-13): Programming Syntax and Concepts
- Class 03 (2011-09-20): Functions and Events
- Class 04 (2011-09-27): Objects, Arrays, & Loops
- Class 05 (2011-10-04): More DOM Scripting
- Class 06 (2011-10-11): Libraries, jQuery
- Class 07 (2011-10-18): Project 1 Critique
- Class 08 (2011-10-25): Midterm Exam
- Class 09 (2011-11-01): AJAX and JSON
- Class 10 (2011-11-08): Client Storage, HTML5 APIs
- Class 11 (2011-11-15): Object Oriented Programming
- Class 12 (2011-11-22): Scripting the Canvas
- Class 13 (2011-11-29): Performance Optimization
- Class 14 (2011-12-06): Project 2 Critique
- Class 15 (2011-12-13): Final Exam
Student portfolio sites
http://iam.colum.edu/students/Daniel.Barness/javascript/ http://iam.colum.edu/students/Quincy.Bingham/javascript/ [1] [2] [] [] [] [] [] [] [] [] [] [] []
Contact the instructor
Course Deliverables
In-Class Work
10 points each
In-Class 1
Course Portfolio Site:
Due: 2011-09-06
Make a new folder in you pub folder called javascript.
Make a default.htm or index.htm file in that folder.
With that htm file, make a simple one page website in HTML5 to list all of your work for this class.
I should be able to find your portfolio by going to:
http://iam.colum.edu/students/your.login/javascript/
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.
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
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?)
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
Projects
125 points each
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.
eBooks
References and Tutorials
- W3Schools JavaScript reference
- Mozilla JavaScript reference
- Dive Into HTML5 (an online book about HTML5)
- (online videos of JavaScript lectures)
Web Development Toolbox
Tutor
Which tutors know some JavaScript?
Interesting JavaScript Websites
Suggested reading
Class 01 (2011-09-06): Introduction
Class 02 (2011-09-13): Programming Syntax and Concepts
- DOM Scripting: Chapter 2
- Eloquent JavaScript: Chapter 1
- the Definitive Guide: Chapters 2, 3, 4, & 5.4
- jQuery Fundamentals: JavaScript Basics, everything between 'Overview' and 'Loops'