सिर्फ 20 मिनट में Basic जावास्क्रिप्ट सीखें हिंदी में – JavaScript Tutorial in Hindi
कुछ दिनों पहले हमने एक article लिखा था जिसमे हमने आपको जावास्क्रिप्ट के बारे में बताया था की आखिर Javascript क्या है और इसके क्या उपयोग हैं। आज इस article में हम आपके लिए Javascript की basic tutorial लेकर आये हैं जिससे आप जावास्क्रिप्ट की basic fundamentals सीख सकते हैं।
JavaScript दुनिया की सबसे popular programming languages में से एक है।
ऐसे में जाहिर सी बात है की Javascript developers की demand बहुत ज्यादा है इसलिए इसे सीखकर आप एक बेहतर career बना सकते हैं। इसकी सबसे खास बात यह है की इसे सीखना बहुत ही आसान है, यदि आप इस tutorial को सिर्फ 20 मिनट दें तो आप Javascript की basic programming जरुर सीख जायेंगे।
यदि आप Javascript सीखने के लिए तैयार हैं तो आप इस basic tutorial को पढ़कर अभी Javascript में coding करना शुरू कर सकते हैं। आगे हम आपको advanced tutorial भी provide करेंगे इसलिए यदि आप चाहें तो हमारे newsletter को free में subscribe भी कर सकते हैं जिससे आगे के updates आपको आपके email पर मिल जायेंगे।
Contents
JavaScript Tutorial in Hindi – Basic Fundamentals
HTML Script Tag
आप अपने HTML document के head या body section में कहीं पर भी JavaScript program को insert कर सकते हैं इसके लिए आपको <script> tag की जरुरत पड़ेगी।
Example:
<script>
JavaScript code
</script><script> tag के अंदर लिखे गये code को browser automatically एक script की तरह interpret करता है। Script tag के कुछ attributes भी होते हैं जिनके बारे में नीचे दिया गया है, हालांकि इनका उपयोग आजकल बहुत ही कम किया जाता है फिर भी इनके बारे में आपको जानना चाहिए:
Type Attribute:
HTML4 के पुराने standard के अनुसार script tag के अंदर कुछ इस तरह type attribute को लिखा जाता था:
<script type="text/javascript">
JavaScript code
</script>Modern HTML में इस attribute को लिखने की जरुरत नही है।
Language Attribute:
language attribute से यह बताया जाता था की हम कौन सा language use कर रहें हैं। इसे कुछ इस तरह लिखा जाता था:
<script language="javascript">
JavaScript code
</script>HTML के नये version में इसे लिखने की जरुरत नही है क्योंकि <script> tag के अंदर लिखे गये code को नये standard के अनुसार by default JavaScript ही समझा जाता है।
यह भी पढ़ें: सिर्फ 20 मिनट में सीखें HTML हिंदी में
JavaScript Syntax
अब तक आप यह समझ चुके हैं की JavaScript के code को <script> tag के अंदर लिखा जाता है। अब नीचे दिए गये example code के जरिये JavaScript syntax यानी JavaScript में code कैसे लिखा जाता है यह समझने की कोशिश करिए।
Example Code:
<!DOCTYPE HTML>
<html>
<body>
<script>
alert( 'Hello, world!' );
</script>
</body>
</html>इस कोड में हमने body के अंदर script tag में JavaScript का एक code लिखा है जिससे user के screen पर एक dialog box popup होगा जिसमे Hello, world! लिखा होगा।
यहाँ पर ध्यान देने वाली बात यह है की हमने code के बाद semicolon (;) लगाया है लेकिन यदि आप एक line में एक ही code लिख रहे हैं तो यह जरूरी नही है।
alert('Hello');
alert('World');यदि एक line में multiple codes लिखे जा रहे हैं तो सबको अलग-अलग separate करने के लिए हर statement के end में semicolon लगाना पड़ेगा।
alert('Hello'); alert('World');External Script
आप JavaScript की अलग से file बना कर उसमे code लिख सकते हैं और उस file को HTML document में import कर सकते हैं।
HTML में script file को attach करने के लिए <script> tag में src attribute के जरिये उस file का location बताना होता है।
Example:
<script src="/scriptfolder/myscript.js"></script>हम ऊपर वाले कोड में myscript.js नाम की JavaScript file को import कर रहे हैं। code में /scriptfoljs-/myscript.js उस js-ल की location को बताता है।
यदि myscript.js file उसी location पर है जहाँ HTML file है तब हम src=”myscript.js” लिख सकते हैं।
Separate file use करने का एक फायदा यह है की browser इस फाइल को download करने के बाद cache में store कर लेता है और जब भी किसी page को उस file की जरूरत पड़ती है तो उसे फिर से download करने के बजाय सीधे cache से ले लिया जाता है।
कहने का मतलब यह है की यह external script बार-बार download नही होगी जिससे page open होने की speed बढ़ जाएगी।
Javascript Comments
कई बार हमारा program काफ़ी logical हो जाता है या हम कुछ complex code लिख देते हैं और कुछ महीनो बाद जब हम उसे देखते हैं तो उसे समझने में हमें काफ़ी confusion होता है।
ऐसी स्थिति में comment बहुत ही helpful साबित होता है। यदि हम code के बगल में comments लिखकर यह describe कर दें की उस कोड में क्या हो रहा है तो उसे बाद में पढ़कर आप या कोई भी बड़ी आसानी से समझ सकता है।
हम script में कहीं पर भी comment लिख सकते हैं इसका program के execution में कोई भी असर नही पड़ता क्योंकि interpreter इसे ignore कर देता है।
दूसरे programming languages की तरह Javascript में भी दो तरह के comment use किये जा सकते हैं:
1. Single line comment:
यदि आप एक line में कमेंट लिखना चाहते हैं तो आप simply दो forward slash // लगा कर उसके आगे कमेंट लिख सकते हैं।
// This is a single line comment
alert('Hello'); 2. Multiple lines comment:
एक से अधिक line में यदि comment लिखना है तो इसके लिए आप /* और */ का उपयोग करेंगे।
/* This code will not work
alert('Hello');
*/
alert('World');Example में /* और */ के बीच लिखे गये text और code स्क्रीन पर दिखाई नही देंगे।
यदि आप किसी code को temporarily disable करना चाहते हैं तो simply उसे कमेंट बना कर यह काम कर सकते हैं।
Variables
Variable का उपयोग information store करने के लिए होता है। Variable एक तरह से container की तरह होता है जिसमे हम value store कर सकते हैं और जरुरत पड़ने पर उसे use कर सकते हैं।
अन्य programming languages में variable create करने के लिए उसका datatype यानी की उस variable में हम किस प्रकार का data ( जैसे numbers, character, string आदि ) store करने वाले हैं यह बताना जरुरी होता है।
लेकिन Javascript में variable बनाने के लिए variable का datatype बताने की जरुरत नही पड़ती। हम एक वेरिएबल में किसी भी प्रकार का data store कर सकते हैं, जावास्क्रिप्ट उस डाटा का datatype automatically समझ जाता है।
Variable कैसे बनायें?
Javascript में variable बनाने के आप “var” keyword का use कर सकते हैं जो की सबसे पुराना तरीका है। हालांकि “var” के अलावा आप “let” या “const” keyword का भी उपयोग कर सकते हैं जिसके बारे में आप आगे पढेंगे।
यह भी पढ़ें: JavaScript में var, let और const Keywords के बीच क्या अंतर है?
फिलहाल हम “var” का use करके वेरिएबल बनाना सीखेंगे। इसके लिए नीचे कुछ examples दिए गये हैं।
Example:
var username;
var age;
var address;आप चाहें तो एक ही line में multiple variables भी declare कर सकते हैं। जैसे:
var username, age, salary;Variable में value कैसे store करें?
अब ऊपर बनाये गये variables को initialize यानि की value store करना सीखेंगे। इसके लिए नीचे दिये गये examples को देखें।
Example:
var username='Amit';
var age= 25;
var address='Raipur';या हम एक ही line में सभी variables को value assign कर सकते हैं।
var username='Amit', age=25, address='Raipur';Variable create करने के rules:
Javascript में variable बनाने के लिए नीचे दिए गये कुछ नियमों का पालन करना जरुरी है।
- Variable name में पहला character digit या number नही होना चाहिए।
- Name में केवल letter (a to z or A to Z), digit (0-9), symbol ($ या _ ) होने चाहिए।
- जावास्क्रिप्ट में पहले से ही कुछ predefined keywords (reserved words) जैसे class, return, function आदि जिनका उपयोग variable name के रूप में नही कर सकते। Reserved keyword की list आप यहाँ से देख सकते हैं।
Operators
Variables में value store करने के बाद हम उनके बीच कुछ operations जैसे addition, multiplication आदि भी perform कर सकते हैं। इस तरह के operations को perform करने के लिए हमें कुछ symbols (जैसे +, -, *, /, % आदि) use करने होते हैं जिन्हें operators कहा जाता है।
जावास्क्रिप्ट में operators से जुड़े कुछ important terms होते हैं जो की नीचे दिए गये हैं जिनके बारे में आपको जानना जरूर है।
Operand:
जिन elements के साथ operation perform किया जाता है उन्हें operands कहते हैं। उदाहरण के लिए: 5 * 7 जिसमे हम 5 और 7 को multiply कर रहे हैं जहाँ हम 5 को left operand और 7 को right operand कहेंगे।
Unary:
ऐसे operators जो की केवल एक ही operand हो unary operator कहलाते हैं। उदाहरण के लिए -5 जिसमे 5 एक operand है और minus (-) एक unary operator है क्योंकि वह केवल एक ही operand के साथ है।
Binary:
ऐसे operators जिनको operation perform करने के लिए दो operands की जरुरत पड़ती है, binary operator कहलाते हैं। जैसे की + एक binary operator है क्योंकि इसके लिए दो values या variables की जरूरत पड़ती है।
Types of Operators
Javascript में कई प्रकार के operators होते हैं जिनके बारे में नीचे विस्तार से दिया गया है।
Arithmetic Operators
दो variables या values के बीच arithmetic operation perform करने के लिए arithmetic operators का उपयोग किया जाता है। इनके बारे में नीचे दिया गया है।
| Operator | Description | Example |
|---|---|---|
| + | Addition | 10+20=30 |
| – | Subtraction | 15-10=5 |
| * | Multiplication | 5*2=10 |
| / | Division | 8/2=4 |
| % | Modulus (Remainder) | 5%2=1 |
JavaScript Comparison Operators
Comparison Operators से दो operands को आपस में compare किया जाता है। Comparison operators कुछ इस प्रकार के होते हैं:
| Operator | Description | Example | |
|---|---|---|---|
| == | Is equal to (दोनो values बराबर हैं) | 20==30 = false | |
| != | Not equal to (दोनो values बराबर नही हैं) | 20!=30 = true | |
| === | Identical (दोनो values बराबर हैं और एक ही type के हैं) | 5===2=false क्योंकि दोनों के type तो same हैं लेकिन values बराबर नही हैं 5===”5″=false क्योंकि दोनों के type same नही हैं| यहाँ पर 5 एक digit है जबकि “5” एक character (single alphabet) है | |
| !== | Not Identical | 5 === 2 = true 5===”5″=true | |
| < | Less than | 10<20 td=”” true=””> | |
| > | Greater than | 10>20= false | |
| <= | Less than equal to (पहली value दूसरी से छोटी या बराबर है) | 10<=20=true 10>=10=true | |
| => | Greater than equal to (पहली value दूसरी से बड़ी या बराबर है) | 10>=20=false 10>=10=true |
Logical Operator
Logical operations perform करने के लिए नीचे दिए गये कुछ logical operators का उपयोग किया जाता है।
| Operator | Description | Example |
|---|---|---|
| && | Logical AND (operator के दोनो तरफ के expressions के value यदि true हैं तो output true होगा otherwise false होगा) | (20<30 && 30>20)=true |
| || | Logical OR (दोनो में से किसी भी एक expression की value true होने पर output true होगा और दोनों के false होने पर output false होगा) | (10>30 || 30<40)=true |
| ! | Logical Not (यह single operand पर apply होता है और value को उल्टा कर देता है यानि false को true और true को false में बदल देता है) | !(5>2)=false |
Assignment Operators
किसी variable में value assign करने के लिए assignment operator (=) का उपयोग होता है। JS में use होने वाले assignment operators के बारे में नीचे दिया गया है।
| Operator | Description | Example |
|---|---|---|
| = | Assign | var a=10; var b=20; var c; a+b=c c=30 |
| += | Add and Assign – (दोनों side के values को add करके left side वाले variable में store कर देता है) | var a=10; a+=20; a = 30 |
| -= | Subtract and Assign (left side वाले variable की value से right side वाले variable की value को घटा कर left side वाले variable में store कर देता है) | var a=20; a-=5; a = 15 |
| *= | Multiply and Assign (दोनों side के values को multiply करके left side वाले variable में store कर देता है) | var a=10; a*=5; a = 50 |
| /= | Divide and Assign | var a=10; a/=5; a = 2 |
| %= | Modulus and Assign (left value को right value से divide करने के बाद remainder (शेष) को left variable में assign कर देता है) | var a=10; a%=3; a = 1 |
Bitwise Operators
Bitwise operator bit यानी binary number (0, 1) के आधार पर काम करता है। यह दिए गये input को binary में convert करके calculation करता है और output को फिर से decimal number में convert करके return करता है।
| Operator | Description |
|---|---|
| & | Bitwise AND ( अगर दोनों bits की value 1 हैं तो output 1 होगा नही तो 0 होगा ) |
| | | Bitwise OR ( अगर दोनों में से एक भी bit 1 है तो output 1 होगा ) |
| ^ | Bitwise XOR ( अगर दोनों में से केवल एक bit की value 1 है तो output 1 होगा ) |
| ~ | Bitwise NOT ( प्रत्येक बिट को उल्टा कर देता है यानी 0 को 1 और 1 को 0 में बदल देता है ) |
| << | Bitwise Left Shift ( सभी बिट्स को left की तरफ shift कर दिया जाता है, कितना shift किया जायेगा यह right side की value से निर्धारित होता है) |
| >> | Bitwise Right Shift ( सभी बिट्स को right की तरफ shift कर दिया जाता है, कितना shift किया जायेगा यह right side की value से निर्धारित होता है ) |
Example:
| Operation | Result | Binary Value | Binary Result |
|---|---|---|---|
| 8 & 10 | 8 | 1000 & 1010 | 1000 |
| 8 | 10 | 10 | 1000 | 1010 | 1010 |
| 8 ^ 10 | 2 | 1000 ^ 1010 | 0010 |
| ~ 10 | -11 | 1010 | 0101 |
| 5 << 1 | 10 | 0101 << 1 | 1010 |
| 5 >> 1 | 2 | 0101 >> 1 | 0010 |
Conditional (Ternary) Operator
कभी-कभी हमें किसी condition के आधार पर variable में value assign करना होता है। Conditional operator जिसे Ternary operator भी कहा जाता है जिसके जरिये हम यह काम आसानी से कर सकते हैं।
इसका syntax कुछ इस प्रकार होता है:
variablename = (condition) ? value1:value2;जहाँ हम question mark ? और colon : का use करते हैं। हम brackets () के अंदर कोई condition रखते हैं जब यह condition true होता है तो colon से पहली वाली value return होती है और जब condition false होता है तब colon के बाद की value return होती है।
Example
largestvalue = (20>10) ? 20:10;
alert(largestvalue);If-else Statement
Javascript में If-else statement के जरिये किसी condition को evaluate किया जाता है और यह तय किया जाता है की condition के true या false होने पर कौन से code execute होंगे। नीचे If-else statement के तीन अलग-अलग प्रकार दिए गये हैं जिनका हम जरुरत के अनुसार अपने program में उपयोग कर सकते हैं।
- If statement
- If else statement
- If else if statement
If statement
इस statement में यदि दिया गया condition true हो जाता है तो bracket के अंदर लिखे गये code execute हो जाते हैं और condition false होने पर bracket के अंदर के code को skip कर दिया जाता है।
Syntax:
if (condition){
// code to be executed
}Example:
if(a>b){
alert("a ki value b ki value se bdi hai!");
}If else statement
इस statement में if की तरह condition के true होने पर bracket का code execute तो होता ही है लेकिन false होने पर else वाला part execute हो जाता है। यानि की इस statement में हम true और false दोनों conditions के लिए code लिख सकते हैं।
Syntax:
if (condition){
// code to be executed
}Example:
if(a>b){
alert("a ki value b ki value se bdi hai!");
}
else{
alert("a ki value b ki value se chhoti hai!");
}If else if statement
यदि हम एक से अधिक conditions check करना चाहते हैं तो इसके लिए if else if statement का उपयोग कर सकते हैं।
Syntax:
if (condition){
// code to be executed
}
else if (condition){
// code to be executed
}
else if (condition){
// code to be executed
}
else{
// code to be executed
}Example:
if(marks>89){
alert("Papa - shabash!!");
}
else if(marks>80){
alert("Papa - Kuch seekh ! Sharma ji ke bete ka 90% aya hai");
}
else{
alert("Papa - Nalayak...gadhe....kya kami rah gyi thi mere sanskaro me.. ");
}Switch Statement
हम multiple if statements की जगह Switch statement का use कर सकते हैं। इसमें किसी expression को evaluate किया जाता है और उसकी value को अलग-अलग case से compare किया जाता है जो case match हो जाता है उससे जुड़ा code block execute हो जाता है।
यदि कोई case match न हो तो ऐसी स्थिति में default case वाला code execute हो जाता है।
आप इसे नीचे उदाहरण में अच्छे से समझ सकते हैं।
Syntax:
switch(expression){
case value1:
// code to be executed
break;
case value2:
// code to be executed
break;
default:
// code to be executed
}Example:
var grade='B';
switch(grade){
case 'A':
alert("Good Job");
break;
case 'B':
alert("Pretty Good");
break;
case 'C':
alert("Passed");
break;
case 'F':
alert("Failed");
break;
default:
alert("No Grade");
}चलिए अब इस example को समझते हैं:
- सबसे पहले हमने grade नाम का एक variable बनाया जिसकी value हमने B रखी।
- अब हम इसे अलग-अलग cases से compare करेंगे।
- पहले case में check किया की grade की value ‘A’ है या नही…condition false क्योंकि grade की value ‘B’ है।
- दुसरे case में हमने value ‘B’ के लिए चेक किया…condition true…colon के बाद वाला code execute होगा और alert function के जरिये एक popup में “Pretty Good” print होगा।
- इसके बाद break statement execute होगा और switch statement के बाकी cases skip हो जायेंगे।
Grouping of Case
कई बार कुछ cases ऐसे होते हैं जिनके code blocks common होते हैं ऐसी स्थिति हम उन cases का group बना सकते हैं। इसका example आप नीचे देख सकते हैं।
var value=5;
switch(value){
case 1:
case 2:
alert("The number is less than 3");
break;
case 3:
case 4:
alert("The number is less than 5");
break;
default:
alert("Error!!");
}Javascript Loops
Programming में कई बार हमें एक ही action को बार-बार perform करना पड़ता है ऐसे situation में हम loop का उपयोग करते हैं।
Loop के जरिये हम एक ही code को बार-बार execute कर सकते हैं। यह repetitive task को आसान बना देता है।
उदाहरण के लिए यदि हम 1 से 100 के बीच की सारी सम संख्याओं को एक के बाद एक print करना चाहते हैं तो यह काम loop के जरिये बड़ी आसानी से कुछ ही लाइन के कोड से कर सकते हैं।
Javascript में mainly teen प्रकार के loop होते हैं:
- while loop
- do…while loop
- for loop
while loop:
इस loop में हम किसी code को बार-बार execute करते हैं जब तक की दिया गया condition false नही हो जाता।
Syntax:
while(condition){
//code
}Example:
var i = 0;
while (i < 10){
alert(i);
i++;
}
इस example में हमने एक variable i लिया जिसे 0 से initialize किया अब while में condition डाला i<10 यानि की यह loop तब तक चलेगा जब तक i की value 10 से कम रहेगी।
हम i++ के जरिये value को increase करते जाते हैं और alert के जरिये 0 से 9 तक value को print करते जाते हैं।
do…while loop:
यह भी while loop की तरह ही है बस इतना ही अंतर है की इसमें condition true हो या false दिया गया code कम से कम एक बार जरूर execute होता है।
Syntax:
do{
//code
}while(condition);
Example:
var i = 0;
do{
alert(i);
i++;
}while (i < 10);
for loop:
for loop सबसे ज्यादा use होने वाला loop है। इसके तीन important parts होते हैं:
- Initialization: variable की starting value देना।
- Condition: लूप के लिए condition define करना।
- Iteration: variable की value को increment या decrement करना।
Syntax:
for (initialization; condition; increment/decrement){
//code
}
Example:
for(var i=0; i<10; i++){
alert(i);
}Function
कई बार हमें अपने प्रोग्राम में किसी एक ही task को अलग-अलग जगहों पर बार बार perform करना पड़ता है।
ऐसी स्थिति में यदि हम function का use करते हैं तो एक ही कोड को बार-बार लिखने बच जायेंगे इससे समय और space दोनों की बचत होगी साथ ही आपके program का structure साफ़ सुथरा, readable और manageable हो जायेगा।
यदि हम किसी particular task (code) का एक function बना लें तो जब कभी भी हमें प्रोग्राम में उस task को perform करने की जरुरत पड़े हम उस function को call कर सकते हैं।
इससे पहले हम alert() function का उपयोग किया है जो की एक built-in function है लेकिन यहाँ पर हम खुद से function create करना सीखेंगे।
Function Definition:
किसी भी function का use करने से पहले उसे define करना जरुरी होता है, यह बताना जरुरी होता है की आखिर वह function काम कैसे करेगा।
Syntax:
function functionname(){
//code to be executed
}Example:
function msg(){
alert("hello everyone!");
}Calling a function:
Function को define करने के बाद जब भी उसे run करना होता है तब उसे call किया जाता है इसे function को invoke करना भी कहते हैं।
किसी function को call करने के लिए simply उसके name को लिख दिया जाता है। इसका उदाहरण नीचे देख सकते हैं।
Example:
<script>
//function definition
function msg(){
alert("hello everyone!");
}
//function call
msg();
</script>
ऊपर example में हमने फंक्शन को define करने के तुरंत बाद ही call कर दिया है। जब पेज load होगा तो यह function automatically call हो जायेगा user को कुछ करने की जरूरत नही है।
लेकिन कभी कभी ऐसी requirement भी होती है की हमें किसी particular event पर या user के द्वारा कोई action (जैसे click करना, mouse hover करना) perform करने पर ही function call करना तो ऐसी स्थिति में हम <script> tag से बाहर भी फंक्शन को कॉल कर सकते हैं।
इसका एक example आप नीचे देख सकते हैं।
<script>
function msg(){
alert("hello everyone!");
}
</script>
<input type="button" onclick="msg()" value="click here!">ऊपर के example में हमने एक button बनाया है, जब user उस button पर click करेगा तभी msg() function call होगा।
Function with parameters:
हम function को parameter (जिसे function argument भी कहते हैं ) के जरिये कुछ data भी pass कर सकते हैं जिसके साथ वह कुछ operation perform करके हमें result दे सकता है।
अभी तक हम बिना parameter के function example देख रहे थे लेकिन अब parameter यानि argument वाले function का example भी देखेंगे।
<script>
function msg(from, text){
alert( from + ':' + text);
}
msg("Vivek","Hello everyone!");
</script>
दोस्तों इस tutorial से आप जावास्क्रिप्ट में coding करना शुरू कर सकते हैं और छोटे-छोटे programs बना कर practice भी कर सकते हैं।
आगे पढ़ें:
हम उम्मीद करते हैं की यह जानकारी (Javascript tutorial in Hindi) आपको पसंद आई होगी। आगे हम आपके लिए जावास्क्रिप्ट से जुड़े और भी tutorials लेकर आते रहेंगे इसलिए यदि आप चाहें तो WebinHindi के newsletter को free में subscribe कर सकते हैं इसके लिए नीचे subscription box दिया हुआ है।
यदि आपको कोई सवाल पूछना है या कुछ सुझाव देना है तो नीचे comment box में जरूर लिखिए इससे हमें ख़ुशी होगी।
Please share more details information of javascript
Please visit: जावास्क्रिप्ट क्या है? इसका क्या उपयोग है? What is JavaScript in Hindi?
sir java script me koi game kase banate he
uski coding bhejo example sahit
Bilkul sir ham koshish karenge is topic par article likhne ki. Thank you.
Sir
Switch statement example write
Domain name buy Karna h.h how?