Javascript notiuni generale
Ce este Javascript?
JavaScript este un limbaj de programare care îti permite sa implementezi lucruri complexe pe paginile web si sa modifici comportamentul acestora — de fiecare data când o pagina web face mai mult decât sa afiseze informatii statice — afisând actualizari de continut în timp util sau harti interactive, grafice animate 2D/3D, video, etc. — JavaScript este implicat.
Iata un exemplu simplu de conlucrare a celor trei tehnologii de baza:
Este cel de-al treilea strat de tehnologii web standard. JavaScript este un limbaj de scripting care îti permite sa creezi continut dinamic actualizat, de a controla multimedia, de a anima imagini si aproape orice altceva.
Javascript este un limbaj destul de compact, dar foarte flexibil. Dezvoltatorii au scris, o mare varietate de instrumente, pe baza acestui limbaj, deblocind o serie intreaga de functionalitati suplimentare, cu un efort minim.
Aceste functionalitati includ:
- Interfete de programare a aplicatiilor. Interfata de programare a aplicatiilor (API) este un set de standarde de programare si instructiuni care permit unor sisteme sau componente de software să interacționeze fără probleme, facilitând schimbul de date. API-urile încorporate în browserele web, ofera funcționalitate precum crearea dinamică a HTML-ului și setarea stilurilor CSS, colectarea și manipularea unui flux video de pe camera web a utilizatorului sau generarea de grafice 3D și mostre audio.
- API-uri ale unor terti - Permit dezvoltatorilor să încorporeze funcționalități pe site-urile lor de la alți furnizori de conținut, precum Twitter sau Facebook.
- Framework-uri si librarii de la terți - Puteți aplica acestea pe HTML, pentru a crea rapid site-uri și aplicații.
Deoarece acest articol, este doar o introducere in limbajul JavaScript, nu vom aprofunda în această etapă, diferențele dintre limbajul JavaScript și diferitele instrumente enumerate mai sus.
Mai jos voi prezenta câteva aspecte ale limbajului și vă veți juca și cu câteva funcții API ale browserului. Let's have some fun!
Un simplu exemplu "Hello World"
Javascript este cu adevarat o tehnologie fantastica si pe masura ce veti invata acest limbaj, veti putea sa creati site-uri extrem de interesante pentru utilizatori.
Totusi, pentru a deveni confortabil cu Javascript, nu este atit de usor, este nevoie de multe, multe ore de practica. Daca vedeti tutoriale cu titluri precum: "Invata Javascript in doar o ora" sau "Javascript - de la incepator la avansat in doar trei zile", sa stiti ca sunt doar glume foarte proaste.
Pentru a deveni expert in Javascript, este nevoie de ani de zile de practica.
Pentru început, vă voi arăta cum să adăugați cod JavaScript in pagina dvs., creând un exemplu clasic „Hello world!”.
Daca ati urmat instructiunile de pina acum, atunci aveti aceasta structura deja creata:
- Pentru inceput, creati un fisier cu numele main.js, in folderul cu numele script.
- Apoi, in index.html introduceti urmatoarea linie, chiar inainte de inchiderea etichetei <body>. Este calea catre fisierul main.js:
<script src="script/main.js"></script>
- Acum, adaugati urmatorul cod in fisierul main.js:
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
- In sfirsit, aveti grija sa, salvati fisierele si incarcati index.html in browser. Ar trebui sa aveti acum, o pagina la fel ca cea din exemplul de mai jos:
☞ Motivul pentru care am pus elementul <script> în partea inferioară a fișierului HTML este acela că HTML este încărcat de browser în ordinea în care apare. Dacă JavaScript este încărcat mai întâi și se presupune că ar afecta HTML-ul de sub acesta, s-ar putea să nu funcționeze, deoarece JavaScript ar fi încărcat înainte de HTML pe care se presupune că îl va modifica. Prin urmare, inserarea JavaScript în partea de jos a paginii HTML, este adesea cea mai bună strategie.
Ce se intimpla de fapt in exemplul de mai sus?
Textul titlului a fost acum schimbat în „Hello world!” folosind JavaScript. Am făcut acest lucru folosind mai întâi o funcție numită querySelector () pentru a prelua titlul și a-l stoca într-o variabilă numită myHeading. Acest lucru este foarte similar cu ceea ce am făcut cu ajutorul selectorilor CSS. Când doriți să faceți ceva cu un element, trebuie să îl selectați mai întâi.
Ulterior, am setat valoarea proprietății textContent, a variabilei myHeading (care reprezintă conținutul elementului H1) la „Hello world!”.
☞ Ambele caracteristici pe care le-am utilizat mai sus sunt părți ale API-ului - Document Object Model (DOM), care vă permite să manipulați elemente din documente.
Scurta introducere in limbajul Javascript
Să explicăm câteva dintre caracteristicile de bază ale limbajului JavaScript, pentru a vă oferi o mai bună înțelegere a modului în care funcționează totul. Este demn de remarcat faptul că aceste caracteristici sunt comune tuturor limbajelor de programare, așa că, dacă stăpânești aceste elemente fundamentale, vei putea sa creezi aproape orice.
Variabile Javascript
Variabilele sunt containere în care puteți stoca valori sau expresii. O variabilă poate avea un nume scurt, de exemplu x, sau mai descriptiv, de exemplu myHeading.
Începeți prin a declara o variabilă cu var(mai puțin recomandat) sau cu let, urmat de orice nume pe care doriți să-l utilizati:
let numeVariabila;
☞ Punctul si virgula de la sfârșitul unei linii indică unde se încheie o instrucțiune si este obligatoriu numai atunci când trebuie să separați instrucțiuni pe o singură linie. Cu toate acestea, se consideră că este o practică bună să le înscrieți la sfârșitul fiecărei instrucțiuni.
JavaScript este case-sensitive - numeVariabila este o variabilă diferită de numevariabila.
După declararea unei variabile, îi puteți da o valoare:
numeVariabila = 'Vasile';
Putem face ambele operații pe aceeași linie:
let numeVariabila = 'Vasile';
Puteți prelua valoarea doar apelând variabila după nume:
numeVariabila;
După ce dați unei variabile o valoare, puteți alege mai târziu să o modificați:
let numeVariabila = 'Vasile';
numeVariabila = 'Maricica';
Rețineți că variabilele pot avea valori care au diferite tipuri de date:
| Variabila | Explicatie | Exemplu |
|---|---|---|
| String | Este o secvență de text cunoscută sub numele de șir. Pentru a specifica, că valoarea este un șir, trebuie să o adăugați în ghilimele. | let numeVariabila = 'Vasile'; |
| Number | Un număr. Numerele nu au ghilimele în jurul lor. | let numeVariabila = 12; |
| Boolean | O valoare adevărată / falsă. Cuvintele adevărate și false sunt cuvinte cheie speciale în JS și nu au nevoie de ghilimele. | let numeVariabila = true; |
| Array | O structură care vă permite să stocați mai multe valori într-o singură referință. | let numeVariabila = [1,'Vasile','Maricica',10]; Ne referim la fiecare membru din array astfel: numeVariabila[0], numeVariabila[1], etc. |
| Object | Practic, orice. Totul în JavaScript este un obiect și poate fi stocat într-o variabilă. Ține cont de acest lucru în timp ce înveți. | let numeVariabila = document.querySelector('h1'); Toate exemplele de mai sus, de asemenea. |
De ce avem nevoie de variabile? Ei bine, variabilele sunt necesare, pentru a face lucrurile mult mai interesante în programare. Dacă valorile nu se pot schimba, atunci nu puteți face nimic dinamic, cum ar fi personalizarea unui mesaj de salut sau schimbarea imaginii afișate într-o galerie de imagini.
Comentariile
Comentariile sunt, în esență, scurte fragmente de text care pot fi adăugate în cod si care sunt ignorate de browser. Puteți introduce comentarii în codul JavaScript, la fel cum puteți si în CSS sau HTML:
/*
Eu sunt un exemplu de comentariu
*/
Dacă in comentariul dvs. nu sunt ruperi de linie, este mai ușor să-l scrieti astfel:
// Acesta este un comentariu
Operatorii Javascript
Un operator este un simbol matematic care produce un rezultat pe baza a două valori (sau variabile). Operatorii se folosesc pentru a manipula, combina si modifica datele dintr-un program sau script. În tabelul următor, puteți vedea unii dintre cei mai simpli operatori, împreună cu câteva exemple de încercat în consola JavaScript.
| Operator | Explicatie | Simbol(uri) | Exemplu |
|---|---|---|---|
| Adunare | Folosit pentru a aduna doua numere sau pentru a lipi doua siruri impreuna. | + | 6 + 9; "Hello " + "world!"; |
| Scadere, inmultire, impartire | Acestea, fac ceea ce te-ai aștepta să facă în matematica de bază. | -, *, / | 9 - 3; 8 * 2; // inmultirea in JS este un asterisk 9 / 3; |
| Atribuire | Ați văzut deja acest lucru: atribuie o valoare unei variabile. | = | let numeVariabila = 'Vasile'; |
| Egalitate | Face un test pentru a vedea dacă două valori sunt egale una cu cealaltă și returnează un rezultat adevărat / fals (boolean). | === | let numeVariabila = 3; numeVariabila === 4; |
| Not, Inegalitate ca valoare sau ca tip de date. | Returnează valoarea logic opusă a ceea ce precedă; transformă un adevar într-un fals, etc. Când este utilizat alături de operatorul Egalitate, operatorul de negație testează dacă două valori nu sunt egale. | !, !== | Pentru „Not”, expresia de bază este adevărată, dar comparația returnează fals, deoarece o
negam(anulam): let numeVariabila = 3; !(numeVariabila === 3); "Does-not-equal" ofera practic acelasi rezultat cu sintaxa diferita. Aici testam daca "numeVariabila NU este egala cu 3". Se returneaza "false" pentru ca "numeVariabila" ESTE egal cu 3: let numeVariabila = 3; numeVariabila !== 3; |
Exista multi alti operatori, dar pentru moment este suficient.
Instructiunile conditionale
Adesea, când scrieţi cod JS, trebuie să realizaţi operaţii diferite în funcţie de decizii diferite. Pentru a realiza acest lucru, folosiţi în cod instrucţiunile condiţionale.
Condiționalele sunt structuri de cod care vă permit să testați dacă o expresie returnează adevărat sau nu, rulând cod alternativ dezvăluit de rezultatul său. O formă foarte frecventă de condiționări este afirmația if ... else. De exemplu:
let placintaMere = 'scortisoara';
if(placintaMere === 'scortisoara') {
alert('Ura, imi place scortisoara in placinta cu mere!');
} else {
alert('Ahhh, dar scortisoara imi place mult...');
}
Expresia din interiorul if(...) este testul - aceasta folosește operatorul de identitate (așa cum este descris mai sus) pentru a compara variabila placintaMere cu string-ul scortisoara, pentru a vedea dacă cele două sunt egale. Dacă această comparație este adevărata, se execută primul bloc de cod, iar dacă nu este adevărată, primul bloc este omis și al doilea bloc de cod, după instrucțiunea else, este executat.
Functii Javascript
Funcțiile sunt un mod de "impachetare" a unei funcționalitati pe care doriți să o reutilizați. O funcţie va fi executată când are loc un eveniment sau când este apelată. Când aveți nevoie de o anumita functionalitate(procedură) puteți apela o funcție, cu numele funcției, în loc să rescrieți de fiecare dată întregul cod. Ați văzut deja unele utilizări ale funcțiilor mai sus, de exemplu:
let myHeading = document.querySelector('h1');
alert('hello!');
Aceste funcții, document.querySelector și alert, sunt încorporate în browser pentru a le folosi oricând doriți.
Dacă vedeți ceva care arată ca un nume de variabila, dar are paranteze - () - după nume, este probabil o funcție. Funcțiile au adesea argumente - biți de date, de care au nevoie pentru a-și face treaba. Acestea intră în paranteze, separate prin virgule dacă există mai multe argumente.
De exemplu, funcția alert () face ca o fereastră pop-up să apară în fereastra browserului, dar trebuie să îi dăm un șir ca argument, pentru a spune funcției ce trebuie să scrie în caseta pop-up.
Vestea bună este că vă puteți defini propriile funcții - în exemplul următor vom vedea o funcție simplă care ia două numere ca argumente și le înmulțește:
function multiply(num1,num2) {
let result = num1 * num2;
return result;
}
Încercați să rulați funcția de mai sus în consolă, apoi testați cu mai multe argumente. De exemplu:
multiply(4, 6);
multiply(25, 25);
multiply(1.5, 3);
☞ Declarația return spune browserului să returneze variabila rezultatului din funcție, astfel încât să fie disponibilă pentru utilizare. Acest lucru este necesar deoarece variabilele definite în interiorul funcțiilor sunt disponibile numai în interiorul acestor funcții. Instrucţiunea return este folosită pentru a specifica valoarea returnată de o funcţie şi trebuie inclusă în orice funcţie care returnează o valoare.
Evenimentele Javascript
Interactivitatea reală pe un site web are nevoie de evenimente. Acestea sunt structuri de cod care ascultă lucrurile care se întâmplă în browser și rulează codul ca răspuns.
Utilizând JavaScript, putem crea pagini web dinamice. Fiecare element dintr-o pagină web are un anumit număr de evenimente care pot declanşa un script. Spre exemplu, putem utiliza evenimentul onClick al unui buton pentru a indica ce funcţie va fi executată dacă utilizatorul acţionează butonul respectiv. Evenimentele sunt definite în tagurile HTML.
Exemple de evenimente:
- un click de mouse;
- incărcarea unei pagini web sau a unei imagini;
- mişcarea mouse-ului peste o anumită zonă din pagina web;
- selectarea unui câmp de intrare dintr-un formular HTML;
- apăsarea unei taste.
☞ Evenimentele sunt în mod normal asociate cu funcţii, care nu vor fi executate înainte de a avea loc evenimentul.
Cel mai evident exemplu, este evenimentul de clic, care este executat de browser atunci când faceți click pe ceva cu mouse-ul. Pentru a demonstra acest lucru, introduceți următorul cod în consola, apasati enter, apoi faceți clic pe pagina web curentă(in afara consolei):
document.querySelector('html').onclick = function() {
alert('Auu! Încetează cu click-urile astea!');
}
Există multe moduri de a atașa un eveniment la un element. Aici selectăm elementul <html>, setându-i proprietatea onclick egală cu o funcție anonimă (adică fără nume), care conține codul pe care dorim să-l rulam cind are loc evenimentul de clic.
De exemplu,
document.querySelector('html').onclick = function() {};
este echivalent cu,
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};
doar ca este mai scurt.
Sa aducem imbunatatiri site-ului nostru
Acum ca am invatat câteva elemente de bază JavaScript, să adăugăm câteva funcții interesante pe site-ul nostru, pentru a-l face mai interactiv.
Sa schimbam imaginea
Vom adăuga o imagine suplimentară site-ului nostru folosind alte DOM-API functionalitati si cod JavaScript, pentru a comuta între cele două atunci când facem clic pe imagine.
- În primul rând, găsiți o altă imagine pe care doriți să o afisați pe site. Asigurați-vă că are aceeași dimensiune cu prima imagine sau cât mai aproape posibil.
- Salvati imaginea in folderul imagini.
- Accesati fisierul main.js, din folderul script, stergeti exemplul Hello world! existent acolo, copiati codul de mai jos, plasati-l in fisier, schimbati imagine-2.extensie cu numele imaginii pe care o veti utiliza si salvati.
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'imagini/imagine-1.extensie') {
myImage.setAttribute ('src','imagini/imagine-2.extensie');
} else {
myImage.setAttribute ('src','imagini/imagine-2.extensie');
}
}
- Incărcați index.html în browser. Acum, când faceți clic pe imagine, ar trebui să se schimbe cu cealaltă imagine.
Sa vedem ce se intimpla in exemplul de mai sus. Stocam o referință a elementului <img> in variabila myImage. În continuare, facem ca proprietatea de gestionare a evenimentelor onclick să fie egală cu o funcție fără nume (o funcție „anonimă”). Acum, de fiecare dată când se face clic pe acest element, se petrec urmatoarele actiuni:
- preluam valoarea atributului src al imaginii;
- utilizam o instructiune condiționala, pentru a verifica dacă valoarea src, este
egală, cu calea către imaginea originală:
- daca este, schimbam valoarea atributului src, cu calea catre a doua imagine, si fortam incarcarea acesteia in interiorul elementului <img>;
- daca nu este(ceea ce înseamnă că trebuie să se fi schimbat deja), valoarea src se schimbă la calea imaginii originale, la starea inițială.
Să adăugam unui mesaj personalizat de bun venit
În continuare, vom adăuga un alt fragment de cod, schimbând titlul paginii într-un mesaj personalizat de bun venit, atunci când utilizatorul ajunge prima dată pe site. Acest mesaj de bun venit va persista, dacă utilizatorul va părăsi site-ul și va reveni ulterior - îl vom salva folosind API-ul Web Storage. De asemenea, vom include o opțiune de a schimba utilizatorul și, prin urmare, mesajul de bun venit oricând este necesar.
- In index.html, adaugati urmatoarea linie <button>Schimba utilizatorul</button> chiar inainte de elementul <script>:
<button>Schimba utilizatorul</button>
<script src="main.js"></script>
</body>
</html>
- În main.js, plasați codul următor în partea de jos a fișierului, exact așa cum este scris - acesta face referințe la noul buton și la titlu, stocându-le în variabile:
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
- Adăugați acum următoarea funcție pentru a seta salutul personalizat - acest lucru nu va face încă nimic, dar vom rezolva imediat:
function setUserName() {
let myName = prompt('Introduceti numele dvs.');
localStorage.setItem('name', myName);
myHeading.textContent = 'Bine ai venit, ' + myName;
}
Această funcție conține o alta funcție numita prompt (), care creează o casetă de dialog, cam ca o alertă. Cu toate acestea, prompt () solicită utilizatorului să introducă unele date, stocându-le într-o variabilă după ce utilizatorul apasă OK.
În acest caz, solicităm utilizatorului să-și înscrie numele. În continuare, apelăm la un API numit localStorage, care ne permite să stocăm date în browser și să le recuperam ulterior. Folosim funcția se stocare locala localStorage.setItem pentru a crea și stoca un element de date numit „nume”, setându-i valoarea pe variabila myName care conține datele introduse de utilizator. În cele din urmă, setăm textContent pentru titlu la un șir(string), plus numele recent stocat al utilizatorului.
- Apoi, adăugam blocul if...else - pe care l-am putea numi, cod de inițializare, deoarece structureaza aplicația atunci când se încarcă prima dată:
if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.textContent = 'Bine ai venit, ' + storedName;
}
Blocul de mai sus folosește mai întâi operatorul de negație (NOT, reprezentat de !), pentru a verifica dacă datele de nume există. Dacă nu, funcția setUserName () este rulată pentru a o crea. Dacă există (adică utilizatorul a setat-o în timpul unei vizite anterioare), preluăm numele stocat folosind getItem () și setăm textContent pentru titlu la un șir, plus numele utilizatorului, așa cum am făcut cu setUserName ().
- În cele din urmă, setam instrumentul de gestionare a evenimentelor onclick pe butonul de mai jos. Când faceți clic, funcția setUserName () este rulată. Acest lucru permite utilizatorului să stabilească un nou nume, atunci când dorește, prin apăsarea butonului:
myButton.onclick = function() {
setUserName();
}
Acum, când vizitați prima dată pagina, vă va cere numele de utilizator, apoi vă va oferi un mesaj personalizat. Puteți schimba numele oricând doriți, apăsând butonul. Ca un plus, deoarece numele este stocat în localStorage, acesta persistă după închiderea site-ului, păstrând acolo mesajul personalizat atunci când deschideți pagina din nou!
Un nume de utilizator nul?
Când încarcați pagina și utilizați caseta de dialog care vă solicită să introduceți numele de utilizator, încercați să apăsați butonul anulare(cancel). Ar trebui să vedeti titlul „Bine ai venit, null”. Acest lucru se datorează faptului că atunci când anulați introducerea numelui, valoarea este setată ca nulă, o valoare specială în JavaScript, care se referă practic, la absența unei valori.
Încercați, de asemenea, doar să apăsați OK fără să introduceți niciun nume - ar trebui să vedeți cu un titlu care scrie „Bine ai venit”, din motive destul de evidente.
Dacă doriți să evitați aceste probleme, puteți verifica dacă utilizatorul nu a introdus null sau un nume necompletat prin actualizarea funcției setUserName () la aceasta:
function setUserName() {
let myName = prompt('Introduceti numele dvs.');
if(!myName || myName === null) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Bine ai venit, ' + myName;
}
}
Explicatia este ca dacă - myName nu are nicio valoare sau valoarea sa este nulă, rulați setUserName () din nou. Dacă are o valoare (dacă afirmațiile de mai sus nu sunt adevărate), atunci stocam valoarea în localStorage și o setam ca text, parte din textul titlului.
Blocul de cod complet, ar trebui sa arate ca cel de mai jos:
// Schimbarea imaginii
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === '../imagini/star.jpg') {
myImage.setAttribute ('src','../imagini/star1.png');
} else {
myImage.setAttribute ('src','../imagini/star1.png');
}
}
// Mesaj personalizat
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
function setUserName() {
let myName = prompt('Introduceti numele dvs.');
if(!myName || myName === null) {
setUserName();
} else {
localStorage.setItem('name', myName);
myHeading.innerHTML = 'Bine ai venit, ' + myName;
}
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.innerHTML = 'Bine ai venit, ' + storedName;
}
myButton.onclick = function() {
setUserName();
}
Dacă ați respectat toate instrucțiunile din acest articol, ar trebui să aveți o pagină care arată așa:
Am sa inchei aceasta sectiune, cu o imagine foarte sugestiva, cu privire la utilizarea abuziva, a limbajului Javascript.
