• Anasayfa
  • Hakkımızda
  • Etkinlikler
  • Destek Verin
  • Site Haritası
  • Giriş Yap
  • Üye Ol
  • Facebook
  • Twitter
  • RSS
Yazılım Dilleri
  • Soru - Cevap
  • EĞİTİM SETİ
  • KATEGORİ
  • DUYURU
  • TEKNOLOJİ HABERLERİ

Son Sorular

  • 8/2/2020 11:38:31 PM'Basit' Yazılım Dili
  • 6/25/2020 3:18:13 PMderleme hatası
  • 12/11/2017 4:49:15 PMWindows Hizmeti Hk.
  • 4/23/2016 12:55:33 AMC programlama 2 oyun

Popüler Sorular

  • 5/27/2012 5:49:50 AMAsp.Net ile Date time alana veri ekleyemiiyorum ?
  • 4/2/2012 12:45:18 AM.exe uzantılı dosya için dijital imza nerde nasıl alınır.
  • 5/12/2012 8:44:49 AMAcil Yardım
  • 5/27/2012 1:46:51 PMveri tabanı bağlantısı
  • .Net Framework
  • 8085 Assembly
  • Active Directory
  • ADO.NET
  • Android
  • Apple IOS
  • Arduino
  • ASP.NET
  • ASP.NET MVC
  • Blackberry
  • C#.Net
  • C++
  • CCG Framework
  • CISCO
  • CSS
  • Diğer
  • Dreamweaver
  • Entity Framework
  • Exchange Server
  • Gömülü Sistemler
  • GSM Programlama
  • Güncel
  • Güvenlik
  • HTML5
  • Java
  • Javascript / JQuery
  • Jira
  • Kariyer ve İş Yaşamı
  • LibreOffice
  • LINQ
  • Linux
  • Matlab
  • Microsoft Dynamics CRM
  • Mobil Uygulama Geliştirme
  • MySQL
  • NoSQL
  • Oracle
  • OWIN
  • PFSense
  • PHP
  • Powershell
  • Python
  • Sanallastirma
  • SAP-ABAP
  • SCOM 2012
  • SEO
  • Sharepoint 2010
  • Sharepoint 2013
  • Silverlight
  • Sistem Analiz ve Tasarımı
  • SQL Server
  • Symantec
  • TFS
  • T-SQL
  • Ubuntu
  • VB.NET
  • Veritabanı Yönetim Sistemleri
  • Visual Studio
  • VMware
  • WCF
  • Web Hosting
  • Windows 8
  • Windows Azure
  • Windows Phone 7.1
  • Windows Phone 8
  • Windows Server
  • Wordpress
  • WPF
  • Xamarin
  • XNA
  • Yazılım Mühendisliği
  • Yöneylem Araştırması
  • ASP.NET MVC
  • Entity Framework
  • Javascript / JQuery
  • LINQ
  • PHP

Son Duyurular

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

IPhone 6 ve IPhone 6 Plus Teknik Özellikleri ve Fiyatı

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

DELL'in Yeni Projesi: USB Bilgisayar (Project Ophelia)

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Windows Phone Youtube Uygulaması Google ve Microsoft ile Yeniden Yapılıyor

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Android ve Apple IOS Telefonlar için Blackberry Messenger (BBM)

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

Nokia Lumia 925 Teknik Özellikleri, Lumia 928 ve 920 ile Karşılaştırması

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

LG Optimus G Pro Özellikleri ve Gözle Video Oynatma Teknolojisi

ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 4 - DOM Fonksiyonları)

ASP.NET AJAX Extension JavaScript İstemci Özellikleri (Bölüm 4 - DOM Fonksiyonları)

10.03.2010

Yazar: Daron Yöndem (Google+)

Kategori: ASP.NET

5497

Bir önceki yazımızda ASP.NET AJAX Extension ile beraber gelen istemci tarafındaki sayısal, metin ve tarih değişkenleri ile ilgili fonksiyonları inceledikten sonra sıra DOM objeleri ile ilgili metodlara geldi. İstemci tarafında JavaScript kodu kullanırken sıklıkla yaptığımız işlemler arasında sayfanın görsel özellikleri üzerinde oynamak geliyor. Bazen tüm sayfanın bazen de sayfadaki belirli elementlerin farklı özelliklerini JavaScript ile değiştirmemiz gerekebiliyor. Bu durumda artık eski stil JavaScript komutları ile boğuşmaktansa ASP.NET AJAX Extension ile beraber gelen yeni komutları kullanabiliriz. Yazı boyunca olabildiğince yeni özellikleri eski muadilleri ile karşılaştırarak ilerliyor olacağız.

$get Metodu

Sayfa içerisindeki HTML elementleri üzerinde JavaScript ile değişiklik yapabilmek için söz konusu elementleri sayfada bulmuş veya bir anlamda yakalamış olmamız gerekir. Elimizde olmayan bir obje üzerinde değişiklik yapmamız da mümkün olmayacaktır. Gelin ilk olarak eskiden bu işi nasıl yapıyorduk ona bir bakalım.

document.getElementById("Label1").innerHTML= "Birinci Metin geldi.";

Yukarıdaki kodu kullanarak sayfa içerisinde yer alan Label1 adındaki nesneyi yakalayarak JavaScript ile içeriğini değiştirebiliyoruz. Tabi bu kodu kullanmak için sayfamızda ScriptManager yer alması gerekmiyor. Peki projemiz hali hazırda bir ASP.NET AJAX projesi ise ve sayfamızda bir ScriptManager var ise ne kullanabiliriz?

    Sys.UI.DomElement.getElementById("Label1").innerHTML= "Metin geldi.";

ASP.NET AJAX Extension ile beraber gelen yapı yukarıdaki gibi. "Bunun neresi daha kolay?" deyişinizi duyar gibiyim. Kesinlikle haklısınız hiç de kolay değil, hatta bariz bir şekilde daha uzun bir kod söz konusu. Ama Microsoft tarafındaki geliştiriciler de zaten durumun farkında bu nedenle bu JavaScript sınıfları için birer kısayol komutu da tanımlamışlar.

    $get("Label1").innerHTML= "Metin geldi.";

Ne kadar kolay değil mi? Gerçekten de öyle. Sadece $get metodunu kullanarak yakalamak istediğimiz elementin ID bilgisini vermemiz yeterli. Elementi yakaladıktan sonra üzerinde her tür işlem yapabilirsiniz.

addCssClass Metodu

Sayfamız içerisindeki HTML elementlerini yakaladıktan sonra sıra geldi elementlerin görsel özelliklerini değiştirmeye. Bunun için ilk aşamada farklı görsel özellikleri tanımlayan birer CSS sınfı hazırlayalım.

       <style type="text/css">
.baslik1 {
       font-family: Arial, Helvetica, sans-serif;
       font-size: large;
       font-weight: bold;
       text-transform: uppercase;
       color: #FF0000;
}
.baslik2 {
       font-family: Arial, Helvetica, sans-serif;
       font-size: medium;
       font-weight: bold;
       font-variant: small-caps;
       color: #C0C0C0;
}
</style>

CSS sınıflarımızı yukarıdaki gibi tanımladıktan sonra bu CSS sınıflarını JavaScript ile yakaladığımız elementlere yine JavaScript ile ekleyeceğiz. Kodumuz aşağıdaki gibi olacak.

    Sys.UI.DomElement.addCssClass($get("Label1"), "baslik2");

Maalesef addCssClass metodu için bir kısayol metodu bulunmuyor, bu nedenle tam yolunu yazmamız şart. Örneğimizde de gördüğünüz üzere $get metodu ile sayfadaki Label1 nesnesini yakaladıktan sonra addCssClass metoduna birinci parametre olarak veriyoruz. Böylece addCssClass kendisine ikinci parametre olarak verdiğimiz isimdeki CSS sınıfını hangi HTML elementine ekleyeceğini de algılayabiliyor. Dikkatinizi çektiyse yukarıda iki adet CSS sınıfı tanımladık. Bir objenin CSS sınıfını değiştirmek isterseniz, yani söz konusu HTML elementinin CSS özelliğine addCssClass ile baslik1'i ekledikten sonra baslik2 CSS sınıfını eklemek isterseniz maalesef görsel olarak birşey değişmeyecektir. Bunun nedeni bir HTML elementine sadece bir CSS sınıfı ekleyebileceğinizdendir. Peki ne yapacağız? Tabi ki eklediğimiz CSS sınıfını önce çıkaracağız sonra da diğerini ekleyeceğiz. HTML elementlerinden CSS sınıfı çıkarmak için kullanacağımız metodu bir sonraki bölümde inceleyeceğiz.

removeCssClass Metodu

Bir önceki bölümde HTML elementlerine CSS sınıfları ekledik. Şimdi sıra geldi çıkarmaya. CSS sınıfını söz konusu elementten çıkartırsak başka bir CSS sınıfı ekleyebileceğiz.

    Sys.UI.DomElement.removeCssClass($get("Label1"), "baslik2");

Yukarıdaki kodumuz ile removeCssClass metoduna verdiğimiz ilk parametredeki HTML elementinden ikinci parametrede verdiğimiz CSS sınıfı çıkartılıyor. Böylece bir sonraki aşamada addCssClass metodu ile başka bir CSS sınıfını elementimize ekleyebiliriz.

containsCssClass Metodu

HTML elementlerine bir CSS sınıfını ekleyip eklemediğinizi kontrol etmeniz gerektiğinde containsCssClass metodunu kullanabilirsiniz.

<script language="javascript" type="text/javascript">
function Resim()
{
    if (Sys.UI.DomElement.containsCssClass($get("Image1"), "gizle"))
    {
        Sys.UI.DomElement.removeCssClass($get("Image1"), "gizle");
        Sys.UI.DomElement.addCssClass($get("Image1"), "goster");
    }
    else
    {
        Sys.UI.DomElement.removeCssClass($get("Image1"), "goster");
        Sys.UI.DomElement.addCssClass($get("Image1"), "gizle");
    };
}
</script>

Yukarıdaki Resim JavaScript fonksiyonumuz sayfada bulunan Image1 adında bir nesneyi bularak eğer CSS sınıfı gizle şeklinde verilmiş ise goster yapıyor, aksi halde ise gizle yapıyor. gizle ve goster CSS sınıflarını aşağıda inceleyebilirsiniz.

       <style type="text/css">
        .gizle {
               display: none;
        }
        .goster {
               display: block;
        }
    </style>

Söz konusu CSS sınıflarımız HTML elementi üzerinde değiştirildiğinde elementimiz sayfada bir görünmez olacak bir görünür olacak.

toggleCssClass Metodu

Geldik CSS sınıfları ile ilgili benim en sevdiğim fonksiyona. Tüm yukarıda öğrendiklerimizin ötesinde eğer bir HTML elementinin CSS sınıfını değiştirmek istiyorsanız kısa yoldan toggleCssClass metodunu da kullanabilirsiniz. Metodumuz hedef HTML elementinin CSS sınıfını verdiğimiz başka bir sınıf ile değiştiriyor. Gelin bir önceki bölümümüzde JavaScript kodumuzu toggleCssClass metodunu kullanarak baştan yazalım.

<script language="javascript" type="text/javascript">
function Resim()
{
    if (Sys.UI.DomElement.containsCssClass($get("Image1"), "gizle"))
    {
        Sys.UI.DomElement.toggleCssClass($get("Image1"), "goster");
    }
    else
    {
        Sys.UI.DomElement.toggleCssClass($get("Image1"), "gizle");
    };
}
</script>

Gördüğünüz gibi kodumuz çok daha kısa ve sade oldu. toggleCssClass metodunun kullanımı da aynı addCssClass metodu gibi. CSS sınıfını değiştireceğimiz HTML elementi ile birlikte atanacak CSS sınıfının adını sırası mile parametre olarak vermemiz yeterli.

İstemci taraflı ASP.NET AJAX Extension JavaScript yeniliklerini incelediğimiz serimizin bu yazısında DOM üzerinde işlem yapmayı ve görsel özelliklerle ilgili atamalar yapmayı inceledik. Bir sonraki yazımızda JavaScript handler işlemlerine değineceğiz.

Hepinize kolay gelsin.

Yazar Hakkında

Daron Yöndem

Daron Yöndem

daron.yondem.com

DEVELOAD Yazılım şirketi kurucusu Daron Yöndem ASP.NET alanında aldığı MVP ünvanını son üç yıldır Silverlight alanında devam ettirmektedir. Microsoft Regional Director ünvanına da sahip olan Daron Yöndem’e 2009, 2010 ve 2011 yıllarında Microsoft tarafından “Gold Global Impact Award” ödülü verilmiştir. Microsoft TechEd, PDC, DevReach, Microsoft DevDays gibi uluslararası konferanslarda konuşmacı olan Daron Yöndem INETA (International .NET Association) Orta-Doğu Afrika Bölge Başkanlığı görevini sürdürürerek 262.000’i aşkın üyesi olan 58 sosyal topluluğa destek vermektedir. Üç Türkçe, üç İngilizce kitabı olan Daron Yöndem’in Wrox Publishing gibi uluslararası yayınevlerinden kitapları bulunmaktadır.

Sosyal Medya

ORANLAR

  • 5497izleme

Arkadaşlarınla Paylaş

  • Tweet

0 Yorum

Yorum Yaz / Soru Sor

Lütfen yorum yazmak veya soru sormak için üye girişi yapınız.

Son Yorumlar

  • Böyle bir sayfalama ağ trafiğini hafifleti...
  • Böyle bir sayfalama ağ trafiğini hafifleti...
  • Merhaba, ellerinize sağlık çok yardımcı ol...
  • Merhaba Bu uygulama örneğinden ASP.net ...
  • Hocam Link başka sayfaya yönlendiriyor.

En Güncel Sorular

  • Bilgilendirme maili (C#.Net)
  • Power Pivot (Sharepoint 2010)
  • BigInteger, BigDecimal (Asp.Net ve Asp.Net MVC)
  • visual C# ile asp nette veritabanı islemleri (Asp.Net ve Asp.Net MVC)
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ? (Sharepoint 2010)

En Son Cevap Verilen Sorular

  • Bilgilendirme maili
  • BigInteger, BigDecimal
  • visual C# ile asp nette veritabanı islemleri
  • Share Point ile Dosya Arşiv Yönetim Sistemi yapılabilir mi ?
  • txt dosyasına veri yazma

Twitter

Takip et: @yazilim_dilleri

En Çok Okunanlar

Elif BAYRAKDAR

C# ile SQL Server Bağlantısı, Insert, Update ve Delete Sorguları

23.05.2013

  • 123776
  • 0
Hakan Keskin

C# ile Windows Service Projesi Oluşturma, Debug Etme ve Setup Hazırlama

17.12.2013

  • 70839
  • 0
batuhan avlayan

Php - Mail Gönderme (İletişim Formu)

02.09.2013

  • 51496
  • 0

Sponsorlar

KODLAB
Pluralsight
Exchange server is
Office 365
YAZILIM DİLLERİ
Yukarı Çık
  • Hakkımızda
  • Facebook
  • Twitter
  • RSS

© Yazılım Dillerinin Buluşma Noktası | Kaynak belirtildiği sürece makaleler kopyalanabilir.
YazilimDilleri.Net sitesinde yer alan kullanıcıların oluşturduğu tüm içeriklerin yayınlanması ile ilgili yasal yükümlülükler içeriği oluşturan kullanıcıya aittir, YazilimDilleri.Net hiçbir şekilde sorumlu değildir.

Kapat

Giriş Yap

Kullanıcı Adı

Şifre

Şifremi Unuttum

KULLANICI GİRİŞİ