Merhaba arkadaşlar bu yazımda Javascript ile rastgele renk üreten basit bir uygulama yazacağız.

Yaptığım tasarımı örnek vermek gerekirse

Uygulama için Yaptığım Tasarım

HTML

<div class = “color”>

<span class=”hex”>#390C60</span>

<button onclick=”colorGenerator()”>Yeni Renk Üret</button>

</div>

Javascript

function colorGenerator(){

var symbols,color;

symbols = “0123456789ABCDEF”;

color = “#”;

for(var i=0;i<6;i++){

color = color + symbols[Math.floor(Math.random() * 16)];

}

document.body.style.background = color;

document.getElementById(“hex”).innerHTML = color;

}

Şimdi bu kodları açıklamakla başlayalım

var symbols, color;

symbols = “0123456789ABCDEF”;

color = “#”;

Buradaki symbols değişkeni bir renk kodunda olabilecek tüm elemanları içine yazıyoruz renk kodlarını incelersiniz 0-9’a kadar ve A-F’ye kadar olan rakam ve harflerin karışımından oluşur.

color değişkeni ise renk kodlarının başındaki # işaretine eşitliyoruz.

for (var i=0;i<6;i++){

color = color + symbols[Math.floor(Math.random()*16)];

}

Burada bir döngü oluşturuyoruz ve bu döngü 6 kez çalışması gerekiyor çünkü bir renk kodunda 6 adet karakterden oluşur.

symbols[Math.floor(Math.random()*16)];

Burada önemli olan iki fonksiyon

  • Math.floor()
  • Math.random()

Math.floor()

Bu fonksiyon girilen sayının en yakın değerine yuvarlar 0.9 girersek 1 olarak geri döner 6.1 girersek 6 değerini döndüren bir fonksiyondur.

Math.random()

Bu ise rastgele bir sayı üretmek için vardır ama 0 ile 1 arasında bir sayı üretir biz ise kodumuzda

Math.random()*16 olarak kullanıyoruz böylece 0-16 arasında bir sayı üretecektir ama asla 16 sayısını geri döndürmeyecektir. 16 sayısını döndürmemesini istememizim sebebi ise symbols değişkeninin bir dizi olması. Yani symbols değişkenin de 16 adet karakter olsa bile dizilerin key değerleri 0’dan başlayacağı için bize vereceği maksimum değerin 15 olmasını istiyoruz.

Daha sonra bu değeri color’a eşitleyerek yeni bir renk üretiyoruz.

document.body.style.background = color;

document.getElementById(“hex”).innerHTML = color;

Bu kodların ilk olanı arka plan rengini yeni oluşturulan renge çevirecektir.

2. kod ise id özelliği hex olan elementin HTML kodlarını oluşturduğumuz a eşitliyor. Böylece ürettiğimiz rengin, renk kodunu almış oluyoruz.

Bu yazımda Javascript kullanarak Yeni Renk Üretme uygulamasını yaptık ve bazı matematik fonksiyonlarını öğrenmiş olduk.