জাভাস্ক্রিপ্ট ফাংশন

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

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

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

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

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

Leave a Reply

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