...
This
...
is
...
a
...
simple
...
number
...
guessing
...
game
...
written
...
in
...
javascript
...
using
...
Canjs
...
Index.html
| Code Block |
|---|
<\!-\- This is the main html file for the guess a number game It It sets up a div as an attachment point for the view Includes Includes some helper CSS, and loads the necessary javascript javascript files \--> <\!doctype html> <html> <head> <title>Guess a number</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/contacts.css"> </head> <body> <div id="guessView" ></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script src="js/can.jquery.js"></script> <script src="js/can.fixture.js"></script> <script src="js/guess.js"></script> </body></html> ---- h2. |
...
guessView.ejs
| Code Block |
|---|
<\!-\- This file is a very simple view that consists of a label and a text field The The label comes dynamically from the message field of the observable myData \--> <form name='myform' > <div > <\!-\- This next line inserts the value of the message field on the myData observable. Using Using attr to to ftech it makes it "magic" in that the HTML wll update automatically when when the obervable is aware of a change to the value of the message field. \--> <%= myData.attr('message'); %> <input id='guess' type="text" name="guess" > </div> </form > ---- h2. |
...
guess.js
| Code Block |
|---|
// This is the application code for "guess a number' // This sets up a callback triggered at the end of document load // All can setup needs to be done after the DOM is ready $(document).ready(function(){ // This creates a new instance of the Guess controller // Its view will be affixed to the div named guessView in // the index.html and the observable GuessData will be passed // in for its use as the 'data' field on this.options new Guess('#guessView',{data:GuessData}); }); // This defines an obervable data block that has two fields // The first is a message that will be displayed in the view // The second is a random number between 0 and 99 inclusive // that is hidden from the user // The point of the game is to guess this random number var GuessData = new can.Observe({ message: "Enter a guess: ", guess: Math.floor(Math.random()*100) }); // This creates a constructor called Guess that can create // a guess controller when new'd. It is used in the document loaded // callback above to instance an actual controller Guess = can.Control({ // The init function is called when an instance is new'd init: function(){ // can.vew compiles the view ejs // this.element.html attaches the compiled view at the dom point // specified in the constructor call this.element.html(can.view('views/guessView.ejs',{ myData:this.options.data })); }, // This method is automagically attached to the controller's associated // div and calls back to this function on form submit // It returns false to prevent actual submission to the web server "submit": function(event){ DoGuess(parseFloat(document.myform.guess.value),this.options.data); document.myform.guess.value=""; return false; // short circuit submit } }); // This function checks the guess and updates the message field // IMPORTANT: such updates must be done through obervable.attr(<key>,<new value>) // or they wil not be observed function DoGuess(guess,myData){ if (guess<myData.guess){ myData.attr('message',"Too low, Guess again: "); } else if (guess>myData.guess) { myData.attr('message', "Too Highlow, Guess again: "); } else { myData.attr("message","You got it\!"); } } // This is the application code for "guess a number' // This sets up a callback triggered at the end of document load // All can setup needs to be done after the DOM is ready $(document).ready(function()\{ // This creates a new instance of the Guess controller // Its view will be affixed to the div named guessView in // the index.html and the observable GuessData will be passed // in for its use as the 'data' field on this.options new Guess('#guessView',\{data:GuessData\} ); \}); // This defines an obervable data block that has two fields // The first is a message that will be displayed in the view // The second is a random number between 0 and 99 inclusive // that is hidden from the user // The point of the game is to guess this random number var GuessData = new can.Observe(\{ message: "Enter a guess: ", guess: Math.floor(Math.random()*100) \}); // This creates a constructor called Guess that can create // a guess controller when new'd. It is used in the document loaded // callback above to instance an actual controller Guess = can.Control(\{ // The init function is called when an instance is new'd init: function()\{ // can.vew compiles the view ejs // this.element.html attaches the compiled view at the dom point // specified in the constructor call this.element.html(can.view('views/guessView.ejs',\{ myData:this.options.data \})); \}, // This method is automagically attached to the controller's associated // div and calls back to this function on form submit // It returns false to prevent actual submission to the web server "submit": function(event)\{ DoGuess(parseFloat(document.myform.guess.value),this.options.data); document.myform.guess.value=""; return false; // short circuit submit \} \}); // This function checks the guess and updates the message field // IMPORTANT: such updates must be done through obervable.attr(<key>,<new value>) // or they wil not be observed function DoGuess(guess,myData)\{ if (guess<myData.guess){ myData.else if (guess>myData.guess) { myData.attr('message', "Too lowHigh, Guess again: "); \} else if (guess>myData.guess) \{ myData.attr('message', "Too High, Guess again: ") \} else \{ } else { myData.attr("message","You got it\!"); \} \} } } |