Commits

Anonymous committed 94ff0fc

$ hg cp core-javascript-work/counters.* javascript-exercises/counters/

Comments (0)

Files changed (3)

core-javascript/javascript-exercises/counters/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;
+}

core-javascript/javascript-exercises/counters/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>

core-javascript/javascript-exercises/counters/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.
+    };
+
+})();
+
+
+
+
+
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.