1. How to learn javascript basic tutorials (js)
  2. javascript syntax (জাভাস্ক্রিপ্ট syntax) how to learn javascript tutorials
  3. জাভাস্ক্রিপ্ট সক্রিয়করন( Javascript tutorials)
  4. javascript Location (Javascript tutorials)
  5. জাভাস্ক্রিপ্ট External (Javascript tutorials)
  6. জাভাস্ক্রিপ্ট ভেরিয়েবল (Javascript tutorials)
  7. Data Type (javascript tutorials)
  8. জাভাস্ক্রিপ্ট অপারেটর (Javascript operator in javascript tutorials)
  9. জাভাস্ক্রিপ্ট ফাংশন (Javascript function tutorials)
  10. How to learn জাভাস্ক্রিপ্ট ইভেন্ট (Javascript event) | SP Foundationbd
  11. জাভাস্ক্রিপ্ট স্টেটমেন্ট (Javascript statement tutorials ) | SP Foundationbd
  12. Javascript If স্টেটমেন্ট tutorials | SP Foundationbd
  13. Javascript Else If statement tutorials | SP Foundationbd
  14. Javascript While লুপ Tutorials | SP Foundationbd
  15. Javascript For loop tutorials | SP Foundationbd
  16. Js মন্তব্য বা Comments | SP Foundationbd
  17. জাভাস্ক্রিপ্ট অ্যারে tutorials | SP Foundationbd
  18. জাভাস্ক্রিপ্ট এলার্ট tutorial | SP Foundationbd
  19. জাভাস্ক্রিপ্ট Confirm tutorials | SP Foundationbd
  20. জাভাস্ক্রিপ্ট Prompt tutorials | SP Foundationbd
  21. জাভাস্ক্রিপ্ট Print tutorials | SP Foundationbd
  22. জাভাস্ক্রিপ্ট রিডাইরেক্ট Tutorials | SP Foundationbd
  23. জাভাস্ক্রিপ্ট Popup tutorials | SP Foundationbd
  24. জাভাস্ক্রিপ্ট ডেট tutorials | SP Foundationbd
  25. জাভাস্ক্রিপ্ট ফর্ম Tutorials | SP Foundationbd
  26. জাভাস্ক্রিপ্ট স্ট্রিং Tutorials | SP Foundationbd
  27. জাভাস্ক্রিপ্ট স্ট্রিং দৈর্ঘ্য | SP Foundationbd
  28. জাভাস্ক্রিপ্ট স্ট্রিং স্প্লিট | SP Foundationbd
  29. জাভাস্ক্রিপ্ট স্ট্রিং সার্চ tutorials | SP Foundationbd
  30. জাভাস্ক্রিপ্ট রিপ্লেস tutorials | SP Foundationbd
  31. জাভাস্ক্রিপ্ট indexOf tutorials | SP Foundationbd
  32. জাভাস্ক্রিপ্ট getElementById tutorials | SP Foundationbd
  33. জাভাস্ক্রিপ্ট innerHTML tutorials | SP Foundationbd
  34. কিছু জরুরী ফাংশন tutorials | SP Foundationbd
  35. setTimeout ফাংশন tutorials | SP Foundationbd

জাভাস্ক্রিপ্ট ফাংশন (Javascript function tutorials)

যেকোন Programming Language শিখতে যান function হচ্ছে তার মুল জিনিসগুলির মধ্যে একটা। সব ল্যাংগুয়েজেই function আছে আর সবখানেই ফাংশনের মুল concept টা একই।তবে সহজ। Function আর কিছুই না শুধু একটা codeblock কে নাম দেয়া। পরে কোডের যেকোন জায়গায় সেই নাম ধরে ডাকলে কোডব্লকটি execute হবে। যেমন নিচে একটা ছোট ফাংশন লিখেছি আর নাম দিয়েছি popup() এবং input ট্যাগের ভিতর এই নাম ধরে ডাক দিয়েছি (এটাকে বলে function কল করা)।

01.<html>

02.<head>

03.<script type="text/javascript">

04.function popup() {

05.alert("Hello spfoundationbd ")

06.}

07.</script>

08.</head>

09.<body>

10.<input type="button" onclick="popup()" value="popup">

11.</body>

12.</html>

এখন বাটনে click করলেই popup() ফাংশনটি কল হবে এবং এর ভিতর সেকেন্ড ব্রাকেটের মধ্যে থাকা কোডটুকু execute হবে। onclick হচ্ছে event । Event এর বিষয়ে এরপরের টিউটোরিয়ালে আলোচনা আছে।


যাইহোক function লেখার সময় প্রথমে function এই শব্দটি এরপর ফাংশনের যেকোন নাম যেমন আমি দিয়েছি popup(). ফাংশনের নাম দেয়ার সময় আপনি ইচ্ছেমত যেকোন নাম দিতে পারেন। আপনি ইচ্ছে করলেই করতে পারেন তার মানে এই নয় যে আপনার এমনই করা উচিৎ। বরং ফাংশনের নাম দেয়ার সময় প্রাসঙ্গিক নাম দেয়া ভাল। যেমন ধরুন দুটি সংখ্যার যোগফল এর মান বের করার জন্য একটা ফাংশন লিখলেন এটার নাম হতে পারে getAddition(). জাভাস্ক্রিপ্টের কিছু সংরক্ষিত নাম আছে, এসব নাম বা শব্দগুলি ফাংশনের নাম কিংবা ভেরিয়েবলের নাম হিসেবে ব্যবহার করা যাবেনা। যেমন with,while ইত্যাদি 

ফাংশনে প্যারামিটার ব্যবহার করা
আপনি যখন function লিখবেন তখন এখানে parametter ব্যবহার করতে পারেন।এই প্যারামিটার প্রথম ব্রাকেটের ভিতর রাখতে হবে,এগুলি একধরনের variable ।যদি কোন প্যারামিটার না থাকে তাহলে প্রথম ব্রাকেটের ভিতর কিছু থাকবেনা।যেমন popup() ফাংশনটি দেখুন এখানে কোন প্যারামিটার নেই। parametter সহ একটি function

01.<html>

  1.  

03.<head>

  1.  

05.<script type="text/javascript">

  1.  

07.function getAddition(firstNumber,secondNumber){

  1.  

09.var result;

  1.  

11.result = firstNumber + secondNumber;

  1.  

13.return result;

  1.  

15.}

  1.  

17.var myResult = getAddition(10,20);

  1.  

19.alert(myResult);

  1.  

21.</script>

  1.  

23.</head>

  1.  

25.<body>

  1.  

27.</body>

  1.  

29.</html>

ব্যাখ্যা: এখানে function টিতে দুটি parametter আছে firstNumber এবং secondNumber.এরপর একটা variable ডিক্লেয়ার করেছি যার নাম result এবং এই ভেরিয়েবলে parametter দুটি যোগ করেছি।সবশেষে result return করেছি।এটা ফাংশনের একটা গুরত্বপূর্ন বৈশিষ্ট্য যে আপনি শুধু একটা মান ফেরৎ (return) পাঠাতে পারেন। return statement ব্যবহার করে এটা করা যায়।

একটা জিনিস মনে রাখতে হবে যে যখন return statement ব্যবহার করবেন তখন এই স্টেটমেন্টের পর আর কোন কোড কাজ করবেনা।একটা ফাংশন return statement দেখলেই সে সংশ্লিষ্ট মান টি রিটার্ন করে code পড়া বন্ধ করে দেয়।

যাইহোক এরপর ১৭ নম্বর লাইনে দেখুন function টিকে কিভাবে কল করেছি।return statement দিয়ে পাঠানো মান এভাবে একটা ভেরিয়েবল ডিক্লেয়ার করে ধরতে হয়।যেমন আমি var myResult দিয়ে করেছি।এরপর alert() function দিয়ে আউটপুট এনেছি।যদি alert(result) দেন তাহলে হবেনা।কারন তো বললামই যে রিটার্নকৃত মান ভেরিয়েবল দিয়ে ধরতে হয়।

সবশেষে getAddition এ দুটি আর্গুমেন্ট পাঠিয়েছি ১০ এবং ২০ কারন parametter দুটি আছে।যতগুলি parametter আছে ফাংশনটি কল করার সময় ততগুলি আর্গুমেন্ট পাঠাতে হবে।

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