JavaScript 直接放入包含网页 HTML 的文件中非常适合在学习 JavaScript 时使用的短脚本。

但是，当你开始创建脚本来为你的网页提供重要功能时，JavaScript 的数量可能会变得非常大，并且将这些大型脚本直接包含在网页中会带来两个问题：如果 JavaScript 占据了页面内容的大部分，它可能会影响你的页面在各种搜索引擎中的排名。这降低了使用关键字和短语来识别内容的频率；这使得在你网站的多个页面上重用相同的 JavaScript 功能变得更加困难。每次你想在不同的页面上使用它时，你都需要将其复制并插入到每个附加页面中，以及新位置所需的任何更改。

如果我们让 JavaScript 独立于使用它的网页会更好。

选择要移动的 JavaScript 代码

幸运的是，HTML 和 JavaScript 的开发者已经为这个问题提供了解决方案。我们可以将我们的 JavaScript 移出网页，但仍保持其功能完全相同。

我们需要做的第一件事是在使用它的页面外部创建 JavaScript 代码，即选择实际的 JavaScript 代码本身（不包括周围的 HTML 脚本标签）并将其复制到单独的文件中。

例如，如果以下脚本在我们的页面上，我们将选择并复制粗体部分：

<script type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>

曾经有一种做法是将 JavaScript 放在 HTML 文档中的注释标记内，以阻止旧版浏览器显示代码； 但是，新的 HTML 标准规定浏览器应该自动将 HTML 注释标签内的代码视为注释，这会导致浏览器忽略你的 Javascript。

如果你从其他人那里继承了带有注释标签内的 JavaScript 的 HTML 页面，那么你不需要在你选择和复制的 JavaScript 代码中包含这些标签。

例如，你将只复制粗体代码，省略以下代码示例中的 HTML 注释标记 <!-- and -->：

<script type="text/javascript"><!--
var hello = 'Hello World';
document.write(hello);
// --></script>

将 JavaScript 代码保存为文件

选择要移动的 JavaScript 代码后，将其粘贴到新文件中。为文件命名，以暗示脚本的作用或标识脚本所属的页面。

给文件一个 .js 后缀，以便你知道该文件包含 JavaScript。例如，我们可以使用 hello.js 作为保存上例中的 JavaScript 的文件名。

链接到外部脚本

现在我们已经将我们的 JavaScript 复制并保存到一个单独的文件中，我们需要做的就是在我们的 HTML 网页文档中引用外部脚本文件。

首先，删除脚本标签之间的所有内容：

<script type="text/javascript">
</script>

这还没有告诉页面运行什么 JavaScript，所以我们接下来需要向 script 标签本身添加一个额外的属性，告诉浏览器在哪里可以找到脚本。

我们的示例现在看起来像这样：

<script type="text/javascript"
src="hello.js">
</script>

src 属性告诉浏览器应该从中读取该网页的 JavaScript 代码的外部文件的名称（在我们上面的示例中是 hello.js）。你不必将所有的 JavaScript 放在与 HTML 网页文档相同的位置。你可能希望将它们放入单独的 JavaScript 文件夹中。在这种情况下，你只需修改 src 属性中的值以包含文件的位置。你可以为 JavaScript 源文件的位置指定任何相对或绝对 Web 地址。

你现在可以获取你编写的任何脚本或从脚本库中获取的任何脚本，并将其从 HTML 网页代码移动到外部引用的 JavaScript 文件中。然后，你可以通过添加调用该脚本文件的适当 HTML 脚本标签从任何网页访问该脚本文件。

了解更多

次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。

position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。

我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。

我们来通过代码和结果来看一下：

上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]

我们可以看出猫图片并没有移动，而是给兔子图片留着位置。

这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置

代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

用了fixed的效果展示。

以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。

avaScript的执行过程

JavaScript（简称JS）是一种广泛应用于网页开发和移动应用程序的脚本语言。在浏览器中运行时，JS需要经历一系列的步骤，从解析到执行，以实现所需的功能。本文将详细说明JS的执行过程。

1. 词法分析

JavaScript的执行过程始于词法分析。在这个阶段，JS引擎会将输入的代码按照规定的语法进行分解，将其划分为一个个的标记或令牌。这些标记包括关键字、变量名、操作符等。词法分析器会忽略空格和换行符，并将代码转化为一个标记流。

2. 语法分析

在词法分析之后，JS引擎会对标记流进行语法分析。语法分析器会根据JS的语法规则，将标记流转换成抽象语法树（AST）。抽象语法树是一个以树形结构表示代码语法结构的数据结构，它将代码的逻辑结构清晰地呈现出来。

3. 作用域和作用域链

在执行JS代码之前，引擎会创建一个全局作用域。作用域是一种存储变量和函数的容器，它规定了变量和函数的可访问性。在JS中，作用域是基于词法作用域的，即作用域在代码编写时就已经确定。

当JS引擎执行代码时，会根据作用域链来查找变量和函数。作用域链是一个由多个作用域组成的链表，它按照定义的顺序进行查找。如果一个变量或函数在当前作用域找不到，引擎会沿着作用域链向上查找，直到找到为止。

4. 解释和执行

一旦完成了词法分析、语法分析和作用域链的建立，JS引擎就会开始解释和执行代码。解释器会逐行读取AST，并将其转换为机器能够理解和执行的指令。这个过程是逐行进行的，所以即使在代码中出现了错误，也会尽可能地执行完剩余的代码。

在执行过程中，JS引擎会创建执行上下文（Execution Context）。执行上下文是一个包含了当前代码执行环境的对象，它包括了变量、函数和其他的运行时信息。每当一个函数被调用时，都会创建一个新的执行上下文。执行上下文会被添加到执行上下文栈中，以便在需要的时候进行访问和管理。

5. 内存管理和垃圾回收

最后，JS引擎会进行内存管理和垃圾回收。在执行过程中，JS会使用内存来存储变量、对象和其他数据。为了避免内存泄漏和浪费，JS引擎会定期进行垃圾回收。

垃圾回收器会检查不再被引用的对象，并将它们从内存中释放出来。这样可以确保内存的有效利用，并提高程序的性能。垃圾回收是一个自动的过程，由JS引擎负责管理。