0

オブジェクトを使用して電卓を作成しようとしています。これがJSFiddleです：http：//jsfiddle.net/jNqEv/4/

残りの計算機を作成している間、数値の計算を行うためにこのコードを使用していました。

/*Computes the values inside the box and returns the answer.*/
function compute(form)  
{
    form.display.value = eval(form.display.value); 
}

次に、JavaScriptで事前定義されたオブジェクト評価を使用する代わりに、計算を行うオブジェクトを作成する必要があります。私はこのようなことを考えていました：

基本的に、このオブジェクトはIDが「input」のテキストボックスから値を取得します。値は2 * 3、1 + 2,5 / 7などの形式になります。したがって、2番目の部分をプルするかどうかを考えていました。 substrを使用した文字列内のデータは、乗算、除算、減算、または加算であるかどうかを確認できます。

    function calc(arithmetic)
{
    this.arithmetic = arithmetic;
}        

var myCalc = new calc(input)
    {
    function maths (input) 
{
    var str = input;
    var a=str.substr(1,1); // example: 1+2   var a holds the 1
    var b=str.substr(2,1); //                var b holds the "+"
    var c=str.substr(3,1); //                var c holds the 2
                           // if the sign is equal to "+" add var a plus var b
                           // and then place them inside answerNumber.
                           // then take answerNumber and place its value
                           // inside the page element with the id "input"
    if(b == "+")
    {
        answerNumber = a + c;
    }
    else if(b == "-")
    {
        answerNumber = a + c;
    }
    else if(b == "*")
    {
        answerNumber = a * c;
    }
    else if(b == "/")
    {
        answerNumber = a / c;
    }
    document.getElementById("input").value=answerNumber;
        }


    }

私はObjectsについてさまざまなウェブサイトで読んでみましたが、まったく役に立っていません。ここに私が行った場所のいくつかがあります： "http://www.crockford.com/javascript/private.html"、 "http： //www.w3schools.com/js/js_objects.asp"などがあります。私がやろうとしていることについては、これらはあまり役に立たないようです。多分あなたの何人かは助けることができます。

オブジェクト関数がトリガーされて配置されるボタンとテキストボックスは次のとおりです。

<input type="button" value="   =    " name="enter" onClick="compute(this.form)">
<input name="display"  id="input" size=25>

これが、外部JavaScriptを含む私のコードシート全体です。

HTML：

<html> 
<head>
<title>Assignment 2</title>
</head>
<body>
<div align="center">
<span style="font-weight:bold" size="20">Calculator</span>
<br>
<!-- Prints my name -->
<form  name="MyName" id="form1" style="font-weight:bold" size="20">
<script>
document.write("Mallery, Cody");
</script>
</form>
<!-- Script -->
<script src="functions.js" type="text/javascript"></script>
<!-- The Calculator! -->
<center><form>
<table border=4>
<tr>
<td>
<input name="display"  id="input" size=25>
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="    7    " onClick="addChar(this.form.display, '7')">
<input type="button" value="    8    " onClick="addChar(this.form.display, '8')">
<input type="button" value="    9    " onClick="addChar(this.form.display, '9')">
<input type="button" value="    /    " onClick="addChar(this.form.display, '/')">
<br>

<input type="button" value="    4    " onClick="addChar(this.form.display, '4')">
<input type="button" value="    5    " onClick="addChar(this.form.display, '5')">
<input type="button" value="    6    " onClick="addChar(this.form.display, '6')">
<input type="button" value="    *    " onClick="addChar(this.form.display, '*')">
<br>

<input type="button" value="    1    " onClick="addChar(this.form.display, '1')">
<input type="button" value="    2    " onClick="addChar(this.form.display, '2')">
<input type="button" value="    3    " onClick="addChar(this.form.display, '3')">
<input type="button" value="    -    " onClick="addChar(this.form.display, '-')">
<br>

<input type="button" value="   0     " onClick="addChar(this.form.display, '0')">
<input type="button" value="    N    " onClick="changeSign(this.form.display)">
<input type="button" value="    +    " onClick="addChar(this.form.display, '+')">
<input type="button" value="   C   " onClick="this.form.display.value = 0 ">
<br>
<input type="button" value="   L    " name="L" onClick="Loop(this.form.display.value)" 
                                               title="If the L button is pressed, the digit present in the results box will be looped through and added up to the 'digit plus 10'.For example: After the calculator has been reset. The user can press the 1 button, then the L button 55 should be displayed in the calculator 1 + 10 = 11, therefore start with 1 and loop until less than 11 adding all of the numbers 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55">
<input type="button" value="   =    " name="enter" onClick="compute(this.form)">
</td>
</tr>
</table>
<br>
<!-- Calculator User Guide -->
<span style="font-weight:bold" size="20">Instructions:</span>
<span size="16">
<br>Click a number, then an action, then another number, then the '=' button.
<br>Press 'C' when ready to start over. 
<br>The 'N' makes your previous number negative.
<br>The 'L' button requires one number to be avalible,
<br>It will loop through "that number" to "ten plus that number"
<br> and add all values and display.
<br>
<br>For example 1+2+3+4+5+6+7+8+9+10 = 55
</span>
<br><br>
<!-- Browser information -->
<span style="font-weight:bold" size="20">Navigator:</span>
<div id="Navigator"></div>

<script language="javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("Navigator").innerHTML=txt;

</script>
</form>           
</div>
</body>
</html>

外部JavaScript：

/* gets the input from the keyboard OR clicking the button */
function addChar(input, character) 
{
if(input.value == null || input.value == "0")
    input.value = character;
else
    input.value += character;
}


/*changes the sign of the number inside the input box from negative to positive.*/
function changeSign(input) 
{
if(input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length);
else
    input.value = "-" + input.value;
}


/*Computes the values inside the box and returns the answer.*/
function compute(form)  
{
    form.display.value = eval(form.display.value); /*The Calculator uses an Object for all calculations*/
}                


/* Loops the input by the value + 10 */
function Loop(input)
{
     var num = parseInt(input) + 10;
     var i=0;
     var sum=0;

    while(i < num)
        {
            sum=sum+i;
            i++;
        }
    document.getElementById("input").value=sum;

}

/*Compute Arithmetic*/
function calc() //creating an empty object named calc
{
}

var calc = new calc(); //creating a new instance of the calc object

calc.arithmetic = function maths (input) 
{
    var str = input;
    var a=str.substr(1,1); 
    var b=str.substr(2,1);
    var c=str.substr(3,1);

    if(b == "+")
    {
        answerNumber = a + c;
    }
    else if(b == "-")
    {
        answerNumber = a + c;
    }
    else if(b == "*")
    {
        answerNumber = a * c;
    }
    else if(b == "/")
    {
        answerNumber = a / c;
    }
    document.getElementById("input").value=answerNumber;
}

ですから、あなたが私を正しい方向に向けることができるどんな方法でもありがたいです。

4

1 に答える 1

1

ここにオブジェクトが必要だと思う理由がわかりません。それらを関数に入れるだけです-あなたはmathsすでにその関数を持っています。その周りのコードは構文エラーにすぎません。

通常、コンストラクターvar myCalc = new calc(input);のインスタンスを作成しますcalc。その後に関数本体を作成しないでください。また、

function calc() {}
var calc = new calc();

calc関数をそのインスタンスで上書きするだけです-非常に奇妙です。

関数に名前空間を付ける場合、つまり、オブジェクトにプロパティとして配置する場合（これは良い考えです）、単純なObjectリテラルを使用する必要があります。複数のインスタンスを作成するコンストラクター関数は必要ありません。必要なのは次の1つだけです。

var calc = {
   arithmetic: function maths (input) { … }
};
// then call
calc.arithmetic("1+3");
// which sets the input field to "4"
于 2012-10-14T22:02:21.220 に答える