Javascript window nesnesi ile ilgili çözümlü sorular

11.03.2015
ilketkinlik
2850

Javascript window nesnesi ile ilgili örnek sorular ve çözümlerini web tasarım ve programlama dersinde kullanabilirsiniz.

Javascript window nesnesi ile ilgili çözümlü sorular

Soru 1: 300 x 300 boyutlarında, kaydırma çubukları olmayan pop up penceresini sayfa yüklendiğinde açan kodları yazınız?

<body onload = "siteac();">
   <script>
      function siteac() {
        window.open("http://www.ilketkinlik.com","test","width=300, height=300, scrollbars=no");
      }
   </script>
</body>

Soru 1.1: 500 x 300 boyutlarında, yukarıdan 200px boşluk, soldan 250px boşluk bırakarak bir butona basılınca pop up penceresini açan kodları yazınız?

<body>
<button onClick="siteac();">Pop up penceresi</button>
   <script>
      function siteac() {
        window.open("http://www.ilketkinlik.com","test","width=300, height=300,top=200,left=250");
      }
   </script>
</body>

Soru 2: Açık olan pencereyi "Kapat" butonuna basında kapatan script kodunu yazınız?

<body>
   <button onClick="kapat();">Kapat</button>
   <script>
       function kapat() {
         window.close(); }
   </script>
</body>

Soru 3: Açık olan pencerenin boyutlarını bulup "Görüntüle" butonuna basarak yazdıran script kodlarını yazınız?

<body>
    <p id="ekran"></p>
    <button onClick="pencere();">Pencere</button>
        <script>
             function pencere() {
                var genislik = window.innerWidth;
                var yukseklik = window.innerHeight;
                document.getElementById("ekran").innerHTML = "Pencerenin genişliği " + genislik + "px , yüksekliği " + yukseklik + "px dir."; }
        </script>
</body>

Soru 4: Açık olan pencerenin boyutlarını 500 x 350 olarak değiştiren kodu yazınız?

<body>
    <button onClick="pencereBoyutu();">Pencere boyutunu değiştir</button>
    <script>
         function pencereBoyutu() {
              window.resizeTo(500,350);  }
    </script>
</body>

Soru 4.1: 100 * 100 boyutlarında açılan pop up penceresinin boyutlarını 250 x 350 olarak değiştiren kodu yazınız?

<body>
    <button onClick="pencereac();">Pop up penceresini aç</button>
    <button onClick="pencereBoyutu();">Pencere boyutunu değiştir</button>
    
    <script>
       function pencereac() { 
            pencere = window.open("","","width=100, height=350"); }
       function pencereBoyutu() { 
            pencere.resizeTo(250,350); pencere.focus(); }
    </script>
</body>

Soru 5: Tarayıcının kaydırma çubuğu aşağıya doğru kaydırıldığında sağ üst köşede "yukarı git" bağlantısını oluşturan, yukarıya doğru çıkarıldığında bu bağlantıyı kaldıran script kodunu yazınız ? ( referans olarak 300px baz alınız)

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Yukarı git oku ekleme</title>
      <style>
          #ok {
              position: fixed;
              right:10px;
              top:40px;
              font:bold 14px arial;
          }
      </style>
</head>
<body>
       <p>Birden fazla paragraftan oluşan uzun bir sayfa içeriği ekleyin kaydırma çubuğunun çıkması için.</p>
       <script>
          var div = document.createElement("div");
          div.id = "ok";
          div.innerHTML = '<a href="#">yukarı git</a>';

          onscroll = function() {
                   var kaydirma = document.body.scrollTop;

                   if (kaydirma > 300) {
                      document.body.appendChild(div); }
                   if (kaydirma < 300) {
                      document.body.removeChild(div); }
                   }
       </script>
</body>
</html>

Soru 6: Sayfa üzerinde bulunan ürün görsellerine tıklayınca ürünün sepete eklenip eklenmeyeceğini onay kutusuyla kullanıcıya sorulsun. Eğer cevap "Tamam" ise "1 ürün sepete eklendi", eğer cevap "İptal" ise "Ürün eklenmedi" mesajı ekrana yazdırılsın? (Her tıklamada eklenen ürün sayısı 1 artırılsın)

<head>
    <style>
       .kutu {margin:20px auto; width:900px; text-align:center;}
       img {margin-right:20px; border:1px solid #d14545;}
       p {font:bold 14px Arial;}
       .temizle{clear:both} 
    </style>
</head>
<body>
<div class="kutu">
   <img src="ürün resmi ekleyiniz" alt="" onClick="urunEkle();">
   <img src="ürün resmi ekleyiniz" alt="" onClick="urunEkle();">
   <img src="ürün resmi ekleyiniz" alt="" onClick="urunEkle();">
   <img src="ürün resmi ekleyiniz" alt="" onClick="urunEkle();">
   <div class="temizle"></div>
   <p id="sepet"></p>
</div>
<script>
    var say = 0;
    function urunEkle() {
       var ekle = confirm("Bu ürünü sepete eklemek istiyormusunuz?");

       if(ekle == true) {
         say++;
         document.getElementById("sepet").innerHTML = say + " ürün sepete eklendi." ;
       } else {
         document.getElementById("sepet").innerHTML = "Ürün eklenmedi" ;
       }
    }
</script>
</body>

Not: alt parametresine ürün adını yazıp ve fonksiyona her resim etiketinden farklı değer göndererek eklenen ürünün adını yazdırabilir veya eklenen ürünün adını ve resmini görüntüleyebilirsiniz.