Opi JavaScript yhdessä tunnissa tällä ilmaisella ja interaktiivisella kurssilla

JavaScript on suosituin ohjelmointikieli verkossa. Sen avulla voit luoda verkkosivustoja, palvelimia, pelejä ja jopa natiivisovelluksia. Ei siis ihme, että se on niin arvokas taito nykypäivän työmarkkinoilla.

Joten otin yhteyttä Dylan C. Israeliin - ohjelmoivaan YouTuberiin ja freeCodeCamp gradiin - ja pyysin häntä luomaan ilmainen JavaScript-kurssi Scrimballe.

Kurssi sisältää 15 luentoa ja 7 interaktiivista haastetta ja sopii aloittelijoille. Se antaa sinulle nopean johdannon tärkeimpiin JavaScript-käsitteisiin.

Näin kurssi järjestetään.

Osa # 1: Johdanto

Kuten aina, kurssi alkaa kuvakaappauksella aiheesta yleensä ja yleiskatsauksella kurssin rakenteesta. Dylan kertoo sinulle myös vähän itsestään, jotta tutustut häneen ennen kuin sukelat koodaukseen.

Osa # 2: Muuttujat

Ensimmäinen käsite, jonka sinun on opittava, on muuttujat, jotka on tarkoitettu arvojen tallentamiseen. Nykyaikaisessa JavaScriptissä on kaksi avainsanaa: letja const.

Katsotaan Tallenna nimi Dylan on letjoka soitamme name.

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

Kuten näette, voimme sitten viitata kyseiseen muuttujaan myöhemmin, jotta voimme noutaa arvon, esimerkiksi kirjautua sen ulos konsoliin console.log()menetelmää käyttäen .

Osa # 3: Jouset

Toisessa oppitunnissa opit ensimmäisestä tietotyypistäsi: merkkijonot . Merkkijono tallentaa yksinkertaisesti sarjan lainausmerkeissä käärittyjä merkkejä. Joten aina kun käärit jotain yhden tai kahden lainausmerkin sisään, se muuttuu merkkijonoksi JavaScriptissä, kuten tämä:

let name = "Dylan"; 

Osa # 4: Jousisoitin

On aika ensimmäiselle haasteelle! Tässä yrität yhdistää kaksi muuttujaa yhdeksi.

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

Jos tämä on ensimmäinen JavaScript-esittelysi, sinun on käytettävä tuoreita tietoja sekä muuttujista että merkkijonoista ongelman ratkaisemiseksi. Saatat myös joutua tekemään pienen kokeilun koodin. Onneksi tämä on mahdollista Scrimba-alustalla.

Osa # 5: Numerot

Seuraavaksi on toinen tietotyyppi, joka sinun on opittava: numerot . Muilla kielillä on usein useita tietotyyppejä numeroille, kuten desimaalilukujen kellukkeet ja kokonaislukujen kokonaisluvut _._ JavaScriptissä ne ovat kuitenkin molemmat numeroita .

Voimme käyttää typeoftietotyypin tarkistamiseen:

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

Tässä luennossa tulet myös oppia muuntaa arvojen jousille ja numero käyttämällä parseInt()ja parseFloat()menetelmiä.

Osa # 6: Numeroiden haaste

Laskuhaasteessa altistut muutamille erilaisille merkkijonoille ja numeroille yhdessä tähän mennessä oppimiesi menetelmien kanssa. Sinun tehtäväsi on arvata, mitkä arvot nämä lausekkeet päätyvät.

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

Se voi olla vähän hankalaa, joten älä lannistu, jos teet virheitä!

Osa # 7: Boolean

Boolealaiset ovat yksinkertaisia, ne ovat joko totta tai väärää. Näin luot loogisen arvon:

let example = true; 

Se, että examplenyt asetetaan totta, voi olla hyödyllinen ohjelmoinnin aikana, koska haluat joskus tehdä toimia tämänkaltaisten ehtojen perusteella.

Saat myös oppia truthy tai falsy arvot tässä luennossa jotka ovat muita tietotyyppejä, kuten merkkijonoja tai numeroita, mutta jolla on truthy tai falsy puoli heille.

Osa # 8: Boolean haaste

Boolean-haasteessa Dylan noudattaa samaa mallia kuin numerot, joissa sinun on arvattava joukko arvoja. Sinun tehtäväsi on arvata, ovatko nämä muuttujat totta vai väärät :

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

Osa # 9: Taulukot

Tähän asti oppimasi tietotyypit ovat ns. Primitiivisiä arvoja. Nyt on aika oppia taulukosta, joka on ei-primitiivinen arvo.

Taulukko on yksinkertaisesti luettelo arvoista, kuten tämä:

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

Opit luomaan taulukoita, lisäämään ja poistamaan kohteita ja jopa luomaan koko taulukon läpi forEach()menetelmällä.

Osa # 10: Taulukot haaste

Taulukkohaasteen aikana sinut perehdytetään täytteen käsitteeseen viitteen tai arvon perusteella , mikä on tärkeää JavaScriptin ymmärtämiseksi oikein. Tarkastelemme myös tätä käsitettä myöhemmin, koska toistaminen auttaa tietämystä pysymään.

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

Edellä kirjatut tulokset saattavat yllättää sinut, jos et ole tietoinen ohi ohitekäsitteestä.

Osa # 11: Esineet

Taulukoista jatkamme lähisukulaisiinsa, joita kutsutaan esineiksi. Objektit ovat kuin matriisit siinä mielessä, että ne voivat tallentaa useita arvoja. Sen sijaan, että objekti koostuisi arvoluettelosta, objekti koostuu ns. Avain-arvo-pareista. Luomme objektin kiharoilla:

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

Tässä luennossa opit lisäämään objekteja ja noutamaan niiden arvot.

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!

Joten muista käydä tämä ilmainen kurssi tänään. Pystyt rakentamaan projekteja JavaScriptissä itse, ennen kuin tiedät sen!

Kiitos lukemisesta! Nimeni on Per Borgen, olen Scrimban perustaja - helpoin tapa oppia koodaamaan. Sinun kannattaa tutustua reagoivaan verkkosuunnittelun käynnistyskampaan, jos haluat oppia rakentamaan modernia verkkosivustoa ammattitasolla.