【转】在HTML中使用Javascript-阿里云开发者社区

开发者社区> 开发与运维> 正文

【转】在HTML中使用Javascript

简介:

在HTML页面中使用Javascript有两种方式:

嵌入的Javascript代码

这种方式是直接将Javascript代码写在HTML中,相应的用法是:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>在HTML中使用Javascript - 起飞网 - Javascript测试页面</title>
    <script type="text/javascript">
        alert("欢迎使用Javascript - 起飞网");
    </script>
</head>
<body>

</body>
</html>

在上面的代码中,我们包含Javascript代码的script标签放在和head中,当我们运行页面的时候,就会弹出一个对话框,如下图:

©起飞网

除了可以放在head中,javascript代码还可以放在body:

<body>
    <h1>在HTML中使用Javascript - 起飞网</h1>
    <script type="text/javascript">
        //嵌入在body中的Javascrip代码
        alert("这是在body中的Javascript - 起飞网");
    </script>
</body>

我们在body中加入一个script标签,并让它弹出一个对话框,当浏览器加载到这段代码后会将其解释执行,效果如下图:

image

两种写法都可以被执行,既没有推荐与不推荐写法之分,更没有正确与错误之别,主要看你的具体用法:如果你希望页面在加载之初就开始执行javascript代码,就应该将它放在head中;如果你希望在页面加载到某个标签之后执行Javascript代码,就将其放在相应标签的后面。

引用独立的js文件

将Javascript代码内嵌在HTML标签中固然方便,但也容易造成页面代码混乱,通常情况下,我们会将Javascript代码存放在一个js文件中,然后在HTML中引用js文件,写法如下:

image

需要注意的是,加载外部JS文件是线程阻塞的,在没有加载完成的时候,页面不会继续加载其后面的标签,所以通常我们将引用的JS放在body的后面。

最后给出这个示例的下载,希望能够帮助初学的朋友!




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/archive/2013/06/06/3120654.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章