JavaScript Ep.3 — JavaScript Output

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

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

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

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

Here we go !!

โฟลเดอร์งานของ Ep.3

1. การใช้ innerHTML

ตัวอย่าง

<!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 ?

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

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

ตัวอย่าง

<!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 ?

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

ตัวอย่าง

<!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>

How code works ?

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

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

ตัวอย่าง

<!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>

How code works ?

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

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

ตัวอย่าง

<!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 ?

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

JavaScript Print

ตัวอย่าง

<!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 ?

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

เมื่อจบ Ep.3 นี้ แสดงว่าคุณผ่าน JavaScript Level 2เรียบร้อย กด Clap เพื่อซัพพอร์ตกันได้เลยนะครับ :)

--

--

Full Stack Python Developers

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store