版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第1章Web前端基礎(chǔ)學(xué)習(xí)目的與要求本章對(duì)HTML、CSS與JavaScript進(jìn)行簡(jiǎn)要講述，包括HTML的常用標(biāo)簽、CSS的基本語(yǔ)法、JavaScript的語(yǔ)法基礎(chǔ)和JavaScript對(duì)象等內(nèi)容。通過(guò)本章的學(xué)習(xí)，掌握HTML的常用標(biāo)簽、CSS的使用方法以及JavaScript的語(yǔ)法基礎(chǔ)，能夠設(shè)計(jì)與開(kāi)發(fā)靜態(tài)Web頁(yè)面，并編寫(xiě)頁(yè)面中的JavaScript代碼。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
目錄1.1HTML1.2CSS1.3JavaScript《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.1HTML文件的基本結(jié)構(gòu)<html> <head>
……
</head>
<body>
……
</body></html>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.2編寫(xiě)HTML頁(yè)面HTML、CSS與JavaScript并不需要特殊的開(kāi)發(fā)環(huán)境，它們都是由客戶端的瀏覽器執(zhí)行。HTML文件的擴(kuò)展名為.html或.htm，CSS文件的擴(kuò)展名為.css，JavaScript文件的擴(kuò)展名為.js?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.3常用HTML標(biāo)簽常用HTML標(biāo)簽簡(jiǎn)單劃分為以下4種格式：
<標(biāo)記名稱>單一型，無(wú)設(shè)置值。例如：<br> <標(biāo)記名稱屬性="屬性值">單一型，有設(shè)置值。例如：<hrcolor="red"> <標(biāo)記名稱></標(biāo)記名稱>對(duì)稱型，無(wú)設(shè)置值。例如：<title></title> <標(biāo)記名稱屬性="屬性值"></標(biāo)記名稱>對(duì)稱型，有設(shè)置值。例如：<bodybgcolor="red"></body>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1．標(biāo)題<h1>……</h1><h2>……</h2><h3>……</h3><h4>……</h4><h5>……</h5><h6>……</h6>h1到h6，作為標(biāo)題標(biāo)記，并且依據(jù)重要性遞減，字號(hào)從h1到h6由大變小。h1一級(jí)標(biāo)題代表重中之重，一般運(yùn)用于網(wǎng)站標(biāo)題或者頭條新聞上。h2二級(jí)標(biāo)題主要出現(xiàn)在頁(yè)面的主體內(nèi)容的文章標(biāo)題和欄目標(biāo)題上。h3三級(jí)標(biāo)題一般出現(xiàn)在頁(yè)面的邊側(cè)欄上?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．段落在HTML網(wǎng)頁(yè)中，使用<p>標(biāo)記實(shí)現(xiàn)一個(gè)新段落，語(yǔ)法格式如下：<p>段落的內(nèi)容</p><p>標(biāo)記中有個(gè)屬性align能夠設(shè)置段落中文字的對(duì)齊方式，對(duì)齊方式分為：左對(duì)齊、居中和兩端對(duì)齊，語(yǔ)法格式如下：<palign="對(duì)齊方式"></p>其中，align取值為left時(shí)，文字顯示左對(duì)齊；align取值為right時(shí)，文字顯示右對(duì)齊；align取值為center時(shí)，文字顯示居中對(duì)齊?！纠?-1】有3段文字，對(duì)齊方式依次為左、中、右。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
3．滾動(dòng)（marquee）在HTML頁(yè)面中，可以使用marquee標(biāo)記讓文字滾動(dòng)，該標(biāo)記有滾動(dòng)方向（direction）、滾動(dòng)方式（behavior）、滾動(dòng)次數(shù)（loop）、滾動(dòng)速度（scrollamount）、滾動(dòng)延遲（scrolldelay）、背景顏色（bgcolor）、寬度和高度等常用屬性。語(yǔ)法格式如下：<marqueedirection="滾動(dòng)方向"behavior="滾動(dòng)方式">滾動(dòng)的文字</marquee>其中，direction的值有up、down、left和right，分別表示向上、向下、向左和向右滾動(dòng)，向左滾動(dòng)是默認(rèn)情況；behavior的值有scroll、slide和alternate，分別表示循環(huán)滾動(dòng)、只滾動(dòng)一次和來(lái)回交替滾動(dòng)；loop的值為整數(shù)；scrollamount的值為文字每次移動(dòng)的長(zhǎng)度，以像素為單位；scrolldelay的單位是毫秒?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
3．滾動(dòng)（marquee）【例1-2】編寫(xiě)一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中有一段滾動(dòng)的文字，文字滾動(dòng)方向?yàn)槟J(rèn)方向，文字滾動(dòng)的背景色為藍(lán)色，文字滾動(dòng)方式為來(lái)回交替滾動(dòng)。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
4．列表（1）無(wú)序列表標(biāo)記ulul標(biāo)記用于設(shè)置無(wú)序列表，在每個(gè)列表項(xiàng)目文字之前，以項(xiàng)目符號(hào)作為每條列表項(xiàng)的前綴，各個(gè)列表沒(méi)有級(jí)別之分。無(wú)序列表語(yǔ)法格式如下：<ul> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> ……</ul>無(wú)序列表的項(xiàng)目符號(hào)，默認(rèn)情況下是“
”，而通過(guò)ul標(biāo)記的type屬性可以改變無(wú)序列表的項(xiàng)目符號(hào)，避免項(xiàng)目符號(hào)的單調(diào)。type可取值disc、circle和square，分別代表“
”、“
”和“
”?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）有序列表標(biāo)記ol有序列表中的項(xiàng)目采用數(shù)字或英文字母開(kāi)頭，通常各項(xiàng)目之間是有先后順序的。有序列表語(yǔ)法格式如下：<ol> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> ……</ol>有序列表同無(wú)序列表一樣，也有項(xiàng)目類(lèi)型，也可以通過(guò)type屬性設(shè)置自己的項(xiàng)目類(lèi)型。默認(rèn)情況下，有序列表的項(xiàng)目序號(hào)是數(shù)字。也可以通過(guò)start屬性改變項(xiàng)目序號(hào)的起始值，起始數(shù)值只能是數(shù)字，但同樣對(duì)字母或羅馬數(shù)字起作用。如，項(xiàng)目類(lèi)型為a，起始值為5，那么項(xiàng)目序號(hào)就從英文字母e開(kāi)始編號(hào)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
4．列表【例1-3】編寫(xiě)一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)中分別定義一個(gè)無(wú)序列表和有序列表，無(wú)序列表項(xiàng)目符號(hào)為“
”，有序列表項(xiàng)目序號(hào)為“a、b、c、d……”。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
5．圖像與多媒體HTML圖像是通過(guò)img標(biāo)記進(jìn)行插入。img標(biāo)記有很多屬性，其中src屬性是必需的，它指定要插入圖像文件的位置與名稱，語(yǔ)法格式如下：<imgsrc="圖像文件的路徑及名稱">在網(wǎng)頁(yè)中可以使用bgsound標(biāo)記給網(wǎng)頁(yè)添加背景音樂(lè)，語(yǔ)法格式如下：<bgsoundsrc="音樂(lè)文件的路徑及名稱"loop="播放次數(shù)">在網(wǎng)頁(yè)中可以使用embed標(biāo)記將多媒體文件（如Flash動(dòng)畫(huà)、MP3音樂(lè)、ASF視頻等等）添加到網(wǎng)頁(yè)中，語(yǔ)法格式如下：<embedsrc="多媒體文件的路徑及名稱"width="播放器的寬度"height="播放器的高度"></embed>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
6．超鏈接超鏈接的作用是建立從一個(gè)位置到另一個(gè)位置的鏈接。利用超鏈接不僅可以進(jìn)行網(wǎng)頁(yè)間的相互訪問(wèn)，還可以使網(wǎng)頁(yè)鏈接到其他相關(guān)的多媒體文件上。超鏈接標(biāo)記<a>是一個(gè)非常重要的標(biāo)記，它可以成對(duì)出現(xiàn)在文檔的任何位置，語(yǔ)法格式如下：<ahref="鏈接路徑"target="目標(biāo)窗口的打開(kāi)方式">鏈接內(nèi)容</a>其中，“鏈接內(nèi)容”可以是文字內(nèi)容，也可以是一張圖片。target屬性值可以為_(kāi)self、_blank、_top以及_parent，_self是target的默認(rèn)值。_blank表示目標(biāo)頁(yè)面會(huì)在一個(gè)新的空白窗口中打開(kāi)。_top表示目標(biāo)頁(yè)面會(huì)在頂層框架中打開(kāi)。_parent表示目標(biāo)頁(yè)面會(huì)在當(dāng)前框架的上一層打開(kāi)?！纠?-4】假設(shè)有3個(gè)文件，分別為index.html、addGoods.html和updateGoods.html。其中index.html是起始頁(yè)面，addGoods.html和updateGoods.html在goods文件夾下，goods文件夾和index.html是在同一目錄。在index.html中可以鏈接到后面兩個(gè)頁(yè)面上?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
7．表格一個(gè)表格由行、列和單元格構(gòu)成，可以有多行，每行可以有多個(gè)單元格。創(chuàng)建表格要以<table>標(biāo)記開(kāi)始和</table>標(biāo)記結(jié)束，語(yǔ)法格式如下：<table> <tr> <td>單元格中的內(nèi)容</td> <td>單元格中的內(nèi)容</td> …… </tr> <tr> <td>單元格中的內(nèi)容</td> <td>單元格中的內(nèi)容</td> …… </tr> ……</table>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
7．表格在制作表格時(shí)，可能需要某個(gè)單元格占據(jù)多列的位置，這時(shí)就要使用單元格的colspan屬性設(shè)置單元格所跨的列數(shù)，語(yǔ)法格式如下：<tdcolspan="跨的列數(shù)值">同樣，當(dāng)需要某個(gè)單元格占據(jù)多行的位置時(shí)，就要使用rowspan屬性設(shè)置該單元格所跨的行數(shù)。<tdrowspan="跨的行數(shù)值">《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
7．表格【例1-5】編寫(xiě)網(wǎng)頁(yè)example1_5.html，在網(wǎng)頁(yè)中有個(gè)表格，表格標(biāo)題為“個(gè)人簡(jiǎn)歷”，邊框?qū)挾葹?，邊框顏色為green。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
8．表單表單是將用戶輸入的信息封裝提交給服務(wù)器，實(shí)現(xiàn)與用戶的交互。表單是用<form>標(biāo)記定義的，它類(lèi)似于一個(gè)容器，表單對(duì)象必須在表單中才有效，如input。定義表單的語(yǔ)法格式如下：<formaction="表單的處理程序">．．．
input元素．．．</form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（1）文本框與密碼框input標(biāo)記的type屬性值為text，代表的是單行文本框，在其中可以輸入任何類(lèi)型的文本、數(shù)字或字母，輸入的內(nèi)容是以單行顯示。input標(biāo)記的type屬性值為password，代表的是密碼框，在其中輸入的字符都是以“*”或圓點(diǎn)“
”顯示。<form>
姓名：<inputtype="text"value=""name="userName"/> <br>
密碼：<inputtype="password"value="123456"name="pwd"/></form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）單選按鈕與復(fù)選框單選按鈕用來(lái)讓用戶進(jìn)行單一選擇，如讓用戶選擇性別。單選按鈕在頁(yè)面中以圓框（“
”）顯示，語(yǔ)法格式如下：<inputtype="radio"value="單選按鈕的值"name="單選按鈕的名稱"checked/>其中，name代表單選按鈕的名稱，一組單選按鈕的名稱都相同，action處理程序通過(guò)name獲取被選中的單選按鈕的value值。checked表示該單選按鈕被選中，而在一組單選按鈕中只有一個(gè)單選按鈕設(shè)置為checked。<form> <inputtype="radio"value="male"name="sex"checked/>男
<inputtype="radio"value="female"name="sex"/>女</form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）單選按鈕與復(fù)選框復(fù)選框與單選按鈕不同的是復(fù)選框能夠?qū)崿F(xiàn)選項(xiàng)的多選，以一個(gè)方框（“
”）表示，語(yǔ)法格式如下：<inputtype="checkbox"value="復(fù)選框的值"name="復(fù)選框的名稱"checked/>其中，當(dāng)用戶選中復(fù)選框后，value屬性的值傳遞給處理程序。name代表的是復(fù)選框的名稱，一組復(fù)選框的名稱都相同，處理程序通過(guò)name獲取被選中的復(fù)選框的value值（以數(shù)組的形式返回，數(shù)組元素為被選中的復(fù)選框的value值）。checked表示該復(fù)選框被選中，一組復(fù)選框中可以同時(shí)有多個(gè)被選中。<form> <inputtype="checkbox"value="zhangsan"name="lover"checked/>張三
<inputtype="checkbox"value="lisi"name="lover"checked/>李四
<inputtype="checkbox"value="wangwu"name="lover"/>王五</form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）按鈕普通按鈕主要是配合腳本語(yǔ)言（JavaScript）來(lái)進(jìn)行表單的處理，語(yǔ)法格式如下：<inputtype="button"value="按鈕的值"name="按鈕的名稱"/>其中，value的取值就是顯示在按鈕上的文字，在普通按鈕中可以添加onclick、onfocus等JavaScript事件實(shí)現(xiàn)特定的功能。當(dāng)用戶在表單中輸入信息后，想清除輸入的信息，將表單恢復(fù)成初始狀態(tài)時(shí)，需要使用重置按鈕，語(yǔ)法格式如下：<inputtype="reset"value="按鈕的值"name="按鈕的名稱"/>用戶單擊提交按鈕時(shí)，可以實(shí)現(xiàn)表單內(nèi)容的提交，語(yǔ)法格式如下：<inputtype="submit"value="按鈕的值"name="按鈕的名稱"/>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）按鈕<form>
姓名：<inputtype="text"name="userName"/><br> <inputtype="submit"value="提交"/> <inputtype="reset"value="重置"/> <inputtype="button"value="關(guān)閉"onclick="window.close()"/></form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（4）文件域文件域是由一個(gè)文本框和一個(gè)“瀏覽”按鈕組成的。用戶上傳文件時(shí)，可以直接在文本框中輸入要上傳文件的路徑，也可以單擊“瀏覽”按鈕選擇文件，語(yǔ)法格式如下：<inputtype="file"name="文件域的名稱"/>使用文件域上傳文件時(shí)，一定別忘記設(shè)置form表單信息提交的編碼方式為enctype="multipart/form-data"。如下面原始代碼：<formaction=""enctype="multipart/form-data">
你的靚照：<inputtype="file"name="fileName"/></form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（5）下拉列表下拉列表語(yǔ)法格式如下：<selectname="下拉列表的名稱"size="顯示的項(xiàng)數(shù)"multiple> <optionvalue="選項(xiàng)值1"selected>選項(xiàng)1顯示內(nèi)容
<optionvalue="選項(xiàng)值2">選項(xiàng)2顯示內(nèi)容
……</select>其中，選項(xiàng)值是提交給服務(wù)器的值，而選項(xiàng)顯示內(nèi)容才是真正在頁(yè)面中要顯示的。selected表示此選項(xiàng)在默認(rèn)狀態(tài)下是選中的，size用來(lái)設(shè)定列表在頁(yè)面中最多顯示的項(xiàng)數(shù)，當(dāng)超出這個(gè)值時(shí)就會(huì)出現(xiàn)滾動(dòng)條。multiple表示列表可以進(jìn)行多項(xiàng)選擇?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（5）下拉列表<selectname="cities"size="2"multiple> <optionvalue="beijing"selected>北京
<optionvalue="shanghai"selected>上海
<optionvalue="guangzhou">廣州 <optionvalue="shenzhen">深圳</select>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（6）文本區(qū)文本區(qū)是用來(lái)輸入多行文本。文本區(qū)和其他表單控件不一樣，它使用的是textarea標(biāo)記而不是input標(biāo)記，語(yǔ)法格式如下：<textareaname="文本區(qū)的名稱"cols="列數(shù)"rows="行數(shù)"></textarea>其中，cols用于設(shè)定文本區(qū)的列數(shù)，也就是其寬度；rows用于設(shè)定文本區(qū)的行數(shù)，也就是高度值，當(dāng)文本區(qū)的內(nèi)容超出這一范圍時(shí)就會(huì)出現(xiàn)滾動(dòng)條。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.4實(shí)踐環(huán)節(jié)——調(diào)查問(wèn)卷制作《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
目錄1.1HTML1.2CSS1.3JavaScript《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.1CSS基本語(yǔ)法CSS的語(yǔ)法由三部分構(gòu)成：選擇符（selector）、屬性（property）和屬性值（value）。語(yǔ)法格式如下：選擇符{
屬性:值}選擇符用來(lái)指定針對(duì)哪個(gè)HTML標(biāo)簽應(yīng)用樣式表，任何一個(gè)HTML標(biāo)簽都可以是一個(gè)CSS的選擇符。如：body{ color:blue}其中，body就是選擇符，color就是屬性，blue就是屬性值。該規(guī)則表示在網(wǎng)頁(yè)body標(biāo)簽里的內(nèi)容為藍(lán)色。為選擇符指定多個(gè)樣式，需要在屬性之間用分號(hào)加以分隔?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁(yè)中添加CSS的方法CSS在網(wǎng)頁(yè)中按其位置可以分為三種：內(nèi)嵌樣式、內(nèi)部樣式和外部樣式。1．內(nèi)嵌樣式內(nèi)嵌樣式是將樣式代碼寫(xiě)在標(biāo)記里面的，使用style作為屬性，樣式語(yǔ)句作為屬性值。內(nèi)嵌樣式只對(duì)所在標(biāo)記有效。如：<pstyle="font-size:20pt;color:red">這個(gè)style定義<p></p>里面的文字是20pt字號(hào)，字體顏色是紅色。</p>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁(yè)中添加CSS的方法2．內(nèi)部樣式內(nèi)部樣式是使用<style>標(biāo)記將樣式代碼寫(xiě)在HTML的<head></head>里面的。內(nèi)部樣式只對(duì)所在網(wǎng)頁(yè)有效。如：<styletype="text/css">h1{ border-width:1; text-align:center; color:red}</style><body><h1>這個(gè)標(biāo)題使用了style。</h1></body>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁(yè)中添加CSS的方法3．外部樣式（1）鏈接樣式表將樣式代碼寫(xiě)在一個(gè)以.css為后綴的CSS文件里，然后在每個(gè)需要用到這些樣式的網(wǎng)頁(yè)里引用這個(gè)CSS文件。通過(guò)HTML的link元素將外部的樣式文件鏈接到網(wǎng)頁(yè)里。如：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><linkrel="stylesheet"href="mystyle.css"type="text/css"/></head><body>
<h1>標(biāo)題</h1> <p>段落內(nèi)容</p></body></html>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁(yè)中添加CSS的方法（2）導(dǎo)入樣式表在<style>標(biāo)簽內(nèi)，使用@import導(dǎo)入外部樣式文件。例如：<styletype="text/css"> <!--
@importurl("mystyle.css"); h1{color:red} --></style></head><body> <h1>標(biāo)題</h1> <p>段落內(nèi)容</p></body></html>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁(yè)中添加CSS的方法使用外部樣式，相對(duì)于內(nèi)嵌樣式和內(nèi)部樣式，有以下優(yōu)點(diǎn)：①樣式代碼可以復(fù)用。一個(gè)外部CSS文件，可以被很多網(wǎng)頁(yè)共用。②便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個(gè)網(wǎng)頁(yè)。③提高網(wǎng)頁(yè)顯示的速度。如果樣式寫(xiě)在網(wǎng)頁(yè)里，會(huì)降低網(wǎng)頁(yè)顯示的速度，如果網(wǎng)頁(yè)引用一個(gè)CSS文件，這個(gè)CSS文件已經(jīng)在緩存區(qū)（其它網(wǎng)頁(yè)早已經(jīng)引用過(guò)它），網(wǎng)頁(yè)顯示的速度就比較快?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.3選擇符的分類(lèi)1．普通選擇符任意的HTML標(biāo)記都可以作為選擇符，這樣的選擇符稱為普通選擇符。其樣式僅僅作用在選擇符指定的HTML標(biāo)記上。如：p{ color:red}《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.3選擇符的分類(lèi)2．類(lèi)選擇符HTML標(biāo)記名加上類(lèi)名，中間用“.”號(hào)分開(kāi)，類(lèi)名供該HTML標(biāo)記的class屬性使用。希望<p>有兩種樣式，一種是居中對(duì)齊，一種是居右對(duì)齊。那么可以寫(xiě)成如下的樣式：p.right
{ text-align:right}p.center{ text-align:center}其中，right和center就是兩個(gè)class。在網(wǎng)頁(yè)中可以引用這兩個(gè)class設(shè)置段落的對(duì)齊方式。示例代碼如下：<pclass="center">這一段內(nèi)容是居中顯示。</p><pclass="right">這一段內(nèi)容是居右顯示。</p>如果省略HTML標(biāo)記名只寫(xiě)“.類(lèi)名”表示這個(gè)類(lèi)名適用于所有的HTML標(biāo)記的class屬性，這種選擇符稱為通用類(lèi)選擇符?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.3選擇符的分類(lèi)3．id選擇符HTML標(biāo)記名加上id名，中間用“#”號(hào)分開(kāi)，id名供該HTML標(biāo)記的id屬性使用。如：p#svp{ font-size:12pt}其中，svp是個(gè)id選擇符的名字，在網(wǎng)頁(yè)中可以引用這個(gè)id選擇符設(shè)置<p>的樣式。示例代碼如下：<pid="svp">這一段話的字體大小為12pt。</p>如果省略HTML標(biāo)記名只寫(xiě)“#id名”表示這個(gè)id名適用于所有的HTML標(biāo)記的id屬性，這種選擇符稱為通用id選擇符?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.4偽類(lèi)及偽對(duì)象偽類(lèi)及偽對(duì)象由CSS自動(dòng)支持，屬于CSS的一種擴(kuò)展類(lèi)型。名稱不能被用戶自定義，使用時(shí)只能按照標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。1．超鏈接偽類(lèi)超鏈接偽類(lèi)共有4個(gè)，它們是a:link、a:visited、a:hover和a:active。a:link表示未被訪問(wèn)的鏈接，a:visited表示已被訪問(wèn)過(guò)的鏈接，a:hover表示鼠標(biāo)懸浮在上的鏈接，a:active表示鼠標(biāo)點(diǎn)中激活鏈接。由于優(yōu)先級(jí)的關(guān)系，在寫(xiě)超鏈接<a>的CSS時(shí)，一定要按照a:link、a:visited、a:hover、a:active的順序書(shū)寫(xiě)。如：a:link{color:red}/*未被訪問(wèn)的鏈接紅色*/a:visited{color:green}/*已被訪問(wèn)過(guò)的鏈接綠色*/a:hover{color:yellow}/*鼠標(biāo)懸浮在上的鏈接黃色*/a:active{color:blue}/*鼠標(biāo)點(diǎn)中激活鏈接藍(lán)色*/《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.4偽類(lèi)及偽對(duì)象2．常用偽對(duì)象:first-letter設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式表屬性，如設(shè)置段落p標(biāo)記的第一個(gè)字符的樣式代碼如下：p:first-letter{ color:red; font-size:16px}:first-line設(shè)置對(duì)象內(nèi)的第一行的樣式表屬性，如設(shè)置body對(duì)象里第一行的樣式代碼如下：body:first-line{ color:red; font-size:16px}《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見(jiàn)的DIV+CSS布局類(lèi)型1．DIVDIV是一個(gè)放置內(nèi)容的容器，用于大面積、大區(qū)域的塊狀排版，樣式需要編寫(xiě)CSS來(lái)實(shí)現(xiàn)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見(jiàn)的DIV+CSS布局類(lèi)型2．一列固定寬度的屬性值是固定像素，無(wú)論怎樣改變?yōu)g覽器窗口大小，DIV的寬度都不改變?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見(jiàn)的DIV+CSS布局類(lèi)型3．兩列固定寬度兩列的布局需要用到兩個(gè)DIV，寬度的屬性值是固定像素?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見(jiàn)的DIV+CSS布局類(lèi)型4．三列浮動(dòng)中間寬度自適應(yīng)三列浮動(dòng)中間寬度自適應(yīng)就是要求左邊DIV固定寬度且左顯示，右邊DIV固定寬度且右顯示，中間DIV根據(jù)左右DIV的間距變化寬度自適應(yīng)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見(jiàn)的DIV+CSS布局類(lèi)型5．三行二列居中高度自適應(yīng)三行二列居中高度自適應(yīng)就是要求整個(gè)網(wǎng)頁(yè)內(nèi)容居中，第一行DIV固定高度且居頂端顯示，第三行DIV固定高度且居底端顯示，中間DIV根據(jù)內(nèi)容的變化高度自適應(yīng)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.6實(shí)踐環(huán)節(jié)——頁(yè)面布局《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
目錄1.1HTML1.2CSS1.3JavaScript《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.1在網(wǎng)頁(yè)中添加JavaScript的方法1．嵌入使用在網(wǎng)頁(yè)代碼中任何位置都可嵌入JavaScript代碼，但建議嵌入到head標(biāo)記中。示例代碼如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>JavaScript嵌入學(xué)習(xí)</title><scripttype="text/javascript"> alert("第一次看到警告框很興奮！");</script></head><body>
好好學(xué)習(xí)JavaScript知識(shí)。</body></html>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.1在網(wǎng)頁(yè)中添加JavaScript的方法2．引入使用當(dāng)多個(gè)頁(yè)面使用相同的JavaScript代碼時(shí)，可以將共用的代碼保存在以.js為擴(kuò)展名的文件中，然后在頁(yè)面中使用src屬性引入外部js文件。示例代碼如下：myFirst.jsalert("被引入到頁(yè)面中！");引入外部js文件學(xué)習(xí).html<html><head><metacharset="UTF-8"><title>引入外部js文件</title><scripttype="text/javascript"src="myFirst.js"charset="GBK"></script></head><body>
好好學(xué)習(xí)JavaScript知識(shí)。</body></html>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.2JavaScript基本語(yǔ)法1．變量使用var可以聲明任意類(lèi)型的變量，如：varfirstNumber=10;2．類(lèi)型轉(zhuǎn)換JavaScript是弱類(lèi)型語(yǔ)言，變量的類(lèi)型對(duì)應(yīng)于其值的類(lèi)型?？梢詫?duì)不同類(lèi)型的變量執(zhí)行運(yùn)算，解釋器強(qiáng)制轉(zhuǎn)換數(shù)據(jù)類(lèi)型，然后進(jìn)行處理。如：數(shù)值與字符串相加，將數(shù)值強(qiáng)制轉(zhuǎn)換為字符串；布爾值與字符串相加，將布爾值強(qiáng)制轉(zhuǎn)換為字符串；數(shù)值與布爾值相加，將布爾值強(qiáng)制轉(zhuǎn)換為數(shù)值。字符串到數(shù)值的轉(zhuǎn)換。如：parseInt(s)將字符串轉(zhuǎn)換為整數(shù)，parseFloat(s)將字符串轉(zhuǎn)換為浮點(diǎn)數(shù)，Number(s)將字符串轉(zhuǎn)換為數(shù)字。parseInt和parseFloat方法只對(duì)string類(lèi)型有效，且需要是數(shù)字開(kāi)頭的字符串?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
賦值運(yùn)算符《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
運(yùn)算符示例說(shuō)明=x=y;將變量y的值賦給x+=x+=y;x=x+y;-=x-=y;x=x-y;*=x*=y;x=x*y;/=x/=y;x=x/y;數(shù)學(xué)運(yùn)算符《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
運(yùn)算符示例說(shuō)明+A=5+8//結(jié)果是13A="5"+8//結(jié)果是"58"如果操作數(shù)都是數(shù)字時(shí)執(zhí)行加法運(yùn)算，如果其中的操作數(shù)有字符串時(shí)，會(huì)執(zhí)行連接字符串的運(yùn)算。-A=8–5減法*A=8*5乘法/A=8/5//結(jié)果是1.6除法%10%3=1取余++++x返回遞增后的x值x++返回遞增前的x值遞增----x返回遞減后的x值x--返回遞減前的x值遞減-如果a等于5，則-a=-5此運(yùn)算符返回操作數(shù)的相反數(shù)邏輯運(yùn)算符《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
運(yùn)算符示例說(shuō)明&&expr1&&expr2邏輯與（表達(dá)式1錯(cuò)誤，表達(dá)式2不再運(yùn)算）||expr1||expr2邏輯或（表達(dá)式1正確，表達(dá)式2不再運(yùn)算）!!expr邏輯非typeof運(yùn)算符《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
示例返回結(jié)果說(shuō)明typeof(true)boolean變量或值是boolean類(lèi)型typeof(300)number變量或值是number類(lèi)型typeof('abc')string變量或值是string類(lèi)型typeof(null)object變量或值是一種引用類(lèi)型或null類(lèi)型typeof(f)function變量是一個(gè)函數(shù)4．注釋aGoodIdea="Commentyourcodethoroughly.";//這是單行注釋。/*這是多行注釋行一。這是多行注釋行二。*/《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
5．變量命名規(guī)則以字母、下劃線（_）或美元符號(hào)（$）開(kāi)頭；余下的字符可以是下劃線、美元符號(hào)或任何的字母、數(shù)字；不能有空格，大小寫(xiě)敏感；不能使用JavaScript中的關(guān)鍵字或保留字命名。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
6．部分保留字break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、finally、new、true、with、default、for、null、try《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)if條件語(yǔ)句if(表達(dá)式){
語(yǔ)句}或if(表達(dá)式)){
語(yǔ)句}else{
語(yǔ)句}《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)switch條件語(yǔ)句switch(表達(dá)式){ casecase1:
語(yǔ)句
break; casecase2:
語(yǔ)句
break; …… default: default語(yǔ)句}《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)for循環(huán)語(yǔ)句for(表達(dá)式1;表達(dá)式2;表達(dá)式3){
語(yǔ)句}while循環(huán)語(yǔ)句while(表達(dá)式){
語(yǔ)句}do-while循環(huán)語(yǔ)句do{
語(yǔ)句}while(表達(dá)式)break/continue語(yǔ)句break語(yǔ)句讓執(zhí)行語(yǔ)句從循環(huán)語(yǔ)句或其它程序塊中跳出。continue語(yǔ)句讓執(zhí)行語(yǔ)句跳過(guò)本次循環(huán)的剩余語(yǔ)句進(jìn)入下一次循環(huán)。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)2．函數(shù)將完成某個(gè)功能的一組語(yǔ)句常寫(xiě)成一個(gè)函數(shù)，函數(shù)的定義格式如下：function函數(shù)名([參數(shù),參數(shù)]){
函數(shù)體}function是關(guān)鍵字，函數(shù)沒(méi)有類(lèi)型，參數(shù)也沒(méi)有類(lèi)型。例如：functiongogo(obj){
document.write("函數(shù)沒(méi)有類(lèi)型，參數(shù)也沒(méi)有類(lèi)型");}《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)3．a(chǎn)rguments對(duì)象函數(shù)可以接受任意個(gè)數(shù)的參數(shù)，通過(guò)arguments對(duì)象來(lái)訪問(wèn)。示例代碼如下：functionsay(){if(arguments[1]!="你好"){ alert(arguments[0]);}else{ alert(arguments[1]);}alert(arguments.length);//返回參數(shù)的個(gè)數(shù)}調(diào)用函數(shù)如下：say("Howareyou?","你好");《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)4．系統(tǒng)函數(shù)JavaScript提供了與任何對(duì)象無(wú)關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需要?jiǎng)?chuàng)建任何對(duì)象就可以直接使用。
eval(字符串表達(dá)式)該函數(shù)的功能是返回字符串表達(dá)式的值，例如：vartest=eval("2+3");//test的值為5parseInt(字符串)該函數(shù)的功能是將以數(shù)字開(kāi)頭的字符串轉(zhuǎn)換為整數(shù)，例如：vartest=parseInt("200.5abc");//test的值為200parseFloat(字符串)該函數(shù)的功能是將以數(shù)字開(kāi)頭的字符串轉(zhuǎn)換為浮點(diǎn)數(shù)，例如：vartest=parseFloat("200.5abc");//test的值為200.5Number(字符串)該函數(shù)的功能是將數(shù)字字符串轉(zhuǎn)換為數(shù)字，字符串中有非數(shù)字字符則返回NaN。例如：vartest=Number("200.5abc");//test的值為NaN《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)【例1-12】編寫(xiě)網(wǎng)頁(yè)example1_12.html，在網(wǎng)頁(yè)中嵌入使用JavaScript程序打印出九九乘法表?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)在鏈接中調(diào)用函數(shù)用戶單擊鏈接時(shí)，即調(diào)用函數(shù)，格式如下：<ahref="javascript:函數(shù)">……</a>在鏈接中調(diào)用函數(shù)的示例代碼如下：<scripttype="text/javascript">functiongogo(){ alert("被鏈接調(diào)用的函數(shù)");}</script></head><body>
<ahref="javascript:gogo()">鏈接調(diào)用函數(shù)</a></body>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)由事件觸發(fā)調(diào)用函數(shù)觸發(fā)事件調(diào)用函數(shù)，格式如下：
事件="函數(shù)"觸發(fā)事件調(diào)用函數(shù)的示例代碼如下：<scripttype="text/javascript">functiongogo(param){ alert(param);}</script><formaction=""><inputtype="button"value="點(diǎn)擊我"onclick="gogo('O(∩_∩)O哈哈~')"/></form>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.4JavaScript對(duì)象一個(gè)JavaScript對(duì)象中可包含若干屬性和方法。屬性是描述對(duì)象的狀態(tài)，對(duì)象用“.”運(yùn)算符訪問(wèn)屬性。方法是描述對(duì)象的行為動(dòng)作，對(duì)象用“.”運(yùn)算符調(diào)用方法。1．對(duì)象創(chuàng)建使用new關(guān)鍵字來(lái)創(chuàng)建對(duì)象，如：varoStringObject=newString();如果構(gòu)造函數(shù)無(wú)參數(shù)，則不必加括號(hào)。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（1）數(shù)組（Array）對(duì)象 創(chuàng)建數(shù)組數(shù)組的創(chuàng)建，示例代碼如下：varmyArray=newArray();//新建一個(gè)長(zhǎng)度為0的數(shù)組varmyArray=newArray(100);//新建一個(gè)長(zhǎng)度為100的數(shù)組varmyArray=newArray(1,2,3);//新建一個(gè)指定長(zhǎng)度的數(shù)組，并賦初值數(shù)組長(zhǎng)度不固定，賦值即可改變長(zhǎng)度。數(shù)組的主要屬性length，返回?cái)?shù)組長(zhǎng)度。 數(shù)組的常用方法reverse方法：將Javascript數(shù)組對(duì)象內(nèi)容反轉(zhuǎn)。concat方法：將兩個(gè)或更多數(shù)組組合在一起，如：varnewArray=tmpArray.concat(tmpArray);join方法：返回一個(gè)將數(shù)組所有元素用指定符號(hào)連在一起的字符串，如：varnewString=tmpArray.join(".");pop()方法：移除數(shù)組中的最后一個(gè)元素并返回該元素。shift()方法：移除數(shù)組中的第一個(gè)元素并返回該元素。slice方法：返回?cái)?shù)組的一部分，如：varnewArray=tmpArray.slice(1，3);《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（1）數(shù)組（Array）對(duì)象 數(shù)組的使用數(shù)組的使用，示例代碼如下：<scripttype="text/javascript">
varmyArray=newArray();
for(vari=0;i<5;i++){
myArray[i]=i;
}
for(varj=0;j<myArray.length;j++){
alert(myArray[j]);
}</script>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）日期（Date）對(duì)象Date對(duì)象可以用來(lái)表示任意的日期和時(shí)間。 創(chuàng)建Date對(duì)象必須使用new運(yùn)算符創(chuàng)建一個(gè)Date對(duì)象。示例代碼如下：vardate=newDate("July8,2012");//2012年7月8日vardate=newDate(2012,7,8);//2012年8月8日vardate=newDate("2012/7/8");//2012年7月8日vardate=newDate(Milliseconds);//自1970年1月1日以來(lái)的毫秒數(shù)創(chuàng)建的日期對(duì)象vardate=newDate();//當(dāng)前系統(tǒng)的時(shí)間對(duì)象 獲取日期的時(shí)間方法getYear()：返回年數(shù)。getMonth()：返回當(dāng)月號(hào)數(shù)（比實(shí)際值小1）。getDate()：返回當(dāng)日號(hào)數(shù)。getDay()：返回星期幾（0表示周日）。getHours()：返回小時(shí)數(shù)。getMinutes()：返回分鐘數(shù)。getSeconds()：返回秒數(shù)。getTime()：返回毫秒數(shù)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）日期（Date）對(duì)象 設(shè)置日期和時(shí)間的方法setYear()：設(shè)置年數(shù)。setMonth()：設(shè)置當(dāng)月號(hào)數(shù)（set6表示7月）。setDate()：設(shè)置當(dāng)日號(hào)數(shù)。setHours()：設(shè)置小時(shí)數(shù)。setMinutes()：設(shè)置分鐘數(shù)。setSeconds()：設(shè)置秒數(shù)。setTime()：設(shè)置毫秒數(shù)。
Date對(duì)象的使用Date對(duì)象的使用，示例代碼如下：<scripttype="text/javascript">
vardate=newDate("2050/12/25");
document.write("2050的圣誕節(jié)是星期"+date.getDay()+"<br>");
vardatenow=newDate();//得到當(dāng)前日期對(duì)象
varmills=date-datenow;//兩個(gè)Date對(duì)象想減得到兩個(gè)日期的時(shí)間間隔（單位是毫秒）
document.write("2050的圣誕節(jié)距離現(xiàn)在還有"+mills+"毫秒<br>");
</script>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）String對(duì)象 創(chuàng)建String對(duì)象字符串對(duì)象的創(chuàng)建，示例代碼如下：varfirstString="Thisisastring";varsecondString=newString("Thisisastring");String對(duì)象的主要屬性length，返回字符串的長(zhǎng)度。
String對(duì)象的常用方法charAt(i)：返回指定索引位置處的字符，索引從0開(kāi)始。concat(str)：連接字符串。indexOf(str)：返回String對(duì)象內(nèi)第一次出現(xiàn)子字符串的字符位置（從左到右查找）。lastIndexOf(str)：返回String對(duì)象中子字符串最后出現(xiàn)的位置。replace(str1,str2)：返回將str1替換為str2后的字符串。split(separator,limit)：將字符串以separator作為分割符切割成多個(gè)子字符串，并將他們作為一個(gè)數(shù)組返回；如果有l(wèi)imit參數(shù)則返回?cái)?shù)組的limit個(gè)元素。substring(start,end)：返回一個(gè)指定位置之間的子字符串，不包括end。toLowerCase()：返回一個(gè)字符串，字符串中的字母被轉(zhuǎn)換為小寫(xiě)字母。toUpperCase()：返回一個(gè)字符串，字符串中的字母被轉(zhuǎn)換為大寫(xiě)字母。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）String對(duì)象
String對(duì)象的使用String對(duì)象的使用，示例代碼如下：<scripttype="text/javascript">
varfirstString="Thisisastring";
for(vari=0;i<firstString.length;i++){
alert(firstString.charAt(i));
}</script>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（4）Math對(duì)象Math對(duì)象是個(gè)全局對(duì)象，使用時(shí)不需要?jiǎng)?chuàng)建。
Math對(duì)象的屬性LN10：10的自然對(duì)數(shù)。LN2：2的對(duì)數(shù)。PI：圓周率。SQRT1_2：1/2的平方根。SQRT2：2的平方根。
Math對(duì)象的常用方法abs(x)：返回x的絕對(duì)值。ceil(x)：返回大于等于x的最小整數(shù)。floor(x)：返回小于等于x的最大整數(shù)。round(x)：舍入到最近整數(shù)。sqrt(x)：返回x的平方根。random()：返回0-1之間的隨機(jī)數(shù)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（4）Math對(duì)象
Math對(duì)象的使用Math對(duì)象的使用，示例代碼如下：<scripttype="text/javascript">
alert(Math.SQRT2);
alert(Math.random());
</script>【例1-13】編寫(xiě)網(wǎng)頁(yè)example1_13.html，在網(wǎng)頁(yè)中定義一個(gè)JavaScript函數(shù)，功能是去除字符串開(kāi)頭及末尾的空格，并使用超鏈接來(lái)調(diào)用該函數(shù)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.5JavaScript對(duì)象模型1．瀏覽器對(duì)象模型瀏覽器對(duì)象是提供獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象。《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．窗口（window）對(duì)象（1）打開(kāi)新窗口使用open()方法可打開(kāi)一個(gè)新窗口，示例代碼如下：varwinObj=open("target.html","target_1","width=500,height=300,scrollbars=no");open方法有3個(gè)參數(shù)：第一個(gè)代表要載入新窗口頁(yè)面的URL，第二個(gè)代表新窗口的名稱，第三個(gè)代表新窗口的屬性，多個(gè)屬性間用逗號(hào)隔開(kāi)。（2）對(duì)話框（與用戶交互）方法
alert()該方法的功能是彈出一個(gè)提示框。示例代碼如下：<scripttype="text/javascript">
alert("請(qǐng)點(diǎn)擊確定按鈕！");</script>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．窗口（window）對(duì)象
prompt(message,defaultText)該方法的功能是彈出可以輸入信息的文本框，第一個(gè)參數(shù)代表用戶輸入信息的提示，第二個(gè)參數(shù)代表文本框的默認(rèn)值。示例代碼如下：<scripttype="text/javascript">
prompt("What'syourname?","chenheng");</script>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．窗口（window）對(duì)象
confirm(message)該方法的功能是彈出對(duì)話框，提示確認(rèn)信息。示例代碼如下：<scripttype="text/javascript">
if(confirm("真的刪除嗎？")){
//單擊確定后的操作
}else{
//單擊取消后的操作
}</script>《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
3．history對(duì)象history對(duì)象記錄著瀏覽器所瀏覽過(guò)的每一個(gè)頁(yè)面，這些頁(yè)面組成了一個(gè)歷史記錄列表。它有3個(gè)主要方法：forward()：將歷史記錄向前移動(dòng)一個(gè)頁(yè)面。back()：將歷史記錄向后移動(dòng)一個(gè)頁(yè)面，在網(wǎng)頁(yè)中經(jīng)常使用該方法提供一個(gè)“返回”的功能。go()：轉(zhuǎn)向歷史記錄中指定地址，使用此方法需要一個(gè)參數(shù)，參數(shù)可以是正負(fù)整數(shù)或字符串。如果參數(shù)是字符串，那么瀏覽器就會(huì)搜索列表，找到最接近當(dāng)前頁(yè)面位置且URL地址中含有此字符串的頁(yè)面，然后轉(zhuǎn)到該頁(yè)面。history對(duì)象的使用，示例代碼如下：history.go(-3);//向后返回三個(gè)訪問(wèn)過(guò)的頁(yè)面histroy.go(3);//向前返回三個(gè)訪問(wèn)過(guò)的頁(yè)面history.back();//與history.go(-1);功能相同history.forward();//與history.go(1);功能相同《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
4．location對(duì)象window對(duì)象的location屬性可以直接改變URL地址：window.location="";或location="";還可以使用location對(duì)象的href屬性或replace(URL)方法改變URL地址：location.href="";或location.replace("");可以使用location對(duì)象的href屬性清空頁(yè)面：location.href="about:blank";//清空頁(yè)面《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
5．document對(duì)象
forms集合在同一個(gè)頁(yè)面上有多個(gè)表單，通過(guò)document.forms[]數(shù)組獲得這些表單對(duì)象要比使用表單名稱方便得多。
getElementById(id)方法該方法的功能是獲得指定id值的表單控件對(duì)象。
getElementsByName(name)方法該方法的功能是獲得指定name值的表單控件對(duì)象，返回的是對(duì)象數(shù)組。 獲取表單對(duì)象的方法獲取表單對(duì)象的方法如下：document.forms[0]; //通過(guò)forms對(duì)象的索引document.forms["myForm"];//通過(guò)forms對(duì)象和表單名稱document.myForm; //通過(guò)表單名稱《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 窗口或頁(yè)面的事件處理《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
事件說(shuō)明onBlur當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)onFocus當(dāng)某個(gè)元素獲得焦點(diǎn)時(shí)觸發(fā)onLoad頁(yè)面內(nèi)容完成裝載時(shí)觸發(fā)onUnload當(dāng)前頁(yè)面被退出或重置時(shí)觸發(fā)1.3.6操作HTML 鍵盤(pán)或鼠標(biāo)的事件處理《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
事件說(shuō)明onClick當(dāng)鼠標(biāo)單擊時(shí)觸發(fā)onDblClick當(dāng)鼠標(biāo)雙擊時(shí)觸發(fā)onMouseDown當(dāng)按下鼠標(biāo)時(shí)觸發(fā)onMouseMove當(dāng)鼠標(biāo)移動(dòng)時(shí)觸發(fā)onMouseOut當(dāng)鼠標(biāo)離開(kāi)某對(duì)象范圍時(shí)觸發(fā)onMouseOver當(dāng)鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)觸發(fā)onMouseUp當(dāng)鼠標(biāo)按下后松開(kāi)鼠標(biāo)時(shí)觸發(fā)onKeyPress當(dāng)鍵盤(pán)上的某個(gè)鍵被按下并且釋放時(shí)觸發(fā)onKeyDown當(dāng)鍵盤(pán)上某個(gè)鍵被按下時(shí)觸發(fā)onKeyUp當(dāng)鍵盤(pán)上某個(gè)鍵被按放開(kāi)時(shí)觸發(fā)1.3.6操作HTML 表單元素的事件處理《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
表單元素主要事件button（按鈕）onClickonBluronFocuscheckbox（復(fù)選框）onClickonBluronFocusfile（上傳文件）onClickonBluronFocuspassword（密碼框）onBluronFocusonSelectradio（單選按鈕）onClickonBluronFocusselect（列表）onFocusonBluronChangetext（文本框）onClickonBluronFocusonChangetextarea（文本區(qū)）onClickonBluronFocusonChange1.3.6操作HTML 表單元素的通用屬性與方法form屬性：獲取該表單控件所屬的表單對(duì)象。name屬性：獲取或設(shè)置表單控件的名稱。type屬性：獲取表單控件的類(lèi)型。value屬性：獲取和設(shè)置表單控件的值。focus方法：讓表單控件對(duì)象獲得焦點(diǎn)。blur方法：讓表單控件對(duì)象失去焦點(diǎn)?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 文本框value屬性：獲得文本框的值，值是字符串類(lèi)型。defaultValue屬性：獲得文本框的默認(rèn)值，值是字符串類(lèi)型。readonly屬性：只讀，文本框中的內(nèi)容不能修改。focus方法：獲得焦點(diǎn)，即獲得鼠標(biāo)光標(biāo)。blur方法：失去焦點(diǎn)。select方法：選中文本框內(nèi)容，突出顯示輸入?yún)^(qū)域?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 復(fù)選框checked屬性：復(fù)選框是否被選中，選中為true，未選中為false。value屬性：設(shè)置或獲取復(fù)選框的值。 單選按鈕checked屬性：?jiǎn)芜x按鈕是否被選中，選中為true，未選中為false。value屬性：設(shè)置或獲取單選按鈕的值?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 下拉列表length屬性：選項(xiàng)個(gè)數(shù)。selectedIndex屬性：當(dāng)前被選中選項(xiàng)的索引。options屬性：所有的選項(xiàng)組成一個(gè)數(shù)組，options表示整個(gè)選項(xiàng)數(shù)組，第一個(gè)選項(xiàng)即為options[0]，第二個(gè)即為options[1]，其他以此類(lèi)推。option的value屬性：<option>標(biāo)記中value所指定的值。option的text屬性：顯示于界面中的文本，即<option>…</option>之間的部分。增加選項(xiàng)：每個(gè)選項(xiàng)都是一個(gè)option對(duì)象，可以創(chuàng)建option對(duì)象，然后添加到select的末尾。如：select.options[select.length]=newOption(text,value);《JavaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.7表單驗(yàn)證用戶在表單中輸入的內(nèi)容提交到服務(wù)器之前，在客戶端利用表單控件產(chǎn)生的事件，運(yùn)用JavaScript，驗(yàn)證用戶輸入數(shù)據(jù)的有效性?！禞avaWeb開(kāi)發(fā)從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.8實(shí)踐環(huán)節(jié)——表單驗(yàn)證制作一個(gè)用戶注冊(cè)頁(yè)面practice1_3.html，具體要求如下： 有常用的登錄賬號(hào)、密碼、確認(rèn)密碼、姓名、身份證號(hào)碼（只考慮1
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2023凈身出戶離婚協(xié)議書(shū)
- 償還借款協(xié)議書(shū)范本
- 額部腫塊病因介紹
- 公司轉(zhuǎn)讓個(gè)人股份協(xié)議
- 中考政治第一部分知識(shí)闖關(guān)能力提升第二課時(shí)調(diào)節(jié)情緒學(xué)習(xí)壓力明辨是非復(fù)習(xí)課獲
- 2015中國(guó)在線音樂(lè)行業(yè)研究報(bào)告
- (2024)赤泥綜合利用生產(chǎn)建設(shè)項(xiàng)目可行性研究報(bào)告(一)
- 2023年辦公照明項(xiàng)目籌資方案
- 【電信終端產(chǎn)業(yè)協(xié)會(huì)】2024年終端智能化分級(jí)研究報(bào)告
- 國(guó)際物流題庫(kù)（含參考答案）
- 臨時(shí)用電配電箱日常檢查表
- 錄井技術(shù)服務(wù)方案與技術(shù)措施
- 2022年二年級(jí)上冊(cè)語(yǔ)文復(fù)習(xí)計(jì)劃
- 小學(xué)語(yǔ)文人教課標(biāo)版（部編）三年級(jí)下冊(cè)習(xí)作：我的植物朋友 1
- 西師大版六年級(jí)數(shù)學(xué)上冊(cè)《比和按比例分配的整理與復(fù)習(xí)》課件
- 房屋租賃合同終止協(xié)議書(shū)格式(3篇)
- PPT成功的秘訣——勤奮
- 建設(shè)工程監(jiān)理概論（PPT）
- 土地整治業(yè)務(wù)培訓(xùn)
- 澳大利亞教育質(zhì)量保障框架ppt課件
- 熱力學(xué)第四章熱力學(xué)第二定律(me)(1)
評(píng)論
0/150
提交評(píng)論