1. 程式人生 > >JavaScript基礎回顧(一)

JavaScript基礎回顧(一)

JavaScript 資料型別 JavaScript 擁有動態型別。這意味著相同的變數可用作不同的型別。 數字、字串、布林、陣列、物件

let和var let作用於塊內,var變數作用於整個函式

Undefined 和 Null Undefined 這個值表示變數不含有值。 可以通過將變數的值設定為 null 來清空變數。 宣告新變數時,可以使用關鍵詞 “new” 來宣告其型別: (注意:var聲明瞭變數但是不賦值,其型別為undfined)

物件 物件定義 var person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}; 物件訪問

person.lastName; person[“lastName”]; 訪問物件方法

  • 建立物件方法: methodName : function() { code lines }
  • 訪問物件方法: objectName.methodName()

JavaScript 函式 function myFunction() { var x=5; return x; } var myVar=myFunction();

JavaScript 作用域

  • 變數在函式內宣告,變數為區域性作用域。區域性變數:只能在函式內部訪問。區域性變數在函式執行完畢後銷燬。
  • 變數在函式外定義,即為全域性變數。***全域性變數***有全域性作用域: 網頁中所有指令碼和函式均可使用。全域性變數在頁面關閉後銷燬。
  • 如果變數在函式內沒有宣告(沒有使用 var 關鍵字),該變數為全域性變數。(在全域性變數是 window 物件: 所有資料變數都屬於 window 物件。函式外的未用var宣告的為window變數可刪除,用var宣告的不可刪除)

JavaScript 事件 常見的HTML事件的列表:

JavaScript 字串

  • 可以使用索引位置來訪問字串中的每個字元: var carname = “Volvo XC60”; var character = carname[7];
  • 使用內建屬性 length 來計算字串的長度: var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”; var sln = txt.length;
  • 使用反斜槓 () 來轉義
  • 通常, JavaScript 字串是原始值,可以使用字元建立: var firstName = “John” 但我們也***可以使用 new 關鍵字將字串定義為一個物件***: var firstName = new String(“John”) Example: var x = “John”; var y = new String(“John”); typeof x // 返回 String typeof y // 返回 Object
  • 常見字串方法

運算子

  • 條件運算子 voteable=(age<18)?“年齡太小”:“年齡已達到”;

迴圈

  • For/In 迴圈 var person={fname:“John”,lname:“Doe”,age:25}; for (x in person) // x 為屬性名 { txt=txt + person[x]; }
  • do/while 迴圈 do{ x=x + "The number is " + i + “”; i++; } while (i<5);

break和continue

  • break 和 continue 語句僅僅是能夠跳出程式碼塊的語句。
  • continue 語句(帶有或不帶標籤引用)只能用在迴圈中。
  • break 語句(不帶標籤引用),只能用在迴圈或 switch 中。但是通過標籤引用,break 語句可用於跳出任何 JavaScript 程式碼塊: cars=[“BMW”,“Volvo”,“Saab”,“Ford”]; list: { document.write(cars[0]); document.write(cars[1]); document.write(cars[2]); break list;//帶標籤引用 document.write(cars[3]); document.write(cars[4]); document.write(cars[5]); }

JavaScript typeof, null, 和 undefined

  • 使用 typeof 操作符來檢測變數的資料型別。
  • JavaScript 中 null 表示 “什麼都沒有”
  • JavaScript 中, undefined 是一個沒有設定值的變數。 var person = null; // 值為 null(空), 但型別為物件 var person = undefined; // 值為 undefined, 型別為 undefined
  • null 和 undefined 的值相等,但型別不等: typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true

JavaScript 資料型別

  • 在 JavaScript 中有 5 種不同的資料型別: string number boolean object function
  • 3 種物件型別: Object Date Array
  • 2 個不包含任何值的資料型別: null undefined
  • 注意的資料型別 NaN 的資料型別是 number 陣列(Array)的資料型別是 object 日期(Date)的資料型別為 object null 的資料型別是 object 未定義變數的資料型別為 undefined
  • constructor 屬性:返回所有 JavaScript 變數的建構函式。 “John”.constructor // 返回函式 String() { [native code] } (3.14).constructor // 返回函式 Number() { [native code] } false.constructor // 返回函式 Boolean() { [native code] } [1,2,3,4].constructor // 返回函式 Array() { [native code] } {name:‘John’, age:34}.constructor // 返回函式 Object() { [native code] } new Date().constructor // 返回函式 Date() { [native code] } function () {}.constructor // 返回函式 Function(){ [native code] }

JavaScript 型別轉換

  • 自動轉換型別 當 JavaScript 嘗試操作一個 “錯誤” 的資料型別時,會自動轉換為 “正確” 的資料型別。 以下輸出結果不是你所期望的: 5 + null // 返回 5 null 轉換為 0 “5” + null // 返回"5null" null 轉換為 “null” “5” + 1 // 返回 “51” 1 轉換為 “1” “5” - 1 // 返回 4 “5” 轉換為 5 (+號放在前面,可以讓+號後的型別變得和前面一樣;-號放在後面,可以讓-號前面的型別變得和後面一樣)
  • 一元運算子 + Operator + 可用於將變數轉換為數字: 例項 var y = “5”; // y 是一個字串 var x = + y; // x 是一個數字
  • 將字串轉換為數字 全域性方法 Number() 可以將字串轉換為數字。 字串包含數字(如 “3.14”) 轉換為數字 (如 3.14). 空字串轉換為 0。 其他的字串會轉換為 NaN (不是個數字)。 Number(“3.14”) // 返回 3.14 Number(" “) // 返回 0 Number(”") // 返回 0 Number(“99 88”) // 返回 NaN
  • search() 方法查詢 var str = “Visit Runoob!”; var n = str.search(“Runoob”);
  • replace() 方法替換 var str = document.getElementById(“demo”).innerHTML; var txt = str.replace(/microsoft/i,“Runoob”);

JavaScript 嚴格模式(use strict) JavaScript 嚴格模式(strict mode)即在嚴格的條件下執行。 不允許使用未宣告的變數。 不允許刪除變數或物件。 不允許刪除函式。 不允許變數重名。 不允許使用八進位制。 不允許使用轉義字元。 不允許對只讀屬性賦值。 不允許對一個使用getter方法讀取的屬性進行賦值。 不允許刪除一個不允許刪除的屬性。 變數名不能使用 “eval” 字串。 變數名不能使用 “arguments” 字串。 禁止this關鍵字指向全域性物件。 使用建構函式時,如果忘了加new,this不再指向全域性物件,而是報錯。

保留關鍵字 為了向將來Javascript的新版本過渡,嚴格模式新增了一些保留關鍵字: implements interface let package private protected public static yield

常見錯誤

  • 在常規的比較中,資料型別是被忽略的,以下 if 條件語句返回 true: var x = 10; var y = “10”; if (x == y)
  • switch 語句會使用恆等計算符(===)進行比較: 以下例項由於型別不一致不會執行 alert 彈窗: var x = 10; switch(x) { case “10”: alert(“Hello”); }
  • 所有的程式語言,包括 JavaScript,對浮點型資料的精確度都很難確定: var x = 0.1; var y = 0.2; var z = x + y // z 的結果為 0.3 if (z == 0.3) // 返回 false
  • 字串中直接使用回車換行是會報錯的。需要用\符號
  • JavaScript 預設是在程式碼的最後一行自動結束。
  • 使用名字來作為索引的陣列稱為關聯陣列(或雜湊)。JavaScript 不支援使用名字來索引陣列,只允許使用數字索引。 //使用數字做索引********* var person = []; person[0] = “John”; person[1] = “Doe”; person[2] = 46; var x = person.length; // person.length 返回 3 var y = person[0]; // person[0] 返回 “John” //不用數字做索引,產生錯誤程式碼 var person = []; person[“firstName”] = “John”; person[“lastName”] = “Doe”; person[“age”] = 46; var x = person.length; // person.length 返回 0 var y = person[0]; // person[0] 返回 undefined
  • 定義陣列元素,最後不能新增逗號 var colors = [5, 6, 7,]; //這樣陣列的長度可能為3 也可能為4。
  • Undefined 不是 Null。在 JavaScript 中, null 用於物件, undefined 用於變數,屬性和方法。物件只有被定義才有可能為 null,否則為 undefined。
  • 程式塊作用域 在每個程式碼塊中 JavaScript 不會建立一個新的作用域,一般各個程式碼塊的作用域都是全域性的。 for (var i = 0; i < 10; i++) { // some code } return i;

JavaScript 表單驗證

  • HTML 約束驗證 HTML5 新增了 HTML 表單的驗證方式:約束驗證(constraint validation)。約束驗證是表單被提交時瀏覽器用來實現驗證的一種演算法。HTML 約束驗證基於: HTML 輸入屬性 CSS 偽類選擇器 DOM 屬性和方法
  • HTML 表單自動驗證 HTML 表單驗證也可以通過瀏覽器來自動完成。如果表單欄位 (fname) 的值為空, required 屬性會阻止表單提交:
>- 必填(或必選)專案 function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("姓必須填寫"); return false; } } >- E-mail 驗證 輸入的資料必須包含 @ 符號和點號(.)。同時,@ 不可以是郵件地址的首字元,並且 @ 之後需有至少一個點號: function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos

JavaScript JSON JSON 是***用於儲存和傳輸資料的格式***。JSON 通常用於***服務端向網頁傳遞資料*** 。JSON 使用 JavaScript 語法,但是 JSON 格式僅僅是一個文字。文字可以被任何程式語言讀取及作為資料格式傳遞。 什麼是 JSON?

  • JSON 英文全稱 JavaScript Object Notation
  • JSON 是一種輕量級的資料交換格式。
  • JSON 易於理解。 以下 JSON 語法定義了 sites 物件: 3 條網站資訊(物件)的陣列: {“sites”:[ {“name”:“Runoob”, “url”:“www.runoob.com”}, {“name”:“Google”, “url”:“www.google.com”}, {“name”:“Taobao”, “url”:“www.taobao.com”} ]} JSON 語法規則
  • 資料為 鍵/值 對。
  • 資料由逗號分隔。
  • 大括號儲存物件
  • 方括號儲存陣列 JSON 字串轉換為 JavaScript 物件
  • 首先,建立 JavaScript 字串,字串為 JSON 格式的資料: var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;
  • 然後,使用 JavaScript 內建函式 JSON.parse() 將字串轉換為 JavaScript 物件: var obj = JSON.parse(text);
  • 例項 var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’; obj = JSON.parse(text); document.getElementById(“demo”).innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

javascript:void(0) 含義 void 是 JavaScript的關鍵字,該操作符指定要計算一個表示式但是不返回值。 語法格式如下:

href="#"與href="javascript:void(0)"的區別 單擊此處什麼也不會發生

  • # 包含了一個位置資訊,預設的錨是#top 也就是網頁的上端。
  • 而javascript:void(0), 僅僅表示一個死連結。
  • 在頁面很長的時候會使用 # 來定位頁面的具體位置,格式為:# + id。
  • 如果你要定義一個死連結請使用 javascript:void(0) 。 Example: 點我沒有反應的! 點我定位到指定位置!

尾部定位點