Atölye çalışması-10(Sayısal Loto)


Merhaba, bu defa sizlerle birlike Math() nesnesini kullarak Sayısal Loto 6/49 uygulamasını yazacağız. Bu uygulamayı yazarken; rasgele sayı üretebilmek için Math.random(); fonksiyonunu ve sayıları yuvarlarken ise Math.round(); fonksiyonunu kullanacağız. Burada dikkat edeceğimiz birkaç husus var ki onları şöyle özetleyebiliriz.

  1. Rasgele tutacağımız herbir sayi 1-49 arasında bir değere sahip olmalıdır,
  2. 6 adet sayıdan oluşan bir sayı kümesinde her sayı diğerinden farklı olmalıdır,
  3. Kullanıcının belirleyeceği kolon adedince (her kolon 6 adet sayıdan oluşuyor) sayılar üretilmelidir ve aynı sayı farklı kolonlarda tekrarlanabilir,
  4. Her kolondaki sayılar küçükten büyüğe sıralanmalıdır ki ben burada kabarcık (buble sort) sıralama yöntemini tercih ettim.

Tabii ki kullabileceğiniz fonksiyonlar bu ikisinden ibaret değildir, diğer standart matematik fonskiyonlarında birkaçına kabaca değinecek olursak:

  1. Math.floor(): Tabana yuvarlama işlemi yapar yani en yakın küçük tamsayıya yuvarlar. Math.floor(5.8); çalıştığında 5 sonucunu üretecektir
  2. Math.ceil(): Tavana yuvarlama işlemi yapar yani en yakın büyük tamsayıya yuvarlar. Math.floor(5.3); çalıştığında 6 sonucunu üretecektir
  3. Math.trunc(): Ondalıklı sayının tam sayı kısmını alır. Math.trunc(7.43); çalıştığında 7 sonucunu üretecektir
  4. Math.abs(): Mutlak değer alır. Math.abs(-5.8); çalıştığında 5.8 sonucunu üretecektir
  5. Math.min(): Bir sayı dizisindeki en küçük sayıyı verir Math.min(5,80,100,-10); çalıştığında -10 sonucunu üretecektir
  6. Math.max(): Bir sayı dizisindeki en büyük sayıyı verir Math.min(5,80,100,-10); çalıştığında 100 sonucunu üretecektir
  7. Math.pow(taban,üs): Bir sayının üssünü alır.Math.pow(5,3); çalıştığında (5x5x5=) 125 sonucunu üretecektir
  8. Math.sqrt(): Bir sayının karekökünü alır Math.sqrt(1024); çalıştığında 32 sonucunu üretecektir
  9. Math.sin(), Math.cos(), ve Math.tan(): Temel trigonotmetrik fonksiyonlardır ve tamamı radyan türünden açısal değerler kullanırlar özetle 30 derecenin sinüsünü hesaplamak için Math.sin(30); yazıldığında 0.5 sonucunu ÜRETMEZ. Math.sin(30/180*Math.PI); şeklinde kullanarak denemenizi tavsiye ediyorum
  10. Math.log(): Doğal logaritma alırken kullanılır. Yani eskiden liselerde matematik derslerin ln şeklinde anlatılan ve tabanı yaklaşık 2.718281 olan logaritmadır. Artık birilerine göre Meslek Liselerinde matematik gereksiz ders ilan edildiği için siz bilemeyebilirsiniz. Math.log(2.718281); çalıştığında yaklaşık 0.999999 vb. sonucunu üretecektir

Çalışmayı tamamladığınızda aşağıda verdiğim gibi bir web sayfanız olacaktır. İstediğiniz kolon adedini seçtikten sonra Şansımı denemek istiyorum tuşuna bastığınızda sonuçlar tablo halinde listelenecektir.

Sayfamızın HTML kodları ise aşağıda verdiğim gibidir. Bu kodların  içerisinde JavaScript tarih zaman fonksiyonları kullanılarak sayfada 12 Haziran Cuma gibi bir tarih bilgisi görüntülenmektedir.

< body >
< table width="100%" height="100%" style="border:2px solid #ccc" >
< tr >
	< td style="height:60px;" colspan="3" >
	< h1 id="menu" style="width:100%; background-color:#eee; text-align:center" >Sayısal Loto 6/ 49< / h1 >
	< / td >
< / tr >
< tr >
	< td align="center" style="height:60px;" colspan="3" >
	< input id="btnOynat" class="kontroller" type="button"value="Şansımı denemek istiyorum" onclick="oynat()" /  >
	< / td >
< / tr >
< tr >
	< td align="center" style="height:60px;" colspan="3" >
	  < select id="kolSay" class="kontroller" >
		< option >1 kolon< / option >
		< option >2 kolon< / option >
		< option >3 kolon< / option >
		< option >4 kolon< / option >
		< option >5 kolon< / option >
		< option >6 kolon< / option >
		< option >7 kolon< / option >
		< option >8 kolon< / option >
	  < / select >		
	< / td >
< / tr >
 
< tr >
	< td align="center" valign="top" colspan="3" >
	< !-- Burada sonuclar gosterilecek -- >
	< div id="sonuclar" width="100%" height="100%" >
 
	< / div >	
	< / td >
< / tr >
< tr >
	< td height="5%" width="10%" id="konumTD" >
	< script >	
	var tarih= new Date();
	var gunler=["Pazar","Pazartesi","Salı","Çarşamba","Perşembe","Cuma","Cumartesi"];
	var aylar=["Ocak","Şubat","Mart","Nisan","Mayıs","Haziran",
	           "Temmuz","Ağustos","Eylül","Ekim","Ekim","Kasım","Aralık"];
	document.write(tarih.getDate() +" "+ aylar[tarih.getMonth()] + " " +   gunler[tarih.getDay()]);
	< / script >
 
	< / td >
	< td height="5%" width="80%" align="center" >
	 
	< / td >
	< td height="5%" width="10%" id="tasarimciTD" >www.bilalsert.com.tr< / td >
< / tr >
< / table >
< / body > 

Sayfamızın etkin bir biçimde çalışabilmesi yani yukarıda uzun uzadıya açıkladığım işlerin yapabilmesi için aşağıda verdiğim JavaScript kodların yazılması gerekemektedir. Kodlardan sonra verdiğim açıklamaların kafi olduğunu düşüyorum be nedenle fazladan bir açıklama yazmaya ihtiyaç duymuyorum.

<script language="javascript" type="text/javascript">	
var satir=0;
var sutun=0;
//var sayilar = new Array();
var sayilar=[];
function tahminGetir(){
var i=0,j=0;
var durum=true;
var gecici=0;
//6 sayi tahmini yapiliyor
for(i=0;i<6;i++){
if(i==0){
	//ilk tahmin dogrudan aliniyor
	sayilar[i]=Math.round(Math.random()*48+1);
}else{
	//sonraki tahminler digerleri ile karsilastiriliyor
	//ayni kolondaki tahminlerin hepsi birbirinden farkli olsun
	gecici=Math.round(Math.random()*48+1);
	durum=true;
	for(j=0;j<i;j++){
	if(sayilar[j]==gecici){
	i--;
	durum=false;
	break;
	}//if
	}//j
	if(durum==true)sayilar[i]=gecici;
}//if
}//for

//tahminler kucukten buyuge siralaniyor
do{
durum=false;
for(i=0;i<5;i++){
if(sayilar[i]>sayilar[i+1]){
gecici=sayilar[i];
sayilar[i]=sayilar[i+1];
sayilar[i+1]=gecici;
durum=true;
}//if
}//for
}while(durum);	
}//end of tahminGetir

function oynat(){
var bilgi="< table style=\"border:2px solid #0066ff\" >";
var secilen=kolSay.value;

for(satir=0;satir<parseInt(secilen[0]);satir++){
bilgi + = "< tr >";
///tahminler isteniyor	
tahminGetir();
for(sutun=0;sutun<6;sutun++){				
	bilgi + = "< td align='center' valign='middle' class='deger'>"+ sayilar[sutun] + "< / td >";   
	
}//satir
bilgi + = "< / tr>";
}//sutun
bilgi + = "< / table >";
sonuclar.innerHTML = bilgi;
}//end of oynat

< / script>


Son olarak sayfamızın CSS kodlarını yayınlayalım. Burdaki sınıflarda oynama yaparak istediğiniz görüntüyü elde edebilirsiniz.

<style type="text/css">
.deger {
background-color: #eee;
color: crimson;
overflow: hidden;
font-size:22px;
font-name: tahoma;
border: 1px dashed crimson;
width:43px;
height: 40px;
}
.kontroller{
width:300px;
height:40px;
font-size:16px;
color:#fff;
font-name: tahoma;
background-color:#0066ff;
}
#tasarimciTD{
background-color:#ddd;
color:crimson;
text-align:right;
padding-right: 10px;
font-size:14px;
font-weight: bold;
border:1px solid gray;
}
#konumTD{
color:black;
background-color:#ddd;
text-align:left;
font-size:12px;
font-weight: bold;
border:1px solid gray;
padding-left: 10px;
}	
< / style>