- JavaScript程序設計：基礎·PHP·XML
- (美)Elizabeth Drake
- 1709字
- 2020-10-30 18:12:26
1.8.2 Carla's Classroom：創建About You頁面
Carla是一位小學老師，她委托你為她的班級編制練習網站。此時，即使你的JavaScript程序設計技能還很有限，你仍然能夠為小孩子們開發一些非常好的練習。如果打開Student Data Files中的文件index.html，將看到Carla's Classroom的首頁。它看起來像這樣：
現在，你可以編輯這個頁面以便添加一條到新建頁面的鏈接。因為這個新頁面允許孩子錄入個人信息，所以將它命名為aboutme.html。在頁面的頂部添加新的導航鏈接，其鏈接文本是“About Me!”。你可以使用Student Data Files中的一個圖像或者自己找到的圖像。把新頁面存儲在與index.html相同的文件夾中，并把圖像放入images文件夾中。這個鏈接的代碼如下：
這個頁面現在看起來像這樣：
現在，我們將創建“About Me!”頁面。
1.8.2.1 開發About Me!頁面
在這個頁面上，學生將錄入4種信息，你也可能會添加更多的信息。我們將要求學生錄入他的名字、年齡、喜歡的科目和喜愛的老師。為了讓頁面更有趣一點兒，我們將添加代碼使得不管學生錄入什么，喜愛的老師總是Carla。
我們要確保這個站點的每個頁面使用相同的樣式。index.html頁面使用外部樣式表carla.css，這個文件可以在Student Data Files中找到。一定要把這個站點的所有文件保存在你的計算機或閃存上的一個文件夾中，創建這個文件夾并命名為carla。將任何網頁使用的所有圖像保存在文件夾images中也是一個好習慣，因此在carla文件夾中創建這個文件夾。你也應該將index.html頁面使用的所有圖像復制到你的image文件夾中。
可以將index.html頁面用做一模板，并將這個新頁面命名為aboutme.html。新頁面的內容將放入其id="content"的<div>容器中，因此可以刪除在<div></div>標簽對之間的所有內容，并且添加頁標題“Carla's Classroom|About Me!”。你可以添加來自Student Data Files中的圖像girl.jpg和boy.jpg，或者讓內容區域保持空白。現在，這個新頁面看起來像這樣：
1.8.2.2 編寫代碼
這個頁面提示孩子輸入名字、年齡、喜愛的科目和喜愛的老師。前3項使用的編碼技術與Greg's Gambits網站相同。當完成這3件事情之后，主要工作是提示輸入喜愛的老師并且添加一點兒額外的代碼。
（1）提示輸入孩子的名字、年齡和喜歡的科目
要從孩子獲得這些信息，可以將3個按鈕加入頁面的內容區域。單擊每個按鈕時將分別調用一個JavaScript函數，該函數聲明一個變量并且賦值為提示對話框的結果，而每個提示對話框將請求不同的信息。然后，函數在頁面上顯示這個值。以下顯示有關代碼并給出詳細解釋。
這個頁面的代碼類似于Greg's Gambits站點的aboutyou.html頁。第27、29和31行添加3個按鈕，分別是“Enter your name”、“Enter your age”和“Enter your favorite subject”。它們使用onclick事件調用3個函數：getName()、getAge()和getSubject()，這些函數代碼放在<head>區域。第28、30和32行也添加了一些HTML代碼。<span></span>區域的元素指定了id屬性。其中，"myname"標識放置函數getName()結果的區域，"myage"標識放置函數getAge()結果的區域，"mysubject"標識放置函數getSubject()結果的區域。
函數getName()起始于第6行。在第7行的左花括號之后，第8行使用prompt()要求孩子輸入名字。同一行還聲明一個變量name，并且賦值為prompt()的結果。此時，name包含孩子的名字。然后，第9行將名字顯示在網頁上，做法是使用innerHTML屬性。第9行如下：
這行指令指示取出name的值，并且替換myname容器中的任何內容。其中，getElementById()方法用于獲取其id="myname"的元素，而innerHTML屬性用于將name的值替換這個元素內的任何代碼。
第11~15行的函數getAge()和第16~19行的函數getSubject()的代碼幾乎與這個函數相同，只是將對孩子名字的所有引用分別用孩子的年齡和喜愛的科目替換。
如果將這些代碼加入到你正在創建的頁面，這個頁面最初看起來像這樣：
如果為名字錄入Lulu，為年齡錄入7并為科目錄入music，該頁將看起來像這樣：
（2）提示輸入孩子喜愛的老師
為了讓孩子錄入他喜愛的老師，我們使用與前面3個按鈕和函數相同的代碼。然而作為一個小笑話，這次將添加一行代碼強迫輸出Carla是喜愛的老師，而不管孩子錄入的是什么。
為創建孩子將單擊的按鈕和存放結果的<span>容器，編寫如下代碼：
函數getTeacher()應該放在<head>區域的函數getSubject()之后，并且包括一個額外的行。
這段代碼讓孩子在提示時可以錄入任何東西，并且存儲到變量teacher中。然而，下一行聲明了一個新變量favorite，并且賦值為"CARLA"。由于傳遞給myteacher容器的內容是favorite的值而不是teacher的值，所以不管孩子喜愛的老師是誰將總是顯示CARLA，而這正好是Carla想要的結果！完成的aboutme.html頁面在任何孩子使用它之前看起來像這樣：
（3）完成代碼
現在，我們可以將以上設計結果放在一起。下面給出這個頁面的最終代碼，并且帶有行號以便于閱讀。當然，在編制自己的頁面時，不必包括行號。
這里是一個在給定輸入情況下的輸出樣例：
輸入：
輸出：
- 程序員面試筆試寶典（第3版）
- Android項目開發入門教程
- 區塊鏈架構與實現：Cosmos詳解
- Learning Bayesian Models with R
- The React Workshop
- 高級C/C++編譯技術（典藏版）
- INSTANT Django 1.5 Application Development Starter
- 編程數學
- Integrating Facebook iOS SDK with Your Application
- Learning jQuery（Fourth Edition）
- Python3.5從零開始學
- Qlik Sense? Cookbook
- Mastering OAuth 2.0
- WCF技術剖析（卷1）
- Java從入門到精通（視頻實戰版）