mfs1102 object oriented programming · 2...
TRANSCRIPT
![Page 1: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/1.jpg)
MFS1102 Object Oriented Programming
![Page 2: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/2.jpg)
ในการเขยนโปรแกรม หรอเขยนเวบนน การแจงเตอน หรอการบอกกลาว สงตาง ๆ ใหผใชงาน หรอการตรวจสอบขอผดพลาดนน
JavaScript รองรบกลองโตตอบ (Dialog Boxes) กลองโตตอบเหลานสามารถใชในการเพมและแจงเตอนหรอเพอรบการยนยนในการปอนขอมลใดๆ หรอมการปอนขอมลจากผใชซงม 3 ประเภทหลกๆ ไดแก
1
2
3
กลองโตตอบแบบแจงเตอน (Alert box)
กลองโตตอบแบบยนยนขอมล (Confirm box)
กลองโตตอบแบบรบขอมล (Prompt box)
![Page 3: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/3.jpg)
1 กลองโตตอบแบบแจงเตอน (Alert box)
กลองโตตอบการแจงเตอนสวนใหญจะใชเพอสงขอความเตอนใหกบผใชตวอยางเชน หากชองปอนขอมลหนงชองตองการปอนขอความบางอยาง แตผใชไมไดใหขอมลใดๆ จากนนจงเปนสวนหนงของการตรวจสอบความถกตอง ผพฒนาสามารถใชกลองเตอนเพอใหขอความเตอนกบผใชได
กลองการแจงเตอนยงสามารถใชกบขอความทวไปได กลองแจงเตอนมเพยงปมเดยว “OK " เพอเลอกและด าเนนการตอ
Syntax
window.alert("sometext");
![Page 4: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/4.jpg)
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) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/5.jpg)
1 กลองโตตอบแบบแจงเตอน (Alert box)
![Page 6: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/6.jpg)
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) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/7.jpg)
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) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/8.jpg)
2 กลองโตตอบแบบยนยนขอมล (Confirm box)
![Page 9: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/9.jpg)
3 กลองโตตอบแบบรบขอมล (Prompt box)
กลองโตตอบแบบรบขอมล มประโยชนมากเมอตองการปอปอปกลองขอความเพอรบขอมลจากผใช ดงนนจงชวยใหระบบสามารถโตตอบกบผใช โดยผใชจ าเปนตองกรอกขอมลในฟลดแลวคลก “OK”
กลองโตตอบนจะปรากฏขนโดยใชวธการทเรยกวา prompt () ซงใชพารามเตอร 2 ตว:1) ปายก ากบทตองการแสดงในกลองขอความ2) ขอความเรมตนทจะแสดงในกลองขอความ
![Page 10: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/10.jpg)
3 กลองโตตอบแบบรบขอมล (Prompt box)
กลองโตตอบนม 2 ปม: OK และ Cancel• หากผใชคลกทปม OK หนาตางเมธอด prompt () จะคนคาทปอนจากกลอง
ขอความ• หากผใชคลกทปม Cancel หนาตางเมธอด prompt () จะสงคนคาวาง
Syntax
window.prompt("sometext”, “defaultText");
![Page 11: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/11.jpg)
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) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/12.jpg)
3 กลองโตตอบแบบรบขอมล (Prompt box)
![Page 13: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/13.jpg)
1) การใช Alert Dialog Box
function showalert(message){ alert(message);
}
![Page 14: MFS1102 Object Oriented Programming · 2 กล่องโต้ตอบแบบยืนยันข้อมูล (Confirm box) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/14.jpg)
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) กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อให้ความยินยอมของผู้ใช้ในตัวเลือกใดๆ](https://reader034.vdocuments.site/reader034/viewer/2022042108/5e887b025f185f6473698934/html5/thumbnails/15.jpg)
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