โต้ตอบกับผู้ใช้งานด้วย input

ในตอนนี้ เราจะมารู้จักกับ HTML element ตัวใหม่คือ <input> กันครับ
<a><abbr><address><area><article><aside><audio><b><base><bdi><bdo><blockquote><body><br><button><canvas><caption><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><div><dl><dt><em><embed><fieldset><figcaption><figure><footer><form><h1><h2><h3><h4><h5><h6><head><header><hgroup><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><meta><meter><nav><noscript><object><ol><optgroup><option><output><p><picture><pre><progress><q><rp><rt><ruby><s><samp><script><search><section><select><slot><small><source><span><strong><style><sub><summary><sup><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><u><ul><var><video><wbr>
เวลาใช้ element <input> จะมี attribute ตัวหนึ่งที่สำคัญคือ type="…" ซึ่งเป็นตัวกำหนดว่าจะแสดงเป็น UI component แบบไหน
UI (User Interface)
“User interface” หรือ “ส่วนต่อประสานกับผู้ใช้” หมายถึงสิ่งที่ผู้ใช้งานสามารถกระทำกับแอปพลิเคชันของเรา เพื่อให้แอปพลิเคชันทำงานตามที่ผู้ใช้งานต้องการ UI สามารถสร้างขึ้นโดยนำ “UI components” ต่างๆ (เช่น ปุ่มกด กล่องข้อความ หรือเมนู) มาประกอบเข้าด้วยกัน
ถ้าตั้ง type="button" ก็จะได้ปุ่มกด โดยกำหนดข้อความที่จะแสดงบนปุ่มได้โดยตั้งค่า attribute value="…":
html
```
<input type="button" value="Click me">
```
index.html
ถ้าตั้ง type="text" ก็จะได้กล่องข้อความ
html
```
<input type="text">
```
index.html
ถ้าอยากรู้ว่า element input มีชนิดอะไรอีกบ้าง ลองเข้าไปดูได้บนเว็บ MDN

ใช้งาน JavaScript กับ input

เดี๋ยวเราจะลองใช้ JavaScript กับ input กัน เริ่มจากการสร้างปุ่มขึ้นมา
html
```
<input type="button" value="Click me">
```
ก่อนอื่นเราต้องทำให้โค้ด JavaScript หาตัว input เจอก่อน เริ่มจากการใส่ attribute id="" ให้กับ input ก่อน
html
```
<input id="my-button" type="button" value="Click me">
```
แล้วเราก็สามารถใช้คำสั่ง document.getElementById ใน JavaScript เพื่อให้เบราว์เซอร์ทำการค้นหา element บนหน้าเว็บ^[1] ที่มี id="my-button"
เดี๋ยวเราจะลองทำใน JavaScript Console ดูก่อนครับ
```
let myButton = document.getElementById('my-button')undefined
```
คำสั่งข้างบนจะหา element ที่มี id="my-button" แล้วเก็บไว้ในตัวแปรชื่อ myButton
การดึง element บนหน้าเว็บมาเก็บไว้ในตัวแปร
let ชื่อตัวแปร = document.getElementById('id')
หลังจากนั้นเราสามารถเช็คค่าของตัวแปร myButton ได้ โดยการพิมพ์ชื่อตัวแปรนั้นใน JavaScript Console
```
myButton<input id="my-button" type="button" value="Click me">
```

ทำให้โค้ดทำงานเมื่อปุ่มถูกกด

เราทำให้เวลาคลิกแล้วขึ้นป๊อปอัพขึ้นมา โดยการกำหนดฟังก์ชัน onclick บนตัวปุ่ม (โค้ดหน้าตาแปลกๆ มาอีกแล้ว… เดี๋ยวจะอธิบายในบทต่อๆ ไปครับ)
```
myButton.onclick = () => {
  alert('hi')
}undefined
```
เมื่อคลิกที่ปุ่ม ก็จะมีหน้าต่าง alert ป๊อปอัพขึ้นมา
การรันโค้ดเมื่อปุ่มถูกคลิก
ชื่อตัวแปร.onclick = () => {โค้ดที่ต้องการให้ทำงาน}
การแสดงข้อความในกล่องป๊อปอัพ
alert(expression)
โค้ดที่พิมพ์ใน console จะมีผลแค่เท่าที่เปิดหน้าเว็บนั้นอยู่เท่านั้น พอกด refresh แล้วกดปุ่มใหม่ ก็จะไม่มีป๊อปอัพขึ้นมาอีก เพราะหน้าเว็บถูกโหลดใหม่แล้ว
เมื่อเรามีโค้ดที่ใช้งานได้แล้ว ก็เอามาใส่ใน <script> เพื่อให้โค้ดทำงานเมื่อเราเปิดหน้าเว็บครั้งต่อไป
html
```
<input id="my-button" type="button" value="Click me">
<script>
  let myButton = document.getElementById('my-button')
  myButton.onclick = () => {
    alert('hi')
  }
</script>
```
index.html
เอา <script> ไว้หลังตัว <input>
เพื่อให้โปรแกรมทำงานได้อย่างถูกต้อง เราต้องเอา element script ไว้หลังตัว input เพราะถ้าเอาไว้ก่อน จะทำให้โค้ดที่อยู่ข้างใน script ถูกทำงาน ก่อนที่ตัว input จะถูกสร้างขึ้นมาบนหน้าเว็บ และส่งผลให้คำสั่ง document.getElementById หาตัว input ตัวนั้นไม่เจอ (เพราะ ณ จังหวะนั้น ตัว input ยังไม่มีอยู่)

อ่านหรือแก้ข้อความในกล่องข้อความ

สมมติว่าเรามีกล่องข้อความ…
html
```
<input type="text" id="your-name">
```

และเราเอากล่องนี้มาเก็บในตัวแปร yourName:

html

<input type="text" id="your-name">
<script>
  let yourName = document.getElementById('your-name')
</script>

เราสามารถอ่านข้อความโดยดึงค่า value ออกมาได้ โดยการพิมพ์ใน console:
```
yourName.value""
```
โดยจะได้ผลลัพธ์เป็นข้อความที่เราพิมพ์ลงไปในกล่องข้อความ หากกล่องข้อความยังว่างอยู่ ก็จะได้ผลลัพธ์เป็นสตริงเปล่า หรือ "" (empty string)
ทดลองเล่นด้วยตัวเอง
1. คลิกที่นี่เพื่อเปิดหน้าตัวอย่าง
2. เปิด JavaScript Console ขึ้นมา
3. พิมพ์ yourName.value ลงไปใน console → ควรจะได้ผลลัพธ์เป็นสตริงเปล่า
4. ใส่ข้อความอะไรสักอย่างลงไปในกล่องข้อความ
5. พิมพ์ yourName.value ลงไปใน console อีกครั้ง → ควรจะได้ผลลัพธ์เป็นข้อความที่เราพิมพ์ลงไปในกล่องข้อความ
การอ่านข้อความในกล่อง input
ชื่อตัวแปร.value
นอกจากอ่านข้อความออกมาแล้ว เราสามารถเขียนข้อความเข้าไปในกล่องได้ด้วย:
js
```
yourName.value = 'Brendan'
```
การแก้ข้อความในกล่อง input
ชื่อตัวแปร.value = expression ข้อความที่จะใส่ในกล่องข้อความ

Putting it together

ลองเอาความรู้ทั้งหมดจากตอนนี้มารวมกันดู ก็สามารถสร้างโปรแกรมที่ถามชื่อ แล้วพอกดทักทาย โปรแกรมก็จะแสดงข้อความทักทายกลับมาได้

html

<!doctype html>
<html>
  <head><title>Greeter</title></head>
  <body>
    Your name: <input id="your-name" type="text">
    <input type="button" value="Say hi!" id="my-button">
    <script>
      let myButton = document.getElementById('my-button')
      let yourName = document.getElementById('your-name')
      myButton.onclick = () => {
        alert('Hi ' + yourName.value + '!')
      }
    </script>
  </body>
</html>

index.html

เวลาที่เราเปิดเว็บด้วยเว็บเบราว์เซอร์ ตัวเบราว์เซอร์จะประมวลผลโค้ด HTML ที่เราเขียน เพื่อสร้างเป็นโครงสร้างของหน้าเว็บซึ่งเรียกกันว่า “DOM” (ย่อมาจาก Document Object Model) ซึ่งเป็นสิ่งที่ทำให้โค้ด JavaScript สามารถทำงานกับเนื้อหาบนหน้าเว็บนั้นได้ ผ่านตัวแปรที่ชื่อว่า document ↩︎

โต้ตอบกับผู้ใช้งานด้วย input ​

ใช้งาน JavaScript กับ input ​

ทำให้โค้ดทำงานเมื่อปุ่มถูกกด ​

อ่านหรือแก้ข้อความในกล่องข้อความ ​

Putting it together ​

โต้ตอบกับผู้ใช้งานด้วย input

ใช้งาน JavaScript กับ input

ทำให้โค้ดทำงานเมื่อปุ่มถูกกด

อ่านหรือแก้ข้อความในกล่องข้อความ

Putting it together