行內(nèi)式 JS 代碼（不推薦）

• 寫(xiě)在標(biāo)簽上的 js 代碼需要依靠事件（行為）來(lái)觸發(fā)

// 我是 index.js 文件
alert('我是一個(gè)彈出層')

<!-- 寫(xiě)在 a 標(biāo)簽的 href 屬性上 -->
<a href="javascript:alert('我是一個(gè)彈出層');">點(diǎn)擊一下試試</a>
?
<!-- 寫(xiě)在其他元素上 -->
<div onclick="alert('我是一個(gè)彈出層')">點(diǎn)一下試試看</div>
?
<!-- 
    注：onclick 是一個(gè)事件（點(diǎn)擊事件），當(dāng)點(diǎn)擊元素的時(shí)候執(zhí)行后面的 js 代碼
-->

內(nèi)嵌式 JS 代碼

內(nèi)嵌式的 js 代碼會(huì)在頁(yè)面打開(kāi)的時(shí)候直接觸發(fā)

<!-- 在 html 頁(yè)面書(shū)寫(xiě)一個(gè) script 標(biāo)簽，標(biāo)簽內(nèi)部書(shū)寫(xiě) js 代碼 -->
<script type="text/javascript">
    alert('我是一個(gè)彈出層')
</script>
?
<!-- 
    注：script 標(biāo)簽可以放在 head 里面也可以放在 body 里面
-->

外鏈?zhǔn)?JS 代碼（推薦）

• 外鏈?zhǔn)?js 代碼只要引入了 html 頁(yè)面，就會(huì)在頁(yè)面打開(kāi)的時(shí)候直接觸發(fā)
• 新建一個(gè) .js 后綴的文件，在文件內(nèi)書(shū)寫(xiě) js 代碼，把寫(xiě)好的 js 文件引入 html 頁(yè)面

<!-- 我是一個(gè) html 文件 -->
?
<!-- 通過(guò) script 標(biāo)簽的 src 屬性，把寫(xiě)好的 js 文件引入頁(yè)面 -->
<script src="index.js"></script>
?
<!-- 一個(gè)頁(yè)面可以引入多個(gè) js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

JS 中的注釋

• 學(xué)習(xí)一個(gè)語(yǔ)言，先學(xué)習(xí)一個(gè)語(yǔ)言的注釋，因?yàn)樽⑨屖墙o我們自己看的，也是給開(kāi)發(fā)人員看的
• 寫(xiě)好一個(gè)注釋，有利于我們以后閱讀代碼

單行注釋

• 一般就是用來(lái)描述下面一行代碼的作用
• 可以直接寫(xiě)兩個(gè) / ，也可以按 ctrl + /

// 我是一個(gè)單行注釋
?
// 下面代碼表示在瀏覽器里面出現(xiàn)一個(gè)彈出層
alert('我是一個(gè)彈出層')

多行注釋

• 一般用來(lái)寫(xiě)一大段話，或者注釋一段代碼
• 可以直接寫(xiě) /**/ 然后在兩個(gè)星號(hào)中間寫(xiě)注釋，也可以按 shift + alt + a

/*
    我是一個(gè)多行注釋
*/
?
/*
    注釋的代碼不會(huì)執(zhí)行
    alert('我是一個(gè)彈出層')
    alert('我是一個(gè)彈出層')
*/
alert('我是一個(gè)彈出層')

變量（重點(diǎn)）

• 變量指的是在程序中保存數(shù)據(jù)的一個(gè)容器
• 變量是計(jì)算機(jī)內(nèi)存中存儲(chǔ)數(shù)據(jù)的標(biāo)識(shí)符，根據(jù)變量名稱可以獲取到內(nèi)存中存儲(chǔ)的數(shù)據(jù)
• 也就是說(shuō)，我們向內(nèi)存中存儲(chǔ)了一個(gè)數(shù)據(jù)，然后要給這個(gè)數(shù)據(jù)起一個(gè)名字，為了是我們以后再次找到他
• 語(yǔ)法： var 變量名 = 值

定義變量及賦值

// 定義一個(gè)變量
var num;
?
// 給一個(gè)變量賦值
num = 100;
?
// 定義一個(gè)變量的同時(shí)給其賦值
var num2 = 200;

注意：

1. 一個(gè)變量名只能存儲(chǔ)一個(gè)值
2. 當(dāng)再次給一個(gè)變量賦值的時(shí)候，前面一次的值就沒(méi)有了
3. 變量名稱區(qū)分大小寫(xiě)（JS 區(qū)分大小寫(xiě)）

變量的命名規(guī)則和命名規(guī)范

• 規(guī)則： 必須遵守的，不遵守就是錯(cuò)

1. 一個(gè)變量名稱可以由 數(shù)字、字母、英文下劃線（_）、美元符號(hào)（$） 組成
2. 嚴(yán)格區(qū)分大小寫(xiě)
3. 不能由數(shù)字開(kāi)頭，不要使用中文漢字命名
4. 不能是 保留字 或者 關(guān)鍵字
5. 不要出現(xiàn)空格

• 規(guī)范： 建議遵守的（開(kāi)發(fā)者默認(rèn)），不遵守不會(huì)報(bào)錯(cuò)

1. 變量名盡量有意義（語(yǔ)義化）
2. 遵循駝峰命名規(guī)則，由多個(gè)單詞組成的時(shí)候，從第二個(gè)單詞開(kāi)始首字母大寫(xiě)

數(shù)據(jù)類型（重點(diǎn)）

• 是指我們存儲(chǔ)在內(nèi)存中的數(shù)據(jù)的類型
• 我們通常分為兩大類 基本數(shù)據(jù)類型 和 復(fù)雜數(shù)據(jù)類型

基本數(shù)據(jù)類型

1、數(shù)值類型（number）

• 一切數(shù)字都是數(shù)值類型（包括二進(jìn)制，十進(jìn)制，十六進(jìn)制等）
• NaN（not a number），一個(gè)非數(shù)字

2、字符串類型（string）

• 被引號(hào)包裹的所有內(nèi)容（可以是單引號(hào)也可以是雙引號(hào)）

3、布爾類型（boolean）

• 只有兩個(gè)（true 或者 false）

4、null類型（null）

• 只有一個(gè)，就是 null，表示空的意思

5、undefined類型（undefined）

• 只有一個(gè)，就是 undefined，表示沒(méi)有值的意思

復(fù)雜數(shù)據(jù)類型

1. 對(duì)象類型（object）
2. 函數(shù)類型（function）
3. 。。。

判斷數(shù)據(jù)類型

• 既然已經(jīng)把數(shù)據(jù)分開(kāi)了類型，那么我們就要知道我們存儲(chǔ)的數(shù)據(jù)是一個(gè)什么類型的數(shù)據(jù)
• 使用 typeof 關(guān)鍵字來(lái)進(jìn)行判斷

// 第一種使用方式
var n1 = 100;
console.log(typeof n1);
?
// 第二種使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

判斷一個(gè)變量是不是數(shù)字

• 可以使用 isNaN 這個(gè)方法來(lái)判斷一個(gè)變量是不是數(shù)字
• isNaN ：is not a number

// 如果變量是一個(gè)數(shù)字
var n1 = 100;
console.log(isNaN(n1)); //=> false
?
// 如果變量不是一個(gè)數(shù)字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

數(shù)據(jù)類型轉(zhuǎn)換

• 數(shù)據(jù)類型之間的轉(zhuǎn)換，比如數(shù)字轉(zhuǎn)成字符串，字符串轉(zhuǎn)成布爾，布爾轉(zhuǎn)成數(shù)字等

其他數(shù)據(jù)類型轉(zhuǎn)成數(shù)值

1、Number(變量)

• 可以把一個(gè)變量強(qiáng)制轉(zhuǎn)換成數(shù)值類型
• 可以轉(zhuǎn)換小數(shù)，會(huì)保留小數(shù)
• 可以轉(zhuǎn)換布爾值
• 遇到不可轉(zhuǎn)換的都會(huì)返回 NaN

2、parseInt(變量)

• 從第一位開(kāi)始檢查，是數(shù)字就轉(zhuǎn)換，知道一個(gè)不是數(shù)字的內(nèi)容
• 開(kāi)頭就不是數(shù)字，那么直接返回 NaN
• 不認(rèn)識(shí)小數(shù)點(diǎn)，只能保留整數(shù)

3、parseFloat(變量)

• 從第一位開(kāi)始檢查，是數(shù)字就轉(zhuǎn)換，知道一個(gè)不是數(shù)字的內(nèi)容
• 開(kāi)頭就不是數(shù)字，那么直接返回 NaN
• 認(rèn)識(shí)一次小數(shù)點(diǎn)

4、除了加法以外的數(shù)學(xué)運(yùn)算

• 運(yùn)算符兩邊都是可運(yùn)算數(shù)字才行
• 如果運(yùn)算符任何一遍不是一個(gè)可運(yùn)算數(shù)字，那么就會(huì)返回 NaN
• 加法不可以用

其他數(shù)據(jù)類型轉(zhuǎn)成字符串

1、變量.toString()
有一些數(shù)據(jù)類型不能使用 toString() 方法，比如 undefined 和 null
2、String(變量)
所有數(shù)據(jù)類型都可以
3、使用加法運(yùn)算

• 在 JS 里面，+ 由兩個(gè)含義
• 字符串拼接： 只要 + 任意一邊是字符串，就會(huì)進(jìn)行字符串拼接
• 加法運(yùn)算：只有 + 兩邊都是數(shù)字的時(shí)候，才會(huì)進(jìn)行數(shù)學(xué)運(yùn)算

其他數(shù)據(jù)類型轉(zhuǎn)成布爾

Boolean(變量)
在 js 中，只有 ''、0、null、undefined、NaN，這些是 false，其余都是 true

運(yùn)算符

就是在代碼里面進(jìn)行運(yùn)算的時(shí)候使用的符號(hào)，不光只是數(shù)學(xué)運(yùn)算，我們?cè)?js 里面還有很多的運(yùn)算方式

數(shù)學(xué)運(yùn)算符

1、+

• 只有符號(hào)兩邊都是數(shù)字的時(shí)候才會(huì)進(jìn)行加法運(yùn)算
• 只要符號(hào)任意一邊是字符串類型，就會(huì)進(jìn)行字符串拼接

2、-

• 會(huì)執(zhí)行減法運(yùn)算
• 會(huì)自動(dòng)把兩邊都轉(zhuǎn)換成數(shù)字進(jìn)行運(yùn)算

3、*

• 會(huì)執(zhí)行乘法運(yùn)算
• 會(huì)自動(dòng)把兩邊都轉(zhuǎn)換成數(shù)字進(jìn)行運(yùn)算

4、/

• 會(huì)執(zhí)行除法運(yùn)算
• 會(huì)自動(dòng)把兩邊都轉(zhuǎn)換成數(shù)字進(jìn)行運(yùn)算

5、%

• 會(huì)執(zhí)行取余運(yùn)算
• 會(huì)自動(dòng)把兩邊都轉(zhuǎn)換成數(shù)字進(jìn)行運(yùn)算

賦值運(yùn)算符

1、=

• 就是把 = 右邊的賦值給等號(hào)左邊的變量名
• var num = 100
• 就是把 100 賦值給 num 變量
• 那么 num 變量的值就是 100

2、+=

var a = 10;
a += 10;
console.log(a); //=> 20

a += 10 等價(jià)于 a = a + 10

3、-=

var a = 10;
a -= 10;
console.log(a); //=> 0

a -= 10 等價(jià)于 a = a - 10

4、*=

var a = 10;
a *= 10;
console.log(a); //=> 100

a *= 10 等價(jià)于 a = a * 10

5、/+

var a = 10;
a /= 10;
console.log(a); //=> 1

a /= 10 等價(jià)于 a = a / 10

6、%=

var a = 10;
a %= 10;
console.log(a); //=> 0

a %= 10 等價(jià)于 a = a % 10

比較運(yùn)算符

1、==

• 比較符號(hào)兩邊的值是否相等，不管數(shù)據(jù)類型
• 1 == '1'
• 兩個(gè)的值是一樣的，所以得到 true

2、===

• 比較符號(hào)兩邊的值和數(shù)據(jù)類型是否都相等
• 1 === '1'
• 兩個(gè)值雖然一樣，但是因?yàn)閿?shù)據(jù)類型不一樣，所以得到 false

3、!=

• 比較符號(hào)兩邊的值是否不等
• 1 != '1'
• 因?yàn)閮蛇叺闹凳窍嗟鹊?，所以比較他們不等的時(shí)候得到 false

4、!==

• 比較符號(hào)兩邊的數(shù)據(jù)類型和值是否不等
• 1 !== '1'
• 因?yàn)閮蛇叺臄?shù)據(jù)類型確實(shí)不一樣，所以得到 true

5、>=

• 比較左邊的值是否 大于或等于 右邊的值
• 1 >= 1 true
• 1 >= 0 true
• 1 >= 2 false

6、<=

• 比較左邊的值是否 小于或等于 右邊的值
• 1 <= 2 true
• 1 <= 1 true
• 1 <= 0 false

7、>

• 比較左邊的值是否 大于 右邊的值
• 1 > 0 true
• 1 > 1 false
• 1 > 2 false

8、<

• 比較左邊的值是否 小于 右邊的值
• 1 < 2 true
• 1 < 1 false
• 1 < 0 false

邏輯運(yùn)算符

1、&&

• 進(jìn)行 且 的運(yùn)算
• 符號(hào)左邊必須為 true 并且右邊也是 true，才會(huì)返回 true
• 只要有一邊不是 true，那么就會(huì)返回 false
• true && true true
• true && false false
• false && true false
• false && false false

2、||

• 進(jìn)行 或 的運(yùn)算
• 符號(hào)的左邊為 true 或者右邊為 true，都會(huì)返回 true
• 只有兩邊都是 false 的時(shí)候才會(huì)返回 false
• true || true true
• true || false true
• false || true true
• false || false false

3、!

• 進(jìn)行 取反 運(yùn)算
• 本身是 true 的，會(huì)變成 false
• 本身是 false 的，會(huì)變成 true
• !true false
• !false true

自增自減運(yùn)算符（一元運(yùn)算符）

1、++

• 進(jìn)行自增運(yùn)算
• 分成兩種，前置++ 和 后置++
• 前置++，會(huì)先把值自動(dòng) +1，再返回

var a = 10;
console.log(++a);
// 會(huì)返回 11，并且把 a 的值變成 11

• 后置++，會(huì)先把值返回，在自動(dòng)+1

var a = 10;
console.log(a++);
// 會(huì)返回 10，然后把 a 的值變成 11

2、--

• 進(jìn)行自減運(yùn)算
• 分成兩種，前置-- 和 后置--
• 和 ++ 運(yùn)算符道理一樣

?
?
?
?
本文轉(zhuǎn)自知乎號(hào)：千鋒HTML5學(xué)院