javascript 第二天---數據類型

代碼的執行順序

1. 如果js代碼寫在內容之前比如 <script>document.getElementById("box").onclick = function(){alert(456); }</script> <div id="box">123</div> 就會報錯出現

cannot et property onclik of null

意思是不能找到元素。

2. 瀏覽器的執行順序是從上到下，js如果出現在元素之前，瀏覽器是先讀取js代碼，元素還未被解析，所以js代碼要寫在元素後面，即</body>的後面
3. 如果一定要把js代碼寫在元素之前，那麼必須等到整個資源（src引入的資源/js資源href引入的css資源 整個文檔）加載完畢 執行代碼即可

<script>
    window.onload = function(){
        document.grtElementById("box").onclick = function(){
            alert(123);
        }
    }
</script>

詭異的alert

1. 當alert放在div的上方 開啓窗口時，div不加載 點擊確定 加載 刷新 消失
2. 當alert放在div的下方 開啓窗口時，div不加載 點擊確定 加載 刷新 消失

在chrome的64版本以上 包括360 QQ瀏覽器的最新版本，alert不會激活所在的選項卡 火狐瀏覽器沒問題

console.log

1. 控制檯輸出 進行調試，可以寫js代碼

數值類型 通過console裏的typeof

cosole.log(typeof num);

1. 數值型 num 包括小數和整數 在js當中小數運算是不精確的 我們不能用作判斷
2. 字符串 string 字符串用""包裹 字符串之間不能換行 會出現invalid or unexpected token表示標點符號錯誤，多了換行符。``反引號包裹可以換行
3. 布爾值 boolean true/false
4. function function 沒有名字的函數爲匿名函數，不能單獨使用，可以var命名，也可以function abc(){} 有名字的函數稱爲具名函數，使用abc();函數名加（）就算abc()出現在定義的函數之前也可以執行
5. 對象 object 簡單的寫法爲{}，實際上是空的一個對象使用new得到的，new Object

var obj = {};
var obj = new Object;
console.log(typeof obj);

6.數組(array) object 數組中可以存放任何數據類型，支持換行書寫，簡單寫法【數據，數據，數據】，實際上是new Array

var arr = [];
alert(arr);

結果彈窗什麼都沒有

7. null 是一個object 表示再找對象但是沒找到對象,拿到一個null
8. undefined undefined 聲明瞭但是沒有定義給值var u;u= 123;

保留字/關鍵詞

typeof true false Object new null undefined class var alert

操做標籤的合法屬性

比如id class title href src

如何獲取合法屬性

獲取元素之後直接使用點語法var title = document.getElementById("box").title;

如何修改合法屬性

獲取元素之後用等號賦值修改已有屬性

直接修改document.getElementById("box").title="nnnn" 如果想要獲取類名class，需要用className

<div id="box" class="kkk"></div>
<script>
    var oBox = document.getElementById("box");
    oBox.onclick = function(){
    oBox.className = "mybox"
}
</script>

需要注意的是最好一開始就通過id獲取到該元素並使用變量，以免之後改變了id值，再使用document.getElementById("box").id="box1" document.getElementById("box").className找不到該元素

添加合法屬性

等號賦值相當於有則改之無則加勉 document.getElementById("box").title="hello";

操作自定義屬性

<div id="stu" name="lisi" age="20" height="180">李四</div>

除了id可以獲得元素，其他的拿不到

判斷是否存在某個自定義屬性

hasAttribute("想要查找的屬性名字") 結果是true falseconsole.log(oStu.hasAttribute("name"))

獲取屬性

getAttribute("")

<script>
    var oStu = document.getElementById("stu");
    var myAttr = oStu.getAttribute("age");
    console.log(myAttr);
    
</script>

設置自定義屬性

setAttribute("") 如果沒有設置該屬性，就會新增該屬性，如果有就會覆蓋oStu.setAttribute("age","20");

刪除自定義屬性

removeAttribute("") oStu.removeAttribute("age"); 如果刪的時候沒有找到，那麼就算了

dataset

<div id="stu" data-name="lisi" data-of-birth="1992">lisi</div>
<script>
    stu.getAttribute("data-name"); 因爲id是唯一的，所以可以直接這樣寫，但不規範
    
    var lisi = document.getElementById("box");
       console.log(lisi.dataset.name);
       console.log(lisi.dataset.ofBirth);//去掉連字符，駝峯命名
       //同樣可以獲取date-name,需要注意的是自定義屬性前面加data-
       lisi.dataset.age = "20";//添加自定義屬性
</script>