Javascript ile ilgili örnekleri verirken, javascript ve özelliklerini tamamıyla anlatmak yerine, kendi kullandığım ve ileriki yazılarda paylaşacağım yapılar için temel olacağını düşündüğüm uygulamaları hedeflemekteyim. İşin özünde, yaptığımız herşeyi jQuery kullanarak çok daha rahat ve hızlı yapacağız, fakat jQuery olgusunu daha iyi anlayabilmek ve kullanabilmek için, javascript diline hakim olmakta yarar vardır.
Şunu da unutmayın ki burada paylaştığım hiç bir şey bir kural veya son nokta değildir, sadece benim tecrübe ettiğim ve işimi kolaylaştırmış çözümlerdir. Burada bahsedilen yöntemlerle ve özelliklerle ilgili araştırma ve incelemelere devam etmekte her zaman fayda vardır.
Bu yazımızda web sayfamızda "yeni pencere açmak" olgusuna giriş yapacağız, bu tip uygulamalar website içerisinde kullanıcılarınıza sayfayı terketmeden bilgi sunmak veya onlardan bazı verileri almak için kullanılabilir (sunucudan resim seçtirmek, bilgi sayfası sunmak (Sözleşme vb.), resmin büyük halini göstermek vb.).
Website tasarımlarınızı yaparken sitenizin SEO açısından güçlü olmasına dikkat etmekte fayda vardır, fakat kullanıcının hızlı bilgilenmesi de kullanıcı memmnuniyeti açısından önemlidir.
Site içerisinde sayfayı terketmeden başka bir sayfayı açtırmakla aslında iki tür yarar elde etmiş olursunuz. Birincisi; kullanıcı gelmiş olduğu sayfayı hemen terketmemiş olur (Seo açısından sayfada kalma süresi önemlidir), ikincisi ise site içerisindeki ilgili bir sayfayı göstererek o sayfanın da görüntülenmiş olmasını sağlamış olursunuz, tabii ki o sayfayı tüm tasarımı ve bilgileri dahil ederek başka bir sayfada görüntületmek daha yararlıdır, fakat hız konusunu düşündüğünüzde tercih kullanım amacınıza göre değişebilir.
Teknik bilgi..
window nesnesi (Tarayıcı Nesneler): DOM yapısının en üst nesnesidir, "document", "navigator", "screen", "location", "history" gibi nesneleri içine alır. Detaylı bilgi (w3schools)...
Örneğimizde window nesnesinin "open" metodu kullanıldı.
window.open(URL,isim,özellikler,yerine koy(opsiyonel))
Uygulama..
Javascript kullanarak yeni bir pencere açmaya ve bu pencereyi aktif olarak kullanmaya çalışacağız.
<script type="text/javascript">
function openWindow(){
newWindow=window.open('','Yeni pencere','width=600, height=400');
newWindow.document.write("<p>Bu pencere yeni açıldı.</p>");
}
</script>
<input type="button" value="Pencere Aç" onclick="openWindow()" />
Butona tıklandığında 'Yeni Pencere' adlı 600X400 ebatlarında yeni bir pencere açacak fonksiyonumuzu tanımladık. Açılan yeni pencereye de yazımızı yazdık.
Bu yöntemle başka sayfaları da, yeni pencerede gösterebilirsiniz, aşağıda bu konu ile ilgili örnek kodlama gösterilmiştir.
<script type="text/javascript">
function openWindow2(){
var newWindow2=window.open("http://www.google.com","_blank","left=100,top=100,menubar=no,toolbar=no,titlebar=no,location=no,status=no,height=400,width=400");
}
</script>
<input type="button" value="Pencere Aç" onclick="openWindow2()" />
Burada çok basit anlamda, javascript kullanarak website içerisinde "yeni bir sayfa açmak" olgusuna değindik, jQuery eklentileriyle bu ve benzeri uygulamalar çok daha gösterişli ve işlevsel hale getirilebilir.
Örnek olarak: WYSIWYG text editörlerde kullandığımız resim seçme veya buna benzer uygulamaların özü, sayfa içerisinde yeni bir sayfa açtırmak, kullanıcının seçimini burada yapmasını sağlamak ve esas sayfaya bu seçimi aktarmak üzerine kurulmuştur.
Görüşmek üzere...
