JavaScript：语言与 DOM

var num = 10;
声明变量名num，值为10

1.嵌入到html文件中
    <script>
        var num = 20;
        console.log(num)
    </script>

2.引入本地独立js文件
<script src="hello.js"></script>

3.引入网络来源文件
<script src="https://..."></script>

<script>
    // 弹窗
    alert("弹出窗");
    // 输出到页面
    document.write("输出到页面的内容");
    // 打印到控制台
    console.log("控制台显示");
</script>

//基本数据类型
// 数值类型
var age = 20;
// 字符串类型：被双引号或单引号包裹的值就是字符串类型
var name = "张三";
var text = "zhangsan";
// 布尔类型
var flag = true;
var flag = false;
// 合成类型（复合类型）
//对象（object）：多个原始类型的值的合成，可以看作是一个存放各种值的容器
var user = {
    name:"zhangsan",
    age:20,
    learn:true
}

// typeof:判断数据类型
    var age = 20;
    var name = "zhangsan";
    console.log(typeof(age)); //number
    console.log(typeof(name)); //string

加减乘除
取余%
自增++ 自减——
赋值运算符=、+=、-=...
比较运算符（返回结果是布尔值）:<、>、<=、>=、!=...(===严格比较，数值本身是否相同，类型本身是否相同)
布尔运算符：!(取反)，&&(且)，||(或)
三元运算符：（条件）?表达式1:表达式2  （为真执行表达式1，为假执行表达式2）

//if条件语句
    var flag = true;
    if (flag) {
        //flag为true执行语句
        //flag为false不执行语句
        console.log("执行");

    }
//if else语句
    if (flag){
        console.log("满足条件执行");
    }else{
        console.log("不满足条件执行");
    }
//if(){}else if(){}else{}

//switch条件语句
var name = "ls";
switch (name) {
    case "zs":
        console.log("我是张三");
        break;
    case "ls":
        console.log("我是李四");
        break;
    default:
        console.log("不认识");
}

//for循环(知道循环次数)
for (初始化表达式;条件;迭代因子){
    循环体
}
//while循环(不知道循环次数)
while(条件){
    循环体
}
//跳出循环
break:跳出整个循环（结束）
continue:跳出当前循环（一次）

length长度
var name = "zhangsan";
console.log(name.length);//8

charAt方法：查找指定位置的字符，参数从0开始
var name = "zhangsan";
console.log(name.charAt(3));//n

concat方法：用于连接2个字符串，生成新的字符串
var name = "zhangsan";
var food = " eat ice-cream"
console.log(name.concat(food));//zhangsan eat ice-cream

substring方法：用于元字符串取出字符串并返回，参数1开始位置，参数2表示结束位置（不含）
提示：
1.省略第二个参数表示字符串一直到原字符串结束
2.第一个参数大于第二个参数会自动更换位置，(4,1)=>(1,4)
var str = "zhangsan";
console.log(str.substring(0,5));//zhang

substr方法：与substring用途相近，第二个参数为所取长度；substr 已弃用，新代码优先使用 slice 或 substring

indexOf方法：用于确定一个字符串在另一个字符串中第一次出现的位置，返回的是匹配开始的位置（类似搜索）

trim方法：用于去除字符串两端的空格，返回新的字符串

split方法：用于按照给定参数切割字符串，返回数组

例子：var arr = [1,2,3,4]
tip：
任何类型都可以放入
可以用for循环或while循环遍历数组
for(var i = 0; i<a.length; i++){
    console.log(a[i]);
}
for...in 枚举可枚举属性，不推荐作为数组值遍历方式；优先使用 for...of、forEach 或普通索引循环
var a = [1,2,3,4];
for (var i in a){
    console.log(a[i]);
}

数组方法：
1.Array.isArray:判定内容是否是数组(typeof)
var name = ['zs','ls','ww'];
console.log(typeof name);//object
console.log(Array.isArray(name)); // 返回布尔值

2.push:用于在数组末端添加一个或多个元素，返回新的长度，并改变原数组
var arr = ["hello"];
console.log(arr);//["hello"]
console.log(arr.push("world"));//2
console.log(arr);//["hello","world"]

3.pop:删除数组最后一个元素
arr.pop();
console.log(arr);//["hello"]

4.shift:用于删除数组的第一个元素
var arr1 = [1,2,3,4,5,6]
console.log(arr1);//[1,2,3,4,5,6]
arr1.shift();
console.log(arr1);//[2,3,4,5,6]

5.unshift:用于在第一个位置添加元素，可以添加多个元素
arr1.unshift(1)
console.log(arr1);//[1,2,3,4,5,6]

6.join:以指定参数作为分割符，将数组内元素连接成一个字符串
console.log(arr1.join("|"));//1|2|3|4|5|6

7.concat:合并多个数组，返回新的数组，不改变原数组
var a1 = [1,2,3];
var a2 = [4,5,6];
console.log(a1.concat(a2));//[1,2,3,4,5,6]
console.log(a1);[1,2,3]

8.reverse:用于颠倒排列数组元素，改变原数组
var a = [1,2,3]
a.reverse();
console.log(a);//[3,2,1]

9.indexOf:返回给定元素在数组中第一次出现的位置
var b = [1,2,3,4,5,6,7]
console.log(b.indexOf(6));//5

例子：function name(参数){return 返回值;}

概念：一组键值对(key-value)的集合，是包含属性的复合数据结构；属性枚举顺序有规则，不能简单视为完全无序，数据可以是任何数据类型，包括对象，属性的值可以为函数，这个属性称为方法，直接调用
例子：
      var user = {
        name: "zhangsan",
        age: 19,
        print:function (){
            console.log("我是对象方法");
        }
    };
    user.print();//我是对象方法
    console.log(user);//{name:'zhangsan',age:19,print:f}

概念：是JavaScript的原生对象，提供各种数学功能
方法：
1.Math.abs:返回参数值的绝对值
2.Math.max:返回参数中的最大值
3.Math.min:返回参数中给最小值
4.Math.floor:返回小于或等于参数值的最大整数
5.Math.ceil:返回大于或等于参数值的最小整数
6.Math.random:返回大于等于 0、小于 1 的伪随机数，不用于安全凭据

var num = -100;
console.log(num);//-100
console.log(Math.abs(num));//100
function getRandomArbitary(min,max){
    var result = Math.random() * ( max - min ) + min;
    console.log(Math.ceil(result));//向上取整示例；不是均匀覆盖闭区间整数的通用写法
}
getRandomArbitary(10,20);

概念：JavaScript中的原生时间库
方法：
1.Date.now:返回时间戳（时间戳是指格林威治时间1970年1月1日0时0分0秒（北京时间1970年1月1日8时0分0秒）起至现在的总毫秒数）
console.log(Date.now());//返回时间戳
console.log(new Date(1750126086323));//显示这个时间戳的时间
console.log(new Date());//返回当前时间
console.log(new Date().getDate());//返回这个月中的第几天
console.log(new Date().getDay());//返回星期
console.log(new Date().getYear());//旧 API，返回距离 1900 年的偏移；通常使用 getFullYear
console.log(new Date().getFullYear());//返回当前的四位年份
console.log(new Date().getMonth());//返回月份(0为一月开始)
console.log(new Date().getHours());//返回当前小时
console.log(new Date().getMinutes());//返回当前分钟
console.log(new Date().getSeconds());//返回当前秒数

概念：JavaScript操作网页的接口，作用是将网页转化为一个JavaScript对象，从而进行各种操作
节点：DOM的最小组成单元叫做节点，文档的树形结构就是由各种不同类型的节点组成
节点的类型：
1.Document:整个文档树的顶层节点
2.DocumentType:doctype标签
3.Element:网页的各种HTML标签
4.Attribute:网页元素的属性（比如class="right"）
5.Text:标签之间或标签包含的文本
6.Comment:注释
7.DocumentFragment:文档的片段

document方法：
1.document.getElementsByTagName:搜索HTML标签名，返回符合条件的元素
<div>hello world</div>

<div>这是第二个div标签</div>

var paras = document.getElementsByTagName("div")[0];
console.log(paras);//hello world,可以通过数组的形式获取div里面的内容
paras.innerHTML = "HELLO WORLD";//改变前端页面内容

2.document.getElementsByClassName:返回包括所有class名字符合指定条件的元素
<p class="text">这是在div里面的段落标签</p>

var text = document.getElementsByClassName("text")[0];
console.log(text);

3.document.getElementsByName:用于选择拥有name属性的HTML元素
<form action="#" name="formName">表单信息</form>

var forms = document.getElementsByName("formName")[0];
console.log(forms);

4.document.getElementById:通过匹配指定的id属性的元素节点
<h1 id="test">这是一个标题</h1>

var ids = document.getElementById("test");
console.log(ids);

5.document.querySelector:接受一个CSS选择器作为参数，返回匹配该选择器的元素节点
<div class="nav">nav1</div>

<div class="nav">nav2</div>

var nav = document.querySelector(".nav");
console.log(nav);//返回第一个

6.document.querySelectorAll:返回所有符合指定的CSS选择器

7.document.createElement:用来生成元素节点，并返回该节点
var newDiv = document.createElement('div');

8.document.createTextNode:用来生成文本节点，并返回该节点
var newDiv = document.createElement("div");
var newContent = document.createTextNode("我是文本");
//appendChild:将内容或者子元素放到容器中
newDiv.appendChild(newContent);//将newContent添加到newDic容器中
console.log(newDiv);

9.document.createAttribute:生成一个新的属性节点
var newDiv = document.createElement("div");
var newContent = document.createTextNode("我是文本");
var id = document.createAttribute("id")//创建新的节点属性
id.value = "content";//为属性添加值
newDiv.setAttributeNode(id);//将节点添加到元素中

//为页面创建标签流程
var newDiv = document.createElement("div");//创建div标签 //<div></div>

var newContent = document.createTextNode("我是文本");//创建一个文本节点:我是文本
var id = document.createAttribute("id")//创建新的节点属性:id=""
id.value = "root";//为属性添加值：id="root"
newDiv.setAttributeNode(id);//将节点添加到div元素中:<div id="root"></div>

//appendChild:将内容或者子元素放到容器中
newDiv.appendChild(newContent);//将newContent添加到newDic容器中:<div id="root">我是文本</div>

var container = document.getElementById("root");//匹配指定的id属性的元素节点
container.appendChild(newDiv);//将创建的节点添加到指定的元素节点页面中

10.Element.id:返回指定元素的id属性，该属性可读写
11.element.className:用来读写当前元素节点的class属性
12.element.classList:
    add():增加一个class
    remove():移除一个class
    contains():检查当前元素是否包含某个class
    toggle():将某个class移入或移出当前元素,存在就移除，不存在就移入

<div class="box" id="root">hello</div>

var root = document.getElementById("root");//搜索指定id的元素
root.id = "roots" //修改id的值
console.log(root);//<div class="box" id="roots">hello</div>

console.log(root.className);//box  根据id搜索对应元素的类选择器
root.className = "box1";//修改class的值
console.log(root);//<div class="box1" id="root">hello</div>

root.className = "box1 box2";//还可以修改成两个class的值
console.log(root);//<div class="box1 box2" id="root">hello</div>

root.classList.add("newbox");//添加一个class
console.log(root);//<div class="box1 box2 newbox" id="root">hello</div>

root.classList.remove("box1");//移除一个class
console.log(root);//<div class="box2 newbox" id="root">hello</div>

13.element.innerHTML:返回一个字符串，等同于该元素包含的所有HTML代码，该属性可读写
14.element.innerText
root.innerHTML = "hello world";//修改页面内容
root.innerText = "hahahhh";//也是修改页面内容
//区别：
// innerHTML可以识别标签
// innerText会把标签识别出一个字符串
var str = "<a href='https://www.baidu.com'>百度</a>";
root.innerHTML = str;//百度
root.innerText = str;//<a href='https://www.baidu.com'>百度</a>

15.element.setAttribute:直接操作网页元素的style属性
<div id="box"></div>

var box = document.getElementById("box");
box.setAttribute(
    "style",
    "width:300px; height:300px;background-color:red;"
)
也可以直接使用.style|cssText
var boxstyle = box.style;
boxstyle.width = "200px";
boxstyle.height = "200px";
boxstyle.backgroundColor = "blue";

添加事件的三种方式：
1.直接在元素属性里面添加js
<button id="btn" onclick="print()">按钮</button>

function print(){
        console.log("hhhhhh");
    }
2.通过id绑定事件，但只能绑定一个事件
<button id="btn">按钮</button>

var btn = document.getElementById("btn");
btn.onclick =  function (){
    console.log("hhhhhh");
}
3.addEventListener通过id绑定多个事件
<button id="btn">按钮</button>

//addEventListener：第一个参数是类型，第二个是方法名或者是直接定义
var btn = document.getElementById("btn");
//方式1
btn.addEventListener("click",function(){console.log("hhhhhh");})
//方式2
btn.addEventListener("click",click1)
btn.addEventListener("click",click2)
function click1(){
    console.log("hhhh");
}
function click2(){
    alert("哈哈哈哈");
}

移除事件.removeEventListener
btn.removeEventListener("click",click2)

事件类型：
常见：鼠标事件、键盘事件、表单事件、Touch事件
1.鼠标事件
    click:按下鼠标触发
    mousedown:按下鼠标键时触发
    mouseup:释放按下的鼠标键时触发
    mousemove:当鼠标在节点内部移动时触发，当鼠标持续移动时，该事件会连触发
    mouseover:鼠标进入一个节点时触发
    mouseout:鼠标离开一个节点时触发
2.键盘事件
    keydown:按下键盘时触发
    keypress:按下有值的键时触发(无值：ctrl、alt、shift)，对于有值的键，按下时先触发keydown事件再触发这个事件
    keyup:松开键盘时触发该事件
3.表单事件：使用表单元素及输入框元素可以监听的一系列事件
    input：在输入框输入时触发
    select:选中表单信息时触发
    change:输入不变，按回车时或失去焦点时触发
4.Touch事件
    touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点
    touchend:用户不再触摸触摸屏时触发
    touchmove:用户移动触摸点时触发

1.setTimeout:用来指定某个函数或某段代码，才多少毫秒后执行
var timerId = setTimeout(函数或代码,毫秒数);
setTimeout(function(){
    console.log("定时器");
},1000);
注意：如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局变量，而不是所在的对象
定时器的取消：
var id = setTimeout(f,1000);
clearTimeout(id);
2.setInterval:指定某个任务每隔一段时间就执行一次，无限次的定时执行
var timer = setInterval(function(){console.log("打印")}, 1000);