Bu blogu yazmamın temel amacı javascript class örnekleri oluşturup bunun kullanımı ile ilgili küçük bir örnek yapmak. Örneğimiz alarm örneği olacak. Mantık şöyle işleyecek. Biz dakika ya da saniye cinsinden alarmımıza süre ekleyeceğiz ve zaman dolduktan sonra yapılacak fonksiyonu ayarlayacağız.
Dosya ayarları
Örneğimiz web üzerinde yapacağız. Bu yüzden bir html ve bir javascript dosyasına ihtiyacımız var
alarmExample
-index.html
-alarm.js
Ben bu şekilde oluşturdum dosyaları. Html dosyamızı oluşturalım ve gerekli etiketleri yazalım.
Javascript dosyasını dahil edelim
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascrit Class Örnekleri</title>
</head>
<body>
<p id="alarmId"></p>
<script src="alarm.js" type="text/javascript"></script>
</body>
</html>
Burada gerekli kodları yazacağımız alarm.js dosyasını dahil etmiş olduk. Ve bir tane p etiketine id olarak “alarmId” vermiş olduk. Bu etikete daha sonra alarm.js üzerinde erişip kalan saniyeleri yazacağız.
Ve alarm.js
Evet dosyamızı oluşturduk. İlk olarak bir class oluşturalım. Ben bu class’a Alarm adını veriyorum. Ve içerisine 2 tane değişken oluşturacağız.
- Dakikaları tutacağımız değişken
- Saniyeleri tutacağımız değişken
İlk olarak şu şekilde bir görünümü olmalı.
class Alarm{
dakika=0;
saniye=0;
}Dakika ve saniyeleri güncelleyelim
Evert şimdi ihtiyacımız olan şey dakika veya saniye girildiğinde yukarıda verilen değişkenleri güncelleyecek fonksiyonu yazmak. Dakika olan ile başlayalım.
dakikaEkle(dakika) {
//Dakikayı saniye cinsine çevirelim
this.dakika = dakika * 60;
}Evet dakikaEkle adındaki methodumuz bir parametre alacak. Gelen dakikayı 60 ile çarpıp saniyeye çeviriyoruz çünkü biz toplam süreyi 1 saniye olarak azaltacağız.
saniyeEkle(saniye) {
this.saniye = saniye;
}saniyeEkle ile gelen parametreyi doğrudan en başta oluşturduğumuz saniye değişkenine atıyoruz.
Alarmı başlatalım
baslat() {
var toplamSaniye = this.dakika + this.saniye;
var alarmMetin = document.getElementById("alarmId");
if (toplamSaniye === 0) {
alarmMetin.innerHTML =
"Alarm için minimum 1 saniye gereklidir";
} else {
var azalt = setInterval(() => {
if (toplamSaniye <= 0) {
this.bitinceYap();
clearInterval(azalt);
}
alarmMetin.innerHTML = toplamSaniye;
toplamSaniye--;
}, 1000);
}
}Burada baslat adında bir method oluşturduk. toplamSaniye içerisinde daha önceden saniyeye çevirdiğimiz dakikayı ve saniyeyi topladık. Eğer toplamSaniye 0’dan küçükse az önce html üzerinde oluşturduğumuz alarmId id’sine sahip p etiketine alarm için gerekli saniyenin en az 1 saniye olması gerektiğiniz yazdırdık. Eğer saniye 0’dan büyükse azalt adında bir değişken ile setInterval() fonksiyonunu kullanarak her seferinde toplamSaniye’yi 1 saniye azalttık
setInterval’i yakından inceleyelim
setInterval(()=>{
//burada belirli aralıkla yapılmasını istediklerimizi yazarız
}, 1000);
Buradaki 1000 = 1 saniyedir. Yani burada her 1 saniyede yukarıda yazdığımız fonksiyon tekrar tekrar çalışacaktır. Dilersek burayı arttırıp azaltabiliriz. clearInterval ile bu fonksiyonu durduruyoruz. Burada diğer önemli nokta this.bitinceYap() kısmı. Şimdi buraya bakalım. Html dökümanımızı açalım ve şunları ekleyelim
<script src="alarm.js" type="text/javascript"></script>
<script type="text/javascript">
//Bir Alarm objesi oluşturalım
var alarm = new Alarm();
//Örnek olarka 3 dakika ve 10 ekledim
alarm.dakikaEkle(3);
alarm.saniyeEkle(10);
//Bitince yapmasını istediğimiz fonksiyon
alarm.bitinceYap = function (){
alert("Süre bitti")
}
//Son olarak alarmı başlatalım
alarm.baslat();
</script>alarm.bitinceYap buna bir fonksiyon tanımladık. Ben örnek olarak bir alert verdirmek istedim. Burada yazdığımız fonksiyon süre bittiğinde çalışacaktır.
Basitçe javascript class oluşturduk. Class içerisindeki verileri html üzerinden güncelleyceğimiz fonksiyonlar yaptık ve setInterval konusuna hızlı bir bakış atmış olduk. Aşağıda tarih hesaplama ve alarm üzerine daha önceden oluşturduğum örnek kodlar var isterseniz oraya da bakabilirsiniz. Github linki:
