19 Eylül Çarşamba ´12   —   5 Yorum
Javascript alert'in tarayıcılara göre farklı pencere şekillerinde çizdirildiğini biliyorsunuz. Sadece farklı pencere şekilleri değil aynı zamanda içinde sistem fontu kullanılması, pencere başlığına veya onay tuşunda yazan yazıya müdahale edilememesi veya sayfanın çalışmasını durdurması gibi engelleri olduğunu zaten biliyorsunuz.

Şimdi gelelim çok basit bir kullanımıyla
alert('Mesajınız başarıyla iletildi. En kısa sürede cevaplamaya çalışacağım.');
şeklinde ürettiğiniz onay/hata/mesaj kutusunu



çok benzer kullanımla
alertf('<h3>Mesajiniz başarıyla iletildi.</h3> En kısa sürede cevaplamaya çalışacağım.\
<br /><br /> Bu sırada <a href="/blog">blogumu</a> inceleyebilirsiniz.');
şeklinde kullanabileceğiniz daha zengin içeriğe sahip bir kutuya



çevirmeye.

Gereksinimler

Projenizde jQuery kullandığınızı varsayıyorum. jQuery ile kullanabileceğiniz hatta belki halihazırda kullanmakta olduğunuz lightbox kütüphanesi olan fancybox'u kullanarak basit bir javascript alert fonksiyonu hazırlayacağız. fancybox yerine kendi lightbox kütüphanenizi veya jquery dışında kullandığınız framework'ü de kullanabilirsiniz. Aşağıda kodu doğrudan vererek açıklayacağım.
function alertf(html){
	if (arguments[1]) closehref = arguments[1];
	else closehref = 'javascript:$.fancybox.close();';

	contentHTML  = '<div style="text-align:center; font-size: 18px; min-width: 200px; margin: 20px 40px;">'+ html +'</div>';
	contentHTML += '<div style="text-align:center;"><a href="' + closehref + '" class="button">Tamam</a></div>';

	$.fancybox({
		content: contentHTML
	});
}
Hem alert fonksiyonuna yakın olması hem de "alert fancy" yani süslü/havalı mesaj kutusu anlamına geldiği için de "alerf" adında bir fonksiyon yazarak, zorunlu tek parametre tanımlayacağız. Zorunlu olan tek ve ilk parametre mesajınızın içeriği olacaktır. Bu parametre HTML de olabilir düz metin de olabilir.

Her lightbox kütüphanesinin, bir şekilde sadece javascript çağrısı yapılarak bir kullanımı vardır. fancybox'un bu şekildeki kullanımı için, basitçe $.fancybox fonksiyonu çağrılıp içeriği "content" parametresiyle belirtiyoruz.
$.fancybox({
	content:"Merhaba dostlar"
});
alertf fonksiyonunda aslında basitçe içinde mesaj ve buton olan bir lightbox kutusu çizdiriyoruz. "button" sınıfıyla da link olarak tanımlanan elementi buton görüntüsüne çeviriyoruz. Bunun için herhangi bir css buton stili yeterli olacaktır. Mesaji çevreleyen div'i, stillerini, butonu temsil eden linki ve onu çevreleyen div'i ve stillerini javascript fonksiyonumuzda string olarak kodluyoruz. Sonrasında zaten fancybox ile ekrana çizdirmek kalıyor.

Fonksiyonun ilk satırlarında dikkatinizi çekeceği üzere, basit bir kontrolle, bu fonksiyon cağırıldığında ikinci bir parametre belirlenip belirlenmediğini kontrol ediyoruz. Bunun nedeni ise, tek buton olan "Tamam" butonuna basıldığında yapılacak aksiyonu değişitebilme kabiliyeti eklemek. Bir çok noktada ihtiyacınız olabilecek olan bu özellik, bir mesaj kutusu çizdirdiğinizde butona basıldığında başka bir sayfaya yönlendirme veya kutuyu kapatmak yerine başka bir javascript cağrısı yapmak gibi şeyler yapmanızı sağlayacak. Bunu da alertf fonksiyonunun ikinci parametresini kullanarak yapabileceksiniz.

Örneğin
alertf('<h3>Mesajiniz başarıyla iletildi.</h3>', 'tesekkurler.html');
kullanımı, "Tamam" butonuna basıldığında kullanıcıyı tesekkurler.html sayfasına yönlendirecektir.

Bu methodla normal alert fonksiyonu yerine alertf fonksiyonunu kullanarak çok daha zengin bir mesaj kutusu çizdirebilirsiniz. Bu noktadan sonra projenizdeki tüm alert çağrılarınızda fonksiyon adına f eklemeniz, javascript kutularını havalı hale getirmeye yeterli olacaktır.
14 Ağustos Salı ´12   —   4 Yorum
Eğer bir kaynak arıyorsanız, indexlerin güncelliği, genişliği gibi nedenlerden dolayı, diğer arama motorları yerine Google'ı tercih etmek, iyi bir karar olarak düşünülebilir. Yaptığınız Google aramalarını programatik olarak yapmak ve sonuçları herhangi bir şekilde kullanmanın sayısız örneği verilebilir.

Örneğin, sayfanıza site içi arama eklemek istiyorsunuz. Sayfanıza ait içeriği eğer Google zaten tarıyorsa, site içi aramanız aslında basit bir Google araması ile yapılabilir. Biliyorsunuz Google'da "site:mfyz.com" şeklinde arama yapılacak domaini filtreleyebiliyorsunuz. Dolayısıyla site içi aramanızı, herhangi bir algoritma yazmaya gerek kalmadan, hatta sadece tarayıcıda javascript ile yapabilirsiniz.

Google'un istemci altyapıları için sunduğu JSON tabanlı bir arama APIsi var. Bu api sayesinde normal bir Google araması yapabiliyorsunuz.

Bu API'yi basit bir HTTP isteği ile kullanabiliyorsunuz. Herhangi bir Google araması yapıyormuş gibi bir sorgu gönderip cevabını json olarak alıp işleyebiliyorsunuz.
http://ajax.googleapis.com/ajax/services/search/web?v=1.0
Aramanızı bu URL'e gerekli parametreleri ekleyerek yaptığınızda Google en fazla 8 sonuç verecek şekilde dönüyor.

Cevap olarak dönen JSON içeriği uzun olduğu için burada göstermeyeceğim. Ama birkaç parametreyle gelen sonuç kümesini kullanabilir, sayfalama ve sonuç boyutu gibi parametreler ile sayfalama yapabilirsiniz.

Asıl kullanacağınız sonuç değeri, arama sonuçlarının bulunduğu response.responseData.results sonuç kümesi olacaktır. Basit bir nesne dizisi olan bu değeri javascript ile ekrana doğrudan basabilir veya sunucu taraflı bir kod ile işleyebilirsiniz.

Google bu API ile tek istekte en fazla 8 sonuç döndürüyor. Nedenini kesin bir şekilde bilmiyorum fakat güvenlik nedeniyle olduğunu tahmin ediyorum. Eğer 8'den fazla sonuç göstermek istiyorsanız birden fazla api çağrısı yapmak zorundasınız veya istemci tarafında sayfalama yaparak sonuçları sayfalama ile gösterebilirsiniz.

Sayfalama için API çağırısında göndereceğiniz start parametresi, arama sonuçlarının başlangıç sırasını belirtiyor. Eğer belirtilmezse geçerli değeri 0 olacaktır. Bundan sonra 8, 16, 24... şeklinde ikinci, üçüncü sayfaya ait sonuçları, ek çağrı yaparak yükleyebilirsiniz.

Burada kontrol etmeniz gereken tek şey, toplam bulunan sonuç kümenizde yeterli sonuç olup olmamasıdır. Yani eğer kullanıcı son sayfada ise "Sonraki Sayfa" linkini göstermemeniz gerekir. Basit bir sayfalama için;
toplam sayfa sayısı = toplam sonuç sayısı / sayfa başına düşen sonuç sayısı
bölümünün üste yuvarlanması ile bulunur. Bunu Google size toplam bulunan sonuç sayısını tahmini şekilde söylüyor.

Sonuç kümesindeki response.responseData.cursor.estimatedResultCount parametresi size sayısal olarak tahmini sonuç sayısını söyleyecektir. Sayfa sayısını hesaplayarak gerekli sayfalama navigasyonunu oluşturabilirsiniz.

Örneği kodlayalım

Yazının başlarında verdiğim site içi arama örneğini javascript ile kodlayalım. Doğrudan tüm kodu verip açıklayacağım.
<!doctype html>
<html>
<head>
    <title>Page</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
	<input type="text" placeholder="Search" id="searchInput" />
	<input type="button" value="Search" id="searchButton" />

	<ul id="searchResultsList"></ul>
</body>
</html>
HTML tarafında ihtiyacınız olan iki ana parça, arama formu ve sonuçları listeleyeceğiniz bir tablo veya liste.

Javascript tarafını jQuery kullanarak yazarak HTTP çağrısını, JSON sonucunu işleme, html elemanlarını yönetme gibi birçok kısmı kolayca halledebilirsiniz.

İlk yapmamız gereken şey arama formundan arama sorgusunu yakalamak ve arama butonundaki tıklama hareketini yakalamak olacak. Bunun için butonun tıklama olayını yakalayıp text alanının içeriğini alıyoruz.
$(function(){
    $('#searchButton').click(function(){
	    search();
    });
});

function search(){
	query = $('#searchInput').val();

	$('#searchResultsList').html('<li class="loading"><span>Aranıyor... (Google Search)</span></li>');

	loadResults(query, 0);
}
Google'un arama APIsini basit bir HTTP isteği ile kullanacağımızı söylemiştim, sonuç bir json nesnesi olduğu için jQuery'nin http istek yardımcı methodlarından getJSON methodunu kullanarak hem isteği yönetebilir hem de cevabı işleyebiliriz.
function loadResults(query, start){
    var apiURL = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&callback=?';
    $.getJSON(apiURL, {
	    q: query + ' site:mfyz.com',
	    rsz: 8,
	    start: start
    }, function(response){
	    var results = response.responseData.results;

	    $('#searchResultsList .nextPage, #searchResultsList .loading').remove();
	    resultsHTML = '';

	    if(results.length){
		    for(var i=0; i < results.length; i++){
			    r = results[i];

			    resultsHTML += '<li><a href="' + r.unescapedUrl +
				    '"><span class="title">' + r.title +
				    '</span><span class="preview">' + r.content +
				    '</span></a></li>';
		    }

		    if (response.responseData.cursor.estimatedResultCount > 8) {
			    resultsHTML += '<li class="nextPage"><a href="#" ' +
				    'onclick="loadResults(\'' + query + '\', ' + (start + 8) +
				    ');">Daha fazla sonuç göster</a></li>';
		    }
	    }
	    else {
			//resultsHTML = '<li class="notfound">Aradığınız kriterde içerik bulunamadı.</li>';
	    }

	    $('#searchResultsList').append(resultsHTML);
    });
}
Yukarıdaki javascript methodu basit bir HTTP çağrısı yapıp gelen json cevabını işliyor. Basitçe bir liste elemanı (ul) içeriği oluşturuyoruz. Gelen sonuç dizisini bir HTML koduna dönüştürüyoruz. Methodun sonunda ise oluşturulan HTML kodunu liste elemanınımıza ekliyoruz.

Bu methodda gördüğünüzü ilk parametre, arama formundan gelen arama sorgusu, ikinci parametre ise, sayfalama için Google APIsine gönderilecek olan sonuç başlangıç indeksi. Bu sayede bu fonksiyonu tekrar çağırarak ikinci, üçüncü ve diğer sayfalardaki arama sonuçlarını yükletebiliyoruz. İlk arama yapılırken yani yukarıda ilk verdiğim javascript kodunda çağırılan arama methodu "0" başlangıç parametresi ile çağrılıyor.

Bu methodda dikkatinizi çekmiş olan bir nokta da arama parametresin sonuna "site:mfyz.com" eklemiş olmam. Sorguya eklenen bu kısım, yapılan aramanın sonuçlarında sadece o domain'deki sayfaları döndürmesini sağlayacaktır.

Yukarıdaki HTML çıktısını CSS ile işleyebilirsiniz veya arama formunu "ara" butonu ile değil eş zamanlı arama gibi her tuşa basıldığında belirli bir zaman aşımı ile girilen kelimeyi yakalayıp arama yapabilirsiniz.
Javascript, jquery ile çok uğraşmaktan dizi kavramı php'de kullandığım birşey olarak kalmaya başladı. Yani jquery'de o her şeyi nesnel yazıyor, uğraştığınız şeylerin neredeyse tamamı DOM üzerinde bir nesne oluyor. PHP'de de genellikle yazdığınız bir sınıftan ürettiğiniz nesneler var. Onun dışında anlık yaptığınız bütün işleri dizilerle yapmaya alıştık.

Belki JSON ile back-end'de uğraşıyor olmak biraz daha nesnelerle çalışmayı zorluyor çünkü encode ettiğiniz veya decode ettiğiniz her şey nesnelere dönüşüyor.

Neyse, 2 satır kod ile diziler yerine anlık yaptığınız basit işleri nesneler üzerinde yapabileceğinizi gösterebilirim.
$user = (object) array(
	"name" => "Fatih",
	"surname => "YILDIZ",
	"cars" => array(
		(object) array(
			"brand" => "BMW",
			"model" => "318i",
			"year" => "2009"
		),
		(object) array(
			"brand" => "Honda",
			"model" => "Civic",
			"year" => "2003"
		)
	)
);
Nesne, dizi ve nesne şeklinde karışık kullanabilirsiniz.
Mesela son arabanın markasına;
print $user->cars[0]->brand;
şeklinde ulaşabilirsiniz.
Önceden hatırlarsınız web programcılar için temel javascript bilgisi üzerine 5 makalelik bir seri yazmıştım. Seriyi güncelledim, gerek kodlar gerek yazım hataları gerek de eskimiş bilgi bakımından yeniden düzenleyerek dökümanlarda HTML, JS, CSS bölümüne ekledim.

Serinin başlangıcına buradan erişebilirsiniz :
http://www.mfyz.com/?/dokuman/84/temel-javascript-......-hakkinda/

Popüler Etiketler

html iOS url portfolio sitemap seo google gimp howto css css3 form radio style social media service doritos tytz twitter widget rss xml export mobile startups örnek kod linux facebook opengraph api optimization fql cms wanda digital medya php ajax http server generator regex tool apple windows subversion svn session cookie javascript js mootools jquery graph share icon ikon grafik download firefox banner calendar logo ie support browser htaccess mod_rewrite assets xmlhttprequest laptop notebook button switch less compile compiler macosx app on-the-fly search meta apache route router ipad iphone itunes pharma hack wordpress mdb2 pear sql injection query textarea ubuntu ntfs fstab date diff blog plugin box ruffles subdomain konsol terminal www redirect crossdomain lisans license spam lifestream dokuman parse phpstorm jetbrains mysql pgsql mssql ide editor mfyz proje link object optimizasyon analyse procedure osx player screen prepare execute xhtml job language kontrol yapıları if web app open source sosyal bootstrap wireless mail newsletter subscription auth ipucu oyun nedir login network kitap cache tarih ios app store store in-app purchase purchase verification storekit itunes connect workspace tebrik chart applications free development developer webkit music db code coding signature imza html5 browsers table internet statistics design kampanya framework while database internet explorer deployment version control git ingilizce connect ui ux select kurulum nasıl integration input istatistik icons zaman insanlar