響應式網頁開發(fā)基礎教程(jQuery+Bootstrap)第2章-JavaScript基礎課件

第2章JAVASCRIPT基礎1第2章JAVASCRIPT基礎1響應式網頁設計基礎初識JavaScriptJavaScript編程基礎JavaScript事件處理JavaScript的BOM與DOM本章實訓響應式網頁設計基礎初識JavaScriptJavaScrip初識JavaScriptJavaScript：直譯式、用于Web客戶端、面向對象、解釋型的程序設計語言，可直接由瀏覽器解析執(zhí)行。3JavaScript核心（ECMAScript）瀏覽器對象模型（BOM）文檔對象模型（DOM）初識JavaScriptJavaScript：直譯式、用于W初識JavaScriptJavaScript在網頁中的引用方式頁面內嵌外部引用行內偽URL引入javascript:要執(zhí)行的代碼…4初識JavaScriptJavaScript在網頁中的引用方初識JavaScript常用的輸入/輸出語句警告對話框alert()提示對話框prompt()確認對話框confirm()輸出語句document.write()5初識JavaScript常用的輸入/輸出語句5JavaScript編程基礎JavaScript中的變量可以存放不同類型的數據在JavaScript中，變量通過使用var關鍵字來聲明：var變量名;變量的命名規(guī)則:（1）變量首字母必須使用字母、下劃線（_）或者美元符（$）。（2）余下字母可以使用任意多個英文字母、數字，或者美元符（$）組合。（3）不能使用JavaScript關鍵詞與JavaScript保留關鍵字命名變量。（4）在JavaScript中變量的命名區(qū)分大小寫，如變量box1與Box1是不一樣的，表示的是兩個不同的變量。6JavaScript編程基礎JavaScript中的變量6JavaScript編程基礎JavaScript是一種弱類型控制的語言，在JavaScript中一個變量可以根據需要存放不同類型的值，進行自動的類型轉換，而不需要另外的強制類型轉換?？捎胻ypeof()檢測變量當前存放的數據類型JavaScript的基本數據類型：string（字符串類型）、number（數值類型）、boolean（布爾類型）、undefined（未定義類型）、null（空類型）、object（對象類型）7字符串描述string字符串number數值boolean布爾值undefined未定義object對象或nullfunction函數JavaScript編程基礎JavaScript是一種弱類型JavaScript編程基礎常見的運算符一元運算符：遞增++和遞減—算術運算符：加（+）、減（-）、乘（*）、除（/）、求模（取余）關系運算符：小于（<）、大于（>）、小于等于（<=）、大于等于（>=）、相等（==）、不等（!=）、全等（恒等）（===）、全不等（不恒等）（!==）邏輯運算符：與（&&）、或（||）、非（!）賦值運算符：=三元運算符：條件表達式?表達式1:表達式28JavaScript編程基礎常見的運算符8JavaScript編程基礎流程控制語句判斷、循環(huán)等常用的流程控制語句：if語句、switch語句、do…while語句、while語句、for語句、for…in語句、break和continue語句、with語句9JavaScript編程基礎流程控制語句9JavaScript編程基礎函數定義：function函數名(形參1,形參2,…,形參n){//函數代碼;}函數調用：函數名();函數使用function關鍵字來聲明，函數聲明包括函數名、參數列表等。函數可以通過return語句得到返回值，但并不需要在函數聲明時指定是否有返回值及返回值類型。10JavaScript編程基礎函數定義：10JavaScript編程基礎常用JavaScript內置對象Array對象：數組Date對象：時間和日期Math對象：數學計算String對象：字符串11JavaScript編程基礎常用JavaScript內置對象JavaScript編程基礎Array對象如果要同時儲存多個數據，可以使用數組變量，一個數組變量可以存儲多個數據（可以是不同類型的數據）。使用數組之前，首先要創(chuàng)建數組，并把數組本身賦給一個變量。12JavaScript編程基礎Array對象12JavaScript編程基礎Array對象的常用方法13方法描述concat()連接兩個或更多的數組，并返回結果join()把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔pop()刪除并返回數組的最后一個元素push()向數組的末尾添加一個或更多元素，并返回新的長度reverse()顛倒數組中元素的順序shift()刪除并返回數組的第一個元素slice()從某個已有的數組返回選定的元素sort()對數組的元素進行排序splice()刪除元素，并向數組添加新元素toSource()返回該對象的源代碼toString()把數組轉換為字符串，并返回結果toLocaleString()把數組轉換為本地數組，并返回結果unshift()向數組的開頭添加一個或更多元素，并返回新的長度valueOf()返回數組對象的原始值JavaScript編程基礎Array對象的常用方法13方法JavaScript編程基礎Date日期對象Date類型處理時間和日期。Date類型還內置了一系列獲取和設置日期時間信息的方法。在使用日期對象之前，首先要創(chuàng)建Date對象，默認以當前日期及時間創(chuàng)建Date對象，也可以以指定日期及時間創(chuàng)建14JavaScript編程基礎Date日期對象14JavaScript編程基礎Date對象常用方法15方法描述Date()返回當日的日期和時間getDate()從Date對象返回一個月中的某一天（1～31）getDay()從Date對象返回一周中的某一天（0～6）getMonth()從Date對象返回月份（0～11）getFullYear()從Date對象以4位數字返回年份getHours()返回Date對象的小時（0～23）getMinutes()返回Date對象的分鐘（0～59）getSeconds()返回Date對象的秒數（0～59）getMilliseconds()返回Date對象的毫秒（0～999）getTime()返回1970年1月1日至今的毫秒數getTimezoneOffset()返回本地時間與格林尼治標準時間（GMT）的分鐘差parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒數setDate()設置Date對象中月的某一天（1～31）setMonth()設置Date對象中的月份（0～11）setFullYear()設置Date對象中的年份（4位數字）setHours()設置Date對象中的小時（0～23）setMinutes()設置Date對象中的分鐘（0～59）JavaScript編程基礎Date對象常用方法15方法描述JavaScript編程基礎Date對象常用方法16方法描述setSeconds()設置Date對象中的秒鐘（0～59）setMilliseconds()設置Date對象中的毫秒（0～999）setTime()以毫秒設置Date對象toString()把Date對象轉換為字符串toTimeString()把Date對象的時間部分轉換為字符串toDateString()把Date對象的日期部分轉換為字符串toLocaleString()根據本地時間格式，把Date對象轉換為字符串toLocaleTimeString()根據本地時間格式，把Date對象的時間部分轉換為字符串toLocaleDateString()根據本地時間格式，把Date對象的日期部分轉換為字符串UTC()根據世界時返回1970年1月1日到指定日期的毫秒數valueOf()返回Date對象的原始值setSeconds()設置Date對象中的秒鐘（0～59）setMilliseconds()設置Date對象中的毫秒（0～999）setTime()以毫秒設置Date對象toString()把Date對象轉換為字符串toTimeString()把Date對象的時間部分轉換為字符串toDateString()把Date對象的日期部分轉換為字符串JavaScript編程基礎Date對象常用方法16方法描述JavaScript編程基礎Date對象重復定時器的設置與清除：setInterval()，clearInterval()一次性定時器的設置與清除：setTimeout()，clearTimeout()setTimeout()與setInterval()的區(qū)別在于setInterval()是重復執(zhí)行的，而setTimeout()只執(zhí)行一次。17JavaScript編程基礎Date對象17JavaScript編程基礎Math對象Math對象用于提供對數據的數學計算Math對象的屬性18屬性說明Math.E自然對數的底數，即常量e的值Math.LN1010的自然對數Math.LN22的自然對數Math.LOG2E以2為底e的對數Math.LOG10E以10為底e的對數Math.PIπ的值Math.SQRT1_21/2的平方根Math.SQRT22的平方根JavaScript編程基礎Math對象18屬性說明MathJavaScript編程基礎Math對象的常用方法19方法描述abs(x)返回數的絕對值ceil(x)對數進行上舍入cos(x)返回數的余弦exp(x)返回e的指數floor(x)對數進行下舍入log(x)返回數的自然對數（底為e）max(x,y)返回x和y中的最大值min(x,y)返回x和y中的最小值pow(x,y)返回x的y次冪random()返回0～1之間的隨機數round(x)把數四舍五入為最接近的整數sin(x)返回數的正弦sqrt(x)返回數的平方根tan(x)返回角的正切JavaScript編程基礎Math對象的常用方法19方法描JavaScript編程基礎String對象String就是字符串對象，只要定義了字符串就可以使用。字符串的定義只需通過單引號或雙引號直接賦值即可。20屬性/方法說明Length返回字符串的長度charAt（索引）返回索引位置的字符toUpperCase()將字符串小寫字母轉換為大寫toLowerCase()將字符串大寫字母轉換為小寫indexOf（"字符串",索引）返回某個指定的字符串值在字符串中的索引位置lastIndexOf（"字符串",索引）返回某個指定的字符串值在字符串中的索引位置（反向搜索）split()字符串分割substring（開始索引,結束索引）提取字符串中介于兩個指定下標之間的字符substr（開始索引,需提取長度）從字符串中提取從開始索引位置開始的指定數目的字符串JavaScript編程基礎String對象20屬性/方法說JavaScript事件處理JavaScript事件一般用于瀏覽器和用戶操作的交互。也就是當用戶訪問一個Web頁面時，用戶或瀏覽器自身執(zhí)行的某種動作例如：點擊頁面上某個對象，就將觸發(fā)點擊事件響應某個事件的函數就叫作事件處理程序（也叫事件處理函數、事件句柄）。21JavaScript事件處理JavaScript事件一般用JavaScript事件處理事件處理程序的方式有內聯(lián)模型和腳本模型兩種。1．HTML事件處理程序（內聯(lián)模型）（1）直接在HTML中執(zhí)行JS代碼（2）在HTML中通過調用執(zhí)行JavaScript函數2．腳本模型腳本模型不同于內聯(lián)模型，內聯(lián)模型是事件函數和HTML混寫的，而腳本模型則實現(xiàn)了HTML與JavaScript代碼層次的分離22JavaScript事件處理事件處理程序的方式有內聯(lián)模型和JavaScript事件處理JavaScript中的常用事件23事件說明onclick鼠標單擊事件，當用戶單擊鼠標按鈕觸發(fā)事件onmouseover鼠標指針經過事件，當鼠標指針移到某個對象上方時觸發(fā)的事件onmouseout鼠標指針移開事件，當鼠標指針移出某個對象上方時觸發(fā)的事件onblur當焦點從對象上移開時觸發(fā)的事件，指針離開事件onfocus獲取焦點（指針移入事件）JavaScript事件處理JavaScript中的常用事JavaScript的BOM與DOMBOM對象及其子對象瀏覽器對象模型（BrowserObjectModel），簡稱為BOM。它提供了獨立于內容而與瀏覽器窗口進行交互的對象，其核心對象是window，常用對象還包括有l(wèi)ocation對象，history對象，screen對象，navigation對象。24JavaScript的BOM與DOMBOM對象及其子對象24JavaScript的BOM與DOMwindow對象window對象是BOM中的頂級對象，引用window對象的屬性和方法時，可以省略window。25方法名作用說明open()打開新窗口返回新打開的窗口，可以繼續(xù)操作該新窗口moveTo(x,y)窗口移動到的位置x和y表示新位置的x和y坐標值，只適用于最外層window對象moveBy(x,y)窗口移動的尺寸x和y表示在水平和垂直方向上移動的像素數，只適用于最外層window對象resizeTo(x,y)窗口寬高尺寸x和y表示瀏覽器窗口的新寬度和新高度，只適用于最外層window對象resizeBy(x,y)窗口寬高變化尺寸x和y表示瀏覽器窗口的寬高變化尺寸，只適用于最外層window對象alert()警告框顯示時包含傳入的字符串和“確定”按鈕confirm()確認框單擊“確認”返回true，單擊“取消”返回falseprompt()提示輸入框“確認”按鈕（返回文本輸入域的內容）、“取消”按鈕（返回null）和文本輸入域find()搜索對話框等同用瀏覽器菜單欄的“查找”命令打開對話框print()打印對話框等同用瀏覽器菜單欄的“打印”命令打開對話框setTimeOut()設置一次性定時器參數：執(zhí)行函數或代碼，執(zhí)行前需要等待的時間clearTimeOut()清除一次性定時器參數為setTimeout()的引用setInterval()設置重復性定時器參數：執(zhí)行函數或代碼，循環(huán)執(zhí)行代碼間隔時間clearInterval()清除重復性定時器參數為setInterval()的引用JavaScript的BOM與DOMwindow對象25方法JavaScript的BOM與DOMlocation對象location對象提供了與當前窗口中加載的文檔有關的信息以及導航功能，它既是window對象的屬性，同時也是document對象的屬性26屬性和方法舉例說明href返回當前完整的URL地址，等同location.toString()host:80返回服務器名稱和端口號hostname返回服務器名稱port8080返回URL中指定的端口號，如果沒有則返回空字符串protocolhttp:返回頁面使用的協(xié)議，通常是http:或https:reload()方法location.reload([true])重新加載當前頁面assign()方法location.assign(url)立即打開新URL并在瀏覽器歷史中生成一條記錄，相當于直接設置location.href值replace()方法location.replace(url)打開新URL，但是不會生成歷史記錄，使用replace()之后，用戶不能通過“后退”回到前一個頁面JavaScript的BOM與DOMlocation對象26JavaScript的BOM與DOMhistory對象history對象保存著用戶上網的歷史記錄，還常用于瀏覽器中的前進和后退功能。27屬性和方法舉例說明lengthhistory.length返回瀏覽器歷史列表中的URL數量back()方法history.back()加載history列表中的前一個URLforward()方法history.forward()加載history列表中的下一個URLgo(num)方法history.go(2)加載history列表中的某個具體頁面JavaScript的BOM與DOMhistory對象27屬JavaScript的BOM與DOMscreen對象screen對象用來表明客戶端顯示器的能力。多用于測定客戶端能力的站點跟蹤工具中。包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等28屬性說明height獲得屏幕的像素高度width獲得屏幕的像素寬度availHeight屏幕的像素高度減去任務欄高度之后的值availWidth屏幕的像素寬度減去任務欄寬度之后的值JavaScript的BOM與DOMscreen對象28屬性JavaScript的BOM與DOMnavigator對象navigator對象用來描述瀏覽器本身，主要用于檢測瀏覽器的版本，包括瀏覽器的名稱、版本、語言、系統(tǒng)平臺、用戶特性字符串等信息。29屬性說明appName返回瀏覽器的名稱appVersion返回瀏覽器的平臺和版本信息browserLanguage返回當前瀏覽器的語言online返回指明系統(tǒng)是否處于脫機模式的布爾值platform返回運行瀏覽器的操作系統(tǒng)平臺userAgent返回由客戶機發(fā)送服務器的

user-agent頭部的值JavaScript的BOM與DOMnavigator對象2JavaScript的BOM與DOMDOM對象模型document對象既是BOM頂級對象的一個屬性，也是DOM模型中的頂級對象。DOM由3部分組成，分別是CoreDOM、XMLDOM和HTMLDOMCoreDOM用于任何結構化文檔和標準模型。XMLDOM用于XML文檔的標準模型，定義了所有XML元素的對象和屬性，以及訪問它們的方法。HTMLDOM用于HTML文檔的標準模型，定義了所有HTML元素的對象和屬性，以及訪問它們的方法。DOM將HTML和XML文檔映射成一個由不同節(jié)點組成的樹型機構，稱為DOM樹。30JavaScript的BOM與DOMDOM對象模型30JavaScript的BOM與DOMDOM對象模型示例31JavaScript的BOM與DOMDOM對象模型示例31JavaScript的BOM與DOMHTML文檔的節(jié)點DOM下，HTML文檔各個節(jié)點被視為各種類型的Node對象。每個Node對象都有自己的屬性和方法，利用這些屬性和方法可以遍歷整個文檔樹。DOM定義了nodeType來表示節(jié)點的類型，使用語法：document.nodeType。32對象nodeType值備注Element1Element元素標簽Attr2元素標簽的屬性Text3元素標簽的文字內容Comment8注釋的文本內容Document9Document對象JavaScript的BOM與DOMHTML文檔的節(jié)點32對JavaScript的BOM與DOMDOM樹的根節(jié)點是Document對象，該對象的documentElement屬性引用表示文檔根元素的Element對象（對于HTML文檔，這個就是<html>標記）。Javascript操作HTML文檔的時候，document即指向整個文檔，<body>、<table>等標簽節(jié)點類型即為Element。Comment類型的節(jié)點則是指文檔的注釋。33方法說明createAttribute()用指定的名字創(chuàng)建新的Attr節(jié)點createComment()用指定的字符串創(chuàng)建新的Comment節(jié)點createElement()用指定的標記名創(chuàng)建新的Element節(jié)點createTextNode()用指定的文本創(chuàng)建新的TextNode節(jié)點getElementById()返回文檔中具有指定id屬性的Element節(jié)點getElementsByTagName()返回文檔中具有指定標記名的所有Element節(jié)點JavaScript的BOM與DOMDOM樹的根節(jié)點是DocJavaScript的BOM與DOMElement標簽元素常用的屬性Element標簽元素常用的方法34屬性說明tagName元素的標記名稱，比如<p>元素為P。HTML文檔返回的tabName均為大寫方法說明getAttribute()以字符串形式返回指定屬性的值getAttributeNode()以Attr節(jié)點的形式返回指定屬性的值getElementsByTabName()返回一個Node數組，包含具有指定標記名的所有Element節(jié)點的子孫節(jié)點，其順序為在文檔中出現(xiàn)的順序hasAttribute()如果該元素具有指定名字的屬性，則返回trueremoveAttribute()從元素中刪除指定的屬性removeAttributeNode()從元素的屬性列表中刪除指定的Attr節(jié)點setAttribute()把指定的屬性設置為指定的字符串值，如果該屬性不存在則添加一個新屬性setAttributeNode()把指定的Attr節(jié)點添加到該元素的屬性列表中JavaScript的BOM與DOMElement標簽元素常JavaScript的BOM與DOM操作DOM節(jié)點對象Node節(jié)點對象定義了一系列屬性和方法，來方便遍歷整個文檔。用parentNode屬性和childNodes[]數組可以在文檔樹中上下移動；通過遍歷childNodes[]數組或者使用firstChild和nextSibling屬性進行循環(huán)操作，也可以使用lastChild和previousSibling進行逆向循環(huán)操作，也可以枚舉指定節(jié)點的子節(jié)點。調用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改變一個節(jié)點的子節(jié)點從而改變文檔樹childNodes[]的值實際上是一個NodeList對象。因此，可以通過遍歷childNodes[]數組的每個元素來枚舉一個給定節(jié)點的所有子節(jié)點；通過遞歸，可以枚舉樹中的所有節(jié)點35JavaScript的BOM與DOM操作DOM節(jié)點對象35JavaScript的BOM與DOMDOM操作node節(jié)點的常用屬性DOM操作node節(jié)點的常用方法36屬性名稱類型說明nodeNameString節(jié)點名稱nodeValueString節(jié)點值nodeTypeNumber節(jié)點類型parentNodeNode父節(jié)點firstChildNode第一個子節(jié)點lastChildNode最后一個子節(jié)點childNodesNodeList所有子節(jié)點previousSiblingNode前一個節(jié)點nextSiblingNode后一個節(jié)點ownerDocumentDocument獲得該節(jié)點所屬的文檔對象attributesMap代表一個節(jié)點的屬性對象方法名稱返回值說明hasChildNodes()Boolean當前節(jié)點是否有子節(jié)點appendChild(node)Node往當前節(jié)點上添加子節(jié)點removeChild(node)Node刪除子節(jié)點replaceChild(oldNode,newNode)Node替換子節(jié)點insertBefore(newNode,refNode)Node在指定節(jié)點的前面插入新節(jié)點JavaScript的BOM與DOMDOM操作node節(jié)點的本章實訓：JavaScript在線上網頁的應用實例網頁換膚37本章實訓：JavaScript在線上網頁的應用實例網頁換膚3本章實訓：JavaScript在線上網頁的應用實例在線搜索百度一下38本章實訓：JavaScript在線上網頁的應用實例在線搜索3Thankyou!PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：/fanwen/試卷下載：/shiti/教案下載：/jiaoan/PPT論壇：

Thankyou!PPT模板下載：第2章JAVASCRIPT基礎40第2章JAVASCRIPT基礎1響應式網頁設計基礎初識JavaScriptJavaScript編程基礎JavaScript事件處理JavaScript的BOM與DOM本章實訓響應式網頁設計基礎初識JavaScriptJavaScrip初識JavaScriptJavaScript：直譯式、用于Web客戶端、面向對象、解釋型的程序設計語言，可直接由瀏覽器解析執(zhí)行。42JavaScript核心（ECMAScript）瀏覽器對象模型（BOM）文檔對象模型（DOM）初識JavaScriptJavaScript：直譯式、用于W初識JavaScriptJavaScript在網頁中的引用方式頁面內嵌外部引用行內偽URL引入javascript:要執(zhí)行的代碼…43初識JavaScriptJavaScript在網頁中的引用方初識JavaScript常用的輸入/輸出語句警告對話框alert()提示對話框prompt()確認對話框confirm()輸出語句document.write()44初識JavaScript常用的輸入/輸出語句5JavaScript編程基礎JavaScript中的變量可以存放不同類型的數據在JavaScript中，變量通過使用var關鍵字來聲明：var變量名;變量的命名規(guī)則:（1）變量首字母必須使用字母、下劃線（_）或者美元符（$）。（2）余下字母可以使用任意多個英文字母、數字，或者美元符（$）組合。（3）不能使用JavaScript關鍵詞與JavaScript保留關鍵字命名變量。（4）在JavaScript中變量的命名區(qū)分大小寫，如變量box1與Box1是不一樣的，表示的是兩個不同的變量。45JavaScript編程基礎JavaScript中的變量6JavaScript編程基礎JavaScript是一種弱類型控制的語言，在JavaScript中一個變量可以根據需要存放不同類型的值，進行自動的類型轉換，而不需要另外的強制類型轉換?？捎胻ypeof()檢測變量當前存放的數據類型JavaScript的基本數據類型：string（字符串類型）、number（數值類型）、boolean（布爾類型）、undefined（未定義類型）、null（空類型）、object（對象類型）46字符串描述string字符串number數值boolean布爾值undefined未定義object對象或nullfunction函數JavaScript編程基礎JavaScript是一種弱類型JavaScript編程基礎常見的運算符一元運算符：遞增++和遞減—算術運算符：加（+）、減（-）、乘（*）、除（/）、求模（取余）關系運算符：小于（<）、大于（>）、小于等于（<=）、大于等于（>=）、相等（==）、不等（!=）、全等（恒等）（===）、全不等（不恒等）（!==）邏輯運算符：與（&&）、或（||）、非（!）賦值運算符：=三元運算符：條件表達式?表達式1:表達式247JavaScript編程基礎常見的運算符8JavaScript編程基礎流程控制語句判斷、循環(huán)等常用的流程控制語句：if語句、switch語句、do…while語句、while語句、for語句、for…in語句、break和continue語句、with語句48JavaScript編程基礎流程控制語句9JavaScript編程基礎函數定義：function函數名(形參1,形參2,…,形參n){//函數代碼;}函數調用：函數名();函數使用function關鍵字來聲明，函數聲明包括函數名、參數列表等。函數可以通過return語句得到返回值，但并不需要在函數聲明時指定是否有返回值及返回值類型。49JavaScript編程基礎函數定義：10JavaScript編程基礎常用JavaScript內置對象Array對象：數組Date對象：時間和日期Math對象：數學計算String對象：字符串50JavaScript編程基礎常用JavaScript內置對象JavaScript編程基礎Array對象如果要同時儲存多個數據，可以使用數組變量，一個數組變量可以存儲多個數據（可以是不同類型的數據）。使用數組之前，首先要創(chuàng)建數組，并把數組本身賦給一個變量。51JavaScript編程基礎Array對象12JavaScript編程基礎Array對象的常用方法52方法描述concat()連接兩個或更多的數組，并返回結果join()把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔pop()刪除并返回數組的最后一個元素push()向數組的末尾添加一個或更多元素，并返回新的長度reverse()顛倒數組中元素的順序shift()刪除并返回數組的第一個元素slice()從某個已有的數組返回選定的元素sort()對數組的元素進行排序splice()刪除元素，并向數組添加新元素toSource()返回該對象的源代碼toString()把數組轉換為字符串，并返回結果toLocaleString()把數組轉換為本地數組，并返回結果unshift()向數組的開頭添加一個或更多元素，并返回新的長度valueOf()返回數組對象的原始值JavaScript編程基礎Array對象的常用方法13方法JavaScript編程基礎Date日期對象Date類型處理時間和日期。Date類型還內置了一系列獲取和設置日期時間信息的方法。在使用日期對象之前，首先要創(chuàng)建Date對象，默認以當前日期及時間創(chuàng)建Date對象，也可以以指定日期及時間創(chuàng)建53JavaScript編程基礎Date日期對象14JavaScript編程基礎Date對象常用方法54方法描述Date()返回當日的日期和時間getDate()從Date對象返回一個月中的某一天（1～31）getDay()從Date對象返回一周中的某一天（0～6）getMonth()從Date對象返回月份（0～11）getFullYear()從Date對象以4位數字返回年份getHours()返回Date對象的小時（0～23）getMinutes()返回Date對象的分鐘（0～59）getSeconds()返回Date對象的秒數（0～59）getMilliseconds()返回Date對象的毫秒（0～999）getTime()返回1970年1月1日至今的毫秒數getTimezoneOffset()返回本地時間與格林尼治標準時間（GMT）的分鐘差parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒數setDate()設置Date對象中月的某一天（1～31）setMonth()設置Date對象中的月份（0～11）setFullYear()設置Date對象中的年份（4位數字）setHours()設置Date對象中的小時（0～23）setMinutes()設置Date對象中的分鐘（0～59）JavaScript編程基礎Date對象常用方法15方法描述JavaScript編程基礎Date對象常用方法55方法描述setSeconds()設置Date對象中的秒鐘（0～59）setMilliseconds()設置Date對象中的毫秒（0～999）setTime()以毫秒設置Date對象toString()把Date對象轉換為字符串toTimeString()把Date對象的時間部分轉換為字符串toDateString()把Date對象的日期部分轉換為字符串toLocaleString()根據本地時間格式，把Date對象轉換為字符串toLocaleTimeString()根據本地時間格式，把Date對象的時間部分轉換為字符串toLocaleDateString()根據本地時間格式，把Date對象的日期部分轉換為字符串UTC()根據世界時返回1970年1月1日到指定日期的毫秒數valueOf()返回Date對象的原始值setSeconds()設置Date對象中的秒鐘（0～59）setMilliseconds()設置Date對象中的毫秒（0～999）setTime()以毫秒設置Date對象toString()把Date對象轉換為字符串toTimeString()把Date對象的時間部分轉換為字符串toDateString()把Date對象的日期部分轉換為字符串JavaScript編程基礎Date對象常用方法16方法描述JavaScript編程基礎Date對象重復定時器的設置與清除：setInterval()，clearInterval()一次性定時器的設置與清除：setTimeout()，clearTimeout()setTimeout()與setInterval()的區(qū)別在于setInterval()是重復執(zhí)行的，而setTimeout()只執(zhí)行一次。56JavaScript編程基礎Date對象17JavaScript編程基礎Math對象Math對象用于提供對數據的數學計算Math對象的屬性57屬性說明Math.E自然對數的底數，即常量e的值Math.LN1010的自然對數Math.LN22的自然對數Math.LOG2E以2為底e的對數Math.LOG10E以10為底e的對數Math.PIπ的值Math.SQRT1_21/2的平方根Math.SQRT22的平方根JavaScript編程基礎Math對象18屬性說明MathJavaScript編程基礎Math對象的常用方法58方法描述abs(x)返回數的絕對值ceil(x)對數進行上舍入cos(x)返回數的余弦exp(x)返回e的指數floor(x)對數進行下舍入log(x)返回數的自然對數（底為e）max(x,y)返回x和y中的最大值min(x,y)返回x和y中的最小值pow(x,y)返回x的y次冪random()返回0～1之間的隨機數round(x)把數四舍五入為最接近的整數sin(x)返回數的正弦sqrt(x)返回數的平方根tan(x)返回角的正切JavaScript編程基礎Math對象的常用方法19方法描JavaScript編程基礎String對象String就是字符串對象，只要定義了字符串就可以使用。字符串的定義只需通過單引號或雙引號直接賦值即可。59屬性/方法說明Length返回字符串的長度charAt（索引）返回索引位置的字符toUpperCase()將字符串小寫字母轉換為大寫toLowerCase()將字符串大寫字母轉換為小寫indexOf（"字符串",索引）返回某個指定的字符串值在字符串中的索引位置lastIndexOf（"字符串",索引）返回某個指定的字符串值在字符串中的索引位置（反向搜索）split()字符串分割substring（開始索引,結束索引）提取字符串中介于兩個指定下標之間的字符substr（開始索引,需提取長度）從字符串中提取從開始索引位置開始的指定數目的字符串JavaScript編程基礎String對象20屬性/方法說JavaScript事件處理JavaScript事件一般用于瀏覽器和用戶操作的交互。也就是當用戶訪問一個Web頁面時，用戶或瀏覽器自身執(zhí)行的某種動作例如：點擊頁面上某個對象，就將觸發(fā)點擊事件響應某個事件的函數就叫作事件處理程序（也叫事件處理函數、事件句柄）。60JavaScript事件處理JavaScript事件一般用JavaScript事件處理事件處理程序的方式有內聯(lián)模型和腳本模型兩種。1．HTML事件處理程序（內聯(lián)模型）（1）直接在HTML中執(zhí)行JS代碼（2）在HTML中通過調用執(zhí)行JavaScript函數2．腳本模型腳本模型不同于內聯(lián)模型，內聯(lián)模型是事件函數和HTML混寫的，而腳本模型則實現(xiàn)了HTML與JavaScript代碼層次的分離61JavaScript事件處理事件處理程序的方式有內聯(lián)模型和JavaScript事件處理JavaScript中的常用事件62事件說明onclick鼠標單擊事件，當用戶單擊鼠標按鈕觸發(fā)事件onmouseover鼠標指針經過事件，當鼠標指針移到某個對象上方時觸發(fā)的事件onmouseout鼠標指針移開事件，當鼠標指針移出某個對象上方時觸發(fā)的事件onblur當焦點從對象上移開時觸發(fā)的事件，指針離開事件onfocus獲取焦點（指針移入事件）JavaScript事件處理JavaScript中的常用事JavaScript的BOM與DOMBOM對象及其子對象瀏覽器對象模型（BrowserObjectModel），簡稱為BOM。它提供了獨立于內容而與瀏覽器窗口進行交互的對象，其核心對象是window，常用對象還包括有l(wèi)ocation對象，history對象，screen對象，navigation對象。63JavaScript的BOM與DOMBOM對象及其子對象24JavaScript的BOM與DOMwindow對象window對象是BOM中的頂級對象，引用window對象的屬性和方法時，可以省略window。64方法名作用說明open()打開新窗口返回新打開的窗口，可以繼續(xù)操作該新窗口moveTo(x,y)窗口移動到的位置x和y表示新位置的x和y坐標值，只適用于最外層window對象moveBy(x,y)窗口移動的尺寸x和y表示在水平和垂直方向上移動的像素數，只適用于最外層window對象resizeTo(x,y)窗口寬高尺寸x和y表示瀏覽器窗口的新寬度和新高度，只適用于最外層window對象resizeBy(x,y)窗口寬高變化尺寸x和y表示瀏覽器窗口的寬高變化尺寸，只適用于最外層window對象alert()警告框顯示時包含傳入的字符串和“確定”按鈕confirm()確認框單擊“確認”返回true，單擊“取消”返回falseprompt()提示輸入框“確認”按鈕（返回文本輸入域的內容）、“取消”按鈕（返回null）和文本輸入域find()搜索對話框等同用瀏覽器菜單欄的“查找”命令打開對話框print()打印對話框等同用瀏覽器菜單欄的“打印”命令打開對話框setTimeOut()設置一次性定時器參數：執(zhí)行函數或代碼，執(zhí)行前需要等待的時間clearTimeOut()清除一次性定時器參數為setTimeout()的引用setInterval()設置重復性定時器參數：執(zhí)行函數或代碼，循環(huán)執(zhí)行代碼間隔時間clearInterval()清除重復性定時器參數為setInterval()的引用JavaScript的BOM與DOMwindow對象25方法JavaScript的BOM與DOMlocation對象location對象提供了與當前窗口中加載的文檔有關的信息以及導航功能，它既是window對象的屬性，同時也是document對象的屬性65屬性和方法舉例說明href返回當前完整的URL地址，等同location.toString()host:80返回服務器名稱和端口號hostname返回服務器名稱port8080返回URL中指定的端口號，如果沒有則返回空字符串protocolhttp:返回頁面使用的協(xié)議，通常是http:或https:reload()方法location.reload([true])重新加載當前頁面assign()方法location.assign(url)立即打開新URL并在瀏覽器歷史中生成一條記錄，相當于直接設置location.href值replace()方法location.replace(url)打開新URL，但是不會生成歷史記錄，使用replace()之后，用戶不能通過“后退”回到前一個頁面JavaScript的BOM與DOMlocation對象26JavaScript的BOM與DOMhistory對象history對象保存著用戶上網的歷史記錄，還常用于瀏覽器中的前進和后退功能。66屬性和方法舉例說明lengthhistory.length返回瀏覽器歷史列表中的URL數量back()方法history.back()加載history列表中的前一個URLforward()方法history.forward()加載history列表中的下一個URLgo(num)方法history.go(2)加載history列表中的某個具體頁面JavaScript的BOM與DOMhistory對象27屬JavaScript的BOM與DOMscreen對象screen對象用來表明客戶端顯示器的能力。多用于測定客戶端能力的站點跟蹤工具中。包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等67屬性說明height獲得屏幕的像素高度width獲得屏幕的像素寬度availHeight屏幕的像素高度減去任務欄高度之后的值availWidth屏幕的像素寬度減去任務欄寬度之后的值JavaScript的BOM與DOMscreen對象28屬性JavaScript的BOM與DOMnavigator對象navigator對象用來描述瀏覽器本身，主要用于檢測瀏覽器的版本，包括瀏覽器的名稱、版本、語言、系統(tǒng)平臺、用戶特性字符串等信息。68屬性說明appName返回瀏覽器的名稱appVersion返回瀏覽器的平臺和版本信息browserLanguage返回當前瀏覽器的語言online返回指明系統(tǒng)是否處于脫機模式的布爾值platform返回運行瀏覽器的操作系統(tǒng)平臺userAgent返回由客戶機發(fā)送服務器的

user-agent頭部的值JavaScript的BOM與DOMnavigator對象2JavaScript的BOM與DOMDOM對象模型document對象既是BOM頂級對象的一個屬性，也是DOM模型中的頂級對象。DOM由3部分組成，分別是CoreDOM、XMLDOM和HTMLDOMCoreDOM用于任何結構化文檔和標準模型。XMLDOM用于XML文檔的標準模型，定義了所有XML元素的對象和屬性，以及訪問它們的方法。HTMLDOM用于HTML文檔的標準模型，定義了所有HTML元素的對象和屬性，以及訪問它們的方法。DOM將HTML和XML文檔映射成一個由不同節(jié)點組成的樹型機構，稱為DOM樹。69JavaScript的BOM與DOMDOM對象模型30JavaScript的BOM與DOMDOM對象模型示例70JavaScript的BOM與DOMDOM對象模型示例31JavaScript的BOM與DOMHTML文檔的節(jié)點DOM下，HTML文檔各個節(jié)點被視為各種類型的Node對象。每個Node對象都有自己的屬性和方法，利用這些屬性和方法可以遍歷整個文檔樹。DOM定義了nodeType來表示節(jié)點的類型，使用語法：document.nodeType。71對象nodeType值備注Element1Element元素標簽Attr2元素標簽的屬性Text3元素標簽的文字內容Comment8注釋的文本內容Document9Document對象JavaScript的BOM與DOMHTML文檔的節(jié)點32對JavaScript的BOM與DOMDOM樹的根節(jié)點是Document對象，該對象的documentElement屬性引用表示文檔根元素的Element對象（對于HTML文檔，這個就是<html>標記）。Javascript操作HTML文檔的時候，document即指向整個文檔，<body>、<table>等標簽節(jié)點類型即為Element。Comment類型的節(jié)點則是指文檔的注釋。72方法說明createAttribute()用指定的名字創(chuàng)建新的Attr節(jié)點createComment()用指定的字符串創(chuàng)建