用js實現一個無聊名字的生成器
html部分：
<!DOCTYPE html>
<html>
<head>
<title>Silly Name Generator</title>
<script src="script05.js"></script>
</head>
<body>
<h1>What's your silly name?</h1>
<table>
<tr>
<td class="rtAlign">First Name:</td>
<td><input type="text" id="fName" size="30"></td>
</tr>
<tr>
<td class="rtAlign">Last Name:</td>
<td><input type="text" id="lName" size="30"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit" id="sillySubmit">
</tr>
</table>
<p id="msgField"> </p>
</body>
</html>
js部分：
window.onload = initAll;
function initAll() {
document.getElementById("sillySubmit").onclick = function() {
document.getElementById("msgField").innerHTML = getSillyName();
return false;
}
}
function getSillyName() {
var firstName = ["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 = ["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 = ["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];
}
分析部分：
1. document.getElementById("msgField").innerHTML = getSillyName();
return false;
當最初載入頁面時，將submit按鈕的onclick處理程式設定為呼叫一個函式，這裡是這個函式
的內容。首先，呼叫getSillyName()。這個函式返回一個字串值（要麼是無聊名，要麼是一個錯
誤訊息），我們會把這個字串寫到頁面上。然後返回false，這樣onclick就不會嘗試將表單提交
到伺服器。
2. var firstNm = document.getElementById("fName").value.toUpperCase();
var lastNm = document.getElementById("lName").value.toUpperCase();
頁面要求每個訪問者在文字欄位中輸入他們的名字和姓氏。當提交表單時，在getSillyName()函
數中，首先將名字和姓氏轉換為全大寫，並且將結果儲存在變數firstNm和lastNm中。
3. if (firstNm = ="") {
validName = false;
}
頁面要求訪問者第一次在名字欄位中至少輸入一個字元，所以在這裡進行檢查。請記住，這個表
達式的意義是“如果firstNm為空，那麼……”。如果是這種情況，就將validName設定為false。
4. var firstNum = firstNm.charCodeAt(0) - 65;
否則，charCodeAt()方法從字串中取出一個字元。這個字元的位置取決於傳遞給方法的數字參
數。在這個示例中，取出0位置上的字元，也就是字串中的第一個字元（請記住，JavaScript 從0
開始編號），並且返回這個字元的ASCII值。大寫字母A的ASCII值為65，Z的ASCII值為90。所
以將返回值減65應該獲得0～25的值，將結果儲存在firstNum中。
5. if (firstNum < 0 || firstNum > 25) {
validName = false;
}
如果使用者輸入的名字並非以A～Z的字元開頭，那麼就沒有對應的無聊名。所以，在檢查姓氏之
前，要確保首字母處於這個範圍中。如果不滿足這個條件，就將validName設定為false。
6. if (!validName) {
document.getElementById("fName").focus();
document.getElementById("fName").select();
return "That's not a valid first name";
}
在這裡檢查validName，如果validName是false，就意味著使用者輸入的名字是無效的。當發生這
種情況時，我們將輸入游標放進這個欄位，選擇這個欄位中的所有內容，並且返回上一個錯誤訊息。
7. if (lastNm == "") {
validName = false;
}
與名字一樣，訪問者必須在姓氏欄位中輸入一些內容。
8. var lastNum1 = lastNm.charCodeAt(0) - 65;
var lastNum2 = lastNm.charCodeAt((lastNm.length-1)) - 65;
為了找到訪問者的無聊姓氏，需要找到姓氏的第一個字元和最後一個字元的ASCII值。第一個字
符的處理與步驟4中相似。最後一個字元是通過lastNm字串的長度減1，然後將這個數字傳遞給
charCodeAt()方法找到的。
9. if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) {
validName = false;
}
與名字欄位一樣，必須確保姓氏的第一個字元和最後一個字元包含A～Z的字元；如果不滿足條
件，就將validName再次設定為false。
10. if (!validName) {
document.getElementById("lName").focus();
document.getElementById("lName").select();
return "That's not a valid last name";
}
與第6步中一樣，如果姓氏是無效的，就向用戶顯示錯誤
訊息。
11. return "Your silly name is " + firstName[firstNum] +
➝" "+ lastName1[lastNum1] + lastName2[lastNum2];
如果通過了所有測試，就要計算這個新的無聊名了。因為
已經將字元轉換為0～25 的數字，所以可以將結果用作
firstName、lastName1和lastName2陣列的索引。將每個陣列查
找的結果依次拼接起來，並且在名字和姓氏之間加一個空格。
注意，姓氏的兩部分是直接拼接的，沒有加空格。完成之後，
將這個姓名返回並放進文件中
