day01-Javascript基礎語法

HTML ：標記語言
JavaScript ：編程語言

markdown

序言

JavaScript發(fā)展歷史（JS）

1. 1994年颁虐，網(wǎng)景公司(Netscape)發(fā)布了Navigator瀏覽器0.9版炮障，這是世界上第一款比較成熟的網(wǎng)絡瀏覽器值漫，轟動一時。但是這是一款名副其實的瀏覽器--只能瀏覽頁面芦疏，瀏覽器無法與用戶互動,當時解決這個問題有兩個辦法阔逼，一個是采用現(xiàn)有的語言,許它們直接嵌入網(wǎng)頁她按。另一個是發(fā)明一種全新的語言床未。
    liveScript ==> javaScript ==> ECMAscript

2. 1995年Sun公司將Oak語言改名為Java，正式向市場推出俘侠。Sun公司大肆宣傳象缀，許諾這種語言可以"一次編寫，到處運   行"(Write Once, Run Anywhere)爷速，它看上去很可能成為未來的主宰央星。

3. 網(wǎng)景公司動了心，決定與Sun公司結成聯(lián)盟

4. 34歲的系統(tǒng)程序員Brendan Eich登場了惫东。1995年4月莉给，網(wǎng)景公司錄用了他,他只用10天時間就把Javascript設計出來了。（多肽語言）

5. 
    (1)借鑒C語言的基本語法
    (2)借鑒Java語言的數(shù)據(jù)類型和內存管理
    (3)借鑒Scheme語言廉沮，將函數(shù)提升到"第一等公民"(first class)的地位
    (4)借鑒Self語言颓遏，使用基于原型(prototype)的繼承機制

JavaScript能干什么

1. 常見的網(wǎng)頁效果【表單驗證，輪播圖滞时。叁幢。∑夯】
2. 與H5配合實現(xiàn)游戲【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
3. 實現(xiàn)應用級別的程序【http://naotu.baidu.com】
4. 實現(xiàn)統(tǒng)計效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在線學編程【https://codecombat.163.com/play/】
7. js可以實現(xiàn)人工智能【面部識別】
8. 曼玩。。刽漂。

JavaScript的組成

1. ECMASCRIPT: 定義了javascript的語法規(guī)范,描述了語言的基本語法和數(shù)據(jù)類型
2. BOM (Browser Object Model): 瀏覽器對象模型
  - 有一套成熟的可以操作瀏覽器的 API演训，通過 BOM 可以操作瀏覽器弟孟。比如： 彈出框贝咙、瀏覽器跳轉、獲取分辨率等
3. DOM (Document Object Model): 文檔對象模型
  - 有一套成熟的可以操作頁面元素的 API拂募，通過 DOM 可以操作頁面中的元素庭猩。比如： 增加個 div窟她，減少個 div，給 div 換個位置等

總結： JS 就是通過固定的語法去操作瀏覽器和標簽結構來實現(xiàn)網(wǎng)頁上的各種效果

JavaScript代碼的書寫位置

和 css 一樣蔼水，我們的 js 也可以有多種方式書寫在頁面上讓其生效
js 也有多種方式書寫震糖，分為 行內式， 內嵌式趴腋，外鏈式

行內式 JS 代碼（不推薦）

寫在標簽上的 js 代碼需要依靠事件（行為）來觸發(fā)

<!-- 寫在 a 標簽的 href 屬性上 -->
<a href="javascript:alert('我是一個彈出層');">點擊一下試試</a>

<!-- 寫在其他元素上 -->
<div onclick="alert('我是一個彈出層')">點一下試試看</div>

<!--
    注：onclick 是一個事件（點擊事件）吊说，當點擊元素的時候執(zhí)行后面的 js 代碼
-->

內嵌式 JS 代碼

內嵌式的 js 代碼會在頁面打開的時候直接觸發(fā)

<!-- 在 html 頁面書寫一個 script 標簽，標簽內部書寫 js 代碼 -->
<script type="text/javascript">
    alert('我是一個彈出層')
</script>

<!--
    注：script 標簽可以放在 head 里面也可以放在 body 里面
-->

外鏈式 JS 代碼（推薦）

外鏈式 js 代碼只要引入了 html 頁面优炬，就會在頁面打開的時候直接觸發(fā)
新建一個 .js 后綴的文件颁井，在文件內書寫 js 代碼，把寫好的 js 文件引入 html 頁面

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

<!-- 我是一個 html 文件 -->

<!-- 通過 script 標簽的 src 屬性蠢护，把寫好的 js 文件引入頁面 -->
<script src="index.js"></script>

<!-- 一個頁面可以引入多個 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

JS 中的注釋

學習一個語言雅宾，先學習一個語言的注釋，因為注釋是給我們自己看的葵硕，也是給開發(fā)人員看的
寫好一個注釋眉抬，有利于我們以后閱讀代碼

單行注釋

一般就是用來描述下面一行代碼的作用
可以直接寫兩個 / ，也可以按 ctrl + /

// 我是一個單行注釋

// 下面代碼表示在瀏覽器里面出現(xiàn)一個彈出層
alert('我是一個彈出層')

多行注釋

一般用來寫一大段話懈凹，或者注釋一段代碼
可以直接寫 /**/ 然后在兩個星號中間寫注釋蜀变，也可以按 shift + alt + a

/*
    我是一個多行注釋
*/

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

變量（重點）

變量指的是在程序中保存數(shù)據(jù)的一個容器
變量是計算機內存中存儲數(shù)據(jù)的標識符，根據(jù)變量名稱可以獲取到內存中存儲的數(shù)據(jù)
也就是說介评，我們向內存中存儲了一個數(shù)據(jù)昏苏，然后要給這個數(shù)據(jù)起一個名字，為了是我們以后再次找到他
語法： var 變量名 = 值

定義變量及賦值

// 定義一個變量
var num;

// 給一個變量賦值
num = 100;

// 定義一個變量的同時給其賦值
var num2 = 200;

注意：
1. 一個變量名只能存儲一個值
2. 當再次給一個變量賦值的時候威沫，前面一次的值就沒有了
3. 變量名稱區(qū)分大小寫（JS 嚴格區(qū)分大小寫）

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

規(guī)則：必須遵守的贤惯，不遵守就是錯
1. 一個變量名稱可以由 數(shù)字、字母棒掠、英文下劃線（_）孵构、美元符號（$） 組成
2. 嚴格區(qū)分大小寫
3. 不能由數(shù)字開頭，不要使用中文漢字命名
4. 不能是 保留字 或者 關鍵字
5. 不要出現(xiàn)空格
規(guī)范：建議遵守的（開發(fā)者默認）烟很，不遵守不會報錯
1. 變量名盡量有意義（語義化）
2. 遵循駝峰命名規(guī)則颈墅，由多個單詞組成的時候，從第二個單詞開始首字母大寫

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

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

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

數(shù)值類型（number）
- 一切數(shù)字都是數(shù)值類型（包括二進制雾袱，十進制恤筛，十六進制等）
- NaN（not a number），一個非數(shù)字
字符串類型（string）
- 被引號包裹的所有內容（可以是單引號也可以是雙引號）
布爾類型（boolean）
- 只有兩個（true 或者 false）
null類型（null）
- 只有一個芹橡，就是 null毒坛，表示空的意思
undefined類型（undefined）
- 只有一個，就是 undefined，表示沒有值的意思

復雜數(shù)據(jù)類型（暫時先不講）

對象類型（object）
函數(shù)類型（function）
煎殷。屯伞。。

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

既然已經把數(shù)據(jù)分開了類型豪直，那么我們就要知道我們存儲的數(shù)據(jù)是一個什么類型的數(shù)據(jù)
使用 typeof 關鍵字來進行判斷

// 第一種使用方式
var n1 = 100;
console.log(typeof n1);

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

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

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

// 如果變量是一個數(shù)字
var n1 = 100;
console.log(isNaN(n1)); //=> false

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

數(shù)據(jù)類型轉換

數(shù)據(jù)類型之間的轉換劣摇，比如數(shù)字轉成字符串，字符串轉成布爾弓乙，布爾轉成數(shù)字等

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

Number(變量)
- 可以把一個變量強制轉換成數(shù)值類型
- 可以轉換小數(shù)末融，會保留小數(shù)
- 可以轉換布爾值
- 遇到不可轉換的都會返回 NaN
parseInt(變量)

從第一位開始檢查，是數(shù)字就轉換暇韧，直到一個不是數(shù)字的內容
- 開頭就不是數(shù)字滑潘，那么直接返回 NaN
- 不認識小數(shù)點，只能保留整數(shù)

parseFloat(變量)
- 從第一位開始檢查锨咙，是數(shù)字就轉換语卤，知道一個不是數(shù)字的內容
- 開頭就不是數(shù)字，那么直接返回 NaN
- 認識一次小數(shù)點
除了加法以外的數(shù)學運算
- 運算符兩邊都是可運算數(shù)字才行
- 如果運算符任何一遍不是一個可運算數(shù)字酪刀，那么就會返回 NaN
- 加法不可以用

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

變量.toString()
- 有一些數(shù)據(jù)類型不能使用 toString() 方法粹舵，比如 undefined 和 null
String(變量)
- 所有數(shù)據(jù)類型都可以
使用加法運算
- 在 JS 里面，+ 由兩個含義
- 字符串拼接：只要 + 任意一邊是字符串骂倘，就會進行字符串拼接
- 加法運算：只有 + 兩邊都是數(shù)字的時候眼滤，才會進行數(shù)學運算

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

Boolean(變量)
- 在 js 中，只有 ''历涝、0诅需、null、undefined荧库、NaN堰塌，這些是 false，其余都是 true

運算符

就是在代碼里面進行運算的時候使用的符號分衫，不光只是數(shù)學運算场刑，我們在 js 里面還有很多的運算方式

數(shù)學運算符

只有符號兩邊都是數(shù)字的時候才會進行加法運算
- 只要符號任意一邊是字符串類型，就會進行字符串拼接

-
- 會執(zhí)行減法運算
- 會自動把兩邊都轉換成數(shù)字進行運算
*
- 會執(zhí)行乘法運算
- 會自動把兩邊都轉換成數(shù)字進行運算
/
- 會執(zhí)行除法運算
- 會自動把兩邊都轉換成數(shù)字進行運算
%
- 會執(zhí)行取余運算
- 會自動把兩邊都轉換成數(shù)字進行運算

賦值運算符

=
- 就是把 = 右邊的賦值給等號左邊的變量名
- var num = 100
- 就是把 100 賦值給 num 變量
- 那么 num 變量的值就是 100

+=

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

a += 10 等價于 a = a + 10

-=

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

a -= 10 等價于 a = a - 10

*=

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

a *= 10 等價于 a = a * 10

/+

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

a /= 10 等價于 a = a / 10

%=

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

a %= 10 等價于 a = a % 10

比較運算符

==
- 比較符號兩邊的值是否相等蚪战，不管數(shù)據(jù)類型
- 1 == '1'
- 兩個的值是一樣的牵现，所以得到 true
===
- 比較符號兩邊的值和數(shù)據(jù)類型是否都相等
- 1 === '1'
- 兩個值雖然一樣，但是因為數(shù)據(jù)類型不一樣邀桑，所以得到 false
!=
- 比較符號兩邊的值是否不等
- 1 != '1'
- 因為兩邊的值是相等的瞎疼，所以比較他們不等的時候得到 false
!==
- 比較符號兩邊的數(shù)據(jù)類型和值是否不等
- 1 !== '1'
- 因為兩邊的數(shù)據(jù)類型確實不一樣，所以得到 true
>=
- 比較左邊的值是否 大于或等于 右邊的值
- 1 >= 1 結果是 true
- 1 >= 0 結果是 true
- 1 >= 2 結果是 false
<=
- 比較左邊的值是否 小于或等于 右邊的值
- 1 <= 2 結果是 true
- 1 <= 1 結果是 true
- 1 <= 0 結果是 false
>
- 比較左邊的值是否大于右邊的值
- 1 > 0 結果是 true
- 1 > 1 結果是 false
- 1 > 2 結果是 false
<
- 比較左邊的值是否小于右邊的值
- 1 < 2 結果是 true
- 1 < 1 結果是 false
- 1 < 0 結果是 false

強化練習1

為抵抗洪水壁畸，戰(zhàn)士連續(xù)作戰(zhàn)89小時贼急，編程計算共多少天零多少小時？
小明要到美國旅游，可是那里的溫度是以華氏度為單位記錄的竿裂。
- 它需要一個程序將華氏溫度（80度）轉換為攝氏度玉吁，并以華氏度和攝氏度為單位分別顯示該溫度照弥。
- 提示：攝氏度與華氏度的轉換公式為：攝氏度 = 5/9.0*(華氏度-32)保留3位小數(shù)

邏輯運算符

&&
- 進行且的運算
- 符號左邊必須為 true 并且右邊也是 true腻异，才會返回 true
- 只要有一邊不是 true，那么就會返回 false
- true && true 結果是 true
- true && false 結果是 false
- false && true 結果是 false
- false && false 結果是 false
||
- 進行或的運算
- 符號的左邊為 true 或者右邊為 true这揣，都會返回 true
- 只有兩邊都是 false 的時候才會返回 false
- true || true 結果是 true
- true || false 結果是 true
- false || true 結果是 true
- false || false 結果是 false
!
- 進行取反運算
- 本身是 true 的悔常，會變成 false
- 本身是 false 的，會變成 true
- !true 結果是 false
- !false 結果是 true

自增自減運算符（一元運算符）

++

進行自增運算
分成兩種给赞，前置++ 和 后置++

前置++机打，會先把值自動 +1，在返回

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

后置++残邀，會先把值返回，在自動+1

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

--
- 進行自減運算
- 分成兩種芥挣，前置-- 和 后置--
- 和 ++ 運算符道理一樣

強化練習2

掌握邏輯運算的意義
掌握八進制、十六進制的寫法
掌握NaN的含義
掌握Number函數(shù)的轉換結果