HTML中使用JS

最新推荐文章于 2024-06-10 20:53:57 发布

晓之卫

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量220

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u011116244/article/details/73550811

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、JS的组成部分：一、核心（ECMAScript）二、文档对象模型（DOM）三、浏览器对象模型（BOM）

2、JS解析器对<script>内所有代码解析完成后，页面中的其他内容才会被浏览器加载或显示

3、浏览器遇到</script>会认为是结束标识，代码中若出现则用转义字符“\”解决

<script type="text/javascript">
	function sayScript(){
alert("<\/script>");
}
</script>

4、带src属性的<script>元素若包含了嵌入的代码，则嵌入的代码失效，下载并执行外部脚本

5、现在Web应用一般都把全部JS引用放在<body>元素中页面内容的后面，这样在解析包含的JS代码前，页面内容将完全呈现在浏览器中，让用户感觉打开页面速度加快

<!DOCTYPE html>
<html>
<head>
	<title>标题</title>
</head>
<body>
	<!-- 代码内容 -->
	<script type="text/javascript" src="example1.js"></script>
	<script type="text/javascript" src="example2.js"></script>
</body>
</html>

6、延迟脚本

虽然<script>元素写在<head>中，但其中的脚本将延迟到遇到</html>标签后再执行，先于DOMContentLoaded事件（现实当中不一定在DOMContentLoaded事件触发前执行，最好只包含一个延迟脚本）

<!DOCTYPE html>
<html>
<head>
      <title>标题</title>
      <script type="text/javascript" defer="defer" src="example1.js"></script>
      <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
      <!-- 代码内容 -->
</body>
</html>

7、异步脚本

不保证脚本按顺序执行，因此要确保多个脚本之间互不依赖；目的是不让页面等待脚本下载和执行，所以异步脚本加载期间不要修改DOM；异步脚本一定在页面的load事件前执行，但在DOMContentLoaded事件前后触发不确定

<!DOCTYPE html>
<html>
<head>
      <title>标题</title>
      <script type="text/javascript" async src="example1.js"></script>
      <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
      <!-- 代码内容 -->
</body>
</html>

8、外部文件方式文件只需下载一次，快速高效

9、文档模式：通过文档类型（doctype）切换实现；一、混杂模式（不推荐）二、标准模式三、准标准模式：（1）过度型（2）框架集型；标准与准标准差异很小，基本可以忽略不计

10、<noscript>元素：当浏览器不支持脚本或支持脚本但被禁用时触发显示其中内容

<!DOCTYPE html>
<html>
<head>
      <title>标题</title>
      <script type="text/javascript" async src="example1.js"></script>
      <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
      <!-- 代码内容 -->
      <noscript>
	    <p>本页面需要浏览器支持（启用）JS。</p>
      </noscript>
</body>
</html>