Javascript popup boxes သည္ user ေတြ အတြက္ ေရြးခ်ယ္ေဆာင္ရြက္နိုင္ေသာ boxes အမ်ိဳးအစားေတြ ပါဝင္ပါတယ္ ၊ popup boxes သံုးမ်ိဳးရိွပါတယ္ ၊ ၎ တို႕မွာ Alert box, Confirm box, and Prompt box တို႕ ျဖစ္ပါတယ္။ Alert box, Confirm box, and Prompt box တို႕ သည္ window object method အမ်ိဳးအစားေတြျဖစ္ပါတယ္။
Alert () method
Alert ()method သည္ user အတြက္ message ကို alert boxes နဲ႕ေဖာ္ျပေပးပါတယ္ ၊ အဲဒီ message ကို အတည္ ျပဳျပီးမွပဲ ေရွ႕ ကို ဆက္သြားလို႕ ရမွာ ျဖစ္ပါတယ္ ၊ message ကို အတည္ျပဳေပးဖို႕ “ ok “ click buttom ပါဝင္ပါတယ္ ။ alert boxes ကို function ေတြ ထဲမွာ သံုးမယ္ဆိုရင္ ေတာ့ name တစ္ခုေပးျပီး သံုးရမွာ ျဖစ္ပါတယ္၊ alert ( yortext) ; ဆိုျပီး သံုးပါတယ္။
<html> <head> <script type="text/javascript"> alert("Hello! I am kyawko"); </script> </head> </html> |
function ထဲမွာ အသံုးျပဳပံုကို ဆက္ၾကည့္လိုက္ပါဦး ၊ function ေနာက္က show_ alert ( ) ဆိုတာ function name ျဖစ္ပါတယ္။ event attribute ျဖစ္တဲ့ onclick က ေန function call ေခၚထားေသာပံုစံျဖစ္ပါတယ္။ event type အေၾကာင္းကို ေခါင္းစဥ္သက္သက္ခြဲျပီးေရေပးထားပါတယ္၊ ဒီေနရာမွာေတာ့ alert( )method အသံုးျပဳပံုကိုသာ ေလ့လာေစခ်င္ပါတယ္။
<html> <head> <script type="text/javascript"> function show_alert() { alert("Hello! I am an kyawko"); } </script> </head> <body> <input type="button" ondblclick="show_alert()" value="alert box" /> </body> </html> |
ေပၚလာေသာပံု---
Prompt( ) method
Prompt( ) method သည္ window object method အမ်ိဳးစားတစ္ခုျဖစ္ပါတယ္ ၊ prompt ( ) method သည္ user အတြက္ အသံုးျပဳနိုင္ေသာ text field နွင့္ “ ok “ ၊ cancen buttom ေတြ ပါဝင္ တယ္ ၊ user ကေန text field အတြင္း မွာ data ကို ရိုက္ထဲ့ အသံုးျပဳရမွာ ျဖစ္ပါတယ္။
1. prompt(" your name:") = “ “ အတြင္းမွာ ပါေသာ text သည္ prompt ( ) boxes ထဲမွာ ေပၚရန္ သတ္မွတ္ပါတယ္။
2. prompt("Type your name:", "Type here") ထဲမွာပါဝင္ေသာ “ Type here” သည္ text field ထဲမွာ ေပၚရန္ျဖစ္ပါတယ္၊ ။
3. var name = prompt("Type your name:", "Type here") = var name တစ္ခုနွင့္ေၾကညာပံုျဖစ္
ပါတယ္။
ပါတယ္။
<html> <body> <script type="text/javascript"> var name = prompt("What is your name?", "Type your name here"); alert("Your name is: "+name) </script> </body> </html> |
ေပၚလာေသာပံုစံ
Function နွင့္ အသံုးျပဳပံု
<html> <head> <script type="text/javascript"> function show_prompt() { var x=prompt("Please enter your name","text"); if (x!=0) { document.write("Hello " + x + "! How are you today?"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html> |
အေပၚက ဥပမာကို ေလ့လာၾကည့္ရေအာင္ ၊ show_promt() သည္ function name ျဖစ္ပါတယ္ ၊ user ရိုက္ထည့္မဲ႕ prompt ( )method ကို var x လို႕ေၾကညာထားပါတယ္ ၊ user က ရိုက္ထည့္လိုက္ေသာ x တန္ဖိုးကို if statement နဲ႕စစ္ျပီး output ထုတ္ေပးမွာ ျဖစ္ပါတယ္၊ input tag ထဲမွာ ပါဝင္ေသာ onclick = show-prompt ( ) ကို function call ေခၚျပီး သံုးထားပါတယ္။output ကိုေတာ့ x တန္ဖိုးနွင့္ ေပါင္းျပီး (Hello x ! How are you today?) ဆိုျပီး ထုတ္ေပးမွာ ျဖစ္ပါတယ္။
Confirm( )method
Confirm( ) method သည္ user ကို message တစ္ခု ေဖာ္ျပေပးျပီး ေရြးခ်ယ္ အတည္ျပဳ ခိုင္းပါတယ္ ။ confirm( ) boxes မွာ “ok” / “cancel “ buttom ေတြ ပါဝင္ပါတယ္။
ေအာက္ကဥပမာသည္ ok နွင့္ cancel buttom ၏ အလုပ္လုပ္ပံုကို if statement သံုးျပီး user ကို confirm( ) အတည္ျပဳေရြးခ်ယ္ခိုင္းေသာ ပံုစံေလးျဖစ္ပါတယ္။ var x သည္ true (x ==true )နွင့္ ညီမယ္ဆိုရင္ ok ကို နွိပ္ပါ ။ ok နွိပ္ရင္ output က “welcome “ဆိုျပီး ထုတ္ေပးပါလိမ္မယ္။ cancel နွိပ္ရင္ “go back” ဆိုျပီး ထုတ္ေပးပါလိမ္မယ္။
<html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("welcome!"); } else { alert("go back!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html> |
No comments:
Post a Comment