JavaScript完全教程.ppt

JavaScript,第一章JavaScript概述,第一節(jié) JavaScript簡介,一、JavaScript是什么？ JavaScript是一種基于對象（內(nèi)置了許多對象）和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。,知識擴(kuò)充： 1、事件驅(qū)動：用戶與網(wǎng)頁交互時產(chǎn)生的操作，稱為事件。事件可以由用戶引發(fā)，也可能是頁面發(fā)生改變，甚至還有你看不見的事件（如Ajax的交互進(jìn)度改變）。絕大部分事件都由用戶的動作所引發(fā)，如：用戶按鼠標(biāo)的按鍵，就產(chǎn)生click事件，若鼠標(biāo)的指針在鏈接上移動，就產(chǎn)生mouseover事件等等。在JavaScript中，事件往往與事件處理程序配套使用。,2、客戶端腳本語言： 不同于服務(wù)器端腳本語言，例如PHP與ASP，JavaScript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持而可以獨(dú)立運(yùn)行。 JavaScript是一種腳本語言，其源代碼在發(fā)往客戶端運(yùn)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運(yùn)行。解釋語言的弱點(diǎn)是安全性較差，而且在JavaScript中，如果一條運(yùn)行不了，那么下面的語言也無法運(yùn)行，并且速度較慢。,二、JavaScript發(fā)展歷史： 1、1995年2月，就職于NetScape公司 布蘭登 艾奇，開發(fā)一種名為LiveScript的腳本語言，為了趕在發(fā)布日期前完成LiveScript的開發(fā)，NetScape與Sun公司建立了一個開發(fā)聯(lián)盟。為了搭上媒體熱炒的Java的順風(fēng)車（當(dāng)時Java已經(jīng)很火），臨時把LiveScript改名為JavaScript（1.0）。 2、此時，微軟在其Internet Explorer 3中加入了名為JScript的JavaScript實(shí)現(xiàn)（命名為JScript是為了避開與NetScape有關(guān)的授權(quán)問題）。,3、微軟推出JScript后，JavaScript出現(xiàn)了3個不同的版本：NetScape Navigator中的JavaScript、Internet Explorer中的JScript和ScriptEase中的CEnvi。當(dāng)時沒有標(biāo)準(zhǔn)規(guī)定JavaScript的語法和特性，3個版本并存的局面已經(jīng)暴露了這個問題（不兼容問題）。所以，JavaScript的標(biāo)準(zhǔn)化問題被提上了議事日程。 4、1997年，歐洲計(jì)算機(jī)制造商協(xié)會（ECMA）完成了ECMA-262（發(fā)音“ek-ma-script”）的新腳本語言的標(biāo)準(zhǔn)。,5、以后，瀏覽器開發(fā)商就開始致力于將ECMAScript作為各自JavaScript實(shí)現(xiàn)的基礎(chǔ)，也在不同程度上取得了成功。 注：雖然JavaScript和ECMAScript通常都被人們用來表達(dá)相同的含義，但JavaScript的含義卻比ECMA-262中規(guī)定的多得多。 一個完整的JavaScript實(shí)現(xiàn)由下列3個不同的組成部分：核心（ECMAScript）、文檔對象模型（DOM）、瀏覽器對象模型（BOM）。,三、JavaScript開發(fā)及運(yùn)行環(huán)境 1、開發(fā)環(huán)境： JavaScript是一種腳本語言，代碼不需要變異成二進(jìn)制，而是以文本的形式存在，因此任何文本編輯器都可以作為其開發(fā)環(huán)境，比如記事本（雖然很少人使用）、EditPlus、Ultra Edit（UE）、Dreamweaver等。,2、運(yùn)行環(huán)境： JavaScript依賴于瀏覽器，即瀏覽器是JavaScript的運(yùn)行環(huán)境。當(dāng)前主流瀏覽器都能運(yùn)行今后學(xué)習(xí)的JavaScript代碼，若出現(xiàn)瀏覽器兼容問題，到時會請同學(xué)們注意。 不同的編輯器會對語法進(jìn)行簡單的錯誤識別，不同的瀏覽器也提供對JavaScript程序的調(diào)試功能。 問：還記得當(dāng)前主流的瀏覽器嗎？,注意：一個頁面中只要一個地方JavaScript語法錯誤，則整個JavaScript程序都不執(zhí)行。為我們找錯和調(diào)試帶來了困難。,第二節(jié) 定義和使用JavaScript方式,1、定義方式 （1）嵌入HTML文件中 一般放在(事實(shí)上可以放在任何位置)中，格式： /此處為JavaScript代碼 ,（2） 定義專門的外部文件 將JavaScript代碼寫在一個獨(dú)立的腳本文件（擴(kuò)展名為.js)中，在頁面中使用時直接導(dǎo)入該腳本文件即可，導(dǎo)入的格式： 注意：不能這么寫: 錯誤！必須有結(jié)束標(biāo)簽,知識擴(kuò)充：除了上面兩種最為常用的方式外，還可以在一下地方定義JavaScript代碼： （1）在HTML的元素事件屬性中 比如，按鈕的單擊事件，代碼： 示例：,（2）在超鏈接中定義 語法： 超鏈接 示例： 效果：,2、一個簡單的JavaScript的例子 （1）嵌入到HTML文件中,單擊后顯示的效果,（2）定義專門的js文件 A、定義一個擴(kuò)展名為.js的文件，其中定義如下代碼：,B、定義一個HTML文件，導(dǎo)入該外部js文件，并調(diào)用js文件中的代碼：,C、單擊“按鈕”后，同樣實(shí)現(xiàn)效果：,三、作業(yè) 1、在HTML嵌入一段JavaScript代碼，并定義一個按鈕，當(dāng)點(diǎn)擊按鈕時，彈出“歡迎學(xué)習(xí)JavaScript”。 2、將上題的JavaScript代碼放在單獨(dú)的js文件中，運(yùn)行。,第二章 JavaScript語言基礎(chǔ),一、對一些問題的說明： 1、區(qū)分大小寫： JavaScript中的變量、函數(shù)名和操作符都區(qū)分大小寫，關(guān)鍵字不能做變量或函數(shù)名字。 所以，test和Test是兩個變量，typeof因是關(guān)鍵字所以不能是函數(shù)名或者變量名。 2、標(biāo)識符： 就是變量、函數(shù)、屬性、函數(shù)的參數(shù)等。規(guī)定： （1）第一個字符必須是字母、下劃線(_)、美元符號（$）。 （2）其他字符可以是字母、下劃線、美元符號或數(shù)字。,第一節(jié)：數(shù)據(jù)類型、變量和運(yùn)算符,3、注釋： 包括單行注釋和多行注釋。 （1）單行注釋：/ 如： /這是一個單行注釋 （2）多行注釋 /* */ 如：/* * 這是一個多行注釋 */,4、語句： JavaScript中語句以一個;結(jié)尾（英文分號）。 但可以省略 ; 。比如： 注：分號雖不是必須的，但建議必須加上它，這樣可以提高效率（解析器不必再花時間推測應(yīng)該在哪里插入分號了）和避免錯誤。,5、在控制語句中，單行語句可以不加（不放在代碼塊中），但強(qiáng)烈加上即使代碼塊中只有一條語句。多行語句如果放在一個代碼塊中執(zhí)行，必須加,二、數(shù)據(jù)類型 JavaScript是弱類型腳本語言，使用變量之前，無須定義，想使用某個變量時直接使用即可，JavaScript會根據(jù)需要自動確定數(shù)據(jù)類型和進(jìn)行數(shù)據(jù)類型的轉(zhuǎn)換，但每個變量還是要確定數(shù)據(jù)類型的。 JavaScript中數(shù)據(jù)類型基本數(shù)據(jù)類型（簡單數(shù)據(jù)類型）和復(fù)合數(shù)據(jù)類型（復(fù)雜數(shù)據(jù)類型）兩類，不同大類下面又有自己的小類，如下表：,1、typeof操作符：用來檢測給定變量的數(shù)據(jù)類型 對一個值使用typeof操作符可能返回下列某個字符串之一： （1）undefined： 值未定義時。 （2）boolean： 值是布爾值時。 （3）string： 值是字符串時。 （4) number： 值是數(shù)值時。 （5）object： 值是對象或者null（代表空對象引用）。 （6）function： 值是函數(shù)時。,示例：,注：A、typeof操作符的操作數(shù)可以是變量也可以是數(shù)值字面量。如： B、因typeof是一個操作符而不是函數(shù)，所以可以使用小括號（()）將操作數(shù)括起來，也可以不使用，如： C、typeof(null) 返回值是object，原因在于特殊值null被認(rèn)為是一個空對象的引用（一個對象為空時，值是null）。上頁中有例子。,2、Undefined類型： 該類型只有一個值，即特殊的undefined。在使用var聲明變量但未對其加以初始化時，這個變量值就是undefined。(注意值為小寫，JS大小寫敏感)。示例：,知識擴(kuò)充：包含undefined值的變量和尚未定義的變量是不一樣的。例如：,對于尚未聲明的變量，可以使用typeof操作符檢測其數(shù)據(jù)類型。返回值也為：undefined值，和定義后未賦初值的變量一樣。即使用一個未定義的變量時沒有值，但其類型為Undefined。,建議：定義一個變量時顯式地初始化變量。,3、Null類型： 只有一個值，即：null。 null值表示一個空對象（這正是使用typeof檢測null值會返回“object”）。如：,知識擴(kuò)充：如果定義的變量準(zhǔn)備將來用于保存對象，那么最好將該變量初始化為null而不是其他值。這樣，直接檢查null值就可以判斷相應(yīng)的變量是否已經(jīng)保存了一個對象的引用： var car=null; /其他操作 if(car!=null) /前提是car已賦初值null /對car進(jìn)行某些操作 另：,4、Boolean類型： 該類型有兩個值：true和false。（必須全是小寫） 可以將其他值通過Boolean()函數(shù)轉(zhuǎn)換為Boolean類型，返回值取決于要轉(zhuǎn)換值的數(shù)據(jù)類型和實(shí)際值。,其他類型轉(zhuǎn)為Boolean類型的規(guī)則：,知識擴(kuò)充：使用流控制語句（比如if語句）時，會將其他值自動轉(zhuǎn)換為相應(yīng)的Boolean轉(zhuǎn)換（根據(jù)相應(yīng)的數(shù)據(jù)類型和對應(yīng)的值）。比如： 運(yùn)行結(jié)果：,5、Number類型： 包括整數(shù)和浮點(diǎn)數(shù)值（雙精度數(shù)值）。 除了常用的十進(jìn)制外，還可以表示八進(jìn)制和十六進(jìn)制。八進(jìn)制的第一位必須是0，后跟（07），十六進(jìn)制前兩位是0x，后跟（09及AF）。八進(jìn)制和十六進(jìn)制表示的數(shù)值最終將被轉(zhuǎn)換為十進(jìn)制。,（1）浮點(diǎn)數(shù)值：該數(shù)值中必須包含一個小數(shù)點(diǎn)。 var num1=1.1; var num2=0.1; var num3=.1;/有效，但不推薦。如果數(shù)值只有小數(shù)部分，則可以省略整數(shù)部分的0。,（2）數(shù)值轉(zhuǎn)換： 2個函數(shù)將非數(shù)值轉(zhuǎn)換為數(shù)值： parseInt()：用于將字符串轉(zhuǎn)換成整數(shù)數(shù)值。 parseFloat()：用于將字符串轉(zhuǎn)換成浮點(diǎn)型數(shù)值。,parseInt():將字符串轉(zhuǎn)換為整數(shù)。 規(guī)則：A、它會忽略字符串前面的空格，直至找到第一個非空格字符，如果第一個字符不是數(shù)字字符或者負(fù)號，則返回NaN。 B、轉(zhuǎn)換空字符串返回NaN。 C、如果第一個字符是數(shù)字字符，會接著進(jìn)行解析，直到完成或者遇到非數(shù)字字符。,D、使用該函數(shù)的第二個參數(shù)指定轉(zhuǎn)換時要轉(zhuǎn)成的進(jìn)制數(shù)。 指定基數(shù)會影響到轉(zhuǎn)換的輸出結(jié)果：,parseFloat():將一個字符串轉(zhuǎn)成浮點(diǎn)數(shù)。 和parseInt基本相同，區(qū)別：（1）字符串中的第一個小數(shù)點(diǎn)是有效的，第二個小數(shù)點(diǎn)是無效的，后面的字符串會被忽略。 “22.34.5” 轉(zhuǎn)成 22.34 （2）始終會忽略前導(dǎo)0（把前導(dǎo)0直接去掉），十六進(jìn)制數(shù)始終被轉(zhuǎn)成0，只解析十進(jìn)制數(shù)，所以沒有第二個參數(shù)。即只能轉(zhuǎn)成十進(jìn)制 （3）字符串中沒有小數(shù)點(diǎn)或小數(shù)點(diǎn)后邊全是0，則該函數(shù)返回整數(shù)。,注意：如果需要將表單中的數(shù)值（字符串）在前臺通過JS進(jìn)行算數(shù)運(yùn)算時，必須先使用parseInt或者parseFloat進(jìn)行轉(zhuǎn)換再運(yùn)算。,知識擴(kuò)充：（1）保存浮點(diǎn)數(shù)值需要的內(nèi)存空間是保存整數(shù)的兩倍，因此js會自動將一些能夠轉(zhuǎn)換為整數(shù)的自動轉(zhuǎn)換為浮點(diǎn)數(shù)，如小數(shù)點(diǎn)后沒跟任何數(shù)字（如1.）或者浮點(diǎn)數(shù)本身是個整數(shù)（如1.0）。如： 結(jié)果都為1：,（2）可以使用e表示法（科學(xué)計(jì)數(shù)法），值為e前面的*10的指數(shù)次冪。 var num=3.125e7; /等價于 31250000 var num=3e-7;/0.0000003；,（3）由于精度問題，導(dǎo)致進(jìn)行浮點(diǎn)數(shù)的算數(shù)運(yùn)算時有時結(jié)果不準(zhǔn)確。如： 第一個alert輸出： 第二個輸出：,（4）數(shù)值范圍： ECMAScript表示的最小數(shù)值是： Number.MIN_VALUE(一般瀏覽器該值是：5e-324) 能夠表示的最大值是： Number.MAX_VALUE. 上面兩個值，不同瀏覽器會有區(qū)別，使用下面的語句可測出：,（5）NaN：（Not a Number）。表示一個本來要返回?cái)?shù)值的操作未返回?cái)?shù)值的情況，比如： 任何涉及NaN的操作（如NaN/10)都會返回NaN 。 NaN與任何值都不想等。包括NaN本身。 alert(Nan=Nan);/false isNaN()，用來判斷數(shù)值是否“不是數(shù)值”，不是數(shù)值時返回true，否則，返回false。,6、String類型： 表示由0或多個16位Unicode字符組成的字符序列（每個字符16位Unicode編碼），即字符串。字符串既可以是雙引號（“）也可以是單引號（）表示。下面的表示都是合法的： var str1 = “hello”; var str2 = hello 這兩種表示的語法在解釋上沒有任何區(qū)別，但必須匹配，否則會出現(xiàn)錯誤。,（1）有一些轉(zhuǎn)義字符具有特殊含義： n （換行） t（制表） b（空格） r（回車） f（進(jìn)紙） （斜杠） （單引號） ”（雙引號）,（2）length:該屬性返回字符串的長度。 關(guān)于漢字等雙字節(jié)字符，length屬性可能不會精確地返回字符串中的字符數(shù)目。（實(shí)際上，js中雙字節(jié)字符算一個長度，是由unicode編碼決定的（該編碼用2個字節(jié)表示） alert(“軟件系“.length);/3,(3)【了解】字符串是不可變的，即，字符串一旦創(chuàng)建，值不能再改變。要改變某個變量保存的字符串，首先要銷毀原來的字符串，然后再用一個包含新值的字符串填充該變量。 var lang=”Java”;/開辟空間 lang = lang+”Script”;/Scirpt字符串也會開辟空間。再開辟一個容納Java和Script的空間放新串，并且銷毀原來的2字符串空間。 這樣對于以前的瀏覽器性能較低，現(xiàn)在已解決了這個效率低的問題。,（4）【了解】將其他數(shù)值轉(zhuǎn)換為字符串： A：.toString():函數(shù) 可以將其他數(shù)值（包括字符串，除了null和undefined值）轉(zhuǎn)換為字符串表現(xiàn)。 var age=11; var ageAsString = age.toString();/”11” var bool=true; var boolAsString = bool.toString();/”true” 特別注意null和undefined無法轉(zhuǎn)成字符串。 可以為該函數(shù)指定一個參數(shù)（值為2、8、10、16）分別用以轉(zhuǎn)換數(shù)值時變成不同進(jìn)制的字符串?dāng)?shù)據(jù)。,var num=10; num.toString(2);/1010 ，轉(zhuǎn)成二進(jìn)制 num.toString(8);/12，轉(zhuǎn)成八進(jìn)制 num.toString(10);/10 ，轉(zhuǎn)成十進(jìn)制 num.toString(16);/A 或a ，轉(zhuǎn)成十六進(jìn)制 B：String(要轉(zhuǎn)換的數(shù)值):該函數(shù)和.toString()的區(qū)別在于可以轉(zhuǎn)換null和undefined值。 var value1=null,value2; String(value1);/null String(value2);/undefined,作業(yè)： 1、使用typeof關(guān)鍵字測試不同變量的數(shù)據(jù)類型，并輸出他們的數(shù)據(jù)類型。 2、使用parseFloat函數(shù)，編寫一個可以進(jìn)行加、減、乘、除、取余運(yùn)算的簡單計(jì)算器。,三、變量： JavaScript的變量是松散類型的，所謂松散類型是可以用來保存任何類型的數(shù)據(jù)；并且一個變量的值類型是可變的。,1、定義方式： A、使用var操作符（關(guān)鍵字），后跟變量名的形式。,B、不適用var關(guān)鍵字，使用時直接賦初值?！静煌扑]】,2、作用范圍： 根據(jù)范圍不同，變量分為：全局變量和局部變量。 函數(shù)外邊直接定義的變量稱為全局變量，函數(shù)內(nèi)部定義的變量稱為局部變量。如：,很奇怪的是：JavaScript中函數(shù)內(nèi)定義的變量沒有塊范圍，而是在整個函數(shù)內(nèi)有效，如： 哪怕是在函數(shù)中間使用var聲明的變量，在函數(shù)開始處照樣有效，只是此時沒有賦初值。,3、使用var和不使用的區(qū)別： A、使用var定義變量，程序會強(qiáng)制定義一個新變量； B、不使用var定義變量，系統(tǒng)會優(yōu)先在當(dāng)前上下文中搜索是否存在該變量，只有變量不存在的前提下，才會重新定義一個新變量。 當(dāng)然，推薦使用var在函數(shù)外邊定義全局變量，而在函數(shù)內(nèi)部使用var定義局部變量。,函數(shù)內(nèi)部去掉var后，輸出不同的結(jié)果：,四、操作符：,1、+：既是字符串運(yùn)算符又是加法運(yùn)算符，在進(jìn)行變量的運(yùn)算時取決于變量的類型。 數(shù)字字符串和數(shù)值相加時，數(shù)值自動轉(zhuǎn)為字符串再運(yùn)算；想減時，字符串自動轉(zhuǎn)為數(shù)值再運(yùn)算。,2、=和=區(qū)別（！=和！=區(qū)別相同） =：先進(jìn)行類型轉(zhuǎn)換，再比較類型和值。（值相等，類型不同，則為true） =：不進(jìn)行類型轉(zhuǎn)換，比較類型和值。（值相等，類型相同，才為true）,3、關(guān)系運(yùn)算符也可以比較字符串，規(guī)則是按照字母的Unicode值進(jìn)行比較，若第一個字母相同，則進(jìn)行第二個的比較，以此類推。,4、typeof運(yùn)算符，前面已經(jīng)詳細(xì)介紹。 5、instanceof判斷某個變量是否為指定類的實(shí)例。如：,作業(yè)：1、使用var聲明兩個整型變量，分別輸出它們的和、差、積、商、取余結(jié)果。 2、聲明 var=5和var=“5“,使用=和=判斷它們是否相等。 3、練習(xí)instanceof的用法。,第二節(jié)流程控制和函數(shù),一、流程控制： 1、選擇結(jié)構(gòu)：if 、switch 2、循環(huán)結(jié)構(gòu)：while 、do while、for、for in 3、終止循環(huán)：break、continue,關(guān)于for in： 作用：（1）遍歷數(shù)組中的所有數(shù)組元素 （2）遍歷JavaScript對象的所有屬性 結(jié)果：,二、函數(shù)： 1、定義函數(shù)的方式（2種）： A、定義命名函數(shù) 格式： function funcName（參數(shù)值） /函數(shù)體 ,比如： 如： function sayHi(name,message) alert(“hello”+name+”,”+message); ,B、定義匿名函數(shù)： 格式： var 變量名 = function(參數(shù)) /函數(shù)體 ,比如修改上面的函數(shù)為 var sayHi = function (name,message) alert(“hello”+name+”,”+message); 此處，sayHi的作用就是指向定義的函數(shù)，類似函數(shù)的名字。,2、函數(shù)調(diào)用的方式（3種）： A、直接調(diào)用： 函數(shù)名(實(shí)參值) ; /如果函數(shù)有參數(shù)時。 比如調(diào)用sayHi函數(shù)：,B、在表達(dá)式中調(diào)用 這種方式比較適合有返回值的函數(shù)，返回值作為表達(dá)式的一部分參與運(yùn)算，有時還會和（alert、document）等語句配合輸出。,C、在事件中調(diào)用 當(dāng)調(diào)用事件時，JavaScript可以調(diào)用某個事件來響應(yīng)這個函數(shù)，比如：,注：（1）return 語句不是函數(shù)中必須的，但任何函數(shù)在任何時候都可以通過return語句后跟要返回的值實(shí)現(xiàn)返回值。 function sum(num1,num2) return num1+num2;/執(zhí)行到return后會立即退出。 （2）若在一個文件中，定義函數(shù)名字相同，會使用最后定義的函數(shù)。,作業(yè)：1、使用JavaScript輸出19002015年之間的閏年。 （1）能夠被400整除的是閏年； （2）能夠被4整除，并且不能被100整除 2、定義一個函數(shù)，該函數(shù)用來接收一個生日值（月日組成的4位字符串，比如“0210”，“1225”等），并根據(jù)該生日值提示屬于的星座。,第三章JavaScript核心類,第一節(jié) 字符串類,一、字符串類（String） String類是字符串類型（String）的封裝類，它允許用戶使用String類的方法和屬性操作操作初始的字符串類型值（或說：字符串可以直接使用String類中的屬性和方法） 【明白這句話特別重要，因?yàn)槠渌幕緮?shù)據(jù)類型也都有相應(yīng)的包裝類，這些類型值（如果有）也可以直接操作包裝類的屬性或者方法， 比如Boolean類、Number類和String類，另外復(fù)合類型也有對應(yīng)的類，比如Array類、Function類、Object類等】,1、字符串對象創(chuàng)建的方式 A、直接聲明字符串常量【最常用】，格式： var 字符串變量=“字符串“;/也可以是單引號 比如： B、使用new關(guān)鍵字實(shí)例化字符串對象，格式： var 字符串對象=new String(字符串);,比如： 根據(jù)我們以前學(xué)習(xí)的面向?qū)ο罂芍?，這一步就是去實(shí)例化String類，得到一個對象str，實(shí)例化時會自動去調(diào)用String類中的構(gòu)造方法，完成賦初值的操作。,2、String類的常用屬性： length 功能：該屬性用來返回字符串中的數(shù)量。 說明：中文字符雖然是雙字節(jié)，也算是一個單字符。 比如： 注意：JavaScript中調(diào)用類中的屬性、方法，通過 .（英文點(diǎn)號），和PHP通過-不同。,3、String類中的常用方法：,詳細(xì)解釋 （1）charAt() ： 可返回指定位置的字符。 語法： stringObject.charAt(index) 提示和注釋： 字符串中第一個字符的下標(biāo)是 0。如果參數(shù) index 不在 0 與 string.length 之間，該方法將返回一個空字符串。,實(shí)例：在字符串 “Hello world!“ 中，我們將返回位置 1 的字符： 返回結(jié)果：e,（2）charCodeAt() ：返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數(shù)。 注意：方法 charCodeAt() 與 charAt() 方法執(zhí)行的操作相似，只不過前者返回的是位于指定位置的字符的編碼，而后者返回的是字符子串。 語法：stringObject.charCodeAt(index),提示和注釋：字符串中第一個字符的下標(biāo)是 0。如果 index 是負(fù)數(shù)，或大于等于字符串的長度，則 charCodeAt() 返回 NaN。 實(shí)例：在字符串 “Hello world!“ 中，我們將返回位置 1 的字符的 Unicode 編碼： 值為：101,（3）indexOf() ：返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。 語法：stringObject.indexOf(searchvalue,fromindex),說明：該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 searchvalue。開始檢索的位置在字符串的 fromindex 處或字符串的開頭（沒有指定 fromindex 時）。如果找到一個 searchvalue，則返回 searchvalue 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開始的。 提示和注釋： （1）注釋：indexOf() 方法對大小寫敏感！ （2）如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。,實(shí)例：將在 “Hello world!“ 字符串內(nèi)進(jìn)行不同的檢索： 運(yùn)行結(jié)果：,作業(yè)：1、分別輸出“Hello World ”和“你若安好，便是晴天”兩個字符串的長度。 2、輸出“Hello World”中第三個字符和第五個字符的編碼。 3、計(jì)算“Hello World”中第一個“o”的下標(biāo),（4）concat() ：用于連接兩個或多個字符串。 語法：stringObject.concat(stringX,stringX,.,stringX) 說明：concat() 方法將把它的所有參數(shù)轉(zhuǎn)換成字符串，然后按順序連接到字符串 stringObject 的尾部，并返回連接后的字符串。 請注意，stringObject 本身并沒有被更改。,提示和注釋：使用 “ + “ 運(yùn)算符來進(jìn)行字符串的連接運(yùn)算通常會更簡便一些。 實(shí)例：將創(chuàng)建兩個字符串，然后使用 concat() 把它們顯示為一個字符串： 運(yùn)行結(jié)果：,（5）lastIndexOf() ：返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。 語法： stringObject.lastIndexOf(searchvalue,fromindex),返回值：如果在 stringObject 中的 fromindex 位置之前存在 searchvalue，則返回的是出現(xiàn)的最后一個 searchvalue 的位置。即從fromindex 位置向前查找，找到最后一次出現(xiàn)的位置。 說明：該方法將從尾到頭地檢索字符串 stringObject，看它是否含有子串 searchvalue。 開始檢索的位置在字符串的 fromindex 處或字符串的結(jié)尾（沒有指定 fromindex 時）。如果找到一個 searchvalue，則返回 searchvalue 的第一個字符在 stringObject 中的位置。 即要么從結(jié)尾向前查找，要么從fromindex 位置向前查找。,提示和注釋： （1）lastIndexOf() 方法對大小寫敏感！ （2）如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。,實(shí)例：將在 “Hello world!“ 字符串內(nèi)進(jìn)行不同的檢索： 運(yùn)行結(jié)果：,（6）substr() ：可在字符串中抽取從 start 下標(biāo)開始的指定數(shù)目的字符。 語法：stringObject.substr(start,length) 返回值：一個新的字符串，包含從 stringObject 的 start（包括 start 所指的字符） 處開始的 lengh個字符。如果沒有指定 lengh，那么返回的字符串包含從 start 到 stringObject 的結(jié)尾的字符。,示例：將使用 substr() 從字符串中提取一些字符 運(yùn)行結(jié)果：,（7）substring() ：用于提取字符串中介于兩個指定下標(biāo)之間的字符。 語法：stringObject.substring(start,stop),返回值：一個新的字符串，該字符串值包含 stringObject 的一個子字符串，其內(nèi)容是從 start 處到 stop-1 處的所有字符，其長度為 stop 減 start。 說明：（1）substring() 方法返回的子串包括 start 處的字符，但不包括 end 處的字符。 （2）如果參數(shù) start 與 end 相等，那么該方法返回的就是一個空串（即長度為 0 的字符串）。如果 start 比 end 大，那么該方法在提取子串之前會先交換這兩個參數(shù)。 重要事項(xiàng)：substring() 不接受負(fù)的參數(shù)。,示例：將使用 substring() 從字符串中提取一些字符： 運(yùn)行結(jié)果：,（8）split() ：用于把一個字符串分割成字符串?dāng)?shù)組。 語法：stringObject.split(separator,howmany) 返回值：一個字符串?dāng)?shù)組。該數(shù)組是通過在 separator 指定的邊界處將字符串 stringObject 分割成子串創(chuàng)建的。返回的數(shù)組中的字串不包括 separator 自身。,提示和注釋：（1）如果把空字符串 (“) 用作 separator，那么 stringObject 中的每個字符之間都會被分割。 （2）String.split() 執(zhí)行的操作與 Array.join() 執(zhí)行的操作是相反的。,示例：將按照不同的方式來分割字符串 運(yùn)行結(jié)果：（，用來分割每個數(shù)組元素）,（9）replace() ：用于在字符串中用一些字符替換另一些字符 語法：stringObject.replace(substr,replacement) 返回值：一個新的字符串，是用 replacement 替換了 substr的第一次匹配之后得到的。,示例：replace替換的例子 結(jié)果：,（10）toLowerCase() ：用于把字符串轉(zhuǎn)換為小寫。 toUpperCase() ：用于把字符串轉(zhuǎn)換為大寫。 語法： stringObject.toLowerCase() stringObject.toUpperCase() 返回值：一個新的字符串，在其中 stringObject 的所有大（?。懽址勘晦D(zhuǎn)換為了小（大）寫字符。,示例：大小寫轉(zhuǎn)換的例子 運(yùn)行結(jié)果：,作業(yè)： 4、定義三個字符串“PHP1”、“PHP2”，“PHP3”，將它們連接成一個字符串輸出。 5、使用substr()從“Hello World”中截取出“World”。 6、使用substring()從“Hello World”中截取出“Hello”。 7、將一個存有本小組學(xué)生姓名，且用符分開的字符串，用各個名字符分割存放到數(shù)組中。 8、將“Hello World”全部轉(zhuǎn)為小寫，輸出之后再全部轉(zhuǎn)為大寫。,第二節(jié) 數(shù)學(xué)類,一、說明： 1、Math 類用于執(zhí)行數(shù)學(xué)任務(wù)。 2、Math類不需要創(chuàng)建，而直接使用。Math類的所有屬性和方法都是靜態(tài)的，只需使用語法“Math.方法名(參數(shù))”或“Math.常量名”來調(diào)用即可，不需要實(shí)例化。 3、使用： var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); 的方式訪問其中的常量或方法。,二、Math 的屬性,下面舉幾個常用的屬性的例子： （1）Math.LOG10E： 運(yùn)行結(jié)果： （2）Math.PI： 運(yùn)行結(jié)果：,（3）Math.SQRT2 運(yùn)行結(jié)果：,三、Math的常用方法,下面是幾個常用方法的使用例子： （1）Math.abs(x) ：返回?cái)?shù)的絕對值。 （2）Math.ceil(x)：可對一個數(shù)進(jìn)行上舍入。,（3）Math.floor(x)：對一個數(shù)進(jìn)行下舍入。 （4）Math.max(x.) ：返回兩個指定的數(shù)中帶有較大的值的那個數(shù)。注意：該方法現(xiàn)在可以有多個參數(shù)。Math.min(x.)和max相同，不再舉例。,（5）random() ： 返回介于 0.0 1.0 之間的一個隨機(jī)數(shù)。 注意：該方法每次獲取的數(shù)值都不一樣，比如：,（6）Math.round(x) ：把一個數(shù)字舍入為最接近的整數(shù)。,1、使用max()函數(shù)求出3個數(shù)中的最大值，用min（）函數(shù)求出其中的最小值。 2、完成能生成4個09之間的隨機(jī)數(shù)的程序。 3、把本小組的學(xué)生放到數(shù)組中，每點(diǎn)擊一次按鈕，可以隨機(jī)抽出本小組的一名學(xué)生顯示到頁面上 4、設(shè)定圓的半徑為2.5，求圓的面積、周長。,小項(xiàng)目，完成如下圖所示的計(jì)算器功能：只完成紅框中內(nèi)容。,第三節(jié)：日期（Date）類,一、定義日期對象 1、說明：（1）與日期相關(guān)的運(yùn)算被封裝在Date類中，使用該類的方法和屬性可以獲取客戶端操作系統(tǒng)的日期和時間值。 （2）要調(diào)用Date類的方法（注：Date類沒有自己的屬性），首先必須使用構(gòu)造器創(chuàng)建一個Dete類的實(shí)例。,2、定義方式 （1）定義獲取當(dāng)前系統(tǒng)日期時間的對象： var nowDate=new Date(); (2)定義參數(shù)為毫秒數(shù)的日期時間對象： var newDate=new Date(毫秒數(shù)); 參數(shù)值表示從1970年1月1日午夜0時開始的毫秒數(shù)，返回該毫秒數(shù)代表的時間。,（3）定義參數(shù)為日期時間字符串的對象 var newDate = new Date(“日期字符串“) 它將參數(shù)表示的字符串型的日期值轉(zhuǎn)為日期對象。格式可以有: “月 日,年 時：分：秒“ （月用英文，其他可以是數(shù)字，日年間一定有,） “年/月/日 時：分：秒“ （所有部分都是數(shù)字，年份四位，月是從011）,（4）定義含有多個參數(shù)的對象 var newDate=new Date(year ,month ,day ,hour ,minute ,second ,millisecond ) 說明：從前往后分別表示年、月、日、時、分、秒、毫秒。 注意：month:月的值是從0開始，即0代表1月。 year :099 1900-1999 ，如果不是099則必須寫完整4位年份。 day ：131 hour：023 minute：059 second：059 mill：0999,下面的例子分別驗(yàn)證了上邊幾種不同實(shí)例化的方式：,二、常用方法 getXxx() setXxx toXxx() 轉(zhuǎn)換,說明：（1）Date類中存在很多的getXxx方法和對應(yīng)的setXxx方法，上面只是列出了部分，用時可以查看JavaScript手冊。 （2）這類getXxx()方法用法基本相同（當(dāng)然setXxx()之間用法也相同），用時可以舉一反三。,1、getXxx()方法 ：這類方法都是可以獲取日期時間中的某部分內(nèi)容，比如： getFullYear() ：返回一個表示年份的 4 位數(shù)字。 注：其他方法用法類似，不再舉例。,2、getTime() ：可返回距 1970 年 1 月 1 日之間的毫秒數(shù)。,下面的方式可以計(jì)算現(xiàn)在距1970年1月1日有多少年：,3、 Date.parse(datestring)：解析一個日期時間字符串，并返回 1970/1/1 午夜距離該日期時間的毫秒數(shù)，注意：該方法是靜態(tài)方法，用類名直接調(diào)用。 示例：,4、setXxx()方法：一般用于設(shè)置某個日期時間值。比如： setFullYear() ：用于設(shè)置年份。 語法：dateObject.setFullYear(year,month,day) 說明：該函數(shù)還可以有第二個、第三個參數(shù)分別用來設(shè)置月份。,示例：使用setFullYear()方法設(shè)置年份（月、日）,5、toXxxString()：這些方法的作用是將日期時間值格式化為中間單詞（Xxx)指定的字符串格式的日期，比如： （1）toLocaleString() ：可根據(jù)本地時間把 Date 對象轉(zhuǎn)換為字符串，并返回結(jié)果。 （2）toUTCString() ：可根據(jù)世界時 (UTC) 把 Date 對象轉(zhuǎn)換為字符串，并返回結(jié)果。,示例：,注意：如果進(jìn)行日期間某個值的算數(shù)運(yùn)算時，需要先使用getXxx()方法獲取到某個時間值，之后在運(yùn)算，比如：,作業(yè)：1、獲取當(dāng)前的系統(tǒng)日期值。 2、獲取1970年1月1日到現(xiàn)在的毫秒數(shù)。 3、計(jì)算距離國慶節(jié)還有多少天？ 4、計(jì)算從你的出生日期到當(dāng)前系統(tǒng)日期經(jīng)歷多少個月？多少天？多少個小時？多少個分鐘？多少個秒？,第四節(jié)：數(shù)組（Array）類,一、說明： Array 對象用于在單個的變量中存儲多個值。 二、創(chuàng)建數(shù)組的3種方式： 1、實(shí)例化一個長度為0的數(shù)組： var arr= new Array(); 示例： /聲明一個長度為0的數(shù)組myArr。 var myArr=new Array();,（2）實(shí)例化一個長度為n的數(shù)組，n是參數(shù)。 var arr=new Array(n); 示例： /新建一個長度為5的數(shù)組，有5個元素。 var myArr = new Array(5);,（3）實(shí)例化一個賦初值的數(shù)組，包含多個參數(shù)。 var arr = new Array(值1，值2，值3，.); 示例： /創(chuàng)建一個數(shù)組，并且賦初值是1,2,3,4 var myArr = new Array(1,2,3,4);,【知識擴(kuò)充】創(chuàng)建數(shù)組的另外一種方式： var colors = ”red”,”blue”,”green”; var colors = ; 使用加下標(biāo)索引的方式來獲取數(shù)組中的一項(xiàng)值：colors0獲取red值。如果下標(biāo)值超過的數(shù)組的個數(shù)，則數(shù)組會自動增加到該所以值加1的長度。比如：訪問colors3時，下標(biāo)為3的值已經(jīng)超限，則數(shù)組長度自動增1 ，變?yōu)?。,三、數(shù)組的屬性 length ：設(shè)置或返回?cái)?shù)組中元素的數(shù)目。 注意：設(shè)置 length 屬性可改變數(shù)組的大小。如設(shè)置的值比其當(dāng)前值小，數(shù)組將被截?cái)?，其尾部的元素將丟失。如果設(shè)置的值比它的當(dāng)前值大，數(shù)組將增大，新的元素被添加到數(shù)組的尾部，它們的值為 undefined。,1、采用多種方式創(chuàng)建一個包含3個元素的數(shù)組 （1）先創(chuàng)建一個空數(shù)組，之后向其中加入3個元素。 （2）先創(chuàng)建一個長度為3的數(shù)組，之后再新增3個元素。 （3）創(chuàng)建數(shù)組的同時，賦三個初值。 2、將上面的數(shù)組長度增加2，查看數(shù)組中的元素值。 3、將上面的數(shù)組長度變?yōu)?，查看數(shù)組中的元素值。,【知識擴(kuò)充】 colors.length=4;/數(shù)組的元素個數(shù)增加1個 alert(colors3);/undefined。雖然長度增加一個但沒有賦值。 /colors3=”black”;/添加一個新的元素 /alert(colors3);/顯示添加的新元素值 colorscolors.length=”brown”;/在最后面新增一個元素 colors99=”black”;/在下標(biāo)為99處添加一個元素 alert(colors.length);/該數(shù)組長度變?yōu)?00,四、常用方法：,常用方法： 1、concat() ：用于連接兩個或多個數(shù)組。 注：該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本。 注：字符串類中也有一個concat()函數(shù)，不知你還記得否？ 語法：arrayObject.concat(arrayX,arrayX,arrayX),示例： 輸出：,2、join() ：用于把數(shù)組中的所有元素放入一個字符串。 語法：arrayObject.join(separator),示例： 結(jié)果： 注意使用該函數(shù)分割后變成字符串了,3、pop() ：用于刪除并返回?cái)?shù)組的最后一個元素。 注意：該函數(shù)執(zhí)行時除了刪除最后一個元素，還將最后一個元素作為返回值，返回。示例：,4、reverse()：用于顛倒數(shù)組中元素的順序。 注意：該方法會改變原來的數(shù)組，而不會創(chuàng)建新的數(shù)組。,5、sort() ：用于對數(shù)組的元素進(jìn)行排序。 注意：數(shù)組在原數(shù)組上進(jìn)行排序，不生成副本。,不再講解其他方法的用法，用時可以查手冊。,作業(yè)：新建一個數(shù)組，兩面包含3個元素，完成如下操作： 1、另外再新建兩個數(shù)組，里面各包含兩個元素，將這個數(shù)組連接在一起，組成一個新數(shù)組，并輸出數(shù)組中的元素值。 2、將上面的3個數(shù)組轉(zhuǎn)換成一個字符串輸出。 3、獲取并刪除數(shù)組的第一個、最后一個元素值。 4、將數(shù)組排序。 5、將數(shù)組元素逆序排列。,第四章 window對象,一、瀏覽器對象介紹,瀏覽器是JavaScript程序的宿主，為了能夠和JavaScript程序進(jìn)行通信，比如獲得瀏覽器的信息和對瀏覽器做出響應(yīng)。瀏覽器為JavaScript解釋器提供了應(yīng)用程序接口，它提供了很多宿主對象（瀏覽器對象）來完成這些操作，可以使用戶能創(chuàng)建很多精美的網(wǎng)頁動態(tài)效果，這種宿主對象被稱為BOM（Browser Object Model ，瀏覽器對象模型）。 對象主要有：window、navigator、screen、history、location等。 其中，window對象是一個頂層對象，其他對象都有該對象派生。,二、window對象,一、說明： 1、Window 對象表示瀏覽器中打開的窗口。 2、如果文檔包含框架（frame 或 iframe 標(biāo)簽），瀏覽器會為 HTML 文檔創(chuàng)建一個 window 對象，并為每個框架創(chuàng)建一個額外的 window 對象。 3、沒有應(yīng)用于 window 對象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對象。,注意：（1）Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中，Window 對象是全局對象，所有的表達(dá)式都在當(dāng)前的環(huán)境中計(jì)算。也就是說，要引用當(dāng)前窗口根本不需要特殊的語法，可以把那個窗口的屬性作為全局變量來使用。例如，可以只寫 document，而不必寫 window.document。 同樣，可以把當(dāng)前窗口對象的方法當(dāng)作函數(shù)來使用，如只寫 alert()，而不必寫 Window.alert()。 （2）Window 對象的 window 屬性和 self 屬性引用的都是它自己。當(dāng)你想明確地引用當(dāng)前窗口，而不僅僅是隱式地引用它時，可以使用這兩個屬性。,（3）除了上面兩個屬性之外，parent 屬性、top 屬性以及 frame 數(shù)組都引用了與當(dāng)前 Window 對象相關(guān)的其他 Window 對象。 A、要引用窗口中的一個框架，可以使用如下語法： framei /當(dāng)前窗口的框架 self.framei /當(dāng)前窗口的框架 w.framei /窗口 w 的框架 B、要引用一個框架的父窗口（或父框架），可以使用下面的語法： parent /當(dāng)前窗口的父窗口 self.parent /當(dāng)前窗口的父窗口 w.parent /窗口 w 的父窗口 C、要從頂層窗口含有的任何一個框架中引用它，可以使用如下語法： top /當(dāng)前框架的頂層窗口 self.top /當(dāng)前框架的頂層窗口 f.top /框架 f 的頂層窗口,二、window對象的屬性,常用屬性使用： 1、defaultStatus ：設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文本。該屬性可讀可寫。 該文本會在頁面加載時被顯示。 語法：window.defaultStatus=sometext,示例： 效果：,2、document： （1）每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。 （2）Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。 （3）Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問。,3、history 屬性：獲取到history對象。 （1）History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。 （2）History 對象是 window 對象的一部分，可通過 window.history 屬性對其進(jìn)行訪問。,4、location 屬性：可以獲取location對象。 （1）Location 對象包含有關(guān)當(dāng)前 URL 的信息。 （2）Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。,5、self 屬性可返回對窗口自身的只讀引用。等價于 Window 屬性。 window.self 其實(shí)就等于 window 示例：判斷一個窗口是否在一個框架中，如果是，則跳出框架,6、top ：返回最頂層的先輩窗口。 該屬性返回隊(duì)一個頂級窗口的只讀引用。如果窗口本身就是一個頂級窗口，top 屬性存放對窗口自身的引用。如果窗口是一個框架，那么 top 屬性引用包含框架的頂層窗口。 示例：見上面的例子,作業(yè)： 1、設(shè)置窗口狀態(tài)欄中的文字為“我愛JavaScript”，將該段文字點(diǎn)擊按鈕后顯示到網(wǎng)頁中。 2、使用location屬性完成，在A.html頁面中單擊一個按鈕（不是超鏈接）后跳轉(zhuǎn)到B.html頁面。 3、定義一個三列的框架（還記得怎么寫嗎？），在中間框架中判斷當(dāng)前窗口是否是頂層窗口，如果是則提示“該窗口是頂層窗口”，否則提示“這是一個內(nèi)部框架”。在右邊窗口定義