Makale Özeti

ASP.NET AJAX Extension ile gelen JavaScript yeniliklerini incelediğimiz bu makale serimizin bu bölümünde Sayısal, Metin ve Tarih değişkenleri ile kullanabileceğimiz istemci tarafklı yapıları inceliyoruz.

Makale

ASP.NET AJAX Extension ile gelen JavaScript özelliklerini incelediğimiz serimize devam ediyoruz. Bu sefer inceleyeceklerimiz arasında farklı değişken tiplerine özel olarak gelen ve bizim aslında çoğuna .NET tarafında alışkın olduğumuz metodlar var.

String.endsWith ve String.startsWith

Herhangi bir JavaScript değişkenine eğer metin tipinde bir değer aktarılmış ise başlangıç veya son kısmında belirli bir metnin bulunup bulunmadığını kontrol etmek için String.endsWith ve Strings.startsWith metodlarını kullanabilirsiniz. Bu metodlar daha önceki yazılarımızda bahsettiğimiz metodlardan farklı olarak direk değişkenlerin tanımına ekleniyor. Sanırım ufak bir uygulama ile konuyu hızlıca netleştirebiliriz.

<%@ 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 Metin = "Daron Yöndem";
        alert(Metin.startsWith("Daron"));
        // Sonuc = True
        alert(Metin.endsWith("m"));
        // Sonuc = True
    }
    </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 Button1 düğmesine tıklandığında çalıştırılan Yarat JavaScript fonksiyonu bir metin değişkeni yarattıktan sonra direk değişken üzerinden Metin.startsWith şeklinde bir kullanım ile değişkenin belirli bir metin ile başlayıp başlamadığını veya sonlanıp sonlanmadığını kontrol ediyor. Metodları direk değişken üzerinden kullandığımız için metodlara verdiğimiz tek parametre aratmak istediğimiz metnin kendisi. Sonuç olarak her iki metod da True veya False şeklinde birer Boolean değer döndürüyorlar.

String.trim, String.trimEnd ve String.trimStart

Trim fonksiyonu .NET tarafında sıkça kullandığımız tanıdık fonksiyonlardan biri. Artık bu fonksiyonu JavaScript tarafında da rahatlıkla kullanabiliyoruz. Trim fonksiyonuna ek olarak trimEnd ve trimStart adında metin değişkenlerinin başındaki veya sonundaki boşlukları silen fonksiyonlar da mevcut. Standard Trim fonksiyonumuz .NET'te olduğu gibi metnin hem başındaki hem de sonunda boşlukları siliyor.

<%@ 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 Metin = "    Yondem    ";
        alert("x" + Metin.trim() + "x");
        // Sonuc = "xYondemx"
        alert("x" + Metin.trimEnd() + "x");
        // Sonuc = "x    Yondemx"
        alert("x" + Metin.trimStart() + "x");
        // Sonuc = "xYondem    x"
        alert(Metin.toLowerCase());
    }
    </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>

Tüm örneklerimizdeki ile aynı yapıyı kullanarak yine sayfada bulunan bir düğmeye tıklayarak Yarat JavaScript fonksiyonunu çalıştırıyor olacağız. Fonksiyonumuz kendi tanımladığı bir metin değişkenine hem başında hem de sonunda bolca boşluk olan bit metin aktararak sırasıyla hem başında hem sonunda boşlukları silerek tüm Trim metodlarını deniyor ve sonuçları kullanıcıya gösteriyor. Özellikle sonucu kullanıcıya gösterirken boşluklar daha net gözüksün diye metinlerine başında ve sonunda ekstra olarak birer x harfi koydum. Oluşan sonuçları ayrıca kod içerisindeki yorum satırlarında da görebilirsiniz.

String.format

String.format metodu özellikle bir metnin içerisinde başka metinler yerleştirmek için sıkça kullandığımız metodlardan biri. Sunucu tarafındaki kullanımı ile aynı şekilde artık istemci tarafında da bu metodu kullanma şansımız var.

<%@ 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 ay = "Ocak";
        var gun = "Pazartesi";
        var Metin = String.format("Bugün aylardan {0} ve günlerden {1}", ay, gun);
        alert(Metin);
        // Sonuc = Bugün aylardan Ocak ve günlerden Pazartesi
    }
    </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>

Sayfadaki düğmeye basıldığında çalışacak olan Yarat fonksiyonumuz kendi içerisinde tanımlanan ay ve gun değişkenleri içerisindeki metinleri String.format ile başka bir metnin içerisine yerleştirecek ve sonrasında da Metin değişkenine aktaracak. String.format metoduna verdiğimiz metin içerisinde süslü tırnak işaretleri arasında indeks numaraları yer alıyor. Sıfırdan başlayarak devam eden bu numaralar ile aynı sırada bu numaraların metin içerisindeki yerlerine yerleşecek olan değerleri taşıyan değişkenleri de parametre olarak String.format metoduna vermemiz gerekiyor.

String.toLowerCase ve String.toUpperCase

Herhangi bir metni istemci tarafında büyük harften küçüğe veya küçük harften büyük harfe çevirmek için kullanabileceğimiz CSS özelliklerinin yanı sıra JavaScript tarafında da kullanabileceğimiz alternatiflerimiz mevcut. String.toLowerCase metodu direk değişkenlerin isimleri ile beraber kullanılarak geriye küçük harflerden oluşan bir metin döndürüyor. Aynı şekilde .toUpperCase metodu da geriye büyük harflerden oluşan metinler döndürebiliyor. Örneğimizle devam edelim.

<%@ 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 buyuk = "BUYUK HARFLERDI BUNLAR";
        var kucuk = "kucuk harflerdi bunlar";
        alert(buyuk.toLowerCase());
        //SONUC = "buyuk harflerdi bunlar"
        alert(kucuk.toUpperCase());
        //SONUC = "KUCUK HARFLERDI BUNLAR"
    }
    </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>

Örneğimizde iki farklı değişken yaratarak içlerine tamamen büyük harflerden veya tamamen küçük harflerden oluşan metinler aktarıyoruz. Sonrasında bu değişkenlerşn .toLowerCase veya .toUpperCase metodlarını kullanarak harflerin durumunu değiştirerek kullanıcıya gösteriyoruz. Alacağınız sonuçları kod içerisinde yorum satırlarında inceleyebilirsiniz.

String.indexOf

Metin değişkenleri içerisinde belirli bir yazının tam olarak metnin neresinde olduğunu öğrenmek istediğimizde sunucu tarafından alışık olduğumuz .indexOf metodu artık istemci tarafında da yardımımıza koşuyor. .indexOf metoduna parametre olarak aratmak istediğimiz metni veriyoruz ve arattığımız metnin hedef metin içerisinde bulunduğu yerdeki ilk karakterin indeks numarasını alabiliyoruz.

<%@ 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 buyuk = "Ahmet ile Mehmet gezmeye gittiler.";
        alert(buyuk.indexOf("Mehmet"));
        //SONUC = 10
    }
    </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çerisindeki buyuk adındaki metin değişkeninde kısmen uzun bir metin yer alıyor. Bu metin içerisinde bir kelimeyi aratarak kelimenin başladığı harfin hedef metin içerisinde kaçıncı harften başladığını bulabiliyoruz. Yukarıdaki örnek içerisinde .indexOf metodu geriye 10 değerini döndürerek aradığımız metnin hedef metin içerisinde onuncü karakterden başlayarak yer aldığını belirtiyor.

Date.format

Sadece metin değişkenleri için değil, tarih değişkenleri için de güzel yenilikler söz konusu. Örneğimizde bir metin değişkeni yaratarak .toString metodu ile değerini kullanıcıya göstereceğiz. Sonra da söz konusu metin değişkenine bir format uygulayarak tekrar kullanıcıya göstereceğiz. Aradaki farkı hep beraber görelim.

<%@ 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 tarih = new Date();
        alert(tarih.toString() + "<br>");
        //SONUC = Fri Jan 16 16:50:31 UTC+0200 2007
        tarih = tarih.format("d");
        alert(tarih.toString() + "<br>");
        //SONUC = 01/16/2007
    }
    </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="Goster();" />
    </form>
</body>
</html>

.format metodunu da önceki metodlar gibi direk değişkenler üzerinden kullanabiliyoruz. Sunucu taraflı .NET programlamadan alışık olduğumuz format değerlerini vererek aynı sunucu tarafında olduğu gibi istemci tarafında da tarihlerin gösterilme biçimlerini değiştirebiliyoruz.

Number.format

Bu yazımızda son olarak sayıları istemci tarafında biçimlendirmek için kullanabileceğimiz Number.format metoduna değineceğiz. Yazımızın konusu haricinde olduğu için biçimlendirme metinleri ile ilgili detaylara girmeyeceğim. Hızlı bir örnek ile JavaScript tarafında herhangi bir sayıyı para değeri gibi göstermeyi deneyeceğiz. Gösterdiğimiz sayının bin ayracı ve iki ondalık basamağı olacak.

<%@ 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 sayi = 4390;
        alert(sayi.toString());
        //SONUC = 4390
        sayi = sayi.format("c");
        alert(sayi.toString());
        //SONUC = 4,390.00
    }
    </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>

JavaScript ile yarattığımız sayısal bir değişkenin formatını .format metodu ile parasal değere (currency) çevirerek kullanıcıya gösterdiğimizde sayının binler ayracı ve iki ondalık basamağı olduğunu görüyoruz.

Serimizin bu yazısında da metin, sayısal ve tarih değişkenlerine eklenen JavaScript fonksiyonları göz attık. Bir sonraki yazıda JavaScript ile DOM üzerinde yapabileceğimiz işlemlerle ilgili gelen yeniliklerden bahsedeceğiz.

Hepinize kolay gelsin.

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