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

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, #00695C 0%, #26A69A 100%); color: white; padding: 35px; border-radius: 15px; text-align: center; margin-bottom: 35px; border-bottom: 5px solid #FFC107;">
        <h2 style="margin: 0; font-size: 26px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #FFEB3B;">🐍 หน่วยที่ 3: การเขียนโปรแกรมด้วยภาษาไพทอน</h2>
        <p style="margin: 10px 0 0 0; font-size: 22px; color: #FFFFFF; font-weight: bold;">EP.2 กฎการตั้งชื่อและตัวดำเนินการ (Operators)</p>
    </div>

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

<h3 style="color: #00695C; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📝 1. เจาะลึกกฎการตั้งชื่อตัวแปร</h3>
        <p>การตั้งชื่อตัวแปรที่ดี จะช่วยให้เราและเพื่อนร่วมงานอ่านโค้ดเข้าใจได้ง่ายขึ้น ทบทวนกฎเหล็กกันอีกครั้ง:</p>
        
        <div style="background: #E0F2F1; padding: 20px; border-radius: 10px; border-left: 5px solid #00897B; margin-bottom: 30px;">
            <ul style="margin: 0; padding-left: 20px; line-height: 1.8; font-size: 16px;">
                <li><strong>ตัวพิมพ์เล็ก/ใหญ่ มีความหมายต่างกัน:</strong> <code>Score</code> กับ <code>score</code> ถือว่าเป็นคนละกล่องกัน!</li>
                <li><strong>สื่อความหมาย:</strong> แทนที่จะตั้งชื่อว่า <code>x</code> หรือ <code>y</code> ควรตั้งชื่อให้รู้เลยว่าเก็บอะไร เช่น <code>width</code> (ความกว้าง), <code>height</code> (ความสูง)</li>
                <li><strong>ข้อควรระวัง:</strong> ห้ามขึ้นต้นด้วยตัวเลข, ห้ามเว้นวรรค (ใช้ _ แทน) และห้ามใช้คำสงวนของโปรแกรม</li>
            </ul>
        </div>

<h3 style="color: #00695C; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">⚙️ 2. ตัวดำเนินการ (Operators) ทั้ง 5 ประเภท</h3>
        <p><strong>ตัวดำเนินการ</strong> คือ เครื่องหมายหรือสัญลักษณ์ที่ใช้ประมวลผลข้อมูลหรือตัวแปร แบ่งเป็น 5 ประเภท ดังนี้:</p>

<div style="background: #E8F5E9; padding: 20px; border-radius: 10px; border: 1px solid #A5D6A7; margin-bottom: 20px;">
            <strong style="color: #2E7D32; font-size: 18px;">1. ตัวดำเนินการทางคณิตศาสตร์ (Arithmetic)</strong><br>
            <p style="margin: 5px 0 10px 0;">ใช้คำนวณตัวเลขเหมือนเครื่องคิดเลขเลยครับ: <strong>+</strong> (บวก), <strong>-</strong> (ลบ), <strong>*</strong> (คูณ), <strong>/</strong> (หาร)</p>
            <div style="background: white; padding: 10px 15px; border-radius: 8px; border-left: 4px solid #F57F17;">
                ⭐ <strong>ไฮไลต์สำคัญ:</strong> เครื่องหมาย <strong style="color: #D32F2F; font-size: 18px;">%</strong> (Modulo) คือ "การหารเอาเศษ" เช่น <code>5 % 2</code> จะได้ผลลัพธ์คือ <strong style="color: #D32F2F;">1</strong> (เพราะ 5 หาร 2 ได้ 2 เศษ 1)
            </div>
        </div>

<div style="overflow-x: auto; margin-top: 20px; border-radius: 10px; border: 1px solid #B2DFDB; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
            <table style="width: 100%; border-collapse: collapse; min-width: 500px; font-size: 15px;">
                <thead>
                    <tr style="background-color: #00796B; color: white;">
                        <th style="padding: 15px; text-align: left; border-bottom: 2px solid #004D40; width: 25%;">ประเภท</th>
                        <th style="padding: 15px; text-align: center; border-bottom: 2px solid #004D40; width: 15%;">เครื่องหมาย</th>
                        <th style="padding: 15px; text-align: left; border-bottom: 2px solid #004D40; width: 60%;">ความหมาย / ตัวอย่าง</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="background-color: #ffffff; transition: background-color 0.2s;">
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1;"><strong>2. การกำหนดค่า</strong><br><span style="color: #666; font-size: 13px;">(Assignment)</span></td>
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1; text-align: center; font-weight: bold; color: #D32F2F; font-size: 18px; line-height: 1.2;">=<br>+=<br>-=</td>
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1;">นำค่าด้านขวา ไปใส่ตัวแปรด้านซ้าย (เช่น <code>x = 5</code>)<br>เพิ่มค่าให้ตัวเอง (เช่น <code>x += 1</code> คือ x = x+1)<br>ลดค่าตัวเอง</td>
                    </tr>
                    <tr style="background-color: #FAFAFA; transition: background-color 0.2s;">
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1;"><strong>3. การเปรียบเทียบ</strong><br><span style="color: #666; font-size: 13px;">(Comparison)</span></td>
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1; text-align: center; font-weight: bold; color: #D32F2F; font-size: 18px; line-height: 1.2;">==<br>!=<br>><br><=</td>
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1;"><strong>เท่ากับ</strong> (ได้ผลลัพธ์เป็น True/False)<br><strong>ไม่เท่ากับ</strong><br><strong>มากกว่า</strong><br><strong>น้อยกว่าหรือเท่ากับ</strong> (เช่น <code>5 <= 9</code> คือ True)</td>
                    </tr>
                    <tr style="background-color: #ffffff; transition: background-color 0.2s;">
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1;"><strong>4. ตรรกะ</strong><br><span style="color: #666; font-size: 13px;">(Logical)</span></td>
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1; text-align: center; font-weight: bold; color: #D32F2F; font-size: 16px; line-height: 1.4;">and<br>or<br>not</td>
                        <td style="padding: 15px; border-bottom: 1px solid #E0F2F1;">เป็น <strong>True</strong> เมื่อจริงทั้งคู่<br>เป็น <strong>False</strong> เมื่อเท็จทั้งคู่<br>กลับค่าจากจริงเป็นเท็จ / เท็จเป็นจริง</td>
                    </tr>
                    <tr style="background-color: #FAFAFA; transition: background-color 0.2s;">
                        <td style="padding: 15px; border-bottom: none;"><strong>5. ข้อความ</strong><br><span style="color: #666; font-size: 13px;">(String)</span></td>
                        <td style="padding: 15px; border-bottom: none; text-align: center; font-weight: bold; color: #D32F2F; font-size: 18px; line-height: 1.4;">+<br>\n</td>
                        <td style="padding: 15px; border-bottom: none;">นำข้อความมา <strong>ต่อกัน</strong> (เช่น <code>"มัธยม" + "ศึกษา"</code>)<br>ใช้สำหรับ <strong>ขึ้นบรรทัดใหม่</strong> (New Line)</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #00796B; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFC107;">✍️ มินิควิซ ประเมินตนเอง (EP.2)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ทบทวนสัญลักษณ์ให้แม่นเป๊ะ! (ไม่เก็บคะแนน)</p>
        </div>
        
        <div style="border: 2px solid #00796B; 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: #00695C;">ข้อที่ 1: การตั้งชื่อตัวแปรในข้อใด <strong>เหมาะสมที่สุด</strong> สำหรับการเก็บคะแนนสอบของนักเรียน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ไม่ควรตั้งชื่อสั้นๆ หรือไม่มีความหมาย เพราะเวลาโค้ดยาวๆ จะงงว่า a คืออะไร')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. a</button>
                    <button onclick="checkAnswer(this, false, 'ผิดกฎจ้า! ห้ามตั้งชื่อตัวแปรขึ้นต้นด้วยตัวเลข')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. 1_score</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! ชื่อสื่อความหมายชัดเจน และใช้ _ แทนการเว้นวรรคได้ถูกต้อง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. student_score</button>
                    <button onclick="checkAnswer(this, false, 'ผิดกฎจ้า! ห้ามเว้นวรรคในชื่อตัวแปร')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. my score</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: #00695C;">ข้อที่ 2: ผลลัพธ์ของ <code>10 % 3</code> (10 Modulo 3) ในภาษาไพทอนคือเท่าใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, '3 คือผลลัพธ์จากการหารเอาส่วนจ้า (10 หาร 3 ได้ 3...)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. 3</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! เครื่องหมาย % คือการหารเอาเศษ (10 หาร 3 ได้ 3 เหลือเศษ 1)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. 1</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่ทศนิยมจ้า % จะคืนค่าจำนวนเต็มที่เป็นเศษเท่านั้น')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. 3.33</button>
                    <button onclick="checkAnswer(this, false, '0 แปลว่าหารลงตัวจ้า แต่ 10 หาร 3 ไม่ลงตัวน้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. 0</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: #00695C;">ข้อที่ 3: หากโปรแกรมทำงานถึงคำสั่ง <code>5 >= 9</code> ผลลัพธ์ที่ได้จะเป็นข้อมูลชนิดใด และมีค่าเป็นอะไร?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, '5 ไม่ได้มากกว่าหรือเท่ากับ 9 น้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. ชนิดตัวเลข, ค่าคือ 5</button>
                    <button onclick="checkAnswer(this, false, 'เงื่อนไขนี้ไม่เป็นจริงจ้า (5 ไม่ได้มากกว่า 9)')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. ชนิดบูลีน, ค่าคือ True</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! เป็นการเปรียบเทียบ (ได้ค่าบูลีน) และ 5 ไม่ได้มากกว่าหรือเท่ากับ 9 จึงมีค่าเป็น False')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. ชนิดบูลีน, ค่าคือ False</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่ข้อความจ้า เป็นการเปรียบเทียบตรรกะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. ชนิดข้อความ, ค่าคือ "False"</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: #00695C;">ข้อที่ 4: สัญลักษณ์ใดในหมวดหมู่ตัวดำเนินการข้อความ (String) ที่ทำหน้าที่ "สั่งให้ขึ้นบรรทัดใหม่"?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! \\n ย่อมาจาก New Line ใช้แทรกในข้อความเพื่อสั่งตัดขึ้นบรรทัดใหม่')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. \n</button>
                    <button onclick="checkAnswer(this, false, '+ ใช้สำหรับนำข้อความ 2 อันมาต่อติดกันจ้า')" 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>
                    <button onclick="checkAnswer(this, false, '% ในเรื่องข้อความใช้สำหรับการจัดรูปแบบ (Format) ไม่ใช่ขึ้นบรรทัดใหม่จ้า')" 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 = '#E0F2F1';
        btn.style.borderColor = '#00796B';
        btn.style.color = '#004D40';
        btn.style.opacity = '1';
        feedback.style.background = '#E0F2F1';
        feedback.style.color = '#004D40';
        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>