Web tasarım ve programlama dersi için javascript fonksiyon ve events ile ilgili örnek sorular ve çözümleri.

Javascript fonksiyonlar ve events ile ilgili çözümlü sorular

Soru 1: Tarayıcıda görüntülenen resmi bir butona tıklayınca farklı bir resimle değiştiriniz ?

<body>
    <img id="resim" src="biyografi.jpg" width="850" height="340">

    <script>
        function degistirme() {
            document.getElementById("resim").src = "birolay_ilketkinlik.jpg"; }
    </script>

   <p>Orjinal resim biyografi.jpg, birolay_ilketkinlik.jpg olarak değiştirilmiştir. </p>
   <button name="degistir" onClick="degistirme();">Resim Değiştirme</button>
</body>

Soru 2: Bir butona tıklanınca div etiketinde verilen class'ı farklı bir class ile değiştiriniz ?

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
      .kutu, .anakutu, .degisen{
             float:left;
             width: 150px;
             height: 150px;
             background: #d14545;
             border:1px solid #ff0000;
             margin-right: 10px; }
      .degisen {
             background: #555;
             border:2px solid #000; }
    </style>
</head>
<body>
     <div class="kutu"></div>
     <div class="anakutu"></div>
     <br>
     <button onClick="degistir();">değiştir</button>

     <script>
           function degistir() {
                document.getElementsByTagName("div")[0].className = "degisen"; }
     </script>
</body>
</html>

Soru 3 : Dışarıdan girilen sayının küpünü sayfada bulunan butona tıklayınca hesaplayan fonksiyonu oluşturunuz ? ( sayfaya bir adet metin kutusu ve bir buton ekleyiniz )

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Küp hesaplama</title>
   <script>

       function kup() {
          var sayi = document.getElementById("sy").value;
          var sonuc = sayi * sayi * sayi;
          document.getElementById("kupsonuc").innerHTML = ("Girilen sayının küpü " + sonuc); }
   </script>
</head>
<body>
    Sayı : <input type="text" id="sy">
    <input type="button" value="Hesapla" onClick="kup()">
    <p id="kupsonuc"></p>
</body>
</html>

Soru 4: Dışarıdan girilen web adresini bağlantıya dönüştüren fonksiyonu yazınız ?

<script type="text/javascript">
        function baglanti(){
            var adres = prompt("Web Adresi Giriniz : ");
            document.write('<a href="' + adres + '" target="_blank">Tıklayınız</a>');    
        };
        baglanti();
</script>

Soru 5: onClick olayını ve fonksiyon kullanarak istenilen sayıda resmi resim galerisine dönüştüren scripti yazınız ?

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Resim galerisi</title>
      <style>
         .anakutu {
              margin:20px auto;
              width:850px; }
         .resim {
              width:850px;
              height: 340px;
              margin-bottom: 20px;
              box-shadow: 0 0 10px rgba(0,0,0,.15); }
         .dugme {width:850px;}
         .onceki, .sonraki {width:425px;}
         .onceki {float: left}
         .sonraki {float: right;text-align: right;}
      </style>
</head>
<body>
      <div class="anakutu">
      <div class="resim"><img src="1.jpg" alt=""> </div>
      <div class="dugme">
          <div class="onceki">Geri</div> // resim ile değiştirebilirsiniz.
          <div class="sonraki">İleri</div> // resim ile değiştirebilirsiniz.
          </div>
      </div>

      <script>
            var resimler = ["1.jpg","2.jpg","3.jpg"]; // Resim sayısını arttırabilirsiniz.
            var sayi = 0;
            document.getElementsByClassName('onceki')[0].onclick = function() {
                (sayi === 0) ? sayi = resimler.length - 1 : sayi--;
                 document.getElementsByTagName('img')[0].src = resimler[sayi]; }

            document.getElementsByClassName('sonraki')[0].onclick = function() {
                (sayi === resimler.length - 1) ? sayi = 0 : sayi++;
                document.getElementsByTagName('img')[0].src = resimler[sayi]; }
     </script>
</body>
</html>

Soru 6: Tarayıcının kaydırma çubuğu 200px daha fazla kaydırıldığında sağ üst köşede "yukarı git" bağlantısı oluşturan, 200px'in yukarısına çıkarıldığında bu bağlantıyı kaldıran script kodunu yazı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>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 > 200) {
                      document.body.appendChild(div); }
                   if (kaydirma < 200) {
                      document.body.removeChild(div); }
                   }
       </script>
</body>
</html>

Soru 7 : Metin kutusuna girilen notların ortalamasını hesaplayan fonksiyonu yazınız ?

<p>Birinci sınav notu :<input type="text" id="not1"></p>
<p>İkinci sınav notu :<input type="text" id="not2"></p>
<p><button name="hesapla" onClick="ortalama();">Hesapla</button></p>
<p id="sonuc"></p>

     <script>
          function ortalama() {
             var n1 = document.getElementById("not1").value;
             var n2 = document.getElementById("not2").value;
             var ort = ( Number(n1) + Number(n2) ) / 2;

             if(ort >= 50) {
                document.getElementById("sonuc").innerHTML = 'Not ortalamanız ' + ort + ', dersten geçtiniz.'; }
             else {
                document.getElementById("sonuc").innerHTML = 'Not ortalamanız ' + ort + ', dersten kaldınız.'; }
         }
     </script>
</body>

Soru 8: Geriye değer döndüren fonksiyon kullanarak istenilen sayının karesini hesaplayınız ?

<script>
       function karehesapla(y) {
           var kare = y * y;
           return kare; }
           alert(hesapla(5)); }
 </script>

Soru 9: Verilen bağlantıya tıklayarak genişliği 960px ve yüksekliği 400px olan popup penceresini açınız ve bağlantıda verilen sayfayı görüntüleyiniz ?

<body>
     <a href="http://www.google.com.tr" onClick="pencere();">Arama Sayafasını Aç</a>
     <script>
            function pencere() {
                   window.open("http://www.ilketkinlik.com","_blank","width=960, height=400");
            }
     </script>
</body>

Soru 10: Verilen üç sayı içerisinden en büyüğünü bulan fonksiyonu yazınız?

<p id="sonuc"></p>

   <script>
       function buyukBul(x,y,z) {
            var dizi = [x,y,z];
            var i, max = 0;

            for(i = 0; i < dizi.length; i++) {
              if (dizi[i] > max) {
                  max = dizi[i]; }
              }
           return max;} 
           document.getElementById("sonuc").innerHTML = buyukBul(10, 5, 25);
   </script>
  • Yazı Etiketleri :
  • fonksiyon
  • geriye değer döndüren fonksiyon
  • events
Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Css ile çoklu arkaplan uygulaması
Yazıyı Oku

Css ile çoklu arkaplan uygulaması

Menu