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

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, #0277BD 0%, #00BCD4 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.3 ก้าวแรกสู่ไพทอน (Python) และการรับ/แสดงผล</p>
    </div>

<div style="margin-bottom: 40px;">
        
        <p style="font-size: 18px;">ยินดีต้อนรับสู่โลกของการเขียนโค้ด! ปัจจุบันเราสามารถเขียนและรันภาษาไพทอนได้ง่ายๆ ผ่านเว็บบราวเซอร์ โดยไม่ต้องติดตั้งโปรแกรมให้ยุ่งยาก (Cloud Computing) เว็บไซต์ยอดฮิตที่นักเรียนทั่วโลกนิยมใช้คือ <strong>Replit (replit.com)</strong> ครับ เมื่อพร้อมแล้ว เรามาเรียนรู้คำสั่งแรกกันเลย!</p>

<h3 style="color: #0277BD; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📢 1. การแสดงผลด้วยคำสั่ง print()</h3>
        <p><strong>print</strong> คือคำสั่งพื้นฐานที่สุด ทำหน้าที่บอกให้คอมพิวเตอร์ "พิมพ์ข้อความ หรือค่าของตัวแปร" ออกมาแสดงทางหน้าจอ (Console) หากต้องการพิมพ์ข้อความ ต้องใส่เครื่องหมายคำพูด (อัญประกาศ) ครอบไว้เสมอ</p>
        <div style="background-color: #282a36; color: #f8f8f2; padding: 15px 20px; border-radius: 8px; font-family: 'Courier New', Courier, monospace; margin: 15px 0; overflow-x: auto; border-left: 5px solid #FFC107; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"Hello World"</span>) <span style="color: #6272a4;"># คอมพิวเตอร์จะแสดงข้อความว่า Hello World</span><br>
            <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">5 + 3</span>) <span style="color: #6272a4;"># คอมพิวเตอร์จะแสดงตัวเลข 8 (เพราะสั่งให้คำนวณ)</span>
        </div>

<h3 style="color: #0277BD; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">📥 2. การรับข้อมูลด้วยคำสั่ง input()</h3>
        <p>เมื่อโปรแกรมต้องการให้ผู้ใช้งาน "พิมพ์ข้อมูลตอบกลับมา" เราจะใช้คำสั่ง <strong>input</strong> และมักจะสร้าง "ตัวแปร" มารับค่าที่ผู้ใช้พิมพ์เสมอ</p>
        <div style="background-color: #282a36; color: #f8f8f2; padding: 15px 20px; border-radius: 8px; font-family: 'Courier New', Courier, monospace; margin: 15px 0; overflow-x: auto; border-left: 5px solid #FFC107; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            name = <span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"กรุณากรอกชื่อของคุณ : "</span>)<br>
            <span style="color: #ff79c6;">print</span>(<span style="color: #f1fa8c;">"สวัสดีคุณ "</span> + name)
        </div>
        <p style="margin: 0; color: #0277BD; font-style: italic;">💡 <strong>ข้อควรระวัง:</strong> ข้อมูลทุกอย่างที่รับมาจากคำสั่ง <code>input()</code> คอมพิวเตอร์จะมองว่าเป็น <strong>"ข้อความ (String)"</strong> เสมอ!</p>

<h3 style="color: #0277BD; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">🔢 3. เวทมนตร์แปลงร่างข้อความเป็นตัวเลข int()</h3>
        <p>ถ้าเราต้องการรับค่า "ตัวเลข" มาเพื่อบวกลบคำนวณ เราต้องใช้คำสั่ง <strong>int()</strong> (ย่อมาจาก Integer ที่แปลว่าจำนวนเต็ม) ครอบคำสั่ง input เอาไว้อีกชั้นหนึ่ง เพื่อแปลงร่างข้อความให้กลายเป็นตัวเลขครับ</p>
        <div style="background-color: #282a36; color: #f8f8f2; padding: 15px 20px; border-radius: 8px; font-family: 'Courier New', Courier, monospace; margin: 15px 0; overflow-x: auto; border-left: 5px solid #FFC107; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            age = <span style="color: #ff79c6;">int</span>(<span style="color: #ff79c6;">input</span>(<span style="color: #f1fa8c;">"กรุณากรอกอายุของคุณ : "</span>))<br>
            <span style="color: #6272a4;"># ตอนนี้ตัวแปร age กลายเป็นตัวเลขที่นำไปคำนวณต่อได้แล้ว!</span>
        </div>

<h3 style="color: #0277BD; border-left: 5px solid #FFC107; padding-left: 15px; font-size: 22px; margin-top: 30px;">⚖️ 4. ลำดับความสำคัญของคณิตศาสตร์ (จำให้แม่น!)</h3>
        <p>คอมพิวเตอร์มีกฎในการคำนวณแบบสากล หากเราเขียนสมการยาวๆ มันจะไม่ได้คำนวณจากซ้ายไปขวาเสมอไป แต่มันจะทำตามลำดับต่อไปนี้:</p>
        <div style="background: #E1F5FE; padding: 20px; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; border-left: 5px solid #03A9F4;">
            <ol style="margin-bottom: 0; padding-left: 20px; line-height: 1.8; font-size: 16px;">
                <li>ทำใน <strong>(วงเล็บ)</strong> ก่อนเสมอ</li>
                <li>ทำ <strong>คูณ (*), หาร (/), หารเอาเศษ (%)</strong> จากซ้ายไปขวา</li>
                <li>ทำ <strong>บวก (+), ลบ (-)</strong> เป็นลำดับสุดท้าย จากซ้ายไปขวา</li>
            </ol>
        </div>
        <p style="margin-bottom: 0; font-size: 16px;">ตัวอย่าง: <code>2 + 5 * 2</code> <br>
        คอมพิวเตอร์จะทำ <code>5 * 2</code> ก่อน ได้ <code>10</code> แล้วค่อยนำมาบวก <code>2</code> คำตอบที่ได้คือ <strong style="color: #D32F2F;">12</strong> (ไม่ใช่ 14 นะครับ!)</p>
        
    </div>

<div id="quiz-area" style="border-top: 3px solid #eee; padding-top: 30px;">
        <div style="background-color: #0288D1; color: white; padding: 20px; border-radius: 12px 12px 0 0; text-align: center;">
            <h3 style="margin: 0; font-size: 22px; color: #FFC107;">✍️ มินิควิซ ประเมินตนเอง (EP.3)</h3>
            <p style="margin: 5px 0 0 0; font-size: 14px; opacity: 0.9;">ทดสอบความเข้าใจสัญลักษณ์และคำสั่ง! (ไม่เก็บคะแนน)</p>
        </div>
        
        <div style="border: 2px solid #0288D1; 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: #0288D1;">ข้อที่ 1: คำสั่งใดในภาษาไพทอน ที่ทำหน้าที่ <strong>"รับข้อมูล"</strong> จากการพิมพ์คีย์บอร์ดของผู้ใช้งาน?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'print() ใช้สำหรับแสดงผลลัพธ์ออกทางหน้าจอจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. print()</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! input() คือคำสั่งสำหรับรับข้อมูล (Input) จากผู้ใช้งาน')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. input()</button>
                    <button onclick="checkAnswer(this, false, 'int() คือคำสั่งแปลงข้อมูลเป็นตัวเลขจำนวนเต็มจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. int()</button>
                    <button onclick="checkAnswer(this, false, 'string เป็นชนิดของข้อมูล ไม่ใช่คำสั่งจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. string()</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: #0288D1;">ข้อที่ 2: หากต้องการพิมพ์คำว่า <strong>Hello</strong> ออกทางหน้าจอ โค้ดในข้อใดเขียนได้ถูกต้องที่สุด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! การพิมพ์ข้อความ (String) ต้องมีเครื่องหมายอัญประกาศครอบไว้เสมอ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. print("Hello")</button>
                    <button onclick="checkAnswer(this, false, 'โค้ดจะ Error จ้า เพราะคอมพิวเตอร์จะคิดว่า Hello คือชื่อตัวแปรที่ยังไม่ได้สร้าง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. print(Hello)</button>
                    <button onclick="checkAnswer(this, false, 'input ใช้สำหรับรับข้อมูลนะ ไม่ใช่แสดงผล')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. input("Hello")</button>
                    <button onclick="checkAnswer(this, false, 'print ต้องใช้วงเล็บ () นะครับ ไม่ใช่วงเล็บเหลี่ยม []')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. print["Hello"]</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: #0288D1;">ข้อที่ 3: ทำไมเราจึงต้องใช้คำสั่ง <strong>int()</strong> ร่วมกับคำสั่ง input() เมื่อต้องการให้ผู้ใช้พิมพ์ตัวเลข?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <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, 'คำสั่ง int() ไม่ได้ใช้แปลงเป็นภาษาไทยจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. เพื่อแปลงตัวเลขภาษาอังกฤษให้เป็นตัวเลขภาษาไทย</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! เพราะค่าปกติที่ได้จาก input() จะเป็นข้อความ (String) เสมอ เราจึงต้องแปลงให้เป็นตัวเลขเพื่อให้คำนวณได้')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. เพราะ input() จะรับค่ามาเป็นข้อความเสมอ จึงต้องแปลงให้เป็นจำนวนเต็มเพื่อนำไปคำนวณ</button>
                    <button onclick="checkAnswer(this, false, 'คอมพิวเตอร์รู้จักตัวเลขอยู่แล้วจ้า ปัญหาคือชนิดของข้อมูล (Data Type)')" 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: #0288D1;">ข้อที่ 4: ผลลัพธ์ของการประมวลผลคำสั่ง <code>print( 6 + 2 * 5 )</code> จะแสดงผลเป็นตัวเลขใด?</p>
                <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 15px;">
                    <button onclick="checkAnswer(this, false, 'ผิดจ้า! นั่นคือการทำจากซ้ายไปขวา (6+2 = 8, 8*5 = 40) ซึ่งผิดหลักคณิตศาสตร์นะ')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ก. 40</button>
                    <button onclick="checkAnswer(this, true, 'ถูกต้อง! คอมพิวเตอร์จะทำ คูณ ก่อนบวกเสมอ คือทำ (2*5)=10 จากนั้นนำ 6 มาบวก 10 คำตอบคือ 16')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ข. 16</button>
                    <button onclick="checkAnswer(this, false, 'ไม่ใช่ 13 น้า ลองทบทวนลำดับความสำคัญคณิตศาสตร์ดูอีกครั้ง')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ค. 13</button>
                    <button onclick="checkAnswer(this, false, 'คอมพิวเตอร์ไม่ได้เอา 6 กับ 5 มาบวกกันก่อนจ้า')" style="text-align: left; padding: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; cursor: pointer;">ง. 11</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 = '#E1F5FE';
        btn.style.borderColor = '#0288D1';
        btn.style.color = '#01579B';
        btn.style.opacity = '1';
        feedback.style.background = '#E1F5FE';
        feedback.style.color = '#01579B';
        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>