Научете JavaScript за един час с този безплатен и интерактивен курс

JavaScript е най-популярният език за програмиране в мрежата. Можете да го използвате за създаване на уебсайтове, сървъри, игри и дори собствени приложения. Затова не е чудно, че това е толкова ценно умение на съвременния пазар на труда.

Затова се свързах с Дилън С. Израел - програмист на YouTube и freeCodeCamp град - и го помолих да създаде безплатен курс по JavaScript за Scrimba.

Курсът съдържа 15 лекции и 7 интерактивни предизвикателства и е подходящ за начинаещи. Това ще ви даде кратко въведение в най-важните концепции на JavaScript.

Ето как е изложен курсът.

Част # 1: Въведение

Както винаги, курсът започва със скрийнскаст за темата като цяло и преглед на структурата на курса. Дилън също ще ви разкаже малко за себе си, за да го опознаете, преди да се потопите в кодирането.

Част # 2: Променливи

Първата концепция, която ще трябва да научите, са променливите, които са за съхраняване на стойности. В съвременния JavaScript има две ключови думи за това: letи const.

Нека съхраним името Dylan в, letкоето ще наречем name.

let name = 'Dylan'; console.log(name); // --> 'Dylan' 

Както можете да видите, след това можем да се обърнем към тази променлива по-късно, за да извлечем стойността, например, за да я излезем в конзолата, използвайки console.log()метода.

Част # 3: Струни

Във втория урок ще научите за първия си тип данни: низове . Низът просто съхранява последователност от символи, увити в кавички. Така че, когато обгърнете нещо в единични или двойни кавички, то се превръща в низ в JavaScript, като този:

let name = "Dylan"; 

Част # 4: Предизвикателство на струни

Време е за първото предизвикателство от курса! В този ще опитате да комбинирате две променливи в една.

let firstName = "Dylan"; let lastName = "Israel"; console.log(fullName); // --> ReferenceError: fullName is not defined 

Ако това е първото ви въведение в JavaScript, ще трябва да използвате прясно придобити знания както за променливи, така и за низове, за да разрешите този проблем. Може също да се наложи да направите малко код за експериментиране. За щастие това е възможно в платформата Scrimba.

Част # 5: Числа

Следва вторият тип данни, който трябва да научите: цифри . Другите езици често имат множество типове данни за числа, като плувки за десетични числа и цели числа за цели числа _._ Въпреки това, в JavaScript те са и двете числа .

Можем да използваме, за typeofда проверим типа данни:

let example1 = 7; let example2 = 7.77; console.log(typeof example1); console.log(typeof example2); // --> "number" // --> "number" 

В тази лекция ще научите и как да конвертирате стойности между низове и числа с помощта на parseInt()и parseFloat()методи.

Част # 6: Предизвикателство на числата

В предизвикателството с числата ще бъдете изложени на няколко различни низа и числа, съчетани с методите, които сте научили досега. Вашата задача е да познаете кои стойности в крайна сметка са тези изрази.

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

Може да е малко сложно, така че не се обезсърчавайте, ако правите грешки!

Част # 7: Логически

Booleans са прости, те са или верни, или неверни. Ето как създавате булева стойност:

let example = true; 

Фактът, че exampleсега е настроен на истина, може да бъде полезен, когато програмирате, тъй като понякога искате да предприемете действия, базирани на условия като това.

Ще научите също за truthy или falsy стойности в тази лекция, които са различни типове данни, като струни или цифри, но който има truthy или falsy страна към тях.

Част # 8: Булево предизвикателство

В булевото предизвикателство Дилън следва същия модел като номерата едно, където трябва да познаете куп стойности. Вашата задача е да познаете дали тези променливи са неверни или неверни :

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

Част # 9: Масиви

Типовете данни, които сте научили досега, са така наречените примитивни стойности. Сега е време да научите за масива, който е непримитивна стойност.

Масивът е просто списък със стойности, като този:

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

Ще научите как да създавате масиви, как да добавяте и премахвате елементи и дори как да обикаляте целия масив, използвайки forEach()метода.

Част # 10: Предизвикателство на масиви

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.

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.

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.

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.

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

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:

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

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

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.

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'; 

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 

Part #17: Increment & decrement challenge

This challenge will look at the difference between doing example++ and ++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.

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.

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.

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 = 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!

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:

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.'); } 

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 (let i = 0; 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.

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.

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

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

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.

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.

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!

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!

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.