ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 3 - Metin, Tarih ve Sayı Fonksiyonları)

0 dakikada yazıldı

6628 defa okundu

Düzenle

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.