Awesome! টিউনস
সকল Awesome! টিউনস

জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-১৬] :: জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট এবং কুকি (শেষ পর্ব)

1,629 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ জাভাস্ক্রিট
প্রকাশিত
Level 0

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

আসসালামু আলাইকুম । কেমন আছেন সবাই? আশা করি সবাই ভাল আছেন? আমি মহান আল্লাহ্‌ তা'আলার অশেষ রহমতে ভাল আছি ।

আমি গত পর্বে জাভাস্ক্রিপ্ট ফর্ম ভ্যালিডেশন নিয়ে আলোচনা করেছিলাম । আমরা ইতোমধ্যে জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়াল এর ১৫ টি পর্ব আলোচনা করেছি । আজ জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়াল এর ১৬ তম পর্ব এবং আজ জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়াল এর শেষ পর্ব । আজ আমি আপনাদের কাছে জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট (JavaScript Timing Evens) এবং জাভাস্ক্রিপ্ট কুকি (JavaScript Cookies) দুইটি বিষয় নিয়ে আলোচনা করবো । আমরা প্রথমে জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট নিয়ে আলোচনা করবো এবং এরপর জাভাস্ক্রিপ্ট কুকি নিয়ে আলোচনা করবো । এখন আমরা জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট নিয়ে আলোচনা করবো;

জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট

জাভাস্ক্রিপ্ট টাইমিং ইভেন্টস এর মাধ্যমে নির্দিষ্ট সময় পর পর নির্দিষ্ট কিছু কোড এক্সিকিউট করা যায় । এই পদ্ধতির নাম হচ্ছে, জাভাস্ক্রিপ্ট টাইমিং ইভেন্টস ।

জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট করা তেমন কঠিন কিছু নয় বরং এটা খুবই সহজ । জাভাস্ক্রিপ্ট টাইমিং ইভেন্টস এ সাধারণত দুটি ফাংশন ব্যবহার করা হয়ে থাকে । এই দুইটি কি মেথড (Key Method) হচ্ছে;

setInterval()

setTimeout()

এখন আমরা এই দুইটি কি মেথড (Key Method) সম্পর্কে বিস্তারিত আলোচনা করবো ।

setInterval()

জাভাস্ক্রিপ্ট setInterval() কি মেথড (Key Method) এর মাধ্যমে নির্দিষ্ট সময় পর পর নির্দিষ্ট কিছু কোড এক্সিকিউট করা যায় । এর সিনট্যাক্সটি হচ্ছে;

var varname=setInterval("javascrict statement", milliseconds);

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


<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> JavaScript Timing Events </title>
</head>
<body>
 <button onclick="setInterval(function(){alert('Welcome to JavaScript Tutorial')},5000);"> Click Here </button>
</body>
</html>

এবার যদি আপনি index.html ফাইলটি ওপেন করেন তাহলে Click Here নামে একটি বাটন দেখতে পারবেন এবং Click Here বাটন এ ক্লিক করলে ৫ সেকেন্ড পর পর Welcome to JavaScript Tutorial লেখা একটি অ্যালার্ট বক্স দেখতে পারবেন । কেননা, এখানে ৫০০০ মিলিসেকেন্ড ব্যবহার করেছি । যেহেতু, ১০০০ মিলি সেকেন্ড = ১ সেকেন্ড । আশা করি বুঝতে পেরেছেন ।

setTimeout()

এই কি মেথড এর মাধ্যমে কোন কোড ভবিষ্যতে এক্সিকিউট করবে । এর সিনট্যাক্সটি হচ্ছে;


var varname=setTimeout("javascrict statement", milliseconds);

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


<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> JavaScript Timing Events </title>
</head>
<body>
 <button onclick="setTimeout(function(){alert('Welcome to JavaScript Tutorial')},2000);"> Click Here </button>
</body>
</html>

এবার যদি আপনি index.html ফাইলটি ওপেন করেন তাহলে Click Here নামে একটি বাটন দেখতে পারবেন এবং Click Here বাটন এ ক্লিক করলে ২ সেকেন্ড পর Welcome to JavaScript Tutorial লেখা একটি অ্যালার্ট বক্স দেখতে পারবেন । কেননা, এখানে ২০০০ মিলিসেকেন্ড ব্যবহার করেছি । যেহেতু, ১০০০ মিলি সেকেন্ড = ১ সেকেন্ড । আশা করি বুঝতে পেরেছেন ।

যখন setTimeout() ফাংশন বাতিল করার প্রয়োজন পরে তখন clearTimeout() ফাংশন ব্যবহার করা হয়ে থাকে । এর সিনট্যাক্সটি হচ্ছে;


clearTimeout(setTimeout_variable);

এতক্ষন আমরা জাভাস্ক্রিপ্ট টাইমিং ইভেন্ট নিয়ে আলোচনা করলাম এবার আমরা জাভাস্ক্রিপ্ট কুকি নিয়ে আলোচনা করবো ।

জাভাস্ক্রিপ্ট কুকি

কুকি ওয়েবসাইটের ভিজিটরের তথ্য সাইট এ সংরক্ষণ করে রাখে । যেমন, আপনি একটি ওয়েবসাইটে প্রবেশ করলেন সেখানে আপনার নাম এবং পাসওয়ার্ড দিলেন । তখন আপনার এসব দেওয়া তথ্য কুকিটে জমা থাকবে । এরপর, যখনই আপনি আবার সাইটে প্রবেশ করবেন তখন আপনার সংরক্ষিত তথ্য উদ্ধার হবে । কুকি HTTP Cookie, Web Cookie এবং Browser Cookie নামেও পরিচিত । কুকি এর সিনট্যাক্স হচ্ছে;


document.cookie = "key1=value1;key2=value2;expires=date";

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


<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title> JavaScript Cookies </title>
 <script type="text/javascript">
function cookieName()
{
 if( document.myform.customer.value == "" ){
 alert("Please Type Some Value!");
 return;
 }

cookievalue= escape(document.myform.customer.value) + ";";
 document.cookie="name=" + cookievalue;
 alert("Setting Cookies : " + "name=" + cookievalue );
}
</script>
</head>
<body>
 <form name="myform" action="">
Please Type Some Value: <input type="text" name="customer"/>
<input type="button" value="Click Here" onclick="cookieName();"/>
</form>
</body>
</html>

এবার যদি আপনি index.html ফাইলটি ওপেন করেন । আপনি যদি টেক্সট ফিল্ড এ আপনার নাম প্রবেশ করে Click Here বাটনে ক্লিক করেন একটি অ্যালার্ট বক্স এ আপনার নাম দেখতে পারবেন । আর যদি কোন তথ্য না দিয়ে Click  Here বাটনে ক্লিক করেন তাহলে Please Type Some Value! লেখাটি একটি  অ্যালার্ট বক্স এ  দেখতে পারবেন ।

কিছু কথা

এই টিউটোরিয়াল এর মাধ্যমে আমি জাভাস্ক্রিপ্ট ধারাবাহিক টিউটোরিয়ালটি শেষ করলাম । তবে, আপনাদের শেখা এখানেই শেষ নয় । আপনারা প্রতিনিয়ত শিখতে থাকবেন, আর অন্যকে শেখাবেন । আমি জাভাস্ক্রিপ্ট টিউটোরিয়ালটি মোট ১৬ টি পর্বে শেষ করেছি । আমি আপনাদের কাছে সহজভাবে উপস্থাপন করার চেষ্টা করেছি । যদি আমার টিউটোরিয়ালটি আপনাদের সামান্য উপকারে আসে অর্থাৎ আমার টিউটোরিয়াল থেকে সামান্য কিছু শিখতে পারেন তাহলে আমার টিউটোরিয়ালটি লেখা সার্থক হবে । যদি টিউটোরিয়াল এর কোথাও ভুল থাকে তাহলে আমাকে জানাতে ভুলবেন না, আমি সংশোধন করে নিবো । আপনাদের সবাইকে ধন্যবাদ জানাই আমার সাথে থাকার জন্য এবং টেকটিউনস এর সাথে থাকার জন্য । পরবর্তীতে, আপনাদের জন্য অন্য কোন টিউটোরিয়াল লিখবো - ইনশাল্লাহ্‌ । টেকটিউনস এর সাথেই থাকুন ।

আমার সাথে ফেইসবুক এ যোগাযোগ করতে এখানে ক্লিক করুন ।

ভাল থাকবেন সবাই । আমার জন্য দোয়া করবেন । আল্লাহ্‌ হাফেজ ।

Level 0

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 0

ধন্যবাদ ভাই । অনেক দিন পর কোন চেইন টিউনের “শেষ পর্ব” লেখা দেখলাম ! স্যালুট আপনাকে
আশা করি আপনার থেকে আরো অনেক কিছু পাব