DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript學習總結【2】、JS基礎
JavaScript學習總結【2】、JS基礎
編輯:JavaScript基礎知識     

1、JS 命名規范

  命名規范是很有必要的,可增強代碼的可讀性,一眼就能看懂要表達的意思,規范就是符合規則,使代碼有利於後期維護,也能很大程度的提高開發效率。一個正常的網站有很多 JS 代碼,如果在編寫的過程中,不遵循某種規則,那麼寫到後面自己都看不懂自己寫的什麼,這是很麻煩的一件事,所以要在平時的練習過程中,養成良好的編寫代碼的習慣。

  一般都采用匈牙利命名法或者駝峰命名法。

  匈牙利命名法的原則:變量名=屬性+類型+對象描述。他的關鍵是:以一個或多個小寫字母作為前綴,前綴之後是一個或多個首字母大寫的單詞組合,該單詞指明變量的用途。

  駝峰命名法的原則:第一個單詞以小寫字母開始,之後每一個單詞的首字母大寫。例如:myFirstName、myLastName,這樣的變量名看上去就像駝峰一樣此起彼伏,因此得名。駝峰法的關鍵是:除第一個單詞外,其他單詞首字母大小,混合使用大小寫字母來構成變量名和函數名,還可以使用下劃線來形成邏輯斷點,這樣更能增強代碼的可讀性。

  使用什麼樣的命名規范,還要要看個人喜好,或者公司規定。注意:在命名時不能使用保留字和太長不容易記憶的名稱,要避免使用兩個相似的變量名。下面是一些常用的匈牙利命名法的前綴:

類型 前綴 類型 實例 數組 a Array aItems(項目) 字符串 s String sUserName 函數 fn Function fnHandler(處理程序) 對象 o Object oDiv 整數 i Integer iItemCount(項目計數) 浮點數 f Float fPrice(價格) 布爾值 b Boolean bIsComplete(完成) 正則表達式 re RegExp reEmailCheck(郵件檢測)

 

2、注釋很重要

  JS中單行注釋用“ // 注釋內容” 標識,多行注釋使用“  /* 注釋內容 */  “標識。注釋的作用是提高代碼的可讀性,不僅自己以後用著方便,也有助於別人閱讀和理解你所編寫的JS代碼,注釋中的內容不會在網頁中顯示。為了方便閱讀,注釋一般放在需要解釋的語句結尾處或者周圍。在學習的過程中,我們更要養成書寫注釋的良好習慣,有利於我們對於代碼的理解,或者標記出當時比較模糊的概念,回頭再做深入的定向學習,更牢固的掌握該知識點。

 

3、JS 語句和符號

  JS 語句是發送給浏覽器的命令。這些命令的作用是告訴浏覽器要做的事情。JS 的執行規則是自上往下以行為單位的,一般情況下,每一行就是一個語句。比如:var a = 1+2;  這條語句先用 var 關鍵詞,聲明了變量 a,再將 1+2 的運算結果賦值給變量 a。這裡需要注意 = 符號,在 JS 中並不是等號的意思,而是賦值。再比如:alert('hello');  這是一條 JS 語句,一行的結束被認定為語句的結束,通常在結尾加上一個 ; 來表示語句的結束,如果有多行 JS 語句,每句結束都有 ;,則按順序執行語句。注意:JS 中的代碼和符號都必須在英文狀態下輸入,雖然 ; 也可以不寫,但難免會遇到一些錯誤,浏覽器會判定前一句和後一句是可以連在一起解釋的,這樣就導致了一些意想不到的錯誤。我們要養成良好的編程習慣,記得在必須加分號的地方一定不要忘記加上。

  JS 對大小敏感,在編寫JS代碼時,需要留意是否關閉了大小寫切換鍵。

 

4、JS 判斷語句和 for 循環

  if 判斷語句和 for 循環在 JS 中使用非常頻繁。

  通常在寫代碼時,總是需要為不同的決定來執行不同的動作,在代碼中就可以使用 if 條件語句來完成該任務。

  在 JS 中,可以使用以下條件語句:

  (1)、if 語句:只有當指定條件為 true 時,也就是條件成立時執行的代碼。

  (2)、if... else 語句:當條件成立時執行 if 後代碼,條件不成立(為 false )時執行 else 後的代碼。

  (3)、if... else if.... else 語句:使用該語句根據判斷條件來選擇多個代碼塊之一來執行。

  實例:根據不同的時間,提示不同的問候,當時間小於12點,問候早上好,當時間大於或等於12點小於18點,問候下午好,否則都問候晚上好。

 <script>
 var d = new Date();
 var time = d.getHours();
 if (time < 12){
     alert('早上好');
 }
 else if (time >= 12 && time < 18){
     alert('下午好');
 }
 else{
     alert('晚上好');
 }
 </script>

 

  如果希望一遍又一遍的運行相同的代碼,並且每次的值都不同,那麼使用循環是很方便的,當有一組元素的時候,就可以使用 for 循環為這一組元素添加事件。

  for循環的語法:

 for (語句 1; 語句 2; 語句 3){
   被執行的代碼塊
 }
 
 語句1用於初始化循環中所有的變量。通常為:var i=0;
 語句2用於設置初始變量的條件。通常為:i<object.length;
 語句3用於增加初始變量的值。通常為:i++ 也可以為:i--

 

  實例:循環遍歷數組中的數據,依次輸出:

 //在不使用循環時,我們可以這樣輸出數組中的值:
 var cars=["路虎","寶馬","奔馳","奧迪","別克","大眾"];
 document.write(cars[0] + "<br>"); 
 document.write(cars[1] + "<br>"); 
 document.write(cars[2] + "<br>"); 
 document.write(cars[3] + "<br>"); 
 document.write(cars[4] + "<br>"); 
 document.write(cars[5] + "<br>");
 
 //使用for循環可以很簡潔的完成輸出:
 for (var i=0, i<cars.length; i++){
     document.write(cars[i] + "<br>");
 }

  document.write() 可用於直接向 HTML 輸出流寫內容,可以在平時做練習時用於向頁面輸出內容測試代碼,這裡需要注意 document.write() 一定要向文檔輸出寫內容,如果文檔已經加載完成後,再來執行該語句,則整個頁面將會被覆蓋。如果 document.write() 放在事件中,則會先清空頁面上所有的內容,然後再寫入內容。

 

5、JS 一些基本概念

  (1)、標識符標識符是 JS 中定義的符號,可以由任意順序的大小寫字母、數字、下劃線、和美元符號( $ )組成。標識符就是識別一個具體對象的名稱,最常見的標識符就是變量名和函數名,JS對大小寫敏感,所以 a 和 A 是兩個不同的標識符。標識符不能以數字開頭,也不能是JS中的保留關鍵字,具體可百度參考資料。另外還有三個雖然不是保留字,但是因為他們具有特別的含義,也不能用作標識符:Infinity、NaN、undefined。

  (2)、代碼塊:代碼塊其實不難理解,先來解釋以下 JS 代碼,JS 代碼就是 JS 語句的序列,浏覽器依據編寫 JS 語句的順序依次逐行的執行每個語句,而代碼塊則是 JS 語句的組合,並且包含在花括號內,代碼塊的作用是告訴浏覽器這些代碼一起執行語句序列。JS 函數就是將語句組合在塊中的典型例子。

  (3)、變量:從字面上來理解,變量就是可以改變的量,但是從編程角度講,變量是用於存儲某種/某些數值信息的“容器”,簡單說就是對“值”的引用,使用變量等同於引用一個值,每一個變量都有一個變量名。比如:var x = 1; 先聲明一個變量 x,x 就是變量名,然後用 = 賦值,也就是將 1 賦值給 x,以後,在引用 x 的時候,就會得到值 1。在 JS 中創建一個變量通常被稱為“聲明”一個變量,var 就是用來聲明變量的。變量在聲明之後是空的,他的值為undefined(未定義),需要給他賦值後使用,= 就是建立這種引用關系。上面的代碼可以看作為:var x;x=1;這樣寫是先聲明一個變量,再給其賦值,上面的代碼則在聲明的同時就進行了賦值。在一條語句中,可以聲明多個變量,並使用逗號隔開。注意:在給變量命名的時候不能使用 JS 關鍵詞和 JS 保留詞。

  (4)、常量:有變量就會有常量,變量可以理解為變化的量,而常量就是不變的量。其實在 JS 中並沒有常量這個概念,所謂的常量,只不過是提前賦值的變量而已。常量和變量都屬於變量,只不過常量是賦過值後就不能再改變的變量,而普通的變量可以再次進行賦值操作。為了與變量有所區分,增強代碼的可讀性,所以在聲明一個常量時,一般采用常量名全部大寫,若有多個單詞,可用下劃線隔開。

  (5)、字面量:所謂的字面量,其實是對象的表示形式,或者說是創建方式,他不是一種值,而是一種表示值的記法,簡單說字面量就是如何表達一個對象的值,在給變量賦值時,賦值運算符後面的都可以認為是字面量。字面量也叫直接量,一個字面量,也可以被認為是一個常量,如 100。這裡需要注意:變量是一個名稱,而字面量是一個值。字面量可分為:數字字面量、字符串字面量和表達式字面量。數字字面量,可以是整數或者是小數,比如:var a=10; var b=3.14; 10 和 3.14 就是數字字面量。字符串字面量,使用引號包含起來的一系列字符,比如:var str='小明'; '小明'就是字符串字面量。表達式字面量又可分為:數組字面量、對象字面量、函數字面量。數組字面量,每個值用逗號隔開,比如:var arr = [1,2,3,4,5,6];  [1,2,3,4,5,6] 就是數組字面量。對象字面量是一個鍵值對的組合,每個鍵值對之間用逗號分割,並包含在花括號內,比如:var obj = {a:12, b:5, c:'21'}, {a:12, b:5, c:'21'} 就是對象字面量。函數字面量,function myFunction(a, b) { return a * b;} 函數字面量是用關鍵字 function 後加可選的函數名、用圓括號括起來的參數和用花括號括起來的執行語句構成。函數字面量是一個表達式,而不是語句。上面的例子可寫為:var myFunction = function (a, b)  { return a * b;} ,這樣就有便於理解了,也可以說函數的字面量就是一個匿名函數,他的指向是歸誰使用。

  (6)、變量的作用域:變量分為:全局變量和局部變量。全局變量簡單說就是在函數外聲明的變量,任何地方都可以使用,而局部變量就是在函數內部聲明的變量,只能在聲明他的函數內部使用。這就是變量的作用域,通俗理解就是他的作用范圍。JS 變量的生命期從他們被聲明的時候開始,全局變量會在頁面被關閉之後刪除,局部變量則在函數被運行以後刪除。

  (7)、表達式:表達式與數學中的定義相似,是指具有一定的值、用運算符把常量和變量連接起來的代數計算式,一個表達式可以包含常量或變量。比如:var a=a+1;  a 是變量名稱,a+1 就是表達式。在生活中”再見“表達方式有很多種,比如:英語(goodbey),網絡語(886),肢體語言(擺擺手)等。JS 中的表達式無處不在,可以表達以下幾種內容:字符串的連接,被稱為串表達式,var str = "I" + "love" + "you";  還有這種形式:var str = "hello"; var str1 = str + "World";  串表達式值為字符串。數值表達式,var num = 10 + 2.5;  也有如下形式:var num = 10 + 2.5; var num1 = num + 10 * 2.5;  數值表達式值為數值。還是有一種是布爾表達式,var num = 2; alert(num == 2); 返回 ture,alert(num > 10); 返回 false。布爾表達式值為 true 或 false。

  (8)、函數:一看到函數,很多人可能就頭疼,但是編程中函數還是很好理解的,是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。簡單說就是完成某個特定功能的一組語句,使用function關鍵字定義包裹在花括號中的代碼塊,便於反復調用。其基本形式為:function moveStart(){代碼} 。聲明一個函數只是在告訴浏覽器這有一個函數,不會被實際執行,而在函數調用的時候,才真正執行函數內的代碼。moveStart 就是函數名,遵循 JS 命名規范,在函數調用的時候使用:moveStart()。若將函數定義在變量後,變量則可作為函數使用。函數存儲在變量中,不需要函數名,可以通過變量名調用。我們把沒有名稱的函數稱為匿名函數。函數返回值,函數執行的結果就是函數返回值,return 可以將函數內的結果返回到函數外調用,在使用 return 語句時,函數會停止執行,並返回指定的值,再從調用的地方開始執行,函數調用會被返回值取代,同樣一個函數應該只返回一種類型的值,在僅僅是希望退出函數時,也可以使用 return,返回值是可選的,比如下面的代碼:如果 a 大於 b,則退出函數,並不會計算 a 和 b 的和。

 function myFunction(a, b){
     if (a > b){
         return;
     }
     x = a+b;
 }    

 

  (9)、函數傳參:在調用函數時,可以向其傳遞值,這些值被稱為參數,這些參數可以在函數中使用,可以傳遞任意多的參數,並由逗號分割,比如:function myFunction(x, y){return x * y;} ,在調用的時候傳入值:myFunction(3 ,4),則返回 x乘y 的運算結果。簡單理解,參數就是一個占位符,即先把位置占住,後面再用。傳遞的值必須與參數以一致的順序出現,第一個值就是第一個被傳遞的參數給定的值,依次類推。函數很靈活,可以傳遞不同的值,來調用該函數。函數參數可分為:顯式參數和隱藏參數( arguments )。函數的顯式傳參,也叫固定參,就是在函數被聲明定義的時候列出的參數。隱藏參數也叫可變參,或者不定參,arguments 對象是 JS 內置的對象,對象包含了函數調用的參數數組,通過這一點可以很方便的找到最後一個參數的值,或者計算所有參數的和。當函數裡有一部分定不下來的時候可以用函數傳參,舉一個簡單的例子:點擊按鈕改變 DIV 的樣式:

 <style>
 #div1{
     width:200px;
     height:200px;
     background:red;
 }
 </style>
 <body>
 <div id="div1"></div>
 <input type="button" value="變寬" onclick="setWid('width','400px')" />
 <input type="button" value="變高" onclick="setWid('height','400px')" />
 <input type="button" value="變綠" onclick="setWid('background','green')" />
 <script>
 function setWid(name, value){    //函數傳參
     var x = document.getElementById('div1');
     x.style[name] = value;
 }
 </script>
 </body>

   

 1 //參數求和:
 2 <script>
 3 function sumArr() {
 4     var result = 0;
 5     for(var i = 0; i < arguments.length; i++) {
 6         result += arguments[i];
 7     }
 8     return result;
 9 } 
10 alert(sumArr(3,5,2,12,8,51,99));    //和為:180
11 </script>  

 

  (10)、對象:在現實生活中,一個人可以被視為一個對象,對象有他的屬性,比如性別、身高、年齡,籍貫等,方法有:走、跑、跳等。所有的人都有這些屬性,但是每個人的屬性又不盡相同,所有的人都有這些方法,但是他們執行的時間都不盡相同。在 JS 中,對象就是擁有屬性和方法的數據,JS 中的所有事物都是對象:字符串、日期、數組、數字等等。可以說在 JS 中一切皆對象,屬性是與對象相關的值,方法是能夠在對象上執行的動作。簡單說對象只是帶有屬性和方法的特殊數據類型。在 JS 中對象是數據(變量),擁有屬性和方法,當在聲明一個變量時,var txt = "你好"; 實際上已經創建了一個字符串對象,該對象擁有 length 屬性,字符串對象同時擁有很多個內置的方法,比如:charAt() 可獲取某個字符,返回字符串的某一位的字符。可以說 JS 對象是變量的容器,但是,通常認為 JS對象是鍵值對的容器,鍵值對的寫法為:name:value,鍵與值以冒號分隔,鍵值對又常被稱為對象屬性,所以 JS 對象就是屬性變量的容器。JS支持自定義對象,可以通過 new 關鍵字創建。

 

6、JS 數據類型

  JS 數據類型可分為基本數據類型和復合數據類型兩種,其中基本數據類型有五種:字符串(String)、數字(Number)、布爾(Boolean)、空(Null)、未定義(Undefined)。復合數據類型即 Object,Object 本質是一組無序的名值對組成的,嚴格來說,又被分為三類:對象(Object)、數組(Array)、函數(function)。

  (1)、字符串:字符串是存儲字符的變量。比如:var a='小明';,字符串可以是引號中的任意文本,可以使用單引號或者雙引號。

  (2)、數字:數字就是用來存儲數字的變量。可以為整數也可以是小數。比如:var a1=314; var a2=3.14;。

  (3)、布爾:布爾值是 "ture" 真和 "false" 假兩個特定值,布爾常用在條件測試中。

    什麼是真 ture:非零數字、非空字符串、非空對象

    什麼是假 false:數字零、空字符串、空對象(null)、undefined  

  (4)、Null:null 是一個只有一個值的特殊類型,表示一個空對象引用,可以用來清空變量。

  (5)、Undefined:表示為定義,有兩種情況:1:真的沒有定義。2、雖然定義了,但是沒有賦值。

  (6)、Object:對象由大括號包含。在括號內部,對象的屬性以名稱和值對的形式{name : value}來定義。屬性由逗號分隔,包括了除數字、字符串和布爾值以外的所有類型。比如:var person = {name:"小明", sex:"男", id:5566};,此例子中的對象(person)有三個屬性:name, sex,id。

  (7)、Array:使用單獨的變量名來存儲一系列的值。創建一個數組的方法:var arr = new Array();,之後可以給數組添加值:arr[0] = 1; arr[1] = 2; arr[2] = 3;,數組的下標是基於零的,所以從 0 開始算起。在 JS 中,很多時候,要避免使用 new 關鍵字,所以將數組創建為:var arr = [1,2,3] 的形式。

  (8)、function:函數其實是處理數據的方法,JS 將函數視為一種數據類型,可以像其他數據類型一樣,進行賦值和傳遞,這就為編程帶來了很大的靈活性。

 

  變量的類型:變量本身是沒有類型的,取決於他裡邊存儲的什麼數據類型,存的什麼類型就是什麼類型的變量。當聲明新變量時,可以使用 new 來聲明其類型,比如:var userName = new String;  var x = new Number;  var y = new Boolean;  var cars = new Array;  var person = new Object; 。JS 變量均為對象,當聲明一個變量時,就創建了一個新的對象。

  typeof運算符:typeof 操作符用來檢測變量的數據類型,返回一個字符串。字符串、數字、布爾值分別返回 string、number、boolean。用 typeof 檢測 null 返回 object,在 JS 中 null 表示什麼都沒有,但是他是一個對象。undefined 是沒有賦值的變量,所以 typeof 一個沒有值的變量會返回 undefined。typeof 一個對象則返回 object。JS 中數組是一種特殊類型的對象,所以也返回 object。函數則返回 function。

  undefined 和 null 的區別:typeof undefined,返回 undefined。typeof null,返回 object。(null === undefined),返回 false,(null == undefined),返回true。

 

7、JS 運算符

  (1)、算數運算符:

  除了平時常見的加減乘數之外,JS 中還有一些其他的運算符:

  取模運算符:%,取模通俗理解就是取余數,比如:5%2,值為1,5除2,商2余1。

  自增運算符:++,自增運算分為兩種情況,一種是先賦值再運算,一種是先運算再賦值。實例:假設 a = 2

    先賦值再運算:var b = a++; 運算結果為:b=2,a=3 解析:b = a,a = a+1。

    先運算再賦值:var b = ++a;運算結果為:b=3,a=3 解析:a = a+1,b = a。

  通過上面的例子,可以看到,先賦值再運算,實質是先把 a 賦值給 b,然後自己再加 1。先運算再賦值,實質是先自己加 1,再把值賦給 b。

  他們的相同點都是自增1,a = a+1,都被作為一個整體表達式運算,即 (a++)(++a),雖然他們的值都自增 1,但是 (a++) 取 a 自增前的值,而 (++a) 取 a 自增後的值。

  自減運算符:--,自減運算符和自增運算符一樣,即每次自減1。也分為兩種情況:實例:假設a=2

    先賦值再運算:var b=a--; 運算結果為:b=2,a=1 解析:b=a,a=a-1。

    先運算再賦值:var b=--a;運算結果為:a=1,b=1 解析:a=a-1,b=a。

 

    + 運算符可用於字符串變量的連接,若需要把多個字符串連接起來,就可以使用 + 運算符。

    如果把字符串和數字相加,則得到一個字符串。比如:var str='hello'+2; 返回:hello2

  (2)、賦值運算符:

  賦值運算符用於給變量賦值。有以下幾種:= += -= *= /= %=

    實例:假設 a=10 b=5

    =:a = b 結果:5

    +=:a += b,相當於:a = a+b 結果:15

    -=:a -= b,相當於:a = a-b 結果:5

    *=:a *= b,相當於:a = a*b 結果:50

    /=:a /= b,相當於:a = a/b 結果:2

    %=:a % b,相當於:a = a/b 結果:0 (取模運算是取余數)

  (3)、比較運算符:

  比較運算符在條件語句中使用,用於判斷變量或值的關系,返回 ture 或 false。

  比較運算符有以下幾種:== === != !== > < >= <=

    實例:假設 a=2

    ==:等於。注意雙等號在JS中才表示等於,一個等號為賦值。比較:a == 2,返回 ture。a == 1,返回false。

    ===:絕對等於,值和類型均相等。比較:a === '2',返回 false。a === 2,返回 true。

    !=:不等於。和等於相反。比較:a != 2,返回 false,a != 1,返回 ture。

    !==:絕對不等於,和絕對等於相反,值和類型均不相等。比較:a !== '2',返回 ture,a !== 2,返回 false。

    >:大於。比較:a>5,返回false。

    <:小於。比較:a<5,返回ture。

    >=:大於等於。比較:a>=5,返回false。

    <=:小於等於。比較:a<=5,返回ture。

  (4)、邏輯運算符:

  邏輯運算符用於描述變量或值之間的邏輯關系。

  邏輯運算符有以下幾種:&& || !

   &&:並且。在數學中我們將 b 大於 a、b 又小於 c 表示為:a<b<c,但是在 JS 中要用 && 表示:b>a && b<c。兩個條件必須同時滿足,則返回 ture,有一個條件不滿足,則返回 false。實例:判斷一個數字是否為兩位數:a>9 && a<100,假設 a=50,則返回:ture。

   ||:或。當兩個條件中,有任一個條件滿足,邏輯或的運算結果就為真。實例:a=5,b=10,判斷c=a<b || a==b,c的值為:ture。

   !:否。也叫邏輯非操作符,是非顛倒,好比小明買了一本 JS 書籍,小白說:是烏龜書;小紅說:是犀牛書。小明說:小白說的不是真話,小紅說的不是假話。那麼是小紅說對了,小明買的書是犀牛書。實例:a=10 b=5,判斷c =! (a>b),c 的值為:false。

  (5)、三元運算符:

  三元運算符也叫條件運算符,其基本形式可用 if 判斷語句表示,用三元運算符表示為: ? :。

  所謂三元運算符,顧名思義就是需要進行三次操作,語法為:條件?結果1:結果2 。條件寫在問號之前,後面跟著用冒號分隔的結果1和結果2,當滿足條件時為結果1,否則就是結果2。好比你去看演唱會,條件就是需要入場券,若你帶了就可以直接進去,如果沒帶那就請回吧,用三元運算符可表示為:帶沒帶入場券 ? 帶了直接進去 : 沒帶那就請回吧。

  所有使用 if 判斷語句的地方,都可以使用三元運算符,使用 if 判斷語句代碼比較繁瑣,使用三元運算符,代碼則十分簡潔,但是對於初學者來說,三元運算符不是那麼直觀,使用 if 判斷語句更容易理解,隨著學習的不斷深入,以及理解的加深,就可以使用三元運算符代替 if 了。

    實例:判斷一個數為偶數還是奇數。假設:a=12

    先用if判斷語句表示:

 var a = 12;
 if(a%2 == 0){
     alert('a為偶數');
 }
 else{
     alert('a為奇數');
 }

     用三元運算符可表示為:

 var a = 12;
 a%2===0 ? alert('偶數') : alert('奇數');

   (6)、運算符之間的優先級:

  從高到低依次為:算術操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號

  同級的運算是按從左到右依次進行運算,若有括號,從多層括號由裡向外進行運算。

    實例:

 var numA = 2;
 var numB = 5;
 
 var numC = numA + 40 > 10 $$ numB * 2 < 20;
 var numD =( ( numA + 40 )  /  ( 12 - numB ) ) * 10;
 
 alert(numC);    //返回:ture
 alert(numD);    //返回:60

   

  8、JS 事件

  HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JS 時,JS 可以觸發這些事件。事件可以是浏覽器行為,也可以是用戶操作行為,用戶操作行為可分為鼠標操作和鍵盤操作。比如:在頁面加載完成時觸發事件,這屬於浏覽器行為,用戶的操作行為如點擊按鈕觸發事件,鼠標的移入移出,按鍵提交信息等。

  下面是一些常用的事件列表:

事件 描述 onload 頁面已完成加載時觸發事件 onresize 調整浏覽器大小時觸發事件 onchange 當元素改變時觸發事件 onfocus 當元素獲得焦點時觸發事件 onselect 當選取元素時觸發事件 onsubmit 用戶提交表單時觸發事件 onclick 點擊鼠標時觸發事件 onmouseover 鼠標移入時觸發事件 onmouseout 鼠標移出時觸發事件 onmousedown 按下鼠標時觸發事件 onmouseup 松開鼠標時觸發事件 onmousemove 移動鼠標時觸發事件 onmousewheel 用戶滾動鼠標滾輪時觸發事件 onscroll 當滑動滾動條時觸發事件 onkeydown 用戶按下鍵盤按鍵時觸發事件 onkeyup 用戶松開按鍵時觸發事件

 

 

9、JS 常用的互動方法

  在 JS 中可以創建三種類型的消息框:警告框、確認框、提示框

  (1)、警告框

  警告框常用於確保用戶可以得到某些信息,平時我們在訪問網頁的時候,有時突然彈出一個小窗口,上面寫這一些提示文字,這就是警告框,在警告框出現之後,用戶必須點擊確定按鈕後才能繼續操作,否則就不能對網頁做出任何操作。這樣的彈出窗口是用”alert“實現的。

  語法:alert(str或var);

  (2)、確認框

  確認框常用於驗證用戶是否接受操作,允許用戶做出選擇,當確認框彈出時,用戶可以點擊”確定“或者”取消“來確定用戶操作,當用戶點擊確定時,返回值為 ture,如果點擊取消,則返回值為 false。用戶在點擊對話框之前不能進行任何操作。這樣的彈出窗口是用”confirm“實現的。

  語法:confirm(str);

  (3)、提示框

  提示框也叫提問框,用於提示用戶在進入頁面前輸入某個值,主要是詢問一些需要與用戶交互的信息,提示框包含一個確定、取消按鈕,和一個文本框,當提示框彈出後,用戶需要輸入某個值,然後點擊確定或者取消才能繼續操作,當用戶點擊確認時,返回值為文本框輸入的值,如果用戶點擊取消,則返回值為null。提示框可以和確認框相互配合使用。這樣的彈出窗口是用”prompt“實現的。

  語法:prompt(str1, str2);

  str1 為要顯示在對話框的值,也就是與用戶交互的內容描述,不可修改。str2 為文本框中提示用戶輸入的默認內容,可以修改。

 

  一般情況下,在實際的網站中,這些對話框都很少或者說幾乎不使用,尤其是警告框,因為用戶會反感這種突然彈出來的東西,在彈出對話框後用戶不點擊按鈕之前,浏覽器就跟死了一樣,不能做任何操作,確認框和提示框相對來說還有一些使用,也是比較有意義的,比如頁面中一個跳轉按鈕,如果不使用確認對話框,則直接跳轉到新頁面,使用確認對話框之後,用戶可以點擊確認或者取消來執行對應操作,確認則跳轉新頁面,取消則繼續浏覽,有時候這個跳轉按鈕或者鏈接是用戶不小心點到的,並不希望跳轉。大部分網站中,都使用的是一套自定義的對話框,更友好的顯示。

 

10、JS 轉義字符

  在 JS 中字符串通常用單引號或雙引號包含起來,比如:var txt = "誰看到"小明"今天來上課了嗎?"; 所以這個例子會解析錯誤,從 "誰看到" 被截斷,浏覽器報錯提示:語法錯誤,而且這是很嚴重的錯誤,錯誤到代碼將被終止,後面的代碼無法執行。其實這個例子還是很好解決的,我們可以將其用單引號括起來,再給小明加上雙引號,OK,跟原來要表達的一樣,但是如果我們需要換行呢?這時候就需要用到轉義字符,轉義字符在 JS 中應用十分廣泛,尤其是在正則表達式 (RegExp) 中,因此上面的代碼應該寫為: var txt = "誰看到 \"小明 \"今天來上課了嗎?";  需要換行則寫為:var txt = "誰看到 \"小明 \" \n 今天來上課了嗎?"; 。

  反斜槓(\)是一個轉義字符,轉義字符可用於將特殊字符轉換為字符串字符,可以用於轉義撇號、引號、換行等其他特殊字符,在編寫代碼時需要注意特殊字符問題,很多運行時出現的問題都是因為特殊字符而引起的,由於反斜槓本身被用作轉義符,因此不能在代碼中只鍵入一個 \ ,如果需要顯示一個反斜槓,必須一次鍵入兩個 \\ 。下面是一些常用的轉義字符:

  

轉義代碼 輸出 \' 單引號 \" 雙引號 \\ 反斜槓 \n 換行符 \r 回車符 \b 退格符 \t tab制表符 \f 換頁符
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved