P a g e | 0

คมอเขยน Windows 8 Apps

ดวย HTML5 และ JavaScript ส ำหรบผเรมตน

คมอเขยน Windows 8 Apps ดวย HTML5 และ JavaScript ส ำหรบผเรมตน

ผแตง : นำยศภชย สมพำนช เนอหา : 15 บท (348 หนำ)

วนทพมพ : ธนวำคม 2555 ครงทพมพ : 1st Edition

ลขสทธ : สงวนลขสทธตำม พ.ร.บ. ลขสทธ พ.ศ. 2537 หำมลอกเลยนแบบ, ดดแปลง, ท ำซ ำ, เผยแพร ไมวำสวนหนงสวนใดของหนงสอเลมน หรอดวยวธกำรใดๆ กตำม นอกจำกจะไดรบอนญำตเปนลำยลกษณอกษรจำกผเขยนเทำนน

คณผอำนสำมำรถสอบถำมปญหำ-ตชมเนอหำของหนงสอเลมนไดท https://www.facebook.com/thaivb.net

Visual Studio เปนเครองหมายทางการคาของบรษท Microsoft Coporation จ ากด โปรแกรมตางๆ ตามทอางในหนงสอเลมน เปนเครองหมายการคาของบรษทนนๆ

วธการสงซอหนงสอกระดาษปรนทจาก ebook ครบ

1.โอนเงนตำมรำคำ และจ ำนวนหนงสอทสงซอ ขอใหโอนเปนเศษสตำงคเพองำยตอกำรตรวจสอบ

เชน สงซอหนงสอรำคำ 250 บำทจ ำนวน 2 เลม โอนเงน 500.25 บำท เปนตน มำท

นายศภชย สมพานช ธนาคารไทยพาณชย บญชออมทรพยเลขท 276-215821-4

2.แจงชอ-นามสกล ทอย+รหสไปรษณย วนเวลาและยอดเงนทโอน ชอหนงสอและจ านวนหนงสอทสงซอ มาท

thaivb.net@gmail.com

3.หนงสอสงทางไปรษณยแบบ EMS คาสงฟร

4.สอบถามไดทเบอร 086-022-2299 หรอทแฟนเพจ www.facebook.com/thaivb.net

สำรบญเลม 1 สำรบญเลม 2

สำรบญเลม 1 สำรบญเลม 2

สำรบญ

สำรบญ Ebook: 239

บำท Ebook: 269 บำท Ebook: 229 บำท Ebook: 229 บำท

ปรนท ebook:

270 บำท

ปรนท ebook:

300 บำท ปรนท ebook:

260 บำท ปรนท ebook:

260 บำท

หนงสอแบบ ebook สงซอไดทนครบ

- www.ebooks.in.th

- www.mebmarket.com

ค าน า หนงสอ “คมอเขยน Windows 8 Apps ดวย HTML5 และ JavaScript ส ำหรบผเรมตน” เลมน เปนกำรน ำเสนอกำรเขยน App บน Windows 8 อกลกษณะหนง โดยอำศยควำมสำมำรถของภำษำ HTML5, JavaScript และ CSS3 ซงเปนภำษำสครปตทเรำคนเคยกนเปนอยำงด โดยเฉพำะอยำงยง คณผอำนทมำจำกสำย Web Design และ Web Programming เนอหำทน ำเสนอในเลมน น ำเสนอตงแตพนฐำนของ HTML5, CSS3 และ JavaScript ไลตำมล ำดบไปจนกระทงถงเขยน Windows 8 Apps แบบ Workshop ขนำดยอยทพรอมใชงำนไดจรงในระดบตอไป

สดทำยน ผเขยนขอขอบคณสวนชวยเหลอใน MSDN ของไมโครซอฟททชวยแกไขปญหำในระหวำงกำรแตงหนงสอเลมน หำกคณผอำนทำนใด ตองกำรสอบถำมปญหำเนอหำของหนงสอเลมน สำมำรถโพสถำมปญหำไดทแฟนเพจของผเขยนท https://www.facebook.com/thaivb.net โดยทผเขยนขอยกเลกกำรถำม-ตอบปญหำผำนระบบ e-mail ของผเขยนทงหมด หำคณผอำนทำนใด สนใจหนงสอเลมน หรอเลมอนๆ เปนแบบกระดำษ (ปรนทจำก ebook) สำมำรถตดตอสอบถำมไดทเบอร 086-022-2299

ศภชย สมพำนช ธนวำคม 2555

ตวอยางทนาสนใจในหนงสอเลมน การสรางและปรบแตง AppBar

การสรางสวนแสดงผลแบบ Blog ในรปแบบ Windows 8 Apps

การสรางสวนแสดงผลแสดงขาวประจ าวนแบบ Windows 8 Apps

สารบญ

บทท 1 กาวแรกเขาสโลกของ Windows 8 Apps ดวย HTML5 & JavaScript 1 บทน ำ 1 ประวตของ Windows แตละรน 1 ท ำควำมรจกกบ Windows 8 ในขนตน 2 บนคอมพวเตอร PC 2 บนอปกรณแทบเลต 3 รปแบบของ App ในยคปจจบน 4 แนวทำงของโปรแกรมเมอรในยค .NET Framework 4.5 5 กำรพฒนำ App บน Windows Phone 8 14 กำรพฒนำ Windows 8 Apps ดวย Visual Studio 2012 Express for Windows 8 16 กำรขอสทธชวครำวในกำรพฒนำ Windows 8 Apps 21 กำรขอหรอตออำย Developer license 25 โครงสรำงของ Windows 8 Apps 26 รปแบบกำรน ำเสนอตวอยำงในหนงสอเลมน 28 รปแบบกำรลงสครปต HTML5 ในหนงสอเลมน 28 กำรจดระเบยบโคดหรอสครปตใน VS 2012 30 กำรก ำหนดให VS 2012 แสดงไดอะลอกบอกซเลอกชนดโปรเจกต 31 กำรก ำหนดหมำยเลขบรรทดโคดและสธมใหกบ VS 2012 33 สรปทำยบท 34 บทท 2 พนฐานการพฒนา Windows 8 Apps 35 บทน ำ 35 HTML กบ XHTML ควำมเหมอนทแตกตำง 35 กำรแสดงภำษำไทยใน HTML5 36 ขอแตกตำงระหวำง HTML4 กบ HTML5 ในขนตน 36 กำรแสดงภำษำไทยใน HTML5 37 กำรสรำง Windows 8 Apps ดวย HTML5 แรกของคณ 38

ท ำควำมรจกกบโครงสรำงโปรเจกต Windows 8 Apps แบบ HTML5 & JavaScript 45 กำรสรำงโฟลเดอรในโปรเจกต 46 กำรเพมไฟลประเภทตำงๆ เขำมำในโปรเจกตปจจบน 47 ท ำควำมรจกกบ Simulator ในขนตน 49 กำรก ำหนดเพจเรมตน 56 วธกำรปด Windows 8 Apps ทถกตอง 56 สรปทำยบท 58 บทท 3 พนฐานการใชงานภาษา JavaScript ใน Windows 8 Apps 59 บทน ำ 59 พนฐำนกำรใชงำนภำษำ JavaScript ใน Windows 8 Apps 59 กำรประกำศตวแปรในภำษำ JavaScript 61 พนฐำนกำรอำงองอลเมนตใน Windows 8 Apps 62 พนฐำนกำรเพมเหตกำรณใหกบอลเมนต 62 หลกกำรตงชอระหวำงไฟล HTML5, JavaScript และ CSS3 64 กำรอำงองอลเมนตดวยคลำส WinJS.Utilities 65 พนฐำนกำรใชงำนฟงกชนใน JavaScript 68 กำรใชงำน JavaScript แบบแยกไฟลตำงหำก 70 เหตกำรณล ำดบแรกของ Windows 8 Apps ดวย HTML5 & JavaScript 71

กำรแสดงขอมลแบบผกตด (Binding Data) ดวย JavaScript 74 กำรแสดงขอมลแบบผกตด (Binding Data) ดวยอลเมนตของ HTML5 78

สรปทำยบท 80 บทท 4 พนฐานการตกแตงสวนแสดงผลดวย CSS3 81 บทน ำ 81 ก ำหนดใหใชกบอลเมนตใดอลเมนตหนง 81 ฝงสครปตภำษำ CSS3 ลงในไฟล HTML5 82 สรำงไฟล *.css แยกออกมำเปนไฟลตำงหำก 83 กำรควบคม Style หลำยอลเมนตดวย CSS3 84

พนฐำนกำรตกแตงสวนแสดงผลดวย CSS3 86 อำงองจำกประเภทอลเมนต 86 อำงองจำกแอตทรบวต class 89 อำงองจำกแอตทรบวต id 92 อำงองระบล ำดบชน 93

ระบบชวยเหลอในกำรระบคำส 94 กำรอำงองระบบสใน CSS3 95 กำรท ำเสนขอบแบบโคงและแสงเงำดวย CSS3 96 กำรตกแตงคอนโทรลของ Windows 8 Apps และอลเมนต HTML5 ดวย CSS3 98 กำรปรบแตงสวนแสดงผลใหกบกลมอลเมนต HTML5 99

อลเมนตประเภทปมกด 101 อลเมนตประเภทรบขอมล 102 อลเมนตประเภท list 102 อลเมนตประเภท hyperlink 103

กำรปรบแตงสวนแสดงผลใหกบกลมคอนโทรลของ Windows 8 Apps 105 คอนโทรล range 106 คอนโทรล Rating 106 คอนโทรล progress 106

สรปทำยบท 107 บทท 5 การใชงานอลเมนตตางๆ ของ HTML5 และกลมคอนโทรล WinJS 108 บทน ำ 108 กลมคอนโทรล WinJS คออะไร 108 กำรแสดงรำยกำรแบบมหวขอดวยอลเมนต <optgroup>…</optgroup> 108 กำรท ำไฮไลทขอควำมดวยอลเมนต <mark>…</mark> 109 กำรแสดงแถบควำมคบหนำดวยอลเมนต <progress>…</progress> 110 กำรสรำงตวเลอกวนทดวยคอนโทรล DatePicker 111 กำรสรำงรำยกำรเฉพำะเดอนดวยคอนโทรล DatePicker 114

กำรแสดงตวเลอกเวลำดวยคอนโทรล TimePicker 115 กำรสรำงปมเปด/เปดดวยคอนโทรล ToggleSwitch 117 กำรสรำง Tooltip ดวยคอนโทรล ToolTip 121 กำรตกแตงขอควำมใน Tooltip 122 กำรสรำงตวโหวตดวยคอนโทรล Rating 124 สรปทำยบท 129 บทท 6 ระบบ Menu และ Dialog 130 บทน ำ 130 กำรสรำงแถบน ำทำงและระบบเมนดวยอลเมนต <nav>…</nav> 130 กำรยกเลกขอควำมขดเสนใตส ำหรบ Hyperlink 131 กำรสรำงเมนแบบลอยไดดวยคอนโทรล Flyout 132 กำรสรำงกรอบขอควำมดวยคลำส MessageDialog 137 กำรใช MessageDialog แบบมกำรตรวจสอบปมทถกเลอก 139 กำรสรำง MessageDialog แบบมำตรฐำน 142 พนฐำนกำรใชงำน AppBar 145 กำรใชงำนไอคอนใน AppBar 151 กำรปรบแตง AppBar ดวย CSS3 154 กำรใชงำนปมแบบกดคำงในแถบ AppBar 157 กำรสรำงเมนแบบ Flyout ใหกบแถบ AppBar 159 กำรสรำงเมนคลกขวำ (ContextMenu) 164 สรปทำยบท 167 บทท 7 การออกแบบ Layout 168 บทน ำ 168 กำรก ำหนดพนทแสดงเนอหำหลกดวยอลเมนต <article>…</article> กบอลเมนต <section>…</section> 168 กำรแบงสวนแสดงผลออกเปนสวนยอยดวยอลเมนต <section>…</section> 170 กำรสรำงพนทแสดงผลยอยดวยอลเมนต <aside>…</aside> 174

กำรสรำงสวนแสดงผลยอยดวยอลเมนต <iframe>…</iframe> 178 กำรสรำงแถบน ำทำงและระบบเมนดวยอลเมนต <nav>…</nav> 181 กำรอำนขอมลจำกไฟล HTML5 อน ดวยแอตทรบวต data-win-options 182 กำรก ำหนดพนทแสดงผลแบบก ำหนดขนำดตำยตวดวยคอนโทรล ViewBox 184 พนฐำนกำรสรำงสวนแสดงผลโดยใชระบบ Template 188 กำรใชระบบ Template แบบแยกเปนไฟลตำงหำก 192 กำรสรำงพนท Footer ดวยอลเมนต <footer>…</footer> 198 สรปทำยบท 198 บทท 8 ท างานกบระบบไฟล, รปภาพ, กราฟฟกและมลตมเดย 199 บทน ำ 199 กำรเรยกระบบจดเกบขอมลใน Windows 8 199 แนวควำมคดของกำรเขยนโปรแกรมแบบขดจงหวะได (Asynchronous Programming) 199 ท ำควำมรจกกบโฟลเดอรระบบในขนตนของ Windows 8 200 กำรแสดงรปภำพดวยอลเมนต <img>…</img> 203 กำรขยำยและยอรปภำพดวยอลเมนต <img>…</img> 205 กำรแสดงขอควำมก ำกบรปภำพดวยอลเมนต <figure>…</figure> กบอลเมนต <figcaption>…</figcaption> 206 กำรแสดงรปภำพแบบเลอนอตโนมต 208 กำรแสดงและยกเลกรปภำพดวยคอนโทรล FileOpenPicker 212 พนฐำนกำรแสดงภำพกรำฟฟกดวยอลเมนต <canvas>…</canvas> 217 กำรวำดเสนกรอบดวยอลเมนต <canvas>…</canvas> 218 กำรวำดวงกลมดวยอลเมนต <canvas>…</canvas> 219 กำรลงแสงเงำในอลเมนต <canvas>…</canvas> 222 กำรแสดงรปภำพดวยอลเมนต <canvas>…</canvas> 223 กำรหมนรปภำพ 225 กำรเขยนขอควำมในอลเมนต <canvas>…</canvas> 226 กำรวำดเสนตรงดวยอลเมนต <canvas>…</canvas> 227

กำรตเสนตำรำงแบบ Grid ดวยอลเมนต <canvas>…</canvas> 230 พนฐำนกำรแสดงคลปวดโอดวยอลเมนต <video>…</video> 231 พนฐำนกำรแสดงคลปจำก Youtube โดยอำศย HTML5 234 กำรเลนไฟลเสยงดวยอลเมนต <audio>…</audio> 236

แบบไมมแถบควบคม (AutoPlay) 237 แบบมแถบควบคม (Control Bar) 238

สรปทำยบท 239 บทท 9 การสรางเนอหาแบบชองตาราง Tile ดวยคอนโทรล FlipView 240 บทน ำ 240 กำรสรำงสวนแสดงผลแบบชองตำรำงเปลยนเนอหำไดดวยคอนโทรล FlipView 240 กำรแสดงเนอหำแบบชองตำรำง Tile เปลยนเนอหำไดดวยคอนโทรล FlipView รวมกบระบบ Template 248 กำรสรำงปมเลอนดขอมลในคอนโทรล FlipView 254 กำรแสดงล ำดบขอมลและจ ำนวนขอมลทงหมดในคอนโทรล FlipView 257 สรปทำยบท 259 บทท 10 การใชงานคอนโทรล ms grid 260 บทน ำ 260 กำรสรำงสวนแสดงผลแบบชองตำรำงแบบ ms grid 260 กำรรวมพนทตำมแนวคอลมนหรอแนวแถว 265 กำรสรำงพนทสวนแสดงผลทมำกกวำ 100% 268 กำรควบคมสวนแสดงผลแบบชองตำรำง ms grid 270 สรปทำยบท 276 บทท 11 การใชงานคอนโทรล ListView 277 บทน ำ 277 พนฐำนกำรสรำงสวนแสดงผลแบบรำยกำรหรอชองตำรำงดวยคอนโทรล ListView 277 แสดงขอมลเปนชองตำรำง (Grid Layout) 277 แสดงรำยกำรแบบรำยกำร list (List Layout) 282

พนฐำนกำรตรวจสอบรำยกำรทถกคลกเลอกในคอนโทรล ListView 283 กำรตรวจสอบรำยกำรทถกเลอกในคอนโทรล ListView แบบหลำยรำยกำร 286 กำรสรำงสวนแสดงผลแบบรำยกำร ListView รวมกบระบบ Template 292 สรปทำยบท 297 บทท 12 ท าความรจกกบ Blend for Visual Studio 298 บทน ำ 298 กำรใชงำน VS 2012 รวมกบ Blend 301 กำรปรบแตงสภำพแวดลอมของ Blend 304 รำยกำร User interface 305 ท ำควำมรจกกบ Artboard 306 กำรแสดงเสนตำรำง 307 กำรซม Artboard 307 โหมดกำรท ำงำนใน Blend 308 วธกำรรนโปรเจกตใน Blend 309 กำรก ำหนดคำแอตทรบวตใหกบอลเมนตตำงๆ ของ HTML5 310 สรปทำยบท 311 Workshop 1 : การจด Layout แบบ Blog ใน Windows 8 Apps 312 Workshop 2 : การจด Layout แบบหวขอขาวสไตล Windows 8 Apps 320 บทท 13 การปรบแตงโปรเจกต Windows 8 Apps 323 บทน ำ 323 กำรปรบแตง Windows 8 Apps ในไฟล Package.appxmanifest 323 กำรก ำหนดหนำจอ Splash screen 325 กำรก ำหนดไฟลรปภำพโลโก 327 กำรก ำหนดขอควำมก ำกบโลโก 331 กำรก ำหนดรปแบบสวนแสดงผล 334 กำรสรำง App Package 335 สรปทำยเลม 342

บทท 1 กาวแรกเขาสโลกของ Windows 8 Apps ดวย HTML5 & JavaScript

บทน า หนงสอ “คมอเขยน Windows 8 Apps ดวย HTML5 และ JavaScript ส ำหรบผเรมตน” เลมน เปนกำรน ำเสนอเนอหำกำรพฒนำ Windows 8 Apps ดวย HTML5 รวมกบ JavaScript โดยอำศย Visual Studio 2012 เรยกสนๆ วำ VS 2012 กำรพฒนำ Windows 8 Apps (หรอเรยกอกอยำงวำ Windows Store Apps) สำมำรถท ำได 2 วธ คอ 1. อำศยสครปต XAML รวมกบภำษำ VB 2012 และ VC# 2012 2. อำศยภำษำสครปต HTML5 รวมกบ JavaScript

ประวตของ Windows แตละรน

ระบบปฎบตกำร Windows 8 เปนของบรษทไมโครซอฟทรนใหมลำสด ถอวำ เปนกำรปรบปรงฟเจอรครงใหญอกครงหนงของระบบปฎบตกำรในตระกล Windows

ควำมนำสนใจในล ำดบแรก กคอ Windows รนท 8 มประวตศำสตรควำมเปนมำอยำงไร ดงตอไปน

รนท 1 Windows 1.0 และรนปรบปรงยอย รนท 2 Windows 2.0 และรนปรบปรงยอย รนท 3 Windows 3.0, 3.1, 3.11 ใชกบบคคล และ Windows NT 3.1, 3.5, 3.51 ใชในองคกร

และเครอขำย Network (ค าวา NT ยอมาจาก New Technologo) รนท 4 มระบบปฏบตกำรออกมำทงสน 3 รน คอ

o Windows 95 ใชกบบคคล และ Windows NT 4.0 ใชในองคกรและเครอขำย Network ถอวำเปน Windows 4.0

o Windows 98 และ Windows 98 Second Edition เรยกสนๆ วำ Windows 98SE ถอวำเปน Windows 4.10 ใชกบบคคล

o Windows ME ถอวำเปน Windows 4.90 ใชกบบคคล ทนำสนใจ กคอ ระบบปฎบตกำรในรน 4.x (หรอ 9x) จบลงท Windows รนน

รนท 5 มระบบปฏบตกำรออกมำทงสน 3 รน คอ

P a g e | 2

o Windows 2000 ใชกบบคคลและ Windows 2000 Server ใชในองคกรและเครอขำย Network ถอวำเปน Windows NT 5.0

o Windows XP ถอวำเปน Windows NT 5.1 ใชกบบคคล o Windows Server 2003 ถอวำเปน Windows NT 5.2 ใชในเครอขำย

รนท 6 มระบบปฏบตกำรออกมำทงสน 3 รน คอ o Windows Vista ถอวำเปน Windows NT 6.0 ใชกบบคคล o Windows Server 2008 กนบเปน Windows NT 6.0 ใชในองคกรและเครอขำย Network o Windows Server 2008 R2 ถงนบเปน Windows NT 6.1 ใชในองคกรและเครอขำย

Network

รนท 7 Windows 7 ถอเปน Windows NT 6.1 รนท 8 มระบบปฏบตกำรออกมำ ณ ขณะน 3 รน คอ

o Windows 8 นบเปน Windows NT 6.2 ใชกบบคคล o Windows RT นบเปน Windows NT 6.2 ใชกบบคคล แตรนอยบนอปกรณแทบเลต

(Tablet) ภำยใต CPU แบบ ARM เทำนน ถอวำเปนระบบปฏบตกำร Windows ตวแรก ทถกสรำงขนมำเพอท ำงำนบนอปกรณแทบเลตโดยเฉพำะ

o Windows Server 2012 นบเปน Windows NT 6.2 ใชในองคกรและเครอขำย Network ท าความรจกกบ Windows 8 ในขนตน

ระบบปฏบตกำร Windows 8 เปน Windows รนแรกทถกสรำงขนมำใหท ำงำนไดทงบนคอมพวเตอรและแทบเลต โดยทไมโครซอฟทเรยกอปกรณแทบเลตอยำงเปนทำงกำรวำ เซอรเฟซ (Surface) เรำสำมำรถแยก Windows 8 ออกเปน 2 แพลตฟอรม คอ

บนคอมพวเตอร PC

1.บนคอมพวเตอร รนบนสถำปตยกรรมซพยแบบ x86 (32 บต) และ x64 (64 บต) ทคนเคยกนเปนอยำงด คอ ซพยของอนเทล (Intel) และเอเอมด (AMD) โดยท Windows 8 ทรนบนซพยตระกล x86/x64 น สามารถใชงาน Windoows 8 ไดทงแบบ Desktop Mode กบ Windows 8 UI Mode

P a g e | 3

รปท 1-1 แสดง Windows 8 แบบ Windows 8 Modern UI Mode

รปท 1-2 แสดง Windows 8 แบบ Desktop Mode

บนอปกรณแทบเลต

2.บนอปกรณแทบเลต ส ำหรบ Windows 8 ทรนอยบนแทบเลต ยงสำมำรถแยกออกเปน 2 แบบ คอ รนบนสถาปตยกรรมซพยแบบ x86/x64 สงผลใหคณสำมำรถใช Windows 8 ไดทงแบบ Desktop

Mode กบ Modern UI Mode เรยกวำ Windows 8 Pro รนบนสถาปตยกรรมซพยแบบ ARM มชอเรยกวำ Windows RT โดยท Windows RT กคอ Windows

8 ทม Modern UI Mode เปนแกนหลกทถกสรำงขนมำใหท ำงำนกบอปกรณแทบเลตเทำนน ส ำหรบแทบเลตทใชซพยแบบ ARM สำมำรถรน Windows RT ไดเพยงอยำงเดยวเทำนน

P a g e | 4

รปแบบของ App ในยคปจจบน เพอใหคณมองเหนภำพในยคปจจบนชดเจนขนวำ เรำก ำลงท ำอะไรกนอย ผเขยนขอแยกรปแบบ App ออกเปน 5 แบบ ดงน

1.Command App หรอแอพพลเคชนทผใชตองมกำรปอนค ำสงดวยกำรปอนค ำสง command เรำคนเคยกนดในชอ Console Application ในยคของ DOS รวมไปถงแอพพลเคชนบำงประเภท ทรนอยบนระบบปฎบตกำร Server ทยงคงอำศยกำรปอนค ำสงแบบขอควำมโดยตรง 2.Click App เรำคนเคยกบแอพพลเคชนประเภทนมำกทสด ใชเมำสเคอรเซอรคลกไอคอนตำงๆ สงงำนใหแอพพลเคชนท ำงำน 3.Touch App เรำเขำมำสยคทโทรศพทมอถอ และแทบเลตกมแอพพลเคชนตำงๆ อยดวยเชนกน เรยกสนๆ วำ App คณสงกำรให App เหลำนท ำงำน โดยกำรสมผสหนำจอ เพรำะควำมทนวมอของคณ มขนำดใหญกวำเคอรเซอรของเมำส จงท ำใหผทตองกำรเขำมำพฒนำ App ในสวนน ตองแกไขสวนแสดงผลใหม ใหรองรบกบกำรสมผสดวยนวมอของผใชแทนเคอรเซอรของระบบคลก 4.Motion App หรอ App ทจบกำรเคลอนไหวของผใช แลวแปลงกำรเคลอนไหวดงกลำว ไปเปนค ำสงใน App เพอสงกำรตำงๆ ตำมทไดก ำหนดไว ส ำหรบคณผอำนทชอบเลนเกม Console ของ Xbox คนเคยกนเปนอยำงด กบ App กลมน 5.Voice App หรอ App ทสงกำรดวยค ำพดของมนษย เรำก ำลงเรมตนเขำสยคของกำรสง App ใหท ำงำนดวยค ำพดของเรำ โดยทเรำไมจ ำเปนตองเขำไปแตะตอง หรอสมผสใดๆ เลยกบอปกรณ Hardware ทเรำลงสนใจอย คนเคยกนเปนอยำงดกบคณผอำนทชอบดหนงประเภทไซไฟตำงๆ ทตวละครมกจะพดสงใหซอฟทแวรตำงๆ ท ำงำน

P a g e | 5

แนวทางของโปรแกรมเมอรในยค .NET Framework 4.5 กำรอพเดตของไมโครซอฟทในยคของ .NET 4.5 และกำรมำของ Windows 8 ถอเปนกำรปรบปรงครงใหญอกครงหนง ใหคณดรปท 1-3 ประกอบค ำอธบำย

รปท 1-3 แสดงประเภทแอพพลเคชนของ .NET 4.5 ในขนตน กำรพฒนำแอพพลเคชนกอนหนำน (เวอรชน 4.0 และเวอรชนเกำกวำ) โปรแกรมเมอรสำย .NET มพนทใหคณท ำงำน 2 สวนใหญๆ คอ 1. Desktop Application

2. Web Application กำรพฒนำแอพพลเคชนทง 2 สำย เปนพนทเดมทเรำคนเคยกนเปนอยำงด ขนอยกบควำมสนใจ

ของคณวำ จะเลอกเดนไปในเสนทำงใด กแลวแตควำมชอบ ควำมถนดของแตละบคคล แตในยคปจจบน .NET Framework ถกพฒนำมำถงเวอรชน 4.5 และเขำสยคของ Windows 8

โปรแกรมเมอรสำย .NET มพนใหมขนมำอก 1 แหง ท ำงำนบนอปกรณ Tablet เปนททรำบกนดวำ ในยคปจจบน ผคนโดยทวไปตำงคนเคยกบกำรใชแทบเลต (Tablet) และสมารทโฟน (Smart Phone) หลำยคนเปลยนพฤตกรรมจำกทเคยท ำบนเครองคอมพวเตอร มำท ำบนอปกรณเหลำนแทน เชน กำรเลนอนเตอรเนต, กำรเลนเกมส, กำรใชแอพพลชนตำงๆ ฯลฯ เปนตน

ในโลกของ .NET เรำเรยกแอพพลเคชนตำงๆ ทรนบนอปกรณเหลำนวำ Windows 8 Apps และเรยกอปกรณเหลำนโดยรวมวำ Smart Devices

P a g e | 6

กลำวไดอกนยหนงวำ ถำคณตองกำรพฒนำแอพพลเคชนบน Smart Devices เหลำนดวย .NET คณตองพฒนำแอพพลเคชนแบบ Windows 8 Apps นนเอง

รปท 1-4 แสดงโปรเจกตแบบ Windows 8 Apps ใน Visual Studio 2012 บน Windows 8 ไมโครซอฟทออกแบบให Windows 8 ท ำงำนไดทง PC (คอมพวเตอร) และ Tablet ซงเปนพนทแหงใหมของโปรแกรมเมอรสำย .NET ท ำงำนรวมกบ .NET Framework 4.5 ควำมส ำคญอกประกำรหนง กคอ คณตองทรำบใหไดกอนวำ คณก ำลงอยสวนไหนในโลกของ .NET 4.5 บน Windows 8 กลำวคอ

P a g e | 7

1.Desktop Application คณมทำงเลอก 3 ทำง คอ Windows Forms Application พนทเดมทหลำยคนคนเคยกนเปนอยำงดกบกำรพฒนำแอพพลเค

ชนทมสวนแสดงผลแบบมำตรฐำน สำมำรถพฒนำดวยภำษำ Visual Basic หรอ Visual C#

รปท 1-5 แสดงโปรเจกตแบบ Windows Forms Application ใน Visual Studio 2012 บน Windows 8 WPF Application ในกรณทคณตองกำรพฒนำแอพพลเคชนทสำมำรถแกไขสวนแสดงผลใหตรง

ตำมควำมตองกำรของคณ โปรเจกตประเภทน คอ ค ำตอบของคณ โดยกำรแบงสวนแสดงผล (อยในควำมรบผดชอบของสครปต XAML) กบสวนกำรท ำงำน (โคดภำษำ Visual Basic หรอ Visual C#) ออกจำกกนอยำงชดเจน

รปท 1-6 แสดงโปรเจกตแบบ WPF Application ใน Visual Studio 2012 บน Windows 8

P a g e | 8

ส ำหรบคณผอำนทสนใจกำรพฒนำแอพพลเคชนดวย WPF ผเขยนแตงหนงสอทชอวำ “พฒนำแอพพลเคชนดวย WPF 4.5 ใน VB 2012 และ VC# 2012 ส ำหรบมอใหม” ดงรปท 1-7

รปท 1-7 แสดงหนำปกหนงสอ “พฒนำแอพพลเคชนดวย WPF 4.5 ใน VB 2012 และ VC# 2012 ส ำหรบมอใหม”

LightSwitch พฒนำแอพพลเคชนบนแนวควำมคดทวำ เขยนโคดใหนอยทสด หรอไมตองเขยนโคดเลย โดยใชระยะเวลำพฒนำไมนำน เรยกแนวควำมคดนวำ Rapid Application Development (RAD) ผลงำนทไดออกมำ เพยงพอตอกำรใชงำนจรงอกดวย

รปท 1-8 แสดงโปรเจกตแบบ LightSwitch ใน Visual Studio 2012 บน Windows 8

P a g e | 9

จำกรปท 1-8 โปรเจกตแบบ LightSwitch ของ VS 2012 ครอบคลมทง Desktop Application (VB 2012 กบ VC# 2012) และ Web Application (ตำมมำตรฐำน HTML5) ดงนน จงเปนอก 1 ทำงเลอกทส ำคญมำก ส ำหรบโปรแกรมเมอรสำย .NET ทตองเรยนร 2.Web Application คณมทำงเลอก 3 ทำง คอ

ASP.NET เปนกำรพฒนำเวบแอพพลเคชนโดยกำรแยกสวนแสดงผล (*.aspx) กบโคดกำรท ำงำน (ภำษำ Visual Basic (*.vb) หรอภำษำ Visual C# (*.cs)) ออกจำกกน

รปท 1-9 แสดงโปรเจกตของ ASP.NET ใน Visual Studio 2012 บน Windows 8 คณผอำนทสนใจกำรพฒนำเวบแอพพลเคชนดวย ASP.NET 4.5 ผเขยนแตงหนงสอทชอวำ “คมอพฒนำเวบแอพพลเคชน ASP.NET 4.5 ดวย VB 2012 และ VC# 2012 ส ำหรบผเรมตน”

รปท 1-10 แสดงหนำปกหนงสอ “คมอพฒนำเวบแอพพลเคชน ASP.NET 4.5 ดวย VB 2012 และ VC# 2012 ส ำหรบผเรมตน”

P a g e | 10

ASP.NET Web Matrix ไมโครซอฟทสรำงโครงกำรทเรยกวำ Web Matrix ขนมำ เพอเปนอก 1 ทำงเลอกส ำหรบนกพฒนำเวบแอพพลชนดวย ASP.NET ขอแตกตำงทส ำคญ กคอ ไมโครซอฟทรวมสวนแสดงผลเขำกบโคดกำรท ำงำน แยกออกเปน 2 กรณ คอ ภำษำ Visual Basic (*.vbhtml) และภำษำ Visual C# (*.cshtml)

รปท 1-11 แสดงโครงกำร Web Matrix ของไมโครซอฟท เครองมอทใชพฒนำ ASP.NET Web Matrix ไมโครซอฟทปลอยใหนกพฒนำสำมำรถ download ฟรไดท http://www.microsoft.com/web/webmatrix/ เรำเรยก ASP.NET Web Matrix อกชอหนงวำ ASP.NET ทรนดวย Razor

P a g e | 11

รปท 1-12 แสดงสภำพแวดลอมของ ASP.NET Web Matrix ควำมส ำคญของโครงกำร ASP.NET Web Matrix กคอ เปนพนฐำนของกำรพฒนำเวบแอพพลเคชนดวย ASP.NET MVC 4.0 โดยมโครงสรำงกำรท ำงำนแบงออกเปน 3 สวน คอ Model – View – Controller

Silverlight เรยกอกอยำงหนงวำ WPF Application ทรนบนเวบ ในอนำคตไมโครซอฟทจะสนบสนน HTML5 มำกกวำ Silverlight

รปท 1-13 แสดงโปรเจกตแบบ Silverlight ใน Visual Studio 2012 บน Windows 8

P a g e | 12

3.Windows 8 Apps คณมทำงเลอก 2 ทำง คอ พฒนาดวยสครปต XAML รวมกบภำษำ Visual Basic 2012 หรอภำษำ Visual C# 2012

รปท 1-14 แสดงโปรเจกตแบบ Windows 8 Apps แบบ XAML ใน Visual Studio 2012 บน Windows 8 ส ำหรบคณผอำนทสนใจกำรพฒนำ Windows 8 Apps แบบ XAML ผเขยนแตงหนงสอทชอวำ “คมอ

เขยน Windows 8 Apps ดวย VB 2012 & VC# 2012 ส ำหรบผเรมตน” ดงรปท 1-15

รปท 1-15 แสดงหนำปกหนงสอ “คมอเขยน Windows 8 Apps ดวย VB 2012 & VC# 2012 ส ำหรบผเรมตน”

P a g e | 13

พฒนาดวยภาษา HTML5 รวมกบภำษำ JavaScript และ CSS3

รปท 1-16 แสดงโปรเจกตแบบ Windows 8 Apps แบบ HTML 5 ใน Visual Studio 2012 บน Windows 8 ส ำหรบคณผอำนทสนใจกำรพฒนำ Windows 8 Apps แบบ HTML5 ผเขยนแตงหนงสอทชอวำ

“คมอเขยน Windows 8 Apps ดวย HTML5 และ JavaScript ส ำหรบผเรมตน” ดงรปท 1-17

รปท 1-17 แสดงหนำปกหนงสอ “คมอเขยน Windows 8 Apps ดวย HTML5 และ JavaScript ส ำหรบผเรมตน”

P a g e | 14

การพฒนา App บน Windows Phone 8 ในกรณทคณผอำนสนใจพฒนำ App บน Windows Phone 8 ดวย Visual Studio 2012 สำมำรถ

ท ำไดเชนกน โดยทคณตองมกำรตดตง Windows Phone 8 SDK กอน

รปท 1-18 แสดงโปรเจกตชนด Windows Phone 8 Apps ใน VS 2012 คณสำมำรถพฒนำ Windows Phone 8 Apps ได 2 ทำงเลอก คอ

กำรพฒนำ Windows Phone 8 Apps แบบ XAML ดวย VB 2012 & VC# 2012 กำรพฒนำ Windows Phone 8 Apps แบบ HTML5 กบ JavaScript

รปท 1-19 แสดงปกหนงสอกำรพฒนำ Windows Phone 8 Apps ดวย HTML5 ของผเขยน

P a g e | 15

กำรแขงขนในตลำด Smart Devices (Tablet และ Smart Phone) ในยคปจจบน มกำรเปลยนแปลงอยตลอดเวลำ ผเขยนไมสำมำรถคำดเดำไดวำ สถำนะของโปรเจกตแบบ Windows Phone จะเปนอยำงไรในอนำคต ขอใหคณผอำนตดตำมขำวสำร ควำมคบหนำอยำงใกลชด โดยทผเขยนจะมกำรอพเดตขำวสำรอยตลอดเวลำทแฟนเพจของผเขยนท https://www.facebook.com/thaivb.net

รปท 1-20 แสดงแฟนเพจของผเขยน จำกโครงสรำงขำงตน พบวำ สครปต XAML มบทบาททงใน WPF Application, Silverlight,

Windows Phone 8 และ Windows 8 Apps ดงนน ในปจจบน สงทโปรแกรมเมอรสาย .NET ควรจะศกษามากทสด นนคอ สครปตภาษา XAML นนเอง ผเขยนคดวำค ำถำมแรกทคณอยำกรค ำตอบมำกทสด กคอ โปรแกรมเมอรสำย .NET จะเดนไปในทศทำงใดตอไป

ในอดตทผำนมำ สภำพแวดลอมของเรำมแตเพยงบน PC กบ Notebook เทำนน แตในปจจบน คณไมจ ำเปนตองเลนอนเตอรเนต เลนแอพพลเคชนบน PC หรอ Notebook อกตอไป คณสำมำรถใชงำนอปกรณจ ำพวก Tablet และ Smart Phone เขำมำท ำหนำทบำงอยำงแทน PC หรอ Notebook ไดอกดวย แอพพลเคชนทคณเลนบนอปกรณ Smart Devices เหลำน กมำจำกโปรแกรมเมอรในสำยตำงๆ นนเอง ค ำตอบทผเขยนมใหกบคณผอำน กคอ กำรเพมทกษะใหกบตวเอง เปนผลดกบคณผอำนอยำงแนนอน กำรพฒนำตวเองในยคปจจบน ตองเกดทงทำงกวำง (เรยนรหลำยเรอง) และทงทำงลก (ศกษำรำยละเอยดใหมำกทสด) ในเวลำเดยวกน

P a g e | 16

ในวนทคณตองลงสนำมจรง คณไมมทำงลวงรไดเลยวำ ในระหวำงกำรท ำงำนของคณ คณจะตองประสบปญหำอะไรบำง ตองใชเทคโนโลยอะไรบำง สงเดยวทคณรตอนน กคอ คณตองเตรยมตวเองใหพรอมกบสภำพแวดลอมในปจจบนทกทำงเทำทจะท ำได การพฒนา Windows 8 Apps ดวย Visual Studio 2012 Express for Windows 8 คณยงมอก 1 ทำงเลอกในกำรพฒนำ Windows 8 Apps นนคอ อำศย Visual Studio 2012 Express for Windows 8 ซงเปนเครองมอทไมโครซอฟทเปดใหนกพฒนำทวไป สำมำรถดำวนโหลดมำใชงำนไดฟรแบบมเงอนไขท http://www.microsoft.com/visualstudio/11/en-us/downloads มขนำด 403 MB ดงรปท 1-21

P a g e | 17

รปท 1-21 แสดงเวบไซดทใหดำวนโหลด Visual Studio 2012 Express for Windows 8 หลงจำกทคณดำวนโหลด Visual Studio 2012 Express for Windows 8 (ไฟล vs2012_winexp_enu.iso) มำแลว ขอใหคณตดตงบน Windows 8 ตำมขนตอนทปรำกฎขนมำ มขนตอนดงน 1.เรมตน ใหคณดบเบลคลกไฟล win8express_full.exe เพอเรมตนตดตง Visual Studio 2012 Express for Windows 8

รปท 1-22 แสดงหนำจอเรมตนตดตง Visual Studio 2012 Express for Windows 8

P a g e | 18

รปท 1-23 หลงจำกตดตงเสรจแลว 2.ในขนตอนสดทำยของกำรตดตง จะมกำรแสดงไดอะลอกซใหคณปอน Product key ดงรปท 1-24

รปท 1-24 แสดงขนตอนสดทำยของกำรตดตง

P a g e | 19

3.คณสำมำรถขอ Product key ไดฟร โดยกำรคลกท Register online กจะเขำสขนตอนกำร sign in เขำสระบบของไมโครซอฟทโดยใช e-mail ของคณ แยกออกเปน 2 กรณ

กรณใช e-mail อนๆ ทไมอยในเครอของไมโครซอฟท คณตองลงทะเบยน e-mail ของคณ กบ Microsoft account กอน โดยกำรคลกท Sign up now

รปท 1-25 แสดงกำรลงทะเบยน e-mail อนกบ Microsoft account กรณใช e-mail ในเครอของไมโครซอฟท (www.live.com/ , www.hotmail.com/ ,

www.outlook.com/ ) คณสำมำรถใช e-mail ของคณ sign in เขำสระบบ Microsoft account ดงรปท 1-26

รปท 1-26 แสดงกำร sign in เพอขอ Product key

P a g e | 20

4.ตอมำ จะเขำสขนตอนกำรแกไขขอมลสวนตวของคณใน Microsoft account จำกนนคลกทปม ดำนลำงสด เพอเขำสขนตอนตอไป ดงรปท 1-27

รปท 1-27 แสดงขนตอนกำรปอนขอมลสวนตวใน Microsoft account 5.ทำยทสด คณกจะได Product key ตำมทคณตองกำร ดงรปท 1-28

รปท 1-28 แสดง Product Key ทได

P a g e | 21

6.ทำยทสด ใหคณน ำ Product key ทได มำใชใน Visual Studio 2012 Express for Windows 8 กจะท ำใหคณสำมำรถใชงำนโปรแกรมไดตำมทคณตองกำรแลว ดงรปท 1-29

รปท 1-29 แสดงกำรน ำ Product key ทได มำใชใน Visual Studio 2012 Express for Windows 8 การขอสทธชวคราวในการพฒนา Windows 8 Apps กำรพฒนำ Windows 8 Apps ดวยโปรเจกตแบบ Windows Store ในครงแรก ตองมกำรขอสทธทเรยกวำ Developer license โดยทผเขยนขอเรยกวำ เปนกำรขอสทธชวครำว (เพรำะวำมวนหมดอำย) เพอใหคณสำมำรถสรำง Windows 8 Apps ดวย VS 2012 ไดนนเอง

รปท 1-30 แสดงไดอะลอกยนยนสทธ ทปรำกฎขนมำในครงแรก จำกรปท 1-30 VS 2012 (ทก Edition) จะแสดงไดอะลอกนขนมำในครงแรก เพอใหคณยนยนสทธในกำรพฒนำ Windows 8 Apps ดวยโปรเจกตแบบ Windows Store

P a g e | 22

คณตองขอสทธชวครำวกอน แยกออกเปน 2 กรณ คอ 1.ใหคณ Sign in ดวย e-mail ทคณลงทะเบยนกบ Microsoft account ดงรปท 1-31

รปท 1-31 แสดงกำร Sign in เขำสระบบ Microsoft account ตอมำ จะมไดอะลอก Developer License แจงใหคณทรำบวำ สทธชวครำวแบบ Developer license ทคณไดรบ จะหมดอำยเมอใด ดงรปท 1-32

รปท 1-32 แสดงสทธชวครำวแบบ Developer license ทผเขยนไดรบ จำกรปท 1-32 สทธทคณไดรบ สงผลใหคณสำมำรถพฒนำ Windows 8 Apps ไดแลว

P a g e | 23

รปท 1-33 แสดงสภำพแวดลอมของ Visual Studio 2012 Express for Windows 8 ในครงแรก

P a g e | 24

รปท 1-33 กำรสรำงโปรเจกตแบบ Windows Store ใน Visual Studio 2012 Express for Windows 8

รปท 1-34 แสดงโปรเจกตแบบ Windows Store ของ VS 2012 ตงแตเวอรชน Professional ขนไป

P a g e | 25

การขอหรอตออาย Developer license แยกออกเปน 2 กรณ คอ 1.กรณ Visual Studio 2012 ตงแตเวอรชน Professional ขนไป คณสำมำรถเลอกเมน PROJECT > Store > Acquire Developer License… เพอขอหรอตออำยสทธชวครำว

รปท 1-35 กรณ Visual Studio 2012 ตงแตเวอรชน Professional ขนไป 2.กรณ Visual Studio 2012 Express for Windows 8 ใหคณเลอกเมน STORE > Acquire Developer License…

รปท 1-36 กรณ Visual Studio 2012 Express for Windows 8

P a g e | 26

โครงสรางของ Windows 8 Apps คณสำมำรถพฒนำ Windows 8 Apps ได 2 แบบ คอ 1. อำศยสครปต XAML รวมกบภำษำ VB 2012, VC# 2012 และ C++ 2012 2. อำศยสครปต HTML5 รวมกบ CSS3 & JavaScript

1.อาศยสครปต XAML รวมกบภาษา VB 2012, VC# 2012 และ C++ แตเนอหำทผเขยนน ำเสนอ ครอบคลม 2 ภำษำเทำนน คอ VB 2012 & VC# 2012

ส ำหรบโคด VB 2012 & VC# 2012 ทน ำมำใชในกำรพฒนำ Windows 8 Apps เกดจำก 2 สวนดวยกน คอ

ความรเดมจาก .NET เวอรชนเกา โดยสวนใหญ ยงคงใชใน Windows 8 Apps ไดเชนเดม อยในฐำนะเปนกลมคลำสทอยภำยใตเนมสเปซ System.* อำจจะมขอแตกตำง หรอขอจ ำกดไปจำกเดมบำง ขนอยกบรำยละเอยด ซงจะเปนเนอหำในล ำดบถดไป

สงทตองศกษาเพมเตม อยภำยใตเนมสเปซทขนตนดวย Windows.* รนภำยใต WinRT นคอ สงทเรำตองเรยนรวำ ในกำรพฒนำ Windows 8 Apps ขนมำ ประกอบดวยอะไรบำง

รปท 1-37 แสดงเนมสเปซในโปรเจกต Windows 8 Apps ดวย VC# 2012 จำกรปท 1-37 มำจำกโปรเจกต Windows 8 Apps ดวย VC# 2012 แสดงใหคณเหนชดเจนทสด

กลำวคอ เมอคณสรำงโปรเจกต Windows 8 Apps วำงๆ ขนมำ มกำรอำงองเนมสเปซพนฐำนเทำทจ ำเปนในกำรพฒนำ Windows 8 Apps ขนตนใหคณโดยอตโนมต ประกอบดวยเนมสเปซ 2 กลม คอ

กลม .NET เดม (System.*) กลม WinRT (Windows.*)

P a g e | 27

สวนคณผอำนทเคยพฒนำ WPF Application มำกอน กำรยำยมำพฒนำ Windows 8 Apps ถอวำ คณอยในฐำนะครอบครวเดยวกน คดแบบงำยๆ วำ บำนของคณใหญขน ถำคณผอำนเลอกสำยน สงทคณได คอ คณสำมำรถพฒนำไดทง WPF Application และ Windows 8 Apps 2.อาศยสครปต HTML5 รวมกบ CSS3 & JavaScript สงทส ำคญทสด กคอ HTML5 ทน ำมำใชในกำรพฒนำ Windows 8 Apps มทงสวนทเปนมำตรฐำนเดมของ HTML5 และสวนทเพมเตมขนมำโดยไมโครซอฟท เพอเพมประสทธภำพในกำรท ำงำนและสรำงสวนแสดงผลใน Windows 8 Apps นนเอง เชน กลมแอตทรบวตทขนตนดวยค ำวำ data- ฯลฯ เปนตน ถำคณผอำนเลอกสำยน สงทคณได คอ กำรสรำงเวบไซดดวยมำตรฐำน HTML5, กำรจดสวนแสดงผลดวย CSS3 และ Windows 8 Apps ส ำหรบคณผอำนทเปนมอใหมจรงๆ กำรเรมตนศกษำ เขำมำสโลกของ Windows 8 Apps ไมใชเรองยำกเยนอกตอไป เพรำะวำ ไมโครซอฟทเตรยมเครองมอ และจดโครงสรำงของ Windows 8 Apps ใหงำยและสะดวกตอกำรเรยนรเปนอยำงมำก นคอ โจทยของผเขยนในกำรน ำเสนอหนงสอในซรยของ Windows 8 Apps

สวนแสดงผลของ Windows 8 Apps ในขนตน แบบ HTML5 แสดงดงสครปตตอไปน HTML5

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>App1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- App1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>

ทกๆ ครงทคณสรำง Windows 8 Apps ดวยโปรเจกตชนด Blank App สงผลให VS 2012 จะสรำงสครปต HTML5 ขำงตนใหคณโดยอตโนมต เปนสวนแสดงผลแบบวำงๆ

P a g e | 28

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

CSS3

JavaScript

Error

XML

XSLT

รปแบบการลงสครปต HTML5 ในหนงสอเลมน เพอใหคณผอำนและผเขยนเขำใจตรงกน รปแบบกำรลงสครปต HTML5, CSS3, JavaScript และอนๆ ทเกยวของ ผเขยนแยกออกเปน 3 กรณ คอ

P a g e | 29

1.กรณสครปต HTML5 ในกรณทคณพฒนำ Windows 8 Apps ดวย HTML5 และ JavaScript เมอคณสรำงโปรเจกตขนมำ VS 2012 จะสรำงไฟล HTML5 (*.html) ขนมำใหคณโดยอตโนมต ดงสครปต HTML5 ตอไปน HTML5

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>App1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- App1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>

สครปต HTML5 ขำงตน เปนโครงสรำงของสวนแสดงผลท VS 2012 สรำงใหคณโดยอตโนมต เปนสวนทผเขยนไมลงในหนงสอเลมน ผเขยนลงเฉพาะสครปต HTML5 ทคณตองเขยนเอง ซงเปนเนอหำของหวขอนนๆ อยระหวำงอลเมนต <body>…</body> เทำนน แตถำเนอหำดงกลำว เกยวของกบสครปต HTML5 ท VS 2012 สรำงใหคณโดยอตโนมต ผเขยนจะลงสครปต HTML5 เตมรปแบบ เพอใหคณเหนรำยละเอยดอยำงชดเจน โดยทจะระบชอไฟล *.html ก ำกบสครปตไวดวย เพอใหคณทรำบวำ เปนสครปต HTML5 ของไฟลใด 2.กรณสครปต CSS3, JavaScript และอนๆ ส ำหรบสครปตสวนน มทงสวนท VS 2012 สรำงใหคณอตโนมต และสวนทคณตองเขยนเอง ผเขยนยดหลกทวำ ถำเนอหำในหวขอดงกลำว เกยวของกบสวนใด ผเขยนจะลงสวนนนๆ ทงหมด เพอใหคณเหนควำมเกยวของระหวำงกน กจะมกำรระบชอไฟลก ำกบสครปตสวนนไวอยำงชดเจนเชนกน เพอใหคณทรำบวำ เปนสครปตของไฟลใดนนเอง

P a g e | 30

3.กรณเขยนสครปตใหมเพมเขาไปในสครปตทถกสรางขนมาโดย VS 2012 ส ำหรบกรณน เกดจำกกำรท ำงำนรวมกนระหวำงสครปตทเรำตองเขยนขนมำเอง กบสครปตทมำจำก VS 2012 โดยอตโนมต ผเขยนแยกแยะโดยกำรก ำหนดใหสครปตทคณตองเขยนขนมำเองเปนส สวนสครปตทมำจำก VS 2012 โดยอตโนมต ผเขยนเลอกใชสเทำ เพอใหเกดควำมแตกตำง การจดระเบยบโคดหรอสครปตใน VS 2012 มค ำสงใน VS 2012 ทนำสนใจ ท ำหนำทจดระเบยบโคดหรอสครปตใหดงำยยงขน โดยกำรเลอกเมน EDIT > Advanced > Format Document

รปท 1-38 แสดงกำรเลอกค ำสง Format Document

รปท 1-39 ผลกำรจดระเบยบโคดหรอสครปตดวย VS 2012

P a g e | 31

การก าหนดให VS 2012 แสดงไดอะลอกบอกซเลอกชนดโปรเจกต ไมวำคณจะใช VS 2012 Edition ใดกตำม ตองมกำรก ำหนดคำใหกบ VS 2012 เลกนอย เพอใหเหมำะสมกบกำรใชงำน กลำวคอ ทกๆ ครงทคณเปดโปรแกรม VS 2012 ขนมำ ควรจะมไดอะลอกบอกซ Show New Project dialog box ปรำกฎขนมำ เพอแสดงโปรเจกตชนดตำงๆ ใหคณเลอกใชงำน

1.ใหคณเปด VS 2012 ขนมำ เลอกเมน TOOLS > Options… ดงรปท 1-40

รปท 1-40 แสดงกำรเลอกเมน TOOLS > Options… 2.ทหวขอ Environment เลอกหวขอ Startup ทชอง At Startup: เลอกรำยกำรShow New Project dialog box

รปท 1-41 แสดงกำรเลอกรำยกำร Show New Project dialog box

P a g e | 32

ทกๆ ครงทคณเปดโปรแกรม VS 2012 ขนมำ จะมไดอะลอกบอกซ Show New Project dialog box ปรำกฎขนมำเปนล ำดบแรก เพอใหคณเลอกชนดโปรเจกตทคณตองกำรใชงำน ดงรปท 1-42

รปท 1-42 แสดงไดอะลอกบอกซ Show New Project dialog box จำกรปท 1-42 ถำคณตองกำรพฒนำ Windows 8 Apps ดวย HTML5 รวมกบ JavaScript ขอใหคณเลอกโปรเจกตแบบ JavaScript > Windows Store

P a g e | 33

การก าหนดหมายเลขบรรทดโคดและสธมใหกบ VS 2012 ยงมกำรปรบแตงใหสภำพแวดลอมของ VS 2012 เหมำะสมกบกำรใชงำนอก 2 กรณ คอ 1.การก าหนดหมายเลขบรรทดโคด ใหคณเลอกเมน TOOLS > Options… ทหวขอ Text Editor > All Languages

รปท 1-43 กำรก ำหนดให Editor แสดงหมำยเลขบรรทดโคด

รปท 1-44 แสดงหมำยเลขก ำกบโคดในแตละบรรทด

P a g e | 34

2.การก าหนดสธมใหกบ VS 2012 คณสำมำรถก ำหนดสธมใหกบสภำพแวดลอมของ VS 2012 ได 2 ส คอ สเทำ (Light) และสด ำ (Dark) ทหวขอ Environment > General

รปท 1-45 แสดงกำรก ำหนดสธมใหกบ VS 2012

รปท 1-46 แสดงสภำพแวดลอมของ VS 2012 แบบใชธมส Dark สรปทายบท

เนอหำในบทน เปนกำรกลำวถงภำพรวมของกำรพฒนำ Windows 8 Apps ดวย HTML5 & JavaScript ในบทตอไป จะเขำสโลกของ Windows Store อยำงแทจรง

P a g e | 35

P a g e | 36

P a g e | 37

P a g e | 38

P a g e | 39

P a g e | 40