Practicarea Notiunilor de Baza

Practica prin desen
Pentru a înțelege tot ce ai învățat până acum, ar trebui să exersezi mult.
Am creat acest proiect tocmai pentru a te ajuta cu asta.
În acest proiect vei desena elemente grafice folosind JavaScript. Aici vei
avea nevoie de cunoștințe cu care ești deja familiarizat.
Notă: Ca de obicei, nu există doar o singură soluție bună pentru
oricare dintre problemele prezentate aici. Deși poți rezolva aceste
sarcini doar pe baza proiectelor anterioare CodeBerry, ai putea (și te
încurajez cu căldură) să folosești mereu informațiile găsite pe internet.
Desenarea este un instrument excepțional pentru aceasta, deoarece oferă
un feedback imediat cu privire la ce anume face codul tău.
Pentru această sesiune de practică vom folosi elementul canvas. În această
parte introductivă vei învăța cum să-l folosești (elementul grafic atașat a
fost realizat folosind elementul canvas și JavaScript).
Dacă nu îți reușește ceva de prima dată, nu te da bătut. Încercă să modifici
doar bucățelele mici din cod, în cele din urmă vei reuși!
Elementul canvas
Elementul canvas („pânză” în limba română) este un element HTML pe care
poți desena folosind JavaScript.
Codul HTML
Codul HTML necesar este foarte simplu:
<canvas id="myCanvas" width="450" height="350"></canvas>

Copy
Un id va fi necesar mai târziu pentru a putea să te referi la element
folosind JavaScript.
Lățimea și înălțimea pot fi modificate în funcție de necesităţile tale.
Devine mai evident unde poți desena dacă îi atribui un chenar lui canvas:
<canvas id="myCanvas" width="450" height="350"

style="border:1px solid #000000;"></canvas>
Copy
De asemenea, dimensiunile și stilurile pot fi pe o filă CSS separată.

Codul JavaScript
Elementul corespunzător selectat de către JavaScript:
var canvas = document.getElementById('myCanvas');

Copy
Un obiect de desenare este inițiat pe:
var context = canvas.getContext('2d');

Copy
După aceea, poți desena pe această variabilă context. De exemplu, un
dreptunghi:
context.fillRect(20,10,250,175);
Copy
Sarcină
Ramifică acest JSBin și schimbă numerele.

fillRect()
Dreptunghiuri
Acum știi cum să desenezi dreptunghiuri.
Copy
Funcția fillRect() desenează un dreptunghi și îl umple, utilizând culoarea
activă (cea implicită e negru).
Funcția are nevoie de patru argumente: x, y, width, height.
Coordonatele x și y definesc colțul din stânga sus. width și height reprezintă
dimensiunile exprimate în pixeli.
Sarcină
Ramifică acest JSBin și modifică numerele pentru a desena un pătrat
negru exact în mijlocul lui canvas.
fillStyle
Culori
Este mult mai amuzant să desenezi folosind culori.
context.fillStyle = '#C74F78';
Copy
Variabila fillStyle poate fi schimbată pentru a se referi la orice culoare.
După aceea, totul va fi umplut folosind respectiva culoare.
fillRect() este o funcție și trebuie să îi furnizezi argumentele între paranteze
când o invoci. fillStyle este o variabilă și îi poți atribui o nouă valoare prin
utilizarea semnului egal.
Lui fillStyle îi pot fi atribuite orice culori CSS ("gold", "#C74F78", "rgb(199,
79, 120)", "rgba(0, 128, 128, .5)") (i se pot atribui chiar și culori în degrade
și modele).
Sarcină
Desenează un pătrat portocaliu în JSBin.
moveTo() și lineTo()
Liniile
Funcția moveTo(x,y) se mută la o coordonată („cu creionul în sus”).
Funcția lineTo(x,y) desenează o linie dreaptă de la punctul de pornire până
la coordonatele date.
De fapt, linia este o parte a unei căi invizibile. Pentru a fi văzută, trebuie să
aplici o metodă „cerneală”, precum funcția stroke() sau fill().
context.beginPath();
context.moveTo(55, 70) ;
context.lineTo(150,100);
context.stroke();
Copy
Acest cod desenează o linie de la (55;70) la (150;100) și îi aplică o linie
neagră.
Funcția beginPath() nu pare să facă nimic special la acest moment. Mai
târziu însă, căile tale invizibile se pot încurca, mai ales dacă nu au început
pe o tablă goală. Din acest motiv, este o practică bună să
folosești beginPath() în codul tău încă de la început.
Dacă dorești să aplici o culoare lui stroke(), trebuie să modifici valoarea
lui strokeStyle:
context.strokeStyle = "orange";
Copy
Sarcină
Desenează diagonala începând din partea stângă jos și terminând în colțul
din partea dreaptă sus al canvas.
cw și ch
Dimensiunea lui canvas
Lățimea și înălțimea lui canvas pot fi folosite în calcule fără să le știi valorile
propriu-zise:
var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");
var canvasWidth = canvas.width;

var canvasHeight = canvas.height;
context.fillRect(50,50,canvasWidth-100,canvasHeight-100);
Copy
Sarcină
Desenează un dreptunghi care acoperă sfertul din partea dreaptă de jos a
lui canvas. Schimbă dimensiunea lui canvas din panoul HTML sau CSS.
Dreptunghiul ar trebui să umple același sfert fără a fi nevoie să se schimbe
ceva în panoul JS.
Un pătrat singuratic
Ca şablon de început poți ramifica acest JSBin sau poți folosi orice versiune
personalizată.
1.Desenează un pătrat [fillRect()].
2.Umple-l cu verde [fillStyle].
3.Deplasează-l astfel încât să se afle în colțul din partea dreaptă jos al
lui canvas, la 10 pixeli distanță față de margini.
4.Când desenezi pătratul, folosește variabile pentru lățime și înălțime
(definește dinainte o variabilă size).
5.Folosește numai variabile când invoci funcția fillRect().
Sarcină
Copiază și lipește linkul JSBin aici, după ce ai terminat sarcina.

Două pătrate care se suprapun
personalizată.
1.Desenează un pătrat roșu.

2.Desenează un alt pătrat roșu (de fiecare dată când invoci
funcția fillRect, aceasta va desena un dreptunghi).
3.Deplasează cele două pătrate, astfel încât să se suprapună cu câte

un sfert unul peste celălalt.
4.Umple al doilea pătrat cu albastru (dacă schimbi valoarea
lui fillStyleînainte de a invoca fillRect() ar trebui să meargă).
5.Setează o transparență de 50% pentru cele două pătrate [rgba()].
6.Folosește numai variabile în funcția fillRect().
Sarcină
Copiază și
lipește linkul
JSBin aici,
după ce ai
terminat
sarcina.
Steagul Ungariei
personalizată.
Desenează steagul Ungariei (roșu, alb, verde), folosind doar următoarele
variabile din funcții:
var a = 250;
var b = 50;
var cw = 450;
var ch = 300;
Copy
Dacă nu ai un canvas de 450x300 poți schimba valorile.
Utilizează calcule matematice pentru poziționare.
Sarcină

Diagonale
personalizată.
Desenează cele două diagonale roșii ale canvas. Folosește doar variabile
când invoci funcțiile moveTo() și lineTo().

Sarcină
Un
triunghi
personalizată.
Desenează un triunghi. Fă-i conturul gri (strokeStyle și stroke()) și umple-l cu
portocaliu (fillStyle și fill()).
moveTo() se mișcă cu „creionul în sus”, lineTo() desenează linia.
Pentru puncte bonus, folosește numai variabile și calcule atunci când
invoci funcțiile.
Sarcină
Copiază și
lipește linkul
JSBin aici,
după ce ai
terminat
sarcina.
Liniile despărțitoare
personalizată.
Desenează cele două linii care împart canvas în două, cea roșie pe
orizontală și cea verde pe verticală. În funcțiile moveTo() și lineTo() folosește
numai
variabile.
Sarcină
Copiază și
lipește linkul
JSBin aici,
după ce ai
terminat
sarcina.
Pătratele DRY
personalizată.
1.Desenează zece pătrate scriind această funcție fillRect() o singură
dată.
2.Fiecare pătrat nou ar trebui să înceapă de la mijlocul celui

precedent.
3.Pătratele ar trebui să aibă o transparență de 50%.
Definește variabila folosită pentru poziționare în afara buclei și
schimbă-i valorile în interiorul buclei.
Sarcină

Rândurile
personalizată.
1.Desenează 15 pătrate dispuse pe 5 rânduri, scriind
funcția fillRect() în codul tău o singură dată.

2.Fiecare linie ar trebui să conțină un număr de pătrate egal cu
rândul actual (rândul 3 ar trebui să conțină 3 pătrate).
Folosește contoarele de bucle în bucle încorporate, fiind atent să nu
schimbi nimic din ce nu intențonezi.
Sarcină

Scala culorii
personalizată.
1.Desenează o grilă de pătrate care conține 6 pe 6 pătrate, scriind
funcția fillRect() în codul tău o singură dată.
2.Culoarea primului pătrat ar trebui să fie rgb(199,79,120).
3.Scade valoarea componentei roșii cu 7 pentru fiecare pătrat ce

urmează.
4.Mărește valoarea componentei albastre cu 15 pentru fiecare rând.
Variabile de tip string și integer pot fi „însumate”. Numele acestei operații
este concatenation (concatenarea) și returnează un string (șir).
Sarcină

Tunelul triunghiului
personalizată.
1.Desenează 30 de triunghiuri folosind funcția lineTo() de maximum
trei ori.
2.Vârfurile ar trebui deplasate cu câte 5 pixeli pentru fiecare triunghi.
Sarcină
Pătratele curcubeu
personalizată.
Desenează 17 dreptunghiuri colorate în felul următor:
•Primul ar trebui să umple canvas în întregime
•ar trebui să fie umplut cu hsla(360, 50%, 45%, 1)
•fiecare vârf al următoarelor dreptunghiuri ar trebui să fie deplasat

spre interior cu 10 pixeli
•pentru fiecare dreptunghi, hue (primul parametru al lui hsla) ar
trebui redus cu 360/17
Sarcină

Pătratele fizbuzz
personalizată.
1.Desenează 15 pătrate prin invocarea funcției fillRect() doar o
singură dată.
2.Pătratele sunt numerotate secvențial.
3.Pătratele sunt gri și transparente, cu excepția:
•celor care au un număr de serie divizibil cu 3, care sunt

albastre,
•celor care au un număr de serie divizibil cu 5, care sunt
galbene,
•și a celor care sunt divizibile și cu 3, și cu 5, care ar trebui să
aibă un fundal verde.
Sarcină
Copiază și
lipește linkul
JSBin aici,
după ce ai
terminat
sarcina.
Piramida neobișnuită
personalizată.
Mergi pe linia care înjumătățește canvas pe orizontală și desenează o linie
la fiecare 3 pixeli:
•la mijlocul marginii de sus a canvas, în cazul în care coordonata de
început x este pară,
•la mijlocul marginii de jos a canvas, în cazul în care coordonata de
început x nu este pară.
Sarcină

Câte
triunghiuri sunt?
personalizată.
Mergi de-a lungul liniei orizontale despărțitoare din mijlocul lui canvas și
desenează o linie începând de la fiecare pixel. Pentru a obține
coordonatele de sfârșit, împarte coordonata x de început la 4.
•Dacă nu există niciun rest, linia ar trebui să meargă până la (0,0),
•Dacă restul este 1, linia ar trebui să meargă până la (cw,0),
•Dacă
•Dacă
Unde cw es
te lățimea
Sarcină
Copiază și
triangle()
personalizată.
Scrie o funcție triangle(x,y,a) care are nevoie de 3 parametri și care
desenează un triunghi.
Când este invocată precum mai jos, va desena graficul atașat:
triangle(230,160,50);
triangle(270,100,50);
triangle(200,50,150);
Copy
Sarcină

star()
personalizată.
Scrie o funcție filledStar(x,y,a) care are nevoie de trei parametri și care
desenează o stea plină.

Când este invocată precum mai jos, va desena graficul atașat:
filledStar(40,50,75);
Copy
Sarcină

lineToCenter()
personalizată.
Scrie o funcție lineToCenter(x,y, color), care are nevoie de trei argumente și
care desenează o linie în centrul lui canvas de la punctul de început descris
în x,y, utilizând culoarea dată.
Apelează-ți funcția de 100 de ori și de fiecare dată alege un punct de
pornire la întâmplare. Pentru generarea numerelor de pornire la
întâmplare, poți utiliza funcția următoare:

var random = function(max, min) {
return Math.floor(Math.random()*(max-min+1)+min);
}
Copy
Valorile maxime sunt dimensiunile corespunzătoare ale canvas.
Sarcină
Copiază și
lipește linkul
JSBin aici,
după ce ai
terminat
sarcina.
Coloniștii lui JavaScript
Desenează următorul grafic. Utilizează cât mai puţine linii de cod posibil.
Sarcină

drawCheckeredPattern()
Scrie o funcție drawCheckeredPattern(row,col) care desenează un model de
tablă de șah pe canvas. Funcția ia două argumente: row reprezintă numărul
de rânduri, în timp ce col reprezintă numărul de coloane la care canvas ar
trebui împărțit.
Invocând
funcția
Copy
Sarcină
Copiază și
Tetractys
Desenează următorul grafic. Utilizează cât mai puţine linii de cod posibil.
Sarcină

Desenează orice dorești
Acum poți desena o mulțime de lucruri. Dă frâu liber creativității și creează
ceva.
Vizitează ca
nalul
#showcase
de pe
CodeBerry
Slack și
distribuie-ți
creația.
Sarcină
Introdu
linkul JSBin
pentru cea
mai bună
dintre
creațiile tale.
Bine
ai venit!
Salutare și bine ai venit la proiectul nostru „Înregistrarea și utilizarea
unui domeniu”.
În următoarele câteva lecții, vei învăța cum să înregistrezi numele unui
domeniu unic pentru site-ul tău web. De asemenea, vei lua contact cu una
dintre tehnologiile fundamentale din spatele internetului, numită DNS —
Domain Name System (Sistem de nume de domeniu).
La sfârșitul proiectului vei putea:
•să explici ce e DNS-ul,
•să înțelegi cum funcționează și
•să folosești aceste cunoștințe pentru a înregistra și a utiliza domenii

pentru propriile tale proiecte.
Ok, avem multe lucruri interesante care ne așteaptă. Dacă ești gata, hai
să-i dăm bătaie!

De ce este acesta important?
DNS-ul nu are legătură directă cu limbajele de programare. Înțelegerea lui
are mai mult legătură cu înțelegerea modului de funcționare a
internetului.
Din acest motiv, poate că te întrebi: „Atunci de ce ar trebui să învăț despre
el?”
Pe lângă faptul că reprezintă niște cunoștințe pe care este bine să le ai,
înțelegerea cu adevărat a DNS-ului îți poate oferi un avantaj la un interviu
de angajare. Majoritatea dezvoltatorilor juniori nu pot explica exact cum
funcționează DNS-ul. Dacă tu poți, s-ar putea să ai un avantaj clar față de
contracandidații tăi.
Acestea fiind spuse, nu trebuie să cunoști DNS în profunzime pentru a
seta propriul tău site web.

Pentru a reflecta acest lucru, am împărțit acest proiect în două părți:
•Prima parte (primele două capitole) te va purta într-o călătorie în

jurul internetului și îți va arăta cum funcționează sistemul de nume
de domeniu.
•Partea a doua te va purta prin procesul efectiv de obținere a

numelui de domeniu și setarea acestuia pe un site web.
Dacă te interesează doar aplicația practică, poți sări peste partea teoretică
și să o accesezi pe aceea. Doar apasă acest buton:
Sari la partea a doua Cu toate acestea,
în cazul în care consideri călătoria la fel de importantă ca și destinația sau
plănuiești să lucrezi ca dezvoltator, îți recomandăm cu căldură să urmezi și
partea teoretică. Îți promitem că am făcut-o amuzantă și interactivă — așa
cum facem mereu.
Ajunge cu vorbăria, ne vom întâlni în următoarea secțiune.
Introducere în DNS
După cum știi deja, DNS vine de la Domain Name System (Sistem de nume
de domeniu) și e o parte esențială a internetului.
Cât de esențială? Fără DNS nu am putea accesa niciun site web și încă am
mai merge la oficiul poștal pentru a trimite mesaje celor dragi.

Dar ce e mai exact? Pe scurt, DNS-ul este sistemul care găsește chestii pe
internet. Internetul este compus din calculatoare interconectate, de unde
și numele: web („rețea”, în română). În această rețea, fiecare calculator are
o adresă unică, pentru ca alte calculatoare să-l poată găsi.
DNS-ul este sistemul care ține evidența acestor adrese și direcționează
calculatoarele unul către celălalt.
Îți poți imagina internetul ca un oraș, iar DNS-ul ca agenda sa de
adrese.
De fiecare dată când tastezi o adresă în bara de căutare a browserului, de
fapt interacționezi cu sistemul de nume de domeniu. În fundal se
desfășoară o adevărată călătorie între momentul când apeși pe Enter și
când site-ul web este afișat.
Aceasta este călătoria pe care o vom realiza în următoarele sarcini. Însă,
înainte de a porni la drum, există câțiva termeni-cheie din sistemul de
nume de domeniu despre care ar trebui să știi mai multe.
Ce înseamnă DNS în contextul dezvoltării web și care
este rolul său?
Acesta este abrevierea pentru sistemul care menține protocolul HTTP.

Abrevierea vine de la Domain Name System. Este agenda de adrese a internetului.
Vine de la Domain Notation System. Îți permite să găsești chestii pe internet.
DNS înseamnă Direct Neutral Synapsis și este un protocol care îți conectează browserul la
internet.
Numele de domenii
După cum ți-am promis, în curând vom porni într-o aventură în care vom
urmări o singură cerere din bara de căutare a browserului, prin internet și
iar înapoi la browser.
Totuși, înainte de a putea face asta, există câțiva termeni-cheie despre
care ar trebui să afli. Iată primele două întrebări la care trebuie să
răspundem:
•Ce este un domeniu?
•Ce este o adresă IP (Internet Protocol)?
Haide să spunem că vrei să vizitezi Facebook. Cum procedezi? Accesezi
bara de căutare a browserului și tastezi https://facebook.com.
Ceea ce tocmai ai tastat se numește o adresă web (sau URL), iar
partea facebook.com este numele de domeniu. Mai simplu spus, domeniul
este numele unic după care poți căuta ceva pe internet.
Revenind la metafora noastră anterioară, dacă internetul este un oraș,
atunci numele de domeniu reprezintă adresele străzilor pentru
diferite clădiri.
Grozav. Atunci ce este o adresă IP?
Alege numele de domeniu al URL-ului
https://google.com/.
Partea „https://”.
Partea „.com” în sine.
Părțile „https” și „com” fără puncte și bare oblice (slash).
Partea „google.com”.
Adresele IP
Îți amintești cum am menționat mai înainte că fiecare calculator de pe
internet are propria sa adresă? Aceasta este adresa IP (Internet Protocol).
Aceasta este o adresă unică, aparținând unui calculator unic din rețea.
Dacă internetul este orașul, atunci adresele IP sunt adresele străzilor
pentru diferite clădiri.
Poate că te întrebi: „Stai, ce? Tocmai ai spus același lucru despre domenii!”
Da. Și nu este o greșeală. Domeniile sunt adrese prietenoase pentru om,
în timp ce IP-urile sunt adrese mai comode pentru calculatoare.
Când vizitezi un site web, de fapt calculatorul tău îi cere unui alt calculator
(serverul), care stochează site-ul web, să-ți trimită o copie a acestuia.

Pentru a putea face asta, calculatorul tău trebuie să știe adresa IP a
serverului.
Atunci de ce nu folosim pur și simplu adrese IP pentru a naviga pe
internet? De ce ne trebuie domenii? Deoarece adresele IP arată așa:
255.255.255.0.
Ar fi un chin să încerci să-ți amintești asta în loc de facebook.com de fiecare
dată când vrei să vezi fotografii cu colegii tăi de liceu.
Acum că știi asta, este foarte ușor să înțelegi DNS-ul: DNS-ul atribuie
nume de domeniu adreselor IP, pentru a nu fi nevoie ca tu să reții
numerele alea urâte.
Introducere în călătoria prin

DNS
După cum am menționat mai înainte, lecția noastră ne va purta într-o
călătorie în jurul internetului.
În această călătorie:
•vei învăța ce este cache-ul,
•vei învăța cum funcționează DNS-ul când o adresă IP există în cache,
•vei învăța cum funcționează DNS-ul când o adresă IP nu există în

cache,
•vei urmări o cerere prin internet.
Te rugăm să reții că vom folosi google.com ca exemplu pentru cerere.
Acum hai să trecem la treabă.
Primul pas
Tocmai ai tastat google.com în bara de căutare a browserului tău. Ce va
face browserul acum? Înainte de orice altceva, va verifica dacă adresa IP
pentru google.com este stocată în propriul cache.
Ce este cache-ul, te întrebi?
Cache-ul e un depozit temporar pentru datele din browser. Dacă
browserul s-a deranjat să găsească domeniul corespunzător adresei IP,
atunci îl stochează în propriul cache. Astfel nu mai trebuie să-l ceară data
viitoare. Cache-ul economisește timp pentru browser și, în cele din urmă,
pentru tine.
Există două posibilități distincte aici: fie browserul are adresa IP în propriul
cache, fie nu.
•Dacă are adresa IP pentru google.com, atunci problema este
rezolvată. Doar va merge la IP și îi va cere serverului de acolo să-i

trimită conținutul paginii. Apoi o va randa și îi va afișa conținutul pe
ecran pentru tine.
•Dacă nu o are, browserul va apela la OS (Operating System - Sistem
de Operare) și îl va întreba dacă știe adresa IP pentru google.com.
Ca și browserul, OS-ul va verifica în propriul cache și, dacă are stocată
adresa IP, atunci o va trimite înapoi la browser. Dacă nu o are, va trimite o
cerere la serverul de rezolvare a numelui.
Serverul de rezolvare a numelui e ceea se poate numi „intermediarul”
DNS-ului. Vei înțelege de ce în următoarea sarcină.
Ce este cache-ul? Alege răspunsul corect.
Cache-ul este locul în care browserul stochează resursele (precum imagini, clipuri video etc.)
site-urilor deja vizitate.
Este un set suplimentar de memorie doar pentru browser, pentru a reda mai bine clipuri video.
Cache-ul este depozitul temporar al datelor din browser. Acesta poate stoca adresele IP ale site-
urilor deja vizitate.
Cache-ul este un termen de argou pentru bara de căutare a browserului.
Verifică răspunsul meu
Serverul de rezolvare a
numelui
Ok, deci nici browserul, nici OS-ul nu știu adresa IP pentru google.com.
Următorul pas este să întrebe serverul de rezolvare a numelui.
De obicei, serverul de rezolvare a numelui este oferit de către ISP-ul tău
(Internet Service Provider - Furnizor de Servicii Internet). În principiu,
acesta acționează ca un intermediar. Se poziționează între calculatorul tău
și celelalte calculatoare din rețea și ajută la menținerea unei comunicări
eficiente între ele.
Haide să revenim la exemplul nostru de cerere.
OS-ul abordează serverul de rezolvare a numelui cu o întrebare: „Hei, știi
adresa IP pentru google.com?”
Întocmai precum browserul și OS-ul au procedat înainte, serverul de
rezolvare a numelui mai întâi verifică propriul cache. Dacă adresa IP se
află acolo, va trimite răspunsul înapoi la OS, care, în schimb, îl trimite
înapoi la browser.
Însă, în cazul tău, serverul de rezolvare a numelui nu știe IP-ul
pentru google.com. Totuși, nu intră în panică. Pur și simplu merge și
apelează la următorul membru al DNS-ului, serverul-rădăcină.

Cine trimite cererea la serverul de rezolvare a
numelui?
Browserul.
Sistemul de operare.
Furnizorul de Servicii Internet (ISP) al utilizatorului.
Serverul de rezolvare a numelui trimite ping încontinuu fiecărui calculator din propria rețea. Nu
este nevoie să trimită o cerere.
Serverul-rădăcină
Serverul-rădăcină se află în vârful ierarhiei DNS. Există 13 servere-rădăcină
în lume și fiecare este menținut de către o organizație diferită.
Asta nu înseamnă că există numai 13 servere-rădăcină fizice care au
grijă de întregul internet. Fiecare server are o mulțime de servere-
oglindă fizice răspândite pe tot globul.
Revenind la cererea noastră, serverul de rezolvare a numelui va pune
aceeași întrebare serverului-rădăcină, care a fost pusă și mai înainte: „Hei,
știi adresa IP pentru google.com?”
Serverul-rădăcină se va gândi puțin la asta și apoi va răspunde serverului
de rezolvare a numelui: „Nu știu adresa IP pentru google.com, dar știu unde
să găsesc serverul care stochează .com. Vrei această informație?” „Sigur!” –

răspunde serverul de rezolvare a numelui. Apoi stochează mai departe
locația serverului care este responsabil cu domeniul de nivel
superior .com în propriul cache.
Aceste server se numește (nesurprinzător) server de domeniu de nivel
superiorsau server TLD. Aceasta va fi următoarea oprire pentru serverul
nostru de rezolvare a numelui.
Ce servere se află în vârful ierarhiei DNS?
Serverele-rădăcină.
Serverele TLD.
Serverele de nume.
Serverele de rezolvare a numelui.
Serverul de domeniu de nivel

superior
Un domeniu de nivel superior, sau TLD, este partea cea mai îndepărtată
din dreapta unui nume de domeniu. TLD-ul cererii noastre (google.com)
este .com. Fiecare TLD are propriul server, numit server de domeniu de
nivel superior.
.com este cel mai comun TLD. Altele foarte populare sunt: .org, .net și .edu.
De asemenea, există și TLD-uri pentru fiecare țară, precum .br și .fr, și chiar
și pentru noutăți, precum .pizza, .app sau .diamonds.
Acum, revenind la cererea noastră, serverul TLD îi va spune serverului de
rezolvare a numelui: „Nici eu nu știu adresa IP pentru google.com. Totuși,
știu unde să găsesc serverul de nume pentru domeniul google!”
Serverul de rezolvare a numelui va stoca informația în propriul cache și își
va continua călătoria.
Alege TLD-ul lui https://www.codeberryschool.com.
Partea „codeberryschool”.
Partea „www” fără punct.
Ultimul punct (.) în sine.
Partea „.com”.
Serverul de nume
Acum, lunga noastră călătorie aproape că s-a încheiat. Serverul de nume
este oprirea finală înainte ca serverul de rezolvare a numelui să poată
porni în căutarea propriei căi înapoi la browser.

Serverul nostru de rezolvare a numelui ajunge la serverul de nume de
domeniu al google: „Știi adresa IP pentru google.com?” La care serverul de
nume răspunde: „Desigur, iat-o: 74.125.224.72”
Având aceste informații, serverul de rezolvare a numelui își începe cursa
înapoi către browser.
Acum poate că te întrebi: „Cum știe serverul TLD unde să găsească
serverul de nume?” Răspunsul este: cu ajutorul unui registrator de
domeniu. Fără a intra prea mult în detalii, registratoarele de domeniu sunt
companii care rezervă nume de domeniu și comunică noi nume de servere
către serverele TLD. Așadar, dacă achiziționezi un domeniu sub TLD-
ul .com, registratorul tău de domeniu va actualiza înregistrările serverului
TLD pentru a ști adresa IP a serverul tău de nume.
Care este rolul serverelor de nume?
Acestea stochează domenii de nivel superior.

Acestea pot oferi serverului de rezolvare a numelui adresa IP pe care o caută.
Acestea asigură comunicarea între serverul TLD și browser.
Acestea sunt serverele pe care sunt stocate diferite site-uri.

Înapoi la browser
Având adresa IP în propriul cache, serverul de rezolvare a numelui va
reveni la OS și îi va spune: „Hei, iată ce cauți. IP-ul
pentru google.com este 74.125.224.72.”
OS-ul va stoca IP-ul în propriul cache, așadar nu va mai trebui să-i ceară
serverul de rezolvare a numelui pentru aceeași adresă din nou. Apoi îl
bate pe browser pe umăr: „Hei, știu adresa IP pentru google.com, iat-
o: 74.125.224.72.”
Browserul stochează informațiile în propriul cache, apoi se conectează cu
serverul la adresa IP 74.125.224.72. Serverul trimite conținutul paginii de
destinație Google, iar browserul o afișează cu mândrie utilizatorului.
Ei, ce mai călătorie pe cinste!
Care este ordinea comunicării pentru serverul de
rezolvare a numelui dacă IP-ul nu se află nicăieri în
cache?
OS → Server de nume → Server TLD → Server-rădăcină

Browser → OS → Browser
Server-rădăcină → Server TLD → Server de nume → OS
Server de nume → OS → Server TLD → Browser

Bine lucrat
Poate că toată călătoria ți se pare înceată acum, însă reține că în realitate
aceasta se întâmplă în numai câteva milisecunde și se întinde pe mai
multe continente de pe glob. Destul de impresionant, așa-i?
Apropo, felicitări! Acum știi cum funcționează sistemul de nume de
domeniu în detalii amănunțite. Acesta nu-i un pas mic.
Pentru că nu ne-a mai rămas nimic altceva, este momentul să ne suflecăm
mânecile și ne setăm propriul site web pe un domeniu personalizat.
Pașii pentru găzduirea unui site

web
Punerea în funcțiune a propriului site web este destul de simplă și chiar asta te vom
învăța în lecția de față.
Vei învăța:
• ce este un registrator de domeniu,

• ce este o gazdă de domeniu și o gazdă web,
• diferența dintre ele,
• cum să achiziționezi un nume de domeniu
• și cum să faci să funcționeze propriul site web.
Aceasta e partea practică a proiectului. Sperăm că ești la fel de entuziasmat ca noi.
Acum hai să trecem la subiect și să ne apucăm de treabă.
Înainte
Cum ți s-a părut această sarcină?
Registratoarele de domeniu
Când cumperi un nume de domeniu, primul lucru pe care trebuie să-l
definești este registratorul de domeniu pe care vrei să-l folosești.
Registratoarele de domeniu (sau gazdele de domeniu) sunt companii de
la care poți cumpăra un nume de domeniu. Acestea sunt responsabile
cu rezervarea numelor de domeniu și comunicarea noilor nume de
servere către serverele de domeniu de nivel superior.
Vom folosi Namecheap pentru această lecție, dar te rugăm să reții că
există o mulțime de registratoare de domeniu și că îl poți alege pe oricare
îl vrei. Procesul este destul de asemănător pentru toate, așa că alege-l pe
cel care îți este cel mai comod.
În următoarele câteva sarcini:

1.vom alege, căuta și cumpăra un nume de domeniu folosind
Namecheap,
2.vom crea fișiere HTML și CSS simple pentru a le folosi pe site-ul

nostru web,
3.și, în sfârșit, vom găzdui site-ul web.
Dar, mai întâi, iată o mică explicație a diferenței dintre gazda de domeniu
și gazda de site web.
Ce e un registrator de domeniu?
O companie de la care poți achiziționa un nume de domeniu.

O companie care rezervă nume de domeniu.
O companie care comunică noile nume de domeniu serverelor TLD.
Toate cele de mai sus.
Diferența dintre gazde

Există o diferență între găzduirea unui nume de domeniu și găzduirea
unui site web.
Găzduirea unui nume de domeniu înseamnă găzduirea setărilor
domeniului tău. De exemplu, asigurarea că numele domeniului tău indică
spre site-ul web, e-mailul etc. corect.
În timp ce găzduirea unui site web înseamnă găzduirea efectivă a
fișierelor care compun site-ul tău. Precum pagina ta HTML, fișierele CSS și

JS etc. Gazda site-ului web este compania care furnizează serverul
efectiv pe care pagina este disponibilă.
În următoarele sarcini, vom achiziționa un nume de domeniu și îl vom
indica spre un site web.
Există două modalități în care poți aborda sarcinile care urmează:
1.Poți cumpăra un nume de domeniu pentru tine. Îți recomandăm

cu căldură să faci asta. Îți poate fi foarte folositor pe viitor, din
moment ce îl poți folosi ca site pentru identificarea ta; un loc în care
îți promovezi activitatea și îți prezinți portofoliul.
2.Doar urmărești ceea ce facem, însă nu achiziționezi un domeniu și

nu lucrezi alături de noi.
Poți face cum vrei, depinde de tine.
Acum hai să trecem la lucrurile practice.
Alege un registrator
În regulă, așadar prima întrebare la care trebuie să răspunzi când
achiziționezi un nou nume de domeniu este: Ce registrator de domeniu
ar trebui să folosesc?
După cum am menționat anterior, vom folosi Namecheap, însă asta nu
înseamnă că e singura opțiune. Poți alege un registrator de domeniu

diferit dacă vrei. Procesul de achiziție și setare a domeniului este destul de
asemănător peste tot.
Am ales Namecheap deoarece este, ei bine, ieftin (engl. cheap). De
asemenea, are o interfață foarte intuitivă și ușor de folosit pentru
utilizator.
Vizitează registratorul de domeniu ales. Dacă îți convine Namecheap,
accesează această adresă: www.namecheap.com.
Alege un nume de domeniu

Acum că ai un registrator, este momentul să-ți alegi un nume de domeniu.
Amintește-ți că noi construim un site personal aici. Acesta va conține
informații despre tine și poate, mai târziu, îți va prezenta și portofoliul.
Reține toate acestea atunci când îți alegi domeniul și, de asemenea, ține
cont de următoarele câteva sfaturi.
Un bun nume de domeniu trebuie să fie:
•memorabil – utilizatorii trebuie să și-l amintească cu ușurință;
•destul de scurt – domeniile lungi sunt greu de tastat;
•ușor de pronunțat – nu este niciodată un semn bun când cineva

trebuie să spună pe litere un domeniu;
•să facă referire la conținut – asta este mai degrabă o opțiune în
opinia noastră, dar e bine dacă numele domeniului tău nu creează
confuzie. De exemplu, nu-ți denumi site-ul web pentru magazinul tău
de gogoși myhamburgerplace.com. Asta ar trimite cu siguranță mesajul
greșit.
Luând în considerare toate acestea, îți recomandăm să-ți folosești
numele complet pentru site-ul tău de prezentare (de ex. ionpop.com).
Aceasta este o practică acceptată la scară largă. Profesioniștii o folosesc ca
un fel de carte de vizită. Când cineva vrea să te vadă pe internet, trebuie
doar să-ți scrie numele. Simplu și ușor.
Încearcă și tu și alege numele de domeniu perfect pentru tine. După ce ai
terminat, vom vedea dacă este disponibil și vom alege un TLD pentru
acesta.
În restul lecției, vom folosi asimpleaboutmepage ca domeniu în exemplele
noastre. Nu e un nume, dar explică destul de clar scopul nostru și acoperă
și alte aspecte din lista noastră de sfaturi.
Cumpără un nume de domeniu

Acum că te-ai hotărât asupra unui nume de domeniu, este momentul să
vezi dacă chiar e disponibil.

Deschide Namecheap, dacă ai închis pagina. Vei fi întâmpinat de un mare
câmp de căutare în partea de sus a paginii principale. Introdu ideea ta de
nume de domeniu și caută-l.
Vei fi redirecționat către o pagină cu rezultate, unde poți vedea domeniul
tău în combinație cu un număr de TLD-uri.
Dacă te întrebi ce înseamnă un TLD, răspunsul scurt este punctul (.) și ce
urmează după el la sfârșitul adreselor web. De exemplu,
în google.com, .com este TLD-ul. Dacă vrei să afli mai multe, poți merge să
citești sarcina noastră despre acest subiect.
După cum am menționat în lecțiile precedente, există o mulțime de
domenii de nivel superior, unele chiar și pentru noutăți,
precum .store sau .club.
De această dată, vom folosi .com, deoarece este cel mai comun și încă e
prima opțiune la care oamenii se gândesc când încearcă să acceseze orice
site web. Totuși, poți alege orice TLD dorești, totul depinde de tine.
Este posibil ca perechea de domeniu + TLD pe care o vrei să fie luată
deja. În acest caz, pur și simplu poți alege un alt TLD sau modifică-ți
numele domeniului de bază.
Când îți place alegerea făcută, doar dă clic pe butonul „Add to
cart” (Adăugă în coș) de lângă combinația dorită. Apoi dă clic pe „View
cart” (Vizualizare coș) și treci prin procesul de plată al lui Namecheap.
Iată câteva informații dacă chiar te hotărăști să cumperi un domeniu:
• Namecheap te va întreba dacă vrei să-ți reînnoiești automat

numele de domeniu. Site-ul procedează astfel deoarece tu doar
închiriezi un nume de domeniu în loc să îl deții. Trebuie să-l
reînnoiești periodic (de obicei anual), altfel poate fi revândut
altcuiva.
• Namecheap îți va oferi și alte câteva servicii, precum găzduire

sau e-mail privat. Acestea sunt toate opțiuni interesante, însă nu
vei avea nevoie de ele pentru construirea unui site de portofoliu.
Le poți ignora.
• Vei vedea o opțiune numită „WhoisGuard”, care este activată

gratuit. Acesta este un serviciu folositor și îți sugerăm să-l lași
activat. El protejează informațiile personale asociate domeniului
tău și previne ca alte persoane să-ți trimită spam.
Acum că știi tot ce trebuie, achiziționează-ți domeniul. (Pur și simplu
urmărește procesul de plată de pe Namecheap. E foarte simplu.)

După ce ai terminat, vom seta GitHub Pages pentru a-ți găzdui site-ul
web și îți vom conecta noul domeniu la repertoriu.
De ce GitHub?
Poate că știi de GitHub doar pentru abilitatea lui de a gestiona repertorii.
Totuși, GitHub oferă și un alt instrument foarte folositor: GitHub Pages.
GitHub Pages este o funcționalitate a lui GitHub care îți permite să
găzduiești fișiere pentru site-ul web și să-i ceri numelui tău de domeniu să
indice către fișierele stocate în repertoriul GitHub. Mai pe scurt, este o
gazdă de site web.
Și vrei să știi care este cel mai bun lucru dintre toate? Este gratis!
Trebuie doar să creezi un repertoriu GitHub, să-ți pui toate fișierele în el și
să indici către numele tău de domeniu.
Dacă pare destul de simplu, asta-i pentru că așa este.
Pentru a-ți oferi informații suplimentare, iată ce vom face în următoarele
sarcini:
•vom crea un repertoriu GitHub,
•vom clona repertoriul pe calculatorul tău,

•vom crea o simplă pagină HTML cu numele tău, o introducere și o
poză cu tine,
•vom actualiza aceste schimbări în repertoriul tău,
•vom conecta repertoriul GitHub la numele domeniului tău.
Desigur, GitHub nu este singura gazdă web existentă. Îl vom folosi
pentru moment pentru că A) ești familiarizat cu el, B) este gratuit și C)
este cea mai bună opțiune pentru site-urile web mici și statice.
Acestea fiind spuse, să trecem la treabă!
O mică declinare a răspunderii

În această lectie, vom presupune că ești deja destul de familiarizat cu
noțiunile de bază ale Git și GitHub.
Nu vom explica pas cu pas lucruri precum setarea unui repertoriu,
clonarea, încărcarea schimbărilor etc.
Dacă toate acestea nu-ți sunt familiare, îți recomandăm cu căldură să te
oprești și să accesezi proiectul nostru despre noțiunile de bază ale Git mai
întâi. Apoi revino aici și continuă.
Ok, ești gata? Să începem.

Setează un repertoriu nou
A venit momentul să trecem la treabă. Te rugăm să faci pașii următori:
1.Deschide-ți profilul de GitHub.
2.Creează un repertoriu nou. Îl poți denumi oricum vrei, însă îți

recomandăm să folosești ceva evident, ca nameplate-site, de
exemplu.
3.Clonează repertoriul pe calculatorul tău.
4.Deschide folderul din editorul tău text la alegere și adaugă un
fișier index.html și unul main.css. Pune un comentariu în fiecare ca să
nu fie complet goale.
5.Înregistrează și încarcă schimbările în repertoriu.
După ce ai terminat cu asta, putem trece la crearea site-ului tău de
prezentare simplu.
Crearea site-ului tău web

Este momentul să-ți personalizezi site-ul web. Deschide fișierul index.html și
pune-ți numele, o mică introducere și o imagine cu tine. Dacă nu vrei să-ți
pierzi timpul scriindu-ți propria versiune, doar copiază și lipește codul de
mai jos și fă schimbările necesare.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title>Pagina Despre mine</title>
</head>
<body>
<div class="container">
<h4>Numele tău</h4>
<p>Adaugă o mică introducere despre tine</p>
<img src="yourpicture.png" alt="imagineata">
</div>
</body>
</html>
Copy
Haide să-i dăm stil paginii tale. Deschide fișierul main.css și stilizează-l cum
îți place. Din nou, poți doar copia și lipi codul de mai jos, dacă nu vrei să-ți
personalizezi pagina chiar acum.
.container {
width: 100%;
height: 100%;
}
h4 {
text-align: center;
}
p {
text-align: center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Copy
Înregistrează și încarcă schimbările în repertoriul tău GitHub.
Totul este pregătit pentru ca tu să-ți publici site-ul cu GitHub Pages.
Publicarea folosind GitHub

Pages
Publicarea site-ului tău web pe un domeniu GitHub este destul de simplă.
În setările repertoriului tău, există secțiunea GitHub Pages. În aceasta, vei
găsi următorul mesaj: „GitHub Pages is currently disabled. Select a source
below to enable GitHub Pages for this repository.” (GitHub Pages este
dezactivat momentan. Alege o sursă de mai jos pentru a activa GitHub
Pages pentru acest repertoriu.)
Alege-ți ramura master ca sursă și dă clic pe „Save” (Salvare).

Poate dura ceva timp până când pagina ta va fi publicată, așa că dacă
linkul nu funcționează imediat, nu te îngrijora. Probabil că site-ul tău va
fi disponibil în mai puțin de 15 minute.
Singurul lucru rămas de făcut este să-ți asociezi repertoriul cu numele
domeniului tău.
Asocierea cu numele tău de

domeniu personalizat
În secțiunea „Settings” (Setări) din repertoriul tău GitHub, vei vedea un
câmp numit „Custom domain” (Domeniu personalizat). Pune numele
domeniului tău acolo și salvează-l. În cazul nostru, va
fi asimpleaboutmepage.com.
După ce ai terminat, dacă revii la fila „Code” (Cod), vei observa că fișierul
de înregistrare CNAME a fost generat pe lângă fișierele
tale index.html și main.css.
CNAME vine de la Canonical Name (Nume Canonic). În esență, este o
înregistrare care asociază GitHub Pages cu numele tău de domeniu
personalizat.
Aproape că am terminat. Mai trebuie doar să configurăm câteva lucruri la
gazda de domeniu.
Conectând punctele
Singurul lucru rămas de făcut acum este să adăugăm câteva înregistrări în
panoul de control al numelui tău de domeniu. Aceste înregistrări transmit
diferite lucruri serverelor, dar, în esență, acestea vor rezulta într-o
redirecționare. Când cineva tastează numele domeniului tău, va fi trimis la
repertoriul publicat pe GitHub.
Accesarea setărilor
Dacă folosești Namecheap, urmează acești pași:
•Conectează-te la tabloul de bord Namecheap.
•Dă clic pe „Domain List” (Listă domeniu).
•Dă clic pe „Manage” (Gestionare), de lângă domeniul tău.
•Asigură-te că pe rândul „NAMESERVERS” opțiunea „Namecheap

BasicDNS” este selectată.
•Dă clic pe „Advanced DNS” (DNS avansat) din partea de sus a paginii.
Procesul este destul asemănător și pe alte gazde de domeniu. Singurul
lucru care se schimbă este interfața panoului de control.
Crearea înregistrărilor A
Mai întâi, trebuie să creezi câteva înregistrări A.
„A” vine de la Address (Adresă). Acestea sunt înregistrările care vor indica
numele domeniului tău către adresele IP ale serverelor GitHub. (Unde
pagina ta este stocată de fapt.)
Pentru crearea unei înregistrări A:
•Dă clic pe butonul „Add new record” (Adăugare înregistrare nouă).
•Alege „A Record” (Înregistrare A) ca tip.
•Setează simbolul [at] (@) ca Gazdă.
•Introdu adresa IP a serverului către care dorești să indici.
•Lasă TTL setat la „Automatic” (Automat).
•Dă clic pe mica bifă.

În acest caz, trebuie să creezi 4 înregistrări A cu aceste 4 adrese IP diferite:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Copy
TTL vine de la Time To Live (Durată de viață) și reprezintă durata
necesară pentru ca schimbările pe care le-ai realizat în DNS să fie
afișate.
Setarea fișierului CNAME
Îți amintești când GitHub a setat o înregistrare CNAME pentru noi? Trebuie
să setăm una și în Namecheap. Haide să facem asta acum.
Dând clic pe butonul „Add new record” (Adăugă înregistrare nouă), poți
adăuga o nouă înregistrare CNAME. Gazda ar trebui să fie www,
valoarea numeletăudeutilizator.github.io și poți lăsa TTL la automat.

Înlocuiește partea numeletăudeutilizator cu propriul nume de
utilizator GitHub.
Apoi salvează înregistrarea.
Dezactivează pagina de parcare
automată
Când cumperi un domeniu, Namecheap creează o pagină web automat,
care le spune vizitatorilor că domeniul există. Aceasta se numește pagină
de parcare. Acum că ai propriul conținut, nu mai ai nevoie de ea.
Revino la panoul „Domain” (Domeniu), derulează până la capătul paginii și
comută la „Off” (Dezactivare) în secțiunea „Parking page” (Pagină de
parcare).
Asta-i tot
Dacă îți vine să crezi sau nu, am terminat. Acum aceste înregistrări indică
spre repertoriul tău GitHub. Bine lucrat!

Poate dura până la 30 de minute pentru ca schimbările făcute în
înregistrările DNS să fie afișate, așa că nu te îngrijora dacă domeniul
tău nu-ți arată site-ul web imediat. Așteaptă puțin și încearcă din nou.
Să profităm de beneficiile lui

GitHub
Înainte de a încheia acest capitol al studiilor noastre, iată o mică notă
legată de motivul pentru care să folosești GitHub pentru a-ți găzdui site-
urile simple: vine cu tot sistemul de control al versiunii GitHub.
Dacă vrei să faci schimbări site-ului tău web, trebuie doar să urmezi fluxul
de lucru GitHub, pe care îl cunoști deja. Fă schimbările pe calculatorul tău
local, înregistrează-le și încarcă-le în repertoriul tău. Și asta-i tot. Ți-ai
actualizat site-ul live.
Încearcă și tu. Fă câteva schimbări în index.html, apoi înregistrează-le și
încarcă-le.
Odată ce ai făcut-o, vizitează-ți domeniul și vei vedea că schimbările tale
se regăsesc deja acolo. (Dacă nu sunt vizibile, este suficient să aștepți 2-3
minute și să încerci să încarci din nou pagina.)

De fiecare dată când vrei să schimbi ceva pe site-ul tău web, asta-i tot ce
trebuie să faci. Destul de simplu, nu-i așa?
Încheiere
Din moment ce ne apropiem de sfârșitul proiectului, haide să recapitulăm
ce am învățat. Acum știi:
•ce e DNS-ul,
•de ce DNS-ul este așa de important,
•care sunt componentele DNS-ului și care sunt funcțiile acestora,
•cum să cumperi un nume de domeniu și
•cum să găzduiești un site web folosind GitHub Pages.
Ai învățat multe, te poți mândri cu asta. Felicitări!
Dacă vrei, îți poți rezerva mai mult timp acum să lucrezi la site-ul tău de
prezentare nou-nouț. Adaugă câteva detalii, lucrează un pic la design și
asigură-te că este ceva ce vrei ca vizitatorii să vadă. Dacă vrei feedback,
trimite site-ul terminat celorlalți studenți pe canalul de Slack ask-away
și întreabă-i ce părere au.
Ok, hai să încheiem!

Sperăm că ți-a plăcut această călătorie, însă haide să nu ne oprim aici. Te
mai așteaptă și alte proiecte uimitoare, așa că ne vedem în secțiunea
următoare.
Introducere – La ce se folosește
Node.js?
În acest proiect vei crea un server web folosind Node.js.
+1 sfat: În cazul în care cuvintele function, terminal, webserver, objectîți sunt
complet necunoscute, acest proiect nu este încă pentru tine. Îți
recomandăm să termini proiectele noastre anterioare înainte de a-l începe
pe acesta.
Node.js permite rularea lui JavaScript pe server.
Această posibilitate este destul de nouă, din moment ce JavaScript a fost
destinat rulării în browsere, pentru a face site-urile web reactive,
interactive și dinamice. De fapt, Node.js folosește motorul de interpretare
JavaScript din Google Chrome V8 pentru a traduce JavaScript în cod de
calculator. Aceasta îți permite să scrii cod server-side folosind limbajul
JavaScript.
Avantajul evident al acestuia este că folosește același limbaj atât în partea
clientului, cât și în partea serverului. Schimbarea de la un context la altul
(dezvoltarea full stack) și partajarea fragmentelor de cod între frontend și
backend este mult mai ușoară.
+1 sfat: Node.js este asincron (evenimentele nu se blochează unul pe
celălalt), iar această funcție face greu de servit mai multe cereri care
sosesc în același timp. Această funcție îți poate da bătăi de cap la
început.
Instalând Node.js
Instalarea
Pentru a continua instalează Node.js pe calculatorul tău.
Vizitează https://nodejs.org, descarcă și instalează versiuneaLTS (long
term support - suport pe termen lung). Poți lăsa fiecare setare implicită.
Când instalarea s-a terminat, verifică dacă totul a mers bine. Deschide o
fereastră de terminal și scrie următoarele:
node -v
Copy
Ca răspuns, ar trebui să vezi afișată versiunea de Node.js instalată.
+1 sfat: Semnul "$" precedând comanda nu ar trebui să fie scris. El este
doar o indicație că această comandă trebuie introdusă în terminal.
Terminal
Dacă folosești Windows și nu ai întâlnit până acum terminalul, atunci
următoarea secțiune este pentru tine. Dacă te pricepi cu terminalul, ești
liber să treci la următoarea sarcină.
În mod implicit, în Windows există două tipuri de terminale. Primul este
cel simplu (%windir%\system32\cmd.exe, Command Prompt). Al doilea este
PowerShell (%windir%\system32\WindowsPowerShell\powershell.exe,
PowerShell). %windir% vine de la calea de instalare a Windows-ului tău (de
obicei, C:\Windows).
Îți recomandăm să folosești PowerShell, din moment ce îți permite un
control mai bun și este destinat programatorilor ca tine. Pentru a începe:
Apasă butonul Windows (sau tasta Windows) și începe să scrii PowerShell
sau Command Prompt.

+1 sfat: Poți chiar utiliza command prompt instalat de către Node.js.
IDE
Folosirea unui IDE (integrated development environment - mediu de
dezvoltare integrat) precum WebStorm ți-ar face activitatea mult mai
ușoară, dar acest proiect va folosi în mod deliberat terminalul care scrie
fiecare comandă, pentru a cunoaște noțiunile de bază.
Hello webserver
Creează un folder pe calculatorul tău (îi poți alege numele) și navighează
în el. Creează un fișier cu numele server.js. Acest fișier este serverul nostru,
iar Node.js îl va rula pentru noi.
Copiază următorul cod în server.js, folosind editorul tău de text preferat.
Dacă nu ai încă unul, îți recomandăm Sublime Text):
var http = require('http');
function onRequest(request, response){

response.writeHead(200, {'Content-Type': 'text/plain'});
response.write('Hello world');
response.end();
}
http.createServer(onRequest).listen(3000);
console.log('The server is running...');
Copy
Salvează fișierul și rulează serverul în terminal folosind următoarea
comandă:
node server.js
Copy
Dacă totul a decurs bine, poți vedea mesajul: "The server is running..." și
command prompt nu mai apare din nou (deci ceva trebuie să se fi
întâmplat). Acesta-i un semn bun. :)
Deschide un browser și îndreaptă-te către http://localhost:3000/ .
Sarcină
Ce mesaj vezi dacă accesezi http://localhost:3000/ în browserul tău?
Trimite răspunsul meu

Codul serverului
Haide să vedem ce s-a întâmplat în cod.

response.end();
}
http.createServer(onRequest).listen(3000);
console.log('The server is running...');
Copy
În prima linie, am importat modulul http al lui Node.js, folosind require().
Vom avea nevoie de acesta pentru a manipula serverul (vom cunoaște
funcția require() în scurt timp).
Invocăm metoda createServer() acestui modul de la următoarea până la
ultima linie. Aceasta creează serverul nostru, care va căuta cereri de
intrare pe portul 3000.
Pentru funcția createServer(), scriem o funcție onRequest care are doi
parametri: request și response.
Pe prima linie a funcției, configurăm antetul (200 --> OK și configurăm
conținutul ca și text), afișăm Hello world și terminăm răspunsul.
+1 sfat: Mai târziu, nu va mai fi nevoie de editarea serverului la un nivel
atât de profund. Framework-urile (precum Express) se vor ocupa de
elementele de nivel redus. Pentru următoarele câteva exemple însă,
vom seta totul manual, pentru ca tu să poți înțelege mai ușor ce se
întâmplă (și astfel vei aprecia framework-urile mai mult :D).
+1 sfat: Dacă ești interesat de antetul protocolului HTTP intră aici sau
dacă vrei să știi mai multe despre codurile de status ale HTTP , iată o
listă.
Codul pentru acest pas poate fi găsit
aici: https://github.com/CodeBerrySchool/node-js-basics/tree/step-01.
Mergi mai departe dacă ai reușit să creezi serverul web.
Sarcină
Care este diferența dintre codurile de status HTTP „Not Found” și „OK” (extrage cele
două coduri)?
Crearea unui modul

În lecția precedentă, următorul cod:

Copy
„a importat” modulul http al Node.js.
Poți folosi nu numai module pre-scrise, ci poți defini și solicita module
scrise de către tine (sau alții) în codul tău. Folosirea modulelor face
mentenanța mai ușoară și poate facilita partajarea fragmentelor de cod
reutilizabile între proiecte.
Creează un fișier multiply-module.js în folderul proiectului tău (în exemplu
voi folosi acest nume, dar tu poți folosi orice nume dorești).
În fișier, definește o funcție care afișează ceva în consolă și salvează un șir
într-o variabilă. Ca un exemplu, modulul meu de înmulțire arată astfel:
function logProduct(a, b) {
console.log(a*b);
}
var moduleMessage = 'The product is shown on the console.';

Copy
+1 sfat: Dacă folosești console.log() pe server, acesta afișează în terminal în
mod implicit.
Sarcină
Dacă ai dori să afișezi pe ecran nu produsul, ci restul unei împărțiri (modulo,

modulus), cum ar arăta codul funcției logProduct (linia care conține console.log)?
module.exports
Pentru ca require() să știe ce parte a acestui fișier să importe, ar trebui să
configurezi modulul tău pentru export.
O modalitate de a face asta este folosind obiectul module.exports din
fișierul multiply-module.js. Tot ce se bazează pe acest obiect va fi disponibil
în fișierul în care îl soliciți.
Pentru modulul meu exemplu, aceasta arată astfel:
module.exports.logProduct = logProduct;
module.exports.moduleMessage = moduleMessage;
Copy
+1 sfat: Nu adăuga parantezele la sfârșitul funcției care trebuie exportată
[logProduct()] deoarece vei vrea să exporți conținutul funcției, nu rezultatul
acesteia.
În fișierul server.js, trebuie să imporți noul modul:
var multiply = require('./multiply-module');

Copy
Modulul http este un modul Node.js existent, deci ar fi putut fi solicitat
după nume. Modulul nostru poate fi referențiat după calea sa. Din
moment ce este în același folder ca server.js, îl putem referenția
astfel: ./multiply-module.js
După aceasta, poți folosi variabila multiply oriunde în codul tău. Poți utiliza
tot ce ai configurat pentru a fi exportat în module.export.
Am modificat funcția onRequest astfel:

response.write(multiply.moduleMessage);
multiply.logProduct(3, 14);
response.end();
}
Copy
Oprește-ți serverul din terminal (ctrl + c) și repornește-l ( $ node server.js).
Dacă dai refresh în browserul tău pe pagina http://localhost:3000/ codul tău
va fi rulat. În cazul meu, mesajul importat de la modul a fost afișat în
fereastra browserului, iar în terminal este afișat rezultatul calculului.
Este foarte neconvenabil să restartezi serverul la fiecare schimbare. Vom
repara asta în scurt timp.

+1 sfat: Poți opri serverul folosind ctrl + z. Dar făcând astfel, nu va fi
eliberat portul, iar tu nu vei putea să repornești serverul din nou.
+1 sfat: Nu-ți face griji în legătură cu rezultatul console.log(), care va fi afișat
de două ori în terminal. Aceasta nu este o eroare. Ne vom ocupa de asta în
scurt timp.
Un alt modul
Dacă n-ai vrea să exporți elementele unui modul unul câte unul, poți folosi
un obiect JavaScript. Pentru modulul meu, asta ar arăta astfel:
module.exports = {
logProduct: function(a, b) {
console.log(a*b);
},
moduleMessage: 'The product is shown on the console.'
}
Copy
+1 sfat: Fii atent la două puncte și la virgule când declari funcțiile în
interiorul unui obiect. Sau nu folosi funcții anonime în obiect, ci doar fă
trimitere la ele acolo.

Scrie un alt modul, care ridică un număr la o anumită puterea. Solicită-l în
fișierul server.js.
Dacă te încurci, iată codul de până
acum: https://github.com/CodeBerrySchool/node-js-basics/tree/step-02.
Sarcină
Cum afișezi rezultatul acestui calcul în consolă: 7 ridicat la puterea 3?
Crearea unui fișier HTML

Mai departe, vom configura serverul web să servească fișiere HTML în
locul răspunsului text.
Copy
Acesta este linia care ar trebui modificată.
index.html
Creează un fișier index.html în folderul proiectului tău. Adaugă un conținut
HTML simplu, precum acesta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<h1>A heading</h1>
<p>One fine paragraph</p>
</body>
</html>
Copy
•
AI1
Sistemul de fișiere
Ca prim pas, serverul ar trebui să fie capabil să ajungă la acest fișier pe propriul sistem
de fișiere.
Modulul pentru lucrul cu fișierele în Node.js se numește fs (prescurtarea de la

filesystem). Are nevoie de asta în fișierulserver.js:
var fs = require('fs');
Copy
Modifică funcția onRequest pentru a citi acest fișier. Vom folosi metoda readFile() a

modulului fs, care are nevoie de trei parametri:
1. calea
2. alte opțiuni
3. funcția callback
În acest caz, calea este ./index.html, din moment ce cele două fișiere se află în același
director.
Nu vom oferi opțiuni suplimentare acum, deci vom da null ca al doilea parametru.
Funcția callback este o funcție anonimă care este apelată când funcția readFile() s-a
terminat. Aici se vor întâmpla lucrurilele grozave de această dată.

fs.readFile('./index.html', null, function(error, data){
if (error) {
response.writeHead(404);
response.write('File not found');
} else {
response.write(data);
}
response.end();
});
}
Copy
Haide să vedem ce se întâmplă în cod.
Funcția anonimă are nevoie de doi parametri (error, data).
În prima ramură, verificăm dacă nu există vreo eroare [if (error) {}]. Dacă există
(avem parametrul error), schimbăm codul stării pentru antetul HTML la 404 (file not
found) (fișierul nu a fost găsit) și înștiințăm utilizatorul că fișierul nu a fost găsit.
Dacă nu există nicio eroare [ramura else {}], răspundem cu al doilea parametru (data).
+1 sfat: Funcția response.end() ar trebui să intre și în funcția callback. Dacă nu este

acolo, ar putea fi executată înainte de executarea lui readFile()(amintește-ți că Node.js
este asincron).
Repornește-ți serverul și vezi ce s-a întâmplat.
Sarcină
Care este răspunsul serverului dacă schimbi './index.html' cu './index2.html'?
Codarea HTML
Datele au sosit în browser, însă ca text brut. Aceasta nu este o eroare, din
moment ce noi i-am solicitat să se comporte astfel:
response.writeHead(200, {'Content-Type': 'text/plain'})

Copy
Modifică linia să interpreteze datele ca HTML:
response.writeHead(200, {'Content-Type': 'text/html'})

Copy
Repornește serverul. Totul ar trebui să funcționeze acum.

Codul folosit pentru a servi fișierele statice HTML poate fi găsit
aici: https://github.com/CodeBerrySchool/node-js-basics/tree/step-03.
Felicitări!
Tocmai ai creat un server web funcțional care folosește module importate
și servește fișiere HTML statice în doar câteva minute.
Frumos, nu-i așa? :)

Practicarea Notiunilor de Baza

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Practicarea Notiunilor de Baza

Încărcat de

Drepturi de autor:

Formate disponibile

Practica prin desen

Pentru a înțelege tot ce ai învățat până acum, ar trebui să exersezi mult.

Am creat acest proiect tocmai pentru a te ajuta cu asta.

avea nevoie de cunoștințe cu care ești deja familiarizat.

Notă: Ca de obicei, nu există doar o singură soluție bună pentru

oricare dintre problemele prezentate aici. Deși poți rezolva aceste

sarcini doar pe baza proiectelor anterioare CodeBerry, ai putea (și te

încurajez cu căldură) să folosești mereu informațiile găsite pe internet.

Desenarea este un instrument excepțional pentru aceasta, deoarece oferă

un feedback imediat cu privire la ce anume face codul tău.

Pentru această sesiune de practică vom folosi elementul canvas. În această

fost realizat folosind elementul canvas și JavaScript).

Dacă nu îți reușește ceva de prima dată, nu te da bătut. Încercă să modifici

poți desena folosind JavaScript.

Codul HTML necesar este foarte simplu:

<canvas id="myCanvas" width="450" height="350"></canvas>

Un id va fi necesar mai târziu pentru a putea să te referi la element

Lățimea și înălțimea pot fi modificate în funcție de necesităţile tale.

<canvas id="myCanvas" width="450" height="350"

De asemenea, dimensiunile și stilurile pot fi pe o filă CSS separată.

Elementul corespunzător selectat de către JavaScript:

var canvas = document.getElementById('myCanvas');

Un obiect de desenare este inițiat pe:

var context = canvas.getContext('2d');

După aceea, poți desena pe această variabilă context. De exemplu, un

Ramifică acest JSBin și schimbă numerele.

Acum știi cum să desenezi dreptunghiuri.

Funcția fillRect() desenează un dreptunghi și îl umple, utilizând culoarea

activă (cea implicită e negru).

Funcția are nevoie de patru argumente: x, y, width, height.

Coordonatele x și y definesc colțul din stânga sus. width și height reprezintă

dimensiunile exprimate în pixeli.

Ramifică acest JSBin și modifică numerele pentru a desena un pătrat

negru exact în mijlocul lui canvas.

Este mult mai amuzant să desenezi folosind culori.

Variabila fillStyle poate fi schimbată pentru a se referi la orice culoare.

După aceea, totul va fi umplut folosind respectiva culoare.

fillRect() este o funcție și trebuie să îi furnizezi argumentele între paranteze

când o invoci. fillStyle este o variabilă și îi poți atribui o nouă valoare prin

utilizarea semnului egal.

Lui fillStyle îi pot fi atribuite orice culori CSS ("gold", "#C74F78", "rgb(199,

Desenează un pătrat portocaliu în JSBin.

Funcția moveTo(x,y) se mută la o coordonată („cu creionul în sus”).

Funcția lineTo(x,y) desenează o linie dreaptă de la punctul de pornire până

aplici o metodă „cerneală”, precum funcția stroke() sau fill().

Acest cod desenează o linie de la (55;70) la (150;100) și îi aplică o linie

Funcția beginPath() nu pare să facă nimic special la acest moment. Mai

pe o tablă goală. Din acest motiv, este o practică bună să

folosești beginPath() în codul tău încă de la început.

Dacă dorești să aplici o culoare lui stroke(), trebuie să modifici valoarea

Desenează diagonala începând din partea stângă jos și terminând în colțul

din partea dreaptă sus al canvas.

Lățimea și înălțimea lui canvas pot fi folosite în calcule fără să le știi valorile

var canvas = document.getElementById("myCanvas");

var canvasWidth = canvas.width;

Desenează un dreptunghi care acoperă sfertul din partea dreaptă de jos a

lui canvas. Schimbă dimensiunea lui canvas din panoul HTML sau CSS.

Dreptunghiul ar trebui să umple același sfert fără a fi nevoie să se schimbe

ceva în panoul JS.

1.Desenează un pătrat [fillRect()].

2.Umple-l cu verde [fillStyle].

3.Deplasează-l astfel încât să se afle în colțul din partea dreaptă jos al

lui canvas, la 10 pixeli distanță față de margini.