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-Kombinasyon Hesaplama


Daha önce burada C# ile kombinasyon hesabının nasıl yapılacağını anlatmıştık bir arkadaşın isteği üzerine aynı örneği javascript ile yaparak kombinasyon hesaplaması uygulamasını paylaşıyorum

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

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bilisimogretmeni kombinasyon Hesabı</title>
    <script type="text/javascript">
        function hesapla() {
            var n =parseInt(document.getElementById("ndegeri").value);
            var r = parseInt(document.getElementById("rdegeri").value);
            var fakt = n;//http://www.bilisimogretmeni.com
            for (var i = n - 1; i >= 1; i--)
            {
                fakt = fakt * i;
            }
        var fakt2 = r;
        for (var i = r - 1; i >= 1; i--)
        {
            fakt2 = fakt2 * i;
        }//http://www.bilisimogretmeni.com
        var number;
        number = n - r;
        fakt1 = number;
        for (var i = number - 1; i >= 1; i--)
        {
            fakt1 = fakt1 * i;
        }
        fakt1 = fakt2 * fakt1;
        kombinasyon = fakt / fakt1;
        document.getElementById("sonuc").value = kombinasyon;
            

        }
    </script>
</head>
<body>
    Kombinasyon hesaplaması için n ve r değerlerini girin<br />
    n Değeri <input type="text" id="ndegeri" /><br />
    r Değeri<input type="text" id="rdegeri" /><br />
    <input type="button" value="Hesapla" onclick="hesapla()" /><br />
    Sonuç <input type="text" id="sonuc" />
</body>
</html>

JavaScript Örnekleri – Burç Hesaplama, Burç Bulma

astroloji
Kullanıcının girmiş olduğu gün ay değerlerine göre hangi burçtan olduğunu bulan javascript kodları, program içerisinde gün ve ay değerleri if komutu ile kontrol edilerek burç değeri bulunuyor uygulamanın çalışan hali ve kodlarımız..:
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/6Lspc164/1/” style=”width:100%; height:200px; 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>
    <title>www.bilisimogretmeni.com</title>
    <script language="javascript" type="text/javascript">
        function burcbul() {
            document.form1.gun.selectedIndex;
            document.form1.ay.selectedIndex;
            document.form1.burc.value;
            if (document.form1.ay.selectedIndex == 1 && document.form1.gun.selectedIndex <= 19) { document.form1.burc.value = "Oğlak"; }
            if (document.form1.ay.selectedIndex == 1 && document.form1.gun.selectedIndex >= 20) { document.form1.burc.value = "Kova"; }
            if (document.form1.ay.selectedIndex == 2 && document.form1.gun.selectedIndex <= 18) { document.form1.burc.value = "Kova"; }
            if (document.form1.ay.selectedIndex == 2 && document.form1.gun.selectedIndex >= 19) { document.form1.burc.value = "Balık"; }
            if (document.form1.ay.selectedIndex == 3 && document.form1.gun.selectedIndex <= 20) { document.form1.burc.value = "Balık"; }
            if (document.form1.ay.selectedIndex == 3 && document.form1.gun.selectedIndex >= 21) { document.form1.burc.value = "Koç"; }
            if (document.form1.ay.selectedIndex == 4 && document.form1.gun.selectedIndex <= 20) { document.form1.burc.value = "Koç"; }
            if (document.form1.ay.selectedIndex == 4 && document.form1.gun.selectedIndex >= 21) { document.form1.burc.value = "Boğa"; }
            if (document.form1.ay.selectedIndex == 5 && document.form1.gun.selectedIndex <= 20) { document.form1.burc.value = "Boğa"; }
            if (document.form1.ay.selectedIndex == 5 && document.form1.gun.selectedIndex >= 21) { document.form1.burc.value = "İkizler"; }
            if (document.form1.ay.selectedIndex == 6 && document.form1.gun.selectedIndex <= 20) { document.form1.burc.value = "İkizler"; }
            if (document.form1.ay.selectedIndex == 6 && document.form1.gun.selectedIndex >= 21) { document.form1.burc.value = "Yengeç"; }
            if (document.form1.ay.selectedIndex == 7 && document.form1.gun.selectedIndex <= 21) { document.form1.burc.value = "Yengeç"; }
            if (document.form1.ay.selectedIndex == 7 && document.form1.gun.selectedIndex >= 22) { document.form1.burc.value = "Aslan"; }
            if (document.form1.ay.selectedIndex == 8 && document.form1.gun.selectedIndex <= 21) { document.form1.burc.value = "Aslan"; }
            if (document.form1.ay.selectedIndex == 8 && document.form1.gun.selectedIndex >= 22) { document.form1.burc.value = "Başak"; } //www.bilisimogretmeni.com
            if (document.form1.ay.selectedIndex == 9 && document.form1.gun.selectedIndex <= 21) { document.form1.burc.value = "Başak"; }
            if (document.form1.ay.selectedIndex == 9 && document.form1.gun.selectedIndex >= 22) { document.form1.burc.value = "Terazi"; }
            if (document.form1.ay.selectedIndex == 10 && document.form1.gun.selectedIndex <= 21) { document.form1.burc.value = "Terazi"; }
            if (document.form1.ay.selectedIndex == 10 && document.form1.gun.selectedIndex >= 22) { document.form1.burc.value = "Akrep"; }
            if (document.form1.ay.selectedIndex == 11 && document.form1.gun.selectedIndex <= 21) { document.form1.burc.value = "Akrep"; }
            if (document.form1.ay.selectedIndex == 11 && document.form1.gun.selectedIndex >= 22) { document.form1.burc.value = "Yay"; }
            if (document.form1.ay.selectedIndex == 12 && document.form1.gun.selectedIndex <= 20) { document.form1.burc.value = "Yay"; }
            if (document.form1.ay.selectedIndex == 12 && document.form1.gun.selectedIndex >= 21) { document.form1.burc.value = "Oğlak"; }

            if (document.form1.ay.selectedIndex == "x" || document.form1.gun.selectedIndex == "y") return;
        }

        function validate() {
            if (document.form1.ay.selectedIndex == 2 && document.form1.gun.selectedIndex > 29) { alert("Şubat ayında en fazla 29 gün seçebilirsiniz"); return false; }
            if (document.form1.ay.selectedIndex == 4 && document.form1.gun.selectedIndex == 31) { alert("Nisan ayında sadece 30 gün vardır."); return false; }
            if (document.form1.ay.selectedIndex == 6 && document.form1.gun.selectedIndex == 31) { alert("Haziran ayında sadece 30 gün vardır."); return false; }
            if (document.form1.ay.selectedIndex == 9 && document.form1.gun.selectedIndex == 31) { alert("Eylül ayında sadece 30 gün vardır."); return false; } //www.bilisimogretmeni.com
            if (document.form1.ay.selectedIndex == 11 && document.form1.gun.selectedIndex == 31) { alert("Kasım ayında sadece 30 gün vardır."); return false; }
            else {
                return true;
            }
        }

</script>
</head>

<body>
<form name="form1">

<table border="0" bgcolor="c0c0c0" cellspacing="0" cellpadding="1">
  <tr>
    <td>
        <font size="1" face="verdana, arial, helvetica, sans-serif"><b>&nbsp;Ay&nbsp;</b></font>
    </td>
    <td>
        <font size="1" face="verdana, arial, helvetica, sans-serif"><b>&nbsp;Gün&nbsp;</b></font>
    </td>
    <td rowspan="2">
        <font size="3" face="verdana, arial, helvetica, sans-serif"><b>&nbsp;&nbsp;<b>:</b>&nbsp;</b></font>
    </td>
    <td>
        <font size="1" face="verdana, arial, helvetica, sans-serif"><b>&nbsp;Burç&nbsp;</b></font>
    </td>
  </tr>
  <tr>
    <td>
                    &nbsp;<select name="ay">
                    <option value="x" selected>&lt; Ay Seçin &gt;&nbsp;</option>
                    <option value="1">Ocak</option>
                    <option value="2">Şubat</option>
                    <option value="3">Mart</option>
                    <option value="4">Nisan</option>
                    <option value="5">Mayıs</option>
                    <option value="6">Haziran</option>
                    <option value="7">Temmuz</option>
                    <option value="8">Ağustos</option>
                    <option value="9">Eylül</option>
                    <option value="10">Ekim</option>
                    <option value="11">Kasım</option>
                    <option value="12">Aralık</option>
                    </select>
    </td>
    <td>
                    &nbsp;<select name="gun" onChange="validate()">
                    <option value="y" selected>&lt; Gün Seçin &gt;&nbsp;</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                    </select>
    </td>
    <td>
        &nbsp;<input name="burc" size="12" value="??" />&nbsp;<input type="button" value="Burç Bul" onClick="burcbul()">
    </td>
  </tr>
</table>
</form>
</body>
</html>

JavaScript Örnekleri – Zar Atma Örneği

1-dice-clipart-six-sided-dice-md
JavaScript örneklerimize zar atma uygulaması ile devam ediyoruz örneğimizde kullanıcı bir butona basacak 1-6 arasında arstgele 2 sayı üretilecek sonuçlar textbox içinde görüntülenecek eğer gelen sonuçlar aynı ise çift attın tebrikler şeklinde ekrandan yazacak uygulamada Math.random(),Math.floor(),document.getElementById ve innerHTML kullanımları mevcut, uygulama kodları ve çalışan hali aşağıda..:

<!DOCTYPE html>
<html>
<head>
<title>http://www.bilisimogretmeni.com/</title>
<style>
div.zar{
	float:left;
	width:32px;
	background:#F5F5F5;
	border:#999 1px solid;
	padding:10px;
	font-size:24px;
	text-align:center;
	margin:5px;
}
</style>
<script>
function ZarAt(){
    var zar1 = document.getElementById("zar1");
    var zar2 = document.getElementById("zar2");
    var status = document.getElementById("status");
    var d1 = Math.floor(Math.random() * 6) + 1;
    var d2 = Math.floor(Math.random() * 6) + 1;
    var zarToplam = d1 + d2;
    zar1.innerHTML = d1;
    zar2.innerHTML = d2;
    status.innerHTML = "Zarlar Toplamı = "+zarToplam;
    if(d1 == d2){
        status.innerHTML += " Çift Attın Tebrikler";
    }
}
</script>
</head>
<body>
<div id="zar1" class="zar">0</div>
<div id="zar2" class="zar">0</div>
<button onclick="ZarAt()">Zar At</button>
<h2 id="status" style="clear:left;"></h2>
</body>
</html>

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

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 Örnekleri – Text’deki Sayıyı Arttırma,Azaltma

JavaScript Örneklerimize kullanıcının bir text içerisindeki sayıyı butonlar yardımıyla arttırma ve azaltma işlemi devam ediyoruz. Uygulamanın çalışan halini konu sonundan test edebilirsiniz.
Yapılan işlemler kullanıcı herhangi bir butona bastığı zaman onclick olayı tetikleniyor ve bizim yazdığımız arttirma,azaltma veya sıfırlama fonksiyonlarından biri çalışıyor. Fonksiyonlar da document.getElementById metodu ile sayfa içerisindeki belirttiğimiz id’li elemanlar okunup değerleri sayıya çevrilip okunan değere ekleme veya azaltma işlemi yapılıyor.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        function arttirma() {
            var deger = parseInt(document.getElementById('sayi').value);
           document.getElementById('sayi').value = deger + 1;
       }
       function sifirlama() {
           document.getElementById('sayi').value = "0";
       }
       function azaltma() {
           var deger = parseInt(document.getElementById('sayi').value);
           document.getElementById('sayi').value = deger - 1;
       }
    </script>
</head>
<body>
<input type="text" id="sayi" value="0" /><br />
<input type="button" value="Arttır" id="arttir"  onclick="arttirma()"/>
<input type="button" value="Sıfırla" id="sifirla" onclick="sifirlama()" />
<input type="button" value="Azalt" id="azalt"  onclick="azaltma()"/>
</body>
</html>

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