Çağdaş Korkut » JavaScript http://www.cagdaskorkut.net Thu, 09 Feb 2012 03:25:28 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 JavaScript – setTimeout() http://www.cagdaskorkut.net/2008/12/javascript-settimeout/ http://www.cagdaskorkut.net/2008/12/javascript-settimeout/#comments Sat, 06 Dec 2008 12:38:22 +0000 Çağdaş http://blog.cagdaskorkut.com/?p=221
Rating: 5.5/10 (4 votes cast)


İlgili yazılar:
  1. ASP.Net – JQuery – JSON
  2. JQuery ile ASP.Net DropDownList’te seçilen değeri almak
]]> Sayfanızda bulunan bir JavaScript fonksiyonunun belirli bir süre sonra çalışmasını istiyorsanız bu setTimeout() fonksiyonunu kullanmanız gerekiyor.

Kullanımı:

setTimeout(“çalışması istenen fonksiyon(para,metre,ler);”, milisaniye cinsinden beklenecek süre);

şeklinde gayet kolay.

Örneğin facebook’ta bir mesaj gönderdiğiniz zaman “mesaj gönderildi” iletisini içeren bir mesaj kutusu açılır ve bir süre sonra kaybolur. Kabataslak öyle bir şey yapmak istersek kodumuz şöyle olacaktır:

setTimeout(“hideSentMessageBox(msgBoxDivId);”, 3000);

Bu kod ile sayfamızda belirli bir id’ye sahip olan bir nesneye 3 saniye sonra bir şeyler yapacağız. Ne yapacağımızı o fonksiyonun içinde tanımlıyoruz. Örnek:

function hideSentMessageBox(divId)
{
$(‘#’ + divId).hide();
}

Hepsi bu kadar. Ne güzel.

!Dikkat! hideSentMessageBox fonksiyonu içinde JQuery fonksiyonu kullandığımız için JQuery kütüphanesinin bu sayfada yüklenmiş olması gerekiyor. O nasıl olacak diyorsanız sizi şu sayfaya alayım.


Rating: 5.5/10 (4 votes cast)


İlgili yazılar:

  1. ASP.Net – JQuery – JSON
  2. JQuery ile ASP.Net DropDownList’te seçilen değeri almak

]]> http://www.cagdaskorkut.net/2008/12/javascript-settimeout/feed/ 1 JQuery ile ASP.Net DropDownList’te seçilen değeri almak http://www.cagdaskorkut.net/2008/12/jquery-ile-aspnet-dropdownlistte-secilen-degeri-almak/ http://www.cagdaskorkut.net/2008/12/jquery-ile-aspnet-dropdownlistte-secilen-degeri-almak/#comments Tue, 02 Dec 2008 01:45:05 +0000 Çağdaş http://blog.cagdaskorkut.com/?p=202
Rating: 10.0/10 (2 votes cast)


İlgili yazılar:
  1. ASP.Net – JQuery – JSON
  2. JavaScript – setTimeout()
]]> JQuery kullanarak HTML Form içinde bulunan <select> grubundaki seçilen öğenin değerini (value) almak için

$(‘#selectGrubununIDsi’).val();

şeklinde bir komut kullanabiliyoruz.

ASP.Net DropDownList objesinin seçili değerini almak için ise

$(‘#<% = ddlID.ClientID %>’).val();

şeklinde kullanabiliyoruz.


Rating: 10.0/10 (2 votes cast)


İlgili yazılar:

  1. ASP.Net – JQuery – JSON
  2. JavaScript – setTimeout()

]]> http://www.cagdaskorkut.net/2008/12/jquery-ile-aspnet-dropdownlistte-secilen-degeri-almak/feed/ 2 ASP.Net – JQuery – JSON http://www.cagdaskorkut.net/2008/11/aspnet-%e2%80%93-jquery-json/ http://www.cagdaskorkut.net/2008/11/aspnet-%e2%80%93-jquery-json/#comments Thu, 27 Nov 2008 02:28:14 +0000 Çağdaş http://blog.cagdaskorkut.com/?p=193
Rating: 7.0/10 (3 votes cast)


İlgili yazılar:
  1. JavaScript – setTimeout()
  2. JQuery ile ASP.Net DropDownList’te seçilen değeri almak
]]> Çok uzun zamandır programlamaya yönelik bir yazı yazmadığımı farkettim ve bir süredir uğraştığım bu konu ile ilgili bir şeyler karalamaya karar verdim.

Konu: Asp.Net tabanlı bir web sayfasında JQuery kullanarak JSON formatında veri alarak bu veriyi işlemek.

İlk bakışta her şey gayet güllük gülistanlık gibi duruyor. Asp.Net zaten çalıştığımız ortam. JQuery, sağolsun, süper ötesi bir kütüphane ile karşımıza çıkıyor ve gayet kısa kodlar kullanarak sağa sola sorgu göndermemizi kolaylaştırıyor. JSON dediğimiz şey ise basitçe {“ad”:”Çağdaş”,”soyad”:”Korkut”} biçiminde bir veri türü olarak tanımlanabilir.

İlk önce Asp.Net web projemize bir adet Web Service ekliyoruz ki JQuery ile bu Web Service’e bağlanarak verileri alalım. Web Service’imizin adını HelloJson koyuyoruz.

Web Service’i projeye eklediğimizde IDE otomatik olarak bir “Hello World” metodunu bizim için eklemiş olacak. Bu metodun çıktısını azıcık değiştirerek JSON formatına getiriyoruz ki amacımıza uygun adımlar atabilmiş olalım. Eklediğimiz Web Service’in Hello World metodunu aşağıdaki biçimde değiştiriyoruz.

[WebMethod]

public
string HelloWorld() {


return
"{"Hello":"World"}";

}

En basit hali ile bir JSON çıktısı üreten Web Service’imizi hazırlamış olduk.

Şimdi bir Asp.Net Web Form‘u açarak .aspx uzantılı dosyanın <head> tagini şu şekilde değiştiriyoruz.

<head
runat=”server”>


<script
type=”text/javascript”
src=”jquery.js”></script>


<script
type=”text/javascript”
src=”json.js”></script>

<script
type=”text/javascript”
language=”javascript”>


function gitAl(){

$.ajax({

type: “POST”,

contentType: “application/json; charset=utf-8″,

url: “HelloJson.asmx/HelloWorld”,

dataType: “json”,

data: “{}”,

success: function(msg){processData(msg);}

});

}


function processData(jsonData)

{


var jsText;

jsonData = JSON.parse(jsonData);

alert(jsonData[0].name);

}


</script>


<title>SüperSonik Sayfa</title>

</head>

Hemen açıklıyorum.

Sayfamıza eklediğimiz iki adet javascript dosyası ve ayrıca yazdığımız 2 adet fonksiyon var. Bunların ilki jquery.js adından anlaşıldığı gibi JQuery sorgularımızı yaparken kullandığımız fonksiyonları içeriyor.
Buradaki ikinci javascript dosyası ise json.js. Bu dosya benim can simidim oldu. Şimdilik oraya ekleyelim. Ne amaçla kullandığımıza geleceğim.

Bu iki javascript dosyasını yazının sonunda bulunan linkleri kullanarak indirebilirsiniz. Benim sunucumdaki dosyalar güncel dosyalar olmayabilir. Onun için bu dosyaları orjinal kaynaklarından indirmenizi tavsiye ederim. [JQuery] [JSON]

Yazdığımız fonksiyonlara gelince. gitAl isimli fonksiyon, çağrıldığı zaman belirttiğimiz adrese bir sorgu yapıyor. Sorgu başarılı olursa, aldığı yanıtı veriyiIsle() fonksiyonuna gönderiyor. veriyiIsle fonksiyonu ise veriyi işliyor. Sorgunun sonucunda gelen veriye ne yapmak istiyorsak hep bu fonksiyonda yapacağız.

Asıl JQuery sorgumuzu gitAl fonksiyonu yapıyor. Hemen yakından inceleyelim:
$.ajax(); şeklinde bir fonksiyon var. Bu fonksiyon include ettiğimiz jquery.js dosyasında bulunuyor. Normalde, XMLHttpRequest ile yapıyor olsak IE için ayrı FF için ayrı kodlar yazmamız gerekecekti fakat bu fonksiyon o işleri bizim için yapıyor ve biz sadece $.ajax yazıp gerekli parametreleri veriyoruz… İşte o parametreler:

  • type: burada sorguyu gönderirken yanında göndereceğimiz parametreleri hangi yöntem ile göndereceğimizi belirtiyoruz. POST veya GET.
  • contentType: bu parametre web servisinden istediğimiz veri tipini(application/json) ve karakter kodlama biçimini(utf-8) içeriyor.
  • url: sorgu yapacağımız web servisinin adresi
  • dataType: web servisine göndereceğimiz parametrenin tipi
  • data: web servisine göndereceğimiz parametre. Açıkçası ben, bulduğum dökümanda “data parametresine “{}” girmediğimiz zaman JQuery, geri dönen verinin tipini algılayamayabiliyor” diye okumuştum
  • success: ve son olarak, başarılı bir sorgunun ardından dönen veriyi sokacağımız fonksiyon.

Görüldüğü gibi son derece kullanışlı bir $.ajax() fonksiyonumuz var.

Yazdığımız ikinci fonksiyon(veriyiIsle) ise gelen veriye çeki düzen verecek fonksiyon. Web servisinden bize JSON tipinde bir very döneceğini biliyoruz. Normalde JSON tipinde bir veriyi fonksiyonumuz içinde tanımlayıp kullanıyor olsaydık JSON.parse işlemine gerek olmayacaktı. Ama very bize dışarıdan geldiği için ve üstelik string formatında geldiği için öncelikle bu string’i JSON olarak tanıtmamız gerekiyor. Bu işlemi de include ettiğimiz json.js javascript’inde bulunan JSON.parse() fonksiyonu ile yapacağız.
Bu fonksiyon bir adet string parametre alıyor ve geriye JSON döndürüyor. Biz de fonksiyonun bu zayıf noktasını kullanarak:

jsonData = JSON.parse(jsonData);

yapacağız. Böylece jsonData değişkenimizin içeriği artık gerçekten bir JSON nesnesi içeriyor olacak. Sonra bu JSON nesnesinin içindekileri parmağımızda oynatarak istediğimiz yere yerleştirebiliyor olacağız. Bu iş için de JQuery’nin nimetlerini kullanıyoruz. $(‘#ID’) şeklinde bir kullanım ile sayfa üzerindeki istediğimiz ID‘ye sahip nesneye erişebiliyoruz. Sonra da $(‘#nesneID’).html(); fonksiyonu ile bu nesnenin içine istediğimiz html kodunu yazabiliyoruz. Benzer bir işlem $(‘#nesneID’).text(); fonksiyonu ile de yapılabiliyor. Bu fonksiyonda da html değil de yazı yazıyoruz nesnenin içine.. neyse.

Aspx sayfamızın son hali aşağıdakini andırıyor olacak:

<head
runat=”server”>


<script
type=”text/javascript”
src=”jquery.js”></script>


<script
type=”text/javascript”
src=”json2.js”></script>


<title>SüperSonik Sayfa</title>

</head>

<body>


<form
id=”form1″
runat=”server”>


<div>


<script
type=”text/javascript”
language=”javascript”>


function gitAl(){

$.ajax({

type: “POST”,

contentType: “application/json; charset=utf-8″,

url: “HelloJson.asmx/HelloWorld”,

dataType: “json”,

data: “{}”,

success: function(msg){processData(msg);}

});

}


function processData(jsonData)

{


var jsText;

jsonData = JSON.parse(jsonData);

$(‘#denemeTahtasi’).html(jsonData.Hello);

}


</script>


<div
id=”denemeTahtasi”>İçi boş bir div.</div>


<a
href=”javascript:gitAl();”>Hello??</a>


</div>


</form>

</body>

Ne oldu? Mis gibi JQuery sorgusu yapan bir sayfamız oldu. Ama o da ne? Sayfayı çalıştırdığımızda aşağıdaki hata ile karşılaştık:

Only Web services with a [ScriptService] attribute on the class definition can be called from script.

Hemen gerekeni yapıyoruz. HelloJson isimli web servisimizin cs kodunu açıyoruz ve class tanımlamasının hemen üzerine şunu ekliyoruz:

[System.Web.Script.Services.ScriptService]

ve artık Hello sorusuna World diye cevap veren bir JQuery & Web Service ikilimiz var.

Örnekte kullanılan javascript dosyaları

jquery.js

json.js


Rating: 7.0/10 (3 votes cast)


İlgili yazılar:

  1. JavaScript – setTimeout()
  2. JQuery ile ASP.Net DropDownList’te seçilen değeri almak

]]> http://www.cagdaskorkut.net/2008/11/aspnet-%e2%80%93-jquery-json/feed/ 6