跳轉到內容

使用 Google Apps Script 開發網頁應用/語法

來自 Wikibooks,開放的書籍,開放的世界

Ajax 代表“非同步 JavaScript 和 XML”,它使網頁能夠在不重新載入頁面的情況下與伺服器通訊。

在 Google Apps Script 中,可以使用 google.script.run 工具來實現。此命令有多種變體,可以在 Google 伺服器上執行 JavaScript 程式碼,並可能將資訊返回到網頁。

例如,如果您想將姓名傳送到伺服器,然後檢查它是否在電子表格中,並返回 true 如果存在,返回 false 如果不存在,您可以將其設定為變數,您可以這樣做

首先是伺服器端程式碼

function doGet(){
   var t=HtmlService.createFileFromTemplate("main");
   return t.evaluate();
   }
   
function runOnServer(name){
   return checkInSpreadsheet(name); // this would be a function you'd write to check the spreadsheet
   }

現在是“main.html”中包含您要執行的 JavaScript 的部分

google.script.withSuccessHandler(dealWithReturn).runOnServer("Andy");

function dealWithReturn(e){
  if(e) {
     alert("yep that name's in there");
     } else {
        alert("nope, that name's not in there");
   }

流程是:主 JavaScript -> 伺服器上的函式 -> 將資料返回到您的 SuccessHandler -> 您的 successHandler 執行某些操作。

陣列編號

[編輯 | 編輯原始碼]

一個簡單(而且可以原諒)的錯誤是在將資料在 Google 表格和 JavaScript 之間來回移動時,陣列編號發行人會導致行或列偏移。JavaScript 從零開始編號,而 Google 表格從 1 開始編號。以下是一個示例

var coolArray=[1,2,3,5,7,11]; // why not 9? because it's not prime!
var myCoolSheet = SpreadsheetApp.getActive().getSheetByName("my cool sheet");
// this is a dumb way to put data into a sheet but it points out the numbering difference
coolArray.forEach((item,i)=>{
                              // myCoolSheet.getRange(i,1).setValue(item); this fails
                              myCoolSheet.getRange(i+1,1).setValue(item); // this works
                             }) // don't forget to close everything

如果您需要篩選陣列,請使用,嗯,filter

var people = [{name: "Andy", age: 48}, {name: "Ash", age: 20}, {name: "Char", age: 18}];
// get people under 30:
var youngPeople = people.filter(person=>person["age"]<30) // note that "person" didn't need to be initialized

查詢forEach對映 一樣,您也可以使用索引,如果您願意

var people = [{name: "Andy", age: 48}, {name: "Ash", age: 20}, {name: "Char", age: 18}];
// get people under 30 but not those with an index less than 2
var youngPeople = people.filter((person,i)=>person["age"]<30&&i>=2) // note that "person" didn't need to be initialized

如果您需要在陣列中查詢元素,find 非常有用

var array=[{name: "Andy", age: 48}, {name: "Ash", age: 20}]; // an array of objects
var ashObject = array.find(person=>person["name"]=="Ash"); // returns the first element that gives "true" for the check

如果您需要遍歷陣列並對每個元素執行操作,您可以當然這樣做

var array=["apple", "orange", "banana"];
for (var i=0; i<array.length; i++) {
   doSomethingCool(array[i]);
   }

但您也可以這樣做,我認為它更易讀

var array=["apple", "orange", "banana"];
array.forEach(fruit=>doSomethingCool(fruit));

請注意,您不必以這種方式初始化“i”變數。

如果您需要訪問專案(水果)及其在陣列中的位置(索引)

var array=["apple", "orange", "banana"];
array.forEach((fruit,i)=>doSomethingElseCool(fruit,i));

請注意 fruit, i 周圍的括號,它們使這種魔法起作用。還要注意,您仍然不必宣告 i 變數!

如果您要檢視陣列是否包含特定元素,請嘗試 includes

var myArray=["apple", "orange", "banana"];
if(myArray.includes("green beans")) {
   // do something to say that green beans isn't in the array
   }

forEach 類似,map 是一個很棒的方法,可以基於現有陣列建立新陣列。假設您想在陣列中的一些文本週圍新增一個標籤

var array=["apple", "orange", "banana"];
var newarray = array.map(fruit=>`<b>${fruit}</b>`)

您也可以輕鬆訪問陣列中專案的索引

var array=["apple", "orange", "banana"];
var newarray = array.map((fruit,i)=>`${fruit} is at index ${i} in the array`)

對陣列進行排序非常有價值,有時也很痛苦。假設您有一個來自電子表格的二維陣列,其中包含“姓名”、“年齡”、“電子郵件”列。如果您想按年齡對它們進行排序,請執行以下操作

var data=... // data from spreadsheet
data.sort((a,b)=>a[1]-b[1]);

實際上,sort 需要在確定誰應該排在前面時返回 true 或 false,但透過減去兩個數字,如果得到零或負數,則將其視為 false,而正數將被視為 true。

如果您想按年齡和姓名(按字母順序)排序,您可以這樣做

var data=... // data from spreadsheet
data.sort((a,b)=>(a[1]>b[1])&&(a[0] < b[0]))
華夏公益教科書