客户端JS——“Web浏览器中的JS”

1 客户端JavaScript

window对象本身也有一个名为window的属性,指向window对象

window.window.window.location.pathname;

2 在HTML里嵌入JavaScript

2.1 script元素

在XHTML中运用JavaScript,则须要放到一个CDATA部份:

<script><![CDATA[/*code...*/]]></script>

2.2 剧本范例

把type属性设置为阅读器不能辨认的值,即可在html页面中嵌入恣意文本内容。

<script type="text/xxx"> //type设置为不能被阅读器辨认的属性值
    hello scripter;
</script>
<script>
"use strict"
var s = document.getElementsByTagName("script")[0];
console.log(s.text); //用text属性就能够猎取该数据
</script>

2.3 URL中的JavaScript(防止运用)

  • javascript:协定限定符

  • 能够用void操纵符强迫函数挪用或给表达式给予undefined值

它被当作一个零丁的一行代码看待,语句之间必须用分号离隔。

<a href="javascript: new Date().toLocaleString()">w time ist?</a>

书签

书签就是一个保留起来的URL。假如书签是javascript:URL,那末保留的就是一小段剧本,叫做bookmarklet。只需书签不返回值,它就能够操纵当前显现的任何文档。

3 JavaScript递次的实行

3.1 同步、异步和耽误的剧本

script标签能够有defer和async属性,能够转变剧本的实行体式格局。这些属性只在和src属性团结运用时才有用:

  • async 属性划定一旦剧本可用,则会异步实行。async 属性仅适用于外部剧本(只要在运用 src 属性时)。

  • defer 属性划定是不是对剧本实行举行耽误,直到页面加载为止。

3.2 客户端JavaScript时候线

  • Web阅读器建立Document对象,并最先剖析Web页面,剖析html元素和它们的文本内容后增加Element对象和Text节点到文档中。在这个阶段documen.readystate属性值是“loading”

  • 当HTML剖析器碰到没有async和defer属性的script元素时,它把这些元素增加到文档中,然后实行行内或外部剧本。这些剧本会同步实行,而且在剧本下载(假如须要)和实行时剖析器会停息。如许剧本就能够用documen.wrte()来把文本插进去到输入流中。剖析器恢复时这些文本会成为文档的一部份。同步剧本常常简朴定义函数和注册背面运用的注册时候处置惩罚递次,但他们能够遍历和操纵文档树,由于在他们实行时已存在了。如许,同步剧天性够看到它本身的script元素和它们之前的文档内容。

  • 当剖析器碰到设置了async属性的script元素时,它最先下载剧本文本,并继承剖析文档。剧本会在它下载完成后尽快实行,然则剖析器没有停下来等它下载。异步剧本制止运用document.write()要领。它们能够看到本身的script元素和它之前的一切文档元素,而且能够或痛快不能够接见其他的文档内容。

  • 当文档完成剖析,document.readyState属性变成“interactive”。

  • 一切有defer属性的剧本,会桉它们在文档里的涌现递次实行。异步剧天性够也会在这个时候实行。耽误剧天性接见完整的文档树,制止运用document.write()要领。

  • 阅读器在Document对象上触发DOMContentLoaded事宜。这标志着递次实行从同步剧本实行阶段转换到事宜驱动阶段。但要注重,这时候能够另有异步剧本没有实行完成

  • 这时候,文档已完整剖析完成,然则阅读器能够还在守候其他内容载入,如图片。当一切这些内容完成载入时,而且一切异步剧本完成载入和实行,document.readyState属性转变成“complete”,Web阅读器触发Window对象上的load时候。

  • 今后刻起,会挪用异步事宜,以异步相应用户输入事宜、收集事宜、计时器逾期等。

4 兼容性和互用性

4.1 功用测试

罕见的功用测试:

if (element.addEventListener) {
    element.addEventListener("keydown", handler, false);
    element.addEventListener("keypress", handler, false);
} else if (element.attachEvent) {
    element.attachEvent("onkeydown", handler);
    element.attachEvent("onkeypress", handler);
} else {
    element.onkeydown = element.onkeypress = handler;
}

4.2 奇异形式和规范测试

document.compatMode属性,假如为”CSS1Compat”,则是在规范形式,假如在”BackCompat或undefined”,则是在奇异形式。

4.3 阅读器测试

早前一般须要做阅读器测试,即运用Navigator对象。

4.4 IE里的前提诠释

IE中的前提诠释(Conditionalcomments)对IE的版本和IE非IE有优异的辨别才能,是WEB设想中经常使用的hack要领。

前提诠释只能用于IE5以上。

  • gt :greater than,挑选前提版本以上版本,不包括前提版本

  • lt : lessthan,挑选前提版本以下版本,不包括前提版本

  • gte :greater than or equal,挑选前提版本以上版本,包括前提版本

  • lte :less than or equal,挑选前提版本以下版本,包括前提版本

  • ! : 挑选前提版本之外一切版本,不管上下

运用要领:

  • <!--[if IE 6]>仅IE6可见<![endif]-->

  • <!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]-->

  • <!--[if lt IE 5.5]>仅IE 5.5以下可见<![endif]-->

  • <!--[if gte IE 5.5]>IE 5.5及以上可见<![endif]-->

  • <!--[if lte IE 5.5]>IE 5.5及以下可见<![endif]-->

  • <!--[if !IE 5.5]>非IE 5.5的IE可见<![endif]-->

  • <!--[if !IE]><!--> 您运用不是Internet Explorer <!--<![endif]-->

  • <!--[if IE 6]><!-->您正在运用InternetExplorer version 6或许一个非IE 阅读器<!--<![endif]-->

IE的JavaScript诠释器也支撑前提诠释:

/*@cc_on
@if(@_jscript)
alert("You are using Internet Explorer");
@else*/
alert("you are not using Internet Explorer");
/*@end
@*/
    原文作者:JS菌
    原文地址: https://segmentfault.com/a/1190000004916442
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞