韓順平javascript筆記(全套)_第1頁
韓順平javascript筆記(全套)_第2頁
韓順平javascript筆記(全套)_第3頁
韓順平javascript筆記(全套)_第4頁
韓順平javascript筆記(全套)_第5頁
已閱讀5頁，還剩68頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、韓順平2011javascript筆記（全）JavaScript1. javascript基本介紹：(1) javascript是實現網頁動態效果的基石，在web的開發中扮演重要的角色，被廣泛的應用到各個領域：網頁游戲地圖搜索股市信息查詢web聊天····(2) 在web開發中，js是必不可少的技術，同時js也是ajax/jquery/extjs等框架的基礎。(3) javascript是一種廣泛用于客戶端WEB開發的腳本語言，常用來給HTML網頁添加動態的功能，比如響應用戶的各種操作。2. 腳本語言：(1) 腳本語言往往不能獨立使用(單獨使用沒有什么意

2、義)，它一般與html/asp/jsp/php(2) 腳本語言有自己的變量，函數，控制語句。(3) 腳本語言是一種解釋性語言。3. JS一般在客戶端的瀏覽器執行。但也可以對服務器進行編程(非常少)4. JavaScript簡介JavaScript是一種解釋型的語言。Javascript并不是java的一種java腳本語言，除了名字都帶有java這個此外，兩者并沒有任何關系。Javascript的第一個版本出現在Netscape Navigator2瀏覽器中。人們最初給javascript起的名字是LiveScript。然而由于，當時java技術的正是如日中天，netscape公司給livesc

3、ript改名為javascript，以便是人們更加注意javascript。隨著javascript的發展，微軟公司決定在IE瀏覽器中加入微軟的品牌的javascript，即Jscript。腳本語言不僅只有javascript的一種，還有其他的腳本語言，如VBscript和perl語言(1) <script>標記：第一個簡單的javascript程序在網頁中添加<script></script>標簽中添加javascript代碼，在<script></script>之間的代碼塊，不是用于顯示html元素，而是需要瀏覽器進行處理的腳本代

4、碼，在<script>標記和對應的</script>標記之間包圍的代碼塊，稱為腳本塊。<script>標記可以放在html頁面的頭部，即<head></head>之間。<script>標記具有一些屬性，其中最重要的屬性就是type屬性。前面提到了javascript并不是唯一可用的腳本語言，可以的腳本語言需要按不同的方式進行處理。我們需要瀏覽器，在當前的頁面中我們所使用的是何種腳本語言。<script type=”text/javascript”><html><head><titl

5、e></title></head><body bgcolor="white"><script type="text/javascript">document.bgColor="red"</script></body></html><html><head><title>Example 1.1 hello world</title><script type="text/javascrip

6、t">document.write("hello world");</script></head><noscript>您的瀏覽器不支持javascript，請檢查瀏覽器的版本或者安全設置，謝謝</noscript><bodybgcolor></body></html>*<noscript></noscript>是一種防御性編碼，如果用戶的瀏覽器不支持javascript或者是設置過高的安全級別，那么就會顯示出相應的提示洗洗，避免了在用戶不知情下停止運行

7、或者的都錯誤結果。* (2) 在javascript中用分號表示一個語句的結束(3) Javascript是弱類型語言。什么叫做弱類型語言。在強類型語言中，使用變量之前，必須先聲明變量的類型，才能使用。而javascript則不需要這樣使用。5. 案例1：你的第一個程序，javascript高手都是從這里開始的，這個程序完成一個非常簡單功能，在網頁中彈出一個對話框，顯示“hello world！”<html><head><title>第一個javascript程序</title><script language="javascri

8、pt">window.alert("hello world");</script></head><body></body></html>(1) js的位置：js的位置可以隨意，但是一般用在<head></head>標簽(2) js必須用<script language=”javascript”>js代碼</script>如果沒有使用<script></script>包含起來的話，則瀏覽器則會視為普通文本6. 案例2：對前面的程序

9、，改成一個簡單加法運算程序<html><head><title>第一個javascript程序</title>/*js中的變量定義，變量都用var表示，不管實際類型怎樣*/var num1=456;var num2=226;var result=num1+num2;window.alert("結果是"+result);</head><body></body></html>u js的變量的類型是怎樣決定？(1) js的數據類型是弱數據類型語言。即在定義變量的時候，統一使用var表示

10、，甚至可以去掉var關鍵字(2) js中的數據類型是有js引擎來決定的。數據類型可以變化的。var name=”shopping”;/js引擎知道name是字符串name=22;/這時name自動變成了數varkk=2;/kk是整數vary y; /y是undefined類型7. javascript中的標識符標識符指的是javascript中定義的符號，例如，變量名，函數名，數組名等。標識符可以有任意順序的大小小字母、數字，下劃線和美元符號（$）組成，但是標識符不能以數字開頭，不能是javascript的保留關鍵字。8. javascript是嚴格區分大小寫的。javascript中每條語句

11、用分號“;”結束。9. 注釋：單行注釋/ 多行注釋 /* */10. javascript的基本語法-數據類型：Ø 基本數據類型：通過typeof關鍵字，可以看到數據的類型(1) Number(數值類型)² 整型常量（10進制8進制16進制）16進制以0x或者是0X開頭，例如：0x83;8進制必須以0開頭：² 實型常量12.32 193.98 5E7等² 特殊數值：NaN(not is a number)、Infinity、isNaN()、isFinite()(2) Boolean(布爾類型)true和false(3) String 字符串“this i

12、s a book”Ø 復合數據類型：Ø 特殊數據類型：(1) undefine的例子：<script language="javascript">var a;window.alert("a的數據類型"+typeof a);</script>(2) null的例子：<script language="javascript">var a=null;window.alert("a的數據類型"+typeof a);</script>11. javascri

13、pt的基本語法-定義變量、初始化、賦值：(1) 定義變量：var a;(2) 初始化變量：在定義變量的時候，就賦值：var a=45;(3) 給變量賦值：先定義變量：varnum;再賦值：num=3312. javascript的基本語法-數據類型轉換：(1) 自動轉換：javascript的數據類型是動態的請看一個案例：<script language="javascript">/ num先定義成Number數據類型varnum=22;num="hello word"window.alert("num的數據類型"+typ

14、eofnum);</script>(2) 強制轉換：請看案例：如何將字符串轉換成數字<script language="javascript">/ num先定義成String數據類型var s="123"varnum=parseInt(s);window.alert(typeofnum);</script>13. javascript中的運算符和java中的一樣的,但是有幾個注意點：(1) 案例一：b先轉成9，在比較<script language=”javascript”>var a=9;var b=9i

15、f(a=b)window.alert(“ok”);elsewindow.alert(“faile”);</script>(2) 在邏輯運算中，0、“”、false、null、undefined、NaN均表示false<script language=”javascript”>var a=0;if(a)window.alert(“ok”);elsewindow.alert(“faile”);</script>14. 函數：為完成某一個功能的代碼的集合。函數定義： function 函數名(參數列表)語句;/函數(方法)主體return 返回值;函數名位于關鍵字

16、function之后，為了讓代碼易于理解，函數名應具有一定的意義。注意點：函數沒有返回值類型。形參數不寫具體的類型。15. eval()可以將一個字符串當成一個腳本運行例如：<script language=”javascript” type=”text/javascript”>varstr=”window.alert(“ok”)”;eval(str);</script>16. escape()可以將中文或日文轉為ascii碼：unescape()反之。一般這個函數相互配合，防止在瀏覽器中出現亂碼：<script language=”javascript” typ

17、e=”text/javascript”>varstr=”江西”;var str2=escape(str);/轉回來var str3=unescape(str2);</script>17. 數組：(1) 為什么需要數組？將一組數據放在一起，組成集合。它由一對方括號包圍，數組的每個元素用逗號分隔，數組元素可以是任意類型的數據(2) 創建數組：var數組名=元素值，元素值，例如：var a=“shopping”,123,1.1,4.5,true(3) 二維數組：var a=1,2,3,“hello”,”world”,”jiangxi”=Js面向（基于）對象編程一、 澄清概念js中

18、基于對象= js面向對象js中沒有類class,但是它取了一個新的名字叫 原型對象 ，因此，類=原型對象二、 為什么需要對象問題提出：/*張老太養了兩只貓：一只名字叫小白，今年3歲，白色，還有一只叫小花，今年10歲，花色。請編寫一個程序，當用戶輸入小貓的名字時，就顯示該貓的名字，年齡，顏色。如果用戶輸入小貓的名字錯誤時，則顯示張老太沒有這只貓貓。*/傳統方法比較麻煩cat1_name="小白"var cat1_age=3;var cat1_color="白色"/解決辦法,把貓的屬性集中,創建一種新的數據類(原型對象/類)/用面向對象的方法來解決上面的問題

19、/這里就是一個類cat類function cat()/如果這樣用/cat()/函數var cat1 = new cat()/類/這時cat1就是一個對象(實例)="小白"cat1.age=3;cat1.color="白色"/從上面的代碼我們可以看出/1.js中的對象的屬性可以動態添加/2.屬性沒有限制window.alert(+cat1.age+cat1.color+cat.hobby);三、 類(原型對象)和對象的區別和聯系(1) 類是抽象的,概念,代表類事物(2) 對象是具體的,體表一個實體(3) 對象是以類(原型

20、對象)為模板創建起來的實體四、 創建對象的方式有五種(1) 工廠方法使用new Object創建對象并添加相關屬性.(2) 使用構造函數來定義類(原型對象).(3) 使用prototype(4) 構造函數及原型混合方式.(5) 動態原型方式.目前我們先講 使用構造函數來定義類(原型對象),然后再創建對象實例.基本語法:function 類名/原型對象()創建對象:var 對象名= new 類名()現在對對象特別說明:1. js 中一切都是對象function Person()window.alert(Person.constructor);var a = new Person();window

21、.alert(a.constructor);/a 對象實例的構造函數window.alert(typeof a);/a 的類型是什么var b=123;window.alert(b.constructor);window.alert(typeof b);var c="123"window.alert(c.constructor);window.alert(typeof c);/思考:如何判斷一個對象實例是不是Person類型?if(a instanceof Person)window.alert("a 是 Person1");if(a.construct

22、or=Person)window.alert("a 是 Person2"); 五、 補充說明(全局變量與局部變量的區別)/全局變量var abc=89;function test()/在函數里,如果不帶var,則表示使用全局的abc變量/如果帶var,則表示在test()中,定義了一個新的abc變量(局部變量)abc=900;test();window.alert(abc);訪問對象的屬性有兩種方法:(1) 普通方式對象名.屬性名(2) 動態訪問對象名“屬性名”function person()var p1= new person();="阿華&qu

23、ot;window.alert();/普通方式window.alert(p1"name");var val="na"+"me"window.alert(p1val);/動態方式對象引用問題的說明(圖)js還提供一種方式,主動釋放對象內存delete 對象名.屬性、;/這樣就會立即釋放 對象的這個屬性的空間六、 this問題的提出:function Person();var p1=new Person(); = "老韓"p1.age = 30;window.alert(+&q

24、uot; "+p1.age);var p2 = new Person();window.alert();/這里會輸出什么呢?(undefine);這里我們可以看到 window.alert()會輸出 undefined在實際編程中,我們可能有這樣的需求,當我們創建一個對象后,就希望該對象自動的擁有某些屬性比如:當我們創建一個Person對象后,就希望該對象自動擁有name和age屬性,這又怎么辦?使用this 來解決function Person()="abc"this.age=30;var p1 = new Pers

25、on();var p2 = new Person();window.alert(+" "+);可能有人會這樣去思考問題/*有些同學可能會這么想:function Person()var name="abc"/私有的,只能在內部使用var age=30;/私有的,只能在內部使用2="abc2"/2 表示name2這個屬性是公開的this.show=function ()/函數 這就是Person類里面的一個公開的方法window.alert("name"

26、+name+"age"+age);function show2()/這就是Person類里面的一個私有的方法,只能在類內部使用,/如要一定要使用,只能通過公開方法(特權方法)來調用私有方法來實現window.alert("show2()"+name+"age"+age);var p1=new Person();p1.show();/p1.show2();/這里會報錯/window.alert(+" "+p1.age);/錯誤的記住一句話:哪個對象實例調用this所有的函數,那么this就代表哪個對象實

27、例This注意事項: This不能放在類的外部使用,否則調用就變成window調用了對象-成員函數給一個對象添加(指定)函數的幾種方式1.通用常用方式:function Person()="abc"this.age=30;this.show=function ()window.alert("name:"++" "+"age:"+this.age);var p1 = new Person();p1.show();2.方式二:function Person()=&q

28、uot;abc"this.age=30;function show1()window.alert("name:"++" "+"age:"+this.age);window.alert(show1);/這個解釋下面的p2.show=show2的疑惑.這個輸出的是上面/的函數代碼.(構造函數)var p2 = new Person();p2.show=show1;/記住不要加括號p2.show();3.方式三:function Person()="abc"this.age=

29、30;var p3 = new Person();p3.show=function show2()window.alert("name:"++" "+"age:"+this.age);p3.show();加強思考題看它們會輸出什么?題1.function Person()="abc"this.age=30;function show1()window.alert("name:"+);var p2 = new Person();p2.show=

30、show1;show1();/注意思考會輸出什么?提示誰調用它.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();答案:nane:abc24.方式四:前幾種方法有一個問題，那就是以上對象獨占函數代碼，這樣如果對象過多，則會影

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

32、ar dog5 = dog4;window.alert(dog3=dog4);/ false 不是同一個地址window.alert(dog4=dog5);/ true對代碼原理說明圖：補講 = 號的作用1. 當 = 的兩邊 都是字符串的時候，則比較內容 相等否。2. 如 = 的兩邊 都是數字的時候，則數的大小是否相等。3. 如 = 的兩邊 是對象或對象中的函數屬性，則比較地址是否相等。六、加深對類和對象的認識如何給類添加方法（如何給某類型的所有對象添加方法）/創建Person實例/*function Person()var P1=new Person();P1.name = "sp

33、"window.alert(P1.name);*/初步體驗Object類,通過Object直接創建對象/Object超類/*var P1 = new Object();P1.name = "abc"window.alert(P1.name);window.alert(P1.constructor);*/*var i = new Number(10);/我們可以給類添加方法.Ntotype.add=function(a)return this+a;window.alert(i.add(10).add(30);var b= 90;window.ale

34、rt(b.add(40);*/*請思考給js的Array對象擴展一個find(val)方法,當一個Array對象調用該方法時候,如果能找到val則返回其下標,否則返回-1;*/體驗一下array;var arr = new Array(3)arr0 = "George"arr1 = "John"arr2 = "Thomas"/遍歷該數組for(var i=0;i<arr.length;i+)document.write('name:'+arri+"&nbsp;");document.w

35、rite("<br/>");/使用array的方法,我們顛倒順序arr.reverse();for(var i=0;i<arr.length;i+)document.write('name:'+arri+"&nbsp;");/現在我們一起看看如何給所有array對象添加一個方法find(val);Atotype.find=function(val)/遍歷數組 thisfor(var i=0;i<this.length;i+)if(val=thisi)return i;return -1;do

36、cument.write("下標為"+arr.find("Thomas");document.write("下標為"+arr.find("jime"); 閉包這個知識點，在講到封裝的時候再說！ 成員函數的細節1. 成員函數的參數可以是多個Function 函數名（參數.）2. 成員函數可以返回值,也可以沒有,但是有的話,最多只有一個Function 函數名(參數列表)語句;/函數主體return 返回值;3. js中不支持函數的重載,具體案例function test(a,b)window.alert("

37、hello");function test(a)window.alert(a);function test(a,b)window.alert(a+""+b);/test(23);window.test(3,"hello");結論:1.js在調用一個函數的時候,是根據函數名來調用的,如果有多個函數名相同,則認最后那一個函數. 2.直接定義一個函數或者變量,實際上這些函數和變量就是全局函數和全局變量(本質上他們是屬于window對象的) 面向對象綜合案例游戲的分析:1. 看看如何通過按鈕來控制mario的位置2. 設計相關的對象(Mario x,

38、y.)基本代碼給大家:要求:1. mario碰到邊界給一個提示 2. mario 可以去找另外一個物體u Js的內部類Javascript中本身有提供一些,可以直接使用的類, 這種類就是內部類, 主要有:Object/Array/Math/Boolean/String/RegExp/Date/Numberu 內部類的分類從使用的方式看，分為靜態類和動態類靜態類 使用 類名. 屬性/方法比如:Math.abs(-11)動態類 使用 var 對象=new 動態類() 對象. 屬性/方法 比如: /顯示當前的日期 var nowDate=new Date(); window.alert(nowDat

39、e.toLocaleDateString();u Math類幾個常用的方法:/*alert(Math.ceil(4.5); / 5alert(Math.floor(4.5); / 4alert(Math.round(4.77); / 5/返回1到100的隨機數alert(Math.round(Math.random()*100);u Date類u String類u Array類常用方法:myArrl.pop()/出棧myArrl.push()/入棧。Array類沒有下標越界問題 Boolean類 Number類1. 題答案： var b=23; b.toString(2);/ b.toStri

40、ng(16); js系統函數-*-最后總結：內部類和系統函數多查查javascript參考手冊 js的事件驅動程序1.原理2. 入門案例Js中事件主要分成4種案例1，監聽鼠標點擊事件，并能夠顯示鼠標點擊的x , y一個事件可以被多個函數監聽 如下：<html><head><title></title><script language="javascript" type="text/javascript"><!-function test4(e)window.alert("ok1&

41、quot;);function test5(e)window.alert("ok2");/-></script></head><body><!-如何通過修改style來改變style-><div id="div1" class="style1">div1</div><input type="Button" onclick="test4(this),test5(this)" value="黑色"

42、/></body></html>Window有三個事件onload 頁面一打開onbeforeunload 關閉頁面前onunload 關閉頁面后<body onload="test7()" onbeforeunload="test8()" onunload="test8()">oncontextmenu 不使用右鍵onselectstart 不允許選中拷貝<body oncontextmenu="return test9()" onselectstart="

43、;return test11()" onload="test7()" onbeforeunload="test8()" onunload="test10()"> Javascript-dom編程 Dom開山篇1. Dom編程 重要的作用是可以讓用戶對網頁元素進行交互操作。2. Dom編程 用來做一些網頁游戲3. Dom編程也是ajax的重要基礎Dom的原理圖：如何把html文檔，映射成dom樹：案例：烏龜抓雞。從dom編程的角度，就會把該html文檔，當做dom樹 如下圖： bom-Born(BrowserObject

44、Model)瀏覽器對象模型因為做瀏覽器的廠家很多，W3C定義了一個做瀏覽器的規范，規定： Window 對象1. confirm():<html><head><title></title><script language="javascript" type="text/javascript"><!-function test()var res = window.confirm("你確定刪除嗎？");if(res)window.alert("刪除");

45、elsewindow.alert("沒有刪除");/-></script></head><input type="button" value="刪除記錄" onclick="test()"/><body></body></html>2. setInterval() :該函數可以根據指定的時間，循環的執行某個函數，或者表達式。題一、 要求：每隔一秒鐘彈出 helloworld<script language="javascr

46、ipt" type="text/javascript"><!- function sayHello() window.alert("hello!"); setInterval("sayHello()",1000);/-></script>3. setTimeout() :在指定的毫秒數后調用函數或計算表達式（但是只調用一次）題一、 要求：在5秒鐘后彈出 helloworld function sayHello() window.alert("hello!"); setTime

47、out("sayHello()",5000);4. clearTimeout() 5. moveTo() 和moveBy() 案例： window.moveTo(100,100); /這個是相對于屏幕左上角0，0坐標 window.moveBy(100,100);/這個是相對當前窗口的左上角0，0坐標6.resizeBy() 和resizeTo()案例： window.resizeTo(100,100); /把窗口的大小調整到指定的寬度100和高度100。 window.resizeBy(100,100);/把窗口再增加100，1007. open()開一個新窗口windo

48、w.open("event1.html","_blank");8. opener父窗口和子窗口通信 hello 顯示打開一個新窗口父窗口：-代碼如下：<html><head><title></title><script language="javascript" type="text/javascript"><!- var newWindow; function test2() /newWindow其實就是指向新窗口的引用 newWindow=win

49、dow.open("newWindow.html","_blank"); function test3() newWindow.document.getElementById("myspan2").innerText=$("info2").value; function $(id) return document.getElementById(id); /-></script></head><body>我是父窗口<input type="button&quo

50、t; value="打開新窗口" onclick="test2()"/><input type="text" value="" id="info2"/><input type="button" value="發送給子窗口" onclick="test3()"/><br/><br/><span>接收的信息是：</span><span id="my

51、span">信息</span></body></html>子窗口：-代碼如下：<html><head><title></title><script language="javascript" type="text/javascript"><!- function test2() var msg=window.document.getElementById("info").value; opener.document.g

52、etElementById("myspan").innerText=msg; function test3() newWindow.document.getElementById("info2").value=$("info").value; function $(id) return document.getElementById(id); /-></script></head><body>我是新窗口<input type="text" value="&q

53、uot; id="info"/><input type="button" value="發送給父窗口" onclick="test2()"/><br/><br/><span>接收的信息是：</span><span id="myspan2">信息</span></body></html>1. 登錄窗口land.html<script language="javascri

54、pt"><!- function checkuser() if($("uname").value="shunping"&& $("pwd").value="123") return true; else $("uname").value="" $("pwd").value="" window.alert("用戶名或密碼錯誤"); return false; function $(

55、id) return document.getElementById(id); /-></script><form action="landok.html">u:<input type="text" id="uname"/><br/>p:<input type="password" id="pwd"/><br/><input type="submit" onclick=" retur

56、n checkuser()" value="登錄"/><br/>2. 登錄成功窗口landok.html<script language="javascript"><!- function tiao() window.open("landother.html","_self"); clearInterval(mytime); setTimeout("tiao()",5000); /setTimeout("javascript:window.

57、open("landother.html")",5000); function chengesec() $("myspan").innerText=parseInt($("myspan").innerText-1); var mytime=setInterval("chengesec()",1000); function $(id) return document.getElementById(id); /-></script>登錄成功<span id="myspan">5</span>秒后自

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論