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.
};
})();