Tanuljon meg JavaScriptet egy órán belül ezzel az ingyenes és interaktív tanfolyamon

A JavaScript a legnépszerűbb programozási nyelv az interneten. Használhatja weboldalak, szerverek, játékok és akár natív alkalmazások létrehozására. Tehát nem csoda, hogy ez olyan értékes képesség a mai munkaerőpiacon.

Megkerestem Dylan C. Israel-t - egy programozó YouTubert és freeCodeCamp grad-ot -, és megkértem, hogy hozzon létre egy ingyenes JavaScript-tanfolyamot a Scrimba-n.

A tanfolyam 15 előadást és 7 interaktív kihívást tartalmaz, és alkalmas kezdőknek. Ez gyors bemutatást nyújt a legfontosabb JavaScript-fogalmakról.

A pálya felépítése így történik.

1. rész: Bevezetés

A tanfolyam, mint mindig, a tárgyról általában vett képkockával és a tanfolyam szerkezetének áttekintésével kezdődik. Dylan mesél egy kicsit magáról is, hogy megismerje őt, mielőtt belemerül a kódolásba.

2. rész: Változók

Az első koncepció, amelyet meg kell tanulnia, a változók, amelyek az értékek tárolására szolgálnak. A modern JavaScript-ben két kulcsszó van erre: letés const.

Tároljuk a Dylan nevet , letamelyben felhívjuk name.

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

Mint láthatja, később hivatkozhatunk erre a változóra annak érdekében, hogy lekérjük az értéket, például kijelöljük a konzolra a console.log()módszer segítségével.

3. rész: Húrok

A második leckében megismerheti első adattípusát: karakterláncokat . Egy karakterlánc egyszerűen idézőjelekbe csomagolva tárolja a karakterek sorozatát. Tehát, amikor valamit egy- vagy kettős idézőjelbe csomagol, az a karakterláncokká alakul a JavaScript-ben, így:

let name = "Dylan"; 

4. rész: Vonósok kihívása

Itt az ideje a tanfolyam első kihívásának! Ebben megpróbál két változót egyesíteni.

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

Ha ez a legelső bevezetés a JavaScript-be, akkor a probléma megoldásához fel kell használnia a változókról és a karakterláncokról frissen megszerzett ismereteit . Lehet, hogy meg kell tennie egy kis kísérletezési kódot is. Szerencsére ez a Scrimba platformon lehetséges.

5. rész: Számok

Következik a második adattípus, amelyet meg kell tanulnia: számok . Más nyelvek gyakran több adattípusok a számok, mint úszik a tizedes számok és egészek az egész számok _._ azonban, JavaScript, mindketten számokat .

Az typeofadattípus ellenőrzésére használhatjuk a :

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

Ebben az előadásban azt is megtudhatja, hogyan lehet konvertálni a karakterláncok és a számok közötti értékeket módszerek parseInt()és parseFloat()módszerek segítségével.

6. rész: Számok kihívása

A számkihívásban néhány különböző húrnak és számnak lesz kitéve az eddig tanult módszerekkel kombinálva. Az Ön feladata kitalálni, hogy ezek a kifejezések mely értékekként végződnek.

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

Lehet, hogy kissé trükkös, ezért ne csüggedjen, ha hibázik!

7. rész: Booleans

A Booleans egyszerű, vagy igaz, vagy hamis. Így hozhat létre logikai értéket:

let example = true; 

Az a tény, hogy a examplemostanra igaz , programozáskor jól jöhet, mivel néha ilyen körülmények alapján szeretne cselekedni.

Ezen az előadáson megismerheti az igazság vagy hamis értékeket is, amelyek más adattípusok, például húrok vagy számok, de amelyeknek igazságos vagy hamis oldala van.

8. rész: Booleans kihívás

A logikai kihívásban Dylan ugyanazt a mintát követi, mint az első számok, ahol egy csomó értéket kell kitalálnia. Az Ön feladata kitalálni, hogy ezek a változók truthy vagy falsy:

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

9. rész: tömbök

Az eddig tanult adattípusok úgynevezett primitív értékek. Itt az ideje, hogy megismerje a tömböt, amely nem primitív érték.

A tömb egyszerűen az alábbi értékek listája:

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

Megtudhatja, hogyan hozhat létre tömböket, hogyan adhat hozzá és távolíthat el elemeket, és hogyan is végezheti az egész tömb áttekintését a forEach()módszer segítségével.

10. rész: Tömbök kihívása

A tömbök kihívásában megismerkedhet a kitöltéssel, hivatkozással vagy értékkel , ami fontos a JavaScript megfelelő megértéséhez. A későbbiekben ezt a koncepciót is felülvizsgáljuk, mivel az ismétlés segít a tudás kibírásában.

let example1 = ['Dylan', 5, true]; let example2 = example1; example2.push(11); console.log(example1); console.log(example2); 

A fent naplózott eredmények meglepetést okozhatnak, ha nincsenek tisztában az elhaladás referencia koncepcióval.

11. rész: Tárgyak

A tömböktől folytatjuk a közeli rokonokat, az úgynevezett tárgyakat. Az objektumok olyanok, mint a tömbök abban az értelemben, hogy több értéket is tárolhatnak. Az objektum azonban ahelyett, hogy értéklistából állna, úgynevezett kulcs-érték párokból áll. Göndör zárójelek segítségével létrehozunk egy objektumot:

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

Ebben az előadásban megtudhatja, hogyan kell feltölteni az objektumokat és lehívni azok értékeit.

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.