logo
logo logo
  • หน้าหลัก
  • เข้าสู่ระบบ
  • ลงทะเบียน

เข้าสู่ระบบ

ลืมรหัสผ่าน?
ยังไม่มีบัญชี ? ลงทะเบียน
Smartyquizkids - สนุกคิด สนุกถาม

แหล่งเรียนรู้รายวิชาวิทยาการคำนวณ & การออกแบบและเทคโนโลยี ผ่านกระบวนการ Constructionism, Micro-learning และ PBL 🤖 AI Disclaimer: เนื้อหาและสื่อ บางส่วนสร้างสรรค์ร่วมกับ AI (Google Gemini) โดยผ่านการตรวจสอบความถูกต้องจากครูผู้สอนแล้ว

Abouts

  • บทเรียนสั้นกระชับ (Micro-Learning)
  • ฝึกทักษะการออกแบบอัลกอริทึม
  • ไขปัญหาท้าทายด้วยกระบวนการ PBL
  • ก้าวสู่การเป็นพลเมืองดิจิทัลอย่างมั่นใจ
  • นโยบายความเป็นส่วนตัว

Contact Us

  •   0829295259
  •   tpisit@wsst.ac.th
   
Image

© 2023 Smartyquizkids.com
All Rights Reserved.

ตัวอย่าง : กำหนดวัตถุประสงค์ของปัญหา (Objective)

💡 สูตรจำง่าย! สำหรับเขียนวัตถุประสงค์

น้องๆ สามารถท่องโครงสร้างนี้ แล้วกดปิดหน้าต่างไปพิมพ์ได้เลยครับ:

"เพื่อสร้างโปรแกรมที่ [รับค่า...]
แล้วนำมา [ประมวลผล...]
และแสดงผล [คำตอบ...]"

👉 ดูตัวอย่าง (เรื่องการหาผลรวม):

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

จำคีย์เวิร์ด 3 คำนี้ไว้: "รับค่า -> นำมา -> แสดงผล"
จำได้แล้ว กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!

ตัวอย่าง : กำหนดรูปแบบผลลัพธ์ที่ต้องการ

🖥️ สูตรจำง่าย! การกำหนดรูปแบบผลลัพธ์ (Output)

เทคนิคการตั้งคำถามกับตัวเอง:
"สุดท้ายแล้ว โปรแกรมต้องแสดงค่าอะไรออกมาให้เราเห็นบนหน้าจอ?"

👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):

รูปแบบผลลัพธ์ที่ต้องการ (Output) คือ : ตัวเลขผลรวม (ของตัวเลขทั้ง 2 จำนวน)

เมื่อรู้แล้วว่าผลลัพธ์สุดท้ายคืออะไร กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!

ตัวอย่าง : กำหนดข้อมูลนำเข้า

📥 สูตรจำง่าย! การกำหนดข้อมูลนำเข้า (Input)

เทคนิคการตั้งคำถามกับตัวเอง:
"เพื่อให้ได้ผลลัพธ์นั้น เราต้องป้อนข้อมูลอะไรเข้าไปให้โปรแกรมคิดบ้าง?"

👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):

ข้อมูลนำเข้า (Input) คือ : ตัวเลขจำนวนที่ 1 และ ตัวเลขจำนวนที่ 2

เมื่อรู้แล้วว่าต้องป้อนข้อมูลอะไร กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!

ตัวอย่าง : กำหนดข้อมูลอื่นๆ ที่ใช้ในการแก้ปัญหา

⚙️ สูตรจำง่าย! การประมวลผลและตัวแปร (Process)

เทคนิคการตั้งคำถามกับตัวเอง (ต้องตอบให้ครบ 2 ข้อนะ!):
1. โปรแกรมต้องเอาข้อมูลมาคำนวณยังไง? (บวก ลบ คูณ หาร)
2. เราต้องสร้าง "กล่อง" (ตัวแปร) ชื่ออะไรบ้าง เพื่อมาเก็บข้อมูล?

👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):

การประมวลผล คือ : นำตัวเลขจำนวนที่ 1 มาบวก (+) กับตัวเลขจำนวนที่ 2
ตัวแปรที่ใช้ คือ : ตัวแปรเก็บตัวเลขที่ 1, ตัวแปรเก็บตัวเลขที่ 2, ตัวแปรเก็บผลรวม

เมื่อรู้สูตรคำนวณและชื่อตัวแปรแล้ว กดกากบาทปิดหน้าต่างไปพิมพ์ได้เลย!

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

🔵 สูตรจำง่าย! กฎการตั้งชื่อตัวแปรและสูตร

🚩 กฎเหล็ก 4 ข้อในการตั้งชื่อตัวแปร (Variable):
1. ใช้ภาษาอังกฤษเท่านั้น (เช่น weight, price)
2. ห้ามเว้นวรรค (ใช้ totalPrice หรือ total_price)
3. ห้ามขึ้นต้นด้วยตัวเลข
4. ต้องเขียนให้ตรงกันเป๊ะ! (ตัวเล็ก-ตัวใหญ่ต้องเหมือนเดิมตลอด)

👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):

ตัวแปรที่ใช้: number1, number2 และ sum
สูตรคำนวณ: sum = number1 + number2

เมื่อปรึกษากับเพื่อนและได้ชื่อตัวแปรภาษาอังกฤษแล้ว กดปิดหน้าต่างไปพิมพ์ได้เลย!

ตัวอย่าง : ระบุลักษณะรูปแบบของผังงานของโปรแกรม

🟣 สูตรจำง่าย! การเลือกรูปแบบผังงาน

เทคนิคการตั้งคำถามกับตัวเอง (เพื่อเช็คตรรกะ):
1. "โจทย์ข้อนี้ต้องมีการตัดสินใจ (มีทางแยก ใช่/ไม่ใช่) ไหม?"
2. "โจทย์ข้อนี้ต้องมีการทำงานซ้ำๆ (วนลูป) ไหม?"
👉 ถ้าคำตอบคือ "ไม่" ทั้งสองข้อ = เป็น แบบเรียงลำดับ แน่นอน!

👉 ดูตัวอย่าง (ถ้าโจทย์คือการหาผลรวมของตัวเลข 2 จำนวน):

รูปแบบผังงานที่ใช้ คือ : แบบเรียงลำดับ (Sequence)
⚠️ ข้อควรระวัง: เมื่อเลือกแบบนี้แล้ว ตอนวาดผังงาน (Flowchart) จะต้องลากลูกศรเป็นเส้นตรงไหลลงมาทางเดียว ห้ามมีทางแยกเด็ดขาด!

เมื่อวิเคราะห์รูปแบบผังงานได้แล้ว กดปิดหน้าต่างไปพิมพ์คำตอบได้เลย!

ตัวอย่าง : ออกแบบอัลกอริทึมด้วยภาษาธรรมชาติ

📝 สูตรจำง่าย! เขียนอัลกอริทึมภาษาธรรมชาติ

เทคนิคการคิด (เอาข้อมูลเก่ามาประกอบร่าง!):
การเขียนอัลกอริทึม ต้องเขียนเรียงเป็นข้อๆ โดยมี 5 โครงสร้างหลัก คือ:
1. เริ่ม (ต้องมีคำว่า เริ่มต้นการทำงาน)
2. รับ (ถามผู้ใช้ และรับค่ามาเก็บใน "ตัวแปร Input")
3. คิด (คำนวณตาม "สูตร" แล้วเก็บผลลัพธ์ใน "ตัวแปร Output")
4. โชว์ (นำผลลัพธ์มาแสดงออกทางหน้าจอ)
5. จบ (ต้องมีคำว่า สิ้นสุดการทำงาน)

👉 ดูตัวอย่าง (เรื่องการหาผลรวมของตัวเลข 2 จำนวน):

1. เริ่มต้นการทำงาน
2. แสดงข้อความ "กรุณาป้อนตัวเลขที่ 1" เพื่อบอกผู้ใช้
3. รับค่าตัวเลขที่ 1 มาเก็บไว้ในตัวแปร number1
4. แสดงข้อความ "กรุณาป้อนตัวเลขที่ 2" เพื่อบอกผู้ใช้
5. รับค่าตัวเลขที่ 2 มาเก็บไว้ในตัวแปร number2
6. นำ number1 มาบวกกับ number2 แล้วเก็บผลลัพธ์ในตัวแปร sum
7. แสดงผลลัพธ์ที่เก็บอยู่ในตัวแปร sum ออกทางหน้าจอ
8. สิ้นสุดการทำงาน

สังเกตไหม? เราแค่เอาข้อมูล Input, Process, Output ที่หาไว้มาแต่งเป็นประโยคเท่านั้นเอง!

ตัวอย่าง : ออกแบบอัลกอริทึมด้วยรหัสจำลอง

💻 สูตรจำง่าย! แปลงร่างเป็นรหัสจำลอง (Pseudocode)

เทคนิคการคิด (เปิดพจนานุกรมแปลภาษา!):
นำ "ภาษาธรรมชาติ" จากข้อที่แล้ว มาแปลเป็นคำศัพท์สากล ดังนี้:
1. เริ่มต้น / สิ้นสุด ➔ START / END
2. แสดงข้อความ ➔ PRINT "..."
3. รับค่าตัวแปร ➔ INPUT (ตามด้วยชื่อตัวแปร)
4. คำนวณ/กำหนดค่า ➔ SET (ตามด้วยสูตรคำนวณ)

👉 ดูตัวอย่าง (เรื่องการหาผลรวมของตัวเลข 2 จำนวน):

START
  PRINT "กรุณาใส่ตัวเลขที่ 1:"
  INPUT number1
  PRINT "กรุณาใส่ตัวเลขที่ 2:"
  INPUT number2
  SET sum = number1 + number2
  PRINT sum
END

เมื่อรู้คำศัพท์ภาษาอังกฤษสากลแล้ว กดกากบาทปิดหน้าต่างไปเขียนโค้ดได้เลย!

ตัวอย่าง : ออกแบบอัลกอริทึมด้วยผังงาน

🎀 สูตรจำง่าย! แปลงรหัสจำลองเป็นผังงาน (Flowchart)

เทคนิคการคิด (ลอกของเดิม มาเติมกรอบ!):
กฎเหล็ก: ให้นำ "รหัสจำลอง (Pseudocode)" ที่น้องๆ เขียนไว้ในข้อที่แล้ว มาวาดใส่กรอบสัญลักษณ์ทีละบรรทัด ห้ามคิดคำขึ้นมาใหม่เด็ดขาด!

🔠 พจนานุกรมสัญลักษณ์ผังงาน (ที่ถูกต้องตามหลักวิชาการ):

1. สัญลักษณ์ แคปซูล (Terminator) 💊
👉 นำมาครอบคำว่า: START และ END
💡 เหตุผล: รูปทรงนี้ใช้เป็นประตู เพื่อเป็นจุดสังเกตให้รู้ว่าโปรแกรมมี "จุดเริ่มต้น" และ "จุดสิ้นสุด" ที่ตรงไหน

2. สัญลักษณ์ สี่เหลี่ยมด้านขนาน (Data) ▱
👉 นำมาครอบคำว่า: INPUT (รับค่า) และ PRINT (แสดงข้อความ/ผลลัพธ์)
💡 เหตุผล: สัญลักษณ์ที่มีความเอียงนี้ ใช้แทน "ข้อมูล" ที่กำลังไหลเข้าสู่ระบบ (ตอนผู้ใช้พิมพ์) หรือกำลังไหลออกจากระบบ (ตอนโชว์บนหน้าจอ) ครับ

3. สัญลักษณ์ สี่เหลี่ยมผืนผ้า (Process) ▭
👉 นำมาครอบคำว่า: SET (การคำนวณ/กำหนดค่า)
💡 เหตุผล: รูปทรงกล่องทึบๆ นี้ ใช้แทน "การประมวลผล" หรือการคำนวณทางคณิตศาสตร์ที่คอมพิวเตอร์แอบคิดอยู่หลังบ้าน (ผู้ใช้มองไม่เห็น) ครับ

จำคู่สัญลักษณ์ให้แม่นๆ แล้วคลิกลิงก์ app.diagrams.net ไปวาดผังงาน เซฟรูปลงเครื่อง แล้วอัปโหลดส่งได้เลย!

ตัวอย่าง : กรอก HTML Code (Iframe)

🐱 ตัวช่วยฉบับพกพา: ปลุกชีพโค้ด Scratch

กฎเหล็ก: ห้ามเดาบล็อกคำสั่งเด็ดขาด! ให้น้องๆ เปิด "ผังงาน" ขึ้นมาดู แล้วต่อบล็อกให้ตรงตามขั้นตอนเป๊ะๆ นะครับ
🧩 1. พจนานุกรมแปลงผังงานเป็น Scratch (คลิกเพื่อดู)
เริ่มต้น / สิ้นสุด
💊 แคปซูล
➡️ บล็อกเหตุการณ์ / ควบคุม
เมื่อคลิก ⛳
รับข้อมูล / แสดงผล
▱ สี่เหลี่ยมด้านขนาน
➡️ บล็อกตรวจจับ / รูปลักษณ์
ถาม ... แล้วรอ
ประมวลผล / คำนวณ
▭ สี่เหลี่ยมผืนผ้า
➡️ บล็อกตัวแปร / คำนวณ
ตั้งค่า [ตัวแปร] เป็น ...
ตัดสินใจ / เงื่อนไข
⬦ สี่เหลี่ยมข้าวหลามตัด
➡️ บล็อกเงื่อนไข (If-Else)
ถ้า ... แล้ว
💡 ทริค: สังเกต "สี" ของบล็อกคำสั่งให้ดี! สีใน Scratch ถูกแบ่งตามหมวดหมู่ไว้แล้ว!
🛠️ 2. คลินิกแก้บั๊ก (โค้ดไม่รัน เช็คตรงนี้!)
เช็คลิสต์ก่อนส่งงาน:
⬜ พิมพ์ชื่อตัวแปร (Variable) ถูกต้องทุกตัวอักษรไหม?
⬜ ลำดับของบล็อกคำสั่ง เรียงตามลูกศรในผังงานเป๊ะๆ หรือยัง?
⬜ ใส่เครื่องหมายคณิตศาสตร์ (+, -, *, /) ถูกช่องสีเขียวไหม?
📤 3. ขั้นตอนการนำโค้ดมาส่ง
1. ไปที่ scratch.mit.edu สร้างโปรเจกต์และต่อบล็อก
2. 🚨 สำคัญมาก! ต้องกดปุ่ม Share (แชร์) สีส้มด้านบนเสมอ
3. กดปุ่ม Copy Link (คัดลอกลิงก์) ที่อยู่ด้านล่างขวาของจอ
4. คลิกคำว่า Copy Embed (คัดลอกโค้ดสำหรับฝัง)
5. นำโค้ดที่ได้ มา Paste (วาง) ลงในกล่องข้อความของระบบ
📌 จุดสังเกต: โค้ดของน้องๆ จะต้องมีคำว่า
< iframe > เสมอ!