JavaScript ile Rastgele Sayı Üretme

Bu yazımızda Bootstrap ile Rastgele sayı üreteceğiz, Spor Loto'da 1 ile 49 arası 6 sayı üretiyoruz. Normalde Math kütüphanesinden Random metodunu çağırdığınızda aşağıdaki gibi 0-1 arası bir sayı üretilir.

Math.random()
ile çağırdığınızda 0.286201499184667304 gibi 0 ile 1 arası bir sayı üretilir.

Math.floor(Math.random())
ile çağırdığınızda ise daima sıfır elde edilir Çünkü 0.5 gibi bir sayının floor ile alta doğru yuvarlarsak 0 elde ederiz. Bu nedenle önce hedeflediğimiz sayı ile çarpıyoruz. Örneğin 0 ile 100 arası üreteceksek 100 ile çarpıyoruz. 


Aşağıdaki JavaScript fonksiyonu 1 ile 49 arasında (1 ile 49 dahil) sayı üretir.  
Burada Math.floor(Math.random() * 48) ifadesi 0 ile 48 arası üreteceğinden 1 ekliyoruz.
rastgele=Math.floor(Math.random() * 48)+1; 




Sayfayı ilk açtığınızda yukarıdaki gibi görünecek, aşağıdaki gibi her tuşa basıldığında 6 tane sayı ürettirip bir diziye atalım daha sonra dizi elemanlarını sırasıyla div içerisine döngü ile yazdıralım. Bu örnek ile JavaScript'te rastgele sayı üretme ile birlikte hem dizileri hem de döngüleri kullanmış olacaksınız. 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rastgele </title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script>
        function uret(){
            var dizi=[];
            //1 ile 49 arasında 6 sayı ürettirip dizimize atıyoruz.
            for(i=0;i<7;i++){
                rastgele=Math.floor(Math.random() * 48)+1; 
                dizi.push(rastgele);
            } 
           
            document.getElementById("sayilar").innerHTML="";
 
            //tüm diziyi sayilar isimli div'e yazıyoruz
            for(i=0;i<7;i++)
            document.getElementById("sayilar").innerHTML+=dizi[i]+"<br>";
        }
    </script>
</head>
<body>
    <div class="container col-md-4">
        <h3>Spor Loto</h3>
        <button class="btn btn-primary mt-3" onclick="uret()">Rastgele Sayı Üret</button>
        <div class="alert alert-primary mt-3" role="alert" id="sayilar">
         
          </div>
    </div>
   
    
</body>
</html>

Butonun onclick olayında uret() fonksiyonunun çağrıldığına dikkat ediniz, böylelikle butona her bastığınızda farklı sayı üretecektir.

 
Yukarıdaki kodları yazarken Bootstrap kütüphanesini dahil ettik. Alert'ler için kullanılan tüm bileşenleri GetBootstrap'ın aşağıdaki adresinden görebilirsiniz.

https://getbootstrap.com/docs/4.0/components/alerts/ 

İyi çalışmalar diliyorum.

Mutlu kodlamalar,
Oğuzhan TAŞ
Mayıs 2023
 

Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale