3.第章-javascript基礎(chǔ)1授課

1、第三章JavaScript基礎(chǔ)第二單元講師:william預(yù)習(xí)檢查說(shuō)出在網(wǎng)頁(yè)中引入JavaScript的方式。簡(jiǎn)述setTimeout和setInterval的區(qū)別。說(shuō)出動(dòng)態(tài)改變樣式的兩種屬性及其取值。第2頁(yè)/共43頁(yè)提問本章任務(wù)任務(wù)1：輸出倒正金字塔直線任務(wù)2：計(jì)算扣稅后實(shí)得工資金額任務(wù)3：網(wǎng)頁(yè)窗口特效任務(wù)4：制作12小時(shí)的時(shí)鐘任務(wù)5：表格操作任務(wù)6：修改訂單第3頁(yè)/共43頁(yè)變量的聲明和賦值 var width; width = 5;先聲明變量再賦值var 用于聲明變量的關(guān)鍵字,”哇”width 變量名var x, y, z = 10;var catName= “皮皮”;同時(shí)聲明和賦值變量不

2、聲明直接賦值width=5;數(shù)據(jù)類型typeof檢測(cè)變量的返回值數(shù)據(jù)類型原始類型Undefined:變量已聲明，但沒有賦值而直接使用Boolean:賦值為布稱值,true or falseString:賦值為字符串值Number:賦值為數(shù)值Null:賦值為null。Null類型的語(yǔ)義是“一個(gè)空的對(duì)象引用”。所以typeof(null)返回的是一個(gè)對(duì)象類型對(duì)象類型objectWiliam老師說(shuō):javascript沒有字符類型串講：頁(yè)面引入JavaScript嵌入式:使用標(biāo)簽外部引入式:使用外部JS文件行內(nèi)式:直接在HTML標(biāo)簽中 第6頁(yè)/共43頁(yè)上機(jī)練習(xí)需求說(shuō)明輸出如圖所示的頁(yè)面完成時(shí)間：10

3、分鐘共性問題集中講解第7頁(yè)/共43頁(yè)練習(xí)小結(jié)在網(wǎng)頁(yè)中引入JavaScript有哪三種方式，常用的是哪種方式？第8頁(yè)/共43頁(yè)提問串講：函數(shù)系統(tǒng)函數(shù)自定義函數(shù)eval() ：例如， eval(2+3);返回5名稱說(shuō)明 parseInt() 將字符串轉(zhuǎn)換為整型數(shù)字 parseFloat()將字符串轉(zhuǎn)換為浮點(diǎn)型isNaN()判斷非數(shù)字eval() 計(jì)算表達(dá)式值第9頁(yè)/共43頁(yè)串講：自定義函數(shù)創(chuàng)建函數(shù)無(wú)參函數(shù)有參函數(shù)調(diào)用函數(shù)事件名=函數(shù)名()例如：oncllick=函數(shù)名()直接使用函數(shù)名（傳遞的實(shí)參值）例如：var result=add(2,3);function 函數(shù)名() / JavaScrip

4、t代碼; function 函數(shù)名(參數(shù)1,參數(shù)2， ) / JavaScript代碼; 演示示例：調(diào)用有參有返回值函數(shù)第10頁(yè)/共43頁(yè)上機(jī)練習(xí)需求說(shuō)明定義一個(gè)函數(shù)，輸出用戶的自身信息(名字，年紀(jì))完成時(shí)間：10分鐘共性問題集中講解第11頁(yè)/共43頁(yè)練習(xí)串講：window對(duì)象常用方法confirm()與alert()、 prompt()區(qū)別名稱說(shuō)明 prompt() 顯示可提示收用戶輸入的對(duì)話框alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框close() 關(guān)閉瀏覽器窗口open() 打開一個(gè)新的瀏覽器窗口，加載給定 U

5、RL 所指定的文檔setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)setInterval()按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)clearTimeout()取消由setTimeout()方法設(shè)置的timeout第12頁(yè)/共43頁(yè)串講：open()窗口特征window.open(彈出窗口的url,窗口名稱,窗口特征)名稱說(shuō)明height、width 窗口文檔顯示區(qū)的高度、寬度，以像素計(jì)left、top 窗口的x坐標(biāo)、y坐標(biāo)，以像素計(jì)toolbar=yes | no |1 | 0 是否顯示瀏覽器的工具欄，默認(rèn)是yesscrollbars=yes | no |1 | 0 是否顯示滾動(dòng)條，默認(rèn)是yes

6、location=yes | no |1 | 0 是否顯示地址欄，默認(rèn)是yesstatus=yes | no |1 | 0 是否添加狀態(tài)欄，默認(rèn)是yesmenubar=yes | no |1 | 0 是否顯示菜單欄，默認(rèn)是yes第13頁(yè)/共43頁(yè)語(yǔ)法串講：定時(shí)函數(shù)setTimeout()方法setTimeout(調(diào)用的函數(shù),等待的毫秒數(shù))setInterval(調(diào)用的函數(shù),間隔的毫秒數(shù))clearTimeout (setTimeout()返回的ID值 )var myTimesetTimeout(disptime(), 1000 );var myTime setInterval(disptime

7、(), 1000 );clearTimeout(myTime);setInterval()方法clearTimeout()方法第14頁(yè)/共43頁(yè)語(yǔ)法語(yǔ)法語(yǔ)法串講：History對(duì)象History對(duì)象的方法go(1)等價(jià)于forward()go(-1)等價(jià)于back()*location對(duì)象Href:跳轉(zhuǎn)到哪個(gè)網(wǎng)頁(yè)名稱說(shuō)明 back()加載 history 對(duì)象列表中的前一個(gè)URLforward()加載 history 對(duì)象列表中的下一個(gè)URL go()加載 history 對(duì)象列表中的某個(gè)具體URL第15頁(yè)/共43頁(yè)var today=new Date(); /返回當(dāng)前日期和時(shí)間var tda

8、te=new Date(september 1,2012,14:58:12);串講：Date對(duì)象創(chuàng)建日期對(duì)象var 日期實(shí)例 = new Date(參數(shù)) ;常用方法名稱說(shuō)明 getDate()返回 Date 對(duì)象的一個(gè)月中的某一天，其值介于131之間getDay()返回 Date 對(duì)象的星期中的某一天，其值介于06之間getHours()返回 Date 對(duì)象的小時(shí)數(shù)，其值介于023之間getMinutes()返回 Date 對(duì)象的分鐘數(shù)，其值介于059之間getSeconds()返回 Date 對(duì)象的秒數(shù)，其值介于059之間getMonth()返回 Date 對(duì)象的月份，其值介于011之間g

9、etFullYear()返回 Date 對(duì)象的年份，其值為4位數(shù)getTime()返回自某一時(shí)刻（1970年1月1日）以來(lái)的毫秒數(shù)第16頁(yè)/共43頁(yè)上機(jī)練習(xí)需求說(shuō)明打開“青鳥論壇”頁(yè)面時(shí)，彈出“調(diào)查表”頁(yè)面設(shè)置“調(diào)查表”頁(yè)面的寬、高和距窗口的x、y軸，且頁(yè)面無(wú)滾動(dòng)條、狀態(tài)欄和菜單欄提交調(diào)查表時(shí)，彈出確認(rèn)窗口第17頁(yè)/共46頁(yè)完成時(shí)間：15分鐘共性問題集中講解第17頁(yè)/共43頁(yè)練習(xí)串講：Document對(duì)象名稱說(shuō)明 getElementById()返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用getElementsByName()返回帶有指定名稱的對(duì)象的集合getElementsByTagName()返回

10、帶有指定標(biāo)簽名的對(duì)象的集合write()向文檔寫文本、HTML表達(dá)式或JavaScript代碼document對(duì)象的方法三種訪問頁(yè)面元素的區(qū)別第18頁(yè)/共43頁(yè)第19頁(yè)/共46頁(yè)上機(jī)練習(xí)需求說(shuō)明顯示年、月、日顯示星期幾顯示時(shí)鐘特效，時(shí)鐘為12小時(shí)進(jìn)制第19頁(yè)/共46頁(yè)完成時(shí)間：15分鐘共性問題集中講解第19頁(yè)/共43頁(yè)練習(xí)講解：使用Core DOM操作節(jié)點(diǎn)DOM節(jié)點(diǎn)樹父子關(guān)系兄弟關(guān)系第20頁(yè)/共43頁(yè)串講：使用Core DOM操作節(jié)點(diǎn)訪問節(jié)點(diǎn)創(chuàng)建和增加節(jié)點(diǎn)刪除和替換節(jié)點(diǎn)訪問指定節(jié)點(diǎn)的方法getElementById() getElementsByName() getElementsByTagN

11、ame() 查看/修改屬性節(jié)點(diǎn)getAttribute(屬性名) setAttribute(屬性名,屬性值) 第21頁(yè)/共43頁(yè)串講：訪問節(jié)點(diǎn)-1如果編程時(shí)希望訪問某個(gè)元素的父元素，但又不知道父元素的ID、name、tag，怎么辦？使用層次關(guān)系訪問節(jié)點(diǎn)parentNodefirstChildlastChildnextSiblingpreviousSibling 東方賀 語(yǔ)文 95 該節(jié)點(diǎn)的parentNode ？ 該節(jié)點(diǎn)的firstChild ？lastChild ？第22頁(yè)/共43頁(yè)問題串講：訪問節(jié)點(diǎn)-2function checks() var objTable=document.getE

12、lementById(myTable); var strHtml = objTable.lastChild.firstChild.firstChild.innerHTML; alert(strHtml); 歐陽(yáng)蘭 該代碼指哪個(gè)節(jié)點(diǎn) ？ thead和tbody標(biāo)簽用于表格數(shù)據(jù)的邏輯分組，W3C不推薦，但寫腳本訪問表格數(shù)據(jù)時(shí)常用。第23頁(yè)/共43頁(yè)串講：創(chuàng)建和增加節(jié)點(diǎn)創(chuàng)建和增加節(jié)點(diǎn) 的方法createElement()：創(chuàng)建節(jié)點(diǎn) appendChild()：末尾追加方式插入節(jié)點(diǎn)insertBefore()：在指定節(jié)點(diǎn)前插入新節(jié)點(diǎn)cloneNode()：克隆節(jié)點(diǎn)function newNode()

13、/增加圖片 var oldNode=document.getElementById(sixty1); var image=document.createElement(img); image.setAttribute(src,images/newimg.jpg); document.body.insertBefore(image,oldNode); function copyNode() /復(fù)制圖片 var image=document.getElementById(sixty1); var copyImage=image.cloneNode(false); document.body.app

14、endChild(copyImage); ID屬性：sixty1第24頁(yè)/共43頁(yè)串講：刪除和替換節(jié)點(diǎn)function delNode() /刪除圖片 var dNode=document.getElementById(sixty1); document.body.removeChild(dNode); function repNode() /替換圖片 var oldimage=document.getElementById(sixty2); var newimage=document.createElement(img); newimage.setAttribute(src,images/r

15、eplace.jpg); document.body.replaceChild(newimage,oldimage); 刪除和替換節(jié)點(diǎn)的方法removeChild()：刪除節(jié)點(diǎn) replaceChild() ：替換節(jié)點(diǎn)第25頁(yè)/共43頁(yè)ID屬性：sixty2ID屬性：sixty1需求說(shuō)明實(shí)現(xiàn)如下的表格操作功能上機(jī)練習(xí)修改標(biāo)題行樣式為：居中顯示、字體加粗 、單元格背景顏色變?yōu)椤?ccc”完成時(shí)間：25分鐘共性問題集中講解第26頁(yè)/共43頁(yè)練習(xí)串講：使用HTML DOM操作表格Table對(duì)象類別名稱說(shuō)明屬性rows返回包含表格中所有行的一個(gè)數(shù)組方法insertRow()在表格中插入一個(gè)新行dele

16、teRow()從表格中刪除一行TableRow對(duì)象類別名稱說(shuō)明屬性cells返回包含行中所有單元格的一個(gè)數(shù)組rowIndex返回該行在表中的位置方法insertCell()在一行中的指定位置插入一個(gè)空的標(biāo)簽deleteCell()刪除行中指定的單元格TableCell對(duì)象類別名稱說(shuō)明屬性cellIndex返回單元格在某行單元格集合中的位置innerHTML設(shè)置或返回單元格的開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTMLalign設(shè)置或返回單元格內(nèi)部數(shù)據(jù)的水平排列方式className設(shè)置或返回元素的class屬性第27頁(yè)/共43頁(yè)需求說(shuō)明可以增加定單單擊“修改”按鈕時(shí)，數(shù)量改為文本框顯示，可以改變數(shù)量，并且“修改”按鈕變?yōu)椤按_定”按鈕單擊“確定”按鈕后，修改數(shù)量成功，并且數(shù)量顯示在當(dāng)前的單元格中，“確定”按鈕變?yōu)椤靶薷摹卑粹o上機(jī)練習(xí)完成時(shí)間：25分鐘共性問題集中講解第28頁(yè)/共43頁(yè)練習(xí)小結(jié)向指定的節(jié)點(diǎn)之前插入一個(gè)新的子節(jié)點(diǎn)，使用的方法是（ ）。創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)，使用的方法是（ ）。如果已獲得表格對(duì)象是tableObject，則獲得第一行對(duì)象則可以寫成（ ）。inse