| Wiki Markup |
|---|
h2. This is a simple number guessing game written in javascript using Canjs
----
h3. Index.html
<\!-\- This is the main html file for the guess a number game
It sets up a div as an attachment point for the view
Includes some helper CSS, and loads the necessary
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
<\!-\- This file is a very simple view that consists of a label and a text field
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 attr to ftech it makes it "magic" in that the HTML wll update automatically
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
// 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 High, Guess again: ");
} else {
myData.attr("message","You got it\!");
}
}
h2.
<\!-\-// This is the mainapplication html filecode for the "guess a number game
'
// 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
It// setsIts upview awill divbe asaffixed anto attachmentthe pointdiv fornamed theguessView view
in
// the index.html and the observable GuessData will be passed
Includes// somein helperfor CSS,its anduse loadsas the necessary 'data' field on this.options
javascript files
\-->
<\!doctype html>
<html>
<head>
<title>Guess a number</title>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(\{
<metamessage: charset="utf-8">"Enter a guess: ",
<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<\!-\- This is the main html file for the guess a number gameguess: 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 sets up a div as an attachment point for the viewIt returns false to prevent actual submission to the web server
"submit": function(event)\{
Includes some helper CSS, and loads the necessary
DoGuess(parseFloat(document.myform.guess.value),this.options.data);
document.myform.guess.value="";
javascript files
\-->
<\!doctype html>
<html>
<head> 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){
<title>Guess a number</title>
if (guess<myData.guess){
<meta charset="utf-8"> myData.attr('message',"Too low, Guess again: ");
<link rel="stylesheet" href="css/bootstrap.min.css">
} else if (guess>myData.guess) {
<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> myData.attr('message', "Too High, Guess again: ");
} else {
myData.attr("message","You got it\!");
}
} |
Page History
Overview
Content Tools
Activity