Interactivity with JavaScript

4.6
2,231 ratings
515 reviews

Course 3 of 5 in the Web Design for Everybody (Basics of Web Development and Coding) Specialization

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 is the third course in the Web Design For Everybody specialization. A basic understanding of HTML and CSS is expected when you enroll in this class. Additional courses focus on enhancing the styling with responsive design and completing a capstone project.
Globe

100% 在线课程

立即开始,按照自己的计划学习。
Clock

完成时间大约为12 小时

建议:6 hours/week
Comment Dots

English

字幕:English

您将获得的技能

JavascriptWeb DevelopmentDocument Object ModelWeb Design
Globe

100% 在线课程

立即开始,按照自己的计划学习。
Clock

完成时间大约为12 小时

建议:6 hours/week
Comment Dots

English

字幕:English

Syllabus - What you will learn from this course

1

Section
Clock
3 hours to complete

Week One: Introduction to JavaScript

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. ...
Reading
6 videos (Total 50 min), 10 readings, 1 quiz
Video6 videos
DOM Review with Object Oriented Programming6m
Output13m
Variables9m
Data Types8m
Operators and Expressions8m
Reading10 readings
Syllabus7m
Help us learn more about you!10m
Resources4m
"What are these deadlines?"3m
Link to All of the Code for Week One3m
The Document Object Model (DOM)2m
Trying to Create and Debug Your Own Output5m
Notice for Auditing Learners: Assignment Submission10m
Optional Materials2m
The History of "Debugging"2m
Quiz1 practice exercises
Week One52m

2

Section
Clock
3 hours to complete

Week Two: Reacting to Your Audience

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....
Reading
7 videos (Total 53 min), 6 readings, 2 quizzes
Video7 videos
Code Placement6m
Folder Structure / Organizing Your Code5m
Events10m
Code With Me - Events7m
"this"9m
Photo Gallery5m
Reading6 readings
Link to All of the Code for Week Two2m
Functions3m
Organizing Your Code5m
Mastering Events and Functions3m
Just a little note before the next video3m
Homework Time!!2m
Quiz1 practice exercises
Optional - Week Two Review14m

3

Section
Clock
2 hours to complete

Week Three: Arrays and Looping

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....
Reading
7 videos (Total 57 min), 4 readings, 1 quiz
Video7 videos
Code With Me - Arrays5m
JavaScript Iteration7m
Flow Of Control11m
Code With Me - Combining Loops and Conditionals6m
Advanced Conditionals7m
Common Errors10m
Reading4 readings
Link to All of the Code for Week Three2m
A JavaScript Cheat Sheet10m
Arrays5m
Advanced Coding Techniques2m
Quiz1 practice exercises
JavaScript Review30m

4

Section
Clock
3 hours to complete

Week Four: Validating Form Data

This week we will put a number of the concepts from this course together to tackle a new project - creating and validating input entered into an HTML5 form. Forms are extremely common elements used to input and send data to via a webpage. We will look at how you can use JavaScript to add options to your forms, to pre-fill data based on previous input, and even to check that passwords match....
Reading
5 videos (Total 46 min), 7 readings, 1 quiz
Video5 videos
Simple Validation10m
Comparing Two Inputs8m
Checkboxes and Radio Buttons11m
Conclusion3m
Reading7 readings
Link to All of the Code for Week Four5m
Introduction to Forms2m
"Cool Stuff" - Friend or Foe?4m
Using Forms on Your Site3m
More Code Examples2m
Intro to JQuery1m
Post-course Survey10m
4.6
Direction Signs

40%

started a new career after completing these courses
Briefcase

83%

got a tangible career benefit from this course
Money

10%

got a pay increase or promotion

Top Reviews

By NCAug 11th 2016

Definitely the best way to introduce someone in JavaScript. Its really explained in a very easy and clear way. After this course you are prepared to go to further challenges. I strongly recommend it!

By MMFeb 7th 2016

I was glad to find a course that focused simply on the basics of Javascript. So many courses cover the three HTML, CSS, and JS, but don't give enough to really start working with Javascrip.\n\nThanks

Instructors

Avatar

Charles Severance

Associate Professor

About University of Michigan

The mission of the University of Michigan is to serve the people of Michigan and the world through preeminence in creating, communicating, preserving and applying knowledge, art, and academic values, and in developing leaders and citizens who will challenge the present and enrich the future....

Frequently Asked Questions

  • Once you enroll for a Certificate, you’ll have access to all videos, quizzes, and programming assignments (if applicable). Peer review assignments can only be submitted and reviewed once your session has begun. If you choose to explore the course without purchasing, you may not be able to access certain assignments.

  • If you pay for this course, you will have access to all of the features and content you need to earn a Course Certificate. If you complete the course successfully, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. Note that the Course Certificate does not represent official academic credit from the partner institution offering the course.

  • Yes! Coursera provides financial aid to learners who would like to complete a course but cannot afford the course fee. To apply for aid, select "Learn more and apply" in the Financial Aid section below the "Enroll" button. You'll be prompted to complete a simple application; no other paperwork is required.

More questions? Visit the Learner Help Center