În Tutoriale

Programarea în JavaScript: Ghid introductiv (I)

logo JavaScript

Acest tutorial li se adresează tuturor celor care își doresc să învețe bazele programării web într-un limbaj extrem de popular. Pentru a putea parcurge acest tutorial în condiții optime, este bine să fiți deja familiarizați cu noțiunea de protocol HTTP și să dețineți cunoștințe cât mai solide de HTML și CSS.

Un scurt istoric

Limbajul JavaScript a fost creat de Brendan Eich în 1995, pe când lucra ca inginer la Netscape. Este un limbaj de programare object-oriented (OOP), care se poate utiliza pentru a facilita interactivitatea în cadrul browserului web, fără a necesita reîncărcarea paginilor la fiecare acțiune, După cum sugerează și numele, JavaScript este un limbaj scriptic.

Limbaje compilate vs. limbaje scriptice

Limbajele compilate implică parcurgerea fazei de compilare, care traduce codul în biți și byți ce pot fi citiți de computer.  

Limbajele scriptice nu necesită compilare. Ele se bazează pe medii runtime speciale și pe programe de interpretare care execută codul fără compilare, prin diverse metode.

JavaScript este înrudit cu Java?

Inițial, acest limbaj a fost menit să poarte numele de LiveScript. Cu toate acestea, din motive de marketing a devenit ulterior JavaScript, pentru a beneficia de pe urma asocierii cu popularul limbaj Java. Există foarte puține asemănări între cele două.

ECMAScript

Standardele ECMAScript se referă la documentul de standardizare JavaScript creat de organizația internațională ECMA. Termenii ECMAScript și JavaScript se folosesc deseori unul în locul celuilalt.

Dincolo de browser

După cum am menționat mai sus, ca limbaj scriptic, JavaScript se bazează pe un mediu gazdă cu un interpret de JS. Cel mai des utilizat este browserul. Alte medii includ Adobe Acrobat, Adobe Photoshop, medii server-side, baze de date și computere integrate.

Pentru ce se utilizează?

  • Crearea de pagini dinamice
  • Facilitarea interacțiunii cu utilizatorul
  • Încorporarea de elemente multimedia

HTML, CSS, JavaScript: un singur corp

Ne putem gândi la HTML ca fiind scheletul, CSS – pielea, iar JavaScript – sistemul muscular. HTML acoperă conținutul paginii web, CSS controlează prezentarea vizuală a lui, iar JavaScript face pagina interactivă, dictându-i comportamentul.

Client-side JavaScript

JavaScript se utilizează cel mai mult client-side. Client-side JavaScript include codul care rulează pe mașina client. Server-side JavaScript rulează, evident, pe serverul care servește paginile web.

Noțiuni de bază

Cea mai simplă modalitate de a începe să utilizați JavaScript este prin intermediul unui browser modern; preferatul nostru este Google Chrome.

Consola

Google Chrome și alte browsere includ instrumentul Console, care oferă userilor posibilitatea de a vedea informații despre pagina web curentă și de a executa JavaScript.
Un ghid complet de utilizare a consolei din Chrome se găsește aici.

Deschiderea consolei în Chrome

Puteți deschide tabul Console în două modalități:

  • Utilizați shortcut-ul Command + Option + J (pe Mac) sau Control + Shift + J (în Windows sau Linux)
  • Din meniul Chrome, selectați More Tools > JavaScript Console.

(Notă: pentru intrări pe mai multe linii în consolă, utilizați Shift + Enter / Return)

Hello World!

Haideți să scriem prima linie de cod JavaScript. În consolă, scrieți următorul fragment de cod și apăsați Enter:

alert('Hello, World!')

Ar trebui să vedeți un pop-up de alertă cu mesajul “Hello, World!”

Până aici a fost simplu. Haideți acum să intrăm în mai multe detalii pe traiectoria noastră de învățare a limbajului JavaScript.

JavaScript și fișierele HTML

Tagul SCRIPT

Atunci când browserul detectează un tag <SCRIPT> într-un fișier HTML, știe să execute codul de JavaScript.

JavaScript intern

Puteți plasa JavaScript direct în fișierul HTML, între tagurile <script> și </script>.

Exemplu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example web page</title>
  <link rel="stylesheet" type="text/css" href="css/example.css">

</head>
<body>
    <h1>Example Page</h1>
    <script>document.write(%u2018<h3>Hello!</h3>%u2019)</script>
    <p>Glad you%u2019re here.</p>
</body>
</html>

JavaScript-ul intern poate fi plasat fie în secțiunea head, fie în cea body a unui document HTML.

JavaScript extern

Puteți asocia și un fișier JavaScript extern unui fișier HTML.

Exemplu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example web page</title>
  <link rel="stylesheet" type="text/css" href="css/example.css">

</head>
<body>
    <h1>Example Page</h1>
    <script>document.write(%u2018<h3>Hello!</h3>%u2019)</script>
    <p>Glad you%u2019re here.</p>
</body>
</html>

Calea către fișierul JavaScript extern este valoarea atributului <src> din tagul <script>.

Este recomandabil să plasați scripturile în partea de jos a elementului <body>, pentru a preveni problemele la încărcarea paginii cauzate de blocarea afișării HTML-ului de către scriptul care se încarcă.

Avantajele utilizării fișierelor externe

  • Separarea JavaScript-ului față de HTML face ca ambele să fie mai ușor de citit și de întreținut;
  • Paginile se pot încărca mai rapid datorită cachingului fișierelor JavaScript de către browser, ceea ce micșorează dimensiunile documentelor HTML; JavaScript-ul intern mărește dimensiunile documentelor HTML, pentru că se downloadează la fiecare request HTML;
  • Puteți lega multiple documente HTML de același fișier JavaScript, ceea ce poate scădea timpul de încărcare a paginilor datorită cachingului din browser.

Afișarea datelor

JavaScript poate produce date în diverse modalități:

  • console.log()

Outputul se afișează în consola browserului.

  • window.alert()

Datele sunt afișate cu ajutorul unui box de alertă.

  • document.write()

Datele sunt scrise în outputul documentului HTML.

  • innerHTML()

Datele sunt scrise într-un element HTML.

Sintaxă și gramatică

JavaScript este case-sensitive: myFunction și MYFUNCTION nu sunt una și aceeași. Se utilizează setul de caractere Unicode. Mai multe informații despre acesta găsiți aici.

Statements

Un statement este o instrucțiune dată computerului. Un script constă într-o serie de statements ordonate special pentru a atinge un scop (ca o rețetă). Aici sunt câteva aspecte de reținut în legătură cu statements:

Liniile noi
Orice statement trebuie să înceapă pe o linie nouă.

Semnul punct și virgulă
Fiecare statement trebuie să se încheie cu punct și virgulă; aceasta transmite interpretului să încheie pasul curent și să înceapă următorul statement.

Spațiul alb
Spațiul alb constă în alineate, spații și linii despărțitoare de paragrafe. Spațiul alb dintre cuvinte și alineate este ignorat. Utilizați spațiul alb pentru a vă face codul mai lizibil.

Lungimea liniilor
Mențineți linia de cod sub 80 de caractere, pentru a facilita lizibilitatea.

Sfârșitul de linie
Se ignoră, cu excepția situației în care se află într-un statement.

În cadrul statementurilor pe mai multe linii, folosiți elemente despărțitoare între operatori (ex.: =, +, -)

De exemplu: Document.getElementById(“example”).innerHTML =

“Insert New Text Here”;

Blocurile de cod
Blocurile de cod organizează statementurile înrudite între acolade { } și le fac mai lizibile. Închiderea unei acolade nu este urmată de punct și virgulă. Funcțiile JavaScript sunt deseori organizate în blocuri de cod.

Exemplu:

function myBirthday {
    alert(%u201CHappy Birthday!%u201D);
    Document.getElementById(%u201Cmessage%u201D).innerHTML = 
%u201CYou%u2019re one year wiser!%u201D; 
}

Convenții de nomenclatură

CamelCase

Este o convenție ca în JavaScript să se utilizeze CamelCase pentru numele identificatorilor (variabile și funcții). De asemenea, toate numele trebuie să înceapă cu o literă.

Ex: myFunction, namingConvention


 

Ghid preluat și tradus cu permisiunea Udemy

Udemy este o comunitate online globală de instructori și cursanți, care oferă peste 32 000 de cursuri online pe diverse teme, de la programare la fotografie. Disponibile în mai mult de 80 de limbi de predare, cursurile Udemy sunt predate de instructori calificați și sunt oferite on-demand, astfel încât cursanții le pot urmări în ritmul propriu de pe orice suport online.