Burada yaptıklarımızı inceleyim.
İlk satırların function tanımlama olduğunu görüyorsunuz. Burada veri1 , veri2 adlı iki tane fonksiyonu tanımladık. Diğer satırlarda prompt komutu ile klavyeden bilgi girişi sağladık. Daha sonra bu verileri fonksiyonlara göndererek istediğimiz işlemi yaptırdık ve daha sonrada bunu return yöntemiyle geri aldık. Bu kısma kadar yaptığımız fonksiyona bir değer göndermekti.
Yeniden bir bakış.veri1(data1) komutuyla prompt yoluyla aldığımız data1 değişkenini veri1 adlı fonksiyona gönderdik. Yani function veri1(ilkveri) şeklindeki fonksiyona biz data1 değişkenin gönderdik. Fonksiyon bu değeri yani data1 değişkenin aldığında otomatik olarak ilkveri değişkenine atadı. Böylelikle ilkveri=data1 oldu. Daha sonra istenilen işlemler yapıldı. Ve ardından return ilktoplam değeri geri gönderildi. Bu değer daha sonra ekrana yazdırıldı. Diğer veri2 adlı değişken için de aynı tür bir işlem sözkonusudur.
Nesneler ve Özellikleri
Günümüzde bilişim Teknolojileri ile ilgilene hemen herkesin duyduğu bir terim var. Nesneye Yönelik programlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamada kullanılan her öğe bir nesne olarak kabul edilir. Bu nesnelerin özelliklerini kullanarak onları değiştirerek program yazılır. Javascript'te bu tür bir programlama dilidir. Örneğin webde sörf yaparken herkesin karşısına çıkan formlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de onun yani nesnenin özellikleridir.
Örneğin şimdiye kadar çoğu kez kullandığımız document.write komutu aslında bir nesnenin özelliğine atıfta bulunmaktan başka bir şey değildir. Yani document nesnesinin write özelliğini kullanarak html sayfamıza yazı yazdırıyoruz.
7.1 Window Nesnesi
Genel olarak pencere özellikleri ile ilgili bir nesnedir.
7.1.1 Pencere açmak ve kapamak
Birçok yerde gördüğünüz pencere açma pencerelerin çeşitli özelliklerini değiştirme işte bu nesne yardımıyla yapılmaktadır.
Şimdi bu nesneyi nasıl kontrol edeceğiz onu görelim.
Pencere açmak için:
window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri");
Pencere kapatmak için:
window.close();
Pencere kapatmak için window.close() komutu vermek yeterlidir. Burada kapatılan pencere ona kullanılmakta olan penceredir.
Gelelim pencere açma işine. Burada window.open ile pencerenin açılmak istendiği belirtilir. Parantez içerisinde verilenler ise açılması istenen pencerenin özelliklerini belirtir.
Url_adı: Buraya yazılacak dosya ismi açılacak pencerenin içerisinde olacaktır.
Örnek :
window.open("http://webteknikleri/owp/index.htm")
veya;
window.open("index.html")
Pencere_adı: Bu açılacak pencerenin adını belirtir. Birden çok pencere ile işlemler yapıyorsanız hangi pencereye bir komut gönderdiğinizin belli olması için gereklidir.
Örnek:
Window.open("index.html" , "ana");
Pencere_özellikleri: Bu özellikte adından belli olduğu ölçüde pencerenin özellikleri ile ilgilidir. Bir pencerenin değiştirilebilir özellikleri şunlardır :
menubar: Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen) vb. menülerin bulunduğu satırdır.
toolbar: Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların bulunduğu kısımdır.
location: Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım.
status: Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi veren kısımdır.
scrollbars: Sağ tarafta bulunan sürgü çubuklarıdır.
resizable: Pencerenin boyutlarının kullanıcıya bırakılması veya kesin değerler almasıyla ilgilidir.
width: Açılacak olan pencerenin piksel cinsinden genişliğidir.
height: Açılacak olan pencerenin piksel cinsinden boyudur.
left: Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını belirler.
top: Açılacak olan pencerenin ekranın üstünden kaç piksel aşağıda olacağını belirler. Eğer pencere özellikleri kısmında değişmesini istemediğiniz bir özellik varsa onu yazmanıza gerek yoktur. Bu değerler tarayıcının banko(default) değerlerinden alınır.
Şimdi bir pencere açalım. Açtığımız pencerede dosya,düzen ve ileri,geri tuş takımı olmasın. Pencerenin boyutları 200x300 piksel olsun. Bizi
www.webteknikleri.com adresine göndersin.
Şimdi buna göre kodumuz :
window.open("http://webteknikleri/owp/index.htm", "webteknikleri" ," menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300"
7.1.2. window.location.protocol
Window nesnesinin location.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.
http: ile dosyanın internetten yüklendiğini belirtir.
file: ile dosyanın sabit diskten yüklendiğin belirtir.
Mesela şöyle bir örnekle dosyanın nerden yüklendiğini kontrol edelim.
if (window.location.protocol == "http:" ){ document.write ("Bu belge Internet'ten geliyor.") }else { document.write ("Bu belge sabit diskten geliyor") }
7.1.3. window.history.go
Window'un history özelliği ile bir önceki sayfaya erişim sağlanabilir. Örneğin kullanıcı herhangi bir formu doldurmadı ve işlem yapılamadı bu durumda bir hata mesajı ile kullanıcıyı uyardıktan sonra history nesnenisin kullanarak bir önceki sayfaya kullanıcıyı gönderebilirsiniz. Bunun için gerekli kod yazımı şu şekildedir.
Window.history.go(-1)
Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşabilirsiniz.
7.1.4. Status Bar kullanımı
Status bar window nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dosyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır.
Status barı değiştirmek için şu kodları yazmalıyız.
window.status="Webteknikleri'nden Merhaba !";
Bu şekilde kullandığımız bir status kodu ile sayfa açık kaldığı sürece Webteknikleri'nden Merhaba ! yazısı karşımızda olacaktır.
7.2 Tarayıcı Nesnesi
Tarayıcılar Javascript tarafından bir nesne olarak algılanır. Bu nesnenin özelliklerini şöyle sıralayabilir.
appname Tarayıcı adı
appVersion Tarayıcının Versionu
appCodeName Tarayıcının kod adı
userAgent Tarayıcının anamakinaya(server) kendini tanıtırken verdiği isim
<html><head><title>Tarayıcı Özellikleri</title></head><body><script><document></script></body></html>
7.3 Çerçeve (Frame) Nesnesi
Çerçeve tekniği bir web sayfası üzerinde birden fazla web sayfası görüntülenmek istendiğinde kullanılır. Daha ayrıntılı bilgi için HTML adlı bölümümüze bakınız.
Javascript açısından her bir çerçeve bir pencere sayılır. Bunların içeriğini kontrol etmek için belli komut stilleri vardır.
Şimdi onları görelim:
Top: En üst pencere (Yani tarayıcının kendisi)
Parent: Herhangi bir çerçeveyi oluşturan düzenleyici bölüm
Self: Çerçevenin kendisi
Javascript çerçeve düzenleyici(FrameSet)leri içerisindeki diğer alt çerçeveleri 0 'dan başlayarak numaralar. Bu numaralar yardımıyla çerçeve özelliklerini değiştirebiliriz. Örneğin iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] diğeri ise parent.frames[1] olarak adlandırılır. Örneğini verdiğimiz gibi iki çerçeveli bir web sayfamız olduğunu varsayalım.
Ana sayfamız ki bu sayfa tarayıcıya sayfanın iki html sayfasında oluştuğunu söyleyen , çerçeve düzenleyicisinin olduğu sayfanın kodları şu şekilde olsun.
! Uyarı: Bu sayfayı frame.html olarak kaydedin.
<html><head><title>Frame (Cerceve)</title></head><frames><frameset><frame><frame></frameset></html>
Bu sayfayı sol.html olarak kaydedin.
<html><head><title>Sol Frame</title></head><body><script><parent></script></body></html>
Bu sayfayı sag.html olarak kaydedin.
<html><head><title>Sag Frame</title></head><body><script><parent></script></body></html>
7.4 Form Nesnesi
Javscript açısından Html'in en önemli nesneleri Formlardır. Çünkü ziyaretçi ile etkileşmede en büyük unsurlardan birisi Formlardır. Html kendi form nesnesini kendisi oluşturabilir. Bu bakımdan Javascript'e düşen bir göre yoktur. Javascript form verilerinin yorumlanması ve işlenmesinde devreye girer. Şimdi form unsurlarını tanıyalım:
Name : Formun ismi
Action : Formun işleneceği perl veya cgi programının tanımlanacağı etiket
Enctype : Formun kodlanma türü
Method : Formun gönderme(post) mi yoksa alma(get) işlemi göreceğini belirler.
Target : Pencere ismi
OnSubmit : Gönderme metodunun ismi
Bunlardan yararlanarak bir form nesnesinin kodunu yazalım.
<form>Form unsurları</form>
Perş. Tem. 19, 2007 3:54 am