MFS1102 Object Oriented Programming · 2...

15
MFS1102 Object Oriented Programming

Transcript of MFS1102 Object Oriented Programming · 2...

Page 1: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

MFS1102 Object Oriented Programming

Page 2: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

ในการเขยนโปรแกรม หรอเขยนเวบนน การแจงเตอน หรอการบอกกลาว สงตาง ๆ ใหผใชงาน หรอการตรวจสอบขอผดพลาดนน

JavaScript รองรบกลองโตตอบ (Dialog Boxes) กลองโตตอบเหลานสามารถใชในการเพมและแจงเตอนหรอเพอรบการยนยนในการปอนขอมลใดๆ หรอมการปอนขอมลจากผใชซงม 3 ประเภทหลกๆ ไดแก

1

2

3

กลองโตตอบแบบแจงเตอน (Alert box)

กลองโตตอบแบบยนยนขอมล (Confirm box)

กลองโตตอบแบบรบขอมล (Prompt box)

Page 3: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

1 กลองโตตอบแบบแจงเตอน (Alert box)

กลองโตตอบการแจงเตอนสวนใหญจะใชเพอสงขอความเตอนใหกบผใชตวอยางเชน หากชองปอนขอมลหนงชองตองการปอนขอความบางอยาง แตผใชไมไดใหขอมลใดๆ จากนนจงเปนสวนหนงของการตรวจสอบความถกตอง ผพฒนาสามารถใชกลองเตอนเพอใหขอความเตอนกบผใชได

กลองการแจงเตอนยงสามารถใชกบขอความทวไปได กลองแจงเตอนมเพยงปมเดยว “OK " เพอเลอกและด าเนนการตอ

Syntax

window.alert("sometext");

Page 4: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

1 กลองโตตอบแบบแจงเตอน (Alert box)

EXAMPLE

<html><head><script type = "text/javascript"><!--function Warn() {alert ("This is a warning message!");window.alert ("This is a warning message!");}//--></script></head>

<body><p>Click the following button to see the result: </p><form><input type = "button" value = "Click Me" onclick = "Warn();" /></form></body></html>

Page 5: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

1 กลองโตตอบแบบแจงเตอน (Alert box)

Page 6: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

2 กลองโตตอบแบบยนยนขอมล (Confirm box)

กลองโตตอบการยนยน สวนใหญจะใชเพอใหความยนยอมของผใชในตวเลอกใดๆจะแสดงกลองโตตอบทม 2 ปม: OK และ Cancel

• หากผใชคลกทปม OK ค าสง comfirm() จะ return คาเปน TRUE • หากผใชคลกทปม Cancel จากนน confirm() จะคนคา FALSE

Syntax

window.confirm("sometext");

Page 7: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

EXAMPLE

<script type = "text/javascript"><!--function getConfirmation() {var retVal = confirm("Do you want to continue ?");if( retVal == true ) {document.write ("User wants to continue!");return true;} else {document.write ("User does not want to continue!");return false;}

}//--></script>

2 กลองโตตอบแบบยนยนขอมล (Confirm box)

Page 8: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

2 กลองโตตอบแบบยนยนขอมล (Confirm box)

Page 9: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

3 กลองโตตอบแบบรบขอมล (Prompt box)

กลองโตตอบแบบรบขอมล มประโยชนมากเมอตองการปอปอปกลองขอความเพอรบขอมลจากผใช ดงนนจงชวยใหระบบสามารถโตตอบกบผใช โดยผใชจ าเปนตองกรอกขอมลในฟลดแลวคลก “OK”

กลองโตตอบนจะปรากฏขนโดยใชวธการทเรยกวา prompt () ซงใชพารามเตอร 2 ตว:1) ปายก ากบทตองการแสดงในกลองขอความ2) ขอความเรมตนทจะแสดงในกลองขอความ

Page 10: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

3 กลองโตตอบแบบรบขอมล (Prompt box)

กลองโตตอบนม 2 ปม: OK และ Cancel• หากผใชคลกทปม OK หนาตางเมธอด prompt () จะคนคาทปอนจากกลอง

ขอความ• หากผใชคลกทปม Cancel หนาตางเมธอด prompt () จะสงคนคาวาง

Syntax

window.prompt("sometext”, “defaultText");

Page 11: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

3 กลองโตตอบแบบรบขอมล (Prompt box)

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>function myFunction() {var txt;var person = prompt("Please enter your name:", “Phachaya");

if (person == null || person == "") {txt = "User cancelled the prompt.";} else {

txt = "Hello " + person + "! How are you today?";}

document.getElementById("demo").innerHTML= txt;}

</script>

EXAMPLE

Page 12: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

3 กลองโตตอบแบบรบขอมล (Prompt box)

Page 13: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

1) การใช Alert Dialog Box

function showalert(message){ alert(message);

}

Page 14: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

2) การใช Comfirm Dialog Box

function showconfirm(message){ if(confirm(message)){ document.getElementById("showgender").innerHTML = “You are Male"; } else{

document.getElementById("showgender").innerHTML = “You aren’t Male"; }

}<input type="button" value="show confirm" onclick="showconfirm(“You are Male Yes/No")" />

<span id="showgender"></span>

Page 15: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ

function showprompt(){ document.getElementById("showname").innerHTML = prompt(“What’s your name?");

} <input type="button" value="input name" onclick="showprompt()" /> <span id="showname"></span>

3) การใช Prompt Dialog Box