JavaScript读书笔记01 // 能不能改

JavaScript && ECMAScript

通常JavaScrip和ECMAScript被用来表达相同的含义，但是其实JavaScript的含义要比ECMA-262标准钟规定的要多的多，ECMA标准只用来规范了语言的基础，一个完整的JavaScript实现用下面三个部分组成：
- 核心(ECMAScript)
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
ECMAScript：定义了这门语言的基础，与具体的Web浏览器没有关系，Web浏览器只是ECMAScript实现可能的宿主环境之一，Node则是另外一种宿主环境。
DOM：就是对Html文档中的内容进行抽象和概念化的方法。通过DOM就可以提供查询和操作Web文档中的某些实际内容了，最常见的就是表单的验证了，可以直接获取表单中的某个字段，判断合法与否。
BOM: 通过BOM可以访问浏览器现实的页面以外的部分，可以操作浏览器窗口。

在HTML中使用JavaScript

`script`元素

在HTML中使用JavaScript的主要的方法就是使用 script元素，主要是两种途径：

直接内嵌代码
链接外部代码

直接内嵌代码

//hello.html
<script type="text/javascrip">
	function sayHi(){
		alert("hello world")
	}
</script>

链接外部代码

//hello.html
<script type="text/javascrip" src="hello.js"></script>

//hello.js
function sayHi(){
	alert("hello world")
}

两种方式不能共存，如果在有src的script元素中添加了嵌入的javascript代码，这些代码都会被忽略掉

script属性

asyn：可选，立即下载脚本但是不能影响页面中的其他操作，只对外部链接代码有效
charset：可选，src属性指定的代码的字符集，被大多数浏览器忽略而很少有人用
defer：可选，脚本可以延迟到文档完全被解析和显示后再执行，只对外部链接代码有效
language：已废弃，都是javascript
src：可选，指向要执行的外部代码的文件
type：可选，默认为text/javascript

无论那种方式包含代码，只要不存在defer和asyn属性，浏览器都会按照script元素出现的顺序来对他们以此解析。

标签的位置

按照传统的做法是script元素放到head元素中，但这也导致必须得等所有的javascript都被下载执行完成之后再开始呈现页面，可能会导致浏览器加载页面的延迟。所以现代的Web程序一般把全部的JavaScript引用放到body元素中页面内容的后面

延迟脚本

HTML4.01引入了defer属性，这个属性就是表明脚本执行的时候不影响页面的构造，也就是脚本会延迟到整个页面解析完成之后再运行，所以也可以放到head元素中，加上defer属性即可:

//hello.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello</title>
	<script type="text/javascript" defer="defer" scr="hello.js"></script>
</head>
<body>
	<!-- 这里是内容 -->
</body>
</html>

异步脚本

HTML5引入了async属性，跟defer的区别在于，asyc告诉浏览器立即下载文件和执行，同事异步加载页面的其他内容，也保证了不影响页面中其他内容的加载，asyn也不能保证脚本文件的执行顺序:

//hello.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello</title>
	<script type="text/javascript" async="async" scr="hello.js"></script>
	<script type="text/javascript" async="async" scr="hello1.js"></script>
</head>
<body>
	<!-- 这里是内容 -->
</body>
</html>

不能保证hello.js在hello1.js之前执行

`noscript`元素

会在以下情况显示出来，此外都不会显示其中内容

浏览器不支持脚本
浏览器支持脚本，但是禁用了

//hello.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello</title>
</head>
<body>
	<!-- 这里是内容 -->
	<noscript>
		<p>本页面需要浏览器支持（启动）JavaScript</p>
	</noscript>
</body>
</html>

在脚本无效的时候会显示一条信息，而在开启了脚本的浏览器中，用户永远看不到这条信息。

能不能改

JavaScript读书笔记01