HTML中的JavaScript
文章目录
一、< script >元素
将JavaScript插入HTML的主要方法是使用<script>元素。
使用<script>的方式有两种：通过它直接在网页中嵌入JavaScript代码 ，以及通过它在网页中包含外部JavaScript文件。
嵌入行内JavaScript代码，在<script>内的代码会被从上到下 解释，在代码计算完成之前，页面的其余内容不会被加载，也不会被显示。
代码如下（示例）：
<script>
function sayHi(){
console.log("Hi!");
}
</script>
包含外部文件的JavaScript，必须使用src属性。这个属性的值是一个URL，指向包含JavaScript代码的文件。
代码如下（示例）：
<script src="example.js"></script>
注意：使用了src属性的<script>元素不应该再在<script>和</script>标签中再包含其他JavaScript代码。如果两者都提供的话，浏览器只会下载并执行脚本文件，忽略行内代码。
1.标签位置
现代Web应用程序通常将所以JavaScript引用放在<body>元素中的页面后面。否则要在JavaScript代码都下载、解析和解释完整后才开始渲染页面，在此期间h浏览器窗口会完全空白（比较慢）。
2.推迟执行脚本
defer的属性表示脚本在执行的时候不会改变页面的结构，脚本会被延迟到整个页面都解析完毕后再运行。defer属性只对外部脚本文件才有效 。
代码如下（示例）：
<script defer src="example.js"></script>/*在浏览器解析到结束的</html>标签后才会执行*/
3.异步执行脚本
async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。
代码如下（示例）：
<script async src="example.js"></script>
4.动态加载脚本
通过DOM中动态添加script元素加载指定脚本。
代码如下（示例）：
let script=document.createElement('script');
script.src='gibberish.js';
script.async=false;
document.head.appendChild(script);
二、行内代码与外部文件
使用外部文件的优点：
- 可维护性
- 缓存
- 适应未来
三、文档模式
doctype切换文档模式。最初的文档模式有两种：混杂模式和标准模式。前者让IE像IE5一样支持一些非标准的特性，后者让IE具有兼容标准的行为。随后又出现了第三种文档模式：准标准模式。这种模式下的浏览器支持很多标准的特性，但没有标准规定得那么严格。
四、< noscript >元素
<noscript>元素用于给不支持JavaScript的浏览器提供替代功能。<noscript>元素可以保护任何可以出现在<body>中的元素，<script>除外。
浏览器显示包含在<noscript>中的内容的情况：
- 浏览器不支持脚本
- 浏览器对脚本的支持将被关闭
任何一个条件被满足，包含在<noscript>中的内容就会被渲染。
总结
把 JavaScript 插入到 HTML 页面中要使用<script>元素。使用这个元素可以把 JavaScript 嵌入到HTML 页面中，让脚本与标记混合在一起；也可以包含外部的 JavaScript 文件。而我们需要注意的地方有：
在包含外部 JavaScript 文件时，必须将 src 属性设置为指向相应文件的 URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 defer 和async 属性的情况下，只有在解析完前面<script>元素中的代码之后，才会开始解析后面<script>元素中的代码。
由于浏览器会先解析完不使用 defer 属性的<script>元素中的代码，然后再解析后面的内容，所以一般应该把<script>元素放在页面最后，即主要内容后面，</body>标签前面。
使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
另外，使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下，浏览器不会显示<noscript>元素中的任何内容。
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
