Categorie archief: Interaction Design

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>

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

Metaphors We Live By in IxD

Binnenkort geef ik een (voorlopig eenmalig) hoorcollege over metaforen in interfaceontwerp, waarbij ik uitga van Lakoff en Johnsons Metaphors We Live By (1980). Hieronder de inleidende tekst bij het college.

In 1980 schreven taalkundige George Lakoff en filosoof Mark Johnson het baanbrekende boek Metaphors We Live By. In dit boek stellen ze dat een metafoor niet slechts ‘mooidoenerij’ in poëzie is, maar dat de metafoor ons in het dagelijks leven van een krachtig middel voorziet om (nieuwe) ervaringen te kunnen begrijpen. Zo denk je wellicht dat liefde vooral mooi is, maar wat blijkt? We denken er vaak over in termen van oorlog en gevecht: ‘zij vocht voor hem, maar zijn maîtresse won’, ‘hij vluchtte na haar avances’ en ‘zij heeft hem overmeesterd’. (Tijdens het college laat ik zien dat we over liefde gelukkig ook in positieve termen, zoals reizen en avontuur, kunnen denken.)

Metaphors We Live By (1980)

Ook binnen het Interaction Design-vakgebied is de metafoor geen onbekende. Denk maar aan de desktop-metafoor die je elke dag ziet als je een computer gebruikt, maar ook aan je postvak-IN, een ‘cc’tje’ in Gmail en aan de digitale papierwinkel die je hebt moeten ‘doorlopen’ om studiefinanciering aan te vragen. Welke metaforen zijn te herkennen in Facebook en hoe kan een verkeerde metafoor tot grappige of ronduit pijnlijke interfaces leiden? In het college verkennen we hoe metaforen vervlochten zijn met ons dagelijks leven en hoe we hier, met de hulp van Lakoff en Johnson, gebruik van kunnen maken bij het ontwerpen van een goede, intuïtieve interface.

E-reader

Bronnen
Lakoff, George en Mark Johnson (1980). Metaphors We Live By. Chicago: University of Chicago Press.

Bill Verplank sketching Interaction Design

In Designing Interactions (2006), Bill Moggridge introduces 40 interaction designers who “have shaped our interaction with technology”. You can download a sample chapter from http://www.designinginteractions.com/download.

Take for instance Bill Verplank’s take on Interaction Design. According to Verplank, the interaction designer needs to answer three questions, about how people act, how they feel, and how they understand. Look at the video below, in which he explains his view on interaction design.

You can download the outline of a lecture at Stanford University here: https://ccrma.stanford.edu/courses/250a/lectures/IDSketchbok.pdf.

Arcade at Mediamatic

Last saturday I went to the Arcade-exhibition at Mediamatic. You can play all kinds of old arcadegames there. The games range from Pong to Mortal Kombat. Check it out at http://www.mediamatic.net/page/166500/en.

For more Arcade-events (workshops, lectures etc.) at Mediamatic, check http://www.mediamatic.net/page/170862/en.
Arcade at Mediamatic