Cookies aanmaken en opvragen om taalkeuze website te kiezen

Status
Niet open voor verdere reacties.

Steven01567644335

Gebruiker
Lid geworden
14 mei 2022
Berichten
52
Hallo,

ik heb een opdracht gekregen rond cookies die zeer moeilijk is.

ik heb interesse in cookies, dus mijn vraag luidt als volgt:

Is er geen gemakkelijkere opdracht wat cookies betreft?

Code:
************** cookies ****************************/
function setCookie(naam,waarde,dagen){
/*plaatst een cookie
 
naam: cookienaam;
waarde: de inhoud van het cookie
dagen: optioneel, het aantal dagen dat het cookie geldig blijft vanaf nu
indien afwezig wordt het een session cookie
*/
 
var verval = "";
if(dagen){
     //vandaag global bovenaan deze lib;
     var vervalDatum = new Date(vandaag.getTime()+dagen*24*60*60*1000);
     verval = vervalDatum.toUTCString();
}
document.cookie = naam + "=" + waarde + ";expires=" + verval;
}
 
Laatst bewerkt door een moderator:
Misschien is een nieuw topic handiger?
 
ik heb een opdracht gekregen rond cookies
Dit is over heel internet te vinden.
De makkelijkste is w3schools, daar staat alles bij elkaar.
Je kan dan zelf het hoofdscript maken die gebruik maakt van deze 3 functies.

Verander even dit in function setCookie zodat je niet elke keer in je browser de cookie meet verwijderen bij het testen.
Code:
// document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
alert (cname + "=" + cvalue + ";" + expires + ";path=/");
 
Laatst bewerkt:
Cookies aanmaken en heropvragen om taalkeuze website te kiezen.

Hallo, deze oefening houdt mij al vijf dagen bezig. De bedoeling is dat de website de keuze voor een bepaalde taal onthoud, om telkens naar die bepaalde pagina te gaan in de taal naar keuze eens deze gekozen is. Dus ook na heropstarten beginpagina.

Code:
<!DOCTYPE html><head>
<meta charset="utf-8">
<script>
  window.onload(){
    var vandaag = new Date();


function setCookie(naam,waarde,dagen){
 
var verval = "";
if(dagen){
     var vervalDatum = new Date(vandaag.getTime()+dagen*24*60*60*1000);
     verval = vervalDatum.toUTCString();
}
function getCookie(naam){
 
 var zoek = naam + "=";
 if (document.cookie.length>0){
      var begin = document.cookie.indexOf(zoek);
      if (begin!=-1){
           begin += zoek.length;
           var einde = document.cookie.indexOf(";", begin);
           if (einde==-1){
                einde = document.cookie.length;
           }
           return document.cookie.substring(begin, einde);
      }
 }
}
document.cookie = naam + "=" + waarde + ";expires=" + verval;
 var a=(getCookie('taal'));
  if(a=engels){  
document.getElementById('eng');
setCookie('taal',engels,1000);
window.location.href="engels.html";


  }
  if (a=frans){
document.getElementById('fr');
setCookie('taal',frans,1000);
window.location.href="frans.html";
  }
  if (a=nederlands){
document.getElementById('nl');
setCookie('taal',nederlands,1000);
window.location.href="nederlands.html";
  }
 


}








</script>
<title>JanPage</title>
<body>
<p>De keuzepagina:</p>
<nav><font weight="bold" face="arial"></font>
        <footer class="footer1"><font weight="bold" face="arial"> <font face="arial"><font


                weight="bold" face="arial">
            <table style="width: 1960px; height: 32px; background-color: blue; color: white;">
              <tbody>
                <tr>
                  <td style="width: 50px; background-color: blue;" width="50"><font face="arial" ><a id="fr" href="frans.html"></font>Français</font></a></td>               
  <td width="50"><a id="nl" href="nederlands.html" target="_top">Nederlands</a></td>
                  <td width="50"><a id="eng" href="engels.html">English</a><br>
                  </td></font>
                </tr>
              </tbody>
            </table>
          </font>
<h1><em>Welkom, Bienvenue, Welcome,</em></h1>
Kies uw taal:
<form>
<button type="submit" value="submit" onclick="myFunction()" id="ok">Vernietig Cookie</button>


</footer>
<script>
window.onload(){
  var a=(getCookie('taal'));
  if(a=engels){  
document.getElementById('eng');
  }
  if (a=frans){
document.getElementById('frans');
  }
  if (a=nederlands){
document.getElementById('nederlands')
  }


function myFunction(){
setCookie(taal,"",-1);
}
}
}
</script>


</html>

Ik begrijp dat je de functies setCookie en GetCookie niet door elkaar mag halen, maar bij gebrek aan alternatief…

btw. Denk je dat de meeste mensen dit zouden kunnen, leren?

Jan
 
Eerst even het volgende doen:
- Alle <font ...> en </font> eruit halen (mogen niet meer worden gebruikt).
- Dan alles netjes uitschrijven (met tab of spaties).

Als je dit doet dan kom je al rare dingen tegen zoals dit vreemde stukje html :rolleyes:

Code:
<tbody>
    <tr>
        <td style="width: 50px; background-color: blue;" width="50">
            <font face="arial" >
                <a id="fr" href="frans.html">
            </font>
            Français
        </font>
    </a>
</td>

Een tekst dik of dun is niet interessant als je JavaScript aan het leren ben ;)
 
Tip. Schrijf in gewoon Nederlands op wat elke function moet doen. Daarna ga je per function de code schrijven, je gaat niet met iets anders verder totdat de function is getest en goed werkt.

Als je dit doet dan wordt alles meer gestructureerd en heb je minder kans op fouten.

Vraag: als iemand per ongeluk "Frans" heeft gekozen, hoe komt hij dan op Nederlands?
Als je dit automatisch via een cookie laat doen dan is dit niet gebruikersvriendelijk, iets om over na te denken.

Code:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JanPage</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap-reboot.min.css">
</head>
<body>

<header>
    <h1><em>Welkom, Bienvenue, Welcome,</em></h1>
</header>

<main>
    <p>De keuzepagina:</p>
    <select id="taalkiezer">
        <option value="nl">Nederlands</option>
        <option value="en">English</option>
        <option value="fr">Français</option>
    </select>
</main>

<script>

// getCookie *** www.w3schools.com/js/js_cookies.asp
function getCookie (cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i <ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

// setCookie *** www.w3schools.com/js/js_cookies.asp
function setCookie (cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// zoekTaalCode : is er een cookie? verander dan de taalkeuze
function zoekTaalCode () {
    let taalcode = 'nl';
    let cookietaal = getCookie('taal');
    if (cookietaal != '') taalcode = cookietaal;
    return taalcode;
}

// gaNaarPagina. Ga naar pagina afhankelijk van taalcode
function gaNaarPagina (taalcode) {
    let paginaUrl = "nederlands.html";
    switch (taalcode) {
        case "en":
            paginaUrl = "engels.html";
            break;
        case "fr":
            paginaUrl = "frans.html";
            break;
        default:
            paginaUrl = "nederlands.html";
    }
    alert ("U wordt nu omgeleid naar pagina " + paginaUrl);
    // window.location.href = paginaUrl;
}

// *** Hoofdprogramma ***
var taalcode = zoekTaalCode();
gaNaarPagina (taalcode);

// als iemand een "change" doet bij de <select>
var taalselect = document.querySelector("#taalkiezer");
taalselect.addEventListener("change", function() {
    let taalcode = taalselect.value;
    console.log ("Gekozen taalcode is " + taalcode);
    // setCookie('taal', taalcode, 180);
    gaNaarPagina (taalcode);
});

</script>

</body>
</html>

Nog een voordeel. Als je weet dat elke function goed werkt kan je ze dichtklappen. Je hebt dan veel meer overzicht ;)

code-folding.jpg
 
Laatst bewerkt:
Ik heb er dit van gemaakt:
Wil toch liever dat er gebruik gemaakt wordt van de blauwe keuzebalk.
Ik heb een aantal zaken dus aangepast met getElementById bv. eng,nl en fr. Deze werken niet. De opdracht was nu eenmaal het werken met cookies.

Code:
<!DOCTYPE html><head>
<meta charset="utf-8">
<style>
  a{
    text-decoration:none;
    color: white;
  }
  table{
      font-family:Arial;
      font-weight:bold;
      color:white;
      text-decoration:none;
  }
</style>
<script>
  window.onload(){
    var vandaag = new Date();


function setCookie(naam,waarde,dagen){
 
var verval = "";
if(dagen){
     var vervalDatum = new Date(vandaag.getTime()+dagen*24*60*60*1000);
     verval = vervalDatum.toUTCString();
}
function getCookie(naam){
 
 var zoek = naam + "=";
 if (document.cookie.length>0){
      var begin = document.cookie.indexOf(zoek);
      if (begin!=-1){
           begin += zoek.length;
           var einde = document.cookie.indexOf(";", begin);
           if (einde==-1){
                einde = document.cookie.length;
           }
           return document.cookie.substring(begin, einde);
      }
 }
}
document.cookie = naam + "=" + waarde + ";expires=" + verval;
 var a=(getCookie('taal'));
  if(a=engels){  
document.getElementById('eng');
setCookie('taal',engels,1000);
window.location.href="engels.html";


  }
  if (a=frans){
document.getElementById('fr');
setCookie('taal',frans,1000);
window.location.href="frans.html";
  }
  if (a=nederlands){
document.getElementById('nl');
setCookie('taal',nederlands,1000);
window.location.href="nederlands.html";
  }
 


}








</script>
<title>JanPage</title>
<body>
<p>De keuzepagina:</p>
<nav><font weight="bold" face="arial"></font>
        <footer class="footer1"><font weight="bold" face="arial"> <font face="arial"><font


                weight="bold" face="arial">
            <table style="width: 1960px; height: 32px; background-color: blue; color: white;">
              <tbody>
                <tr>
                  <td style="width: 50px; background-color: blue;" width="50"><font face="arial" ><a id="fr" href="frans.html"></font>Français</font></a></td>               
  <td width="50"><a id="nl" href="nederlands.html" target="_top">Nederlands</a></td>
                  <td width="50"><a id="eng" href="engels.html">English</a><br>
                  </td></font>
                </tr>
              </tbody>
            </table>
          </font>
<h1><em>Welkom, Bienvenue, Welcome,</em></h1>
Kies uw taal:
<form>
<button type="submit" value="submit" onclick="myFunction()" id="ok">Vernietig Cookie</button>


</footer>
 
</main>


<script>




// getCookie *** www.w3schools.com/js/js_cookies.asp
function getCookie (cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i <ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}


// setCookie *** www.w3schools.com/js/js_cookies.asp
function setCookie (cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}


// zoekTaalCode : is er een cookie? verander dan de taalkeuze
function zoekTaalCode () {
    let taalcode = 'nl';
    let cookietaal = getCookie('taal');
    if (cookietaal != '') taalcode = cookietaal;
    return taalcode;
}


// gaNaarPagina. Ga naar pagina afhankelijk van taalcode
function gaNaarPagina (taalcode) {
    let paginaUrl = "taalkeuze2.html";
    switch (taalcode) {
        case "eng":
            paginaUrl = "engels.html";
            break;
           
        case "fr":
            paginaUrl = "frans.html";
            break;
        case "nl":
            paginaUrl ="nederlans.html";
        default:
            paginaUrl = "taalkeuze2.html";
    }
    alert ("U wordt nu omgeleid naar pagina " + paginaUrl);
    window.location.href = paginaUrl;
}


// *** Hoofdprogramma ***
var taalcode = zoekTaalCode();
gaNaarPagina (taalcode);




  var a=(getCookie('taal'));
  if(a=engels){  
document.getElementById('eng');
let taalcode="eng";
  }
  if (a=frans){
document.getElementById('fr');
let taalcode="fr";
  }
  if (a=nederlands){
document.getElementById('nl');
let taalcode="nl";
  }


function myFunction(){
setCookie(taal,"",-1);
}
taalselect.addEventListener("change", function() {
    let taalcode = taalselect.value;
    console.log ("Gekozen taalcode is " + taalcode);
    setCookie('taal', taalcode, 180);
    gaNaarPagina (taalcode);
});


</script>


</body>
</html>
 
Functie getCookie heb je geplaatst in functie setCookie.
Dit heeft consequenties, je kan dit hier niet doen.
Code:
window.onload(){
    var vandaag = new Date();
    function setCookie(naam,waarde,dagen){
        ...
        function getCookie(naam){
            ...
        }
        ...
    }
// waar is de }


Je declareert de functies getCookie en setCookie dubbel.
Code zomaar ergens kopiëren/plakken geeft altijd problemen.
Code:
// getCookie *** www.w3schools.com/js/js_cookies.asp
function getCookie (cname) {
    ....
}
// setCookie *** www.w3schools.com/js/js_cookies.asp
function setCookie (cname, cvalue, exdays) {
    ....
}

De JavaScript die je nu hebt zitten fouten in. Het is niet zo dat als je geen foutmelding(en) krijgt dat het dan goed werkt. Als je met deze code verder wilt kan ik je niet op de rit helpen. Html is uit vorige eeuw en JavaScript is spaghetti :rolleyes:
 
Dit is html/css van nu, ipv de oude table en font uit de vorige eeuw ;) ;)

Dit komt in het <head> gedeelte
Code:
<style>
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font: normal 14px/1.4 Arial, sans-serif;
}
#balk {
    display: flex;
    width: 100%;
    background-color: blue;
}
#balk a {
    display: block;
    width: 33.33%;
    padding: 5px 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }
</style>

Dit komt in het <body> gedeelte. Alle scripts komen hieronder te staan.
Code:
<p>De keuzepagina. Kies uw taal:</p>
<nav id="balk">
  <a id="fr"  class="text-left"   href="frans.html">Français</a>
  <a id="nl"  class="text-center" href="nederlands.html">Nederlands</a>
  <a id="eng" class="text-right"  href="engels.html">English</a>
</nav>
<h1><em>Welkom, Bienvenue, Welcome,</em></h1>
<button type="button" onclick="myFunction()" id="ok">Vernietig Cookie</button>

Omdat een <a href="..."> altijd direct naar een pagina gaat kan er hiermee geen cookie worden geplaatst.
Om dit op te lossen heb je een preventDefault nodig op deze manier
Code:
document.getElementById("fr").addEventListener("click", function (event) {
    event.preventDefault();
    // hier de taal in de cookie zetten, in dit geval 'fr'
    // en dan naar pagina 'frans.html' gaan
});
 
Antwoord

Niet slecht bedoeld, maar jouw html/css geeft bij mij geen blauwe balk. Mijn blauwe balk zag er precies uit als op de afbeelding, hoe hij eruit moet zien. Never change a winning team.

Ook de javaScript verandert bij mij helaas niets…


Ik begrijp dat mijn JavaScript op een spaghetti lijkt, maar ik vind wel dat je heel wat moet intypen om gewoon simpelweg een cookie te plaatsen, hem te lezen en naar de juiste pagina te gaan. Te veel om het voor mij interessant te houden.

Love the good old BASIC times… :rolleyes:
 
Standaard template

Gebruik dit bij elke oefening. Daarmee voorkom je al rare dingen.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JanPage</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap-reboot.min.css">
<style>
[B]/* hier komt jouw css */[/B]
</style>
</head>
<body>
[B]<!-- hier komt jouw html -->[/B]
<script>
[B]// hier komt jouw JavaScript[/B]
</script>
</body>
</html>

regel 5 (viewport) is voor kleine schermen zoals smartphone
regel 7 (reboot.min.css) geeft alvast wat standaard vormgeving + haalt kleine browser bugs uit de css


Oja, over oldtime Basic, dat is nr. 1 in spaghetti vanwege z'n "goto anywhere & nowhere", 1 foutje was je dagen aan kwijt
 
Laatst bewerkt:
html en css voor knoppenbalk

Dan de html en css van jouw oefening.

1. Verwijder alle html, css, javascript, tekst, enzovoort uit je pagina. De pagina is dan helemaal leeg.

2. Zet nu eerst de html van het bericht #11 hierboven in je pagina.

3. Zet dan deze html op de juiste plek.
Code:
<header>
  <p>De keuzepagina. Kies uw taal:</p>
</header>

<nav id="balk">
  <a id="fr"  class="text-left"   href="frans.html">Français</a>
  <a id="nl"  class="text-center" href="nederlands.html">Nederlands</a>
  <a id="eng" class="text-right"  href="engels.html">English</a>
</nav>

<main>
  <h1><em>Welkom, Bienvenue, Welcome,</em></h1>
  <button type="button" onclick="deleteCookie('taal')">Vernietig Cookie</button>
</main>

4. Zet voor de blauwe balk deze css op de juiste plek.
Code:
main, header {
  padding: 5px 12px;
}
#balk {
  display: flex;
  width: 100%;
  background-color: blue;
}
#balk a {
  display: block;
  width: 33.333%;
  padding: 5px 12px;
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

Zoals je ziet hoeft er geen lettertype ofzo opgegeven te worden want dat staat al in "reboot.min.css"
 
Laatst bewerkt:
JavaScript voor cookies en knoppenbalk

Nu de JavaScript, daar gaat het om in de oefening.
Zet alle JavaScript code op de juiste plek zoals ik heb aangegeven in bericht #11.

Eerst de 3 cookie functies. Die had je ook kunnen kopiëren/plakken vanaf de W3schools website
Code:
function getCookie (cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i <ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

function setCookie (cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function deleteCookie (cname) {
    document.cookie =  cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

Dan wil je weten of er een cookie is. De taalcode = "" (leeg) als er geen cookie is.
Code:
function zoekTaalCode () {
    let taalcode = '';
    let cookietaal = getCookie('taal');
    if (cookietaal != '') taalcode = cookietaal;
    return taalcode;
}

Je wilt (afhankelijk van de taal) naar een bepaalde pagina.
Code:
function gaNaarPagina (taalcode) {
    let paginaUrl = "";
    switch (taalcode) {
        case "nl":
            paginaUrl = "nederlands.html";
            break;
        case "eng":
            paginaUrl = "engels.html";
            break;
        case "fr":
            paginaUrl = "frans.html";
            break;
        default:
            paginaUrl = "taalkeuze2.html";
    }
    alert ("U wordt nu omgeleid naar pagina " + paginaUrl);
    // window.location.href = paginaUrl;
}

Het hoofdprogramma is nu klein omdat we functions gebruiken.
Code:
let taalcode = zoekTaalCode();
if (taalcode != '') {
    gaNaarPagina (taalcode);
} else {
    alert ('Er is nog geen taal gekozen.');
}

Als je op een <a> klikt ga je direct naar een pagina en kan er geen cookie worden ingesteld !! Om te voorkomen dat de <a> naar een pagina gaat is een preventDefault() nodig.
Hoe dit te doen: Laat JavaScript "luisteren" naar een "click" op de <a> van de balk en doe dan een preventDefault() . Daarna heb je de mogelijkheid om een cookie te plaatsen en andere dingen te doen.
Code:
document.querySelectorAll("#balk a").forEach( function (knop) {
    knop.addEventListener("click", function (event) {
        event.preventDefault();
        // opmerking. [B]this[/B] is de knop waarop is geklikt
        setCookie ('taal', this.id, 180);
        gaNaarPagina (this.id);
    });
});

Lang verhaal maar misschien is het nu duidelijker.
 
Laatst bewerkt:
Ik kan mij voorstellen dat het laatste stukje over de preventDefault() niet bekend overkomt. Een rechttoe-rechtaan oplossing (minder flexibel, meer coderegels) kan ook.

Haal de volgende regels weg:
Code:
document.querySelectorAll("#balk a").forEach( function (knop) {
    knop.addEventListener("click", function (event) {
        event.preventDefault();
        // opmerking. this is de knop waarop is geklikt
        setCookie ('taal', this.id, 180);
        gaNaarPagina (this.id);
    });
});

en zet dit ervoor in de plaats:
Code:
let knopNL = document.getElementById("nl");
knopNL.addEventListener("click", function (event) {
    event.preventDefault();
    setCookie ('taal', "nl", 180);
    gaNaarPagina ("nl");
});
let knopFR = document.getElementById("fr");
knopFR.addEventListener("click", function (event) {
    event.preventDefault();
    setCookie ('taal', "fr", 180);
    gaNaarPagina ("fr");
});
let knopENG = document.getElementById("eng");
knopENG.addEventListener("click", function (event) {
    event.preventDefault();
    setCookie ('taal', "eng", 180);
    gaNaarPagina ("eng");
});
 
Fouten

Ik heb helaas nog teveel fouten erin staan om het werkende te krijgen.

Ik heb de functie cookieWeghalen gemaakt, maar er staat cooKieWeghalen is not defined. Maar heb ze wel gedefinieerd.

Atom geeft geen fouten meer weer.

Ga er mee stoppen voor vandaag.

Groetjes.
 
Ik had vanmiddag als laatste de html van de button veranderd in:
Code:
<button type="button" onclick="deleteCookie('taal')">Vernietig Cookie</button>
 
Heb je deze overgenomen in je pagina (eerst even nakijken, zet 'm er niet dubbel in)
Code:
function deleteCookie (cname) {
    document.cookie =  cname + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
 
Laatst bewerkt:
Als ik de code van #11, #12 en #13 overneem in een leeg bestand dan werkt het hier goed.

Opmerking: het is natuurlijk wel zo dat als je eenmaal een taal hebt gekozen je de cookie niet met de knop kan weghalen omdat je direct wordt omgeleid naar de "taalpagina".
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan