您现在的位置:首页 >> 前端 >> 内容

关于script元素的两三点

时间:2016/11/28 9:25:00 点击:

  核心提示:1、script元素简介script元素由Netscape创造,在Netscape Navigator 2中首先实现。之后被加入到正式的HTML规范中。HTML 4.01定义了如下6个属性:1、asy...

1、script元素简介
script元素由Netscape创造,在Netscape Navigator 2中首先实现。之后被加入到正式的HTML规范中。HTML 4.01定义了如下6个属性:
1、async:可选。表示应立即下载脚本,但不应妨碍页面中的其他操作,即异步脚本。
2、charset:可选。表示通过src属性指定的代码的字符集,因为大多数浏览器会忽略它的值,因此很少人用这个属性。
3、defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部脚本有效。
4、language:已废弃。
5、src:可选。表示包含执行代码的外部文件。
6、type:可选。表示编写代码使用的脚本语言的内容类型,通常使用的是“text/javascript”。如果没有指定属性值,默认值依旧是text/javascript。

2、script元素使用的两种方式
A.直接在页面中嵌入JavaScript代码:




<script type="text/javascript">
    alert("Hi!");
</script>

运行结果如下:
关于script元素的两三点

!!需要注意的是:使用嵌入式javascript时,不要在代码任何地方出现字符串。如果将上述js代码换成如下所示:

<script type="text/javascript">
    alert("</script>");

则运行结果如下:
关于script元素的两三点
原因是浏览器遇到字符串时,会误认为是结束标签,解决办法是把这个字符串分为两个部分:

<script type="text/javascript">
    alert("<\/script>");
</script>

或是如下分成两个字符串:

<script type="text/javascript">
    alert('<'+'/script>');
</script>

B.包含外部javascript文件:




<script type="text/javascript" src="Example1.js"></script><script type="text/javascript" src="Example2.js"></script>

script元素放在head中,意味着必须等到全部javascript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容,这无疑会导致浏览器在呈现页面时出现明显的延迟。
所以一般将script引用放在body中,如下例所示:




<script type="text/javascript" src="Example1.js"></script><script type="text/javascript" src="Example2.js"></script>

这样,在解析javascript代码之前,页面内容会呈现在浏览器中。

上文所提的defer属性(只可用于外部文件)可用于延迟脚本,defer表示告诉浏览器立即下载,但是延迟执行:




<script type="text/javascript" defer="defer" src="Example1.js"></script><script type="text/javascript" defer="defer" src="Example2.js"></script>

如上,脚本会延迟到整个页面加载完毕后再运行,HTML5规范要求脚本按照它们出现的先后顺序执行,所以,第一个延迟脚本会先于第二个延迟脚本执行。

asnyc属性与defer属性类似,告诉浏览器立即下载文件,但与defer不同的是,标记为asnyc的脚本并不保证按照指定它们的先后顺序执行。

3、noscript元素
在不支持javascript的浏览器或者禁用javascript时,noscript元素中的内容会显示,否则不显示。




						

Tags:关于 于S SC CR 
作者:网络 来源:daydaysky的