HTML中的JavaScript(完结篇,附前三篇)

简介: HTML中的JavaScript(完结篇,附前三篇)

行内代码与外部文件


我们都知道,可以直接在HTML里面写入JavaScript,不过这看起来比较臃肿,所以我们一般都是单独写一个JavaScript的外部文件用于导入进去,为啥要这么做呢


使用外部JavaScript的理由


  • 可维护性

如果我们在HTML里面写入JavaScript,你将会发现如果我们想改动一个页面,上下分析起来会很麻烦因为有时候我们还会牵扯到CSS文件),如果我们都用一个目录来管理我们的JavaScript文件,并且做好命名规范,就会更加容易维护,开发者也能提高开发效率

  • 缓存

我们在前几个系列提高过:浏览器会根据特定的设置缓存所有外部链接的JavaScript文件,这意味着如果两个页面都应用到同一个文件里面,则只需要下载一次,大大加快了页面加载速度

  • 适应未来

如果我们能够把JavaScript放到外部文件中,我们就不用考虑XHTML或前面提到的注释黑科技,包含外部JavaScript文件的语法在HTMLXHTML中是一样的

我们在配置浏览器请求外部文件时,要重点考虑的一点就是占用带宽,在SPDY/HTTP2中,消耗已经显著降低


举个栗子


<script src="demo1.js"></script>
<script src="demo2.js"></script>
<script src="demo3.js"></script>
<script src="demo4.js"></script>

后续页面可能会包含下面的脚本

<script src="demo5.js"></script>
<script src="demo6.js"></script>
<script src="demo7.js"></script>
<script src="demo8.js"></script>

我们在执行初次请求的时候,如果浏览器支持SPDY/HTTP2,我们就可以从同一个地方去的一批文件并将他们逐个放到浏览器缓存中。我们从浏览器的角度来看,通过SPDY/HTTP2获取所有这些独立的资源与获取一个大JavaScript文件的延迟差不多。在第二个页面请求时,由于我们已经把应用程序切割成了轻量可缓存的文件 ,第二个页面也依赖的某些组件此时已经存在于浏览器缓存中了


额外补充


当然,如果我们这里假设浏览器支持SPDY/HTTP2,只有比较新的浏览器才满足,如果还想支持老版本的浏览器,那还是用一个大文件比较合适


文档模式


身世背景


IE5.5发明了文档模式,可以使用doctype切换文档模式,一开始有两种,分为:混杂模式标准模式前者像IE5一样,后者让IE具有兼容标准的行为。虽然这两种模式主要区别只体现在通过CSS渲染的内容方面,但是对JavaScript也有一定的关联影响

在IE初次支持文档模式切换之后,出现了第三种文档模式:准标准模式,这种模式下的浏览器支持很多标准的特性,但是没有标准规定的那么严格,主要区别在于如何对待图片元素周围的空白(在表格中使用图片时最为明显)


混杂模式


混杂模式在所有浏览器中都以省略文档开头的doctype声明作为开关,这种约定不合理! 因为混杂模式在不同浏览器中的差异非常大,不使用 “科技与狠活” 根本就没有浏览器一致性可言

<!-- HTML 4.01 Script -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dcd">
<! -- XHTML 1.0 Script -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Script//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dcd">
<!-- HTML5 -->
<!DOCTYPE html>

准标准模式通过过渡性文档类型Transitional)和框架集文档类型Frameset)来触发


<noscript>元素


由于早期的浏览器不支持JavaScript,所以我们需要一个页面优雅降级处理方案,所以,<noscript>应运而生,用于给不支持JavaScript的浏览器提供替代内容,但是现在主流的浏览器都开始支持JavaScript了,不排除仍然有些浏览器不支持JavaScript,所以对它们来说,这个元素仍然有它的用处

<noscript>元素可以包含仍和可以出现在<body>中的HTML元素,<script>除外,在下面两种情况下,浏览器会显示<noscript>中的内容

  • 浏览器不支持脚本
  • 浏览器对脚本的支持被关闭

如果任何一个条件被满足,包含在<noscript>中的内容就会被渲染,否则,浏览器不会渲染<noscript>中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script defer="defer" src="demo1.js"></script>
    <script defer="defer" src="demo2.js"></script>
</head>
<body>
<noscript>
    <p>This page requires a JavaScript-enabled browser. </p>
</noscript>
</body>
</html>

这个例子是在脚本不可用的时候让浏览器显示一句话,如果浏览器支持脚本,用于永远不会看见这句话


小结


JavaScript是通过<script>元素插入到HTML页面中的,这个元素可以把JavaScript代码嵌入到HTML,跟其它标记混合在一起,也可以用于引入保存在外部文件的JavaScript

  • 要包含外部的JavaScript,咱就得把src属性设置为包含文件的URL,文件跟网页可以在同一台服务器上,也可以位于不同的域
  • 所有的<script>元素都会按照出现顺序依次执行,在不使用deferasync的情况下,代码必须严格按照次序执行
  • 对于不推迟的及哦啊本,浏览器必须完全解释完位于<script>中的代码,然后接着渲染,所以我们通常把<script>元素放到页面末尾,介于主内容之后及</body>标签之前
  • 可以使用defer属性把脚本推迟到文档渲染完毕之后再执行,推迟的脚本原则上按照它们被列出的次序执行
  • 可以使用async属性表示脚本不需要等待,同时也不阻塞文档渲染,即采用异步加载,但是异步加载不能保证按照它们出现的先后次序依次执行
  • 通过使用<noscript>元素,可以指定在浏览器不支持脚本时显示的内容,如果浏览器支持并且开启脚本,则<noscript>元素中的任何内容都不会被渲染
相关文章
|
3月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
3月前
|
JavaScript 前端开发
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
用html+javascript打造公文一键排版系统12:删除附件说明中“附件:”里的空格
|
22天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
35 3
|
25天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
39 4
|
24天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
54 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
95 6
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
117 1
|
3月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
3月前
|
小程序 JavaScript 前端开发
你的生日是星期几?HTML+JavaScript帮你列出来
你的生日是星期几?HTML+JavaScript帮你列出来
|
2月前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
19 0