JAVASCRIPT
Prompts & Opening Windows (soru sorma ve pencere açma)
Bu derste iki sey yapacagiz:
- Ziyaretçiye sorular sorup, degerleri degisken olarak saklamasini
- JavaScript ile yeni pencere açmasini
Ziyaretçilere soru sorma
Degiskenleri ögrendigimiz zamani hatirliyormusunuz? Degiskenler bilgileri saklamada kullaniliyordu. Örnek ve alistirmalarda degiskenlerin 'statik' tariflerini gördünüz, yani browser degiskenin degerini Javascripti çöalistirmadan bildigi durumlar. Halbuki prompt() metodu ile browsere ziyaretçiye soru sormasini ve cevaplari degisken olarak saklamasini söyleyebiliriz. Bunun hepsi karmasik görünsede esasinda tek satirda is biter.
var durum = prompt("Kendinizi nasil hissediyorsunuz?","iyi yada hasta");
Nasil cevap verdiginiz önemli degil, çünkü degiskenle ilgili bir sey yapmadim henüz. durum degiskeni su anda Javascript tarafindan ulasilabilir durumda degil. Eger sayfa yüklenmeden sizi cevaplamaya mecbur biraksaydim ulasilabilir olurdu. Simdi sayfa yüklendi ve artik degiskenler yerlestiremezsiniz. Eger degiskene simdi ulasmaya çalissaydim "object undefined" hatasi alirdik. (Evet, degiskenler de nesnedir.)
Simdi kisaca parantezlerin içindekilerin ne yaptigini anlatacagim. Önceki dersten hatirlarsiniz, parantez içinde metodlarin parametreleri vardir. Parametreler metodlarin ne yapmalari gerektigini etraflica anlatirlar. prompt() metodunun 2 tane parametreye ihtiyaci vardir. Birincisi soru, ikincisi varsayilan cevaptir. Her iki parametrede " " ile sinirlanip virgülle ayrilir. Aman dikkat " ve , arasinda bosluk olmamalidir.
Simdiye kadar çok iyi gidiyoruz,Sorularin nasil sorulacagini ögrendik. Simdi ise, bir script ile ziyaretçiye soru sorup, ziyaretçinin cevabina göre Alert-box içinde selam verelim. Bu sekilde cevaplari isleyip geçerli kilmasini ögreniriz.
<SCRIPT language="JavaScript">
<!--
var durum = prompt("Kendinizi nasil hissediyorsunuz?","iyi yada hasta");
if (durum == "iyi") {
alert("Çok güzel, böyle olmaya devam edin")
} else {
alert ("Geçmis olsun, hemen bir doktora gidin")
}
// -->
</script>
Kolay degil mi? if-then-else sanirim tanidik gelmistir, degil mi? Böyle oynamak eglenceli oluyor mu?
Simdi bir sonraki bölüme geçelim:
Javascriptle pencere açma
HTML ile pencere açmak rutin bir istir, ama bir takim sinirlamalari vardir. HTML ile pencerelerin neye benzedigini kontrol imkaniniz yoktur. Hangi özellikler olmali (scroll bar, status bar, üst menu v.s.) veya pencerenin ölçüleri gibi. Fakat Javascript ile open() metodunu kullanarak bunlarin hepsini uygulayabilirsiniz. Aynen söyle:
window.open("URL","isim","özellikler");
Yukardaki kod ile yeni bir pencere açip, ilk parametre olarak yer belirtirsiniz. Bu örnekte "URL", fakat gerçekte "http://www.testleronline.com" diye bir sey yazmaniz lazim.
Metodun ikinci parametresi ise pencerenin adidir. Bu sizin ayni pencereye degisik sayfalar yüklemenizi saglar. Örnegin, Javascript kullanarak content.htm dosyasini yükleyen "content" adinda yeni bir pencere açalim. Daha sonra ise content2.htm dosyasini ayni pencereye yüklemeye çalisalim. Böylece ayni ismi kullanarak yeni bir pencere açmadan, mevcut "content" adindaki pencerenin içerigini degistirmis olursunuz. Bir örnek verelim:
"javascript" adinda bir pencere açalim
"javascript"'in içine giren yeni bir HTML sayfasi açalim
Anladiniz mi? Her iki örnegin kodu asagidadir:
<a href="#" onClick='window.open("examples/page1.htm","javascript");'>"javascript" adinda bir pencere açalim</a><br>
<a href="#" onClick='window.open("examples/page2.htm","javascript");'>"javascript"'in içine giren yeni bir HTML sayfasi açalim</a>
Ilk linki tiklayinca javascript adindaki pencere açilir examples/page1.htm sayfasi içine konulur.
Ikinci link ise ilk linkin açtigi pencereye yeni bir HTML sayfasi yerlestirir. Simdiye kadar iyi gidiyor. Simdi birazda features parametresini irdeleyelim!.
Features parametresi açilan pencerenin hangi özellikleri tasimasini istiyorsaniz onlari dahil eder. Eger features (özellikler) parametresinde herhangi bir özellik dahil ederseniz, yazili olmayanlari uygulamaz, sadece belirttiginiz parametreleri olan bir pencere açar. Örnegin:
window.open("URL","name","status,scrollbars,resizable")
böyle yazarsaniz, status bar, scrollbar (kaydirma çubuklari) ve ölçüleri ayarlanabilir bir pencere elde edersiniz. Dikkat ederseniz, stringde hiç bosluk birakilmamistir. Bosluk birakirsaniz, bir takim browserlarda hata mesaji alirsiniz. Simdi ise sadece yükseklik ve genisligi belirten tarif eden bir örnek göreceksiniz:
window.open("URL","name","height=250,width=640")
Unutmayin bosluk birakmak yok! Ayrica HTML'den aliskin oldugunuz " " isaretleri de yok!. Bu biraz karisik olabilir, ama bir kere anladiniz mi tamamdir.
Asagida kullanabileceginiz Feature (Özellik) listesi:
| height |
Pencerenin yüksekligi (pixel olarak) |
| width |
Pencerenin genisligi (pixel olarak) |
| status |
Sayfanin altindaki mesaj çubugu |
| menubar |
Sayfanin üstünde Dosya , Düzen Sik Kullanilanlar gibi seylerin oldugu kisim |
| scrollbars |
Eger gerekiyorsa kaydirma çubuklari görünsün |
| toolbar |
Üstünde Geri , Ileri , Anasayfa , gibi buttonlarin oldugu gezinme çubugu |
| location |
Su anda bulundugunuz sayfanin URLsini gösteren kutu |
| directories |
Bu sadece Netscape için geçerli. " Yenilikler " butonu gibi butonlar... |
| resizable |
Ziyaretçilerin pencere ölçülerini degistirmesine izin veriyorsaniz yazin |
Bunlardan sadece birini yazarsaniz, öbürlerini istemediginiz anlamina gelir. Eger hiç bir sey yazmazsaniz standart bir pencere açilir. Hangi özellikleri istiyorsaniz onlari yazinca pencere istediginiz özelliklerde (feature) açilir.
Alistirma için degisik özelliklerde pencereler açiniz, böylece diziler ve döngüler hakkindaki bir sonraki derse isinmis olursunuz.
Dersi gözden geçirirsek:
- Soru sormasini
- Cevaplari nasil halledecegimizi
- JavaScript kullanarak pencere açmasini
- features parametresini degisik özelliklerini ögrenmis olduk.
|
EgLeNCe