javascript course

JavaScript

Javascript ये Language एक client-side Language है जिसका इस्तेमाल HTML(HyperText Markup Language) के साथ किया जाता है | Javascript ये Language lighted Language है |

Javascript Language का अविष्कार 'Brendan Eich' ने 1995 में किया | ये langauge 'Java' Programming Language से प्रेरित है | Javascript का पहला नाम 'Marc Andreessen' ने 'Mocha' रखा था | 'Marc Andreessen' ये Netscape के Founder है और उसी साल में उसका नाम 'Livescript' रखा गया और बाद में December 1995 ने Sun Microsystem द्वारा उसका नाम 'Javascript' रखा गया |

Javascript Language का इस्तेमाल Web-Development के लिए HTML के साथ किया जाता है | HTML के बिना Javascript का इस्तेमाल नहीं किया जा सकता | Javascript का code एक normal web browser पर run किया जा सकता है | Javascript का code Run करने के लिए Web Browser का Javascript Enable करना पड़ता है | कुछ Browsers में Javascript पहले से ही enabled होता है |

HTML Script Tag

आप अपने HTML document के head या body section में कहीं पर भी JavaScript program को insert कर सकते हैं इसके लिए आपको <script> tag की जरुरत पड़ेगी।

Example:

<script> 
 JavaScript code 
</script>

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 ही समझा जाता है।

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 - Variables in javascript

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 का भी उपयोग कर सकते हैं जिसके बारे में आप आगे पढेंगे।

फिलहाल हम “var” का use करके वेरिएबल बनाना सीखेंगे। इसके लिए नीचे कुछ examples दिए गये हैं।

Example:

var username;
var age;
var address;

आप चाहें तो एक ही line में multiple variables भी declare कर सकते हैं। जैसे:

var username, age, salary;

Variable में value कैसे store करें? - How to store value in javascript

अब ऊपर बनाये गये variables को initialize यानि की value store करना सीखेंगे। इसके लिए नीचे दिये गये examples को देखें।

Example:

var username='Maxon';
var age= 21;
var address='Kasganj';

या हम एक ही line में सभी variables को value assign कर सकते हैं।

var username='Maxon', age=21, address='Kasganj';

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 के रूप में नही कर सकते।

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 - loops in javascript

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: - while loop in javascript

इस 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: - javascript 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: - javascript 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("Maxon","Hello everyone!"); 
</script>

HTML Complete Course - Read Here=>

Css Complete Course - Read Here=>

अगर आपको यह पोस्ट 📑 (JavaScript Complete Course in Hindi) पसंद आई हो तो अपने मित्रों के साथ जरूर शेयर करें। धन्यवाद !

JavaScript Complete Course in Hindi

javascript course

JavaScript

HTML Script Tag

Type Attribute:

Language Attribute:

JavaScript Syntax

External Script

JavaScript Comments

1. Single line comment:

2. Multiple lines comment:

Variables - Variables in javascript

Variable कैसे बनायें?

Variable में value कैसे store करें? - How to store value in javascript

Variable create करने के rules:

Operators

Binary:

Types of Operators

Arithmetic Operators

JavaScript Comparison Operators

Logical Operator

Assignment Operators

Bitwise Operators

Conditional (Ternary) Operator

If-else Statement

If statement

If else statement

If else if statement

Switch Statement

Grouping of Case

JavaScript Loops - loops in javascript

while loop: - while loop in javascript

do…while loop: - javascript do…while loop

for loop: - javascript for loop

Function

Function Definition:

Calling a function:

Function with parameters:

2 Comments

Ranjeet Yadav

Geeta Sharma

Payal gupta