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.

  • 🌐 Client și server: JavaScriptul a început în browser, dar acum rulează și pe servere prin Node.js, Deno și Bun.
  • 🕰️ Originea: Brendan Eich a construit limbajul la Netscape în 1995; se numea Mocha, apoi LiveScript, apoi JavaScenariul.
  • 📜 Standard: ECMAScript este specificația oficială, așadar fiecare browser modern este de acord asupra acelorași reguli de bază ale limbajului.
  • 🛠️ Înființat: Un editor de text simplu și orice browser modern sunt suficiente pentru a scrie și testa primul script.
  • 🖥️ Consola mai întâi: Apăsați F12, deschideți fila Consolă și rulați linii individuale de JavaScript fără a crea fișiere.
  • Nu Java: Java și JavaScripturile au în comun patru litere și aproape nimic altceva, inclusiv sistemele de tipuri și runtime-urile.
  • De plasament: Puneți scripturile în etichetele de script sau conectați un fișier .js extern pentru pagini mai curate și care pot fi memorate în cache.

Ce Este JavaScenariu

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.

Introducere în JavaScenariu

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.

Javascript Istorie

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.

Întrebări frecvente

ECMAScript este standardul scris, publicat ca ECMA-262, care definește sintaxa și obiectele încorporate. JavaScriptul este implementarea funcțională a standardului respectiv, livrată de furnizorii de browsere și Node.js. Numele de versiuni, cum ar fi ES6, se referă la edițiile standardului.

Ambele. Codul sursă este livrat ca text simplu și citit de motor, dar motoare precum V8 și SpiderMonkey compilează just-in-time funcțiile executate frecvent în cod mașină. Rezultatul se comportă ca un limbaj interpretat cu o viteză aproape de compilare.

Cauzele obișnuite sunt lipsa unei etichete de închidere a scriptului, o cale greșită către fișierul extern, o greșeală de scriere care generează o eroare de sintaxă sau un script care rulează înainte ca elementul pe care îl vizează să existe. Deschideți fila Consolă pentru a citi eroarea exactă.

Scripturile interne sunt suficiente pentru câteva rânduri în timp ce înveți. Treci la un fișier .js extern imediat ce codul este reutilizat pe mai multe pagini, deoarece browserul îl poate stoca în cache, iar markup-ul rămâne lizibil.

Pot produce rapid fragmente funcționale, dar combină și API-uri exclusive pentru browser și API-uri exclusive pentru Node.js și, ocazional, inventează metode. Rulați fiecare sugestie, citiți singuri erorile consolei și tratați rezultatul ca pe o schiță, mai degrabă decât ca pe un răspuns finalizat.

Construiește interfața de chat, transmite răspunsuri model token cu token și apelează API-uri de model dintr-un backend Node.js. Biblioteci precum TensorFlow.js și ONNX Runtime Web rulează, de asemenea, modele mai mici direct în browser.

Rezumați această postare cu: