Makale Özeti

Serinin bu ikinci makalesinde JavaScript dizileri ile kullanabileceğimiz ve ASP.NET AJAX Extension ile beraber gelen yeni istemci taraflı metodlardan bahsediyoruz.

Makale

Bir önceki yazımda ASP.NET AJAX Extension'a ait istemci taraflı JavaScript özelliklerini incelerken sınıf yapılarına, kütüphanelere, üyelere ve sıralara yani enumaration yapısa örnekler ile göz atmıştık. Sıra geldi JavaScript dizileri ile çalışırken hayatımızı gerçekten kolaylaştıran yepyeni AJAX Extension JavaScript komutlarına.

Array.add

Herhangi bir JavaScript dizisini tanımlarken dizinin uzunluğunu belirterek değerler atamak yerine yepyeni Array.add metodumuzu kullanabilirsiniz. .add metodu toplamda iki parametre alıyor, bunlardan ilki ekleme işleminin yapılacak dizi değişkenin adı, diğeri de tabi ki eklenecek olan değerin ta kendisi.

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Goster()
    {
        var Adamlar = ['Ahmet', 'Mehmet', 'Faruk', 'Sedat'];
        Array.add(Adamlar, 'Daron');
        alert(Adamlar.toString());
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <input id="Button1" type="button" value="button" onclick="Goster();" />
    </form>
</body>
</html>

Kodumuz içerisinde farklı insanların isimlerinin bir listesini taşıyan Adamlar adında bir değişken tanımladıktan sonra Array.add metodu ile yeni bir değeri dizi içerisine ekliyoruz. Son olarak yine JavaScript tarafında ASP.NET AJAX Extension sayesinde kullanabildiğimiz .toString metodu ile diziyi bir metne çevirerek kullanıcıya bir mesaj kutusu içerisinde gösteriyoruz.

Array.addRange

Birden çok diziyi birbiri ile birleştirmek JavaScript tarafında zahmetli bir iş olabilir. Eğer sayfada bir ScriptManager var ise işimiz çok daha kolay. Array.addRange metodu ile herhangi bir diziye bir başka diziti ekleyebiliyoruz. Metod toplamda iki parametre alıyor. Aldığını ikinci parametredeki diziyi birinci parametredeki dizinin sonuna ekliyor.

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Yarat()
    {
        var Kayitlar = ["Elma", "Armut", "Ananas"];
        var YeniKayitlar = ["Muz", "Havuç"];
        Array.addRange(Kayitlar, YeniKayitlar);
        alert(Kayitlar.toString());
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <input id="Button1" type="button" value="Týkla" onclick="Yarat();" />
    </form>
</body>
</html>

Kayitlar ve YeniKayitlar adlarında yarattığımız dizilerden YeniKayitlar dizisini Kayitlar dizisine Array.addRange metodu ile ekliyoruz. Son olarak da tüm kayıtları içeren Kayitlar dizisini kullanıcıya gösteriyoruz.

Array.contains

Bir dizi içerisinde belirli bir kaydın veya değerin var olup olmadığını bulmak için kullanabileceğimiz belki de en pratik yöntem Array.contains metodu. Metod iki adet parametre alıyor, bunlardan ilki içerisinde arama yapılacak dizinin kendisi, ikincisi de aranak olarak değişken veya değer. Hızlı bir örnek ile nasıl çalıştığına göz atalım.

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Yarat()
    {
        var Aylar = ["Ocak", "Şubat", "Mart"];
        var Sonuc = Array.contains(Aylar, "Mart");
        alert(Sonuc.toString());
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <input id="Button1" type="button" value="Tıkla" onclick="Yarat();" />
    </form>
</body>
</html>

Aylar adında bir dizi içerisinde yılın ilk üç ayını yerleştirdikten sonra dizi içerisinde Mart ayının olup olmadığını kontrol ederek sonucu kullanıcıya gösteriyoruz. Array.contains metodu JavaScript tarafında geriye Boolean tipinde True veya False değerleri döndürür.

Array.indexOf

.NET Tarafından alışık olduğumuz indexOf metodunu artık JavaScript tarafında da kullanabiliyoruz. Herhangi bir dizi içerisinde arattığımız objenin varsa kaçıncı index numarasında yer aldığını döndüren bu metod ile ilgili de hemen bir örnek yapalım.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Yarat()
    {
        var HaftaIci = ["Ocak", "Şubat", "Mart", "Perþembe", "Cuma"];
        var Kacinci = Array.indexOf(HaftaIci, "Mart");
        alert(Kacinci); // Sonuç = 2
        Kacinci = Array.indexOf(HaftaIci, "Ocak", 1);
        alert(Kacinci); // Sonuç = -1
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <input id="Button1" type="button" value="Tıkla" onclick="Yarat();" />
    </form>
</body>
</html>

Kodumuz içerisinde Array.indexOf ile ilgili iki farklı kullanım şeklini inceleyebilirsiniz. İlk kullanımızda Array.indexOf metoduna toplam iki parametre verdik. Bunlar ilki içerisinde arama yapılacak dizinin kendisi, ikincisi de aranacak objeydi. İkinci kullanım şeklimizde ise bir üçüncü parametre daha veriyoruz. Bu üçüncü parametre opsyonel bir parametre olmakla birlikten dizi içerisindeki arama işleminin kaçıncı indeks numarasından başlayacağını belirtmemizi sağlıyor. Bu nedenle ikinci kullanımda aslında Ocak ayı dizi içerisinde bulunsa da biz 1 indeks numaralı yani ikinci kayıttan aramaya başladığımız için geriye olumsuz sonuç dönüyor.

Array.insert

JavaScript ile diziler üzerinde çalışırken belki de en ciddi sorunlardan biri dizilerin herhangi bir yerine, ortasına vs yeni bir değer veya değişken eklemeye çalışmaktır. Eski yöntemlere hiç bulaşmadan Array.insert metodu ile bu işlemin ne kadar da kolaylaştığını sizinle paylaşmak istiyorum.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Yarat()
    {
        var Aylar = ["Ocak", "Subat", "Nisan"];
        Array.insert(Aylar, 2, 'Mart');
        alert(Aylar.toString());
        // Sonuç = Ocak, Subat, Mart, Nisan
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <input id="Button1" type="button" value="Tıkla" onclick="Yarat();" />
    </form>
</body>
</html>

Yine ayların adlarından oluşan bir liste üzerinde çalışalım. Dizimiz içerisinde Mart ayı eksik olduğu için diziyi tanımladıktan sonra araya eklememiz gerekiyor. Array.insert metoduna verdiğimiz üç parametre ile bu işlemi kolayca halledebiliyoruz. Parametrelerimizden ilki ekleme işlemini yapacağımız dizinin kendisi, ikincisi eklenecek öğenin kaçıncı sıraya yapılacağına dair indeks numarası ve üçüncüsü de eklenecek olan öğenin ta kendisi.

Array.remove

Bir dizi içerisinde belirli bir değeri silmek ve diziden çıkarmak için Array.remove metodunu kullanabiliyoruz. Metoda toplamda iki adet parametre veriyoruz. Bunlardan ilki değeri çıkartacağımız JavaScript dizisi, diğeri de çıkartmak istediğimiz değer. Gelin örneğimizde kullanım şekillerine bakalım.

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    function Yarat()
    {
        var Arabalar = ['FIAT', 'FORD', 'BMW', 'MERCEDES'];
        Array.remove(Gunler, "FORD");
        alert(Gunler.toString());
        // Sonuç = FIAT, BMW, MERCEDES
        Array.removeAt(Gunler, 2);
        alert(Gunler.toString());
        // Sonuç = FIAT, BMW
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <input id="Button1" type="button" value="Týkla" onclick="Yarat();" />
    </form>
</body>
</html>

Kodumuz içerisinde Array.remove ve Array.removeAt metodlarını kullandık. Array.remove'un parametrelerinden bahsetmiştik. Array.removeAt ise diziden çıkarılacak veri yerine çıkarılması istenen verinin dizi içerisindeki indeks numarasını alıyor. Söz konusu indeks numarasındaki değer diziden çıkartıldıktan sonra dizinin indeksleri tabi ki yenileniyor. 2 numaralı indeksteki veriyi sildiğinde artık dizinin boyu bir kısalmış olur ve bir numaralı indeksten itibaren tüm değerler bir üst indeks numarasına alınıyor.

ASP.NET AJAX Extension ile beraber gelen yeniliklerden dizilerle ilgili olan metodları inceledikten sonra serimizin bir sonraki yazısında farklı değişken tipleri ile ilgili gelen yeni metodlara ve daha fazlasına bakıyor olacağız.

Hepinize kolay gelsin.

Daron Yöndem
MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD, IEL'03
http://daron.yondem.com