แก้ไขบทเรียน

Back

รูปสินค้า (850 x 600 / .jpg , .png) *

ประเภทบทเรียน

ประเภทบทเรียนย่อย

Title

Description

Keyword

Detail

<div class="lesson-container" style="font-family: 'Sarabun', 'Prompt', sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: auto; background: #ffffff; padding: 20px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);">
    
    <div style="background: linear-gradient(135deg, #FF6F00 0%, #E65100 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #3E2723;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFF;">⚡ หน่วยที่ 2 EP.3: ประมวลผลข้อมูลและแจ้งเตือน</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFECB3; font-weight: bold;">Event Handling & Message Box</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">ใน EP ที่แล้วเราสร้างแบบฟอร์มที่มีช่องกรอกชื่อและปุ่มกดได้สำเร็จ แต่ถ้าลองกดปุ่มดูจะพบว่า <strong>"มันยังไม่เกิดอะไรขึ้นเลย!"</strong> นั่นเป็นเพราะเรายังไม่ได้ใส่ "สมอง" หรือสร้างเหตุการณ์ (Event) ให้กับปุ่มนั้นครับ</p>

<h3 style="color: #E65100; border-left: 5px solid #FF8F00; padding-left: 15px; font-size: 22px; margin-top: 30px;">🧠 1. สร้างสมองให้ปุ่มกด (Event Handling)</h3>
        <p>การทำให้ปุ่มทำงานได้ เราต้องสร้าง <strong>ฟังก์ชัน (Function)</strong> หรือชุดคำสั่งเตรียมไว้ก่อน จากนั้นค่อยเอาฟังก์ชันนั้นไปผูกติดกับปุ่มด้วยคำสั่ง <code>command</code> ครับ</p>
        
        <div style="background: #FFF8E1; padding: 15px; border-radius: 12px; border-left: 6px solid #FFC107; margin-top: 10px;">
            <p style="margin: 0; font-family: 'Courier New', Courier, monospace; color: #D84315;">
                <strong style="font-family: 'Sarabun', sans-serif;">ตัวอย่างการผูกคำสั่ง:</strong><br>
                <span style="color: #7A81A9;"># 1. สร้างฟังก์ชันชื่อ save_data() เตรียมไว้</span><br>
                <strong>def</strong> save_data():<br>
                    print("กำลังบันทึกข้อมูล...")<br><br>
                <span style="color: #7A81A9;"># 2. เอาฟังก์ชันไปใส่ในปุ่ม (ห้ามใส่วงเล็บต่อท้ายชื่อฟังก์ชันในปุ่มนะครับ!)</span><br>
                btn = tk.Button(text="บันทึก", <strong>command=save_data</strong>)
            </p>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FF8F00; padding-left: 15px; font-size: 22px; margin-top: 35px;">📥 2. วิธีดึงข้อความที่ผู้ใช้พิมพ์ (The .get() method)</h3>
        <p>เมื่อผู้ใช้พิมพ์ข้อมูลลงในช่อง <strong>Entry</strong> เราสามารถใช้คำสั่ง <strong><code>.get()</code></strong> เพื่อดูดข้อมูลนั้นออกมาเก็บไว้ในตัวแปร และนำไปประมวลผลต่อ (เช่น ส่งเข้าฐานข้อมูล Big Data) ได้ทันที</p>
        <p style="background: #FAFAFA; padding: 10px; border-radius: 8px; border: 1px dashed #BDBDBD;"><code>user_input = entry_name.get()</code> <span style="color: #757575; font-size: 14px;">(แปลว่า: ไปเอาข้อความจากช่องที่ชื่อ entry_name มาเก็บไว้ในตัวแปร user_input)</span></p>

<h3 style="color: #E65100; border-left: 5px solid #FF8F00; padding-left: 15px; font-size: 22px; margin-top: 35px;">🔔 3. เด้งหน้าต่างแจ้งเตือน (Message Box)</h3>
        <p>เพื่อยืนยันว่าเราได้รับข้อมูลแล้ว เราควรมีหน้าต่างป๊อปอัป (Pop-up) เด้งขึ้นมาบอกผู้ใช้งานครับ ใน Tkinter เราต้องดึงเครื่องมือนี้มาเพิ่มโดยพิมพ์ <strong><code>from tkinter import messagebox</code></strong> ไว้ที่บรรทัดบนสุดของโค้ดครับ</p>
        
        <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;">
            <div style="flex: 1; min-width: 200px; background: #E8F5E9; padding: 20px; border-radius: 12px; border: 2px solid #4CAF50; text-align: center;">
                <strong style="color: #2E7D32; font-size: 18px;">✅ showinfo</strong><br>
                <p style="font-size: 14px; margin-top: 10px; text-align: left;"><code>messagebox.showinfo("หัวข้อ", "ข้อความ")</code><br>ใช้สำหรับแจ้งข้อมูลทั่วไป หรือยืนยันความสำเร็จ</p>
            </div>
            <div style="flex: 1; min-width: 200px; background: #FFEBEE; padding: 20px; border-radius: 12px; border: 2px solid #F44336; text-align: center;">
                <strong style="color: #C62828; font-size: 18px;">❌ showerror</strong><br>
                <p style="font-size: 14px; margin-top: 10px; text-align: left;"><code>messagebox.showerror("หัวข้อ", "ข้อความ")</code><br>ใช้สำหรับแจ้งเตือนเมื่อเกิดข้อผิดพลาด (เช่น ลืมกรอกชื่อ)</p>
            </div>
        </div>

<h3 style="color: #E65100; border-left: 5px solid #FF8F00; padding-left: 15px; font-size: 22px; margin-top: 35px;">👨‍💻 4. โค้ดฉบับสมบูรณ์ (ประกอบร่าง!)</h3>
        <p>มาดูตัวอย่างการนำความรู้จาก EP.2 และ EP.3 มารวมกัน เพื่อสร้างแอปเก็บข้อมูลที่ทำงานได้จริงกันครับ!</p>
        
        <div style="background: #263238; color: #ECEFF1; padding: 20px; border-radius: 12px; margin-top: 15px; font-family: 'Courier New', Courier, monospace;">
            <pre style="margin: 0; font-size: 14px; line-height: 1.5; overflow-x: auto;"><span style="color: #C678DD;">import</span> tkinter <span style="color: #C678DD;">as</span> tk
<span style="color: #C678DD;">from</span> tkinter <span style="color: #C678DD;">import</span> messagebox <span style="color: #7A81A9;"># เรียกใช้เครื่องมือแจ้งเตือน</span>

<span style="color: #7A81A9;"># --- ส่วนของฟังก์ชัน (สมองของโปรแกรม) ---</span>
<span style="color: #C678DD;">def</span> <span style="color: #61AFEF;">save_data</span>():
    <span style="color: #7A81A9;"># 1. ดูดข้อมูลจากช่อง Entry มาเก็บไว้ในตัวแปร name</span>
    name = entry_name.get() 
    
    <span style="color: #7A81A9;"># 2. ตรวจสอบเงื่อนไขว่าพิมพ์มาหรือเปล่า?</span>
    <span style="color: #C678DD;">if</span> name == <span style="color: #98C379;">""</span>:
        messagebox.showerror(<span style="color: #98C379;">"ผิดพลาด"</span>, <span style="color: #98C379;">"กรุณากรอกชื่อก่อนกดบันทึก!"</span>)
    <span style="color: #C678DD;">else</span>:
        messagebox.showinfo(<span style="color: #98C379;">"สำเร็จ"</span>, <span style="color: #98C379;">f"บันทึกข้อมูลของ {name} เรียบร้อยแล้ว!"</span>)

<span style="color: #7A81A9;"># --- ส่วนของการสร้างหน้าจอ (GUI) ---</span>
frame = tk.Tk()
frame.geometry(<span style="color: #98C379;">"300x200"</span>)
frame.title(<span style="color: #98C379;">"โปรแกรมรับข้อมูล"</span>)

tk.Label(frame, text=<span style="color: #98C379;">"ชื่อของคุณคืออะไร?"</span>).pack(pady=10)

entry_name = tk.Entry(frame)
entry_name.pack(pady=5)

<span style="color: #7A81A9;"># ผูกปุ่มเข้ากับฟังก์ชัน save_data ด้วย command</span>
tk.Button(frame, text=<span style="color: #98C379;">"บันทึก"</span>, bg=<span style="color: #98C379;">"orange"</span>, command=save_data).pack(pady=15)

frame.mainloop()
            </pre>
        </div>

</div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #E65100; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFF;">✍️ มินิควิซ ทบทวนความรู้ EP.3</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; color: #FFECB3;">ทดสอบความเข้าใจเรื่องการจัดการเหตุการณ์และการแจ้งเตือน</p>
        </div>
        
        <div style="border: 2px solid #E65100; border-top: none; padding: 25px; border-radius: 0 0 12px 12px; background: #fafafa;">
            
            <div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 1: การทำให้ปุ่ม (Button) สามารถคลิกแล้วสั่งงานฟังก์ชันที่เราเขียนไว้ได้ จะต้องใช้พารามิเตอร์ใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'text ใช้สำหรับใส่ข้อความบนปุ่มครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. text</button>
                    <button onclick="checkAnswer(this, false, 'font ใช้สำหรับปรับเปลี่ยนรูปแบบตัวอักษรครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. font</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! command คือคำสั่งที่ใช้เชื่อมโยงปุ่มเข้ากับฟังก์ชัน (Event Handling) เมื่อถูกคลิก ฟังก์ชันนั้นจะทำงานทันที')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. command</button>
                    <button onclick="checkAnswer(this, false, 'bg ย่อมาจาก background ใช้สำหรับเปลี่ยนสีพื้นหลังของปุ่มครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. bg</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 2: หากนักเรียนสร้างช่องรับข้อความไว้ชื่อว่า <code>entry_age</code> นักเรียนจะใช้คำสั่งใดเพื่อ "ดึงข้อมูลอายุ" ที่ผู้ใช้พิมพ์เข้ามาไปคำนวณต่อ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'เยี่ยมมากครับ! คำสั่ง .get() ใช้สำหรับดึง (Get) ข้อมูลหรือข้อความที่ค้างอยู่ในช่อง Entry ออกมาใช้งานต่อ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. entry_age.get()</button>
                    <button onclick="checkAnswer(this, false, 'pack() ใช้สำหรับจัดวางวิดเจ็ตลงบนหน้าจอครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. entry_age.pack()</button>
                    <button onclick="checkAnswer(this, false, 'delete() ใช้สำหรับลบข้อความทิ้งครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. entry_age.delete()</button>
                    <button onclick="checkAnswer(this, false, 'insert() ใช้สำหรับยัดข้อความอัตโนมัติลงไปในช่องครับ ไม่ใช่การดึงออกมา')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. entry_age.insert()</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 3: หากต้องการใช้งานหน้าต่างป๊อปอัปแจ้งเตือน (Message Box) ในโปรแกรม จะต้องนำเข้าเครื่องมือด้วยคำสั่งใดก่อนเสมอ?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'math เป็นไลบรารีสำหรับคิดเลขครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. import math</button>
                    <button onclick="checkAnswer(this, false, 'แค่นี้ยังไม่พอครับ Tkinter มีขนาดใหญ่มาก โมดูล messagebox ถูกแยกออกไปต่างหาก ต้องเจาะจง import เข้ามาด้วย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. import tkinter as tk (เพียงบรรทัดเดียวก็พอ)</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้องครับ! messagebox เป็นโมดูลพิเศษที่ซ่อนอยู่ใน tkinter จึงต้องใช้คำสั่ง from ... import ... เพื่อดึงมันออกมาใช้งานโดยเฉพาะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. from tkinter import messagebox</button>
                    <button onclick="checkAnswer(this, false, 'os เป็นไลบรารีสำหรับจัดการไฟล์ระบบในเครื่องคอมพิวเตอร์ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. import os</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 25px; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 4: คำสั่ง <code>messagebox.showerror()</code> เหมาะสำหรับนำไปใช้ในสถานการณ์ใดมากที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'สถานการณ์นี้ควรใช้ showinfo() หรือ showwarning() ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. เมื่อผู้ใช้กรอกข้อมูลเสร็จสมบูรณ์และระบบบันทึกผ่านแล้ว</button>
                    <button onclick="checkAnswer(this, true, 'ใช่เลยครับ! showerror (แสดงข้อผิดพลาด) จะมีไอคอนกากบาทสีแดง เหมาะสำหรับใช้แจ้งเตือนผู้ใช้เมื่อทำอะไรผิดพลาด หรือกรอกข้อมูลไม่ครบ เพื่อป้องกันไม่ให้ข้อมูลขยะ (Garbage Data) หลุดเข้าสู่ระบบ Big Data')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เมื่อผู้ใช้งานลืมกรอกข้อมูลที่สำคัญ หรือกรอกรหัสผ่านผิด</button>
                    <button onclick="checkAnswer(this, false, 'การถามความเห็นควรใช้ askyesno() ครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เมื่อต้องการถามผู้ใช้ว่า แน่ใจหรือไม่ที่จะลบข้อมูลนี้ทิ้ง</button>
                    <button onclick="checkAnswer(this, false, 'การกล่าวต้อนรับควรใช้ showinfo() ให้ดูเป็นมิตรครับ ไม่ใช่รูปกากบาทสีแดง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. เมื่อโปรแกรมเพิ่งเปิดขึ้นมาและต้องการกล่าวคำต้อนรับ</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

<div class="question-item" style="margin-bottom: 0; background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);">
                <p style="font-weight: bold; font-size: 18px; color: #E65100;">ข้อที่ 5: ในมุมมองของการจัดการข้อมูล (Data Management) การเขียนโปรแกรมให้มีระบบเช็กความผิดพลาดและเด้ง Message Box แจ้งเตือนผู้ใช้ มีข้อดีอย่างไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้องที่สุดครับ! หากไม่มีการตรวจเช็ก ผู้ใช้อาจกดปุ่มส่งข้อมูลเปล่าๆ หรือพิมพ์มั่วๆ เข้ามา ทำให้ฐานข้อมูลเสียความน่าเชื่อถือ การแจ้งเตือนจะช่วยกรองให้ได้ข้อมูลที่ถูกต้อง (Data Quality) ก่อนนำไปวิเคราะห์ต่อครับ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ช่วยรักษาคุณภาพความถูกต้องของข้อมูล (Data Quality) ก่อนถูกส่งเข้าสู่ฐานข้อมูล</button>
                    <button onclick="checkAnswer(this, false, 'Message Box ไม่ได้ทำให้แอปทำงานเร็วขึ้นครับ ในทางกลับกันมันอาจหยุดโปรแกรมชั่วคราวเพื่อให้ผู้ใช้อ่านด้วยซ้ำ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ช่วยทำให้แอปพลิเคชันประมวลผลได้รวดเร็วและใช้แรมน้อยลง</button>
                    <button onclick="checkAnswer(this, false, 'Message Box เป็นแค่หน้าต่างแจ้งเตือนครับ ไม่ใช่ระบบเข้ารหัสความปลอดภัย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เป็นการเข้ารหัสข้อมูลไม่ให้แฮกเกอร์ขโมยไปได้</button>
                    <button onclick="checkAnswer(this, false, 'ไม่เกี่ยวกับการทำแอปส่งครูครับ เป็นเรื่องของมาตรฐานในการทำโปรแกรมจริงๆ เลย')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ทำให้ครูให้คะแนนการส่งงานง่ายขึ้นเท่านั้น ไม่มีประโยชน์กับการใช้งานจริง</button>
                </div>
                <div class="feedback" style="margin-top: 15px; font-weight: bold; display: none;"></div>
            </div>

</div>
    </div>

</div>

buttons.forEach(b => {
        b.disabled = true;
        b.style.opacity = '0.6';
    });

feedback.style.display = 'block';
    feedback.style.padding = '12px';
    feedback.style.borderRadius = '8px';
    feedback.style.marginTop = '15px';

if(isCorrect) {
        btn.style.background = '#FFF8E1';
        btn.style.borderColor = '#FFC107';
        btn.style.color = '#FF6F00';
        btn.style.opacity = '1';
        feedback.style.background = '#FFF8E1';
        feedback.style.color = '#FF8F00';
        feedback.innerHTML = "✅ ถูกต้องครับ! " + msg;
    } else {
        btn.style.background = '#FFEBEE';
        btn.style.borderColor = '#C62828';
        btn.style.color = '#B71C1C';
        btn.style.opacity = '1';
        feedback.style.background = '#FFEBEE';
        feedback.style.color = '#B71C1C';
        feedback.innerHTML = "❌ ยังไม่ใช่นะครับ: " + msg;
    }
}
</script>