Maria: Why did you camelCase th e readOnly property, while the n ame of the origi-
nal HTML attribute is readonly?
Professor: Noth ing escapes your eye, does it? A s it happens, the readonly at-
tribute is changed to readOnly inside the DOM. That’s because JavaScript just loves
to camelCase its identifiers and multi-word HTML attributes are mirror ed to DOM
property names that are c amelCased.
The last line of the start() metho d connects the oninput event-handler property of
the corresponding <input> eleme nt to the event-handler function that we’re going to
write in a moment. Fina lly, three closing braces finish our job with this method:
text.oninput = handleInput(this, i, j);
} //Closes the inner for loop
} //Closes the outer for loop
}; //Closes the start() method
If you look carefully a t the above code, you’ll notice that I didn’t actually define any
function but I rather invoked one. What do you think the han dleInput() function
should retu rn?
Mike: Since an event-handler property should be a reference to a functio n, I g uess
that handleInp ut() must return a reference to some kind of function nested within
it.
Professor: Exactly! The handleInput () function is simply used to create a closure
for the event-handler function, a reference to which it returns. This enables us to a ctu-
ally pass arguments to an event-handler function. You know, bec ause event handlers
are invoked automatically by the system, it is not possible to pass argumen ts to them
in the usual way.
This is the handleInput() function definition:
var handleInput = function(sdk, row, col) {
return function() {
var v = parseInt(this.value);
this.className = "answer";
if (v >= 1 && v <= 9) {
if (!sdk.setNumber(this.value, row, col) {
this.className = "wrong";
}
}
else {
sdk.setNumber(null, row, col);
this.className = "candidate";
}
};
};
260 Meeting 13. User Interface
As you can see, the functio n ind eed defin es and returns another, anonymous fun ction.
It also creates clo sure for this anonymous function, insid e which it stores the thre e
passed arguments: a reference to the Sudoku object, and the row and column indexes
of the cell. Note that a sepa rate anonymous function -definition object is created for
each of the text boxes, whose closure stores the row and column indexes of the cell
associated with the current text box .
The anonymous function nested within handleInput() is quite simple. First, it
parses the value currently written in the text box that actually triggered the input event.
Recall that this is a refe rence to a method’s invocation context, which in our case is
the Element object r epresenting the <input> elemen t that triggered the event. After
parsing the value, the function resets the element’s class attribute to answer.
If the entered number is between one and nine inclusive, then the function tries to
insert that number into the puzzle grid using the setNumber() meth od of the Sudoku
object. If the operation is not successful, then the element’s class is changed to wrong
so that th e entere d numb er will be colored red . Otherwise, if ther e is anything othe r
than a number between one and nine entered in the text box, the old nu mber is removed
from the correspo nding Sudoku cell and the element’s class is set to candidate.
However, the entered value is still shown in the text box but is rendered smaller.
The last missing piece of code is the Window’s onl oad event-handler definition,
which incorporates a two-dimensional array containing the initial clue, a Sudoku ob-
ject creation and initialization, and an invocation o f the start() method:
window.onload = function() {
var initial = [
[null, 5, 7, null, 4, null, null, 2, null],
[null, 3, 8, null, null, 2, 7, null, null],
[null, 1, null, 7, 3, null, null, null, null],
[null, 7, null, 2, 8, null, null, null, 3 ],
[3, null, 4, null, null, null, 1, null, 6 ],
[1, null, null, null, 6, 4, null, 7, null],
[null, null, null, null, 2, 7, null, 1, null],
[null, null, 1, 9, null, null, 2, 3, null],
[null, 4, null, null, 1, null, 5, 9, null]
];
var s = new Sudoku();
s.setClues(initial);
s.start("sudoku-puzzle");
}
That’s it. We’re ready to play Sudoku.
13.4. Completing Sudoku Puzzle H elper 261
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.