College JavaScript Curriculum: Levels 1 and 2

Friday September 2, 2011 Freebies In the Classroom

Semester 1

Course name: DOM Scripting 1 (or JavaScript 1)

Course overview:  In this introduction course students learn the fundamentals of working with the behavior layer on the web using JavaScript.  Students will learn basic programming, the principals of unobtrusive and cross browser scripting, how to navigate and manipulate the DOM, and how to use JavaScript libraries to improve development.  Requirements: CA272.

Required Reading: Scriptin with JavaScript from New Riders

Course Outline:

  1. What is JavaScript
    1. Characteristics of the language
    2. Examples of what it can do
    3. How to add to web pages
    4. Hello World 
    5. Error testing
  2. Variables and Arrays
    1. What is a variable?
    2. Types of variables (loosely v. strictly typed)
    3. Converting between variable types
    4. What are arrays?
    5. Types of arrays
  3. Objects and Functions
    1. What is an object?
    2. How to create objects  
    3. What is a function?
    4. How to write and call a function
    5. Passing parameters to functions
    6. Attaching functions to objects (methods) 
  4. Conditionals and Loops
    1. If, else, else if
    2. While loop
    3. For loop
    4. Less common loops: for in, try catch, throw
    5. Looping through arrays
  5. The DOM
    1. What is the DOM?
    2. Understanding how to navigate the DOM
    3. Native JS ability to get elements in the DOM 
  6. Midterm - Write a form validation function
  7. jQuery Selectors
    1. What is jQuery?
    2. How to select elements in the DOM with jQuery
  8. Events
    1. Types of events on a web page
    2. Native JS ways to act on events
    3. jQuery way to work with events
  9. Manipulating the DOM
    1. What is possible to change in the DOM?
    2. Examples of DOM manipulation
    3. How to manipulate the DOM
  10. Timing
    1. Native setTimeOut() function
    2. jQuery delay 
  11. Animation
    1. Discussion of good v. bad animations
    2. jQuery animate() function
    3. jQuery animation effects
  12. Cookies
    1. What is a cookie
    2. How to use cookies
    3. jQuery cookie plugin 
  13. Regular Expressions
    1. What is a regx?
    2. Syntax for writing regular expressions
    3. Email validation example
  14. In depth project
    1. Either form validation
    2. Or slideshow
  15. Final

Semester 2

Course name: DOM Scripting 2 (or JavaScript 2)

Course overview:  In this advanced course students learn the how to build Rich Internet Application using JavaScript and jQuery.  Students will learn principals of interaction design, best practices for programming JavaScript, and how to use effectively use AJAX in an application.  Requirements: CA272 and CA276.

Required Reading: jQuery: Novice to Ninja from Sitepoint

Course Outline:

  1. Rich Internet Applications
    1. What are RIA?
    2. The role of JavaScript in RIA
    3. Examples of RIA 
    4. What happens with no JavaScript?
  2. JavaScript Review
    1. Cover the basics of the langauge
    2. Review of events in JavaScript
    3. Brief review of important principals from JS1
  3. jQuery Review
    1. Comparison with other JS Libraries
    2. Selecting elements
    3. jQuery events
  4. Interaction Design (ID)
    1. What is ID?
    2. Important principals
    3. Good and bad examples
  5. Designing a User Interface Project
    1. Overview of the demo application
    2. Plan behaviors for design of the application interface
    3. Cover necessary logic and functionality for planned behaviors
  6. Midterm - Create an interactive web application interface
  7. jQuery Plugins
    1. What is a plugin?
    2. How do they work
    3. How to build a plugin
  8. jQuery Plugins continued
    1. Types of jQuery plugins
    2. Practice implementing  
  9. jQuery UI Library
    1. What is the UI Library
    2. How to add it your site
    3. How to customize library elements
  10. Extending the User Interface Project with jQuery Plugins
    1. Plan behaviors
    2. Discuss how to implement necessary plugins
  11. AJAX
    1. What is AJAX
    2. AJAX with native JS
    3. AJAX with jQuery
  12. AJAX continued
    1. AJAX load
    2. AJAX get
    3. AJAX callbacks
  13. Server side programming
    1. What is it?
    2. Cover basics needed to get AJAX working
    3. Talking to the server side
    4. Listening to the server side
  14. JSON v. XML
    1. What is JSON
    2. What is XML
    3. JSON v. XML
    4. How to parse JSON 
  15. Extending the User Interface Project with AJAX
    1. Discuss how AJAX can improve the interface
    2. Plan behaviors
    3. Cover necessary logic and functionality
  16.  Final - Submit final interface projects