About 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 & 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.
Created by: University of Michigan
Taught by: Colleen van Lent, Ph.D., Lecturer
School of Information
Taught by: Charles Severance, Associate Professor
School of Information
| Basic Info | Course 3 of 5 in the Web Design for Everybody (Basics of Web Development and Coding) Specialization |
| Language | English |
| How To Pass | Pass all graded assignments to complete the course. |
| User Ratings |
Syllabus
WEEK 1
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.
6 videos, 10 readings
- Материал для самостоятельного изучения: Syllabus
- Материал для самостоятельного изучения: Help us learn more about you!
- Материал для самостоятельного изучения: Resources
- Материал для самостоятельного изучения: "What are these deadlines?"
- Video: Introduction
- Материал для самостоятельного изучения: Link to All of the Code for Week One
- Материал для самостоятельного изучения: The Document Object Model (DOM)
- Video: DOM Review with Object Oriented Programming
- Video: Output
- Материал для самостоятельного изучения: Trying to Create and Debug Your Own Output
- Video: Variables
- Video: Data Types
- Video: Operators and Expressions
- Материал для самостоятельного изучения: Notice for Auditing Learners: Assignment Submission
- Вопрос для обсуждения: Optional Discussion - CodePen
- Материал для самостоятельного изучения: Optional Materials
- Материал для самостоятельного изучения: The History of "Debugging"
Graded: Week One
WEEK 2
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.
7 videos, 6 readings, 1 practice quiz
- Материал для самостоятельного изучения: Link to All of the Code for Week Two
- Материал для самостоятельного изучения: Functions
- Video: Functions
- Video: Code Placement
- Материал для самостоятельного изучения: Organizing Your Code
- Video: Folder Structure / Organizing Your Code
- Video: Events
- Материал для самостоятельного изучения: Mastering Events and Functions
- Video: Code With Me - Events
- Материал для самостоятельного изучения: Just a little note before the next video
- Video: "this"
- Материал для самостоятельного изучения: Homework Time!!
- Video: Photo Gallery
- Тренировочный тест: Optional - Week Two Review
Graded: JavaScript Interactive Photo Gallery
WEEK 3
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.
7 videos, 4 readings
- Материал для самостоятельного изучения: Link to All of the Code for Week Three
- Материал для самостоятельного изучения: A JavaScript Cheat Sheet
- Материал для самостоятельного изучения: Arrays
- Video: JavaScript Arrays
- Video: Code With Me - Arrays
- Материал для самостоятельного изучения: Advanced Coding Techniques
- Video: JavaScript Iteration
- Video: Flow Of Control
- Video: Code With Me - Combining Loops and Conditionals
- Video: Advanced Conditionals
- Video: Common Errors
Graded: JavaScript Review
WEEK 4
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.
5 videos, 7 readings
- Материал для самостоятельного изучения: Link to All of the Code for Week Four
- Материал для самостоятельного изучения: Introduction to Forms
- Video: Simple Forms
- Video: Simple Validation
- Материал для самостоятельного изучения: "Cool Stuff" - Friend or Foe?
- Video: Comparing Two Inputs
- Video: Checkboxes and Radio Buttons
- Материал для самостоятельного изучения: Using Forms on Your Site
- Материал для самостоятельного изучения: More Code Examples
- Video: Conclusion
- Материал для самостоятельного изучения: Intro to JQuery
- Материал для самостоятельного изучения: Post-course Survey
Graded: Autocomplete with JavaScript
FAQs
How It Works
Задания курса
Каждый курс — это интерактивный учебник, который содержит видеоматериалы, тесты и проекты.
Помощь сокурсников
Общайтесь с тысячами других учащихся: обсуждайте идеи, материалы курса и помогайте друг другу осваивать новые понятия.
Сертификаты
Получите документы о прохождении курсов и поделитесь своим успехом с друзьями, коллегами и работодателями.
Creators
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.
Pricing
| Purchase Course | |
|---|---|
| Access to course materials | Available |
| Access to graded materials | Available |
| Receive a final grade | Available |
| Earn a shareable Course Certificate | Available |
Ratings and Reviews
Excellent course video, lecture, mentor, slides, notes, assessments, peer review so on. Overall great course, wonderful lecturer...
Thank you! Colleen is great!
Good course to start your journey with JavaScript,but if you wanted to dive deeper into JavaScript,you will need to explore more concepts apart from what is shown in Video lectures
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
AS
The instructor is great, the content is well organized and the assignments are good to implement what you've learned.