Curs Javascript

1. Fisiere cookie cu acelasi nume

Daca un browser are mai multe fisiere cookie pentru un site si au acelasi nume, definite fiecare cu alta cale in parametrul "path", si cu valori diferite, de exemplu daca avem trei fisiere cookie cu numele "color", sirul cookie ar arata astfel:

In cazul acesta, pentru a numara valorile asociate unui nume cookie puteti folosi urmatoarea functie:
function GetCookieCount (name) {
    var result = 0;
    var myCookie = " " + document.cookie + ";";
    var searchName = " " + name + "=";
    var nameLength = searchName.length;
    var startOfCookie = myCookie.indexOf(searchName);
    while (startOfCookie != -1) {
        result += 1;
        startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength);
    }
    return result;
}
Impreuna cu aceasta functie care numara cate valori asociate exista, trebuie sa aveti si o functie care sa regaseasca o anumita instanta a unui cookie, cum este urmatoarea:
function GetCookieNum (name, cookieNum) {
    var result = null;
    if (cookieNum >= 1) {
        var myCookie = " " + document.cookie + ";";
        var searchName = " " + name + "=";
        var nameLength = searchName.length;
        var startOfCookie = myCookie.indexOf(searchName);
        var cntr = 0;
        for (cntr = 1; cntr < cookieNum; cntr++) {
            startOfCookie = myCookie.indexOf(searchName, startOfCookie + nameLength);
        }
        if (startOfCookie != -1) {
            startOfCookie += nameLength;         // omite nume cookie anterior
            var endOfCookie = myCookie.indexOf(";", startOfCookie);
            result = unescape(myCookie.substring(startOfCookie, endOfCookie));
        }
    }
    return result;
}

2. Stergerea unui cookie

Pentru a sterge un cookie, numele si calea (daca a fost specificat parametrul "path") trebuie sa fie aceleasi cu numele si calea folosite la stabilirea fisierului cookie.
Stergerea unui cookie se face prin stabilirea datei de expirare la un moment in trecut, ca in exemplul urmator:

function ClearCookie (name) {
    var ThreeDays = 3*24*60*60*1000;
    var expDate = new Date();
    expDate.setTime (expDate.getTime() - ThreeDays);
    document.cookie = name + "=ImOutOfHere; expires=" + expDate.toGMTString();
}

3. Exemplu complet utilizare cookie

Pentru a intelege mai bine cum puteti crea si folosi fisierele cookie, studiati exemplul urmator.
Exemplul este ceva mai complex, cuprinde un script cu mai multe functii care contin multe din elementele invatate in lectiile anterioare cat si altele mai avansate, pentru lucrul cu siruri.
Scopul acestui exemplu este de a intelege cum functioneaza fisierele cookie, acesta contine in sectiunea HEAD a unui document HTML un script JavaScript in care sunt definite 4 functii pentru lucrul cu fisiere cookie, iar in corpul paginii, BODY, este creat un tabel HTML cu 2 coloane, in prima este un formular pentru scrierea unor preferinte care vor fi trimise la script pentru inregistrarea acestora in cookie, iar a doua coloana contine un buton care activeaza afisarea preferintelor din cookie si un alt buton care sterge cookie-urile.
Codul complet este urmatorul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Exemplu utilizare cookie</title>
<script type="text/javascript">
<!--
// Functia pt. setarea cookie-urilor
  function SetCookie () {

  // Se definesc variabilele care preiau valorile campurilor din formular
    var culoare = document.preferinte.culoare.value;
    var fructe = document.preferinte.fructe.value;
    var citat = document.preferinte.citat.value;

  // Seteaza timpul de expirare, 2 zile
    var twoDays = 2*24*60*60*1000
    var expDate = new Date()
    expDate.setTime(expDate.getTime()+twoDays);

  // Creaza cookie-urile
    document.cookie = "cookie1" + "=" + escape(culoare) + "; expires=" + expDate.toGMTString() ;
    document.cookie = "cookie2" + "=" + escape(fructe) + "; expires=" + expDate.toGMTString() ;
    document.cookie = "cookie3" + "=" + escape(citat) + "; expires=" + expDate.toGMTString() ;
}

// Functia care verifica daca exista cookie-ul cu un anumit nume transmis ca argument
// Daca exista, prelucreaza sirul pt. extragerea valorii acestuia
// Returneaza valoarea asociata numelui
  function checkCookie(c_name) {
    if (document.cookie.length>0) {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1) {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) {
          c_end=document.cookie.length;
        }
        return unescape(document.cookie.substring(c_start,c_end));
      }
    }
  // Daca cookie-ul verificat nu exista
    return "Nu ati adaugat inca o preferinta";
  }

// Functia trimite valorile primite la apelare spre verificare la functia precedenta
// Daca numele cookie-ului exista, stocheaza valoarea intr-o matrice
// Afiseaza in pagina valorile cookie-urilor
  function getCookie() {
    nr = getCookie.arguments.length

    var val_c = new Array(nr)
    var a = 0

    for (var i=0; i<nr; i++) {
      valoare=checkCookie(getCookie.arguments[i]);
      if (valoare!=null && valoare!="") {
        val_c[a] = valoare;
        a++
      }
    }

  // Afiseaza in pagina, la id-urile indicate, valorile cookie-urilor
    document.getElementById("idculoare").childNodes[0].nodeValue = val_c[0];
    document.getElementById("idfructe").childNodes[0].nodeValue = val_c[1];
    document.getElementById("idcitat").childNodes[0].nodeValue = val_c[2];
  }

// Functia pt. stergerea cookie-urilor
  function stergeCookie() {
    nr_c = stergeCookie.arguments.length
    var ThreeDays = 3*24*60*60*1000;
    var expDate = new Date();
    expDate.setTime (expDate.getTime() - ThreeDays);

     for (var n=0; n<nr; n++) {
      document.cookie = stergeCookie.arguments[n] + "=DataStearsa; expires=" + expDate.toGMTString();
    }
  }
// -->
</script>
</head>

<body>

<table border="1" bordercolor="#8888fe" width="580" cellpadding="2" cellspacing="0">
  <tr><td>
    <form name="preferinte">
      Scrieti culoarea favorita:
      <input type="text" name="culoare" size="20" maxlength="40" /><br /><br />
      Scrieti fructele preferate:
      <input type="text" name="fructe" size="20" maxlength="40" /><br /><br />
      Scrieti o fraza (un citat) favorita:<br />
      <input type="text" name="citat" size="40" maxlength="80" /><br /><br />
      <input type="button" value="Favorite" name="buton" onclick="SetCookie()" />&nbsp;
      <input type="reset" value="Reset" name="reset" />
    </form>

  </td><td>
    <form name="preferinte2">
      <input type="button" value="Afiseaza Favorite" name="buton" onclick="getCookie('cookie1', 'cookie2', 'cookie3')" />&nbsp;
      <input type="button" value="Sterge cookie" name="Clear" onclick="stergeCookie('cookie1', 'cookie2', 'cookie3')" />
    </form>
    <b>Culoare favorita - </b><span id="idculoare"> </span><br />
    <b>Fructe preferate - </b><span id="idfructe"> </span><br />
    <b>Citat favorit - </b><span id="idcitat"> </span><br />

  </td></tr>
</table>

</body>
</html>
- Functiile din script au fost definite pentru acest exemplu, pentru folosirea lor in alte scripturi necesita modificari.
Dupa ce adaugati acest cod intr-un document HTML, in browser veti avea afisat urmatorul rezultat:
Scrieti culoarea favorita:

Scrieti fructele preferate:

Scrieti o fraza (un citat) favorita:


 
 
Culoare favorita -
Fructe preferate -
Citat favorit -
- Apasati intai butonul din dreapta "Afiseaza Favorie", vor fi afisate mesaje de eroare, precum ca nu ati adaugat inca o preferinta.
Completati in campurile din stanga preferintele dv. apoi apasati butonul "Favorite", acesta apeleaza functia "SetCookie()" care va prelua datele adaugate si le va stoca in fisiere cookie care vor expira peste doua zile de la crearea lor.
Dati click pe butonul "Afiseaza Favorite", acesta apeleaza functia "getCookie()" careia ii trimite ca argumente numele cookie-urilor a caror valoare va fi afisata, vor apare preferintele scrise de dv., preluate din cookie.
Importanta si avantajul fisierelor cookie le veti constata dupa aceasta.
Inchideti broweser-ul, redeshideti-l iar la aceasta pagina si apasati butonul "Afiseaza Favorite". Observati ca sunt afisate preferintele dv. adaugate mai devreme. Maine, daca reveniti la aceasta pagina vor fi afisate aceleasi preferinte, fara sa trebuiasca sa le mai scrieti. Aceste date sunt pastrate 2 zile in fisiere cookie dupa care vor fi sterse automat.
Daca vreti sa stergeti aceste cookie-uri mai devreme, apasati butonul "Sterge cookie", acesta apeleaza functia "stergeCookie()" careia ii trimite ca argumente numele cookie-urilor pe care sa le stearga.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canción.
- Ea nu canta acel cantec.
Utilizare Cookie-uri 2

Last accessed pages

  1. Tag-urile DIV si SPAN (9648)
  2. PHP Script Chat Simplu (1640)
  3. Pronumele personal (7831)
  4. Verbe modale - Exercitii incepatori (12810)
  5. Configurare text (5146)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1189)
  2. Curs HTML gratuit Tutoriale HTML5 (933)
  3. Coduri pt culori (678)
  4. Creare si editare pagini HTML (545)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (497)