1.JS簡介

• JavaScript簡稱JS，是前端開發的一門腳本語言(解釋型語言)
  • 解釋型語言：程序執行之前，不需要編譯，直接運行時邊解析邊執行的語言
  • 編譯型語言：程序執行之前，需要一個專門的編譯過程，把程序編譯成為機器語言的文件，比如exe文件
• 組成部分
  • ECMAScript：JavaScript的語法標準
  • DOM(Document Object Model) 通過js操作網頁元素
  • BOM(Browser Object Model) 通過api操作瀏覽器
• 特點
  • 簡單易用
  • 解釋執行
    • 編譯執行 java c# 轉化為.dll可執行文件==>電腦讀取.dll可執行文件
  • 基于對象面向過程

2.JS的書寫位置

• 內嵌式

  </body>
  ... ...
  <script type="text/javascript">
      alert("hello world");
  </script>
  </body>
  

  • 通常將js代碼放在body的最后, 因為HTML是從上至下加載, 而js代碼通常是給標簽添加交互(操作元素), 所以需要先加載HTML, 否則如果執行js代碼時HTML還未被加載, 那么js代碼將無法添加交互(操作元素);
  • HTML頁面中出現<script>標簽后，就會讓頁面暫停等待腳本的解析和執行。無論當前腳本是內嵌式還是外鏈式，頁面的下載和渲染都必須停下來等待腳本的執行完成才能繼續, 所以如果把js代碼寫在head中, 那么js代碼沒有執行完畢之前后續網頁無法查看

• 外鏈式

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

  • 外鏈式的script代碼塊中不能編寫js代碼, 即便寫了也不會執行

  <script type="text/javascript" src="01-js書寫格式.js">
  alert("hello world"); // 不會被執行
  </script>
  

• 注意

  • 寫js代碼的時候，分號不能省略
  • 由于每次加載外鏈式的js文件都會發送一次請求, 這樣非常消耗性能, 所以在企業開發中推薦將多個JS文件合成為一個JS文件,以提升網頁的性能和加載速度

3.JS中輸出消息的幾種方式

• alert() 在頁面彈出一個對話框，早期JS調試使用
• Confirm() 在頁面彈出一個對話框, 常配合if判斷使用
• console.log() 將信息輸入到控制臺，用于js調試
• prompt() 彈出對話框，用于接收用戶輸入的信息
• document.write()在頁面輸出消息
  • document.write不僅能輸出信息，還能輸出標簽。

  alert("哈哈");
  confirm("哈哈");
  console.log("哈哈");
  prompt("哈哈");
  document.write("第一行<br><strong>第二行</strong>")

3.JS的注釋

• 快捷鍵 ctrl+/
• 單行注釋 //
• 多行注釋 /* */

4.變量

• 定義變量
• 給變量賦值
• 定義并賦值

var name;//定義變量
name = "李四";//給變量賦值

var name = "李四";//定義變量并且賦值

• 變量的命名規范
  • 不能以數字或者純數字開頭來定義變量名
  • 不推薦使用中文來定義變量名
  • 不能使用特殊符號或者特殊符號開頭(-除外)
  • 不推薦使用關鍵字和保留字來定義變量名

  • 在JS中嚴格區分大小寫的

    
    
    關鍵字保留字.png

5.JS中的數據類型

• 查看數據類型 typeof()

var n1 = 100;
alert(typeof(n1));

• Number 數字類型
  • 包含整數和小數

  var num1 = 100;
  var num2 = 1.05;
  alert(typeof(num1));
  alert(typeof(num2));
  

  • 數字類型的表達方式
    • 十進制
    • 十六進制(從0-9，a(A)-f(F)表示數字。以0x開頭。)
    • 八進制(0開頭，0-7組成。)
  • 最大小值,無窮大小值(由于內存的限制，ECMAScript 并不能保存世界上所有的數值)
    • 最大值：Number.MAX_VALUE
    • 最小值：Number.MIN_VALUE
    • 無窮大：Infinity, 如果超過了最大值就會返回該值
    • 無窮小：-Infinity, 如果超過了最小值就會返回該值
    • NaN 非法數字（Not A Number）,JS中當對數值進行計算時沒有結果返回，則返回NaN
• String 字符串
  • 凡是用雙引號或者單引號引起的都是字符串。

  var str1 = "哈哈";
  var str2 = '哈哈';
  alert(typeof(num1));
  alert(typeof(num2));
  

• Boolean 布爾數據類型
  • 只有2個值一個是true, 一個是false. 實際運算中true=1,false=0

  var n1 = 1;
  var n2 = 2;
  alert(typeof(n1==n2);//false
  alert(typeof(n1<n2);//true
  

• Undefined 變量未初始化
  • 定義了變量，沒有給變量賦值,但變量在內存中是存在的

  var n1;
  alert(n1);
  

• Null 空值(變量未引用)
  • 在內存中是找不到這個變量的

   var n1 = null;
  

6.比較運算符

• 大于>
• 小于<
• 大等>=
• 小等<=
• 等于 ==
• 不等于 !=

7.算術運算符

• +號
  • 兩個數字類型的變量相加，得到的是一個數字類型。
  • 一個數字類型和一個字符串相加，得到的是一個字符串。
• -號
  • 兩個數字類型的變量相減，得到的是一個數字類型。
  • 一個數字類型和一個數字字符串相減，得到的是一個數字類型。
  • 一個數字類型和一個非數字字符串相減，得到的是NaN,是一個數字類型。
• /號
  • 兩個數字類型的變量相除，得到的是一個數字類型。
  • 一個數字類型和一個數字字符串相除，得到的是一個數字類型。
  • 一個數字類型和一個非數字字符串相除，得到的是NaN,是一個數字類型。
  • 0做為除數的時候，得到結果 Infinity （無限大），是一個數字類型。
• %(取余數)

8.帶操作的運算符