02|在HTML中使用JavaScript
对应的文章主题内容如下所示:
- 使用
<script>元素 - 嵌入脚本与外部脚本
- 文档模式对JavaScript的影响
- 考虑禁用JavaScript的场景
其中在一讲到在网页中如果使用JavaScript的话应该如何操作,或许对现在的你来讲,并不陌生,甚至会说:小菜一碟,但是在当时的时候对应的HTML中的Web标准已经不现在一样如此规范和统一了,当初在开发JavaScript的时候,NetScape就一直考虑如何才能够做到JavaScript与HTML页面共存的时候,又不影响页面在其他浏览器中的呈现效果!
如果是你的话,你又会以什么样的角度和观点来看待这件事情或者说这个问题呢?
其实如果说对Web发展史比较理解和感兴趣的话,对应的我们也大体能够想到或者猜到,Web标准,对就是通过标准的支持,就可以让前文中所说到的问题引刃而解,但是前提是,需要一个不断尝试,纠纷和争论的问题,确定最后的方案!
而这个方案,对于现在的你应该不再陌生,就是我们常常使用到的标签之一: <script>
01|<script>元素
向HTML中插入JavaScript最主要的方法其实就是使用<script>元素,首先是由NetScape创造并且在Navigator2中首先实现,后面才慢慢被加入到HTML规范中,你看有强调了标准的重要性和适用性!
HTML4.01为<script>定义了6个属性:
- async:可选 表示应该立即下载脚本但不影响/妨碍页面中的其他操作!
- charset:可选 表示通过src属性指定的代码字符集
- defer:可选 脚本可以延迟到文档完全被解析和显示之后再执行 只支持外部脚本文件(嵌入式文件会被忽略)
- language:已废弃 表示用于编写代码时候使用的脚本语言!
- src:可选 表示包含要执行代码的外部文件
- type:可选 可以看成是language的替代属性,表示编写代码使用脚本语言的内容类型(MIME类型) 其对应的默认值为: text/javascript
对应的<script>有两种使用方式:
- 页面中嵌入JavaScript代码
<script type="text/javascript">
function sayHello(){console.log('Hello Jianshu!');}
</script>
- 包含外部文件使用
<script sc="./main.js"></script>
function SayHello(){
console.log('Welcome to jianshu!');
}
其中有几个需要特别注意的点:
- 包含在内部的代码 会从上往下依次执行!
- 不要再代码任何地方出现
</script>字符串 会让浏览器认为这是结束的 脚本标签从而加载代码的时候产生错误! 因此需要转义符!<\/script> - 包含外部文件使用的时候 记得不能省略闭合标签(在HTML规范中可能会出现问题 从而导致错误!)
- 引入外部文件 扩展名不是必须的,但是推荐使用拓展名 如果没有拓展名就需要通过MIME类型判断 也就是需要通过type属性确定MIME类型!
- 没有定义defer和async属性的时候,浏览器会按照
<script>元素在页面中的位置先后顺序依次进行解析!
01|标签出现的位置
其实对应的<script>标签出现的位置,对我们写代码中的影响也不小,因此我们有必要好好了解,并且学会使用恰当的方式引入或者使用JavaScript/JavaScript文件!
-
<head>元素中包含所有的JavaScript文件!
<head>
<script src="example01.js"></script>
<script src="example02.js"></script>
</head>
其实以上这种方式是非常不推荐的,等到全部的JavaScript代码被下载,解析,执行完成后,才能开始呈现页面的内容!(body标签开始的时候才会呈现内容!) 毫无疑问浏览器在呈现的时候会有明显延迟的同时,延迟期间的浏览器也是一片空白! 因此下面的方式是我们推荐的:
-
<body>标签中使用<script>标签
<body>
<script src="example01.js"></script>
<script src="example02.js"></script>
</body>
在解析包含的JS代码之前,页面的内容已经完全呈现在浏览器中了,用户也回应为浏览器窗口中显示空白页的时间缩短而感到打开页面的速度加快了!
如果说偏偏喜欢上面的第一种,又要没有那么卡顿应该怎么办?
- 使用
<script>中的属性defer属性 立即下载,但是延迟执行
<head>
<script defer="defer" src="example01.js"></script>
<script defer="defer" src="example02.js"></script>
</head>
切记,defer属性只适用于外部脚本文件的引入,但是如果说是 嵌入脚本文件,则对应的defer属性则会被忽略!
除了defer属性,还有一种方式,就是异步脚本的方式引入
- 使用async属性,异步方式引入脚本文件 不让页面等待脚本的下载和执行!
<head>
<script async src="example01.js"></script>
<script async src="example02.js"></script>
</head>
但是需要注意的有两点:
- 两者之间互不依赖
- 不要再夹在其间修改DOM
- 会在页面的load事件之前执行 可能会在DOMContentLoaded事件触发之前或之后执行!
02|XHTML
其中XHTML就是可拓展超文本标记语言,其中做了对应的讲解,但是我们在开发的时候,现在很少使用到XHTML因此这里就不进行阐述了!
03|潜入代码和外部文件
虽然说在HTML中使用嵌入JavaScript代码是没有问题的,但是更好的做法还是使用外部文件的方式包含JS代码,虽然不存在硬性标准,但是支持外部JS包含,优点也不言而喻:
- 可维护性
- 可缓存
- 适应未来
一个是从开发的角度,能够尽量的帮我们减少重复,将文件作为模块,并且能够让我们专注于JavaScript的编写,另外一个是可以借助浏览器缓存的特性,让我们访问网站的时候因为缓存的特性优化我们的上网体验加快加载的速度!第三个是XHTML和HTML包含外部JavaScript的代码的方式都是相同的!更加通用!
04|文档模式
IE5.5引入了文档模式的概念,改概念是通过文档类型切换实现的,也就是通过doctype实现的,最初的两种文档模式分为:混杂模式和标准模式!
- 混杂模式:文档开始出没有对应的文档类型声明,所有的浏览器默认会开始混杂模式
- 标准模式简单来讲就是具体的文档类型声明
其实简单来讲,文档类型声明的具体作用体现在哪里? 体现在决定浏览器以何种方式或者何种标准来解析当前的页面!
05|<noscript> 标签
早期浏览器不支持JavaScript的时候如何让页面平稳的退化?
该问题的解决方案便是 <noscript>了,用在不支持JavaScript的浏览器中显示替代的内容!
包含在该标签的内容在以下情况才会显示出来:
- 浏览器不支持脚本
- 浏览器支持脚本,但是脚本被禁用
<noscript>
<p>
本页面需要浏览器支持(启用)JavaScript!
</p>
</noscript>
这就是第二章的简要内容,如果有什么好的建议,请在评论区告诉我!
