第三章 WEB03_JS篇
今日任務
使用JS完成簡單的數據校驗(document對象、事件、函數)
使用JS完成圖片輪播效果(事件、定時操作)
使用JS完成頁面定時彈出廣告(總結BOM對象以及JS的引入方式)
使用JS完成表單的校驗(總結常用事件)
教學導航
|
教學目標 |
掌握JS的基本語法,數據類型,能夠使用JS完成簡單的頁面交互. 掌握JS中的BOM對象以及JS的引入方式 掌握JS中的常用的事件 掌握JS中的常用DOM操作 瞭解JS中的內置對象和全局函數 |
|
教學方法 |
案例驅動法 |
一、使用JS完成註冊表單數據校驗
1.需求分析
用戶在進行註冊的時候會輸入一些內容，但是有些用戶會輸入一些不合法的內容，這樣會導致服務器的壓力過大，此時我們需要對用戶輸入的內容進行一個校驗(前端校驗和後臺校驗)，前端校驗防君子不防小人。
2.技術分析
2.1 javasscript的介紹
Javascript與java沒有關係(雷鋒和雷峯塔)，它不是編程語言(腳本語言)
2.2 javascript的作用？
HTML：它是整個網站的骨架。
CSS：它是對整個網站骨架的內容進行美化(修飾)
Javascript：它能夠讓整個頁面具有動態效果。
2.3 javascript的組成部分
ECMAScript:它是javascript的核心(語法、變量、數據類型、語句、函數……)
DOM:document object model 整個文檔對象
BOM:瀏覽器對象
2.4 javascript語法
區分大小寫
變量是弱類型的(String str=”aaa” ,var str=”123”;)
每行結尾的分號可有可無(建議大家寫上)
註釋與java、php等語言相同。
2.5javascript的變量
變量可以不用聲明，變量是弱類型。統一使用var來定義！定義變量的時候不要使用關鍵字和保留字。
2.6 javascript數據類型
Javascript數據類型分爲原始數據類型和引用數據類型
原始數據類型：
string、number、boolean、null、undefined
引用數據類型：
2.7 javascript運算符
其它運算符與java大體一致，需要注意其等性運算符。
== 它在做比較的時候會進行自動轉換。
=== 它在做比較的時候不會進行自動轉換。
2.8 javascript語句
所有語句與java大體一致。
2.9 獲取元素內容
獲取元素
document.getElementById(“id名稱”);
獲取元素裏面的值
document.getElementById(“id名稱”).value;
2.10 javascript事件
表單提交事件：onsubmit
2.11 javascripte的輸出
警告框：alert();
向頁面指定位置寫入內容：innerHTML(屬性)
向頁面寫入內容：document.write(“”);
3.步驟分析
第一步：確定事件(onsubmit)併爲其綁定一個函數
第二步：書寫這個函數(獲取用戶輸入的數據)
第三步：對輸入的數據進行判斷(非空)
第四步：如果輸入的內容爲空，給出錯誤提示信息(alert),不讓表單提交
第五步：如果輸入的內容合法，讓表單提交。
4.代碼實現
Html部分代碼：
爲表單綁定一個事件
<form action="#" method="get" onsubmit="return checkForm()">
對需要校驗的輸入項目定義id
<input type="text" name="user" id="user" />
Javascript部分代碼
|
<script type="text/javascript"> function checkForm(){ /*校驗用戶名*/ //alert("aa"); //獲取用戶輸入的數據 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //給出錯誤提示信息 alert("用戶名不能爲空！"); return flase; }
/*校驗郵箱*/ var Evalue = document.getElementById("email").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(Evalue)){ //給出錯誤提示信息 alert("郵箱格式不正確！"); return false; } } </script> |
二、使用JS完成首頁輪播圖效果案例
1.需求分析
我們希望在首頁完成對輪播圖的效果實現：
2.技術分析
獲取元素 document.getElementById(“id名稱”)
事件(onload)
定時操作：setInterval(“changeImg()”,3000);
3.步驟分析
第一步：確定事件(頁面加載事件onload)併爲其綁定一個函數
第二步：書寫這個函數(設置一個定時操作);
第三步：書寫定時操作裏面的函數
第四步：獲取圖片的位置
第五步：爲該圖片設置src屬性值。
4.代碼實現
Javascript部分代碼
|
<script> function init(){ setInterval("changeImg()",3000); }
var i=1; function changeImg(){ i++; var imgEl = document.getElementById("img1"); imgEl.src="../img/"+i+".jpg"; if(i==3){ i=0; } }
</script> |
Html部分代碼
確定事件：onload 加在body裏面！
<body onload="init()">
給指定的圖片位置定義一個id
<img src="../img/1.jpg" width="1300px" id="img1"/>
三、使用JS完成頁面定時彈出廣告
1.需求分析
我們希望在首頁中的頂部做一個定時彈出廣告圖片。其實現效果如下：
2.技術分析
獲取圖片的位置(document.getElementById(“”))
隱藏圖片：display：none
定時操作：setInterval(“顯示圖片的函數”，3000);
3.步驟分析
第一步：確定事件(頁面加載事件onload)併爲其綁定一個函數init()
第二步：在init函數中設置一個顯示圖片的定時操作。
第三步：書寫顯示圖片的函數(獲取圖片元素，設置其display屬性爲block)
第四步：設置一個隱藏圖片的定時操作
第五步：書寫隱藏圖片的函數(獲取圖片元素，設置其display屬性爲none)
- 代碼實現
Javascript部分代碼：
|
<script type="text/javascript"> var time; function init(){ //設置顯示圖片的定時操作 time = setInterval("showAd()",3000); }
//顯示圖片的函數 function showAd(){ //獲取廣告圖片的 var imgEl = document.getElementById("img1"); //設置圖片的屬性(display)讓其顯示 imgEl.style.display="block";
//清除顯示圖片的定時操作 clearInterval(time);
//設置隱藏廣告圖片的定時操作 time = setInterval("hiddenAd()",3000); }
//書寫隱藏廣告圖片的函數 function hiddenAd(){ //獲取廣告圖片並設置隱藏的屬性 document.getElementById("img1").style.display="none"; //清除隱藏圖片的定時操作 clearInterval(time); } </script> |
Html部分代碼：
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="1300px" style="display: none;" id="img1"/>
確定事件(<body onload="init()">)
5.總結
5.1 javascript的引入方式
- 內部引入方式
直接將javascript代碼寫到<script type=”text/javascript”></script>
- 外部引入方式
需要創建一個.js文件，在裏面書寫javascript代碼，然後在html文件中通過script標籤的src屬性引入該外部的js文件
5.2 BOM對象
BOM對象：瀏覽器對象模型(操作與瀏覽器相關的內容)
- Window對象
Window 對象表示瀏覽器中打開的窗口。
setInterval():它有一個返回值，主要是提供給clearInterval使用。
setTimeout():它有一個返回值，主要是提供給clearTimeout使用。
clearInterval():該方法只能清除由setInterval設置的定時操作
clearTimeout():該方法只能清除由setTimeout設置的定時操作
彈出框的幾個方法：
|
<script> //警告框 //alert("aaa");
//確認按鈕 //confirm("您確認刪除嗎？");
//提示輸入框 prompt("請輸入價格："); </script> </head> |
- Location對象
Location 對象包含有關當前 URL 的信息。
href:該屬性可以完成通過JS代碼控制頁面的跳轉。
|
<html> <head> <meta charset="UTF-8"> <title>location對象</title> <script> function tiao(){ window.location.href="http://www.itcast.cn"; } </script> </head> <body> <a href="#" onclick="tiao()">跳轉到傳智播客首頁</a> </body> </html> |
- History對象
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
歷史頁面：使用location頁面(把href屬性值改爲當前的history)
History頁面代碼：
<input type="button" value="返回上一個頁面" onclick="javascript:history.back()"/>
go(參數)
參數：-1 返回上一個歷史記錄頁面；-2返回上上一個歷史記錄頁面，1進入下一個歷史記錄頁面。
讓按鈕點擊失效：
onclick=”javascript:volid(0)”
- Navigator對象
Navigator 對象包含有關瀏覽器的信息。(該對象開發中不怎麼常用)
- Screen對象
Screen 對象包含有關客戶端顯示屏幕的信息。(該對象開發中不怎麼常用)
四、使用JS完成註冊頁面表單校驗
1.需求分析
之前我們已經使用彈出框的方式實現了表單校驗的功能，但是此種方式用戶體驗效果極差！我們希望做成如下這種效果：
2.技術分析
使用事件(聚焦事件onfocus和離焦事件onblur),之前使用onsubmit也需要！
使用<span></span>
向頁面指定位置寫入內容：innerHTML屬性(該屬性的值存在覆蓋現象)
3.步驟分析
第一步：確定事件(給出提示信息使用聚焦事件，給出校驗結果信息使用離焦事件)併爲其綁定函數
第二步：聚焦事件綁定的函數中(獲取span給出提示信息)
第三步：離焦事件綁定的函數中(獲取用戶輸入的內容進行判斷)
第四步：如果失敗，在span位置給出錯誤提示信息，如果成功，讓span內容爲空。
4.代碼實現
Javascript部分代碼：
|
<sctript> function showTips(id,info){ //獲取span元素，給出提示信息 document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; }
function check(id,info){ //獲取用戶輸入的數據 var uValue = document.getElementById(id).value; //進行判斷 if(uValue==""){ //在span位置給出錯誤提示信息 document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; }else{ document.getElementById(id+"span").innerHTML=""; } }
</script> |
Html部分代碼
<input type="text" name="user" id="user" onfocus="showTips('user','用戶名必須以字母開頭！')" onblur="check('user','用戶名不能爲空！')"/><span id="userspan"></span>
5.總結
5.1 javascript的事件
我們之前已經學習過的事件(onsubmit/onload/onfocus/onblur/onclick)
其它事件：
事件案例演示
五、使用JS完成表格的一個隔行換色
1.需求分析
我們希望在後臺頁面中實現一個隔行換色的效果顯示所有的用戶信息，顯示效果如下：
2.技術分析
新標籤的學習
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
確定事件(頁面加載事件onload)
獲取元素：獲取表格(document.getElementById()),最終是爲了獲取表格中tbody裏面的行數(長度)。
Tbody裏面的行數(rows.length)
JS的遍歷(for循環)
獲取奇數行和偶數行(對遍歷中角標對2取餘)
設置背景顏色(.style.backgroundColor)
3.步驟分析
第一步：確定事件(onload)併爲其綁定一個函數
第二步：書寫函數(獲取表格)
第三步：獲取tbody裏面的行數
第四步：對tbody裏面的行進行遍歷
第五步：獲取奇數行和偶數行(角標對2取餘)
第六步：分別對奇數行和偶數行設置背景顏色
4.代碼實現
JS代碼：
|
<script> window.onload = function(){ //1.獲取表格 var tblEle = document.getElementById("tbl"); //2.獲取表格中tbody裏面的行數(長度) var len = tblEle.tBodies[0].rows.length; //alert(len); //3.對tbody裏面的行進行遍歷 for(var i=0;i<len;i++){ if(i%2==0){ //4.對偶數行設置背景顏色 tblEle.tBodies[0].rows[i].style.backgroundColor="pink"; }else{ //5.對奇數行設置背景顏色 tblEle.tBodies[0].rows[i].style.backgroundColor="gold"; } } } </script> |
HTML代碼：
給table裏面添加一個id=“tbl”,在table裏面添加新標籤<thead></thead>和<tbody></tbody>
5.實現一個表格的高亮顯示
爲了加強對事件的學習，添加此案例：
分析：
第一步：確定事件(onmouseover和onmouseout)並分別爲其綁定一個函數
第二步：獲取鼠標移上去的那行，對其設置背景顏色
代碼：
JS代碼：
|
<script> function changeColor(id,flag){ if(flag=="over"){ document.getElementById(id).style.backgroundColor="red"; }else if(flag=="out"){ document.getElementById(id).style.backgroundColor="white"; } } </script> |
HTML代碼
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
6.總結
回顧之前已經使用過的事件
(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
onfocus/onblur:聚焦離焦事件，用於表單校驗的時候比較合適。
onclick/ondblclick:鼠標單擊和雙擊事件
onkeydown/onkeypress：搜索引擎使用較多
onload：頁面加載事件，所有的其它操作(匿名方式)都可以放到這個綁定的函數裏面去。如果是有名稱，那麼在html頁面中只能寫一個。
onmouseover/onmouseout/onmousemove：購物網站商品詳情頁。
onsubmit：表單提交事件 ，有返回值，控制表單是否提交。
onchange:當用戶改變內容的時候使用這個事件(二級聯動)
六、使用JS完成全選和選不選操作
1.需求分析
我們希望在後臺系統實現一個批量刪除的操作(全選所有的複選框)，顯示效果如下：
2.技術分析
確定事件(鼠標單擊事件onclick)，事件綁定到編號前面的複選框裏面
獲取編號前面的複選框的狀態(是否選中)
獲取複選框：var checkAllEle = document.getElementById(“id”)
獲取複選框的狀態：checkAllEle.checked?
獲取下面所有的複選框：
document.getElementsByName(“name”);
3.步驟分析
第一步：確定事件(onclick)併爲其綁定一個函數
第二步：書寫函數(獲取編號前面的複選框，獲取其狀態)
第三步：判斷編號前面複選框的狀態(如果爲選中，獲取下面所有的複選框，並將其狀態置爲選中)
第四步：判斷編號前面複選框的狀態(如果爲未選中，獲取下面所有的複選框，並將其狀態置爲未選中)
- 代碼實現
JS部分代碼：
|
<script> function checkAll(){ //1.獲取編號前面的複選框 var checkAllEle = document.getElementById("checkAll"); //2.對編號前面複選框的狀態進行判斷 if(checkAllEle.checked==true){ //3.獲取下面所有的複選框 var checkOnes = document.getElementsByName("checkOne"); //4.對獲取的所有複選框進行遍歷 for(var i=0;i<checkOnes.length;i++){ //5.拿到每一個複選框，並將其狀態置爲選中 checkOnes[i].checked=true; } }else{ //6.獲取下面所有的複選框 var checkOnes = document.getElementsByName("checkOne"); //7.對獲取的所有複選框進行遍歷 for(var i=0;i<checkOnes.length;i++){ //8.拿到每一個複選框，並將其狀態置爲未選中 checkOnes[i].checked=false; } } } </script> |
HTML代碼：
複選框前面的：
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
下面所有的複選框：
<td><input type="checkbox" name="checkOne"/></td>
5.總結
5.1 javascript的DOM操作
Document:整個html文件都成爲一個document文檔
Element:所有的標籤都是Element元素
Attribute：標籤裏面的屬性
Text：標籤中間夾着的內容爲text文本
Node:document、element、attribute、text統稱爲節點node.
- Document對象
每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。
後面兩個方法獲取之後需要遍歷！
以下兩個方法很重要，但是在手冊中查不到！
創建文本節點：document.createTextNode()
創建元素節點：document.createElement()
- Element對象
我們所認知的html頁面中所有的標籤都是element元素
|
向元素添加新的子節點，作爲最後一個子節點。 |
|
|
返回元素的首個子節點。 |
|
|
返回元素節點的指定屬性值。 |
|
|
設置或返回元素的內容。 |
|
|
在指定的已有的子節點之前插入新節點。 |
|
|
返回元素的最後一個子元素。 |
|
|
把指定屬性設置或更改爲指定值。 |
|
|
從元素中移除子節點。 |
|
|
替換元素中的子節點。 |
- Attribute對象
我們所認知的html頁面中所有標籤裏面的屬性都是attribute
5.2 DOM練習
在頁面中使用列表顯示一些城市
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
我們希望點擊一個按鈕實現動態添加城市。
分析：
事件(onclick)
獲取ul元素節點
創建一個城市的文本節點
創建一個li元素節點
將文本節點添加到li元素節點中去。
使用element裏面的方法appendChild()來添加子節點
代碼：
JS代碼
|
<script> window.onload = function(){ document.getElementById("btn").onclick = function(){ //1.獲取ul元素節點 var ulEle = document.getElementById("ul1"); //2.創建城市文本節點 var textNode = document.createTextNode("深圳");//深圳 //3.創建li元素節點 var liEle = document.createElement("li");//<li></li> //4.將城市文本節點添加到li元素節點中去 liEle.appendChild(textNode);//<li>深圳</li> //5.將li添加到ul中去 ulEle.appendChild(liEle); } } </script> |
HTML代碼
|
<input type="button" value="添加新城市" id="btn"/> <ul id="ul1"> <li>北京</li> <li>上海</li> <li>廣州</li> </ul> |
七、使用JS完成省市二級聯動
1.需求分析
我們希望在註冊頁面中添加一個字段(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態加載該省份下所有的城市。顯示的效果如下：
2.技術分析
事件(onchange)
使用一個二維數組來存儲省份和城市(二維數組的創建？)
獲取用戶選擇的省份(使用方法傳參的方式：this.value)
遍歷數組(獲取省份與用戶選擇的省份比較，如果相同了，繼續遍歷該省份下所有的城市)
創建文本節點和元素節點並進行添加操作
createTextNode()
createElement()
appendChild()
3.步驟分析
第一步：確定事件(onchange)併爲其綁定一個函數
第二步：創建一個二維數組用於存儲省份和城市
第三步：獲取用戶選擇的省份
第四步：遍歷二維數組中的省份
第五步：將遍歷的省份與用戶選擇的省份比較
第六步：如果相同，遍歷該省份下所有的城市
第七步：創建城市文本節點
第八步：創建option元素節點
第九步：將城市文本節點添加到option元素節點中去
第十步：獲取第二個下拉列表，並將option元素節點添加進去
第十一步：每次操作前清空第二個下拉列表的option內容。
4.代碼實現
JS代碼：
|
<script> //1.創建一個二維數組用於存儲省份和城市 var cities = new Array(3); cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市"); cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市"); cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市"); cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
function changeCity(val){
//7.獲取第二個下拉列表 var cityEle = document.getElementById("city");
//9.清空第二個下拉列表的option內容 cityEle.options.length=0;
//2.遍歷二維數組中的省份 for(var i=0;i<cities.length;i++){ //注意，比較的是角標 if(val==i){ //3.遍歷用戶選擇的省份下的城市 for(var j=0;j<cities[i].length;j++){ //alert(cities[i][j]); //4.創建城市的文本節點 var textNode = document.createTextNode(cities[i][j]); //5.創建option元素節點 var opEle = document.createElement("option"); //6.將城市的文本節點添加到option元素節點 opEle.appendChild(textNode); //8.將option元素節點添加到第二個下拉列表中去 cityEle.appendChild(opEle); } } } } </script> |
Html代碼：
|
<select onchange="changeCity(this.value)"> <option>--請選擇--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city">
</select> |
5.總結
5.1 javascript內置對象
- Array對象
數組的創建：
數組的特點：
長度可變！數組的長度=最大角標+1
- Boolean對象
對象創建：
如果value 不寫，那麼默認創建的結果爲false
- Date對象
|
返回 1970 年 1 月 1 日至今的毫秒數。 |
解決瀏覽器緩存問題
- Math和number對象
與java裏面的基本一致。
- String對象
|
找到一個或多個正則表達式的匹配。 |
|
|
從起始索引號提取字符串中指定數目的字符。 |
|
|
提取字符串中兩個指定的索引號之間的字符。 |
例子：
|
<script> var str = "-a-b-c-d-e-f-"; var str1 = str.substr(2,4);//-b-c //alert(str1);
var str2 = str.substring(2,4);//-b alert(str2); </script> |
- RegExp對象
正則表達式對象
|
檢索字符串中指定的值。返回 true 或 false。 |
5.2 全局函數
全局屬性和函數可用於所有內建的 JavaScript 對象
關於編碼和解碼的一組方法：
|
|