向 Rails 应用程序添加 JavaScript 资源
在 上一教程中，我们创建了一个简单的 Rails 应用程序，其中的视图仅包含静态文本。 在本指南中，我们将在网页上添加一个按钮，并使用 JavaScript 资源在客户端处理按钮点击。
在开始本教程之前，请重复 上一教程中的步骤以创建基本的 Rails 应用程序。 此应用程序引用了用于管理 JavaScript 模块的 Webpacker gem。
更新视图
首先，我们需要在视图中添加一个按钮，并引用一个将包含 JavaScript 处理程序的文件：
打开 app/views/welcome/index.html.erb 文件。
请添加以下代码：
<h1>Hello, Rails!</h1> <button id="greet-user-button">Hello!</button> <%= javascript_pack_tag 'hello'%>除了
h1标签内的现有静态文本外，视图文件还包含：一个按钮
tag，用于添加具有特定标识符的按钮。javascript_pack_tag辅助方法用于创建引用 pack 文件的脚本标签。 在我们的代码中，这应该是将在 下一章节中创建的 hello.js 文件。
添加 JavaScript 处理程序
要创建一个包含处理按钮点击代码的 JavaScript 文件，请按照以下步骤操作：
在项目视图 Alt+1 中，选择 app/javascript/packs 目录。
按 Alt+Insert 并在弹出的窗口中选择 JavaScript 文件。
指定文件名（在本例中为 hello ），然后按 Enter。
在创建的 hello.js 文件中，添加以下代码：
function hello(name) { let greeting = "Hello, " + name + "!"; console.log(greeting); alert(greeting); } document.addEventListener('turbolinks:load', () => { const clickButton = document.getElementById("greet-user-button"); clickButton.addEventListener('click', (event) => { hello('JavaScript') }); });在此脚本中，我们已：
创建了
您好函数，该函数将消息写入 Web 控制台并显示包含此消息的警告对话框。为我们的网页附加了一个事件监听器，以便在用户点击按钮时调用
您好函数。
启动网络服务器
要查看我们的应用程序运行效果，您需要启动 Web 服务器。
按 Ctrl 两次并开始键入 开发。
从列表中选择 开发 运行配置并按 Enter。
RubyMine 将展示准备运行应用程序的过程。
复制 Web 服务器使用的 http://0.0.0.0:3000/welcome/index 地址，将其插入浏览器的地址栏，然后按 Enter 以查看 welcome/index 页面。 然后，点击 您好! 按钮以查看警告。
