html中的JavaScript
- 使用<script>元素
- 行内脚本和外部脚本的比较
- 文档模式对JavaScript的影响
- 确保JavaScript不可用时的用户体验
<script>元素
通过script标签将JavaScript插入到html中
使用script的方式有两种
- 直接在网页中嵌入JavaScript代码
<script>
function sayHi(){
console.log('hi')
}
</script>
- 通过它在网页中包含外部的JavaScript文件
<script src="example.js"></script>
// html中无效,xhtml中有效
<script src="example.js"/>
注意
- 使用了src的script标签,就不能写行内的代码了,否则行内的代码会被忽略
<script src="example.js">
console.log('123123') // 会被忽略
</script>
可以包含来自外部域的JavaScript文件
没有async和defer时,javasript从上到下依次解释,必须等上一个解析完才可解析下一个
将script放到head中,会导致页面等待js加载完,才加载页面.页面会空白一段时间,体验不好,将script放到页面的底部,加载完页面以后才加载js.体验会好些
推迟执行脚本
- defer: 立即下载,延迟执行
- 加载后,按照他们出现的顺序执行
异步执行脚本
- async: 立即下载
- 加载后,不一定按照他们出现的顺序执行
动态执行脚本
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);
行内代码和外部文件
尽可能的使用外部文件,理由如下:
- 可维护性:所有的js代码放到一起,易于维护.
- 缓存:浏览器会根据特定的设置缓存所有外部链接的JavaScript文件.意味着两个页面使用同一个文件,只需要下载一次.
- 适应未来:外部javascript文件在xhtml和html使用方式是一样的.
文档模式
// HTML5
<!DOCTYPE html>
// 其他的暂时不看,2021很少遇到
<noscript>元素
- 浏览器不支持脚本
- 浏览器对脚本的支持被关闭
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
