CCOG for CAS 213 archive revision 202104

You are viewing an old version of the CCOG. View current version »

Effective Term:
Fall 2021

Course Number:
CAS 213
Course Title:
JavaScript and JQuery for Designers
Credit Hours:
4
Lecture Hours:
30
Lecture/Lab Hours:
0
Lab Hours:
30

Course Description

Develops skills to write scripts that create interactive effects on websites using JavaScript and jQuery. Introduces programming concepts and terminology. Explores a variety of common user interface (UX/UI) effects on websites. Enhances critical thinking through the process of writing and troubleshooting JavaScript and jQuery on web pages. Uses the current versions of HTML and CSS. Audit available.

Intended Outcomes for the course

Upon completion of the course students should be able to:

  1. Create effective scripts using JavaScript and jQuery to enhance the end user experience.
  2. Demonstrate knowledge of introductory programming concepts.
  3. Test, debug, and deploy web pages containing JavaScript and jQuery.

Course Activities and Design

Outline of topics to be covered (does not need to be in this order):

  • Review and Setup
    • Install and configure an editor (Brackets suggested)
    • Review of IDs vs classes
    • Overview of JavaScript
    • Simple example: Incorporating JavaScript on an HTML page, and how to link to an external .js file
    • Intro to the JavaScript Console and console.log()
  • DOM, variables, operators
    • Introduction to the BOM and the DOM
    • Terminology: Objects, properties, methods, functions
    • Creating and using variables; assignment statements; types of variables; variable naming
    • Operators and Comments
    • Using document.getElementById() and .innerHTML
    • Introduction to Debugging (keep it simple - linters and alert boxes)
  • Functions and Control Structures
    • Pseudocode (optional: include User Stories)
    • Using built-in functions
    • Creating user-defined functions; passing parameters (optional: returning a value)
    • if, else, else if, for, while (optional: switch)
    • each()
    • Form validation with if statements
  • Introduction to jQuery
    • Incorporating jQuery with direct link or CDN
    • Comparing JavaScript with jQuery for same tasks
    • Basic syntax of jQuery
  • Using major methods/events in jQuery
    • ready(), text(), css(), append(), appendTo(), addClass(), removeClass(), show(), hide(), next(), toggle(), slideToggle(), toggleClass(), fadeIn(), fadeout(), end(), filter()
    • on() with click, hover, dblclick, etc.
    • mouse events
    • jquery pseudoclasses, such as :first and :last
    • Chaining
  • Plugins
    • Create an example: Using a plugin; setting options; calling a plugin
  • Data
    • Simple example: using localStorage (and sessionStorage); preferred over cookies
  • Optional
    • Using a Code Playground, such as jsFiddle or CodePen

Outcome Assessment Strategies

Grading of this class will be based on completion of project(s) developed individually or as part of a team.

Assessments may include:

  • Completion of a multi-page web site implementing a variety of JavaScript techniques
  • Tests or quizzes

Related Instruction

Computation
Hours: 40

Test, debug, and deploy web pages containing JavaScript and jQuery.

  • Create computational formulas with the Javascript programming language, which utilizes logical operations and mathematical expressions including values, constants, variables, operators, functions, arrays, objects and other regular expressions.
  • Analyze code and error-check formulas.
  • Direct instruction (+ study time) in programming-related computations involving Boolean algebra and arithmetic expression construction and evaluation.
  • Development of skill in programming-related computations.