Jump to content

OWN

  • artikelen
    5186
  • reacties
    17587
  • bezichtigingen
    1590322

Editie 183 - HTML-cursus


OWN

404 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_10996.gif

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.

Vorige week ging het even mis. Ik was bezig met een code, en later bleek deze niet te werken. Altijd frustrerend, zeker zo dicht bij je deadline. Maar goed, dat is het risico van deze rubriek. Deze week heb ik me met een andere code bezig gehouden. We gaan Enter uitschakelen, en een wachtwoord op onze pagina zetten. Lees maar snel verder.

Enter uitschakelen

Dit komt vooral van pas bij formulieren, waar we het ook in ons voorbeeld mee gaan gebruiken. Als je het formulier bijna ingevuld hebt, is het erg vervelend als je per ongeluk op Enter klikt, en alles vervolgens weg is. Daarom kun je deze met een simpele code uitschakelen voor het formulier. Bekijk de benodigde code hieronder maar eens:

<form onsubmit="return false">
<imput type="tekst" />
<input type="button" value="Versturen" onclick="this.form.submit()">
</form>



Hiermee krijg je de knop "Versturen" mee te zien, en Enter werkt hier niet bij (tenzij je de knop geselecteerd hebt (kun je herkennen aan een stippellijn om de tekst heen)).

Wachtwoord instellen

Sommige pagina's, daar hebben anderen niks mee te maken. Dit kun je dan beveiligen met een wachtwoord. Dit gebeurt met onderstaande Javascriptcode.

<script type="text/javascript">
wachtwoord = prompt("Vul hier je wachtwoord in aub");
if (wachtwoord = "Wachtwoord") {
	alert("Het wachtwoord is juist.")
};

if (wachtwoord != "Wachtwoord") {
	alert("Het wachtwoord is onjuist, probeer het opnieuw.")
	window.location='wachtwoord.html'
};
</script>



De code heeft wel wat uitleg nodig:

  • Daar waar je 'Wachtwoord' tussen aanhalingstekens ziet staan, moet je zelf het wachtwoord invullen. Dit is op twee plaatsen.

Op 'Vul hier je wachtwoord in aub', plaats je de tekst die voor het invulvak komt te staan.
Op 'het wachtwoord is juist.' plaats je de tekst die zichtbaar wordt als het wachtwoord correct is ingevuld.
op 'Het wachtwoord is onjuist, probeer het opnieuw.' plaats je de tekst die zichtbaar wordt bij het verkeerd invullen.
Op 'wachtwoord.html' plaats je de link waar je naartoe moet gaan na het invullen van het wachtwoord.



Denk er wel aan, dit is geen waterdichte manier. Het is de eenvoudigste manier, maar zeker niet de meest veilige!

En we hebben weer nieuwe codes geleerd van Javascript. Hopelijk tot volgende week!

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