JavaScript 知識點01

JS基礎

• 頁面由三部分組成：
  • html：超文本標記語言，負責頁面結構
  • css：層疊樣式表，負責頁面樣式
  • js：輕量級的腳本語言，負責頁面的動效和數據交互
    小總結：結構，樣式和行為，三者相分離
  • 在html頁面中寫結構
  • 通過 link標簽的href屬性，引入css樣式
  • 通過script標簽的src屬性，引入js腳本
• css引入頁面的方式有三種
  • 行內<div style="width:200px;height:300px;"></div>
  • 內嵌:在header裡面寫一個<style>選擇器{key:value}</style>
  • 外鏈：在header裡面寫一個<link rel="stylesheet" href="css/index.css"/>
• JS引入頁面的方式，同CSS相似

  • 內嵌：在開發過程中，建議把script放在body底部；如果非要把script標簽對，放在head裡面的話；需要加window.onload

    window.onload=function(){
    document.body.innerHTML='XXXXXX';
    }

  • 行內：<div onclick="xxxx" onmouseover="xxxx"></div>
  • 外鏈：<script src="01.js"></script>
    註意：如果script作為JS的外鏈，一定不要在兩個script標簽中寫代碼，寫了也沒用
• 屬性和方法的區別：屬性沒括弧，方法有括弧
• 字元串和變數的區別：字元串有引號，變數沒引號
  • 字元串一般用單引號；為了元素身跟上的屬性值區分開來；屬性值一般是""
  • 變數，就是別名；var str； 告訴瀏覽器，定義了str這麼一個變數
  • 如果沒有定義變數，xxx is not defined
• JS常見的輸出方式7種
  • alert('') ;
  • confirm('確定要刪除？'); 他有兩個返回值：true 真， false假
  • console.log(''); 可以在控制台列印出我們想要列印的內容
  • console.dir(); 列印出對象身上的屬性和方法
  • document.write()
    如果遇到window.onload會清空頁面
  • 元素.innerHTML=xxxx
  • console.table();可以把數組和對象，以表格的形式列印出來
    ```
    var ary2=[
    {
    name:'a',
    age:1,
    sex:'gril'
    },
    {
    name:'王b',
    age:2,
    sex:'boy'
    }];
    console.table(ary2);
  ```
• chrome控制台
  • Elements:用來調試html+css的
  • console:用來調試JS的
  • sources:可以拿到該網站相關的資源：images ,html ,css, js

體驗JS編程思想

• 需求：滑鼠移入div1的時候，div2顯示；滑鼠移出div1的時候，div2隱藏
• 實現思路：
  1. 高度：div2的高度為0； 移入div1後高度為100;移出div1時div2高度0；
  2. display:block顯示，none，隱藏；
  3. 透明度：rgba(); opacity();
  4. 定位：left和top;
  5. margin:margin-left和 margin-top;
  6. overflow:hidden和visible;
• JS獲取元素的方式：
  • document.getElementById('id名字')；
    因為id是唯一的，所有拿到的是一個元素
  • document.getElementsByTagName('標簽名');
    標簽名拿到的是一個元素集合；即使只有一個元素，也是個集合
    想要取到其中的一個：aDiv[0] aDiv[2]
• JS中的數據類型
  • 基本數據類型：
    1. 字元串string
    2. 數字 number
    3. 布爾值 boolean
    4. undefined 現在沒有，以後也沒有
    5. null 空對象，現在沒有，以後會有
  • 引用數據類型
    1. 對象數據類型
       • 數組
       • 正則
       • 對象{}
    2. 函數數據類型
       function 函數名(){};
• 數據類型檢測的方式
  1. typeof 可以檢測基本數據類型（所有經過typeof的都是字元串），但是對於對象數據類型，檢測出來的都是object，無法知道具體屬於哪種對象
  2. 對象 instanceof 類； 比如ary instanceof Array 判斷這個實例是否屬於某個類
  3. 對象.constructor: 比如ary.constructor可以列印出對象所屬的類
  4. Object.prototype.toString.call(ary); 出來的結果 '[object Array]'
• 基本數據類型和引用數據類型的區別：
  • 基本數據類型：是對值的操作
  • 引用數據類型：是對地址的操作
• 操作屬性用的是"." oDiv.style.display='block'
• 其他數據類型轉為number數據類型
  • 強制轉換
  • Number()
  • parseInt()
  • parseFloat()
  • 一個嚴格轉換
  • Number()
  • 兩個非嚴格轉化
  • parseInt() 只能轉化為整數
  • parseFloat() 可以保留小數
  如果轉換失敗的話，返回的結果是NaN:not a number 不是數字；但是NaN是number數據類型
• 關於NaN：
  • NaN是number數據類型
  • isNaN() 判斷是否為非有效數字； 非有效數字：true; 有效數字：false