javascript系列之引入文件方式

最新推荐文章于 2024-05-09 10:39:03 发布

鱼馅饼

最新推荐文章于 2024-05-09 10:39:03 发布

阅读量1.6k

点赞数

文章标签： javascript 开发语言 ecmascript

原文链接：https://www.tutorialspoint.com/javascript/javascript_placement.htm

版权

一.欢迎来到我的酒馆

可以在html文档的任意位置包含javascript代码。然而，推荐使用下面的几种方法引入javascript代码：

javascript代码放置在<head></head>标签内。
javascript代码放置在<body></body>标签内。
javascript即在<body></body>标签内，也在可放置在<head></head>标签内。
javascript保存在一个外部文件中，在<head></head>标签内引入外部javascript文件。
在下面的章节中，学习将javascript放置在不同的位置.

二.javascript放置在head标签中

如果你有一个脚本，用来执行一些事件，例如用户的点击事件，你可以将javascript脚本放置在head标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onClick(){
            alert("clicked!");
        }
    </script>
</head>
<body>
    <input type="button" onclick="onClick()" value="click me">
</body>
</html>

用浏览器打开：
在这里插入图片描述

三.javascript放置在body标签中

如果需要在页面加载的时候运行脚本，用来在页面上生成内容，这时可以将javascript代码放置在body标签中。在这种情况下，你不会使用javascript定义任何函数，如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        document.write("hello world!")
    </script>

    <p>This is paragraph tag.</p>
</body>
</html>

保存上面的内容，用浏览器打开：
在这里插入图片描述

四.javascript代码放置在head、body标签中

你可以将javascript代码，既放在head标签中，又可以放置在body标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function onClick(){
            alert("clicked!");
        }
    </script>
</head>
<body>
    <script>
        document.write("Hello World!");
    </script>

    <input type="button" onclick="onClick()" value="click me">
</body>
</html>

保存上面的代码，用浏览器打开：
在这里插入图片描述

五.引入外部javascript文件

随着你越来越广泛的使用javascript，你可能会遇到这种情况：你在不同的网页中重复使用javascript代码。你不得不在多个html文件中维护相同的javascript代码。这时候，script标签提供一种机制，允许你在外部文件中保存javascript代码，然后使用script标签引入外部的javascript文件。
下面的例子演示了使用script标签引入外部javascript文件，通过使用script标签的src属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/main.js"></script>

</head>
<body>
    <input type="button" onclick="onClick()" value="click me">
</body>
</html>

使用外部的javascript文件，你需要将所有的javascript代码写入一个单独的文件中，并且这个文件的后缀名改为 “.js” ，然后在HTML文档中使用上面的方式引入。

main.js

function onClick(){
    alert("clicked!");
}

在HTML文件内引入了main.js后，就可以在HTML文件中使用onClick()函数。

鱼馅饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript系列之引入文件方式

随着你越来越广泛的使用javascript，你可能会遇到这种情况：你在不同的网页中重复使用javascript代码。你不得不在多个html文件中维护相同的javascript代码。这时候，script标签提供一种机制，允许你在外部文件中保存javascript代码，然后使用script标签引入外部的javascript文件。使用外部的javascript文件，你需要将所有的javascript代码写入一个单独的文件中，并且这个文件的后缀名改为 “.js” ，然后在HTML文档中使用上面的方式引入。
复制链接

扫一扫