ผลต่างระหว่างรุ่นของ "01219245/javascript1/tutorial3/2"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
แถว 50: แถว 50:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== A randomized computer player ==
  
 
== Using objects to encapsulate behavior ==
 
== Using objects to encapsulate behavior ==

รุ่นแก้ไขเมื่อ 16:59, 27 มกราคม 2557

Your current JavaScript program in the script block probably look like this:

var numSticks = 21;

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    numSticks -= num;
    $( "#numSticks" ).text( numSticks );
}

$(function(){
    $("#pickButton").click(pickSticks);
});

Valid number of sticks

Let's add the code that check that the number of sticks the player want to take is valid, i.e., it is between 1 to 3 and is no larger than the current number of sticks. Let's assume that the input is an integer for now (i.e., that the user won't enter 1.5). If the amount is invalid, let's throw an alert for now.

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( ( num >= 1 ) && ( num <= 3 ) && ( num <= numSticks ) ) {
        numSticks -= num;
        $( "#numSticks" ).text( numSticks );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}
Gitmark.png Try to see if the condition works. If it is working, commit your work.

The code is getting harder to read, so let's try to clean it up a bit. To make it clearer, we shall extract the code for validating conditions to a new function. Function pickStick and the new function is shown below:

function isValidPickNum( num, numSticks ) {
    return ( num >= 1 ) && ( num <= 3 ) && ( num <= numSticks );
}

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( isValidPickNum( num, numSticks ) ) {
        numSticks -= num;
        $( "#numSticks" ).text( numSticks );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}

A randomized computer player

Using objects to encapsulate behavior

Transcript

Computer player