![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
同一时刻,只有执行一个代码,不像C++,java,可以并行
一个任务接一个任务的执行,代码的书写顺序与执行顺序是一致的
1.单线程:主线程console.log(1);setTimeout(() => console.log(2), 5000);setTimeout(() => console.log(4), 0);// 定时任务: setTimeout(函数,等待时间)console.log(3);// js引擎将第二个任务离开了"主线程",放到了"任务队列"的地方// 当主线程上已没有任务的时候,由"事件循环"将这个任务重新放回到主线程中执行// 执行机制// 1.同步任务:主线程// 2.异步任务:任务队列,事件循环来调度// 以下是异步任务// 1.定时任务， 2.事件， 3.IO操作(input、output) 4.http 请求
单线程异步演示
<body><form action="" style="display: grid; gap: 1em; width: 20em"><!-- 添加个事件,onkeydown事件属性 --><input type="text" onkeydown="console.log(this.value);" /><!-- 输出会慢半拍,因为dom操作是同步任务,keydown是异步任务,所以总是获取上一个数据 --><!-- 解决方案:就是让异步事件等等,等同步的dom渲染完了再执行 --><!-- 在异步任务里在嵌套一个异步任务就行了 --><inputtype="text"onkeydown=" setTimeout (()=>console.log(this.value),0);"/><!-- onkeydown改为onipunt可实现和上面一样的效果 --><input type="text" oninput="console.log(this.value);" /></form></body>
输出：
1.事件属性
<body style="display: grid; gap: 0.5em"><button onclick="alert('hello')">事件属性</button>
2.元素对象
<button>元素对象</button><script>const btn2 = document.querySelector("button:nth-of-type(2)");btn2.onclick = () => console.log(111);btn2.onclick = () => console.log(222);btn2.onclick = () => console.log(333);// onclick以最后一个数据为准// 不让它显示// btn2.onclick = null;</script>
3.事件监听器
<button>事件监听器</button><script>const btn3 = document.querySelector("button:nth-of-type(3)");// btn3.addEventListener(事件类型,事件回调,是否冒泡false/teue)// 添加事件类型btn3.addEventListener("click", () => console.log(111));btn3.addEventListener("click", () => console.log(222));btn3.addEventListener("click", () => console.log(333));let show = () => console.log(444);btn3.addEventListener("click", show);// 移除掉上方的(444)btn3.removeEventListener("click", show);let show = () => console.log(444);bth3.addEventListener("click", show);// 删除btn3.removeEventListener("click", show);</script>
4.事件派发
<button>事件派发</button><script>const btn4 = document.querySelector("button:nth-of-type(4)");let i = 10;btn4.addEventListener("click", () => {console.log("恭喜,你又赚了: " + i + "元");i += 100;i += 150;});// const btn4 = document.querySelector("button:nth-of-type(4)");// let i = 0;// btn4.addEventListener("click", () => {// console.log("恭喜你, 又赚了: " + i + " 元");// i += 0.5;// });// 创建一个自定义事件const myclick = new Event("click");// btn4.dispatchEvent(myclick);// setTimeout:定时器，用于执行一次性的定时任务// setInterval：定时器，用于执行间歇性的定时任务也setInterval(() => btn4.dispatchEvent(myclick), 3000);</script></body>
event: 事件对象
<body><button onclick="show(event)">click</button><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>function show(ev) {// ev: 事件对象// console.log(ev.type);// ev中有二个特别重要的属性// 1. 事件绑定者(主体)console.log(ev.currentTarget);// 2.事件触发者(目标)console.log(ev.target);console.log(ev.target === ev.currentTarget);}// const lis = document.querySelectorAll("li");// 循环给每一个li添加点击事件// lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)));// onclick这种通过事件属性的添加的事件,是冒泡事件// 冒泡: 子元素的同名事件,会沿着dom树向上逐级触发上级元素的同名事件// document.querySelector("ul").onclick = ev => console.log(ev.currentTarget);// document.querySelector("body").onclick = ev => console.log(ev.currentTarget);// document.documentElement.onclick = ev => console.log(ev.currentTarget);document.querySelector("ul").onclick = (ev) => {// 1.事件绑定者// console.log(ev.currentTarget);// 2. 事件触发者// console.log(ev.target);console.log(ev.target.textContent);// console.log(ev.target === ev.currentTarget);};</script></body>
document.querySelector(“button”).onclick = null;
1.json:就是一个字符串
2.json:用对象或数组的字面量语法,来表示一组相关的数据
<body><script>// json字符串let jsonStr = `{"id":111,"name":"JS就该这样学","price":99}`;
- 属性必须是字符串,且必须使用”双引号”
- 字符串类型的值必须使用”双引号”
- 最后一个数据后面不要有逗号
// 1. json 如何用到 js中// (1)json -> js对象let book = JSON.parse(jsonStr);console.log(book);// (2) js对象渲染到页面中let html = `<ul><li>书号:${book.id}</li><li>名称${book.name}</li><li>价格:${book.price}元</li><ul>`;// 渲染到页面中document.body.insertAdjacentHTML("afterbegin", html);// 第二种方式json用在别的语言中,php,java,python,go ...// js对象 ==> json 字符串 --> 由不同的语言的api处理let obj = { id: 111, name: "JS就该这样学", price: 99 };// js ->jsonlet str = JSON.stringify(obj);console.log(str);</script></body>
fetch用来替代原来的 XMLHttpRequest 对象
拿 data1.json 文件模拟批量数据
data1.json代码
[{ "id": 1, "name": "wjs", "course": "骑车/跑步/游泳" },{ "id": 2, "name": "gzm", "course": "骑车/跑步/游泳" },{ "id": 3, "name": "zyj", "course": "骑车/跑步/游泳" },{ "id": 4, "name": "lzy", "course": "骑车/跑步/游泳" },{ "id": 5, "name": "lkj", "course": "学习/踢球" }]
fetch("data1.json").then((response) => response.json()).then((json) => console.log(json));console.log(3);
输出：