• Traducere

Materialul, a cărui traducere o publicăm astăzi, este dedicat elementelor de bază ale JavaScript și este destinat programatorilor începători. Poate fi, de asemenea, considerată o mică carte de referință despre constructele de bază JS. Aici vom vorbi, în special, despre sistemul de tip de date, variabile, matrice, funcții, prototipuri de obiecte și câteva alte caracteristici ale limbajului.

Tipuri de date primitive JavaScript are următoarele tipuri de date primitive: număr, boolean, șir, nedefinit, nul. Trebuie remarcat imediat că atunci când lucrăm cu tipuri de date primitive, de exemplu, literali șir, putem accesa metodele și proprietățile acestora chiar și fără a efectua o conversie explicită. Ideea aici este că atunci când se încearcă efectuarea unor astfel de operațiuni, literalele sunt echipate automat cu învelișul de obiect corespunzător.▍Numerele Există un singur tip de număr în JavaScript - numere cu virgulă mobilă cu precizie dublă. Aceasta duce la faptul că rezultatele calculării unor expresii sunt incorecte din punct de vedere aritmetic. Poate știți deja că în JS valoarea expresiei 0,1 + 0,2 nu este egală cu 0,3. În același timp, atunci când se lucrează cu numere întregi, astfel de probleme nu sunt observate, adică 1 + 2 === 3.

JavaScript are un obiect Number, care este un înveliș de obiect pentru valori numerice. Obiectele de tip Number pot fi create fie folosind o comandă precum var a = new Number(10) , fie vă puteți baza pe comportamentul automat al sistemului descris mai sus. Acest lucru permite în mod special apelarea metodelor stocate în Number.prototype atunci când sunt aplicate literalelor numerice:

(123).toString(); //"123" (1.23).toFixed(1); //"1.2"
Există funcții globale concepute pentru a converti valorile altor tipuri într-un tip numeric. Acestea sunt parseInt() , parseFloat() și constructul Number(), care în acest caz acționează ca o funcție obișnuită care realizează conversia tipului:

ParseInt("1") //1 parseInt("text") //NaN parseFloat("1.234") //1.234 Number("1") //1 Number("1.234") //1.234
Dacă o operațiune cu numere are ca rezultat ceva care nu este un număr (în timpul unor calcule sau când încercați să convertiți ceva într-un număr), JavaScript nu va arunca o eroare, ci va reprezenta rezultatul unei astfel de operații ca o valoare NaN ( Nu-un-număr, nu-un număr). Pentru a verifica dacă o valoare este NaN, puteți utiliza funcția isNaN().

Operațiile aritmetice JS funcționează într-un mod foarte familiar, dar trebuie să acordați atenție faptului că operatorul + poate efectua atât adăugarea numerelor, cât și concatenarea șirurilor.

1 + 1 //2 "1" + "1" //"11" 1 + "1" //"11"

▍Șiruri Șirurile de caractere în JavaScript sunt secvențe de caractere Unicode. Literele șiruri sunt create prin includerea textului care trebuie cuprins între ghilimele duble ("") sau ghilimele simple (""). După cum am menționat deja, atunci când lucrăm cu literale șir, ne putem baza pe învelișul de obiect corespunzător, al cărui prototip are multe metode utile, inclusiv substring(), indexOf(), concat().

"text".substring(1,3) //ex "text".indexOf("x") //2 "text".concat(" end") //text final
Șirurile, ca și alte valori primitive, sunt imuabile. De exemplu, metoda concat() nu modifică un șir existent, ci creează unul nou.

▍Valori booleene Tipul de date boolean în JS este reprezentat de două valori - adevărat și fals. Limba poate converti automat diferite valori într-un tip de date boolean. Deci, pe lângă valoarea logică false, următoarele valori sunt nul, nedefinit, "" (șir gol), 0 și NaN. Orice altceva, inclusiv orice obiect, sunt valori adevărate. În timpul operațiilor booleene, orice este considerat adevărat este convertit în adevărat, iar orice este considerat fals este convertit în fals. Aruncă o privire la următorul exemplu. În conformitate cu principiile de mai sus, șirul gol va fi convertit în fals și, ca urmare a executării acestui cod, linia This is false va apărea în consolă.

Let text = ""; if(text) ( console.log ("Acesta este adevărat"); ) else ( console.log ("Acesta este fals"); )

Obiecte Obiectele sunt structuri dinamice formate din perechi cheie-valoare. Valorile pot fi tipuri de date primitive, obiecte sau funcții.

Obiectele sunt cel mai ușor create folosind sintaxa literală a obiectului:

Let obj = ( mesaj: „Un mesaj”, doSomething: function() () )
Proprietățile obiectului pot fi citite, adăugate, editate și șterse în orice moment. Iată cum se face:

• Proprietăți de citire: obiect.nume, obiect .
• Scrierea datelor în proprietăți (dacă proprietatea accesată nu există, se adaugă o nouă proprietate cu cheia specificată): obiect.nume = valoare, obiect = valoare.
• Stergerea proprietatilor: delete object.name , delete object .

Iată câteva exemple:

Fie obj = (); // crearea unui obiect gol obj.message = "Un mesaj"; // adăugarea unei noi proprietăți obj.message = "Un mesaj nou"; // editarea proprietății delete object.message; // ștergerea unei proprietăți
Obiectele din limbaj sunt implementate ca tabele hash. Un tabel hash simplu poate fi creat folosind comanda Object.create(null):

Let french = Object.create(null); french["yes"] = "oui"; french["no"] = "nu"; franceză["da"];//"oui"
Dacă trebuie să faceți un obiect imuabil, puteți utiliza comanda Object.freeze().

Pentru a itera prin toate proprietățile unui obiect, puteți utiliza comanda Object.keys():

Funcția logProperty(nume)( console.log(nume); //nume proprietate console.log(obj); //valoare proprietate ) Object.keys(obj).forEach(logProperty);

▍Compararea valorilor tipurilor și obiectelor primitive Când lucrați practic cu valori primitive, puteți, după cum s-a spus deja, să le percepeți ca obiecte care au proprietăți și metode, deși nu sunt obiecte. Valorile primitive sunt imuabile, iar structura internă a obiectelor se poate modifica Variabile În JavaScript, variabilele pot fi declarate folosind cuvintele cheie var, let și const.

Când folosiți cuvântul cheie var, puteți declara o variabilă și, dacă este necesar, o inițializați cu o anumită valoare. Dacă o variabilă nu este inițializată, valoarea ei este nedefinită. Variabilele declarate folosind cuvântul cheie var au sferă funcțională.

Cuvântul cheie let este foarte asemănător cu var , diferența fiind că variabilele declarate cu cuvântul cheie let au domeniul de aplicare al blocului.

Variabilele declarate folosind cuvântul cheie const au, de asemenea, domeniul de aplicare al blocului, care, având în vedere că valorile unor astfel de variabile nu pot fi modificate, s-ar numi mai corect „constante”. Cuvântul cheie const, care îngheață valoarea unei variabile declarate folosindu-l, poate fi comparat cu metoda Object.freeze(), care îngheață obiectele.

Dacă o variabilă este declarată în afara unei funcții, domeniul ei este global.

Matrice Matricele în JavaScript sunt implementate folosind obiecte. Ca urmare, atunci când vorbim despre matrice, vorbim de fapt despre obiecte asemănătoare matricei. Puteți lucra cu elemente de matrice folosind indecșii acestora. Indicii numerici sunt convertiți în șiruri de caractere și utilizați ca nume pentru a accesa valorile elementelor de matrice. De exemplu, un construct precum arr este similar cu un construct precum arr["1"] și ambele vor da acces la aceeași valoare: arr === arr["1"] . Pe baza celor de mai sus, o matrice simplă declarată cu let arr = ["A", "B", "C"] este reprezentată ca un obiect cam așa:

("0": "A", "1": "B", "2": "C")
Eliminarea elementelor dintr-o matrice folosind comanda de ștergere lasă găuri în ea. Pentru a evita această problemă, puteți folosi comanda splice(), dar este lentă deoarece, după eliminarea unui element, mută elementele rămase ale matricei, de fapt, mutându-le la începutul matricei, la stânga.

Fie arr = ["A", "B", "C"]; șterge arr; console.log(arr); // ["A", gol, "C"] console.log(arr.length); // 3
Metodele matrice facilitează implementarea structurilor de date, cum ar fi stivele și cozile:

// stack let stack = ; stack.push(1); // stack.push(2); // lăsați să dureze = stack.pop(); // console.log(ultimul); // 2 // coada let coada = ; coada.push(1); // coada.push(2); // let first = queue.shift();// console.log(first); // 1

Funcții Funcțiile din JavaScript sunt obiecte. Funcțiile pot fi atribuite variabilelor, stocate în obiecte sau matrice, transmise ca argumente altor funcții și returnate de la alte funcții.

Există trei moduri de a declara funcții:

• Declarație clasică de funcție (Declarație de funcție sau Declarație de funcție).
• Utilizarea expresiilor de funcție, numite și Literale de funcție.
• Folosind sintaxa funcției săgeată.

▍Declarația clasică a funcției Cu această abordare a declarației funcției, se aplică următoarele reguli:

• Primul cuvânt cheie de pe linia de declarare a funcției este function .
• Funcția trebuie să primească un nume.
• O funcție poate fi folosită în cod înainte de declararea ei datorită mecanismului de ridicare a declarației funcției în vârful domeniului în care este declarată.

Iată cum arată o declarație clasică de funcție:

Funcția doSomething()()

▍Expresii de funcție Când utilizați expresii de funcție, luați în considerare următoarele:

• Cuvântul cheie funcție nu mai este primul cuvânt pe linia de declarare a funcției.
• Un nume de funcție este opțional. Este posibil să utilizați atât expresii de funcții anonime, cât și cu nume.
• Comenzile pentru apelarea unor astfel de funcții trebuie să urmeze comenzile pentru declararea lor.
• O astfel de funcție poate fi lansată imediat după declararea ei, folosind sintaxa IIFE (Expresie Funcție Invocată Imediat).

Expresia funcției arată astfel:

Lasă să facă ceva = function()()

▍Funcții săgeți Funcțiile săgeată pot fi considerate în esență „zahăr sintactic” pentru crearea expresiilor de funcție anonime. Trebuie remarcat faptul că astfel de funcții nu au propriile entități this și argumente. Declarația unei funcții săgeată arată astfel:

Lasă să facă ceva = () = > ();

▍Moduri de apelare a funcțiilor Funcțiile pot fi apelate în diferite moduri Apelarea funcției normale doSomething(arguments) Apelarea unei funcții ca metodă a theObject.doSomething(arguments) theObject["doSomething"](arguments) Apelarea unei funcții ca un constructor doSomething. (argumente) Apelarea unei funcții folosind metoda apply() doSomething.apply(theObject, ) doSomething.call(theObject, arguments) Apelarea unei funcții folosind metoda bind() let doSomethingWithObject = doSomething.bind(theObject); faceSomethingWithObject();
Funcțiile pot fi apelate cu mai multe sau mai puține argumente decât numărul de parametri care au fost specificati când au fost declarați. În timpul funcționării funcției, argumentele „extra” vor fi pur și simplu ignorate (deși funcția va avea acces la ele), parametrii lipsă vor primi valoarea undefined .

Funcțiile au doi pseudo-parametri: this și arguments.

▍Cuvântul cheie this Cuvântul cheie this reprezintă contextul unei funcții. Valoarea către care indică depinde de modul în care a fost apelată funcția. Iată valorile pe care le ia acest cuvânt cheie, în funcție de cum este numită funcția (ele, cu exemple de cod, constructele din care sunt folosite aici, sunt descrise mai sus):

• Un apel de funcție normal este window / nedefinit .
• Apelarea unei funcții ca metodă a unui obiect - theObject .
• Apelarea unei funcții ca constructor este un obiect nou.
• Apelarea unei funcții folosind metoda apply() - theObject .
• Apelarea unei funcții folosind metoda bind() - theObject .

▍Cuvântul cheie arguments Cuvântul cheie arguments este un pseudo-parametru care oferă acces la toate argumentele utilizate în apelul funcției. Arată ca o matrice, dar nu este o matrice. În special, nu are metode matrice.

Funcția reduceToSum(total, valoare)( returnează total + valoare; ) funcția sum())( let args = Array.prototype.slice.call(arguments); return args.reduce(reduceToSum, 0); ) sum(1,2 , 3);
O alternativă la cuvântul cheie arguments este o nouă sintaxă pentru parametrii rămași. În exemplul următor, args este o matrice care conține tot ce a trecut funcției când a fost apelată.

Funcția sum(...args)( return args.reduce(reduceToSum, 0); )

▍Instrucțiune de returnare O funcție care nu conține o instrucțiune de returnare va returna nedefinit. Când utilizați cuvântul cheie return, acordați atenție modului în care funcționează mecanismul de inserare automată a punctului și virgulă. De exemplu, următoarea funcție nu va returna un obiect gol, ci o valoare nedefinită:

Funcția getObject() ( return ( ) ) getObject()
Pentru a evita această problemă, plasați acolada de deschidere pe aceeași linie cu instrucțiunea return:

Funcția getObject() ( return ( ) )

Tastare dinamică JavaScript este un limbaj cu tastare dinamică. Aceasta înseamnă că valorile concrete au tipuri, dar variabilele nu. În timpul execuției programului, valorile de diferite tipuri pot fi scrise în aceeași variabilă. Iată un exemplu de funcție care funcționează cu valori de diferite tipuri:

Funcția log(valoare)( console.log(valoare); ) log(1); log("text"); log((mesaj: „text”);
Pentru a afla tipul de date stocate într-o variabilă, puteți utiliza operatorul typeof():

Fie n = 1; tip de(n); //număr let s = "text"; tip(e); //șir let fn = function() (); typeof(fn); //funcţie

Model de execuție cu un singur thread Timpul de execuție JavaScript este cu un singur thread. Acest lucru, în special, se exprimă în imposibilitatea execuției simultane a două funcții (dacă nu se ține cont de posibilitatea executării asincrone a codului, pe care nu o atingem aici). Mediul de rulare are ceva numit Coadă de evenimente care stochează o listă de joburi care trebuie procesate. Ca urmare, schema de execuție JS cu un singur thread nu are problema blocajelor de resurse, deci nu este nevoie de un mecanism de blocare. Cu toate acestea, codul care intră în coada de evenimente trebuie să se execute rapid. Dacă supraîncărcați firul principal într-o aplicație de browser cu multă muncă, pagina aplicației nu va răspunde la introducerea utilizatorului și browserul vă va solicita să închideți această pagină. Gestionarea excepțiilor JavaScript are un mecanism pentru gestionarea excepțiilor. Funcționează după un principiu destul de obișnuit pentru astfel de mecanisme: codul care poate provoca o eroare este formatat folosind constructul try/catch. Codul în sine este în blocul try, erorile sunt tratate în blocul catch.

Este interesant de observat că uneori JavaScript, atunci când apar situații de urgență, nu produce mesaje de eroare. Acest lucru se datorează faptului că JS nu a aruncat erori până la adoptarea standardului ECMAScript 3.

De exemplu, în următorul fragment de cod, o încercare de a modifica un obiect înghețat va eșua, dar nu se va face nicio excepție.

Let obj = Object.freeze(); obj.message = "text";
Unele dintre erorile JS „silențioase” apar în modul strict, le puteți activa folosind constructul „utilizați strict”; .

Sistemul prototip Sistemul prototip stă la baza mecanismelor JS, cum ar fi funcțiile de constructor, comanda Object.create() și cuvântul cheie class.
Luați în considerare următorul exemplu:

Let service = ( doSomething: function() () ) let specializedService = Object.create(service); console.log(specializedService.__proto__ === service); //adevărat
Aici, comanda Object.create() a fost folosită pentru a crea un obiect specializedService al cărui prototip urma să fie un obiect de serviciu. Ca rezultat, se dovedește că metoda doSomething() poate fi apelată prin accesarea unui obiect specializedService. În plus, aceasta înseamnă că proprietatea __proto__ a obiectului specializedService indică către obiectul serviciu.

Să creăm acum un obiect similar folosind cuvântul cheie class:

Class Service ( doSomething() ) clasa SpecializedService extinde Service ( ) let specializedService = new SpecializedService(); console.log(specializedService.__proto__ === SpecializedService.prototype);
Metodele declarate în clasa Service vor fi adăugate obiectului Service.prototype. Instanțele clasei Service vor avea același prototip (Service.prototype). Toate instanțele vor delega apelurile de metodă către obiectul Service.prototype. Ca urmare, se dovedește că metodele sunt declarate o singură dată, în Service.prototype , după care sunt „moștenite” de toate instanțele clasei.

▍ Lanț de prototipuri Obiectele pot fi „moștenitori” altor obiecte. Fiecare obiect are un prototip ale cărui metode îi sunt disponibile. Dacă încercați să accesați o proprietate care nu se află în obiectul în sine, JavaScript va începe să o caute în lanțul de prototipuri. Acest proces va continua până când proprietatea este găsită sau până când căutarea ajunge la sfârșitul lanțului Despre programarea funcțională în JavaScript În JavaScript, funcțiile sunt obiecte de primă clasă, limbajul acceptă un mecanism de închidere. Acest lucru deschide calea către implementarea tehnicilor de programare funcțională în JS. În special, vorbim despre posibilitatea utilizării funcțiilor de ordin superior.

O închidere este o funcție internă care are acces la variabilele declarate în interiorul funcției părinte, chiar și după ce funcția părinte a fost executată.

O funcție de ordin superior este o funcție care este capabilă să ia alte funcții ca argumente, să returneze funcții sau să facă ambele.

Programarea funcțională în JS este acoperită în multe publicații. Dacă sunteți interesat, iată câteva materiale pe această temă dedicată

Datorită cererii populare, lansăm o serie de lecții JavaScript. Dacă sunteți hotărât să stăpâniți JS, atunci trebuie să aveți cunoștințe de bază despre HTML și CSS, deoarece aceasta este fundația, fără de care este greu de înțeles ce se va discuta.

La noi, voi încerca să explic într-un limbaj ușor de înțeles, să arăt cu exemple din viața reală, pentru că totul se învață prin comparație.

Ce este JavaScript sau cum să înțelegeți ce scop este necesar pentru dezvoltarea web!

Trăim într-o lume în care totul este tangibil, ne dăm seama de ideile care ne vin în minte. Construim case, mașini și ne deplasăm folosind diverse tehnici. Adică, ceea ce putem face în lumea reală poate fi imaginat în comparație cu HTML, unde acționează ca un material de construcție, fundația pe care se sprijină totul și, cu ajutorul CSS, proiectăm această lume, o facem colorată, felul în care am vrut am dori să-l vedem singur.

Probabil vă întrebați dacă HTML și CSS sunt ceea ce suntem înconjurați, deci ce este JavaScript? Unde apare în lumea noastră?

Cred că ar fi mai ușor de explicat folosind exemplul filmului Gary Potter, cred că mulți dintre voi l-ați vizionat și veți înțelege ce se va discuta. Conform scenariului filmului, știm că Gary avea super puteri, era un vrăjitor și o baghetă magică l-a ajutat în acest sens. Bagheta magică a fost cea care i-a oferit oportunitatea de a crea magie, atât de sus cât avea cunoștințele necesare pentru a o face unică.

JavaScript este o baghetă magică pe care o are fiecare dezvoltator web, dar ce magie poți crea cu ea depinde doar de cunoștințele pe care le are dezvoltatorul. Cei care au stăpânit această limbă sunt vrăjitori și fac cu adevărat minuni.

JavaScript nu este complet fără componentele sale HTML și CSS. Mulți programatori menționează trei limbi care formează „straturile” unei pagini web: HTML, CSS și JavaScript.

HTML este primul limbaj de marcare hipertext - oferă straturi structurale, organizând expresiv conținutul paginii, cum ar fi text, imagini și alte elemente.

Al doilea, CSS (Cascading Style Sheets), creează un design frumos, aspectul conținutului HTML.

Iar al treilea - JavaScript - adaugă straturi comportamentale, înviorând pagina web, făcând-o interactivă, adică creând elemente pentru interacțiunea cu vizitatorii.

În concluzie, pentru a stăpâni JavaScript, trebuie să aveți o bună înțelegere atât a HTML, cât și a CSS.

Programarea poate părea o magie incredibilă, dincolo de îndemâna simplilor muritori. Cu toate acestea, majoritatea conceptelor sale nu sunt greu de înțeles. JavaScript este destul de prietenos pentru începători, dar este totuși mai complex decât HTML sau CSS, așa că prin această serie de lecții, vă vom învăța concepte fundamentale de programare pe care le puteți aplica la scripting în JavaScript.

Vă veți familiariza cu noile simboluri ( ), , ; , (), !, învață desemnarea cuvintelor noi (var, null, else if), vom analiza regulile de punctuație și sintaxa limbajului în sine, și toate acestea pentru a-ți crea magia.

Materialul a fost pregătit de Denis Gorelov, scrieți-vă comentariile și asigurați-vă că împărtășiți acest material prietenilor voștri.

• cum se introduce un script într-un document HTML (informații generale);
• comentarii în JavaScript;
• cum să declari variabile și să le dai nume corecte;
• analizarea scriptului și sintaxa metodei;
• metoda alert();
• detaliu util: „stub” pentru o legătură întreruptă temporar

De la autor

Există multe subtilități diferite în crearea paginilor web. Dar există și trei piloni. Acestea sunt HTML, CSS și JavaScript.

Vă recomand să vă organizați autoeducația astfel: de îndată ce stăpânești sintaxa HTML și înveți cum să faci pagini primitive cu text, imagini și tabele, începe imediat să înveți CSS. Odată ce înțelegeți cum să lucrați cu CSS, începeți să stăpâniți JavaScript, extinzându-vă simultan „vocabularul” în toate cele trei limbi. Cred că în șase luni vei putea construi un site web foarte frumos și funcțional.

Multă vreme nu am știut cum să abordez JavaScript. Am dat peste manuale care fie erau prea abstracte - teorie, teorie, și nu era clar cum să le aplici în practică, fie, dimpotrivă, prea specifice: iată un set de rețete gata făcute, ia-l și folosește-l, dar cum se dovedește totul nu este treaba ta.

Am dat cumva de un manual de Vadim Dunaev. Mulți oameni, știu, critică acest manual. În plus, am descărcat un PDF scanat dezgustător, unde în loc de „()” ar putea fi, de exemplu, „Q”, iar literele latine din coduri au fost înlocuite (pe alocuri!) cu altele similare rusești, motiv pentru care aceste coduri nu funcționează. În general, a trebuit să puf. Și, să fiu sinceră, dacă nu aș fi citit nimic despre JavaScript înainte, nu aș fi înțeles aceste erori și m-aș fi înscris în rândurile escalatorilor. Dar eram șomer pe vremea aceea, am avut timp să intru în asta și mi-a plăcut manualul. Dar este foarte detaliat și conceput pentru persoanele care au intrat deja în contact cu programarea.

Nota 2012

Acum, după câțiva ani, mai privesc acest manual fără același entuziasm. Este depășit, „cromat” pentru IE și destul de superficial; Există, de asemenea, erori reale și cod neglijent, iar unele lucruri utile nu sunt găsite. Dar, în comparație cu acele „ghiduri proaste-tâmpite” pe care motoarele de căutare le-au produs din abundență, acesta a fost ceva.

Deci, vreau să încerc să omor două păsări dintr-o singură piatră. Scrie ceva de înțeles pentru orice ceainic și în același timp constructiv și educativ. Pentru ca acest ceainic, pe baza sfatului meu, să poată scrie un scenariu simplu, dar complet original.

Inserarea într-un document HTML

Probabil ați văzut următoarele etichete în codurile HTML:

Acest abracadabra dintre etichete este scenariul.

Eticheta în sine aparține limbajului HTML și poate avea următoarele atribute:

• limbă
• tip

Acest atribut este opțional. Ar trebui să fie folosit fie pentru a specifica versiunea limbii (javascript1.1, javascript1.2 etc.), fie dacă utilizați o altă limbă (de exemplu,