জাভাস্ক্রিপ্ট টিউটোরিয়াল [পর্ব-০৭] :: জাভাস্ক্রিপ্ট ফাংশন

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

জাভাস্ক্রিপ্ট ফাংশন এ মূলত দুইটি কাজ সম্পন্ন করতে হয়, প্রথমে ফাংশন ডিফাইন করা হয় এর প্রয়োজন অনুযায়ী ফাংশন কার্যকর করা হয় । মূলত ফাংশন কার্যকর করা-ই হচ্ছে ফাংশন কল করা;

জাভাস্ক্রিপ্ট ফাংশন কোথায় রাখবেন

জাভাস্ক্রিপ্ট ফাংশন আপনি ওয়েবসাইট এর <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 লেখাটি দেখতে পারবেন ।

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

Level 0

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


টিউনস


আরও টিউনস


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


টিউমেন্টস