Hello, world!

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

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

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

“script” 标签

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

比如：

<!DOCTYPE HTML>

<html>

<body>

  <p>script 标签之前...</p>

  <script>

    alert('Hello, world!');

  </script>

  <p>...script 标签之后</p>

</body>

</html>

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

现代的标记

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

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

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

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

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

脚本前后的注释：

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

    <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 代码添加到页面中。
  • type 和 language 属性不是必需的。
  • 外部的脚本可以通过 <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/

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

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

  1. javascript和swf在网页中交互的一些总结

    Javascript和swf在网页中交互一般可有以下几种情况: 1.swf和这些调用的javascript在同域 2.swf和这些调用的javascript在不同域,比如加载远程的swf然后call别 ...

  2. javascript高德地图放到网页中的方法

    javascript高德地图放到网页中的方法 1 先获取到经纬度http://lbs.amap.com/console/show/picker 2 下面代码直接设置下中心点 和标记点就可以了 < ...

  3. <code> 标签 让一段计算机代码显示在网页中

    <code> 标签 解释:要让一段计算机代码显示在网页中,那么这段代码需要用<code> 标签包起来,不然他会被当作网页的代码被 运行. 例如: <code>< ...

  4. 博客代码：iframe—网页中嵌入其他网页

    iframe 是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用.对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适.而对于在新浪博客里不支持的一些网页效果和代码,可先把他们 ...

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

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

  6. css和javascript代码写在页面中的位置说明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    一.倒计时 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  8. HTML之：让网页中的<a>标签属性统一设置-如‘新窗口打开’

    在开发过程中,我们往往想在页面中,给<a>设置一个统一的默认格式,例如我们想让链接:“在新窗口打开”,我们就可以使用<base>标签 在网页中添加这段代码: <head& ...

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

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

随机推荐

  1. java并发编程（二）----创建并运行java线程

    实现线程的两种方式 上一节我们了解了关于线程的一些基本知识,下面我们正式进入多线程的实现环节.实现线程常用的有两种方式,一种是继承Thread类,一种是实现Runnable接口.当然还有第三种方式,那 ...

  2. Linux启动之旅

    引言 某出租房内,某台电脑的电源键被按下,于是开启了一段Linux启动之旅... BIOS 系统启动,首先进入BIOS. ● BIOS 为 Base Input/Output System(基本输入输 ...

  3. 一文了解：Redis的AOF持久化

    Redis的AOF持久化 每当Redis-Server接收到写数据时,就把命令以文本形式追加到AOF文件里,当重启Redis服务时,AOF文件里的命令会被重新执行一次,重新恢复数据.当AOF过大时将重 ...

  4. （十二）c#Winform自定义控件-分页控件

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  5. html5标签整理

    html元素 基础标签 <!DOCTYPE> 定义文档类型(e.g  <!DOCTYPE  html>) <html>定义一个HTML文档</html> ...

  6. 本地VSCode编辑远程服务器文件

    前言 先说下我的场景:服务器搭设了一系列复杂环境,然后需要使用PHP实现某些功能 选这种远程编辑的原因: 首先PHP打死我也不想装(这个现在是出了VB外最惹人厌的语言了) 然后环境比较复杂,本地装下比 ...

  7. Java请求Http

    一.工具类,直接粘贴调用即可 package cn.com.service.httpReq; import java.io.BufferedReader;import java.io.IOExcept ...

  8. xpath中normalize-space的用法【转载】

    下面这个菜单中,要点击“货运表现”,我们来看一下xpath, 菜单中的所有项的id都是“vertab”,所以不能用id来定位,那么先用文本的xpath试试 //a[text()='货运表现'] 发现定 ...

  9. C#简单爬取数据（.NET使用HTML解析器ESoup和正则两种方式匹配数据）

    一.获取数据 想弄一个数据库,由于需要一些人名,所以就去百度一下,然后发现了360图书馆中有很多人名 然后就像去复制一下,发现复制不了,需要登陆 此时f12查看源码是可以复制的,不过就算可以复制想要插 ...

  10. JDBC、Tomcat为什么要破坏双亲委派模型？

    问题一:双亲委派模型是什么 如果一个类加载器收到了加载某个类的请求,则该类加载器并不会去加载该类,而是把这个请求委派给父类加载器,每一个层次的类加载器都是如此,因此所有的类加载请求最终都会传送到顶端的 ...