JavaScript基礎

簡介

一門客戶端腳本語言,運行在客戶端瀏覽器中的。每一個瀏覽器都有JavaScript的解析引擎；不需要編譯，直接就可以被瀏覽器解析執行了。

功能

可以來增強用戶和html頁面的交互過程，可以來控制html元素，讓頁面有一些動態的效果，增強用戶的體驗。

基本語法

• 與html結合方式
  • 內部JS：
    • 定義<script>，標簽體內容就是js代碼
  • 外部JS：
    • 定義<script>，通過src屬性引入外部的js文件
  • 注意:
    • <script>可以定義在html頁面的任何地方。但是定義的位置會影響執行順序
    • <script>可以定義多個
• 注釋
  • 單行注釋：//注釋內容
  • 多行注釋：/*注釋內容*/
• 數據類型
  • 原始數據類型(基本數據類型)
    • number：數字。 整數/小數/NaN(not a number 一個不是數字的數字類型)
    • string：字符串。 字符串 "abc" "a" 'abc'
    • boolean: true和false
    • null：一個對象為空的占位符
    • undefined：未定義。如果一個變量沒有給初始化值，則會被默認賦值為undefined
  • 引用數據類型：對象
• 變量
  • 定義：一小塊存儲數據的內存空間
  • 類型：弱類型,在開辟變量存儲空間時，不定義空間將來的存儲數據類型，可以存放任意類型的數據。
  • 語法：var 變量名 = 初始化值;
  • typeof運算符：獲取變量的類型；null運算后得到的是object。

運算符

• 一元運算符:只有一個運算數的運算符
  • ++(--) 在前，先自增(自減)，再運算
  • ++(--) 在后，先運算，再自增(自減)
  • +(-)：正負號
    • string轉number：按照字面值轉換。如果字面值不是數字，則轉為NaN（不是數字的數字）
    • boolean轉number：true轉為1，false轉為0
    • 注意：在JS中，如果運算數不是運算符所要求的類型，那么js引擎會自動的將運算數進行類型轉換
• 算數運算符
  • • • • / % ...
• 賦值運算符
  = += -+....
• 比較運算符
  > < >= <= == ===(全等於)
  • 比較方式
  1. 類型相同：直接比較
     • 字符串：按照字典順序比較。按位逐一比較，直到得出大小為止。
  2. 類型不同：先進行類型轉換，再比較
     • ===：全等於。在比較之前，先判斷類型，如果類型不一樣，則直接返回false
• 邏輯運算符
  && || !
  • 其他類型轉boolean
    • number：0或NaN為假，其他為真
    • string：除了空字符串("")，其他都是true
    • null&undefined:都是false
    • 對象：所有對象都為true
• 三元運算符
  • 語法
    • 表達式? 值1:值2;
    • 判斷表達式的值，如果是true則取值1，如果是false則取值2；
• 流程控制語句
  • if...else...
  • switch: 在JS中,switch語句可以接受任意的原始數據類型
  • while
  • do...while
  • for
• JS特殊語法
  • 語句以;結尾，如果一行只有一條語句則 ;可以省略 (不建議)
  • 變量的定義使用var關鍵字，也可以不使用
    • 用： 定義的變量是局部變量
    • 不用：定義的變量是全局變量(不建議)

對象

• 創建方法對象
  • 創建
    • var fun = new Function(形式參數列表,方法體);

    function 方法名稱(形式參數列表){
    		方法體
    			       } 
    

    var 方法名 = function(形式參數列表){
                           
    		 方法體
                           
    				    }
    

    • 屬性:
      • length:代表形參的個數
    • 特點:
      1. 方法定義是，形參的類型不用寫,返回值類型也不寫;
      2. 方法是一個對象，如果定義名稱相同的方法，會覆蓋;
      3. 在JS中，方法的調用只與方法的名稱有關，和參數列表無關;
      4. 在方法聲明中有一個隱藏的內置對象（數組），arguments,封裝所有的實際參數。
    • 調用：
      • 方法名稱(實際參數列表);
• Array:數組對象
  • 創建:
    • var arr = new Array(元素列表);
    • var arr = [元素列表];
  • 方法:
    • join(參數):將數組中的元素按照指定的分隔符拼接為字符串;
    • push() 向數組的末尾添加一個或更多元素，並返回新的長度。
  • 屬性:
    • length:數組的長度
  • 特點:
    • JS中，數組元素的類型可變的；
    • JS中，數組長度可變的。
• Boolean
• Date
  • 創建：
    • var date = new Date();
  • 方法:
    • toLocaleString()：返回當前date對象對應的時間本地字符串格式；
    • getTime():獲取毫秒值。返回當前如期對象描述的時間到1970年1月1日零點的毫秒值差。
• Math：數學對象
  • 創建：
    • 特點: Math對象不用創建，直接使用。Math.方法名();
  • 方法：
    • random():返回 0 ~ 1 之間的隨機數。 含0不含1;
    • ceil(x)：對數進行上舍入;
    • floor(x)：對數進行下舍入;
    • round(x)：把數四舍五入為最接近的整數。
• Global
  • 特點:
    • 全局對象，這個Global中封裝的方法不需要對象就可以直接調用。 方法名();
  • 方法：
    • encodeURI():url編碼;
    • decodeURI():url解碼;
    • encodeURIComponent():url編碼,編碼的字符更多;
    • decodeURIComponent():url解碼;
    • parseInt():將字符串轉為數字;
      • 逐一判斷每一個字符是否是數字，直到不是數字為止，將前邊數字部分轉為number
    • isNaN():判斷一個值是否是NaN
      • NaN六親不認，連自己都不認。NaN參與的==比較全部問false
    • eval():將JavaScript 字符串作為腳本代碼來執行;

Gitee地址

https://gitee.com/zhuayng/FontEndBasis/blob/develop/JavaScriptBasis/javascript_simple_demo.html。