Course Outline

School: Eng. Tech. & Applied Science

Department: Information and Communication

Engineering Technology (ICET)

Course Title: Client-Side Web Development

Course Code: COMP 125

Course Hours/Credits: 56

Prerequisites: COMP 100, COMP 213

Co-requisites: N/A

Eligible for Prior Learning, Yes

Assessment and Recognition:

Originated by: Joanne Filotti

Creation Date: Summer 2015

Current Semester: Winter 2019

Approved by:

Chairperson/Dean

Students are expected to review and understand all areas of the course outline.

Retain this course outline for future transfer credit applications. A fee may be charged for
additional copies.

This course outline is available in alternative formats upon request.

COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

Acknowledgement of Traditional Lands

Centennial is proud to be a part of a rich history of education in this province and in this city. We
acknowledge that we are on the treaty lands and territory of the Mississaugas of the Credit First Nation
and pay tribute to their legacy and the legacy of all First Peoples of Canada, as we strengthen ties with
the communities we serve and build the future through learning and through our graduates. Today the
traditional meeting place of Toronto is still home to many Indigenous People from across Turtle Island and
we are grateful to have the opportunity to work in the communities that have grown in the treaty lands of
the Mississaugas. We acknowledge that we are all treaty people and accept our responsibility to honor all
our relations.

Course Description
Client-Side Web Development is the second course in a sequence of courses (COMP213, COMP125,
COMP229, and a range of
elective advanced web courses) designed to teach students all the important current concepts and
technologies related to developing powerful Internet applications.
In this course the student will learn how to use both basic JavaScript syntax and its more advanced
features like OOP, DOM, touch and mobile interfaces, Ajax, jQuery to build professional quality web
applications.

Program Outcomes
Successful completion of this and other courses in the program culminates in the achievement of the
Vocational Learning Outcomes (program outcomes) set by the Ministry of Advanced Education and Skills
Development in the Program Standard. The VLOs express the learning a student must reliably
demonstrate before graduation. To ensure a meaningful learning experience and to better understand
how this course and program prepare graduates for success, students are encouraged to review the
Program Standard by visiting http://www.tcu.gov.on.ca/pepg/audiences/colleges/progstan/. For
apprenticeship-based programs, visit http://www.collegeoftrades.ca/training-standards.

Course Learning Outcomes

The student will reliably demonstrate the ability to:
1. Use JavaScript with HTML elements
2. Work with JavaScript variables, data types and operators
3. Create and use JavaScript functions
4. Trace and debug errors in JavaScript programs
5. Control the browser and current document through the BOM and DOM
6. Perform validation and other preprocessing before form data is sent to the server
7. Use OOP techniques in JavaScript
8. Manipulate data with strings and arrays
9. Implement state information with hidden form fields, query strings, cookies, and Web Storage
10. Incorporate touchscreen support and mobile capabilities in web applications
11. Update dynamically web applications using Ajax
12. Use the jQuery library to build web applications

THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 2

COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

Essential Employability Skills (EES)

The student will reliably demonstrate the ability to*:
1. Communicate clearly, concisely and correctly in the written, spoken, and visual form that fulfills the
purpose and meets the needs of the audience.
2. Respond to written, spoken, or visual messages in a manner that ensures effective
communication.
4. Apply a systematic approach to solve problems.
5. Use a variety of thinking skills to anticipate and solve problems.
7. Analyze, evaluate, and apply relevant information from a variety of sources.
10. Manage the use of time and other resources to complete projects.
*There are 11 Essential Employability Skills outcomes as per the Ministry Program Standard. Of these 11 outcomes, the following will be
assessed in this course.

Global Citizenship and Equity (GC&E) Outcomes

The student will reliably demonstrate the ability to*:
2. Identify beliefs, values and behaviours that form individual and community identities and the basis
for respectful relationships.
*There are 6 institutional Global Citizenship & Equity outcomes. Of these 6 outcomes, the following will be assessed in this course.

Methods of Instruction
Lecture,
demonstrations and
hands-on exercises,
class discussions

Text and other Instructional/Learning Materials

Text Book(s):
Vodkin, S. 2015. JavaScript: The Web Warrior Series, Sixth Edition
Cengage Learning
ISBN-10: 1-305-07844-6
ISBN-13: 978-1-305-07844-4
Online Resource(s):
Course website

Classroom and Equipment Requirements

Major Browsers (current version)
Code-based HTML Editor
Web Server

Evaluation Scheme
➮ Assignment 1: Build a web page that uses JavaScript functions
➮ Assignment 2: Build a web page that uses JavaScript arrays to store and process information

THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 3

COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

➮ Assignment 3: Build a web page that uses the DOM/BOM to modify programmatically the loaded
document
➮ Assignment 4: Build a webpage that uses JavaScript and OOP to validate a form
➮ Assignment 5: Create a web page that incorporates APIs and Ajax features.
➮ Assignment 6: Create a web page that implements a 2D game and uses the canvas element, web
storage, touch screen support.
➮ Test 1: Comprehensive evaluation of knowledge about JavaScript core features, variables,
functions, arrays, OOP features and DOM
➮ Test 2: Comprehensive evaluation of knowledge about JavaScript form validation, OOP,security,
mobile device support, Ajax and jQuery features
Evaluation Name CLO(s) EES GCE Weight/100
Outcome(s) Outcome(s)
Assignment 1 1, 2, 3 1, 4, 5, 10 10
Assignment 2 1, 2, 3, 4, 8 1, 4, 5, 10 10
Assignment 3 1, 2, 3, 4, 5 1, 4, 5, 10 10
Assignment 4 1, 2, 3, 4, 6, 1, 2, 4, 5, 2 10
7, 8 10
Assignment 5 1, 2, 3, 4, 5, 1, 4, 5, 7 10
6, 7, 8, 11
Assignment 6 1, 2, 3, 4, 5, 1, 2, 4, 5, 10
7, 8, 9, 10 10
Test 1 1, 2, 3, 4, 5, 7 1, 2, 4, 5 20
Test 2 6, 7, 8, 9, 10, 1, 2, 4, 5 20
11, 12
Total 100%
If students are unable to write a test they should immediately contact their professor or program Chair for
advice. In exceptional and well documented circumstances (e.g. unforeseen family problems, serious
illness, or death of a close family member), students may be able to write a make-up test.

All submitted work may be reviewed for authenticity and originality utilizing Turnitin®. Students who do not
wish to have their work submitted to Turnitin® must, by the end of the second week of class,
communicate this in writing to the instructor and make mutually agreeable alternate arrangements.

When writing tests, students must be able to produce official College photo identification or they may be
refused the right to take the test or test results will be void.

Student Accommodation
Students with permanent or temporary accommodations who require academic accommodations are
encouraged to register with the Centre for Students with Disabilities (CSD) located at Ashtonbee (L1-04),
Progress (C1-03), Morningside (Rm 190), and Story Arts Campus (Rm 284). Documentation outlining the
functional limitations of a disability is required; however, interim accommodations pending receipt of
documentation may be possible. This service is free and confidential. For more information, please email
csd@centennialcollege.ca.

Use of Dictionaries

THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 4

COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

• Any dictionary (hard copy or electronic) may be used in regular class work.
• Dictionaries may be used in tests and examinations, or in portions of tests and examinations, as long
as they are non-electronic (not capable of storing information) and hard copy (reviewed by the
invigilator to ensure notes are not incorporated that would affect test or examination integrity).

Program or School Policies

N/A

Course Policies
A student must obtain a passing grade on the term test portion of the course in order to pass this course
(i.e. a minimum of 25% out of 50%)

College Policies
Students should familiarize themselves with all College Policies that cover academic matters and student
conduct.

All students and employees have the right to study and work in an environment that is free from
discrimination and harassment and promotes respect and equity. Centennial policies ensure all incidents
of harassment, discrimination, bullying and violence will be addressed and responded to accordingly.

Academic honesty is integral to the learning process and a necessary ingredient of academic integrity.
Academic dishonesty includes cheating, plagiarism, and impersonation. All of these occur when the work
of others is presented by a student as their own and/or without citing sources of information. Breaches of
academic honesty may result in a failing grade on the assignment/course, suspension or expulsion from
the college.

For more information on these and other policies, please visit www.centennialcollege.ca/about-
centennial/college-overview/college-policies.

Students enrolled in a joint or collaborative program are subject to the partner institution's academic
policies.

PLAR Process
This course is eligible for Prior Learning Assessment and Recognition (PLAR). PLAR is a process by
which course credit may be granted for past learning acquired through work or other life experiences. The
PLAR process involves completing an assessment (portfolio, test, assignment, etc.) that reliably
demonstrates achievement of the course learning outcomes. Contact the academic school to obtain
information on the PLAR process and the required assessment.

This course outline and its associated weekly topical(s) may not be reproduced, in whole or in
part, without the prior permission of Centennial College.

THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 5

COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

Semester: Winter 2019 Professor Name: Blessing Ajiboye

Section Code: Sec-006 Contact Information: bajiboy1@centennialcollege.ca
Meeting Time & Location: A3-13, A3-15

Topical Outline (subject to change):

Week Topics Readings/Materials Weekly Learning Outcome(s) Instructional Evaluation Evaluation
Strategies Name Date
1 Introduction to Ch 1 •Explain the history of the World Wide Web Lecture,
JavaScript •Describe the differences between client-side demonstrations and
and server-side scripting hands-on exercises,
•Understand the components of a JavaScript class discussions
statement
•Add basic JavaScript code to web pages
•Structure JavaScript programs
2 Working with Ch 2 •Use functions to organize JavaScript code Lecture, Assignment 1
Functions, Data •Use expressions and operators demonstrations and
Types, and •Identify the order of operator precedence in hands-on exercises,
Operators an expression class discussions
3 Building Arrays and Ch 3 •Store data in arrays Lecture, Assignment 2
Controlling Flow •Use while statements, do/while statements, demonstrations and
and for statements to repeatedly execute hands-on exercises,
code class discussions
•Use continue statements to restart looping
statements
•Use if statements, if/else statements, and
switch statements to make decisions
•Nest one if statement in another
4 Debugging and Error Ch 4 •Recognize error types Lecture,
Handling •Trace errors with dialog boxes and the demonstrations and
console hands-on exercises,
•Use comments to locate bugs class discussions
•Trace errors with debugging tools
•Write code to respond to exceptions and
errors
5 Working with the Ch 5 •Access elements by id, tag name, class, Lecture, Assignment 3
Document Object name, or selector demonstrations and
Model (DOM) and •Access element content, CSS properties, hands-on exercises,
DHTML and attributes class discussions
•Add and remove document nodes
•Create and close new browser tabs and
windows with an app

THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 6

COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

Week Topics Readings/Materials Weekly Learning Outcome(s) Instructional Evaluation Evaluation

Strategies Name Date
•Use the setTimeout() and setInterval()
methods to specify a delay or a duration
•Use the History, Location, Navigation and
Screen objects to manipulate the browser
window
6 Enhancing and Ch 6 •Enhance form usability with JavaScript Lecture, Test 1
Validating Forms •Customize browser-based HTML validation demonstrations and
•Implement custom validation to check for hands-on exercises,
errors and display error messages class discussions
7 Using Object- Ch 7 •Explain basic concepts related to object- Lecture,
Oriented JavaScript oriented programming demonstrations and
•Use the Date, Number, and Math objects hands-on exercises,
•Define your own custom JavaScript objects class discussions
8 Manipulating Data in Ch 8 •Manipulate strings with properties and Lecture, Assignment 4
Strings and Arrays methods of the String object demonstrations and
•Create regular expressions and use them to hands-on exercises,
validate user input class discussions
•Manipulate arrays with properties and
methods of the Array object
•Convert between strings and arrays, and
between strings and JSON
9 Managing State Ch 9 •Save state information with query strings, Lecture,
Information and hidden form fields, and cookies demonstrations and
Security •Describe JavaScript security issues and hands-on exercises,
employ coding practices designed to address class discussions
them
10 Programming for Ch 10 •Integrate mouse, touch, and pointer events Lecture, Assignment 5
Touchscreens and into a web app demonstrations and
Mobile Devices •Obtain and work with a user’s geolocation hands-on exercises,
information class discussions
•Optimize a mobile web app to accommodate
the common constraints experienced by
mobile users
11 Updating Web Ch 11 •Describe the steps involved in using Ajax to Lecture,
Pages with Ajax update data demonstrations and
•Create an HTTP request and interpret an hands-on exercises,
HTTP response class discussions
•Request and receive server data using the
XMLHttpRequest object
•Process data received from a web service
and add it to the DOM
•Update app data using JSON-P
THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 7
COMP 125 CENTENNIAL COLLEGE Client-Side Web Development

Week Topics Readings/Materials Weekly Learning Outcome(s) Instructional Evaluation Evaluation

Strategies Name Date
•Update app data using JSON-P
12 Introduction to Ch 12 •Select elements using jQuery syntax Lecture, Assignment 6
jQuery •Use built-in jQuery functions demonstrations and
hands-on exercises,
class discussions
13 Using jQuery Online materials •Understanding jQuery statement chaining Lecture,
statements •Building event handlers demonstrations and
hands-on exercises,
class discussions
14 Enhancing Web Online materials •Working with jQuery effects (hiding,fading) Lecture, Test 2
Pages with jQuery •Creating custom animations demonstrations and
•Using the jQuery UI plug-in hands-on exercises,
class discussions

THIS COURSE ADHERES TO ALL COLLEGE POLICIES (See College Calendar) 8