Jump to content

OWN

  • artikelen
    5186
  • reacties
    17587
  • bezichtigingen
    1590288

OWN #197 - HTML-cursus


OWN

366 bezichtigingen

Hoeveel procent heb je GTA Vice City uitgespeelt?  

91 leden hebben gestemd

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

gallery_108553_47_16273.png

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.

Berekeningen

Alle scholen zijn inmiddels wel weer begonnen, en in de statusupdates is duidelijk te zien hoe fijn iedereen dat weer vindt. Wiskunde is natuurlijk altijd een erg leuk vak. Hoe zou je het nou vinden als je op internet met onderstaand script snel bepaalde berekeningen kan maken? Leuk? Lees dan maar snel verder.

htmlcursus197.png

1. <script type="text/javascript">
2. function cent(amount) {
3. 	return (amount == Math.floor(amount)) ? amount + ',00' : (  (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
4. }
5. 
6. function update(form) {
7. 	if (document.getElementById) {
8. 		hoeveelheid=document.getElementById("quantity")
9. 		eenheid=document.getElementById("unitcost")
10. 		sub=document.getElementById("subtotal")
11. 		btw=document.getElementById("tax")
12. 		totaal=document.getElementById("total")
13. 		var subtotal = (hoeveelheid.value - 0) * (eenheid.value - 0);
14. 		subtotal = Math.floor(subtotal * 1000)/1000;
15. 		sub.value = '€' + cent(subtotal);
16. 		var tax = subtotal / 100 * (form.rate.value - 0);
17. 		tax = Math.floor(tax * 1000)/1000;
18. 		btw.value = '€' + cent(tax);
19. 		total = subtotal + tax;
20. 		total = Math.floor(total * 1000)/1000;
21. 		totaal.value = '€' + cent(total);
22. 		}
23. }
24. </script>
25. 
26. <form>
27. <table>
28. <tr><td align="right">Hoeveelheid:</td><td><input type="text" id="quantity" size="8"></td></tr>
29. <tr><td align="right">Kost per eenheid:</td><td><input type="text" id="unitcost" value=""size="8"></td></tr>
30. <tr><td align="right">BTW (%): </td><td><input type="text" id="rate" value="19"size="8"></td></tr>
31. <tr><td align="right">Subtotaal: </td><td><input type="text" id="subtotal"size="8"></td></tr>
32. <tr><td align="right">BTW: </td><td><input type="text" id="tax"size="8"></td></tr>
33. <tr><td align="right">Totaal: </td><td><input type="text" id="total"size="8"></td></tr>
34. <tr><td> </td><td><input type="button" onclick="update(this.form)" value="Bereken" /></td></tr>
35. </table>
36. </form>



De code doet veel zelf, maar natuurlijk niet alles. Jij moet alleen de bovenste twee invullen, en op Bereken klikken. Vervolgens krijg je het resultaat te zien. De code ziet er misschien erg lastig uit, maar dat komt voornamelijk door het grote aantal tekens. Bepaalde dingen moet je wel weten, zoals waar Math.floor() voor staat. Dit haalt namelijk de decimalen weg bij je getallen. Om het simpel te maken, hieronder een klein voorbeeld:

<script type=text/javascript>
var i = 21.4568
document.write(Math.floor(i))
</script>



Als resultaat krijg je 21.

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.

Gast
Reactie toevoegen...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...