Recent Changes - Search:

Language

2009/2010

(archief) 2008/2009

Meta

edit

J0910 /

S3-Les13

We hebben in de klas enkele versimpelde javascript functies geschreven om cookies te gebruiken voor de stemwijzer, zie Javascript in de klas geschreven

Stateless protocol
HTTP (Html/WWW) is een 'stateless protocol', dit betekent dat er tussen de verschillende bezoeken aan een pagina geen verband bestaat, voor een server is iedere pageview uniek. Om toch te kunnen weten of iemand bijvoorbeeld heeft ingelogd kan gebruik worden gemaakt van sessies/cookies. Een cookie is een klein stukje informatie (bijvoorbeeld een identificatienummer), dat door de server op de computer van de bezoeker (client) wordt opgeslagen en bij ieder volgend bezoek weer naar de server wordt verstuurd. Op deze manier kan de server verschillende bezoeken aan elkaar linken tot een 'sessie' en hoeft de bezoeker niet telkens opnieuw in te loggen.

Scripting (programmeertalen)
Naast HTML, een statische taal vergelijkbaar met een simpel text bestand, bestaan er ook 'actieve' talen, ofwel programmeertalen/script-talen, dus talen die worden uitgevoerd en 'iets doen'. Cookies kunnen vanaf de server-side worden verstuurd door een script-taal (zoals php), maar ook aan de client-side (vanuit de browser) worden opgeslagen door bijvoorbeeld javascript. Javascript is een script-taal die in de browser uitgevoerd wordt, andere talen zoals PHP en Python zijn script-talen die op de server worden uitgevoerd: 

CLIENT       vs     SERVER
HTML                HTML (statisch)
Javascript          PHP, Python, CGI, ASP, etc. (scripting:
                                                - maken verbinding met bv een database en;
                                                - genereren HTML/Javascript voor de browser)
                    MySQL, etc. (database)

Cookies
Zie wikipedia:cookies
Voor een versimpelde versie van deze functies en het werken met cookies, zie hieronder: Javascript in de klas geschreven
Cookie opslaan (meerdere cookies met verschillende namen mogelijk): 

// Simpelst, cookie wordt verwijderd als browser wordt afgesloten:
document.cookie = "cookie1=testcookie"

// of (vollediger):
document.cookie = "cookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/"

Cookie uitlezen: 

// Een cookie is niets anders dan een regel tekst:
window.alert( document.cookie );

// of (als je firebug geïnstalleerd hebt):
console.log( document.cookie );

Javascript in de klas geschreven:
Window.alert geeft een alert ('OK') popup, console.log laat dingen in de firebug console zien (mits firebug geinstalleerd is): 

<script type="text/javascript">

window.alert('Hello world');
console.log('Hello world');

</script>

Functie die hele tientjes uitrekent voor bedrag (functies zijn kant-en-klare, herbruikbare stukjes code); 

hoeveeltientjes = function( lunchgeld ){
	tientjes = Math.floor( lunchgeld/10 );
	//window.alert( tientjes );
	console.log( tientjes );
}

Waardes wegschrijven in cookie (en uitlezen in firebug): 

document.cookie = "76=actief";
document.cookie = "79=ook actief";
document.cookie = "76=inactief";
console.log( document.cookie );

Javascript cookie-functies voor de stemwijzer

Onze in de klas geschreven functies om cookies weg te schrijven en weer uit te lezen (functies zijn kant-en-klare, herbruikbare stukjes code, kopieer deze functies in je <head>): 

schrijfCookie = function( vraag, antwoord ) {
	document.cookie = vraag + "=" + antwoord;
	return vraag + "=" + antwoord ;
}

leesCookie = function( welkevraag ) {
	welkevraag = welkevraag + "=";
	if( document.cookie.indexOf(welkevraag)==-1 ){ return false; }
	antwoord = document.cookie.split( welkevraag )[1];
	antwoord = antwoord.split(';')[0];
	return antwoord ;
}

deleteCookie = function(name) {
	var date = new Date();
	date.setTime(date.getTime()+(-1*24*60*60*1000));
	schrijfCookie(name+'=; expires='+date.toGMTString());	
}

deleteAllCookies = function(){
	var cookies = document.cookie.split(";");
	for (var i = 0; i < cookies.length; i++) {
		deleteCookie( cookies[i].split("=")[0] );
	}
}

getNextCookiename = function(  ) {
	nextcookiename = document.cookie.split( '=' )[0];
	// Deze regel delete de eerstvolgende cookie in de browser:
	deleteCookie =( nextcookiename ); 
	//window.location = nextcookiename; // (ga naar naam van cookie als url)
	return nextcookiename;
}

En de bijbehorende html ('onclick=' kun je op ieder item in een pagina toepassen, bijvoorbeeld ook plaatjes in plaats van buttons): 

Vraag 1: Mag ik u een paar vragen stellen? 
<input type="button" onclick="schrijfCookie('vraag1','ja')" value="Ja !" />
<input type="button" onclick="schrijfCookie('vraag1','nee')" value="Nee !" />
<br />
Vraag 2: Mag ik u een paar vragen stellen?
<input type="button" onclick="schrijfCookie('vraag2','ja')" value="Ja !" />
<input type="button" onclick="schrijfCookie('vraag2','nee')" value="Nee !" />
<br />
Vraag 3: Mag ik u een paar vragen stellen?
<input type="button" onclick="schrijfCookie('vraag3','ja')" value="Ja !" />
<input type="button" onclick="schrijfCookie('vraag3','nee')" value="Nee !" /> 
<br />
<input type="button" onclick="leesCookie('vraag2')" value="Lees antwoord voor vraag 2" />

Iets doen met de opgeslagen cookies

Ga naar de volgende opgeslagen cookie als url (moet dus bv. worden opgeslagen als 'vraag1.html'): 

 
<img src="nextquestion.jpg" onclick="window.location=getNextCookiename();" />

Maak niet-actieve vragen op de pagina onzichtbaar: 

<head>
<script>
...
showHideVragen = function(){
	if(leesCookie('vraag1')==false){ 
		document.getElementById('vraag1').style.display='none'; }
	if(leesCookie('vraag2')==false){ 
		document.getElementById('vraag2').style.display='none'; }
	if(leesCookie('vraag3')==false){  
		document.getElementById('vraag3').style.display='none'; }
	//etc.
}
</script>
</head>
<body onload="showHideVragen();">
	<div id="vraag1"> <content of div /> </div>
	<div id="vraag2"> <content of div /> </div>
	<div id="vraag3"> <content of div /> </div>
</body>

(advanced):

Ieder Javascript framework werkt ook wel met cookies, de vraag is alleen of dit de moeite waard is... Oordeel zelf: jquery:cookies

Margareth: http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

PPK originele cookie functies

Dit zijn de originele functies van PPK voor gebruik van cookies vanuit javascript, de door ons geschreven functies doen hetzelfde maar zijn iets vereenvoudigd):

(Zelf doen/doorlezen!; PPK on Cookies vanuit Javascript) 

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

De functies worden gebruikt op deze manier: 

// cookie plaatsen:
createCookie('cookie','testcookie',7);

// cookie lezen (en er iets mee doen):
var x = readCookie('cookie1');
if (x) {
	[do something with x]
}

// cookie deleten:
eraseCookie('ppkcookie');


var imgList = Array();
imgList['op'] = "pagina_afbeeldingen/stemwijzer_def_DEF40.jpg";
imgList['pvda'] = "pagina_afbeeldingen/stemwijzer_def_DEF33.jpg";
imgList['vvd'] = "pagina_afbeeldingen/stemwijzer_def_DEF34.jpg";
imgList['groenl'] = "pagina_afbeeldingen/stemwijzer_def_DEF37.jpg";
imgList['d66'] = "pagina_afbeeldingen/stemwijzer_def_DEF35.jpg";
imgList['chrunie'] = "pagina_afbeeldingen/stemwijzer_def_DEF39.jpg";
imgList['cda'] = "pagina_afbeeldingen/stemwijzer_def_DEF36.jpg";
imgList['bvd'] = "pagina_afbeeldingen/stemwijzer_def_DEF38.jpg";
/*for (img in imgList){
  document.write(imgList[img] + "<br />");
}*/

/*for(i=1; i<=15; i++){
	document.write( leesCookie('vraag'+i) +"</br>" );
}*/
var op =0;
var pvda =0;
var vvd =0;
var groenl =0;
var d66 =0;
var chrunie =0;
var cda =0;
var bvd =0;

if(leesCookie('vraag1')=='eens'){ bvd++; }
 if(leesCookie('vraag1')=='neutraal'){ ++; }
 if(leesCookie('vraag1')=='oneens'){ ++; ++; }
if(leesCookie('vraag2')=='eens'){ ++; ++; }
 if(leesCookie('vraag2')=='neutraal'){ ++; ++; }
 if(leesCookie('vraag2')=='oneens'){ bvd++; ++; }
if(leesCookie('vraag3')=='eens'){ ++; ++; }
 if(leesCookie('vraag3')=='neutraal'){ ++; }
 if(leesCookie('vraag3')=='oneens'){ ++; ++; }
if(leesCookie('vraag4')=='eens'){ ++; ++; }
 if(leesCookie('vraag4')=='neutraal'){ ++; ++; }
 if(leesCookie('vraag4')=='oneens'){ ++; ++; }
if(leesCookie('vraag5')=='eens'){ ++; ++; }
 if(leesCookie('vraag5')=='neutraal'){ ++; }
 if(leesCookie('vraag5')=='oneens'){ ++; ++; }
if(leesCookie('vraag6')=='eens'){ ++; ++; }
 if(leesCookie('vraag6')=='neutraal'){ ++; ++; }
 if(leesCookie('vraag6')=='oneens'){ ++; ++; }
if(leesCookie('vraag7')=='eens'){ ++; ++; }
 if(leesCookie('vraag7')=='neutraal'){ ++; }
 if(leesCookie('vraag7')=='oneens'){ ++; ++; }
if(leesCookie('vraag8')=='eens'){ ++; ++; }
 if(leesCookie('vraag8')=='neutraal'){ ++; ++; }
 if(leesCookie('vraag8')=='oneens'){ ++; ++; }
if(leesCookie('vraag9')=='eens'){ ++; ++; }
 if(leesCookie('vraag9')=='neutraal'){ ++; }
 if(leesCookie('vraag9')=='oneens'){ op++; pvda++; }
if(leesCookie('vraag10')=='eens'){ op++; pvda++; }
 if(leesCookie('vraag10')=='neutraal'){ op++; pvda++; }
 if(leesCookie('vraag10')=='oneens'){ op++; pvda++; }
if(leesCookie('vraag11')=='eens'){ op++; pvda++; }
 if(leesCookie('vraag11')=='neutraal'){ pvda++; }
 if(leesCookie('vraag11')=='oneens'){ op++; pvda++; }
if(leesCookie('vraag12')=='eens'){ op++; pvda++; }
 if(leesCookie('vraag12')=='neutraal'){ op++; pvda++; }
 if(leesCookie('vraag12')=='oneens'){ op++; pvda++; }
if(leesCookie('vraag13')=='eens'){ op++; pvda++; }
 if(leesCookie('vraag13')=='neutraal'){ pvda++; }
 if(leesCookie('vraag13')=='oneens'){ op++; pvda++; }
if(leesCookie('vraag14')=='eens'){ op++; pvda++; }
 if(leesCookie('vraag14')=='neutraal'){ op++; pvda++; }
 if(leesCookie('vraag14')=='oneens'){ op++; pvda++; }
if(leesCookie('vraag15')=='eens'){ op++; pvda++; }
 if(leesCookie('vraag15')=='neutraal'){ op++; pvda++; }
 if(leesCookie('vraag15')=='oneens'){ op++; pvda++; }

</script>
Edit - History - Print - Recent Changes - Search
Page last modified on January 20, 2010, at 08:01 AM