这个免费的交互式课程在一小时内学习JavaScript

JavaScript is the most popular programming language on the web. You can use it to create websites, servers, games and even native apps. So no wonder it’s such a valuable skill in today’s job market.

JavaScript是网络上最流行的编程语言。 您可以使用它来创建网站，服务器，游戏，甚至本机应用程序。 因此，难怪它在当今的就业市场中是如此宝贵的技能。

So I reached out to Dylan C. Israel — a programming YouTuber and freeCodeCamp grad — and asked him to create a free JavaScript course on Scrimba.

因此，我联系了正在编程的YouTuber和freeCodeCamp毕业生Dylan C. Israel ，并要求他在Scrimba上创建免费JavaScript课程 。

The course contains 15 lectures and 7 interactive challenges and is suitable for beginners. It will give you a quick intro to the most important JavaScript concepts.

该课程包含15个讲座和7个互动挑战，适合初学者。 它将为您快速介绍最重要JavaScript概念。

Here’s how the course is laid out.

这是课程的布局方式。

第1部分：简介 (Part 1: Introduction)

As always, the course begins with a screencast about the subject in general and an overview of the course structure. Dylan will also tell you a little bit about himself so that you’ll get to know him before you dive into the coding.

与往常一样，本课程从总体讲授该课程的屏幕录像和课程结构概述开始。 迪伦(Dylan)还将告诉您一些有关他自己的信息，以便您在深入学习编码之前先认识他。

第2部分：变量 (Part 2: Variables)

The first concept you’ll need to learn is variables, which are for storing values. In modern JavaScript there are two keywords for doing that: let and const.

您需要学习的第一个概念是变量，用于存储值。 在现代JavaScript中，有两个关键字可以做到这一点： let和const 。

Let’s store the name Dylan in a let which we’ll call name.

让我们将名称Dylan存储在一个let ，我们将其称为name 。

let name = 'Dylan';  
console.log(name);

// --> 'Dylan'

As you can see, we can then refer to that variable later on in order to fetch out the value, for example, to log it out to the console, using the console.log() method.

如您所见，我们稍后可以引用该变量，以获取值，例如，使用console.log()方法将其注销到控制台。

第3部分：字符串 (Part 3: Strings)

In the second lesson, you’ll learn about your first data type: strings. A string simply stores a sequence of characters wrapped in quotes. So whenever you wrap something inside single or double quotes, it’s turned into a string in JavaScript, like this:

在第二课中，您将学习第一个数据类型： strings 。 字符串仅存储用引号引起来的一系列字符。 因此，每当您在单引号或双引号中包装内容时，它就会在JavaScript中变成字符串，如下所示：

let name = "Dylan";

第4部分：弦乐挑战 (Part 4: Strings challenge)

It’s time for the first challenge of the course! In this one, you’re going to try and combine two variables into one.

现在是该课程的第一个挑战！ 在这一章中，您将尝试将两个变量合并为一个。

let firstName = "Dylan";  
let lastName = "Israel";

console.log(fullName);

// --> ReferenceError: fullName is not defined

If this is your very first introduction to JavaScript you’ll need to use your freshly acquired knowledge of both variables and strings in order to solve this problem. You also might have to do a little code of experimentation. Luckily, this is possible in the Scrimba platform.

如果这是您JavaScript入门，那么您需要使用新获得的变量和字符串知识来解决此问题。 您可能还需要做一些实验代码。 幸运的是，这在Scrimba平台中是可能的。

第5部分：数字 (Part 5: Numbers)

Next up is the second data type you’ll need to learn: numbers. Other languages often have multiple data types for numbers, like floats for decimal numbers and integers for the whole numbers_._ However, in JavaScript, they’re both numbers.

接下来是您需要学习的第二种数据类型： 数字 。 其他语言通常具有多种数字数据类型，例如，十进制数字为浮点数 ， 整数为整数 _._。但是，在JavaScript中，它们都是数字 。

We can use the typeof to check the data type:

我们可以使用typeof来检查数据类型：

let example1 = 7;  
let example2 = 7.77;

console.log(typeof example1);  
console.log(typeof example2);

// --> "number"  
// --> "number"

In this lecture you’ll also learn how to convert values between strings and number using parseInt() and parseFloat() methods.

在本讲座中，您还将学习如何使用parseInt()和parseFloat()方法在字符串和数字之间转换值。

第6部分：数字挑战 (Part 6: Numbers challenge)

In the numbers challenge, you’ll be exposed to a few different strings and numbers combined with the methods you’ve learned so far. Your job is to guess which values these expressions end up as.

在数字挑战中，您将接触到一些不同的字符串和数字以及到目前为止学到的方法。 您的工作是猜测这些表达式最终会变成哪个值。

let example1 = parseInt("33 World 22");  
let example2 = parseFloat('44 Dylan 33');  
let example3 = 55.3333.toFixed(0);  
let example4 = 200.0.toFixed(2);

It might be a bit tricky, so don’t be discouraged if you do mistakes!

这可能有些棘手，所以如果您犯了错误，不要气disc！

第7部分：布尔值 (Part 7: Booleans)

Booleans are simple, they’re either true or false. Here’s how you create a boolean value:

布尔值很简单，它们为true或false。 这是创建布尔值的方法：

let example = true;

The fact that example now is set to true can come in handy when you’re programming, as you sometimes want to take actions based upon conditions like this one.

现在的example已设置为true的事实在您进行编程时会派上用场，因为有时您希望根据此类条件进行操作。

You’ll also learn about truthy or falsy values in this lecture, which are other data types, like strings or numbers, but which has a truthy or falsy side to them.

您还将了解在此讲学truthy或falsy值，它是其他数据类型，如字符串或数字，但其中有一个truthy或falsy边给他们。

第8部分：布尔运算挑战 (Part 8: Booleans challenge)

In the booleans challenge, Dylan follows the same pattern as the numbers one, where you are to guess a bunch of values. Your job is to guess whether or not these variables are truthy or falsy:

在布尔型挑战中，Dylan遵循与数字一相同的模式，在这里您要猜测一堆值。 您的工作是猜测这些变量是真实的还是虚假的：

let example1 = false;  
let example2 = true;  
let example3 = null;  
let example4 = undefined;  
let example5 = '';  
let example6 = NaN;  
let example7 = -5;  
let example8 = 0;

第9部分：数组 (Part 9: Arrays)

The data types you’ve learned up until now, are so-called primitive values. Now it’s about time to learn about the array, which is a non-primitive value.

到目前为止，您所了解的数据类型就是所谓的原始值。 现在是时候了解数组了，这是一个非原始值。

An array is simply a list of values, like this:

数组只是一个值列表，如下所示：

let example = ['programming', 'design', 'art'];

You’ll learn how to create arrays, how to add and remove items and even how to loop through the entire array using the forEach() method.

您将学习如何创建数组，如何添加和删除项目，以及如何使用forEach()方法遍历整个数组。

第10部分：数组挑战 (Part 10: Arrays challenge)

In the arrays challenge you’ll be introduced to the concept of padding by reference or value, which is important in order to understand JavaScript properly. We’ll also revisit this concept later on, as repetition will help the knowledge stick.

在数组挑战中，将向您介绍通过引用或值进行填充的概念，这对于正确理解JavaScript非常重要。 稍后，我们还将重新讨论该概念，因为重复将有助于知识的坚持。

let example1 = ['Dylan', 5, true];  
let example2 = example1;

example2.push(11);

console.log(example1);  
console.log(example2);

The results that are logged above might surprise you if you’re not aware of the passing by reference concept.

如果您不知道按引用传递概念，则上面记录的结果可能会让您感到惊讶。

第11部分：对象 (Part 11: Objects)

From arrays, we’ll continue to its close relatives called objects. Objects are like arrays in the sense that they can store multiple values. However, instead of consisting of a list of values, an object consists of so-called key-value pairs. We create an object using curly brackets:

从数组开始，我们将继续其近亲称为对象。 从某种意义上说，对象可以存储多个值，就象数组。 但是，对象不是由值列表组成，而是由所谓的键值对组成。 我们使用大括号创建一个对象：

let example = {  
  firstName: 'Dylan';  
  lastName: 'Israel'  
};

In this lecture, you’ll learn how to populate objects and fetch their values.

在本讲座中，您将学习如何填充对象并获取它们的值。

第12部分：对象挑战 (Part 12: Objects challenge)

In this challenge, we’ll revisit the concept of passing by reference or value. You’ll also learn about the Object.assign() method, which allows you to create copies of objects.

在这个挑战中，我们将重新审视通过引用或值传递的概念。 您还将了解Object.assign()方法，该方法使您可以创建对象的副本。

let example1 = {  
  firstName: 'Dylan'  
};  
let example2 = example1;  
example2.lastName = 'Israel';

console.log(example1);  
console.log(example2);

第13部分：算术运算符 (Part 13: Arithmetic operators)

A programming language would be almost useless if it didn’t know how to do arithmetic operations. Doing it in JavaScript is pretty straight-forward:

如果编程语言不知道如何进行算术运算，则几乎是无用的。 使用JavaScript进行操作非常简单：

let example = 5 + 5;

console.log(example)

// --> 10

In this lecture, you’ll also experience how JavaScript handles expressions where multiple operations are combined.

在本讲座中，您还将体验JavaScript如何处理组合了多个操作的表达式。

第14部分：关系运算符 (Part 14: Relational operators)

When programming we often have to compare values, to see if they’re equal to each other, or if one of them is larger than the other, so in this lecture, you’ll learn how to do that.

在编程时，我们经常必须比较值，以查看它们是否相等，或者其中一个大于另一个，因此在本讲座中，您将学习如何做到这一点。

let example1 = 10;  
let example2 = 15;

console.log(example1 > example2)

// --> false

And real-world example of this would be when you want to check if a user has got enough credit to purchase an item. If the credit is above the price, then they’re allowed to buy, otherwise, they’re not.

现实的例子就是您想检查用户是否有足够的信用购买商品。 如果信用额高于价格，则允许他们购买，否则，则不允许购买。

第15部分：关系运算符的挑战 (Part 15: Relational operators challenge)

In this challenge you’ll be able to test how well you understand relational operators, through guessing the boolean value of these variables:

在这个挑战中，您将能够通过猜测以下变量的布尔值来测试您对关系运算符的理解程度：

let example1 = 5 === 5;  
let example2 = 5 == '5';  
let example3 = 6 != '6';  
let example4 = 7 !== '7';

第16部分：递增和递减 (Part 16: Increment & decrement)

Making values grow or shrink is very often done in programming, for example when you’re counting. It can be done in a few different ways, though, so it deserves its own lecture.

使价值增长或收缩通常是在编程中完成的，例如，在进行计数时。 但是，它可以通过几种不同的方式来完成，因此值得一听。

let example = 1;  
example = example + 1;

console.log(example);

// --> 2

第17部分：递增和递减挑战 (Part 17: Increment & decrement challenge)

This challenge will look at the difference between doing example++ and ++example.

这项挑战将着眼于执行example++和++example之间的区别。

This might require you to experiment a bit in order to understand it, or even googling, which also is a critical skill for any developer.

这可能需要您进行一些尝试才能理解它，甚至需要进行谷歌搜索，这对于任何开发人员来说都是至关重要的技能。

第18部分：如果，否则，如果不是 (Part 18: If, else if, else)

Conditional statements like if, if else and else are critical when programming. It’s what allows you to have logic in your application. So in this lecture, you’ll learn how to work with all three of them.

编程时，条件语句(如if ， if else和else至关重要。 这就是使您在应用程序中具有逻辑的原因。 因此，在本讲座中，您将学习如何使用所有这三个方法。

let example = 5;

if (example === 5) {  
  console.log('Runs');  
} else if ( true ) {  
  console.log('else if');  
} else {  
  console.log('else');  
}

You’ll also learn about how to combine these conditionals with relational operators to make complex logic.

您还将学习如何将这些条件与关系运算符结合起来以构成复杂的逻辑。

第19部分：如果，否则，如果挑战 (Part 19: If, else if, else challenge)

In this challenge, you’ll try to guess what the following expressions evaluate to. This builds upon both what you’ve learned in the relational operators' lecture and in the previous one.

在这个挑战中，您将尝试猜测以下表达式的计算结果。 这是建立在您在关系运算符的讲座和上一堂课中学到的知识的基础上。

console.log(10 === 10 && 5 < 4);  
console.log(10 === 10 || 5 < 4);  
console.log((5 >= 5 || 4 > 4) && 3 + 2 === 5);

Again, don’t lose the courage if you don’t manage to guess correctly. This stuff is tricky for a beginner!

同样，如果您无法正确猜测，也不要失去勇气。 对于初学者来说，这些东西很棘手！

第20部分：开关 (Part 20: Switch)

In this lecture, you’ll learn about so-called switch statements, which are really handy if you have many conditions to check between. Here’s an example of that:

在本讲座中，您将学习所谓的switch语句，如果您有许多条件需要检查的话，这些语句非常有用。 这是一个例子：

let studentAnswer = 'D';

switch(studentAnswer) {  
  case 'A':  
    console.log('A is wrong.');  
    break;  
  case 'B' :  
    console.log('B is wrong.');  
    break;  
  case 'C':  
    console.log('C is correct.');  
    break;  
  default:  
    console.log('Not a real answer.');  
}

第21部分：For循环 (Part 21: For loop)

For loops allow you to execute a block of code a number of times. The amount is dictated by you by setting three conditionals. Here’s an example of a simple for loop:

For循环使您可以多次执行代码块。 金额由您通过设置三个条件决定。 这是一个简单的for循环的示例：

for (let i = 0; i < 5; i++) {  
  console.log(i);  
}

// -->  
// 0  
// 1  
// 2  
// 3  
// 4

In this lecture, you’ll see how you can calculate the total sum of an array of numbers using a for loop.

在本讲座中，您将看到如何使用for循环来计算数字数组的总和。

第22部分：While＆While (Part 22: While & do while)

If you want to execute a piece of code multiple times but don’t know how many times, then a while loop might be exactly what you need. It allows you to execute a block of code as long as a certain condition is met.

如果要执行一段代码多次，但不知道有多少次，那么while你需要的循环可能完全相同。 只要满足特定条件，它就可以执行代码块。

let count = 0;

while (count < 20) {  
  count++;  
}

console.log(count);

You’ll also learn about the do/while statement.

您还将了解do/while语句。

第23部分：函数 (Part 23: Functions)

Finally, you’ll need to learn about functions, as it’s critical for any application. You’ll learn the syntax of functions, how they’re called and how you can add parameters to them.

最后，您需要了解函数，因为函数对于任何应用程序都是至关重要的。 您将学习函数的语法，如何调用它们以及如何向它们添加参数。

function add() {  
  console.log('add');  
}

add();

// --> 'add'

And when you’ve finished this lecture you’re done with the syllabus for this course, as you know have an understanding of the core concepts in JavaScript.

当您完成本教程的学习后，您将完成本课程的教学大纲，因为您知道自己已经了解了JavaScript的核心概念。

第24部分：接下来是什么？ (Part 24: What’s next?)

Dylan ends the course by telling you a little bit about what you can do next in order to further improve your JavaScript skills! Remember, this course was just the beginning.

Dylan通过向您介绍一些接下来可以做什么以进一步提高JavaScript技能来结束本课程！ 请记住，这只是一门课程。

Once you’ve reached this far, I’d strongly encourage you to continue, as you’re on track to gain highly valuable skill in today's society.

一旦您达到了这一目标，我强烈建议您继续前进，因为您正在逐步获得当今社会非常宝贵的技能。

Not only can JavaScript help you improve your career, but you’ll also be able to build products on your own!

JavaScript不仅可以帮助您改善职业生涯，而且还可以自行构建产品！

So be sure to take this free course today. You’ll be able to build projects in JavaScript on your own before you know it!

因此，请务必今天就参加此免费课程 。 您将能够在不知不觉中自行使用JavaScript构建项目！

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/want-to-learn-javascript-heres-a-free-24-part-course-to-get-you-started-e7777baf86fb/