Javascript Ders #3

By husmen73 on Tem 19, 2008 in Javascript

FONKSİYON KAVRAMI

Çoğu zaman Javascript kodunuzda bir işlemin birden fazla yapılması gerekebilir. Hatta kimi zaman Javascript”e bir işlem yaptırmadan önce başka bir işlemi yaptırmak istenebilir.
İşte bu tür tekrarlanan işin yapılması için gerekli işlem ve komut gruplarına Fonksiyon adı verilir. Fonksiyonlar genelde , filanca isimli gruptaki işlemleri yap oradan bir değer al bunu filanca isimli gruba götür gibi işlemler için kullanılır. Bu tür komut sistemleri Javascript”te en çok kullanılan komut türlerindendir. Fonksiyonun yazım kuralları şu şekildedir:

function fonksiyon_ismi (parametre1 , parametre2 , …. )
{ yapilmasi istenen islemler }

Fonksiyona Değer Gönderme ve Değer Alma
Bir fonksiyonun Javascript içerisindeki ilk önemli görevi diğer fonksiyonlardan veya herhangi bir yerden bir değer alıp onu kendi içerisinde işletip sonra istenilen fonksiyona veya yere göndermektir.
Mesela herhangi bir muhasebe işleminin yapılıp bize geri gönderilmesini istediğimiz düşünelim. Genel yapı olarak kodumuz şu şekilde olacaktır.
Veri1 ve Veri2″nin işleme konulacağı fonksiyonların tanımlanması
Veri1″in alınması
Veri2″in alınması
Veri1″in fonksiyona gönderilmesi
Veri2″nin fonksiyona gönderilmesi
Alınan verilerin ekrana yazdırılması
Şimdi bu genel kodu Javascript”te nasıl yapacağımızı görelim :

<html>
<head>
<script language=”JavaScript”>
<!–
function veri1(ilkveri)
{ var ilktoplam = (ilkveri * 30 )/100 ;
return ilktoplam ; }
function veri2 (ikinciveri)
{ var ikincitoplam = (ikinciveri * 45 )/100;
return ikincitoplam; }
– >
</script>
</head>
<body>
<script language=”JavaScript”>
<!–
var data1 = prompt (“Birinci miktari giriniz” ,”rakam gir”);
var data2 = prompt (“Ýkinci miktari giriniz” , “rakam gir”);
document.write (“ilk isleminizin sonucu = ” , veri1(data1) );
document.write (“ikinci islemin sonucu = ” , veri2(data2) );
– >
</script>
</body>
</html>

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 ÖZELLİKLERİ

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.

Window Nesnesi
Genel olarak pencere özellikleri ile ilgili bir nesnedir.

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_ozellikleri”);

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://netyardim.net/net/index.php”)

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.php” , “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ı 200×300 piksel olsun. Bizi www.netyardim.net adresine göndersin.
Şimdi buna göre kodumuz :

window.open (“http://netyardim.net/net/index.php”, “NetYardim” ,” menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300″;)

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.

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=”NetYardim Hosgeldiniz!”;

OLAYLAR

Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçinin yaptığı her tür hareket bir bağlantıyı tıklaması, bir resmin üzerine gelmesi, resmin üzerinde ayrılması, bir formu yanlış doldurup hataya yol açması hep bir olaydır.
Şimdi bu olayları inceleyelim.

onClick
Web sayfası üzerinde bir nesnenin mouse ile üzerine tıklanması sonucu onClick olayı gerçekleşir. Olayın gerçekleşmesi için mouse”un nesneyi tıklayıp bırakması gereklidir. Yani mouse tuşuna basıldığında onClick olayı gerçekleşmiş olmaz. onClick olayı tuşa basılıp bırakıldıktan sonra gerçekleşir. Bağlantılar, resimler, form düğmeleri tıklanabilecek nesneler arasındadır.
OnClick yönlendiricisine bu durumda ne yapacağını Html etiketleri arasında bildirmeniz gerekir. Şimdi bunu bir örnekle açıklayalım.

<html>
<head><title>onClick</title>
<script language=”javascript1.2″>
<!–
function merhaba()
{alert (“beni tikladiniz”); }
–>
</script></head>
<body>
<input type=”button” name=”tikla” value=”tikla” onClick=merhaba()>
</body>
</html>

Burada yaptığımız işlem html etiketleri arasında yer verdiğimiz bir butona tıklama (onClick) ile ne yapacağını merhaba fonksiyonuna git diyoruz. Fonksiyonda ekrana bir uyarı ile beni tıkladınız diye bir uyarı mesajı geçiyor.
Şimdi burada alert nesnesini de görmüş olduk. Alert nesnesi ziyaretçiye herhangi bir durumda uyarı vermek amacıyla kullanılır. Görüldüğü üzere parantez içerisinde çift tırnak içine uyarı yazısı yazılır.
OnDblClick olayı da onClick olayı ile yapı olarak aynıdır. onClick”ten farkı nesneye çift tıklandığında çalışmasıdır. Diğer yöntemler onClick ile aynıdır.

onMouseOver , onMouseOut
Bu tür nesne olayları ingilizce adı (onMouseOver = mouse işaretçisi(imleç) üzerindeyken , onMouseOut = mouse işaretçisi üzerinden ayrıldığında) üzerinde olmakla birlikte mouse”un nesnenin üzerinde olup olmadığı ile ilgilenir.
Bir örnek ile açıklayalım:

<html>
<head><title>onMouseOver ve onMouseOut </title>
<script language=”javascript1.2″>
<!–
function uzerinde()
{window.status=”Tiklayin ve NetYardim.net adresine gidin” }
function disinda()
{window.status=”NetYardim.net baglantisina týklayýn” }
–>
</script></head>
<body>
<a href=”http://www.netyardim.net/net/” onMouseOver = uzerinde() onMouseOut =disinda()> NetYardim </a>
</body>
</html>

onMouseOver ve onMouseOut metodu ile ilgili güzel bir örnek daha :

<html>
<head><title>OnMouseOver</title>
<script language=”javascript1.2″>
<!–
function altavista()
{document.web.mesaj.value=”En unlu web motorlarindan biri” }
function altavistasil()
{ document.web.mesaj.value=”" }
function yahoo()
{ document.web.mesaj.value=”En unlulerden bir tane daha” }
function yahoosil()
{document.web.mesaj.value=”" }
function hotbot()
{document.web.mesaj.value=”Ve bir tanesi daha” }
function hotbotsil()
{document.web.mesaj.value=”" }
–>
</script></head>
<body>
<a href=”www.altavista.com” onMouseOver=”altavista()” onMouseOut = “altavistasil()”> Altavista</a><br>
<a href=”www.yahoo.com” onMouseOver=”yahoo()” onMouseOut=”yahoosil()”>Yahoo</a><br>
<a href=”www.hotbot.com” onMouseOver=”hotbot()” onMouseOut=”hotbotsil()”>Hotbot</a><p>
<form name=”web”>
<input type=”text” name=”mesaj” size=”50″>
</form>
</body>
</html>

onSubmit
Web-de sörf yaparken çoğunlukla karşımıza çıkan formlar biz doldurduktan sonra sayfanın bağlı bulunduğu server (ana makine) ya gönderilir. Fakat biz bu onSubmit olayı ile form gönderilmeden önce formun düzgün doldurulup doldurulmadığını kontrol edebiliriz.
Bunu örnek bir kod ile açıklayalım. Html sayfamızda body etiketleri arasında doldurulmasını istediğimiz bir form var ve ona ilişkin kod başlangıcı ise şöyle :

<form action=”mail.pl” method=”post” onSubmit=”dogrula()”>

Bu satır ile formun gönderilmesiyle (onSubmit) dogrula fonksiyonunu çağırıyoruz. dogrula fonksiyonu da şu şekilde olabilir.(Bu fonksiyon head etiketleri arasında olan script etiketleri arasında olmalıdır.)

function dogrula()
{ confirm (“Formu duzgun doldurduysaniz OK”i tiklayiniz”); }

Bu fonksiyonda kullandığımız confirm nesnesi ile kullanıcıya OK ve Cancel tuşları ile emin misin ? Gönderiyorum denilmektedir.

onReset
Bu olay ile web sayfanızda bulunan formdaki yazdıklarınızın tamamen silinir. Yani yazdığınızın yanlış olduğunu farkettiniz bu durumda Sil (Reset) tuşunu tıklarsınız ve size boş bir form gelir. Yalnız burada birşeyi belirtmek isterim. Reset(Sil) tuşuna tıkladıktan sonra tarayıcının back(geri) düğmesini tıkladığınızda formunuzda yazdıklarınız tekrar geri gelmez. Fakat siz onReset olayı ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.
Bunun ile ilgili bir örnek yapalım :

<html>
<head><title>onReset</title>
<script language=”javascript1.2″>
<!–
function sil()
{ return confirm(“Silmek istediginize emin misiniz?”); }
–>
</script>
</head>
<body>
<form onReset=”return sil()”>
<input type=”text” name=”mail”>
<input type=”reset” value=”sil”>
</form>
</body>
</html>

onChange
Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır. Mouse u bu alanlar üzerine getirip tıkladığınızda onChange(değişti) olayını gerçekleştirmiş olursunuz. Şimdi bunu select yöntemi ile nasıl olduğunu görelim. Örneğimizde aşağı düşmeli bir menü tasarlayacağız ve şeçili durumda olan web sayfasına gönderme yapacağız.

<html>
<head><title>OnChange</title>
<script language=”javascript1.2″>
<!–
function degisti()
{ window.open(“www.altavista.com”); }
–>
</script>
</head>
<body>
<form method=”post”>
<p><select name=”degistir” size=”1″ onChange=”degisti()”>
<option>Adresi tikla
<option>Altavista
</select>
</form>
</body>
</html>

onLoad , onUnLoad
Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir. Bir Javascript fonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasını istiyorsak onLoad olayını kullanırız. Eski DOS”çular bilirler Autoexec.bat dosyası nasıl makine açıldığında yapılmak istenenleri yapıyorsa onLoad olayında da sayfa yüklenmeye başladığında nelerin otomatik olarak başlatılacağını belirleyebiliriz. Mesela sayfa yüklenmeye başladığında (onLoad) ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında (onUnLoad) ise İyi sörfler diyebiliriz. Örnek kodlara geçmeden önce şunu belirtmekte yarar var. Bildiğiniz üzere web sayfası kod açısında iki kısıma ayrılır. Bunlar head ve body kısmıdır. Tarayıcı açısında body kısmı asıl kısımdır. Head kısmında sayanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı body etiketleri arasında yer alır.
Şimdi de bunun için gerekli kodlara bir göz atalım.

<html>
<head>
<title>onLoad onUnLoad</title>
<script language=”javascript1.2″>
<!–
function hosgeldiniz()
{
alert(“Web Sitemize Hosgeldiniz”)
}
function gulegule()
{
alert(“Iyi sorfler..”)
}
–>
</script>
</head>
<body onLoad=”hosgeldiniz()” onUnload=”gulegule()”>
</body>
</html>

onError onAbort
Ziyaretçi sayfayı herhangi bir neden yüzünden tam haliyle yükleyememiş olabilir. Bu nedenler aktarım hızı veya tarayıcının Javascript kodunu tam manasıyla yorumlayamamış olmasıdır. İşte bu durumda Error(hata) oluşur. Html üzerinde oluşan en sık error(hata) resim haritalarının (image-map) tam anlamıyla yüklenmemesinden kaynaklanır. Çünkü bu durumda resim tam yüklenmemiştir. Bu da ziyaretçinin resim üzerinde tıklayacağı yerlerin yorumlanmamasını doğurur.
Örnek :

<img src=”resim.gif” onError=”alert(“Resim dosyasi tam olarak yuklenemedi”)” />

Ziyaretçi resimlerin yüklenmesi çok uzun sürüp yüklemeyi stop(dur) tuşu ile kestiyse bu durumda onAbort olayı gerçekleşir. Bunun sonucu olarak ziyaretçiye bir hata mesajı verebilirsiniz. Bu durum daha önce bahsettiğimiz image-map ler içindir.

<img src=”resim.gif” onAbort=”alert(“Resim harita dosyasi tam olarak yuklenemedi. Ilgili resim bir harita oldugu icin yuklenmesini tavsiye ederiz.”)” />

Bu yazıyı paylaşın :)