Bazele JavaScript. Partea 2 Curs JavaScript de la începător la avansat

Aceasta este a doua parte a seriei de postări de blog JavaScript care vă va duce de la începător la avansat. Până la sfârșitul acestei serii, veți cunoaște toate elementele de bază pe care trebuie să le cunoașteți pentru a începe să codificați în JavaScript. Fără prea mult timp, să începem cu al doilea tutorial.

Noțiuni de bază JavaScript – cuprins:

1. Bazele JavaScript
2. Execuție linie cu linie
3. Două moduri de a încheia instrucțiunile
4. Comentarii

În această postare pe blog vom continua cu unde am plecat de la prima postare pe blog. În această etapă, ar trebui să aveți browserul Google Chrome deschis și, mai precis, să aveți deschisă consola JavaScript. Dacă din anumite motive le-ați închis, ar fi un moment bun să le deschideți înapoi. Să începem să învățăm elementele de bază ale JavaScrip

Dacă sunteți pe un Mac, comanda rapidă de la tastatură pentru a deschide consola este să apăsați „opțiune + comandă + J”, după ce deschideți Chrome. Dacă utilizați un dispozitiv Windows, puteți utiliza comanda rapidă de la tastatură „Control + Shift + J”, pentru a deschide Consola JavaScript, odată ce deschideți Chrome. Sau puteți accesa și meniul din partea de sus și accesați Vizualizare -> Dezvoltator -> Consola JavaScript.

Bazele JavaScript

JavaScript, ca toate celelalte limbaje de programare, este un limbaj pe care îl utilizați pentru a comunica cu computerele. Așa cum un limbaj natural are gramatică și cuvinte cunoscute pentru a forma propoziții adecvate, limbajele de programare au și anumite reguli pe care ar trebui să le urmați pentru a comunica eficient cu computerul.

De exemplu, anumite cuvinte înseamnă anumite lucruri pentru motorul JavaScript care rulează codul nostru, cum ar fi cuvântul cheie „alertă” pe care l-am folosit în tutorialul anterior avea sensul de a afișa o alertă utilizatorului cu cuvintele specifice pe care le-au pus în paranteze imediat după. . În cazul nostru, am scris „Bună, lume!” așa că am primit o alertă care spunea „Bună, lume!”.

Există și alte cuvinte cheie rezervate în JavaScript de care ar trebui să fim conștienți, astfel încât să putem comunica eficient cu computerul folosind cuvintele și gramatica potrivite. De asemenea, la fel ca gramatica pe care o avem în limbajul natural, există și o gramatică în limbajele de programare. Acea gramatică este denumită în mod obișnuit „sintaxă” în limbajele de programare, iar JavaScript nu face excepție de la aceasta. De aceea, este o idee bună să înțelegem cuvintele cheie principale și gramatica pe care le avem în JavaScript pe măsură ce începem să învățăm despre elementele de bază JavaScript. Să vedem câteva dintre principalele lucruri pe care ar trebui să le știm despre JavaScript.

Execuție linie cu linie

Când vine vorba de elementele de bază JavaScript, unul dintre primele lucruri pe care ar trebui să-l știți este că codul pe care îl scrieți va fi executat linie cu linie, de sus în jos. Acest stil de execuție a codului este denumit și JavaScript, fiind un „limbaj de programare interpretat”.

Dimpotrivă, unele limbaje de programare sunt „limbaje de programare compilate”. Câteva exemple de limbaje compilate ar fi: C, C++, C#, Swift, Java și așa mai departe. Principala diferență este că, în cazul limbajelor de programare compilate, tot codul pe care îl scrieți va fi „compilat” și va fi executat într-o singură bucată de computer. De aceea, poate fi mai greu să începi să înveți un limbaj de programare compilat, deoarece poate fi mai greu să vezi unde ai făcut o eroare în programul tău.

Câteva exemple de limbaje de programare interpretate ar fi JavaScript, Python, Bash și Matlab. Cu limbajele de programare interpretate, aveți beneficiul inerent de a vedea ce linie ați făcut eroarea, de exemplu, uitați un punct și virgulă sau nu se potrivește parantezele din cod. Având această caracteristică poate face o mare diferență în anumite aplicații, dar atunci când încercăm să încărcăm un site web cu o conexiune lentă la internet, preferați ca fiecare linie de JavaScript să fie executată cât mai repede posibil.

Două moduri de a încheia instrucțiunile

Un program de calculator la sfârșitul zilei este o grămadă de instrucțiuni pentru computer. Dar unde se termină un program unde începe următoarea instrucțiune? Există diferite abordări ale acestei probleme. JavaScript folosește două lucruri principale, punctul și virgulă și paranteze.

În funcție de tipul de instrucțiune pe care o scriem, vom folosi în general fie una pentru a încheia, fie pentru a împacheta un set de instrucțiuni. Vom folosi diferite tipuri de paranteze pentru diferite funcționalități și tipuri de date. De exemplu, în alertă ("Bună ziua, lume"); codul pe care l-am executat anterior, parantezele care înconjoară scrisul hello world îi spun computerului ce ar trebui să spună alerta, iar punctul și virgulă de la sfârșitul instrucțiunii îi spune computerului că, această instrucțiune se termină aici, puteți trece la instrucțiunea următoare. Acest lucru este foarte asemănător cu modul în care folosim punctul „.” pentru a termina propozițiile în engleză.

Comentarii

Adăugarea de comentarii la cod este o parte esențială a programării. Poate fi ușor să înțelegeți ce cod scrieți în timp ce îl scrieți, dar, în funcție de complexitatea codului, s-ar putea să aveți o idee foarte mică la șase luni, când vă întoarceți la cod.

Adăugarea de comentarii nu numai că vă face mult mai ușor să înțelegeți codul dvs. pentru viitor, dar face și mult mai ușor pentru oricine cu care lucrați să înțeleagă codul. De asemenea, vă poate ajuta să vă dezvoltați mai bine înțelegerea despre problema cu care lucrați, deoarece de obicei este mult mai ușor să rezolvați problemele împărțindu-le în bucăți mai mici. Părțile comentate ale codului dvs. vor fi ignorate de interpret și nu vor fi executate.

Există două moduri prin care puteți adăuga comentarii este JavaScipt. Prima este să adăugați un simplu comentariu de „o singură linie” cu două bare oblice ca aceasta:

// this is a comment

În acest fel, orice ai scrie după cele două bare oblice va fi ignorat pe linia specifică pe care ai pus barele oblice. Puteți repeta acest lucru de câte ori pentru a avea mai multe rânduri acoperite cu comentarii de genul acesta:

// this is a comment.
// this is another comment.
// you can keep commenting like this.

Un alt motiv pentru care folosim comentarii este să comentăm o bucată de cod pentru a experimenta codul. De exemplu, puteți scrie aceeași funcționalitate în mai multe moduri și poate doriți să comentați o versiune a aceluiași cod pentru a compara performanța sau rezultatele individuale. Să vedem asta și cu un exemplu.

Continuați și copiați și inserați următorul cod în consola JavaScript pe care ați deschis-o în Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

Dacă doriți să exersați suplimentar la scrierea întregului cod, puteți face și asta. Un lucru pe care ar trebui să-l știți despre scrierea mai multor linii de cod în consolă este că pentru a ajunge la următoarea linie fără a o executa, puteți apăsa „shift + enter” pentru a face asta. În caz contrar, după ce ați scris o singură linie de cod, dacă apăsați doar enter, va rula acea linie de cod. În acest exemplu, aceasta nu este o problemă mare și de fapt este bine să o executați și linie cu linie, deoarece avem un exemplu simplu care poate funcționa și în acel stil.

După ce l-ați copiat și lipit sau după ce ați scris codul, continuați și apăsați „Enter” pentru a rula codul. Rezultatul ar trebui să vă ofere două alerte separate. De asemenea, pentru a respinge alertele, puteți face clic pe „OK”, în acest caz, ei nu vor face nimic deoarece aceasta este o alertă simplă și nu declanșează nimic după afișarea mesajului pe care vrem să-l afișam.

Când am executat codul astfel, executăm aceeași funcționalitate de două ori. Dar ce ar trebui să faceți dacă doriți să vedeți o singură implementare la un moment dat? Ei bine, știți exact ce să faceți în acest caz pentru că am vorbit deja despre asta. Continuați și comentați una dintre rânduri după ce lipiți sau scrieți codul, astfel încât doar a doua implementare a „Hi, User!” este executat.

Odată ce ați finalizat provocarea sau dacă rămâneți blocat în timpul provocării, puteți vedea codul soluției pentru provocare mai jos. Înainte de a arunca o privire asupra soluției, vă recomand întotdeauna să o încercați singur, deoarece veți învăța cel mai bine atunci când o exersați cu adevărat. Dacă ați finalizat provocarea cu succes, ar trebui să vă uitați la un ecran ca acesta:

Rețineți că atunci când comentați o linie de cod, aceasta se transformă în aceeași culoare ca și linia comentată anterioară. Această diferență de culoare aici nu face de fapt o diferență pentru computer, dar este o caracteristică destul de utilă pentru noi atunci când scriem cod. În acest fel, este mult mai ușor dacă comentați din greșeală o linie de cod, deoarece culorile o vor face evidentă.

O altă modalitate de a comenta codul este utilizarea barei oblice și a caracterului asterisc. În acest fel, putem crea comentarii cu o singură linie sau mai multe linii în codul nostru.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

Acum cunoașteți elementele de bază JavaScript. În următorul tutorial, vom vedea un concept extrem de comun în programare numit „variabile” împreună cu tipurile de date de bază în JavaScript.

Autor: Robert Whitney

Expert JavaScript și instructor care antrenează departamentele IT. Scopul său principal este de a crește productivitatea echipei, învățându-i pe alții cum să coopereze eficient în timp ce codifică.

Vizualizați toate postările

Curs JavaScript de la începător la avansat în 10 postări de blog:

1. Cum să începeți codarea în JavaScript?
2. Bazele JavaScript
3. Variabile și diferite tipuri de date în JavaScript
4. Fragmente și structuri de control
5. bucle while și bucle for
6. matrice Java
7. Funcții JavaScript
8. obiecte JavaScript
9. Metode JavaScript și multe altele
10. Rezumatul cursului JavaScript