您的位置：首页 > Web前端 > JavaScript

HTML中使用JavaScript

2016-04-04 23:37 260 查看

一、<script>元素
1、向HTML插入JavaScript的主要方法，就是使用<script>元素。这个元素被加入到正式的HTML规范中。HTML4.01规定了<Script>下列6个属性：
async：可选，表示立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选，表示脚本可以延迟到文档完全被解析和现实之后执行。
language：已废弃。
src：可选。表示要执行代码的外部文件。
type：可选。可以看成是language的替代属性；表搜狐ibianxie代码使用的就脚本语言的内容类型（也成为MIME类型）。虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来都还是使用text/javascript。实际上，服务器在传送javaScript文件时使用的MIME类型通常是application/x-javascript，但type中设置这个值却可能导致脚本被忽略。另外在非IE浏览器中还可以使用以下值：application/javascript和application/ecnascript。考虑到约定俗成河最大限度地浏览器兼容性，母线type属性的值依旧还是text/javascript不过，这个属性并不是必须的，如果没有指定这个属性，则其默认值仍为text/javascript。

2、引入js的方式：
<scripttype="text/javascript" src='jquery.js'/>"></script>

或者是在页面中采用:
<script>

function(){

}
</script>

js将从上到下被加载

PS：
外部文件的扩展名.js不是固定的，可以不是.js。但是服务器通常需要看扩展名决定为响应应用哪种MIME类型，如果不使用.js扩展名，确保服务器能返回正确的MIME类型。
<script type="text/javascript"src='jquery.js'/>"></script>标签中间不可以填写其他js代码。

二、
1、标签的位置：
一般放到HTML页面中的<head>元素中。为了避免很多js文件时候，加载js文件时候页面是一片空白，一般将js文件放到<body>标签内容的最后面。

2、延迟脚本
defer属性，这个的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后才再执行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载但是延迟执行。
defer只适用于外部的脚本文件。这一点在HTML5中明确规定，因此支持HTML5的实现会忽略嵌入脚本设置的defer属性。
3、异步脚本
HTML5为<script>元素定义了async属性。这个属性和defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部的脚本文件，并告诉浏览器下载文件，但defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。

4、在XHTML中的语法
可扩展超文本标记语言，即XHTML，XHTML的代码规则要比编写HTML要严格些。
比如在js代码块中<符号，会被当作一个新的标签来处理。如果直接写成小于号就会报错，导致语法错误。解决办法可以采用<；代替小于号，但是这样就不好理解了，所以采用CData片段后的JavaScript代码块如下所示：
<scripttype="text/javascript"><![CDATA[

function compare(a,b){

if(a<b){
alert("A is
less than B");

}

}

]]
</script>

但实际上还有不少浏览器不兼容XHTML，因而不支持CData片段。只要将<![CDATA【

】】
部分注释掉就可以了。

5、不推荐使用的语法
在最早使用JS时候，有的浏览器不支持JS所以采用注释<script>中的内容的方式来避免不支持JS浏览器的错误。但是现在浏览器都支持JS了所以不再建议使用引入JS代码。

6、嵌入代码与外部文件
多用支持使用外部文件的优点如下：可维护性、可缓存、适应未来。

小结：
1、使用<script>元素引入JavaScript插入到HTML页面中。
2、使用src引入js文件时候，可以是本服务器上的文件，也可以是其他域的文件。
3、所有<script>元素都会按照页面中出现的先后顺序依次解析。在不使用defer和async属性的情况下，只有在解析完前面<script>元素代码之后才会解析后面的<script>元素中的代码。
4、由于浏览器会先解析完不使用defer属性的<script>元素中的代码，然后再解析后面的内容，所以一般应该把<script>元素放到页面的最后，即主要内容后面，</body>前面。
5、使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定他们的顺序执行。
6、使用async属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照他们在页面中出现的顺序执行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航