本系列博客爲記錄學習 JavaScript 的學習筆記,會從基礎開始慢慢探索 js。今天的學習筆記主要爲 js 引入、定義變量以及 JavaScript 中數據類型和數據類型之間的轉換。javascript
JavaScript 是一種輕量級的腳本語言。所謂的‘’腳本語言‘’,指的是它不具有開發操做系統的能力,而是隻用來編寫相關應用程序的‘’腳本‘’,使用場景最多的是瀏覽器中。css
JavaScript 也是一種嵌入式語言。自己的核心語法不算不少,只能用來作一些數學和邏輯運算。JavaScript 自己不提供任何與 I/O相關的接口,都要靠宿主環境提供,因此 JavaScript 只適合嵌入更大型的應用程序環境,去調用宿主環境提供的接口。好比和瀏覽器的交互。html
從語法角度看,JavaScript 語言是一種‘’對象模型‘’語言(Object Models)。各類宿主環境經過這個模型,描述本身的功能和操做接口,還支持其餘編程範式(好比函數式編程)。java
JavaScript 的核心語法很是精簡,只包括兩個部分:基本的語法構造(好比操做符、控制結構、語句)和標準庫(一系列的具體對象類型,好比 Array、Date 等)。除此以外,各類宿主環境提供額外的接口(即只能在該環境使用的接口),以便 JavaScript 調用。以瀏覽器爲例,他提供個額外接口分爲三大類。編程
若是宿主環境是服務器,則會提供各類操做系統的接口,好比文件操做接口,網絡通訊接口等。瀏覽器
其實我很早就知道 JavaScript 和 Java 了,開始也很納悶它們之間的關係,這裏詳細介紹一下。服務器
JavaScript 的基本語法和對象體系,是模仿 Java 設計的。可是JavaScript 沒有采用 Java 的靜態 類型。正是由於 JavaScript與 Java 有很大的類似性,因此這門語言從一開始的 LiveScript 更名爲 JavaScript。基本上,JavaScript 這個名字的原意是‘’很像 Java的腳本語言‘’。網絡
JavaScript 語言的函數是一種獨立的數據類型,以及採用基於原型對象的繼承鏈。這是它與 Java 語法最大的兩點區別。JavaScript 語法比 Java 要自由的多。(約束少了,問題也會多起來)。ecmascript
除此以外,Java 語言須要編譯,而 JavaScript 語言則是運行時由解釋器直接執行。ide
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。
在以前學習 css 中有三種引入 css 的方式,那麼也有三種引入 js 的方式。
<div id="ddd" onmouseover="this.style.color ='red'" onmouseleave="this.style.color = 'blue'">這是行間式 js 的 div</div>
特色:
<script> ddd.style.backgroundColor = 'pink' </script>
特色:
<script src="js/01.js"> // 被屏蔽掉的代碼塊 ddd.style.fontSize = '100px'; </script>
特色:
語法: 關鍵詞 變量名 = 變量值 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(好的);
var num = 10; // 類型, 值 console.log(typeof(num), num) // 判斷方式 console.log(typeof num == 'number'); num = 3.14; console.log(typeof(num), num);
var str = '單引號字符串'; console.log(typeof(str), str); str = "雙引號字符串"; console.log(typeof(str), str);
var res = true; console.log(typeof(res), res); res = false; console.log(typeof(res), res);
console.log(typeof(abc), abc); var abc = undefined; console.log(typeof(abc), abc);
var fn = function (a, b) { return a + b; }; console.log(typeof(fn), fn);
var obj = { name: 'egon', age: 78 }; console.log(typeof(obj), obj); console.log(obj instanceof Object);
var xyz = null; console.log(typeof(xyz), xyz); // object null console.log(xyz instanceof Object); // false => Null類型
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);
var a = new Date(); console.log(a, typeof a); // 判斷方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Date);
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))
// boolean類型的true就是數字1, false就是數字0 console.log((true + true) * 10 * false) // number 中 0, NaN 能夠直接當false來使用, 其餘的均可以當true來使用
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)
// 在分支或循環判斷中, 系統會將數字與字符串類型自動轉換爲布爾類型 // 不在判斷中, 如何轉換 console.log(Boolean("")); console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean("1")); console.log(Boolean(-100));
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不相等
出如今標籤中的全局事件屬性中 this表明該標籤, 能夠訪問全局屬性, 再訪問具體操做對象(eg: this.style.color = "red")
出如今script腳本標籤中 能夠經過標籤的id惟一標識,在js代碼塊中操做頁面標籤 js採用的是小駝峯命名規範, 屬於解釋性語言(由上至下依次解釋執行)
經過script標籤的src屬性連接外部js文件, 連接後, script標籤自己內部的js代碼塊將會被屏蔽 在任何位置均可以使用this對象,當this對象不指向任意一個標籤時,表明的是window對象
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'