在html中使用Javascript的方法分享(图文)

发布时间:2020-07-27编辑:脚本学堂
本文介绍下,在html页面中使用javascript的几种方法,有需要的朋友参考下。

你知道在HTML页面中使用Javascript有哪几种方式吗?

本文介绍两种常见的在html页面中应用javascript代码的方式。

方法一,在html页面中直接引入javascript代码

1,嵌入的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中,当运行页面时,就会弹出一个对话框,如下图:
4_1.png

2,将javascript代码放在body中:
 

复制代码 代码示例:
<body>
    <h1>在HTML中使用Javascript - 脚本学堂</h1>
    <script type="text/javascript">
        //嵌入在body中的Javascrip代码
        alert("这是在body中的Javascript - 脚本学堂");
    </script>
</body>

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

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

方式二,引用独立的js文件
将Javascript代码内嵌在HTML标签容易造成页面代码混乱,可以将Javascript代码存放在一个js文件中,然后在HTML中引用js文件,写法如下:
4_3.png

注意:
加载外部JS文件是线程阻塞的,在没有加载完成时,页面不会继续加载其后面的标签,所以通常将引用的JS放在body的后面。
这点请务必注意,特别是遇到一些莫名的无法加载网页等问题时,应该首选考虑到这个因素。