JavaScript alert() วิธีการ

JavaScript alert() เมธอด หรือที่เรียกว่า Window.alert() จะแสดงกล่องโต้ตอบการแจ้งเตือนให้กับผู้ใช้ ยอมรับอาร์กิวเมนต์ข้อความที่เป็นตัวเลือกเพื่อแสดงข้อความด้วยปุ่มตกลงไปยังผู้ใช้ การใช้งานทั่วไปสำหรับ alert() เพื่อแจ้งให้ผู้ใช้ทราบว่าการดำเนินการสำเร็จหรือแสดงข้อผิดพลาด

alert() เมธอดยังมีประโยชน์ในฐานะเครื่องมือในการพัฒนาอีกด้วย ตัวอย่างเช่น การวาง alert() ภายในฟังก์ชันเพื่อจัดการกับการส่งแบบฟอร์ม โดยทั่วไป alert() จะถูกวางไว้หลัง event.preventDefault() ถูกเรียก.

สำหรับการตรวจทาน event.preventDefault() เพียงแค่ยกเลิกพฤติกรรมเริ่มต้นของการเปลี่ยนเส้นทางหลังจากคลิกปุ่มส่ง อ่านบทแนะนำสั้นๆ นี้เพื่อดูเพิ่มเติม event.preventDefault() .

JavaScript alert() คืออะไร

JavaScript alert() แสดงกล่องโต้ตอบแบบผุดขึ้น ข้อความทางเลือกในรูปแบบของสตริงสามารถส่งผ่านเพื่อแสดงข้อความที่กำหนดเอง หมายเหตุสำคัญเกี่ยวกับ alert() ควรใช้เพื่อแสดงข้อความที่ต้องรับทราบโดยคลิกตกลงเท่านั้น ข้อความที่ต้องการการดำเนินการไม่ควรใช้ alert() .

alert() กล่องโต้ตอบมีประโยชน์หลายอย่าง สามารถใช้เพื่อแสดงความสำเร็จหรือข้อผิดพลาดในบริบทของ fetch() ขอ. อีกวิธีหนึ่งคือการแสดง alert() ในฟังก์ชั่นเพื่อให้แน่ใจว่าโปรแกรมไหลได้อย่างเหมาะสม

alert() ไวยากรณ์ JavaScript

ไวยากรณ์สำหรับ alert() มีความกระชับและตรงไปตรงมา เพียงเรียกใช้ alert() ด้วยข้อความในรูปแบบของสตริง:

alert('message')

นี่จะแสดงกล่องโต้ตอบที่ระบุว่า 'ข้อความ' วางข้อความที่กำหนดเองของคุณเป็นสตริงเพื่อแสดง

ข้อความเป็นตัวเลือก หากไม่ได้รวมข้อความไว้ กล่องโต้ตอบเปล่าพร้อมปุ่มตกลงจะปรากฏขึ้น

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

alert()

JavaScript alert() ตัวอย่าง

ในบทนำของบทความนี้ เราพิจารณาถึงสถานการณ์ของผู้ใช้และนักพัฒนาสำหรับการใช้ alert() . ตอนนี้เรามาดูกันว่าแต่ละอันจะถูกนำไปใช้อย่างไร มาเริ่มกันที่ด้านนักพัฒนา เราจะใส่ alert() ภายในฟังก์ชันที่จัดการการส่งแบบฟอร์ม

เราจะเริ่มต้นด้วยแบบฟอร์มพื้นฐานสำหรับการเข้าสู่ระบบด้วยชื่อผู้ใช้และรหัสผ่าน

<form>
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

ซึ่งแสดงผล:

ตอนนี้ มาสร้างฟังก์ชันเพื่อส่งต่อไปยังคุณสมบัติ onSubmit ของแบบฟอร์ม JavaScript ของเรา

const handleOnSubmit = (event) => {
 event.preventDefault();
 alert("Logged In")
}

จากนั้นเราส่งฟังก์ชันนี้ไปยังแบบฟอร์มของเราในคุณสมบัติ onSubmit

<form onSubmit="handleOnSubmit(event)">
<label>Name</label>
<input type="text" name="name">
<label>Password</label>
<input type="text" name="name">
<button type="submit">
Log In
</button>
</form>

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

ยอดเยี่ยม! เรารู้ว่าหน้าที่ของเราที่เรากำหนดคือการสื่อสารกับแบบฟอร์มของเรา JavaScript alert() ทำให้เรามีวิธีง่ายๆ ในการตรวจสอบโฟลว์ของโปรแกรมของเรา

สำหรับตัวอย่างต่อไป มาดูกันว่าเราจะแสดงข้อความแสดงความสำเร็จและข้อผิดพลาดใน fetch() ได้อย่างไร ขอ.

fetch('/current-cart/', {
      credentials: 'include',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(resp => resp.json())
    .then(cart => {
      if(cart.error){
        alert(cart.error)
      }

ในตัวอย่างนี้ เรามีคำขอดึงข้อมูลตะกร้าสินค้าในแอปอีคอมเมิร์ซ เรากำลังส่งคำขอเพื่อดูว่ามีการจัดเก็บตะกร้าสินค้าปัจจุบันหรือไม่ ดำเนินการตามคำขอจนจบ เรามี alert() ที่จะแสดงข้อผิดพลาดถ้ามี

เนื่องจากไม่มีตะกร้าสินค้าที่ใช้งานอยู่ เราจึงได้รับข้อผิดพลาดนี้:

ตัวอย่างนี้มีประโยชน์ในการพัฒนามากกว่าการผลิต แต่หลักการเดียวกันนี้สามารถนำมาใช้เป็นการตรวจสอบความถูกต้องบนแบบฟอร์มได้ เป็นต้น

return fetch('/login', {
      credentials: 'include',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(creds)
    })
    .then(resp => resp.json())
    .then(response => {
      if (response.error) {
        alert(response.error)
      }

ที่นี่ alert() จะแสดงข้อความแสดงข้อผิดพลาดที่เกี่ยวข้องกับแบบฟอร์มการเข้าสู่ระบบ หากผู้ใช้พยายามเข้าสู่ระบบโดยไม่กรอกแบบฟอร์ม เราได้รับข้อผิดพลาดเหล่านี้:

นี่คือตัวอย่างการชี้นำประสบการณ์ของผู้ใช้โดยใช้ alert() เพื่อแสดงการตรวจสอบ

เราได้เห็นแล้วว่า alert() สามารถใช้ได้ทั้งด้านการพัฒนาและฝั่งไคลเอ็นต์ — สิ่งที่ผู้ใช้เห็น สละเวลาสักครู่เพื่อสรุปสิ่งที่เราได้เรียนรู้

บทสรุป

JavaScript alert() เป็นวิธีการง่ายๆ ที่มีการใช้งานกว้างๆ มากมาย ใช้อาร์กิวเมนต์ที่เป็นทางเลือกของข้อความเป็นชนิดข้อมูลสตริง จะแสดงกล่องโต้ตอบพร้อมข้อความและปุ่มตกลง จำไว้ว่า alert() มีไว้เพื่อแสดงข้อความเท่านั้นและไม่สามารถดำเนินการใดๆ ได้

ในตัวอย่างของเรา เราเห็นว่า alert() สามารถใช้ในการพัฒนาเพื่อติดตามการสื่อสารของฟังก์ชันและแบบฟอร์ม แล้วเราก็เห็นว่า alert() . เป็นอย่างไร สามารถแสดงข้อความแสดงข้อผิดพลาดในด้านการพัฒนาของคำขอดึงข้อมูล ในตัวอย่างสุดท้ายของเรา เราเห็นว่า alert() สามารถใช้เพื่อส่งข้อผิดพลาดในการตรวจสอบความถูกต้องในแบบฟอร์มให้กับผู้ใช้

ถึงตอนนี้ คุณควรเข้าใจการใช้งานทั่วไปสำหรับ alert() . ลองใช้ในโปรเจ็กต์ JavaScript ถัดไปของคุณเพื่อทดสอบฟังก์ชันการทำงานต่างๆ