डेवलपर की गाइड

एम्बेड किए गए व्यूअर एपीआई की मदद से, Google Books से किताब का कॉन्टेंट, सीधे अपने वेब पेजों में JavaScript की मदद से एम्बेड किया जा सकता है. यह एपीआई किताब की झलक में हेर-फेर करने के लिए भी कई सुविधाएं देता है और इस साइट पर बताए गए दूसरे एपीआई के साथ इसका इस्तेमाल अक्सर किया जाता है.

झलक देखें विज़र्ड, एम्बेड किए गए व्यूअर एपीआई के ऊपर बनाया गया एक टूल है. इसकी मदद से, आपकी साइट पर झलक देखने की सुविधाएं आसानी से जोड़ी जा सकती हैं. इसके लिए, आपको बस कुछ लाइनों के कोड को कॉपी करना होगा. यह दस्तावेज़, उन बेहतर डेवलपर के लिए है जो अपनी साइटों पर व्यूअर के दिखने के तरीके को पसंद के मुताबिक बनाना चाहते हैं.

दर्शक

यह दस्तावेज़, JavaScript प्रोग्रामिंग और ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग के कॉन्सेप्ट के बारे में जानने वाले लोगों के लिए बनाया गया है. आपको उपयोगकर्ता के नज़रिए से, Google Books के बारे में भी जानकारी होनी चाहिए. वेब पर कई JavaScript ट्यूटोरियल उपलब्ध हैं.

यह कॉन्सेप्ट वाला दस्तावेज़ पूरा और बेहतर नहीं है. इसे इसलिए डिज़ाइन किया गया है, ताकि आप Embedded Viewer API की मदद से, बेहतर ऐप्लिकेशन को तुरंत एक्सप्लोर और डेवलप कर सकें. ऐडवांस उपयोगकर्ताओं को एम्बेड किए गए व्यूअर एपीआई का रेफ़रंस पढ़ना चाहिए. इसमें, काम करने वाले तरीकों और जवाबों के बारे में पूरी जानकारी मिलती है.

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

Embedded Viewer API का "नमस्ते, दुनिया"

एम्बेड किए गए दर्शक के एपीआई के बारे में जानने का सबसे आसान तरीका, इसका एक आसान उदाहरण देखना है. यहां दिए गए वेब पेज पर, Mountain View की 600x500 वाली झलक दिखाई गई है. इसे लिखा है, Nicholas Perry ने. ISBN 0738531367 (Arcadia Publishing की "Images of America" सीरीज़ का हिस्सा):

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Books Embedded Viewer API Example</title>
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
    <script type="text/javascript">
      google.books.load();

      function initialize() {
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
        viewer.load('ISBN:0738531367');
      }

      google.books.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="viewerCanvas" style="width: 600px; height: 500px"></div>
  </body>
</html>

यह उदाहरण देखें और इसे डाउनलोड करके, उसमें बदलाव करें और उससे खेलें. इस आसान उदाहरण में भी, ध्यान देने के लिए पांच चीज़ें हैं:

  1. हम script टैग का इस्तेमाल करके, एपीआई लोडर को शामिल करते हैं.
  2. हम दर्शक को होल्ड करने के लिए, "viewerCanvas" नाम का div एलिमेंट बनाते हैं.
  3. हम "दर्शक" ऑब्जेक्ट बनाने के लिए, JavaScript फ़ंक्शन लिखते हैं.
  4. हम किताब को उसके यूनीक आइडेंटिफ़ायर (इस मामले में ISBN:0738531367) का इस्तेमाल करके लोड करते हैं.
  5. एपीआई पूरी तरह लोड होने के बाद, हम initialize को कॉल करने के लिए google.books.setOnLoadCallback का इस्तेमाल करते हैं.

इन चरणों से जुड़ी ज़्यादा जानकारी नीचे दी गई है.

एम्बेड किया गया दर्शक एपीआई लोड करना

एम्बेड किए गए व्यूअर एपीआई को लोड करने के लिए, एपीआई लोडर फ़्रेमवर्क का इस्तेमाल करना आसान है. इसके लिए, ये दो चरण पूरे करें:

  1. एपीआई लोडर लाइब्रेरी शामिल करें: 
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
  2. google.books.load तरीका शुरू करें. google.books.load का इस्तेमाल करने पर, कॉलबैक फ़ंक्शन या भाषा की जानकारी देने वाली सूची का पैरामीटर ज़रूरी नहीं होता. इस बारे में यहां बताया गया है. 
    <script type="text/javascript">
  google.books.load();
</script>

एम्बेड किए गए दर्शक के एपीआई का स्थानीय भाषा में अनुवाद किया गया वर्शन लोड करना

एम्बेड किए गए व्यूअर एपीआई में, टेक्स्ट की जानकारी दिखाने के लिए डिफ़ॉल्ट रूप से अंग्रेज़ी का इस्तेमाल किया जाता है. जैसे, टूलटिप, कंट्रोल के नाम, और लिंक टेक्स्ट. अगर आपको किसी खास भाषा में जानकारी सही तरीके से दिखाने के लिए, एम्बेड किए गए दर्शक के एपीआई को बदलना है, तो अपने google.books.load कॉल में वैकल्पिक language पैरामीटर जोड़ा जा सकता है.

उदाहरण के लिए, ब्राज़ील में बोली जाने वाली पॉर्चगीज़ इंटरफ़ेस भाषा के साथ किताब की झलक वाला मॉड्यूल दिखाने के लिए:

<script type="text/javascript">
  google.books.load({"language": "pt-BR"});
</script>

उदाहरण देखें (book-language.html)

आपको आरएफ़सी 3066, आरएफ़सी 3066, अब पहले से उपलब्ध होने वाली आरएफ़सी 3066, आरएफ़सी 3066 का फ़िलहाल, आरएफ़सी 3066 के साथ काम करने वाली आर आरएफ़सी 3066, अब पहले से उपलब्ध होने वाले, आर आरएफ़सी 3066 के इन भाषाओं के कोड शामिल हैं, तो आपको अब या इसका इस्तेमाल होने वाले आरएफ़सी 3066, अब या इसका ' आर आर आरएफ़सी 3066 के इन भाषाओं के कोड शामिल हैं, - ( आपको हो,

अंग्रेज़ी के अलावा किसी दूसरी भाषा में एम्बेड किए गए व्यूअर एपीआई का इस्तेमाल करते समय, हमारा सुझाव है कि आप अपने पेज को content-type हेडर के साथ utf-8 पर सेट करके दिखाएं या अपने पेज में मिलता-जुलता <meta> टैग शामिल करें. ऐसा करने से यह पक्का करने में मदद मिलती है कि वर्ण सभी ब्राउज़र में सही तरीके से रेंडर हो रहे हैं. ज़्यादा जानकारी के लिए, एचटीटीपी कोड के लिए इस्तेमाल होने वाले वर्णों के सेट को सेट करने के बारे में W3C का पेज देखें.

दर्शक के डीओएम एलिमेंट

<div id="viewerCanvas" style="width: 600px; height: 500px"></div>

वेब पेज पर किताब दिखाने के लिए, पहले से ही जगह बुक करनी होगी. आम तौर पर, ऐसा करने के लिए, नाम वाला div एलिमेंट बनाया जाता है और ब्राउज़र के दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) में इस एलिमेंट का रेफ़रंस लिया जाता है.

ऊपर दिए गए उदाहरण में, "viewerCanvas" नाम का div तय किया गया है और स्टाइल एट्रिब्यूट का इस्तेमाल करके उसका साइज़ सेट किया गया है. दर्शक, खुद को साइज़ देने के लिए साफ़ तौर पर कंटेनर के साइज़ का इस्तेमाल करता है.

DefaultViewer ऑब्जेक्ट

var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));

वह JavaScript क्लास जो पेज पर एक दर्शक बनाता और कंट्रोल करता है, वह DefaultViewer क्लास होती है. (इस क्लास का एक से ज़्यादा इंस्टेंस बनाया जा सकता है - हर ऑब्जेक्ट, पेज पर एक अलग दर्शक को दिखाएगा.) JavaScript new ऑपरेटर का इस्तेमाल करके, इस क्लास का नया इंस्टेंस बनाया जाता है.

नया व्यूअर इंस्टेंस बनाने पर, आपको व्यूअर के लिए कंटेनर के तौर पर पेज में एक डीओएम नोड (आम तौर पर, div एलिमेंट) तय करना होता है. एचटीएमएल नोड, JavaScript document ऑब्जेक्ट के चाइल्ड होते हैं. साथ ही, हमें document.getElementById() तरीके से इस एलिमेंट का रेफ़रंस मिलता है.

यह कोड, viewer नाम वाले वैरिएबल को तय करता है और उस वैरिएबल को नए DefaultViewer ऑब्जेक्ट को असाइन करता है. फ़ंक्शन DefaultViewer() को constructor कहा जाता है और इसकी परिभाषा यहां दी गई है. इसे एम्बेड किए गए दर्शक के एपीआई रेफ़रंस से साफ़ तौर पर समझने के लिए छोटा किया गया है:

निर्माता ब्यौरा
DefaultViewer(container, opts?) दिए गए एचटीएमएल container में नया व्यूअर बनाता है. यह पेज पर ब्लॉक-लेवल एलिमेंट (आम तौर पर एक DIV) होना चाहिए. बेहतर विकल्प, opts पैरामीटर का इस्तेमाल करके पास किए जाते हैं.

ध्यान दें कि कन्स्ट्रक्टर में दूसरा पैरामीटर ज़रूरी नहीं है. इसका मकसद, इस दस्तावेज़ के दायरे से बाहर के बेहतर तरीके से लागू करना है. इसे "नमस्ते, दुनिया" उदाहरण से हटा दिया गया है.

किसी खास किताब के साथ व्यूअर को शुरू करना

  viewer.load('ISBN:0738531367');

जब हम DefaultViewer कंस्ट्रक्टर के ज़रिए व्यूअर बना लेते हैं, तो इसे किसी खास किताब के साथ शुरू करना होगा. यह शुरू करने की प्रोसेस, दर्शक के load() तरीके का इस्तेमाल करके पूरी की जाती है. load() तरीके के लिए, identifier वैल्यू की ज़रूरत होती है. इससे एपीआई को यह पता चलता है कि कौनसी किताब दिखानी है. व्यूअर ऑब्जेक्ट पर कोई भी अन्य कार्रवाई करने से पहले, यह तरीका भेजना ज़रूरी है.

अगर आपको किसी किताब के लिए कई आइडेंटिफ़ायर के बारे में पता है, जैसे कि पेपरबैक वर्शन का ISBN या अन्य OCLC नंबर, तो load() फ़ंक्शन के पहले पैरामीटर के तौर पर, आइडेंटिफ़ायर की स्ट्रिंग की एक ऐरे दी जा सकती है. अगर ऐरे में मौजूद किसी आइडेंटिफ़ायर से जुड़ी झलक को एम्बेड किया जा सकता है, तो दर्शक किताब को रेंडर करेगा.

किताब के इस्तेमाल किए जा सकने वाले आइडेंटिफ़ायर

डाइनैमिक लिंक की सुविधा की तरह ही, एम्बेड किए गए दर्शक का एपीआई भी किसी किताब की पहचान करने के लिए कई वैल्यू के साथ काम करता है. इनमें शामिल हैं:

ISBN
10 या 13 अंकों का यूनीक व्यावसायिक इंटरनैशनल स्टैंडर्ड बुक नंबर.
उदाहरण: ISBN:0738531367
OCLC नंबर
किताब के रिकॉर्ड को WorldCat कैटलॉगिंग सिस्टम में जोड़ने पर, OCLC की ओर से किताब को असाइन किया गया यूनीक नंबर.
उदाहरण: OCLC:70850767
LCCN
लाइब्रेरी ऑफ़ कांग्रेस ने रिकॉर्ड को जो लाइब्रेरी ऑफ़ कांग्रेस कंट्रोल नंबर असाइन किया है.
उदाहरण: LCCN:2006921508
Google Books का वॉल्यूम आईडी
वॉल्यूम को Google Books ने जो यूनीक स्ट्रिंग असाइन की है वह Google Books पर किताब के यूआरएल में दिखती है.
उदाहरण: Py8u3Obs4f4C
Google Books पर किताब की झलक का यूआरएल
Google Books पर किताब की झलक वाला पेज खोलने वाला यूआरएल.
उदाहरण: https://books.google.com/books?id=Py8u3Obs4f4C&printsec=frontcover

इन आइडेंटिफ़ायर का इस्तेमाल, अक्सर Google Books API फ़ैमिली के अन्य एपीआई के साथ किया जाता है. उदाहरण के लिए, डाइनैमिक लिंक का इस्तेमाल करके, झलक दिखाने वाले बटन को सिर्फ़ तब रेंडर किया जा सकता है, जब किताब एम्बेड की जा सकती हो. इसके बाद, जब उपयोगकर्ता बटन पर क्लिक करता है, तो डाइनैमिक लिंक कॉल से मिले, झलक दिखाने वाले यूआरएल का इस्तेमाल करके दर्शक को इंस्टैंशिएट किया जा सकता है. इसी तरह, Books API की मदद से, ब्राउज़ करने और झलक देखने की सुविधा देने वाला बेहतर ऐप्लिकेशन बनाया जा सकता है. यह ऐप्लिकेशन, वॉल्यूम फ़ीड में इंडस्ट्री के कई सही आइडेंटिफ़ायर दिखाता है. बेहतर तरीके से लागू करने के कुछ उदाहरण देखने के लिए, उदाहरण वाले पेज पर जाएं.

प्रोसेस शुरू न होने की समस्या को हल करना

कुछ मामलों में, load कॉल पूरा नहीं हो सकता. आम तौर पर, ऐसा तब होता है, जब एपीआई को दिए गए आइडेंटिफ़ायर से जुड़ी कोई किताब न मिले, किताब की झलक उपलब्ध न हो, किताब की झलक को एम्बेड न किया जा सके या देश/इलाके से जुड़ी पाबंदियों की वजह से, असली उपयोगकर्ता को यह किताब न दिखे. आप चाहें, तो इस तरह की गड़बड़ी के बारे में आपको सूचना दी जा सकती है, ताकि आपका कोड इस स्थिति को आसानी से मैनेज कर सके. इस वजह से, load फ़ंक्शन में एक दूसरा पैरामीटर, notFoundCallback पास किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. इससे यह पता चलता है कि किताब लोड न होने पर, किस फ़ंक्शन को कॉल किया जाना चाहिए. उदाहरण के लिए, अगर किताब को एम्बेड किया जा सकता है, तो यह कोड एक JavaScript "चेतावनी" बॉक्स जनरेट करेगा:

function alertNotFound() {
  alert("could not embed the book!");
}

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:1234', alertNotFound);
}

उदाहरण देखें (book-notfound.html)

इस कॉलबैक का इस्तेमाल करके, आपके पास मिलती-जुलती गड़बड़ी दिखाने का विकल्प होता है. इसके अलावा, आपके पास viewerCanvas एलिमेंट को पूरी तरह से छिपाने का विकल्प भी होता है. गड़बड़ी होने पर कॉलबैक पैरामीटर देना ज़रूरी नहीं है. इसे "Hello World" उदाहरण में शामिल नहीं किया गया है.

ध्यान दें: ऐसा हो सकता है कि सभी किताबों और सभी उपयोगकर्ताओं के लिए झलक उपलब्ध न हो. इसलिए, यह जानना फ़ायदेमंद हो सकता है कि झलक उपलब्ध है या नहीं. यह जानकारी, झलक देखने के लिए व्यूअर लोड करने से पहले मिल सकती है. उदाहरण के लिए, हो सकता है कि आप अपने यूज़र इंटरफ़ेस (यूआई) में "Google की झलक" बटन, पेज या सेक्शन सिर्फ़ तब दिखाना चाहें, जब उपयोगकर्ता के लिए झलक असल में उपलब्ध हो. Books API या डाइनैमिक लिंक का इस्तेमाल करके, यह पता लगाया जा सकता है कि दर्शक की मदद से किसी किताब को एम्बेड किया जा सकता है या नहीं.

शुरुआत करने की प्रोसेस पूरी होने पर होने वाली कार्रवाइयां

इससे यह जानने में भी मदद मिल सकती है कि किताब सही से लोड हो गई है या नहीं. इस वजह से, load फ़ंक्शन में successCallback नाम का तीसरा पैरामीटर इस्तेमाल किया जा सकता है. हालांकि, यह पैरामीटर ज़रूरी नहीं है. यह पैरामीटर तब लागू होगा, जब कोई किताब लोड हो जाएगी.

function alertInitialized() {
  alert("book successfully loaded and initialized!");
}

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0738531367', null, alertInitialized);
}

उदाहरण देखें (book-success.html)

यह कॉलबैक तब मददगार हो सकता है, जब आपको अपने पेज पर कुछ एलिमेंट तब ही दिखाने हों, जब व्यूअर ने पूरी तरह रेंडर किया हो.

दर्शक को लोड होते हुए दिखाना

  google.books.setOnLoadCallback(initialize);

एचटीएमएल पेज रेंडर होने के दौरान, दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) बनाया जाता है. साथ ही, बाहरी इमेज और स्क्रिप्ट को document ऑब्जेक्ट में शामिल किया जाता है. यह पक्का करने के लिए कि हमारा व्यूअर सिर्फ़ पेज के पूरी तरह लोड होने के बाद ही पेज पर रहे, google.books.setOnLoadCallback फ़ंक्शन का इस्तेमाल DefaultViewer ऑब्जेक्ट बनाने वाले फ़ंक्शन को आगे बढ़ाने के लिए किया जाता है. setOnLoadCallback, initialize को सिर्फ़ तब कॉल करेगा, जब एम्बेड किया गया व्यूअर एपीआई लोड हो जाएगा और इस्तेमाल के लिए तैयार हो जाएगा. इससे, अनचाहे व्यवहार से बचा जा सकता है. साथ ही, यह पक्का किया जा सकता है कि व्यूअर को कैसे और कब ड्रॉ किया जाए.

ध्यान दें: अलग-अलग ब्राउज़र के साथ काम करने की सुविधा को बढ़ाने के लिए, हमारा सुझाव है कि आप अपने <body> टैग पर onLoad इवेंट का इस्तेमाल करने के बजाय, google.books.setOnLoadCallback फ़ंक्शन का इस्तेमाल करके दर्शक लोड को शेड्यूल करें.

दर्शकों के इंटरैक्शन

अब आपके पास DefaultViewer ऑब्जेक्ट है, इसलिए उससे इंटरैक्ट किया जा सकता है. बुनियादी व्यूअर ऑब्जेक्ट, Google Books की वेबसाइट पर मौजूद व्यूअर की तरह ही दिखता है और उसी तरह काम करता है. साथ ही, इसमें कई तरह के बुनियादी व्यवहार पहले से मौजूद होते हैं.

हालांकि, प्रोग्राम के हिसाब से भी दर्शक से इंटरैक्ट किया जा सकता है. DefaultViewer ऑब्जेक्ट में कई तरीके होते हैं, जिनसे झलक की स्थिति में सीधे बदलाव किया जा सकता है. उदाहरण के लिए, zoomIn(), nextPage(), और highlight() तरीके, उपयोगकर्ता के इंटरैक्शन के बजाय प्रोग्राम के हिसाब से व्यूअर पर काम करते हैं.

नीचे दिए गए उदाहरण में, किताब की झलक दिखाई गई है. इसमें हर तीन सेकंड में अगला पेज अपने-आप "बदलता" है. अगर अगला पेज, व्यूअर के दिखने वाले हिस्से में है, तो व्यूअर उस पेज पर आसानी से पैन कर सकता है. अगर नहीं, तो व्यूअर सीधे अगले पेज के सबसे ऊपर पहुंच जाता है.

function nextStep(viewer) {
  window.setTimeout(function() {
    viewer.nextPage();
    nextStep(viewer);
  }, 3000);
}

function initialize() {
  var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
  viewer.load('ISBN:0738531367');
  nextStep(viewer);
}

google.books.setOnLoadCallback(initialize);

उदाहरण देखें (book-animate.html)

ध्यान दें कि जब तक दर्शक किसी खास किताब के साथ पूरी तरह से शुरू नहीं हो जाता, तब तक दर्शक को प्रोग्राम के हिसाब से किए जाने वाले कॉल काम नहीं करेंगे या उनका कोई असर नहीं होगा. यह पक्का करने के लिए कि आप ऐसे फ़ंक्शन सिर्फ़ तब कॉल करें, जब दर्शक तैयार हों, successCallback पैरामीटर को viewer.load के साथ इस्तेमाल करें. इसके बारे में ऊपर बताया गया है.

DefaultViewer ऑब्जेक्ट के साथ काम करने वाले सभी फ़ंक्शन के बारे में जानने के लिए, रेफ़रंस गाइड देखें.

प्रोग्रामिंग के बारे में नोट

एम्बेड किए गए व्यूअर एपीआई के बारे में जानने से पहले, आपको इन बातों का ध्यान रखना चाहिए. इससे यह पक्का किया जा सकेगा कि आपका ऐप्लिकेशन, तय किए गए सभी प्लैटफ़ॉर्म पर आसानी से काम करे.

अलग-अलग ब्राउज़र पर साइट की जांच करना

एम्बेड किया गया व्यूअर एपीआई, Internet Explorer, Firefox, और Safari के नए वर्शन के साथ काम करता है. आम तौर पर, यह Gecko और WebKit पर आधारित अन्य ब्राउज़र के साथ भी काम करता है. जैसे, Camino और Google Chrome.

कभी-कभी, अलग-अलग ऐप्लिकेशन के लिए, काम न करने वाले ब्राउज़र का इस्तेमाल करने वाले उपयोगकर्ताओं के व्यवहार को अलग-अलग तरीके से मैनेज करना पड़ता है. अगर किसी ब्राउज़र के साथ काम न करने वाले ब्राउज़र के बारे में पता चलता है, तो एम्बेड किए गए व्यूअर एपीआई को अपने-आप काम नहीं करता. इस दस्तावेज़ में दिए गए ज़्यादातर उदाहरणों में, ब्राउज़र के साथ काम करने की जांच नहीं की जाती. साथ ही, इनमें पुराने ब्राउज़र के लिए गड़बड़ी का मैसेज भी नहीं दिखता. असल ऐप्लिकेशन, पुराने या काम न करने वाले ब्राउज़र के साथ कुछ और बेहतर तरीके से काम कर सकते हैं. हालांकि, उदाहरणों को ज़्यादा आसानी से पढ़ने लायक बनाने के लिए, ऐसी जांच को छोड़ दिया गया है.

सामान्य ऐप्लिकेशन के लिए, ब्राउज़र और प्लैटफ़ॉर्म के बीच अंतर होना लाज़िमी है. quirksmode.org जैसी साइटें भी, किसी समस्या के समाधान के लिए अच्छे संसाधन हैं.

XHTML और क्वर्क मोड

हमारा सुझाव है कि आप व्यूअर वाले पेज पर मानकों का पालन करने वाले एक्सटर्नल का इस्तेमाल करें. जब ब्राउज़र को पेज में सबसे ऊपर XHTML DOCTYPE दिखता है, तो वे पेज को "स्टैंडर्ड के मुताबिक मोड" में रेंडर करते हैं. इससे, सभी ब्राउज़र में लेआउट और व्यवहार का अनुमान लगाना ज़्यादा आसान हो जाता है. बिना परिभाषा वाले पेज "क्वर्क्स मोड" में रेंडर हो सकते हैं, जिसकी वजह से लेआउट में अंतर दिख सकता है.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Embedded Viewer API के उदाहरणों के बारे में जानकारी

ध्यान दें कि इस दस्तावेज़ में दिए गए ज़्यादातर उदाहरणों में सिर्फ़ काम का JavaScript कोड दिखाया गया है, पूरा एचटीएमएल फ़ाइल नहीं. JavaScript कोड को अपनी स्केलेटन एचटीएमएल फ़ाइल में प्लग किया जा सकता है या हर उदाहरण के लिए पूरी एचटीएमएल फ़ाइल डाउनलोड की जा सकती है. ऐसा करने के लिए, उदाहरण के बाद दिए गए लिंक पर क्लिक करें.

समस्या हल करना

अगर आपका कोड काम नहीं कर रहा है, तो यहां कुछ तरीके दिए गए हैं जिनसे आपको अपनी समस्याओं को हल करने में मदद मिल सकती है:

  • टाइपिंग की गलतियां देखें. याद रखें कि JavaScript एक केस-सेंसिटिव भाषा है.
  • JavaScript डीबगर का इस्तेमाल करें. Firefox में, आपके पास JavaScript कंसोल, वैंकमैन डीबगर या Firebug ऐड-ऑन का इस्तेमाल करने का विकल्प होता है. IE में, Microsoft स्क्रिप्ट डीबगर का इस्तेमाल किया जा सकता है. Google Chrome ब्राउज़र में कई डेवलपमेंट टूल पहले से मौजूद होते हैं. इनमें DOM इंस्पेक्टर और JavaScript डीबगर शामिल हैं.