Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 課件匯 任務(wù)13-18 陰影與漸變屬性-JavaScript的應(yīng)用_第1頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 課件匯 任務(wù)13-18 陰影與漸變屬性-JavaScript的應(yīng)用_第2頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 課件匯 任務(wù)13-18 陰影與漸變屬性-JavaScript的應(yīng)用_第3頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 課件匯 任務(wù)13-18 陰影與漸變屬性-JavaScript的應(yīng)用_第4頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（第2版）（微課版） 課件匯 任務(wù)13-18 陰影與漸變屬性-JavaScript的應(yīng)用_第5頁(yè)
已閱讀5頁(yè)，還剩131頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

任務(wù)13陰影與漸變屬性主講老師：汪嬋嬋第五單元盒子模型學(xué)習(xí)目標(biāo)徑向漸變box-shadow屬性box-sizing屬性線性漸變掌握Web字體圖標(biāo)重復(fù)漸變了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游攻略網(wǎng)知識(shí)準(zhǔn)備1.box-shadow屬性box-shadow屬性：為盒子模型添加陰影效果語(yǔ)法規(guī)則：box-shadow：像素值1像素值2像素值3像素值4顏色值陰影類型；參數(shù)值說(shuō)明像素值1必需。陰影的水平偏移量。正值陰影在右，負(fù)值陰影在左。像素值2必需。陰影的垂直偏移量。正值陰影在下，負(fù)值陰影在上。像素值3可選。陰影的模糊半徑。只能為正值。值越大，陰影越模糊。像素值4可選。陰影的擴(kuò)展半徑。正值陰影擴(kuò)大，負(fù)值陰影縮小。顏色值可選。陰影的顏色。陰影類型可選。外陰影(outset)或內(nèi)陰影(inset)。知識(shí)準(zhǔn)備示例：box-shadow屬性<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;}#box{

box-shadow:5px5px10px2px#999;/*水平陰影位置，垂直陰影位置，陰影模糊半徑，陰影擴(kuò)展半徑，陰影的顏色;*/}</style><body><divid="box"></div></body>box-shadow:5px5px10px2px#999,5px5px10px2px#999inset;知識(shí)準(zhǔn)備2.box-sizing屬性box-sizing屬性：定義盒子的寬度值（width）或高度值（height）是否包含元素的邊框和內(nèi)邊距。content-box：定義盒子的寬度值（width）或高度值（height）時(shí)，不包含元素的邊框和內(nèi)邊距。border-box：定義盒子的寬度值（width）或高度值（height）時(shí)，包含元素的邊框和內(nèi)邊距。知識(shí)準(zhǔn)備示例：box-sizing屬性<styletype="text/css">div{width:230px;height:80px;margin:10pxauto;border:4pxsolid#000;padding:10px;}#box1{box-sizing:content-box;}#box2{

box-sizing:border-box;}</style><body><divid="box1">box1:content-box</div><divid="box2">box2:border-box</div></body>知識(shí)準(zhǔn)備3.線性漸變線性漸變：起始顏色會(huì)沿著一條直線按順序過(guò)渡到結(jié)束顏色語(yǔ)法規(guī)則：background-image:linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變角度：取值范圍是0~360deg，totop（從下到上，0deg），toleft（從右到左，270deg）,toright（從左到右，90deg）,tobottom（從上到下，180deg）。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。知識(shí)準(zhǔn)備示例：線性漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:linear-gradient(toright,#F00,#0F0);}</style><body><div></div></body>background-image:linear-gradient(90deg,#F00,#0F050%,#00F80%);知識(shí)準(zhǔn)備4.徑向漸變徑向漸變：起始顏色會(huì)從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。語(yǔ)法規(guī)則：background-image:radial-gradient(漸變形狀圓心位置,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變形狀：水平和垂直半徑的像素值或百分比，circle或ellipse。圓心位置：定義元素漸變的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。知識(shí)準(zhǔn)備示例：徑向漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:radial-gradient(circleatcenter,#F0020%,#0F060%,#00F80%);}</style><body><div></div></body>知識(shí)準(zhǔn)備5.重復(fù)漸變重復(fù)漸變：讓線性漸變或者徑向漸變重復(fù)執(zhí)行。注意：只有當(dāng)首尾兩顏色位置不在0%或100%時(shí)，重復(fù)漸變才生效。（1）重復(fù)線性漸變background-image:repeating-linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);（2）重復(fù)徑向漸變

background-image:repeating-radial-gradient

(漸變形狀圓心位置,顏色

值1起始位置,顏色值2起始位置,……,顏色值n起始位置);知識(shí)準(zhǔn)備示例：重復(fù)線性漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-linear-gradient(90deg,#F00,#0F020%,#00F35%);}</style><body><div></div></body><styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-radial-gradient(circleat50%50%,#F00,#0F015%,#00F25%);}</style>知識(shí)準(zhǔn)備示例：重復(fù)徑向漸變<body><div></div></body>知識(shí)準(zhǔn)備6.Web字體圖標(biāo)Web字體圖標(biāo)：替代圖片圖標(biāo)，矢量。字體圖標(biāo)小，下載速度快。圖標(biāo)工具：font-awesome，開(kāi)源免費(fèi)使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下載，解壓。只需用到“css”文件夾（樣式文件）和“fonts”文件夾（字體文件）。知識(shí)準(zhǔn)備6.Web字體圖標(biāo)使用方法：第二步：將字體文件夾“fonts”和css文件“font-awesome.min.css”拷貝到站點(diǎn)目錄下。注意：“font-awesome.min.css

”文件必須要放在css文件夾中。第三步：使用web字體圖標(biāo)。在網(wǎng)頁(yè)中鏈接引入font-awesome.min.css文件，使用<i>標(biāo)簽定義字體圖標(biāo)，并通過(guò)class屬性定義不同的字體，例如“<iclass=’fafa-apple’></i>”。（每個(gè)圖標(biāo)都有相應(yīng)的class，可以在http://fontawesome.io/icons/網(wǎng)頁(yè)上查看。）<head><metacharset="utf-8"><title>web字體圖標(biāo)</title>

<linkhref="css/font-awesome.min.css"rel="stylesheet"type="text/css"><styletype="text/css">.fa-apple{font-size:3em;color:#F00;}</style></head>知識(shí)準(zhǔn)備示例：web字體圖標(biāo)<body>

<iclass="fafa-apple"></i></body>實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作網(wǎng)站廣告欄，網(wǎng)頁(yè)效果和布局圖如下。制作網(wǎng)站廣告欄強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作旅游攻略網(wǎng)，網(wǎng)頁(yè)效果和布局圖如下。制作旅游攻略網(wǎng)強(qiáng)化訓(xùn)練當(dāng)光標(biāo)移到導(dǎo)航上時(shí)，效果如圖上所示。當(dāng)光標(biāo)移到內(nèi)容塊上時(shí)出現(xiàn)陰影效果，如圖下所示。制作旅游攻略網(wǎng)任務(wù)小結(jié)01box-shadow屬性02box-sizing屬性03線性漸變04徑向漸變05重復(fù)漸變06Web字體圖標(biāo)課后實(shí)訓(xùn)設(shè)計(jì)商城首頁(yè)通道，如圖1所示。當(dāng)鼠標(biāo)移動(dòng)到列表項(xiàng)時(shí)，圖標(biāo)和文字變成白色，出現(xiàn)如圖2所示的效果。（提示：用Web字體圖標(biāo)完成。）圖1圖2謝謝觀看主講老師：汪嬋嬋任務(wù)14過(guò)渡與變形屬性主講老師：汪嬋嬋第五單元盒子模型學(xué)習(xí)目標(biāo)變形（transform）屬性過(guò)渡（transition）屬性掌握任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作產(chǎn)品展示頁(yè)強(qiáng)化訓(xùn)練——制作商品評(píng)論頁(yè)知識(shí)準(zhǔn)備1.過(guò)渡（transition）屬性過(guò)渡（transition）屬性：平滑地改變一個(gè)元素的CSS值，使得元素從一個(gè)樣式逐漸過(guò)渡到另一個(gè)樣式。必須要規(guī)定兩項(xiàng)內(nèi)容：（1）應(yīng)用過(guò)渡效果的CSS屬性名稱。（2）過(guò)渡效果所用的時(shí)長(zhǎng)。語(yǔ)法規(guī)則：transition：propertydurationtiming-functiondelay；知識(shí)準(zhǔn)備屬性含義取值說(shuō)明transition-property指定應(yīng)用過(guò)渡效果的CSS屬性的名稱none沒(méi)有屬性會(huì)獲得過(guò)渡效果。all默認(rèn)值，所有屬性都將獲得過(guò)渡效果。property定義應(yīng)用過(guò)渡效果的CSS屬性名稱列表，列表以逗號(hào)分隔。transition-duration定義過(guò)渡效果所需花費(fèi)的時(shí)間time值規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。默認(rèn)值是0，意味著不會(huì)有效果。transition-timing-function指定過(guò)渡效果的時(shí)間曲線linear規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于cubic-bezier(0,0,1,1)）。ease規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于cubic-bezier(0.42,0,1,1)）。ease-out規(guī)定以慢速結(jié)束的過(guò)渡效果（等于cubic-bezier(0,0,0.58,1)）。ease-in-out規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中定義自己的值?？赡艿闹凳?至1之間的數(shù)值。transition-delay定義過(guò)渡效果開(kāi)始之前的等待時(shí)間time值指定秒或毫秒數(shù)，默認(rèn)值是0。<styletype="text/css">.box{width:60px;height:60px;border:70pxsolid#0F0;transition:3s;/*transition屬性寫(xiě)在初始狀態(tài)的樣式中*/}.box:hover{border-radius:50%;}</style>知識(shí)準(zhǔn)備示例：過(guò)渡屬性<body><divclass="box"></div></body> border-color:#F00;/*邊框顏色為紅色*/知識(shí)準(zhǔn)備2.變形（transform）屬性變形（transform）屬性：可以對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜，且支持2D和3D轉(zhuǎn)換。語(yǔ)法規(guī)則：transform：none|transform-functions；知識(shí)準(zhǔn)備transform-functions的常用2D轉(zhuǎn)換函數(shù)函數(shù)名含義參數(shù)說(shuō)明matrix(n,n,n,n,n,n)使用六個(gè)值的矩陣使用6個(gè)值表示變形。translate(x,y)沿著X和Y軸移動(dòng)元素X表示左右方向，Y表示上下方向，向左和向上為負(fù)數(shù)，反之為正數(shù)。translateX(n)沿著X軸移動(dòng)元素translateY(n)沿著Y軸移動(dòng)元素scale(x,y)改變?cè)氐膶挾群透叨戎当硎究s放比例，取值可以是正數(shù)、負(fù)數(shù)和小數(shù)。scaleX(n)改變?cè)氐膶挾萻caleY(n)改變?cè)氐母叨萺otate(angle)旋轉(zhuǎn)元素angle規(guī)定旋轉(zhuǎn)角度。skew(x-angle,y-angle)沿著X和Y軸傾斜元素angle規(guī)定傾斜角度。skewX(angle)沿著X軸傾斜元素skewY(angle)沿著Y軸傾斜元素<styletype="text/css">body{margin:30px;background-color:#E9E9E9;font-family:"微軟雅黑";}div{width:294px;padding:10px10px20px10px;border:1pxsolid#BFBFBF;background-color:white;box-shadow:2px2px3px#aaaaaa;}.rotate_left{float:left;transform:rotate(7deg);/*順時(shí)針旋轉(zhuǎn)7度*/}.rotate_right{float:left;

transform:rotate(-8deg);/*逆時(shí)針旋轉(zhuǎn)8度*/}</style>知識(shí)準(zhǔn)備示例：變形屬性<body><divclass="rotate_left"><imgsrc="images/ballade_dream.jpg"alt="郁金香"width="284"height="213"/><p>上海鮮花港的郁金香，花名：BalladeDream。</p></div><divclass="rotate_right"><imgsrc="images/china_pavilion.jpg"alt="世博中國(guó)館"width="284"height="213"/><p>2010年上海世博會(huì)，中國(guó)館。</p></div></body>實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作產(chǎn)品展示頁(yè)，網(wǎng)頁(yè)效果如下圖1所示。當(dāng)光標(biāo)懸停在產(chǎn)品模塊上時(shí)，出現(xiàn)如圖2所示的效果。制作產(chǎn)品展示頁(yè)圖1圖2強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作商品評(píng)論網(wǎng)頁(yè)，網(wǎng)頁(yè)效果如下圖1所示。當(dāng)光標(biāo)懸停在商品模塊上時(shí)，出現(xiàn)如圖2所示的效果。制作商品評(píng)論頁(yè)圖1圖2任務(wù)小結(jié)0102過(guò)渡（transition）屬性變形（transform）屬性課后實(shí)訓(xùn)設(shè)計(jì)綠色植物展示列表，如圖1所示。當(dāng)鼠標(biāo)移動(dòng)到列表項(xiàng)時(shí)，出現(xiàn)如圖2所示的效果。當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)，出現(xiàn)如圖3所示的圖片放大效果。圖1圖2圖3謝謝觀看主講老師：汪嬋嬋任務(wù)15表單與input元素主講老師：汪嬋嬋第六單元HTML5表單的應(yīng)用學(xué)習(xí)目標(biāo)掌握表單樣式創(chuàng)建表單input元素及屬性網(wǎng)頁(yè)中常用的表單功能了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作登錄界面實(shí)戰(zhàn)演練——制作簡(jiǎn)歷表單知識(shí)準(zhǔn)備1.認(rèn)識(shí)表單表單：用于收集用戶在客戶端提交的信息，并將這些信息發(fā)送給服務(wù)器進(jìn)行處理。如常見(jiàn)的搜索功能、用戶登錄功能、注冊(cè)功能等。組成：表單元素（也叫表單控件）、提示信息和表單域。autocomplete屬性：控制表單自動(dòng)完成功能的開(kāi)啟和關(guān)閉novalidate屬性：規(guī)定當(dāng)提交表單時(shí)不對(duì)其進(jìn)行驗(yàn)證知識(shí)準(zhǔn)備2.創(chuàng)建表單表單定義：<formaction="url地址"method="提交方式"name="表單名稱">各種表單元素</form>接收表單數(shù)據(jù)的服務(wù)器程序的url地址。表單數(shù)據(jù)的提交方式。（1）get：默認(rèn)值，提交的表單數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。（2）post：表單數(shù)據(jù)傳遞的保密性較好，并無(wú)數(shù)據(jù)量的限制。定義表單的名稱知識(shí)準(zhǔn)備3.input元素及屬性input元素：表單中最常用的元素，它可以定義單行文本輸入框、密碼輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等。語(yǔ)法格式：<inputtype="控件類型"/>知識(shí)準(zhǔn)備屬性屬性值含義說(shuō)明typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域emailEmail地址的輸入域urlURL地址的輸入域number數(shù)值的輸入域range一定范圍內(nèi)數(shù)字值的輸入域Datepickers（date,month,week,time,datetime,datetime-local）日期和時(shí)間的輸入類型search搜索域color顏色輸入類型tel電話號(hào)碼輸入類型知識(shí)準(zhǔn)備屬性屬性值含義說(shuō)明name用戶自定義控件的名稱value用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁(yè)面中的顯示寬度readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)autocompleteon/off設(shè)定是否自動(dòng)完成表單字段內(nèi)容autofocusautofocus指定頁(yè)面加載后是否自動(dòng)獲取焦點(diǎn)formform元素的id設(shè)定字段隸屬于哪一個(gè)或多個(gè)表單listdatalist元素的id指定字段的候選數(shù)據(jù)值列表multiplemultiple指定輸入框是否可以選擇多個(gè)值min、max和step數(shù)值規(guī)定輸入框所允許的最小值、最大值和間隔pattern字符串驗(yàn)證輸入的內(nèi)容是否與定義的正則表達(dá)式匹配placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫(xiě)的內(nèi)容不能為空實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作網(wǎng)站登錄界面，網(wǎng)頁(yè)效果如下圖1所示。當(dāng)光標(biāo)移到按鈕上時(shí)，光標(biāo)圖案和按鈕背景顏色會(huì)發(fā)生變化，如圖2所示。制作登錄界面圖1圖2強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作簡(jiǎn)歷表單，網(wǎng)頁(yè)效果如下。制作簡(jiǎn)歷表單任務(wù)小結(jié)01創(chuàng)建表單02input元素及屬性03表單樣式課后實(shí)訓(xùn)設(shè)計(jì)會(huì)員登錄系統(tǒng)表單，如圖1所示。當(dāng)用戶輸入登錄信息時(shí)，效果如圖2所示。圖1圖2謝謝觀看主講老師：汪嬋嬋任務(wù)16其他表單元素與表單驗(yàn)證主講老師：汪嬋嬋第六單元HTML5表單的應(yīng)用學(xué)習(xí)目標(biāo)掌握表單驗(yàn)證方法其他表單元素常用的正則表達(dá)式了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作商品訂購(gòu)表單任務(wù)目標(biāo)強(qiáng)化訓(xùn)練——制作會(huì)員注冊(cè)表單知識(shí)準(zhǔn)備1.其他表單元素textarea元素：用于定義多行文本輸入框。語(yǔ)法格式：<textareacols=""rows="">文本內(nèi)容</textarea>cols屬性：列數(shù)/寬度，也可用widthrows屬性：行數(shù)/高度，也可用height知識(shí)準(zhǔn)備屬性屬性值含義說(shuō)明name用戶自定義控件的名稱readonlyreadonly控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）maxlength正整數(shù)控件允許輸入的最多字符數(shù)autofocusautofocus指定頁(yè)面加載后是否自動(dòng)獲取焦點(diǎn)placeholder字符串為input類型的輸入框提供用戶提示requiredrequired規(guī)定輸入框填寫(xiě)的內(nèi)容不能為空cols正整數(shù)規(guī)定文本區(qū)域內(nèi)可見(jiàn)的列數(shù)（即：寬度）rows正整數(shù)規(guī)定文本區(qū)域內(nèi)可見(jiàn)的行數(shù)（即：高度）textarea元素的相關(guān)屬性知識(shí)準(zhǔn)備示例：textarea元素的使用<body><formaction="#"method="post"><h2>多行文本框</h2><textareaname="content"cols="40"rows="5"placeholder="請(qǐng)輸入內(nèi)容..."></textarea></form></body>知識(shí)準(zhǔn)備label元素：為<input>標(biāo)簽定義標(biāo)注（標(biāo)記），當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到與該標(biāo)簽相關(guān)的表單控件上。1.其他表單元素知識(shí)準(zhǔn)備示例：label元素的使用<body><formaction="#"method="post"><h2>性別</h2><inputtype="radio"name="sex"id="male"checked><labelfor="male">男</label><inputtype="radio"name="sex"id="female"><labelfor="female">女</label></form></body>當(dāng)用戶點(diǎn)擊“單選按鈕”和“文字”時(shí)，都能達(dá)到相同的選定效果。知識(shí)準(zhǔn)備select元素：創(chuàng)建單選或多選菜單語(yǔ)法格式：<select><optionvalue="">選項(xiàng)1</option><optionvalue="">選項(xiàng)2</option><optionvalue=""selected>選項(xiàng)3</option><optionvalue="">選項(xiàng)4</option></select>size屬性：定義下拉菜單的可見(jiàn)選項(xiàng)數(shù)multiple屬性：定義下拉菜單是否允許多選1.其他表單元素知識(shí)準(zhǔn)備示例：select元素的使用<body><formaction="#"method="post"><h2>所在專業(yè)</h2><select><optionselected>--請(qǐng)選擇--</option><option>物聯(lián)網(wǎng)應(yīng)用技術(shù)</option><option>安全防范技術(shù)</option><option>大數(shù)據(jù)技術(shù)應(yīng)用</option><option>工業(yè)設(shè)計(jì)</option></select><h2>所修課程</h2><selectmultiple

size="4"><optionselected>傳感器技術(shù)</option><option>web前端開(kāi)發(fā)</option><optionselected>C語(yǔ)言程序設(shè)計(jì)</option><option>物聯(lián)網(wǎng)導(dǎo)論</option><option>數(shù)據(jù)庫(kù)原理</option></select></form></body>知識(shí)準(zhǔn)備datalist元素：定義輸入框的選項(xiàng)列表，通過(guò)id屬性與input元素關(guān)聯(lián)，用來(lái)配合定義input元素的可選值。列表通過(guò)datalist元素嵌套o(hù)ption標(biāo)簽來(lái)創(chuàng)建。1.其他表單元素知識(shí)準(zhǔn)備示例：datalist元素的使用<body><formaction="#"method="post"><h2>常用網(wǎng)址</h2><inputname="myurl"type="url"list="urlList"><datalistid="urlList"><optionvalue="">百度</option><optionvalue="">騰訊</option><optionvalue="">淘寶</option></datalist></form></body>知識(shí)準(zhǔn)備2.表單驗(yàn)證方法（1）使用HTML5中新增的type類型，如：email、url、number、tel、date等類型，這些類型都有HTML5內(nèi)置的正則校驗(yàn)。（2）使用required屬性，校驗(yàn)表單元素的內(nèi)容是否輸入為空。（3）使用pattern屬性，驗(yàn)證輸入的內(nèi)容是否滿足條件，pattern屬性值是一個(gè)正則表達(dá)式。（4）使用JavaScript代碼，實(shí)現(xiàn)更復(fù)雜的驗(yàn)證功能。知識(shí)準(zhǔn)備3.正則表達(dá)式正則表達(dá)式：描述一種字符串匹配的模式，由普通字符以及特殊字符（也叫元字符）組成的文字模式。功能：正則表達(dá)式作為一個(gè)模板，將某個(gè)字符模式與所搜索的字符串進(jìn)行匹配。（1）普通字符

由所有那些未顯示指定為元字符的打印和非打印字符組成。包括所有的大寫(xiě)和小寫(xiě)字符、所有數(shù)字、所有的標(biāo)點(diǎn)符號(hào)以及一些符號(hào)。知識(shí)準(zhǔn)備（2）特殊字符符號(hào)含義說(shuō)明$匹配輸入的字符串的結(jié)尾位置。()標(biāo)記一個(gè)子表達(dá)式的開(kāi)始和結(jié)束位置。*匹配前面的子表達(dá)式零次或多次。+匹配前面的子表達(dá)式一次或多次。.匹配除換行符\n之外的任何單字符。[標(biāo)記一個(gè)中括號(hào)表示式的開(kāi)始。?匹配前面的子表達(dá)式零次或一次。{標(biāo)記限定表達(dá)式的開(kāi)始。\將下個(gè)字符標(biāo)記為特殊字符，或原意字符，或向后引用，或八進(jìn)制轉(zhuǎn)義符。^匹配輸入字符串的開(kāi)始位置，除非在方括號(hào)表達(dá)式中使用，此時(shí)它表示不接受該字符集合。|指明兩項(xiàng)之間的一個(gè)選擇。知識(shí)準(zhǔn)備（3）限定符符號(hào)含義說(shuō)明*匹配前面的子表達(dá)式零次或多次。+匹配前面的子表達(dá)式一次或多次。?匹配前面的子表達(dá)式零次或一次。{n}n是一個(gè)非負(fù)整數(shù)，匹配確定的n次。{n,}n是一個(gè)非負(fù)整數(shù)，至少匹配n次。{n,m}m和n均為非負(fù)整數(shù)，且n<=m，最少匹配n次且最多匹配m次。知識(shí)準(zhǔn)備3.正則表達(dá)式（4）定位符：用來(lái)描述字符串或單詞的邊界，不能對(duì)定位符使用限定符。^：指字符串的開(kāi)始$：指字符串的結(jié)束\b：描述單詞的前或后邊界\B：表示非單詞邊界知識(shí)準(zhǔn)備（5）常用的正則表達(dá)式正則表達(dá)式含義說(shuō)明^[0-9]*$數(shù)字^\d{n}$n位的數(shù)字^\d{n,}$至少n位的數(shù)字^\d{m,n}$m-n位的數(shù)字^(0|[1-9][0-9]*)$零和非零開(kāi)頭的數(shù)字^([1-9][0-9]*)+(.[0-9]{1,2})?$非零開(kāi)頭的最多帶兩位小數(shù)的數(shù)字^[\u4e00-\u9fa5]{0,}$漢字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$英文和數(shù)字^.{3,20}$長(zhǎng)度為3-20的所有字符^[A-Za-z]+$由26個(gè)英文字母組成的字符串^[A-Z]+$由26個(gè)大寫(xiě)英文字母組成的字符串^[a-z]+$由26個(gè)小寫(xiě)英文字母組成的字符串^[A-Za-z0-9]+$由數(shù)字、26個(gè)英文字母組成的字符串^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、數(shù)字包括下劃線知識(shí)準(zhǔn)備正則表達(dá)式含義說(shuō)明^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$Email地址[a-zA-z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$URL地址^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$手機(jī)號(hào)碼^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$電話號(hào)碼("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX")^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$短身份證號(hào)碼(數(shù)字、字母x結(jié)尾)^[a-zA-Z][a-zA-Z0-9_]{4,15}$帳號(hào)是否合法(字母開(kāi)頭，長(zhǎng)度5-16位，允許字母、數(shù)字、下劃線)^[a-zA-Z]\w{5,17}$密碼（字母開(kāi)頭，長(zhǎng)度6-18位，只能包含字母、數(shù)字和下劃線）^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$強(qiáng)密碼（必須包含大小寫(xiě)字母和數(shù)字的組合，不能使用特殊字符，長(zhǎng)度在8-10之間）（5）常用的正則表達(dá)式實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作商品訂購(gòu)表單，網(wǎng)頁(yè)效果如下。制作商品訂購(gòu)表單強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作會(huì)員注冊(cè)表單，網(wǎng)頁(yè)效果如下圖1所示。如果表單信息填寫(xiě)正確，網(wǎng)頁(yè)效果如下圖2所示。制作會(huì)員注冊(cè)表單圖1圖2任務(wù)小結(jié)01其他表單元素02表單驗(yàn)證方法03正則表達(dá)式課后實(shí)訓(xùn)設(shè)計(jì)學(xué)生檔案信息錄入表單，如圖1所示。其中，“所屬專業(yè)”項(xiàng)效果如圖2所示，“入學(xué)成績(jī)”項(xiàng)效果如圖3所示，“入學(xué)日期”項(xiàng)效果如圖4所示。圖1圖2圖3圖4謝謝觀看主講老師：汪嬋嬋任務(wù)17視頻與音頻主講老師：汪嬋嬋第七單元網(wǎng)頁(yè)多媒體學(xué)習(xí)目標(biāo)掌握嵌入音頻嵌入視頻1.網(wǎng)頁(yè)支持的視頻、音頻格式2.視頻與音頻的DOM操作了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作音樂(lè)播放器任務(wù)目標(biāo)強(qiáng)化訓(xùn)練——制作視頻播放網(wǎng)頁(yè)知識(shí)準(zhǔn)備1.嵌入視頻嵌入視頻：<videosrc="視頻文件路徑"controls="controls"></video>屬性屬性值含義說(shuō)明srcurl地址要播放視頻的URL。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。width像素值設(shè)置視頻播放器的寬度。height像素值設(shè)置視頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)視頻文件完成播放后再次開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。posterurl地址當(dāng)視頻緩沖不足時(shí)，該屬性值鏈接一個(gè)圖像，并將該圖像按照一定比例顯示出來(lái)。知識(shí)準(zhǔn)備2.嵌入音頻嵌入音頻：<audiosrc="音頻文件路徑"

controls="controls"></audio>屬性屬性值含義說(shuō)明srcurl地址要播放音頻的URL。controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。autoplayautoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。width像素值設(shè)置音頻播放器的寬度。height像素值設(shè)置音頻播放器的高度。looploop如果出現(xiàn)該屬性，則當(dāng)音頻文件完成播放后再次開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。知識(shí)準(zhǔn)備3.source標(biāo)簽source標(biāo)簽：沒(méi)有一種視頻格式或音頻格式讓所有的瀏覽器都支持，source標(biāo)簽用于指定多個(gè)備用的不同格式文件的路徑，瀏覽器將使用第一個(gè)可識(shí)別的格式。<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">您的瀏覽器不支持該播放文件。</video><audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">您的瀏覽器不支持該播放文件。</audio>知識(shí)準(zhǔn)備4.視頻與音頻的DOM操作video和audio的方法方法含義load()加載媒體文件，為播放做準(zhǔn)備。通常用于播放前的預(yù)加載，也會(huì)用于重新加載媒體文件。play()播放媒體文件。如果視頻沒(méi)有加載，則加載并播放；如果視頻是暫停的，則變?yōu)椴シ拧ause()暫停播放媒體文件。canPlayType()測(cè)試瀏覽器是否支持指定的媒體類型。知識(shí)準(zhǔn)備video和audio的屬性屬性含義currentSrc返回當(dāng)前媒體的URL。currentTime設(shè)置或返回媒體中的當(dāng)前播放位置（以秒計(jì)）。duration返回媒體的長(zhǎng)度（以秒計(jì)）。ended返回媒體的播放是否已結(jié)束。error返回表示媒體錯(cuò)誤狀態(tài)的MediaError對(duì)象。paused設(shè)置或返回媒體是否暫停。muted設(shè)置或返回是否關(guān)閉聲音。volume設(shè)置或返回媒體的音量。height設(shè)置或返回媒體的高度值。width設(shè)置或返回媒體的寬度值。知識(shí)準(zhǔn)備video和audio的事件事件含義play當(dāng)執(zhí)行方法play()時(shí)觸發(fā)。playing正在播放時(shí)觸發(fā)。pause當(dāng)執(zhí)行了方法pause()時(shí)觸發(fā)。timeupdate當(dāng)播放位置被改變時(shí)觸發(fā)。ended當(dāng)播放結(jié)束后停止播放時(shí)觸發(fā)。waiting在等待加載下一幀時(shí)觸發(fā)。ratechange當(dāng)媒體的播放速度已更改時(shí)觸發(fā)。volumechange當(dāng)音量已更改時(shí)觸發(fā)。canplay當(dāng)瀏覽器可以播放媒體時(shí)觸發(fā)。canplaythrough當(dāng)瀏覽器可在不因緩沖而停頓的情況下進(jìn)行播放時(shí)觸發(fā)。知識(shí)準(zhǔn)備video和audio的事件事件含義durationchange當(dāng)媒體的時(shí)長(zhǎng)已更改時(shí)觸發(fā)。loadstart當(dāng)瀏覽器開(kāi)始查找媒體時(shí)觸發(fā)。progress當(dāng)瀏覽器正在下載媒體時(shí)觸發(fā)。suspend當(dāng)瀏覽器刻意不獲取媒體數(shù)據(jù)時(shí)觸發(fā)。abort當(dāng)媒體的加載已放棄時(shí)觸發(fā)。error當(dāng)在媒體加載期間發(fā)生錯(cuò)誤時(shí)觸發(fā)。emptied當(dāng)目前的播放列表為空時(shí)觸發(fā)。stalled當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時(shí)觸發(fā)。loadedmetadata當(dāng)瀏覽器已加載媒體的元數(shù)據(jù)時(shí)觸發(fā)。loadeddata當(dāng)瀏覽器已加載媒體的當(dāng)前幀時(shí)觸發(fā)。seeked當(dāng)用戶已移動(dòng)/跳躍到媒體中的新位置時(shí)觸發(fā)。seeking當(dāng)用戶開(kāi)始移動(dòng)/跳躍到媒體中的新位置時(shí)觸發(fā)。實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作音樂(lè)播放器，網(wǎng)頁(yè)效果和布局圖如下。制作音樂(lè)播放器強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作視頻播放網(wǎng)頁(yè)，網(wǎng)頁(yè)效果和布局圖如下。制作視頻播放網(wǎng)頁(yè)任務(wù)小結(jié)01嵌入視頻02嵌入音頻03DOM操作課后實(shí)訓(xùn)制作如圖所示的視頻播放器。視頻播放器沒(méi)有控制欄，通過(guò)“播放/暫?！卑粹o控制。同時(shí)，“放大”按鈕可以放大視頻，“縮小”按鈕可以縮小視頻，“普通”按鈕可以還原視頻至默認(rèn)大小。謝謝觀看主講老師：汪嬋嬋任務(wù)18JavaScript的應(yīng)用主講老師：汪嬋嬋第八單元JavaScript基礎(chǔ)學(xué)習(xí)目標(biāo)掌握J(rèn)avaScript的函數(shù)使用JavaScript的基本語(yǔ)法JavaScript的語(yǔ)言基礎(chǔ)1.事件及事件驅(qū)動(dòng)2.JavaScript對(duì)象了解:學(xué)習(xí)目標(biāo)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作商品精選模塊任務(wù)目標(biāo)強(qiáng)化訓(xùn)練——制作焦點(diǎn)圖廣告知識(shí)準(zhǔn)備1.JavaScript簡(jiǎn)介JavaScript：Web頁(yè)面中的一種腳本編程語(yǔ)言，也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的腳本語(yǔ)言。特點(diǎn)：不需要編譯，直接嵌入在HTML頁(yè)面中，實(shí)現(xiàn)實(shí)時(shí)的、動(dòng)態(tài)的、可交互的網(wǎng)頁(yè)效果。作用：表單驗(yàn)證、網(wǎng)頁(yè)動(dòng)畫(huà)效果、焦點(diǎn)圖切換效果、浮動(dòng)廣告窗口、旋轉(zhuǎn)文字特效。知識(shí)準(zhǔn)備1.JavaScript簡(jiǎn)介JavaScript引入方式一：內(nèi)嵌式<head><script>//此處為JavaScript代碼</script></head>知識(shí)準(zhǔn)備示例：內(nèi)嵌式引入<!doctypehtml><html><head><metacharset="utf-8"><title>內(nèi)嵌式引入</title><script>document.write("此處為JavaScript代碼。");//輸出語(yǔ)句。</script></head><body><p>此處為網(wǎng)頁(yè)內(nèi)容。</p></body></html>知識(shí)準(zhǔn)備1.JavaScript簡(jiǎn)介JavaScript引入方式二：外鏈?zhǔn)?lt;head><scriptsrc="js文件的路徑"></script></head>知識(shí)準(zhǔn)備示例：外鏈?zhǔn)揭?lt;!doctypehtml><html><head><metacharset="utf-8"><title>外鏈?zhǔn)揭?lt;/title><scriptsrc="18-2.js"></script></head><body><p>此處為網(wǎng)頁(yè)內(nèi)容。</p></body></html>//JavaScriptDocumentdocument.write("此處為js文件代碼。");//輸出語(yǔ)句?！?8-2.js”文件代碼：

提示：外部腳本不能包含<script>標(biāo)簽。知識(shí)準(zhǔn)備JavaScript基本語(yǔ)法執(zhí)行順序：JavaScript程序按照在HTML文件中出現(xiàn)的順序逐行執(zhí)行。大小寫(xiě)敏感：嚴(yán)格區(qū)分字母大小寫(xiě)。如：myname和myName是兩個(gè)不同的變量。每行語(yǔ)句結(jié)尾的分號(hào)可有可無(wú)：為了規(guī)范，應(yīng)以分號(hào)結(jié)束。注釋：1.JavaScript簡(jiǎn)介//單行注釋文本/*單行注釋文本*//*多行注釋文本多行注釋文本*/知識(shí)準(zhǔn)備2.JavaScript語(yǔ)言基礎(chǔ)關(guān)鍵字：關(guān)鍵字不能作為變量名和函數(shù)名使用。abstractargumentsbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumevalexportextendsfalsefinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfaceletlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatilewhilewithyield

知識(shí)準(zhǔn)備2.JavaScript語(yǔ)言基礎(chǔ)標(biāo)識(shí)符：用來(lái)命名變量和函數(shù)。命名規(guī)則：第一個(gè)字符必須是字母、下劃線（_）或美元符號(hào)（$）第一個(gè)字符其后的字符可以是字母、數(shù)字、下劃線或美元符號(hào)標(biāo)識(shí)符不能和JavaScript中的關(guān)鍵字同名不能包含空格等特殊符號(hào)合法：i、user_name、_name、$name、n1不合法：1a、mn、55、long知識(shí)準(zhǔn)備2.JavaScript語(yǔ)言基礎(chǔ)常量：程序運(yùn)行時(shí)，值不能改變的量為常量（Constant）。語(yǔ)法格式：const常量名:數(shù)據(jù)類型=值;知識(shí)準(zhǔn)備2.JavaScript語(yǔ)言基礎(chǔ)變量：程序中一個(gè)已經(jīng)命名的存儲(chǔ)單元，為數(shù)據(jù)操作提供存放信息的容器。命名規(guī)則：必須以字母或下劃線開(kāi)頭，中間可以是數(shù)字、字母或下劃線變量名不能包含空格、加、減等符號(hào)不能使用JavaScript中的關(guān)鍵字JavaScript的變量名嚴(yán)格區(qū)分大小寫(xiě)，如myname不等同myName知識(shí)準(zhǔn)備2.JavaScript語(yǔ)言基礎(chǔ)變量的聲明與賦值：var變量名;建議：變量先聲明，后使用vara,b,c;//同時(shí)聲明a，b，c三個(gè)變量。vara=1,b=2,c=3;//同時(shí)聲明a，b，c三個(gè)變量，并分別對(duì)其進(jìn)行初始化賦值。知識(shí)準(zhǔn)備3.JavaScript函數(shù)函數(shù)：計(jì)算機(jī)程序中由多條語(yǔ)句組成的邏輯單元定義：<script>

function

函數(shù)名([參數(shù)1,參數(shù)2,……]){

函數(shù)體[return表達(dá)式;]}</script>調(diào)用：函數(shù)名([參數(shù)1,參數(shù)2,……])注意：關(guān)鍵字function

必須小寫(xiě)知識(shí)準(zhǔn)備示例：函數(shù)的調(diào)用<!doctypehtml><html><head><metacharset="utf-8"><title>函數(shù)的調(diào)用</title><script>functionshow(){alert("歡迎學(xué)習(xí)JavaScript！");//alert()方法可以彈出警告框

}</script></head><body><!--鼠標(biāo)點(diǎn)擊事件調(diào)用函數(shù)show()--><inputtype="button"value="點(diǎn)擊我"onClick="show()"></body></html>知識(shí)準(zhǔn)備4.事件及事件驅(qū)動(dòng)事件：用戶與Web頁(yè)面交互時(shí)產(chǎn)生的操作，比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等。事件驅(qū)動(dòng)：當(dāng)事件發(fā)生后，會(huì)由此而引發(fā)一連串程序的執(zhí)行，這些程序稱為事件處理程序。常用事件：鼠標(biāo)事件、鍵盤(pán)事件、表單事件、頁(yè)面事件知識(shí)準(zhǔn)備4.事件及事件驅(qū)動(dòng)

類別事件當(dāng)以下情況發(fā)生時(shí)，觸發(fā)此事件鼠標(biāo)事件onclick鼠標(biāo)點(diǎn)擊某個(gè)對(duì)象ondblclick鼠標(biāo)雙擊某個(gè)對(duì)象onmousedown某個(gè)鼠標(biāo)按鍵被按下onmouseup某個(gè)鼠標(biāo)按鍵被松開(kāi)onmouseover鼠標(biāo)被移到某元素之上onmousemove鼠標(biāo)被移動(dòng)onmouseout鼠標(biāo)從某元素移開(kāi)知識(shí)準(zhǔn)備4.事件及事件驅(qū)動(dòng)類別事件當(dāng)以下情況發(fā)生時(shí)，觸發(fā)此事件鍵盤(pán)事件onkeydown按下任何鍵盤(pán)鍵（包括系統(tǒng)按鈕，如箭頭鍵和功能鍵）時(shí)發(fā)生。onkeyup用戶放開(kāi)任何先前按下的鍵盤(pán)鍵時(shí)發(fā)生。onkeypress按下并放開(kāi)任何字母數(shù)字鍵時(shí)發(fā)生。但是系統(tǒng)按鈕（例如：箭頭鍵、功能鍵）無(wú)法得到識(shí)別。知識(shí)準(zhǔn)備4.事件及事件驅(qū)動(dòng)類別事件當(dāng)以下情況發(fā)生時(shí)，觸發(fā)此事件表單事件onblur元素失去焦點(diǎn)onchange元素失去焦點(diǎn)且內(nèi)容發(fā)生改變onfocus元素獲得焦點(diǎn)onreset表單被重置時(shí)onsubmit表單提交時(shí)頁(yè)面事件onload當(dāng)頁(yè)面加載完成時(shí)onunload當(dāng)頁(yè)面卸載時(shí)知識(shí)準(zhǔn)備示例：事件及事件驅(qū)動(dòng)<script>functionchangetext(id){id.innerHTML="鼠標(biāo)未移開(kāi)！";//innerHTML屬性用于設(shè)置或返回指定標(biāo)簽之間的HTML內(nèi)容。

}functionresettext(id){id.innerHTML="鼠標(biāo)已移開(kāi)！";}</script><body><h1onmouseover="changetext(this)"onmouseout="resettext(this)">鼠標(biāo)已移開(kāi)！</h1></body>知識(shí)準(zhǔn)備5.JavaScript對(duì)象對(duì)象：“一切皆對(duì)象”，如字符串、數(shù)值、函數(shù)、數(shù)組等屬性：用來(lái)描述對(duì)象特性的數(shù)據(jù)，即若干變量方法：用來(lái)操作對(duì)象的若干動(dòng)作，即若干函數(shù)例如：一個(gè)Web頁(yè)可以看做一個(gè)對(duì)象，它包含背景色、段落文本、標(biāo)題等特性，同時(shí)又包含打開(kāi)、關(guān)閉和寫(xiě)入等動(dòng)作。語(yǔ)法：對(duì)象名.屬性名對(duì)象名.方法名知識(shí)準(zhǔn)備6.內(nèi)置對(duì)象：Array對(duì)象類型名稱說(shuō)明屬性length獲取數(shù)組長(zhǎng)度（數(shù)組元素個(gè)數(shù)）方法reverse()反轉(zhuǎn)數(shù)組的元素順序sort()對(duì)數(shù)組的元素進(jìn)行排序join(分隔字符)將數(shù)組內(nèi)各個(gè)元素以分隔符連接成一個(gè)字符串，默認(rèn)按逗號(hào)連接push()向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度splice(m,n)刪除在m位置的n個(gè)元素concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果知識(shí)準(zhǔn)備示例：數(shù)組對(duì)象的使用<script>varstudent=newArray("張三","李四","王五");varstudent1=newArray("zhangsan","lisi","wangwu");document.write("<ol>");document.write("<li>",student,"</li>");//輸出各個(gè)元素

document.write("<li>",student.join(),"</li>");//用逗號(hào)連接各個(gè)元素

document.write("<li>",student.join("、"),"</li>");//用頓號(hào)連接各個(gè)元素

document.write("<li>",student.reverse(),"</li>");//倒序

document.write("<li>",student.concat(student1),"</li>");//連接兩個(gè)數(shù)組

document.write("<li>",student1.sort(),"</li>");//按字典順序重新排序

document.write("</ol>");</script>知識(shí)準(zhǔn)備6.內(nèi)置對(duì)象：String對(duì)象類型名稱說(shuō)明屬性length用于返回字符串中字符的個(gè)數(shù)。注：一個(gè)漢字也是一個(gè)字符方法charAt(index)返回指定索引（index）位置處的字符。第1個(gè)字符的索引為0，第2個(gè)字符的索引為1，以此類推indexOf(str[,startIndex])返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置lastIndexOf(search[,startIndex])從后向前搜索字符串，并從起始位置（0）開(kāi)始計(jì)算返回字符串最后出現(xiàn)的位置substr(startIndex[,length])從起始索引號(hào)提取字符串中指定數(shù)目的字符substring(startIndex[,endIndex])提取字符串中兩個(gè)指定的索引號(hào)之間的字符split(separator[,limitInteger])把字符串分割為字符串?dāng)?shù)組search(substr)檢索字符串中指定子字符串或與正則表達(dá)式相匹配的值replace(substr,replacement)在字符串中查找匹配的子串，并替換與正則表達(dá)式匹配的子串toLowerCase()把字符串轉(zhuǎn)換為小寫(xiě)toUpperCase()把字符串轉(zhuǎn)換為大寫(xiě)知識(shí)準(zhǔn)備示例：字符串對(duì)象的使用<script>varstr=newString("Thisisastudent");varfirstIndex=str.indexOf("s");varlastIndex=str.lastIndexOf("s");vararr=newArray();arr=str.split("");len=str.length;result="第一個(gè)s的位置是："+firstIndex+"<br>最后一個(gè)s的位置是："+lastIndex+"<br>字符串對(duì)象的長(zhǎng)度是："+len+"<br>數(shù)組arr中的各個(gè)元素為："+"<br>"+arr[0]+"<br>"+arr[1]+"<br>"+arr[2]+"<br>"+arr[3];document.write(result);document.write("<br>字符串對(duì)象的顏色為紅色："+str.fontcolor("red"));</script>知識(shí)準(zhǔn)備6.內(nèi)置對(duì)象：Math對(duì)象類型名稱

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論