Nesne odaklı JavaÖrnekli Script(OOJS) Eğitimi

By: James Hartman James Hartman
Hours Güncellenmiş

OOPS Kavramı Nedir? JavaSenaryo?

Çoğu zaman değişkenler veya diziler gerçek hayattaki durumları simüle etmek için yeterli değildir. JavaScript, gerçek yaşam nesneleri gibi davranan nesneler oluşturmanıza olanak tanır. Bir öğrenci veya bir ev, kendilerine özgü birçok benzersiz özelliğe sahip bir nesne olabilir. Programlamayı kolaylaştırmak için nesnelerinize özellikler ve yöntemler oluşturabilirsiniz. Nesneniz bir öğrenciyse, ad, soyad, kimlik vb. gibi özelliklere ve calculateRank, changeAddress vb. gibi yöntemlere sahip olacaktır. Nesneniz bir evse, oda sayısı, boya rengi, konum vb. gibi özelliklere ve calculateArea, changeOwner vb. gibi yöntemlere sahip olacaktır.

Nesne Nasıl Oluşturulur

Bunun gibi bir nesne oluşturabilirsiniz:

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} };

Nesne Özelliklerine ve Yöntemlerine Erişim

Bir nesnenin özelliklerine şu şekilde erişebilirsiniz:

objectname.propertyname;

Bunun gibi bir nesnenin yöntemlerine erişebilirsiniz:

objectname.methodname();

Bu Örneği kendiniz deneyin:

<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>

OOPS Oluşturucusu

Ancak bu tür nesneler yaratmak o kadar da kullanışlı değil çünkü burada da farklı öğrenciler için farklı nesneler oluşturmanız gerekecek. İşte nesne yapıcısı resme geliyor. Nesne yapıcısı, bireysel örneklerin ihtiyacını karşılamak için yeniden kullanılabilecek bir nesne türü oluşturmanıza yardımcı olur.

Bu Örneği kendiniz deneyin:

<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>

Bir Nesnenin Özellikleri Arasında Döngü

Sözdizimi:

for (variablename in objectname)

{

lines of code to be executed

}

için/içinde döngü Genellikle bir nesnenin özellikleri arasında geçiş yapmak için kullanılır. İçin herhangi bir isim verebilirsiniz değişken, ancak nesnenin adı, döngü yapmanız gereken mevcut bir nesnenin adı ile aynı olmalıdır.

Bu Örneği kendiniz deneyin:

<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>