แบบฝึกหัด - เพิ่มการโต้ตอบกับ JavaScript

  • 10 นาที

JavaScript (หรือ ECMAScript) เป็นภาษาการเขียนโปรแกรมที่ช่วยให้คุณเพิ่มการโต้ตอบกับเว็บเพจของคุณ

ตัวอย่างเช่น คุณสามารถใช้ JavaScript เพื่อกําหนดลักษณะการทํางานที่เกิดขึ้นเมื่อผู้ใช้เลือกปุ่ม เช่น การเปิดหน้าต่างป๊อปอัป การใช้ JavaScript คุณสามารถเพิ่มหรือลบเนื้อหาออกจากหน้าเว็บได้โดยไม่ต้องโหลดใหม่

ในหน่วยนี้ คุณตั้งค่าตัวอย่างไฟล์ JavaScript สําหรับเว็บเพจของคุณ ในนั้น คุณสร้างปุ่มเพื่อสลับไปมาระหว่างธีมสว่างและธีมสีเข้ม จากนั้น คุณแนบปุ่มกับรหัส JavaScript ที่ดําเนินการสลับธีมจริง สุดท้าย คุณตรวจสอบโครงการที่เสร็จแล้วโดยใช้เครื่องมือสําหรับนักพัฒนาของเบราว์เซอร์ของคุณ

เช่นเดียวกับ CSS คุณสามารถเพิ่ม JavaScript ลงในไฟล์ HTML ได้โดยตรง แต่แนวทางปฏิบัติที่ดีที่สุดที่แนะนําคือการบันทึก JavaScript ของคุณในไฟล์แยกต่างหาก การเพิ่มรหัส JavaScript ของคุณลงในไฟล์แยกต่างหากทําให้ง่ายต่อการนํากลับมาใช้ใหม่ในหลายหน้าเว็บ ตัวอย่างเช่น คุณสามารถสร้างการแจ้งเตือนแบบป็อปอัพโดยการเพิ่มรหัสต่อไปนี้ที่ใดก็ได้ภายในเนื้อความของเว็บเพจของคุณ

<script>alert('Hello World')</script>

อย่างไรก็ตาม จะเป็นการดีกว่าถ้าเพิ่มรหัส JavaScript ของคุณไปยังไฟล์แยกต่างหากที่คุณสามารถเชื่อมโยงไปยังทุกไฟล์ที่ต้องการฟังก์ชันการทํางานแบบกําหนดเองของคุณ

แท็กสคริปต์ HTML <script> ช่วยให้เราสามารถเชื่อมโยงไปยังไฟล์ JavaScript ภายนอก ซึ่งเป็นวิธีที่คุณกําหนดค่าเว็บแอปของคุณในแบบฝึกหัดนี้

  1. เปิดไฟล์ index.html ในรหัส Visual Studio

  2. ค้นหาองค์ประกอบ </body> ปิดและวางเคอร์เซอร์ของคุณบนบรรทัดใหม่ด้านบน ใส่ script:src แล้วกด Enter แท็กการเปิดและปิดสําหรับองค์ประกอบ <script> จะถูกเพิ่มลงในโค้ดของคุณ

  3. ปรับเปลี่ยนองค์ประกอบ <script> เพื่อโหลดไฟล์ app.js ของคุณดังที่แสดงในตัวอย่างต่อไปนี้ ตรวจสอบให้แน่ใจว่าอยู่หลังจากองค์ประกอบ </ul> ปิดสําหรับรายการ

    ...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

คุณสามารถวางองค์ประกอบ <script> ใน <head> หรือที่อื่น ๆ ใน <body> อย่างไรก็ตาม การวางองค์ประกอบ <script> ที่ส่วนท้ายของส่วน <body> จะเปิดใช้งานเนื้อหาหน้าทั้งหมดที่แสดงบนหน้าจอก่อน ก่อนที่จะโหลดสคริปต์

เพิ่มการยอมรับข้อบกพร่อง

  1. ในไฟล์ HTML ของคุณ ให้เพิ่มองค์ประกอบ <noscript> หลังจากแท็ก </script> ปิดที่สามารถใช้เพื่อแสดงข้อความถ้า JavaScript ถูกปิดใช้งาน

    <script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>

    การเพิ่มองค์ประกอบ <noscript> เป็นตัวอย่างของความอดทนของ ข้อบกพร่อง หรือ การลดประสิทธิภาพของอย่างนุ่มนวล เมื่อคุณใช้องค์ประกอบ <noscript> โค้ดของคุณสามารถตรวจหาและวางแผนเมื่อคุณลักษณะไม่ได้รับการสนับสนุนหรือพร้อมใช้งาน

ตั้งค่าโหมดเข้มงวด

JavaScript ออกแบบมาเพื่อเรียนรู้ได้ง่ายและช่วยให้นักพัฒนาซอฟต์แวร์ทําข้อผิดพลาดบางอย่าง ตัวอย่างเช่น JavaScript จะไม่แสดงข้อผิดพลาดเมื่อคุณใช้ตัวแปรที่สะกดผิด และสร้างตัวแปรส่วนกลางใหม่แทน เมื่อคุณเริ่มเรียนรู้ JavaScript การมีข้อผิดพลาดน้อยลงจะสะดวก อย่างไรก็ตาม อาจนําไปสู่การเขียนโค้ดที่ยากสําหรับเบราว์เซอร์ที่จะปรับให้เหมาะสมและยากขึ้นสําหรับคุณในการดีบัก

สลับไปยังโหมดที่เข้มงวดเพื่อรับข้อผิดพลาดที่มีประโยชน์มากขึ้นเมื่อคุณทําผิดพลาด

  • ใน Visual Studio Code เปิดไฟล์ app.js และป้อนข้อมูลต่อไปนี้:

    'use strict';

เพิ่มปุ่ม

คุณต้องมีวิธีในการอนุญาตให้ผู้ใช้ของคุณสลับระหว่างธีมสีสว่างและสีเข้มในเว็บเพจของคุณ ในแบบฝึกหัดนี้ คุณใช้ฟังก์ชันการทํางานนั้นด้วยองค์ประกอบ <button> HTML

  1. ในไฟล์ HTML ของคุณ (index.html) ให้เพิ่มองค์ประกอบ <button> วางปุ่มภายในองค์ประกอบ <div> และเพิ่มปุ่มหลังจากจุดสิ้นสุดของรายการ (</ul>)

    ...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...

    โปรดสังเกตว่าองค์ประกอบ <button> ในตัวอย่างนี้มี คลาส แอตทริบิวต์ที่คุณสามารถใช้เพื่อนําสไตล์ CSS ไปใช้

  2. บันทึกการเปลี่ยนแปลงไปยังไฟล์ HTML ของคุณด้วยแป้นพิมพ์ลัด Control + S บน Windows หรือ Command + S บน macOS

  3. ในไฟล์ CSS ของคุณ (main.css) ให้เพิ่มกฎใหม่ด้วยตัวเลือกคลาส .btn สําหรับปุ่ม HTML ของคุณ เมื่อต้องการทําให้สีของปุ่มแตกต่างจากสีของธีมสีอ่อนหรือสีเข้มทั่วไป ให้ตั้งค่าคุณสมบัติ color และ background-color ในกฎนี้ เมื่อหน้าของคุณปรากฏขึ้น คุณสมบัติ .btn เหล่านี้จะแทนที่คุณสมบัติเริ่มต้นที่ตั้งไว้ในกฎ body ของไฟล์ CSS ของคุณ

    .btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  4. ถัดไป ปรับเปลี่ยนกฎ .btn เพื่อเพิ่มสไตล์บางอย่างสําหรับขนาด รูปร่าง ลักษณะที่ปรากฏ และการวางตําแหน่งของปุ่ม CSS ต่อไปนี้สร้างปุ่มกลมทางด้านขวาของส่วนหัวของหน้า

    .btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  5. ถัดไป อัปเดต CSS สําหรับธีมสีสว่างและสีเข้ม กําหนดตัวแปรใหม่บางอย่าง --btnBg และ --btnFontColorเพื่อระบุสีพื้นหลังเฉพาะปุ่มและสีฟอนต์

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

  6. บันทึกการเปลี่ยนแปลงไปยังไฟล์ CSS ของคุณด้วยแป้นพิมพ์ลัด Control + S บน Windows หรือคําสั่ง + S บน macOS

เพิ่มตัวจัดการเหตุการณ์

เพื่อทําให้ปุ่มทํางานบางอย่างเมื่อคุณเลือก คุณต้องมีตัวจัดการเหตุการณ์ในไฟล์ JavaScript ของคุณ ตัวจัดการเหตุการณ์คือวิธีการเรียกใช้ฟังก์ชัน JavaScript เมื่อมีเหตุการณ์เกิดขึ้นบนหน้า สําหรับปุ่ม มาเพิ่มตัวจัดการเหตุการณ์สําหรับเหตุการณ์ click กันเถอะ ฟังก์ชันตัวจัดการเหตุการณ์ทํางานเมื่อมีเหตุการณ์ click เกิดขึ้น

ก่อนที่คุณจะเพิ่มตัวจัดการเหตุการณ์ คุณจําเป็นต้องมีการอ้างอิงไปยังองค์ประกอบปุ่ม

  1. ในไฟล์ JavaScript ของคุณ (app.js) ใช้ document.querySelector เพื่อรับการอ้างอิงปุ่ม

    const switcher = document.querySelector('.btn');

    ฟังก์ชัน document.querySelector ใช้ตัวเลือก CSS เช่นเดียวกับที่คุณใช้ในไฟล์ CSS ของคุณ ขณะนี้ switcher เป็นการอ้างอิงถึงปุ่มในหน้า

  2. ถัดไป เพิ่มตัวจัดการเหตุการณ์สําหรับเหตุการณ์ click ในโค้ดต่อไปนี้ คุณเพิ่มตัวรอรับการฟังสําหรับเหตุการณ์ click และกําหนดฟังก์ชันตัวจัดการเหตุการณ์ที่เบราว์เซอร์ดําเนินการเมื่อเหตุการณ์ click เกิดขึ้น

    switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});

ในโค้ดก่อนหน้า คุณใช้วิธีการ toggle เพื่อปรับเปลี่ยนแอตทริบิวต์คลาสขององค์ประกอบ <body> วิธีนี้จะเพิ่มหรือลบ light-theme และคลาส dark-theme โดยอัตโนมัติ โค้ดนี้ใช้สไตล์สีเข้มแทนสไตล์สีอ่อนถ้าคุณคลิก จากนั้นสไตล์สว่างแทนสีเข้มหากคุณคลิกอีกครั้ง

อย่างไรก็ตาม ป้ายชื่อสําหรับปุ่มยังจําเป็นต้องอัปเดตเพื่อแสดงธีมที่ถูกต้อง ดังนั้นคุณจําเป็นต้องเพิ่มคําสั่ง if เพื่อกําหนดธีมปัจจุบัน และอัปเดตป้ายชื่อปุ่ม

รหัส JavaScript ของคุณควรมีลักษณะเหมือนกับตัวจัดการเหตุการณ์ที่เพิ่มเข้ามามีดังนี้:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

ซึ่งเป็นมาตรฐาน JavaScript ที่จะใช้กรณีคาเมล สําหรับชื่อตัวแปรที่มีมากกว่าหนึ่งคํา ตัวอย่างเช่น ตัวแปร className

ข้อความคอนโซล

ในฐานะนักพัฒนาเว็บ คุณสามารถสร้างข้อความที่ซ่อนไว้บนหน้าเว็บได้ แต่คุณสามารถอ่านได้ในแท็บ เครื่องมือนักพัฒนา ในแท็บ Console การใช้ข้อความคอนโซล มีประโยชน์ในการดูผลลัพธ์ของโค้ด

ในไฟล์ JavaScript ของคุณ เพิ่มการเรียกไปยัง console.log หลังจากคําสั่ง if แต่ภายในตัวรอรับการติดต่อเหตุการณ์

หลังจากที่คุณทําการเปลี่ยนแปลงนี้ รหัส JavaScript ที่สมบูรณ์ของคุณควรมีลักษณะดังนี้

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

เมื่อคุณอยู่ในไฟล์ JavaScript ใน Visual Studio Code คุณสามารถใช้การกรอกข้อมูลอัตโนมัติสําหรับ console.log โดยการป้อน log และการกด Enter

คุณสามารถกําหนดข้อความ สตริง ด้วยเครื่องหมายอัญประกาศเดี่ยวหรือสองขีดล้อมรอบข้อความ

เปิดในเบราว์เซอร์

  1. เมื่อต้องการแสดงตัวอย่าง ให้คลิกขวา index.html และเลือก เปิดในเบราว์เซอร์เริ่มต้นหรือโหลดแท็บเบราว์เซอร์เดียวกันอีกครั้งโดยการกด F5

    สกรีนช็อตของเว็บไซต์ที่แสดงปุ่มใหม่

  2. เลือกปุ่ม มืดของ ใหม่เพื่อสลับไปยังธีมสีเข้ม

    สกรีนช็อตของเว็บไซต์หลังจากเปลี่ยนเป็นธีมสีเข้ม

  3. ตรวจสอบให้แน่ใจว่าทุกอย่างดูถูกต้องและทํางานตามที่คาดไว้ ถ้าไม่เป็นเช่นนั้น คุณควรตรวจสอบขั้นตอนก่อนหน้านี้เพื่อดูว่าคุณพลาดบางสิ่งไปหรือไม่

ตรวจสอบหน้าในเครื่องมือสําหรับนักพัฒนา

  1. เปิดเครื่องมือนักพัฒนาโดยการคลิกขวาและเลือก ตรวจสอบหรือโดยใช้แป้นพิมพ์ลัด F12 อีกวิธีหนึ่งคือใช้ทางลัด Ctrl + Shift + I บน Windows หรือ Linux และ ตัวเลือก + คําสั่ง + I บน macOS

  2. เลือกแท็บ องค์ประกอบ และเลือกแท็บ Styles

  3. เลือกองค์ประกอบ <body> ในแท็บ สไตล์ ให้ดูที่ธีมที่นําไปใช้ ถ้าธีมปัจจุบันเป็นสีเข้ม สไตล์ dark-theme จะถูกนําไปใช้

    ตรวจสอบให้แน่ใจว่าได้เลือกธีมสีเข้มแล้ว

  4. เลือกแท็บ คอนโซล เพื่อดูข้อความ console.logcurrent class name: dark-theme

สกรีนช็อตของหน้าต่างเบราว์เซอร์ที่มีเว็บไซต์และคอนโซลเครื่องมือสําหรับนักพัฒนาเปิดขึ้น ซึ่งแสดงข้อความคอนโซล

เมื่อใช้คอนโซล คุณจะได้รับข้อมูลเชิงลึกที่น่าสนใจจากรหัส JavaScript ของคุณ เพิ่มข้อความคอนโซลเพิ่มเติมเพื่อทําความเข้าใจว่าส่วนใดของโค้ดที่คุณได้รับการดําเนินการ และทราบค่าปัจจุบันของตัวแปรอื่นๆ

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคอนโซล โปรดดูบทความภาพรวม Console