1211-05

分类:Javascript+css作者:小飘 评论次数:4

javascript脚本合理的加到html文件中的方法

这篇文章讲述如何合理的把javascript脚本加入到html中,介绍了给html加入javascript时的几种方法并分析了利弊,介绍了noscript标签、defer属性的用法。本文为阅读ppk on javascript的读书笔记。

如何把javascript添加到文件中

有两种方法可以做到,一是将javascript文件包含到文件中,这是最好的方法,因为这可以保证javascript在html文件之外,让文件更容易管理。并且可以让你修改整个网站的行为时只需有改变一个文件(行为都是用javascript控制的)。另外一个方法就是直接将javascript写在html文件中,这是不推荐的。

将javascript文件包含到html文件中-JavaScript Includes

这种方法有两个优点:

1.javascript都放在一个文件中,通过修改一个文件就可以对全部文件的行为进行修改

2.这种方法javascript是浏览器载入进来的,因此自己不用去做更多的控制,不用考虑何时进行load等。

通常给页面加入一个javascript文件的方式如下:

<script src="../jsfile.js"></script>
<script type="text/javascript" language="javascript" src="../jsfile.js"></script>

现在页面加载的时候,浏览器都会加载jsfile.js文件到页面中,并且,在源代码里看不到js源码。在js文件中定义的函数,变量等都看不到。一般都将加载js文件的语句放到head中。

注意:不要加入<script>标签到js文件中,仅仅写javascript语句代码就可以了

如何保证不支持include的浏览器在执行你定义的javascript方法时不报错

有两种方法,例如你include的js文件里有一个函数叫lastMod

1.在每次调用这个方法前,先判断你的页面是否支持这个方法。

if (self.lastMod) document.write(lastMod())

2.首先定义一个空的函数lastMod(),然后再include尽量js文件,这样,如果可以正常include进来,前面空的函数将被重写,执行的时候就是执行新的函数。如果不支持include,执行到这里时将执行一个空函数。例如:

<script>
function lastmod() {}
</script>
<script src="js.js"></script>

noscript标签

在noscript标签中可以放html语句等,这些语句只在浏览器不支持javascript或者javascript被禁用的情况下出现。noscript工作的原理就是,不支持javascript的浏览器不认识它,就直接显示出里面的内容,而支持javascript的浏览器认识它,就忽略其中的内容。

这个标签在浏览器不javascript的时候很有用,可以告诉用户它使用的浏览器不支持,也可以给用户显示其他内容供用户选择。

另外Netscape 2 不支持这个标签。

defer 属性

例如:

<script language="javascript" type="text/javascript" defer>

最初这个标签只是做为一个提示,说明在这段脚本里的内容不会修改页面的内容。因此浏览器不必等整个脚本都加载完执行完,浏览器可以直接解析html语句。在旧的系统中这也许可以省很多时间。

但是从Explorer 4+开始慢慢的改变defer属性的意思:凡是有defer属性的脚本,都只有在浏览器加载完整个页面才执行。

例如下面的代码:

<body>
<script language="javascript" type="text/javascript" defer>
<!--
alert(document.forms[0].elements.length);
// -->
</script>

<form>

<input value="Bla">
</form>
</body>

如果脚本没有defer这个属性,这段脚本执行到alert会报错,因此执行到forms的时候,html还没有开始加载,因此脚本找不到form。但是加了defer后,执行到form的时候,整个页面都加载完了,因此也不会出现错误。

直接在文件里写javascript

和上面include进来js文件的方法作用一样,直接将javascript写在文件里,javascript也可以正确的执行,但是这种方法我们不推荐。

<script language="javascript" type="text/javascript">
<!--

script goes here

// -->
</script>

正确合理的把javascript放在合适的地方

像上面说的,javascript最好都用include的方法包含进来,方便管理等,并且,javascript尽量放在head中。除非你是要在文件中来写内容,不得不在文件中放置javascript。

把javascript放在head中可以确保页面中的button,link之类的控件需要调用的javascript函数在被解析之前都已经被完整的加载进来了。如果你把javascript语句放在页面的很后面,很有可能用户在点击button或者其他控件时,需要触发的javascript事件函数还没有加载完,这样就会出现脚本错误。

因此,除非用特殊原因,请将javascript脚本放在head中。

以上是这次阅读的大概内容。个人总结如下:

文章里提到的不支持javascript的浏览器等等,作者写这篇文章的时候,浏览器还没那么发达,现在各种各样的浏览器,并且功能都已经很强大很完善了,基本不会出现哪个浏览器不支持javascript的问题了。但是这些知识还是很重要的。

这节的内容算是javascript基础课了,写了这么久的javascript,我也没有把javascript放在head中,以后要好好加强。从细节做起。写出完美的代码。

本文为小飘原创文章,转载请加上链接并注明出处

原文地址:http://www.liloy.info/archives/454.html

4条评论
  1. 会不会JS用多了页面 就卡了·····我的是好卡哦!希望友情www.phpec.net风轻云淡博客

    POST:2011-05-12 23:23 回复
  2. 学习了a !!!!!!!

    POST:2011-05-13 23:45 回复
  3. 王磊 说:

    挺好的,学习下了

    POST:2011-05-13 23:45 回复
  4. 正好过来学习下啊。

    POST:2011-05-13 23:56 回复
发表评论

必填

必填