JavaScript Ep.3 — JavaScript Output

stackpython

4 min readJun 7, 2020

พบกันอีกครั้งครับกับ Ep.3 ไปดูจุดประสงค์ของ Ep นี้กันก่อนเลยครับ

จุดประสงค์(Objectives)

เข้าใจและสามารถใช้งานคำสั่งแสดงผลต่าง ๆ ของ JavaScript
รู้และเข้าใจคำสั่ง innerHTML
รู้และเข้าใจคำสั่ง document.write()
รู้และเข้าใจคำสั่ง window.alert()
รู้และเข้าใจคำสั่ง console.log()
สามารถนำคำสั่งต่าง ๆ ด้านบนไปประยุกต์ใช้งานได้

JavaScript สามารถแสดงผลออกได้ 4 วิธี ที่แตกต่างกัน ดังนี้

เขียนเข้าไปใส่ใน HTML element โดยการใช้งานคำสั่ง innerHTML
เขียนเข้าไปใน HTML output โดยใช้คำสั่ง document.write()
เขียนเข้าไปใน alert box โดยการใช้ window.alert()
เขียนเข้าไปแสดงผลในคอนโซลของเว็บบราวเซอร์โดยกมาใช้ console.log()

Here we go !!

เริ่มต้นสร้างโฟลเดอร์ Ep.3 ขึ้นมาก่อนเลยพร้อมทั้งไฟล์ HTML ไฟแรกของ Ep นี้ ที่มีชื่อว่า innerhtml-example.html

1. การใช้ innerHTML

การที่จะเข้าถึง HTML element ได้นั้น คำสั่งพื้นฐานสุดเลยของ JavaScript คือการใช้เมธอดdocument.getElementById(id)

โดย id แอททริบิวต์ นั้นจะทำการกำหนดตัว HTML element และตัวพรอพเพอตี้innerHTML นั้นจะทำการกำหนด HTML content:

ตัวอย่าง

innerhtml-example.html

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

    <h1>This is innerHTML</h1>
    <p id="demo"></p>

    <script>
        var nextYearVal = 1;
        document.getElementById("demo").innerHTML = 2020 + nextYearVal
    </script>
</body>
</html>

How code works ?

เขียน JS โดยใช้เมธอด getElementById( ) โดย id มีชื่อว่า “demo” โดยใช้คำสั่ง innerHTML เพื่อทำการแสดงผล innerHTML ซึ่งมีคอนเทนต์ก็คือ 2020 ซึ่งเป็นตัวเลขจำนวนเต็ม และนำไปบอกกับตัวแปร nextYearVal ซึ่งมีค่าเท่ากับ 1 เมื่อนำมารวมกันจะได้เท่ากับ 2021
สร้าง <p> tag แล้วรับ id “demo” เพื่อแสดงผล 2020 + nextYearVal(2021) บน <p> tag

2. การใช้ document.write()

สำหรับคำสั่งนี้จะสะดวกและเหมาะสำหรับใช้ในการทดสอบและดีบั๊กค่า

สร้างไฟล์ที่มีชื่อว่า document-write.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

document-write.html

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

    <h1>This is document.write()</h1>

    <script>
        document.write(10*5)
    </script>

</body>
</html>

How code works ?

เขียน JS โดยใช้เมธอด document.write( ) และมีข้อมูลอยู่ในเมธอดนี้คือ 10*5 (10 คูณ 5) ซึ่งจะได้เท่ากับ 50 คำสั่งนี้ค่อนข้างง่ายและตรงไปตรงมา

การใช้ document.write() หลังจากที่ตัว HTML document ถูกเรียกใช้งาน จะทำให้ตัว HTML elements ต่าง ๆ ที่มีอยู่ในไฟล์นั้นจะถูกลบไปด้วย ซึ่งจะเหลือแต่ข้อมูลที่อยู่ใน document.write()

ตัวอย่าง

document-write2.html

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

    <h1>This is document write2</h1>
    <p>These HTML elements will be deleted after document.write() is loaded</p>

    <button type="button" onclick="document.write(4+5)">Click</button>

</body>
</html>

ตัวเมธอด document.write() ควรจะเอาไว้สำหรับใช้ในการทดสอบเท่านั้น

How code works ?

เขียน JS โดยใช้ button เข้ามาเสริมโดยจะให้กดปุ่มแล้วทำอะไรบางอย่าง โดยใช้คำสั่ง onclick
ในคำสั่ง onclick จะทำการกำหนดเป็น document.write(4+5) ซึ่งเมื่อกดปุ่มนี้ จะแสดงผล 9 และข้อความก่อนหน้า ก่อนที่ปุ่มจะถูกกดก็จะหายไป

ตัว HTML elements ซึ่งก็คือข้อความต่าง ๆ ก่อนหน้าจะถูกลบออกไปหมดและข้อมูลที่อยู่ในเมธอด document.write() จะถูกแสดงผลขึ้นมาแทน

3. การใช้ window.alert()

ตัวเมธอด alert() จะเอาไว้ใช้ในการแจ้งเตือนอะไรบางอย่างออกมาทางหน้าจอ

สร้างไฟล์ที่มีชื่อว่า window-alert-example.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

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

    <h1>This is window alert</h1>
    <p>This will display or alert any message to our window</p>

    <script>
        var altMessage = "Hello window alert";
        window.alert(altMessage);
    </script>

</body>
</html>

เราสามารถใช้ alert() ได้เพียว ๆ โดยไม่จำเป็นต้องใช้ window ก็ได้เช่นกัน เรียกได้ว่าตัว window คือ Option ซึ่งจะใส่หรือไม่ใส่ก็ได้

How code works ?

เขียนคำสั่ง window.alert() เพื่อแจ้งเตือนอะไรบางอย่าง
ทำการส่งตัวแปร altMessage ซึ่งเก็บข้อมูล “Hello window alert” เข้าไปในเมธอด alert()
จะปรากฎไดอะล็อกบ็อกซ์ขึ้นมา พร้อมแจ้งแสดงผลข้อความ “Hello window alert”

4. เมื่อกดตกลง ตัวเว็บบราวเซอร์ก็จะนำเข้าสู่หน้าเพจปกติ ซึ่งจะแสดงผลข้อความตามภาพด้านล่าง

4. การใช้ console.log()

สำหรับการทดสอบในการดีบั๊กค่าต่าง ๆ เราสามารถใช้ เมธอด console.log() ในการทดสอบเพื่อแสดงผลข้อมูลได้ ซึ่งเมธอดนี้ สาวก JS คงไม่มีใครรู้จัก ถ้าเทียบกับ syntax ของภาษาไพธอน ตัวไพธอนก็จะเป็นคำสั่ง print()

สร้างไฟล์ที่มีชื่อว่า console-log-example.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

console-log-example.html

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

    <h1>This is console log()</h1>
    <p>It's used for only debugging purposes</p>

    <script>
        var num1 = 15;
        var num2 = 20;

        console.log(num1 + num2);
    </script>

</body>
</html>

How code works ?

กำหนดค่าให้กับตัวแปร num1, num2 ซึ่งจะมีค่า 15 และ 20 ตามลำดับ
ใช้คำสั่ง console.log() แล้วดำเนินการอะไรบางอย่างในเมธอดนี้ ซึ่งในที่นี้ก็คือนำตัวแปร num1 และ num2 มาบวกกัน ก็จะได้เท่ากับ 35
จากนั้นกดเปิดไฟล์ขึ้นมา ก็จะแสดงผลข้อความตามที่ได้เขียนไว้ในแท็ก <h1> และ <p> ด้านบน แต่ข้อมูลที่อยู่ใน console.log(35) จะไม่แสดงผลในหน้าเว็บ
ทำการคลิ๊กขวา เลือก “Inspect” หรือตรวจสอบ
จากนั้นจะปรากฏหน้า Dev Tools(ในภาพใช้ Google Chrom)
จากนั้นเลือก Console จะพบกับ 35 ซึ่งเป็นข้อมูลที่ได้จากการนำ 15 และ 20 มาบวกกัน

คลิ๊กขวา Inspect และทำการคลิ๊กที่ Console

JavaScript Print

เราสามารถเรียกใช้งานเมธอด window.print() ในการแสดงผลหรือปริ้นซ์ข้อมูลออกทางหน้าจอปัจจุบันที่เรากำลังใช้งาน

สร้างไฟล์ที่มีชื่อว่า window-print-example.html ขึ้นมา จากนั้นทำการเขียนโค้ดดังตัวอย่างด้านล่าง

ตัวอย่าง

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

    <h1>This is window print</h1>
    <p>Click the button to print out the current page</p>

    <button type="button" onclick="window.print()">Click to print</button>

</body>
</html>

How code works ?

เขียนคำสั่ง window.print() อยู่ภายใน button เมื่อกดปุ่ม(onclick) จะทำอะไรบางอย่าง ในที่นี้จะให้ทำการพิมพ์หน้าเพจออกมา

จบเรียบร้อยแล้วครับกับ Ep.3 เป็นยังไงกันบ้างครับ งงกันหรือเปล่า ? หวังว่าจะไม่งงนะครับ เพราะผมพยายามใส่ภาพและอธิบายเพื่อให้เข้าใจง่ายที่สุดที่จะทำได้ อย่าลืมหมั่นทบทวนความเข้าใจกันด้วยนะครับ