JavaScript Classes & JSON in Hindi – Debugging in JavaScript :-
JavaScript Object बनाने के लिए JavaScript Classes को template की तरह प्रयोग किया जाता है। Syntax –
class NameOfTheClass{
constructor (){....}
}
Class बनाने के लिए class keyword का प्रयोग किया जाता है तथा हमेशा constructor () method का प्रयोग किया जाता है। Example –
class Name {
constructor ( firstName, middleName, lastName)
{
this.firstName = firstName;
this.middleName = middleName;
this.lastName = lastName;
}
}
JavaScript program में class का प्रयोग-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Use of JavaScript Class</h2>
<p>How to implement a JavaScript Class</p>
<p id="demo"></p>
<script>
class Name {
constructor(firstName, middleName, lastName) {
this.firstName = firstName;
this.middleName = middleName;
this.lastName = lastName;
}
}
const employeeName = new Name("Mohan", "Lal", "Mehta");
document.getElementById("demo").innerHTML =
employeeName.firstName + " " + employeeName.middleName + " " +employeeName.lastName;
</script>
</body>
</html>
इस उदहारण में मैंने constructor के उपयोग से firstName , middleName , lastName को मिला कर दिखलाया हैं
Output –
JavaScript Class में प्रयोग होने वाले methods –
JavaScript class में दो तरह के methods प्रयोग किये जाते हैं – 1. constructor () तथा 2. class methods ()
1- Constructor () –
Constructor एक विशेष प्रकार का method होता है जिसे हम बिलकुल इसी नाम से लिखते हैं “constructor” जब किसी class का कोई नया object बनता है तो constructor method अपने आप ही call होता है। वास्तव में यह method object की properties को initialize करने के काम आता है। अगर हम constructor method को define नहीं करते हैं, तो JavaScript अपने आप एक empty constructor method बना देता है।
- Class methods () –
Constructor method के अलावा class में जितने भी दूसरे methods होते हैं वे सभी class methods कहलाते हैं। Class methods भी उसी syntax को follow करते हैं जो constructor follow करता है। एक Class में कितने भी Class methods हो सकते हैं, लेकिन constructor केवल एक ही होता है।
Example –
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Methods in JavaScript</h2>
<p>How to implement a method JavaScript Class</p>
<p id="demo"></p>
<script>
class Name {
constructor(firstName, middleName, lastName, joiningYear) {
this.firstName = firstName;
this.middleName = middleName;
this.lastName = lastName;
this.joiningYear = joiningYear;
}
tenure(t){
return t - this.joiningYear;
}
}
let date = new Date();
let joiningYear = date.getFullYear();
let employeeName = new Name("Mohan", "Lal", "Mehta", 2009);
document.getElementById("demo").innerHTML=
"Tenure of " + employeeName.firstName + " " + employeeName.middleName + " " +employeeName.lastName + " in this company is " + employeeName.tenure(joiningYear) + " years.";
</script>
</body>
</html>
Output –
JavaScript JSON –
JSON का full form है – JavaScript Object Notation. JSON एक light weight format है जिसके जरिये हम डाटा का आदान – प्रदान आसानी से कर सकते हैं। JSON के जरिये हम आसानी से data को store तथा transport कर सकते हैं। इसका उपयोग प्रायः तब किआ जाता है जब हमें data को server से web page पर भेजना होता है। JSON किसी भी language पर निर्भर नहीं होती है। इसको समझना भी आसान होता है।
Example –
{
"player":[
{"firstName":"Virat", "lastName":"Kohli"},
{"firstName":"Rohit", "lastName":"Sharma"},
{"firstName":"Rishabh", "lastName":"Pant"}
]
}
JSON Syntax लिखने के Rules –
- JSON Syntax के अनुसार data हमेशा name – value के जोड़े में आता है। eg -“firstName”:”Virat”
- Data को अलग – अलग करने के लिए comma का प्रयोग किया जाता है । eg- {“firstName”:”Virat”, “lastName”:”Kohli”},
- [ ] brackets में array को लिखा जाता है तथा
eg –
[
{"firstName":"Virat", "lastName":"Kohli"},
{"firstName":"Rohit", "lastName":"Sharma"},
{"firstName":"Rishabh", "lastName":"Pant"}
]
{ } में objects को रखा जाता है। eg-
{"firstName":"Virat", "lastName":"Kohli"},
{"firstName":"Rohit", "lastName":"Sharma"},
JSON text को JavaScript Object में convert करना –
JSON का मुख्य काम Data को server से read करके web page पर show करवाना है। JSON text को JavaScript Object में बदलने के लिए हम निम्न Syntax का प्रयोग करते हैं –
let jsonText = '{"player":['+
'{"firstName":"Virat", "lastName":"Kohli"},' +
'{"firstName":"Rohit", "lastName":"Sharma"},'+
'{"firstName":"Rishabh", "lastName":"Pant"} ]} '
इसके बाद हम इस string को JavaScript Object बनाने के लिए JavaScript का एक built in function काम में लेते हैं जो निम्न है –
const obj = JSON.parse(jsonText);
Example-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>Converting JSON String into JavaScript Object</h2>
<p id="demo"></p>
<script>
let jsonText = '{"player":['+
'{"firstName":"Virat", "lastName":"Kohli"},' +
'{"firstName":"Rohit", "lastName":"Sharma"},'+
'{"firstName":"Rishabh", "lastName":"Pant"} ]}';
const obj = JSON.parse(jsonText);
document.getElementById("demo").innerHTML =
obj.player[2].firstName + " " + obj.player[2].lastName;
</script>
</body>
</html>
Output-
Debugging in JavaScript –
किसी भी programming language में debugging का मतलब है code लिखते वक़्त ही उसे test करके code में मौजूद errors को हटाना। जाहिर है, JavaScript का code भी अगर कोई पहली बार लिखेगा तो उसमे errors तो आएंगी ही। इन errors को हटाने के लिए हमें JavaScript Debuggers का प्रयोग करना पड़ता है। वर्तमान में हमें browsers में ही ये debugger in built ही मिल जाते है।
किसी भी browser में F12 key का प्रयोग करके तथा उसके बाद console को debugger menu से select करके हम JavaScript code की debugging कर सकते है।
console.log() method – अगर हमारा browser debugging को support करता है तो हम console.log() method का प्रयोग करके JavaScript values को debugger window में show करवा सकते है –
Example-
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:black
}
h1 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h1 style="text-decoration: underline; text-align:left;">www.aforapple.co.in</h1>
<h2>How to perform debugging</h2>
<p>Press F12 to start debugging in your browser, after that select "Console" in the debugger menu.</p>
<script>
a = "Debugging";
b = " Start";
c = a + b;
console.log(c);
</script>
</body>
</html>
Output-
उक्त उदाहरण को जब हम ब्राउज़र में रन करते हैं तो हमें simple output दिखता है जो कि उक्त इमेज में दिखाया गया है। परन्तु जैसी ही हम F12 press करते हैं और debugger menu में से console को सेलेक्ट करते हैं तथा उसके बाद जब हम इस program को फिरसे run करवाते हैं या browser को refresh करते हैं तो हम पाते हैं कि console में “Debugging Start ” लिखा हुआ आ रहा है। इस तरह से हम किसी भी browser में JavaScript code की debugging कर सकते हैं।
इस पोस्ट के पहले मैंने और भी कई पोस्ट लिखी हैं, जैसे की HTML , Microsoft Excel , Gmail , JavaScript आदि, आप अपने इच्छा के अनुसार इन्हे देख सकते है।
JavaScript Classes & JSON in Hindi