JavaScript je najpopularniji programski jezik na webu. Pomoću njega možete stvoriti web stranice, poslužitelje, igre, pa čak i izvorne aplikacije. Stoga ne čudi da je to tako vrijedna vještina na današnjem tržištu rada.
Stoga sam se obratio Dylanu C. Izraelu - programeru YouTubea i freeCodeCampa - i zamolio ga da kreira besplatni JavaScript tečaj o Scrimbi.
Tečaj sadrži 15 predavanja i 7 interaktivnih izazova i pogodan je za početnike. Kratko će vam predstaviti najvažnije koncepte JavaScript-a.
Evo kako je postavljen tečaj.
1. dio: Uvod
Kao i uvijek, tečaj započinje screencastom o temi općenito i pregledom strukture tečaja. Dylan će vam također reći nešto o sebi kako biste ga upoznali prije nego što zaronite u kodiranje.
Dio 2: Varijable
Prvi koncept koji ćete trebati naučiti su varijable koje služe za pohranu vrijednosti. U modernom JavaScriptu postoje dvije ključne riječi za to: leti const.
Pohranimo ime Dylan u letkoji ćemo nazvati name.
let name = 'Dylan'; console.log(name); // --> 'Dylan' Kao što vidite, na tu se varijablu možemo pozvati kasnije kako bismo dohvatili vrijednost, na primjer, odjavili je na konzolu, koristeći console.log()metodu.
Dio 3: Žice
U drugoj lekciji naučit ćete o svojoj prvoj vrsti podataka: stringovi . Niz jednostavno pohranjuje slijed umotanih u navodnike. Dakle, kad god umotate nešto unutar jednostrukih ili dvostrukih navodnika, to se pretvara u niz u JavaScript-u, ovako:
let name = "Dylan"; Dio 4: izazov gudača
Vrijeme je za prvi izazov tečaja! U ovom ćete pokušati kombinirati dvije varijable u jednu.
let firstName = "Dylan"; let lastName = "Israel"; console.log(fullName); // --> ReferenceError: fullName is not defined Ako je ovo vaše prvo upoznavanje s JavaScriptom, morat ćete upotrijebiti svježe stečeno znanje o varijablama i nizovima kako biste riješili ovaj problem. Također ćete možda morati malo eksperimentirati. Srećom, to je moguće na platformi Scrimba.
Dio 5: Brojevi
Sljedeća je druga vrsta podataka koju ćete trebati naučiti: brojevi . Ostali jezici često imaju više vrsta podataka za brojeve, poput plutajućih brojeva za decimalne brojeve i cijelih brojeva za cijele brojeve _._ Međutim, u JavaScriptu su oba broja .
Možemo koristiti typeofza provjeru tipa podataka:
let example1 = 7; let example2 = 7.77; console.log(typeof example1); console.log(typeof example2); // --> "number" // --> "number" U ovom predavanju naučit ćete i kako pretvoriti vrijednosti između nizova i brojeva pomoću parseInt()i parseFloat()metoda.
6. dio: Izazov brojeva
U izazovu brojeva bit ćete izloženi nekoliko različitih nizova i brojeva u kombinaciji s metodama koje ste do sada naučili. Vaš je posao pogoditi koje vrijednosti završavaju ovi izrazi.
let example1 = parseInt("33 World 22"); let example2 = parseFloat('44 Dylan 33'); let example3 = 55.3333.toFixed(0); let example4 = 200.0.toFixed(2); Možda je malo nezgodno, pa nemojte se obeshrabriti ako pogriješite!
Dio 7: Booleovi
Booleovi su jednostavni, istiniti su ili netačni. Evo kako stvarate logičku vrijednost:
let example = true; Činjenica da je examplesada postavljeno na Tačno može vam dobro doći kad programirate, jer ponekad želite poduzeti radnje temeljene na uvjetima poput ovog.
Također ćete u ovom predavanju naučiti o netačnim ili lažnim vrijednostima, a to su druge vrste podataka, poput nizova ili brojeva, ali koje imaju neispravnu ili lažnu stranu.
Dio 8: Booleov izazov
U booleanskom izazovu, Dylan slijedi isti obrazac kao i brojevi jedan, gdje trebate pogoditi hrpu vrijednosti. Vaš je posao pogoditi jesu li ove varijable neistinite ili lažne:
let example1 = false; let example2 = true; let example3 = null; let example4 = undefined; let example5 = ''; let example6 = NaN; let example7 = -5; let example8 = 0; Dio 9: Nizovi
Vrste podataka koje ste do sada naučili su takozvane primitivne vrijednosti. Sada je vrijeme da naučimo o nizu, koji je neprimitivna vrijednost.
Niz je jednostavno popis vrijednosti, poput ovog:
let example = ['programming', 'design', 'art']; Naučit ćete kako stvoriti nizove, kako dodavati i uklanjati stavke, pa čak i kako se metodom petljati kroz čitav niz forEach().
Dio 10: Izazov nizova
U izazovu s nizovima upoznat ćete se s konceptom popunjavanja referencom ili vrijednošću , što je važno kako biste pravilno razumjeli JavaScript. Kasnije ćemo ponovno pregledati ovaj koncept jer će ponavljanje pomoći da se znanje drži.
let example1 = ['Dylan', 5, true]; let example2 = example1; example2.push(11); console.log(example1); console.log(example2); Rezultati koji su gore zabilježeni mogli bi vas iznenaditi ako niste svjesni koncepta prolaska pored .
Dio # 11: Predmeti
Od nizova nastavit ćemo do njegovih bliskih rođaka koji se nazivaju objektima. Objekti su poput nizova u smislu da mogu pohraniti više vrijednosti. Međutim, umjesto da se sastoji od popisa vrijednosti, objekt se sastoji od takozvanih parova ključ / vrijednost. Stvaramo objekt pomoću kovrčavih zagrada:
let example = { firstName: 'Dylan'; lastName: 'Israel' }; Na ovom predavanju naučit ćete kako popuniti predmete i dohvatiti njihove vrijednosti.
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.
