หน่วยที่ ๒ การออกแบบโดยใช้ storyboard

หรือการออกแบบอัลกอริทึม

วิทยาการคอมพิวเตอร์(Computer Science) การแก้ปัญหาอย่างเป็นขั้นตอน

และเป็นระบบการใช้แนวคิดเชิงคำ�นวณในการแก้ปัญหาในชีวิตประจำ�วัน บูรณาการกับ

N
O
วิชาอื่น การเขียนโปรแกรมการคาดการณ์ผลลัพธ์ การตรวจหาข้อผิดพลาดการพัฒนา

TI
แอปพลิเคชันหรือพัฒนาโครงงานอย่างสร้างสรรค์เพื่อแก้ปัญหาในชีวิตจริง

A
C
U
ED
G
IN
R
EE
IN
G
A

The greatness of a nation and its moral

IM

progress can be judged by the way its

animal are treated.
... ความยิง่ ใหญ่ของมนุษยชาติและความก้าวหน้าทาง
จริยธรรมสามารถตัดสินได้จากวิธกี ารปฏิบตั ติ อ่ สัตว์
ของพวกเขา...
-- ไมเคิล ฟาราเดย์ (Michael Faraday)--
 MindMap แผนผังสาระการเรียนรู้
Logo

Scratch ซอฟต์แวร์
ที่ใช้เขียน

N
โปรแกรม
รม

O
ก
ป รแ

Tโ I
A
C
การเขียน

U
โปรแกรม
การออกแบบ ED
โปรแกรม
การตรวจ
การเขียน
สอบหาข้อ
G

Storyboard
ผิดพลาด
IN

การแก้ไข
การออกแบบ
R

ข้อผิดพลาด
อัลกอริทีม
EE

การหาข้อผิดพลาด
IN

ตัวชี้วัด
G

ว ๘.๒ ป๔/๒ ออกแบบและเขียนโปรแกรมอย่างง่าย โดยใช้ซอฟต์แวร์ หรือสื่อ

A

และตรวจหาข้อผิดพลาดและแก้ไข
IM

Keywords
1. programming = การเขียนโปรแกรม 5. scratch = โปรแกรมฝึกเขียนโค้ด
2. coding = การเขียนโค้ด 6. storyboard = การเขียนภาพลงในกรอบ
3. computer = ภาษาในการ แสดงเรื่องราวเป็นลำ�ดับขั้น
Language เขียนโปรแกรม 7. algorithm = การแสดงลำ�ดับขั้นตอน
4. programmer = นักเขียนโปรแกรม 8. debugging = การแก้ไขข้อผิดพลาด
26
การออกแบบโปรแกรมอย่างง่าย โดยใช้ Story Board
สตอรี่ บ อร์ ด (story board) คื อ แสดงล�ำดั บ ขั้ น ตอนการท�ำงานของ
โปรแกรมทีละล�ำดับขั้น โดยเขียนเป็นภาพ ข้อความ และภาพเคลื่อนไหว
ซึ่งการเขียน storyboard มี 2 ส่วนดังนี้

N
O
TI
A
C
U
ED
G
IN
R

ส่วนของภาพโดยจะวาดอยู่ ส่วนของการบรรยายเป็น
EE

ใน กรอบสี่เหลี่ยม ข้อความหรือบทสนทนา
IN
G

การเขียน Storyboard
A

มีข้อดีอย่างไรบ้างครับ
IM

ท�ำให้เราได้เห็น
เนื้อเรื่องที่จะสร้างตั้งแต่ต้นจนจบ
ท�ำให้ได้เนื้อเรื่องเหมาะสม
และหากมีข้อผิดพลาดจะได้
ทราบก่อนลงมือท�ำไงละ

Primary 4
 27
ตัวอย่าง ให้ออกแบบ story board นิทานเรื่อง ราชสีห์กับหนู
ราชสีห์ตัวหนึ่งนอนหลับอยู่ในป่า มีเจ้าหนูมาวิ่งไต่ตามล�ำตัวราชสีห์โกรธมากแต่
เห็นว่าเจ้าหนูเป็นสัตว์ตัวเล็กจึงไล่ให้ไปไกลๆเมื่อครั้นราชสีห์ออกไปล่าสัตว์ได้ติด
กับบ่วงนายพรานออกไม่ได้ เจ้าหนูส�ำนึกในบุญคุณจึงกลับมาช่วยราชสีห์ให้รอดพ้น
กับบ่วงนายพราน นิทานเรื่องนี้สอนให้รู้ว่าสัตว์ตัวเล็กก็มีประโยชน์ไม่แพ้สัตว์ใหญ่

N
O
TI
A
C
U
ED
ราชสีหน์ อนหลับอยูใ่ นป่า ราชสีหโ์ กธรและพูดว่าเห็นว่าเจ้าเป็น
เจ้าหนูมาเดินรบกวนอยูใ่ กล้ๆ สัตว์ตวั เล็กๆ จึงปล่อยเจ้าไป
G
IN
R
EE
IN

เมือ่ ราชสีหอ์ อกไปล่าสัตว์ กลับมาจึงติดกับบ่วงของ

G

นายพรานราชสีหจ์ งึ ออกไม่ได้
A
IM

เจ้าหนูสำ� นึกในบุญคุณจึงได้มาช่วย นิทานเรือ่ งนีส้ อนให้รวู้ า่ สัตว์ตวั น้อย

กัดบ่วงนายพรานราชสีหจ์ งึ ออกมาได้ ก็มปี ระโยชน์ไม่แพ้สตั ว์ใหญ่เช่นกัน
28
การออกแบบโปรแกรมอย่างง่าย โดยใช้อัลกอริทึม (Algorithm)
ก่อนจะลงมือเขียนโปรแกรม ต้องออกแบบโปรแกรมโดยการเขียนขั้นตอน
การท�ำงานหรืออัลกอริทึมก่อน เพื่อจะได้เห็นภาพรวมการท�ำงานของ
โปรแกรม และหากเกิดข้อผิดพลาดจะสามารถตรวจสอบและแก้ไขได้ก่อน
จะลงมือเขียนโปรแกรม

N
การออกแบบอัลกอริทมึ นัน้ สามารถท�ำได้โดยใช้การเขียนสัญลักษณ์ทเี่ รียกว่า

O
TI
Flowchart โดยมีรูปแบบของสัญลักษณ์ดังต่อไปนี้

A
C
สัญลักษณ์ ภาษาอังกฤษ ความหมายของสัญลักษณ์

U
ED
Terminator จุดเริ่มต้น/สิ้นสุด
G

Input
IN

ข้อมูล นำ�เข้า/ส่งออก
Output
R
EE

Process การประมวลผลข้อมูล
IN
G

Decision การตัดสินใจ เพื่อพิจารณาเงื่อนไขและ

A

กำ�หนดทิศทางการทำ�งานต่อไป
IM

Direction ทิศทางการทำ�งาน ใช้เชื่อมต่อสัญลักษณ์

Flow ต่างๆ เพื่อแสดงทิศทางของโปรแกรม

Connector จุดเชื่อมต่อ ใช้รวมเส้นการทำ�งาน

ให้ออกไปเหลือเพียงเส้นเดียว

Primary 4
 29
ตัวอย่างการออกแบบโปรแกรมอย่างง่าย โดยใช้ Flowchart
วันนี้ลิปดาตื่นสาย จึงคิดเลือกวิธีการเดินทางไปโรงเรียนใหม่ อาจจะต้องใช้
รถยนต์หรือ รถมอเตอร์ไซต์ ซึ่งปกติลิปดาเดินทางด้วยรถประจ�ำทาง ลิปดา
ต้องประมวลผล เปรียบเทียบว่าระยะเวลาการเดินทางใดจะสามารถเดินทาง
ได้เร็วที่สุด

N
O
TI
แย่แล้วเราจะตัดสินใจ จุดเริ่มต้น

A
อย่างไรดีนะเนี่ย

C
U
ED
เลือกวิธีการ
G
IN
R

ระยะเวลา ระยะเวลา ระยะเวลา

EE

เดินทางด้วย เดินทางด้วย เดินทางด้วย

รถยนต์ รถประจำ�ทาง มอเตอร์ไซต์
IN
G
A

การประมวลผลข้อมูลเลือก
IM

เส้นทางที่ใช้เวลาน้อยที่สุด
ออกแบบการแก้ไข
ปัญหาได้เยี่ยมมาก
ลิปดา สิ้นสุด
30
กิจวัตรประจ�ำวัน

ลิปดาตื่นตั้งแต่ 6 โมงเช้า อาบน�้ำ แปรงฟัน ทานข้าว

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

N
กิจวัตรประจ�ำวันเหมือนกันเรามาสร้าง

O
storyboard หรือ ออกแบบอัลกอริทึม

TI
กิจวัตรประจ�ำวันตนเองกัน

A
C
U
ED Missions :
G
IN

1. จากโจทย์ให้ออกแบบโปรแกรมโดยใช้ Story Board

R

หรือออกแบบอัลกอริทึมกิจวัตรประจ�ำวันของตนเอง
EE

2. ให้แสดง storyboard หรือ อัลกอริทึม

ในกระดาษเทาขาว พร้อมน�ำเสนอหน้าชั้นเรียน
IN

Materials : 1. กระดาษเทาขาว 2.อุปกรณ์เครื่องเขียนอื่นๆ

G

Ask : การออกแบบโปรแกรมโดยใช้ Story Board หรืออัลกอริทึม

A
IM

ในการแก้ไขปัญหา คืออะไร
Plan & Design : แบ่งหน้าที่การท�ำงานวางแผนออกแบบโปรแกรมโดยใช้
Story Board หรืออัลกอริทึมในการแก้ไขปัญหา

Primary 4
 31

ให้นักเรียนเขียนลำ�ดับการทำ�งานของกิจกรรมนี้

N
O
TI
A
C
U
ED
G
IN
R
EE
IN
G
A
IM

การออกแบบโปรแกรมก่อนจะลงมือเขียนโปรแกรมมีประโยชน์อย่างไร
การออกแบบโปรแกรมโดยใช้ Story Board คืออะไร
การออกแบบโปรแกรมโดยใช้ อัลกอริทึม คืออะไร
32
เด็กๆ จะได้อะไรจากการเขียนโปรแกรม Scratch
การฝึกเขียนโปรแกรมเป็นเครือ่ งมือทีส่ ง่ เสริมทักษะกระบวนการคิดเชิงค�ำนวณในการ
แก้ปญ
ั หาการคิดอย่างเป็นระบบ(Computational Thinking) และการคิดสร้างสรรค์
(Creative Thinking) ทีช่ ว่ ยให้ผเู้ รียนพัฒนาทักษะการคิด ออกมาในรูปแบบการเขียน
โปรแกรมสร้างโปรเจกต์หรือสร้างชิน้ งาน และน�ำเสนอ

N
O
TI
A
C
U
ED
G
IN
R
EE
IN
G
A

ท�ำไมต้องใช้โปรแกรม Scratch
IM

โปรแกรม Scratch เป็นทัง้ เครือ่ งมือและโปรแกรมภาษา พัฒนาโดยทีมงาน Media

Lab MIT มีกลุม่ เป้าหมายเป็นเด็กๆ หรือผูเ้ ริม่ ต้นหัดเขียนโปรแกรม วัตถุประสงค์ของ
ทีมพัฒนา คือการส่งเสริมผูเ้ รียนให้ใช้ความคิดสร้างสรรค์ ผ่านการใช้สอื่ ต่างๆ ไม่วา่
จะเป็นข้อความ ภาพ เสียง หรือ ภาพเคลือ่ นไหว ด้วยเครือ่ งมือทีไ่ ม่ซบั ซ้อน และมา
พร้อมกับตัวโปรแกรม Scratch เพือ่ สร้างโปรเจกต์ตา่ งๆ ตามจินตนาการของผูเ้ รียน
อาทิเช่น การเล่าเรือ่ ง การสร้างแอนิเมชัน่ การจ�ำลอง แม้กระทัง่ การเขียนเกมก็ท�ำได้
Primary 4
 33
รู้จักโปรแกรม Scratch
เป็นโปรแกรมภาษาคอมพิวเตอร์ส�ำหรับผู้เริ่มต้นหัดเขียนโปรแกรม โดยใช้
สร้างสื่ออย่างง่าย เช่น ภาพ เสียง ข้อความ ดนตรี เพื่อสร้างเรื่องราวภาพ
เคลื่อนไหว นิทานที่มีการตอบโต้กับผู้ใช้ เล่ากิ จวัตรประจ�ำวัน การ์ตูนสั้น
สร้างเกม เพื่อเป็นการฝึกทักษะการคิดวิเคราะห์ และความคิดสร้างสรรค์

N
หน้าตาของโปรแกรม

O
TI
ชุดคำ�สั่ง(Sprites)

A
C
เวที(Stage)

U
ED
พื้นที่ในการเขียนโปรแกรม
(Scripts Area)
G

โดยการลากกล่องคำ�สั่งใน
IN

Sprites มาต่อๆ กัน

ตัวละครและฉาก เป็นชุดคำ�สั่ง
R

(Sprites&Background)
EE

1. เวที (Stage) ซึ่งมีขนาดกว้าง 480 หน่วย สูง 360 หน่วย

IN

ใช้แสดงผลของชุดค�ำสั่งการท�ำงานของโปรแกรม
G
A

2. ตัวละคร และ ฉาก (Sprites & Background)

IM

จะมีข้อมูลของ ภาพ เสียง ซึ่งสามารถคลิกเข้าไปดูในบริเวณ

ชุดค�ำสั่ง3 ซึ่งมีแถบ
3. ชุดค�ำสั่ง (Scripts) เป็นชุดค�ำสั่งควบคุมตัวละครและฉาก
เช่น การเคลื่อนไหว (Motion), หน้าตาภาพ (Looks)
,เสียง (Sound), ปากกา (Pen), เหตุการณ์ (Events) เป็นต้น
34
การเขียนโปรแกรมย้ายต�ำแหน่ง
เป็นการย้ายต�ำแหน่งของตัวละคร (Sprite) โดยมีค�ำสั่งที่เกี่ยวข้อง เช่น
1. คือ ค�ำสั่งให้เคลื่อนที่ไปในแนวแกน X .... ก้าว
2. คือ ค�ำสั่งย้ายตัวละครไปยังต�ำแหน่ง
ณ แกน X , แกน Y เท่าไร

N
O
TI
A
C
U
ED
G

เวทีมีขนาดกว้าง 480 หน่วย

IN

สูง 360 หน่วย จุดกึ่งกลาง

R

จะเป็นต�ำแหน่ง X=0, Y=0

EE
IN

คลิกเลือกตัวละคร (Sprites)ทีต่ อ้ งการ พิมพ์ตำ� แหน่งทีต่ อ้ งการ

ก่อนจะท�ำให้ตัวละครใดเคลื่อนที่ต้องสังเกต ให้ทดลองเปลี่ยนต�ำแหน่งตามรูป
G

และเลือกตัวละครที่ต้องการให้ถูกต้อง
A

สังเกตต�ำแหน่งของตัวละคร เมือ่ แก้ไขต�ำแหน่งแล้วให้คลิกค�ำสัง่ นัน้

IM

จากตัวอย่าง ตัวละครแมว เป็นการคลิกค�ำสัง่ นัน้ ให้ท�ำงาน และสังเกตการ

อยู่ ณ ต�ำแหน่ง X=0, Y=0
เลือกชุดค�ำสัง่
ซึง่ เป็นชุดค�ำสัง่ ควบคุมการเคลือ่ นทีข่ องตัวละคร
มีลักษณะเป็น กล่องค�ำสั่ง ต่อกันแบบตัวต่อ
คลิกเลือกลากค�ำสัง่
แล้วลากไปยังพื้นที่สั่งงานเขียนโปรแกรม
(Scripts Area)ลองลากค�ำสัง่ ออกมา 4 ค�ำสัง่ ตามรูป
เปลี่ยนแปลงบริเวณเวที (Stage)
คลิกเลือกและลากค�ำสัง่
ซึ่งเป็นค�ำสั่งย้ายต�ำแหน่งไปข้างหน้ากี่ก้าว
ทดลองเปลีย่ นระยะตามทีต่ อ้ งการ
เป็นการเขียนโปรแกรมสั่งให้ ตัวละคร
ย้ายต�ำแหน่งตามที่ต้องการ

Primary 4
 35
การเขียนโปรแกรมย่อและขยายขนาด
เป็นการเปลี่ยนขนาดของตัวละคร โดยมีค�ำสั่งที่เกี่ยวข้อง เช่น
1. คือการเปลี่ยนขนาดเพิ่มขึ้นหรือลดลง
2. คือการก�ำหนดขนาดเพิ่มขึ้น-ลดลงตามเปอร์เซ็นต์

N
O
TI
A
C
U
ED
G
IN
R
EE

คลิกคำ�สัง่ คัดลอกตัวละคร (Stamp)

IN

ลากชุดค�ำสัง่
ซึ่งเป็นค�ำสั่งคัดลอกตัวละคร โดยในตัวอย่าง ไปยัง พืน้ ทีส่ งั่ งานเขียนโปรแกรม
G

ต้องการคัดลอกเพื่อให้เห็นการเปลี่ยนแปลง (Scripts area)

A

ให้คลิกตัวละครทีต่ อ้ งการคัดลอก ค�ำสัง่ เปลีย่ นขนาด

IM

โดยเมาส์พอยเตอร์จะเปลี่ยนเป็น
แต่ตวั ละครทีค่ ดั ลอกจะซ้อนกันต้องลากออกมา
สังเกตตัวละครและเลือกตัวละครทีต่ อ้ งการ
จากตัวอย่างจะมีตัวละคร 3 ตัว ที่คัดลอกไว้ซึ่ง
ตัวละคร 1 ตัวจะมีค�ำสั่งแต่ละตัวไม่เหมือนกัน
คลิกเลือกลากค�ำสัง่
ซึ่งเป็นชุดค�ำสั่งเกี่ยวกับหน้าตารูปร่าง
เป็นค�ำสั่งเปลี่ยนขนาดโดยสามารถ
ใส่ขนาดเพิ่ม (+10) และ ลด (-10)
ค�ำสัง่ ก�ำหนดขนาด
เป็นค�ำสัง่ ก�ำหนดขนาดคิดเป็นเปอร์เซ็นต์ของภาพ
เมือ่ เปลีย่ นขนาดตามต้องการแล้ว
จะเห็นการเปลี่ยนแปลงในบริเวณเวทีดังภาพ
36
การเขียนโปรแกรมเปลี่ยนรูปร่าง
การเปลี่ยนรูปร่างนิยมใช้เมื่อ ตัวละครที่เคลื่อนที่หรือพบกับเหตุการณ์
แล้วเปลี่ยนลักษณะท่าทางการแสดงของตัวละคร โดยมีตัวอย่างค�ำสั่งเช่น
คือ ค�ำสั่งเปลี่ยนชุดตัวละครไปยังชุดที่......

N
O
TI
A
C
U
ED
G
IN
R
EE
IN

คลิกเลือกตัวละครทีต่ อ้ งการ จะมีหน้าต่าง Custome Library

เขียนโปรแกรมเปลีย่ นรูปร่าง คือหน้าต่างให้สามารถเลือกชุดหรือรูปร่างตัว
G

ละครเพิ่มเติมลงไป วาดหรือเปลี่ยนสีเองได้
A

คลิกเลือกค�ำสัง่ เมือ่ เลือกแล้วสังเกตชุดหรือรูปร่างทีเ่ พิม่ ขึน้

IM

ซึ่งเป็นค�ำสั่งจัดการชุดหรือรูปร่างของตัวละคร
แต่ละตัว
จะมีหน้าต่าง Custumes ขึน้ มา
ให้สังเกตชุดของตัวละครด้านซ้ายซึ่งโดยปกติ
จะมี 2 ชุด
สามารถเลือกชุดหรือรูปร่างตัวละครเพิม่
ได้โดยการกดที่
โดยในตัวอย่างจะเป็นแมวนอน
คลิกเลือก
แล้วลากค�ำสั่ง
ไปยัง พื้นที่สั่งงานเขียนโปรแกรม (Scripts area)
ลองใช้คำ� สัง่ เปลีย่ นชุดหรือรูปร่างตัวละคร
สังเกตการเปลี่ยนแปลงบริเวณเวที

Primary 4
 37
การสร้างพื้นหลัง (Background)
ในโปรแกรม scartch สามารถวาดรูปเพื่อสร้างพื้นหลัง สามารถน�ำภาพ
ที่มีอยู่ในโปรแกรม หรือน�ำรูปถ่ายจากภายนอกเข้ามาเป็นฉากพื้นหลังได้
เพื่อน�ำมาสร้างเป็นฉากเรื่องราวที่เหมาะสมกับตัวละคร

N
O
TI
A
C
U
ED
G
IN
R
EE
IN

คลิกเลือก stage backdrop พืน้ ทีว่ าดภาพ

เป็นการเลือกเข้าสู่การแก้ไขพื้นหลัง มีขนาดกว้าง 480 หน่วย สูง 360 หน่วย
G
A

คลิกเลือกโหมด Backdrops หากต้องการเลือกภาพจากสมุดภาพใน

IM

จะมี
ค�ำสั่งควบคุม ท�ำพื้นหลัง และเรื่องเสียง
ชุดค�ำสัง่ การวาด ได้แก่ พู่กัน วาดเส้น
สี่เหลี่ยม วงกลม ตัวอักษร เทสี ยางลบ
คัดลอก
ชุดค�ำสัง่ การเลือกสี
จะมีทั้งในตารางสีและสามารถเลือกเพิ่มเติมได้
โปรแกรมสามารถเลือกได้โดยการคลิก
ค�ำสั่ง Choose backdrop from library
ในหน้าต่าง Backdrops Libray
จะมีหมวดให้เลือก เช่น Indoor outdoor เป็นต้น
เมื่อเลือกเรียบร้อยแล้วให้กด Ok
ให้สงั เกตทีบ่ ริเวณเวที (Stage)
เมื่อมีการเปลี่ยนแปลงพื้นหลัง (Backdrop)
38
การสร้างภาพเคลื่อนไหว (Animation)
สามารถท�ำได้โดยการใช้ค�ำสั่งเปลี่ยนแปลงชุดหรือรูปร่าง(Costmue)
และค�ำสั่งหยุดรอ wait สลับไปมาเพื่อให้ตาของเรา
มองเห็นภาพเป็นลักษณะของภาพเคลื่อนไหว

N
O
ชุดที่ 1 ชุดที่ 2 ชุดที่ 1 ชุดที่ 2 ชุดที่ 1

TI
A
C
10 Pixel 10 Pixel 10 Pixel 10 Pixel

U
หยุดแสดง หยุดแสดง หยุดแสดง หยุดแสดง
ภาพ 1 วินาที ภาพ 1 วินาที ภาพ 1 วินาที ภาพ 1 วินาที ED
G
IN
R
EE
IN

คลิกเลือกตัวละครทีต่ อ้ งการ ให้เลือกชุดรูปร่างที่ 2 ของแมว

ทำ�ให้เป็นภาพเคลือ่ นไหว โดยการกดที่ลูกศรลงด้านขวามือ
G

และท�ำการเลือก costume 2
A

คลิกเลือกและลากค�ำสัง่ เริม่ ต้นเมือ่ ชักธง คลิกเลือกและลากชุดค�ำสัง่ wait

IM

ไปที่ Event แล้วลากค�ำสั่ง

when flag click ไปยังพื้นที่ท�ำงาน
คลิกเลือกและลากค�ำสัง่ move เลือกค�ำสัง่ ซ�ำ้ ตัง้ แต่ขอ้ 3-6
จะอยู่ในชุดค�ำสั่ง แต่ให้เปลี่ยนชุดกลับมาเป็นชุดที่ 1
หรือ costume 1
คลิกเลือกและลากค�ำสัง่ เปลีย่ นรูปร่าง เลือกค�ำสัง่ ซ�ำ้ ตัง้ แต่ขอ้ 3-6 อีกครัง้ หนึง่
ซึ่งจะอยู่ใน และเลือกค�ำสัง่ ซ�ำ้ อีกครัง้ ในข้อ 7
แล้วลองกดปุ่มให้เริ่มค�ำสั่งหรือกดที่ ธง

Primary 4
 39
การวนซ�้ำและวนซ�้ำไม่สิ้นสุด (Loop Repeat , Loop Forever)
จากชุดค�ำสั่งการสร้างภาพเคลื่อนไหว จะเห็นได้ว่ามีการใช้ค�ำสั่งที่ซ�้ำกัน
มีลักษณะเป็นชุดค�ำสั่ง คือ move , switch costume และ wait ซึ่ง
เราสามารถใช้ค�ำสั่ง Repeat เพื่อท�ำให้ไม่ต้องเขียนค�ำสั่งที่ยาวต่อเนื่อง

N
O
TI
A
C
U
ED
G
IN
R
EE

คลิกเลือกตัวละคร แมว
IN

ในกรณีนสี้ ามารถใช้คำ� สัง่ next costume

เพื่อลดชุดค�ำสั่งลงมาได้อีก แต่ต้องปรับ
G

จ�ำนวนครั้งที่ท�ำซ�้ำเพิ่มจาก 10 เป็น 20
A

คลิกเลือกและลากค�ำสัง่ เริม่ ต้นเมือ่ ชักธง สามารถท�ำให้เดินวนซ�ำ้ ไม่มที สี่ นิ้ สุดได้

IM

ไปที่ Event แล้วลากค�ำสั่ง โดยใช้คำ� สัง่ Forever แทน Repeat

when flag click ไปยังพื้นที่ท�ำงาน
คลิกเลือกและลากค�ำสัง่ Loop Repeat
โดยกดที่ค�ำสั่ง Control และ ลากค�ำสั่ง
Repeat ไปยังพื้นที่ท�ำงาน
คลิกเลือกและลากค�ำสัง่ 3-7 ของ
หน้าการท�ำภาพเคลือ่ นไหว
แล้วลองกดปุ่มให้เริ่มค�ำสั่งหรือกดที่ ธง
สามารถท�ำให้ตวั ละครเดินเร็วขึน้ ได้ดว้ ยการ
ลดเวลาการหยุดรอ จาก 1 วินาที
เป็น 0.5 วินาที
สามารถท�ำให้ตัวละครเมื่อเดินจนสุดขอบ
พืน้ ทีก่ ารท�ำงานให้เด้งกลับได้โดยใช้คำ� สัง่
if on edge , bounce
40
การก�ำหนดเหตุการณ์เพื่อตอบโต้กับผู้ใช้งาน (Events)
การสร้ า งเหตุ ก ารณ์ ( Events) เพื่ อ ตอบโต้ กั บ ผู ้ ใช้ ง าน ซึ่ ง ในโปรแกรม
scratch สามารถก�ำหนดเหตุการณ์ต่างๆ ได้โดยคลิกเลือกที่ค�ำสั่ง Events
ซึ่งมีเหตุการณ์ที่สามารถตอบโต้กับผู้ใช้งานดังต่อไปนี้

N
O
TI
A
C
U
ED
G
IN
R
EE
IN

When Flag Clicked When .............. > ...............

ก�ำหนดเหตุการณ์เมื่อธงถูกกด ก�ำหนดเหตุการณ์เมื่อความดังเสียง(Loudness)
G

ช่วงเวลา(Timer) , วิดโิ อเคลือ่ นที่ (VDO Motion)

A

When ............... Key pressed When I receive (Message1)

IM

ก�ำหนดเหตุการณ์เมื่อกดปุ่มต่างๆ บน ก�ำหนดเหตุการณ์เมื่อ โปรแกรม

Keyboard เช่น spacebar, a b c เป็นต้น ได้รับข้อความที่ก�ำหนดไว้
When this sprite Clicked Broadcast (Message1)
ก�ำหนดเหตุการณ์เมื่อตัวละครถูกคลิกกด ก�ำหนดให้ส่งข้อความเมื่อถึงช่วงเวลาที่ต้องการ

When backdrop switches to ............ Broadcast (Message1) and wait

ก�ำหนดเหตุการณ์เมื่อ ฉากหลัง ก�ำหนดให้ส่งข้อความเมื่อถึงช่วงเวลาที่ต้องการ
ถูกเปลี่ยนไปเป็น ฉากที่ก�ำหนด และรอเหตุการณ์อีกเหตุการณ์

Primary 4
 41
ตัวอย่างการสร้างโปรแกรมการตอบโต้กับผู้ใช้งาน
โจทย์ : ให้สร้างเกมเกี่ยวกับตรรกะ การเรียงล�ำดับรูปแบบ โดยผู้ใช้งาน
สามารถเลือกค�ำตอบได้ว่าอันไหนถูกและผิด พร้อมทั้งมีคะแนนขึ้นให้
ทราบ โดยถ้าเลือกค�ำตอบถูก ได้ 10 คะแนน และ ผิด ลบ 10 คะแนน

N
O
TI
A
C
U
ED
G
IN
R
EE
IN

สร้างตัวละครและฉากตามโจทย์ คลิกเลือกค�ำสัง่ Change score by ....

ท�ำตามโจทย์หรือก�ำหนดเอง เป็นการก�ำหนดการเปลี่ยนแปลงค่าคะแนน
G

ให้เพิ่มหรือลดลงตามที่ต้องการ
A

ก�ำหนดค่าตัวแปรใหม่ คะแนน(score) คลิกเลือกค�ำสัง่ ถ้าถูกต้องให้เปลีย่ นเป็นข้อ

IM

โดยกดที่ data --> make a variable ต่อไป โดยเลือกค�ำสั่ง Look-->

จะมีหน้าต่างแล้วพิมพ์ ค�ำว่า score
คลิกเลือกตัวละคร รถสีเขียว
เพือ่ ก�ำหนด event
คลิกเลือกค�ำสัง่ ก�ำหนดเหตุการณ์
เมือ่ ตัวละครตัวนีถ้ กู กด ที่ event
When this sprite clicked
switch backdrop to next backdrop
ส�ำหรับค�ำตอบทีผ่ ดิ ให้คลิกทีต่ วั ลูกบาส
ให้คลิกและเลือกเหมือนข้อ 4 -5 แต่ให้ลดคะแนน
ลงเป็น -10 คะแนน ถ้าตอบข้อนี้
อาจจะท�ำหน้าทีผ่ ดิ เพือ่ แสดงเพิม่ เติม
หรืออาจจะเพิม่ เสียงผิดก็ได้
42
การก�ำหนดเงื่อนไข ถ้า(If....then.....)
การก�ำหนดเงื่อนไขเป็นการสร้างรูปแบบหรือตรรกะวิธีการตัดสินใจใน
การด�ำเนินการใดๆกับเหตุการณ์นั้น โดยถ้าเกิดเหตุการณ์หรือเงื่อนไขที่
ก�ำหนดไว้เป็นจริง แล้วตัวละครหรือฉากจะด�ำเนินการตามที่ถูกก�ำหนด

N
โจทย์ปัญหา : หากตัวละครแมวเดินชนผีเสื้อเดินแล้วให้แมวร้องเหมียว

O
และเปลี่ยนทิศทางการเคลื่อนที่

TI
A
C
U
ED
G
IN
R
EE
IN
G
A

สร้างตัวละครและฉากดังรูป คลิกเลือกและลากค�ำสัง่ การก�ำหนดเงือ่ นไข

IM

โดยให้มแี มว และ ผีเสือ้

ก�ำหนดเงือ่ นไขให้ แมว และ ผีเสือ้ ก�ำหนดเงือ่ นไข

เคลือ่ นที่ และหาชนของให้เด้งกลับ ถ้าสัมผัสสีสม้
ดังตัวอย่าง (โดยการกดทีส่ ใี นช่องค�ำสัง่ แล้วคลิกสีทผี่ เี สือ้ )
ก�ำหนดฟังก์ชนั่ If ก�ำหนดเหตุการณ์ตามต้องการ
โดยคลิกเลือกค�ำสัง่ โดยถ้าเหตุการณ์แมวสัมผัสกับสีสม้
ใน Control ของผีเสือ้ แล้วจะเกิดเหตุการณ์ใดขึน้

Primary 4
 43
การก�ำหนดเงื่อนไขถ้า....เป็นจริงแล้ว......ไม่จริงแล้ว.....(If...else...)
เป็นการก�ำหนดเงื่อนไขให้กับตัวละครหรือฉากว่าถ้าหากเกิดเหตุการณ์
หรือเงื่อนไขใดๆแล้วเป็นจริง จะด�ำเนินการอย่างไร หรือหากไม่จริงแล้ว
จะด�ำเนินการอย่างไรต่อไป

N
โจทย์ปัญหา : หากตัวละครผีเสื้อชนกับแมวแล้วให้ผีเสื้อเปลี่ยนสี หาก

O
TI
ไม่ชนกับผีเสื้อให้เปลี่ยนทิศทางการเคลื่อนที่ไป 15 องศา

A
C
U
ED
G
IN
R
EE
IN
G
A

สร้างตัวละครและฉากดังรูป คลิกเลือกและลากค�ำสัง่ การก�ำหนดเงือ่ นไข

IM

โดยให้มแี มว และ ผีเสือ้

ก�ำหนดเงือ่ นไขให้ แมว และ ผีเสือ้ ก�ำหนดเงือ่ นไข

เคลือ่ นที่ และหาชนของให้เด้งกลับ ถ้าสัมผัสสีสม้ ของแมว
ดังตัวอย่าง (โดยการกดทีส่ ใี นช่องค�ำสัง่ แล้วคลิกสีทผี่ เี สือ้ )
ก�ำหนดฟังก์ชนั่ If else ก�ำหนดเหตุการณ์ถา้ เจอสีสม้ ของแมวให้
โดยคลิกเลือกค�ำสัง่ เปลีย่ นสี และถ้าหากไม่เจอสีสม้ ให้เปลีย่ น
ใน Control ทิศทางการหมุนไป 15 องศา
 21 st century

ให้นักเรียนสร้างนิทานหรือเรื่องราว
ในชีวิตประจ�ำวันของตนเอง
Investigate Idea
D
OR ลิปดาได้ฟังเรื่องราวของเพื่อนที่เดินทางไปเที่ยวได้

N
W

การออกแบบ
KEY

พบเห็นสิ่งต่างๆมากมาย ลิปดาคิดว่าน่าจะน�ำเรื่อง

O
โปรแกรมและหา
ราวนั้ น มาท�ำเป็ น การ์ ตู น สั้ น หรื อ เรื่ อ งราวให้ กั บ

TI
ข้อผิดพลาด
เพื่อนๆ คนอื่นได้รับทราบจะได้ไม่ต้องเล่าใหม่

A
C
U
R D
DA Mission 1. ให้นักเรียนสร้างนิทานหรือเรื่องราวของตนเอง ใน
ED
N
STA

โปรแกรม scratchโดยให้มีการตอบโต้กับผู้ใช้ มีภาพคลื่อนไหว

ว.๘.๒ ป๔/๒ 2. ให้ออกแบบโปรแกรมก่อนลงมือท�ำ(storyboard,อัลกอริทีม)
G

3. น�ำเสนอผลงานพร้อมจัดการประกวดผลงาน
IN
R

Materials 1.คอมพิวเตอร์และโปรแกรม Scratch 2. อุปกรณ์เครื่องเขียน

EE

นักเรียนเข้าใจการออกแบบโปรแกรมโดยใช้ Story Board

IN

Ask และอัลกอริทึม การเขียนโปรแกรม Scratch และวิธีการหา

ข้อผิดพลาดหรือไม่
G
A
IM

Plan & Design

ร่วมกันวางแผนและออกแบบโปรแกรมโดยใช้โปรแกรม scratch
ข้อผิดพลาดหรือไม่

Primary 4
 45

Building & Testing

ให้นักเรียนลงมือท�ำแผนที่ก�ำหนดไว้

N
O
TI
A
C
U
ED
G
IN

Evaluation & Redesign

R

1.นักเรียนสามารถท�ำภารกิจนี้ส�ำเร็จหรือไม่
EE

2. ส่วนที่ยากที่สุดของภารกิจนี้คืออะไร
3.แนวความคิดที่ได้จากการท�ำกิจกรรมคืออะไร
IN
G
A
IM
46
การตรวจสอบข้อผิดพลาดของโปรแกรม (Testing and Debugging)
หลังจากที่ท�ำการเขียนโปรแกรมเสร็จสิ้นแล้วโปรแกรมนั้นจะต้องได้รับการ
ตรวจสอบก่อนว่า มีข้อผิดพลาด (error) ในโปรแกรมหรือไม่ หากพบข้อผิด
พลาดให้ตรวจสอบ การท�ำงานทีละค�ำสัง่ เมือ่ พบจุดทีท่ �ำให้ผลลัพั ธ์ไม่ถกู ต้อง
ให้ท�ำการแก้ไขจนกว่าจะได้ผลลัพธ์ที่ถูกต้อง

N
O
TI
A
C
U
ED
G
IN
R

เราออกแบบโปรแกรม
EE

มาดีมากแล้วท�ำไมถึง
IN

ใช้งานไม่ได้ละคะ แสดงว่าโปรแกรมที่
G

ท�ำไว้มีข้อผิดพลาดไงละครับ
A

เราต้องตรวจสอบหาข้อผิดพลาด
IM

ที่ละค�ำสั่ง เมื่อพบจุดที่ท�ำให้
ผลลัพธ์ไม่ถูกต้องจึงลงมือแก้ไข

Primary 4
 47
ตัวอย่างการหาข้อผิดพลาดในโปรแกรม (Debuggin)
โจทย์ : จากการออกแบบโปรแกรมสั่งให้ตัวละคร เดินมาพบกันแล้วให้ตัว
ละครตัวที่ 1 แมว ไปกับตัวละครตัวที่ 2 ค้างคาวแล้ว พูด "Hello"

N
O
TI
A
C
U
ED
G
IN

ปัญหาเกิดขึ้นเมื่อตัวละครสองตัวพบกันแต่ไม่พูดค�ำว่า Hello
R
EE

แบ่งแยกปัญหาออกเป็นส่วนๆ :
แสดงว่าปัญหาเกิดในช่วง
IN

การแสดงผลค�ำพูดหรือเงื่อนไข
G
A

หาจุดส�ำคัญของปัญหา :
IM

ให้ตรวจสอบเงื่อนไขว่าถูกต้องหรือไม่
ผลการตรวจสอบข้อผิดพลาด
พบว่าเงื่อนไขผิดพลาดเนื่องจากเมื่อตัวละครสัมผัสสีฟ้าถึงจะพูด
ท�ำการแก้ไขเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ
เปลี่ยนเงื่อนไขให้พบสีน�้ำตาลของค้างคาว
48
การฝึกตรวจหาข้อผิดพลาด
จากโปรแกรมของผู้อื่น
ดร.วี ก�ำลังท�ำงานอยู่หน้าคอมพิวเตอร์ ลิปดามา
เห็นจึงสงสัย ดร.วี จึงตอบว่า ก�ำลังหาข้อผิดพลาดของ
โปรแกรมอยู่นะครับ ถ้าหากหาข้อผิดพลาดพบจะท�ำให้

N
โปรแกรมท�ำงานได้อย่างสมบูรณ์แบบครับ และไม่เพียง

O
แต่นักเขียนโปรแกรมเท่านั้นนะที่ควรจะฝึกฝนทักษะนี้

TI
ทุกคนควรจะฝึกฝนเนื่องจากจะท�ำให้ เราสามารถ

A
น�ำไปหาสาเหตุของปัญหาในชีวิตประจ�ำวัน

C
ของเราได้เช่นกัน

U
ED Missions :

1. ให้นักเรียนแบ่งกลุ่ม กลุ่มละ 4 คน
G
IN

ออกแบบโปรแกรม Scratch ที่มีข้อผิดพลาด

2. แลกเปลี่ยนให้เพื่อนๆ แต่ละกลุ่มหาข้อผิดพลาด
R
EE

3. กลุ่มใดท�ำได้เร็วที่สุดและถูกต้องที่สุดเป็นผู้ชนะ
Materials : 1. คอมพิวเตอร์โปรแกรม scratch 2. อุปกรณ์เครื่องเขียน
IN

Ask : การฝึกตรวจหาข้อผิดพลาดของโปรแกรมส�ำคัญอย่างไร
G
A
IM

Plan & Design ให้ออกแบบและวางแผนการเขียนโปรแกรมที่มีข้อผิดพลาด

Primary 4
 49
ให้นักเรียนออกแบบโปรแกรมที่มีข้อผิดพลาดเพื่อให้เพื่อนๆหา

N
O
TI
A
C
U
ED
G
IN
R
EE
IN
G
A
IM

การหาสาเหตุของข้อผิดพลาดของโปรแกรมควรทำ�อย่างไร
การแบ่งแยกปัญหาและหารูปแบบจะช่วยให้หาสาเหตุของปัญหาได้อย่างไร่
การหาสาระสำ�คัญของปัญหาจะช่วยให้หาสาเหตุของปัญหาได้อย่างไร