Course Syllabus

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

This syllabus is available in the following formats:

Photo of Instructor Ethan Wilde

Instructor: Ethan Wilde (he/him/his), 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, mobile applications, 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 website of all class projects.

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 web and mobile projects using advanced HTML, CSS, and JavaScript.
  2. Demonstrate mastery and application of shared JavaScript libraries to create highly interactive user experiences.
  3. Follow professional best practices for file management and version control of web and mobile projects.

At the conclusion of this course, the student should be able to:

  1. Develop interactive websites and mobile applications that integrate HTML, CSS, and JavaScript.
  2. Utilize shared JavaScript libraries to implement advanced interactivity and functionality.
  3. Analyze and customize JavaScript code.
  4. Write JavaScript code that selects, manipulates, and creates document elements, accesses, validates, and parses external data sources.
  5. Apply appropriate user experience and interactive design concepts to custom web and mobile applications.

Topics and Scope:

I. Advanced HTML and CSS Review
    A. Semantic HTML review
    B. SCRIPT and NOSCRIPT elements
    C. CSS language review
II. JavaScript Language Fundamentals
    A. Browser-based JavaScript: working with JavaScript in the browser
    B. Data types, values and variables
    C. Operators and expressions
    D. Control structures: loops, conditionals, functions
    E. Events
    F. Data structures: objects and arrays
    G. Common JavaScript objects in the browser: navigator, document, window, Math
    H. Document Object Model and JavaScript
    I. Data storage and dynamic data: cookies, local storage, JavaScript Object Notation (JSON)
    J. Forms: events, elements and validation
    K. Error-handling, debugging, and troubleshooting
    L. Asynchronous programming
    M. Browser API access via JavaScript
    N. JavaScript timers
    O. Server-side JavaScript: working with Node.js and Node Package Manager (NPM)
    P. History of JavaScript and ECMAScript
III. Common JavaScript Libraries and Functionalities
    A. jQuery vs. pure JavaScript for accessing and modifying DOM
    B. jQuery UI and other jQuery plugins for advanced user interfaces
    C. Geographic visualizations with libraries such as OpenLayers and Google Maps API
    D. Data visualization with HTML Canvas and visualization libraries such as Data-Driven Documents (D3.js)
    E. Highly interactive gamified user experiences with JavaScript game engine libraries such as Phaser.js
    F. Creating your own JavaScript library or jQuery plugin
IV. Introduction to Web and Mobile Applications
    A. Model-View-Controller (MVC) coding pattern
    B. Reactive JavaScript libraries such as Vue.js and React
    C. Mobile gesture-based user interfaces
    D. Introduction to progressive Web applications (PWA)
    E. Introduction to full-stack applications
    F. Application user experience and interaction design
V. Professional Practices
    A. Introduction to git command-line version control and practices
    B. Introduction to file management and developer operations
    C. Introduction to build systems
    D. Transpilation of code to pure JavaScript

Assignments:

  1. Textbook and other assigned reading (25-60 pages per week)
  2. Browser-based JavaScript assignments (7-15). All HTML and CSS code submitted must be validated.
  3. Midterm and final JavaScript-powered projects (2). Each project must include:
        A. Custom JavaScript coding
        B. Fully validated and accessible code
  4. Quizzes and exams (2-4)
  5. Discussions (5-8). Conducted in-class or online with participation from all students.
  6. Project presentations and peer feedback (2). Each student must present their project to classmates, either online or in-class, and provide feedback to at least two peers. May be ungraded.

Course Outline of Record

You may find the official course outline of record for this course at the following link: https://portal.santarosa.edu/srweb/SR_CourseOutlines.aspx?ck=CS50C  

Class Meetings

Spring 2024 Schedule

Class Delivery Day and Time Modality
Online Meetings Weeks start on Tuesdays Canvas

Live weekly Web conference (optional)
https://santarosa-edu.zoom.us/j/406692699 

Tuesdays, 1:30pm - 2:30pm Zoom

All class materials for each module will be released online in Canvas on Tuesdays throughout the entire semester. A live online meeting will be held on Tuesdays, 1:30pm - 2:30pm. Attendance at the live web conferences is optional but highly recommended. Every student must either attend the live web conference or watch the entire screencast recording of the web conference. Use this link to join: https://santarosa-edu.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 2024 Office Hours
January 22 – May 13, 2024

Day Time Location
Mondays (online) 1:20pm - 8:00pm Online: Skype ethanwilde or Email ewilde@santarosa.edu

» 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.

Required Textbook

Eloquent JavaScript Book Cover

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

Recommended Textbooks

Consider getting a copy of these recommended books.

JavaScript & jQuery: The Missing Manual Book Cover

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)

The Modern JavaScript Tutorial (free online)
Ilya Kantor
https://javascript.info/ 

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:
  • 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:
  • PDF display software such as:

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:
  • File Transfer Protocol (FTP) software such as:
  • Additional Web browsers including:
    • Apple Safari (Mac OS only)
    • Microsoft Edge (Windows 10 only)

Important Dates

Day Class Begins: Tuesday, January 16, 2024
(first course week begins with class meeting on January 16, 2024)

Day Class Ends: Friday, May 24, 2024

Last Day to Drop with refund: Sunday, January 28, 2024

Last Day to Add with instructor's approval: Sunday, February 4, 2024

Last Day to Drop without a 'W' symbol: Sunday, February 4, 2024

Last Day to Drop with a 'W' symbol: Sunday, April 21, 2024

Last Day to Opt for Pass/No Pass: Friday, May 17, 2024

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 within your student portal 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 May 17, 2024. 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

Please make a plan before the course starts to allow yourself the necessary time each week to complete the required reading, watching, online discussion posting, and assignments. The official Course Outline of Record for this three-unit semester-length course stipulates that each student is expected to complete 157.5 hours of learning for the class. This works out to 9 hours per week for each of the seventeen weeks of regular instruction along with 4.5 hours for Finals Week. If you plan accordingly, you can avoid submitting assignments late.

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, except for assignments that allow collaboration. Students are encouraged to share information and ideas, but not their work.

Use of generative AI tools is not allowed in this course. Please do not use any generative AI tool to assist you in any homework assignment in this course. The use of content created by generative AI tools in your homework is considered a form of plagiarism.

What's a generative AI tool? Any software that creates code or content based on large language models. These include, but are not limited to:

  • Microsoft CoPilot
  • Google Bard/Gemini
  • OpenAI ChatGPT
  • GitHub CoPilot
  • Repl.it Ghostwriter

See these links on plagiarism:

I expect each student to maintain high standards of civility and respect when communicating with each other. The following rules of netiquette should be observed in all class discussions and communications:

  • Be kind and respectful to others
  • Use full sentences
  • Avoid jargon and acronyms
  • Use language that supports others

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/16 Week 1 Getting Started
  • Hosting Signup Survey
  • Assignment 1: Syllabus Quiz
  • Discussion 1: Check-in Discussion
1/23 Week 2 Play a Game, Learn to Code
  • Assignment 2: CodeCombat + Basic JavaScript
  • Reading: Eloquent JS, Introduction + Ch. 1
1/30 Week 3 Introduction to JavaScript, Part 1
  • Assignment 3: More JavaScript
  • Reading: Eloquent JS, Ch. 2
2/6 Week 4 Introduction to JavaScript, Part 2
  • Assignment 4: Events
  • Discussion 2: Events + Objects
  • Reading: Eloquent JS, Chs. 3 + 4
2/13 Week 5 Exploring the jQuery Library
  • Assignment 5: Quiz App
  • Reading: Eloquent JS, Chs. 13, 14, 15
2/20 Week 6 Exploring jQuery Plugins, Part 1
  • Assignment 6: Enhanced User Interfaces
  • Discussion 3: jQuery + JavaScript Libraries
  • Reading: Eloquent JS, Ch. 5
2/27 Week 7 Exploring jQuery Plug-ins, Part 2
  • Assignment 7: Plug-in Promotional Site
  • Quiz 1
  • Reading: Eloquent JS, Ch. 6
3/5 Week 8 Exploring Geography Visualization APIs
  • Assignment 8: Class Map
  • Discussion 4: Concepts of Geolocation
  • Reading: Eloquent JS, Ch. 8
3/12 Week 9 AJAX: Working with JSON Data
  • Midterm Project: Map-Based Mobile App
  • Reading: Eloquent JS, Ch. 11
3/19 No Class Spring Break
3/26 Week 10 Midterm Review
  • Midterm Exam
  • Discussion: Midterm Project Presentations
4/2 Week 11 Data Visualization, Part 1
  • Assignment 9: Basic Data Visualization
  • Discussion 5: Concepts of Data Visualization
  • Reading: Eloquent JS, Chs. 17
4/9 Week 12 Data Visualization, Part 2
  • Assignment 10: Advanced Visualization
  • Reading: online
4/16 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/23 Week 14 Browser-based Game Development, Part 2
  • Assignment 12: Your Game
  • Reading: online
4/30 Week 15 Building Mobile Apps with Vue.js, Part 1
  • Assignment 13: Basic Mobile App
  • Discussion 7: Concepts of Mobile Applications
  • Reading: online
5/7 Week 16 Building Mobile Apps with Vue.js, Part 2
  • Assignment 14: Your Mobile App
  • Reading: online
5/14 Week 17 Server-side JavaScript with Node.js
Final Review
  • Final Project
  • Discussion 8: Node.js JavaScript Runtime
  • Reading: online
5/20 Mon –
5/24 Fri
Week 18 No Regular Class
(Exam online, no regular class meeting)
  • Final Exam (due 5/24)
  • 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.

All of the original material found on this online course website is the property of the instructor, Ethan Wilde. My lectures and course materials, including slide presentations, online materials, tests, outlines, and similar materials, are protected by U.S. copyright law and by College policy. I am the exclusive owner of the copyright in those materials I create. You may take notes and make copies of course materials for your own use. You may also share those materials with another student who is registered and enrolled in this course. You may not reproduce, distribute or display (post/upload) lecture notes or recordings or course materials in any other way — whether or not a fee is charged — without my express written consent. You also may not allow others to do so.

© 2024 Ethan Wilde.

Course Summary:

Date Details Due