JavaScriptYazılım

JAVASCRIPT’TE TEMPLATE LİTERAL VE DATE OBJESİ #9



(adsbygoogle = window.adsbygoogle || []).push({});

TEMPLATE LITERAL NEDİR ?

Javascript’te ES6 ile birlikte gelen yeni bir özelliktir. Template Literal string ifadeleri daha güzel bir şekilde biçimlendirmemizi sağlıyor ve kullanımı da oldukça kolay. Hemen bir örnek yapıp konuyu onun üzerinden anlatmayı düşünüyorum.

const name = "Berkay";
const department = "Bilişim";
const salary = 5000;

const a = "İsim : " + name + "\n" + "Departman : " + department + "\n" + "Maaş : " + salary";
console.log(a); // Console'da aşağıdaki gibi bir çıktı alırız.

JAVASCRIPT’TE TEMPLATE LITERAL KULLANIMI

Şimdi bunu Template Literal ile daha güzel nasıl yazabileceğimizi görelim.

const name = "Berkay";
const department = "Bilişim";
const salary = 5000;

const a = `İsim : ${name} \nDepartman : ${department} \nMaaş : ${salary}`;
console.log(a); // Console'da yine aynı çıktıyı alırız.

Öncelikle Template Literal kullanımı yapmak için  ” ` ` ” yani Ters Tırnak kullanırız. Sonra İsim : Yazdıktan sonra kullanmak istediğimiz değişkeni  dolar “$” ve süslü parantezler ile ” {} ” içeri alırız. Oradaki ters slash n yani “\n” ‘in anlamı bir boşluk bırakıp alt satıra geçmesidir.

(adsbygoogle = window.adsbygoogle || []).push({});

Gördüğünüz gibi Template Literal kullanarak aynı işlemi daha basit ve kısa şekilde yaptık. Sonuçta aldığımız görüntü yine aynıdır.

Template Literal’ı en çok kullanacağımız alanlar mesela bir web sayfasına liste eklemeye çalıştığımızda kullanabiliriz. İlk başta kullanmadan yapacağım daha sonra kullanarak yapıp aradaki farkı görmenizi sağlayacağım.

–  Template Literal Olmadan:

const name = "Berkay";
const deparment = "Bilişim";
const salary = 5000;
const list = "<ul>" +
             "<li>" + name + "</li>" +
             "<li>" + department + "</li>" +
             "<li>" + salary + "</li>" 
             "</ul>";

document.body.innerHTML = list; // Bunları daha sonra göreceğiz.
// Ve sayfamızda alınan çıktı şu şekilde olur;

– Template Literal İle Beraber : 

const name = "Berkay";
const deparment = "Bilişim";
const salary = 5000;

const list = `
                <ul>
                  <li>${name}</li>
                  <li>${department}</li>
                  <li>${salary}</li>
                </ul>
             `;

document.body.innerHTML = list; // Aldığımız çıktı aynı şekilde olur.

Biz Template Literal’i kursumuzda bolca kullanacağız çünkü ilerki derslerimiz DOM Manipülasyonunda bol bol Html sayfaları ile ilişkimiz olacak. Şimdi bu dersin diğer konusu olan Date Objesi ve Methodlarını Görelim.

(adsbygoogle = window.adsbygoogle || []).push({});

JAVASCRIPT’TE DATE OBJESİ VE METHODLARI

Bu konuda zaman objesi yani Date Object’i göreceğiz. Date Objesi bizim zamanlar ile ilgili kullandığımız bir obje ve biz bu objenin methodlarını göreceğiz.

1 – Şuan ki zamanı alma :

Sadece new Date methodunu kullanıp içine bir değer girmediğinizde aslında şuan ki zamanı almış oluyorsunuz. Hemen örnek bir kullanım görelim;

const dateNow = new Date();
console.log(dateNow); // Console'da bunu ne zaman yazıyorsanız o zamanın çıktısını verir.
console.log(typeof dateNow); // Console'da object görürsünüz çünkü kullanmış olduğumuz yapı bir objedir

2 – İstediğimiz bir zamanı oluşturma :

Javascript’te istediğiniz zamanı kendiniz oluşturabilirsiniz hemen nasıl yapacağınızı gösterelim.

const date1 = new Date("11-10-2003 09:10:00");
const date2 = new Date("November 11 2003");
const date1 = new Date("11/10/2003");

3 – Oluşturduğumuz zamanın Ay,Gün vb. değerlerini alma : 

Oluşturduğumuz zamanlar üzerinden Date Objesinin methodlarını kullanarak gün ay vb. değerleri nasıl alacağımızı görelim;

-getMonth : 

Oluşturduğumuz zaman üzerinden ay değerini alır. Hemen kullanımını görelim;

const month = date1.getMonth(); // Oluşturduğumuz 1. Zaman
console.log(month); // Console'da 10 çıktısını verir.

Normalde Kasım ayı normalde 11. ay fakat burada her şey 0 dan başlar oyüzden ekranda 10 çıktısını görürüz.

-getDate : 

Oluşturduğumuz zamana göre söylüyorum, yani kasım ayının hangi günü olduğunu verir. Hemen kullanımını görelim;

const dayOfMonth = date1.getDate(); // Oluşturduğumuz 1. Zaman
console.log(dayOfMonth); // Console'da 10 çıktısını verir

Oluşturduğumuz zamana göre kasımın 10. günü olduğu için console’da 10 çıktısını alırız.

-getDay : 

Oluşturduğumuz zamanın haftaya göre kaçıncı günü olduğunu bize verir. Hemen kullanımını görelim.

const day = date1.getDay(); // Oluşturduğumuz 1. Zaman
console.log(day); // Console'da 1 çıktısını alırız.

Arkadaşlar günler Pazardan ve 0 dan başlayarak gider. Yani pazar 0’ıncı pazartesi 1’inci gündür. Oluşturduğumuz zamana göre pazartesi denk geldiği için console’da 1 çıktısını alırız.

-getHours : 

Oluşturduğumuz zamanın saat bilgisini alır. Hemen kullanımını görelim;

const hours = date1.getHours(); // Oluşturduğumuz 1. Zaman
console.log(hours); // Console'da 9 çıktısını alırız.

Oluşturduğumuz zamana göre saat 9 olduğu için console’da 9 çıktısını alırız.

(adsbygoogle = window.adsbygoogle || []).push({});

BİTİRİŞ

Bunları ezberleyip hepsini bilmenize gerek yok arkadaşlar. Gerektiğinde internetten bakabilirsiniz. Dersimizin sonuna gelmiş bulunmaktayız. Bu dersimizde string oluşturmanın yeni yöntemi Template Literal’ı ve Date Objesinin methodlarını gördük.

←Javascript’te Döngüler

←Javascript Videolu Eğitim Serisi

(adsbygoogle = window.adsbygoogle || []).push({});

Oylamak için tıklayınız :
[Toplam: 0 Puan: 0]
Etiketler

İlgili Makaleler

Bir cevap yazın

Başa dön tuşu