Identificarea erorilor

Curs Javascript

In JavaScript, cand executia codului intalneste o eroare, aceasta se opreste si atat, nu ne indica unde ar putea fi eroarea sau cauza ei. Acest fapt devine o problema consumatoare de timp pana se reuseste depistarea cauzei acelei erori, mai ales in cazul scripturilor mari.
- Internet Explorer afiseaza in marginea din stanga a barei de jos un semnal de Atentionare ca exista eroare in cod: , semnal ce de multe ori nu este observat, iar dupa ce se efectueaza dublu click pe el apare o fereastra cu un mesaj care de cele mai multe ori e ceva general, vag, de genul "Error: Object doesn't suport this property or method" fara a mentiona ce proprietate sau metoda e cauza, lucru ce te lasa in ceata.
- Pentru navigatorul Mozilla Firefox exista un plugin (sau Add-on) destul de bun la asa ceva (si la multe altele legate de codul HTML din pagina, CSS, JS si DOM; util pentru webmasters), denumit "Firebug". Acesta, referitor la JavaScript, identifica exact locul si cauza erorii.

1. try ... catch

Cu aplicatia "Firebug" se poate rezolva repede problema identificarii erorii JS in Firefox, dar avand in vedere incompatibilitatea dintre browsere, scriptul trebuie testat si pe alte doua, trei navigatoare web (Internet Explorer, Opera, Google Chrome), insa adesea problema nu e complet rezolvata si pentru acestea cu ceea ce gaseste "Firebag". In astfel de cazuri se poate apela la o metoda ce tine de codul scriptului, si anume, folosirea formulei
            try { ... cod } catch(err_ob) { alert(err_ob.message); }
- Aceasta formula face urmatoarele: "try" determina executia codului dintre acolade, iar in cazul unei erori, o 'prinde' si transmite informatii despre acea eroare la "catch()", care le va stoca intr-un obiect JS creat in variabila dintre paranteze, aici "err_ob" (poate avea orice nume de variabila).

Obiectul in care sunt retinute date legate de eroarea aparuta are mai multe proprietati (metode) prin care se pot obtine aceste informatii. Acestea sunt: name, description si message.

• Proprietatea "name" returneaza 6 posibile valori: "EvalError", "RangeError", "ReferenceError", "SyntaxError", "TypeError" si "URIError".
  Aceasta proprietate si valorile ei sunt mai putin importante si explicarea lor ar incarca inutil tutorialul. Urmatoarele doua sunt mai folositoare.
• description - returneaza natura erorii.
• message - returneaza un mesaj mai amanuntit: cauza si natura erorii.

Iata un exemplu:
1. Daca este incercat urmatorul cod, nu se va intampla si afisa nimic. Executia lui se opreste la prima comanda "alert" deoarece este facuta cu o variabila ce nu e definita. Desi in continuare codul este fara erori, nu va afisa nici al doilea "alert()" nici vreun mesaj de eroare (Testati singuri). Aici e usor de identificata cauza, dar in cazul unor scripturi mai mari devine o problema mai serioasa.

<script type="text/javascript"><!--
// Se incearca afisarea unei variabile ce nu e definita
alert(null_var);

// Se defineste o variabila si se incearca afisarea ei
var txt1 = 'Tutoriale marplo.net ';
alert(txt1);
//--></script>

2. Acum se foloseste formula "try ... catch" cu proprietatile "description" si "message", care vor arata exact cauza erorii din script.

<script type="text/javascript"><!--
try {
    // Se incearca afisarea unei variabile ce nu e definita
    alert(null_var);
}
catch(err) {
    // Se va afisa o fereastra Alert cu "description" si "mesage" ale erorii retinuta de "catch()" in 'err'
    alert('Cu description: '+ err.description+ "\n\n Cu message: "+ err.message);
}
//--></script>

- Pentru a vedea rezultatul, click pe: Ex. 1

Aceasta metoda, "try ... catch", identifica erorile cauzate de oprirea executiei scriptului in urma unei operatii gresite, cum ar fi apelul unei functii sau variabile nedefinite. Dar nu recunoaste erorile de sintaxa, gen lipsa unei ghilimele, acolade sau altceva ce tine de scrierea corecta a codului.

2. try ... catch ... finally

Pe langa sintaxele "try" si "catch", aceasta formula de identificare a erorilor mai contine o a treia sintaxa, si anume: finally. Utilitatea acestei a treia clauze este faptul ca poate sa retina variabilele si valorile procesate pana la oprirea scriptului, chiar si in urma unei erori, si pot fi folosite in diferite comenzi finale in cadrul lui "finally".
Iata un exemplu:

<script type="text/javascript"><!--
try {
    // Se parcurge o bucla "for"
    for (var i=0; i<10; i++) {
        // Cand "i" ajunge la valoarea 5 se apeleaza o functie ce nu e definita
        if (i==5) f_null();
    }
}
catch(err) {
    // Se afiseaza cauza erorii
    alert('Eroare: '+err.message);
}
finally {
    // Se afiseaza un alt mesaj in care e retinuta si variabila "i" (valoarea ei inainte de eroare)
    alert('i a ajuns la valoarea: '+i);
}
//--></script>

- Ca sa vedeti rezultatul, click pe: Ex. 2

Pentru a functiona, "finally" trebuie sa urmeze dupa un "try", iar "catch" poate fi omis.
- Codul dintre acoladele lui "finally" se executa indiferent daca apare sau nu o eroare in executia codului din cadru lui "try", cu, sau fara utilizarea lui "catch".
Iata un exemplu in care scriptul nu are eroare si nici nu e folosit "catch".

<script type="text/javascript"><!--
try {
    // Se parcurge o bucla
    for (var i=0; i<10; i++) {
        // Cand "i" are valoarea 5 se opreste executia lui "for"
        if (i==5) break;
    }
}
finally {
    // Se afiseaza un mesaj cu valoarea lui "i"
    alert('i a ajuns la valoarea: '+i);
}
//--></script>

- Pentru a vedea rezultatul, dati click pe: Ex. 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.