Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / D i ğ er Ko n u l a r & İ p u çl a rı / J a va Scri p t i l e R a stg el e Veri
JavaScript ile Rastgele Veri Vatanay Özbeyli tarafından 29 Haziran 2013 tarihinde yazıldı. ~ 1 Yorum + Değiştir
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 !
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. 1 2 3 4 5 6 7 8
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.', 9 'Daha önce orada yedim ve gıda zehirlenmesi geçirdim.',
10 11 12 13 14 15 16 17 18 19
'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. 1 2 3 4 5 6
var bttn = document.getElementById('yenile'); var mazeret = document.getElementById('mazeret'); var rasgele = 0;
var mazeretbul = function(){ rasgele = Math.floor(Math.random()*mazaretler.length); 7 mazeret.innerHTML = mazaretler[rasgele]; 8 }; 9 10 mazeretbul(); 11 12 bttn.addEventListener('click',function(e){ 13 e.preventDefault(); 14 mazeretbul(); 15 }); Mazeretimizi block haline getirelim. Ve yazı rengi için yeşil ayarlayalım. İşte kullanacağımız tek satırlık CSS kodu
CSS 1 #mazeret{display:block; color: green;}
HTML kodları 1 Gelemem çünkü... 2 <span id="mazeret"></span> 3 <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…
Benzer Konular: Animasyon ile Metin Renklendirme HTML5 ve Google Map ile Yerinizi Bulun jQuery ile Yılan Oyunu jQuery ile Minimum ve Maksimum Karakter Limitli Form… Görsellerinize Büyüteç ile Bakın
Yazı Kategorisi : Diğer Konular & İpuçları , Tasarım Unsurları Anahtar Kelimeler : .js , javascript , javascript ile rasgele veri , listeleme , random , rasgele , rastgele , sıralama , veri , yayınlama