Clinical Professor, School of Information
Interactivity with JavaScript
What You'll Learn
- Understand how JavaScript is used to react to user events.
- Write your own JavaScript code to let a person interact with your page.
- Discuss how JavaScript can introduce accessibility issues.
4 Modules
8 Hours
2 hrs per module (approx.)
Rating
About Interactivity with JavaScript
If you want to take your website to the next level, the ability to incorporate interactivity is a must. But adding some of these types of capabilities requires a stronger programming language than HTML5 or CSS3, and JavaScript can provide just what you need. With just a basic understanding of the language, you can create a page that will react to common events such as page loads, mouse clicks & movements, and even keyboard input.
This course will introduce you to the basics of the JavaScript language. We will cover concepts such as variables, looping, functions, and even a little bit about debugging tools. You will understand how the Document Object Model (DOM) is used by JavaScript to identify and modify specific parts of your page. After the course, learners will be able to react to DOM Events and dynamically alter the contents and style of their page. The class will culminate in a final project - the creation of an interactive HTML5 form that accepts and verifies input.
This can be completed as the third or fourth course in the Web Design For Everybody specialization.
Skills You'll Gain
- DOM Scripting
- Pure JavaScript
- Web Development
What You'll Earn
- Certificate of Completion:
- Certificates of completion acknowledge knowledge acquired upon completion of a non-credit course or program.
Welcome Message
Interactivity with JavaScript introduces learners to programming fundamentals for adding interactivity to web pages. Designed for those comfortable with HTML and CSS, the course focuses on using JavaScript to manipulate the DOM and create accessible, interactive user experiences. This is the third course in the Web Design for Everybody: Basics of Web Development & Coding Specialization.
This abbreviated syllabus description was created with the help of AI tools and reviewed by staff. The full syllabus is available to those who enroll in the course.
Course Schedule
Module 1: Data Types
- Reading: Course Syllabus
- Video: Introduction to JavaScript
- Reading: Pre-Course Survey
- Reading: Course Resources
- Reading: "What are these deadlines?"
- Reading: Resources
- Reading: The Document Object Model (DOM)
- Video: DOM Review with Object Oriented Programming
- Reading: Accessing the DOM Methods
- Video: Newer DOM Methods
- Reading: Semicolons
- Video: Output
- Reading: Trying to Create and Debug Your Own Output
- Video: Variables
- Video: Data Types
- Video: Operators and Expressions
- Discussion Prompt: Share Your Tips
- Video: Getting Started with Github
- Video: Downloading and Uploading Code with VSCode and Github
- Video: Copying Code with GitHub Codespaces
- Video: Uploading to GitHub Pages
- Video: Review: Publishing Your Site
- Graded: Week One Quiz
Module 2: Reacting to Your Audience
- Reading: Resources
- Reading: Functions
- Video: Functions
- Video: Code Placement
- Reading: Organizing Your Code
- Video: Folder Structure / Organizing Your Code
- Video: Events
- Reading: Mastering Events and Functions
- Video: Code With Me: Events
- Reading: Just a little note before the next video
- Video: "this"
- Reading: Homework Time!!
- Video: Homework: JavaScript Interactive Photo Gallery
- Reading: Introduction to the Gamut Gallery
- App Item: Homework: Optional Submission Gallery
- Graded: Week Two Quiz
- Graded: JavaScript Interactive Photo Gallery
Module 3: Arrays and Looping
- Reading: Resources
- Reading: A JavaScript Cheat Sheet
- Reading: Tabindex and Accessibility
- Reading: Using JavaScript with Attributes
- Reading: Arrays
- Video: JavaScript Arrays
- Video: Code With Me: Arrays
- Graded: Week Three Review Quiz
Module 4: Using JS for Interactive Images
- Reading: Resources
- Reading: Writing loops in JavaScript
- Reading: Advanced Coding Techniques
- Video: Code With Me: Randomizing Your Images Using Arrays
- Video: Code With Me: Using Lightbox
- Video: Code With Me: Looping through Images
- Reading: "Cool Stuff" - Friend or Foe?
- Reading: Final Project Description
- Video: Final Project Description
- App Item: Final Project: Optional Submission Gallery
- Video: Conclusion
- Reading: Post-Course Survey
- Graded: Final Project: Your Own Accessible Photo Gallery
Grading Policy
Quizzes are 40% and Peer Review is 60% of your total grade. Learners must pass every graded assessment to pass the course. A score of 80% or higher is required on each quiz and coding assignment.
Lecturer
Course content developed by U-M faculty and managed by the university. Faculty titles and affiliations are updated periodically.
Beginner Level
No prior experience required
