diff options
Diffstat (limited to 'files/tr/conflicting')
10 files changed, 1913 insertions, 0 deletions
diff --git a/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..112741627e --- /dev/null +++ b/files/tr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,148 @@ +--- +title: Cascading and inheritance +slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +tags: + - Başlarken + - CSS + - Kılavuz + - Rehber + - Web + - Yeni başlayanlar için +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}<span class="seoSummary">This is the fourth section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial; it outlines how stylesheets interact in a cascade, and how elements inherit style from their parents. You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.</span></p> + +<h2 class="clearLeft" id="Basamaklama(Cascading)_ve_kalıtım(Inheritance)">Basamaklama(Cascading) ve kalıtım(Inheritance)</h2> + +<p>Bir elementin son stili kompleks bir şekilde birbiriyle etkileşen bir çok yerde belirtilebilir. Bu kompleks etkileşim CSS'e güçlü bir yapı sağlar fakat; bir çok yerde bulunan stiller bazen karışabilir, hata ayıklamayı zorlaştırabilir. Bu duruma engel olmak için CSS'in öncelik sırası vardır. Bu öncelik kurallarını tarayıcı sıra ile uygular ve elementin stilini verir.</p> + +<p>Basamaklama ile gelen stillerin üç ana kaynağı vardır :</p> + +<ul> + <li>Tarayıcının markup dili için geçerli default stili.</li> + <li>Okuyucunun belirlediği stiller.</li> + <li>Belgenin yazarı tarafından belirtilen stiller. Bu stiller üç yerde bulunabilir; + <ul> + <li>Harici bir dosyada (örneğin: .../styles/style.css) ; bu kurs öncelikle bu yöntem üzerinde durmaktadır.</li> + <li>Belgenin başlangıcında (markup dilinde bu yöntem için en uygun yer <head> elementi içidir.) Bu yöntem sadece uygulanan belge için kullanılabilir.</li> + <li>Elementin içinde (markup dilinde elementlerin başlama tag'lerinin içine o elementin stili eklenebilir.); bu yöntem bakım ve test için kullanılabilir.</li> + </ul> + </li> +</ul> + +<p>Okuyucunun belirlediği stil, tarayıcıda default bulunan stili değiştirebilir. Ardından belgenin yaratıcısının stili biraz daha değişiklik yapar. Bu kursta, siz belgenin yazarısınız. Sadece belgenin yazarının stilleri üzerinde çalışacağız.</p> + +<div class="tuto_example"> +<div class="tuto_type">Örnek</div> + +<p>Bu kurstaki belgeleri okuyorken, stillerin bir kısmı, tarayıcınızın HTML için belirlediğini default stillerden gelir.</p> + +<p>Bir kısmı, sizin tarafınızdan düzenlenmiş tarayıcı stil ayarlarından gelir. Firefox'ta, ayarlar Tercihler kısmından veya tarayıcı dosyaları içinde bulunan <code>userContent.css </code>stil dosyasından düzenlenebilir.</p> + +<p>Stillerin çoğu kısmı ise, server'da bulunan stil belgesinden gelmektedir.</p> +</div> + +<p>Örnek belgenizi tarayıcınızda açtığınızda, {{ HTMLElement("strong") }} elementleri kalın görünecektir. Bu tarayıcınızın HTML için belirttiği stilden gelir.</p> + +<p>{{ HTMLElement("strong") }} elementleri kırmızıdır. Bu stil sizin belirttiğiniz stildir.</p> + +<p>Ayrıca {{ HTMLElement("strong") }} elementleri {{HTMLElement("p") }} elementinin stillerini devralırlar. Aynı şekilde {{ HTMLElement("p") }} elementi de {{ HTMLElement("body") }} elementinin stillerinin varisidir.</p> + +<p>Yazarın stilleri önceliğe sahiptir, ardından okuyucunun stilleri ve sonra tarayıcının defaul stilleri gelir.</p> + +<p>Kalıtsal stillemede, en ufak elementin stili ( mesela {{ HTMLElement("strong") }} elementi ) ebeveyni olan elementin stillerinden daha önceliklidir.</p> + +<p>Stilin uygulama sadece önceliğe bağlı değildir. Yani en ufak elementin önceliği en fazla olduğunda sadece onun stili uygulanmaz. Bir sonraki sayfada daha ayrıntılı açıklanacaktır.</p> + +<div class="tuto_details"> +<p><strong>Detay</strong></p> + +<p>CSS, <code>!important</code> kelimesi yardımıyla okuyucuya stillerinde yazardan üstünlük sağlayabilir.</p> + +<p>Bunun belgenin yazarı için anlamı, belgeyi okuyucunun nasıl gördüğünün kesin olarak bilinemeyeceğidir.</p> + +<p>Eğer basamaklama ve kalıtım ile ilgili daha fazla detay öğenmek istiyorsanız, CSS Spesifikasyonu'ndaki <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> belgesine göz atın.</p> +</div> + +<h2 id="Çalışma_Kalıtımın_kullanımı">Çalışma: Kalıtımın kullanımı</h2> + +<ol> + <li>Editörünüzde örnek CSS dosyanızı açın.</li> + <li>Aşağıdaki satırı kopyalayın ve yapıştırın. Orada zaten bulunan satırın altına veya üstüne yapıştırmanızın hiç bir önemi yoktur. Fakat, en üste eklemek biraz daha mantıklıdır, çünkü {{ HTMLElement("p") }} elementi {{ HTMLElement("strong") }} elementinin ebeveynidir, üstüdür: + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>Tarayıcınızı yenileyin ve örnek belgenizdeki değişikliği görün. <code>text-decoration: underline</code> değeri paragraftaki tüm harfleri, baş harfler dahil, etkileyecektir.{{ HTMLElement("strong") }} elementleri, altçizgi stilini miras olarak, ebeveyni olan {{ HTMLElement("p") }} elementinden almıştır. Fakat {{ HTMLElement("strong") }} elementi kırmızı olarak belirtilmişti. Kırmızı onun kendi stilidir; bu yüzden kırmızı, ebeveyni olan {{ HTMLElement("p") }}'nin renk stili maviden önceliklidir.</li> +</ol> + +<h2 id="Before" name="Before">Öncesi</h2> + +<h3 id="HTML_içeriği">HTML içeriği</h3> + +<pre class="brush: html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h3 id="CSS_içeriği">CSS içeriği</h3> + +<pre class="brush: css">strong {color:red} +</pre> + +<p>{{ EmbedLiveSample('Before') }}</p> + +<h2 id="After" name="After">Sonrası</h2> + +<h3 id="HTML_içeriği_2">HTML içeriği</h3> + +<pre class="brush: html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p></pre> + +<h3 id="CSS_içeriği_2">CSS içeriği</h3> + +<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline} +strong {color:red}</pre> + +<p>{{ EmbedLiveSample('After') }}</p> + +<p> </p> + +<div class="tuto_example"> +<div class="tuto_type">Ödev</div> +Şablonunuzu sadece kırmızı harflerin altıçizili olması için değiştirin: + +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: red; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Ödevin çözümünü gör.</a></div> + +<p> </p> + +<h2 id="Bir_sonraki">Bir sonraki?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Şablonunuzda <p> ve <strong> tag'leri için stil belirlerken direk olarak belgenizde bulunan tag isimlerine stiller atadık. Bir sonraki bölümde, stilleri daha <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seçici yollar</a> ile nasıl belirtebileceğinizi öğreneceksiniz.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..3cc3c2d098 --- /dev/null +++ b/files/tr/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,119 @@ +--- +title: CSS nedir? +slug: conflicting/Learn/CSS/First_steps/How_CSS_works +tags: + - Başlangıç + - Başlarken + - CSS + - Yeni başlayanlar için + - kitapçık + - Örnek +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Web/Guide/CSS/Getting_started/css_nedir +--- +<div>Css {{CSSTutorialTOC}}</div> + +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p> + +<h2 class="clearLeft" id="Bilgi_CSS_nedir">Bilgi: CSS nedir</h2> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), belgelerin kullanıcılara nasıl sunulacağını özelleştiren bir dildir.</p> + +<p><em>Belge</em>, bir imleme(<em>markup) </em>dili kullanılarak yapılandırılmış bilgi yığınıdır.</p> + +<p>Belgenin kullanıcıya sunuluşu, ziyaretçileriniz için kullanışlı bir biçime çevrilmesi demektir. Tarayıcılar, Firefox, Chrome ya da Internet Explorer gibi, belgelerin görsel olarak sunulması için tasarlanmıştır, örneğin, bilgisayar ekranında, yansıtımda(projektör) ya da yazıcıda.</p> + +<div class="tuto_example"> +<p><strong>Örnekler</strong></p> + +<ul> + <li>Bir web sayfası okuduğunuz bir belge gibidir. Web sayfasında gördüğünüz bilgiler, genellikle bir imleme<em> </em>dili olan HTML(Hyper Text Markup Language) ile yapılandırılmıştır.</li> + <li>Bir uygulamadaki etkileşimli pencereler de aslında bir tür belgelerdir. Bu tür pencereler bir imleme diliyle (ör: XUL gibi) yapılandırılmış olabilir. Bunu bazı Mozilla uygulamalarında bulabilirsiniz. </li> +</ul> +</div> + +<p>Bu eğiticide, kutular daha fazla ayrıntıyı kapsar, yukarıda gördüğünüz daha ayrıntılı bilgi sunan kutu gibi. Onları gördüğünüzde okuyun, bağlantıları edin izleyin daha sonra okumak için atlayın.</p> + +<div class="tuto_details"> +<div class="tuto_type"><strong>Daha fazla ayrıntı</strong></div> + +<p>Bir belge, dosya ile aynı değildir. Bir belgeyi ancak bir dosyanın içerisinde saklayabilirsiniz.</p> + +<p>Şu an okuduğunuz belge bir dosyadadır. Tarayıcınız bu sayfayı çağırdığında, sunucu veritabanını sorgular ve sayfanın bölümlerini dosyalardan toplayarak belgeyi hazırlar. Aynı biçimde, bu öğreticide dosyaların içerisinde saklanan belgelerle çalışacaksınız.</p> + +<p>Bu sitenin diğer sayfalarında imleme<em> </em>dilleri hakkında bilgi bulabilirsiniz;</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> + <td>web sayfaları için</td> + </tr> + <tr> + <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> + <td>belgeleri genel olarak yapılandırma için</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> + <td>Çizgeler için</td> + </tr> + <tr> + <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> + <td>Mozilla'da kullanıcı arayüzleri için</td> + </tr> + </tbody> +</table> + +<p>Bu eğiticinin ikinci bölümünde bu imleme<em> </em>dillerini göreceksiniz.</p> +</div> + +<div class="tuto_details"><strong>Daha fazla ayrıntı</strong> + +<p>Resmi CSS terimler dizgesinde, belgenin kullanıcıya sunulduğu bir program, kullanıcı aracısı (User Agent-UA) olarak isimlendirilir. Bir tarayıcı, bir çeşit kullanıcı aracısıdır. CSS yalnızca tarayıcılar için veya görünüm sunumu için değildir fakat bu eğiticinin birinci bölümünde, yalnızca tarayıcı için olan CSS ile çalışacaksınız.</p> + +<p>CSS'e ilişkin resmi terimleri için, World Wide Web Consortium (W3C) dan sağlanan CSS şartnamelerinin <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">deyişlerine</a> göz atın.W3C web için açık standartları hazırlayan uluslararası bir topluluktur.</p> +</div> + +<h2 id="Çalışma_Bir_belge_yaratmak">Çalışma: Bir belge yaratmak</h2> + +<ol> + <li>Bilgisayarınızda bir dizin oluşturun ve alıştırmalarınızı düzenleyin.</li> + <li>Yazı düzenleyicinizi açın.</li> + <li>Aşağıda gördüğünüz HTML kodlarını kopyalayıp yapıştırın. <code>belge1.html </code>adı ile kaydedin. + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>örnek belge</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html></pre> + + <p>{{ LiveSampleLink('Action_Creating_a_document', 'Yukarıdaki Örneği Görüntüle') }}</p> + </li> + <li>Tarayıcınızda kaydettiğiniz belgeyi açın. + <p>Tarayıcıda, aşağıdaki gibi ilk harfleri kalın olan yazıyı göreceksiniz;</p> + + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Eğer yukarıdakinin aynısını göremiyorsanız, bu tarayıcı ayarlarından kaynaklıdır. Yazı yüzleri, renkler ve boşluklar farklı olabilir. Bu gibi farklılıklar önemli değildir.</p> + </li> +</ol> + +<h2 id="Bir_sonraki_adım">Bir sonraki adım?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Belgenizde henüz CSS kullanmadınız. <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">Bir sonraki bölüm</a>'de, belgenizde CSS kullanacaksınız.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html new file mode 100644 index 0000000000..9b1673fc1b --- /dev/null +++ b/files/tr/conflicting/learn/css/first_steps/how_css_works_64ba4331a7a5f4319c6e06b06ccdd521/index.html @@ -0,0 +1,115 @@ +--- +title: Neden CSS Kullanılır +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_64ba4331a7a5f4319c6e06b06ccdd521 +tags: + - CSS + - CSS:Başlarken + - Kılavuz + - Web + - Yeni başlayan + - Yeni başlayanlar + - Örnek +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> + +<p>{{ previousPage("/tr/docs/Web/Guide/CSS/Getting_Started/CSS_Nedir", "CSS Nedir?") }}<span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Başlangıç</a> yönergesindeki bu bölüm CSS ve HTML belgeleri arasındaki ilişkiyi anlatır. İlk bölümde yarattığınız belgeye biçim eklemeyi, alıştırmayla öğreneceksiniz.</span></p> + +<h2 class="clearLeft" id="Bilgi_Neden_CSS_kullanılır">Bilgi: Neden CSS kullanılır?</h2> + +<p>Belgenizin tasarım, yerleşim ve görünüm ile ilgili çeşitlerini içeren biçim öğelerini, farklı ekran boyutlarında ve farklı aygıtlarda tanımlamak için CSS kullanılır. CSS kodlarınızı<code> <head></code> içerisine gömebilirsiniz (gömülü iç CSS) veya biçimlerinizi tanımlayan bir biçim sayfasını farklı bir dizine ekleyip çağırabilirsiniz (dış CSS). Farklı bir belgede bulunan biçim kurallarını belgenize eklemek için, <code><head></code> ögesi içerisine bağlantı vermeniz gerekir.</p> + +<p>Dış biçim sayfalasının bir çok üstünlüğü vardır. Biçim sayfalarınızı HTML içeriğinizden farklı bir belgede saklamak:</p> + +<ul> + <li>Tekrarlanan kodların önlenmesine yardım eder.</li> + <li>Kolay onarım yapılmasını sağlar.</li> + <li>Tek bir yerden bütün biçimlerinizi denetlemenizi sağlar.</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Örnek</div> + +<p>h2 ögesi için oluşturduğunuz biçim kuralı ile, tanımladığınız bütün h2 ögerlerini tek bir yerden denetleyebilirsiniz.</p> + +<p>Kullanıcı bir ağ sayfasını görüntülediğinde, sayfanın içeriğiyle birllikte tanımlanmış biçim kuralları yüklenir.</p> + +<p>Kullanıcı bir ağ sayfasını yazdırdığında, tanımladığınız özel biçim kuralları ile sayfanın okunabilirliğini artırabilirsiniz.</p> +</div> + +<p>CSS ve HTML nasıl birlikte çalışır? Genel olarak, HTML'yi belgenizin içeriğini belirlemek için kullanırsınız, biçim kuralları için CSS vardır. Bu öğreticiden sonra, bu düzenlemelerin nasıl yapıldığını göreceksiniz.</p> + +<div class="tuto_details"> +<div class="tuto_type">Daha fazla ayrıntı</div> + +<p>HTML gibi bir imleme dili biçim tanımlamak için bir kaç yol sağlar.</p> + +<p>Örneğin, HTML içerisinde <code><b></code> ögesini, yazıyı kalınlaştırmak için kullanabilirsiniz ve ardalan rengini <code><body></code> ögesi içerisinde tanımlayabilirsiniz.</p> + +<p>CSS ile bu özellikleri kullanamazsınız fakat bunlara gerek de kalmaz. Kullanmanız gereken bütün kodları tek bir yerde kullanabilirsiniz.</p> +</div> + +<h2 id="Çalışma_Bir_kalıp_hazırlamak">Çalışma: Bir kalıp hazırlamak</h2> + +<ol> + <li>Birinci bölümde eklediğiniz <code>belge1.html</code> ile aynı dizine bir belge daha ekleyin.</li> + <li>Eklediğiniz belgeyi <code>bicim1.css</code> olarak adlandırın. Bu sizin biçim belgeniz olacak.</li> + <li>CSS belgesi içerisine aşağıdaki satırı ekleyip kaydedin:</li> + <li> + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="Biçim_belgesi_ile_bağlantılamak">Biçim belgesi ile bağlantılamak</h3> + +<ol> + <li>Biçim belgeniz ile HTML'inizi ilişkilendirmek için, HTML belgesini düzenleyin. Aşağıdaki işaretli satırı ekleyin: + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>örnek belge</title> + <link rel="stylesheet" href="bicim1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Kaydedin ve HTML'yi tarayıcınızda açın, açıksa yenileyin. İlk harfler kırmızı olacaktır: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">Alıştırma</div> + +<p>CSS bazı renkler için rengin ingilizcesine izin verir.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Alıştırmanın yanıtını görün.</a></div> + +<h2 id="Sıradaki">Sıradaki</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "CSS Nasıl Çalışır.")}} Artık bir HTML belgesine bağlı bir biçim belgeniz var.</p> + +<p>Şimdi tarayıcınızın, sayfayı oluştururken bunları nasıl birleştirdiğini <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">öğrenebilirsiniz</a>.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html b/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html new file mode 100644 index 0000000000..e865718c65 --- /dev/null +++ b/files/tr/conflicting/learn/css/first_steps/how_css_works_bb137d8ec11d5e9680f32049e9a3cb26/index.html @@ -0,0 +1,137 @@ +--- +title: How CSS works +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_bb137d8ec11d5e9680f32049e9a3cb26 +tags: + - Başlarken + - CSS + - Kılavuz + - Web + - Yeni başlayan + - Yeni başlayanlar +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/Guide/CSS/Getting_started/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }}<span class="seoSummary">This third section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explains how CSS works in your browser and the purpose of the Document Object Model (DOM). You'll also learn how to analyze your sample document.</span></p> + +<h2 class="clearLeft" id="Bilgi_CSS_nasıl_çalışır">Bilgi: CSS nasıl çalışır</h2> + +<p>Bir tarayıcı bir belgeyi görüntülediğinde, belgenin içeriği ve stil bilgileri birleşir. Bu, iki adımda gerçekleşir:</p> + +<ol> + <li>Tarayıcı markup (HTML gibi) dilini ve <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model) içerisindeki CSS'i dönüştürür. DOM bilgisayar hafızasındaki belgeyi temsil eder. Belge içeriği ile stili kombine olur.</li> + <li>Tarayıcı DOM içeriğini gösterir<em>.</em></li> +</ol> + +<p>Bir markup dili belge yapısını oluşturmak için elementleri kullanır. Elementler < > arasında belirtilir. Bir çok elementin başlama ve bitiş etiketi vardır. Başlama etiketi için, işaretlerin arasına <elementinadı>, bitiş için </elementinadı> şeklinde kullanılır.Şu şekildedir;</p> + +<p><<em>elementinismi></em></p> + +<p>Bu elementte kullanacağınız içerik bu ikisi arasında yer almalıdır.</p> + +<p><em></elementinismi></em></p> + +<p>Depending on the markup language, some elements have only a start tag, or a single tag where the '<code>/</code>' comes after the element name. An element can also be a container and include other elements between its start tag and end tag. Just remember to always close the tags inside the container.</p> + +<p>DOM ağaçsı bir yapıya sahiptir. Markup dili içerisindeki her element, öznitelik ve text, bu ağaçsı yapı içerisinde bir düğüm noktasıdır. Düğümler diğer DOM düğümleri ile ilişki içindedir. Düğümler arasına kalıtsallığa benzeyen bir durum vardır. Kimi element üsttedir (parent), kimi element ise alttadır (sibling). Bir aile ağacı gibi düşünülebilir.</p> + +<p>DOM'u anlamak size CSS'te kolaylık sağlar, çünkü DOM, CSS'inizin ve belge içeriğinizin birleştiği yerdedir.</p> + +<div class="tuto_example"> +<div class="tuto_type">Örnek</div> + +<div class="tuto_type"> </div> +Örnek belgenizde, Başlama <p> ve onun bitişi </p> kullanılmak üzerei bir alan (container) yaratır: + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<p> </p> + +<p>{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p> + +<p>DOM'da, aşağıda, P'ye karşılık gelen düğüm bir ebeveyndir. Onun çocukları ise STRONG düğümleri ve text düğümleridir.STRONG düğümü ise, örnekte gördüğünüz kırmızı harflerin ebeveynidir. Kırmızı harfler kardeştir.Aşağıda bu yapı gösterilmiştir;</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="Çalışma_DOM'u_incelemek">Çalışma: DOM'u incelemek</h2> + +<h3 id="DOM_denetçisi">DOM denetçisi</h3> + +<p>DOM'u incelemek için, özel bir yazılıma ihtiyacınız var. Mozilla'nın <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) eklentisini kullanabilirsiniz. Eklenti ufak bir kurulum gerektirir. Aşağıda detaylıdır;</p> + +<ol> + <li>Örnek belgenizi Mozilla tarayıcısını kullanarak açın.</li> + <li>Tarayıcınızın menü kısmından, <strong>Araçlar > DOM Denetçisi</strong>, ya da <strong>Araçlar > Web Geliştirme > DOM Denetçisi</strong>. + <div class="tuto_details"> + <div class="tuto_type">Daha fazla detay</div> + + <p>Mozilla'nızda DOMi yoksa <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">eklentiler sitesinden yükleyin</a> ve bu öğreticiye geri dönün.</p> + + <p>DOMi yüklemek istemiyorsanız veya Mozilla'dan farklı bir tarayıcı kullanıyorsanız..............</p> + </div> + </li> + <li>In DOMi, expand your document's nodes by clicking on their arrows. + <p><strong>Note: </strong> Spacing in your HTML file may cause DOMi to show some empty text nodes, which you can ignore.</p> + + <p>Part of the result might look like this, depending on which nodes you have expanded:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>When you select any node, you can use DOMi's right-hand pane to find out more about it. For example, when you select a text node, DOMi shows you the text in the right-hand pane.</p> + + <p>When you select an element node, DOMi analyzes it and provides a huge amount of information in its right-hand pane. Style information is just part of the information it provides.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Challenge</div> + +<p>In DOMi, click on a <small>STRONG</small> node.</p> + +<p>Use DOMi's right-hand pane to find out where the node's color is set to red, and where its appearance is made bolder than normal text.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h3 id="Using_Web_X-Ray_Goggles">Using Web X-Ray Goggles</h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>shows less information than DOM Inspector, but is simpler to install and use.</p> + +<ol> + <li>Go to the home page for <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> + <li>Drag the bookmarklet link in that page to your browser toolbar.</li> + <li>Open your sample HTML document.</li> + <li>Activate Web X-Ray Goggles by clicking the bookmarklet on the toolbar.</li> + <li>Move your mouse pointer around over your document to see the elements in the document.</li> +</ol> + +<h2 id="Sonra">Sonra?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}If you took the challenge, you saw that style information from more than one place interacts to create the final style for an element. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">next page</a> explains more about these interactions.</p> diff --git a/files/tr/conflicting/learn/css/first_steps/index.html b/files/tr/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..3e7a954dcc --- /dev/null +++ b/files/tr/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,54 @@ +--- +title: CSS'e başlarken +slug: conflicting/Learn/CSS/First_steps +tags: + - CSS + - CSS:Başlarken + - Kitap + - Kılavuz + - Rehber + - Temel CSS Eğitimi + - Web + - Yeni başlayan + - Yeni başlayanlar +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/Guide/CSS/Getting_started +--- +<p><span class="seoSummary">Bu eğitimde <a href="/tr/docs/Web/Guide/CSS">Cascading Style Sheets</a> (CSS) 'in söz dizimi ve dilin ana özellikleri ile tanışacaksınız. CSS kullanılarak, tıpkı bir web sayfası gibi, bir belgenin görünümü değiştirilebilir. Bu eğitici size kendi bilgisayarınızda deneyebileceğiniz ve CSS'in günümüz tarayıcılarındaki özellik ve etkilerini görebileceğiniz örnekler sunacaktır.</span></p> + +<p>Bu eğitici CSS'e yeni başlayanlar için bir kılavuz niteliğindedir. Eğer daha fazla deneyiminiz varsa, CSS <a href="/tr/docs/Web/Guide/CSS">anasayfasında </a>daha kapsamlı kaynaklar mevcuttur.</p> + +<nav class="fancyTOC"><a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">CSS Nedir?</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">CSS'in Kullanım Amaçları</a><a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">CSS Çalışma Mantığı</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Basamaklama ve Kalıtım</a> <a class="button" href="/tr/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Seçiciler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Kod Okunulabilirliği</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Yazı Biçemleri</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Renkler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">İçerik</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Dizelgeler</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Kutular</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Belge Kalıbı</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Tablo Yapısı</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Ortam</a></nav> + +<h2 id="Başlarken_neler_gerekli">Başlarken neler gerekli?</h2> + +<ul> + <li>Bir yazı düzenleyici</li> + <li>Günümüz tarayıcılarından biri</li> + <li>Düzenleyici ve tarayıcının kullanımı için birazcık deneyim</li> +</ul> + +<p>Alıştırmalar öğrenmenize yardımcı olmak içindir ancak bütünüyle bir gereksinim değil. Öğrenmek için yalnızca okuyabilir ve görsellere bakabilirsiniz.</p> + +<h2 id="Eğitici_nasıl_kullanılır">Eğitici nasıl kullanılır</h2> + +<p>Bu eğiticiyi kullanmak için, sayfaları <strong>dikkatlice</strong> ve <strong>sırasıyla</strong> okuyun. Eğer bir sayfayı atlarsanız, sonraki sayfaları anlamanız zorlaşabilir.</p> + +<h3 id="Bölüm_I_CSS'in_Temelleri">Bölüm I: CSS'in Temelleri</h3> + +<p>CSS'in nasıl çalıştığını kavrayabilmek için <em>bilgi </em>bölümünü kullanın. CSS'i kendi bilgisayarınızda kullanmayı denemek için <em>çalışma </em>bölümünü deneyin.</p> + +<p>Anladığınızı sınamak için, her sayfanın sonundaki alıştırmayı yapın. Alıştırmaların çözümleri, alıştırmanın altındaki bağlantıdadır, gerek gördükçe bakabilirsiniz.</p> + +<h3 id="Bölüm_II_CSS'in_Kapsamı">Bölüm II: CSS'in Kapsamı</h3> + +<p>Eğiticinin ikinci bölümü, CSS'in diğer web bileşenleriyle ve Mozilla teknolojileriyle olan kapsamını gösterir. Örnekler sağlar.</p> + +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG çizgeleri</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML veri</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bağlamaları</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL kullanıcı arayüzleri</a></li> +</ol> diff --git a/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..bcb491fe9c --- /dev/null +++ b/files/tr/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,78 @@ +--- +title: Boolean.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +<div>{{JSRef}}</div> + +<p>Boolean.prototype özelliği {{jsxref ("Boolean")}} yapıcı methodunun prototipini temsil eder.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> + +<p class="hidden">Bu etkileşimli örnek için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projeye katkıda bulunmak istiyorsanız lütfen https://github.com/mdn/interactive-examples'ları kopyalayıp bize pull request gönderin.</p> + +<h2 id="sect1"> </h2> + +<p>{{jsxref("Boolean")}} instances inherit from <code>Boolean.prototype</code>. You can use the constructor's prototype object to add properties or methods to all {{jsxref("Boolean")}} instances.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>Bir örneğin prototipini oluşturan fonksiyonu döndürür. Bu varsayılan olarak {{jsxref ("Boolean")}} işlevidir.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>{{Jsxref ("Boolean")}} nesnesinin kaynağını içeren bir dize döndürür; eşdeğer bir nesne oluşturmak için bu dizeyi kullanabilirsiniz. {{Jsxref ("Object.prototype.toSource ()")}} methodunu geçersiz kılar.</dd> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>Nesnenin değerine bağlı olarak <code>"true"</code> ya da <code>"false"</code> dizesini döndürür. {{Jsxref ("Object.prototype.toString ()")}} methodunu geçersiz kılar.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>{{Jsxref ("Boolean")}} nesnesinin temel değerini döndürür. {{Jsxref ("Object.prototype.valueOf ()")}} methodunu geçersiz kılar.</dd> +</dl> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Özellikler</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>İlk tanım. JavaScript 1.0'da uygulanmaktadır.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div> +<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize pull request gönderin.</div> + +<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> +</div> diff --git a/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html b/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..db9db60531 --- /dev/null +++ b/files/tr/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,86 @@ +--- +title: Map.prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> özelliği {{jsxref("Map")}} kurucusunun prototipini temsil eder.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Tanım">Tanım</h2> + +<p>{{jsxref("Map")}} örnekleri {{jsxref("Map.prototype")}}'den miras alınır. Tüm <code>Map</code> örneklerine özellikler veya yöntemler eklemek için yapıcının prototip nesnesini kullanabilirsiniz.</p> + +<h2 id="Özellikleri">Özellikleri</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>Bir örneğin prototipini oluşturan işlevi döndürür. Bu, varsayılan olarak {{jsxref("Map")}} işlevidir.</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd><code>Map</code> nesnesindeki anahtar / değer çiftlerinin sayısını döndürür.</dd> +</dl> + +<h2 id="Yöntemler">Yöntemler</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd>Tüm anahtar / değer çiftlerini <code>Map</code> objesinden siler.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> + <dd><code>Map</code> nesnesindeki bir öge varsa ve kaldırılmışsa <code>true</code> öge yoksa <code>false</code> döndürür. <code>Map.prototype.has(key)</code> daha sonra <code>false</code> döndürür.</dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd>Ekleme sırasındaki <code>Map</code> nesnesindeki her öge için <strong><code>[anahtar, değer] </code></strong>dizisini içeren yeni bir <code>Iterator</code> nesnesini döndürür.</dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd><code>Map</code> nesnesindeki her anahtar - değer çifti için ekleme sırasına göre callbackFn ögesini bir kez çağırır. thisArg parametresi forEach için sağlanmışsa, her geri çağırma için bu değer olarak kullanılacaktır.</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> + <dd><code>key</code> ile ilişkilendirilmiş değeri veya hiçbir şey yoksa <code>undefined</code> değerini döndürür.</dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> + <dd><code>Map</code> nesnesindeki bir değerin <code>key</code> ile ilişkili olup olmadığını belirten bir boolean döndürür.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd><code>Map</code> nesnesindeki her bir ögenin<strong> anahtarlarını</strong> ekleme sırasına göre içeren yeni bir <code>Iterator</code> nesnesi döndürür.</dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> + <dd><code>Map</code>nesnesindeki <code>key</code> değerini ayarlar. <code>Map</code> nesnesini döndürür.</dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd><code>Map</code> nesnesindeki her bir ögenin <strong>değerlerini </strong>ekleme sırasına göre içeren yeni bir <code>Iterator</code> nesnesi döndürür.</dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd>Ekleme sırasındaki <code>Map</code> nesnesindeki her bir öge için<strong><code>[anahtar, değer]</code></strong> dizisini içeren yeni bir <code>Iterator</code> nesnesini döndürür.</dd> +</dl> + +<h2 id="Şartlar">Şartlar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Şart</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> + <p>İlk tanım</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak istiyorsanız, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini ziyaret etin ve bize bir istek gönderin.</div> + +<p>{{Compat("javascript.builtins.Map.prototype")}}</p> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> diff --git a/files/tr/conflicting/web/javascript/reference/operators/index.html b/files/tr/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..08ec51807a --- /dev/null +++ b/files/tr/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,295 @@ +--- +title: Arithmetic operators +slug: conflicting/Web/JavaScript/Reference/Operators +tags: + - Aritmetik Operatörler + - JavaScript +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Reference/Operatörler/Arithmetic_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Aritmetik operatörler</strong> sayısal değerleri (değişmez değerler veya değişkenler) kendi değişkeni olarak alır ve tek bir sayısal değer döndürür. Standart aritmetik operatörler toplama (+), çıkarma (-), çıkarma (*), ve bölme (/).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + + + +<h2 id="Addition" name="Addition">Toplama (+)</h2> + +<p>Toplama işleci, sayısal değişkenlerin veya dize birleşiminin toplamını üretir.</p> + +<h3 id="Syntax">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x + y +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// Number + Number -> Toplama +1 + 2 // 3 + +// Boolean + Number -> Toplama +true + 1 // 2 + +// Boolean + Boolean -> Toplama +false + false // 0 + +// Number + String -> Birleşim +5 + 'foo' // "5foo" + +// String + Boolean -> Birleşim +'foo' + false // "foofalse" + +// String + String -> Birleşim +'foo' + 'bar' // "foobar" +</pre> + +<h2 id="Subtraction" name="Subtraction">Çıkarma (-)</h2> + +<p>Çıkarma işleci (operator), iki değişkeni çıkarır ve farklarını üretir.</p> + +<h3 id="Söz_Dizimi">Söz Dizimi</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x - y +</pre> + +<h3 id="Örnekler">Örnekler</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +'foo' - 3 // NaN(Sayı Değil)</pre> + +<h2 id="Division" name="Division">Bölme (/)</h2> + +<p>Bölme operatörü, sol değişkenin bölüm olduğu ve sağ değişkenin bölen olduğu işlenenlerin bölümünü üretir.</p> + +<h3 id="Söz_Dizimi_2">Söz Dizimi</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x / y +</pre> + +<h3 id="Örnekler_2">Örnekler</h3> + +<pre class="brush: js">1 / 2 // 0.5 döndürür +1 / 2 // Java''da 0 döndürür +// (her iki sayı da açıkça kayan nokta sayısıdır) + +1.0 / 2.0 // JavaScript ve Java 0.5 döndürür + +2.0 / 0 // JavaScript sonsuz döndürür +2.0 / 0.0 // Sonsuzu da döndürür +2.0 / -0.0 // JavaScript eksi sonsuz da döndürür</pre> + +<h2 id="Multiplication" name="Multiplication">Çarpma (*)</h2> + +<p>Çarpma operatörü değişkenlerin ürününü üretir.</p> + +<h3 id="Söz_Dizimi_3">Söz Dizimi</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x * y +</pre> + +<h3 id="Örnekler_3">Örnekler</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN(Sayı Değil1) +Infinity * Infinity // Sonsuz +'foo' * 2 // NaN +</pre> + +<h2 id="Remainder" name="Remainder">Kalan (%)</h2> + +<p>Kalan operatörü, bir değişken ikinci bir değişken tarafından bölündüğünde kalan döndürür. Her zaman bölüm işareti alır.</p> + +<h3 id="Söz_Dizimi_4">Söz Dizimi</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> var1 % var2 +</pre> + +<h3 id="Örnekler_4">Örnekler</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +1 % -2 // 1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="Exponentiation" name="Exponentiation">Üs (**)</h2> + +<p>The exponentiation operator returns the result of raising first operand to the power second operand. That is, <code>var1</code><sup><code>var2</code></sup>, in the preceding statement, where <code>var1</code> and <code>var2</code> are variables. Exponentiation operator is right associative. <code>a ** b ** c</code> is equal to <code>a ** (b ** c)</code>.</p> + +<h3 id="Syntax_2">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> var1 ** var2 +</pre> + +<h3 id="Notes">Notes</h3> + +<p>In most languages like PHP and Python and others that have an exponentiation operator (**), the exponentiation operator is defined to have a higher precedence than unary operators such as unary + and unary -, but there are a few exceptions. For example, in Bash the ** operator is defined to have a lower precedence than unary operators. In JavaScript, it is impossible to write an ambiguous exponentiation expression, i.e. you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p> + +<pre class="brush: js">-2 ** 2; +// 4 in Bash, -4 in other languages. +// This is invalid in JavaScript, as the operation is ambiguous. + + +-(2 ** 2); +// -4 in JavaScript and the author's intention is unambiguous. +</pre> + +<h3 id="Examples_2">Examples</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>To invert the sign of the result of an exponentiation expression:</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>To force the base of an exponentiation expression to be a negative number:</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Increment" name="Increment">Artırma (++)</h2> + +<p>Artış operatörü işlenenini artırır (bir ekler) ve bir değer döndürür.</p> + +<ul> + <li>İlk önce değişken adı kullanılırsa, değişkenden sonra operatörle (örneğin, x++) kullanılırsa artmadan önce değeri artırır ve döndürür.</li> + <li>Ön ek kullanılırsa, değişkenden önce operatörle (örneğin, ++x), daha sonra artırıldıktan sonra değeri artıtrır ve döndürür.</li> +</ul> + +<h3 id="Söz_Dizimi_5">Söz Dizimi</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x++ yada ++x +</pre> + +<h3 id="Örnekler_5">Örnekler</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefix +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decrement" name="Decrement">Azaltma (--)</h2> + +<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p> + +<ul> + <li>If used postfix, with operator after operand (for example, x--), then it decrements and returns the value before decrementing.</li> + <li>If used prefix, with operator before operand (for example, --x), then it decrements and returns the value after decrementing.</li> +</ul> + +<h3 id="Syntax_3">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> x-- or --x +</pre> + +<h3 id="Examples_3">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefix +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Unary_negation" name="Unary_negation">Unary negation (-)</h2> + +<p>The unary negation operator precedes its operand and negates it.</p> + +<h3 id="Syntax_4">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> -x +</pre> + +<h3 id="Examples_4">Examples</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// Unary negation operator can convert non-numbers into a number +var x = "4"; +y = -x; // y = -4 +</pre> + +<h2 id="Unary_plus_2"><a name="Unary_plus">Unary plus</a> (+)</h2> + +<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal ("0x"-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p> + +<h3 id="Syntax_5">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> +x +</pre> + +<h3 id="Examples_5">Examples</h3> + +<pre class="brush: js">+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> +</ul> diff --git a/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html b/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html new file mode 100644 index 0000000000..aae13a1ced --- /dev/null +++ b/files/tr/conflicting/web/javascript/reference/operators_3b90ea9617c66e4283e266b64ea7ae4a/index.html @@ -0,0 +1,567 @@ +--- +title: Bitwise operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_3b90ea9617c66e4283e266b64ea7ae4a +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Reference/Operatörler/Bitwise_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Bitsel işleçler</strong> işlediği elemanlara ondalık, onaltılık veya <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">sayılar</a></code> yerine 32 bit diziler(sıfır ve birler) olarak davranır. Örneğin, onluk bir sayı olan 9, ikilik sistemde 1001 ile gösterilir. Bitsel işleçler, işlemin iki tarafınada ikili değerleriyle işlem yapar ancak JavaScript standartı olan sayısal değerleri döner.</p> + +<p>Aşağıdaki tablo JavaScript'in bitsel işleçlerini özetler:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operator</th> + <th>Usage</th> + <th>Description</th> + </tr> + <tr> + <td><a href="#Bitwise_AND">Bitwise AND</a></td> + <td><code>a & b</code></td> + <td>Bitsel işleçin iki tarafının karşılık gelen bitleri 1 ise, en az bir tanesi 0 ise 0 döndürür.</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Bitwise OR</a></td> + <td><code>a | b</code></td> + <td>Bitsel işleçin iki tarafının karşılık gelen bitlerinden en az biri 1 ise 1 döndürür.</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> + <td><code>a ^ b</code></td> + <td>Bitsel işleçin iki tarafının karşılık gelen bitlerinden ancak bir tanesi 1 ise, 1 döndürür.</td> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> + <td><code>~ a</code></td> + <td>İşlenenin bitlerini ters çevirir.</td> + </tr> + <tr> + <td><a href="#Left_shift">Left shift</a></td> + <td><code>a << b</code></td> + <td><code>a</code> sayısının ikili haline, sağına <code>b</code> (< 32) adet bit 0 ekleyerek sola doğru kaydırır.</td> + </tr> + <tr> + <td><a href="#Right_shift">Sign-propagating right shift</a></td> + <td><code>a >> b</code></td> + <td><code>a</code> sayısının ikili halini <code>b</code> (< 32) adet bit sağa kaydırır. Pozitif sayılar için b adet 0, negatif sayılar için 1 ekleyerek kaydırır.</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> + <td><code>a >>> b</code></td> + <td><code>a</code> sayısının ikili gösterimine <code>b</code> (< 32) bit sağa kaydırır, <code>a</code> sayısının pozitif negatif olmasına bakmadan sayının soluna <code>b</code> adet 0 ekler.</td> + </tr> + </tbody> +</table> + +<h2 id="İşaretli_32-bit_integer_sayılar">İşaretli 32-bit integer sayılar</h2> + +<p>The operands of all bitwise operators are converted to signed 32-bit integers in two's complement format. Two's complement format means that a number's negative counterpart (e.g. 5 vs. -5) is all the number's bits inverted (bitwise NOT of the number, a.k.a. ones' complement of the number) plus one. For example, the following encodes the integer 314:</p> + +<pre>00000000000000000000000100111010 +</pre> + +<p>The following encodes <code>~314</code>, i.e. the ones' complement of <code>-314</code>:</p> + +<pre>11111111111111111111111011000101 +</pre> + +<p>Finally, the following encodes <code>-314,</code> i.e. the two's complement of <code>-314</code>:</p> + +<pre>11111111111111111111111011000110 +</pre> + +<p>The two's complement guarantees that the left-most bit is 0 when the number is positive and 1 when the number is negative. Thus, it is called the <em>sign bit</em>.</p> + +<p>The number <code>0</code> is the integer that is composed completely of 0 bits.</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>The number <code>-1</code> is the integer that is composed completely of 1 bits.</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>The number <code>-2147483648</code> (hexadecimal representation: <code>-0x80000000</code>) is the integer that is composed completely of 0 bits except the first (left-most) one.</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>The number <code>2147483647</code> (hexadecimal representation: <code>0x7fffffff</code>) is the integer that is composed completely of 1 bits except the first (left-most) one.</p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>The numbers <code>-2147483648</code> and <code>2147483647</code> are the minimum and the maximum integers representable through a 32bit signed number.</p> + +<h2 id="Bitwise_logical_operators">Bitwise logical operators</h2> + +<p>Conceptually, the bitwise logical operators work as follows:</p> + +<ul> + <li>The operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). Numbers with more than 32 bits get their most significant bits discarded. For example, the following integer with more than 32 bits will be converted to a 32 bit integer: + <pre>Before: 11100110111110100000000000000110000000000001 +After: 10100000000000000110000000000001</pre> + </li> + <li>Each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on.</li> + <li>The operator is applied to each pair of bits, and the result is constructed bitwise.</li> +</ul> + +<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">& (Bitwise AND)</a></h3> + +<p>Performs the AND operation on each pair of bits. <code>a</code> AND <code>b</code> yields 1 only if both <code>a</code> and <code>b</code> are 1. The truth table for the AND operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Bitwise ANDing any number x with 0 yields 0. Bitwise ANDing any number x with -1 yields x.</p> + +<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3> + +<p>Performs the OR operation on each pair of bits. <code>a</code> OR <code>b</code> yields 1 if either <code>a</code> or <code>b</code> is 1. The truth table for the OR operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Bitwise ORing any number x with 0 yields x. Bitwise ORing any number x with -1 yields -1.</p> + +<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3> + +<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the XOR operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre>. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Bitwise XORing any number x with 0 yields x. Bitwise XORing any number x with -1 yields ~x.</p> + +<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3> + +<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the NOT operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Bitwise NOTing any number x yields -(x + 1). For example, ~-5 yields 4.</p> + +<p>Example with indexOf:</p> + +<pre class="brush: js">var str = 'rawr'; +var searchFor = 'a'; + +// this is alternative way of typing if (-1*str.indexOf('a') <= 0) +if (~str.indexOf(searchFor)) { + // searchFor is in the string +} else { + // searchFor is not in the string +} + +// here are the values returned by (~str.indexOf(searchFor)) +// r == -1 +// a == -2 +// w == -3 +</pre> + +<h2 id="Bitwise_shift_operators">Bitwise shift operators</h2> + +<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> + +<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> + +<h3 id="<<_(Left_shift)"><a name="Left_shift"><< (Left shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> + +<p>For example, <code>9 << 2</code> yields 36:</p> + +<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Bitwise shifting any number <strong>x</strong> to the left by <strong>y</strong> bits yields <strong>x * 2^y</strong>.</p> + +<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">>> (Sign-propagating right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> + +<p>For example, <code>9 >> 2</code> yields 2:</p> + +<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Likewise, <code>-9 >> 2</code> yields -3, because the sign is preserved:</p> + +<pre>. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> + +<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> + +<pre>. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields -3):</p> + +<pre>. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> + +<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> + +<p>Suppose there are 4 flags:</p> + +<ul> + <li>flag A: we have an ant problem</li> + <li>flag B: we own a bat</li> + <li>flag C: we own a cat</li> + <li>flag D: we own a duck</li> +</ul> + +<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> + +<pre class="brush: js">var flags = 5; // binary 0101 +</pre> + +<p>This value indicates:</p> + +<ul> + <li>flag A is true (we have an ant problem);</li> + <li>flag B is false (we don't own a bat);</li> + <li>flag C is true (we own a cat);</li> + <li>flag D is false (we don't own a duck);</li> +</ul> + +<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> + +<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, +// and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> + +<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> + +<pre class="brush: js">function createMask() { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> + +<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> + +<pre class="brush: js">function arrayFromMask(nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError('arrayFromMask - out of range'); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert('[' + array1.join(', ') + ']'); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>You can test both algorithms at the same time…</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>For didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> + +<pre class="brush: js">function createBinaryString(nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> +</ul> diff --git a/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html b/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html new file mode 100644 index 0000000000..8bebaa5873 --- /dev/null +++ b/files/tr/conflicting/web/javascript/reference/operators_603c79383d36dadbe5083df806de5999/index.html @@ -0,0 +1,314 @@ +--- +title: Mantıksal Operatörler +slug: >- + conflicting/Web/JavaScript/Reference/Operators_603c79383d36dadbe5083df806de5999 +tags: + - Değil + - JavaScript + - Mantıksal Operatörler + - Operator + - Referans + - ve + - ya da +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Mantıksal operatörler genellikle {{jsxref("Boolean")}} (mantıksal) değerleri ile kullanılır. Kullanıldıklarında, bir boolean değer döndürürler. Ancak, <code>&&</code> ve <code>||</code> operatörleri aslında belirtilmiş olan operandlardan birinin değerini döndürür, bu sebeple eğer bu operatörler Boolean olmayan değerler ile kullanılırsa, Boolean olmayan değerler üretebilirler.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Mantıksal operatörler aşağıdaki tabloda açıklanıyor:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operatör</th> + <th>Kullanım</th> + <th>Açıklama</th> + </tr> + <tr> + <td>Mantıksal VE (<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Eğer <code>expr1</code> false değerine dönüştürülebilirse, <code>expr1</code> döndürülür. Aksi halde, <code>expr2</code> döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, <code>&&</code> her iki operand <code>true</code> ise <code>true</code> ; aksi halde, <code>false</code> döndürür.</td> + </tr> + <tr> + <td>Mantıksal YA DA (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>Eğer <code>expr1</code> true değerine dönüştürülebilirse, expr1 döndürülür, aksi halde, <code>expr2</code> döndürülür. Böylece, Boolean değerleri ile kullanıldıklarında, <code>||</code> her iki operanddan herhangi biri <code>true</code> ise <code>true</code> döndürür.</td> + </tr> + <tr> + <td>Mantıksal DEĞİL (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td>Eğer operandın değeri <code>true</code> is false döndürür, aksi alde <code>true</code> döndürür.</td> + </tr> + </tbody> +</table> + +<p>Eğer bir değer <code>true</code> değerine dönüştürülebiliyorsa, ona {{Glossary("truthy")}} ismi verilir. Eğer bir değer <code>false</code> değerine dönüştürülebiliyorsa, ona {{Glossary("falsy")}} denir.</p> + +<p><code><a href="https://developer.mozilla.org/en-US/docs/Glossary/Falsy">False</a></code> değerine dönüştürülebilen ifadelere örnekler:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN;</code></li> + <li><code>0</code>;</li> + <li>boş string (<code>""</code>); </li> + <li><code>undefined</code>.</li> +</ul> + +<p>&& ve || operatörleri <code>Boolean</code> olmayan değerler ile kullanılabiliyor olmasına rağmen, döndürdükleri değerler her zaman <code>Boolean</code> değerlerine çevirilebildiğinden, halen <code>Boolean</code> operatörleri olarak düşünülebilirler.</p> + +<h3 id="Kısa-devre_değerlendirmeleri">Kısa-devre değerlendirmeleri</h3> + +<p>Mantıksal operatörler soldan sağa çalıştırıldıkları gibi, mümkünse aşağıdaki kurallar kullanılarak "kısa devre" testine tabi tutulurlar:</p> + +<ul> + <li><code>false && (<em>herhangi)</em></code> bir kısa devre, false değerine çevrilir.</li> + <li><code>true || (<em>herhangi)</em></code> bir kısa devre, true değerine çevrilir.</li> +</ul> + +<p>Mantık kuralları bu değerlendirmelerin doğruluğunu garantiler. Yukarıdaki ifadelerin tümünün çalıştırılmayacağına, bu sebeple hepsinin yan etkisinin olmayacağına dikkat edin. Ayrıca yukarıdaki ifadenin <code>(herhangi)</code> kısmının tamamıyla bir mantıksal ifadeye eşit olduğuna dikkat edin. (parantezler ile gösterildiği gibi).</p> + +<p>Örneğin, aşağıdaki iki fonksiyon birbirinin aynısıdır.</p> + +<pre class="brush: js">function shortCircuitEvaluation() { + doSomething() || doSomethingElse() +} + +function equivalentEvaluation() { + var flag = doSomething(); + if (!flag) { + doSomethingElse(); + } +} +</pre> + +<p>Ancak, aşağıdaki ifadeler operatör önceliğine göre eşit değildir ve sağ el operatörünün tek bir ifade olmasının önemini vurgular (gerekirse parantezler ile gruplanır).</p> + +<pre class="brush: js">false && true || true // returns true +false && (true || true) // returns false</pre> + +<h3 id="Mantıksal_VE_()"><a name="Logical_AND">Mantıksal VE (<code>&&</code>)</a></h3> + +<p>Aşağıdaki kod && (mantıksal VE) operatörüyle ilgili örnekleri gösterir.</p> + +<pre class="brush: js">a1 = true && true // t && t returns true +a2 = true && false // t && f returns false +a3 = false && true // f && t returns false +a4 = false && (3 == 4) // f && f returns false +a5 = "Cat" && "Dog" // t && t returns "Dog" +a6 = false && "Cat" // f && t returns false +a7 = "Cat" && false // t && f returns false +a8 = "" && false // returns "" +a9 = false && || // returns false +</pre> + +<h3 id="Mantıksal_YA_DA_()"><a name="Logical_OR">Mantıksal YA DA (<code>||</code>)</a></h3> + +<p>Aşağıdaki kod || (mantıksal YA DA) operatörüyle ilgili örnekleri gösterir.</p> + +<pre class="brush: js">o1 = true || true // t || t returns true +o2 = false || true // f || t returns true +o3 = true || false // t || f returns true +o4 = false || (3 == 4) // f || f returns false +o5 = "Cat" || "Dog" // t || t returns "Cat" +o6 = false || "Cat" // f || t returns "Cat" +o7 = "Cat" || false // t || f returns "Cat" +o8 = "" || false // returns false +o9 = false || "" // returns "" +</pre> + +<h3 id="Mantıksal_DEĞİL_(!)"><a name="Logical_NOT">Mantıksal DEĞİL (<code>!</code>)</a></h3> + +<p>Aşağıdaki kod ! (mantıksal DEĞİL) operatörüyle ilgili örnekleri gösterir.</p> + +<pre class="brush: js">n1 = !true // !t returns false +n2 = !false // !f returns true +n3 = !"Cat" // !t returns false +</pre> + +<h3 id="Dönüşüm_kuralları">Dönüşüm kuralları</h3> + +<h4 id="VE_operatörünü_YA_DA_operatörüne_dönüştürmek">VE operatörünü YA DA operatörüne dönüştürmek</h4> + +<p>Booleanları içeren aşağıdaki ifade:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>her zaman şuna eşittir:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="YA_DA_operatörünü_VE_operatörüne_çevirmek">YA DA operatörünü VE operatörüne çevirmek</h4> + +<p>Booleanları içeren aşağıdaki ifade:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>her zaman şuna eşittir:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="DEĞİL_operatörleri_arasında_dönüşüm_yapmak">DEĞİL operatörleri arasında dönüşüm yapmak</h4> + +<p>Booleanları içeren aşağıdaki ifade:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>her zaman şuna eşittir: </p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="İç_içe_geçmiş_parantezleri_kaldırmak">İç içe geçmiş parantezleri kaldırmak</h3> + +<p>Mantıksal operatörlerin soldan sağa değerlendirilmesi durumunda, kompleks bir ifadeden parantezleri bazı kuralları takip ederek kaldırmak mümkündür.</p> + +<h4 id="İç_içe_geçmiş_VE_operatörünü_kaldırmak">İç içe geçmiş VE operatörünü kaldırmak</h4> + +<p>Aşağıda, Boolean içeren bu bileşik işlem:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>her zaman şuna eşittir:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="İç_içe_geçmiş_YA_DA_operatörünü_kaldırmak">İç içe geçmiş YA DA operatörünü kaldırmak</h4> + +<p>Aşağıda, Boolean içeren bu bileşik ifade:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>her zaman şuna eşittir:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Özellik</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Tarifnamenin birkaç bölümünde tanımlandı: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Mantıksal VE (<code>&&</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td> + <p>Mantıksal YA DA (<code>||</code>)</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Mantıksal DEĞİL (<code>!</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Android üzerinde Chrome</th> + <th>Firefox Mobil (Gecko)</th> + <th>IE Mobil</th> + <th>Opera Mobil</th> + <th>Safari Mobil</th> + </tr> + <tr> + <td>Logical AND (<code>&&</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Logical OR (<code>||</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Logical NOT (<code>!</code>)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_bakın">Ayrıca bakın</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> +</ul> |