如何在HTML中使用JavaScript：从基础到高级的全面指南！
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
我们总是先扬起尘土
然后抱怨自己看不见
– 2024.04.17 –
JavaScript是一种轻量级的编程语言，通常用于网页开发，以增强用户界面的交互性和动态性。然而在HTML中，有多种方法可以嵌入和使用JavaScript代码。
本文就带大家深入了解如何在HTML中使用JavaScript。
要在HTML中使用JavaScript，我们需要使用<script>标签。这个标签可以放在<head>或<body>部分，但通常我们会将其放在<body>部分的底部，以确保在执行JavaScript代码时，HTML文档已经完全加载。
使用 <script> 标签有两种方式：直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript 文件。
包含在 <script> 标签内的 JavaScript 代码在浏览器总按照从上至下的顺序依次解释。
所有 <script> 标签都会按照他们在 HTML 中出现的先后顺序依次被解析。
HTML 为 <script> 定义了几个属性：
1）async：可选。表示应该立即下载脚本，但不妨碍页面中其他操作。该功能只对外部 JavaScript 文件有效。
如果给一个外部引入的js文件设置了这个属性，那页面在解析代码的时候遇到这个<script>的时候，一边下载该脚本文件，一边异步加载页面其他内容。
2）defer：可选。表示脚本可以延迟到整个页面完全被解析和显示之后再执行。该属性只对外部 JavaScript 文件有效。
3）src：可选。表示包含要执行代码的外部文件。
4）type：可选。表示编写代码使用的脚本语言的内容类型，目前在客户端，type 属性值一般使用 text/javascript。不过这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。
1.1 直接在页面中嵌入JavaScript代码
内部JavaScript是将JavaScript代码放在HTML文档的<script>标签中。这样可以将JavaScript代码与HTML代码分离，使结构更清晰，易于维护。
在使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：
如果没有指定script属性，则其默认值为text/javascript。
包含在<script>元素内部的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
在使用<script>嵌入JavaScript代码的过程中，当代码中出现\”</script>\”字符串时，由于解析嵌入式代码的规则，浏览器会认为这是结束的</script>标签。可以通过转义字符“\\”写成<\\/script>来解决这个问题。
1.2 包含外部 JavaScript 文件
外部JavaScript是将JavaScript代码放在单独的.js文件中，然后在HTML文档中通过<script>标签的src属性引用这个文件。这种方法可以使代码更加模块化，便于重用和共享。
如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接。
- 外部文件example.js将被加载到当前页面中。
- 外部文件只须包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript代码即可。
与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。
注意：带有src属性的<script>元素不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。
通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL。
于是，位于外部域中的代码也会被加载和解析。
1.3 标签的位置
在HTML中，所有的<script>标签会按照它们出现的先后顺序被解析。在不使用defer和async属性的情况下，只有当前面的<script>标签中的代码解析完成后，才会开始解析后面的<script>标签中的代码。
通常，所有的<script>标签应该放在页面的<head>标签中，这样可以将外部文件（包括CSS和JavaScript文件）的引用集中放置。
然而，如果将所有的JavaScript文件都放在<head>标签中，会导致浏览器在呈现页面内容之前必须下载、解析并执行所有JavaScript代码，这可能会造成明显的延迟，导致浏览器窗口在加载过程中出现空白。
为了避免这种延迟问题，现代Web应用程序通常会将所有的JavaScript引用放置在<body>标签中的页面内容的后面。这样做可以确保在解析JavaScript代码之前，页面的内容已经完全呈现在浏览器中，从而加快了打开网页的速度。
JavaScript 解析过程包括两个阶段：预处理（也称预编译）和执行。
- 在编译期，JavaScript 解析器将完成对 JavaScript 代码的预处理操作，把 JavaScript 代码转换成字节码；
- 在执行期，JavaScript 解析器把字节码生成二进制机械码，并按顺序执行，完成程序设计的任务。
1、执行过程
HTML 文档在浏览器中的解析过程是：按照文档流从上到下逐步解析页面结构和信息。
JavaScript 代码作为嵌入的脚本应该也算做 HTML 文档的组成部分，所以 JavaScript 代码在装载时的执行顺序也是根据 <script> 标签出现的顺序来确定。
你是不是厌倦了一成不变的编程模式？想要突破自我，挑战新技术想要突破自我，挑战新技术？却迟迟找不到可以练手的项目实战？是不是梦想打造一个属于自己的支付系统？那么，恭喜你，云端源想免费实战直播——《微实战-使用支付宝/微信支付服务，网站在线支付功能大揭秘》正在进行，点击前往获取源码！云端源想
2、预编译
当 JavaScript 引擎解析脚本时候，他会在与编译期对所有声明的变量和函数预先进行处理。当 JavaScript 解析器执行下面脚本时不会报错。
由于变量声明是在预编译期被处理的，在执行期间对于所有的代码来说，都是可见的，但是执行上面代码，提示的值是 undefined 而不是 1。
因为变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript 解析器是按照代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则 JavaScript 解析器会使用默认值 undefined 。
由于第二行中为变量 a 赋值了，所以在第三行代码中会提示变量 a 的值为 1，而不是 undefined。
函数声明前调用函数也是合法的，并能够正确解析，所以返回值是 1。但如果是下面这种方式则 JavaScript 解释器会报错。
上面的这个例子中定义的函数仅作为值赋值给变量 fun 。在预编译期，JavaScript 解释器只能够为声明变量 fun 进行处理，而对于变量 fun 的值，只能等到执行期时按照顺序进行赋值，自然就会出现语法错误，提示找不到对象 fun。
总结：声明变量和函数可以在文档的任意位置，但是良好的习惯应该是在所有 JavaScript 代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，后引用。
通过今天的分享，相信大家已经对JavaScript在HTML中的应用有了一定的了解。这只是冰山一角，JavaScript的潜力远不止于此。希望这篇文章能激发大家对编程的热情，让我们一起在编程的世界里探索更多的可能性！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
7 种高级 JavaScript 技术
JavaScript 正在不断发展，提供了强大的工具，使开发者能够编写更简洁、高效的代码。但由于特性众多，我们很容易忽略其中一些强大的功能。无论你是想提升性能，还是编写更易维护的代码，这些高级技巧都能让你在开发中占据优势。
让我们一起来探索 7 个高级 JavaScript 技巧，帮助你提升编码能力。
闭包是 JavaScript 中最强大、但往往令人困惑的特性之一。它允许你创建具有私有变量的函数，从而使代码更加模块化和安全。
什么是闭包？ 闭包是指当一个函数记住其词法作用域时，即使该函数已经执行完毕。这在不使用全局变量的情况下，维护函数状态时非常有用。
应用场景： 闭包非常适合维护事件处理程序的状态、创建私有变量，或开发高阶函数。
解构赋值是 ES6 的一项特性，允许你从数组或对象中提取值，并将它们赋值给变量。这种方式使代码更简洁，且更易于阅读和维护。
应用场景： 解构赋值在处理 API 响应或复杂对象时尤为有用，它允许你只提取所需的数据。
在处理用户事件（如滚动或调整大小）时，如果每次用户操作发生时都触发事件，性能会受到显著影响。去抖动 和 节流 是两种用于控制函数执行频率的技术。
- 去抖动： 确保函数在一段时间内没有新的活动时才执行。
- 节流： 确保函数在规定时间内最多执行一次。
应用场景： 去抖动和节流适用于优化如搜索输入、滚动事件监听器和窗口调整大小等情况。
柯里化将接受多个参数的函数转变为一系列每次只接受一个参数的函数。这个技术使函数更具复用性，并支持部分应用。
应用场景： 在构建可复用函数（如函数式编程或 React 组件）时，柯里化非常有用。
Proxy 对象允许你拦截并重新定义对象的基本操作，如属性访问、赋值和函数调用。这在验证、日志记录或构建响应式框架时极为有用。
应用场景： Proxy 常用于数据验证、响应式框架（如 Vue.js）和敏感数据访问的日志记录。
JavaScript 是单线程的，这意味着它一次只能执行一个任务。然而，事件循环允许异步操作高效地发生，而不会阻塞主线程。
理解事件循环对于编写高效的异步代码至关重要，尤其是在处理 setTimeout、Promise 和 async/await 时。
应用场景： 理解事件循环在构建实时应用程序、处理 API 请求或管理异步任务时尤为重要。
记忆化是一种用于缓存函数调用结果的技术。当相同的输入再次出现时，返回缓存结果，从而显著提升频繁调用函数的性能。
应用场景： 记忆化在优化数据密集型应用中的复杂计算（如排序大数据集或执行复杂的数学运算）时非常有用。
通过掌握这些高级 JavaScript 技巧，你可以编写更简洁、高效、强大的代码。无论你是在优化性能、提升代码可读性，还是构建可扩展的应用程序，这些方法都将助你将 JavaScript 技能提升到一个新高度。
温故知新！必学JavaScript 高级程序设计（第4版）p1
JavaScript 高级程序设计第 4 版（后简称高程4），相较于第 3 版，增加了 ES6 至 ES10 的全新内容，删除了旧版过时的内容，并在原有基础上充实了更加翔实的内容。
中文译版于 2020 年发售，妥妥的“新鲜出炉”，你要是问本瓜：当今学 JavaScript 哪家强，我只能说：红宝书第 4 版最在行。
于是乎，借着更文契机，本瓜将开启一个小系列，带你重看一遍高级程序设计4（先前只是跳着跳着看），将抽取精华，用最简单的话解释核心点、尽量把握全局、快速过一遍的同时，记录与工友们分享~~
1995 年，作为 JavaScript 的创作者，Brendan Eich 绝对想不到，他仅用 10 天写出的脚本语言，竟然在 25 年以后，连续 10 年蝉联“最常用编程语言”榜首。
很多人还以刻板的印象认为 JavaScript 是“玩具语言”，但随着它的不断发展，而今它绝对是最有必要学习的一门编程语言。JavaScript 有着强大的语言特性，对于网页和移动开发者来说，深入理解尤为必要。
在第一章 《什么是 JavaScript》很详细的阐述了 JavaScript 演进历史，这里用箭头符号简单说明过程：
Mocha ⇒ LiveScript ⇒ JavaScript（Netscape Navigator）、IE（JScript）⇒ ECMAScript
言而总之，就是网景浏览器与IE浏览器大战，最终促成了 ECMAScript 的诞生。
有意思的是，本瓜之前理解：JavaScript 包含三个部分，ECMAScript + DOM + BOM，这里也确实这样画了一张图，
但这种包含的理解应该是错误的；语言是实现标准，而不是包含标准；其它语言也可以实现这些标准，比如 Adobe ActionScript 同样也实现了 ECMAScript ；
所以，应该说：JavaScript 实现了 ECMAScript 标准，同时还实现了 DOM 和 BOM。
那 ECMAScript（ecma-262）到底定义了什么？要点如下：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 全局对象
CV 一个历史版本及主要发布特性：
介绍了下 ECMAScript ，然后就来到我们熟悉的 DOM：Document Object Model；
DOM 将整个页面抽象为一组分层节点。使用 DOM API，可以轻松地删除、添加、替换、修改节点。让开发者可以随心所欲地控制网页的内容和结构。
DOM 历史上，有 4 个版本：
咱就是，不得不感慨，这些版本的历史迭代是导致前端难学的原因之一 QAQ
接着行文来到 BOM —— 浏览器对象模型，我们也很熟悉，它提供的能力是关于浏览器的：
- 弹出新浏览器窗口的能力；
- 移动、缩放和关闭浏览器窗口的能力；
- navigator 对象，提供关于浏览器的详尽信息；
- location 对象，提供浏览器加载页面的详尽信息；
- screen 对象，提供关于用户屏幕分辨率的详尽信息；
- performance 对象，提供浏览器内存占用、导航行为和时间统计的详尽信息；
- 对 cookie 的支持；
- 其他自定义对象，如 XMLHttpRequest 和 IE 的 ActiveXObject。
其实在 HTML5 之前，各大浏览器对于 BOM 的实现是不一样的，HTML5 改善了这一困境。
小结一句吧：
有人问：学习 JavaScript 有必要了解它的历史吗？本瓜觉得是必要的。了解后，也会发现：还挺有意思的~~
这里觉得有点遗憾的是，关于：JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和 Scheme（一门函数式编程语言）的影响，在语法结构上它又与C语言相似，高程4 里并没有展开说明，如果能针对这部分历史展开讲讲，就更 nice 了！！浅习一波 JavaScript 高级程序设计（第4版）p1
我是掘金安东尼： 一名人气前端技术博主（文章 100w+ 阅读量）
终身写作者（INFP 写作人格）
坚持与热爱（简书打卡 1000 日）
我能陪你一起度过漫长技术岁月吗（以梦为马）
觉得不错，给个点赞和关注吧（这是我最大的动力 ）b(￣▽￣)d
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
