Tutorial JavaScript: Salut lume

Acest tutorial te ajută să începi cu JavaScript. Explică ce ai nevoie pentru a scrie primul tău program în JavaScript. Începe cu elementele de bază: vei învăța unde poți găsi și descărca instrumentele necesare, cum să instalezi aceste instrumente și te va conduce până la construirea și rularea codului tău. Dacă nu ai scris niciodată un program în JavaScript înainte, acesta este locul potrivit pentru a începe. Am creat acest articol, astfel încât să poți începe cu JavaScript și să treci la exemplele noastre de SMS. Dacă ești deja familiarizat cu JavaScript, poți sări direct la unul dintre următoarele proiecte SMS.

Exemple de SMS în JavaScript:

JavaScript trimite SMS cu API-ul HTTP REST (exemplu de cod)
JavaScript trimite mai multe SMS-uri cu API-ul HTTP REST (exemplu de cod)
JavaScript programează SMS cu API-ul HTTP REST (exemplu de cod)
JavaScript primește SMS cu API-ul HTTP REST (exemplu de cod)
JavaScript șterge SMS cu API-ul HTTP REST (exemplu de cod)
Descarcă cea mai recentă bibliotecă JavaScript SMS API de pe Github

Hypertext Markup Language (HTML) este un instrument pentru a defini structura unui site web. HTML este limbajul de marcare standard pentru crearea de pagini web. Împreună cu CSS, ele fac site-urile să arate așa cum sunt. HTML constă dintr-o serie de elemente care spun browserului cum să afișeze conținutul. În acest tutorial îl vom folosi pentru a afișa mesajul "salut lume".

JavaScript este un limbaj de programare scripting. Este similar cu un limbaj natural, cum ar fi engleza. Este folosit pentru a comunica cu un computer. Principala diferență între un limbaj natural și un limbaj de programare este că limbajele de programare au o structură mai riguroasă, pentru a ajuta computerul să le înțeleagă mai bine. În acest tutorial vom folosi cod JavaScript pentru a afișa mesajul "salut lume".

Termenul de server web se poate referi la hardware sau software, sau la ambele lucrând împreună. Pe partea de hardware, un server web este un computer folosit pentru a servi clienții web. Pe partea de software, serverele web rulează un cod PHP care gestionează cererile HTTP ale clienților web.

Un browser web este o aplicație pentru accesarea World Wide Web. Când un utilizator solicită o pagină web de pe un anumit site, browserul web preia conținutul necesar de la un server web și apoi afișează pagina pe dispozitivul utilizatorului. Funcționează în așa fel încât utilizatorul poate face cereri HTTP către serverele web. Cu un browser web putem accesa serverul web scriind adresa IP sau domeniul său în câmpul URL.

WampServer se referă la un stack de soluții pentru sistemul de operare Microsoft Windows, constând din serverul web Apache, OpenSSL pentru suport SSL, baza de date MySQL și limbajul de programare PHP. WAMP acționează ca un server virtual pe computerul tău. Îți permite să testezi toate caracteristicile web fără consecințe, deoarece este localizat pe mașina ta și nu este conectat la internet. Îl vom folosi pentru a găzdui site-ul nostru HTML local.

Pentru a scrie primul tău program în JavaScript:

1. Instalează WAMP pe computerul tău
2. Configurează serverul WAMP
3. Creează un nou fișier index.html
4. Compune primul tău document HTML
5. Scrie primul tău cod JavaScript în fișierul .html
6. Rulează primul tău program JavaScript
7. Deschide modul Inspect pentru notificări de erori
8. Rezolvă eroarea

• Computer cu Windows 10
• Mediu WAMP
• Browser Chrome
• Exemplu HTML Salut Lume
• Exemplu JavaScript Salut Lume

În acest videoclip vom descărca serverul WAMP. Acesta este software-ul pe care îl vom folosi pentru a găzdui codul nostru JavaScript. Mai întâi trebuie să vizitezi https://wampserver.com. și să descarci instalatorul WampServer (Video 1). După ce descărcarea s-a finalizat, instalatorul va fi localizat în directorul de descărcări specificat de browser. Deschizând acest exe vei începe procesul de instalare pentru serverul WAMP.

Începe prin a accesa https://wampserver.com în browserul tău. Apasă pe butonul Descarcă din partea de sus pentru a fi derulat automat la secțiunea de descărcări. Apasă pe WAMPSERVER 64 BITS (X64) pentru a descărca instalatorul WampServer pe computerul tău (Figura 1).

Următorul pas după descărcarea WampServer este instalarea acestuia. Acest videoclip îți arată cum poți finaliza cu succes configurarea. Deschide instalatorul, configurează detaliile de instalare și așteaptă ca procesul să se finalizeze (Video 2). Când ai instalat WAMP Server, acesta va începe să ruleze automat. Acum că WAMP Server este pornit și funcționează, poți începe să codezi în JavaScript.

Scrieți și descărcați prima pagină HTML

Pentru a scrie primul document HTML, ar trebui să creați un fișier index.html nou în folderul \www\ al WampServer.
Cale: C:\wamp64\www\

<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
	</head>
	<body>
		<h1 id="text">Hello world!</h1>
	</body>
</html>
	

Scrieți primul document HTML

Acest videoclip vă arată cum puteți crea un document HTML (Video 3). Vom folosi acest document mai târziu pentru a-l găzdui local. Datorită faptului că rulăm un WampServer pe computerul nostru, putem vizualiza fișierele noastre la adresa http://localhost/. Pentru a face acest lucru, ar trebui să creați sau să plasați fișierul HTML în folderul \www\.
Cale: C:\wamp64\www\

Scrieți și rulați primul program JavaScript

În acest exemplu vom înlocui textul din tag-ul <h1> cu id-ul "text". Pentru a face acest lucru vom folosi selectorul încorporat JavaScript. Aceasta poate părea complicat, dar este ușor. Vom selecta elementul cu id-ul "text" și vom seta atributul innerText (pentru elementul nostru este ca o caracteristică a unei persoane) egal cu textul "Hello Ozeki!".

/*Acest cod JavaScript va înlocui textul din tag-ul
care are id-ul "text".*/
document.getElementById("text").innerText = "Hello Ozeki!";
	

Scrieți și rulați codul JavaScript

Acest videoclip vă arată cum puteți scrie cod JavaScript și să-l rulați în browser (Video 4). Comanda în sine care afișează mesajul trebuie să fie plasată între tag-urile script. Aceste tag-uri indică faptul că o bucată de cod JavaScript trebuie executată aici. Codul în sine este o funcție care are ca argument "Hello Ozeki". După ce scrieți și salvați codul, îl puteți rula în browser.

Introduceți o eroare în codul JavaScript

Dacă facem o eroare în codul JavaScript, putem vedea erorile în modul de inspectare al browserului. Pentru a face acest lucru, ar trebui să faceți clic dreapta cu mouse-ul și să selectați Inspect din meniu. Sau putem apăsa pur și simplu (Ctrl + Shift + I). Acolo selectăm Console, și toate erorile vor fi afișate.

Ce este o eroare de sintaxă?

Eroarea de sintaxă înseamnă "Nu înțeleg". Dacă vorbiți cu cineva în engleză și el nu înțelege ce spuneți, va răspunde cu "Nu înțeleg". Dacă vorbiți cu un computer în JavaScript și computerul nu înțelege ce spuneți, va răspunde cu "Eroare de sintaxă".

Cum să gestionați o eroare de sintaxă în JavaScript?

În codul de mai jos vom crea o eroare de sintaxă intenționat, nepunând un punct și virgulă după linia Hello World. Veți vedea cum reacționează computerul, cum remediem eroarea și cum rulăm programul cu succes.

Remediați eroarea din codul JavaScript

Acest videoclip vă arată cum puteți verifica dacă există o eroare în codul dvs. folosind modul Inspect în browser. Aceasta este o funcționalitate incredibil de utilă pentru a vă ajuta să remediați erorile (Video 5). Consola de depanare din modul Inspect afișează mesaje de eroare care indică ce a mers prost. Puteți face clic pe indexul acestor mesaje de eroare pentru a evidenția linia exactă de cod care a cauzat eroarea.

Rezumat

Articolul de mai sus este despre ceea ce trebuie să scrieți în primul program JavaScript, care este un exemplu de cod Hello World. Acest program poate părea simplu și poate să nu facă multe, dar așa încep lucrurile mari; urmând acest ghid, ați făcut primul pas în devenirea unui dezvoltator JavaScript. A ști să codificați în JavaScript și să creați programe ca soluție pentru problemele dvs. vă va ajuta foarte mult să faceți munca mai ușoară.

Ceea ce ați învățat aici este valoros, există mai multe ghiduri utile pe site-ul Ozeki, înainte! Să trecem la următorul articol pe această temă despre cum să trimiteți SMS din JavaScript.

Acum descărcați Ozeki SMS Gateway și la treabă!