JavaScript - 台部落

JavaScript和HTML、CSS的區別

HTML：提供網頁的結構，提供網頁中的內容
CSS: 用來美化網頁
JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果

JavaScript的組成

JavaScript的書寫位置

寫在行內

<input type="button" value="按鈕" onclick="alert('Hello World')" />

寫在script標籤中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

寫在外部js文件中，在頁面引入

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

注意點

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

變量

什麼是變量

什麼是變量

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

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

如何使用變量

var聲明變量

var age;

變量的賦值

var age;
age = 18;

同時聲明多個變量

var age, name, sex;
age = 10;
name = 'zs';

同時聲明多個變量並賦值

var age = 10, name = 'zs';

變量的命名規則和規範

規則 - 必須遵守的，不遵守會報錯
- 由字母、數字、下劃線、$符號組成，不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while。
- 區分大小寫
規範 - 建議遵守的，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword

數據類型

簡單數據類型

Number、String、Boolean、Undefined、Null

Number類型

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

110 1024 60.5
進制

十進制
	var num = 9;
	進行算數計算時，八進制和十六進制表示的數值最終都將被轉換成十進制數值。
十六進制
	var num = 0xA;
	數字序列範圍：0~9以及A~F
八進制
    var num1 = 07;   // 對應十進制的7
    var num2 = 019;  // 對應十進制的19
    var num3 = 08;   // 對應十進制的8
    數字序列範圍：0~7
    如果字面值中的數值超出了範圍，那麼前導零將被忽略，後面的數值將被當作十進制數值解析

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

浮點數
	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

String類型

‘abc’ “abc”

轉義符
- 字符串長度
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. 兩邊如果都是數字，那麼就是算術功能。

Boolean類型

Boolean字面量： true和false，區分大小寫
計算機內部存儲：true爲1，false爲0

Undefined和Null

undefined表示一個聲明瞭沒有賦值的變量，變量只聲明的時候值默認是undefined
null表示一個空，變量的值如果想爲null，必須手動設置

複雜數據類型

Object

獲取變量的類型

typeof

var age = 18;
console.log(typeof age);  // 'number'

字面量

在源代碼中一個固定值的表示法。

數值字面量：8, 9, 10

字符串字面量：“大前端”

布爾字面量：true，false

註釋

單行註釋

用來描述下面一個或多行代碼的作用

// 這是一個變量
var name = 'hm';

多行註釋

用來註釋多條代碼

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

數據類型轉換

如何使用谷歌瀏覽器，快速的查看數據類型？

字符串的顏色是黑色的，數值類型是藍色的，布爾類型也是藍色的，undefined和null是灰色的

轉換成字符串類型

toString()

var num = 5;
console.log(num.toString());

String()

String()函數存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null

拼接字符串方式

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

Number()

Number()可以把任意值轉換成數值，如果要轉換的字符串中有一個不是數值的字符，返回NaN

parseInt()

var num1 = parseInt("12.3abc");  // 返回12，如果第一個字符是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123");   // 返回NaN，如果第一個字符不是數字或者符號就返回NaN

parseFloat()

parseFloat()把字符串轉換成浮點數
parseFloat()和parseInt非常相似，不同之處在與
	parseFloat會解析第一個. 遇到第二個.或者非數字結束
	如果解析的內容裏只有整數，解析成整數

+，-0等運算

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

轉換成布爾類型

Boolean()

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

操作符

運算符 operator

5 + 6

表達式組成操作數和操作符，會有一個結果

算術運算符

+ - * / %

一元運算符

一元運算符：只有一個操作數的運算符

5 + 6 兩個操作數的運算符二元運算符

++ 自身加1

– 自身減1

前置++

var num1 = 5;
++ num1; 

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

後置++

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

邏輯運算符(布爾運算符)

&& 與 兩個操作數同時爲true，結果爲true，否則都是false
|| 或 兩個操作數有一個爲true，結果爲true，否則爲false
!  非  取反

關係運算符(比較運算符)

<  >  >=  <=  == != === !==

==與===的區別：==只進行值得比較，===類型和值同時相等，則相等

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

賦值運算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相當於  num = num + 5;

運算符的優先級

優先級從高到底
	1. ()  優先級最高
	2. 一元運算符  ++   --   !
	3. 算數運算符  先*  /  %   後 +   -
	4. 關係運算符  >   >=   <   <=
	5. 相等運算符   ==   !=    ===    !==
	6. 邏輯運算符 先&&   後||
	7. 賦值運算符

表達式和語句

表達式

一個表達式可以產生一個值，有可能是運算、函數調用、有可能是字面量。表達式可以放在任何需要值的地方。

語句

語句可以理解爲一個行爲，循環語句和判斷語句就是典型的語句。一個程序有很多個語句組成，一般情況下;分割一個一個的語句

流程控制

程序的三種基本結構

順序結構

從上到下執行的代碼就是順序結構

程序默認就是由上到下順序執行的

分支結構

根據不同的情況，執行對應代碼

循環結構

循環結構：重複做一件事情

分支結構

if語句

語法結構

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

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

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

三元運算符

表達式1 ? 表達式2 : 表達式3
是對if……else語句的一種簡化寫法

switch語句

語法格式:

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

break可以省略，如果省略，代碼會繼續執行下一個case
switch 語句在比較值時使用的是全等操作符, 因此不會發生類型轉換（例如，字符串'10' 不等於數值 10）

布爾類型的隱式轉換

流程控制語句會把後面的值隱式轉換成布爾類型

轉換爲true   非空字符串  非0數字  true 任何對象
轉換成false  空字符串  0  false  null  undefined

// 結果是什麼？
var a = !!'123';

循環結構

在javascript中，循環語句有三種，while、do…while、for循環。

while語句

基本語法：

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

代碼示例：

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

do…while語句

do…while循環和while循環非常像，二者經常可以相互替代，但是do…while的特點是不管條件成不成立，都會執行一次。

基礎語法：

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

代碼示例：

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

for語句

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

for循環語法：

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

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

初始化表達式
判斷表達式
自增表達式
循環體

continue和break

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

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

調試

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

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

調試步驟

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

調試中的相關操作

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

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

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

數組

爲什麼要學習數組

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

數組的概念

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

數組的定義

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

通過數組字面量創建數組

// 創建一個空數組
var arr1 = []; 
// 創建一個包含3個數值的數組，多個數組項以逗號隔開
var arr2 = [1, 3, 4]; 
// 創建一個包含2個字符串的數組
var arr3 = ['a', 'c']; 

// 可以通過數組的length屬性獲取數組的長度
console.log(arr3.length);
// 可以設置length屬性改變數組中元素的個數
arr3.length = 0;

獲取數組元素

數組的取值

// 格式：數組名[下標]	下標又稱索引
// 功能：獲取數組對應下標的那個值，如果下標不存在，則返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 這個數組的最大下標爲2,因此返回undefined

遍歷數組

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

數組遍歷的基本語法：

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

數組中新增元素

數組的賦值

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

函數

爲什麼要有函數

如果要在多個地方求1-100之間所有數的和，應該怎麼做？

什麼是函數

把一段相對獨立的具有特定功能的代碼塊封裝起來，形成一個獨立實體，就是函數，起個名字（函數名），在後續開發中可以反覆調用

函數的作用就是封裝一段代碼，將來可以重複使用

函數的定義

函數聲明

function 函數名() {
  // 函數體
}

函數表達式

var fn = function () {
  // 函數體
}

特點：

函數聲明的時候，函數體並不會執行，只要當函數被調用的時候纔會執行。
函數一般都用來幹一件事情，函數名稱一般使用動詞

函數的調用

調用函數的語法：

函數名();

特點：

函數體只有在調用的時候纔會執行，調用需要()進行調用。
可以調用多次(重複使用)

代碼示例：

// 聲明函數
function sayHi() {
  console.log("吃了沒？");
}
// 調用函數
sayHi();

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

函數的參數

爲什麼要有參數

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

// 雖然上面代碼可以重複調用，但是隻能計算1-100之間的值
// 如果想要計算n-m之間所有數的和，應該怎麼辦呢？

語法：

// 函數內部是一個封閉的環境，可以通過參數的方式，把外部的值傳遞給函數內部
// 帶參數的函數聲明
function 函數名(形參1, 形參2, 形參3...) {
  // 函數體
}

// 帶參數的函數調用
函數名(實參1, 實參2, 實參3); 
形參1 = 實參1
形參2 = 實參2

形參和實參
1. 形式參數：在聲明一個函數的時候，爲了函數的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值，僅僅起到一個佔位置的作用，我們通常稱之爲形式參數，也叫形參。
2. 實際參數：如果函數在聲明時，設置了形參，那麼在函數調用的時候就需要傳入對應的參數，我們把傳入的參數叫做實際參數，也叫實參。

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
// x,y實參，有具體的值。函數執行的時候會把x,y複製一份給函數內部的a和b，函數內部的值是複製的新值，無法修改外部的x,y

函數的返回值

當函數執行完的時候，並不是所有時候都要把結果打印。我們期望函數給我一些反饋（比如計算的結果返回進行後續的運算），這個時候可以讓函數返回一些東西。也就是返回值。函數通過return返回一個返回值

返回值語法：

//聲明一個帶返回值的函數
function 函數名(形參1, 形參2, 形參3...) {
  //函數體
  return 返回值;
}

//可以通過變量來接收這個返回值
var 變量 = 函數名(實參1, 實參2, 實參3...);

函數的調用結果就是返回值，因此我們可以直接對函數調用結果進行操作。

arguments的使用

JavaScript中，arguments對象是比較特別的一個對象，實際上是當前函數的一個內置屬性。也就是說所有函數都內置了一個arguments對象，arguments對象中存儲了傳遞的所有的實參。arguments是一個僞數組，因此及可以進行遍歷

function getSum() {
    var sum = 0;
    for (var i = 0; i<arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
}
var sum = getSum(5,1,3,7);
console.log(sum);

函數其它

匿名函數

匿名函數：沒有名字的函數

匿名函數如何使用：

將匿名函數賦值給一個變量，這樣就可以通過變量進行調用
匿名函數自調用

自調用函數

匿名函數不能通過直接調用來執行，因此可以通過匿名函數的自調用的方式來執行

(function () {
  alert(123);
})();

函數是一種數據類型

function fn() {}
console.log(typeof fn);

函數作爲參數

因爲函數也是一種類型，可以把函數作爲兩一個函數的參數，在另一個函數中調用

函數做爲返回值

因爲函數是一種類型，所以可以把函數可以作爲返回值從函數內部返回。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

代碼規範

1.命名規範	
	變量、函數 的命名 必須要有意義
	變量 的名稱一般用名詞
	函數 的名稱一般用動詞
2.變量規範   
	操作符的前後要有空格
	var name = 'zs';	  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() {
      
	}

作用域

作用域：變量可以起作用的範圍

全局變量和局部變量

全局變量

在任何地方都可以訪問到的變量就是全局變量，對應全局作用域
局部變量

只在固定的代碼片段內可訪問到的變量，最常見的例如函數內部。對應局部作用域(函數作用域)

不使用var聲明的變量是全局變量，不推薦使用。
變量退出作用域之後會銷燬，全局變量關閉網頁或瀏覽器纔會銷燬

塊級作用域

任何一對花括號（｛和｝）中的語句集都屬於一個塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之爲塊級作用域。
function fn() {}
console.log(typeof fn);


- 函數作爲參數

因爲函數也是一種類型，可以把函數作爲兩一個函數的參數，在另一個函數中調用

- 函數做爲返回值

因爲函數是一種類型，所以可以把函數可以作爲返回值從函數內部返回。

```javascript
function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

代碼規範

1.命名規範	
	變量、函數 的命名 必須要有意義
	變量 的名稱一般用名詞
	函數 的名稱一般用動詞
2.變量規範   
	操作符的前後要有空格
	var name = 'zs';	  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() {
      
	}

作用域

作用域：變量可以起作用的範圍

全局變量和局部變量

全局變量

在任何地方都可以訪問到的變量就是全局變量，對應全局作用域
局部變量

只在固定的代碼片段內可訪問到的變量，最常見的例如函數內部。對應局部作用域(函數作用域)

不使用var聲明的變量是全局變量，不推薦使用。
變量退出作用域之後會銷燬，全局變量關閉網頁或瀏覽器纔會銷燬

塊級作用域

任何一對花括號（｛和｝）中的語句集都屬於一個塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之爲塊級作用域。
在es5之前沒有塊級作用域的的概念,只有函數作用域，現階段可以認爲JavaScript沒有塊級作用域