JavaScript基础之JavaScript引入方式

发布时间：2024年01月22日

JavaScript引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，一般以下方式:

  • 外部方式
  • 内部方式
  • JavaScript元素事件
  • 通过JavaScript伪URL引入

外部形式

外部形式，就是把HTML代码和JavaScript代码都各自单独放在不同的文件中，然后在HTML文档中使用script标签来引入JavaScript代码

步骤：将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

语法：

// demo.js
document.write('这是demo.js文件内容')

<!--demo.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式</title>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
    <!--1.外部形式在head中引入-->
    <script src="demo.js"></script>
</head>
<body>
	<!--2. 外部形式在body中引入-->
  <script src="demo.js"></script>
</body>
</html>

在script标签中，只需引入src这一个属性即可。src,是"source"的意思，表示文件路径

如果在 script 标签使用 src 属性引入了某 .js 文件后，script标签内再写了代码，那么 标签内的代码会被忽略！
实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	console.log("这代码会被忽略掉")
  </script>
</body>
</html>

内部方式

内部方式，指的是把HTML代码和JavaScript代码都放在同一个文件中。其中，JavaScript代码都写在script标签内。

语法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部引入</title>
	 <!-- 内部形式：通过 script 标签包裹 JavaScript 代码 -->
		<!-- 1.在head中引入 -->
		<script>
            //js代码
			......
		</script>
	</head>
	<body>
		<!-- 2.在body中引入 -->
		<script>
	 	 //js代码
			......
		</script>
	</body>
</html>

从上该实例中看出，内部样式JavaScript文件不仅可以在head中引入，也可以在body中引入。

其中，"<script></script>"是一种简写形式，等价于如下代码：

<script type="text/javascript">
    console.log('script标签完整写法')
</script>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部引入</title>
	 <!-- 内部形式：通过 script 标签包裹 JavaScript 代码 -->
		<!-- 1.在head中引入 -->
		<script>
			console.log("这是js代码")
		</script>
	</head>
	<body>
		<!-- 2.在body中引入 -->
		<script>
		console.log("这是js代码")
		</script>
	</body>
</html>

JavaScript元素属性

元素属性JavaScript，指的是在元素的”事件属性"中直接编写JavaScript代码或调用JavaScript函数
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在元素事件中编写JavaScript</title>
	</head>
	<body>
		<input type="button" value="按钮" onclick="alert('你触发了alert事件')">
	</body>
</html>

运行结果
在这里插入图片描述

实例：在元素事件中调用函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在元素事件中调用函数</title>
		<script>
			function example()
			{
				alert("你触发了example函数")
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="example()"/>
	</body>
</html>

运行结果
在这里插入图片描述

通过JavaScript伪URL引入

在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。一般格式如下：

JavaScript:alert("你好")

实例：

<a href="javascript:alert('你好?')">点击</a>

伪URL地址可用于文档任何地方，并触发任意数量的JavaScript函数或对象固有的方法。多用于表单验证、超链接等。

文章来源:https://blog.csdn.net/AIMing_byte/article/details/135748146
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章