如何在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

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

动力节点最新JavaScript教程（高级篇），深入学习JavaScript

JavaScript是一种运行在浏览器中的解释型编程语言，它的解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript广泛用于浏览器客户端编程，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能，用于为HTML网页增加动态功能，被广泛应用于Web应用开发中，为用户提供更流畅美观的浏览效果和体验。

本套课程是JavaScript的进阶课程，适用于已经学习了JavaScript基础知识的同学，如果你想继续对JavaScript的面向对象以及高级应用进行深入地学习，那么本套课程就是为你量身定做的，课程将会围绕对象，构造函数以及高级应用三个部分来展开，你将收获到对象的创建、属性的特征、操作原型对象、原型链继承、闭包、深浅拷贝等方面的知识，提高对JavaScript的认知深度。

本课程采用动力节点PDT4J教学法，以案例驱动教学，在案例中掌握JavaScript知识；

学习完JavaScript基础知识同学，想学习JavaScript面向对象以及高级应用的同学；

  • JavaScript高级篇在线观看：

https://www.bilibili.com/video/BV1Sb4y1b7D4

  • JavaScript高级篇资料下载：

http://www.bjpowernode.com/?toutiaojavascript

  • 前置课程：

https://i.bjpowernode.com/courses/209.html

•001.JavaScript高级应用课程导读

•002.js高级应用介绍

•003.使用对象字面值创建对象

•004.使用new Object()创建对象

•005.使用构造函数创建对象

•006.第一种遍历对象的方法

•007.遍历对象的第2种方式

•008.遍历对象的第三种方式

•009.判断对象是否存在

•010.删除对象的属性

•011.对象属性的分类

•012.定义对象属性的特征

•013.定义对象的多个属性

•014.查看对象的多个属性

•015.构造函数的实例成员

•016.构造函数的静态成员

•017.构造函数的原型

•018.原型指向

•019.判断属性方法是否属于对象自身

•020.this的指向

•021.使用原型扩展内置对象的功能

•022.this的指向

•023.apply函数

•024.call方法

•025.bind函数

•026.call(),apply()和bind()的异同

•027.判断变量的数据类型

•028.使用父构造函数继承属性

•029.借用原型对象继承方法

•030.object的create方法

•031.数组对象的forEach方法

•032.数组对象的map方法

•033.数组元素的filter方法

•034.数组对象的some方法

•035.数组元素的every方法

•036.数组对象的find方法

•037.数组对象的reduce方法

•038.严格模式的开启

•039.严格模式的语法变化

•040.高阶函数

•041.作用域

•042.闭包

•043.闭包案例

•044.递归的概念和应用

•045.浅拷贝

•046.深拷贝

•047.使用class创建类以及对象

•048.父类的继承

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科