Saturday, 20 June 2020

Introduction to Functions in JavaScript.

Introduction to Functions in JavaScript.

Function के benifite :

1 Function में लिखा हुआ code बार-बार लिखना नहीं पड़ता |

2 Function Programmer का समय और script की space बचाता है |


3 बड़े script को छोटे-छोटे function में विभाजित किया जा सकता है |

4 अगर script में कहा पर error आ जाए तो उसे आसानी से निकाला जा सकता है |

5 जहाँ पर जरुरत हो वहाँ पर एक ही function को बार-बार call किया जा सकता है |

Function का use क्यों किया जाता है?

1 इसका use करके आप code के size को reduce कर सकते हो।

2 Function के जरिये आप Code को reuse कर सकते हो।

3 इसके जरिये आप code को छोटे-छोटे parts में divide कर सकते हो।

4 यदि कोइ error भी आता है तो उसे आसानी से find किया जा सकता है।

5 आपको एक ही code को बार-बार लिखने की आवश्कता नहीं होती है।

 

Function कैसा होता है ?

Function एक तरह से Code का एक समूह होता है। जो की किसी विशेष task को पूरा करने के लिए इस्तेमाल किया जाता है।इसका use करके आप same ही code को बार-बार लिखने की आवश्कता नहीं होती है।यानि की आप एक बार function को define कर दो,और जब भी आपको उस code की आवश्कता होगी तो उसे call करवा लो।

 

Function के जरिये आप एक ही code को कई बार इतेमाल कर सकते हो।

Function का एक विशिष्ट नाम होता है | Function की शुरुआत में उसका नाम बाद में दो parethesis () और function के statements दो curly braces {} होते है |

Function Definition

Function को कैसे define किया जाता है?

JavaScript में Function को function keyword द्वारा define किया जाता है।

 

उसके बाद आपको इसमें function का नाम और उसके बाद parentheses () का use करना होगा।

 

आप function का नाम कोइ भी string, Number और sign द्वारा दे सकते हो।

 

यहां पर भी variable के same rule apply होते हैं।

 

उसके बाद आपको curly brackets { } लगाने हैं। अब इमें आप code लिख सकते हो।

 

Syntax:

 

function function_name(arg0, arg1, ........., argN ){

 

// Code is Here

 

}

अब हमं एक Example देख लेते हैं:

<!DOCTYPE html>

<html>

<head>

<title> JavaScript Function</title>

</head>

<body>

<p>Output:</p>

<p id="assig"></p>

<script type="text/javascript">

//This is Function

function func(name, message) {

document.write("Hello " + name+ " "+ message);

}

func("Rohit,", "How are you");//Calling The Function and add values

</script>

 

</body>

</html>

Output:

hello rohit how r u

अब इस code में हमनें सबसे पहले function को define किया है।

 

जसमें हमनें function का नाम func रखा है।

 

वहीं parentheses में हमने दो arguments name और message को पास किया है।

 

उसके बाद हमने curly bracket{ } में document.write द्वारा Output को show करवाया गया।

 

last में हमने function को call करवाया  func() द्वारा।

 

यदि आप function को call नहीं करते हो तो इसकी Output show नहीं होती है ।

 

पहले argument में हमने name की value “Rohit” लिखा और दुसरे में हमनें message की value “How are You” लिखा।

Function Without arguments

Code:

<!DOCTYPE html>

<html>

<head>

<title> JavaScript Function Without parentheses</title>

</head>

<body>

<p>Output:</p>

<p id="assig"></p>

<script type="text/javascript">

function func() {

document.write("Hello, What is your name?");

}

func();

</script>

 

</body>

</html>

Output

what is your name.

JavaScript Function Return

जब भी आपको JavaScript में return statement देखे तो,

 

इसका मतलब है की function की execution वहीं stop हो जाती है।

 

और वह आपके सामने Output को show कर देता है।

 

लेकिन वह output उसी में जाती है जहाँ से function को call करवाया जाता है।

 

अब हमं इसे एक उदाहरण से इसे समझ लेते हैं।

 

Code:

 

<!DOCTYPE html>

<html>

<head>

<title> JavaScript Function Return</title>

</head>

<body>

<p>Output:</p>

<p id="assig"></p>

<script type="text/javascript">

function func(num1,num2) {

return num1+num2;

}

var result = func(10, 20);//Function is called, the value of return store here

document.write(result);

</script>

 

</body>

</html>

Output:

30

अब इस code में हमने function में दो arguments को पास किया है।

 

पहला argument num1 और दूसरा argument num2 है।

 

अब function के अंदर हमने return लिखा और जो दोनों arguments की value होगी उसे plus किया जाएगा।

 

अब जैसे की हमने function को call किया और 10, 20 को हमने num1 और num2 की value execute कर दी।

last में जो solve करके value आएगी वह variable result में store हो जाएगी।

 

और document.write द्वारा आपकी output web page में show हो जाएगी।

 

Function को इस्तेमाल करने से पहले उसकी definition लिखी जाती है | Javascript में अगर Function को create करना हो तो 'function' keyword का इस्तेमाल किया जाता है |

 

Syntax for Function Definition Javascript

function function_name(paramters_list){

            statement(s);

}

 

यहाँ पर function को create करने के लिए 3 चीजे महत्वपूर्ण होती है |

 

function_name : function को create करने के लिए 'function' keyword का इस्तेमाल किया जाता है | Function का नाम कोई Javascript का keyword नहीं हो सकता | Function का नाम statement से सम्बंधित हो तो अच्छा रहता है |

 

paramters_list : Function without parameter(s) के भी हो सकते है | चाहे तो function को parameter(s) भी pass किये जाते है |ये parameter(s) function_name के बाद parenthesis() के अन्दर लिखे जाते है |

 

statement(s) : जो statements बार-बार इस्तेमाल होनेवाले है वो statements यहाँ पर लिखे जाते है |

Functions एक लाइन ऑफ़ कोड का नाम होता है, इसको हम ब्लॉक ऑफ़ कोड भी कहते है, JavaScript में function एक विशेष कार्य को करने के लिए डिज़ाइन किया गया कोड का एक ब्लॉक है।

 

Function को statements का एक समूह भी कहा जाता है. function को script में कहा पर भी लिखा जाता है. जहाँ पर function की जरुरत होती है वहाँ पर Function call किया जाता है. JavaScript या किसी भी प्रोग्रामिंग language में, फ़ंक्शन एक relatively कोड है जिस को आप अपने programs में कहीं पर भी कॉल करा सकते है।

 

एक function किसी भी प्रोग्राम के मान को प्राप्त कर सकता है, और वापस लौटा सकता है, और इस तरह आप हर बार एक ही कोड लिखने और एक modular structured कार्यक्रम बनाने की प्रक्रिया को ignore कर सकते हैं।

 

JavaScript functions की सहायता से आप अपने program को कई task में प्राप्त कर सकते हैं, और functions की सहायता से आप अपने कार्यक्रम को बहुत आसानी से managed कर सकते हैं. JavaScript में functions डिफाइन करना बहुत आसान है JavaScript functions को डिफाइन करने के लिए आप फंक्शन कीवर्ड का यूज़ करते है।

Types Of JavaScript Functions

Pre-Defined या Built-In Functions

 

User-Defined Functions

 

Benefits of JavaScript Function

Function प्रोग्रामर का time और script space दोनों को बचाता है।

 

Function की सहायता से बड़े script को छोटे-छोटे टुकड़ों में विभाजित किया जा सकता है।

 

Function की सहायता से script error को बड़ी आसानी से निकाला जा सकता है।

 

जहाँ पर जरुरत हो वहाँ पर एक ही function को बार-बार call किया जा सकता है।

 

Example

<!DOCTYPE html>

<html>

<body>

 

<h2>This is JavaScript Functions</h2>

 

<p>This exampleis is the define function.</p>

 

<p id="demo"></p>

 

<script>

function myFunction(x12, y15) {

    return x12 * y15;

}

document.getElementById("demo").innerHTML = myFunction(12, 15);

</script>

 

</body>

</html>

Result

This is JavaScript Functions

This exampleis is the define function.

 

180

Example for Function Definition

यहाँ पर function का नाम 'func' है | यहाँ पर कोई parameter pass नहीं किया गया और वहा पर curly braces({}) में statement दिया गया है | जबतक उसे call नहीं किया जाता तब तक उसकी definition invoke नहीं होती |

 

function func(){

                document.write("Hello");

}

 

Function Calling

script में कहा भी function को call किया जाता है | सिर्फ function defined होना जरुरी है |

 

Source Code :

<script type="text/javascript">

function func(){       //function definition

                document.write("Hello");

}

 

func();  //function calling

</script>

Output :

Hello

 

Calling Function with Event

Javascript Event में भी function को call किया जाता है |

 

Source Code :

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

 

function func(){       //function definition

                document.write("Hello");

}

 

</script>

</head>

<body>

<form>

<input type="button" onclick="func()" value="Click me" />

</body>

</html>

Output :

hello

Example of Function

आप जतनी practice करें उतना ही कम हैं।

 

क्युकी यदि आप Web Development/ Web Designing field में आ रहें हैं तो मेहनत को करनी होगी।

 

अब कुछ ओर Function के example देख लेते हैं।

 

पहले हमं code को perform करेंगे फिर उसे समझने की कोशिश करेंगे।

 

Example 1:

 

Code:

 

<!DOCTYPE html>

<html>

<head>

<title> JavaScript Function</title>

</head>

<body>

<p>Output:</p>

<p id="assig"></p>

<script type="text/javascript">

function func(num1,num2) {

return num1+num2;

}

document.getElementById("assig").innerHTML= func(10, 12);//Using Inner HTML and calling function

</script>

 

</body>

</html>

Output:

 

Example Output

22

अब यहां पर हमने Output को Show करवाने के लिए Inner HTML का use किया है।

 

func(10, 12); यानिकी num1 में 10 और num2 में 12 value को store करवाया है।

 

उसके बाद इसकी value को add किया गया,

 

और Output की जो value आई वह paragraph की ID “assign” में show हो रही है।

Example 2:

 

अब हमं code के साथ खेलना शरू करते हैं। मानलीजिये यदि हमं जब last में function को call करते हैं तो,

 

उस में से () ना लगायें तो क्या होगा?

 

Code:

 

<!DOCTYPE html>

<html>

<head>

<title> JavaScript Function</title>

</head>

<body>

<p>Output:</p>

<p id="assig"></p>

<script type="text/javascript">

function func(num1,num2) {

return num1+num2;

}

document.getElementById("assig").innerHTML= func;//Using Inner HTML

</script>

 

</body>

</html>

Output:

 

Example Function Output

 

अब जैसे की आप देख सकते हो की हमने function को call करते समय func() ना लिख कर,

 

func ही लिखा है। तो इसका result आपके सामने है।

JavaScript Local Variable in Function

यदि आप variable को local बनाना चाहते हो तो function के द्वारा किया जा सकता है।

 

Local Variable का यह लाभ है की आप इसे उसी function में ही access कर सकते हो।

 

Code:

 

<!DOCTYPE html>

<html>

<head>

<title> JavaScript Local Function</title>

</head>

<body>

<p>Output:</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script type="text/javascript">

localfunc();

function localfunc(){

var Name = "Rohan";

document.getElementById("demo1").innerHTML= Name;//when local variable access from inside the function

}

document.getElementById("demo2").innerHTML= typeof Name;// When local variable access from outside the function

</script>

 

</body>

</html>

Output: undefined

JavaScript Local Function

 

यहाँ हमें यह पता चल रहा है की जो variable function के अंदर है उसे सिर्फ उसी function से access किया जा सकता है।

 

यदि हमं function के बाहर से access करने की कोशिश करते हैं तो variable को undefined show हो रहा है।


No comments:

Post a Comment

Please Do Not Enter Any Spam Link in the comment Box.