定位
JavaScript 与其宿主关系密切,实际上宿主为 JavaScript 定义了与外界交互的全部API:DOM、网络请求、系统硬件、存储、事件、文件、加密,还有数以百计的其他API。各种浏览器及其 JavaScript 引擎都按照自己的理解实现了这些规范。对 JavaScript 更准确的定位应该是一组浏览器的实现
浏览器及其内核
- Chrome:V8/blink
- Firefox:Gecko/SpiderMonkey
- Safari:WebKit/JavaScriptCore
- 微软:Trident/EdgeHTML/Chakra
JavaScript
- 核心:ECMAScript
- 文档对象模型:DOM;文档对象模型是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点
- 浏览器对象模型:BOM。支持可以访问和操作浏览器窗口的浏览器对象模型
JS的引入方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS引入方式</title>
<script>
// 2.内嵌式
alert('内嵌式 js');
</script>
<!-- 3.引入式 -->
<script src="./outer.js"></script>
</head>
<body>
<!-- 1.行内式 -->
<button onclick="alert('行内式js')">点我</button>
</body>
</html>
<script>标签属性
浏览器解释 <script> 标签内的代码、使用 src 属性引入的(非defer/async声明)js代码的过程中,页面会阻塞(也就是如果 script 放在 head 标签内的话,页面会等到脚本文件下载、解析和解释完成后开始渲染页面(页面在浏览器解析到<body>的其实标签时开始渲染))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入JS</title>
<script>
// 解释这里时按照顺序代码顺序解释,此时页面在等待
alert('Hello World!');
</script>
<!-- 此处会先加载 foo.js 文件,然后加载 bar.js 文件 -->
<script text="java/javascript" src="foo.js"></script>
<script text="java/javascript" src="bar.js"></script>
</head>
<body>
<!-- 此处是页面内容 -->
</body>
</html>
上述内容会导致页面加载延迟,浏览器窗口留白问题。
解决办法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入JS</title>
</head>
<body>
<!-- 此处是页面内容 -->
<!-- 即等页面渲染完毕再加载脚本文件 -->
<script text="java/javascript" src="foo.js"></script>
<script text="java/javascript" src="bar.js"></script>
</body>
</html>
defer 延迟脚本
为 script 声明 defer 属性表明:脚本执行的时候不修改页面结构,即脚本可以在页面完全渲染后执行
保证次序:即 bar 在 foo 之后加载(书上又备注说可能不保证,此处我也不太明白)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入JS</title>
<script text="java/javascript" src="foo.js" defer></script>
<script text="java/javascript" src="bar.js" defer></script>
</head>
<body>
<!-- 此处是页面内容 -->
</body>
</html>
async 异步脚本
async 与 defer都只适用于外部脚本,都会告诉浏览器立即开始下载
不保证次序:bar 和 foo 不一定谁先加载好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入JS</title>
<script text="java/javascript" src="foo.js" async></script>
<script text="java/javascript" src="bar.js" async></script>
</head>
<body>
<!-- 此处是页面内容 -->
</body>
</html>
noscript标签
检测浏览器是否支持 js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JS</title>
<script text="java/javascript">
alert('Hello World!');
</script>
</head>
<body>
<!-- 不支持js 或者 关闭js 会展示该标签 -->
<noscript>
本页面需要浏览器支持(启动)JavaScript
</noscript>
</body>
</html>
扩展一:JS是解释型语言
编译or解释.jpg编译器:代码执行之前进行编译,生成中间文件(例如Java语言)
解释器:运行时进行及时解释,并立即执行(例如 JS脚本语言)
扩展二:script位置问题(DOM案例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script位置</title>
<!--
如果js代码不涉及操作页面元素,可以放前面;
如果需要操作页面元素,则会导致无法获取页面元素
-->
<script>
// 方式二:window.onload()当页面中的结构和内容都加载完成才会执行这里面的代码
// JQ中也有一个对应的方法 $(document).ready(function(){})
window.onload = function() {
let box = document.getElementById('box');
box.style.backgroundColor = 'tomato';
}
</script>
</head>
<body>
<div id="box">啦啦啦</div>
<!-- 方式一:放在页面底部:保证页面结构加载完成才会做这些事情 -->
<!-- <script>
let box = document.getElementById('box');
box.style.backgroundColor = 'tomato';
</script> -->
</body>
</html>
网友评论