API โปรแกรมอ่านแบบฝังช่วยให้คุณฝังเนื้อหาของหนังสือจาก Google Books ลงในหน้าเว็บได้โดยตรงด้วย JavaScript นอกจากนี้ API ยังมียูทิลิตีจำนวนมากสำหรับใช้จัดการกับตัวอย่างหนังสือ และมักจะใช้งานร่วมกับ API อื่นๆ ที่อธิบายไว้ในเว็บไซต์นี้
วิซาร์ดการแสดงตัวอย่างเป็นเครื่องมือที่สร้างอยู่บน API โปรแกรมดูแบบฝัง ซึ่งช่วยให้คุณเพิ่มความสามารถในการแสดงตัวอย่างลงในเว็บไซต์ได้ง่ายขึ้น เพียงคัดลอกโค้ดไม่กี่บรรทัด เอกสารนี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ขั้นสูงที่ต้องการปรับแต่งลักษณะการแสดงผู้ชมบนเว็บไซต์
ผู้ชม
เอกสารประกอบนี้ออกแบบมาสำหรับผู้ที่คุ้นเคยกับแนวคิดการเขียนโปรแกรมและการเขียนโปรแกรมเชิงวัตถุของ JavaScript คุณควรทำความคุ้นเคยกับ Google Books จากมุมมองของผู้ใช้ด้วย บนเว็บมีบทแนะนำ JavaScript อยู่มากมาย
เอกสารประกอบเชิงแนวคิดนี้ไม่สมบูรณ์และครบถ้วนสมบูรณ์ โดยออกแบบมาเพื่อให้คุณสามารถเริ่มสำรวจและพัฒนาแอปพลิเคชันสุดเจ๋งด้วย Embedded Viewer API ได้อย่างรวดเร็ว ผู้ใช้ขั้นสูงอาจสนใจดูเอกสารอ้างอิง API ผู้มีสิทธิ์อ่านแบบฝัง ซึ่งให้รายละเอียดทั้งหมดเกี่ยวกับเมธอดและคำตอบที่รองรับ
ตามที่ระบุไว้ข้างต้น ผู้เริ่มต้นอาจต้องการเริ่มต้นด้วยวิซาร์ดการแสดงตัวอย่าง ซึ่งจะสร้างโค้ดที่จำเป็นในการฝังตัวอย่างพื้นฐานในไซต์ของคุณโดยอัตโนมัติ
"สวัสดีทุกคน" ของ Embedded Viewer API
วิธีที่ง่ายที่สุดในการเริ่มเรียนรู้เกี่ยวกับ Embedded Viewer API คือการดูตัวอย่างง่ายๆ หน้าเว็บต่อไปนี้แสดงตัวอย่างขนาด 600x500 ของ Mountain View โดย Nicholas Perry, ISBN 0738531367 (ส่วนหนึ่งของซีรีส์ "Images of America" ของ Arcadia Publishing)
<!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>
คุณสามารถดูตัวอย่างนี้ แล้วดาวน์โหลดมาแก้ไขและทดลองเล่นได้ แม้ในตัวอย่างง่ายๆ นี้ มี 5 สิ่งที่ควรทราบ ดังนี้
- เรารวมตัวโหลด API โดยใช้แท็ก
script
- เราสร้างเอลิเมนต์
div
ชื่อ "viewerCanvas" เพื่อเก็บผู้ชม - เราเขียนฟังก์ชัน JavaScript เพื่อสร้างออบเจ็กต์ "viewer"
- เราโหลดหนังสือโดยใช้ตัวระบุที่ไม่ซ้ำกัน (ในกรณีนี้คือ
ISBN:0738531367
) - เราใช้
google.books.setOnLoadCallback
เพื่อเรียกinitialize
เมื่อ API โหลดอย่างสมบูรณ์แล้ว
โดยจะอธิบายขั้นตอนเหล่านี้ด้านล่าง
การโหลด API โปรแกรมอ่านแบบฝัง
การใช้เฟรมเวิร์กเครื่องมือโหลด API เพื่อโหลด API ผู้ดูแบบฝังนั้นค่อนข้างง่าย ซึ่งประกอบด้วย 2 ขั้นตอนต่อไปนี้
- รวมไลบรารีเครื่องมือโหลด API ดังนี้
<script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
- เรียกใช้เมธอด
google.books.load
เมธอดgoogle.books.load
จะใช้พารามิเตอร์รายการที่ไม่บังคับที่ระบุฟังก์ชัน Callback หรือภาษาตามที่อธิบายไว้ด้านล่าง<script type="text/javascript"> google.books.load(); </script>
การโหลด API ผู้มีสิทธิ์อ่านแบบฝังเวอร์ชันที่แปลแล้ว
Embedded Viewer API ใช้ภาษาอังกฤษโดยค่าเริ่มต้นเมื่อแสดงข้อมูลแบบข้อความ เช่น เคล็ดลับเครื่องมือ ชื่อตัวควบคุม และข้อความลิงก์ หากต้องการเปลี่ยน API โปรแกรมดูแบบฝังให้แสดงข้อมูลในภาษาใดภาษาหนึ่งได้อย่างถูกต้อง คุณก็เพิ่มพารามิเตอร์ language
(ไม่บังคับ) ลงในการเรียกใช้ google.books.load
ได้
ตัวอย่างเช่น หากต้องการแสดงโมดูลหน้าตัวอย่างหนังสือด้วยภาษาอินเทอร์เฟซโปรตุเกสแบบบราซิล ให้ทำดังนี้
<script type="text/javascript"> google.books.load({"language": "pt-BR"}); </script>
ดูตัวอย่าง (book-language.html)
รหัสภาษา RFC 3066 ที่รองรับในปัจจุบัน ได้แก่ af, ar, hy, bg, ca, zh-CN, zh-TW, hr, cs, da, nl, en, fil, fi, fr, de, el, he, hu, is, id, it, ja, ko, lv, lt, ms,
เมื่อใช้ API โปรแกรมดูแบบฝังในภาษาอื่นที่ไม่ใช่ภาษาอังกฤษ เราขอแนะนำอย่างยิ่งให้แสดงหน้าเว็บด้วยการตั้งค่าส่วนหัว content-type
เป็น utf-8
หรือใส่แท็ก <meta>
ที่เทียบเท่าในหน้าเว็บของคุณ การดำเนินการนี้ช่วยให้มั่นใจได้ว่าอักขระจะแสดงผลอย่างถูกต้องในทุกเบราว์เซอร์ สำหรับข้อมูลเพิ่มเติม โปรดดูหน้าของ W3C เกี่ยวกับการตั้งค่าพารามิเตอร์ชุดอักขระ HTTP
องค์ประกอบ DOM ของผู้ชม
<div id="viewerCanvas" style="width: 600px; height: 500px"></div>
หนังสือจะแสดงบนหน้าเว็บต้องจองที่ โดยทั่วไปมักจะทำได้โดยการสร้างองค์ประกอบ div
ที่มีชื่อและรับการอ้างอิงไปยังองค์ประกอบนี้ใน Document Object Model (DOM) ของเบราว์เซอร์
ตัวอย่างด้านบนกำหนด div
ที่มีชื่อว่า "viewerCanvas" และตั้งค่าขนาดโดยใช้แอตทริบิวต์รูปแบบ ผู้ดูใช้ขนาดของคอนเทนเนอร์เพื่อกำหนดขนาดโดยปริยาย
ออบเจ็กต์ DefaultViewer
var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
คลาส JavaScript ที่สร้างและควบคุมผู้ดู 1 คนในหน้าเว็บคือคลาส DefaultViewer
(คุณอาจสร้างคลาสนี้ได้มากกว่า 1 อินสแตนซ์ โดยแต่ละออบเจ็กต์จะกำหนดผู้ดูแยกกันในหน้า) ระบบจะสร้างอินสแตนซ์ใหม่ของคลาสนี้โดยใช้โอเปอเรเตอร์ new
ของ JavaScript
เมื่อสร้างอินสแตนซ์ของผู้ดูใหม่ คุณจะระบุโหนด DOM ในหน้าเว็บ (โดยปกติจะเป็นเอลิเมนต์ div
) เป็นคอนเทนเนอร์สำหรับผู้ดู โหนด HTML เป็นออบเจ็กต์ย่อยของออบเจ็กต์ document
ของ JavaScript และเราได้รับการอ้างอิงองค์ประกอบนี้ผ่านเมธอด document.getElementById()
โค้ดนี้จะกำหนดตัวแปร (ชื่อ viewer
) และกำหนดตัวแปรนั้นให้กับออบเจ็กต์ DefaultViewer
ใหม่ ฟังก์ชัน DefaultViewer()
เป็นที่รู้จักในนามเครื่องมือสร้าง
และคำจำกัดความ (ย่อไว้เพื่อความชัดเจนจาก
การอ้างอิง API ผู้ดูแบบฝัง) แสดงอยู่ด้านล่าง
ผู้ผลิต | คำอธิบาย |
---|---|
DefaultViewer(container, opts?) | สร้างมุมมองใหม่ภายใน HTML container ที่ระบุ ซึ่งควรเป็นองค์ประกอบระดับบล็อกในหน้าเว็บ (โดยปกติแล้วจะเป็น DIV ) ระบบจะส่งตัวเลือกขั้นสูงโดยใช้พารามิเตอร์ opts ที่ไม่บังคับ |
โปรดทราบว่าพารามิเตอร์ที่สองในตัวสร้างเป็นตัวเลือกที่ไม่บังคับ ซึ่งมีไว้สำหรับการใช้งานขั้นสูงที่อยู่นอกเหนือขอบเขตของเอกสารนี้ และพารามิเตอร์นี้จะไม่แสดงในตัวอย่าง " Hello, World"
การเริ่มต้นดูหนังสือด้วยหนังสือที่เจาะจง
viewer.load('ISBN:0738531367');
เมื่อเราสร้างเครื่องมืออ่านผ่านทางเครื่องมือสร้าง DefaultViewer
แล้ว จะต้องมีค่าเริ่มต้นเป็นหนังสือเล่มใดเล่มหนึ่ง การเริ่มต้นนี้ดำเนินการได้โดยใช้เมธอด load()
ของผู้ชม เมธอด load()
ต้องใช้ค่า identifier
ซึ่งจะบอก API ว่าจะแสดงหนังสือใด คุณต้องส่งเมธอดนี้ก่อนที่จะดำเนินการอื่นๆ กับออบเจ็กต์เครื่องมือดู
หากรู้จักตัวระบุหลายตัวของหนังสือ เช่น ISBN สำหรับฉบับปกอ่อนหรือหมายเลข OCLC ทางเลือก คุณสามารถส่งอาร์เรย์ของสตริงตัวระบุที่เป็นพารามิเตอร์แรกไปยังฟังก์ชัน load()
มุมมองจะแสดงหนังสือหากมีการแสดงตัวอย่างแบบฝังได้ซึ่งเชื่อมโยงกับตัวระบุใดก็ได้ในอาร์เรย์
ตัวระบุหนังสือที่รองรับ
เช่นเดียวกับฟีเจอร์ลิงก์แบบไดนามิก API โปรแกรมดูแบบฝังจะรองรับค่าจำนวนมากเพื่อระบุหนังสือเรื่องใดเล่มหนึ่ง ซึ่งรวมถึงการใช้งานดังต่อไปนี้
- ISBN
- หมายเลขหนังสือมาตรฐานสากลแบบไม่ซ้ำกัน 10 หรือ 13 หลัก
ตัวอย่าง:ISBN:0738531367
- หมายเลข OCLC
- หมายเลขเฉพาะที่ OCLC กำหนดให้กับหนังสือเมื่อเพิ่มระเบียนของหนังสือลงในระบบแคตตาล็อกของ WorldCat
ตัวอย่างเช่นOCLC:70850767
- LCCN
- หมายเลขควบคุมของหอสมุดรัฐสภา (Library of Congress) ที่หอสมุดรัฐสภาอเมริกันกำหนดให้บันทึกนี้
ตัวอย่างเช่นLCCN:2006921508
- รหัสเล่มของ Google หนังสือ
- สตริงที่ไม่ซ้ำกันที่ Google Books กำหนดให้กับเล่มนี้ ซึ่งจะปรากฏใน URL ของหนังสือใน Google Books
ตัวอย่างเช่นPy8u3Obs4f4C
- URL การแสดงตัวอย่างของ Google Books
- URL ที่เปิดหน้าตัวอย่างหนังสือใน Google Books
ตัวอย่างเช่นhttps://books.google.com/books?id=Py8u3Obs4f4C&printsec=frontcover
ตัวระบุเหล่านี้มักใช้กับ API อื่นๆ ในกลุ่ม Google Books API เช่น คุณสามารถใช้ลิงก์แบบไดนามิกเพื่อแสดงปุ่มแสดงตัวอย่างต่อเมื่อหนังสือฝังได้ จากนั้นเมื่อผู้ใช้คลิกปุ่ม ให้สร้างอินสแตนซ์ของผู้ดูโดยใช้ URL ตัวอย่างที่แสดงจากการเรียกลิงก์แบบไดนามิก ในทำนองเดียวกัน คุณสามารถสร้างแอปพลิเคชันเรียกดูและแสดงตัวอย่างที่มีข้อมูลสมบูรณ์ด้วย Books API ซึ่งจะแสดงผลตัวระบุอุตสาหกรรมที่เหมาะสมหลายรายการในฟีด "หนังสือ" ไปที่หน้าตัวอย่างเพื่อดูการติดตั้งใช้งานขั้นสูงบางส่วน
การจัดการการเริ่มต้นที่ไม่สำเร็จ
ในบางกรณี การโทรหา load
อาจล้มเหลว โดยทั่วไปแล้วกรณีนี้จะเกิดขึ้นเมื่อ API ไม่พบหนังสือที่เชื่อมโยงกับตัวระบุที่ให้มา เมื่อไม่มีการแสดงตัวอย่างหนังสือ เมื่อฝังตัวอย่างหนังสือไม่ได้ หรือเมื่อข้อจำกัดด้านเขตแดนทำให้ผู้ใช้ไม่เห็นหนังสือเล่มนี้ คุณอาจต้องการรับการแจ้งเตือนถึงความล้มเหลวดังกล่าว เพื่อให้โค้ดของคุณจัดการกับเงื่อนไขนี้ได้อย่างไม่มีปัญหา ด้วยเหตุนี้ ฟังก์ชัน load
จึงช่วยให้คุณส่งผ่านพารามิเตอร์ที่ 2 ซึ่งไม่บังคับ ซึ่งก็คือ 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
ทั้งหมดก็ได้โดยใช้ Callback นี้ พารามิเตอร์ Callback ที่ล้มเหลวเป็นตัวเลือกที่ไม่บังคับ และไม่รวมอยู่ในตัวอย่าง " Hello World"
หมายเหตุ: เนื่องจากตัวอย่างอาจไม่พร้อมใช้งานสำหรับหนังสือบางเล่มและผู้ใช้บางรายเท่านั้น อาจเป็นประโยชน์หากทราบว่ามีหน้าตัวอย่างให้ก่อนที่จะพยายามโหลดผู้ดูสำหรับหนังสือหรือไม่ เช่น คุณอาจต้องการแสดงปุ่ม หน้าเว็บ หรือส่วน "แสดงตัวอย่างของ Google" ใน UI ต่อเมื่อผู้ใช้ดูตัวอย่างเท่านั้น โดยใช้ Books API หรือลิงก์แบบไดนามิก ซึ่งจะรายงานว่าหนังสือพร้อมสำหรับการฝังโดยใช้โปรแกรมดูหรือไม่
การจัดการการเริ่มต้นที่ประสบความสำเร็จ
นอกจากนี้ การรู้ว่าหนังสือโหลดสำเร็จหรือไม่และเมื่อใดก็อาจมีประโยชน์เช่นกัน ด้วยเหตุนี้ ฟังก์ชัน load
จึงรองรับพารามิเตอร์เสริมที่ 3 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)
Callback นี้อาจเป็นประโยชน์ในกรณีอย่างเช่น คุณต้องการแสดงองค์ประกอบบางอย่างบนหน้าเว็บก็ต่อเมื่อผู้ชมแสดงผลโดยสมบูรณ์แล้วเท่านั้น
การแสดงผู้ชมขณะโหลด
google.books.setOnLoadCallback(initialize);
ขณะที่หน้า HTML แสดงผล จะมีการสร้าง Document Object Model (DOM) รวมทั้งได้รับรูปภาพและสคริปต์ภายนอกทั้งหมดและรวมไว้ในออบเจ็กต์ document
เพื่อให้แน่ใจว่าเครื่องมือจะวางอยู่บนหน้าเว็บหลังจากที่หน้าเว็บโหลดเสร็จแล้วเท่านั้น จะมีการใช้ฟังก์ชัน google.books.setOnLoadCallback
เพื่อเลื่อนการดำเนินการของฟังก์ชันที่สร้างออบเจ็กต์ DefaultViewer
เนื่องจาก setOnLoadCallback
จะเรียกใช้ initialize
เฉพาะเมื่อ API โปรแกรมดูแบบฝังและพร้อมใช้งานเท่านั้น ซึ่งจะช่วยหลีกเลี่ยงลักษณะการทำงานที่คาดเดาไม่ได้และช่วยให้ควบคุมวิธีการและเวลาในการวาดผู้ชมได้
หมายเหตุ: เพื่อเพิ่มความสามารถในการใช้งานร่วมกันข้ามเบราว์เซอร์ให้ได้มากที่สุด เราขอแนะนำอย่างยิ่งให้คุณกำหนดเวลาโหลดของผู้ดูโดยใช้ฟังก์ชัน google.books.setOnLoadCallback
แทนการใช้เหตุการณ์ onLoad
ในแท็ก <body>
การโต้ตอบของผู้ชม
เมื่อมีออบเจ็กต์ DefaultViewer
แล้ว คุณจะโต้ตอบด้วยได้ ออบเจ็กต์พื้นฐานของผู้อ่านมีลักษณะและพฤติกรรมคล้ายกับผู้ดูที่คุณโต้ตอบด้วยบนเว็บไซต์ Google หนังสือและมีลักษณะการทำงานในตัวมากมาย
แต่คุณก็โต้ตอบกับผู้ชมแบบเป็นโปรแกรมได้ด้วย ออบเจ็กต์ DefaultViewer
รองรับเมธอดจำนวนหนึ่งที่เปลี่ยนสถานะการแสดงตัวอย่างโดยตรง ตัวอย่างเช่น เมธอด zoomIn()
, nextPage()
และ highlight()
จะดำเนินการแบบเป็นโปรแกรมกับผู้ดู ไม่ใช่ผ่านการโต้ตอบของผู้ใช้
ตัวอย่างต่อไปนี้แสดงตัวอย่างหนังสือที่ "เปลี่ยน" ไปยังหน้าถัดไปโดยอัตโนมัติทุกๆ 3 วินาที หากหน้าถัดไปเป็นส่วนที่ผู้ชมมองเห็นได้ ผู้ชมก็จะเลื่อนไปยังหน้านั้นอย่างราบรื่น แต่หากไม่ ผู้ชมก็จะข้ามไปยังส่วนบนสุดของหน้าถัดไปทันที
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
รองรับ โปรดดูคู่มือข้อมูลอ้างอิง
โน้ตการเขียนโปรแกรม
ก่อนที่จะเริ่มใช้ API โปรแกรมดูแบบฝัง คุณควรคำนึงถึงข้อกังวลต่อไปนี้เพื่อให้มั่นใจว่าแอปพลิเคชันจะทำงานได้อย่างราบรื่นในแพลตฟอร์มที่ต้องการ
ความเข้ากันได้กับเบราว์เซอร์
Embedded Viewer API รองรับ Internet Explorer, Firefox และ Safari เวอร์ชันล่าสุด รวมถึงเบราว์เซอร์อื่นๆ ที่ใช้ Gecko และ WebKit อย่างเช่น Camino และ Google Chrome ด้วย
บางครั้งแอปพลิเคชันที่แตกต่างกันอาจต้องใช้ลักษณะการทำงานที่แตกต่างกันสำหรับผู้ใช้ที่มีเบราว์เซอร์ที่ใช้ร่วมกันไม่ได้ API โปรแกรมดูแบบฝังจะไม่มีการทำงานอัตโนมัติเมื่อตรวจพบเบราว์เซอร์ที่เข้ากันไม่ได้ ตัวอย่างส่วนใหญ่ในเอกสารนี้ไม่ได้ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ และไม่ได้แสดงข้อความแสดงข้อผิดพลาดสำหรับเบราว์เซอร์รุ่นเก่า แอปพลิเคชันจริงอาจทำสิ่งต่างๆ ที่เป็นมิตรกับเบราว์เซอร์เก่าหรือเบราว์เซอร์ที่ใช้ร่วมกันไม่ได้ แต่จะไม่มีการตรวจสอบดังกล่าวเพื่อให้ตัวอย่างอ่านง่ายขึ้น
แอปพลิเคชันที่ไม่สำคัญจะต้องพบความไม่สอดคล้องกันระหว่างเบราว์เซอร์กับแพลตฟอร์มต่างๆ อย่างหลีกเลี่ยงไม่ได้ เว็บไซต์อย่าง quirksmode.org เป็นแหล่งข้อมูลที่ดีในการค้นหาวิธีแก้ปัญหา
XHTML และโหมดที่ไม่มาตรฐาน
เราขอแนะนำให้คุณใช้ 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">
หมายเหตุเกี่ยวกับตัวอย่าง API โปรแกรมอ่านแบบฝัง
โปรดทราบว่าตัวอย่างส่วนใหญ่ในเอกสารประกอบนี้จะแสดงเฉพาะโค้ด JavaScript ที่เกี่ยวข้องเท่านั้น ไม่ใช่ไฟล์ HTML แบบเต็ม คุณจะใส่โค้ด JavaScript ลงในไฟล์ HTML ของโครงสร้างของคุณเอง หรือจะดาวน์โหลดไฟล์ HTML แบบเต็มสำหรับแต่ละตัวอย่างโดยคลิกลิงก์ที่อยู่หลังตัวอย่างก็ได้
การแก้ปัญหา
หากดูเหมือนว่าโค้ดของคุณจะไม่ทำงาน ต่อไปนี้เป็นวิธีการบางอย่าง ที่อาจช่วยคุณแก้ปัญหาได้
- มองหาการพิมพ์ผิด โปรดทราบว่า JavaScript เป็นภาษาที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
- ใช้โปรแกรมแก้ไขข้อบกพร่อง JavaScript ใน Firefox คุณใช้คอนโซล JavaScript, โปรแกรมแก้ไขข้อบกพร่อง Venkman หรือส่วนเสริม Firebug ได้ ใน IE คุณจะใช้ โปรแกรมแก้ไขข้อบกพร่องของ Microsoft Script ได้ เบราว์เซอร์ Google Chrome มาพร้อมกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จำนวนมากในตัว เช่น เครื่องมือตรวจสอบ DOM และโปรแกรมแก้ไขข้อบกพร่อง JavaScript