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 10 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 Nesnesi
Pencere nesnesi,
JavaScript nesnele hiyerarşisinde en tepede yer almaktadır. Daha
önceki Pencere Komutları sayfasında bir bakıma bu konuya giriş
yapmıştık. Şimdi o sayfadan devam edelim:
alert(...) Uyarı kutusuyla kullanıcıya mesaj gönderir.
alert("Bu sayfa henüz hazırlanmamıştır!")
confirm(...) Onay kutusuyla kullanıcı tarafından yönlendirilme
olanağı tanır.
confirm("Sayfaya girmek istiyor musunuz?")
prompt(...) Yazı kutusuyla kullanıcıdan bilgi alır.
prompt("Yaşınızı girin lütfen!","Buraya...")
window.open(...) Özelliklerini belirleyebileceğiniz yeni bir sayfa
açar.
window.open("http://www.imdb.com", "sinema", "toolbar=0, menubar=0,
resizable=1")
location Sayfaya yönlendirmeyi sağlar.
location = "http://www.imdb.com"
location.reload() Sayfayı yeniden yüklemeye (refresh) yarar.
location.reload()
window.close Pencereyi kapatır.
window.close
window.status Pencere kutusuna yazı yazmayı sağlar.
window.status = "Sayfama hoş geldiniz."
Ve pencere komutları bütün hızıyla devam ediyor...
Ekran Komutları
Kullanıcıların ekranı hakkında bilgiler almak isteyebiliriz.
Bunun için aşağıdaki screen (ekran) komutları kullanılır. Not: Ekran
ile monitörün farklı şeyler olduğunu aklınızda tutun.
screen.width Kullanıcının ekran genişliğini piksel cinsinden ifade
eder.
screen.width
screen.height Kullanıcının ekran yüksekliğini piksel cinsinden ifade
eder.
screen.height
screen.availWidth Kullanıcının kullanılabilir ekran genişliğini
piksel cinsinden ifade eder.
screen.availWidth
screen.availHeight Kullanıcının kullanılabilir ekran yüksekliğini
piksel cinsinden ifade eder.
screen.availHeight
screen.colorDepth Kullanıcının kullandığı renk derinliğini bit (byte)
cinsinden ifade eder.
screen.colorDepth
Javascript:
<html>
<head>
<title>Ekran Değerleri</title>
<script language="JavaScript">
function etiket()
{
baslik.innerHTML="Ekran Değerleri"
}
function ekran(kosul)
{
switch(kosul)
{
case 1: baslik.innerHTML="Ekran genişliği: " + screen.width +
"piksel"
break
case 2: baslik.innerHTML="Ekran yüksekliği: " + screen.height +
"piksel"
break
case 3: baslik.innerHTML="Kullanılabilir ekran genişliği: " + screen.availWidth
+ "piksel"
break
case 4: baslik.innerHTML="Kullanılabilir ekran yüksekliği: " +
screen.availHeight + "piksel"
break
case 5: baslik.innerHTML="Ekran renk derinliği: " + screen.colorDepth
+ "bit"
break
case 6: baslik.innerHTML="Ekran çözünürlüğü: " + screen.width + "x"
+ screen.height + "piksel"
}
}
</script>
</head>
<body>
<h2 id="baslik" >Ekran Değerleri</h2>
<a href="denjstg1.html" onmouseover="ekran(1)" onmouseout="etiket()">Ekran
genişliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(2)" onmouseout="etiket()">Ekran
yüksekliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(3)" onmouseout="etiket()">Kullanılabilir
ekran genişliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(4)" onmouseout="etiket()">Kullanılabilir
ekran yüksekliği.</a><br>
<a href="denjstg1.html" onmouseover="ekran(5)" onmouseout="etiket()">Ekran
çözünürlüğü.</a><br>
<a href="denjstg1.html" onmouseover="ekran(6)" onmouseout="etiket()">Ekran
renk derinliği.</a><br>
</body>
</html>
Bundan sonra uygulamalarımız biraz daha uzun olacak. Amacım
kullanıcıları CSS, HTML ve JavaScript`i beraber kullanmaya
ısındırmak. Şimdi çok sorulan bir kodu göstereyim: Kullanıcının
çözünürlüğüne göre sayfa yönlendirme:
Javascript:
<html>
<head>
<title>Çözünürlük değerine göre sayfa yönlendirme...</title>
<script language="JavaScript">
function yonlendir()
{
var x=screen.width //Yönlendirilecek sayfaları tanımlıyoruz.
var sayfa640x480="sayfa1.html"
var sayfa800x600="sayfa2.html"
var sayfa1024x768="sayfa3.html"
switch(x)
{
case 640: window.location.href=sayfa640x480
break
case 800: window.location.href=sayfa800x600
break
case 1024: default: window.location.href=sayfa1024x768
}
}
</script>
</head>
<body onload="yonlendir()">
</body>
</html>
Ekran hakkında yukarıdaki bilgilerden başka, pencerenin ekrana olan
yatay ve düşey uzaklıklarını da ifade edebiliyoruz: screenLeft (sola
yatay uzaklık), screenTop (sağa yatay uzaklık):
Javascript:
<html>
<head>
<title>Pencere Koordinatları</title>
<style>
table {visibility: hidden}
</style>
<script language="JavaScript">
function konum()
{
var x, y
x = screenLeft
y = screenTop
tablo.style.visibility="visible"
baslik1.innerHTML="Pencerenin, ekranın sol kenarına yatay uzaklığı:
" + x + " piksel"
baslik2.innerHTML="Pencerenin, ekranın üst kenarına düşey uzaklığı:
" + y + " piksel"
}
</script>
</head>
<body>
Pencerenin ekrana olan koordinatlarını bilmek istiyorsanız, düğmeye
basın.
<form>
<input type="button" value="Koordinatlar" onclick="konum()">
</form>
<table id="tablo" cellpadding="3" cellspacing="0" border="1" bgcolor="3399cc">
<tr><td>
<a id="baslik1">yatay</a></td></tr>
<tr><td>
<a id="baslik2">düşey</a>
</td></tr></table>
</body>
</html>
Bu uygulamamızda, düğmeye basıldığında pencerenin ekrana olan yatay
ve düşey mesafelerini ediniyoruz. Düğmeye bastıktan sonra pencereyi
ekranın başka bir bölümüne taşıyın ve bir daha düğmeye basın. Bu
uygulamada CSS derslerinden tanıdığımız visibility özelliğini
kullanarak tabloyu başta sakladık, sonra da JavaKodlarıyla tabloyu
görünür yaptık. Bu yöntemin hoşunuza gittiğini umuyorum.
Pencere Boyutları
Penceremizin boyutlarını JavaScript kodları kullanarak
istediğimiz ölçüye getirebiliriz. Bunun için resizeTo(..., ...) kodu
kullanılır. Parantez içindeki ilk veri pencerenin genişlik değerini,
ikinci veri ise pencerenin uzunluk değerini (piksel cinsinden) ifade
ediyor. Uygulamamıza geçelim:
Javascript:
<html>
<head>
<title>Pencere Konumu</title>
<script language="JavaScript">
function yeniboyut()
{
var x=prompt("Pencere genişlik değerini girin lütfen...","piksel
cinsinden")
var y=prompt("Pencere yükseklik değerini girin lütfen...","piksel
cinsinden")
window.resizeTo(x,y)
baslik1.innerHTML="Pencere genişliği: " + x + " piksel"
baslik2.innerHTML="Pencerenin yüksekliği: " + y + " piksel"
}
</script>
</head>
<body onload="yeniboyut()">
<table cellpadding="3" cellspacing="0" border="1" bgcolor="3399cc">
<tr><td>
<a id="baslik1">yatay</a></td></tr>
<tr><td>
<a id="baslik2">düşey</a>
</td></tr></table>
<b>F5</b>`e basarak, pencere genişliğini yeniden ayarlayabilirsiniz.
</body>
</html>
Uygulamamız herşeyi anlatıyor sanırım. resizeTo ile pencerenin
konumlarını istediğimiz değerlere getiriyoruz. Şimdiki kodumuz
resizeBy(..., ...) ise pencere boyutunu parantez içinde yer alan
piksel değerleriyle artırmaya (negatif piksel değerleriyle
azaltmaya) yarıyor. Önceki uygulamamızdaki resizeTo(x,y) yerine
resizeBy(x,y) ifadesi koyarsanız, uygulama yürürlükteki pencereyi
artırma (negatif değer koyarsanız azaltma) işlemi yaparsınız.
Penceredeki sayfa boyutu, pencereninkinden büyükse, kayma kutuları (scrollbars)
kullanılır. JavaScript kodlarıyla sayfayı kaydırmak istiyorsak
scroll(..., ...) komutunu kullanırız. Örneğin window.scroll(0,300)
kodu ile penceredeki sayfanın, en tepeden 300 piksel aşağıya
kaymasını sağlarız. Aynı işlevi gören scrollTo komutunu da
kullanabiliriz. Sayfanın yürürlükteki konumundan aşağıya kaymasını
istiyorsak, scrollBy komutunu kullanırız. (Kendi kayar kutularını (scrollbars)
kendileri yapmak isteyenlerin dikkatine...). Bu komutlarla ilgili
şimdilik uygulama yapmayım, hem anlamış olduğunuzu düşünüyorum, hem
de ileri de bu komutların da yer aldığı ileri JavaScript
uygulamaları yapacağız.
Pencere Konumu
Pencere nesnesinin ekrana göre konumunu screenLeft ve screenTop
kodları ile belirleyebiliyorduk. Peki pencereyi istediğimiz konuma
JavaScript kodlarıyla nasıl getiririz? Sorunun cevabı: moveTo ve
moveBy kodları. moveTo komutu ile pencerenin sol üst köşesini
istediğimiz koordinatlara getirebiliyoruz, moveBy ise pencerenin sol
üst köşesini istenen miktarda hareket ettirmeye yarıyor.
Javascript:
<html>
<head>
<title>Pencere Ortalama</title>
<script language="JavaScript">
function boyut()
{
window.resizeTo(300,200)
}
function ortala()
{
var x=screen.availWidth
var y=screen.availHeight
window.moveTo(x/2-150, y/2-100)
}
</script>
</head>
<body onload="boyut()">
<form>
<input type="button" value="ortala" onclick="ortala()">
</form>
</body>
</html>
Bu uygulamamızda pencerenin 300x200 piksel boyutlarında açılmasını
sağlıyoruz. Düğmeye atanana ortala() fonksiyonu ile, önce kullanıcı
ekranının boyutlarını öğreniyoruz, sonra ekranı ortalayacak şekilde;
moveTo() komutu ile pencerenin sol üst köşesini hareket ettiriyoruz.
Zaman Aralığı
Fonksiyonu harekete geçiren olayın oluşmasından belli miktar
zaman geçtikten sonra birşey oluşmasını istiyorsak, setTimeout(...,
...) komutu kullanılır. Örneğin bir düğmeye basıldıktan sonra uyarı
kutusunun çıkmasını istiyorsak:
setTimeout("alert(`Bu mesaj 3 saniye sonra çıkar.`)", 3000)
İlk değer parantez içinde bir JavaScript kodudur, ikinci değer ise
ilk değerin ne kadar süre sonra oluşacağını belirleyen, mili saniye
cinsinden zaman değeridir. (1 saniye = 1000 mili saniye) Bu komut
ile uyarı kutusu 3 saniye bekledikten sonra görünecektir. Aşağıdaki
uygulamamıza bakalım:
Javascript:
<html>
<head>
<title>Pencere Dansı</title>
<script language="JavaScript">
function boyut()
{
for(var i=0; i<=10; i+=2)
{
setTimeout("window.resizeTo(400,100)", i*1000)
setTimeout("window.resizeTo(100,400)", (i+1)*1000)
}
}
</script>
</head>
<body onload="boyut()" bgcolor="crimson">
Bu işlem sadece 12 saniye sürer.
</body>
</html>
Bu uygulamamızda; 12 saniye boyunca, sayfanın boyutları saniyede bir
değişmektedir.
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