Ce este JavaScript, la ce și cum se utilizează

În cadrul acestui curs te vei familiariza cu limbajul de programare Javascript.  Vom porni de la zero, cu instalarea aplicației de care ai nevoie.

În cazul în care te blochezi la unul dintre module sau ai întrebări, scrie instructorului (adica mie) pe adresa suport@azimutvision.ro (la subject notează te rog numele cursului).

Cursul este gândit în așa fel încât să parcurgi un modul pe zi.  De ce e facut așa? Ca să nu fii tentat să „fușerești” adică să treci repede peste toate noțiunile. Trecând în diagonală peste unități, vei avea impresia că ai înțeles și ai reținut tot, dar deși vei ințelege tot, vei reține foarte puțin. Îți recomand nu doar să citești, ci să testezi chiar tu fiecare exemplu, să parcurgi fiecare pas. Este cel mai bun mod de a învăța.

Să începem!


 

De ce ai nevoie pentru a lucra în JavaScript?

-de un editor web;

-de un browser (ex:  Google Chrome, Mozilla Firefox, Safari, Opera) – nu îți recomand Internet Explorer

Dintre editoarele web vom folosi Notepad++. Este un editor bun și gratuit.  Intră pe  www.notepad-plus-plus.org (pagina exactă este https://notepad-plus-plus.org/download/v7.5.6html)  și descarcă editorul.

js2

Instalează aplicația. Apoi pornește Notepad++. Ar trebui să vezi o fereastră ca cea din imagine:

js1

În cazul în care nu îți apare tab-ul „new 0” dă click în meniul de sus pe „File” – „New” și ți se va crea o pagină nouă.

Înainte să începem să lucrăm îți spun câteva noțiuni introductive despre limbajul  JavaScript:

-este utilizat pentru programarea comportamentului paginilor web și interactivitate;

-este case sensitive (contează dacă scrii un cuvânt cu literă mare sau cu literă mică);

-este un limbaj de scripting client-side;

Ce înseamnă limbaj de scripting client-side? 

Un limbaj client-side rulează pe calculatorul utilizatorului și nu pe server. Rulează în browserul utilizatorului, care citeste codul și îl interpretează. Din acest motiv rezultatul se poate afișa diferit de la un utilizator la altul. Este dependent de setările browserului. (Limbajul PHP este server-side, rezultatul arată întotdeauna la fel)

Javascript a fost standardizat în 1996 de către European Computer Manufacturer’s Association (ECMA) (din acest motiv se mai găsește și sub denumirea de ECMAScript)

Atenție! JavaScript și Java sunt două limbaje de programare complet diferite. Nu e nici o legătură între unul și celălalt. Nu spune „Java” ca pe o prescurtare la „Javascript” – e o greșeală și orice programator va ști imediat că ești începător.

 

La ce folosim Javascript?

Îl folosim la multe lucruri, dar în mod special:

  1. Ca să scriem funcții care reacționează la comportamentul sau datele introduse de către utilizator (de exemplu putem permite utilizatorului să își aleagă setul de culori în care dorește să vadă site-ul).
  2. Ca să validăm datele de intrare pe care le introduc utilizatorii în cadrul unui formular (ex. să îl obligăm ca la câmpul telefon să scrie doar cifre etc).

Cum scriem coduri Javascript?

Putem scrie codurile Javascript în două feluri:

1. (intern) direct în pagina HTML folosind etichetele <script> si </script>

2. (extern) în afara paginii HTML, folosind un fișier .js

Vom testa în continuare ambele metode.

Varianta 1 – folosind etichetele <script> și </script>

Deschide editorul Notepad ++ (în cazul în care l-ai închis între timp). În meniu dă click pe butonul „Language” apoi pe „HTML”:

js3

În acest fel ai „spus” aplicației că dorești să scrii cod HTML.

Pentru varianta 1 avem două opțiuni. Prima este să scrii etichetele <script> și </script> în partea de head a documentului HTML și între cele două să scrii liniile de cod Javascript.

Orice pagină HTML are 6 etichete obligatorii:

<html>  chiar la începutul paginii. Prin această etichetă anunți browserul că în continuare vei scrie cod HTML

<head> vine după eticheta <html>. Această eticheta deschide „capul” paginii, locul unde vei insera elementele care nu se văd propriu-zis pe pagină

</head> închide „capul” paginii

<body> deschide „corpul” paginii, zona unde inserezi elementele care vor apărea pe pagină (pe care utiizatorii le vor vedea când accesează pagina din browser

</body> închide „corpul” paginii

</html> închide pagina

Să inserăm aceste coduri HTML. Scrie-le și tu. Pagina arată acum astfel:

js4

Am scris codul HTML, să adăugăm acum și un mic cod Javascript.

Scrie eticheta de început și anume <script> imediat dupa tag-ul <head>.

Apoi vei scrie codul Javascript.

Când ai terminat de scris codul Javascript dorit, scrie tagul </script>

Pagina arată acum așa:

js5

În rândul 4 am scris „Aici vom scrie codul Javascript”. Asta pentru că încă nu știm să scriem nimic în Js. Să învățăm să tipărim.

Ca să afișăm pe ecran o fereastră pop-up cu un text vom folosi comanda „alert”.

alert („Vreau să fiu programator”);

Codul de mai sus va afișa pe ecran o fereastră în care va scrie: Vreau să fiu programator.

Să inserăm acest cod în rândul 4 (în locul textului existent acum).

Pagina va arăta acum așa:

js6

Ca să o putem vedea în browser trebuie mai întâi să o salvăm. Dă click în meniul de sus pe „File” apoi pe „Save”. În fereastra care se deschide, alege la „Save as type” opțiunea „Hypertext Markup Language”:

js7

Dă un nume fișierului. Apoi dă click pe „Save”.

Acum că l-ai salvat haide să vedem fișierul în browser. În meniul de sus, dă click pe „Run” apoi alege browserul pe care îl folosești. Eu am ales „Chrome”:

js8

Ți se va deschide pagina în browser și pe ea va apărea fereastra de care ziceam:

js9

Testează și tu. E important să reușești acest pas. Vom folosi tipărirea pe parcursul întregului curs.

Felicitări! Ai scris primul tău cod în Javascript.

Îți spuneam mai sus că pentru prima variantă ai două opțiuni. Să trecem la a doua opțiune. Poți scrie codul Js în „corpul” documentului. Între eticheta <body> și </body>

Și în acest caz vom folosi etichetele <script> și </script>

Te întrebi probabil de ce există două opțiuni pentru această variantă. E prematur să îți explic acum. Vei înțelege acest lucru pe măsură ce avansezi în cadrul cursului.

Să testăm și această opțiune. Mută cele 3 rânduri din „head” în „body”. Codul paginii tale trebuie să arate acum așa:

js10

Rulează-l cu „Run” și vei obține același rezultat ca mai înainte.

Să trecem la a doua variantă.

 

Varianta 2 – folosind un fisier .js

În această variantă vom lega un fișier de tip Javascript de un fișier de tip HTML.

Documentul HTML îl avem deja. Să creem fișierul Js. Dă click pe iconița „New” (sau în meniu pe „File” – „New”).

js11

Îți apare un document nou.

js12

Să îl salvăm cu extensia .js.

Dă click „File – „Save as” și alege opțiunea .js (nu poți alege „Save” pentru că încă nu ai scris nimic în fișier):

js13

Dă un nume fișierului. Eu i-am zis „primul-meu-fișier”:

js14

Dacă vrei să îi dai un nume format din mai multe cuvinte scrie-le cu „-” sau „_”. Nu lăsa spațiu între cuvinte pentru că acest lucru îți va complica foarte mult existența. Alege „primul-meu-fișier”, „primul_meu_fișier”, „primulmeufișier” și nu „primul meu fișier”.

Toate fișierele Javascript au extensia .js. Într-un fișier .js nu e nevoie să scrii etichetele <script> și </script> pentru că întreg fișierul conține doar cod Javascript (nu poți scrie cod HTML, PHP etc într-un fișier cu extensia .js).

Să scriem deci alerta noastră în fișierul .js. El va arăta așa:

js15

Salvează fișierul.

Să trecem acum la fișierul HTML. Putem șterge rândul „7” pentru că acest cod îl avem deja în fișierul js.

js16

Ca să facem legătură între cele 2 fișiere. Scrie următorul cod în randul 6:

js17

În interiorul etichetei <script> folosim parametrul  src (de la source / sursă)

Astfel precizăm documentului HTML care este sursa de unde va lua codul JS.

După src scrie semnul “=” apoi scrie numele fișierului Js creat de tine între ghilimele. Poți folosi atât ghilimele simple ( ‘ ) cât și ghilimele duble ( “ ) dar trebuie să fi atent ca ghilimelele de început să fie la fel cu ghilimelele de sfârșit.

Salvează fișierul.

Rulează acum fișierul HTML.

Vei obține același rezultat ca mai devreme.

Ai testat exemplele de mai sus? Dacă nu, testează-le. Cum îți spuneam inițial, dacă doar citești fără să scrii cod, să testezi chiar tu fiecare exemplu, ți se va părea că reții și că știi tot, dar când vei fi pus să scrii cod îți vei da seama că de fapt nu ai reținut atât de mult.

Mâine vom continua cu explicarea comentariilor și variabilelor în Javascript.

SEE ALL Add a note
YOU
Add your Comment