Tarih-saat İşlemleri
Bu sayfada zaman yöntem kodları üzerinde duracağız. Bu kodlar zaman birimlerini ifade etmekte, nesneleri zamana göre sıralamakta ve sorgulamakta kullanılır
Zaman Değişkeni Tanımlama ve Yürürlükteki Zaman Değerini İfade Etme
İlk kodumuz: new Date(). Bu kod değişkenin zaman değeri taşıdığını belirtiyor. Ve değişkene bilgisayarın saatinde yer alan zaman değerini veriyor. Aşağıdaki kodlarla bu zaman değerini özelleştirebiliriz.
getDate() Ayın kaçı olduğunu gösterir.
tarih.getDate()
getMonth() Hangi ayda olduğumuzu gösterir. Ocak için 0, Şubat için 1, Mart için 2, ..., Aralık için 11 değerini verir.
tarih.getMonth()
getFullYear() İçinde bulunduğumuz yılı dört rakamıyla gösterir.
tarih.getFullYear()
getHours() Saat değerini ifade eder. 24'lük sistem kullanılır.
tarih.getHours()
getMinutes() Dakika değerini ifade eder.
tarih.getMinutes()
getSeconds() Saniye değerini ifade eder.
tarih.getSeconds()
getUTCHours() UTC saat değerini ifade eder. UTC bir zaman standardı; NASA falan kullanıyor olsa gerek.
tarih.getUTCHours()
getUTCMinutes() UTC dakika değerini ifade eder.
tarih.getUTCMinutes()
getUTCSeconds() UTC saniye değerini ifade eder.
tarih.getUTCSeconds()
getDay() Haftanın günlerini ifade eder. Pazar için 0, Pazartesi için 1, Salı için 2, ..., Cumartesi için 6 değerini verir.
tarih.getDay()
Eğer bu kodların tanımlandığı değişken önceden var değişken = new Date() şeklinde tanımlanmazsa çalışmaz. Şimdi bir uygulamayla tüm bu kodların nasıl sonuç verdiğini görelim. Uygulama sonuçlarını, bilgisayarınızın saatiyle karşılaştırın.
<head>
<title>Zaman Komutları</title>
</head>
<body>
<h3>Zaman Komutları ve Sonuçları</h3>
<script language="JavaScript">
var zaman = new Date() document.write("<b>Zaman</b>: " + zaman) document.write("<br><b>getFullYear</b>: " + zaman.getFullYear()) document.write("<br><b>getDate</b>: " + zaman.getDate()) document.write("<br><b>getMonth</b>: " + zaman.getMonth()) document.write("<br><b>getHours</b>: " + zaman.getHours()) document.write("<br><b>getMinutes</b>: " + zaman.getMinutes()) document.write("<br><b>getSeconds</b>: " + zaman.getSeconds())
document.write("<br><b>getUTCHours</b>: " + zaman.getUTCHours()) document.write("<br><b>getUTCMinutes</b>: " + zaman.getUTCMinutes()) document.write("<br><b>getUTCSeconds</b>: " + zaman.getUTCSeconds()) document.write("<br><b>getDay</b>: " + zaman.getDay())
</script>
</body>
</html>
Uygulamayı dikkatli inceleyen okuyucular, tek rakamlı zaman birimlerinin önüne 0 gelmediğini görmüşlerdir. Yani saniye 08 yerine 8 diye geçer. (Saat yapmak isteyenlerin dikkatine.)
Bir başka özellik de, bu kodlarla sadece sayfanın çalıştırıldığı anın zamanı gösteriliyor.
Örneğin saniye ifadesi olduğu gibi duruyor ve çalıştırıldığı zamanın saniyesini gösteriyor. (Saat yapmak isteyenlerin bir daha dikkatine.)
Zaman Değeri Atama
İstersek zaman ayarlarıyla oynayabilir, istediğimiz tarihe veya saate kurabiliriz. Bu kurma işlemi için aşağıdaki komutlar kullanılır.
setFullYear() Girilen yılı ayarlar.
tarih.setFullYear("1963")
setMonth() Girilen ayı ayarlar.
tarih.setMonth("5")
setDate() Ayın gününü ayarlar.
tarih.setDate("13")
setHours() Saati ayarlar.
tarih.setHours("10")
setMinutes() Dakikayı ayarlar.
tarih.setMinutes("34")
setSeconds() Saniyeyi ayarlar.
tarih.setSeconds("22")
setUTCHours() UTC saatini ayarlar.
tarih.setUTCHours("10")
setUTCMinutes() UTC dakikasını ayarlar.
tarih.setUTCMinutes("34")
setUTCSeconds() UTC saniyesini ayarlar.
tarih.setUTCSeconds("22")
Dikkat ederseniz zamanı ayarlarken haftanın günlerini ayarlamıyoruz. Bilgisayar ayarlanan yıl, ay ve güne göre haftanın gününü hesaplıyor. Şimdi uygulamamızı inceleyelim; her ayarlamadan sonra zaman yeniden gösteriliyor.
<html> <head> <title>Zaman Komutları</title> </head> <body> <h3>Zaman Komutları ve Sonuçları</h3> <script language="JavaScript"> var zaman = new Date() document.write("<b>Zaman</b>: " + zaman) document.write("<br><b>getFullYear</b>: " + zaman.getFullYear()) document.write("<br><b>getDate</b>: " + zaman.getDate()) document.write("<br><b>getMonth</b>: " + zaman.getMonth()) document.write("<br><b>getHours</b>: " + zaman.getHours()) document.write("<br><b>getMinutes</b>: " + zaman.getMinutes()) document.write("<br><b>getSeconds</b>: " + zaman.getSeconds()) document.write("<br><b>getUTCHours</b>: " + zaman.getUTCHours()) document.write("<br><b>getUTCMinutes</b>: " + zaman.getUTCMinutes()) document.write("<br><b>getUTCSeconds</b>: " + zaman.getUTCSeconds()) document.write("<br><b>getDay</b>: " + zaman.getDay()) </script> </body> </html>
Zaman Aralığı
Fonksiyonu harekete geçiren olayın oluşmasından belli miktar zaman geçtikten sonra birşey oluşmasını istiyorsak, setTimeout(..., ...) komutu kullanılır.
Örneğin bir düğmeye basıldıktan sonra uyarı kutusunun çıkmasını istiyorsak:
setTimeout("fonksiyon()", zaman) zaman sonra fonksiyonu calistirir);
setTimeout("alert('Bu mesaj 3 saniye sonra çıkar.')", 3000)
İlk değer parantez içinde bir JavaScript kodudur, ikinci değer ise ilk değerin ne kadar süre sonra oluşacağını belirleyen, mili saniye cinsinden zaman değeridir. (1 saniye = 1000 mili saniye) Bu komut ile uyarı kutusu 3 saniye bekledikten sonra görünecektir.
setTimeout komutu daha çok zaman aralıklarıyla tekrar eden hareketler oluşturmak için kullanılır. Aşağıdaki uygulamamıza bakalım:
<html> <head> <title>setTimeout</title> <script language="JavaScript"> var metin; function Slogan(n) { if(n%2==1) {metin="EN BÜYÜK"} else {metin="ALTAY!!!"} katman.innerHTML=metin setTimeout("Slogan(" + (n+1) + ")", 1000); } </script> </head> <body onload="Slogan(1)"> <div id="katman" align="center">Deneme</div> </body> </html>
Bu uygulama ile 1000 milisaniye (1 saniye) arayla "EN BÜYÜK" ve "ALTAY!!!" yazıları birbirinin yerine geçiyor. Bunu yapmak için Slogan() fonksiyonunun içinde tekrar Slogan() fonksiyonu çağrılarak bir döngü oluşturdum. Örnek uygulamalar bölümünde bu kullanım tarzını bolca göreceksiniz.
setInterval() yöntemi, sayfanın belirli aralıklarla örneğin, her saniye gibi belirli bir işlevi geri arayacağını belirtir. Konu bu zamanlayıcılar olduğunda çoğu tarayıcı iyi olduğunu iddia eder, ancak temel olarak JavaScript tek iş parçacıklı çalıştığından bunu nadiren başarırlar. Bir saniye değerini ayarlarsanız, geri aramayı 1 saniye, 1.2 saniye ya da 9 saniye sonra alabilirsiniz.
SetTimeout() Komutu :
SetTimeout() komutu JavaScripte zamanlama işlemleri için kullanılır. Örneğin belli zaman periyotlarında belli komut kümelerini çalıştırmak yada işlem akışında zamansal gecikme sağlamak için kullanılır.
Komut belirilen komutların, milisaniye cinsinden verilenen zaman sonunda çalıştırılması mantığı ile çalışır. Genllikle kullanılacak komutlar bir function içine yerleştirilir ve setTimeout() komutu ile bu function çağrılır. Kullanım formatı aşağıdaki gibidir.
setTimeout('komutlar',zaman)
Örnek: 0,5 saniyelik peryotlarla sonsuza doğru 1'er 1'er sayan scripti yazalım.
<html>
<script>
var x = 0
function say()
{
document.form1.T1.value=x
x=x+1
setTimeout('say()',500)
}
</script>
<body onload=say()>
<center>
<p><b>setTimeout() Komutu Örneği</b></p>
<form name="form1">
<input name="T1">
</form>
</body>
</html>
Scriptin çalışan örneğini görmek için tıklayın!..
clearTimeout() Komutu : clearTimeout() komutu, setTimeout() komutu ile başlatılan zamanlamayı sıfırlamak ve zaman periyodu ile çalışan komutları iptal etmek için kullanılır.
Bu komutlar bir arada kullanılırken genellikle setTimeout() komutu bir değişkene atanır ve clearTimeout() komutu ile bu değişken ile birlikte kullanılır. setTimeout() komutunun atandığı değişken var komutu ile tanımlanmadan da çalışır.
Örnek: Yukarıdaki örnekte yaptığımız scripte buton kontrolü ile çalıştırılıp, durdurulabilme özelliği ekleyelim.
<html>
<script>
var x = 0
function say()
{
document.form1.T1.value=x
x=x+1
sayac=setTimeout('say()',500)
}
function dur()
{
clearTimeout(sayac)
}
</script>
<body>
<center>
<p><b>clearTimeout() Komutu Örneği</b></p>
<input type="button" value="Başlat" onclick=say()>
<input type="button" value="Durudur" onclick=dur()><br>
<form name="form1">
<input name="T1">
</form>
</body>
</html>
Girilen Tarihe Göre Geçen Zamanı Hesaplayan Uygulama
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarihler Arası Fark Hesaplama</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f9;
}
input, button {
padding: 10px;
margin: 10px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Tarihten Şimdiki Tarihe Kadar Geçen Süre</h2>
<label for="inputDate">Bir tarih girin (YYYY-MM-DD):</label>
<input type="date" id="inputDate" />
<button onclick="calculateTimeDifference()">Hesapla</button>
<div id="result"></div>
<script>
function calculateTimeDifference() {
let inputDate = document.getElementById("inputDate").value;
if (!inputDate) {
alert("Lütfen bir tarih girin.");
return;
}
let startDate = new Date(inputDate);
let currentDate = new Date();
let timeDifference = currentDate - startDate;
let seconds = Math.floor(timeDifference / 1000);
let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60);
let days = Math.floor(hours / 24);
let months = Math.floor(days / 30);
let years = Math.floor(days / 365);
days = days % 30;
hours = hours % 24;
minutes = minutes % 60;
seconds = seconds % 60;
let resultText = `Geçen süre: ${years} yıl, ${months} ay, ${days} gün, ${hours} saat, ${minutes} dakika, ${seconds} saniye.`;
document.getElementById("result").textContent = resultText;
}
</script>
</body>
</html>
Zamana Göre Arkaplanı Değiştiren Js Uygulaması
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saat ve Arkaplan Fotoğrafı</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.5s, color 0.5s;
}
#clock {
font-size: 5rem;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function updateClockAndBackground() {
const clockElement = document.getElementById('clock');
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
clockElement.textContent = timeString;
if (hours >= 18 || hours < 8) {
document.body.style.backgroundImage = "url('https://get.wallhere.com/photo/sunset-moon-phases-night-purple-background-shooting-stars-dark-stars-alone-nature-1941117.jpg')";
document.body.style.color = "white";
} else {
document.body.style.backgroundImage = "url('https://get.wallhere.com/photo/minimalism-sky-clouds-atmosphere-cloud-atmosphere-of-earth-meteorological-phenomenon-cumulus-146860.jpg')";
document.body.style.color = "black";
}
}
setInterval(updateClockAndBackground, 1000);
updateClockAndBackground();
</script>
</body>
</html>
Kaynak
- www.volkanderinbay.net/ders/dersjscr.asp
- www.fazlamesai.net/index.php
- www.sadakat.net/bilgisayar/web_tasarim/javascript/index12.htm
