版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
模塊五使用JavaScript添加動(dòng)態(tài)效果本模塊通過(guò)5個(gè)案例的實(shí)現(xiàn)，介紹使用JavaScript添加網(wǎng)頁(yè)動(dòng)態(tài)效果的方法。這5個(gè)案例包括輸出信息、表單驗(yàn)證、簡(jiǎn)單計(jì)算器、限時(shí)促銷和輪播圖等，通過(guò)這些案例的實(shí)現(xiàn)掌握使用JavaScript的基本使用方法。知識(shí)目標(biāo)：掌握將JavaScript引入網(wǎng)頁(yè)的方式；掌握J(rèn)avaScript的基本語(yǔ)法；掌握J(rèn)avaScript的事件與事件調(diào)用；掌握BOM對(duì)象的常用方法和屬性；掌握DOM對(duì)象的常用方法和屬性。能力目標(biāo)：會(huì)編寫簡(jiǎn)單的JavaScript程序；能閱讀并理解簡(jiǎn)單的JavaScript程序；使用
JavaScript
編寫代碼添加網(wǎng)頁(yè)動(dòng)態(tài)效果。素質(zhì)目標(biāo)：在編寫代碼中提升邏輯思維能力；在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神。教案20案例20輸出信息計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解JavaScript的常見應(yīng)用熟悉JavaScript的語(yǔ)法規(guī)則掌握J(rèn)avaScript的引入方式掌握J(rèn)avaScript的常用的輸入輸出方法能力目標(biāo)能說(shuō)出JavaScript的常見應(yīng)用會(huì)使用JavaScript編寫簡(jiǎn)單的腳本程序素質(zhì)目標(biāo)在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的引入方式prompt、alert、write方法的使用教學(xué)難點(diǎn)prompt、alert、write方法的靈活使用教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建JavaScript程序，運(yùn)行效果如圖20-1~圖20-3所示。具體要求如下。（1）彈出輸入對(duì)話框，輸入姓名，單擊“確定”按鈕后，彈出顯示信息對(duì)話框，顯示××您好！。（2）單擊顯示信息對(duì)話框中的“確定”按鈕后，在網(wǎng)頁(yè)上顯示信息“歡迎學(xué)習(xí)JavaScript！”。（3）“歡迎學(xué)習(xí)JavaScript！”為一級(jí)標(biāo)題、紅色，在瀏覽器中水平居中顯示。圖20-1輸入對(duì)話框圖20-2顯示信息對(duì)話框圖20-3在網(wǎng)頁(yè)上輸出信息案例分析圖20-1所示的用于輸入姓名的輸入框需要使用prompt()方法定義，圖20-2所示的顯示信息對(duì)話框需要使用alert()方法定義，圖20-3所示的在網(wǎng)頁(yè)上輸出的信息需要使用document對(duì)象的write()方法定義?！皻g迎學(xué)習(xí)JavaScript！”文字需要使用CSS定義標(biāo)題的樣式。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8"
/>
<title>顯示信息</title>
<style
type="text/css">
h1{
color:#F00;
text-align:center;
}
</style>
</head>
<body>
<script
type="text/javascript">
var
name=prompt("請(qǐng)輸入您的姓名");
//彈出輸入對(duì)話框，輸入姓名,存入變量name
alert(name+"您好！");
//彈出顯示信息對(duì)話框
document.write("<h1>歡迎學(xué)習(xí)JavaScript!</h1>");
//在網(wǎng)頁(yè)上輸出信息
</script>
</body></html>第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、JavaScript的常見應(yīng)用（5分鐘）1．動(dòng)態(tài)交互效果2．?dāng)?shù)據(jù)驗(yàn)證3．結(jié)合流行框架開發(fā)移動(dòng)應(yīng)用二、JavaScript的語(yǔ)法規(guī)則（5分鐘）（1）JavaScript嚴(yán)格區(qū)分大小寫，在編寫代碼時(shí)一定注意大小寫的正確性。（2）一般在每條語(yǔ)句結(jié)束后加分號(hào)。（3）JavaScript的注釋符號(hào)是//（單行注釋）和/*
……
*/（多行注釋）。三、JavaScript的引入方式（20分鐘）1．直接將JavaScript代碼嵌入HTML中（內(nèi)嵌式）<script
type="text/javascript">
JavaScript語(yǔ)句</script>例20-1<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8"
/>
<title>嵌入式</title>
</head>
<body>
<script
type="text/javascript">
alert("李華，歡迎來(lái)到JavaScript的世界！");
//在彈出的對(duì)話框中顯示信息
</script>
</body></html>
2．鏈接外部的JavaScript代碼（外鏈?zhǔn)剑├?0-2<!DOCTYPE
html><html>
<head>
<meta
charset="utf-8">
<title>外鏈?zhǔn)?lt;/title>
<script
src="js/01.js"
type="text/javascript"></script>
</head>
<body>
</body></html>3．直接在HTML標(biāo)記中使用（行內(nèi)式）（1）使用“javascript:”調(diào)用。<a
href="javascript:alert('希望你成為前端開發(fā)的高手')">
歡迎來(lái)到JavaScript世界！</a>（2）結(jié)合事件調(diào)用。<input
type="button"
value="顯示信息"
onclick="alert('Hello,
Welcome!');"
/>四、輸入/輸出方法（10分鐘）1．prompt()方法2．a(chǎn)lert()方法3．write()方法五=2\*ROMAN、小結(jié)（5分鐘）重點(diǎn)掌握J(rèn)avaScript腳本代碼引入的三種方式（內(nèi)嵌式、外鏈?zhǔn)?、行?nèi)式）和輸入輸出的方法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例21中的微課，自學(xué)表單驗(yàn)證在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中遵循正確的代碼編寫規(guī)范。教案21案例21表單驗(yàn)證計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握J(rèn)avaScript中變量命名、聲明和賦值熟悉JavaScript中常用的數(shù)據(jù)類型掌握J(rèn)avaScript的運(yùn)算符和函數(shù)使用方法了解JavaScript的DOM(文檔對(duì)象模型)能力目標(biāo)能使用JavaScript編寫代碼進(jìn)行表單驗(yàn)證會(huì)使用開發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的基本語(yǔ)法表單驗(yàn)證的方法教學(xué)難點(diǎn)使用JavaScript獲取元素教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建注冊(cè)表單，編寫JavaScript代碼，在表單提交時(shí)進(jìn)行數(shù)據(jù)驗(yàn)證，運(yùn)行效果如圖21-1和圖21-2所示。具體要求如下。（1）在注冊(cè)表單中添加一個(gè)文本輸入框、兩個(gè)密碼輸入框和一個(gè)命令按鈕。（2）表單樣式如圖21-1所示。（3）如果小米ID和密碼輸入不符合要求或者密碼輸入和確認(rèn)密碼輸入不一致，則在單擊“注冊(cè)”按鈕時(shí)會(huì)彈出警示對(duì)話框，如圖21-2所示。圖21-1注冊(cè)表單圖21-2單擊“注冊(cè)”按鈕時(shí)對(duì)表單進(jìn)行驗(yàn)證案例分析創(chuàng)建注冊(cè)表單，使用<form>標(biāo)記定義表單，在表單中添加3個(gè)<input>標(biāo)記用于輸入小米ID和密碼，添加一個(gè)“注冊(cè)”按鈕，定義表單和控件的樣式。創(chuàng)建腳本文件，編寫JavaScript代碼，使用document對(duì)象的getElementById()方法獲取輸入框中的數(shù)據(jù)，判斷是否滿足要求。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．創(chuàng)建表單：<form
action=""
method="get"
class="register"
onsubmit="validate()">
<h1>小米用戶注冊(cè)</h1>
"required"
/>
<p><input
type="password"
id="txtPwd1"
class="pwd"
placeholder="密碼"
required="required"/></p>
<p
required="required"/></p>
<p><input
type="submit"
class="sub"
value="注冊(cè)"
/></p></form>2．定義表單的CSS樣式3．創(chuàng)建JavaScript腳本文件function
validate()
{var
userID
=
document.getElementById('txtID').value; //獲取輸入的小米IDif
(userID.length
<
6
||
userID.length
>
20)
{
//判斷小米ID的長(zhǎng)度
alert("小米ID必須為6～20個(gè)字符，請(qǐng)重新輸入！");
//在警示對(duì)話框中顯示提示信息
return
false;
}
var
password1
=
document.getElementById('txtPwd1').value;
//獲取輸入的密碼
if
(password1.length
<
6
||
password1.length
>
10)
{
alert("密碼必須為6～10個(gè)字符，請(qǐng)重新輸入！");
//在警示對(duì)話框中顯示提示信息
return
false;
}
var
password2
=
document.getElementById('txtPwd2').value;
//獲取輸入的確認(rèn)密碼
if(password1!==password2){
alert("兩次輸入密碼不一致！");
return
false;
}}第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、變量1．變量的命名?必須以字母或下畫線開頭，中間可以是數(shù)字、字母或下畫線。?變量名不能包含空格、加號(hào)、減號(hào)等字符。?不能使用JavaScript的關(guān)鍵字，如var、int等。?JavaScript的變量名是嚴(yán)格區(qū)分大小寫的2．變量的聲明和賦值var
name;
//一次聲明一個(gè)變量var
name,gender,age;
//一次聲明多個(gè)變量var
name="李華";
//在聲明的同時(shí)初始化變量var
name="李華",gender="男",age;
//在聲明的同時(shí)初始化全部或者部分變量二、數(shù)據(jù)類型分類類型說(shuō)明基本數(shù)據(jù)類型數(shù)值型整型，用十進(jìn)制數(shù)、八進(jìn)制數(shù)和十六進(jìn)制數(shù)來(lái)表示浮點(diǎn)型，使用普通形式和指數(shù)形式字符串型表示文本數(shù)據(jù)，主要由字母、數(shù)字、漢字和其他特殊字符組成，字符串型數(shù)據(jù)必須用單引號(hào)或者雙引號(hào)引起來(lái)布爾型邏輯型，布爾型數(shù)據(jù)只有兩個(gè)值，即邏輯真和邏輯假引用數(shù)據(jù)類型支持對(duì)象編程的類型對(duì)象、函數(shù)等特殊數(shù)據(jù)類型null表示空類型，當(dāng)前為空值undefined未定義類型的變量，表示這個(gè)變量還沒(méi)有被賦值NaNJavaScript特有的特殊數(shù)據(jù)類型，表示“非數(shù)值”，是指程序運(yùn)行時(shí)由于某種原因發(fā)生計(jì)算錯(cuò)誤，產(chǎn)生沒(méi)有意義的數(shù)值轉(zhuǎn)義字符控制字符，它是以“\”開頭、不可顯示的特殊字符，利用轉(zhuǎn)義字符可以在字符串中添加不可顯示的特殊字符或者避免引號(hào)匹配問(wèn)題例21-1：
<script
type="text/javascript">
var
a,
type_a;
a
=
100;
type_a
=
typeof
a;
document.write(a
+
"的類型是："
+
type_a
+
"<br
/>");
a
=
true;
type_a
=
typeof
a;
document.write(a
+
"的類型是："
+
type_a
+
"<br
/>");
a
=
"hello";
type_a
=
typeof
a;
document.write(a
+
"的類型是："
+
type_a
+
"<br
/>");
a
=
null;
type_a
=
typeof
a;
document.write(a
+
"的類型是："
+
type_a
+
"<br
/>");
a
=
2023
+
"明天會(huì)更好";
type_a
=
typeof(a);
document.write(a
+
"的類型是："
+
type_a
+
"<br
/>");
</script>三、運(yùn)算符例21-2：判斷輸入的年份是否是閏年<script>
var
year
=
mpt("請(qǐng)輸入要判斷的年份");
year
=
parseInt(year);
var
str
=
year
%
4
==
0
&&
year
%
100
!=
0
||
year
%
400
==
0;
var
result
=
str
?
"是閏年"
:
"不是閏年";
document.write(year
+
"年"
+
result);</script>四、函數(shù)1．定義函數(shù)function函數(shù)名（[參數(shù)1,參數(shù)2…]）{
函數(shù)體；
[return表達(dá)式]}2．調(diào)用函數(shù)函數(shù)名（[參數(shù)1,參數(shù)2…]）；例<script
type="text/javascript">
function
printStr()
{
//定義函數(shù)
alert("茍日新，日日新。");
}
printStr();
//調(diào)用函數(shù)
</script>五、DOM簡(jiǎn)介1．DOM文檔對(duì)象模型（DocumentObjectModel，DOM）是JavaScript操作網(wǎng)頁(yè)的接口，它的作用是將網(wǎng)頁(yè)轉(zhuǎn)換為JavaScript對(duì)象，從而可以使用JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行各種操作。2．獲取元素表21-2獲取元素和集合的方法分類方法說(shuō)明獲取元素document.getElementById(id)獲取指定id的頁(yè)面元素對(duì)象document.querySelector(selector);獲取指定選擇器的頁(yè)面元素對(duì)象獲取元素集合documnet.getElementsByName(name)獲取指定name屬性值的頁(yè)面元素對(duì)象集合documnet.getElementsByTagName(tag)獲取指定標(biāo)記的頁(yè)面元素對(duì)象集合documnet.getElementsByClassName(class)獲取指定類的頁(yè)面元素對(duì)象集合document.querySelectorAll(selector);獲取指定選擇器的頁(yè)面元素對(duì)象集合六=2\*ROMAN、小結(jié)重點(diǎn)掌握J(rèn)avaScript的基本語(yǔ)法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例22中的微課，自學(xué)簡(jiǎn)單計(jì)算器的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫規(guī)范。教案22案例22簡(jiǎn)單計(jì)算器計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握J(rèn)avaScript的分支語(yǔ)句的使用語(yǔ)法掌握J(rèn)avaScript中數(shù)據(jù)類型轉(zhuǎn)換的方法熟悉JavaScript的事件及事件調(diào)用方法能力目標(biāo)能使用JavaScript編寫代碼實(shí)現(xiàn)簡(jiǎn)單計(jì)算器會(huì)使用開發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的分支語(yǔ)句數(shù)據(jù)類型轉(zhuǎn)換教學(xué)難點(diǎn)事件及事件調(diào)用教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建簡(jiǎn)單計(jì)算器，編寫JavaScript代碼，實(shí)現(xiàn)四則運(yùn)算，當(dāng)輸入數(shù)據(jù)不合法時(shí)（輸入非數(shù)值型數(shù)據(jù)或除數(shù)為0）進(jìn)行提示，運(yùn)行效果如圖22-1所示。具體要求如下。（1）添加3個(gè)文本框，用于輸入兩個(gè)數(shù)和顯示計(jì)算結(jié)果。（2）添加下拉列表框，用于選擇運(yùn)算符。（3）添加“計(jì)算”按鈕，單擊該按鈕時(shí)進(jìn)行計(jì)算，將結(jié)果顯示到“結(jié)果”文本框中。（4）輸入非數(shù)值型數(shù)據(jù)或者除數(shù)為0時(shí)，出現(xiàn)警示對(duì)話框，給予操作提示。圖22-1簡(jiǎn)單計(jì)算器案例分析在頁(yè)面上添加盒子，在盒子中添加標(biāo)題<h2>標(biāo)記和四對(duì)<p>標(biāo)記，在<p>標(biāo)記中放入提示信息和相應(yīng)控件，輸入數(shù)據(jù)和顯示結(jié)果的控件使用<input>標(biāo)記定義，下拉列表框使用<select>標(biāo)記定義，“計(jì)算”按鈕使用<input>標(biāo)記定義，定義盒子和控件的樣式。創(chuàng)建腳本文件，編寫JavaScript代碼，使用document對(duì)象的getElementById()方法獲取輸入的數(shù)據(jù)和運(yùn)算符，通過(guò)多分支語(yǔ)句完成運(yùn)算。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．創(chuàng)建表單：<div
id="box">
<h2>簡(jiǎn)單計(jì)算器</h2>
<p>請(qǐng)輸入第一個(gè)數(shù)：<input
id="num1"
type="text"></p>
<p>請(qǐng)輸入第二個(gè)數(shù)：<input
id="num2"
type="text"></p>
<p>運(yùn)算符：
<select
id="opt">
<option
value="+"
selected>+</option>
<option
value="-">-</option>
<option
value="*">*</option>
<option
value="/">/</option>
</select>
<input
type="button"
value="計(jì)算"
onclick="calc()">
</p>
<p>結(jié)果：<input
id="result"
type="text"></p>
</div>2．定義表單的CSS樣式3．創(chuàng)建JavaScript腳本文件<script
type="text/javascript">
function
calc()
{
//定義函數(shù)
var
num1
=
document.getElementById('num1').value; //獲取第一個(gè)數(shù)
var
num2
=
document.getElementById('num2').value;
//獲取第二個(gè)數(shù)
num1
=
parseFloat(num1)
&&
Number(num1);
//
num2
=
parseFloat(num2)
&&
Number(num2);
//
var
result;
//定義存放結(jié)果的變量
if
(isNaN(num1)
||
isNaN(num2))
{
//如果輸入數(shù)據(jù)不是數(shù)值型
alert('請(qǐng)輸入數(shù)字');
//顯示提示信息
return
false;
//返回
}
else
{
var
opt
=
document.getElementById('opt').value
//獲取運(yùn)算符
switch
(opt)
{
//根據(jù)運(yùn)算符選擇不同的分支進(jìn)行計(jì)算
case
'+':
result
=
num1
+
num2;
break;
case
'-':
result
=
num1
-
num2;
break;
case
'*':
result
=
num1
*
num2;
break;
case
'/':
if
(num2
==
0)
{
//除數(shù)如果為0，則顯示提示信息，不計(jì)算
alert("除數(shù)不能為0");
return;
}
else
{
result
=
num1
/
num2;
}
break;
}
d
}
}</script>第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、分支語(yǔ)句1．單分支<script
type="text/javascript">
var
score=prompt("請(qǐng)輸入你的考試成績(jī)："); //定義變量接收輸入的數(shù)值
if(score>=90){
//如果條件成立，則彈出“你真棒！”
alert("你真棒！");
}
</script>2.雙分支
<script
type="text/javascript">
var
score=prompt("請(qǐng)輸入你的考試成績(jī)：");
//定義變量接收輸入的數(shù)值
if(score>=60){
alert("恭喜你，順利通過(guò)！");
//條件成立，彈出“恭喜你，順利通過(guò)！”
}
else{
alert("很不幸，你沒(méi)通過(guò)！");
//條件不成立，彈出“很不幸，你沒(méi)通過(guò)！”
}
</script>3．多分支<script
type="text/javascript">
var
score=prompt("請(qǐng)輸入你的考試成績(jī)：");
//定義變量接收輸入的數(shù)值
if(score>=90){
//如果條件成立，則彈出“優(yōu)秀！”
alert("優(yōu)秀！");
}
else
if(score>=80){
alert("良好！");
}
else
if(score>=70){
alert("一般！");
}
else
if(score>=60){
alert("及格！");
}
else{
alert("不及格！");
}</script>4．多分支語(yǔ)句（switch語(yǔ)句）<script
type="text/javascript">
var
score=prompt("請(qǐng)輸入你的考試成績(jī)：");
//定義變量接收輸入的數(shù)值
var
n=
Math.floor(score/10);
//向下取整
switch(n){
case
10:case
9:
alert("優(yōu)秀！");break;
case
8:
alert("良好！");break;
case
7:
alert("一般！");break;
case
6:
alert("及格！");break;
default:
alert("不及格！");
}</script>二、數(shù)據(jù)類型轉(zhuǎn)換1．隱式類型轉(zhuǎn)換2．顯式類型轉(zhuǎn)換方法說(shuō)明示例parseInt()將數(shù)據(jù)轉(zhuǎn)換成整型parseInt("123.567")//返回123parseInt("123abc")//返回123parseInt("abc123")//返回NaNparseFloat()將數(shù)據(jù)轉(zhuǎn)換為浮點(diǎn)型parseFloat("123.567")//返回123.567parseFloat("123abc")//返回123parseFloat("abc123")//返回NaNNumber()將數(shù)據(jù)轉(zhuǎn)換成數(shù)字Number("3.14")
//返回3.14
Number("99a88")
//返回NaNNumber(false)
//返回0
Number(true)
//返回1Boolean()將數(shù)據(jù)轉(zhuǎn)換成布爾型Boolean(undefined)//falseBoolean(1)//trueBoolean(0)//falseBoolean(NaN)//falseString()將數(shù)據(jù)轉(zhuǎn)換成字符串型String(123)
//返回"123"toString()將數(shù)據(jù)轉(zhuǎn)換成字符串型123.toString()//返回"123"例22-5：輸入兩個(gè)數(shù)，計(jì)算兩數(shù)之和。略。三、事件與事件調(diào)用1．事件事件事件觸發(fā)時(shí)機(jī)onclick單擊時(shí)觸發(fā)ondblclick雙擊時(shí)觸發(fā)onmousedown按下任意鼠標(biāo)按鍵時(shí)觸發(fā)onmouseover鼠標(biāo)指針進(jìn)入時(shí)觸發(fā)onmouseup釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)onkeydown鍵盤按鍵按下時(shí)觸發(fā)onkeyup鍵盤按鍵彈起時(shí)觸發(fā)onsubmit提交表單時(shí)觸發(fā)onfocus獲得焦點(diǎn)時(shí)觸發(fā)onblur失去焦點(diǎn)時(shí)觸發(fā)onload頁(yè)面載入完畢后觸發(fā)2．事件調(diào)用（1）行內(nèi)綁定（2）動(dòng)態(tài)綁定四=2\*ROMAN、小結(jié)重點(diǎn)掌握J(rèn)avaScript的分支語(yǔ)句的語(yǔ)法、數(shù)據(jù)類型轉(zhuǎn)換方法，常用的事件及事件調(diào)用方法。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例23中的微課，自學(xué)限時(shí)促銷的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫規(guī)范。教案23案例23限時(shí)促銷計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)了解面向?qū)ο蟮母拍钫莆諆?nèi)置對(duì)象Date的使用了解BOM對(duì)象的概念掌握window對(duì)象計(jì)時(shí)器的相關(guān)方法能力目標(biāo)能使用JavaScript編寫代碼實(shí)現(xiàn)倒計(jì)時(shí)器會(huì)使用開發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)JavaScript的Date對(duì)象window對(duì)象的定時(shí)器功能教學(xué)難點(diǎn)window對(duì)象的setInterval方法教學(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析與實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）案例描述圖23-1小米產(chǎn)品限時(shí)促銷創(chuàng)建小米產(chǎn)品的限時(shí)促銷頁(yè)面，運(yùn)行效果如圖23-1所示。具體要求如下。（1）通過(guò)腳本代碼設(shè)定限時(shí)促銷結(jié)束時(shí)間，將時(shí)間以時(shí)、分、秒的形式顯示到網(wǎng)頁(yè)中。（2）倒計(jì)時(shí)的時(shí)、分、秒都用兩位數(shù)顯示，不足兩位數(shù)時(shí)前面補(bǔ)0。案例分析在頁(yè)面上添加盒子，在盒子中添加四對(duì)<p>標(biāo)記，在<p>標(biāo)記中放入文字、圖像和<span>標(biāo)記等，將時(shí)、分、秒數(shù)值和時(shí)、分、秒之間的分隔符放入<span>標(biāo)記。定義盒子、<p>標(biāo)記和<span>標(biāo)記的樣式。創(chuàng)建腳本文件，編寫JavaScript代碼，定義顯示時(shí)、分、秒的函數(shù)，使用window對(duì)象的setInterval()方法使函數(shù)每隔1s執(zhí)行一次。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．搭建結(jié)構(gòu)：<div
class="seckill">
<p>小米促銷專場(chǎng)</p>
<p><img
src="images/shandian.png"
width="49"
alt="圖片"></p>
<p>距離結(jié)束還有</p>
<p></span><span
id="second"></span></p></div>2．定義CSS樣式3．創(chuàng)建JavaScript腳本文件<script
type="text/javascript">
function
fresh()
{
//定義函數(shù)
var
endtime
=
new
Date("2023/01/29,23:59:59"); //促銷結(jié)束時(shí)間
var
nowtime
=
new
Date();
//當(dāng)前時(shí)間
var
leftsecond
=
parseInt((endtime.getTime()
-
nowtime.getTime())
/
1000); //剩余毫秒數(shù)
h
=
parseInt(leftsecond
/
3600);
//剩余小時(shí)數(shù)
m
=
parseInt((leftsecond
/
60)
%
60);
//剩余分鐘數(shù)
s
=
parseInt(leftsecond
%
60);
//剩余秒數(shù)
if
(h
<
10
&&
h
>=
0)
h
=
"0"
+
h;
//剩余如果不足10h，則前面補(bǔ)0
else
if
(h
<
0)
h
=
"00"
//剩余小時(shí)數(shù)為0時(shí)，顯示00
if
(m
<
10
&&
m
>=
0)
m
=
"0"
+
m;
//剩余如果不足10min，則前面補(bǔ)0
else
if
(m
<
0)
m
=
"00"
//剩余分鐘數(shù)為0時(shí)，顯示00
if
(s
<
10
&&
s
>=
0)
s
=
"0"
+
s;
//剩余如果不足10s，則前面補(bǔ)0
else
if
(s
<
0)
s
=
"00"
//剩余秒數(shù)為0時(shí)，顯示00
document.getElementById("hour").innerHTML
=
h;//顯示剩余小時(shí)數(shù)
document.getElementById("minute").innerHTML
=
m; //顯示剩余分鐘數(shù)
document.getElementById("second").innerHTML
=
s; //顯示剩余秒數(shù)
if
(leftsecond
<
0)
{
clearInterval(sh);
//停止倒計(jì)時(shí)
}
}
var
sh
=
setInterval("fresh()",
1000);
//每隔1s執(zhí)行一次fresh()函數(shù)
</script>第2學(xué)時(shí)（相關(guān)知識(shí)點(diǎn)）一、面向?qū)ο蠛?jiǎn)介1．對(duì)象概述2.內(nèi)置對(duì)象內(nèi)置對(duì)象說(shuō)明Math數(shù)學(xué)對(duì)象，用于實(shí)現(xiàn)數(shù)學(xué)運(yùn)算功能Date日期對(duì)象，用于定義日期對(duì)象String字符串對(duì)象，用于定義字符串對(duì)象和處理字符串Array數(shù)組對(duì)象，用于定義數(shù)組對(duì)象Number原始數(shù)值對(duì)象，可以在原始數(shù)值和對(duì)象之間轉(zhuǎn)換Boolean布爾值對(duì)象，用于將非布爾型的值轉(zhuǎn)換成布爾型的值（true或false）Object基類，所有JavaScript內(nèi)置類都是從基類Object派生（繼承）出來(lái)的RegExp正則表達(dá)式對(duì)象，用于完成有關(guān)正則表達(dá)式的操作和功能Date對(duì)象1．創(chuàng)建Date對(duì)象①創(chuàng)建當(dāng)前時(shí)刻的Date()對(duì)象，例如，下面的代碼。var
now=new
Date();②創(chuàng)建指定日期的Date對(duì)象，例如，下面的代碼。var
date1
=
new
Date("2023-3-1");var
date1
=
new
Date("2023/3/1");var
date1
=
new
Date("2023,3,1");
③創(chuàng)建一個(gè)指定日期和時(shí)間的Date對(duì)象，例如，下面的代碼。var
date1=new
Date(“2023,3,1,10:20:30:50”);var
date1=new
Date(2023,3,1,10,20,30,50);2．Date對(duì)象的方法方法說(shuō)明get方法getDate()返回用本地時(shí)間表示的一個(gè)月中的日期值（1～31）getDay()返回用本地時(shí)間表示的一周中的星期值（0～6）getFullYear()返回用本地時(shí)間表示的4位數(shù)字的年份值（如2024）getHour()返回用本地時(shí)間表示的小時(shí)數(shù)（1～23）getMinutes()返回用本地時(shí)間表示的分鐘數(shù)（0～59）…………例<script
type="text/javascript">
var
now
=
new
Date();
//創(chuàng)建Date對(duì)象
var
week
=
now.getDay();
//獲取數(shù)字形式的星期幾
var
result;
switch
(week)
{
case
1:result
=
"星期一";break;
case
2:result
=
"星期二";break;
case
3:result
=
"星期三";break;
case
4:result
=
"星期四";break;
case
5:result
=
"星期五";break;
case
6:result
=
"星期六";break;
default:result
=
"星期日";break;
}
document.write("今天是"
+
result);
//輸出信息</script>BOM簡(jiǎn)介BOM簡(jiǎn)介瀏覽器對(duì)象模型（BrowserObjectModel，BOM）提供與瀏覽器交互的方法和接口。圖23-5BOM對(duì)象模型1．window對(duì)象方法描述alert()彈出警示對(duì)話框，顯示一條提示信息和一個(gè)“確定”按鈕confirm()彈出確認(rèn)對(duì)話框，顯示一條確認(rèn)信息、一個(gè)“確定”按鈕、一個(gè)“取消”按鈕prompt()彈出提示對(duì)話框，提示用戶輸入信息open()打開一個(gè)新的瀏覽器窗口close()關(guān)閉瀏覽器窗口setInterval()按照指定的毫秒數(shù)來(lái)調(diào)用函數(shù)或執(zhí)行一段代碼setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或執(zhí)行一段代碼clearInterval()取消由setInterval()設(shè)置的效果clearTimeout()取消由setTimeout()設(shè)置的效果例23-2：使用confirm()方法彈出確認(rèn)對(duì)話框<script
type="text/javascript">
if(confirm("確定刪除嗎?")){
alert("確定!");
}else{
alert("不確定!");
}</script>2．定時(shí)器setInterval()方法：讓操作每隔一定時(shí)間間隔反復(fù)執(zhí)行setTimeout()方法：執(zhí)行一次后就停止操作，因此該方法可以實(shí)現(xiàn)延時(shí)操作。clearInterval()方法：取消定時(shí)器clearTimeout()方法：取消定時(shí)器例代碼略。四=2\*ROMAN、小結(jié)重點(diǎn)掌握Date對(duì)象的使用和定時(shí)器的setInterval()方法和setTimeout()方法的使用。作業(yè)1：課本課后習(xí)題與實(shí)訓(xùn)作業(yè)2：掃碼觀看案例24中的微課，提前學(xué)習(xí)輪播圖的內(nèi)容。在案例分析時(shí)培養(yǎng)學(xué)生分析問(wèn)題解決問(wèn)題的能力。在代碼實(shí)現(xiàn)中引導(dǎo)學(xué)生遵循正確的代碼編寫規(guī)范。教案24案例24輪播圖計(jì)劃學(xué)時(shí)2學(xué)時(shí)知識(shí)目標(biāo)掌握設(shè)置元素樣式的語(yǔ)法格式掌握獲取元素的尺寸和位置的語(yǔ)法格式掌握輪播圖的實(shí)現(xiàn)方法能力目標(biāo)能編寫JavaScript代碼實(shí)現(xiàn)輪播圖效果會(huì)使用開發(fā)者工具調(diào)試JavaScript的程序素質(zhì)目標(biāo)在編寫代碼中遵循正確的編寫代碼規(guī)范在編寫代碼中培養(yǎng)認(rèn)真細(xì)致、精益求精的工匠精神教學(xué)重點(diǎn)設(shè)置元素樣式獲取或改變?cè)氐某叽绾臀恢媒虒W(xué)難點(diǎn)獲取或改變?cè)氐某叽绾臀恢媒虒W(xué)模式教學(xué)做一體化線上+線下混合式教學(xué)教學(xué)活動(dòng)及主要環(huán)節(jié)素質(zhì)培養(yǎng)第1學(xué)時(shí)（案例分析實(shí)現(xiàn)）=1\*ROMANI.問(wèn)題討論：（5分鐘）對(duì)同學(xué)們課前觀看微課過(guò)程中的疑難問(wèn)題展開討論。=2\*ROMANII.案例分析與實(shí)現(xiàn)：（40分鐘）一、案例描述創(chuàng)建小米產(chǎn)品廣告展示輪播圖，頁(yè)面瀏覽效果如圖24-1所示。具體要求如下。（1）輪流展示5張圖片，每隔2s切換一次。（2）切換圖片時(shí)有過(guò)渡效果。圖24-1輪播圖案例分析在頁(yè)面上添加盒子，在盒子中添加無(wú)序列表標(biāo)記<ul>，在<ul>標(biāo)記中添加6對(duì)<li>標(biāo)記，在每個(gè)<li>標(biāo)記中放入一張圖片，在最后的<li>標(biāo)記中再次放入第一張圖片，使圖片切換時(shí)實(shí)現(xiàn)無(wú)縫銜接。定義盒子、<ul>標(biāo)記、<li>標(biāo)記和<img>標(biāo)記的樣式。創(chuàng)建腳本文件，編寫JavaScript代碼，定義切換圖片的函數(shù)，使用window對(duì)象的setInterval()方法使函數(shù)每隔2s執(zhí)行一次。案例實(shí)現(xiàn)學(xué)生同步操作，做學(xué)教一體1．搭建輪播圖結(jié)構(gòu)：<div
id="silder">
<ul
id="list">
<li><img
src="images/banner1.jpg"></li>
<li><img
src="images/banner2.jpg"></li>
<li><img
src="images/banner3.jpg"></li>
<li><img
src="images/banner4.jpg"></li>
<li><img
src="images/banner5.jpg"></li>
<
</ul></div>2．定義CSS樣式3．創(chuàng)建JavaScript腳本文件<script>
//第一輪結(jié)束，切換圖片時(shí)有從頭開始的效果
var
slider
=
document.querySelector("#slider"); //獲取盒子元素
var
list
=
document.querySelector("#list");
//獲取ul元素
var
img
=
document.querySelector("img");
//獲取圖像集合
var
uli
=
list.children;
//獲取圖片列表
var
index
=
0;
//圖片序號(hào)
setInterval(move,
2000);
//每隔2s執(zhí)行一次move()函數(shù)
function
move()
{
if
(index
<
uli.length
-
1)
{
//如果不是最后一張圖片
index++;//圖片序號(hào)加1
list.style.left
=
-index
*
img.offsetWidth
+
"px";
//
圖片向左移出，offsetWidth是圖像的布局寬度
list.style.transition
=
'left
1s';
//移出圖片時(shí)有過(guò)渡效果,用時(shí)1s
if
(index
==
uli.length
-
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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 總經(jīng)理年會(huì)致辭15篇
- 開學(xué)典禮大會(huì)學(xué)生發(fā)言稿(5篇)
- 學(xué)校社團(tuán)活動(dòng)總結(jié)(合集15篇)
- 湖南省永州市高三上學(xué)期第一次模擬考試語(yǔ)文試題（含答案）
- 水下自激吸氣式射流裝置沖刷特性研究
- 二零二五年度社會(huì)保險(xiǎn)停繳合同范本（國(guó)有企業(yè)）3篇
- 基于FPGA的聲紋識(shí)別系統(tǒng)研究與實(shí)現(xiàn)
- 二零二五版外專局外籍教師教學(xué)成果推廣與應(yīng)用合同規(guī)范3篇
- 融資租賃合同出租人取回權(quán)制度的法律問(wèn)題研究
- 建筑與市政工程巡查結(jié)果的評(píng)估與總結(jié)
- 文檔協(xié)同編輯-深度研究
- 七年級(jí)數(shù)學(xué)新北師大版（2024）下冊(cè)第一章《整式的乘除》單元檢測(cè)習(xí)題（含簡(jiǎn)單答案）
- 2024-2025學(xué)年云南省昆明市盤龍區(qū)高一（上）期末數(shù)學(xué)試卷（含答案）
- 五年級(jí)上冊(cè)寒假作業(yè)答案(人教版)
- 2024年財(cái)政部會(huì)計(jì)法律法規(guī)答題活動(dòng)題目及答案一
- 2025年中考語(yǔ)文復(fù)習(xí)熱搜題速遞之說(shuō)明文閱讀（2024年7月）
- 綜治工作培訓(xùn)課件
- 2024年云網(wǎng)安全應(yīng)知應(yīng)會(huì)考試題庫(kù)
- 2024年全國(guó)職業(yè)院校技能大賽高職組（智能節(jié)水系統(tǒng)設(shè)計(jì)與安裝賽項(xiàng)）考試題庫(kù)-下（多選、判斷題）
- 2024年廣東省事業(yè)單位考試真題及答案5
- 禪密功筑基功法
評(píng)論
0/150
提交評(píng)論