JS基礎變數、運算子和分支結構

標籤：哈哈   範圍   變數注意事項   運算式   彈窗   資料   結束   常用   type   

[使用JS的三種方式]
   1、HTML標籤中內嵌JS(不提倡使用)：
   <button onclick="javascript:alert(‘小婊子，真點啊！‘)">有本事點我呀</button>
   2、HTML頁面中直接使用JS:
   <script type="text/javascript">
   //JS代碼
  </script>
   3、引用外部JS檔案：
   <script language="JavaScript" src="JS檔案路徑"></script>
   [注意事項]
   ①頁面中JS代碼與引用JS代碼，可以嵌入到HTML頁面的任何位置，但是，位置不同會影響JS代碼的執行順序;
   例如：<script>在body前面，會在頁面載入之前執行JS代碼;
   ②頁面中JS代碼，使用type="text/javascript"
   引用外部的JS檔案，使用language="JavaScript"
   ③引用外部JS檔案的<script></script>標籤，必須成對出現，且標籤內部不能有任何代碼！

 

JS中的注釋
單行注釋。ctrl+/
段落注釋 ctrl+shift+/
 

【JS中的變數】
 * 1、JS中變數聲明的寫法：
   * var width = 10; 使用var聲明的變數，只在當前函數範圍有效
   width1=11;不使用var，直接賦值產生的變數，預設為全域變數，整個JS檔案有效
   var a,b,c=1;//同一聲明語句同時聲明多個變數，變數之間用英文逗號分隔。但賦值需要單獨賦，例如上式中，只有c賦為1，a/b為undefined（未定義）
   [聲明變數注意事項]
   ①JS中所有變數型別宣告，均使用var關鍵字。變數的具體資料類型，取決於給變數賦值的執行
   ②同一變數，可以在多次不同賦值時，修改變數的資料類型。
   var width = 10;//width 為整形變數
   width="哈哈";//width被改為字串類型
   ③變數可以使用var聲明，也可以省略var。[區別]不使用var，預設為全域變數
   ④同一變數名，可以多次用var聲明。但是並沒有任何含義，也不會報錯。第二次之後的聲明，只會被理解為賦值；
 2、變數的命名規範：
   ①變數名只能有字母、數字、底線、$組成
   ②開頭不能是數字
   ③變數區分大小寫，大寫字母與小寫字母為不同變數
 3、變數名命名要符合駝峰法則：
   ①變數開頭為小寫，之後每個單字首大寫（或單詞之間用底線分隔）；
   liwenhaoIsShuaiGe √
   li_wenhao_is_shuai_ge √
   liwenhaoisshuaige ×
 4、JS中的變數的資料類型
  Undefined：未定義，用var聲明的變數，沒有進行初始化賦值。var a;
  Null：表示為空白的引用。例如，Null 物件、空數組。
  Boolean:真假，可選值true/false;
  Number:數實值型別，可以是小數，也可以是整數。
  String:字串類型，用""或‘‘包裹的內容，成為字串。
  Object(複雜資料類型)：後續講解，函數、數組等...

5、常用的數值函數：
  ① isNaN:用於判斷一個變數或常量是否為NaN(非數值)
  使用isNaN判斷時，會嘗試使用Number()函數進行轉換，如果能轉換為數字，則不是非數值，結果為false
  "111"純數字字串，false
  "" Null 字元串，false
  "ka"包含其他字元的字串，true
  true/false 布爾類型，false
  
  ②Number():將其他類型轉換為數實值型別
  [字串類型轉數值]
  >>>字串為純數值字串，會轉為對應的數字  "111"——111
  >>>字串為空白字串時，會轉為0   ""——0
  >>>字串包含其他非數字字元時，不能轉換  "111a"——NaN
  
  [布爾Boolean類型轉數值]
  true——1  false——0
  
  [null/Undefined轉數值]
  null——0   undefined——NaN
  
  [object類型轉數值]
  (以後再瞭解)先調用valueOF方法，確定函數是否有傳回值，再根據上述各種情況判斷
  
  ③parseInt：將字串轉為數實值型別
  >>>Null 字元串，不能轉。結果為NaN
  >>>純數值字串，能轉  "123"——123   "123.65"——123(小數轉化時，直接抹掉小數點，不進行四捨五入)
  >>>包含其他字元的字串，會截取第一個非數值字元前的數值部分
   "123a456"——123     "a123b456"——NaN
  >>>parseInt只能轉string類型，Boolean/null/undefined 均為NaN
  
  ④parseFloat：將字串轉為數值
  >>>使用方式同parseInt。但是，當轉化小數字串時，保留小數點；轉化整數字串時，保留整數；
   "123.5"——123.5   "123"——123
   
  ⑤typeof：用來檢測VARIANT 資料型別
  未定義——undefined        字串——string        true/false——boolean
  數值——number             對象/null——object      函數——function

[JS中的輸出語句]
    * 1、文檔中列印輸出：document.write();
    * document.wirte();
    * 輸出語句，將write的()中的內容列印在瀏覽器螢幕上；
    *
    * 使用時注意，除變數/常量以外的任何內容，列印時必須放到""中。變數/常量必須放到""外。
    * 列印的內容同時有多部分組成時，之間用+連結；
    * 例如：document.write("左手中的紙牌："+left+"<br/>")
    *
    * 2、彈窗輸出：alert();
    * alert();
    * 彈窗警告，()中的使用方式，同上
    *
    * 3、彈窗輸入：
    * prompt("請輸入您的名字：","你二大爺");
    * 兩部分參數：①輸入框上面的提示資訊，可選
    *     ②輸入框裡面的預設資訊，可選
    * 兩部分之間用逗號分隔，唯寫一部分時，預設為提示資訊；
    *
    * 可以定義變數接收輸入內容，例如var name=prompt("請輸入您的名字：");點擊確定按鈕，輸入成功;點擊取消按鈕，name=null;

1、 算術運算
       + 加、- 減、* 乘、 / 除、 % 地區、++ 自增、-- 自減
      
       +:有兩種作用，連結字串/加法運算；當+兩邊均為數字時，進行加法運算；當+兩邊有任意一邊為字串時，進行字串連結，串連之後的結果認為字串
       ++：自增運算子，將變數在原有基礎上+1；
       --：自減運算子，將變數在原有基礎上-1；
      
   2、  賦值運算
       =  +=  -=  **=  /=  %=
      
       +=：  a+=5;相當於a=a+5；但是前者的執行速率要比後者快。
   3、  關係運算
       == 等於、=== 嚴格等於、  ！= 不等於、>、<、>=、<=、
      
       ===：嚴格等於：類型不同，返回false；類型相同，再進行下一步判斷；
       ==：類型相同，同===；類型不同，嘗試將等式兩邊轉為數字，再判斷；
         特例：null==undefined  √    null===undefined  ×
   4、 條件運算子(多目運算)
       a>b?true:false
       有兩個關鍵符號： ？和：
       當？前面的部分運算結果為true時，執行：前面的代碼；
         當？前面的部分運算結果為false時，執行：後面的代碼；
    >>>多目運算子可以多層嵌套：
    例如：var jieguo=num>5?"輸入太大"：(num==5?"蒙對了！":"輸入太小");
   5、 邏輯運算子
       && 與、        || 或、      ！ 非、

 [運算子的優先順序]
      ()
      ! ++ --
      * /  %
      + -
        >  <    >=   <=
      ==  !=
      &&
      ||
      各種賦值 =  +=  *=  /=  %=
      
       [n++與++n的異同]
       n++：先使用n的值進行計算，然後再把n+1；
       ++n：先把n的值+1，然後在用n+1以後的值去運算；
                 相同點：不論是n++還是++n，在執行完代碼以後，均會把n+1；

[if-else結構]
    *1、結構寫法：
    * if(判斷條件){
    *  //條件為true時執行
    * }
    * else{
    *  //條件為false時執行
    * }
    *
    * 2、if()中的運算式，運算之後的結果應該為：
    * ①boolean：true 真     false   假
    * ②string： 非Null 字元串為真       Null 字元串為假
    * ③null/NaN/undefined：  全為假
    * ④object：全為真
    * ⑤number：0為假，一切非0均為真
    *
    * 3、else{}結構，可以根據具體情況省略；
    *
    *
    * [多重if、階梯if]
    * 1、結構寫法：
    *  if(條件1){
    *  //條件1成立
    * }else if(條件二){
    *  //條件1不成立&&條件二成立
    *  //else-if部分，可以有N多個
    * }else{
    *  //條件1不成立&&條件二不成立
    * }
    *
    *
    * 2、多重if結構中，各個判斷條件是互斥的！只能選擇其中一條路。
    *
    *
    * 3、if/else的{}可以省略，但是一般不提倡；
    *  如果省略{}，則if/else結構包含的代碼，僅為其後最近的一行(分號結束)；
    *  如果省略{}，則if/else結構永遠輸入其前方最近的一個if結構。
    *
    * 【嵌套if結構】
    *
    * 1、結構寫法：
    * if(條件1){
    *  //條件一成立
    *  if(條件二){
    *   // 條件一成立&&條件二也成立
    *
    * }else{
       // 條件一成立&&條件二不成立
      }
     }else{
      //條件一不成立
     }
    *
    * 2、if結構可以多重嵌套，但是原則上不超過3層
    *
    *
    *
    * 【switch-case結構】
    *
    * 1、結構寫法：
    *  switch(運算式){
    *   case 常量運算式1：
    *    語句1；
    *   break;
    *   case 常量運算式2：
    *    語句2；
    *   break;
    *   ……
    *   default；
    *   語句N
    *   break;
    * }
    *
    * 2、注意事項：
    *  ①switch()中的運算式，以及每個case後面的運算式，可以為任何JS支援的資料類型(對象和數組不行)；
    *  ②case後面的所有常量運算式，必須各不相同，否則只會執行第一個；
    *  ③case後的常量可以是任何資料類型，同一個switch結構的不同case，可以是多種不同的資料類型；
    *  ④switch在進行判斷的時候，採用的是全等判斷===。
    *  ⑤break的作用：執行完case代碼後，跳出當前switch結構；
    *  缺少break的後果：從正確的case項開始，依次執行所有的case和default。原因：⑥↓
    *  ⑥switch結構在判斷時，只會判斷一次正確答案，當遇到正確的case項後，將不再判斷後續項目，依次往下執行。
    *  ⑦基於⑥，switch結構的執行速率要快於多重if結構，在多路分支時，可優先考慮使用switch結構。

 

JS基礎變數、運算子和分支結構