JavaScript Ep.3 — JavaScript Output
พบกันอีกครั้งครับกับ 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 และข้อความก่อนหน้า ก่อนที่ปุ่มจะถูกกดก็จะหายไป
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 มาบวกกัน
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 เป็นยังไงกันบ้างครับ งงกันหรือเปล่า ? หวังว่าจะไม่งงนะครับ เพราะผมพยายามใส่ภาพและอธิบายเพื่อให้เข้าใจง่ายที่สุดที่จะทำได้ อย่าลืมหมั่นทบทวนความเข้าใจกันด้วยนะครับ
เมื่อจบ Ep.3 นี้ แสดงว่าคุณผ่าน JavaScript Level 2เรียบร้อย กด Clap เพื่อซัพพอร์ตกันได้เลยนะครับ :)
ถ้ามีคำถามหรือข้อสงสัยหรือไม่เข้าใจตรงไหนก็คอมเมนต์ได้ที่ด้านล่างบทความกันได้เลยครับ หรือถ้าอยากติชมหรือมีอะไรเสนอแนะก็คอมเมนต์เข้ามาได้เช่นกันครับ
พบกับ Ep ถัดไป เพื่อเก็บ Level 2 (Ep.4) กันต่อได้เลยครับ
Sonny STACKPYTHON
ท่านสามารถติดตามพวกเราได้ที่ stackpython ตามช่องทางด้านล่างนี้ได้เลยครับ
Instagram: stackpython
Facebook: stackpython
Website: stackpython.co
YouTube: stackpython
Reference
