Course Outlines

University of Winnipeg Continuing Education

DIT 16001 Internet Systems Specialist Diploma: DHTML

JavaScript: Visual QuickStart Guide, Eighth Edition
By: Tom Negrino; Dori Smith
Publisher: Peachpit Press
Pub. Date: July 27, 2011
Print ISBN-13: 978-0-321-77297-8

Learning Outcomes

• Demonstrate a working knowledge of client-side JavaScript, including core programming practices, constructs, and syntax
• Debug JavaScript and apply common scripting techniques
• Describe the Document Object Model (DOM)
• Develop basic web pages with interactive content
• Use programming variables and functions
• Make programmatic decisions based on user input
• Use JavaScript to create and validate forms
• Apply CSS positioning techniques and other advanced CSS
• Combine these skills to make CSS and JavaScript work together
• Describe the differences between web browsers and how they use different DOMs
• Practice more advanced DHTML techniques and make them cross-browser compatible

Prerequisites

The following may be required before taking this course:

• ISSD Web Project Management
• ISSD Photoshop
• ISSD Web Design Principles
• ISSD Unix
• ISSD XHTML
• ISSD Introduction to Programming
• Computer and Internet access at home

Course Format

This course follows a lecture format. During class time, we will present material, draw your attention to key points that you should pay attention to, answer questions you may have, and manage class discussions, demonstrations, and hands-on exercises.

There are often daily quizzes or assignments. It is the responsibility of the student to be on time and to get copies of any assignments missed due to absence. Missed quizzes cannot be made up later.

Students are strongly advised to use the reference material. For every hour of class time the student should budget at least two hours of self study to cover all the material in this course.

Only material that is covered in class lectures will be testable.

Student Deliverables and Pace

Here is an example of the pace the material might be covered. Your instructor may modify this to suit the needs of your class.

Class 1

The class should cover these topics:
Introduction to Programming Fundamentals [not in online notes]
DHTML Overview - Lecture 1 to Javascript - An Introduction - Lecture 5.

Class 2

There are no student deliverables due this class.
The class should cover these topics:
Programming Fundamentals - Lecture 1 to Programming Fundamentals - Lecture 4.

Class 3

The class should cover these topics:
Programming Fundamentals - Lecture 5 to Programming Fundamentals - Lecture 7.

Class 4

Assignment 1 [Password Required] will be given.
Assignment 2 [Password Required] will be given.
Quiz 1 given at start of class.
The class should cover these topics:
Programming Fundamentals - Lecture 7 to Using JavaScript - Lecture 1.

Class 5

Quiz 2 given at start of class.
The class should cover these topics:
Using JavaScript - Lecture 1 to Using JavaScript - Lecture 2.

Class 6

Assignment 1 is due at start of class.
Assignment 2 is due at start of class.
DHTML project rubric introduced
The class should cover these topics:
Using JavaScript - Lecture 2 to lecture 3.

Class 7

Quiz 3 given at start of class.
Assignment 3 [Password Required] will be given.
The class should cover these topics:
Using JavaScript - Lecture 6.

Class 8

Quiz 4 given at start of class.
Assignment 3 is due at start of class.
The class should cover these topics:
Troubleshooting JavaScript to Introduction to CSS.

Class 9

Quiz 5 given at start of class.
The class should cover these topics:
Advanced CSS to DHTML Techniques.

Class 10

Final test given at end of class.

Final Project

The final project must be submitted via email to your instructor no later than noon the first Sunday following the last class.

Final Test

The final test will be given after an hour of class time on the last day of the course. You will have 2 hours to complete the test. This test will be a "closed book" test, meaning that no reference materials, including notes will be allowed.

Evaluation

For the entire block, the break down of marks will be as follows:

Quizzes: 20%

There may be daily quizzes, which will be added up and scaled for the overall mark percentage. Typical quizzes are worth 5 to 20 marks. Most days will have a quiz or two, usually first thing in the morning. Missed quizzes can not be made up.

Assignments: 20%

The assignments will be added up and scaled for the overall mark percentage.

Final Project: 30%

The final project will be due near the end of the course and is scaled for the overall mark percentage.

Final Test: 30%

The final exam will be given near the end of the course and is scaled for the overall mark percentage.

Topic Outline

• Home (Lecture Topics) Page
  • DHTML Overview
    • Lectures:
      1. What is DHTML?
      2. Applications of DHTML
      3. Why Use DHTML?
    • Links
    • Review Questions
  • JavaScript - An Introduction
    • Lectures:
      1. What is JavaScript?
      2. The Document Object Model (DOM)
      3. JavaScript Tools
      4. Where to Put JavaScript
      5. Accessibility
    • Links
    • Review Questions
  • JavaScript Programming Fundamentals
    • Lectures:
      1. Commenting Your Code
      2. Object Oriented Programming
         • Example: Window closing
         • Example: Window closing (with onmouseover)
      3. Your First Scripts
         • Example: document.write() "Hello World"
         • Example: Annoying use of JavaScript
      4. Variables
      5. Strings
         • Example: Concatenation 1
         • Example: Concatenation 2 (with line breaks)
         • Example: Getting information (with prompt())
         • Example: Searching a string
         • Example: Extracting part of a string
      6. Operators and Assignments
      7. Interactivity
         • Example: Logical condition script
         • Example: Interactive script
         • Example: For loop
         • Example: break
         • Example: continue
      8. Functions
         • Example: Passing values to a function
         • Example: Returning a value from a function
      9. Arrays
         • Example: Displaying the contents of an array with a for loop
         • Example: Parallel arrays
    • Links
    • Review Questions
  • Using JavaScript
    • Lectures:
      1. Browser Re-direction and Detection
         1. Example: JavaScript browser detection
      2. JavaScript and Images
         • Example: An image swap with an onmouseover event handler
         • Example: Multiple swapping images
         • Example: Changing an image using the internal images array
      3. JavaScript and Windows
         • Example: Communication between windows
         • Example: Scrolling a window with JavaScript
      4. More Really Neat Trickery
         • Example: Outputting a formatted date with the Date() object
         • Example: Properly formatted time
      5. JavaScript and Forms
         • Example: Script to check if form fields are filled out
         • Example: Script to check if certain required form fields are filled out
         • Example: Forms that calculate
         • Example: A form-based navigation control
      6. Cookies
         • Example: Setting a cookie
         • Example: Reading a cooke (view previous example before trying this one)
         • Example: Setting a cookie with an expiry date
         • Example: Saving complicated information to a cookie
         • Example: Reasing complicated information from a cookie
    • Links
    • Review Questions
  • Troubleshooting JavaScript
    • Lectures:
      1. Troubleshooting Overview
      2. Common Error Messages
      3. Things To Watch For
      4. Using Alert Boxes
      5. Using A Script Debugger
    • Links
    • Review Questions
  • Introduction to CSS
    • Lectures:
      1. CSS Basics
      2. Integrating CSS with XHTML
      3. Selectors and Structure
      4. Units and Values
    • Links
    • Review Questions
  • Advanced CSS
    • Lectures:
      1. CSS and Positioning
         • Example: Absolute positioning
         • Example: Using classes for positioning (why you shouldn't do this)
         • Example: A relatively placed object nested in an absolutely placed object
         • Example: An absolutely positioned object nested in a relatively positioned one
         • Example: Stacked layers
      2. Visibility of Objects
      • Example: visibility: hidden
      3. Special Effects
    • Links
    • Review Questions
  • Introduction To DHTML
    • Lectures:
      1. Combining Javascript and CSS
      2. Working With Objects
      • Example: Accessing an object (Standard DOM browsers)
      • Example: Accessing an object (Netscape 4 only)
      • Example: Accessing an object (IE4 all DOM)
      3. Feature Sniffing - Advanced Browser Detection
         • Example: Detecting a browser by its DOM
      4. Changing Content and Accessing HTML Tags
      5. Getting Information
         • Example: Getting the brower's live area
    • Links
    • Review Questions
  • DHTML Techniques
    • Lectures:
      1. Pop Up Menus
         • Example: Setting up the page for the pop-up menus
         • Example: Hiding the menus
         • Example: Semi-completed menus
         • Example: Working menus
         • Example: Advanced menu features
      2. Animating a Layer
         • Example: Setting up the page for animation
         • Example: Finished animation
         • Example: Finished animation with the object positioned anywhere on the page
    • Links
    • Review Questions

Grades:

Letter Graded Courses:

A+ =    96 - 100% Outstanding
A  =    91 -  95%
A- =    83 -  90% Very Good
B+ =    75 -  82%
B  =    70 -  74% Average
C+ =    66 -  69%
C  =    57 -  65% Pass
D  =    50 -  56%
F  =    Failure
VW =    Voluntary Withdrawal

Pass/Fail Courses:

P  =    Pass
F  =    Failure
I  =    Incomplete
VW =    Voluntary Withdrawal

Audited Courses:

CP  =   Certificate of Participation (based on >75% attendance)
NCP =   No Certificate of Participation (based on <75% attendance)

Note: Final percentages containing a half-point will be rounded up to the next full point (e.g., 69.5 would be rounded up to 70), and then converted to the letter grade (i.e., from C+ to B).

Late Assignments

Unless otherwise stated, late assignments are penalized 10% per calendar day. No assignments will be accepted more than 2 days late without permission.

Quizzes

Quizzes may be given during classes and could be time limited. They may be fill in the blank, short answer, code, or multiple choice and may be given online, verbally, or on paper. Missed quizzes cannot be made up if absent or if you are late for class.

Attendance

While class attendance may not be taken for marks, your attendance is required for each class to participate in quizzes, homework, and assignments.

Considerations

Please consider turning off any cell phones and pagers while in lectures or seminars. If you need to be available (on call for work, for example) please set your cell/pager to vibrate. Also, please remember that checking email, typing instant messages, or surfing the Web may be distracting to others.

A Statement on Plagiarism and Cheating

The Modern Language Association Handbook for Writers of Research Papers defines plagiarism as:

the act of using another person's ideas or expressions in your writing without acknowledging the source.

Copying words or ideas from any source, including another student, constitutes academic 'theft', and may result in loss of marks for the assignment, loss of marks for the entire course, or even expulsion. The same penalties will result if a student is found guilty of cheating or contributing to cheating on any test, exam or assignment.

Students should familiarize themselves with University of Winnipeg policy concerning plagiarism and academic honesty.

Other Plagiarism Resources

• uwinnipeg.ca
• keele.ac.uk
• umanitoba.ca
• bucknell.edu

More Information

Here are links to more information that you may find helpful:

Winnipeg Transit

The Winnipeg Transit site includes links for fares, the free Downtown Spirit service, schedules and more.

Exchange District BIZ

The Winnipeg Exchange District BIZ site has maps and information about the area around our campus.

Downtown Winnipeg BIZ

The Downtown Winnipeg BIZ site includes links for parking, restaurants, and the BIZ Patrol.

Notice

The contents of this page are given as a guideline only and are subject to change.