บัตรเนื้อหาที่ 2 การเขียนผังงานโปรแกรม

ชุดท่ี1 การพัฒนาโปรแกรมและการจาลองความคดิ บัตรเนื้อหาที่ 2 การเขยี นผังงานโปรแกรม สำหรับหวั ข้อกำรเขียนผงั งำนโปรแกรมจะประกอบดว้ ยเน้ือหำท่ีสำคัญดงั นี้คอื ควำมหมำยของผังงำน ประเภทของผังงำนสญั ลักษณ์มำตรฐำนที่ใช้เขยี นผังงำนโปรแกรมหลักกำรเขยี นผังงำนโปรแกรมและขั้นตอน กำรเขยี นผงั งำนโปรแกรมดังรำยละเอียดต่อไปน้ี ความหมายของผังงาน “ผงั งาน” “ผังงาน” (flowchart) ทำงคอมพิวเตอร์ หมำยถึง แผนภำพที่เขียนขึ้นโดยใช้สัญลักษณ์มำตรฐำน เพอ่ื แสดงขนั้ ตอนวิธีกำรทำงำนของโปรแกรม หรอื ระบบงำนที่ตอ้ งกำร ประเภทของผงั งาน ผงั งำนสำมำรถจำแนกออกได้ 2 ประเภท คอื 1. ผังงานระบบ (system flowchart) หมำยถึง ผังงำนที่แสดงถึงขั้นตอนวิธีกำรทำงำนของ ร ะ บ บ ง ำ น ใ ด ร ะ บ บ ห น ึ ่ ง ซ ึ ่ ง ใ น ผ ั ง ง ำ น ร ะ บ บ จ ะ แ ส ด ง ใ ห ้ เ ห ็ น ถ ึ ง ส ื ่ อ ท ี ่ ใ ช ้ ร ั บ ข ้ อ ม ู ล บ ั น ท ึ ก ข ้ อ มู ล วิธีกำรประมวลผล ขั้นตอนกำรทำงำนและควำมสัมพนั ธ์ของส่วนตำ่ งๆ ในระบบงำนอยำ่ งกว้ำง ๆ เพื่อให้เห็น ภำพรวมของระบบงำนใดระบบงำนหน่งึ เชน่ ชดุ กิจกรรมการเรียนรู้การเขยี นโปรแกรมภาษาคอมพิวเตอร์ 1 รายวชิ าภาษาซี ง30243 ชัน้ มัธยมศกึ ษาปีท่ี 5

ชุดท่ี1 การพฒั นาโปรแกรมและการจาลองความคิด รูปท่ี 1.1 ผงั งำนระบบแสดงกำรตดั เกรด 2. ผังงานโปรแกรม (program flowchart) หมำยถึงผังงำนที่แสดงขั้นตอน วิธีกำรทำงำนของ โปรแกรมทตี่ อ้ งกำรเขียนข้นึ ภำยในผงั งำนโปรแกรม จะแสดงใหเ้ หน็ ขั้นตอน วิธีกำรทำงำน ของโปรแกรมอย่ำง ละเอียด เพื่อให้คอมพิวเตอร ์์สำมำรถทำงำนตำมที่เขียนไว้ในผังงำนโปรแกรม ได้อย่ำงถูกต้อง โดยเรำ สำมำรถนำขั้นตอน วิธีกำรทำงำนของโปรแกรมในขั้นกำรวิเครำะห์งำน มำเขียนเป็นผังงำนโปรแกรมได้ ทันที จำกนั้นก็สำมำรถนำผังงำนโปรแกรมไปเขียนโปรแกรมตำมทีต่ ้องกำรได้ ดังนั้นในเรื่องของกำรเขียนผัง งำนท่ีจะกลำ่ วตอ่ ไปนจี้ ะเกยี่ วข้องกบั ผงั งำนโปรแกรมท้ังสน้ิ เช่น รูปที่ 1.2 ผังงำนโปรแกรมแสดงรำยละเอียดกำรทำงำนของโปรแกรมสำหรับตดั เกรด ชุดกิจกรรมการเรยี นรูก้ ารเขยี นโปรแกรมภาษาคอมพวิ เตอร์ 2 รายวชิ าภาษาซี ง30243 ชน้ั มธั ยมศึกษาปีที่ 5

ชุดที่1 การพฒั นาโปรแกรมและการจาลองความคิด สญั ลกั ษณ์มาตรฐานท่ีใช้เขยี นผงั งานโปรแกรม สถำบันมำตรฐำนแห่งชำติของสหรัฐอเมริกำ (American National Standard Institute) และ องค์กำรระหว่ำงประเทศว่ำด้วยกำรมำตรฐำน (International Organization for Standardization) ได้ ร่วมกันกำหนดสัญลักษณ์มำตรฐำนท่ใี ช้เขียนผงั งำนโปรแกรม โดยจะนำเสนอสญั ลกั ษณท์ ่ีนิยมนำมำใช้เขียนผัง งำนโปรแกรม ดังตอ่ ไปนี้ 1. สัญลกั ษณ์ Process ความหมายของ Process คอื การกาหนดค่าหรือการคานวณคา่ ตวั อยา่ งท่ี 1.3 แสดงกำรกำหนดค่ำใหต้ ัวแปร Total ตวั อยา่ งที่ 1.4 แสดงกำรคำนวณค่ำผลรวมของตัวแปร Total ชุดกจิ กรรมการเรยี นรู้การเขยี นโปรแกรมภาษาคอมพิวเตอร์ 3 รายวชิ าภาษาซี ง30243 ชนั้ มธั ยมศึกษาปีท่ี 5

ชุดท่ี1 การพัฒนาโปรแกรมและการจาลองความคิด 2. สญั ลกั ษณ์ Decision ความหมายของ Decision คือการทดสอบเง่อื นไขหรือเปรียบเทยี บเงื่อนไข เพอ่ื ตดั สนิ ใจทางานอยา่ งใดอย่างหนึง่ ตามทตี่ อ้ งการ ตวั อย่างที่ 1.5 แสดงกำรเปรียบเทยี บเงื่อนไข 1 ทำงเลอื ก ชดุ กจิ กรรมการเรียนรกู้ ารเขยี นโปรแกรมภาษาคอมพิวเตอร์ 4 รายวชิ าภาษาซี ง30243 ชน้ั มธั ยมศกึ ษาปที ี่ 5

ชดุ ท่ี1 การพัฒนาโปรแกรมและการจาลองความคดิ ตวั อย่างที่ 1.6 แสดงกำรเปรยี บเทียบเง่ือนไข 2 ทำงเลอื ก 3. สัญลักษณ์ Start/ Stop program หรือ Terminal Interrupt ความหมายของสัญลกั ษณ์ คือ การเร่ิมตน้ โปรแกรม หรือการสน้ิ สุดการทางานของโปรแกรม หรอื หยุดการทางานชัว่ คราว ชุดกจิ กรรมการเรยี นรกู้ ารเขยี นโปรแกรมภาษาคอมพิวเตอร์ 5 รายวชิ าภาษาซี ง30243 ช้นั มธั ยมศึกษาปที ี่ 5

ชุดท่ี1 การพัฒนาโปรแกรมและการจาลองความคดิ ตวั อย่างท่ี 1.7 แสดงกำรใช้งำนสัญลกั ษณ์ Start/ Stop program หรอื Terminal Interrupt 4. สัญลักษณ์ Input / Output ความหมายของสญั ลกั ษณ์ คอื การรบั ขอ้ มลู (input) หรือการแสดงผลลพั ธ์ (output)โดยไม่ได้ระบุส่อื ท่ีใช้ ตัวอย่างท่ี 1.8 แสดงกำรใชง้ ำนสญั ลักษณ์ Input/ Output ชดุ กิจกรรมการเรยี นรู้การเขยี นโปรแกรมภาษาคอมพวิ เตอร์ 6 รายวชิ าภาษาซี ง30243 ชัน้ มธั ยมศึกษาปที ี่ 5

ชดุ ที่1 การพฒั นาโปรแกรมและการจาลองความคิด 5. สญั ลกั ษณ์ Display ความหมายของสัญลักษณ์ คือ การแสดงผลลัพธท์ างจอภาพ ตวั อยา่ งท่ี 1.9 แสดงกำรใช้งำนสัญลักษณ์ display 6. สัญลักษณ์ Document ความหมายของสัญลักษณ์ คอื การพมิ พ์ผลลพั ธ์ออกทางกระดาษพิมพ์ ตวั อยา่ งท่ี 1.10 แสดงกำรใชง้ ำนสัญลกั ษณ์ Document ชดุ กิจกรรมการเรยี นรู้การเขยี นโปรแกรมภาษาคอมพิวเตอร์ 7 รายวชิ าภาษาซี ง30243 ชนั้ มธั ยมศกึ ษาปีที่ 5

ชุดที่1 การพฒั นาโปรแกรมและการจาลองความคิด 7. สญั ลกั ษณ์ Manual Input ความหมายของสัญลักษณ์ คอื การรับขอ้ มลู หรอื คาส่งั ผ่านทางคีย์บอรด์ ตวั อย่างท่ี 1.11 แสดงกำรใชง้ ำนสญั ลกั ษณ์ Manual Input 8. สญั ลกั ษณ์ Manual Operation ความหมายของสัญลกั ษณ์คอื การรับขอ้ มลู หรอื แสดงผลลัพธ์โดยไม่ระบสุ ื่อ ชุดกจิ กรรมการเรียนรู้การเขยี นโปรแกรมภาษาคอมพวิ เตอร์ 8 รายวชิ าภาษาซี ง30243 ช้ันมัธยมศกึ ษาปีท่ี 5

ชุดที่1 การพฒั นาโปรแกรมและการจาลองความคิด ตวั อย่างที่ 1.12 แสดงกำรใชง้ ำนสญั ลกั ษณ์ Manual Operation 9. สัญลักษณ์ Connector ความหมายของสญั ลักษณ์ คือ แสดงจดุ เชอ่ื มต่อจากท่หี นง่ึ ไปยงั อกี ทห่ี น่งึ ของผงั งาน โดยท่จี ดุ เชอ่ื มต่อน้อี ยใู่ นหนา้ เดยี วกัน ชุดกจิ กรรมการเรยี นรู้การเขยี นโปรแกรมภาษาคอมพิวเตอร์ 9 รายวชิ าภาษาซี ง30243 ช้ันมัธยมศกึ ษาปที ี่ 5

ชุดที่1 การพฒั นาโปรแกรมและการจาลองความคิด ตัวอย่างที่ 1.13 แสดงกำรใชง้ ำนสัญลกั ษณ์ Connector 10. สญั ลกั ษณ์ Off page Connector ความหมายของสัญลกั ษณ์ คือ แสดงจุดเช่ือมตอ่ จากทหี่ นึง่ ไปยงั อกี ท่ีหนึง่ ของผงั งาน โดยท่จี ุดเชื่อมตอ่ น้ีอยู่ตา่ งหนา้ กัน ตัวอย่างท่ี 1.14 แสดงกำรใช้งำนสญั ลักษณ์ Off page Connector คำนวณค่ำ Avg = Total + N เสรจ็ แลว้ ไปทำงำนต่อไปที่จุด B โดยที่จุด B อยู่ตำ่ งหนำ้ กนั ชุดกจิ กรรมการเรียนร้กู ารเขยี นโปรแกรมภาษาคอมพวิ เตอร์ 10 รายวชิ าภาษาซี ง30243 ชนั้ มัธยมศกึ ษาปีท่ี 5

ชุดท่ี1 การพัฒนาโปรแกรมและการจาลองความคิด 11. สัญลกั ษณ์ flow line and arrowheads ควำมหมำยของสัญลักษณ์ คอื แสดงทิศทำง กำรทำงำนของผังงำน โดยใช้ลูกศร เปน็ ตัวกำหนดทศิ ทำงกำรทำงำนของผงั งำน ตัวอย่างที่ 1.15 แสดงกำรใชง้ ำนสัญลกั ษณ์ flow line and arrowheads 12. สญั ลกั ษณ์ Punched Card ความหมายของสัญลักษณ์คือการรบั ขอ้ มลู หรอื แสดงผลลพั ธ์บนบัตรเจาะรู ชุดกจิ กรรมการเรยี นรู้การเขยี นโปรแกรมภาษาคอมพวิ เตอร์ 11 รายวชิ าภาษาซี ง30243 ชัน้ มธั ยมศกึ ษาปีที่ 5

ชุดท่ี1 การพัฒนาโปรแกรมและการจาลองความคดิ ตัวอย่างท่ี 1.16 แสดงกำรใชง้ ำนสญั ลกั ษณ์ Punched Card หลักการเขียนผงั งานโปรแกรม กำรเขียนผงั งำนโปรแกรม มหี ลักกำรเขียนดังนี้ 1. เขยี นผงั งำนจำกดำ้ นบนลงด้ำนลำ่ ง 2. ใชส้ ัญลกั ษณใ์ ห้ตรงกบั ควำมหมำยของผังงำน 3. ใชเ้ สน้ flow line และ arrowheads แสดงทิศทำงกำรทำงำนของผงั งำน 4. ใส่คำอธบิ ำยลงในสัญลกั ษณส์ ั้น ๆ แตเ่ ข้ำใจง่ำย จะใช้ภำษำไทยหรอื องั กฤษกไ็ ด้ 5. หลกี เล่ยี งกำรโยงเส้นทิศทำงของผงั งำนให้ตัดกันเพรำะจะทำให้สบั สน ควรใช้จดุ เชือ่ มตอ่ (connector) หนำ้ เดียวกันแทน จะเข้ำใจไดง้ ำ่ ยและเป็นระเบยี บ 6. พยำยำมเขยี นผงั งำนให้จบในหน้ำกระดำษเดยี วกัน แต่ถำ้ ไม่จบในหนำ้ เดยี วกัน ควรใชจ้ ุดเช่อื ม ต่อตำ่ งหนำ้ กระดำษ (off page connector) ชดุ กจิ กรรมการเรียนรกู้ ารเขยี นโปรแกรมภาษาคอมพิวเตอร์ 12 รายวชิ าภาษาซี ง30243 ช้ันมธั ยมศกึ ษาปีที่ 5

ชุดท่ี1 การพฒั นาโปรแกรมและการจาลองความคดิ เพ่ือควขำนั้ มตเขอ้ำนใกจเากรี่ยเขวียกนบั ขผ้ันงงตาอนนโกปำรรแเขกียรมนผงั งำนโปรแกรมได้ถกู ต้องใหศ้ กึ ษำจำกตวั อยำ่ งดังต่อไปน้ี ตวั อย่างท่ี 1.17 จงเขียนผังงำนโปรแกรมท่ีไดว้ เิ ครำะห์งำนมำแลว้ ในตวั อย่ำงที่ 1.2 วธิ ีทา จากการวิเคราะห์งานในตวั อย่างที่ 1.2 จะไดว้ ่า 1. เร่ิมตน้ ทำงำน 2. รบั ขอ้ มลู ค่ำควำมยำว และควำมกว้ำงของสี่เหล่ียมผนื ผ้ำผ่ำนทำงคีย์บอร์ด 3. คำนวณพื้นทสี่ ี่เหลีย่ มผืนผำ้ ตำมสตู ร Area = Width * Length 4. พมิ พ์ค่ำควำมยำว ควำมกว้ำง และพืน้ ที่ส่เี หลยี่ มผนื ผ้ำออกทำง จอภำพ 5. จบกำรทำงำน กำรเขียนผังงำนโปรแกรม จะนำขั้นตอนวธิ กี ำรทำงำนของโปรแกรม ท่ไี ดจ้ ำกกำรวเิ ครำะหง์ ำน มำเขยี นผังงำนได้ดังน้ี รปู ท่ี 1.3 แสดงผงั งำนขัน้ ตอนวิธีกำรทำงำนของโปรแกรม 13 ชุดกิจกรรมการเรียนรกู้ ารเขยี นโปรแกรมภาษาคอมพวิ เตอร์ รายวชิ าภาษาซี ง30243 ช้นั มัธยมศึกษาปที ่ี 5