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>