Fragmentai ir valdymo struktūros. 4 dalis JavaScript kurso nuo pradedančiųjų iki pažengusiųjų per 10 tinklaraščio įrašų

Šis yra 4 dalis JavaScript tinklaraščio įrašų serijoje, kuri nuves jus nuo pradedančiojo iki pažengusiojo. Šios serijos pabaigoje jūs žinosite visus pagrindus, kuriuos reikia žinoti, kad pradėtumėte programuoti JavaScript. Be jokių papildomų kalbų, pradėkime ketvirtąjį mokymą.

Fragmentai ir valdymo struktūros – turinys:

1. Atnaujiname mūsų programavimo nustatymus į fragmentus
2. Valdymo struktūros

Šiame tinklaraščio įraše tęsime ten, kur baigėme trečiame tinklaraščio įraše. Šiuo etapu turėtumėte turėti atidarytą „Google Chrome“ naršyklę ir konkrečiai atidarytą JavaScript konsolę. Jei dėl kokių nors priežasčių jas uždarėte, dabar būtų geras laikas jas vėl atidaryti.

Jei esate „Mac“, klaviatūros kombinacija konsolės atidarymui yra „Option + Command + J“, po to, kai atidarote „Chrome“. Jei naudojate „Windows“ įrenginį, galite naudoti klaviatūros kombinaciją „Control + Shift + J“, kad atidarytumėte JavaScript konsolę, kai atidarote „Chrome“. Arba taip pat galite eiti į meniu viršuje ir pasirinkti Peržiūra -> Kūrėjas -> JavaScript konsolė.

Atnaujiname mūsų programavimo nustatymus į fragmentus

Iki šio kurso taško galėjome rašyti viską eilutėmis ir vykdyti jį eilutėmis. Tai nebūtų patogiausias būdas vykdyti dalykus, bet vis tiek veiktų. Pradedant šiuo mokymu, rašysime kodą, kuris reikalauja kelių kodo eilučių, kad sukurtume visą instrukcijų rinkinį. Tam pasinaudosime „fragmentais“ „Google Chrome“. Be jokių papildomų kalbų, atnaujinkime mūsų nustatymus iš JavaScript konsolės į „Chrome“ fragmentus.

Šiuo metu turėtumėte turėti atidarytą konsolę, ir jei sekėte ankstesnius mokymus, turėtumėte matyti ekraną, kuris atrodo taip:

Žiūrėdami į šį ekraną, arba į savo ekraną, turėtumėte matyti: Elementai, Konsolė, Šaltiniai, Tinklas, Veikimas, Atmintis, Programos ir kt. parašytus vienas šalia kito tamsioje srityje viršuje. Jei juos matote šviesesnėmis spalvomis, tai taip pat visiškai gerai. Tai reiškia, kad naudojate šviesos režimą, kuris gali būti numatytasis režimas dienos metu. Ekranas, kurį šiuo metu rodo, naudoja tamsaus režimo spalvų schemą „Chrome“ konsolės nustatymuose. Jei matote Elementus, Konsolę, Šaltinius, Tinklą ir kt. rodomus bet kurioje spalvų schemoje, galite tęsti.

Jei atidžiau pažvelgsite į konsolės viršutinę juostą, pamatysite, kad „Konsolė“ parašyta šiek tiek kitokia spalva. Paspauskite „Šaltiniai“ šalia jos.

Paspaudę „Šaltiniai“ turėtumėte matyti ekraną, kuris kažkaip atrodo taip.

Vienas skirtumas, kurio galite tikėtis, yra tas, kad greičiausiai nematysite „notes.js“ failo, nes aš jį sukūriau anksčiau. Be to, jis turėtų atrodyti gana panašiai. Norėdami sukurti naują failą, spustelėkite „+ Naujas fragmentas“. Paspaudę jį, jis sukurs naują JavaScript failą, kurį galite pavadinti kaip norite. Šiame mokyme mes jį pavadinsime „index.js“, nes tai yra įprasta praktika pavadinti pirmąjį arba pagrindinį failą „index.js“.

Jei norite sekti šį mokymą žodžiu, po to, kai paspausite „+ Naujas fragmentas“, galite įvesti pavadinimą „index.js“ ir paspausti klaviatūros Enter klavišą. Dabar galime spustelėti atidarytame faile pagrindinėje srityje, kad pradėtume programuoti JavaScript.

Pradėkime nuo kažko, ką jau žinome, kad veikia. O tai yra:

alert("Sveikas, Pasauli!");

Galite arba parašyti tai patys papildomai praktikai, arba nukopijuoti ir įklijuoti kodo dalį į sukurtą failą. Labai rekomenduoju rašyti tai patys, nes tai yra būdas, kaip jūs tai išmokstate daugeliu atvejų. Kai tai parašysite, jei paspausite Enter klavišą, pamatysite, kad kodas nebus vykdomas. Vietoj to, jūsų žymeklis tiesiog pereis į kitą eilutę, kaip ir bet kurioje kitoje teksto redagavimo srityje. Yra du pagrindiniai būdai, kaip galime vykdyti savo kodą. Pirmasis yra spustelėti grojaraščio mygtuką, esantį dešiniajame apatiniame kampe.

Jei paspausite tą grojaraščio mygtuką, jis turėtų vykdyti mūsų kodą ir parodyti mums rezultatus.

Paspaudę „Gerai“, taip pat paleiskime mūsų kodą naudodami kitą pagrindinį būdą. Antrasis pagrindinis būdas vykdyti jūsų kodą arba fragmentą yra naudoti klaviatūros kombinaciją. Kaip matome, jis jau rodo mums kombinaciją, kai spustelime vykdymo mygtuką. Ta klaviatūros kombinacija yra „Command + Enter“. Tam galime paspausti Command klavišą ir tada paspausti Enter klavišą. Tai taip pat vykdys mūsų kodą ir duos mums tuos pačius rezultatus, kaip ir spustelėjus grojaraščio mygtuką.

Ir su tuo, dabar žinote du būdus, kaip vykdyti mūsų JavaScript kodą „Chrome“ fragmentuose.

Jei norite sukurti naujus failus, kad galėtumėte galbūt daryti užrašus apie JavaScript arba praktikuoti kai kuriuos JavaScript kodus, visada galite sukurti naujus failus spustelėdami „+ Naujas fragmentas“ ir pavadinti savo failus kaip norite. Dabar, kai turime paruoštą naują programavimo nustatymą, pažiūrėkime dar šiek tiek JavaScript.

Valdymo struktūros

Rašydami kodą, turime atsižvelgti į daugybę scenarijų ir veiksmų, kuriuos vartotojas gali atlikti. Ši paruošimas skirtingiems scenarijams gali kilti iš skirtingų šaltinių, tokių kaip įrenginys, kuriame veikia mūsų kodas, ekrano dydis, kuris turi būti rodomas, skirtingų tipų naršyklės, kurias vartotojas gali turėti, ir taip toliau. Bet kaip mes galime užtikrinti, kad galime būti pasiruošę skirtingiems scenarijams? Jei rašote skirtingus kodus vieną po kito, ar visų jų vykdymas turėtų prasmę vartotojui? Į visus šiuos klausimus ir daugiau atsakysime naudodami valdymo struktūras.

Valdymo struktūros leidžia mums nukreipti kodo vykdymą, kad mūsų kodas galėtų prisitaikyti prie skirtingų sąlygų. Yra keletas bendrų elementų, naudojamų valdymo struktūrose. Šiame mokyme pradėsime nuo paprasčiausio ir judėsime toliau. Pirmasis, kurį pamatysime, naudoja If, else, else if teiginius, kad kontroliuotų kodo vykdymą.

If, else ir else if

Tai yra paprasčiausia valdymo struktūra, su kuria galima pradėti. Tai leidžia mums vykdyti tam tikrą kodo dalį, jei tam tikra sąlyga yra teisinga, ir vykdyti kitą kodo dalį, jei kita sąlyga yra teisinga. Pažvelkime į tai su pavyzdžiu. Tarkime, kad jei lauke lyja, aš pasiimsiu skėtį. Priešingu atveju, aš nesinešiu skėčio. Mes galime tiksliai išversti šią logiką ir mąstymą į kodą taip:

(Prieš rašydami šį kodą, mes komentuosime ankstesnį kodą, kurį turime faile, įdėdami du brūkšnelius prieš jį, kad jis nebūtų vykdomas, bet jūs vis tiek turite jo kopiją. Pridėjus brūkšnelius, jis turėtų atrodyti taip:)

// alert("Sveikas, Pasauli!");
let rainy = true;
if (rainy){
   alert("Pasiimkite skėtį");
} else {
   alert("Nereikia skėčio");
}

Šio kodo vykdymas duotų mums šiuos rezultatus:

// alert("Sveikas, Pasauli!");
let rainy = false;
if (rainy){
   alert("Pasiimkite skėtį");
} else {
   alert("Nereikia skėčio");
}

O šio kodo versijos, kuri sako, kad nėra lietaus, vykdymas duotų šiuos rezultatus:

Rašydami kodą, kad pakeistumėte kodo failą, jei atidžiau pažvelgsite į failo pavadinimą, pamatysite, kad prieš failo pavadinimą bus žvaigždutė. Tai reiškia, kad mūsų rašomas kodo failas nėra visiškai išsaugotas. Tai gali neturėti didelės reikšmės, jei rašote tik kelias kodo eilutes, kurias visada galite parašyti, tačiau dažniausiai norėsite išsaugoti savo kodą, kad galėtumėte jį vėl naudoti arba peržiūrėti vėliau. Galime išsaugoti šį kodo failą taip pat, kaip išsaugome kitus failus, tai būtų „Command + S“ „Mac“ ir „Control + S“ „Windows“.

Mūsų atveju, kadangi vykdome savo kodą iškart po jo rašymo, jis automatiškai išsaugo mūsų failą, kai vykdome kodą. Taigi, jei ketinate rašyti kodą ir palikti jį valandoms, gerai būtų išsaugoti savo kodą kas kurį laiką, kad įsitikintumėte, jog neprarandate jokio reikšmingo progreso.

Puiku, kad galime pritaikyti savo kodą prie dvejopos sąlygos, naudojant If ir else teiginius, bet kas, jei turime kelis dalykus, į kuriuos reikia atsižvelgti, kas greičiausiai bus atvejis realiame gyvenime. Pavyzdžiui, kas, jei šalta ir jums reikia pasiimti džemperį, kai šalta. Vienas būdas, kaip galėtume tai padaryti, būtų „else if“ teiginys, ir mes galime tai padaryti taip:

// alert("Sveikas, Pasauli!");
let rainy = false;
let cold = true;
if (rainy){
   alert("Pasiimkite skėtį");
} else if (cold) {
    alert("Pasiimkite džemperį, o ne skėtį");
} else {
   alert("Nereikia skėčio");
}

Šio kodo rezultatas atrodytų taip:

Taigi, jei tam tikra sąlyga yra teisinga, pirmasis kodas, esantis skliaustuose, bus vykdomas. Mūsų atveju, kadangi pirmoji sąlyga tikrina lietų, mes įspėsime vartotoją, kad jis turėtų pasiimti skėtį. Jei ta sąlyga yra klaidinga, tai reiškia, kad nėra lietaus, mes toliau tikrinsime kitas sąlygas naudodami „else if“ teiginį. Vienas dalykas, kuris žymiai skiriasi nuo „else if“ teiginio, yra tas, kad galime tikrinti tiek daug sąlygų, kiek norime, su else if teiginiais.

Svarbu prisiminti, kad jūsų kodas bus tikrinamas iš viršaus į apačią, dėl teisingumo ar teisingumo. Tai reiškia, kad su dabartiniu kodu, jei oras yra tiek lietingas, tiek šaltas, jis neatpažins šalto oro, nes pirmasis teiginys yra teisingas. Taip pat galime tai patvirtinti, pakeisdami kodą, kad turėtume tiek lietingas, tiek šaltas sąlygas.

// alert("Sveikas, Pasauli!");
let rainy = true;
let cold = true;
if (rainy){
   alert("Pasiimkite skėtį");
} else if (cold) {
    alert("Pasiimkite džemperį, o ne skėtį");
} else {
   alert("Nereikia skėčio");
}

Dabar galite klausti, kaip aš galiu tai išspręsti? Kuri sąlyga yra svarbesnė, ar šaltas oras, ar lietus? Ar turėtumėte pasirinkti vieną sąlygą ir paaukoti kitą? Ar jums iš viso reikia daryti tokį pasirinkimą? Na, ne tikrai. Tai yra labai dažna problema ir ji turi labai paprastą ir gana paprastą sprendimą. Galime naudoti „ir“ išraišką, kad apimtume kelis scenarijus. Norėdami pasakyti JavaScript, kad norime naudoti „ir“, kad sujungtume savo programavimo logiką, naudosime du šiuos simbolius: „&“. Ir kadangi mūsų kodas tikrinamas iš viršaus į apačią, mes naudosime išsamesnį variantą pirmam if teiginiui. Atliktas kodas atrodys taip.

// alert("Sveikas, Pasauli!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Pasiimkite džemperį ir skėtį.")
} else if (rainy){
   alert("Pasiimkite skėtį");
} else if (cold) {
    alert("Pasiimkite džemperį, o ne skėtį");
} else {
   alert("Nereikia skėčio");
}
[/code>
<p>Šio kodo vykdymas duotų jums įspėjimą, kuris atrodytų taip:</p>
<img src="https://firmbee.com/wp-content/uploads/12-1-800x425.png" alt="valdymo_struktūros" width="800" height="425" class="alignnone size-medium wp-image-18999 img-fluid" />
<p>Žymiai geriau. Dabar galime sujungti kelis skirtingus scenarijus, įskaitant skirtingas šių scenarijų kombinacijas. Bet kas, jei norime apsvarstyti scenarijų, kuris nėra šaltas, bet lietingas. Ir tarkime, kad norime pasakyti vartotojui, kad jis neturėtų gauti džemperio konkrečiai, o tik gauti skėtį. Tam galime naudoti loginį „ne“, mes galime jį naudoti savo kode su šauktuku prieš sąlygą, kurią norime nurodyti. Pridėkime tą sąlygą prie mūsų kodo, kad jis būtų išsamesnis.</p>
[code lang="js"]
// alert(&quot;Sveikas, Pasauli!&quot;);
let rainy = true;
let cold = true;
if (rainy &amp;&amp; cold) {
    alert(&quot;Pasiimkite džemperį ir skėtį.&quot;)
} else if (rainy &amp;&amp; !cold){
   alert(&quot;Pasiimkite skėtį, bet ne džemperį.&quot;);
} else if (rainy){
   alert(&quot;Pasiimkite skėtį&quot;);
} else if (cold) {
    alert(&quot;Pasiimkite džemperį, o ne skėtį&quot;);
} else {
   alert(&quot;Nereikia skėčio&quot;);
}

Pridėdami naują sąlygą prie if else medžio, kol tai yra išsamesnė sąlyga, galime ją įdėti kažkur viršuje. Taip mes turime daug mažiau galimybių klaidoms, palyginti su priešinga strategija. Vienas šalutinis poveikis, įterpiant naują kodą į esamą kodą, yra tas, kad kai kurie kodai gali tapti pertekliniais arba gali neveikti efektyviausiu būdu. Mes nesigilinsime į efektyvumo dalį, bet kol kas galime matyti, kad apimame tiek šaltas, tiek nešaltas sąlygas lietingam orui, todėl galime pasirinktinai pašalinti sąlygą, kuri tikrina „lietų“ sąlygą. Tokie kodo pakeitimai taip pat vadinami „Kodo refaktoringu“, refaktoringo procese tikslas yra padaryti kodą palaipsniui švaresnį ir efektyvesnį.

// alert("Sveikas, Pasauli!");
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Pasiimkite džemperį ir skėtį.")
} else if (rainy && !cold){
   alert("Pasiimkite skėtį, bet ne džemperį.");
} else if (cold) {
    alert("Pasiimkite džemperį, o ne skėtį");
} else {
   alert("Nereikia skėčio");
}

Kai norime patikrinti, ar kuri nors sąlyga yra teisinga, galime naudoti „ar“ operatorių, kuris yra dvigubas vamzdžio simbolis, naudojamas jūsų klaviatūroje ir atrodo taip „||“.

Paimkime pavyzdį su kitu pavyzdžiu. Norėdami pridėti daugiau pavyzdžių į tą patį failą, nesukeldami naujų komandų, galime užkomentuoti ankstesnį kodą, apvyniodami ankstesnį kodą šiais simboliais, kuriuos matėme anksčiau:

/* 
*/

Kas yra brūkšnys ir asteriskas, ir tie patys simboliai priešingoje tvarkoje, kad uždarytume užkomentuotą dalį. Apvyniokime mūsų dabartinį kodą šiais simboliais, kad jie netrukdytų naujam kodui, kuris bus. Dabar jūsų kodo failas turėtų atrodyti taip:

// alert("Sveikas, Pasauli!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
    alert("Pasiimkite džemperį ir skėtį.")
} else if (rainy && !cold){
   alert("Pasiimkite skėtį, bet ne džemperį.");
} else if (cold) {
    alert("Pasiimkite džemperį, o ne skėtį");
} else {
   alert("Nereikia skėčio");
}
*/

Nuo šiol mes sutelksime dėmesį į naujas dalis, kurias pridedame prie failo, kad galėtume sutelkti dėmesį į mokymąsi vienu metu. Galite pasirinktinai palikti ankstesnį kodą užkomentuotą, perkelti jį į naują failą savo nuorodoms, arba, jei nenorite jo matyti ilgiau, galite jį ištrinti, kad failas būtų švaresnis.

Tęskime su mūsų pavyzdžiu „ar“ atveju. Apsvarstykite scenarijų, kai kiekvieną kartą, kai jaučiate alkį ar troškulį, apsilankote savo šaldytuve maisto ir gėrimų. Kaip veiktų kodas tam?

let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
    alert("Eikite į šaldytuvą ir patikrinkite, ką turite ten.");
}
[/code>
<p>Vykdydami šį kodą, kaip ir tikriausiai spėjote, gautume šiuos rezultatus:</p>
<img src="https://firmbee.com/wp-content/uploads/13-1-800x425.png" alt="fragmentai" width="800" height="425" class="alignnone size-medium wp-image-19000 img-fluid" />
<p>Iki šiol naudojami pavyzdžiai buvo artimi realiam gyvenimui, tačiau daugeliu atvejų dirbsite su skaičiais kode. Jūs jau matėte skaičius anksčiau šioje serijoje, tačiau mes per daug nekalbėjome apie palyginimus ar operacijas, kurias galime atlikti su jais. Dabar, kai išmokome apie if else teiginius, pažvelkime į daugiau apie skaičius.</p>
<p>Dirbdami su if ir else if teiginiais, mes tikriname teisingumą teiginio. Bet ar galime taip pat sukurti prasmingą if teiginį, jei turime tik skaičius? Pavyzdžiui, kas, jei noriu gauti skėtį, jei lietaus tikimybė yra didesnė nei 50%, ar galime tai pasiekti su kodu? Taip, galime, ir štai kaip tai vyks.</p>
[code lang="js"]
let chanceOfRain = 70;
if (chanceOfRain &gt;= 50) {
    alert(&quot;Pasiimkite skėtį.&quot;);
}

Dirbdami su skaičiais, mums reikia būdo, kaip paversti juos tam tikra teisingumo ar klaidingumo forma, kad if teiginys veiktų. Yra keletas būdų, kaip tai pasiekti, priklausomai nuo mūsų naudojimo atvejo.

Pavyzdžiui, galime patikrinti, ar du skaičiai yra tiksliai lygūs vienas kitam, naudodami tris lygius ženklus, kaip šis:

let a = 10;
let b = 10;
if (a === b) {
    alert("Jie yra vienodi.");
}

Tai duotų mums įspėjimą, kuris sako „Jie yra vienodi.“.

Taip pat galime patikrinti, ar jie nėra lygūs su šiuo kodu:

let a = 10;
let b = 5;
if (a !== b) {
    alert("Jie nėra tas pats dalykas!");
}

Vykdydami aukščiau pateiktą kodą, gausime įspėjimą, kuris sako „Jie nėra tas pats dalykas!“.

Taip pat galime patikrinti, kuris iš jų yra didesnis, didesnis lygus, mažesnis arba mažesnis lygus. Galite rasti ženklų santrauką savo patogumui.

// === tikrina lygybę
// !== tikrina, ar nėra lygybės
// > didesnis už
// >= didesnis arba lygus
// < mažesnis už
// <= mažesnis arba lygus

Pasižiūrėkime dar keletą jų papildomai praktikai ir kodo ekspozicijai. Štai keletas pavyzdžių, kurie visi parodys įspėjimą, kurį jie turi if teiginiuose:

Didesnis už:

let a = 10;
let b = 5;
if (a > b) {
    alert("a didesnis už b");
}
[/code>
<p>Didesnis arba lygus:</p>

[code lang="js"]
let a = 10;
let b = 5;
if (a >= b) {
    alert("a didesnis arba lygus b");
}

Dar vienas pavyzdys, kad didesnis arba lygus:

let a = 10;
let b = 10;
if (a >= b) {
    alert("a didesnis arba lygus b");
}

Mažesnis už:

let a = 5;
let b = 10;
if (a < b) {
    alert("a mažesnis už b");
}
[/code>
<p>Mažesnis arba lygus:</p>
[code lang="js"]
let a = 5;
let b = 10;
if (a &lt;= b) {
    alert(&quot;a mažesnis arba lygus b&quot;);
}
[/code>
<p>Dar vienas pavyzdys, kad mažesnis arba lygus:</p>
[code lang="js"]
let a = 10;
let b = 10;
if (a &lt;= b) {
    alert(&quot;a mažesnis arba lygus b&quot;);
}
[/code>
<p>Naudodami šių palyginimų ar lygybės ženklų derinį, galime sukurti sudėtingus kodus, kurie gali prisitaikyti prie skirtingų sąlygų.</p>
<h2>Aritmetinės operacijos</h2>

<p>Dirbdami su skaičiais, dar viena operacija, kurią norime atlikti, yra aritmetinės operacijos. Dauguma aritmetinių operacijų turėtų būti gana pažįstamos, tačiau yra ir programavimo specifinių aritmetinių operatorių, kurie gali būti mažiau pažįstami.</p>
<p>Štai aritmetinių operacijų, kurias naudojame JavaScript, santrauka su jų reikšmėmis jūsų patogumui:</p>
[code lang="js"]
// * daugyba
// / dalyba
// + sudėtis
// - atimtis
// % modulo operacija, duoda mums likutį po dalybos
// ** eksponentė

Pirmieji keturi veiks kaip tikitės:

let a = 12;
let b = 5;
let c = a * b;
// c bus 60
c = a / b;
// c dabar bus 2.4
c = a + b;
// c dabar bus 17
c = a - b;
// c dabar bus 7

Modulo operacija duos mums likutį po pirmo skaičiaus padalijimo iš antro skaičiaus. Jei tęsiame su ankstesniais a, b ir c kodais:

c = a % b;
// c dabar bus 2
c = 18 % 5;
// c dabar turės 3 reikšmę
// nes 18 padalinta iš 5 duos mums likutį 3

Eksponentų operatorius atlieka eksponentavimą JavaScript. Jis žymimas dviem žvaigždutėmis ir paima pirmąjį elementą į antrąjį elementą.

c = 2 ** 3; // c dabar turės 8 reikšmę // nes 2 * 2 * 2 lygu 8 [/code>

Šis buvo gana ilgas mokymas, ir jūs jį įveikėte! Mes atnaujinome mūsų programavimo nustatymus ir išmokome nemažai šio mokymo metu. Kitame mokyme tęsime su daugiau būdų, kaip kontroliuoti mūsų kodo srautą!