Java Script Kodları, Java Script örnekleri, Java script dersleri

15 08 2007

Java Script Kodları, Java Script örnekleri, Java script dersleri

Fatih Tarafından Bilgisayar Kategorisine Yazıldı

JavaScript Nedir:JavaScript; web tasarımı ile ilgilenenler için HTML dilinden sonra en önemli dildir. İyi bir web tasarımcısı olmak için en az html ve JavaScript dillerini bilmeniz lazım. Bu dilin en büyük özelliği html dili ile iç içe kullanılması ve kolay anlaşılır olmasıdır. Bu özellikleri JavaScript ‘i en çok kullanılan diller arasına sokmuştur. JavaScript dilini öğrenebilmek için html dilini çok iyi bilmek gerekir. Html dilini bilmiyorsanız hiç şansınız yok Şey aslında bi şansınız var… Bu sitede sevgili Savaş ‘ın yazdığı HTML dersleri de var… Ama bence Savaş ‘ın o iğrenç esprilerine katlanmak yerine webmaster olmaktan vazgeçin daha iyi Yani en azından HTML’den nefret etmemiş olursunuz. JavaScript Ne İşe Yarar: Kuru kuruya bir kaç resim ve yazıdan oluşan sitelerden bıktıysanız ve zorlanmadan daha fazlasını öğrenmek istiyorsanız, JavaScript dili tam size göre, bu dil sayesinde kolayca sitenizi canlandırıp, ziyaretçi ile diyalog içine sokabilirsiniz. Bu dil sayesinde bir çok şey yapabilirsiniz bunların başında form kontrolü, ufak oyun ve programlar gelir. Kısacası html dilini biliyor ve kendinizi daha fazla geliştirmek istiyorsanız aramıza hoş geldiniz JavaScript Diline Giriş:JavaScript dili de diğer tüm programlama dilleri gibi komutlardan meydana gelir. İsterseniz önce bu komutların yazılış formatını görelim.

Temel olarak JavaScript komutları Html de <script></script> tagları arasına yazılır.

<html>
<script language=”javascript”> Bu satırda kullanacağımız scriptin versiyonunu belirtiyoruz.
{
Bu raya JavaScript komutları yazılır
}
</script>
<body>
Bu araya html kodları yazılır ve JavaScripte yönlendirme yapılır
</body>
<html>

Yukarıdaki örnekte kullandığımız JavaScript’in versiyonunu language komutunu kullanarak belirtiyoruz. JavaScript’in bir den fazla versiyonu vardır (JavaScript1.0, JavaScript1,2 vs.). Bu versiyonların her birinde yeni komutlar eklenmiştir bu nedenle scriptin versiyonunu belirtmek önemlidir. Daha sonra hangi versiyonla hangi komutların eklendiğini daha ayrıntılı olarak inceleyeceğiz.

JavaScript komutları sadece bu formatla sınırlı değildir. Direk html kodları arasında ya da “js” uzantılı dosyalar olarak da kullanılabilirler. İlerde bu değişik formatları daha detaylı olarak ele alacağız. Biz anlatımımız boyunca bu formatları karışık olarak kullanacağız.

Fonksiyonlar

JavaScript komutları genelde fonsiyon içinde tanımlanırlar. Basit scriplerde fonksiyona pek gerek duyulmasa da scriptin karmaşıklığı artıkça fonksiyon kullanımı gerekebilir ve çoğu zaman zorunlu hale gelir. Biz de anlatımımız boyunca vereceğimiz örneklerin hemen hemen hepsinde fonksiyon kullanacağımız için ilk dersimize fonksiyon kullanımı ile başlamak istedim. Umarım bi sakıncası yoktur? Gerçi olsa ne yazar..

JavaScript’te foksiyon kabaca function fonksiyonun_adı() şeklinde tanımlanır ve fonksiyonun çalışabilmesi için herhangi bir komutla tetiklenmesi gerekir.

Örnek :

<html>
<script language=”javascript”>
function mesaj()
{
alert(”fonksiyon örneği çalışıyor.”)
}
</script>
<body>
<center>
<p> <b>Function Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>

Not: Bu JavaScript’te fonksiyonu tetiklemek için “<button></button>” ve “onclick” komutlarını kullandık bunları ilerleyen derslerde daha ayrıntılı olarak inceleyeceğiz şimdilik bilmeniz gereken bu komutların genelde beraber kullanıldığıdır. Diğer örneklerimizde de bu komutlardan yararlanacağız..

<button onclick=”fonksiyonun adı“>tıklayıın</button>

Fonksiyona Dışarıdan Değişken Gönderme.

Foksiyonların en çok kullandığımız özelliklerinden biri de dışarıdan değişken alabilme özelliğidir.
function deneme(a) ‘şeklinde tanımlanan bir fonksiyona dışarıdan her hangi bir “a” ve değişkeni yollanabilir. Dışardan bir değişken yollanabileceği gibi birden fazla değişkende yollana bilir.
function deneme(x,y) ‘şeklindeki bir fonksiyona dışarıdan “x” ve “y” gibi iki değişken gönderilebilir. Gönderilen ilk değişken “x” ikinci değişken “y” olarak algılanır.
dışarıdan yollanan değişken, tetikleme komutunun sonuna eklenen deneme(’ali‘,’veli‘) (burada deneme(’ali’,'veli’) yazmamızın nedeni tetiklenecek fonksiyonun adının deneme() olmasıdır) komutu ile yollanır burada ‘ali’ birinci değişken ‘veli’ ise ikinci değişkendir.

Örnek :

<htm>
<script language=”javascript”>
function deneme(a,b)
{
alert(”birinci değişkeniniz=”+a)
alert(”ikinci değişkeniniz=”+b)
}
</script>
<body>
<center>
<p><b>İkinci Function Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme(’bilim’,'teknoloji’)”>
</body>
</html>

Mesaj Kutuları

Alert Kutusu: Alert kutusu uyarı mesajları vermek için kullanılır. Mesaj kutuları içinde en çok kullanılanı alert kutusudur. Bu kutu bir ünlem işareti, yazdığınız mesaj ve bir tamam butonundan oluşur.

alert(deşğişken) yada alert(”Masj buraya yazılır“)

Örnek:

<html>
<script language=”javascript”>
function mesaj()
{
alert(”ilk örneğimiz çalışıyor”)
}
</script>
<body>
<center>
<p><b>Alert Kutusu Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>

Confirm Kutusu: Confirm kutusu genelde yapılacak olan işlem hakkında kullanıcıya soru sormak için kullanılır. Bir soru işareti, mesajınız, bir Tamam ve bir İptal butonlarından oluşur.

* Bu mesaj kutusuyla verilen mesajın cevabı bir değişkene atanarak değişik işlemler yapılabilir.
- Cevap olarak, “Tamam” butonunun tıklanması değişkene “1″ değerini atar.
- “İptal” butonunun tıklanması ise değişkene “0″ değerini atar. (Pencerenin köşesinden kapatılması, “İptal” butonuna basmak ile aynı işlevi görür)

confirm(Değişken) yada confirm(”mesaj buraya yazılır“)

Örnek:

<html>
<script language=”javascript”>
function mesaj()
{
var a
a = confirm(”Tamam yada İptali tıklayın.”)
if (a==1)
{
alert(”Tamam tuşunu tıkladınız.”)
}
if (a==0)
{
alert(”İptal tuşunu tıkladınız.”)
}
}
</script>
<body>
<center>
<p><b>Confirm Kutusu Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>

Not: Bu örnekte “if (a==1)” kısmıyla başlayan satırdan scripti kapattığımız satıra kadar olan kısımda if() komutu yardımı ile karşılaştırma yapıyoruz. Şimdilik bu bölüm sizi alakadar etmiyor sadece scriptin anlaşılır olması için eklenmiştir. Ayrıca var a şeklinde kullanılan satır “a” isminde bir değişken tanımlamak için kullanılmıştır. Şimdilik bu kısımlara takılmayın ilerleyen derslerde bunlar ayrıntılı olarak anlatılacak.

Prompt() Mesaj Kutusu : Prompt mesaj kutusu diğer mesaj kutularından farklı olarak kullanıcının değer girişi yapabildiği bir kutudur. Yani kullanıcıya verilen mesaj karşılığında bir değer girmesi istenir. Değişkene atanan bu değer script içinde isteğe göre değerlendirile bilinir.

değişken = prompt(’mesaj‘,’örnek‘)

Örnek:

<html>
<script language=”javascript”>
function mesaj()
{
var a
a = prompt(”Adınızı Giriniz”,”Adınız”)
alert(a+” JavaScript Öğrenmeye başladın artık!”)
}
</script>
<body>
<center>
<p><b>Confirm Kutusu Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</html>

Değişkenler

Değişken : Değişken, JavaScript de dahil olmak üzere tüm programlama dillerinde kullanılan, içeriği tamamen isteğe bağlı olarak atanan ve programcı tarafından ihtiyaca göre oluşturulan nesnelerdir. Değişkenin içeriği metin yada sayı olabilir.

JavaScripte Değişken Kullanımı : JavaScript’te değişken kullanmak için ilk olarak, değişken isminin “var” komutu kullanılarak belirtilmesi gerekir. (Evet bu değişkeni önceden belirtme işi çok gıcık ama napalım gülü seven dikenine katlanır). Hemen değişkeni belirtirken yada daha sonra script içerisinde değişkene bir değer atanabilir. Eğer değişken tanıtılmadan içeriğine bir değer atanılmaya çalışırsa script çalışmaz.

var gezegen
gezegen = “mars“

yada

var gezegen = “mars“ ‘ Bu örneklerde değişkenimiz “gezegen”, değeri “mars” tır.

* Bir var komutu ile birden çok değişken tanımlana bilir.

var okul,sınıf,no ‘burada var komutu okul,sınıf ve no olmak üzere üç değişken oluşturduk.

Örnek:

<html>
<script language=”javascript”>
function deneme()
{
var mesaj
mesaj = “örneğimiz çalışıyor”
alert(mesaj)
}
</script>
<body>
<center>
<p><b>Değişken Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme()”>
</body>
</html>

JavaSdript Değişkenlerinin Özellikleri:

   - JavaScrip’te değişken kullanılmadan önce “var” komutu ile tanımlanmalıdır.
   - JavaScrip’te değişkene atanan değer ” “ yada ‘ ‘ imleri arasına yazılır.
   - Küsuratlı sayısal değerler “.” (nokta) ile gösterilir.   3.5 ( “,” virgül kullanılmaz.)
   - JavaScrip’te değişken algılanırken büyük küçük harf ayrımı yapılır. Örneğin “okul” ile “Okul” kelimeleri JavaScript tarafından iki farklı değişken olarak algılanır.

Değişken Çeşitleri

Boolean Değişkeni : Bu değişkenler iki farklı değer alabilen değişkenlerdir. Bu değişkenin “true” değerini alması değişkenin geçerli yada kullanıla bilir olduğu, “false” değerini alması ise geçersiz yada kullanılamaz olduğu anlamına gelir. Ayrıca “false” yerine “0″, “true” yerine “1″ değerleri de kullanıla bilir. Bu değişkeni ilerde bazı örneklerde kullanacağız.

Global Değişken : Global değişken, diğer değişkenler gibi hemen hemen tüm programlama dillerinde kullanılır. Kullanım amacı; Bir fonksiyon içinde tanımladığımız bir değişken başka bir fonksiyon için geçerli değildir. Yani bir fonksiyonda tanımlayıp kullandığımız bir değişkeni başka bir fonksiyonda kullanmak için yeniden tanımlayıp değer atamamız gerekir. Ama bazı durumlarda aynı değişkenin bir çok fonksiyonda kullanılması gerekebilir. Yani değişkene verdiğimiz değerin tüm fonksiyonlarda geçerli olması ve değerinin değiştirilebilmesi istenebilir. Bu durumda global değişkene ihtiyaç duyulur.

JavaScrip’te global değişken kullanımı çok kolaydır. Yapmanız gereken tek şey, global değişken olarak kullanmak istediğiniz değişkeni fonksiyon içinde degil de hemen scripti tanımladıktan sonra yani fonksiyon açmadan tanımlamaktır. Yani hiç bir ek komuta gerek yoktur. Bu şekilde tanımladığınız bir değişkeni script içindeki tüm fonksiyonlarda tekrar tanımlamaya gerek kalmadan kullana bilirsiniz.

Örnek:

<html>
<script language=”javascript”>
var sayi = ‘10′
function deneme1()
{
alert(”1. fonksiyon, global değişken =”+sayi)
}
function deneme2()
{
alert(”2. fonksiyon, global değişken =”+sayi )
}
</script>
<body>
<center>
<p><b>Global Değişken Örneği</b></p>
<p>Fonsiyon 1</p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme1()”><br>
<p>Fonsiyon 2</p>
<input type=”button” value=”Tıklayın!..” onclick=”deneme2()”>
</body>
</html>

Array (Dizi) Değişken : Diğer tüm değişken türleri sadece bir tek değer alabilmekteydi. Ama dizi değişkende birden fazla değer tek değişken içinde tutulabilir. Dizi değişken oluşturmak için diğer değişkenler gibi önce değişkenin adı “var” komutu ile tanımlanır. Daha sonra “new Array()” komutu ile değişkene değerler atanır.

* Dikkat edilmesi gereken en önemli unsur “Array” komutunun ilk “A” harfi mutlaka büyük harfle yazılmalıdır. Küçük a yazılırsa script çalışmaz.

var degisken
degisken = new Array(deger1,deger2,deger3,deger4….)

Dizi değişkenin değerleri okunurken degişken[0], degişken[1], degişken[2] şeklinde okunur. Burada dikkat edilmesi gereken en önemli unsur. ilk değerin [0] olarak tutuluyor olmasıdır, sonra sırası ile [1], [2] … şeklinde devam eder.

Örnek:

<html>
<script language=”javascript”>
function dizi_degisken()
{
var gezegenler
gezegenler = new Array(”merkur”,”venus”,”dunya”,”mars”,”jupiter”)
alert(”değişkenleriniz = “+gezegenler[0]+gezegenler[1]+gezegenler[2]+gezegenler[3]+gezegenler[4])
}
</script>
<body>
<center>
<p><b>Dizi Değişken Örneği.<b></p>
<input type=”button” value=”Tıklayın!..” onclick=”dizi_degisken()”>
</body>
</html>

Mantıksal ve Matematiksel İşlemler

Karşılaştırmalar : Karşılaştırma işlemleri genellikle scripte koşul vermek için kullanılır. Değerler koşula uygunsa sonuç “true”, değilse “false” dir.

JavaScrip’te karşılaştırma operatörleri tablosu ;

Operatör	Adı	Anlamı
==	Eşit	Sol ve sağdaki değerler biribirlerine eşitse
!=	Eşitdeğil	Sol ve sağdaki değerler birbirlerine eşitdeğilse
<	Küçük	Soldaki değer sağdaki değerden küçüse
>	Büyük	Soldaki değer sağdaki değerden büyükse
<=	Küçük yada eşit	Soldaki değer sağdaki değere eşit yada küçükse
>=	Büyük yada eşit	Soldaki değer sağdaki değere eşit yada büyükse

Mantıksal İşlemler : Mantıksal işlemler genelde birden fazla karşılaştırma işlemi arasında bağ kurmak içim kullanılır. Örneğin iki koşul arasında “||” operatörü kullanıldığında sağdaki yada soldaki koşullardan herhangi birinin sonucu “true” (doğru) ise mantıksal işlemin sonucunda “true” dir.

JavaScrip’te mantıksal işlem operatörleri tablosu ;

Operatör	Adı	Anlamı
&&	Ve (and)	Sol ve sağdaki koşulların her ikiside doğruysa
\|\|	Veya (or)	Sol ve sağdaki koşullardan herhangi biri doğruysa
!	Değil	Verilen koşul doğru ise

Not: Karşılaştırma işlemleri ve mantıksal işlemler hakkındaki örnekleri if() komutunu incelerken kullanacağız.

Matematiksel İşlemler : Dört işlem (toplama, çıkartma, çarpma ve bölme) için kullanılan basit matematiksel ifadelerdir.

JavaScrip’te matematiksel işlem operatörleri tablosu ;

Operatör	Adı	Anlamı
+	toplama	Sol ve sağdaki değerleri birbirine ekler.
-	çıkarma	Soldaki değerden sağdaki değerleri çıkarır.
*	çarpma	Sol ve sağdaki değerleri birbiri ile çarpar.
/	bölme	Soldaki değeri sağdaki değere böler.

Math Nesnesi: JavaScript’te karmaşık matematiksel işlemler Math nesnesi yardımı ile kullanılır. Math nesnesi temel matematiksel işlemlerin yanı sıra yararlı birkaç karşılaştırma işlemi de içermektedir. Bu ek işlemler çok kolaylıklar sağlar. Örneğin girilen iki sayıdan hangisinin büyük olduğunu Math.max() komutu yardımı ile kolayca görebiliriz.

Math nesnesi işlem operatörleri tablosu ;

Operatör	Adı	Anlamı
PI	“pi”sayısı	“pi” sayısının tam değerini verir.
E	“e”sayısı	“e” sayısının tam değerini verir.
sqrt(x)	karekök	x’sayısının karekök değeri.
log(x)	logaritma	x’sayısının karekök değeridir.
pow(x,y)	x^y	x üzeri y sayısının değeri.
sin(x)	sinüs	x’sayısının sinüs değeri.
cos(x)	cosinüs	x’sayısının cosinüs değeri.
tan(x)	tanjant	x’sayısının tanjant değeri.
asin(x)	arcsinüs	x’sayısının arcsinüs değeri.
acos(x)	arccosinüs	x’sayısının arccosinüs değeri.
atan(x)	arctanjant	x’sayısının arctanjant değeri.
abs(x)	tamkısım	x’sayısının tamkısımını döndürür
max(x,y)	büyük sayı	x ve y sayılarından büyük olanın değeri
min(x,y)	küçük sayı	x ve y sayılarından küçük olanın değeri
ceil(x)	büyük tam sayı	x’sayısından büyük en yakın tamsayı değeri
floor(x)	küçük tam sayı	x’sayısından küçük ve en yakın tamsayı değeri
round(x)	tam sayı	x’sayısına en yakın tam sayı değeri.
random()	rasgele sayı	“0″ ile”1″ arasında rasgele bir sayı değeri
exp(x)	sayı	x’sayısının kendisi

Kullanım Şekli: Yukarıdaki tabloda verdiğimiz komutlar tek başlarına kullanılamazlar. Muhakkak Math nesnesi ile birlikte kullanılmalıdırlar.

Math.komut ‘ Örneğin Math.sin(30)

* Math komutunun ilk harfi muhakkak büyük olmalıdır. “math” şeklindeki bir yazım ilk harfi küçük olduğu için çalışmayacaktır.
* Aynı şekilde yukarıdaki tabloda verilen operatörler aynen tabloda verildiği gibi küçük harfle yazılmalıdır. Herhangi bir karakteri büyük harfle yazılırsa script çalışmaz.

Örnek: Girilen sayısının karekökünü bulan bir script;

<htm>
<script language=”javascript”>
function kok()
{
alert(’9 un karekökü= ‘+Math.sqrt(9))
}
</script>
<body>
<center>
<p><b>Math Nesnesi Örneği</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”kok()”>
</body>
</htm>

Documet Nesnesi Ve Form Nesneleri

Document Nesnesi: JavaScrip’te document nesnesi üzerinde bulunduğumuz sayfa anlamına gelir. Document nesnesi kullanılarak üzerinde bulunduğumuz sayfanın özelliklleri değiştirilebilir.

Operatör:	Anlamı:
title	Sayfanın başlığı
bgcolor	Sayfanın ardalan rengi
fgcolor	Sayfanın yazı rengi
linkColor	Sayfanın link rengi
alinkColor	Üzerinde bulunulan link rengi
vlinkColor	Ziyaret edilmiş link rengi
location	Sayfanın URL’si
lastmodified	Sayfanın son güncellendiği tarih
write()	Sayfa içerisine yazı yazmak için kullanılır
clear()	Sayfanın JavaScriptle eklenen içeriğini temizler.

Location Nesnesi : O an üzerinde bulunan web sayfası manasına gelmektedir. Özellikleri aşağıdaki tabloda verilmişti.

Özellik:	Açıklama:
href	Üzerinde bulunulan sayfanın URL’sini verir
protocol	Üzerinde bulunulan sayfanın Protokol türünü verir
reload()	Üzerinde bulunulan sayfanın yeniden yüklenmesini sağlar.

History Nesnesi : Daha önce ziyaret edilen sayfaları hafızasında tutan ve istenildiğinde bu sayfalardan birine dönüşü sağlayan bir nesnedir.

Özellik:	Açıklama:
length	Ziyaret edilen toplam sayfa sayısını verir
go(x)	Ziyaret edilmiş x’inci sayfaya gidiş dönüş kullanılır
back()	Ziyeret edilen bir önceki sayfaya dönüş için kullanılır.
foward()	Ziyeret edilen bir sonraki sayfaya dönüş için kullanılır.

örneğin, history.back() ‘bir önceki sayfaya dönüş için kullanılır.

Form Nesneleri: HTML dilinde veri yollamak amacı ile formlar kullanılır. Form içerisinde textarea, textbox, password, submit, checkbox ve radio gibi nesneler yer alır. Forma ziyaretçi tarafından girilen bilgiler “post” yada “get” metodları kullanılarak CGI, ASP gibi form yakalama özelliği olan bir dosyaya yönlendirilebilir. Ziyaretçi defterlerinde ve anketlerde genellikle form nesnesinden yararlanılır.

JavaScript genellikle form içindeki herhangi bir nesnenin içeriğini kontrol edebilmek ve değiştirmek için kullanılır.

kulanım şekli; document.Formİsmi.Nesneİsmi.Özellik

İsterseniz şimdi form nesnesini ve form nesnesi içinde yer alan nesnelerin JavaScript tarafından değiştirile bilen özelliklerini inceleyelim.

Form Nesneleri: Formlar daha önce de belirttiğimiz gibi ziyaretçi tarafından girilen bilgileri başka bir dosyaya yönlendirmek amacı ile kullanılırlar nesnelerdir.

Özellik:	Açıklama:
name	formun adı
value	formun içeriği
action	formun yönlendirileceği sayfanın yeri ve adı
methot	form yöntemi “Get” yada “Post”
lenght	form içindeki nesne sayısı
elements	form içinde kullanılan nesneler

Form nesnesi bir çok yardımcı nesne ile birlikte kullanılır bu nesneler <form> </form> tagları arasına yerleştirilir ve form herhangi bir dosyaya yönlendirildiğinde tüm bu nesnelerin değeride yönlendirilmiş olur.

HTML dilinden tanıdığınız bu nesneleri ve özelliklerini kısaca inceleyelim.

Nesne:	Anlamı:
select	Seçim listesi
text	Yazı kutusu
password	Parola kutusu
textarea	Yazı alanı
button	Buton
submit	Form onaylama butonu
reset	Form temizleme butonu
checkbox	Seçim kutusu (Çoklu seçme özelliği)
radio	Seçim kutusu (Tek seçme özelliği)
image	Resim
href	Link

JavaScript dilinde bu form nesnelerinin olaylara karşı duyarlılığı sıksık kullanılır ve bizi asıl ilgilendiren bu nesnelerin duyarlılık gösterdiği olaylardır.

Nesne:	Özellikler:
select	onclick,onblur,onchange,onfocus
text	onclick,onblur,onchange,onfocus,onselect
password	onclick,onblur,onchange,onfocus,onselect
textarea	onclick,onblur,onchange,onfocus,onselect
button	onclick
submit	onclick,onsubmit
reset	onclick,onreset
checkbox	onclick,onchange,onchecked
radio	onclick,onchange,onchecked
image	onclick,onmouseover,onmouseout,oneror,onabort
href	onclick,onmouseover,onmouseout

Yukarıdaki olaylar dediğimiz özellikler sonraki derslerimizde daha ayrıntılı birşekilde anlatılacak.

if()… else Komutları

if() Komutu: “if” kelimesi İngilizce de “eğer” anlamına gelmektedir. JavaScript’deki anlamı da tam olarak budur. Yani JavaScript’te if() komutu; eğer verdiğim koşul doğruysa süslü parantezler “{…}” içindeki komutları uygula anlamına gelmektedir.

if komutunun kullanım formatı;

if(…) ‘burada ki parantezler içerisine gerçekleşmesini istediğiniz koşul yazılır.
{….} ’süslü parentezler arasına yukarıda verdiğimiz koşul sağlandığı zaman çalıştırılmasını istediğimiz komutlar yazılır.

Örneğin, “x” adında değeri dışarıdan girilebilir bir değişen tanımlamış olalım ve “x” değişkeninin değeri “1″ olduğunda karşımıza içinde BilimVeTeknoloji.Com yazan bir alert kutusu çıksın.

Bu için “if(x==1)” komutunu kullanarak eğer x=1 ise süslü parantezler arasındaki komutları çalıştır dememiz gerekiyor. “x” değişkenine “1″ değeri girildiğinde if komutu bizi süslü parantezler içine gönderir. Ve burada ki “{alert(”BilimVeTeknoloji.Com“)}” komutu sayesinde karşımıza içerisinde BilimVeTeknoloji.Com yazısı olan bir alert kutusu çıkar.

if(x==1)
{
alert(”BilimVeTeknoloji.Com”)
}

* Burada dikkat etmemiz gereken en önemli şey, karşılaştırma yaparken iki “=” işareti kullanıyor olmamız (x==1). Eğer tek “=” kullansaydık, “x” değişkenini 1′e eşitlenecek ve her durumda süslü parantez içerisindeki komutları çalışacaktı.

Evet if() komutu sayesinde verdiğimiz koşul gerçekleştiğinde istediğimiz komutların çalışmasını sağladık. Peki bu koşulun geçekleşmemesi durumunda tanımladığımız başka komutların çalışmasını istiyorsak bunu nasıl sağlarız? İşte bu noktada else komutu devreye giriyor.

else Komutu: else komutu daima if() komutu ile birlikte kullanılır. if() komutuyla belirlenen koşul gerçekleşmediği taktirde else komutu içerisinde belirlenen komutlar çalışır.

if() komutunu işlerken yaptığımız örneğe devam edelim; yukarıdaki örnekte “x” değişkeni “1″ değerini aldığı taktirde BilimVeTeknoloji.Com metinini içeren bir alert kutusu açılıyordu. Şimdi de “x” değişkenine birden başka bir değer girildiğinde etkin olacak bir mesaj yazalım.

İlk olarak “else” komutunu kullanarak “x” değişkeninin 1′den başka bir değer alması durumunda etkin olacak komutlar hazırlayalım. Yukarıdaki if() komutu x’in 1′e eşit olması durumunda etkin olduğu için bu örneğe ekleyeceğimiz else komutu x eşit değilse 1′e anlamı taşıyacaktır. x eşitdeğil 1 durumunda else komutu ile birlikte süslü “{…..}” parantezler arasına yazılan komutlar etkin olacaktır.

else
{
alert(”lütfen değişkene ‘1′ değerini giriniz.”)
}

Örnek :

<html>
<head>
<script language=”javascript1.2″>
function load()
{
var x
x=document.form1.T1.valueif(x==1)
{
alert(”BilimVeTeknoloji.Com”)
}else
{
alert(”lütfen değişkene ‘1′ değerini giriniz.”)
}
}
</script>
</head>
<body>
<center>
<p><b>if()…else Komutu Örneği</b></p>
<br>Lütfen bir sayı giriniz….
<form name=”form1″>
<input name=”T1″>
<input type=”button” value=”Tıklayın!..” onclick=”load()”>
</form>
</body>
</html>

Döngüler

For() Döngüsü: for() döngüsü, belirtilen değişkenin değeri, belirlelen sınırlar arasında olduğu sürece istenilen komutların işlenmesini sağlamak için kullanılır. for() döngüsünde kullanılacak olan değişkenin önceden tanımlanmasına gerek yoktur. For() döngüsü kullanacağı değişkeni kendisi tanımlar ve belirlenen peryotla değerini değiştirir.

Örnek: 0′dan başlayıp 10′a kadar 1′er 1′er artarak değer alan x değişkeni elde edmek için for() döngüsünü şu şekilde kullanabiliriz.

<htm>
<script language=”javascript”>
function dongu()
{
for(x=0;x<10;x=x+1)
{
alert(x)
}
}
</script>
<body>
<center>
<p><b>For() Döngüsü Örneği.</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”dongu()”>
</body>
<htm>

Yukarıdaki örnekte for() döngüsü içerisine yazdığımız “x=0” komutu ile “x” değişkeninin başlangıç değerinin “0″ olduğunu, “x<10” komutu ile de x değişkeninin bitiş değerinin “9″ olduğunu belirtmiş oluyoruz. “x=x+1” komutu ise değişkenin değerinin 1′er 1′er artacağını gösteriyor. Süslü parantezler içine yazdığımız “alert(x)” komutu ise bize x’in değerini alert kutusu içinde gösterilmesini sağlıyor.

While() Döngüsü: While() öngüsü, belirtilen şart geçerli olduğu sürece istenilen komutların işlenmesini sağlamak için kullanılır. While() döngüsünde kullanılacak olan değişkenin daha önceden tanımlanması zorunludur. Aynı zamanda değişkenin değeri farklı bir komut yardımı ile değiştirilmelidir.

Örnek: Yukarıdaki örnekte yaptığımız işlemin aynısını while() komutunu kullanarak şu şekilde yapabiliriz.

<htm>
<script language=”javascript”>
function dongu()
{
var x
x=0
while(x<10)
{
alert(x)
x=x+1
}
}
</script>
<body>
<center>
<p><b>While() Döngüsü Örneği.</b></p>
<input type=”button” value=”Tıklayın!..” onclick=”dongu()”>
</body>
<htm>

Window Nesnesi

Window nesnesi, genelde istenilen özelliklere sahip bir pencere açıp, kapatmak için kullanılır. Açtığımız bu yeni pencerenin içriğinde istediğimiz değişikliği yapabiliriz.

window.open: Belirtilen özelliklere sahip bir pencere açmak için kullanılır. Komutun kullanım formatı aşağıdaki gibidir:

window.open komutundan sonra açılan ilk tırnak içine açılmak istenen sayfanın adı yazılır( Örneğin, ‘deneme.htm’ gibi). İkinci açılan tırnak içerisine pencereye verilecek isim girilir (Örneğin, ‘pencere1′ gibi). açılan sontırnak içerisine ise ise pencerenin özellikleri girilir (Örneğin, ‘width=100 , height=150 , toolbar=0 , menu=1 ‘ gibi).

*window.open(’açılmak istenen sayfa’,'açılacak pencerey verilen isim’,'penceerenin özellikleri’)

Pencere özellikleri ile ilgili parametreler:

Parametre	Değer	Anlamı
width	sayı	Pencerenin genişliği
height	sayı	Pencerenin yüksekliği
top	sayı	Üstten boşluk (x koordinatı)
left	sayı	Soldan boşluk (y koordinatı)
fullscreen	yes - no yada 1 - 0	Tam ekran görüntüleme
toolbar	yes - no yada 1 - 0	Kontrol cubuğu
scrollbars	yes - no yada 1 - 0	Kaydırma çubukları
menu	yes - no yada 1 - 0	Menü çubuğu
location	yes - no yada 1 - 0	Adres çubuğu
status	yes - no yada 1 - 0	Durum çubuğu

window.close(): Window.close() komutu yardımı ile üzerinde bulunduğumuz sayfayı yada kendi açtığımız bir pencereyi kapata biliriz.

‘window.close()’ komutu direk olarak kullanıldığında üzerinde bulunduğumuz sayfayı kapatmaya çalışır bu nedenle kullanıcıya kendiliğinden sayfayı kapatmak isteyip istemediğini sorar.

Kendi açtığımız pencereyi kapatmanın en kolay yolu açtığımız pencereyi bir değişkene atamaktır. Daha sonra;
window.değişken.close() komutunu kullanarak açtığımız pencereyi kapatabiliriz.

Örnek: Daha önce yaptığımız ‘deneme.htm’ adındaki sayfamızı window nesnesi yardımıyla pencerede açtıralım.

<html>
<script language=”javascript”>
function ac()
{
pen=window.open(’deneme.htm‘,’pen1′,’width=100,height=100,toolbar=

0,scrollbars=0,menu=0,location=0,status=0′)
}function kapat()
{
window.pen.close
}
</script>
<body>
<center>
<p><b>Window Nesnesi Örneği.</b></p>
<input type=”button” value=”Pencere Aç” onclick=”ac()”>
<input type=”button” value=”Tıklayın!..” onclick=”kapat()”>
</body>
</htm>

Not: Yukarıdaki örnekte oluşturduğumuz pencere “deneme.htm” isminde bir sayfa açıyor. Kendi bilgisayarınızda da scripin tam olarak çalışması için, herhangi bir sayfaya “deneme.htm” ismi verrip yada bu isimde basit bir “html” hazırlayıp script ile aynı klasör içine koyunuz. Aksi taktirde açılan pencere içinde “sayfa bulunamıyor” hatası görülecektir.

window.name: O anda açık olan bencerenin ismini verir. Eğer komutla bir pencere açılmamışsa üzerinde bulunduğumuz sayfanın adını verir.

window.status: Üzerinde bulunulan sayfanın durum çubuğuna yazı yazdırmak için kullanılır.

window.DefaultStatus: Durum çubuğunun sabit değerini okumak yada değiştirmek için kullanılır.

Olaylar

Olaylar JavaScript ile programlamada çok önemli bir yer tutarlar. Kullanıcının sayfa üzerinde yaptığı işlemleri algılamak ve bunun karşılığında gerekli komut satırlarını işler duruma getirmek için kullanılırlar. Kullanıcıyla etkileşim içerisinde olan tüm JavaScriptlerde olaylardan faydalanılır.

Olay	Anlamı
onLoad	Sayfanın yüklenmesi durumu.
onUnload	Sayfadan ayrılma durumu.
onAbort	Sayfa yüklenmesinin kullanıcı tarafından durdurulması durumu.
onEror	Yüklenme sırasında hata oluşması durumu.
onClick	İlgili nesnenin tıklanması durumu.
onMouseOver	Farenin ilgili nesne üzerine gelmesi durumu.
onMouseOut	Farenin ilgili nesne üzerinden ayrılması durumu.
onFocus	Kullanıcının ilgili nesneye gelmesi durumu.
onBlur	Kullanıcının ilgili nesneden ayrılması durumu.
onSelect	Kullanıcının ilgili nesneyi seçmesi durumu.
onChange	Kullanıcının ilgili nesne içeriğinde değişiklik yapması durumu.
onSubmit	Submit butonuna basılması durumu.
onReset	Reset butonuna basılması durumu.

Yukarıdaki tabloda belirttiğimiz olaylar genellikle bir fonksiyona yönlendirme yapmak için kullanılırlar.

Örnek: Sayfamızı ziyaret eden kullanıcıya, sayfa açılır açılmaz “hoşgeldin” sayfamızdan ayrılırken de “Gülegüle” diyecek bir script yazalım.

<html>
<script language=”javascript”>
function ac()
{
alert(”Sayfamıza Hoş Geldiniz.”)
}
function kapat()
{
alert(”Gülegüle!… Sayfamızı ziyaret ettiğiniz için teşekkür ederiz.”)
}
</script>
<body onload=”ac()” onunload=”kapat()”>
<center>
<p><b>Olaylar Örneği.</b></p>
</html>

Date() Nesnesi:

Date() nesnesi adından da anlaşılacağı gibi tarih ve saat ile ilgili işlemlerde kullanılan bir nesnedir. Date nesnesi kullanıcının bilgisayarında ki tarih ve saat ayarlarından faydalanarak çalışır.

Date() nesnesi tek başına kullanıldığında o an ki tarih ve saati; haftanın günü, ay, gün, saat , yerel saatin UCTden farkı, yıl şeklinde; “Tue Apr 9 02:07:56 UTC+0300 2002″ formatında verir.

Metot	Değer	Açıklama
getTime()	0 - ……	O an ki tarihin 1 Ocak 1970 ‘den milisaniye olarak farkını verir.
getYear()	1970 - ……	O an ki tarihin yıl değerini verir.
getMonth()	0 - 11	O an ki tarihin ay değerini verir.
getDate()	1 - 31	O an ki tarihin gün değerini verir.
getDay()	0 - 6	O an ki haftanın gün değerini verir.
getHours()	0 - 23	O an ki saatin saat değerini verir.
getMinutes()	0 - 59	O an ki saatin dakika değerini verir.
getSeconds	0 - 59	O an ki saatin saniye değerini verir.
getTimezoneOffset	0 - ….	Yerel saatin Greenwich saatinden fakını dakika cinsinden verir.

Örnek: O an ki zamanı “saat:dakika:saniye” cinsinden veren bir JavaScript yazalım.

<html>
<script>
function saat()
{
var zaman,saat,dakika,saniye
zaman = new Date()
saat = zaman.getHours()
dakika = zaman.getMinutes()
saniye = zaman.getSeconds()
document.form1.T1.value = saat+”:”+dakika+”:”+saniye
setTimeout(’saat()’,100)
}
</script>
<body onload=saat()>
<center>
<p><b>Date() Nesnesi Örneği</b></p>
<form name=”form1″>
<input name=”T1″>
</form>
</body>
</html>

Not: Yukarıda da belirttiğimiz gibi Date() nesnesi, kullanıcının zaman ve tarih ayarlarına göre çalışır. Yani kullanıcının bilgisayarında saat ve tarih ne ise, sayfada o değerleri görür. Okunan değerin server saati ile alakası yoktur. Bu durum bir iyi bir de kötü sonuç doğurur.
- Kullanıcının gördüğü değerler kendi ayarları olduğu için, kullanıcı hangi ülkede olursa olsun kendi saat ve tarih ayarlarını görecektir.
- Kullanıcının bilgisayarındaki tarih ve saat değerleri yanlışsa, sayfada da yanlış değerler görülür.

SetTimeout() Komutu :

SetTimeout() komutu JavaScripte zamanlama işlemleri için kullanılır. Örneğin belli zaman periyotlarında belli komut kümelerini çalıştırmak yada işlem akışında zamansal gecikme sağlamak için kullanılır.

Komut belirilen komutların, milisaniye cinsinden verilenen zaman sonunda çalıştırılması mantığı ile çalışır. Genllikle kullanılacak komutlar bir function içine yerleştirilir ve setTimeout() komutu ile bu function çağrılır. Kullanım formatı aşağıdaki gibidir.

setTimeout(’komutlar‘,zaman)

Örnek: 0,5 saniyelik peryotlarla sonsuza doğru 1′er 1′er sayan scripti yazalım.

<html>
<script>
var x = 0
function say()
{
document.form1.T1.value=x
x=x+1
setTimeout(’say()’,500)
}
</script>
<body onload=say()>
<center>
<p><b>setTimeout() Komutu Örneği</b></p>
<form name=”form1″>
<input name=”T1″>
</form>
</body>
</html>

clearTimeout() Komutu : clearTimeout() komutu, setTimeout() komutu ile başlatılan zamanlamayı sıfırlamak ve zaman periyodu ile çalışan komutları iptal etmek için kullanılır.

Bu komutlar bir arada kullanılırken genellikle setTimeout() komutu bir değişkene atanır ve clearTimeout() komutu ile bu değişken ile birlikte kullanılır. setTimeout() komutunun atandığı değişken var komutu ile tanımlanmadan da çalışır.

Örnek: Yukarıdaki örnekte yaptığımız scripte buton kontrolü ile çalıştırılıp, durdurulabilme özelliği ekleyelim.

<html>
<script>
var x = 0
function say()
{
document.form1.T1.value=x
x=x+1
sayac=setTimeout(’say()’,500)
}
function dur()
{
clearTimeout(sayac)
}
</script>
<body>
<center>
<p><b>clearTimeout() Komutu Örneği</b></p>
<input type=”button” value=”Başlat” onclick=say()>
<input type=”button” value=”Durudur” onclick=dur()><br>
<form name=”form1″>
<input name=”T1″>
</form>
</body>
</html>

String Nesnesi:

String nesnesi, JavaScripte metinler üzerinde işlem yapmak için kullanılır. Yazı formatındaki yada değişkene atanmış bir metinin font, punto ve link gibi bir çok özelliği string nesnesinden faydalanılarak değiştirilebilinir.

Aşağıdaki tabloda String nesnesinin bazı özellikleri verilmiştir.

Metot	Açıklama
fontsize(x)	String nesnesinin font büyüklüğünü ayarlamak için kullanılır.
bold()	String nesnesine bold özelliği vermek için kullanılır.
italics()	String nesnesine italic özelliği vermek için kullanılır.
sub()	String nesnesini ‘ _örnek‘ şekline çevirmek için kullanılır.
sup()	String nesnesini ‘ ^örnek ‘ şekline çevirmek için kullanılır.
anchor(link)	String nesnesine link vermek için kullanılır.
charAt(x)	String nesnesinin x ‘inci karakterini verir
substring(x,y)	String nesnesinin x ‘inci karakterinden y ‘inci karakterine kadar olan kısmını verir.
toLowerCase()	String nesnesini küçük harfe çevirir.
toUpperCase()	String nesnesini büyük harfe çevirir.
split(x)	String nesnesini x ‘inci karakteri ayraç olarak kabul edip parçalara ayırır.
indexOf(x,y)	y’ inci karakterden başlayarak string içinde x metnini arar.

Örnek: Küçük harflerle girilen metni büyük harflere çeviren bir script yazalım.

<html>
<script>
function cevir()
{
var a
a=document.form1.T1.value
document.form1.T2.value=a.toUpperCase()
}
</script>
<body>
<center>
<p><b>String Nesnesi Örneği</b></p>
<p>Lütfen küçük harflerle bir metin giriniz.</p>
<form name=”form1″>
<input name=”T1″><br>
<input type=”button” value=”Tıklayın!” onclick=cevir()><br>
<input name=”T2″>
</form>
</body>
</html>

JavaScripte Frame Kontrolü :

Frameler Html dilinde aynı sayfa içerisinde birden fazla sayfa görüntülemek için kullanılır. Yani bir sayfayı istediğimiz ölçülerde istediğimiz kadar bölüme ayırıp her bölümde farklı bir html sayfası çalıştırmak için kullanılır. Html bilgisi tam olan tüm web masterlar frame düzenleme hakkında az çok bir bilgiye sahiptir. Bizim JavaScript ile yapacağımız iş bir faramaden diğerini kontrol etmek olacak.

Bu işlem için öncelikle bölümlere ayrılacak ana sayfa yazılmalı ve bu sayfa içerisinde çalıştırılacak olan tüm sayfalarda ayrı ayrı hazırlanmalıdır. Aşağıda iki ayrı bölümden oluşan bir frame sayfa örneği veriliyor.

Örnek: Sağ ve sol isminde iki frameden oluşan ve sol frameden sağ framenin ardalan rengini değiştire bilen basit bir script hazırlayalım.

- Framelerin tanımlanacağı ana Html, Bu sayfa hazırlandıktan sonra herhangi bir isimle kaydedin. Biz bu sayfaya “index.htm” ismini vereceğiz

-”sağ.htm” ana sayfamızın sol kısmını oluşturan html sayfası. Bizim örneğimizde üzerinde değişiklik yapacağımız sayfa.

<html>
<body bgcolor=”blue”>
<center>
<b>wWw.BilimVeTeknoloji.Com</b>
</body>
</html>

- “sol.htm” örneğimizde bizi asıl olarak ilgilendiren sayfa bu. JavaScriptimizi bu sayfaya yazacağız.

<html>
<script>
function ayar(a)
{
parent.sag.document.bgColor=a
}
</script>
<body>
<b>Renk</b>
<form name=”form1″>
<select onchange=”ayar(value)”>
<option value=”blue”>Mavi</option>
<option value=”yellow”>Sarı</option>
<option value=”red”>Kırmızı</option>
<option value=”green”>Yeşil</option>
<option value=”white”>Beyaz</option></select>
</form>
</body>
</htm>

Not: Scripin çalışması için yukarıdaki üç html dosyasını belirtilen isimlerle kaydedip, aynı klasör altına koyunuz.

JavaScript Komutlarını Kullanma Formatları

İlk dersimizde de bahsettiğimiz gibi JavaScript üç farklı formatta kullanılabilir. Bu kullanım formatlarını görmek için basit bir örnek ele alalım ve üç değişik formatla yazalım.

Format 1: JavaScriptimizi script tagları açmaya gerek duymadan direk “Html” komutlarının arasında kullanabiliriz. Bu format çok basit bir yapıya sahiptir fakat büyük scriptlerde karışıklığa neden olabilir.

Örnek:

<html>
<body>
<center>
<p><b>JavaScript Format 1 Örneği </b></p>
<input type=”button” value=”Tıklayın!..” onclick=”alert(’JavaScrip formatı 1′)”>
</body>
</htm>

Format 2: JavaScript yazımında en çok başvurulan yöntem function kullanımıdır. Bu format karışık scriptlerde çok büyük kolaylıklar sağlamsının yanında bazı scriptlerede kullanmak zorunlu hale gelmektedir.

Örnek:

<html>
<script>
function mesaj()
{
alert(”JavaScrip formatı 2″)
}
</script>
<body>
<center>
<p><b>JavaScript Format 2 Örneği </b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</htm>

Format 3: Bu format daha çok yazılan Html kodunun sade görünmesi için kullanılır. Bu formatta script komutları farklı bir dosyaya kaydedilir ve Html içerisinde script tanımlandıktan sonra bu dosya çağrılarak içerdiği komutlar kullanılır. Komutların kaydedildiği bu dosyalara genellikle “js” uzantısı verilir.

Örnek:

- Bu Html dosyası ile aşağıda içeriğini verdiğimiz, “mesaj.js” dosyasını çağıracağız.

<html>
<center>
<script src=”mesaj.js” mce_src=”mesaj.js”>
</script>
<body>
<p><b>JavaScript Format 3 Örneği </b></p>
<input type=”button” value=”Tıklayın!..” onclick=”mesaj()”>
</body>
</htm>

- “mesaj.js” Aşağıdaki komutları “mesaj.js” ismi ile kaydedip yukarıdaki Html dosyası ile aynı klasör altına atın.

function mesaj()
{
alert(”JavaScrip formatı 3″)
}

Bu Yazı Çarşamba, Ağustos 15th, 2007 23:59 'da Bilgisayar Kategorisine Yazıldı.Tags: Bilgisayar, java script kodlama, java script örnekleriBu Yazının Cevaplarını RSS 2.0 bildirimi ile takip edebilirsiniz. Cevap Yazabilir yada kendi sitenize alıntı yapabilirsin.

Yorum yaz

Nedir?, Ara

Kitlen.com, web dostunuz!

Java Script Kodları, Java Script örnekleri, Java script dersleri