芯耀
与非AI
230
一、renderer.js 的作用
接着上一章项目中：
src/renderer.js
属于：
渲染进程脚本
负责：
- 页面交互
- 按钮事件
- 修改页面内容
- DOM 操作
- 前端逻辑
二、Electron 页面运行流程
当前页面运行流程：
index.html
↓
加载 renderer.js
↓
JavaScript 操作页面
三、先理解 DOM
网页中的：
<button id="btn">
会变成：
页面对象
JavaScript 可以：
- 获取它
- 修改它
- 监听点击
- 改变样式
四、获取页面元素
HTML
修改：
index.html
在按钮下面增加：
<div id="text">
等待点击
</div>
页面变成：
<body>
<div class="container">
<h1>Electron 学习</h1>
<button id="btn">
点击按钮
</button>
<div id="text">
等待点击
</div>
</div>
<script type="module" src="/src/renderer.js"></script>
</body>
五、开始写 renderer.js
打开：
src/renderer.js
清空默认内容。
替换为：
const btn = document.getElementById('btn')
const text = document.getElementById('text')
btn.addEventListener('click', () => {
text.innerText = '按钮被点击了'
})
六、效果说明
点击按钮后：
等待点击
会变成：
按钮被点击了
七、代码详细解析
1. 获取按钮
const btn = document.getElementById('btn')
作用：
获取页面中的按钮对象
对应：
<button id="btn">
2. 获取文本区域
const text = document.getElementById('text')
对应：
<div id="text">
3. addEventListener
btn.addEventListener()
作用：
监听事件
4. click
'click'
表示：
鼠标点击事件
5. 箭头函数
() => {
}
表示：
点击后执行的代码
6. innerText
text.innerText
作用：
修改文本内容
八、继续升级：计数器
现在实现：
点击次数统计
修改 renderer.js
替换为：
const btn = document.getElementById('btn')
const text = document.getElementById('text')
let count = 0
btn.addEventListener('click', () => {
count++
text.innerText = `按钮点击次数：${count}`
})
九、学习新知识：变量
let
let count = 0
表示：
定义变量
十、学习新知识：模板字符串
`按钮点击次数：${count}`
作用：
把变量拼接到字符串中
十一、继续升级：修改按钮颜色
renderer.js
继续增加：
btn.style.background = '#10b981'
完整代码：
const btn = document.getElementById('btn')
const text = document.getElementById('text')
let count = 0
btn.addEventListener('click', () => {
count++
text.innerText = `按钮点击次数：${count}`
btn.style.background = '#10b981'
})
十二、效果
点击按钮后：
- 文本变化
- 按钮变绿色
十三、DOM 操作思想
JavaScript 页面开发核心：
获取元素
↓
监听事件
↓
修改页面
这就是：
前端交互逻辑
十四、常见 DOM 操作
修改文本
element.innerText = '内容'
修改 HTML
element.innerHTML = '<b>内容</b>'
修改颜色
element.style.color = 'red'
修改背景
element.style.background = '#2563eb'
隐藏元素
element.style.display = 'none'
显示元素
element.style.display = 'block'
十五、本章重点
本章核心内容：
1. renderer.js 负责页面逻辑
2. document.getElementById()
用于获取页面元素。
3. addEventListener()
用于监听事件。
4. innerText
用于修改页面文本。
5. JavaScript 可以动态修改页面
包括：
- 文本
- 颜色
- 样式
- 显示状态
阅读全文
