JavaScript代码位置

JavaScript代码位置教程

JavaScript 代码代码的位置一共有三种，即：写在行内、写在 script 标签中以及写在外部的 js 文件中。

我们使用记事本，新建一个 haicoder.html 文件，并输入以下内容：

<input type="button" value="haicoder" onclick="alert('Hello HaiCoder')" />

接着，我们双击使用浏览器打开该文件，运行结果如下：

02_javascript行内代码.png

我们看到，网页上有一个名为 “haicoder” 的按钮，我们点击该按钮，此时，网页弹出了一个对话框，运行效果如下：

03_javascript行内代码.png

即，我们点击该按钮时，触发了我们上述代码 onclick 里面的 JavaScript 代码。

我们使用记事本，新建一个 haicoder.html 文件，并输入以下内容：

<head>
  <script>
    alert('Hello HaiCoder!');
  </script>
</head>

接着，我们双击使用浏览器打开该文件，运行结果如下：

04_javascript script代码.png

直接写在 script 标签里的代码，浏览器一运行，则就会运行标签里的代码，因此弹出了 “Hello HaiCoder!” 对话框。

我们使用记事本，新建一个 main.js 文件，并输入以下内容：

function haiCoder() {
	alert("Hello HaiCoder in main.js");
}

接着，我们在 main.js 文件的相同目录下，新建一个 haicoder.html 文件，并输入以下内容：

<head>
  <script type="text/javascript" src="main.js"></script>
  <script type="text/javascript">
  	haiCoder()
  </script>
</head>

接着，我们双击使用浏览器打开该文件，运行结果如下：

05_javascript引入外部js文件.png

浏览器一运行，则就弹出了 “Hello HaiCoder!” 对话框，这里，我们在一个单独的 main.js 的文件中，新建了一个 haiCoder 的函数，接着我们在 html 文件中，使用 script src 引入了外部的 js 文件。

当我们引入了外部的 js 文件之后，我们就可以直接在 script 标签中，调用引入的 js 文件中的函数了。

JavaScript 代码代码的位置一共有三种，即：写在行内、写在 script 标签中以及写在外部的 js 文件中。