1. Page |0

2. คู่มือเขียน
Windows 8 Apps
ด้วย HTML5 และ JavaScript สำหรับผู้เริ่มต้น

3. คู่มือเขียน Windows 8 Apps
ด้วย HTML5 และ JavaScript สำหรับผู้เริ่มต้น
ผู้แต่ง : นำยศุภชัย สมพำนิช
เนื้อหา : 15 บท (348 หน้ำ)
วันที่พิมพ์ : ธันวำคม 2555
ครั้งที่พิมพ์ : 1st Edition
ลิขสิทธิ์ : สงวนลิขสิทธิ์ตำม พ.ร.บ. ลิขสิทธิ์ พ.ศ. 2537
ห้ำมลอกเลียนแบบ, ดัดแปลง, ทำซ้ำ, เผยแพร่ ไม่ว่ำส่วนหนึ่งส่วนใดของหนังสือเล่มนี้ หรือด้วยวิธีกำรใดๆ
ก็ตำม นอกจำกจะได้รับอนุญำตเป็นลำยลักษณ์อักษรจำกผู้เขียนเท่ำนั้น
คุณผู้อ่ำนสำมำรถสอบถำมปัญหำ-ติชมเนื้อหำของหนังสือเล่มนี้ได้ที่
https://www.facebook.com/thaivb.net
Visual Studio เป็นเครื่องหมายทางการค้าของบริษัท Microsoft Coporation จากัด
โปรแกรมต่างๆ ตามที่อ้างในหนังสือเล่มนี้ เป็นเครื่องหมายการค้าของบริษัทนั้นๆ

4. วิธีการสั่งซื้อหนังสือกระดาษปริ้นท์จาก 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 สำรบัญเล่ม 1
สำรบัญเล่ม 2 สำรบัญ
สำรบัญเล่ม 2 สำรบัญ
Ebook: 239 Ebook: 269 บำท Ebook: 229 บำท Ebook: 229 บำท
บำท
ปริ๊นท์ 270 ปริ๊นท์ 300 บำท ปริ๊นท์ 260 บำท ปริ๊นท์ 260 บำท
ebook: บำท ebook: ebook: ebook:
หนังสือแบบ ebook สั่งซื้อได้ที่นี่ครับ
- www.ebooks.in.th
- www.mebmarket.com

5. คานา
หนังสือ “คู่มือเขียน 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

6. ตัวอย่างที่น่าสนใจในหนังสือเล่มนี้
การสร้างและปรับแต่ง AppBar
การสร้างส่วนแสดงผลแบบ Blog ในรูปแบบ Windows 8 Apps

7. การสร้างส่วนแสดงผลแสดงข่าวประจาวันแบบ Windows 8 Apps

8. สารบัญ
บทที่ 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

9. ทำควำมรู้จักกับโครงสร้ำงโปรเจ็กต์ 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

10. พื้นฐำนกำรตกแต่งส่วนแสดงผลด้วย 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

11. กำรแสดงตัวเลือกเวลำด้วยคอนโทรล 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

12. กำรสร้ำงส่วนแสดงผลย่อยด้วยอิลีเมนต์ <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

13. กำรตีเส้นตำรำงแบบ 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

14. พื้นฐำนกำรตรวจสอบรำยกำรที่ถูกคลิกเลือกในคอนโทรล 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

15. บทที่ 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 รุ่น คือ

16. Page |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

17. Page |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 ได้เพียงอย่ำงเดียวเท่ำนั้น

18. Page |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 ที่เรำลัง
สนใจอยู่ คุ้นเคยกันเป็นอย่ำงดีกับคุณผู้อ่ำนที่ชอบดูหนังประเภทไซไฟต่ำงๆ ที่ตัวละครมักจะพูดสั่งให้
ซอฟท์แวร์ต่ำงๆ ทำงำน

19. Page |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

20. Page |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 กล่ำวคือ

21. Page |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

22. Page |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

23. Page |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 สำหรับผู้เริ่มต้น ”

24. 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

25. 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

26. 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 สำหรับผู้
เริ่มต้น”

27. 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 สำหรับผู้
เริ่มต้น”

28. 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 ของผู้เขียน

29. 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 เหล่ำนี้ ก็มำจำกโปรแกรมเมอร์ในสำยต่ำงๆ
นั่นเอง
คำตอบที่ผู้เขียนมีให้กับคุณผู้อ่ำน ก็คือ กำรเพิ่มทักษะให้กับตัวเอง เป็นผลดีกับคุณผู้อ่ำนอย่ำง
แน่นอน กำรพัฒนำตัวเองในยุคปัจจุบัน ต้องเกิดทั้งทำงกว้ำง (เรีย นรู้หลำยเรื่อง) และทั้งทำงลึก (ศึกษำ
รำยละเอียดให้มำกที่สุด) ในเวลำเดียวกัน

30. 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

31. 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

32. P a g e | 18
รูปที่ 1-23 หลังจำกติดตั้งเสร็จแล้ว
2.ในขั้นตอนสุดท้ำยของกำรติดตั้ง จะมีกำรแสดงไดอะล๊อกซ์ให้คุณป้อน Product key ดังรูปที่ 1-24
รูปที่ 1-24 แสดงขั้นตอนสุดท้ำยของกำรติดตั้ง

33. 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

34. P a g e | 20
4.ต่อมำ จะเข้ำสู่ขั้นตอนกำรแก้ไขข้อมูลส่วนตัวของคุณใน Microsoft account จำกนั้นคลิกที่ปุ่ม
ด้ำนล่ำงสุด เพื่อเข้ำสู่ขั้นตอนต่อไป ดังรูปที่ 1-27
รูปที่ 1-27 แสดงขั้นตอนกำรป้อนข้อมูลส่วนตัวใน Microsoft account
5.ท้ำยที่สุด คุณก็จะได้ Product key ตำมที่คุณต้องกำร ดังรูปที่ 1-28
รูปที่ 1-28 แสดง Product Key ที่ได้

35. 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

36. 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 ได้แล้ว

37. P a g e | 23
รูปที่ 1-33 แสดงสภำพแวดล้อมของ Visual Studio 2012 Express for Windows 8 ในครั้งแรก

38. P a g e | 24
รูปที่ 1-33 กำรสร้ำงโปรเจ็กต์แบบ Windows Store ใน Visual Studio 2012 Express for Windows 8
รูปที่ 1-34 แสดงโปรเจ็กต์แบบ Windows Store ของ VS 2012 ตั้งแต่เวอร์ชัน Professional ขึ้นไป

39. 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

40. 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.*)

41. 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 ข้ำงต้นให้คุณโดยอัตโนมัติ เป็นส่วนแสดงผลแบบว่ำงๆ

42. P a g e | 28
รูปแบบการนาเสนอตัวอย่างในหนังสือเล่มนี้
สำหรับตัวอย่ำงโค้ดและสคริปต์ของหนังสือเล่ม นี้ จะใช้ตำรำงแต่ละสีทำหน้ำที่กำกับโค้ดไว้ สำหรับ
กรอบสีแดง หมำยถึง โค้ดหรือสคริปต์ที่มีข้อผิดพลำด ผู้เขียนยกตัวอย่ำงขึ้นมำเพื่อเปรียบเทียบเนื้อหำใน
หัวข้อนั้นๆ
HTML5
CSS3
JavaScript
Error
XML
XSLT
รูปแบบการลงสคริปต์ HTML5 ในหนังสือเล่มนี้
เพื่อให้คุณผู้อ่ำนและผู้เขียนเข้ำใจตรงกัน รูปแบบกำรลงสคริปต์ HTML5, CSS3, JavaScript และ
อื่นๆ ที่เกี่ยวข้อง ผู้เขียนแยกออกเป็น 3 กรณี คือ

43. 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 สร้ำงให้คุณ
อัตโนมัติ และส่วนที่คุณต้องเขียนเอง ผู้เขียนยึดหลักที่ว่ำ ถ้ำเนื้อหำในหัวข้อดังกล่ำว เกี่ยวข้องกับส่วนใด
ผู้เขียนจะลงส่วนนั้นๆ ทั้งหมด เพื่อให้คุณเห็นควำมเกี่ยวข้องระหว่ำงกัน ก็จะมีกำรระบุชื่อไฟล์กำกับสคริปต์
ส่วนนี้ไว้อย่ำงชัดเจนเช่นกัน เพื่อให้คุณทรำบว่ำ เป็นสคริปต์ของไฟล์ใ ดนั่นเอง

44. 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

45. 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

46. 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

47. P a g e | 33
การกาหนดหมายเลขบรรทัดโค้ดและสีธีมให้กับ VS 2012
ยังมีกำรปรับแต่งให้สภำพแวดล้อมของ VS 2012 เหมำะสมกับกำรใช้งำนอีก 2 กรณี คือ
1.การกาหนดหมายเลขบรรทัดโค้ด ให้คุณเลือกเมนู TOOLS > Options… ที่หัวข้อ Text Editor > All
Languages
รูปที่ 1-43 กำรกำหนดให้ Editor แสดงหมำยเลขบรรทัดโค้ด
รูปที่ 1-44 แสดงหมำยเลขกำกับโค้ดในแต่ละบรรทัด

48. 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 อย่ำงแท้จริง

49. P a g e | 35

50. P a g e | 36

51. P a g e | 37

52. P a g e | 38

53. P a g e | 39

54. P a g e | 40