文章目录
第一章什么是JavaScript
感觉不是很重要哈哈哈,但是确实很有必要了解呀~
1.1、JavaScript历史回顾
诞生原因?:为验证简单的表单而需要大量与服务器的往返通
信
填写完表单,单击“提交”按钮,等 30 秒处理,然后看到一条消息,告诉你有一个必填字段没填。
谁来做的呢?:网景(当时引领技术革新的公司),JS之父- Brendan Eich(布兰登·艾克),其实还和Sun公司结为开发联盟,共同完成
做的事情?:开发一个客户端脚本语言来处理这种简单的数据验证
具体的过程?:
网景 | 微软
Netscape Navigator 2中第一版 JavaScript
Netscape Navigator 3中 JavaScript1.1
不久 IE3包含自己名为 JScript(叫这个名字是为了免与网景发生许可纠纷)的 JavaScript 实现
打击 <--------------------- 重磅进入 Web 浏览器领域
两个版本的 JavaScript:Netscape Navigator 中的 JavaScript,以及 IE 中的 JScript带来的问题->没有规范其语法或特性的标准
标准化:
谁?:Ecma TC39(欧洲计算机制造商协会-第 39 技术委员会)
干什么?:“标准化一门通用、跨平台、厂商中立的脚本语言的语法和语义”
结果?: ECMA-262(发音为“ek-ma-script”)新的脚本语言标准。
最终进程:
标准出来1年后,我出生前一年1998 年,国际标准化组织(ISO)和国际电工委员会(IEC)也将 ECMAScript 采纳为标准(ISO/IEC-16262)。自此以后,各家浏览器均以 ECMAScript 作为自己 JavaScript 实现的依据,虽然具体实现各有不同。
1.2、什么是JavaScript?
JavaScript(简称“JS”)
- 是一门用来与网页交互的脚本语言。 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。
- 虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript
- 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
1.3、JavaScript与ECMAScript的关系?
基本同义但准确来说是一种包含关系(看图)
JavaScript组成:
- 核心ECMAScript,描述了该语言的语法和基本对象。
- 文档对象模型(DOM,Document Object Model),是一个应用编程接口(API),用于在 HTML 中使用扩展的 XML。DOM 将整个页面抽象为一组分层节点。HTML 或 XML 页面的每个组成部分都是一种节点,包含不同的数据。DOM 通过创建表示文档的树,让开发者可以随心所欲地控制网页的内容和结构。使用 DOM API,
可以轻松地删除、添加、替换、修改节点。 - 浏览器对象模型(BOM),用于支持访问和操作浏览器的窗口。
1.4、JavaScript的不同版本?
多数浏览器对 JavaScript 的支持,指的是实现 ECMAScript 和 DOM 的程度。
原因:Netscape/Mozilla仍然沿用这种版本方案。而 IE 的 JScript 有不同的版本号规则。这些 JScript 版本与上表提到的 JavaScript 版本并不对应。
1.5、第一章小结
JavaScript 是一门用来与网页交互的脚本语言,包含以下三个组成部分。
- ECMAScript:由 ECMA-262 定义并提供核心功能。
- 文档对象模型(DOM):提供与网页内容交互的方法和接口。
- 浏览器对象模型(BOM):提供与浏览器交互的方法和接口。
JavaScript 的这三个部分得到了五大 Web 浏览器(IE、Firefox、Chrome、Safari 和 Opera)不同程度的支持。
所有浏览器基本上对 ES5提供了完善的支持,而对ES6和ES7的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同,但对 Level 3 的支持日益趋于规范。
HTML5 中收录的 BOM 会因浏览器而异,不过开发者仍然可以假定存在很大一部分
公共特性。
第二章HTML 中的 JavaScript
2.1、使用</Script>元素
2.1.1 标签位置
- </head>标签:
过去</vscript> 元素都被放在页面的 </head> 标签内,意味着必须把所有 JavaScript 代码都下载、解析和解释完成后,才能开始渲染页面。 - </body> 标签:
现代 Web 应用程序通常将所有 JavaScript 引用放在 </body> 元素中的页面内容后面。页面会在处理 JavaScript 代码之前完全渲染页面。
用户会感觉页面加载更快了,因为浏览器显示空白页面的时间短了。
2.1.2 推迟执行脚本
defer 属性:
- 告诉浏览器立即下载,但延迟执行。
- 会在浏览器解析到结束的<\html> 标签后才会执行。
- 只对外部脚本文件才有效。
2.1.3 异步执行脚本
async 属性(不推荐):
- defer 类似。只适用于外部脚本,都会告诉浏览器立即开始下载。
- 与 defer 不同的是,标记为 async 的脚本并不保证能按照它们出现的次序执行。例子中,第二个脚本可能先于第一个脚本执行
- 告诉浏览器,不必等脚本下载和执行完后再加载页面,同样也不必等到
该异步脚本下载和执行后再加载其他脚本。 - 异步脚本保证会在页面的 load 事件前执行,但可能会在 DOMContentLoaded (参见第 17 章)之前或之后。
2.1.4 动态加载脚本
除了 </script> 标签,还有其他方式可以加载脚本。因为 JavaScript 可以使用 DOM API,所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。
2.1.5 XHTML 中的变化
可扩展超文本标记语言(XHTML,Extensible HyperText Markup Language)是将 HTML 作为 XML的应用重新包装的结果。
这种格式适用于所有现代浏览器。不支持 CDATA 块的非 XHTML兼容浏览器都行。
2.2、行内脚本与外部脚本的比较
推荐使用外部文件:
- 可维护性。JavaScript 代码如果分散到很多 HTML 页面,会导致维护困难。而用一个目录保存所有 JavaScript 文件,则更容易维护,这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
- 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件,这意味着如果两个页面都用到同一个文件,则该文件只需下载一次。这最终意味着页面加载更快。
- 适应未来。通过把 JavaScript 放到外部文件中,就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。
2.3、确保 JavaScript 不可用时的用户体验
</noscript> 元素:
- 浏览器不支持脚本;
- 浏览器对脚本的支持被关闭。
- 任何一个条件被满足,包含在 </noscript> 中的内容就会被渲染。否则,浏览器不会渲染 </noscript>中的内容。
2.4、第二章小结
JavaScript 是通过 </script> 元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到HTML 页面中,跟其他标记混合在一起,也可用于引入保存在外部文件中的 JavaScript。本章的重点可以总结如下。
- 要包含外部 JavaScript 文件,必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。
- 所有 </script> 元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下,包含在 </script> 元素中的代码必须严格按次序解释。
- 对不推迟执行的脚本,浏览器必须解释完位于 </script> 元素中的代码,然后才能继续渲染页面的剩余部分。为此,通常应该把 </script> 元素放到页面末尾,介于主内容之后及 </body> 标签之前。
- 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
- 可以使用 async 属性表示脚本不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
- 通过使用 </noscript> 元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本,则 </noscript> 元素中的任何内容都不会被渲染。