JavaScript - Kontentblue Pub · นั่นเอง และเรามักเรียกกันว่า Client-side JavaScript Client-side JavaScript คือผลจากการรวมกันของภาษา

JavaScriptProgramming Guide

สมบรณ พฒนธรพงศ

www.kontentbluepub.com

JavaScript Programming Guide

โดย สมบรณ พฒนธรพงศราคา : 250 บาท

พมพครงท 1 : ธนวาคม 2554

ขอมลทางบรรณานกรมของสำานกหอสมดแหงชาต

สมบรณ พฒนธรพงศ JavaScript Programming Guide.--กรงเทพฯ : คอนเทนตบล, 2554. 280 หนา. 1. จาวาสครปต (ภาษาคอมพวเตอร). I. ชอเรอง.005.133ISBN 978-616-91030-0-4

จดทำาโดย : คอนเทนตบล พบลชชงเลขท 608/53-55 ถนนสาธประดษฐ แขวงบางโพงพางเขตยานนาวา กรงเทพฯ 10120โทรศพท 0-2294-1663http://www.kontentbluepub.com

พมพท : บรษท เอน. วาย. ฟลม จำากดเลขท 3 ซอยราชพฤกษ 4 ถนนราชพฤกษ แขวงบางจาก เขตภาษเจรญ กรงเทพฯ 10160โทรศพท 0-2457-2596-7 โทรสาร 0-2868-6062http://www.nydigitalprint.net

จดจำาหนายโดย : บรษท ซเอดยเคชน จำากด (มหาชน)อาคารเนชนทาวเวอร ชนท 19 เลขท 1858/87-90 ถนนบางนา-ตราด แขวงบางนา เขตบางนา กรงเทพฯ 10260โทรศพท 0-2739-8222, 0-2739-8000 โทรสาร 0-2739-8356-9http://www.se-ed.com

บทท 1

แนะนำำใหรจกกบ JavaScript

ในอดตทผานมา JavaScript อาจเปนเพยงแคภาษาสครปททเพมลกเลนและสสนใหกบเวบเพจเทานน แตในปจจบน JavaScript ถอไดวามบทบาทสำาคญอยางยงในการทำาเวบเพจและเวบแอพพลเคชน เนองจากอนเทอรเนตไดกลายมาเปนสวนหนงของชวตประจำาวนเสยแลว แตเทคโนโลยสำาหรบการทำาเวบอยาง HTML เพยงลำาพง ไมสามารถรองรบความตองการและความซบซอนของเวบเพจได แมวาเราจะมเทคโนโลยการทำาเวบฝงเซรฟเวอรอาทเชน Java, PHP, Ruby, หรอ .Net กตาม แตนนไมไดตอบโจทยทงหมดของความตองการทเพมขน เราตองการใหเวบเพจและเวบแอพพลเคชนสามารถตอบสนองผใชไดรวดเรวและมากยงขน ดงจะเหนไดจากเทคนคใหมๆอาทเชน AJAX หรอ Widgets ตางๆททำาใหผใชไดรบประสบการณทดยงขน ซงกลวนแลวแตสรางขนมาดวย JavaScript ทงนน เวบไซตใหญๆอาทเชน Google, Hotmail, และ Facebook ตางกมการนำา JavaScript มาประยกตใชในเวบเพจของตนเองอยางมากมาย ลองปดฟเจอร JavaScript ในเวบเบราวเซอรดนะครบ และลองเขาเวบไซตตางๆทเขาใชงานอยเปนประจำา แลวจะเหนไดเลยวา บางเวบไซตไมสามารถใชงานไดเลย ดงนนจงกลาวไดวา JavaScript ไดกลายมาเปนองคประกอบหลกองคประกอบหนงของการทำาเวบในปจจบนแลว และในบทเรยนนซงเปนบทเรยนแรกของการเรยนร JavaScript เราจะเรมตนดวยหวขอตางๆดงตอไปน

• JavaScript คออะไร?• อะไรคอ Client-side JavaScript?• ตวอยางของ JavaScript• สงทจำาเปนตองใชและตองเรยนร

http://www.kontentbluepub.com แนะนำาใหรจกกบ JavaScript | 3

JavaScript คออะไร?JavaScript คอภาษาสครปททรนบนเวบเบราวเซอร เพอเพมความสามารถใหกบ

เวบเพจ ทำาใหเวบเพจสามารถตอบโตกบผใชไดมากขน ยกตวอยางเชน ใช JavaScript เพอสรางเมน เมอเลอนเมาสไปทเมนหลก กจะเหนเมนยอยปรากฏขนมา, หรอใช JavaScript เพอทำา Tool Tips ใหกบฟอรม เพอใชอธบายการกรอกแบบฟอรม เปนตน ทงหมดน HTML เพยงลำาพงไมสามารถทำาได อนทจรงแลว JavaScript เปนมากกวานน กลาวคอ

• JavaScript คอภาษา ECMAScript ชนดหนง !?! (โปรดดทหวขอ “ประวตความเปนมาของ JavaScript”)

• และเปนภาษาโปรแกรมมงทใชรนและคอนโทรลออบเจกตตางๆใน Host Environments เชน รนบนเวบเบราวเซอร, รนบนเวบเซรฟเวอร, รนบนโปรแกรมกราฟฟก เปนตน

อยางไรกตาม JavaScript นนถกใชงานหลกๆบนเวบเบราวเซอรหรอทเรามกเรยกกนวา Client-side JavaScript (Server-side Script กไดแก JSP, PHP เปนตน) จงทำาใหเราเขาใจวา JavaScript ทำางานไดแคบนเวบเทานน (ซงไมใช)

นอกจากน JavaScript ยงมคณสมบตและลกษณะทางภาษาดงตอไปน• เปนภาษาสครปท (ใชการ Interpret แทนการ Compile นนคอรนโคดโดยตรงไดเลย

โดยทไมตองคอมไพลกอนรนดงเชนในภาษา C)• เปนภาษา Object-oriented ชนดหนง (เปน OO แบบ Prototype-based ไมใช Class-

based)• เปนภาษา Dynamic-typing กลาวคอชนดของตวแปรเปลยนแปลงได• และเปนภาษา Functional-oriented ดวย เพราะฟงกชนถอไดวาเปน Value ไมไดเปน

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

JavaScript ไมใช JavaJavaScript นนไมใช Java ทงสองภาษามความแตกตางกนโดยสนเชง เพยงแต

4 | แนะนำาใหรจกกบ JavaScript ตวอยางหนงสอ

JavaScript และ Java นนใช Syntax ทใกลเคยงกน คอรบอทธพลมาจากภาษา C นอกจากน JavaScript ยงไดใชสไตลการตงชอ (ตวแปร, ฟงกชน . . .) แบบเดยวกบ Java ดวย และยงใชชอภาษาทพองกนอก (ดความเปนมาไดทหวขอถดไป) สดทายหากคณสงสยวา JavaScript โดยมากใชทำาเวบ ซง Java กใชทำาเวบไดเชนกน แลวทงสองภาษาแตกตางกนอยางไร กขอตอบดงน JavaScript รนบนเวบเบราวเซอร (Client-side) สวน Java รนบนเวบเซรฟเวอร (Server-side) จงทำาใหใชงานทงคไปพรอมๆกนได ไมใชเลอกอยางใดอยางหนง แตทงสองภาษาทำางานคนละสวนกน

[Note] Applet เปนเทคโนโลย Java ชนดหนง ซงรนบนเวบเบราวเซอรเชนกน แตเปนคนละรปแบบกบ JavaScript อกทงปจจบน Applet ไมเปนทนยมแลว อาจเปนเพราะมนเกดเรวเกนไป !!!

[Note] เวลาพดถงคำาวา “เวบเพจ” เราจะนกถงไฟล HTML ซงถกเขยนไว และเรยกดทเวบเบราวเซอร ในขณะทคำาวา “เวบแอพพลเคชน” เรานกถงการเขยนโปรแกรมฝงเซรฟเวอรเพอสรางเอกสาร HTML ขนมาตามการใชงานของผใช

ประวตควำมเปนมำของ JavaScriptJavaScript มประวตความเปนมาโดยไลเรยงแบบสรปไดดงน

• ถกรเรมและพฒนาโดย Brendan Eich ทบรษท Netscape เพอเพมลกเลนใหกบการรนเวบเพจบนเบราวเซอร Netscape Navigator

• เรมตนใชชอ Mocha และตอมาไดเปลยนไปเปน LiveScript และสดทายมาลงเอยทชอ JavaScript

• ชอ JavaScript นนเปนผลมาจากการทำาการตลาดรวมกนระหวางบรษท Netscape และ Sun (เจาของเทคโนโลย Java) ปจจบนทง Sun และ Netscape ไมมตวตนอกแลว

• ในป 1996 บรษท Netscape ไดมอบ JavaScript ใหกบองคกร ECMA International


เพอกำาหนดและดแลมาตราฐานของภาษา เนองจาก JavaScript เรมเปนทนยมและรองรบในเวบเบราวเซอรตางๆ และผลทตามมากคอ มาตราฐานภาษา ECMAScript (มนเปนเพยงแคมาตราฐานทางภาษาเทานน ไมใช JavaScript Engine ทใชในเวบ เบราวเซอรแตประการใด) แตคนทวไปกยงคงเรยกภาษานวา JavaScript

• ปจจบน JavaScript Engine (ชอรหส “SpiderMonkey”) ทเคยเปนของ Netscape ถกพฒนาตอและดแลโดยองคกร Mozilla Foundation

• สวนเวอรชนของ JavaScript ดไดทตารางท 1-1

ตำรำงท 1-1: เวอรชนของ JavaScriptเวอรชน ป เวบเบรำวเซอรทรองรบ

1 มนาคม ปค.ศ. 1996 Netscape 2.0 และ IE 3.0

1.5 (ECMA-262 v3) พฤศจกายน ปค.ศ. 2000 เวบเบราวเซอรสวนใหญในปจจบน

หนงสอเลมนใช Syntax ของ JavaScript เวอรชน 1.5 ซงเปนเวอรชนทรองรบและใชกนในทกๆเวบเบราวเซอร แมวาจะมเวอรชนใหมออกมาแลวกตาม แตมเพยงบางเวบเบราวเซอรเทานนทรองรบ

[Note] JavaScript Engine เปนหนงใน Components ของการสรางเวบเบราว-เซอร ซงทำาหนาทรนโคด JavaScript โดยเฉพาะ แตละเวบเบราวเซอรกจะม Engine ของมนเอง ซงประสทธภาพกจะแตกตางกนไป รายละเอยดเพมเตมดไดท http://en.wikipedia.org/wiki/JavaScript_engine

อะไรคอ Client-side JavaScript?JavaScript เปนเพยงแคภาษาเทานน ดงนนเราจงตองการตวรน JavaScript หรอ

JavaScript Engine เนองจาก JavaScript Engine ถกรวมเปนสวนหนงของเวบเบราวเซอรอยแลว (สวนใหญ) ผลทไดกคอเราสามารถเขยน JavaScript และรนบนเวบเบราวเซอรได


นนเอง และเรามกเรยกกนวา Client-side JavaScriptClient-side JavaScript คอผลจากการรวมกนของภาษา JavaScript และออบเจกต

ตางๆทเวบเบราวเซอรเตรยมไวให ทำาใหเราสามารถเขยน JavaScript เพอคอนโทรลออบเจกตตางๆหรอแมแตตวเอกสาร HTML ได ยกตวอยางเชน เขยน JavaScript เพอควบคมตวตงเวลา (ออบเจกต Timer) เพอใหทำางานตามชวงเวลาทเราตองการ, เขยน JavaScript เพอสงเปดหนาตางใหม (ออบเจกต Window), เขยน JavaScript เพอเปลยนแปลงขอความบนเวบเพจ (ออบเจกต Node) เปนตน ออบเจกตเหลานมอยบน Host Environment ทเปนเวบ เบราวเซอรเทานน เราไมสามารถไปควบคมการกดปม Back บน Environments อนๆ ถาเรารน JavaScript บน Environments อน เรากไมเรยกมนวา Client-side JavaScript

ดวยเทคนคการเขยน Client-side JavaScript น ทำาใหเราสามารถสรางเวบเพจแบบ Dynamic ได กลาวคอเวบเพจสามารถเปลยนแปลงไปตามเหตการณตางๆได JavaScript จงเปนหวใจหลกของการทำา Dynamic HTML (DHTML) และ AJAX นนเอง และจากนไปจะขอเรยก Client-side JavaScript สนๆวา JavaScript เพราะหนงสอเลมนเนนใชงานบนเวบ เบราวเซอรเทานน

JavaScript ทำำอะไรไดบำง?JavaScript สามารถทำาดงตอไปนได

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

อนทจรงแลว JavaScript ทำาไดมากมาย ซงคงไมสามารถบรรยายไดหมด เอาเปนวาเวบไซตใหญๆทเราเขาใชงานกนในปจจบน ไมวาจะเปน Google Map, Gmail, Facebook, หรออนๆ ตางกมการนำา JavaScript มาประยกตใชอยางมากมายมหาศาล รองปด JavaScript ในเวบ เบราวเซอรทใชอยดนะครบ แลวจะเหนวาไมสามารถเขาใชงานบางเวบไซตไดเลย


ตวอยำงแรกของ JavaScriptในหวขอนเรามาลองดตวอยาง JavaScript แบบงายๆกน เพอใหเหนภาพวามนมหนา

ตาเปนอยางไร กอนทเราจะไปเจาะลกกนในแตละบทตอจากน ตวอยางท 1-1 (JS_Example.html) เปนตวอยาง JavaScript ทแสดงวนเวลาของการเปดเวบเพจ ดงแสดงในรปท 1-1

รปท 1-1: ผลลพธการรน JS_Example.html บนเวบเบราวเซอร

ตวอยำงท 1-1: JS_Example.html<html> <head> <title>JS_Example.html</title> </head>

<body> <h1>Welcome to JavaScript</h1> <script type="text/JavaScript"> // create a variable that holds value of // the present day and time var today = new Date(); document.write( today ); </script> </body></html>


จากตวอยางขางตนมจดทนาสนใจดงตอไปน• ตวอยางขางตนนแสดงขอความ “Welcome . . .” พรอมทงวนเวลาทมการเปดเวบเพจ• โคด JavaScript ถกเขยนอยภายในไฟล HTML ดวย Syntax ดงตอไปน

<script type=“text/JavaScript”> // for most browser </script>

หรอ <script language=“JavaScript”> // for very old browser </script>

ในปจจบนเรานยมเขยนแบบแรกมากกวา อนทจรงแลวเราสามารถเขยนสนๆดงตอไปนกได

<script> . . . </script>

• และโปรดสงเกตวานามสกลของไฟลยงคงเปน .html ทงนเพราะเราเขยน JavaScript แทรกลงไปในแทก HTML

• ตวอยางขางตนแสดงใหเหนถงสองสงทสำาคญตอการเรยนร JavaScript นนคอ ตวภาษา JavaScript เอง และออบเจกตจากเวบเบราวเซอร

• ภาษา JavaScript และออบเจกตสำาเรจรป (Date) ทมากบตวภาษา• var today = new Date();

• เปนการประกาศตวแปร today เพอใชอางองออบเจกต Date และออบ-เจกต Date จะเกบคาวนเวลาทถกรนโดยอตโนมต

• ออบเจกตจากเวบเบราวเซอร (Document)• document.write( today );

• document คอตวแปรทใชอางองออบเจกต Document และเปนตวแปรทมใหใชใน Client-side JavaScript โดยอตโนมต (Implicit Variable) ไมเหมอนกบตวแปร today ทตองประกาศขนเอง

• เมธอด document.write() ใชสำาหรบแทรกขอความเขาไปในเวบเพจ


• เมอเราสงตวแปรชนด Date เปนพารามเตอรไปยงเมธอด document.write() ออบเจกต Date จะถกแปลงเปนตวอกษร (string) ใหโดยอตโนมต

• JavaScript เปน Case-sensitive ดงนนตวอกษรพมพเลกหรอพมพใหญถอวาแตกตางกน

• เครองหมาย Semicolon “;” ถกใชเพอจบ Statement ซงใน JavaScript จะเขยนหรอไมกได อยางไรกตามผมแนะนำาใหเขยนนะครบ

• เครองหมาย “//” ใชสำาหรบใสคอมเมนทแบบบรรทดเดยว คอจนจบบรรทด• เครองหมาย “/* . . . */” ใชสำาหรบใสคอมเมนทแบบหลายบรรทด คอ

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

[Note] ไฟล HTML สามารถประกอบไปดวยแทก <script> มากกวาหนงชดได และโคดในแตละชดสามารถเรยกใชขามกนได เสมอนเขยนอยในแทก <script> เดยวกน เพยงแตเรามกแยกเขยนตามความเหมาะสมและความจำาเปน

สงทจำำเปนตองใชในกำรเขยน JavaScriptในการเขยน JavaScript นน มความตองการเพยงแคสองอยางเทานนคอ

• เวบเบรำวเซอร ซงจะเปน Firefox, Chrome, Safari, Opera, Internet Explorer, หรออะไรกไดทรองรบ JavaScript

• Text Editor จะเปน Text Editor อะไรกได แตขอใหเปน Text Editor ทเขาใจโคด HTML และ JavaScript ซงจะทำาใหสามารถแบงสสนตาม Syntax ตางๆได ทำาใหงายตอการเขยนมากขน

เราไมตองการเวบเซรฟเวอรแตประการใด เราใชเพยงแคเวบเบราวเซอรในการรนตวอยาง


เทานน ยกเวนในบทท 14 “AJAX” ทเราตองการเวบเซรฟเวอร และหากคณยงไมม Text Editor ทถกใจ กลองพจารณาสองตวตอไปน

• Komodo Edit สามารถดาวนโหลดฟรไดท www.activestate.com Komodo Edit เปนมากกวา Text Editor คอมความสามารถกงๆ IDE นนคอมฟเจอรทสำาคญอยาง Code Auto-complete ดวย ซงจะชวยลดปญหาการสะกดคำาได นอกจากนเรายงสามารถเลอกดาวนโหลดตวตดตงไดทงบน Window, Mac, และ Linux รปท 1-2 แสดงตวอยาง Komodo Edit

• JEdit สามารถดาวนโหลดไดท www.jedit.org JEdit เปน Text Editor แบบโอเพนซอรสทรองรบหลากหลายภาษาโปรแกรมมง ซงแนนนอนวารวม HTML และ JavaScript ดวย เนองจาก JEdit ถกพฒนาขนดวย Java จงทำาใหสามารถใช JEdit ไดบน Windows, Mac, Linux, และ Unix ได รปท 1-3 แสดงตวอยาง JEdit

รปท 1-2: ตวอยาง Komodo Edit


รปท 1-3: ตวอยาง JEdit

[Note] การตดตง JEdit จำาเปนจะตองตดตง JRE หรอ Java SE DK เสยกอน ซงการตดตง Java SE DK สามารถดไดทภาคผนวกทายเลม

Roadmap ของกำรเรยนการเรยนร JavaScript นนกไมตางไปจากการเรยนรภาษาโปรแกรมมงอนๆ กลาวคอ

เราจะตองเรยนรสองสงหลกๆดงน• ตวภำษำ อนไดแก Syntax และกฎขอบงคบทางภาษาตางๆ เชนการประกาศตวแปร,

การสรางฟงกชน เปนตน เนอหาทเกยวของจะอยในบทเรยนบทตางๆในภาคท 1 “Core JavaScript Language”

• ไลบรำร เมอเรยนรโครงสรางทางภาษาแลว กตองเรยนรไลบราร มเชนนนแลวลำาพงแคภาษาคงจะทำาอะไรมากไมได ไลบรารในทนกคอออบเจกตตางๆทสามารถเรยกใชบนเวบเบราวเซอรไดนนเอง เนอหาทเกยวของจะอยในบทเรยนบทตางๆในภาคท 2 “Client-side JavaScript”


กำรรน JavaScript บนเวบเบรำวเซอรทเกำมำกๆแมวาปจจบนเวบเบราวเซอรจะรองรบ JavaScript กน (แทบ) ทงหมดแลว แตกอาจ

มบางบางคนทยงใชเบราวเซอรรนเกามากๆอย ทไมรองรบ JavaScript ทำาใหโคด JavaScript ถกตความและแสดงเปนเพยงแคขอความธรรมดาเทานน ดงนนหากเรากงวลตรงจดน เรากสามารถหลกเลยงปญหานไดโดยเขยนโคด JavaScript ไวในแทกพเศษดงน <script type=“text/JavaScript”>  </script>

เทานเวบเบราวเซอรทไมรองรบ JavaScript กจะไมโชวโคดบนเวบเพจแลว (อยางไรกตามโอกาสนอยมากนะครบ ทเวบเบราวเซอรจะไมรองรบ JavaScript และในกรณนกไมนบรวมเวบเบราวเซอรทถกปดฟเจอร JavaScript ดวย การไมรองรบกบรองรบแตปดฟเจอรนนไมเหมอนกน แตเอาเปนวาถากงวลแลวหละก ใหใสแทกพเศษขางตนไวเสมอกแลวกน)

Documents

JavaScript - Kontentblue Pub · นั่นเอง และเรามักเรียกกันว่า Client-side JavaScript Client-side JavaScript คือผลจากการรวมกันของภาษา