Sen burayı gördün, başkası da görecek. Teklifini gönder, sitenin kahramanı ol.

Sponsor'un katkılarıyla...

JavaScript

JavaScript

JavaScript; C ailesine üye bir yazılım dilidir. JavaScript'i C'den ayıran en büyük özellik, işlevlerin değer olarak kullanılabilmesi ve de prototip tabanlı bir dil olmasıdır. JavaScript'te sınıflar (class) yoktur ve işlevleri birinci sınıf olduğundan her türlü değeri tutabilirler.

/ 26.07.2018?

JavaScript Eğitimine Hoş Geldiniz!

Sponsor'un katkılarıyla...

Markanız için 300X300 alan.

Reklamı kapat görseli

JavaScript dilini tümüyle Türkçe'ye çeviriyorum ama yalnızca oldukça kolay noktalarda (çarpma - bölme - kalan bulma), video ve dosya uzantıları gibi çok önemli olan bir kaç noktada ya da olmazsa olmaz denilebilecek bazı yerlerde örneklendirme yapılacak.


Bu kadar büyük ve ayrıntılı bir dilin tümüyle tarafımdan anlatılması ve örneklendirilmesi söz konusu değil !


Dilin tümü tarafımdan türkçeleştirilecek ama anlatım ve örneklendirme sınırlı olacak !


Anlayaşınız için teşekkürler.

JavaScript Mozilla Vakfı'nın denetiminde olup, onun tarafından geliştirilmektedir.

JavaScript, kodlama değil, yazılım dilidir.

JavaScript; (Microsoft) Internet Information Server (IIS) sunucularında (sunucu taraflı) çalıştırılabilir olup MicroSoft (MS) JavaScript'i konularımızın dışındadır. MS JavaScript'i hakkında özetle söyleyebileceğim;


MicroSoft, IIS sunucusu üzerinde çalışan ASP teknolojisini geliştirmeyi durdurdu. Bundan ötürü JavaScript'teki yenilikler sunucu tarafında kullanılamıyor.

Ayrıca, sunucu tarafında Belge Öge Modeli (DOM - Document Object Model) olmadığından, DOM ile ilgili JavaScript komutları sunucu tarafında yoktur.


JavaScript; C ailesine üye bir yazılım dilidir, Java ile ilgisi yoktur (evet vardır; tarih ve matematik sınıfları Java'dan gelmektedir ama Java'nın türevi ya da alt dili ve benzeri değildir!). Aralarında yalnızca ad benzerliği vardır.

JavaScript'i C'den ayıran en büyük özellik, işlevleri değer olarak kullanabilmeniz (yani JavaScript işlevleri birinci sınıftır) ve de JavaScript'in prototip tabanlı bir dil olmasıdır.

JavaScript; ECMA Script (dil ölçünleri) topluluğuna üye bir dildir. ECMA Script ölçünlerine sahip diller arasında Actionscript gibi başkaca diller de vardır. Yazımları, kuralları, çalışma mantıkları genel olarak birbirlerine çok benzer. Yerine göre bazen tümüyle aynıdır.

JavaScript ile yazdığınız yazılım tarayıcı ve işletim sistemine bağlıdır. Bu durum, yazılımın uyumluluğuna ve verimliliğine doğrudan etki eder.

(Makine deyimi JavaScript için tarayıcı anlamına DA geliyor. Sıkça karşılaşabilirsiniz.)


JavaScript'i çalıştıran tarayıcılar : Tarayıcı (Motor)


  • Mozilla Firefox (Gecko) (Eski adıyla Netscape, Mozilla Vakıfı tarafından satın alındı.)
  • Opera (Presto - 16'ıncı sürüm ile WebKit)
  • Safari (Webkit)
  • Google Chrome(Webkit)
  • Microsoft Internet Explorer (Trident)
  • Comodo IceDragon (Gecko)
  • Comodo Dragon (Webkit)
  • K-Meleon (Gecko)
  • Lunascape ()
  • Avant (Trident)
  • SRWare Iron ()
  • Sleipnir ()
  • Konqueror (Linux)

Yazılımın sınanabilmesi ve yanlışların ayıklanmasını kolaylaştırabilmek için tarayıcılar artık yapılarında konsollar barındırıyorlar. Bu konsollardan yararlanmanızda fayda var. Erişim : Kntrl + Üst Tamga (tamga : Karakter) + i (ya da ı)

Çalışma Prensipleri - JavaScript

JavaScript derlenmez. Böylelikle biz insanlar JavaScript komutlarını rahatlıkla okuyabiliriz. Dilin C tabanlı olması iki sonuca yol açıyor :

1. Kodlar (sınır) Native C hızında çalıştırılabilir.

2. Belirli işlemler dışında, bir işletim sistemi ne yapıyorsa JavaScript ile (teorik olarak) aynı işlemler gerçekleştirilebilir.


Mozilla Firefox tarayıcısı kaynak kodlarıyla birlikte kurulur ve kodlara bakıldığında tarayıcının yazımında JavaScript de kullanıldığı açıkça görülebilir.

Native C, saf C dili olmayı belirtir. Ancak JavaScript komutları çalıştırılmadan önce az da olsa işlemden geçirilir ve bu durum biraz zaman kaybına neden olur. Uzatmadan; Mozilla'nın ulaşmaya çalıştığı hedef; eğer C kodun çalışma süresi 0 ise, JavaScript çalışma süresi Limit 0'dır.

Limit; hedefe ulaşılamayacağını, bunun yerine ulaşılabilecek hedefe en yakın noktayı belirtir.

Çalışma Prensipleri - HTML Belgelerine Ekleme

JavaScript komutları HTML belgelerine 3 farklı biçimde eklenir :

  • .js uzantılı dosyanın belgeye eklenmesiyle.
  • Belgeye <script></script> etiketleri eklenerek, <script> etiketinin içine.
  • JavaScript olaylarından olan onclick gibi doğrudan HTML etiketlerine gömülü biçimde.

Olayların ve de HTML etiket özniteliklerinden olan style özniteliğinin HTML etiketine doğrudan gömülmesi (satır içi - inline) belirli koşullar altında güvenlik sorunlarına yol açar.


Olayları ve tasarımı gömülü olarak kullanmamak hem geliştirme sürecinde kolaylık sağlar hem de daha güvenlidir.


Elinizi üçüncü seçeneğe hiç alıştırmayın !


JavaScript ilk kez bulunurken, tasarım hatası yapıldı. Şöyle ki; JavaScript indirilirken ve çalıştırılırken tarayıcıda hayat durur.

Ama artık JavaScript dosyaları asenkron indirilebiliyor ve birinci sorun çözülmüş oluyor. Yine de çalışırken hayat tarayıcılar için hala durmaktadır.

Belgelerin çözümlenip yorumlanmasında kullanılan tasarım, JavaScript'te böyle bir yapıyı gerektirdiğinden bu sorunun yapısal olarak çözülmesi yakın gelecekte olası değil.

JavaScript diline kısa süre önce eklenen ServiceWorker sınıfı gibi çözümler olsa da yapısal sorun hiç çözülemeyebilir.


Şimdilik o sorunların çevresinden dolaşıyoruz. Ve önümüzdeki bir kaç on yıl boyunca bu sorunlar yalnızca çevresinden dolaşma ile çözülecek - geçiştirilecek gibi duruyor.

Daha ayrıntılı bilgi için <script> etiketi sayfasını ziyaret edin.


Çalışma Prensipleri - "use strict" Komutu

Değişken adlarında büyük-küçük tamga kullanımı fark yaratır !

"use strict"; komutu ya .js uzantılı dosyanın en başında (<script src="örnek.js"></script>) ya da tanımlanan işlevin en başında kullanılır.

"use strict"; komutu yazı türünden olduğundan, eski tarayıcılar bu yazıyı görünce hata çıkmaz.

"use strict"; komutunu destekleyen tarayıcılar ise, "use strict"; komutunu işleme alırlar. Şöyle ki; "use strict"; komutu çalışınca :

  • JavaScriptin daha güvenli yazılması hedeflenmiştir.
  • Yazım yanlışları gerçek hata olarak kabul edilir. Örnek olarak; değişken adı yalnış yazılırsa olağan JavaScript'te yeni bir evrensel değişken yaratılıyordu. "use strict"; komutu kullanıldığında değişkenler önceden tanımlanmış olmak zorunda olduğundan hata fırlatılır.
    "use strict";
    alert(x) /* x tanımsız ! Hata fırlatılır. */
  • Olağan JavaScript'te; yazılamayan (non-writable), yalnızca okuyucu (getter-only), var olmayan (non-existing) özelliklere (property) ve de var olmayan değişkenlere ya da ögelere değer atarsanız hata almıyordunuz. "use strict"; komutu ile artık alacaksınız.
  • Aynı özelliği yeniden tanımlarsanız hata fırlatılır.
    var x = {p1 : "Yazıdeğer1", p1 : 40}; /* Hata fırlatılır. */
  • Bir işleve aynı parametreyi ikinci kez gönderirseniz hata alırsınız.
    function İşlevŞunuBunuYap(değ1, değ1){...}
  • Sil komutu delete'nin kullanımı hata fırlattırır.
    delete değ1;
  • 16'lık (octal) sayısal deyişler (010 gibi) ve kaçış tamga (/010 gibi) değişkenlere atandığında hata fırlattırır.
  • Silinemeyen özelliğin silinmeye çalışılması hata fırlattırır.
  • eval değişken adı olarak kullanılamaz.
    var eval = "xXx"; /* Hata fırlatılır. */
  • arguments değişken adı olarak kullanılamaz.
    var arguments = "xXx"; /* Hata fırlatılır. */
  • with deyişi kullanılamaz.
  • Güvenlik gerekçesiyle eval() kullanımıyla oluşan değişkenler kendi bloğu dışına çıkamaz.
    <script></script> /* Betik Bloğu */
    function İşlevAdı(değişkenAdı1, değişkenAdı2){/* İşlev bloğundaki kodlar... */}

Aynı değişkeni ikinci kez tanımlarsanız hata almazsınız ve de değişken değeri değişmez !


var değ1, değ2 = 2; /* Tanımlama, değer atayarak tanımlama. */
var değ2; /* Yeniden tanımlamak değişkeni boşaltmaz. */

console.log(değ2); /* Konsola 2 yazılır. */

Yakında tüm tarayıcılar betik (script) komutlarını "use strict"; modunda çalıştıracak.


"use strict"; komutunu betiklerinizin en başına eklemeniz ve ona uygun JavaScript yazmanız sizin çıkarınızadır.

Çalışma Prensipleri - Değişkenler ve Gömülü Ögeler

JavaScript'te bulunan değişken türleri :

  • tanımsız (undefined) : Değişken vardır ancak o an değer tutmamaktadır.
  • yazı (String) : Değişken yazı türündendir. var ad = "Yiğit";
  • sayı (Number) : Değişken sayı türündendir. var yaş = 24;
  • dizi (Array) : Değişken dizi türündendir. var d = ["elma", "armut"];
  • İşler şimdi biraz karışıyor.
    • Hiçlik (null) : null aynı zamanda Almanca sıfır (0) demektir. Değişkenin olmadığını, yokluğu belirtir. Öge türündendir.
    • İşlev (Function) : Öge türündendir.
    • Öge (Object) : Adı üstünde. Öge türündendir. var öge = {"ad" : "Yiğit", "yaş" : 24}

Yeri gelmişken biraz daha karıştırıp bırakayım.

NaN; sayı değil (Not-A-Number) demektir. Ve NaN kıyaslamalarda KENDİSİNE BİLE EŞİT DEĞİLDİR !


JavaScript bir takım gömülü (built-in) öge ile gelir. Yukarıda gördüğünüz değişkenlerden hepsi aynı zamanda tarayıcılarda gömülü olarak durur. İkisi dışında : undefined ve NaN.

undefined'in özellikleri yoktur. NaN ise Number prototipinin özelliğidir.


Yani; String (yazı), Number (sayı), Array (dizi) ve Object (öge) ögeleri belge yüklenirken JavaScript ortamında gömülü olarak durur. Neredeyse her şey bunların üzerine kuruludur.

Referans (Atıf) ve Prototip

Anlatım karmaşık ancak en sondaki örneği görünce çok basit olduğunu göreceksiniz !

JavaScript'i C dilinden ayıran en güzel özellik prototip tabanlı bir dil olmasıdır. C dilindeki gibi sınıf (class) yoktur.


JavaScript'te özellikler (property) iki biçimde sınıflandırılır :

  • Özellik (property) : Değişkende değişikliğe neden olmaz. Yalnızca değer döndürür.
  • Yöntem (method) : Çalıştığında değişkende değişikliğe neden olur ve -gerekiyorsa- değer döndürür.

JavaScript'te bir değişken tanımladığınızda, değişken değeri tutar. Ögelerde durum farklıdır.

JavaScript'te bir öge tanımlandığında, değişken ögeyi tutmaz, ona atıfta bulunur (referans verir).


Başka bir deyişle;

öge dışındaki değişken türlerinde (yazı, sayı, dizi), değişken doğrudan değeri tutarken

öge değeri tutmaz. Öge değişkeni, bunun yerine ögeye atıfta bulunur.


Değişken türleri için gömülü ögeler : String (yazı), Number (sayı), Array (dizi), Object (öge).


Oluşturulan her değişken, ait olduğu değişken türündeki gömülü ögenin prototipine sahip olur.

Yazı türü için String.prototype

Sayı türü için Number.prototype

Dizi türü için Array.prototype

Öge türü için Object.prototype

İşlev türü için Object.prototype


var tümce = "xXx";

tümce yazı türünden olduğundan, String.prototype'deki tüm özellikleri devralır !

console.log(tümce.toLowerCase()); komutu konsola xxx yazar.

console.log(tümce.toUpperCase()); komutu konsola XXX yazar.

console.log(tümce); komutu konsola xXx yazar.

tümce.prototype, tanımsızdır. Gerek de yoktur. String.prototype'den gerekli özellikler gelir. Prototip tabanlı dil olmasının farkı bu !


tümce.sil=function(){/* ... */} ile tümce'ye sil yöntemi tanımlanır.

String.prototype.sil yöntemi tanımsızdır.


String.prototype.değiştir = function(){/* ... */} ile değiştir yöntemi tanımlandığında

tümce.değiştir tanımlıdır.


sil yöntemi doğrudan (tümce için) tanımlanmışken, değiştir yöntemi (tüm metin türlerine) prototip olarak atıf edilir !


JavaScript'in prototip tabanlı olması ve ögelerin atıfta bulunması anlaşılmış olmalı. Devam edelim...


Silerken de aynı mantık çalışır.

delete tümce.değiştir; komutuyla tümce değişkenindeki değiştir yöntemi silinir.

String.prototype.değiştir; hala (prototip zincirinde) tanımlıdır. delete String.prototype.değiştir; çalıştırılırsa değiştir yöntemi (prototipi) tüm metin türünden değişkenlerde silinir.


var üye = {
	ad : "Alp",
	soyad : "Demir",
	yaş : 27,
	ayrıntı : {
			medeniDurumu : "bekar",
			gelir : "3200"
	},
	meslek : ["doğramacı", "tornacı"],
	işlemYap : function(){}
}

üye.ad; // Alp

üye.ayrıntı.medeniDurumu; // bekar


ayrıntı öge olmakla birlikte, üye ögesinin de özelliğidir. Bu içiçe geçmedir (nested).


Bazı koşullarda ögeler içiçe geçerken kendini yineler :


üye.kendisi = üye;


Artık üye.kendisi çağırılırsa üye döner. Onun da kendisi çağırılırsa yine üye döner...

Böylece şu yapı elde edilir : üye.kendisi.üye.kendisi.üye.kendisi.üye.kendisi.üye ...

Buna kendini yineleme (recursive) denir.


Özellik tanımlamaları yapılırken özellik adının tırnak ile yazılması önerilir :


var üye = {
	ad : "Alp", /* ad yerine "ad" kullanılmalıydı. */
	"soyad" : "Demir" /* "soyad" biçimindeki tırnaklı kullanım, önerilen kullanımdır. */
}

İki biçimde çağırılırlar :

üye.ad

/* ya da */

üye["ad"]
üye['ad']

İlk kullanım değişken oluştururken ikinci kullanımda (tırnaklı kullanımlar) ad özelliği -öge değil- yalnızca düz metindir.

Peki kendini yineleme ne işe yarıyor ?

Bir öge oluşturduğunuzda, o ögenin bir prototipi vardır. O prototipin içinde onu yaratan yaratıcı (constructor) vardır. Yaratıcı yarattığı prototipi de tutar. O prototipin içinde kendisini yaratan yaratıcı vardır. Yaratıcının da prototipi..

Bu içiçe geçmiş kendini yineleme durumu tam olarak şu işe yarar :


var a = [["elma", "armut", "karpuz"], ["havuç", "ıspanak", "pırasa"]]; /* Dizi içinde dizi. */

var ögeler = {

	/* Öge içinde dizi */
	sayılar : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, { /* Öge içinde dizi içinde öge. */
			"yazı" : "xXx", /* Öge içinde dizi içinde öge içinde metin. */
			diziYeni = ["xXx"] /* Öge içinde dizi içinde öge içinde dizi içinde metin. */
	}],
	tamgalar : ["a", "b", "..."], /* Başka bir dizi. */
	diğerBirÖge : {
			başkaBirÖge : {
				birTaneDaha : {
						"..." : "..." /* Öge içinde öge içinde öge ... */
				}
			}
	}
}
ögeler.kendiniYinele = ögeler;
/* Bu ögenin kendisini yinelemesini sağladık ! */

<div>
	<div>
			<div>
				<div>
						...
				</div>
			</div>
			<p></p>
			<div>
				<div>
						<span>...</span>
				</div>
			</div>
	</div>
</div>
<div></div>
<div></div>
<p></p>

Böylelikle onlar (tarayıcı geliştiriciler), siz (yani geliştiriciler) ne kadar karmaşık yapı kullanırsanız kullanın, ne kadar art arda gelirlerse gelsinler, ne kadar içiçe geçerlerse geçsinler gerekli değerleri atarken belgede oluşturulan etiketlere, işlevlere, dizilere ve benzerine gerekli özellikleri -her seferinde ayrı ayrı değil- tek bir kez tanımlayarak atanmış olmasını sağladılar (prototip) !

Belirli değişkenlere kendilerine özgü özellikler atandığında diğer değişkenlerde hiç bir değişiklik olmaması sağlandı (atıfta bulunma - prototip zinciri)


Son bir örnek :


Constructor - Yaratıcı

Kendi yaratıcılarınızı oluşturabilirsiniz.


/* "Foo" yaratıcı işlevi tanımlayıp ardından değişkene bar özelliği tanımlıyoruz. */

function Foo(){
	this.bar = 10;
}

Foo.prototype.bar = 42; /* Değişkenin prototipine bar özelliği tanımladık. */


var foo = new Foo(); /* foo değişkeni yeni (new) oluşturulan bir Foo'ya atıfta bulundu. */


/* Nasıl çalıştığı : */


console.log(foo.bar); // 10 (Yaratıcı işlevden geliyor.)

delete foo.bar;           
// "Foo"'nun kendi özelliği "bar" silindi.

console.log(foo.bar); // 42 (Prototipten geliyor.)
// foo.bar hala var, çünkü 
// prototip zincirinden geliyor.

delete Foo.prototype.bar; 
// Prototipteki özelliği siliyoruz.

console.log(foo.bar); // undefined
// tanımsız (undefined) döner çünkü
// özelliğe artık atıfta da bulunulamıyor.

Prototip ve yaratıcıların nasıl içiçe geçtiğine bakın.


Prototip - Yaratıcı

Yaratıcı'yı kullanırken ne yarattığınıza lütfen dikkat edin ! =)

Ajdar Çikita Muz

Ajdar ağabeye saygılar, sevgiler...

Reklamı kapat görseli

Görüş Bildirin?

Toplam Oy Sayısı : Şimdilik hiç oy verilmemiş.

Ortalama Oy Değeri : Verilen oyun geçerli olması için yapılan yorumun onaylanması gerekiyor.

Görüşler yükleniyor . . .

Yorum Ekle?

1000
JavaScript