การเขียนโปรแกรม JavaScript และการใช้งาน function อีเวนต์ & ฟอร์ม

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

Nes224
PHP Super Member
PHP Super Member
Posts: 234
Joined: 20/12/2021 11:36 am

การเขียนโปรแกรม JavaScript และการใช้งาน function อีเวนต์ & ฟอร์ม

Post by Nes224 »

ในการสร้างเว็บเพจ อาจจะมีกรณีที่เราต้องรับข้อมูลมาจากผู้ใช้งานเพื่อนำไปดำเนินการบางอย่าง ซึ่งจะต้องกำหนดองค์ประกอบด้วย HTML และในส่วนของ JavaScript เพื่อใช้งาน และบางครั้งเราจะต้องใช้งานร่วมกับฟอร์ม เช่น การอ่าน หรือ กำหนดข้อมูล หรือตรวจสอบความถูกต้อง โดยเราจะใช้ JavaScript เพื่อตอบสนองต่อเหตุการณ์นั้นๆ หรือที่เรียกว่า Event ซึ่งเรากำหนด Event เพื่อบอกว่าทำสิ่งนั้นแล้ว จะเกิดอะไรขึ้นตามมา โดยในวันนี้จะมาทำความรู้จักการใช้ Event & Form attribute ต่างๆ เมเธอ addEventListener() และการกำหนด Event window.load

อย่างที่ได้กล่าวเกริ่นนำไปแล้วว่า Event คือสิ่งที่จะเกิดเมื่อเราได้ทำบางสิ่งไปเช่น การ click ที่ button แล้วมี alert แจ้งเตือน ซึ่งเรามักจะใช้ Event ที่เกิดขึ้นมาเป็นตัวกำหนดให้เกิดการตอบสนองนั้นเอง และมี Element ต่างๆดังนี้
  • click : คลิกที่ element
    blur : ย้ายโฟกัสไปที่ element อื่น : button, input, select, textarea, body
    change : เมื่อเปลี่ยนแปลงการเลือกรายการ เช่น select, checkbox, radio
    error: มีข้อผิดพลาด : img
    focus: element ได้รับการโฟกัส : button, input, select, textarea,body
    reset: เมื่อเคลียร์ข้อมูลในฟอร์ม : form
    select: เลือกข้อความใน element : input, textarea
    submit: ส่งข้อมูลจากฟอร์มไปยัง server : form
    unload ยกเลิกการโหลดเอกสาร body
การกำหนด Event ด้วย method addEventListener()

object ของ element ที่รองรับการเกิด Event จะมี method ที่ชื่อ addEventListener() ซึ่งจะใช้สำหรับการกำหนด Event ให้ แก่ Element นั้นๆ โดยมีรูปแบบดังนี้

Code: Select all

element.addEventListener('eventType', function() {          //Annoymous Function
	//ตอบสนอง Event
})

หรือ
element.addEventListener('eventType', () => {        //Arrow Function
	//ตอบสอนง Event
})

หรือ

element.addEventListener('eventType', regFunction)   //Regular Function
ยกตัวอย่างการใช้งาน

โดยมีโครงสร้างของการโปรแกรมการทำงานดังนี้ซึ่งเราจะใช้เป็น NodeJs ในการทดลอง
structure
structure
structure1.jpg (7.81 KiB) Viewed 25 times
ติดตั้ง npm package
  • npm init -y
    npm install express
    npm install ejs
ที่ไฟล์ app.js

Code: Select all

const express = require('express')
const ejs = require('ejs')
const app = express()

app.set('view engine', 'ejs')

app.get('/', (request,response) => {
    response.render('index')
})

app.listen(3000, () => console.log("Server started on port : 3000"))
ที่ folder ไฟล์ index.ejs

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <button id = 'bt'>button</button>
    <script>
        let btn = document.getElementById('bt')
        btn.addEventListener('click', function() {
            alert('Thank')
        })
    </script>
    
</body>
</html>
ใช้คำสั่ง node app.js เพื่อสั่ง run localhost:3000 ขึ้นมา
runLocalhost.jpg
runLocalhost.jpg (4.65 KiB) Viewed 25 times
เมื่อไปที่ browser ของเรา พิมพ์ที่ช่อง URL ว่า localhost:3000
จะปรากฏหน้า page ดังนี้
Url.jpg
Url.jpg (3.12 KiB) Viewed 25 times
และเมื่อที่ ปุ่ม button จะมี alert เกิดขึ้นดังรูปภาพด้านล่าง ซึ่งก็คือ function การทำงาน addEventListener นั้นเอง
Event.jpg
Event.jpg (5.25 KiB) Viewed 25 times
การกำหนด Event ด้วย window.load

โดยปกติแล้ว หากมักจะเขียน Script ในการอ้างอิงถึง Element ใดๆ ต้องให้ Element นั้นๆ ถูกโหลดเข้ามาก่อน ถ้าเราวาง Script ไว้ก่อน Element ที่อ้างถึง ซึ่งจะทำให้ไม่มีผลที่ตามมา
เช่น ดังตัวอย่างต่อไปนี้

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
	<script>
        let btn = document.getElementById('bt')
        btn.addEventListener('click', function() {
            alert('Thank')
        })
    </script>
    <button id = 'bt'>button</button>
    
    
</body>
</html>
ซึ่งโดยการเขียน Script ส่วนใหญ่แล้ว เรานิยมแต่จะแยกองค์ประกอบแต่ละอย่างของ website นั้นออกจากกัน CSS, JavaScript, HTML ไว้คนละส่วน ซึ่งถ้าหากเราวาง Script ไว้ที่ช่วงของ <head>....</head> แล้ว อาจจะทำให้มีปัญหาเกิดขึ้นถึงการอ้างอิง Element ดังกล่าว เพราะส่วนของ <head> ต้องอยู่ก่อน <body> ซึ่งวิธีแก้ปัญหาดังกล่าวนี้ เราจะกำหนดการกระทำที่จะเกิดขึ้นหลังจากองค์ประกอบทั้งหมดของเพจถูกโหลดมาจนครบหมด ไว้ใน Event onload ของ object window ซึ่งมีรูปแบบคำสั่งดังนี้

Code: Select all

window.onload  = function() {
	//คำสั่ง
}
หรืออาจจะใช้เป็น

window.addEventListener('load', function() {
	//คำสั่ง
})
เพื่อความเป็นสัดส่วนเราควรที่จะวาง Event นี้ไว้ที่ส่วนของ <head>....</head> แล้วกำหนดการกระทำที่ต้องการให้เกิดขึ้นหลังเพจถูกโหลดมาอย่างสมบูรณ์ไว้ใน Event
มาดูตัวอย่างของ code กัน ซึ่งเราจะยังคง ใช้ application ที่ได้ทำการสร้างไว้เพียงแต่เปลี่ยนรูปแบบของไฟล์ index.ejs ซึ่งมีดังนี้

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <script>
        window.onload = function() {
            let bt = document.getElementById('bt')
            bt.onclick = function() {
                alert('NodeJs & JavaScript')
            }
        }

    </script>
</head>
<body>
    <button id = "bt">Button</button>
    
</body>
</html>
หลังจากนั้นให้ใช้ขั้นตอนเดิมในการทดสอบผลลัพธ์ ซึ่งจะได้ผลลัพธ์ดังภาพนี้

Event1.jpg
Event1.jpg (5.86 KiB) Viewed 25 times
สรุปแล้ว การใช้ Event คือการกำหนดลักษณะอย่างที่จะเกิดขึ้นหลังจากที่เราได้กระทำกับบางสิ่ง เช่นการกดคลิกที่ปุ่ม button ซึ่งจากนั้นจะมีผลลัพธ์ตามมา ตามที่เราได้วางโครงสร้างนั้นเอาไว้ และการใช้งาน window.onload หรือ window.addEventListener นั้นเป็นการแยกองค์ประกอบของ Script เพื่อที่เราจะสามารถแยกคำสั่งต่างๆได้อย่างมีระเบียนเรียบร้อย โดยทั่วไปแล้วในการใช้ NodeJs นั้นจะการใช้ของ Event อยู่บ่อยครั้งหรือแม้แต่ Django, PHP เองก็ตาม

https://www.w3schools.com/js/js_events.asp
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
https://www.w3schools.com/js/js_htmldom_elements.asp
  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests