当前位置：首页 > news >正文

【找工作系列①】【大四毕业】【复习】巩固JavaScript，了解ES6。

news 来源：原创 2025/8/7 11:25:10

文章目录

前言
- Tasks:
- 复习笔记：
- - JavaScript是什么？
  - JavaScript有什么用或者换句话说是做什么的？
  - JavaScript由哪几部分组成？
  - BOM?
  - DOM?
  - html文件中script标签放在哪里?
  - 🧩 1. **放在 **`**<head>**`** 中**
  - - ✅ 优点：
    - ⚠️ 缺点：
    - 📌 适用场景：
  - 🧩 2. **放在 **`**<body>**`** 底部（推荐）**
  - - ✅ 优点：
    - ⚠️ 缺点：
    - 📌 适用场景：
  - 🧩 3. **使用 **`**defer**`** 属性（推荐）**
  - - ✅ 优点：
    - 📌 适用场景：
  - 🧩 4. **使用 **`**async**`** 属性**
  - - ✅ 优点：
    - ⚠️ 缺点：
    - 📌 适用场景：
  - 📊 总结对比表：
  - vscode怎么把光标变成正常输入，而不是输入文本自动覆盖后面的
  - Test:
  - - self work 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>` 中

<head><script src="script.js"></script>
</head>

✅ 优点：

JS 文件在 HTML 加载前就已经准备好了。

⚠️ 缺点：

会阻塞 HTML 的加载，因为浏览器必须先加载并执行 JS，再继续解析后续的 HTML 内容。

📌 适用场景：

当 JS 代码中含有必须在页面加载前执行的逻辑（如配置、重定向等）。

🧩 2. 放在 `<body>` 底部（推荐）

<body><!-- 页面内容 --><script src="script.js"></script>
</body>

✅ 优点：

HTML 内容优先加载，提高页面渲染速度。
不阻塞 DOM 的构建，用户体验更好。

⚠️ 缺点：

如果 JS 需要在 <head> 或上方 DOM 加载前就执行，可能无法满足。

📌 适用场景：

大多数场景下推荐使用，特别是 JS 操作 DOM 或需等待页面加载完成的代码。

🧩 3. 使用 `defer` 属性（推荐）

<head><script src="script.js" defer></script>
</head>

✅ 优点：

不阻塞 HTML 的解析。
JS 会在 DOM 加载完成后自动执行。
多个 defer 脚本会按顺序执行。

📌 适用场景：

需要等待 DOM 准备就绪再运行脚本的场景。

🧩 4. 使用 `async` 属性

<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:

<!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:

<!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。。。

未完待续。。。加个关注，我们一起来学习讨论吧，朋友们。

信息来源:

黑马程序员视频：https://www.bilibili.com/video/BV1Y84y1L7Nn?spm_id_from=333.788.player.switch&vd_source=bc43b788815d617efba1f7f4da2ffe3a&p=4

AI辅助：ChatGPT

相关学习资料:
JavaScript高级程序设计(第四版)
CSDN

文章目录

前言

Tasks:

复习笔记：

JavaScript是什么？

JavaScript有什么用或者换句话说 是做什么的？

JavaScript由哪几部分组成？

BOM?

DOM?

html文件中script标签放在哪里?

🧩 1. 放在 **<head>** 中

✅ 优点：

⚠️ 缺点：

📌 适用场景：

🧩 2. 放在 **<body>** 底部（推荐）

✅ 优点：

⚠️ 缺点：

📌 适用场景：

🧩 3. 使用 **defer** 属性（推荐）

✅ 优点：

📌 适用场景：

🧩 4. 使用 **async** 属性

✅ 优点：

⚠️ 缺点：

📌 适用场景：

📊 总结对比表：

vscode怎么把光标变成正常输入，而不是输入文本自动覆盖后面的

Test:

self work code:

Teacher code:

JavaScript书写位置

相关文章：

JavaScript有什么用或者换句话说是做什么的？

🧩 1. 放在 `<head>` 中

🧩 2. 放在 `<body>` 底部（推荐）

🧩 3. 使用 `defer` 属性（推荐）

🧩 4. 使用 `async` 属性