Java Script Pencere Komutları

Bu sayfaya kadar
JavaScript`in temellerini öğrenmek için alert(...) ve document.write(...)
komutlarıyla idare ettik. Artık JavaScript`in kodlarına ve
inceliklerine ağırlık vereceğiz.

Bu sayfanın konusu pencere komutları. Birçok öğretici site pencere
komutlarını sonlara doğru anlatmış. Ama bence bu konu çok zevkli ve
daha önce anlatarak okuyucuları JavaScript`in renkli dünyasına daha
kolay çekmek mümkün. Hem neler yapabileceklerini zihinlerinde
düşünmeye başlattırabilecek bir konu bu. Sanırım konuyu yeterince
övdüm. Sayfamız bir sürü örnekle dolu. Seveceğinizi umarım

Uyarı Kutusu

İlk pencere komutumuz alert(...) kodu. 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ı uyarı kutusuyla gösterebiliyorduk ve "+" işareti ile
bunları birleştirebiliyorduk. Şimdi küçük bir tekrar uygulaması
yapalım.

Javascript:

<html>

<head>

<title>Uyarı Kutusu</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function kup()

{

var y

y = 59 * 59 * 59

alert("59 sayısının kübü = " + y)

}

</script>

</head>

<body>

<form>

59 sayısının kübünü öğrenmek istiyorsanız düğmeye basın.<br>



<input type="button" onclick="kup()" value="Sayının kübünü al!">

</form>

</body>

</html>

Onay Kutusu

Uyarı kutusu haricinde kullanabileceğimiz bir başka pencere
aracı da onay kutusudur. Bu kutu ile kullanıcının onayı alınır. Bu
kutuyu yaratmak için confirm(...) komutunu bir değişkene eşitleriz.
Kullanıcının onayı true, onay vermemesi ise false şeklinde
ifadelendirilir. Uygulamamıza bakalım.

Javascript:

<html>

<head>

<title>Onay Kutusu</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function bomba()

{

var onay

onay = confirm("Mars gezegenine doğrulttuğunuz nükleer bombalar
hazır. Gezegeni yok etmek için onay verin.")

if (onay == true) document.write("Koskoca gezegeni yok ettin de
eline ne geçti?")

else document.write("Yok etme operasyonu iptal edildi, tüm Marslılar
size teşekkür ediyor.")

}

</script>

</head>

<body>

<form>

Nükleer bombaları ateşlemek için düğmeye basınız.<br>



<input type="button" onclick="bomba()" value="ATEŞ!">

</form>

</body>

</html>

Yazı Kutusu

Hemen bir başka pencere komutuna geçiyorum. Kullanacağımız
pencere aracı yazı kutusu. Yazı kutusu sayesinde kullanıcıyla
program arasında bir veri alışverişi yapılır. Kullanıcı kutusu,
tıpkı onay kutusu gibi bir değişkene eşitlenir ve prompt(...,...)
komutu ile ifade edilir. Görüldüğü üzere prompt komutu iki değer
alır. İlk değer yazı kutusunda yer alan bilgi verici yazıyı
belirler, ikinci değer ise yazı kutusunun yazma yerinde yer alan
yazıyı belirler, bu yazı genellikle girdi bilgisi içerir.
Kullanıcının yazdığı yazı, prompt komutunun eşitlendiği değişkene
değer olarak atanır. Yazı kutusunda Cancel (iptal) düğmesi yer
almaktadır. Kullanıcı bu düğmeye bastığında değişken null (sıfır
yani) değeri alacaktır.

Javascript:

<html>

<head>

<title>Yazı Kutusu</title>

<script language="JavaScript">

//İlk fonksiyonu hazırlıyoruz.

function kabul()

{

alert("İçeri girebilirsin.")

document.write("<h1>Barımıza Hoşgeldiniz!</h1>")

}

//İkinci fonksiyonu hazırlıyoruz.

function red()

{

alert("Hoop ufaklık. Bas geri!")

document.write("<h1>18 yaşından küçükler giremez!</h1>")

}

//Üçüncü fonksiyonu hazırlıyoruz.

function geri()

{

alert("Cevap veremiyorsun değil mi?")

document.write("<h1>Evine dön!</h1>")

}

</script>

</head>

<body>

<script language="JavaScript">

var yas= prompt("Yaşınız kaç acaba?","Lütfen yaşınızı rakam ile
yazınız...")

if (yas >= 18) kabul()

if (yas < 18 && yas > 0) red()

if (yas == null || yas == "") geri()

</script>

</body>

</html>

Yeni Pencere Açma

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.

Javascript:

<html>

<head>

<title>Yeni Pencere, yeni sayfa.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function pencere()

{

//Açılacak sayfanın dosya ismi: dersjscr.asp

window.open("dersjscr.asp") }

</script>

</head>

<body>

<form>

JavaScipt`e giriş sayfasını açmak için düğmeye basın.<br>



<input type="button" onclick="pencere()" value="JavaScript`e Giriş">

</form>

</body>

</html>

Bu uygulamayı çok rahat anlamışsınızdır, bu uygulamada kod
varsayılan değerleriyle biçimlendiriliyor. Ama şimdiki uygulamayı
çok dikkatli inceleyin, uygulamadan sonra gerekli açıklamayı
yapacağım.

Javascript:

<html>

<head>

<title>Yeni Pencere, yeni sayfa.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function pencere()

{

//Açılacak sayfanın dosya ismi: dersjscr.asp

window.open("dersjscr.asp", "Yeni_Sayfa", "toolbar=no,location=no,directories=no,
status=no, menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460") }

</script>

</head>

<body>

<form>

JavaScipt`e giriş sayfasını açmak için düğmeye basın.<br>



<input type="button" onclick="pencere()" value="JavaScript`e Giriş">

</form>

</body>

</html>

Bu uygulamadaki pencere açma komutu biraz daha değişik: open.window(dosya
adresi, pencere ismi, pencere özellikleri). Aşağıdaki listede
pencere özelliklerini ve açıklamalarını görüyorsunuz:

menubar Pencerenin üst bölümünde yer alan gözatıcı (browser) menü
çubuğunu ifade eder.

menubar=yes

status Pencerenin alt bölümünde yer alan küçük mesajları ifade eder.

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 Pencerenin üstünde, menü çubuğunun altında yer alan gözatıcı
araç çubuğunu ifade eder.

menubar = no

location Pencerenin adres kutusunu ifade eder.

location = 600

directories Netscape gözatıcılarının "What`s new!", "What`s cool!"
isimli dizinlerini ifade eder.

directories = no

left Pencerenin ne kadar solda yer alacağını belirler; Netscape göz
atıcıları desteklemiyor.

left = 100

screenX Pencerenin ne kadar solda yer alacağını belirler; Internet
Explorer göz atıcıları desteklemiyor.

screenX = 100

top Pencerenin ne kadar üstte yer alacağını belirler; Netscape göz
atıcıları desteklemiyor.

top = 50

screenY Pencerenin ne kadar üstte yer alacağını belirler; Internet
Explorer göz atıcıları desteklemiyor.

screenY = 50

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.

Çok Sayıda Pencere Açma

Birden fazla pencereyi tek tıklamayla nasıl açarız? Her pencere açma
komutunu bir değişkene eşitleyen fonksiyon kurarız:

Javascript:

<html>

<head>

<title>Yeni pencereler.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function pencere()

{

//Sayfalar açılıyor.

a1 = window.open("dersjscr.asp?DersNo=1", "Ders1", "toolbar=no,location=no,directories=no,
status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460")

a2 = window.open("dersjscr.asp?DersNo=2", "Ders2", "toolbar=no,location=no,directories=no,
status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460")

a3 = window.open("dersjscr.asp?DersNo=3", "Ders3", "toolbar=no,location=no,directories=no,
status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460")

a4 = window.open("dersjscr.asp?DersNo=4", "Ders4", "toolbar=no,location=no,directories=no,
status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460")

a5 = window.open("dersjscr.asp?DersNo=5", "Ders5", "toolbar=no,location=no,directories=no,
status=no, menubar=no,scrollbars=yes,resizable=no,copyhistory=yes,width=760,
height=460")

}

</script>

</head>

<body>

<form>

JavaScipt derslerinin ilk beş sayfasını açmak için düğmeye basın.<br>



<input type="button" onclick="pencere()" value="JavaScript
Dersleri">

</form>

</body>

</html>

Sayfa Yönlendirme

JavaScript kullanarak mevcut pencerede kullanıcının istenen
sayfaya yönlendirilmesi için location = "adres" komutunu kullanırız:

Javascript:

<html>

<head>

<title>Sayfa yönlendirme.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function yonlendir()

{

//Yönlendirilecek adres: dersjscr.asp?DersNo=1

location = "dersjscr.asp?DersNo=1"

}

</script>

</head>

<body>

<form>

Pencerenizi "JavaScipt`e Giriş" sayfasına yönlendirmek için düğmeye
basın.<br>



<input type="button" onclick="yonlendir()" value="JavaScript`e
Giriş">

</form>

</body>

</html>

Sayfayı Yeniden Yükleme

JavaScript kullanarak sayfanın yeniden yüklenmesini (refresh)
sağlamak için location.reload() komutundan yararlanılır.

Javascript:

<html>

<head>

<title>Sayfa yönlendirme.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function tazele()

{

//Yönlendirilecek adres: derjsct1.html

location.reload()

}

</script>

</head>

<body>

<form>

Sayfayı yeniden yüklemek için aşağıdaki düğmeye basınız.<br>



<input type="button" onclick="tazele()" value="Sayfayı yeniden
yükle">

</form>

</body>

</html>

Çok Sayfalı Uygulama Geliştirme

Buraya kadar hep önceden hazırlanmış sayfaları açmayı inceledik.
Peki daha önce olmayan bir sayfayı açabilir miyiz? Soruyu daha doğru
bir şekilde sorayım: JavaScript ile yazıların bir kısmını yeni bir
pencerede yazdırabilir miyiz? Elbette. open.window("...","...","...")
komutundaki ilk yere sayfa adresi yazıyorduk; eğer yazmazsak yeni
bir sayfa açılmış olur. Bu kodu bir değişkene eşitleyerek, yeni
sayfanın ismini belirlemiş oluruz ve o sayfaya yazılması
gerekenleri, o isimle tanımladığımız nesnelere yazarız. Uygulamayı
inceleyince anlayacaksınız.

Javascript:

<html>

<head>

<title>Dokümanları başka sayfada gösterme.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function yenipencere()

{

//Yepyeni bir sayfa açıyoruz.

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!")

yenisayfa.document.write("<br>Bu yöntemle daha neler yapılır,
neler!")

}

</script>

</head>

<body>

<form>

Başka bir sayfa yaratmak için düğmeye basın.<br>



<input type="button" onclick="yenipencere()" value="Yeni Pencere">

</form>

</body>

</html>

Pencere Kapatma

Bu ders konumuz gereği bir sürü sayfayı JavaScript ile açtık ama
hepsini elimizle kapattık. İsterseniz bir de JavaScript`le
kapatalım. Komutumuz çok basit: window.close().

Javascript:

<html>

<head>

<title>Sayfayı kapatmak.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function kapat()

{

//Sayfa kapatılıyor.

window.close()

}

</script>

</head>

<body>

<form>

Sayfayı kapatmak için aşağıdaki düğmeye basınız.<br>



<input type="button" onclick="kapat()" value="Sayfayı kapat">

</form>

</body>

</html>

Pencere Kutusu

Son olarak window.status komutu üzerinde duralım. Pencerenin
altında linklerin yazılı olduğu kutucuğa yazı yazmaya yarar. Örneğin
"Doğum günün kutlu olsun Banu" yazdıralım.

Javascript:

<html>

<head>

<title>Sayfayı kapatmak.</title>

<script language="JavaScript">

//Fonksiyonu hazırlıyoruz.

function kutlama()

{

//Sayfa kapatılıyor.

window.status = "Doğum günün kutlu olsun Banu"

}

</script>

</head>

<body>

<form>

Düğmeye basarsanız pencerenin alt kısmında bir mesaj göreceksiniz.<br>



<input type="button" onclick="kutlama()" value="Banu`ya mesaj">

</form>

</body>

</html>

Bu bölümde pencerelerle ilgili windows. başlangıçlı bazı kodlar
gördük.

Eğitim hmtl kodları java script java script pencere komutları

Hancı Eğitim

Java Script Pencere Komutları

Java Script Dersleri

Ara

Eğitim

Konular

Tags