İçeriğe atla

JavaScript ile Dijital Saat Yapimi

Evet biraz aradan sonra programlama yazilarimiza devam ediyoruz. Aslinda yazim hazirdi fakat bir sure kodun calisan halini sayfaya koyabilir miyiz diye arastirdik, fakat maalesef javascript kodu ileti icinde calismiyor. Simdilik sadeec anlatimla kalacagiz.

Ilk olarak anlattigim dillerin icinde en yaygin ve en kolay olani Javascript’ten kucuk bir ornek ile baslayacagiz. Ornegimiz dijital bir saat. Ilk once html kismini yazip ne kadar kolay oldugunu gostermek istiyorum:

<html>
<head>
<title> Clock </title>
</head>

<body>
<input type=”text” id=”time” disabled size=”5″ />
<button onClick=”StopIt();” > Stop the Clock </button>
<input type=”hidden” id=”Stop” value=”1″ />
</body>

</html>

Gordugumuz gibi html kismi cok kolay. Bir adet yazi kutusu (textbox), bir adet dugme (button), son olarak da bir tane hidden (gizli) elemanimiz var. Simdi bunlari kisaca aciklayalim.Textbox asikar ki bir deger girmeye yarayan bilesenimiz. Yalniz ben burda kullanicidan deger almak icin degil, elimdeki degeri bastirip gostermek icin kullandim. Bu sebeple etkisiz (disable) hale getirdim. Diger bilesenimiz dugme ve basildiginda tepki vermesi icin onClick ozelligine JavaScript kodu yazdik. Oradaki StopIt yanindaki parantezlerden anlasilacagi gibi bir fonksiyon. Son olarak da gizli bir bilesen koydum ki saati durdurmak istedigimizde bizi anlasin diye. Bunu binlerce yolla yapmak mumkun, fakat ben bu ilk anlatimimiz oldugu icin farkli bilesenler ve kombinasyonlar kullanmayi sectim. Cunku amac saat yapmak degil, kodun nasil yazilacagini ogrenmek. Siz de bu kismi degistirerek hangilerinin ne ise yaradigini ogrenebilir, daha cekici tasarimlar ortaya cikarabilirsiniz. Simdi de JavaScript kismina gecelim:

<script type=”text/JavaScript”>

var now = new Date();

changeTime();

function changeTime(){
if(now.getHours() < 10)
hours = “0” + now.getHours();
else
hours = now.getHours();
if(now.getMinutes() < 10)
minutes = “0” + now.getMinutes();
else
minutes = now.getMinutes();

if(now.getSeconds() < 10)
seconds = “0” + now.getSeconds();
else
seconds = now.getSeconds();

document.getElementById(“time”).value = hours + “:” + minutes + “:” + seconds;

if(document.getElementById(“Stop”).value == “1”)
setTimeout(changeTime,1000);
time = now.getTime();
now.setTime(time+1000);
}

function StopIt(){
document.getElementById(“Stop”).value = 0;
}

</script>

Bu kisim programciligi iyi bilmeyenler icin biraz zor gelebilir, ama herhangi bir dilde program yazan birine cok kolay gelecegine eminim. Oncelikle bir degisken tanimlayip su anki zamani onun icine yaziyoruz. Daha sonra da zamani degistiren fonksiyonumuzu calistiriyoruz. Iste bu kadar:) Tabi fonsiyonun ici en onemli olan kismi. Bastaki if/else bloguna bakmayin, onu sonra aciklayacagim. “document.getElementById” ile textbox’imizin icindeki degeri su anki zamanda yaptigimiz saatle dolduruyoruz. Sonra saati durdurma emrini aldik mi almadik mi onu kontrole diyoruz, almadiysak 1 sn’lik bir beklemeden sonra fonsiyonumuzu tekrar cagiriyoruz. Bu ne demek? Aslinda cok basit: 1 saniye bekle, sonra su anki zamani textbox’in icine yaz, sonra dur komutu gelmediyse tekrar 1 sn.bekle ve o anki saati kutuya yaz. Boylece her gecen saniye yeni zamani kutumuza yaziyoruz. Cok basit bir mantik. Daha sonraki iki satir o anki zamani, degiskenimizin icindeki 1 saniye onceki zamanla degistirmeye yariyor. Ve son olarak da durdurma komutumuz StopIt gizli elemanimizin degerini 0 (sifir) yaparak fonsiyonumuzun tekrar cagirilmasini onluyor. Iste butun espiri bu kadar. Yukardaki if/else blogunun aslinda hic bir islevselligi yok, sadece tek basamakli sayilarin yanina 0 (sifir ) ekleyerek 2 basamakli gozukmelerini sagliyor, boylece daha guzel bir dijital saat gorunumu elde ediyoruz. Ama bunu yapmazsak da saatimiz tikir tikir calisir.

Peki bu saat her zaman dogruyu gosterir mi? Aslinda hayir. Cunku bilgisayar komutlarinin da harcadigi bir zaman vardir, hepsinin cycle dedigimiz milisaniyelerle ifade edilen isgal ettigi zamani hesaplayip 1000 milisaniye bekleme suresinden cikartmamiz gerekir eger dosdogru bir saat istiyorsak. Fakat butun bu kod 10-20 ms icinde islendigi icin bu farki cok da onemsemedik. Yani kabaca bir saat icinde 3 kere saatimizin degismedigini ayni saati gosterdigini gorecegiz.
Asagida calisan hali var fakat gorebileceginizi hic sanmiyorum cunku wordpress calistirmiyor. Yine de sizin cok kolaylikla calistirabileceginiz bir program oldugu icin asagidaki kodun pek bir onemi yok. Ben yine de koyuyorum cunku bir gun yazilarda javascript calistirma ozelligini eklerlerse asagidaki saati gorebileceksiniz. Bir dahaki yazida gorusmek uzere..


Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

css.php