EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

ปฏิบัติการครั้งที่ 3
Flowchart Diagram (การเขียนผังงาน)

▪ ผลการเรียนรู้ที่คาดหวัง
สามารถออกแบบ Flowchart Diagram และ Pseudo Code ในการเขียนโปรแกรมได้

▪ ระดับผลการเรียนรู้ที่คาดหวัง

ระดับผลการเรียนรู้ที่คาดหวัง ระดับพอใช้ ระดับดี ระดับดีมาก

สามารถเขียน Pseudo Code จาก Flowchart
✓ ✓ ✓
Diagram ที่กำหนดให้ได้
สามารถเขียน Flowchart Diagram จาก Pseudo
✓ ✓
Code ที่กำหนดให้ได้
เขียนโปรแกรมหาค่าเฉลี่ยจำนวนเต็ม 5 จำนวนได้ ✓

1
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

การเขียนโปรแกรมเบื้องต้นจำเป็นต้องเรียนรู้ถึงวิธีการอธิบายแนวความคิดวิธีการแก้ปัญหา ลำดับการ
ทำงานของตัวโปรแกรมเพื่อประโยชน์ในการพัฒนาหรือการเขียนโปรแกรม โดยปรกติจะมีมาตรฐานที่ใช้ในการ
อธิ บ ายหลายรู ป แบบ เช่ น Flowchart Diagram, DFD Diagram, ER Diagram, UML Diagram, Pseudo
Code เป็นต้น การเรียนในรายวิชา EECP0101 Introduction to Computer นัน้ เป็นการเขียนโปรแกรมด้วย
ภาษาซี ซึ่งเป็นการเขียนโปรแกรมแบบโครงสร้าง (Structural programming) ผู้สอนจึงเลือกใช้ Flowchart
Diagram และ Pseudo Code ในการอธิบายการเขียนโปรแกรมเพราะเป็นวิธีที่นิยมใช้สำหรับการเขียน
อธิบายโปรแกรมแบบโครงสร้าง (Structural programming) โดยจะมีส่วนหลักๆคือการรับข้อมูล (input),
การคำนวณภายใน (process), การแสดงผลการคำนวณ (output) เรี ย งเป็ น ลำดั บไล่ จากเริ่ มต้นจนจบ
กระบวนการสำหรับโฟลว์ชาร์ตจะอธิบายการกระบวนการเป็นลำดับได้ดี ส่วน Pseudo Code จะมีลักษณะ
ใกล้เคียงคำสั่งของโปรแกรมในภาษานั้นๆที่จะใช้

ตัวอย่าง โปรแกรมคิดค่าไฟฟ้า
Flowchart Diagram Pseudo Code
1. เริ่มต้น
เริ่ม ต้น
2. รับข้อมูลจำนวนหน่วยไฟฟ้า
3. รับข้อมูลราคาต่อหน่วย
4. คำนวณค่าไฟฟ้า จากสูตร
รับข้อมูลจานวนหน่วยไฟฟ้า ค่าไฟฟ้า = จำนวนหน่วยไฟฟ้า ราคาต่อหน่วย
5. แสดงผลลัพธ์ค่าไฟฟ้าที่คำนวณได้ผ่าน
MessageBox
รับข้อมูลราคาต่อหน่ว ย
6. จบการทำงาน

ค่าไฟฟ้า = จานวนหน่ว ยไฟฟ้า ราคาต่อหน่วย

แสดงค่าไฟฟ้า
ผ่าน MessageBox

จบการทางาน

2
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

สัญลักษณ์ของผังงาน
การเขียนผังงานเบื้องต้นเราจะใช้สัญลักษณ์ดังต่อไปนี้

สัญลักษณ์ หน้าที่ หรือ ความหมาย

จุดเริ่มต้นและจุดสิ้นสุดของโปรแกรม

เส้นทางการไหลของโปรแกรมเพื่อช่วยในการเชื่อมแต่ละขั้นตอนโปรแกรม

การประมวลผลภายในหรือการคิดคำนวณ

การรับข้อมูลเข้า หรือ การส่งข้อมูลออก โดยไม่ระบุสื่อว่าจะรับหรือส่งผ่าน

อะไร
จุดตัดสินใจ หรือ เงื่อนไข ให้โปรแกรมเลือกทำตามที่กำหนด

การนำข้อมูลเข้าด้วยมือมนุษย์ เช่น ใช้ Keyboard, Mouse

การแสดงผลออกทางจอภาพ

การแสดงผลออกทางเครื่องพิมพ์

จุดเชื่อมต่อ คือ จุดรวมหลายเส้นทางของโปรแกรมเข้าด้วยกัน เพื่อไปขั้นตอน

ต่อไปที่มีการทำงานเหมือนกัน
การเชื่อมต่อภายในหน้าเดียวกัน ในกรณีที่ผังงานไม่สามารถแสดงได้หมดภาย
A
บริเวณนั้น ๆ ได้
การเชื่อมต่อไปยังหน้าใหม่ ในกรณีที่ผังงานไม่สามารถแสดงได้หมดภายใน
A
หนึ่งหน้า
ใช้แสดงถึงการกระโดดไปเรียกใช้งานโปรแกรมย่อย หลังจากนั้นจะกระโดด
กลับมาทำคำสั่งถัดไปตามปกติเหมือนรูปอื่นๆ

3
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

การเขียนผังงานมีการเขียนอธิบายตามโครงสร้างของโปรแกรมอยู่ 3 แบบ

Process 1

1. แบบเป็นลำดับ (Sequence) Process 2

Process 3

Decisio

2. แบบเป็นทางเลือก (Decision)
Process 1 Process 2

3. แบบเป็นการวนทำซ้ำ (Repetition)
Yes
Decisio Process 1
No

4
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

การทดลองที่ 3.1 ให้นักศึกษาเขียน Pseudo Code จาก Flowchart Diagram ที่โจทย์กำหนด

มาให้

3.1.1 โปรแกรมรับข้อความ 1 ข้อความ จากนั้นแสดงข้อความดังกล่าวผ่าน MessageBox

Flowchart Diagram Pseudo Code

เริ่มต้น

รับข้อความ 1 ข้อความ

แสดงข้อความที่รับมา
ผ่าน MessageBox

จบการทางาน

5
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

3.1.2 โปรแกรมรับข้อมูลนักศึกษาและแสดงข้อมูลดังกล่าวผ่าน MessageBox

Flowchart Diagram Pseudo Code

เริ่มต้น

รับข้อมูลรหัสนักศึกษา

รับข้อมูลชื่อ-นามสกุล

รับข้อมูลสาขาที่สนใจเรียน

แสดงข้อมูลนักศึก ษา
ผ่าน MessageBox

จบการทางาน

6
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

การทดลองที่ 3.2 ให้นักศึกษาเขียน Flowchart Diagram จาก Pseudo Code ที่โจทย์กำหนด

มาให้

3.2.1 โปรแกรมคำนวณสมการ 𝑧 = 𝑥 2 + 𝑦
Flowchart Diagram Pseudo Code
1. เริ่มต้น
2. รับค่าจำนวนเต็ม x
3. รับค่าจำนวนเต็ม y
4. คำนวณหาตามสมการ 𝑧 = 𝑥 2 + 𝑦
5. แสดงผลลัพธ์ค่า z ที่คำนวณได้ ผ่าน
MessageBox
6. จบการทำงาน

7
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

3.2.2 โปรแกรมหาค่าเฉลี่ยจำนวนเต็ม 5 จำนวน

Flowchart Diagram Pseudo Code
1. เริ่มต้น
2. รับค่าจำนวนเต็ม n1
3. รับค่าจำนวนเต็ม n2
4. รับค่าจำนวนเต็ม n3
5. รับค่าจำนวนเต็ม n4
6. รับค่าจำนวนเต็ม n5
7. คำนวณหาค่าเฉลี่ยตามสมการ
n1 + n2 + n3 + n4 + n5
result =
5
8. แสดงผลลัพธ์ ค ่ าเฉลี่ย result ที่คำนวณได้ผ่าน
TextBox
9. จบการทำงาน

8
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

การทดลองที่ 3.3 ให้นักศึกษาเขียนโปรแกรมจากโจทย์ที่กำหนดให้

ให้นักศึกษาสร้าง Solution ชื่อ Lab03 หลังจากนั้นให้สร้าง Project ตามข้อย่อยดังต่อไปนี้

3.3.1 Project ชื่อ Lab03_1 โปรแกรมคำนวณสมการ 𝑧 = 𝑥 2 + 𝑦

ให้ตั้งชื่อ Object ต่าง ๆ ดังรูปด้านล่างนี้

โดยโปรแกรมมีการทำงานดังนี้

9
EECP0101 Introduction to Computer MII ปฏิบัติการครั้งที่ 3

3.3.2 Project ชื่อ Lab03_2 โปรแกรมหาค่าเฉลี่ยจำนวนเต็ม 5 จำนวน

ให้ตั้งชื่อ Object ต่าง ๆ ดังรูปด้านล่างนี้

n1

n2

n3

n4

n5

result CalButton

โดยโปรแกรมมีการทำงานดังนี้

10