คู่มือการใช้งานเว็บ CODE

1

การใชง้ านโปรแกรม Code.org เบ้อื งต้น

1. รจู้ ักโปรแกรม
โปรแกรม code.org เปน็ การเขียนโปรแกรมแบบบลอ็ ก (Block Programming) พัฒนาข้ึนภายใต้

โครงการ Hour of code ของประเทศสหรัฐอเมริการโดยมีเปา้ หมายคอื สง่ เสรมิ ความรดู้ ้านวทิ ยาการคอมพวิ เตอร์
ใหโ้ อกาสนักเรยี นทั่วโลกได้เรียน

Block Programming เป็นรปู แบบการเขยี นโปรแกรมภาษาคอมพิวเตอร์ทม่ี ลี ักษณะเหมอื นการต่อ
จิก๊ ซอว์ มุง่ เน้นการพฒั นาตรรกะและทักษะในการแก้ไขปญั หา เน่อื งจากบลอ็ กแตล่ ะช้นิ มีความหมายและ
โครงสรา้ งการทางานท่ีแตกตา่ งกนั การเลือกใชค้ าสั่งจากบลอ็ กทาให้ผู้เรยี นไมต่ ้องกงั วลกบั โครงสรา้ งไวยากรณ์
ภาษาคอมพวิ เตอร์

2. การใชง้ านเบ้ืองตน้
1. พิมพ์ studio.code.org ท่ชี อ่ ง URL Address บน Web Browse
2. ล็อกอินเขา้ สู่ระบบ
กรณีใช้งานคร้ังแรก ใหท้ าการสมัคร

เรียบเรียง โดย อาจารยก์ นกรัตน์ จริ สัจจานกุ ลู

2

3. ในหนา้ หลักของโปรแกรม มีรายละเอียดดังน้ี

เมนูหลกั
1แคชบอรด์ ของฉนั หมายถึง หน้าหลัก
2. Course Catalog หมายถงึ บทเรียนออนไลนข์ อง code.org
3. โปรเจกต์ หมายถึง ชิ้นงานทนี่ ักเรียนได้พฒั นาขึน้ เอง

3.

4. การสรา้ งโปรเจกตต์ ์ใหม่ คลกิ ท่ี Play Lab

เรียบเรียง โดย อาจารย์กนกรตั น์ จิรสจั จานกุ ลู

3

5. เม่อื เขา้ สหู่ น้าต่างสาหรับเขยี นโปรแกรมภาษา
1

23 4

3. รายละเอยี ดของหนา้ ตา่ งโปรแกรม
1. เมนูหลัก
2. หนา้ ตา่ งแสดงผลลพั ธ์

มีการกาหนดตาแหนง่ การแสดงผลเป็นแกน X Y โดยเมื่อเคลอ่ื น
เมาสผ์ ่านบนหน้าตา่ งแสดงผลลัพธ์ โปรแกรมจะแสดงตาแหนง่ ของ
แกนดงั ภาพ เพ่ือความสะดวกต่อการระบตุ าแหน่งในการเขียน
โปรแกรม

3. กลอ่ งเครอ่ื งมือซงึ่ ประกอบด้วย กลมุ่ บล็อกคาสงั่ ต่างๆในการเขียนโปรแกรม
4. พื้นท่ีสาหรบั การเขียนโปรแกรมภาษา

เรยี บเรียง โดย อาจารยก์ นกรตั น์ จิรสจั จานกุ ลู

4

โดยเมื่อคลิกกล่องเครอื่ งมอื โปรแกรมจะแสดงบล็อกคาสั่งตา่ งๆ ดังภาพ

4. การต้ังชอ่ื โปรเจกต์
การต้ังชอ่ื โปรเจกต์ต์งาน คลกิ ทป่ี ่มุ ต้ังชอ่ื ใหม่

จากนั้นในสว่ นของช่อื โปรเจกตต์ จ์ ะกลายเป็นช่อง
สาหรับพิมพช์ ือ่ และปุ่มตัง้ ช่ือใหม่จะเปล่ยี นเปน็ ปุม่
บนั ทกึ
ดงั ภาพ

โดยเม่อื ตงั้ ชอื่ ใหม่เรยี บร้อยแล้วน้นั ใหค้ ลกิ ปมุ่ บนั ทกึ

5. การเรียกใชค้ าส่ัง
สามารถทาไดด้ ้วยการคลิกทบ่ี ลอ็ กคาสงั่ ซึ่งโปรแกรมจะแสดงบลอ็ กท่ีเลือกบนพนื้ ท่ที างานโดย

แสดงเป็นสีจางๆ จากนั้นเลอ่ื นบลอ็ กคาสง่ั ไปต่อกันเหมอื นจก๊ิ ซอว์ ซึง่ เมอ่ื ต่อถกู ตอ้ งสขี องบล็อกคาสั่งจะ
เข้มข้นึ

*กรณที ี่คำส่งั ไม่สำมำรถใชง้ ำนรว่ มกันไดน้ ้ัน บล็อกคำสั่งจะไม่สำมำรถนำมำวำงตอ่ กันได้

เรยี บเรียง โดย อาจารยก์ นกรตั น์ จริ สจั จานกุ ลู

5

1. การลบคาสงั่ สามารถทาได้ 2 วธิ ี ดงั นี้
วธิ ีท่ี 1. คลกิ บล็อกคาสงั่ ท่ตี ้องการลบ แล้วกดปุ่ม Delete
วธิ ีที่ 2. คลิกบล็อกคาสงั่ ท่ตี อ้ งการลบไปท่ีถังขยะ โดยการคลิกแล้วลากกลบั ไปทแ่ี ถบกล่อง

เครอ่ื งมือ ซึง่ โปรแกรมจะแสดงรปู ถังขยะดังภาพ

2. การบนั ทกึ คาสงั่ โปรแกรมบนั ทกึ ให้โดยอัตโนมัติ
6. การเปดิ โปรเจกตต์ ง์ าน

➢ กรณีที่อยู่ในหน้า แคชบอร์ดหลกั สามารถคลิกไดท้ ี่เมนูคาสัง่ โปรเจกต์

➢ กรณีอยู่ในหนา้ ตา่ งการเขยี นโปรแกรมภาษา คลกิ ที่โปรเจคของฉนั

เรยี บเรียง โดย อาจารย์กนกรตั น์ จิรสจั จานุกลู

6

การเขียนโปรแกรม

1. การแสดงตัวละคร มขี ั้นตอนดังน้ี
1.1 คลิกกลอ่ งเครอ่ื งมอื การดาเนนิ การ
1.2 เลอื กบลอ็ กคาสั่ง นักแสดง

1.3 ต่อบลอ็ กคาสั่งเข้ากบั บล็อกเมอ่ื เรยี กใชง้ าน
1.4 เลือกรูปแบบตวั ละคร จากตวั อย่าง เลือกไดโนเสาร์

เรยี บเรียง โดย อาจารย์กนกรตั น์ จริ สจั จานกุ ลู

7

1.5 คลกิ ปุ่ม เพอ่ื ใหโ้ ปรแกรมทางาน (รันโปรแกรม)

ตัวอยา่ งการแสดงผลลัพธ์ เมอ่ื คลิกป่มุ เรม่ิ โปรแกรมจะแสดงตวั ละครขึน้ มาดงั ภาพ

2. การกาหนดใหต้ วั ละคร เคลอ่ื นที่
การเคล่อื นทข่ี องตัวละครในโปรแกรมจะระบุตาแหน่งเสน้ ทางตามแกน X Y โดยระยะของแกน

จะมหี นว่ ยเปน็ พิเซล โดยในเนอ้ื หาหน่วยเรียนนี้กาหนดตาแหน่งบลอ็ กละ 100 พิเซล
การระบุตาแหน่งทิศทางการเดนิ แบบบลอ็ ก มีข้ันตอนวธิ ีดังเน้ือหาท่ีกลา่ วไปแลว้ ในหนว่ ยที่ 1

ตวั อยา่ งท่ี 1
โจทย์กาหนดให้ เดินไปทางขวา 1 บลอ็ ก จากนัน้ แสดงตวั ละคร มกี ารคดิ วิเคราะหด์ งั นี้

ข้ันตอนวิธี
-เคลือ่ นไปทางขวา 1 บล็อก

Start

Here -ใสส่ ี

จากข้นั ตอนวิธี สามารถเขยี นสญั ลักษณ์ได้ดงั นี้

**การใสส่ ใี นที่น้ี แทน การแสดงตวั ละครหรือ
การส่งั การแสดงตา่ งๆ กับตวั ละคร

เรียบเรียง โดย อาจารย์กนกรัตน์ จิรสจั จานุกูล

8

Start การเขียนโปรแกรม
Here

ตัวอยา่ งที่ 2
โจทย์กาหนดให้แสดงตัวละคร และ เดนิ ไปทางขวา 1 บลอ็ ก มีการคิดวิเคราะหด์ ังน้ี

ขนั้ ตอนวธิ ี
Start -ใส่สี
Here -เคล่อื นไปทางขวา 1 บล็อก

จากขน้ั ตอนวธิ ี สามารถเขยี นสญั ลักษณ์ไดด้ งั น้ี

เรยี บเรียง โดย อาจารย์กนกรัตน์ จริ สจั จานกุ ลู

9

Start การเขียนโปรแกรม

Here

จากตวั อย่างท่ี 1 และ 2 นักเรียนจะเหน็ ไดว้ ่า ลาดบั การทางานตา่ งกัน แตก่ ารแสดงผล
ของตวั ละครแตกตา่ งกัน ซึ่งแสดงใหเ้ ห็นว่า ลาดบั ข้ันตอนการคดิ วเิ คราะหเ์ พื่อวางแผนอยา่ งเป็น
ระบบน้นั มคี วามสาคัญอยา่ งมาก เพื่อสามารถดาเนินงาน หรอื แกไ้ ขปัญหานั้นเป็นไปอย่างมี
ประสทิ ธิภาพ

ตัวอยา่ งท่ี 3
โจทย์ กาหนดให้แสดงตัวละคร 1 ตัว จากนั้นเดนิ ไปทางขวา 2 บลอ็ ก (บล็อกละ100พิเซล)
จากนน้ั แสดงข้อความ “สวสั ด”ี เป็นเวลา 5วนิ าที

ขน้ั ตอนวิธี
- ใสส่ ี (แทนการแสดงตวั ละคร)

Start

Here - เคล่อื นไปทางขวา 1 บล็อก
- เคลือ่ นไปทางขวา 1 บลอ็ ก
- ใสส่ ี (แสดงข้อความ “สวสั ด”ี )
จากขน้ั ตอนวิธี สามารถเขียนสญั ลักษณ์ได้ดงั นี้

เรยี บเรียง โดย อาจารย์กนกรัตน์ จริ สจั จานกุ ูล

10

Start การเขียนโปรแกรม

Here

-เขียนตามลาดับขั้นตอนวธิ ีตามที่วิเคราะห์
-ข้อสงั เกต ในการเดนิ ไปทางขวา 2บล็อก บลอ็ กละ100พเิ ซล น้ันมรี ูปแบบการทางานเหมือนกนั
และตวั เลข สามารถนามาคานวณผลรวมได้เป็น 100 + 100 =200 ดังน้ันโปรแกรมสามารถ
เขียนลาดบั ขั้นตอนให้สนั้ ลงได้ดงั น้ี

ใหน้ กั เรียนทดลอง และสงั เกตผล
ตัวอย่างท่ี 4
โจทย์ กาหนดใหแ้ สดงตัวละคร 1 ตวั จากน้ันเดนิ ไปทางขวา 1 บลอ็ ก เดินลงขา้ งลา่ ง 1บลอ็ ก

จากนัน้ แสดงขอ้ ความ “สบายด”ี เป็นเวลา 5 วนิ าที

เรียบเรียง โดย อาจารย์กนกรตั น์ จิรสจั จานกุ ลู

11

ขัน้ ตอนวธิ ี
Start - ใส่สี (แทนการแสดงตวั ละคร)
Here - เคลื่อนไปทางขวา 1 บลอ็ ก

- เคลอื่ นลง 1 บล็อก
- ใส่สี (แสดงขอ้ ความ “สบายด”ี )
จากขั้นตอนวธิ ี สามารถเขยี นสัญลักษณ์ได้ดังนี้

การเขียนโปรแกรม

ตวั อย่างท่ี 5

โจทย์ หากเรยี นต้องการกาหนดให้แสดงตวั ละคร 1 ตวั
แสดงข้อความ “ฉนั ทาได”้ ในตาแหนง่ ดังภาพ พร้อมแสดง
การเดินเคลอ่ื นทขี่ องตวั ละคร

จากโจทย์ใหน้ กั เรยี นแสดงการวเิ คราะห์ขนั้ ตอนวิธี
ดว้ ยสัญลักษณ์ และเขยี นเขียนโปรแกรม

เรียบเรียง โดย อาจารยก์ นกรตั น์ จริ สัจจานกุ ูล

12

ขัน้ ตอนวธิ ี สญั ลักษณ์
สามารถวเิ คราะหไ์ ด้ 2 วธิ ี ดังนี้

ข้นั ตอนวิธี
วธิ ที ี่ 1 - ใสส่ ี (แทนการแสดงตัวละคร)

- เคลื่อนไปทางขวา 2 บล็อก
- เคลอ่ื นลง 3 บล็อก
- ใสส่ ี (แสดงขอ้ ความ “ฉนั ทาได”้ )
วธิ ที ี่ 2 - ใส่สี (แทนการแสดงตวั ละคร)
- เคล่อื นลง 3 บล็อก
- เคล่ือนไปทางขวา 2 บลอ็ ก
- ใส่สี (แสดงข้อความ “ฉนั ทาได”้ )

จากขนั้ ตอนวิธี สามารถเขยี นโปรแกรมได้ดังน้ี

วธิ ที ่ี 1

วธิ ีท่ี 2

เรียบเรียง โดย อาจารย์กนกรตั น์ จริ สัจจานุกลู

13

การใชง้ านโปรแกรม Scratch เบื้องตน้

โปรแกรม Scratch คือโปรแกรมภาษา ที่มีลักษณะโครงสร้างการเขียนแบบบล็อกคาสั่ง เรียกว่า
Blockly ซ่ึงเป็นรูปแบบโปรแกรมเชิงจินตภาพ (Visual Programming) สามารถทาให้ผู้เรียนเรียนรู้การเขียน
โปรแกรมได้ผ่านการลากวางวัตถุคาสั่ง (block) ข้อดี ช่วยลดข้ันตอนที่ซับซ้อนในการพัฒนาโปรแกรม และใน
ขณะเดียวกันช่วยสร้างความรู้ความเข้าใจในโครงสร้างของภาษาได้ดีกว่าการเขียนโปรแกรมในรูปแบบตัวอักษร
นอกจากนี้โปรแกรม Scratch ยังเป็นโปรแกรมท่ีช่วยส่งเสริมความคิดสร้างสรรค์ ผู้เรียนสามารถสร้างช้ินงานได้
อย่างง่าย โปรแกรมสามารถใช้งานได้ท้ังแบบออฟไลน์ และออนไลน์ โดยการใช้งานออนไลน์สามารถเข้าถึงได้ที่
https://scratch.mit.edu/
การเริ่มตน้ ใชง้ านโปรแกรม

1. เริ่มต้นการใช้งานออนไลน์ https://scratch.mit.edu/
คลกิ Join Scratch หรือ ปมุ่ Join เพือ่ สมัครสมาชกิ

2. ปรากฏหน้าตา่ งสาหรับกรอกข้อมูลเพือ่ สมคั รสมาชกิ โดยมีทงั้ หมด 4 หนา้ ต่าง ดงั ภาพ

เรียบเรียง โดย อาจารย์กนกรัตน์ จริ สจั จานุกูล

14

3. เม่อื สมคั รเสร็จเรียบรอ้ ยแล้วโปรแกรมจะส่ง email เพื่อใหผ้ ูส้ มคั รยนื ยันการใช้งาน โดยคลกิ ท่ี Confirm
my email address

4. โปรแกรมจะลงิ คก์ ลบั มาทีห่ น้าตา่ งการใชง้ าน
5. คลิกปมุ่ Create เพม่ิ เริ่มต้นการเขียนโปรแกรม

6. หนา้ ต่างสาหรับการเขียนโปรแกรม A
D
B E
C
เรียบเรียง โดย อาจารย์กนกรตั น์ จริ สจั จานกุ ูล

15

ส่วนประกอบหลกั ของโปรแกรม

A แถบเมนู ประกอบดว้ ย ปุม่ การเปล่ยี นภาษา ปุม่ เมนูเครอ่ื งมือ (File) ปมุ่ เมนูแก้ไข (Edit)
ปุม่ เมนูแนะนาการใชง้ าน ช่องสาหรับแสดงและบนั ทึกชือ่ ชิ้นงาน ปุม่ แชรเ์ พ่ือเผยแพรช่ ิ้นงาน
B ชดุ สครปิ ต์คาส่งั
C พน้ื ท่ีสาหรบั เขยี นสครปิ ตค์ าสงั่
D เวที (Stage)
E ตัวละคร (Sprit)

ชดุ สคริปตค์ าสง่ั

กล่มุ บลอ็ ก หนา้ ท่ี

การเคล่ือนไหว เช่น เดิน หมนุ ยา้ ยตาแหน่ง เปน็ ต้น

การจัดการการแสดงของตวั ละคร และฉาก เช่น การกาหนดใหต้ วั ละครแสดง
ขอ้ ความ การจดั การภาพฉากหลังของเวที การจัดการชุดตัวละคร การเปลย่ี นสี
เปลยี่ นขนาดตัวละคร เป็นตน้

การจดั การเก่ยี วกับเสยี ง

การทางานเมือ่ เกิดเหตุการณ์ เช่น เม่ือเร่มิ โปรแกรม เมือ่ ตัวละครถูกคลิก เมื่อฉาก
เวทีถกู เปล่ียน เปน็ ต้น

การควบคุมเง่อื นไขการทางาน เชน่ การรอ การทาซา้ เง่ือนไขการตัดสนิ ใจ เปน็ ตน้

การจดั การการรับรู้ เช่น การคลกิ เมาส์ การสมั ผัส การจับเวลา เปน็ ต้น
การจดั การกบั ตัวดาเนินการ การคานวณทางคณติ ศาสตร์ ตรรกศาสตร์

การจดั การตวั แปร การสร้าง และการกาหนดคา่ ตวั แปร
การจัดการชดุ คาสง่ั ท่ีสรา้ งขึ้นเอง

การเพ่ิมเติมชุดคาส่งั เสริมอน่ื ๆ เช่น ชดุ คาสง่ั ปากกา ชุดคาสง่ั การเชอื่ มตอ่ กบั
อปุ กรณภ์ ายนอก เปน็ ต้น

เรยี บเรียง โดย อาจารย์กนกรัตน์ จริ สจั จานกุ ลู

16

การจดั การกบั โปรเจกต์

การจัดการกบั โปรเจกต์ประกอบดว้ ย 3 ส่วนคอื ตัวละคร (Sprite) เวที (Stage) สครปิ ต(์ Script)

ตวั ละคร (Sprite)

กาหนดชื่อตวั ละคร แทรกตวั ละคร
เปิด/ปิด การแสดง จากการอัพโหลด

แทรกตวั ละคร
จากการสุ่ม

ลบตวั ละคร สร้างตวั ละคร
ดว้ ยการวาด

ค้นหาตัวละครท่ี
โปรแกรมมีให้

แทรกตัวละครท่ี
โปรแกรมมีให้

• การจดั การชดุ ตัวละคร (Costumes)

ชดุ ตวั ละคร การกาหนดชุดตัวละคร ทาใหต้ ัวละครเกิดเป็นภาพเคลือ่ นไหวได้ เป็นการ
ปรับเปล่ยี นการแสดงท่าทาง หรือรปู แบบของตวั ละคร

เรยี บเรียง โดย อาจารย์กนกรตั น์ จริ สจั จานุกลู

17

เวที (Stage)

แทรกภาพพน้ื หลังเวที
จากการอพั โหลด

แทรกภาพพน้ื หลังเวที
จากการสมุ่ โดยโปรแกรม

แทรกภาพพนื้ หลังเวที
จากการวาดดว้ ยตนเอง

ค้นหาภาพพ้ืนหลังเวทที ี่
โปรแกรมมีให้

แทรกภาพพ้นื หลงั เวทที ี่
โปรแกรมมมีให้

แสดงตัวอยา่ งฉากเวทเี ม่ือถกู เลอื ก

สครปิ ต์(Script)

การกาหนดใหโ้ ปรแกรมเริ่มทางานนน้ั ส่ังเร่มิ โดยคลิกท่ี สงั่ หยุด คลิกท่ี

ดงั นัน้ ในการเขียนสครปิ ต์จงึ เริม่ ตน้ ด้วยคาสัง่ when clicked ซงึ่ หมายถงึ เมอ่ื รันโปรแกรม

ตวั อย่างเช่น

เมือ่ รันโปรแกรม

เคลอื่ นที่ 10 ก้าว

ผลลัพธ์ที่ไดจ้ ากชดุ คาสัง่ คอื เมือ่ รนั โปรแกรม ตวั ละครจะเคลือ่ น 10 กา้ ว

เรียบเรียง โดย อาจารย์กนกรตั น์ จริ สัจจานุกลู

18

การตรวจสอบเงอ่ื นไขของการออกแบบและการเขียนโปรแกรม
ด้วยโปรแกรม scratch

การออกแบบโปรแกรมแบบลาดบั
ตัวอยา่ งท่ี 1
กาหนดให้ตัวละครเดินไป100 step แล้วพูดวา่ “Hello!”
วิเคราะห์

- สิง่ ท่โี จทยต์ ้องการ แสดงตวั ละคร และพูดวา่ “Hello!”
- ขอ้ มูลที่ตอ้ งรบั -
- ข้อมูลท่ีต้องแสดง ข้อความ “Hello!”
- วิธีการคานวณ หรอื วธิ กี ารทางาน แสดงตัวละคร จากนน้ั ให้ตัวละครเดนิ แลว้ พูดว่า “Hello!”

บลอ็ กคาสง่ั ทใี่ ช้ ประกอบด้วย
บลอ็ ก move เพอ่ื กาหนดใหต้ ัวละครเดิน
บลอ็ ก say เพอ่ื ใหต้ วั ละครพูด

- ตัวแปร –

การเขียนผงั งาน และโปรแกรม

เริ่มตน้

ตวั ละครเดิน 100 Step

Hello! ผลการเขียนโปรแกรมจากFlowchart

สิน้ สดุ
Flowchart
การแสดงผลของโปรแกรม

เรยี บเรียง โดย อาจารยก์ นกรัตน์ จริ สจั จานกุ ลู

19

ตัวอย่างที่ 2

กาหนดใหต้ วั ละคร 2 ตัวมกี ารสนทนาถาม-ตอบกัน โดยมบี ทสนทนาดังน้ี
ตวั ละครท่ี 1 “สวัสดี เธอช่อื อะไร”
ตัวละครที่ 2 พมิ พช์ ื่อตนเอง
ตัวละครที่ 1 “ยนิ ดีทีไ่ ด้รู้จักนะ” และตามด้วยชือ่ ของตัวละครท่ี 2

วิเคราะห์
- ส่ิงทโี่ จทยต์ ้องการ แสดงการสนทนาระหว่างตวั ละคร
- ข้อมลู ทตี่ อ้ งรบั ช่อื ของตวั ละครท่ี 2
- ขอ้ มลู ทีต่ ้องแสดง ขอ้ ความบทสนทนา
- วธิ กี ารคานวณ หรอื วิธกี ารทางาน รับชอ่ื ของตวั ละครที่ 2 มาเกบ็ ไว้ในตัวแปร เพื่อนามาแสดง
บล็อกคาสัง่ ทใ่ี ช้ ประกอบดว้ ย
บลอ็ ก ask เพ่ือแสดงคาถามและรอรบั คาตอบ
บล็อก answer เป็นบลอ็ กตัวแปรเพอื่ เกบ็ คาตอบจากบลอ็ ก ask
บลอ็ ก say เพอ่ื แสดงขอ้ ความ
บล็อก join เพ่อื แสดงขอ้ ความร่วมกับข้อความในบลอ็ ก answer
- ตัวแปร 1ตวั บล็อก answer เพือ่ ใช้ในการเก็บชือ่

การเขียนผงั งาน และโปรแกรม

เรมิ่ ต้น

สวัสดี เธอชือ่ อไร

answer

ยนิ ดีท่ไี ด้รู้จกั นะ

answer

สน้ิ สดุ

เรยี บเรียง โดย อาจารย์กนกรตั น์ จิรสัจจานุกลู

การแสดงผลของโปรแกรม 20

ตวั ละครท่ี 1 แสดงขอ้ ความ และรอคาตอบ

ตัวละครท่ี 2 ตอบชื่อ
โดยการพมิ พ์ชอื่ จากผูใ้ ช้งานลงในชอ่ งคาตอบ

ตวั ละครท่ี 1 แสดงขอ้ ความยินดที ่ไี ด้รจู้ กั นะพร้อมกบั ชอ่ื
ท่ไี ดร้ บั จากตวั ละครท2่ี

เรียบเรียง โดย อาจารย์กนกรัตน์ จิรสจั จานกุ ูล

21

การออกแบบโปรแกรมแบบมเี ง่ือนไข
โปรแกรมแบบมเี ง่ือนไข มกี ารตัดสนิ ใจในการทางาน โดยกลุ่มบล็อกของโปรแกรม Scratch ทใ่ี ชใ้ นการ

ทางานแบบเงื่อนไข คือ บล็อก if, if-else โดยมรี ายละเอียดดงั ต่อไปน้ี

บลอ็ กคาส่งั if
if เป็นคาสงั่ ตรวจสอบเงื่อนไขแบบทางเดยี ว คือทางานตามเงอ่ื นไขกต็ ่อเมื่อเป็นจริงเทา่ น้ัน

จริง ตรวจสอบเงอื่ นไข เท็จ

บล็อกคาสั่ง Flowchart

บล็อกคาสง่ั if-else

if-else เปน็ คาส่งั ตรวจสอบเง่ือนไขแบบสองทาง มีการทางานตามเงอ่ื นไขทงั้ ในส่วนของเมอ่ื เงอ่ื นไขเปน็
จริงและเป็นเทจ็

จริง ตรวจสอบเงื่อนไข เทจ็

บล็อกคาสัง่ Flowchart

การตรวจสอบเงอื่ นไขในคาสั่งบล็อก if if else น้นั จะตรวจสอบใน ซึ่ ง ใ น ช่ อ ง ดั ง ก ล่ า ว
โปรแกรม Scratch จะใช้บล็อกคาส่งั ในกล่ม Operators ในการตรวจสอบเงื่อนไข
ผลลพั ธ์
บล็อกคาสั่ง ความหมาย ตัวอยา่ ง เทจ็
น้อยกวา่ เทจ็
จริง
เท่ากบั
มากกวา่

เรียบเรียง โดย อาจารยก์ นกรัตน์ จริ สัจจานุกูล

22

ตวั อย่าง if
ตัวอย่างโจทย์ ตวั ละครสามารถแปลงร่างได้ เมื่อผใู้ ช้โปรแกรม กด 1
วิเคราะห์

- ส่งิ ทโ่ี จทยต์ ้องการ ตวั ละครสามารถแปลงรา่ งได้ เมอ่ื ผ้ใู ช้โปรแกรมกด 1 แสดงว่า มกี ารตรวจสอบเงอื่ นไขทาง
เดยี วทางานในเงือ่ นไขก็ต่อเมื่อเป็นจรงิ เทา่ นัน้

- ข้อมลู ท่ีตอ้ งรบั ตวั เลข
- ขอ้ มูลที่ตอ้ งแสดง ตวั ละคร
- วิธีการคานวณ หรอื วธิ ีการทางาน รอรับตวั เลขเขา้ สูโ่ ปรแกรม จากนนั้ ตรวจสอบตวั เลขท่ีรับเข้าถา้ เท่ากบั 1

ใหต้ ัวละครเปล่ยี นโดยใชต้ ัวละครชดุ (costumes) ดงั นั้นในตัวชดุ ละครต้องมตี ัวท่ีแตกตา่ งกนั
บล็อกคาส่งั ทใ่ี ช้ ประกอบดว้ ย
บลอ็ ก ask เพ่อื แสดงคาถามและรอรับตวั เลข
บลอ็ ก answer เพอื่ นาค่าตวั เลขทร่ี บั เข้ามาคานวณ
บลอ็ ก if เพอ่ื ตรวจสอบเง่ือนไข
บลอ็ ก = เพอื่ เปรยี บเทียบตรวจสอบเง่อื นไข
บล็อก next costume เพอ่ื แสดงขอ้ ความ
- ตวั แปร มี 1 ตวั แปร เพอื่ เก็บคา่ ตัวเลขทร่ี บั เข้า

เรมิ่ ต้น

กรณุ าระบุตัวเลข

answer

จรงิ answer= 1 เท็จ

เปลี่ยนตวั ละคร
เป็นตวั ถดั ไป

ส้นิ สดุ

เรียบเรียง โดย อาจารยก์ นกรัตน์ จริ สัจจานุกลู

การแสดงผลของโปรแกรม 23

ทดลองใสต่ ัวเลขตามเงื่อนไขกาหนด
ตวั ละครแสดงขอ้ ความ “หากตอ้ งการให้แปลงร่าง กรณุ ากด
1”
จากนัน้ โปรแกรมรอรับคา่ ตัวเลข
ผใู้ ชใ้ ส่เลข 1

เมอ่ื ตรวจสอบเงอ่ื นไข 1 = 1
เปน็ จริง
โปรแกรม จึงเปลี่ยนตวั ละคร

ทดลองใส่ตัวเลขอื่น
ตัวละครแสดงข้อความ “หากตอ้ งการให้แปลงรา่ ง กรุณา
กด 1”
จากนน้ั โปรแกรมรอรับคา่ ตวั เลข
ผ้ใู ชใ้ ส่เลข 2

เมือ่ ตรวจสอบเงอื่ นไข 1 = 1
เปน็ เทจ็
สน้ิ สดุ การทางาน

เรียบเรียง โดย อาจารย์กนกรัตน์ จิรสัจจานุกลู

24

ตวั อย่าง if else

ตวั อย่างโจทย์ โปรแกรมรบั คา่ ตัวเลข โดยแสดงข้อความ วา่ ตวั เลขทรี่ ับเขา้ มาน้นั เปน็ เลขคู่ หรอื เลขคี่
วเิ คราะห์

- ส่งิ ทโี่ จทย์ต้องการ แสดงข้อความว่า ตวั เลขทร่ี บั เขา้ มา เปน็ เลขคู่ หรือ เลขค่ี
- ข้อมูลทต่ี อ้ งรบั ตวั เลข
- ขอ้ มูลทีต่ ้องแสดง ขอ้ ความ “เลขคู่” “เลขค”ี่
- วิธีการคานวณ หรือวธิ กี ารทางาน รอรับตัวเลขเข้าสูโ่ ปรแกรม จากนนั้ นาตัวเลขทรี่ ับเขา้ มา หารด้วย 2 เอา

เศษ โดยเศษจากการหาร หากมคี ่าเท่าศูนยจ์ รงิ แสดงข้อความ “เลขค”ู่ หากเปน็ เท็จ ให้แสดงข้อความ
“เลขค่ี”
บล็อกคาสงั่ ทใี่ ช้ ประกอบดว้ ย
บล็อก ask เพอ่ื แสดงคาถามและรอรับตัวเลข
บล็อก answer เพอ่ื นาค่าตวั เลขทีร่ ับเขา้ มาคานวณ
บลอ็ ก if else เพ่ือตรวจสอบเงื่อนไข
บล็อก mod เพอ่ื คานวณการหารเอาเศษ
บลอ็ ก = เพอ่ื เปรียบเทยี บตรวจสอบเงอื่ นไข
บล็อก say เพอื่ แสดงข้อความ
- ตวั แปร มี 1 ตวั แปร เพอื่ เก็บคา่ ตัวเลขที่รับเข้า

เร่ิมตน้

กรณุ าระบตุ ัวเลข

answer

answer หาร 2
แบบหารเอาเศษ

(mod)

จริง answer=0 เทจ็

เลขคู่ เลขค่ี

สน้ิ สุด

เรยี บเรียง โดย อาจารย์กนกรตั น์ จริ สัจจานกุ ูล

การแสดงผลของโปรแกรม 25

ทดลองเลขคู่
ตัวละครแสดงขอ้ ความ “กรณุ าระบตุ ัวเลข”
จากนั้นโปรแกรมรอรับค่าตัวเลข
ผ้ใู ชใ้ ส่เลข 10

เศษของ 10 หาร 2 =0
เป็น จริง
ตัวละครแสดงข้อความ “เลขคู่”

ทดลองเลขค่ี

ตัวละครแสดงข้อความ “กรณุ าระบตุ วั เลข”
จากนน้ั โปรแกรมรอรับคา่ ตัวเลข
ผู้ใช้ใสเ่ ลข 15

เศษของ 15 หาร 2 = 0
เปน็ เท็จ
ตัวละคร แสดงขอ้ ความ “เลขค่ี”

นอกจากนี้ในการคาส่งั โปรแกรมแบบเงอื่ นไข สามารถใชเ้ ง่ือนไขซ้อนเง่อื นไขได้ ในกรณีมที างเลอื ก
มากกวา่ 2 ทางเลอื ก โดยเป็นการใช้คาส่ัง if else ซ้อนกัน

เรียบเรียง โดย อาจารยก์ นกรตั น์ จริ สจั จานุกลู

26

ตวั อยา่ งโจทย์ โปรแกรมหาคา่ ดชั นีมวลกาย (BMI) โดยมี ผลจากการคานวณมารายละเอยี ดดังนี้
ถ้าค่า BMI น้อยกว่า 18.5 แสดงว่า น้าหนกั ตา่ กว่าเกณฑ์
ถ้าคา่ BMI อยูร่ ะหวา่ ง 18.5-22.9 แสดงวา่ น้าหนักปกติ
ถ้าค่า BMI มากกว่า 23 ขนึ้ ไป แสดงวา่ น้าหนักเกนิ

วิเคราะห์
- ส่งิ ทโ่ี จทย์ตอ้ งการ หาคา่ ดัชนมี วลกาย พรอ้ มการแปลผล
- ขอ้ มลู ทตี่ อ้ งรบั ตวั เลขค่านา้ หนัก ส่วนสงู
- ข้อมูลที่ตอ้ งแสดง ขอ้ ความแสดงการแปลผลคา่ BMI
- วธิ กี ารคานวณ หรือวิธีการทางาน รอรบั ตัวเลขค่านา้ หนกั สว่ นสูง จากน้ันคานวณ
มีสูตรการคานวณ ดังน้ี นา้ หนกั / (ส่วนสูง*สว่ นสงู ) โดยคา่ สว่ นสงู ทรี่ ับเขา้ มหี น่วยเป็นเมตร
เน่อื งจากการคานวณของโปรแกรมภาษาคอมพิวเตอร์มลี าดับความสาคญั ของเครอ่ื งหมาย ดงั นนั้ เพือ่ ให้
โปรแกรมคานวณค่าไดอ้ ย่างถกู ตอ้ ง จึงตอ้ งหาคา่ ผลคูณของสว่ นสูงก่อน เนื่องจากอยู่ในวงเล็บ
การแปลผลการคานวณ เปน็ ไปตามเงื่อนไขทีโ่ จทยก์ าหนด งน้ี
ถ้าค่า BMI นอ้ ยกวา่ 18.5 แสดงว่า นา้ หนกั ตา่ กว่าเกณฑ์
ถ้าคา่ BMI อยรู่ ะหว่าง 18.5-22.9 แสดงว่า น้าหนักปกติ
ถ้าคา่ BMI มากกว่า 23 ขน้ึ ไป แสดงว่านา้ หนักเกนิ
บล็อกคาสง่ั ท่ใี ช้ ประกอบด้วย
บลอ็ ก ask เพ่อื แสดงคาถามและรอรบั ตัวเลข
บล็อก answer เพอ่ื นาค่าตวั เลขท่รี บั เขา้ มาคานวณ
บลอ็ ก if else เพือ่ ตรวจสอบเงอื่ นไข
บล็อก * / เพือ่ คานวณ
บลอ็ ก < เพอ่ื เปรยี บเทยี บตรวจสอบเง่ือนไข
บล็อก say เพอื่ แสดงขอ้ ความ
- ตวั แปร มี 3 ตัวแปร เพอื่ เกบ็ คา่ นา้ หนกั สว่ นสูง และ ดชั นมี วลกาย
โดย Weight เก็บค่านา้ หนัก
Height เก็บคา่ สว่ นสูง (เมตร)
BMI เก็บผลการคานวณคา่ ดชั นีมวลกาย

เรยี บเรียง โดย อาจารย์กนกรัตน์ จิรสัจจานุกลู

27

เร่ิมต้น

กรุณาใสน่ ้าหนกั

answer

เก็บคาตอบในตัวแปร

Weight

กรณุ าใสส่ ่วนสงู

answer

นาคา่ answer x answer
จากนั้นเก็บคาตอบ
ในตวั แปร Height

นาค่า Weight / Height
จากนัน้ เก็บคาตอบ

ในตัวแปร BMI

จรงิ BMI < 18.5 เทจ็

ต่ากวา่ จริง BMI < 23 เทจ็
เกณฑ์
นา้ หนกั เกิน
นา้ หนกั ปกติ

ส้นิ สดุ

เรยี บเรียง โดย อาจารย์กนกรตั น์ จริ สัจจานุกลู

การแสดงผลของโปรแกรม 28

ตวั ละครแสดงขอ้ ความ “กรณุ าใส่นา้ หนกั ”
จากนั้นโปรแกรมรอรบั ค่าตัวเลข

โปรแกรมเกบ็ คา่ น้าหนักในตวั แปร Weight
ตัวละครแสดงข้อความ “กรณุ าใส่สว่ นสูง”
จากนั้นโปรแกรมรอรับคา่ ตัวเลข

โปรแกรมนาคา่ สว่ นสงู มาคูณกัน (answer * answer)
จากนน้ั เก็บในตวั แปร Height
ทาการคานวณหาค่าดัชนีมวลกาย โดยนาคา่
Weight/Height แล้วเกบ็ ในตัวแปร BMI
จากนัน้ โปรแกรมตรวจสอบเง่ือนไข
ค่า BMI ซง่ึ จากโจทย์ตวั อยา่ งใส่คา่ น้าหนัก 40 สว่ นสูง 1.55
ค่า BMI ท่ไี ดเ้ ท่ากบั 16.64
ผลการตรวจสอบเงอื่ นไข 16.64 < 18.5 เปน็ จริง
ดังนนั้ ตัวละครจงึ แสดงข้อความว่า ตา่ กวา่ เกณฑ์
กรณีใส่ค่าน้าหนัก 80 สว่ นสูง 1.55 ผลการคานวณ ค่า BMI
เท่ากับ 33.29
จากการตรวจสอบเง่ือนไข 33.29 < 18.5 เป็นเท็จ
ตรวจสอบเง่อื นไขต่อมา คอื 33.29 < 23 เปน็ เท็จ
ดงั น้ันตัวละครจึงแสดงขอ้ ความวา่ นา้ หนกั เกนิ

เรียบเรียง โดย อาจารย์กนกรตั น์ จริ สจั จานกุ ลู