Yayınladığım tüm makaleler

Atölye çalışması-14 (Ders zili)

       Merhaba gençler bu defa da sizlerle birlikte ders zili uygulaması kodlayacağız. Uygulamamızda kullanıcı ders zilinin çalmasını istediği zaman bilgilerini bir liste kutusuna girecek ve uygulamamız da bu zaman geldiğinde ders zili dosyasını oynatacak. Kullanıcı için ayrıca zaman listesinden istemediği zaman bilgilerini çıkarabilmesi/silebilmesi için bir de sil düğmesi yer almaktadır. Ayrıca kullanıcı;  zamanı geldiğinde zil çalmaya başladığında şayet melodiyi sonuna kadar dinlemek istemezse durdur düğmesine basabilir fakat sistemin işlemeye devam edebilmesi için bu defa başlat düğmesine basılmalıdır yani durdur düğmesi sadece melodiyi değil zaman kontrol işlemini de durdurur. Uygulamada işletilen zaman bilgileri -tamam ile işaretlenmektedir yani 08:30 da melodi başlatıldıktan sonra listede 08:30-tamam şeklinde görüntülenmektedir ki böylece zaman bilgilerini belirli bir sıra ile girilmesine de gerek kalmamıştır. Bu uygulamanın doğru bir biçimde işleyebilmesi yani zil sesi melodisini oynatabilmesi için tarayıcıda seslerin oynatılmasına izin verilmelidir. Uygulamanın kodlanması tamamlandığında  aşağıdaki gibi ekran görüntüsü elde edilecektir. Bu uygulamaya; şayet ilgillenirseniz kullanıcının seçeceği dosyayı oynatmasını sağlayacak bölümü de sizler ekleyeyiniz.

Uygulamanın HTML kodları aşağıda verdiğim gibi olup oldukça sade ve anlaşılır bir tasarımı var. Burada div, select ve input etiketleri ile basit bir tasarım yaptık ki zaten kullanıcının muhatap olduğu bir liste kutusu ve farklı işlemler için 3 adet düğme bulunuyor. Burada div nesneleri ile konumlandırma yapmayı tercih ettik biliyorsunuz ki artık web sayfalarımızda table etiketi ile bir konumlandırma işlemi yapmıyoruz. Div nesneleri için yazdığım css sınıflarının kodlarını bu sayfanın en alt bölümünde verdim isteyen arkadaşlarım bunları değiştirerek farklı tasarımlar yapabilirler.

<html>
<head>
<title>..:: Zil Sesi ::..</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
 
</style>
<script type="text/javascript" lang="javascript">
 
</script>
</head>
<body onload="saatDakikaYukle('txtSaat'); saatDakikaYukle('txtDakika');calistir();">
<h1 id="baslik">Teneffüs zili uygulaması</h1>
 
<div class="sut">
 
<div class="satir">
<div class="etiket">Saat bilgisi</div>
<div class="deger">
	<select id="txtSaat" class="kontrol">
 
	</select>
	<span style="color:dodgerblue; font-size: x-large;">:</span>
	<select id="txtDakika" class="kontrol">
 
	</select>
 
	<input type="button" id="btnEkle" value="Ekle" class="kontrol" onclick="saatEkle('txtZaman')" />
	<input type="button" id="btnSil" value="Sil" class="kontrol" onclick="secileniSil()"  />
</div>
</div>
 
<div class="satir">
<div class="etiket">Zaman çizelgesi</div>
<div class="deger">
<select id="txtZaman" size="10" class="kontrol" style="width: 100%;">
	<option value="09:30">09:30</option>
	<option value="10:10">10:10</option>
	<option value="10:50">10:50</option>
	<option value="11:30">11:30</option>
	<option value="12:10">12:10</option>
	<option value="13:25">13:25</option>
	<option value="14:05">14:05</option>
	<option value="14:45">14:45</option>
	<option value="15:25">15:25</option>
	<option value="16:05">16:05</option>
</select>
</div>
</div>
 
<div class="satir">
<div class="etiket"> </div>
<div class="deger">
	<input type="button" id="btnBaslat" class="kontrol" value="Baslat" onclick="calistir()" />
</div>
</div>
 
<div class="satir">
<div class="etiket" id="zamanBilgisi"> </div>
<div class="deger" id="uyari">
	
</div>
</div>
</div>
<div id="sesliUyari"></div>
</body>
</html>

Gelelim zil uygulamamızın çalışabilmesi için yazılması gereken javascript kodlarına sonuçta dinamik bir web sayfası hazırlıyoruz değil mi? Burada yapılacak işlemler kullanının açılan kutular yardımı ile seçtiği saat ve dakika bilgilerinin saat:dakika biçiminde liste kutusuna eklenmesi ayrıca kullanıcının liste kutusundan istemediği zaman bilgilerini silebilmesi ve son olarak da çalışan sistemi durdurup başlatabilmesi. Tüm bu işlemler için saatEkle(), secileniSil(), saatDakikaYukle(), calistir(),  kontrolEt(), saatKac() fonksiyonlarını yazdım ki sanıyorum bu isimler sizlere bunların ne iş yaptığı hakkında fikir veriyordur o kadarı da vardır diye düşünüyorum :) Lütfen fonksiyonların header/baslik bilgilerini okuyunuz kim kimi çağırıyor ve hangi parametreleri istiyor ya da işlem sonunda hangi parametre ya da parameterleri döndürüyor inceleyiniz, unutmayalım kopyala yapıştır ve çalıştır ile gelişme olmuyor...

<script type="text/javascript" lang="javascript">
var i=0;
var islemID=0;	
function saatKac(durum){
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama              : Bilal SERT
// Tarih-saat           : .../.../2020
// Amaç                 : istenilen bicimde zaman bilgisi vermek
// Giriş-çıkış          : durum -> true : saniye bilgisi var 
//                        durum-> false: saniye bilgisi yok
// Çağrıldığı yer       : kontrolEt()
///////////////////////////////////////////////////////////////////////////////////////  			
var zaman=new Date();
var saat=zaman.getHours() ;
var dakika=zaman.getMinutes();
var saniye= zaman.getSeconds();
if(saat<10) saat="0"+ saat;
if(dakika<10) dakika="0" + dakika;
if(saniye<10) saniye="0" + saniye;
if(durum) return(saat + ":" +  dakika+ ":" + saniye);else return(saat + ":" +  dakika);
}//end of saatKac
 
function kontrolEt(){
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama              : Bilal SERT
// Tarih-saat           : .../.../2020
// Amaç                 : gecerli saat bilgisi ile listedki verileri karsilastirmak
// 						  bir esleme varsa zil sesini oynatmak ve listede ilgili
//                        zamani tamamlandi olarak isaretlemek
// Giriş-çıkış          : -
// Çağrıldığı yer       : calistir()
// Çağırdıkları         : saatKac()
///////////////////////////////////////////////////////////////////////////////////////  				
 
var saatler=document.getElementById("txtZaman").options;
//sadece saat ve dakika bilgisi istiyoruz
var aktif=saatKac(false);
//ses efekti kodu
var ses=";
ses+="\"zil.mp3\" type=\"audio/mpeg\">";
ses+="";
 
//gecerli zamani ekranda goruntuleyelim 
document.getElementById("zamanBilgisi").innerHTML=saatKac(true);
//listedeki zaman bilgileri ile aktif zaman bilgisi karsilastiriliyor
//eslesme bulunursa zil calacak :)
for(let i=0;i<saatler.length;i++){
if(saatler[i].value==aktif){
	document.getElementById("sesliUyari").innerHTML=ses;
	saatler[i].value="";
	saatler[i].text=saatler[i].text +"-tamam";
	break;
}
}
 
}//end of kontrolEt
 
function calistir(){
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama              : Bilal SERT
// Tarih-saat           : .../.../2020
// Amaç                 : zaman kontrol islemini baslatmak ya da durdurmak
// Giriş-çıkış          : -
// Çağrıldığı yer       : btnBaslat.click()()
// Çağırdıkları         : kontrolEt()
///////////////////////////////////////////////////////////////////////////////////////  			
if(document.getElementById("btnBaslat").value=="Baslat"){
	document.getElementById("btnBaslat").value="Durdur";
	islemID=setInterval("kontrolEt()",1000);
}else{
	document.getElementById("btnBaslat").value="Baslat";
	clearInterval(islemID);
	i=0;
	document.getElementById("sesliUyari").innerHTML="";
}	
}//end of calistir	
 
function saatDakikaYukle(eleman){	
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama              : Bilal SERT
// Tarih-saat           : .../.../2020
// Amaç                 : saat ve dakika bilgilerini acilan kutulara yuklemek
// Giriş-çıkış          : nesne id' si
// Çağrıldığı yer       : body.onload()
// Çağırdıkları         : 
///////////////////////////////////////////////////////////////////////////////////////  			
var nesne=document.getElementById(eleman)
for(let i=0;i<60;i++){
	var secenek=document.createElement("option");		
	if(i<10){
		secenek.value="0"+i;
		secenek.text="0" + i;
	}else{
		secenek.value=i;
		secenek.text=i;
	}
	nesne.add(secenek);
}
}//end of saatDakikaYukle
 
 
function saatEkle(eleman){	
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama              : Bilal SERT
// Tarih-saat           : .../.../2020
// Amaç                 : saat ve dakika bilgilerini acilan kutulara yuklemek
// Giriş-çıkış          : nesne id' si
// Çağrıldığı yer       : body.onload()
// Çağırdıkları         : 
///////////////////////////////////////////////////////////////////////////////////////  			
var nesne=document.getElementById(eleman)
var secenek=document.createElement("option");		
var zilSaati=document.getElementById("txtSaat").value +":" + 
document.getElementById("txtDakika").value;
secenek.value=zilSaati;
secenek.text=zilSaati
nesne.add(secenek);
}//end of saatEkle
 
function secileniSil(){
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama              : Bilal SERT
// Tarih-saat           : .../.../2020
// Amaç                 : liste kutusundaki secilen elemani silmek
// Giriş-çıkış          : -
// Çağrıldığı yer       : btnEkle.click();
// Çağırdıkları         : -
///////////////////////////////////////////////////////////////////////////////////////  	
var zaman=new Date();
var indeks=document.getElementById("txtZaman").selectedIndex;
var nesne=document.getElementById("uyari");
var ses=";
ses+="\"uyari.mp3\" type=\"audio/mpeg\">";
ses+=""; 
//listede eleman varsa 
if(document.getElementById("txtZaman").length>0){   
	//ve de bir eleman secilmisse
	if(indeks==-1){
		document.getElementById("sesliUyari").innerHTML=ses;
		nesne.innerHTML="Silmek istediğiniz elemanı seçmelisiniz";
		nesne.style.textAlign="center";
		nesne.style.fontSize="24px";
		nesne.style.boxShadow="3px 3px 3px gray";
		nesne.style.backgroundColor="dodgerblue";
		nesne.style.color="white";
	}else{
		//uyari kutusunu temizleyelim
		nesne.innerHTML="";
		nesne.style.boxShadow="";
		nesne.style.backgroundColor="";
		nesne.style.color="";
		//secilen elemani silelim
		document.getElementById("txtZaman").remove(indeks);
	}
}
}//end of secileniSil
< /script>

Son olarak uygulmamızın görsel olarak biçimlendirmesini yaptığımız CSS kodlarına ki bunlar da tam olarak aşağıda verdiğim gibidir. Bunları kendi isteğinize göre düzenleyerek farklı bir görüntü elde edebilirsiniz.

<style type="text/css">
#zamanBilgisi{
background-color:dodgerblue;
color: white;
padding-left: 10px;
padding-bottom: 5px;
box-shadow: 3px 3px 3px gray;
}
#baslik{
background-color: dodgerblue;
color: white;
padding-left: 10px;
padding-bottom: 5px;
box-shadow: 3px 3px 3px gray;
}
.sut{
width: 60%;
background-color: #eee;
border:1px solid silver;
box-shadow: 3px 3px 3px gray;
float: left;
padding-top:10px;
padding-bottom: 10px;
}
.etiket{
width: 20%;
background-color: #eee;
color:dodgerblue;
text-align: right;
font-size: medium;
border:0px solid silver;
float: left;
margin-right: 10px;
padding: 10px 10px;			
}
.deger{
width: 70%;
background-color:lightgray;
color:white;
text-align: left;
font-size: medium;
border:0px solid silver;
float: left;
padding: 10px 10px;			
}	
.satir{
width: 100%;
margin-bottom: 50px;
}			
.kontrol{
font-size: large;
color: dodgerblue;
padding: 3px 15px;
}
< /style>