En kısasından ;
JavaScript Nedir?
JavaScript Netscape firması tarafından geliştirilmiş olan bir script dilidir. Script dilleri Web sayfası hazırlayanlara etkileşimli ve dinamik sayfalar hazırlama imkanı vermektedir. JAVA dilinin özelliklerine ve komut yapısına çok benzeyen JavaScript aslında JAVA dilinden ayrı olarak hazırlanmıştır.
Javascript yardımı ile HTML kaynak kodları değiştirilebilir, bu sayede dinamik Web sayfaları hazırlamak mümkün olur. Javascript ile hazırlanmış Web sayfaları ancak JavaScript desteği veren Web tarayıcıları ile izlenebilir. En popüler tarayıcılardan olan Netscape Navigator ve Internet Explorer tarafından desteklenmektedir. Javascript ile hazırlanan Web sayfalarından tam randıman alabilmek için iki tarayıcının da en son sürümlerini kullanmanızı (en azından 4.x ve üstü) öneririz.
Detaylı bilgi ;
1. JavaScript Nedir?
HTML dili her ne kadar metinler üzerinde neredeyse her türlü düzenlemeyi yapmamıza izin verse de, zayıf kaldığı bazı yönler vardır; mesela HTML bize web sayfalarına bir 'iş' yaptırtma, onları değişik olaylara veya durumlara duyarlı hale getirme imkanı sunmaz. Bu eksikliği Netscape firmasının yetkilileri de farketmiş olacak ki Aralık 1995 tarihinde, C dilinin browser'lara uyarlanmış hali diyebileceğimiz JavaScript'i piyasaya sürdüler.
Tam bu dönemde Sun Microsystems Pascal ve Delphi dillerinden esinlerek oluşturduğu 'Java' isimli bir programlama dilini piyasaya sürmek üzereydi. Netscape'in piyasaya sürdüğü script dilinin ismini JavaScript koyması, o dönemde çok telaffuz edilen 'Java' kelimesinin popüleritesinden yararlanmak adına uyguladığı bir pazarlama stratejisiydi, yani pek çok kişinin düşündüğünün aksine Java ile JavaScript arasında isim benzerliği hariç hiçbir benzerlik yoktur.
Bir süre sonra Microsoft da olaya el attı ve JavaScript'le neredeyse aynı olan JScript'i piyasaya sürdü.Fakat sonra bu diller farklı yönlere doğru geliştiler. Şu anda Netscape tarayıcısı JScript'i tanımıyor, fakat Explorer her iki script'i de tanıyor. Yine de iki tarayıcının JavaScript'i yorumlamaları bazen farklılık gösterebiliyor.
'JavaScript nedir?' sorusuna dönersek :
JavaScript ile neler yapılabilir?
JavaScript ile bir web sayfasına yukarıda tanımladığımız biçimde herhangi bir olayın gerçekleşmesi halinde herhangi bir iş yaptırabiliriz. Örnegin sayfada bir butona basıldığında sayfadaki bir 'text' kutusunun içine 'Click!' yazdırabiliriz. Burada olay ziyaretçinin butona tıklaması, iş ise text kutusuna 'Click!' yazılmasıdır... Javascript dilinde neredeyse olası her olay tanımlanmıştır, dolayısıyla yapılabilecek şeyler çok geniştir.
Javascript'i öğrenmeye geçmeden önce bir öneri: Sadece gerektiği zaman Javasript'i kullanın. Gereksiz kullanımlar sayfanın boyutunu şişireceği gibi, sayfanızın estetiğini ve kullanışlılığını de olumsuz yönde etkileyecektir.
2. JAVASCRIPT'IN GENEL YAPISI VE İLK JAVASCRIPT
JavaScript kodları <script>...</script> etiketleri arasına yazılır. Script etiketinin işimize yarayacak iki parametresi vardır, bunlar:
src: Harici bir JavaScript belgesini '.js' uzantılı kaydedip bu parametre ile çağırabiliriz.
language: Bu parametre 'Javascript', 'JavaScript1.1' veya 'JavaScript1.2' değerlerini alır.En son sürümü kullanmak her zaman daha güvenlidir.
JavaScript kodlarının yapısı ise böyledir:
Buradaki '<!--' ve '-->' ifadeleri yazılan kodları eski sürüm browser'lardan gizler
İLK JAVASCRİPT
Aşağıdaki kod sadece yukarıda verilen şablonun HTML belgesinin içine nasıl yerleştirildiğini görmeniz ve JavaScript hakkında bir fikir sahibi olmanız için verilmiştir. Dolayısıyla kodu satır satır anlamaya çalışmayın. İşte 'Merhaba Dünya!'
3. DEĞİŞKENLER
Değişkenlere geçmeden önce JavaScript'deki değerleri tanıyalım:
Sayı Değerleri: Sayı değerleri tamsayı (integer literal) ve kesirli sayı (floating-point literal) olmak üzere ikiye ayrılır. Örneğin: 12; 567; 55,23423...
Boolean ifadeleri: Boolean mantığı iki sonuç verir: Doğru veya yanlış. Doğru '1' veya 'true', yanlış ise '0' veya 'false' ile ifade edilir.
String değerleri:Çift tırnak veya tek tırnak içinde gösterilen string değerleri, JavaScript açısından 'metin' olarak değerlendirilir.Örneğin: "Merhaba!"; "İstanbul 34"; "342,345"...
DEĞİŞKENLER
Değişken kendisine ketfi bir değer atayıp bu değeri programın herhangi bir yerinde değiştirmemize olanak veren bir unsurdur. Değişkenleri browser'a 'var' anahtar-kelimesiyle bildiririz, ve onları -ilk karakterlerinin rakam veya '_' olmaması, ve tabi türkçe karakter içermemeleri şartıyla- istediğimiz gibi adlandırabiliriz.
var degisken, var sonuc, var sayac...
Değişkenlere değer atama (initialization) ise aşağıdaki gibi olur:
değişken= "kitap", sonuc= 34, sayac= true
Veya iki işi aynı anda da yapabiliriz:
var degisken="kitap", var sonuc= 34, var sayac= true
Bu genel tanımdan sonra JavaScript'in değişken türlerine bir göz atalım:
Sayı Değiskenler: Ondalık veya tamsayı değerini alırlar, bu değişkenlerle aritmetik işlemler yapılabilir.Örneğin: 'var cevap= 44,56'
Boolean Değişkenler: '1'; 'true' veya '0'; 'false' değerlerini alan değişkenlerdir: 'var dogruMu: true'
String Değişkenler: String değeri alırlar, '+' operatörüyle iki string birbirine bağlanabilir, aşağıda 'hepsi' değişkeninin değeri "Javascript" string'i olacaktır:
'var bas= "Java", son="Script"
var hepsi= bas+son'
Fonksiyon değişkenleri: Bu değişkenleri tanımlamak için 'function' ifadesini kullanırız. Fonksiyonlar JavaScript'e bir iş yaptırmamızı sağlarlar.Fonksiyonları ileride başlıbaşına bir konu olarak göreceğiz, şimdilik fazla üzerinde durmayalım.
Dizi-değişkenler (Array): Array'ler ile farklı değerleri bir dizinin elemanı olarak aynı ad altında toplayabilir, gerektiğinde kullanmak üzere çağırabiliriz:
var dizi = new Array(eleman1,eleman2,eleman3,eleman4) //dizi isimli bir array'e 4 farklı değer verdik
var yeni = dizi[2] //yeni isimli değişkene dizinin 3. elemanını atadık.
Yukarıda bir yazım hatası yoktur, JavaScript saymaya sıfırdan başladığı için 'dizi[2]' ifadesi dizinin 3. elemanı olan "eleman3" e eşittir.
4. OPERATÖRLER
Assignment(atama) operatörü
JavaScript'in(ve bütün programlama dillerinin) temel operatörü olan atama operatörü '=' işaretiyle ifade edilir, işaretin sağındaki değeri(veya değişkenin değerini), solundaki değişkene atar.
'var sayi = 34 ; var sayi2 = sayi'
Aritmetik operatörler
'+' :Sayı değişkenleri toplamaya, string değişkenleri birbirine eklemeye yarar.
'-' : Sayı değişkenlerde çıkartma işlemini yapar.
'*' : Sayı değişkenlerde çarpma işlemini yapar.
'/ ' : Bölme işlemi yapar.
'%' : Modülüs işlemi. '10%3' ifadesinin matematikteki karşılığı '10 mod 3' ifadesidir ve sonuç 1 çıkar.
Aritmetik operatörlerden bahsetmişken JavaScript'in bazı kısaltmalarından bahsedelim
'a = a + b' ifadesini kısaca 'a+=b' şeklinde yazabiliriz.
Aynı kısaltma diğer işlemler için de geçerlidir(a-=b; a/=b, a*=b)
a = a + 1 ifadesini a++; a = a - 1 ifadesini ise kısaca a-- şeklinde yazabiliriz.
Karşılaştırma operatörleri
Karşılaştırma operatörleri, temsil ettikleri karşılaştırmanın sonucu doğruysa true, yanlışsa false değerini verirler.
'==' : Eşit operatörü, eğer iki tarafın değeri eşitse true sonucunu verir.
'!=' : Eşit değil operatörü, eğer iki tarafın değeri eşit değilse true sonucunu verir.
'< ' : Küçüktür operatörü, sol taraf küçükse true sonucunu verir.
'> ' : Büyüktür operatörü, sol taraf büyükse true sonucunu verir.
'<=' : Küçük eşittir operatörü, sol taraf küçükse veya iki taraf eşitse true sonucunu verir.
'>=' : Büyük eşittir operatörü, sol taraf büyükse veya iki taraf eşitse true sonucunu verir.
Bu ve diğer operatörler için verilen örnekleri yeni bir HTML belgesinin body bölümüne yazın
Şart operatörü
Bu operatörü bir örnek üzerinde öğrenelim:
(a==b)? "Iki degisken esittir!":"Iki degisken esit degildir!"
Bu operatörün kullanımında parantez içerisine bir şart yazılır, ki burada o şart x ve y değişkenlerinin eşit olmasıdır, eğer bu şart doğruysa soru işaretinden hemen sonraki işlem, aksi takdirde ':' işaretinden sonraki işlem yapılır.
Mantıksal operatörler
Eğer karşılaştırmayı birden fazla durumu dikkate alarak yapacaksak mantıksal operatörleri kullanırız.
'&&' : 'And(ve)' operatörü: Koşulların hepsi doğru ise true değerini verir.
'|| ' : 'Or(veya)' operatörü: Koşulların en az birinin doğru olması halinde true değerini verir.
'! ' : 'Not' operatörü: Koşulların hepsinin yanlış olması durumunda true değerini verir.
5. BİLGİ GİRİŞ ÇIKIŞI
JavaScript ile fonksiyon yazarken bazı noktalarda ziyaretçiden bir bilgi almanız veya ona bir şey onaylatmanız gerekebilir. Tabi bazı verilerin de ekrana yazılması gerekir. Şimdi bunu JavaScript'le nasıl yapabileceğimizi görelim.
Bilgi girişi
prompt()
Ziyaretçiden ismi adresi gibi bir 'text' almak promt fonksiyonuyla mümkündür.
prompt("Sorulacak soru","Varsayılan cevap")
Aşağıdaki örneği body bölümüne <script>...</script> etiketleri arasına yazın.
prompt("Adınız nedir?","isim")
confirm()
Ziyaretçinin onayını almak için kullanılır. Ziyaretçi açılan kutuda 'yes' e tıklarsa true, 'no' ya tıklarsa false değerini verir.
confirm("Sorulacak soru")
confirm("Emin misiniz?")
Bu iki fonksiyonun içinde değişken de kullanabiliriz. Örneğin isim diye bir değişkenimiz olsun, bu değişkenin değerini "Ahmet" alalım. Aşağıdaki kod "Adın Ahmet mi?" diye soracak:
confirm("Adın "+isim+" mi?")
Bilgi Çıkışı
write() fonksiyonu
Write fonksiyonu bize istediğimiz bir yere yazı yazma olanağı sağlar. Bu yer browser penceresi olabileceği gibi, yeni bir pencere veya bir textarea da olabilir.Biz şimdilik bunlardan ilki üzerinde duracağız.
documént.write("Yazılacak metin veya"+değişken)
Bu fonksiyon yerine documént.writeln() fonksiyonunu kullanabilirsiniz, bu fonksiyon yazdıklarınız bitince satırbaşı yapar.
alert()
Bu fonksiyonun içine yazdığımız metin, fonksiyon çağırıldığında ekranda beliren bir kutu içerisinde görüntülenir. Bu kutu üzerindeki 'ok' düğmesine basmılmadan kapanmaz.
alert("Yazılacak metin")
Şimdi bütün bunları bir örnek üzerinde görelim:
6. KOŞUL İFADELERİ
JavaScript ile program yazarken program akışının her zaman yukarıdan aşağıya olmasını istemeyebiliriz. Bu durumda koşul ifadeleri devreye girer. Bu ifadelerle browser'a programın bir noktasında bir koşul belirtip, bu koşul doğruysa bir iş yapmasını, doğru değilse başka bir iş yapmasını söyleyebiliriz. Ya da daha karmaşık durumlar tanımlayabiliriz. Bütün bu işleri koşul ifadeleri 'if' ve 'else' 'i yerinde kullanarak başarabiliriz.
If ifadesi
If ifadesi, eğer verilen koşul doğruysa true, değilse false değerini verir. Aşağıda if'in kullanımını görüyorsunuz.
if (koşul)
{
Koşul sağlanıyorsa yapılacaklar
}
İf...else
If ifadesiyle bir veye birkaç koşul belirttiğimizde, oluşabilecek bir durum da bu koşul veya koşullardan hiçbirinin gerçeklenmemesidir. İşte bu durumu else ifadesiyle belirtiriz. Yani if ile browser'a 'verdiğim koşul doğruysa şunu yap', else ifadesiyle 'aksi takdirde şunu yap' deriz.
If ve else ifadelerinin kullanımları aşağıdaki gibidir.
if (koşul)
{
koşul doğruysa yapılacak iş
}
else
{
Bunun dışındaki her durumda yapılacak iş
}
Eğer birden fazla koşul belirtmek istersek ilk if'den sora else if ifadesini kullabilir ve bu koşullarda yapılacak işleri belirleyebiliriz. Bunun anlamı şudur: 'Eğer(if) a şartı gerçekleniyorsa şunu yap, bunun dışında(else if) eğer b şartı gerçekleniyorsa şunu yap,bunların dışındaki durunmlarda(else) şunu yap!' .Bu durumda else ifadesi verilen koşulların hiçbirinin gerçeklenmediği durumları kapsar. Bu karışık ifadeyi ve koşul yapısını aşağıdaki örneğe bakarak anlayabilirsiniz...
Bu örnekte, tanımda kullandığımız küme parantezlerini '{}' kullanmadık. Bunun nedeni koşul doğruysa yapılacak tek bir iş vermemizdir. Bu durumda JavaScript bu işin hemen üstündeki if'e ait olduğunu anlar. Fakat koşul doğruysa birden fazla iş yaptıracaksak bunları küme parantezleri içinde vermemiz gerekir.
7. DÖNGÜLER
Döngüler, kendilerine verilen koşul gerçeklendiği sürece aynı işi yapmaya devam eden fonksiyonlardır. Bu iş ,örneğin 1'den 100'e kadar saymak olabilir. Bu durumda bir sayaç oluşturulur. Bu sayacın değeri 1'den başlatılır, sayaca 100'e kadar sayması söylenir, ve her adımda sayacın değeri ekrana yazdırılır. Böylece 2 satırda 100 satırlık iş yaptırmış oluruz. JavaScript bize for, while, do...while ve switch döngülerini kullanma imkanı verir.
For döngüsü
For döngüsünün yazılışı aşağıdaki gibidir:
for (sayac = 1 ; sayac < 101 ; sayac++)
{
Bu iş 100 kez yapılacak!
)
Yukarıdaki döngüyle browser'a sayac değişkeninin değerini birer birer(sayac++),1'den(sayac= 1) 100'ekadar(sayac<101) arttırmasını ve her seferinde küme parantezi içinde belirtilen işi yapmasını söyledik. Burada 1 ve 101 yerine istenilen değer gelebilir,ayrıca artış değerini de istediğiniz gibi değiştirebilirsiniz( artışı n yapmak için sayac+=n ifadesini kullanın).Sayac değişkeninin adı da istediğiniz herhangi bir değişken adı olabilir. Yine if ifadesinde olduğu gibi döngüye yapacak tek bir iş verirsek küme parantezi kullanmaya gerek yok.
While: Şartlı döngü
For' dan farklı olarak while dongüsünde bir şart verilir, while 'da bu şart gerçeklendiği sürece while, kendisine verilen işi yapar.
while(şart)
{
Yapılacak işler
}
İşte size biraz ısrarcı bir script!
Do...while
Bazen karşımıza öyle bir durum çıkar ki, koşullar ne olursa olsun önce bir iş yaptırmamız, sonra bir şart belirtip bu şart gerçeklendiği sürece işin yapılmasını sağlamamız gerekir. Mesela bir mail list'imiz var ve ziyaretçiye bu listeye üye olmak isteyip istemediğini soracağız. Fakat istiyoruz ki bu ziyaretçi arkadaşlarını da listemize kaydettirsin. Bu işin içinden do...while döngüsünün yapısının altındaki örneği yazarak çıkabiliriz...
do
{
En az bir kere yapılacak iş
}
while(şart)
Şart gerçeklenmediğinde yapılacak işler.
Break ve Continue ifadeleri
Bu ifadeler dönguler içinde kullanılırlar.Bir döngü içerisinde break ifadesini kullandığımız noktada döngü koşullar ne olursa olsun sonlanır. Continue ifadesi ise kullanıldığı yerde döngünün o adımının atlanmasını sağlar. Örneğin 0'dan 100'e kadar sayan bir döngüye
(if sayac==23) continue
şeklinde bir ifade eklersek ekranda 23 hariç, 1'den 100'e kadar olan sayıları görürüz. Continue yerine break yazarsak ise, döngü 23'üncü adımın sonunda kesilir,yani ekranda 1-23 arası sayıları görürüz. Yazdığımız döngüler üzerinde bu ifadeleri deneyerek kullanımlarını daha iyi anlayabilirsiniz.
Switch
Switch fonksiyonu diğer döngülerden biraz farklıdır. Switch fonksiyonunda durumlar(case) tanımlarız, ve her durum için yapılacak işi tanımladıktan sonra döngüden break komutuyla çıkarız. Örneğin ziyaretçiden ismini ve cinsiyetini öğrenip ona bay/bayan isim şekllinde hitab etmek istiyorsunuz.Aşağıdaki örneği yazarak bu işi switch komutuyla yapablirsiniz.
8. FONKSİYON KAVRAMI
JavaScript ile program yazarken bu programın birçok iş yapmasını isteyebilirsiniz. Ayrıca bu işlerin belli zamanlarda, belli durumlarda yapılması da gerekebilir. Bu durumda yapılacak işler için yazılan kodları foksiyonlar şeklinde gruplayıp yeri geldiğinde çağırabiliriz. Mesela kup() isimli bir fonksiyon tanımlayıp, bu fonksiyona göndereceğimiz argümanın kübünü verecek kodlar yazabilir, sonra bu fonksiyona programın değişik yerlerinde farklı değerler gönderip, bu değerlerin kübünü buldurtabiliriz. Fonksiyonlar aşağıdaki gibi yazılır:
function(argüman1, argüman2, argüman3...)
{
yapılacak işler
}
Fonksiyonları head bölümüne yazıp gerektiği zaman çağırmanız hem kodlarınızın düzenli olmasını, hem de hızlı çalışmasını sağlar. Şimdi bir örnekle fonksiyonları tanıyalım
Şimdi bu örneği inceleyelim: Önce head bölümünde 'cd' isimli bir fonksiyon tanımladık.Bu fonksiyona keyfi olarak fiyat argümanını vedik. Sonra 'tutar1' isimli değişkene, 'fonksiyona gönderilecek değer' * 9000000 değerini atadık. Aynı şekilde bir kaset fonksiyonu yazdık. Body bölümüne geçelim :Kullanıcıdan aldığımız değerleri kAdet ve cdAdet değişkenlerine atayıp, bu değerleri head bölümündeki ilgili fonksiyonlara gönderdik. Fonksiyonlar istediğimiz hesabı yaptı ve 'return' ifadesiyle belirttiğimiz üzere hesaplanan değerleri tekrar body bölümüne gönderdi. Sonra bu iki değeri toplayıp ekrana yazdırdık.
Bu noktada bu zamana kadar kullandığımız prompt(),alert(),if(),for()... gibi ifadelerin aslında birer fonksiyon olduğuklarını açıkça görebilirsiniz. Bu fonksiyonların bizim yazdıklarımızdan farkı şudur: Örneğin prompt fonksiyonunun yapacağı işi belirtmemize gerek yoktur, bu fonksiyonun tanımı browser'ınızın dosyalarında mevcuttur. Bu şekilde istediğimiz zaman bu fonksiyonu çağırıp kullanabiliriz, böyle fonksiyonlara metod denir.
9. NESNELER
JavaScript kullanarak özelliklerini görebileceğimiz veya değiştirebileceğimiz şeyler; örnğin bu browser penceresi, bir form'un öğeleri hatta browser'ın ta kendisi JavaScript açısından birer nesnedir. Bu özelliğinden dolayı JavaScript nesneye yönelik bir programlama dilidir. Şimdi bu nesneleri tanıyalım ve özelliklerini inceleyelim.
Window Nesnesi
Window, browser'ın sayfaların görüntülendiği kısmıdır.aşağıda bu nesnenin özelliklerini görüyorsunuz:
width: Pencerenin genişliğinin piksel cinsinden değeri
height: Pencerenin yüksekliği piksel cinsinden değeri
top: Pencerenin ekranın üst kenarından uzaklığının piksel cinsinden değeri
left: Pencerenin ekranın sol kenarından uzaklığının piksel cinsinden değeri
toolbar: Araç çubuğunun olması(yes) veya olmaması(no)
menubar: Menubar'ın olması(yes) veya olmaması(no)
resizeable: Pencere boyutlarının değiştirilebilir(yes) veya sabit(no) olamsı
scrollbars: Kaydırma çubuklarının olması(yes) veya olmaması(no)
status: Status bar'ın olması(yes) veya olmaması(no)
********: Browser'ın ******** çubuğunun olması(yes) veya olmaması.
copyhistory: Yeni açılan pencereye eski pencerenin history kaydının aktarılması(yes) veya aktarılmaması.
Bu listede 'yes' ve 'no' değerleri yerine '1' ve '0' da yazabilirsiniz.
Yeni bir pencere açmak için window.open(), kapatmak için window.close() metodları kullanılır.
window.open("pencereAdi.html","Pencereadı","width=300 height=240 toolbar=0")
Burada 'pencereAdi.htm' yazan bölümü bu şekilde bırakırsanız yeni pencereye pencereAdi.htm sayfası yüklenir. Buraya sadece penceraAdi yazar veya ("") şeklinde boş bırakırsanız yeni, boş bir sayfa açılır. Aşağıda tıklandığında yeni pencere açan bir link örneği görüyorsunuz.
Browser'ın history kaydında ileri-geri gitmek için window.history.go() metodu kullanılır. Örneğin:
window.history.go(-2)
komutu bizi ziyaret ettiğimiz iki önceki sayfaya ***ürür.
Browser'ın altında yer alan status bara birşey yazmak istersek, aşağıdaki kodları kullanırız.
window.status("Yazılacak Mesaj")
Browser Nesnesi
Javascript için browser da bir nesnedir. Fakat window nesnesinin aksine browser nesnesinin özelliklerini değiştiremeyiz.Sadece gerektiğinde kullanmak üzere değerlerini öğrenebiliriz.Aşağıda broser nesnesinin özellikleri listelenmiştir:
appname:Browser'ın adı
appVersion:Browser'ın sürümü
appCodeNameBrowser'ın kod adı
userAgentBrowser'ın kendini server'a tanıtırken verdiği isim.
Frame(Çerçeve) Nesnesi Frame tekniği özetle bir pencere içerisinde birden çok pencere görüntülememize olanak verev bir tekniktir. Eğer bu teknikle ilgili bilginiz yoksa veya yetersizse HTML bölümüne bir göz atın. Javascript ile frame nesnesinin elemanlarına atıfta bulunmak için aşağıdaki ifadeler kullanılır.
top: Browser'ın kendisi, yani en üst pencere.
parent: Frameleri oluşturan frameset.
self: Çerçevenin kendisi.
Parent Frame'in üzerinde yer alan 'yavru' çerçevelerin adları ise Javascript açısından parent.frame[n]'dir. Burada n yerine frame'in numarası gelir. Mesela iki çerçeveli bir sayfanız varsa ilk çerçevenin adı parent.frame[0], ikincisinin adı ise parent.frame[1] olur.
Aşağıdaki örneği cerceve.html adıyla kaydedin.
Aşağıdakini de frame1.html adıyla kaydedin.
Son olarak aşağıdaki örneği frame2.html adıyla kaydedin.
Üç dosyanın da aynı dizinde olduğuna emin olduktan sonra cerceve.html dosyasını çalıştırın.
JavaScript Nedir?
JavaScript Netscape firması tarafından geliştirilmiş olan bir script dilidir. Script dilleri Web sayfası hazırlayanlara etkileşimli ve dinamik sayfalar hazırlama imkanı vermektedir. JAVA dilinin özelliklerine ve komut yapısına çok benzeyen JavaScript aslında JAVA dilinden ayrı olarak hazırlanmıştır.
Javascript yardımı ile HTML kaynak kodları değiştirilebilir, bu sayede dinamik Web sayfaları hazırlamak mümkün olur. Javascript ile hazırlanmış Web sayfaları ancak JavaScript desteği veren Web tarayıcıları ile izlenebilir. En popüler tarayıcılardan olan Netscape Navigator ve Internet Explorer tarafından desteklenmektedir. Javascript ile hazırlanan Web sayfalarından tam randıman alabilmek için iki tarayıcının da en son sürümlerini kullanmanızı (en azından 4.x ve üstü) öneririz.
Detaylı bilgi ;
1. JavaScript Nedir?
HTML dili her ne kadar metinler üzerinde neredeyse her türlü düzenlemeyi yapmamıza izin verse de, zayıf kaldığı bazı yönler vardır; mesela HTML bize web sayfalarına bir 'iş' yaptırtma, onları değişik olaylara veya durumlara duyarlı hale getirme imkanı sunmaz. Bu eksikliği Netscape firmasının yetkilileri de farketmiş olacak ki Aralık 1995 tarihinde, C dilinin browser'lara uyarlanmış hali diyebileceğimiz JavaScript'i piyasaya sürdüler.
Tam bu dönemde Sun Microsystems Pascal ve Delphi dillerinden esinlerek oluşturduğu 'Java' isimli bir programlama dilini piyasaya sürmek üzereydi. Netscape'in piyasaya sürdüğü script dilinin ismini JavaScript koyması, o dönemde çok telaffuz edilen 'Java' kelimesinin popüleritesinden yararlanmak adına uyguladığı bir pazarlama stratejisiydi, yani pek çok kişinin düşündüğünün aksine Java ile JavaScript arasında isim benzerliği hariç hiçbir benzerlik yoktur.
Bir süre sonra Microsoft da olaya el attı ve JavaScript'le neredeyse aynı olan JScript'i piyasaya sürdü.Fakat sonra bu diller farklı yönlere doğru geliştiler. Şu anda Netscape tarayıcısı JScript'i tanımıyor, fakat Explorer her iki script'i de tanıyor. Yine de iki tarayıcının JavaScript'i yorumlamaları bazen farklılık gösterebiliyor.
'JavaScript nedir?' sorusuna dönersek :
- Netscape'in piyasaya sürdüğü script dilidir.
- JavaScript HTML kodlarının içine yazılır. Yazılan kodun bir JavaScript kodu olduğu browser'a <script>...</script> etiketleri ile bildirilir.
- Tıpkı HTML gibi, JavaScript kodları da yorumlanmak için bir browser'a ihtiyaç duyarlar, yani sonuçta '.exe' uzantılı, bağımsız olarak çalışabilecek bir dosya oluşmaz.
- JavaScript bir olay halinde işler; olay JavaScript açısından ziyaretçinin bir yere tıklaması, bir tuşa basması vs. olabilir.
JavaScript ile neler yapılabilir?
JavaScript ile bir web sayfasına yukarıda tanımladığımız biçimde herhangi bir olayın gerçekleşmesi halinde herhangi bir iş yaptırabiliriz. Örnegin sayfada bir butona basıldığında sayfadaki bir 'text' kutusunun içine 'Click!' yazdırabiliriz. Burada olay ziyaretçinin butona tıklaması, iş ise text kutusuna 'Click!' yazılmasıdır... Javascript dilinde neredeyse olası her olay tanımlanmıştır, dolayısıyla yapılabilecek şeyler çok geniştir.
Javascript'i öğrenmeye geçmeden önce bir öneri: Sadece gerektiği zaman Javasript'i kullanın. Gereksiz kullanımlar sayfanın boyutunu şişireceği gibi, sayfanızın estetiğini ve kullanışlılığını de olumsuz yönde etkileyecektir.
2. JAVASCRIPT'IN GENEL YAPISI VE İLK JAVASCRIPT
JavaScript kodları <script>...</script> etiketleri arasına yazılır. Script etiketinin işimize yarayacak iki parametresi vardır, bunlar:
src: Harici bir JavaScript belgesini '.js' uzantılı kaydedip bu parametre ile çağırabiliriz.
language: Bu parametre 'Javascript', 'JavaScript1.1' veya 'JavaScript1.2' değerlerini alır.En son sürümü kullanmak her zaman daha güvenlidir.
JavaScript kodlarının yapısı ise böyledir:
Kod:
[font=monospace][color=#666666]<[/color]script[color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
...
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[/font]
Buradaki '<!--' ve '-->' ifadeleri yazılan kodları eski sürüm browser'lardan gizler
İLK JAVASCRİPT
Aşağıdaki kod sadece yukarıda verilen şablonun HTML belgesinin içine nasıl yerleştirildiğini görmeniz ve JavaScript hakkında bir fikir sahibi olmanız için verilmiştir. Dolayısıyla kodu satır satır anlamaya çalışmayın. İşte 'Merhaba Dünya!'
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title>
[color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]script[color=#666666]>[/color]
[color=#008000][b]function[/b][/color] merhaba()
{
alert([color=#BA2121]'Merhaba Dünya!'[/color])
}
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]form[color=#666666]>[/color]
[color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Button"[/color] value[color=#666666]=[/color][color=#BA2121]"Tıklayın!"[/color] onClick[color=#666666]=[/color][color=#BA2121]"merhaba()"[/color][color=#666666]>[/color]
[color=#666666]<[/color]/form>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
3. DEĞİŞKENLER
Değişkenlere geçmeden önce JavaScript'deki değerleri tanıyalım:
Sayı Değerleri: Sayı değerleri tamsayı (integer literal) ve kesirli sayı (floating-point literal) olmak üzere ikiye ayrılır. Örneğin: 12; 567; 55,23423...
Boolean ifadeleri: Boolean mantığı iki sonuç verir: Doğru veya yanlış. Doğru '1' veya 'true', yanlış ise '0' veya 'false' ile ifade edilir.
String değerleri:Çift tırnak veya tek tırnak içinde gösterilen string değerleri, JavaScript açısından 'metin' olarak değerlendirilir.Örneğin: "Merhaba!"; "İstanbul 34"; "342,345"...
DEĞİŞKENLER
Değişken kendisine ketfi bir değer atayıp bu değeri programın herhangi bir yerinde değiştirmemize olanak veren bir unsurdur. Değişkenleri browser'a 'var' anahtar-kelimesiyle bildiririz, ve onları -ilk karakterlerinin rakam veya '_' olmaması, ve tabi türkçe karakter içermemeleri şartıyla- istediğimiz gibi adlandırabiliriz.
var degisken, var sonuc, var sayac...
Değişkenlere değer atama (initialization) ise aşağıdaki gibi olur:
değişken= "kitap", sonuc= 34, sayac= true
Veya iki işi aynı anda da yapabiliriz:
var degisken="kitap", var sonuc= 34, var sayac= true
Bu genel tanımdan sonra JavaScript'in değişken türlerine bir göz atalım:
Sayı Değiskenler: Ondalık veya tamsayı değerini alırlar, bu değişkenlerle aritmetik işlemler yapılabilir.Örneğin: 'var cevap= 44,56'
Boolean Değişkenler: '1'; 'true' veya '0'; 'false' değerlerini alan değişkenlerdir: 'var dogruMu: true'
String Değişkenler: String değeri alırlar, '+' operatörüyle iki string birbirine bağlanabilir, aşağıda 'hepsi' değişkeninin değeri "Javascript" string'i olacaktır:
'var bas= "Java", son="Script"
var hepsi= bas+son'
Fonksiyon değişkenleri: Bu değişkenleri tanımlamak için 'function' ifadesini kullanırız. Fonksiyonlar JavaScript'e bir iş yaptırmamızı sağlarlar.Fonksiyonları ileride başlıbaşına bir konu olarak göreceğiz, şimdilik fazla üzerinde durmayalım.
Dizi-değişkenler (Array): Array'ler ile farklı değerleri bir dizinin elemanı olarak aynı ad altında toplayabilir, gerektiğinde kullanmak üzere çağırabiliriz:
var dizi = new Array(eleman1,eleman2,eleman3,eleman4) //dizi isimli bir array'e 4 farklı değer verdik
var yeni = dizi[2] //yeni isimli değişkene dizinin 3. elemanını atadık.
Yukarıda bir yazım hatası yoktur, JavaScript saymaya sıfırdan başladığı için 'dizi[2]' ifadesi dizinin 3. elemanı olan "eleman3" e eşittir.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]değişkenler[color=#666666]<[/color]/title>
[color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]var[/b][/color] tarih[color=#666666]=[/color][color=#666666]1974[/color]
[color=#008000][b]var[/b][/color] araba[color=#666666]=[/color][color=#BA2121]"Jaguar"[/color] [color=#408080][i]//değişkenleri bildirip değerlerini atayalım
[/i][/color]documént.write(tarih[color=#666666]+[/color][color=#BA2121]" "[/color][color=#666666]+[/color]araba[color=#666666]+[/color][color=#BA2121]"<br>"[/color])
tarih[color=#666666]=[/color][color=#666666]1975[/color] [color=#408080][i]//tarih değişkeninin değerini değiştirelim
[/i][/color]documént.write(tarih[color=#666666]+[/color][color=#BA2121]" "[/color][color=#666666]+[/color]araba)
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
4. OPERATÖRLER
Assignment(atama) operatörü
JavaScript'in(ve bütün programlama dillerinin) temel operatörü olan atama operatörü '=' işaretiyle ifade edilir, işaretin sağındaki değeri(veya değişkenin değerini), solundaki değişkene atar.
'var sayi = 34 ; var sayi2 = sayi'
Aritmetik operatörler
'+' :Sayı değişkenleri toplamaya, string değişkenleri birbirine eklemeye yarar.
'-' : Sayı değişkenlerde çıkartma işlemini yapar.
'*' : Sayı değişkenlerde çarpma işlemini yapar.
'/ ' : Bölme işlemi yapar.
'%' : Modülüs işlemi. '10%3' ifadesinin matematikteki karşılığı '10 mod 3' ifadesidir ve sonuç 1 çıkar.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Aritmetik operatörler[color=#666666]<[/color]/title>
[color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]var[/b][/color] toplama[color=#666666]=[/color][color=#666666]11[/color][color=#666666]+[/color][color=#666666]2[/color] [color=#408080][i]//değişkenlere işlemlerin sonuçlarını atayalım
[/i][/color] [color=#008000][b]var[/b][/color] cıkarma[color=#666666]=[/color][color=#666666]10[/color][color=#666666]-[/color][color=#666666]4[/color]
[color=#008000][b]var[/b][/color] carpma[color=#666666]=[/color]([color=#666666]7[/color],[color=#666666]32[/color])[color=#666666]*[/color][color=#666666]4[/color]
[color=#008000][b]var[/b][/color] bolme[color=#666666]=[/color]([color=#666666]32[/color],[color=#666666]4[/color])[color=#666666]/[/color]([color=#666666]1[/color],[color=#666666]22[/color])
[color=#008000][b]var[/b][/color] modul[color=#666666]=[/color] [color=#666666]23[/color][color=#666666]%[/color][color=#666666]3[/color]
[color=#008000][b]var[/b][/color] hepsi[color=#666666]=[/color]toplama[color=#666666]+[/color]cıkarma[color=#666666]+[/color]bolme[color=#666666]+[/color]carpma[color=#666666]+[/color]modul [color=#408080][i]//bütün değerleri toplayalım
[/i][/color] documént.write(toplama,[color=#BA2121]"<br>"[/color],cıkarma,[color=#BA2121]"<br>"[/color],carpma,[color=#BA2121]"<br>"[/color],bolme,[color=#BA2121]"<br>"[/color],modul,[color=#BA2121]"<br>"[/color])
documént.write(hepsi) [color=#666666]/[/color] /bulduğumuz değerleri yazdıralım
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Aritmetik operatörlerden bahsetmişken JavaScript'in bazı kısaltmalarından bahsedelim
'a = a + b' ifadesini kısaca 'a+=b' şeklinde yazabiliriz.
Aynı kısaltma diğer işlemler için de geçerlidir(a-=b; a/=b, a*=b)
a = a + 1 ifadesini a++; a = a - 1 ifadesini ise kısaca a-- şeklinde yazabiliriz.
Karşılaştırma operatörleri
Karşılaştırma operatörleri, temsil ettikleri karşılaştırmanın sonucu doğruysa true, yanlışsa false değerini verirler.
'==' : Eşit operatörü, eğer iki tarafın değeri eşitse true sonucunu verir.
'!=' : Eşit değil operatörü, eğer iki tarafın değeri eşit değilse true sonucunu verir.
'< ' : Küçüktür operatörü, sol taraf küçükse true sonucunu verir.
'> ' : Büyüktür operatörü, sol taraf büyükse true sonucunu verir.
'<=' : Küçük eşittir operatörü, sol taraf küçükse veya iki taraf eşitse true sonucunu verir.
'>=' : Büyük eşittir operatörü, sol taraf büyükse veya iki taraf eşitse true sonucunu verir.
Bu ve diğer operatörler için verilen örnekleri yeni bir HTML belgesinin body bölümüne yazın
Kod:
[font=monospace][color=#666666]<[/color]pre[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]var[/b][/color] a[color=#666666]=[/color][color=#666666]10[/color], b[color=#666666]=[/color][color=#666666]4[/color];
documént.writeln([color=#BA2121]"a==b :"[/color],(a[color=#666666]==[/color]b))
documént.writeln([color=#BA2121]"a!=b :"[/color], (a[color=#666666]!=[/color]b))
documént.writeln([color=#BA2121]"a<b :"[/color], (a[color=#666666]<[/color]b))
documént.writeln([color=#BA2121]"a>b :"[/color], (a[color=#666666]>[/color]b))
documént.writeln([color=#BA2121]"a<=b :"[/color], (a[color=#666666]<=[/color]b))
documént.writeln([color=#BA2121]"a>=b :"[/color], (a[color=#666666]>=[/color]b))
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/pre>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Şart operatörü
Bu operatörü bir örnek üzerinde öğrenelim:
(a==b)? "Iki degisken esittir!":"Iki degisken esit degildir!"
Bu operatörün kullanımında parantez içerisine bir şart yazılır, ki burada o şart x ve y değişkenlerinin eşit olmasıdır, eğer bu şart doğruysa soru işaretinden hemen sonraki işlem, aksi takdirde ':' işaretinden sonraki işlem yapılır.
Kod:
[font=monospace][color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]var[/b][/color] a[color=#666666]=[/color][color=#666666]10[/color], b[color=#666666]=[/color][color=#666666]4[/color];
varsonuc[color=#666666]=[/color](a[color=#666666]!=[/color]b)[color=#666666]?[/color][color=#BA2121]"İki değişken eşit değil!"[/color][color=#666666]:[/color][color=#BA2121]"İki değişken eşit!"[/color]
documént.write(sonuc)
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[/font]
Mantıksal operatörler
Eğer karşılaştırmayı birden fazla durumu dikkate alarak yapacaksak mantıksal operatörleri kullanırız.
'&&' : 'And(ve)' operatörü: Koşulların hepsi doğru ise true değerini verir.
'|| ' : 'Or(veya)' operatörü: Koşulların en az birinin doğru olması halinde true değerini verir.
'! ' : 'Not' operatörü: Koşulların hepsinin yanlış olması durumunda true değerini verir.
Kod:
[font=monospace][color=#666666]<[/color]pre[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]var[/b][/color] a[color=#666666]=[/color][color=#666666]10[/color], b[color=#666666]=[/color][color=#666666]4[/color], c[color=#666666]=[/color][color=#666666]4[/color]
documént.writeln([color=#BA2121]""[/color])
documént.writeln([color=#BA2121]"a!=b && b==c : "[/color] , [color=#BA2121]"a b'den farklı ve b c'ye eşit mi? "[/color],(a[color=#666666]!=[/color]b [color=#666666]&&[/color] b[color=#666666]==[/color]c))
documént.writeln([color=#BA2121]"a==b || b==c : "[/color] ,[color=#BA2121]"a b'ye veya c'ye eşit mi? "[/color],(a[color=#666666]==[/color]b [color=#666666]||[/color] b[color=#666666]==[/color]c))
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/pre>
[/font]
5. BİLGİ GİRİŞ ÇIKIŞI
JavaScript ile fonksiyon yazarken bazı noktalarda ziyaretçiden bir bilgi almanız veya ona bir şey onaylatmanız gerekebilir. Tabi bazı verilerin de ekrana yazılması gerekir. Şimdi bunu JavaScript'le nasıl yapabileceğimizi görelim.
Bilgi girişi
prompt()
Ziyaretçiden ismi adresi gibi bir 'text' almak promt fonksiyonuyla mümkündür.
prompt("Sorulacak soru","Varsayılan cevap")
Aşağıdaki örneği body bölümüne <script>...</script> etiketleri arasına yazın.
prompt("Adınız nedir?","isim")
confirm()
Ziyaretçinin onayını almak için kullanılır. Ziyaretçi açılan kutuda 'yes' e tıklarsa true, 'no' ya tıklarsa false değerini verir.
confirm("Sorulacak soru")
confirm("Emin misiniz?")
Bu iki fonksiyonun içinde değişken de kullanabiliriz. Örneğin isim diye bir değişkenimiz olsun, bu değişkenin değerini "Ahmet" alalım. Aşağıdaki kod "Adın Ahmet mi?" diye soracak:
confirm("Adın "+isim+" mi?")
Bilgi Çıkışı
write() fonksiyonu
Write fonksiyonu bize istediğimiz bir yere yazı yazma olanağı sağlar. Bu yer browser penceresi olabileceği gibi, yeni bir pencere veya bir textarea da olabilir.Biz şimdilik bunlardan ilki üzerinde duracağız.
documént.write("Yazılacak metin veya"+değişken)
Bu fonksiyon yerine documént.writeln() fonksiyonunu kullanabilirsiniz, bu fonksiyon yazdıklarınız bitince satırbaşı yapar.
alert()
Bu fonksiyonun içine yazdığımız metin, fonksiyon çağırıldığında ekranda beliren bir kutu içerisinde görüntülenir. Bu kutu üzerindeki 'ok' düğmesine basmılmadan kapanmaz.
alert("Yazılacak metin")
Şimdi bütün bunları bir örnek üzerinde görelim:
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Bilgi giriş çıkışı[color=#666666]<[/color]/title>
[color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]var[/b][/color] isim[color=#666666]=[/color]prompt([color=#BA2121]"Adınız nedir?"[/color],[color=#BA2121]"isim"[/color])
[color=#008000][b]var[/b][/color] cevap[color=#666666]=[/color]confirm([color=#BA2121]"Adınız ekrana yazılsın mı?"[/color])
[color=#008000][b]var[/b][/color] yaz[color=#666666]=[/color](cevap[color=#666666]==[/color][color=#008000][b]true[/b][/color])[color=#666666]?[/color] isim [color=#666666]:[/color] [color=#BA2121]"Peki, yazılmasın! "[/color]
documént.write(yaz)
cevap[color=#666666]=[/color]confirm([color=#BA2121]"Adınız bir alert kutusuna yazılsın mı?"[/color])
yaz[color=#666666]=[/color](cevap[color=#666666]==[/color][color=#008000][b]true[/b][/color])[color=#666666]?[/color] isim [color=#666666]:[/color] [color=#BA2121]"Peki, yazılmasın! "[/color]
alert(yaz)
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
6. KOŞUL İFADELERİ
JavaScript ile program yazarken program akışının her zaman yukarıdan aşağıya olmasını istemeyebiliriz. Bu durumda koşul ifadeleri devreye girer. Bu ifadelerle browser'a programın bir noktasında bir koşul belirtip, bu koşul doğruysa bir iş yapmasını, doğru değilse başka bir iş yapmasını söyleyebiliriz. Ya da daha karmaşık durumlar tanımlayabiliriz. Bütün bu işleri koşul ifadeleri 'if' ve 'else' 'i yerinde kullanarak başarabiliriz.
If ifadesi
If ifadesi, eğer verilen koşul doğruysa true, değilse false değerini verir. Aşağıda if'in kullanımını görüyorsunuz.
if (koşul)
{
Koşul sağlanıyorsa yapılacaklar
}
İf...else
If ifadesiyle bir veye birkaç koşul belirttiğimizde, oluşabilecek bir durum da bu koşul veya koşullardan hiçbirinin gerçeklenmemesidir. İşte bu durumu else ifadesiyle belirtiriz. Yani if ile browser'a 'verdiğim koşul doğruysa şunu yap', else ifadesiyle 'aksi takdirde şunu yap' deriz.
If ve else ifadelerinin kullanımları aşağıdaki gibidir.
if (koşul)
{
koşul doğruysa yapılacak iş
}
else
{
Bunun dışındaki her durumda yapılacak iş
}
Eğer birden fazla koşul belirtmek istersek ilk if'den sora else if ifadesini kullabilir ve bu koşullarda yapılacak işleri belirleyebiliriz. Bunun anlamı şudur: 'Eğer(if) a şartı gerçekleniyorsa şunu yap, bunun dışında(else if) eğer b şartı gerçekleniyorsa şunu yap,bunların dışındaki durunmlarda(else) şunu yap!' .Bu durumda else ifadesi verilen koşulların hiçbirinin gerçeklenmediği durumları kapsar. Bu karışık ifadeyi ve koşul yapısını aşağıdaki örneğe bakarak anlayabilirsiniz...
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title>
[color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]var[/b][/color] cevap1[color=#666666]=[/color]prompt([color=#BA2121]"54 + 21 = ?"[/color],[color=#BA2121]"cevap?"[/color]) [color=#408080][i]//İlk soruya verilecek cevabı cevap1'e atıyoruz
[/i][/color] [color=#008000][b]var[/b][/color] cevap2[color=#666666]=[/color]prompt([color=#BA2121]"20 / 4= ?"[/color],[color=#BA2121]"cevap?"[/color]) [color=#408080][i]//2. soruya verilecek cevabı cevap2'e atıyoruz
[/i][/color] [color=#008000][b]if[/b][/color](cevap1[color=#666666]==[/color][color=#666666]75[/color] [color=#666666]&&[/color] cevap2[color=#666666]==[/color][color=#666666]5[/color]) [color=#408080][i]//Eğer 1. cevap 75'e, 2.cevap 5'e eşit ise...
[/i][/color] alert([color=#BA2121]"Cevapların ikisi de doğru"[/color]) [color=#408080][i]//Bu mesajı yaz
[/i][/color]
[color=#008000][b]else[/b][/color] [color=#008000][b]if[/b][/color](cevap1[color=#666666]!=[/color][color=#666666]75[/color] [color=#666666]&&[/color] cevap2[color=#666666]!=[/color][color=#666666]5[/color]) [color=#408080][i]//Eğer sadece cevap1 doğruysa...
[/i][/color] alert([color=#BA2121]"Cevapların ikisi de yanlış"[/color]) [color=#408080][i]//Bunu yaz
[/i][/color]
[color=#008000][b]else[/b][/color] [color=#408080][i]//Yukarıdaki iki durumun dışındaki bir durumda,
[/i][/color] [color=#408080][i]//Yani sadece bir cevabın doğru olması halinde
[/i][/color] alert([color=#BA2121]"Cevapların sadece biri doğru"[/color]) [color=#408080][i]//Bunu yaz!
[/i][/color] [color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Bu örnekte, tanımda kullandığımız küme parantezlerini '{}' kullanmadık. Bunun nedeni koşul doğruysa yapılacak tek bir iş vermemizdir. Bu durumda JavaScript bu işin hemen üstündeki if'e ait olduğunu anlar. Fakat koşul doğruysa birden fazla iş yaptıracaksak bunları küme parantezleri içinde vermemiz gerekir.
7. DÖNGÜLER
Döngüler, kendilerine verilen koşul gerçeklendiği sürece aynı işi yapmaya devam eden fonksiyonlardır. Bu iş ,örneğin 1'den 100'e kadar saymak olabilir. Bu durumda bir sayaç oluşturulur. Bu sayacın değeri 1'den başlatılır, sayaca 100'e kadar sayması söylenir, ve her adımda sayacın değeri ekrana yazdırılır. Böylece 2 satırda 100 satırlık iş yaptırmış oluruz. JavaScript bize for, while, do...while ve switch döngülerini kullanma imkanı verir.
For döngüsü
For döngüsünün yazılışı aşağıdaki gibidir:
for (sayac = 1 ; sayac < 101 ; sayac++)
{
Bu iş 100 kez yapılacak!
)
Yukarıdaki döngüyle browser'a sayac değişkeninin değerini birer birer(sayac++),1'den(sayac= 1) 100'ekadar(sayac<101) arttırmasını ve her seferinde küme parantezi içinde belirtilen işi yapmasını söyledik. Burada 1 ve 101 yerine istenilen değer gelebilir,ayrıca artış değerini de istediğiniz gibi değiştirebilirsiniz( artışı n yapmak için sayac+=n ifadesini kullanın).Sayac değişkeninin adı da istediğiniz herhangi bir değişken adı olabilir. Yine if ifadesinde olduğu gibi döngüye yapacak tek bir iş verirsek küme parantezi kullanmaya gerek yok.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title>
[color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
documént.write([color=#BA2121]"1-10 arası sayıların kareleri ve küpleri<p>"[/color])
[color=#008000][b]for[/b][/color](i[color=#666666]=[/color][color=#666666]0[/color]; i[color=#666666]<[/color][color=#666666]10[/color] ; i[color=#666666]++[/color])
documént.write(i,[color=#BA2121]" "[/color], i[color=#666666]*[/color]i,[color=#BA2121]" "[/color],i[color=#666666]*[/color]i[color=#666666]*[/color]i,[color=#BA2121]"<br>"[/color])
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
While: Şartlı döngü
For' dan farklı olarak while dongüsünde bir şart verilir, while 'da bu şart gerçeklendiği sürece while, kendisine verilen işi yapar.
while(şart)
{
Yapılacak işler
}
İşte size biraz ısrarcı bir script!
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]var[/b][/color] cevap[color=#666666]=[/color][color=#008000][b]false[/b][/color]
[color=#008000][b]while[/b][/color](cevap[color=#666666]==[/color][color=#008000][b]false[/b][/color])
cevap[color=#666666]=[/color]confirm([color=#BA2121]"Siteme tekrar geleceksiniz değil mi !?"[/color])
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Do...while
Bazen karşımıza öyle bir durum çıkar ki, koşullar ne olursa olsun önce bir iş yaptırmamız, sonra bir şart belirtip bu şart gerçeklendiği sürece işin yapılmasını sağlamamız gerekir. Mesela bir mail list'imiz var ve ziyaretçiye bu listeye üye olmak isteyip istemediğini soracağız. Fakat istiyoruz ki bu ziyaretçi arkadaşlarını da listemize kaydettirsin. Bu işin içinden do...while döngüsünün yapısının altındaki örneği yazarak çıkabiliriz...
do
{
En az bir kere yapılacak iş
}
while(şart)
Şart gerçeklenmediğinde yapılacak işler.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]><[/color] BR[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color][color=#008000][b]do[/b][/color]...[color=#008000][b]while[/b][/color][color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]var[/b][/color] sayac[color=#666666]=[/color][color=#666666]0[/color]
[color=#008000][b]var[/b][/color] ePostalar[color=#666666]=[/color][color=#BA2121]" "[/color]
[color=#008000][b]do[/b][/color]{
[color=#008000][b]var[/b][/color] ePosta[color=#666666]=[/color]prompt([color=#BA2121]"Email listesi üelik başvurusu"[/color],[color=#BA2121]"e-mailiniz"[/color])
[color=#008000][b]var[/b][/color] cevap[color=#666666]=[/color]confirm([color=#BA2121]"Başka birini daha üye yapmak ister misiniz?"[/color])
sayac[color=#666666]++[/color]
ePostalar[color=#666666]+=[/color](ePosta[color=#666666]+[/color][color=#BA2121]", "[/color])
}
[color=#008000][b]while[/b][/color](cevap[color=#666666]==[/color][color=#008000][b]true[/b][/color])
alert([color=#BA2121]"Adresleri"[/color][color=#666666]+[/color]ePostalar[color=#666666]+[/color][color=#BA2121]"olmak üzere "[/color][color=#666666]+[/color]sayac[color=#666666]+[/color][color=#BA2121]" kişi kaydedilmiştir. Tesekkür ederiz!"[/color])
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Break ve Continue ifadeleri
Bu ifadeler dönguler içinde kullanılırlar.Bir döngü içerisinde break ifadesini kullandığımız noktada döngü koşullar ne olursa olsun sonlanır. Continue ifadesi ise kullanıldığı yerde döngünün o adımının atlanmasını sağlar. Örneğin 0'dan 100'e kadar sayan bir döngüye
(if sayac==23) continue
şeklinde bir ifade eklersek ekranda 23 hariç, 1'den 100'e kadar olan sayıları görürüz. Continue yerine break yazarsak ise, döngü 23'üncü adımın sonunda kesilir,yani ekranda 1-23 arası sayıları görürüz. Yazdığımız döngüler üzerinde bu ifadeleri deneyerek kullanımlarını daha iyi anlayabilirsiniz.
Switch
Switch fonksiyonu diğer döngülerden biraz farklıdır. Switch fonksiyonunda durumlar(case) tanımlarız, ve her durum için yapılacak işi tanımladıktan sonra döngüden break komutuyla çıkarız. Örneğin ziyaretçiden ismini ve cinsiyetini öğrenip ona bay/bayan isim şekllinde hitab etmek istiyorsunuz.Aşağıdaki örneği yazarak bu işi switch komutuyla yapablirsiniz.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color][color=#008000][b]do[/b][/color]...[color=#008000][b]while[/b][/color][color=#666666]<[/color]/title>< BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]var[/b][/color] isim[color=#666666]=[/color]prompt([color=#BA2121]"İsminiz"[/color],[color=#BA2121]"Buraya yazın"[/color])
[color=#008000][b]var[/b][/color] cinsiyet[color=#666666]=[/color]prompt([color=#BA2121]"cinsiyetiniz"[/color],[color=#BA2121]"k,e"[/color])
[color=#008000][b]switch[/b][/color](cinsiyet)
{
[color=#008000][b]case[/b][/color] [color=#BA2121]"e"[/color][color=#666666]:[/color]
[color=#008000][b]case[/b][/color] [color=#BA2121]"E"[/color][color=#666666]:[/color]
alert([color=#BA2121]"Merhaba Bay "[/color][color=#666666]+[/color]isim)
[color=#008000][b]break[/b][/color]
[color=#008000][b]case[/b][/color] [color=#BA2121]"k"[/color][color=#666666]:[/color]
[color=#008000][b]case[/b][/color] [color=#BA2121]"K"[/color][color=#666666]:[/color]
alert([color=#BA2121]"Merhaba Bayan "[/color][color=#666666]+[/color]isim)
[color=#008000][b]break[/b][/color]
[color=#008000][b]default[/b][/color][color=#666666]:[/color] alert([color=#BA2121]"Lütfen cisiyetinizi doğru yazın!"[/color])
}
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
8. FONKSİYON KAVRAMI
JavaScript ile program yazarken bu programın birçok iş yapmasını isteyebilirsiniz. Ayrıca bu işlerin belli zamanlarda, belli durumlarda yapılması da gerekebilir. Bu durumda yapılacak işler için yazılan kodları foksiyonlar şeklinde gruplayıp yeri geldiğinde çağırabiliriz. Mesela kup() isimli bir fonksiyon tanımlayıp, bu fonksiyona göndereceğimiz argümanın kübünü verecek kodlar yazabilir, sonra bu fonksiyona programın değişik yerlerinde farklı değerler gönderip, bu değerlerin kübünü buldurtabiliriz. Fonksiyonlar aşağıdaki gibi yazılır:
function(argüman1, argüman2, argüman3...)
{
yapılacak işler
}
Fonksiyonları head bölümüne yazıp gerektiği zaman çağırmanız hem kodlarınızın düzenli olmasını, hem de hızlı çalışmasını sağlar. Şimdi bir örnekle fonksiyonları tanıyalım
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Fonksiyonlar[color=#666666]<[/color]/title>
[color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]function[/b][/color] cd(adet)
{
[color=#008000][b]var[/b][/color] tutar1[color=#666666]=[/color]adet[color=#666666]*[/color][color=#666666]9000000[/color]
[color=#008000][b]return[/b][/color] tutar1
}
[color=#008000][b]function[/b][/color] kaset(adet)
{
[color=#008000][b]var[/b][/color] tutar2[color=#666666]=[/color]adet[color=#666666]*[/color][color=#666666]5000000[/color]
[color=#008000][b]return[/b][/color] tutar2
}
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]var[/b][/color] cdAdet[color=#666666]=[/color]prompt([color=#BA2121]"Kaç CD alacaksınız?"[/color],[color=#BA2121]"1"[/color])
[color=#008000][b]var[/b][/color] kAdet[color=#666666]=[/color]prompt([color=#BA2121]"Kaç kaset alacaksınız?"[/color],[color=#BA2121]"1"[/color])
[color=#008000][b]var[/b][/color] toplamTutar[color=#666666]=[/color] cd(cdAdet)[color=#666666]+[/color]kaset(kAdet)
alert([color=#BA2121]"Borcunuz "[/color][color=#666666]+[/color]toplamTutar[color=#666666]+[/color][color=#BA2121]".-TL"[/color])
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Şimdi bu örneği inceleyelim: Önce head bölümünde 'cd' isimli bir fonksiyon tanımladık.Bu fonksiyona keyfi olarak fiyat argümanını vedik. Sonra 'tutar1' isimli değişkene, 'fonksiyona gönderilecek değer' * 9000000 değerini atadık. Aynı şekilde bir kaset fonksiyonu yazdık. Body bölümüne geçelim :Kullanıcıdan aldığımız değerleri kAdet ve cdAdet değişkenlerine atayıp, bu değerleri head bölümündeki ilgili fonksiyonlara gönderdik. Fonksiyonlar istediğimiz hesabı yaptı ve 'return' ifadesiyle belirttiğimiz üzere hesaplanan değerleri tekrar body bölümüne gönderdi. Sonra bu iki değeri toplayıp ekrana yazdırdık.
Bu noktada bu zamana kadar kullandığımız prompt(),alert(),if(),for()... gibi ifadelerin aslında birer fonksiyon olduğuklarını açıkça görebilirsiniz. Bu fonksiyonların bizim yazdıklarımızdan farkı şudur: Örneğin prompt fonksiyonunun yapacağı işi belirtmemize gerek yoktur, bu fonksiyonun tanımı browser'ınızın dosyalarında mevcuttur. Bu şekilde istediğimiz zaman bu fonksiyonu çağırıp kullanabiliriz, böyle fonksiyonlara metod denir.
9. NESNELER
JavaScript kullanarak özelliklerini görebileceğimiz veya değiştirebileceğimiz şeyler; örnğin bu browser penceresi, bir form'un öğeleri hatta browser'ın ta kendisi JavaScript açısından birer nesnedir. Bu özelliğinden dolayı JavaScript nesneye yönelik bir programlama dilidir. Şimdi bu nesneleri tanıyalım ve özelliklerini inceleyelim.
Window Nesnesi
Window, browser'ın sayfaların görüntülendiği kısmıdır.aşağıda bu nesnenin özelliklerini görüyorsunuz:
width: Pencerenin genişliğinin piksel cinsinden değeri
height: Pencerenin yüksekliği piksel cinsinden değeri
top: Pencerenin ekranın üst kenarından uzaklığının piksel cinsinden değeri
left: Pencerenin ekranın sol kenarından uzaklığının piksel cinsinden değeri
toolbar: Araç çubuğunun olması(yes) veya olmaması(no)
menubar: Menubar'ın olması(yes) veya olmaması(no)
resizeable: Pencere boyutlarının değiştirilebilir(yes) veya sabit(no) olamsı
scrollbars: Kaydırma çubuklarının olması(yes) veya olmaması(no)
status: Status bar'ın olması(yes) veya olmaması(no)
********: Browser'ın ******** çubuğunun olması(yes) veya olmaması.
copyhistory: Yeni açılan pencereye eski pencerenin history kaydının aktarılması(yes) veya aktarılmaması.
Bu listede 'yes' ve 'no' değerleri yerine '1' ve '0' da yazabilirsiniz.
Yeni bir pencere açmak için window.open(), kapatmak için window.close() metodları kullanılır.
window.open("pencereAdi.html","Pencereadı","width=300 height=240 toolbar=0")
Burada 'pencereAdi.htm' yazan bölümü bu şekilde bırakırsanız yeni pencereye pencereAdi.htm sayfası yüklenir. Buraya sadece penceraAdi yazar veya ("") şeklinde boş bırakırsanız yeni, boş bir sayfa açılır. Aşağıda tıklandığında yeni pencere açan bir link örneği görüyorsunuz.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Yeni pencere açmak[color=#666666]<[/color]/title>
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#008000][b]function[/b][/color] pencereAc()
{
varPencereNesnesi[color=#666666]=[/color][color=#008000]window[/color].open([color=#BA2121]"YeniPencere"[/color],[color=#BA2121]"Pencere"[/color],[color=#BA2121]"toolbar=0 resizeable=0 width=300 height=300"[/color])
PencereNesnesi.documént.writeln([color=#BA2121]"<h1>Burasi yeni pencere</h1>"[/color])
PencereNesnesi.documént.write([color=#BA2121]"<a href=\"JavaScript:window.close(self)\">Pencereyi Kapat</a>"[/color])
}
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body [color=#666666]>[/color]
[color=#666666]<[/color]b[color=#666666]><[/color]a href[color=#666666]=[/color][color=#BA2121]"JavaScript:pencereAc()"[/color][color=#666666]>[/color]Yeni pencere acmak icin tiklayin[color=#666666]<[/color]/a></b>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Browser'ın history kaydında ileri-geri gitmek için window.history.go() metodu kullanılır. Örneğin:
window.history.go(-2)
komutu bizi ziyaret ettiğimiz iki önceki sayfaya ***ürür.
Browser'ın altında yer alan status bara birşey yazmak istersek, aşağıdaki kodları kullanırız.
window.status("Yazılacak Mesaj")
Browser Nesnesi
Javascript için browser da bir nesnedir. Fakat window nesnesinin aksine browser nesnesinin özelliklerini değiştiremeyiz.Sadece gerektiğinde kullanmak üzere değerlerini öğrenebiliriz.Aşağıda broser nesnesinin özellikleri listelenmiştir:
appname:Browser'ın adı
appVersion:Browser'ın sürümü
appCodeNameBrowser'ın kod adı
userAgentBrowser'ın kendini server'a tanıtırken verdiği isim.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]Browser'ımızı tanıyalım[color=#666666]<[/color]/title>
[color=#666666]<****[/color]content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color]
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"Javascript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]function[/b][/color] Tani()
{
[color=#008000][b]var[/b][/color] browseradi[color=#666666]=[/color][color=#BA2121]" "[/color];
browseradi [color=#666666]+=[/color][color=#BA2121]"Browser:"[/color][color=#666666]+[/color]navigator.appName [color=#666666]+[/color][color=#BA2121]"\r"[/color]
browseradi [color=#666666]+=[/color][color=#BA2121]"Surumu:"[/color][color=#666666]+[/color]navigator.appVersion [color=#666666]+[/color][color=#BA2121]"\r"[/color]
browseradi [color=#666666]+=[/color][color=#BA2121]"Kodadi:"[/color][color=#666666]+[/color]navigator.appCodeName[color=#666666]+[/color][color=#BA2121]"\r"[/color]
browseradi [color=#666666]+=[/color][color=#BA2121]"Useragent:"[/color][color=#666666]+[/color]navigator.userAgent[color=#666666]+[/color][color=#BA2121]"\r"[/color]
alert(browseradi)
}
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body onLoad[color=#666666]=[/color][color=#BA2121]"Tani()"[/color][color=#666666]>[/color]
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Frame(Çerçeve) Nesnesi Frame tekniği özetle bir pencere içerisinde birden çok pencere görüntülememize olanak verev bir tekniktir. Eğer bu teknikle ilgili bilginiz yoksa veya yetersizse HTML bölümüne bir göz atın. Javascript ile frame nesnesinin elemanlarına atıfta bulunmak için aşağıdaki ifadeler kullanılır.
top: Browser'ın kendisi, yani en üst pencere.
parent: Frameleri oluşturan frameset.
self: Çerçevenin kendisi.
Parent Frame'in üzerinde yer alan 'yavru' çerçevelerin adları ise Javascript açısından parent.frame[n]'dir. Burada n yerine frame'in numarası gelir. Mesela iki çerçeveli bir sayfanız varsa ilk çerçevenin adı parent.frame[0], ikincisinin adı ise parent.frame[1] olur.
Aşağıdaki örneği cerceve.html adıyla kaydedin.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]><[/color] BR[color=#666666]><[/color]head[color=#666666]><[/color]BR[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]frameset cols[color=#666666]=[/color][color=#BA2121]"*,*"[/color][color=#666666]>[/color]
[color=#666666]<[/color]frame name[color=#666666]=[/color][color=#BA2121]"bir"[/color] src[color=#666666]=[/color][color=#BA2121]"default.html"[/color][color=#666666]>[/color]
[color=#666666]<[/color]frame name[color=#666666]=[/color][color=#BA2121]"iki"[/color] src[color=#666666]=[/color][color=#BA2121]"ornek.html"[/color][color=#666666]>[/color]
[color=#666666]<[/color]/frameset>
[color=#666666]<[/color]noframes[color=#666666]>[/color]
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/noframes>
[color=#666666]<[/color]/html>
[/font]
Aşağıdakini de frame1.html adıyla kaydedin.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]><[/color] BR[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]bir[color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
Buraya yazı yazılacak[color=#666666]<[/color]br[color=#666666]>[/color]
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Son olarak aşağıdaki örneği frame2.html adıyla kaydedin.
Kod:
[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color]
[color=#666666]<[/color]head[color=#666666]>[/color]
[color=#666666]<[/color]title[color=#666666]>[/color]iki[color=#666666]<[/color]/title>< BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
[color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color]
[color=#408080][i]<!--[/i][/color]
[color=#008000][b]function[/b][/color] yazdir1()
{
parent.frames[[color=#666666]0[/color]].documént.write([color=#BA2121]"<h1>Merhaba! Burası 1. Çerçeve</h1>"[/color])
}
[color=#666666]-->[/color]
[color=#666666]<[/color]/script>
[color=#666666]<[/color]/head>
[color=#666666]<[/color]body[color=#666666]>[/color]
[color=#666666]<[/color]a href[color=#666666]=[/color][color=#BA2121]"Javascript:yazdir1()"[/color][color=#666666]>[/color]Buraya tıklayın ve [color=#666666]1.[/color] Çerçeveye yazı yazılsın.[color=#666666]<[/color]/a>
[color=#666666]<[/color]/body>
[color=#666666]<[/color]/html>
[/font]
Üç dosyanın da aynı dizinde olduğuna emin olduktan sonra cerceve.html dosyasını çalıştırın.
Moderatör tarafında düzenlendi: