与 CSS 类似 , JavaScrip 有 3 种 书写方式 , 分别是 :
将 单行 或 少量 JavaScrip 代码 直接在 HTML 标签元素 中 的 onclick / onload / onmouseover 等事件 中 , 这种 JavaScrip 书写方式 称为 " 内联 JavaScript " ;
内联 JavaScrip 优缺点 :
代码示例 : onclick
属性值 写在 双引号 中 , 如果在 双引号中 写一行 JavaScrip 脚本 , 涉及到 字符串内容时 , 使用 单引号 ;
<!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
<input type="button" value="按钮" onclick="alert('内联 ( Inline ) JavaScript 脚本')">
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
</head>
<body>
<!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
<input type="button" value="按钮" onclick="alert('内联 ( Inline ) JavaScript 脚本')">
</body>
</html>
执行效果 :
点击按钮后 , 弹出 如下 对话框 :
在 HTML 文件的 <head> 或 <body> 标签 中 , 可以使用 <script> 标签来包含 JavaScript 代码 , 这种书写方式称为 内嵌 JavaScript ;
内嵌 JavaScrip 优缺点 :
代码示例 :
<head>
<script>
// 2. 内嵌 ( Internal ) JavaScript 脚本
alert("内嵌 ( Internal ) JavaScript 脚本");
</script>
</head>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 2. 内嵌 ( Internal ) JavaScript 脚本
alert("内嵌 ( Internal ) JavaScript 脚本");
</script>
</head>
<body>
<!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
<!-- <input type="button" value="按钮" οnclick="alert('内联 ( Inline ) JavaScript 脚本')"> -->
</body>
</html>
展示效果 :
刷新页面后 , 即可弹出 对话框 :
首先 , 将 JavaScript 脚本代码写在一个 单独的 .js 源码文件中 ,
// 3. 外部 ( External ) JavaScript 脚本
alert("外部 ( External ) JavaScript 脚本");
然后 , 在 HTML 文件中使用 <script> 标签的 src
属性来引用它 ,
<script src="my.js"></script>
这种书写方式称为 " 外部 JavaScript " ;
注意 : 引入 js 文件时 , <script src="my.js"></script>
, script
标签要空着 , 不能写任何代码内容 ;
外部 JavaScrip 优缺点 :
代码示例 :
// 3. 外部 ( External ) JavaScript 脚本
alert("外部 ( External ) JavaScript 脚本");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 2. 内嵌 ( Internal ) JavaScript 脚本
//alert("内嵌 ( Internal ) JavaScript 脚本");
</script>
<!-- 3. 引入 外部 ( External ) JavaScript 脚本 -->
<script src="my.js"></script>
</head>
<body>
<!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
<!-- <input type="button" value="按钮" οnclick="alert('内联 ( Inline ) JavaScript 脚本')"> -->
</body>
</html>
展示效果 :
刷新页面后 , 显示如下对话框 :