Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodlib - Blog
  • React Native
  • Php
  • Javascript
  • Unity
No Result
View All Result
Kodliblog
No Result
View All Result

Javascript class örnekleri (Javascript alarm yapımı)

Enes Can Güneş by Enes Can Güneş
Nisan 16, 2020
in javascript

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:

basic-timer-and-alarm
ShareTweetShareSend
Enes Can Güneş

Enes Can Güneş

Yazılım Mühendisliği öğrencisi. Yazılım ile problem çözmekle uğraşan bir yazılım geliştirici. Javascript - Nodejs - Php

Related Posts

javascript var let const değişken tanımlama ve değişken türleri
javascript

JavaScript Değişken Tanımlama – var, let, const

Merhaba bu yazımda JavaScript ile değişken tanımlama (var, let, const) konusunu ve değişken türlerini anlatacağım. Umarım faydası olur iyi okumalar....

Ocak 2, 2021
29
Javascriptil ilçe
javascript

Javascript Json İl İlçe Seçimi

Bu blog yazımda javascript ile json dosyasını okuyup dinamik bir şekilde il ilçe seçimi yapmak. Projenin son kodlarını aşağıda vereceğim...

Ağustos 23, 2020
256
Javascript async await nedir
javascript

Javascript Async Await Nedir Nasıl Kullanılır?

Javascript async await nedir? Asenkron çalışmalar nerelerde kullanılır? Bundan önce Javascript promise nedir? adlı yazı yazmıştım. Bu yazımda ise async...

Temmuz 19, 2020
770
Javascript promise nedir
javascript

Javascript Promise Nedir? Neden Kullanılır?

Javacript promise yapısı gerçekten öenmli bir konu. Öğrendikten sonra görmediğiniz, kullanmadığınız yer neredeyse olmayacak. Peki javascript promise nedir? Javascript promise...

Mayıs 13, 2020
187
Next Post
Python kelime sayma

Python Kelime Sayma (Dosyadaki Kelimeleri Sayma)

Javascript arguments nedir

Javascript Arguments Nedir? Kullanım Örnekleri

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Önerilenler

Javascript promise nedir

Javascript Promise Nedir? Neden Kullanılır?

Mayıs 13, 2020
187
Laravel Cookie Kullanımı

Laravel Cookie Kullanımı (Cookie::queue ve Cookie::get)

Nisan 2, 2020
444
React native flatlist

React Native Flatlist Nedir? Kullanım Örnekleri

Mayıs 4, 2020
191
Javascript class örnekleri

Javascript class örnekleri (Javascript alarm yapımı)

Nisan 16, 2020
73

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Kodlib Hakkında

Kodlib Yazılım Hakkında bloglar içerir. Yazılım süreçleri, mühendislik ve bu süreçte yaşanan deneyimleri blog şeklinde sunar.
#EvdeKal
Copyright 2020 @kodlibcom

Kategoriler

  • expressjs
  • javascript
  • laravel
  • nodejs
  • php
  • python
  • react
  • react-native
  • Unity
  • web-progralama

Sosyal Medya

No Result
View All Result
  • React Native
  • Php
  • Javascript
  • Unity