首页 > JavaScript > 在HTML中嵌入JavaScript
2009九月2

在HTML中嵌入JavaScript

熟悉了JavaScript的基本语法,我们现在应该考虑怎么在HTML中嵌入JavaScript了。通常我们把在Web浏览器中使用的JavaScript称为客户端JavaScript,现在大多数JavaScript程序也都是跑在浏览器里面的。JavaScript本身也是因为浏览器而设计的,二者狼狈为奸,尤其现在所谓的Web2.0的兴起(个人感觉现在已经有些没落了),JavaScript借助于Ajax越来越受到广大群众的喜爱而不是憎恨(浏览器大战后的苦果)。

借助于<script>标签:

通常我们都是把JavaScript放置在HTML的<script>和</script>之间,这也是我用的最多的场景,呵呵。一些小的函数就直接放在里面了,不会考虑外链,而且一些函数也不是公用的就理所当然的直接放在HTML里面了。

但是这里要推荐一下,大家尽量使用<script的type属性,现在不都提倡MIME类型命名规范嘛。呵呵。虽然实际上<script>对language属性的支持比type属性好——这句大家最好不要记了,哈。

劣势:放入<script>标签内的JavaScript不会被浏览器缓存,每次都需要重新加载,浪费人力物力时间空间。

注意:假如我们在做document.write输出的时候要输出”/<script>”这样的标签时,一定要把其拆开,写成document.write(“</”+”script>”);,这是因为HTML解析器并不理解JavaScript语法,一旦看到完整的”<\script>”就认为你的脚本块定义结束了,挺傻的是吧?

借助于src外链:

随着网络时代的到来,大家习惯了拿来主义,并且拿完啥还不留欠条。同样,从JavaScript 1.1 起,<script>标签开始支持src属性,可以让我们引入外部的脚本文件。

语法结构:<script src=’xxxx.js’></script>这里面的闭合标签一定不能少。切记。且被外链的js里面不用再写<script;>标签。

优势:

  • 把JS代码与HTML代码分离,简化HTML文件。
  • 使JS代码可以公用,且易于维护。
  • 可以被浏览器缓存。
  • 可以把js文件与html文件放置在不同的服务器上面。不过这其实并不算啥优势。

事件驱动程序:

有一句老话叫:”牵着不走,打着倒退”。这里的”牵”,和”打”就是两个事件触发条件,分别触发了”停留原地”和”倒退”这两个动作的发生。

在网页中,比如您在本篇日志下面发表回复点击”发表意见”或者按了”CTRL+ENTER”都会触发JS事件,来调用JavaScript定义好的函数。

当一个事先定义好的事件被触发后就可以调用一个JavaScript事件。这被称作是事件驱动程序。比如说,我想在您点击按钮的时候,弹出页面提示,就可以使用如下代码:

<input type='button' value='click me' onclick='javascript:alert("您点击了按钮");' />

未来的日志里,我会为大家介绍完整的事件处理程序列表,现在略过不谈。

URL中的JavaScript:

我们可以使用URL的伪协议来在浏览器的地址栏中输入JavaScript程序。比如您在浏览器里面复制下面的内容,将在页面上输出,告诉您当前的时间:

javascript:var today = new Date();var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();"The Time is :"+h+":"+m+":"+s;

如果我们想用javascript:URL执行某些 不改变当前显示的文档的JavaSxript代码,必须确保URL中的最后一条语句没有返回值,我们只需要使用void这个函数即可,并且不能有document.write这种输出。

javascript:var today = new Date();alert(today.getHours()+":"+today.getMinutes()+":"+today.getSeconds());void(0);

在很早很早以前,程序员还经常把javascript:URL这种方式用作超链接的href值,这样在用户点击超链接的时候就可以执行预先埋伏好的JavaScript代码了,也就是把javascript:URL这种方式用作事件处理程序来使用。

唠叨及总结:

今天说了一句很有哲理的话:

丫头:晚上吃孜然肉片吃不?

答:当然吃。

丫头:我做的不好咋办?

答:吃的开心。哈哈。

文章作者:simaopig
本文地址:http://www.xiaoxiaozi.com/2009/09/02/1414/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

3 Responses to “在HTML中嵌入JavaScript”

  1. #1 LAONB 回复 | 引用 Post:2009-09-03 15:21

    这两天烦懒了,不爱发日志,也不爱走动 :oops:
    今天过来看看。

    [回复]

  2. #2 bolo 回复 | 引用 Post:2009-09-03 21:40

    囧。。。。IE6看不到代码,不用自己的电脑真麻烦

    [回复]

  3. #3 simaopig 回复 | 引用 Post:2009-09-03 21:45

    @LAONB
    呃。。咋都有这毛病了呢。呵呵。。一样。。

    @bolo
    还是这款插件,对IE6支持的并不好。不过总体效果我还是很喜欢的。呵。

    [回复]

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)