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.