Interactivity with JavaScript
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Interactivity with JavaScript
This course is part of Web Design for Everybody: Basics of Web Development & Coding Specialization
230,811 already enrolled
Included with
7,377 reviews
7,377 reviews
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.
Skills you'll gain
Details to know
3 assignments
See how employees at top companies are mastering in-demand skills
Build your subject-matter expertise
- Learn new concepts from industry experts
- Gain a foundational understanding of a subject or tool
- Develop job-relevant skills with hands-on projects
- Earn a shareable career certificate
There are 4 modules in this course
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 and 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.
If you haven't use a traditional programming language before, this first week is key. Before we begin with the how, we will talk about the why, mainly why we want to use JavaScript. The main reason is that it is very easy for JavaScript to work with the DOM. And easy is always a great way to start. Speaking of starting out, it is also always more fun when our code actually does something we can see, so we will jump quickly into different ways we can generate output. It won't be flashy yet, but it will be a great way to get your feet wet with traditional programming. After that we go back to the basics of how a computer uses data. We begin with variables, expressions, and operators.
What's included
12 videos9 readings1 assignment1 discussion prompt
12 videos•Total 80 minutes
- Introduction to JavaScript•4 minutes
- DOM Review with Object Oriented Programming•7 minutes
- Newer DOM Methods•5 minutes
- Output•13 minutes
- Variables•9 minutes
- Data Types•8 minutes
- Operators and Expressions•8 minutes
- Getting Started with Github•5 minutes
- Downloading and Uploading Code with VSCode and Github•4 minutes
- Copying Code with GitHub Codespaces•4 minutes
- Uploading to GitHub Pages•8 minutes
- Review: Publishing Your Site•5 minutes
9 readings•Total 42 minutes
- Course Syllabus•10 minutes
- Pre-Course Survey•5 minutes
- Course Resources•4 minutes
- "What are these deadlines?"•3 minutes
- Resources•2 minutes
- The Document Object Model (DOM)•5 minutes
- Accessing the DOM Methods•10 minutes
- Semicolons•1 minute
- Trying to Create and Debug Your Own Output•2 minutes
1 assignment•Total 40 minutes
- Week One Quiz•40 minutes
1 discussion prompt•Total 10 minutes
- Share Your Tips•10 minutes
If you have written HTML code in the past, hopefully you have fallen into the great habit of validating your code -- making sure that you close all of your open tags. There are other rules that you may or may not have been following as well, for instance the importance of using each id attribute only once per page. This is called writing "clean" code. The reasoning and importance of following these rules becomes clear as we begin to manipulate the different components of your webpage based on the the actions of the person interacting with your page. In particular you will learn about the JavaScript Mouse Events and Touch Events. This week's materials will end with a photo gallery example that you can create along with me.
What's included
7 videos7 readings1 assignment1 peer review1 app item
7 videos•Total 53 minutes
- Functions•7 minutes
- Code Placement•7 minutes
- Folder Structure / Organizing Your Code•6 minutes
- Events•10 minutes
- Code With Me: Events•8 minutes
- "this"•10 minutes
- Homework: JavaScript Interactive Photo Gallery•6 minutes
7 readings•Total 36 minutes
- Resources•2 minutes
- Functions•3 minutes
- Organizing Your Code•3 minutes
- Mastering Events and Functions•10 minutes
- Just a little note before the next video•3 minutes
- Homework Time!!•5 minutes
- Introduction to the Gamut Gallery•10 minutes
1 assignment•Total 30 minutes
- Week Two Quiz•30 minutes
1 peer review•Total 45 minutes
- JavaScript Interactive Photo Gallery•45 minutes
1 app item•Total 10 minutes
- Homework: Optional Submission Gallery•10 minutes
This week we will delve into more complex programming concepts: arrays and looping. Arrays allow you to represent groups of related information. Looping provides efficiency and flexibility to your programs. Using both we will expand upon the photo gallery example.
What's included
2 videos5 readings1 assignment
2 videos•Total 13 minutes
- JavaScript Arrays•7 minutes
- Code With Me: Arrays•5 minutes
5 readings•Total 20 minutes
- Resources•5 minutes
- A JavaScript Cheat Sheet•5 minutes
- Tabindex and Accessibility•3 minutes
- Using JavaScript with Attributes•5 minutes
- Arrays•2 minutes
1 assignment•Total 30 minutes
- Week Three Review Quiz•30 minutes
This week is all about putting concepts together to do "cool" things. And we even stop for a second to talk about the the trade-off between cool things and accessibility. The final project this week will be a new version of your coding project in Week 2. You will make an interactive photo gallery from your own images and will add the functionality of keyboard accessibility to it.
What's included
5 videos6 readings1 peer review1 app item
5 videos•Total 33 minutes
- Code With Me: Randomizing Your Images Using Arrays•8 minutes
- Code With Me: Using Lightbox•10 minutes
- Code With Me: Looping through Images•8 minutes
- Final Project Description•3 minutes
- Conclusion•3 minutes
6 readings•Total 35 minutes
- Resources•5 minutes
- Writing loops in JavaScript•5 minutes
- Advanced Coding Techniques•2 minutes
- "Cool Stuff" - Friend or Foe?•3 minutes
- Final Project Description•10 minutes
- Post-Course Survey•10 minutes
1 peer review•Total 120 minutes
- Final Project: Your Own Accessible Photo Gallery•120 minutes
1 app item•Total 10 minutes
- Final Project: Optional Submission Gallery•10 minutes
Earn a career certificate
Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.
Instructors
Offered by
Explore more from Mobile and Web Development
- Status: Free TrialU
University of California, Davis
Course
- Status: Free Trial
- Status: Free Trial
Course
Why people choose Coursera for their career
Learner reviews
- 5 stars
75.72%
- 4 stars
18.88%
- 3 stars
4.17%
- 2 stars
0.77%
- 1 star
0.44%
Showing 3 of 7377
Reviewed on Jul 27, 2017
It's a great course to begin understand JavaScript. It gives you needed basics of JS. And Colleen van Lent is excellent teacher, she helps you in this journey called "coding with JS".
Reviewed on Mar 15, 2016
An excellent course, my JavaScript has improved greatly since I completed the requirements. Colleen is a fantastic teacher, I found the lectures to be highly informative and the assignments good fun.
Reviewed on Feb 7, 2018
Well explained, I learned some interactivity with HTML by learning native JavaScript (was using jQuery always)... Perhaps I expected some more advanced stuff than this (like audio, video, canvas).
Frequently asked questions
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.
More questions
Financial aid available,