JavaScript

Javascript 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.

   onMouseOver,onMouseOut

   Bu tür nesne olayları ,ingilizce adı onMouseOver = fare işaretçisi(imleç) üzerindeyken , onMouseOut = fare işaretçisi üzerinden ayrıldığında, fare işaretçisinin istenen bir linkin üzerindeyken ve değilken açıklama yapmak için kullanılır.Örnek:

<html>
<head>< title>ornek</title>
<script language="javascript1.2">

</script></head>
<body>
<a href="http://www.webbilgileri.com/index.htm" onMouseOver = uzerinde() onMouseOut =disinda()> Webbilgileri.com </a>
</body>
</html>

   on Load , 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. 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 ziyaretçiye Web sitemiz hoş geldiniz diyebiliriz. Sayfadan ayrıldığında ise Hoşçakalın diyebiliriz. 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 sayfanı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. Örnek:
<html>
<head>
<title>ornek</title>
<script language="javascript1.2">

</script>
</head>
<body onLoad="hosgeldiniz()" onUnload="gulegule()">
</body>
</html>

   on Error 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 Javascriptkodunu 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.
<img src="resim.gif" onError="alert("Resim tam olarak yüklenemedi!..")">

   onmousedown ve event.button Web sayfanızı ziyaret eden bir kişinin farenin sağ tuşu ile işlem yapmasını istemiyorsanız bu iki deyimi kullanmalısınız.Örnek: Bu program parçasını mutlaka web sayfanıza ekleyin!..

<html>
<head>
<title>ornek</title></head>
<body>
<script language="JavaScript">

</script>
</body>
</html>

Devamını Oku

Javascript Nesneler ve Özellikleri

Günümüzde sıkça kullanılan bir deyim 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 kullanılan 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 bu nesne yardımıyla yapılmaktadır.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.Pencere açma işleminde 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.

   window.open("http://www.gantep.edu.tr")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.

   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.

   200x300 ebatlarında http://www.gantep.edu.tr adresine bağlanan bir pencere açmak için;
window.open("http://www.gantep.edu.tr", "ana" ," menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300";)
window.location.protocol window nesnesinin location.protocol nesnesi ise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğini gösterir.
if (window.location.protocol == "http:" )
{ document.write ("Bu belge Internet'ten geliyor.") }
else
{ document.write ("Bu belge sabit diskten geliyor") }
http: Dosyanın internetten yüklendiğini belirtir.
file: Dosyanın sabit diskten yüklendiğin belirtir.

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ı göndererilebilir.

window.history.go(-1)

Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşabilirsiniz.

window.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. window.status="Ahmet Hoca iyi günler diler!";

window.moveTo(x,y)

IE veya NN penceresini bir x,y ile belirlenmiş noktaya taşımak için kullanılır. Taşınan nokta ekranın sol üst köşesidir. Normalde bu noktanın varsayılan değeri (0,0). Window.moveTo(100,100); // Internet penceresini 100,100 noktasına taşır.Döngü deyimleri kullanılarak IE veya NN penceresi hareketli duruma getirilebilirsiniz.Örnek:

<html>
<head><title>ornek.html</title></head>
<body>
<script> 
</script>
<center>Web Sayfama Hoşgeldiniz...</center>
</body>
</html>

Devamını Oku

Karşılaştırma ve Mantıksal Operatörler

Bu operatörler değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılabilir.Bu operatörler ise;

= = operatörü iki değişkenin birbirine eşitliğini kontrol eder.
!= operatörü iki değişkenin birbirine eşit olmadığı durumlarda kullanılır.
< operatörü bilindiği üzere küçüktür operatörüdür. Soldaki değişkenin sağdakinde küçüklüğünü kontrol eder.
<= soldaki değişkenin sağdaki değişkene küçük eşitliğini kontrol eder.
> soldaki değişkenin sağdaki değişkene göre büyük olup olmadığını kontrol eder.
>= soldaki değişkenin sağdaki değişkene büyük eşitliğini kontrol eder. Bağlantılı, yani birden çok sayfa için, Bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar.

Mantıksal Operatörler

Bu tip operatörler iki değişkene bağlı karşılaştırılmaların yapılmak istendiği durumlarda kullanılır. Operatörler
&& , || , ! operatörleridir.

&& And (ve)

operatörü iki değişkenin de değeri doğru olması istendiğinde kullanılır. Örneğin. sayının hem 60' dan yukarı alanların geçtiği , hem de 60'tan küçük olanların kaldığı bir program yapalım.

Html Etiketi	Etiket ekran görünümü
<html> <head> <script language="JavaScript"> function gec() { document.write("geçtiniz notunuz= ",x) } function kal() { document.write("kaldınız notunuz= ",x) } </script> </head> <body> <script language="JavaScript"> var x=85 if (x < 100 && x > 60) gec() else kal() </script> </body> </html>	geçtiniz notunuz= 85

|| or (veya)

operatörü iki değişkenden en az birinin doğru olması durumu istediğinde kullanılır . Aşağıdaki örnekte x sıfırdan büyük veya eşit ise "x pozitif sayı." yazan programı yapalım.

Html Etiketi	Etiket ekran görünümü
<html><head> <script language="JavaScript"> function negatif() { document.write(x," Negatif sayı.") } function pozitif() { document.write(x," Pozitif sayı.") } </script> </head><body> <script language="JavaScript"> var x=21 var y=((x > 0) \|\| (x == 0)) if (!y) negatif() else pozitif() </script> </body></html>	21 Pozitif sayı.

! Not (değil)

operatörü değişkenin değeri doğru ise yanlış , yanlış ise doğru olması istendiği durumlarda kullanılır.

Html Etiketi	Etiket ekran görünümü
<html><head> <script language="JavaScript"> function negatif() { document.write(x," Negatif sayı.") } function pozitif() { document.write(x," Pozitif sayı.") } </script> </head><body> <script language="JavaScript"> var x=-1 if (!(x>=0)) negatif() else pozitif() </script> </body></html>	-1 Negatif sayı.

Devamını Oku

Javascript Function

Çogu zaman "Javascript" kodunuzda bir islemin birden fazla yapilmasi gerekebilir. Hatta kimi zaman Javascript'e bir islem yaptirmadan önce baska bir islemi yaptirmak istenebilir. Iste bu tür tekrarlanan isin yapilmasi için gerekli islem ve komut gruplarina Fonksiyon adi verilir. Fonksiyonlar genelde, filanca isimli gruptaki islemleri yap oradan bir deger al bunu filanca isimli gruba götür gibi islemler için kullanilir. Bu tür komut sistemleri Javascript'te en çok kullanilan komut türlerindendir. Fonksiyonun yazim kurallari su sekildedir ;

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

Fonksiyona Deger Gönderme ve Deger Alma:

Bir fonksiyonun Javascript içerisindeki ilk önemli görevi diger fonksiyonlardan veya herhangi bir yerden bir deger alip onu kendi içerisinde isletip sonra istenilen fonksiyona veya yere göndermektir. Bir sonucu bir fonksiyondan çagirmak için return deyimi kullanilir.Örnek :

<html>
<title>ornek.html</title>
<head>
<script language="JavaScript">
function carp(a,b){
var c=a*b;
return t;
}
</script>
</head>
<body>
<script language="JavaScript">
var x = prompt("Iki Sayinin Çarpimi","Birinci Sayi");
var y = prompt("Iki Sayinin Çarpimi","Ikinci Sayi");
var z = carp(x,y);
document.write( x,"*",y,"= ",z);
</script>
</body>
</html>

Devamını Oku

Javascript Döngü Deyimleri

Bu tip deyimler bir kümenin belli bir kosul altinda yinelenmesi için kullanilir. while,do...while ve for olmak üzere üç tip döngü deyimi vardir.Javascript'te diger programlama dillerinde oldugu gibi istediginiz islemi 2 veya daha fazla kez yaptirmak için belli program kodlari mevcuttur.

while

   Tekrarlama deyimidir. Bir küme ya da deyim while kullanilarak bir çok kez yinelenebilir. Yinelenmesi için kosul sinamasi çevrim basinda yapilir. Genel yazim biçimi;

while(kosul){
...
döngüdeki deyimler; [küme]
...
}

   Kosul olumlu oldugu sürece çevrim yinelenir. Iki veya daha çok kosul mantiksal operatörler birlestirilerek verilebilir.Örnek:

<html>
<head>< title>ornek6.html</title></head>
<body>
<script Language="JavaScript">

</script>
</body>
</html>

   do ...while

   Bu deyim while dan farki, kosulun döngü sonunda sinanmasidir. Yani kosul sinanmadan çevrime girilir ve döngü kümesi en az bir kez yürütülür.Kosul olumsuz ise döngüden sonraki satira geçilir.Genel yazim biçimi;

do{
...
döngüdeki deyimler;
...
}while(kosul);
Örnek:

<html>
<head><title>ornek7.html</title></head>
<body>
<script Language="JavaScript">

</script>
</body>
</html>

   for

   Diger döngü deyimleri gibi bir öbegi bir çok kez tekrarlamakta kullanilir. Kosul sinamasi while da oldugu gibi girmeden yapilir. Bu döngü deyimin içinde digerlerinden farkli olarak baslangiç degeri ve döngüsayacina sahip olmasidir. Genel yazim biçimi;

for(baslangiç;kosul;artim){
...
döngüdeki deyimler;
...
}

Örnek:

<html>
<head><title>ornek8.html</title></head>
<body>
<script language="JavaScript">

</script>
</body>
</html>

   break ve continue Ifadeleri

   Döngü deyimleri içindekiler yürütülürken, çevrimin, kosuldan bagimsiz kesin olarak sonlanmasi gerektiginde veya döngünün bir sonraki çevrime geçmesi istendiginde bu deyimler kullanilir.Örnek:

<html>
<head>< title>ornek</title></head>
<body>
<script>
var x=0;var y=1;var z=6;
do{
y++;
x+=y;
if(x>=z) {break; } // while deki kosula bakilmaksizin döngü sonuna gider.
if(y<=3) {continue;}// y<=3 oldugu sürece döngü bir sonraki çevrime girer.
}while(x<10); // x<10 oldugu sürece çevrime devam et.
document.write(”x=”,x ,”y=”,y ,”z=”,z);
</script>
</body>
</html>

Devamını Oku

Aritmetik ve Özel Operatörler

Aritmetik Operatörler

Her zaman kullandığımız bu operatörler + (toplama, - (çıkarma ), * (çarpma) , / (bölme) , % (tamsayılı bölme işlemi yapar ve kalanı verir).

Html Etiketi

Etiketin Web Sayfasındaki görüntüsü

<html>
<head>
<title>toplama</title>
</head>
<body>
   <script language="javascript">
var sayi=5+18;
var sayi1=18-5;
var sayi2=18*5;
var sayi3=18/5;
var sayi4=18 % 5;
      document.write("Toplama=",sayi);
   document.write("<br>","Çıkarma=",sayi1);
document.write("<br>","Çarpma=",sayi2);    document.write("<br> ","Bölme=",sayi3);
   document.write("<br> ","Kalan=",sayi4);
</script>
</body>
</html>

Toplama=23
Çıkarma=13
Çarpma=90
Bölme3.6
Kalan=3

Özel Operatörler

Bazen değişkenlerin değerini, kendisiyle işlem yaparak değiştirebiliriz. Örneğin:

var sayi = 9
sayi = sayi + 1
Bu durumda sayi =9 + 1 = 10 olur.

var sayi = 9
sayi = sayi - 1
Bu durumda sayi = 9 - 1 = 8 olur.

var sayi = 9
sayi = sayi * 5
Bu durumda sayi = 9 * 5 = 45 olur.

var sayi = 50
sayi = sayi / 2
Bu durumda sayi = 50 / 2 = 25 olur.

var sayi = 21
sayi = sayi % 4
Bu durumda sayi = 21 % 4 = 1 olur.

Bu işlemleri şu işaretlerle de yapabiliriz: "+=", "-=", "*=", "/=" ve "%=". Aşağıdaki işlemler birbiriyle aynı sonucu verir.

sayi += 7	eşittir	sayi = sayi + 7
sayi -= 8	eşittir	sayi = sayi - 8
*sayi = 12**	eşittir	*sayi = sayi 12**
sayi /= 3	eşittir	sayi = sayi / 3
sayi %= 5	eşittir	sayi = sayi % 5

Devamını Oku

« 1 »