如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

Hello, world!

本教程的这一部分内容是关于 JavaScript 语言本身的。

但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert),所以如果你打算专注于另一个环境(比如 Node.js),你就不必多花时间来关心这些特定指令了。我们将在本教程的下一部分中专注于浏览器中的 JavaScript。

首先,让我们看看如何将脚本添加到网页上。对于服务器端环境(如 Node.js),你只需要使用诸如 "node my.js" 的命令行来执行它。

“script” 标签

JavaScript 程序可以在 <script> 标签的帮助下插入到 HTML 文档的任何地方。

比如:

```html run height=100
<!DOCTYPE HTML>

script 标签之前...

...script 标签之后

```

<script> 标签中包裹了 JavaScript 代码,当浏览器遇到 <script> 标签,代码会自动运行。

现代的标记

<script> 标签有一些现在很少用到的属性,但是我们可以在老代码中找到它们:

type 属性:<script type=...>

  • 在老的 HTML4 标准中,要求 <script> 标签有 type 属性。通常是 type="text/javascript"。这样的属性声明现在已经不再需要。而且,现代 HTML 标准 —— HTML5 已经完全改变了此属性的实际含义。现在,该属性可以被用于 JavaScript 模块。但那是一个高级一点的话题,我们将会在此教程的其他章节中探讨 JavaScript 模块。

language 属性:<script language=...>

  • 这个属性是为了显示脚本使用的语言。这个属性现在已经没有任何意义,因为语言默认就是 JavaScript。不再需要使用它了。

脚本前后的注释:

  • 在非常古老的书籍和指南中,你可能会在 <script> 标签里面找到注释,就像这样:

    html no-beautify <script type="text/javascript"><!-- ... //--></script>

    现代 JavaScript 中已经不这样使用了。这些注释是用于不支持 <script> 标签的古老的浏览器隐藏 JavaScript 代码的。由于最近 15 年内发布的浏览器都没有这样的问题,因此这种注释能帮你辨认出一些老掉牙的代码。

外部脚本

如果你有大量的 JavaScript 代码,我们可以将它放入一个单独的文件。

脚本文件可以通过 src 属性添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

这里,/path/to/script.js 是脚本文件从站点根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如,src =“script.js” 表示当前文件夹中的 “script.js” 文件。

我们也可以提供一个完整的 URL 地址,例如:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多个脚本,请使用多个标签:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

请注意:

一般来说,只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。

使用独立文件的好处是浏览器会下载它,然后将它保存到浏览器的缓存中。

之后,其他页面想要相同的脚本就会从缓存中获取,而不是下载它。所以文件实际上只会下载一次。

这可以节省流量,并使得页面(加载)更快。

提醒:如果设置了 src 属性,script 标签内容将会被忽略。

一个单独的 <script> 标签不能同时有 src 属性和内部包裹的代码。

这将不会工作:

<script src="file.js">
  alert(1); // 此内容会被忽略,因为设定了 src
</script>

我们必须进行选择,要么使用外部的 <script src="…">,要么使用正常包裹代码的 <script>

为了让上面的例子工作,我们可以将它分成两个 <script> 标签。

<script src="file.js"></script>
<script>
  alert(1);
</script>

总结

  • 我们可以使用一个 <script> 标签将 JavaScript 代码添加到页面中。
  • typelanguage 属性不是必需的。
  • 外部的脚本可以通过 <script src="path/to/script.js"></script> 的方式插入。

有关浏览器脚本以及它们和网页的关系,还有很多可学的。但是请记住,教程的这部分主要是针对 JavaScript 语言本身的,所以我们不该被浏览器特定的实现分散自己的注意力。我们将使用浏览器作为运行 JavaScript 的一种方式,这种方式非常便于我们在线阅读,但这只是很多种方式中的一种。

作业题

1. 显示一个提示语

重要程度:??????????

创建一个页面,然后显示一个消息 “I‘m JavaScript!”。

在沙箱中或者在你的硬盘上做这件事都无所谓,只要确保它能运行起来。

你可以先看一下 新窗口的演示结果

在微信公众号「技术漫谈」后台回复 1-2-1 获取本题答案。

2. 使用外部的脚本显示一个提示语

重要程度:??????????

打开题目 1 的答案。将答案中脚本的内容提取到一个外部的 alert.js 文件中,放置在相同的文件夹中。

打开页面,确保它能够工作。

你可以先看一下 新窗口的演示结果

在微信公众号「技术漫谈」后台回复 1-2-1 获取本题答案。


现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程

在线免费阅读:https://zh.javascript.info/



扫描下方二维码,关注微信公众号「技术漫谈」,订阅更多精彩内容。

原文地址:https://www.cnblogs.com/leviding/p/11514789.html

时间: 2024-08-27 18:23:05

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性的相关文章

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享

微信分享代码之在网页中添加“分享到微信朋友圈”按钮的代码分享 由于目前微信并没有提供这个按钮的官方支持,很多人问我们这个按钮是如何实现的,其实很简单,我们把我们实现的方法分享给大家,希望对那些想在网页端加这个按钮的人有所帮助. 下面是代码(相关参数请自行修改): function WeiXinShareBtn() { if (typeof WeixinJSBridge == "undefined") { alert("请先通过微信搜索 添加分享组件提供商友推为好友,通过微信分

博客代码:iframe—网页中嵌入其他网页

iframe 是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用.对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适.而对于在新浪博客里不支持的一些网页效果和代码,可先把他们设置好,在支持他们的网站上使用,或上传到一个免费的网络空间或网络硬盘里,获取相应的网页地址,然后用 iframe嵌入到新浪博客里,非常好用! 一.固定位置的iframe代码: <DIV align=center><IFRAME src="http://weather.265.com

&lt;code&gt; 标签 让一段计算机代码显示在网页中

<code> 标签 解释:要让一段计算机代码显示在网页中,那么这段代码需要用<code> 标签包起来,不然他会被当作网页的代码被 运行. 例如: <code><img src="" alt=""></code> 原文地址:https://www.cnblogs.com/rygl/p/11829378.html

【JavaScript】在同一个网页中实现多个JavaScript特效

在网页中,如果出现两次<script type="text/javascript"></script>标签,所有的JavaScipt脚本都不会再生效,只能出现一次<script type="text/javascript"></script>标签,但是,同一个网页中常常需要多个JavaScript特效. 一.基本目标 在网页中挂载两个JavaScript时钟,其中一个是每1秒走一次的正常时间,另外一个是每3秒才走一次的

javaScript 实现倒计时 + 获取网页中的文字

一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var count

HTML之:让网页中的&lt;a&gt;标签属性统一设置-如‘新窗口打开’

在开发过程中,我们往往想在页面中,给<a>设置一个统一的默认格式,例如我们想让链接:“在新窗口打开”,我们就可以使用<base>标签 在网页中添加这段代码: <head> <base target="_blank"> </head> [注解] <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base

在HTML中使用JavaScript之&lt;script&gt;标签及属性

在HTML页面中加入JavaScript最主要的方法就是使用<script>:包含外部的JavaScript文件和在页面中直接嵌入JavaScript代码. <script>的属性 <script>包含属性:async 表示应该立即下载外部脚本,defer表示脚本可以延迟外部js到DOM文档完全被解析和显示后再执行,src引入外部文件,type表示脚本的内容类型(MIME类型)text/javaScript: <script>书写格式 <script&

网页中导入特殊字体@font-face属性详解

@font-face { font-family: 'icomoon';/*自定义字体名称*/ src:url('../fonts/icomoon.eot?rretjt');/*自定义字体的路径*/ src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), url('../fonts/icomoon.woff?rretjt') format('woff'),/*format为字体格式 便于浏览器识别*/ u

html网页中的base标签使用

HTML文档中的base标签是很少用到的冷门标签之一,作用是通过它来规定网页链接的通用属性,可设置的属性有 target 和 href. base标签必须加在html文档的head内,比如: <base target="_blank"/> 这里就规定的该页面上的所有链接的target都为_blank,即在新窗口(标签页)打开链接.target的值跟 a 标签的target一样. 讲一下href属性: <base href="http://www.baidu.