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

07.03.2015
ilketkinlik
6301

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

Javascript fonksiyonlar ve events ile ilgili çözümlü sorular - Bölüm 2

Soru 1 : Dışarıdan fonksiyona gönderilen sayının karesini hesaplayan scripti yazınız ?

<body>
<p id="sonuc"></p>
    <script>
         function karebul(x) {
           var kare = x * x;
           document.getElementById("sonuc").innerHTML = kare; }
           karebul(12);
    </script>
</body>

Soru 2 : Geriye değer döndüren fonksiyon metin kutusuna girilen sayının küpünü hesaplayan scripti yazınız ?

<script>
      function kupHesapla(x) {
          var kup = x * x * x;
          return x + " sayısının küpü : " + kup; }
          alert(kupHesapla(10));
</script>

Soru 3: Metin kutusuna girilen sayıların ortalaması 50'nin altında ise " Not ortalamanız ...., dersten geçtiniz / kaldınız." mesajını yazdıran kodu yazınız ?

<body>
    <p>Birinci notu giriniz <input type="text" id="not1"></p>
    <p>İkinci notu giriniz <input type="text" id="not2"></p>
    <p>Üçüncü notu giriniz <input type="text" id="not3"></p>
    <p><button onClick="ortalama();">Ortalama</button></p>
    <p id="sonuc"></p>

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

             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 4: Şekil bilgisi ve kenar değerlerini girip verilen şeklin alanını hesaplayan fonksiyonu yazınız ? ( şekil olarak kare, dikdörtgen ve üçgen giriniz )

<body>
      <p id="sonuc"></p>
      <script>
          function alanHesapla(kenar1,kenar2,sekil) {
             switch(sekil) {
                case "kare" :
                   document.getElementById("sonuc").innerHTML = "Karenin alanı " + (kenar1 * kenar2);
                break;
                case "dikdörtgen" :
                   document.getElementById("sonuc").innerHTML = "Dikdörtgenin alanı " + (kenar1 * kenar2);
                break;
                case "üçgen" :
                   document.getElementById("sonuc").innerHTML = "Üçgenin alanı " + ((kenar1 * kenar2) /2);
                break;
                default:
                    document.getElementById("sonuc").innerHTML = "Girilen şekil bilgisi hatalı.";
                break; }
          }
      alanHesapla(5,5,"kare"); 
      </script>
</body>

Soru 5: Klavyeden basılan herhangi bir tuşun kodunu veren script kodunu yazınız?

<head>
    <script>
         function hangitus(event) {
             document.getElementById("tuskodu").innerHTML = event.keyCode; }
    </script>
</head>
<body onkeyup="hangitus(event)">
<p id="tuskodu"></p>
</body>

Soru 6: Metin kutusuna girilen metni büyük harfe çeviren scripti yazınız ?

<head>
   <script>
      function buyukHarf() {
          var x = document.getElementById("ad");
          x.value = x.value.toUpperCase(); }
   </script>
</head>
<body>
       Adınızı giriniz : <input type="text" id="ad" onchange="buyukHarf();">
</body>

Soru 7: 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)

<body>
   <img src="ürün resmi ekleyiniz" alt="" onClick="urunEkle();">
   <img src="ürün resmi ekleyiniz" alt="" onClick="urunEkle();">
   <p id="sepet"></p>

<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.

Soru 8: Web sayfası yüklendiğinde mesaj kutusu açılarak "Ayşe, web sayfama hoşgeldiniz." mesajını ekrana çıkaran kodu yazınız? ( isim bilgisi fonksiyona dışarıdan gönderilecek)

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Sayfama hoşgeldiniz</title>
      <script>
          function hosgeldin(ad) {
            alert(ad + ", web sayfama hoşgeldiniz.");
          }
      </script>
  </head>
<body onload = "hosgeldin('Ayşe');">
</body>
</html>

Soru 9: Sayfa üzerinde bulunan iki kutudan birincisinin üzerinde fare hareket ettiği sürece sayıyı 1 artıran, diğer kutu üzerine her geldiğinde sayıyı bir artıran fonksiyonu yazınız?

<head>
  <style>
    div {
     width: 100px;
     height: 100px;
     border: 1px solid black;
     margin: 10px;
     float: left;
     padding: 30px;
     text-align: center;
     background-color: #eeeeee; }
  </style>
</head>
<body>
    <p>onMouseMove ve onMouseOver kullanımı</p>
    <div onMouseMove="gez()" id="demo1"></div>
    <div onMouseOver="ustu()" id="demo2"></div>
    <script>
        var x = 0;
        var y = 0;
        function gez() {
           document.getElementById("demo1").innerHTML = x+=1; }
        
        function ustu() {
           document.getElementById("demo2").innerHTML = y+=1; }
    </script>
</body>