Traducerea adaptată a articolului "JavaScript cu stivă completă în șase săptămâni: un ghid de curriculum"

Dezvoltarea web este una dintre cele mai ușoare și mai populare direcții între programatorii începători. Pentru munca de lucru editor de text și browser, nu este necesar să studiezi algoritmi la un nivel avansat, rezultatul fiecărui etapă de scriere a programului este vizual - în general, o mulțime de beneficii. Abilitățile cheie în contextul dezvoltării web sunt considerate cunoștințe JavaScript.

Acum, JavaScript se dezvoltă foarte repede și, prin urmare, atunci când învățați limba este ușor de confundat. Vă oferim un curriculum cu o structură convenabilă care acoperă toate aspectele necesare ale tehnologiilor JavaScript și ale tehnologiilor conexe.

De ce JavaScript?

Este demn de remarcat deschiderea limbajului - companiile, de obicei concurente între ele, cooperează pentru a dezvolta JavaScript. Limba este foarte flexibilă și se va potrivi susținătorilor atât unei abordări orientate pe obiecte și funcționale. Un număr mare de biblioteci și cadre vă permite să rezolvați cu ușurință orice tipuri de sarcini, iar platforma NODE.JS Server face posibilă utilizarea unei limbi nu numai în browser, ci și în consola. Puteți scrie chiar și desktop-uri și aplicatii mobile: În primul rând - cu cadrul electronului, iar al doilea este pe nativ clasificat sau reacționează nativ.

Bazele

La început este necesar să studiem conceptele de bază ale JavaScript, dezvoltarea web și programarea în ansamblu:

• obiecte orientate pe obiecte și fabrici, moștenire;
• funcțional JS - funcții de ordin superior, închideri, recursură;
• specificația testului de iasomie;
• elementele de bază ale HTML, CSS și JQuery.

Git.

Git este instrumentul de care aveți nevoie pentru dezvoltatori, deci este nevoie cât mai curând posibil. Iată abilitățile de bază pe care trebuie să le posedați:

• crearea și mutarea fișierelor în directoare;
• inițializarea și comiterea în git;
• stabilind depozitele din GitHub.

Algoritmi și structuri de date

Apoi merită să examinați algoritmii (în special conceptul de complexitate al algoritmilor), precum și structurile de date de bază: liste conectate, cozi, stive, căutări binare și masă hash. Acest lucru vă va ajuta.

Backend.

Nod.js.

Acum 10 ani, JavaScript ar putea fi folosit numai pentru dezvoltarea Frontend. Acum, datorită nod.js, cazul nu se limitează la un "front". Nodul este doar un mediu pentru executarea codului JS pe partea serverului, deci nu va trebui să studiați noua sintaxă, dar va trebui să importați și să exportați fișierele, să împărțiți codul pe module și să utilizați pachetul NPM Manager.

Servere, http, express.js

După studierea nodului, este necesar să continuați să vă familiarizați cu dezvoltarea backendului și să sortați servere și rutare. Puteți începe de la porturi și protocoale cu accent pe HTTP, apoi luați o bibliotecă Express-Nod pentru a gestiona cererile.

JavaScript asincron.

Baze de date, scheme, modele și ORM

Bazele de date sunt unul dintre cele mai importante elemente ale dezvoltării web. Dacă aplicația dvs. trebuie să descărcați sau să stocați orice date care nu sunt pierdute la actualizarea paginii va trebui să utilizeze baza de date. Este necesar să învățăm să distingem între bazele de date relaționale și non-relaționale și să înțelegem tipurile de conexiuni. Apoi să vă familiarizați cu diferite. Abilitatea de a lucra cu Orm nu va fi prea inutilă.

În față

HTML și CSS.

HTML și CSS este baza bazelor pentru orice dezvoltator web. Nu trebuie să le cunoașteți perfect, dar trebuie să le înțelegeți. De asemenea, puteți explora orice bibliotecă populară (de exemplu, bootstrap) și preprocesorul CSS ca SASS - va ajuta la ca CSS să fie similar cu codul obișnuit. Pentru a simplifica lucrul cu HTML, puteți alege unul dintre cele mai populare tempolizatori, de exemplu, PUG.

jquery și manipulare dom

După ce a creat aspectul paginii la ajutați HTML. Și CSS, veți folosi Biblioteca JQuery pentru a controla DOM. Mulți cred că JQuery este inutil și va fi în curând înlocuit cu unghiular și reacționează, dar este insanely popular și, prin urmare, merită să o cunoașteți. În plus, într-o zi veți cădea într-o situație în care veți fi incomod să înscrieți microscopul reacționar, iar apoi JQuery ușor va veni la salvare.

Instrumente de dezvoltatori cromate

Ar fi de neiertat să împărți atenția instrumentelor cromate care dau o mare cantitate de oportunitate. Cu ele puteți studia elementele DOM, depanați prin consola, urmăriți rutele și multe altele. Următoarele sunt caracteristicile convenabile ale consolei Chrome, care vor simplifica executarea sarcinilor de rutină.

Ajax.

Dacă doriți ca aplicația să nu reîncărcați paginile după fiecare operație de baze de date, veți avea nevoie cu siguranță Ajax - trimite solicitări HTTP asincrone asincrone, răspunsurile la care sunt actualizate numai o parte a afișajului. Puteți lucra cu Ajax prin jQuery utilizând metoda.Ajax.

Programarea nu este doar o modalitate de a câștiga bani mari și nici măcar munca mentală. Aceasta este o oportunitate de a înțelege ceea ce constă în lumea din jurul lui, descompune-o în particule mici și apoi re-asamblează, ghidat de logica și cunoașterea proprie.

Limbile de programare sunt doar un instrument cu care o persoană construiește reguli în sistemele create.

Internetul este o mulțime de oportunități pentru care mințile luminoase și întreprinzătoare sunt confiscate. Desigur, dezvoltarea web are, de asemenea, propriile instrumente pentru implementarea ideilor în viață. Unul dintre ei - limba programare JavaScript. care vor fi discutate în acest articol:

Informații generale

Mulți oameni, fără nici o legătură cu sfera IT, au auzit cuvântul Java. Limba independentă revoluționară privind limba pe care se scriu în mod activ aplicațiile sisteme mobile. A fost dezvoltată de compania promițătoare Sun, care a trecut apoi "sub aripa" Oracle. Dar nici una, nici alte companii nu au nimic de-a face cu JavaScript:

De la Sun a luat doar permisiunea de a folosi o parte a numelui. În mod surprinzător, JavaScript nu deține nici o firmă deloc.

Când scrieți aplicații web, programarea JavaScript este utilizată cel mai des. Dacă lista pe scurt caracteristici cheie Această limbă trebuie selectată după cum urmează:

• Obiect orientat spre obiect. Execuția programului este interacțiunea obiectelor;
• Aducerea automată a tipurilor de date;
• Funcțiile sunt obiectele clasei de bază. Această caracteristică face ca JavaScript să fie similar cu multe limbi de programare funcționale, cum ar fi Lisp și Haskell;
• Curățarea automată a memoriei. Așa-numita colectare de gunoi face ca JavaScript similar cu C # sau Java.

Dacă vorbim despre esența utilizării JavaScript, această limbă vă permite să "reînvieți" pagini fixe de site-uri utilizând un cod care poate fi pornit ( așa-numitele scripturi). Adică, puteți face o analogie cu desene animate în care HTML și CSS sunt eroii pro-mâini, iar JavaScript este ceea ce le face să se miște.

Dacă vorbim despre sintaxa JavaScript, atunci următoarele caracteristici sunt inerente:

• Registrul este important. Funcțiile cu numele FUNC () și FUNC () - complet diferit;
• După operatori, este necesar să se pună un punct cu o virgulă;
• Obiecte și operațiuni încorporate;
• Spațiile nu sunt luate în considerare. Puteți utiliza câte liniuțe, precum și traducerile de șir pentru a vă asigura codul.

Cel mai simplu cod de pe JavaScript arată astfel:

Scopul aplicatiei

Pentru a înțelege de ce este nevoie de JavaScript și cât de mult este necesar să se studieze, unele zone în care se aplică această limbă Programare.

• Dezvoltarea aplicațiilor web. Doriți să instalați un contor simplu, să organizați transmisia de date între formulare sau să puneți pe site-ul dvs.? Apoi JavaScript va face un asistent credincios în această chestiune;
• "Participare activă" în Ajax. Această tehnologie are aplicații accelerate semnificativ, exercitarea schimbului de date cu serverul din modul "fundal":

• OS. Poate că cineva nu știa, dar Windows, Linux și Mac au concurenții lor de browser, cota leului din codul cărora este scrisă în JavaScript;
• Aplicatii mobile;
• Domeniul de instruire. Orice specialitate specializată la universitate include studiul JavaScript într-un fel sau altul. Acest lucru se datorează faptului că limba a fost dezvoltată inițial pentru programatori foarte puternici. Lecțiile JavaScript sunt logic țesute la cursul HTML de bază, astfel încât dezvoltarea trece pur și simplu.

Avantaje și dezavantaje

Nu credeți că JavaScript este un fel de panaceu din toate problemele, iar fiecare programator cu un zâmbet pe față se bucură de această limbă. Totul din lume are propriul său pozitiv și laturi negative. Pentru a începe, notăm deficiențele.

• Nevoia de a oferi browser-ul încrucișat. Deoarece JavaScript acționează ca o tehnologie de internet, atunci trebuie să vă ocupați de regulile care înființează World Wide Web. Codul trebuie efectuat corect în toate sau cel puțin cele mai populare browsere;
• Sistemul de moștenire din limbă cauzează dificultăți în înțelegerea a ceea ce se întâmplă. JavaScript implementat moștenirea bazată pe prototipuri. Persoanele care au studiat alte limbi de programare orientate spre obiecte sunt obișnuiți cu cele obișnuite " clasa descendentă moștenește clasa părintească" Dar în JavaScript, astfel de lucruri sunt angajate direct în obiecte, iar acest lucru nu se potrivește în cap;
• Absent biblioteca standard. JavaScript nu oferă oportunități de a lucra cu fișiere, fluxuri I / O și alte lucruri utile;
• Sintaxa ca întreg face dificilă înțelegerea. Frumusețea codului nu este în mod evident o rugină JavaScript, dar se observă regula principală a programatilor: " Lucrări? Nu încercați!».

Acum merită să remarcăm câteva avantaje

• JavaScript oferă un numar mare de oportunități de a rezolva o mare varietate de sarcini. Flexibilitatea limbii vă permite să utilizați mai multe șabloane de programare în legătură cu condițiile specifice. Mintea inventivă va primi plăcerea actuală;
• Popularitatea JavaScript deschide o cantitate considerabilă de biblioteci gata făcute înainte de programator, care vă permite să simplificați în mod semnificativ scrierea codului și la nivelul imperfecțiunii de sintaxă;
• Aplicație în multe zone. Caracteristicile JavaScript larg oferă programatorilor o șansă să se încerce ca un dezvoltator al unei largi varietăți de aplicații, iar acest lucru este cu siguranță încălzirea interesului în activitățile profesionale.

Nu acordați atenție faptului că minusurile au ieșit mai mult decât avantajele. JavaScript ferm fixat în nișă și nici o critică de acolo acest moment Nu alege.

Pentru cei care doresc să studieze

O cale dificilă și lungă va avea față de cei care au decis să învețe cu atenție JavaScript. Pentru începători există recomandări de bază, care, care, este posibil să simplifică în mod semnificativ formarea acestora.

• Mai întâi de toate, HTML. Este imposibil să începeți să faceți ceva pentru Internet fără principiile elementelor de bază. Foi de stil cascading (CSS) vor fi, de asemenea, foarte utile;
• Utilizați o nouă literatură. Programarea nu este fizică, dintre care sunt indestructuri și noi tutoriale. - Este tăiat vechi. Tehnologiile IT se dezvoltă constant și nu ar trebui neglijate cu actualizări utile;
• Pentru a încerca să scrie toate secțiunile programului. Dacă ceva nu este deloc se pare - puteți împrumuta codul altcuiva, dar numai pre-înțelegere pentru mine fiecare linie;
• Debugging-ul este prietenul tău credincios. Găsiți rapid erorile - una din cele mai importante puncte în programare;
• Nu ignora normele de formatare. Desigur, codul nu va fi mai bun sau mai rău dintr-un număr diferit de liniuțe și spații, dar ușurința de a citi și înțelegerea programatorului este, de asemenea, un moment important. Codul de mai jos? foarte dificil perceput, mai ales dacă nu sunteți al lui

• Numele variabile trebuie să aibă o valoare lexicală. În procesul de scriere programe simple Nu pare important deloc, ci atunci când numărul de rânduri de cod se rostogolește peste o mie - toți diavolii se sparge;

JavaScript este un limbaj în continuă dezvoltare, mai ales acum, când a fost stabilit un program anual de actualizare a specificațiilor ECMAScript. În acest sens, importanța cunoașterii JavaScript în afara jQuery crește.

Desigur, în acest articol nu vom putea acoperi întreaga nevoie de cunoaștere. Cu siguranță, vor exista momente pe care mi-am pierdut-o, poate că am greșit sau opiniile noastre cu dvs. cu privire la setul de cunoștințe necesare vor fi diferite.

Având în vedere aceste aspecte, să începem ...

Ce este testul Fizzizbiz

Fizzizcizz - De regulă, un mic test care vizează tăierea dezvoltatorilor neexperimentați. Cred că veți fi surprinși câți dezvoltatori JavaScript nu știu cum să scrie astfel de teste.

De regulă, astfel de teste nu poartă o încărcătură mare. Este îndreptată exclusiv pentru a verifica abilitățile potențialilor candidați.

Amintiți-vă, probabilitatea că vi se va cere să efectuați un test similar cu privire la interviu este foarte mare.

Exemplu de testul clasic Fizzizcizz:

Opțiunile pentru astfel de teste sunt nelimitate. Odată, la interviu, am fugit într-un astfel de test, după care a trebuit să rezolv încă două opțiuni.

Pentru (var i \u003d 1; i<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

Diferența dintre \u003d\u003d și \u003d\u003d\u003d

Sunteți probabil familiarizați cu atât operatorii de comparații. Cu toate acestea, știi exact ce diferă acești operatori? Linterul dvs. JavaScript vă cere să aplicați un operator \u003d\u003d\u003d, se întreba de ce?

Nu compară tipurile de operanzi, în schimb, aceasta duce la un singur tip. O astfel de operație are o reputație negativă.

Consola.log (24 \u003d\u003d "24"); // Adevărat.

După cum vedeți, a fost dată o valoare a șirului de 24 (în ghilimele unice) unui tip întreg. Desigur, există situații în care exact și indiferent dacă doriți, dar cel mai adesea dacă doriți să conduceți tipurile de date manipulate operator de comparație. Comparând datele utilizând operatorul \u003d\u003d nu este recomandat, majoritatea sistemelor de verificare a codului de stil JavaScript vă vor indica despre această eroare.

\u003d\u003d\u003d (comparație strictă) compară tipurile de date, fără a le converti la un singur tip, adică datele vor fi comparate așa cum este. De asemenea, deoarece tipul de tipuri nu este implicat în această operație, funcționează mai repede. Pentru ca acest operator să se extindă corect, vor fi necesare operatorii de același tip.

Același exemplu, dar cu operatorul \u003d\u003d\u003d

Consola.log (24 \u003d\u003d\u003d "24"); // Fals

Ca răspuns, obținem FALSE, deoarece operanții de diferite tipuri, unul dintre aceștia tip întregi și al doilea șir.

Cum să alegeți elementele DOM fără biblioteci suplimentare

Cu siguranță sunteți familiarizați cu modul de a face un eșantion de elemente folosind jQuery, dar puteți face același lucru, dar fără ajutorul acestei biblioteci?

Vreau să spun că nu aleg doar un element cu un ID specific sau un set de clase, vorbesc despre expresii pentru a căuta articole folosind jquery.

Există mai multe metode native pentru a căuta elemente în Dom, care nu sunt inferioare jquery. De asemenea, putem folosi sectoarele de tip primul copil, ultimul copil etc.

Să vă familiarizați cu unele dintre aceste metode

• document.getelementbyID este o metodă clasică de identificare a articolelor prin ID-ul lor.
• document.getelEmentsbyclassname - selectarea elementelor pe valoarea câmpului de clasă
• document.QuerySelector este o metodă excelentă care practic înlocuiește complet selectorul $ () de la JQuery, dar este deja inclus în JavaScript. Singura diferență este că acesta returnează numai primul element găsit.
• document.QuerySelectorall - analogul metodei anterioare, dar returnează o serie de articole găsite.
• document.getelementsbytagname - Această metodă vă va ajuta să alegeți elemente după etichetă. Dacă aveți nevoie să găsiți toate elementele Div, atunci aveți nevoie de această metodă.

De asemenea, doresc să rețineți că metodele de interogare și QuerySelectorall pot fi folosite nu numai pe întregul document, ci și pe elemente individuale, adică puteți face eșantionul într-un element părinte.

În documentația Mozilla veți găsi o descriere completă a acestor metode.

Ridicați anunțuri de variabile și funcții

JavaScript este interesat de modul în care procesează variabilele și funcțiile declarate, toate cresc automat domeniul de aplicare. Astfel, vă puteți referi la acestea înainte de anunțurile lor în scopul vizibilității (de exemplu, funcțiile din JavaScript are propriul scop).

Prin urmare, pentru comoditatea citirii codului, ia regula pentru a declara întotdeauna variabile la începutul domeniului de aplicare. Dacă specificați "Utilizați stricte" în partea de sus a script-ului sau a funcției, atunci când accesați o variabilă inutilă, veți obține o eroare.

Cele mai multe instrumente pentru verificarea stilului de cod, cum ar fi Jshint, vă vor indica o eroare dacă nu ați utilizat "Utilizați stricte", pe baza acestui lucru dacă încercați să scrieți un cod bun, atunci nu veți folosi variabile în nici un caz la anunț. Ca întotdeauna, dacă există întrebări, contactați documentația de la Mozilla, veți găsi întotdeauna o descriere completă și completă a problemei dvs.

Utilizarea instrumentelor de dezvoltator din browser

Cel mai adesea, astfel de instrumente sunt folosite pentru depanarea scripturilor JavaScript, dar funcționalitatea acestora nu este limitată. De exemplu, puteți utiliza punctul de oprire, efectuați scriptul pas cu pas, introduceți fiecare funcție în același timp.

Aceste instrumente oferă ajutor indispensabil, deoarece puteți urmări pe deplin funcționarea aplicației dvs. și găsiți zone în dificultate.

După ce ați învățat să aplicați instrumentele de dezvoltator în astfel de browsere ca Chrome, Firefox și în cele mai recente versiuni ale Internet Explorer, vă puteți depana scriptul dvs., puteți măsura viteza și găsiți locuri unde merită îmbunătățirea algoritmului de lucru.

Nu încercați niciodată să debumezi codul orbește, mai întâi îl analizați întotdeauna folosind instrumentele de dezvoltator. Soluția de probleme neexistente este un timp de petrecere inutil.

Echipe de consolă

Să ne întoarcem la următorul articol din studiul instrumentelor de dezvoltator. De regulă, toate oferă o consolă în care puteți inhiba codul JavaScript.

Desigur, sunteți deja familiarizați cu astfel de echipe ca Console.log și Console.Error, dar acest lucru nu se limitează la funcționalitatea consolei.

Vreau să menționez imediat că nu toate comenzile listate vor funcționa în toate browserele. Voi încerca să menționez numai cei care lucrează în browserele moderne. Cu toate acestea, în calitate de consiliu, voi spune că înainte de a le aplica, încercați să vă încercați performanța, astfel încât în \u200b\u200bzadar nu bate codul.

• consola.log - folosit pentru a menține jurnalul de evenimente. Suportă formatarea.
• consola.Error - pentru erorile de logare din cod. Folosesc această comandă când apar erori în interogările Ajax și în alte secțiuni potențial periculoase ale codului. Metoda este similară cu cea precedentă, dar afișează o listă de apeluri Stack.
• console.Dir (obiect) - Afișează conținutul formatat al obiectului. Așa cum este utilizat, această metodă este foarte utilă la depanarea codului.
• consola.Group (titlu) - vă permite să creați un grup de mesaje în jurnal numit titlu. În acest fel, puteți grupa mesaje, de exemplu, prin segmentul codului în care acestea sunt generate.
• consola.Groupcollpased este un analog al comenzii anterioare într-o singură excepție. Și anume, acesta afișează mesaje în formularul pliat.
• consola.groupend - încheie grupul creat anterior.
• console.Time (etichetă) - vă permite să urmăriți viteza site-ului în milisecunde. Metoda este utilă atunci când luați secțiuni de cod potențial complexe.
• consola.Timeend (eticheta) este un analog al metodei de grupă, dar funcționează cu privire la consola.Time ().
• copiați (șir) - În consola Chrome și Firefox există o metodă care vă permite să copiați conținutul șirului în clipboard. Metodă foarte utilă, încercați să o aplicați.

Exact ce este conținut în acest lucru

În primul rând, aceasta este o mare sursă de probleme pentru cei care nu înțeleg pe deplin ce conține exact acest cuvânt cheie. Și pentru a fi confundat în acest sens foarte simplu, deoarece conținutul său este în întregime dependent de structura codului.

În limbile tradiționale de programare, aceasta conține o referință la obiectul de clasă curent. Dar, deoarece JavaScript este departe de tradiție, atunci în ea această variabilă se referă la obiectul părinte al obiectului.

Cea mai ușoară modalitate de a înțelege acest lucru este să o luați pentru proprietar sau părinte al metodei. Aceasta se referă întotdeauna la părintele (părinte), cu excepția cazurilor în care utilizați apelul, aplicați sau legați metodele.

În exemplul următor, aceasta este menționată pe fereastră:

Funcția MyFuncțional () (consola.log (această fereastră \u003d\u003d\u003d); // true) Myfuncțional ();

Desigur, aveți o întrebare, cum poate fi o funcție egală cu fereastră dacă facem apel la acesta în cadrul metodei? Dacă știți răspunsul la această întrebare, atunci perfect, citiți altfel și voi încerca să explic.

Când declarați funcția în acest fel, este atașată obiectului global al ferestrei. Amintiți-vă, am spus că acest lucru se referă la metoda metodei?

Schimbarea valorii acestui lucru pe un obiect complet nou (nu fereastră):

Funcție MyFuncțional () (consola.log (thom \u003d\u003d\u003d fereastră); // fals) noua mistică ();

Suporterii curățeniei codului sigur în șoc de la un astfel de exemplu. Mergem doar la vârful aisbergului cu astfel de exemple. După cum puteți vedea, această valoare nu mai este egală cu fereastra.

De ce s-a întâmplat?

Cea mai simplă explicație - În cel de-al doilea exemplu, am folosit cuvântul cheie nou, aceștia cei mai mulți am creat un nou domeniu și un obiect nou.

În exemplul următor, vom crea un API fictiv pentru a descărca date din bibliotecă de pe server. Vom crea un obiect API cu unele metode.

Când utilizați cuvântul nou, contextul scriptului se deplasează de la contextul ferestrei la API.

VAR API \u003d (GetData: Funcție () (consola.log (această fereastră \u003d\u003d\u003d); // Console false.log (acest \u003d\u003d\u003d API); // true)); Api.getdata ();

După cum vedeți, valoarea acestui lucru este complet setată în metoda de a apela metoda. Deoarece funcția se numește în cadrul obiectului API, părintele său, atunci valoarea acestui lucru este menționată de obiectul API.

Amintiți-vă, această valoare se schimbă. Acesta variază în funcție de metoda de apel, dar dacă utilizați metoda de legare, valoarea acestui lucru rămâne neschimbată.

În detaliu cu cuvântul cheie din JavaScript, vă puteți familiariza în articolul Quirksmode și documentația din Mozilla.

"Utilizați stricte";

Așa cum am specificat deja mai devreme, utilizatorul strict este folosit pentru a aplica o versiune mai strictă a limbii JavaScript. Prezenta directivă este urmată pentru aplicarea în toate scripturile.

Implicit, JavaScript este destul de liber în sintaxa sa. Va pierde pur și simplu secțiunea eronată a codului și încercați să executați următoarele linii, în timp ce nu vă spune nimic.

În documentația din Mozilla, există un întreg articol pe această temă, vă recomandăm cu tărie să o întâlniți.

Diferite tipuri de cicluri

Veți fi surprinși, dar am întâlnit un număr mare de dezvoltatori care nu știau cum să folosească corect ciclul și nu au auzit absolut despre alte tipuri de cicluri. Și să puteți utiliza un ciclu pe o matrice sau un obiect - o abilitate foarte importantă pentru dezvoltator. Nu există instrucțiuni clare când și ce să aplicați tipul de ciclu, dar ar trebui să navigați în această chestiune. Cu siguranta te familiarizezi si in timp ce, dar ce zici de ceilalti?

Lista ciclurilor din JavaScript:

• pentru ..in.
• pentru ... la (adăugat la ES6)
• pentru fiecare.
• in timp ce
• face în timp ce.

Ciclu pentru

Un ciclu absolut obligatoriu care trebuie să știe și să înțeleagă. Ea își îndeplinește corpul atunci când efectuează condiția 2.

Pentru (condiția 1; condiția 2; condiția 3) (// codul dvs.)

Condiția 1 - Executată o dată înainte de începerea seriei de cicluri. În cele mai multe cazuri, veți inițializa contorul de ciclism aici. Acest element poate fi ratat dacă inițializați mai devreme.

Stare 2 - Această condiție este utilizată pentru a determina continuarea ciclului sau nu. Vă veți compara probabil contorul cu dimensiunea matricei aici. Dacă valoarea adevăratei comparație, ciclul continuă. Dacă întrerupeți ciclul din interior cu pauză, atunci această condiție poate fi omisă.

Condiția 3 - Acest site este executat după fiecare iterație, de regulă, aici creșteți contorul.

Ciclu pentru ... în

Următorul este tipul de ciclu. Cu ea, puteți trece prin toate câmpurile clasei.

Să dăm un exemplu.

VAR PERSOAN \u003d (FirstName: "Dwayne", LastName: "Charrington", Vârsta: 27, Starsign: "Aquarius"); // bucla de mai jos va ieși: // "dwayne" // "Charrington" // 27 // "Aquarius" pentru (dacă (persoană.HaswownProperty (P)) (consolă.log (persoană [p]);)))

Ciclu pentru ... de

Un tip destul de nou de ciclu, a fost adăugat la ES6. În virtutea noutății sale, nu este acceptată de toate browserele. Dar când utilizați anumite tehnologii, acesta poate fi folosit deja astăzi.

Acest ciclu este opusul complet pentru ... în, trece prin valorile câmpului și funcționează numai cu tipuri de date care suportă iterații la care obiectul nu se aplică.

Var Fructes \u003d ["Orange", "Apple", "Squash", "Pear"]; Pentru (fructe varice de fructe) (consolă.log (fructe);)

Big plus de acest tip de ciclu este că nu mai trebuie să creăm un indicator și să urmați lungimea matricei pentru a trece complet prin elementele sale.

Ciclul de predare

Un alt tip de ciclu, care în adâncurile sale nu este diferit de tipurile de cicluri enumerate anterior.

Funcționează numai cu matrice, nu obiecte. Este benefic pentru faptul că nu trebuie să creați variabile suplimentare care să polueze în cele din urmă codul dvs.

Cu siguranță este cel mai limitat tip de tip de ciclu, dar are propriile sale aplicații despre care vor fi cunoscute că știu:

Var Fructes \u003d ["Apple", "Banana", "Orange", "Struguri", "Perle", "Passionfruit"]; // Cele trei valori ale funcției de callback sunt: \u200b\u200b// element - elementul fiind traversat // Index - indicele actual al elementului din matrice începând cu 0 // Array - matricea fiind traversă (probabil cea mai mare parte irelevantă) Fructe. Fuuteh (funcție (element, indice, matrice) (consolă.log (indice, element);));

Uneori trebuie doar să treceți prin toate elementele matricei și, probabil, să faceți niște schimbări în ele. Comportamentul său este similar cu jquery.ech.

O lipsă de acest tip de cicluri - nu poate fi întreruptă. Dacă aveți nevoie să creați un ciclu conform regulilor ES5, utilizați metoda Array.every, pentru a vă familiariza cu care puteți în documentația Mozilla.

În timp ce ciclul

Ciclul de timp este similar, dar acceptă doar un parametru - starea însăși prin care ciclul determină să continue iterațiile sau să le oprească.

Deși acest tip de ciclu este considerat cel mai rapid, cred că acest moment este destul de controversat. Cred că nu veți argumenta că acest tip de ciclu nu arată atent decât alții, iar viteza sa poate fi explicată numai prin simplitatea logicii interne.

Potrivit experienței, voi spune că cea mai rapidă versiune a ciclului de timp este un ciclu cu o scădere a contorului, reducați-o pe unitate până când ajungeți la zero (care este, de asemenea, revendicată).

Var i \u003d 20; În timp ce (i-) (consola.log (i);)

Ciclu ... în timp ce

Un astfel de ciclu este destul de rar, dar merită să-l introducem să-i înțeleagă munca.

Ciclul de timp nu poate efectua nici o iterație. Aceasta este, dacă treceți o valoare falsă ca o condiție a ciclului, atunci nu va fi executată nici o iterație. Do ... în timp ce ciclul este garantat pentru a îndeplini cel puțin o operațiune.

Această diferență nu se încheie. Ciclul în timp ce procesează starea înainte de a efectua iterație și faceți ... în timp ce după.

Ca întotdeauna, în documentația din Mozilla veți găsi o descriere detaliată a acestui tip de cicluri.

Metode și sarcini de bază

JavaScript există metode de bază care ar trebui să fie cunoscute. În ceea ce privește lucrul cu matrice și rânduri, JavaScript oferă un set mare de metode încorporate. Vom atinge numai matrice și linii, lăsând obiecte mai târziu.

Dacă sunteți interesat să lucrați cu alte tipuri de date, contactați cu îndrăzneală documentația Mozilla. Desigur, nu trebuie să știți toate aceste metode prin inimă, voi descrie numai cele care par necesare.

Lucrați cu șiruri de caractere

În JavaScript, de cele mai multe ori lucrați cu date de șir, cu excepția, probabil arre și obiecte. Chiar dacă nu lucrați cu rânduri sau credeți că nu lucrați, atunci merită să vă familiarizați cu aceste metode.

• String.Replace (Regexp | Ce să înlocuiți ce să înlocuiți, apel invers) - vă permite să înlocuiți o parte a liniei, este permisă utilizarea expresiilor regulate.
• Șir.concat (Storok 1, linia 2 ...) - conectarea mai multor linii într-una.
• Șir.Indexof (valoare) - metoda vă permite să găsiți numărul de secvență al simbolului părții dorite a liniei, -1 - dacă șirul nu este găsit
• String.Slice (Startindex, Endindex) - Returnează o zonă de șir de la Startindex la Endindex
• String.split (separator, limită) - rupe șirul la o matrice de către simbolul separator, lungimea limită maximă.
• String.Subsctr (Startindex, Lungime) - Returnează o parte a șirului pornind de la Startindex lung lungime.
• Șir.tolowowercase - traduce toate caracterele șirului în litere mici
• Șir.ToupperCase - Transferați toate caracterele șirului în registrul de sus
• String.Trim - Îndepărtează spațiile de la începutul și la sfârșitul liniei

Lucrul cu arrays.

De multe ori va trebui să vă întâlniți cu matrice. Ei s-au dovedit ca o modalitate de a stoca date. Aceste metode sunt exact în valoare de cunoașterea oricărui dezvoltator JavaScript, nu trebuie să le căutați în Google.

• Array.Pop este direcționat de ultimul element și îl îndepărtează de la matrice.
• Array.Shift - Returnează primul element și îl îndepărtează din matrice.
• Array.push (Val1, Val2) - adaugă una sau mai multe valori până la capătul matricei. Returnează o nouă lungime de matrice.
• Array.Revers - Oglindirea modifică ordinea elementelor matricei.
• Array.sort - vă permite să sortați o matrice utilizând propria dvs. funcție.
• Array.join (separator) - Returnează un șir constând dintr-un element de matrice separat de simbolul separator (implicit - virgulă).
• Array.Indexof (valoare) - returnează indicele elementului din matrice, -1 dacă elementul nu este găsit.

Aceasta nu este o listă completă de metode de lucru cu matrice. Cu ceilalți puteți citi documentația din Mozilla. Începând cu ES6, au fost adăugate metode foarte interesante.

Diferența dintre apel și aplicați

Aceste două metode sunt confuze destul de des. Adesea puteți face fără ele, dar ajută la apelarea metodelor și schimbarea valorii acestora în timpul executării.

Diferența dintre ele este destul de mică, dar există. Când utilizați metoda de apel, puteți seta un număr infinit de argumente prin împărțirea lor cu o virgulă.

Folosind metoda Aplicați, puteți transfera argumente ca o matrice și puteți schimba această valoare.

Dacă trebuie să transferați pur și simplu matricea ca metodă de argument, apoi pornind cu operatorul ES6 avansat (răspândire). Nu vă permite să schimbați acest lucru. Puteți să vă familiarizați cu el, ca întotdeauna în documentația oficială din Mozilla.

Exemplu de apel:

Funcția myfunc () (consolă.log (argumente);) myfunc.call (aceasta, 1, 2, 3, 4, 5);

Aplicați exemplu:

Funcția myfunc () (consolă.log (argumente);) myfunc.call (,);

Cunoașterea bibliotecilor și a cadrelor

Astăzi, cei mai vizibili reprezentanți ai cadrelor JavaScript sunt Angularjs, React.js și Ember. Desigur, există încă un număr de alții.

Deoarece aplicațiile web devin din ce în ce mai multe, aceste biblioteci simplifică munca cu ei. Merită înțelegerea că acum cunoașterea unui jquery nu este în mod clar suficient. Majoritatea posturilor vacante sunt stabilite la cunoașterea bibliotecilor de JavaScript suplimentare ca principală cerință.

Nod.js.

Fără îndoială, nodul.js ocupă o poziție solidă. Practic, orice instrument front-end este construit pe nod.js și utilizează NPM (managerul de pachete nod), dacă este necunoscut, vă sfătuiesc cu tărie să corectați această omisiune. Deoarece NODE.JS utilizează JavaScript, apoi învățați că nu reprezintă dificultăți deosebite pentru cei care sunt deja familiarizați cu această limbă. Veți lua mai mult timp pentru a configura pachetele de nod decât scrierea codului în sine.

Personal, cred că cu nodul ar trebui să fie un semn pe fiecare dezvoltator în 2015. Nu vorbesc despre cunoștințe profunde, este suficient să o poată aplica pentru dezvoltarea serverului, prototiparea, testarea etc.

Există un nod de furcă.js numit io.js, astăzi sunt practic analogi, iar în cele din urmă scrieți doar la JavaScript, cu excepția diferențelor mici.

Testarea

Odată ce nu am testat deloc codul JavaScript, pentru că nu au considerat necesar. Dar scripturile devin din ce în ce mai mult datorită angularilor și nodului.

JavaScript se dezvoltă, iar volumul de scripturi crește și testarea devine vitală. Dacă nu testați codul, atunci faceți greșit. Testerul meu preferat este Karma. Există alții, dar acest special sa dovedit mai bine decât oricine când lucrează cu Angularjs. Și dacă este potrivit pentru angularii, atunci este potrivit pentru mine.

Instrumente

Fiind un dezvoltator JavaScript în 2015 înseamnă nu numai o cunoaștere excelentă a limbii, ci și un număr mare de instrumente pentru a lucra cu ea.

Uneori, instrumentele includ browserul însuși pe care îl folosim. Și uneori trebuie să vă referiți la instrumentele terțe pentru a obține o analiză mai profundă a situației.

Iată un set de instrumente pe care trebuie să le amintiți: Gulp, Webpack și Babeljs. Există multe instrumente, dar instrumentele cum ar fi Gulp și Grunt vă ajută să dezvoltați și să gestionați aplicațiile JavaScript.

Au trecut acele zile când ați descărcat fișierul JavaScript și ați adăugat-o la pagina dvs. Acum folosim managerii de pachete NPM sau Bower.

Combinăm și minimizăm scripturile, testați-le, ceea ce ajută la organizarea structurii proiectului.

Instrumentele JavaScript merg mână în mână atunci când dezvoltați JavaScript izomorfic (cod utilizat atât pe partea clientului, cât și pe server). ECMAScript 6, el este ES6, este Esnext

Browserele trebuie încă implementate cea mai mare parte a funcționalului ECMAScript 6. Dar astăzi puteți utiliza articole noi din ES6 utilizând compilatoarele JavaScript. Fiți familiarizați cu noi API și metode: rânduri, matrice și alte metode cum ar fi simboluri, simboluri și clase. Ar trebui să fiți întotdeauna conștienți de schimbările viitoare.

Concluzie

Pot să vă spun foarte mult. Judecând după mărimea acestui articol, vă puteți imagina cât de mult trebuie să cunoașteți dezvoltatorul JavaScript. Tocmai am atins vârfurile aisbergului. Nu credeți că acest articol ar trebui să fie perceput ca un ghid pentru dezvoltator. Aceasta este doar viziunea mea personală asupra problemei.