Vincent's Weblog - Snelheid convertor tutorial

Een paar posts geleden had ik een temperatuur convertor gemaakt, en nu heb ik een snelheid convertor gemaakt. Het principe is eigenlijk voor beide hetzelfde. Het zijn enkel de formules die verschillend zijn.

De basis

Eerst zul je een nieuw .html bestand moeten maken. Je kan deze bewerken in visual studio code of atom

Eerst zullen we de basisstructuur van een html bestand moeten aanmaken. Hieronder staat een basis html document

<html>
    <head>
        <title>Snelheid convertor</title>
    </head>
    <body>

    </body>
</html>

Het script

Dan zul je tussen de </head> en de <body> tag een <script> tag moeten aanmaken. sluit deze af met </script> Daar gebeurt het omvormingswerk. Binnen de script tags kunnen we javascript gebruiken om de functies te maken. Ik ga voor deze tutorial een eenvoudige functie maken om kilometer per uur om te zetten in knopen. Hiervoor maak je best een functie. in dit geval gaat dit zo:

function temperatuurConvertorKphToKts(valNum) {

}

Waar valNum de waarde is die we gaan gebruiken voor de functie. Eerst moeten we er een decimaal getal van maken of een float. Dat kunnen we doen met parseFloat(valNum)

Dan is het eigenlijk enkel nog de formule die we moeten kennen. In dit geval is dat de snelheid in kph gedeeld door 1.852. En om deze waarde weer te geven in het html document gaan we document.getElementById("outputKnots").innerHTML = valNum / 1.852; gebruiken

function temperatuurConvertorKphToKts(valNum) {
  valNum = ParseFloat(valNum);
  document.getElementById("outputKnots").innerHTML = valNum / 1.852"
}

Deze stappen kun je herhalen voor andere conversies, waar je dus gewoon de formule moet aanpassen.

De invoer

Hiervoor gaan we een <input> tag gebruiken. plaats dit binnen de <body> tags:

<input id="inputKPH" type="number" placeholder="KPH" oninput="ConvertKPHToKnots(this.value)" onchange="ConvertKPHToKnots(this.value)">

de oninput en onchange argumenten zorgen dat de functie die we hierboven hebben aangeduid worden uitgevoerd vanaf er iets in ingevoerd, en vanaf het veranderd. Maar nu moeten we het resultaat nog weergeven. Dat kunnen we doen door simpelweg een <span> element met het id dat we hiervoor hebben gebruikt in het script, namelijk "outputKnots" namelijk zo:

<span id="outputKnots"></span>

Hier vind je voor de duidelijkheid de volledige code.