diff options
Diffstat (limited to 'files/tr/web/javascript/guide')
8 files changed, 0 insertions, 3573 deletions
diff --git a/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html b/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html deleted file mode 100644 index ba35caf1d9..0000000000 --- a/files/tr/web/javascript/guide/control_flow_and_error_handling/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Kontrol akışı ve hata yakalama -slug: Web/JavaScript/Guide/Control_flow_and_error_handling -tags: - - Başlangıç - - JavaScript - - Rehberi -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling -original_slug: Web/JavaScript/Guide/Ifadeler ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> - -<p class="summary">JavaScript, uygulamanızın etkilişim halinde olmasını sağlayan kontrol akışı ifadeleri gibi birçok ifadeyi destekler. Bu bölümde, bu ifadeler üzerine durulacaktır.</p> - -<p>En basit olarak anlatmak gerekirse, JavaScript tarafından çalıştırılacak her komuta ifade adı verilir. Noktalı virgül (<code>;</code>) karakteri ise, JavaScript kodundaki ifadelerin birbirinden ayrılması için kullanılmaktadır.</p> - -<h2 id="Blok_ifadesi">Blok ifadesi</h2> - -<p>En temel ifade türü, ifadelerin gruplanmasını sağlayan blok ifadesidir. Blok ifadesi, bir çift süslü parantezle sınırlandırılır:</p> - -<pre class="syntaxbox">{ ifade_1; ifade_2; . . . ifade_n; } -</pre> - -<h3 id="Örnek"><strong>Örnek</strong></h3> - -<p>Blok ifadeleri genellikle kontrol akışı ifadeleri ile birlikte kullanılır (örn: <code>if</code>, <code>for</code>, <code>while</code>).</p> - -<pre class="brush: js">while (x < 10) { - x++; -} -</pre> - -<p>Buradaki, <code>{ x++; } bir </code>blok ifadesidir.</p> - -<p><strong>Önemli</strong>: ECMAScript2015'ten önceki JavaScript'te blok etki alanı bulunmamaktadır. Blok içerisinde yer alan değişkenlerin etki alanı, onları içeren fonksiyon veya .js dosyası kadar geniş bir alanı kapsar, ve bu değişkenler üzerinde yapılan değişiklikler bloğun ötesinde de kalıcılık gösterir. Başka bir deyişle blok ifadeleri, değişkenler için bir etki alanı oluşturmazlar. C ve Java dilinden aşina olduğunuz değişkenden bağımsız blok ifadeleri, JavaScript'te tamamıyla farklı bir davranış sergileyebilirler. Aşağıdaki örneği inceleyelim:</p> - -<pre class="brush: js">var x = 1; -{ - var x = 2; -} -console.log(x); // Ekrandaki çıktı: 2 -</pre> - -<p>Kodun çıktısı 2 olacaktır. Çünkü blok içerisindeki <code>var x</code> ifadesi ile bloktan önce gelen var x ifadesi aynı etki alanı içerisindedir. Eğer üstteki kod C veya Java dilinde olsaydı, ekrandaki çıktı 1 olacaktı.</p> - -<p>ECMAScript 6 ile birlikte gelen <code>let</code> tanımıyla oluşturulan değişkenler, blok seviyesinde etki alanına sahiptir. Daha fazla bilgi için {{jsxref("Statements/let", "let")}} sayfasına bakınız.</p> - -<h2 id="Koşullu_ifadeler">Koşullu ifadeler</h2> - -<p>Belirli bir koşul sağlandığında çalışacak komutlar kümesine <strong>koşullu ifade</strong> denilir. JavaScript, iki adet koşullu ifadeyi destekler: <code>if...else</code> ve <code>switch</code>.</p> - -<h3 id="if...else_ifadesi"><code>if...else</code> ifadesi</h3> - -<p>Belirli bir mantıksal durum sağlandığında bir ifadenin çalıştırılması için <code>if</code> ifadesi kullanılır. Mantıksal durum sağlanmadığında çalıştırılacak komutlar için ise <code>else</code> kelimesi kullanıılabilir. Bir <code>if</code> ifadesi aşağıdaki şekilde oluşturulur:</p> - -<pre class="syntaxbox">if (mantıksal_durum) { - ifade_1; -} else { - ifade_2; -}</pre> - -<p><code>mantıksal_durum</code>, true veya false değerler alabilen herhangi bir ifade olabilir. Eğer <code>mantıksal_durum, </code>true olursa <code>ifade_1</code> çalışacak; aksi halde, <code>ifade_2</code> is çalışacaktır. <code>ifade_1</code> ve <code>ifade_2 ifadeleri</code>, çalıştırılacak herhangi bir ifade olabilir.</p> - -<p>Birçok mantıksal durumun kontrolünün bütün bir halde yapılabilmesi için aşağıdaki şekilde <code>else if</code> tanımlamalarını kullanabilirsiniz.</p> - -<pre class="syntaxbox">if (mantıksal_durum_1) { - ifade_1; -} else if (mantıksal_durum_2) { - ifade_2; -} else if (mantıksal_durum_n) { - ifade_n; -} else { - ifade_son; -} -</pre> - -<p>Üstteki gibi çoklu mantıksal durumların olduğu ifadelerde, yalnızca <code>true</code> olan ilk mantıksal durum çalıştırılır, ilişkili diğer kontrol ifadeleri çalıştırılmaz. Birçok ifadenin çalıştırılması için ifadeler, blok ifadesi (<code>{ ... }</code>) içerisinde gruplandırılır. Özellikle iç içe <code>if</code> ifadelerinin olduğu durumlar başta olmak üzere blok ifadeleri, geliştiriciler arasında yaygın olarak kullanılmaktadır:</p> - -<pre class="syntaxbox">if (mantıksal_durum) { - eğer_durum_true_ise_çalışacak_ifade_1; - eğer_durum_true_ise_çalışacak_ifade_2; -} else { - eğer_durum_false_ise_çalışacak_ifade_3; - eğer_durum_false_ise_çalışacak_ifade_4; -} -</pre> - -<div><code>mantıksal_durum</code> kısmında herhangi bir değişkene değer atamak yanlış bir kullanımdır, çünkü kodunuza sizden sonra bakan biri atama işlemini ilk bakışta eşitlik olarak görebilir. Örneğin aşağıdaki şekilde bir kullanım yanlıştır:</div> - -<div></div> - -<pre class="example-bad brush: js">if (x = y) { - /* diğer ifadeler */ -} -</pre> - -<p>Eğer <code>mantıksal_durum</code> kısmında gerçekten atama yapmanız gerekiyorsa, bunu yapmanın en iyi yolu atama ifadesini parantezler içerisine almaktır. Örneğin:</p> - -<pre class="brush: js">if ((x = y)) { - /* diğer ifadeler */ -} -</pre> - -<h4 id="Yanlışımsı_falsy_değerler">Yanlışımsı (falsy) değerler</h4> - -<p>Aşağıdaki değerler JavaScript tarafından false olarak değerlendirilir ve ({{Glossary("Falsy")}} değerler olarak bilinir):</p> - -<ul> - <li><code>false</code></li> - <li><code>undefined</code></li> - <li><code>null</code></li> - <li><code>0</code></li> - <li><code>NaN</code></li> - <li>Boş string (<code>""</code>)</li> -</ul> - -<p>Mantıksal durum içerisine alınan diğer bütün değerler ve nesneler, JavaScript tarafından true olarak değerlendirilir.</p> - -<p>{{jsxref("Boolean")}} nesnesindeki true ve false ile ilkel tipteki <code>true</code> ve <code>false</code> değerlerini karıştırmayınız. Örneğin:</p> - -<pre class="brush: js">var b = new Boolean(false); -if (b) // bu ifade true olarak değerlendirilir -</pre> - -<h4 id="Örnek_2"><strong>Örnek</strong></h4> - -<p>Aşağıdaki örnekte bulunan <code>checkData</code> fonksiyonu, HTML dokümanındaki formda yer alan <code>ikiKarakter</code> isimli girdi nesnesine ait değerin, karakter sayısı 2 ise <code>true</code> döndürülür, değilse ekrana bir uyarı metni basılır ve <code>false</code> döndürülür:</p> - -<pre class="brush: js">function checkData() { - if (document.form1.ikiKarakter.value.length == 2) { - return true; - } else { - alert("Tam olarak iki karakter giriniz. " + - document.form1.ikiKarakter.value + " geçersizdir."); - return false; - } -} -</pre> - -<h3 id="switch_ifadesi"><code>switch</code> ifadesi</h3> - -<p>Bir <code>switch</code> ifadesine, mantıksal bir ifade verilir ve bu ifade ile eşleşen bir etiket varsa, etiketi içeren <code>case</code> ifadesi çalıştırılır, yoksa varsayılan ifade (<code>default)</code> çalıştırılır. Örnek:</p> - -<pre class="syntaxbox">switch (mantıksal_ifade) { - case etiket_1: - ifadeler_1 - [break;] - case etiket_2: - ifadeler_2 - [break;] - ... - default: - varsayılan_ifadeler - [break;] -} -</pre> - -<p>Üstteki kodu çalıştırırken JavaScript, <code>mantıksal_ifade</code> ile eşleşen etikete sahip <code>case</code> cümleciğini arar ve ilişkili ifadeleri çalıştırır. Eğer eşleşen hiçbir etiket bulunamadıysa, <code>default</code> cümleciğinin olup olmadığına bakar, varsa ve ilgili varsayılan ifadeleri çalıştırır. Eğer <code>default</code> cümleciği de yoksa, <code>switch</code> bloğundan çıkılır. <code>default</code> cümleciğinin sırası önemli olmamakla birlikte, genel kullanımlarda hep en sonda yer almaktadır.</p> - -<p>Her <code>case</code> cümleciğinde, isteğe bağlı olarak konulan <code>break</code> ifadesi, eşleşen ifadenin çalıştırılıp tamamlandıktan sonra switch bloğundan çıkmayı sağlar. Eğer <code>break</code> ifadesi yazılmazsa, program <code>switch</code> ifadesi içerisindeki bir sonraki case ifadesini çalıştırarak yoluna devam eder. </p> - -<h4 id="Örnek_3"><strong>Örnek</strong></h4> - -<p>Aşağıdaki örnekte, <code>meyve</code> ifadesinin değeri "Muz" ise, program "Muz" değeri ile eşleşen <code>case</code> "Muz" ifadesini çalıştırır. <code>break</code> ile karşılaşıldığında, program <code>switch</code> bloğundan çıkar ve <code>switch</code> bloğundan sonraki kodları çalıştırır. Eğer <code>break</code> ifadesi olmasaydı, "Muz" ile alakasız olan, <code>case "Kiraz"</code> ifadesi de çalıştırılacaktı.</p> - -<pre class="brush: js">switch (meyve) { - case "Portakal": - console.log("Portakalların kilosu ₺1.99 lira."); - break; - case "Elma": - console.log("Elmaların kilosu ₺1.49 lira."); - break; - case "Muz": - console.log("Muzların kilosu ₺2.49 lira."); - break; - case "Kiraz": - console.log("Kirazların kilosu ₺2.19 lira."); - break; - case "Çilek": - console.log("Çileklerin kilosu ₺2.49 lira."); - break; - case "Avokado": - console.log("Avokadoların kilosu ₺5.99 lira."); - break; - default: - console.log("Maalesef elimizde hiç " + meyve + " kalmadı."); -} -console.log("Başka bir şey lazım mı?");</pre> - -<h2 id="Exception_Hata_yakalama_ifadeleri">Exception (Hata) yakalama ifadeleri</h2> - -<p><code>throw</code> ifadesi ile exception fırlatabilir, <code>try...catch</code> ifadeleri kullanarak hata yakalama işlemlerinizi yürütebilirsiniz.</p> - -<ul> - <li><code><a href="#throw_ifadesi">throw ifadesi</a></code></li> - <li><a href="#try...catch_ifadesi"><code>try...catch</code> ifadesi</a></li> -</ul> - -<h3 id="Exception_türleri">Exception türleri</h3> - -<p>JavaScript'te neredeyse her nesne fırlatılabilir. Buna rağmen fırlatılacak türdeki nesnelerin hepsi aynı şekilde oluşturulmamışlardır. Sayı ve string değerlerinin hata olarak fırlatılması oldukça yaygın olmasına rağmen, bu amaç için belirli olarak oluşturulan aşağıdaki exception türlerinden birinin kullanılması daha anlamlıdır:</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">ECMAScript exception</a></li> - <li>{{domxref("DOMException")}} ve {{domxref("DOMError")}}</li> -</ul> - -<h3 id="throw_ifadesi"><code>throw</code> ifadesi</h3> - -<p>Bir exception fırlatmak için <code>throw</code> ifadesini kullanılır. Bir exception fırlattığınız zaman, fırlatılacak ifadeyi de belirlersiniz:</p> - -<pre class="syntaxbox">throw ifade; -</pre> - -<p>Herhangi bir türdeki ifadeyi exception olarak fırlatabilirsiniz. Aşağıdaki kodda çeşitli türlerdeki exception'lar fırlatılmaktadır:</p> - -<pre class="brush: js">throw "Hata2"; // String türü -throw 42; // Sayı türü -throw true; // Boolean türü -throw { toString: function() { return "Ben bir nesneyim."; } }; -</pre> - -<div class="note"><strong>Not:</strong> Bir exception fırlatırken ilgili exception nesnesini belirleyebilirsiniz. Daha sonra catch bloğunda hatayı yakaladığınızda ilgili exception nesnesinin özelliklerine erişebilirsiniz. Aşağıdaki ifadede, KullanıcıHatası sınıfından bir nesne oluşturulmakta, ve throw ifadesinde bu nesne fırlatılmaktadır.</div> - -<pre class="brush: js">// KullanıcıHatası türünde nesne oluşturuluyor -function KullanıcıHatası(mesaj){ - this.mesaj=mesaj; - this.adı="KullanıcıHatası"; -} - -// Oluşturulan KullanıcıHatası nesnesinin konsola yazıldığında güzel bir -// ifade yazılması için aşağıdaki şekilde toString() fonksiyonunu override ediyoruz. -KullanıcıHatası.prototype.toString = function () { - return this.adı+ ': "' + this.mesaj+ '"'; -} - -// KullanıcıHatası nesnesi yaratılır ve exception olarak fırlatılır -throw new KullanıcıHatası("Yanlış bir değer girdiniz.");</pre> - -<h3 id="try...catch_ifadesi"><code>try...catch</code> ifadesi</h3> - -<p><code>try...catch</code> ifadesi, çalıştırılması istenen ifadeleri bir blokta tutar. Fırlatılacak exception için bir veya daha fazla ifade belirlenerek, oluşacak bir <code>try...catch</code> ifadesi tarafından yakalanması sağlanır.</p> - -<p><code>try...catch</code> ifadesi, çalıştırılacak bir veya daha fazla komutun yer aldığı, ve try bloğu içerisinde hata oluştuğunda çalışacak ifadeleri içeren, 0 veya daha fazla catch ifadesinin yer aldığı bir <code>try</code> bloğu içerir. Bu şekilde, try içerisinde yer alan başarıyla çalışmasını istediğiniz kodlarda bir sorun oluştuğunda, catch bloğunda bu sorunun üstesinden gelecek kontrolleri yazabilirsiniz. Eğer try bloğu içerisindeki herhangi bir ifade (veya try bloğu içerisinden çağırılan fonksiyon) bir exception fırlatırsa, JavaScript anında <code>catch</code> bloğuna bakar. Eğer try bloğu içerisinde bir exception fırlatılmazsa, <code>catch</code> bloğu çalıştırılmaz ve atlanır. <code>try</code> ve <code>catch </code>bloklarından sonra, eğer varsa <code>finally</code> bloğu da çalıştırılır.</p> - -<p>Aşağıdaki örnekte bir <code>try...catch</code> ifadesi kullanılmaktadır. Fonksiyonda, parametre olarak geçilen ay sayısı değeri baz alınarak, diziden ilgili ayın adı getirilmektedir. Eğer ay sayısı değeri 1-12 arasında değilse, <code>"Geçersiz ay sayısı." </code>değeri exception olarak fırlatılır. catch bloğundaki ayAdı değişkeni de "bilinmeyen" olarak atanır.</p> - -<pre class="brush: js">function getAyAdı(aySayisi) { - aySayisi= aySayisi-1; // Dizi indeksi için aySayisi 1 azaltılır (1=Oca, 12=Ara) - var aylar= ["Oca","Şub","Mar","Nis","May","Haz","Tem", - "Ağu","Eyl","Eki","Kas","Ara"]; - if (aylar[aySayisi] != null) { - return aylar[aySayisi]; - } else { - throw "Geçersiz ay sayısı."; // burada throw ifadesi kullanılıyor - } -} - -try { // denenecek ifadeler - ayAdı = getAyAdı(aySayim); // function could throw exception -} -catch (e) { - ayAdı = "bilinmiyor"; - hatalarımıKaydet(e); // hataların kaydedilmesi için exception nesnesi geçiliyor. -} -</pre> - -<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> bloğu</h4> - -<p><code>try</code> bloğunda oluşturulan tüm exception'ların yakalanması için <code>catch</code> bloğunu kullanabilirsiniz.</p> - -<pre class="syntaxbox">catch (exceptionDeğişkeni) { - ifadeler -} -</pre> - -<p><code>catch</code> bloğunda, <code>throw</code> ifadesi tarafından belirlenecek değerin tutulması için bir değişken tanımlanır; bu değişken kullanılarak, fırlatılan exception ile ilgili bilgiler elde edilmiş olur. <code>catch</code> bloğuna girildiğinde JavaScript, bu değişkenin içini doldurur; değişken değeri sadece <code>catch</code> bloğu süresince geçerli kalır; catch bloğu çalışmasını tamamladığında değişken artık mevcut değildir.</p> - -<p>Örneğin aşağıdaki kodda, bir exception fırlatılıyor, ve fırlatıldığı anda otomatik olarak catch bloğuna iletiliyor.</p> - -<pre class="brush: js">try { - throw "hata" // bir exception oluşturur. -} -catch (e) { - // herhangi bir exception'ı yakalamak için oluşturulan ifadeler - hatalarımıKaydet(e) // hataların kaydedilmesi için exception nesnesi geçilir. -} -</pre> - -<h4 id="finally_bloğu"><code>finally</code> bloğu</h4> - -<p><code>finally</code> bloğu, <code>try...catch</code> ifadesinden sonra çalıştırılacak kod satırlarını içerir. finally bloğu, hata olsun veya olmasın çalışır. Eğer hata olmuşsa ve exception fırlatılmışsa, bu hatayı karşılayacak catch bloğu olmasa dahi <code>finally</code> bloğu çalışır. </p> - -<p><code>finally</code> bloğu, hata oluştuğunda bu hataya sebep olan değişkenin kullandığı kaynakların sisteme geri verilmesi için en iyi yerdir. Bu şekilde hata tüm ayrıntılarıyla çözülmüş olur. Aşağıdaki örnekte bir dosya açılmakta, ve sonrasında dosyaya yazma işlemleri için kullanan ifadeler çalıştırılmaktadır (Sunucu taraflı yazılmış koddur. İstemci tarafında dosyaya yazma işlemleri güvenlik açısından engellenmiştir. Eğer dosya, yazmak için açılırken bir exception fırlatılırsa, kod hata vermeden önce <code>finally</code> bloğu çalışır ve erişilecek dosyayı kapatır.</p> - -<pre class="brush: js">dosyaAç(); -try { - dosyayaYaz(veriler); // Bu kısım hata verebilir -} catch(e) { - hatayıKaydetveGöster(e); // Hata ile ilgili bilgiler kaydedilir ve kullanıcıya bir hata mesajı sunulur. -} finally { - dosyayıKapat(); // Dosyayı kapatır (hata olsa da olmasa da). -} -</pre> - -<p>Eğer <code>finally</code> bloğu bir değer geri döndürürse, bu değer, <code>try</code> ve <code>catch</code> içerisindeki return ifadelerine bakmaksızın, <code>try-catch-finally</code> ifadesinin tamamı için geri dönüş değeri haline gelir:</p> - -<pre class="brush: js">function f() { - try { - console.log(0); - throw "hata"; - } catch(e) { - console.log(1); - return true; // Buradaki return ifadesi, - // finally bloğu tamamlanana dek duraklatılır. - console.log(2); // Üstteki return ifadesinden dolayı çalıştırılmaz. - } finally { - console.log(3); - return false; // catch kısmındaki return ifadesinin üstüne yazar ve geçersiz hale getirir. - console.log(4); // return'den dolayı çalıştırılmaz. - } - // Şimdi "return false" ifadesi çalıştırılır ve fonksiyondan çıkılır. - console.log(5); // Çalıştırılmaz. -} -f(); // Konsola 0 1 3 yazar ve false değerini döndürür. -</pre> - -<p><code>finally</code> bloğunun, geri dönüş değerlerinin üstüne yazma etkisi, aynı zamanda <code>catch</code> bloğu içerisindeki exception'lar için de aynı şekilde çalışır:</p> - -<pre class="brush: js">function f() { - try { - throw "hata"; - } catch(e) { - console.log('İçerideki "hata" yakalandı.'); - throw e; // Burası finally bloğu tamamlanana dek duraklatılır. - } finally { - return false; // Önceki "throw" ifadesinin üstüne yazar ve - // throw ifadesini geçersiz hale getirir. - } - // Şimdi "return false" ifadesi çalıştırılır. -} - -try { - f(); -} catch(e) { - // f() fonksiyonundaki throw ifadesi geçersiz hale geldiği için - // buradaki catch bloğu çalıştırılmaz. - console.log('Diğer "hata" yakalandı.'); -} - -// Ekran çıktısı: İçerideki "hata" yakalandı.</pre> - -<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">İçiçe try...catch ifadeleri</h4> - -<p>Bir veya daha fazla iç içe <code>try...catch</code> ifadeleri tanımlayabilirsiniz. Eğer içteki <code>try...catch</code> ifadesinin <code>catch</code> bloğu yoksa, bir dıştaki <code>try...catch</code> ifadesinin c<code>atch</code> bloğu kontrol edilir.</p> - -<h3 id="Error_nesnelerinin_etkili_kullanımı"><code>Error</code> nesnelerinin etkili kullanımı</h3> - -<p><code>Error</code> nesnesinin türüne bağlı olarak, 'name' ve 'message' özellikleri vasıtasıyla daha anlamlı hata mesajları tanımlayabilirsiniz. 'name' özelliği, oluşan hatayı sınıflandırır (örn, 'DOMException' veya 'Error'). 'message' ise hata nesnesinin string'e dönüştürülmesine nazaran genellikle daha kısa bir mesaj sunulmasına olanak tanır.</p> - -<p>Eğer kendi exception nesnelerinizi fırlatıyorsanız ve bu özellikleri kullanarak hatayı anlamlı hale getirmek istiyorsanız <code>Error</code> sınıfının yapıcısının getirdiği avantajlardan faydalanabilirsiniz (örneğin catch bloğunuzun, kendi exception'larınız ile sistem exception'ları arasındaki farkı ayırt edemediği gibi durumlarda). Aşağıdaki örneği inceleyelim:</p> - -<pre class="brush: js">function hatayaMeyilliFonksiyon() { - if (hataVerenFonksiyonumuz()) { - throw (new Error('Hata oluştu')); - } else { - sistemHatasıVerenFonksiyon(); - } -} - -try { - hatayaMeyilliFonksiyon(); -} -catch (e) { - console.log(e.name); // 'Error' yazar - console.log(e.message); // 'Hata oluştu' veya bir JavaScript hata mesajı yazar -}</pre> - -<h2 id="Promise_nesneleri">Promise nesneleri</h2> - -<p>ECMAScript2015 ile birlikte JavaScript'e, asenkron ve geciktirilmiş işlemlerin akış kontrolünün sağlanması için {{jsxref("Promise")}} nesneleri gelmiştir.</p> - -<p>Bir <code>Promise</code> nesnesi aşağıdaki durumlardan birinde bulunur:</p> - -<ul> - <li><em>pending (bekliyor)</em>: başlangıç durumu, henüz çalıştırılmadı.</li> - <li><em>fulfilled (başarıyla çalıştı)</em>: başarılı işlem</li> - <li><em>rejected (hatalı çalıştı)</em>: hatalı işlem.</li> - <li><em>settled (yerleşti)</em>: Promise nesnesi başarıyla veya hatalı olarak çalıştı.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p> - -<h3 id="XHR_ile_resim_yükleme">XHR ile resim yükleme</h3> - -<p><code>Promise</code> ve <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> kullanarak bir resmin yüklenmesi için MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> sayfasında basit bir örnek mevcuttur. Ayrıca örneği canlı olarak da <a href="http://mdn.github.io/promises-test/">görebilirsiniz</a>. Örnekteki her aşamaya yorum satırları eklenmiştir. Bu sayede Promise ve XHR mimarisini daha yakından izleyebilirsiniz. Aşağıda <code>Promise</code> nesnesinin akışını gösteren örneğin belgelendirilmemiş sürümü bulunmaktadır:</p> - -<pre class="brush: js">function resimYükle(url) { - return new Promise(function(başarıSonucundaFonk, hataSonucundaFonk) { - var istek = new XMLHttpRequest(); - istek.open('GET', url); - istek.responseType = 'blob'; - istek.onload = function() { - if (istek.status === 200) { - başarıSonucundaFonk(istek.cevabı); - } else { - hataSonucundaFonk(Error('Resim yüklenemedi; hata kodu:' - + istek.hataKodu)); - } - }; - istek.onerror = function() { - hataSonucundaFonk(Error('Bir bağlantı hatası oluştu.')); - }; - istek.send(); - }); -}</pre> - -<p>Daha fazla detaylı bilgi için {{jsxref("Promise")}} sayfasına bakınız.</p> - -<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/tr/web/javascript/guide/details_of_the_object_model/index.html b/files/tr/web/javascript/guide/details_of_the_object_model/index.html deleted file mode 100644 index 160959eda2..0000000000 --- a/files/tr/web/javascript/guide/details_of_the_object_model/index.html +++ /dev/null @@ -1,758 +0,0 @@ ---- -title: Details of the object model -slug: Web/JavaScript/Guide/Details_of_the_Object_Model -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> - -<p class="summary">JavaScript is an object-based language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have inheritance of properties and their values. This chapter attempts to clarify the situation.</p> - -<p>This chapter assumes that you are already somewhat familiar with JavaScript and that you have used JavaScript functions to create simple objects.</p> - -<h2 id="Class-based_vs._prototype-based_languages">Class-based vs. prototype-based languages</h2> - -<p>Class-based object-oriented languages, such as Java and C++, are founded on the concept of two distinct entities: classes and instances.</p> - -<ul> - <li>A <em>class</em> defines all of the properties that characterize a certain set of objects (considering methods and fields in Java, or members in C++, to be properties). A class is abstract rather than any particular member in a set of objects it describes. For example, the <code>Employee</code> class could represent the set of all employees.</li> - <li>An <em>instance</em>, on the other hand, is the instantiation of a class; that is, one of its members. For example, <code>Victoria</code> could be an instance of the <code>Employee</code> class, representing a particular individual as an employee. An instance has exactly the same properties of its parent class (no more, no less).</li> -</ul> - -<p>A prototype-based language, such as JavaScript, does not make this distinction: it simply has objects. A prototype-based language has the notion of a <em>prototypical object</em>, an object used as a template from which to get the initial properties for a new object. Any object can specify its own properties, either when you create it or at run time. In addition, any object can be associated as the <em>prototype</em> for another object, allowing the second object to share the first object's properties.</p> - -<h3 id="Defining_a_class">Defining a class</h3> - -<p>In class-based languages, you define a class in a separate <em>class definition</em>. In that definition you can specify special methods, called <em>constructors</em>, to create instances of the class. A constructor method can specify initial values for the instance's properties and perform other processing appropriate at creation time. You use the <code>new</code> operator in association with the constructor method to create class instances.</p> - -<p>JavaScript follows a similar model, but does not have a class definition separate from the constructor. Instead, you define a constructor function to create objects with a particular initial set of properties and values. Any JavaScript function can be used as a constructor. You use the <code>new</code> operator with a constructor function to create a new object.</p> - -<div class="blockIndicator note"> -<p>Note that ECMAScript 2015 introduces a <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class declaration</a>:</p> - -<blockquote> -<p>JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax <em>does not</em> introduce a new object-oriented inheritance model to JavaScript.</p> -</blockquote> -</div> - -<h3 id="Subclasses_and_inheritance">Subclasses and inheritance</h3> - -<p>In a class-based language, you create a hierarchy of classes through the class definitions. In a class definition, you can specify that the new class is a <em>subclass</em> of an already existing class. The subclass inherits all the properties of the superclass and additionally can add new properties or modify the inherited ones. For example, assume the <code>Employee</code> class includes only the <code>name</code> and <code>dept</code> properties, and <code>Manager</code> is a subclass of <code>Employee</code> that adds the <code>reports</code> property. In this case, an instance of the <code>Manager</code> class would have all three properties: <code>name</code>, <code>dept</code>, and <code>reports</code>.</p> - -<p>JavaScript implements inheritance by allowing you to associate a prototypical object with any constructor function. So, you can create exactly the <code>Employee</code> — <code>Manager</code> example, but you use slightly different terminology. First you define the <code>Employee</code> constructor function, specifying the <code>name</code> and <code>dept</code> properties. Next, you define the <code>Manager</code> constructor function, calling the <code>Employee</code> constructor and specifying the <code>reports</code> property. Finally, you assign a new object derived from <code>Employee.prototype</code> as the <code>prototype</code> for the <code>Manager</code> constructor function. Then, when you create a new <code>Manager</code>, it inherits the <code>name</code> and <code>dept</code> properties from the <code>Employee</code> object.</p> - -<h3 id="Adding_and_removing_properties">Adding and removing properties</h3> - -<p>In class-based languages, you typically create a class at compile time and then you instantiate instances of the class either at compile time or at run time. You cannot change the number or the type of properties of a class after you define the class. In JavaScript, however, at run time you can add or remove properties of any object. If you add a property to an object that is used as the prototype for a set of objects, the objects for which it is the prototype also get the new property.</p> - -<h3 id="Summary_of_differences">Summary of differences</h3> - -<p>The following table gives a short summary of some of these differences. The rest of this chapter describes the details of using JavaScript constructors and prototypes to create an object hierarchy and compares this to how you would do it in Java.</p> - -<table class="standard-table"> - <caption>Comparison of class-based (Java) and prototype-based (JavaScript) object systems</caption> - <thead> - <tr> - <th scope="row">Category</th> - <th scope="col">Class-based (Java)</th> - <th scope="col">Prototype-based (JavaScript)</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Class vs. Instance</th> - <td>Class and instance are distinct entities.</td> - <td>Tüm nesneler başka bir nesneden miras alabilir.</td> - </tr> - <tr> - <th scope="row">Definition</th> - <td>Define a class with a class definition; instantiate a class with constructor methods.</td> - <td>Define and create a set of objects with constructor functions.</td> - </tr> - <tr> - <th scope="row">Creation of new object</th> - <td><code>new</code> operatörü ile tek bir nesne oluşturulur.</td> - <td>Aynı.</td> - </tr> - <tr> - <th scope="row">Construction of object hierarchy</th> - <td>Construct an object hierarchy by using class definitions to define subclasses of existing classes.</td> - <td> - <p>Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.</p> - </td> - </tr> - <tr> - <th scope="row">Inheritance model</th> - <td>Inherit properties by following the class chain.</td> - <td>Inherit properties by following the prototype chain.</td> - </tr> - <tr> - <th scope="row">Extension of properties</th> - <td>Class definition specifies <em>all</em> properties of all instances of a class. Cannot add properties dynamically at run time.</td> - <td>Constructor function or prototype specifies an <em>initial set</em> of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.</td> - </tr> - </tbody> -</table> - -<h2 id="The_employee_example">The employee example</h2> - -<p>The remainder of this chapter uses the employee hierarchy shown in the following figure.</p> - -<div style="display: table-row;"> -<div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;"> -<p>A simple object hierarchy with the following objects:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p> -</div> - -<div style="display: table-cell; vertical-align: middle; padding: 10px;"> -<ul> - <li><code>Employee</code> has the properties <code>name</code> (whose value defaults to the empty string) and <code>dept</code> (whose value defaults to "general").</li> - <li><code>Manager</code> is based on <code>Employee</code>. It adds the <code>reports</code> property (whose value defaults to an empty array, intended to have an array of <code>Employee</code> objects as its value).</li> - <li><code>WorkerBee</code> is also based on <code>Employee</code>. It adds the <code>projects</code> property (whose value defaults to an empty array, intended to have an array of strings as its value).</li> - <li><code>SalesPerson</code> is based on <code>WorkerBee</code>. It adds the <code>quota</code> property (whose value defaults to 100). It also overrides the <code>dept</code> property with the value "sales", indicating that all salespersons are in the same department.</li> - <li><code>Engineer</code> is based on <code>WorkerBee</code>. It adds the <code>machine</code> property (whose value defaults to the empty string) and also overrides the <code>dept</code> property with the value "engineering".</li> -</ul> -</div> -</div> - -<h2 id="Creating_the_hierarchy">Creating the hierarchy</h2> - -<p>There are several ways to define appropriate constructor functions to implement the Employee hierarchy. How you choose to define them depends largely on what you want to be able to do in your application.</p> - -<p>This section shows how to use very simple (and comparatively inflexible) definitions to demonstrate how to get the inheritance to work. In these definitions, you cannot specify any property values when you create an object. The newly-created object simply gets the default values, which you can change at a later time.</p> - -<p>In a real application, you would probably define constructors that allow you to provide property values at object creation time (see <a href="#More_flexible_constructors">More flexible constructors</a> for information). For now, these simple definitions demonstrate how the inheritance occurs.</p> - -<p>The following Java and JavaScript <code>Employee</code> definitions are similar. The only difference is that you need to specify the type for each property in Java but not in JavaScript (this is due to Java being a <a href="http://en.wikipedia.org/wiki/Strong_and_weak_typing">strongly typed language</a> while JavaScript is a weakly typed language).</p> - -<div class="twocolumns"> -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">function Employee() { - this.name = ''; - this.dept = 'general'; -} -</pre> - -<h4 id="Java"><br> - Java</h4> - -<pre class="brush: java">public class Employee { - public String name = ""; - public String dept = "general"; -} -</pre> -</div> - -<p>The <code>Manager</code> and <code>WorkerBee</code> definitions show the difference in how to specify the next object higher in the inheritance chain. In JavaScript, you add a prototypical instance as the value of the <code>prototype</code> property of the constructor function, then override the <code>prototype.constructor</code> to the constructor function. You can do so at any time after you define the constructor. In Java, you specify the superclass within the class definition. You cannot change the superclass outside the class definition.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_2">JavaScript</h4> - -<pre class="brush: js">function Manager() { - Employee.call(this); - this.reports = []; -} -Manager.prototype = Object.create(Employee.prototype); -Manager.prototype.constructor = Manager; - -function WorkerBee() { - Employee.call(this); - this.projects = []; -} -WorkerBee.prototype = Object.create(Employee.prototype); -WorkerBee.prototype.constructor = WorkerBee; -</pre> - -<h4 id="Java_2"><br> - Java</h4> - -<pre class="brush: java">public class Manager extends Employee { - public Employee[] reports = - new Employee[0]; -} - - - -public class WorkerBee extends Employee { - public String[] projects = new String[0]; -} - - -</pre> -</div> - -<p> </p> - -<p>The <code>Engineer</code> and <code>SalesPerson</code> definitions create objects that descend from <code>WorkerBee</code> and hence from <code>Employee</code>. An object of these types has properties of all the objects above it in the chain. In addition, these definitions override the inherited value of the <code>dept</code> property with new values specific to these objects.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">function SalesPerson() { - WorkerBee.call(this); - this.dept = 'sales'; - this.quota = 100; -} -SalesPerson.prototype = Object.create(WorkerBee.prototype); -SalesPerson.prototype.constructor = SalesPerson; - -function Engineer() { - WorkerBee.call(this); - this.dept = 'engineering'; - this.machine = ''; -} -Engineer.prototype = Object.create(WorkerBee.prototype) -Engineer.prototype.constructor = Engineer; -</pre> - -<h4 id="Java_3"><br> - Java</h4> - -<pre class="brush: java">public class SalesPerson extends WorkerBee { - public String dept = "sales"; - public double quota = 100.0; -} - - -public class Engineer extends WorkerBee { - public String dept = "engineering"; - public String machine = ""; -} - -</pre> -</div> - -<p>Using these definitions, you can create instances of these objects that get the default values for their properties. The next figure illustrates using these JavaScript definitions to create new objects and shows the property values for the new objects.</p> - -<div class="note"> -<p><strong>Note:</strong> The term <em><em>instance</em></em> has a specific technical meaning in class-based languages. In these languages, an instance is an individual instantiation of a class and is fundamentally different from a class. In JavaScript, "instance" does not have this technical meaning because JavaScript does not have this difference between classes and instances. However, in talking about JavaScript, "instance" can be used informally to mean an object created using a particular constructor function. So, in this example, you could informally say that <code><code>jane</code></code> is an instance of <code><code>Engineer</code></code>. Similarly, although the terms <em><em>parent</em>, <em>child</em>, <em>ancestor</em></em>, and <em><em>descendant</em></em> do not have formal meanings in JavaScript; you can use them informally to refer to objects higher or lower in the prototype chain.</p> -</div> - -<h3 id="Creating_objects_with_simple_definitions">Creating objects with simple definitions</h3> - -<div class="twocolumns"> -<h4 id="Object_hierarchy">Object hierarchy</h4> - -<p>The following hierarchy is created using the code on the right side.</p> - -<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p> - -<p> </p> - -<h4 id="Individual_objects_Jim_Sally_Mark_Fred_Jane_etc._Instances_created_from_constructor">Individual objects = Jim, Sally, Mark, Fred, Jane, etc.<br> - "Instances" created from constructor</h4> - -<pre class="brush: js">var jim = new Employee; -// Parentheses can be omitted if the -// constructor takes no arguments. -// jim.name is '' -// jim.dept is 'general' - -var sally = new Manager; -// sally.name is '' -// sally.dept is 'general' -// sally.reports is [] - -var mark = new WorkerBee; -// mark.name is '' -// mark.dept is 'general' -// mark.projects is [] - -var fred = new SalesPerson; -// fred.name is '' -// fred.dept is 'sales' -// fred.projects is [] -// fred.quota is 100 - -var jane = new Engineer; -// jane.name is '' -// jane.dept is 'engineering' -// jane.projects is [] -// jane.machine is '' -</pre> -</div> - -<h2 id="Object_properties">Object properties</h2> - -<p>This section discusses how objects inherit properties from other objects in the prototype chain and what happens when you add a property at run time.</p> - -<h3 id="Inheriting_properties">Inheriting properties</h3> - -<p>Suppose you create the <code>mark</code> object as a <code>WorkerBee</code> with the following statement:</p> - -<pre class="brush: js">var mark = new WorkerBee; -</pre> - -<p>When JavaScript sees the <code>new</code> operator, it creates a new generic object and implicitly sets the value of the internal property [[Prototype]] to the value of <code>WorkerBee.prototype</code> and passes this new object as the value of the <em><code>this</code></em> keyword to the <code>WorkerBee</code> constructor function. The internal [[Prototype]] property determines the prototype chain used to return property values. Once these properties are set, JavaScript returns the new object and the assignment statement sets the variable <code>mark</code> to that object.</p> - -<p>This process does not explicitly put values in the <code>mark</code> object (<em>local</em> values) for the properties that <code>mark</code> inherits from the prototype chain. When you ask for the value of a property, JavaScript first checks to see if the value exists in that object. If it does, that value is returned. If the value is not there locally, JavaScript checks the prototype chain (using the internal [[Prototype]] property). If an object in the prototype chain has a value for the property, that value is returned. If no such property is found, JavaScript says the object does not have the property. In this way, the <code>mark</code> object has the following properties and values:</p> - -<pre class="brush: js">mark.name = ''; -mark.dept = 'general'; -mark.projects = []; -</pre> - -<p>The <code>mark</code> object is assigned local values for the <code>name</code> and <code>dept</code> properties by the Employee constructor. It is assigned a local value for the <code>projects</code> property by the <code>WorkerBee</code> constructor. This gives you inheritance of properties and their values in JavaScript. Some subtleties of this process are discussed in <a href="#Property_inheritance_revisited">Property inheritance revisited</a>.</p> - -<p>Because these constructors do not let you supply instance-specific values, this information is generic. The property values are the default ones shared by all new objects created from <code>WorkerBee</code>. You can, of course, change the values of any of these properties. So, you could give specific information for <code>mark</code> as follows:</p> - -<pre class="brush: js">mark.name = 'Doe, Mark'; -mark.dept = 'admin'; -mark.projects = ['navigator'];</pre> - -<h3 id="Adding_properties">Adding properties</h3> - -<p>In JavaScript, you can add properties to any object at run time. You are not constrained to use only the properties provided by the constructor function. To add a property that is specific to a single object, you assign a value to the object, as follows:</p> - -<pre class="brush: js">mark.bonus = 3000; -</pre> - -<p>Now, the <code>mark</code> object has a <code>bonus</code> property, but no other <code>WorkerBee</code> has this property.</p> - -<p>If you add a new property to an object that is being used as the prototype for a constructor function, you add that property to all objects that inherit properties from the prototype. For example, you can add a <code>specialty</code> property to all employees with the following statement:</p> - -<pre class="brush: js">Employee.prototype.specialty = 'none'; -</pre> - -<p>As soon as JavaScript executes this statement, the <code>mark</code> object also has the <code>specialty</code> property with the value of <code>"none"</code>. The following figure shows the effect of adding this property to the <code>Employee</code> prototype and then overriding it for the <code>Engineer</code> prototype.</p> - -<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> - <small><strong>Adding properties</strong></small></p> - -<h2 id="More_flexible_constructors">More flexible constructors</h2> - -<p>The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.</p> - -<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> - <small><strong>Specifying properties in a constructor, take 1</strong></small></p> - -<p>The following table shows the Java and JavaScript definitions for these objects.</p> - -<div class="twocolumns"> -<h4 id="JavaScript_4">JavaScript</h4> - -<h4 id="Java_4">Java</h4> -</div> - -<div class="twocolumns"> -<pre class="brush: js">function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; -} -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class Employee { - public String name; - public String dept; - public Employee () { - this("", "general"); - } - public Employee (String name) { - this(name, "general"); - } - public Employee (String name, String dept) { - this.name = name; - this.dept = dept; - } -} -</pre> -</div> - -<div class="twocolumns"> -<pre class="brush: js">function WorkerBee(projs) { - - this.projects = projs || []; -} -WorkerBee.prototype = new Employee; -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class WorkerBee extends Employee { - public String[] projects; - public WorkerBee () { - this(new String[0]); - } - public WorkerBee (String[] projs) { - projects = projs; - } -} -</pre> -</div> - -<div class="twocolumns"> -<pre class="brush: js"> -function Engineer(mach) { - this.dept = 'engineering'; - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: java">public class Engineer extends WorkerBee { - public String machine; - public Engineer () { - dept = "engineering"; - machine = ""; - } - public Engineer (String mach) { - dept = "engineering"; - machine = mach; - } -} -</pre> -</div> - -<p>These JavaScript definitions use a special idiom for setting default values:</p> - -<pre class="brush: js">this.name = name || ''; -</pre> - -<p>The JavaScript logical OR operator (<code>||</code>) evaluates its first argument. If that argument converts to true, the operator returns it. Otherwise, the operator returns the value of the second argument. Therefore, this line of code tests to see if <code>name</code> has a useful value for the <code>name</code> property. If it does, it sets <code>this.name</code> to that value. Otherwise, it sets <code>this.name</code> to the empty string. This chapter uses this idiom for brevity; however, it can be puzzling at first glance.</p> - -<div class="note"> -<p><strong>Note:</strong> This may not work as expected if the constructor function is called with arguments which convert to <code><code>false</code></code> (like <code>0</code> (zero) and empty string (<code><code>""</code></code>). In this case the default value will be chosen.</p> -</div> - -<p>With these definitions, when you create an instance of an object, you can specify values for the locally defined properties. You can use the following statement to create a new <code>Engineer</code>:</p> - -<pre class="brush: js">var jane = new Engineer('belau'); -</pre> - -<p><code>Jane</code>'s properties are now:</p> - -<pre class="brush: js">jane.name == ''; -jane.dept == 'engineering'; -jane.projects == []; -jane.machine == 'belau'; -</pre> - -<p>Notice that with these definitions, you cannot specify an initial value for an inherited property such as <code>name</code>. If you want to specify an initial value for inherited properties in JavaScript, you need to add more code to the constructor function.</p> - -<p>So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.</p> - -<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> - <small><strong>Specifying properties in a constructor, take 2</strong></small></p> - -<p>Let's look at one of these definitions in detail. Here's the new definition for the <code>Engineer</code> constructor:</p> - -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> - -<p>Suppose you create a new <code>Engineer</code> object as follows:</p> - -<pre class="brush: js">var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); -</pre> - -<p>JavaScript follows these steps:</p> - -<ol> - <li>The <code>new</code> operator creates a generic object and sets its <code>__proto__</code> property to <code>Engineer.prototype</code>.</li> - <li>The <code>new</code> operator passes the new object to the <code>Engineer</code> constructor as the value of the <code>this</code> keyword.</li> - <li>The constructor creates a new property called <code>base</code> for that object and assigns the value of the <code>WorkerBee</code> constructor to the <code>base</code> property. This makes the <code>WorkerBee</code> constructor a method of the <code>Engineer</code> object. The name of the <code>base</code> property is not special. You can use any legal property name; <code>base</code> is simply evocative of its purpose.</li> - <li>The constructor calls the <code>base</code> method, passing as its arguments two of the arguments passed to the constructor (<code>"Doe, Jane"</code> and <code>["navigator", "javascript"]</code>) and also the string <code>"engineering"</code>. Explicitly using <code>"engineering"</code> in the constructor indicates that all <code>Engineer</code> objects have the same value for the inherited <code>dept</code> property, and this value overrides the value inherited from <code>Employee</code>.</li> - <li>Because <code>base</code> is a method of <code>Engineer</code>, within the call to <code>base</code>, JavaScript binds the <code>this</code> keyword to the object created in Step 1. Thus, the <code>WorkerBee</code> function in turn passes the <code>"Doe, Jane"</code> and <code>"engineering"</code> arguments to the <code>Employee</code> constructor function. Upon return from the <code>Employee</code> constructor function, the <code>WorkerBee</code> function uses the remaining argument to set the <code>projects</code> property.</li> - <li>Upon return from the <code>base</code> method, the <code>Engineer</code> constructor initializes the object's <code>machine</code> property to <code>"belau"</code>.</li> - <li>Upon return from the constructor, JavaScript assigns the new object to the <code>jane</code> variable.</li> -</ol> - -<p>You might think that, having called the <code>WorkerBee</code> constructor from inside the <code>Engineer</code> constructor, you have set up inheritance appropriately for <code>Engineer</code> objects. This is not the case. Calling the <code>WorkerBee</code> constructor ensures that an <code>Engineer</code> object starts out with the properties specified in all constructor functions that are called. However, if you later add properties to the <code>Employee</code> or <code>WorkerBee</code> prototypes, those properties are not inherited by the <code>Engineer</code> object. For example, assume you have the following statements:</p> - -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); -Employee.prototype.specialty = 'none'; -</pre> - -<p>The <code>jane</code> object does not inherit the <code>specialty</code> property. You still need to explicitly set up the prototype to ensure dynamic inheritance. Assume instead you have these statements:</p> - -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; -var jane = new Engineer('Doe, Jane', ['navigator', 'javascript'], 'belau'); -Employee.prototype.specialty = 'none'; -</pre> - -<p>Now the value of the <code>jane</code> object's <code>specialty</code> property is "none".</p> - -<p>Another way of inheriting is by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> / <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a> methods. Below are equivalent:</p> - -<div class="twocolumns"> -<pre class="brush: js">function Engineer(name, projs, mach) { - this.base = WorkerBee; - this.base(name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> - -<pre class="brush: js">function Engineer(name, projs, mach) { - WorkerBee.call(this, name, 'engineering', projs); - this.machine = mach || ''; -} -</pre> -</div> - -<p>Using the javascript <code>call()</code> method makes a cleaner implementation because the <code>base</code> is not needed anymore.</p> - -<h2 id="Property_inheritance_revisited">Property inheritance revisited</h2> - -<p>The preceding sections described how JavaScript constructors and prototypes provide hierarchies and inheritance. This section discusses some subtleties that were not necessarily apparent in the earlier discussions.</p> - -<h3 id="Local_versus_inherited_values">Local versus inherited values</h3> - -<p>When you access an object property, JavaScript performs these steps, as described earlier in this chapter:</p> - -<ol> - <li>Check to see if the value exists locally. If it does, return that value.</li> - <li>If there is not a local value, check the prototype chain (using the <code>__proto__</code> property).</li> - <li>If an object in the prototype chain has a value for the specified property, return that value.</li> - <li>If no such property is found, the object does not have the property.</li> -</ol> - -<p>The outcome of these steps depends on how you define things along the way. The original example had these definitions:</p> - -<pre class="brush: js">function Employee() { - this.name = ''; - this.dept = 'general'; -} - -function WorkerBee() { - this.projects = []; -} -WorkerBee.prototype = new Employee; -</pre> - -<p>With these definitions, suppose you create <code>amy</code> as an instance of <code>WorkerBee</code> with the following statement:</p> - -<pre class="brush: js">var amy = new WorkerBee; -</pre> - -<p>The <code>amy</code> object has one local property, <code>projects</code>. The values for the <code>name</code> and <code>dept</code> properties are not local to <code>amy</code> and so derive from the <code>amy</code> object's <code>__proto__</code> property. Thus, <code>amy</code> has these property values:</p> - -<pre class="brush: js">amy.name == ''; -amy.dept == 'general'; -amy.projects == []; -</pre> - -<p>Now suppose you change the value of the <code>name</code> property in the prototype associated with <code>Employee</code>:</p> - -<pre class="brush: js">Employee.prototype.name = 'Unknown'; -</pre> - -<p>At first glance, you might expect that new value to propagate down to all the instances of <code>Employee</code>. However, it does not.</p> - -<p>When you create <em>any</em> instance of the <code>Employee</code> object, that instance gets a <strong>local value</strong> for the <code>name</code> property (the empty string). This means that when you set the <code>WorkerBee</code> prototype by creating a new <code>Employee</code> object, <code>WorkerBee.prototype</code> has a local value for the <code>name</code> property. Therefore, when JavaScript looks up the <code>name</code> property of the <code>amy</code> object (an instance of <code>WorkerBee</code>), JavaScript finds the local value for that property in <code>WorkerBee.prototype</code>. It therefore does not look further up the chain to <code>Employee.prototype</code>.</p> - -<p>If you want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype. For example, assume you change the preceding code to the following:</p> - -<pre class="brush: js">function Employee() { - this.dept = 'general'; // Note that this.name (a local variable) does not appear here -} -Employee.prototype.name = ''; // A single copy - -function WorkerBee() { - this.projects = []; -} -WorkerBee.prototype = new Employee; - -var amy = new WorkerBee; - -Employee.prototype.name = 'Unknown'; -</pre> - -<p>In this case, the <code>name</code> property of <code>amy</code> becomes "Unknown".</p> - -<p>As these examples show, if you want to have default values for object properties and you want to be able to change the default values at run time, you should set the properties in the constructor's prototype, not in the constructor function itself.</p> - -<h3 id="Determining_instance_relationships">Determining instance relationships</h3> - -<p>Property lookup in JavaScript looks within an object's own properties and, if the property name is not found, it looks within the special object property <code>__proto__</code>. This continues recursively; the process is called "lookup in the prototype chain".</p> - -<p>The special property <code>__proto__</code> is set when an object is constructed; it is set to the value of the constructor's <code>prototype</code> property. So the expression <code>new Foo()</code> creates an object with <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Consequently, changes to the properties of <code class="moz-txt-verticalline">Foo.prototype</code> alters the property lookup for all objects that were created by <code>new Foo()</code>.</p> - -<p>Every object has a <code>__proto__</code> object property (except <code>Object</code>); every function has a <code>prototype</code> object property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's <code>__proto__</code> to a function's <code>prototype</code> object. JavaScript provides a shortcut: the <code>instanceof</code> operator tests an object against a function and returns true if the object inherits from the function prototype. For example,</p> - -<pre class="brush: js">var f = new Foo(); -var isTrue = (f instanceof Foo);</pre> - -<p>For a more detailed example, suppose you have the same set of definitions shown in <a href="#Inheriting_properties">Inheriting properties</a>. Create an <code>Engineer</code> object as follows:</p> - -<pre class="brush: js">var chris = new Engineer('Pigman, Chris', ['jsd'], 'fiji'); -</pre> - -<p>With this object, the following statements are all true:</p> - -<pre class="brush: js">chris.__proto__ == Engineer.prototype; -chris.__proto__.__proto__ == WorkerBee.prototype; -chris.__proto__.__proto__.__proto__ == Employee.prototype; -chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; -chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; -</pre> - -<p>Given this, you could write an <code>instanceOf</code> function as follows:</p> - -<pre class="brush: js">function instanceOf(object, constructor) { - object = object.__proto__; - while (object != null) { - if (object == constructor.prototype) - return true; - if (typeof object == 'xml') { - return constructor.prototype == XML.prototype; - } - object = object.__proto__; - } - return false; -} -</pre> - -<div class="note"><strong>Note:</strong> The implementation above checks the type of the object against "xml" in order to work around a quirk of how XML objects are represented in recent versions of JavaScript. See {{ bug(634150) }} if you want the nitty-gritty details.</div> - -<p>Using the instanceOf function defined above, these expressions are true:</p> - -<pre class="brush: js">instanceOf(chris, Engineer) -instanceOf(chris, WorkerBee) -instanceOf(chris, Employee) -instanceOf(chris, Object) -</pre> - -<p>But the following expression is false:</p> - -<pre class="brush: js">instanceOf(chris, SalesPerson) -</pre> - -<h3 id="Global_information_in_constructors">Global information in constructors</h3> - -<p>When you create constructors, you need to be careful if you set global information in the constructor. For example, assume that you want a unique ID to be automatically assigned to each new employee. You could use the following definition for <code>Employee</code>:</p> - -<pre class="brush: js">var idCounter = 1; - -function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; - this.id = idCounter++; -} -</pre> - -<p>With this definition, when you create a new <code>Employee</code>, the constructor assigns it the next ID in sequence and then increments the global ID counter. So, if your next statement is the following, <code>victoria.id</code> is 1 and <code>harry.id</code> is 2:</p> - -<pre class="brush: js">var victoria = new Employee('Pigbert, Victoria', 'pubs'); -var harry = new Employee('Tschopik, Harry', 'sales'); -</pre> - -<p>At first glance that seems fine. However, <code>idCounter</code> gets incremented every time an <code>Employee</code> object is created, for whatever purpose. If you create the entire <code>Employee</code> hierarchy shown in this chapter, the <code>Employee</code> constructor is called every time you set up a prototype. Suppose you have the following code:</p> - -<pre class="brush: js">var idCounter = 1; - -function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; - this.id = idCounter++; -} - -function Manager(name, dept, reports) {...} -Manager.prototype = new Employee; - -function WorkerBee(name, dept, projs) {...} -WorkerBee.prototype = new Employee; - -function Engineer(name, projs, mach) {...} -Engineer.prototype = new WorkerBee; - -function SalesPerson(name, projs, quota) {...} -SalesPerson.prototype = new WorkerBee; - -var mac = new Engineer('Wood, Mac'); -</pre> - -<p>Further assume that the definitions omitted here have the <code>base</code> property and call the constructor above them in the prototype chain. In this case, by the time the <code>mac</code> object is created, <code>mac.id</code> is 5.</p> - -<p>Depending on the application, it may or may not matter that the counter has been incremented these extra times. If you care about the exact value of this counter, one possible solution involves instead using the following constructor:</p> - -<pre class="brush: js">function Employee(name, dept) { - this.name = name || ''; - this.dept = dept || 'general'; - if (name) - this.id = idCounter++; -} -</pre> - -<p>When you create an instance of <code>Employee</code> to use as a prototype, you do not supply arguments to the constructor. Using this definition of the constructor, when you do not supply arguments, the constructor does not assign a value to the id and does not update the counter. Therefore, for an <code>Employee</code> to get an assigned id, you must specify a name for the employee. In this example, <code>mac.id</code> would be 1.</p> - -<p>Alternatively, you can create a copy of Employee's prototype object to assign to WorkerBee:</p> - -<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype); -// instead of WorkerBee.prototype = new Employee -</pre> - -<h3 id="No_multiple_inheritance">No multiple inheritance</h3> - -<p>Some object-oriented languages allow multiple inheritance. That is, an object can inherit the properties and values from unrelated parent objects. JavaScript does not support multiple inheritance.</p> - -<p>Inheritance of property values occurs at run time by JavaScript searching the prototype chain of an object to find a value. Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.</p> - -<p>In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance. For example, consider the following statements:</p> - -<pre class="brush: js">function Hobbyist(hobby) { - this.hobby = hobby || 'scuba'; -} - -function Engineer(name, projs, mach, hobby) { - this.base1 = WorkerBee; - this.base1(name, 'engineering', projs); - this.base2 = Hobbyist; - this.base2(hobby); - this.machine = mach || ''; -} -Engineer.prototype = new WorkerBee; - -var dennis = new Engineer('Doe, Dennis', ['collabra'], 'hugo'); -</pre> - -<p>Further assume that the definition of <code>WorkerBee</code> is as used earlier in this chapter. In this case, the <code>dennis</code> object has these properties:</p> - -<pre class="brush: js">dennis.name == 'Doe, Dennis'; -dennis.dept == 'engineering'; -dennis.projects == ['collabra']; -dennis.machine == 'hugo'; -dennis.hobby == 'scuba'; -</pre> - -<p>So <code>dennis</code> does get the <code>hobby</code> property from the <code>Hobbyist</code> constructor. However, assume you then add a property to the <code>Hobbyist</code> constructor's prototype:</p> - -<pre class="brush: js">Hobbyist.prototype.equipment = ['mask', 'fins', 'regulator', 'bcd']; -</pre> - -<p>The <code>dennis</code> object does not inherit this new property.</p> - -<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> diff --git a/files/tr/web/javascript/guide/functions/index.html b/files/tr/web/javascript/guide/functions/index.html deleted file mode 100644 index ff7638ebb5..0000000000 --- a/files/tr/web/javascript/guide/functions/index.html +++ /dev/null @@ -1,663 +0,0 @@ ---- -title: Fonksiyonlar -slug: Web/JavaScript/Guide/Functions -tags: - - Başlangıç seviyesi - - Fonksiyonlar - - Rehber -translation_of: Web/JavaScript/Guide/Functions -original_slug: Web/JavaScript/Guide/Fonksiyonlar ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> - -<p class="summary">Foksiyonlar, JavaScript'in en temel yapıtaşlarından biridir. Her bir fonksiyon, bir JavaScript işlemidir—herhangi bir görevi yerine getiren veya değer hesaplayan bir ifade kümesini içerirler. Bir fonksiyonu kullanmak için, fonksiyonu çağıracağınız kısmın faaliyet gösterdiği alanda fonksiyonu tanımlıyor olmanız gerekmektedir.</p> - -<p>Daha fazla bilgi için <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript fonksiyonları ile ilgili buradaki detaylı kaynağı</a> inceleyebilirsiniz.</p> - -<h2 id="Fonksiyonların_tanımlanması">Fonksiyonların tanımlanması</h2> - -<h3 id="Fonksiyon_tanımlamaları">Fonksiyon tanımlamaları</h3> - -<p>Bir <strong>fonksiyon tanımı</strong> (<strong>fonksiyon betimlemesi</strong>, veya <strong>fonksiyon ifadesi</strong> de denir) <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>function</code></a> anahtar kelimesinden sonra aşağıdaki kısımları içerir:</p> - -<ul> - <li>Fonksiyonun adı.</li> - <li>Fonksiyonun aldığı parametreler (parantezler ile çevrili ve virgüller ile birbirinden ayrılmış olmalıdırlar).</li> - <li>Çalıştırılacak JavaScript ifadeleri (süslü parantezler ile çevrilmelidir<font face="Consolas, Liberation Mono, Courier, monospace">)</font>.</li> -</ul> - -<p>Örneğin aşağıdaki kodda <code>karesiniAl</code> isimli basit bir fonksiyon tanımlanmıştır:</p> - -<pre class="brush: js">function <code>karesiniAl</code>(sayı) { - return sayı * sayı; -} -</pre> - -<p><code>karesiniAl</code> fonksiyonu, <code>sayı</code> isminde tek bir parametre içerir. Tek bir ifade içeren fonksiyonda, <code>sayı</code> parametresinin kendisi ile çarpılıp geri döndürülmesi işlemi yapılmıştır. <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return"><code>return</code></a> ifadesi, fonksiyon tarafından döndürülen değeri belirler.</p> - -<pre class="brush: js">return sayı * sayı; -</pre> - -<p>Sayı türünde olduğu gibi ilkel parametreler fonksiyonlara <strong>değer ile geçilirler</strong>; ilgili değer, fonksiyona parametre olarak geçildiğinde parametre değerinin fonksiyonda ayrı bir kopyası alınır, eğer fonksiyon içerisinde parametre değerinde değişik yapılırsa, bu değişiklik sadece kopyalanan değer üzerinde gerçekleşmiştir, fonksiyona geçilen asıl değer değişmez.</p> - -<p>Eğer bir nesneyi ({{jsxref("Array")}} veya bir kullanıcı tanımlı nesne gibi ilkel olmayan değer) fonksiyona parametre olarak geçerseniz, nesne fonksiyon içerisinde kopyalanmadığı için nesne üzerinde yapılan değişiklikler fonksiyon dışında da korunur. Aşağıdaki örneği inceleyelim:</p> - -<pre class="brush: js">function arabamıDeğiştir(araba) { - araba.markası = "Toyota"; -} - -var arabam = {markası: "Honda", modeli: "Accord", yılı: 1998}; -var x, y; - -x = arabam.markası ; // "Honda" değerini getirir - -arabamıDeğiştir(arabam); -y = arabam.markası; // "Toyota" değeri döndürülür - // (markası özelliği fonksiyon tarafından değiştirilmiştir) -</pre> - -<h3 id="Fonksiyon_ifadeleri">Fonksiyon ifadeleri</h3> - -<p>Yukarıdaki fonksiyon tanımlaması sözdizimsel olarak bir ifade olmasına rağmen, fonksiyonlar ayrıca bir f<strong>onksiyon ifadesi </strong>ile de oluşturulabilirler. Böyle bir fonksiyon <strong>anonim</strong> olabilir; bir isme sahip olmak zorunda değildir. Örnek olarak, matematikteki kare alma fonksiyonu aşağıdaki şekilde tanımlanabilir:</p> - -<pre class="brush: js">var karesiniAl = function(sayı) { return sayı * sayı }; -var x = karesiniAl(4) // x'in değeri 16 olur.</pre> - -<p>Fonksiyon ifadesi ile belirtilen fonksiyon adı, fonksiyonun içerisinde kendisini çağıracak şekilde kullanılabilir:</p> - -<pre class="brush: js">var faktoriyel = function fa(n) { return n < 2 ? 1 : n * fa(n-1) }; - -console.log(faktoriyel(3)); -</pre> - -<p>Fonksiyon ifadeleri, bir fonksiyon diğer fonksiyona parametre olarak geçilirken oldukça elverişlidir. Aşağıdaki örnekte <code>map</code> fonksiyonu tanımlanmış ve ilk parametresinde başka bir fonksiyonu parametre olarak almıştır:</p> - -<pre class="brush: js">function map(f,d) { - var sonuç = [], // Yeni bir dizi - i; - for (i = 0; i != d.length; i++) - sonuç[i] = f(d[i]); - return sonuç; -} -</pre> - -<p>Aşağıdaki kodda kullanımı mevcuttur:</p> - -<pre class="brush: js">var çarpım = function(x) {return x * x * x}; // Fonksiyon ifadesi. -map(çarpım, [0, 1, 2, 5, 10]); -</pre> - -<p>[0, 1, 8, 125, 1000] dizisini döndürür.</p> - -<p>JavaScript'te bir fonksiyon, herhangi bir duruma bağlı olarak oluşturulabilir.Örneğin aşağıdaki fonksiyonda <code>benimFonk</code> fonksiyonu, <code>sayı</code> değeri sadece 0'a eşit olursa tanımlanır:</p> - -<pre class="brush: js">var <code>benimFonk</code>; -if (sayı === 0){ - <code>benimFonk </code>= function(araba) { - araba.marka = "Toyota" - } -}</pre> - -<p>Burada tanımlanan fonksiyonlara ek olarak {{jsxref("Function")}} yapıcısını kullanarak da çalışma zamanında fonksiyon oluşmasını sağlanabilir. Örneğin {{jsxref("eval", "eval()")}} ifadesi gibi.</p> - -<p>Bir nesnenin özelliği olan fonksiyona <strong>metot</strong> adı verilir. Nesneler ve metotlar hakkında daha fazla bilgi için bkz: <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Nesneler ile çalışma</a>.</p> - -<h2 id="Fonksiyonları_çağırma">Fonksiyonları çağırma</h2> - -<p>Bir fonksiyonu tanımlamakla o fonksiyon çalışmaz. Fonksiyonu tanımlamak kısaca, o fonksiyona bir isim vermek ve o fonkisyon çağırıldığında bizim için hangi eylemleri yapması gerektiğini belirtmektir. Fonksiyonu <strong>çağırmak</strong>, bu belirlenmiş eylemleri bizim o fonksiyona verdiğimiz parametrelerin de kullanılmasıyla gerçekleştirir. Örneğin, <code>karesiniAl </code>diye bir fonksiyon tanımladığınızda, o fonksiyonu aşağıdaki gibi çağırabilirsiniz:</p> - -<pre class="brush: js"><code>karesiniAl</code>(5); -</pre> - -<p>Bu ifade, fonksiyona parametre olarak 5 sayısını yollayarak çağırır. Fonksiyon, tanımlanırken belirttiğimiz eylemleri yapar ve bize 25 değerini döndürür.</p> - -<p>Fonksiyonlar çağrıldıklarında bir alanda olmalıdılar, fakat fonksiyon bildirimi kaldırılabilir, örnekteki gibi:</p> - -<pre class="brush: js">console.log(square(5)); -/* ... */ -function square(n) { return n * n } -</pre> - -<p>Bir fonksiyonun alanı, bildirilen işlevdir, veya tüm program üst seviyede bildirilmişse.</p> - -<div class="note"> -<p><strong>Not:</strong> Bu, yalnızca yukarıdaki sözdizimini (i.e. <code>function benimFonk(){}</code>) işlevini kullanarak işlevi tanımlarken çalışır. Aşağıdaki kod çalışmayacak. Yani, işlev kaldırma sadece işlev bildirimi ile çalışır ve işlev ifadesiyle çalışamaz.</p> -</div> - -<pre class="brush: js example-bad">console.log(square); // square is hoisted with an initial value undefined. -console.log(square(5)); // TypeError: square is not a function -var square = function (n) { - return n * n; -} -</pre> - -<p>Bir fonksiyonun argümanları karakter dizileri ve sayılarla sınırlı değildir. Tüm nesneleri bir fonksiyona aktarabilirsiniz. <code>show_props()</code> fonksiyonu (<a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a> bölümünde tanımlanmıştır.) nesneyi argüman olarak alan bir fonksiyon örneğidir.</p> - -<p>Bir fonksiyon kendini çağırabilir. Örneğin, burada faktöriyelleri yinelemeli olarak hesaplayan bir fonksiyon var.</p> - -<pre class="brush: js">function factorial(n){ - if ((n === 0) || (n === 1)) - return 1; - else - return (n * factorial(n - 1)); -} -</pre> - -<p>Daha sonra bir ile beş arasındaki faktöriyelleri şu şekilde hesaplayabilirsiniz:</p> - -<pre class="brush: js">var a, b, c, d, e; -a = factorial(1); // a gets the value 1 -b = factorial(2); // b gets the value 2 -c = factorial(3); // c gets the value 6 -d = factorial(4); // d gets the value 24 -e = factorial(5); // e gets the value 120 -</pre> - -<p>Fonksiyonları çağırmanın başka yolları da var. Bir fonksiyonun dinamik olarak çağrılması gerektiği veya bir fonksiyonun argümanlarının sayısının değişebileceği veya fonksiyon çağrısının içeriğinin çalışma zamanında belirlenen belirli bir nesneye ayarlanması gerektiği durumlar vardır. Fonksiyonların kendileri nesneler olduğu ve bu nesnelerin sırasıyla yöntemleri olduğu anlaşılıyor (bkz. {{Jsxref ("Function")}} nesnesi). Bunlardan biri, {{jsxref ("Function.apply", "application ()")}} yöntemi, bu amaca ulaşmak için kullanılabilir.</p> - -<h2 class="deki-transform" id="Fonksiyon_Kapsamı">Fonksiyon Kapsamı</h2> - -<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 408px;"><span lang="tr">Bir fonksiyon içinde tanımlanmış değişkenlere, fonksiyonun dışındaki herhangi bir yerden erişilemez, çünkü değişken sadece fonksiyon kapsamında tanımlanır. Bununla birlikte, bir fonksiyon tanımlandığı kapsamda tanımlanan tüm değişkenlere ve fonksiyonlara erişebilir. Başka bir deyişle, global kapsamda tanımlanan bir fonksiyon, global kapsamda tanımlanan tüm değişkenlere erişebilir. Başka bir fonksiyonun içinde tanımlanmış bir fonksiyon, ana fonksiyonunda tanımlanan tüm değişkenlere ve ana fonksiyonun erişebildiği herhangi bir değişkene de erişebilir.</span></p> - -<pre class="brush: js">// The following variables are defined in the global scope -var num1 = 20, - num2 = 3, - name = "Chamahk"; - -// This function is defined in the global scope -function multiply() { - return num1 * num2; -} - -multiply(); // Returns 60 - -// A nested function example -function getScore () { - var num1 = 2, - num2 = 3; - - function add() { - return name + " scored " + (num1 + num2); - } - - return add(); -} - -getScore(); // Returns "Chamahk scored 5"</pre> - -<h2 id="Kapsam_ve_fonksiyon_yığını">Kapsam ve fonksiyon yığını</h2> - -<h3 id="Yineleme">Yineleme</h3> - -<p class="tw-data-text tw-ta tw-text-small" id="tw-target-text" style="text-align: left; height: 96px;"><span lang="tr">Bir fonksiyon kendisine başvurabilir ve kendisini arayabilir. Bir işlevin kendisine başvurması için üç yol vardır:</span></p> - -<p> </p> - -<ol> - <li>fonksiyonun adı</li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li> - <li> - <p class="tw-data-text tw-ta tw-text-medium" dir="ltr" id="tw-target-text" style="text-align: left; height: 72px;"><span lang="tr">fonksiyona başvuran bir kapsam içi değişken</span> </p> - </li> -</ol> - -<div class="oSioSc"> -<div id="tw-target"> -<div class="gsrt tw-ta-container tw-nfl" id="tw-target-text-container"> -<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 48px;"><span lang="tr">Örneğin, aşağıdaki işlev tanımını göz önünde bulundurun:</span></p> -</div> -</div> -</div> - -<p> </p> - -<pre class="brush: js">var foo = function bar() { - // statements go here -}; -</pre> - -<p>Fonksiyon gövdesinde aşağıdakilerden hepsi eşdeğerdir.</p> - -<ol> - <li><code>bar()</code></li> - <li><code>arguments.callee()</code></li> - <li><code>foo()</code></li> -</ol> - -<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left; height: 216px;"><span lang="tr">Kendisini çağıran fonksiyona özyinelemeli fonksiyon denir. Bazı açılardan, özyineleme bir döngüye benzer. Her ikisi de aynı kodu birkaç kez uygular ve her ikisi de bir koşul gerektirir (bu, sonsuz bir döngüden kaçınmak veya daha doğrusu bu durumda sonsuz özyinelemeden kaçınmak için). Örneğin, aşağıdaki döngü:</span></p> - -<pre class="brush: js">var x = 0; -while (x < 10) { // "x < 10" is the loop condition - // do stuff - x++; -} -</pre> - -<p><span lang="tr">özyinelemeli bir fonksiyona ve bu fonksiyonun çağrısına dönüştürülebilir:</span></p> - -<pre class="brush: js">function loop(x) { - if (x >= 10) // "x >= 10" is the exit condition (equivalent to "!(x < 10)") - return; - // do stuff - loop(x + 1); // the recursive call -} -loop(0); -</pre> - -<p><span lang="tr">Ancak, bazı algoritmalar basit yinelemeli döngüler olamaz. Örneğin, bir ağaç yapısının tüm düğümlerinin </span>(örneğin <a href="/en-US/docs/DOM">DOM</a>) <span lang="tr">alınması özyineleme kullanılarak daha kolay yapılır:</span></p> - -<pre class="brush: js">function walkTree(node) { - if (node == null) // - return; - // do something with node - for (var i = 0; i < node.childNodes.length; i++) { - walkTree(node.childNodes[i]); - } -} -</pre> - -<p><span lang="tr">Fonksiyon </span><code>döngüsü</code><span lang="tr"> ile karşılaştırıldığında, her özyinelemeli çağrının kendisi burada birçok özyinelemeli çağrı yapar.</span></p> - -<p><span lang="tr">Herhangi bir özyinelemeli algoritmayı özyinelemeli olmayan bir algoritmaya dönüştürmek mümkündür, ancak çoğu zaman mantık çok daha karmaşıktır ve bunu yapmak bir yığının kullanılmasını gerektirir. Aslında, özyinelemenin kendisi bir yığın kullanır: Fonksiyon yığını.</span></p> - -<p><span lang="tr">Yığın benzeri davranış aşağıdaki örnekte görülebilir:</span></p> - -<pre class="brush: js">function foo(i) { - if (i < 0) - return; - console.log('begin:' + i); - foo(i - 1); - console.log('end:' + i); -} -foo(3); - -// Output: - -// begin:3 -// begin:2 -// begin:1 -// begin:0 -// end:0 -// end:1 -// end:2 -// end:3</pre> - -<h3 id="Nested_functions_and_closures">Nested functions and closures</h3> - -<p>You can nest a function within a function. The nested (inner) function is private to its containing (outer) function. It also forms a <em>closure</em>. A closure is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).</p> - -<p>Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.</p> - -<p>To summarize:</p> - -<ul> - <li>The inner function can be accessed only from statements in the outer function.</li> -</ul> - -<ul> - <li>The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.</li> -</ul> - -<p>The following example shows nested functions:</p> - -<pre class="brush: js">function addSquares(a,b) { - function square(x) { - return x * x; - } - return square(a) + square(b); -} -a = addSquares(2,3); // returns 13 -b = addSquares(3,4); // returns 25 -c = addSquares(4,5); // returns 41 -</pre> - -<p>Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:</p> - -<pre class="brush: js">function outside(x) { - function inside(y) { - return x + y; - } - return inside; -} -fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it -result = fn_inside(5); // returns 8 - -result1 = outside(3)(5); // returns 8 -</pre> - -<h3 id="Preservation_of_variables">Preservation of variables</h3> - -<p>Notice how <code>x</code> is preserved when <code>inside</code> is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to outside. The memory can be freed only when the returned <code>inside</code> is no longer accessible.</p> - -<p>This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.</p> - -<h3 id="Multiply-nested_functions">Multiply-nested functions</h3> - -<p>Functions can be multiply-nested, i.e. a function (A) containing a function (B) containing a function (C). Both functions B and C form closures here, so B can access A and C can access B. In addition, since C can access B which can access A, C can also access A. Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called <em>scope chaining</em>. (Why it is called "chaining" will be explained later.)</p> - -<p>Consider the following example:</p> - -<pre class="brush: js">function A(x) { - function B(y) { - function C(z) { - console.log(x + y + z); - } - C(3); - } - B(2); -} -A(1); // logs 6 (1 + 2 + 3) -</pre> - -<p>In this example, <code>C</code> accesses <code>B</code>'s <code>y</code> and <code>A</code>'s <code>x</code>. This can be done because:</p> - -<ol> - <li><code>B</code> forms a closure including <code>A</code>, i.e. <code>B</code> can access <code>A</code>'s arguments and variables.</li> - <li><code>C</code> forms a closure including <code>B</code>.</li> - <li>Because <code>B</code>'s closure includes <code>A</code>, <code>C</code>'s closure includes <code>A</code>, <code>C</code> can access both <code>B</code> <em>and</em> <code>A</code>'s arguments and variables. In other words, <code>C</code> <em>chains</em> the scopes of <code>B</code> and <code>A</code> in that order.</li> -</ol> - -<p>The reverse, however, is not true. <code>A</code> cannot access <code>C</code>, because <code>A</code> cannot access any argument or variable of <code>B</code>, which <code>C</code> is a variable of. Thus, <code>C</code> remains private to only <code>B</code>.</p> - -<h3 id="Name_conflicts">Name conflicts</h3> - -<p>When two arguments or variables in the scopes of a closure have the same name, there is a <em>name conflict</em>. More inner scopes take precedence, so the inner-most scope takes the highest precedence, while the outer-most scope takes the lowest. This is the scope chain. The first on the chain is the inner-most scope, and the last is the outer-most scope. Consider the following:</p> - -<pre class="brush: js">function outside() { - var x = 10; - function inside(x) { - return x; - } - return inside; -} -result = outside()(20); // returns 20 instead of 10 -</pre> - -<p>The name conflict happens at the statement <code>return x</code> and is between <code>inside</code>'s parameter <code>x</code> and <code>outside</code>'s variable <code>x</code>. The scope chain here is {<code>inside</code>, <code>outside</code>, global object}. Therefore <code>inside</code>'s <code>x</code> takes precedences over <code>outside</code>'s <code>x</code>, and 20 (<code>inside</code>'s <code>x</code>) is returned instead of 10 (<code>outside</code>'s <code>x</code>).</p> - -<h2 id="Closures">Closures</h2> - -<p>Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to). However, the outer function does not have access to the variables and functions defined inside the inner function. This provides a sort of security for the variables of the inner function. Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the outer function itself, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.</p> - -<pre class="brush: js">var pet = function(name) { // The outer function defines a variable called "name" - var getName = function() { - return name; // The inner function has access to the "name" variable of the outer function - } - return getName; // Return the inner function, thereby exposing it to outer scopes -} -myPet = pet("Vivie"); - -myPet(); // Returns "Vivie" -</pre> - -<p>It can be much more complex than the code above. An object containing methods for manipulating the inner variables of the outer function can be returned.</p> - -<pre class="brush: js">var createPet = function(name) { - var sex; - - return { - setName: function(newName) { - name = newName; - }, - - getName: function() { - return name; - }, - - getSex: function() { - return sex; - }, - - setSex: function(newSex) { - if(typeof newSex === "string" && (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")) { - sex = newSex; - } - } - } -} - -var pet = createPet("Vivie"); -pet.getName(); // Vivie - -pet.setName("Oliver"); -pet.setSex("male"); -pet.getSex(); // male -pet.getName(); // Oliver -</pre> - -<p>In the code above, the <code>name</code> variable of the outer function is accessible to the inner functions, and there is no other way to access the inner variables except through the inner functions. The inner variables of the inner functions act as safe stores for the outer arguments and variables. They hold "persistent", yet secure, data for the inner functions to work with. The functions do not even have to be assigned to a variable, or have a name.</p> - -<pre class="brush: js">var getCode = (function(){ - var secureCode = "0]Eal(eh&2"; // A code we do not want outsiders to be able to modify... - - return function () { - return secureCode; - }; -})(); - -getCode(); // Returns the secureCode -</pre> - -<p>There are, however, a number of pitfalls to watch out for when using closures. If an enclosed function defines a variable with the same name as the name of a variable in the outer scope, there is no way to refer to the variable in the outer scope again.</p> - -<pre class="brush: js">var createPet = function(name) { // Outer function defines a variable called "name" - return { - setName: function(name) { // Enclosed function also defines a variable called "name" - name = name; // ??? How do we access the "name" defined by the outer function ??? - } - } -} -</pre> - -<p>The magical <code>this</code> variable is very tricky in closures. They have to be used carefully, as what <code>this</code> refers to depends completely on where the function was called, rather than where it was defined.</p> - -<h2 id="Using_the_arguments_object">Using the arguments object</h2> - -<p>The arguments of a function are maintained in an array-like object. Within a function, you can address the arguments passed to it as follows:</p> - -<pre class="brush: js">arguments[i] -</pre> - -<p>where <code>i</code> is the ordinal number of the argument, starting at zero. So, the first argument passed to a function would be <code>arguments[0]</code>. The total number of arguments is indicated by <code>arguments.length</code>.</p> - -<p>Using the <code>arguments</code> object, you can call a function with more arguments than it is formally declared to accept. This is often useful if you don't know in advance how many arguments will be passed to the function. You can use <code>arguments.length</code> to determine the number of arguments actually passed to the function, and then access each argument using the <code>arguments</code> object.</p> - -<p>For example, consider a function that concatenates several strings. The only formal argument for the function is a string that specifies the characters that separate the items to concatenate. The function is defined as follows:</p> - -<pre class="brush: js">function myConcat(separator) { - var result = ""; // initialize list - var i; - // iterate through arguments - for (i = 1; i < arguments.length; i++) { - result += arguments[i] + separator; - } - return result; -} -</pre> - -<p>You can pass any number of arguments to this function, and it concatenates each argument into a string "list":</p> - -<pre class="brush: js">// returns "red, orange, blue, " -myConcat(", ", "red", "orange", "blue"); - -// returns "elephant; giraffe; lion; cheetah; " -myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); - -// returns "sage. basil. oregano. pepper. parsley. " -myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); -</pre> - -<div class="note"> -<p><strong>Note:</strong> The <code>arguments</code> variable is "array-like", but not an array. It is array-like in that is has a numbered index and a <code>length</code> property. However, it does not possess all of the array-manipulation methods.</p> -</div> - -<p>See the {{jsxref("Function")}} object in the JavaScript reference for more information.</p> - -<h2 id="Function_parameters">Function parameters</h2> - -<p>Starting with ECMAScript 6, there are two new kinds of parameters: default parameters and rest parameters.</p> - -<h3 id="Default_parameters">Default parameters</h3> - -<p>In JavaScript, parameters of functions default to <code>undefined</code>. However, in some situations it might be useful to set a different default value. This is where default parameters can help.</p> - -<p>In the past, the general strategy for setting defaults was to test parameter values in the body of the function and assign a value if they are <code>undefined</code>. If in the following example, no value is provided for <code>b</code> in the call, its value would be <code>undefined</code> when evaluating <code>a*b</code> and the call to <code>multiply</code> would have returned <code>NaN</code>. However, this is caught with the second line in this example:</p> - -<pre class="brush: js">function multiply(a, b) { - b = typeof b !== 'undefined' ? b : 1; - - return a*b; -} - -multiply(5); // 5 -</pre> - -<p>With default parameters, the check in the function body is no longer necessary. Now, you can simply put <code>1</code> as the default value for <code>b</code> in the function head:</p> - -<pre class="brush: js">function multiply(a, b = 1) { - return a*b; -} - -multiply(5); // 5</pre> - -<p>Fore more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> in the reference.</p> - -<h3 id="Rest_parameters">Rest parameters</h3> - -<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameter</a> syntax allows us to represent an indefinite number of arguments as an array. In the example, we use the rest parameters to collect arguments from the second one to the end. We then multiply them by the first one. This example is using an arrow function, which is introduced in the next section.</p> - -<pre class="brush: js">function multiply(multiplier, ...theArgs) { - return theArgs.map(x => multiplier * x); -} - -var arr = multiply(2, 1, 2, 3); -console.log(arr); // [2, 4, 6]</pre> - -<h2 id="Arrow_functions">Arrow functions</h2> - -<p>An <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> (also known as <strong>fat arrow function</strong>) has a shorter syntax compared to function expressions and lexically binds the <code>this</code> value. Arrow functions are always anonymous. See also this hacks.mozilla.org blog post: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>".</p> - -<p>Two factors influenced the introduction of arrow functions: shorter functions and lexical <code>this</code>.</p> - -<h3 id="Shorter_functions">Shorter functions</h3> - -<p>In some functional patterns, shorter functions are welcome. Compare:</p> - -<pre class="brush: js">var a = [ - "Hydrogen", - "Helium", - "Lithium", - "Beryllium" -]; - -var a2 = a.map(function(s){ return s.length }); - -console.log(a2); // logs [ 8, 6, 7, 9 ] - -var a3 = a.map( s => s.length ); - -console.log(a3); // logs [ 8, 6, 7, 9 ] -</pre> - -<h3 id="Lexical_this">Lexical <code>this</code></h3> - -<p>Until arrow functions, every new function defined its own <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.</p> - -<pre class="brush: js">function Person() { - // The Person() constructor defines `this` as itself. - this.age = 0; - - setInterval(function growUp() { - // In nonstrict mode, the growUp() function defines `this` - // as the global object, which is different from the `this` - // defined by the Person() constructor. - this.age++; - }, 1000); -} - -var p = new Person();</pre> - -<p>In ECMAScript 3/5, this issue was fixed by assigning the value in <code>this</code> to a variable that could be closed over.</p> - -<pre class="brush: js">function Person() { - var self = this; // Some choose `that` instead of `self`. - // Choose one and be consistent. - self.age = 0; - - setInterval(function growUp() { - // The callback refers to the `self` variable of which - // the value is the expected object. - self.age++; - }, 1000); -}</pre> - -<p>Alternatively, a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> could be created so that the proper <code>this</code> value would be passed to the <code>growUp()</code> function.</p> - -<p>Arrow functions capture the <code>this</code> value of the enclosing context, so the following code works as expected.</p> - -<pre class="brush: js">function Person(){ - this.age = 0; - - setInterval(() => { - this.age++; // |this| properly refers to the person object - }, 1000); -} - -var p = new Person();</pre> - -<h2 id="Predefined_functions">Predefined functions</h2> - -<p>JavaScript has several top-level, built-in functions:</p> - -<dl> - <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt> - <dd> - <p>The <code><strong>eval()</strong></code> method evaluates JavaScript code represented as a string.</p> - </dd> - <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt> - <dd> - <p>The <code><strong>uneval()</strong></code> method creates a string representation of the source code of an {{jsxref("Object")}}.</p> - </dd> - <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt> - <dd> - <p>The global <code><strong>isFinite()</strong></code> function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.</p> - </dd> - <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt> - <dd> - <p>The <code><strong>isNaN()</strong></code> function determines whether a value is {{jsxref("Global_Objects/NaN", "NaN")}} or not. Note: coercion inside the <code>isNaN</code> function has <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">interesting</a> rules; you may alternatively want to use {{jsxref("Number.isNaN()")}}, as defined in ECMAScript 6, or you can use <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> to determine if the value is Not-A-Number.</p> - </dd> - <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt> - <dd> - <p>The <code><strong>parseFloat()</strong></code> function parses a string argument and returns a floating point number.</p> - </dd> - <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt> - <dd> - <p>The <code><strong>parseInt()</strong></code> function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).</p> - </dd> - <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt> - <dd> - <p>The <code><strong>decodeURI()</strong></code> function decodes a Uniform Resource Identifier (URI) previously created by {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or by a similar routine.</p> - </dd> - <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt> - <dd> - <p>The <code><strong>decodeURIComponent()</strong></code> method decodes a Uniform Resource Identifier (URI) component previously created by {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} or by a similar routine.</p> - </dd> - <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt> - <dd> - <p>The <code><strong>encodeURI()</strong></code> method encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> - </dd> - <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt> - <dd> - <p>The <code><strong>encodeURIComponent()</strong></code> method encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).</p> - </dd> - <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt> - <dd> - <p>The deprecated <code><strong>escape()</strong></code> method computes a new string in which certain characters have been replaced by a hexadecimal escape sequence. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}} or {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} instead.</p> - </dd> - <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt> - <dd> - <p>The deprecated <code><strong>unescape()</strong></code> method computes a new string in which hexadecimal escape sequences are replaced with the character that it represents. The escape sequences might be introduced by a function like {{jsxref("Global_Objects/escape", "escape")}}. Because <code>unescape()</code> is deprecated, use {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} instead.</p> - </dd> -</dl> - -<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> diff --git a/files/tr/web/javascript/guide/grammar_and_types/index.html b/files/tr/web/javascript/guide/grammar_and_types/index.html deleted file mode 100644 index a1619e77aa..0000000000 --- a/files/tr/web/javascript/guide/grammar_and_types/index.html +++ /dev/null @@ -1,640 +0,0 @@ ---- -title: Dil bilgisi ve türler -slug: Web/JavaScript/Guide/Grammar_and_types -tags: - - JavaScript - - Rehber -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> - -<p class="summary">Bu bölümde JavaScript'in temel dil bilgisi, değişken tanımları, veri türleri ve sabitleri üzerine değinilecektir.</p> - -<h2 id="Temeller">Temeller</h2> - -<p>JavaScript çoğu söz dizimini Java'dan almıştır. Awk, Perl and Python'dan da etkilenmiştir.</p> - -<p>JavaScript büyük-küçük harfe duyarlıdır ve <strong>Unicode </strong>karakter setini kullanır.</p> - -<p>JavaScript'te, komutlara {{Glossary("Statement", "statements")}} denir ve noktalı virgül (;) ile ayrılırlar. Boşluklara, tablara ve satırbaşı karakterlerine whitespace denir. JavaScript betiklerinde, kaynak metin soldan sağa taranır ve token, kontrol karakterleri, satır sonlayıcıları, yorumlar ve whitespace gibi girdi elemanları dizisine dönüştürülür. ECMAScript, bazı kelimeleri ve sabitleri tanımlamıştır ayrıca noktalı virgül (;) karakterinin komut sonlarına otomatik olarak eklenmesi için kurallar belirlemiştir. Ancak kodda herhangi bir yan etki oluşturmaması için komut sonlarına her zaman noktalı virgül konması önerilir. Daha fazla bilgi için JavaScript'in <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">sözcük dil bilgisi</a> hakkındaki başvurusuna bakınız.</p> - -<h2 id="Yorumlar">Yorumlar</h2> - -<p>Yorumların söz dizimi C++ ve çoğu diğer dillerde olduğu şekilde aynıdır:</p> - -<pre class="brush: js">// Tek satırlık yorum. - -/* * - * Bu ise daha uzun, - * çok satırlı yorum. - */ - -/* Ancak /* iç içe yorum */ konulması söz dizimi hatasına yol açar<code> */</code></pre> - -<h2 id="Bildirimler">Bildirimler</h2> - -<p>JavaScript'te üç çeşit bildirim vardır:</p> - -<p>{{jsxref("Statements/var", "var")}}</p> - -<dl> - <dd>Bir değişkeni tanımlar, isteğe bağlı olarak değer ataması yapılır.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> - <dd>Etki alanı kod bloğudur, yerel değişken tanımlar, isteğe bağlı olarak değer ataması yapar.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> - <dd>Salt okunur değişken tanımlar.</dd> -</dl> - -<h3 id="Değişkenler">Değişkenler</h3> - -<p>Uygulamalarınızda, verilerin sembolik birer gösterimi olarak değişkenleri kullanırsınız. Değişkenlerin isimine {{Glossary("Identifier", "identifiers")}} denir ve kesin kurallar çerçevesinde oluşturulurlar.</p> - -<p>JavaScript'te değişken adı; bir harfle, alt tire (_) ile veya dolar işareti ($) ile başlamalıdır; ardından rakamlar gelebilir (0-9). JavaScript'in büyük-küçük harfe duyarlı olmasından dolayı, harfler büyük harf (A'dan Z'ye) ve küçük harf (a'dan z'ye) içerebilirler. </p> - -<p>Değişken adları için å ve ü gibi Unicode harfleri bulunan ISO 8859-1 standardındaki karakter setini kullanabilirsiniz. Ayrıca değişkenlerdeki karakterler olarak, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode kaçış karakterlerini</a> kullanabilirsiniz.</p> - -<p>Bir kaç uygun örnek: <code>Popüler_şarkılar, jamesBond007, _isim</code>.</p> - -<h3 id="Değişken_tanımlama">Değişken tanımlama</h3> - -<p>Bir değişkeni üç yolla tanımlayabilirsiniz:</p> - -<ul> - <li>{{jsxref("Statements/var", "var")}} kelimesi ile. Örneğin, <code>var x = 42</code>. Bu söz dizimi hem yerel hem global değişkenler bildirebilir.</li> - <li>Sadece değer vererek. Mesela, <code>x = 42</code>. Bu şekilde daima global bir değişken tanımlanır. Tanımlandığı zaman JavaScript uyarı verir. Bu yüzden böyle bir tanımlama yapmamalısınız.</li> - <li>{{jsxref("Statements/let", "let")}} kelimesi ile. Örneğin, <code>let y = 13</code>. Bu şekilde blok seviyesinde yerel değişken tanımlanmış olur. Yani y=13 değerinin etki alanı içinde bulunduğu kod bloğu (statement) 'dur. Daha fazlası için aşağıdaki <a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Değişkenin_etki_alanı">Değişkenin etki alanı</a> kısmına bakabilirsiniz. </li> -</ul> - -<h3 id="Değişkenlerin_değerlendirilmesi">Değişkenlerin değerlendirilmesi</h3> - -<p><code>var</code> veya <code>let</code> komutuyla başlangıç değer ataması yapmadan tanımlanan değişkenler, {{jsxref("undefined")}} değerine sahiptirler.</p> - -<p>Değer ataması yapılmayan bir değişkene erişilmeye çalışıldığında {{jsxref("ReferenceError")}} hatası alınır:</p> - -<pre><code>var a; -console.log("a'nın değeri " + a); // a'nın değeri undefined - -var b; -console.log("b'nın değeri " + b); // b'nin değeri undefined - -console.log("c'nin değeri " + c); // </code> -Yakalanmamış Referans Hatası<code>: c değeri tanımlanamadı - -let x; -console.log("x'in değeri " + x); // x'in değeri undefined - -console.log("y'in değeri " + y); // </code> -Yakalanmamış Referans Hatası<code>: y değeri tanımlanamadı -let y;</code></pre> - -<p><code>undefined</code>'ı, bir değişkenin herhangi bir değere sahip olup olmadığını kontrol etmek için kullanabilirsiniz. Aşağıdaki kod parçasında girdi değişkenine değer atanmamıştır ve <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else" title="en-US/docs/JavaScript/Reference/Statements/if...else">if</a> </code>ifadesi doğru olarak değerlendirileceği için bunuYap(); metodu çalıştırılmış olur. </p> - -<pre class="brush: js">var girdi; -if(girdi === undefined){ - bunuYap(); -} else { - sunuYap(); -} -</pre> - -<p>Eğer <code>undefined</code> değeri boolean bir kontrol deyiminde (<code>if, while</code> vb.) kullanılırsa yanlış <code>(false) </code>çıktı verecek şekilde davranır . Örneğin, aşağıdaki kodda <code>benimDizim </code>değişkeni tanımsız olduğu için <code>yap() </code>fonksiyonu çalıştırılır:</p> - -<pre class="brush: js">var benimD<code>izim</code> = []; -if (!benimD<code>izim</code>[0]) yap(); -</pre> - -<p>Eğer <code>undefined</code> değeri sayısal bir içerikte kullanıldığında <code>NaN</code> (sayı değil) değerini alır.</p> - -<pre class="brush: js">var a; -a + 2; // NaN sonucunu verir</pre> - -<p>{{jsxref("null")}} değişkeni sayısal bir içerikte kullanıldığında 0, boolean bir içerikte kullanıldığında ise <code>false</code> gibi davranır. Örneğin:</p> - -<pre class="brush: js">var n = null; -console.log(n * 32); // ekrana 0 yazdırır -</pre> - -<h3 id="Değişkenin_etki_alanı">Değişkenin etki alanı</h3> - -<p>Herhangi bir fonksiyon etki alanının dışında bir değişken tanımladığınız zaman, <em>global</em> değişken tanımlamış olursunuz. Bu sayede JavaScript dokümanı içerisinde herhangi bir kod parçası bu değişkene erişilebilir. Bir fonksiyon etki alanı içerisinde değişken tanımladığınızda <em>local (yerel) </em> değişken tanımlamış olursunuz. Bu sayede değişkene sadece o fonksiyon içerisinden erişilebilir.</p> - -<p>ECMAScript 6'dan önceki JavaScript'te, <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement" title="en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">blok seviyesinde</a> etki alanı yoktur; bilâkis, blok içerisinde tanımlanan değişken, o bloğun bulunduğu fonksiyonda (veya global etki alanında) yerel olarak tanımlanmış olur. Örneğin aşağıdaki kod ekrana 5 değerini yazdırır. Çünkü x'in etki alanı, if bloğu içerisinde değil, x'in tanımlandığı fonksiyonda (veya globalde) yer almaktadır.</p> - -<pre class="brush: js">if (true) { - var x = 5; -} -console.log(x); // 5 -</pre> - -<p>ECMAScript 2015'te belirlenen <code>let </code>ifadesi ile kullanılırsa, çıktı değişkenlik gösterebilir. Çünkü let ifadesi global alanı değil if bloğunun alanını etki alanı olarak ele alır ve y değişkeni, JavaScript tarafından tanımsız olarak değerlendirileceği için hata döndürür:</p> - -<pre class="brush: js">if (true) { - let y = 5; -} -console.log(y); // Uncaught ReferenceError: y is not defined -</pre> - -<h3 id="Değişkeni_yukarı_alma_hoisting">Değişkeni yukarı alma (hoisting)</h3> - -<p>JavaScript'teki değişkenler hakkında bir sıradışı olay ise, tanımladığınız bir değişkene daha önceki satırda hata almadan erişebiliyor olmanızdır. Bu kavram <strong>hoisting (yukarı alma) </strong>olarak bilinir; JavaScript'te tanımlanan değişkenler bir anlamda fonksiyon veya ifadenin üzerine alınmış (hoisted) olarak ele alınır. Yukarı alınan değişkenler atandıkları değer yerine <code>undefined </code>değerini alırlar. Hatta bu değişkeni kullandıktan sonra tekrar tanımlarsanız, yine undefined sonucunu alırsınız.</p> - -<pre class="brush: js">/** - * Örnek 1 - */ -console.log(x === undefined); // "true" yazar -var x = 3; - -/** - * Örnek 2 - */ -// undefined değeri alacak -var degiskenim = "değerim"; - -(function() { - console.log(degiskenim); // undefined - var degiskenim = "yerel değerim"; -})(); -</pre> - -<p>Üstteki örnekler bilgisayar tarafından aşağıdaki şekilde yorumlanır:</p> - -<pre class="brush: js">/** - * Örnek 1 - */ -var x; -console.log(x === undefined); // "true" yazar -x = 3; - -/** - * Örnek 2 - */ -var degiskenim = "değerim"; - -(function() { - var degiskenim; - console.log(degiskenim); // undefined yazar - degiskenim = "yerel değerim"; -})(); -</pre> - -<p>Yukarı alma ile ilgili sorunların yaşanmaması için, fonksiyon içerisinde yer alan bütün değişken tanımları olabildiğince en üste taşınmalıdır. Değişken tanımlamanın en iyi yöntemi de zaten budur. Bu sayede kodun okunabilirliği artmış olur. </p> - -<p>ECMAScript 2015'te, <code>let</code> veya <code>const</code> ifadesi ile tanımlanan değişken, üste alınmaz. Değişken tanımından önce o değişkenin kullanılmaya çalışılırsa {{jsxref("ReferenceError")}} hatası ile sonuçlanır. Değişken, bloğun başlangıcından itibaren tanımının yapıldığı yere kadar ölü bölgededir.</p> - -<h3 id="Fonksiyonu_yukarı_alma">Fonksiyonu yukarı alma</h3> - -<p>Fonksiyonlarda, yalnızca fonksiyon tanımı yukarı alınır. Fonksiyon ifadesine erişilmeye çalışıldığında ise hata oluşur.</p> - -<pre class="brush: js">/* fonksiyon tanımlama */ - -foo(); // "bar" - -function foo() { - console.log('bar'); -} - - -/* fonksiyon ifadesi */ - -baz(); // TypeError: baz is not a function - -var baz = function() { - console.log('bar2'); -}; -</pre> - -<h3 id="Global_değişkenler">Global değişkenler</h3> - -<p>Global değişkenler aslında temel bir <em>global nesne</em>nin özellikleridirler. Web sayfalarında bulunan global nesnenin adı {{domxref("window")}} 'dur. Böylece global değişkenlere, <code>window.<em>variable</em></code> söz dizimi kullanılarak erişilebilir.</p> - -<p>Sonuç olarak, herhangi bir window veya iframe'deki global değişkenlere, diğer window veya iframe üzerinden değişkenin ismi kullanılarak erişilebilir. Örneğin, eğer bir dokümanda <code>telefonNumarası</code> isminde bir değişken tanımlanmışsa, bu değişkene iframe içerisinden <code>parent.telefonNumarası</code> şeklinde erişebilirsiniz.</p> - -<h3 id="Sabitler">Sabitler</h3> - -<p>{{jsxref("Statements/const", "const")}} anahtar kelimesi ile sabit bir değişken oluşturabilirsiniz. Sabit değerler için söz dizimi, değişken değerleri ile aynıdır: bir harf, alt çizgi veya dolar işareti ile başlamalıdırlar, devamında ise alfabetik, sayısal veya alt çizgi gibi karakterler gelebilir.</p> - -<pre><code>const PI = 3.14;</code></pre> - -<p>JavaScript kodu çalışırken bir sabitin değeri, atama yapılarak değiştirilemez ve sabit tekrar tanımlanamaz. Ayrıca sabitlere başlangıçta tanımlanırken bir değer atanması zorunludur.</p> - -<p>Sabitlerin etki alanı <code>let </code>bloğunun etki alanındaki değişkenler ile aynıdır. Eğer <code>const </code>ifadesi çıkarılırsa, ifade artık değişken haline gelir.</p> - -<p>Bir etki alanında, halihazırda bir fonksiyon veya değişken varsa, aynı isimli sabit tanımlamak hataya yol açar. Örneğin:</p> - -<pre class="example-bad brush: js">// BU HATAYA NEDEN OLUR -function f() {}; -const f = 5; - -// BU DA HATAYA NEDEN OLUR -function f() { - const g = 5; - var g; -} -</pre> - -<p>Sabit bir nesneye atanan özellikler diğer fonksiyonların kullanımına karşı korunmamışlardır ve nesnenin kendisi sabit olmasına rağmen değişken değerler alabilirler. Bu sebeple aşağıdaki ifade sorunsuz bir şekilde çalışır.</p> - -<pre><code>const BENIM_NESNEM = {"anahtar": "değer"}; -BENIM_NESNEM.anahtar = "diğerDeğer";</code></pre> - -<h2 id="Veri_yapıları_ve_tipleri">Veri yapıları ve tipleri</h2> - -<h3 id="Veri_tipleri">Veri tipleri</h3> - -<p>Son yayınlanan ECMAScript standardı ile yedi veri tipi tanımlanabilir:</p> - -<ul> - <li>Altı adet veri türü {{Glossary("Primitive", "primitives")}}'dir: - <ul> - <li>{{Glossary("Boolean")}}. <code>true</code> ve <code>false</code>.</li> - <li>{{Glossary("null")}}. <code>null</code> değeri belirten özel anahtar kelime. JavaScript büyük-küçük karaktere duyarlı olduğu için, <code>null</code> ifadesi <code>Null</code>, <code>NULL</code>, veya diğer değişkenler ile aynı değildir.</li> - <li>{{Glossary("undefined")}}. Değeri tanımsız olan özellikler için <code>undefined</code>'tır.</li> - <li>{{Glossary("Number")}}. <code>42</code> ya da <code>3.14159</code>.</li> - <li>{{Glossary("String")}}. "Zafer"</li> - <li>{{Glossary("Symbol")}} (ECMAScript 6 ile yeni geldi). Özellikleri eşsiz (unique) ve değiştirilemez (immutable) olan nesnelerdir.</li> - </ul> - </li> - <li>ve {{Glossary("Object")}} veri türü</li> -</ul> - -<p>Veri tipleri nispeten az miktarda olmalarına rağmen, uygulamalarınızla yararlı işlevler oluşturmanıza olanak sağlarlar. {{jsxref("Object", "Objects")}} (nesneler) ve {{jsxref("Function", "functions")}} (fonksiyonlar) dilin diğer temel elemanlarıdırlar. Nesneleri, değerleriniz için isimlendirilmiş kutular, fonksiyonları (functions) ise uygulamanızın gerçekleştirebileceği işlevler olarak düşünebilirsiniz.</p> - -<h3 id="Veri_tipi_dönüşümü">Veri tipi dönüşümü</h3> - -<p>JavaScript dinamik tipli bir dildir. Bunun anlamı, bir değişken tanımlarken, veri tipini belirtme zorunluluğunuzun olmaması ve değişkenin veri tipinin çalışma esnasında ihtiyaç olunan tipe otomatik olarak dönüştürülmesidir. Örneğin sayısal bir değişken tanımlayabilirsiniz:</p> - -<pre class="brush: js">var yanit = 42; -</pre> - -<p>Ve sonra, aynı değişkene string bir değer atayabilirsiniz:</p> - -<pre class="brush: js">yanit = "Hoşçakal, balık için teşekkürler..."; -</pre> - -<p>JavaScript dinamik tipli olduğu için, bu atama bir hata vermez.</p> - -<p>Bir string ve sayının toplama işlemine konulması ile JavaScript otomatik olarak sayısal değeri string ifadeye çevirir ve eklenecek string ile birleştirir. Örneğin aşağıdaki ifadelere bakalım:</p> - -<pre class="brush: js">x = "Cevap " + 42 // "Cevap 42" -y = 42 + " cevaptır." // "42 cevaptır." -</pre> - -<p>Toplama işlemi dışındaki diğer işlemlerde JavaScript otomatik olarak tür dönüşümü yapmaz. Örneğin:</p> - -<pre class="brush: js">"37" - 7 // 30 -"37" + 7 // "377" -</pre> - -<h3 id="String_ifadelerin_sayısal_değerlere_dönüştürülmesi">String ifadelerin sayısal değerlere dönüştürülmesi</h3> - -<p>Bellekte sayısal bir ifadeyi temsil eden bir string'in olduğu durumlarda tip dönüşümü yapmak için aşağıdaki metodları kullanabilirsiniz: </p> - -<ul> - <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> - <li>{{jsxref("parseFloat", "parseFloat()")}}</li> -</ul> - -<p><code>parseInt</code> fonksiyonu sadece tam sayı döndürür, bu yüzden ondalık sayılarla kullanıldığında ondalık kısmını atar. Buna ek olarak parseInt'in en uygun kullanımlarından biri de sayının hangi tabanda (2'lik, 10'luk, 16'lık vb.) yazılabileceğini parametre olarak fonksiyona verebilmenizdir. Taban parametresi hangi sayısal sistemin kullanılacağının belirlenmesini sağlar.</p> - -<p>String ifadelerin, sayısal ifadelere dönüştürülmesinin diğer bir yolu da, string ifadenin başına + operatörünün eklenmesidir:</p> - -<pre class="brush: js">"1.1" + "1.1" = "1.11.1" -(+"1.1") + (+"1.1") = 2.2 -// Not: parantezler gösterim kolaylığı için konulmuştur, zorunlu değildir.</pre> - -<h2 id="Değişken_değerleri">Değişken değerleri</h2> - -<p>JavaScript'te değişkenlerin temsil edilmesi için değerler kullanırsınız. Bunlar, kodunuzda değişkenlere <code>=</code> operatöründen sonra atadığınız değerlerdir. Bu kısımda aşağıdaki değer tiplerini inceleyeceğiz:</p> - -<ul> - <li>{{anch("Dizi değerleri")}}</li> - <li>{{anch("Boolean değerleri")}}</li> - <li>{{anch("Ondalıklı-sayı değerleri")}}</li> - <li>{{anch("Tam sayılar")}}</li> - <li>{{anch("Nesne değerleri")}}</li> - <li>{{anch("String değerleri")}}</li> -</ul> - -<h3 id="Dizi_değerleri">Dizi değerleri</h3> - -<p>Bir dizi değeri 0 veya daha fazla ifadeden oluşan liste biçimindedir, liste başında ve sonunda listeyi açıp/kapatan köşeli parantezler [ ] bulunur. Bir dizi oluşturup bu diziye değerler atadığınızda, belirlediğiniz değerleri kendi elemanı olarak barındıran bir dizi üretilir ve dizinin uzunluğu belirlediğiniz değer sayısı kadardır.</p> - -<p>Aşağıdaki örnekte, 3 elemanı barındıran ve bu nedenle 3 uzunluğunda olan <code style="font-style: normal; font-weight: normal;">kahveler</code> isimli bir dizi oluşturulmaktadır:</p> - -<pre class="brush: js">var kahveler = ["Türk kahvesi", "Espresso", "Mocha"]; -</pre> - -<div class="note"> -<p><strong>Not :</strong> Bir dizi değeri, bir nesne başlatıcısı türündedir. Dahası için bkz: <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Nesne başlatıcılarının kullanımı</a>.</p> -</div> - -<p>Eğer bir dizi, üst-seviye betikte sabit değer kullanarak oluşturulmuşsa JavaScript, bu diziyi içeren her ifadeyi çalıştırdığında diziyi yorumlar. Buna ek olarak, fonksiyon içerisinde tanımlanan diziler, her fonksiyon çağrımında yeni bir dizi olarak bellekte oluşturulur.</p> - -<p>Dizi değerleri ayrıca <code>Array</code> nesneleridirler. Detaylı bilgi için {{jsxref("Array")}} ve <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Index'li koleksiyonlar</a> kısmına bakınız.</p> - -<h4 id="Dizi_değerleri_arasında_bulunan_fazladan_virgül">Dizi değerleri arasında bulunan fazladan virgül</h4> - -<p>Dizi tanımlarken her değeri belirlemek zorunda değilsiniz. Eğer iki tane virgülü art arda koyarak dizi oluşturursanız, virgüller arasında kalan tanımlanmayan her değer için <code>undefined</code> değeri üretilir. Aşağıdaki örnekte bir <code>balık</code> dizisi oluşturulmaktadır:</p> - -<pre class="brush: js">var balik = ["Japon", , "Melek"]; -</pre> - -<p>Bu dizi değerlere sahip 2 elemana ve bir tane boş elemana sahiptir (<code>balik</code><code>[0]</code> = "Japon", <code>balik[1]</code> = <code>undefined</code>, ve <code>balik[2]</code> = "Melek").</p> - -<p>Eğer dizideki elemanların sonuna virgül koyarsanız virgül, JavaScript tarafından görmezden gelinir. Aşağıdaki örnekte bulunan dizinin uzunluğu üçtür. <code>dizi[3]'</code>ü ifade eden herhangi bir eleman bulunmamaktadır. Listedeki diğer virgüller, undefined değerine sahip yeni bir elemanı ifade eder. </p> - -<div class="note"> -<p><strong>Not :</strong> Sona konan virgüller, eski versiyonlu tarayıcılarda hatalara neden olur. Yapılacak en doğru şey, dizi sonlarında kullanılan virgüllerin kaldırılmasıdır.</p> -</div> - -<pre class="brush: js">var dizi = ['ev', , 'okul', ]; -</pre> - -<p>Aşağıdaki örnekte oluşturulan dizinin uzunluğu, <code>dizi[0]</code> ve <code>dizi[2] </code>değerleri tanımlanmadığı halde 4'tür.</p> - -<pre class="brush: js">var dizi = [ , 'ev', , 'okul']; -</pre> - -<p>Aşağıdaki bir diğer örnekte, dizinin uzunluğu, <code>dizi[1]</code> ve <code>dizi[3]</code> değerleri tanımlanmadığı halde yine 4'tür. Sadece son virgül görmezden gelinir.</p> - -<pre class="brush: js">var dizi = ['ev', , 'okul', , ]; -</pre> - -<p>Ekstra virgüllerin davranışlarının kavranılması, JavaScript dilinin öğrenilmesi için çok önemlidir, ancak kendi kodunuzu yazarken tanımsız elemanları <code>undefined</code> olarak dizi içerisinde belirlemeniz, kodunuzun okunabilirliğini ve bakım yapılabilirliğini önemli ölçüde arttıracaktır.</p> - -<h3 id="Boolean_değerleri">Boolean değerleri</h3> - -<p>Boolean tipinde iki çeşit değer bulunur: <code>true</code> (doğru) ve <code>false</code> (yanlış).</p> - -<p>İlkel Boolean değerleri olan <code>true</code> ve <code>false</code> ile <em>Boolean</em> nesnesi olan true ve false değerlerini karıştırmayınız. Boolean nesnesi, ilkel olan Boolean veri tipinin alınması ve üzerine bazı ek özellikler getirilmesi ile oluşturulmuştur. Daha fazlası için bkz: {{jsxref("Boolean")}}.</p> - -<h3 id="Tam_sayılar">Tam sayılar</h3> - -<p>Tam sayılar; ikilik (binary) (2 tabanında), sekizlik (octal) (8 tabanında), onluk (decimal) (10 tabanında), ve onaltılık (hexadecimal) (16 tabanında) temsil edilebilirler.</p> - -<ul> - <li>Başında 0b (veya 0B) yer alan tam sayı ifadeleri ikiliktirler. İkilik tam sayılar sadece 0 ve 1 rakamlardan oluşurlar.</li> - <li>Başında 0 (sıfır) yer alan tam sayı ifadeleri sekizliktirler. Sekizlik tamsayılar sadece 0-7 arasındaki rakamlardan oluşurlar.</li> - <li>Onluk tam sayı değeri, 0 (sıfır) ile başlamayan rakamlardan oluşurlar.</li> - <li>Başında 0x (veya 0X) yer alan tam sayı ifadeleri onaltılıktırlar. Onaltılık tamsayılar, 0-9 arasındaki rakamları içerebildiği gibi aynı zamanda a-f veya A-F arasındaki harfleri de barındırabilirler.</li> -</ul> - -<p>Bazı örnek tamsayılar:</p> - -<pre class="eval">0, 117 and -345 (onluk, 10 tabanında) -015, 0001 and -077 (sekizlik, 8 tabanında) -0x1123, 0x00111 and -0xF1A7 (onaltılık, "hex" veya 16 tabanında) -0b11, 0b0011 and -0b11 (ikilik, 2 tabanında) -</pre> - -<p>Daha fazlası için bkz: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Sayısal değerler ve sözsel gramer başvurusu</a>.</p> - -<h3 id="Ondalıklı_değerler">Ondalıklı değerler</h3> - -<p>Bir ondalıklı değer aşağıdaki kısımları içerebilir:</p> - -<ul> - <li>İşaretli olabilen bir onluk sayı ("<code>+</code>" veya "<code>-</code>" ile başlayabilir),</li> - <li>Bir nokta ("<code>.</code>"),</li> - <li>Ondalık (noktadan sonra diğer onluk sayı),</li> - <li>Bir katsayı.</li> -</ul> - -<p>Katsayı kısmı bir "e" veya "E" karakteridir ve devamında işaretli olabilen bir tamsayı gelir. Ondalıklı değerin tanımlanabilmesi için en az bir rakam ve devamında ondalıklı sayı ve katsayı "e" (veya "E") içermelidir.</p> - -<p>Özetle söz dizimi aşağıdaki şekildedir:</p> - -<pre class="eval">[(+|-)][rakamlar][.rakamlar][(E|e)[(+|-)]rakamlar] -</pre> - -<p>Örneğin:</p> - -<pre class="eval">3.1415926 --.123456789 --3.1E+12 -.1e-23 -</pre> - -<h3 id="Nesne_değerleri">Nesne değerleri</h3> - -<p>Bir nesne değeri, süslü parantezlerle <code>{}</code> çevrili sıfır veya daha fazla özellik ismi ve bu özellikler ile ilişkili değerleri içeren bir listeden oluşur. Bir kod satırının başlangıcında değişken ismi olmadan sadece süslü parantezler ile başlayarak bir nesne <u>oluşturmamanız</u> gerekmektedir. Eğer oluşturursanız, JavaScript nesne başlangıcındaki <code>{</code> karakterini, bir kod bloğuna başlangıç yapılıyormuş gibi yorumlar ve bunun sonucunda ya bir hata mesajı alırsınız, ya da yazdığınız kod beklediğiniz şekilde çalışmaz.</p> - -<p>Aşağıda, nesne değerini içeren bir örnek bulunmaktadır. <code>otoGaleri</code> nesnesinin ilk elemanı, "<code>Fiat</code>" değerini barındıran <code>arabam</code> isminde bir özelliği tanımlamaktadır; ikinci elemanı <code>arabaAl</code> özelliğidir ve <code>function</code> <code>(arabaTipleri("Honda"))</code> fonksiyonu çalıştırıldıktan hemen sonra fonksiyonun sonucunu içerir; üçüncü eleman <code>sporArabaAl</code> özelliğidir, halihazırda varolan <code>hayalimdekiAraba</code> değişkenini kullanır.</p> - -<pre class="brush: js">var hayalimdekiAraba = "Bugatti"; - -function arabaTipleri(markaAdı) { - if (markaAdı == "Wolksvagen") { - return markaAdı; - } else { - return "Üzgünüz, malesef " + markaAdı + " marka araba elimizde bulunmamaktadır."; - } -} - -var otoGaleri = { - arabam: "Fiat", - arabaAl: arabaTipleri("Wolksvagen"), - sporArabaAl: arabaTipleri(hayalimdekiAraba) -}; - -console.log(otoGaleri.arabam); // Fiat -console.log(otoGaleri.arabaAl); // Wolksvagen -console.log(otoGaleri.sporArabaAl); // Üzgünüz, malesef Bugatti marka araba elimizde bulunmamaktadır. -</pre> - -<p>Ek olarak, sayısal veya string bir değer, özellik adı veya iç içe olan diğer bir nesnenin adı yerine kullanabilir. Aşağıdaki örnekte bu seçenekleri görebiliriz:</p> - -<pre class="brush: js">var otoGaleri = { - arabalar: {s: "Saab", "j": "Jeep"}, - 7: "Mazda" -}; - -console.log(otoGaleri.arabalar.j); // Jeep -console.log(otoGaleri[7]); // Mazda -</pre> - -<p>Nesne özelik adları boş bir string de dahil olmak üzere herhangi bir string ifade olabilirler. Eğer özellik adı geçerli bir JavaScript {{Glossary("Identifier","identifier")}} değilse, tırnak içinde yazılması gereklidir. Buna ek olarak geçersiz olan özellik adlarına, nokta (<code>.</code>) ile erişim yapılamaz, bunun yerine dizi tarzında köşeli parantezler(<code>[]</code>) kullanılır:</p> - -<pre class="brush: js">var geçersizÖzellikAdlarıÖrnek = { - "": "Boş bir string", - "!": "Ateş!" -} -console.log(geçersizÖzellikAdlarıÖrnek.""); // SyntaxError: Unexpected string -console.log(geçersizÖzellikAdlarıÖrnek[""]); // Boş bir string -console.log(geçersizÖzellikAdlarıÖrnek.!); // SyntaxError: Unexpected token ! -console.log(geçersizÖzellikAdlarıÖrnek["!"]); // Ateş!</pre> - -<p>Diğer örnekler:</p> - -<pre class="brush: js">var nesne = {a: "armut", 2: "iki"}; -console.log(nesne.a); // armut -console.log(nesne[2]); // iki -//console.log(nesne.2); // Error: missing ) after argument list -//console.log(nesne[a]); // Error: a is not defined -console.log(nesne["a"]); // armut -console.log(nesne["2"]); // iki -</pre> - -<h3 id="Düzenli_İfade_RegExp_değerleri">Düzenli İfade (RegExp) değerleri</h3> - -<p>Bir düzenli ifade değeri bölü (<code>/</code>) karakterleri arasında ifade edilir. Aşağıda, örnek bir düzenli ifade bulunmaktadır:</p> - -<pre><code>var re = /ab+c/;</code></pre> - -<h3 id="String_değerleri">String değerleri</h3> - -<p>Bir string değer çift tırnak (") veya tek tırnak (') arasında bulunan sıfır veya daha fazla karakterlerin yer almasıyla oluşur. Bir string değer aynı tip tırnak ile sonlanmalıdır; bu nedenle karakterleri kapsayan tırnaklar ya çift tırnak ya da tek tırnak ikililerinden oluşmalıdır. Aşağıdaki örnekte string değerler ifade edilmiştir:</p> - -<pre class="eval">"elma" -'armut' -"1234" -"bir satır \n diğer satır" -"Zafer'in kedisi" -</pre> - -<p><em>String</em> nesnesinin herhangi bir fonksiyonuna, string değerin sonuna nokta koyarak erişebilir ve çalıştırabilirsiniz—JavaScript otomatik olarak string değeri geçici bir <em>String</em> nesnesine dönüştürür, metodu çağırır, ve sonra oluşan geçici String nesnesini hafızadan siler. Ayrıca <code>String.length</code> özelliğini de string değerinin sonuna <code>.length</code> ekleyerek kullanablirsiniz:</p> - -<pre class="brush: js">console.log("Zafer'in kedisi".length); -// Boşluk da dahil olmak üzere, string içerisindeki tüm sembollerin sayısını ekrana yazar. -// Ekrana yazılan değer: 15 -</pre> - -<p><code>String</code> nesnesine hususi olarak ihtiyaç duymadığınız durumlarda, string değerleri kullanmanız gerekir. <code>String</code> nesneler için bkz: {{jsxref("String")}}.</p> - -<h4 id="Özel_karakterlerin_string_değerlerde_kullanımı">Özel karakterlerin string değerlerde kullanımı</h4> - -<p>String değerler oluştururken, her zamanki kullandığınız karakterlere ek olarak aşağıdaki şekilde özel karakterler de kullanabilirsiniz:</p> - -<pre class="brush: js">"bir satır \n diğer satır" -</pre> - -<p>Aşağıdaki tabloda, JavaScript string değerleri içerisinde kullanabileceğiniz özel karakterler listelenmiştir: </p> - -<table class="standard-table"> - <caption>Tablo: JavaScript özel karakterleri</caption> - <thead> - <tr> - <th scope="col">Karakter</th> - <th scope="col">Anlamı</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td>Boş değer</td> - </tr> - <tr> - <td><code>\b</code></td> - <td>Geri silme</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Form beslemesi</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Yeni satır</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Enter karakteri</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Tab</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Dikey tab</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>Kesme işareti veya tek tırnak</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>Çift tırnak</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>Ters bölü (<code>\</code>) karakteri</td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td>3 adet sekizlik rakamı barındırabilen, ve 0-377 arasındaki XXX değerlerinin Latin-1 kodlaması ile oluşturulduğu karakterdir. Örneğin, sekizlik \251 değeri telif hakkı sembolünü (<strong>©)</strong> ifade eder.</td> - </tr> - <tr> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td> - <p>2 adet onaltılık karakteri barındırabilen ve 00-FF arasındaki XX değerlerinin Latin-1 kodlaması ile oluşturduğu karakterdir. Örneğin, onaltılık \xA9 değeri telif hakkı sembolünü (<strong>©)</strong> ifade eder.</p> - </td> - </tr> - <tr> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td> - <p>4 adet onaltılık karakteri barındırabilen XXXX değerleri ile belirlenen Unicode karakteridir. Örneğin \u00A9 karakteri, Unicode olarak telif hakkı sembolünü (<strong>©)</strong> ifade eder. Bkz: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode kaçış karakterleri</a>.</p> - </td> - </tr> - <tr> - <td>\u<em>{XXXXX}</em></td> - <td>Unicode kod noktası kaçış karakterlerini ifade eder. Örneğin, \u{2F804} karakteri, \uD87E\uDC04 ile aynı sembolü ifade eder.</td> - </tr> - </tbody> -</table> - -<h4 id="Kaçış_karakterleri">Kaçış karakterleri</h4> - -<p><span style='color: #3b3c40; font-family: "Open Sans",Arial,sans-serif; font-size: 14px;'>Üstteki tabloda yer almayan karakterlerin başına ters bölü işaretinin konulduğunda, ters bölü işareti göz ardı edilir, fakat bu tarz kullanım artık rafa kaldırılmıştır ve kullanımından kaçınılması gerekir. </span></p> - -<p>Bir string değer içerisinde tırnak işaretini kullanabilmeniz için, karakterin başına ters bölü işareti eklemeniz gerekir. Bu kullanıma <strong>tırnaktan kaçış</strong> (<em>escaping</em> the quotation mark) denir. Örneğin:</p> - -<pre class="brush: js">var alıntı = "Sebahattin Ali'nin \"Kürk Mantolu Madonna\" adlı kitabını okudu."; -console.log(alıntı); -</pre> - -<p>Ekran çıktısı aşağıdaki gibi olacaktır:</p> - -<pre class="eval">Sebahattin Ali'nin "Kürk Mantolu Madonna" adlı kitabını okudu. -</pre> - -<p>String değer içerisinde ters bölü işaretini kullanabilmeniz için, tekrar bir ters bölü karakteri daha eklemeniz gerekir. Örneğin <code>c:\temp</code> isimli dosya yolunu, bir string olarak aşağıdaki şekilde ifade edebiliriz:</p> - -<pre class="brush: js">var geçiciDosyalarDizini = "c:\\temp"; -</pre> - -<p>Uzun string değerleri satır satır yazmak için tırnak artı tırnak (<code>" + "</code>) işaretleri ile eklemek yerine satır sonuna sadece ters bölü işareti ekleyebilirsiniz. Ters bölü ve satır sonu karakterleri, string değerinden çıkarılmış olarak tek satır halinde döndürülür.</p> - -<pre class="brush: js">var metin = "Bu metin \ -birçok \ -satıra ayrılarak \ -oluşturulmuştur." -console.log(metin); // Ekran çıktısı: Bu metin birçok satıra ayrılarak oluşturulmuştur. -</pre> - -<p>JavaScript'in paragrafları tanımlamak için bir söz dizimi bulunmamasına rağmen, her satır sonuna <code>\n\</code> karakterleri ekleyerek paragraf oluşturabilirsiniz:</p> - -<pre class="brush: js">var şiir = -"Sana gitme demeyeceğim \n\ -Ama gitme Lavinia \n\ -Adını gizleyeceğim \n\ -Sen de bilme Lavinia."; -</pre> - -<h2 id="Daha_fazlası">Daha fazlası</h2> - -<p>Bu bölümde, tanımlamalar ve türler için temel söz dizimleri konuları üzerinde durulmuştur. JavaScript'in dil oluşturucularıyla ilgili daha fazla bilgi edinmek için bu rehberde bulunan aşağıdaki bölümleri inceleyebilirsiniz:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Kontrol akışı ve hata yakalama</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Döngüler ve iterasyon</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions">Fonksiyonlar</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">İfadeler ve operatörler</a></li> -</ul> - -<p>Sonraki bölümde, kontrol akışının oluşturulması ve hata yakalamaya göz atacağız.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/tr/web/javascript/guide/index.html b/files/tr/web/javascript/guide/index.html deleted file mode 100644 index 5e4e177f58..0000000000 --- a/files/tr/web/javascript/guide/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: JavaScript Rehberi -slug: Web/JavaScript/Guide -tags: - - AJAX - - Intermediate - - JavaScript - - JavaScript_Guide - - NeedsTranslation - - TopicStub -translation_of: Web/JavaScript/Guide ---- -<div>{{jsSidebar("JavaScript Rehberi")}}</div> - -<p class="summary">JavaSript Rehber'i size <a href="/tr/docs/Web/JavaScript">JavaScript'i</a> nasıl kullanacağınızı ve dil hakkında genel bir bakış açısını sunar. JS hakkında daha geniş bir bilgiye ihtiyacınız varsa, <a href="/tr/docs/Web/JavaScript/Reference">JavaScript referansına</a> bakınız.</p> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Introduction">Giriş</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">Rehber hakkında</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">JavaScript hakkında</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript ve Java</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Araçlar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Introduction#Hello_world">Merhaba Dünya</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types">Dil bilgisi ve türler</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Temeller">Temel söz dizimleri ve yorumlar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Tanımlamalar">Tanımlamalar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Değişkenin_etki_alanı">Değişkenin etki alanı </a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Değişkeni_yukarı_alma_(hoisting)">Değişkeni fonksiyon dışına alma(hoisting) </a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Veri_yapıları_ve_tipleri">Veri yapıları ve tipleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Grammar_and_types#Sabitler">Sabitler</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Ifadeler">Kontrol akışı ve hata yakalama</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#if...else_statement">if...else</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#switch_statement">switch</a></code><br> - <a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#Utilizing_Error_objects">Hata nesneleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Ifadeler#Promises">Promise nesneleri</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration">Döngüler ve yinelemeler</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#for_döngüsü">for</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#while_döngüsü">while</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_döngüsü">do...while</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#break_ifadesi">break</a>/<a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_ifadesi">continue</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_döngüsü">for..in</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_döngüsü">for..of</a></code></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Functions">Fonksiyonlar</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Functions#Defining_functions">Fonksiyon tanımlama</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Calling_functions">Fonksiyon çağırma</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Function_scope">Fonksiyonun uzayı</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Closures">Değişken gizleme (Closures</a>)<br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Argümanlar</a> ve <a href="/tr/docs/Web/JavaScript/Guide/Functions#Function_parameters">parametreler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Ok fonksiyonları</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators">İfadeler ve operatörler</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Atama</a> <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Kıyaslama</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Aritmetik operatörler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bit seviyesinde</a> ve <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">mantıksal operatörler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Durumsal (üçlü) operatör</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates">Sayılar ve tarihler</a></span><a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers">Sayı sabitleri</a> - <p><a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> nesnesi</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> nesnesi</a><br> - <a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> nesnesi</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Text_formatting">Metin formatlama</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#String_literals">Metin sabitleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> nesnesi</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_strings">Şablon metinler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Çoklu dil desteği verme</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Regular_Expressions">Düzenli İfadeler</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Indexed_collections">İndeksli koleksiyonlar</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Diziler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Indexed_collections#Array_comprehensions">D</a>izi tipleri</p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections">Anahtarlı koleksiyonlar</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects">Nesnelerle çalışma</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Nesneler ve özellikleri</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Nesne oluşturma</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Metot tanımlama</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Get ve set ifadeleri</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Nesne modelinin detayları</a></span> - <p><a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototip temelli Nesneye Dayalı Programlama </a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Nesne hiyerarşileri oluşturma</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Kalıtım</a></p> - </li> -</ul> - -<ul class="card-grid"> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators">Yineleyiciler ve oluşturucular</a></span> - - <p><a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Yineleyiciler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Yinelenebilenler</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Oluşturucular</a></p> - </li> - <li><span><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming">Üst düzey programlama</a></span> - <p><code><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy nesneleri</a></code><br> - <a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">İşleyiciler ve tuzaklar</a><br> - <a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Değiştirilebilir Proxy'ler</a><br> - <code><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code><a href="/tr/docs/Web/JavaScript/Guide/Meta_programming#Reflection"> nesnesi</a></p> - </li> -</ul> - -<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/tr/web/javascript/guide/introduction/index.html b/files/tr/web/javascript/guide/introduction/index.html deleted file mode 100644 index 64b7180c80..0000000000 --- a/files/tr/web/javascript/guide/introduction/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Introduction -slug: Web/JavaScript/Guide/Introduction -translation_of: Web/JavaScript/Guide/Introduction ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> - -<p class="summary">Bu bölümde JavaScript tanıtılacak ve bazı temel kavramları üzerine yoğunlaşılacaktır.</p> - -<h2 id="Halihazırda_biliyor_olmanız_gerekenler">Halihazırda biliyor olmanız gerekenler</h2> - -<p>Bu rehber aşağıdakileri biliyor olduğunuzu varsayar:</p> - -<ul> - <li>İnternet ve World Wide Web ({{Glossary("WWW")}}) hakkındaki genel kavramlari anlayabiliyor olmak.</li> - <li>İyi derecede HyperText Markup Language ({{Glossary("HTML")}}) bilgisi.</li> - <li>Biraz programlama deneyimi kazanılmış olması. Eğer programlamaya yeni başlıyorsanız anasayfadaki JavaScript <a href="/tr/docs/Web/JavaScript#Eğitim_Setleri">eğitim setleri</a>nden birini deneyin.</li> -</ul> - -<h2 id="JavaScript_hakkında_nereden_bilgi_edinirim">JavaScript hakkında nereden bilgi edinirim</h2> - -<p>MDN'deki JavaScript dökümantasyonu şunları içerir:</p> - -<ul> - <li><a href="/en-US/Learn">Web'i öğrenmek</a>: yeni başlayanlar için bilgi verir ve programlama ve internetin basit kavramlarını tanıtır.</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Rehberi</a>: (bu rehber) JavaScript dilini ve nesnelerini genel olarak tanıtır.</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Referansı</a>: JavaScript için detaylı başvuru kaynaklarını içerir.</li> -</ul> - -<p>JavaScript'te yeniyseniz, <a href="/en-US/Learn">öğrenme alanı</a> ve <a href="/en-US/docs/Web/JavaScript/Guide"><u><font color="#0066cc">JavaScript Rehberi</font></u></a> ile başlayınız. JavaScript temellerini sağlam olarak kavradığınızda, nesneler ve ifadeler ile ilgili detaylı bilgiler için özelleşmiş olan <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Referansı</a>'nı kullanabilirsiniz.</p> - -<h2 id="JavaScript_nedir">JavaScript nedir?</h2> - -<p>JavaScript, çok platformlu ve nesne yönelimli bir script dilidir. Küçük ve hafif bir dildir. Bir ana bilgisayar ortamında (örneğin, bir web tarayıcısında) JavaScript, programatik olarak kontrol sağlamak için kendi ortamındaki nesnelerine bağlanabilir.</p> - -<p>Javascript, <code>Array</code>, <code>Date</code>, and <code>Math </code>gibi nesneleri içeren standart nesne kütüphanesini ve <code>operatörler, kontrol yapıları </code>ve<code> ifadeler</code> gibi temel dil setlerini içerir. JavaScript çekirdeği, ilave nesneler ile birlikte çeşitli amaçlar için genişletilebilir.Örneğin:</p> - -<ul> - <li><em>İstemci-taraflı JavaScript,</em> yeni nesneler üretmek amacıyla çekirdek dili genişleterek tarayıcının ve kendi sahip olduğu Doküman Nesne Modeli'nin (DOM) kontrol edilebilmesini sağlar. Örnek olarak istemci-taraflı uzantılar, bir uygulamanın HTML formuna yeni öğeler ekleyebilmesine ve fare tıklamaları, form girdileri, ve sayfa dolaşımı gibi kullanıcı olaylarını yanıtlayabilmesine olanak sağlar.</li> - <li><em>Sunucu-taraflı JavaScript, </em>bir sunucu üzerinde çalışmakta olan JavaScript'e yönelik yeni nesneler üretmek suretiyle çekirdek dili genişletir. Örnek olarak, sunucu-taraflı uzantılar, bir uygulamanın veri tabanı ile iletişim kurmasına, bir işlemden başka bir işleme bilgi aktararak uygulamanın devamlılığını sağlamasına, veya sunucudaki dosya üzerinde değişiklikler yapmasına olanak sağlar.</li> -</ul> - -<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript ve Java</h2> - -<p>JavaScript ve Java bazı yönleriyle benzer olmakla birlikte temelde farklıdırlar. JavaScript dili, Java'ya benzer fakat JavaScript'te, sabit Java tipleri ve Java'daki güçlü tip denetimi yoktur. JavaScript'in Java ile benzerlik göstermesi nedeniyle, isminin LiveScript'ten JavaScript'te değiştirilmesine neden olan Java'daki çoğu söz dizim ifadesini, isimlendirme düzenini ve basit kontrol akışını yapılarını destekler.</p> - -<p>Java'nın tanımlanarak oluşturulmuş sınıfları derle-çalıştır sisteminin aksine; Javascript, veri tiplerinin ufak bir kısmı olan sayısal, boolean ve string veri tiplerini destekleyen çalışma sistemine sahiptir. <span id="result_box" lang="tr"><span class="hps">JavaScript'te, diğer dillerde yaygın olarak kullanılan</span> <span class="hps">sınıf</span> <span class="hps">temelli </span></span><span lang="tr"><span class="hps">nesne modeli</span> <span class="hps">yerine </span>prototip <span class="hps">temelli</span> <span class="hps">nesne</span> <span class="hps">modeli vardır. Prototip-temelli model, dinamik olarak miras almayı destekler. Böylelikle miras olarak alınan verinin, nesneler tarafından çoklanarak değiştirilebilmesini sağlanır. Ayrıca JavaScript, herhangi bir özel tanımlamaya gerek kalmadan fonksiyonları da destekler. Fonskiyonlar, esnek biçimlerde çalıştırılabilen metodlar halinde bir nesnenin özellikleri olabilirler.</span></span></p> - -<p>JavaScript, Java'ya göre oldukça serbest biçimli bir dildir. Tüm değişkenleri, sınıfları ve metodları baştan tanımlamanıza gerek yoktur. Metodların public, private, veya protected olup olmadığı ile ilgili kaygılanmanıza gerek yoktur ve arayüzleri tanımlamanıza gerek yoktur. Değişkenler, parametreler ve fonksiyon dönüş türleri üstü kapalı türler değildir. (Tipine derleyici karar verir.)</p> - -<p>Java, tip güvenliği ve hızlı çalıştırma için tanımlanmış bir sınıf-tabanlı programlama dilidir. Tip güvenliği, örneğin bir Java tamsayısını bir nesne referansına çeviremeyeceğiniz ya da gizli belleğe Java bytecodlarını bozarak ulaşamayacağınız anlamına gelir. Java'nın sınıf tabanlı modeli, programların sadece sınıflardan ve onların metodlarından oluştuğu anlamına gelir. Java'nın sınıf kalıtımı ve sıkı yazılışı, genellikle sıkıca bağlanmış nesne hiyerarşileri gerektirir. Bu gereksinimler, Java programlamayı JavaScript programlamadan daha kompleks yapar.</p> - -<p>Javascript'in küçük yapısının aksine temelleri HyperTalk ve dBASE gibi dinamik tipli dillere dayanır.Bu betik dilleri; kolay söz dizimi, özelleştirilmiş tümleşik yapısı ve nesne oluşturma için minimum gereksinimlere ihtiyaç duyması sayesinde diğer dillere göre daha geniş programcı kitlesine hitap eder.</p> - -<table class="standard-table"> - <caption>JavaScript ile Java dillerinin farkları</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>Nesne temellidir. Nesnelerin türleri arasında bir ayrım söz konusu değildir. Prototype mekanizması ile oluşturulan kalıtım sayesinde, değişkenler ve metodlar herhangi bir objeye dinamik olarak eklenebilir.</td> - <td>Nesne temellidir. Nesneler, sınıflar halinde birbirlerinden ayrılmışlardır ve örnekleri arasında oluşturulan kalıtım sınıf hiyerarşisi ile sağlanır. Sınıflar ve oluşturulan nesnelere dinamik olarak değişken ve metot eklemesi yapılamaz.</td> - </tr> - <tr> - <td>Değişkenlerin veri türlerinin tanımlanmasına gerek yoktur. İlk atama yapıldığında bir veri türüne sahip olurlar (dinamik tipleme). Örn: var degiskenAdi;</td> - <td>Değişkenlerin veri türleri tanımlanmak zorundadır (statik tipleme). Örn: String degiskenAdi.</td> - </tr> - <tr> - <td>Otomatik olarak sabit diske yazılamazlar.</td> - <td>Otomatik olarak sabit diske yazılabilirler.</td> - </tr> - </tbody> -</table> - -<p>Javascript ve Java ile ilgili farklılıklar hakkında daha fazla bilgi edinmek için, <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a> bölümüne göz atabilirsiniz.</p> - -<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript ve ECMAScript beyannamesi</h2> - -<p>JavaScript standardı, <a class="external" href="http://www.ecma-international.org/">Ecma International</a> tarafından belirlenir. Ecma International, JavaScript temelli standartlaştırılmış uluslararası bir programlama dili (ECMAScript) sunmak için, bilgi ve iletişim sistemlerinin standartlaştırılmasını sağlayan bir Avrupa derneğidir (ECMA'nın eski açınımı: European Computer Manufacturers Association (Avrupa Bilgisayar Üreticileri Derneği)). Standartlaştırılmış JavaScript versiyonu olan ECMAScript, standardı destekleyen tüm uygulamalarda aynı şekilde çalışır. Firmalar, açık standart dili kullanarak kendi Javascript dillerini oluşturabilirler. ECMAScript standardı ECMA-262 beyannamesi altında belgelendirilmiştir. JavaScript ve ECMAScript beyannameleri hakkında detaylı bilgi edinmek için <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> bölümüne bakabilirsiniz.</p> - -<p>ECMA-262 standardı ayrıca ISO tarafından ISO-16262 olarak onaylanmıştır. Beyannameyi <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International'ın web sitesinde</a> de bulabilirsiniz. ECMAScript beyannamesi, DOM (Doküman Nesnesi Modeli) hakkında bir tanımlama sunmaz. Zira DOM, <a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> ve <a href="https://whatwg.org/">WHATWG (Web Hypertext Application Technology Working Group)</a> tarafından standartlaştırılmıştır. DOM, HTML dokümanındaki nesnelerin, JavaScript betiğinize aktarılması için bir yol sunar. JavaScript ile programlamada kullanılan farklı teknolojiler hakkında bilgi edinmek için <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a> bölümüne bakabilirsiniz.</p> - -<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript dokümantasyonu ve ECMAScript beyannamesi farkları</h3> - -<p>ECMAScript beyannamesi, ECMAScript dilinin gerçekleştirilmesi için gereksinimleri belirler. Kendi ECMAScript gerçekleştiriminizi veya Firefox'taki SpiderMonkey gibi standartlara uyan bir ECMAScript motoru oluşturmanız için kullanışlıdır.</p> - -<p>ECMAScript dokümanı, programcıların betik yazması için düzenlenmemiştir; betik yazmak hakkında bilgi edinmek için için JavaScript dokümantasyonunu kullanabilirsiniz.</p> - -<p>ECMAScript beyannamesinin kullandığı terminoloji ve söz dizimine bir JavaScript programcısı alışkın olmayabilir. Dilin açıklaması ECMAScript'ten farklılık göstermesine rağmen, dilin kendisi aynı kalmıştır. Yani JavaScript, ECMAScript beyannamesinde belirlenen bütün fonksiyonelliği kapsar.</p> - -<p>JavaScript dokümantasyonu, JavaScript programcısının aşina olduğu şekilde dilin özelliklerini ele alır.</p> - -<h2 id="JavaScript_ile_başlangıç">JavaScript ile başlangıç</h2> - -<p>JavaScript'e başlamak kolaydır: tüm ihtiyacınız modern bir web tarayıcısı. Bu rehber, sadece Firefox'un son sürümlerinin desteklediği bazı JavaScript özelliklerini içerir, bu yüzden Firefox'un son sürümlerini kullanmak önerilir.</p> - -<p>Firefox'ta çalıştırabileceğiniz iki tane kullanışlı JS aracı vardır: Web konsol ve Scratchpad.</p> - -<h3 id="Web_Konsolu">Web Konsolu</h3> - -<p><a href="/en-US/docs/Tools/Web_Console">Web Konsolu</a> yüklü olan sayfanın yapısal içeriğini gösterir ve ayrıca o anda JavaScript kodlarınızı çalıştırabileceğiniz bir <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">komut satırı</a> da içerir.</p> - -<p>Web konsolunu açmak için (Ctrl+Shift+K) komutunu kullanabilir veya "Geliştirici" menüsünden "Tarayıcı Konsolu"'nu seçebilirsiniz. Geliştirici menüsü Firefox'unuzda sağ üst bölümde bulunan "Araçlar" kısmındadır. Tarayıcı konsolu penceresi sayfanın üstüne açılır. Konsolun en alt kısmında aşağıdaki şekilde JavaScript kodunu gireceğiniz ve çıktısını alabileceğiniz bir komut satırı bulunmaktadır:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Karalama_defteri">Karalama defteri</h3> - -<p>Web konsolu tek satırlı JavaScript kodunuzu çalıştırmak için iyi bir araçtır. Çok satırlı JavaScript kodları çalıştırmak istediginizde ise web konsolu'nun bunu yapma yetisi olsa da kullanışlı değildir ve yazdığınız kod örneklerini kaydedemez. Bu yüzden daha kompleks kod örnekleri için <a href="/en-US/docs/Tools/Scratchpad">Karalama defteri</a> daha iyi bir araçtır.</p> - -<p>Karalama defterini açmak için (Shift+F4) komutunu kullanabilir veya "Web geliştirici" menüsünden "Karalama defteri"'ni seçebilirsiniz. JavaScript kodu yazıp çalıştırabileceğiniz, farklı bir editör penceresi açılır. Ayrıca komutlarınızı diskinizde saklayabilir ve diskinizden yükleyebilirsiniz.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Merhaba_Dünya">Merhaba Dünya</h3> - -<p>JS'e başlamak için, Karalama defteri'ni açın ve ilk kodunuz olan "Merhaba Dünya" yazın:</p> - -<pre class="brush: js">function selamVer(adiniz) { - alert("Merhaba" + adiniz); -} - -selamVer("Dünya"); -</pre> - -<p>Yukarıda gösterildiği gibi yazdığınız kodu Karalama defteri penceresinden seçin ve çalıştırmak için Ctrl+R komutunu kullanın ve izleyin.</p> - -<p>İlerleyen sayfalar, daha kompleks uygulamar yazabileceğiniz JS syntaxlarını ve dil özelliklerini içerir.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/tr/web/javascript/guide/loops_and_iteration/index.html b/files/tr/web/javascript/guide/loops_and_iteration/index.html deleted file mode 100644 index 8b224ab288..0000000000 --- a/files/tr/web/javascript/guide/loops_and_iteration/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Döngüler ve yinelemeler -slug: Web/JavaScript/Guide/Loops_and_iteration -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Ifadeler", "Web/JavaScript/Guide/Functions")}}</div> - -<p class="summary">Döngüler, bir işlemin art arda yapılması için hızlı ve kolay bir yöntem sunarlar. <a href="/tr/docs/Web/JavaScript/Guide">JavaScript Rehberi</a>'nin bu bölümünde, JavaScript içerisinde yer alan çeşitli yineleme ifadeleri anlatılacaktır.</p> - -<p>Döngüleri şu şekildeki basit bir bilgisayar oyunu olarak düşünebilirsiniz: Doğu yönünde 5 adım ilerle ve devamında batı yönünde 3 adım ilerleyerek hazineyi bul. Bu fikri basitçe kodlamak gerekirse:</p> - -<pre class="brush: js notranslate">var adım; -for (adım = 0; adım < 5; adım++) { - // 5 defa ekrana yazıyor - // adım 0'dan 4'e kadar değerler alıyor. - console.log('Doğu yönünde bir adım atılıyor.'); -} -</pre> - -<p>Birçok döngü türü vardır, fakat özünde hepsi aynı şeyi yaparlar: ardı ardına belirlenen bir işlemi gerçekleştirirler. Genelde gerçekleştirilen işlem adımı 0'dan başlar. Döngünün bitiş ve başlangıç noktalarının belirlenmesi için çeşitli döngü mekanizmaları mevcuttur. Bir döngünün diğer döngülere göre daha avantajlı olmasını sağlayan farklı durumlar vardır.</p> - -<p>JavaScript'teki döngü ifadeleri aşağıdaki şekilde listelenmiştir:</p> - -<ul> - <li>{{anch("for döngüsü")}}</li> - <li>{{anch("do...while döngüsü")}}</li> - <li>{{anch("while döngüsü")}}</li> - <li>{{anch("Etiketlenmiş ifadeler")}}</li> - <li>{{anch("break ifadesi")}}</li> - <li>{{anch("continue ifadesi")}}</li> - <li>{{anch("for...in ifadesi")}}</li> - <li>{{anch("for...of ifadesi")}}</li> -</ul> - -<h2 id="for_döngüsü"><code>for</code> döngüsü</h2> - -<p>Bir {{jsxref("statements/for","for")}} döngüsü, belirlenen koşul sağlandığı sürece içerdiği komutların çalıştırılmasını sağlar. JavaScript'teki <code>for</code> döngüsü, Java ve C dilindeki <code>for</code> döngüsü ile benzerdir. For döngüsünün söz dizimi aşağıdaki şekildedir:</p> - -<pre class="syntaxbox notranslate">for ([başlangıçAtaması]; [koşulİfadesi]; [arttırımİfadesi]) - ifade -</pre> - -<p>Bir <code>for</code> döngüsündeki algoritmanın adımları aşağıdaki şekildedir:</p> - -<ol> - <li>Bir <code>başlangıçAtaması</code> ifadesi varsa çalıştırılır. Bu ifadede genellikle bir veya daha fazla döngü sayıcısına atama işlemi yapılır. Ayrıca değişken tanımı da yapılabilir.</li> - <li><code>koşulİfadesi</code> çalıştırılır. Eğer <code>koşulİfadesi</code> değeri <code>true</code> ise, <code>ifade</code> çalıştırılabilir. Eğer <code>koşulİfadesi</code> değeri <code>false</code> ise, <code>for</code> döngüsünden çıkılır. Eğer <code>koşulİfadesi</code> boş geçilirse, değeri her zaman true olarak varsayılır ve sonsuz döngü oluşturulmuş olur.</li> - <li><code>ifade</code> çalıştırılır. Birden fazla ifade çalıştırılacaksa, ifadeleri gruplamak için blok ifadesi (<code>{ ... }</code>) kullanılır.</li> - <li><code>arttırımİfadesi</code> varsa çalıştırılır ve 2 numaralı adıma geri dönülür.</li> -</ol> - -<h3 id="Örnek"><strong>Örnek</strong></h3> - -<p>Aşağıdaki fonksiyon, scroll'lanabilen bir listedeki seçilen değerlerin sayısını sayan bir <code>for</code> ifadesi içerir (buradaki liste, çoklu seçimler yapabilmeye izin veren bir {{HTMLElement("select")}} elemanıdır) . <code>for</code> ifadesinde <code>i</code> değişkeni tanımlanır ve sıfır değeri atanır. <code>i</code>'nin değerinin, <code><select></code> elemanındaki {{HTMLElement("option")}} elemanlarının sayısından daha az olup olmadığı kontrol edilir, <code>if</code> ifadesini çalıştırılır, ve döngü her tamamlandığında <code>i</code> değişkeni bir arttırılır.</p> - -<pre class="brush: html notranslate"><form name="selectForm"> - <p> - <label for="müzikTürleri">Sevdiğiniz müzik türlerini seçip aşağıdaki butona basınız:</label> - <select id="müzikTürleri" name="müzikTürleri" multiple="multiple"> - <option selected="selected">Pop</option> - <option>Rap</option> - <option>Rock</option> - <option>Arabesk</option> - <option>Türk Sanat Müziği</option> - <option>Klasik Müzik</option> - </select> - </p> - <p><input id="btn" type="button" value="Kaç tanesi seçildi?" /></p> -</form> - -<script> -function kaçTane(müzikTürleri) { - var seçilenMüzikSayısı = 0; - for (var i = 0; i < müzikTürleri.options.length; i++) { - if (müzikTürleri.options[i].selected) { - seçilenMüzikSayısı++; - } - } - return seçilenMüzikSayısı; -} - -var btn = document.getElementById("btn"); -btn.addEventListener("click", function(){ - alert('Seçilen müzik türü sayısı: ' + kaçTane(document.selectForm.müzikTürleri)) -}); -</script> - -</pre> - -<h2 id="do...while_döngüsü"><code>do...while</code> döngüsü</h2> - -<p>{{jsxref("statements/do...while", "do...while")}} döngüsü, belirlenen bir koşul sağlandığı sürece döngünün çalıştırılmasına olanak tanır. Bir <code>do...while</code> döngüsü aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">do - ifade -while (koşul); -</pre> - -<p><code>koşul</code> kontrol edilmeden hemen önce <code>ifade</code> çalıştırılır. Çoklu ifadelerin çalıştırılması için, blok ifadesi (<code>{...}</code>) kullanılarak ifadeler gruplandırılır. Eğer <code>koşul</code> sağlanırsa, <code>ifade</code> tekrar çalıştırılır. Çalıştırıldıktan sonra, <code>koşul</code> tekrar kontrol edilir. Eğer <code>koşul</code> sağlanmazsa, ifadenin çalıştırılması durdurulur ve <code>do...while</code> döngüsünden sonraki komutlar çalıştırılır. <code>koşul</code> kontrol edilmeden hemen önce <code>ifade</code> çalıştırıldığı için, <code>koşul</code> değeri <code>false</code> olsa bile blok satırınız içerisindeki kodlar 1 defa çalıştırılır.</p> - -<h3 id="Örnek_1"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki örnekte, <code>do</code> döngüsü en az bir kere çalıştırılır, ve i değişkeninin değeri 5'ten küçük olduğu sürece çalıştırma devam eder:</p> - -<pre class="brush: js notranslate">var i = 0; -do { - i += 1; - console.log(i); -} while (i < 5); -</pre> - -<h2 id="while_döngüsü"><code>while</code> döngüsü</h2> - -<p>Bir {{jsxref("statements/while","while")}} döngüsü, belirlenen koşul sağlandığı sürece çalıştırılmaya devam eder. Örnek bir <code>while</code> döngüsü aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">while (koşul) - ifade -</pre> - -<p>Döngü içerisindeki <code>ifade</code> çalıştırılmadan önce <code>koşul</code> kontrol edilir. Eğer koşul sağlanırsa, <code>ifade</code> çalıştırılır ve koşul tekrar kontrol edilir. Eğer <code>koşul</code> sağlanmazsa, döngü içerisindeki ifadenin çalıştırılması durdurulur ve while döngüsünden çıkılarak sonraki komutlar çalıştırılır.</p> - -<p>Çoklu ifadelerin çalıştırılması için, blok ifadesi (<code>{...}</code>) kullanılarak ifadeler gruplanır.</p> - -<h3 id="Örnek_1_2"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki <code>while</code> döngüsü, <code>n</code> değişkeni 3'ten küçük olduğu sürece çalıştırılır:</p> - -<pre class="brush: js notranslate">var n = 0; -var x = 0; -while (n < 3) { - n++; - x += n; -} -</pre> - -<p>Her döngüde, <code>n</code> değişkeninin değeri 1 arttırılır ve <code>x</code>'e eklenir. Bunun sonucunda <code>x</code> ve <code>n</code> değişkenleri aşağıdaki değerleri alırlar:</p> - -<ul> - <li>İlk kez döngü çalıştırılıp tamamlandığında: <code>n</code> = 1 ve <code>x</code> = 1</li> - <li>2. kez tamamlandığında: <code>n</code> = 2 ve <code>x</code> = 3</li> - <li>3. kez tamamlandığında: <code>n</code> = 3 ve <code>x</code> = 6</li> -</ul> - -<p>3. kez döngü çalıştırılıp tamamlandığında, <code>n < 3</code> koşulu artık true değerini almaz ve döngüden çıkılır.</p> - -<h3 id="Örnek_2"><strong>Örnek 2</strong></h3> - -<p>Sonsuz döngülerden uzak durulmalıdır. Döngü içerisindeki koşulun, eninde sonunda false değerini alacağı emin olunmalıdır; aksi taktirde, döngü sonsuza dek çalışır. Aşağıdaki <code>while</code> döngüsündeki ifade sonsuza dek çalışır, çünkü koşul asla false değerini alamaz:</p> - -<pre class="brush: js notranslate">while (true) { - console.log("Merhaba dünya"); -}</pre> - -<h2 id="Etiketlenmiş_ifadeler"><code>Etiketlenmiş ifadeler</code></h2> - -<p>Bir {{jsxref("statements/label","etiketlenmiş ifadede")}} , bir anahtar kelime ve bu kelimeye bağlı çalıştırılacak bir ifade bulunur.Anahtar kelime kullanılarak, program içerisindeki herhangi bir yerde, anahtar kelime ile ilişkili ifade çalıştırılabilir. Örneğin, bir döngü, anahtar kelime ile etiketlenerek, uygulama içerisindeki herhangi bir yerden çalıştırılabilir.</p> - -<p>Etiketlenmiş bir ifade aşağıdaki şekildedir:</p> - -<pre class="syntaxbox notranslate">etiket : - çalıştırılacak_ifade -</pre> - -<p>Etiket adı, herhangi bir değişken adının aldığı şekilde değerler alabilir. Etiket ile tanımlanan <code>çalıştırılacak_ifade </code>içerisinde herhangi bir komut yer alabilir.</p> - -<h3 id="Örnek_3"><strong>Örnek</strong></h3> - -<p>Bu örnekte, <code>döngüyüİşaretle</code> etiketi <code>while</code> döngüsünü tanımlar.</p> - -<pre class="brush: js notranslate"><code>döngüyüİşaretle</code>: -while (işaret == true) { - merhabaDünya(); -}</pre> - -<h2 id="break_ifadesi"><code>break</code> ifadesi</h2> - -<p>{{jsxref("statements/break","break")}} ifadesi kullanılarak bir döngüden, switch ifadesinden veya herhangi bir etiketlenmiş ifadeden çıkılabilir.</p> - -<ul> - <li>Etiket olmayan bir blokta break ifadesini kullandığınızda, <code>break</code>'i çevreleyen en içteki <code>while</code>, <code>do-while</code>, <code>for</code>, veya <code>switch</code> ifadesinden çıkılır ve koddaki sonraki komutların çalıştırılmasına devam edilir.</li> - <li>Etiket olan bir blokta <code>break</code> ifadesini kullanıldığında, etiketlenmiş olan ifadeden çıkılır.</li> -</ul> - -<p><code>break</code> ifadesinin söz dizimi aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">break [<em>etiket</em>]; -</pre> - -<p>Bu söz diziminin ilk ifadesi (<code>break</code>) ile, break'i çevreleyen en içteki döngü veya <code>switch</code>'ten çıkılır; ikinci ifade (<code>[<em>etiket</em>]</code>) ile belirlenen etiketten çıkılması sağlanır.</p> - -<h3 id="Örnek_1_3"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki örnekte, <code>değer</code>'e eşit olan dizi elemanı bulununcaya dek dizi içerisindeki elemanlar bir döngüde gezilir.</p> - -<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { - if (a[i] == <code>değer</code>) { - break; - } -}</pre> - -<h3 id="Örnek_2_Bir_etiketten_çıkma"><strong>Örnek 2: </strong>Bir etiketten çıkma</h3> - -<pre class="brush: js notranslate">var x = 0; -var z = 0; - -döngüdenÇıkmaEtiketi: while (true) { - console.log("Dıştaki döngüler: " + x); - x += 1; - z = 1; - while (true) { - console.log("İçteki döngüler: " + z); - z += 1; - if (z === 10 && x === 10) { - break döngüdenÇıkmaEtiketi; - } else if (z === 10) { - break; - } - } -} -</pre> - -<h2 id="continue_ifadesi"><code>continue</code> ifadesi</h2> - -<p>{{jsxref("statements/continue","continue")}} ifadesi; <code>while</code>, <code>do-while</code>, <code>for</code>, veya etiketlenmiş ifadelere tekrar girilmesini sağlar.</p> - -<ul> - <li><code>continue</code> ifadesini herhangi bir etiket belirtmeden tek başına kullanırsanız, kendisini çevreleyen döngü bloğundaki sonraki ifadelerin çalıştırılmasını sonlandırır, ve sonraki iterasyon ile birlikte döngünün çalışmasına devam edilir. <code>continue, break </code>ifadesinin tam tersine döngüyü tamamen sonlandırmaz. Örneğin <code>while</code> döngüsünde, koşul kontrolüne geri döner. <code>for</code> döngüsünde ise <code>arttırım-ifadesi</code>'ne döner.</li> - <li><code>continue</code> ifadesi bir etiket ile kullanılırken, etiket ile tanımlı olan döngünün devam etmesini sağlar.</li> -</ul> - -<p><code>continue</code> ifadesinin söz dizimi aşağıdaki gibidir:</p> - -<pre class="syntaxbox notranslate">continue [<em>etiket</em>]; -</pre> - -<h3 id="Örnek_1_4"><strong>Örnek 1</strong></h3> - -<p>Aşağıdaki örnekte yer alan <code>while</code> döngüsündeki <code>continue</code> ifadesi, <code>i</code>'nin değeri yalnızca 3 olduğunda çalıştırılmaktadır. Böylece <code>n</code>, sırasıyla şu değerleri alır: 1, 3, 7, 12.</p> - -<pre class="brush: js notranslate">var i = 0; -var n = 0; -while (i < 5) { - i++; - if (i == 3) { - continue; - } - n += i; -} -</pre> - -<h3 id="Örnek_2_2"><strong>Örnek 2</strong></h3> - -<p>Aşağıdaki örnekte bulunan <code>kontrolivej</code> etiketinde yer alan ifadede, <code>kontrolj</code> etiketli diğer bir ifade yer almaktadır. Eğer <code>continue</code> ifadesi ile karşılaşılırsa, uygulama <code>kontrolj</code>'nin o anki döngüsünü sonlandırır ve sonraki iterasyona geçer. Her <code>continue</code> ifadesi ile karşılaşıldığında, <code>kontrolj</code> döngüsü <code>false</code> değerini döndürene dek devam eder. <code>false</code> döndürdüğünde, döngüden çıkılır ve döngüden sonra gelen <code>kontrolivej</code> ifadesinin kalan kısmı tamamlanır. <code>kontrolivej</code> döngüsüne tekrar girilir. <code>i</code> değişkeni 4'ten büyük oluncaya dek <code>kontrolivej</code> etiketinin çalıştırılmasına devam ettirilir.</p> - -<p>Eğer <code>continue</code> ifadesi, <code>kontrolj</code> etiketi yerine <code>kontrolivej</code> etiketini içerseydi, program <code>kontrolivej</code> ifadesinin altındaki while döngüsünden devam edecekti.</p> - -<pre class="brush: js notranslate"><code>kontrolivej</code>: - while (i < 4) { - console.log(i); - i += 1; - <code>kontrolj</code>: - while (j > 4) { - console.log(j); - j -= 1; - if ((j % 2) == 0) { - continue <code>kontrolj</code>; - } - console.log(j + " tek sayıdır."); - } - console.log("i = " + i); - console.log("j = " + j); - }</pre> - -<h2 id="for...in_ifadesi"><code>for...in</code> ifadesi</h2> - -<p>{{jsxref("statements/for...in","for...in")}} döngüsü, bir nesnenin sayılabilir (<code>enumerable</code>) özelliklerinin üzerinde dolaşılmasını sağlar. Her bir özellik için JavaScript, belirlenen ifadeleri çalıştırır. Bir <code>for...in</code> döngüsü aşağıdaki şekilde oluşturulur:</p> - -<pre class="syntaxbox notranslate">for (değişken in nesne) { - çalıştırılacak_ifadeler -} -</pre> - -<h3 id="Örnek_4"><strong>Örnek</strong></h3> - -<p>Aşağıdaki fonksiyon, bir nesne ve nesnenin adını parametre olarak alır. Sonrasında nesnenin tüm özellikleri üzerinde gezer ve nesnede bulunan özelliklerin adını ve değerini listeleyen bir string döndürür. </p> - -<pre class="brush: js notranslate">function özellikleriListeOlarakVer(nesne, nesnenin_adi) { - var sonuç = ""; - for (var i in nesne) { - sonuç += nesnenin_adi + "." + i + " = " + nesne[i] + "<br>"; - } - sonuç += "<hr>"; - return sonuç; -} -</pre> - -<p><code>marka</code> <font face="Consolas, Liberation Mono, Courier, monospace">ve</font> <code>model</code> özelliklerini içeren bir <code>araba</code> nesnesi için <code>sonuç</code>, aşağıdaki şekilde olacaktır:</p> - -<pre class="brush: js notranslate">araba.marka = Tesla -araba.model = Model S -</pre> - -<h3 id="Dizilerde_kullanımı"><strong>Dizilerde kullanımı</strong></h3> - -<p>{{jsxref("Array")}} elemanlarında dolaşmak için <strong>for...in </strong>kullanımı çok cazip gözükse de for...in ifadesi, sayısal indekslere ek olarak kullanıcı tanımlı özelliklerin de isimlerini döndürür. Bu yüzden dizi üzerinde gezmek için, sayısal indeksler ile birlikte kullanılan geleneksel {{jsxref("statements/for","for")}} döngüsü daha elverişlidir. Çünkü örneğin bir Array nesnesinine özel bir değişken veya fonksiyon eklerseniz, for...in ifadesi dizi elemanlarının yanısıra eklediğiniz kullanıcı tanımlı özellikleri de getirir</p> - -<h2 id="for...of_ifadesi"><code>for...of</code> ifadesi</h2> - -<p>{{jsxref("statements/for...of","for...of")}} ifadesi bir döngü oluşturur ve <a href="/tr/docs/Web/JavaScript/Guide/iterable">gezilebilir (iterable) nesneler</a> ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} nesnesi vb.) üzerinde gezer.</p> - -<pre class="syntaxbox notranslate">for (değişken of nesne) { - çalıştırılacak_ifadeler<em> -</em>}</pre> - -<p>Aşağıdaki örnekte, <code>for...of</code> döngüsü ve {{jsxref("statements/for...in","for...in")}} döngüsü arasındaki fark gösterilmektedir. <code>for...in</code> döngüsü nesne değişkenlerinin isimleri üzerinde gezerken, <code>for...of</code> döngüsü ise değişkenlerin değerleri üzerinde gezer:</p> - -<pre class="brush:js notranslate">let dizi = [3, 5, 7]; -dizi.selam = "merhaba"; - -for (let i in dizi) { - console.log(i); // Çıktısı: "0", "1", "2", "selam" - console.log(typeof i); //string tipi -} - -for (let i of dizi) { - console.log(i); // Çıktısı: 3, 5, 7 - console.log(typeof i); //degiskenin sahip old. tip -} -</pre> - -<p>{{PreviousNext("Web/JavaScript/Guide/Ifadeler", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/tr/web/javascript/guide/working_with_objects/index.html b/files/tr/web/javascript/guide/working_with_objects/index.html deleted file mode 100644 index 7b3c555da6..0000000000 --- a/files/tr/web/javascript/guide/working_with_objects/index.html +++ /dev/null @@ -1,505 +0,0 @@ ---- -title: Nesnelerle çalışmak -slug: Web/JavaScript/Guide/Working_with_Objects -translation_of: Web/JavaScript/Guide/Working_with_Objects -original_slug: Web/JavaScript/Guide/Nesneler_ile_çalışmak ---- -<div>{{jsSidebar("JavaScript Rehberi")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> - -<p class="summary">JavaScript basit bir nesne tabanlı paradigmada tasarlanmıştır. Bir nesne bir özellikler koleksiyonudur ve bir özellik bir ad (veya anahtar) ile bir değer arasındaki ilişkidir. Bir özelliğin değeri bir fonksiyon olabilir, bu durumda özellik bir metod olarak bilinir. Tarayıcıda önceden tanımlanmış olan nesnelere ek olarak, kendi nesnelerinizi de tanımlayabilirsiniz. Bu bölümde, nesnelerin, özelliklerin, fonksiyonların ve metodların nasıl kullanıldığı ve kendi nesnelerinizin nasıl oluşturulacağı açıklanmaktadır.</p> - -<h2 id="Nesnelere_genel_bakış">Nesnelere genel bakış</h2> - -<p>JavaScript'teki nesneler, diğer birçok programlama dilinde olduğu gibi, gerçek hayattaki nesnelerle karşılaştırılabilir. JavaScript'teki nesneler kavramı gerçek hayattaki somut nesnelerle anlaşılabilir.</p> - -<p>JavaScript'te bir nesne, özellikleri ve tipiyle bağımsız bir varlıktır. Örneğin bir fincanla karşılaştırın. Bir fincan, özellikleri olan bir nesnedir. Bir fincan bir renge, bir tasarıma, ağırlığa, yapıldığı bir malzemeye vs. sahiptir. Aynı şekilde, JavaScript nesnelerinin de özelliklerini tanımlayan özellikleri olabilir.</p> - -<h2 id="Nesneler_ve_özellikleri">Nesneler ve özellikleri</h2> - -<p>A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:</p> - -<pre class="brush: js">objectName.propertyName -</pre> - -<p>Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let's create an object named <code>myCar</code> and give it properties named <code>make</code>, <code>model</code>, and <code>year</code> as follows:</p> - -<pre class="brush: js">var myCar = new Object(); -myCar.make = 'Ford'; -myCar.model = 'Mustang'; -myCar.year = 1969; -</pre> - -<p>Unassigned properties of an object are {{jsxref("undefined")}} (and not {{jsxref("null")}}).</p> - -<pre class="brush: js">myCar.color; // undefined</pre> - -<p>Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>). Objects are sometimes called <em>associative arrays</em>, since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the <code>myCar</code> object as follows:</p> - -<pre class="brush: js">myCar['make'] = 'Ford'; -myCar['model'] = 'Mustang'; -myCar['year'] = 1969; -</pre> - -<p>An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation. This notation is also very useful when property names are to be dynamically determined (when the property name is not determined until runtime). Examples are as follows:</p> - -<pre class="brush: js">// four variables are created and assigned in a single go, -// separated by commas -var myObj = new Object(), - str = 'myString', - rand = Math.random(), - obj = new Object(); - -myObj.type = 'Dot syntax'; -myObj['date created'] = 'String with space'; -myObj[str] = 'String value'; -myObj[rand] = 'Random Number'; -myObj[obj] = 'Object'; -myObj[''] = 'Even an empty string'; - -console.log(myObj); -</pre> - -<p>Please note that all keys in the square bracket notation are converted to string unless they're Symbols, since JavaScript object property names (keys) can only be strings or Symbols (at some point, private names will also be added as the <a href="https://github.com/tc39/proposal-class-fields">class fields proposal</a> progresses, but you won't use them with <code>[]</code> form). For example, in the above code, when the key <code>obj</code> is added to the <code>myObj</code>, JavaScript will call the {{jsxref("Object.toString", "obj.toString()")}} method, and use this result string as the new key.</p> - -<p>You can also access properties by using a string value that is stored in a variable:</p> - -<pre class="brush: js">var propertyName = 'make'; -myCar[propertyName] = 'Ford'; - -propertyName = 'model'; -myCar[propertyName] = 'Mustang'; -</pre> - -<p>You can use the bracket notation with <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> to iterate over all the enumerable properties of an object. To illustrate how this works, the following function displays the properties of the object when you pass the object and the object's name as arguments to the function:</p> - -<pre class="brush: js">function showProps(obj, objName) { - var result = ``; - for (var i in obj) { - // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain - if (obj.hasOwnProperty(i)) { - result += `${objName}.${i} = ${obj[i]}\n`; - } - } - return result; -} -</pre> - -<p>So, the function call <code>showProps(myCar, "myCar")</code> would return the following:</p> - -<pre class="brush: js">myCar.make = Ford -myCar.model = Mustang -myCar.year = 1969</pre> - -<h2 id="Enumerate_the_properties_of_an_object">Enumerate the properties of an object</h2> - -<p>Starting with <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="en-US/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a>, there are three native ways to list/traverse object properties:</p> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> loops<br> - This method traverses all enumerable properties of an object and its prototype chain</li> - <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> - This method returns an array with all the own (not in the prototype chain) enumerable properties' names ("keys") of an object <code>o</code>.</li> - <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> - This method returns an array containing all own properties' names (enumerable or not) of an object <code>o</code>.</li> -</ul> - -<p>Before ECMAScript 5, there was no native way to list all properties of an object. However, this can be achieved with the following function:</p> - -<pre class="brush: js">function listAllProperties(o) { - var objectToInspect; - var result = []; - - for(objectToInspect = o; objectToInspect !== null; - objectToInspect = Object.getPrototypeOf(objectToInspect)) { - result = result.concat( - Object.getOwnPropertyNames(objectToInspect) - ); - } - - return result; -} -</pre> - -<p>This can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because another property has the same name earlier in the prototype chain). Listing accessible properties only can easily be done by removing duplicates in the array.</p> - -<h2 id="Creating_new_objects">Creating new objects</h2> - -<p>JavaScript has a number of predefined objects. In addition, you can create your own objects. You can create an object using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Alternatively, you can first create a constructor function and then instantiate an object invoking that function in conjunction with the <code>new</code> operator.</p> - -<h3 id="Using_object_initializers"><span id="Object_initializers">Using object initializers</span></h3> - -<p>In addition to creating objects using a constructor function, you can create objects using an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Using object initializers is sometimes referred to as creating objects with literal notation. "Object initializer" is consistent with the terminology used by C++.</p> - -<p>The syntax for an object using an object initializer is:</p> - -<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier... - 2: value_2, // or a number... - // ..., - 'property n': value_n }; // or a string -</pre> - -<p>where <code>obj</code> is the name of the new object, each <code>property_<var>i</var></code> is an identifier (either a name, a number, or a string literal), and each <code>value_<var>i</var></code> is an expression whose value is assigned to the <code>property_<var>i</var></code>. The <code>obj</code> and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)</p> - -<p>Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that will not compare to each other as equal. Objects are created as if a call to <code>new Object()</code> were made; that is, objects made from object literal expressions are instances of <code>Object</code>.</p> - -<p>The following statement creates an object and assigns it to the variable <code>x</code> if and only if the expression <code>cond</code> is true:</p> - -<pre class="brush: js">if (cond) var x = {greeting: 'hi there'}; -</pre> - -<p>The following example creates <code>myHonda</code> with three properties. Note that the <code>engine</code> property is also an object with its own properties.</p> - -<pre class="brush: js">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; -</pre> - -<p>You can also use object initializers to create arrays. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">array literals</a>.</p> - -<h3 id="Using_a_constructor_function">Using a constructor function</h3> - -<p>Alternatively, you can create an object with these two steps:</p> - -<ol> - <li>Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.</li> - <li>Create an instance of the object with <code>new</code>.</li> -</ol> - -<p>To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called <code>Car</code>, and you want it to have properties for make, model, and year. To do this, you would write the following function:</p> - -<pre class="brush: js">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>Notice the use of <code>this</code> to assign values to the object's properties based on the values passed to the function.</p> - -<p>Now you can create an object called <code>mycar</code> as follows:</p> - -<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993); -</pre> - -<p>This statement creates <code>mycar</code> and assigns it the specified values for its properties. Then the value of <code>mycar.make</code> is the string "Eagle", <code>mycar.year</code> is the integer 1993, and so on.</p> - -<p>You can create any number of <code>Car</code> objects by calls to <code>new</code>. For example,</p> - -<pre class="brush: js">var kenscar = new Car('Nissan', '300ZX', 1992); -var vpgscar = new Car('Mazda', 'Miata', 1990); -</pre> - -<p>An object can have a property that is itself another object. For example, suppose you define an object called <code>person</code> as follows:</p> - -<pre class="brush: js">function Person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> - -<p>and then instantiate two new <code>person</code> objects as follows:</p> - -<pre class="brush: js">var rand = new Person('Rand McKinnon', 33, 'M'); -var ken = new Person('Ken Jones', 39, 'M'); -</pre> - -<p>Then, you can rewrite the definition of <code>Car</code> to include an <code>owner</code> property that takes a <code>person</code> object, as follows:</p> - -<pre class="brush: js">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> - -<p>To instantiate the new objects, you then use the following:</p> - -<pre class="brush: js">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); -var car2 = new Car('Nissan', '300ZX', 1992, ken); -</pre> - -<p>Notice that instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects <code>rand</code> and <code>ken</code> as the arguments for the owners. Then if you want to find out the name of the owner of car2, you can access the following property:</p> - -<pre class="brush: js">car2.owner.name -</pre> - -<p>Note that you can always add a property to a previously defined object. For example, the statement</p> - -<pre class="brush: js">car1.color = 'black'; -</pre> - -<p>adds a property <code>color</code> to car1, and assigns it a value of "black." However, this does not affect any other objects. To add the new property to all objects of the same type, you have to add the property to the definition of the <code>Car</code> object type.</p> - -<h3 id="Using_the_Object.create_method">Using the <code>Object.create</code> method</h3> - -<p>Objects can also be created using the {{jsxref("Object.create()")}} method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.</p> - -<pre class="brush: js">// Animal properties and method encapsulation -var Animal = { - type: 'Invertebrates', // Default value of properties - displayType: function() { // Method which will display type of Animal - console.log(this.type); - } -}; - -// Create new animal type called animal1 -var animal1 = Object.create(Animal); -animal1.displayType(); // Output:Invertebrates - -// Create new animal type called Fishes -var fish = Object.create(Animal); -fish.type = 'Fishes'; -fish.displayType(); // Output:Fishes</pre> - -<h2 id="Inheritance">Inheritance</h2> - -<p>All objects in JavaScript inherit from at least one other object. The object being inherited from is known as the prototype, and the inherited properties can be found in the <code>prototype</code> object of the constructor. See <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a> for more information.</p> - -<h2 id="Indexing_object_properties">Indexing object properties</h2> - -<p>You can refer to a property of an object either by its property name or by its ordinal index. If you initially define a property by its name, you must always refer to it by its name, and if you initially define a property by an index, you must always refer to it by its index.</p> - -<p>This restriction applies when you create an object and its properties with a constructor function (as we did previously with the <code>Car</code> object type) and when you define individual properties explicitly (for example, <code>myCar.color = "red"</code>). If you initially define an object property with an index, such as <code>myCar[5] = "25 mpg"</code>, you subsequently refer to the property only as <code>myCar[5]</code>.</p> - -<p>The exception to this rule is array-like object reflected from HTML, such as the <code>forms</code> array-like object. You can always refer to objects in these array-like objects by either their ordinal number (based on where they appear in the document) or their name (if defined). For example, if the second <code><FORM></code> tag in a document has a <code>NAME</code> attribute of "myForm", you can refer to the form as <code>document.forms[1]</code> or <code>document.forms["myForm"]</code> or <code>document.forms.myForm</code>.</p> - -<h2 id="Defining_properties_for_an_object_type">Defining properties for an object type</h2> - -<p>You can add a property to a previously defined object type by using the <code>prototype</code> property. This defines a property that is shared by all objects of the specified type, rather than by just one instance of the object. The following code adds a <code>color</code> property to all objects of type <code>Car</code>, and then assigns a value to the <code>color</code> property of the object <code>car1</code>.</p> - -<pre class="brush: js">Car.prototype.color = null; -car1.color = 'black'; -</pre> - -<p>See the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> property</a> of the <code>Function</code> object in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> for more information.</p> - -<h2 id="Defining_methods">Defining methods</h2> - -<p>A <em>method</em> is a function associated with an object, or, simply put, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more details. An example is:</p> - -<pre class="brush: js">objectName.methodname = functionName; - -var myObj = { - myMethod: function(params) { - // ...do something - } - - // OR THIS WORKS TOO - - myOtherMethod(params) { - // ...do something else - } -}; -</pre> - -<p>where <code>objectName</code> is an existing object, <code>methodname</code> is the name you are assigning to the method, and <code>functionName</code> is the name of the function.</p> - -<p>You can then call the method in the context of the object as follows:</p> - -<pre class="brush: js">object.methodname(params); -</pre> - -<p>You can define methods for an object type by including a method definition in the object constructor function. You could define a function that would format and display the properties of the previously-defined <code>Car</code> objects; for example,</p> - -<pre class="brush: js">function displayCar() { - var result = `A Beautiful ${this.year} ${this.make} ${this.model}`; - pretty_print(result); -} -</pre> - -<p>where <code>pretty_print</code> is a function to display a horizontal rule and a string. Notice the use of <code>this</code> to refer to the object to which the method belongs.</p> - -<p>You can make this function a method of <code>Car</code> by adding the statement</p> - -<pre class="brush: js">this.displayCar = displayCar; -</pre> - -<p>to the object definition. So, the full definition of <code>Car</code> would now look like</p> - -<pre class="brush: js">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; - this.displayCar = displayCar; -} -</pre> - -<p>Then you can call the <code>displayCar</code> method for each of the objects as follows:</p> - -<pre class="brush: js">car1.displayCar(); -car2.displayCar(); -</pre> - -<h2 id="Using_this_for_object_references">Using <code>this</code> for object references</h2> - -<p>JavaScript has a special keyword, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, that you can use within a method to refer to the current object. For example, suppose you have 2 objects, <code>Manager</code>and <code>Intern</code>. Each object have their own <code>name</code>, <code>age</code> and <code>job</code>. In the function <code>sayHi()</code>, notice there is <code>this.name</code>. When added to the 2 objects they can be called and returns the <code>'Hello, My name is'</code> then adds the <code>name</code> value from that specific object. As shown below. </p> - -<pre class="brush: js">const Manager = { - name: "John", - age: 27, - job: "Software Engineer" -} -const Intern= { - name: "Ben", - age: 21, - job: "Software Engineer Intern" -} - -function sayHi() { - console.log('Hello, my name is', this.name) -} - -// add sayHi function to both objects -Manager.sayHi = sayHi; -Intern.sayHi = sayHi; - -Manager.sayHi() // Hello, my name is John' -Intern.sayHi() // Hello, my name is Ben' -</pre> - -<p>The <code>this</code> refers to the object that it is in. You can create a new function called <code>howOldAmI()</code>which logs a sentence saying how old the person is. </p> - -<pre class="brush: js">function howOldAmI (){ - console.log('I am ' + this.age + ' years old.') -} -Manager.howOldAmI = howOldAmI; -Manager.howOldAmI() // I am 27 years old. -</pre> - -<h2 id="Defining_getters_and_setters">Defining getters and setters</h2> - -<p>A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> is a method that gets the value of a specific property. A <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> - -<p>The following illustrates how getters and setters could work for a user-defined object <code>o</code>.</p> - -<pre class="brush: js">var o = { - a: 7, - get b() { - return this.a + 1; - }, - set c(x) { - this.a = x / 2; - } -}; - -console.log(o.a); // 7 -console.log(o.b); // 8 -o.c = 50; -console.log(o.a); // 25 -</pre> - -<p>The <code>o</code> object's properties are:</p> - -<ul> - <li><code>o.a</code> — a number</li> - <li><code>o.b</code> — a getter that returns <code>o.a</code> plus 1</li> - <li><code>o.c</code> — a setter that sets the value of <code>o.a</code> to half of the value <code>o.c</code> is being set to</li> -</ul> - -<p>Please note that function names of getters and setters defined in an object literal using "[gs]et <em>property</em>()" (as opposed to <code>__define[GS]etter__</code> ) are not the names of the getters themselves, even though the <code>[gs]et <em>propertyName</em>(){ }</code> syntax may mislead you to think otherwise. To name a function in a getter or setter using the "[gs]et <em>property</em>()" syntax, define an explicitly named function programmatically using {{jsxref("Object.defineProperty")}} (or the {{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__")}} legacy fallback).</p> - -<p>The following code illustrates how getters and setters can extend the {{jsxref("Date")}} prototype to add a <code>year</code> property to all instances of the predefined <code>Date</code> class. It uses the <code>Date</code> class's existing <code>getFullYear</code> and <code>setFullYear</code> methods to support the <code>year</code> property's getter and setter.</p> - -<p>These statements define a getter and setter for the year property:</p> - -<pre class="brush: js">var d = Date.prototype; -Object.defineProperty(d, 'year', { - get: function() { return this.getFullYear(); }, - set: function(y) { this.setFullYear(y); } -}); -</pre> - -<p>These statements use the getter and setter in a <code>Date</code> object:</p> - -<pre class="brush: js">var now = new Date(); -console.log(now.year); // 2000 -now.year = 2001; // 987617605170 -console.log(now); -// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 -</pre> - -<p>In principle, getters and setters can be either</p> - -<ul> - <li>defined using <a href="#Object_initializers">object initializers</a>, or</li> - <li>added later to any object at any time using a getter or setter adding method.</li> -</ul> - -<p>When defining getters and setters using <a href="#Object_initializers">object initializers</a> all you need to do is to prefix a getter method with <code>get</code> and a setter method with <code>set</code>. Of course, the getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:</p> - -<pre class="brush: js">var o = { - a: 7, - get b() { return this.a + 1; }, - set c(x) { this.a = x / 2; } -}; -</pre> - -<p>Getters and setters can also be added to an object at any time after creation using the <code>Object.defineProperties</code> method. This method's first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here's an example that defines the same getter and setter used in the previous example:</p> - -<pre class="brush: js">var o = { a: 0 }; - -Object.defineProperties(o, { - 'b': { get: function() { return this.a + 1; } }, - 'c': { set: function(x) { this.a = x / 2; } } -}); - -o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property -console.log(o.b); // Runs the getter, which yields a + 1 or 6 -</pre> - -<p>Which of the two forms to choose depends on your programming style and task at hand. If you already go for the object initializer when defining a prototype you will probably most of the time choose the first form. This form is more compact and natural. However, if you need to add getters and setters later — because you did not write the prototype or particular object — then the second form is the only possible form. The second form probably best represents the dynamic nature of JavaScript — but it can make the code hard to read and understand.</p> - -<h2 id="Deleting_properties">Deleting properties</h2> - -<p>You can remove a non-inherited property by using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> operator. The following code shows how to remove a property.</p> - -<pre class="brush: js">// Creates a new object, myobj, with two properties, a and b. -var myobj = new Object; -myobj.a = 5; -myobj.b = 12; - -// Removes the a property, leaving myobj with only the b property. -delete myobj.a; -console.log ('a' in myobj); // output: "false" -</pre> - -<p>You can also use <code>delete</code> to delete a global variable if the <code>var</code> keyword was not used to declare the variable:</p> - -<pre class="brush: js">g = 17; -delete g; -</pre> - -<h2 id="Comparing_objects">Comparing objects</h2> - -<p>In JavaScript, objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p> - -<pre class="brush: js">// Two variables, two distinct objects with the same properties -var fruit = {name: 'apple'}; -var fruitbear = {name: 'apple'}; - -fruit == fruitbear; // return false -fruit === fruitbear; // return false</pre> - -<pre class="brush: js">// Two variables, a single object -var fruit = {name: 'apple'}; -var fruitbear = fruit; // Assign fruit object reference to fruitbear - -// Here fruit and fruitbear are pointing to same object -fruit == fruitbear; // return true -fruit === fruitbear; // return true - -fruit.name = 'grape'; -console.log(fruitbear); // output: { name: "grape" }, instead of { name: "apple" } -</pre> - -<p>For more information about comparison operators, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>To dive deeper, read about the <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">details of JavaScript's object model</a>.</li> - <li>To learn about ECMAScript 2015 classes (an alternative way to create objects), read the <a href="/en-US/docs/Web/JavaScript/Reference/Classes">JavaScript classes</a> chapter.</li> -</ul> - -<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> |