Build Mini Projects in JavaScript

Build Mini Projects in JavaScript

本课程是多个项目的一部分。

位教师：Tom Chant

访问权限由 Coursera Learning Team 提供

4个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

4个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

1 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将学到什么

Create efficient functions using arrow syntax and expressions.
Apply array methods like .map() and .reduce() to process data.
Debug JavaScript applications using common error-handling techniques.

您将获得的技能

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

4 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

此课程作为的一部分提供

在注册此课程时，您还需要选择一个特定的合作项目。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有4个模块

Are you ready to elevate your JavaScript skills with a project-based approach? This course is designed to guide you through fundamental and advanced JavaScript concepts using practical, real-world challenges.

Through hands-on projects, you'll explore functional methods such as .map() and .reduce(), key logical operations such as the ternary operator and short-circuiting, form submission, and much more. Next up, you'll explore increasingly advanced JavaScript concepts including loops, filter(), imports, and object destructuring by building three full projects; A meme picker, a cookie consent banner and an X/Twitter clone. You’ll learn to write cleaner, more efficient code and tackle challenges that solidify your understanding of JavaScript. By the end of this course, you'll have a solid understanding of powerful JavaScript methods and techniques ready to apply directly to your coding projects and in your coding career.

Build your JavaScript skills with practical challenges that cover methods, arrays, destructuring, and more.

涵盖的内容

1个作业49个插件

1个作业总计30分钟

JavaScript Essentials Quiz 30分钟

49个插件总计201分钟

Intro to Mini Projects 1分钟
Welcome to interactive lessons! 1分钟
Object Destructuring 3分钟
Object Destructuring Challenge 2分钟
The .map() Method 7分钟
The .map() Method Challenge 4分钟
The .join() Method 3分钟
The .join() Method Challenge 2分钟
.map() vs .forEach() 5分钟
For loop Break and Continue 5分钟
The dangers of innerHTML 5分钟
Beyond Function Declarations 1: Function Expressions 3分钟
Beyond Function Declarations 2: Function Expression Challenge 2分钟
Beyond Function Declarations 3: Arrow Functions 6分钟
Arrow Functions Challenge 4分钟
Inline Arrow Functions Challenge 2分钟
Import Export (named) 4分钟
Import Export (default) 4分钟
The .reduce() Method 6分钟
The .reduce() Method Challenge 4分钟
The .reduce() Method with Objects 8分钟
The .reduce() Method with Objects Challenge 3分钟
Default Parameters 3分钟
Super Challenge Set-up 3分钟
Super Challenge Solution 9分钟
The Ternary Operator 4分钟
The Ternary Operator for Complex Conditionals 3分钟
Ternary Operator Challenge 4分钟
Twimba Ternary Refactor 5分钟
The Rest Parameter 5分钟
The Rest Parameter Challenge 7分钟
Spread Syntax (...) 4分钟
Spread Syntax (...) Challenge 5分钟
Short-circuiting with OR (||) 5分钟
Short-circuiting with OR (||) Challenge 2分钟
Short-circuiting with AND (&&) 3分钟
Short-circuiting with AND (&&) Challenge 4分钟
Switch Statements 5分钟
Constructors: Date() 5分钟
The Error() Constructor 3分钟
Objects with Methods and 'this' 5分钟
Objects to Constructor Functions 5分钟
Constructor Function Challenge 5分钟
Constructor Functions to Classes 5分钟
Constructor Functions to Classes Challenge 2分钟
Debugging: Errors (new) 7分钟
Debugging: console.error 2分钟
Debugging: try...catch 5分钟
Recap 2分钟

This section teaches you how to build an interactive cookie consent modal using JavaScript, covering timed display, styling, forms, validation, accessibility, and user interaction handling.

涵盖的内容

1个作业31个插件

1个作业总计80分钟

Build an Annoying Cookie Consent Graded Assignment 80分钟

31个插件总计111分钟

Cookie Consent Intro 3分钟
Position the modal 3分钟
Aside: setTimeout 4分钟
Set the timer 2分钟
Aside: element.style 6分钟
Make the modal reappear 2分钟
Close the modal 3分钟
Aside: Forms 7分钟
Add a form 1 2分钟
Aside: Forms - submitting 5分钟
Aside: Forms - challenge 3分钟
Aside: Validation Attributes 8分钟
Submit the form 3分钟
Aside: preventDefault 4分钟
preventDefault Challenge 3分钟
Buttons in forms - weird behaviour 3分钟
Add modal message 2分钟
Add modal messages 2 6分钟
Add modal messages 3 3分钟
Aside: FormData 4分钟
Form Data 1 2分钟
Aside: FormData methods 3分钟
Form Data 2 3分钟
Aside: Disabling elements 6分钟
Disable the close button 3分钟
There is no choice 1 4分钟
Aside: classlist.toggle 4分钟
Aside: Classlist Toggle Challenge 3分钟
There is no choice 2 3分钟
Accessibility Issues 2分钟
Recap 2分钟

This section guides you through looping, data handling, DOM manipulation, and event-driven programming in JavaScript, culminating in building an interactive feature that filters and displays cats based on user-selected emotions.

涵盖的内容

1个作业37个插件

1个作业总计30分钟

Build a Meme Picker Graded Assignment 30分钟

37个插件总计166分钟

Intro 4分钟
What a horrible for loop 3分钟
Aside: for of 5分钟
Use a for of 2分钟
Nest the for of 5分钟
Render out the emotions 1 4分钟
Render out emotions 2 6分钟
Aside: import the data 6分钟
Import the data 2分钟
Aside: Radio Inputs 6分钟
Render the radios inputs 6分钟
Aside: .includes() 6分钟
remove duplicates 3分钟
Aside: e.target 6分钟
Get the id of the clicked option 3分钟
Aside: parentElement 3分钟
Aside: classlist add/remove 7分钟
Add colour to the selected emotion 6分钟
Aside: getElementsByClassName 5分钟
Remove the highlight class 2分钟
Aside: querySelector and why it's useful 5分钟
Connect the button 5分钟
Has an emotion been chosen? 3分钟
Aside: checkbox 6分钟
isGif 4分钟
Aside: filter() 6分钟
Aside: filter() 2 5分钟
Find matches with .filter() 4分钟
Animated GIFs Only 4分钟
Introducing two important functions 5分钟
If there's only one cat... 5分钟
If there's more than one cat... 4分钟
renderCat() 5分钟
Close the modal 2分钟
The order of things 3分钟
Aside: Select Element 7分钟
Recap 3分钟

In this module, you’ll learn how to build a fully interactive Twitter clone (“Twimba”) by working with DOM manipulation, event handling, data attributes, and conditional rendering in JavaScript.