JavaScript 系列部落格(一)
JavaScript/">JavaScript 系列部落格(一)
前言
本系列部落格為記錄學習 JavaScript 的學習筆記,會從基礎開始慢慢探索 js。今天的學習筆記主要為 js 引入、定義變數以及 JavaScript 中資料型別和資料型別之間的轉換。
引入 JavaScript
什麼是JavaScript 語言?
JavaScript 是一種輕量級的指令碼語言。所謂的‘’指令碼語言‘’,指的是它不具備開發作業系統的能力,而是隻用來編寫相關應用程式的‘’指令碼‘’,使用場景最多的是瀏覽器中。
JavaScript 也是一種嵌入式語言。本身的核心語法不算很多,只能用來做一些數學和邏輯運算。JavaScript 本身不提供任何與 I/O相關的介面,都要靠宿主環境提供,所以 JavaScript 只適合嵌入更大型的應用程式環境,去呼叫宿主環境提供的介面。比如和瀏覽器的互動。
從語法角度看,JavaScript 語言是一種‘’物件模型‘’語言(Object Models)。各種宿主環境通過這個模型,描述自己的功能和操作介面,還支援其他程式設計正規化(比如函數語言程式設計)。
JavaScript 的核心語法非常精簡,只包括兩個部分:基本的語法構造(比如操作符、控制結構、語句)和標準庫(一系列的具體物件型別,比如 Array、Date 等)。除此之外,各種宿主環境提供額外的介面(即只能在該環境使用的介面),以便 JavaScript 呼叫。以瀏覽器為例,他提供個額外介面分為三大類。
- 瀏覽器控制類:操作瀏覽器
- DOM 類:操作網頁的各種元素
- Web 類:實現網際網路的各種功能
如果宿主環境是伺服器,則會提供各種作業系統的介面,比如檔案操作介面,網路通訊介面等。
JavaScript 與 Java的關係
其實我很早就知道 JavaScript 和 Java 了,開始也很納悶它們之間的關係,這裡詳細介紹一下。
JavaScript 的基本語法和物件體系,是模仿 Java 設計的。但是JavaScript 沒有采用 Java 的靜態 型別。正是因為 JavaScript與 Java 有很大的相似性,所以這門語言從一開始的 LiveScript 改名為 JavaScript。基本上,JavaScript 這個名字的原意是‘’很像 Java的指令碼語言‘’。
JavaScript 語言的函式是一種獨立的資料型別,以及採用基於原型物件的繼承鏈。這是它與 Java 語法最大的兩點區別。JavaScript 語法比 Java 要自由的多。(約束少了,問題也會多起來)。
除此之外,Java 語言需要編譯,而 JavaScript 語言則是執行時由直譯器直接執行。
JavaScript 與 ECMAScript 的關係
1996年8月,微軟模仿 JavaScript 開發了一種相近的語言,取名為JScript(JavaScript 是 Netscape 的註冊商標,微軟不能用),首先內置於IE 3.0。Netscape 公司面臨喪失瀏覽器指令碼語言的主導權的局面。
1996年11月,Netscape 公司決定將 JavaScript 提交給國際標準化組織 ECMA(European Computer Manufacturers Association),希望 JavaScript 能夠成為國際標準,以此抵抗微軟。ECMA 的39號技術委員會(Technical Committee 39)負責制定和稽核這個標準,成員由業內的大公司派出的工程師組成,目前共25個人。該委員會定期開會,所有的郵件討論和會議記錄,都是公開的。
1997年7月,ECMA 組織釋出262號標準檔案(ECMA-262)的第一版,規定了瀏覽器指令碼語言的標準,並將這種語言稱為 ECMAScript。這個版本就是 ECMAScript 1.0 版。之所以不叫 JavaScript,一方面是由於商標的關係,Java 是 Sun 公司的商標,根據一份授權協議,只有 Netscape 公司可以合法地使用 JavaScript 這個名字,且 JavaScript 已經被 Netscape 公司註冊為商標,另一方面也是想體現這門語言的制定者是 ECMA,不是 Netscape,這樣有利於保證這門語言的開放性和中立性。因此,ECMAScript 和 JavaScript 的關係是,前者是後者的規格,後者是前者的一種實現。在日常場合,這兩個詞是可以互換的。
ECMAScript 只用來標準化 JavaScript 這種語言的基本語法結構,與部署環境相關的標準都由其他標準規定,比如 DOM 的標準就是由 W3C組織(World Wide Web Consortium)制定的。
ECMA-262 標準後來也被另一個國際標準化組織 ISO(International Organization for Standardization)批准,標準號是 ISO-16262。
在 HTML 中引入 js
在之前學習 css 中有三種引入 css 的方式,那麼也有三種引入 js 的方式。
- 行間式
<div id="ddd" onmouseover="this.style.color ='red'" onmouseleave="this.style.color = 'blue'">這是行間式 js 的 div</div>
特點:
- 行間式程式碼塊書寫在一個個全域性事件名屬性中,沒有 script 這樣的一個全域性屬性;
- 在某一個標籤的某一個事件屬性值中,出現的 this 代表該標籤;
- 該標籤物件 this 可以訪問該標籤的任意全域性屬性。
- 內聯式
<script> ddd.style.backgroundColor = 'pink' </script>
特點:
- 可以通過標籤的 id(唯一標識),在 js 程式碼塊中訪問到該標籤(js 選擇器);
- js 程式碼塊中語法採用的是小駝峰命名法,屬性的值都是用字串形式進行復制;
- js 屬於解釋型語言,載入順序會影響執行結構。
- 外聯式
<script src="js/01.js"> // 被遮蔽掉的程式碼塊 ddd.style.fontSize = '100px'; </script>
特點:
- 通過 script 標籤的 src 資料連線外部 js 檔案;
- 使用外聯的 script(擁有 src 屬性)標籤,會遮蔽掉標籤內部的 js 程式碼塊;
- 在 js 的任意地方,均有 this物件,this 物件不指向任何標籤時,指向的是 window 物件。
在 js 中定義變數
四種定義變數的方式
語法: 關鍵詞 變數名 = 變數值 num = 10; // 省略關鍵詞, 定義的為全域性變數, 在任何位置定義, 在任何位置都可以訪問, 但不建議使用 var num = 10; // var關鍵詞, 無塊級作用域, 定義在塊級作用域中的變數, 外界也可以訪問 let num = 20; // let關鍵詞, 有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問 const NUM = 30; // const關鍵詞,有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問, 且變數的值不能再被二次修改, 所以為常量 /* 產生塊級作用域的方式 { 直接書寫 } if語句可以產生 while語句可以產生 for語句也可以產生 */ // 函式可以產生區域性作用域, 除了定義在區域性作用域中的全域性變數(沒有關鍵字的變數宣告), 外界可以訪問, 其他定義方式, 外界都不可以訪問 // ES5 | ES6 // 是ECMAScript兩個語法版本, ES6是ES5之後的一個版本, 但是對ES5向下相容, ES6中支援ES5語法
命名規範
// 命名規範 // 變數命名規範 // 可以由哪些組成: 字母, 數字, _, $, 中文(一般不考慮) // 可以以什麼開頭: 字母, _, $, 中文 // 不能出現什麼: 關鍵字, 保留字 // 提倡什麼書寫規範: 小駝峰, 支援_連線語法 好的 = "真好"; console.log(好的);
資料型別
值型別
- number 型別
var num = 10; // 型別, 值 console.log(typeof(num), num) // 判斷方式 console.log(typeof num == 'number'); num = 3.14; console.log(typeof(num), num);
- string型別
var str = '單引號字串'; console.log(typeof(str), str); str = "雙引號字串"; console.log(typeof(str), str);
- boolean 型別
var res = true; console.log(typeof(res), res); res = false; console.log(typeof(res), res);
- undefined 型別
console.log(typeof(abc), abc); var abc = undefined; console.log(typeof(abc), abc);
引用型別
- function 型別
var fn = function (a, b) { return a + b; }; console.log(typeof(fn), fn);
- object 型別(類字典方式來使用)
var obj = { name: 'egon', age: 78 }; console.log(typeof(obj), obj); console.log(obj instanceof Object);
其他形式物件
- null 型別
var xyz = null; console.log(typeof(xyz), xyz);// object null console.log(xyz instanceof Object);// false => Null型別
具體的物件型別
- Array 型別
var a = new Array(1, 2, 3, 4, 5); console.log(a, typeof a); // 判斷方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Array);
- Date 型別
var a = new Date(); console.log(a, typeof a); // 判斷方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Date);
- RegExp 型別
var a = new RegExp('a'); a = /[abc]/; console.log(a, typeof a); // 判斷方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof RegExp) // 使用正則 console.log('abc'.match(a))
資料型別之間的轉換
- number 與 boolean 型別
// boolean型別的true就是數字1, false就是數字0 console.log((true + true) * 10 * false) // number 中 0, NaN 可以直接當false來使用, 其他的都可以當true來使用
- string,boolean 轉換為 number
var a = '10'; // => 10 a = '3.14';// => 3.14 a = '3.14.15';// => NaN var b = true; var n1 = Number(a); console.log(n1) var n2 = Number(b); console.log(n2) a = '3.14.15';// 3.14 a = 'a3.14';// NaN console.log(parseFloat(a)); a = '3.94.15';// 3 console.log(parseInt(a)); // 體現弱語言型別 a = '10'; var res = +a; // number 10 console.log(typeof(res), res)
- number,string 轉換為 boolean
// 在分支或迴圈判斷中, 系統會將數字與字串型別自動轉換為布林型別 // 不在判斷中, 如何轉換 console.log(Boolean("")); console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean("1")); console.log(Boolean(-100));
- number,boolean 轉換為 string
console.log(String(true)); console.log(String(1)); var a = 123; console.log(a.toString()); console.log(123..toString()); console.log(3.14.toString()); var c = 123 + ""; console.log(typeof c, c); // 用例 var z1 = 2 + +"5";// 7 z1 = 2 + "5"; // "25" // z1 = 2 ++"5";// 語法錯誤 ++連在一起是 ++語法(瞭解) var z2 = "5" - 2;// 3 console.log(z1, z2); // 補充 // NaN與NaN不相等
總結
一.JS三個組成部分
- ES: ECMAScript語法
- DOM: document物件模型 => 通過js程式碼與頁面文件(出現在body中的所有視覺化標籤)進行互動
- BOM: borwser物件模型 => 通過js程式碼與瀏覽器自帶功能進行互動
二.引入方式
- 行間式
出現在標籤中的全域性事件屬性中 this代表該標籤, 可以訪問全域性屬性, 再訪問具體操作物件(eg: this.style.color = "red")
- 內聯式
出現在script指令碼標籤中 可以通過標籤的id唯一標識,在js程式碼塊中操作頁面標籤 js採用的是小駝峰命名規範, 屬於解釋性語言(由上至下依次解釋執行)
- 外聯式
通過script標籤的src屬性連結外部js檔案, 連結後, script標籤本身內部的js程式碼塊將會被遮蔽 在任何位置都可以使用this物件,當this物件不指向任意一個標籤時,代表的是window物件
- js具體出現的位置
head標籤的底部: 依賴性js庫 body標籤的底部(body與html結束標籤的之間): 功能性js指令碼
三.變數的定義
四種定義變數的方式 語法: 關鍵詞 變數名 = 變數值 num = 10; // 省略關鍵詞, 定義的為全域性變數, 在任何位置定義, 在任何位置都可以訪問, 但不建議使用 var num = 10; // var關鍵詞, 無塊級作用域, 定義在塊級作用域中的變數, 外界也可以訪問 let num = 20; // let關鍵詞, 有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問 const NUM = 30; // const關鍵詞,有塊級作用域, 定義在塊級作用域中的變數, 外界無法訪問, 且變數的值不能再被二次修改, 所以為常量 /* 產生塊級作用域的方式 { 直接書寫 } if語句可以產生 while語句可以產生 for語句也可以產生 */ // 函式可以產生區域性作用域, 除了定義在區域性作用域中的全域性變數(沒有關鍵字的變數宣告), 外界可以訪問, 其他定義方式, 外界都不可以訪問
// ES5 | ES6 // 是ECMAScript兩個語法版本, ES6是ES5之後的一個版本, 但是對ES5向下相容, ES6中支援ES5語法
// 命名規範 // 變數命名規範 // 可以由哪些組成: 字母, 數字, _, $, 中文(一般不考慮) // 可以以什麼開頭: 字母, _, $, 中文 // 不能出現什麼: 關鍵字, 保留字 // 提倡什麼書寫規範: 小駝峰, 支援_連線語法 好的 = "真好"; console.log(好的);
四.三種彈出框
// 普通彈出框 // alert("你丫真帥!!!"); // 輸入框: 以字串形式接收使用者輸入內容 // var info = prompt("請輸入內容:"); // console.log(info) // 確認框: 根據使用者選擇確認或取消, 得到 true | false 兩個布林結果 // var res = confirm("你是豬嗎?"); // console.log(res)
五.資料型別
// 值型別 var a = 10;// Number 10 var a = 'abc';// String abc var a = true;// Boolean true var a = undefined// undefined undefined // 引用型別 var a = function(){}// function f(){} var a = {}// Object {} var a = null// Null null // 其他Object具體體現 Array | Date | RegExp
六.值型別的型別轉換
// 1.通過型別宣告轉換 Number() | String() | Boolean() // 2.方法(函式) parseInt('10') | parseFloat('3.14') 123..toString() // 3.隱式轉換 +'10' => 10 '' + 10 => '10'