CS50x : Week 0 - Scratch

เนื้อหา Week 0 - Scratch เป็นเรื่องทั่วๆไปสำหรับคนที่ไม่เคยเรียน Computer Science ก็จะได้รู้ว่าคอมพิวเตอร์มันอ่านข้อมูล เก็บข้อมูล หรือเข้าใจข้อมูลได้ยังไง binary คืออะไร algorithms คืออะไร การเขียนโปรแกรม และแนวคิดเบื้องต้น

ส่วนใหญ่มาจากการแปล และเรียบเรียงจาก Video และ Note อาจมีความคิดเห็นส่วนตัว หรือเนื้อหาใส่เพิ่มไปบ้าง ลดทอนไปบ้างนะครับ

References

พยายามดู Video อ่าน notes แล้วก็ดู Slide presentation ประกอบนะครับ จะได้เข้าใจมากขึ้น

Notes

• 2 ใน 3 ของนักเรียนก CS50 ไม่เคยเรียน Computer Science มาก่อน

#include <stdio.h>

int main(void)
{
    printf("hello, world\n");
}

Computer Science คืออะไร?

• Computer science คือแนวคิดพื้นฐานการแก้ปัญหา (problem solving) ด้วยหลักการและเหตุผล

            _______
           |       |
Input ---> |       | ----> Output
           |_______|

• ขั้นตอนการแก้ปัญหา คือ รับค่า (Input) --> [ปัญหาที่ต้องการแก้] --> ได้ผลลัพธ์ (Output)
• unary คือเลขฐานหนึ่ง แทนค่าจำนวนครั้งด้วยเครื่องหมาย | (หากใครนึกไม่ออก ลองนึกถึงที่นับคะแนนเลือกตั้ง เช่น | , ||||)
• decimal คือเลขฐานสิบ ระบบที่เราใช้ในชีวิตประจำวันปกติ คือนับ 0 ถึง 9
• binary คือเลขฐานสอง ที่ใช้ในระบบ Computer มีแค่เลข 0 และ 1

• แต่ละหลักของ binary เราเรียกว่า bit
• เนื่องจากคอมพิวเตอร์ใช้ไฟฟ้า ซึ่งมันจะมีแค่ switch เปิด ปิด เราเลยแทน binary 0 กับ 1 แทนการเปิด ปิดได้
• ใน computer จะมี switch เล็กๆเป็นพันล้านตัว เราเรียกมันว่า transistors

ตัวอย่างการหาค่า เช่น ปกติในตัวเลขธรรมดา เวลาเราจะหาค่า เราดูจาก หลัก หน่วย สิบ ร้อย พัน หมื่น แสน ล้าน ใช่มั้ย

เช่น หนึ่งร้อยยี่สิบสาม

123

• หลักหน่วยคือ 3 = 3 x 1= 3
• หลักสิบคือ 2 = 2 x 10 = 20
• หลักร้อยคือ 1 = 1 x 100 = 100

รวมกันเป็น 123

100   10   1
1     2    3

• แต่ละหลัก ก็คือ การใช้ 10 ยกกำลัง N (เพราะเป็น decimal)
• ทีนี้พอจะหา binary ก็ใช้แบบเดิม เปลี่ียนจาก 10 เป็น 2 กำลัง N
• ถ้าฐาน 16 หรือฐาน อื่นๆ ก็ใช้แบบเดียวกัน คือ ฐานx ยกกำลัง N
• คอมพิวเตอร์ส่วนใหญ่จะใช้ 8 บิต (8 bits) เช่น 00000011 = 3

ทีนี้ binary วิธีคิดก็ตามนี้ เช่น 0 1 0 1 0

8 4 2 1
1 0 1 0

ก็จะได้ 8 + 2 = 10

ตรงนี้ถ้าใครเข้าใจวิธีการคิด เราก็จะมองตัวเลข binary ง่ายๆ เหมือนเลขปกติเช่น 350431 เราไม่ต้องมานั่งคิดเลยว่าคือ สามแสนหน้าหมื่นสี่ร้อยสามสิบเอ็ด เช่น binary 1000 1001 ก็ตอบได้เลย อาจจะช้ากว่า decimal ขึ้นอยู่กับการคิดเลขไวของแต่ละคน

Text กับ binary

• คอมพิวเตอร์รู้จักแค่ 0 กับ 1 ฉะนั้น ลองมาดูตัวอย่าง แต่ละเคส ว่าคอมมันเข้าใจได้อย่างไร
• ตัวอักษร A คือเลข 65 เท่ากับ binary 01000001 หรือ 0100 0001 (บางทีจะเว้นวรรค 4หลัก เพื่อให้อ่านง่าย)
• เป็นมาตรฐานร่วมกัน เรียกว่า ASCII
• 8 bits หรือ 1 bytes เท่ากับ มีได้ทั้งหมด 2⁸ = 256 ค่า (รวมเลข 0) 0-255
• แสดงว่า 8 bits ไม่สามารถเก็บภาษาอื่นๆได้ ตอนนี้ได้แค่ตัวอังกฤษและอักขระพิเศษบางตัว
• เลยมีมาตรฐานใหม่ขึ้นมาเพื่อให้รองรับทุกๆภาษาบนโลกนี้ได้ เรียกว่า Unicode จะใช้จำนวน bit มากขึ้นกว่า ASCII
• Emoji ก็เป็น binary ที่ใช้มาตรฐานของ unicode เช่นกัน
• ตัวอย่าง Emoji ใส่หน้ากากในสไลด์ binary 11110000 10011111 10011000 10110111 - Link

รูป, วิดีโอ และเสียง

• รหัสสี จริงๆ ก็คือ binary มีค่า 0 ถึง 255 (8 bits) เช่น RGB

72  73  33
R   G   B

• 1 pixel ใช้ 24 บิต คือ RGB สีแดง 8 สีเขียว 8 สีน้ำเงิน 8 รวมกัน 24 bits
• วิดีโอคือรูปภาพหลายๆรูปที่เรียงต่อๆกัน เปลี่ยนแปลงตามเวลา นึกถึงการการทำ animation จากกระดาษ
• เพลง ก็มี MIDI ที่มีโน๊ต จังหวะ และความดังของเสียง
• เพลง มีหลายบริษัท หลายองค์ ฉะนั้นแต่ละมาตรฐานแต่ละ format ก็แตกต่างกันไป
• compression, zip, lossless, โดยไม่ลดคุณภาพหรือลดข้อมูล

Algorithms

• กลับมาที่รูปแรก Input / Output ในกล่องสี่เหลี่ยมก็คือ Algorithms - ขั้นตอน logic ในการแก้ปัญหา

            _______
           |       |
Input ---> |       | ----> Output
           |_______|

• ตัวอย่างถ้าเรามีสมุดหน้าเหลือง (รวมรายชื่อเบอร์โทร) อยากหาชื่อใครซักคน เราก็ต้องเปิดดูทีละหน้า ทีละหน้า พวกนี้ก็คือ algorithms
• ทดลองเปิดทีละ 2หน้า หรือเริ่มจากครึ่งหนังสือ แล้วเปิดหาแบบรวดเร็ว พวกนี้ก็คือ algorithm (ต่างกันที่วิธีการ และประสิทธิภาพ) อาจจะเร็วกว่าเปิดทีละหน้า แต่อาจจะไม่ถูก เพราะมันอาจจะเปิดข้ามหน้าที่มีชื่อที่เราต้องการก็ได้
• ตัวอย่าง algorithm ตัวหนึ่งที่อาจารย์พูดถึง (ฉีกสมุดโชว์ 🤣) คือ เริมจากเปิดครึ่งหนังสือ แล้วดูว่าชื่อที่ค้นหา มันจะอยู่ซ้ายหรือขวา ก็ฉีกทิ้งไป (เพราะชื่อเรียง A-Z อยู่แล้ว) แล้วก็ค่อยๆ ลดขนาดลงอีกรอบทีละครึ่งๆ จนเหลือหน้าสุดท้าย ก็จะหาชื่อเจอ

จากรูปด้านบน สรุปได้ดังนี้

1. Algorithm 1 - หาชื่อโดยเปิดทีละหน้า เวลาที่ใช้ในการแก้ปัญหา เป็น linear ขึ้นอยู่กับขนาดของหนังสือ n คือจำนวนหน้า ถ้ามี 500หน้า เราก็ใช้ 500 steps
2. Algorhtim 2 - เปิดทีละสองหน้า ใช้เวลาไวกว่าวิธีแรก และก็ยังเป็น linear คือ ขึ้นอยู่กับ จำนวนของหน้าหนังสือ
3. Algorhtim 3 - แบ่งหนังสือทีละครึ่งๆ แล้วหา โดยวิธีนี้จะไม่ใช่ linear แล้ว สมมติหาชื่อที่อยู่กลางหนัง อาจจะเปิดทีเดียวเจอก็ได้ หรือชื่อไปอยู่ท้ายๆหนังสือ ก็อาจจะใช้เวลามากขึ้น

Pseudocode

• ลองแปลงจากด้านบนเป็น Pseudocode ดูครับ ตัว pseudocode เป็นเหมือนวิธีคิด ไม่จำเป็นต้องตรงหลักภาษา programming ก็ได้ ขอแค่เข้าใจ

1  Pick up phone book                     // หยิบสมุดโทรศัพท์ขึ้นมา
2  Open to middle of phone book           // เปิดไปตรงกลางเล่มของหนังสือ
3  Look at page                           // มองไปที่หน้านั้น
4  If person is on page                   // ถ้าเจอชื่อคนที่เราต้องการหาในหน้านั้น?
5    Call person                          // โทรหา
6  Else if person is earlier in book      // ถ้าไม่เจอแต่ชื่อคนนั้นอยู่ก่อนหน้านี้
7    Open to middle of left half of book  // แบ่งครึ่งหนังสือจากฝั่งซ้าย
8    Go back to line 3                    // ทำซ้ำจากขั้นตอน 3
9  Else if person is later in book        // ถ้าไม่เจอแต่ชื่อคนนั้นอยู่หลังจากหน้านี้
10   Open to middle of right half of book // แบ่งครึ่งหนังสือจากฝั่งขวา
11   Go back to line 3                    // ทำซ้ำจากขั้นตอน 3
12 Else                                   // ไม่เข้าเงื่อนไขใดเลย?
13   Quit                                 // ออก

• จากตัวอย่าง พวกที่เป็น actions เช่น Pick up, Open to, Look at, Call, Open to, Quit เราจะเรียกมันว่า functions
• ส่วนที่เป็นเงื่อนไข ตรง If, Else if, Else เราจะเรียกว่า conditionals
• ตรงส่วนที่ต่อจากเงือนไข พวก person is on page, person is earlier in book, person is later in book เราเรียกมันว่า Boolean expressions
• ตรงส่วน Go back to line 3 ที่วนกลับไปทำซ้ำอีกรอบ เราเรียกมันว่า loops
• ศัพท์พวกนี้เดี๋ยวเราจะได้เห็น ได้ใช้

functions
  - arguments, return values
conditionals
boolean expressions
loops
variables

Scratch พื้นฐาน

• ใช้ Scratch เพื่อให้เข้าใจ Programming Fundamental - มีหน้า UI ให้ลาก วาง กำหนดเงื่อนไข เพื่อฝึกเข้าใจวิธีคิด Programming ยังไม่ต้องไปสนใจตัว syntax
• ลองดู Get Started เพื่อลองใช้งาน Scratch ดูได้ครับ
• แนะนำลองทำความเข้าใจตัวโปรแกรม ลองคลิ๊ก ลองเล่นก่อน และกลับมาดู Video / อ่าน notes ต่อครับ

• 1. ด้านซ้าย - คือส่วน functions, variables และก็ conditionals โลจิคต่างๆ
• 2. ด้านขวาบน - ส่วนแสดงตัวละคร เป็น sprites
• 3. ส่วนขวาล่าง - ส่วนแสดงโปรแกรมของเรา

• ใน Scratch ระบบแกน X,Y เปรียบเทียบด้านบน ตัวละครอยู่ที่จุด (0, 0) ขนาดหน้าจอคือ 480x360
• ตัว scract เหมือนต่อจิ๊กซอ แต่ละชิ้นจะมีรูปลักษณ์แตกต่างกัน เช่น หกเหลี่ยม ก็สามารถวางได้แต่ช่อง หกเหลี่ยม หรือวงกลม
• หมวด Motion - ก็จะเป็น functions เช่น เคลื่อนที่ n step หรือหมุนตัว x องศา
• หมวด​ Events - เป็นเงื่อนไข ว่าถ้าตรงตามเงื่อนไขจะทำอะไรต่อ เช่น เมื่อคลิ๊กปุ่มธงสีเขียวจะทำอะไรต่อจากนี้
• หมวด Control - เป็น conditions โดยเราต้องเลือกอีกชิ้นมาใส่ในช่องหกเหลี่ยม เช่น ลาก key space pressed? มาใส่ ก็จะเข้าเงื่อนไข เมื่อมีการกดปุ่ม spacebar
• หมวด Sensing - เป็น Boolean expressions ใช้ร่วมกับ Control
• หมวด Operators - เป็นพวกคณิตศาสตร์ต่างๆ เช่น บวก ลบ คุณ หาร หรือมากกว่า น้อยกว่า
• หมวด Variables - คือตัวแปร เราสามารถกำหนดค่า พวกตัวเลข หรือตัวอักษร มาใส่ในตัวแปรได้

จริงๆ ส่วน Scratch ผมว่าวิธีที่ดีที่สุด คือลองเล่นเอง ลองปรับ ครับ และมันต้องใช้เวลา อ่านอย่างเดียวไม่ได้แน่ๆ

• ถ้าคลิ๊กธงสีเขียว ให้เคลื่อนที่ไปข้างหน้า 10 ช่อง จะทำยังไง?
• เมื่อกดปุ่ม spacebar ให้หมุนตัว พร้อมเดินหน้า และพูดประโยคออกมา
• สามารถใช้ loop (repeat) และระบุจำนวนได้ เช่น เมื่อคลิ๊กธงสีเขียว ก็จะวนลูป 3รอบ และก็เล่นเสียงแมว จากนั้นรอ 1วินาที ตามรูปด้านล่าง

ตัวอย่าง Demo โปรเจ็คอื่นๆ - กดเข้าไปดู หรือสามารถกด See Inside เพื่อดูว่า Scratch เขียนยังไง แล้วประยุกต์ไปปรับใช้ได้ครับ

• trash can
• whack-a-mole
• Oscarttime
• Ivy's Hardest Game - Harvard
• Scratch Ideas - ไอเดีย
• Scratch - Explore - ไปลองไล่ดูโปรเจ็คคนอื่นๆ

สรุป

จบแล้วสำหรับ Week 0 สำหรับผู้ที่หลงเข้ามาอ่าน ก็ลองพยายามอ่าน พยายามฟัง ทบทวนบทเรียนดูนะครับ สำหรับคนที่ไม่เคยเรียน Programming มาก่อน บางอย่างอาจจะงงๆบ้าง ก็ค่อยๆ ทำความเข้าใจไปครับ

รอติดตาม Week ถัดไปครับ