Javascript için arşiv

Javascript’te “null” ve “undefined” farkı

Ağustos 18th, 2011 • 2 yorum Javascript
Etiketler: , , , ,

Javascript diğer birçok dilden farklı olarak null ve undefined iki ayrı durum olarak kabul eder.

null; boş değer anlamına gelen özel bir değerdir. typeof null bize nesne döndürür.

<script>
var testDegiskeni = null;
alert(testDegiskeni); //null
alert(typeof testDegiskeni); //object
</script>

undefined değişken bildirilmiş ama henüz değeri atanmamış demektir.

<script>
var testDegiskeni;
alert(testDegiskeni); // undefined
alert(typeof testDegiskeni); //undefined
</script>

Yukarıdaki örneklerde gördüğümüz gibi null özel bir nesne iken undefined tip olarak undefiend döndürür.

Atanmamış değişkenlerin değeri javascript tarafında otomatik olarak undefined olarak atanır.

Javascript asla null değeri atamaz. Eğer bir elemanın değeri null ise bu javascript tarafından değil, program tarafından atanmış demektir.

undefined ve null kontrolü

if(typeof(test) !== 'undefined' && test != null) {
    //test değişkenin kullanabiliriz
}

Kaynak

jquery 1.3.2 sürümünde check ve radio change olayı sorunu ve çözümü

Temmuz 5th, 2011 • Javascript, jquery

jQuery biz arayüz geliştiriciler için çok büyük bir yardımcı. Devamlı güncellenen jquery kütüphanesi bazı geniş çaplı sitelerde yeni sürüme geçmek o kadarda kolay olmuyor. Burada yaşadığımız sorun eski sürüm jquery kütüphanesinin bir problemine kütüphane güncellemeden çözüm üretmek olacak.

Sorun şu; chackbox veya radio butonlara atanan change olayının işlememesi, daha doğrusu ilk tıklamada değil ikinci tıklamada çalışması ve bu sorunun sadece Internet Explorer sürümlerinde(6,7,8) meydana gelmesi.

Çözüm için yapmamız gerekn çok basit

$("#fatih").click(function() { this.blur(); });

Aslında yaptığımız input alanından focus’u kaldırmak oldu. Evet belki pek işinize yaramıyacak ama benim gibi çok arayan bir kişi buradan yararlansa yeter.

Kaynak

Googe Chrome 12 ile birlikte gelen güzel bir özellik(Built-in de-obfuscation)

Haziran 22nd, 2011 • 3 yorum Haberler, Javascript
Etiketler: , ,

Javascript kodlarının daha hızlı yüklenmesi, dosya boyutunun azaltılması için ve kodları kopyala-yapıştır ile kolayca almak isteyenler engellemek için javascript kodlarını sıkıştırırız.

Evet güzel bu özelliklerin her biri güzel ancak bir sorun olduğunda kodu göremiyoruz. Chrome yeni sürümünde güzel bir özellik getirmiş. “Sıkıştırmayı geri al” diye Türkçe’ye çevirebileceğim bir özellik ile tek tıkla kodu anlaşılabilir bir hale getirebiliyoruz.

Değişken isimlerini kısa göstermesi gibi küçük bir sorun dışında gayet başarılı bir özellik olmuş.

Yeni sürümlerde ikon olarak eklenmiş.

Jquery holdReady() fonksiyonu

Mayıs 10th, 2011 • 4 yorum Javascript, jquery
Etiketler: , ,

Jquery son sürümü 1.6 çıktı. Dokümanları incelerken gözüme holdReady() fonksiyonu takıldı.

Jquery holdReady fonksiyonu document.ready olayını tutar veya devam etmesini sağlar. Boolean(true / false) tipi değer döndürür. true değeri dönerse document.redy olayını tutar, false değeri gelirse bırakır ve document.ready olayı gerçekleşir.

document.ready olayı DOM yüklenir yüklenmez devreye girer. Ancak bazen öyle durumlar olur ki DOM’un yüklenmesini beklemeden yüklememiz gereken javascript dosyaları veya referans aldığımız eklenti dosyaları olur, bu gibi durumlarda araya girip bu dosyaları yükletmemiz gerekir ve sonra işleyişi devam ettirmemiz gerekir. İşte bu gibi durumlarda holdReady fonksiyonu kullanılabilir. 

$.holdReady(true); // biraz bekle
$.getScript("myplugin.js", function() { // dosyayi yukledik
     $.holdReady(false); // simdi sen isine donebilirsin
});

Bu metot <head> içinde document.ready olayından önce çağrılmalıdır. Eğer sonrasında çağrılırsa işlevsiz kalır. En iyi kullanım yeri jquery kütüphanesi eklendikten sonrasıdır.

Küçük bir örnek yapalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script>
$.holdReady(true); // durdur
$.getScript("deneme.js", function() { // yukle
	$("p").css("background-color", "#f00");
     $.holdReady(false); // devam et
});

$(document).ready(function(e) {
    $("p").css("background-color", "#9C6");
	alert("iki");
});
</script>
</head>

<body>
<p>Deneme.</p>
</body>
</html>

Eklediğimiz deneme.js

// ilk yüklenecek dosya
$("p").css("background-color", "#ff0");
alert("bir");

Örneği görmek için tıklayınız.

Sayfa yükleme sırası;

1- DOM yani yukarıdaki sayfa <p>Deneme.</p> ve deneme.js dosyası birlikte yorumlanacak. (bir)

2- Sonrasında yükleme sonrası işlemler yapılacak. (iki)

3- $.holdReady(false); sonrasında document.ready içerisindeki kod yorumlanacak. (üç)

Son olarak bir not: birden fazla holdReady kullanımı halinde document.ready olayı tüm holdReady fonksiyonlarının bırakılmasını bekler.

Kaynaklar

HTML Dokümanında Javascript Dosyalarını Nereye Koymalıyız?

Mart 24th, 2011 • 19 yorum Javascript, XHTML
Etiketler: , , , ,

Javascript’i web sitelerine eklemek

Javascript dosyaları bir web sitesine iki şekilde eklenir. Birincisi satıriçi(inline), ikincisi ayrı bir javascript dosyası hazırlayıp harici olarak eklemek.

İlk javascript’i Hakkı Öcal’ın javascript kitapçığından öğrenmeye başlamıştım.

İlk örnek şöyle idi;

<html>
<head>
<title>Merhaba Dünya!</title>
<script>
function merhaba() //merhaba isimli fonksiyonu deklare ediyoruz
{ //bu, fonksiyonun başlama işareti
alert ("Merhaba Dünya!") //fonksiyonun komutu ve komutun gerektirdiği metin
} //bu fonksiyonun bitme işareti
</script>
</head>
<body>
<b>Merhaba Dünya</b><br>
<form>
<button onclick=merhaba()>TIKLAYINI!</button>
</form>
</body>
<html>

Bu satıriçi kodlamaya örnek olarak verilebilir.

Aynı kodu ayrı bir javascript dosyası olarak hazırlayıp .js uzantısı ile kaydedersek ve bunu html dokümana eklersek buda harici bir javascript dosyası ekleme kısmına girer. 

function merhaba()
{
alert ("Merhaba Dünya! Sene 2011")
}

Bu dosyayı merhaba.js olarak kaydedip, sonra

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Merhaba Dünya!</title>
<script src="merhaba.js">
</script>
</head>
<bodyY>
<b>Merhaba Dünya</b><br>
<form>
<input type="submit" name="button1" value="TIKLAYIN!" onclick="merhaba()">
</form>
</body>
</html>

Şeklinde HTML dokümanına ekleriz.

Yukarıda kullandığımız her iki yöntem ile de aynı sonucu alırız. Harici javascript dosyası ile eklemenin avantajları vardır;

  • Bir dosya ile tüm sitedeki javascript dosyalarını idare ederiz ve güncellemeleri tek dosya ile daha kolay yaparız.
  • Sayfa daha hızlı yüklenir, tek dosya ön belleğe alınınca diğer sayfalarda tekrar tekrar yüklenmediği için sayfalar daha hızlı açılır.

Javascript o günden bu yana daha fazla önem kazandı ve artık javascript kodumuzu en iyi hale getirmek için daha çok zaman harcıyoruz ve bize zaman kazandıracak her durumu inceleyip uyguluyoruz.

HTML dokümanında javascript dosyasını nereye eklemeliyiz?

Web sitelerinin en iyi hale getirmek için çeşitli araçlar ile sitemizi test ederiz. Bunlardan biri Firefox’ın YSlow eklentisidir. YSlow eklentisi ile web sitemizi test ettiğimizde javascript dosyalarımızı html dokümanının sonuna eklememizi öneren bir başlık ile karşılaşırız, burada bu başlığı biraz inceleyeceğiz.

CSS dosyalarının <head> içine konmasının öneren YSlow Javascript dosyalarının HTML dokümanının sonuna(</body>’nin hemen öncesine) konmasını öneriyor. Burada bir çelişki var gibi görünüyor. Buradaki mantık şudur; javascript blokları <head> içine konduğu zaman sayfa ilk açıldığında bu javascript blokları yüklenir ve işlenir. Javascript dosyası yüklenip, işlendikten sonra diğer sayfa üyeleri yüklenir. Javascript dosyası yüklenip işlenmesi bitene kadar sayfa boş bir sayfa olarak görünür, tabi buda istenen bir durum değildir. 

<html>
<head>
<title>Javascript yükleme yeri</title>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<p>İçerik Burada</p>
</body>
</html>

Sayfa başına konan javascript dosyalarının yüklenme zamanı aşağıdaki grafikte görüldüğü gibidir

Javascript dosyalarını html dokümanın sonuna koyunca sayfa öğeleri tamamen yüklenecek ve sonra javascript dosyaları yüklenecek ve işlenecektir. Böylece ziyaretçi sayfayı açtığı anda görsel öğeler yüklenecek ve ziyaretçi sayfa içeriğini görecektir ve sonra javascript yüklenecek ve işlenecektir.

Paralel Yükleme

Bir diğer problem ise javascript dosyaları paralel yüklemeyi bloklar. Paralel yükelemeyi şöyle açıklayabiliriz; web sitemiz yüklenirken her öğe tek tek yüklemek yerine iki ve daha fazla yükleme, yani paralel olarak yükleme yapabiliyoruz. HTTP/1.1 şartnamesinde her barındırma servisinden(hositng) iki paralel yüklemeye izin verir, buradan şunuda anlayabiliriz ki farklı barındırma servislerinden ikiden fazla yükleme yapabiliriz. Ancak script dosyaları yüklenirken pararlel yüklemeye izin vermez. Bu durumu göz önünde bulundurarak script dosyalarımızı dokümanın sonuna koyarak sayfamızın daha hızlı yüklenmesini sağlayabiliriz.

Uygulanamayan Durumlar

Bazı durumlarda script dosyasını dokümanın altına koymamız mümkün olmaz. Örneğin script içinde documen.write ile doküman içine bir şey eklememiz gerektiğinde. Ancak bu durumlar içinde bazı çözümlerin olduğu aklımızın bir köşesinde kalsın.

defer Özelliği

HTML4 ile birlikte <script> etiketi içine defer özelliği eklenmiştir. defer özelliği tanımlanmış script dosyaları hemen uygulanmayıp tüm sayfa yüklendikten sonra yüklenir ve çalıştırılır. Bu özelliği İnternet Explorer 4+ ve Firefox3.5+ desteklemektedir. 

<script type="text/javascript" src="script1.js" defer></script>

şeklinde kullanılır. Bu dosyayı html dokümanının istediğimiz yerine koyabiliriz. Tüm tarayıcıların desteklmemesi kullanımı konusunda bizi biraz düşündürüyor.

Sonuç

Sonuç olarak javascript dosyalarımızı html dokümanımız sonuna koymak web sitelerimizin daha hızlı açılmasını sağlayacak bir yöntemdir.

Kaynak

Jquery Geliştiricileri için Güzel Bir FireBug Eklentisi FireQuery

Ocak 13th, 2011 • 2 yorum Javascript, jquery

Firefox’un eklentisi FireBug’ı bilmeyeniniz yoktur. FireBug öyle büyük bir eklenti ki onun üzerine kurulan birçok eklentiler var. Bu eklentide FireBug yeteneklerini geliştirmek için kullanılan bir eklenti.

Bu eklenti jQuery ile kod yazarken çok işimize yarayacak. Bu eklenti sayesinde FireBug’ın CSS yeteneklerine yakın bir çözümü jQuery üzerinde sağlayacağız. FireBug bize CSS açısından belirlediğimiz nesneye uygulanan css özelliklerini yakalama ve hangi css dosyasının hangi satırında olduğu gösterir. Benzer bir özelliği FireQuery bize sağlar.

Bu eklentide jQuery ile etkilediğimiz elemanlar hakkında benzer bir bilgi veriyor bize. Jquery ile etkilenen elemana hangi işlev ile etki yaptığımızı ve hangi fonksiyon ve kod ile etki ettiğimiz gösteriyor.

jQuery bulunmayan sayfalarda da jquery kütüphanesini ekliyor. Böylelikle her sitede FireBug özelliklerini jQuery yardımı ile kullanma imkanı sunuyor bize.

jQuery Data verileri Gösterir

Eklentiyi kurduktan sonra Firebug’ı açarız ve HTML sekmesine geliriz. Aşağıdaki bir pencere ile karşılaşırız.

jQuery data kullanarak web sitesine gömdüğümüz verileri gösterir bize. Bu durum dinamik olarak eklediğimiz jQuery verilerini kontrol ederken çok işimize yarar.

Bir Elemana Atanmış Fonksiyonları Gösterir

Test sayfasında h1 elemanına tanımlana aşağıdaki fonksiyon kodunu görüyoruz.

$('h1').bind('click', function() {
$(this).css('background-color', '#fee');
});

Bu tanımı FireBug HTML sekmesinde FireQuery yardımı ile aşağıdaki gibi görürüz.

Bir elemana tanımlanmış fonksiyonları bulmaya yarar. Süper bir özelliktir bu. Tanımlana fonksiyon konsolda yukarıdaki gibi görünür.

function() üzerine geldiğimizde bu elemena atama yapılan kodu ve satır numarasını gösterir. Bu bizi birçok yükten kurtaran süper bir özelliktir.

jQuery Olmayan Sitelere jQuery Ekleme Özelliği

Bir sitede jQuery kütüphanesi olmasa da bu eklenti etkin olduğu tarayıcılarda jQuery eklenmiş gibi olur. Bu sayede site üzerinde jQuery kolaylıklarını uygular ve sonuçlarını görebiliriz.

Bu sayede Konsolda jQuery kolaylıklarını kullanarak jquery eklenmemiş olsa da bu sitede jQuery varmış gibi rahat kod yazabiliriz.

Bu eklentiyi bana gösteren Orhan Ekici’ye ve ona gösteren Volkan Özçelik’e teşekkürler.

FireBug büyüksün.

Kaynaklar

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.