ขาเดฟ khadev vol 1

นตยสารขาเดฟ


สารบญ


เครดต

จารยปบ บรรณาธการ

อน กราฟค

สนใจรวมทมงาน facebook: [email protected]

ประเดมฟรนตยการออนไลนเอาใจบรรดาสาวกขาเดฟทงหลายตอนรบบรรยากาศฟตบอลโลกท

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

ชองทาง ขาเดฟในทนไมใชนตยสารแฟชนเอาใจวยรนแตเปนนตยสารใหความรแฝงความบนเทงแกบรรดา

นกพฒนาซอฟทแวรทงหลาย ซงมความมงหวงทจะเปนสวนหนงในการพฒนานกพฒนาซอฟทแวรไทยใหกาว

ไกลในระดบโลกกบกระแสการแขงขนของการเปดการคาเสรอาเซยน AEC ซงเนอหาตางๆนนผเขยนได

กลนกรองมาประสบการณใชงานจรง ซงการนาไปประยกตใชจรงทฤษฎและปฏบต ศาสตรและศลปลวนม

ความสาคญเกอกลซงกนและกนจะนาไปสผลงานทดและมประสทธภาพได ความสามารถของนกพฒนาไทยนน

ไมไดดอยไปกวาชาตใดในโลก แตนกพฒนาไทยนนสวนใหญยงคอนขางเตมไปดวยความตสตและGeek เสย

เปนสวนใหญ เรยกไดวาความสามารถเฉพาะตวสงเปนคนๆแตละคนมรปแบบและสไตลไมเหมอนกน ทางาน

รวมกบคนทดอยกวาไมคอยได ขาดมาตรฐานการทางานและการจบกลมทางานรวมกนทด ทาใหพลงการ

แขงขนของคนไทยนนยงสตางชาตไมได ซงตางชาตนนมความคดทคอนขางเปนระบบไมคอยยดตดกบ

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

ทมงานนตยสารขาเดฟจงอยากเปนสวนหนงในการรเรมแบงปนความรและประสบการณใหแกเหลาบรรดาขา

เดฟของไทย ซงหวงเปนอยางยงวาจะชวยสรางแรงผลกดนใหสงคมขาเดฟแขงแกรงและกวางขวางมากขน

เพอผลกดนใหนกพฒนาและซอฟทแวรไทยกาวไกลระดบโลก


Google Map เอาใจสงหนกปนจกรยานบนเขา

Google ไดเพมระดบความสงขอมลเสนทางจกรยานในการบรการแผนท

ใหดขนสาหรบนกปนจกรยานบนภเขาซง feature ใหมนยงสามารถ

ทางานไดแมระยะทางไกลจากการทดสอบ เสนทางจกรยานจากโอเรกอน

ไปพอรตแลนด, เทกซสแสดงใหเหนวาการเพมระดบความสงมากกวา

57,000 ฟต สาหรบนกพฒนาสามารถหาขอมลเพมเตมไดจาก

https://developers.google.com/maps/documentation/elevation/#What


Alibaba อคอมเมซยกษใหญของจนเตรยมเขยาตลาดหนสหรฐ

Alibaba ชอบรษทหลายคนอาจจะคดวาเปนบรษทในแถบอาหรบหรออนเดย แตยกษใหญรายนมาจาก

ประเทศจน ซงคนไทยเองคงจะไมรจกกนสกเทาไร แตเกจอาจารยหลายทานเชอวาบรษทยกษใหญซงมฐาน

ลกคาสวนใหญเปนคนจนทวโลก ซงทาธรกจซอขายบนโลกออนไลนคลายอเมซอนยกษใหญของอเมรกา ซง

แจค มาร เจาของบรษทครงหนงเคยไปขอเงนทนจากชาวอเมรกนและบอกกบนายทนวา จะสรางเวบซอขาย

ออนไลนใหยงใหญทสดในโลกมากกวาอเมซอนเลยไมไดเงนทนจากนายทนมะกน แตวนนเขาสามารถตอสจะ

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

สตฟจอบ เลยทเดยว

Samsung Galaxy S5 มอถอกนนา

ซมซงยกษใหญมอของเอเชยเปดตวมอถอใหม Galaxy S5 ภายใต Feature ใหมๆ มากมาย ไมวาจะเปน

ความสามารถในการปองกนนา คณสมบตออโตโฟกส เพมแสงสวางอตโนมตในการถายรป พ รอมโปรแกรม

เพออสขภาพสถตในการออกกาลงกายตางๆ เรยกไดวาเอาใจ life style ของคนยคดจตอลเลยทเดยว ด

คณสมบตเพมเตมท http://www.samsung.com/th/galaxys5/feature.html


Printer รนจว

ประสบความสาเรจอยางลนหลามสาหรบ printer พนธจวของ Zuta Lab ทเสนอไอเดยและระดมทน

จากเวบ kickstarter จนไดเงนมาพฒนา Printer จวจนประสบความสาเรจ ใครอยากรวามนสามารถทาอะไรได

บางเขาไปดไดท https://www.kickstarter.com/projects/1686304142/the-mini-mobile-robotic-printer

อเมซอนขยายฐาน Bit Coin ไปยงยโรป

Bit Coin หรอ เงนเสมอนในโลกออนไลนซงกาลงไดรบ

ความนยมในการซอขายแลกเปลยนของในโลกของไลน

ซงของทซอนนอาจจะเปนสนคาทจบตองได เชน เสอผา

วดโอเกมส หรอของจาลองในโลกออนไลน เชน ไอเทมใน

เกมสกได ซงเจาของเวบไซตซอขายออนไลนอยาง อเม

ซอนกไดออกสกลเงนของตนเองเพอใชในการซอของ ซง

กาลงไดรบความนยมอยางมากในยโรป ไมวาจะเปน

องกฤษ เยอรมน เสปน อตาล ซงคาเงนของ อเมซอนนน

100 coints = 1 euro


HTML5 ตอนท 1 เรมตนกบ HTML5 โดยจารยปบ

เนอหาเรมตนของ HTML5 ประกอบไปดวย

แนะนา HTML5

Elementsใหมๆ

กลมออบเจค Semantics

แนะนา HTML5

HTML5 คออะไร?

มาตรฐานของเอกสาร HTML* เวอรชนลาสด

เอกสาร HTML เวอรชนกอนหนานคอ 4.01

เนอหาแบบRich* โดยไมตองพงพาการตดตง plug-in เชน Flash*

รองรบการทางานทกระบบปฎบตการ เชน วนโดวส , แมค , ลนกซ,ยนกซ และอนๆ

รองรบหลายอปกรณ เชน สมารททว, คอมพวเตอร, โนตบค, แทบเลต, สมารทโฟน เปนตน

HTML คอ รปแบบเอกสารทสามารถแสดงขอมลตวอกษร รปภาพ เสยง วดโอ ผานการเปด

โปรแกรมทเรยกวา Browser

Rich Content เปนเนอหาบนเวบทสามารถแสดงผลและทางานไดเหมอนแอพพลเคชนบนระบบ

ปฎบตการ ซงสามารถแสดงผลไดอยางตอเนอง ตวอยางของเอกสารทไมไดแสดงผลแบบ Rich ใน

HTML แบบเดม เชน เมอมการกรอกระบบแบบสอบถามและทาการกดปมยนยน เราจะเหนหนา

เอกสารของเรามการ refresh และขอมลบนหนาจอหายและกลบมาใหมเหมอนกดปม F5

Flash เปนรปแบบเอกสารแบบ Rich ของบรษท Adobe ซงโดงดงมากทสามารถแสดง Animation

และเกมสบนเวบไดอยางไมสะดด แตจาเปนตองตดตง plug-in ของ Flash ลงทเครองจงจะสามารถ

แสดงผลได ซงปจจบน Adobe ไมพฒนาตอแลวหนไปพฒนา HTML5


มอะไรใหมใน HTML5

Elements ใหม

Attributes ใหม

รองรบ CSS3* เตมรปแบบ

รองรบไฟล Video และ Audio

รองรบกราฟฟค 2Dและ3D

รองรบการเกบขอมลทเครอง

รองรบฐานขอมลWeb SQL * บนเครอง

ฟงกชนใหมๆ สาหรบพฒนาเวบแอพพลเคชน

http://www.w3.org/2011/11/mobile-web-app-state.html

(Cascading Style Sheets:CSS) เปนภาษาสไตลชตใชในการจดรปแบบของเอกสารท

เขยนในภาษามารกอป การจดรปแบบเอกสาร เชน ขนาดตวอกษร รปแบบตวหนาตว

เอยง ตาแหนง ส ของคอนโทรลตางๆ เปนตน

Web SQL ในHTML5 นนไดถกยกเลกไปแลว แตฟงกชนนยงตดมากบ Browser ซง

สามารถเขยนชดคาสง SQL สรางตาราง เกบขอมลและคนหาไดเหมอน SQL ทวๆไป แต

ไมแนะนาใหใชเนองจาก W3C ยกเลกไปแลวอกทงเมอทาการ refresh หนาเวบแลว

ตารางตางๆทเราสรางไวจะหายไป

ปญหาทพบใน Internet Explorer 8 และ Browserเกา

สาหรบ Internet Explorer เวอรชน8 และ Browser เวอรชนเกาจะไมรองรบ Elements ใหมๆ ของ

HTML5 เชน <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure> แนวทางใน

การแกไขสามารถดาวโหลด HTML5 Shiv ไดท http://code.google.com/p/html5shiv/ จากนน

เพมโคดในเอกสาร HTML ดงน

ตวอยาง



เรมตนกบ HTML

HTML5 เปนความรวมมอระหวาง World Wide Web Consortium (W3C) และ Web Hypertext

Application Technology Working Group (WHATWG) สรางมาตรฐานและกฎตางๆสาหรบ

HTML ดงน

คณสมบตใหมๆ จะตองอยภายใต HTML, CSS, DOM และ JavaScript

หลกเลยงการใช plugin เชน Flash

การหาขอผดพลาดตางๆจะตองงายกวาเวอรชนกอน

สครปตจะตองไมมาแทนทมารคอพ

HTML5 ตองไมยดตดกบอปกรณใดอปกรณหนง

กระบวนการพฒนาทกคนสามารถเหนไดไมมการซอนเรน

การประกาศเอกสาร HTML5 ประกาศเพยงสนๆ ดงน

ตวอยาง

<<!!DDOOCCTTYYPPEE hhttmmll>>

http://code.google.com/p/html5shiv/


มารคอพเบองตนสาหรบเอกสาร HTML5

ตวอยางท 1.1 มารคอพเบองตนสาหรบเอกสาร HTML5

<<!!DDOOCCTTYYPPEE hhttmmll>>

<<hhttmmll>>

<<hheeaadd>>

<<mmeettaa cchhaarrsseett==""UUTTFF--88"">>

<<ttiittllee>>ตวอยางเอกสาร ตวอยางเอกสาร HHTTMMLL55<<//ttiittllee>>

<<//hheeaadd>>

<<bbooddyy>>

เนอหาเอกสาร เนอหาเอกสาร HHTTMMLL ..........

<<//bbooddyy>>

<<//hhttmmll>>

คณสมบตใหมๆ

ccaannvvaass((แคนวาสแคนวาส)) eelleemmeenntt สาหรบวาดรป สาหรบวาดรป 22DD vviiddeeoo และ และ aauuddiioo eelleemmeenntt สาหรสาหรบเลนวดโอและเสยงบเลนวดโอและเสยง รองรบการจดเกบขอมลทเครองรองรบการจดเกบขอมลทเครอง รปแบบการจดเคาโครงเอกสารใหม เชน รปแบบการจดเคาโครงเอกสารใหม เชน aarrttiiccllee,, ffooootteerr,, hheeaaddeerr,, nnaavv,, sseeccttiioonn

คอนโทรลใหมสาหรบฟอรม เชน คอนโทรลใหมสาหรบฟอรม เชน ccaalleennddaarr,, ddaattee,, ttiimmee,, eemmaaiill,, uurrll,, sseeaarrcchh


BBrroowwsseerr ทรองรบ ทรองรบ HHTTMMLL55

BBrroowwsseerr ยอดนยม ยอดนยม ((CChhrroommee,, FFiirreeffooxx,, IInntteerrnneett EExxpplloorreerr,, SSaaffaarrii,, OOppeerraa)) ลวนรองรบ ลวนรองรบ HHTTMMLL55

eelleemmeennttss และ และ AAPPIIss อกทงยงไมหยดพฒนา อกทงยงไมหยดพฒนา FFeeaattuurree ตางๆของ ตางๆของ HHTTMMLL55 ในเวอรชนใหมของแตในเวอรชนใหมของแต

ละ ละ BBrroowwsseerr ซงกลมผพฒนาซงกลมผพฒนาHHTTMMLL55 ไดรบความรวมมอจากทงองคกรและภาคเอกชนหลายกลมไดรบความรวมมอจากทงองคกรและภาคเอกชนหลายกลม

ดวยกน ไดแก ดวยกน ไดแก AAOOLL,, AAppppllee}} GGooooggllee,, IIBBMM,, MMiiccrroossoofftt,, MMoozziill llaa,, NNookkiiaa,, OOppeerraa และกลมอนๆอกและกลมอนๆอก

มากกวารอยราย มากกวารอยราย


EElleemmeennttss ใหมใหม

EElleemmeennttss ใหมๆ ทถกสรางขนใน ใหมๆ ทถกสรางขนใน HHTTMMLL55 มดงนมดงน

กลม Element แทก รายละเอยด

MMeeddiiaa <<ccaannvvaass>> แสดงภาพวาดโดยการใชคาสงจากจาวาสครปตแสดงภาพวาดโดยการใชคาสงจากจาวาสครปต

<<aauuddiioo>> กาหนดเสยงหรอเพลงกาหนดเสยงหรอเพลง

<<vviiddeeoo>> แสดงคลปหรอภาพยนตรแสดงคลปหรอภาพยนตร

<<ssoouurrccee>> กาหนด กาหนด ssoouurrccee แหลงทมาขอแหลงทมาของ ง <<vviiddeeoo>> และ และ

<<aauuddiioo>>

<<ttrraacckk>> กาหนด กาหนด ttrraacckk ของ ของ <<vviiddeeoo>> และ และ <<aauuddiioo>>

<<eemmbbeedd>> กาหนดเนอหาจากโปรแกรมภายนอก เชน กาหนดเนอหาจากโปรแกรมภายนอก เชน pplluuggiinn

FFoorrmm <<ddaattaalliisstt>> คอนโทรลแสดงรายการขอมลคลายคลงกบ คอนโทรลแสดงรายการขอมลคลายคลงกบ sseelleecctt

แตสามารถพอพมพคนหาขอมลในลสตรายการไดแตสามารถพอพมพคนหาขอมลในลสตรายการได <<kkeeyyggeenn>> กาหนดคาคยเขารหส ใกาหนดคาคยเขารหส ใชรวมกบฟอรมชรวมกบฟอรม

<<oouuttppuutt>> แสดงผลลพธการคานวณแสดงผลลพธการคานวณ

SSeemmaannttiicc//SSttrruuccttuurraall <<hheeaaddeerr>> กาหนดหวเอกสารกาหนดหวเอกสาร

<<nnaavv>> กาหนดลงคเชอมโยงภายในเอกสารกาหนดลงคเชอมโยงภายในเอกสาร

<<sseeccttiioonn>> กาหนดสวนเอกสารกาหนดสวนเอกสาร

<<mmaaiinn>> กาหนดเนอหาหลกเอกสารกาหนดเนอหาหลกเอกสาร

<<aarrttiiccllee>> กาหนดหวเรองในเอกสารกาหนดหวเรองในเอกสาร

<<aassiiddee>> กาหนดเนอหาดานขางเกาหนดเนอหาดานขางเอกสารอกสาร

<<ffooootteerr>> กาหนดสวนทายเอกสารกาหนดสวนทายเอกสาร

<<ddeettaaiillss>> กาหนดรายละเอยดเพมเตมวาผใชสามารถเหนกาหนดรายละเอยดเพมเตมวาผใชสามารถเหนหรอซอนไวหรอซอนไว

<<ssuummmmaarryy>> กาหนดการแสดงสวนหวสาหรบ กาหนดการแสดงสวนหวสาหรบ ddeettaaiillss eelleemmeenntt

<<ffiigguurree>> กาหนดเนอหาทแสดงรปภาพ กาหนดเนอหาทแสดงรปภาพ ,,ไดอะแกรม หรอไดอะแกรม หรอรายการโคดตางๆรายการโคดตางๆ

<<ffiiggccaappttiioonn>> กาหนดหวเรองสากาหนดหวเรองสาหรบ หรบ <<ffiigguurree>> eelleemmeenntt

<<mmaarrkk>> กาหนดการมารคหรอไฮไลทตวอกาหนดการมารคหรอไฮไลทตวอกษรกษร

<<ttiimmee>> กาหนดวนเวลากาหนดวนเวลา

<<bbddii>> กาหนดสวนของขอความซงอาจมรปแบบตางกนกาหนดสวนของขอความซงอาจมรปแบบตางกน

จากขอความภายนอก จากขอความภายนอก ?? <<wwbbrr>> กาหนดบรรทดหยด กาหนดบรรทดหยด ??

<<ddiiaalloogg>> กาหนดไดอะลอกบลอคหรอหนาตางกาหนดไดอะลอกบลอคหรอหนาตาง

<<ccoommmmaanndd>> กาหนดปกาหนดปมคาสงซงผมคาสงซงผใชสามารถสงงานไดใชสามารถสงงานได

<<mmeetteerr>> กาหนดชวงคาสาหรบใชในการวดผลกาหนดชวงคาสาหรบใชในการวดผล

<<pprrooggrreessss>> กาหนดการแสดงความกาวหนาของงานกาหนดการแสดงความกาวหนาของงาน


Elements ทถกยกเลก

HTML5 ยกเลก Elements ในเวอรชน 4.01 ดงตอไปน

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>,

<noframes>, <strike>, <tt>

(อานตอฉบบหนา กบ ตอนท2 Semantic Elements)

กลม Element แทก รายละเอยด

SSeemmaannttiicc//SSttrruuccttuurraall <<rruubbyy>> แสดงคาประกาศแสดงคาประกาศ((สาหรบภาษาของเอสาหรบภาษาของเอเชยเชย

ตะวนออกตะวนออก))

<<rrtt>> ใชรวมกบ ใชรวมกบ rruubbyy แสดงคาอธบาย แสดงคาอธบาย ((สาหรบภาษาสาหรบภาษา

เอเชยตะวนออกเอเชยตะวนออก))

<<rrpp>> กาหนดการแสดงคาอธบายคาประกาศสาหรบ กาหนดการแสดงคาอธบายคาประกาศสาหรบ

BBrroowwsseerr เกาทไมรองรบ เกาทไมรองรบ rruubbyy eelleemmeennyy


กงแมนาตวใหญหลงวดพนญเชง

หยดเสารอาทตยใครอยากจะหนบรรยากาศเมองกรงรถตดคนชม ขอแนะนารานอาหารรมนาบรรยากาศดเมอ

คนดศรอยธยา หลงจากแวะไหวพระ 9 วดเสรจ ลองมาชมกงแมนาตวใหญหลงวดพนญเชง

ขอแนะนารานครวยาบว

รบรองรสชาตไมผดหวง เมนแนะนากงแมนาส ดเรด

Sweet Cafe เดอะงามวงศวาน

หากคณกาลงมองหาทนงทางานบรรยากาศด เพอพบปะสงสรรค ทางานพรอมฟร WiFi ดมกาแฟ กนของวาง

อรอยๆ ขอแนะนา Sweet Cafe ใกลๆ เดอะงามวงศวาน


พฒนาซอฟทแวรดวย Open Source

ตอนท1 เรมตนกบ NodeJS โดย จารยปบ

บทความนมวตถประสงคนาเสนอการประยกตใช Opensource ในการนามาพฒนาแอพพลเคชน ซงในปจจบน

Opensource เตบโตขนมากและเปนขมกาลงเทคโนโลยทเปนตนแบบในการนาไปใชในสถานศกษา องคกรท

เรมธรกจ หรอแมกระทงองคกรใหญ บรษทใหญๆทเปนผนาในโลกออนไลนลวนแลวแตใช Opensource เปน

หลกในการตอยอดธรกจของตน ผมเองกเปนนกพฒนาคนหนงทเรมตนดวยการพฒนาซอฟทแวรและ

เทคโนโลยของคายยกษใหญคายหนงเปนหลกโดยแรกเรมยงไมเชอขมกาลงของ Opensource มากนก แต

ในชวงสองปทผานมาไดมโอกาสจบ Opensource มากขน และเกดหลงไหลและมนใจในศกยภาพของ

Opensource อกทงไดผานประสบการณการใชงาน พฒนาซอฟทแวรทมราคาแพงมามากมาย ทาใหมนใจไดวา

เทคโนโลยปจจบนนไมวาจะเสยเงนหรอฟร ศกยภาพกไมไดตางกนมากนก ขนอยกบคณสมบตของซอฟทแวร

และความสามารถผพฒนา ผดแลระบบดวย เพราะทกวนนความรสามารถหาไดจากอนเตอรเนตอยางงายดาย

กวาเมอหลายปกอนมาก บทความนจะนาเสนอการประยกตใช Opensource ในการพฒนาซอฟทแวร ระบบ

CMS (Content Management System) เรยกไดวาฟรทง Solution โดยเทคโนโลยทใชม ดงน

HTML5, CSS3 , JavaScript ,Bootstrap , Jquery , RequireJS , UnderScoreJS ,AngularJS , NodeJS และ

OrientDB

ซงเทคโนโลยตวแรกทจะตองเตรยมเรมจาก NodeJS เขาไปดาวโหลดท www.nodejs.org


NodeJS คออะไร ?

NodeJS คอ Server Side แอพพลเคชนเหมอนกบ Apache http, IIS, Glassfish , Jboss, Websphere

หรอเรยกกนตดปากกคอ Middleware ซงจะเปนซอฟทแวรตวกลางในการจด Request จากฝง Client

มายงซอฟทแวรทอยบน Server นนและเปนตวกลางในการ Response กลบไป NodeJS นนใช

เทคโนโลยทชอวา Non-Blocking I/O ซงแตกตางกบ Middleware ตวอน นอกจากนนยงมคณสมบต

ตางๆ ดงน

Single Thread Application

พฒนาดวย JavaScript V8 Engine

ทางานแบบ Event Loops

Non Blocking I/O

หากเปรยบ Blocking I/O กบธรกจหรอวถการดารงชวต ณ ปจจบน หลกการของมนก

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

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

เปรยบกบเวบเทคโนโลย การทางานแบบ Blocking I/O เมอม request ลาดบท 1 มาจากฝงลก

ขายเขามา เครองแมขายจะทาการ Block Resources เชน Network Traffic , Memory , Disk

จนกวาจะทางานตามลาดบเสรจกอนจงจะสามารถรบควถดไปได

Non-Blocking I/O ในชวตประจาวนกเปรยบเสมอนการบรหารจดการควทด เมอลกคาเขามาใช

บรการกจะมการใหบตรคว ซงทาใหสามารถรองรบลกคาหลายๆรายเขามาใชบรการโดยทยงไม

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

จานวนมาก เมอรบ Order มาหลายๆOrder Chief จะทาการจดลาดบอาหารทเหมอนๆกนและทา

ครงเดยว กจะทาใหเสรจเรวขน ในสวนของเทคโนโลยไมวาจะเปน Middleware หรอ Database

หลายๆตวกจะมในสวนของ Cache หรอ Global Memory ทคอยพกขอมลหรอ ผลลพธไวชวคราว

เมอม Request เดมๆเขามากจะไปดใน Cache หรอ Global Memory กอน ทาใหตอบสนองได

ทนทในชวงเวลาท Request รองขอเขาตรงกบความตองการทมอยใน Global Memory


รน NodeJS

เมอดาวนโหลด NodeJS มาไวทเครองแลวไมวาบนระบบปฏบตการวนโดวส ยนกส ลนกซ เมอ

เขยนโปรแกรมกสามารถรนใชงานไดทนท เขยนโปรแกรมเพอรนแอพพลเคชนได สรางไฟลชอ

web-server.js เขยนชดคาสง ดงน

ตวอยางท 1.1 รน NodeJS

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello World\n');

}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

รน Command Line ดงน

node web-server.js

เมอรนคาสงจะพบวา มขอความบอกท หนาจอ Console วา Server running at http://127.0.0.1:1337

ใหเปด Browser แลวพมพ URL ดงกลาว จะพบวา มการแสดงขอความ Hello World

* การรนคาสง node เพอความสะดวกควรสราง Environment Variable อาง path/bin ทวาง nodejs ไว เพอให

สามารถอางไดโดยไมตองระบ path


อธบายชดคาสง

คาสง คาอธบาย

var http = require('http'); ประกาศตวแปร http ใหเปน http module ซงเปน library ทมากบ nodejs อย

แลว ซงใชสาหรบทางานและจดการเกยวกบ http server

http.createServer(function

(req, res) {

}).listen(1337, '127.0.0.1');

สราง http server ท port 1337 การอางถง port สามารถอางเลขอะไรกไดทยง

ไมถกเปดใชในเครอง

* ในการใชงานจรงควรพจารณาถง access point สาหรบเชอมตอดวย เพราะ

ผมเคย access point รนเกาสามารถเหน port ไมเกน 9999

* '127.0.0.1' คอเครอง local ทใชเปน server ในขณะพฒนาแอพพลเคชนก

หมายถงเครองเรานนเอง

res.writeHead(200, {'Content-

Type': 'text/plain'});

res.end('Hello World\n');

เมอมการรองขอจากเครองลกขายโดยการเขา Browser และเรยก url:port ท

เปด กจะทาการสงขอความตอบกลบ คอ Hello World

console.log('Server running

at http://127.0.0.1:1337/');

แสดงขอความบนหนาจอ console ตามทระบ console.log(“ขอความ”);

(อานตอฉบบหนา ตอนท 2 NodeJS express , connect , RequireJS)


ชวงนอากาศแปรปรวนรอนๆสลบฝนหลายคนอาจหนบรรยากาศรถตดความวนวายในเมอง ไปเทยวทะเล แต

หากลองแวะขนเหนอไมไกลจากกรงเทพฯมากลองไปเทยวเพชบรณ ขนเขาซงหากไปชวงนคนจะไมเยอะเทา

ชวงปลายฝนตนหนาว ลองไปไหวพระบรมสารรกธาตทวดพระธาตผาซอนแกว อ.เขาคอ จงหวด เพชรบรณ

การเดนทาง

ระยะทางจากกรงเทพมหานคร ประมาณ 415 กม.

จากกรงเทพฯ ใชเสนทางผานจงหวดสระบร และใชเสนทาง

หมายเลข 21 สระบร ลพบร เพชรบรณ

เมอผานตวเมองจงหวดเพชรบรณมาสกระยะ จนใกลหลกกโลเมตร

ท 260 ใหสงเกตอนสาวรยพอขนผาเมองทางซายมอ และเลยวซาย

เขาทางหลวงหมายเลข 12 หลมสก พษณโลก

ขบตอไปยงทางหลวงหมายเลข 12 ประมาณ 30 นาท หลก

กโลเมตรท 103 มจดสงเกตคอ อบต.แคมปสนอยทางขวามอ และธนาคารกสกรไทย เยองขนไปทางซาย

มอ ตรงไปกลบรถ และจะเหนปาย พทธธรรมสถานผาซอนแกว อยปากซอยทางเขา หมบานทางแดง ซงอย

ดานขาง อบต.แคมปสน เลยวซายเขาไป ตรงตลอดจนเหนสะพานทางเขาวด เลยวขวาขามสะพานและจอด

รถ ณ บรเวณทจดไว


CSS3 ตอนท1 เรมตนกบ CSS โดย จารยปบ

พลาดไมไดเดดขาดสาหรบนกพฒนาเวบ CSS3 (Cascading Style Sheets) เปนภาษาทใชสาหรบจดรปแบบเลย

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

ความสามารถในการออกแบบรวมถงความรความเขาใจในการใชภาษา CSS นหละ

CSS Syntax

Selector คอ Element ในเอกสาร HTML ทคณตองการกาหนดรปแบบสามารถระบถง Element ได 4 รปแบบคอ

ประเภทSelector ความหมาย ตวอยาง

Element อางถง Element ในเอกสาร HTML ซงจะสงผล

ถง Element นนทงเอกสาร Element ในเอกสาร

ไดแก input , label , div ,p , h1, h2 , h3

,<span> เปนตน

label {font-weight:bold;color:orange}

id การอางถง id ของคอนโทรลในเอกสาร HTML

ซงจะสงผลเฉพาะเจาะจงไปท id ทระบใน

คอนโทรลเทานน การระบตองใสเครองหมาย

#(ชารป) นาหนาชอ id

#txtNumber {text-align:center}

ในเอกสาร HTML

<input type='text' id=”txtNumber” />

class การกาหนดชอ class เพอเรยกใชภายหลงใน

เอกสาร HTML การกาหนดคลาสจะตองขนตน

ดวย . (ดอท) ตามดวยชอคลาส การตงชอใชกฎ

เหมอนภาษาโปรแกรมมงทวๆไปคอตองไมตรง

คาสงวนและตองไมขนตนดวยตวเลข

.topicHeader {font-size:xx-large;font-

family:verdana}

ในเอกสาร HTML

<label class=”topicHeader” />

group

สามารถอางถง element หรอ id ไดหลายอนใน

ครงเดยวโดยขนดวยเครองหมาย , (คอมมา)

h1,h2,p

{

text-align:center;

color:red;

}


การเขยนคอมเมนท

การเขยนคอมเมนท เหมอนกบภาษาโปรแกรมมงทวไป นยมเขยนคาอธบายของโคดและ Disable โคดเดม

ไวกอนเผออนาคตอาจมการนากลบมาใชงาน การเขยนคอมเมนททาไดโดย ใสเครองหมาย /*สวนท

ตองการคอมเมนท */ ภายในสวนทตองการ

ตวอยาง

/*This is a multiple

lines comment*/

p

{

Color:red;

/*This is another comment*/

Text-aling:center;

}

การเรยก CSSใชงาน

CSS สามารถเขยนในและนอกเอกสาร HTML ได การเรยกใชงานจะใส tag <link> ในเอกสาร HTML เพอ

ความเปนระเบยบควรแยกชดคาสงของภาษา CSS ไวอกไฟล

ขนตอนการดาเนนการ มดงน

1. สรางไฟลสาหรบกาหนดรปแบบดวยภาษา CSS ชอ example1_1.css

2. กาหนดโคดในไฟล example1_1.css ตามตาราง ดงน

ตวอยางท 1.1

body {background-color: black;}

p {color: white;font-family: verdana;font-size: xx-large}


3. สรางเอกสาร HTML ชอ example1_1.html กาหนดโคด ดงน

โคดในเอกสาร HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="../../../styles/css/example1_1.css">

<meta charset="UTF-8">

<title>ตวอยางท 1.1 CSS</title>

</head>

<body>

<p>ทดสอบ CSS</p>

</body>

</html>

2. ลองรนเอกสาร HTML

พนเอกสารเปนสดา และตวอกษรในพารากราฟเปนสขาวเนองจากกาหนดรปแบบไวในภาษา CSS

อางถงไฟล css จากภายนอก


CSS Background

การกาหนดพนหลงใหกบเอกสาร HTML นนสามารถคณสมบตได ดงน

background-color : กาหนดสพนหลงของเอกสาร

background-image : กาหนดพนหลงเอกสารดวยรปภาพ

background-repeat : กาหนดพนหลงซาๆสาหรบรปภาพทมขนาดเลกกวาพนทเอกสาร

background-attachment : กาหนดรปแบบการผกตดของพนหลงวาจะมการปรบขนาดหรอ

ตาแหนงเมอขนาดเอกสารมการเปลยนแปลงหรอไม

background-position : กาหนดตาแหนงของพนหลง

Background-color : การกาหนดสพนหลง

การกาหนดคาสพนหลงสามารถกาหนดได 3 รปแบบ คอ

กาหนดสดวยเลขฐาน 16 เชน "#ff0000”

กาหนดสดวยฟงกชน rgb เชน "rgb(255,0,0)”

กาหนดสดวยชอส เชน "green”

* สาหรบ เลขฐาน 16 ใครทไมไดเรยนวชา Digital หรอคอมพวเตอรมา สามารถใชเครองคดเลขใน PC หาได

ซงเลขฐานทเราใชทวไป คอเลขฐานสบ 0-9 , เลขฐาน16 ม 0-9 และ A-F

สาหรบฟงกชน rgb จะเปนการผสมคาส rแดง, g เขยว ,b นาเงน โดยคาทผสมจะระบไดตงแต 0-255

เลอกโหมดเปน Programmer

จากนนพมพเลขฐานสบทตองการทราบ

วาเปนเลขฐาน16 คออะไร จากนนกดปม 16


ตวอยางท 1.2 กาหนดคาสพนหลง

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

โคดใน HTML

โคดใน HTML

<h1>ทดสอบสพนหลง </h1>

<p>ทดสอบ สพนหลง</p>

<div style="width:50px;height:50px" />

ผลลพธ


background-image: กาหนดสพนหลงดวยรปภาพ

การกาหนด background-image สามารถกาหนดได ดงน

ตวอยางท 1.3 กาหนดพนหลงดวยรปภาพ

body {background-image:url("../../images/angularlogo.jpg");}

ผลลพธ

../../คอการอางถงระดบของ Folder ทเกบไฟลในกรณทไฟล HTML แยก path ทเกบออกจากไฟลท

เรยกใชซงในการพฒนาแอพพลเคชนใหญๆนยมจดเปนหมวดหมใหเปนระเบยบ ในตวอยางนไฟลทใช

แสดงคอ example1_3.html ซงอยภายใต path views/CSS3/chapter1 ซงการจะอางถง path images

นนอยระดบเดยวกบ path views ซงจะตองถอยไปอก 2 ลาดบชนจงตองอาง path โดยเรยก ../../

นาหนา images/angularlogo.jpg จงจะมองเหนไฟลรปนน

จากผลลพธจะเหนไดวาการแสดงภาพซาจะกาหนดใหอตโนมตทงแนวตงแนวนอน


การกาหนดแสดงภาพซาเฉพาะแนวนอนหรอแนวตงทาไดโดย

หากตองการใหแสดงซาแนวนอน ใช background-repeat:repeat-x;

หากตองการใหแสดงซาแนวตง ใช background-repeat:repeat-y;

หากไมตองการใหแสดงซาใช background-repeat:no-repeat;

background-position การกาหนดตาแหนงพนหลง

การกาหนดตาแหนงพนหลงสามารถระบคา ไดดงน

top : ดานบน

center : กงกลาง

left : ซาย

right : ขวา

bottom : ลาง

ตวอยาง กาหนดใหพนหลงอยมมบนขวา

body {

background-image:url("../../images/angularlogo.jpg");

background-repeat:no-repeat;

background-position:top right;

}

ตวอยาง

body {

background-image:url("../../images/angularlogo.jpg");

background-repeat:repeat-x;

}


Background-attachment การกาหนดการยดตดพนหลง

เมอเอกสารมเนอทเกนขอบเขตหนาจอทสามารถมองเหนได จะกาหนดให background อยกบท

หรอเคลอนทตามไปยงตาแหนงของ scrollbar ทเลอนไปหรอไม

ตวอยางท 1.4 การกาหนดการยดตดพนหลง

HTML Code

<div id="box"></div>

CSS Code

body {background-image:url("../../images/angularlogo.jpg");

background-repeat:no-repeat;

background-attachment:fixed;

}

#box{margin-top:200px;width:500px; height: 1500px; background-color: yellow}

ผลลพธ


background-attachment:fixed; กาหนดให fixed ตาแหนงไวทาใหแมเอกสารแมมขนาดลนหนาจอ ภาพพน

หลงอยตาแหนงเดมแมมการเลอนของ scrollbar แตถาไมมการกาหนดคณสมบตนเมอเอกสารมขนาดยาวจน

ตองเลอน scrollbar ลง background กจะเลอนลงตามไปดวย

การกาหนดคณสมบต background-attachment มดงน

คณสมบต ความหมาย

scroll พนหลงจะเลอนตาม scroll bar เปนคาพนฐานอยแลวหากไมกาหนด

fixed พนหลงจะยดตามตาแหนงทกาหนดไมเลอนตาม scroll bar

local มคณสมบตเหมอน fixed แตใชกบ background ในระดบ element ภายใน

content สวนใดสวนหนง

initial กาหนดเปนคาเรมตน สาหรบแตละ element จะมคาเรมตนไมเหมอนกน

inherit สบทอดคณสมบตจาก element แม หากมการกาหนดคณสมบต

background-attachment ใน element แม element ทอยภายในจะสบทอด

ตาม

(อานตอฉบบหนา กบ ตอนท2 CSS Text)


JavaScript

ตอนท1 เรมตนกบ JavaScript โดย จารยปบ

จาวาสครปต เปนหนงใน 3 ภาษามาตรฐานในการพฒนาเวบแอพพลเคชน สาหรบจาวาสครปตนนใชสาหรบ

สรางชดคาสงเพอคอนโทรลลาดบขนการทางานของเวบไซตตามความตองการของผพฒนา

JavaScript คออะไร ?

JavaScript เปนภาษาสาหรบเขยนโปรแกรมบนเวบ

HTML รองรบชดคาสงจาก JavaScript

JavaScript เปนภาษามาตรฐานทรองรบการทางานบนอปกรณ PC , Notebook, Smart phone

, Tablet

Browser รนใหมลวนรองรบ JavaScript

เปนภาษาทใชทรพยากร เชน CPU , Memory บนเครองผใชงานเปนหลก ททางานไดอยาง

รวดเรว

เหตผลทตองศกษา JavaScript

JavaScript เปน 1 ใน 3 ภาษามาตรฐานของนกพฒนาเวบแอพพลชนตองศกษา (HTML, CSS

และ JavaScript)

ยค Social Network มอทธพลตอวถชวตของคนในสงคมในทกๆสาขาอาชพ ทาใหผสนใจพฒนา

เวบตองใหความสนใจ

3 ภาษาแหงยค HTML5

HTML5 : สรางเนอหาของเวบแอพพลเคชน

CSS3 : ตกแตงรปแบบความสวยงามของเนอหา

JavaScript : ควบคมการทางานของเวบแอพพลชน

การเรยกใช JavaScript

การเรยกใชจาวาสรปตสามารถเขยนภายในเอกสาร HTML หรอแยกไฟลไวภายนอก โดยการแทรก

<script> Element ในเอกสาร HTML


ตวอยางท 1.1 การเรยกใช JavaScript

HTML Code

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>ตวอยางท 1.1 เรยกใชงาน JavaScript</title>

</head>

<script>

function internalShow(){

document.getElementById('lblShow').innerText ="JavaScript ภายใน HTML";

}

</script>

<script src="../../../scripts/javaScripts/chapter1/example1_1.js"></script><body>

<label id="lblShow"> </label>

<button onclick='internalShow()'> Internal</button> <button onclick='externalShow()'>External</button>

</body>

</html>

JavaScript external file Code

function externalShow()

{

document.getElementById('lblShow').innerText ="JavaScript ภายนอก HTML";

}


ในเอกสาร HTML มคอนโทรล label id=”lblShow” ตองการเขยนชดคาสงเพอแสดงขอความภายใน

label โดยจะทางานกตอเมอมการกดปม ปมแรกจะเรยกใชงานคาสง internalShow อกปมจะเรยกใชงาน

คาสง externalShow โดยชดคาสงจะทางานเมอกดปม ใน attributes onclick จะมการระบชอคาสงท

ตองการรปแบบการระบ ใชชอคาสงพรอม () เชน externalShow() ในวงเลบจะเปนการระบ

คาพารามเตอร ซงในตวอยางนยงไมม

ฟงกชน internalShow เขยนชดคาสงไวภายในเอกสาร HTML ภายใน แทก <script>

document.getElementById('lblShow') เปนการคนหา Element ทมคา id คอ lblShow

.innerText คณสมบตของขอความภายใน Element

การกาหนดคาใหคณสมบตตางๆใน JavaScript หรอการเขยนโปรแกรมหลายๆภาษา ทาไดโดย ใส

เครองหมาย เทากบ (=) คาทระบจะอยดานขวามอ

object.property = value;

document.getElementById('lblShow')object.innerTextproperty ="JavaScript ภายใน HTML"value;

ฟงกชน externalShow มการทางานเหมอนกบ internalShow เพยงแตมการอางถงจาก source

ภายนอกเอกสาร HTML

<script src="../../../scripts/javaScripts/chapter1/example1_1.js"></script>

JavaScript ควรวางไวสวนใดของเอกสาร

JavaScript สามารรถวางไดทกสวนของเอกสาร HTML และไมจากดจานวน

วางไดทงสวน <head> , <body> ,ใน Content หรอทายเอกสาร

การวางไวสวนทายเอกสารจะใชใหลดระยะเวลาในการแสดงผลเอกสารลง แตขนอยกบวา

JavaScript ทเรยกใชนนจะเรมใชตงแตโหลดเอกสารหรอไม

ไมวาจะวางไวสวนใดของเอกสารกตาม ในการพฒนาควรแยกไฟลไวภายนอกเอกสารเพอความ

งายในการจดการและมระเบยบ


การ Debug JavaScript

การ Debug คอ การตรวจสอบการทางานของชดคาสงซงสาคญมากในการพฒนาโปรแกรม ใน Browser

รนใหมสามารถใชคาสง console.log หรอ Debugger tool ทมาพรอมกบ Browser ไดเลย

ตวอยางท 1.2 Debug JavaScript ดวย console.log

HTML Code

<button onclick='sum(9,15)'> Execute</button>

JavaScript Code

function sum(a,b)

{

var result = a+b;

console.log(result);

}

เมอกดปม Execute

สาหรบ Browser Chrome เลอก View> Developer>Developer Tools (Window กด F12 , Mac alt +

command + I)

เมอกดป ม Execute โปรแกรมจะแสดง

ผลลพธของ 9 + 15 = 24

ในหนา console


สาหรบ Firefox เขาเมน Tools>Web Devloper > Web Console

การ Debug ดวย Debugger Tools

Browser รนใหมๆ จะม Debugger Tools ตดมาในสวนของ Developer Tool ดวย สาหรบ

Chrome เขาเมน Source เลอกไฟลทตองการทาการ Debug

นาเมาสคลกทบรรทดท

ตองการตรวจสอบ


ทาการกดปม Execute โปรแกรมจะหยดทางานทบรรทดท 3

Debugger tools สามารถแสดงคาตวแปรทถกกาหนดคาไว หากตองการใหโปรแกรมทางาน

ยงบรรทดตอไปใหกดปม F11 (สาหรบ window)

ปมควบคมของ Debugger Tools จะอยดานขวา

(อานตอฉบบหนา ตอนท 2 JavaScript Syntax)


ใครทชอบเทยวหวหน ไปเปนครอบครวหรอหมคณะ

และกาลงมองหาทพกในบรรยากาศหรๆ แตราคาเปน

กนเองทอาเภอปรานบร ขอแนะนาบานปรญดา

รบรองไมผดหวง


ภาพบรรยากาศควนหลงงาน Big Data กบ Java Technology ท Hubba เมอวนท 2 มค. 2557 ได

นาเสนอเทคโนโลยฐานขอมลแบบกราฟทสามารถเกบขอมลระดบหมนลาน Record ไดอยางสบายและยงใช

ทรพยากรเครองนอยมาก ซงบนมาบรรยายจากผสราง Luca Garulli ชาวอตาล ซงเหมาะกบชวงคานยม Big

Data ทมการกลาวถงอยางมากไปชวงปสองปทผานมา สาหรบเทคโนโลยฐานขอมลแบบกราฟ OrientDB

สามารถเขาไปศกษาไดท www.orientdb.org ทมงานทกทานขอขอบพระคณ Hubba เปนอยางสง ผใหการ

สนบสนนใหใชสถานทฟรโดยไมคดคาใชจาย


สนใจลงโฆษณาหรอเขยนคอลมภ

ตดตอ facebook : [email protected]

twitter : @apaichon_p

ขาเดฟ khadev vol 1

Documents