Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije

Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije 17.01.2012. u 00:15 · pre 180 meseci #1

Molim vas za pomoc oko jednog zadatka. Spremam ispit i kroz primere pokusavam da naucim sto bolje javascript. U proslom ispitnom roku se pojavio sledeci zadatak koji nikako da resim: Napraviti select listu koja ima opcije "srpski" i "engleski". Kada korisnik prvi put pokrene stranicu i selektuje neku od opcija pravi se cookie u formi jezik=srpski ili jezik=engleski (cookiename=cookievalue). Prilikom sledece posete stranici u zavisnosti od izabrane opcije i selektovanog cookie-a treba otvoriti www.rts.rs (srpski) ili www.bbc.co.uk (engleski).

U ovom trenutku, pored aktiviranja funkcije setCookie, problem mi pravi i pravljenje uslova za detekciju upisanog cookie uvezano sa kodom koji ce otvariti rts.rs ili bbc.co.uk stranicu.

Jedan od uslova je da vreme trajanje cookie-a bude do prve naredne nedelje. Da li postoji neki nacin na koji bi se reklo da cookie istice recimo svakog sledeceg ponedeljka?

Pocetnik sam i svaki savet i pomoc su dobrodosli a prilazem i dosadasnji kod (koji je mnogo puta promenjen pri pokusajima da resim problem).

Hvala unapred.

Code:
<html>
<head>
  <title>Drugi zadatak - Cookie</title>
  <link rel="stylesheet" type="text/css" href="zadatak2.css">
  <script type="text/javascript">
     window.onload = opcija();
    function opcija() {
     var ime="";
     if (document.cookie !="") {
     ime=document.cookie.split("=")[1];
     }
     document.getElementById("izborjezika").value = ime;
     document.getElementById("izborjezika").onchange = setCookie;
     }
     function setCookie (jezik, ime, path, expires){
     var datumisteka= new Date();
     datumisteka.setDate(13);

     var ime=document.getElementById("izborjezika").value;
     document.cookie= "jezik=" + ime + "; path=/; expires=" + datumisteka.toGMTString();
     }
  </script>
</head>
<body>
  <div id="container">
  <h1> Molimo Vas odaberite jezik:</h1></br>
   <form id="forma">
     <select id="izborjezika">
      <option value="">Odaberite jezik:</option>
      <option value="srpski">Srpski</option>
      <option value="engleski">Engleski</option>
     </select>
   </form>
   </div>
  </body>
</html>

Potpis

Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević

Re: Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije 17.01.2012. u 16:37 · pre 180 meseci #2

Prva greska ti je nacin na koji citas cookie, document.cookie moze da izgleda ovako jezik=srpski u kom slucaju bi tvoj kod radio, ali moze da izgleda i recimo ovako jezik=srpski; bla=truc, u kom slucaju bi tvoja promenljiva ime bila jednaka srpski; bla.

Znaci u document.cookie se nalaze svi kukiji koji su setovani za taj domen a koji su vidljivi na trenutnoj putanji. Ti kukiji su u formatu ime=vrednost i razdvojeni su sa ; (tacka zarez posle koga ide razmak) sto znaci da moras prvo podeliti document.cookie po tacka-zarezu pa proci kroz sve kukije u potrazi za onim koji tebi treba (jezik).

To bi trebalo ovako nekako da izgleda:

Code (javascript):

function readCookie(name, defaultValue) {

   var cookies = document.cookie.split('; ');

   for (var i = 0; i < cookies.length; i++) {

      var parts = cookies[i].split('=');

      if (parts[0] == name) {

         return parts[1];

      }

   }

   return defaultValue;

}

Funkciju pozivas ovako: readCookie('jezik'), ili ovako readCookie('jezik', 'srpski'). U ovom drugom slucaju 'srpski' ce biti vraceno cak iako cookie nije setovan (default vrednost, moze biti sta god ti odgovara).

Hint: u danasnje vreme svaki browser ima neku javascript konzolu koja je odlicna za isprobavanje malih snippeta koda kao sto je ovaj. Npr ako koristis Chrome, developer tools otvaras sa Ctrl+Shift+I, odes na Console tab i prekopiras celu predhodnu funkciju, zatim je testiras tako sto je pozivas direktno iz te iste konzole.
Meni je bar to veoma korisno i cesto koristim takav pristup prilikom razvoja (umesto da ubacujem debug kod u js fajl u editoru, pa da cuvam pa da se vracam u browser i da refreshujem stranu da bi browser povukao izmene)..

Konkretna funkcija koju ja koristim za citanje kukija je sledeca (mozda malo deluje komplikovanija ali je u pitanju obican regularni izraz):

Code (javascript):

function readCookie(name, defaultValue) {

    return (

        document.cookie.match(

            new RegExp(

                '(?:^|;\\s+)' +

                name.replace(/([\[\]|$^?\\])/g, '\\$1') +

                '=([^;]+)(?:$|;)'

            )

        ) || []

    )[1] || defaultValue || '';

}

Sada nam treba funkcija koja upisuje kuki sa svim mogucim elementima (putanja, datum isteka). Funkcija koju ja koristim je:

Code (javascript):

function writeCookie(name, value, lifetime, path) {

    var expires = '';

    if (lifetime) {

        expires = '; expires=' + (new Date(+new Date + lifetime * 1000)).toUTCString();

    }

    document.cookie = name + '=' + value + expires + '; path=' + (path || '/');

}

Ovde su name i value parametri naziv i vrednost kukija (redom), lifetime predstavlja broj sekundi "zivota" kukija (tj koliko jos sekundi ce kuki biti zapamcen od strane browsera). Ukoliko se ovaj parametar ne prosledi (ili je jednak nuli) kuki nece imati podesen expires parametar i dobices tzv session cookie (koji se automatski brise kada se iskljuci browser). Poslednji parametar je putanja na kojoj ce kuki biti upisan i njega obicno ignorises :) (ako ga ne navades prilikom poziva ove funkcije bice upisano '/' tj root domena na kome se kuki upisuje).

E sad, tebi treba malo drugaciji kod, tj treba da podesis da kuki ne traje odredjen fixan vremenski period (kao sto to radi predhodna funkcija) vec da traje do odredjenog datuma, jednostavnom izmenom dobijamo ovo:

Code (javascript):

function writeCookie(name, value, date, path) {

    var expires = '';

    if (date) {

        expires = '; expires=' + date.toUTCString();

    }

    document.cookie = name + '=' + value + expires + '; path=' + (path || '/');

}

Ovde smo lifetime parametar (broj sekundi) zamenili sa date parametrom koji predstavlja Date objekat.

Sada jos samo treba da odredimo prvi sledeci ponedeljak, to mozemo ovako da izracunamo:

Code (javascript):

var now = new Date;  // trenutni datum/vreme

var diff = 8 - now.getDay(); // getDay() vraca 0 za nedelju, 1 za ponedeljak, 2 za utorak, ...

if (diff == 8) { // ukoliko je danas nedelja moramo vratiti razliku sa 8 dana (drugi ponedeljak od danas) na 1 (prvi sledeci ponedeljak, tj sutra)

  diff = 1;

}

var next_monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff, 0, 0, 0, 0);

kada to ubacimo u funkciju mozemo lako da koristimo prilikom setovanja kukija:

Code (javascript):

function getNextMonday() {

    var now = new Date,

         diff = 8 - now.getDay();

    if (diff == 8) {

        diff = 1;

    }

    return new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff, 0, 0, 0, 0);

}

...

writeCookie('jezik', jezik, getNextMonday());

To je to vezano za kukije i datum, ostalo ti je jos redirektovanje na drugu adresu, to radis tako sto menjas document.location, znaci ovako nekako:

Code (javascript):

var jezik = readCookie('jezik');

if (jezik == 'srpski') {

  document.location = 'http://www.rts.rs';

} else if (jezik == 'engleski') {

  document.location = 'http://www.bbc.co.uk';

}

Potpis

rafforum.rs - Forum Računarskog Fakulteta

1

Re: Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije 17.01.2012. u 23:03 · pre 180 meseci #3

Pre svega Aleksandre hvala puno na odvojenom vremenu i detaljnom objasnjenju svakog dela skripte.

Procitao sam objasnjenja i svaku liniju koda i tek sam sada shvatio sustinu i resio neke osnovne nedoumice koje sam imao gledajuci razne tutoriale (koji su objasnjavali segmente ali ne i kompletno resenje na meni razumljiv nacin).

Uklopio sam kod i gledajuci kompletnu sliku, nije mi do kraja jasan samo deo sa funkcijom getNextMonday.

Prva nedoumica je oko reda :

Code:
return new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff, 0, 0, 0, 0);

Vidim da se poziva godina, mesec, datum,.....da li moze da stoji samo now.getDate() + diff,0,0,0,0);

Drugo pitanje je za deo

Code:
diff,0,0,0,0

tj. sta predstavljaju cetiri 0?

I poslednja nedoumica su tri tacke pa linija

Code:
writeCookie("jezik", jezik, getNextMonday)

Nisam uspeo da shvatim sta predstavlja ovaj red i da li su tri tacke zamena za neki deo koda?

Sto se pozivanja funkcije writeCookie tice, nakon selektovanja opcije da li je dovoljno da u okviru <select> taga stavim onchange=writeCookie();

Ideja je da html deo izgleda ovako:

Code:

<body>
   <form id="forma">
     <select id="izborjezika" onchange=writeCookie()>
      <option value="nijedan">Odaberite jezik:</option>
      <option value="srpski">Srpski</option>
      <option value="engleski">Engleski</option>
     </select>
   </form>
  </body>

Mislio sam da u funkciji readCookie umesto vrednosti defaultValue stavim "nijedan" (vrednost prve opcije). Nakon ucitavanja funkcija u <head> odeljku vrednost bi bila "nijedan", nakon cega bi sistem odabir neke od opcija tretirao kao promenu sto bi za sobom povuklo aktiviranje funkcije writeCooke. Da li je ovo dobar rezon ili pozivanje funkcije treba da resim na drugi nacin?

Hvala jos jednom na odvojenom vremenu i izvanjavam se zbog nekih mozda banalnih pitanja ali sam pocetnik u javascript-u pa ne mogu odmah iz prve da povezem sve detalje.

Potpis

Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević

Re: Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije 17.01.2012. u 23:44 · pre 180 meseci #4

Nikad nema banalnih i glupih pitanja, svi smo jednom bili pocetnici i svi smo imali manje-vise iste probleme :)

Idemo redom:

Citat:

bantes9:
Prva nedoumica je oko reda :

Code:
return new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff, 0, 0, 0, 0);

Vidim da se poziva godina, mesec, datum,.....da li moze da stoji samo now.getDate() + diff,0,0,0,0);

Odgovor na ovo pitanje mozes pronaci u dokumentaciji Date objekta (btw sta god da te muci u vezi javascript pogledaj prvo neku dokumentaciju kao sto je npr MDN JavaScript Reference, uglavnom ces brze naci tu odgovor nego cekajuci da ti neko odgovori na forumu).

Dakle kao sto se vidi na linkovanoj strani Date objekat ima tri nacina da se kreira (ima tri razlicita konstruktora), moze da se kreira na osnovu broja milisekundi (tzv unix timestamp), na osnovu stringa (npr "May 3rd, 2011.") i tako sto se proslede sve komponente datuma: godina, mesec, dan, sat, minut, sekunda i milisekunda.
Mi smo koristili ovaj treci konstruktor (mada smo mogli i prvi, ali mislim da je ovaj treci nekako ocigledniji i lakse za razumevanje ako ti je unix timestamp stran pojam).

Citat:

bantes9:
Drugo pitanje je za deo

Code:
diff,0,0,0,0

tj. sta predstavljaju cetiri 0?

Na ovo sam odgovorio iznad. A kao sto mozes videti na MDN-u vreme (sat, minut, sekunda i milisekunda) su opcioni i mogli smo da ih izostavimo u potpunosti.

Citat:

bantes9:
I poslednja nedoumica su tri tacke pa linija

Code:
writeCookie("jezik", jezik, getNextMonday)

Nisam uspeo da shvatim sta predstavlja ovaj red i da li su tri tacke zamena za neki deo koda?

Da tri tacke predstavljaju neki kod, tacnije ja ih koristim umesto "a negde drugo u kodu...". Tu sam samo pokazao kako pozivas funkciju koja je definisana u istom tom code bloku.

Citat:

bantes9:
Sto se pozivanja funkcije writeCookie tice, nakon selektovanja opcije da li je dovoljno da u okviru <select> taga stavim onchange=writeCookie();

Ne. Ovo nece da ti radi iz razloga sto kad ti napises onchange=writeCookie(); js engine ce da pozove funkciju writeCookie i da vrednost koju ona vrati (a to je undefined jer mi ne vracamo nista iz te funkcije) dodeli onchange eventu.

Takodje ni ovo ne bi radilo: onchange=writeCookie; (znaci bez zagrada, tj bez oepratora pozivanja funkcije), writeCookie se ne bi odmah pozvao, i ta funkcija bi stvarno bila dodeljena onchange eventu (pozvala bi se tek kad promenis nesto u select boxu) ali kada bi se pozvala bio bi joj prosledjen samo jedan argument i to Event objekat (koji opisuje koji element je izazvao dogadjaj, sta se promenilo i sl), a nama ta funkcija prima dva stringa (ime kukija i vrednost), najmanje.

Dakle moraces da napises event handler funkciju koja ce da poziva writeCookie sa odgovarajucim parametrima. Ovako nekako bi ceo kod izgledao:

Code (javascript):

var select_box;

function load() {

  select_box = document.getElementById('izborjezika');

  var jezik = readCookie('jezik', 'nijedan');

  if (jezik == 'srpski') {

     document.location = 'http://www.rts.rs';

  } else if (jezik == 'engleski') {

     document.location = 'http://www.bbc.co.uk';

  }

}

function change() {

   var jezik = select_box.options[select_box.selectedIndex].value;

   writeCookie('jezik', jezik, getNextMonday());

}

// ovde dodaj jos samo readCookie, writeCookie i getNextMonday funkcije

i html:

Code (html):

<html>

  <head>

     <script type="text/javascript">

        // ovde onaj kod iznad

     </script>

  </head>

 <body onload="load">

   <form id="forma">

     <select id="izborjezika" onchange="change">

  <option value="nijedan">Odaberite jezik:</option>

  <option value="srpski">Srpski</option>

  <option value="engleski">Engleski</option>

     </select>

   </form>

  </body>

</html>

To bi trebalo da radi, mada nisam testirao...

Potpis

rafforum.rs - Forum Računarskog Fakulteta

1

Re: Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije 19.01.2012. u 02:46 · pre 179 meseci #5

Pre svega respect za objasnjenja i pomoc oko koda, sve je proradilo i definitivno ne bih bez tvoje pomoci sklopio sve kockice jer ima dosta stvari koje nikada ne bih uzeo u obzir.

Procitacu jos par puta detaljno sve sto si napisao kako bih pokupio i najsitnije detalje a vec sam uvrstio MDN u favorites jer primecujem da su neke stvari detaljnije objasnjene u odnosu na izvore koje sam koristio.

U nastavku je kompletan kod, kako bi cela ova prica bila preglednija, ukoliko neko drugi zapne oko slicnog problema.

Code:

<html>
<head>
  <title>Cookie</title>
  <script type="text/javascript">
  var select_box;

function load() {
  select_box = document.getElementById('izborjezika');
  var jezik = readCookie('jezik', 'nijedan');
  if (jezik == 'srpski') {
   document.location = 'http://www.rts.rs';
  } else if (jezik == 'engleski') {
     document.location = 'http://www.bbc.co.uk';
  }
}

function change() {

   var jezik = select_box.options[select_box.selectedIndex].value;
   writeCookie('jezik', jezik, getNextMonday());
}

    function readCookie(name, nijedan) {
    var cookies = document.cookie.split('; ');

    for (var i = 0; i < cookies.length; i++) {
    var parts = cookies[i].split('=');
    if (parts[0] == name) {
         return parts[1];
      }
   }
   return nijedan;
   }


   function writeCookie(name, value, date, path) {
   var expires = '';
   if (date) {
        expires = '; expires=' + date.toUTCString();
    }
   document.cookie = name + '=' + value + expires + '; path=' + (path || '/');
    }


    function getNextMonday() {
    var now = new Date,
         diff = 8 - now.getDay();

    if (diff == 8) {
        diff = 1;
    }
     return new Date(now.getFullYear(), now.getMonth(), now.getDate() + diff, 0, 0, 0, 0);
    }


    var jezik = readCookie('jezik');

    if (jezik == 'srpski') {
    document.location = 'http://www.rts.rs';
    } else if (jezik == 'engleski') {
    document.location = 'http://www.bbc.co.uk';
    }

  </script>
</head>
<body onLoad="load">
  <div id="container">
  <h1> Molimo Vas odaberite jezik:</h1></br>
   <form id="forma">
     <select id="izborjezika" onchange="change">
      <option value="nijedan">Odaberite jezik:</option>
      <option value="srpski">Srpski</option>
      <option value="engleski">Engleski</option>
     </select>
   </form>
   </div>
  </body>
</html>

Hvala puno jos jednom na pomoci, pozdrav.

Potpis

Mrav radi, tegli, i od njega nije postalo ništa,
a majmun se zezao po drveću i od njega je postao čovek.

Brana Crnčević

Re: Pomoc oko <select> liste, izbora opcije, upisa cookie-a, redirekcije 19.01.2012. u 04:27 · pre 179 meseci #6

Nema na cemu. Samo jos jedna mala napomena - imas isti kod u load funkciji i u globalnom scope-u, posto ce se ovaj u load uvek drugi izvrsavati mozes slobodno da ga obrises odatle..

Potpis

rafforum.rs - Forum Računarskog Fakulteta

Forum kao aplikacija na telefonu

Srodne teme