JavaScript 快速入门基础详解！！

==分享一个写博客 首行缩进2个字符的命令： ==

  

<开头语：JavaScript 是面向 Web 编程语言，并获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和 Web 应用必须掌握的基本工具。

JavaScript 不能独立运行，只能在宿主环境中执行，一般情况下可以把JS（JavaScript）网页中借助浏览器环境来运行!

1.编写JavaScript第一个程序！

🤔知识点：

在 HTML 中页面中嵌入 JavaScript 脚本需要使用< script > 标签，用户可以在标签内直接编写JS代码，用法如下：

<script type="text/JavaScript">

设计过程：

第1步：新建HTML文档，保存为 Javascript.html

第2步：在< head >标签中插入一个 < script > 标签

第3步：为< script > 标签设置 type=”text/JavaScript“属性

第4步：在标签内输入代码如下：

网页效果：

人生中第一个JS就这样横空出世了！！！

2.新建JS文件

😋知识点：

JavaScript 程序不仅可以直接放在 HTML 文档中，也可以放在JavaScript文件中。
JavaScript文件 是 文本文件，扩展名为 “.js” 使用任何文本编辑器都可以编辑！

👥实例设计：

第1步，新建文本，保存为xxx.js 注意：扩展名为.js，他表示是JavaScript类型的文件。

第2步，打开js文件，在其中编写如下JavaScript 代码。

alert("hi,javaScript");

上面代码中 alert（）表示window对象的方法，调用该方法将弹出一个提示对话框显示参数字符串”hi ，JavaScript“

第四步新建HTML 输入 < script type=“text/JavaScript” src=文件路径>调用外部样式如下：

网页效果将弹出一个提示框并显示 “hi ，Javascript！”

注：使用script标签默认文件为js，不管加载的是不是后缀名.js都会按js脚本来解析！

3.执行JS文件

😀知识点

  浏览器在解析HTML文档时，会根据文档流从上到下逐行解析和显示。
JS 代码也是 HTML 文档的组合部分，因此js脚本执行顺也是根据< Script >标签的位置来确定的。

实例设计：

使用浏览器测试下面的示例代码，会看到 Javascript 代码从上到下逐步被解析的过程。

网页弹窗将由以上代码从上到下的解析并显示显示

4.延迟执行JS文件

☘知识点：

< script > 标签有一个布尔型属性 defer。设置该属性能够延迟 js 文件到页面解析完毕后再运行。

实例设计

在下面的实例中，外部文件js 包含的脚本将延迟到浏览器解析完网页之后再执行。
浏览器显示网页标题再弹出提示框。如果不设置 defer 属性则执行顺序是相反的。

defer 属性只适用于外部 js 文件，不适合于< script >标签包含的 js 脚本。

5.异步加载 JS 文件

🙈知识点：

在默认情况下，网页都是同步加载外部 js 文件，如果js文件较大，就会影响后面HTML代码的解析，在上面第三小结中介绍过一种解决方法：最后加载js文件。
现在可以为< Script > 标签设置 async 属性 ，然后再浏览器异步加载js文件，即再加载的js文件时，浏览器不会暂停，而是继续解析，这样能节省时间，提升响应速度

实例设计

以 上面 第四小结 示例为例，如果为标签设置 async 属性，然后在浏览器中预览，则会看到网页标题和段落文本同步，或者先显示出来，或同步弹出提示框。如果不设置 async 属性 ，只有先弹出提示文本之后，才开始解析并显示网页标题和段落文本。

代码如下：

async 是 HTML5 新增布尔型属性，通过设置 async 属性，就不用顾虑标签的放置位置，用户可以根据习惯继续把很多大型js库文件放在head 标签内。

6.JavaScript代码块

🌈知识点：

代码块就是使用 < script >标签包含的JavaScript代码段。
实例设计：

【实例1】在下面的实例代码中，使用两个< script >标签分别定义两个 JS 代码段。

浏览器在解析这个HTML文档时，如果遇到第一个< script >标签，则JavaScript 解析器会等到这个代码块的代码都加载完，
先对代码块进行预编译，然后在执行。执行完毕继续解析后面的代码，同时js解释器也准备好处理下一个代码块。

【实例2】如果在一个 js 代码块中调用后面的代码块中声明的变量或函数就会提示语法错误。例如：当 js 解释器执行下面代码时就会提示语法错误，显示变量a未定义如下：

<script>
// JavaScript 代码块1
alert (a);

</script>
<script>
// JavaScript 代码块2
var a = 1；
</script>

以上为错误的代码块顺序

如果把如下俩个代码放在一起就不会出现上述错误。