14 KiB
Osnove JavaScripta: Donošenje odluka
Sketchnote autorice Tomomi Imura
Jeste li se ikada zapitali kako aplikacije donose pametne odluke? Kao, na primjer, kako navigacijski sustav odabire najbržu rutu ili kako termostat odlučuje kada uključiti grijanje? Ovo je osnovni koncept donošenja odluka u programiranju.
Baš kao što je Analitički stroj Charlesa Babbagea bio dizajniran da slijedi različite sekvence operacija na temelju uvjeta, moderni JavaScript programi moraju donositi odluke na temelju različitih okolnosti. Ova sposobnost grananja i donošenja odluka ono je što statični kod pretvara u responzivne, inteligentne aplikacije.
U ovoj lekciji naučit ćete kako implementirati uvjetnu logiku u svoje programe. Istražit ćemo uvjetne naredbe, operatore usporedbe i logičke izraze koji omogućuju vašem kodu da procijeni situacije i odgovarajuće reagira.
Kviz prije predavanja
Sposobnost donošenja odluka i kontroliranja toka programa temeljni je aspekt programiranja. Ovaj odjeljak pokriva kako kontrolirati put izvršavanja vaših JavaScript programa koristeći Booleove vrijednosti i uvjetnu logiku.
🎥 Kliknite na sliku iznad za video o donošenju odluka.
Ovu lekciju možete pronaći na Microsoft Learn!
Kratki podsjetnik o Booleovim vrijednostima
Prije nego što istražimo donošenje odluka, prisjetimo se Booleovih vrijednosti iz prethodne lekcije. Nazvane po matematičaru Georgeu Booleu, ove vrijednosti predstavljaju binarna stanja – ili true ili false. Nema nejasnoća, nema sredine.
Ove binarne vrijednosti čine temelj sve računalne logike. Svaka odluka koju vaš program donosi u konačnici se svodi na Booleovu evaluaciju.
Stvaranje Booleovih varijabli je jednostavno:
let myTrueBool = true;
let myFalseBool = false;
Ovo stvara dvije varijable s eksplicitnim Booleovim vrijednostima.
✅ Booleove vrijednosti su nazvane po engleskom matematičaru, filozofu i logičaru Georgeu Booleu (1815.–1864.).
Operatori usporedbe i Booleove vrijednosti
U praksi rijetko ćete ručno postavljati Booleove vrijednosti. Umjesto toga, generirat ćete ih evaluacijom uvjeta: "Je li ovaj broj veći od onog?" ili "Jesu li ove vrijednosti jednake?"
Operatori usporedbe omogućuju ove evaluacije. Oni uspoređuju vrijednosti i vraćaju Booleove rezultate na temelju odnosa između operanada.
| Simbol | Opis | Primjer |
|---|---|---|
< |
Manje od: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost true ako je vrijednost na lijevoj strani manja od one na desnoj |
5 < 6 // true |
<= |
Manje ili jednako: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost true ako je vrijednost na lijevoj strani manja ili jednaka onoj na desnoj |
5 <= 6 // true |
> |
Veće od: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost true ako je vrijednost na lijevoj strani veća od one na desnoj |
5 > 6 // false |
>= |
Veće ili jednako: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost true ako je vrijednost na lijevoj strani veća ili jednaka onoj na desnoj |
5 >= 6 // false |
=== |
Stroga jednakost: Uspoređuje dvije vrijednosti i vraća Booleovu vrijednost true ako su vrijednosti na desnoj i lijevoj strani jednake I iste vrste |
5 === 6 // false |
!== |
Nejednakost: Uspoređuje dvije vrijednosti i vraća suprotnu Booleovu vrijednost od one koju bi vratio operator stroge jednakosti | 5 !== 6 // true |
✅ Provjerite svoje znanje pisanjem nekoliko usporedbi u konzoli vašeg preglednika. Iznenađuje li vas neki od vraćenih podataka?
If naredba
Naredba if je poput postavljanja pitanja u vašem kodu. "Ako je ovaj uvjet istinit, onda učini ovu stvar." To je vjerojatno najvažniji alat koji ćete koristiti za donošenje odluka u JavaScriptu.
Evo kako to funkcionira:
if (condition) {
// Condition is true. Code in this block will run.
}
Uvjet ide unutar zagrada, a ako je true, JavaScript izvršava kod unutar vitičastih zagrada. Ako je false, JavaScript jednostavno preskače cijeli taj blok.
Često ćete koristiti operatore usporedbe za stvaranje ovih uvjeta. Pogledajmo praktičan primjer:
let currentMoney = 1000;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
}
Budući da 1000 >= 800 evaluira na true, kod unutar bloka se izvršava, prikazujući "Kupujem novi laptop!" u konzoli.
If..Else naredba
Ali što ako želite da vaš program učini nešto drugo kada uvjet nije ispunjen? Tu dolazi else – to je poput rezervnog plana.
Naredba else vam omogućuje da kažete "ako ovaj uvjet nije istinit, učini ovu drugu stvar umjesto toga."
let currentMoney = 500;
let laptopPrice = 800;
if (currentMoney >= laptopPrice) {
// Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
// Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
Sada, budući da je 500 >= 800 false, JavaScript preskače prvi blok i umjesto toga izvršava else blok. Vidjet ćete "Još si ne mogu priuštiti novi laptop!" u konzoli.
✅ Testirajte svoje razumijevanje ovog koda i sljedećeg koda pokretanjem u konzoli preglednika. Promijenite vrijednosti varijabli currentMoney i laptopPrice kako biste promijenili vraćeni console.log().
Switch naredba
Ponekad trebate usporediti jednu vrijednost s više opcija. Iako biste mogli povezati nekoliko if..else naredbi, ovaj pristup postaje nezgrapan. Naredba switch pruža čišću strukturu za rukovanje s više diskretnih vrijednosti.
Koncept nalikuje mehaničkim sustavima prebacivanja koji su se koristili u ranim telefonskim centralama – jedna ulazna vrijednost određuje koji specifičan put izvršenja slijedi.
switch (expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Evo kako je strukturirana:
- JavaScript evaluira izraz jednom
- Pregledava svaki
casekako bi pronašao podudaranje - Kada pronađe podudaranje, izvršava taj blok koda
breakgovori JavaScriptu da stane i izađe iz switch-a- Ako nijedan slučaj ne odgovara, izvršava
defaultblok (ako ga imate)
// Program using switch statement for day of week
let dayNumber = 2;
let dayName;
switch (dayNumber) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
default:
dayName = "Unknown day";
break;
}
console.log(`Today is ${dayName}`);
U ovom primjeru, JavaScript vidi da je dayNumber 2, pronalazi odgovarajući case 2, postavlja dayName na "Utorak" i zatim izlazi iz switch-a. Rezultat? "Danas je utorak" se prikazuje u konzoli.
✅ Testirajte svoje razumijevanje ovog koda i sljedećeg koda pokretanjem u konzoli preglednika. Promijenite vrijednosti varijable a kako biste promijenili vraćeni console.log().
Logički operatori i Booleove vrijednosti
Složene odluke često zahtijevaju evaluaciju više uvjeta istovremeno. Baš kao što Booleova algebra omogućuje matematičarima kombiniranje logičkih izraza, programiranje pruža logičke operatore za povezivanje više Booleovih uvjeta.
Ovi operatori omogućuju sofisticiranu uvjetnu logiku kombiniranjem jednostavnih evaluacija true/false.
| Simbol | Opis | Primjer |
|---|---|---|
&& |
Logički AND: Uspoređuje dva Booleova izraza. Vraća true samo ako su obje strane istinite | (5 > 3) && (5 < 10) // Obje strane su istinite. Vraća true |
|| |
Logički OR: Uspoređuje dva Booleova izraza. Vraća true ako je barem jedna strana istinita | (5 > 10) || (5 < 10) // Jedna strana je false, druga je true. Vraća true |
! |
Logički NOT: Vraća suprotnu vrijednost Booleovog izraza | !(5 > 10) // 5 nije veće od 10, pa "!" čini da bude true |
Ovi operatori omogućuju kombiniranje uvjeta na koristan način:
- AND (
&&) znači da oba uvjeta moraju biti istinita - OR (
||) znači da barem jedan uvjet mora biti istinit - NOT (
!) preokreće true u false (i obrnuto)
Uvjeti i odluke s logičkim operatorima
Pogledajmo ove logičke operatore u akciji s realističnijim primjerom:
let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // Laptop price at 20 percent off
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
// Condition is true. Code in this block will run.
console.log("Getting a new laptop!");
} else {
// Condition is false. Code in this block will run.
console.log("Can't afford a new laptop, yet!");
}
U ovom primjeru: izračunavamo cijenu s popustom od 20% (640), zatim procjenjujemo pokrivaju li naša dostupna sredstva cijenu ili cijenu s popustom. Budući da 600 zadovoljava prag cijene s popustom od 640, uvjet se evaluira kao true.
Operator negacije
Ponekad je lakše razmišljati o tome kada nešto NIJE istinito. Kao, umjesto da pitate "Je li korisnik prijavljen?", možda želite pitati "Je li korisnik NIJE prijavljen?" Operator uskličnika (!) preokreće logiku za vas.
if (!condition) {
// runs if condition is false
} else {
// runs if condition is true
}
Operator ! je poput izreke "suprotno od..." – ako je nešto true, ! to čini false, i obrnuto.
Ternarni izrazi
Za jednostavne uvjetne dodjele, JavaScript pruža ternarni operator. Ova sažeta sintaksa omogućuje vam pisanje uvjetnog izraza u jednom retku, korisno kada trebate dodijeliti jednu od dvije vrijednosti na temelju uvjeta.
let variable = condition ? returnThisIfTrue : returnThisIfFalse;
Čita se kao pitanje: "Je li ovaj uvjet istinit? Ako da, koristi ovu vrijednost. Ako ne, koristi onu vrijednost."
Ispod je konkretniji primjer:
let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;
✅ Odvojite trenutak da nekoliko puta pročitate ovaj kod. Razumijete li kako ovi operatori funkcioniraju?
Evo što ovaj redak govori: "Je li firstNumber veći od secondNumber? Ako da, stavi firstNumber u biggestNumber. Ako ne, stavi secondNumber u biggestNumber."
Ternarni operator je samo kraći način pisanja ove tradicionalne if..else naredbe:
let biggestNumber;
if (firstNumber > secondNumber) {
biggestNumber = firstNumber;
} else {
biggestNumber = secondNumber;
}
Oba pristupa daju identične rezultate. Ternarni operator nudi sažetost, dok tradicionalna struktura if-else može biti čitljivija za složene uvjete.
🚀 Izazov
Napravite program koji je prvo napisan s logičkim operatorima, a zatim ga prepišite koristeći ternarni izraz. Koja vam sintaksa više odgovara?
Izazov GitHub Copilot Agent 🚀
Koristite način rada Agent za dovršavanje sljedećeg izazova:
Opis: Napravite sveobuhvatan kalkulator ocjena koji demonstrira više koncepata donošenja odluka iz ove lekcije, uključujući if-else naredbe, switch naredbe, logičke operatore i ternarne izraze.
Zadatak: Napišite JavaScript program koji uzima studentski numerički rezultat (0-100) i određuje njihovu ocjenu prema sljedećim kriterijima:
- A: 90-100
- B: 80-89
- C: 70-79
- D: 60-69
- F: Ispod 60
Zahtjevi:
- Koristite if-else naredbu za određivanje ocjene
- Koristite logičke operatore za provjeru prolazi li student (ocjena >= 60) I ima li pohvalu (ocjena >= 90)
- Koristite switch naredbu za pružanje specifičnih povratnih informacija za svaku ocjenu
- Koristite ternarni operator za određivanje je li student kvalificiran za sljedeći tečaj (ocjena >= 70)
- Uključite validaciju unosa kako biste osigurali da je rezultat između 0 i 100
Testirajte svoj program s različitim rezultatima, uključujući granične slučajeve poput 59, 60, 89, 90 i nevažeće unose.
Saznajte više o načinu rada Agent ovdje.
Kviz nakon predavanja
Pregled i samostalno učenje
Pročitajte više o mnogim dostupnim operatorima za korisnika na MDN.
Prođite kroz sjajan pregled operatora od Josha Comeaua!
Zadatak
Izjava o odricanju odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane čovjeka. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije nastale korištenjem ovog prijevoda.

