JavaScript ile Rastgele Veri

Merhaba arkadaşlar. Bugün JavaScript ile rastgele veri üreten bir döngü hazırlayacağız. Bu işlem için rasgele veri yayınlayan bir fonksiyon ve gösterilmesini istediğimiz kayıtları hazırlayacağız. Bunu hazırlarken Dave Rupert’ın eğlenceli örneği üzerinden gideceğiz.

Bir proje üzerine yoğun bir şekilde çalışırken sizi arayarak dışarı çağıran arkadaşlarınız artık sorun değil. Mazeret üretici hizmetinizde !

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

İşlemlerimize JavaScript ile başlıyoruz. Daha sonrasında CSS ve HTML kodlarımızı da ekleyeceğiz. Aşağıdaki kodları <script></script> tagları içerisine eklemeniz yeterli olacaktır. Script’in html kodlarımızın en altında olması gerekiyor.

İlk olarak listelenmesi için verileri hazırlıyoruz. Bunları var mazaretler olan yaratıyoruz.

var mazaretler = [
'Saçımı yıkamam gerek.',
'Halam kasabada.',
'Halam çok hasta.',
'Patronum ondan haber beklememi söyledi.',
'Klimamı tamir etsin diye bir tamirci çağırdım.',
'Hava alanına bir arkadaşımı bırakmak zorundayım.',
'Geçen hafta bir kaza geçirdim ve trafiğe çıkmaya hazır değilim.',
'Daha önce orada yedim ve gıda zehirlenmesi geçirdim.',
'Kafam çok karışık. Daha sonra açıklarım.',
'Babam bir polis.',
'Ben bu şey için gönüllü değilim.',
'Hava biraz kötü galiba.',
'Daha önce ayağımı kesmiştim. Ayakkabı giyince içi kan ile doluyor.',
'Annem kuduz oldu.',
'Ben zaten sarhoşum. Siz keyfinize bakın.',
'Bu gece YouTube gecesi.',
'eBay\'da takip ettiğim bir açık arttırma var.'
];

Şimdi her yenilemede farklı mazeret çıkmasını sağlayan düğmeyi ve fonksiyonu oluşturuyoruz.

var bttn = document.getElementById('yenile');
var mazeret = document.getElementById('mazeret');
var rasgele = 0;

var mazeretbul = function(){
rasgele = Math.floor(Math.random()*mazaretler.length);
mazeret.innerHTML = mazaretler[rasgele];
};

mazeretbul();

bttn.addEventListener('click',function(e){
e.preventDefault();
mazeretbul();
});

Mazeretimizi block haline getirelim. Ve yazı rengi için yeşil ayarlayalım. İşte kullanacağımız tek satırlık CSS kodu

CSS

#mazeret{display:block; color: green;}

HTML kodları

Gelemem çünkü...
<span id="mazeret"></span>
<button id="yenile">Mazeret Üret</button>

Örneğimiz hazır.

Kapanış

Web tasarımı üzerine araçlar hazırlarken anlaşılır örnekler seçmeye dikkat ediyoruz. Mazeret ölçer de gayet eğlenceli ve basit bir örnek. Dave amcanın bizler için hazırladığı bu küçük örnek için ona teşekkür ederiz. Bir sonraki makalemizde görüşmek üzere tabii bir mazeretiniz olmazsa…