Index

JavaScript

FUNCȚII javascript

  Sintaxa pentru crearea unei funcții este următoarea:

       
function NumeFunctie(var1,var2,...,varX)
{
codul funcției
}

În cazul în care funcția nu are parametrii, numele funcției va trebui urmat de paranteze ( ).

       
function NumeFunctie()
{
codul funcției
}

Iată un exemplu foarte simplu de funcție fără parametrii:

       
<html>
<head>
<script type="text/javascript">
function ScrieText()
{
alert("Text de PROBĂ!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Apasă"
onclick="ScrieText()" >
</form>
</body>
</html>

Exemplu

În acest exemplu nu am mai folosit fișier JS extern și am definit funcția în zona de <HEAD> a documentului HTML. La apăsarea butonului se va executa funcția ScrieText. Copiazți codul într-un fișier .txt, schimbați extensia fișierului în .html și observați cum funcționează.



Funcțiile cu parametri sunt și ele foarte utile. Să presupunem că avem nevoie de o funcție care să facă anumite operații cu diverse variabile. Nu vom sta să scriem funcția de câte ori avem nevoie să efectuam operația asupra altor variabile, ci vom folosi doar o nouă apelare a funcției, folosind parametrii.

       
function prod(a,b)
{
x = a * b;
return x;
}

Funcția returnează produsul a două numere. Ca să atribuim unei variabile produsul a două numere este suficient să adresăm funcția prod (pe care am definit-o) și să indicăm și cele 2 numere între paranteze.

       
produs = prod (5, 10); // valoarea din variabila produs va fi produsul celor 2 numere


Pentru o mai bună înțelegere a funcțiilor trebuie să le utilizăm mai mult. Mai multe explicații despre funcții vor apare pe măsură ce se parcurge acest material.


Link-uri inteligente javascript

Cu ajutorul Javascript putem să facem link-urile mai "deștepte", adică să primim mesaje de avertizare sau să ducă la o pagină sau la alta în funcție de anumite condiții, ș.a.m.d.

Exemplul următor este un exemplu de link "deștept" dar și un bun exercițiu de lucru cu funcțiile javascript. 
Pentru a putea să controlăm un link cu javascript trebuie să folosim o metodă de marcare a link-ului respectiv. Cel mai uzual este să folosim un ID și apoi, în Javascript, să folosim document.getElementById("") .

Să zicem că dorim să controlăm un link din următoarea pagină:

       

<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 "deștept" JavaScript </a>

</h2>

</body>
</html>

Link-ului deștept i-am atașat un ID, putând astfel să-l folosim în fișierul javascript. Vom încerca să controlăm accesul la pagina spre care face link-ul trimitere. Codul din fișierul exemplu3.2.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


Dacă dorim ca utilizatorii care au JS activat să ajungă pe o pagină, iar cei care il au dezactivat să ajungă pe altă pagină, atunci putem folosi următorul cod javascript:

       

window.onload = functieI;

function functieI() {

document.getElementById("redirect").onclick = controlClick;}

function controlClick() {

window.location = "http://www.google.com";

return false;

}

Exemplu

Cei care au JS activat vor fi direcționați de către link pe pagina paginajs.html iar cei care nu au JavaScript activat vor ajunge pe pagina care este trecuta în html, adica jscript3.php. Dacă în browser nu are JavaScript activat sau nu este suportat, acesta nu va putea să interpreteze codul JS și-l va executa doar pe cel html.



Următorul exemplu poate fi de asemenea foarte util. De exemplu, dacă doriți să primiți mesaj de avertizare atunci când se face click pe un link care nu duce la o pagină de pe domeniul vostru, atunci următorul cod este soluţia:

Fisierul html (am schimbat doar link-ul):

       

<html>
<head> <title> exemplu </title>
<script type="text/javascript" src="exemplu3.5.js">
</script>
</head>
<body>

<h1> Exemplu link destept </h1>

<h2 align="center">

<a href="http://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("ulbsibiu") < 0) {

alert("Nu suntem responsabili de conținutul acestui site. Această pagină este în afara domeniului nostru!!");

}

}

Exemplu
Dupa cum se poate observa, în acest exemplu au apărut multe noutăți. Cea mai importantă dintre ele ar fi Keyword-ul this. 


      

This este un keyword care depinde de context. De obicei se referă la un obiect în funcție de metoda care cheamă funcția sau structura în care intra this. În cazul nostru se referă la un link și ne dăm seama de acest lucru pentru că functia este chemată de onclick, care se aplică link-ului. 

     

<input type="radio" name="Buton radio test" onClick="alert(this.name)">       
                                                                      Apăsați pe butonul radio de lângă să vedeți ce efect are

 

<input type="checkbox" name="MyCheckbox" onClick="alert(this.checked)">      
                                                                 Apăsați pe check-boxul de lângă să vedeți ce efect are

TEMA: Sa se modifice exemplul de la punctul anterior astfel incat sa se foloseasca o functie javascript salvata intr-un fisier extern pentru calculul sumei.