javaScript的引入方式

最新推荐文章于 2022-09-22 17:34:57 发布

月月颜

最新推荐文章于 2022-09-22 17:34:57 发布

阅读量9.3k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_16403183/article/details/53979117

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天下午复习JavaScript的一开始，就遇到一个问题：JavaScript的三种引入方式是什么？
我对这个问题一直是迷迷糊糊的，大概知道用<script>标签和src属性，但是不是很明确。因此上网去查了一下资料，发现答案有好几个版本，有写三个的，两个的，还有四个的，所以为了解决这个问题，我决定逐一尝试。
1）直接在HTML页面中使用<script></script>标签引入，可以写在head中，也可以写在body末尾，可以实现

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>js引入方式实验</title>
 </head>
 <body>
        js的引入方式实验
		<button id="button">实验</button>
        <script>
            button.οnclick=function()
			{
				alert("引入方法一：直接嵌入script标签");
			}
        </script>

 </body>
</html>

效果如下图所示：点击按钮会弹出提示框

2).在html中使用script的src属性引入外部js文件，可实现。

新建一个index1.html和index1.js文件，代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>js引入方式实验</title>
 </head>
 <body>
        js的引入方式实验
		<button id="button">实验</button>
        <script src="index1.js">   
        </script>
 </body>
</html>

index1.js源代码如下：

button.οnclick=function()
{
	alert("JS引入方式2：外部文件导入");
}

效果如下图所示：

3).事件定义，直接在组件后面的事件中写javascript:js代码，可实现

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>js引入方式实验</title>
 </head>
 <body>
        js的引入方式实验
		<button id="button" οnclick="javascript:alert('js引入的方式3：事件定义')">实验</button>
 </body>
</html>

效果图如下所示:

4).在一个js文件中调用另外一个js 文件，可实现。但不能直接在第一个js文件中写<script src=xx.js></script>,这样写会导致引入js文件失败

HTML文件中引入index1-1.js

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>js引入方式实验</title>
 </head>
 <body>
        js的引入方式实验
		<button id="button">实验</button>
		<script src="index1-1.js">
		</script>
 </body>
</html>

index1-1.js源代码

document.write("<script src='index1.js'></script>");

index1.js源代码

button.οnclick=function()
{
	alert("JS引入方式2：外部文件导入");
}

效果如下图所示：

月月颜

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javaScript的引入方式

JavaScript的三种引入方式是什么？
复制链接

扫一扫

专栏目录

javaScript的引入方式

“相关推荐”对你有帮助么？