152 Chapter 4 • Enhancing Client-Side Functionality with WMLScript Figure 4.7 Example2.wmls—WMLScript Program to Calculate the Factorial of a Number extern function Calculate(num){ var result = 1; for (var i=1; i<=num; i++) result *= i; WMLBrowser.setVar("result", result); WMLBrowser.go("Example2.wml#card2"); } Dissecting the Code In this example, we want the WMLScript (see Figure 4.7) to calculate the facto- rial of a number and display the result in a card.This example illustrates several different features of the WMLScript language. Let’s take a closer look at the WML deck (see Figure 4.6): <input type="text" name="num" /> The user enters a number through the use of the <input> element. <go href="Example2.wmls#Calculate($(num))" /> The Calculate() function within the Example2.wmls file is called.The number entered by the user (num) is passed to the function. <card id="card2" title="Card 2"> <p> $num ! is $(result) </p> </card> Card2 will display the result of the operation performed by the WMLScript. The value of result is set by the WMLScript function. Within the WMLScript function, we have the function declaration of Calculate(): extern function Calculate(num){ var result = 1; www.syngress.com 159_wg_wi_04 10/22/01 4:34 PM Page 152 Enhancing Client-Side Functionality with WMLScript • Chapter 4 153 A new variable result is defined with the var keyword and set to a value of 1. for (var i=1; i<=num; i++) result *= i; The for loop repeatedly executes a set of instructions. In this case, it multiplies all the numbers from 1 to num. WMLBrowser.setVar("result", result); The result is stored into the WML variable result using the setVar() function from the WMLBrowser library. Notice that a pair of double quotes encloses the WML variable result. WMLBrowser.go("Example2.wml#card2"); } Once the result is stored, #card2 from the WML deck is loaded using the go() function from the WMLBrowser library. Figure 4.8 displays the resulting screens on the WAP Toolkit. Using WMLScript for Input Validation The next example illustrates a very common usage of WMLScript—input valida- tion. Input validation is a very common task performed by Web applications. Imagine asking the user for his or her birth date. If the user enters 13 for month, the error could be detected early by client-side input validation, rather than posting the input to the server and causing a round-trip delay only to realize that the input is erroneous.This is especially important for WAP application, as the connection is inherently slow and therefore there is a necessity to reduce the number of connections to the server. www.syngress.com Figure 4.8 Performing Mathematical Operations Using WMLScript 159_wg_wi_04 10/22/01 4:34 PM Page 153 154 Chapter 4 • Enhancing Client-Side Functionality with WMLScript In this application, we have a user registering using a WAP browser.The user keys in his or her userID and enters a password twice for confirmation.The WMLScript will compare the two passwords to ensure that they are identical before proceeding to register the user. (The WML deck is shown in Figure 4.9 and the WMLScript is shown in Figure 4.10.) Figure 4.9 Example3.wml—WML Deck to Prompt Users to Enter a UserID and Password <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1" title="Registration" newcontext="true"> <p> UserID : <input type="text" name="userID"/> Password: <input type="password" name="password1"/> Confirm Password: <input type="password" name="password2"/> <do type="accept" label="Register!"> <go href="Example3.wmls#verifyPassword('$password1', '$password2')"/> </do> </p> </card> </wml> Figure 4.10 Example3.wmls—WMLScript Program to Perform Input Validation extern function verifyPassword (Password1, Password2) { var URL; if (String.compare(Password1, Password2) == 0) { URL = "register.asp?userID=" + WMLBrowser.getVar("userID") + "&password=" + Password1; WMLBrowser.go(URL); } www.syngress.com Continued 159_wg_wi_04 10/22/01 4:34 PM Page 154 Enhancing Client-Side Functionality with WMLScript • Chapter 4 155 else { DisplayMessage("Passwords do not match! Please retry "); WMLBrowser.go("Example3.wml"); } } function DisplayMessage(message) { Dialogs.alert(message); return ; } Dissecting the Code Again, let’s start with the WML deck shown in Figure 4.9: UserID : <input type="text" name="userID"/> Password: <input type="password" name="password1"/> User enters a userID and password Confirm Password: <input type="password" name="password2"/> The user re-enters the password: <go href="Example3.wmls#verifyPassword('$password1', '$password2')"/> The verifyPassword() function in Example3.wmls is called.The two pass- words are passed to this function. Notice the pair of double quotes surrounding the two input parameters. At the WMLScript end, shown in Figure 4.10, is: extern function verifyPassword (Password1, Password2) The first function in this file, verifyPassword(), has two input parameters: Password1 and Password2. var URL; if (String.compare(Password1, Password2) == 0) { www.syngress.com Figure 4.10 Continued 159_wg_wi_04 10/22/01 4:34 PM Page 155 156 Chapter 4 • Enhancing Client-Side Functionality with WMLScript The compare() function in the String library is used to compare the two strings. If they are identical, the function will return a value of 0. If the two pass- words were identical, an ASP file would be called. URL = "register.asp?userID=" + WMLBrowser.getVar("userID") + "&password=" + Password1; The URL for the ASP file is created with the query string containing the userID and password. WMLBrowser.go(URL); The browser is then redirected to the ASP file: else { DisplayMessage("Passwords do not match! Please retry "); If the two passwords are not identical, the DisplayMessage() function is then called.This function takes in a single input parameter: WMLBrowser.go("Example3.wml"); Once the message is displayed, we reload the Example3.wml deck: function DisplayMessage(message) { Dialogs.alert(message); return ; } Notice that the DisplayMessage() function does not have the extern key- word.This function can be used only within the WMLScript file and is not callable from a WML deck directly.The output of Example3.wml and Example3.wmls are shown in Figure 4.11. www.syngress.com Figure 4.11 Comparing User Inputs Using WMLScript 159_wg_wi_04 10/22/01 4:34 PM Page 156 Enhancing Client-Side Functionality with WMLScript • Chapter 4 157 NOTE Functions that only are used internally do not require the extern keyword. Credit Card Validation Another common use for WMLScript is in validating credit card numbers.This example illustrates several WMLScript language constructs by checking the validity of a credit card number. The Credit Card Validating Algorithm Depending on the credit card type, most credit card numbers are encoded with a check digit. By running the credit number through some algorithms, a check digit is often appended to the end of the credit card number.To validate that the number is a valid credit card number, the numbers are applied the same algo- rithm in the reverse manner.The following illustrates the LUHN Formula (Mod 10) for validating a credit card number. 1. Multiply the value of alternate digits by 2, starting from the second rightmost digit. 2. Add all the individual digits derived from step 1. 3. If the sum of all the digits is divisible by 10, the card number is valid; otherwise it is invalid. Let us demonstrate this algorithm’s use with an example. In this example we will attempt to validate a credit card with the number 123467890123456. 1. First, multiply the value of the alternate digits by 2 starting from the second rightmost digit as described previously. Digit 1234567 8 9 0 1 2 3 456 Multipler x2 x2 x2 x2 x2 x2 x2 x2 Result 2 6 10 14 18 2 6 10 2. Next, add the individual digits derived from the previous step. 2 + 2 + 6 + 4 + ( 1 + 0 ) + 6 + ( 1 + 4 ) + 8 + ( 1 + 8 ) + 0 + 2 + 2 + 6 + 4 + ( 1 + 0 ) + 6 = 64 www.syngress.com 159_wg_wi_04 10/22/01 4:34 PM Page 157 158 Chapter 4 • Enhancing Client-Side Functionality with WMLScript 3. Finally, attempt to divide the resultant sum from step 2 by a value of 10. Sum=64 Sixty-four is not divisible by 10; therefore the card number is invalid! Our implementation of this algorithm using WMLScript is shown in Figure 4.12 and Figure 4.13. Figure 4.12 Example4.wml—WML Deck to Prompt the User to Enter a Credit Card Number <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <template> <do type="options" label="Main"> <go href="#card1"/> </do> </template> <card id="card1" title="Card 1"> <p> Please enter credit card number: <input type="text" format="*N" name="num"/> <do type="accept" label="Validate!"> <go href="Example4.wmls#Validate('$(num)')" /> </do> </p> </card> <card id="card2" title="Invalid"> <p> Credit number not correct. </p> </card> <card id="card3" title="Valid"> <p> Credit number correct. www.syngress.com Continued 159_wg_wi_04 10/22/01 4:34 PM Page 158 Enhancing Client-Side Functionality with WMLScript • Chapter 4 159 </p> </card> </wml> Figure 4.13 Example4.wmls—WMLScript Program to Validate the Authenticity of a Credit Card Number extern function Validate(num) { var sum = 0; var temp, length; length = String.length(num); for (var i=length-1; i>=0; —i) { //start with rightmost digit if (i % 2 == 0) { temp = Lang.parseInt(String.charAt(num,i)) * 2; //multiply the //number by 2 sum += Lang.parseInt(String.charAt(temp,0)); //sum up the // first digit if (String.length(temp) > 1) //if more than 1 //digit sum += Lang.parseInt(String.charAt(temp,1));// sum up the // second digit } else { sum += Lang.parseInt(String.charAt(num,i)); // simply sum up // the number } } if (sum % 10 != 0) // if not divisible // by 10 WMLBrowser.go("#card2"); // card number // not valid else // else www.syngress.com Figure 4.12 Continued Continued 159_wg_wi_04 10/22/01 4:34 PM Page 159 160 Chapter 4 • Enhancing Client-Side Functionality with WMLScript WMLBrowser.go("#card3"); // card number // is valid } Dissecting the Code We start with the <template> element of the WML deck shown in Figure 4.12: <template> <do type="options" label="Main"> <go href="#card1"/> </do> </template> The <template> element defines deck-level event binding. In this case, the <do> element is applicable to all the cards in the deck. Because WMLScript does not support the use of array, we have to improvise the use of array using a string. Since a string supports element indexing, we can manipulate the digits as though we are using an array (this can be seen in Figure 4.13). For example, if we have 1234567890123456, we can manipulate it as a string (see Figure 4.14). Given the following statement: length = String.length(num); We will first want to know the length of the number: for (var i=length-1; i>=0; —i) { //start with rightmost digit We will then use a for loop to cycle through all the digits in the number: www.syngress.com Figure 4.13 Continued Figure 4.14 Manipulating a String Much Like an Array 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 Position 0 Position 15 159_wg_wi_04 10/22/01 4:34 PM Page 160 Enhancing Client-Side Functionality with WMLScript • Chapter 4 161 if (i % 2 == 0) { temp = Lang.parseInt(String.charAt(num,i)) * 2; //multiply the //number by 2 If the position is an even number (the % is the modulus operator), multiply the digit at that position by 2: sum += Lang.parseInt(String.charAt(temp,0)); //sum up the first digit and sum up the result digit-by-digit. if (String.length(temp) > 1) //if more than 1 //digit sum += Lang.parseInt(String.charAt(temp,1));// sum up the // second digit If the result contains more than a digit, sum up the second digit. } else { sum += Lang.parseInt(String.charAt(num,i)); //simply sum up the number } If the position number is not an even number, simply sum up the number. if (sum % 10 != 0) //if not divisible by 10 WMLBrowser.go("#card2"); //card number not valid else //else WMLBrowser.go("#card3"); //card number is valid Finally, take the result and perform a modulus 10 operation. If there is no remainder the card is valid; otherwise it is invalid. Figure 4.15 shows the resulting screens on the WAP Toolkit. www.syngress.com Figure 4.15 Validating Credit Card Numbers Using WMLScript 159_wg_wi_04 10/22/01 4:34 PM Page 161 . appended to the end of the credit card number .To validate that the number is a valid credit card number, the numbers are applied the same algo- rithm in the reverse manner .The following illustrates the. "&password=" + Password1; The URL for the ASP file is created with the query string containing the userID and password. WMLBrowser.go(URL); The browser is then redirected to the ASP file: else { DisplayMessage("Passwords. applications. Imagine asking the user for his or her birth date. If the user enters 13 for month, the error could be detected early by client-side input validation, rather than posting the input to the server