這個免費的交互式課程在一小時內學習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設計新手訓練營。