เสริมแต่งโฮมเพจครั้งใหม่! ให้มีชีวิตชีวาด้วย JavaScript
สรวุฒิ กอสุวรรณศิริ245 บ.366 น.210 บ.

• อธิบายวิธีการเขียนสคริปต์สำหรับใช้งานตั้งแต่พื้นฐานไปจนถึงระดับสูง
• มีตัวอย่างประกอบตลอดทั้งเล่ม รวมทั้งตัวอย่างสคริปต์เกมต่อภาพปริศนา เกม Click It! และเกมสนุกๆ อีกมากมาย
• แนะนำวิธีการใช้ JavaScript ร่วมกับ style sheet อย่าง CSS และ JSS
• ตีแผ่ทุกแง่มุมวิธีการเขียนสคริปต์เพื่อควบคุม layer พร้อมทั้งการสร้าง animation
• สอนเทคนิคการใช้งาน ActiveX ร่วมกับ JavaScript เอาใจแฟนเบราเซอร์ IE
• แนะนำ javascriptwizard.com เครื่องมือช่วยสร้าง JavaScript ในชั่วพริบตา

บทที่ 1 เริ่มต้นกับ JavaScript

ดูจะเป็นการเสียมารยาทไปหน่อยนะครับ ถ้าผมเริ่มต้นแบบเดินดุ่มๆ ตั้งหน้าตั้งตาเขียนโปรแกรมให้ดูกัน โดยที่ไม่ได้บอกให้ผู้อ่านทราบเลยว่า JavaScript คืออะไร เขียนแล้วเอาไปใช้กันเว็บเบราเซอร์แบบไหน รวมทั้งกฎกติกาของการใช้ JavaScript เบื้องต้นเป็นอย่างไร เรื่องแบบนี้เป็นเรื่องสนุกครับ และผมเชื่อว่าความประทับใจตั้งแต่แรกพบ จะทำให้คุณผู้อ่านรัก JavaScript แบบไม่ลืมหูลืมตาเหมือนผม!

• ทุกตำนานมีจุดเริ่มต้น
• ปรับเปลี่ยนพัฒนา Java ให้ง่าย จนกลายเป็น JavaScript
• การใส่ JavaScript ลงในเว็บเพจ
• ถ้าเว็บเบราเซอร์ไม่รู้จัก JavaScript ล่ะทำอย่างไร???
• แพ็ค JavaScript ลงไฟล์ .js ใช้งานที่ไหนเมื่อไรก็ได้
• เติมหมายเหตุลงในสคริปต์กันลืม
• สรุปความเหมือนที่แตกต่างระหว่าง Java และ JavaScript

บทที่ 2 ใครว่าเรื่องของตัวแปรไม่สำคัญ

ผมจำได้ว่า ในสมัยที่ผมเรียนคณิตศาสตร์ชั้นประถม เรื่องสมการและตัวแปร เป็นเรื่องหนึ่งที่ผมชอบมากครับ ตัวแปรเป็นอะไรที่น่าสืบเสาะค้นหา ว่าค่าภายในตัวมันเป็นอย่างไร พอมาถึงตอนนี้ได้มาเขียนโปรแกรมและยุ่งเกี่ยวกับตัวแปรอีกครั้ง ตัวแปรกลับไม่ใช่เรื่องง่ายๆ อย่างที่คิดอีกแล้ว เริ่มตั้งแต่การตั้งชื่อตัวแปร ก็ไม่ใช่จะตั้งสุ่มสี่สุ่มห้าได้ ยิ่งไปกว่านั้น ค่าภายในตัวแปรก็ไม่เหมือนคณิตศาสตร์ที่มีแต่ตัวเลขภายในเท่านั้น เพราะฉะนั้น เรื่องของตัวแปรคงต้อง “ขยาย” กันหน่อยครับ

• ตั้งชื่อตัวแปรทั้งที ต้องตั้งให้ดีหน่อย
• ตัวแปรชนิดจำนวนเต็ม (Integer)
• ตัวแปรชนิดจำนวนจริง (Floating-point)
• ตัวแปรชนิดตรรก (Logical)
• ค่าของตัวแปรที่เป็นแบบ String
• ลองเล่นกับการปรับเปลี่ยนชนิดตัวแปร
• ตัวแปรชนิดอาร์เรย์ (Array)

บทที่ 3 โอเปอเรเตอร์ ปฏิบัติการระหว่างตัวแปร

ผมเชื่อว่าผู้อ่านทุกคนเคยสัมผัสกับโอเปอเรเตอร์ (Operator) มาแล้วทุกคน อ๊ะ อ๊ะ… โอเปอเรเตอร์ในที่นี้ ไม่ใช่สาวสวยที่คอยต่อโทรศัพท์ให้เรานะครับ อย่าเข้าใจผิด ในทางโปรแกรมแล้ว โอเปอเรเตอร์ที่เราเห็นกันบ่อยๆ ก็อาทิ การบวก ลบ คูณ หาร การเปรียบเทียบค่า มากกว่าหรือน้อยกว่า เป็นต้น ชักเริ่มคุ้นๆ แล้วใช่มั้ยล่ะ

• โอเปอเรเตอร์ที่ใช้กำหนดค่าให้กับตัวแปร
• โอเปอเรเตอร์ในทางคณิตศาสตร์
• โอเปอเรเตอร์ในทางตรรกศาสตร์
• โอเปอเรเตอร์ที่ใช้เปรียบเทียบค่า
• โอเปอเรเตอร์ที่ใช้กับข้อความ
• โอเปอเรเตอร์ที่ใช้กับเลขฐานสอง
• โอเปอเรเตอร์ Conditional Expressions

บทที่ 4 ประโยคคำสั่ง (Statement)

ในบางครั้งเราจำเป็นต้องเขียนโปรแกรมให้สามารถเลือกการทำงานได้ โดยมีเงื่อนไขบางอย่างเป็นตัวกำหนดการทำงาน ซึ่งการทำงานในลักษณะนี้มีอยู่ในภาษาแบบโครงสร้างแทบทุกภาษา JavaScript ก็เช่นกัน ในบทนี้เราจะได้เรียนรู้เกี่ยวกับประโยคคำสั่งหลักที่มีใน JavaScript ไม่ว่าจะเป็นการเลือกทำงานตามเงื่อนไข การวนลูปแบบต่างๆ เป็นต้น

• ประกาศตัวแปรก็เป็นประโยคคำสั่ง
• การเขียนโปรแกรมแบบวนรอบ
• การเขียนโปรแกรมแบบมีเงื่อนไข
• การใช้คำสั่ง with ช่วยทุ่นแรง

บทที่ 5 รวมคำสั่งเข้าด้วยกันเป็นฟังก์ชัน

เวลาที่เขียนโปรแกรมอะไรก็ได้ขึ้นมาสักโปรแกรมหนึ่ง ผู้อ่านเคยมั้ยครับ ที่ต้องกลับไปแก้ซอร์ซโค้ดแล้วกลับรู้สึกว่า “นี่ใครเขียนกันเนี่ย ดูไม่รู้เรื่องเลย” เหลียวซ้ายแลขวาก็ตัวเองนั่นแหละครับเขียนเอง ไม่ต้องไปตำหนิใครเค้า ในบทนี้ผมจะแสดงถึงการจัดกลุ่มคำสั่งให้เป็นหมวดหมู่อยู่ภายในสิ่งที่เรียกว่า “ฟังก์ชัน” ให้ดูครับ และยิ่งไปกว่านั้น การเขียนโปรแกรมเป็นฟังก์ชันนี้จะช่วยประหยัดซอร์ซโค้ด และทำให้เราไม่ต้องเขียนชุดคำสั่งอะไรที่ซ้ำซากกันอีกด้วย

• แค่ร้องเรียกชื่อฟังก์ชันเท่านั้นเดี๋ยวก็มา
• ประกาศให้โลกรู้ว่านี่คือฟังก์ชัน
• การส่งค่าเข้าไปใช้ในฟังก์ชัน
• ฟังก์ชันไม่จำกัดพารามิเตอร์
• การส่งค่ากลับจากฟังก์ชัน
• ความผิดพลาดที่เกิดจากการใช้ตัวแปรซ้ำซ้อนกัน
• ตัวแปรแบบโลคอลใช้เฉพาะฟังก์ชัน
• วิธีการประกาศตัวแปรแบบโลคอล

บทที่ 6 ปูพื้นฐานการเขียนโปรแกรมเชิงวัตถุ

Object Oriented Programming หรือ OOP เป็นวิธีการเขียนโปรแกรมโดยที่มองสิ่งต่างๆ ในระบบ เช่น ตัวอักษร, รูปภาพ, หน้าต่าง, แบบฟอร์ม ฯลฯ เป็นวัตถุการเขียนโปรแกรมแบบอ้างอิงวัตถุ ก็คือการเอาวัตถุพวกนี้แหละมาใช้งาน หรืออาจจะมีการสร้างวัตถุขึ้นมาใหม่ก็ได้สำหรับในบทนี้ผมขอเล่าเรื่องราวต่างๆ เกี่ยวกับ OOP ให้อ่านประดับความรู้ไว้ด้วยนะครับ

• ชนิดข้อมูล (Object Type) คืออะไร
• จุดเด่นที่ไม่เป็นรองใครของ OOP
• แล้ว JavaScript ของเราเก่งเท่า OOP รึเปล่า?
• สั่งการอ็อบเจ็กต์ด้วยพรอเพอร์ตีและเมธอด
• คำสั่ง new กำเนิดใหม่ให้อ็อบเจ็กต์
• ชนิดข้อมูล Date
• เราก็สร้างชนิดข้อมูลใหม่ขึ้นมาใช้เองได้
• ทดลองใช้ไฟล์ table.js ดูนะ
• เอ๊ะ! อาร์เรย์ก็เป็นอ็อบเจ็กต์นี่นา
• การกำหนดฟังก์ชันแบบอ็อบเจ็กต์

บทที่ 7 จับความเคลื่อนไหวทุกฝีก้าวด้วย Event Handle

รู้สึกแปลกใจบ้างรึเปล่าครับ ที่เว็บไซต์บางแห่งสามารถทำเมนูสวยๆ และโต้ตอบกับเมาส์ของเราได้ ยกตัวอย่างเช่น เวลาเราเอาเมาส์ไปชี้แล้วเมนูก็เกิดการเปลี่ยนสีบ้าง บางทีก็แตกออกเป็นเมนูย่อยบ้าง เหมือนกับเว็บนั้นรู้ว่าเรากำลังทำอะไรอยู่ และสามารถตอบสนองการกระทำของเราได้ เรื่องนี้ไม่ต้องนึกไปไหนไกลครับ เกี่ยวข้องกับความสามารถของ JavaScript ที่เรียกว่า “อีเวนต์ (Event)” นี่แหละ

• อีเวนต์อยู่ในแท็ก
• อีเวนต์ทั้งหมดรายงานตัว
• อีเวนต์ก็คือพรอเพอร์ตีหนึ่งของอ็อบเจ็กต์
• การสร้างอีเวนต์จำลอง

บทที่ 8 ว่าด้วยเรื่องของหน้าต่างและเฟรม

ถ้าจะจัดอันดับความคุ้นเคยกับผู้ใช้งานอ็อบเจ็กต์ window น่าจะได้รับคะแนนมากที่สุดเป็นอันดับที่ 1 ก็แหม… ถ้าไม่มี window แล้วอ็อบเจ็กต์อื่นๆ จะไปอยู่ที่ไหนกันล่ะครับ เปรียบเหมือนกับมีนักกีฬาว่ายน้ำแต่ไม่มีสระว่ายน้ำ มีนักฟุตบอลแต่ไม่มีสนามฟุตบอล ดังนั้นก่อนที่เราจะไปจัดการกับอ็อบเจ็กต์อื่นๆ ผมว่าเรามารู้จัก window กันให้ดีก่อนดีกว่า

• เปิดปิดหน้าต่างตามใจคนเขียนเว็บเพจ (ไม่ได้ตามใจคนดู)
• การติดต่อกับผู้เยี่ยมชมเว็บเพจด้วย alert, confirm และ prompt
• เปลี่ยนข้อความใน status bar
• ตั้งเวลาให้ฟังก์ชันทำงาน
• เขียนสคริปต์เคลื่อนย้ายอ็อบเจ็กต์ window
• การเลื่อนของสโครลบาร์
• แบ่งหน้าออกเป็นเฟรมก็ต้องใช้อ็อบเจ็กต์ frame
• window synonyms ชื่อเล่นของ window
• คลิกครั้งเดียวเปลี่ยนได้หลายเฟรม

บทที่ 9 อ็อบเจ็กต์ document คือหน้าตาของเว็บเพจ

ในบทที่ผ่านๆ มา เรามีโอกาสได้ใช้อ็อบเจ็กต์ document กันอยู่เป็นประจำเกือบทุกตัวอย่าง โดยเฉพาะเมธอด write() ที่ใช้สำหรับแสดงผลข้อความบนเว็บเพจ แต่อ็อบเจ็กต์ document ไม่ได้มีแค่เพียงเมธอดเดียวเท่านี้นะครับ ยังมีทั้งพรอเพอร์ตีและเมธอดอีกหลายตัวที่น่าสนใจไม่แพ้กัน

• พรอเพอร์ตีที่ไม่ต่างอะไรจาก HTML
• เมธอดที่คุ้นเคย
• ใส่สีสันให้เว็บเพจ
• จำไม่ได้แล้วว่า update เว็บครั้งสุดท้ายเมื่อไร

บทที่ 10 ข้อมูลและช่องรับข้อมูลในฟอร์ม

ช่องรับข้อมูลหรือฟอร์ม เป็นสิ่งหนึ่งที่นักพัฒนาเว็บนิยมนำมาประยุกต์ใช้งานกับ JavaScript สาเหตุหนึ่ง ก็น่าจะเป็นเพราะฟอร์มสามารถประยุกต์เข้ากับ JavaScript ได้อย่างลงตัวและเกิดผลลัพธ์ที่หลากหลาย ดังนั้นในบทนี้ ผมจึงขออนุญาตนำเรื่องของฟอร์ม มาอธิบายประกอบกับตัวอย่างให้ดูกันอย่างละเอียด ไม่แน่นะครับ… สิ่งที่ผู้อ่านสงสัยมานานแสนนาน เกี่ยวกับลูกเล่นของฟอร์มที่เคยเจอะเจอมา อาจจะมีคำเฉลยอยู่ในบทนี้ก็ได้

• อะไรที่กรอกได้ก็เป็นพรอเพอร์ตีของฟอร์มหมด
• อ็อบเจ็กต์ text และ textarea
• มหัศจรรย์! ตัวอักษรวิ่งได้
• ป้องกันการเขียนข้อมูลทับลง text
• อ็อบเจ็กต์ button
• ข้อความบนปุ่มก็เปลี่ยนได้
• อ็อบเจ็กต์ checkbox
• อ็อบเจ็กต์ radio
• เกม Click It! มาประลองฝีมือคลิกกันหน่อย
• อ็อบเจ็กต์ select
• อ็อบเจ็กต์ hidden
• ผนึกกำลังใช้งานร่วมกับ CGI

บทที่ 11 รวมลิงก์อุตลุด

เห็นชื่อบทแล้ว อย่าคิดว่าบทนี้จะเป็นบทรวมลิงก์เว็บไซต์ของ JavaScript นะครับ ลิงก์ในที่นี้ที่ผมจะกล่าวถึงจะเป็นเรื่องทุกแง่มุมของอ็อบเจ็กต์ location, อ็อบเจ็กต์ link และ อ็อบเจ็กต์ทุกตัวที่เกี่ยวข้องกับการสร้างลิงก์ไปยังเว็บไซต์ต่างๆ นอกจากนั้นแล้ว บทนี้ยังมีตัวอย่างสคริปต์การเปลี่ยนปุ่มหรือ Roll Over ที่เป็นสคริปต์ยอดฮิต ให้ผู้อ่านศึกษาด้วย

• โพรโตคอล javascript: และ about:
• อ็อบเจ็กต์ location
• การเปลี่ยนเว็บไซต์และการสั่งโหลดใหม่
• อ็อบเจ็กต์ link
• เมาส์มาเมื่อไหร่ เปลี่ยนภาพไปเมื่อนั้น (Roll Over)
• สร้างลิงก์โดยไม่ใช้อ็อบเจ็กต์ link
• อ็อบเจ็กต์ anchor
• อ็อบเจ็กต์ history
• ซุปเปอร์ปุ่ม Back และ Next

บทที่ 12 ภาพ 1 ภาพมีความหมายกว่าคำพันคำ

ในบทนี้จะเป็นเรื่องของการประยุกต์ใช้ภาพกับ JavaScript ครับ ตั้งแต่การสร้างลิงก์กับภาพ การทำภาพเคลื่อนไหวด้วย JavaScript และที่สำคัญ ผมมีเกมสนุกๆ ชื่อเกมต่อภาพปริศนามาให้เขียนเล่นกันด้วย บทนี้ทั้งหมด แค่เกมอย่างเดียวก็คุ้มค่าแสนจะคุ้มในการอ่านแล้วครับ

• อ็อบเจ็กต์ image
• การทำ Precache Image เพื่อให้แสดงภาพได้เร็วขึ้น
• อ็อบเจ็กต์ images (อาร์เรย์ของอ็อบเจ็กต์ image)
• เกมต่อภาพปริศนา (Slide Puzzle)
• การสร้างภาพแอนิเมชันด้วย JavaScript
• โปรแกรมตัวอย่าง JavaScript Animation

บทที่ 13 อ็อบเจ็กต์ Math และ String ผู้ช่วยพระเอก

จะว่าไปแล้วอ็อบเจ็กต์ Math และ String ไม่ค่อยทำอะไรได้เป็นเรื่องเป็นราวกลายเป็นสคริปต์เจ๋งๆ หรอกครับ เพราะฉะนั้น บทนี้ก็คงจะไม่มีเกมสนุกๆ หรือสุดยอดเทคนิคอะไรมากมาย แต่...ในทางกลับกัน ก็ใช่ว่าอ็อบเจ็กต์ 2 ตัวนี้จะไม่มีประโยชน์นะครับ สุดยอดสคริปต์ไหนที่ไม่ใช้เจ้า 2 อ็อบเจ็กต์นี้ร่วมเข้าไปด้วย มันจะกลายเป็นสคริปต์ที่จืดชืดสนิททันที จะเปรียบก็เหมือนกับพระเอกไม่มีผู้ช่วย โดนผู้ร้ายเล่นงานอานแน่

• ค่าคงที่ทางคณิตศาสตร์
• ฟังก์ชันทางคณิตศาสตร์
• ชนิดข้อมูล String
• การหาความยาวของ String
• การกำหนดรูปแบบตัวอักษร
• การดำเนินการกับข้อความ
• การเปลี่ยนขนาดตัวอักษร

บทที่ 14 จัดหน้าเว็บเพจได้ดังใจถ้าใช้เลเยอร์

มือกราฟิกมักจะชอบจัดหน้าตาเว็บเพจด้วยเลเยอร์ครับ เค้าว่ามันสะดวก และวางเลย์เอาต์ได้ง่ายกว่า ผมก็เห็นด้วยเรื่องนี้ แต่สำหรับผมแล้วเลเยอร์ยังมีประโยซน์อีกหลายอย่าง อย่างบทนี้ผมจะนำเลเยอร์มาประกอบเป็นงานพรีเซนเทชันเก๋ๆ ผ่านเว็บ หรืออาจจะเป็นการทำแอนิเมชันแบบหลุดโลกสไตล์ผมก็ได้ ผู้อ่านอยากรู้มั้ยครับว่าหลุดโลกอย่างไร

• การใช้เลเยอร์
• เลเยอร์แบบ Positioned หรือเลเยอร์แบบระบุตำแหน่ง
• แท็ก ป้องกันเบราเซอร์ที่ไม่สนับสนุน
• เลเยอร์แบบ Inflow หรือเลเยอร์แบบสัมพันธ์
• อ็อบเจ็กต์ layer และอาร์เรย์ layers
• การทำงานพรีเซนเทชันผ่านเว็บ
• การสร้างเว็บเพจให้น่าสนใจ ด้วยเลเยอร์แอนิเมชัน

บทที่ 15 เติมความสามารถพิเศษให้เว็บเพจด้วยปลั๊กอิน

เมื่อเราต้องการให้เว็บเพจ สามารถแสดงผลด้วยอะไรที่มากกว่าภาพและตัวอักษรธรรมดา อย่างเช่น เสียง หรือภาพเคลื่อนไหวในลักษณะของภาพวิดีโอ เราจะต้องแทรกโปรแกรมพิเศษที่เรียกกันว่า “ปลั๊กอิน” เข้าไปยังเว็บเพจ JavaScript เองก็มีคำสั่งที่ใช้ควมคุมปลั๊กอินต่างๆ เหล่านี้ด้วยเช่นเดียวกัน

• การใส่ปลั๊กอินลงในเว็บเพจ
• แสดงรายชื่อเมธอดและพรอเพอร์ตีในปลั๊กอิน
• ปลั๊กอิน LiveAudio
• ตู้เพลงบนอินเทอร์เน็ต (Internet Jukebox)

บทที่ 16 สไตล์ชีตในแบบฉบับของ JavaScript

นักพัฒนาเว็บส่วนใหญ่ จะใช้สไตล์ชีตในการกำหนดรูปแบบเอกสารทั้งหมดภายในเว็บเพจ ด้วยเหตุผลที่สไตล์ชีตจะช่วยประหยัดซอร์ซโค้ด อีกทั้งยังจัดตัวอักษรข้อความ ฟอร์มหรือวัตถุใดๆ ด้วยความละเอียดที่มากกว่าการกำหนดจาก HTML ธรรมดา สไตล์ชีตที่ว่านี้ คนทั่วไปมักจะคิดว่ามีเฉพาะ CSS (Cascading Style Sheet) เท่านั้น ซึ่งความจริงแล้วไม่ใช่ JavaScript เอง ก็มีสไตล์ชีตเหมือนกัน

• การใช้ JavaScript Style Sheet
• พรอเพอร์ตี ids และแอตทริบิวต์ ID
• การกำหนดรูปแบบตัวอักษร
• การกำหนดรูปแบบข้อความ
• การกำหนดสี
• การวางเลย์เอาต์ของกรอบสี่เหลี่ยม
• การใช้คลาส
• แท็ก
• การใช้ รับสไตล์ชีตจากไฟล์ภายนอก
• Cascading Style Sheet
• ใส่สไตล์ลงในแท็กโดยตรง
• การใช้คลาสและ ids ใน CSS
• การใช้กฎขั้นสูงของ CSS
• สรุปพรอเพอร์ตีของ Cascading Style Sheet
• รู้จักกับ
  อีกแท็กหนึ่งที่วางเลเยอร์ได้
• พรอเพอร์ตีที่ใช้กับแท็ก
• การใช้ CSS ร่วมกับ JavaScript
• พรอเพอร์ตีของสไตล์ชีตที่กำหนดโดยไมโครซอฟต์

บทที่ 17 ร่ายเวทย์ให้ ActiveX ของเล่นสารพัดประโยชน์

“ActiveX” (ชื่อเท่ดีมั้ยล่ะ) เป็นสุดยอดเทคโนโลยีอย่างหนึ่งของไมโครซอฟต์ จึงใช้ได้กับ IE เท่านั้น ใครเป็นแฟนเว็บเบราเซอร์ยี่ห้ออื่นก็ข้ามบทนี้ไปได้เลย แต่ถ้าใครสนใจก็เร่เข้ามา ในบทนี้เราจะทำความรู้จัก ActiveX และวิธีนำมาใช้ร่วมกับ JavaScript

• ActiveX คืออะไร
• เตรียมพร้อมการใช้ ActiveX
• เริ่มต้นการใช้ ActiveX
• การใช้โปรแกรม ActiveX Control Pad สร้าง ActiveX Control

บทที่ 18 JavaScript Wizard

ก่อนที่ผมจะเขียนหนังสือเล่มนี้ ผมได้สร้างเครื่องมือสำหรับสร้าง JavaScript ขึ้นมาตัวหนึ่ง คือ JavaScript Wizard อยู่ที่ http://www.javascriptwizard.com ด้วยเครื่องมือนี้ ผู้อ่านสามารถสร้าง JavaScript ที่มีความซับซ้อนได้ในเวลาไม่ถึงนาที และที่น่าทึ่งยิ่งกว่านั้น แม้ว่าผู้อ่านจะไม่รู้จักภาษานี้เลย ก็สามารถใช้เครื่องมือนี้สร้าง JavaScript ได้อย่างง่ายดาย

• JavaScript Wizard เหมาะสำหรับใครบ้าง
• JavaScirpt Wizard สร้างอะไรได้บ้าง
• ทดลองสร้างตัวอักษรวิ่ง

FAQ คำถามที่ถามบ่อย

• คำถามทั่วๆ ไป
• แหล่งความรู้
• เทคนิคการเขียน
• การแก้ปัญหา
• เกี่ยวกับผู้เขียน และเว็บไซต์ CraZyHero Studio

ดัชนี

แสดงรายการหนังสือ | สั่งซื้อหนังสือ