私はこのコードを持っています:
//Start of User Constuctor
function User(firstName,lastName){
this.first = firstName;
this.last = lastName;
this.quizScores = [];
this.currentScore = 0;
}
User.prototype = {
constructor:User,
saveScore: function(theScoreToAdd){
this.quizScores.push(theScoreToAdd)
},
showNameAndScores : function(){
var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No Scores Yet";
return this.first + " " + this.last + scores;
}
}
//End of User constructor
//Start of Question Constuctor
function inheritPrototype(childObject, parentObject) {
// As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject
// So the copyOfParent object now has everything the parentObject has
var copyOfParent = Object.create(parentObject.prototype);
//Then we set the constructor of this new object to point to the childObject.
//This step is necessary because the preceding step overwrote the childObject constructor when it overwrote the childObject prototype (during the Object.create() process)
copyOfParent.constructor = childObject;
// Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)
childObject.prototype = copyOfParent;
}
function Question ( question , choices , correctAnswer ){
//those will be uniqe for every question made
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
this.userAnswer = "";
console.log("created");
}
Question.prototype.getCorrectAnswer = function(){
return this.correctAnswer;
};
Question.prototype.getUserAnswer = function(){
return this.userAnswer;
};
Question.prototype.displayQuestion = function(){
this.question;
choiceCounter = 0;
this.choices.forEach(function(eachQuestion){
choiceCounter;
eachQuestion;
choiceCounter ++;
});
console.log(this.question);
};
function QuestionCreate( question , choices , correctAnswer ){
Question.call(this,question,choices,correctAnswer);
};
function UserCreate ( first,last){
User.call(this,first,last)
}
inheritPrototype(QuestionCreate,Question);
var allQuestions = [
new QuestionCreate("fist",["1","2","3","4"],1),
new QuestionCreate("seconed",["1","2","3","4"],2),
new QuestionCreate("third",["1","2","3","4"],3),
new QuestionCreate("fourh",["1","2","3","4"],4)
];
allQuestions.forEach(function(eachQuestion){
eachQuestion.displayQuestion();
});
// End of Question Constuctor
var allUsers;
if(localStorage["fn"] && localStorage["ln"]){
$("form").remove();
}
$("#login").bind("click",function(){
var firstname = $("#fn").val();
var lastname = $("#ln").val();
var validfn = /[a-zA-Z]/.test(firstname);// check to match the if the input is a-z char
var validln = /[a-zA-Z]/.test(lastname);// check to match the if the input is a-z char
if (validfn && validln) {
var first = firstname;
var last = lastname;
alert(first + " " + last);
localStorage["fn"] = first;
localStorage["ln"] = last;
allUsers = [
new UserCreate(first, last)
]
}
});
ご覧のとおり、 User コンストラクターがあります。
HTML コード:
<!DOCTYPE html>
<html lang="en"> <!--manifest="site.manifest" -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<title>Quiz Version 3</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- contaning all display -->
<div class="container">
<!-- contaning header -- navgiation -->
<header class="row">
<div class="span12">
<nav class="navbar">
<div class="navbar-inner">
<a href="#" class="brand">Boaz Hoch</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="proggres.html">My Proggres</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Follow Me
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://www.facebook.com/boazmier">FaceBook</a></li>
<li><a href="https://plus.google.com/113694258444420573992/posts">Google +</a></li>
<li><a href="http://www.linkedin.com/profile/view?id=255626257&trk=nav_responsive_tab_profile">Linked-In</a></li>
</ul>
</li>
<li><a href="#" class="text-right"></a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!-- End of Header -->
<!-- contaning main part -->
<section class="row" id="main-container">
<div class="well span6 offset3">
<form>
<fieldset>
<legend>Login</legend>
<input id="fn" type="text" class="input-block-level" placeholder="First Name">
<input id="ln" type="text" class="input-block-level" placeholder="Last Name">
<input id="login" type="submit" class="btn btn-primary" value="login">
</fieldset>
</form>
<!-- crappy script tag at the middle of the html file -->
<script id="try" type="text/x-handlebars-template">
<div> My Name is {{this}}</div>
</script>
</div>
</section>
<!-- contaning all display -->
<footer class="row">
<!-- svg
sqaure
<svg width="200" height="200">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" x="0" y="0" width="10" height="10" fill="none" stroke-width="3" stroke="red"/>
<ellipse cx="10" cy="10" rx="10" ry="5"/>
<line x1="0" y1="0" x2="5" y2="5" />
</svg>
-->
</footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</body>
</html>
ご覧のとおり、フォームがあり、名前と姓のパラメーターを使用して新しいユーザーを作成しようとしています (consturctur を使用)。ユーザーがフォームを送信して、新しいユーザー オブジェクトを作成します。
私のjsfiddleをチェックしてください： http://jsfiddle.net/qMuwe/