1

ใบความร หนวยท 1 เรอง การพฒนาโปรแกรมดวยภาษาคอมพวเตอร

มาตรฐาน / ตวชวด

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมล การเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม

ตวชวด 1. เขยนโปรแกรมภาษาขนพนฐาน (ง 3.1 ม.3/2)

จดประสงคการเรยนร 1. อธบายหลกการพนฐานในการเขยนโปรแกรมได 2. อธบายแนวคดในการเขยนโปรแกรมได 3. อธบายขนตอนการพฒนาโปรแกรมได 4. ใช JavaScript เพอ รบคา - ค านวณและแสดงผลได

สาระส าคญ การเขยนโปรแกรม เปนงานทรวบรวมความสามารถของบคคลทงดานความร

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

ปจจบนภาษาคอมพวเตอรใหเลอกใชไดมากมายตามความเหมาะสมของลกษณะงาน และความถนดของผเขยนโปรแกรม เชน ภาษา C, C# , Visual Basic , PHP, ASP , JAVA ,JavaScript หรอ SCRIPT ในโปรแกรม Adobe Flash ฯลฯ มการด าเนนการตามเขยนโปรแกรมตามขนตอน การพฒนาโปรแกรม ซงประกอบดวย 1) การก าหนดและวเคราะหปญหา ( problem definition and

2

problem analysis) 2) เขยนผงงานและซโดโคด ( pseudo coding) 3) เขยนโปรแกรม ( programming) 4) ทดสอบและแกไขโปรแกรม ( program testing and debugging) 5) ท าเอกสารและบ ารงรกษา (program documentation and maintenance)

เนอหาสาระ

รจกกบภาษาคอมพวเตอร ภาษาคอมพวเตอร (Computer Language) หมายถง โปรแกรมหรอชดค าสงทมนษยเขยนขน

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

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

2. ภาษาระดบต า (Low Level Language) ภาษาระดบต าเปนภาษาทใกลเคยงกบภาษาเครองมาก จงเรยกไดวาเปนภาษาองเครอง (Machine Oriented Language) เปนภาษาทใชรหสตวเลขประกอบกบอกขระภาษาองกฤษดวย เชน ภาษาแอสเซมบล (Assembly Language) ภาษาระดบต าน เขยนไดงายขน แตภาษาแอสเซมบลน เครองคอมพวเตอรไมสามารถเขาใจภาษาไดโดยตรง เวลาใชงานจ าเปน ตองอาศยโปรแกรมแปลภาษาเอสเซมเบลอ (Assembler Programme) และโปรแกรมเอสแซมเบลอทใชกบคอมพวเตอรเครองหนงจะใชกบคอมพวเตอรเครองอน ๆ ไมได

3. ภาษาระดบสง ( High Level Language) ภาษาระดบสงเปนภาษาทอ านวยความสะดวก ใหกบคนเขยนโปรแกรมอยางมาก ลกษณะค าสงใชภาษาองกฤษทผอานเขาใจได ซงเปนภาษาทเขยนและเขาใจงายกวา ภาษาเอสแซมบล แตเครองคอมพวเตอรจะไมเขาใจไดทนทตองอาศยตวแปลภาษา เชน ภาษาฟอรแทรน ( FORTRAN) ภาษาโคบอล ( COBOL) ภาษาเบสค ( BASIC) และภาษาอารพจ (RPG) เปนตน

3

ตวแปลภาษาคอมพวเตอร (Translator) โครงสรางของแตละโปรแกรมในภาษาระดบสงมความแตกตางกนออกไป โปรแกรมทเขยน

ขนเรยกวาโปรแกรมตนฉบบ ( Source Code) มนษยจะอานโปรแกรมตนฉบบได แตคอมพวเตอร ไมเขาใจ เพอใหคอมพวเตอรเขาใจตองแปลภาษาเหลานเปนภาษาเครอง ( Machine Language) ทประกอบดวยเลขฐาน 2 เทานน ตวแปลภาษาคอมพวเตอร (Translator) แบงออกเปน 2 ประเภท ไดแก

1. คอมไพเลอร ( Compiler) เปนตวแปลภาษาระดบสง เชน ภาษาปาสคาล ภาษาโคบอล ภาษาฟอรแทรน ภาษาซ ซงเปลยนโปรแกรมตนฉบบใหเปนภาษาเครอง มหลกการท างานโดยแปลโปรแกรมตนฉบบทงโปรแกรม และบนทกในลกษณะของแฟมขอมลหรอไฟล เมอตองการเรยกใชงานโปรแกรม กสามารถเรยกไฟลทแปลเอาไวมาใชงาน โดยไมตองแปลหรอคอมไพลอก ท าใหการท างานรวดเรว ขณะทคอมไพเลอรแปลโปรแกรมภาษาระดบสง จะตรวจสอบความถกตองของไวยากรณ (ขนอยกบภาษาทใช) หากพบขอผดพลาดจะรายงานขอผดพลาดของโปรแกรม ( Program Listing) เพอใชเกบโปรแกรมตนฉบบและค าสงทเขยนไมถกตองตามก ฎเกณฑของแตละภาษา ซงจะชวยใหผเขยนโปรแกรมแกไขไดตรงจด

2. อนเตอรพรเตอร (Interpreter) เปนตวแปลภาษาระดบสงเชนเดยวกบคอมไพเลอร แตจะแปลพรอมกบท างานทละค าสงตลอดทงโปรแกรม ท าใหการแกไขโปรแกรมท าไดงาย รวดเรว แตมขอเสยคอจะท าการแปลโปรแกรมทกครงทเรยกใชงาน เชน ภาษาเบสก

ภาษาคอมพวเตอร ส าหรบการพฒนาโปรแกรม ภาษาคอมพวเตอรส าหรบการพฒนาโปรแกรมมอยมากมาย แตละภาษามโครงสราง

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

1. ภาษาฟอรแทรน ( FORTRAN) พฒนาขนใน พ.ศ. 2497 สรางขนส าหรบแกปญหาทางดานคณตศาสตรและวศวกรรมศาสตร และสามารถใชกบงานดานกราฟก ทางดานฐานขอมล และทางดานเวรดโพรเซสซงไดเชนกน

2. ภาษาเบสก ( BASIC) พฒนาขนใน พ.ศ. 2508 โดยออกแบบใหเปนภาษาทงาย ๆ แตมความสามารถของภาษาฟอรแทรน รวมกบภาษาโคบอลเขาดวยกน สามารถน าไปใชงานได อยางกวางขวาง สามารถใชโตตอบได ผใชสามารถไดรบการตอบสนองเพอสงพมพ

4

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

3. ภาษาโคบอล ( COBOL) พฒนาขนใน พ.ศ. 2502 เพอใชงานดานธรกจและพาณชยการ ลกษณะภาษาโคบอลเปนธรรมชาต เขยนไดรวบรดอานงาย ความส าคญของภาษาโคบอล คอ ขดความสามารถในการจดและการปรบแตงไฟลขอมลทยาวไดสะดวก ขอมลสนกสะดวกเชนกน รวมทงการสรางไฟลรายงานขอมลดวย

4. ภาษาปาสคาล (Pascal) พฒนาขนใน พ.ศ. 2514 เปนภาษาโครงสรางทสรางเสรมความคดทเปนระบบไดด ภาษาปาสคาลเปนภาษาทคลายกบภาษาอลกอ แตเปนภาษาทเลกกวา นยมใชกบไมโครคอมพวเตอร เปนภาษาทใชงานงายโดยใชภาษาองกฤษงาย ๆ

5. ภาษาซ (C) พฒนาขนใน พ.ศ. 2517 พฒนาเปนภาษาทมโครงสรางเรยบรอยมาก เปนภาษาทมประสทธภาพใกลเคยงกบภาษาเครอง แตใชงานไดงายกวา ถกน าไปใชงานโปรแกรมระบบ ( System Programming) ภาษาซทใชกบคอมพวเตอรจะเปนภาษาทงายกะทดรด เนองจากภาษาซเปนภาษาอสระจากสถาปตยกรรมคอมพวเตอรรนใด ๆ ทงนน ใชโปรแกรมรวมกบคอมพวเตอรรนใดกได

6. ภาษาอลกอล ( ALGOL) พฒนาขนใน พ.ศ. 2503 เปนภาษาทมความสามารถสง รปลกษณะคลายภาษาฟอรแทรน แตเปนภาษาทมความยดหยนในการใชงาน ขอความรวบรด สรางขนเพอเปนภาษาเอนกประสงค ส าหรบการแสดงกระบวนการแกปญหาทางอลกอรทม เปนภาษาทมโครงสรางเปนทางการ อานงาย

7. ภาษาลสฟ ( LISP) พฒนาขนใน พ.ศ. 2503 เชนกน เปนภาษาทมความสามารถสง ทางดานงานแบบลสฟโพรเซสซง นกวจยคอมพวเตอรศกษาเกยวกบปญหาเทยมหรอสมองเทยม (Artificial Intelligent) เลอกใชภาษาลสฟ ซงสามารถเปลยนแปลงความยาว หรอโครงสรางในขณะทคอมพวเตอรก าลงท างานอยได นยมใชแสดงรปประโยคภาษาองกฤษ หรอสตรทางคณตศาสตร วทยาศาสตรและเลยนแบบกระบวนการแกปญหาของมนษยดวย

8. ภาษาอาร พ จ (RPG) พฒนาขนใน พ.ศ. 2507 เปนภาษาทใชกบมนคอมพวเตอร ส าหรบงานทางดานธรกจ สามารถสรางรายงานจากขอมล โดยการเขยนภาษาอาร พ จ สามารถเขยนและใชงานเปนสวน ๆ ไมจ าเปนตองเขยนเปนโปรแกรมยาว ๆ

9. ภาษาพ แอล วน (PL/1) พฒนาขนใน พ.ศ. 2508 เปนภาษาทออกแบบไวใชงานทางธรกจและวทยาศาสตร เปนภาษาทน าเอาขดความสามารถของภาษาฟอรแทรน และภาษาโคบอลไวดวยกน

5

เปนภาษาทงาย รวบรด สามารถรวบไฟลหรอเรคคอรดทงทางดาน Input และ Output ได สามารถแสดงขอมลในรปของอารเรยไดงาย

10. ภาษาเอ พ เอล ( APL) พฒนาขนใน พ.ศ. 2510 เปนภาษาทมชดตวกระท าพนฐาน (Primitive Operators) ทใชท าหนาทตาง ๆ เชน สรางเลขดชน สรางเลขแบบสม เปนภาษายอดนยมของนกสถต สามารถใชงานทางดานธรกจไดเชนกน เชน การผลตเอกสาร ดานวเคราะห ดานกราฟก การจดการระบบฐานขอมล ลกษณะภาษาคลายภาษาสนทนา เขาใจงาย แตสามารถท างานไดเรว

11. ภาษาสมอลทอค ( SMALL TALK) พฒนาขนใน พ.ศ. 2515 เพอใชในวงการศกษา สามารถชวยครแกปญหาทางการสอนได ใชสรางกราฟก และการอธบายทางการศกษาไดด แตกสามารถน ามาใชงานดานธรกจไดดวย จงมลกษณะเปนภาษาเอนกประสงค

12. ภาษาไพลอท (PILOT) พฒนาขนใน พ.ศ. 2516 เปนภาษาทพฒนาขนส าหรบใชสอนเดกเกยวกบการท างานของคอมพวเตอร นยมน าไปเขยนโปรแกรมการสอน เพอใชเปนคอมพวเตอรชวยสอน (CAI) ภาษาทใชควบคกบไพลอทคอภาษาโลโก (LOGO) ซงพฒนาขนมาดวยจดมงหมายเดยวกน

13. ภาษาฟอรท ( FORTH) พฒนาขนใน พ.ศ. 2518 มลกษณะคลายภาษาแอสแซมบล ระดบสง ออกแบบไวใชงาน System Promgramming ผใชสามารถพมพค าสงใหม ๆ เขาไปได และสามารถเกบค าสงและเรยกออกมาใชงานได ดงนน ผใชสามารถน าไปใชสรางโปรแกรมใหเหมาะสมกบความตองการของตนได มกใชในงานสถต ธรกจการเงน และดานไฟลง

ขนตอนการพฒนาโปรแกรม

การเขยนโปรแกรมคอมพวเตอรใหท างาน เพอแกปญหา หรอสนองความตองการของเรานน ผเขยนตองรวาจะใหโปรแกรมท างานอะไร มขอมลอะไรทตองปอนใหกบโปรแกรม( Input) และตองการไดอะไรเปนผลลพธ (Output) มการแสดงผลอยางไร ผเขยนโปรแกรมตองทราบขนตอนวธการของการแกปญหาของโปรแกรมดวยวาตองท าอยางไร อาจเขยนเปนล าดบขนตอนมากอนและจดบนทกไว จากนนจงน าล าดบขนตอนนนมาพฒนาเปนโปรแกรม หากไมไดมการวางแผนการเขยนโปรแกรมไวกอน เมอตองการแกไข หรอปรบปรงโปรแกรมในภายหลงจะท าไดยาก เสยเวลามาก ในการมาศกษาทกขนตอน โดยเฉพาะโปรแกรมทมความซบซอนมาก โดยทวไปขนตอนการพฒนาโปรแกรมจะประกอบดวย

6

1. การก าหนดและวเคราะหปญหา (problem definition and problem analysis) 2. เขยนผงงานและซโดโคด (pseudo coding) 3. เขยนโปรแกรม (programming) 4. ทดสอบและแกไขโปรแกรม (program testing and debugging) 5. ท าเอกสารและบ ารงรกษา (program documentation and maintenance)

1. การก าหนดและวเคราะหปญหา ( problem definition and problem analysis) เปนขนตอนทจะตองก าหนดแนวทางในการแกปญหาใหเหมาะสมกบคอมพวเตอร เพอใหการท างานเปนไปอยางมประสทธภาพ โดยตองท าความเขาใจกบปญหาทตองการแกไขใหได มขนตอน การด าเนนการยอย ๆ ดงตอไปน

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

1.2) ก าหนดลกษณะของขอมลเขาและออกจากระบบ ( Input/Output specification) โดยตองรวาขอมลทสงไปเปนอยางไร มอะไรบาง เพอท าใหโปรแกรมประมวลผลและแสดงผลลพธ เชน การรบคาจากคยบอรด การใชเมาส การก าหนดปมตาง ๆ ลกษณะการแสดงผลหนาจอวาจะใหมรปรางอยางไร โดยขนอยกบผใชงานโปรแกรมเปนหลก เชน ขอมลประเภท ตวเลข ตวอกษร ขอความ ใชทศนยมกต าแหนง

1.3) ก าหนดวธการประมวลผล ( process specification) ตองรวาจะใหคอมพวเตอรประมวลผลอยางไร จงจะไดผลลพธตามทตองการ

2. เขยนผงงานและซโดโคด ( pseudo coding) หลงจากทไดวเคราะหปญหาแลว ขนตอนตอไปเปนการน าเครองมอมาชวยในการออกแบบโปรแกรม ซงยงไมใชการเขยนโปรแกรมจรง ๆ แตชวยในการเขยนโปรแกรม ท าใหผอนน าโปรแกรมของเราไปพฒนาตอไดงายขน โดยเขยน เปนล าดบขนตอนการท างานของโปรแกรมทเรยกวาอลกอรทม ( algorithm) ซงจะแสดงขนตอน การแกปญหา ใชประโยคทชดเจนไมคลมเครอ และมรายละเอยดการท างานทเพยงพอทจะน ามาเขยนโปรแกรมใหท างานจรง อาจเขยนในรปของรหสจ าลอง หรอซโดโคด ( pseudo code) หรอ อกลกษณะหนงคอเขยนในรปของผงงาน (Flowchart) ซงความแตกตางอยท ซโดโคดเขยนค าอธบายการท างานของโปรแกรมเปนแบบยอ ไมมรปแบบเฉพาะตว แตละสวนจะเปนแนวทางในการเขยน

7

โปรแกรม ซงน าไปใชกบทก ๆ โปรแกรมไดงายขน สวนผงงานเปนสญลกษณแทนการท างาน และทศทางของโปรแกรม

สญลกษณ ค าอธบาย

กระบวนการ การค านวณ

กระบวนการทนยามไว การท างานยอย

ขอมล รบ หรอ แสดงขอมลโดยไมระบชนดของอปกรณ

การตดสนใจ การเปรยบเทยบ

การเตรยมการ การก าหนดคาลวงหนา หรอ ก าหนดคาเปนชดตวเลข

ปอนขอมลดวยตนเอง การรบขอมลเขาทางแปนพมพ

ขนตอนทท าดวยตนเอง การควบคมโปรแกรมทางแปนพมพ

เอกสาร/แสดงผล การแสดงผลทางเครองพมพ

เอกสารแสดงผลหลายฉบบ

จอภาพแสดงผล

การด หรอบตรเจาะร ใชใสขอมล

เทป (สอบนทกขอมล)

เรมตน/สนสด การเรมตน หรอการลงทาย

จดเชอมตอในหนาเดยวกน

ตวเชอมตอไปหนาอน

จดรวมการเชอมตอ

8

หรอ

ตรวจเทยบ

หนวงเวลา

ทเกบแบบเขาถงโดยเรยงล าดบ

ดสกแมเหลก

เสนแสดงล าดบกจกรรม

3. เขยนโปรแกรม (programming) เปนขนตอนการเปลยนค าอธบายโปรแกรม หรอผงงาน

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

4. ทดสอบและแกไขโปรแกรม (program testing and debugging) เพอใหการน าโปรแกรมไปใชมความถกตอง แกปญหาไดตรงจด ผเขยนโปรแกรมจงตองทดสอบความถกตองของโปรแกรม ทเขยนขน เพอหาจดผดพลาด อาจจะใหบคคลอนลองใชโปรแกรมดวย และแกไข ทดสอบจนไมพบ จดผดพลาดอก จดผดพลาดของโปรแกรมเรยกวา Bug และการแกไขโปรแกรมเรยกวา Debug ซงขอผดพลาดของโปรแกรมม 2 ประเภท ดงน

4.1) การเขยนค าสงไมถกตองตามหลกการเขยนโปรแกรมภาษาทเลอก ซงเรยกวา Syntax Error หรอ Coding error ขอผดพลาดแบบนมกพบตอนแปลภาษาโปรแกรม เปนรหสภาษาเครอง

4.2) ขอผดพลาดทางตรรกะ หรอ Logic error เปนขอผดพลาดทโปรแกรมท างานได แตผลลพธออกมาไมถกตอง ซงอาจเกดขนจากขนตอนการแกปญหา หรอหาค าตอบทออกแบบขน เชน ตองการผลลพธอยางหนง แตสงทค านวณหรอประมวลผลไดเปนอกแบบหนง

5. ท าเอกสารและบ ารงรกษา ( program documentation and maintenance) เปนการใหผใชงานโปรแกรมใชงานไดอยางมประสทธภาพ และสะดวกในการตรวจสอบขอผดพลาดโดยเขยนเปนเอกสารประกอบโปรแกรมขนมา แบงออกเปน 2 ประเภท คอ

9

5.1) คมอการใช (User Document) หรอ user guide ซงจะอธบายการใชโปรแกรม 5.2) คมอโปรแกรมเมอร หรอ Program document หรอ Technical reference ซงจะ

อ านวยความสะดวกในการแกไขโปรแกรมและพฒนาโปรแกรมในอนาคต โดยมรายละเอยดตาง ๆ เกยวกบโปรแกรม เชน ชอโปรแกรม การรบขอมล การพมพผลลพธ ขนตอนตาง ๆในโปรแกรม เปนตน

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

แนวคดในการเขยนโปรแกรม

รปแบบของแนวคดในการเขยนโปรแกรม สามารถแบงออกไดเปน 2 แนวคดใหญ ๆ ดงน 1. การเขยนโปรแกรมเชงโครงสราง (Structured Programming) 2. การเขยนโปรแกรมเชงวตถ (OOP : Object-Oriented Programming)

ซงแตละแนวคดมลกษณะดงตอไปน 1. การเขยนโปรแกรมเชงโครงสราง (Structured Programming) เปนการจดการค าสงตางๆ

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

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

ภาพท 1.1 ผงงานโครงสรางแบบล าดบขนตอน

10

ตวอยาง โปรแกรมค านวณหาคาเฉลยคะแนนวชาคอมพวเตอรของนกเรยนชนมธยมศกษาปท 3 จ านวน 5 คน และแสดงผลการค านวณทได วธท า 1. สงทโจทยตองการ (Output) คอค านวณหาคะแนนเฉลยวชาคอมพวเตอรของนกเรยน จ านวน 5 คน แสดงผลการค านวณทได 2. แสดงผลลพธ คอ แสดงผลการค านวณเฉลยคะแนนวชาคณตศาสตรของนกเรยนชนมธยมศกษาปท 3 ทได 3. ขอมลน าเขา คอคะแนนวชาคอมพวเตอรของนกเรยนแตละคนจ านวน 5 คน 4. ตวแปรจ านวน 5 ตวแปร ตงแต score1 …… score5 และคาเฉลย ซงก าหนดดงน - score1 แทนคะแนนของนกเรยนคนท 1 - score2 แทนคะแนนของนกเรยนคนท 2 - score3 แทนคะแนนของนกเรยนคนท 3 - score4 แทนคะแนนของนกเรยนคนท 4 - score5 แทนคะแนนของนกเรยนคนท 5 5. ขนตอนการประมวลผล - รบขอมลคะแนนของนกเรยนตงแต คนท 1 – คนท 5 - ค านวณหาคาเฉลยคะแนนโดยน าคะแนนของนกเรยนทง 5 คนมาบวกกน และหารดวยจ านวนนกเรยนทงหมดคอ 5 - แสดงผลการค านวณคาเฉลยคะแนนวชาคณตศาสตรของนกเรยนชนมธยมศกษาปท 3/1 6. จบการท างาน

11

ภาพท 1.2 ตวอยางผงงานแบบล าดบขนตอน

1.2) โครงสรางแบบมทางเลอก ในการตดสนใจเลอกทางใดทางหนง ( Decision) ในโปรแกรมมการตรวจสอบเงอนไข ( Condition) วาเปนคาจรงหรอคาเทจ แลวด าเนนการตามค าสง ทเงอนไขก าหนดตอไป โดยมรปแบบผงงานดงภาพ

ภาพท 1.3 ผงงานโครงสรางแบบมทางเลอก

12

ภาพท 1.4 ตวอยางผงงานแบบมทางเลอก

ตวอยาง โปรแกรมแสดงผลการสอบทางหนาจอคอมพวเตอร โดยถาคะแนน 50 ขนไป จะแสดงขอความวา "นกเรยนสอบผาน" วธท า 1. สงทโจทยตองการ คอการตรวจสอบคะแนนหรอไม แลวแสดงผลการตรวจสอบคะแนนนน 2. แสดงผลลพธ คอแสดงวา "นกเรยนสอบผาน" 3. ขอมลน าเขา คอ คะแนนทจะใชตรวจสอบ 4. ตวแปรทใชมจ านวน 1 ตวแปร คอ คะแนนทรบเขามาตรวจสอบ แทนดวย score

5. ขนตอนการประมวลผล - รบขอมลคะแนนแสดงผลการสอบทางหนาจอคอมพวเตอร คอ score

- ตรวจสอบคาคะแนน 50 ขนไปหรอไม - แสดงผล กรณทไดคะแนน 50 คะแนนขนไป แสดงขอความวา "นกเรยนสอบผาน" แตถาไดนอยกวา 50 คะแนน ใหจบการท างาน 6. จบการท างาน

13

1.3) โครงสรางแบบท าซ า (Iteration) เปนการท างานแบบวนซ าหลาย ๆ รอบ และ หลดจากเงอนไขกตอเมอเงอนไขตรงกบทก าหนดไว

ภาพท 1.5 ผงงานโครงสรางแบบท าซ า

ตวอยาง การหาผลคณสตรคณแม 12 โดยตองการผลคณ ตงแต 1*12=12 จนกระทง 12*12 = 144 สามารถอธบายไดดงน 1. เรมท างาน 2. ก าหนดคาตวแปร count = 1 3. เรมตนค านวณตงแตครงแรกจนครบเงอนไข โดยเรมตรวจสอบวา count <= 12 จรงใหท า result = count * 12 พมพ result count = count + 1 แลวเรมตนตรวจสอบใหม ท าเชนน จนกวาเงอนไขจะเปนเทจ จบค าสงการวนลป 4. จบการท างาน

14

ภาพท 1.6 ตวอยางผงงานแบบท าซ า

2. การเขยนโปรแกรมเชงวตถ ( OOP : Object-Oriented Programming) หรอเรยก อกอยางหนงวาแนวคดเชงวตถ ตงอยบนพนฐานการแจกแจงรายละเอยดของปญหา ผเขยนโปรแกรมตองพยายามแยกประเภทของวตถใหได ตองมจนตนาการพอสมควร ซงจะมองวตถหนง ๆ เปนแหลงรวมของขอมล และกระบวนการไวดวยกน โดยจะมคลาส ( Class) เปนตวก าหนดคณสมบตของวตถ และคลาสสามารถสบทอดคณสมบต( Inheritance) ทเรยกวา Subclass ได มการน ากลบมาใชใหม (Reusable) ท าใหลดขนตอนการพฒนาโปรแกรมลงได โดยเฉพาะโปรแกรมขนาดใหญทมความซบซอนสง

15

การเขยนสครปตดวยภาษาจาวาสครปต

แมวา HTML เปนภาษาหลกในการพฒนาเวบเพจ แตตว HTML ไมสามารถค านวณ ไมมการก าหนดตวแปร แต รองรบการแทรกค าสงหรอทเรยกวา Script ได ซงม Scripts ทใชกบ HTML มากมาย แตในการเรยนระดบนขอยก JavaScript ทมลกษณะไวยากรณเขาใจไดงาย รบสงขอมลโตตอบกบผใชได มลกษณะเปนโปรแกรมเชงวตถ (OOP: Object-Oriented Programming)

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

ลกษณะและความเปนมาของ JavaScript

JavaScript เปนภาษาประมวลผล ( Programming Language) ทสามารถค านวณ มตวแปร หาผลบวก ลบ คณ หาร ได ซงใน HTML ไมม เพราะ HTML เปนเพยงภาษาแสดงผล (Markup Language)

JavaScript จะเปนโปรแกรมยอยเลก ๆ ( mini program) ทสามารถแทรกรวมอยใน Code HTML ได

JavaScript ไมใชเปนภาษา Java เพราะทงสองไมไดมาจากผผลตรายเดยวกน Java ผลตมาจากบรษท Sun Microsystems ตงแตป พ.ศ. 2534 เปนภาษาทตองม

ตวแปลภาษา ( Compiler) และโคดทเขยนเปนภาษาเครอง สวนทถกแปลออกมาโดยตวแปลภาษาสามารถน าไปแสดงหรอท างานบนหนาเวบได

Java ยงสามารถท างานบน Application ทท างานบนวนโดวได หรอภาษา C หรอ VB แต JavaScript ท าไดเพยง Script ทฝงในหนาเวบหนงเทานน

JavaScript ผลตมาจาก Netscape Communications เมอป 2538 ตอนแรกชอวา Mocha และ LiveScripts ตามล าดบ ตอมาเมอจบมอกบบรษท Sun รวมกนสรางบราวเซอร Netscape Navigator 2.0 ซงบราวเซอรตวนสามารถใชงาน Java ได ท าใหทางบรษท Netscape ไดท าการเปลยนชอ LiveScripts ของตนกลายเปน JavaScript เพอใหสอดคลองกบภาษา Java ของ Sun และใชชอ JavaScript จนถงปจจบน

16

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

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

ภาษา Java มความสามารถสงกวา JavaScript แต JavaScript สามารถท างานในหนาเวบไดงายกวา เพราะเพยงเพม code JavaScript ลงในหนาเวบกสามารถเรยกดผลลพธได ตางจาก Java ทตองใช compiler แปลเปนภาษาเครองกอน แลวจงเพมโคดในหนาเวบเพอเรยกไฟลภาษาเครองนน จากนนจงสามารถเรยกดผลลพธได

รปแบบการเขยนภาษาจาวาสครปต

รปแบบหรอลกษณะโครงสรางการเขยนจาวาสครปตน เปนรปแบบมาตรฐานททก ๆ Script ตองเขยนตามทก าหนด โดยมรปแบบดงน

โครงสรางการเขยนภาษาจาวาสครปต อธบาย <script language= “JavaScript”> ค าสงในการท างาน ค าสงในการท างาน ค าสงในการท างาน </script>

บรรทดท 1 เปนการประกาศใหบราวเซอรรวา บรรทดตอจากนเปนภาษาจาวาสครปต บรรทดท 2 – 4 เปนค าสงการท างานทตองการ บรรทดท 5 เปนการปด หรอ บอกใหบราวเซอรรวาจบภาษาสครปต

17

ตวอยาง

ภาพท 1.7 รปแบบการเขยน JavaScript ใน HTML

ซงสามารถอธบายแตละบรรทดไดดงน <script language="JavaScript"> เปนการระบวานบตงแตนตอไปเปนค าสงใน JavaScript document.write("<font color='red'> ตวอยางการใช JavaScript แรก</font>") แยกแตละค าสงอธบายไดดงตอไปน

» document หมายถง เนอหาในหนาตางทงหมด หากไมเขยนอะไรลงไปจะเปนหนาตางวาง ๆ ขาว ๆ » .(จด) เพอบอกใหคอมพวเตอรวาจะมค าสงมาท างานกบ document ซงถอวา document เปนตวถกกระท า (object) » write เปนวธกระท า (method) ทจะเขยนสงตาง ๆ document » ( วงเลบเปด เปนการเรมเขยน » เครองหมาย " แสดงใหคอมพวเตอรรวาจะเขยนขอความลงใน document และภายในเครองหมายค าพดกคอ code html

18

» คา Attribute ของ HTML ทปกตเขยน 2 ขด เมอเจอ " กอนหนาจะตอง ใส ' (ขดเดยว) เนองจากถาใสแบบ " คอมพวเตอรจะเขาใจวาค าสงจบแลว เพราะมเครองหมาย 2 ขดเรมแรกอยแลว และจะท าใหมขอผดพลาดเกดขน ตวหนงสอไมถกแสดงออกมาทางหนาจอ » " ) ปดดวยเครองหมายค าพด document ในวงเลบเพอจบการเขยน

</script> จบการเขยน JavaScript

ลกษณะการท างานของจาวาสครปต

JavaScript เปนภาษาสครปตเชงวตถ หรอทเรยกวา OOP (Object Oriented Programming) ทมเปาหมายในการออกแบบและพฒนาโปรแกรมในระบบอนเทอรเนต ส าหรบผเขยนเอกสาร HTML สามารถท างานขามแพลตฟอรมได ท างานรวมกบภาษา HTML และภาษาจาวาไดทงทางฝงไคลเอนต(Client) และทางฝงเซรฟเวอร(Server) โดยมลกษณะการท างานดงน

Navigator JavaScript เปน Client-Side JavaScript หมายถง จาวาสครปตทถกแปล ทางฝงไคลเอนต ซงกคอถกแปลทฝงเครองคอมพวเตอรของผใชงาน จงมความเหมาะสมตอการใชงานของผใชสวนใหญ

LiveWire JavaScript เปน Server-Side JavaScript หมายถง จาวาสครปตทถกแปลทางฝง Server ซงกคอฝงเครองคอมพวเตอรผใหบรการเวบ สามารถใชไดกบ Livewire ของ Netscape โดยตรง

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

กบผใชแบบ Interactive คอสามารถสนองพฤตกรรมการใชงาน เชน การสรางเมนแบบ popup และ อน ๆ ตามความตองการ ซงกอนจะท างานกบ JavaScript ตองศกษาความสามารถและขอจ ากด ของ Script ชนดนดงตอไปน

ความสามารถของจาวาสครปต 1. ชวยลดภาระในการท างานของฝงผใหบรการ ( Server) เนองจากเวบบราวเซอร

ฝงผใชบรการหรอทเรยกวา Client สามารถประมวลผล JavaScript ไดเอง 2. มกลไกในการตรวจสอบ การเปรยบเทยบ การตดสนใจ การประมวลผลและสามารถสราง

ฟงกชนไดเอง

19

3. สามารถท างานรวมกบเทคโนโลยอน ๆ ไดแก ActiveX, CGI, Java, Plug-In 4. สามารถเปลยนรปแบบเวบเพจของเอกสาร HTML จาก Static มาเปนแบบ Dynamic

ทสามารถโตตอบกบผใชได 5. ใชงานงาย เพราะมลกษณะเปน Interpreter แบบ Text File ฝงอยในเอกสาร HTML

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

ตรรกศาสตร สตรง รวมทงค าสงควบคมล าดบการด าเนนงาน ไดแก if, while ,for 7. เรยนรงายเหมาะกบนกพฒนาเวบเพจบนระบบอนเทอรเนต

ขอจ ากดของจาวาสครปต 1. ไมสามารถตดตอหรอท างานฝง Server เพอเกบขอมลลงฐานขอมลไดโดยตรง

หากตองการตดตอกบ Server ตองอาศยการท างานในฝง Server เชน CGI, Java Servlet 2. ไมสามารถสรางสวนแสดงผลตาง ๆ บนเวบเพจได ดงนนจงตองใชโปรแกรมภาษาอน

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

3. จาวาสครปตจะท างานตางกนในแตละเวบบน Server เนองจากเวบบราวเซอรตาง ๆ จะใชตวแปลภาษาจาวาสครปตของตนเอง เพออานและแปลค าสงจาวาสครปต ดงนนจงมการท างานตางกนในบางค าสง จงท าใหเวบบราวเซอรบางประเภทแสดงผลลพธของค าสงของสครปตได ไมสมบรณ หรอเกดขอผดพลาด (Error)

การท างานของจาวาสครปตรวมกบ HTML จาวาสครปตเปนภาษาสครปตทประมวลผลฝง Client ดงนนในการเขยนค าสงจาวาสครปต

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

20

วธการเขยนจาวาสครปต เพอสงใหเวบท างาน มอยดวยกน 2 วธดงน 1. เขยนดวยชดค าสงและฟงกชนของจาวาสครปตเอง 2. เขยนตามเหตการณทเกดขนตามการใชงานจากชดค าสงของ HTML

ส าหรบการเขยนค าสงของจาวาสครปตนนสามารถเขยนแทรกไวในสวนใดของเอกสาร HTML กได แตทนยมคอ เขยนแทรกไวระหวางแทก ( Tag) Tag <head>...JavaScript...</head> เนองจากสวนนถกโหลดมากอนสวนอน ๆ ของเอกสาร HTML ดงนนหากเขยน JavaScript ในสวนน จงหมายความวาโปรแกรมทเขยนขนเขยนมาจากจาวาสครปต จะพรอมใหสามารถเรยกใชงานเมอเวบเพจนนแสดง

21

หรอ สามารถเขยนอยในสวนของ <body>...</body> ดงตอไปน

ตวแปร (Variable) ใน JavaScript

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

การตงชอตวแปรใน JavaScript

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

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

แตกตางกนระหวางอกษรตวพมพเลกและตวพมพใหญ เชน ABC จะแตกตางกบ abc และ Abc

22

5. การตงชอมขอพงระวงวาตองไมซ ากบค าสงวน ( Reserve Word) ซงมความหมายเฉพาะ ในภาษาจาวาสครปต บงคบไมใหมการตงชอซ ากบชอโปรแกรม ฟงกชน ตวแปร คาคงทและค าสง ซงค าสงวนในจาวาสครปต ไดแก

การประกาศตวแปร (Declaration)

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

รปแบบ

โดยท

23

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

การก าหนดคาใหกบตวแปร

การก าหนดคาใหกบตวแปรจะใชเครองหมายเทากบ (=) มรปแบบดงน

โดยท data-value หมายถง คาของขอมล โดยสามารถก าหนดไดดงน

1. ขอมลทเปนตวเลขสามารถก าหนดตวเลขไดเลย เชน num=500 2. ขอมลในทางตรรกะ ไดแก จรง(True) หรอเทจ (False) เชน test=true 3. ขอมลสตรง ใหก าหนดอยในเครองหมายค าพด ("...") เชน name="Anan" ตวแปรม 2 จ าพวก หากก าหนดชอตวแปรไวทโปรแกรมหลก โดยไมไดอยในขอบเขต

ฟงกชนใด ๆ เรยกวาตวแปรแบบโกลบอล (Global) ตวแปรพวกนจะมคาคงทอยในหนวยความจ าตลอดการท างานของโปรแกรม ท าใหสามารถเรยกใชไดจากทก ๆ สวนของโปรแกรมรวมถงภายในฟงกชนตาง ๆ ดวย แตถาก าหนดตวแปรไวภายในขอบเขตของฟงกชนใด ๆ จะเรยกตวแปรแบบนนวาตวแปรแบบโลคอล ( Local) เพราะจะเปนตวแปรทมคาคงทอย สามารถเรยกใชไดเฉพาะภายในขอบเขต ของฟงกชนนน ๆ เทานน

ชนดขอมลของตวแปร (Data Type) ชนดขอมลตวแปร เปนการก าหนดประเภทคาของขอมลใหกบตวแปร เพอให

เหมาะสมกบการอางองขอมลจากตวแปรในการท างาน ชนดของขอมลในตวแปรมอยดวยกน 4 ชนด 1. Number เปนขอมลชนดตวเลข หมายถงเลขจ านวนตาง ๆ เชน เลขจ านวนเตม

(Integer) และเลขจ านวนจรง (Floating) เชน Year = 2011 2. Logical เปนขอมลตรรกะซงเกดจากการเปรยบเทยบขอมล ม 2 สถานะ คอ จรง

(True) และ เทจ (False) เชน Disable=False 3. String เปนขอมลประเภทขอความตาง ๆ ซงประกอบดวยอกขระ 1 ตว

หรอมากกวา ขอมลชนดนจะอยในเครองหมายค าพด ("....") เชน ID_code="LD115"

24

4. Null เปนขอมลทก าหนดใหเปนคาวาง หมายถง ไมมคาใด ๆ ปรากฏใชส าหรบ การยกเลกทเกบในตวแปร

การแปลงชนดของขอมล

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

1. ค าสงแปลงจาก String เปน Number มวธการแปลงคาดงน 1.1 ใชฟงกชน parseInt() หรอ parseFloat() ในการแปลงคา 1.2 ใชเครองหมาย (+...) เพมไปขางหนา

2. ค าสงแปลงจาก Number เปน String มวธการแปลงคาดงน 2.1 ใชเครองหมาย " " + ตวแปร หรอ คาทเปนตวเลข

ตวแปรแบบอารเรย (Array)

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

ตวแปรแบบอารเรยมดชนเรมตนท 0 สวนตวแปรตอ ๆ ไปจะมดชนเปน 1 ,2,3 .... ไป ตามล าดบ เมอตองการระบชอตวแปรแบบอารเรยแตละตวกใชรปแบบ name[0],name[1],name[2]..... ไปตามล าดบ เรยงตอกนไปเรอย ๆ เราสามารถสรางตวแปรอาเรยใหมดวย myArray= new array() ดงน

25

คาคงท (Literal หรอ Constant)

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

1. เลขจ านวนเตม (Integer) เปนตวเลขทไมมทศนยมใด ๆ สามารถเขยนใหอยในแบบเลขฐาน 10 (0-9) เลขฐาน 16 (0-9,A-F) เลขฐาน 8 (0-8) , โดยการเขยนเลขฐานตองน าหนาดวยสญลกษณ เชน เลขฐานแปดใหน าหนาดวย O (Octenary) สวนการเขยนเลขฐาน 16 จะน าหนาดวย Ox (Hexadenary)

2. เลขจ านวนจรง ( Floating) รปแบบการเขยนโดยประกอบไปดวยตวเลข จดทศนยม และตวเลขยกก าลง E (Exponential) เชน

5.00E2 จะหมายถงคา 5.00 คณดวย 10 ยกก าลง 2 จะมคาเปน 500 3.141E5 จะหมายถง 3.141 คณดวย 10 ยกก าลง 5 จะมคาเปน 314,100

3. คาบลน (Boolean) เปนคาคงทเชงตรรกะ คอมคาจรง (True) และ เทจ (False) เทานน 4. ขอความสตรง ( String) เปนคาคงทแบบขอความทอยภายในเครองหมายค าพด ("...."

หรอ '....') เชน "โรงเรยน" หรอ 'กระทรวงศกษาธการ'

รหสค าสงพเศษ (Character escape code) รหสค าสงพเศษ ( Character) เปนการก าหนดรหสเพอควบคมการแสดงผลบนหนาจอ

ในลกษณะตาง ๆ โดยใชเครองหมาย \ (Backslash) น าหนาตวอกษรทตองการก าหนดใหเปนรหสค าสงพเศษ มดงน

26

ตวอยาง

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

เปน String แมวาคาทปอนทางคยบอรดจะเปนตวเลขกตาม หากเราตองการตวแปรในรปแบบอน ๆ เราตองก าหนดคาของตวแปรใหเปนชนดทเราตองการ

นพจน (Expression)

นพจน เปนขอค าสงทใชก าหนดคาของขอมล เชน การบวกเลข การเปรยบเทยบขอมล โดยการก าหนดชอของตวแปร ตามดวยเครองหมายทตองการท า (Operations) ตอดวยขอมล เปนผลใหเกดคาขอมลใหกบตวแปรเพอน าไปใชงาน นพจน JavaScript มดวยกน 3 ชนดดงน

1. นพจนคณตศาสตร ( Arithmetic) เปนนพจนทใชเครองหมายทางคณตศาสตรเปนตวกระท า ผลลพธทไดจะมคาเปนตวเลขใหกบตวแปร เชน ใหตวแปร num เกบตวเลข 5000 จะเขยนไดดงน num=5000

2. นพจนตรรกะ ( Logical) เปนนพจนในการเปรยบเทยบขอมลโดยใชเครองหมายในการเปรยบเทยบเพอตรวจสอบขอมลในการเปรยบเทยบวา จรง หรอ เทจ เชน

3. นพจนขอความ ( String) เปนนพจนเกยวกบการก าหนดขอความ การเชอมประโยคขอความ ใชประมวลผลขอความในลกษณะตาง ๆ ผลลพธทไดจงมคาเปนตวอกษรหรอขอความเสมอ เชน ใหตวแปร name เกบชอ Nuanchan จะเขยนไดดงน

27

ตวด าเนนการ (Operator)

ตวด าเนนการ หมายถง เครองหมายก าหนดกรรมวธทางคณตศาสตรพชคณต บลน การเปรยบเทยบระหวางขอมล 2 ตว ซงเรยกวา โอเปอรแรนด ( Operand) โดยอาจมคาเปน ตวเลข ขอความ คาคงท หรอตวแปรตาง ๆ ซงประเภทของตวด าเนนการ (Operator Type) ใน JavaScript มดงน

1. ตวด าเนนการคณตศาสตร (Arithmetic Operator) ตวด าเนนการทางคณตศาสตร ใชส าหรบค านวณ Operand ทเปนคาคงท หรอตวแปรกได

โดยใหคาผลลพธเปนตวเลขตวเดยว Operator เชงคณตศาสตรทสวนใหญรจกคนเคยกนมากทสด ไดแก

2. ตวด าเนนการก าหนดคา (Assignment Operator) ตวด าเนนการก าหนดคา ( Assignment Operator) ตวด าเนนการก าหนดคา เปนเครองหมาย

ในการก าหนดใหตวแปรทอยทางฝงซายมคาเทากบคาเดมในตวแปรทอยทางฝงขวา ดงน

28

3. ตวด าเนนการเพมคาและลดคา (increment / Decrement Operator) ตวด าเนนการเพมคาและลดคา เปนเครองหมายทใชในการเพมหรอลดคาของขอมลทางขวา

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

4. ตวด าเนนการเชงเปรยบเทยบ (Comparison Operator) ตวด าเนนการเชงเปรยบเทยบ หมายถง เครองหมายในการเปรยบเทยบขอมลผลลพธทได

จะมคาตรรกะบลลนเปนจรง (True) และ เทจ (False)

5. ตวด าเนนการเชงตรรกะ (Logical Operator) ตวด าเนนการเชงตรรกะ เปนเครองหมายทใหคาจรง (True) และเทจ (False)

ในการเปรยบเทยบ ประกอบดวยเครองหมาย ดงน

29

6. ตวด าเนนการเชงขอความ (String operator) ตวด าเนนการเชงขอความ เปนการเชอมประโยคขอความเขาดวยกน (Concatenation) โดยใช

เครองหมายบวก(+) เปนตวกระท า

ล าดบความส าคญของเครองหมายหรอตวด าเนนการในการค านวณ

ล าดบท 1 ( ) ล าดบท 2 ++ -- ! ~ ล าดบท 3 * / % ล าดบท 4 + - ล าดบท 5 << >> >>> ล าดบท 6 < <= > >= ล าดบท 7 == != ล าดบท 8 & ล าดบท 9 ^ ล าดบท 10 | ล าดบท 11 &&

30

ล าดบท 12 || ล าดบท 13 = += -= *= /= %= <<= >>= >>>= &= ^= !=

ฟงกชน (Function)

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

ชนดของฟงกชน ฟงกชนในภาษาสครปต มอยดวยกน 2 แบบคอ 1. ฟงกชนมาตรฐาน (Standard Function) เปนฟงกชนทมอยแลวในภาษาจาวาสครปต

เราสามารถน าไปใชงานไดทนท 2. ฟงกชนสรางขนเอง (User-Defined Function) เปนฟงกชนทผใชสรางขนมาเอง

เพอก าหนดใหท างานใดงานหนงจนส าเรจ

การเรยกใชฟงกชน เปนการก าหนดทศทางการท างานของค าสง หรอก าหนดสวนของโปรแกรมใหท างานใด

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

รปแบบ

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

31

การสรางฟงกชนขนใชงานเอง(User-defined Function) เปนฟงกชนทผใชสรางขนมาเพอก าหนดใหท างานอยางใดอยางหนง การสรางฟงกชนนน

จะขนตนดวยค าวา Function ตามดวยชอของฟงกชนทตองการ มรายละเอยด ดงน รปแบบ

โดยก าหนดให ชอฟงกชน ( Function Name) หมายถง ชอของฟงกชนทสรางขน ไมไปซ ากบชอ

ของฟงกชนอน พารามเตอร ( Parameter) หมายถง คาของขอมลหรอตวแปรทอางอง ( Argument)

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

ขอค าสง (Statement) หมายถง ค าสงตาง ๆ ทประกอบขนเพอใหด าเนนการภายในฟงกชน ตองก าหนดค าสงตาง ๆ ภายใตเครองหมายวงเลบปกกา {....}

การวางต าแหนงฟงกชน ส าหรบการวางต าแหนงฟงกชนในภาษาจาวาสครปต มลกษณะเชนเดยวกบการวางต าแหนง

สครปต นนคอจะวางไวในสวนของ <head> หรอ วางไวในสวนของ <body> ขนอยกบวา ตองการใหฟงกชนนนถกโหลดใชงานกอนหรอหลงตามล าดบการใชงาน

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

32

ได และนอกจากนยงสามารถเรยกใชงานฟงกชนอน ๆ ทก าหนดในสวนของ <head> ท างานรวมกน ไดอกดวย

รปแบบ

โดยก าหนดใหกลมค าสงของภาษาจาวาสครปต หมายถง ค าสงใด ๆ หรอฟงกชน หรอการ

เรยกใชฟงกชนทตองการใชงาน

33

ชดค าสง (Statement)

ชดค าสง คอ ขอความหรอประโยคทสามารถสงใหภาษาจาวาสครปต ด าเนนงานตามล าดบ ทไดสงไว การเขยนค าสงจะสนสดดวยเครองหมายเซมโคลอน ( ;) เราสามารถรวมค าสงหลาย ๆ ชด ไวทเดยวกนได โดยใชเครองหมายวงเลบปกกา {...} เชน การเขยนค าสงในฟงกชน การเขยนค าสง ในการตดสนใจ

ตวอยางการเขยนชดค าสง 2 ค าสง ก าหนดใหตวแปร name เกบชอ Nungning พมพประโยคขอความวา My name is Nungning

การรบและแสดงขอมล

การท างานพนฐานของโปรแกรม จะตองมการรบขอมลเขามาประมวลผล และแสดงผลลพธทางจอภาพ ซงในภาษาจาวาสครปต มค าสงและฟงกชนมาตรฐานทใชในการรบและแสดงผลขอมลดงน

1. การแสดงขอมลทางจอภาพ จาวาสครปตแบงค าสงในการแสดงผลขอมลบนหนาเวบเพจออกเปน 2 ค าสง ดงน

1.1 ค าสง document.write() ใชแสดงขอความบนหนาเวบเพจ โดยมรปแบบดงน

34

ตวอยาง

1.2 ค าสง document.writeln() ใชแสดงขอความบนหนาเวบ แบบขนบรรทดใหม โดยมรปแบบดงน

ตวอยาง

2. การรบขอมลโดยใชฟงกชน prompt()ใชแสดงกรอบโตตอบ ( Dialog Box) เพอรบขอมลจากผใช โดยมรปแบบค าสงดงน

35

โดยท text หมายถง ขอความทปรากฏบนกรอบโตตอบ value หมายถง คา หรอ ขอความทปรากฏในชองกรอกขอมล โดยจะก าหนดคาหรอไมกไดหากไมก าหนด จะแสดงขอความ "undefined" ตวอยาง

3. การรบขอมลโดยใชฟงกชน confirm()ใชแสดงกรอบตอบโตทมลกษณะเปนค าถาม

เพอใหผใชยนยนการท างาน หรอยกเลกการท างาน หากผใชยนยนการท างาน function จะคนคา เปน true แตถาหากผใชยกเลกการท างาน function จะคนคาเปน false โดยมรปแบบค าสงดงน

โดยท question หมายถง ค าถาม ตวอยาง

4. การแสดงขอมลโดยใชฟงกชน alert() ใชแสดงกรอบโตตอบเพอแจงเตอนการท างาน หรอแสดงขอความหรอคาของตวแปรตาง ๆ ใหผใชทราบ มลกษณะคลายกบ Message Box ของ Windows โดยโปรแกรมจะหยดท างานชวคราว เมอกรอบโตตอบปรากฏขนมา และจะรอจนกระทงผใชคลก ปม “OK” โปรแกรมจงจะท างานตอไป มรปแบบค าสงดงตอไปน

36

โดยท

text หมายถง ขอความทตองการแจงเตอน variable หมายถง ตวแปรทตองการแจงเตอน

การใสขอความใหฟงกชน alert() จะตองอยภายในเครองหมาย “…” ถาเปนตวแปรสามารถใสเปนชอตวแปรไดเลย แตถาตองการแสดงขอความพรอมดวยตวแปร จะตองใสเครองหมายบวก + รวมอยดวย ตวอยาง

ค าสงควบคมการท างาน

ค าสงทใชในการควบคมการท างานของโปรแกรม ประกอบดวยกลมค าสง 2 กลม คอ 1. ค าสงในการตดสนใจ (Selection) 2. ค าสงในการวนรอบ (Iteration)

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

เดยวมาท างาน ไดแก ค าสง if และ switch ซงชดค าสงแบบนในจาวาสครปตจะมอย 4 ลกษณะดงน 1.1 ค าสง if if เปนการก าหนดใหโปรแกรมท างานเมอเงอนไขทระบหลง if เปนจรง โดยมรปแบบ

ของประโยค ดงน

37

1.2 ค าสง if...else if..else เปนการก าหนดเงอนไขเพมขนมาจาก if โดยมความหมายคอ ถามเงอนไขหลง if

ไมเปนจรง โปรแกรมจะท างานมาท else แทน ซงมรปแบบค าสง ดงน

1.3 ค าสง if...else if...else if..else if..else เปนการก าหนดเงอนไขทซอนขนมาจาก if โดยมความหมาย คอ ถาเงอนไข if

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

38

1.4 ค าสง switch switch เปนค าสงทคลาย ๆ กบ if..else if ..else คอ ถาเงอนไดเปนจรงทเงอนไขใด กจะท า

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

39

2. ค าสงในการวนรอบ (Iteration) เปนค าสงทมการท างานซ ากนหลาย ๆ ครง จนกวาจะครบตามเงอนไขทก าหนด การท างาน

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

2.1 การวนรอบในรปแบบ for การวนรอบในรปแบบของ for น จะเปนการวนรอบทเราตองก าหนดคาเรมตนในการวนรอบ

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

จากตวอยาง เปนการวนรอบจ านวน 5 รอบ โดยเราท าการก าหนดคาเรมตนไวทเลข 1

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

ภาพท 1.8 ผลการท างานของโปรแกรมตวอยางการวนรอบแบบ for

40

2.2 การวนรอบในรปแบบของ while การวนรอบในรปแบบของ while นเปนการวนรอบโดยทเราก าหนดเงอนไขในการวนรอบ

ลงไป หากเงอนไขทก าหนดไวยงมคาเปนจรง ( True) อยการวนรอบนนจะด าเนนตอไป ดงตวอยางตอไปน

จากตวอยาง เปนการวนรอบจ านวน 5 รอบและจะมการท างานรปแบบเงอนไขตาง ๆ

เชนเดยวกบรปแบบของ for ดงภาพ

ภาพท 1.9 ผลการท างานของโปรแกรมตวอยางการวนรอบแบบ while

41

2.3 การวนรอบในรปแบบ do...while การวนรอบในรปแบบของ do..while มการท างานทคลายกบประโยค while แตจะแตกตางกน

ตรงท do..while จะมการท างานใน Block ค าสง 1 ครง กอนตรวจสอบเงอนไขเพอท าการวนรอบ ดงตวอยางตอไปน

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

ไววา หาก i มากกวา 2 ใหท างานในการวนรอบ แตคาเรมตนทก าหนดให i คอ 1 ฉะนน คา i จงนอยกวา 2 และท าใหเงอนไขเปนเทจและไมเกดการวนรอบแตโปรแกรมกยงท างานใน Block ค าสง ของ do...while 1 ครง ผลทไดคอ

ภาพท 1.10 ผลการท างานของโปรแกรมตวอยางการวนรอบแบบ do..while

42

ตวอยาง 1. โปรแกรมท างานแบบล าดบ (sequence.html)

2. โปรแกรมแบบทางเลอก (Condition.html)

43

3. โปรแกรมแบบท าซ า (loop.html)

44

อางอง

โกสนต เทพสทธทรากรณ. (2555). หนงสอเรยนรายวชาพนฐานกลมสาระการเรยนร

การงานอาชพและเทคโนโลย เทคโนโลยสารสนเทศ ชนมธยมศกษาปท 3

ตามหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551. กรงเทพ ฯ : แมค.

ธนาวฒ ประกอบผล. (2555). หนงสอเรยนรายวชาพนฐาน เทคโนโลยสารสนเทศ

และการสอสาร ม.3 ชนมธยมศกษาปท 3 กลมสาระการเรยนร การงานอาชพ

และเทคโนโลย ตามหลกสตรแกนกลางการศกษาขนพนฐานพทธศกราช 2551.

กรงเทพ : ซคเซส มเดย .

ไพโรจน ตรณธนากล, ไพบลย เกยรตโกมล, และเสกสรร แยมพนจ. (2546).

การออกแบบและผลตบทเรยนคอมพวเตอรชวยสอน ส าหรบ e-Learning .

กรงเทพ ฯ : ศนยสอเสรมกรงเทพ .

มนตชย เทยนทอง. (บก.). (2555). หนงสอเรยนรายวชาพนฐาน เทคโนโลยสารสนเทศ

และการสอสาร 3 ชนมธยมศกษาปท กลมสาระการเรยนรการงานอาชพ

และเทคโนโลย ตามหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551.

กรงเทพ ฯ : พฒนาคณภาพวชาการ (พว.) จ ากด.

วเชยร พมพวง. (2555). หนงสอเรยนรายวชาพนฐาน เทคโนโลยสารสนเทศ

และคอมพวเตอร 3 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพ

และเทคโนโลย ตามหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551.

กรงเทพ ฯ : เอมพนธ จ ากด.