JavaScript Ep.1 — getElementById() , and The gang

4 min readMay 18, 2020

คำมั่นก่อนเรียนคอร์สนี้

คุณต้องพยายามอ่านและทบทวนให้เข้าใจทุกส่วนในบทความนี้ ถึงแม้อาจจะไม่เข้าใจ 100% อาจจะสัก 80% ก็ยังดี และเขียนโค้ดและทบทวนความเข้าใจในทุก ๆ ส่วน ถ้าไม่เข้าใจหรือผมอธิบายยาก ก็สามารถคอมเมนต์ได้ในด้านล่างบทความนี้เพื่อแนะนำได้เลยครับ และในบทความนี้ท่านที่พอมีประสบการณ์ในส่วนของ HTML และ CSS จะค่อนข้างที่จะทำความเข้าใจได้ไม่ยาก เพราะ JavaScirpt ในคอร์สที่เราจะเรียนกันในวันนี้จะนำ HTML และ CSS ซึ่งเป็นภาษาฝั่ง Frontend ร่วมกับ JavaScript มาประยุกต์ใช้งานร่วมกันแทบทั้งสิ้น แต่ท่านใดที่ไม่มีความรู้ด้าน HTML หรือ CSS มาก่อน ก็ไม่ต้องกังวลครับ ผมจะพยายามเก็บรายละเอียด และอธิบายให้เข้าใจได้ง่ายที่สุดที่จะทำได้ โดยในแต่ละ Ep ผมจะทำการสร้างไฟล์ของฟังก์ชันหรือหัวข้อนั้น ๆ ขึ้นมาใหม่ เพื่อที่เวลาที่ทุกท่านจะทบทวนในภายหลัง ก็จะทำได้ง่ายครับ

Let’s get started !!

อย่างที่ทราบครับว่า JavaScript ทำงานบนหน้าเว็บบราวเซอร์ร่วมกันกับ HTML ดังนั้นในบทความทั้งหมดของซีรี่ย์นี้ ผมก็จะเขียนให้ทั้งสองภาษาทำงานร่วมกันในไฟล์ HTML กันเลยครับ ซึ่งเนื้อหาในบทความทั้งหมด ผมจะอ้างอิงตามหลักสูตรของ w3school ทั้งหมดครับ เพราะว่าเขาได้ออกแบบคอร์สและเรียงลำดับเนื้อหามาให้อย่างดีมาก ๆ แล้วครับ

สำหรับท่านใดที่ยังไม่ได้อ่าน ep ก่อนหน้า นั่นก็คือ JavaScript ง่ายอะไรเบอร์นี้ Ep.0– Introduction ก็คลิ๊กเพื่ออ่านได้เลยครับ

มาเตรียม Tools ในการเริ่มต้นเรียนกันเลยครับ โดยตัว IDE ที่ผมจะใช้คือ PyCharm ครับ ซึ่งถ้าท่านใดจะใช้ IDE หรือ Text Editor ตัวอื่น ๆ ก็ตามใจชอบ ซึ่ง JavaScript Tutorials ในซีรีย์นี้ ค่อนข้างที่จะเอาใจโปรแกรมเมอร์สายไพธอนก็ว่าได้ ดังนั้น PyCharm IDE จึงน่าจะมีติดตั้งกันแทบทุกคนครับ

เมื่อสร้างโปรเจคท์ขึ้นมาเรียบร้อยแล้ว จากนั้นคลิ๊กขวาที่โปรเจคท์ และสร้าง Sub Directory ขึ้นมาอีกตัวที่มีชื่อว่า ep1

สร้าง Sub Directory ขึ้นมาอีกตัว จากนั้นตั้งชื่อว่า ep1

จากนั้นในโฟลเดอร์ ep1 สร้างไฟล์ HTML ขึ้นมา ตั้งชื่อว่า base.html

ซึ่งตัว PyCharm จะสร้างไฟล์ HTML มาให้อัตโนมัติ ซึ่งสาเหตุที่ผมสร้างไฟล์ base.html ขึ้นมา ในกรณีที่ท่านใดที่ไม่ได้ใช้ PyCharm ซึ่งเราจะต้องเขียนไฟล์ HTML ขึ้นมาเอง ตัว base ตัวนี้ผมเลยสร้างไว้ เวลาสร้างไฟล์ HTML ใหม่ ให้ก็อปโค้ดจากไฟล์นี้ไปเป็นไฟล์ต้นแบบได้เลย

base.html สำหรับก็อปโค้ดในไฟล์นี้ไปวาง ในกรณีที่ IDE หรือ Text Editor นั้น ไม่ได้สร้างไฟล์ HTML ให้อัตโนมัติเหมือน PyCharm

จากนั้นทำการสร้างไฟล์ HTML ขึ้นมาอีก 1 ไฟล์ ชื่อว่า change-element.html

change-element.html พร้อมสำหรับเริ่มสร้างไฟล์โปรเจคท์ js ไฟล์แรก

JavaScript สามารถเปลี่ยนคอนเทนต์ของไฟล์ HTML ได้

เราสามารถใช้ฟังก์ชัน(เมธอด)ของ JavaScript ในการเปลี่ยนแปลงข้อมูลใน HTML ได้โดยใช้ฟังก์ชัน

getElementById()

โดยเราสามารถนำคำสั่ง .innerHTML มาใช่ร่วมกันกับฟังก์ชัน getElementById()

ตัวอย่าง

document.getElementById("demo").innerHTML = "Hello my first JavaScript"

change-element.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Element</title>
</head>
<body>

    <h1>Hello JavaScript</h1>
    <p id="demo">I will change this message</p>

    <button type="button" onclick='document.getElementById("demo").innerHTML = 
        "Hello my first JavaScript"'>Click me
    </button>
</body>
</html>

จากตัวอย่าง ผมได้สร้างตัว id ที่มีชื่อว่า “demo” ส่วนตัวข้อความที่ผมจะทำการเปลี่ยนเมื่อมีการเรียกใช้งาน id นี้ก็คือข้อความ “Hello my first JavaScript โดยผมนำ id นี้ไปแปะใน <p> tag ของ HTML ได้เลย

คลิ๊กเพื่อเปิดเปิดไฟล์เพื่อแสดงผลบนหน้าเว็บบราวเซอร์ได้เลย

เมื่อคลิ๊ก ข้อความก็จะเปลี่ยนไปเป็น Hello my first JavaScript

JavaScript สามารถเปลี่ยนค่าของ Attributes ได้เช่นกัน

ในตัวอย่างนี้ จะทำการเปลี่ยนแปลงค่าของ Attribute ของ <img> tag ซึ่ง img เป็นแท็กที่จะเอาไว้ใชัฝังรูปภาพบนหน้าเว็บเพจ ซึ่งตัว Attrubute ที่ผมจะทำการเปลี่ยนค่าคือ src(Source)

จากนั้นทำการสร้างไฟล์ขึ้นมาใหม่ที่มีชื่อว่า change-source.html

เสร็จแล้วก็ทำการสร้างปุ่มขึ้นมาเช่นเดิม และมีการเรียกใช้งานเมธอด getElementById( ) อยู่ เพียงแต่เปลี่ยนจาก .innerHTML เป็น .src เพื่อที่จะเปลี่ยนแปลง Source ของรูปภาพนั่นเอง

ตัวอย่าง

document.getElementById('getPic').src='https://www.w3schools.com/js/pic_bulbon.gif'

คัดลอกที่อยู่รูปภาพมาใช้ก่อนได้เลย (photo by w3school.com)

โดยที่อยู่ของภาพนี้ก็มีดังนี้ สามารถก็อปไปใช้ได้เลย(รูปภาพทั้งสองนั้นถูก host อยู่บนเว็บ w3school)

ไฟเปิด : https://www.w3schools.com/js/pic_bulbon.gif

ไฟปิด : https://www.w3schools.com/js/pic_bulboff.gif

change-source.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Source</title>
</head>
<body>

    <h1>JavaScript can change src(Source) of img tag</h1>
    <button onclick="document.getElementById('getPic').src=
        'https://www.w3schools.com/js/pic_bulbon.gif'">Turn on
    </button>

    <img id="getPic" src="https://www.w3schools.com/js/pic_bulboff.gif" width="100" height="100">

    <button onclick="document.getElementById('getPic').src=
        'https://www.w3schools.com/js/pic_bulboff.gif'">Turn off
    </button>

</body>
</html>

สร้าง Button ขึ้นมา 2 Buttons ในการกด Turn on & Turn off หลอดไฟ ซึ่งจากโค้ดจะเห็นว่าไม่ได้ใช้เทคนิคที่มันพิเศษอะไรมากมาย เพียงแค่ทำการเปลี่ยน src ของรูปภาพเท่านั้น หรือจะเรียกได้ว่าทำการ switch ไปมาก็ไม่ผิด ซึ่งในตัว Default เริ่มต้นมา จะให้แสดงภาพหลอดไฟดับก่อน จากนั้นเมื่อทำการคลิ๊กที่ปุ่ม Turn on ตัว id ที่มีชื่อว่า “getPic” ก็จะถูก activate และทำให้ภาพที่เป็นหลอดไฟที่สว่าง ที่ถูกกำหนดในปุ่ม Turn on ถูกแสดงผลแทนค่าหลอดไฟที่ดับอยู่

หลักการทำงานแบบเดียวกัน เมื่อทำการคลิ๊กที่ Turn off ตัว id “getPic” ที่อยู่ในปุ่ม Turn off ก็จะถูกเรียกใช้(Activate) และทำให้ค่า src ซึ่งเป็นภาพหลอดไฟที่ดับอยู่ ก็จะถูกแสดงผลออกมา

JavaScript สามารถเปลี่ยน CSS ได้

เราสามารถใช้ JavaScript ในการเปลี่ยน style ของ CSS ได้ โดยใช้คำสั่ง .style

ตัวอย่าง

document.getElementById('changeStyle').style.fontSize='30px'<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Style</title>
</head>
<body>

    <h1>Change style</h1>
    <p id="changeStyle">I will change CSS style using JavaScript</p>

    <button onclick="document.getElementById('changeStyle').style.fontSize='30px'">
        Change font size
    </button>

</body>
</html>

ตัวหนังสือก็จะถูกเปลี่ยนไปเป็นขนาดใหญ่ขึ้น คือ 30 พิกเซล ตามที่ได้กำหนดไว้

คำถาม: ถ้าต้องการเปลี่ยนตัวอักษรให้เป็นสีแดง ต้องทำอย่างไร (เฉลยท้ายบทความ)

JavaScript สามารถซ่อน HTML elements ได้

ต่อมาจะเป็นการใช้ JavaScript ในการซ่อน Elements ของ HTML โดยการใช้ display ในคำสั่ง style เมื่อต้องการให้ซ่อนก็สามารถใส่ค่า ‘none’ ได้เลย

ตัวอย่าง

document.getElementById('changeStyle').style.display = 'none'

สร้างไฟล์ HTML ขึ้นมาใหม่ ที่มีชื่อว่า change displaying.html

change displaying.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display Style</title>
</head>
<body>

    <h1>Change displaying style</h1>
    <p id="hideText">This text will be hidden</p>

    <button onclick="document.getElementById('hideText').style.display='none'">
        Hide text
    </button>

</body>
</html>

เมื่อทำการคลิ๊ก ข้อความ This text will be hidden ที่โชว์ก็จะถูกซ่อน

JavaScript สามารถแสดงผล HTML elements ที่ถูกซ่อนไว้ได้

จากคำสั่งที่ผ่านมาเป็นการซ่อน HTML elements ในที่นี้จะเป็นการใช้คำสั่งที่ตรงกันข้าม คือ ในอันดับแรก จะซ่อนข้อความไว้ก่อน จากนั้นเมื่อคลิ๊กที่ปุ่ม ก็จะแสดงข้อความที่ถูกซ่อน

ตัวอย่าง

document.getElementById('changeStyle').style.display = 'block'

change-displaying2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display Style 2</title>
</head>
<body>    <h1>Change displaying style2</h1>
    <p id="showText" style="display:none;">
        This text will be displayed(Default is hidden)
    </p><br>    <button onclick="document.getElementById('showText').style.display='inline'">
        Display text
    </button></body>
</html>

เมื่อคลิ๊กที่ปุ่ม จะแสดงข้อความดังภาพ จะทำได้อย่างไร ?

คำถามที่ถูกถามบ่อย

ฉันจะดาวโหลด JavaScript ได้จากที่ไหน
JavaScript ฟรีหรือไม่

คำตอบคือ

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

เฉลยคำตอบ

จากคำถามด้านบนก่อนหน้าที่ว่า

“คำถาม: ถ้าต้องการเปลี่ยนตัวอักษรให้เป็นสีแดง ต้องทำอย่างไร”

คำตอบคือ: เปลี่ยนจาก style.fontSize=’30px’ ไปเป็น style.color=’red’ โดยคุณสามารถเปลี่ยนตัว attribute ของ CSS ได้ตามต้องการเลย ยิ่งถ้าพอมีความรู้เรื่อง HTML และ CSS มาก่อนจะทำให้พลิกแพลงได้ง่ายยิ่งขึ้น