Webmaster
Tasarım Dersleri
Kullanıcı girişi
Kimler çevrimiçi
Son yorumlar
- tamadır teşekkür ederim :)
1 hafta 6 days önce - CVP:arkadaşım sen iyi niyetimi
1 hafta 6 days önce - arkadaşım sen iyi niyetimi
2 weeks 9 hours önce - CVP:şu cevabınn
2 weeks 1 gün önce - şu cevabınn
2 weeks 1 gün önce - CVP:Makaleniz hakkında
2 weeks 2 days önce - Makaleniz hakkında
2 weeks 2 days önce - oldukça güzel görünüyor. Bİz
3 weeks 21 hours önce - sanal kontör
3 weeks 4 days önce - Cozum bulundu mu?
5 weeks 4 days önce
Etiket bulutu
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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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>
<!--Düğmeye basıldığında fonksiyon çağrılır.-->
<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.
Anket
Son Konular
2012-03-22 19:47 - Geliştirdiğin kodları satmak ister misin
2012-02-12 23:21 - SMF forumu vbulletin foruma aktarmak
2011-12-14 21:50 - Motorlu araçlar otomobil vergisi sorgulama
2011-12-14 21:47 - Sorgulamalar
2011-12-11 14:33 - Ben az önce ne arayacaktım
2011-09-10 22:51 - DSLR Fotograf Makinası sınıflandırması
2011-09-09 17:33 - ‘Crop Factor’ Nedir, hakkında bilgi
2011-09-09 17:30 - Fotograf Rehberi
2011-08-20 21:30 - Samsung LEDTV'lerde .SRF ve XFS süprizi
2011-08-19 00:45 - 2011 yılının web tasarım trendleri
2011-04-09 20:18 - Alan adları gerçek isim sahiplerine verilecek!
2011-01-13 01:43 - SEO İçin Dikkat Edilmesi Gereken Hususlar
2011-01-13 01:42 - Meta tag SEO Optimization
2011-01-13 01:41 - Google Adsense Hakkında Detaylı Bilgi
2011-01-13 01:40 - Soru Ve Cevaplar ile Google Adsense
2011-01-13 01:39 - Arama motoru Google ve Pagerank
2011-01-13 01:38 - Seo Sözlüğü
2011-01-13 01:37 - Google Arama Özellikleri
2011-01-13 01:36 - Adsense Reklam Yerleşimi
2011-01-13 01:35 - Robots.txt Dosyası Kullanım Robotları Yölendirme Kontrol
2011-01-13 01:34 - Sitenizin Google ve Web deki Yeri
2011-01-13 01:33 - Arama Motoru Bilgi ve İpuçları
2011-01-13 01:31 - Arama Motorları Teknikleri
2011-01-13 01:29 - Google Pagerank Detaylı Anlatım
2011-01-13 01:27 - Sitenize Ziyaretçiler En Çok Hangi Kelimeler İle Gelmiş
2011-01-13 01:25 - Pagerank Nedir?
2011-01-13 01:19 - Fireworks Shadow and Glow
2011-01-13 01:18 - Fireworks Sharpen
2011-01-13 01:16 - Fireworks Other
2011-01-13 01:13 - Fireworks Blur
2011-01-13 01:09 - Fireworks Bevel and Emboss
2011-01-13 01:05 - Fireworks Adjust Color
2011-01-13 01:03 - Fireworks Save as Style
2011-01-13 00:58 - Fireworks Text Menüsü
2011-01-13 00:54 - Fireworks Select Menüsü
2011-01-13 00:54 - Fireworks Modify Menüsü
2011-01-13 00:51 - Fireworks View Menüsü
2011-01-13 00:18 - Fireworks Edit Menüsü
2011-01-13 00:16 - Fireworks File Menüsü
2011-01-13 00:05 - İnternet - Web Tarayıcılar (Browser)
2011-01-13 00:04 - İnternet - Web Server Yazılımları
2011-01-13 00:03 - İnternet ve Web İlişkisi
2011-01-13 00:02 - İnternette Kullanılan Protokoller
2011-01-13 00:01 - İnternet - World Wide Web (WWW) Nedir?
2011-01-13 00:00 - İnternet - URL nedir?
2011-01-12 23:43 - İnternet Backorder Nedir?
2011-01-12 23:34 - İnternet - Virüs Nedir?
2011-01-12 23:32 - İnternet Paypal nedir? Nasıl Kullanılır?
2011-01-12 23:31 - İnternet - DNS Nedir?
Günün Konuları
CSS . html . css nedir . Linux . nasıl kurulur . internet . SCADA . MySQL nedir . domain piyasası . PHPRunner . PHPRunner kullanımı . PHPRunner hakkında bilgi . PHPRunner nedir . Top PHP Studio . Top PHP Studio indir . Top PHP Studio nedir . USB ADSL modem . kablosuz ağ . Ubuntu linux . Google Earth . Zone Alarm . CSS kodlama . HMI . HMI nedir . HMI nasıl kullanılır . Scada nedir . Scada nasıl kullanılır . Video . Cacti . Cacti nedir . Cacti kurulumu . Rsyslog . Rsyslog nedir . Rsyslog kurulumu . Nagios . Nagios nedir . Nagios kurulumu . Apache . Apache nedir . Apache kurulumu . MySQL kurulumu . Squid . Squid nedir . Squid kurulumu . Dansguardian . Dansguardian nedir . Dansguardian kurulumu . Postfix . Postfix nedir . Postfix kurulumu . Dovecot . Dovecot nedir . Dovecot kurulumu . Dbmail . Dbmail nedir . Dbmail kurulumu . OpenLDAP . OpenLDAP nedir . OpenLDAP kurulumu . ProFTP . ProFTP nedir . ProFTP kurulumu . Samba . Samba nedir . Samba kurulumu . BIND . BIND nedir . BIND kurulumu . dhcp3 server . DHCP . DHCP nedir . DHCP kurulumu . WIPO Kimdir . WIPO Nedir . WIPO . Aveamüzik Radyo . Sabit disk . Harddisk . Advanced Format nedir . kodlama .














Yeni yorum gönder