Javascript ile tarayıcı penceresinde kaydırma işlemleri

   Bu makalemde onscroll fonksiyonunu yakından tanıyacağız. Javascript fonksiyonlarından birisi olan onscroll tarayıcımızın sağ tarafındaki kaydırma çubuğunu aşağı veya yukarı doğru hareket ettirdiğimizde meydana gelen bir olaydır.(event) Gelin basit bir örnek üzerinden bu fonksiyonun ne iş yaptığını anlamaya çalışalım.

 <script>

      window.onscroll = function () {

          alert("Kaydırma çubuğunuzu kaydırdınız.");

      }

  </script> 

Yukarıdaki kodu sayfanıza yapıştırıp tarayıcının sağ tarafındaki kaydırma çubuğunu hareket ettirdiğinizde "Kaydırma çubuğunu kaydırdınız." şeklinde bir mesaj çıkacaktır. (Bu arada ekranınızın sağ tarafında kaydırma çubuğunun gözükebilmesi için dokümanın yüksekliğinin ekran yüksekliğinden fazla olması gerektiğini unutmayın.)

 <script>
      function yukariGit() {
          window.scrollTo(0, 0);
      }
        </script> 

<a href="javascript:yukariGit();">Yukayı git</a>

Yukarıdaki kodlara bir göz atalım. Bazen web sayfalarında dokümanın aşağı kısımlarında yukarı, yukarı git şeklinde yazılar veya yukarı ok işareti görürüz. Tıkladığımızda da dokümanın en üst tarafına geliriz. Yukarıdaki kod da benzer bir işi yapıyor. scrollTo fonksiyonuna x=genişlik, y=yükseklik olmak üzere farklı değerler verebilirsiniz. Böylece ekranın istediğiniz yerine gidebilirsiniz.

Javascript ve C#'ı birlikte kullanmak

   Web programlama ile uğraşırken zaman zaman istemci ve sunucu işlemlerini bir arada yapmak isteyebiliriz. Örneğin sunucu tarafından javascript ile client-side işlemler yapmak veya javascript üzerinde sunucu kontrol ve değişkenlerine erişmek gibi.

Aslında ASP.NET sunucu kontrollerinin bir HTML karşılığı vardır. Örneğin Label sunucu kontrolü html tarafında span etiketine karşılık gelir. Bu yüzden ASP.NET kontrollerinde HTML olayları veya özelliklerini kullanabilirsiniz. Örneğin bir buton üzerinden gidelim. Butonda OnClientClick="test()" diyerek istemci tarafında tıklama olunca mesaj vermek istiyorum.

<script>
   function test(){
       alert("İstemci tarafında tıkladın.");
}
</script>

<asp:Button ID="Button1" onclick="Button1_Click" OnClientClick="test()" runat="server" Text="Button" />

Yukarıdaki kodu sayfanıza ekleyip çalıştırdıktan sonra butona tıklanınca tarayıcı "İstemci tarafında tıkladın." yazan bir pencere açacaktır. Sunucu tarafı da çalışacak orada da sayfaya "Sunucu tarafında tıkladın" yazacaktır.

protected void Button1_Click(object sender, EventArgs e)

        {
            Response.Write("Sunucu tarafında tıkladın");
        }

Tıklama haricinde başka bir olay daha ekleyelim. Fare üzerine gelince "fare üzerine geldi." şeklinde bir mesaj versin.

<script>
   function fareUzerineGeldi() {
          alert("Fare üzerine geldi.");
      }
</script>

<asp:Button ID="Button1" onmouseover="fareUzerineGeldi()" OnClientClick="test()" runat="server" 

Text="Button" onclick="Button1_Click" />

Butonun üzerine farenizi getirdiğinizde "Fare üzerine geldi." diyerek bir mesajla karşılaşıyorsunuz. HTML tarafında aşağıdaki forma dönüşmektedir.

 <input type="submit" name="Button1" value="Button" onclick="test();" id="Button1" onmouseover="fareUzerineGeldi()" />

Şimdi bir de C# tarafına göz atalım. Sunucudan javascript fonksiyonlarını nasıl çalıştırabiliriz. Aşağıdaki kodlara bir göz atalım.

protected void Button1_Click(object sender, EventArgs e) { ClientScript.RegisterClientScriptBlock(this.GetType(), "mesaj", "<script>alert('Merhaba')</script>"); }

Burada sunucu tarafından javascipt kodlarını ekleyerek çalıştırdık.

Editör Ajax Kontrolü Türkçe Karakter Sorunu Çözüm Önerisi

Html editör kullanırken Türkçe karakter sorunu yaşıyorsanız eğer NoUnicode özelliğini True yapmanız sorununuzu çözebilir.