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