A Silly Name Generator

You may have seen Web-based toys before that take your name and transform it into a new name, like “Your Superhero Name,” or “Your Name if You Were a Character in The Sopranos.” We’ve settled for simply being ridiculous, so Scripts 15.11 and 15.12 can show you how to get your own, new, silly name. In the process, you can see how to combine string handling, arrays, error checking, and form validation into one darned silly script.

Script 15.11. The Web page where you can enter your real name and get your silly name.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Silly Name Generator</title>
     <script type="text/javascript" src="script05.js"></script>
</head>
<body bgcolor="#FFFFFF">
<h1>What's your silly name?</h1>
<form action="#">
<table>
     <tr>
        <td align="right">First Name:</td>
        <td><input type="text" id="fName" size="30" /></td>
     </tr>
     <tr>
        <td align="right">Last Name:</td>
        <td><input type="text" id="lName" size="30" /></td>
     </tr>
     <tr>
        <td>&nbsp;</td>
        <td><input type="submit" value="Submit" />&nbsp;<input type="reset" /></td>
     </tr>
</table>
</form>
<p id="msgField">&nbsp;</p>
</body>
</html>

To combine JavaScript techniques:

1. 
document.getElementById("msgField").innerHTML = getSillyName();
return false;



When the page first loads, the form’s onsubmit handler is set to call a function, and this is its entire content. First, we call getSillyName(). That function returns a string value (either the silly name or an error message), which we then write out to the page. Then we return false, so that the onsubmit doesn’t actually try to submit the form to the server.

2. 
var firstNm = document.getElementById("fName").value.toUpperCase();
var lastNm = document.getElementById("lName").value.toUpperCase();



Anyone visiting this page will be asked to enter their first and last names into form fields. When the form is submitted, we start off the getSillyName() function by converting both names to all uppercase and storing the result in the variables firstNm and lastNm.

Script 15.12. This script generates a silly name from three arrays, based on characters from the first and last names entered by the user.
window.onload = initAll;

function initAll() {
     document.forms[0].onsubmit = function() {
        document.getElementById("msgField").innerHTML = getSillyName();
							return false;
     }
}

function getSillyName() {
     var firstName = new Array("Runny", "Buttercup", "Dinky", "Stinky", "Crusty", "Greasy", "Gidget", "Cheesypoof", "Lumpy", "Wacky", "Tiny", "Flunky", "Fluffy", "Zippy", "Doofus", "Gobsmacked", "Slimy", "Grimy", "Salamander", "Oily", "Burrito", "Bumpy", "Loopy", "Snotty", "Irving", "Egbert");
     var lastName1 = new Array("Snicker", "Buffalo", "Gross", "Bubble", "Sheep", "Corset", "Toilet", "Lizard", "Waffle", "Kumquat", "Burger", "Chimp", "Liver", "Gorilla", "Rhino", "Emu", "Pizza", "Toad", "Gerbil", "Pickle", "Tofu", "Chicken", "Potato", "Hamster", "Lemur", "Vermin");
     var lastName2 = new Array("face", "dip", "nose", "brain", "head", "breath", "pants", "shorts", "lips", "mouth", "muffin", "butt", "bottom", "elbow", "honker", "toes", "buns", "spew", "kisser", "fanny", "squirt", "chunks", "brains", "wit", "juice", "shower");

     var firstNm = document.getElementById("fName").value.toUpperCase();
							var lastNm = document.getElementById("lName").value.toUpperCase();
     var validName = true;
if (firstNm == "") {
							validName = false;
							}
							else {
							var firstNum = firstNm.charCodeAt(0) - 65;
							if (firstNum < 0 || firstNum > 25) {
							validName = false;
							}
     }

     if (!validName) {
							document.getElementById("fName").focus();
							document.getElementById("fName").select();
							return "That's not a valid first name";
							}
							if (lastNm == "") {
							validName = false;
							}
							else {
							var lastNum1 = lastNm.charCodeAt(0) - 65;
							var lastNum2 = lastNm.charCodeAt((lastNm.length-1)) - 65;
							if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) {
							validName = false;
							}
     }

     if (!validName) {
							document.getElementById("lName").focus();
							document.getElementById("lName").select();
							return "That's not a valid last name";
							}
							return "Your silly name is " + firstName[firstNum] + " " + lastName1[lastNum1] + lastName2[lastNum2];
}

3. 
if (firstNm == "") {
   validName = false;
}



It’s required that a visitor enter at least one character for the first name, so that check is done here. Remember, the expression is read as “if firstNm is equal to nothing, then.” If that’s the case, we set validName to false.

4. 
var firstNum = firstNm.charCodeAt(0) - 65;



Otherwise, the charCodeAt() method takes a single character from a string. That single character in the string is based on the number passed to the method; in this case, it is the character in the 0th place, which means the first character in the string (remember, JavaScript starts counting at 0) and returns the ASCII value for that character. The uppercase alphabet starts with “A” having an ASCII value of 65 and ends with “Z” having a value of 90. We then subtract 65 to get a result between 0 and 25, and this result is saved as firstNum.

5. 
if (firstNum < 0 || firstNum > 25) {
   validName = false;
}



If the user enters a first name that doesn’t start with a character between “A” and “Z”, there won’t be an equivalent silly name. Here, we make sure that it’s within this range before checking the last name. If it isn’t, we set validName to false.

6. 
if (!validName) {
   document.getElementById("fName").focus();
   document.getElementById("fName").select();
   return "That's not a valid firstname";
}



At this point, we know that if validName is false, it means that the user didn’t enter a valid first name. When this happens, we put the cursor in the field, select anything that’s in that field, and return an error message.

7. 
if (lastNm == "") {
   validName = false;
}



Just as with the first name, they have to enter something in the last name field.

8. 
var lastNum1 = lastNm.charCodeAt(0) - 65;
var lastNum2 = lastNm.charCodeAt ((lastNm.length-1)) - 65;



To figure out the visitor’s new silly last name, we’ll need to calculate the ASCII values of both the first and last characters of the last name. The first is found in the same fashion as in step 4. The last character in the string is found by taking the length of lastNm, subtracting 1, and then passing that number to charCodeAt().

9. 
if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) {
   validName = false;
}



As with the first name field, we have to make sure that both the first and last letter of the last name contain a character between “A” and “Z”, so once again, we set validName to false if there’s a problem.

10. 
if (!validName) {
   document.getElementById("lName").focus();
   document.getElementById("lName").select();
   return "That's not a valid lastname";
}



Just as we did in step 6, if the name isn’t valid, we want to let the user know.

Your Silly Name

Your silly name is found by taking the first letter of your first name, the first letter of your last name, and the last letter of your last name, and looking each up on the chart in Table 15.1. The first letter of your first name gives you your new first name, and the two letters from your last name give you the first and second parts of your new silly last name.

Table 15.1. Chart of Silly Names
 First Letter of First NameFirst Letter of Last NameLast Letter of Last Name
Arunnysnickerface
Bbuttercupbuffalodip
Cdinkygrossnose
Dstinkybubblebrain
Ecrustysheephead
Fgreasycorsetbreath
Ggidgettoiletpants
Hcheesypooflizardshorts
Ilumpywafflelips
Jwackykumquatmouth
Ktinyburgermuffin
Lflunkychimpbutt
Mfluffyliverbottom
Nzippygorillaelbow
Odoofusrhinohonker
Pgobsmackedemutoes
Qslimypizzabuns
Rgrimytoadspew
Ssalamandergerbilkisser
Toilypicklefanny
Uburritotofusquirt
Vbumpychickenchunks
Wloopypotatobrains
Xsnottyhamsterwit
Yirvinglemurjuice
Zegbertverminshower

For example, the “T” in Tom gives a new first name of “Oily,” and the “N” and “O” from Negrino produce a new last name of “Gorillahonker.” The “D” in Dori turns into “Stinky,” and the “S” and “H” from Smith turn into “Gerbilshorts.” Consequently, the silly names of this book’s authors are Oily Gorillahonker and Stinky Gerbilshorts.


11. 
return "Your silly name is " + firstName[firstNum] + " " + lastName1[lastNum1] + lastName2[lastNum2];



If we’ve passed all the tests, it’s time to calculate the new silly name. Because we turned the characters into numbers between 0 and 25, we can use the results as indices into the name arrays firstName, lastName1, and lastName2. The result of each array lookup is concatenated to the next, with a blank space between the first name and the last name. Notice that the two parts of the last name are concatenated without a space. When we’re done, that name is returned and put into the document, as shown in Figure 15.7.

Figure 15.7. The resulting silly name.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.207.151