ASP.NET AJAX : Client Script Web Servisler (1)

Giriş

Microsoft ASP.NET AJAX, client script kullanarak browserdan ASP.NET Web Servisler (.asmx dosyaları) çağrılmasını sağlar. Bu, Web uygulamaları geliştiren kullanıcılara katkı sağlar. Sayfa postback ve refresh yapılmadan server-tabanlı metodlar çağrılabilir çünkü web server ve browser arasında sadece veri alışverişi yapılır.

Asp.Net : Diziden eleman silmek

Oluştuduğumuz bir diziden eleman silme işleminin 2 yolu vardır.

1. Dizi elamanın için boşaltmak (clear)


2. Dizi elamanını diziden kaldırmak (remove)

Dizi elemanını temizlemek

Css : Tooltip yapımı (ok işaretli)

Her ne kadar html elemanların tooltip özellikleri olsa da bazen kendimiz bir tooltip yapmak zorunda kalabiliriz. Bir tooltip nasıl oluşturulur inceleyelim.

Javascript : Div içerisindeki elemanlara ulaşmak

Div içerisinde yer alan elemanlara ulaşmak oldukça kolay bir işlemdir. Bu makalede div içerisindeki elemalara ulaşıp bir dizi içerisine atayacağız. Başlayalım :

Javascript : Koordinat Sistemi

Tarayıcıda iki tür koordinat sistemi vardır.

1. document ile ilişkili - sıfır noktası sayfanın sol üst köşesinden başlar


2. window ile ilişkili - sıfır noktası görüntülenen alanın sol üst köşesinden başlar

Dizi (Array) : Javascript ile belli bir index numarasıyla eleman ekleme

Geliştiricinin ihtiyaçları doğrultusunda veya ihtiyaçlarına göre diziler (arrays) ile bir çok iş yapılabilir. Benimde geçenlerde şöyle bir işim çıktı : bir elemanı belirli bir index numarasıyla var olan dizi içerisine yerleştirmem gerekti. Başlangıçta kulağıma kolay geldi fakat çözmek için biraz araştırmak gerekti.

Jquery first child (Seçilen elemanı ilk eleman yapmak)

Bir liste elemanını listenin ilk elemanı olarak seçmek istediğimizde aşağıdaki kodları kullanarak bu işin üstesinden kolayca gelebiliriz.

<div class="pr_content">
 <input type="button" id="bir" value="TEST 1" onclick="bir(event)" />
 <input type="button" id="iki" value="TEST 2" onclick="bir(event)" />
 <input type="button" id="uc" value="TEST 3" onclick="bir(event)" />
</div>

////

Canvas içerisinde resim döndürme

Muhtemelen canvas context drawImage fonksiyonunu biliyorsunuzdur :

context.drawImage(image, x, y);

Drag&Drop,FileApi ve Canvas kullanarak Resize image (resim boyutlandıma)

Normalde resim kaydetmek oldukça basit bir işlem. Bir form içine File input oluşturarak bu işin üstesinden gelinebilir. Fakat bu resim için ön çalışa yapılması gerekirse ne olacak ? Diğer bir deyişle, resmi kaydetmeden önce resize (yeniden boyutlandıra) yapmanız ve dosya türü PNG ve JPG türünde kayıt edilmesi gerekseydi ?  Canvas burada devreye giriyor.

Javascript Slice() nedir ?

Slice metodunun tanımı ve kullanımı

Slice() metodu bir dizide seçilen elamanı geriye bir dizi nesnesi olarak döndürür.

Slice() metod start olarak verilen bağımsız değişkeni ile hangi elamandan başlayacağını seçer ve end değişkeni ile de bitiş elemanını belirler.

FileSystem API'yi keşfetmek

Filesystem API 2014 yılın Nisan ayında bir web uygulaması olarak ilan edildi fakat farklı tarayıcıların teknik özellikleri enine boyuna hesap edilmemişti. Şimdi ise, bu api Chrome tarayıcsına özgü bir yapıda ve ne yazık ki farklı tarayıcılar tarafından geliştirilemiyor veya uygulanamıyor. Ayrıca W3C standarlarına uygun olarak geliştiriliyor.

Javascript kullanarak DataList içerisindeki bir kontrole erişmek

Bir datalist oluşturuyoruz :

---

<asp:DataList ID="DataList1" runat="server">

    <ItemTemplate>

    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>

    <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList>

    </ItemTemplate>

</asp:DataList>

---

Uncaught TypeError: Cannot call method 'getContext' of null

HTML5 ile gelen canvas elemanı sayfa ilk yüklendiğinde oluşturulmalı veya oluşturulan canvas fonksiyonu çağırılmalıdır. Şayet js canvas nesnesinden önce çalışırsa canvas oluşturulamayabilir. Mozilla mdc sitesinde yer alan çözüm metodu aşağıdadır :

Html5 Canvas Resim Döndürme (Image rotate)

Bu makalede canvas içerisinde bir image nesnesinin nasıl döndürüleceği anlatılacaktır. Anlatım kodlar üzerindedir.

Gereksinim : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML :