JavaScript完全教程.pptVIP

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