CS50C: Web Development 3: JavaScript
Section 5371, Spring 2020 Course Syllabus

This syllabus is available in the following formats:

• Word document: SRJC CS50C 5371 Sp 2020 Syllabus Final v1.docx
• PDF file: SRJC CS50C 5371 Sp 2020 Syllabus Final v1.pdf

Instructor: Ethan Wilde, ewilde@santarosa.edu

Course Description

This course focuses on JavaScript programming for client-side Web development. Students learn to create advanced interactive projects including games, data visualizations, generative art, and other browser-based interactive experiences. Students gain experience working with open source JavaScript libraries such as jQuery, the Google Maps API, D3.js and many others. Project-based assignments lead to a comprehensive portfolio of all class projects built as a Web-accessible mobile app.

Recommended Preparation: Eligibility for ENGL 1A or equivalent

Prerequisites: Course Completion or Current Enrollment in CS 50B

Whether you want to become a professional member of a web development team, a game programmer, or a software developer, mastery of the JavaScript programming language is essential to those goals. We will engage in advanced JavaScript language explorations, including use of open source JavaScript libraries such as the jQuery library, the data visualization library D3, and browser-based game programming using the Phaser library. You will become proficient in the creation of interactive experiences using JavaScript and the many freely available open source libraries written in the language.

Student Learning Outcomes

Students will be able to:

1. Code and deploy basic and intermediate JavaScript, jQuery, and AJAX programs.
2. Demonstrate and apply the Document Object Model (DOM) and other fundamental Internet technologies accessible through JavaScript.
3. Integrate HTML5, CSS, and JavaScript to create interactive web content that adhere to current design and accessibility standards.

Upon completion of the course, students will be able to:

1. Develop interactive web pages using HTML5 canvas, and media tags.
2. Utilize a current industry-standard Framework, HTML5, and CSS to create responsive designs which work well with mobile devices.
3. Analyze and customize JavaScript code.
4. Write JavaScript, jQuery, and AJAX code that selects and manages document elements, validates form data, creates interactive elements, accesses server data.
5. Apply appropriate user experience and interactive design concepts to custom websites.
6. Demonstrate HTML5 integration with JavaScript scripting skills in a variety of student-designed projects.

Topics and Scope:

I. HTML5 Application Program Interface (API) Support

A. Canvas overview
B. Adding canvas content
C. Drawing in the canvas environment
D. Charts with canvas
E. Drag-and-drop API overview
F. Offline applications overview
G. Video overview
H. Encoding video
I. Adding video
J. Utilizing a jQuery media player

II. Responsive Web Design

A. Responsive vs. adaptive web design
B. Media queries
C. Introduction to grid-based frameworks
D. Bootstrap
E. Progressive enhancement vs. graceful degradation

III. Accessibility

A. Accessible Rich Internet Applications (ARIA)
B. Accessible forms
C. Accessible tables
D. Testing for accessibility
E. Features and considerations for making accessible web sites

IV. Introduction to JavaScript

A. SCRIPT and NOSCRIPT tags
B. Placing JavaScript on a webpage
C. Using variables

V. JavaScript Fundamentals

A. Using functions
B. Operators
C. Conditionals and loops

VI. Putting JavaScript to Work

A. Events
B. The navigator object
C. Cookies and local data
D. JavaScript timers: SetTimeout and SetInterval

VII. The Document and Window Objects

A. Properties and methods of the DOM (Document Object Model)
B. Uses and best practices

VIII. Arrays

A. JavaScript arrays
B. Properties and methods of arrays
C. Associative arrays

IX. Working with Numbers, Dates, and Strings

A. The math object
B. The number object
C. The date object

X. Working with Forms

A. Accessing the form element
B. The form object
C. Accessibility
D. Validation
E. Using form-based navigation
F. Form widgets in libraries and HTML5 (Hypertext Markup Language 5)

XI. Working with Dynamic Data

A. Asynchronous JavaScript and Extensible Markup Language (AJAX), Extensible Markup Language (XML) and JavaScript Object Notation (JSON)
B. Dynamic data using jQuery

XII. Introduction to jQuery

A. What is jQuery
B. Downloading data using jQuery

XIII. jQuery: Styling Elements

A. Selecting elements
B. Reading and setting Cascading Style Sheets (CSS) properties
C. Classes
D. Adding and removing elements
E. Modifying content

XIV. jQuery: Animating Elements

A. Easing
B. Animated navigation
C. Scrolling
D. Resizing

XV. jQuery: Images and Slideshows

A. Simple custom lightbox
B. jCrop
C. Crossfading

XVI. jQuery: Navigation

A. Collapsible menus
B. Accordions
C. Tabs
D. Panels

Assignments:

1. Textbook reading (25 - 60 pages per week)
2. Critique and analyze existing websites that use client-side technology
3. Create original JavaScripts and incorporate them into a website (6 - 8)
4. Download, customize and integrate existing JavaScript components into a website (3 - 4)
5. Download and deploy the jQuery library in webpage features (2 - 3)
6. Create a unified website incorporating all class projects and materials
7. Exams

Class Meetings

Spring 2020 Schedule

Class Delivery	Day and Time	Platform
Online Meetings	Weeks start on Tuesdays	Canvas shell
Live weekly Web conference (optional) https://cccconfer.zoom.us/j/406692699	Tuesdays, 4:45pm - 5:45pm	Zoom

All class materials for each module will be released online in Canvas on Tuesdays throughout the entire semester. A weekly live online meeting will be held on Tuesdays, 4:45pm - 5:45pm. Attendance at the live web conferences is optional but highly recommended. Use this link to join: https://cccconfer.zoom.us/j/406692699. To view any weekly lecture's recorded screencast, visit the Screencast page for any week in the Modules section.

Instructor Contact

Ethan Wilde

Email: ewilde@santarosa.edu

Phone: 707-527-4855

Spring 2020 Office Hours
January 14 – May 14, 2020

Day	Time	Location
Wednesdays (in office)	10:40am - 11:40am	Maggini 2937 (inside Computer Studies Dept office on 3rd floor)
Thursdays (online)	10:40am - 4:40pm	Online: Email ewilde@santarosa.edu or Skype ethanwilde

» Reserve a future office hour appointment

I typically respond to emails within 48 hours, weekends excepted. I never respond on Sundays.

Course Web Site

Students will use the Canvas course web site for assignment instructions, submitting assignments, viewing classmates' work, sharing resources, and viewing grades. The Google Chrome browser is recommended for viewing the Canvas-powered course site. Internet Explorer is not recommended.

Textbooks

Eloquent JavaScript (3rd)
Marijn Haverbeke
978-1593279509 (ISBN 13)
Free PDF eBook available

Consider getting a copy of these recommended books.

JavaScript & jQuery: The Missing Manual (3rd)
David Sawyer McFarland
1491947071 (ISBN 10)
978-1491947074 (ISBN 13)

JavaScript in 24 Hours, Sams Teach Yourself (7th) 
Phil Ballard
0672338092 (ISBN 10)
978-0672338090 (ISBN 13)

Consider buying used copies. You can locate and order textbooks online via the SRJC Bookstore.

Equipment

• A personal computer, either at home, work or on the Santa Rosa or Petaluma campuses.

Required Software + Services

• Internet access
• Web browsers including:
  • Google Chrome recommended and typically used in instructor demos
  • Mozilla Firefox recommended
• Coding education site
  • CodeCombat free account required for all students.
• Cloud hosting + development service
  • Repl.it IDE (Integrated Development Environment) required for all students, starting Week 2, for hosting class assignments during the term. Repl.it will provide a text editor and file transfer support without any additional software needed. Complete the hosting survey to get your free account.
• Graphics software such as:
  • Adobe Photoshop, part of a Creative Cloud subscription
  • Gimp open source application
  • Pixlr browser-based image editor
  • Draw.io browser-based drawing app
• PDF display software such as:
  • Adobe Reader

Optional Software

The additional software listed below is often used for Web development. Our cloud-based IDE – Repl.it – will provide a text editor and file transfer support without any additional software needed.

• Code editor such as:
  • Brackets (Windows, Mac OS, free license)
  • Microsoft Visual Studio Code (Windows, Mac OS, free license)
  • BBEdit (Mac OS only)
  • Sublime Text (Windows, Mac OS, Linux)
• File Transfer Protocol (FTP) software such as:
  • CyberDuck (Mac OS and Windows, free license)
  • Fetch (Max OS only)
  • WinSCP (Windows only)
• Additional Web browsers including:
• Apple Safari (Mac OS only)
• Microsoft Edge (Windows 10 only)

Important Dates

Day Class Begins: Tuesday, January 14, 2020

Day Class Ends: Friday, May 22, 2020

Last Day to Add without instructor's approval: Sunday, January 19, 2020

Last Day to Drop with refund: Sunday, January 26, 2020

Last Day to Add with instructor's approval: Sunday, February 2, 2020

Last Day to Drop without a 'W' symbol: Sunday, February 2, 2020

Last Day to Opt for Pass/No Pass: Sunday, February 23, 2020

Last Day to Drop with a 'W' symbol: Sunday, April 19, 2020

Dropping the Class

If you decide to discontinue this course, it is your responsibility to officially drop it. A student may be dropped from any class when that student's absences exceed ten percent (10%) of the total hours of class time. It is strongly advised that if you need to miss more than one class/homework deadline in a row that you contact the instructor to avoid being dropped from the class.

Attendance

For online courses, students who fail to complete the requirements of the first and second class modules will be dropped by the instructor.

Pass‐NoPass (P/NP)

You may take this class P/NP. You must decide before the deadline, and add the option online with TLC or file the P/NP form with Admissions and Records. With a grade of C or better, you will get P.

You must file for the P/NP option by February 23, 2020. Once you decide to go for P/NP, you cannot change back to a letter grade. If you are taking this course as part of a certificate program, you can probably still take the class P/NP. Check with a counselor to be sure.

Instructor Announcements

The instructor will post announcements on the “Announcements” page in Canvas throughout the semester. Canvas notifies students according to their preferred Notification Preferences.

Late Policy

All assignments are due at 11:59pm Pacific time on the Monday corresponding to the due date. A late submission will receive a 10% penalty for each week it is late. Submissions more than two weeks late are not accepted without prior written arrangement.

Exams

There will be online midterm and final exams. The material comes from the textbook, class lectures and supplemental materials. If any exam is missed, a zero will be recorded as the score, unless you have made prior written arrangements with me. It is your responsibility to take the exams by the due date.

Grading Policy

Click the “Grades” link in Canvas to keep track of your grades. I grade once a week and post grades and comments in the Canvas gradebook.

Grades will be assigned as follows:

Letter Grade	Percentage	Points Total
A	90% - 100%	900 points or more
B	80% - 89%	800 to 899 points
C	70% - 79%	700 to 799 points
D	60% - 69%	600 to 699 points
F	59% or lower	599 points or less

If taking Pass/No Pass you need at least 70% of the total class points and to complete the midterm exam and the final exam to pass the class.

Grading Breakdown

Percent	Points	Grading Category
62%	620 points	Projects + Assignments
12%	120 points	Discussions + Attendance
6%	60 points	Quizzes
10%	100 points	Midterm
10%	100 points	Final Exam
100%	1000 points	1000 points possible

Standards of Conduct

Students who register in SRJC classes are required to abide by the SRJC Student Conduct Standards. Violation of the Standards is basis for referral to the Vice President of Student Services or dismissal from class or from the College. See the Student Code of Conduct page.

Collaborating on or copying of tests or homework in whole or in part will be considered an act of academic dishonesty and result in a grade of 0 for that test or assignment. Students are encouraged to share information and ideas, but not their work. See these links on Plagiarism:
SRJC Writing Center Lessons on avoiding plagiarism
SRJC's statement on Academic Integrity

Special Needs

Every effort is made to conform to accessibility standards for all instructor-created materials. Students should contact their instructor as soon as possible if they find that they cannot access any course materials. Students with disabilities who believe they need accommodations in this class are encouraged to contact Disability Resources by calling (707) 527-4278 or visit online at drd.santarosa.edu.

Student Health Services

Santa Rosa Junior College offers extensive health services to students. Visit Student Health Services online at shs.santarosa.edu or call them at (707) 527-4445.

Course Outline

Start Date	Canvas Module	Topics	Assignments
1/14	Week 1	Getting Started	Hosting Signup Survey Assignment 1: Syllabus Quiz Discussion 1: Check-in Discussion
1/21	Week 2	Play a Game, Learn to Code	Assignment 2: CodeCombat + Basic JavaScript Reading: Eloquent JS, Introduction + Ch. 1
1/28	Week 3	Introduction to JavaScript, Part 1	Assignment 3: More JavaScript Reading: Eloquent JS, Ch. 2
2/4	Week 4	Introduction to JavaScript, Part 2	Assignment 4: Events Discussion 2: Events + Objects Reading: Eloquent JS, Chs. 3 + 4
2/11	Week 5	Exploring the jQuery Library	Assignment 5: Quiz App Reading: Eloquent JS, Chs. 13, 14, 15
2/18	Week 6	Exploring jQuery Plugins, Part 1	Assignment 6: Enhanced User Interfaces Discussion 3: jQuery + JavaScript Libraries Reading: Eloquent JS, Ch. 5
2/25	Week 7	Exploring jQuery Plug-ins, Part 2	Assignment 7: Plug-in Promotional Site Quiz 1 Reading: Eloquent JS, Ch. 6
3/3	Week 8	Exploring the Google Maps API	Assignment 8: Class Map Discussion 4: Concepts of Geolocation Reading: Eloquent JS, Ch. 8
3/10	Week 9	AJAX: Working with JSON Data	Midterm Project: Map-Based Mobile App Reading: Eloquent JS, Ch. 11
3/17	NO CLASS	Spring Break
3/24	Week 10	Midterm Review	Midterm Exam Discussion: Midterm Project Presentations
3/31	Week 11	Data Visualization, Part 1	Assignment 9: Basic Data Visualization Discussion 5: Concepts of Data Visualization Reading: Eloquent JS, Chs. 17
4/7	Week 12	Data Visualization, Part 2	Assignment 10: Advanced Visualization Reading: online
4/14	Week 13	Browser-based Game Development, Part 1	Assignment 11: Basic Game Quiz 2 Discussion 6: Concepts of Game Development Reading: Eloquent JS, Ch. 10
4/21	Week 14	Browser-based Game Development, Part 2	Assignment 12: Your Game Reading: online
4/28	Week 15	Building Mobile Apps with Vue.js, Part 1	Assignment 13: Basic Mobile App Discussion 7: Concepts of Mobile Applications Reading: online
5/5	Week 16	Building Mobile Apps with Vue.js, Part 2	Assignment 14: Your Mobile App Reading: online
5/12	Week 17	Server-side JavaScript with Node.js Final Review	Final Project Discussion 8: Node.js JavaScript Runtime Reading: online
5/18 Mon	Week 18	No Regular Class (Exam online, no regular class meeting)	Final Exam Discussion: Final Project Presentations

Note to students: the assignments listed above will become available as modules are released in sequence each week. To view course content, go to Modules.