Project 3-9


In this project, you will create a document with a simple form that displays the value of 
a letter grade. 
1. Create a new document in your text editor. 
2. Type the ＜!DOCTYPE＞ declaration, ＜htmi＞ element, document head, and 
＜body＞ element. Use the Transitional DTD and "Letter Grades" as the content of 
the ＜title＞ element. 
3. Create a script section in the document head that includes the following 
checkGrade ( ) function and switch statement: 
＜script type=" text/javascript "＞ 
＜!-- HIDE FROM INCOMPATIBLE BROWSERS 
function checkGrade(grade) { 
switch (grade) { 
case "A": 
window.alert( "Your grade is excellent."); 
case "B": 
window.alert("Your grade is good."); 
case "C": 
window.alert( "Your grade is fair. "); 
case "D": 
window.alert( "You are barely passing."); 
case "F": 
window.alert( "You failed."); 
} 
} 
// STOP HIDING FROM INCOMPATIBLE BROWSERS --＞ 
＜/script＞ 
4. Add code to the switch statement you created in the previous step so that after 
the statements in a case label execute, the switch statement ends. 
5. Modify the switch statement so that a default value of "You did not enter a 
valid letter grade" is displayed in an alert dialog box if none of the case labels 
match the grade variable. 
6. Add the following form to the document body that includes an onclick event 
handler which calls the checkGrade( ) function. The value of tile single text box 
is passed to the checkGrade( ) function. 
＜form name="gradeForm" action=""＞ 
＜input type="text" name="grade" /＞＜input type="button" value="Check 
Grade" onclick="checkGrade(document.gradeForm.grade.value);" /＞ 
＜/form＞ 
7. Save the document as LetterGrades.htm in the Projects folder for Chapter3. 
8. Open the LetterGrades.html document in your Web browser and test tile form 
to see if it works. 
9. Close your Web browser window. 

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Letter Grades</title>
    <script language="javascript">function checkGrade(grade) { 
    switch (grade) { 
    case "A": 
    window.alert( "Your grade is excellent."); 
    break;
    case "B": 
    window.alert("Your grade is good.");
    break; 
    case "C": 
    window.alert( "Your grade is fair. ");
    break; 
    case "D": 
    window.alert( "You are barely passing.");
    break; 
    case "F": 
    window.alert( "You failed."); 
    } 
    } </script> </head><body>
    <form name="gradeForm" action=""> 
    <input type="text" name="grade" /><input type="button" value="Check 
    Grade" onclick="checkGrade(document.gradeForm.grade.value);" /> 
    </form> </body>
    </html>
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Letter Grades</title>
    <script language="javascript">function checkGrade(grade) { 
    switch (grade) { 
    case "A": 
    window.alert( "Your grade is excellent."); 
    break;
    case "B": 
    window.alert("Your grade is good.");
    break; 
    case "C": 
    window.alert( "Your grade is fair. ");
    break; 
    case "D": 
    window.alert( "You are barely passing.");
    break; 
    case "F": 
    window.alert( "You failed."); 
    } 
    } </script> </head><body>
    <form name="gradeForm" action=""> 
    <input type="text" name="grade" /><input type="button" value="Check 
    Grade" onclick="checkGrade(document.gradeForm.grade.value);" /> 
    </form> </body>
    </html>