Turgut Arslan

JavaScript Başa Dön | Scroll To Up Butonu Kodu

Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu.

var btnP =0;

window.addEventListener("load",function(){

btnP =window.scrollY;

});

window.addEventListener("scroll",function(){

scrollStat();

});

function scrollStat(){

btnP =window.scrollY;

if(btnP <=600 ){

document.getElementById("toTopBtn").className ="scrollToTopBtn";

}

else{

document.getElementById("toTopBtn").className ="scrollToTopBtn scrollToTopBtnShow";

}

function scrollToTop(){

window.scrollTo(0,0);

scrollStat();

}

</script>

<style>

scroll-behavior: smooth;

}

.scrollToTopBtn{

position:fixed;

bottom:3%;

right:5%;

background-color:#e7e7e7;

color:#555;

font-size: 15px;

font-family: 'Helvetica';

font-weight: 400;

cursor:pointer;

transition: all 0.5s ease 0s;

width:auto;

height: auto;

display: none;

padding:10px 15px;

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 2px;

z-index: 99999;

line-height: 30px;

border:solid 1px #e7e7e7;

-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

-moz-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 3px 0px;

}

.scrollToTopBtnShow{

display: block;

}

.scrollToTopBtn:hover{

background-color:#079992;

border:solid 1px #079992;

color:#fff;

}

@media only screen and (max-width: 768px) {

.scrollToTopBtn{

font-size: 15px;

}

.scrollToTopBtn:hover{

background-color:#e7e7e7;

border:solid 1px #e7e7e7;

color:#555;

}

</style>

⇡ Başa Dön

JavaScript ile Mesai Sayacı

Javascript Geri Sayım Sayacı Countdown Timer

Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım.

Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir.

<p>Lütfen mesai bitiş saatini girin</p>
<input type="tel" placeholder="HH:MM:SS" id="timeInputId" />
<input type="button" id="tmrBtn" value="Mesai Sayacını Başlat"/>
<p id="demo"></p>
<p id="demo2"></p>
 
<script>
var x;
var finishTime= "00:00:00";
var brTitle= document.title;
window.addEventListener("load",function(){
var timeBtn = document.getElementById("tmrBtn");
var timeInput = document.getElementById("timeInputId");

timeInput.onkeydown=function(e){
      
    if(!isNaN(e.key)){
     clearInterval(x);
          if(this.value.length == 2)
          {
              this.value=this.value+":";
          }
          if(this.value.length == 5)
          {
              this.value=this.value+":";
          }
          if(this.value.length >= 8)
          {
              this.value=this.value.substring(0,8);
          }
      }
      else{
      	this.value="";
        
      }
    };
    timeBtn.onclick=function(){
    if(timeInput.value.length >= 8)
        {
        timeInput.value=timeInput.value.substring(0,8);
        	finishTime=timeInput.value;
            startTmr();
        }
    	
    };

});

function startTmr(){
finishTime =finishTime.split(":");
var ft =new Date();
 finishTime=ft.setHours(finishTime[0],finishTime[1],finishTime[2]);

var countDownDate = finishTime;

x = setInterval(function() {

var now = new Date().getTime();
    
   var distance = countDownDate - now;
    
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if(hours < 10) hours="0"+hours;
     if(minutes < 10) minutes="0"+minutes;
     if(seconds < 10) seconds="0"+seconds;

document.getElementById("demo").innerHTML ="Mesai Bitimi İçin Ayarlanan Tarih : "+ft+"<br/> Mesai Bitimine Kalan Süre:<br/> <h2 style='color:red;text-align:center;'>"+   hours + " : "
  + minutes + " : " + seconds+" </h2>";
  if(!document.hasFocus()){
   document.title ="Kalan Süre : "+hours +":"+minutes+":"+seconds;
  }
  else{
  document.title=brTitle;
  }

if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Mesai Bitti";
	document.title="Mesai Bitti";
  }
}, 1000);

}

</script>

Kodları yazarken https://www.w3schools.com/howto/howto_js_countdown.asp linkindeki sayfadan yararlandım

Kodun çalışan örneğini buraya ekliyorum. Dilerseniz günün bir saatini girip kalan sürenin geriye doğru sayılmasını deneyimleyebilirsiniz.

Lütfen mesai bitiş saatini girin

CSS ile Devamını Oku Butonu Tasarımı

Basit bir CSS kodlama örneği yaptım, umarım yardımcı olur.

<h3 class="btnTitle">Devamını Oku Buton alanı başlık metnini buraya yazın</h3>

<a href="#" title="Devamını Oku Buton Başlığı" class="btnReadMore"> Devamını Oku ></a>

</div>

<style>

.btnContainer{

background-color:#2f2f2f;

color:#fefefe;

text-align:center;

padding:1% 2%;

font-family:Arial;

}

.btnTitle{

font-size:24px;

line-height:100%;

}

.btnReadMore{

display:block;

background-color:#dedede;

color:#2f2f2f;

width:50%;

max-width:170px;

text-align:center;

text-decoration:none;

margin:20px auto;

font-family:Arial;

font-size:16px;

padding:10px 2px;

border-radius:2px;

-webkit-border-radius:2px;

-moz-border-radius:2px;

}

</style>

Kodların çalışan hali

Devamını Oku Buton alanı başlık metnini buraya yazın

Devamını Oku >

C# Abstract Factory Method Design Pattern Örneği

C# dilinde Abstract Factory Metot Tasarım Deseni için örnek bir kod hazırladım.

using System;

namespace TekstilFabrikasi

{

public interface IPantolon

{

string PantolonEkle();

}

public interface IGomlek

{

string GomlekEkle();

}

public class Pantolon : IPantolon

{

public string PantolonEkle()

{

return "Pantolon";

}

public class Gomlek : IGomlek

{

public string GomlekEkle()

{

return "Gömlek";

}

public interface ICeket

{

string CeketEkle();

}

public class Ceket : ICeket

{

public string CeketEkle()

{

return "Ceket";

}

public interface IElbiseFactory{

IPantolon PantolonYap();

IGomlek GomlekYap();

ICeket CeketYap();

string KumasTipi();

string Mevsimi();

}

public class Yazlik : IElbiseFactory

{

public string KumasTipi()

{

return "Ürünler Keten Kumaştan İmal Edilmiştir.";

}

public string Mevsimi()

{

return "Yaz Sezonu İçin Takım";

}

public IPantolon PantolonYap()

{

return new Pantolon();

}

public IGomlek GomlekYap()

{

return new Gomlek();

}

public ICeket CeketYap()

{

return new Ceket();

}

public class TakimOlustur{

private readonly IPantolon _pantolon;

private readonly IGomlek _gomlek;

private readonly ICeket _ceket;

private readonly string _kumasTipi;

private readonly string _mevsim;

public TakimOlustur(IElbiseFactory elbiseFactory){

_pantolon = elbiseFactory.PantolonYap();

_gomlek = elbiseFactory.GomlekYap();

_kumasTipi = elbiseFactory.KumasTipi();

_mevsim = elbiseFactory.Mevsimi();

_ceket = elbiseFactory.CeketYap();

}

public void TakimiSun()

{

Console.WriteLine(_mevsim);

Console.WriteLine(_kumasTipi);

Console.WriteLine(_pantolon.PantolonEkle());

Console.WriteLine(_gomlek.GomlekEkle());

Console.WriteLine(_ceket.CeketEkle());

}

public class Program

{

public static void Main(string[] args){

IElbiseFactory yazlik = new Yazlik();

TakimOlustur takimSiparis = new TakimOlustur(yazlik);

takimSiparis.TakimiSun();

}

C# Ternary Operatörüne Bir Örnek(Bölünebilme Kontrolü)

Bu yazımızda basit bir uygulama yaptık. Amacımız C# dilinde Ternary Operatörü ile bir iç içe karar verme mekanizması kurmak. Programlamada karar verme yapısı olarak çoğunlukla if- else if-else yapısı kullanılır. Büyük ölçekli projelerde bazı basit karar yapılarını daha az kodlar yazmak için ise ternary kullanılır. Ternary operatörü ile tek satırda iç içe karar yapılarını oluşturabilirsiniz.

Bu operatör her ne kadar kullanışlı olsa da programın okunmasını zorlaştırır. Bu sebepten, program boyunca çok gerekmedikçe kullanmayın.

Lafı daha da uzatmadan örnek uygulamaya geçiyorum.

Örnek Soru,

C# dilinde şu programı Ternary Operatörünü kullanarak yazın.

Bir sayı dizisindeki elemanların sırasıyla 3, 5 ve hem 3 hem de 5 ile bölünebilirliğini kontrol edilsin.
Dizideki sayılar kaça bölünebildikleri belirtilerek alt alta yazılsın.
Bölünemeyenlere ise 3'e veya 5'e Bölünemez şeklinde bir uyarı yazılsın.

Not: hem 3 hem de 5 ile bölünebilirliği için %15 mod alma ifadesini kullanmayın.

Yazıyı Oku »

C# Factory Method Design Pattern Örneği

C# ile Factory Method Design Pattern(kısaca Factory Deseni), bir interface ya da abstract sınıfı kalıp olarak kullanıp tek bir sınıf örneğini kullanarak farklı nesneler üretmek için kullanılır. Oluşturulan bu nesne her çağrıldığında sahip olduğu factory metodu sayesinde aynı metot ve değişken isimlerini kullanan farklı nesneler oluşturur. Siz metoda hangi tip nesneye ihtiyacınız olduğunu söylersiniz o da eğer içinde tanımlıysa size o tipte bir nesne olarak döner. Böylelikle o nesnenin işlevlerini aynı değişken ve metot isimlerini kullanarak çağırabilirsiniz. Factory Method Deseninin birbirine çok benzeyen birkaç farklı uygulaması karşınıza çıkabilir. Bir tanesini anladıktan sonra diğer uygulamaları da rahatlıkla çözebilirsiniz. Aşağıda örnek bir uygulama anlatılmıştır. Uygulama basitçe farklı renk hediye kutularına farklı sayıda bilyeler koyup paketlemek gibi önemli bir işi yapmaktadır. Özellikle de yılbaşının yaklaştığı şu günlerde.

Önce ara yüzümüzü oluşturuyoruz. Burada oluşturacağımız nesnenin işlevlerini belirliyoruz. Her nesnenin addMarble isimli bir metodu olsun ve integer tipinde bir değer alıp işlesin istiyoruz. Ama bu işlemin ne olacağı bu ara yüzü(interface) miras alan sınıflarda belirlensin. Yani her mirasçı sınıf bunu kendine göre aynı isimli bir metot altında işlesin.

Yazıyı Oku »

C# Dilinde ?? (The null-coalescing operator) Kullanımı

C# dilinde ?? operatörü bir değerin null olması durumunda yani herhangi bir değeri olmadığı durumda atanacak değeri veya ifadeyi belirlemek için kullanılır. The null-coalescing operator olarak bilinir. Aslında bir nevi kısaltmadır. Aynı ternary operatörüne benzer bir kullanımı vardır.

C# dilinde bir değişkenin değeri null ise ona varsayılan bir değer atamak için,

if (değişken is null)

{

değişken = atanacak değer ya da ifade

}

şeklinde bir standart kodlama vardır. Bu null değer kontrolü programlama esnasında bir noktadan sonra kod kalabalığı yaptığı için bu işlemi daha az kodla halledecek bir yazım şekli geliştirilmiştir.

Yazıyı Oku »