文章目录
- 前言
-
- Tasks:
- 复习笔记：
-
- JavaScript是什么？
- [JavaScript有什么用或者换句话说 是做什么的？](#JavaScript有什么用或者换句话说 是做什么的？)
- JavaScript由哪几部分组成？
- BOM?
- DOM?
- html文件中script标签放在哪里?
- [🧩 1. **放在 **`**<head>**`** 中**](#🧩 1. 放在
**<head>**中) -
- [✅ 优点：](#✅ 优点：)
- [⚠️ 缺点：](#⚠️ 缺点：)
- [📌 适用场景：](#📌 适用场景：)
- [🧩 2. **放在 **`**<body>**`** 底部（推荐）**](#🧩 2. 放在
**<body>**底部（推荐）) -
- [✅ 优点：](#✅ 优点：)
- [⚠️ 缺点：](#⚠️ 缺点：)
- [📌 适用场景：](#📌 适用场景：)
- [🧩 3. **使用 **`**defer**`** 属性（推荐）**](#🧩 3. 使用
**defer**属性（推荐）) -
- [✅ 优点：](#✅ 优点：)
- [📌 适用场景：](#📌 适用场景：)
- [🧩 4. **使用 **`**async**`** 属性**](#🧩 4. 使用
**async**属性) -
- [✅ 优点：](#✅ 优点：)
- [⚠️ 缺点：](#⚠️ 缺点：)
- [📌 适用场景：](#📌 适用场景：)
- [📊 总结对比表：](#📊 总结对比表：)
- vscode怎么把光标变成正常输入，而不是输入文本自动覆盖后面的
- Test:
-
- [self work code:](#self work code:)
- [Teacher code:](#Teacher code:)
- JavaScript书写位置
前言
督促自己,同时分享所得,阅读完本篇大约需要10分钟,希望为朋友的技术精进之路尽到绵薄之力.码字不易,望能给个点赞和收藏,以激励笔者源源不断的创作.在此以表谢意,同时因为笔者实力有限,如果发现错误,请及时指正,以免误导后人,谢谢!
Tasks:
| - [ ] 类型 | - [ ] 资源名 | - [ ] 推荐理由 |
|---|---|---|
| - [ ] 视频 | - [ ] B站：黑马 JavaScript 教程（最新版） | - [ ] 讲解通俗、覆盖面全，适合巩固 |
| - [ ] 文档 | - [ ] MDN JavaScript 教程 | - [ ] 权威参考，重点查语法细节 |
| - [ ] 练习 | - [ ] JS30 - 30 个 JS 小项目 | - [ ] 无框架纯 JS，锻炼逻辑能力 |
- ES6视频和练习
- 书：
- 你不知道系列
- 红宝书
- 写一个"Todo List"
- 写一个"登录表单"（包含输入验证）
- 面试会问的问题
每日学新的东西之前必须先复习，不然只会事倍功半
复习笔记：
每个人都有自己的时区，你没有领先也没有落后，不用看轻或过于看重某人，因为每个人都有自己的节奏和生活，工作固然是收入来源，但是别忘了，家人和你爱的人才是陪伴你终身的，请笔者自己不要忘记，这点，工作，生意，学历等等都是为了更好的生活，而不是最终目的。
学习技术，一定要独立完成，独立思考，不要去抄代码，要先去思考，然后不要手懒，科比也是每天练习接近一万次投篮
JavaScript是什么？
JavaScript是一门运行在浏览器的编程语言，实现人机交互效果
JavaScript有什么用或者换句话说 是做什么的？
实现页面动态效果（页面特效：监听用户的一些行为让页面做出对应的反馈）给用户更好的交互体验感
用于给服务器提前做数据验证（表单验证：针对表单数据的合法性进行判断）
数据交互：获取后台数据渲染到前端
服务端编程（Node.js）
JavaScript由哪几部分组成？
ECMAScript指的是JS的语法规范
ECMAScript + WebAPI(DOM+BOM)
BOM?
暂时浅显理解: BOM（Broswer Object Model), JS代码可以控制浏览器，BOM主要是和浏览器交互的API，比如浏览器窗口大小（仅供参考）。
BOM操作浏览器，比如页面弹窗，检测窗口宽度，存储数据到浏览器等等
DOM?
暂时浅显理解: DOM(Document Object Model),指的是控制页面中的元素，比如直接更改节点里面的一个数字或者文字，或者是否在末尾插入一个什么信息（仅供参考）。
DOM操作文档，比如对页面元素进行移动，添加或是删除
html文件中script标签放在哪里?
在 HTML 中，JavaScript（JS）代码的位置可以影响网页的加载速度和行为。主要有以下几种放置方式，每种方式的执行时机和效果是不同的：
🧩 1. 放在 **<head>** 中
html
<head>
<script src="script.js"></script>
</head>✅ 优点：
- JS 文件在 HTML 加载前就已经准备好了。
⚠️ 缺点：
- 会阻塞 HTML 的加载，因为浏览器必须先加载并执行 JS，再继续解析后续的 HTML 内容。
📌 适用场景：
- 当 JS 代码中含有必须在页面加载前执行的逻辑（如配置、重定向等）。
🧩 2. 放在 **<body>** 底部（推荐）
html
<body>
<!-- 页面内容 -->
<script src="script.js"></script>
</body>✅ 优点：
- HTML 内容优先加载，提高页面渲染速度。
- 不阻塞 DOM 的构建，用户体验更好。
⚠️ 缺点：
- 如果 JS 需要在
<head>或上方 DOM 加载前就执行，可能无法满足。
📌 适用场景：
- 大多数场景下推荐使用，特别是 JS 操作 DOM 或需等待页面加载完成的代码。
🧩 3. 使用 **defer** 属性（推荐）
html
<head>
<script src="script.js" defer></script>
</head>✅ 优点：
- 不阻塞 HTML 的解析。
- JS 会在 DOM 加载完成后自动执行。
- 多个
defer脚本会按顺序执行。
📌 适用场景：
- 需要等待 DOM 准备就绪再运行脚本的场景。
🧩 4. 使用 **async** 属性
html
<head>
<script src="script.js" async></script>
</head>✅ 优点：
- 不阻塞 HTML 解析。
- JS 会异步加载并尽快执行 ，不保证执行顺序。
⚠️ 缺点：
- 如果有多个脚本，执行顺序可能混乱。
- 如果脚本依赖 DOM 或其他脚本，可能导致错误。
📌 适用场景：
- 用于分析工具、广告脚本等无依赖的第三方脚本。
📊 总结对比表：
| 位置/方式 | 是否阻塞HTML | 是否等待DOM加载 | 是否按顺序执行 | 推荐程度 |
|---|---|---|---|---|
<head> |
✅ 是 | ❌ 否 | ✅ 是 | ❌ |
<body> 底部 |
❌ 否 | ✅ 是（自然） | ✅ 是 | ✅✅ |
<script defer> |
❌ 否 | ✅ 是 | ✅ 是 | ✅✅✅ |
<script async> |
❌ 否 | ❌ 否 | ❌ 否 | ✅（特定场景） |
vscode怎么把光标变成正常输入，而不是输入文本自动覆盖后面的
问题描述：问题是 VS Code（Visual Studio Code）进入了"改写模式"（Overwrite mode） ，也叫"覆盖模式"，导致你输入的字符会替换光标后的字符，而不是像正常一样插入。
etElementsByClassName 返回的是HTMLCollection，这是一个"类数组对象"（可能包含多个元素），不能直接使用 .addEventListener。 需要先获取具体的某一个元素（例如第一个），或者用循环处理每个元素。
Test:
self work code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="asd">1</button>
<button id="a">2</button>
<button id="b">3</button>
<button id="c">4</button>
<script>
const test = document.getElementById('asd');
let isPink = true;
test.addEventListener('click', function () {
if (isPink) {
test.style.backgroundColor = 'pink';
} else {
test.style.backgroundColor = '';
}
isPink = !isPink;
});
const test2 = document.getElementById('a');
let isPink2 = true;
test2.addEventListener('click', function () {
if (isPink2) {
test2.style.backgroundColor = 'pink';
} else {
test2.style.backgroundColor = '';
}
isPink2 = !isPink2;
});
const test3 = document.getElementById('b');
let isPink3 = true;
test3.addEventListener('click', function () {
if (isPink3) {
test3.style.backgroundColor = 'pink';
} else {
test3.style.backgroundColor = '';
}
isPink3 = !isPink3;
});
const test4 = document.getElementById('c');
let isPink4 = true;
test4.addEventListener('click', function () {
if (isPink4) {
test4.style.backgroundColor = 'pink';
} else {
test4.style.backgroundColor = '';
}
isPink4 = !isPink4;
});
</script>
</body>
</html>
<style>
</style>Teacher code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>
<script>
let bts = document.querySelectorAll('button');
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.pink').className = ''
this.className = 'pink'
})
}
</script>
</body>
</html>className是内置属性吗？
className 是 JavaScript 中 DOM 元素的内置属性。
document.querySelector('.pink').className = '';
✅ 作用：
找到当前页面中第一个具有 class="pink" 的元素
把它的 className 清空（即移除 pink 类）
JavaScript书写位置
写JS的目的是为了操作HTML。。。
未完待续。。。加个关注，我们一起来学习讨论吧，朋友们。
信息来源:
AI辅助：ChatGPT
相关学习资料:
JavaScript高级程序设计(第四版)
CSDN