JavaScript- 1.1 行内、内部、外部三种引用方式

// 监听按钮点击事件
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
    // 动态修改页面内容
    document.getElementById("demo").innerHTML = "内容已更新！";
});

4、三者的区别总结

特性	HTML	CSS	JavaScript
作用	定义页面内容结构	控制页面样式和布局	实现页面动态交互
语法类型	标记语言（标签）	样式规则（选择器+属性）	编程语言（函数、逻辑）
文件扩展名	`.html`	`.css`	`.js`
是否可执行	否（静态内容）	否（仅样式）	是（可执行代码）
典型用途	标题、段落、图片等	颜色、字体、间距等	表单验证、动画、AJAX等

5、协作关系

HTML 提供骨架，CSS 修饰外观，JavaScript 赋予灵魂（交互）。
例如：
1. HTML 定义一个按钮：<button id="btn">点击</button>
2. CSS 美化按钮：#btn { background: blue; color: white; }
3. JavaScript 添加点击事件：

JavaScript

document.getElementById("btn").onclick = function() {
    alert("按钮被点击！");
};

6、为什么需要三者分离？

可维护性：修改样式时无需改动 HTML 或 JS。
复用性：同一份 CSS/JS 可用于多个 HTML 页面。
性能优化：浏览器可并行加载 HTML、CSS 和 JS，减少阻塞。

7、总结

HTML：网页的“骨架”，定义内容结构。
CSS：网页的“皮肤”，控制视觉表现。
JavaScript：网页的“大脑”，实现动态交互。

理解这三者的区别是前端开发的基础，合理使用它们能构建高效、美观且功能丰富的网页。

二、行内（内联）、内部（内嵌）和外部详解

在JavaScript中，根据代码的引入方式不同，可以分为行内（内联）、内部（内嵌）和外部三种引用方式。以下是详细说明和示例：

1. 行内（内联）JavaScript

直接将JavaScript代码写在HTML元素的事件属性中（如onclick、onmouseover等）。
特点：

代码与HTML混合，不利于维护。
仅适用于简单的交互逻辑。

示例：

html

<button onclick="alert('按钮被点击了！')">点击我</button>

2. 内部（内嵌）JavaScript

将JavaScript代码写在HTML文件的<script>标签内，通常放在<head>或<body>中。
特点：

代码与HTML分离，但仍在同一文件。
适合页面专属的脚本逻辑。

示例：

html

<!DOCTYPE html>
<html>
<head>
    <title>内部JS示例</title>
    <script>
        function sayHello() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">打招呼</button>
</body>
</html>

3. 外部JavaScript

将JavaScript代码单独保存在.js文件中，通过<script src="...">引入。
特点：

代码完全分离，便于复用和维护。
可被多个HTML页面共享。
浏览器会缓存外部文件，提高性能。

步骤：

创建独立的.js文件（如script.js）：

javascript

// script.js
function showMessage() {
    alert("这是外部JS文件！");
}

在HTML中引入该文件：

html

<!DOCTYPE html>
<html>
<head>
    <title>外部JS示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showMessage()">显示消息</button>
</body>
</html>

注意：

<script>标签通常放在<body>末尾（</body>前），以避免阻塞页面渲染。
可添加async或defer属性控制脚本加载行为。

4、三种方式的对比

方式	优点	缺点	适用场景
行内	简单直接	难以维护，混合HTML与逻辑	极简交互（如测试）
内部	代码在HTML内，便于管理	页面复杂时臃肿	页面专属的小型脚本
外部	复用性强，易于维护，可缓存	需要额外HTTP请求	中大型项目或复用逻辑

5、最佳实践

推荐使用外部JS：尤其是项目较大时，保持结构清晰。
避免行内JS：除快速原型外，尽量用事件监听器（如addEventListener）替代行内事件属性。
脚本位置：外部JS文件放在<body>末尾或使用defer属性，避免阻塞页面加载。

希望这能帮助你清晰理解JavaScript的三种引用方式！

三、代码实践

代码如下：

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js三种引用方式-行内，内部，外部</title>
		<!--内部引用 可以放在页面的任意部位，务必是在调用前 -->
		<!--外部引用 可以放在页面的任意部位，但一般放在head里 -->
		<!-- 内部和外部是顺序结构 -->
		<!-- <script src="../js/js1-1.js" type="text/javascript" >
			
		</script> -->
	</head>
	<body>
		<!-- <script type="text/javascript">
			alert('欢迎来到JS世界--内部调用')
		</script> -->
		<button type="button" onclick="alert('欢迎来到JS世界')">点击</button>
	</body>
</html>

JavaScript

alert('欢迎来到JS世界--外部调用');

代码运行如下：

总结

以上就是今天要讲的内容，本文简单记录了HTML、CSS和JavaScript的区别、JavaScript的三种引用方式，仅作为一份简单的笔记使用，大家根据注释理解