OWN #199 - HTML-cursus

Artikel geplaatst door OWN 25 september 2010

354 bezichtigingen

https://gtagames.nl/blogs/entry/5144-own-199-html-cursus/

Deze rubriek is geschreven door Kloep!

Hallo, en welkom bij de HTML-cursus van OWN. In deze rubriek ga ik (Kloep) zaken vertellen die handig zijn om te weten als je met HTML aan de slag gaat. Later zullen we HTML verder gaan uitwerken, dit ook onder andere met behulp van CSS. Als we dit allemaal hebben gehad, gaan we over naar wat Javascript. In het begin zullen we dus met de basis beginnen, maar zonder deze basis kun je niet verder komen. In deze cursus zul niet alleen lappen tekst te zien krijgen, maar alles zal worden uitgelegd door middel van afbeeldingen. Hierdoor zullen het geen saaie lange verhalen worden, maar zal alles in kleine stappen worden uitgelegd.

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

Nu gaan we eens kijken naar een lekkere lange code. We gaan namelijk een kalender fabriceren, die ook aangeeft welke dag het vandaag is. Normaal geef ik er ook regelnummers bij. Nou lijkt het mij handig als je deze code zo kunt kopiëren, dus ik geef ze er deze keer niet bij. Kijk eerst maar eens naar de code.

<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.