Ce Este JavaScript? Introducere cu exemplul Hello World
⚡ Rezumat inteligent
JavaScriptul este limbajul de programare care face paginile web interactive. Această introducere explică ce înseamnă JavaScriptul reprezintă originea sa, modul în care browserele și Node.js îl execută și cum se scrie și se rulează un prim script Hello World.
Ce Este JavaScenariul?
JavaScriptul este un limbaj de programare la nivel înalt care adaugă comportament paginilor web. Este una dintre cele trei tehnologii de bază ale webului: HTML furnizează structura, CSS furnizează aspectul și JavaScriptul furnizează interacțiunea. De fiecare dată când o casetă de căutare afișează sugestii pe măsură ce tastați, un carusel de diapozitive foto sau un formular de înscriere vă avertizează despre un câmp lipsă, JavaScriptul face această treabă în fundal.
Diagrama de mai jos arată cum se așează un script alături de markup-ul unei pagini web obișnuite.
Pentru cea mai mare parte a vieții sale JavaScriptul a fost descris ca un limbaj de scripting pe partea de client, deoarece rula doar în interiorul unui browser. Această descriere este acum incompletă. De când a apărut Node.js în 2009, același limbaj a fost folosit și pentru servere web, utilitare de linie de comandă, aplicații desktop și aplicații mobile. O descriere mai precisă astăzi este că JavaScriptul este un limbaj de programare cu uz general, cu o prezență neobișnuit de puternică în browser.
Caracteristicile care definesc limbajul sunt:
- Tipizat dinamic: O variabilă poate conține un număr acum și un șir de caractere un moment mai târziu, astfel încât tipurile sunt verificate în timp ce programul rulează.
- Interpretat și compilat la timp: Motoarele de programare precum V8 în Chrome și Node.js compilează codul executat frecvent în cod mașină pentru viteză.
- Multi-paradigmă: Sunt acceptate stilurile imperativ, funcțional și orientat pe obiecte.
- Condus de evenimente: Codul reacționează la clicuri, apăsări de taste, cronometre și răspunsuri de rețea, în loc să ruleze de sus în jos și să se opreascăping.
- Fir unic cu o buclă de evenimente: Lucrările lente, cum ar fi un apel de rețea, sunt puse în coadă în loc să fie blocate.
💡 Sfat: JavaScript și ECMAScript nu sunt limbaje concurente. ECMAScript este specificația scrisă și JavaScriptul este implementarea specificației pe care browserele și Node.js o livrează de fapt.
Istoria JavaScenariu
Brendan Eich a creat JavaScript la Netscape Communications în 1995, producând primul prototip funcțional în aproximativ zece zile. Intern, proiectul a fost numit cafea moccaA fost livrat într-o versiune beta Netscape Navigator 2.0 ca LiveScript în septembrie 1995 și a fost redenumită JavaScenariu în decembrie 1995, ca parte a unui acord de marketing între Netscape și Sun Microsystems, compania care deținea Java atunci.
Această redenumire este singurul motiv pentru care atât de mulți începători încă presupun JavaScript este o ediție ușoară a JavaCele două limbaje nu au legătură în ceea ce privește designul, proprietatea și timpul de execuție. Netscape a trimis limbajul la Ecma International în 1996, iar prima ediție a standardului ECMA-262 a fost publicată în iunie 1997. Tabelul de mai jos enumeră etapele importante la citirea codului mai vechi.
| An | Bornă | De ce contează |
|---|---|---|
| 1995 | Mocha, apoi LiveScript, apoi JavaScenariu | Limbajul a fost creat la Netscape de Brendan Eich. |
| 1997 | Prima ediție a ECMA-262 | Limbajul obține un standard de scriere neutru față de furnizor. |
| 2009 | ES5 și prima versiune de Node.js | Sosește modul strict și JavaScriptul este salvat în browser. |
| 2015 | ES6 (ECMAScript 2015) | Se adaugă funcții let, const, săgeată, clase, module și promisiuni. |
| 2016 înainte | Ediții anuale ECMAScript | Funcțiile mai mici sunt disponibile în fiecare iunie, în loc să fie lansate în versiuni mari și rare. |
Din cauza ciclului anual de lansare, codul scris înainte de 2015 arată vizibil diferit de codul modern. Tutorialele mai vechi folosesc var peste tot, în timp ce codul actual preferă let și const cand declararea variabilelor în JavaScenariu.
Ce Este JavaScript folosit pentru?
JavaScripturile nu se mai limitează la trucuri de pagini mici. Aceeași sintaxă apare acum în patru locuri foarte diferite, motiv pentru care se clasează constant ca unul dintre cele mai utilizate limbaje în sondajele pentru dezvoltatori.
| Zonă | Ce JavaScriptul face acolo | Instrumente tipice |
|---|---|---|
| Front end al browserului | Gestionează clicurile, actualizează pagina fără reîncărcare, validează formularele și desenează diagrame. | React, Vue, Angular, Svelte |
| Partea de server | Deservește cereri HTTP, comunică cu bazele de date și construiește API-uri REST sau GraphQL. | Node.js, Deno, Bun, Express |
| Aplicatii mobile | construieşte Android și aplicații iOS dintr-o singură bază de cod partajată. | Reacționează nativ, Ionic, Condensator |
| Aplicații desktop | Încadrează o interfață web într-o fereastră nativă cu acces la sistemul de fișiere. | Electron, Tauri |
| Scule și automatizare | Grupează resurse, rulează suite de teste și gestionează browsere pentru testare end-to-end. | Vite, webpack, Jest, Dramaturg |
Jocurile, vizualizările de date, extensiile de browser și proiectele hardware mici se bazează, de asemenea, pe acesta. Pentru un începător, consecința practică este simplă: efortul depus pentru sintaxă se transferă acum direct la lucrul pe server, lucrul pe mobil și automatizarea testelor mai târziu. Dacă doriți să vedeți limbajul aplicat la probleme reale, parcurgeți un set de... practic JavaExemple de cod de script odată ce elementele de bază sunt confortabile.
Cum să alergi JavaScenariul?
JavaScriptul nu se execută singur. Are nevoie de un mediu gazdă care conține un JavaScenariu motorChrome și Edge folosesc V8, Firefox folosește SpiderMonkey, iar Safari folosește JavaScriptCore. Când un browser descarcă o pagină HTML și găsește un script, acesta transmite acel script motorului său, care îl analizează, îl compilează și îl rulează.
Al doilea mediu gazdă este Node.js, care încorporează același motor V8 în afara browserului. Acesta este modul în care același limbaj rulează pe un server sau într-un terminal. Avantajul practic al JavaScenariul este asta orice browser modern îl acceptă on Windows, Linux și macOS, deci rareori trebuie să vă faceți griji cu privire la browserul folosit de un vizitator. Aceasta este o îmbunătățire reală față de VBScript, care a funcționat doar în Internet Explorer pe Windows și este acum depreciat împreună cu Internet Explorer.
⚠️ Atenție: Browser JavaScript și Node.js JavaScripturile partajează limbajul de bază, dar nu și obiectele din jur. document și window există doar în browser și require iar modulele sistemului de fișiere există doar în Node.js. Copierea codului între cele două fără verificare va genera o eroare de referință.
Instrumente de care aveți nevoie
Ai nevoie de un editor de text pentru a scrie cod și de un browser pentru a vizualiza rezultatul. Notepad++, Visual Studio Code, Sublime Text... și orice alt editor cu care vă simțiți confortabil va face treaba, deși un editor cu evidențiere a sintaxei și potrivire a parantezelor vă va scuti de o mare parte din depanare. Orice browser actual funcționează: Google Chrome, Firefox, Microsoft Edgesau Safari. Nu trebuie să cumpărați sau să instalați nimic în afară de aceste două elemente.
O simpla JavaProgram de script
Dacă păstrezi JavaScript în interiorul documentului HTML, tot codul trebuie să se afle între o deschidere <script> etichetă și o închidere </script> etichetă. Acesta este modul în care browserul diferențiază codul dvs. de markup-ul din jur. Paginile mai vechi setează, de asemenea, o type atribut, scris ca <script type="text/javascript">, care era necesar atunci când existau limbaje rivale pe partea de client, cum ar fi VBScript. Paginile moderne îl omit, deoarece HTML5 tratează text/javascript ca implicit. Cele două versiuni de mai jos sunt identice din punct de vedere funcțional și ambele sunt încă valabile.
Hello World Exemplu
Primul program tradițional afișează un mesaj. Plasați următorul markup într-un fișier numit hello.html și deschideți-l într-un browser.
<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
ieșire:
A browser dialog box opens containing the text: Hello World!
Notă: type="text/javascript" nu este necesar în HTML5. Următorul cod funcționează exact la fel.
<html>
<head>
<title>My First JavaScript code!!!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
ieșire:
A browser dialog box opens containing the text: Hello World!
Odată ce o pagină crește peste câteva rânduri, mutarea scriptului în propria sa .js fișierul menține markup-ul lizibil și permite browserului să stocheze codul în cache. Diferențele sunt prezentate în detaliu în această comparație a intern si extern JavaScenariu.
Cum să scrii și să rulezi primul tău script
Există trei modalități practice de a executa JavaScript, iar un începător ar trebui să le încerce pe toate trei, deoarece fiecare se potrivește unei situații diferite.
1. Consola browserului. Aceasta este cea mai rapidă opțiune și nu necesită niciun fișier. Deschideți orice pagină web, apăsați F12 (sau Ctrl+Shift+Eu pe Windows și Linux, Cmd+Option+I activat macOS) și selectați Consoleze tab. Tastați o linie, apăsați Enter, iar rezultatul apare imediat. Este locul ideal pentru a testa o singură expresie sau pentru a verifica ce returnează o funcție.
// Type each line into the browser console and press Enter console.log(2 + 2); console.log("Guru" + 99); console.log(Math.max(4, 12, 7)); console.log(typeof "hello");
ieșire:
4 Guru99 12 string
Observați a doua linie. Adăugarea numărului 99 la șirul de caractere „Guru„produce șirul de caractere”Guru99” în loc de o eroare, deoarece JavaScriptul convertește automat numărul în text. Acest comportament este convenabil și este, de asemenea, o sursă clasică de erori pentru începători.
2. Un fișier HTML. Acesta este exemplul „Hello World” prezentat mai sus. Folosește-l ori de câte ori codul trebuie să atingă pagina în sine, de exemplu citind valoarea unui formular sau modificând un element.
3. Node.js din terminal. Instalați Node.js, salvați codul într-un fișier cu a .js extensie, apoi executați node first-script.jsNimic nu se redă, așa că console.log devine canalul tău de ieșire. Aceasta este calea de urmat atunci când vrei să exersezi funcții de limbaj pur, fără HTML în jurul lor.
// first-script.js const language = "JavaScript"; const createdBy = "Brendan Eich"; const releaseYear = 1995; console.log(language + " was created by " + createdBy + " in " + releaseYear + "."); const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"]; usedFor.forEach(function (item, index) { console.log(index + 1 + ". " + item); });
ieșire:
JavaScript was created by Brendan Eich in 1995. 1. Interactive web pages 2. Server apps with Node.js 3. Mobile apps
Acest scurt script folosește deja trei idei pe care le veți întâlni constant: constante declarate cu const, O mulțime care conține o listă de valori și o funcție de apel invers transmisă către forEachRescrierea aceleiași bucle cu un for afirmația este un exercițiu util odată ce ați studiat bucle în JavaScenariu.
JavaScript vs. Java
Numele sunt cel mai mare accident din istoria programării, iar confuzia pe care o provoacă merită clarificată cât mai repede. JavaScript a fost redenumit din LiveScript pur și simplu din motive de marketing în 1995, într-un moment în care Java a fost cea mai discutată tehnologie de pe web. Cele două limbaje au fost concepute de persoane diferite, de la companii diferite, pentru probleme diferite.
| Aspect | JavaScenariu | Java |
|---|---|---|
| Creat de | Brendan Eich la Netscape, 1995 | James Gosling la Sun Microsystems, 1995 |
| Typing | Dinamic și slab tipizat | Static și puternic tipizat |
| Merge mai departe | Motoare de browser și Node.js | Java Mașină virtuală |
| Compilation | Compilat just-in-time de către motor la momentul execuției | Compilat în avans în bytecode |
| Model obiect | Bazat pe prototip, cu sintaxă de clasă adăugată în ES6 | Bazat pe clase de la început |
| Extensia de fișier | .js | .java compilat în .class |
| uz comun | Front-end-uri web, API-uri, instrumente | Backend-uri ale întreprinderii, Android, date voluminoase |
Singura asemănare reală este că ambele împrumută sintaxa acoladă din C. Învățarea uneia nu o înveți pe cealaltă, deși sintaxa comună face ca al doilea limbaj să fie puțin mai ușor de citit. Dacă sintaxa strictă...ping apelează la tine, TypeScript adaugă un strat de tip static deasupra JavaScript în timpul compilării până la fișierul simplu JavaScript, iar diferențele sunt prezentate în acest TypeScript și JavaCompararea scenariilor.
Odată ce elementele de bază sunt stabilite, următorii pași naturali sunt interactiv JavaExerciții de scenariu, Apoi variabile și tipuri de date, urmat de matrice și bucle. După care, orientate-obiect JavaScenariu explică modul în care obiectele, prototipurile și clasele se potrivesc între ele și formatarea șirurilor acoperă gestionarea textului pe care o veți utiliza în aproape fiecare script.



