Çözüldü JavaScript'te rastgele isim oluşturma nasıl yapılır?

  • Konuyu başlatan hayl0s
  • Başlangıç Tarihi
  • Mesaj 5
  • Görüntüleme 1.612
Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

hayl0s

Hectopat
Katılım
17 Eylül 2021
Mesajlar
742
Çözümler
5
Daha fazla  
Cinsiyet
Erkek
Meslek
Öğrenci
Selam. Olayı basitçe açıklamam gerekirse kullanıcı sayfayı her yenilediğinde ekranda random 3 harfli bir isim oluşacak. Her harfi içine dahil ediyor ilk ve son harfler sessiz ortadaki harfin sesli olma kuralı var. İnternette araştırdım ama bulamadım. Bildiğiniz hazır kod varsa paylaşır mısınız?
 
Çözüm
Bu şekilde hallettim oldu.

JavaScript:
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<span id="operator"></span>
<span id="operator2"></span>
<span id="operator3"></span>
<script type="text/javascript">
    function sessiz(min,max){
        var number=Math.floor(Math.random()*21);
        return number;
    }

    function sesli(min,max){
        var number=Math.floor(Math.random()*8);
        return number;
    }
    function sessiz2(min,max){
        var number=Math.floor(Math.random()*21);
        return number;
    }
    operator=document.getElementById('operator');
    var dizi=["b","c","ç","d","f","g","ğ","h","j","k","l","m","n","p","r","s","ş","t","v","y","z"];
    operator.textContent=dizi[sessiz()];

    operator2=document.getElementById('operator2');
    var dizi=["a","e","ı","i","o","ö","u","ü"];
    operator2.textContent=dizi[sesli()];

    operator3=document.getElementById('operator3');
    var dizi=["b","c","ç","d","f","g","ğ","h","j","k","l","m","n","p","r","s","ş","t","v","y","z"];
    operator3.textContent=dizi[sessiz2()];


</script>
</body>
</html>
JavaScript:
const sesliHarfler = ["a", "e", "ı", "i", "o", "ö", "u", "ü"]

const sessizHarfler = ["z", "y", "v", "t", "ş", "s", "r", "p", "n", "r", "m", "l", "k", "h", "j", "ğ", "g", "d", "ç", "c", "b"]

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

function generateRandomName(){
    const sesliHarf = sesliHarfler[getRandomInt(sesliHarfler.length)]
    const sessizHarf = []

    for (let index = 0; index < 2; index++) {
        sessizHarf.push(sessizHarfler[getRandomInt(sessizHarfler.length)])
    }

    return `${sessizHarf[0]}${sesliHarf}${sessizHarf[1]}`
}
//Sayfa açıldığında bu metodu çağırarak istediğin tipte bi isim yarattırabilirsin.
const result = generateRandomName()
console.log(result)

Örnek çıktılarım:
1673115633540.png
 
Bu şekilde hallettim oldu.

JavaScript:
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<span id="operator"></span>
<span id="operator2"></span>
<span id="operator3"></span>
<script type="text/javascript">
    function sessiz(min,max){
        var number=Math.floor(Math.random()*21);
        return number;
    }

    function sesli(min,max){
        var number=Math.floor(Math.random()*8);
        return number;
    }
    function sessiz2(min,max){
        var number=Math.floor(Math.random()*21);
        return number;
    }
    operator=document.getElementById('operator');
    var dizi=["b","c","ç","d","f","g","ğ","h","j","k","l","m","n","p","r","s","ş","t","v","y","z"];
    operator.textContent=dizi[sessiz()];

    operator2=document.getElementById('operator2');
    var dizi=["a","e","ı","i","o","ö","u","ü"];
    operator2.textContent=dizi[sesli()];

    operator3=document.getElementById('operator3');
    var dizi=["b","c","ç","d","f","g","ğ","h","j","k","l","m","n","p","r","s","ş","t","v","y","z"];
    operator3.textContent=dizi[sessiz2()];


</script>
</body>
</html>
 
Son düzenleme:
Artı -1 Eksi
Çözüm
Çok saçma ve uzun bir çözüm olmuş, daha kısaca şöyle yapılabilir:
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Technopat</title>
  </head>
  <body>
    <h1 id="rndName"></h1>
    <script>
      document.getElementById("rndName").textContent = randomName();
      function randomName() {
        const sesli = [..."aeiou"], sessiz = [..."bcdfghjklmnpqrstvwxyz"];
        return (
          sessiz[~~(Math.random() * sessiz.length)] +
          sesli[~~(Math.random() * sesli.length)] +
          sessiz[~~(Math.random() * sessiz.length)]
        );
      }
    </script>
  </body>
</html>
Ek bilgi olarak ekleyeyim, ~~ kullanmak Math.floor() kullanmaktan daha hızlı. Alfabe dizisi oluştururken de ES6 spread operatörünü kullandım. Anlamadığınız yerleri sorabilirsiniz.
 
Son düzenleme:
Mantığı nedir hocam nasıl öğrenebilirim?
~ bitwise not operatörü olarak bilinir. Bitwise operatörler işaretli 32 bit integer değerler ile çalışabildiğinden (>>> hariç), Math.random() * length yapınca çıkan sayıyı iki kez tersine çeviriyoruz ve bu sayede tam sayıya ulaşıyoruz. Umarım anlatabilmişimdir.
 

Technopat Haberler

Geri
Yukarı
09:05:00