Top
 

วิทยาการคำนวณ ป.2 หน่วย 2 เรื่อง เขียนโปรแกรมอย่างง่ายโดยใช้ซอฟต์แวร์และสื่อและตรวจสอบหาข้อผิดพลาดของโปรแกรม

Imagineering Education / บทเรียนวิชาวิทยาการคำนวณ  / DIGITAL KIDS  / วิทยาการคำนวณ ป.2 หน่วย 2 เรื่อง เขียนโปรแกรมอย่างง่ายโดยใช้ซอฟต์แวร์และสื่อและตรวจสอบหาข้อผิดพลาดของโปรแกรม

วิทยาการคำนวณ ป.2 หน่วย 2 เรื่อง เขียนโปรแกรมอย่างง่ายโดยใช้ซอฟต์แวร์และสื่อและตรวจสอบหาข้อผิดพลาดของโปรแกรม

ระดับชั้น : ประถมศึกษาปีที่ 2
หน่วยที่ : 2
เรื่อง : เขียนโปรแกรมอย่างง่ายโดยใช้ซอฟต์แวร์และสื่อและตรวจสอบหาข้อผิดพลาดของโปรแกรม
สาระ : สาระที่ 4 เทคโนโลยี
ตัวชี้วัด :
ว 4.2 ป.2/2 เขียนโปรแกรมอย่างง่าย โดยใช้ซอฟต์แวร์หรือสื่อและตรวจหาข้อผิดพลาดของโปรแกรม

วิทยาการคอมพิวเตอร์ (Computer Science) การแก้ปัญหาอย่างเป็นขั้นตอนและเป็นระบบ การใช้แนวคิดเชิงคำนวณในการแก้ปัญหาในชีวิตประจำวัน บูรณาการกับวิชาอื่น การเขียนโปรแกรมการคาดการณ์ผลลัพธ์ การตรวจหาข้อผิดพลาด การพัฒนาแอปพลิเคชันหรือพัฒนาโครงงานอย่างสร้างสรรค์เพื่อแก้ปัญหาในชีวิตจริง

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

โปรแกรม (Program) คือ การแสดงลำดับขั้นตอนคำสั่งเพื่อสั่งให้คอมพิวเตอร์ทำงาน โดยการเขียนโปรแกรม (Programming) จะถูกเรียกว่า การเขียนโค้ด (coding) และภาษาที่ใช้สื่อสารกับคอมพิวเตอร์จะเรียกว่า ภาษาคอมพิวเตอร์ (Computer Language)

สมมติ คุณครูให้วาดรูปสี่เหลี่ยม

1. หยิบดินสอ
2. วาดรูปสี่เหลี่ยม
3. วางดินสอ

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

1. หยิบดินสอ
2. จรดดินสอลงบนกระดาษ
3. ลากเส้นขึ้นด้านบน 5 เซนติเมตร
4. ลากเส้นไปทางขวา 5 เซนติเมตร
5. ลากเส้นลง 5 เซนติเมตร
6. ลากเส้นไปทางซ้าย 5 เซนติเมตร
7. หยุด

การแสดงลำดับของคำสั่ง ให้คอมพิวเตอร์ (หุ่นยนต์) ทำงาน

โจทย์ : สมมติว่า เพื่อนคนหนึ่งเป็นหุ่นยนต์ ให้นักเรียนสั่งหุ่นยนต์ (เพื่อน) เคลื่อนที่จากตำแหน่ง 3 ไปตำแหน่ง 2 ซึ่งเป็นตัวแรคคูนต้องใช้คำสั่งใดบ้าง ให้นักเรียนเลือกคำสั่งลูกศรด้านซ้ายมือ เรียงลำดับเพื่อสั่งงานหุ่นยนต์ (เพื่อน)

การตรวจสอบข้อผิดพลาดของโปรแกรม (Debugging)

โปรแกรมคอมพิวเตอร์ที่เขียนบางครั้งจะเกิดปัญหาขึ้น ปัญหาที่เกิดขึ้นจากการเขียนโปรแกรมในแต่ละลำดับขั้นของคำสั่งนั้นเรียกว่า ข้อผิดพลาด (Bug) การหาและแก้ไขปัญหาข้อผิดพลาดจะเรียกว่า การตรวจสอบข้อ ผิดพลาดของโปรแกรม(Debugging)

โจทย์ การทำกิจวัตรประจำวันของนักเรียนให้นักเรียนหาข้อผิดพลาดของโปรแกรมการทำกิจวัตรประจำวันของนักเรียนคนนี้

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

เป็นเว็บไซต์สำหรับฝึกการเขียนโปรแกรมเบื้องต้นโดยไม่จำเป็นต้องติดตั้งโปรแกรมเพิ่มเติม มีรูปแบบการเขียนโปรแกรมเป็นคำสั่งแบบบล็อก (Block Programming) เหมือนการต่อจิ๊กซอว์

มีด้วยกัน 4 หลักสูตร แต่ละหลักสูตรแตกต่างกันตามช่วงวัย และยังมีหลักสูตรเร่งรัด

ภายในเว็บไซต์นี้จะมีรายละเอียดหลักสูตร เช่น ใบงาน สื่อวีดิทัศน์ หรือแม้แต่แผนการสอนให้กับครูผู้สอนได้อ่าน และยังมีระบบติดตามผลผู้เรียน (Dashboard) อีกด้วย

รูปแบบการฝึกเขียนโค้ดใน www.code.org

มีอยู่ 2 รูปแบบ คือ แบบไม่ต้องใช้อุปกรณ์ไฟฟ้าและแบบใช้โปรแกรม โดยจะเน้นให้ผู้เรียนสามารถเขียนโปรแกรมและเข้าใจการเขียนลำดับขั้นตอนของคำสั่งขั้นพื้นฐานซึ่งจะเป็นพื้นฐานในการเขียนโปรแกรมด้วยภาษาอื่นๆ

1. แบบไม่ต้องใช้อุปกรณ์ไฟฟ้า (Unplugged) เป็นการสอนเขียนโค้ดหรือโปรแกรมเบื้องต้นโดยใช้รูปแบบของบัตรคำ หรือ สื่ออื่น

2. แบบใช้โปรแกรม เป็นการสอนเขียนโค้ด มีรูปแบบการเขียนโปรแกรมเป็นคำสั่งแบบบล็อก (Block programming) เหมือนการต่อจิ๊กซอว์ ที่มีการใช้ตัวการ์ตูนและสื่อภายในเว็บไซต์ ซึ่งในแต่ละระดับก็จะแตกต่างกัน

เป็นโปรแกรมภาษาคอมพิวเตอร์สำหรับผู้เริ่มต้นหัดเขียนโปรแกรม โดยใช้สื่อ เช่น ภาพ เสียง ข้อความ เพื่อสร้างเรื่องราวภาพเคลื่อนไหว สร้างเกมเพื่อเป็นการฝึกทักษะการคิดวิเคราะห์ และความคิดสร้างสรรค์

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

เขียนโปรแกรม กำหนดทิศทางของตัวละคร

เมื่อต้องการให้ตัวละครเคลื่อนที่ จำเป็นต้องทราบ 2 สิ่งก่อน สิ่งแรกก็คือ
1. เคลื่อนที่ด้วยระยะทางเท่าไร
2. จะเคลื่อนที่ไปทิศทางใด (Direction) โดยสามารถสังเกตได้จากข้อมูลของตัวละคร1

1.คลิกเลือกตัวละคร (Sprites) ที่ต้องการ และกดที่รายละเอียดข้อมูลของตัวละครซึ่งจะบอกตำแหน่งและทิศทางของตัวละครอยู่

2.คลิกเลือกชุดคำสั่ง Motion และเลือกคำสั่ง point in direction 90 เป็นคำสั่งกำหนดทิศทางของตัวละครที่ต้องการเคลื่อนที่
3.ลากคำสั่ง point in direction ใส่พื้นที่ทำงาน โดยถ้ากำหนดทิศทางเป็น 0O (ทิศเหนือ-ด้านบน) สังเกตทิศทางการหันหน้าของตัวละคร
4.ลากคำสั่ง point in direction ใส่พื้นที่ทำงาน โดยกำหนดเป็น 90O (ทิศตะวันออก-ด้านขวา) สังเกตทิศทางการหันหน้าของตัวละคร
5.ลากคำสั่ง point in direction ใส่พื้นที่ทำงาน โดยกำหนดทิศทางเป็น 180O (ทิศใต้-ด้านล่าง) สังเกตทิศทางการหันหน้าของตัวละคร
6.ลากคำสั่ง point in direction ใส่พื้นที่ทำงาน โดยทิศทางเป็น -90O (ทิศตะวันตก-ด้านซ้าย) สังเกตทิศทางการหันหน้าของตัวละคร

การเขียนโปรแกรม ย้ายตำแหน่งตัวละคร

เป็นการย้ายตำแหน่งของตัวละคร (Sprite) โดยมีคำสั่งที่เกี่ยวข้อง เช่น
1. move ….. steps คือ คำสั่งกำหนดจำนวนก้าวเพื่อให้เคลื่อนที่ในแนวแกน X …. ก้าว

2. go to x: ….. y:….. คือ คำสั่งในการกำหนดระยะทางเพื่อย้ายตัวละครไปยังตำแหน่ง แกน X และแกน Y เท่าไร

1.คลิกเลือกตัวละคร (Sprites) ที่ต้องการ ก่อนจะทำให้ตัวละครใดเคลื่อนที่ต้องสังเกตและเลือกตัวละครที่ต้องการให้ถูกต้อง
2.สังเกตตำแหน่งของตัวละคร จากตัวอย่างตัวละครแมวอยู่ ณ ตำแหน่ง X=0, Y=0
3.เลือกชุดคำสั่ง Scripts Motion ซึ่งเป็นชุดคำสั่งควบคุมการเคลื่อนที่ของตัวละครมีลักษณะเป็นกล่องคำสั่ง ต่อกันแบบจิ๊กซอว์
4.คลิกเลือกและลากคำสั่ง go to x:0 y:0 แล้วลากไปยังพื้นที่สั่งงานเขียนโปรแกรม (Scripts Area) ลากคำสั่งออกมา 4 คำสั่ง
5. พิมพ์ตำแหน่งที่ต้องการ ให้ทดลองเปลี่ยนตำแหน่งตามรูปตัวละครจะย้ายตำแหน่งไปตามตำแหน่งต่าง ๆ

6.เมื่อแก้ไขตำแหน่งแล้วให้คลิกคำสั่งนั้น เป็นการคลิกเพื่อสั่งให้คำสั่งทำงาน จากนั้นสังเกตการเปลี่ยนแปลงบริเวณเวที (Stage)
7.คลิกเลือกและลากคำสั่ง move 10 steps ซึ่งเป็นคำสั่งย้ายตำแหน่งไปข้างหน้ากำหนดเป็นจำนวนก้าวและทิศทางของตัวละคร
8.ทดลองเปลี่ยนระยะตามที่ต้องการ เป็นการเขียนโปรแกรมสั่งให้ตัวละครย้ายตำแหน่งตามที่ต้องการ

เขียนโปรแกรมเปลี่ยนขนาดตัวละคร

เป็นการเปลี่ยนขนาดของตัวละคร โดยมีคำสั่งที่เกี่ยวข้อง เช่น
1. change size by …. คือการเปลี่ยนขนาดเพิ่มขึ้นหรือลดลง
2. set size to ….% คือการกำหนดขนาดเพิ่มขึ้นหรือลดลงตามเปอร์เซ็นต์

1.คลิกคำสั่งคัดลอกตัวละคร (Stamp) ซึ่งเป็นคำสั่งคัดลอกตัวละครโดยในตัวอย่างต้องการคัดลอกเพื่อให้เห็นการเปลี่ยนแปลง
2.ให้คลิกตัวละครที่ต้องการคัดลอก โดยเมาส์พอยเตอร์จะเปลี่ยนเป็นตัวละครแต่ตัวละครที่คัดลอกจะซ้อนกันต้องลากออกมา
3.สังเกตตัวละครและเลือกตัวละครที่ต้องการ จากตัวอย่างจะมีตัวละคร 3 ตัว ที่คัดลอกไว้ซึ่งตัวละคร 1 ตัวจะมีคำสั่งแต่ละตัวไม่เหมือนกัน
4.คลิกเลือกลากคำสั่ง Scripts Looks ซึ่งเป็นชุดคำสั่งเกี่ยวกับหน้าตา รูปร่าง
5.ลากชุดคำสั่ง Chang size by 50 และ Set size to 10% ไปยัง พื้นที่สั่งงานเขียนโปรแกรม (Scripts area)
6. Change size by 50 คำสั่งเปลี่ยนขนาด เป็นคำสั่งเปลี่ยนขนาดโดย ใส่ขนาดเพิ่ม (+10) และ ลด (-10) เป็นต้น
7. Set size to 100% คำสั่งกำหนดขนาด เป็นคำสั่งกำหนดขนาดคิดเป็นเปอร์เซ็นต์ของภาพ
8.ทดลองเปลี่ยนระยะตามที่ต้องการ เป็นการเขียนโปรแกรมสั่งให้ตัวละครย้ายตำแหน่งตามที่ต้องการ

การเขียนโปรแกรมเปลี่ยนรูปร่าง

การเปลี่ยนรูปร่างนิยมใช้เมื่อตัวละครที่เคลื่อนที่ หรือพบกับเหตุการณ์แล้วเปลี่ยนลักษณะท่าทางการแสดงของตัวละคร โดยมีตัวอย่างคำสั่ง เช่น switch costume to…. คือ คำสั่งเปลี่ยนชุดตัวละคร จากชุดที่ ….. ไปยังชุดที่……

1.คลิกเลือกตัวละครที่ต้องการเขียนโปรแกรมเปลี่ยนรูปร่าง
2.คลิกเลือกคำสั่ง Costumes ซึ่งเป็นคำสั่งจัดการชุดหรือรูปร่างของตัวละครแต่ละตัว
3.จะมีหน้าต่าง Costumes ขึ้นมา ให้สังเกตชุดของตัวละครด้านซ้ายซึ่งโดยปกติจะมี 2 ชุด
4.สามารถเลือกชุดหรือรูปร่างตัวละครเพิ่มได้
5.จะมีหน้าต่าง Costume Library คือ หน้าต่างที่สามารถเลือกชุดหรือรูปร่างตัวละครเพิ่มเติมลงไป และสามารถวาดหรือเปลี่ยนสีเองได้
6.เมื่อเลือกแล้วสังเกตชุดหรือรูปร่างที่เพิ่่มขึ้นซึ่งในตัวอย่างจะเป็นรูปแมวนอน
7.คลิกเลือก Scripts Looks แล้วลากคำสั่ง switch costume to costumel ไปยังพื้นที่สั่งงานเขียนโปรแกรม (Scripts area)
8.ลองใช้คำสั่งเปลี่ยนชุดหรือรูปร่างตัวละคร สังเกตการเปลี่ยนแปลงบริเวณเวที (Stage)

การเขียนโปรแกรมเปลี่ยนภาพพื้นหลัง (Background)

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

1.คลิกเลือก Stage backdrop เป็นการเลือกเข้าสู่การแก้ไขพื้นหลัง
2.คลิกเลือกโหมด Backdrops ซึ่งจะมีคำสั่งควบคุม ทำพื้นหลัง และเรื่องเสียง
3.ชุดคำสั่งการวาด ได้แก่ พู่กัน วาดเส้น สี่เหลี่ยม วงกลม ตัวอักษร เทสี ยางลบ เลือก คัดลอก
4.ชุดคำสั่งการเลือกสี ซึ่งจะมีทั้งในตารางสีและสามารถเลือกเพิ่มเติมได้
5.พื้นที่วาดภาพ ซึ่งมีขนาดกว้าง 480 หน่วย สูง 360 หน่วย
6.หากต้องการเลือกภาพจากสมุดภาพในโปรแกรมสามารถเลือกได้โดยการคลิก คำสั่ง Choose backdrop from library
7.ในหน้าต่าง Backdrops Library จะมีหมวดให้เลือก เช่น Indoor Outdoor เป็นต้นเมื่อเลือกเรียบร้อยแล้วให้กด Ok
8.ให้สังเกตที่บริเวณเวที (Stage) เมื่อมีการเปลี่ยนแปลงพื้นหลัง (Backdrop)

การเขียนโปรแกรมให้ตัวละคร แสดงข้อความสนทนา แสดงและซ่อนตัวละคร

จากชุดคำสั่งรูปร่าง (Look) จะมีคำสั่งอื่นที่น่าสนใจ เช่น
1. การสนทนา (Say) เป็นคำสั่งให้แสงข้อความคำพูดโดยการพิมพ์ข้อความลงไป
2. การคิด (Think) เป็นคำสั่งให้แสดงความนึกคิดโดยการพิมพ์ข้อความลงไป
3. การแสดงตัวละคร (Hide) เป็นคำสั่งให้ตัวละครหายตัวไป
4. การซ่อนตัวละคร (Show) เป็นคำสั่งให้ตัวละครแสดงตัว

1.คลิกเลือก ซึ่งเป็นชุดคำสั่งเกี่ยวกับรูปร่าง การเปลี่ยนรูปร่าง สี ตำแหน่ง ขนาด การแสดงบทสนทนา เป็นต้น
2.คลิกลากคำสั่ง say hello for 2 secs ไปยังพื้นที่ทำงาน ซึ่งคำสั่งนี้เป็นคำสั่งให้ตัวละครแสดงคำพูด “Hello” ระยะเวลา 2 วินาที
3.ให้เปลี่ยนคำพูดหรือระยะเวลาตามต้องการแล้วคลิกคำสั่งสังเกตการเปลี่ยนแปลงที่เกิดขึ้นกับตัวละคร
4.คลิกลากคำสั่ง say hello ไปยังพื้นที่ทำงานซึ่งคำสั่งนี้เป็นคำสั่งให้ตัวละครแสดงคำพูด “Hello” โดยไม่กำหนดเวลา
5.คลิกลากคำสั่ง think Hmm.. for 2 secs ไปยังพื้นที่ทำงาน ซึ่งคำสั่งนี้จะสั่งให้ตัวละครนึกคิดเป็นคำพูด “Umm” ระยะเวลา 2 วินาที
6.ให้เปลี่ยนคำพูดหรือระยะเวลาตามต้องการ แล้วคลิกคำสั่งสังเกตเหตุการณ์ที่เกิดขึ้น และคลิกเลือกคำสั่ง think Hmm.. เพื่อเปรียบเทียบ
7.คลิกลากเลือกซ่อนตัวละคร hide ไปยังพื้นที่ทำงาน แล้วคลิกคำสั่งสังเกตเหตุการณ์ที่เกิดขึ้น ตัวละครจะหายไป
8.คลิกลากเลือกแสดงตัวละคร show ไปยังพื้นที่ทำงาน แล้วคลิกคำสั่งสังเกตเหตุการณ์ที่เกิดขึ้น ตัวละครจะ แสดงตัวขึ้นมา

ปวดหัวจัง เส้นทางไหนประหยัดเวลาที่สุดนะ

ปิดเทอมลิปดากับคุณพ่อไปเที่ยวบ้านคุณย่าที่จันทบุรี คุณอาฝากซื้อทุเรียนทอด คุณน้าฝากซื้อปลาหมึก คุณลุงฝากซื้อขนมหม้อแกง คุณป้าฝากซื้อข้าวหลาม ลิปดา สับสนไม่รู้จะไปซื้อร้านไหนก่อนดี เพื่อประหยัดเวลามากที่สุด คุณพ่อจึงให้แผนที่ลิปดาเขียนลำดับคำสั่งการเดินทางไปซื้อของฝาก
1.คุณครูสร้างแผนที่ร้านของฝากต่าง ๆ โดยให้นักเรียนใช้บัตรคำสั่งเพื่อเขียนโปรแกรมอย่างง่าย ให้ลิปดากับคุณพ่อไปซื้อของได้ครบ โดยมีเงื่อนไขให้ใช้บัตรคำน้อยที่สุดจะเป็นผู้ชนะ
2. คุณครูอาจจะกำหนดให้มีโจทย์เพิ่มเติม 1-2 ตัวอย่าง

วัสดุ อุปกรณ์ : 1. บัตรคำสั่ง 2. โจทย์คำสั่ง 3. หุ่นยนต์

รวบรวมข้อมูล : การเขียนโปรแกรมอย่างง่ายโดยสื่อ (บัตรคำ) ทำอย่างไร

ออกแบบวางแผน : วางแผนและออกแบบในการเขียนโปรแกรมอย่างง่ายโดยใช้สื่อ (บัตรคำ)

คำชี้แจง : ให้นักเรียนเขียนข้อความแสดงลำดับคำสั่งของโปรแกรมนี้

การเขียนโปรแกรมโดยใช้สื่อ และ Code.org

จุดประสงค์ เขียนโปรแกรมอย่างง่าย โดยใช้สื่อ (ว 4.2 ป.2/2)

วัสดุอุปกรณ์
1. กระดาษ A4 2. คอมพิวเตอร์ 3. อินเทอร์เน็ต
4. ใบงานใน www.code.org (ในบทเรียน 1 : การเขียนกระดาษกราฟ และ บทเรียน 2 : Real-life Algorithms: Paper Planes)

ขั้นตอนการทำกิจกรรม
ให้นักเรียนแต่ละคนปฏิบัติภารกิจดังต่อไปนี้

ให้นักเรียนสร้างลำดับคำสั่งให้กระต่ายเคลื่อนที่ไปหาแครอท โดยใช้ชุดคำสั่งลูกศร(ด้านล่าง)ลงไปในช่องว่างด้านล่างให้ต้องถูกต้องและใช้คำสั่งน้อยที่สุด ดังตัวอย่างด้านล่าง