<script>
标签的由来
- 在当初开发JavaScript的时候,Netscape公司要解决如何让JavaScript既能与HTML页面共存,又不影响页面在浏览器中显现的效果,后来为web增加统一的脚本支持
<script>
的位置
-
<script>
可以放到HTML中的任意位置,因为代码从上而下执行。不同的位置,JavaScript开始执行的时候也不同 -
虽然可以放在不同位置,但我们一般将
<script>
标签写到<head>
中<title>
下面。(和style标签有点像)<head> <title>标题</title> <script src=""></script> </head>
<script>
放在<head>
中意味着必须等待全部的JavaScript加载完毕才会执行<body>
标签里面,才会显示内容,页面就会出现延迟或者空白,可以使用属性defer解决,但是不是唯一方法,还有很多解决方法
-
当js代码可以等待
<body>
里面的内容加载完毕后再加载js可以使用defer
属性,但是一般建议把<script>
放到</body>
上面,一样可以达到同样的效果,内嵌或者外部都可以
<script>
的属性
-
async:表示应该立即下载脚本,但不应妨碍页面其他操作,比如下载其他资源或等待加载其他脚本,只对外部脚本文件有效,执行顺序是按照你加载的js文件执行
<script src="./main.js" async="async"></script>
-
defer:表示脚本可以延迟到文档完全被解析和显示后再执行。只对外部脚本文件有效,执行顺序不一定是按照加载的js文件顺序执行
<script src="./main.js" defer="defer"></script>
-
src:表示要执行代码的外部文件
如何使用<script>
方式
-
嵌入代码:在
<head>
中的<script>
中直接写JavaScript代码<head> <title>标题</title> <script> js代码 </script> </head>
-
外部引用:创建一个.js后缀的文件,在文件里面写JavaScript,通过src引入这个js文件
- 创建mian.js文件,在里面写js代码
<head> <title>标题</title> <script src="./main.js"></script> </head>
-
建议使用外部引用,使用外部引用有如下好处
- 可维护:HTML与JavaScript分离,易于修改和美观
- 可缓存:两个页面JavaScript相同,直接引用即可,不用重复编写
- 响应未来:未来肯定是外部引用作为主导
-
JavaScript严格区分大小写
文档模式
-
整个HTML文件包括js有两种模式混杂模式和标准模式
- 混杂模式:影响css和JS,不同浏览器显示的不一样
- 标准模式
<!DOCTYPE html>
:这种模式下的浏览器特征很多符合标准
-
如果文档在开头的时候没有
<!DOCTYPE html>
,默认混杂模式
<noscript>
- 用在浏览器不支持或者禁用js的时候显示的内容
- 和
<script>
一样,不过里面的内容是在浏览器无法使用js的时候才会出现,可以使用sj的时候是不会出现