Fundamentele programării (I) – JavaScript

Acesta este primul articol din versiunea JavaScript a seriei dedicate prezentării fundamentelor programării. Dacă vă uitați la articolele corespunzătoare din versiunile dedicate celorlalte limbaje, veți observa că sunt foarte asemănătoare. Vă rugăm să nu ne acuzați de copy & paste… Există un motiv întemeiat! Vrem să fie asemănătare. Vrem să arătăm elementele comune ale limbajelor. Nu are rost să reformulăm doar de dragul de a prezenta lucrurile puțin diferit.

De ce JavaScript?

JavaScript este un limbaj controversat. Mulți apreciază flexibilitatea sa; mulți critică faptul că libertatea de care se bucură programatorul duce prea ușor la greșeli. Dar, cei care îl apreciază sunt suficient de mulți pentru ca limbajul să fie foarte răspândit.

Limbajul este folosit în principal pentru crearea interfețelor utilizator (în special pentru Web), dar începe să fie utilizat și în alte scopuri.

Viitorul nostru serial dedicat dezvoltării de aplicații Web va porni de la premisa că elementele de bază ale acestui limbaj sunt cunoscute. Va fi nevoie și de HTML, dar vom vedea la momentul oportun. Puține cunoștințe de HTML sunt necesare și pentru această introducere, dar le vom prezenta.

Este destul de întâlnită confuzia că JavaScript derivă din Java sau că JavaScript este un fel de Java pentru Web. Nu este așa; limbajele sunt diferite în ciuda asemănării de nume. A spune că JavaScript provine din Java este cam ca și cum ai spune că pasăre provine din pas. Sintaxa este oarecum asemănătoare fiindcă atât Java, cât și JavaScript, folosesc o sintaxă derivată din cea a limbajului C.

Mediul de programare

Pentru dezvoltarea de aplicații JavaScript avem la dispoziție o mulțime de medii de programare, fiecare cu adepții săi. Nu vom risca să recomandăm vreunul. Site-ul ideone.com pe care l-am folosit în variantele Java, C#, Scala și Python oferă și opțiunea JavaScript, dar nu îl vom folosi nici pe acesta. De data aceasta vom crea totul într-un editor de texte simplu.

Avem nevoie de un fișier în care vom scrie codul JavaScript (nu neapărat, dar este mai frumos așa) și unul în care vom scrie codul HTML. În principiu avem nevoie de o pagina Web (descrisă printr-un fișier .html) care va executa anumite comenzi aflate într-un fișier .js.

Vom crea cele două fișiere (să alegem numele ginfo.html, respectiv ginfo.js) în același loc (pe desktop ar fi excelent, de exemplu). Când le creați, să fiți atenți ca nu cumva să vă păcălească sistemul de operare și să adauge o extensie ascunsă; ați putea ajunge să aveți, fără să vă dați seama, ginfo.html.txt și/sau ginfo.js.txt.  Cele două fișiere nu trebuie să conțină nimic deocamdată.

Folosind editorul de texte preferat puteți adăuga acum codul HTML. Nu vom explica tot ce apare în cod; esențială este partea în care este menționat fișierul ginfo.js. Trebuie avut în vedere ca editorul de texte să nu se creadă prea "inteligent" și să creeze altceva decât text simplu atunci când vede extensia .html.

Așadar, asigurați-vă că fișierul ginfo.html, conține următoarele:

Practic am creat o pagină Web cu titlul GInfo; pe această pagină vor fi executate comenzile din fișierul ginfo.js. S-ar putea să vi se pară că și HTML este un limbaj de programare; nu este cazul; acest limbaj doar descrie o pagină Web. Fișierul ginfo.html nu conține un program, ci o descriere.

Să începem…

Pentru început vom încerca să rulăm codul JavaScript pe care l-am scris. Cum fișierul ginfo.js nu conține nimic, este natural să ne așteptăm să nu se întâmple mare lucru. Practic, va fi creată pagina descrisă de fișierul ginfo.html și cam atât. În funcție de sistemul de operare, un click sau un dublu click pe iconița care reprezintă fișierul ginfo.html ar trebui să lanseze un browser care să ne prezinte pagina.

Avem titlu, avem și calea spre fișierul încărcat (adresa paginii) și mai avem mult alb. Practic, pagina nu conține nimic.

Primul program adevărat

Tradiția spune că primul program scris într-un limbaj de programare nou este cel care tipărește mesajul Hello World! Noi vom fi mai originali și vom tipări Gazeta de Informatică.

Pentru aceasta este suficient să scriem comanda corespunzătoare în fișierul ginfo.js (ea a fost prezentată în articolul introductiv).

Folosim editoare de text simple; am decis să nu ne încurcăm cu diacritice de data aceasta, deci am pierdut un ă. Dacă reîncărcăm pagina goală pe care o aveam (fie un refresh în browser, fie din nou click sau dublu-click pe iconiță), de data aceasta vom vedea o așa numită alertă cu mesajul  Gazeta de Informatica. Dacă nu apare, s-ar putea să aveți un browser setat să interzică afișarea de pop-up-uri. Încercați să dezactivați temporar această restricție (doar pentru pagina pe care o folosim).

Modul în care este afișată alerta depinde de browser. Un exemplu ar putea fi:

Tocmai am realizat una dintre operațiile fundamentale efectuate de programele de calculator. Am oferit o informație în exterior. De data aceasta am scris ceva pe ecran. Programele comunică rezultatele executării lor furnizând așa numitele date de ieșire. Acestea pot lua diverse forme. Cea mai simplă este tipărirea unui simplu text, dar sunt multe altele cum ar fi tipărirea la o imprimantă, desene sau filme pe ecran, sunete în boxe etc., dar și informații codificate care nu pot fi înțelese decât de alte programe.

Date de intrare

Programele ne furnizează date de ieșire. De cele mai multe ori ele au nevoie de informații din exterior. Acestea le sunt comunicate prin intermediul așa numitelor date de intrare. Dacă prin intermediul datele de ieșire programele ne furnizează informații, prin intermediul datelor de intrare noi suntem cei care oferim informații. Și datele de intrare pot lua diverse forme: informații introduse de la tastatură, mișcarea mouse-ului, apăsarea butoanelor mouse-ului, apăsarea unui touchscreen, rostirea în microfon, etc. Poate vă imaginați că acele informații codificate pe care le menționam la sfârșitul secțiunii anterioare, cele care nu pot fi înțelese decât de alte programe, reprezintă date de intrare pentru aceste alte programe.

Dar, să ne concentrăm asupra unui exemplu simplu. Vom cere numele utilizatorului și îl vom saluta. Utilizatorul își va introduce numele și după aceea va apărea mesajul Salut, urmat de nume și de un semn de exclamare. Ca să arate totul bine, vom adăuga și un spațiu înaintea numelui. De exemplu, dacă utilizatorul ar introduce numele GInfo, mesajul ar fi Salut GInfo!.

JavaScript ne pune la dispoziție o comandă prin care putem afișa o fereastră care să conțină un mesaj și o zonă în care utilizatorul poate introduce un text. Textul introdus de utilizator va fi utilizat pentru generarea mesajului de salut. Fereastra afișată va conține și două butoane (OK și Cancel) care permit utilizatorului să confirme, respectiv să anuleze, operația. Vom presupune că utilizatorul va apăsa OK. Vom vedea cu altă ocazie ce se întâmplă dacă se apasă Cancel și de ce…

Modificăm acum fișierul ginfo.js. El va trebui să conțină două linii:

Dacă reîncărcâm pagina, inițial apare fereastra care ne permite să introducem numele.

Acum introducem ceea ce dorim (GInfo în cazul nostru).

După apăsarea butonului OK, vom avea o alertă cu mesajul de salut.

Deja browser-ul ales își pune problema că sunt prea multe ferestre de dialog și permite utilizatorului să interzică apariția unora noi. Deocamdată ignorăm acest aspect; va fi rediscutat în cadrul seriei dedicate dezvoltării de aplicații Web.

Mai trebuie precizat faptul că în JavaScript fiecare instrucțiune se încheie la sfârșitul liniei pe care apare. Există și posibilitatea de a scrie mai multe instrucțiuni pe o linie; în acest caz ele trebuie separate prin semnul punct și virgulă.

Va urma

În episodul următor vom vedea cum lucrăm cu numere și texte.