Giriş
Tarih ve saat sadece günlük yaşamın kritik bileşenleri değil, aynı zamanda bilgisayar programlamanın da bir parçasıdır. İster randevu almak ister bir takvim görüntülemek için ihtiyacınız olsun, tarih ve saate ihtiyaç duymanız için birçok neden vardır. Tarih ve saat özelliklerinin uygulamaları kapsamlı ve son derece çok yönlüdür. Bu çok yönlülük, saati ve tarihi kullanıcıya göre yapılandırabilmenizden kaynaklanır. Farklı bir coğrafi konumdaki her kullanıcı, kendi saat dilimine göre farklı bir sonuç alacaktır. Bu özellikler, randevu arayüzleri ve restoranlar gibi rezervasyon sistemleri olan web siteleri için kullanılır.
Programcılar web sitelerine tarih ve saat özelliklerini eklemek için genellikle JavaScript kullanırlar. Bunun nedeni, JavaScript'in zaten yerleşik bir özelliğe sahip olmasıdır bu yönler için. Bu eğitimde, biz şunu inceleyeceğiz: Date nesnesini daha ayrıntılı olarak inceleyeceğiz. Web sitenizdeki tarih ve saat için ideal ayarları yapılandırmak üzere kullanabileceğiniz yöntemlerden bahsedeceğiz. Ayrıca biçimi nasıl değiştirebileceğinizi ve daha fazlasını ele alacağız.
Date Nesnesi Nedir?
Az önce belirttiğimiz gibi, JavaScript'in tarih ve saat için yerleşik bir özelliği vardır. Buna Date nesnesi denir. Bu nesne, tarih ve saatle ilgili verileri değiştirmenize ve yönetmenize olanak tanır. Şunun için bir örnek oluşturduğunuzda: Date, yeni bir nesne oluşturulur. Bu nesne, bilgisayarınızın o anki tarih ve saat ayarlarına karşılık gelir.
Bu nesnenin çalışmasını daha iyi anlamak için bir örneği ele alalım. Önce bir değişken oluşturacağız. Ardından buna belirli bir tarih atayacağız. Günün Çarşamba ve tarihin Londra (GMT) saat diliminde 18 Ekim olduğunu varsayalım. Bu yapılandırmaya bir göz atın:
|
1 2 3 4 |
// Değişkeni geçerli tarih ve saate ayarla const now = new Date(); // Çıktıyı görüntüle Now; |
|
1 2 3 |
Çıktı Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Çıktımız bir tarih dizesi gösteriyor. Aşağıdaki verilerden oluşur:
| Haftanın Günü | Ay | Gün | Yıl | Saat | Dakika | Saniye | Saat Dilimi |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
JavaScript verileri bir zaman damgası aracılığıyla alır. Bu zaman damgası Unix zamanından gelir. Bu, 1 Ocak 1970 gece yarısından bu yana geçen milisaniye sayısını gösteren bir değerdir. Kullanıcıya tarih anlaşılır bir biçimde görünür. Bu zaman damgasını almak istiyorsanız, şu yöntemi kullanmalısınız: getTime() yöntemi şu şekilde:
|
1 2 3 |
// Geçerli zaman damgasını al now.getTime(); |
|
1 2 3 |
Çıktı 1508330494000 |
Bu değer kafa karıştırıcı görünse de, tarih dizesiyle aynı şeyi temsil eder. Basitçe 18 Ekim 2017'dir.
Epoch Zamanı Nedir?
Öğrenilecek bir sonraki kavram epoch zamanıdır. Buna sıfır zamanı da denir. Bunu şu veri dizesi olarak daha iyi anlayabilirsiniz:
01 Ocak, 1970 00:00:00 Evrensel Zaman (UTC) ve 0 zaman damgası. Bunu test etmek için yeni bir değişken oluşturun. Ardından bunu yeni bir
Date örneğine atayın, şu 0 zaman damgasında:
|
1 2 3 4 5 |
// 0 zaman damgasını yeni bir değişkene ata const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Çıktı 01 Ocak, 1970 00:00:00 Evrensel Zaman (UTC) |
Epoch zamanı eskiden programcılar için standarttı. Bu aynı zamanda JavaScript'in zamanı ölçmek için kullandığı yöntemdir.
JavaScript'te Tarih Oluşturma Biçimleri
Artık bir dize ve zaman damgası ile nasıl yeni bir Date örneği oluşturacağımızı bildiğimize göre, farklı biçimlerden bahsedebiliriz. Aşağıda ayrıntıları verilen dört biçim vardır:
Bu, gerektiğinde belirli tarih ve saatleri belirtmenizin mümkün olduğu anlamına gelir. Ayrıca daha önce tartıştığımız gibi sadece bir veri dizesi veya zaman damgası da kullanabilirsiniz. Anlamanız için, üç farklı şekilde nasıl yeni Date nesneleri oluşturacağımızı gözlemleyeceğiz. Tarih ve saatimizin 4 Temmuz 1776, saat 12:30 GMT olduğunu varsayarsak:
|
1 2 3 4 5 6 7 8 |
// Zaman damgası yöntemi new Date(-6106015800000); // Tarih dizesi yöntemi new Date("July 4 1776 12:30"); // Tarih ve saat yöntemi new Date(1776, 6, 4, 12, 30, 0, 0); |
Gördüğünüz gibi, her üç yöntem de çıktı olarak aynı tarihi verir. Bir fark, Epoch zamanından önceki bir zamanı kullanıyorsanız, zaman damgasının negatif bir sayı ile gösterilmesidir. Ek olarak, tarih ve saat yönteminde saniyeler ve milisaniyeler varsayılan olarak 0'dır. Bir sayı girmeyi unutursanız, bu da varsayılan olarak 0'a ayarlanacaktır.
Kafa karıştırıcı bir diğer husus da Temmuz ayının 7 yerine 6 ile temsil edilmesidir. Bunun nedeni numaralandırmanın 0 ile başlamasıdır. Örnekleri oluştururken bu durumları aklınızda bulundurun.
Tarihi Almak için get Komutunu Kullanma
Artık tarih ayarlandığına göre, bileşenlerine nasıl erişebileceğinizi görelim. Bir yol, get komutunu kullanmaktır. Bu tablo, get yöntemlerini Date nesnesi için gösterir:
Bu örnekte, yeni bir değişkene yeni bir tarih atayacağız, 31 Temmuz 1980:
|
1 2 |
// Yeni bir doğum günü örneği başlat const birthday = new Date(1980, 6, 31); |
Bu yöntemle tüm bireysel tarih bileşenlerini alacak olsaydınız şöyle görünürdü:
|
1 2 3 4 5 6 7 8 9 |
birthday.getFullYear(); // 1980 birthday.getMonth(); // 6 birthday.getDate(); // 31 birthday.getDay(); // 4 birthday.getHours(); // 0 birthday.getMinutes(); // 0 birthday.getSeconds(); // 0 birthday.getMilliseconds(); // 0 birthday.getTime(); // 333849600000 (GMT için) |
Bazı durumlarda tarihin yalnızca belirli bir bölümüne ihtiyaç duyabilirsiniz. Bunu yapmak için bu yöntemleri kullanabilirsiniz. Tarihin 3 Ekim olup olmadığını doğrulamak için nasıl test edebileceğiniz aşağıda açıklanmıştır:
|
1 2 3 4 5 6 7 8 |
// Bugünün tarihini al const today = new Date(); // Bugünü 3 Ekim ile karşılaştır if (today.getDate() === 3 && today.getMonth() === 9) { console.log("Bugün 3 Ekim."); } else { console.log("Bugün 3 Ekim değil."); } |
|
1 2 3 |
Çıktı Bugün's 3 Ekim değil. |
Tarih 3 Ekim olmasaydı ve buna karşı test etseydiniz alacağınız çıktı bu olurdu.
Tarihi Değiştirmek için set Komutunu Kullanma
Benzer şekilde, get komutlarında olduğu gibi, set komut karşılıklarına da sahipsiniz. Bu komut, tarih bileşenlerini değiştirmenize olanak tanır. Bu tablo tüm yöntemleri göstermektedir:
Diyelim ki birthday değişkenini 1997 değerinden şuna değiştirmek istiyoruz: 1980:
|
1 2 3 |
// Doğum günü tarihinin yılını değiştir birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Çıktı Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Artık çıktımız yeni yılı gösteriyor. Benzer şekilde tarihin diğer bileşenlerini de değiştirebilirsiniz.
JavaScript'te UTC Tarih Yöntemleri
Tarih bileşenlerini get yöntemini kullanarak çıkarırsanız, bunları kullanıcının saat diliminin yerel sistem ayarlarına göre alırsınız. Alternatif olarak, saati UTC standardına göre hesaplayacak şekilde yapılandırabilirsiniz. UTC, Eşgüdümlü Evrensel Saat anlamına gelir. Bunu getUTC yöntemini kullanarak yapabilirsiniz. Bu tablo, JavaScript'teki Date nesnesi için tüm UTC yöntemlerini gösterir:
Gördüğünüz gibi, tüm yöntemler get komutlarına benzer. Ancak çıktılar farklı olacaktır. Aradaki farkı bu kodla test edebilirsiniz:
|
1 2 3 4 5 6 |
// Mevcut zamanı bir değişkene ata const now = new Date(); // Yerel ve UTC saat dilimlerini yazdır console.log(now.getHours()); console.log(now.getUTCHours()); |
Bu kod size mevcut saatin yanı sıra UTC saat dilimindeki saati de gösterecektir. Zaten UTC saat dilimindeyseniz sayılar aynı olacaktır. UTC kullanmanızın nedeni, uluslararası bölgeler ve alanlar arasında tutarlılık sağlamasıdır.
Sonuç
Bu eğitimde Date nesnesi için çeşitli yöntemleri ele aldık. Buna, tarih bileşenlerini get ile nasıl alacağınız ve bunları set ile nasıl değiştireceğiniz de dahildi. Ayrıca UTC saat dilimlerini ve bunları JavaScript'te nasıl kullanacağımızı da inceledik.
Sonuç olarak, JavaScript tarih ve saat için tonlarca yerleşik özelliğe sahiptir. Bu, karmaşık web sitelerini programlamayı oldukça kolaylaştırır. JavaScript tarih ve saat özellikleri hakkında daha fazla bilgiyi şu adreste okuyabilirsiniz: Mozilla Developer Network. Ancak bu eğitim, temel konuları kavramanıza yardımcı olacaktır.
JavaScript ile programlamayı kolaylaştıracak blogumuzdan diğer kaynaklar şunlardır:
- JavaScript: Dizeleri Dizinleme, Bölme ve Değiştirme Üzerine Bir Eğitim
- JavaScript ile Çalışmak: Prototipler ve Kalıtımlar Nasıl Çalışır?
- HTML'e JavaScript Ekleme Kılavuzu
- JSON Veri Paylaşım Formatına Genel Bir Bakış
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.