点击登录
  • 欢迎访问亿浪博客,最新前端学习资料,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏亿浪博客吧

script元素的属性及使用

前端设计 迷惘 6个月前 (04-09) 244次浏览 已收录 0个评论 扫描二维码

1,五个属性
(1),charset:可选属性。表示通过src属性指定的代码字符集。大多数浏览器会忽略,因此基本可不用。
(2),defer:可选属性。表示脚本可以延长到文档完全被解析和显示后再执行。基本可不用。
(3),language:此属性已废弃。原来用来编写代码使用的脚本语言的种类与版本。现在大多数浏览器会忽略,因此可不用。
(4),src:此属性包含要执行的代码的外部文件。在外联js文件时使用。外部文件的MIME类型应是”application/x-javascript”,这样 可以使用ASP、JSP、PHP等其他服务器端脚本语言动态生产JavaScript代码。但是如果文件扩展名为.js, 也能够正确导入并执行。 注意,一旦设置了src属性,那么script元素中编写的任何JavaScript代码就可能无效了,但是具体还是看 不同的浏览器。

(5),type:必需属性。可以看成是langeage的替代属性;表示编写代码使用脚本语言的内容类型(也可以称为MIME类型)。取值包括application/ecmascript、application/javascript、 application/x-ecmascript、application/x-javascript、text/ecmascript、text/javascript、 text/jscript、text/livescript、text/tcl、text/x-ecmascript和text/x-javascript。 对于嵌入的JavaScript脚本来说,设置type=”text/ecmascript”属性值即可,如果不设置也没关系, 因为默认脚本类型也是JavaScript,即text/javascript。 实际上服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但是在type中设置这个值却可能导致脚本本浏览器忽略。在非IE浏览器下可以使用这个值。但是最好还是用type/javascript,可保证浏览器的最大兼容性。

(6) async 属性” >async属性,html5新增属性,规定异步执行脚本(仅适用于外部脚本)。

2,script的使用
(1),直接在页面嵌入JavaScript代码
注意:代码解释自上而下,在解释器对<script>元素内部所有代码求值完毕之前,页面中的其余内容不会被浏览器加载或显示。不得在代码内部出现</script>。如果要出现,只能以字符串出现。
(2),包含外部JavaScript文件
注意:引用的时候,要在<script type=”text/javascript” src=””>后面加上</script>。原因不加的话不符合HTML规范,而且也得不到某些浏览器尤其是IE的正确解析。在XHTML里可以省略。当然,不管什么地方都不省略是最好的办法。
外部的JavaScript文件带有.js的扩展名。但这个扩展名不是必须的,因为浏览器不会检查包含有JavaScript的文件的扩展名。这样一来,可以使用其他服务器端语言生成JavaScript代码。
浏览器按照元素在<script>页面出现的先后顺序依次解析。第一个解析完成后,才是第二个…

3,script的位置
按照惯例,所有的<script>元素都应该放在页面的<head>元素中,例如:
<html>
<head>
<title>这里是标题</title>
<script type=”text/javascript” src=””></script>
</head>
<body>
<!– 这里是内容 –>
</body>
</html>
这种做法的目的在于把所有的外部文件(包括css和js)的引用放在相同的地方。但是,在文档<head>元素中包含所有的js文件,意味着必须等全部js代码被下载,解析和执行完以后,才能开始呈现页面内容 (body标签里的内容)。这对于需要很多js代码的页面来说,无疑会导致浏览器在呈现页面的时出现明显的延迟,而延迟的页面将是一片空白。
为了避免这个问题,web应用程序一般都把全部的js引用放在元素中,放在页面元素的后面。
如下:
<html>
<head>
<title>这里是标题</title>
</head>
<body>
<!–这里是内容 –>
<script type=”text/javascript” src=””></script>
</body>
</html>
这样,在解析包含的js代码前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。当然css还是引用在<head>里面比较好。

4,延迟脚本
HTML4.01为了<scpipt>定义了defer属性。这个属性用于表明脚本在执行事不会影响页面构造。也就是说,脚本本延迟到整个页面都解析完再运行。
如下:
<html>
<head>
<title></title>
<script type=”text/javascript” defer=”defer” src=””></script>
</head>
<body>
</body>
</html>
这个属性和将js脚本放在页面最底部的效果是一样的。但是并不是随意浏览器都支持这个属性,只有IE和Firefox3.1以上的支持,其余主流浏览器都不支持。
所以将js脚本放在页面内容最底部是比较好的方法。

5,在XHTML中的用法
XHTML比HTML要严格的多。如果要兼容最还的办法是:
<script type=”text/javascript”>
<![CDATA[
————–js 内容 ————-
]>
</script>
但是,许多浏览器不兼容XHTML,因而不支持CData片段。所以最好的办法是:
<script type=”text/javascript”>
//<![CDATA[
—————–js内容—————–
//]>
</script>
在CData片段前加上注释,这样既能通过XHTML验证,又能对XTML之前的浏览器很好的兼容。

6,js的嵌入。
引用外部js的好处:
(1),方便维护
(2),可缓存,就是说如果两个页面引用一个
(3),可适应性,这一点最重要。因为通过外部文件包含的js无需使用前面提到的XHTML或者注释hack。HTML和XHTML包含的外部文件语法是相同的。

7,文档声明
文档声明:混杂模式和标准模式
在没有文档声明的情况下,默认为混杂模式。这种不可取。
标准模式有:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
等等 ,不列举了!~

8,<noscript>元素
在浏览器不支持脚本,或支持脚本,脚本被禁用时使用。
在上述2种情况下,显示<noscript></noscript>里面内容。除此之外,用户永远也看不到他。

 


亿浪博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明script元素的属性及使用
喜欢 (0)
[]
分享 (0)
迷惘
关于作者:
亿浪博客是一个个人博客,主要写一些个人学习心得 、笔记什么的,分享下网络实用常识、 实用软件、 心情随笔 、手机技巧 、站长工具等文章!!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址