如何将 JavaScript 添加到 HTML 页面

简介: 如何将 JavaScript 添加到 HTML 页面


本文详细介绍了如何在HTML中内联JavaScript代码以及将其作为单独文件链接到网页,包括在文档头部和主体中的使用方法,以及使用单独文件管理大型脚本的益处

介绍

JavaScript,简称 JS,是一种用于网页开发的编程语言。作为 Web 的核心技术之一,JavaScript 与 HTML 和 CSS 一起用于使网页具有交互性并构建 Web 应用程序。现代 Web 浏览器遵循通用的显示标准,通过内置引擎支持 JavaScript,无需额外的插件。

在处理 Web 文件时,JavaScript 需要与 HTML 标记一起加载和运行。这可以通过两种方式实现:要么内联在 HTML 文档中,要么作为浏览器将与 HTML 文档一起下载的单独文件运行。

本教程将介绍如何将 JavaScript 整合到您的 Web 文件中,包括内联到 HTML 文档和作为单独文件。

将 JavaScript 添加到 HTML 文档中

您可以通过使用专用的 HTML 标记 </code> 将 JavaScript 代码添加到 HTML 文档中。</div><div><code><script></code> 标记可以放置在 HTML 的 <code><head></code> 部分或 <code><body></code> 部分,具体取决于您希望 JavaScript 何时加载。</div><div>通常,JavaScript 代码可以放在文档的 <code><head></code> 部分中,以便将其包含在 HTML 文档的主要内容之外。</div><div>但是,如果您的脚本需要在页面布局的某个特定点运行(例如在使用 <code>document.write</code> 生成内容时),则应将其放在应调用它的位置,通常在 <code><body></code> 部分内。</div><div>让我们考虑以下带有浏览器标题为“今天的日期”的空白 HTML 文档:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%223hCJt%22%7D"></div><div>目前,此文件仅包含 HTML 标记。假设我们想要将以下 JavaScript 代码添加到文档中:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22let%20d%20%3D%20new%20Date()%3B%5Cnalert(%5C%22Today's%20date%20is%20%5C%22%20%2B%20d)%3B%22%2C%22id%22%3A%22Cemyw%22%7D"></div><div>这将使网页显示一个警报,其中包含当前日期,无论用户何时加载该站点。</div><div>为了实现这一点,我们将在 HTML 文件中添加一个 <code><script></code> 标记以及一些 JavaScript 代码。</div><div>首先,我们将在 <code><head></code> 标记之间添加 JavaScript 代码,以通知浏览器在加载页面的其余部分之前运行 JavaScript 脚本。我们可以在 <code><title></code> 标记下方添加 JavaScript,如下所示:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%20%20%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20%20%20let%20d%20%3D%20new%20Date()%3B%5Cn%20%20%20%20%20%20%20%20alert(%5C%22Today's%20date%20is%20%5C%22%20%2B%20d)%3B%5Cn%20%20%20%20%3C%2Fscript%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22eCzHu%22%7D"></div><div>加载页面后,您将收到类似于以下内容的警报:</div><div>!JavaScript Alert Example</div><div>如果我们要修改 HTML 主体中显示的内容,我们需要在 <code><head></code> 部分之后实现,以便它显示在页面上,如下例所示:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%20%5Cn%20%20%3Cscript%3E%5Cn%20%20%20%20%20%20let%20d%20%3D%20new%20Date()%3B%5Cn%20%20%20%20%20%20document.body.innerHTML%20%3D%20%5C%22%3Ch1%3EToday's%20date%20is%20%5C%22%20%2B%20d%20%2B%20%5C%22%3C%2Fh1%3E%5C%22%5Cn%20%20%3C%2Fscript%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22uK0rC%22%7D"></div><div>通过 Web 浏览器加载上述 HTML 文档的输出将类似于以下内容:</div><div>!JavaScript Date Example</div><div>小型或仅在一个页面上运行的脚本可以在 HTML 文件中正常工作,但对于较大的脚本或将在许多页面上使用的脚本来说,这不是一个非常有效的解决方案,因为包含它可能变得笨拙或难以阅读和理解。在下一节中,我们将介绍如何在 HTML 文档中处理单独的 JavaScript 文件。</div><h3 id="ZiflA"><a name="t2"></a><a></a>使用单独的 JavaScript 文件</h3><div>为了容纳较大的脚本或将在多个页面上使用的脚本,JavaScript 代码通常存储在一个或多个 <code>js</code> 文件中,并在 HTML 文档中引用,类似于引用外部资源(如 CSS)。</div><div>使用单独的 JavaScript 文件的好处包括:</div><ul><li>将 HTML 标记和 JavaScript 代码分开,使两者更加简单</li><li>单独的文件使维护更容易</li><li>当 JavaScript 文件被缓存时,页面加载更快</li></ul><div>为了演示如何将 JavaScript 文档连接到 HTML 文档,让我们创建一个小型 Web 项目。它将包括 <code>js/</code> 目录中的 <code>script.js</code>,<code>css/</code> 目录中的 <code>style.css</code>,以及项目根目录中的主 <code>index.html</code>。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22project%2F%5Cn%E2%94%9C%E2%94%80%E2%94%80%20css%2F%5Cn%7C%20%20%20%E2%94%94%E2%94%80%E2%94%80%20style.css%5Cn%E2%94%9C%E2%94%80%E2%94%80%20js%2F%5Cn%7C%20%20%20%E2%94%94%E2%94%80%E2%94%80%20script.js%5Cn%E2%94%94%E2%94%80%E2%94%80%20index.html%22%2C%22id%22%3A%22mldkF%22%7D"></div><div>我们可以从上面的部分中开始使用我们之前的 HTML 模板:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%220DVK7%22%7D"></div><div>现在,让我们将显示日期的 JavaScript 代码移动到 <code>script.js</code> 文件中,作为一个 <code><h1></code> 标题:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22let%20d%20%3D%20new%20Date()%3B%5Cndocument.body.innerHTML%20%3D%20%5C%22%3Ch1%3EToday's%20date%20is%20%5C%22%20%2B%20d%20%2B%20%5C%22%3C%2Fh1%3E%5C%22%22%2C%22id%22%3A%22SRCJe%22%7D"></div><div>我们可以在 <code><body></code> 部分添加对此脚本的引用,代码如下:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%20src%3D%5C%22js%2Fscript.js%5C%22%3E%3C%2Fscript%3E%22%2C%22id%22%3A%22eXCdy%22%7D"></div><div><code><script></code> 标记指向我们 Web 项目中 <code>js/</code> 目录中的 <code>script.js</code> 文件。</div><div>让我们在我们的 HTML 文件的上下文中考虑这行代码,即在 <code><body></code> 部分中:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3Cscript%20src%3D%5C%22js%2Fscript.js%5C%22%3E%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%20%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22CYaLd%22%7D"></div><div>最后,让我们还编辑 <code>style.css</code> 文件,为 <code><h1></code> 标题添加背景颜色和样式:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22body%20%7B%5Cn%20%20%20%20background-color%3A%20%230080ff%3B%5Cn%7D%5Cn%20%5Cnh1%20%7B%5Cn%20%20%20%20color%3A%20%23fff%3B%5Cn%20%20%20%20font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B%5Cn%7D%22%2C%22id%22%3A%22dd1BW%22%7D"></div><div>我们可以在 HTML 文档的 <code><head></code> 部分引用该 CSS 文件:</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en-US%5C%22%3E%5Cn%20%5Cn%3Chead%3E%5Cn%20%20%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%3E%5Cn%20%20%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1%5C%22%3E%5Cn%20%20%20%20%3Ctitle%3EToday's%20Date%3C%2Ftitle%3E%5Cn%20%20%20%20%3Clink%20rel%3D%5C%22stylesheet%5C%22%20href%3D%5C%22css%2Fstyle.css%5C%22%3E%5Cn%3C%2Fhead%3E%5Cn%20%5Cn%3Cbody%3E%5Cn%20%5Cn%3Cscript%20src%3D%5C%22js%2Fscript.js%5C%22%3E%3C%2Fscript%3E%5Cn%3C%2Fbody%3E%5Cn%20%5Cn%3C%2Fhtml%3E%22%2C%22id%22%3A%22oBZQa%22%7D"></div><div>现在,有了 JavaScript 和 CSS,我们可以将 <code>index.html</code> 页面加载到我们选择的 Web 浏览器中。我们应该看到一个类似于以下内容的页面:</div><div>!JavaScript Date with CSS Example</div><div>现在,我们已经将 JavaScript 放在一个文件中,可以以相同的方式从其他网页调用它,并在单个位置更新它们。</div><h3 id="tgTGP"><a name="t3"></a><a></a>结论</h3><div>本教程介绍了如何将 JavaScript 集成到您的 Web 文件中,包括内联到 HTML 文档中以及作为单独的 <code>.js</code> 文件。</div><div>从这里,您可以学习如何使用 JavaScript 开发者控制台以及如何在 JavaScript 中编写注释。</div><div id="__reading__mode__content_end_mark_container_id" style="background-color: #FCFCFC;"><br /></div>

目录
打赏
0
0
0
0
40
分享
相关文章
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
91 2
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
91 7
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
80 11
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
62 3
|
2月前
|
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
50 4
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
76 0
html5+three.js公路开车小游戏源码
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
157 6
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
68 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等