İnternet Programlama-I JAVASCRİPT -NESNELER VE DİZİ İŞLEMLERİ-

Javascript Nesneleri JavaScript programlama dilinde nesneler önemli bir yer tutar. JavaScript nesneleri özellikler (properties) ve yöntemlerden oluşan bir topluluktur. Yöntem, nesnenin elemanı olan bir işlevdir. Özellik ise, nesnenin bir özniteliği (attribute) olarak bilinir. Özellikler, nesnenin boyutu, rengi, ekrandaki konumu ve bunun gibi nitelikler olarak bilinir.

For..in Deyimi Bir nesnenin her bir özelliği için, döngü içinde belirlenen deyimlerin çalıştırılmasını sağlar. Bu deyim şu şekilde tanımlanıyor : for (değişken in nesne ) { deyimler } değişken: Her bir özellik için ardışık işlem görecek değişken nesne: Özellikleri kullanılacak nesnenin adı deyimler Her bir özellik için işlem görecek deyimler

For..in Deyimi Örnek: Bir dizinin içini O ile 9 arasındaki rakamlarla dolduran ve daha sonra bu dizi elemanlarını görüntüleyen bir program yazalım

For..in Deyimi <SCRIPT language="Javascript"> // Dizinin oluşturulması. var dizi = new Array(); for (i = 0; i < 10; i++) { dizi [i] = i; } // Dizi içeriğinin yazdırılması.. for (var i in dizi ) { document.write(i + "<br>");} </SCRIPT>

This Deyimi O anda üzerinde çalışılmakta olan nesneyi belirtmek üzere This deyiminden yararlanılabilir. Bu deyim, nesne özelliklerinin tanımlanması esnasında, nesne adının belirtilmeden kullanılmasında yararlı olacaktır. Söz konusu deyim aşağıda belirtildiği biçimde tanımlanmaktadır: this.özellik

This Deyimi Örnek: Bir otomobil nesnesinin tanımlandığını varsayalım. Otomobil nesnesinin renk, motor ve model gibi özellikleri bulunabilir. Bu nesnenin özelliklerini bir işlev içinde aşağıda gösterildiği biçimde tanımlayabiliriz. function otomobil(renk, motor, model){ this.renk = renk; this.motor =motor; this.model = model;

Nesnenin Ortak Kullanımı - With Deyimi Varsayılan bir nesne üzerinde uygulanacak deyim gruplarını belirlemek üzere With deyiminden yararlanılabilir. Bu deyim aşağıda belirtildiği biçimde tanımlanır: with (nesne)-f deyimler } nesne: Deyimlerin uygulanacağı nesne deyimler: Söz konusu nesne için geçerli olacak deyimler

Nesnenin Ortak Kullanımı - With Deyimi Örnek: üç ayrı işlem için Math nesnesinin kullanılması gerektiğini varsayalım. Bu üç işlem için söz konusu nesneyi ayrı ayrı tanımlamak yerine, With deyimi ile aşağıda gösterildiği biçimde tanımlayabiliriz. var x, y, z var r=10 with (Math) { x = pi * r * r y = r * cos(pi) z = r * sin(pi/2)

Nesne Özellikleri Hakkında Bilgi Edinme Nesneyi yaratan işlev hakkında bilgi edinilmek söz konusu ise, nesnelerin constructor özelliğinden yararlanılır. Bu özellik, hem nesneyi yaratan işlev, hem de nesne özelliklerinin neler olduğu hakkında bilgi sağlar. Söz konusu özellik aşağıda gösterildiği biçimde kullanılır: nesne.constructor Bu özellik kullanıcı tarafından yaratılan nesnelere uygulanabileceği gibi, hazır nesnelere de uygulanabilir.

Nesne Özellikleri Hakkında Bilgi Edinme Örnek: müşteri adındaki bir nesneyi göz önüne alarak, hangi işlev tarafından yaratıldığını ve özelliklerinin neler olduğunu listelemek istiyoruz.

Nesne Özellikleri Hakkında Bilgi Edinme <SCRIPT LANGUAGE="JavaScript"> musteri = new musteri_islev(); // Nesne işlevi ve özellikleri tanımlanıyor, değer atanıyor.. function musteri_islev() { this.adi = "Okan" this.soyadi = "Özkan" this.dogum_yili = "1982“ } document.write(musteri.constructor) ; </SCRIPT>

Hazır JavaScript Nesneleri JavaScript programcılara iki tür nesne tanımlama olanağı sunar. Bunlardan birincisi, programcının kendi yarattığı nesnelerdir. İşlevler yardımıyla bu tür nesneler tanımlanır. Bir di­ğer nesne türü ise, JavaScript tarafından hazır olarak sunulan nesnelerdir. Bu tür nesneler sistemin yerleşik nesneleridir ve doğrudan doğruya tanımlanarak kullanılır.

Nesnelere bir Özellik Eklenmesi Kullanıcı tarafından yaratılan nesnelere yeni bir özelliğin nasıl ilave edilebileceğini ncelemiştik. Eğer hazır bir Javascript nesnesi söz konusu ise bu kez daha farklı bir yol izlenebilir. Böyle bir amaca ulaşabilmek için prototype özelliğinden yararlanılabilir. Söz konusu özellik şu şekilde kullanılır: nesne adı.prototype Program içinde nesneye verilen isim ile birlikte bu özellik kullanılır.

Nesnelere bir Özellik Eklenmesi Örnek: Dizi nesnesine yeni bir özellik eklemek istiyoruz. Bu özellik, nesnenin içerdiği elemanların en büyüğünün elde edilmesi üzerinedir. Yani nesneye bu özelliği bir kez kazandırdıktan sonra, söz konusu özellik ile programın herhangi bir yerinde nesne elemanlarının sayısını doğrudan öğrenmek mümkün olacaktır.

Nesnelere bir Özellik Eklenmesi <SCRIPT LANGUAGE="JavaScript"> // Nesnelerin tanımlanması.. var dizi1 = new Array(45,12,20,80,66,43); var dizi2 = new Array(211,342,333,747,399,260,70,390); // Nesne özelliğinin tanımlanması.. Array.prototype.enBuyuk = enBuyuk_bul; // Dizilerin en büyük değerinin listelenmesi.. document.write("Birinci dizinin en büyük elemanı=" + dizi1.enBuyuk( ) + "<br>"); document.write("İkinci dizinin en büyük elemanı=" + dizi2.enBuyuk( ));

Nesnelere bir Özellik Eklenmesi // Bir dizinin en büyük değerini bulan işlevin tanımlanması., function enBuyuk_bul( ){ var i, buyuk = this[0]; for (i = 1; i < this.length; i++) { if (buyuk < this[i]) buyuk = this[i]; } return buyuk ; </SCRIPT>

Dizilerin Kullanılması - Array Nesnesi Javascript’ de dizileri kullanmak gerektiğinde array nesnesine başvurulur. Diziler, değişkenlerden farklıdır. Değişken sadece bir değeri saklayabilen bir ortamdır. Örneğin, adi = “Burak” biçiminde bir değişken tanımlandığında, adi değişkeni program boyunca sadece bir değeri taşıyacaktır. Buna karşılık, diziler birden fazla değer taşıyan nesneler olarak değerlendirilir. Örneğin, adi isimli bir nesne birden fazla “Burak”, “Begüm”, “Dilay” gibi elemanlara sahip olabilir.

Dizilerin Kullanılması - Array Nesnesi Bu tür bir özelliğe sahip olduğu için array nesnesi programlarda sıkça kullanılır. Bu nesne aşağıda gösterildiği biçimlerde kullanılabilir: nesne = new Array() nesne = new Arrav([boyut]) nesne = new Array(eleman0. eleman1,..,]) nesne Dizi nesnesinin adı boyut Dizinin içerdiği eleman sayısı. Dizinin boyutu eleman 0, eleman 1,.., Dizi elemanları. Dizi elemanları sıfırdan başlayarak numaralandırılır

Dizilerin Kullanılması - Array Nesnesi Yeni bir dizinin tanımlanması için new Array () tanımı yapılabilir. Ancak dizi nesnesini daha kısa biçimde de yaratabiliriz. Bunun için aşağıda gösterilen tanım kullanılabilir: nesne = [elemanO, elemanı,..,] Bunun anlamı, nesne elemanlarını köşeli parantezler içine yerleştirerek program içinde tanımlayabiliriz. Örnek: İsimlerden oluşan bir dizi yaratarak, bu diziyi tarayıcı penceresinde görüntüleyeceğiz.

Dizilerin Kullanılması - Array Nesnesi <SCRIPT LANGUAGE="JavaScript"> // Nesnenin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); // Dizinin içerdiği elemanların listelenmesi.. for (i = 0; i < 5; i++) { document.write (isimler[i] + "<br>"); } </SCRIPT>

Dizilerin Kullanılması - Array Nesnesi Diziye değer yerleştirme işlemi, dizi boş olarak yaratıldıktan sonra da tek tek yapılabilir. <SCRIPT LANGUAGE="JavaScript"> var isimler = new Array(); // Dizi içine isimlerin yerleştirilmesi.. isimler[0] = "Burak" isimler[1] = "Begüm" isimler[2] = "Dilay" isimler[3] = "Selin" isimler[4] = "Seray" // Dizinin içerdiği elemanların listelenmesi.. for (i = 0; i < 5; i++) { document.write (isimler[i] + "<br>"); } </SCRIPT>

Dizi Elemanlarını Birleştirme Bir dizinin içerdiği tüm elemanları birleştirerek, bir dizgi içine yerleştirmek mümkündür. Bunun için dizi nesnesinin join yönteminden yararlanılır. Bu yöntem aşağıda görüldüğü biçimde tanımlanır: dizi.join("ayıraç ") dizi :Dizi olarak tanımlanmış nesnenin adı Ayıraç :Dizi elemanlarının birleştirilmesi esnasında kullanılacak ayıraç. Eğer herhangi bir tanım yapılmaz ise, virgül işaretinin tanımlandığı varsayılır

Dizi Elemanlarını Birleştirme Dizi elemanlarını birleştirerek yeni bir dizinin içine yerleştirmenin bir başka yolu daha bulunmaktadır. Böyle bir işlem valueOf () yöntemi yardımıyla yerine getirilir. Bu yöntem ayıraç seçilmesine izin vermez. Ayıraç olarak kendisi virgül işaretini kullanır dizi.valueOf()

Dizi Elemanlarını Birleştirme Yukarıda anlatılanların bir benzeri toString() yöntemi yardımıyla yerine getirilebilir. Bu işlev, bir dizinin içerdiği değerleri dizgi değere dönüştürdükten sonra, aralarına virgül yerleştirir ve tek bir dizgi değer olarak belirler. Söz konusu yöntem şu şekilde tanımlanır: dizi.toString()

Dizi Elemanlarını Birleştirme isimler dizisinin içerdiği tüm elemanları, aralarına (-) işaretini yerleştirerek birleştiren programı yazalım… <SCRIPT LANGUAGE="JavaScript"> // Nesnenin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); // Dizi elemanlarının yer alacağı değişkenin tanımlanması.. personel = isimler.join("-"); // Dizinin içerdiği elemanların listelenmesi.. document.write (personel); </SCRIPT>

Dizi Elemanlarını Birleştirme Aynı programı bu kez valueOf () yöntemiyle yapalım… <SCRIPT LANGUAGE="JavaScript"> // Nesnenin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); // Dizi elemanlarının yer alacağı değişkenin tanımlanması.. personel = isimler.valueOf(); // Dizinin içerdiği elemanların listelenmesi.. document.write (personel); </SCRIPT> Yukarıdaki sonuca aynen ulaşmak için , personel = isimler.toString(); ifadeside kullanılabilir…

İki Diziyi Birleştirerek Yeni bir Dizi Elde Etmek Dizi elemanlarının join yöntemi ile nasıl birleştirilebileceğini gördük. Bu kez iki diziyi birleştirerek yeni bir dizinin elde edilmesi olgusu üzerinde duracağız. Böyle bir sonuca ulaşabilmek için concat yönteminden yararlanılır. Bu yöntem şu şekilde tanımlanır: Dizi 1.concat(diğer dizi veva eleman) Bu tanımdan şu anlaşılmaktadır: İki dizi birleştirilebileceği gibi, daha fazla sayıda dizi ya da dizi elemanları birleştirilebilir

İki Diziyi Birleştirerek Yeni bir Dizi Elde Etmek isimler ve öğrenciler dizilerinin içerdiği değerleri biraya getirerek tum_personel isimli yeni bir dizi yaratalım… <SCRIPT LANGUAGE="JavaScript"> // Dizilerin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); var öğrenciler = new Array("Sezin", "Dilara", "Aybike"); // Dizi elemanlarının yer alacağı değişkenin tanımlanması.. tum_personel = isimler.concat (öğrenciler) ; // Dizinin içerdiği elemanların listelenmesi.. document.write (tum_personel); </SCRIPT>

Dizi Elemanlarının Sıralanması Bir dizinin içerdiği elemanları sıralamak söz konusu olabilir. Bunun için sort yöntemi kullanılabilir. dizi.sort(sıralama işlevi) Parantez içinde herhangi bir şey tanımlanmaz ise, sıralamanın artan sırada olduğu varsayılır. Eğer farklı bir sıra söz konusu ise bu işlev içinde tanımlanır.

Dizi Elemanlarının Sıralanması Bir dizinin 5,1,7,9,11,0,9 elemanlarını içerdiğini varsayalım. Bu dizinin elemanlarını sıralayarak görüntüleyelim… <SCRIPT LANGUAGE="JavaScript"> // Dizilerin tanımlanması.. var sayilar = new Array(5,1,7,9,11,0,9); // Dizinin içerdiği elemanların sıralanması.. sayilar.sort(); // Dizinin içerdiği elemanların listelenmesi.. document.write (sayilar.join()); </SCRIPT>

Dizi Elemanlarının Sıralanması <SCRIPT LANGUAGE="JavaScript"> // Dizilerin tanımlanması.. var sayilar = new Array(5,1,7,9,11,0,9); // Dizinin içerdiği elemanların sıralanması.. sayilar.sort(yon); // Dizinin içerdiği elemanların listelenmesi.. document.write (sayilar.join()); function yon(a, b) { return a-b } </SCRIPT>

Dizi Elemanlarının Sıralanması <SCRIPT LANGUAGE="JavaScript"> // Dizilerin tanımlanması.. var sayilar = new Array(5,1,7,9,11,0,9); // Dizinin içerdiği elemanların sıralanması.. sayilar.sort(yon); // Dizinin içerdiği elemanların listelenmesi.. document.write (sayilar.join()); function yon(a, b) { return b-a } </SCRIPT>

Dizi Elemanlarının Yer Değiştirmesi Bir dizinin içeriğinin transpozesini elde etmek için reverse() yönteminden yararlanılır. Bu yöntem, dizinin ilk elemanını en son, sondaki elemanını ise birinci eleman haline getirir. Bu yöntem aşağıda gösterildiği biçimde kullanılır: dizi .reverse()

Dizi Elemanlarının Yer Değiştirmesi Bir dizinin 5,1,7,9,11,0,9 elemanlarını içerdiğini varsayalım. Bu dizinin transpozesini elde edelim… <SCRIPT LANGUAGE="JavaScript"> // Dizilerin tanımlanması.. var sayilar = new Array(5,1,7,9,11,0,9); // Dizinin içerdiği elemanların transpozesi.. sayilar.reverse(); // Dizinin içerdiği elemanların listelenmesi.. document.write (sayilar.join()); </SCRIPT>

Dizinin İçerdiği Eleman Sayısını Bulmak Bir dizinin içerdiği elemanların sayısını elde etmek mümkündür. Bunun için dizi nesnesinin length özelliğinden yararlanılır. Söz konusu özellik şu şekilde kullanılır: dizi.length

Dizinin İçerdiği Eleman Sayısını Bulmak iki farklı dizinin eleman sayılarını bulalım… <SCRIPT LANGUAGE="JavaScript"> // Dizilerin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); var öğrenciler = new Array("Sezin", "Dilara", "Aybike"); // Dizinin içerdiği eleman sayılarının listelenmesi.. document.write ("Birinci dizi eleman sayısı = " + isimler.length + "<br>"); document.write ("İkinci dizi eleman sayısı = " + öğrenciler.length); </SCRIPT>

Dizinin İlk veya Son Elemanının Silinmesi Bir dizinin ilk elemanını ya da son elemanını silmek mümkündür. Bunun için pop() ve shift () yöntemlerinden yararlanılır. Shift () yöntemi dizinin birinci elemanını yok eder. Buna karşılık, pop() yöntemi dizinin en sondaki elemanını siler. Söz konusu deyimler aşağıda gösterildiği biçimde tanımlanır: nesne.shift () nesne.pop() Dizinin içerdiği ilk ve son elemanların silinmesiyle ilgili bu iki yöntemin Netscape 3.0 ve Internet Explorer 5.5 den itibaren kullanılabildiğini göz önünde tutmak gerekiyor.

Dizinin İlk veya Son Elemanının Silinmesi isimler dizininin beş eleman içerdiğini biliyoruz. Bu dizinin birinci elemanını yok edelim… <SCRIPT LANGUAGE="JavaScript"> // Nesnenin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); isimler.shift() // Dizinin içerdiği elemanların listelenmesi.. for (i=0;i<isimler.length;i++) { document.write (isimler[i] + "<br>"); } </SCRIPT>

Dizinin İlk veya Son Elemanının Silinmesi Bu kez dizinin son elemanını yok edelim… <SCRIPT LANGUAGE="JavaScript"> // Nesnenin tanımlanması.. var isimler = new Array("Burak","Begüm","Dilay","Selin","Seray"); isimler.pop() // Dizinin içerdiği elemanların listelenmesi.. for (i=0;i<isimler.length;i++) { document.write (isimler[i] + "<br>"); } </SCRIPT>

Diziye bir Konumdan İtibaren Eleman Ekleme veya Silme Bir diziye belirli bir konumda bir elemanın eklenmesi ya da bir elemanının yok edilmesi söz konusu olduğunda splice() yönteminden yararlanılır. dizi.splice(başlama, silinecek eleman sayısı, [eklenecek elemanlar]) Bu deyimin Netscape 3.0 ve Internet Explorer 5.5 ‘den itibaren kullanılabildiğini göz önünde tutmak gerekiyor.

Diziye bir Konumdan İtibaren Eleman Ekleme veya Silme isimler dizisinin 3. ve 4. elemanları arasında “Onur” isimli bir eleman ekleyelim… <SCRIPT LANGUAGE="JavaScript"> // Dizinin tanımlanması.. var isimler = ["Burak","Begüm","Dilay","Selin","Seray"]; document.write ("Dizi : " + isimler.join() + "<br>"); // Yeni dizinin tanımlanması.. isimler.splice(3,0,"Onur"); document.write ("Yeni dizi : " + isimler.join()); </SCRIPT>

Diziye bir Konumdan İtibaren Eleman Ekleme veya Silme Bu kez, dizinin 2. elemanından sonraki elemanını yok edip ve “Onur” ile “Hatice” elemanlarını diziye bu konumdan itibaren ekleyelim... <SCRIPT LANGUAGE="JavaScript"> // Dizinin tanımlanması.. var isimler = ["Burak","Begüm","Dilay","Selin","Seray"]; document.write ("Dizi : " + isimler.join() + "<br>"); // Yeni dizinin tanımlanması.. isimler.splice(2,1,"Onur","Hatice"); document.write ("Yeni dizi : " + isimler.join()); </SCRIPT>

Dizinin Sonuna Eleman Ekleme Bir dizinin sonuna belirli elemanları ekleme amacıyla push() yönteminden yararlanılır. Bu yöntem, yeni dizinin eleman sayısını döndürür. Yöntem şu şekilde tanımlanmaktadır: dizi.push(yeni elemanlar) Bu deyimin Netscape 3.0 ve Internet Explorer 5.5 ‘den itibaren kullanılabildiğini göz önünde tutmak gerekiyor.

Dizinin Sonuna Eleman Ekleme isimler dizisinin sonuna “Onur” ve “Hatice” elemanlarını ekleyelim… <SCRIPT LANGUAGE="JavaScript"> // Dizinin tanımlanması.. var isimler = ["Burak","Begüm","Dilay","Selin","Seray"]; document.write ("Dizi : " + isimler.join() + "<br>"); // Yeni dizinin tanımlanması.. eleman = isimler.push("Onur","Hatice"); document.write ("Yeni dizi : " + isimler.join() + "<br>"); document.write ("Yeni dizi eleman sayısı : " + eleman); </SCRIPT>

Dizinin Başına Eleman Ekleme Dizinin sonuna eleman eklemek için push() yöntemini kullanıyoruz. Ancak dizinin başına belirlenen elemanların eklenmesi söz konusu ise unshift() yöntemi kullanılır. Söz konusu yöntem şu şekilde tanımlanır: dizi.unshift(yeni elemanlar) Bu deyimin Netscape 3.0 ve Internet Explorer 5.5 ‘den itibaren kullanılabildiğini göz önünde tutmak gerekiyor.

Dizinin Başına Eleman Ekleme <SCRIPT LANGUAGE="JavaScript"> // Dizinin tanımlanması.. var isimler = ["Burak","Begüm","Dilay","Selin","Seray"]; document.write ("Dizi : " + isimler.join() + "<br>"); // Yeni dizinin tanımlanması.. isimler.unshift("Onur","Hatice"); document.write ("Yeni dizi : " + isimler.join() + "<br>"); </SCRIPT>

Dizinin bir Kısmından Yeni bir Dizi Oluşturma Bir dizinin belirli bir bölümünü kullanarak yeni bir dizi oluşturulabilir. Böyle bir amaç için slice() yönteminden yararlanılır. Bu yöntem şu şekilde tanımlanır: dizi.slice(başlama, [son]) dizi: Dizinin adı Başlama: Bu diziden alınacak elemanların başlama konumu Son: Bu diziden alınacak elemanların bitiş konumu. Tanımlanması zorunlu değildir

Dizinin bir Kısmından Yeni bir Dizi Oluşturma Bu yöntem, elemanları sıfırdan başlamak üzere numaralandırır. Yeni dizi başlama konumundan itibaren son konuma kadar olan elemanlardan elde edilir. Ancak son konumdaki eleman dahil edilmez. Bazı durumlarda başlama ya da son konumları negatif bir sayısal değer ile ifade edilebilir. Eger başlama değeri negatif ise, dizinin uzunluğu ile bu sayısal değer toplanarak yeni başlangıç noktası elde edilir. Benzer biçimde, son konumu negatif bir sayısal değer ile ifade ediliyorsa, dizinin uzunluğu ile bu değer toplanarak yeni son konum bilgisi elde edilir.

Dizinin bir Kısmından Yeni bir Dizi Oluşturma İsimlerden oluşan isimler dizisinin 2. ve 3. elemanlarından yeni bir dizi oluşturalım… <SCRIPT LANGUAGE="JavaScript"> // Dizinin tanımlanması.. var isimler = ["Burak","Begüm","Dilay","Selin","Seray"]; document.write ("Dizi : " + isimler.join() + "<br>"); // Yeni dizinin tanımlanması.. var yeni=isimler.slice(1,3); document.write ("Yeni dizi : " + yeni.join() + "<br>"); </SCRIPT>