ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 2 - Diziler)

0 dakikada yazıldı

6414 defa okundu

Düzenle

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.