Cauta rapid aici ↑

JavaScript -- Primul script

Asa cum va spuneam, toate instructiunile JavaScript pe care vrem sa le scriem in documentul HTML trebuiesc scrise intre tag-ul pereche <script></script>. Pentru afisarea unui text si data la care acesta este afisat in documentul HTML cu ajutorul limbajului JavaScript si mai apoi sa schimbam un text cu altul dintr-un paragraf vom folosi urmatoarele metode.

  • document.write()
  • document.getElementById()

Metoda document.write()

Rolul acestei metode este de a afisa ceva in browser. Fie ca este vorba de un text sau rezultatul unei functii (despre care vom vorbi mai tarziu), aceasta metoda o va afisa.

Putem face mai mult de atat in acest limbaj iar urmatorul exemplu va inlocui textul dintr-un paragraf cu cel care se afla in scriptul nostru. Pentru a realiza acest lucru va trebui sa ne amintim ca tag-urile HTML au in componenta lor atribute generale. In exemplul nostru vom folosi atributul ID (ce este un numar de identificare unic in documentul HTML curent) pe elementul ce urmeaza sa-l afectam si caruia putem sa ii dam orice valoare text ne dorim. Mai departe ne vom folosi de urmatoarea metoda.

Metoda document.getElementById()

Aceasta metoda este una dintre cele mai populare si prin aceasta putem face foarte multe. In exemplul urmator o vom folosi pentru a apela elementul nostru prin numarul de identificare unic reprezentat prin atributul ID si caruia ii vom da valoarea schimba pentru ca browserul sa stie ca despre el este vorba in scriptul nostru.

Putem interpreta in acest mod metoda noastra folosita in script. In document, caut elementul cu id-ul "schimba" si caruia ii inlocuiesc informatia actuala dintre tag-urile pereche cu textul "Tutorial JavaScript".

Alte metode de selectare a elementelor:

  • document.getElementByClassName
  • document.getElementByName
  • document.getElementByTagName
  • document.images
  • document.links
  • document.forms.elements[0] // cifra reprezinta pozitia elementului in formular

Dupa exemplul de mai sus nu ne este greu sa ne dam seama ce fac aceste trei metode, insa pentru ca vreau sa fiu sigur ca a-ti inteles, va voi explica. Prima metoda selecteaza toate elementele declarate dupa o anumita clasa (stil CSS). A doua metoda selecteaza toate tag-urile ce au in componenta atributul name (in cazul elementelor unui formular). A treia metoda selecteaza toate elementele dupa numele tag-ului respectiv.

IMPORTANT

In JavaScript avem posibilitatea sa selectam doar un anume element din mai multe (ex. al 4-lea paragraf) cu ajutorul metodelor de mai sus si pentru asta va trebui sa adaugam in metoda noastra dupa parantezele rotunde alte doua paranteze drepte ce au in componenta lor cifra 3 (in cazul nostru al 4-lea paragraf) si asta pentru ca numaratoarea incepe de la cifra zero [0] si nu unu [1].

Asa cum se vede in exemplul nostru, metoda noastra are in componenta proprietatea innerHTML (legata prin caracterul punct) ceea ce inseamna ca imediat ce browserul a gasit elementul cu id-ul respectiv, atunci sa inlocuiasca textul ce se afla in interiorul elementului HTML cu cel din valoarea proprietatii innerHTML.

Mai exista multe alte proprietatii care fac lucruri interesante si care dau un plus de eleganta paginilor noastre, insa pentru moment este bine sa va familiarizati cu aceasta proprietate.

Caracterul special punct '.'

In momentul cand ne apucam sa scriem cod JavaScript, de cele mai multe ori facem ca browserul sa parcurga DOM -ul paginii web. Toate elementele DOM -ului parcurse de catre browser trebuiesc legate intre ele de caracterul special punct ( . ). In acest mod putem construi metode cu rol exact de a parcurge acest DOM. Analizand metoda document.write() vom intelege ca browserul trebuie sa scrie in document-ul HTML ceea ce se afla in interiorul parantezelor.

Erorile de sintaxa si consola browserului

Pe masura ce vom scrie mai multe linii de cod, cu siguranta ne vom confrunta cu situatia in care un script nu va putea functiona. In acel moment trebuie sa ne uitam inca odata pe cod si sa vedem daca sunt greseli de sintaxa. Daca acestea nu sunt vom merge in fereastra browserului si vom vedea ce erori ne sunt afisate in consola browserului. Browserele au ca setare de baza sa nu afisere erorile din JavaScript in fereastra acestuia pentru ca nu arata bine. Script-urile daca contin erori nu vor functiona si asa cum am spus erorile vor fi afisate in consola browserului plus ca ne vor fi afisate si pe ce linie de cod se afla respectiva eroare.

In majoritatea browserelor consola o putem gasi in aceste doua moduri.

  • Setari / Developer / Web console
  • Click dreapta / Inspect element / Click pe butonul Console

Nota: In JavaScript multe lucruri pot sa nu functioneze si incepand de la probleme de sintaxa si pana la probleme de logica. Prima data verificati daca exista erori de sintaxa, daca a-ti uitat sa inchideti o paranteza, o acolada, un punct si virgula trebuia pusa undeva etc. si apoi verificati daca sunt probleme de logica script-ului.

Comentarii

La fel ca in limbajele HTML si CSS si limbajul JavaScript ofera posibilitatea de a comenta un rand sau un anumit bloc de cod sau sa scriem un mic comentariu cu ce face urmatorul cod. Daca sunteti familiarizat cu tipurile de comentarii in limbajul CSS, atunci este bine sa stiti ca si in JavaScript tipurile de comentarii sunt la fel. Pentru a comenta pe un singur rand vom folosi dublu slash ( // ) iar pentru a comenta pe mai multe randuri vom folosi la inceputul primului rand un slash si caracterul asterisk ( /* ) iar ultimul rand care va fi comentat vom folosi aceeasi formula insa invers si anume caracterul asterisk si apoi un slash ( */ ).