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

Firefox 6

Firefox6 çıktı. Mozilla’da artık hızlı tarayıcı sürümleri çıkarmaya başladı. Her neyse ki otomatik güncelleme özelliği sayesinde kullanıcılar hızla yeni sürüme geçiyor. Otomatik güncelleme kullanıcının Firefox Hakkında penceresini açması ile çalışıyormuş. İlginç bir yöntem.

Firefox 5 çıkalı yaklaşık 2 ay olmuştu ve 16 Ağustos’ta Firefox 6 çıktı tabi bu kadar hızlı sürüm çıkınca yeni sürüm ile birlikte hata düzeltmeleri ve bir kaç özellik ile yetinmemiz gerekiyor. Yeni sürümün Firefox’daki en büyük sorunu eklentilerin uyumsuz olması, eklentiler daha yeni Firefox5’e uyum sağlamışken şimdi Firefox6 ile bu sorunu tekrar yaşacayacağız.

Hız konusunda Google Chrome’a yetişmeye çalışan Firefox bu yeni sürümde hızlanmanın bir önceki sürüme göre %20 olduğunu söylüyor. Linux kullanıcıları için daha kararlı ve hızlı bir sürüm olduğu söyleniyor.

Adres barda web sitesinin isim kısmını ön plana çıkaran bir değişiklik yapılmış. Bu özellik bir çok yeni nesil tarayıcıda vardı zaten. Hatta İnternet Explorer’da bile vardır :

Firefox 6

Detaylı yetkilendirme özelliği ile artık site bazlı yetkilendirme imkanı sunuyor bize Firefox6. İzin Yöneticisi penceresini adres bara about:permissions yazarak açabiliyoruz. Bu pencereden web sitelerinin tek tek çerezlerin, parolaların, popup pencerelerini, çevirim dışı depolamayı ve konum bilgilerini kullanmasına dair izinleri ayarlayabiliyoruz.

Firefox 6

JavaScript Karalama Defteri(Scratchpad): FireBug’ın konsolune benzer bir işleve sahip bu uygulama herhangi bir eklenti kurmadan tarayıcının kendi özelliği olarak geliyor. Bu araç ile javascript kodlarımızı çalıştırabiliyoruz.

Firefox 6

Daha fazla HTML5, CSS3 ve DOM özelliği desteği geldi.

  • WebSocket son hali desteği geldi. Websocket özelliği sunucu ile tarayıcı arasında bir bağlantı kurulmasını sağlıyor, bu sayede biz mesajlaşma servisi, çok kullanıcılı oyunlar vb çok güzel uygulamalar yapma imkanı sağlıyor. Aslında ajax teknolojisinin standartlaştırılmış hali gibi geldi bana.
  • HTML5 <progress> etiketi destekleniyor. ::-moz-progress-bar özelliği ile stilini ayarlayabiliyoruz.
  • Yeni -moz-orient özelliği örneğin progress barın dikey mi yataymı olacağını ayarlayabiliyoruz.

  • HTML5 ses ve video elementlerinde metinleri izleyebilmemizi sağlayan <track> elementini destekliyor.
  • CSS3 border-radius özelliği artık iframelerde uygulanabiliyor.
  • Özel veri özelliklerine(data-*) DOM’un element.dataset özelliği erişebilme imkanı sağlıyor.
  • -moz-text-decoration-color Bu yeni özellik text decorations’a renk veriyor, örneğin underlines, overlines ve strikethroughs olarka tnaımlanan çizgilere.
  • -moz-text-decoration-line Bu özellik bir elemena atanacak text decorations çeşidini belirliyor.
  • -moz-text-decoration-style Bu özellik text decorations stilini belirlememizi sağlıyor, örnek underlines, overlines, and strikethroughs, single-strokes, double strokes, wavy lines, dotted lines vb.
  • -moz-hyphens özelliği ile kelimelere tireleme yapabiliyoruz. (none, manual, auto).
  • window.matchMedia() metodunu kullanarak medya sorgularını programatik olarak kontrol edebiliyoruz.
  • Server-Sent Events desteği eklenmiş. Bu API sunucuya istemci tarafından uyarı mesajları göndermeye izin veriyor. Bir mesajlaşma örneği
  • Touch eventları destekliyor. Dokunmatik ekranlar ve trackpadlerde bu özellikleri kullanabiliyoruz artık.
  • Tüm destek listesini görmek için [tıklayınız.][]

Kaynaklar

resize özelliği kullanıcıya elementin boyutlarını ayarlama imkanı vermemizi sağlar. Kullanıcı bu elemanın boyutunu istediği gibi değiştirme imkanına kavuşur

Yapısı: resize: (değer) Aldığı Değerler: both | horizontal | vertical | none | inherit
Başlangıç Değeri: none
Uygulanabilen Elementler: block-level ve replaced elementler, tablo hücreleri ve inline block elementler
Kalıtsallık: yok

both: Her iki yöne boyutlandırmaya izin verir. horizontal: yatayda boyutlandırmaya izin verir. vertical: dikeyde boyutlandırmaya izin verir. none: boyutlandırma seçeneğini kaldırır inherit: kalıtsal olarak bu değeri üst elementten alır.

div{
	overflow:auto; /* bu tanim gerekli */
	resize:both;
}

overflow değeri scroll, auto veya hidden değerlerinde etki ederken overflow: visible tanımında ise etki yapmaz.

Bu özellik Chrome ve Safaride textarea alanları için otomatik gelmektedir. Tarayıcı bu eleman için bu değeri otomatik uygulamaktadır. Daha önce ipucu olarak yazdığım gibi bu otomatik tanımı css ile kaldırabiliyoruz.

Bir örnek yapalım

.icerik{
    box-shadow: rgb(136, 136, 136) 5px 5px 5px;
    border-radius: 5px;
    resize: both;
    overflow: auto;
    border: 1px solid #dedede;
    padding:10px;
    width: 300px;
    height: 200px;
}

Sadece bir yöne boyutlandırabiliyoruz

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
}

min-height ve min-width değerleri ile boyutlandırmanın minimum değerlerini belirleyebiliyoruz. Anı şekilde max-height ve max-width değerleri ile de maksimum değerleri belirlenebilir. Bu özelliklerle kullanıcının sayfa görünümünü bozmasını engelleyebiliriz.

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
    max-height: 650px;
    min-height: 200px;
}

Resimler için güzel bir uygulama olabilir.

.vasak{
	width: 200px;
	margin: 0 10px;
	height: 150px;
	resize: both;
	overflow: hidden;
	position: relative;
	padding: 15px;
	border: 1px solid #DDD;
}

.vasak img{
	width:100%;
	height:auto;
}

Tarayıcı Desteği

Chrome explorer Firefox
5.0+ desteklemiyor 4.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
desteklemiyor desteklemiyor desteklemiyor

resize özelliği W3C Basic User Interface Module ile önerilen bir özelliğidir. Tarayıcıların destekleme durumuna göre ileride standartlaşıp standartlaşmayacağı belirlenecek bir özellik olarak görünse de Firefox desteği standartlaşması daha olasıdır.

Kaynaklar