ทำความรู้จักกับ JavaScript

Thu Sep 6 18:40:01 2018 [7924 views]

ทำความรู้จักกับ JavaScript

JavaScript

ในบทความนี้เราจะมาทำความรู้จักกับ JavaScript ภาษาที่สามารถทำให้เว็บที่เราเขียนมีชีวิตชีวามากขึ้น ด้วยการทำให้เว็บเราเป็น dynamc website (เว็บไซต์ที่มีการเคลื่อนไหว)

อะไรคือการทำให้เว็บเป็น dynamic

จากบทนำที่เอ่ยถึง JavaScript ว่าสามารถทำให้เว็บที่เราเขียนเป็น dynamic website ได้ หลาย ๆ คนอาจจะสงสัยว่าการที่เว็บเรามีการเคลื่อนไหว หน้าตามันเป็นยังไง ฟังดูแปลกมากเลย จริง ๆ แล้ว ทุกวันนี้ที่เราใช้เข้าเว็บกัน ไม่ว่าจะเว็บอะไรบนโลกอินเทอร์เน็ตก็ตาม ไม่ว่าจะ Facebook Youtube Google และอื่น ๆ ล้วนใช้ JavaScript ทั้งนั้น ทำให้เว็บไม่ใช่แค่เป็นที่ให้ข้อมูลแก่ผู้ใช้เพียงอย่างเดียว แต่เป็นที่ ๆ ให้ผู้ใช้ interact (ปฏิสัมพันธ์) กับตัวเว็บด้วย

ตัวอย่างการโพสต์ข้อความบน Facebook

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

กลับไปดูตัวอย่างจากบทความ Website/Web App ประกอบไปด้วยภาษาอะไรบ้าง?

หากใครที่เคยอ่านบทความ Website/Web App ประไปด้วยภาษาอะไรบ้าง? ไปแล้วจะได้เห็นตัวอย่างการใช้ JavaScript เบื้องต้น ในที่นี่เราใช้ JavaScript ในการจับว่าถ้าเกิดผู้ใช้คลิกที่รูปภาพให้เปลี่ยนสีพื้นหลังแบบสุ่มไปเรื่อย ๆ ตามรูปข้างล่างนี้

การที่จะเขียน JavaScript เพื่อให้จับว่าเกิดการคลิกกับรูปภาพและเปลี่ยนสีพื้นหลังอย่างด้านบน ต้องเข้าใจหลักการของ DOM (Document Object Model) ก่อน จากบทความ ทำความรู้จักกับ CSS เราพอจะเข้าใจคร่าว ๆ กันแล้วว่า DOM มีโครงสร้างเป็นต้นไม้ และสามารถเอาไปใช้ในการเขียน CSS เพื่อให้โค้ด CSS เราอ่านง่ายและเป็นระเบียบมากขึ้น ซึ่งหลาย ๆ คนก็คงยังสงสัยว่าตกลง DOM คืออะไร ในบทความนี้จะขอข้ามการอธิบายแบบละเอียดไปไว้สักบทความนึง แหะ ๆ แต่จะมาอธิบายเพิ่มเติมจากเดิมว่านอกจาก DOM จะมีโครงสร้างเป็นต้นไม้

เว็บไซต์นั้นจริง ๆ แล้ว มันก็ถือว่าเป็นเอกสาร (document) อย่างนึง ซึ่งเอกสารนี้จะประกอบไปด้วยหลาย ๆ อย่าง ไม่ว่าจะเป็น แถบนำทาง ย่อหน้า รูปภาพ ปุ่ม ซึ่งพวกนี้จะถูกประมวลผลจากโค้ด HTML และพ่นออกมาเป็น DOM ในบราวเซอร์ที่เราใช้เปิด (Chrome Firefox Edge และอื่น ๆ ) เป็น object (สิ่งของ) ต่าง ๆ ในหน้าเว็บไซต์ ให้เราสามารถ access (เข้าถึง) elements ต่าง ๆ ใน document ได้

เช่นใช้ CSS เปลี่ยนสีตัวอักษรโดยไม่ต้องเขียนโค้ด CSS แบบ inline

เขียน CSS แบบ inline

<h1 style="color: blue">HTML (Hypertext Markup Language)</h1>

เขียน CSS ใช้หลักการ DOM

h1 {
  color: blue;
}

อย่างในที่นี่เราสามารถจับว่ามีการคลิกที่รูปภาพได้โดยการใช้ JavaScript ดักจับ click event (เหตุการณ์คลิก) ที่ img element และเปลี่ยน background-color เมื่อเกิดการคลิก ซึ่งจะออกมาเป็นโค้ดตามด้านล่าง

document.getElementsByTagName('img').item(0).addEventListener('click', function() {
  document.getElementsByTagName('img').item(0).backgroundColor = getRandomColor();
});

เห็นโค้ดแล้วอย่าเพิ่งตกใจกันนะครับ สำหรับคนที่ไม่เคยเขียน JavaScript จริง ๆ ตอนนี้ไม่จำเป็นต้องเข้าใจทั้งหมดก็ได้ครับ หลักการก็คือเราทำการเข้าถึง elements ที่เป็น img โดยการใช้โค้ด document.getElementsByTagName('img') ก็คือดูทั้งหน้าเอกสาร (document) หรือก็คือทั้งหน้าเว็บว่ามี elements ที่เป็น img ไหม จากนั้นถ้ามีก็ทำเป็นส่งข้อมูลกลับมาให้เราเป็นรายการ พอเราได้รายการ elements ที่เป็น img มาแล้ว เราต้องการแค่จะจับการคลิกแค่ตัวแรก เลยใช้คำสั่ง .item(0) ต่อจากคำสั่งเมื่อกี้ และทำการเพิ่ม event listenter (ตัวฟังเหตุการณ์) โดยคำสั่ง addEventListener() ซึ่งในที่นี่เราฟังเหตุการณ์คลิกเพียงอย่างเดียวจึงใส่ค่า 'click' ลงไป และจากนั้นก็ทำการเปลี่ยนสีพื้นหลังเป็นแบบสุ่ม ร่ายซะยาว แต่สิ่งที่อยากให้ได้ก็คือ JavaScript ในหน้าเว็บคือใช้ทำให้เว็บมีลูกเล่นและชีวิตชีวามากขึ้นนั้นแหล่ะครับ

โค้ดเต็ม ๆ ของตัวอย่างข้างบน

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML คืออะไร</title>
  </head>
  <style>
    h1 {
      color: blue;
    }
    img {
      border: 1px dashed red;
    }
  </style>
  <body>
    <h1>HTML (Hypertext Markup Language)</h1>
    <p>
      HTML เป็นภาษากำกับข้อความที่ใช้ในการจัดโครงสร้างหน้าเว็บ เปรียบเทียบง่ายๆ เหมือนใช้ Microsoft Word
      จัดหน้ากระดาษ พิมพ์หัวข้อใหญ่ๆ พิมพ์ย่อหน้า ใส่รูปภาพแต่ไม่ได้ตกแต่งเพิ่มเติม
    </p>
    <img src="images/HTML.png" alt="รูปภาพ HTML">
    <script>
      document.getElementsByTagName('img').item(0).addEventListener('click', function() {
        document.getElementsByTagName('img').item(0).style.backgroundColor = getRandomColor();
      });
      
      function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        
        return color;
      }
    </script>
  </body>
</html>

ลองเพิ่ม JavaScript ใส่เว็บกัน

เรามาลองเพิ่ม JavaScript ใส่เว็บที่เรามีอยู่แล้วแล้วแบบง่าย ๆ กันดีกว่าครับ โดยทำตามวิธีข้างล่างนี้

ใส่แท็ก <script></script> ก่อนปิดแท็ก body
ใส่โค้ด JavaScript ในแท็ก script เช่น alert("มี JavaScript แล้ว");

การใช้แท็ก script เป็นการเรียกใช้ JavaScript ใน document เรา ซึ่งที่เราใส่ไว้ก่อนปิดแท็ก body เนื่องจากว่าบราวเซอร์อ่านโค้ดเราจากบนลงล่าง ถ้าโค้ด JavaScript เราโหลดนานและเราใส่แท็ก script ไว้ตรงแท็ก head หรือว่าหลังเปิดแท็ก body ผู้ใช้จะไม่เห็นพวก HTML elements ที่เราใส่ไว้ในแท็ก body จนกว่า script เราจะโหลดเสร็จ ส่วนคำสั่ง alert() คือการเด้งข้อความที่เรากำหนดให้ผู้ใช้เห็น ตามตัวอย่างด้านล่างนี้เลยครับ เมื่อผู้ใช้เข้าเว็บมาก็จะเห้นข้อความเด้งขึ้นมาว่า "มี JavaScript แล้ว"

ทิ้งท้าย

หวังว่าทุกคนพอจะเข้าใจจากบทความนี้นะครับว่า JavaScript ช่วยเว็บเรายังไง และวิธีการเรียกใช้ JavaScript ในเว็บของเรา บทความต่อไปจะมาพูดถึงเรื่อง syntax (โครงสร้าง) ของภาษา JavaScript ถ้าไม่เข้าใจตรงไหนสามารถสอบถามได้ในกลุ่มหรือติดต่อมาทางเพจได้เลยนะครับ~

เกี่ยวกับผู้เขียน

Pongpat Weesommai

เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom