Merhaba, Bu yazı Document Object Model (DOM) yazımızın devamı olacak.

Window Özelliği

Bu özelliğimiz sayfamızın açıldığı tarayıcı penceresini ifade eder. Bu özelliğin sahip olduğu alt özellikler sayesinde ziyaretçilerimize bilgi verebilir veya onlardan bilgi alabiliriz.

alert() Özelliği

Bu özellik ile kullanıcıya bir mesaj kutusu çıkartıyoruz. Bunu daha önceki JavaScript yazılarımızda sıkça kullanmıştık. Bu özelliği ziyaretçilerimize bir bilgi vermek veya belirli durumlarda uyarmak için kullanabiliriz.

alert('Mesajınız');

Bu şekilde bir script yazıp çalıştırdığımızda karşımıza bir mesaj kutusu içerisinde Mesajınız yazar. Bunu değişkenler veya fonksiyonlar kullanarak da yapabiliriz.

var mesaj = 'Test Mesajı';
alert(mesaj);

prompt() Özelliği

Önceki özelliğimize benzer olarak prompt() özelliğimiz de bir mesaj kutusu çıkartır. Ancak burada farklı olarak kullanıcıya mesaj vermek ile birlikte kullanıcıdan bilgi de talep etme imkanımız olur. Verdiği bilgiyi scriptimiz içerisinde kullanabiliriz.

<!DOCTYPE html>
<html>
<body>

<p id="test"></p>

<script>
  var person = prompt("Lütfen adınızı yazın");
  if (person != null) {
    document.getElementById("test").innerHTML =
    "Merhaba " + person + "! Bugün nasılsın?";
  }
</script>

</body>
</html>

prompt() içerisinde kullandığımız ilk tırnak işareti kullanıcıya mesaj vermemizi sağlar. Burada biz ‘Lütfen adınızı yazın’ şeklinde kullandık prompt('Lütfen adınızı yazın','Ad Soyad');şeklinde virgülle ayrılmış iki tırnak kullansaydık burada mesaj kutusunun içine otomatik olarak Ad Soyad yazmış olurduk.

confirm() Özelliği

Bu özelliğimizi kullanarak, kullanıcıya ‘Tamam’ veya ‘İptal’ seçenekleri sunan bir mesaj kutusu çıkartıyoruz. Örnek olarak bir silme düğmesi yapıp Silmek istediğinize emin misiniz? diye bir ön uyarı verebiliriz. Tamam derse programımızın silme işlemini gerçekleştirmesini, İptal derse silme işlemini iptal etmesini sağlayabiliriz.

Tamam seçeneği seçilirse alınacak değer ‘true’ , İptal seçilirse alınacak değer ‘false’ olacaktır.

var sonuc = confirm("JavaScript'i seviyor musun?");
if(sonuc == true){
    alert("O halde çok çalışıp tüm özellikleriyle öğrenmeye devam et!");
}else{
    alert("Kodlama dünyasında sevebileceğin başka diller de var, göz gezdir!");
}

open() Özelliği

JavaScript kullanarak yeni bir pencere açmak için kullanacağımız özelliktir. Bu özelliğe bazı nitelikler tanımlayabiliyoruz. Biz genişlik ve yükseklik değerlerini görelim:

  • width: Açacağımız pencerenin genişliği. (width=300 şeklinde)
  • height: Açacağımız pencerenin yüksekliği. (height=300 şeklinde)
<!DOCTYPE html>
<html>
<body>

<p>Düğmeye tıklayarak yeni pencereyi açabilirsiniz.</p>

<button onclick="fonksiyonum()">Tıkla</button>

<script>
function fonksiyonum() {
  var pencerem = window.open("", "pencerem", "width=400,height=400");
  pencerem.document.write("<p>İşte 'pencerem' açıldı.</p>");
  pencerem.opener.document.write("<p>Kaynak pencere içeriği.</p>");
}
</script>

</body>
</html>

moveBy() Özelliği

Açılan pencerenin konumunu bu fonksiyonla değiştiriyoruz. İlk parametremiz sağ veya sol yönde değeri ikinci parametre yukarı veya aşağı yönde değeri yazmamıza olanak tanır.

<!DOCTYPE html>
<html>
<body>

<p>Yeni Pencere Aç düğmesine tıklayarak pencerenin açılmasını, Yeni Pencereyi Taşı düğmesine tıklayarak pencerenin 250,250 oranında hareket etmesini sağlayabilirsiniz:</p>

<button onclick="pencereAc()">Yeni Pencere Aç</button>
<button onclick="pencereTasi()">Yeni Pencereyi Taşı</button>

<script>
var pencerem;

function pencereAc() {
  pencerem = window.open("", "pencerem", "width=200, height=100");
  pencerem.document.write("<p>Bu yeni 'pencerem' penceresi.</p>");
}

function pencereTasi() {
  pencerem.moveBy(250, 250);
  pencerem.focus();
}
</script>

</body>
</html>

moveTo() Özelliği

moveTo fonksiyonu işlev olarak moveBy ile aynı işlevi görür. Ancak moveBy fonksiyonu pencereyi mevcut konumuna göre verilen değer kadar hareket ettirirken, moveTo özelliği doğrudan verilen koordinatlara gitmesini sağlar.

<!DOCTYPE html>
<html>
<body>

<p>Yeni Pencere Aç düğmesine tıklayarak pencerenin açılmasını, Yeni Pencereyi Taşı düğmesine tıklayarak pencerenin 500,100 koordinatlarına taşınmasını sağlayabilirsiniz:</p>

<button onclick="pencereAc()">Pencereyi Aç</button>
<button onclick="pencereTasi()">Pencereyi Taşı</button>

<script>
var pencerem;

function pencereAc() {
  pencerem=window.open("", "pencerem", "width=200, height=100");
  pencerem.document.write("<p>Bu yeni 'pencerem' penceresi.</p>");
}

function pencereTasi() {
  pencerem.moveTo(500, 100);
  pencerem.focus();
}
</script>

</body>
</html>

resizeBy ve resizeTo Özelliği

Bu özellikler açılan pencerenin ölçülerini değiştirmek için kullanılır. resizeBy mevcut ölçüsüne göre ne kadar artırılacağını parametre olarak alırken, resizeTo özelliği net bir şekilde büyütülmesi gereken genişlik ve yükseklik oranlarını verir.

<!DOCTYPE html>
<html>
<body>

<p>Pencereyi oluşturup resizeTo düğmesiyle 250,250 boyutlarına ayarlayabilirsiniz. resizeBy düğmesiyle 50,50 büyütebilirsiniz:</p>

<button onclick="pencereac()">Pencere Oluştur</button>
<button onclick="pencereboyutlandir()">Pencere Boyutlandır (resizeTo)</button>
<button onclick="pencereboyutlandir2()">Pencere Boyutlandır (resizeBy)</button>

<script>
var pencerem;

function pencereac() {
  pencerem = window.open("", "", "width=100, height=100");
}

function pencereboyutlandir() {
  pencerem.resizeTo(250, 250);
  pencerem.focus();
}

function pencereboyutlandir2() {
  pencerem.resizeBy(50, 50);
  pencerem.focus();
}
</script>

</body>
</html>

close() ve closed() Özelliği

close özelliği bir pencereyi kapatmak için kullanılır. closed fonksiyonu ile de pencerenin kapalı olup olmadığını kontrol edebiliriz.

<!DOCTYPE html>
<html>
<head>
<script>
var pencerem;

function pencereAc() {
  pencerem = window.open("", "pencerem", "width=400, height=200");
}

function pencereKapat() {
  if (pencerem) {
    pencerem.close();
  }
}

function pencereKontrol() {
  if (!pencerem) {
    document.getElementById("msg").innerHTML = "'pencerem' açılmadı!";
  } else {
    if (pencerem.closed) { 
      document.getElementById("msg").innerHTML = "'pencerem' kapandı!";
    } else {
      document.getElementById("msg").innerHTML = "'pencerem' kapanmadı!";
    }
  }
}
</script>
</head>
<body>

<button onclick="pencereAc()">Aç "pencerem"</button>
<button onclick="pencereKapat()">Kapat "pencerem"</button>
<br><br>
<button onclick="pencereKontrol()">"pencerem" kapandı mı?</button>
<br><br>
<div id="msg"></div>

</body>
</html>

print() Özelliği

Sayfayı yazdırmak için kullandığımız fonksiyondur.

window.print();

setTimeout Özelliği

Scripti çalıştırmak için belirli bir zaman (milisaniye cinsinden) atamak istiyorsak setTimeout özelliğimizi kullanırız.

setTimeout(function(){ alert("Merhaba"); }, 3000);

clearTimeout Özelliği

setTimeout ile belirlediğimiz işlemi henüz script çalışmadan durdurmak için clearTimeout kullanırız.

<!DOCTYPE html>
<html>
<body>

<p>İlk olarak Mesaj düğmesine tıklayarak 3 saniye sonra mesaj ekranının açıldığını inceleyin.</p>
<p>Ardından tekrar Mesaj düğmesine tıklayıp henüz 3 saniye dolmadan Mesajı Durdur düğmesine tıklayın. Mesajın çalışmadığını göreceksiniz.</p>

<button onclick="fonksiyonum()">Mesaj</button>
<button onclick="fonksiyonudurdur()">Mesajı Durdur</button>

<script>
var scriptim;

function fonksiyonum() {
  scriptim = setTimeout(function(){ alert("Merhaba"); }, 3000);
}

function fonksiyonudurdur() {
  clearTimeout(scriptim);
}
</script>

</body>
</html>

setInterval ve clearInterval Özelliği

Bu özellik setTimeout ile benzerlik gösterir. Belirli bir süre sonra (milisaniye cinsinden) bir eylemi gerçekleştirmesini söyleriz. Ancak setTimeout özelliğimizden farklı olarak setInterval özelliğimiz her x saniyede bir işlemi tekrar gerçekleştirir. clearInterval özelliği de bu döngüyü durdurmaya yarar.

<!DOCTYPE html>
<html>
<body>

<p>Mesajı Aç düğmesi ile 3 saniyede bir ekrana Merhaba kutusu çıkartabilirsiniz.</p>
<p>Mesajı Durdur düğmesine tıklayarak bu döngünün son bulmasını sağlayabilirsiniz.</p>
<button onclick="mesajKutusu()">Mesajı Aç</button>
<button onclick="kutuyuDurdur()">Mesajı Durdur</button>

<script>
function mesajKutusu() {
  mesaj = setInterval(function(){ alert("Merhaba"); }, 3000);
}

function kutuyuDurdur() {
  clearInterval(mesaj);
}
</script>

</body>
</html>