JAVASCRIPT
este un limbaj de programare care face posibil ca paginile web sa fie mai interactive. Este mai des recunoscut ca facand parte din categoria "Scripting Languages". A fost lansat sub numele de "LiveScript", schimbarea numelui in JavaScript fiind o chestie legata de strategia de marketing.
Scripturile Javascript sunt introduse in pagina HTML si sunt interpretate si executate de browser. Javascript poate fi considerat o unealta foarte buna daca doriti sa controlati continutul paginilor in functie de data, ora, sistemul de operare sau browserul utilizatorilor, sa faceti site-uri interactive, care sa comunice cu vizitatorii, site-uri dinamice, sa validati datele primite din formulare, dar nu numai atat, acestea fiind doar cateva din posibilitatile pe care le ofera acest limbaj.
Pentru a putea sa parcurgeti acest tutorial si sa si intelegeti ceva din el trebuie sa aveti cunostinte de HTML si cateva notiuni generale legate de structura limbajelor de programare.
Nu voi mai pierde timpul cu asta si o sa incep cu cateva exercitii simple care va vor ajuta sa intelegeti aceste lucruri elementare.
Dupa cum am spus mai sus, javascript poate fi introdus in interiorul paginilor html. Pentru a fi interpretat de catre browser trebuie sa marcam codul astfel:
<script type="text/javascript">
Codul javascript
</script>
O alta metoda pentru a folosi scripturile javascript, metoda pe care o recomand si o consider mai practica, este aceea de utilizare a scripturilor externe. Cei care folosesc CSS sunt obisnuiti cu folosirea stylesheet-urilor externe. Este aproximativ acelasi lucru: se adreseaza fisierul extern in interiorul etichetei <HEAD> a fisierului html si apoi o modificare a acestui script se propaga in intreg documentul.
Iata cum adresam un fisier JS extern (fisierul extern este exemplu.js):
<html>
<head>
<title>
Exemplu
</title>
<script type="text/javascript" src=exemplu.js>
</script>
</head>
<body>
Continut
</body>
</html>
In continuare voi incerca sa afisez in browser un text folosind javascript.
Exemplul 1
<html>
<head>
<title> exemplu </title>
</head>
<body>
<h1> Text HTML </h1>
<h1> <script type="text/javascript">
document.write("Text JAVASCRIPT");
</script>
</h1>
</body>
</html>
Exemplu
Explicatii suplimentare:
document.write("text Javascript");
document este un obiect iar write() este o metoda.
Un obiect poate contine alte obiecte care pot fi considerate proprietati ale acestuia. Spre exemplu document contine alte obiecte, de exemplu title . In javascript acest obiect se identifica cu: document.title. Alt exemplu ar fi obiectul submit care este intr-un formular din pagina. Acesta ar fi adresat document.form.submit.
Iata cateva exemple de obiecte HTML si corespondentele in JavaScript:
Obiectul
Tag-ul HTML
Coresp. JavaScript
Pagina Web
<body> .... </body>
document
Formular HTML
<form name="formular">
... </form>
document.formular
Buton
<INPUT TYPE="button" name="buton">
document.formular.buton
Imagine
<IMG name="imagine">
document.imagine
write() este o metoda. O metoda ne face sa ne gandim la actiune, au efect asupra obiectelor. Metodele au tot timpul paranteze ( ). O sa mai intalnim in tutorial metode si obiecte si atuci o sa le intelegeti mai bine rolul.
S-a folosim si un fisier extern (exemplu2.js)
Fisierl HTML are codul de mai jos
<html>
<head>
<title>exemplu2</title>
<script type="text/javascript" src="exemplu2.js">
</script>
</head>
<body>
<h1> Text HTML </h1>
<h1 id="text1"> <!-- aplicam un id pe care-l vom defini in JS -->
</h1>
</body>
</html>
Exemplu
Am adresat fisiserul extern javascript in zona <HEAD> a documentului HTML si am atribuit marcajului <h1> id-ul "text1". Un ID javascript functioneaza ca un ID in CSS: poate fi folosit o singura data intr-o pagina. Iata si codul din exemplu2.js :
window.onload = scrieText;
function scrieText() {
document.getElementById("text1").innerHTML = "Text JavaScript din fisier extern";
}
Ce face acest script:
- dupa ce termina de incarcat fereastra executa functia "scrieText" (window.onload = scrieText;)
- pasul urmator este definirea functie scrieText(). Aceasta se face intre acolade ({ }).Aceasta functie cauta dupa ID-ul "text1" in documentul HTML si unde il gaseste inlocuieste continutul tagului respectiv cu textul pe care l-am introdus in ghilimele.
COMENTARII IN FISIERELE.
Pentru a face comentarii care sa nu fie afisate de browser, cu scopul de a explica codul pentru altii sau pentru a lasa marcaje care sa-ti aduca aminte anumite lucruri despre script, ai la dispozitie doua modalitati:
- pentru comentarii pe o singura linie se foloseste marcajul //:
// comentariu pe o singura linie (daca treceti pe linia urmatoare va fi interpretat de browser si va afisa o eroare)
- pentru comentarii pe mai multe linii:
/*
comentariu 1
comentariu 2
comentarii pe mai multe randuri, tot ce se afla in interiorul acestor marcaje este ignorat
*/
Din pacate, inca sunt folosite browsere care nu suporta JavaScript. Pentru a-i avertiza si pe acestia ca browserul lor nu suporta JavaScript folosit tag-ul <noscript>. Acesta nu este luat in seama daca browserul nostru suporta javascript dar in situatia in care nu suporta sau nu-l are activat putem sa afisam un mesaj de avertizare:
<noscript>
Browserul dumneavoastra nu suporta javascript. Pentru a beneficia de toate facilitatile acestui site schimbati browserul sau activati Javascript
</noscript>
ALERTE JAVASCRIPT.
Una dintre cele mai importante facilitati a acestui limbaj este aceea ca ofera posibilitatea sa interactionezi cu utilizatorii.
Pentru a crea o alerta care sa afiseze un mesaj la care utilizatori trebuie sa raspunda, codul din fisierul JS este urmatorul (codul din fisierul html il pastram):
alert("Mesaj de intampinare - Bine ati venit!"); // pagina se va incarca atunci cand se face click pe OK
Exemplu
In continuare vom invata cate ceva despre conditionale. Ele ofera posibilitatea de a face sa se intample anumite lucruri in functie de anumite circumstante, de exemplu daca sunt sau nu cookie-urile activate.
O conditionala putem sa o facem cu o structura de forma if then else. Vom face un script care sa afiseze un mesaj sau o alerta daca cookie-urile sunt activate si altul daca nu sunt activate:
if (/* intre aceste paranteze vom introduce conditia. Aceasta trebuie sa intoarca valoarea true sau false.*/)
{
/*Aici trebuie introdus codul care sa fie executat daca conditia din if intoarce valoarea true */
}
else {
/* Codul care este executat daca conditia intoarce valoarea false. Conditionala poate fi folosita si fara partea de else*/
}
Acestea fiind stiute vom face un script care sa afiseze o aleta daca sunt activate si alta daca sunt dezactivate.Iata codul din fisierul JS:
if (navigator.cookieEnabled) {
alert ("cookies activate!!!");
}
else {
alert ("cookies dezactivate");
}
Exemplu
Acum voi scrie un script care sa ofere utilizatorilor posibilitatea sa confirme sau nu, iar in functie de raspuns sa avem actiuni diferite. Pentru asta, vom folosi tot un if si vom schimba doar conditia:
if (confirm("Esti sigur ca aceasta e pagina pe care trebuie sa te afli?")) {
alert("ai zis ca esti sigur"); }
else {
alert("nu esti sigur");
}
Exemplu
Daca dorim ca user-ul sa introduca raspunsul de la tastatura trebuie sa folosim variabile. O variabila se defineste o data si poate fi folosita de mai multe ori. Scriptul urmator preia raspunsul introdus de utilizator si poate sa-l foloseasca pentru a-i da acestuia un raspuns (de exemplu). Pentru ca vizitatorii sa introduca valori se foloseste keyword-ul prompt(), care este din aceeasi categorie cu alert() si confirm(), toate solicitand actiune din partea utilizatorului.
var raspuns = prompt("esti sigur ca aici pe aceasta pagina vrei sa ajungi","");
/* Intre primele ghilimele se introduce intrebarea iar intre celelalte se introduce un raspuns random. Am lasat liber pentru a nu avea un raspuns predefinit. */
if (raspuns) { // daca exista vreun raspuns
alert("ai zis: " + raspuns); //concateneaza cele doua siruri
}
else {
alert("nu esti sigur");
}
Exemplu
Confirm face parte din aceeasi categorie cu alert si prompt, adica ferestre popup. Spre deosebire de alert, confirm intoarce valoarea true sau false, putand fi astfel folosit in structuri if, ca in exemplul de mai jos:
if (confirm("esti de acord?")) {
alert("Esti de acord")
}
else {
alert ("Nu esti de acord")
};
Sa spun cate ceva si despre FUNCTII javascript:
Sintaxa pentru crearea unei functii este urmatoarea:
function NumeFunctie(var1,var2,...,varX)
{
ceva cod
}
In caz ca nu are parametrii numele functiei va trebui urmat de paranteze ( ).
function NumeFunctie()
{
ceva cod
}
Iata un exemplu soarte simplu de functie fara parametrii:
<html>
<head>
<script type="text/javascript">
function ScrieText()
{
alert("Text de PROBA");
}
</script>
</head>
<body>
<form>
<input type="button" value="Apasa"
onclick="ScrieText()" >
</form>
</body>
</html>
Exemplu
In acest exemplu nu am mai folosit fisier JS extern si am definit functia in zona de <HEAD> a documentului HTML. La apasarea butonului se va executa functia ScrieText. Inlocuiti codul intr-un fisier .txt, schimbati extensia fisierului in .html si observati cum functioneaza.
Functiile cu parametri sunt si ele foarte utile. Sa presupunem ca avem nevoie de o functie care sa faca anumite operatii cu anumiti parametrii. Nu vom sta sa scriem functia de cate ori avem nevoie sa efectuam operatia asupra altor parametrii, ci vom folosi doar o alta adresare a functiei, folosind parametrii.
function prod(a,b)
{
x=a*b;
return x;
}
Functia face produsul a doua numere. Ca sa atribuim unei variabile produsul a doua numere este suficient sa adresam functia prod (pe care am definit-o) si sa indicam si cele 2 numere intre paranteze.
produs=prod(5,10); // face produsul celor 2 nr.
Pentru o mai buna intelegere a functiilor trebuie sa lucram mai mult. Voi incerca sa explic mai multe despre functii pe masura ce vom avansa in tutorial..
Link-uri inteligente javascript
Cu ajutorul Javascript putem sa facem link-urile mai "destepte", adica sa primim mesaje de avertizare, sa duca la o pagina sau la alta in fuctie de anu ite conditii, s.a.m.d.
Exemplul urmator este un exemplu de link "destept" dar si un bun exercitiu de lucru cu functii.
Pentru a putea sa controlezi un link cu javascript trebuie sa folosim o metoda de marcare a link-ului respectiv. Cel mai uzual este sa folosim un ID si apoi, in Javascript, sa folosimdocument.getElementById("") .
Sa zicem ca dorim sa controlam un link din urmatoarea pagina:
<html>
<head> <title> exemplu </title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<h1> Exemplu link destept </h1>
<h2 align="center">
<a href="index.html " id="redirect"> Link "destept" JavaScript </a>
</h2>
</body>
</html>
Link-ului destept i-am atasat un ID, putand astdel sa-l folosim in fisierul javascript. Vom incerca sa controlam accesul la pagina spre care face link-ul trimitere. Codul din fisierul script.Js:
window.onload = functieI; /* Dupa ce se incarca pagina se trimite la funtia functieI pe care o vom defini mai jos in script */
function functieI() {
document.getElementById("redirect").onclick = controlClick; /* cauta in document elementul care are id-ul redirect, actiunea este onclick (cand se face click pe elementul respectiv) si trimite la functia controlClick */
}
function controlClick() {
alert("Link controlat!! Atentie!!");
return false; /* nu ne lasa sa mergem mai departe. Daca puneam return true ne lasa sa trecem la pagina la care trimite link-ul */
}
Exemplu cu return false Exemplu cu return true
Daca dorim ca utilizatorii care au JS activat sa ajunga pe o pagina si cei care-l au dezactivat pe alta pagina cam asta trebuie sa facem:
window.onload = functieI;
function functieI() {
document.getElementById("redirect").onclick = controlClick;}
function controlClick() {
window.location = "paginajs.html";
return false;
}
Exemplu
Cei care au JS activat vor fi directionati de catre link pe pagina paginajs.html iar cei care nu au JavaScript activat vor ajunge pe pagina care este trecuta in html, adica index.html. De explicat nu este prea mult de explicat... , daca in browser nu este JavaScript activat sau nu este suportat, acesta nu va putea sa interpreteze codul JS si-l va executa doar pe cel html.
Am mai gasit un exemplu care poate fi util. De exemplu daca doriti sa primiti mesaj de avertizare atunci cand se face click pe un link care nu duce la o pagina de pe domeniul vostru, asta tebuie sa faceti:
Fisierul html (am schimbat decat link-ul):
<html>
<head> <title> exemplu </title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<h1> Exemplu link destept </h1>
<h2 align="center">
<a href="www.google.com" id="redirect"> Link "destept" JavaScript </a>
</h2>
</body>
</html>
Fisierul JavaScript:
window.onload = functieI;
function functieI() {
document.getElementById("redirect").onclick = controlClick;}
function controlClick() {
if(this.toString().indexOf("etutoriale") < 0) {
alert("Nu suntem responsabile de continutul acestui site. Aceasta pagina este in afara domeniului nostru!!");
}
}
Exemplu
Dupa cum se poate observa, in acest exemplu au aparut multe noutati. Cea mai importanta dintre ele ar fi Keyword-ul this.
This este un keyword care depinde de context. De obicei se refera la un obiect in functie de metoda care cheama functia sau structura in care intra this. In cazul nostru se refera la un link si ne dam seama de asta pentru ca functia este chemata de onclick, care se aplica link-ului. Sincer imi e foarte greu sa explic cum se foloseste this, asa ca voi incerca sa exemplific cat mai mult si poate o sa va prindeti singuri :).
<input type="radio" name="Buton radio test" onClick="alert(this.name)">
apasati pe butonul radio de langa sa vedeti ce efect are
<input type="checkbox" name="MyCheckbox" onClick="alert(this.checked)">
apasati pe butonul de langa sa vedeti ce efect are
