জাভাস্ক্রিপ্ট পপ-আপ বক্স

এখন আমি জাভাস্ক্রিপ্ট পপ-আপ বক্স নিয়ে আলোচনা করবো । আমরা বিভিন্ন ওয়েবসাইট এ এসব জাভাস্ক্রিপ্ট পপ-আপ বক্স এর ব্যবহার দেখে থাকি । এসব জাভাস্ক্রিপ্ট পপ-আপ বক্স ব্যবহার করা হয়; ওয়েবসাইটের ব্যবহারকারীদের কাছ নিশ্চিত তথ্য সংরক্ষণের জন্য, ওয়েবসাইটের ব্যবহারকারীদের কাছ প্রাপ্ত তথ্য যাচাই করার জন্য, ওয়েবসাইটের ব্যবহারকারী ওয়েবসাইটের কোন পেইজ এ প্রবেশ করার পূর্বে কিছু ভ্যালু প্রবেশ করানোর জন্য ।

জাভাস্ক্রিপ্ট এ সাধারণত তিন ধরনের পপ-আপ বক্স ব্যবহার করা হয়ে থাকে । এ তিনটি পপ-আপ বক্স হচ্ছে;

  • অ্যালার্ট বক্স (Alert Box)
  • কনফার্ম বক্স (Confirm Box) এবং
  • প্রম্পট বক্স (Prompt Box)

অ্যালার্ট বক্স (Alert Box)

ওয়েবসাইটের ব্যবহারকারীদের কাছ নিশ্চিত তথ্য সংরক্ষণের জন্য জাভাস্ক্রিপ্ট অ্যালার্ট বক্স (Alert Box) ব্যবহার করা হয় । যখন, অ্যালার্ট বক্স (Alert Box) ব্যবহারকারীর সামনে প্রদর্শিত হয় তখন ব্যবহারকারীকে OK প্রেস করে প্রসিড(Procced) করতে হয় । জাভাস্ক্রিপ্ট অ্যালার্ট বক্স (Alert Box) এর সিনট্যাক্সটি হচ্ছে;

alert("write text here")

বিষয়টি আরও ভালোভাবে বুঝার জন্য এবার আমরা জাভাস্ক্রিপ্ট অ্যালার্ট বক্স (Alert Box) এর উদাহরণ দেখবো । এ জন্য নিচের কোডটুকু লিখে index.html লিখে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> Javascript Alert Box </title>
 <script type="text/javascript">
 function alert_box()
 {
 alert("write text here");
 }
 </script>
</head>
<body>
 <input type="button" onclick="alert_box()" Value="Click Here to Show Alert Box" />
</body>
</html>

এবার যেকোনো একটি ব্রাউজার index.html ফাইলটি ওপেন করুন, তাহলে Click Here to Show Alert Box নামে একটি বাটন দেখতে পারবেন । এবার Click Here to Show Alert Box বাটনে ক্লিক ক্লিক করুন, তাহলে একটি অ্যালার্ট বক্স (Alert Box) দেখতে পারবেন ।

কনফার্ম বক্স (Confirm Box)

ওয়েবসাইটের ব্যবহারকারীদের কাছ প্রাপ্ত তথ্য যাচাই করার জন্য জাভাস্ক্রিপ্ট কনফার্ম বক্স (Confirm Box) ব্যবহার করা হয় । যখন, কনফার্ম বক্স (Confirm Box) ব্যবহারকারীর সামনে প্রদর্শিত হয় তখন ব্যবহারকারীকে OK অথবা Cancel প্রেস করে প্রসিড (Procced) করতে হয় । জাভাস্ক্রিপ্ট কনফার্ম বক্স (Confirm Box) এর সিনট্যাক্সটি হচ্ছে;

confirm("write text here")

বিষয়টি আরও ভালোভাবে বুঝার জন্য এবার আমরা জাভাস্ক্রিপ্ট কনফার্ম বক্স (Confirm Box) এর উদাহরণ দেখবো । এ জন্য নিচের কোডটুকু লিখে index.html লিখে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> Javascript Confirm Box </title>
 <script type="text/javascript">
 function confirm_box()
 {
 var varname=confirm("Press a Button");
 if (varname==true)
 {
 document.write("You Pressed OK");
 }
 else
 {
 document.write("You Pressed Cancel")
 }
 }
 </script>
</head>
<body>
 <input type="button" onclick="confirm_box()" Value="Click Here to Show Confirm Box" />
</body>
</html>

এবার যেকোনো একটি ব্রাউজার index.html ফাইলটি ওপেন করুন, তাহলে Show Alert Box নামে একটি বাটন দেখতে পারবেন । এবার Show Confirm Box বাটনে ক্লিক ক্লিক করুন, তাহলে একটি অ্যালার্ট বক্স কনফার্ম বক্স (Confirm Box) দেখতে পারবেন ।

এবার আপনি যদি OK বাটন প্রেস করেন তাহলে You Pressed OK লেখাটি দেখতে পারবেন এবং এবার আপনি যদি Cancel বাটন প্রেস করেন তাহলে You Pressed Cancel লেখাটি দেখতে পারবেন ।

প্রম্পট বক্স (Prompt Box)

ওয়েবসাইটের ব্যবহারকারী ওয়েবসাইটের কোন পেইজ এ প্রবেশ করার পূর্বে কিছু ভ্যালু প্রবেশ করবে তাহলে আপনি জাভাস্ক্রিপ্ট প্রম্পট বক্স (Prompt Box) ব্যবহার করতে পারেন । যখন, প্রম্পট বক্স (Prompt Box) ব্যবহারকারীর সামনে প্রদর্শিত হয় তখন ব্যবহারকারীকে OK অথবা Cancel প্রেস করে প্রসিড (Procced) করতে হয় । জাভাস্ক্রিপ্ট প্রম্পট বক্স (Prompt Box) এর সিনট্যাক্সটি হচ্ছে;

prompt("write text here", "defaulttext")

বিষয়টি আরও ভালোভাবে বুঝার জন্য এবার আমরা জাভাস্ক্রিপ্ট প্রম্পট বক্স (Prompt Box) এর উদাহরণ দেখবো । এ জন্য নিচের কোডটুকু লিখে index.html লিখে সেভ করুন;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> Javascript Prompt Box </title>
 <script type="text/javascript">
 function prompt_box()
 {
 var varname=prompt("What is your name", "Jihadur Rahman");
 if (varname)
 {
 document.write("Hello " + varname + "!");
 }
 else
 {
 document.write("You Pressed Cancel")
 }
 }
 </script>
</head>
<body>
 <input type="button" onclick="prompt_box()" Value="Click Here to Show Prompt Box" />
</body>
</html>

এবার যেকোনো একটি ব্রাউজার index.html ফাইলটি ওপেন করুন, তাহলে Show Prompt Box নামে একটি বাটন দেখতে পারবেন । এবার Show Prompt Box বাটনে ক্লিক ক্লিক করুন, তাহলে একটি প্রম্পট বক্স (Prompt Box) দেখতে পারবেন ।

এবার আপনি যদি OK বাটন প্রেস করেন তাহলে Hello Jihadur Rahman! লেখাটি দেখতে পারবেন এবং এবার আপনি যদি Cancel বাটন প্রেস করেন তাহলে You Pressed Cancel লেখাটি দেখতে পারবেন ।

Series Navigation<< জাভাস্ক্রিপ্ট ইভেন্টজাভাস্ক্রিপ্ট অ্যারে >>

Leave a Reply

Your email address will not be published. Required fields are marked *