js学习笔记（1）1.完整的JS包括以下部分 1.ECMAScript(JavaScript 的标准化规范) 2.DOM

1.完整的JS包括以下部分

1.ECMAScript(JavaScript 的标准化规范)
2.DOM(文档对象)
3.BOM(浏览器对象)

2.HTML和JS

1.使用<script>元素将js插入HTML,<script>元素有以下属性
（1）type：可选。代替language，表示代码块中脚本语言的内容类型
（2）src：可选。表示包含要执行的代码的外部文件
（3）charset：可选。使用src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。

3.使用`<script>`的两种方式：

（1）直接在网页中嵌入JavaScript 代码，包含在<script>内的代码会被从上到下解释

<script>
  function sayHi() {
    console.log("Hi!");
  }
</script>

（2）在网页中包含外部JavaScript 文件。使用src 属性,这个属性的值是一个URL，指向包含 JavaScript 代码的文件，

<script src="example.js"></script>

另外，使用了src 属性的标签中再包含其他。 JavaScript 代码。如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。
<script>元素的一个最为强大、同时也备受争议的特性是：
它可以包含来自外部域的JavaScript文件，<script>元素的src属性可以是一个完整的URL，而且这个URL指向的资源可以跟包含它的HTML页面不在同一个域中，比如

<script src="http://www.somewhere.com/afile.js"></script>

浏览器在解析这个资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源，这个初始的请求不受浏览器同源策略限制，但返回并被执行的JavaScript则受限制。

4.标签位置

将所有JavaScript 引用放在<body>元素中的页面内容后面

5.推迟执行脚本(只适用于外部脚本)

在<script>元素上设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。

<script defer src="example1.js"></script>

使用defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。

6.异步执行脚本(只适用于外部脚本)

<script async src="example1.js"></script>

不过，与defer不同的是，标记为async的脚本并不保证能按照它们出现的次序执行

7.动态加载脚本

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性。 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

<link rel="preload" href="gibberish.js">

8.`<noscript>`元素

可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
    <script defer="defer" src="example1.js"></script>
    <script defer="defer" src="example2.js"></script>
  </head>
<body>
  <noscript>
    <p>This page requires a JavaScript-enabled browser.</p>
  </noscript>
</body>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

js学习笔记（1）