Lær JavaScript på EN time med dette gratis og interaktive kursus

JavaScript er det mest populære programmeringssprog på internettet. Du kan bruge den til at oprette websteder, servere, spil og endda native apps. Så ikke underligt, at det er sådan en værdifuld færdighed i dagens jobmarked.

Så jeg nåede ud til Dylan C. Israel - en programmering af YouTuber og freeCodeCamp grad - og bad ham om at oprette et gratis JavaScript-kursus på Scrimba.

Kurset indeholder 15 forelæsninger og 7 interaktive udfordringer og er velegnet til begyndere. Det giver dig en hurtig introduktion til de vigtigste JavaScript-koncepter.

Sådan er kurset lagt ud.

Del # 1: Introduktion

Som altid begynder kurset med en screencast om emnet generelt og en oversigt over kursets struktur. Dylan vil også fortælle dig lidt om sig selv, så du lærer ham at kende, før du dykker ned i kodningen.

Del # 2: Variabler

Det første koncept, du skal lære, er variabler, der er til lagring af værdier. I moderne JavaScript er der to nøgleord til at gøre det: letog const.

Lad os gemme navnet Dylan i et letsom vi kalder name.

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

Som du kan se, kan vi senere henvise til den variabel for at hente værdien, for eksempel for at logge den ud til konsollen ved hjælp af console.log()metoden.

Del # 3: strenge

I den anden lektion lærer du om din første datatype: strings . En streng gemmer simpelthen en sekvens af tegn indpakket i anførselstegn. Så når du pakker noget ind i enkelt eller dobbelt anførselstegn, bliver det til en streng i JavaScript som denne:

let name = "Dylan"; 

Del # 4: Strengeudfordring

Det er tid til kursets første udfordring! I denne vil du prøve at kombinere to variabler i en.

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

Hvis dette er din allerførste introduktion til JavaScript, skal du bruge din nyerhvervede viden om både variabler og strenge for at løse dette problem. Du skal muligvis også lave en lille eksperimentkode. Heldigvis er dette muligt i Scrimba-platformen.

Del # 5: Tal

Dernæst er den anden datatype, du skal lære: tal . Andre sprog har ofte flere datatyper for tal, som floats for decimaltal og heltal for hele numre _._ Men i JavaScript er de begge tal .

Vi kan bruge den typeoftil at kontrollere datatypen:

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

I denne forelæsning lærer du også, hvordan du konverterer værdier mellem strenge og tal ved hjælp af parseInt()og parseFloat()metoder.

Del # 6: Taludfordring

I taludfordringen bliver du udsat for et par forskellige strenge og tal kombineret med de metoder, du har lært indtil videre. Dit job er at gætte hvilke værdier disse udtryk ender som.

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

Det kan være lidt vanskeligt, så vær ikke modløs, hvis du laver fejl!

Del # 7: Booleanere

Booleanere er enkle, de er enten sande eller falske. Sådan opretter du en boolsk værdi:

let example = true; 

Det faktum, at examplenu er indstillet til sandt, kan komme til nytte, når du programmerer, da du undertiden vil foretage handlinger baseret på betingelser som denne.

Du lærer også om sandheds- eller falske værdier i dette foredrag, som er andre datatyper som strenge eller tal, men som har en sand eller falsk side ved dem.

Del # 8: Booleanske udfordring

I boolæernes udfordring følger Dylan det samme mønster som tallene et, hvor du skal gætte en masse værdier. Dit job er at gætte, om disse variabler er sandte eller falske:

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

Del # 9: Arrays

De datatyper, du indtil videre har lært, er såkaldte primitive værdier. Nu er det tid til at lære om arrayet, som er en ikke-primitiv værdi.

Et array er simpelthen en liste over værdier som denne:

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

Du lærer, hvordan du opretter arrays, hvordan du tilføjer og fjerner emner, og endda hvordan man løber gennem hele arrayet ved hjælp af forEach()metoden.

Del # 10: Arrays udfordring

I arrays-udfordringen vil du blive introduceret til begrebet polstring ved hjælp af reference eller værdi , hvilket er vigtigt for at forstå JavaScript korrekt. Vi gennemgår også dette koncept senere, da gentagelse hjælper viden med at holde fast.

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

Resultaterne, der er logget ovenfor, kan overraske dig, hvis du ikke er opmærksom på forbipasserings- konceptet.

Del # 11: Objekter

Fra arrays fortsætter vi til dens nære slægtninge kaldet objekter. Objekter er som arrays i den forstand, at de kan gemme flere værdier. I stedet for at bestå af en liste over værdier består et objekt imidlertid af såkaldte nøgleværdipar. Vi opretter et objekt ved hjælp af krøllede parenteser:

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

I denne forelæsning lærer du, hvordan du udfylder objekter og henter deres værdier.

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!

Så sørg for at tage dette gratis kursus i dag. Du kan selv oprette projekter i JavaScript, før du ved af det!

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.