इस पेज का अनुवाद Cloud Translation API से किया गया है.

एचटीएमएल सेवा: टेंप्लेट वाला एचटीएमएल

आप कम से कम डायनामिक पेज बनाने के लिए Apps स्क्रिप्ट कोड और HTML को मिला सकते हैं प्रयास. अगर आपने ऐसी टेंप्लेटिंग भाषा का इस्तेमाल किया है जिसमें कोड और एचटीएमएल, दोनों का इस्तेमाल किया गया है, जैसे PHP, ASP या जेएसपी का सिंटैक्स जाना-पहचाना होना चाहिए.

स्क्रिप्टलेट

Apps Script टेंप्लेट में तीन खास टैग हो सकते हैं. इन्हें स्क्रिप्टलेट कहा जाता है. अंदर की फ़ोटो स्क्रिप्टलेट, आप ऐसा कोई भी कोड लिख सकते हैं जो सामान्य Apps Script में काम करेगा फ़ाइल: स्क्रिप्टलेट अन्य कोड फ़ाइलों में बताए गए फ़ंक्शन को कॉल कर सकते हैं, ग्लोबल वैरिएबल को टारगेट कर सकते हैं या किसी भी Apps Script एपीआई का इस्तेमाल कर सकते हैं. यहाँ तक कि स्क्रिप्टलेट के अंदर फ़ंक्शन और वैरिएबल के साथ-साथ इस बात का भी ध्यान रखते हैं कि वे कोड फ़ाइलों या अन्य टेंप्लेट में तय किए गए फ़ंक्शन के ज़रिए कॉल किया जा सकता है.

अगर नीचे दिया गया उदाहरण स्क्रिप्ट एडिटर में चिपकाया जाता है, तो <?= ... ?> टैग (प्रिंटिंग स्क्रिप्टलेट) इसमें दिखेगा इटैलिक करें. इटैलिक कोड, सर्वर पर पेज दिखाने से पहले चलता है उपयोगकर्ता को. स्क्रिप्टलेट कोड, पेज दिखाने से पहले काम करता है, इसलिए यह प्रति पेज सिर्फ़ एक बार चलाया जा सकता है; क्लाइंट-साइड JavaScript या Apps Script से अलग है जिनके ज़रिए कॉल किया जाता है google.script.run, स्क्रिप्टलेट ये काम नहीं कर सकते पेज लोड होने के बाद फिर से लागू करें.

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>

ध्यान दें कि टेंप्लेट वाले एचटीएमएल के लिए doGet() फ़ंक्शन, उदाहरणों से अलग है बेसिक एचटीएमएल बनाने और दिखाने के लिए. फ़ंक्शन यहां दिखाई गई इमेज से जनरेट होता है एचटीएमएल से लिया गया HtmlTemplate ऑब्जेक्ट फ़ाइल से मेल खाता है, तो evaluate() तरीका स्क्रिप्टलेट को एक्ज़ीक्यूट करना चाहिए और टेंप्लेट को HtmlOutput ऑब्जेक्ट की मदद से बनाया गया उपयोगकर्ता को विज्ञापन दिखाए जा सकते हैं.

स्टैंडर्ड स्क्रिप्टलेट

स्टैंडर्ड स्क्रिप्टलेट, जो सिंटैक्स <? ... ?> का इस्तेमाल करते हैं, बिना कोड के कोड एक्ज़ीक्यूट करते हैं पेज पर कॉन्टेंट को साफ़ तौर पर दिखाना. हालांकि, जैसा कि इस उदाहरण में दिखाया गया है, स्क्रिप्टलेट में मौजूद कोड का result अब भी एचटीएमएल कॉन्टेंट पर असर डाल सकता है स्क्रिप्टलेट के बाहर:

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>

स्क्रिप्टलेट प्रिंट करना

<?= ... ?> सिंटैक्स का इस्तेमाल करने वाले स्क्रिप्टलेट प्रिंट करने पर, ये नतीजे मिलते हैं कॉन्टेक्स्ट के हिसाब से एस्केपिंग का इस्तेमाल करके, पेज में अपने कोड जोड़े.

कॉन्टेक्स्चुअल एस्केपिंग का मतलब है कि Apps Script, आउटपुट के कॉन्टेक्स्ट को ट्रैक करती है पेज पर — एचटीएमएल एट्रिब्यूट में, क्लाइंट-साइड script टैग में या किसी अन्य जगह पर — और अपने-आप एस्केप कैरेक्टर जोड़ देता है क्रॉस-साइट स्क्रिप्टिंग (XSS) के हमलों से सुरक्षा के लिए.

इस उदाहरण में, पहला प्रिंटिंग स्क्रिप्टलेट सीधे तौर पर एक स्ट्रिंग देता है; यह है एक स्टैंडर्ड स्क्रिप्टलेट है, जो अरे और लूप सेट करता है. इसके बाद, अरे के कॉन्टेंट को आउटपुट करने के लिए, एक और प्रिंटिंग स्क्रिप्टलेट.

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>

ध्यान दें कि प्रिंटिंग स्क्रिप्टलेट सिर्फ़ अपने पहले स्टेटमेंट की वैल्यू देता है; कोई भी बाकी स्टेटमेंट ऐसे काम करते हैं जैसे वे किसी स्टैंडर्ड में शामिल हैं स्क्रिप्टलेट. इसलिए, उदाहरण के लिए, सिर्फ़ स्क्रिप्टलेट <?= 'Hello, world!'; 'abc' ?> प्रिंट करता है "हैलो, दुनिया!"

स्क्रिप्टलेट ज़बरदस्ती प्रिंट करना

फ़ोर्स-प्रिंटिंग स्क्रिप्टलेट, जो <?!= ... ?> सिंटैक्स का इस्तेमाल करते हैं, प्रिंटिंग की तरह होते हैं स्क्रिप्टलेट, सिर्फ़ कॉन्टेक्स्ट के हिसाब से एस्केपिंग से बचें.

अगर आपकी स्क्रिप्ट में उपयोगकर्ता के ऐसे इनपुट की अनुमति है जिस पर भरोसा नहीं किया जा सकता, तो कॉन्टेक्स्ट के हिसाब से एस्केप करना ज़रूरी है. इन्होंने बदलाव किया है इसके अलावा, अगर स्क्रिप्टलेट का आउटपुट जान-बूझकर आउटपुट किया जाता है, तो आपको फ़ोर्स-प्रिंट करनी होगी. में ऐसे HTML या स्क्रिप्ट हैं जिन्हें आप ठीक वैसे ही शामिल करना चाहते हैं जैसा बताया गया है.

सामान्य नियम के तौर पर, फ़ोर्स-प्रिंटिंग स्क्रिप्टलेट के बजाय प्रिंटिंग स्क्रिप्टलेट का इस्तेमाल करें अगर आपको नहीं पता कि आपको एचटीएमएल या JavaScript को बिना बदलाव के प्रिंट करने की ज़रूरत है.

स्क्रिप्टलेट में Apps Script कोड

स्क्रिप्टलेट, सामान्य JavaScript चलाने तक सीमित नहीं हैं; आप किसी भी टूल का इस्तेमाल भी कर सकते हैं में बताए गए तरीके का इस्तेमाल करके, अपने टेंप्लेट को Apps Script का ऐक्सेस दें. डेटा शामिल है.

हालांकि, याद रखें कि पेज दिखाने से पहले टेंप्लेट कोड काम करता है इन तकनीकों का इस्तेमाल करते समय, ये तकनीक किसी पेज पर सिर्फ़ शुरुआती कॉन्टेंट को फ़ीड कर सकती हैं. ऐक्सेस करने के लिए किसी पेज के Apps Script डेटा के लिए, इंटरैक्टिव तरीके से google.script.run एपीआई का इस्तेमाल करें.

किसी टेंप्लेट से Apps Script फ़ंक्शन को कॉल करना

स्क्रिप्टलेट, Apps Script कोड फ़ाइल या लाइब्रेरी में बताए गए किसी भी फ़ंक्शन को कॉल कर सकते हैं. इस उदाहरण में, स्प्रेडशीट से डेटा को टेंप्लेट में लेने का एक तरीका बताया गया है. इसके बाद, डेटा से एक एचटीएमएल टेबल बनाएं.

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 Script एपीआई को सीधे कॉल करना

Apps Script कोड का इस्तेमाल, सीधे स्क्रिप्टलेट में भी किया जा सकता है. यह उदाहरण में डेटा लोड करके पिछले उदाहरण के समान परिणाम को प्राप्त करता है टेंप्लेट का इस्तेमाल करने के बजाय, डिफ़ॉल्ट तौर पर सेट किया जाता है.

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>

वैरिएबल को टेंप्लेट में पुश करना

आखिर में, वैरिएबल को प्रॉपर्टी के तौर पर असाइन करके उन्हें टेंप्लेट में पुश किया जा सकता है HtmlTemplate ऑब्जेक्ट में से. एक बार इस उदाहरण में वही नतीजा दिया गया है जो पिछले उदाहरणों में दिया गया था.

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>

डीबग करने के टेंप्लेट

टेंप्लेट को डीबग करना मुश्किल हो सकता है, क्योंकि आपने जो कोड लिखा है उसे एक्ज़ीक्यूट नहीं किया जा सकता सीधे; इसके बजाय, सर्वर आपके टेंप्लेट को कोड में बदलता है और फिर मिलने वाला कोड.

अगर यह साफ़ तौर पर नहीं पता कि टेंप्लेट आपके स्क्रिप्टलेट को कैसे समझ रहा है, तो दो में डीबग करने का तरीका HtmlTemplate क्लास आपकी मदद कर सकती है कि क्या चल रहा है.

getCode()

getCode(), नतीजे के तौर पर स्ट्रिंग में वह कोड शामिल होता है जिसे सर्वर, टेंप्लेट से बनाता है. अगर आपको लॉग करें कोड में डालें, फिर उसे स्क्रिप्ट एडिटर में पेस्ट करें, आप उसे चला सकते है और इसे सामान्य तरीके से डीबग करें Apps Script कोड.

यहां एक आसान टेंप्लेट दिया गया है, जो Google प्रॉडक्ट की सूची को फिर से दिखाता है, इसके बाद getCode() का नतीजा:

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>

लॉग (परफ़ॉर्मेंस की जांच की गई)

(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() से मिलता-जुलता है, लेकिन जांचे गए कोड को ऐसी टिप्पणियों के तौर पर दिखाता है विज्ञापन, मूल टेंप्लेट के साथ-साथ दिखते हैं.

आकलन किए गए कोड की जांच करना

जांचे गए कोड के सैंपल में जो पहली चीज़ आपको दिखेगी वह है, इंप्लिसिट output ऑब्जेक्ट, HtmlService.initTemplate() तरीके से बनाया गया. यह तरीका दस्तावेज़ में नहीं बताया गया है, क्योंकि इसका इस्तेमाल सिर्फ़ टेंप्लेट करते हैं. output दो वाला खास HtmlOutput ऑब्जेक्ट असामान्य नाम वाली प्रॉपर्टी, _ और _$, जो कॉल करने के लिए छोटी हैं append() और appendUntrusted().

output में एक और खास प्रॉपर्टी $out है, जो सामान्य प्रॉपर्टी है HtmlOutput ऑब्जेक्ट जिसमें ये खास प्रॉपर्टी नहीं हैं. टेम्प्लेट कोड के आखिर में वह सामान्य ऑब्जेक्ट दिखाता है.

अब आपको यह सिंटैक्स समझ आ गया है, इसलिए बाकी कोड काफ़ी आसान होने चाहिए चुनें. स्क्रिप्टलेट के बाहर का एचटीएमएल कॉन्टेंट (जैसे कि b टैग) जुड़ा हुआ है output._ = का इस्तेमाल करके (संदर्भ के हिसाब से एस्केपिंग के बिना), और स्क्रिप्टलेट को JavaScript के रूप में जोड़ा जाता है (संदर्भ के साथ या इसके बिना, स्क्रिप्टलेट के टाइप के आधार पर).

ध्यान दें कि आकलन किया गया कोड, टेंप्लेट के लाइन नंबर को सुरक्षित रखता है. अगर आपको आकलन किया गया कोड रन करते समय कोई गड़बड़ी मिलेगी, तो लाइन मिलता-जुलता कॉन्टेंट डाला गया है.

टिप्पणियों की हैरारकी

क्योंकि मूल्यांकन किया गया कोड लाइन नंबर को सुरक्षित रखता है, इसलिए टिप्पणियों के लिए यह मुमकिन है का इस्तेमाल करें, ताकि अन्य स्क्रिप्टलेट और एचटीएमएल कोड पर भी टिप्पणी की जा सके. ये उदाहरणों में टिप्पणियों के कुछ चौंकाने वाले असर दिखते हैं:

<? 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. */ ?>