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> 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
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 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. 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> Function Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>
Örnek için Tıklayınız
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek3.htm
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 ,
{
alert("birinci değişkeniniz="+ a)
alert("ikinci değişkeniniz="+
}
</script>
<body>
<center>
<p>İkinci Function Örneği</p>
<input type="button" value="Tıklayın!.." onclick="deneme('bilim','teknoloji')">
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek4.htm
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>Alert Kutusu Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek1.htm
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>Confirm Kutusu Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek2.htm
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>Confirm Kutusu Örneği</p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek14.htm
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>Değişken Örneği</p>
<input type="button" value="Tıklayın!.." onclick="deneme()">
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek5.htm
JavaScript 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>Global Değişken Örneği</p>
<p>Fonsiyon 1</p>
<input type="button" value="Tıklayın!.." onclick="deneme1()">
<p>Fonsiyon 2</p>
<input type="button" value="Tıklayın!.." onclick="deneme2()">
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek6.htm
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
* 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>Dizi Değişken Örneği.</p>
<input type="button" value="Tıklayın!.." onclick="dizi_degisken()">
</body>
</html>[/color]
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek7.htm
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
ADI
ANLAMI
==
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
ADI
ANLAMI
&&
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
ADI
ANLAMI
+
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
ADI
ANLAMI
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>Math Nesnesi Örneği</p>
<input type="button" value="Tıklayın!.." onclick="kok()">
</body>
</htm>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek13.htm
******** Nesnesi: JavaScrip'te ******** nesnesi üzerinde bulunduğumuz sayfa anlamına gelir. ******** nesnesi kullanılarak üzerinde bulunduğumuz sayfanın özelliklleri değiştirilebilir.
OPERATÖR İSMİ VE ANLAMI
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
******** 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.
******** 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; ********.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"
[span style='color:red']lenght form içindeki nesne sayısı[/span]
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
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("sifir.org")}" komutu sayesinde karşımıza içerisinde sifir.org yazısı olan bir alert kutusu çıkar.
if(x==1)
{
alert("sifir.org")
}
* 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=********.form1.T1.value
if(x==1)
{
alert("BilimVeTeknoloji.Com")
}
else
{
alert("lütfen değişkene '1' değerini giriniz.")
}
}
</script>
</head>
<body>
<center>
<p>if()...else Komutu Örneği</p>
Lütfen bir sayı giriniz....
<form name="form1">
<input name="T1">
<input type="button" value="Tıklayın!.." onclick="load()">
</form>
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek8.htm
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>For() Döngüsü Örneği.</p>
<input type="button" value="Tıklayın!.." onclick="dongu()">
</body>
<htm>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek9.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>While() Döngüsü Örneği.</p>
<input type="button" value="Tıklayın!.." onclick="dongu()">
</body>
<htm>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek10.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 - 0Tam 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
******** 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,hei ght=100,toolbar=0,scrollbars=0,menu=0,********=0,s tatus=0')
}
function kapat()
{
window.pen.close
}
</script>
<body>
<center>
<p>Window Nesnesi Örneği.</p>
<input type="button" value="Pencere Aç" onclick="ac()">
<input type="button" value="Tıklayın!.." onclick="kapat()">
</body>
</htm>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek11.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>Olaylar Örneği.</p>
</html
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek12.htm
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>
**********
function saat()
{
var zaman,saat,dakika,saniye
zaman = new Date()
saat = zaman.getHours()
dakika = zaman.getMinutes()
saniye = zaman.getSeconds()
********.form1.T1.value = saat+":"+dakika+":"+saniye
setTimeout('saat()',100)
}
</script>
<body onload=saat()>
<center>
<p>Date() Nesnesi Örneği</p>
<form name="form1">
<input name="T1">
</form>
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek15.htm
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>
**********
var x = 0
function say()
{
********.form1.T1.value=x
x=x+1
setTimeout('say()',500)
}
</script>
<body onload=say()>
<center>
<p>setTimeout() Komutu Örneği</p>
<form name="form1">
<input name="T1">
</form>
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek17.htm
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>
**********
var x = 0
function say()
{
********.form1.T1.value=x
x=x+1
sayac=setTimeout('say()',500)
}
function dur()
{
clearTimeout(sayac)
}
</script>
<body>
<center>
<p>clearTimeout() Komutu Örneği</p>
<input type="button" value="Başlat" onclick=say()>
<input type="button" value="Durudur" onclick=dur()>
<form name="form1">
<input name="T1">
</form>
</body>
</html>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek18.htm
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([span style='color:blue']x)[/span] 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([span style='color:blue']link)[/span] String nesnesine link vermek için kullanılır.
charAt([span style='color:blue']x)[/span] String nesnesinin x 'inci karakterini verir
substring([span style='color:blue']x,y)[/span] 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([span style='color:blue']x)[/span] String nesnesini x 'inci karakteri ayraç olarak kabul edip parçalara ayırır.
indexOf([span style='color:blue']x,y)[/span] 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>
**********
function cevir()
{
var a
a=********.form1.T1.value
********.form1.T2.value=a.toUpperCase()
}
</script>
<body>
<center>
<p>String Nesnesi Örneği</p>
<p>Lütfen küçük harflerle bir metin giriniz.</p>
<form name="form1">
<input name="T1">
<input type="button" value="Tıklayın!" onclick=cevir()>
<input name="T2">
</form>
</body>
</html
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek16.htm
Ö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
<html>
<head>
<frameset cols="25%,*">
<frame src="sol.htm" name="sol">
<frame src="sag.htm" name="sag">
</frameset>
</head>
<body>
</body>
</htm>
-"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>
wWw.BilimVeTeknoloji.Com
</body>
</html>
- "sol.htm" örneğimizde bizi asıl olarak ilgilendiren sayfa bu. JavaScriptimizi bu sayfaya yazacağız.
<html>
**********
function ayar(a)
{
parent.sag.********.bgColor=a
}
</script>
<body>
Renk
<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>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/sag.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>JavaScript Format 1 Örneği </p>
<input type="button" value="Tıklayın!.." onclick="alert('JavaScrip formatı 1')">
</body>
</htm>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek19.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>
**********
function mesaj()
{
alert("JavaScrip formatı 2")
}
</script>
<body>
<center>
<p>JavaScript Format 2 Örneği </p>
<input type="button" value="Tıklayın!.." onclick="mesaj()">
</body>
</htm>
scriptin çalışan örneğini görmek için tıklayın.
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek20.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.
<script src="deneme.js"> 'satırı ile komutların bulunduğu js dosyası çağrılır.
Ö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">
</script>
<body>
<p>JavaScript Format 3 Örneği </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")
}
scriptin çalışan örneğini görmek için tıklayın
http://www.bilimveteknoloji.net/bilgisayar/web_tasarim/javascript/ornekler/ornek21.htm
UMARIM FAYDALI OLMUŞTUR BENDE BUNLARI BİR FORUMDA GEZERKEN BULDUM PAYLAŞAYIM DEDİM
güzel olmuş okudum 