JavaScript進階學習

JavaScript進階學習

JavaScript學習接受順序：

1. 熟悉基本概念：變量，數據類型，函數，運算符，表達式，對象（自定義對象，內置對象）。這些基本概念必定要熟悉，熟悉到什麼程度，看見一個概念，馬上就能寫出示例代碼，就夠了。

2. 熟悉DOM：樹狀結構，節點分類，添加節點，刪除節點，修改屬性，綁定事件。

3. 熟悉jQuery：選擇器、操做屬性和樣式、綁定事件、節點操做、動畫方法。

4. 用jQuery實現網頁上看到的頁面效果，好比輪播圖，菜單的各類效果，返回頂部等。

5. 試着用原生的js實現jQuery的經常使用方法。好比addClass，removeClass,index這些。

上面5條若是沒能作到，就不要想着閉包，原型繼承，ES6新特性這些東西了。

總結：學習要按部就班，操之過急輕則影響學習效率，重則因挫敗感而放棄學習。但願你們都能早日學有所成。

---

[熟悉基本概念]

---

一.變量

1. 變量基本概念

裝東西的盒子
​
變量是用於存放數據的容器咱們經過變量名獲取數據，甚至數據能夠修改。
​
程序在內存中申請的一塊用來存放數據的空間

2. 變量的使用

   聲明變量 賦值

   聲明變量 var(聲明) /至關於起名/

   賦值 上一步聲明的名稱 = 保存數據的值

   輸出結果 將給的名稱輸出（ prompt / alert / console.iog ）

3. 變量語法擴展

   一個變量被重複賦值後以最後一個賦值爲準

   只聲明不賦值默認輸出undefined

   不聲明不賦值直接輸出會報錯

   不聲明直接賦值可使用（不推薦）

   報錯後沒法執行下一步操做

   4. 交換變量

      須要臨時變量

      把a給臨時變量

      把2給1

      把臨時變量給2

例：
var a="1";
var b="2";
var c;	//臨時變量
c = a;
a = b;
b = c;

---

二.數據類型

1. 數據類型簡介
   不一樣數據佔據數據空間不一樣，根據存儲空間的不一樣因此把數據分紅了不一樣的數據類型

   變量的數據類型不肯定；要根據變量的賦值來肯定數據類型

   js的變量數據類型是隻有程序在運行過程當中，根據等號右邊的值來肯定的

   js是動態語言變量的數據類型是能夠變得

2. 簡單的數據類型

• Number 數字型包含 整型值，浮點型值；如;21/0.21(整數和小數)

  • 數字輸出0開頭是八進制 0x開頭是16進制

  • ​ Number.MAX_VALUE JavaScript中數值的最大值

  • Number.MIN_VALUE JavaScript中數值的最小值

  • NaN 表明一個非數值

  • isNaN 用來判斷是否是數字 isNaN（內容）；[是數字顯示 false,非數字顯示true；]

• Boolean 布爾型 如：true、false、等價於1和0；

• String 字符串類型 語法爲加單引號/雙引號；相同引號不能互相嵌套
  字符串轉義符 字符串都是用\開頭，轉義符必須寫到引號裏面
  |轉義符|做用|
  |---|--|
  |\n| 換行符|
  |\\ | 斜槓|
  |\' | 單引號|
  |\" |雙引號|
  |\t | Tab縮進|
  |\b | 空格|

字符串長度 length屬性能夠獲取整個字符串的長度

字符串的拼接 用「+」進行字符串的拼接；數值相加，字符相連

變量不要寫到字符串裏，是經過和「+」字符串的方式實現的

3. Undefined和Null

   **一個聲明後沒有賦值的變量會有一個默認值undefined(若是進行相連或者相加時注意結果)

   一個聲明變量給null值，裏面存的值爲空（注意相連和相加的結果）**

4. 檢測數據類型

   輸出typeof+數據 顯示數據類型（經過typeof來判斷數據類型）

   數據類型	含義
   number	數字型
   string	字符型
   boolean	布爾型
   undefined	未定義類型
   object	空類型字面量

5. 數字字面量：一、二、3

   字符串字面量：‘內容’

   布爾字面量：true、false

6. 數據類型的轉換(把一種數據類型的變量轉換成另外一種數據類型)

   轉換爲字符串類型

   • toString
     變量.toString
   • tring(變量)[強制變換]
   • 加號拼接字符串（又被稱爲隱式轉換）
     輸出（變量+「字符串」）
   • 轉換爲數字型（string=變量）
     • parselnt(string)函數 將string類型轉成【整數數值 】 parselnt（"223"）
       會去除單位
     • ​ parseFloat(string)函數 將string類型轉成【浮點數數值型 】
   • 轉換爲布爾型
     • Boolean()函數 其 他類型轉換成布爾型 Boolean('b')|

---

變量數據類型總結

編程語言---->編譯器--------->機器語言（二進制）

標識符：就是指開發人員爲變量、屬性、函數、參數取得名；
關鍵字：是指js自己已經使用了的字，不能再充當變量、方法名；
保留字：其實是預留的關鍵字；

交換變量：

臨時變量=有值變量（把右邊的值給左邊）

---

三.運算符

1. 算數運算符 ‘+’、‘-’、‘*’、‘/’、‘%’（取餘）【返回除法餘數9%2=1】

   • 浮點數（小數）在算數運算符裏運算會出現問題；
   • 程序算術運算也有優先級；
   • 表達式和返回值

2. 遞增遞減運算符（遞增遞減運算符必須結合變量使用）

   • 遞增運算符（++）
     前置遞增運算符 ++寫在變量的前面
     後置遞增運算符 ++寫在變量的後面
     **後置變量是先返回原值再自加1 **
     變量++=【變量=變量++ + 1】；此時變量++=變量的值；
     若是此處混淆可查視頻 {/*後置遞增運算符運算時是先返回變量原值再運算
   • 遞減運算符（--）【同上可得】

3. 比較運算符

比較運算符	含義
<	小於號
>	大於號
>=	大於或等於
<=	小於或等於
==	判斷(會轉型)
!=	不等於
===	全等 要求值和數據類型全都同樣
!==	不全等 要求值和數據類型全都不同

4. 邏輯運算符 要注意邏輯中斷！！！
   概念：邏輯運算符是用來進行布爾值運算的運算符，其返回值也是布爾值。後面開發中常常用於多個條件的判斷
   |邏輯運算符|含義|
   |--|--|
   | && | '邏輯與',簡稱'與' and|
   |||| '邏輯或',簡稱'或' or|
   | ！ | '邏輯非',簡稱'非' not|

5. 賦值運算符

   賦值運算符	含義	例子
   =	賦值運算符	var 變量=賦值；
   +=、-=	加減一個數後賦值	var 變量=10； 變量+=5；輸出15
   *=、/=、%=	乘除取模後賦值	var 變量=2； 變量*=5；輸出10

---

四 流程控制

來控制代碼按照什麼結構順序來執行
	有三種

1. 順序結構
   按照書寫順序依次執行
2. 分支結構
   根據不一樣條件執行不一樣路徑的代碼，從而獲得不一樣的結果。

• if語句

var number1 = prompt('請輸入一個整數');
if（number1 > 50）{
alert('這個數大於50')；
}

執行思路 若是if裏面的條件表達式爲真（true）則執行大括號裏面的語句
若是if表達式結果爲假 則不執行大括號裏的語句 則執行if語句後面的代碼

• if語句 else語句【if（若是）lese（不然）】
  if（條件表達式）{
  /執行語句；
  }else{
  //執行語句；
  }
  例子：

var year = prompt('請輸入年份');
  if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
  alert('今年是閏年')；
  }else{
  alert('今年不是閏年')；
  };

• 多分支語句

if（條件表達式1）{
//執行語句1;
}else if（條件表達式2）{
//執行語句2;
}else if（條件表達式3）{
//執行語句3;
}else{
//執行語句4;
}

• 三元表達式
  有三元運算符組成的式子
  語法結構：
  //條件表達式 ？ 表達式1：表達式2
  執行思路：
  若是條件表達式結果爲真 則 返回 表達式1 的值 若是條件表達式結果爲假 則返回表達式2的值
  例子：(至關於簡化版的if~else 語句)

var num = 10; 
   	  				var result = num > 5 ?	'是的' ： '不是的';   //表達式是有返回值的
   	  				console.log(result)

• switch語法結構
  switch 語句也是多分支語句也能夠實現多選一
  //語法結構 swith 轉換、開關 case （小例子或選項的意思）
  swith(表達式){
  case value1:
  執行語句1;
  break;
  case value2:
  執行語句2;
  break;
  default：
  執行最後的語句;
  }
  //執行思路：利用表達式的值 和 參數後面的選項值相匹配 若是匹配上，
  就執行該case裏的語句 若是沒有匹配上，那麼執行 default裏面的語句
  代碼：

  <script>
   					switch(1){
   						case 1:
   						console.log('這是1');
   						break;//結束循環
   						case 2:
   						console.log('這是2');
   						break;
   						default:
   						console.log('沒有匹配結果');
   					}
   				</script>

  ​ 注意事項
  ​ 在開發裏面 表達式常常寫成變量
  ​ 值和數據類型同樣才能夠執行
  ​ break 若是當前case裏面沒有break 則不會退出swith 是繼續執行下一個case

---

switch語句和if else if 語句的區別

1. 通常狀況下，他們兩個語句能夠互相替換
2. switch....case 語句一般處理case比較肯定值的狀況，而 if..else...語句更加靈活，經常使用於大範圍判斷（大於、等於某個範圍）
3. switch語句進行判斷後直接執行到程序的條件的程序預計，效率高。而if...else語句有幾種條件，得判斷多少次。
4. 當分支比較少時，if...else 語句的執行效率比switch語句高
5. 當分支比較多時，switch語句的執行效率比較高並且結構更清晰。

---

五 循環結構

循環的目的：能夠重複執行某些代碼

1. for循環

• for循環 重複執行某些代碼，一般跟計數有關係

  for 語法結構
  for(初始化變量;條件表達式;操做表達式){
  //循環體
  }

  • 初始化變量 就是用var 聲明的一個普通變量， 一般用於做爲計數器使用

  • 條件表達式 就是用來決定每一次循環是否繼續執行 就是終止的條件

  • 操做表達式 是每次循環最後執行的代碼常常以哦那個與咱們計數器變量進行更新（遞增或者遞減）

  • 代碼體驗 咱們重複打印100句 你好

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

  ---

  循環小結：

  1. for循環能夠重複執行某些相同代碼

  2. for循環能夠重複執行些許不一樣代碼，由於咱們有計數器

  3. for循環能夠重複執行某些操做，好比算術運算符加法操做

  4. 隨着需求增長，雙重for循環能夠作更多、更好看的效果

  5. 雙重for循環，外層循環一次，內層循環所有

  6. for循環是循環條件和數字直接相關的循環

  7. 分析比寫代碼更重要

  8. 一些核心算法想不到，但要學會，分析他的執行過程

  9. 觸類旁通本身常總結，作一些案例
     while 循環
     while 語句能夠在條件表達式爲真的前提下，循環執行指定一段代碼，直到表達式不爲真時結束循環。
     裏面要有計數器 初始化變量
     裏面還要有操做表達式 完成計數器更新防止死循環
     do while
     執行思路 先執行一次循環體 再判斷條件 若是條件表達式結果爲真，則繼續執行循環體，不然退出循環
     do{
     //循環體
     }while(條件表達式)
     先執行循環體，再判斷，do~while語句至少執行一次循環體代碼！

     ---

  continue break關鍵字
  continue 關鍵字用於當即跳出本次循環，繼續下一次循環（本次循環體重的continue以後的代碼就會少執行一次）
  break 關鍵字用於當即跳出整個循環（循環結束）

  ---

六 數組

數組就是一組數字的集合，存儲在單個變量的下的優雅方式

• js中建立數組有兩種方式：

1. 利用new建立數組
   var arr = new Array();//建立了空的數組

2. 利用數組字面量建立數組
   利用數組字面量建立數組 []
   var arr = [];//建立了一個空的數組
   例如：var arr = [1,2,'不得不'，true];

• 獲取數組中的元素
  數組索引
  索引（下標）：用訪問數組元素的序號（數組下標從0開始）。
  var arr = ['是否','是否','綁定]；
  索引號： 0 1 2
  //遍歷數組：就是把數組的元素從頭至尾的訪問一次
  var arr = ['red','green','blue'];
  for(var i = 0; i < 3;i++){
  docment.write(arr[i]);
  }
  //1.由於咱們的數組索引號從0開始，因此i必須從0開始
  //2.輸出的時候arr[i] i計數器當索引號來用
  數組長度 數組名.length
  var arr = ['red','green','blue'];
  for(var i = 0; i < arr.length;i++){
  docment.write(arr[i]);
  }
  數組名.length 動態監測數組元素的個數
  //求和和平均值
  var arr = [2,6,1,7,4];
  var sum = 0;
  var average = 0;
  for(var i=0;i<arr.length;i++){
  sum += arr[i];
  }
  average = sum / arr.length;
  console.log(sum,average);
  求數組中的最大值 //求數組中的最大值 //聲明一個保存最大值的變量 max //默認最大值能夠取數組中的第一個元素 //遍歷和個數組把裏面的每個元素和max相比較 //若是這個數組元素大於max就把這個數組元素存到max裏面，不然繼續下一輪比較 //最後輸出這個max var arr = [2,6,1,77,52,25,7]; var max = arr[0]; for (var i= 1; i<arr.length;i++){ if(arr[i]>max){ max =arr[i]; } } alert('數據中的最大值是'+max);