Dynamic character counter in JavaScript

For a new textbook on JavaScript programming I wrote a small function to count the characters in a textarea (or another input element). The function displays the characters left (max. characters minus characters used) in a corresponding span element – just like Twitter does when writing a tweet.

The function showCharacterCount has three parameters.

  1. The textarea (or input element) to be counted, on which the keyup event must be bound. This way, the function will update the number of characters left on every keystroke.
  2. The span element which will contain the number of characters left. Contrary to common practice, this argument must be a DOM object and not a string referring to the id of an object. Although other ways of doing this are available, this way satisfies the purpose of the example in the textbook the best. The reasons for this are consistency in argument handling and predictability.
  3. The maximum number of characters allowed in the textarea (optional). If this argument (integer) is not supplied, it will be set to the default of 150 characters.

The code (HTML, CSS, JavaScript) is supplied below. You can find a working example of the code here: http://www.reuneker.nl/files/code/character-counter/index.html.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Character counter</title>
		<style type="text/css">
			*, body {
				font-family: Arial, sans-serif;
				font-size: 1em;
			}
			h1 {
				font-size: 2em;
			}
			textarea {
				width: 80%;
				min-width: 400px;
				max-width: 600px;
			}
			label {
				display: block;
			}
		</style>
		<script type="text/javascript">
			//count the characters in a textarea and write maxLength minus the number of characters to the corresponding span section
			function showCharacterCount(textarea, span, maxLength) {
				if (maxLength === undefined) { //if maxLength parameter is not defined, set it to 150
    				var maxLength = 150;
    			}
				var messageLength = textarea.value.length; //get length of textarea value
				span.innerHTML = maxLength - messageLength; //write to the span's innerHTML the result of maxLength - messageLength
				return True; //not entirely necessary, but good practice
				}
			window.onload=function(){ //on the onload event...
				document.getElementById("message").onkeyup = function() { //add keyup event listener to a textarea
					showCharacterCount(this, document.getElementById(this.id+'Counter'), 140); //and on the event, call function showCharacterCount using arguments textarea (DOM object), message span (DOM object), and an (optional) max. number of characters (integer). If last argument is not provided, the function defaults to 150 characters.
				};
			};
		</script>
	</head>
	<body>
		<h1>Character counter</h1>
		<form action="#" method="get">
			<label for="message">Message</label>
			<textarea name="message" id="message" placeholder="You message in max. 140 characters..."></textarea>
			<p id="messageCounter">140</p>
		</form>
	</body>
</html>

Gespeld voor docenten

Op Gespeld.nl zijn er extra functies beschikbaar voor docenten. Zo kun je als docent klassen aanmaken en de vorderingen van je leerlingen volgen.

Klassenpagina

Op de klassenpagina kun je per leerling zien of hij/zij wel regelmatig oefent en met welke categorie hij/zij moeite heeft. Ook kun je als docent de laatste tien antwoorden van je leerlingen bekijken en deze bijvoorbeeld bespreken in de klas.

Ben je docent en wil je gebruikmaken van de bovenstaande en andere functies? Schrijf je dan in en vink het vakje ‘docent’ aan.

Hoe wordt er gespeld op Gespeld?

De website Gespeld.nl is sinds januari 2014 online en er hebben zich inmiddels een kleine 500 mensen ingeschreven.

In het gestapelde staafdiagram hieronder zie je in welke categorieën de meeste fouten worden gemaakt. (Of, positief geformuleerd, in welke categorieën de meeste goede antwoorden worden gegeven.) Het diagram is slechts een eerste en zeer grove weergave van de beschikbare data.

statsGespeld19-04-2014

In het diagram (klik voor een vergroting) is vrij snel te zien dat de meeste fouten worden gemaakt met leenwoorden in de verleden tijd (updatete, langlauften, freelancete), maar er zijn veel interessantere en gedetailleerdere statistieken te genereren. Zo houdt de site bij welke woorden binnen de categorieën het moeilijkst worden gevonden. Zonder al te veel moeite kun je bekijken of de hypothese klopt dat werkwoorden waarvan de stam eindigt op een d (word, rijd, begeleid) meer fouten opleveren dan andere werkwoorden. Ongetwijfeld klopt dat – er is immers al aardig wat onderzoek naar gedaan – maar het is altijd de moeite waard om zoiets nog eens, in detail, te checken. Ook is het mogelijk om relaties tussen (persoons)kenmerken en resultaten in kaart te brengen. Spellen ouderen beter dan jongeren? Is er een relatie tussen spelfouten en provincies, opleidingsniveau of moedertaal?

Hoe meer mensen de site gaan gebruiken, hoe beter dergelijke vragen te beantwoorden zijn. De scores in het bovenstaande diagram lijken trouwens vrij hoog. Wellicht heeft dat te maken met het hoge percentage docenten dat nu meedoet. Ik ga ervan uit dat die bovengemiddeld scoren (ook dat valt uiteraard te controleren), maar misschien spellen we allemaal gewoon beter dan we denken. Het kan natuurlijk ook zo zijn dat vooral mensen meedoen die het leuk vinden om met taal bezig te zijn. Daarvoor geldt, gok ik, hetzelfde.

Het verschil tussen parameters en argumenten

In programmeerlessen merk ik niet zelden dat het onderscheid tussen parameters en argumenten voor sommigen conceptueel lastig is. Dat is niet zo gek, want de begrippen vertonen veel overeenkomsten. Toch is er ook een belangrijk verschil en dat zal ik hier proberen te laten zien.

Parameters en argumenten hebben allebei veel met functies te maken. De termen zijn taalonafhankelijk, dus het maakt niet uit of je deze uitleg gebruikt om te leren programmeren in Java, JavaScript, Python, PHP of een andere taal.

Goed, laten we eerst maar eens een functie bekijken. (Ik gebruik de JavaScript-syntaxis in de voorbeelden en ik ga ervan uit dat je weet wat een functie is.)

function berekenTotaalprijs (prijs, aantal) {
   return prijs * aantal;
}

Dit is uiteraard een zeer simpele functie, maar ze volstaat hier. De functie heeft als naam ‘berekenTotaalprijs’ en er worden twee parameters gedeclareerd, te weten ‘prijs’ en ‘aantal’. De parameters worden altijd genoemd tussen haakjes direct na de functienaam. Tussen de accolades ({ en }) kunnen deze parameters vervolgens als gewone variabelen worden gebruikt. (Iets specifieker: als lokale variabelen, maar dat mag je, voor nu, ook even vergeten.) De parameters worden gebruikt in de functie, want de uitvoer van de functie (de return-waarde) is prijs maal aantal. Nu kun je je afvragen waar prijs en aantal vandaan komen; ze worden immers nergens als variabelen gedeclareerd. (Er staat nergens var prijs; en var aantal;.) Het antwoord op die vraag is dat de precieze inhoud van de parameters wordt bepaald door de argumenten die worden genoemd in de aanroep van de functie, zoals hieronder.

alert(berekenTotaalprijs(4.95, 4));

Het resultaat van de bovenstaande regel code is een alert-box met daarin de uitvoer van de functie ‘berekenTotaalprijs’. Die uitvoer is, zoals je in de functie kunt zien, de ingevoerde prijs (4.95) maal het aantal producten (4). (Voor de snelle rekenaars: 19.80.)

Parameters en argumenten bij de functie berekenTotaalprijs

Terug naar de vraag: wat is het verschil tussen parameters en argumenten? Je hebt gezien dat parameters een soort variabelen zijn die in de declaratie van de functie staan. Ze zijn altijd generiek, omdat ze niet een bepaalde prijs of een bepaald aantal noemen, maar slechts het feit dat de functie een prijs en een aantal nodig heeft om goed te kunnen werken. Argumenten gebruik je in de aanroep van een functie en zijn niet generiek (prijs, aantal), maar juist heel specifiek (4.95 en 4).

Typ vs. hype

Gisteren stond de onderstaande oefenzin op Gespeld.nl.

‘Flappy Bird’ was al een tijdje beschikbaar, maar werd pas echt populair toen de media het spel hypeten.

Maar liefst tachtig procent schreef hypeten verkeerd, waarbij hypten het populairste antwoord was. Ik kreeg dan ook van een aantal spellers de vraag wat die e tussen de p en t in hypeten doet.

Het werkwoord hypen

Het antwoord op die vraag is dat de stam van hypen hype is en niet hyp. De achterliggende vraag is dan uiteraard waarom die e onderdeel is van de stam. Zoals vaak het geval is met spelling, heeft dat te maken met uitspraak. Hypen spreek je uit als haipen. Dat is een Engelse uitspraak, waarvoor de e aan het einde nodig is. Op de website van Onze Taal wordt dat mooi gecontrasteerd met het werkwoord typen. De stam van typen is typ (niet type) en dus schrijf je getypt, niet getypet. Dat verschil is goed te horen, want je spreekt uit ‘hij tiept’ en niet ‘hij taaipt’. Bij hypen is het precies andersom en zeg je niet ‘hij hiept’, maar ‘hij haaipt’.

Door de Engelse uitspraak van hypen schrijf je dus hype, hypete, gehypet. De Nederlandse uitspraak van typen levert het volgende rijtje op: typ, typte, getypt.

Zie ook:
https://onzetaal.nl/taaladvies/advies/ik-typ-type
http://woordenlijst.org/zoek/?q=hypen&w=w
http://woordenlijst.org/zoek/?q=typen&w=w