หน่วยที่ 8 การใส่เทคนิคพิเศษ ... · 2011. 1. 21. · หน่วยที่ 8 การใส่เทคนิคพิเศษด้วยdhtml

หนวยท 8 การใสเทคนคพเศษดวยDHTML

หวขอเรอง 1. คาศพททเกยวของ 2. ความรเบองตนเกยวกบ DHTML 3. องคประกอบของ DHTML 4. เหตการณทสามารถเกดขนกบไฟลเวบเพจ 5. หลกการสราง DHTML 6. การใสเทคนคพเศษดวย DHTML จดประสงคการเรยนร

1. อธบายความหมายของ DHTMLได 2. อธบายความรเบองตนเกยวกบ DHTML 3. อธบายองคประกอบของ DHTMLได 4. บอกเหตการณทสามารถเกดขนกบไฟลเวบเพจ 5. อธบายหลกการสราง DHTMLได 6. ปฏบตการใชคาสงของภาษาสครปตได 7. ประยกตใชคาสงเทคนคพเศษดวย DHTMLได

สมรรถนะอาชพประจาหนวย(สงทตองการใหเกดการประยกตใชความร ทกษะ คณธรรม เขาดวยกน) 1. ประยกตใชเทคนคพเศษ DHTMLไดถกตองตามขนตอนและหลกการ 2. บรณาการเทคนคพเศษดวย DHTMLในงานอาชพไดอยางรอบคอบและมความคดรเรมสรางสรรคผลงาน 3. มลกษณะกจนสยทดในการปฏบตงาน มความรบผดชอบ มระเบยบวนย ตรงตอเวลา สนใจใฝรและเชอมนในตนเอง มความคดรเรมสรางสรรค

302

แบบทดสอบกอนเรยน หนวยท 8 การใสเทคนคพเศษดวยDHTML

คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. การเขยนเวบเพจทมการจดเกบขอมลจานวนมากไวภายในฐานขอมล คอขอใด ก. การเขยนโปรแกรมแบบไดนามก ข. การเขยนโปรแกรมแบบสแตตก ค. การเขยนโปรแกรมแบบจาวาสครปต ง. การเขยนโปรแกรมแบบสไตลชท 2. ภาษาสครปตททางานฝงลกขาย ก. เหมาะกบขอมลสาคญ ข. ซอนโคดคาสงและรบขอมลได ค. เปดเผยโคดคาสงและรบขอมลได ง. นยมใชในการทาแบบไดนามกดานขอมล 3. วตถคอขอใด ก. สงของ ข. รปภาพ ขอความ เอกสารไฟลเวบเพจ ค. รปภาพทแสดงอยหนาเวบเพจเกดเหตการณ ง. สงทจะตองดาเนนการเมอเหตการณเกดขนกบวตถ 4. วตถทถกกาหนดขนเมอเปดโปรแกรมเวบเบราวเซอร ก. frame ข. Window ค. Dynamic ง. Document 5. ขอใดคอ เปนเหตการณทปมซายบนเมาสถกกดลง ก. onMouseOut ข. onMouseMove ค. onMouseOver ง. onMouseDown 6. การสราง DHTMLตรงกบขอใด ก. การนาภาษาสครปตทใชในการสรางเวบไซต ข. เปนเหตการณทวตถใด ๆ ในเอกสารเวบเพจกาลงถกชดวยเมาส ค. การกาหนดวา หากมเหตการณ ใด ๆ เกดขนกบวตถทตองการ ง. ภาษาสครปตท สามารถทางานรวมกบการแสดงผลบนโปรแกรมเวบเบราวเซอร

303

7. ขอใดเขยนคาสงแทกดวยภาษา java Script ก. <style "JavaScript"> ข. <syle language="JavaScript"> ค. <script JavaScript =" language "> ง. <script language="JavaScript"> 8. เครองหมายกาหนดกรรมวธทางคณตศาสตร เรยกวาอะไร ก. ตวแปร ข. พชคณต ค. ตวดาเนนการ ง. การเปรยบเทยบ 9. รปแบบ embedded Style Sheets ตรงกบขอใด ก. p{font-size:16}

ข. .a1 {font-famiry:fantasy;font-size:16} ค. <h1 style ="color:blue;font-style:italic"> ง. link rel =stylesheet" type="text/css" href="css_link.css". 10. รปแบบ Inline Sytle Sheet ตรงกบขอใด ก. p{font-size:16}

ข. .a1 {font-famiry:fantasy;font-size:16} ค. <h1 style ="color:blue;font-style:italic"> ง. link rel =stylesheet" type="text/css" href="css_link.css".

304

หนวยท 8 การใสเทคนคพเศษดวยDHTML

การสรางเอกสารเวบเพจเพอนาเสนอขอมลบนอนเทอรเนตนนจะเกดจากการเขยน โคด

คาสงตางๆ เพอควบคมการทางาน ซงปจจบนมเทคโนโลยหลายตวทถกพฒนาขนมาเพอใชในการสรางหรอกาหนดรปแบบของเวบเพจ ในการตอบสนองความตองการของผใชตอบโตกบผใช มลกเลน ทหลากหลาย และรวมไปถงสภาพแวดลอมตางๆ ทเกยวของดวยนนกคอสงหนงทนกพฒนาเวบเพจตองรและเขาใจเปนอยางด คอภาษาตางๆ ทเกยวของกบการสรางเวบไซต

1. คาศพททเกยวของ 1.1 ทบทวนคาศพทหนวยการเรยนทผานมา ไดแก Attribute, Code Javascript, HTML, Http, Protocal, Value, Web browser, Scripting Language, Scripting, 1.2 คาศพทใหม 1.2.1 ดาตาเบสเซรฟเวอร (Database Server) คอ ฐานขอมลบนเครองบรการ 1.2.2 เครองปรนเซรฟเวอร (Print Server) คอ การกาหนดใหเครองบรการ ทาหนาทใหบรการงานทางดานการพมพ 1.2.3 DHTML อานวา ดอชทเอมแอล (Dynamic Hyper Text Markup Language) คอ ภาษาททาใหเกดการสรางเวบเพจทไมหยดนง ตอบโตกบผใช มลกเลน ทชวยทาใหการแสดงเวบเพจนาสนใจมากขน สามารถโตตอบกบผใชงานไดอยางทนทวงท ทางานไดดกวากาหนดรปแบบเอกสารHTMLปกต โดยไมตองตดตอกบเครองบรการเวบตลอดเวลา 1.2.4 วตถ (Object) คอ ในหนวยการเรยนนคอวตถทตองการสรางการโตตอบใหกบผเปดไฟลเวบเพจ 1.2.5 ชอคาสงแทก (Selector) คอ ชอของคาสงแทกทตองการจะใหแสดงผล เชน <table> กจะแสดงผลในสวนของตาราง 1.2.6 คณสมบต (Prooerty) คอ สวนของคณสมบตของคาสงแทกทเราตองการใหแสดง เชน สตวอกษร, ชนดตวอกษร, ขนาดตวอกษร 1.2.7 คาทกาหนด (Value) คอ คาทตองการใหแสดง เชน ตวอกษรสแดง, ตวอกษรแบบ tahoma, ตวอกษรขนาด 12 pt 1.2.8 ตวแปร (Variable) หมายถง ชอหรอสญลกษณทตงขนสาหรบการเกบคาใดๆ ทไมคงท 1.2.9 สไตลซท (CSS: Cascading Style Sheet) คอ ภาษาหรอโปรแกรมทถกสรางขนเพอเพมลกเลนในการเขยนเวบเพจใชในการกาหนดลกษระการแสดงผล การเลนส การจดเรยง ลกษณะตวอกษร 1.2.10 ภาษาพเอชพ (PHP: Hyper Text Preprocessor) คอภาษาใชสาหรบจดทาเวบไซต และแสดงผลออกมาในรปแบบเอกสาร HTML เปาหมายหลกของภาษาน คอใหนกพฒนาเวบไซตสามารถเขยนเวบเพจทมความตอบโตไดทนทและการอานขอมลจากดาตาเบส

305

2. ความรเบองตนเกยวกบ DHTML

2.1 กระบวนการทางานของการตดตอสอสารขอมลบนเครอขายอนเทอรเนต การตดตอสอสารขอมลบนเครอขายอนเทอรเนตทคอมพวเตอรททวโลกสามารถเชอมถงกนไดนน จะมการตดตอสอสารอย 2 แบบ คอ แบบสงขอมล และรบขอมล โดยเครองคอมพวเตอรททาหนาทสงขอมลจะเรยกวาเครองบรการ และเครองคอมพวเตอรทรบขอมลนน จะเรยกวา เครองลกขาย แสดงไดดงรปภาพท 8.1 การทางานจะเรมจากเครองลกขายทาการรองขอใชบรการจากเครองบรการ หลงจากทเครองบรการ ไดรบขอมลการรองขอและทาการประมวลผลเรยบรอยแลวจะทาการสงขอมลดงกลาวตอบกลบไปยงเครองลกขาย โดยการรองขอขอมลไปยงเครองบรการ อาจจะเกดจากเครองลกขายหลาย ๆ เครองพรอมกนกได

ภาพท 8.1 แสดงการทางานของการสอสารขอมล

ในองคกรตาง ๆ ไดนาโยชนของการทางานไปใชในการจดการทรพยากรภายในสานกงาน ตวอยางเชน การใหบรการเครองปรนเซรฟเวอร เมอพนกงานคนใดตองการสงพมพเอกสารกสามารถสงเครองของตนเองไดเลย แสดงดงรปภาพท 8.2

ภาพท 8.2 แสดงการทางาน ในลกษณะการใหบรการเครองพมพ

เครองบรการ เครองลกขาย

การรองขอ

การตอบกลบ

เครองปรนเซรฟเวอร เครองลกขาย

1. การรองขอ

2.การตอบกลบ

306

อกตวอยางหนงขององคกรนาไปใชมากในปจจบน คอการนาขอมลตางๆ ขององคกรไปเกบไวในฐานขอมลบนเครองบรการ ซงการทางานทกอยางกจะเกดขนทเครองลกขาย คอ สามารถทาการเพม ลบ แกไข หรอ ดงขอมลทอยในฐานขอมลมาใชงานได อกทงทาใหการจดการขอมลตางๆ ทาไดงาย ไมกระจดกระจาย และมความถกตอง แสดงดงภาพท 8.3

ภาพท 8.3 แสดงการทางานของ ในลกษณะการใหบรการระบบฐานขอมลและเครองปรน

ปจจบนในวงการของเวบไซตจงไดนาหลกการทางานดงกลาวมาใชสาหรบบรการขอมลขาวสารตางๆ ผานทางเครอขายอนเทอรเนต โดยเครองลกขายทขอใชบรการจะมโปรแกรมทเรยกวาเวบเบราวเซอรนนเอง เชน กระบวนการทางานจะเรมจากเวบเบราวเซอรทาการรองขอเวบเพจตามระบทอยของไฟลหรอเวบไซตบนอนเทอรเนต เชน ผใชรองขอไปวทยาลยเกษตรและเทคโนโลยเชยงใหม กจะระบทคอ http://www.cmcat.ac.th เปนตนจากนนเวบเบราวเซอรจะสงการรองขอ และสงไปยงเครองบรการ ผานโพรโทคอลเอชททพและเมอเครองบรการ รบการรองขอแลว จะประมวลผลคาสง (Execute) และสงผลลพธตอบกลบไปยงเวบเบราวเซอร โดยอาศยโพรโทคอลเอชททพ อกครง เมอเวบเบราวเซอรไดรบผลลพธดงกลาวแลว จงนาขอมลมาจดรปแบบและแสดงผลบนเวบเบราวเซอรใหผใชไดเหน แสดงดงภาพท 8.4

ภาพท 8.4 แสดงการทางานของเวบไซต

เครองดาตาเบสเซรฟเวอร เครองลกขาย

1. การรองขอ

1. การตอบกลบ

เครองบรการเวบ

การรองขอ

การตอบกลบ

เวบเบราวเซอร

307

เวบบราวเซอร

2.2 เอกสารเวบเพจ (Web Document) แบงออกเปน 2 ประเภทดงน 2.2.1 เอกสารเวบเพจคงท (Static Web Document) คอลกษณะเอกสารเวบเพจไมคอยมการเปลยนแปลง เชน เวบเพจประวตสวนตว เวบนาเสนอประวตองคกรและโครงสรางขององคกร เปนตน ถามการเปลยนแปลงบอย ๆ อาจทาใหเกดความลาชาในการอพเดตขอมล ขาดความยดหยน และไมสามารถสรางการโตตอบระหวางผใชกบเวบเพจได ซงนกคอมพวเตอรเพยงแคจดหาเครองบรการ ทจะใชสาหรบจดเกบขอมลเทานน และผพฒนาเวบเพจอาจไมจาเปนตองมความรเรองการเขยนโปรแกรมกได เพยงสามารถสรางเวบเพจไดโดยใชโปรแกรมสาเรจรปตาง ๆ ไดกเพยงพอแลว เชน โปรแกรม Adobe Dreamweaver เปนตน ลกษณะการทางานของเอกสารเวบเพจประเภทนแสดงดงรปภาพท 8.5 และสาหรบเอกสารเวบเพจคงท กมขอดขอเสยดงตอไปน 1) ขอดของเอกสารเวบเพจคงท

(1) สรางไดงายมพนฐานเกยวกบภาษาHTML (2) ดแลงายเนองจากไมมการเปลยนแปลงอะไรมากกมาย (3) ใชเวลาในการเรยกเวบเพจนอยกวาแบบอนๆ 2) ขอเสยของเอกสารเวบเพจคงท (1) ถาเปนขอมลทตองเปลยนแปลงบอยจะเกดความไมสะดวก (2) ขาดความยดหยน (3) ไมสามารถสรางการโตตอบกบผใชได

ภาพท 8.5 แสดงการทางานเอกสารเวบเพจคงท

2.2.2 เอกสารเวบเพจแบบเปลยนแปลงขอมลเองได (Dynamic Web Document) คอ เอกสารเวบเพจทไดรบการพฒนาขนมาเพอแกปญหาของเอกสารเวบเพจเพจคงท ทาใหม การทางานทไมหยดนงมากกวา ทงในเรองของการอพเดตขอมล และสามารถโตตอบกบผใชได โดยเหมาะสาหรบเวบเพจทตองการเปลยนแปลงขอมลอยบอยครงหรอเวบเพจทมการจดเกบขอมลจานวนมากไวภายในฐานขอมล เชน เวบเพจแสดงรายละเอยดของสนคา และเวบเพจฝากประวตการ

1.รองขอเวบเพจกบ เครองบรการเวบ

2. สงเวบเพจกลบไปยงเวบเบราวเซอร

เครองบรการเวบ

308

รบสมครงาน เปนตน ในการพฒนาโปรแกรมบนเวบเพจประเภทนตองอาศยผพฒนาทมความรความสามารถในการเขยนคาสงในเวบเพจ เชน พเอชพ, จาวาสครปต เปนตน เนองจากตองกาหนดรปแบบการทางานรวมกบกบภาษาHTMLจงเรยกภาษาเหลานวาภาษาสครปต สามารถแสดงลกษณะการทางานไดดงรปภาพท 8.6

ภาพท 8.6 แสดงการทางานเอกสารเวบเพจแบบเปลยนแปลงขอมลได

ซงลกษณะภาษาสครปต แบงออกเปน 2 ประเภท คอ 1) ภาษาสครปตทประมวลผลทเครองลกขาย (Client Side Scripting) คอ ภาษาสครปตทถอเปนสวนหนงของไฟลเวบเพจ โดยสวนใหญมกจะฝงอยในเอกสารHTMLและถกประมวลผลดวยเวบเบราวเซอรเพอตอบสนองตอผใชทนท เชน การตรวจสอบขอมลทผใชปอน การแสดงขอความเตอน การแสดงวนเดอนป การปรบเปลยนเนอหารวมถงการแสดงผลทางดานการเคลอนไหว (Animation) เปนตน เพอเพมความคลองตวในการใชงานใหกบเวบไซต ไดแก ภาษาจาวาสครปต และภาษาวบสครปต (VBScript) เปนตน (1) ภาษาจาวาสครปตถกพฒนาโดย บรษท เนตสเคปคอมมวนเคชนส จากด โดยใชชอวา Live Script เพอใชสรางเวบเพจโดยตดตอกบเครองบรการ ดวยโปรแกรมแปลภาษา (Live Wire) ตอมาบรษท เนตสเคป จงไดรวมมอกบ บรษทซนไมโครซสเตมส ปรบปรงระบบการทางานของเวบเบราวเซอร เพอใหสามารถตดตอใชงานกบภาษาจาวาได และไดปรบปรงสครปตใหม เมอป พ.ศ. 2538 แลวตงชอใหมวาจาวาสครปต นนเอง ตวอยางเชน

ก. สรางเมนทสามารถตอบสนองตอการเอาเมาสไปชได ข. สรางเครองคดเลข ปฏทน เกมส ในเวบเพจ ค. เปด,ปด,เคลอนยายตาแหนงของวนโดว ง. ทาตวอกษรวงแบบตางๆ จ. ตรวจสอบความถกตองของแบบฟอรมทผใชกรอก กอนสงขอมล

ไปยงแมขาย และอนๆ อกมากมายทไมตองตดตอกบแมขาย

โปรแกรมแปลภาษา PHP, ASP, JSP, CGI

2. เรยกโปรแกรมแปลภาษา

1.รองขอเวบเพจกบ เครองบรการเวบ

เครองบรการเวบ เวบเบราวเซอร

4.สงผลลพธ เอชทเอมแอลสงไปยงเวบเบราวเซอร

ดาตาเบส (Data base)

3. ตดตอฐานขอมล

309

(2) ภาษาวบสครปต (VBscript) ซงเปนภาษาสครปต ถกพฒนาโดยบรษทไมโครซอฟท สามารถทจะทาใหเวบเพจทเขยนดวยภาษาHTMLซงเปนเวบเพจแบบคงทใหเปนเวบเพจทขอมลเปลยนไดตลอดเวลาตามทผใชตองการได เปนภาษาทถกพฒนามาจากภาษา Visual Basic จงมโครงสรางคลายกบภาษา Visual Basic สามารถใชรวมกบคาสงแทกตาง ๆ ของภาษาHTML การทางานนนจะถกนาไปใชโดยการใสคาสงลงไปในเอกสารเอชทอมแอลและเมอเวบเบราวเวอตอานเอกสารนน กจะทาการแปลงตวสครปตไปอยในรปแบบทจะทาการรน (Run) ได โดยท ภาษาวบสครปต จะถกรนโดยทนท หรอวารนหลงจากเหตการณใดเหตการณหนงกได เชน จะรนเมอผใชกดปม Enter เปนตน และใชไดดทสดสาหรบโปรแกรมอนเทอรเนตเอกซพรอเรอร 2) ภาษาสครปตทประมวลผลทเครองบรการ (Server Side Scripting) เปนภาษาสครปตทมการทางานแตกตางกบภาษาสครปตลกขาย คอลกษณะภาษาสครปตทประมวลผลทเครองบรการ การทางานทงหมดจะเกดขนทเครองบรการและสามารถสรางเวบเพจทมการตอบสนองกบผใช ซงอยในรปแบบเวบแอปพลเคชน (Web Application) ทใชกนอยางแพรหลายในปจจบน เชน เวบไซตรานจาหนายสนคาระบบออนไลน การทารายการบญชออนไลน รายงานขาว พยากรณอากาศ หรอ การสบคนขอมล เปนตนสาหรบภาษาสครปตทมการประมวลผลทเครองบรการ มดงน (1) ภาษาพเอชพ เปนภาษาจาพวกสครปตทนยมใชกนอยางแพรหลายเพราะมใหใชงานฟรนยมเรยกนวา โอเพนซอรส (Open Source) ไดรบการพฒนาและออกแบบมา การเขยนคาสงตองอาศยการฝงตวอยในคาสง แทกบนเอกสารHTML ภายใตเครองหมาย <?php…?>หรอ <?...?> สามารถนามาใชทาเวบเพจทจาเปนตองสรางการตอบสนองกบผใช เนองจากมความสามารถในการนาขอมลจากฐานขอมลประเภทตาง ๆ มาแสดงในเวบเพจ เหมาะสาหรบนาใชทาเวบเมล เวบบอรด เวบเพจในทางพาณชยอเลกทรอนกส ตลอดจนนามาใชในการพฒนาเวบเพจเพอใชงานภายในองคกร (2) ภาษา ASP, ASP.NET (Active Server Pages) คอภาษาทใชพฒนาเวบแอปพลเคชนทพฒนาขนโดยบรษทไมโครซอฟต ซงออกแบบใหสามารถสรางแอปพลเคชนไดงายและสะดวกยงขน และมจดเดนใชพฒนาและจดการเวบแอปพลเคชนบนเครองบรการ เปนภาษาทมการรวมวตถตาง ๆ เพอใชทาหนาทในการสอสารและควบคมการทางานของเวบแอปพลเคชนทประมวลผลทแมขาย ซงมการเขยนสครปตหรอชดคาสงควบคมชดออบเจกตตางๆ เชน วบสครปต รวมกบแทกHTML แลวเกบไวในเครองบรการ เปนตน รปแบบของเอกสารเอเอสพ จะมแทกกากบอยภายใตเครองหมาย <%...%> ปจจบนไดพฒนาขนเปนรนทเรยกวา ASP.NET (3) ภาษาเจเอสพ (JSP: Java Server Pages) เปนภาษาสครปตทมลกษณะการทางาน สามารถฝงอยในไฟลเอกสารHTMLภายใตเครองหมาย <%...%> ซง จะอาศยโครงสรางของภาษาจาวา ดงนนผทตองการเขยนโปรแกรมดวยเจเอสพ ควรตองมความรพนฐานทางดานการเขยนโปรแกรมจาวาดวย ไฟลเอกสารเจเอสพ จะมนามสกลเปน *.jsp (4) รบออนเรลส (ROR: Ruby On Rails) หรอนยมเรยกสนๆ วา เรลส (Rails) คอ เฟรมวรกของโปรแกรมประยกตสาหรบเวเพจ (Web application), เวบบรการ (Web Service), และ เอแจกซ (AJAX) แบบโอเพนซอรส ทพฒนาดวยภาษารบ ซงจะชวยใหแอปพลเคชนทสรางขนสามารถทางานได และเรลส จะชวยในการตงคาและกาหนดคาการทางานตางๆ ภายในแอปพลเคชน

310

จงทาใหการพฒนา การนาไปใชงาน และการดแลรกษาเวบแอปพลเคชนงายขน เนองจากสถาปตยกรรมของ เรลส จะใชโครงสรางการทางานแบบ Model-View-Controller (MVC) ดงรปภาพท 8.7 และโดยมรายละเอยดดงน ก. M คอ Model เปนตวเกบสถานะ (Status) ของแอปพลเคชน ข. V คอ View เปนสวนทใชสรางการตดตอระหวางผใชกบระบบ (User Interface ) ค. C คอ Controller เปนตวจดการกบแอปพลเคชน ซงจะทาหนาทรบเหตการณตางๆ จากภายนอกหรอจากผใช มาเชอมตอกบ ตวเกบสถานะ และแสดงผลดวยการตดตอระหวางผ ใ ช กบระบบท เหมาะสมกลบไปยงผ ใ ชสามารถศกษาการใ ชงานเ พม เ ตมไ ดท http://rubyforge.org 2.3.3 เปรยบเทยบขอดขอเสยของภาษาสครปตทประมวลผลทเครองลกขายและภาษาสครปตทประมวลผลทเครองบรการ ตารางท 8.1 เปรยบเทยบขอดขอเสยของภาษาสครปตทประมวลผลทเครองลกขายและภาษา สครปตทประมวลผลทเครองบรการ

ภาษาสครปตทประมวลผลทเครองลกขาย ภาษาสครปตทประมวลผลทเครองบรการ

1. เซอรฟเวอรรบภาระการประมวลผล 1. ไคลเอนรบภาระการประมวลผล

2. ซอนโคดคาสงและรบขอมลได 2. เปดเผยโคดคาสงและรบขอมลได

3. เหมาะกบขอมลสาคญ 3. เหมาะกบขอมลไมสาคญ

4. นยมใชในการทา แบบไดนามกดานขอมล 4. นยมใชในการทาแบบไดนามกดานแสดงผล

ทมา : ประชา พฤกษประเสรฐ, 2549

ปจจบนเวบไซตทวไปจะใชเทคโนโลยทงสองนรวมกน คอ ในสวนทตองการความปลอดภย เชน สวนเกยวของกบขอมลลกคาหรอสมาชก กจะใชภาษาทประมวลผลทแมขายเปนหลก และสวนทเปนลกคาเลนการโตตอบและผใชจะใชการประมวลผลทลกขายเปนตน 2.4 ภาษาโปรแกรมอนทใชสรางเวบไซต ภาษาบางภาษาทมการประยกต เพอใหการชมเวบไซตมลกเลนนาสนใจรวมทงสรางรปแบบใหมมากขนดวย อาทเชน 2.4.1 ภาษาเอกซเอมแอล (XML: eXtensible Markup Language) เปนภาษามาตรฐานทถกพฒนาขนโดยองคกร W3C เพอใชแลกเปลยนขอมลบนอนเทอรเนตเหมอนกบภาษาHTMLแตมความสามารถเหนอกวาตรงทสามารถสรางเอกสารขอมลใหมโครงสรางทเปนมาตรฐาน และยงมสวนทใชอธบายขอมลในเอกสารเรยกวา“DTD” (Document Type Definition) ทาใหสามารถสงไฟลเอกซเอมแอล ไปประมวลผลกบคอมพวเตอรทกชนดทมตวแปลเอกสาร อกทงมความยดหยนในการดดแปลงเวบไซต เพอใหใชงานขามสภาวะแวดลอมทประกอบดวยฮารดแวรและ

311

ซอฟตแวรของระบบคอมพวเตอร ทเรยกวา แพลทฟอรม (Platform) ได ตวอยางเชน สามารถแปลงเวบไซตทสรางดวยภาษาHTMLใชไดกบมอถอได โดยไมตองศกษาภาษาใด ๆ เพมเตม 2.4.2 ภาษาดบเบลยเอมแอล (WML: Wireless Markup Language) เปนภาษาทใชในการสรางเอกสาร ซงสนบสนนการแสดงผลบนหนาจออปกรณสอสารไรสาย ทสนบสนนเทคโนโลยบรการ การเรยกใชขอมลในอนเตอรเนตดวยโทรศพทมอถอ (WAP: Wireless Application Protocal ) โดย มการพฒนามาจากภาษาHTMLในแงการสรางและพฒนาระบบ แตจะองอยกบขอจากดพนฐานของภาษาเอกทเอมแอล และคอนขางจะมกฎเกณฑของภาษาทแนนอน คอหามมขอผดพลาดในเรองของไวยากรณ บนมอถอเวบเพจแตละหนาจะเรยกวาการด (Card) และจานวนหลายๆ การดทสงมายงมอถอจะเรยกวาสารบ (Deck) ดงนน จงเหมาะสาหรบการแสดงผลบนจอภาพขนาดเลกผานเครอขายสอสารทมแบนดวทตา เชน เครอขายโทรศพทเคลอนท หรอวทยตดตามตวแบบสองทาง 2.4.3 ภาษาดบเบลยเอมแอลสครปต( WML Script) เปนภาษาทถกออกแบบและพฒนาขนใหมลกษณะการทางานแบบจาวาสครปต แตจะไมเหมอนกนตรงทจาวาสครปตนนจะประมวลผลทเครองลกขายแต ดบเบลยเอมแอลสครปตจะประมวลผลทเครองบรการ และทาการปรบปรงใหใชงานไดอยางเหมาะสมกบระบบอปกรณไรสาย ใชหนวยความจา และ ซพยตามาก ซายงไดตดเอาฟงกชนตาง ๆ ทไมเกยวของหรอไมมความจาเปนตองใชกบในระบบนออกไปดวยโดยจะถกแปลงใหขอมลอยในรปแบบของเลขฐานสอง (ไบนาร : Binary) กอน แลวจงสงกลบใหลกขาย 2.4.4 สไตลซท ภาษาทถกสรางขนเพอเพมความสะดวกในการเขยนเวบเพจแทนการใชภาษาแบบHTMLดงเดม มความสามารถในการคดลอกรปแบบ ไดแกพวก ลกษณะตวอกษร การใชส ขนาด สามารถกาหนดรปแบบทจะใชแสดงผลในเวบเพจใหตายตวไปเลยดวยใชคาสงแทกบรรทดเดยวแทนทจะเขยนออกมาเปนหลายๆ บรรทด อกทงหากอยากจะแกไขขนาดหรอสและรปแบบตวอกษรกงายตอการแกไขทเดยว ซงตางจากภาษาHTML จะตองไลแกไขทละหลายๆจด

3. องคประกอบของ DHTML องคประกอบของ DHTML สามารถแบงไดดงน 3.1 วตถ (Object) คอ วตถทตองการสรางการโตตอบใหกบผเปดไฟลเวบเพจ เชน รปภาพ ขอความ เอกสารไฟลเวบเพจ เปนตน โดยวตถจะมองคประกอบ 2 สวนคอ

3.1.1 คณสมบต (Property) เปนรายละเอยดทเกยวของกบวตถ เชน ชอของวตถ ขนาดของวตถ กรณทวตถคอรปภาพกมคณสมบตชอไฟลรปภาพ เปนตน 3.1.2 ฟงกชน (Method ) เปนฟงกชนทเปนการทางานของวตถ ๆ นน เชน การเปด การปด การยายตาแหนง การเตอน การยนยน เปนตน 3.2 เหตการณ (Even) คอ เหตการณทเกดขนกบวตถนน ทแสดงอยหนาเวบเพจ เชนกรณทเลอนเมาสชทรปภาพ หมายความวาวตถทเปนรปภาพทแสดงอยหนาเวบเพจเกดเหตการณคอถกเมาสช หรอ กรณคลกเมาสทขอความ หมายความวา วตถทเปนขอความทแสดงอย หนาเวบเพจเกดเหตการณคอ ถกคลกดวยเมาส เปนตน 3.3 สงทตองดาเนนการ (Action) คอ สงทจะตองดาเนนการเมอเหตการณเกดขนกบวตถนน ๆ ซงสงทตองดาเนนการคอคาสงตาง ๆ ของภาษาจาวาสครปตทถกสรางขนตามทกาหนด

312

4. เหตการณทสามารถเกดขนกบไฟลเวบเพจ

เหตการณตางๆ ท สามารถเกดขนไดกบวตถตางๆ ในไฟล บางเหตการณสามารถเกดขนไดกบวตถทกประเภท บางเหตการณสามารถเกดขนไดกบวตถบางประเภทเทานน

ตารางท 8.2 เหตการณทมกจะเกดขนและใชงานบอย วตถ เหตการณ

onClick เกดเหตการณนเมอวตถใด ๆ ในเอกสารเวบเพจถกเมาสคลก onError เกดเหตการณนเมอเมอโปรแกรมเวบเบราวเซอรเกดผดพลาดอยางใดอยาง

หนง ขณะกาลงอานไฟลเอกสารเวบเพจมาเพอแสดงผล onFocus เกดเหตการณนเมอวตถใด ๆ ในเอกสารเวบเพจไดรบความสนใจ onKeyDown เกดเหตการณนเมอปมใด ปมหนงบนคยบอรดถกกดลง onKeyPress เกดเหตการณนเมอปมใด ปมหนงบนคยบอรดถกกดแลวปลอย onkeyup เกดเหตการณนเมอทปมใด ปมหนงบนคยบอรดถกปลอยจากการกด onLoad เกดเหตการณนเมอทโปรแกรมเวบเบราวเซอรอานไฟลเวบเพจมาเพอ

แสดงผลเรยบรอยแลว onMouseDown เกดเหตการณนเมอปมซายบนเมาสถกกดลง onMouseMove เกดเหตการณนเมอเกดเหตการณนเมอเกดจาการเคลอนทของเมาส onMouseOut เกดจากการเคลอนทของเมาสออกจากวตถใด ๆ ในเอกสารเวบเพจ onMouseOver เกดเหตการณนเมอวตถใด ๆ ในเอกสารเวบเพจกาลงถกชดวยเมาส onMouseUp เกดเหตการณนเมอปมซายบนเมาสถกปลอยจากการกด

ทมา :อภชย ซอสตยสกล, 2550

5. หลกการสรางDHTML การสราง DHTML คอ การสรางความสมพนธระหวาง วตถทตองการ, เหตการณและสงทตองการดาเนนการ ดวยการกาหนดวาหากมเหตการณใด ๆ เกดขนกบวตถทตองการแลวใหดาเนนการอะไรบาง

<html> <head><title> หลกการสราง DHTML</title>

<script language="javascript"> function f1() {คาสงตาง ๆ ของ javascript} </script></head>

<boby> <img src= "cmcat.jpg" name ="apiwan" onClick="f1()"

</boby> </html>

313

<html> <head>

<title> หลกการสราง DHTML</title> <script language="javascript"> function ShowMsg( ) {window.status="ขณะนเมาสกาลงชทรปภาพ"; } function clearMsg( )

{window.status="เมาสไมไดชทรปภาพแลว"; } </script>

</head> <boby> <img src= "cmcat.jpg" name ="apiwan" onMouseOver="ShowMsg()" onMouseout= "clearMsg()"> </boby> </html>

จากคาสงแทก เมอโปรแกรมเวบเบราวเซอรไดรบไฟลเอกสารเวบเพจแลว จะแสดงผลในสวนของคาสง <boby> ตามปกต โดยในตวอยางเปนการแสดงรปภาพไฟลทชอ cmcat.jpg ซงรปภาพนถอวาเปนวตถชนหนงทแสดงอยในเอกสาร วตถรปภาพนชอ apiwan และกาหนดการตอบสนองตอเหตการณคอ ท onClick ="f1( )" หมายความวา หากเกดเหตการณคลกเมาสทรปภาพ ใหไปทฟงกชน f1 ทกาหนดอยในสวนหวของไฟลเอกสารเวบเพจในคาสงแทก <head> และ<script> ตามลาดบ สาหรบวงเลบทอยตอจากชอของฟงชน เปนสวนทใชสาหรบ การสงคาและรบคาในระหวางการสงใหฟงชนทางานดงตวอยางตอไปน

เมอแสดงผลผานโปรแกรมเวบเบราวเซอรดงภาพท 8.7

ภาพท 8.7 แสดงผลขอความท Status bar

Status bar จะแสดงขอความ “ เมาสไมไดชทรปภาพแลว

Status bar จะแสดงขอความ “ขณะนเมาสกาลงชทรปภาพ

314

จากภาพท 8.7 สงเกตไดวาเมอนาเมาสมาวางเหนอรปภาพจะปรากฏขอความออกมา ผลจากการทวตถคอรปภาพ กอใหเกดเหตการณ OnMouseOver ทรปภาพ จากนนกไปทางานทฟงชน ShowMsg ซงกาหนดใหแสดงขอความท Status bar ของโปรแกรมเวบบราวเซอร และเมอนาเมาสออกจากวตถ (รปภาพ) กอใหเกดเหตการณ OnMouseOut ของรปภาพ จะนนจะทางานทฟงชน ClearMsg ซงกาหนดใหแสดงขอความท Status bar เชนกน

6. การใสเทคนคพเศษดวยDHTML

การใสเทคนคพเศษดวย DHTML คอ การนาภาษาสครปตทใชในการสรางเวบไซต มาพฒนาเวบเพจ ซงจากการไดศกษามาแลวนนนมภาษาสครปตมากมายทใชในการพฒนาเวบเพจ ในทนจะกลาวถงการใสเทคนคพเศษดวยจาวาสครปต สไตลชท และการจดการฐานขอมลดวยภาษาพเอสพ เนองจากเปนภาษาสครปตท สามารถทางานรวมกบการแสดงผลบนเวบเบราวเซอรดวยภาษาHTMLและเปนทนยมนามาพฒนาเวบเพจกนมากทสด

6.1 ภาษาจาวาสครปต 6.1.1 รปแบบการเขยน ภาษาจาวาสครปต ม 2 แบบ ไดแก 1) รปแบบการเขยนแบบการแทรกคาสงแทกสครปตไวภายภายในเอกสารHTML (Embedded)

การแทรก คาสงแทกสครปต ไวภายในคาสงแทก<head>จะทางานเรวกวา แทรกไวภายในคาสงแทก body เพราะวาคาสงตางๆ ทอยในคาสงแทก <head> จะถกโหลดไวในหนวยความจา และพรอมทางานตลอดเวลา แตถาอยในคาสงแทก<body> จะถกโหลดเมอม การเรยกใชเทานน 2) รปแบบการเขยนแบบแทรกคาสงแทกสครปตวางไวภายนอกไฟลเอกสารHTML(External File) โดยมสวนขยาย คอ *.js โดยมวธการเขยนคาสงสครปตดงน

6.1.2 ชนดขอมลของตวแปร ตวแปร (Variable) หมายถง ชอหรอสญลกษณทตงขนสาหรบการเกบคาใด ๆ ทไมคงท โดยการจองเนอทในหนวยความจาของระบบเครองทเกบขอมลซงสามารถอางองได มขนาดขนอยกบชนดของขอมลและคาของขอมล ซงคาในตวแปรนสามารถเปลยนแปละไดตามคาสงในการประมวลผลโดยมรายละเอยดดงน

1) การตงชอ (Identifier or Name) เปนชอทตงขนมาเพอกาหนดใหเปนชอของโปรแกรมหลก, ฟงกชน, ตวแปร, คาคงท, คาสง และคาสงวน โดยมหลกการตงชอวา

รปแบบคาสง <script language="javascript"> คาสงตางๆ;

</script>

รปแบบคาสง <script language="JavaScript" src="ชอไฟล.js"></script>

315

(1) ขนตนดวยตวอกษรภาษาองกฤษตามดวยตวอกษรหรอตวเลขใด ๆ กได (2) หามเวนชองวาง (3) หามใชสญลกษณพเศษ ยกเวนขดลาง (_) และดอลลาร ($) (4) สาหรบความยาวของชอในจาวาสครปตจะมความยาวเทาใดกได แตท

นยมใช ไมเกน 20 ตวอกษร (5) การตงชอมขอพงระวงวา จะตองไมซากบคาสงวน (Reserve word)

และตวอกษรของชอจะจาแนกแตกตางกนระหวางอกษรตวพมพเลกกบอกษรตวพมพใหญ (6) ควรจะตงชอโดยใหชอนนมสอความหมายใหเขากบขอมล สามารถอาน

และเขาใจได 2) ชนดขอมลของตวแปร (Data type) แบงออกเปน 3 กลม (1) กลมตวแปรขอมลพนฐาน (Primitive Data Type) ไดแก

ก. ขอมลชนดตวเลข (Number) ประกอบดวย (ก) เลขจานวนเตม (Integer) (ข) เลขจานวนจรง (Floating) (ค) ตวเลขจานวนเตมเลกๆ ใชพนทเกบเพยงแค 1 ไบต (Byte) (ง) ตวเลขจานวนเตม ใชพนทเกบ 2 ไบต (Short) (จ) ตวเลขจานวนเตมขนาดใหญ ใชพนทเกบ 8 ไบต (Long) (ฉ) ตวเลขทศนยมขนาดใหญ ใชพนทเกบ 8 ไบต (Double) (ช) ตวอกษรทกชนด ตามมาตรฐาน 16-bit Unicode (Char) ข. ขอมลทางตรรกะ( Boolean) ประกอบดวย 2 สถานะ คอ จรง

(True) และเทจ (False) ค. ขอมลทเปนขอความ (String) หมายถง ซงจะตองกาหนดไวใน

เครองหมายคาพด ("...") ง. ไมมคาขอมลใดๆ (Null) หมายถง ซงคา null ใชสาหรบการ

ยกเลกพนทเกบคาของตวแปรออกจากหนวยความจา (2) กลมชนดของขอมลแบบอางอง (Reference Data Type ) ชนด

ขอมลทมการอางองตาแหนงในหนวยความจา ไดแกขอมลของคลาส ไดแก object class, boolean class, number class, string class และขอมลแบบอาเรย 2) คาสงวน (Reserve Word) เปนคาทมความหมายเฉพาะตวในภาษาจาวาสครปต คาสงวนไมใหมการตงชอซากบชอโปรแกรม, ฟงกชน, ตวแปร, คาคงท และคาสงแทก คาสงวนสามารถเรยกใชไดทนทโดยไมตองมากาหนดความหมายใหมแตอยางใด ตารางท 8.3 คาสงวน

คาสงวนในภาษา ภาษาสครปต abstract default if package throw boolean do implements private thows break double import protected transient

316

ตารางท 8.3 คาสงวน (ตอ) คาสงวนในภาษาสครปต

byte else inner public try byvalue extends instanceof rest var case final int return void cast finally interface short volatile catch float long static while char for native super class future new switch const generic operator synchronized continue goto outer this

ทมา : ประชา พฤกษประเสรฐ 3) การประกาศตวแปร (Declarations) เปนการกาหนดชอและชนดขอมล

ใหกบตวแปรเพอนาไปใชในโปรแกรม โดยการตงชอจะตองคานงถงคาของขอมลและ ชนดของขอมลทอางอง นอกจากนการตงชอควรใหสอความหมายของขอมล และอกษรของชอจะจาแนกแตกตางกนระหวางอกษรตวพมพเลกกบอกษรตวพมพใหญ

ในกรณทตองการกาหนดตวแปรหลายตวในบรรทดเดยวกนใหใชเครองหมาย คอมมา ( , ) คนระหวางชอตวแปรและปดทายดวยเครองหมายเซมโคลอน ( ; ) โดยทคาของขอมล ไดแก

(1) ขอมลทเปนตวเลข โดยกาหนดตวเลขไปไดเลย (2) ขอมลในทางตรรกะ ไดแก จรง (True) หรอ เทจ (False) เชน test =

True; (3) ขอมลสตรง ใหกาหนดอยในเครองหมายคาพด ("...") เชน

name = "อภวนท จกรคา";

ตวอยาง var num; var count = 10; var str1, str2, str3;

รปแบบคาสง var ชอตวแปร; var ชอตวแปร = คาของขอมล;

var ชอตวแปร1, ชอตวแปร2, ..., ชอตวแปรn;

317

6.1.3 การทาคอมเมนต จาวาสครปทยงสามารถแทรกสวนทเปนคอมเมนตไวเพอเตอนความจาของผเขยนหรอผอานจาวาสครปทโคดนน หรอเพอสะดวกในการจดทาเอกสารประกอบโปรแกรม โดยเวบบราวเซอรจะมองขามสวนทเปนคอมเมนตนไป การแทรกคอมเมนตในจาวาสครปท โคดทาไดโดยใชสญลกษณ // หรอ /*...........*/

1.6.4 รหสคาสงพเศษ (Character Escape Code) เปนการกาหนดรหสเพอควบคมงานพมพสตรงโดยใชเครองหมาย \ (Backslash) นาหนาตวอกษรทตองการกาหนดเปนรหส เพอใหกลายเปนรหสคาสงพเศษ ตารางท 10.7 รหสคาสงพเศษ

เครองหมาย คาอธบาย \b ลบไปทางซาย (Back Space) \f เลอนกระดาษไปอก 1 หนา (Form Feed) \n ขนบรรทดใหม (New Line) \r ตรวจสอบการกด Enter (Return)และการเลอนขนบรรทดใหมหนากระดาษ \t เลอนตาแหนงไปทางขวา 1 ชวงแทบ (Tab) \\ เตมเครองหมาย \ (Backslash)

6.1.5 ตวดาเนนการ (Operator) หมายถง เครองหมายกาหนดกรรมวธทางคณตศาสตร (Arithmetic operator) , พชคณตบลน (Boolean Algebra) , การเปรยบเทยบ ระหวางขอมล 2 ตว ซงเรยกวา โอประแรนด (Operand) โดยอาจมคาเปนตวเลข ขอความ คาคงท หรอตวแปรตาง ๆ ชนดของตวดาเนนการมดงน 1) ตวดาเนนการคณตศาสตร (Arithmetic operator) หมายถง ใชสาหรบคานวณโอประแรนดทเปนคาคงทหรอตวแปรกได โดยใหคาผลลพธเปนตวเลขคาเดยวโอเปอรเรเตอร เชงคณตศาสตรทคนสวนใหญรจกคนเคยกนมากทสดไดแก ตารางท 10.7 ตารางท 10.7 ตวดาเนนการคณตศาสตร เครองหมาย คาอธบาย

+ เครองหมายการบวก - เครองหมายการลบ * เครองหมายการคณ / เครองหมายการหาร % เครองหมายหาเศษทไดจากการหารทเรยกวา โมดลส(Modulus)

ตวอยาง ถาตองการใหตวแปร yoyo เกบขอความ C:\JavaScript จะกาหนดดงน yoyo = "C:\\JavaScript" ; จะไดผลลพธเปน C:\JavaScript

ตวอยาง // This is single line comment

318

ตารางท 8.4 ตวดาเนนการคณตศาสตร เครองหมาย คาอธบาย

++ เครองหมายการเพมคาทเรยกวาอนครเมนต (Increment)โดยจะเพมคาครงละ 1 (-) เครองหมายแปลงคาใหกลายเปนคาตรงกนขามกบคาเดมทเรยกวายนารนกน

(Unary negation) เชน x = 20 % 3; ผลลพธคอ x จะมคาเปน 2 เชน ถา x = -100 ดงนน -x จะมคาเทากบ 100 เปนตน

2) ตวดาเนนการเชงเปรยบเทยบ (Comparison Operator) หมายถง เครองหมายในการเปรยบเทยบขอมล ผลลพธทไดจะมคาตรรกบลลนเปน จรง (True) และ เทจ(False) ไดแก ตารางท 8.5 ตวดาเนนการเชงเปรยบเทยบ

เครองหมาย คาอธบาย == เครองหมายเทากบ != เครองหมายไมเทากบ > เครองหมายมากกวา >= เครองหมายมากกวาหรอเทากบ < เครองหมายนอยกวา <= เครองหมายนอยกวาหรอเทากบ

3) ตวดาเนนการกาหนดคา (Assignment Operator) หมายถง เครองหมาย ในการกาหนดใหตวแปรทอยทางฝงซาย มคาเทากบคาเดมในตวแปรนน "กระทา" (บวก, ลบ, คณ, หาร) กบอกตวแปรหนงทอยทางฝงขวา ไดแก ตารางท 10.7 ตารางท 8.6 ตวดาเนนการกาหนดคา

เครองหมาย คาอธบาย x = y กาหนดคา y ใหกบตวแปร x x += y เพมคา y ใหกบตวแปร x (x = x + y) x -= y ลบคา y ออกจากตวแปร x (x = x - y) x *= y กาหนดคา x คณกบคาyใหกบตวแปรx (x = x *y) x /= y กาหนดคา xหารกบคาyใหกบตวแปรx (x = x / y) x %= y กาหนดเศษทไดจากการหารคา x ดวยคา y ใหกบตวแปร x (x = x % y) x <<= y เลอนบตในตวแปร x ไปทางซาย y บต (x = x << y) x >>= y เลอนบตในตวแปร x ไปทางขวา y บต (x = x >> y) x >>>= y เลอนบตแบบซโรฟลลในตวแปร x ไปทางขวา y บต (x = x >>> y)

4) ตวดาเนนการเชงตรรกะ (Logical Operator) เปนเครองหมายทใหคาจรง และ เทจในการเปรยบเทยบ ประกอบดวยเครองหมาย && หมายถง และ(AND) จะเปนจรงเมอคาทใชเปรยบเทยบทง 2 คาเปนจรงทงค || หมายถง หรอ(OR) จะเปนจรงเมอคาทใชเปรยบเทยบทง 2

319

เปนจรงทงคหรอจรงเพยงคาใด คาหนง! หมายถง ปฎเสธ (NOT) เปนการแปลงคาตรงกนขาม จากจรงจะเปนเทจ และ จากเทจจะเปนจรง ไดแก ตารางท 10.7 ตารางท 8.7 ตวดาเนนการกาหนดคาเชงตรรกะ

เครองหมาย คาอธบาย x &= y เกบคา x AND y ในตวแปร x (x = x & y) x ^= y เกบคา x XOR y ในตวแปร x (x = x ^ y) x |= y เกบคา x OR y ในตวแปร x (x = x | y)

5) ตวดาเนนการเชงขอความ (String Operator) เปนการเชอมประโยคขอความเขาดวยกน (Concatenation) โดยใชเครองหมายบวก ( + ) เปนตวกระทา เชน

6) ตวดาเนนการระดบบต (Bitwise Operator) เปนการดาเนนการเชงตรรกะในระดบบต โดยจะใชมมมองในแบบเลขฐาน 2 มาจดการกบขอมล นนคอ ขอมลตวเลขนนจะถกแปลงเปนเลขฐานสองในหนวยความจาในขณะทมการดาเนนการเชงตรรกะในระดบบต ซงโดยปกตแลวการกระทาในจาวาสครปต จะอยในระดบตวอกษร ทเรยกวา ระดบไบต (Byte) โดยตวดาเนนการระดบบตมรายละเอยดดงน ตารางท 10.7 ตารางท 8.8 ตวดาเนนการระดบบต

เครองหมาย คาอธบาย x & y ใหผลลพธการเทยบบตแบบ AND ระหวาง x กบ y x | y ใหผลลพธการเทยบบตแบบ OR ระหวาง x กบ y x ^ y ใหผลลพธการเทยบบตแบบ XOR ระหวาง x กบ y ~x เพมคาบตให 1 จากนนจะใหผลลพธของบตมคาตรงขาม

x << y เลอนบตในตวแปร x ไปทางซาย y บต x >> y หมายถง เลอนบตในตวแปร x ไปทางขวา y บต x >>> y เลอนบตแบบซโรฟลลในตวแปร x ไปทางขวา y บต

7) ลาดบความสาคญของตวดาเนนการ ตารางท 8.9 ลาดบความสาคญของตวดาเนนการ

ลาดบ เครองหมาย ลาดบท 1 ( ) ลาดบท 2 ++ -- ! ~ ลาดบท 3 * / % ลาดบท 4 + , -

ตวอยาง Name = "Bodin"; Say = "Hey "+Name; ผลลพธทได Say จะมขอความเปน Hey Bodin

320

ตารางท 8.9 ลาดบความสาคญของตวดาเนนการ (ตอ) ลาดบ เครองหมาย

ลาดบท 5 <<, >> , >>> ลาดบท 6 <, <= , > , >= ลาดบท 7 ==, != ==, != ลาดบท 8 & ลาดบท 9 ^ ลาดบท 10 | ลาดบท 11 && ลาดบท 12 || ลาดบท 13 = , +=, -= , *=, /= , %= ,<<=, >>=, >>>= , &=, ^= , !=

6.1.6 คาสงควบคมการทางานแบบมเงอนไข

ตารางท 8.10 คาสงควบคมการทางานแบบมเงอนไข คาสง เครองหมาย

if ใช if ตรวจสอบเงอนไข ถาหากวาเงอนไขเปนจรง กจะทาตามคาสงทกาหนด if else ใช if ตรวจสอบเงอนไข ถาหากวาเงอนไขเปนจรง กจะทาตามคาสงทกาหนด

ถาไมตรงตามเงอนไขจะไปทางานท else if else if ใช if ตรวจสอบเงอนไข ถาหากวาเงอนไขเปนจรง กจะทาตามคาสงทกาหนด

ถาไมตรงตามเงอนไขจะไปทางานท else nersted if เปนการใช คาสง if ซอน if ไปเรอย ๆ

switch case จะตรวจสอบคาของตวแปร ถาตรงตามเงอนไขใดกจะทาตามคาสงนน ๆ จนกวาจะเจอ คาสง break

expression ใชกาหนดคาสงแบบมเงอนไข for ใชเมอเงอนไขเปนจรง และจะจบการทางานเมอเงอนไขเปนเทจ โดยแตละรอบ

ของการวนลป จะมการเพมคาตามทกาหนด while ใชเมอเงอนไขเปนจรง และจะจบการทางานเมอเงอนไขเปนเทจ

do whle ใชเมอ ทางานกอน 1 ครง แลวหลงจากนนจะทางานกตอเมอเงอนไขยงเปนจรงอย และจะจบการทางานเมอเงอนไขเปนเทจ

for in ใชในการวนลปเพอแสดงคณสมบตของ object with เพอทจะระบ object เพยงครงเดยว แลวเรยกใช property หรอ method

ตางของ object นน ๆ ไดเลย break ใชหยดการทางานของการวนลป

321

6.1.7 ตวอยาง การสรางจากการเขยนดวยจาวาสครปต 1) ตวอยางการแสดง วน เดอนป ปจจบน

เมอแสดงผานโปรแกรมเวบเบราวเซอรดงภาพท 8.14

ภาพท 8.8 การแสดงผลวน เดอน ป ปจจบน

</html> <head> <script language = "javascript"> var day = new Array("อาทตย","จนทร","องคาร","พธ","พฤหสบด","ศกร","เสาร"); var month = new Array("มกราคม","กมภาพนธ","มนาคม","เมษายน","พฤษภาคม","มถนายน","กรกฎาคม","สงหาคม","กนยายน","ตลาคม","พฤศจกายน","ธนวาคม"); var time = new Date(); var sevenday = day[time.getDay()]; var twelvemonth = month[time.getMonth()]; var date = time.getDate(); var year = (543 + time.getYear()); document.write('<center><font face="Ms Sans Serif" color=red size="2">'); document.write('วน'+sevenday+'ท'+' '+date+' '+twelvemonth+' '+year); document.write('</font></center>'); document.write('<center><font face="Ms Sans Serif" color=red size="2">'); document.write('ขณะนเวลา '+' '+time.getHours()+':'+time.getMinutes()+':'+time.getSeconds()); document.write('<font></center>' </script> </head> <body> ...</body> </html>

322

2) ตวอยางการแสดงผล ใส Effect แถบส Fade ในตาราง

<html> </head> <script language = "javascript"> <!—Begin ie = (document.all); if (ie) { var chidc = new Array(); var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'); var chidn = new Array(100,70,40); var step = new Array(10,10,10); var chway = new Array(step[0],step[1],step[2]); var tone = new Array(1,1,1); function chcol() { for (i=0; i<3; i++) { chidn[i]+=chway[i]; if (chidn[i]>=255) { chidn[i] = 255; chway[i] = -step[i]; } else if (chidn[i]<=40) { chidn[i] = 40; chway[i] = step[i]; tone[i]>=3? tone[i] = 1:tone[i]++; } col1 = hexc[Math.floor(chidn[i]/16)]; col2 = hexc[chidn[i]%16]; tored = ''; toblue = ''; for (j=1; j<tone[i]; j++) tored+='00'; for (j=3; j>tone[i]; j--) toblue+='00'; chidc[i] = '#'+tored+col1+col2+toblue; toblue = ''; for (j=1; j<tone[i]; j++) tored+='00'; for (j=3; j>tone[i]; j--) toblue+='00'; chidc[i] = '#'+tored+col1+col2+toblue; td = eval('document.all.chcol'+i); td.style.backgroundColor = chidc[i]; }

323

เมอแสดงผานโปรแกมเวบเบราวเซอรดงภาพท 8.15 เมอแสดงผานโปรแกรมเวบเบราวเซอรดงภาพท 8.14

ภาพท 8.9 การแสดงผล ใส Effect แถบส Fade ในตาราง

จากภาพท 8.9 ตารางจะมการไลระดบส และสจะเปลยนแปลงตลอดเวลา

setTimeout('chcol()',100); } } toblue = ''; for (j=1; j<tone[i]; j++) tored+='00'; for (j=3; j>tone[i]; j--) toblue+='00'; chidc[i] = '#'+tored+col1+col2+toblue; td = eval('document.all.chcol'+i); td.style.backgroundColor = chidc[i]; } setTimeout('chcol()',100); } } // End --> </script></head> <body> <table cellspacing=4 cellpadding=1 bgcolor=#999999 width=600> <tr> <td width=-33% align=center id=chcol0 name=id=chcol0> <font color=white>สาขางานพฒนาเวบเพจ</td> <td width=33% align=center id=chcol1 name=id=chcol0> <font color=white>สาขาวชาคอมพวเตอรธรกจ</td> <td width=33% align=center id=chcol2 name=id=chcol0> <font color=white>แผนกวชาธรกจเกษตร</td> </tr> </table> </center> <div align="center"> <script language = "javascript">  </script> <body> </html>

324

6.2 สไตลซท

6.2.1 ประโยชนทไดจากการใชสไตลชทในการควบคมการแสดงผลในหนาเวบเพจ

1) กาหนดรปแบบไดในครงเดยว ประโยชนในขอนนบเปนจดเดนของการใชสไตลชท เพราะไมตองเสยเวลากาหนดรปแบบใด ๆ ทละจด

2) แกไขรปแบบทไดกาหนดไวในจดเดยว เปนผลพลอยไดจากขอแรกทกครงท อยากเปลยนรปแบบหนาเวบเพจ แกไขทสไตลชททเดยวพอ ทาใหการปรบปรงเวบเพจในสวนของการแสดงผลทาไดอยางรวดเรวขน 3) กาหนดรปแบบพเศษ รปแบบบางอยาง เชน ระยะหางระหวางบรรทด ไมสามารถกาหนดไดดวยคาสง แทกHTMLธรรมดา สามารถทาการกาหนดภาพพนหลง (Image Background) ใหไดตาแหนงและมรปแบบตามทตองการได 4) ประหยดเนอท เพราะไมตองไปกาหนดในทกตาแหนง ขนาดไฟลยอมเลกลง 5) ประหยดแบนดวธ เมอขนาดของหนาเวบเพจลดลง ปรมาณขอมลในการสงผานไปยงผชมกจะลดลงตามไปดวย ทาใหเวบเพจโหลดเรวขน 6.2.3 หลกการกาหนดสไตลชท

1) การกาหนดลกษณะเบองตน วธการกาหนดสไตลชทเบองตนมรปแบบดงน

(1) สไตลชทจะประกอบไปดวย ชอคลาส (Class) หรอชอไอด (ID) หรอชอคาสงแทกในเอกสารHTML ในสไตลชท จะเรยกวา Selector ทใชสาหรบการอางถง (2) ชอคณสมบต หรอ และตามดวยกาหนดคา เพอกาหนดคาใหแกคณสมบตนน (3) ระหวางชอคณสมบต กบกาหนดคาจะถกคนดวยเครองหมาย Colon ( : ) เชน color : blue (4) ตองเขยนคณสมบตไวภายในเครองหมายปกกา { ... } เทานน (5) คณสมบตภายใน 1 คลาส จะมไดมากกวา 1 ตามทกาหนด และคณสมบตในแตละคณสมบตจะถกคนดวยเครองหมาย Semi-colon ( ; )

ตวอยาง h1{color:red;background-color:blue}

รปแบบคาสง ชอคาสงแทก{ชอคณสมบต : คาทกาหนด} หรอ ชอคาสงแทก{ชอคณสมบตท1 : คาทกาหนด1 ; ชอคณสมบตท 2 : คาทกาหนด 2 }

325

เมอแสดงผานโปรแกรมเวบเบราวเซอรดงน

ภาพท 8.10 การกาหนดลกษณะเบองตน ของสไตลชท

จากภาพท 8.10 จะเหนวามการใชคาสง  <p style="font: normal small-caps bold 16px sans-serif, Arial;

color:#FF0033">เวลามคา คอนาทสดทายของชวต ไมมใครซาบซงถงความสาคญของเวลา</p> </body>

335

ตารางท 8.14 การกาหนดลกษณะขอความ (ตอ) คณสมบต เนอหา

letter-spacing กาหนดระยะหางระหวางตวอกษร ไคาทกาหนดไดแก normal, cm, px, pt ตวอยางเชน { letter-spacing: 10pt; }

line-height กาหนดระยะหางระหวางบรรทด คาทกาหนดไดแก normal, cm, px, pt ตวอยางเชน { line-height: 15px; }

text-align กาหนดตาแหนงของขอความ คาทกาหนดไดแก left, right, center, justify (เตมพนท)

ตวอยางเชน { text-align: left; } text-decoration ใชสาหรบตกแตงขอความ คาทกาหนดไดแก none, underline, overline,

line-througn, blink ตวอยางเชน { text-decoration: underline; }

text-indent กาหนดยอหนาใหกบขอความ คาทกาหนดไดแก cm, px, pt ตวอยางเชน { text-indent: 1cm; }

text-transform เปลยนแปลงรปแบบขอความใหเปน พมพเลก หรอ พมพใหญ คาทกาหนดไดแก none, capitalize, uppercase, lowercase

ตวอยางเชน { text-transform: capitalize; } white-space กาหนดวธการจดการชองวาง และการขนบรรทดใหมของขอความ คาท

กาหนดไดแก normal, pre, nowrap ตวอยางเชน { white-space: pre; }



<p style="color:green; text-indent:1cm; text-align:justify;"> <span style="text-decoration:underline">CSS</span> ยอมาจาก Cascading Style Sheet เปนภาษาทมรปแบบการเขยน Syntax ท

เฉพาะ และถกกาหนดมาตรฐานโดย W3C (World Wide Web Consortium) เชนเดยวกบ HTML และ XHTML ใชสาหรบตกแตงเอกสาร HTML/ XHTM ใหมหนาตา สสน ตวอกษร เสนขอบ พนหลง ระยะหาง ฯลฯ อยางทตองการ ดวยการกาหนดคณสมบตใหกบ Element ตางๆ ของ HTML


336

ภาพท 8.17 การกาหนดลกษณะขอความ กาหนดระยะหาง ระหวางแตละคา

3) การกาหนดลกษณะพนหลง (Background Property)

ตารางท 8.15 การกาหนดลกษณะพนหลง คณสมบต เนอหา

background-attachment

กาหนดวาใหรปภาพพนหลง อยกบท หรอ เลอนตาม เมอมการเลอนแถบเลอน fixed, scroll

ตวอยางเชน { background-attachment: fixed; } background-color กาหนดสใหกบพนหลง คาทกาหนดไดแก ชอส, transparent, #คาส

, rgb ( ตวเลข, ตวเลข, ตวเลข ) ตวอยางเชน { background-color: rgb( 255, 0, 125); }

background-image กาหนดพนหลงเปนรปภาพ คาทกาหนดไดแก none, url (ชอไฟล.นามสกล)

ตวอยางเชน { background-image: url( image/panda.png ); } background-position กาหนดตาแหนงของพนหลง เมอเทยบกบขอบดานบน คาทกาหนด

ไดแก top, center, bottom, คาเปอรเซนต, คา px ตวอยางเชน { background-positionY: 5px; }

background-repeat กาหนดใหแสดงรปภาพแบบวนซาหรอไม คาทกาหนดไดแก ตวอยางเชน { background-repeat: no-repeat; }

background กาหนดคาของ property background-color, background-image, background-repeat, background-attachment, background-position ไดพรอมกนตามลาดบ

ตวอยางเชน{ background: #ccff00 url(panda.gif) no-repeat fixed 5px 1%; }

337


ภาพท 8.18 การกาหนดพนหลง

4) การกาหนดตาแหนง (Position Property)

ตารางท 8.16 การกาหนดตาแหนง คณสมบต เนอหา position ใชกาหนดรปแบบวธการจดวางตาแหนงของรปแบบเอกสาร คาทกาหนด

ไดแก fixed เปนการวางตาแหนงอยางตายตว,

static เปนการวางตาแหนงตามลาดบกอน-หลง, absolute เปนการวางตาแหนงโดยดจากแกน x, y และเทยบจาก tag แม, relative เปนการวางตาแหนงโดยดจาก x, y และเทยบจาก tag มนเอง

ตวอยางเชน { position: absolute; } top กาหนดระยะหางระหวาง ขอบดานบน คาทกาหนดไดแก auto, cm, px, pt

ตวอยางเชน top: -30px; } bottom กาหนดระยะหางระหวาง ขอบดานลาง คาทกาหนดไดแก auto, cm, px, pt

ตวอยางเชน { bottom: -80px; }


<textarea style="color:Yellow; background-image:url(cmcat.jpg); background-attachment:fixed; width:300px" rows="5">สวสดคะ นเปน Background แบบ Fix รปจะไมเลอนไปตาม Scroll Bar คะ . . . . </textarea>

</body> </html>

เมอเลอนตาม Scroll Bar รปจะไมเลอนไปตาม Scroll Bar

338

ตารางท 8.16 การกาหนดตาแหนง (ตอ) คณสมบต เนอหา

left กาหนดระยะหางระหวาง ขอบดานซาย คาทกาหนดไดแก auto, cm, px, pt

ตวอยางเชน{ left: 20px; } right กาหนดระยะหางระหวาง ขอบดานขวา คาทกาหนดไดแก auto, cm, px,

pt ตวอยางเชน { right: 50px; }

clip กาหนดการตดสวนตางๆของวตถทไมตองการออกไปสวนใหญจะใชกบ กาหนดรปรางของรปภาพ หรอรปเรขาคณต คาทกาหนดไดแก auto, shape

ตวอยางเชน { chip: auto; } overflow กาหนดวธการจดการกบขอมลท overflow ทงแกน x และแกน y ( วาจะใหม

scroll barหรอไมอยางไร) คาทกาหนดไดแก auto, visible, hidden, scroll ตวอยางเชน{ overflow: hidden; }

overflow-x ใชกาหนดวธการจดการกบขอมลท overflow ในแกน x ( วาจะใหม scroll bar หรอไม อยางไร ) คาทกาหนดไดแก auto, visible, hidden, scroll

ตวอยางเชน { overflow-y: scroll; } overflow-y ใชกาหนดวธการจดการกบขอมลท overflow ในแกน y ( วาจะใหม scroll

bar หรอไม อยางไร ) คาทกาหนดไดแก auto, visible, hidden, scroll ตวอยางเชน { overflow-y: scroll; }

vertical-align ใชกาหนดการจดวางแนวตง baseline ใชกาหนดใหแสดงขอความชดขอบตามเสนฐาน sub ตวหอย super ตวยก top ใชกาหนดใหแสดงขอความชดขอบดานบนของเซลตาราง text-top ใชกาหนดใหแสดงขอความชดขอบดานบนของเซลตาราง middle ใชกาหนดใหแสดงขอความกงกลางระหวางขอบดานบนและ

ขอบดานลางของเซล bottom ใชกาหนดใหแสดงชอของตารางตาแหนงกงกลางของตาราง

และแสดงทสวนลางของตาราง text-bottom ใชกาหนดใหแสดงขอความชดขอบดานลางของเซลตาราง % ใชกาหนดใหแสดงขอความแนวตงเปน % z-index ใชกาหนดลาดบของวตถ Default z-index คอ 0

ถาตองการใหอยดานลางกวา กาหนดเปน -1 ถาตองการใหอยดานบนกวา กาหนดเปน 1

339


<html> <body>

cmcat.ac.th<img src="cmcat.jpg" /> วทยาลยเกษตรและเทคโนโลยเชยงใหม (Default = baseline)<br> cmcat.ac.th<img src="cmcat.jpg" style="vertical-align:baseline" >วทยาลยเกษตรและเทคโนโลยเชยงใหม (baseline)<br> cmcat.ac.th<img src="cmcat.jpg" style="vertical-align:text-top" >วทยาลยเกษตรและเทคโนโลยเชยงใหม(text-top)<br> cmcat.ac.th<img src="cmcat.jpg" style="vertical-align:text-bottom"> วทยาลยเกษตรและเทคโนโลยเชยงใหม(text-bottom)<br> cmcat.ac.th<img src="cmcat.jpg" style="vertical-align:top" > วทยาลยเกษตรและเทคโนโลยเชยงใหม(top)<br> cmcat.ac.th<img src="cmcat.jpg" style="vertical-align:middle">วทยาลยเกษตรและเทคโนโลยเชยงใหม(middle)<br> cmcat.ac.th<img src="cmcat.jpg" style="vertical-align:bottom">วทยาลยเกษตรและเทคโนโลยเชยงใหม (bottom)<br>

</body> </html>

340

ภาพท 8.19 การกาหนดตาแหนง

5) การกาหนดกลมเกยวกบกรอบตาราง (Table Property)

ตารางท 8.17 การกาหนดกลมเกยวกบกรอบตาราง คณสมบต เนอหา

table-layout กาหนดรปแบบความยดหยนของตาราง คาทกาหนด ไดแก Auto คอตารางจะเปลยนแปลงขนาดตามความเหมาะสม, fixed คอตารางจะมขนาดตายตว

ตวอยางเชน { table-layout: auto; } caption-side ใชกาหนดตาแหนงของ caption คาทกาหนดไดแก top, bottom, left,

right ตวอยางเชน { caption-side: right; } empty-cells กาหนดรปแบบการแสดงผลเมอเชลลวาง คาทกาหนดไดแก show,

hidden ตวอยางเชน { empty-cells: hidden; } border-collapse กาหนดเสนขอบระหวาง cell วาจะใชดวยกนหรอไม คาทกาหนดไดแก

collapse, separate ตวอยางเชน { border-collapse: collapse; }

341

ตารางท 8.17 การกาหนดกลมเกยวกบกรอบตาราง (ตอ) คณสมบต เนอหา

border-spacing กาหนดระยะหางระหวาง cell โดยจะมผลเมอ border-collapse เปนแบบ separate เทานน คาทกาหนดไดแก cm, px, pt

ตวอยางเชน { border-spacing: 2px; } border-width กาหนดขนาดของกรอบของวตถทง 4 ดาน ตวอยางเชน { border-width: 2px thin medium thick; } border-style การกาหนดลกษณะของกรอบของวตถทง 4 ดาน ถากาหนดเพยงคา

ขอมลเดยว จะหมายถงกาหนดใหทง 4 ดานเหมอนกน border-top-style, border-right-style, border-bottom-style, border-left-style ไดพรอมกนตามลาดบ

ตวอยางเชน { border-style: solid double ridge outset; } border-color การกาหนดสกรอบของวตถทง 4 ดาน ตองกาหนดสไตล กอน ตวอยางเชน { border-color: red green blue #c0c0c0; } border กาหนดคาของ property border-width, border-style, border-

color ไดพรอมกนตามลาดบ ตวอยางเชน { border: thin dotted #f0f0f0; } border-top-width กาหนดขนาดของเสนขอบ ดานบน คาทกาหนด ไดแก thin,

medium, thick, cm, px, pt ตวอยางเชน { border-top-width: 2px; } border-top-style ใชกาหนดลกษณะของเสนขอบ ดานบน คาทกาหนด ไดแก none,

hidden, dotted, dashed, solid, groove, ridge, inset, outset, double

ตวอยางเชน { border-top-style: solid; } border-top-color กาหนดสใหเสนขอบ ดานบน คาทกาหนด ไดแก ชอส, #คาส,

rgb( ตวเลข, ตวเลข, ตวเลข ) ตวอยางเชน { border-top-color: red; } border-top กาหนดคาของคณสมบต border-top-width, border-top-style,

border-top-color, ไดพรอมกนตามลาดบ ตวอยางเชน { border-top: 2px solid red; } border-bottom-width กาหนดคณสมบตใหกบกรอบดานลาง คาทกาหนด ไดแก thin,

medium, thick, cm, px, pt ตวอยางเชน { border-bottom-width: medium; } border-bottom-color กาหนดสใหเสนขอบ ดานลางคาทกาหนด ไดแก ชอส, #คาส, rgb(

ตวเลข, ตวเลข, ตวเลข ) ตวอยางเชน { border-bottom-color: blue; }

342

ตารางท 8.17 การกาหนดกลมเกยวกบกรอบตาราง (ตอ) คณสมบต เนอหา

border-bottom-style ใชกาหนดลกษณะของเสนขอบ ดานลาง คาทกาหนด ไดแก none, hidden, dotted, dashed, solid, groove, ridge, inset, outset, double

ตวอยางเชน { border-bottom-style: ridge; } border-bottom ใชกาหนดคาของ property border-bottom-width, border-

bottom-style, border-bottom-color, ไดพรอมกนตามลาดบ ตวอยางเชน { border-bottom: medium ridge blue; } border-left-width กาหนดคณสมบตใหกบกรอบดานซาย คาทกาหนด ไดแก thin,

medium, thick, cm, px, pt ตวอยางเชน { border-left-width: thick; } border-left-style กาหนดลกษณะของเสนขอบ ดานซาย คาทกาหนด ไดแก none,


ตวอยางเชน { border-left-style: outset; } border-left-color คาทกาหนด ไดแก ชอส, #คาส, rgb( ตวเลข, ตวเลข, ตวเลข ) ตวอยางเชน { border-left-color: #c0c0c0; } border-left ใชกาหนดคาของคณสมบตของ border-left-width, border-left-

style, border-left-color,ไดพรอมกนตามลาดบ ตวอยางเชน { border-left: thick outset #c0c0c0; } border-right-width กาหนดคณสมบตใหกบกรอบดานขวา คาทกาหนด ไดแก thin,

medium, thick, cm, px, pt ตวอยางเชน { border-right-width: thin; } bordr-right-style ใชกาหนดลกษณะของเสนขอบ ดานขวา คาทกาหนด ไดแก none,


ตวอยางเชน { border-right-style: dotted; } border-right-color ใชกาหนดสใหเสนขอบ ดานขวา คาทกาหนด คาทกาหนดไดแก ชอ

ส, #คาส, rgb( ตวเลข, ตวเลข, ตวเลข ) ตวอยางเชน { border-right-color: green; } border-right ใชกาหนดคาของ property border-right-width, border-right-

style, border-right-color, ไดพรอมกนตามลาดบ ตวอยางเชน { border-right: thin double green; }

ทมา : http://www.function.in.th/CSS _Positioning, 2553

343

เชน ตวอยางการเขยนโคด กาหนดขนาด border


ภาพท 8.20 การกาหนดขนาดใหเสนกรอบทง 4 ดาน

และตวอยางการกาหนดการกาหนดลกษณะของกรอบของวตถ


ภาพท 8.21 การกาหนดกรอบ

<html> <body> <p style="border-style:dotted;color:blue"> A dotted border</p> <p style="border-style:dashed;color:red"> A dashed border</p> <p style="border-style:solid;color:blue"> A silid border</p> <p style="border-style:double;color:red"> A double border</p> <p style="border-style:groove;color:blue"> A groove border</p> <p style="border-style:ridge;color:red"> A ridge border</p> <p style="border-style:inset;color:blue"> A insert border</p> <p style="border-style:outset;color:red"> A outset border</p> <p style="border-style:solid dotted;color:blue"> A solid dotted border</p> </body> </html>

<div style="border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px;"> <br /> <br /> <br /> </div>

344

6) การกาหนดกลมเกยวกบรปภาพ โดยการใชคาสงแทก filter ใหภาพดโปรงใส (Transparent) สาหรบ เวบเบราวเซอร จะใชคณสมบต filter:alpha(opacity= 0-100) สวนไฟรฟอก จะใช คณสมบต opacity:0.0-1.0 ตวเลขยงนอยยงดโปรงใส


ภาพท 8.22 การกาหนดเกยวกบรปภาพ

7) การกาหนดรปแบบหนาเวบเพจ (Layout Property)

ตารางท 8.18 การกาหนดรปแบบหนาเวบเพจ ชอคณสมบต รายละเอยดเนอหา

margin-top กาหนดระยะหางระหวางขอบของวตถดานบน กบวตถอนๆ คาทกาหนด ไดแก auto, cm, px, pt

ตวอยางเชน { margin-top: 20px; } margin-bottom กาหนดระยะหางระหวางขอบของวตถดานลาง กบวตถอนๆ คาทกาหนด

ไดแก auto, cm, px, pt ตวอยางเชน { margin-bottom: 10px; } margin-left กาหนดระยะหางระหวางขอบของวตถดานซาย กบวตถอนๆ คาทกาหนด

ไดแก auto, cm, px, pt ตวอยางเชน { margin-left: 15px; }

<html> <body>

ภาพปกต<br /> <img src="cmcat.jpg"> <br /> ภาพโปรงใส 50%<br> <img src="cmcat.jpg" style="filter:alpha(opacity=50); opacity:50">

</html>

345

ตารางท 8.18 การกาหนดรปแบบหนาเวบเพจ (ตอ) ชอคณสมบต รายละเอยดเนอหา

margin-right กาหนดระยะหางระหวางขอบของวตถดานขวา กบวตถอน ๆ คาทกาหนด ไดแก auto, cm, px, pt

ตวอยางเชน { margin-right: auto; } margin ใชกาหนดคาของ property margin-top, margin-right, margin-bottom,

margin-left ไดพรอมกนตามลาดบ ตวอยางเชน { margin: 20px auto 10px 15px; } padding-top กาหนดระยะหางระหวางขอบของวตถดานในเสนบน กบ ขอความทอย

ในกรอบ คาทกาหนด ไดแก auto, cm, px, pt ตวอยางเชน { padding-top: 15px; } padding-bottom กาหนดระยะหางระหวางขอบของวตถดานในเสนลาง กบ ขอความทอย

ในกรอบ คาทกาหนด ไดแก auto, cm, px, pt ตวอยางเชน { padding-bottom: auto; } padding-left กาหนดระยะหางระหวางขอบของวตถดานในเสนซาย กบ ขอความทอยใน

กรอบ คาทกาหนด ไดแก auto, cm, px, pt ตวอยางเชน { padding-left: 20px; } padding-right กาหนดระยะหางระหวางขอบของวตถดานในเสนขวา กบ ขอความทอยใน

กรอบ คาทกาหนด ไดแก auto, cm, px, pt ตวอยางเชน { padding-right: 10px; } Padding กาหนดระยะหางระหวางขอบของวตถดานใน กบ ขอความทอยในกรอบ (ไม

เกยวของกบวตถดานนอก) คาทกาหนด ไดแก auto, cm, px, pt ตวอยางเชน { padding: 15px 10px auto 20px; } width กาหนดคาความกวางใกกบขอความทอยในกรอบ คาทกาหนด ไดแก auto,

cm, px, pt ตวอยางเชน { width: 300px; } min-width กาหนดคาความกวางตาสด ( อยางนอย )ใหกบ ขอความทอยในกรอบ คาท

กาหนด ไดแก auto, cm, px, pt ตวอยางเชน { min-width: 260px; } max-width กาหนดคาความกวางสงสด ( อยางมาก ) ใหกบ ขอความทอยในกรอบ คาท

กาหนด ไดแก auto, cm, px, pt ตวอยางเชน { max-width: 340px; } height กาหนดคาความสงใหกบ ขอความทอยในกรอบ คาทกาหนด ไดแก auto,

cm, px, pt ตวอยางเชน { height: auto; }

346

ตารางท 8.18 การกาหนดรปแบบหนาเวบเพจ (ตอ) ชอคณสมบต รายละเอยดเนอหา min-height กาหนดคาความสงตาสด ( อยางนอย ) กบ ขอความทอยในกรอบ คาทกาหนด

ไดแก auto, cm, px, pt ตวอยางเชน { min-height: 150px; }

max-height กาหนดคาความสงสงสด ( อยางมาก ) กบ ขอความทอยในกรอบ คาทกาหนด ไดแก auto, cm, px, pt

ตวอยางเชน { max-height: 100px; }

ทมา : http://www.enjoyday.net/CSS Margin, Padding, 2553


ภาพท 8.23 การกาหนดรปแบบหนาเวบเพจ

จากภาพท 8.23 การกาหนดรปแบบหนาเวบเพจ style="margin:20px; padding:20px; border:20px ระยะหางระหวางกรอบนอกและกรอบในจะมคาเทากบ 20 พกเซล

8) การกาหนดการแสดงผลรปแบบตาง ๆ

<html> <body> ขอความขางนอกตรงนหางจากขอบดานนอกของ block 20x นคอ margin ดานบน <div style="margin:20px; padding:20px; border:20px solid #3399CC"> block นม Border สนาเงน ขนาด 20px <br> ม Padding ระยะหางระหวางขอบดานใน กบ ขอความใน block 20px<br>

และม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอก block 20px ทนคงเขาใจแลววา margin และpadding คอสวนไหนกนแลว

</div> ขอความขางนอกตรงนหางจากขอบดานนอกของ block 20x นคอ margin ดานลาง > <body> </html>

border 20 พกเซล margin 20 พกเซล

padding 20 พกเซล

margin 20 พกเซล


border 20 พกเซล margin 20 พกเซล


margin 20 พกเซล


347

(1) การกาหนดรปแบบสไตล ใหกบสญลกษณตวชเมาส ( Mouse cursor ) ตารางท 8.19 ตารางท 8.19 การกาหนดการแสดงผลสญลกษณตวชเมาส

ชอคณสมบต คาทกาหนด สญลกษณเมาส cursor default crosshair hand pointer move text wait help n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize progress not-allowed no-drop

vertical-text all-scroll col-resize row-resize url(yourcursor.cur)

ทมา : http://www.enjoyday.net/CSS Mouse cursor, 2553

348


ภาพท 8.24 อธบายการกาหนดเกยวกบสญลกษณตวชเมาส

จาพภาพท 8.24 ปกตสญลกษณของการเชอมโยงจะเปนสญลกษณรปมอ แต

สไตลชทามารถกาหนดใหเปลยนสญลกษณ เปน รปลกศร หรอรป หรอสญลกษณเมาสตางตามคณลกษณะทกาหนด (2) การเพมลกเลนพเศษ การแสดงผลวตถวาจะแสดงอยางไร Classification) ตารางท 8.20 การแสดงผลวตถวาจะแสดงอยางไร

คณสมบต เนอหา Float ใชกาหนดการจดวางรปภาพ หรอวตถทตองการ วาจะใหอยทางดานใดของ

ขอความทมอย คากาหนด ไดแก left, right, none ตวอยางเชน {float:right} clear ใชยกเลกการจดวางวตถกบขอความ คากาหนด ไดแก left, right, both, none ตวอยางเชน {clear : right} visibility กาหนดใหมการแสดง หรอซอน วตถและขอความทตองการ คากาหนด ไดแก

visible, hidden, collapse ตวอยางเชน {visibility : collapse} display ใชกาหนดรปแบบการแสดงของวตถ คาทกาหนด คาอธบาย none ไมแสดงวตถนน block แสดงเปนบลอกโดยขนบรรทดใหมกอน inline เปนคาปกตโดยองคประกอบจะแสดงแบบอนไลนไมมการขน

บรรทดใหม

<html> <body>

<a href =" style="cursor:help">Help</a><br /> <a href =" style="cursor:url(images/cur002.cur)">My kitty cursor (สาหรบ IE) </a><br />

<a href="style="cursor:url(images/cur002.cur'),auto">My kitty cursor (สาหรบ Firefox, IE กยงใชได)</a><body>

</html>

349

ตารางท 8.20 การแสดงผลวตถวาจะแสดงอยางไร (ตอ) display ใชกาหนดรปแบบการแสดงของวตถ

คาทกาหนด คาอธบาย none ไมแสดงวตถนน list-item แสดงเปนลสตรายการ run-in จะแสดงคาสงแทกแบบบลอก หรออนไลน ขนกบ

สภาพแวดลอม compact จะแสดงคาสงแทกแบบบลอก หรออนไลน ขนกบ

สภาพแวดลอม table จะแสดงคาสงแทกนนแบบตารางเหมอนคาสงแทก<table> inline-table จะแสดงคาสงแทกนนแบบตาราง (เปลยนคาสงแทกนนให

แสดงผลเหมอนคาสงแทก<table> แตเปนแบบInline คอจะไมมการขนบรรทดใหมทงกอนเรมคาสงแทกและหลงจบแทก

table-row-group เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<tbody> table-header-

group เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<thead>

table-footer-group

เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<tfoot>

table-row เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<tr> table-column-

group เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<colgroup>

table-column เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<col> table-cell เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<td>, <th> table-row-group เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<tbody> table-header-

group เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<thead>

table-caption เปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<caption> ตวอยางเชน <p style="display:inline">

ทมา: http://www.enjoyday.net/CSS_Classification, 2553

ตวอยางการกาหนดการจดวางรปภาพ หรอวตถทตองการดวย float

350


ภาพท 8.25 การแสดงผลวตถแสดง แอททรบวต float

ตวอยางการเปลยนคาสงแทกนนใหแสดงผลเหมอนคาสงแทก<td>, <th>

<html> <head>

<style type="text/css"> .img1 {float:right;width:150px;margin:0 0 15px 20px;

padding:15px;border:1px solid black;text-align:center;} </style>

</head> <body>

<div class="img1"> <img align="center" src="cmcat.jpg"> <br> รป วษท.เชยงใหม <br> </div>

<p> วทยาลยเกษตรและเทคโนโลยเชยงใหม เดมจดตงขนเปนวทยาลยเกษตรกรรมเชยงใหม ตามประกาศของกระทรวงศกษาธการ ลงวนท 22 มกราคม 2522 ตงแตวนท 1 มกราคม 2522 เพอสนองนโยบายของรฐบาลทกาหนดใหป 2522 เปนปเกษตรกร และเพอเปนการขยายการศกษาดานอาชวศกษาเกษตรใหกวางขวางยงขนตามความในขอ 23 แหงประกาศคณะปฏวต ฉบบท 216 ลงวนท 29 กนยายน 2515 ใหจดตงวทยาลยเกษตรกรรมเชยงใหม สงกดกองวทยาลยเกษตรกรรม กรมอาชวศกษา กระทรวงศกษาธการ </p> <p>กองวทยาลยเกษตรกรรม กรมอาชวศกษา ไดดาเนนการเรมตนเรองทดนจดตง วทยาลยเกษตรกรรมเชยงใหม โดยขอใชทดนของกรมทดนกรมปศสตว และกรมสามญศกษา ซงตงอยหมท 2 ตาบลบานกลาง อาเภอสนปาตอง จงหวดเชยงใหม ในการจดตงนน วทยาลยเกษตรกรรมชยงใหม ไดประสานงานกบกรมทดน กรมปศสตวและกรมสามญศกษา โดยกรมสามญศกษาไดมอบทดนของโรงเรยนสนปาตองวทยาคม จานวน 200 ไร ซงอยฝงขวาของถนนหรอตรงกนขามกบทดนของกรมทดนจานวน 118 ไร ใหกรมอาชวศกษา และไดนาทดน 200 ไรนแลกกบทดนของกรมปศสตว เพอใหทดนทจะจดตงวทยาลยเกษตรกรรมเชยงใหม เปนพนทผนเดยวกน </p> </body> <html>

351

<html> <head>

<style type="text/css"> table.four{width:80%; border:0; } table.four th {font-weight:bold; border-bottom:1px solid #cccccc; border-top:1px solid #CCC; background-color:#F2F9FF ; color:#0000CC;} table.four td {padding:5px; border-bottom:2px dotted #CCC; } </style>

</head> <body>

<table class="four" cellspacing="0"> <tr><th>รหสนกศกษา</th><th>ชอ</td> <th>วชาทลงทะเบยน</th><th>จานวนหนวยกต</th> </tr> <tr>

<td>5032040001</td><td>นางสาวอภวนท จกรคา จกรคา จกรคา</td>

<td>การเขยนเวบเพจดวยภาษาHTML</td> <td align="center">3.00</td>

</tr> <tr>

<td>5032040002</td><td>นางสาวอรพน จอมแปง</td> <td>หลกการออกแบบและพฒนาโปรแกรมL</td> <td align="center">3.00</td>

</tr> <tr>

<td>5032040003</td><td>นายวฒนนท แสงอาย</td> <td>การสอสารขอมลและเครอขาย</td> <td align="center">3.00</td>

</tr><tr> <td>5032040004</td><td>นางสาวอรพรรณ กลนฟง</td> <td>หลกการออกแบบเวบเพจ</td> <td align="center">3.00</td>

</tr> </tr> </table>

</body>

352


ภาพท 8.26 การกาหนดขอมลทเปนตาราง (3) การกาหนดการเชอมโยง (Link proprety)

ตารางท 8.21 การกาหนดการเชอมโยง แอททรบวต คาอธบาย

a:link กาหนด style ใหกบ link ปกตทยงไมเคยถก click a:visited กาหนด style ใหกบ link ทเคยถกคลกแลว a:hover กาหนด style ใหกบ link เมอเลอนเมาสไปอยเหนอ link a:active กาหนด style ให

ทมา : http://www.enjoyday.net/ css_link, 2553


<html> <head> <style type="text/css">

.linkbox a:link {color: #0000FF} /* unvisited link สนาเงน*/

.linkbox a:visited {color: #00FF00} /* visited link สเขยว*/

.linkbox a:hover {color: #FF00FF} /* mouse over link สชมพ */

.linkbox a:active {color: #FF0000} /* selected link สนาแดง*/ </style></head> <body>

<div class="linkbox"> <a href="css_font.html">ตวอยางท 1</a> <a href="css_class.html">ตวอยางท 2</a> <a href="css_basic.html">ตวอยางท 3</a> <a href="css_margin.html">ตวอยางท 4</a> <a href="css_position.html">ตวอยางท 5</a></div>

</body> </html>

353

ภาพท 8.27 อธบายการกาหนดเกยวกบ link

สรปทายหนวยท 8

DHTML คอ การทาHTMLใหแสดงแบบ DHTML ดวยการใชภาษาททางานฝงไคลเอน ซงเปนเทคโนโลยททาใหเกด DHTML ดานการแสดงผล มประเภทของโปรแกรมสาหรบการพฒนาเวบเพจ องคประกอบของ DHTML คอ วตถทตองการสรางการโตตอบใหกบผเปดไฟลเวบเพจ เชนรปภาพ ขอความ เอกสารไฟลเวบเพจ เปนตน โดยวตถจะมองคประกอบ 2 สวน 1) คณสมบต 2) ฟงกชน 3) เหตการณ คอ เหตการณทเกดขนกบวตถนน ทแสดงอยหนาเวบเพจ เชนกรณทเลอนเมาสชทรปภาพ หมายความวาวตถทเปนรปภาพทแสดงอยหนาเวบเพจเกดเหตการณคอถกเมาสช หรอ กรณคลกเมาสทขอความ หมายความวา วตถทเปนขอความทแสดงอยหนาเวบเพจเกดเหตการณคอ ถกคลกดวยเมาส เปนตนและ สงทตองดาเนนการ คอ สงทจะตองดาเนนการเมอเหตการณเกดขนกบวตถนน ๆ ซงสงทตองดาเนนการคอคาสงตางๆ ของภาษาจาวาสครปตทถกสรางขนตามทกาหนด

354

แบบทดสอบหลงเรยน หนวยท 8 การใสเทคนคพเศษดวยDHTML

คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. การเขยนโปรแกรมแบบ Dynamic คอขอใด ก. เครองลกขายทขอใชบรการ ข. สรางเวบเพจไดโดยใชโปรแกรมสาเรจรปตางๆ ค. การตดตอสอสารบนเครอขายอนเทอรเนตทคอมพวเตอร ง. การเขยนเวบเพจทมการจดเกบขอมลจานวนมากไวภายในฐานขอมล 2. ขอดทสามารถเปดเผยโคดคาสงและรบขอมลได ตรงกบขอใด ก. การเขยนโปรแกรมแบบ Static ข. ภาษาสครปตทประมวลผลทางานดานเครองลกขาย ค. ภาษาสครปตทประมวลผลทางานดานเครองบรการเวบ ง. การเขยนโปรแกรมแบบ java Script 3. ดาเนนการเมอเหตการณเกดขนกบวตถ ตรงกบขอใด ก. วตถ ข. ฟงกชน ค. สงทตองดาเนนการ ง. เหตการณ 4. การอางองควตถของเอกสารเวบเพจ คอขอใด ก. วตถทอยลาดบบนสดของวตถทงหมด

ข. ไฟลเวบเพจปจจบนทกาลงแสดงผลอยในหนาตางโปรแกรมเวบเบราวเซอร

ค. วตถทเกดจากการแบงสวนของหนาตางโปรแกรมเวบเบราวเซอร ง. วตถทถกกาหนดขนเมอเปดโปรแกรมเวบเบราวเซอร 5. ขอใดคอ เหตการณ onMouseOver ก. เหตการณ ทปมซายบนเมาสถกกดลง

ข. เหตการณทเกดจาการเคลอนทของเมาส ค. เหตการณทปมซายบนเมาสถกปลอยจากการกด

ง. เหตการณทวตถใด ๆ ในเอกสารเวบเพจกาลงถกชดวยเมาส 6. การสราง DHTML ตรงกบขอใด ก. การนาภาษาสครปตทใชในการสรางเวบไซต ข. เปนเหตการณทวตถใด ๆ ในเอกสารเวบเพจกาลงถกชดวยเมาส ค. การกาหนดวา หากมเหตการณ ใด ๆ เกดขนกบวตถทตองการ ง. ภาษาสครปตท สามารถทางานรวมกบการแสดงผลบนโปรแกรมเวบเบราวเซอร

355

7. ขอใด <script language="JavaScript"> ก. เขยนคาสงแทกดวยภาษาHTML ข. เขยนคาสงแทกดวยภาษาจาวาสครปต ค. เขยนคาสงแทกดวยภาษาดบเบลยเอมแอลสครปต ง. เขยนคาสงแทกดวยสไตลชท 8. ตวดาเนนการ มความหมายตรงกบขอใด ก. ตวแปร ข. พชคณต ค. เครองหมายกาหนดกรรมวธทางคณตศาสตร ง. การเปรยบเทยบ 9. การเขยนรปแบบ embedded Style Sheets กาหนดตวอกษร สนาเงน ตรงกบขอใด ก. p{font-size:16}

ข. .a1 { color:blue;font-famiry:fantasy;font-size:16} ค. <h1 style ="color:blue;font-style:i0alic"> ง. link rel ="stylesheet" type="text/css" href="css_link.css" " color:blue" .

10. การเขยนรปแบบ Inline Sytle Sheet กาหนดตวอกษรเทากบ 16 pt ตรงกบขอใด ก. p{font-size:16}

ข. .a1 {font-famiry:fantasy;font-size:16} ค. <h1 style ="color:blue;font-style:italic;font-size:16"> ง. link rel =stylesheet" type="text/css" "font-size:

356

เฉลยแบบทดสอบกอนเรยน หนวยท 8 การใสเทคนคพเศษดวยDHTML

ขอท 1 ก ขอท 6 ง ขอท 2 ค ขอท 7 ง ขอท 3 ง ขอท 8 ค ขอท 4 ง ขอท 9 ข ขอท 5 ง ขอท 10 ค

เฉลยแบบทดสอบหลงเรยน

ขอท 1 ง ขอท 6 ง ขอท 2 ข ขอท 7 ข ขอท 3 ง ขอท 8 ค ขอท 4 ข ขอท 9 ข ขอท 5 ง ขอท 10 ค

หมายเหต นกศกษาตองไดคะแนนไมนอยกวา 6 คะแนน (รอยละ 60) ถอวาผานเกณฑ

357

แบบฝกหด หนวยท 8 การใสเทคนคพเศษดวยDHTML

จงอธบายความหมายของขอความตอไปน 1. อธบายกระบวนการทางานของการตดตอสอสารขอมลบนเครอขายอนเทอรเนตพอสงเขป 2. เอกสารวบเพจทกประเภทอะไรบาง 3. ภาษาสครปตทใชพฒนาเวบไซต มกประเภท แตละประเภทมภาษาอะไรบาง 4. เปรยบเทยบขอดขอเสยของเทคโนโลยภาษาสครปตทภาษาสครปตประมวลผลทเครองบรการ และภาษาสครปตประมวลผลทเครองลกขาย 5. DHTML มความหมายวาอยางไร 6. องคประกอบของ DHTML มอะไรบาง 7. จงอธบายหลกการสราง DHTML

358

8. การใสเทคนคพเศษดวย DHTML ทนยมใชคอ 9. ใหศกษาจาวาของการใชสไตลชท จาก Website ตางๆ เพมเตมและบนทกวาไดรบความรอะไรเพมเตมบาง จาก Website อะไร 10. จงเขยนในรปแบบสไตลชทจากการแสดงผลบนโปรแกรมเวบเบราวเซอรตอไปน

359

เฉลยแบบฝกหด หนวยท 8 การใสเทคนคพเศษดวยDHTML

ขอท 1 ตอบ การตดตอสอสารขอท. มลบนเครอขายอนเทอรเนตทคอมพวเตอรททวโลกสามารถ เชอมถงกนได มการตดตอสอสารอย 2 แบบคอแบบสงขอมลและรบขอมลโดย เครองคอมพวเตอรททาหนาทสงขอท. มลจะเรยกวาเครองแมขาย และเครอง คอมพวเตอรทรบขอท. มลนน จะเรยกวา เครองลกขาย ขอท 2 ตอบ เอกสารเวบเพจม 2 ประเภท คอ 2.1 เอกสารเวบเพจคงท (Static Web Document) 2.2 การเขยนโปรแกรมแบบ (Dynamic Web Document) ขอท 3 ตอบ ภาษาสครปตแบงออกเปน 2 ประเภท คอ 3.1 ภาษาสครปตประมวลผลทเครองลกขาย 3.2 ภาษาสครปตประมวลผลทเครองบรการ ขอท 4 ตอบ

ภาษาสครปตทประมวลผลทเครองลกขาย ภาษาสครปตทประมวลผลทเครองบรการ

1. เซอรฟเวอรรบภาระการประมวลผล 1. ไคลเอนรบภาระการประมวลผล

2. ซอนโคดคาสงและรบขอท. มลได 2. เปดเผยโคดคาสงและรบขอท. มลได

3. เหมาะกบขอท. มลสาคญ 3. เหมาะกบขอท. มลไมสาคญ

4. นยมใชในการทา แบบไดนามกดานขอท. มล 4. นยมใชในการทาแบบไดนามกดานแสดงผล

ขอท 5 ตอบ DHTML อานวา ดอชทเอมแอล (Dynamic Hyper Text Markup Language) คอ ภาษาททาใหเกดการสรางเวบเพจทไมหยดนง ตอบโตกบผใช มลกเลน ทชวยทาให การแสดงเวบเพจนาสนใจมากขน สามารถโตตอบกบผใชงานไดอยางทนทวงท ทางาน ไดดกวากาหนดรปแบบเอกสารHTMLปกต โดยไมตองตดตอกบเครองบรการเวบ ตลอดเวลา ขอท 6 ตอบ วตถ เหตการณ สงทตองดาเนนการ ขอท 7 ตอบ การสรางDHTML คอ การสรางความสมพนธระหวาง วตถทตองการ, เหตการณและ

สงทตองการดาเนนการ ดวยการกาหนดวา หากมเหตการณใด ๆ เกดขนกบวตถ ท ตองการแลวใหดาเนนการอะไรบาง ขอท 8 ตอบ 8.1 ภาษาจาวาสครปต 8.2 สไตลชท 8.3 ภาษาพเอชพ

360

9. จงเขยนรปแบบการใสเทคนค DHTML ดวยจาวาสครปต ขอท 9 ตอบ รปแบบคาสง <script language="javascript"> คาสงตางๆ; </script> ขอท 10 ตอบ <html> <head></head> <body> <p style="font-weight:bold">ความกตญญคออะไร</p>

<p style="font-family: sans-serif, Arial; font-size:16px; font-style:normal; font-variant:small-caps; font-weight:bold; color:#FF2233">

ความกตญญไมใชสวนเตมเตม<br> ใหเปนคนดโดยสมบรณ<br>

แตมนเปนพนฐานของคนด<br> ถาหากไมมสงนตงแตตน<br> คณกไมมทางเปนคนดทสมบรณได</p> </body> <html>

361

ใบงานท 12 วชาการเขยนเวบเพจดวยภาษา HTML (3204-2201) หนวยท 8 ชอหนวย การใสเทคนคดวยDHTML สอนครงท 13 ชองานเรอง การสรางเวบเพจดวยเทคนคพเศษDHTML ชวโมงรวม 8 ชวโมง จดประสงคการเรยนร 1. เพอใหนกศกษามความรความเขาใจเกยวกบเทคนคพเศษDHTML 2. เพอการสรางเวบเพจดวยเทคนคพเศษDHTML 3. เพอใหนกศกษาเกดความคดรเรมสรางสรรคดวยสไลทชท จดประสงคเชงพฤตกรรม 1. ใชคาสงเทคนคพเศษ DHTMLไดตามหลกกการ 2. ปฏบตการสรางเวบเพจดวยเทคนคพเศษDHTML 3. จดสรรเวลาในการปฏบตใบงานไดอยางรอบคอบและมความคดสรางสรรคผลงาน สอการเรยนการสอน 1. เครองคอมพวเตอร, โนตบค, พอกเกตพซ, แทบเลตพซ วสดอปกรณ 1. ใบงานท 12 3. แบบฟอรมกจกรรมทกษะท 12 4. แบบประเมนผลกจกรรมทกษะ ภาคผนวก ก 5. แบบประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D ลาดบขนตอนการปฏบต 1. นกศกษาปฏบตเปนรายบคคล เพอทางานปฏบตกจกรรมทกษะท 12 2. จงพฒนาเอกสารเวบเพจดวยภาษาHTMLโดยใชเทคนค DHTMLดวย สไตลชท เพอใหแสดงผลดงน

362

2.1 สวนท 1 คอ เมนหนาเวบเพจ ใหทาการสรางเมนสาหรบการเชอมโยงตามรายการทกาหนด โดยมกกาหนดจดเชอมโยงดงน

2.1.1 หนาแรก ใหเชอมโยงไฟลเอกสารชอ sample.html 2.1.2 ยอนกลบ ใหเชอมโยงไฟลเอกสารชอ bgcolor.html 2.1.3 Java Script ใหเชอมโยงไฟลเอกสารชอ script_zoom.html 2.1.4 Cascading Style Sheet ใหเชอมโยงไฟลเอกสารชอ css_link.html 2.1.5 ตอไป ใหเชอมโยงไฟลเอกสารชอ link_color.html 2.1.6 หนาสดทาย ใหเชอมโยงไฟลเอกสารชอ css_table.html

ซงไฟลเอกสารตาง ๆสามารถดาวนโหลดจากเวบไซต http://apiwan.mcat.ac.th/dataapiwan/unit8/download/ 2.2 จากเมอนาเมาสไปวางไวทรายการแถบเมนใด สพนหลงจะเปลยนเปนสฟา นกศกษาสามารถเปลยนสพนหลงตามใจชอบได

2.3 เสนขอบของแถบเมน นกศกษาสามารถเปลยนสพนหลงตามใจชอบได 2.4 สวนท 2 คอ เนอหาประวต อกท.

2.4.1 กาหนดระยะหางระหวางขอบของวตถ ดานละ 20 พกเซล 2.4.2 ม Padding ระยะหางระหวางขอบดานใน กบ ขอความในบลอก 20 พกเซล 2.4.3 ม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอกบลอก

20 พกเซล

363

2.4.4 สาหรบรปภาพใหดาวนโหลดจากเวบไซต http://apiwan.mcat.ac.th/ dataapiwan/lesson8/download/fft.jpg

2.4.5 สาหรบขอความ ถานกศกษาไมพมพ สามารถดาวนโหลดจากเวบไซต http://apiwan.mcat.ac.th/dataapiwan/lesson8/download/fft.txt

2.4.6 ปกตท Status bar ใหแสดงผลขอความวา “องคการเกษตรกรในอนาคตแหงประเทศไทย” แตเมอนาเมาสไปวางไวเหนอรปภาพใหเปลยนขอความท Status bar แสดงผลขอความวา “ Future Farmer of Thailand”

3. ใหทาการบนทกไฟลขอมล คอ ชอนกศกษาตามดวย work8 เชน apiwan_work12.html กรณทนกศกษาสรางไฟลชนดสไตลชทเองใหบนทกชออะไรกได 4. การจดเกบไฟลไวท โฟวเดอร Unit8 ทอยในโฟลเดอร std_Work อกทหนง หมายเหต นอกเหนอจากดขอกาหนดนนกศกษา อาจเปลยนแอททรบวทตามความคดสรางสรรค เชน สพนหลง สตวอกษร รปแบบตวอกษร รปแบบการจดขอความ แตตองเปนการเขยนจากจาวาสครปต และสไตลชทเทานน

ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ, แทบเลตพซ 3. ตรวจสอบการใชงานดวยโปรแกรมเวบเบราวเซอรได 4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. ชวงระหวางฝกปฏบตการเขยนใหสงเกตการเขยนคาสงแทกตางๆ วาถกตองตามองคประกอบของเอกสารHTML 6. ใบกจกรรมทกษะท 12 สามารถจดพมพใหมเพมเตมได หรอดาวนโหลดไดท http://apiwan.cmcat.ac.th/dataapiwan/lesson8/activity12.docx 7. ผเรยนสามารถคนหาขอมลเพมเตมไดท 8.1 http://www.enjoyday.net/webtutorial/css/ 8.2 http://code.function.in.th/css/introduce 8.3 http://webtahidd.com

การประเมนผล

1. สงเกตพฤตกรรมขณะปฏบตงาน 2. ตรวจกจกรรมทปฏบตจากผลงานกจกรรมทกษะท 12 3. ประเมนผลงานเปนรายกลม ภาคผนวก ก 4. ประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D

364

เกณฑประเมนผลงานกจกรรมท 12 1. รปแบบการนาเสนอผลงาน 5 คะแนน 2. ลกษณะการเขยนเปนระเบยบ อานงาย สะอาด 5 คะแนน 3. คาสงแทก ถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 4. เนอหาถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 5. รบผดชอบสงงานตรงตามเวลาทกาหนด 5 คะแนน

รวม 25 คะแนน

365

กจกรรมทกษะท 12 เรอง การสรางเวบเพจดวยเทคนคพเศษDHTML

ชอ นามสกล รหสนกศกษา

ระดบคะแนน ผาน ไมผาน 1. ชอโฟลเดอร 2. ชอไฟลเอกสารหนาโฮมเพจ 3. ชอไฟลรปภาพ 4. ชอไฟลชนดสไตลชท 5. ชอไฟลชนดจาวาสครปต 6. หวเรองหนาเวบเพจ

366

ใบงานท 13 วชาการเขยนเวบเพจดวยภาษา HTML (3204-2201) หนวยท 8 ชอหนวย การใสเทคนคดวยDHTML สอนครงท 14-15 ชองานเรอง ประยกตเทคนคพเศษดวย DHTMLได ชวโมงรวม 8 ชวโมง จดประสงคการเรยนร 1. เพอประยกตใชคาสงเทคนคพเศษดวย DHTMLได 2. เพอใหนกศกษาเกดความคดรเรมสรางสรรค จดประสงคเชงพฤตกรรม 1. ประยกตใชคาสงเทคนคพเศษดวย DHTML ใหกบชนงานอยางเหมาะสม 2. จดสรรเวลาในการปฏบตใบงานไดอยางรอบคอบและมความคดสรางสรรคผลงาน สอการเรยนการสอน 1. เครองคอมพวเตอร, โนตบค, พอกเกตพซ หรอ แทบเลตพซ 2. เครองพมพ ชนด Inkjet วสดอปกรณ 1. กระดาษ A4 2. ดนสอ ยางลบ ปากกา 3. แผน CD เปลา 4. ใบงานท 13 5. แบบฟอรมกจกรรมทกษะท 13 6. แบบประเมนผลกจกรรมทกษะ ภาคผนวก ก 7. แบบประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D ลาดบขนตอนการปฏบต 1. นกศกษาปฏบตเปนกลมตามกลมเดม เพอทางานปฏบตกจกรรมทกษะท 13 2. ใหประธานเปนผนาดาเนนการในการปฏบตงาน และเลขานการกลม ทาหนาทบนทกและเขยนรายงานผลการปฏบตงาน สาหรบสมาชกคนอนๆ ในกลมชวยกนระดมความคดเหนใหมากทสดพรอมทงจดหาวสดอปกรณในการปฏบตงาน

3. ใหนาผลจากกจกรรมทกษะของใบงานท 4 -11 มาวเคราะห สงเคราะห มาใชในการปรบปรง ออกแบบใหเกดชนงานใหม โดยใชเทคนคพเศษดวย DHTML

4. ใหสมาชกคนอน ๆ ในกลมชวยกนระดมความคดเหนใหมากทสดปรบปรงแกไขชนงานใหครอบคลมถงการใชเทคนคพเศษดวย DHTML

367

5. นาผลจากการออกแบบและพฒนาดวยภาษาHTML บนทกลงในแบบฟอรมกจกรรมทกษะท 12 สามารถใชโปรแกรมไมโครซอฟตเวรดชวยในการจดทากจกรรมไดและเพมเตมจานวนแผนกระดาษตามความเหมาะสม 6. จากนนทาการ Print Screen หนาจอภาพแตละหนาเพจ นามาจดบอรดเพอแสดงถง การใชเทคนคพเศษดวย DHTML 7. ตงชอไฟลเอกสาร HTML ใหสอดคลองตามเนอเรองทไดออกแบบ 8. สงตวแทนออกมา นาเสนอผลงานเพอแลกเปลยนเรยนรใหเพอนกลมอนฟง 9. เมอนาเสนอผลงานทกกลมเสรจแลว ใหทกกลมนาผลงานตดบอรดหนาหองเรยน เพอแลกเปลยนความรภายนอกกลม 10. ใหทาการบนทกไฟลขอมลหนาโฮมเพจ และไฟลขอมลอน ๆ ใหบนทกตามหลกการบนทกไฟลเอกสาร 11. การจดเกบไฟลใหเกบไวท โฟลเดอร Group_ ตามดวยชอกลม เชน Group_fuilt คดลอกโฟลเดอรและไฟลทงหมด ลงบน แผน CD-ROM จดสงใหครผสอน 12. ขอม ลท ไ ด ส บค นมา ให ระ บแหล งท ม า ด วย ด ต วอ ย า งการ เข ยนแหล งท ม า http://apiwan.cmcat.ac.th/dataapiwan/subject/bb.pdf ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ หรอ แทบเลตพซ 3. ตรวจสอบการใชงานดวยโปรแกรมเวบเบราวเชอรได 4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. ชวงระหวางฝกปฏบตการเขยนใหสงเกตการเขยนคาสงแทกตาง ๆ วาถกตองตามองคประกอบของเอกสาร HTML การประเมนผล 1. สงเกตพฤตกรรมขณะปฏบตงาน 2. ตรวจกจกรรมทปฏบตจากผลงานกจกรรมทกษะท 13 3. ประเมนผลงานเปนรายกลม 4. ประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D เกณฑประเมนผลงานกจกรรมท 13 1. รปแบบการนาเสนอผลงาน 5 คะแนน 2. ลกษณะการเขยนเปนระเบยบ อานงาย สะอาด 5 คะแนน 3. คาสงแทก ถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 4. เนอหาถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 5. รบผดชอบสงงานตรงตามเวลาทกาหนด 5 คะแนน รวม 25 คะแนน

368

กจกรรมทกษะท 13 เรอง ประยกตใชเทคนคพเศษดวย DHTML ได

ชอกลม สมาชกกลม 1 2 3 4 5 6

ระดบคะแนน ผาน ไมผาน

1. หนาเอกสารเวบเพจแผนท 1 จากการ print Screen

2. คาสงทใชในการพฒนาเทคนคพเศษดวย DHTML

แผนท.........

Documents

หน่วยที่ 8 การใส่เทคนิคพิเศษ ... · 2011. 1. 21. · หน่วยที่ 8 การใส่เทคนิคพิเศษด้วยdhtml