OWN #199 - HTML-cursus
Deze rubriek is geschreven door Kloep!
In deze rubriek maken we gebruik van het programma Notepad++ en Google Chrome. Hierdoor kunnen er kleine verschillen zijn in je eigen situatie. In sommige gevallen geeft Chrome de codes anders weer als bijvoorbeeld Internet Explorer of Firefox.
Kalender
<html> <head> <style type="text/css"> .main { width:200px; border:1px solid black; } .month { background-color:black; font:bold 12px verdana; color:white; } .daysofweek { background-color:gray; font:bold 12px verdana; color:white; } .days { font-size: 12px; font-family:verdana; color:black; background-color: white; padding: 2px; } .days #today{ font-weight: bold; color: red; } </style> </head> <body> <script type="text/javascript"> function buildCal(m, y, cM, cH, cDW, cD, brdr) { var mn=['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','October','November','December']; var dim=[31,0,31,30,31,30,31,31,30,31,30,31]; var oD = new Date(y, m-1, 1); oD.od=oD.getDay()+1; var todaydate=new Date() var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))|| (oD.getFullYear()%400==0))?29:28; var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">'; t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">'; for(s=0;s<7;s++) { t+='<td class="'+cDW+'">'+"ZMDWDVZ".substr(s,1)+'</td>'; } t+='</tr><tr align="center">'; for(i=1;i<=42;i++){ var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' '; if (x==scanfortoday) { x='<span id="today">'+x+'</span>' } t+='<td class="'+cD+'">'+x+'</td>'; if(((i)%7==0)&&(i<36)){ t+='</tr><tr align="center">' }; } return t+='</tr></table></div>'; } var todaydate=new Date() var curmonth=todaydate.getMonth()+1 var curyear=todaydate.getFullYear() document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); </script> </body> </html>
Hieronder is het resultaat te zien:
Je ziet dat het een redelijk ingewikkelde code is. Ik zal het hier dan ook zo goed en volledig mogelijk uitleggen. Je begint met een CSS, dit is nodig om aan te geven welke kleuren je gebruikt, en hoe je tabel eruit komt te zien. Ik heb gekozen voor zwarte randen, verschillende achtergronden en een zwarte tekst. De huidige dag wordt dikgedrukt en rood gemaakt. Hoe je wilt dat dit eruit komt te zien, is natuurlijk helemaal aan jezelf. Dit kan en mag je naar hartelust wijzigen.
Na de CSS krijgen we het script, waar het natuurlijk uiteindelijk om draait. Je ziet dat er een aantal variabelen worden gemaakt, met de juiste waardes erachter. Zo zie je bijvoorbeeld bij de eerste (variabele "mn") dat daarachter alle maanden worden weergeven. Let er op, tussen de javascriptcode die zichtbaar is, zie je ook regelmatig een HTML-code verschijnen. Dit is nodig om de tabel te krijgen.
Vorige week kreeg ik de vraag waar hij de informatie van bijvoorbeeld getFullYear vandaan haalt. Dit is een goede vraag, omdat dit nergens in deze code te zien is. Nu had ik werkelijk geen idee waar hij het precies vandaan haalt, maar het klopt wel dat je dit niet in je code hoeft aan te geven.
Wat lijkt op getFullYear is getYear. Deze zou ik zo goed als nooit gebruiken. Deze geeft namelijk niet het volledige jaartal mee, maar slechts 2 of 3 cijfers. Hij begint met tellen bij het jaar 1900. Het jaar 1999 laat hij dus zien als '99', 2010 als '110'. Ook doet hij wat leuks met het jaar 1890, hierbij krijg je het jaar '-10' te zien. Gebruik dus gewoon altijd getFullYear.
En dat was het dan alweer voor deze week. Hopelijk tot de volgende keer!
0 reacties
Recommended Comments
Er zijn geen reacties om weer te geven.