javaScript基础知识
javaScript 是脚本语言
是一种轻量级的编程语言。
是可插入 HTML 页面的编程代码。
插入 HTML 页面后,可由所有的现代浏览器执行。
javaScript由3个不同的不封组成:核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)
1.1 ECMAScript:定义了JavaScript基础。web浏览器只是ECMAScript实现的宿主环境之一(宿主环境)
组成部分:a 语法 b 类型 c 语句 d 关键字 e 保留字 f 操作符 g 对象
ECMA: European Computer Manufacturers Association 欧洲计算机制造商协会
ECMAScript协议标准由39号技术委员会制定(TC39,Technical Committee#39)
1.2 DOM : Document Object Model 是针对XML但经过拓展用于HTML的应用程序接口(API,Application Programming Interface)
DOM把整个页面映射为一个多层次节点结构,HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点都包含某种
不同类型的数据。
W3C(World Wide Web Consortium,万维网联盟:负责制定通信 标准)着手规划DOM
DOM的级别: DOM1由两模块组成 a,DOM核心(DOM Core) 和 DOM HTML
DOM核心:映射基于XML的文档结构,以便简化对文档的任意部分访问和操作
DOM HTML模块则在DOM核心基础上加以拓展,添加正对HTML的对象和想法
DOM2: 在DOM1基础上引入 DOM试图(DOM Views):定义了跟踪不同文档试图的接口。
DOM 事件(DOM Events):定义了事件和事件处理的接口。
DOM样式(DOM Traversal and Range):
定义了遍历和操作树的接口。
DOM3:在DOM2的基础之上 DOM加载和保存(DOM Load and Save):引入以统一方式加载和保存文档的方式接口
DOM验证(DOM Validation):定义了验证文档方法的接口
对DOM核心的拓展
1.3BOM: Browser Object Model。支持可以访问和操作浏览器窗口浏览器对象模型(其中window对象和navigator对象)
从根本上讲,BOM只处理浏览器与窗口和框架,惯常也讲所有针对浏览器的JavaScript拓展算作BOM的一部分(如下)
弹出浏览器窗口的功能
移动、缩放、和关闭浏览器窗口的功能
提供浏览器详细信息的Navigator对象
提供浏览器所加载页面的详细信息的location对象
提供用户显示器分辨率详细信息的screen对象
对cookies的支持
像XMLHttpRequest和IE的ActiveXObject这样的自定义对象的支持
------------------------------------------------------------------------------
在HTML中使用JavaScript
本章主要内容:<script>元素(重点)
嵌入代码与外部文件
文档模式
2.1<script>元素
属性:
async:可选属性,表示应该立即下载脚本,但不妨碍页面中的其它操作,比如下载其他资源或等待加载其他脚本
注意,只对外部脚本文件有用
charset:可选属性,表示通过src属性指定的代码字符集。大多数浏览器会忽略这个属性值。故这一属性基本不用
defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行
注意,只对外部脚本文件有效
src: 可选。表示包含要执行代码的外部文件
外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:
外部脚本不能包含 <script> 标签。【见于W3C学习网站】
type:可选,表示编写代码使用脚本语言的内容类型(也称为MIME类型)。实际上服务器在传送javaScript
文件是使用的MIME类型通常是application/x-javascript,在type设置这一值
application/x-javascript脚本会忽略,type的值用的最多的是
text/javascript,这一值不是必须的许多浏览器默认值就是text/javascript
使用<script>元素的方式有两种:直接在页面中嵌入JavaScript代码
包含外部JavaScript文件
21.1.1<script>标签的位置:
传统做法,所有<script>元素放在<head>元素中,
目的:把所有外部文件(包括CSS和JavaScript文件)的引用都放在相同的地方
在文档<head>元素中包含的javascript文件意味着:必须等到全部JavaScript代码被下载、
解析 、和执行完成之后,才能呈现页面内容(浏览器遇到<body>标签时才开始呈现内容)对于那些需要很多JavaScript
代码的页面导致呈现页面出现明显延迟(延迟期间浏览器窗口是一片空白)
故 现代Web应用程序讲全部JavaScript引用放在<body>元素中页面内容的后面【在解析JS代码
之前,页面内容将呈现在浏览器中。用户会因浏览器窗口的空白页面缩短而感到打开页面的速度加快】
注意 在<script>元素内部不要出现</script>这表示结束标签 会报错。如需用到需要使用转义字符“\”
例子 :alert{“<\/script>”}
如<script>元素中包含外部文件 src属性是必须的 外部文件会加载到当前页面当中
注意:<script type="text/javascript" src="example.js"/> 不符合HTML
规范 不能正确解析
外部的JavaScript文件带有.js拓展名。但不是必须的、
带有src属性的<script>元素不应该在<script></script>之间再包含JavaScript代码,若包含
嵌入的代码会忽略,只会执行外部脚本文件
src属性可以是指向HTML页面所在域外的某个域中完整的URL,
<script type=“text/javascript”
src="http://www/somewhere.com/afile/js"><script>
位于外部域中的代码会被加载和解析,像这些代码位于加载它们的页面中一样、利用这一点可以在必要时通过不同域来提供JavaScript
文件,不过可要小心,要么你是域的所有者,要么那个域的所有者值的信赖
浏览器会按照<script>元素在页面中的出现的先后顺序对他们进行依次解析{只要不存在 defer 和async}即第一个
<script>解析完成后,第二个<script>才会被解析,然后第3个,第4个
21.2延迟脚本
<script>标签的defer属性:表明脚本在执行时,不会影响页面的构造即脚本会被延迟到整个页面都解析完毕
后再运行 defer属性相当告诉浏览器立即下载,但延迟执行
理想状态: 多个延迟脚本时 按照他们出现的先后顺序执行,即第一个延迟脚本优先于第二个延迟脚本执行,而这两个
延迟脚本会优先于DOMContentLoaded事件,
现实情况: 多个延迟脚本的执行不是顺序执行也不一定会在DOMContentLoaded事件触发钱执行
故最好只包含一个延迟脚本
注意 defer属性只适用于外部脚本文件, HTML5明确规定
21.3异步脚本
async属性与延迟脚本类似 并告诉浏览器立即下载文件,
不同点: async的脚本并不保证按照指定它们的先后顺序执行、故脚本之间要互不依赖非常重要
使用async目的:不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。故建议几步脚本不要在加载期间修改DOM
异步脚本一定会在页面的load事件之前执行,当可能会在DOMContentLoad事件触发之前或之后执行
注意也只用于 外部文件
21.4 在XHTML中的用法(作者建议不用读,因为现前端开发人员采用HTML5标准)
2.2嵌入代码和外部文件
在HTML页面中最好的做法是使用外部文件来包含JavaScript代码、 有以下优点
可维护性 将所有JavaScript文件放在一个文件夹可以便于维护,也有利于开发人员在不触发HTML标记情况下,
集中精力编辑JavaScript代码
可缓存 浏览器根据具体的设置缓存链接的所有外部JavaScript文件即如果两个页面同时使用同一个文件,那么
该文件只需下载一次,故加快页面的加载速度
适应未来 通过外部文件夹包含JavaScript无需使用前面提到的XHTML和注解hack、
2.3文档模式
通过文档类型(doctype)切换实现的 最初有 混杂模式(quirks mode)和标准模式(standard mode) 模式的不同主要影响
CSS内容的呈现,有时也会影响JavaScript的解释执行
无申明的情况下,默认的是混杂模式
2.4<nonscript>
用于在不支持JavaScript的浏览器中显示替代内容, 1.浏览器不支持脚本 2.浏览器支持,但禁用 在启用了
脚本的情况下浏览器不会解析 <nonscript>中的任何内容