DMS 384: Intermediate Coding--JavaScript
Fall 2021

Objectives

by the end of this module, you will be able to

• identify different code commenting best practices
• add comments to your code in HTML, CSS, and JavaScript using appropriate syntax for each
• use an external file for JavaScript code
• explain the advantages of using an external JS file in your project

Tutorials

1. code commenting: best practices
2. code commenting: examples
3. creating and attaching an external code file

complete playlist

Web Resources

• w3schools JavaScript Tutorial
• How to Comment Your Code Like a Pro: Best Practices and Good Habits by B.J. Keeton
• FTP review (help for getting your files on the server)
• Review of referential links
• getting ready to code: recommendations for system settings (PC)
• getting ready to code: solutions for iOS (Mac)
• getting ready to code: recommendations for using an iPad to code (Mac)

Assessment

1. 1.0 Module 1 Quiz in Canvas
2. 1.1 commented code file
3. 1.2 using an external code file

Note: in addition to receiving an 80% or higher on the Module 1 Quiz, you must also receive a score of "complete" on assignments 1.1 and 1.2 in order to proceed to Module 2.

Objectives

by this end of this module, you will be able to

• define what a code library is and explain how it relates to a coding language
• explain the difference between library hosting and using a CDN (Content Delivery Network)
• locate the jQuery API Documentation
• use the jQuery API Documentation interface
• add jQuery to a program
• convert JavaScript to jQuery

Tutorials

1. code libraries and hosting/CDN
2. the jQuery API
3. adding jQuery to a project
4. converting JavaScript to jQuery--example

complete playlist

Web Resources

• jQuery Official Site
• jQuery API Documentation
• jQuery CDN (Stackpath)
• Google CDN for jQuery

Assessment

this module will be assessed through the following assessments:

1. 2.0 Module 2 Quiz in Canvas
2. 2.1 adding jQuery to a project

Note: in addition to receiving an 80% or higher on the Module 2 Quiz, you must also receive a score of "complete" on assignments 2.1 to proceed to the rest of the course.

Objectives

by the end of this module, you will be able to

• identify syntax elements of jQuery and use correct jQuery syntax
• identify the document ready event
• identify selectors valid in jQuery use selectors to target HTML components
• identify events valid in jQuery and use events to trigger webpage changes

Tutorials

1. jQuery syntax
2. jQuery selectors
3. jQuery events

complete playlist

Web Resources

• jQuery Syntax
• jQuery Selectors
• jQuery Events
• jQuery API: event.which - more info about commands demonstrated in Video 3; you can use the demo code on this page to figure out the key code of any key on the keyboard.
• sample code: selectors - use this to follow along with tutorial 2
• sample code: events - use this to follow along with tutorial 3

Assessment

this module will be assessed through the following coding exercises:

1. 3.1 selector demonstration
2. 3.2 event demonstration

Objectives

by the end of this module, you will be able to

• analyze project needs
• plan project data structures, inputs, behaviors, and outputs
• identify and incorporate resources into a project
• use continually active functions to watch for events that trigger behaviors
• dynamically modify and write HTML code
• dynamically modify and write CSS code

Tutorials

1. planning a project
2. getting started: resources and data design
3. coding: detecting events and triggering actions
4. coding: user interactivity
5. coding: data validation and user testing

complete playlist

Web Resources

• Font Awesome icons
• Completed Program: ID Game

Sample Code:

To use sample code: click on the link below, view the source, and then click on the .css and .js files to view them as code in your browser.

• 1.0 Basic Resources and Data Design
• 2.0 Testing event triggers, creating the game board
• 3.0 Adding interactivity
• 3.1 End state, edits based on testing [final]

Assessment

This module will be assessed through the following coding exercises:

1. 4.1 original project--basic resources and data design
2. 4.2 original project--proof of concept draft
3. 4.3 original project--final version

Objectives

by the end of this module, you will be able to

• identify and code animation methods
• demonstrate triggering animations with user events
• demonstrate responsive animations based on conditional logic
• identify and code a callback function
• integrate additional animation tools into a project

Tutorials

1. introduction to animation
2. coding and triggering animations
3. callback functions and responsive animations
4. using other animation tools

complete playlist

Web Resources

relevant pages from the jQuery API:

• animate() method
• list of effects
• jQuery UI: library with animation widgets

relevant tutorial pages from w3schools:

• Intro to Animation
• animate() method in jQuery
• List of Animation Methods in jQuery
• Callback Functions

Sample Code

To use sample code: click on the link below, view the source, and then click on the .css and .js files to view them as code in your browser.

• sample code: coding and triggering animations - use this to follow along with tutorial 2
• sample code: callback functions and responsive animation - use this to follow along with tutorial 3
• sample code: animation tools - use this to follow along with tutorial 4

Assessment

This module will be assessed by demonstration of the following:

1. 5.1 basic animation demonstration
2. 5.2 responsive animation demonstration
3. 5.3 animation widget demonstration

Objectives

by the end of this module, you will be able to

• design a graphic user interface (GUI) using best practices of aesthetic design
• create an introduction to orient users to an interactive application
• use responsive animation in an algorithm with a clear purpose and objectives
• design an animation algorithm that uses data validation to operate within specific constraints
• design and trigger an end state for a project
• edit a project based on user testing
• detect run environment properties and use responsive design elements
• address cross-platform compatibility issues

Tutorials

1. introduction to the final project
2. GUI design
3. responsive animation example: collision detection
4. intro and end state design
5. responsive and cross-platform design

complete playlist

Web Resources

Documentation and Libraries

• Web APIs Documentation from Mozilla
• getBoundingClientRect()
• jQuery API documentation
• jQuery UI
• jQuery for touch screens - library from MIT

Sample Code

To use sample code: click on the link below, view the source, and then click on the .css and .js files to view them as code in your browser.

• sample code: GUI design - use this to follow along with tutorial 2
• sample code: responsive animation example--collision detection - use this to follow along with tutorial 3
• sample code: intro and end state design - use this to follow along with tutorial 4
• sample code: responsive and cross-platform design [final state] - use to follow along with tutorial 5

Assessment

This module will be assessed through

1. 6.1 project plan
2. 6.2 GUI draft
3. 6.3 responsive animation draft
4. 6.4 introduction and end state draft
5. 6.5 final program

Objectives

by the end of this module, you will be able to

• watch variables to identify coding issues
• use code commenting strategies to pinpoint errors
• use the code inspector to check and identify issues with dynamically generated HTML/CSS
• use behavior testing strategies to identify issues and debug

Tutorials

1. debugging strategies

Web Resources

PC Browsers

• Chrome DevTools page inspector
• Firefox Page Inspector
• Edge DevTools page inspector

Safari/Apple Developer

• Enabling Web Inspector
• Debugging Your Webpage with Web Inspector

Assessment

This module will be assessed through

1. 7.1 submission of a debugging log
2. 7.2 successful completion of a quiz

Evaluation Criteria: Quiz

You must achieve 100% on the Module 7 Quiz to demonstrate mastery of the outcomes for this module. You may take the quiz at any point after Module 2 has been completed. You may take the Quiz more than once.