Rezumat: Noțiuni de bază

Bun venit la cursul MDN JavaScript pentru începători! În acest articol, ne vom uita la JavaScript de nivel înalt și hai sa răspundem la întrebări precum „Ce este?” și „Ce poți face?” scopul= JavaScript.

cerințe anterioare: Cunoștințe de bază de calculator, înțelegere de bază a HTML și CSS.

Meta: Familiarizați-vă cu ce este JavaScript, ce poate face și cum se potrivește într-un site web.

O definiție la nivel înalt/

JavaScript este un limbaj de criptare sau de programare care vă permite să implementați funcționalități complexe în paginile web. Ori de câte ori o pagină web face mai mult decât să stea jos și să afișeze informații statice pentru a le vedea,afişa actualizări de conținut în timp util, hărți interactive, animatii 2D/grafică 3D. , derularea tonomate video etc. Puteți paria că JavaScript este probabil implicat. Acesta este al treilea strat din pachetul de straturi al tehnologiilor web standard, dintre care două (HTML și CSS) au fost acoperite mult mai detaliat în altă parte în spațiul de învățare.

Cele trei straturi ale tehnologiilor web standard; HTML, CSS și javascript

HTML este limbaj de afaceri pe care îl folosim pentru a structura și a da sens conținutului nostru web, de exemplu, definind paragrafe, titluri și tabele de date sau introduceți imagini și videoclipuri de pe pagină.

CSS este un limbaj de reguli de stil pe care îl folosim pentru a ne proiecta conținutul HTML, cum ar fi setarea culorilor de fundal și a fonturilor și organizarea conținutului nostru în mai multe coloane.

JavaScript este un limbaj de scripting care vă permite să creați conținut actualizat dinamic, să controlați multimedia, să animați imagini și aproape orice altceva. (Bine, nu totul, dar este uimitor ce poți realiza cu doar câteva rânduri de cod JavaScript.)

Cele trei straturi se suprapun foarte bine. Folosim o etichetă text simplă ca exemplu. Îl putem marca folosind HTML pentru a-i oferi structură și scop:

<p>Jucătorul 1: Chris</p>

copiați în clipboard

Jucătorul 1 Paragraf: Chris că text neformatat

Apoi, putem adăuga CS la mix pentru a-l face să arate frumos:

P {

familie de fonturi: "helvetica neue", helvetica, sans-serif;

spațiere între litere: 1px;

transformarea textului: majuscule;

alinierea textului: centrat;

frontieră:2px solid RGB(0 0 200 / 0,6);

fundal: RGB (0 0 200 / 0,6);

culoare: RGB (255 255 255/1);

zona de umbră: 1px 1px 2px RGB(0 0 200 / 0,4);

raza chenarului: 10px;

umplutură: 3px 10px;

ecran: deblocare online;

cursor: pointer;

}

copiați în clipboard

Paragraf stil jucător 1: Chris

Și, în sfârșit, putem adăuga JavaScript pentru a implementa comportamentul dinamic:

const para = document.querySelector("p");

para.addEventListener("Click", actualizare nume);

update function name() {

const name = prompt("Introduceți un nume nou");

para.textContent = `Jucător 1: ${name}`;

}

copiați în clipboard

Încercați să dați clic pe această nouă versiune a etichetei text pentru a vedea ce se întâmplă (rețineți, de asemenea, că puteți găsi această demonstrație pe GitHub - vedeți sursa codului sau lanseaza-l live)!

JavaScript poate face mult mai mult - haideți să explorăm acest lucru în detaliu.

Deci, ce poți face cu adevărat?

Limbajul JavaScript de bază pentru client constă din câteva caracteristici comune de programare care vă permit să faceți lucruri precum:

Stocați valorile utile în interiorul variabilelor. De exemplu, în exemplul de mai sus, solicităm introducerea unui nou nume, așa că stocăm acel nume în variabilă numit .

Operații pe bucăți de text (numite „șiruri” în programare). În exemplul de mai sus, luăm șirul „Player 1:” și îl unim la numele variabilei pentru a crea eticheta full-text, de exemplu „Player 1: Chris”.

Executarea codului ca răspuns la anumite evenimente care apar pe o pagină web. Am folosit un eveniment de clic în exemplul nostru de mai sus pentru a detecta când se face clic pe etichetă și apoi rulăm codul care actualizează eticheta text.

Și mai departe!

Cu toate acestea, ceea ce este și mai interesant este funcționalitatea pe partea client bazată pe JavaScript. Așa-numitele interfețe de programare a aplicațiilor (API)oferi Superputeri suplimentare de folosit în codul JavaScript.

API-urile sunt seturi de blocuri de cod gata de utilizare care permit unui dezvoltator să implementeze programe care altfel ar fi dificil sau imposibil de implementat. Ei fac aceeași planificare că și kiturile de mobilier de casă gata de construit - este mult mai ușor să apuci panouri pre tăiate și asta face o bibliotecă decât să faci singur proiectul, să găsești lemnul potrivit, să tai toate panourile la dimensiunea potrivită și forma, găsiți șuruburi de dimensiunea potrivită și puneți-le împreună pentru a face un raft cu cărți

Ele se împart în general în două categorii.

Două categorii de API-uri; API-uri terță parte apărând în partea laterală a browserului și API-urile browserului apar în browser

API-urile browserului sunt încorporate în browserul dvs. web și pot expune date din mediul de calcul din jur sau pot efectua operațiuni utile și complexe. De exemplu:

API-ul DOM (Document Object Model) vă permite să manipulați HTML și CSS, să creați, să ștergeți și să editați HTML, să aplicați dinamic noi stiluri paginii dvs. și multe altele. Ori de câte ori vedeți că apare o fereastră pop-up pe o pagină sau apare conținut nou (cum am văzut mai devreme în demonstrația noastră simplă), de exemplu, este PUNE-O PE în acțiune.

API-ul de localizare geografică preia informații geografice. În acest fel, Google Maps vă poate găsi locația și atrage o hartă.

API-urile Canvas și WebGL vă permit să creați grafică animată 2D și 3D. Oamenii fac lucruri uimitoare cu aceste tehnologii web: vezi Web Exemple de experimente chrome de webgl.

API-urile audio și video, cum ar fi HTMLMediaElement și WebRTC, vă permit să faceți lucruri foarte interesante cu media, cum ar fi să redați audio și video direct pe o pagină web sau să capturați videoclipuri de pe camera web și să-l redați pe computerul altcuiva (încercați instantaneul nostru demonstrativ Snapshot pentru înțelegi ideea).

Notă: multe demonstrații de mai sus muncă nu într-un browser mai vechi;când experimentați, este o idee bună să utilizați un browser modern precum Firefox, Chrome, Edge sau Opera pentru a vă rula codul. Va trebui să luați în considerare testarea între browsere mai detaliat pe măsură ce vă apropiați de livrarea codului de producție (adică, codul real pe care îl vor folosi clienții reali).

API-urile terță parte nu sunt încorporate în browser în mod implicit și, de obicei, trebuie să obțineți codul și informațiile de undeva pe web. De exemplu:

API-ul Twitter vă permite, de exemplu, să afișați cele mai recente tweet-uri pe site-ul dvs. web.

Google Maps API și OpenStreetMap API vă permit să încorporați hărți personalizate pe site-ul dvs. web și alte resurse similare.

Notă: Aceste API-uri sunt avansate și nu vor fi acoperite în acest modul. Puteți afla mai multe despre acest lucru în modulul nostru API Web Client Side.

Sunt și multe altele disponibile! În orice caz,Nu, nu am a rămas încă foarte entuziasmat. Nu veți putea crea următorul Facebook, Google Maps sau Instagram după ce ați studiat JavaScript timp de 24 de ore; sunt prea multe baze de acoperit mai întâi. Și de aceea ești aici, hai să continuăm!

Ce face JavaScript pe pagina ta?

Aici vom începe să analizăm un cod și, în timp ce ne aflăm la el, vom explica ce se întâmplă de fapt când rulați JavaScript pe pagina dvs.

Să recapitulăm pe scurt istoricul a ceea ce se întâmplă atunci când încărcați o pagină web într-un browser (abordat mai întâi în articolul nostru despre cum funcționează CSS). Când încărcați o pagină web în browser, rulați codul acesteia (HTML, CSS și JavaScript) într-un mediu de rulare (filă browser). Este ca o fabrică care ia materia primă (codul) și produce un produs (site-ul web).

Codurile HTML, CSS și JavaScript lucrează împreună pentru a crea conținutul în filă browser atunci când pagina se încarcă.

O utilizare foarte comună a JavaScript este modificarea dinamică a HTML și CSS pentru a actualiza o interfață cu utilizatorul, prin API-ul Document Object Model (după cum s-a menționat mai sus). Rețineți că codul din documentele dvs. web este de obicei încărcat și executat în ordinea în care apare pe pagină. Pot apărea erori dacă JavaScript este încărcat și executat înainte de HTML și CSS pe care doriți să le modificați. Veți afla cum să rezolvați această problemă mai târziu în acest articol, în secțiunea Strategii de încărcare a scripturilor.

securitatea browserului

Fiecare filă de browser are propriul său compartiment separat pentru codul de rulare (aceste compartimente se numesc „runtime” în termeni tehnici); Aceasta înseamnă că, în cele mai multe cazuri, codul fiecărei file este rulat complet independent, iar codul dintr-o filă nu poate fi rulat direct, afectând codul din altă filă sau alt site web. Aceasta este o măsură bună de securitate; altfel, hackerii pot începe să scrie cod pentru a fura informații de pe alte site-uri și alte lucruri urâte.

Notă: Există modalități de a trimite cod și date în siguranță între diferite site-uri web/borduri, dar acestea sunt tehnici avansate care nu vor fi acoperite în acest curs.

Ordine de execuție JavaScript

Când browserul întâlnește un bloc de JavaScript, de obicei îl execută de sus în jos. Asta înseamnă că trebuie să fii atent la ordinea în care pui lucrurile. De exemplu, să revenim la blocul JavaScript pe care l-am văzut în primul nostru exemplu:

const para = document.querySelector("p");

para.addEventListener("Click", actualizare nume);

update function name() {

const name = prompt("Introduceți un nume nou");

para.textContent = `Jucător 1: ${name}`;

}

copiați în clipboard

Aici selectam un paragraf de text (linia 1) și apoi îi atașăm un ascultător de evenimente (linia 3), astfel încât atunci când se face clic pe paragraf, blocul de text codul fie efectuat în() (liniile 5-8) Blocul de actualizare Blocul de cod Name() (aceste blocuri de cod reutilizabile sunt numite „funcții”) solicita utilizatorului să introducă un nume nou, apoi inserează acel nume în paragraf pentru a actualiza afișajul.

Dacă schimbați ordinea primelor două linii de cod, nu va mai funcționa. În schimb, veți primi o eroare aruncată în consola dezvoltatorului browserului: TypeError: para is undefined. Acest lucru înseamnă că el a still Obiectul nu există, așa că nu putem adăuga un ascultător de evenimente la el.

Notă: Aceasta este o greșeală foarte frecventă: trebuie să vă asigurați că obiectele la care se face referire din coșul dvs existent înainte de a încerca să faci ceva cu ei.

Cod interpretat versus cod compilat

Puteți auzi termenii interpretați și compilație în contextul programării. În limbile interpretate, codul este executat de sus în jos, iar rezultatul executării codului este returnat imediat. Nu este nevoie să transformați codul într-un alt format înainte ca browserul să-l execute. Codul este primit în formatul său text ușor de programat și procesat direct de acolo.

Limbaje compilate, pe de altă parte, sunt prelucrate sub altă formă înainte de a fi executată de computer. De exemplu,C++ sunt compilate în codul mașinii care este apoi executat de computer. Programul rulează dintr-un format binar, careeste ca din codul sursă al programului original.

JavaScript este un limbaj de programare ușor, interpretat. Browserul web primește JavaScript în formatul său de text simplu și rulează scriptul de acolo. Din punct de vedere tehnic, majoritatea interpreților JavaScript moderni folosesc de fapt o tehnică numită compilare just-in-time pentru a îmbunătăți performanța; Codul sursă JavaScript este compilat într-un format binar mai rapid atunci când este utilizat scriptul, astfel încât să poată rula cât mai repede posibil. Cu toate acestea, JavaScript este încă considerat un limbaj interpretat, deoarece compilarea se face în timpul execuției și nu în avans.

Ambele tipuri de limbaj au avantaje, dar nu le vom discuta acum.

Cod pe partea serverului și cod pe partea clientului

De asemenea, este posibil să auziți termenii cod pe partea de server și cod pe partea client, în special în contextul dezvoltării web. Codul clientului este un cod care rulează pe computerul unui utilizator: atunci când o pagină web este vizualizată, browserul descarcă, execută și afișează codul paginii pe partea clientului. Acest modul vorbește în mod explicit despre JavaScript la nivelul clientului.

Codul serverului, pe de altă parte, rulează pe server și apoi rezultatele sale sunt descărcate și afișate în browser. PHP, Python, Ruby, ASP.NET și chiar JavaScript sunt exemple de limbaje web populare pe partea de server. JavaScript poate fi folosit și ca limbaj pe partea de server, de exemplu în mediul popular Node.js; Puteți găsi mai multe informații despre JavaScript pe partea de server în subiectul Site-uri web dinamice: Programare pe partea serverului.

Cod dinamic versus cod static

Cuvântul dinamic este folosit pentru a descrie atât limbajele de pe partea client, cât și pe partea de server: se referă la capacitatea de a actualiza afișarea unei pagini web/aplicații pentru a afișa lucruri diferite în circumstanțe diferite, generând conținut nou după cum este necesar. Codul de pe partea serverului generează în mod dinamic conținut nou pe server, cum ar fi preluarea datelor dintr-o bază de date, în timp ce JavaScript de pe partea clientului generează dinamic conținut nou în browser pe client, cum ar fi crearea unui nou tabel HTML, completați cu datele solicitate de server și afișați tabelul pe o pagină web care este afișată utilizatorului. Semnificația este ușor diferită în cele două contexte, dar este legată, iar cele două abordări (partea server și partea client) funcționează adesea împreună.

Se spune că o pagină Web fără conținut actualizat dinamic este statică: afișează întotdeauna același conținut.

Puteți adăuga JavaScript la pagina dvs.?

JavaScript este aplicat paginii dvs. HTML în același mod ca CSS. În timp ce CSS utilizează elemente <link> pentru a aplica foi de stil externe și elemente <style> pentru a aplica foi de stil interne în HTML, JavaScript are nevoie doar de un singur prieten în lumea HTML: <scriptul>. Să învățăm cum funcționează.

JavaScript interne

Mai întâi, creați o copie locală a exemplului de fișier apply javascript.html. Stocat într-un director undeva rezonabil.

Deschideți fișierul în browserul dvs. web și editorul de text. Veți vedea că HTML crea o pagină web simplă care conține un buton pe care se poate face clic.

Apoi accesați editorul de text și adăugați următoarele în antet, chiar înainte de eticheta de închidere </head>:

//JavaScript accesați aici

</script>

copiați în clipboard

Acum să adăugăm ceva JavaScript în elementul nostru <script> pentru a face pagina mai interesantă: adăugați următorul cod chiar sub linia „//JavaScript goes here”:

document.addEventListener("DOMContentLoaded", () => {

creați funcția paragraph() {

const pour = document.createElement("p");

para.textContent = "Ați făcut clic pe buton!" ;

document.body.appendChild(pour);

}

clic constant = document.querySelectorAll("click");

pentru (buton cont de butoane) {

button.addEventListener("click",creați Paragraf);

}

});

copiați în clipboard

Salvați fișierul și reîmprospătați browserul; Ar trebui să vedeți acum că atunci când faceți clic pe butonul, un nou paragraf este generat și plasat mai jos.

Notă: Dacă exemplul dvs. nu funcționează, repetați pașii și verificați dacă ați făcut totul corect. Ați salvat copia locală a codului inițial ca fișier .html? Ați adăugat elementul <script> chiar înainte de eticheta </head>?Ce folos are codul javascript exact așa cum se arată? JavaScript este sensibil la majuscule și este foarte pretențios, așa că trebuie să introduceți sintaxa exact așa cum se arată, altfel poate să nu funcționeze.

Notă: Puteți vizualiza această ediție pe GitHub ca apply javascript internal.html (de asemenea, vizualizați live).

javascript extern

Funcționează grozav, dar dacă am vrea să punem JavaScript într-un fișier extern? Să explorăm asta acum.

Mai întâi, creați un fișier nou în același director cu exemplul de fișier HTML.numiți vă script.js - Asigurați-vă că are extensia de nume de fișier .js, deoarece așa este recunoscut că JavaScript.

Înlocuiți elementul <script> actual cu următorul:

copiați în clipboard

În script.js, adăugați următorul script:

creați funcția paragraph() {

const pour = document.createElement("p");

para.textContent = "Ați făcut clic pe buton!" ;

document.body.appendChild(pour);

}

clic constant = document.querySelectorAll("click");

pentru (buton cont de butoane) {

button.addEventListener("click",creați Paragraf);

}

copiați în clipboard

Salvați și reîmprospătați browserul și veți vedea la fel! Funcționează în același mod, dar acum avem JavaScript într-un fișier extern. În general, acest lucru vă ajută să vă organizați codul și îl face utilizabil în mai multe fișiere HTML. În plus, HTML este mai ușor de citit fără a descărca bucăți mari de script.

Notă: puteți vedea această versiune pe GitHub ca apply javascript external.html și script.js (vezi și live).

Manageri JavaScript online

Rețineți că, uneori, veți găsi fragmente de cod JavaScript real în codul HTML. Poate fi așa:

creați funcția paragraph() {

const pour = document.createElement("p");

para.textContent = "Ați făcut clic pe buton!" ;

document.body.appendChild(pour);

}

<button onclick="create Paragraph()">Faceți clic pe mine!</button>

Puteți încerca această versiune din demonstrația noastră de mai jos.

Această demonstrație are exact aceeași funcționalitate ca și cele două secțiuni anterioare, cu excepția faptului că elementul <button> include un handler onclick încorporat pentru a îndeplini funcția atunci când butonul este apăsat.

Te rog nu. Este o practică proastă să vă poluanți HTML cu JavaScript și este ineficient - ar trebui include atributul onclick=`create paragraph()" pe fiecare buton la care doriți să aplicați JavaScript.

Utilizați addEventListener în schimb

În loc să includeți JavaScript în codul HTML, utilizați o construcție JavaScript pură. Funcția querySelectorAll() este utilizată pentru a selecta toate butoanele dintr-o pagină. Puteți apoi să parcurgeți butoanele, atribuind un handler fiecăruia folosind addEventListener(). Codul pentru aceasta este prezentat mai jos:

clic constant = document.querySelectorAll("click");

pentru (buton cont de butoane) {

button.addEventListener("click",creați Paragraf);

}

copiați în clipboard

Poate fi puțin mai lung decât atributul .lick, dar va funcționa pentru toate butoanele, indiferent câte butoane sunt pe pagină sau câte sunt adăugate sau șterse. Nu este nevoie să schimbați JavaScript.

Notă: Încercați să editați versiunea dvs. de apply javascript.html și să adăugați mai multe butoane în fișier. Pentru a porta, ar trebui să descoperiți că toate butoanele atunci când faceți clic vor crea un paragraf. Curat nu?

Strategii de încărcare a scripturilor

Există mai multe probleme cu încărcarea scripturilor la momentul potrivit. Nimic nu este atât de simplu pe cât pare! O problemă comună este că toate codurile HTML dintr-o pagină se încarcă în ordinea în care apare. Dacă utilizați JavaScript pentru a manipula elemente de pe pagină (sau mai precis, modelul obiect al documentului), codul dvs. nu va funcționa dacă JavaScript este încărcat și analizat înainte de HTML-ul cu care încercați să faceți ceva.

În exemplele de cod de mai sus, codul JavaScript este încărcat și executat în antetul documentului, înainte ca corpul HTML să fie analizat, în mostrele interioare și exterioare. Acest lucru poate cauza o eroare, așa că folosim câteva constructe pentru a o evita.

În exemplul intern, puteți vedea această structură în jurul codului:

document.addEventListener("DOMContentLoaded", () => {

// …

});

copiați în clipboard

Acesta este un ascultător de evenimente, care ascultă evenimentul DOMContentLoaded al browserului, indicând faptul că corpul HTML a fost complet încărcat și analizat. JavaScript din acest bloc nu va fi executat până când evenimentul este declanșat, astfel încât eroarea este evitată (veți afla mai multe despre evenimente mai târziu în curs).

În exemplul extern, folosim o caracteristică JavaScript mai modernă pentru a rezolva această problemă, atributul defer, care îi spune browserului să continue descărcarea conținutului HTML de îndată ce elementul de script de etichetă a ajunge.

copiați în clipboard

În acest caz, scriptul și HTML se vor încărca în același timp și codul va funcționa.

Notă: În cazul exterior, nu trebuie să folosim evenimentul DOMContentLoaded deoarece atributul lazy a rezolvat problema pentru noi. Nu folosim soluția de amânare pentru exemplul JavaScript intern, deoarece amânarea funcționează numai pentru scripturi externe.

O soluție învechită la această problemă a fost plasarea elementului de script în partea de jos a corpului (de exemplu, chiar înainte de eticheta </body>), astfel încât să se încarce după analizarea întregului HTML. Problema cu această soluție este că încărcarea/analizarea scriptului este complet blocată până când HTML DOM este încărcat. Pe site-urile mai mari, cu mult JavaScript, acest lucru poate cauza probleme serioase de performanță, incetinind site-ul dvs.

asincron și amânat

Există de fapt două resurse moderne pe care le putem folosi pentru a ocoli blocarea scripturilor: asincron și amânare (despre care am vorbit mai devreme). Să aruncăm o privire la diferența dintre acestea două.

Scripturi încărcate cu atribut descărcare sincronă scriptul fără să blocheze pagina la preluarea scriptului. Cu toate acestea, odată ce descărcarea este completă, scriptul va rula, blocând redarea paginii. Nu sunteți garantat că scripturile vor fi executate într-o anumită ordine. Cel mai bine este să utilizați asincron atunci când scripturile de pe pagină rulează independent și nu depind de alte scripturi de pe pagină.

Scripturile încărcate cu atributul defer vor fi încărcate în ordinea în care apar pe pagină. Acestea vor fi executate numai după ce s-a încărcat conținutul paginii, ceea ce este util dacă scripturile dvs. sunt dependențe de DOM (de exemplu, modifică unul sau mai multe elemente ale paginii).

Iată o reprezentare vizuală a diferitelor metode de încărcare a scripturilor și a ceea ce înseamnă aceasta pentru pagina dvs.:

Cum funcționează cele trei metode de încărcare a scripturilor: analiza implicită este blocată la obținerea și executarea JavaScript. Cu asincron, analiza este doar întreruptă alerga. Cu amânare, scanarea nu se oprește, ci rulează după ce toate celelalte au fost scanate.

Această imagine este din specificația HTML, copiată și tăiată într-o versiune minoră sub licența CC BY 4.0.

De exemplu, dacă aveți următoarele elemente de script:

copiați în clipboard

Nu vă puteți baza pe ordinea în care vor fi încărcate scripturile. jquery.js poate fi încărcat înainte sau după script.js și script3.js și, dacă da, orice funcție din acele scripturi care depind de jquery va eșua deoarece jquery nu va fi setat în momentul rulării scriptului.

asincron ar trebui să fie folosit atunci când aveți o mulțime de scripturi de fundal de încărcat și doriți doar să le remediați cât mai curând posibil. De exemplu, poate fi necesar să încărcați unele fișiere de date despre joc de care veți avea nevoie la începutul jocului, dar deocamdată doriți doar să continuați să afișați introducerea jocului, titlurile și lobby-ul, fără ca acestea să se blocheze doar la încărcarea game.game .

Scripturile încărcate cu atributul defer (vezi mai jos) vor fi executate în ordinea în care apar pe pagină și vor fi executate după ce scriptul și conținutul au fost descărcate:

copiați în clipboard

În al doilea exemplu, putem fi siguri că va încărca scriptul jquery.js front.js descript3.js C'est script.js va fi încărcat înainte de script3.js. Acestea vor fi executate numai după ce s-a încărcat conținutul paginii, ceea ce este util dacă scripturile dvs. sunt dependențe de DOM (de exemplu, modifică unul sau mai multe elemente ale paginii).

rezumat:

asincron și amânare spuneți browserului să descarce scripturile într-un fir separat în timp ce restul paginii (DOM-ul etc.) este descărcat, astfel încât încărcarea paginii să nu fie blocată în timpul procesului de preluare.

E-mailurile cu un atribut asincron vor fi executate imediat ce descărcarea este finalizată. Acest lucru blochează pagina și nu garantează nicio ordine specifică de execuție.

Scenarii Fișierele sistemului de operare cu un atribut leneș vor fi încărcate în ordinea în care sunt găsite și vor fi executate numai când încărcarea este completă.

Dacă scripturile ar trebui să ruleze imediat și să nu aibă dependențe, utilizați asincron.

Dacă scripturile dvs. trebuie să aștepte să fie analizate și depind de alte scripturi și/sau de DOM, încărcați folosind defer și introduceți elementele <script> corespunzătoare în ordinea în care doriți ca browserul să le deruleze.

comentarii

Că și în cazul HTML și CSS, este posibil să scrieți comentarii în coșul dvs. JavaScript care vor fi ignorate de browser și există pentru a oferi instrucțiuni colegilor dvs. de dezvoltare despre cum ar trebui să funcționeze codul (și pentru dvs., dacă reveniți la codul dvs. mai târziu). şase luni şi nu-mi amintesc ce a făcut). Comentariile sunt foarte utile și ar trebui să le folosiți des, mai ales pentru aplicații mai mari. Există două feluri:

Un comentariu pe o singură linie este scris după o bară oblică dublă (//), de exemplu

// Sunt un comentariu

copiați în clipboard

Un comentariu pe mai multe linii este scris între șirurile /* și */, de exemplu

De asemenea, UE

un comentariu

copiați în clipboard

Deci, de exemplu, am putea adapta JavaScript în ultima noastră demonstrație cu comentarii că acesta:

// Funcție: Creați un nou paragraf și adăugați la sfârșitul corpului HTML.

creați funcția paragraph() {

const pour = document.createElement("p");

para.textContent = "Ați făcut clic pe buton!" ;

document.body.appendChild(pour);

}

1. Obțineți referințe la toate butoanele de pe pagină într-un format de tabel.

2. Revizuire Butoanele și adăugați un ascultător de evenimente clic pentru fiecare.

Când un buton este apăsat,funcţie va fi efectuată pentru a crea Paragraph().

clic constant = document.querySelectorAll("click");

pentru (buton cont de butoane) {

button.addEventListener("click",creați Paragraf);

}

copiați în clipboard

Notă: în general, mai multe comentarii sunt de obicei mai bune decât mai puține, dar ar trebui să fii atent dacă adaugi o mulțime de comentarii pentru a explica ce sunt variabilele (poate că numele variabilelor tale ar trebui să fie mai intuitive) sau pentru a explica operațiunile foarte simple (poate codul tău). este prea complicat).

relua

Deci iată-l, primul tău pas în lumea JavaScript. Începem cu teoria, pentru a începe să ne obișnuim cu motivul pentru care ar trebui să utilizați JavaScript și cu ce fel de lucruri puteți face cu el. Pe parcurs, ați văzut exemplu de cod și ați învățat, printre altele, cum se încadrează JavaScript în restul codului site-ului dvs.

JavaScript poate părea puțin intimidant acum, dar nu vă faceți griji: în acest curs, vă vom ghida prin pași simpli care vor avea sens în viitor. În următorul articol, ne vom arunca direct în practică, permitandu-va sa începeți să vă creați propriile exemple JavaScript.

ce este javascript

Rezumat: Noțiuni de bază