In Javascript objects are collections of variables and methods just
like in any other language. Except it's more obvious in this language
that the stated functionality (to encapsulate data and behavior) is in
fact achieved by implementing objects as generalized hash tables.
A hash table == an associative array and in Javascript procedures are
first-class citizens. Yesterday we looked at two ways to define a class
(the first one was very ad-hoc and there was no class in it, we were in
fact assembling an instance, in real time). The second one actually used
a constructor function and so in that second case if you wanted to create
objects you just had to call the constructor: obviously the second way is
more streamlined, disciplined than the first.
We looked at three fragments of code: ..., ..., ...
So what do we know and what do we want to do with it?
We know:
a) we can embed Javascript in HTML
b) the browser can interpret Javascript
c) we can speak Javascript with the browser using javascript: ...
d) it's easy to build functional links that way
e) form elements have event handlers (buttons: onClick...)
f) how to define functions that manage global variables
g) we know how to name and access pieces of an HTML document with Javascript
We would like to implement Homework Two type of programs.
We start with nothing:
Addition quiz in Javascript
Next we start sketching the interface:
Addition quiz in Javascript
Next I am trying to show some of the initial state:
Addition quiz in Javascript
I need to be careful with the order of things as they happen:
Addition quiz in Javascript
Now I change the approach a bit:
Addition quiz in Javascript
I finalize this approach:
Addition quiz in Javascript
Now we start naming things so as to make sense:
Addition quiz in Javascript
We add minimal grading to it:
Addition quiz in Javascript
This offers a random question in the beginning, which you can hit with
answers until you get it right. Then, to get a new question, reload page.
Now I improve grading a bit and generate a new question after it:
Addition quiz in Javascript
I add a message to the output and to the code and have it shown:
Addition quiz in Javascript
This code needs a reset button:
Addition quiz in Javascript
Which concludes our development.