一、JavaScript概述

1.1、JavaScript可以做什么

1.1.1、頁面的各種動畫效果

1.1.2、頁面的點擊/移入響應

1.1.3、對客戶端數據進行驗證

1.1.4、各種頁面小游戲

1.1.5、用途總結

嵌入動態文本于HTML頁面。

對瀏覽器事件做出響應(對于用戶的操作給予響應)。

讀寫HTML元素。

在數據被提交到服務器之前驗證數據(客戶端數據校驗)。

檢測訪客的瀏覽器信息。

控制cookies，包括創建和修改等。

基于Node.js技術進行服務器端編程。

JavaScript 發展到現在幾乎無所不能。
1. 網頁特效

2. 服務端開發(Node.js)

3. 命令行工具(Node.js)

4. 桌面程序(Electronjs)

5. App(Cordova)

6. 控制硬件-物聯網(Ruff)

7. 游戲開發(cocos2d-js)

1.2、Why JavaScript

類似于JavaScript的語言有很多，比如: 微軟推出的JScript，CEnvi推出的 ScriptEase

1、所有主流瀏覽器都支持JavaScript(支持程度廣)。

2、目前，全世界大部分網頁都使用JavaScript(用戶群體廣)。

3、它可以讓網頁呈現各種動態效果，做為一個Web開發師，如果你想提供漂亮的網頁、令用戶滿意的上網體驗，JavaScript是必不可少的工具(特點)。

4、易學性，學習環境無外不在，只要有文本編輯器，就能編寫JavaScript程序。它是基于Java簡化設計而來。

1.3、JavaScript基礎概述

JavaScript是一種解釋型或即時編譯型的高級編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式（如函數式編程）風格。

什么是腳本語言?

腳本語言是為了縮短傳統的編寫-編譯-運行（edit-compile-run）過程而創建的計算機語言。

一個腳本通常是解釋執行而非編譯。腳本語言通常都有簡單、易學、易用的特性，目的就是希望能讓程序員快速完成程序的編寫工作。

用最簡單的語言總結一下，腳本語言就是，邊解釋邊運行，非腳本語言，整體編譯后，再運行。腳本語言必須運行到錯誤的地方，才會報錯，而非腳本語言，在編譯的時候，會報錯。

什么是基于原型編程?

基于原型的編程是面向對象編程的一種形式，通過復制已經存在的原型對象來實現面向對象，無與基于類的編程較大的區別是沒有Class關鍵字，但是有類的概念。基于原型的編程也可以理解成基于實例的編程。

基于原型的系統可以在程序運行時對原型進行修改，基于類(Java， C+)的語言則很難實現這一點。

什么是編程范式?

編程范式是程序語言背后的思想。代表了程序設計者認為程序應該如何被構建和執行的看法。常見的編程范式有：過程式（命令式），面向對象，函數式，泛型編程等。

和C++等語言類似，JS支持多范式（paradigms）編程。我們常常混合這些范式來完成一些大型Web項目。

JS支持3種編程范式：命令式、面向對象和函數式。

JavaScript的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

JavaScript主要用于HTML的頁面，嵌入在HTML的源碼中。

JavaScript 是互聯網上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。它存在于全世界所有 Web 瀏覽器中，能夠給頁面添加動態效果和動態交互。

JavaScript最初的目的是為了處理表單的驗證操作。

1.4、JavaScript組成部分

JavaScript是由ECMAScript、文檔對象模型（Document Object Model:DOM）、瀏覽器對象模型（Brower Object Model:BOM）三部分構成。

ECMAScript，描述了該語言的基礎語法和基本對象(包含內置對象)，JavaScript的核心，描述了語言的基本語法(變量、運算符、表達式、流程控制語句、array等)和數據類型(數字、字符串、布爾、函數、對象(obj、[]、{}、null)、未定義)，ECMAScript是一套標準.

文檔對象模型（DOM），描述處理網頁內容的方法和接口。通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性，可以對其中的內容進行修改和刪除，同時也可以創建新的元素；DOM（文檔對象模型）是 HTML 和 XML 的應用程序接口（API）。DOM 將把整個頁面規劃成由節點層級構成的文檔。HTML 或 XML 頁面的每個部分都是一個節點的衍生物。

瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象，例如可以移動，調整瀏覽器大小的window對象，可以用于導航的location對象與history對象，可以獲取瀏覽器，操作系統與用戶屏幕信息的navigator與screen對象。

1.5、JavaScript特點

JavaScript是一種屬于瀏覽器的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的(但寫成單獨的js文件有利于結構和行為的分離)。

弱類型 : 聲明變量無需指定數據類型，統一使用var來聲明變量；聲明的變量可以存儲任意類型的值；

解釋性 : JavaScript是一種解釋型的腳本語言，C、Java等語言先編譯后執行，而JavaScrip源代碼不需要經過編譯，直接在瀏覽器上運行時被解釋。

基于對象 : Javascript是一種基于對象的語言，能運用自己已經創建了的對象，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用。

簡單性 : JavaScript語言中采用的是弱類型的變量類型，對使用的數據類型未做出嚴格的要求，是基于Java基本語句和控制的腳本語言，其設計簡單緊湊。

事件驅動(Event Driven) 和動態性 : JavaScript是一種采用事件驅動（所謂事件驅動，指的是在頁面執行了某種操作所產生的動作，此動作稱為“事件”。）的腳本語言，它不需要經過Web服務器就可以對用戶的輸入做出響應。在訪問一個網頁時，鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應（針對于用戶在頁面中的操作，都是基于事件驅動）。

跨平臺性：JavaScript腳本語言不依賴于操作系統，僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫后可以帶到任意機器上使用，前提上機器上的瀏覽器支 持JavaScript腳本語言，目前JavaScript已被大多數的瀏覽器所支持。

不同于服務器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要服務器的支持。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。

HTML5的出現更是突出了JavaScript的重要性，例如HTML5的繪圖支持、本地存儲、離線應用、客戶端通信等，都大量使用了JavaScript。

而隨著服務器的強壯，雖然程序員更喜歡運行于服務端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。同時，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進行支持。隨著引擎如V8和框架如Node.js的發展，及其事件驅動及異步IO等特性，JavaScript逐漸被用來編寫服務器端程序。

1.6、JavaScript歷史

在1995年時，由Netscape(網景)公司的Brendan Eich(布蘭登·艾奇)，在網景導航者瀏覽器上首次設計實現而成。JavaScript是甲骨文公司的注冊商標。

Netscape在最初將其腳本語言命名為LiveScript，后來因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。

JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規范也借自Java。但JavaScript的主要設計原則源自Self和Scheme。

JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運行。

為了統一規格，因為JavaScript兼容于ECMA標準，因此也稱為ECMAScript。為了互用性，Ecma國際（前身為歐洲計算機制造商協會）創建了ECMA-262標準（ECMAScript）。兩者都屬于ECMAScript的實現。盡管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。

發展初期，JavaScript的標準并未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。

JavaScript 已經由 ECMA（歐洲電腦制造商協會）通過 ECMAScript 實現語言的標準化。

ECMA這個組織的目標是評估，開發和認可電信和計算機標準。

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達式 添加 try/catch
	ECMAScript 4	沒有發布
2009	ECMAScript 5	添加 "strict mode"，嚴格模式 添加 JSON 支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增加指數運算符 (**) 增加 Array.prototype.includes

ECMAScript 6 也稱為 ECMAScript 2015。

ECMAScript 7 也稱為 ECMAScript 2016。

1.7、JavaScript的引入方式

HTML 中的腳本必須位于 <script>與</script> 標簽之間。

腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

引入JavaScript需要使用script標簽：

<script>標簽用于定義客戶端腳本，script 元素即可包含腳本語句，又可通過 src 屬性指向外部腳本文件。

如果想在頁面上使用JavaScript，必須使用<script>標簽，把JavaScript源碼放入<script>和</script>之間。
<script>標簽屬性:
? type：指定腳本的類型。
? src：指定外部腳本的url。
如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽。

<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。

<script> 和 </script> 之間的代碼行包含了 JavaScript:

<script>
	//定義JS代碼
</script>

//引入外部JS文件
<script src="url"></script>

瀏覽器會解釋并執行位于<script> 和 </script>之間的 JavaScript 代碼 .

那些老舊的實例可能會在 <script> 標簽中使用 type="text/javascript"。現在已經不必這樣做了。
    
JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。

1.7.1、行內引入JavaScript

在標簽事件屬性中填寫JavaScript代碼或調用函數時，調用函數時不是 事件=函數名， 而是 事件=函數名+()

<button onclick="alert('我是一個警告框')" type="button">點擊這里</button>

<head>
    <script>
        function myfunction(){
            document.getElementById("demo").innerHTML="onclick事件觸發";
        }
	</script>
</head>
<body>
    <h1 id="demo">一個段落</h1>
    <button onclick="myfunction()" type="button">點擊這里</button>
</body>

1.7.2、內部引入JavaScript

您可以在 HTML 文檔中放入不限數量的腳本。

腳本可位于 HTML 的<body> 或 <head> 部分中，或者同時存在于兩個部分中。

通常的做法是把函數放入<head> 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。

<!DOCTYPE html>
<html>
<head>
<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
    }
</script>
</head>
<body>
    <h1>我的 Web 頁面</h1>
    <p id="demo">一個段落</p>
    <button type="button" onclick="myFunction()">嘗試一下</button>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
    <h1>我的 Web 頁面</h1>
    <p id="demo">一個段落</p>
    <button type="button" onclick="myFunction()">嘗試一下</button>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
        }
    </script>
</body>
</html>

1.7.3、外部引入JavaScript

也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。

外部 JavaScript 文件的文件擴展名是 .js。

如需使用外部文件，請在 <script>標簽的 "src" 屬性中設置該 .js 文件：

<!DOCTYPE html>
<html>
<body>
	<script src="myScript.js"></script>
</body>
</html>

如果把JS源代碼直接寫在某個具體的頁面上時(通常放在<head>標簽下)，這樣的成為內部的JavaScript。

但是當JS 代碼越來越龐大的時候，我們最好把它獨立另存為一個JS文件，擴展名為.js，然后在頁面上引入即可，這樣的稱為外部的JS文件，它具有維護性高、可緩存(加載一次，無需加載)、方便未來擴展、復用性高等特點。

注：引用外部js文件的script標簽中不可以寫JavaScript代碼

1.8、擴展知識點

document.write() 的常用操作:

? 除了直接輸出文字外，它還支持帶有HTML標簽的輸出內容。
? 比如直接輸出一個標題
? 比如在輸出內容中加入br換行標簽
? 比如輸入一張圖片
? ......等等

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個 Web 頁面</h1>

<p>我的第一個段落。</p>

<script>
    document.write("<h1>我是H1的內容</h1>");
</script>

</body>
</html>

請使用 document.write() 僅僅向文檔輸出寫內容。

如果在文檔已完成加載后執行 document.write，整個 HTML 頁面將被覆蓋。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個 Web 頁面</h1>

<p>我的第一個段落。</p>

<button onclick="myFunction()">點我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</html>

alert()方法:

? alert()方法會彈出警告框。
? 可以添加多個alert();他們會按照順序依次執行。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個頁面</h1>
<p>我的第一個段落。</p>

<script>
	window.alert(5 + 6);
</script>

</body>
</html>

console.log():

寫入到瀏覽器的控制臺

如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。

瀏覽器中使用 F12 來啟用調試模式， 在調試窗口中點擊 "Console" 菜單。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個 Web 頁面</h1>

<script>
	a = 5;
	b = 6;
	c = a + b;
	console.log(c);
</script>

</body>
</html>

innerHTML:

寫入內容到 HTML 元素

<!DOCTYPE html>
<html>
<body>

<h1>我的第一個 Web 頁面</h1>

<p id="demo">我的第一個段落</p>

<script>
    //需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
	document.getElementById("demo").innerHTML = "段落已修改。";
    //document.getElementById("demo") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
	//innerHTML = "段落已修改。" 是用于修改元素的 HTML 內容(innerHTML)的 JavaScript 代碼。
</script>

</body>
</html>

click事件的基本用法:

? click事件是最常用的事件之一，所謂事件可以簡單理解為用戶的操作。
? 為了方便之后的學習，你應該先掌握著個簡單事件的基本用法。

1.9、JavaScript注釋及注意事項

單行注釋:

// 單行注釋內容
var name = 'hm';

多行注釋:

/* 多行注釋內容 */
/*
	var age = 18;
	var name = 'zs';
	console.log(name, age);
*/	

文檔注釋

/**  文檔注釋內容 */

注意事項：

1、字母的大小寫，Name和name是兩個不同的標識符。

2、空格和換行。這一點和CSS代碼規則類似:多余的空格會被忽略，可以將一行代碼分成多行寫。

3、分號作為一個語句的結束標志，分號之后是新語句的開始。雖然省略不寫通常也是沒有問題的，但還是建議大家寫上。

二、JavaScript變量和數據類型

2.1、標識符

所謂標識符，就是指變量、函數、屬性的名字，或者函數的參數（凡是可以自己起名字的地方，都叫標識符）。

標識符命名規范(包括函數名，變量等):

• 由字母、數字、下劃線、$符號組成;
• 不能以數字開頭
• 命名不能是系統的關鍵字或保留字：比如new ，if，class......；關鍵字:賦予特殊含義的單詞
• 區分大小寫
• 命名最好用有意義的名稱(見名之意)。比如說name，people......
• 駝峰原則: 首字母小寫，多個單詞組成，從第二個單詞的首字母開始都大寫; 比如: getNameById();
• 常量命名: 全部大寫，多個單詞組成，每個單詞之間由下劃線分割;APPLICATION_NAME

需要注意的是ECMAScript 中的一切，包括變量、函數名和操作符(typeof、instanceof、void等)都是嚴格區分大小寫的。例如：text 和Text 表示兩種不同的變量。

下面哪些變量名不合法?

a	    
1
age18
18age
name
$name
_sex
&sex
theworld  theWorld

2.2、變量

1、什么是變量?

可以發生改變的量就是變量，變量可以看做是存儲數據的容器。比如一個瓶子，它既可以裝入醬油、醋；也可以裝入茅臺和二鍋頭......。

變量是計算機內存中存儲數據的標識符，根據變量名稱可以獲取到內存中存儲的數據

?使用變量可以方便的獲取或者修改內存中的數據。

2、變量的命名:
?可以給變量起一個簡短名稱，這個名稱就是變量名。比如 x，或者更有描述性的名稱，比如 age、name等。變量名對大小寫敏感（y 和 Y 是兩個不同的變量）且必須以字母或下劃線開始。可以通過其名稱來引用一個變量，以此顯示或改變它的值。

3、變量的聲明:
在 JavaScript 中創建變量通常稱為“聲明”變量，使用關鍵字 var來聲明變量。

向變量賦值，使用等號;可以在聲明變量時對其賦值，也可以先聲明后賦值。

?可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗號分隔變量即可

分號用于分隔 JavaScript 語句。通常我們在每條可執行的語句結尾添加分號。使用分號的另一用處是在一行中編寫多條語句。在 JavaScript 中，用分號來結束語句是可選的。

// 聲明一個變量count：
var count;

// 聲明一個變量username：
var username;

在以上聲明之后，變量并沒有值，僅僅只是變量聲明，不過可以在聲明它們時向變量賦值，”=”是賦值符號，變量名在賦值符號符號的左邊，而需要向變量賦的值在賦值符號的右側。

// 變量聲明并賦值
var count = 5; 

var username= "Volvo";  

也可以先聲明后賦值。

// 先聲明后賦值
var count ;      
count=100;

var username;      
username = “zhangsan”;

注釋：在為變量賦文本值時，請為該值加引號（單引號或雙引號都可以）。

如果所賦值的變量還未進行過聲明，該變量會自動聲明。

// 這些語句：
x = 5; carname = "Volvo";

// 與這些語句的效果相同：
var x = 5; var carname = "Volvo";

如果再次聲明了 JavaScript 變量，該變量也不會丟失其原始值。

var x = 5; 

var x; // 5

在以上語句執行后，變量 x 的值仍然是 5。在重新聲明該變量時，x 的值不會被重置或清除。
但是如果是在下面這種情況下，JavaScript 變量的值會改變

var x = 5; 

var x = 7;

此時頁面輸出的值為7。

JavaScript也允許一次定義多個變量：

var a，b，v;

還可以在定義變量的同時給變量賦初始值：

var a=12，b，c=34;

如果一個變量沒有賦值，它的值是undefined(未定義)。

溫馨提示：
?在一個HTML文檔使用script標簽嵌入多個JS語句的時候，這幾個語句之間是相通的，或者說是有關聯的。

4、變量在內存中的存儲

var name = "zhangsan";
var age = 18;

5、變量的簡單使用:

1、小明今年20歲，小胡比小明大15歲，請問小胡今年多大?

<script>
    //1、聲明一個變量,用來存儲小明的年齡
    var xiaoming_age = 20;
    //2、聲明一個變量,用來存儲小胡的年齡
    var xiaohu_age;
    //3、通過小明的年齡運算給小胡賦值
    xiaohu_age = xiaoming_age + 15;
    //4、輸出小胡的名字
    alert("小胡的年齡是:"+xiaohu_age);
</script>

2、在淘寶網購物，一件衣服55.4元，如果買4件衣服，共花多少錢?

<script>
    //1、聲明一個變量,用來存儲衣服單價
    var price = 55.4;
    //2、聲明一個變量,用來存儲衣服的數量
    var count = 4;
    //3、計算得出總價格,并使用變量存儲總價格
    var money = price * count;
    alert("衣服的總價格是:"+money);
</script>

3、思維題

?交換兩個變量的值
?不使用臨時變量，交換兩個數值變量的值

var n1 = 5;
var n2 = 6;

n1 = n1 + n2;   // 5 + 6 = 11
n2 = n1 - n2;   // 11 - 6 = 5;
n1 = n1 - n2;   // 11 - 5 = 6;
console.log(n1, n2);

2.3、關鍵字、保留字

ECMA-262 描述了一組具有特定用途的關鍵字。這些關鍵字可用于表示控制語句的開始或結束，或者用于執行特定操作等。按照規則，關鍵字也是語言保留的，不能用作標識符。以下就是ECMAScript的全部關鍵字。

關鍵字:

break	do	instanceof	typeof
case	else	new	var
catch	finally	return	void
continue	for	switch	while
debugger	function	this	with
default	if	throw	delete
in	try

保留字:

ECMA-262 還描述了另外一組不能用作標識符的保留字。盡管保留字在這門語言中還沒有任何特定的用途。但它們有可能在將來被用作關鍵字。

abstract	enum	int	short
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public

2.4、數據類型

Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。

Javascript提供了五種原始的數據類型和兩種特殊數據類型用來處理數據和文字。

而變量提供存放信息的地方，表達式則可以完成較復雜的信息處理。

原始數據(基本數據)類型:

對象(復雜數據)類型:

JavaScript數據類型分為以下幾種:

字符串（String）、
數值(Number)、
布爾(Boolean)、
數組(Array)、
對象(Object)、
空（Null）、
未定義（Undefined）、
函數

JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型：

var x;               // x 為 undefined
var x = 5;           // 現在 x 為數字
var x = "John";      // 現在 x 為字符串

2.4.1、字符串（String）

字符串是存儲字符（比如 "Bill Gates"）的變量。

字符串可以是引號中的任意文本。您可以使用單引號或雙引號;

變量字符串：如：var text="HTML5視頻教程"

可以使用"+"進行字符串的連接。

注:字符串類型可以和任何類型做+運算;

• 字符串字面量

'程序猿','程序媛',"JavaScript"

• 轉義符

思考：如何打印以下字符串。

我是一個"正直"的人 

我很喜歡"程序員'大牛'"

在 JavaScript 中，字符串使用單引號或者雙引號來起始或者結束。那么如何輸出單引號或者雙引號呢？就要用到轉義字符。

JavaScript中常用的轉義字符：

• 字符串長度

  length屬性用來獲取字符串的長度

  var str = 'Hello World';
  console.log(str.length);
  

• 字符串拼接

  字符串拼接使用 + 連接

  console.log(11 + 11);
  console.log('hello' + ' world');
  console.log('100' + '100');
  console.log('11' + 11);
  console.log('male:' + true);
  

  1. 兩邊只要有一個是字符串，那么+就是字符串拼接功能
  2. 兩邊如果都是數字，那么就是算術功能。

2.4.2、數值（Number）

? JavaScript 只有一種數值類型。

? 數值可以帶小數點，也可以不帶。

? 極大或極小的數字可以通過科學（指數）計數法來書寫：3e4

? 數值可以通過運算符進行計算。

? 浮點數值的最高精度是16位小數，但是在進行算術計算時其精度遠遠不如整數。例如，0.1加0.2的結果不是0.3， 而是0.30000000000000004。這個舍入誤差會導致無法測試特定的浮點數值。

? 數字可以寫成十進制、八進制、十六進制。

? 八進制在js中表示是第一位一定要是0，后面就是八進制字數序列（0~7）

? 十六進制字面量前兩位必須是0x，后面跟十六進制數字（0_9及AF）。字母A~F不區分大小寫。

溫馨提示：

? 科學（指數）計數法、八進制、十六進制表示的數字在輸出時統統會轉換成十進制。

• 數值字面量：數值的固定值的表示法

110 1024  60.5

• 進制

// 十進制
	var num = 9;
	進行算數計算時，八進制和十六進制表示的數值最終都將被轉換成十進制數值。
    
// 十六進制
	var num = 0xA;
	數字序列范圍：0~9以及A~F

// 八進制
    var num1 = 07;   // 對應十進制的7
    var num2 = 017;  // 對應十進制的15
    var num3 = 08;   // 對應十進制的8
    //數字序列范圍：0~7
    //如果字面值中的數值超出了范圍，那么前導零將被忽略，后面的數值將被當作十進制數值解析

• 浮點數
  • 浮點數的精度問題

// 浮點數
	var a = 10.2;
	var b = 20.3333;
	var n = 5e-324;   // 科學計數法  5乘以10的-324次方  

// 浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數
   var result = 0.1 + 0.2;    // 結果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);

• 數值范圍

最小值：Number.MIN_VALUE，這個值為： 5e-324

最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308

無窮大(正無窮)：Infinity

無窮小（負無窮）：-Infinity

• 數值判斷

NaN：not a number
	NaN 與任何值都不相等，包括他本身
	
isNaN: is not a number

2.4.3、布爾（Boolean）

布爾（邏輯）只能有兩個值：true 或 false。
計算機內部存儲：true為1，false為0

2.4.4、數組（Array）

2.4.4.1、為什么需要數組?

?之前學習的數據類型，只能存儲一個值(比如：Number/String。我們想存儲班級中所有學生的姓名，此時該如何存儲？

2.4.4.2、數組的概念

所謂數組，就是將多個元素（通常是同一類型）按一定順序排列放到一個集合中，那么這個集合我們就稱之為數組。

2.4.4.3、數組的定義及使用

數組是一個有序的列表，可以在數組中存放任意的數據，并且數組的長度可以動態的調整。

使用關鍵字new創建或[]

創建數組的方式：
? var 數組名=[數組值......值N];

? var 數組名= new Array(值1......值N);

? var 數組名= new Array();

可以通過數組的下標來訪問數組的元素。

? 數組元素的順序從0開始

? 數組名[0]=值;

? ? 數組名[1]=值;
? ? .....

/**
    JavaScript數組的創建方式:
        1. 構造函數創建
            var 數組名 = new Array();       -- 得到一個空數組
            var 數組名 = new Array(數組);   -- 創建指定長度的數組
            var 數組名 = new Array(值1，值2，值3...)   創建數組并賦予值

        2. 快捷創建
            var 數組名 = [];
            var 數組名 = [值1，值2，值3....];

    JavaScript數組的屬性:
        length屬性  用來獲取數組的長度

    JavaScript數組的特點:
        JS數組可以存儲任意數據類型
        JS數組自動擴容，不是固定長度
        
	注意事項:
        當JS變量只有聲明沒有賦值的時候，去調用，那么undefined
        當JS根本沒有這個變量的時候，去調用，那么報錯 arr is not defined
*/
var arr1 = new Array();
document.write("數組1的長度為:" + arr1.length + "<br>");

var arr2 = new Array(5);
document.write("數組2的長度為:" + arr2.length + "<br>");

//給數組存儲數據: 通過下標來存儲數據
//語法: 數組名[下標] = 值;
arr2[0] = 10;
arr2[1] = 20;
arr2[2] = 30;
arr2[3] = 40;
arr2[4] = 50;
arr2[10] = 100; 

//調用數組里面的值
//語法: 數組名[下標]
document.write("下標1的值是:" + arr2[1] + "<br>");
document.write("下標20的值是:" + arr2[20] + "<br>");
document.write("數組2的長度為:" + arr2.length + "<br>");

var arr3 = new Array(5,"Hello",true,44.22);
document.write("數組3的長度為:" + arr3.length + "<br>");

var arr4 = []; //創建一個空數組  類似于 new Array();
var arr5 = [1,3,5,7]; //創建數組并賦值
var arr6 = [7];
document.write("數組6的長度為:" + arr6.length + "<br>");

// 補充 :數組 的長度 可以動態改變
var scores = [];  // 空數組
console.log(scores.length);

// 清空數組
scores.length = 0;
console.log(scores);

2.4.4.4、遍歷數組

遍歷：遍及所有，對數組的每一個元素都訪問一次就叫遍歷。

數組遍歷的基本語法：

for(var i = 0; i < arr.length; i++) {
	// 數組遍歷的固定結構
}

// 獲取數組中的每一項，并打印（遍歷數組）
var names = ['zs', 'ls', 'ww', 'zl'];
for (var i = 0; i < names.length; i++) {
    console.log(names[i]);
}

//遍歷數組  先打印最后一項    長度 - 1    長度 - 2
var names = ['zs', 'ls', 'ww', 'zl'];
for (var i = names.length - 1; i >= 0; i--) {
    console.log(names[i]);
}

2.4.4.5、數組中新增元素

數組的賦值

// 格式：數組名[下標/索引] = 值;
// 如果下標有對應的值，會把原來的值覆蓋，如果下標不存在，會給數組新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給數組新增加了一個pink的值
arr[3] = "pink";

2.4.5、對象類型（Object）

? 對象由花括號定義。對象有屬性和方法組成

? 在括號內部，無論是對象的屬性還是方法都是以鍵和值對的形式 (key: value) 來定義。

? 多個屬性或方法由逗號分隔

例如:

var person1 = {
    id:1001，
    name:"張三"，
    age:12，
    eat:function(){
        alert("吃飯的行為");
    }，
    sleep:function(){
        alert("睡覺的行為");
    }
}

? 在Javascript中，所有的對象都繼承自Object對象。

? 對象沒有賦值的屬性，該屬性的值為undefined。

? 對象的方法是函數，后面會詳解;

對象屬性有兩種尋址方式：

對象名.屬性名

對象名["屬性名"]

你可以使用以下語法訪問對象方法：

objectName.methodName()

2.4.6、空（Null）

? Null也是一個只有一個值的數據類型，它的值就是null，任何變量只要給其賦值為null的話這個變量的數據類型就是Null類型。

? 可以通過將變量的值設置為 null 來清空變量。

2.4.7、未定義（Undefined）

? 這個值表示變量不含有值或未聲明。

? 這是一個很有意思的數據類型，因為它的值只有一個，那就是undefined。

? 在聲明變量時如果沒有將變量賦值的話這個變量也是屬于Undefined類型的。

? 如果一個變量沒有聲明就直接去訪問解釋器會報錯誤信息，但是這樣的變量如果使用typeof返回的結果也是"undefined"。

Null和Undefined的區別：

? Null 已定義，并初始化為null;

? Undefined:未定義，或者未初始化 。

2.5、typeof運算符

typeof運算符可以查詢數據類型:

其返回可能值有:undefined，boolean，number，string、object以及function.

可以使用typeof(變量名)查詢數據類型

var age = 18;

console.log(typeof age);  // 'number'

console.log(typeof(age)); 

2.6、數據類型轉換

轉換成字符串類型

• toString()

  var str = "Hello World";
  var num = 120.2;
  var n = null;
  var un; 
  var bl = true;
  var arr = [1,2,3,5];
  var obj = {name:"張三"};
  function fn1(){}
  
  // 把數值轉換為字符串類型
  console.log(typeof num.toString())
  
  // 把空類型轉換為字符串類型
  // Cannot read property 'toString' of null  空類型沒有這個方法
  // console.log(typeof n.toString());
  
  // 把未定義類型轉換為字符串類型
  // Cannot read property 'toString' of undefined  未定義類型沒有這個方法
  // console.log(un.toString())
  
  // 把布爾、數組、對象、函數轉換為字符串類型
  console.log(typeof bl.toString());
  console.log(typeof arr.toString());
  console.log(typeof String(obj));
  console.log(typeof fn1.toString()); //通過這行代碼,我們可以得出結論: 函數也是對象
  

• String()

  String()函數存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null
  var num = 18;
  var isRight = true;
  console.log(String(num));
  console.log(String(isRight));
  
  var a = null;
  console.log(typeof String(a));
  

• 拼接字符串方式

  num + ""，當 + 兩邊一個操作符是字符串類型，一個操作符是其它類型的時候，會先把其它類型轉換成字符串再進行字符串拼接，返回字符串

轉換成數值類型

• Number()

  // Number()可以把任意值轉換成數值，如果要轉換的字符串中有一個不是數值的字符，返回NaN
  
  // 1 Number()
  var str = 'abc';   //   Number(str)   -》 NaN
  var isRight = true;  //  Number(isRight) -> 1
  
  console.log(Number(str)); //NaN
  console.log(Number(isRight)); //1
  
  console.log(Number('123')); //123
  // Number() 把字符串轉換成數值類型的時候，如果字符串中有一個字符不是數字，返回NaN
  console.log(Number('123abc')); //NaN
  

• parseInt()

  var str = '123';
  var isRight = false;
  
  console.log(parseInt(str)); //123
  // parseInt 無法把布爾類型轉換成數值類型 返回的結果是NaN
  console.log(parseInt(isRight)); //NaN
  
  
  //var s1 = 'abc';   //  parseInt(s1) -> NaN
  var s1 = '123abc';
  // parseInt 在轉換字符串的時候，如果遇到數字就會轉換數字，如果遇到非數字就會返回
  console.log(parseInt(s1)); //123
  
  var s2 = 'abc123'; // 如果字符串中第一個字符是非數字 此時返回NaN
  console.log(parseInt(s2)); //NaN
  

• parseFloat()

  var str = '123.67';
  var isRight = true;
  console.log(parseFloat(str)); //123.67
  console.log(parseInt(str)); // 123
  console.log(parseFloat(isRight)); // parseFloat 無法轉換布爾類型  返回的是NaN
  
  var str = '123.12abc';
  console.log(parseFloat(str)); //123.12
  
  var str = '123abc';
  console.log(parseFloat(str)); //123
  
  parseFloat()把字符串轉換成浮點數
  parseFloat()和parseInt非常相似，不同之處在與parseFloat()可以得到浮點值
  

• +，-0等運算

  var str = '500';
  console.log(+str);		// 取正
  console.log(-str);		// 取負
  console.log(str - 0);
  

轉換成布爾類型

• Boolean()

  將各種類型的值轉化成Boolean類型的規則如下：

? Number:任意非0的數值為true，0值和NaN為"false"。

? String:所有的非空字符串轉化為 true;""（空字符串）轉化成false

? Object的任何非空對象都會轉化為 true;

? 在javascript中，只要邏輯表達式不返回undefined不返回null，就都是真的。

? 注:通常和流程控制語句結合使用

? 0 ''(空字符串) null undefined NaN 會轉換成false 其它都會轉換成true

var str1 = "Hello World";
var str2 = "";
var num = 120.2;
var n = null;
var un; 
var bl = true;
var arr = [];
var obj = {};
// function fn1(){}

// 任何非空字符串都轉換為true,空字符串轉換為false
console.log(Boolean(str1)); // true
console.log(Boolean(str2)); // false

// 任何非0數值都轉換為true,0和NaN轉換為false
console.log(Boolean(num)); // true
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false

// 對象和數組都轉換為true
console.log(Boolean(arr));
console.log(Boolean(obj));

// Null和Undefined都轉換為false
console.log(Boolean(n));
console.log(Boolean(un));

三、JavaScript運算符和表達式

3.1、基本概念

JavaScript描述了一組用于操作數據值的運算符，包括一元運算符(++ --)、邏輯運算符、算術運算符、關系運算符、三目運算符及賦值運算符。ECMAScript 中的運算符適用于很多值，包括字符串、數值、布爾值、對象等。

? 表達式：

? 表達式由一個或多個操作數通過操作符組合而成，就是由數據和運算符組成的一個式子。

? 例如：x+y；x/10; x+23/2+y; x%y等都是表達式。
? 操作數：

? 表達式中的變量成為操作數；

? 運算符：

? 表達式中起運算作用的符號稱為運算符；

? 簡而言之:用來做運算的符號就是運算符;由運算符連接起來的式子叫表達式;

3.2、算數運算符

算術運算符即算術運算符號。是完成基本的算術運算 (arithmetic operators) 符號，就是用來處理四則運算的符號。

算數運算符分為以下:

加法運算符（+）:

var box = 1 + 2; //等于3
var box = 1 + NaN; //NaN，只要有一個NaN 就為NaN
var box = Infinity + Infinity; //Infinity
var box = -Infinity + -Infinity; //-Infinity
var box = Infinity + -Infinity; //NaN，正無窮和負無窮相加等NaN
var box = 100 + '100';//100100，字符串連接符，有字符串就不是加法
var box = '您的年齡是：' + 10 + 20; //您的年齡是：1020，被轉換成字符串
var box = 10 + 20 + '是您的年齡'; //30 是您的年齡，沒有被轉成字符串
var box = '您的年齡是：' + (10 + 20); //您的年齡是：30，沒有被轉成字符串
其中NaN是not a number的縮寫，表示不是一個數；infinity是無窮大的數。
任意數據類型的數值和字符串做 “+”運算，得到的肯定是字符串。

減法運算符:

var box = 100 - 70; //等于30
var box = -100 - 70 ;//等于-170
var box = -100 - -70; //-30，一般寫成-100 - (-70)比較清晰
var box = 1 - NaN; //NaN，只要有一個NaN 就為NaN
var box = Infinity - Infinity; //NaN
var box = -Infinity - -Infinity;//NaN
var box = 100 - true; //99，true 轉成數值為1
var box = 100 -false;  //100，false轉成數值為0
var box = 100 - '';  //100，''轉成了0
var box = 100 - '70';  //30，'70'轉成了數值70
var box = 100 - null;  //100，null 轉成了0
var box = 100 - 'Lee';  //NaN，Lee 轉成了NaN

乘法運算符:

var box = 100 * 70;  //7000
var box = 100 * NaN;  //NaN，只要有一個NaN 即為NaN
var box = Infinity * Infinity;  //Infinity
var box = -Infinity * Infinity ;  //-Infinity
var box = -Infinity * -Infinity ;  //Infinity
var box = 100 * true;  //100，true 轉成數值為1
var box = 100 * '';  //0，''轉成了0
var box = 100 * null;  //0，null 轉成了0
var box = 100 * 'Lee';  //NaN，Lee 轉成了NaN

除法運算符:

var box = 100 / 70;  //1.42....
var box = 100 / NaN;  //NaN
var box = Infinity / Infinity;  //NaN
var box = -Infinity / Infinity ;  //NaN
var box = -Infinity / -Infinity;  //NaN
var box = 100 / true;  //100，true 轉成1
var box = 100 / '';  //Infinity，
var box = 100 / null;  //Infinity，
var box = 100 / 'Lee';  //NaN

求模運算符（求余數）:

var box = 10 % 3;  //1，余數為1
var box = 100 % NaN;  //NaN
var box = Infinity % Infinity;  //NaN
var box = -Infinity % Infinity ;  //NaN
var box = -Infinity % -Infinity;  //NaN
var box = 100 % true;  //0
var box = 100 % '';  //NaN
var box = 100 % null;  //NaN
var box = 100 % 'Lee';  //NaN

JS里面的算數運算規則:

? 1、任意數據類型和字符串進行加法運算,都是字符串的拼接

? 2、任意數據類型和NaN進行四則運算,結果都是NaN

? 3、當true和false參與運算,true轉換為1,false轉換為0

? 4、除+運算外,數值類型字符串參與運算,都轉換為數值;但是非數值類型字符參與運算,結果都是NaN

? 5、除+運算外,空字符串轉換為0,null轉換為0

? 6、0可以作為除數,得到結果都是無窮大

? 7、0參與取余運算,得到結果都是NaN

3.3、一元運算符

? 只能操作一個值的運算符叫做一元運算符。嚴格來說，一元運算符是屬于算術運算符的;

? 一元運算符：++ --:使數值遞增/遞減1

• 前置++

var num1 = 5;
++ num1;  // num1 = 6;

var num2 = 6;
console.log(num1 + ++ num2); // 13

• 后置++

var num1 = 5;
num1 ++;   // num1 = 6

var num2 = 6 
console.log(num1 + num2 ++); // 12

• Why?

var a = 1; var b = ++a + ++a; console.log(b);//5    
var a = 1; var b = a++ + ++a; console.log(b);//4    
var a = 1; var b = a++ + a++; console.log(b);//3    
var a = 1; var b = ++a + a++; console.log(b);//4  

前置和后置的區別:

? 在沒有賦值操作，前置和后置是一樣的。但在賦值操作時，如果遞增或遞減運算符前置，那么前置的運算符會先累加或累減再賦值，如果是后置運算符則先賦值再累加或累減。運算的時候也是一樣;

? 其他類型應用一元運算符的規則

var box = '89'; box++; //90，數值字符串自動轉換成數值
var box = 'ab'; box++; //NaN，字符串包含非數值轉成NaN
var box = false; box++; //1，false 轉成數值是0，累加就是1
var box = 2.3; box++; //3.3，直接加1

注：如果數值字符串使用一元運算符,即使是加法運算,也直接轉換為數值;

3.4、賦值運算符

賦值運算符用于給 JavaScript 變量賦值。

=        賦值
+=       x+=y      等價于 x=x+y
-=       x-=y      等價于 x=x-y
*=       x*=y      等價于 x=x*y
/=       x/=y      等價于 x=x/y
%=       x%=y      等價于 x=x%y

? 在JavaScript中，賦值運算符是“=”，其含義就是把賦值運算符的右邊的數值或表達式的值賦給賦值運算符的左邊的變量或表達式。

例如：
	var t=5;其意義就是把數值5賦給變量t;
	var k=x+y+5;其意義就是把表達式x+y+5最后的值賦給變量k。
	var box = 100；
	box += 100; //200，+=代替box+100

3.5、關系運算符(比較運算符)

比較運算符是比較兩個數的大小的運算符，返回的是一個布爾值。

用于進行比較的運算符稱作為關系運算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等()、不等(!=)、全等(恒等)(=)、不全等(不恒等)(!==)

比較原則:

1、若一個是數值字符串，一個是數值，字符串會自動轉換成數值進行比較。
	var box = '3' > 22; //false      var box = '3' > '22'; //true
	var box = 'a' > 'b'; //false  a=97，b=98; var box = 'a' > 'B'; //true  B=66
2、若兩個都是數值字符串，則比較首個數字的大小。
3、布爾值的false和true會轉換成0和1
4、兩個操作數都是數值，則數值比較；
5、兩個操作數都是字符串，則比較兩個字符串對應的字符編碼值；
	字符轉ascii碼：用charCodeAt();
	var x = "我";      var y = "你";       alert(x>y); //true

在相等和不等的比較上，如果操作數是非數值，則遵循一下規則：

1.一個操作數是布爾值，則比較之前將其轉換為數值，false 轉成0，true 轉成1；
2.一個操作數是字符串，則比較之前將其轉成為數值再比較；
3.不需要任何轉換的情況下，null 和undefined 是相等的；
4.一個操作數是NaN，則==返回false，!=返回true；并且NaN 和自身不等；
5.在全等和全不等的判斷上，比如值和類型都相等，才返回true，否則返回false。

特殊值對比表:

表達式                        值
null == undefined      		true
'NaN' == NaN            	false
5 == NaN                    false
NaN == NaN               	false
false == 0                  true
true == 1                   true
true == 2                   false
undefined == 0            	false
null == 0                   false
'100' == 100                true
'100' === 100               false

相等運算符 == ：判斷兩個操作數是否相等。不同的數據類型會自動轉換為相等的數據類型再做比較。

等同運算符=== ：全等（值和類型），嚴格意義的相等，兩個操作數的值和他們的類型必須完全一致。

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，類型不相等
var result = 55 === 55; 	// true

3.6、邏輯運算符

邏輯運算符通常用于布爾值的操作，一般和關系運算符配合使用，有三個邏輯運算符：

邏輯與(AND)、邏輯或(OR)、邏輯非(NOT)。

&& 與 兩個操作數同時為true，結果為true，否則都是false

|| 或 兩個操作數有一個為true，結果為true，否則為false

!  非  取反

• 邏輯與運算符屬于短路操作，顧名思義，如果第一個操作數返回是false，第二個數不管是true 還是false 都返回的false。
• 和邏輯與運算符相似，邏輯或運算符也是短路操作。當第一操作數的求值結果為true，就不會對第二個操作數求值了。
• 邏輯非運算符可以用于任何值。無論這個值是什么數據類型，這個運算符都會返回一個布爾值。它的流程是：先將這個值轉換成布爾值，然后取反。

注: JavaScript雖說也有& 和 |，但是這里不是做邏輯運算符，而是位運算符

3.7、三目運算符

? 三目運算符，又叫三元條件運算符

? 三元條件運算符其實就是后面將要學到的if 語句的簡寫形式。

? 根據條件在兩個語句中執行其中的一個，使用符號 ？：

? 語法如下：
? ? 條件表達式？語句1：語句2

? 參數說明：

? ? 條件表達式，結果會被作為布爾值處理
? ? 語句1：如果條件表達式返回true則執行
? ? 語句2：如果條件表達式返回false則執行

var box = 5 > 4 ? '對' : '錯'; //對，5>4 返回true 則把'對'賦值給box，反之，把錯賦給box。

// 判斷一個年齡是否成年, 當年齡超過18 返回  成年  否則返回未成年
var age = 19;
// console.log( age >= 18 ? '成年' : '未成年' );

var msg = age >= 18 ? '成年' : '未成年';
console.log(msg);

3.8、運算符優先級

? 運算符優先級描述了在計算表達式時執行運算 的順序。先執行具有較高優先級的運算，然后執行較低優先級的運算。例如，先執行相乘，再執行相加。

? 運算符比較多，可以合理使用()來改變表達式的優先級。

? ()的用法和數學中的()用法相同，()內的會優先計算。

四、JavaScript流程控制語句

4.1、語句的定義

? 在ECMAScript 中，所有的代碼都是由語句來構成的。

? 一行代碼就是一條簡單語句。形式上可以是單行語句，或者由一對大括號“｛｝”括起來的復合語句，復合語句包含若干條簡單語句，它可以作為一個單行語句處理。復合語句也稱為語句塊。

? 單行語句:一行代碼簡單語句

? 復合語句:由一對大括號“｛｝”括起來的若干條簡單語句，也叫語句塊

4.2、流程控制語句分類

任何復雜的程序邏輯都可以通過”順序”、”條件(分支)”和”循環”三種基本的程序結構來實現。

? 順序程序結構就是從上往下順序執行語句；程序默認就是由上到下順序執行的

? 條件(分支)程序結構就是根據不同的情況執行不同的語句；

? ? 循環程序結構就是某些語句要循環執行多次。

1. 條件語句(分支語句)

? if單分支語句

? if-else雙分支語句

? if - else if多分支語句

? switch開關語句

2. 循環語句

   for循環語句

   while循環語句

   do-while循環語句

   for／in循環語句 (增強for循環、foreach循環)

4.3、條件語句

if語句即條件判斷語句，一共有三種格式：

? 單分支的條件語句；

? 雙分支的條件語句

? 多分支的條件語句。

條件語句用于基于不同的條件來執行不同的動作。

4.3.1、單分支的條件語句

if(){} 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼

if (/* 條件表達式 */) {
  // 執行語句
}

注意：
? （1） 放在if之后的括號里的返回值為boolean類型的表達式或boolean值，即這個表達式的返回值只能是true或false。

? （2） 如果表達式的值為true，則執行語句；如果表達式的值為false，則什么也不執行。

? （3） 花括號括起來的語句塊可以只有一行語句，也可以由多行代碼構成。一個語句塊通常被當成一個整體來執行。 如果語句塊只有一行語句時，則可以省略花括號，因為單行語句本身就是一個整體，無須花括號來把它們定義成一個整體。建議都加花括號;

4.3.2、雙分支的條件語句

if()...else 語句 - 當條件為 true 時執行語句1，當條件為 false 時執行語句2

if (/* 條件表達式 */){
  // 成立執行語句
} else {
  // 否則執行語句
}

if (條件表達式){
    語句1;
}else {
    語句2;
}

? 注意：
? （1）放在if之后的括號里的返回值為boolean類型的表達式或boolean值，即這個表達式的返回值只能是true或false。

? （2）如果if表達式的值為true，則執行語句1；如果表達式的值為false，則執行語句2。

4.3.3、多分支的if條件語句

? if()...else if()....else 語句 - 使用該語句來選擇多個代碼塊之一來執行.

if (/* 條件1 */){
  // 成立執行語句
} else if (/* 條件2 */){
  // 成立執行語句
} else if (/* 條件3 */){
  // 成立執行語句
} else {
  // 最后默認執行語句
}

? 語法：

if (條件表達式) {
    語句1;
} else if (條件表達式) {
   語句2;
} ...
else{
   語句n;
}

? 注:if語句()中的表達式會自動轉換成布爾值。

? 滿足條件即執行對應語句，然后語句就結束；如果都不滿足，則執行else語句塊；當然else語句塊可以不存在

4.3.4、switch多條件選擇語句

? switch語句又稱開關語句，它與多重if語句類似，前者用于等值判斷，后者用于區間值和等值判斷。switch語句的作用是根據表達式的值，跳轉到不同的語句。switch 語句用于基于不同的條件來執行不同的動作。

? 語法：

switch (expression) {
  case 常量1:
    語句;
    break;
  case 常量2:
    語句;
    break;
  case 常量3:
    語句;
    break;
  …
  case 常量n:
    語句;
    break;
  default:
    語句;
    break;
}

switch多條件選擇語句:

? 首先設置表達式，隨后表達式的值會與結構中的每個case 的常量表達式做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。

? 使用 break 來阻止代碼自動地向下一個 case 運行。default 關鍵詞來規定匹配不存在時做的事情，也就是說，當沒有匹配的值時，執行default下的語句。

? switch 語句在比較值時使用的是全等操作符, 因此不會發生類型轉換（例如，字符串'10' 不等于數值 10）

工作原理：
? 首先設置表達式 n（通常是一個變量）。

? 隨后表達式的值會與結構中的每個 case 的值做比較。

? 如果存在匹配，則與該 case 關聯的代碼塊會被執行。

? 請使用 break 來阻止代碼自動地向下一個 case 運行。

? default 關鍵詞來規定匹配不存在時做的事情;相當于if里的else

注意:
? 1、每個case語句下的break語句一般不可以省略，break語句表示退出switch語句，如果省略，則會繼續執行下一個case語句中的代碼，直到遇到break語句跳出switch語句。
? 2、default語句可以出現在switch語句中任何地方，如果放在最后，其中的break語句可省略。default語句也可省略。
? 3、每個case語句沒有先后順序之分，但建議按照常量表達式的值從小到大的順序。
? 4、switch語句用于等值判斷，也就是說表達式的結果是個具體的值；而多重if選擇結果的表達式的值是個區間，比如大于100而小于200。

輸入一個數字，打印對應的星期

var day = 10;
switch (day) {
    case 1:
        console.log('星期一');
        break;
    case 2:
        console.log('星期二');
        break;
    case 3:
        console.log('星期三');
        break;
    case 4:
        console.log('星期四');
        break;
    case 5:
        console.log('星期五');
        break;
    case 6:
        console.log('星期六');
        break;
    case 7:
        console.log('星期日');
        break;
    default:
        console.log('輸入的值不在星期范圍內');
        break;
}

4.3.5、條件語句練習

案例：
? 求兩個數的最大數

var num1 = 2;
var num2 = 5;

if (num1 > num2) {
    console.log('最大值是：' + num1);
} else {
    console.log('最大值是: ' + num2);
}

? 判斷一個數是偶數還是奇數

// 判斷一個數是偶數還是奇數
var num = 5;
if (num % 2 === 0) {
    console.log('num是偶數');
} else {
    console.log('num是奇數');
}

? 分數轉換，把百分制轉換成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A

// 分數轉換，把百分制轉換成ABCDE   <60  E  60-70 D  70-80 C  80-90 B  90 - 100 A
var score = 59;
if (score >= 90 && score <= 100) {
    console.log('A');
} else if (score >= 80 && score < 90) {
    console.log('B');
} else if (score >= 70 && score < 80) {
    console.log('C');
} else if (score >= 60 && score < 70) {
    console.log('D');
} else {
    console.log('E');
}

var score = 59;
if (score >= 90) {
    console.log('A');
} else if (score >= 80) {
    console.log('B');
} else if (score >= 70) {
    console.log('C');
} else if (score >= 60) {
    console.log('D');
} else {
    console.log('E');
}

var score = 6; 
score = parseInt(score / 10);
switch (score) {
    case 10:
    case 9:
        console.log('A');
        break;
    case 8:
        console.log('B');
        break;
    case 7:
        console.log('C');
        break;
    case 6:
        console.log('D');
        break;
    default: 
        console.log('E');
        break;
}

4.4、循環程序結構

? 如果希望一遍又一遍地運行相同的代碼，那么使用循環是很方便的。比如在頁面上輸出100遍“我愛HTML5編程”，如果不用循環，document.write("我愛HTML5編程<br/>");要寫100遍。如果用循環則代碼這樣寫即可：

for(var i=1;i<=100;i++){
	document.write("我愛HTML5編程<br/>");
}

循環程序的結構有三要素：循環的初始值、循環條件(循環的結束值)和循環的迭代，所謂循環的迭代就是如何從初始值到結束值，比如是每次加1還是每次加2，諸如此類等。當然，一個循環程序還有包含一個循環體。

4.4.1、while 語句

? while循環會在指定條件為真時循環執行代碼塊，它是一種先判斷，后運行的循環語句，也就是說，必須滿足條件了之后，方可運行循環體。用于不太確定循環次數的場合。

語法：

// 當循環條件為true時，執行循環體，
// 當循環條件為false時，結束循環。
while (循環條件) {
  //循環體
}

代碼示例：

// 打印1-100之間所有的數字
var i = 1;
while (i <= 100) {
    console.log(i);
    // i = i + 1;
    // i += 1;
    i++;
}

// 計算1-100之間所有數的和
// 初始化變量
var i = 1;
var sum = 0;
// 判斷條件
while (i <= 100) {
  // 循環體
  sum += i;
  // 自增
  i++;
}
console.log(sum);

案例：
? 打印100以內 7的倍數

// 打印100以內 7的倍數
var i = 1;
while (i <= 100) {
    // 判斷當前的i是否是7的倍數
    if (i % 7 === 0) {
        console.log(i);
    }
    // i自身+1
    i++;
}

? 打印100以內所有偶數

// 打印100以內所有偶數
var i = 1;
while (i <= 100) {
    // 判斷當前的i是否是偶數
    if (i % 2 === 0) {
        console.log(i);
    }
    // i自身+1
    i++;
}

? 打印100以內所有偶數的和

// 打印100以內所有偶數的和
var i = 1;
var sum = 0;
while (i <= 100) {
    // 判斷當前的i是否是偶數，如果是偶數的話累加
    if (i % 2 === 0) {
        sum += i;
    }
    // i自身+1
    i++;
}
console.log(sum);

案例1:循環輸出從1開始的數值; 直到這個數值(n*2+8)/3 為20才結束循環

案例2:從彈出框循環輸入字符串,直到輸入的值為end才結束循環

var inputStr = prompt("請輸入一個字符串"); 

4.4.2、do...while循環

? do...while 循環是 while 循環的變體，在檢查條件是否為真之前，該循環會至少執行一次do下的代碼塊(循環體)，然后如果條件為真的話，就會重復這個循環，否則退出該循環體。常用于至少執行一次循環體，再判斷要不要繼續循環的場合。

語法：

do {
  // 循環體;
} while (循環條件);

代碼示例：

// 初始化變量
var i = 1;
var sum = 0;
do {
  sum += i;//循環體
  i++;//自增
} while (i <= 100);//循環條件

案例：

// 求100以內所有3的倍數的和
var i = 1;
var sum = 0;
do {
    // 循環體
    // 判斷是否是3的倍數，如果是3的倍數累加
    if (i % 3 === 0) {
        sum += i;
    }
    // i自身+1
    i++;
} while (i <= 100);
console.log(sum);

4.4.3、for語句

while和do...while一般用來解決無法確認次數的循環。for循環一般在循環次數確定的時候比較方便

語法：

// for循環的表達式之間用的是;號分隔的，千萬不要寫成,
for (初始化表達式1; 判斷表達式2; 自增表達式3) {
  // 循環體4
}

? 語句1: 在循環體(代碼塊)開始前執行，也就是循環初始值。

? 語句2: 定義運行循環（代碼塊）的條件，語句2返回true，則循環再次開始，如果返回 false，則循環將結束

? 語句3: 在循環(代碼塊)已被執行之后執行，就是循環的迭代部分， 語句3有多種用法，增量可以是負數 (i--)，或者更大 (i=i+15)

for循環執行機制:

執行順序：1243 ---- 243 -----243(直到循環條件變成false)

1. 初始化表達式
2. 判斷表達式
3. 自增表達式
4. 循環體

4.4.4、for...in語句

? for...in 語句用于遍歷數組或者對象的屬性（通常我們使用for/in 語句循環遍歷對象的屬性，在數組中可以遍歷數組中的所有元素）。

? for...in 循環中的代碼每執行一次，就會對數組的元素或者對象的屬性進行一次操作。

for..in遍歷數組

// 定義一個數組
var arr = [13,21,34,42,53,63];

// 普通for循環遍歷
for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

// 使用for..in遍歷數組
for(var i in arr){
    console.log(arr[i]);
}

for..in遍歷對象

// 創建一個對象
var person = {
    name : "jack",
    age : 12,
    height: 178
}

//列舉對象屬性名及其值
for(var pro in person){
    console.log(pro+" "+person[pro])
}

? 在JavaScript語言中，支持循環語句的相互嵌套，即在一個循環語句中嵌套另一個循環語句，也就是說，for循環語句可以嵌套for語句，也可以嵌套while循環語句，或者do..while循環語句，其他的循環語句也是一樣的。

? 需要注意的是，break和continue語句用在循環嵌套中，這兩條語句只對離它最近的循環語句有效。比如如果break語句用在內層的循環語句中，則只退出內層的循環，對外層循環沒有影響。

4.4.5、循環語句練習

案例：

打印1-100之間所有數
for (var i = 1; i <= 100; i++) {
    console.log(i);
}

var i = 1;
for (; i <= 100; ) {
	console.log(i);
	i++;
}

求1-100之間所有數的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    // sum = sum + i;
    sum += i;
}
console.log(sum);

求1-100之間所有數的平均值
var sum = 0;
var avg;
for (var i = 1; i <= 100; i++) {
    sum += i;
}
avg = sum / 100;
console.log(avg);

求1-100之間所有偶數的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
    // 找到偶數
    if (i % 2 === 0) {
        sum += i;
    }
}
console.log(sum);

同時求1-100之間所有偶數和奇數的和
var oddSum = 0; // 奇數的和
var evenSum = 0; // 偶數的和
for (var i = 1; i <= 100; i++) {
    // 判斷i是奇數還是偶數
    if (i % 2 === 0) {
        // 偶數
        evenSum += i;
    } else {
        //奇數
        oddSum += i;
    }
}
console.log('奇數的和：' + oddSum);
console.log('偶數的和：' + evenSum);

打印正方形
// 使用拼字符串的方法的原因
// console.log 輸出重復內容的問題
// console.log 默認輸出內容介紹后有換行
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
  for (var j = i; j < 10; j++) {
    start += '* ';
  }
  start += '\n';
}
console.log(start);

打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

4.5、跳轉語句

break:立即跳出整個循環，即循環結束，開始執行循環后面的內容（直接跳到大括號）

continue:立即跳出當前循環，繼續下一次循環（跳到i++的地方）?

continue 語句只能用在循環中；break能用在循環或 switch 中。

案例：

求整數1～100的累加值，但要求碰到個位為3的數則停止累加
求整數1～100的累加值，但要求跳過所有個位為3的數
var sum = 0;
for (var i = 1; i <= 100; i++) {
    if (i % 10 === 3) {
        // 如果找到個位為3的數字 ，繼續執行下一次循環
        continue;
    }
    sum += i;
}
console.log(sum);

4.6、調試

• 過去調試JavaScript的方式
  • alert()
  • console.log()
• 斷點調試

斷點調試是指自己在程序的某一行設置一個斷點，調試時，程序運行到這一行就會停住，然后你可以一步一步往下調試，調試過程中可以看各個變量當前的值，出錯的話，調試到出錯的代碼行即顯示錯誤，停下。

• 調試步驟

瀏覽器中按F12-->sources-->找到需要調試的文件-->在程序的某一行設置斷點

• 調試中的相關操作

Watch: 監視，通過watch可以監視變量的值的變化，非常的常用。
F10: 程序單步執行，讓程序一行一行的執行，這個時候，觀察watch中變量的值的變化。
F8：跳到下一個斷點處，如果后面沒有斷點了，則程序執行結束。

tips: 監視變量，不要監視表達式，因為監視了表達式，那么這個表達式也會執行。

1. 代碼調試的能力非常重要，只有學會了代碼調試，才能學會自己解決bug的能力。初學者不要覺得調試代碼麻煩就不去調試，知識點花點功夫肯定學的會，但是代碼調試這個東西，自己不去練，永遠都學不會。
2. 今天學的代碼調試非常的簡單，只要求同學們記住代碼調試的這幾個按鈕的作用即可，后面還會學到很多的代碼調試技巧。

4.7、代碼規范

1.命名規范	
	變量、函數 的命名 必須要有意義
	變量 的名稱一般用名詞
	函數 的名稱一般用動詞
2.變量規范   
	操作符的前后要有空格
	var name = 'zhangsan';	  5 + 6
3.注釋規范
	// 這里是注釋
4.空格規范
	if (true) {
      
	}
	for (var i = 0; i <= 100; i++) {
      
	}
5.換行規范
	var arr = [1, 2, 3, 4];
	if (a > b) {
      
	}
	for (var i = 0; i < 10; i++) {
      
	}
	function fn() {
      
	}

課后習題

part 1

1、( )年設計出JavaScript。
    A、1992    B、1993    C、1994   D、1995
2、( )公司設計出JavaScript。
    A、微軟   B、網景    C、谷歌   D、蘋果
3、JavaScipt是一門( )語言。
    A、腳本   B、非腳本   C、運行在服務端  D、瀏覽器不能運行
4、JavaScipt是一門( )類型語言。
    A、弱   B、強   C、運行在服務端  D、瀏覽器不能運行
5、JavaScipt是一門( )語言。
    A、強  B、運行在客戶端  C、運行在服務端  D、瀏覽器不能運行
6、JavaScipt是一門( )語言。
    A、解釋型   B、編譯型  C、解釋編譯型  D、編譯解釋型
7、JavaScipt的特點()。
    A、簡單性  B、安全性 C、動態性  D、跨平臺性
8、JavaScipt對用戶的響應采用()。
    A、事件驅動  B、命令驅動  C、代碼驅動  D、請求驅動
9、JavaScipt可用于()設備。
    A、PC    B、手機   C、筆記本電腦  D、平板電腦
10、JavaScipt由()構成。
    A、DOM   B、BOM   C、ECMAScript D、JScript
11、()描述了JavaScript的基本語法。  
    A、DOM   B、BOM   C、ECMAScript D、JScript
12、JavaScript中的()主要處理瀏覽器窗口的方法和接口。
    A、DOM   B、BOM   C、ECMAScript D、JScript
13、 JavaScript中的()主要處理網頁內容的方法和接口。
    A、DOM   B、BOM   C、ECMAScript D、JScript
14、如果要刪除網頁中的一個<span>標簽，需要JavaScript中的()方法和接口。
    A、DOM   B、BOM   C、ECMAScript D、JScript

part 2

1、<script>通常放在()標簽中。
    A、<body>    B、<head>    C、<header>    D、<foot>
2、<script>引用外部文件時，以下說法正確的是()。
    A、<script>和</script>必須成對出現。
    B、不可以在<script>標簽中寫代碼
    C、引用外部的JS文件，使用<script>的標簽的src屬性
    D、不可以引用外部網站的JS文件
3、<script>標簽引入外部文件時，()屬性必須要設定。
    A、type    B、src    C、charset    D、async
4、編碼：
    在頁面上輸出：我是新開普的學員，正在學習HTML5的課程。
5、編碼：
    在信息提示框顯示：我是新開普的學員，正在學習HTML5的課程。

part 3

1、以下()是正確的標識符命名。
    A、2a    B、w23%    C、var    D、y45  $    E、y45$
2、JavaScript中的()是嚴格區分大小寫的。
    A、變量    B、類名    C、操作符    D、標簽名
3、下面()可以是標識符的命名的字符。
    A、字母    B、下劃線    C、美元符    D、#
4、JavaScript中注釋有()。
    A、單行注釋  B、多行注釋  C、文本注釋  D、域注釋
5、對于變量的說法正確的是()。
    A、變量必須用var聲明    B、變量必須先聲明后使用
    C、變量的值不可以改變    D、變量的命名區分大小寫
6、對于變量的賦值正確的說法是()。
    A、變量可以只聲明，不賦值    B、可以把一個字符串賦給一個變量
    C、可以把一個變量的值直接賦給另一個變量    D、變量的數據類型不可以改變

part 4

練習1:求面積公式
頁面輸出:
    矩形的長為(變量a的值)；
    矩形的寬為(變量b的值)；
    點擊按鈕彈出框內容:
    計算的矩形面積為：(長*寬)

練習2:雞兔同籠問題
    《孫子算經》是唐初作為“算學”教科書的著名的《算經十書》之一，共三卷，上卷敘述算籌記數的制度和乘除法則，中卷舉例說明籌算分數法和開平方法，都是了解中國古代籌算的重要資料。下卷收集了一些算術難題，“雞兔同籠”問題是其中之一。原題如下：令有雉（雞）兔同籠，上有三十五頭，下有九十四足。
作業要求，用學過的知識在HTML文檔輸出下列內容：
(溫馨提示：使用JS數據類型計算，用HTML輸出)
    頭的總數為：35；    腳的總數為：94；
    計算得出雞的數量為：x 只；    計算得出兔的數量為：y 只；
提示:
解法1：
    （總腳數－雞的腳數×總只數）÷（兔的腳數－雞的腳數）=兔的只數
    總只數－兔的只數=雞的只數
解法2：
    總腳數÷2—總頭數=兔的只數
    總只數—兔的只數=雞的只數

1、JavaScrip中有()數據類型
    A、String  B、Boolean  C、Number  D、Object
2、下面值為()。
    var k=23.45;
    alert(typeof(k));
    A、string  B、boolean  C、number  D、object
3、下面值為()。
    var k=new Object();
    alert(typeof(k));
    A、string  B、boolean  C、number  D、object
4、下面值為()
    alert(typeof('23.45'))
    A、string  B、boolean  C、number  D、object

part 5

1、下面表達式box的值為()。
    var box = 100 +false*2;
    A、100  B、102  C、NaN  D、undefined  E、Infinity
2、下面表達式box的值為()。
    var box = 100 +true*2;
    A、100  B、102  C、NaN  D、undefined  E、Infinity
3、字符’0’對應的ASCII碼值：
    A、48  B、49  C、65  D、97
4、字符’A’對應的ASCII碼值：
    A、48  B、49  C、65  D、97
5、字符’a’對應的ASCII碼值：
    A、48  B、49  C、65  D、97
6、表達式'200'===200的值為()
    A、true  B、false  C、0  D、1
7、表達式'200'==200的值為()
    A、true  B、false  C、0  D、1
8、表達式NaN == NaN 和表達式null == undefined的值分別為();
    A、true  false  B、false true  C、true true   D、false false
9、表達式
    var a1="3";
    alert(a1++ + 7); 
    alert(++a1);
    其值分別為()
    A、10   5  B、11  5  C、10  4  D、11  4
10、對于表達式var box = 3 > 2 ? '對' : '錯';box的值為()。
    A、'對'    B、'錯'   C、語法錯誤   D、11  null

part 6

1、使用循環語句輸出1-50里所有3的倍數的數字

2、利用循環語句頁面上打印出直角三角形。
    *
    **
    ***
    ****
    *****

3、使用語句判斷月份是31天還是30天
    兩點提示：
        使用switch多條件判斷語句 、使用if多分支語句
        合理的省略break優化代碼
        彈出 月份為X，該月天數為31（30）

4、本金10000元存入銀行，年利率是千分之三，每過1年，將本金和利息相加作為新的本金。計算5年后，獲得的本金是多少？ 

5、九九乘法口訣

6、編寫程序，求出1-100之間所有除以3余1的數，并求和。

7、判斷一個年份是閏年還是平年
	閏年：能被4整除，但不能被100整除的年份 或者 能被400整除的年份

8、計算1-100之間能3整除的數的和

9、計算1-100之間不能被7整除的數的和

10、有個人想知道，一年之內一對兔子能繁殖多少對？于是就筑了一道圍墻把一對兔子關在里面。已知一對兔子每個月可以生一對小兔子，而一對兔子從出生后第3個月起每月生一對小兔子。假如一年內沒有發生死亡現象，那么，一對兔子一年內（12個月）能繁殖成多少對？（兔子的規律為數列，1，1，2，3，5，8，13，21）

11、求200-300之間所有的奇數的和（用continue）

12、求200-300之間第一個能被7整數的數（break）

13、數組練習
    求一組數中的所有數的和和平均值
    求一組數中的最大值和最小值，以及所在位置
    將字符串數組用|或其他符號分割
    翻轉數組
    冒泡排序，從小到大