MFS1102 Object Oriented Programming · 2...

Preview:

Citation preview

MFS1102 Object Oriented Programming

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

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

1

2

3

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

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

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

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

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

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

Syntax

window.alert("sometext");

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>

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

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

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

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

Syntax

window.confirm("sometext");

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)

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

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

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

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

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

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

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

Syntax

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

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

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

1) การใช Alert Dialog Box

function showalert(message){ alert(message);

}

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>

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