Web APIs
一、const
1.早起js，声明变量，只能使用var
2.es6(新版本的js) 出现后 只能使用let 或者 const
3.let和const的区别
①let 声明变量 可以被修改
②const 声明变量 不可以被修改 const 为常量 固定不变
4.作用：在程序设计的时候，如果发现一些数据 永远不会被改变 ，优先使用const（后期不小心发现被修改，报错---便于后期解决错误）
5.后续学习，能用const的就用const，不能用const的就不用，不适用var
// const num = 1;
// num = 2;
// console.log(num);---->报错，判断：使用const的情况下，有等于号可以判定 程序会报错
// 复杂类型的数据 补充
// const 声明的变量不能被修改
// const num = 1;
// num = 2;
// const arr=[];
// // arr.push("呵呵");// 新增一个元素 但是并没有修改过 数组的地址
// arr=123;// 修改
// console.log(arr);
/*
const 声明的变量不能被修改
1 普通类型的数据 直接写 = ，表示修改数据 报错
2 复杂类型的数据 直接写 = ， 表示修改 报错
3 复杂类型的数据 写 = 相当于重新开辟新空间
*/
// const obj = {};
// obj.name = '悟空';
// // console.log(obj);
// obj = 123; // 报错 = 出现=> 开启新的内存空间 报错
// 小结 const 不能被修改的判断的方式
// 看它有没有写 = 号即可
//
const index = 10;
index++; // index = index + 1 //报错
/*
6.总结
①const和let一样 也能声明变量
②const 声明的变量不能被修改 let 可以随意修改
③判断是不是修改 看它有没有重新写 = 号或者自增自减少
④能使用const 就不用let
⑤你不知道什么时候使用const
⑥学习老师的代码
⑦就使用let
二、事件对象
1.事件对象是什么
①也是个对象，这个对象里有事件触发时的相关信息 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
2.如何获取
①在事件绑定的回调函数的第一个参数就是事件对象 ②一般命名为event、ev、e
3.语法
元素.addEventListener("click",function(e){
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>02-事件对象.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<button>点击点击</button>
<script>
// 获取按钮
const btn = document.querySelector("button");
btn.addEventListener("click", function (event) {
console.log(event); // 存放事件触发一瞬间的信息 - 鼠标位置信息
});
</script>
</body>
</html>
4.事件对象常见属性
1.type:获取当前的事件类型
2.clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
3.offsetX/offsetY：获取光标相对于当前dom元素左上角的位置
4.key：获取用户安夏的键盘值，现在不提倡使用keyCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-事件对象-常见属性</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 400px;
background-color: aqua;
margin-left: 300px;
}
</style>
</head>
<body>
<div>点击点击</div>
<script>
// 获取按钮
const btn = document.querySelector("div");
btn.addEventListener("mousemove", function (event) {
// console.log(event.type); // 输出当前的事件类型 少用
// console.log(event.clientX,event.clientY ); // 返回 鼠标的位置-参照物 页面的左上角即可
console.log(event.offsetX, event.offsetY); // 返回鼠标的坐标，参照物 是被点击的元素的左上角
});
</script>
</body>
</html>
三、图片跟随案例
1 给body标签 绑定 鼠标移动事件
body也是一个普通的块级元素 高度由内容撑开 同时 div使用了定位-脱标 body标签没有高度
2 事件触发了 获取 事件对象的坐标 clientX clientY
document.body.addEventListener("mousemove", function (event) {
const left = event.clientX;
const top = event.clientY;
3 把坐标设置给div的left top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
width: 900px;
height: 900px;
}
img {
position: fixed;
transform: translate(-50%, -50%);
cursor: none;
}
</style>
</head>
<body>
<img src="./images/bird.png" width="60px" />
<script>
const img = document.querySelector("img");
document.body.addEventListener("click", function () {
document.body.addEventListener("mousemove", function (event) {
const left = event.clientX;
const top = event.clientY;
img.style.left = left + "px";
img.style.top = top + "px";
});
});
</script>
</body>
</html>
四、键盘案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-键盘按键.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 给body标签 绑定 键盘按下事件 keydown
document.body.addEventListener("keydown", function (event) {
console.log(event.key); // 当下按下的按键 ！
});
</script>
</body>
</html>
五、微博发布案例（新增enter键 发布或绑定按钮）
1.关键代码部分
// 判断一下当前的文本域的内容 是不是空字符串
if (area.value.trim() === '') {
console.log('返回不再往下执行');
return;
}
area.addEventListener('keydown', function (event) {
// 判断按键是不是回车键
if (event.key === 'Enter') {
// console.log("执行和按钮一样的功能");
// 给btn按钮绑定过点击事件，点击事件也是可以主动触发
btn.click(); // 你点击了一下按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-微博发布.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百</a>
<textarea id="area"></textarea>
<button>发布</button>
<ul></ul>
<script>
/*
步骤
1 给发布按钮 绑定点击事件
1 获取文本域的内容
2 拼接到一个新创建的li标签中
3 把新创建的li标签插入到ul中
2 给文本域 绑定键盘按下事件
按下键盘之后 先判断当下按下的是不是回车 也去执行点击按钮的工作 即可
*/
const btn = document.querySelector('button');
const area = document.querySelector('#area');
const ul = document.querySelector('ul');
btn.addEventListener('click', function (event) {
// 判断一下当前的文本域的内容 是不是空字符串
if (area.value.trim() === '') {
console.log('返回不再往下执行');
return;
}
// area.value
const li = document.createElement('li');
li.innerText = area.value;
ul.appendChild(li);
});
area.addEventListener('keydown', function (event) {
// 判断按键是不是回车键
if (event.key === 'Enter') {
// console.log("执行和按钮一样的功能");
// 给btn按钮绑定过点击事件，点击事件也是可以主动触发
btn.click(); // 你点击了一下按钮
// 解决按下回车 文本换行的效果
// 文本域的默认的行为
// 处理标签的默认行为
// return false
event.preventDefault(); // 阻止浏览器标签的默认行为 阻止a标签默认跳转行为
}
});
document.querySelector('a').addEventListener('click', function (e) {
e.preventDefault(); // 阻止a标签的默认 跳转行为
});
</script>
</body>
</html>
