আসসালামু আলাইকুম । আশা করি সবাই মহান আল্লাহ্ তা'আলার রহমতে ভাল আছেন? আমিও আলহামদুলিল্লাহ্ ভাল আছি । গত পর্বে আমি জাভাস্ক্রিপ্ট এর ষষ্ঠ পর্ব নিয়ে আলোচনা করেছিলাম । আমার গত পর্বের আলোচনার বিষয় ছিল জাভাস্ক্রিপ্ট কন্ডিশনাল স্টেটমেন্ট । যারা গত পর্ব দেখতে মিস করেছেন তাঁরা দয়া করে পড়ে নিবেন । আমার আজকের আলোচনার বিষয় জাভাস্ক্রিপ্ট ফাংশন । টিউটোরিয়ালটি শুরু করার আগে আপনাদের একটা অনুরোধ করি, আমি আপনাদের সুবিধার্থে কোডটুকু লিখে দিয়েছি । আপনারা এখান থেকে কোড সরাসরি কপি না করে, কোডটুকু দেখে নিজে নিজে লিখবেন তাহলে ভালোভাবে শিখতে পারবেন । আর আপনার কোডিং এর দক্ষতা বাড়াতে নিজে নিজে লেখার কোন বিকল্প নেই বলে আমি মনে করি ।
জাভাস্ক্রিপ্ট ফাংশন হলো এমন একটি পদ্ধতি, ওয়েবসাইট এ আপনি কিছু জাভাস্ক্রিপ্ট কোড রাখলেন । পড়ে আপনি তা প্রয়োজন মত ওয়েবসাইট এর বিভিন্ন স্থানে কল করে ব্যবহার করলেন । জাভাস্ক্রিপ্ট ফাংশন আপনি পেইজের যেকোনো স্থানে রাখতে পারেন । এমনকি আপনি চাইলে অন্য পেইজে জাভাস্ক্রিপ্ট ফাংশন রেখে জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করতে পারেন ।
জাভাস্ক্রিপ্ট ফাংশন এ মূলত দুইটি কাজ সম্পন্ন করতে হয়, প্রথমে ফাংশন ডিফাইন করা হয় এর প্রয়োজন অনুযায়ী ফাংশন কার্যকর করা হয় । মূলত ফাংশন কার্যকর করা-ই হচ্ছে ফাংশন কল করা;
জাভাস্ক্রিপ্ট ফাংশন আপনি ওয়েবসাইট এর <head>...</head> এবং <body>...</body> এই উভয় সেকশন এ রাখতে পারেন । কেননা, উভয় স্থান থেকেই ফাংশন ডিফাইন করা যায় । আপনি যদি জাভাস্ক্রিপ্ট <head>…</head> ট্যাগ এর মাঝে রাখেন তাহলে যখন সাইটের ব্যবহারকারী যখন চাইবে তখন জাভাস্ক্রিপ্ট রান হবে । তাই, সবচেয়ে বেশী ভাল হয় জাভাস্ক্রিপ্ট ফাংশন <head>…</head> ট্যাগ এর মাঝে রাখলে ।
জাভাস্ক্রিপ্ট ফাংশন লেখার গঠন হচ্ছে;
function function_name(parameter1, parameter2, parameter3)
{
code to be executed
}
এখানে parameter1, parameter2, parameter3 হচ্ছে প্যারামিটার । প্যারামিটার সব সময় প্রথম বন্ধনীর ভিতরে থাকবে । যদি কোন প্যারামিটার না থাকে তাহলে বন্ধনী ফাঁকা থাকবে । পরবর্তীতে অর্থাৎ নিচে প্যারামিটার সম্পর্কে আরও আলোচনা করা হয়েচে । টিউটোরিয়ালটি মনোযোগ দিয়ে পড়লে প্যারামিটার সম্পর্কে বিস্তারিত জানতে পারবেন ।
জাভাস্ক্রিপ্ট হচ্ছে কেস সেনসিটিভ । তাই, জাভাস্ক্রিপ্ট স্টেটমেন্ট লেখার সময় বড় ও ছোট হাতের অক্ষরের প্রতি বিশেষ নজর রাখবেন । function অবশ্যই ছোট হাতের অক্ষরে লিখতে হবে । ছোট হাতের অক্ষরে না লিখলে এটা কাজ করবে না ।
এখন আমরা একটা উদাহরণ দেখবো; প্রথমে আমি head সেকশন এ ফাংশনটি ডিফাইন করবো । এরপর body সেকশন এ ফাংশনটি কল করবো । বিষয়টি বিস্তারিত ভাবে বুঝতে নিচের কোডটুকু টেক্সট এডিটর এ লিখে index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> JavaScript Function </title>
<script type="text/javascript">
function welcome()
{
alert("Hi I am Jihadur Rahman");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click Here" onclick="welcome()" />
</form>
</body>
</html>
এবার ব্রাউজারে প্রদর্শিত Click Here বাটন এ ক্লিক করলে Hi I am Jihadur Rahman লেখাটি দেখতে পারবেন ।
এবার আমরা আরেকটি উদাহরণ দেখবো । এতক্ষন আমরা যে উদাহরণ দেখেছি সেটাতে লক্ষ্য করলে দেখবেন যে কোন প্যারামিটার নাই । এবার আমরা প্যারামিটার সহ একটি ফাংশন তৈরি করবো । এজন্য নিচের কোডটুকু টেক্সট এডিটর (যেমন; নোটপ্যাড প্লাস প্লাস এ লিখে index.html অথবা যেকোনো নামে সেভ করুন । তবে .html এক্সটেনশনটি ঠিক রাখতে হবে;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> JavaScript Function </title>
<script type="text/javascript">
function age(age1, age2)
{
var result;
result = age1+age2;
return result;
}
var result = age(20,22);
alert(result);
</script>
</head>
<body>
</body>
</html>
এবার উপরের index.html ফাইলটি একটি ব্রাউজারে প্রদর্শন করালে দেখবেন দুটি প্যারামিটার এর যোগফল 42 প্রদর্শিত হয়েছে । কেননা, একটি প্যারামিটার আমি age1 নামে এবং অন্য প্যারামিটার age2 নামে দিয়েছি । প্যারামিটার দুইটির মান যথাক্রমে 20, 22 দিয়েছি । প্যারামিটার দুইটি যোগ করলে (20+22)=42 হবে । তাই, উপরের কোডটুকু প্রদর্শন করার পর 42 লেখাটি প্রদর্শন করেছে । আমি জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে এই কাজটি – ই করেছি ।
এবার আমরা আরেকটি উদাহরণ দেখবো । তাহলে হয়ত আপনারা বিষয়টি আরও ভালভাবে বুঝতে পারবেন । এজন্য নিচের কোডটুকু index.html নামে সেভ করুন;
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> JavaScript Function </title>
<script type="text/javascript">
function about(name, age)
{
alert( name + " is " + age + " years old.");
}
</script>
</head>
<body>
<form>
<input type="button" onclick="about('Jihadur Rahman', 17)" value="Click Here">
</form>
</body>
</html>
এবার ব্রাউজারে প্রদর্শিত Click Here বাটন এ ক্লিক করলে Jihadur Rahman is 17 years old লেখাটি দেখতে পারবেন ।
পরবর্তী টিউটোরিয়াল খুব শীঘ্রই পেয়ে যাবেন - ইনশাল্লাহ্ । সে পর্যন্ত প্র্যাকটিস চালিয়ে যান । ধন্যবাদ সবাইকে টিউটোরিয়ালটি পড়ার জন্য ।
আর একটা কথা, কিছুদিনের মধ্যেই স্ট্যাটিক ওয়েব ডিজাইন এর উপর একটি চেইন টিউন প্রকাশ করতে যাচ্ছি । আশা করি সবাই টেকটিউনস এর সাথেই থাকবেন ।
যদি টিউটোরিয়ালটি পড়ে আপনাদের ভাল লাগে তাহলে কমেন্ট করতে ভুলবেন না । যদি কোন ভুল থাকে আমাকে জানাবেন আমি সংশোধন করে নিব । ধন্যবাদ সবাইকে আমার আজকের টিউটোরিয়ালটি মনোযোগ দিয়ে পড়ার জন্য । পরিশেষ, বলবো ভালোভাবে জাভাস্ক্রিপ্ট ফাংশন প্র্যাকটিস করার জন্য ।
আমাকে ফেইসবুক এ পেতে এখানে ক্লিক করুন ।
ধন্যবাদ সবাইকে মনোযোগ সহকারে আমার আজকের টিউটোরিয়ালটি পড়ার জন্য । ভাল থাকবেন সবাই । আল্লাহ্ হাফেজ ।
আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 12 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
![ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৬] :: এইচটিএমএল ফর্ম এবং এনটাইটি](https://dnc.techtunes.io/tDrive/tuner/cybershot/347449/design.png "ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৬] :: এইচটিএমএল ফর্ম এবং এনটাইটি")
![ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৯] :: সিএসএস কি, কেন? সিএসএস শেখার পূর্বপ্রস্তুতি](https://dnc.techtunes.io/tDrive/tuner/cybershot/348856/design.png "ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-০৯] :: সিএসএস কি, কেন? সিএসএস শেখার পূর্বপ্রস্তুতি")