JavaScript replace işlemleri

Bu yazıda JavaScript'te herhangi bir string değer üzerinde replace işlemlerinin nasıl yapıldığını anlatacağım.

String ifademiz üzerindeki herhangi bir kelimeyi, harfi ya da istediğimiz bir text'i değiştirmek için replace fonksiyonunu kullanıyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replace("blog","site");
alert(metin);

Bu örnekte "Bilgisayar mühendisleri blog" şeklinde bir metin tanımladık ve replace komutu ile "blog" ifadesini "site" olarak değiştirdik.

Peki birden fazla ifadeyi değiştirmek istersek bu kod işimizi görür mü? Replace fonksiyonu ile metin içerisinde birden fazla ifadeyi değiştiremiyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replace(" ","-");
alert(metin);

Yukarıdaki kodda boşlukları "-" ile değiştirmek istedim. Kodu çalıştırdığımda çıktı aşağıdaki gibi oldu.



Görüldüğü gibi sadece ilk boşluk değiştirildi.

Bunun için Regular Expression'lardan yararlanacağız. Yeni bir prototype ekliyoruz.

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

Ve bu eklemiş olduğumuz metodu çağırıyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replaceAll(" ","-");
alert(metin);

Çalıştırdığımda aşağıdaki görselde görebileceğiniz gibi tüm boşlukların "-" ile değiştirmiş oluyorum.

Read More

TypeScript nedir?

JavaScript istemci tarafında kullanılan en önemli dil. Node.js gibi teknolojiler ile birlikte JavaScript'i server tarafında da kullanmaya başladık.

JavaScript ile büyük uygulamalar geliştirmek oldukça zordur. Kod büyüdükçe oldukça karmaşık bir hale gelir ve kodu okumak da kullanmak da gitgide zorlaşır. Ayrıca OOP ilkelerini karşılamaması, derleme zamanı hata denetimi özelliklerini benimsememesi JavaScript'in server tarafında başarılı bir teknoloji olmasını engeller. Bu açıkları kapatmak için Microsoft tarafından TypeScript geliştirilmiş ve kullanıma sunulmuştur.

TypeScript nedir?

TypeScript'in tanımı "Uygulama ölçekli geliştirme için JavaScript" tir. Nesne yönelimli, derlenebilir bir dildir. C#'ın da tasarımcısı olan Anders Hejlsberg tarafından geliştirilmiştir. TypeScript, JavaScript'e derlenen JavaScript'in bir üst kümesidir.

TypeScript'in özellikleri

Sadece JavaScript. TypeScript, JavaScript'le başlar ve JavaScript'le biter. Temel yapıtaşlarını JavaScript'ten alır. TypeScript kullanabilmek için sadece JavaScript bilmek yeterlidir. TypeScript ile yazdığımız kodlar JavaScript koduna dönüştürülür.

Diğer JavaScript kütüphanelerini destekler. Derlenmiş TypeScript kodları, herhangi bir JavaScript uygulaması tarafından kullanılabilir. Tüm JavaScript framework'lerini, tool'ları ve kütüphanelerini kullanabilir.

JavaScript aynı zamanda TypeScript. Herhangi bir .js dosyasını .ts uzantısıyla kaydederek derlenmesi sağlanabilir.

TypeScript sanal makineye ihtiyaç duymaz. JavaScript'in çalıştığı her ortamda çalışabilir.

Andres Hejlsberg tarafından sunulan TypeScript tanıtım videosuna buraya tıklayarak ulaşabilirsiniz.

TypeScript open source (açık kaynak) bir üründür. IDE olarak Visual Studio önerilirken, desteklenen diğer IDE'leri buradan görebilirsiniz.

Read More

JavaScript class tanımlamanın 3 yolu

Syntax'ı göz önünde bulundurduğumuzda JavaScript, nesne yönelimli programlamada ciddi bir esneklik sağlamaktadır. Bu yazıda JavaScript'te sınıf oluşturmanın 3 yolundan bahsedeceğim. 3 yöntemi de gördükten sonra hangisini kullanmanız gerektiğine karar verebilirsiniz.

Her ne kadar class tanımlama olarak bahsedilse de JavaScript'te genel olarak bir class yapısı yok. Her şey nesnelerden oluşuyor. Nesnelerden başka nesneler türetiliyor. Diğer OOP dilleri gibi classlardan class türetme olayı yok.

1) Fonksiyonlar kullanma

En çok kullanılan yöntemlerden bir tanesi bu. Normal bir JavaScript fonksiyonu tanımlanır ve new keyword'ü kullanılarak yeni bir nesne oluşturulur. Property ve metot'lar fonksiyon oluşturulurken belirtilir. this komutu kullanılır.

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

var araba = new Araba('Audi');
alert(araba.marka + ' ' + araba.model + ' ' + araba.yil);

Yukarıdaki örnekte Araba class'ından bir nesne türettik ve bilgilerini ekranda gösterdik. Peki Araba class'ına ait, bilgileri gösteren bir metot tanımlamak istersem ne yapmam gerekir?

Bunun için kullanabileceğim 2 yöntem var. Birincisi fonksiyon (class) içinde metodu tanımlamak. İkincisi ise prototype eklemek.

1.1) Class içinde metodu tanımlamak

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 };
}

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

1.2) Prototype eklemek

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

Araba.prototype.bilgileriGetir = function() {
 return this.marka + ' ' + this.model + ' ' + this.yil;
};

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

2) Object Literal Kullanımı

 Object literal'ler kısa yoldan dizi ya da nesne tanımlamaya imkan sağlar. Boş bir nesne aşağıdaki gibi oluşturulabilir.

var nesne = {};

Dizi tanımlama

var dizi = [];

Fonksiyon olarak tanımladığımız class'ı şimdi literal kullanarak tanımlayalım.

var araba = {
  marka: "Audi",
  model: "Q7",
  yil: 2018,
  bilgileriGetir: function() {
   return this.marka + ' ' + this.model + ' ' + this.yil;
  }
 }

 alert(araba.bilgileriGetir());

3) Singleton fonksiyon kullanımı

Son yöntem, önceki iki yöntemin kombinasyonu gibi. Singleton nesne tanımlamak için yine fonksiyon kullanıyoruz.

var araba = new function() {
 this.marka = "Audi",
 this.model = "Q7";
 this.yil = 2018;
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 }
}

alert(araba.bilgileriGetir());

Read More

jQuery - parent, parents ve closest metotlarının kullanımı

Bu yazıda jQuery'deki parent, parents ve closest ifadelerinin ne olduklarını, aralarındaki farkları ve nasıl kullanıldıklarını anlatmaya çalışacağım.

Jquery'de bu metotlara ihtiyaç duyulan anlar oluyor. Gönderilerden oluşan bir sayfamız olduğunu düşünelim. Gönderilerin içerisinde de görsel, başlık ve metin bulunsun. En altta da herhangi bir buton olsun ve bu butona tıkladığımda da bir takım işlemler yapmak istediğimi farzedelim. Gönderilerim aşağıdaki gibi görünüyor.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.post {
 border: 5px solid #f5f5f5;
 margin: 20px;
}

.post img {
 display: block;
 float: left;
 margin-right: 20px;
}
</style>
</head>
<body>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 1</h1>
 <p>1. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 2</h1>
 <p>2. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 3</h1>
 <p>3. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 4</h1>
 <p>4. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
</body>
</html>

Şimdi head tag'leri arasına jquery kodlarımı yazmaya başlıyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){

 });
});

Click fonksiyonunun içinde this komutunu kullandığımda tıklanan butona erişebilirim.

$(this).parent() komutunu çalıştırdığımda ise bir üst element olan buttons class'lı div'e erişiyorum.

$(this).parents() komutunu çalıştırdığımda ise tıkladığım butonun ana elementlerini görüyorum.

Closest komutuyla da istediğim herhangi bir parent elemente ulaşabiliyorum. Bana doğrudan bu butonu içinde parındıran .post class'lı element lazım. Bunun için aşağıdaki kodu yazıyorum.

$(this).closest(".post");

Aşağıdaki kod ile tıklanılan buton hangi class'taysa o class'ın arkaplan rengini değiştiriyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){
  var post = $(this).closest(".post").css("background","#f5f5f5");
 });
});

Aşağıdaki gibi kodun doğru şekilde çalıştığını görüyorum.

Read More

CSS - after ve before ifadelerinin kullanımı

After ve before ifadeleri ile istediğimiz elementin öncesine ya da sonrasına herhangi bir içerik ekleyebiliyoruz. Bir menümüz olduğunu düşünelim ve menü elemanlarının başında istediğimiz bir görseli göstermek istiyoruz. Bunu sağlayabilmenin tabi ki birçok yöntem var ancak after ve before ifadelerini kullanarak bu işlemi çok çok kolay bir şekilde gerçekleştirebiliriz.

Aşağıdaki gibi bir menümüz olsun.

<ul id="menu">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

Herhangi bir değişiklik yapmadığımız taktirde çıktısı aşağıdaki gibi olacak.

Read More

Instagram gönderilerini sayfada göstermek (Instafeed.js)

İçinde bulunduğumuz dönemde sosyal ağların önemi çok büyük. Instagram da tartışmasız en büyük sosyal ağlardan bir tanesi. Sadece kişisel hesaplar değil, sahibi olduğumuz işletmeler için de Instagram hesabı açarak aktif olarak kullanıyoruz.

Bu yazıda Instafeed.js plugin'ini kullanarak Instagram hesabımızdaki gönderilerimizi sayfamızda göstereceğiz.

Öncelikle instagram hesabımız için access token almamız gerekecek. Daha sonra plugin'imizi sayfamıza ekleyeceğiz ve istediğimiz gibi düzenleyeceğiz.

1 - Instagram access token oluşturma

Instagram hesabımıza login olduktan sonra https://www.instagram.com/developer/ adresine gidiyoruz ve aşağıdaki görselde işaretlediğim "Manage Clients" butonuna tıklıyoruz.

 Daha sonra Register a New Client butonuna tıklıyoruz.

Açılan formdaki bilgileri giriyoruz ve Register butonuna tıklıyoruz.

Application Name: Herhangi bir isim verebiliriz. Oluşturduğumuz client'ın ismi olacak.
Description: Açıklama giriyoruz.
Company Name: Site adresini yazabiliriz.
Website URL: Site adresi
Valid redirect URIs: Site adresi
Privacy Policy URL: Site adresi
Contact email: Email adresimiz

Bilgileri girdikten sonra Register diyerek client'ı oluşturuyoruz.


Successfully registered 'client adı'
Yazısıyla karşılaştık. Client'ımız başarıyla oluşturuldu.

2 - Plugin'i çalıştırma

Şimdi http://instagram.pixelunion.net/ adresine giderek access token bilgimizi alıyoruz.

Sayfamızı oluşturuyoruz.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!DOCTYPE html> <html> <head> <script src="instafeed.min.js"></script> <style> #instafeed .item { float: left; } </style> </head> <body> <script type="text/javascript"> var feed = new Instafeed({ get: 'user', userId: 'self', accessToken: '8303600137.1677ed0.9..........', template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></div>' }); feed.run(); </script> <div id="instafeed"></div> </body> </html>

Sayfayı çalıştırdığımda çektiğim görseller yükleniyor.

Read More