OWN #196 - HTML-cursus

Artikel geplaatst door OWN 4 september 2010

401 bezichtigingen

https://gtagames.nl/blogs/entry/5052-own-196-html-cursus/

Volgers 0

Hoeveel procent heb je GTA Vice City uitgespeelt?
91 leden hebben gestemd

1. Hoeveel procent heb je GTA Vice City uitgespeelt?
- 10%
  
  5
- 20%
  
  6
- 30%
  
  1
- 40%
  
  2
- 50%
  
  11
- 60%
  
  6
- 70%
  
  4
- 80%
  
  7
- 90%
  
  40
- 100%
  
  0

This poll is closed to new votes

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.

Huidige tijd.

Vorige week hadden we een simpele code die je de huidige datum en tijd laad zien. Deze week bekijken we een lastigere code die de tijd aangeeft, in een dynamische tabel. Hieronder is het resultaat te zien, daaronder de code:

1. <div id="klok"></div>
2. <script type="text/javascript">
3. 	function showtime(){
4. 		if (!document.all && !document.getElementById) {
5. 			return
6. 		}
7. 		thelement = document.getElementById ? document.getElementById("klok") :
8. 		document.all.klok
9. 		var Digital = new Date()
10. 		var hours=Digital.getHours()
11. 		var minutes=Digital.getMinutes()
12. 		var seconds=Digital.getSeconds()
13. 		var dn = "PM"
14. 
15. 		if (hours < 12) {
16. 			dn = "AM"
17. 		}
18. 		if (hours > 12) {
19. 			hours = hours - 12
20. 		}
21. 		if (hours == 0) {
22. 			hours = 12
23. 		}
24. 		if (minutes <= 9) {
25. 			minutes="0" + minutes
26. 		}
27. 		if (seconds <= 9) {
28. 			seconds="0" + seconds
29. 		}
30. 	var ctime="<input class='klok' type='text' value='" + hours+"' /><input class='klok' type='text' value='"+minutes + "' /><input class='klok' type='text' value='" + seconds+"' />" + dn
31. 	thelement.innerHTML = "Tijd:" + ctime
32. 	setTimeout("showtime()" ,1000)
33. 	}
34. window.onload = showtime
35. </script>

Een lange code, en ook een redelijk lastige. In deze code wordt met AM en PM gewerkt, omdat ik gewoonweg niet weet hoe ik hierin een 24-uurs klok moet verwerken. Voor de duidelijkheid: AM = 's ochtends en PM is 's middags. In het voorbeeld staat er dus bij het aantal uren een 3, en er staat PM. Dit kun je dus lezen als 15:10 uur. Als je deze code invoert, en uittest, zul je zien dat de secondes veranderen. Zo heb je dus altijd de juiste tijd bij de hand. De code is nu zo ingesteld dat je het in vakjes krijgt (te herkennen aan <input>), natuurlijk kun je dit zelf wijzigen naar wat je zelf wilt. Puzzel er maar wat mee. Vragen kun je me natuurlijk altijd stellen.