java টিউটোরিয়াল a টু z

জাভাস্ক্রিপ্ট কি ? (What is JavaScript ?)

জাভাস্ক্রিপ্ট একটা জনপ্রিয় স্ক্রিপ্টিং ল্যাঙ্গুয়েজ, যা ওয়েব পেজের ইন্ট্রকটিভিটি ও ফাংশনালিটি বৃদ্ধি, ফরম ভেলিডেশন, ব্রাউজার নির্দেশ, সময় ও তারিখ নির্দেশ ইত্যাদি কাজে ব্যবহৃত হয়।জাভাস্ক্রিপ্ট ক্লায়েন্ট এবং সার্ভার উভয় দিকেই কাজ করতে পারে। তাই ইহা ইউজারের নিকট থেকে ডাটা নিয়ে প্রয়োজনীয় প্রসেস সম্পন্ন করে সার্ভারে প্রেড়ণ করতে সক্ষম। জাভাস্ক্রিপ্ট ECMA ইন্টারন্যশনাল অর্গানাইজেশন কতৃক উদ্ভাবিত এবং তৈরি করেছিলেন ব্রান্ডন এইচ (Brendan Eich)। জাভাস্ক্রিপ্ট এর অফিসিয়াল নাম ছিল ECMAScript ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<input type ="button" value = "Click Me"
onClick="alert('Welecome to www.tutorialbd.com')">
</form>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

জাভাস্ক্রিপ্ট কেন ব্যবহার করা হয়? (Why use JavaScript?)

ওয়েব ডিজাইন এবং ডেভলপমেন্ট উভয় ক্ষেত্রেই জাভাস্ক্রিপ্ট সমান গুরুত্বপূর্ণ।আপনি তখনই একজন পরিপূর্ণ ডিজাইনার হয়ে উঠবেন যখন এইচ টি এম এল এবং সি এস এস এর পাশাপাশি জাভাস্ক্রিপ্ট ব্যবহার করতে পারবেন। এটা আপনাকে সৃজনশীলতা প্রকাশের সুযোগ সৃষ্টি করে দেবে। ই কমার্স সাইট গুলোতে বিভিন্ন ধরণের পণ্য সিলেক্ট করে এবং তাদের পরিমান নির্ধারণ করে ব্যবহারকারী তার অর্ডারের প্রয়োজনীয় হিসাব দেখতে পারে এধরণের সুবিধা আপনাকে যুক্ত করতে হলে অবশ্যই জাভাস্ক্রিপ্ট এর সুবিধা নিতে হবে। অন্যদিকে বিভিন্ন ধরণের ইন্ট্রাকটিভ ইফেক্ট তৈরিতেও জাভাস্ক্রিপ্ট এর জুড়ি নেই।

জাভাস্ক্রিপ্ট এইচ টি এম এল ডিজাইনারকে প্রোগ্রামিং এর সুযোগ তৈরি করে দেয়

প্রকৃত পক্ষে যারা এইচ টি এম এল এ কোড লেখেন তার প্রোগ্রামার নন। জাভাস্ক্রিপ্ট একটা স্ক্রিপ্টিং ল্যাঙ্গুয়েজ এবং এটা এইচ টি এম এল এর সাথে সরাসরি ইমবেড করা যায়, তাই জাভাস্ক্রিপ্ট প্রোগ্রামিং এর সুযোগ সৃষ্টি করে।

জাভাস্ক্রিপ্ট ওয়েব পেজে ডাইনামিক টেক্সট যুক্ত করার সুযোগ সৃষ্টি করে

document.write(“<h3>” + text + “</h3>”)স্টেটমেন্ট টি ডাইনামিক টেক্সট যুক্ত করার জন্য লেখা হয়েছে। এখানে text নামে একটা ভেরিয়েবল দ্বারা ইউজার বা ব্রাউজারের কাছ থেকে ডাটা নিয়ে তা প্রদর্শনের ব্যবস্থা করা হয়েছে।

জাভাস্ক্রিপ্ট অবস্থা এবং সময় বিবেচনা করে কার্য সম্পাদন করতে পারে

কোন একটা পেজ সম্পূর্ণ লোড হওয়ার সাথে সাথে ইউজারকে একটা ম্যাসেজ প্রদশর্ন করা, কোন ইলিমেন্টে মাউস ক্লিক করলে এলার্ট প্রদর্শন করা, তারিখ এবং সময় অনুযায়ী ভিজিটরদের অভিবাদন করা ইত্যাদি জাভাস্ক্রিপ্ট এর মাধ্যমে করা যায়।

ব্যবহারকারীর পছন্দ অনুযায়ী ডিজাইন নির্বাচন করার সুযোগ দেয়

জাভাস্ক্রিপ্টের মাধ্যমে একজন ব্যবহারকারী তার ইচ্ছা অনুযায়ী কোন একটি পেজের জন্য একাধিক স্ট্যাইল সিটের মধ্যে থেকে একটি নির্বাচন করার সুযোগ পায় অর্থাৎ ব্যবহারকারী নিজের পছন্দ অনুযায়ী ডিজাইন নির্বাচন করাতে পারে।

জাভাস্ক্রিপ্ট এর মাধ্যমে এইচ টি এম এল এ তৈরিকৃত ফরম ভ্যালিডেশন করা হয়

এইচ টি এম এল এর মাধ্যমে তৈরিকৃত কোন ফরমের বিভিন্ন ফিল্ডে একজন ব্যবহারকারী কি ধরণের ডাটা প্রদান করতে পারবেন, প্রতিটি ডাটার আকৃতি এবং গঠন কেমন হবে তা জাভাস্ক্রিপ্ট এর মাধ্যমে নির্ধারণ করা হয়, আর একেই বলা হয় ফরম ভ্যালিডেশন।

জাভাস্ক্রিপ্ট এর মাধ্যমে ব্যবহারকারীর ব্রাউজার নির্দেশ করে

ব্যবহারকারী কোন ব্রাউজার ব্যবহার করছে, তার উপর ভিত্তি করে কোন পেজটি লোড হবে বা পেজের জন্য কোন স্ট্যাইল সিটটি ব্যবহারিত হবে তা জাভাস্ক্রিপ্টের মাধ্যমে যুক্ত করা যায়।

ইন্ট্রাকটিভ ইফেক্ট তৈরি

ফটো গ্যালারি, ইমেজ স্লাইডার, নেভিগেশন বার, এবং বিভিন্ন ব্যানারে টেক্সট ইফেক্ট সহ বিভিন্ন ধরণের ইন্ট্রাকটিভ ইফেক্ট তৈরিতে জাভাস্ক্রিপ্ট ব্যবহার করা হয়।

প্রোগ্রাম লেখার পদ্ধতি (Method of writing program)

জাভাস্ক্রিপ্ট একটি স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ।সাধারণত যে কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ ব্যবহার করে প্রোগ্রাম করার জন্য কম্পাইলার প্রয়োজন হয়। জাভাস্ক্রিপ্ট ব্যবহার করে যদিও ওয়েব পেজে প্রোগ্রাম করা যায় তার পরেও জাভাস্ক্রিপ্ট ব্যবহার করে প্রোগ্রাম তৈরির জন্য বিশেষ কোন কম্পাইলারের প্রয়োজন নেই।জাভাস্ক্রিপ্টে প্রোগ্রাম লেখার জন্য উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepadব্যবহার করলেই চলে, তবে বাড়তি সুবিধা পাওয়ার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা যেতে পারে।

প্রোগ্রাম প্রদর্শন পদ্ধতি

একটা নোটপ্যাড open করে প্রয়োজনীয় প্রোগ্রামের code লিখে HTML ফাইলের সাথে যুক্ত করে HTML ফাইলটি Mozilla Firefox, Internet Explorer, Opera বা Google Crome যে কোন ব্রাউজার দিয়ে প্রদর্শন করা যাবে।জাভাস্ক্রিপ্টে লেখা কোড কিভাবে HTML ফাইলের সাথে যুক্ত করতে হয় তা পরবর্তীতে বিস্তারিত আলোচনা করা হবে।

নিচের এনিমেটেড টেক্সট ইফেক্টটি জাভাস্ক্রিপ্ট HTML ফাইলের সাথে যুক্ত করে তৈরি করা।

এইচ টি এম এল এর সাথে যুক্ত করা (Connect with HTML)

HTML পেজে জাভাস্ক্রিপ্ট যুক্ত করার জন্য <script> </script> স্ক্রিপ্ট ট্যাগ ব্যবহার করা হয়।<script language="Javascript" type="text/javascript">.........</script> এর অনুরূপে লেখা হয়।(............) অংশে প্রয়োজনীয় এবং অন্যান্য কোড সমূহ রাখা হয়।<head> </head> অথবা <body> </body> এর মধ্যে জাভাস্ক্রিপ্ট যুক্ত করা হয়।<head> </head> এর মধ্যে রাখলে তাকে বলা হয় হেডার স্ক্রিপ্ট (header script) আর <body> </body> এর মধ্যে করা হলে তাকে বলা হয় (body script) । সচরাচর <head> </head> এর মধ্যে বিভিন্ন ধরনের ফাংশন তৈরি করা হয় আর <body> </body> এর মধ্যে থেকে ঐ ফাংশনকে প্রয়োজনে কল করা হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
</style>
<script type="text/javascript">
function myClick()
{
alert("Welcome to learning JavaScript.");
}
</script>
</head>
<body>
<button onclick="myClick()">Click Me</button>
</body>
</html>

এক্সটার্নাল জাভাস্ক্রিপ্ট (External JavaScript)

অধিকাংশ প্রফেশনাল প্রজেক্টেই জাভাস্ক্রিপ্টকে আলাদা স্ক্রিপ্টে লেখা হয় এবং পরবর্তীতে প্রয়োজনীয় HTML ফাইলের সাথে লিংক করে দেয়া হয়। এতে করে সুবিধা হচ্ছে যে একই জাভাস্ক্রিপ্ট একাধিক পেজে ব্যাবহার করা যায়।এ ক্ষেত্রে আলাদা পেজে জাভাস্ক্রিপ্ট এর জন্য প্রয়োজনীয় কোড লেখার পর .js এক্সটেনশন দিয়ে save করতে হয় যেমন demo.js। এরপর যে HTML ফাইলে জাভাস্ক্রিপ্ট যুক্ত করতে হবে তার <head> </head> এর মধ্যে <script language="Javascript" type="text/javascript" src="demo.js"></script> src="demo.js" এখানে demo.js এর জন্য প্রয়োজনীয় লিংক যুক্ত করতে হবে। যা../jscript/demo.js বা http://tutorialbd.com/javascript/demo.jsএর অনুরূপ হতে পারে।

প্রজেক্ট এর জাভাস্ক্রিপ্ট অংশ

function myClick()
{
alert("Welcome to learning JavaScript.");
}

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: demo.js দিয়ে, Save as type: All files, দিয়ে save করতে হবে।

প্রজেক্ট এর এইচ টি এম এল অংশ

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
</style>
<script language="Javascript" type="text/javascript" src="demo.js"></script>
</head>
<body>
<button onclick="myClick()">Click Me</button>
</body>
</html>

জাভাস্ক্রিপ্টের প্রথম প্রোগ্রাম (First program of Javascript)

যেকোন প্রোগ্রামিং ল্যাঙ্গুয়েজ এর শেখার শুরুটা করতে হয় ঐ প্রোগ্রামিং ল্যাঙ্গুয়েজ দ্বারা কোন লেখা প্রদর্শন করার মাধ্যমে।জাভাস্ক্রিপ্টের মাধ্যমে কোন লেখা প্রদর্শন করার জন্য <script type="text/javascript"> </script> এর মধ্যে লেখতে হবে document.write("Hello world."); এর অনুরূপ। document.write("Hello world."); দ্বারা ব্রাউজারে Hello world. লেখাটি দেখা যাবে। document.write("Hello world.");এর যেখানে Hello world. লেখাটি রয়েছে সেখানে অন্য যে কোন টেক্সট লেখা যাবে। HTML এর বিভিন্ন ট্যাগও ব্যবহার করা যাবে। যেমনdocument.write("<h1>Welcome to www.tutorialbd.com </h1>"); ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<h1>Welcome to www.tutorialbd.com</h1>");
</script>
</body>
</html>

ওয়েব পেজে লেখা প্রদর্শন করতে জাভাস্ক্রিপ্ট কেন?

একটা প্রশ্ন অনেকেরই মনে হতে পারে HTML দ্বারাই যখন কোন ওয়েব পেজে যেকোন লেখা প্রদর্শন করা যায়, তখন আমরা কেন লেখা প্রদর্শন করতে জাভাস্ক্রিপ্ট ব্যবহার করব? HTML দ্বারা কোন ওয়েব পেজে যেকোন লেখা প্রদর্শন করা সম্ভব হলেও ডাইনামিক টেক্সট প্রদর্শনের জন্য জাভাস্ক্রিপ্ট ব্যবহার করা হয়। কারণ HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজজ নয়, তাই HTML বিভিন্ন ধরণের ডাটা, ভেরিয়েবল, অপারেটর ইত্যাদি নিয়ে কাজ করে না।

অন্যদিকে জাভাস্ক্রিপ্ট প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং ডাটা, ভেরিয়েবল, অপারেটর ইত্যাদি ব্যবহার করে তৈরিকৃত স্টেটমেন্ট অনুযায়ী কাজ করে। তাই জাভাস্ক্রিপ্টে ডাইনামিক ডাটা নিয়ে কাজ করতে হয়। greet নামে একটা ভেরিয়েবলে var greet = "Welcome to "; এর অনুরূপ Welcome to স্ট্রিংটি রাখা হল; এখন Welcome to www.tutorialbd.com,Welcome to www.tutowebs.com, এবং Welcome to www.tutohost.com লেখা তিনটি তিনটি লাইনে প্রদর্শন করকে হবে।

এজন্য document.write( greet + "www.tutorialbd.com <br />" ); document.write( greet + "www.tutowebs.com <br />" ); document.write( greet + "www.tutohost.com" ); ব্যবহার করা হয়েছে প্রতিক্ষেত্রেই greet ভেরিয়েবল দ্বারা Welcome toলেখাটি প্রদর্শিক হচ্ছে,যা HTML দ্বারা করা সম্ভব নয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type="text/javascript">
var greet = "Welcome to ";
document.write( greet + "www.tutorialbd.com <br />" );
document.write( greet + "www.tutowebs.com <br />" );
document.write( greet + "www.tutohost.com" );
</script>
</body>
</html>

স্টেটমেন্ট (Statement)

জাভাস্ক্রিপ্টে স্টেটমেন্ট হচ্ছে ব্রাউজারের জন্য কার্যসম্পাদনের নির্দেশনা।প্রতিটি স্টেটমেন্ট এর শেষ নির্দেশ করা হয় (;) সেমিকলন চিহ্নের মাধ্যমে।যেমনdocument.write("Welcome to www.tutorialbd.com");। সেমিকলন না দিলেও প্রোগ্রাম কাজ করে, কিন্তু ভাল প্রোগ্রামিং এর জন্য সেমিকলন দেয়া উচিৎ। এছাড়া সেমিকলন ব্যবহারের মাধ্যমে একই লাইনে একাধিক স্টেটমেন্ট লেখা যায়। যেমন var greet="Welcome to ";document.write(greet+"www.tutohost.com");

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type="text/javascript">
document.write("Welcome to www.tutorialbd.com <br />");
var greet="Welcome to ";document.write (greet+"www.tutohost.com");
</script>
</body>
</html>

মন্তব্য যুক্ত করার পদ্ধতি (Method to add comment)

যেকোন প্রোগ্রাম তৈরি হয় অসংখ্য ভেরিয়েবল, ফাংশন, বিভিন্ন ধরণের স্টেটমেন্ট এর সমন্বয়ে। প্রয়োজনে একজন প্রোগ্রামারকে অনেক বড় এবং হাজার হাজার লাইনের প্রোগ্রাম লেখতে হয়, তাই প্রোগ্রামের কোন বিশেষ অংশ চিহ্নিত করার জন্য, প্রোগ্রামটি কি উদ্দেশ্যে তৈরি করা হয়েছে, কিভাবে আপডেট করা যাবে, কোন ফাংশন কি কাজ করে, ফাংশন এবং প্রোগ্রামের ব্যবহার পদ্ধতি ইত্যাদি সম্পর্কিত তথ্য পাওয়ার জন্য মন্তব্য খুবই গুরুত্বপূর্ণ।

জাভাস্ক্রিপ্ট দ্বারা একটি প্রোগ্রাম আজ তৈরি করা হলে এবং এতে যদি যথাযথভাবে মন্তব্য যুক্ত করা থাকে তাহলে পাঁচ বছর পরেও যে কোন জাভাস্ক্রিপ্ট প্রোগ্রামার সহজেই বুঝতে পারবে প্রোগ্রামটি কেন লেখা হয়েছে, কিন্তু যদি একটি প্রোগ্রামে কোন মন্তব্য যুক্ত করা না হয় তাহলে নিজের লেখা প্রোগ্রামও দুই মাস পরে অপরিচিত মনে হতে পারে। জাভাস্ক্রিপ্টে মন্তব্য লেখার প্রচলিত দুটি পদ্ধতি রয়েছে।

এক লাইন মন্তব্য (Single line comment)
মাল্টি লাইন মন্তব্য (Multi line comments)

জাভাস্ক্রিপ্টে লেখা মন্তব্য যুক্ত একটি প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
/* When the page will load it show "Good morning" in a alart box . The page will show It is morning.You should learn JavaScript now.Visit www.tutorialbd.com and start to learn JavaScript.*/
alert("Good morning");//alert box will show Good morning.
document.write("It is morning.");
document.write("You should learn JavaScript now.");
document.write("Visit www.tutorialbd.com and start to learn JavaScript.");
</script>
</body>
</html>

এক লাইন মন্তব্য (Single line comment)

জাভাস্ক্রিপ্টে মন্তব্য লেখার দুটি প্রচলিত পদ্ধতি হচ্ছে সিঙ্গেল লাইন মন্তব্য এবং মাল্টি লাইন মন্তব্য । কোন একটি স্টেটমেন্ট স্ক্রিপ্টে লেখা আছে সাময়িক ভাবে স্টেটমেন্টটিকে অকার্যকর করে রাখার জন্য অথবা ঐ স্টেটমেন্ট সম্পর্কিত কিছু তথ্য প্রদান করার জন্য সিঙ্গেল লাইন মন্তব্য ব্যবহার করা হয়। এজন্য প্রচলিত পদ্ধতি হচ্ছে // ডাবল স্লাস চিহ্ন ব্যবহার করা । মন্তব্য যেখান থেকে শুরু হবে সেখানেই // ডাবল স্লাস চিহ্নটি ব্যবহার করতে হবে।

জাভাস্ক্রিপ্টে লেখা মন্তব্য যুক্ত একটি প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
alert("Good morning");//alert box will show Good morning.
document.write("It is morning.");
document.write("You should learn JavaScript now.");
document.write("Visit www.tutorialbd.com and start to learn JavaScript.");
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে // এর পরে লেখা alert box will show Good morning. ব্রাউজারে প্রদর্শিত হচ্ছে না। করণ এটা একটা সিঙ্গল লাইন মন্তব্য।

মাল্টি লাইন মন্তব্য (Multi line comments)

সাধারণত প্রোগ্রামের শুরুতে অথবা কোন ফাংশনের শুরুতে সে সম্পর্কিত বিস্তারিত তথ্য উপস্থাপনের প্রয়োজন হয়, আর এ ক্ষেত্রে মাল্টি লাইন মন্তব্য ব্যবহার করা হয়। এজন্য মন্তব্য এর শুরু নির্দেশ করার জন্য /* স্লাস এবং স্টার চিহ্ন এর পর মন্তব্য এবং শেষে স্টার চিহ্ন এবং স্লাস */ ব্যবহার করা হয়। অর্থাৎ /* This is an example of multi linecomment. This is the second line of this comment.*/ এর অনুরূপ মাল্টি লাইন মন্তব্য যুক্ত করা হয়।

জাভাস্ক্রিপ্টে লেখা মন্তব্য যুক্ত একটি প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
/* When the page will load it show "Good morning" in a alart box . The page will show It is morning.You should learn JavaScript now.Visit www.tutorialbd.com and start to learn JavaScript.*/
alert("Good morning");
document.write("It is morning.");
document.write("You should learn JavaScript now.");
document.write("Visit www.tutorialbd.com and start to learn JavaScript.");
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে /* */ এর পরে লেখা When the page will load it show "Good morning" in a alart box . The page will show It is morning.You should learn JavaScript now.Visit www.tutorialbd.com and start to learn JavaScript. ব্রাউজারে প্রদর্শিত হচ্ছে না। করণ এটা একটা মাল্টি লাইন মন্তব্য।

জাভাস্ক্রিপ্ট কি ওয়ার্ড সমূহ (Javascript keywords)

জাভাস্ক্রিপ্ট এর স্টেটমেন্ট সমূহে বেশ কিছু সাধারণ ওয়ার্ড ব্যবহৃত হয়, যেগুলো দ্বারা জাভাস্ক্রিপ্ট স্টেটমেন্ট সমূহ কম্পাইল হয়। জাভাস্ক্রিপ্ট কি ওয়ার্ড সমূহ সম্পর্কে একজন প্রোগ্রামারের ভাল ধারণা থাকা উচিৎ।কারণ এই কি ওয়ার্ড সমূহ কোন অবজেক্ট, ভেরিয়েবল নেম, ফাংশন নেম হিসেবে ব্যবহার করা যায় না।

জাভাস্ক্রিপ্ট কি ওয়ার্ড সমূহ

Abstract, Boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with.

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #000}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>
<script language="JavaScript1.2">
var message="Welcome to www.tutorialbd.com"
var neonbasecolor="green"
var neontextcolor="red"
var flashspeed=100
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</h1>
</body>
</html>

উপরের প্রোগ্রামটিতে var, if, for, else, function, return ইত্যাদি কি ওয়ার্ড সমূহ ব্যবহার করা হয়েছে।

জাভাস্ক্রিপ্ট ভেরিয়েবল (Javascript Variable)

Variable এর বাংলা অর্থ হচ্ছে চলক। যে কোন প্রোগ্রামিং এর ক্ষেত্রেই ভেরিয়েবল খুব গুরুত্বপূর্ণ একটি বিষয়। প্রোগ্রাম কোডিং এর সময় এমন কিছু রাশি ব্যবহার করতে হয় যার মান মেমরিতে জমা রাখতে হয়, এবং প্রয়োজনে এবং লজিকের ভিত্তিতে প্রসেসিং এর মাধ্যমে এর মান পরিবর্তিত হতে পারে, এগুলোকে ভেরিয়েবল বলে। জাভাস্ক্রিপ্টে ভেরিয়েবল নির্দেশ করার জন্য সাধারণ নিয়ম হিসেবে var কি ওয়ার্ডটি ব্যবহার করা হয়, যদিও না ব্যবহার করলেও চলে। ভেরিয়েবল দুটি দুটি বিশেষ খন্ডে বিভক্ত ১ম খন্ডটি হল ভেরিয়েবল এর নাম এবং অপর খন্ডটি হল ভেরিয়েবলের মান। ভেরিয়েবল এর মান কোন নিউমেরিক সংখ্যা, বুলিয়ান এমনকি স্ট্রিং, এরে বা অবজেক্টও হতে পারে। অনেক সময় শুধুমাত্র ভেরিয়েবলের নাম ঘোষনা করা হয় এবং পরবর্তীতে প্রসেসিং এর সময় মান ধারণ করে।

অনুশীলন প্রজেক্ট

উপরের প্রোগ্রামে a= 10; b=15; এবং a+b=c;এজন্য ব্রাউজারে c এর মান 25 প্রদর্শিত হচ্ছে। এখানে a,b,c তিনটি ভেরিয়েবল।

জাভাস্ক্রিপ্ট ডাটা টাইপ (Javascript data type)

যে কোন প্রোগ্রামিং ল্যাংগুয়েজের জন্যই ডাটা টাইপ একটি গুরুত্বপূর্ণ বিষয়, জাভাস্ক্রিপ্ট এর ক্ষেত্রেও তার ব্যতিক্রম নয়। জাভাস্ক্রিপ্ট একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ হওয়ায় জাভাস্ক্রিপ্ট দিয়ে বিভিন্ন ধরণের গানিতিক এবং লজিক্যাল স্টেটমেন্ট এক্সিকিউশনের মাধ্যমে কাজ করা হয়। এ সকল গানিতিক এবং লজিক্যাল স্টেটমেন্ট তৈরির সময় বিভিন্ন ধরনের ডাটা নিয়ে কাজ করতে হয়। জাভাস্ক্রিপ্টের ডাটা টাইপ সমূহ কে প্রাথমিক পর্যায়ে দুটি ভাগে ভাগ করা হয়। ১. প্রিমিটিভ ডাটা টাইপস (Primitive data types)২.কম্পোজিট ডাটা টাইপস (Composite data types) ।

প্রিমিটিভ ডাটা টাইপ (Primitive data type)

এ ধরণের ডাটাতে সাধারণত একটি মাত্র মান যেমন5.6 বা একটি ক্যারেক্টারের স্ট্রিং অথবা লজিক্যাল ডাটা যেমন true বা false হয়ে থাকে।

নিউমেরিক (Numeric)
স্ট্রিং (string)
বুলিয়ান (Boolean)
নাল (Null)
আনডিফাইন্ড(undefined)

কম্পোজিট ডাটা টাইপ (Composite data type)

কম্পোজিট ডাটা টাইপ কে কমপ্লেক্স ডাটা টাইপও বলা হয়। কম্পোজিট ডাটা টাইপ সমূহ হচ্ছে, অবজেক্ট(object), এরে array, ফাংশন (function)। অবজেক্টের প্রোপার্টি এবং মেথড থাকে, এরেতে পর্যায়ক্রমিক মান থাকে আর ফাংশনে বিভিন্ন স্টেটমেন্ট ধারণ করে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
var a=55;
var b=-99;
var c=077;
var d=0x5C;
var e=567.88;
var f=-256.33;
var g=2.5e3;
var h=1.5e-3;
document.write(a);
document.write("<br >");
document.write(b);
document.write("<br >");
document.write(c);
document.write("<br >");
document.write(d);
document.write("<br >");
document.write(e);
document.write("<br >");
document.write(f);
document.write("<br >");
document.write(g);
document.write("<br >");
document.write(h);
document.write("<br >");
document.write("Welcome");
</script>
</body>
</html>

উপরের প্রোগ্রামের আউটপুটে বিভিন্ন ধরণের ডাটা প্রদর্শিত হচ্ছে।

নিউমেরিক ডাটা টাইপ ( ইন্টিজার )

জাভাস্ক্রিপ্ট ইন্টিজার এবং ফ্লট উভয় ধরনের ডাটা সাপোর্ট করে। ইন্টিজার হচ্ছে সকল ধনাত্নক এবং ঋণাত্নক পূর্ণ সংখ্যা যেমন 55, -99 ইত্যাদি। ইন্টিজার হিসেবে ডেসিমাল (10 ভিত্তিক), অক্টাল (8 ভিত্তিক),হেক্সাডেসিমাল (16 ভিত্তিক) সংখ্যা ব্যবহৃত হয় যেমন যথাক্রমে 159, 0777, 0x5A6F3C ।ডেসিমাল সংখ্যা লেখতে (0-9)পর্যন্ত এই দশটি সংখ্যা ব্যবহার করা হয়।অক্টাল সংখ্যা নির্দেশ করতে জাভাস্ক্রিপ্টে প্রথমে একটা (0)শূণ্য দিতে হয় এরপর(0-7)পর্যন্ত মোট আটটি সংখ্যা ব্যবহার করা হয়। হেক্সা ডেসিমাল সংখ্যা নির্দেশ করতে জাভাস্ক্রিপ্টে প্রথমে (0x)শূণ্য এবং এক্স ব্যবহার করা হয় এর পর 0-9 এবং ABCDEF এই পাঁচটি অক্ষর ব্যবহার করা হয়। অক্টাল 077 অর্থ হচ্ছে ডেসিমাল 63। হেক্সাডেসিমাল 0x5C অর্থ হচ্ছে ডেসিমাল 92।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
var a=55;
var b=-99;
var c=077;
var d=0x5C;
document.write(a);
document.write("<br >");
document.write(b);
document.write("<br >");
document.write(c);
document.write("<br >");
document.write(d);
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে চারটি ইন্টিজার টাইপ ডাটা প্রদর্শিত হচ্ছে।

নিউমেরিক ডাটা টাইপ ( ফ্লট এবং পাওয়ার )

জাভাস্ক্রিপ্ট ইন্টিজার এবং ফ্লট উভয় ধরনের ডাটা সাপোর্ট করে। ফ্লট হচ্ছে সকল ধনাত্নক এবং ঋণাত্নক ভগ্নাংশ সংখ্যা। যেমন -256.33, 567.88 ।কোন বৈজ্ঞানিক বিভিন্ন ধরণের ডাটায় বিভিন্ন ধরণের পাওয়র সংখ্যা ব্যবহার করা হয়। জাভাস্ক্রিপ্টে এ ধরণের সংখ্যা লেখার জন্য e ব্যবহার করা হয় যেমন2.5e3, 1.5e-3।এখানে 2.5e3=2500 এবং 1.5e-3= .0015 ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
var a=567.88;
var b=-256.33;
var c=2.5e3;
var d=1.5e-3;
document.write(a);
document.write("<br >");
document.write(b);
document.write("<br >");
document.write(c);
document.write("<br >");
document.write(d);
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে প্রথম দুটি ফ্লট টাইপ ডাটা এবং পরে দুটি পাওয়র সংখ্যার মান প্রদর্শিত হচ্ছে।

বুলিয়ান টাইপ ডাটা (Boolean type data)

জাভাস্ক্রিপ্টে বুলিয়ান টাইপ ডাটা বলতে বাইনারি ডাটাকে বোঝানো হয়। ইহা দুটি মান ধারণ করতে পারে, যথা true এবং false । 0 দ্বারা falseনির্দেশিত হয়, অনুরূপভাবে 0 ছাড়া যেকোন ধনাত্নক বা ঋনাত্নক বাস্তব সংখ্যা দ্বারা true নির্দেশিত হয়। সাধারণত কোন লজিক্যাল স্টেটমেন্ট এর ফলাফল প্রকাশ করতে বুলিয়ান টাইপ ডাটা ব্যবহার করা হয়।

var a = true; // এখানে a এর বুলিয়ান মান true

var b = false; // এখানে b এর বুলিয়ান মান false

var c = 1; // এখানে c এর বুলিয়ান সমতুল্য মান true

var d = 0; // এখানে d এর বুলিয়ান সমতুল্য মান false

var e = 7; // এখানে e এর বুলিয়ান সমতুল্য মান true

var f = -16; // এখানে f এর বুলিয়ান সমতুল্য মান true

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
var a = true;
var b = false;
var c = 1;
var d = 0;
var e = 7;
var f = - 16;
document.write("<p> A= "+ a +"</p>");
document.write("<p> B= "+ b +"</p>");
document.write("<p> C= "+ c +"</p>");
document.write("<p> D= "+ d +"</p>");
document.write("<p> E= "+ e +"</p>");
document.write("<p> F= "+ f +"</p>");
if( a && b)
{document.write("A and B = True <br />");}
else{document.write("A and B = False <br />");}
if( a && c)
{document.write("A and C = True <br />");}
else{document.write("A and C = False <br />");}
if( a && d)
{document.write("A and D = True <br />");}
else{document.write("A and D = False <br />");}
if( a && e)
{document.write("A and E = True <br />");}
else{document.write("A and E = False <br />");}
if( a && f)
{document.write("A and F = True <br />");}
else{document.write("A and F = False <br />");}
if( c && d)
{document.write("C and D = True <br />");}
else{document.write("C and D = False <br />");}
if( d && e)
{document.write("D and E = True <br />");}
else{document.write("D and E = False <br />");}
if( d && f)
{document.write("D and F = True <br />");}
else{document.write("D and F= False <br />");}
if( c && e)
{document.write("C and E = True <br />");}
else{document.write("C and E = False <br />");}
if( c && f)
{document.write("C and F = True <br />");}
else{document.write("C and F = False <br />");}
if( e && f)
{document.write("E and F = True <br />");}
else{document.write("E and F = False <br />");}
</script>
</body>
</html>

উপরের উদাহরণটিতে var a = true; প্রকাশ করে a ভেরিয়েবলের মান হিসেবে একটি বুলিয়ান সংখ্যা true নির্ধারণ করা হয়েছে।
var b = false; এর মাধ্যমে b ভেরিয়েবলের মান হিসেবে একটি বুলিয়ান সংখ্যা falseনির্ধারণ করা হয়েছে।
var c = 1; এর মাধ্যমে c ভেরিয়েবলের মান হিসেবে একটি ইন্টিজার সংখ্যা 1 নির্ধারণ করা হোয়েছে যা বিভিন্ন কন্ডিশনাল অপারেশনে বুলিয়ান সমতুল্য মান true হিসেবে গণ্য হবে।
var d = 0; এর মাধ্যমে d ভেরিয়েবলের মান হিসেবে 0 নির্ধারণ করা হোয়েছে যা বিভিন্ন কন্ডিশনাল অপারেশনে বুলিয়ান সমতুল্য মান false হিসেবে গণ্য হবে।
var e = 7; এর মাধ্যমে e ভেরিয়েবলের মান হিসেবে একটি ধনাত্নক ইন্টিজার সংখ্যা 7নির্ধারণ করা হোয়েছে যা বিভিন্ন কন্ডিশনাল অপারেশনে বুলিয়ান সমতুল্য মান trueহিসেবে গণ্য হবে।
var f = - 16; এর মাধ্যমে f ভেরিয়েবলের মান হিসেবে একটি ধনাত্নক ইন্টিজার সংখ্যা -16 নির্ধারণ করা হোয়েছে যা বিভিন্ন কন্ডিশনাল অপারেশনে বুলিয়ান সমতুল্য মান true হিসেবে গণ্য হবে।
document.write("<p> A= "+ a +"</p>"); এর মাধ্যমে “A= a ভেরিয়েবলের মান ” প্রদর্শনের ব্যবস্থা করা হয়েছে। ব্রাউজারেA= true প্রদর্শিত হবে।

if( a && b)
{document.write("A and B = True <br />");}
else{document.write("A and B = False <br />");}

প্রকাশ করে a এবং b এর AND অপারেশনের ফলাফল true হলে A and B = True আর false হলে A and B = False ব্রাউজারে প্রদর্শন করবে। যেহেতু a = true এবং b = false সুতরাং ব্রাউজারে A and B = Falseপ্রদর্শিত হবে।
অনুরূপভাবে ব্রাউজারে A and D = Falseপ্রদর্শিত হয় কারণ a = true এবং d = 0 যার বুলিয়ান সমতুল্য মান false ।
ব্রাউজারে A and C = True প্রদর্শিত হয় কারণ a = true এবং C= 1 যার বুলিয়ান সমতুল্য মান true ।
ব্রাউজারে A and E = True প্রদর্শিত হয় কারণ a = true এবং E= 7 যার বুলিয়ান সমতুল্য মান true ।
ব্রাউজারে A and F = True প্রদর্শিত হয় কারণ a = true এবং F= -16 যার বুলিয়ান সমতুল্য মান true ।
ব্রাউজারে C and D = False প্রদর্শিত হয় কারণ C= 1 যার বুলিয়ান সমতুল্য মান trueএবং D= 0 যার বুলিয়ান সমতুল্য মান false ।
ব্রাউজারে D and E = False প্রদর্শিত হয় কারণ D= 0 যার বুলিয়ান সমতুল্য মান falseএবং E= 7 যার বুলিয়ান সমতুল্য মান true ।
ব্রাউজারে D and F= False প্রদর্শিত হয় কারণ D= 0 যার বুলিয়ান সমতুল্য মান falseএবং F= -16 যার বুলিয়ান সমতুল্য মান true।
ব্রাউজারে C and E = True প্রদর্শিত হয় কারণ C= 1 যার বুলিয়ান সমতুল্য মান trueএবং E= 7 যার বুলিয়ান সমতুল্য মান true ।
ব্রাউজারে C and F = True প্রদর্শিত হয় কারণ C= 1 যার বুলিয়ান সমতুল্য মান trueএবং E= 7 যার বুলিয়ান সমতুল্য মান true ।
ব্রাউজারে E and F = True প্রদর্শিত হয় কারণ E= 7 যার বুলিয়ান সমতুল্য মান trueএবং F= -16 যার বুলিয়ান সমতুল্য মান true।

নাল এবং আনডিফাইন্ড ডাটা (Null & undefined data)

প্রোগ্রামিং এর প্রয়োজনে কখনো কখনো আনডিফাইন্ড ভেরিয়েবল এবং ভেরিয়েবলের মান হিসেবে Null ব্যবহার করা হয়। জাভাস্ক্রিপ্টে var price = 40;এর অনুরূপ ভেরিয়েবল ঘোষণা করা হয়। ভেরিয়েবল ঘোষণা করতে var কিওয়ার্ড ব্যবহার করা হয় এর পর ভেরিয়েবল নেম যেমন price তারপর এসাইনমেন্ট অপারেটর = ব্যবহার করা হয় এবং তারপর ভেরিয়েবলের মান দিতে হয়। কখনো কখনো ভেরিয়েবল ঘোষনা করার সময় ভেরিয়েবলের মান নির্ধারণ করা হয় না। এক্ষেত্রে var price; এর অনুরূপ আনডিফাইন্ড ভেরিয়েবল ডিক্লেয়ার করা হয়। এ ধরণের আনডিফাইন্ড ভেরিয়েবল যেমন price কেdocument.write("<p>Web design service : $" + price + ".</p>"); এর অনুরূপ ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হলে Web design service : $undefined. প্রদর্শিত হবে। অর্থাৎ price ভেরিয়েবলের মান undefined । পরবর্তীতে price = 14.40; এর অনুরূপ ভেরিয়েবলের মান নির্ধারণ করে দেয়া যায়।
এরপর document.write("<p>Economy web hosting service : $" + price + ".</p>"); এর অনুরূপ ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হলে Economy web hosting service : $14.4.প্রদর্শিত হবে। অর্থাৎ price ভেরিয়েবলের মান 14.4। এখন price ভেরিয়েবলের মান price = null; এর অনুরূপ শূণ্য বা Null করা যায়। প্রকৃতপক্ষে null= no value । এখন document.write("<p>Tutorial service : $" + price + ".</p>");এর অনুরূপ ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হলে Tutorial service : $null. প্রদর্শিত হবে। অর্থাৎ price ভেরিয়েবলের মান null । এখন পর একটা ভেরিয়েবল var vat=15; এর অনুরূপে ঘোষণা করে document.write("Free service + vat: $"); document.write(price + vat); এর অনুরূপে price এর সাথে যোগ করে ব্রাউজারে প্রদর্শন করলে vat এর মান 15 প্রদর্শিত হবে কারণ price=nullএবং vat=15 অর্থাৎ null+15=15।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:24px;}
</style>
</head>
<body>
<script type = "text/javascript">
var price;
document.write("<p>Web design service : $"
+ price + ".</p>");
price = 14.40;
document.write("<p>Economy web hosting service : $"
+ price + ".</p>");
price = null;
document.write("<p>Tutorial service : $"
+ price + ".</p>");
var vat=15;
document.write("<p>Vat : $"
+ vat + ".</p>");
document.write("Free service + vat = $");
document.write(price + vat);
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ধ্রুবক (Constant)

জাভাস্ক্রিপ্টে প্রোগ্রাম তৈরির ক্ষেত্রে বিভিন্ন প্রয়োজনে ভেরিয়েবল ব্যবহার করা হয়। একই ভেরিয়েবলের মান প্রগ্রামের বিভিন্ন অংশে বিভিন্ন হতে পারে। বিপরীতক্রমে জাভাস্ক্রিপ্ট প্রোগ্রামে ভেরিয়েবলের মতই কনসট্যান্ট বা ধ্রুবক ব্যবহার করা হয়, যার মান প্রগ্রামের সকল অংশে একই থাকে। কনসট্যান্ট বা ধ্রুবক ঘোষণা করার জন্য const কিওয়ার্ড ব্যবহার করা হয়। যেমন const pi = 3.1416; ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
const a = 10;
var b = 10;
document.write("Conostant A = " + a + "<br />");
document.write("Variable B = " + b + "<br />");
a = 70 + 10;
b = 70 + 10;
document.write("<h2> After addition: </h2><br />");
document.write("Conostant A = " + a + "<br />");
document.write("Variable B = " + b + "<br />");
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

উপরের প্রোগ্রামটিতে const a = 10; এর মাধ্যমে একটা কনসট্যান্ট ঘোষণা করা হয়েছে।
var b = 10; এর মাধ্যমে একটা ভেরিয়েবল ঘোষণা করা হয়েছে।
document.write("Conostant A = " + a + "<br />"); এর মাধ্যমে কনসট্যান্টটি ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হয়েছে। ব্রাউজারে Conostant A = 10 প্রদর্শিত হবে।
document.write("Variable B = " + b + "<br />"); এর মাধ্যমে ভেরিয়েবলটি ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হয়েছে। ব্রাউজারে Variable B = 10 প্রদর্শিত হবে।
a = 70 + 10; এর মাধ্যমে কনসট্যান্ট এর প্রাথমিক মান 10 এর সাথে 70 এর যোগকরণ দেখানো হয়েছে। কিন্তু কনসট্যান্ট পরিবর্তিত হয় না, তাই এখনো a = 10 ।
b = 70 + 10; এর মাধ্যমে ভেরিয়েবল এর প্রাথমিক মান 10 এর সাথে 70 এর যোগকরণ দেখানো হয়েছে। ভেরিয়েবল পরিবর্তিত হয়, তাই এখন ভেরিয়েবল b = 80 ।
document.write("Conostant A = " + a + "<br />"); এর মাধ্যমে কনসট্যান্টটি ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হয়েছে। ব্রাউজারে Conostant A = 10 প্রদর্শিত হবে।
document.write("Variable B = " + b + "<br />"); এর মাধ্যমে ভেরিয়েবলটি ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হয়েছে। ব্রাউজারে Variable B = 80 প্রদর্শিত হবে।

অপারেটর ( Operator )

অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজের মতো জাভাস্ক্রিপ্টেও লজিক্যাল, রিলেশনাল এবং গাণিতিক অপারেশন সমূহ সম্পাদনের মাধ্যমে বিশেষ বিশেষ কার্যাবলী সম্পাদনের জন্য প্রোগ্রাম তৈরি করা হয়। আর এই সকল লজিক্যাল, রিলেশনাল এবং গাণিতিক অপারেশন সমূহ সম্পাদনের জন্য বিশেষ কিছু চিহ্ন বা ক্যারেক্টার ব্যবহার করা হয়। যেমন +,-,*,/,<,>,=ইত্যাদি; এসকল চিহ্ন সমূহকেই অপারেটর বলে।

অপারেন্ড ( Operand )

শুধুমাত্র অপারেটর এর কোন মূল্য নেই। অপারেটর বিভিন্ন ধরণের ডাটা, ভেরিয়েবল, সংখ্যা ইত্যাদি নিয়ে কাজ করে। এ সকল ডাটা, ভেরিয়েবল, সংখ্যা সমূহকেই অপারেন্ড বলে। যেমন; যদি লেখা হয়x+y=55; এখানে x,y এবং 55 অপারেন্ড।

অনুশীলন প্রজেক্ট

উপরের প্রোগ্রাটিতে ব্যবহৃত +,=,*,> হচ্ছে অপারেটর। আর a,b,c,d হচ্ছে অপারেন্ড।

অপারেটরের প্রকারভেদ (Types of Operators)

জাভাস্ক্রিপ্টে বিভিন্ন ধরণের অপারেটর ব্যবহৃত হয়।
এগুলো হচ্ছে

এ্যারিথমেটিক অপারেটর (Arithmetic Operator)
এসাইনমেন্ট অপারেটর ( Assignment Operator)
ইনক্রিমেন্ট/ডিক্রিমেন্ট অপারেটর (Increment/decrement Operator)
লজিক্যাল অপারেটর ( Logical Operator)
কমপারিসন অপারেটর ( Comparison Operator)
কনক্যাটেনেশন অপারেটর (Concatenation Operator)
কন্ডিশনাল অপারেটর (Conditional Operator)

অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
var a = 30;
var b = 20;
var c ;
c = ( a + b )*a-b;
document.write("<p>( A + B )× A - B = C = "
+ c + ".</p>");
document.write("<p>A= "
+ a + ".</p>");
document.write("<p>B= "
+ b + ".</p>");
if( a>b ){
document.write("<p>The largest value is A </p>");
}
else{
document.write("<p>The largest value is B</p> ");
}
var d = true;
var e = false;
var f = !e;
document.write( "F = " +f + "<br />" );
var g = d & f;
document.write( "G = " +g+ "<br />" );
for (var i = 0; i < 6; i++)
{
document.write("The value of X is " + i);
document.write("<br />");
}
document.write("<br />");
for (var j = 10; j > 4; j--)
{
document.write("The value of J is " + j);
document.write("<br />");
}
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

উপরের প্রোগ্রামটিতে ব্যবহৃত +,-,* এ্যারিথমেটিক অপারেটর ।
প্রোগ্রামটিতে ব্যবহৃত = এসাইনমেন্ট অপারেটর ।
প্রোগ্রামটিতে ব্যবহৃত ++ ইনক্রিমেন্ট অপারেটর ।
প্রোগ্রামটিতে ব্যবহৃত -- ডিক্রিমেন্ট অপারেটর ।
প্রোগ্রামটিতে ব্যবহৃত <,> কমপারিসন অপারেটর ।
প্রোগ্রামটিতে ব্যবহৃত &,! লজিক্যাল অপারেটর।

এ্যারিথমেটিক অপারেটর (Arithmetic Operator)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এর মাধ্যমে বিভিন্ন ধরণের গাণিতিক অপারেশন যেমন যোগ, বিয়োগ, গুণ, ভাগ ইত্যাদি সম্পাদনের জন্য এ্যারিথমেটিক অপারেটর ব্যবহার করা হয়। উদাহরণ স্বরূপ -a দ্বারা a এর ঋণাত্নকীকরণ (Negation), a + b দ্বারা যোগকরণ (Addition), a - b দ্বারা বিয়োগকরণ (Subtraction), a * b দ্বারা গুণকরণ (Multiplication), a / b দ্বারা ভাগকরণ (Division), a % b দ্বারা মডুলাস (Modulus)প্রকাশ করা হয় ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
var a = 20;
var b = 10;
var c = a+b;
var d = a-b;
var e = a*b;
var f = a/b;
var x = -a;
document.write("<p> A = "
+ a + ".</p>");
document.write("<p> B = "
+ b + ".</p>");
document.write("<p>( A + B ) = C = "
+ c + ".</p>");
document.write("<p>( A - B ) = D = "
+ d + ".</p>");
document.write("<p>( A * B ) = E = "
+ e + ".</p>");
document.write("<p>( A / B ) = F = "
+ f + ".</p>");
document.write("<p>X = -a = "
+ x + ".</p>");
var p =25;
var q =10;
var r =p%q;
document.write("<p>p % Q = R = "
+ r + ".</p>");
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

উপরের প্রোগ্রামটিতে var c = a+b; এর মাধ্যমে যোগকরণ বা Addition দেখানো হয়েছে।
প্রোগ্রামটিতে var d = a-b; এর মাধ্যমে বিয়োগকরণ বা Subtraction দেখানো হয়েছে।
প্রোগ্রামটিতে var e = a*b; এর মাধ্যমে গুণকরণ বা Multiplication দেখানো হয়েছে।
প্রোগ্রামটিতে var f = a/b; এর মাধ্যমে ভাগকরণ বা Division দেখানো হয়েছে।
প্রোগ্রামটিতে var x = -a; এর মাধ্যমে ঋণাত্নকীকরণ বা Negation দেখানো হয়েছে।
প্রোগ্রামটিতে var r =p%q; এর মাধ্যমে মডুলাস Modulus দেখানো হয়েছে। পি এইচ পি তে ভাগশেষ পাওয়ার জন্য মডুলাস করা হয়। এখানে var p=25 এবং var q=10 সুতরাং ভাগশেষ হবে 5 ।

এসাইনমেন্ট অপারেটর ( Assignment Operator)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এ ভেরিয়েবলের মান নির্ধারণ করতে, সমীকরণ তৈরি করতে এসাইনমেন্ট অপারেটর ব্যবহার করা হয়। প্রকৃতপক্ষে বেসিক এসাইনমেন্ট অপারেটর একটা সমান চিহ্ন (=) এর মাধ্যমে প্রকাশ করা হয়। যেমন var a=75; অথবা var b = a + c - d; । এসাইনমেন্ট আপারেটর যদিও একটা সমান চিহ্ন প্রকাশ করে তার পরও প্রকৃতপক্ষে a = b; বলতে var a এর সমান var b প্রকাশ করে না। a = b; প্রকাশ করে যে var a এর মান হিসেবে var b নির্ধারণ করে দেয়া হয়েছে। আরো কিছু এসাইনমেন্ট অপারেটর আছে এগুলো হচ্ছে +=, -=, *=, /=, %= । এখানে a=a+5; এর সংক্ষিপ্ত রূপ হচ্ছে a+=5; । অনুরূপভাবে a=a-5; এর সংক্ষিপ্ত রূপ হচ্ছে a-=5; a=a*5; এর সংক্ষিপ্ত রূপ হচ্ছে a*=5; a=a/5; এর সংক্ষিপ্ত রূপ হচ্ছে a/=5; a=a%5; এর সংক্ষিপ্ত রূপ হচ্ছে a%=5;
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
var a = 20;
a=a+5;
document.write("<p> A = "
+ a + ".</p>");
var aa = 20;
aa+=5;
document.write("<p> A = "
+ aa + ".</p>");
var b = 40;
b=b-5;
document.write("<p> B = "
+ b + ".</p>");
var bb = 40;
bb-=5;
document.write("<p> B = "
+ bb + ".</p>");
var c = 4;
c=c*5;
document.write("<p> C = "
+ c + ".</p>");
var cc = 4;
cc*=5;
document.write("<p> C = "
+ cc + ".</p>");
var d = 30;
d=d/5;
document.write("<p> D = "
+ d + ".</p>");
var dd = 30;
dd/=5;
document.write("<p> D = "
+ dd + ".</p>");
var e = 35;
e=e%8;
document.write("<p> E = "
+ e + ".</p>");
var ee = 35;
ee%=8;
document.write("<p> E = "
+ ee + ".</p>");
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

উপরের উদাহরণটিতে var a = 20; এবং var aa = 20; তাই a=a+5; এবং aa+=5; একই অর্থ প্রকাশ করে। a এবং aa ব্রাউজারে প্রদর্শনের নির্দেশ প্রদান করলে উভয় ক্ষেত্রেই 25 প্রদর্শিত হবে।
উদাহরণটিতে var b = 40; এবং var b = 40; তাই b=b-5; এবং bb-=5;একই অর্থ প্রকাশ করে। b এবং bb ব্রাউজারে প্রদর্শনের নির্দেশ প্রদান করলে উভয় ক্ষেত্রেই 35 প্রদর্শিত হবে।
উদাহরণটিতে var c = 4; এবং var cc = 4; তাই c=c*5; এবং cc*=5; একই অর্থ প্রকাশ করে। c এবং cc ব্রাউজারে প্রদর্শনের নির্দেশ প্রদান করলে উভয় ক্ষেত্রেই 20 প্রদর্শিত হবে।
উদাহরণটিতে var d = 30; এবং var dd = 30; তাই d=d/5; এবং dd/=5; একই অর্থ প্রকাশ করে। d এবং dd ব্রাউজারে প্রদর্শনের নির্দেশ প্রদান করলে উভয় ক্ষেত্রেই 6 প্রদর্শিত হবে।
উদাহরণটিতে var e = 35; এবং var ee = 35; তাই e=e%8; এবং ee%=8; একই অর্থ প্রকাশ করে। e এবং ee ব্রাউজারে প্রদর্শনের নির্দেশ প্রদান করলে উভয় ক্ষেত্রেই 3 প্রদর্শিত হবে।

ইনক্রিমেন্ট/ডিক্রিমেন্ট অপারেটর (Increment/decrement Operator)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এ ইনক্রিমেন্ট এবং ডিক্রিমেন্ট অপারেটর ব্যবহার করা হয়, সাধারণত কোন ভেরিয়েবলের পূর্ব নির্ধারিত মানের পর্যায়ক্রমিক বৃদ্ধি এবং হ্রাস করার জন্য। দুই ধরণের ইনক্রিমেন্ট অপারেটর রয়েছে; যথা a++ ও ++a এর অনুরূপ এবং দুই ধরণের ডিক্রিমেন্ট অপারেটর রয়েছে; যথা a-- ও --a এর অনুরূপ। ++a কে বলা হয় প্রি ইনক্রিমেন্ট (Pre-increment) অপারেটর আর a++ কে বলা হয় পোস্ট ইনক্রিমেন্ট (Post-increment) অপারেটর। অনুরূপভাবে --a কে বলা হয় প্রি ডিক্রিমেন্ট (Pre-decrement) অপারেটর আর a-- কে বলা হয় পোস্ট ডিক্রিমেন্ট (Post-decrement) অপারেটর।

প্রি ইনক্রিমেন্ট (Pre-increment) অপারেটর

ধরা যাক var a=5; var b=++a; এখানে প্রি ইনক্রিমেন্ট (Pre-increment) অপারেটর ব্যবহৃত var b=++a; স্টেটমেন্টটি প্রকাশ করে যে প্রথমে aভেরিয়েবলের মান 5 এর সাথে 1 যোগ হবে অর্থাৎ 5+1=6 হবে এর পর তা b ভেরিয়েবলের মান হিসেবে এসাইন বা গৃহিত হবে। এখন যদি aভেরিয়েবল এবং b ভেরিয়েবলকে ব্রাউজারে প্রদর্শন করা হয়, তাহলে উভয় ক্ষেত্রেই ব্রাউজারে 6 প্রদর্শিত হবে।

পোস্ট ইনক্রিমেন্ট (Post-increment) অপারেটর

ধরা যাক var a=5; var b=a++; এখানে পোস্ট ইনক্রিমেন্ট (Post-increment) অপারেটর ব্যবহৃত var b=a++; স্টেটমেন্টটি প্রকাশ করে যে প্রথমে aভেরিয়েবলের পুরাতন মান 5 var b=a++;স্টেটমেন্টটিতে ব্যবহৃত হবে, অর্থাৎ এক্ষেত্রে প্রথমে bভেরিয়েবলের মান হিসেবে এসাইন বা গৃহিত হবে 5এবং তারপর a ভেরিয়েবলের পুরাতন মান 5 এর সাথে 1 যোগ হবে অর্থাৎ 5+1=6 হবে। এখন যদি aএবং b ভেরিয়েবলকে ব্রাউজারে প্রদর্শন করা হয়, তাহলে ব্রাউজারে a ভেরিয়েবলের মান 6 প্রদর্শিত হবে কিন্তু b ভেরিয়েবলের মান 5 প্রদর্শিত হবে ।

প্রি ডিক্রিমেন্ট (Pre-decrement) অপারেটর

ধরা যাক var a=5; var b=--$a; এখানে প্রি ডিক্রিমেন্ট (Pre-decrement) অপারেটর ব্যবহৃত var b=--a; স্টেটমেন্টটি প্রকাশ করে যে প্রথমে aভেরিয়েবলের মান 5 এর সাথে 1 বিয়োগ হবে অর্থাৎ 5-1=4 হবে এর পর তা b ভেরিয়েবলের মান হিসেবে এসাইন বা গৃহিত হবে। এখন যদি a এবং bভেরিয়েবলকে ব্রাউজারে প্রদর্শন করা হয়, তাহলে উভয় ক্ষেত্রেই ব্রাউজারে 4 প্রদর্শিত হবে।

পোস্ট ডিক্রিমেন্ট (Post-decrement) অপারেটর

ধরা যাক var a=5; var b=$a--; এখানে পোস্ট ডিক্রিমেন্ট (Post-decrement)অপারেটর ব্যবহৃত var b=a--; স্টেটমেন্টটি প্রকাশ করে যে প্রথমে aভেরিয়েবলের পুরাতন মান 5 var b=a--;স্টেটমেন্টটিতে ব্যবহৃত হবে, অর্থাৎ এক্ষেত্রে প্রথমে bভেরিয়েবলের মান হিসেবে এসাইন বা গৃহিত হবে 5এবং তারপর a ভেরিয়েবলের পুরাতন মান 5 এর সাথে 1 বিয়োগ হবে অর্থাৎ 5-1=4 হবে। এখন যদি aএবং b ভেরিয়েবলকে ব্রাউজারে প্রদর্শন করা হয়, তাহলে ব্রাউজারে a ভেরিয়েবলের মান 4 প্রদর্শিত হবে কিন্তু b ভেরিয়েবলের মান 5 প্রদর্শিত হবে ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
document.write("<h2>Pre Increment </h2>");
var a = 5;
document.write("<p> A = "
+ a + ".</p>");
var b=++a;
document.write("<p> For Pre Increment B = "
+ b + ".</p>");
document.write("<p>After Pre Increment A = "
+ a + ".</p>");
document.write("<h2>Post Increment </h2>");
var c = 5;
document.write("<p> C = "
+ c + ".</p>");
var d=c++;
document.write("<p> For Post Increment D = "
+ d + ".</p>");
document.write("<p>After Post Increment C = "
+ c + ".</p>");
document.write("<h2>Pre decrement </h2>");
var p = 5;
document.write("<p> P = "
+ p + ".</p>");
var q=--p;
document.write("<p> For Pre decrement Q = "
+ q + ".</p>");
document.write("<p>After Pre decrement P = "
+ p + ".</p>");
document.write("<h2>Post decrement </h2>");
var x = 5;
document.write("<p> X = "
+ x + ".</p>");
var y=x--;
document.write("<p> For Post decrement Y = "
+ y + ".</p>");
document.write("<p>After Post decrement X = "
+ x + ".</p>");
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

কমপারিসন অপারেটর (Comparison Operator)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এ কমপারিসন অপারেটর (Comparison Operator) ব্যবহার করা হয়, সাধারণত অপারেন্ড তথা ভেরিয়েবল অথবা মান সমূহের মধ্যে তুলনা মূলক বিশ্লেষণ করার জন্য। এ ধরণের তুলনা মূলক বিশ্লেষণের ফলাফল হিসেবে true এবং false এ দুই ধরণের ফলাফল পাওয়া যায়।কন্ডিশনাল এবং লুপিং স্টেটমেন্ট তৈরিতে কমপারিসন অপারেটর (Comparison Operator) গুরুত্বপূর্ণ ভূমিকা পালন করে।

লজিক্যাল অপারেটর সমূহ

অপারেটর	অপারেটরের নাম	উদাহরণ	ফলাফল
==	সমান (Equal)	a==b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি == অপারেটরের উভয় পাশের মান সমান হয়। যেমন var a=5; এবং var b=5; হলে a==b এর ফলাফল true হবে।
===	সমান এবং একই টাইপের (Identical)	a === b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি === অপারেটরের উভয় পাশের মান সমান হয় এবং একই টাইপের হয়। যেমন var a=23; এবং var b=23; হলে a===b এর ফলাফল true হবে। কারণ এখানে a ভেরিয়েবল এবং b ভেরিয়েবল এর মান সমান এবং উভয়ই ইন্টিজার টাইপের।
!=	সমান নয় (Not equal)	a != b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি != অপারেটরের উভয় পাশের মান সমান না হয়। যেমন var a=5; এবং var b=15; হলে a != b এর ফলাফল true হবে।
!==	সমান নয়, অথবা একই টাইপের নয় (Not identical)	a !== b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি !== অপারেটরের উভয় পাশের মান সমান না হয় অথবা একই টাইপের না হয়। যেমন var a=5; এবং var b=15; হলে a !== b এর ফলাফল true হবে। অথবা var a=15; এবং var b=”15”; হলেও a !== b এর ফলাফল true হবে। কারণ b ভেরিয়েবল এর মান স্ট্রিং টাইপের আর a ভেরিয়েবল এর মান ইন্টিজার টাইপের।
<	ক্ষুদ্রতর (Less than)	a < b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি < অপারেটরের বাম পাশের মান ডান পাশের মানের চেয়ে ক্ষুদ্রতর হয়। যেমন var a=5; এবং var b=15; হলে a <b এর ফলাফল true হবে।
>	বৃহত্তর (Greater than)	a >b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি > অপারেটরের বাম পাশের মান ডান পাশের মানের চেয়ে বৃহত্তর হয়। যেমন var a=25; এবং var b=15; হলে a >b এর ফলাফল true হবে।
<=	ক্ষুদ্রতর অথবা সমান (Less than or equal to)	a <= b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি <= অপারেটরের বাম পাশের মান ডান পাশের মানের চেয়ে ক্ষুদ্রতর হয় অথবা সমান হয়। যেমন var a=5; এবং var b=15; হলে a <=b এর ফলাফল true হবে। অথবা var a=5; এবং var b=5; হলেও a <=b এর ফলাফল true হবে।
>=	বৃহত্তর অথবা সমান (Greater than or equal to)	a >= b	তুলনা মূলক বিশ্লেষণের ফলাফল true হবে, যদি >= অপারেটরের বাম পাশের মান ডান পাশের মানের চেয়ে বৃহত্তর হয়। যেমন var a=25; এবং var b=15; হলে a >=b এর ফলাফল true হবে। অথবা var a=15; এবং var b=15; হলেও a >=b এর ফলাফল true হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
//Example For Equal Operator.
var a=5;
var b=5;
document.write("<p> A = "+ a + ".</p>");
document.write("<p> B = "+ b + ".</p>");
if(a == b)
{document.write("<p> Result of A == B is : True .</p>");}
else {document.write("<p> Result of A == B is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Identical Operator.
var c=23;
var d=23;
document.write("<p> C = "+ c + ".</p>");
document.write("<p> D = "+ d + ".</p>");
if(c === d)
{document.write("<p> Result of C === D is : True .</p>");}
else {document.write("<p> Result of C === D is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Not equal Operator.
var e=5;
var f=15;
document.write("<p> E = "+ e + ".</p>");
document.write("<p> F = "+ f + ".</p>");
if(e != f)
{document.write("<p> Result of E != F is : True .</p>");}
else {document.write("<p> Result of E != F is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Not identical Operator.
var g=5;
var h=15;
document.write("<p> G = "+ g + ".</p>");
document.write("<p> H = "+ h + ".</p>");
if(g !== h)
{document.write("<p> Result of G !== H is : True .</p>");}
else {document.write("<p> Result of G !== H is : False .</p>");}
var i="15";
var j=15;
document.write("<p> I = "+ i + ".</p>");
document.write("<p> J = "+j + ".</p>");
if(i !== j)
{document.write("<p> Result of I !== J is : True .</p>");}
else {document.write("<p> Result of I !== J is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Less than Operator.
var k=5;
var l=15;
document.write("<p> K = "+ k + ".</p>");
document.write("<p> L = "+ l + ".</p>");
if(k < l)
{document.write("<p> Result of K < L is : True .</p>");}
else {document.write("Result of K < L is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Greater than Operator.
var m=25;
var n=15;
document.write("<p> M = "+ m + ".</p>");
document.write("<p> N = "+ n + ".</p>");
if(m > n)
{document.write("<p> Result of M > N is : True .</p>");}
else {document.write("Result of M > N is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Less than or equal to Operator.
var o=5;
var p=15;
document.write("<p> O = "+ o + ".</p>");
document.write("<p> P = "+ p + ".</p>");
if(o <= p)
{document.write("<p> Result of O <= P is : True .</p>");}
else {document.write("Result of O <= P is : False .</p>");}
var q=5;
var r=5;
document.write("<p> Q = "+ q + ".</p>");
document.write("<p> R = "+ r + ".</p>");
if(q <= r)
{document.write("<p> Result of Q <= R is : True .</p>");}
else {document.write("Result of Q <= R is : False .</p>");}
</script>
<script type = "text/javascript">
//Example For Greater than or equal to Operator.
var s=25;
var t=15;
document.write("<p> S = "+ s + ".</p>");
document.write("<p> T = "+ t + ".</p>");
if(s >= t)
{document.write("<p> Result of S >= T is : True .</p>");}
else {document.write("Result of S >= T is : False .</p>");}
var u=5;
var v=5;
document.write("<p> U = "+ u + ".</p>");
document.write("<p> V = "+ v + ".</p>");
if(u >= v)
{document.write("<p> Result of U >= V is : True .</p>");}
else {document.write("Result of U >= V is : False .</p>");}
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

লজিক্যাল অপারেটর ( Logical Operator)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এ লজিক্যাল অপারেটর (Logical Operator) ব্যবহার করা হয়, সাধারণত ভেরিয়েবল বা মান এর মধ্যে লজিক্যাল অপারেশন সংগঠনের মাধ্যমে দুইটি বুলিয়ান মান true অথবা false এর কোন একটি ফলাফল হিসেবে গ্রহণ করে এবং ফলাফল এর উপর ভিত্তি করে পরবর্তী অপারেশন সম্পাদনের জন্য। কন্ডিশনাল এবং লুপিং স্টেটমেন্ট তৈরিতে লজিক্যাল অপারেটর ( Logical Operator) গুরুত্বপূর্ণ ভূমিকা পালন করে।

লজিক্যাল অপারেটর সমূহ

অপারেটর	অপারেটরের নাম	উদাহরণ	ফলাফল
!	লজিক্যাল নট (NOT)	!a	a এর মান false হলে,!a=true হবে। অর্থাৎ ভেরিয়েবলের বুলিয়ান মান উল্টা করতে, লজিক্যাল নট (NOT) অপারেটর ব্যবহার করা হয়।
&&	লজিক্যাল এন্ড (AND)	a && b	a এবং b উভয় এর মান true হলে, a && b এর ফলাফল true হবে।
\|\|	লজিক্যাল অর (OR)	a \|\| b	a এবং b উভয় এর এর মধ্যে নূন্যতম একটি ভেরিয়েবলের মান true হলে, a \|\| b এর ফলাফল true হবে।

অনুশীলন প্রজেক্ট

উপরের প্রোগ্রামটিতে var a = false; এর মাধ্যমে একটি ভেরিয়েবলের মান falseনির্ধারণ করা হয়েছে। var b = !a; এর মাধ্যমে লজিক্যাল নট (NOT) অপারেশন সম্পাদন করা হয়েছে। a ভেরিয়েবলকে ব্রাউজারে প্রদর্শন করলে ব্রাউজারে false প্রদর্শন করবে। b ভেরিয়েবলকে ব্রাউজারে প্রদর্শন করলে ব্রাউজারে true প্রদর্শিত হবে।
var c = 15; এবং var d = 25; তাই var p = c < 20; এর ক্ষেত্রে c < 20 এর ফলাফল true যা p ভেরিয়েবলের মান হিসেবে গৃহীত হবে। p ভেরিয়েবলকে document.write("<p>Result of C < 20 is "+ p + ".</p>"); দ্বারা ব্রাউজারে প্রদর্শন করলে ব্রাউজারে Result of C < 20 is true.প্রদর্শিত হবে। অনূরূপভাবে var var q = d > 20; এর ক্ষেত্রে d > 20 এর ফলাফল true যাq ভেরিয়েবলের মান হিসেবে গৃহীত হবে। qভেরিয়েবলকে document.write("<p>Result of D > 20 is "+ q + ".</p>");দ্বারা ব্রাউজারে প্রদর্শন করলে ব্রাউজারে Result of D > 20 is true.প্রদর্শিত হবে। যেহেতু true && true এর ফলাফল true তাই c < 20 && d > 20 এর ফলাফল true । আর এ জন্যই ব্রাউজারে Result of C < 20 && D > 20 is True .প্রদর্শিত হয়।
var var e = 20; এবং var var f = 50;তাই var var x = e < 10; এর ক্ষেত্রে e < 10; এর ফলাফল false যা x ভেরিয়েবলের মান হিসেবে গৃহীত হবে। x ভেরিয়েবলকে document.write("<p>Result of E < 10 is "+ x + ".</p>"); দ্বারা ব্রাউজারে প্রদর্শন করলে ব্রাউজারে Result of E < 10 is false. প্রদর্শিত হবে। অনূরূপভাবে var y = f > 20; এর ক্ষেত্রে f > 20 এর ফলাফল true যা q ভেরিয়েবলের মান হিসেবে গৃহীত হবে। y ভেরিয়েবলকে document.write("<p>Result of F > 20 is "+ y + ".</p>");দ্বারা ব্রাউজারে প্রদর্শন করলে ব্রাউজারে Result of F > 20 is true.প্রদর্শিত হবে। যেহেতু false || true এর ফলাফল true তাই e < 10 || f > 20 এর ফলাফল true । আর এ জন্যই ব্রাউজারে Result of E < 10 || F > 20 is True .প্রদর্শিত হয়।

কনক্যাটেনেশন অপারেটর (Concatenation Operator)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এ কনক্যাটেনেশন অপারেটর (Concatenation Operator) ব্যবহার করা হয়, একাধিক স্ট্রিং, স্ট্রিং এবং যেকোন ভেরিয়েবল কে পাশাপাশি যুক্ত করার জন্য। কনক্যাটেনেশন অপারেটর (Concatenation Operator) দুই ধরণের যথা(+) চিহ্ন এবং (+=) চিহ্ন । যেমন document.write("Hello " + "World"); বা var x=50; document.write("The book has " +x+" pages."); এবং var e="Technology "; e +="tutorials"; ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
document.write("Hello " + "World");
document.write("<br />");
var x=50;
document.write("The book has " +x+" pages.");
document.write("<br />");
var e="Technology ";
e +="tutorials";
document.write(e);
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে document.write("Hello " + "World");এর মাধ্যমে দুইটা আলাদা স্ট্রিং "Hellow"এবং "World" পাশাপাশি কনক্যাটেনেশন অপারেটর (Concatenation Operator)(+) চিহ্ন এর মাধ্যমে যুক্ত করা হয়েছে। ব্রাউজারের মাধ্যমে Hellow World প্রদর্শিত হবে।
প্রোগ্রামটিতে var x=50; এর মাধ্যমে xভেরিয়েবলের মান হিসেবে একটা ইন্টিজার সংখ্যা 50 নির্ধারণ করা হয়েছে। document.write("The book has " +x+" pages."); এখানে "The book has "এবং " pages." দুটি স্ট্রিং এর মাঝে xভেরিয়েবলের মান যুক্ত করার জন্য কনক্যাটেনেশন অপারেটর (+) চিহ্ন ব্যবহার করা হয়েছে। ব্রাউজারের মাধ্যমে The book has 50 pages. প্রদর্শিত হবে।
প্রোগ্রামটিতে var e="Technology "; e.="tutorials"; এর ক্ষেত্রে var e="Technology "; এর মাধ্যমে eভেরিয়েবলের মান হিসেবে এরএকটি স্ট্রিং " Technology " নির্ধারণ করা হয়েছে। e+="tutorials"; প্রকাশ করে e এর পূর্ববর্তী মানের সাথে "tutorials" স্টিং টিও যুক্ত হবে। document.write(e); এর মাধ্যমে eভেরিয়েবলটি ব্রাউজারে প্রদর্শন করলে Technology tutorials প্রদর্শিত হবে।

কন্ডিশনাল স্টেটমেন্ট (Conditional Statement)

জাভাসিস্ক্রপ্টে যুক্তিমূলক কাজ করার জন্য কন্ডিশনাল স্টেটমেন্ট সমূহ ব্যবহার করা হয়। যুক্তিমূলক কাজ বলতে কোন বিশেষ শর্তের উপর এবং শর্তের ফলাফলের উপর ভিত্তি করে কাজ করাকে বোঝানো হয়। বিভিন্ন ধরণের কন্ডিশনাল স্টেটমেন্ট রয়েছে, একজন দক্ষ জাভাস্ক্রিপ্ট প্রোগ্রামার হওয়ার জন্য এ সম্পর্কে বিস্তারিত জ্ঞান থাকা খুবই জরুরী।

কন্ডিশনাল স্টেটমেন্ট সমূহ

if স্টেটমেন্ট - কোন বিশেষ একটা শর্ত সত্য হলে তার ভিত্তিতে একটা বিশেষ কার্য সম্পাদনের জন্য ব্যবহার করা হয়।
if-else স্টেটমেন্ট - কোন বিশেষ একটা শর্ত সত্য হলে তার ভিত্তিতে সুনির্দিষ্ট একটা বিশেষ কার্য আর মিথ্যা হলে অপর একটা কার্য সম্পাদনের জন্য ব্যবহার করা হয়।
else if স্টেটমেন্ট - কোন বিশেষ একটা শর্ত সত্য হলে তার ভিত্তিতে সুনির্দিষ্ট একটা বিশেষ কার্য আর মিথ্যা হলে অপর এক বা একাধিক শর্ত বিশ্লেষণ করে তার উপর ভিত্তি করে একটা বিশেষ কার্য সম্পাদনের জন্য ব্যবহার করা হয়।
switch স্টেটমেন্ট – কোন একটা শর্তের বিভিন্ন ইনপুট এর উপর ভিত্তি করে এক সেট কার্যের মধ্যে থেকে একটা বিশেষ কার্য সম্পাদনের জন্য ব্যবহার করা হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">

document.write("<h2>Example of if statement</h2>");
var a=5;
var b=10;
document.write("A = "+a);
document.write("<br />");
document.write("B = "+b);
document.write("<br />");
if(a<b)
{
document.write("B is greater than from A.");
}
document.write("<br />");
</script>
<script type = "text/javascript">
document.write("<h2>Example of if-else statement</h2>");
var c=25;
var d=20;
document.write("C = "+c);
document.write("<br />");
document.write("D = "+d);
document.write("<br />");
if(c<d)
{
document.write("D is greater than from C.");
}
else
{
document.write("C is greater than from D.");
}
document.write("<br />");
</script>
<script type = "text/javascript">
document.write("<h2>Example of else if statement</h2>");
var x=10;
var y=20;
var z=30;
document.write("X = "+x);
document.write("<br />");
document.write("Y = "+y);
document.write("<br />");
document.write("Z = "+z);
document.write("<br />");
if(x>y)
{
document.write("X is greater than from Y & Z.");
}
else if(y>z)
{
document.write("C is greater than from X & Z.");
}
else
{
document.write("Z is greater than from X & Y.");
}
document.write("<br />");
</script>
<script type = "text/javascript">
document.write("<h2>Example of switch statement</h2>");
var time = 4;
switch(time)
{
case 1:
document.write("It is 1.00 PM.You should take lunch.<br />");
break;
case 2:
document.write("It is 2.00 PM.You should take rest.<br />");
break;
case 3:
document.write("It is 3.00 PM.You can enjoy Move.<br />");
break;
case 4:
document.write("It is 4 PM. You should go to play ground.<br />");
break;
case 5:
document.write("It is 5 PM.You should back home.<br />");
break;
default :
document.write("You should do something because it is"+$time+"PM <br />");
}
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে কন্ডিশনাল স্টেটমেন্ট সমূহের ব্যবহার দেখানো হয়েছে।

লুপিং স্টেটমেন্ট (Looping statement)

জাভাস্ক্রিপ্ট প্রোগ্রামিং এ লুপিং স্টেমেন্ট খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে। মূলত কিছু সংখ্যক স্টেটমেন্ট কে পূণরাবৃত্তি ঘটানোর জন্য লুপিং স্টেটমেন্ট ব্যবহার করা হয়। সুনির্দিষ্ট কিছু শর্তের ভিত্তিতে লুপিং শুরু হয় এবং যতক্ষণ পর্যন্ত শর্তটি বিদ্যমান তাকে ততক্ষণ লুপ চলতে তাকে। একজন দক্ষ প্রোগ্রামার হওয়ার জন্য লুপিং এর ধারণা এবং প্রয়োগ সম্পর্কে বিস্তারিত জ্ঞান থাকা খুবই জরুরী।

লুপিং স্টেটমেন্ট সমূহ

while স্টেটমেন্ট – একটি কন্ডিশনের ভিত্তিতে লুপিং চলতে থাকে। লুপিং এর কন্ডিশন যখন false হয় তখন লুপিং বন্ধ হয়। সিনট্যাক্স while (expression) {statements} ।
do-while স্টেটমেন্ট – while স্টেটমেন্ট এর মতই একটি কন্ডিশনের ভিত্তিতে লুপিং চলতে থাকে। লুপিং এর কন্ডিশন যখন falseহয় তখন লুপিং বন্ধ হয়।কিন্তু পার্থক্য হচ্ছে while স্টেটমেন্ট এ কন্ডিশনটি আগে পরীক্ষা করা হয় আর do-while স্টেটমেন্টে কন্ডিশনটি পরে পরীক্ষা করা হয়। সিনট্যাক্স do {statements} while (expression);
for স্টেটমেন্ট – for স্টেটমেন্টে সচরাচর তিনটি এক্সপ্রেশন ব্যবহার করা হয়। সাধারণত প্রথম এক্সপ্রেশনটি একটা ভেরিয়েবল এর নির্দিষ্ট একটা প্রাথমিক মান গ্রহণের মাধ্যমে শুরু হয়, দ্বিতীয় এক্সপ্রেশনটি লুপটি চালানোর জন্য ভেরিয়েবলের মান সর্বোচ্চ বা সর্বনিম্ন কত হতে পারে তা নির্দেশ করে । আর তৃতীয় এক্সপ্রেশনটি লুপটি পূণরাবৃত্তি ঘটলে ভেরিয়েবলটির মানের পরিবর্তন কেমন হবে তা নির্দেশ করে। সিনট্যাক্স for (expression1; expression2; expression3) {statements}

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
document.write("<h2>Example of while loop</h2>");
var a = 1;
while(a<6)
{
document.write("A = " + a);
document.write("<br />");
a++;
}
</script>
<script type = "text/javascript">
document.write("<h2>Example of do-while loop</h2>");
var b = 1;
do
{
document.write("B = " + b);
document.write("<br />");
b++;
}while(b<6)
</script>
<script type = "text/javascript">
document.write("<h2>Example of for loop</h2>");
var i ;
for( i=1; i<6;i++)
{
document.write("I = " + i);
document.write("<br />");
}
</script>
</body>
</html>

উপরের প্রোগ্রামটিতে লুপিং স্টেটমেন্ট সমূহের ব্যবহার দেখানো হয়েছে।

For-In-Loop এর ব্যবহার

জাভাস্ক্রিপ্টে for-in লুপ ব্যবহার করা হয় এরে ইলিমেন্ট এবং অবজেক্ট এর প্রোপার্টির মধ্যে। for-inলুপের সিনট্যাক্স হচ্ছে for (variable name in object) {statements } ।

উপরের উদাহরণটিতে var oproperty; এর মাধ্যমে একটা for-in লুপের জন্য ভেরিয়েবল ডিক্লেয়ার করা হয়েছে।
for (oproperty in history) প্রকাশ করে যে history অবজেক্ট এর প্রতিটি propertyপর্যায়ক্রমিকভাবে oproperty ভেরিয়েবলের মান হিসেবে গৃহীত হবে।
document.write(oproperty); এর মাধ্যমে oproperty ভেরিয়েবলের মান ব্রাউজারে প্রদর্শন করার নির্দেশ প্রদান করা হয়েছে।
var i; এর মাধ্যমে একটা দ্বিতীয় for-inলুপের জন্য ভেরিয়েবল ডিক্লেয়ার করা হয়েছে।
var name = new Array(); এর মাধ্যমে একটা এরে তৈরি করা হয়েছে যা nameভেরিয়েবলের মান হিসেবে গৃহীত হবে।
name[0] = "Karim"; name[1] = "Rahim"; name[2] = "Manik"; name[3] = "Abdullah"; এর মাধ্যমে এরে উপাদান সমূহ প্রকাশ করা হয়েছে।
for (i in name) প্রকাশ করে যে nameএরে এর প্রতিটি ইলিমেন্ট পর্যায়ক্রমিকভাবে i ভেরিয়েবলের মান হিসেবে গৃহীত হবে।
document.write(name[i] + "<br />");এর মাধ্যমে এরে এর ইলিমেন্ট গুলোকে Iভেরিয়েবলের মান হিসেবে ব্রাউজারে প্রদর্শনের নির্দেশ দেয়া হয়েছে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
document.write("<h2>Example of for-in loop </h2>");
var oproperty;
document.write("<h2>History Object Properties </h2> ");
for (oproperty in history)
{
document.write(oproperty);
document.write("<br />");
}
</script>
<script type="text/javascript">
document.write("<h2>for-in loop in array </h2> ");
var i;
var name = new Array();
name[0] = "Karim";
name[1] = "Rahim";
name[2] = "Manik";
name[3] = "Abdullah";
for (i in name)
{
document.write(name[i] + "<br />");
}
</script>
</body>
</html>

ব্রেক স্টেটমেন্ট (break statement)

For, While, do while ইত্যাদি লুপিং স্টেটমেন্টে কোন একটা লুপের মধ্যে এবং Switch স্টেটমেন্ট এর ক্ষেত্রে কোন বিশেষ শর্ত পূরণ হলে লুপ থেকে বেড়িয়ে আসার জন্য Break স্টেটমেন্ট ব্যবহার করা হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
var number=prompt("You have to find out a secrect number. Please put a number 0-10 ", "");
var i;
for(i=0;i<10;i++)
{
number = parseInt(number);
if(number == 5)
{
document.write("<h2>Hurray!! You have wine.<br /> The secrect number is:"+number+"</h2>")
break;
}
var number=prompt("Please,put a number again");
if(i==9)
{
document.write("<h2>better luck for the next time.</h2>")
}
}
</script>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে Demoপ্রজেক্টটির অনুরূপ প্রদর্শিত হবে।

উপরের উদাহরণটিতে var number=prompt("You have to find out a secrect number. Please put a number 0-10 ", ""); এর মাধ্যমে ব্রাউজারে একটা prompt box(ইউজারের কাছ থেকে ইনপুট গ্রহণের একটা কৌশল) প্রদর্শিত হবে। ইউজারকে 0 থেকে 10 এর মধ্যে একটা সংখ্যা ইনপুট করতে বলবে। ইউজার যে সংখ্যাটি দেবে তা স্ট্রিং টাইপের মান হিসেবে numberভেরিয়েবলে সংরক্ষিত হবে।
var i; এর মাধ্যমে একটা for লুপের জন্য ভেরিয়েবল ডিক্লেয়ার করা হয়েছে।
for(i=0; i<10; i++) এর মাধ্যমে for লুপের জন্য শর্ত নির্ধারণ করা হয়েছে। অর্থাৎ i ভেরিয়েবলের মান শুরুতে 0 থাকবে; i++ এর জন্য প্রতিটা লুপে i এর মান এক বৃদ্ধি পাবে; i<10; অর্থাৎ i এর মান সর্বোচ্চ 9 হতে পারবে। অর্থাৎ লুপটি মোট 10 বার চলবে।
number = parseInt(number); এর মাধ্যমে স্টিং টাইপ numberভেরিয়েবলটিকে ইন্টিজারে পরিবর্তন করা হয়েছে।
if(number == 5) প্রকাশ করে যদি number এর মান 5 হয় তাহলে {} এর মধ্যেকার স্টেটমেন্টগুলো কাজ করবে আর অন্য কোন মান হলে {} এর মধ্যেকার স্টেটমেন্টগুলো এরিয়ে চলে যাবে।
যদি number এর মান 5 হয় তাহলে document.write("<h2>Hurray!! You have wine.<br /> The secrect number is:"+number+"</h2>") এর মাধ্যমে ব্রাউজারে Hurray!! You have wine. The secrect number is:5প্রদর্শিত হবে।
break; স্টেটমেন্টটি মূল for লুপটিকে থামিয়ে দেয়। for লুপের সাধারণ শর্ত ছিলো iএর মান 9 পর্যন্ত লুপটি চলতে থাকবে কিন্তু break; স্টেটমেন্ট কার্যকর হওয়ায় i এর মান যাই হোক না কেন for লুপটি বন্ধ হয়ে যাবে।
যদি যদি number এর মান 5 না হয় তাহলে var number=prompt("Please,put a number again"); এর জন্য নতুন করে number ভেরিয়েবলের মান গ্রহণের জন্য prompt box প্রদর্শিত হবে।
if(i==9){document.write("<h2>better luck for the next time.</h2>")} প্রকাশ করে যে i এর মান 9 হলে ব্রাউজারে better luck for the next time. লেখাটি প্রদর্শিত হবে।

কন্টিনিউ স্টেটমেন্ট (Continue statement)

For, While, Do While ইত্যাদি লুপিং স্টেটমেন্টে কোন একটা লুপের মধ্যে কোন বিশেষ শর্ত পূরণ হলে অসমাপ্ত লুপটি অসমাপ্ত রেখেই পরবর্তী লুপ শুরু করার জন্য Continue স্টেটমেন্ট ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
var i;
for(i=0;i<10;i++)
{
if(i == 5)
{
continue;
}
document.write(" I = "+i+"<br />");
}</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

উপরের উদাহরণটিতে var i; এর মাধ্যমে একটা for লুপের জন্য ভেরিয়েবল ডিক্লেয়ার করা হয়েছে।
for(i=0; i<10; i++) এর মাধ্যমে for লুপের জন্য শর্ত নির্ধারণ করা হয়েছে। অর্থাৎ iভেরিয়েবলের মান শুরুতে 0 থাকবে; i++ এর জন্য প্রতিটা লুপে i এর মান এক বৃদ্ধি পাবে;i<10; অর্থাৎ i এর মান সর্বোচ্চ 9 হতে পারবে। অর্থাৎ লুপটি মোট 10 বার চলবে।
document.write(" I = "+i+"<br />");প্রকাশ করে ব্রাউজারে I= 4 এর অনুরূপ i এর মান প্রদর্শিত হবে।
if(i == 5) প্রকাশ করে যদি i এর মান 5 হয় তাহলে {} এর মধ্যেকার স্টেটমেন্টগুলো কাজ করবে আর অন্য কোন মান হলে {} এর মধ্যেকার স্টেটমেন্টগুলো এরিয়ে চলে যাবে।
if(i == 5){continue;} প্রকাশ করে যদি i এর মান 5 হয় তাহলে {} এর মধ্যে প্রবেশ করার পর continue স্টেটমেন্ট পাবে তাই লুপটি অসমাপ্ত রেখেই পরবর্তী লুপে ফিরে যাবে। অর্থাৎ i=5 এর জন্য document.write(" I = "+i+"<br />");স্টেটমেন্টটি কার্যকর হবে না। অর্থাৎ ব্রাউজারে I=5 প্রদর্শিত হবে না।
লুপটি সম্পূর্ণরূপে শেষ হয়ে যাওয়ার পর ব্রাউজারে I=0 I=1 I=2 I=3 I=4 I=6 I=7 I=8 I=9 প্রদর্শিত হবে; যেখানে I=5অনুপস্থিত।

এরে (Array)

সহজ ভাষায় এরে (Array) হচ্ছে তালিকাযুক্ত ভেরিয়েবল বা ভেরিয়েবলের সারণী। ভেরিয়েবল হচ্ছে ডাটা জমা রাখার জন্য সংরক্ষিত স্থান। কিন্তু সাধারণ ভেরিয়েবলের মাধ্যমে শুধুমাত্র একটা ডাটা জমা রাখা যায়। কিন্তু একই ধরণের অসংখ্য ভেরিয়েবলকে আলাদা আলাদা নামে ডিক্লেয়ার করা একটা জটিল প্রক্রিয়া। এই সমস্যা এরে ব্যবহার করে দূর করা যায়। যেখানে শুধুমাত্র একটা ভেরিয়েবল নামই যথেষ্ঠ। উদাহরণ হিসেবে var name0 = "Rahim"; var name1 = "Karim"; var name2 = "Abdulla"; var name3 = "Manik"; এর পরিবর্তে var name = new Array("Rahim","Karim","Abdulla","Manik"); ব্যবহার করলে একই কাজ হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
document.write("<h2>Example of manual variable</h2>");
var name0 = "Rahim";
var name1 = "Karim";
var name2 = "Abdulla";
var name3 = "Manik";
document.write(name0);
document.write("<br />");
document.write(name1);
document.write("<br />");
document.write(name2);
document.write("<br />");
document.write(name3);
document.write("<br />");
</script>
<script type = "text/javascript">
document.write("<h2>Example of Array </h2>");
var name = new Array("Rahim","Karim","Abdulla","Manik");
document.write(name[0]);
document.write("<br />");
document.write(name[1]);
document.write("<br />");
document.write(name[2]);
document.write("<br />");
document.write(name[3]);
document.write("<br />");
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

এরে তৈরির কৌশল

জাভাস্ক্রিপ্টে এরে তৈরির তিনটি কৌশল রয়েছে। যথা,

Regular Method (সাধারণ পদ্ধতি)
Condensed Method (সংক্ষিপ্ত পদ্ধতি)
Literal Method (আক্ষরিক পদ্ধতি)

Regular Method (সাধারণ পদ্ধতি)

Regular Method এ এরে তৈরির জন্য new Array() ফাংশনটি ব্যবহার করা হয়। যেমন
var name = new Array();
name[0]="Rahim";
name[1]="Karim";
name[2]="Abdulla";
name[2]="Manik";
এর পর প্রতিটা এরে ইলিমেন্ট আলাদা আলাদাভাবে ডিক্লেয়ার করা হয়।

Condensed Method (সংক্ষিপ্ত পদ্ধতি)

Regular Method এর মত Condensed Method এর ক্ষেত্রেও এরে তৈরির জন্য new Array() ফাংশনটি ব্যবহার করা হয়। যেমন
var name = new Array("Rahim","Karim","Abdulla","Manik");
এ পদ্ধতিতে Regular Method এর মত প্রতিটা এরে ইলিমেন্ট আলাদা আলাদাভাবে ডিক্লেয়ার করতে হয় না। এক্ষেত্রে new Array() ফাংশনের আর্গুমেন্ট হিসেবে এরে ইলিমেন্ট সমূহ ডিক্লেয়ার করা হয়।

Literal Method (আক্ষরিক পদ্ধতি)

এ পদ্ধতিতে new Array() ফাংশন ব্যবহারের প্রয়োজন পরে না । শুধুমাত্র [] তৃতীয় বন্ধনী ব্যবহার করা হয়।[] তৃতীয় বন্ধনী [] এর মধ্যেই এরে ইলিমেন্ট সমূহ ডিক্লেয়ার করা হয়। যেমন
var name = ["Rahim","Karim","Abdulla","Manik"];

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
</head>
<body>
<script type = "text/javascript">
document.write("<h2>Example of Regular Array Method </h2>");
var name = new Array();
name[0]="Rahim";
name[1]="Karim";
name[2]="Abdulla";
name[2]="Manik";
document.write(name[0]);
document.write("<br />");
document.write(name[1]);
document.write("<br />");
document.write(name[2]);
document.write("<br />");
document.write(name[3]);
document.write("<br />");
</script>
<script type = "text/javascript">
document.write("<h2>Example of Condensed Method </h2>");
var name = new Array("Rahim","Karim","Abdulla","Manik");
document.write(name[0]);
document.write("<br />");
document.write(name[1]);
document.write("<br />");
document.write(name[2]);
document.write("<br />");
document.write(name[3]);
document.write("<br />");
</script>
<script type = "text/javascript">
document.write("<h2>Example of Literal Method </h2>");
var name = ["Rahim","Karim","Abdulla","Manik"];
document.write(name[0]);
document.write("<br />");
document.write(name[1]);
document.write("<br />");
document.write(name[2]);
document.write("<br />");
document.write(name[3]);
document.write("<br />");
</script>
</body>
</html>

ফাংশন (Function)

সংক্ষিপ্ত অর্থে ফাংশন হচ্ছে কতগুলো স্টেটমেন্ট এর সমষ্টি বা ব্লক। যা একবার তৈরি করে সংক্ষিপ্তরূপে কল করে বারবার প্রোগ্রামের বিভিন্ন স্থানে প্রয়োজন অনুসারে ব্যবহার করা যায়। এতে করে প্রোগ্রামে কোডিং এর পরিমাণ হ্রাস পায়। তাছাড়া বিভিন্ন প্রোগ্রামের বিল্টইন ফাংশন সমূহ একজন প্রোগ্রামার শুধুমাত্র সরাসরি কলকরেই ব্যবহার করতে পারেন, এতে করে প্রোগ্রামিং অনেক সহজ হয়ে এসেছে। আমরা খুব সহজেই অল্প সময়ের মধ্যেই এই সকল বিল্ট ইন ফাংশন সমূহের কার্যকারীতা এবং ব্যবহার পদ্ধতি জেনে দক্ষ প্রোগ্রামার হয়ে উঠতে পারছি। এছাড়া একজন দক্ষ প্রোগ্রামার এর বিশেষ বৈশিষ্ট্য প্রকাশ পায় প্রোগ্রামের মধ্যে প্রয়োজনীয় ইউজার ডিফাইন্ড ফাংশন তৈরি এবং তার সঠিক প্রয়োগের উপর।

ফাংশন তৈরি

ফাংশন তৈরি করার জন্য প্রথমে function কিওয়ার্ড ব্যবহার করা হয়। তারপর ফাংশনের নাম লেখা হয় (যে নামের মাধ্যমে পরবর্তীতে ফাংশনটিকে কল করা হয়) এর পর ফাস্ট ব্রাকেট দিতে হয় । এবং যদি ফাংশনের এক বা একাধিক আর্গুমেন্ট বা প্যারামিটার থাকে তা ফাস্ট ব্রাকেট এর মধ্যে উল্লেখ করতে হয়। তারপর সেকেন্ড ব্রাকেট এর মধ্যে ফাংশনের মূল অংশ(যেখানে কার্য সম্পাদনের জন্য প্রয়োজনীয় স্টেটমেন্ট সমূহ থাকে) লেখা হয়। অর্থাৎ কোন ফাংশনের সিনট্যাক্স হচ্ছে

function FunctionName(Argument1,Argument2)
{
Statement1
Statement2
…………..
}

ফাংশনকে প্রথমে তৈরি করতে হয় এবং তারপর কল করতে হয়। তাইজাভাস্ক্রিপ্টে ফাংশনকে সাধারণত ওয়েব পেজের <head></head> সেকশনের মধ্যেই তৈরি করা হয়, অথবা কোন এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইলে তৈরি করা হয়

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>

প্রোগ্রাম বিশ্লেষণ

উপরের প্রোগ্রামটিতে <head></head>সেকশনের মধ্যে জাভাস্ক্রিপ্টের কোড অন্তর্ভূক্ত করার জন্য <script type = "text/javascript"></script> যুক্ত করা হয়েছে।
function AboutTutohost() এর মাধ্যমে প্রথমে ফাংশন তৈরির জন্য functionকিওয়ার্ড ব্যবহার করা হয়েছে এবং AboutTutohost নামে ফাংশনটির নামকরণ করা হয়েছে।
{ } সেকেন্ড ব্রাকেটের মধ্যে ফাংশনের মূল স্টেটমেন্ট সমূহ লেখা হয়েছে। এখানে দুইটি document.write(); এর মাধ্যমে একটা হেডিং এবং একটা প্যারাগ্রাফ তৈরি করা হয়েছে।
পরবর্তীতে <body></body> সেকশনের মধ্যে <script type = "text/javascript">AboutTutohost();</script> যুক্ত করা হয়েছে। এখানে AboutTutohost(); এর মাধ্যমে <head></head> সেকশনের মধ্যে ডিক্লেয়ার করা ফাংশনটিকে কল করা হয়েছে।
এই ফাংশনটি একটা সহজ সাধারণ ফাংশন যার কোন আর্গুমেন্ট নেই।এবং AboutTutohost() ফাংশনটি কোন ভ্যালু রিটার্ন করে না।

ফাংশন আরগুমেন্টস এবং রিটার্ন ভ্যালু

কিছু কিছু ফাংশনে আরগুমেন্ট ব্যবহার করা হয়। আরগুমেন্টকে ফাংশনের ইনপুট হিসেবে চিন্তা করা যেতে পারে। ফাংশন তৈরিতে প্রথমে functionকিওয়ার্ড ব্যবহার করা হয়। এরপর ফাংশনের নাম লিখে ফাস্ট ব্রাকেটের মধ্যে আর্গুমেন্ট উল্লেখ করতে হয়। একাধিক আর্গুমেন্ট থাকলে কমা (,) ব্যবহার করে আলাদা আলাদাভাবে নির্দেশ করা হয়। আরগুমেন্ট হিসেবে কোন মান, স্ট্রিং, ভেরিয়েবল এমনকি অন্য কোন ফাংশনও ব্যবহৃত হতে পারে। যেমন document.write( Math.abs(-55.69));
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC;
font-size:20px;}
h2{color:#FF0066;}
</style>
<script type = "text/javascript">
function Add_value(value1,value2)
{
var result = value1 + value2;
return result;
}
</script>
</head>
<body>
<script type = "text/javascript">
document.write(Add_value(10,15));
document.write("<br />");
document.write( Math.abs(-55.69));
</script>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রোগ্রাম বিশ্লেষণ

function Add_value(value1,value2)এর মাধ্যমে তৈরিকৃত ফাংশনের নাম Add_value দেয়া হয়েছে ,(value1,value2) দ্বারা ফাংশনের দুটি আরগুমেন্ট নির্দেশ করা হয়েছে।
var result = value1 + value2; এর মাধ্যমে আরগুমেন্ট হিসেবে গৃহীত ভেরিয়েবল দুটিকে যোগ করে result ভেরিয়েবলের মান হিসেবে সংরক্ষণ করার নির্দেশ দেয়া হয়েছে।
return result; এর মাধ্যমে resultভেরিয়েবলের ভ্যালু রিটার্ন করার নির্দেশ দেয়া হয়েছে।
document.write(Add_value(10,15));এর মাধ্যমে দুটি আর্গুমেন্ট 10 এবং 15 ইনপুট করে Add_value() ফাংশনটিকে কল করা হয়েছে। ফলে ব্রাউজারে 10+15=25 অর্থাৎ 25 প্রদর্শিত হবে। যা result এর রিটার্ন ভ্যলু।
document.write( Math.abs(-55.69)); এর ক্ষেত্রে আর্গুমেন্ট হিসেবে ফাংশন ব্যবহার করা হয়েছে। Math.abs(-55.69) এর মাধ্যমে -55.69 এর এবসলিউটমান 55.69 রিটার্ন হবে।

Just Learning...