HTML中使用JavaScript

一、<script>元素

1、向HTML插入JavaScript的主要方法,就是使用<script>元素。这个元素被加入到正式的HTML规范中。HTML4.01规定了<Script>下列6个属性:

async:可选,表示立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或者等待加载其他脚本。只对外部脚本文件有效。

charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。

defer:可选,表示脚本可以延迟到文档完全被解析和现实之后执行。

language:已废弃。

src:可选。表示要执行代码的外部文件。

type:可选。可以看成是language的替代属性;表搜狐ibianxie代码使用的就脚本语言的内容类型(也成为MIME类型)。虽然text/javascripttext/ecmascript都已经不被推荐使用,但人们一直以来都还是使用text/javascript。实际上,服务器在传送javaScript文件时使用的MIME类型通常是application/x-javascript,但type中设置这个值却可能导致脚本被忽略。另外在非IE浏览器中还可以使用以下值:application/javascriptapplication/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中的语法

可扩展超文本标记语言,即XHTMLXHTML的代码规则要比编写HTML要严格些。

比如在js代码块中<符号,会被当作一个新的标签来处理。如果直接写成小于号就会报错,导致语法错误。解决办法可以采用&lt;代替小于号,但是这样就不好理解了,所以采用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>元素都会按照页面中出现的先后顺序依次解析。在不使用deferasync属性的情况下,只有在解析完前面<script>元素代码之后才会解析后面的<script>元素中的代码。

4、由于浏览器会先解析完不使用defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放到页面的最后,即主要内容后面,</body>前面。

5、使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定他们的顺序执行。

6、使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照他们在页面中出现的顺序执行。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值