PROG70007
jQuery and Javascript
Sheridan
 
  I: Administrative Information   II: Course Details   III: Topical Outline(s)  Printable Version
 

Land Acknowledgement

Sheridan College resides on land that has been, and still is, the traditional territory of several Indigenous nations, including the Anishinaabe, the Haudenosaunee Confederacy, the Wendat, and the Mississaugas of the Credit First Nation. We recognize this territory is covered by the Dish with One Spoon treaty and the Two Row Wampum treaty, which emphasize the importance of joint stewardship, peace, and respectful relationships.

As an institution of higher learning Sheridan embraces the critical role that education must play in facilitating real transformational change. We continue our collective efforts to recognize Canada's colonial history and to take steps to meaningful Truth and Reconciliation.


Section I: Administrative Information
  Total hours: 42.0
Credit Value: 3.0
Credit Value Notes: N/A
Effective: Fall 2020
Prerequisites: N/A
Corequisites: N/A
Equivalents: N/A
Pre/Co/Equiv Notes: HTML Introduction or Java Introduction or previous Programming experience would be an asset.

Program(s): Front-End Web Developer Founda, Website Developer
Program Coordinator(s): N/A
Course Leader or Contact: N/A
Version: 20200914_00
Status: Approved (APPR)

Section I Notes: This course is offered in-class. The sessions may include a variety of interactive and engaging activities including discussions, workshops, group activities, role plays, case studies and presentations. Readings, video, and podcasts may be provided online, on Sheridan's Learning and Teaching Environment (SLATE), to support class activities and reinforce material covered during class sessions. Assignment details will be provided in class and on SLATE. Students will need reliable access to a computer and the internet.

 
 
Section II: Course Details

Detailed Description
This course introduces students to Javascript and one of its most popular libraries, jQuery. Students explore Javascript syntax and use jQuery to add advanced functionalities to websites. Through assignments, in-class lessons, and a project, students add animation and effects, dynamic page formatting, and the official jQuery UI widgets, to speed up and enhance web pages. Students are required to bring their own laptop to class.

Program Context

 
Front-End Web Developer Founda Program Coordinator(s): N/A
This course is part of the Front-End Web Developer Foundations Program.

Website Developer Program Coordinator(s): N/A
This course is part of the Web Developer Certificate.


Course Critical Performance and Learning Outcomes

  Critical Performance:
By the end of this course, students will have demonstrated the ability to use jQuery for building, manipulating, editing, and adding content to a website.
 
Learning Outcomes:

To achieve the critical performance, students will have demonstrated the ability to:

  1. Explain the functions of browser renders and the DOM.
  2. Manipulate the DOM with Javascript.
  3. Speed up scripting production by using jQuery API syntax.
  4. Use jQuery to locate and manipulate content and events.
  5. Use jQuery specific animations and effects to enhance web pages.
  6. Speed up pages with dynamic page formatting (AJAX).
  7. Build widgets (e.g. accordians, tabs, toggles) using the official jQuery UI.
  8. Add jQuery plugins to enhance a site with one-page scrolling, dropdown menus, mobile menus, sliders, and lightboxes.

Evaluation Plan
Students demonstrate their learning in the following ways:

 Evaluation Plan: IN-CLASS
 In-Class Assignment #1: Document Traversal, CSS Manipulation4.0%
 In-Class Assignment #2: Style Switcher, Attribute Manipulation4.0%
 In-Class Assignment #3: Filters, Mouse Events, Keyboards, Functions4.0%
 In-Class Assignment #4: Showing, Hiding, Animating, User Interaction4.0%
 In-Class Assignment #5: Repositories, Widgets, Plugins4.0%
 Assignment #1: Add CSS using jQuery10.0%
 Assignment #2: Add Effects using jQuery10.0%
 Assignment #3: Add Animation10.0%
 Assignment #4: Add Plugins10.0%
 Final Project: Personal Portfolio Site40.0%
Total100.0%

Evaluation Notes and Academic Missed Work Procedure:
To encourage behaviours that will help students to be successful in the workplace and to ensure that students receive credit for their individual work, the following rules apply to every course offered within the Faculty of Continuing and Professional Studies. 1. Students are responsible for staying abreast of test dates and times, as well as due dates and any special instructions for submitting assignments and projects as supplied to the class by the professor. 2. Students must write all tests at the specified date and time. Missed tests, in-class/online activities, assignments and presentations are awarded a mark of zero. If an extension or make-up opportunity is approved by the professor as outlined below, the mark of zero may be revised by subsequent performance. The penalty for late submission of written assignments is a loss of 10% per day for up to five business days (excluding weekends and statutory holidays), after which, a grade of zero is assigned. Business days include any day that the college is open for business, whether the student has scheduled classes that day or not. 3. Students who miss a test or in-class/online activity or assignment or fail to submit an assignment on time due to exceptional circumstances are required to notify their professor in advance of the class whenever possible. A make-up test may be supplied for students who provide an acceptable explanation of their absence and/or acceptable documentation explaining their absence (e.g., a medical certificate). All make-up tests are to be written at a time and place specified by the professor upon the student¿s return. Alternately, students may be given an opportunity to earn the associated marks by having a subsequent test count for the additional marks. Exceptional circumstances may result in a modification of due dates for assignments. 4. Unless otherwise specified, assignments and projects must be submitted at the date and time specified by the instructor. 5. Students must complete every assignment as an individual effort, unless the professor specifies otherwise. 6. Since there may be instances of grade appeal or questions regarding the timely completion of assignments and/or extent of individual effort, etc., students are strongly advised to keep, and make available to their professor, if requested, a copy of all assignments and working notes until the course grade has been finalized. 7. There will be no resubmission of work unless this has been previously agreed to or suggested by the professor. 8. Students must submit all assignments in courses with practical lab and field components in order to pass the course.

Provincial Context
The course meets the following Ministry of Colleges and Universities requirements:


 

Prior Learning Assessment and Recognition
PLAR Contact (if course is PLAR-eligible) - Office of the Registrar
Students may apply to receive credit by demonstrating achievement of the course learning outcomes through previous relevant work/life experience, service, self-study and training on the job. This course is eligible for challenge through the following method(s):

  • Other
    Notes:  This course is delivered through OntarioLearn at ontariolearn.com and is hosted by (Durham College) DU-PROG2283.

 
 
Section III: Topical Outline
Some details of this outline may change as a result of circumstances such as weather cancellations, College and student activities, and class timetabling.
Instruction Mode: In-Class
Professor: Multiple Professors
Resource(s): N/A
Applicable student group(s): Continuing Education Students
Course Details:

MODULE 1: The Function of Browser Renders and the DOM

  • The Document Object Model (DOM)
  • Revisiting normal document flow
  • Inspecting HTML documents with built-in inspectors 

MODULE 2: Manipulating the DOM with Javascript

  • Scripting basics - script tags, comments, alerts 
  • Javascript basics - variables and functions 
  • Writing Javascript on your page 

MODULE 3: Speeding Up Scripting Production with jQuery

  • Why jQuery over Javascript
  • jQuery features 
  • Downloading and installing jQuery
  • The jQuery Syntax 
  • The 8 jQuery Categories 

MODULE 4: Using jQuery to Locate and Manipulate Content and Events

  • The Document Ready function 
  • Selecting, transversing, and retrieving elements in your HTML document 
  • Editing content in your HTML document 
  • Working with CSS data
  • Helper functions 

(In-Class 1: 4%; Homework 1: 10%)

MODULE 5: Using jQuery Specific Animations and Effects to Enhance Web Pages

  • Using built-in effects like fade and slide
  • Using built-in animations like show, hide, and toggle 
  • Creating custom animations 
  • Looping and timing animations 
  • Hover effects 
  • Event handlers 

(In-Class 2: 4%; Homework 2: 10%)

MODULE 6: Speeding Up Pages with Dynamic Page Formatting

  • Asynchronous Javascript and XML - AJAX
  • Loading content dynamically without page load
  • Understanding AJAX parameters 
  • Replacing and returning content 

(In-Class 3: 4%)

MODULE 7: Building Widgets Using the Official jQuery UI

  • What is the jQuery UI
  • Installing the jQuery UI
  • Downloading the code for your widgets 
  • Finding jQuery UI utilities 
  • Adding and manipulating widget options 
  • Making accordians into toggles 
  • Downloading pre-made effects 
  • Sorting lists for "To Do Lists" sites 
  • Dragging and dropping content 
  • Creating tooltops with custom CSS

(In-Class 4: 4%; Homework 3: 10%)

MODULE 8: Adding Plugins to Enhance Your Site

  • Finding resources in jQuery plugin repositories 
  • Using the official jQuery plugins 
  • Plugin files needed to extend jQuery 
  • Sticky Navigation 
  • Making YouTube and Vimeo videos responsive 
  • Animating colour 
  • Adding a filterable portfolio 
  • Enabling moble ("hamburger") menus
  • Using carosel sliders 
  • Page scrolling with simple parallax effects 
  • Mobile ready lightboxes 
  • Timed popups for email subscription ads 
  • Side navigation vs. Top navigation vs. Hamburger menus 
  • Getting dropdowns and nesting submenus 

(In Class 5: 4%; Homework 4: 10%; Final Project: 40%)



Sheridan Policies

It is recommended that students read the following policies in relation to course outlines:

  • Academic Integrity
  • Copyright
  • Intellectual Property
  • Respectful Behaviour
  • Accessible Learning
All Sheridan policies can be viewed on the Sheridan policy website.

Appropriate use of generative Artificial Intelligence tools: In alignment with Sheridan's Academic Integrity Policy, students should consult with their professors and/or refer to evaluation instructions regarding the appropriate use, or prohibition, of generative Artificial Intelligence (AI) tools for coursework. Turnitin AI detection software may be used by faculty members to screen assignment submissions or exams for unauthorized use of artificial intelligence.

Course Outline Changes: The information contained in this Course Outline including but not limited to faculty and program information and course description is subject to change without notice. Nothing in this Course Outline should be viewed as a representation, offer and/or warranty. Students are responsible for reading the Important Notice and Disclaimer which applies to Programs and Courses.


[ Printable Version ]

Copyright © Sheridan College. All rights reserved.