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是網(wǎng)絡(luò)上最流行的編程語言。 您可以使用它來創(chuàng)建網(wǎng)站，服務(wù)器，游戲，甚至本機(jī)應(yīng)用程序。 因此，難怪它在當(dāng)今的就業(yè)市場中是如此寶貴的技能。

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.

因此，我聯(lián)系了正在編程的YouTuber和freeCodeCamp畢業(yè)生Dylan C. Israel ，并要求他在Scrimba上創(chuàng)建免費(fèi)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個(gè)講座和7個(gè)互動(dòng)挑戰(zhàn)，適合初學(xué)者。 它將為您快速介紹最重要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.

與往常一樣，本課程從總體講授該課程的屏幕錄像和課程結(jié)構(gòu)概述開始。 迪倫(Dylan)還將告訴您一些有關(guān)他自己的信息，以便您在深入學(xué)習(xí)編碼之前先認(rèn)識他。

第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.

您需要學(xué)習(xí)的第一個(gè)概念是變量，用于存儲值。 在現(xiàn)代JavaScript中，有兩個(gè)關(guān)鍵字可以做到這一點(diǎn)： let和const 。

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

讓我們將名稱Dylan存儲在一個(gè)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:

在第二課中，您將學(xué)習(xí)第一個(gè)數(shù)據(jù)類型： strings 。 字符串僅存儲用引號引起來的一系列字符。 因此，每當(dāng)您在單引號或雙引號中包裝內(nèi)容時(shí)，它就會在JavaScript中變成字符串，如下所示：

let name = "Dylan";

第4部分：弦樂挑戰(zhàn) (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.

現(xiàn)在是該課程的第一個(gè)挑戰(zhàn)！ 在這一章中，您將嘗試將兩個(gè)變量合并為一個(gè)。

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入門，那么您需要使用新獲得的變量和字符串知識來解決此問題。 您可能還需要做一些實(shí)驗(yàn)代碼。 幸運(yùn)的是，這在Scrimba平臺中是可能的。

第5部分：數(shù)字 (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.

接下來是您需要學(xué)習(xí)的第二種數(shù)據(jù)類型： 數(shù)字 。 其他語言通常具有多種數(shù)字?jǐn)?shù)據(jù)類型，例如，十進(jìn)制數(shù)字為浮點(diǎn)數(shù) ， 整數(shù)為整數(shù) _._。但是，在JavaScript中，它們都是數(shù)字 。

We can use the typeof to check the data type:

我們可以使用typeof來檢查數(shù)據(jù)類型：

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.

在本講座中，您還將學(xué)習(xí)如何使用parseInt()和parseFloat()方法在字符串和數(shù)字之間轉(zhuǎn)換值。

第6部分：數(shù)字挑戰(zhàn) (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.

在數(shù)字挑戰(zhàn)中，您將接觸到一些不同的字符串和數(shù)字以及到目前為止學(xué)到的方法。 您的工作是猜測這些表達(dá)式最終會變成哪個(gè)值。

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!

這可能有些棘手，所以如果您犯了錯(cuò)誤，不要?dú)鈊isc！

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

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

布爾值很簡單，它們?yōu)閠rue或false。 這是創(chuàng)建布爾值的方法：

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.

現(xiàn)在的example已設(shè)置為true的事實(shí)在您進(jìn)行編程時(shí)會派上用場，因?yàn)橛袝r(shí)您希望根據(jù)此類條件進(jìn)行操作。

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.

您還將了解在此講學(xué)truthy或falsy值，它是其他數(shù)據(jù)類型，如字符串或數(shù)字，但其中有一個(gè)truthy或falsy邊給他們。

第8部分：布爾運(yùn)算挑戰(zhàn) (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:

在布爾型挑戰(zhàn)中，Dylan遵循與數(shù)字一相同的模式，在這里您要猜測一堆值。 您的工作是猜測這些變量是真實(shí)的還是虛假的：

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

第9部分：數(shù)組 (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.

到目前為止，您所了解的數(shù)據(jù)類型就是所謂的原始值。 現(xiàn)在是時(shí)候了解數(shù)組了，這是一個(gè)非原始值。

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

數(shù)組只是一個(gè)值列表，如下所示：

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.

您將學(xué)習(xí)如何創(chuàng)建數(shù)組，如何添加和刪除項(xiàng)目，以及如何使用forEach()方法遍歷整個(gè)數(shù)組。

第10部分：數(shù)組挑戰(zhàn) (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.

在數(shù)組挑戰(zhàn)中，將向您介紹通過引用或值進(jìn)行填充的概念，這對于正確理解JavaScript非常重要。 稍后，我們還將重新討論該概念，因?yàn)橹貜?fù)將有助于知識的堅(jiān)持。

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.

如果您不知道按引用傳遞概念，則上面記錄的結(jié)果可能會讓您感到驚訝。

第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:

從數(shù)組開始，我們將繼續(xù)其近親稱為對象。 從某種意義上說，對象可以存儲多個(gè)值，就象數(shù)組。 但是，對象不是由值列表組成，而是由所謂的鍵值對組成。 我們使用大括號創(chuàng)建一個(gè)對象：

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

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

在本講座中，您將學(xué)習(xí)如何填充對象并獲取它們的值。

第12部分：對象挑戰(zhàn) (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.

在這個(gè)挑戰(zhàn)中，我們將重新審視通過引用或值傳遞的概念。 您還將了解Object.assign()方法，該方法使您可以創(chuàng)建對象的副本。

let example1 = { firstName: 'Dylan' }; let example2 = example1; example2.lastName = 'Israel';console.log(example1); console.log(example2);

第13部分：算術(shù)運(yùn)算符 (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:

如果編程語言不知道如何進(jìn)行算術(shù)運(yùn)算，則幾乎是無用的。 使用JavaScript進(jìn)行操作非常簡單：

let example = 5 + 5;console.log(example)// --> 10

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

在本講座中，您還將體驗(yàn)JavaScript如何處理組合了多個(gè)操作的表達(dá)式。

第14部分：關(guān)系運(yùn)算符 (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.

在編程時(shí)，我們經(jīng)常必須比較值，以查看它們是否相等，或者其中一個(gè)大于另一個(gè)，因此在本講座中，您將學(xué)習(xí)如何做到這一點(diǎn)。

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.

現(xiàn)實(shí)的例子就是您想檢查用戶是否有足夠的信用購買商品。 如果信用額高于價(jià)格，則允許他們購買，否則，則不允許購買。

第15部分：關(guān)系運(yùn)算符的挑戰(zhàn) (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:

在這個(gè)挑戰(zhàn)中，您將能夠通過猜測以下變量的布爾值來測試您對關(guān)系運(yùn)算符的理解程度：

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.

使價(jià)值增長或收縮通常是在編程中完成的，例如，在進(jìn)行計(jì)數(shù)時(shí)。 但是，它可以通過幾種不同的方式來完成，因此值得一聽。

let example = 1; example = example + 1;console.log(example);// --> 2

第17部分：遞增和遞減挑戰(zhàn) (Part 17: Increment & decrement challenge)

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

這項(xiàng)挑戰(zhàn)將著眼于執(zhí)行example++和++example之間的區(qū)別。

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.

這可能需要您進(jìn)行一些嘗試才能理解它，甚至需要進(jìn)行谷歌搜索，這對于任何開發(fā)人員來說都是至關(guān)重要的技能。

第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.

編程時(shí)，條件語句(如if ， if else和else至關(guān)重要。 這就是使您在應(yīng)用程序中具有邏輯的原因。 因此，在本講座中，您將學(xué)習(xí)如何使用所有這三個(gè)方法。

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.

您還將學(xué)習(xí)如何將這些條件與關(guān)系運(yùn)算符結(jié)合起來以構(gòu)成復(fù)雜的邏輯。

第19部分：如果，否則，如果挑戰(zhàn) (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.

在這個(gè)挑戰(zhàn)中，您將嘗試猜測以下表達(dá)式的計(jì)算結(jié)果。 這是建立在您在關(guān)系運(yùn)算符的講座和上一堂課中學(xué)到的知識的基礎(chǔ)上。

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!

同樣，如果您無法正確猜測，也不要失去勇氣。 對于初學(xué)者來說，這些東西很棘手！

第20部分：開關(guān) (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:

在本講座中，您將學(xué)習(xí)所謂的switch語句，如果您有許多條件需要檢查的話，這些語句非常有用。 這是一個(gè)例子：

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循環(huán) (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循環(huán)使您可以多次執(zhí)行代碼塊。 金額由您通過設(shè)置三個(gè)條件決定。 這是一個(gè)簡單的for循環(huán)的示例：

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循環(huán)來計(jì)算數(shù)字?jǐn)?shù)組的總和。

第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.

如果要執(zhí)行一段代碼多次，但不知道有多少次，那么while你需要的循環(huán)可能完全相同。 只要滿足特定條件，它就可以執(zhí)行代碼塊。

let count = 0;while (count < 20) { count++; }console.log(count);

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

您還將了解do/while語句。

第23部分：函數(shù) (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.

最后，您需要了解函數(shù)，因?yàn)楹瘮?shù)對于任何應(yīng)用程序都是至關(guān)重要的。 您將學(xué)習(xí)函數(shù)的語法，如何調(diào)用它們以及如何向它們添加參數(shù)。

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.

當(dāng)您完成本教程的學(xué)習(xí)后，您將完成本課程的教學(xué)大綱，因?yàn)槟雷约阂呀?jīng)了解了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通過向您介紹一些接下來可以做什么以進(jìn)一步提高JavaScript技能來結(jié)束本課程！ 請記住，這只是一門課程。

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.

一旦您達(dá)到了這一目標(biāo)，我強(qiáng)烈建議您繼續(xù)前進(jìn)，因?yàn)槟谥鸩将@得當(dāng)今社會非常寶貴的技能。

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

JavaScript不僅可以幫助您改善職業(yè)生涯，而且還可以自行構(gòu)建產(chǎn)品！

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!

因此，請務(wù)必今天就參加此免費(fèi)課程 。 您將能夠在不知不覺中自行使用JavaScript構(gòu)建項(xiàng)目！

---

---

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的共同創(chuàng)始人–學(xué)習(xí)編碼的最簡單方法。 如果要學(xué)習(xí)以專業(yè)水平構(gòu)建現(xiàn)代網(wǎng)站，則應(yīng)查看我們的響應(yīng)式Web設(shè)計(jì)新手訓(xùn)練營 。

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

總結(jié)

以上是生活随笔為你收集整理的这个免费的交互式课程在一小时内学习JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。