Dreamweaver JavaScript 教程：从入门到实践
第一部分：基础概念 - 为什么用 JavaScript？
在开始编写代码之前,我们需要理解几个核心概念：
- HTML (骨架): 定义网页的结构和内容，比如标题、段落、图片、链接等。
- CSS (外貌): 负责网页的样式和布局，比如颜色、字体、间距、位置等。
- JavaScript (灵魂): 一种编程语言，为网页添加交互性和动态行为，没有它，网页就是静态的“图片”。
JavaScript 能做什么？
- 响应用户操作: 点击按钮时弹出提示、验证表单输入、切换图片。
- 动态更新内容: 无需刷新页面即可更新网页的某一部分内容（加载新的文章评论）。
- 控制多媒体: 播放/暂停视频、制作动画效果。
- 操作数据: 从服务器获取数据并显示在页面上（AJAX/Fetch API）。
第二部分：Dreamweaver 的 JavaScript 环境
Dreamweaver 不仅仅是一个代码编辑器，它为 JavaScript 开发提供了强大的支持。
代码视图 (Code View) 这是您编写和编辑 JavaScript 的主要场所，Dreamweaver 提供了以下特性：
- 代码提示/自动补全: 当您输入
doc时，Dreamweaver 会提示document，当您输入document.get时，它会提示getElementById等，这能极大提高编码效率和准确性。 - 高亮显示: 使用不同颜色区分关键词（如
var,function）、字符串、注释等，使代码更易读。 - 代码折叠: 可以折叠或展开代码块（如函数、循环），方便您聚焦于当前正在编辑的部分。
- 实时视图: 在不离开 Dreamweaver 的情况下，按
F12或点击“实时视图”按钮，即可在浏览器中预览您的网页效果，方便调试。
行内代码提示
当您在 HTML 标签中编写事件（如 onclick）时，Dreamweaver 会提供相关函数的提示。
行内代码检查 Dreamweaver 会检查您代码中的常见错误，比如未闭合的括号或引号，并用红色下划线标出，帮助您快速定位问题。
第三部分：实战演练 - 您的第一个 JavaScript 程序
让我们通过一个简单的例子,一步步在 Dreamweaver 中创建一个可以改变文本颜色的网页。
步骤 1: 创建新 HTML 文件
- 打开 Adobe Dreamweaver。
- 选择
文件>新建。 - 在弹出窗口中,选择
HTML，然后点击创建。
Dreamweaver 会为您生成一个基本的 HTML5 模板。
步骤 2: 准备 HTML 结构
在代码视图中,找到 <body> 标签，在里面添加一个标题和一个按钮。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个 JS</title>
</head>
<body>
<h1 id="myTitle">你好，世界！</h1>
<button id="colorButton">点击我改变颜色</button>
</body>
</html>
代码解释：
<h1 id="myTitle">...</h1>: 我们有一个标题，并给它设置了一个id属性为myTitle。id是唯一的，就像身份证号，方便 JavaScript 精准地找到这个元素。<button id="colorButton">...</button>: 我们有一个按钮，同样给它一个唯一的id。
步骤 3: 编写 JavaScript 代码
我们将编写 JavaScript 来让按钮点击后改变标题的颜色。
-
在
</body>标签之前，添加<script>标签，这是放置 JavaScript 代码的最佳实践，可以确保页面内容先加载完毕，再执行脚本。 -
在
<script>和</script>标签之间，输入以下代码：
<script>
// 1. 获取元素
// 通过 getElementById 找到我们之前创建的标题和按钮
const title = document.getElementById('myTitle');
const button = document.getElementById('colorButton');
// 2. 定义一个颜色数组
const colors = ['red', 'blue', 'green', 'purple', 'orange'];
let colorIndex = 0; // 用于追踪当前颜色的索引
// 3. 为按钮添加点击事件监听器
// 当按钮被点击时，执行大括号 {} 里的代码
button.addEventListener('click', function() {
// 改变标题的文本颜色
title.style.color = colors[colorIndex];
// 切换到下一个颜色，如果到了末尾就回到开头
colorIndex = (colorIndex + 1) % colors.length;
});
</script>
代码解释：
document.getElementById('myTitle'): 这是 DOM (文档对象模型) 操作的核心，它告诉浏览器：“在整个文档中，找到id为myTitle的那个元素，并把它交给我”。addEventListener('click', function() {...}): 这是现代 JavaScript 推荐的事件绑定方式，它为按钮添加了一个“监听器”，时刻准备着监听“点击”事件，一旦事件发生，就执行后面的匿名函数，style.color通过.style属性，我们可以直接修改元素的 CSS 样式，这里我们将标题的color` 属性设置为我们数组中的颜色。
步骤 4: 保存并预览
- 按
Ctrl + S(Windows) 或Cmd + S(Mac) 保存文件。 - 按快捷键
F12，或者在菜单栏选择文件>在浏览器中预览>在 [您的默认浏览器] 中预览。
您会看到一个网页,标题显示“你好，世界！”，下面有一个按钮。点击按钮，标题的颜色就会在红、蓝、绿、紫、橙之间循环切换！
恭喜,您已经成功在 Dreamweaver 中创建了您的第一个交互式网页！
第四部分：进阶技巧与最佳实践
外部 JavaScript 文件 (推荐)
当您的 JavaScript 代码变多时，将它们直接写在 HTML 文件里会让代码变得臃肿，最佳实践是使用外部 .js 文件。
-
创建 JS 文件:
- 在 Dreamweaver 中，选择
文件>新建，选择JavaScript，保存为script.js。
- 在 Dreamweaver 中，选择
-
修改 HTML 文件:
- 删除之前写在 HTML 里的
<script>代码块。 - 在
</body>标签之前，添加一行代码来引入外部文件：
<script src="script.js"></script>
- 删除之前写在 HTML 里的
-
将 JS 代码移入
script.js:- 打开
script.js文件，将之前写的 JavaScript 代码粘贴进去。
- 打开
这样做的好处是：HTML 负责结构，CSS 负责样式，JS 负责行为，三者分离，代码更清晰，也便于复用和维护。
使用 Dreamweaver 的“行为”面板 (传统方法)
对于一些简单的交互,您可以使用 Dreamweaver 的可视化工具——“行为”面板。
- 选择元素: 在“设计”视图或“实时”视图中，选中您想要添加行为的元素（比如一个按钮）。
- 打开行为面板: 选择
窗口>行为。 - 添加行为: 在行为面板中，点击 号，选择一个预设行为，如
交换图像、弹出信息、打开浏览器窗口等。 - 设置事件: Dreamweaver 会自动为该行为添加一个事件（通常是
onClick）。
注意: “行为”面板使用的是一些较旧的 JavaScript 技术（如 Dreamweaver.getBehaviorObject），对于现代 Web 开发，强烈建议您直接编写原生 JavaScript，这样更灵活、更强大，也更符合行业标准。
第五部分：学习资源
- MDN Web Docs (Mozilla 开发者网络): 全球最权威、最全面的 Web 技术文档，对于 JavaScript，它是您最好的朋友。
- W3Schools: 一个简单易懂的在线教程和参考网站，适合初学者快速查找语法。
- YouTube: 搜索 "JavaScript for beginners" 或 "JavaScript tutorial"，有大量优秀的视频教程。
- JavaScript.info: 一本现代、深入且免费的 JavaScript 教程书籍。
希望这份教程能帮助您顺利开启 Dreamweaver JavaScript 之旅！从最简单的例子开始，多练习，多思考，您很快就能掌握这门强大的技术。
