js的引入方式

1）直接在HTML页面中使用<script></script>标签引入，可以写在head中，也可以写在body末尾，可以实现

<code class="language-html"><!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>                   
<button id="button">实验</button>          
<script>
    button.onclick = function () {
    alert("引入方法一：直接嵌入script标签");
    }
</script>
     
</body>  
</html></code>

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>

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" onclick="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>