document.ready ve window.onload yada pageLoad arasındaki farklar

pageLoad() ve jQuery’nin $(document).ready() olaylarının aynı şeyi yaptığını sanırız. Her iki metod basit bir uygulamada kullanıldığında aynı sanılır fakat aralarında işleyiş olarak çok fark vardır. Bu makale bu farkları gösteremeye çalışacağım.

$(document).ready() metodunu tanıyalım

ASP.NET : (Basitçe) SignalR Nedir ?

SignalR Nedir ?

• ASP.NET uygulamaları için gerçek zamanlı ve http tabanlı asenkron haberleşiminin kalıcı olmasını veya kopmadan devam etmesini sağlayan frameworkdür.


• JavaScript desteği olan tüm tarayıcılarda çalışır


• Server ve client taraflı APIs yapılmasını sağlar


• Self-host edilebilir. Self hosting nedir ? 

Javascript : __doPostBack fonksiyonu (ASP.NET Postback mekanizması)

__doPostBack fonksiyonu nedir ve ne yapar ? ASP.NET web server kontrolleri Button ve ImageButton dışında postback tetiklemesi için __dosPostBack  fonksiyonunu kullanır. Bu aslında klasik asp.net postback mekanizmasıdır.

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.

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>

---

JavaScript image dropdown

Eski moda dropdownlardan sıkıldıysanız bu yeni image combo box eklentisini deneyin. Her seçeneğe bir icon ekleyebilirsiniz. Eklediğiniz select elemanı ile uyumlu çalışacaktır yada JSON object yaratabilirsiniz. Bu size kalmış. Başlayalım :

ASP.Net ile Jquery  autocomplete yapmak (3)

Son makalemizde css dosyamızı oluşturup, jquery versiyonlarımızı çağırarak autocomplete işlemini sonlandırıyoruz.

Aşağıdaki dosyaları ascx dosyamızın içine ekliyoruz :

<link rel="Stylesheet" href="<%= ResolveUrl ("Styles/jquery-ui-1.10.4.custom.css") %>" />
<script src="<%= ResolveUrl ("Scripts/jquery-1.10.2.js") %>"></script>
<script src="<%= ResolveUrl ("Scripts/jquery-1.11.2.js")%>"></script>

Dosyaların linki : https://www.dropbox.com/sh/32nevb0zuiu23cj/AABOLAFqRdaXIzT-FQoUMWURa?dl=0

Herşey tamamsa aşağıdaki ekran çıktısını göreceksiniz. (Unutmayın üç harften sonra arama başlayacak.)

Javascript ile resim döndürmek (image rotating)

Javascript ile resim döndürmek mümkün müdür ? Tabi ki. Bu makaleyi takip ederek Javascript ile resimleri nasıl döndüreceğinizi öğrenebilirsiniz.

En kolay işle başlayalım. Aşağıdaki satırlar ekleyelim :

<img src="/article-sources/images/plane-1.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>

Yukarıda döndüreceğimiz resmi CANVAS (döndürülen resmi görüntülemek için kullanılacak) tagımıza ekliyoruz. CANVAS tag sadece Chrome, FF, Opera, Chrome IE8 ve Safari tarafından desteklniyor. IE6 VE IE7 CANVAS desteklemiyor.

Şimdi resmi nasıl döndüreceğimizi inceleyelim. Güncel tarayıcıların bir çoğu <canvas> nesnesini destekliyor aslında 2D context içindeki 'rotate' ve 'drawimage' metodlarının kullanımına izin veriyorlar. IE6 ve IE7 ise bu tagı tanımıyor. Bu nedenle Microsoft "DXImageTransform.Microsoft.BasicImage" üzerinde geliştirme yaparak rotation (döndürme) metodu ortaya çıkardı (Link : http://msdn.microsoft.com/en-us/library/ms532918%28VS.85%29.aspx).  İyi haber  kullanımı basit fakat sadece dört açı (0, 90, 180 ve 270 açıları) desteklemesi bir handikap olarak karşımıza çıkıyor.  IE Resim döndürme kodu aşağıdaki gibidir  :

//  DXImageTransform.Microsoft.BasicImage  MSIE Kullanımı
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

CANVAS tagını destekleyen tarayıcılarda ki kullanım şekli ise aşağıdaki gibidir :

var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;

//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}

//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

X/Y kordinatlarını değiştirmek için drawImage fonksiyonunu kullanmak zorundayız. Kolay gelsin.

Kodların Son Hali :

HTML : 

<div id="page">
<h1>How to Rotate Images using JavaScript</h1>

<div>
<img src="image/prvTwin Sunset.jpg" alt="" id="image" width="150" />
<canvas id="canvas"></canvas>
</div>
<p>
<strong>Rotate Image: </strong>
<a href="javascript:;" id="resetImage">Reset Image</a>
<a href="javascript:;" id="rotate90">90</a>
<a href="javascript:;" id="rotate180">180</a>
<a href="javascript:;" id="rotate270">270</a>
</p>

</div>

JS :

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript">
var img = null, canvas = null;

$(document).ready(function () {
// Initialize image and canvas
img = document.getElementById('image');
canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
img.style.visibility = 'hidden';
}
rotateImage(0);

// Handle clicks for control links
$('#resetImage').click(function () { rotateImage(0); });
$('#rotate90').click(function () { rotateImage(90); });
$('#rotate180').click(function () { rotateImage(180); });
$('#rotate270').click(function () { rotateImage(270); });
});

function rotateImage(degree) {
if (document.getElementById('canvas')) {
var cContext = canvas.getContext('2d');
var cw = img.width, ch = img.height, cx = 0, cy = 0;

// Calculate new canvas size and x/y coorditates for image
switch (degree) {
case 90:
cw = img.height;
ch = img.width;
cy = img.height * (-1);
break;
case 180:
cx = img.width * (-1);
cy = img.height * (-1);
break;
case 270:
cw = img.height;
ch = img.width;
cx = img.width * (-1);
break;
}

// Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);
}
else {
// Use DXImageTransform.Microsoft.BasicImage filter for MSIE
switch (degree) {
case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}
}
}
</script>

DEMO

Kaynak : http://www.ajaxblender.com/howto-rotate-image-using-javascript-canvas.html

ASP.NET ile Jquery autocomplete yapmak (1)

Bir önceki makalemde asp.net ile autocomplete kullanımını işlemiştim. Dileyen Ajax AutoComplete Extender ile gelişmiş arama linkinden ilgili makaleyi inceleyebilir. Yine aynı konunun devamı olan bir makale daha yazıyorum. Ancak bu sefer Jquery kullanarak ve daha gelişmiş bir arama motoru yapacağız. Daha önce bu işlemi Ajax AutoComplete Extender ile yapmışken şimdi neden tekrar yaptığımı merak edebilirsiniz. Birinci sebebi bu modül daha gelişmiş olacak. Bir web servis kullanacağız.

Html5 ile dialogbox yapmak

Bu makalemizde Html, Css ve JavaScript kullanarak dialog box yapmayı inceleyeceğiz.

Htmle aşinalığız var ise meşhur alert() fonkisyonunu kullanmışsınızdır. Şayet alert ("Merhaba Dünya") yazarsanız aşağıdaki gibi bir dialog box dönecektir.

Label doluyor fakat code-behind sayfasında boş dönüyor

Label client formunun bir elemanı olmadığı için code-behind sayfasından çağrılamaz. Bunun yerine hiddenfield (input type="hidden" elementin yerine geçer) yada texbox (input type="text" elamanın yerine geçer) kullanılır. Örnek kullanım:

CheckBox display="none" sorunu

Javascript kodları ile checkbox nesnesi görünmez yapmak için display özelliğinden yararlanırız. Ancak bu özellik label ve textbox ile olan kullanımdan biraz farklıdır. Örn ;

 document.getElementById("<%= TextBox1.ClientID %>").style.display = "none";

Yukarıdaki satır bir textbox veya label kontrolünü görünmez yapmak için yeterlidir. Fakat Aynı yöntemi checkBox'a uyguladığımızda checkbox textinin silinmediğini ve check işareti konulan kutucuğun kaybolduğunu göreceğiz. Tüm checkbox'ı görünmez yapmak için :

 document.getElementById("<%= TextBox1.ClientID %>").parentNode.style.display = "none";

şeklinde bir kullanım işimizi görecektir.

Kolay gelsin

Asp.Net Javascript ile label ve textbox değerini değiştirmek

1. Textbox çağrılır
   
    var test = document.getElementById("<%= TextBox1.ClientID %>");
   
   test.value = "İçerik"; //içerik değiştirilir
   
   


2. Label çağrılır
   
   var test = document.getElementById("<%= Label1.ClientID %>"); 
   
   test.InnerHtml  = "İçerik"; //içerik değiştirilir
   

Aradaki fark label kontrolüne değer verirken InnerHtml, textbox'ta ise value metodlarını kullanmaktır.

Not : Bazen verdiğimiz değerlerin kullanıcıya görünmesini istemeyiz. Bunun için properties tablosundan visible özelliğini false yapmamız yeterliydi. Ancak bu durumda Javascript kontrolümüzü tanımayacak veya görmeyecektir. Peki ne yapacağız ? Gizleme özelliğini JavaScript kodları içerisinden verirsek bu sorunu aşmış olur. Örn ;

Label1.style.display = "none";

Kolay Gelsin