1、JS筆記Javascript的基本介紹 JS是用于WEB開發(fā)的腳本語言： 腳本語言是什么： 腳本語言往往不能獨立使用，它和HTML/JSP/PHP/ASP.NET配合使用 腳本語言也有自己的變量，函數(shù)，控制語句（順序，分支，循環(huán)） 腳本語言實際上是解釋性語言（即在執(zhí)行時直接對源碼進行執(zhí)行），編譯性語言效率會更高一些 Java程序.java.classjvm ,js瀏覽器（js引擎來解釋執(zhí)行） Js主要在客戶端（瀏覽器）執(zhí)行 因為js是由瀏覽器來執(zhí)行的，因此這里有個問題，不同類型的瀏覽器可能對js的支持不一樣。 開發(fā)工具的選擇：記事本 myeclipse function test()windo

2、w.alert(hello world!); New Document 案例：1需求：打開網(wǎng)頁后，顯示hello ！ window.alert(hello);問題： js的位置可以隨意放 js必須使用 代碼 在一個html文件中（JSP/PHP/ASP.NET）可以出現(xiàn)多對（script）片段，瀏覽器會按照先后順序依次執(zhí)行案例2: 如何定義變量： 如何運算： New Document /js中變量的定義（js中變量用var表示，無論什么類型） var num1=1; var num2=60; var result=num1+num2;window.alert(結(jié)果是+result); /ale

3、rt函數(shù) window.alert表示彈出一個對話框 Js的變量類型是怎樣決定的1) Js是弱數(shù)據(jù)類型語言，即：在定義變量時候，統(tǒng)一使用var表示，甚至可以去掉var這個關(guān)鍵字2) Js中的變量的數(shù)據(jù)是由js引擎決定的var name=”shunping”; /name是字符串var kk=2 /kk是數(shù)字name=234; /這時name自動變成數(shù) Js的命名規(guī)范（函數(shù)/變量）：1) 使用大小寫字母，數(shù)字，$可以命名2) 不能以數(shù)字打頭3) 不能使用js保留字和關(guān)鍵字（即java里的關(guān)鍵字）4) 區(qū)分大小寫5) 單行注釋：/6) 多行注釋：/*.*/ Js的數(shù)據(jù)類型： 基本數(shù)據(jù)類型3種1數(shù)值

4、類型特殊數(shù)值：1)NaN 不是數(shù)字var a=”abc”window.alert(parseInt(a);2） Infinity 無窮大window.alert(6/0);3)isNaN() 如果是數(shù)字的話返回false 4)isFinite() 如果是無窮大返回false2.字符串類型可以用雙引號 也可以用單引號 ，單個字符也可以看成字符串，有特殊字符用轉(zhuǎn)義 window.alert(asadar); 輸出asada”r 3.布爾類型true false通過typeof可以看到變量的具體數(shù)據(jù)類型 舉例：var num1=123;var num2=abcd;window.alert(num1是

5、+typeof num1); window.alert(num2是+typeof num2);var num1=false /體現(xiàn)js是動態(tài)語言：即數(shù)據(jù)類型可以任意變化window.alert(num1是+typeof num1); /體現(xiàn)js是動態(tài)語言 復合數(shù)據(jù)類型 數(shù)組 對象 特殊數(shù)據(jù)類型 Null 即：var a=null Undefine即：如下代碼window.alert(tt ); /直接報錯：未定義 var tt; /不報錯 未給值 輸出Undefine Js定義變量，初始化，賦值1)定義變量： 即var a2)初始化： 即在定義變量時就給值3)賦值： 即：比如你先定義一個變量

6、var tt ，然后再給值：tt=780； js數(shù)據(jù)類型轉(zhuǎn)換：1)自動轉(zhuǎn)換例子：var a=123; /a是數(shù)值 a=”hello” /a的類型是string 2)強制轉(zhuǎn)換例子：字符串轉(zhuǎn)換成數(shù)字var a=123” ; a=parseInt(a); /使用系統(tǒng)函數(shù)強制轉(zhuǎn)換var b=90 ; /b是numberb=b+”, /b就是string 運算符+ * / %(取摸：即兩個數(shù)相除的余數(shù)) 強調(diào)：取模主要用于整數(shù)之間取模例子：編寫一個程序，判斷兩個數(shù)是否能夠整除 var a=90;var b=8;if(a%b=0)window.alert(能整除);elsewindow.alert(不能整

7、除); +， 運算符a+ - a=a+1 b- = b=b-1 +a 表示先把自己加1再賦值 -a 表示先把自己減1再賦值例子：var a=56;var b=+a; window.alert(b); b=57window.alert(a); a=57 -運算符var a=56;var b=-a; window.alert(b); b=55window.alert(a); a=55mpt(); prompt() 方法用于顯示可提示用戶進行輸入的對話框。document.write() :向瀏覽器輸出內(nèi)容var num1=mpt(請輸入一個數(shù)); /輸入1.

8、1var num2=mpt(請再輸入一個數(shù)); /輸入1.1document.writeln(這兩個數(shù)的和是+(num1+num2);/此時都當成字符串考慮，輸出1.11.1document.writeln(這兩個數(shù)的和是+(parseFloat(num1)+parseFloat(num2);/此時輸出2.2這個案例中不寫parseFloat也是可以的邏輯運算符：（1） 與&If（邏輯表達式1&邏輯表達式2）如果 邏輯表達式1為true 則JS引擎會繼續(xù)執(zhí)行邏輯表達式2如果 邏輯表達式1為false則不會執(zhí)行邏輯表達式2（2） 或 |在JS中，|究竟返回什么值，這是一個非常

9、重要的知識點結(jié)論：將返回第一個不為false的值（對象亦可），或者是返回最后一個值（如果全部都是false的話）,返回的結(jié)果不一定是布爾值案例1： var a=true;var b=false;window.alert(a|b);輸出true案例2：var a=4;var b=90;var c=a|b;window.alert(c);輸出：4案例3：var a=0;var b=90;var c=a|b;window.alert(c);輸出：90案例4：var a=0;var b=;var d=false;var c=a|b|d;window.alert(c);輸出：false 如果是var c

10、=a|d|b;返回空串案例5：var a=0;var b=;var c=false;var d=new Object();var k=a|b|c|d;window.alert(k);輸出類型是object（3）非！特別說明：在邏輯運算中：0，”，false，null，undefined，NaN均表示false 除了這些均表示真的。var a=0;if(!a)window.alert(“OK”);輸出OKJS的位運算和移位運算，規(guī)范和java一致var a=42; 結(jié)果是1var a=-42; 結(jié)果是-1JS的控制語句：1） 順序控制對變成而言，不控制其流程就是順序執(zhí)行。2） 分支控制2.1單分

11、支 If(條件表達式)語句；2.2 雙分支If(條件表達式)else 2.3多分支If(條件表達式1)else if。（條件表達式2）else/else可有可無案例：如果是男同志，上男廁所，女同志上女廁所，否則不上廁所var sex= mpt(請輸入性別);if(sex=男)window.alert(上男廁所);else if(sex=女)window.alert(上女廁所);elsewindow.alert(不上廁所);注意：JS中字符串比較也要用= 一旦找到了一個滿足條件的入口，執(zhí)行完畢后，就直接結(jié)束整個多分支switch語句：基本語法：switch(表達式)/執(zhí)行語句

12、；case 常量1：break； /跳出整個switch。default:語句；break;結(jié)論：1）JS的switch語句的常量數(shù)據(jù)類型可以是JS支持的任何類型（對象和數(shù)組除外）。2） case后面的值數(shù)據(jù)類型可以是任意的。3） break作用是跳出整個switch4） 如果沒有匹配的則執(zhí)行defaultfor循環(huán)while循環(huán)do while循環(huán)案例：求1！+2！+3！+.+n!var n=mpt(請輸入一個數(shù));sum=0;temp=1;for(var i=1;i=n;i+)for(var j=1;j=i;j+)temp=temp*j;sum=sum+temp;tem

13、p=1;document.writeln(sum);在ie8中，我們可以通過工具來對JS代碼進行調(diào)試，尤其頁面比較復雜的情況下非常有用。在ie8中，通過開發(fā)人員工具，就可以進行JS的調(diào)試工作。案例：打印出半個金字塔，整個金字塔，空心金字塔，菱形，空心菱形的代碼見 金字塔.html文件函數(shù)的學習：函數(shù)的基本概念：為完成某一個功能的代碼（語句，指令）集合基本語法：Function 函數(shù)名（參數(shù)列表） 語句；/函數(shù)（方法）主體return 返回值； 說明：1.參數(shù)列表：表示函數(shù)的輸入 特別強調(diào)：參數(shù)名前不要帶var2.函數(shù)主體：表示為了實現(xiàn)某一功能代碼塊3函數(shù)可以有返回值也可以沒有入門案例：l把上面

14、的函數(shù)單獨提出，然后在需要的地方引入案例：function.html文件/引入函數(shù)的JS文件function.js文件/自定義函數(shù)function jiSuan(num1,num2,operator)var res=0;if(operator=+)res=num1+num2;else if(operator=-)res=num1-num2;else if(operator=*)res=num1*num2;elseres=num1/num2;return res;lll 對中文進行編碼escape 把編碼再轉(zhuǎn)換成中文unescapewindow.moveTo(200,200);/指定窗口的位置w

15、indow.resizeTo(300,400);/重置窗口的大小l案例一：Js文件：function test(val)window.alert(你得輸入是+val);return 90;html調(diào)用：test(hello,world); /傳統(tǒng)的調(diào)用方式/window.alert(test);/把函數(shù)全部打出來var myvar=test;window.alert(myvar);myvar(中國北京);輸出：函數(shù)的調(diào)用方式1.普通調(diào)用函數(shù)名（實際參數(shù)）；2.通過指向函數(shù)的變量去調(diào)用var myvar=函數(shù)名;rmyvar（實際參數(shù)）3.關(guān)于接收函數(shù)返回值得討論var myvar=test(a

16、bc); /輸出abcwindow.alert(myvar); /輸出90，如果函數(shù)沒有返回值則返回undefined，如果有返回值，則返回什么就是什么遞歸：Js文件：調(diào)用：abc（5）；輸出：3 3 4特別強調(diào)：JS的函數(shù)天然支持可變參數(shù),函數(shù)不可以重名案例：/編寫一個函數(shù)，可以接收任意多個數(shù)，并計算他們的和function abc2()/在JS中有一個 arguments可以訪問所有傳入的值/window.alert(arguments.length);/得到參數(shù)的個數(shù)/遍歷所有的參數(shù)var sum=0;for(var i=0;iarguments.length;i+)sum=argume

17、ntsi+sum;window.alert(sum);調(diào)用：abc2(12,12,12,12); 結(jié)果是48abc2(); 結(jié)果是0數(shù)組：數(shù)組，這種數(shù)據(jù)類型（引用類型/復雜類型/復合類型），數(shù)組的基本概念：用于存放一組數(shù)據(jù)。特別強調(diào)：JS中的數(shù)組，可以存放各種數(shù)據(jù)類型（數(shù)值/字符串）快速入門案例：var weights=3,5,1,3.4,2,50;var allweights=0;/數(shù)組的遍歷for(var i=0;iweights.length;i+)allweights+=weightsi;document.writeln(總體重是+allweights);var avgweight=a

18、llweights/weights.length;/如果你想知道數(shù)據(jù)類型是什么/window.alert(avgweight.constructor);/window.alert( typeof avgweight);document.writeln(平均體重是+avgweight.toFixed(2);/保留兩位小數(shù)數(shù)組的細節(jié)基本語法：var 數(shù)組名=元素值，元素值元素的值可以是任意類型var an=1.23,”hello”,true,2;數(shù)組在內(nèi)存中的存在形式：內(nèi)存數(shù)據(jù)調(diào)用案例：輸出：900內(nèi)存數(shù)據(jù)分析:JS中的數(shù)組是引用傳遞案例輸出：35 90 900內(nèi)存數(shù)據(jù)調(diào)用分析：JS的數(shù)組可以動態(tài)

19、增長思考2，動態(tài)增長的 輸出56 數(shù)組的長度變?yōu)?數(shù)組的引用基本用法：數(shù)組的名稱下標;比如：var a=23,”hello”,4.5我們訪問a2則輸出4.5如果我們訪問a3則輸出undefined結(jié)論：不能訪問不存在的元素數(shù)組的下標是從0開始編號的對字符串進行分割，形成一個字符串數(shù)組 用split函數(shù)var str=abc 姜爽 hello world;str=str.split( ,2); /拆分字符串，可以得到一個數(shù)組，取前兩個元素，以空格進行分割，如果沒有參數(shù)2，則全部輸出for(var i=0;i0JS引擎（瀏覽器的部分）有一張表 JS提供一種方式主動釋放內(nèi)存delete a.age;

20、/用于刪除屬性 指向同一個地方，一個刪了b就訪問不到了這樣就會立即釋放對象的屬性空間this講解：問題的提出：function Person();var p1=new Person(); = 老韓;p1.age = 30;window.alert(+ +p1.age);var p2 = new Person();window.alert();這里我們可以看到 window.alert()會輸出 undefined在實際編程中,我們可能有這樣的需求,當我們創(chuàng)建一個對象后,就希望該對象自動的擁有某些屬性比如:當我們創(chuàng)建一個Person對象后,

21、就希望該對象自動擁有name和age屬性,這又怎么辦?使用this 來解決function Person()=abc;this.age=30;var p1 = new Person();var p2 = new Person();window.alert(+ +);可能有人會這樣去思考問題/*有些同學可能會這么想:function Person()var name=abc;/如果這樣去使用name這個屬性是私有的var age=30;2=abc2;/2 表示name2這個屬性是公開的var p1=new Pers

22、on();window.alert(+ +p1.age);/錯誤這樣使用會報 undefined，私有的外部訪問不到function Person()var name=abc;/私有的,只能在內(nèi)部使用var age=30;/私有的,只能在內(nèi)部使用2=abc2;/2 表示name2這個屬性是公開的this.show=function ()/函數(shù) 這就是Person類里面的一個公開的方法window.alert(name+name+age+age);function show2()/這就是Person類里面的一個私有的方法,只能在類內(nèi)部使用,/如要

23、一定要使用,只能通過公開方法(特權(quán)方法)來調(diào)用私有方法來實現(xiàn)window.alert(show2()+name+age+age);var p1=new Person();p1.show();/p1.show2();/這里會報錯/window.alert(+ +p1.age);/錯誤的記住一句話:哪個對象實例調(diào)用this所有的函數(shù),那么this就代表哪個對象實例function test1()alert(this.v);var v=90;window.test1();/等價于test1() window調(diào)用test1()，所以this就代表window輸出90this注意事項: t

24、his不能放在類的外部使用,否則調(diào)用就變成window調(diào)用了對象-成員函數(shù)（方法）比如我們希望對象不但有屬性，還需要他有行為，行為在程序中要靠函數(shù)來體現(xiàn)。function Person(name,age)/使用傳遞的實際參數(shù)去初始化屬性=name;this.age=age;/輸出自己的名字,這里this.show就是一個公開的函數(shù)，函數(shù)名字是showthis.show=function()document.write(名字+);/添加計算函數(shù)，可以計算從1+.+100的結(jié)果this.jisuan=function(n)var res=0;for(var i=

25、1;i=n;i+)res+=i;return res;var p1=new Person(宋江,90);p1.show();document.write(+p1.jisuan(100);輸出：名字宋江5050給一個對象添加(指定)函數(shù)的幾種方式1. 通用常用方式:上面的函數(shù)，知道這種通用的方式即可2.方式二:function Person()=abc;this.age=30;function show1()window.alert(hello+);var p2 = new Person();p2.abc=show1;/記住不要加括號p2.abc(); /輸出

26、helloabc window.alert（p2.abc）；會把函數(shù)打出來3.方式三:function Person()=abc;this.age=30;var p3 = new Person();p3.show=function show2()window.alert(hello+);p3.show(); /輸出helloabc題1.function Person()=abc;this.age=30;function show1()window.alert(name:+);/是window調(diào)用的name就是window的

27、namevar p2 = new Person();p2.show=show1;show1();/注意思考會輸出什么?提示誰調(diào)用它.this就代表誰答案:name:空白(undefined)題2.function Person()=abc;this.age=30;var name=abc2;function show1()window.alert(name:+);var p2 = new Person();p2.show=show1;show1();答案:name:abc24.方式四:前幾種方法有一個問題，那就是以上對象獨占函數(shù)代碼，這樣如果對象過多，則會影

28、響效率，js設(shè)計者，給我們提供了別一個方法，原型法：這樣多個對象可以共享函數(shù)代碼，代碼如下：function Dog()/使用prototype去綁定一個函數(shù)給shoutDtotype.shout=function()window.alert(小狗);var dog1=new Dog();dog1.shout();var dog2 = new Dog();dog2.shout();/okwindow.alert(dog1.shout=dog2.shout);/返回true，說明是共享的函數(shù)/擴展var dog3 = new Dog();var dog4 = new Dog();va

29、r dog5 = dog4;window.alert(dog3=dog4);/ false 不是同一個對象window.alert(dog4=dog5);/ true對代碼原理說明圖：補講 = 號的作用1. 當 = 的兩邊 都是字符串的時候，則比較內(nèi)容 相等否。2. 如 = 的兩邊 都是數(shù)字的時候，則數(shù)的大小是否相等。3. 如 = 的兩邊 是對象或?qū)ο笾械暮瘮?shù)屬性，則比較地址是否相等。加深對類和對象的認識如何給類添加方法（如何給某類型的所有對象添加方法）案例1：/初步體驗Object類,通過Object直接創(chuàng)建對象var p1 = new Object(); = abc;wind

30、ow.alert();window.alert(p1.constructor);案例2：var i = new Number(10);/我們可以給類添加方法.Ntotype.add=function(a)return this+a;window.alert(i.add(10).add(30);var b= 90;window.alert(b.add(40); /輸出50 130請思考給js的Array對象擴展一個find(val)方法,當一個Array對象調(diào)用該方法時候,如果能找到val則返回其下標,否則返回-1;案例：/體驗一下Arrayvar arr1=ne

31、w Array();arr10=s1;arr11=s2;arr12=s3;/遍歷數(shù)組for(var i=0;iarr1.length;i+)document.write(arr1i+ );/使用Array提供的方法來顛倒數(shù)據(jù)arr1.reverse();document.write();for(var i=0;iarr1.length;i+)document.write(arr1i+ );輸出：s1 s2 s3 s3 s2 s1/現(xiàn)在我們一起看看如何給所有Array對象添加一個方法find(val)Atotype.find=function(val)/開始遍歷數(shù)

32、組thisfor(var i=0;ithis.length;i+)if(thisi=val)return i;return -1;document.write(下標是+ arr1.find(s2) + );輸出：下標1閉包這個知識點，在講到封裝的時候再說！成員函數(shù)的細節(jié)1成員函數(shù)的參數(shù)可以是多個function 函數(shù)名（參數(shù).）2成員函數(shù)可以返回值,也可以沒有,但是有的話,最多只有一個function 函數(shù)名(參數(shù)列表)語句;/函數(shù)主體return 返回值;3.js中不支持函數(shù)的重載,具體案例function test(a,b)window.alert(hello);function

33、test(a)window.alert(a);function test(a,b)window.alert(a+b);test(23); /輸出23 undefinedwindow.test(3,hello);/輸出3 hello結(jié)論:1.js在調(diào)用一個函數(shù)的時候,是根據(jù)函數(shù)名來調(diào)用的,如果有多個函數(shù)名相同,則認最后那一個函數(shù). 2.直接定義一個函數(shù)或者變量,實際上這些函數(shù)和變量就是全局函數(shù)和全局變量(本質(zhì)上他們是屬于window對象的) 面向?qū)ο缶C合案例游戲的分析:1. 看看如何通過按鈕來控制mario的位置2. 設(shè)計相關(guān)的對象(Mario x, y.)基本代碼給大家:要求:1. mario

34、碰到邊界給一個提示 2. mario 可以去找另外一個物體構(gòu)造函數(shù)：基本用法function 類名（參數(shù)列表）屬性=參數(shù)值；案例：function Person(name,age)=name;this.age=age;/創(chuàng)建Person對象的時候，就可以直接給名字,年齡var p1=new Person(順平,12);特別說明：在給一個對象初始化一個屬性值的時候，也可以指定函數(shù)屬性案例：function jisuan(num1,num2,oper)if(oper=+)return num1+num2;else if(oper=-)return num1-num2;else i

35、f(oper=*)return num1*num2;elsereturn num1/num2;function Person(name,age,fun)=name;this.age=age;this.myfun=fun;var p1=new Person(abc,9,jisuan);window.alert(p1.myfun(89,90,+); /輸出179創(chuàng)建對象的另一種形式：如果一個對象比較簡單，我們可以直接創(chuàng)建?？梢灾付ㄆ胀▽傩院秃瘮?shù)屬性。var dog=name:小狗,age:8,fun1:function()window.alert(hello);,fun2:fun

36、ction()window.alert(world);window.alert(+dog.age);window.alert(dog.constructor);dog.fun1();dog.fun2();有時我們會看到這樣一種調(diào)用方法：函數(shù)名.call（對象實例） 這樣調(diào)用,該函數(shù)的this就是這個對象實例。小案例：var dog=name:hello;function test()window.alert();test.call(dog);/=dog.test; 輸出：hellofor .in的用法var dog=name:小明,fun1:function(

37、)window.alert(hello);/循環(huán)列出 dog對象的所有屬性和方法 對象名屬性名for(var key in dog)window.alert(key+:+dogkey); / key屬性 dogkey屬性值/遍歷window對象的所有屬性for(var key in window)document.write(key+:+windowkey+);JS面向?qū)ο缶幊痰娜筇匦?封裝 js提供有以下幾種控制方法和屬性的訪問權(quán)限:1)公開級別:對外公開2)私有級別:類本身可以訪問,不對外公開案例：function Person(name,age,sal)=name;/公開的屬性var age=age;/私有的屬性var sal=sal;/私有的屬性/在類中如何定義公開方法（特權(quán)方法），私有方法（內(nèi)部方法）/如果我們希望操作私有的屬性則可用公開方法去實現(xiàn)this.show=function()window.alert(age+ +sal );/私有方法,可以訪問對象的屬性function show2()window.alert(a