JS基礎教程（1）

js引入方式

行內式：經過向html元素行內添加一些js代碼，如給div綁定點擊事件

<div onclick="alert('這是js代碼')">這是一個div</div>
複製代碼

內嵌式：在html文檔中寫一個script標籤，把咱們的js帶寫在script標籤內

<script>
    alert('這是內嵌式js代碼')
</script>
複製代碼

外鏈式：在html文檔中寫一個script標籤，而且設置src屬性，src的屬性值引用一個js文件資源，而js代碼寫在js文件中；

使用外鏈式引入js文件時，script標籤裏面不能再寫js代碼了，即便寫了也不會執行。

<script src="js/1.js"></script>

複製代碼

不管是內嵌式仍是外鏈式，都建議把script標籤寫在body結束標籤的前面。

1、 淺談前端發展史

第一階段：C/S （client server） -> B / S （browser server）網頁製做 技術棧：PhotoShop、HTML、CSS

第二階段：從靜態到動態，從後端到前端 前端開發工程師 先後端分離： 後端：完成數據的分析和業務邏輯的編寫（包含API接口編寫） 前端：網頁製做、JS交互效果、數據的交互和綁定 技術棧：JavaScript 、 Ajax（跨域技術）、jQuery ... 第三階段：從前端到全端（從PC端到移動端） 技術棧：H五、CSS三、響應式佈局開發，Zepto、Hybrid（混合app開發）微信小程序...

第四階段：從全端到全棧 全棧開發：先後端均可以開發（嚴格意義講，一種語言完成前段後開發） 技術棧：NODE（基於js編程語言開發服務器端程序）、Express/Koa...

2、關於瀏覽器的內核和引擎

webkit（v8引擎）：大部分瀏覽器 gecko：火狐 trident：IE ...

W3C：萬維網聯盟，制定編程語言的規範與標準 開發者按照規範編寫代碼，瀏覽器開發商也會開發一套按照規範把代碼渲染成頁面的東西（這個東西就是內核或者引擎）

瀏覽器內核的做用：按照必定的規範，把代碼基於GPU（顯卡）繪製出對應的圖形和頁面等；

爲啥會出現瀏覽器兼容：

1. 部分瀏覽器會提早開發一些更好的功能，後期這些功能會被收錄到W3C規範中，可是再收錄以前，會存在必定的兼容性
2. 各個瀏覽器廠商，爲了突出本身的獨特性，用其餘方法實現W3C規範中個功能； ...

3、JavaScript

JS：輕量級的客戶端腳本編程語言、

編程語言 HTML+CSS 是標記語言 編程語言是具有必定邏輯的，擁有本身的編程思想（面向對象【oop】、面向過程編程）

面向對象
C++
JAVA
PHP
C#
JS
...
面向過程：
C
複製代碼

2.目前的JS已經不是客戶端語言了，基於NODE能夠作服務器端程序，因此JS是全棧編程語言

學習JS，咱們學習它的幾部分組成 ECMAScript（ES）:js的核心語法 DOM: Document Object Model文檔對象模型，提供各類API（屬性和方法）讓JS能夠獲取或者操做頁面中的HTML元素（DOM和元素） BOM：Browser Object Model 瀏覽器對象模型，提供各類API讓js能夠操做瀏覽器

4、ECMAScript

它是JS的語法規範，JS中的變量、數據類型、語法規範、操做語句，設計模式等等都是ES規定的；

值得注意的是js的註釋方式：註釋是一項備註內容，給人看的，代碼執行時會忽略註釋內容。

• 單行註釋： // 兩個單斜線
• 多行註釋：/多行註釋內容寫在兩個星號之間/

5、變量（variable）

它不是具體的值，只是一個用來存儲具體值的容器或者代名詞，由於它存儲的值能夠改變，因此稱爲變量。

基於ES語法規範，在JS中建立變量有如下方式：

var（ES3) function （ES3）建立函數（函數名也是變量，只不過存儲的值是函數類型而已） let （ES6）聲明變量 const （ES6）建立常量（常量就是恆定不變的值，如光速就是常量） import （ES6）基於ES6的模塊處處規範導出須要的信息 class （ES6） 基於ES6建立 類

/*
* 語法：
* var 變量名 = 值
* let 變量名 = 值
* const 變量名 = 值
* function 函數名 () {
*  // 函數體
* }
*
*
*
*/
var n = 13;
n = 15;
alert(n + 10); // => 彈出來25 此時的N表明15

const m = 100;
m = 200; // Uncaught TypeError: Assignment to constant variable (常量存儲的值不能被修改，可以被修改的就是變量了)
複製代碼

建立變量，命名的時候要遵循一些規範

嚴格區分大小寫 遵循駝峯命名法：按照數字、字母、下劃線或者$來命名（數字不能做爲開頭），命名的時候基於英文單詞拼接成一個名字（第一個單詞字母小寫，其他每個有意義單詞的首字母都大寫） 不能使用關鍵字和保留字：在js中有特殊含義的叫作關鍵字，將來均可能成爲關鍵字的叫作保留字

var n = 12;
var N = 12; // 變量n和變量N不是同一個變量
var studentInfo = 'xyz'; // 駝峯命名法

// 變量要具備語義化
add / create / insert
del (delete) / update / remove(rm)
info / detail
log

複製代碼

6、數據類型

數據類型是一門語言進行生產的材料，JS中包含的值有如下這些類型：

基本類型： 數字 number 字符串 string 布爾 boolean null undefined Symbol 表示一個惟一值（ES6新增） 引用數據類型： 對象object 普通對象 數組對象 正則對象 日期對象 ... 函數function

// [基本數據類型]
var n = 13; // => 0 1 -13 13.2都是數字， 此時變量n存儲的就是一個數字；中有一個特殊的值：NaN(not a number)，表示不是一個有效的數字，可是仍然是一個數字類型

var s = ''; // =>如 '' '13' "13" "name" "age" JS中全部用單引號或者雙引號包裹起來的都是字符串，字符串表示的值是當前引號中包裹的值（一個字符串由零到多個字符串組成）

var  b = true; // => 布爾類型只有兩個值 true 真 false表示假

var empty = null; // => 變量empty表示null空

var notDefined = undefined; // 變量notDefined表示undefined（undefined這個單詞的意思就是未定義）；

// Symbol: 用來建立一個惟一值，和誰都不會重複。下面等號右側雖然長的同樣，可是s1和s2變量表明兩個不一樣的值。
var s1 = Symbol('你好');
var s2 = Symbol('你好');

// [引用數據類型]
// => 對象
var obj = {name: '你好', age: 9}; // => 普通對象：由大括號包裹起來，裏面包含多組屬性名和屬性值（name和age叫作屬性名（又稱鍵，英文名key），而 '你好'/9叫作屬性值（又稱值，英文名value），因此對象又叫作鍵值對集合或者key/value集合）
var obj2 = {}; // => 變量obj2表示空對象；

// => 數組
var ary = [1, 2, 3, 4, 5]; // => 數組對象：用中括號包裹起來，包含0到多項內容，每一項之間用逗號(英文逗號)分隔。
var ary2 = []; // => 變量ary2表示一個空數組

// => 正則：用來匹配字符串的規則
var reg = /^abc$/;  // => 兩個斜線中間的叫作元字符

// => 函數：須要屢次重複使用的代碼或者有特定功能的代碼能夠封裝成一個函數；
function fn () {// => 函數體}
// function 叫作關鍵字，用於聲明函數變量
// fn 叫作函數名，函數名也須要知足變量聲明的條件（本質上函數名也是變量名，只不過這個變量名錶明的是一個函數數據類型的值）
// () 【聲明函數時】fn後面的這個小括號表示的是形參入口
// {} 寫在函數中的{}表示函數體，這裏面寫須要執行的代碼

// ....
複製代碼

7、JS代碼運行及經常使用輸出方式

alert方法(函數): 在瀏覽器中經過彈窗的方式輸出（瀏覽器提示框）

var num = 12;
alert(num); // alert() 讀做：alert方法執行【寫在方法名後面的「()」讀做 「執行」 ，就是把alert函數裏面的代碼執行一遍】。把想輸出的東西放在小括號裏；

var course = 'js基礎課程';
alert(course);


console.log方法：在瀏覽器控制檯輸出日誌。console是瀏覽器的開發者工具的一個頁卡（在瀏覽器中按下F12按鍵【部分電腦須要按下Fn和F12】）


// console.log() 讀做console.log方法執行，把想要輸出的變量或者內容放在小括號裏。
var name = '你好';
console.log(name);


innerHTML/innerText屬性； 修改元素中的HTML或者文本；


var box = document.getElementById('box'); // => 在document（整個HTML文檔中）下通查找id爲box的元素。

// 語法：元素對象.innerHTML/innerText = '想要顯示的內容'; 【想要顯示的內容必須是一個字符串類型的值】
box.innerHTML = '<h1>js基礎</h1>';
box.innerText = '<h1>js基礎</h1>';

// box.innerHTML/box.innerText = '字符串' 讀做：將box的innerHTML或innerText修改成 '字符串'

// => 咱們發現一樣是包在字符串裏面的內容，經過innerHTML的方式瀏覽器會將<h1>識別成HTML內容；可是innerText不能識別，而是你字符串裏面寫什麼，頁面就輸出什麼；
複製代碼

8、有效數字檢測、數據類型轉換、數據類型檢測

有效數字檢測

有效數字檢測 isNaN() 方法；非有效數字：NaN(not a number)

isNaN(須要檢測的值)：檢測當前是不是一個有效數字，若是是一個有效數字，isNaN執行後就會獲得一個false，不然isNaN執行後獲得一個true；（咱們獲得的這個false或者true稱爲isNaN函數的返回值【就「結果」的意思】） 語法：isNaN(須要檢測的值)

var num = 12;
 var result1 = isNaN(12); // -> 檢測num變量存儲的值是否爲非有效數字，12是數字，因此isNaN執行後獲得一個false；
 var result2 = isNaN('13'); // -> false
 var result3 = isNaN('你好'); // -> true 由於漢字不是數字
 var result4 = isNaN(false); // -> false
 var result5 = isNaN(null); // -> false;
 var result6 = isNaN(undefined); // -> true
 var result7 = isNaN({name: '你好'}); // -> true
 var result8 = isNaN([12, 23]); // -> true
 var result9 = isNaN([12]); // -> false
 var result10 = isNaN(/^$/); // -> true
 var result11 = isNaN(function () {}); // -> true
複製代碼

思考：爲啥小括號裏洗的不是數字也能獲得結果？這是isNaN的檢測機制：

一、首先驗證當前要檢測的值是否爲數字類型的，若是不是，瀏覽器會默認的把值轉換爲數字類型

把非數字類型的值轉換爲數字：

• 其餘基本類型轉換爲數字：內部隱式調用Number方法

Number(須要轉換的值); 是強制轉換 [字符串轉數字]：若是字符串裏面都是數字，那麼返回這個數字，若是有非數字的因素會返回NaN.

Number('13') // -> 13
    Number('13px') // NaN 字符串中px不是數字
    Number('13.5') // 13.5 能夠識別小數點
複製代碼

[布爾值轉數字]
Number(true); // -> 1
Number(false); // -> 0

[null、undefined轉數字]
Number(null); // 0
Number(undefined); // NaN

- 引用數據類型轉數字：先調用引用數據類型值的toString方法將引用數據類型轉化爲字符串，而後再將字符串轉換爲數字。

[對象轉數字]
Number({}) // NaN; 其內部機制：({}).toString() -> '[object Object]' -> Number('[object Object]') -> NaN

[數組轉數字]
Number([12, 23]) // NaN; 內部機制：[12, 23].toString() -> '12, 23' -> Number('12, 23') -> NaN

[正則]
Number(/^\d$/) // NaN; 內部機制：/^\d$/.toString() -> '/^\d$/' -> Number('/^\d$/') -> NaN

複製代碼

二、當前檢測的值已是數字類型，是有效數字就獲得一個false，不是就會獲得一個true；（在數字類型中只有NaN不是有效數字，其他的都是有效數字） Number(1); // false Number(NaN); // true

三、NaN的比較

NaN == NaN // 返回false；（ == 是比較運算符，一個等號是賦值；）
這是由於啥呢？由於NaN只是表示非數字，字符串 'a' 是非數字，'張三'也是非數字。可是 a 和 張三不相等。



if (Number(num) == NaN) {
    // if 是js中用來作判斷的語言結構，小括號裏表示條件，若是條件成立就執行花括號裏面的代碼
    alert('你好');
}

// 上面花括號裏面的代碼永遠不會執行，由於Number方法獲得的結果只有兩種狀況，要麼是數字，要麼是NaN。若是獲得一個數字，數字和NaN不相等，若是是NaN，NaN和NaN也不相等。

複製代碼

數據類型轉換（parseInt、parseFloat方法）

做用和Number方法類似，都是把非數字類型值轉換爲數字，區別在於Number方法是強制轉換，即要求被轉字符串中必須都是數字，若是不知足這一條件直接獲得NaN，而parseInt和parseFloat則是非強制轉換。

parseInt：把一個字符串中的整數解析出來
parseFloat：把一個字符串中整數和小數包含小數點都解析出來



parseInt('13.5') // 13
parseFloat('13.5') // 13.5



parseInt('width: 13.5px'); // NaN
parseFloat('width: 13.5px'); // NaN

複製代碼

注意：不管是parseInt仍是parseFloat都是從字符串的最左邊開始查找有效數字，直到遇到第一個非有效數字字符就中止查找，若是第一個就不是有效數字，那麼直接回返回NaN，而且中止查找。

數據類型檢測： 檢測數據類型一共有四種方式：

typeof
instanceof
constructor
Object.prototype.toString.call()
複製代碼

咱們這裏先講typeof 運算符

語法：typeof 被檢測的值返回被檢測值的數據類型；

console.log(typeof 1); // number
console.log(typeof 'zhufengpeixun'); // string
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // undefined
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof /^/); // object

// 思考？typeof 運算符的返回值是個什麼數據類型？
var result = typeof 1;
console.log(typeof result); // string
複製代碼

typeof 是有侷限性的，檢測基本數據類型時，typeof檢測null會返回object，由於null是空對象指針。同時，typeof檢測引用數據類型時，不能具體區分是哪種對象數據類型（對象、數組、正則等）只會統一返回object