Merhaba, bu defa daha sonraki uygulamalarda kullacağımız ve bizi kod yazmaktan kurtaracak basit uygulama hazırlayacağız. Buradaki amacımız 4x8 (sutun x satir) bir tabloyu kullanarak bu matris üzerinde fare ile tıklamalar yaparak istediğimiz küçük desenleri oluştururken, bu deseni elde edebilmek için yazılmasını istediğimiz javascript kodları da üretmektir. Bu uygulamayı kullanarak 0-9 yukarı aşağı sayıcı ve dijital saat uygulamalarını yaptık ve bu uygulamalardaki sayıları desen kodlama uygulaması ile elde ettik bu bizi büyük bir işçilikten kurtardı. Uygulama tamamlandığında aşağıdaki gibi bir sonuç elde edilcektir. Burada önemli olan sizin css ile hücreleri biçimlendirirken hangi kodları yazdırmak istediğinizdir ki amacınıza göre kodlar üzerinde istediğiniz değişikleri yapabilirsiniz.
İlk olarak çalışmanın HTML kodlarına bakalım; aynı sonucu elde edebilmek için yeni bir .html uazntılı metin dosyası oluşturmanız ve sizlere aşağıda verdiğim kodları yazmanız gerekiyor ya da daha kolayı bunları kopyalarak blegenize yapıştırabilirsiniz.
< body onload="temizle()" >
< table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" >
< tr >
< td height="5%" id="baslikTD" colspan="3" >Desen Kodlama</ td >
</ tr >
< tr >
< td colspan="3" height="90%" align="center" valign="middle" >
< !--Desen yapilacak tablo basi-- >
< table border="0" cellpadding="0" cellspacing="0" >
< tr >
< td id="huc11" onclick="aktifPasif(11)" class="hucre" > </ td >
< td id="huc12" onclick="aktifPasif(12)" class="hucre" > </ td >
< td id="huc13" onclick="aktifPasif(13)" class="hucre" > </ td >
< td id="huc14" onclick="aktifPasif(14)" class="hucre" > </ td >
< td rowspan="7" id="ozelHucre" >
< !-- < div id="kodAlani" ></ div >-- >
< textarea id="kodAlani" > </ textarea >
</ td >
</ tr >
< tr >
< td id="huc21" onclick="aktifPasif(21)" class="hucre" > </ td >
< td id="huc22" onclick="aktifPasif(22)" class="hucre" > </ td >
< td id="huc23" onclick="aktifPasif(23)" class="hucre" > </ td >
< td id="huc24" onclick="aktifPasif(24)" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc31" onclick="aktifPasif(31)" class="hucre" > </ td >
< td id="huc32" onclick="aktifPasif(32)" class="hucre" > </ td >
< td id="huc33" onclick="aktifPasif(33)" class="hucre" > </ td >
< td id="huc34" onclick="aktifPasif(34)" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc41" onclick="aktifPasif(41)" class="hucre" > </ td >
< td id="huc42" onclick="aktifPasif(42)" class="hucre" > </ td >
< td id="huc43" onclick="aktifPasif(43)" class="hucre" > </ td >
< td id="huc44" onclick="aktifPasif(44)" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc51" onclick="aktifPasif(51)" class="hucre" > </ td >
< td id="huc52" onclick="aktifPasif(52)" class="hucre" > </ td >
< td id="huc53" onclick="aktifPasif(53)" class="hucre" > </ td >
< td id="huc54" onclick="aktifPasif(54)" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc61" onclick="aktifPasif(61)" class="hucre" > </ td >
< td id="huc62" onclick="aktifPasif(62)" class="hucre" > </ td >
< td id="huc63" onclick="aktifPasif(63)" class="hucre" > </ td >
< td id="huc64" onclick="aktifPasif(64)" class="hucre" > </ td >
</ tr >
< tr >
< td id="huc71" onclick="aktifPasif(71)" class="hucre" > </ td >
< td id="huc72" onclick="aktifPasif(72)" class="hucre" > </ td >
< td id="huc73" onclick="aktifPasif(73)" class="hucre" > </ td >
< td id="huc74" onclick="aktifPasif(74)" class="hucre" > </ td >
</ tr >
</ table >
< !-- Desen yapilacak tablo sonu -- >
</ td >
</ tr >
< tr >
< td height="5%" width="10%" id="konumTD" ></ td >
< td height="5%" width="80%" align="center" >
< input id="btnKopyala" type="button" value="Kodu panoya kopyala" onclick="panoyaKopyala()"/ >
< input id="btnTemizle" type="button" value="Temizle" onclick="temizle()"/ >
</ td >
< td height="5%" width="10%" id="tasarimciTD" >www.bilalsert.com.tr</ td >
</ tr >
</ table >
</ body >
Şimdi ise sayfamızın işlevsellik kazanması için yazmamız gereken javascript kodlarına bir gözatalaım. Aşağıdaki javascript kodlar ile sayfamız çalışır hale gelecek ve bizim yaptığımız tıklamalara cevap vererek gereken css düzenlemelerini yaparken aynı zamanda bu sonucu üretecek kodları da < textarea / > nesnesine ekleyecektir.
<script type="text/javascript" language="javascript">
// Global degisken tanimlamalari yapiliyor. Buradaki degiskenler
// tüm fonksiyonlarda çağırılarak kullanilabilir.
function aktifPasif(hid){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 23:15
// Amaç : Bir hucrenin sinifini degistirmek
// Giriş/Çıkış : hid (hucrenin numarasi)
// Çağrıldığı yer : Tum hucrelerin click olaylari
/////////////////////////////////////////////////////////////////
var nesne=eval("huc" + hid);
if(nesne.className=='hucre'){
nesne.className="etkinHucre";
}else{
nesne.className="hucre";
}
kodla();
konumTD.innerHTML="< span style=\"color:crimson\">" +nesne.id + "";
}//fareNerede
function kodla(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 23:15
// Amaç : Desenin etkin hücrelerini listelemek
// Giriş/Çıkış : yok
// Çağrıldığı yer : aktifPasif() fonksiyonu
/////////////////////////////////////////////////////////////////
var i=0,j=0;
//kodAlani.innerHTML="";
kodAlani.value="";
for(i=1;i<8;i++){
for(j=1;j<5;j++){
var hedef=eval("huc" + i + j);
if(hedef.className=="etkinHucre"){
//kodAlani.innerHTML+=hedef.id + ".className=\"etkinHucre\";
//kodAlani.value+=hedef.id + ".className=\"etkinHucre\";\n";
//karakteri sol degiskeni kadar sağa sola oteleyebilen kod
kodAlani.value+="hedef=eval(\"huc" + i + "\"+(sol + " + j
+")); hedef.className=\"etkinHucre\";\n";
}
}
}
}//kodla
function panoyaKopyala(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 23:50
// Amaç : elde edilen metni panoya kopyalamak
// Giriş/Çıkış : yok
// Çağrıldığı yer : btnKopyala.click() fonksiyonu
/////////////////////////////////////////////////////////////////
var kopyalananMetin = kodAlani;
kopyalananMetin.select();
//kopyalananMetin.setSelectionRange(0, 99999); /*mobil cihazlar icin*/
document.execCommand("copy");
}//panoyaKopyala
function temizle(){
/////////////////////////////////////////////////////////////////
// Tasarim ve kodlama : Bilal SERT
// Tarih-Saat : .../.../2019 | 23:50
// Amaç : Sayfayi ilk konumuna döndürmek
// Giriş/Çıkış : yok
// Çağrıldığı yer : btnTemizle.click(), body.onload()
/////////////////////////////////////////////////////////////////
var i=0,j=0;
//kodAlani.innerHTML="";
kodAlani.value="";
for(i=1;i<8;i++){
for(j=1;j<5;j++){
var hedef=eval("huc" + i + j);
hedef.className="hucre";
}
}
}//temizle
</script>
Son olarak ise aşağıda verdiğim css kodlarını yazarak sayfanın görsel olarak eş görünümünü elde edebilirsiniz. Elbette burada kullanılan css kodlarını kullanmak zorunda değilsiniz kendi istediğiniz doğrultusunda biçimlendirmeler yaparak farklı css kodları da kullanabilirsiniz.
<style type="text/css">
#baslikTD{
background-color:#eee;
color:gray;
text-align:center;
font-size:24px;
border:1px solid gray;
}
#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:14px;
font-weight: bold;
border:1px solid gray;
padding-left: 10px;
}
.hucre{
width:45px;
height:45px;
border:1px solid gray;
background-color:#eee;
}
.etkinHucre{
width:45px;
height:45px;
border:1px solid gray;
background-color:#0066ff;
}
#ozelHucre{
width:200px;
border:1px solid gray;
background-color:#eee;
}
#kodAlani{
width:470px;
height:315px;
color:crimson;
font-family:arial;
overflow: scroll;
background-color:gainsboro;
}
< / style>