Variabile dinamice in JS

Curs Javascript

1. Creare variabile dinamice

Variabilele dinamice sunt variabile care nu au fost setate special in script, nu au un nume dinainte definit ci este dinamic, numele fiind preluat si alcatuit cu un sir din alta sursa (de exemplu un formular).
JavaScript nu are implementat special variabile dinamice (precum, de exemplu PHP), dar pot fi folosite diferite metode pentru a ajunge la acelasi rezultat, si anume: un sir preluat dintr-o sursa separata sa devina denumirea, sau parte din numele unei variabile.
Pot fi folosite doua metode: cu "eval()" sau cu "window".
Iata cate un exemplu cu fiecare, din care puteti intelege cum pot fi obtinute variabile dinamice in JS (explicatiile necesare, amanuntite, sunt in cod).

1- Cu eval()

<script type="text/javascript"><!--
// 1. Cu eval

// Se seteaza o variabila care va avea ca valoare un sir
// Acel sir va deveni el insusi o variabila sau parte din numele alteia
var vari1 = 'val';

// Cu "eval()" se defineste valoarea lui "vari1" ca variabila si i-se atribue o valoare
// Acum exista o variabila val
eval("var "+vari1+"= 'Valoarea variabilei dinamice - val';");

alert(val);           // Se testeaza rezultatul (ce returneaza noua variabila obtinuta)

// Sau ca parte componenta a numelui
eval("var pre_"+vari1+"= 'Parte componenta din nume - pre_val';");           // Acum exista o variabila pre_val
alert(pre_val);           // Testare ce returneaza noua variabila pre_val
//--></script>

- Acest script va returna urmatorul rezultat, click pe Ex. eval

2- Cu window

<script type="text/javascript"><!--
// 2. Cu window (keie in array)

// Se seteaza o variabila care va avea ca valoare un sir
// Acel sir va deveni el insusi o variabila sau parte din numele alteia
var vari2 = 'val2';

// Cu "window" se defineste valoarea lui "vari2" ca o cheie in Array si i-se atribue o valoare
// Acum va exista o variabila val2
window[vari2] = 'Valoare a lui - val2';

alert(val2);           // Testare ce returneaza noua variabila val2

// Sau ca parte componenta a numelui
window['pre_'+vari2] = 'Valoarea lui - pre_val2';           // Acum exista o variabila pre_val2
alert(pre_val2);           // Testare ce returneaza noua variabila pre_val2
//--></script>

- Acest script va returna urmatorul rezultat, click pe Ex. window

2. La ce folosesc variabilele dinamice

Variabilele dinamice nu sunt neaparat necesare, mai ales in JavaScript, se poate scrie orice script si fara ele, iar pentru incepatori e indicat sa evite folosirea lor. Sunt utile in anumite cazuri (pt. avansati) deoarece pot face mai mic si mai dinamic codul scriptului.
Iata un exemplu in care se poate vedea o mica utilizare a variabilelor dinamice.
Sa presupunem, ca o parte a unui script mai mare, ca valoarea aleasa dintr-o casuta Select dintr-un formular trebuie sa devina numele unei variabile, iar valoarea ei sa fie textul din dreptul acelui Select.
Codul pt. acest exemplu este urmatorul:

<script type="text/javascript"><!--
// Se seteaza functia ce va fi apelata de Select
function exemplu_vd(val3) {
    // Se defineste, cu metoda "window", valoarea lui 'val3' ca parte din numele unei variabile
    // I-se atribue ca valoare textul din optiunea aleasa
    window['vd_'+val3] = document.getElementById(val3).innerHTML;

    alert('Variabila - vd_'+ val3+ ' - are valoarea: '+ eval("vd_"+val3));           // Se testeaza printr-o fereastra alert rezultatul
    // - Functia eval() evalueaza numele de variabila rezultat deoarece aceasta nu e dinainte cunoscuta
}
//--></script>

<form action="" method="post">Alege optiune:
  <select name="select" onchange="exemplu_vd(this.value)">
    <option id="s1" value="s1">Optiune 1</option>
    <option id="s2" value="s2">Optiune 2</option>
    <option id="s3" value="s3">Optiune 3</option>
  </select>
</form>

- In Selectul de mai jos puteti testa rezultatul acestui script.

Alege optiune: Optiune 1 Optiune 2 Optiune 3

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.