JS红宝书之前言与第一二章节
2021-01-11 本文已影响0人
莘栀
定位
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是解释型语言
编译器：代码执行之前进行编译，生成中间文件（例如Java语言）
解释器：运行时进行及时解释，并立即执行（例如 JS脚本语言）
编译or解释.jpg
扩展二：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>
