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

关注

原创最新推荐文章于 2026-03-19 01:34:09 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

华为昇腾310P3+deepseek蒸馏版性能调优：FP16精度优化全记录本文详细介绍了在华为昇腾310P3硬件环境下优化DeepSeek蒸馏版模型FP16精度的关键技术路径。通过分层量化策略、内存分配优化和并行计算配置，显著提升模型推理性能，实现83%的并发处理能力提升，同时保持98.7%的原始模型准确率。阅读详情

前言

督促自己,同时分享所得,阅读完本篇大约需要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>