वस्तु के उन्मुख Javaस्क्रिप्ट(OOJS) ट्यूटोरियल उदाहरण के साथ

द्वारा: जेम्स हार्टमैन जेम्स हार्टमैन
Hours Updated

OOPS अवधारणा क्या है? Javaलिखी हुई कहानी?

कई बार, चर या सारणी वास्तविक जीवन की स्थितियों का अनुकरण करने के लिए पर्याप्त नहीं होते हैं। Javaस्क्रिप्ट आपको ऐसी वस्तुएँ बनाने की अनुमति देती है जो वास्तविक जीवन की वस्तुओं की तरह काम करती हैं। एक छात्र या एक घर एक ऐसी वस्तु हो सकती है जिसमें अपनी खुद की कई अनूठी विशेषताएँ होती हैं। प्रोग्रामिंग को आसान बनाने के लिए आप अपनी वस्तुओं के लिए गुण और विधियाँ बना सकते हैं। यदि आपकी वस्तु एक छात्र है, तो इसमें पहला नाम, अंतिम नाम, आईडी आदि जैसे गुण होंगे और कैलकुलेटरैंक, चेंजएड्रेस आदि जैसे तरीके होंगे। यदि आपकी वस्तु एक घर है, तो इसमें कमरों की संख्या, पेंट का रंग, स्थान आदि जैसे गुण होंगे और कैलकुलेटएरिया, चेंजओनर आदि जैसे तरीके होंगे।

ऑब्जेक्ट कैसे बनाएं

आप इस प्रकार एक ऑब्जेक्ट बना सकते हैं:

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
line of code
}

OR

var objName= {property1:value1, property2:value2, method1: function()

{ lines of code} };

ऑब्जेक्ट गुण और विधियों तक पहुँचें

आप किसी ऑब्जेक्ट के गुणों तक इस प्रकार पहुँच सकते हैं:

objectname.propertyname;

आप किसी ऑब्जेक्ट की विधियों तक इस प्रकार पहुँच सकते हैं:

objectname.methodname();

इस उदाहरण को स्वयं आज़माएँ:

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

ओओपीएस कंस्ट्रक्टर

लेकिन इस तरह के ऑब्जेक्ट बनाना उतना उपयोगी नहीं है क्योंकि यहाँ भी आपको अलग-अलग छात्रों के लिए अलग-अलग ऑब्जेक्ट बनाने होंगे। यहाँ ऑब्जेक्ट कंस्ट्रक्टर की बात आती है। ऑब्जेक्ट कंस्ट्रक्टर आपको एक ऑब्जेक्ट प्रकार बनाने में मदद करता है जिसे व्यक्तिगत इंस्टेंस की ज़रूरत को पूरा करने के लिए दोबारा इस्तेमाल किया जा सकता है।

इस उदाहरण को स्वयं आज़माएँ:

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

किसी ऑब्जेक्ट के गुणों के माध्यम से लूप करें

सिंटेक्स:

for (variablename in objectname)

{

lines of code to be executed

}

के लिए/में एक पाश आमतौर पर किसी ऑब्जेक्ट के गुणों के माध्यम से लूप करने के लिए उपयोग किया जाता है। आप इसके लिए कोई भी नाम दे सकते हैं परिवर्तनशील, लेकिन ऑब्जेक्ट का नाम पहले से मौजूद ऑब्जेक्ट के समान होना चाहिए जिसे आपको लूप करना है।

इस उदाहरण को स्वयं आज़माएँ:

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>