第3章WEB03- JS篇
今日任務
- 使用JS完成圖片輪播效果
- 使用JS完成頁面定時彈出廣告
- 使用JS完成表單的校驗
- 使用JS完成表格的隔行換色
- 使用JS完成複選框的全選效果
- 使用JS完成省市聯動效果
教學導航
|
教學目標 |
掌握JS中的BOM物件 掌握JS中的常用的事件 掌握JS中的常用DOM操作 瞭解JS中的內建物件 |
|
教學方法 |
案例驅動法 |
1.1 上次課內容回顧：
CSS：
* CSS的概述：層疊樣式表.
* 修飾HTML的頁面.使頁面與樣式分離.
* CSS的語法：
* 選擇器{屬性名:屬性值;屬性名:屬性值;...}
* CSS的引入方式：
* 行內樣式：在html元素上使用style屬性設定
* 內部樣式：在html中使用<style></style>進行設定
* 外部樣式：定義一個css檔案,在html中引入該檔案.<link href=”” type=”” rel=””/>
* CSS的選擇器：(****)
* 元素選擇器:
* ID選擇器：
* 類選擇器：
* 後代選擇器：
* 子元素選擇器：
* CSS的樣式：
* 文字
* 背景
* 字型
* 列表
* CSS的盒子模型：
* 內邊距：padding
* 邊框：border
* 外邊距：margin
* CSS的懸浮和定位：
* 懸浮：float屬性設定懸浮.
* 清除懸浮：clear屬性清除.
* 定位：position屬性設定定位.
* 使用left和top屬性控制位置.
* display屬性：控制元素的顯示方式：
* block--顯示的, none--隱藏的,inline--顯示到一行.
JS:
* JS的概述：JavaScript執行在瀏覽器端指令碼語言.
* JS的歷史：由網景公司研發的.由ECMA組織統一標準:ECMAScript.
* JS的組成：ECMAScript，BOM，DOM.
* JS的語法：
* JS的變數宣告:
* JS的資料型別：
* 原始型別：undefined,boolean,string,number,null
* 引用型別：
* JS的運算子：
* 與java中基本一致.有一個 === 型別與值都相同的情況下才會為true.
* JS的語句：
* 與Java中的語句一致.
* 簡單的表單校驗：
* 正則的校驗：使用String的match方法和正則中的test方法.
1.2 案例一：使用JS完成圖片的輪播的效果：
1.2.1 需求：
1.2.2 分析：
1.2.2.1 技術分析：
【JS中的Window物件的定時的操作】
* 設定定時的方法
* 清除定時的方法
1.2.2.2 步驟分析：
【步驟一】建立一個HTML檔案
【步驟二】當頁面載入的時候開始計時.使用onload事件.
【步驟三】編寫onload事件觸發的函式.
【步驟四】獲得操作圖片的控制權.
【步驟五】修改圖片的src的屬性.
1.2.3 程式碼實現：
<script>
window.onload = function(){
// 設定定時：
window.setInterval("changeImg()",5000);
}
var i = 1;
function changeImg(){
i++;
// 獲得圖片的控制權：
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/"+i+".jpg";
}
</script>
1.3 案例二：使用JS實現定時彈出廣告定時隱藏.
1.3.1 需求:
在網站的首頁上定時彈出一個廣告，並且定時隱藏掉.
1.3.2 分析：
1.3.2.1 技術分析：
【JS的window物件的定時的方法】
* 設定定時的方法
* 清除定時的方法
【CSS的顯示和隱藏的屬性】
* display
* block：顯示元素：
* none：隱藏元素：
1.3.2.2 步驟分析：
【步驟一】建立一個HTML頁面
【步驟二】確定事件：頁面的載入事件
【步驟三】觸發一個函式，編寫該函式.
【步驟四】在函式中設定定時操作.定時執行一個顯示的函式.
【步驟五】清空定時，重新設定定時，5秒鐘隱藏.
1.3.3 程式碼實現：
var time;
window.onload = function(){
time = window.setInterval("show()",5000);
}
// 顯示廣告的方法
function show(){
// 獲得廣告的div元素:
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "block";
window.clearInterval(time);
time = window.setInterval("hide()",5000);
}
// 隱藏廣告的方法:
function hide(){
// 獲得廣告的div元素:
var adDiv = document.getElementById("adDiv");
adDiv.style.display="none";
window.clearInterval(time);
}
1.3.4 總結：
1.3.4.1 JS中的BOM物件:
- Window
* alert(); --彈出對話方塊
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm(); --彈出一個確認視窗
* prompt(); --彈出一個可輸入的對話方塊
* open(); --開啟一個新視窗
- Navigator ：包含的是瀏覽器的資訊.
- Screen:用來獲得螢幕資訊:
- History:瀏覽器的歷史物件:
- Location:包含URL資訊的物件
1.4 使用JS完成註冊頁面表單提示及校驗
1.4.1 需求：
註冊頁面之前是彈出對話方塊的形式進行校驗的這種方式不是特別友好！可以將錯誤資訊顯示到文字框的後面.而且當游標落入到文字框的時候,提示的資訊.
1.4.2 分析：
1.4.2.1 技術分析:
【JS的輸出】
* document.getElementById(“”).innerHTML=”HTML的程式碼”;
* document.write(“”);
【JS的事件】
* onfocus :獲得焦點.
* onblur :失去焦點.
* onsubmit :提交的時候.
1.4.2.2 步驟分析：
【步驟一】建立一個html文件
【步驟二】在要去校驗的文字框上新增事件.
【步驟三】觸發函式
【步驟四】在函式中向文字框後的html的區域中寫入一段提示的內容.
1.4.3 程式碼實現:
function tips(id,content){
document.getElementById(id+"Span").innerHTML = "<font color='red'>"+content+"</font>";
}
function checkForm(){
// 判斷使用者名稱不能為空:
var username = document.getElementById("username").value;
if(username == ""){
document.getElementById("usernameSpan").innerHTML = "<font color='red'>使用者名稱不能為空！</font>";
return false;
}
var password = document.getElementById("password").value;
if(password == ""){
document.getElementById("passwordSpan").innerHTML = "<font color='red'>密碼不能為空！</font>";
return false;
}
}
1.4.4 總結：
1.4.4.1 JS的事件的總結：
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改變事件.
* ondblclick:雙擊某個元素的事件.
鍵盤操作事件:
* onkeydown :
* onkeyup :
* onkeypress:
滑鼠操作事件：
* onmousemove：
* onmouseout：
* onmouseover：
* onmousedown
* onmouseup
1.5 案例四：使用JS完成後臺數據展示的隔行換色的表格：
1.5.1 需求：
在後臺展示資料的頁面上，通常使用表格標籤進行資料的展示.沒有背景的表格比較難看的，可以使用JS控制表格的隔行換色.
1.5.2 分析：
1.5.2.1 技術分析：
【使用JS獲得表格的行數】
* 獲得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
* var len = tab1.rows.length;
1.5.2.2 步驟分析：
【步驟一】建立一個HTML頁面：可以使用後臺設計頁面.
【步驟二】確定事件：onload事件.
【步驟三】觸發一個函式.在這個函式中獲得操作的表格.
【步驟四】獲得表格中的所有的行數.
【步驟五】遍歷表格的行數.
【步驟六】判斷是否是奇數行還是偶數行.
1.5.3 程式碼實現：
function changeColor(){
// 獲得要操作的物件的控制權：
var tab1 = document.getElementById("tab1");
// 獲得表格的所有的行數:
var count = tab1.rows.length;
// 遍歷每行:
for(var i = 0;i<count;i++){
if(i % 2 == 0){
// 偶數行
tab1.rows[i].style.backgroundColor = "#00FF00";
}else{
// 奇數行
tab1.rows[i].style.backgroundColor = "#00FFFF";
}
}
}
1.5.4 總結：
1.5.4.1 表格中的tbody和thead標籤
function changeColor(){
// 獲得操作的表格的控制權:
var tab1 = document.getElementById("tab1");
// 獲得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows[i].style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows[i].style.backgroundColor = "gold";
}
}
}
1.6 案例五：使用JS完成複選框的全選和全不選的效果
1.6.1 需求：
在實際的開發中一條記錄一條記錄進行刪除的話，效率很低，有的時候需要一起刪除多條記錄.需要通過在表格之前設定一個複選框的形式進行勾選複選框.點選一個刪除的按鈕.
1.6.2 分析:
1.6.2.1 技術分析：
1.6.2.2 步驟分析：
【步驟一】建立一個HTML頁面.
【步驟二】確定事件：複選框的單擊事件.
【步驟三】觸發一個函式
【步驟四】在函式中,獲得上面的複選框是否被選中.
【步驟五】如果選中,下面的所有的複選框都被選中.
【步驟六】如果不選中,下面的所有的複選框都不選中.
1.6.3 程式碼實現：
function checkAll(){
// 獲得上面的複選框
var selectAll = document.getElementById("selectAll");
// 判斷這個複選框是否被選中.
var ids = document.getElementsByName("ids");
if(selectAll.checked == true){
// 上面複選框被選中：獲得下面所有的複選框,修改checked屬性
for(var i = 0 ;i<ids.length;i++){
ids[i].checked = true;
}
}else{
// 上面複選框沒有被選中：獲得下面所有的複選框,修改checked屬性
for(var i = 0 ;i<ids.length;i++){
ids[i].checked = false;
}
}
}
1.6.4 總結：
1.6.4.1 JS中的DOM物件：
【DOM的概述】
- 什麼是DOM
DOM：Document Object Model：文件物件模型.
將一個HTML的文件載入到記憶體形成一個樹形結構,從而操作樹形結構就可以改變HTML的樣子.
- DOM的使用：
知道document，element，attribute中的屬性和方法
【DOM的常用的操作】
- 獲得元素：
* document.getElementById(); -- 通過ID獲得元素.
* document.getElementsByName(); -- 通過name屬性獲得元素.
* document.getElementsByTagName(); -- 通過標籤名獲得元素.
- 建立元素：
* document.createElement(); -- 建立元素
* document.createTextNode(); -- 建立文字
- 新增節點：
* element.appendChild(); -- 在最後新增一個節點.
* element.insertBefore(); -- 在某個元素之前插入.
- 刪除節點：
* element.removeChild(); -- 刪除元素
【使用DOM完成對ul中新增一個li元素】
function addElement(){
var city = document.getElementById("city");
// 建立一個元素:
var liEl = document.createElement("li");
// 建立一個文字節點:
var text = document.createTextNode("深圳");
// 新增子節點:
liEl.appendChild(text);
city.appendChild(liEl);
}
1.7 案例六：使用JS完成省市聯動的效果：
1.7.1 需求：
在註冊頁面上有兩個下拉列表,左側省份的下拉列表一改變,右側的市的下拉列表也要跟著發生變化.
1.7.2 分析：
1.7.2.1 技術分析:
【JS中建立陣列】
【JS的事件】
下拉的列表的改變的事件.onchange.
【JS的DOM的操作】
建立元素：
新增元素：
1.7.2.2 步驟分析
【步驟一】建立一個HTML檔案.
【步驟二】確定事件：onchange事件.
【步驟三】觸發函式,在函式中編寫程式碼.
【步驟四】獲得到所選擇的省份的資訊.
【步驟五】根據選擇的省份的資訊獲得到對應的陣列中的市的資料.
【步驟六】遍歷陣列中的市的資訊.
【步驟七】建立元素，建立文字,最後將元素新增到第二個列表中.
1.7.3 程式碼實現:
// 定義陣列：二維陣列：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","紹興市","溫州市","義烏市","嘉興市");
arrs[1] = new Array("南京市","蘇州市","揚州市","無錫市");
arrs[2] = new Array("武漢市","襄陽市","荊州市","宜昌市","恩施");
arrs[3] = new Array("石家莊市","唐山市","保定市","邢臺市","廊坊市");
arrs[4] = new Array("長春市","吉林市","四平市","延邊市");
function changeCity(value){
// 獲得到選中的省份的資訊.
var city = document.getElementById("city");
// 清除第二個列表中的內容:
for(var i=city.options.length;i>0;i--){
city.options[i] = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 獲得所有的市的資訊.
for(var j=0;j<arrs[i].length;j++){
// alert(arrs[i][j]);
// 建立元素：
var opEl = document.createElement("option");// <option></option>
// 建立文字節點:
var textNode = document.createTextNode(arrs[i][j]);
// 將文字的內容新增到option元素中.
opEl.appendChild(textNode);
// 將option的元素新增到第二個列表中.
city.appendChild(opEl);
}
}
}
}
1.7.4 總結：
1.7.4.1 JS的內建物件:
- Array:
- Boolean:
- Date:
* http://www.baidu.com?time=new Date().getTime();
- Math物件:
- String物件:
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
1.7.4.2 JS的全域性函式：
* parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 編碼和解碼的方法：
// 解碼
* decodeURI();
* decodeURIComponent();
// 編碼
* encodeURI();
* encodeURIComponent();
eval函式：
* 將一段內容當成是JS的程式碼執行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);