Counters example

Goal

The goal is to create a web page which contains several independent counters. Each time a counter is clicked, it is incremented. Here’s you can try out a working example of what’s wanted.

Below is the complete code of this example. To simplify the matter, it is completely self-contained. It uses no library code, other than the definition of SimpleClass.

In general library code is a good idea. This example is designed to teach you the basics of JavaScript, and not the use of a library. We hope that what you learn here will help you choose a library, and build libraries of your own.

counters.html

<html>
<head>
<script src="library.js"></script>
<script src="counters.js"></script>
<link rel="stylesheet" type="text/css" href="counters.css" />
<title>JS for Python: example: counters</title>
</head>
<body>
<h1>Counters</h1>

<p>Click on a counter to increment its value.</p>

<div id="example">
<p>This will disappear if JavaScript is working properly.</p>
</div>

<p>Return to documentation of <a href="../counters-example.html">Counters example</a>.</p>
</body>

counters.css

body {
    background: #DDD;
    font-family: sans-serif;
}

#example {
    padding: 20px;
}

#example span {
    padding: 10px;
    margin: 10px;
    border: 10px solid blue;
    background: #DDF;
    foreground: blue;
    font-weight: bold;
}

counters.js

(function()
{
    // Define a Counter class.
    var counter = {};           // Prototype object for Counter.

    counter.__init__ = function(name){

        this.name = name;
        this.count = 0;
    };

    counter.onclick = function(event){

        this.count ++;
    };

    counter.html = function(){

        return this.name + ' ' + this.count;
    };

    Counter = SimpleClass(counter);


    // Make explicit use of global variables.
    var global = (function(){return this;})();


    // Interaction.
    var onclick_factory = function(models){

        var onclick = function(event){

	    event = event || global.event; // For IE event handling.
	    var target = event.target || event.srcElement;
            var id = target.id;
            if (id) {
                var id_num = +id.slice(1);
                var model = models[id_num];
                model.onclick();
                var html = model.html();
                if (html){
                    global.document.getElementById(id).innerHTML = html;
                }
            }
        };
        return onclick;
    };


    // Set up the web page.
    global.onload = function(){

        var models = [
            Counter('apple'),
            Counter('banana'),
            Counter('cherry'),
            Counter('date')
        ];

        var element = document.getElementById('example');

        element.innerHTML = (
            '<span id="a0">apple 0</span>'
            + '<span id="a1">banana 0</span>'
            + '<span id="a2">cherry 0</span>'
            + '<span id="a3">date 0</span>'
        );

        element.onclick = onclick_factory(models);
        element = undefined;    // Avoid IE memory leak.
    };

})();