前端进化笔记-JavaScript(一)

发布时间 2023-04-24 11:28:49作者: tripl3T

简介:

实现:三部分
ecmascript语言核心 DOM文档对象模型 BOM浏览器对象模型

DOM:用于html的应用程序接口(API),把整个页面映射成一个多层节点结构。
例如:

<html>
	<head>
		<title>sample page</title>
	</head>
	<body>
		<p>hello world</p>
	</body>
</html>

DOM将代码映射如下:

BOM:可以访问和操作浏览器窗口和一些拓展


使用:

<script>元素属性:

  • async :立即下载脚本,但不妨碍页面中的其他操作,仅对外部文件有效
  • defer :脚本可延迟到文档完全被解析显示后再执行,只对外部文件有效
  • src :包含可执行的外部文件
  • type :表示代码使用的脚本语言类型

<script>使用方式:内部和外部
内部是直接在元素内部写jsp代码即可,外部则需要使用src属性指向一个jsp文件。在使用了外部方式后,元素内部嵌入的代码会被忽视。值得一提的是,src不仅可以指向本地域的
.js文件(甚至都不需要后缀),还可以指向来自当前页面所在域之外的完整URL。
使用外部URL时,要小心恶意的替换文件,在值得信赖的情况下使用!

一般来说<script>元素都放在<head>中,但是由于浏览器在遇到<body>标签才开始显示内容,如果jsp文件过大很容易导致长时间的页面空白。所以把<script>放在<body>
内可能可以缓解这种情况。

defer属性:脚本会被延迟到整个界面都解析完毕后再运行(立即下载,延迟运行),多个的defer属性的元素现实中不一定会按顺序执行(尽管HTML5这样要求),所以最好只有一个延迟脚本

async属性:本身并不保证按顺序执行,所以多个异步脚本要保证他们互不依赖