Category Archives: JavaScript

Videolu ve yazılı JavaScript Dersleri

Zincirleme (Chain) Metodu

3 yorum

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
	
	private $text;
	private $style;

	public function write($text)
	{
		$this->text = $text;
	}

	public function color($color)
	{
		$this->style .= 'color: ' . $color . ';';
	}

	public function fontSize($size)
	{
		$this->style .= 'font-size: ' . $size . ';';
	}

	public function show()
	{
		return '<div style="' . $this->style . '">' . $this->text . '</div>';
	}

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
	
	private $text;
	private $style;

	public function write($text)
	{
		$this->text = $text;
		return $this;
	}

	public function color($color)
	{
		$this->style .= 'color: ' . $color . ';';
		return $this;
	}

	public function fontSize($size)
	{
		$this->style .= 'font-size: ' . $size . ';';
		return $this;
	}

	public function show()
	{
		return '<div style="' . $this->style . '">' . $this->text . '</div>';
	}

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });
Konuyu görmek için tıklayın

JavaScript Object Length Kullanımı

yorum yok

Bir dizinin boyutunu öğrenmek için length özelliğini kullanabilirsiniz. Örneğin;

var arr= ['Tayfun', 'Murat'];

alert(arr.length); // Output: 2

Ancak bunu bir object için yapmak istediğimizde biraz daha farklı şekilde kullanıyoruz;

var obj = new Object();
obj['name'] = 'Tayfun';
obj['surname'] = 'Erbilen';

alert(Object.keys(obj).length); // Output: 2

Kaynak: http://stackoverflow.com/a/6700

Konuyu görmek için tıklayın

jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak

14 yorum

Telefon ve Tabletlerde ekrana parmak ile dokunduğumuzda bunu yakalayıp işlem yapmamızı sağlayacak güzel bir eklenti tanıtacağım size.
Ben bu eklentiyi kullanarak parmak ile kaydırarak açılıp kapanan bir yan menü örneği hazırladım videoda.
Umarım işinize yarar, zira ben responsive dökümlerde bu eklentisi sıkça kullanıyorum.

Konuyu görmek için tıklayın

jQuery ile Nesneleri Efektif Değiştirmek

3 yorum

Öncelikle bu işlemi isotope adında bir eklenti ile yapacağız.
Genellikle portfolyö kısımlarında tab içerikleri değiştiğinde karşılaştığınızı düşündüğüm bir eklentidir.
Bu eklenti sayesinde içerikleri efektif bir şekilde değiştirebiliyorsunuz.
Bende videoda sizin için nasıl kullanacağınızı anlattım.

Konuyu görmek için tıklayın

contenteditable fare imleç pozisyonunu öğrenme

4 yorum

bir contenteditable içeriğimizde fare imlecinin pozisyonunu öğrenmek istersek window.getSelection() metodunu kullanacağız. Örnek vermek gerekirse.

<div contenteditable="true" id="test">bu bir deneme yazısıdır..</div>

Fare imleç pozisyonu: <span id="position"></span>

Şimdi dive tıkladıkça fare pozisyonunu alalım ve ekrana yazdıralım.

$('#test').on('click', function(){
  var sel = window.getSelection();
  $('#position').text( sel.extentOffset );
});

işte bu kadar basit 🙂 bana çoğu zaman lazım oluyor, blogda dursun dedim.

Konuyu görmek için tıklayın

AngularJS Basit Örnek Uygulama

2 yorum

Daha önceki angularjs notlarıma istinaden pekiştirmek adına küçük bir örnek uygulama hazırladım. Hazırlarken mümkün olduğunca her şeyi açıklamaya çalıştım, kafanıza takılan bir yer olursa önce notlara bakabilir daha sonra hala anlamadığınız bir kısım var ise yorum olarak bana yazabilirsiniz.

Konuyu görmek için tıklayın

Hangisi daha hızlı? ($().data(xx) ve $.data(xx))

5 yorum

Bildiğiniz gibi data değerlerini almak için .data() metodunu kullanıyoruz. Ancak performans olarak değerlendirdiğimizde aslında $.data() fonksiyon metodunu kullanmak daha avantajlı.

Konuyu görmek için tıklayın

jQuery ile Basit Checkbox ve Radio Özelleştirmesi

5 yorum

Çok basit şekilde checkbox ve radio inputlarını özelleştirebilirsiniz. İlk olarak radio ve checkbox için html yapılarına göz atalım;

<label>
    <input type="radio" name="cinsiyet" checked />
    Kadın
</label>
<label>
    <input type="radio" name="cinsiyet" />
    Erkek
</label>

Bu radio inputu içindi. Gördüğünüz gibi label kullanıyoruz. Sebebi ise labele tıklandığında otomatik olarak radio butonunu kendisi seçeceği için jquery’de ekstra bir şey yapmamıza gerek kalmıyor. Aynı şekilde checkbox içinse yapı şöyle;

<label>
    <input type="checkbox" value="1" name="test" checked />
    Kullanım Koşulları'nı okudum, kabul ediyorum.
</label>
Konuyu görmek için tıklayın

AngularJS Notlarım – 5

5 yorum

Biraz daha direktiflerden bahsetmek istiyorum.. ng-click, ng-model ve ng-repeat direktifleri ile devam edebiliriz yazımıza.

Konuyu görmek için tıklayın

AngularJS Notlarım – 4

1 yorum

Bu yazımda sizlere $http servisinin kullanımını göstermek istiyorum.
AngularJS’de amaç JSON olarak datayı almak ve DOM’da neler olacağını belirlemektir.

Konuyu görmek için tıklayın