Javascript Örnekleri – 33 ile 1000 arasındaki tek sayıların toplamı ve ortalaması

33 ile 1000 arasındaki tek sayıların toplamını ve 3`e bölünebilen sayıların ortalamasını bulan program

<script type="text/javascript">
        var toplam = 0, adet = 0,toplam2=0;
        for(var i=33;i<=1000;i+=2)
        {
            document.write(i + "<br/>");
            toplam += i;
            if (i % 3 == 0)
            {
                toplam2 += i;
                adet++;
            }
        }
        var ortalama = toplam2 / adet;
        document.write("Sayıların Toplamı.." + toplam + "<br/>");
        document.write("3 'e bölünen sayıların ortalaması.." + ortalama );
    </script>

JavaScript Örnekleri – Fare Yazının Üzerine Gelince Değişen Resim

JavaScript Örneklerimize fare yazının üzerine gelince değişen resim uygulaması ile devam ediyoruz, uygulamamızda yazının onmouseover olayına göre çelışacak olan fonksiyona bir sayısal değer gönderiyoruz. Bu değere karşılık gelen resim de img nesnesinin src parametresine atanıyor.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
    function resim_degis(ind)
    {
        var res = document.getElementById("rsm");
        var res_dizi = new Array();
        res_dizi[0] = "http://www.bilisimogretmeni.com/images/cicek.jpg";
        res_dizi[1] = "http://www.bilisimogretmeni.com/images/dag.jpg";
        res_dizi[2] = "http://www.bilisimogretmeni.com/images/penguen.jpg";
        res.src = res_dizi[ind];
    }
    </script>
</head>
<body>
<table>
<tr>
<td><p onmouseover="resim_degis(0)">Çicek</p></td>
<td rowspan="3"><img id="rsm" name="resim" src="http://www.bilisimogretmeni.com/images/cicek.jpg"/></td>
</tr>
<tr> <td><p onmouseover="resim_degis(1)">Dağ</p></td> </tr>
<tr> <td><p onmouseover="resim_degis(2)">Penguen</p></td> </tr>
</table>
</body>
</html>

[wp-js-fiddle url=”https://jsfiddle.net/BilisimOgretmeni/503xrpe4/” style=”width:100%; height:250px; border:solid #4173A0 1px;”]

JavaScript Örnekleri – Dört İşlem

JavaScript Örneklerimize text kutularına girilen iki sayı üzerinde kullanıcının butonlar yardımıyla dört işlem yapmasını sağlayan kod ile devam ediyoruz. Konu sonunda kodları test edebilirsiniz.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        function toplam() {
            var deger1 = parseInt(document.getElementById('sayi1').value);
            var deger2 = parseInt(document.getElementById('sayi2').value);
            document.getElementById('sonuc').value = deger1 + deger2;
        }
        function cikartma() {
            var deger1 = parseInt(document.getElementById('sayi1').value);
            var deger2 = parseInt(document.getElementById('sayi2').value);
            document.getElementById('sonuc').value = deger1 - deger2;
        }
        function carpma() {
            var deger1 = parseInt(document.getElementById('sayi1').value);
            var deger2 = parseInt(document.getElementById('sayi2').value);
            document.getElementById('sonuc').value = deger1 * deger2;
        }
        function bolme() {
            var deger1 = parseInt(document.getElementById('sayi1').value);
            var deger2 = parseInt(document.getElementById('sayi2').value);
            document.getElementById('sonuc').value = deger1 / deger2;
        }
    </script>
</head>
<body>
<input type="text" id="sayi1" /> <input type="text" id="sayi2" />
<br />
<input type="button" value="+" id="topla" onclick="toplam()" />
<input type="button" value="-" id="fark" onclick="cikartma()" />
<input type="button" value="*" id="carp" onclick="carpma()" />
<input type="button" value="/" id="bol" onclick="bolme()" /><br />
Sonuç<br /><input type="text" id="sonuc" />
</body>
</html>

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/en6b6d26/” style=”width:100%; height:150px; border:solid #4173A0 1px;”]

JavaScript While Döngüsü Örnekleri

Bundan önceki konumuzda For Döngüsü Kullanımı örneklerini paylaşmıştık şimdi ise JavaScript While Döngüsü örneklerini paylaşıyoruz.

1-0-100 arasındaki çift sayıları yazdıran program

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var i=0;
        while (i < 100) {
            i += 2;         
                document.write(i + "<br/>");         
        }
    </script>
</head>
<body>
</body>
</html>

2-Büyüyen Fontlarla ekrana Türkiye Yazan Program

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var i = 0;
        while (i < 10) {
            i++;
document.write("<span style='font-size:" + i + 5 + "px;'>Türkiye</span><br/>");
        }    
    </script>
</head>
<body>

</body>
</html>

3-Çift sayıları mavi tek sayıları sarı yazan program

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var i = 0;
        while (i < 100) {
            i++;
            if (i % 2 == 0) {              
        document.write("<span style='color:blue;'>" + i + "</span><br/>");
            }
            else {
                document.write("<span style='color:yellow;'>" + i + "</font><br/>");
            }
        }
    </script>
</head>
<body>

</body>
</html>

4-0-100 arasında 3 ve 5’e tam bölünen sayıların toplamını bulan program

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var toplam = 0;
        var i = 1;
        while (i <= 100) {
            if (i % 3 == 0 && i % 5 == 0) {
                if (i != 90) {
                    document.write(i + "+");
                }
                else {
                    document.write(i + "=");
                }
                toplam += i;
            }
            i++;
        }
        document.write(toplam);
    
    </script>
</head>
<body>

</body>
</html>

5-Kullanıcı çift sayı girene kadar sayı isteyen program

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var cevap;
        var toplam=0;
        while (cevap % 2 != 0) {
            cevap = prompt("Bir sayı Giriniz");
            toplam += parseInt(cevap);
        }
        toplam -= parseInt(cevap);
        document.write(toplam);
    </script>
</head>
<body>

</body>
</html>

6-Girilen Sayıların ortalaması çift olana kadar sayı isteyen program

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var ort = 1, toplam = 0, i = 0;
        var sayi;
        while (ort % 2 != 0) {        
            sayi = prompt("Bir sayı Girin");
            i++;
            toplam += parseInt(sayi);
            ort = toplam / i;
        }
        document.write("Sayıların Ortalaması =" + ort);
    </script>
</head>
<body>

</body>
</html>

7-Girilen sayı çift ise mesajları yan yana, tek ise alt alta tekrar eden program

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var mesaj = prompt("Mesajı girin");
        var sayi = prompt("Tekrar sayısı");
        var i=0;
        if (parseInt(sayi) % 2 == 0) {
            while (i < sayi) {
                document.write(mesaj + " ");
                i++;
            }
        }
        else {
            while (i < sayi) {
                document.write(mesaj + "<br>");
                i++;
            }
        }
    </script>
</head>
<body>

</body>
</html>

8-Kullanıcıda şifre soran ve 3 hak sonunda kontrol eden program

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var sifre = "123";
        var hak = 3;
        while (hak>0) {
            var mesaj = prompt("Şifreyi Girin");
            hak--;
            if (hak == 0) break;
            if (mesaj == sifre) {
                document.write("HOŞGELDİNİZ");
                break;
            }
            else {
                alert("Son " + hak + " hakkınız kaldı");
            }            
        }
        if (hak == 0) {
            document.write("İZİNSİZ GİREMEZSİNİZ");
        }
    </script>
</head>
<body>

</body>
</html>

JavaScript Dersleri – Checkboxların Tümünü Seç veya Seçimi Kaldır

12284172421897139812CoD_fsfe_Checklist_icon.svg.med
Daha önceki JavaScript derslerimizde Checkbox kullanımını anlatıp seçili olan nesnelerin değerlerinin nasıl okunacağından bahsetmiştik, şimdi de farklı bir uygulama ile form içerisinde yer alan tüm Checkboxların seçili hale getirilmesi veya seçimin iptal edilmesi nasıl yapılacak onu açıklayalım. Kodlamaya geçmeden işlemin mantığını açıklayalım
İlk olarak form içerisine kontrol edilecek nesneler ekleniyor, yazdığımız script kodunda form içindeki tüm Checkboxlar bir değişkene aktarılıyor ve döngü içinde sırayla seçili ise iptal seçili değilse hepsi seçili hale geliyor 🙂

<script type="text/javascript">// <![CDATA[
  checked = false;
function tumunusec (checkboxornek) {
var checkboxlar= document.getElementById('checkboxornek');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < checkboxlar.elements.length; i++)
{
 checkboxlar.elements[i].checked = checked;
}
}
// ]]></script>
 <b>Checkboxları Seçili Hale Getirme veya İptal Etme</b></pre>
<form id="checkboxornek"><input type="checkbox" name="kutu1" /><input type="checkbox" name="kutu2" />
<input type="checkbox" name="kutu3" />

Tümünü Seç veya İptal Et

<input onclick="tumunusec();" type="checkbox" name="checkall" /></form>
<pre>

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/14xaofd9/” style=”width:100%; height:200px; border:solid #4173A0 1px;”] i

Javascript Örnekleri – Basit Test Yapımı

Javascript örneklerimize basit bir test uygulaması yaparak devam ediyoruz, kodlar ve uygulamanın çalışan hali aşağıda ben kısaca yapılan işlemi açıklayım, butona basıldıktan sonra radio butonlar sıra ile kontrol edilerek işaretlenen seçeneklerin dizide tanımlanan cevaplarla karşılaştırılıyor ve doğru veya yanlış olduğu tespit ediliyor.

[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/DxuQQ/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bilisimogretmeni.com</title>
<script type="text/javascript">
function cevapla()
{
 var soruSayisi=3;
 var gelenCevap = new Array();
 var dogruCevap = new Array("C","C","C");
 var dogru=0;
 var yanlis=0;
 var cevap=0;
 var rapor="";
	
 for(i=1; i <= soruSayisi; i++){	
  var secenekler=document.getElementsByName("s"+i);
  for(j=0; j < secenekler.length; j++){
   if(secenekler[j].checked){				
    if(secenekler[j].value==dogruCevap[i-1]){
	 cevap=1;//www.bilisimogretmeni.com
	}else{
	cevap=0;
	}	
	if(cevap){
	 rapor +=i+". Soru için cevabınız: "+secenekler[j].value+", Doğru <br />";
	}else{
	 rapor +=i+". Soru için cevabınız: "+secenekler[j].value+", YANLIŞ, Doğru Cevap: "+dogruCevap[i-1]+"<br />";
	}
	 gelenCevap.push(secenekler[j].value);
   }
  }
 }	
	//www.bilisimogretmeni.com
 for(k=0; k < soruSayisi; k++){
  if(gelenCevap[k]==dogruCevap[k]){
   dogru++;
  }else{
   yanlis++;
  }
 }
 rapor +="Sonuç: "+dogru+" Doğru, "+yanlis+" Yanlış"+"<br />";
 document.getElementById('rapor').innerHTML=rapor;
 }
</script>
</head>

<body>
<form name="formTest">
<fieldset class="radiogroup">
<legend>Soru 1: Aşağıdakilerden hangisi uygun değişken ismidir?</legend>
 <ul class="radio" style="list-style:none">
  <li>A) <input type="radio" name="s1" value="A" />  <label>case</label>  </li>
  <li>B) <input type="radio" name="s1" value="B" />  <label>try</label></li>
  <li>C) <input type="radio" name="s1" value="C" /><label>tree</label></li>
  <li>D) <input type="radio" name="s1" value="D" /><label>const</label></li>
 </ul>
</fieldset>
<!--www.bilisimogretmeni.com-->
<fieldset class="radiogroup">
<legend>Soru 2: Tabloda satır oluşturmak için kullanılan komut hangisidir?</legend>
 <ul class="radio" style="list-style:none">
  <li>A) <input type="radio" name="s2" value="A" /><label>table</label></li>
  <li>B) <input type="radio" name="s2" value="B" /><label>td</label></li>
  <li>C) <input type="radio" name="s2" value="C" /><label>tr</label></li>
 </ul>
</fieldset> 
<!--www.bilisimogretmeni.com-->
<fieldset class="radiogroup">
<legend>Soru 3: Stil dosyalarının uzantısı hangisi olur?</legend>
 <ul class="radio" style="list-style:none">
  <li>A) <input type="radio" name="s3" value="A" /><label>stil</label></li>
 <li>B) <input type="radio" name="s3" value="B" /><label>style</label></li>
 <li>C) <input type="radio" name="s3" value="C" /><label>css</label></li>
 <li>D) <input type="radio" name="s3" value="D" /><label>html</label></li>
 </ul>
</fieldset> 
<input type="button" value="Cevapla" onclick="cevapla()" />
</form>
<div id="rapor"></div>
</body>
</html>

Javascript Örnekleri – Not Ortalamasına Göre Geçti – Kaldı

gectikaldi
Javascript örneklerimize öğrenci ders ortalamasını hesaplayan uygulama ile devam ediyoruz, bu uygulamamızda öğrencinin girmiş olduğu yazılı ve sözlü notlarına göre ortalama hesaplanarak 50’den büyük olanlar için dersten geçtiniz, diğerleri için dersten kaldınız mesajını veriyoruz, mesaj ekranda görüntülenirken geçenler kırmızı, kalanlar mavi renkte gösteriliyor bunun için küçük bir css kodu ile id’ye göre renklendirme işlemi yaptık. Uygulamayı aşağıdan test edebilirsiniz..
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/28CKC/” style=”width:100%; height:400px; border:solid #4173A0 1px;”]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.bilisimogretmeni.com</title>
<script type="text/javascript" language="javascript">
function hesap()
{
document.getElementById("gecti").innerHTML="";
document.getElementById("kaldi").innerHTML="";
var y1,y2,y3,soz,ort;
y1=eval(document.ortalama.yazili1.value);
y2=eval(document.ortalama.yazili2.value);
y3=eval(document.ortalama.yazili3.value);
soz=eval(document.ortalama.sozlu.value);
ort=(y1+y2+y3+soz)/4;
if(ort>=50)
{
document.getElementById("gecti").innerHTML="Dersten Geçtiniz ortalamanız "+ort;
//www.bilisimogretmeni.com
}
else
{
document.getElementById("kaldi").innerHTML="Dersten kaldınız ortalamanız "+ort;
//www.bilisimogretmeni.com
}
}
</script>
<style type="text/css">
#gecti
{
font-size:18px;
font-weight:bold;
color:#FF0000;
}
#kaldi
{
font-size:18px;/*www.bilisimogretmeni.com*/
font-weight:bold;
color:#0000FF;
}
</style>
</head>
<body>
<form name="ortalama">
<table>
<tr>
<td>1.Yazılı</td>
<td><input type="text" name="yazili1" /></td>
</tr>
<tr>
<td>2.Yazılı</td>
<td><input type="text" name="yazili2" /></td>
</tr>
<tr>
<td>3.Yazılı</td>
<td><input type="text" name="yazili3" /></td>
</tr>
<tr>
<td>Sözlü</td>
<td><input type="text" name="sozlu" /></td>
</tr>
<tr>
<td align="center" colspan="2"><input type="button" onclick="hesap()" value="Hesapla" /></td>
</tr>
</table>
</form>
<p id="gecti"></p>
<p id="kaldi"></p>
</body>
</html>