使用 Google Apps 脚本开发 Web 应用程序/响应用户

用于用户界面的 JavaScript

本书重点介绍如何利用您的 Google 帐户创建数据驱动的 Web 应用程序。它不会过多介绍如何创建您的用户界面。在本节中，我将提供一些简单的示例，其中一些甚至不遵循最佳实践，但它们是您可以尝试的一些快速简便的方法，用于验证某些原理。

用户点击某些内容

HTML 中几乎所有元素都可以添加 onClick 函数。这包括

• 按钮
• 文本（最容易使用 span 标签完成）
• 列表项

onClick 通常不被认为是正确的方法，但如果您确定这是用户交互时该元素唯一要执行的操作，那么它可以为您工作。^[1]

以下是一些简单的 HTML/JavaScript 代码，当用户按下按钮时，会打开一个显示“您点击了我”的警报框

<button type="button" onClick="openAlert('press me')">press me</button> <!-- note the use of both types of quotes -->

<script>
function openAlert(text){
   alert(text);
   }
</script>

更新页面上的某些文本

警报框很烦人，不要使用它们。相反，让用户的操作改变页面上的内容。以下是上一个示例的更新版本，现在按下按钮会在按钮下方页面上添加一些文本

<button type="button" onClick="openAlert('press me')">press me</button> <!-- note the use of both types of quotes -->
<div id='emptyatfirst'></div>

<script>
function openAlert(text){
   document.getElementById('emptyatfirst').innerHTML=text;
   }
</script>

如果您计划对 div 内的文本进行大量更改，您可能需要创建一个全局变量，如下所示：^[2]

<button type="button" onClick="openAlert('press me')">press me</button> <!-- note the use of both types of quotes -->
<div id='emptyatfirst'></div>

<script>
// here's a global variable:
var emptyatfirst=document.getElementById('emptyatfirst');
function openAlert(text){
   emptyatfirst.innerHTML=text; // this uses the global variable
   }
</script>