জাভাস্ক্রিপ্ট পপ-আপ বক্স
জাভাস্ক্রিপ্টে তিন ধরনের পপ-আপ বক্স আছেঃ এলার্ট(alert) বক্স, কনফার্ম(confirm) বক্স এবং প্রোম্পট(prompt) বক্স।
এলার্ট বক্স
ব্যবহারকারীকে তথ্য প্রদানের ক্ষেত্রে নিশ্চিত হওয়ার জন্য প্রায়ই এলার্ট বক্স ব্যবহার করা হয়।
যখন একটি এলার্ট বক্স প্রদর্শিত হয়, ব্যবহারকারীকে "OK" ক্লিক করে পরবর্তী ধাপে যেতে হয়।
গঠনপ্রণালী
window.alert("text");window.alert() মেথডটি window উপসর্গ(prefix) ছাড়াও লিখা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc(){
alert("Hey there!");
}
</script>
</body>
</html>
ফলাফল
কনফার্ম বক্স
কোন একটি বিষয়ে যদি আপনি ব্যবহারকারীকে যাচাই করতে চান অথবা কিছু গ্রহণ করাতে চান সেক্ষেত্রে প্রায়ই কনফার্ম বক্স ব্যবহার করা হয়।
যখন একটি কনফার্ম বক্স প্রদর্শিত হয়, ব্যবহারকারীকে "OK" অন্যথায় "Cancel" ক্লিক করে অগ্রসর হতে হয়।
যদি ব্যবহারকারী "OK" ক্লিক করে, তাহলে বক্সটি "true" রিটার্ন করবে। যদি ব্যবহারকারী "Cancel" ক্লিক করে, তাহলে বক্সটি "false" রিটার্ন করবে।
গঠনপ্রণালী
window.confirm("text");window.confirm() মেথডটি window উপসর্গ(prefix) ছাড়া লিখা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc(){
var a;
if (confirm("Click a Button!") === true) {
a = "Clicked OK!";
} else {
a = "Clicked Cancel!";
}
document.getElementById("test").innerHTML = a;
}
</script>
</body>
</html>
ফলাফল
প্রোম্পট বক্স
একটি পেজে প্রবেশের পূর্বে আপনি যদি ব্যবহারকারীকে দিয়ে কোন একটি ভ্যালু পেতে চান সেক্ষেত্রে প্রোম্পট(prompt) বক্স ব্যবহার করা হয়।
যখন একটি প্রোম্পট(prompt) বক্স প্রদর্শিত হয়, ব্যবহারকারীকে একটি ভ্যালু দেওয়ার পর "OK" অথবা "Cancel" ক্লিক করতে হবে।
যদি ব্যবহারকারী "OK" ক্লিক করে, তাহলে বক্সে দেওয়া ভ্যালু রিটার্ন করে। আর যদি ব্যবহারকারী "Cancel" ক্লিক করে, তাহলে ফাকা(null) ভ্যালু রিটার্ন করে।
গঠনপ্রণালী
window.prompt("text", "defaultText");
window.prompt() মেথডটি window উপসর্গ(prefix) ছাড়া লিখা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc() {
var a = parseInt(prompt("Please give a number..", "1-10"));
var b = parseInt(prompt("Please give another number..", "1-10"));
var c = a + b;
if (c != NaN && c <= 20) {
document.getElementById("test").innerHTML = c;
}
}
</script>
</body>
</html>
ফলাফল
লাইন ব্রেক
পপ-আপ বক্সের ভিতরে লাইন ব্রেক প্রদর্শনের জন্য নিম্নলিখিত পদ্বতিটি অনুসরণ করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<button onclick="myFunc()">ক্লিক করুন</button>
<script>
function myFunc(){
alert("Hey there!\nHow are you?");
}
</script>
</body>
</html>
ফলাফল