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 For Döngüsü Örnekleri

JavaScript’de For Döngüsü kullanımına ait bazı örnekler

1- 1 ile 10 arasındaki ÇİFT sayıları ekrana javascript kodları

<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        for (var i = 0; i <= 10; i++) {
        if(i%2==0)  document.write(i+ "<br/>");
                   }
    </script>
</head>
<body>
</body>
</html>

2- Ekrana büyüyen font ile TÜRKİYE yazan javascript kodları

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

3- 3 ve 5’e tam bölünen sayıları ve bu sayıların toplamını yazdıran javascript kodları

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

4- Ekrana
*
**
*** şeklinde yıldızları yazdıran javascript kodları

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

5- Kullanıcının girdiği mesajı yine kullanıcının girdiği tekrar sayısı kadar yazdıran javascript kodları

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        var mesaj = prompt("Mesaj Girin");
        var sayi = prompt("Tekrar Sayısını Girin");
        for (var i = 0; i < parseInt(sayi); i++) {
            document.write(mesaj + "<br/>  ");
        }
    </script>
</head>
<body>
</body>
</html>

6- 1’ler çarpım tablosunu ekrana yazdıran javascript kodları

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        for (var i = 1; i <= 10; i++) {
            document.write("1*" + i + "=" + 1 * i + "<br/>");
        }
    
    </script>

</head>
<body>
</body>
</html>

7- 10’dan 1’e doğru geri geri sayıları yazdıran javascript kodları

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

</body>
</html>

8- Ekrana
*******
******
****
şeklinde yıldızları azalarak yazdıran javascript kodları

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        for (var i = 10; i >= 1; i--) {
            for (var x = 0; x < i; x++) {
                document.write("*");
            }
            document.write("<br/>");
                    }

    </script>
</head>
<body>

</body>
</html>

9- 10’lar çarpım tablosunu ekranda bir tablo içinde veren javascript kodları

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>http://www.bilisimogretmeni.com/</title>
    <script type="text/javascript">
        document.write("<table border='1'><tr>");
        for (var x = 1; x <= 10; x++) {        
        document.write("<td>");
            for (var i = 1; i <= 10; i++) {
                document.write(x+"*" + i + "=" + x * i + "<br/>");
            }
            if(x==5)
            {
            document.write("</tr><tr>");
            }
            document.write("</td>");
        }    
        document.write("</tr><table>");
    </script>

</head>
<body>
</body>
</html>

C# Dersleri – Tic Tac Toe Oyunu Yapımı

C# derslerimize tic tac toe oyunu yapımı ile devam ediyoruz, birazdan vereceğim kodların hepsini satır satır açıklamayacağım tic tac toe oyununun çalışan halini konu sonundan indirip test edebilirsiniz.
İlk olarak bir windows form uygulaması açıyoruz, form üzerinde bir buton yerleştirip boyutunu özellikler bölümünden 75*75 yapıyoruz, ve aynı butonun 8 tane daha kopyasını alıp form üzerine aşağıdaki görüntüyü oluşturacak şekilde yerleştiriyoruz ve kodlarımız aşağıda
tictac

bool isaret = true;
        int isaret_sayisi = 0;
        private void button_click(object sender, EventArgs e)
        {
            Button b = (Button)sender;
            if (isaret)
            {
                b.Text = "X";
                b.BackColor = Color.Yellow;
            }
            else
            {//www.bilisimogretmeni.com
                b.Text = "O";
                b.BackColor = Color.Red;
            }
            isaret = !isaret;
            b.Enabled = false;
            isaret_sayisi++;
            kazanan();

         }
        private void kazanan()
        {
            bool kazananvarmi = false;
            //yatay kontrol
            if ((A1.Text == A2.Text) && (A2.Text == A3.Text) &&(!A1.Enabled))
                kazananvarmi = true;
            if ((B1.Text == B2.Text) && (B2.Text == B3.Text) && (!B1.Enabled))
                kazananvarmi = true;
            if ((C1.Text == C2.Text) && (C2.Text == C3.Text) && (!C1.Enabled))
                kazananvarmi = true;
            //dikey kontrol
            else if ((A1.Text == B1.Text) && (B1.Text == C1.Text) && (!A1.Enabled))
                kazananvarmi = true;
            if ((A2.Text == B2.Text) && (B2.Text == C2.Text) && (!A2.Enabled))
                kazananvarmi = true;
            if ((A3.Text == B3.Text) && (B3.Text == C3.Text) && (!A3.Enabled))
                kazananvarmi = true;
           //çapraz kontrol www.bilisimogretmeni.com
            else if ((A1.Text == B2.Text) && (B2.Text == C3.Text) && (!A1.Enabled))
                kazananvarmi = true;
            if ((A3.Text == B2.Text) && (B2.Text == C1.Text) && (!C1.Enabled))
                kazananvarmi = true;
            if (kazananvarmi)
            {
                butonlaraftif();
                string kimkazandi = "";
                if (isaret)
                    kimkazandi = "O";
                else
                    kimkazandi = "X";
                MessageBox.Show(kimkazandi + " Kazandı", "Oyun Bitti");
            }
            else
            {//www.bilisimogretmeni.com
                if(isaret_sayisi==9)
                    MessageBox.Show(" Berabere", "Oyun Bitti");
            }       
        }
        private void butonlaraftif()
        {
            try
            {
                foreach (Control c in Controls)
                {
                    Button b = (Button)c;
                    b.Enabled = false;
                }
            }
            catch { }

        }
[Yükleme bulunamadı.]

JavaScript Örnekleri – Mezun Kayıt Formu

mezun
JavaScript Örneklerimize mezun kayıt formu ile devam ediyoruz, şimdi yapacağımız uygulamada daha önceki konularda bahsettiğimiz JavaScript ile form nesnelerine erişim ve değerlerini okuma işlemlerinin hepsini bir arada uygulamış olacağız, kodlar önceki derslerimizde anlattıklarımıza çok benzediği için açıklama yapmıyorum JavaScript Mezun Kayıt Formu örneğini aşağıda deneyebilir, kodları inceleyebilir, konu sonunda da sorunuz varsa sorabilirsiniz…
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/cvN2J/” style=”width:100%; height:550px; 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 gonder()
{
document.mezun.sonuc.value="";
document.mezun.sonuc.value+="Adınız "+document.mezun.adsoyad.value+"n";
for(i=0;i<document.mezun.bolum.length;i++)
{
	if(document.mezun.bolum[i].selected)
	{
	document.mezun.sonuc.value+="Mezun olduğunuz bölüm "+document.mezun.bolum[i].value+" n";//www.bilisimogretmeni.com
	}
}

for(i=0;i<document.mezun.yil.length;i++)
{
	if(document.mezun.yil[i].selected)
	{
	document.mezun.sonuc.value+="Mezuniyet Yılınız "+document.mezun.yil[i].value+"n";
	}	
}

for(i=0;i<document.mezun.cinsiyet.length;i++)
{
	if(document.mezun.cinsiyet[i].checked)
	{
	document.mezun.sonuc.value+="Cinsiyetiniz "+document.mezun.cinsiyet[i].value+"n";
	}
}//www.bilisimogretmeni.com
 document.mezun.sonuc.value+="Hobileriniz ";
for(i=0;i<document.mezun.hobi.length;i++)
{  
	if(document.mezun.hobi[i].checked)
	{
	document.mezun.sonuc.value+=document.mezun.hobi[i].value+",";
	}
	
}//www.bilisimogretmeni.com
document.mezun.sonuc.value+="n";
document.mezun.sonuc.value+="Mesajınız "+document.mezun.mesaj.value+" ";
}
</script>
</head>
<body>
<form name="mezun">
<table>
<tr>
<td>Adınız Soyadınız</td>
<td><input type="text" name="adsoyad" /></td>
</tr>
<tr>
<td>Mezun Olduğunuz Bölüm</td>
<td><select name="bolum">
<option value="Bilgisayar">Bilişim Teknolojileri</option>
<option value="Grafik">Grafik ve Fotoğraf</option>
<option value="Çocuk Gelişimi">Çocuk Gelişimi</option>
<option value="Giyim">Giyim Üretim</option>
</select></td>
</tr>
<tr><!--//www.bilisimogretmeni.com -->
<td>Mezun Olduğunuz Yıl</td>
<td><select name="yil">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</select></td>
</tr>
<tr>
<td>Cinsiyetiniz</td>
<td><input type="radio" name="cinsiyet" value="Kız" />Kız <input  name="cinsiyet" type="radio" value="Erkek" />Erkek</td>
</tr>
<tr><!--//www.bilisimogretmeni.com -->
<td>Hobileriniz</td>
<td><input type="checkbox" name="hobi" value="TV" />TV izlemek 
<input type="checkbox"  name="hobi"value="İnernet" />İnternet
<input type="checkbox"  name="hobi"value="Kitap Okumak" />Kitap Okumak </td>
</tr>
<tr>
<td>Mesajınız</td>
<td><textarea name="mesaj" cols="65" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" ><input type="reset" value="Temizle" />
<input type="button" value="Gönder" onclick="gonder()" />
 </td>
</tr>
<tr>
<td></td>
<td align="center">
<textarea name="sonuc" disabled="disabled" cols="65" rows="6"></textarea>
</td>
</tr>
</table>

</form>
</body>
</html>

JavaScript Dersleri – Select Kullanımı

select
Önceki iki javascript dersimizde Checkbox kullanımı ve Radio Button Kullanımı nı anlatmıştık şimdi sıra geldi bir başka form elemanı olan select nesnesine select ile kullanıcı bir açılan liste halinde kendisine sunulan seçeneklerden bir veya daha fazlasını seçmek için kullanır. Doğum Yılınız, Mesleğiniz,Memleketiniz gibi seçeneklerde kullanaılanbilir. Eğer birden fazla durum seçilecekse multiple=”multiple” parametrelerinin ekllenmesi gerekir.
[wp-js-fiddle url=”http://jsfiddle.net/BilisimOgretmeni/x768Q/” 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 ekranayaz()
{
document.secim.degisken.value="";
for (i=0;i<document.secim.liste.length;i++)
  {
  if (document.secim.liste[i].selected)
    {//www.bilisimogretmeni.com
    document.secim.degisken.value += document.secim.liste[i].value + " ";
    }
  }
}
</script>
</head>
<body>
<form name="secim">
Doğum Yeriniz<br />
<select  name="liste">
<option value="05" >Amasya</option>
<option  value="06">Ankara</option>
<option  value="07">Anlatya</option>
<option  value="60">Tokat</option>
<option  value="61">Trabzon</option>
<option  value="55">Samsun</option>
</select>
<input type="button"  value="Gönder"  onclick="ekranayaz()"/>
<input type="reset" value="Temizle" /><br />
Memleketiniz=<input type="text" name="degisken" />

</form>
</body>
</html>

C# Örnekleri – Interface (Arayüz) Kullanımı

C# ile interface (arayüz) tanımlama ve kullanımı örneklerimize devam ediyoruz, örneklere geçmeden önce kısa bir not ile interface’in ne olduğunu hatırlayalım daha sonra örneklerimize geçiş yapalım “Interface (Arayüz) Sınıflara (Class) ne yapacaklarını söyleyen bu işlem yapılırken hangi metot veya değişkenleri kullanabilecekleri konusunda yol gösteren yapılardır. Interface içinde sadece tanımlama yapılır kod blokları yer almaz” diyerek tamamlayıp hemen örneklerle devam edelim ilk örneğimizde Iislemler isimli interface içinde islemgoster ve tutargetir isimli iki metot tanımlaması yapılmış daha sonra tanımlanan bu metotlar IslmeNo isimli sınıf (class) içerisinde kullanılmıştır. programın kodları….

using System;
using System.Collections.Generic;
using System.Text;

namespace ConsoleApplication1
{
    public interface Iislemler
    {
        void islemgoster();
        double tutargetir();
    }
    public class IslemNo : Iislemler
    {//www.bilisimogretmeni.com
        private string islemkodu;
        private string Tarih;
        private double Tutar;
        public IslemNo()
        {
            islemkodu = " ";
            Tarih = " ";
            Tutar = 0.0;
        }
        public IslemNo(string c, string d, double a)
        {
            islemkodu = c;
            Tarih = d;
            Tutar = a;
        }//www.bilisimogretmeni.com
        public double tutargetir()
        {
            return Tutar;
        }
        public void islemgoster()
        {
            Console.WriteLine("İşlem No: {0}", islemkodu);
            Console.WriteLine("Tarih: {0}", Tarih);
            Console.WriteLine("Tutar: {0}", tutargetir());
           }
    }
    class Program
    {
        static void Main(string[] args)
        {
            IslemNo islem1 = new IslemNo("001", "8/10/2012", 78900.00);
            IslemNo islem2 = new IslemNo();//www.bilisimogretmeni.com
            IslemNo islem3 = new IslemNo("002", "9/10/2012", 451900.00);
            islem1.islemgoster();
            islem2.islemgoster();
            islem3.islemgoster();
            Console.ReadKey();
        }
    }
}

İkinci C# Interface (Arayüz) örneğimizde bir arabanın çalıştırıp park edilene kadarki olaylarını listeleyen bir interface bu olayları kullanacak olan sınıf örneğimiz ve kodlarımız…
interface1

using System;
using System.Collections.Generic;
using System.Text;
namespace ConsoleApplication2
{
    public interface IArabaSur
    {
        void Calistir();
        void Sur();
        void Parket();
        void VitesDegistir(int vites);
        void Durdur();
    }//www.bilisimogretmeni.com
        public class Araba : IArabaSur
    {
        public void Calistir()
        {
            Console.WriteLine("Araba Çalıştırıldı.. Haydi Bismillah ");
        }
        public void Sur()
        {
            Console.WriteLine("Fazla Hız Yapmadan Sürmeye Devam");
        }
        public void Parket()
        {
            Console.WriteLine("Park Etme İşlemi Yapılıyor Dikkat Edin");
        }
        public void VitesDegistir(int vites)
        {
            Console.WriteLine(vites.ToString() + " . vitese geçildi hızını ona göre ayarla ");
        }
        //www.bilisimogretmeni.com
        public void Durdur()
        {
            Console.WriteLine("Okula geldik : ) hadi geçmiş olsun....");
        }
    }
    class Program
    {
        static void Main(string[] args)
        {
            Araba ford = new Araba();
            ford.Calistir();
            ford.VitesDegistir(2);
            ford.Sur();//www.bilisimogretmeni.com
            ford.Parket();
            ford.Durdur();
            Console.ReadKey();
        }
    }
}

JavaScript Örnekleri – JavaScript Sayı Bulma Oyunu

randomnumber_wordle
JavaScript örneklerimize sayı bulma oyunu ile devam ediyoruz, kullanıcının girdiği sayıyı bilgisayar tarafından rastgele üretilen sayı ile karşılaştırarak kullanıcıya küçült,büyült veya buldunuz şeklinde mesaj verecek olan javascript örneği, Örnek içerisinde javascriptte fonksiyon kullanımı, form nesnelerin kullanımı konularını da pekiştirmiş olacaksınız kodlarımız ve demo:

<html>
<head>
<title>bilisimogretmeni.com sayı tahmin oyunu</title>
<script type="text/javascript">
var rastgelesayi = Math.round(Math.random() * 99 + 1)
var tahminsayisi = 1
function Bul(tahmin){
if (tahmin == ""){
 alert("Lüften Bir sayı Girin")
 document.sayitahmin.tahminim.focus()
 return
 }//www.bilisimogretmeni.com
if (isNaN(tahmin)){
 alert("Geçersiz Bir değer girdiniz")
 document.sayitahmin.tahminim.value=""
 document.sayitahmin.tahminim.focus()
 return
 }
if (tahmin == rastgelesayi){
 alert("Tebrikler tahminn sayısını " + tahminsayisi + " tahmininizde buldunuz")
 return
 }
if (tahmin > rastgelesayi){
 alert("Sayıyı Küçült")
 document.sayitahmin.tahminim.focus()
 tahminsayisi++
 return
 }
if (tahmin < rastgelesayi){
 alert("Sayıyı Büyült")
 document.sayitahmin.tahminim.focus()
 tahminsayisi++
 return
 }
}//www.bilisimogretmeni.com
function yeniden(){
rastgelesayi = Math.round(Math.random() * 99 + 1)
tahminsayisi = 1
document.sayitahmin.tahminim.value=""
}
</script>
</head>
<body>
<form name="sayitahmin">
<input type="text" name="tahminim">
<input type="button" Value="Tahmin" onClick="Bul(document.sayitahmin.tahminim.value)">
<input type="button" value="Yeniden Dene" onClick="yeniden()">
</body>
</html>

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