PENCERE KOMUTLARI
|
| alert("mesaj")....Uyarı Kutusu |
| |
| Bu kodu daha önceki sayfalarda da kullanmıştık ve biliyoruz ki uyarı kutusu yapmaya yarar. JavaScript değişkenlerini ve tırnak içinde olmak şartıyla HTML kodlarını veya string ifadeleri uyarı kutusuyla gösterebiliyorduk ve "+" işareti ile bunları birleştirebiliyorduk. Yani, doğrudan bir striing ifade yazdırılabileceği gibi, bir değişken veyahut araya + vkonularak her ikisi beraber alert kutusu ile gösterilebilir. |
| |
<script language="JavaScript">
var metin = prompt ("herhangi bir kelime yazın","buraya yazın")
alert ("girilen kelime :" + metin)
</script>
|
| |
| confirm("mesaj")......Onay Kutusu |
| |
Herhangi bir eylemi doğrulamak için kullanılır.Mesaj herhangi bir string veya bir nesne özelliği olabilir. Bir kullanıcıya ya
OK(tamam) ya da Cancel(iptal) gerektiren bir karar verdirmek için onay olup olmadığını sormak için kullanılan bir hazır fonksiyondur (veya metod) .Mesaj içeriği karar vermesi için kullanıcıya gösterilir. confirm metodu kulanıcı "OK(tamam)" seçerse "true" değerini ve "Cancel" seçerse "false" değerini döndürür.
Confirm metodu window nesnesinin bir metodu olmasına rağmen, bu metodu çağırırken bir pencere referansı kullanmak zorunda kalmayabiliriz. Örneğin, pencere.confirm ( ) şeklinde yazılması gereksizdir. |
| |
<html>
<head>
<script type="text/javascript">
function dogrula() {
var cevap = confirm("silmek istediginize emin misiniz?")
if (cevap==true) {
alert("silindi")
window.location = "http://www.google.com/"
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="dogrula()" value="sil">
</form>
</body>
</html>
|
|
Burada sil isimli butona basıldığında dogrula fonksiyonu çalıştırılıyor. Dogrula fonksiyonunda confirm kutusu ile kullanıcıya işlemi yapmak istiyormusunuz şeklinde soru soruluyor. Kullanıcının seçimi cevap isimli dğeişkene aktarılıyor. Daha sonra if cümlesi ile cevap kontrol ediliyor. Eğer OK veye TAMAM tıklanmışsa dönen değer TRUE olacağından, if (cevap==true) komutuyla yapılacak işlemler belirleniyor. Öncelikle alert kutusuyla kaydın silindiği kullanıcıya belirtiliyor ve ardından window.location="http://www.google.com" komutuyla sayfa google'a yönlendiriliyor. Eğer istenirse else cümlesi açılarak kullanıcı CANCEL veya İPTAL tıkladığında yapılacak işlemlerde belirlenebilir. |
| |
| prompt("mesaj", "ilkdeğer ") ..... Bilgi Girişi Kutusu |
| |
Kullanıcı girişini alan bir diyalog kutusunu göstermek için kullanılır. eğer giris ilkdeğer için bir başlangıç değeri belirtilmemiş ise. Diyalog kutusu <undefineted> değerini gösterir. |
<script language="JavaScript">
var metin = prompt ("herhangi bir kelime yazın", "buraya yazın")
alert ("girilen kelime :" + metin)
</script>
|
Burada prompt ile açılan kutuda mesaj olarak "herhangi bir kelime yazın" yazarken, metin kutusu içerisinde ilkdeğer olarak "buraya yazın" yazısı görünecektir.Metin kutusuna yazılan değer metin isimli dğeişkene aktarılacaktır. |
| |
| window.open |
| |
| Yeni bir pencerede sayfa açmak için window.open(" ") kodundan yararlanılır. Parantez içine açılacak sayfanın adresi yazılır. |
<html>
<head>
<title>Yeni Pencere, yeni sayfa.</title>
<script language="JavaScript">
function pencere()
{
window.open("javametinkomut.html")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="pencere()" value="Java Metin">
</form>
</body>
</html>
|
Burada butona basıldığında pencere fonksiyonu çalışır. Fonksiyonda window.open(" ") komutuyla belirtilen sayfa yeni bir pencerede açılır. |
NOT: Yeni sayfa açılırken istenirse ek parametrelerle açılacak sayfanın özellikleri belirlenebilir. |
| |
<html>
<head>
<script language="JavaScript">
function pencere( ) {
window.open("javametinkomut.html", "Yeni_Sayfa", "toolbar=no, location=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=760, height=460")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="pencere()" value="JavaMetin">
</form>
</body>
</html>
|
| |
Bu uygulamadaki pencere açma komutu biraz daha değişik:
window.open("dosya adresi(URL)", "pencere ismi", "pencere özellikleri").
Burada sıralama önemlidir. İlk yazılan değer açılacak sayfanın adresi, ardından yazılan ise pencere ismi olacaktır.Ancak bunu pencere başlığıyla karıştırmayın. Pencere id'si gibi birşey. Daha sonraki bölümde ise pencere özellikleri karışık bir şekilde yazılabilir.
Pencere Özellikleri
|
menubar Tarayıcıların en üst kısmında bulunan File(Dosya) , Edit(Düzen)
vb. menülerin bulunduğu satırdır.
menubar=yes
status Tarayıcıların en alt kısmında hangi dosyanın yüklendiği ile ilgili bilgi
veren kısımdır.
status = no
scrollbars Kaydırma çubuklarını ifade eder. scrollbars = yes
resizable Pencerenin büyüklüğünün fare ile değiştirilebilirliğini ifade eder. resizable = no
width Pencere genişliğini piksel cinsinden ifade eder. width = 600
heigth Pencere yüksekliğini piksel cinsinden ifade eder. heigth = 400
toolbar Tarayıcılarda üst kısımda Back(Geri) , Forward(İleri) vb. tuşların
bulunduğu kısımdır. toolbar = no
location Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız
kısım. location = yes
left Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta
olacağını belirler. . left = 100
top Açılacak olan pencerenin ekranın üst tarafından kaç piksel uzaklıkta
olacağını belirler.. top = 50
screenX Açılacak olan pencerenin ekranın sol tarafından kaç piksel uzaklıkta
olacağını belirler. Internet Explorer göz atıcıları desteklemiyor.
screenX = 100
screenY Açılacak olan pencerenin ekranın üst tarafından kaç piksel uzaklıkta
olacağını belirler. Internet Explorer göz atıcıları desteklemiyor
screenY = 50
copyhistory Açılacak olan pencerenin history kaydının (daha önce ziyaret edilen URl adreslerinin tutulduğu çizelgenin) yeni pencereye de kopyalanması.
copyhistory = yes
! Evet-Hayır anlamına değer alan özellikleri 1 ve 0 ile belirtebileceğiniz gibi yes (evet) ve no (hayır) ile de belirtebilbilirsiniz.
|
NOT1: Internet Explorer ve Netscape Navigator pencereyi konumlandırmak için farklı özellikler kullanılıyor. Her ikisinin desteklediği özellikleri beraber kullanırsanız sorun kalmaz.
NOT2: Evet/hayır tipi değer alan (boolean) özellikleri yes/no veya 1/0 gibi değerler alır. |
NOT3: Aynı anda istenildiği kadar pencere açılabilir.Ancak pencere isimlerinin aynı olmamasına dikkat edin. |
<script language="JavaScript">
function pencere( ) {
window.open("javametinkomut.html", "Yeni_Sayfa1", "toolbar=no, location=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=760, height=460")
window.open("javazamankomut.html", "Yeni_Sayfa2", "toolbar=no, location=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=760, height=460")
window.open("javadiziler.html", "Yeni_Sayfa3", "toolbar=no, location=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=760, height=460")
}
</script>
|
NOT 4 : Varolmayan bir sayfa açmak için veya oluşturmak için window.open komut satrıında sayfa adresi boş bırakılır.
|
| |
<html>
<head>
<script language="JavaScript">
function yenipencere()
{
yenisayfa = window.open( "", "Yeni_Sayfa", "toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=280, height=50, left=200, screenX=200, top=100, screenY=100")
yenisayfa.document.write("<font color= blue>Yeni bir pencere açmak ve o pencereye yazı yazmak.</font>")
yenisayfa.document.write("<br>İşte bütün mesele bu!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="yenipencere()" value="Yeni Pencere">
</form>
</body>
</html>
|
Buton tılandığında yenipencere fonksiyonu çalışıyor ve yeni bir sayfa oluşturuluyor.Yeni sayfa nesne olduğundan "yenisayfa" isimli değişkene atılıyor ve yenisayfa.document.write ile içine yazı ekleniyor.
NOT: window.open ile mevuct bir internet sayfası da yenibir pencerede açılabilir.
|
| yenisayfa = window.open( "http://www.google.com", "Yeni_Sayfa", ",width=280, height=50") |
| |
| location |
Aslında bir nesnedir..Mevcut pencerede kullanıcının istenen sayfaya yönlendirilmesi için location = "adres" komutunu kullanırız: Yeni bir sayfa açılmaz,mevcut sayfada yönlendirme yapılır. window.location="adres" şeklinde de kullanılabilir. |
<html>
<head>
<script language="JavaScript">
function yonlendir()
{
location = "javadiziler.html"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="yonlendir()" value="JavaScript`e Giriş">
</form>
</body>
</html>
|
| |
| NOT: Sayfayı yenilemek için location.reload() komutu kullanılır. |
<script language="JavaScript">
function yinele()
{
location.reload()
}
</script> |
| |
| window.close |
Sayfayı kapatır. window.close( ) şeklinde kullanılır.
|
<head>
<script language="javascript">
function kapat() {
window.close()
}
</script>
</head>
<body>
<form>
<label>
<input type="button" name="button" onclick="kapat()" id="button" value="kapat">
</label>
</form>
</body>
|
Buton tıklandığında kapat fonksiyonu çalıaşcak ve window.close() komutuyla mevcut sayfa kapanacaktır. |
| |
| window.status |
Durum çubuğu (status bar) üzerine yazı yazmayı sağlar. window.status=" mesaj " şeklinde kullanılır. Ancak tarayıcıda status barın görünür olması grekmektedir. |
| |
<head>
<script language="JavaScript">
function kutlama()
{
window.status = " ben status bar'ım :) "
}
</script>
</head>
<body>
<form>
<input type="button" onclick="kutlama()" value="mesaj göster">
</form>
</body>
</html>
|
Buton tıklandığında kutlama fonksiyonu çalışacak ve statusbar üzerinde window.status = " ben status bar'ım :) " komutuyla mesaj görünecektir. |
| |