JavaScript青少年简明教程：开发工具与运行环境

JavaScript是一种基于对象和事件驱动且具有安全性能的脚本语言。使用它和HTML结合可以开发出交互式的Web页面。

脚本语言是为了缩短传统的编写-编译-链接-运行过程而创建的计算机编程语言。脚本通常是解释执行而非编译，脚本代码可以由浏览器解释执行。在许多方面，高级编程语言和脚本语言之间互相交叉，二者之间没有明确的界限。

学习JavaScript的实验环境有很多选择，以下是一些常用的实验环境：

☆浏览器控制台：浏览器（例如 Google Chrome、Mozilla Firefox、Microsoft Edge 等）本身提供了直接运行 JavaScript 代码的控制台。一般电脑系统中都会带有浏览器。打开浏览器按下 F12打开开发者工具。转到 "Console" 选项卡，可以直接输入和执行 JavaScript 代码。

打开一个浏览器，建议在地址栏中输入about:blank，按下Enter键（回车键），就可以看到一个空白页面——这样创建一个干净、无干扰的环境来进行 JavaScript 开发或测试，再按下F12键，就打开了浏览器的控制台（console），现在你就可以学习JavaScript了。以Microsoft Edge为例：

进入控制台以后，就可以在提示符后输入代码，然后按回车（Enter键），代码就会执行。如果按Shift + Enter键，就是代码换行，不会触发执行，可以输入多行语句，直至回车执行。

顺便提示：在浏览器控制台中，点击控制台右上角的 "清除控制台" 按钮，或者按下快捷键Ctrl+L，或者使用 console.clear() 方法的作用，是快速清空控制台，以便查看最新的日志信息或进行新的测试。清除控制台不会影响代码的执行或应用程序的状态，它只是清除了显示的输出。

浏览器的开发者工具使用介绍https://blog.csdn.net/cnds123/article/details/120822401

如何编辑运行HTML网页文件（HTML编辑工具使用介绍）https://blog.csdn.net/cnds123/article/details/113831256

浏览器控制台调试代码和JavaScript控制台方法介绍https://blog.csdn.net/cnds123/article/details/132332849

为什么浏览器控制台（Console）运行JavaScript代码有时会出现“undefined”？https://blog.csdn.net/cnds123/article/details/128014970

☆使用Node.js：Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以在服务器端运行JavaScript代码。你可以在Node.js的官方网站上下载并安装Node.js，然后使用命令行界面运行JavaScript文件。安装了 Node.js可以搭建一个本地开发环境。

作为初学者一般不要这种方式。对Node.js 感兴趣的读者可见“Node.js 新手入门” https://blog.csdn.net/cnds123/article/details/104559497

☆创建HTML文件试验与测试JavaScript代码

可以安装了代码编辑器（如Visual Studio Code、Sublime Text等）或集成开发环境IDE（如WebStorm、HBuilderX等），也可以在这些工具上编写JavaScript代码并结合Node.js或浏览器来运行。

特别说明HBuilderX 是一款功能强大、使用便捷的开发工具，特别适合前端开发和移动应用开发，支持多语言和框架：

多种编程语言：支持 HTML、CSS、JavaScript、TypeScript、Python、PHP 等多种编程语言。

主流框架：支持 Vue.js、React、Angular 等主流前端框架，以及 uni-app 等移动应用开发框架。

因此，可以使用HBuilderX 编写并测试 JavaScript 代码，为感兴趣的读者提供官方网址HBuilderX-高效极客技巧

对这些就不做过多介绍了。

也可以使用Windows的记事本（Notepad）编写JavaScript代码。通过在文本编辑器创建一个HTML文件，将JavaScript代码放在<script>标签中。下面介绍这种方式。

打开Windows的记事本，编写代码如下内容：

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8"> 
       <meta name="viewport" content="width=device-width, initial-scale=1.0">     
       <title>JavaScript 测试</title>
   </head>
   <body>
       <p>JavaScript 示例：在网页的script标签内直接嵌入JavaScript代码</p>

       <!-- 这里是你的JavaScript代码 -->
       <script>
           alert ('Hello, JavaScript!');  // JavaScript代码
       </script>
   </body>
</html>

说明，其中：

<html lang="en"> 中的 lang 属性用于指定文档的主要语言，这个属性可以帮助屏幕阅读器、翻译工具和搜索引擎更好地理解和处理页面内容。

lang="en" 指定文档的语言是英语

lang="zh" 指定文档的语言是中文

lang="fr" 指定文档的语言是法语，等等

提示： lang 属性不是强制性的，但推荐使用它来提高网页的可访问性和SEO（Search Engine Optimization：搜索引擎优化）。

alert()功能是令/指示浏览器显示一个带有可选的信息的对话框，并等待用户离开该对话框。JavaScript对大小写是敏感的，所以alert()必须全部小写。

用Windows的记事本编辑保存html文件，保存这个文件到合适的位置，确保文件扩展名是“.html”。可参见下图：

双击HTML文件名，它将会使用默认的网页浏览器打开。或

右击网页文件（.html文件）名，使用快捷菜单打开，具体操作参见下图：

HTML文件的结构简介

一个超文本文件以<html>标签开始，用</html>结束，其标记的内容分为“头部”和“主体”两部分。“头部”以<head>标签开始，用</head>标签结束，在这两个标签之间是用于描述网页属性的各种标签，例如：title、style、link等。“主体”以<body>标签开始，用</body>标签结束，在这两个标签之间是网页的主体内容。关于HTML的元素、标签和属性含义可见 https://blog.csdn.net/cnds123/article/details/125745562

HTML注释

<!—注释内容-->是HTML注释，“”是注释的结束符号，在这两个符号之间的内容是注释。浏览器在加载HTML文件时会忽略其中的注释。

【顺便指出，CSS注释以 /* 开始，以 */ 结束。这两个标记之间的任何内容都会被浏览器忽略，不会被解释为CSS代码。】

在HTML中，每个标签（HTML元素）都可以被视为一个对象。例如，<body>、<div>、<img>等都是HTML对象。这些对象通常具有属性（例如，<img>标签的src、height、width等属性），事件（例如，鼠标点击事件click），以及方法（例如，JavaScript中的document.createElement()方法可以创建一个新的HTML元素）。这种理解基于HTML DOM（文档对象模型）的概念。DOM将HTML文档视为一个由多个互相连接的对象组成的树状结构，每个对象代表文档中的一个部分。这种模型允许我们使用脚本语言（如JavaScript）来操作HTML文档，改变文档的结构、样式或内容。

特别提示：有关浏览器脚本代码和网页的关系，还有很多可学的。我们这里不要过多分散自己的注意力，主要是针对 JavaScript 语言本身的。

在网页中直接嵌入JavaScript程序代码的格式如下：

JavaScript程序代码

</script>

JavaScript程序代码位于<script>和</script>两个标签之间。

可以参见前面的示例。

还可以将JavaScript代码放在单独的.js文件中，然后通过<script>标签引入，可以使HTML文档结构更清晰，代码更易于管理。

在网页中引入JavaScript文件的格式如下：

在 HTML 中，可以通过 <script> 标签的 src 属性（attribute）来指向外部的 JavaScript 文件。HTML指向外部 JavaScript 文件的语法：

修改前面的例子，将JavaScript代码放到另一个文件中，在HTML文件中通过<script> 标签的 src 属性引入，因此需要建立两个文件。

HTML文件内容改为：

<!DOCTYPE html>
<html lang="zh">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>JavaScript 测试2</title>
   </head>
   <body>
       <p>JavaScript 示例：通过script标签将JavaScript文件引入到网页文件中</p>

       <!-- 这里是你的JavaScript代码 -->
       <script src="script.js"></script>
   </body>
</html>

JavaScript代码文件，其内容如下：

alert ('Hello, JavaScript!');  // JavaScript代码

我这里保存文件名为script.js，将此文件和HTML文件保存同一个文件夹（目录）中——这可以避免出现路径问题，关于路径后面将介绍。

一般来说，只有最简单的脚本代码才嵌入到 HTML 中，更复杂的脚本代码存放在单独的文件中。不要纠结上面这个示例的脚本代码很简单，为何分离出来，目的让初学者减少分神快速直观认识，感性了解，减少不必要的挫折感，增强深入学习的动力和信心。

将JavaScript代码写在单独的.js文件中，然后通过<script>标签引入到HTML中，是一种常见且推荐的做法，因为它有助于保持代码的组织性和可维护性。不过，使用这种方法时，有几个重要的注意事项：

1. 文件路径正确

确保在<script>标签的src属性中指定的路径是正确的。如果路径错误，浏览器将无法加载JavaScript文件，导致网页的功能不正常。

例如：

路径可以是相对路径或绝对路径。

相对路径是相对于当前网页文件的路径，可以使用相对于当前文件的目录的路径表示。例如，如果 JavaScript 文件与网页文件位于同一目录下，可以使用相对路径来引用它：

如果 JavaScript 文件位于当前文件的上一级目录中，可以使用相对路径来引用它：

绝对路径是指完整的路径，从根目录开始，可以直接指向 JavaScript 文件的位置。例如，如果 JavaScript 文件位于网站的根目录下的 js 文件夹中，可以使用绝对路径来引用它：

绝对路径通常以斜杠 / 开头，表示从网站的根目录开始的路径。相对路径根据当前文件的位置而定，不以斜杠开头。

选择相对路径还是绝对路径取决于你的需求和项目结构。相对路径更具灵活性，适用于项目内部文件之间的引用。绝对路径在引用外部文件或跨子域名加载文件时更为方便。请根据你的具体情况选择适当的路径类型。

2. 加载顺序

要附加多个.js脚本文件，请使用多个标签。

JavaScript文件的加载和执行顺序对网页的功能有重要影响。如果一个脚本依赖于另一个脚本中定义的变量或函数，则必须正确地安排它们的加载顺序。

例如：

3. 文档加载状态

通常，JavaScript代码需要在整个文档加载完毕后执行，尤其是当脚本需要访问或修改DOM元素时。使用defer属性可以保证脚本在文档解析完成后、DOMContentLoaded事件触发前执行。

例如：

4. 异步加载

如果脚本不依赖于其他脚本，也不依赖于DOM的完全加载，可以使用async属性使脚本异步加载。这样可以加快页面加载速度，因为它不会阻塞DOM的解析。

例如：

可以使用<script>标签中async异步加载外部脚本、defer延迟执行外部脚本，这两个属性控制外部脚本文件的加载和执行时机，但只对外部脚本文件有效。

5. 缓存问题

为了避免浏览器缓存旧的脚本文件，可能需要在文件名后添加版本号或时间戳。

例如：

6. 安全性考虑

从外部源引入脚本时，特别是从CDN加载公共库，应确保源是可信的。此外，为防止内容篡改，可以使用子资源完整性（SRI）。

例如：

7. 跨域问题

当从外部域名加载脚本时，需要确保服务端支持跨域请求，特别是当你的脚本需要进行跨域API调用时。如果 JavaScript 文件从不同的域名或子域名加载，可能会遇到 CORS（跨域资源共享）问题。从第三方域名加载的 JavaScript 文件需要服务器设置适当的 CORS 头。

8. 性能优化

尽可能将脚本放在页面底部或使用defer属性，以免阻塞页面的渲染。此外，压缩JavaScript文件可以减少传输时间。

特别提示，初学者重点了解1，其他各项大体知道即可，随着学习认识的提高回头看可能豁然开朗或更深入的理解认识。

下面给出一个模板示例，这是一个简单的 HTML 页面文件，其中包含一个按钮和一个 JavaScript 函数 sayHello。当按钮被点击时，给出一条信息"Hello from JavaScript!"。

源码如下：

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>JavaScript Test</title>  
</head>  
<body>  
    <h1>Hello, JavaScript!</h1>  
  
    <button onclick="sayHello()">Click Me</button>  
  
    <script>  
        function sayHello() {  
            console.log ('Hello from JavaScript!');  
        }  
    </script>  
</body>  
</html>

以后可以此例为模板，修改使用，用来试验JavaScript语法。如果你不想用浏览器的控制台试验JavaScript语法，可以采用之。

其中，console.log() 静态方法用于将消息输出到控制台。消息可以是一个字符串（可以包含可选的替换值），也可以是一个或多个 JavaScript 对象。简单来说，console.log() 可以在控制台上打印出消息或变量的值，方便调试和查看程序的执行结果，下一节还将介绍它。