Minimum düzeyde maliyetle dinamik sayfalar oluşturmak için Apps Komut Dosyası kodu ile HTML'yi birlikte kullanabilirsiniz. çaba sarf etmeniz gerekir. Kod ve HTML'yi bir araya getiren bir şablon oluşturma dili (ör. PHP, ASP veya JSP'de kullanıyorsanız söz dizimi size tanıdık gelmelidir.
Komut Dosyaları
Apps Komut Dosyası şablonları, komut dosyası adı verilen üç özel etiket içerebilir. İç mekan komut dosyasıyla normal bir Apps Komut Dosyası'nda çalışacak herhangi bir kod yazabilirsiniz dosya: komut dosyaları, diğer kod dosyalarında tanımlanan işlevleri çağırabilir, referans veya Apps Komut Dosyası API'lerinden herhangi birini kullanabilirsiniz. Bir projenin başarısını komut dosyalarında bulunan işlevleri ve değişkenleri kullanarak kod dosyalarında veya diğer şablonlarda tanımlanan işlevler tarafından çağrılır.
Aşağıdaki örneği komut dosyası düzenleyiciye yapıştırırsanız
<?= ... ?> etiketi (bir yazdırma komut dosyası)
italik. İtalik yazılmış kod, sayfa sunulmadan önce sunucuda çalışır
teşekkür ederiz. Komut dosyası kodu, sayfa sunulmadan önce yürütüldüğü için
Sayfa başına yalnızca bir kez çalıştırılabilir. istemci taraflı JavaScript veya Apps Komut Dosyası'ndan farklı olarak
çağırdığınız işlevler
google.script.run, komut dosyası uygulamaları
yürütülebilir.
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, World! The time is <?= new Date() ?>.
</body>
</html>
Şablonlu HTML için doGet() işlevinin örneklerden farklı olduğuna dikkat edin
temel HTML oluşturmak ve sunmak için. İşlev
burada gösterilen resim,
HTML'deki HtmlTemplate nesnesi
dosyasını çağırır, ardından
evaluate() yöntemini kullanarak
komut dosyalarını çalıştırmak ve şablonu bir
HtmlOutput
kullanıcıya içerik sunabilir.
Standart komut dosyaları
<? ... ?> söz dizimini kullanan standart komut dosyaları, kodu
net bir şekilde kodlayabilirsiniz. Ancak bu örnekte gösterildiği gibi
komut dosyası içindeki kodun sonucu, HTML içeriğini yine de etkileyebilir
komut dosyasının dışına ekleyin:
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? if (true) { ?>
<p>This will always be served!</p>
<? } else { ?>
<p>This will never be served.</p>
<? } ?>
</body>
</html>
Komut dosyalarını yazdırma
<?= ... ?> söz dizimini kullanan komut dosyaları, yazdırılan komut dosyalarını
bağlamsal kaçış yöntemini kullanarak kodlarını sayfaya iletir.
Bağlamsal çıkış, Apps Komut Dosyası'nın çıktının bağlamını izlemesini sağlar.
sayfada: bir HTML özelliğinin içinde, istemci tarafı script etiketinin içinde veya
başka herhangi bir yere ekler ve otomatik olarak kaçış karakterlerini ekler.
siteler arası komut dosyası çalıştırma (XSS) saldırılarına karşı koruma sağlamak için.
Bu örnekte, ilk yazdırma komut dosyası doğrudan bir dize üretir; bu ardından bir dizi ve döngü oluşturan standart bir komut dosyası ile devam eder. başka bir yazdırma komut dosyası kullanarak dizinin içeriğini çıkarır.
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?= 'My favorite Google products:' ?>
<? var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
Yazdırma komut dosyasının yalnızca ilk ifadesinin değerini ürettiğine dikkat edin;
kalan ifadeler, standart bir
komut dosyasıyla aynıdır. Bu nedenle, örneğin yalnızca <?= 'Hello, world!'; 'abc' ?> komut dosyası
"Merhaba dünya!"
Komut dosyalarını zorla yazdırma
<?!= ... ?> söz dizimini kullanan komut dosyaları, zorla yazdırmaya benzer.
komut dosyası uygulamalarını hariç tutabilirsiniz.
Komut dosyanız güvenilir olmayan kullanıcı girişine izin veriyorsa bağlamsal çıkış önemlidir. Ölçüt Öte yandan, komut dosyası çıktınızı kasıtlı olarak ürettiyseniz zorla yazdırmanız gerekir. tam olarak belirtildiği şekilde eklemek istediğiniz HTML veya komut dosyaları içeriyorsa.
Genel bir kural olarak, komut dosyalarını zorla yazdırmak yerine komut dosyası uygulamalarını kullanın Ancak, HTML veya JavaScript'i değiştirmeden yazmanız gerektiğini bilmiyorsanız.
Komut dosyalarındaki Apps Komut Dosyası kodu
Komut dosyaları, normal JavaScript'i çalıştırmakla sınırlı değildir; kullanabileceğiniz şablonlarınıza Apps Komut Dosyası'na erişim izni vermek için aşağıdaki üç teknikten birini kullanabilirsiniz. verileri.
Ancak şablon kodu sayfa sunulmadan önce yürütüldüğü için
bu teknikler bir sayfaya yalnızca başlangıç içeriğini sunabilir. Erişmek için
Bir sayfadaki Apps Komut Dosyası verilerini etkileşimli olarak kullanmak için
Bunun yerine google.script.run API'yi kullanın.
Bir şablondan Apps Komut Dosyası işlevlerini çağırma
Komut dosyası uygulamaları, Apps Komut Dosyası kod dosyasında veya kitaplığında tanımlanan herhangi bir işlevi çağırabilir. Bu örnekte, bir e-tablodan şablona veri çekmenin bir yolu gösterilmektedir. verilerden bir HTML tablosu oluşturma.
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? var data = getData(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
Apps Komut Dosyası API'lerini doğrudan çağırma
Apps Komut Dosyası kodunu doğrudan komut dosyalarında da kullanabilirsiniz. Bu örnek verileri şablonunun kendisidir.
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('Index')
.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<? var data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues(); ?>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
Değişkenleri şablonlara aktarma
Son olarak, değişkenleri özellik olarak atayarak bir şablona aktarabilirsiniz
(HtmlTemplate nesnesinin) Bir kez
bu örnek, önceki örneklerle aynı sonucu verir.
Code.gs
function doGet() {
var t = HtmlService.createTemplateFromFile('Index');
t.data = SpreadsheetApp
.openById('1234567890abcdefghijklmnopqrstuvwxyz')
.getActiveSheet()
.getDataRange()
.getValues();
return t.evaluate();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
Hata ayıklama şablonları
Yazdığınız kod yürütülmediğinden şablonlarda hata ayıklaması zor olabilir directly; bunun yerine sunucu, şablonunuzu koda dönüştürür ve ardından koda ekleyebilirsiniz.
Şablonun komut dosyanızı nasıl yorumladığı tam olarak anlaşılmıyorsa iki
hata ayıklama yöntemlerini
HtmlTemplate sınıfı size yardımcı olabilir
daha iyi anlamaktır.
getCode()
getCode(), bir
sunucunun şablondan oluşturduğu kodu içeren dize. Şu durumda:
günlüğe kaydedin
ve ardından komut dosyası düzenleyicisine yapıştırın. Ardından, bu kodu çalıştırabilir ve
Normalde olduğu gibi hata ayıkla
Apps Komut Dosyası kodu.
Burada, Google ürünlerinin listesini tekrar gösteren basit şablonu görebilirsiniz.
ardından getCode() sonucunun sonucu:
Code.gs
function myFunction() {
Logger.log(HtmlService
.createTemplateFromFile('Index')
.getCode());
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<?= 'My favorite Google products:' ?>
<? var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ?>
<b><?= data[i] ?></b>
<? } ?>
</body>
</html>
GÜNLÜK (DEĞERLENDİRİLDİ)
(function() { var output = HtmlService.initTemplate(); output._ = '<!DOCTYPE html>\n';
output._ = '<html>\n' +
' <head>\n' +
' <base target=\"_top\">\n' +
' </head>\n' +
' <body>\n' +
' '; output._$ = 'My favorite Google products:' ;
output._ = ' '; var data = ['Gmail', 'Docs', 'Android'];
for (var i = 0; i < data.length; i++) { ;
output._ = ' <b>'; output._$ = data[i] ; output._ = '</b>\n';
output._ = ' '; } ;
output._ = ' </body>\n';
output._ = '</html>';
/* End of user code */
return output.$out.append('');
})();
getCodeWithComments()
getCodeWithComments()
getCode() öğesine benzer, ancak değerlendirilen kodu
orijinal şablonla yan yana görünür.
Değerlendirilen kodların üzerinden geçme
Değerlendirilen kodların her iki örneğinde de ilk fark edeceğiniz şey,
HtmlService.initTemplate() yöntemi tarafından output nesnesi oluşturuldu. Bu yöntem
Yalnızca şablonların kullanması gerektiğinden belgelenmemiştir. output bir
ikili özel HtmlOutput nesnesi
çağırmanın kısaltmaları olarak kullanılan, alışılmadık şekilde adlandırılmış özellikler, _ ve _$
append() ve
appendUntrusted()
output bir tane daha özel özelliğe sahiptir, $out ve bu özellik,
HtmlOutput nesnesi bu özel özelliklere sahip değil. Şablon
kodundaki normal nesneyi döndürür.
Bu söz dizimini anladığınıza göre kodun geri kalanı
anlamak önem taşıyor. Komut dosyası uygulamalarının dışındaki HTML içeriği (b etiketi gibi) eklenir
output._ = kullanarak (içeriğe dayalı çıkış olmadan),
komut dosyaları JavaScript olarak eklenir (içeriğe dayalı çıkışlı ya da kapalı olsa da olmasa da)
(ör. komut dosyasının türüne göre).
Değerlendirilen kodun şablondaki satır numaralarını koruduğunu unutmayın. Şu durumda: değerlendirilen kodu çalıştırırken bir hata alırsanız satır, eşdeğer içerik ekleyin.
Yorum hiyerarşisi
Değerlendirilen kod satır numaralarını koruduğundan, yorumlar otomatik olarak diğer komut dosyalarını ve hatta HTML kodlarını yorumlayabilmek için kullanabilirsiniz. Bu Aşağıda yorumların birkaç şaşırtıcı etkisine örnekler verilmiştir:
<? var x; // a comment ?> This sentence won't print because a comment begins inside a scriptlet on the same line.
<? var y; // ?> <?= "This sentence won't print because a comment begins inside a scriptlet on the same line.";
output.append("This sentence will print because it's on the next line, even though it's in the same scriptlet.”) ?>
<? doSomething(); /* ?>
This entire block is commented out,
even if you add a */ in the HTML
or in a <script> */ </script> tag,
<? until you end the comment inside a scriptlet. */ ?>